/* Massage Waard — boekingswidget van PlanVanzelf.
 *
 * De knop en modal komen uit embed.js (CMS → Bedrijfsgegevens → Scripts); de
 * inline widget op /contact/reservering-maken is een iframe in de CMS-inhoud
 * van die pagina. Deze stylesheet laadt altijd (ook zonder chatbot), samen met
 * js/booking.js.
 */

/* Het thema heeft een eigen "terug naar boven"-knop rechtsonder
 * (.bottombar__to-top: wit vlak, 45×45px, fixed op right:15px). Die staat
 * precies achter de chat- en boekknop. Verplaats hem naar linksonder — het
 * thema kent die positie zelf ook (.bottombar__to-top--left). */
.bottombar__to-top {
    right: auto;
    left: 15px;
}

/* Zwevende knoppen rechtsonder als één rij, van rechts naar links: chat
 * (js/chatbot.js), WhatsApp (Webstart-component) en de boekknop (embed.js).
 * Zelfde hoogte, schaduw en afstand; ontbreekt een knop, dan schuiven de
 * andere op. Chat leest --mw-fab via chatbot.css. */
:root {
    --mw-fab-r: clamp(16px, 4vw, 28px);
    --mw-fab: 56px;
    --mw-fab-gap: 10px;
    --mw-fab-stap: calc(var(--mw-fab) + var(--mw-fab-gap));
    --mw-fab-shadow: 0 10px 24px -10px rgba(43, 33, 24, .5), 0 2px 6px -1px rgba(43, 33, 24, .22);
}

/* Boekknop: embed.js zet hem fixed op right:24px/bottom:24px en zet `right`
 * inline, vandaar !important. */
body .booking-widget-btn {
    right: var(--mw-fab-r) !important;
    bottom: var(--mw-fab-r);
    height: var(--mw-fab);
    padding: 0 26px;
    border-radius: calc(var(--mw-fab) / 2);
    background-color: #a24212 !important;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: var(--mw-fab);
    white-space: nowrap;
    box-shadow: var(--mw-fab-shadow);
    transition: translate .2s ease;
}

body:has(mw-chat) .booking-widget-btn,
body:has(a.whatsapp) .booking-widget-btn {
    right: calc(var(--mw-fab-r) + var(--mw-fab-stap)) !important;
}

body:has(mw-chat):has(a.whatsapp) .booking-widget-btn {
    right: calc(var(--mw-fab-r) + 2 * var(--mw-fab-stap)) !important;
}

/* WhatsApp: witte cirkel met het groene logo, rechts in de rij in plaats van
 * linksonder. Webstart zet left, maat en kleur in de componentstijl. */
body a.whatsapp {
    left: auto;
    right: var(--mw-fab-r);
    bottom: var(--mw-fab-r);
    width: var(--mw-fab);
    height: var(--mw-fab);
    background: #fff;
    box-shadow: var(--mw-fab-shadow), inset 0 0 0 1px rgba(59, 42, 34, .08);
    transition: translate .2s ease;
}

body:has(mw-chat) a.whatsapp {
    right: calc(var(--mw-fab-r) + var(--mw-fab-stap));
}

body a.whatsapp::before {
    color: #25d366;
    font-size: 28px;
}

body .booking-widget-btn:hover,
body a.whatsapp:hover {
    transform: none;
    translate: 0 -2px;
}

body .booking-widget-btn:focus-visible,
body a.whatsapp:focus-visible {
    outline: 2px solid #a24212;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    body .booking-widget-btn:hover,
    body a.whatsapp:hover {
        translate: none;
    }
}

/* Google-reviewbadge (Webstart GoogleReviews, positie "links" in het CMS):
 * linksonder, even hoog en met dezelfde schaduw als de knoppenrij rechts.
 * Webstart zet de badge bij een WhatsApp-knop vast op right/bottom 15px (die
 * ging uit van WhatsApp links); dat heffen we op, zodat de container hem
 * linksonder plaatst. Op mobiel staat hij boven de knoppenrij. */
body .review-widget {
    --background: #fffdfa;
    --reviewBackground: #f6e8dd;
    --borderRadius: 16px;
    --boxShadow: var(--mw-fab-shadow);
    --boxShadowHover: 0 14px 30px -10px rgba(43, 33, 24, .55), 0 3px 8px -2px rgba(43, 33, 24, .25);
    padding: var(--mw-fab-r);
    color: #3b2a22;
    font-family: inherit;
}

body .review-widget .review-widget__badge,
body:has(.whatsapp) .review-widget .review-widget__badge {
    right: auto;
    bottom: auto;
    height: var(--mw-fab);
    gap: 12px;
    padding: 0 14px 0 16px;
    box-shadow: var(--mw-fab-shadow), inset 0 0 0 1px rgba(59, 42, 34, .08);
    transition: opacity .2s ease, translate .2s ease, box-shadow .2s ease;
}

body .review-widget__badge:hover {
    translate: 0 -2px;
}

body .review-widget__badge-logo {
    width: 24px;
}

body .review-widget__badge .review-widget__rating {
    gap: 8px;
}

body .review-widget__rating strong {
    font-size: 18px;
    font-weight: 700;
}

body .review-widget__rating i {
    color: rgba(59, 42, 34, .65);
}

body .review-widget__badge .review-widget__stars span,
body:has(.whatsapp) .review-widget__badge .review-widget__stars span {
    width: 15px;
}

body .review-widget__badge-close {
    margin-left: 2px;
}

body .review-widget__badge-close svg {
    width: 12px;
}

/* Paneel met alle reviews: warme kaarten en een terracotta knop. */
body .review-widget__sidebar {
    border-radius: 0 24px 24px 0;
}

body .review-widget__sidebar-header-top strong {
    font-family: "Courgette", cursive;
    font-weight: 400;
}

body .review-widget__btn {
    min-height: 44px;
    padding: 10px 22px;
    background: #a24212;
    border-radius: 22px;
    text-transform: lowercase;
}

body .review-widget__btn:hover {
    background: #8a3810;
}

body .review-widget__review {
    line-height: 1.6;
}

@media (max-width: 600px) {
    body .review-widget {
        justify-content: flex-start !important;
        padding: var(--mw-fab-r);
        padding-bottom: calc(var(--mw-fab-r) + var(--mw-fab) + 12px);
    }

    body .review-widget .review-widget__badge,
    body:has(.whatsapp) .review-widget .review-widget__badge {
        height: 44px;
        padding: 0 12px;
    }

    body .review-widget__sidebar {
        border-radius: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    body .review-widget__badge:hover {
        translate: none;
    }
}

/* Boekingsmodal in de huisstijl van de chat: warme, wazige achtergrond, zachte
 * entree, laadindicator en een sluitknop boven het venster (in het venster
 * overlapte die de titel van de widget). */
body .booking-widget-overlay {
    background: rgba(61, 44, 32, .45);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: mw-booking-fade .25s ease both;
}

/* Hoogte zo dat er boven het venster altijd ruimte is voor de sluitknop. */
body .booking-widget-modal {
    position: relative;
    max-width: 420px;
    height: min(700px, calc(100dvh - 112px));
    max-height: none;
    margin-top: 40px;
    border-radius: 24px;
    background: #fbf6ef;
    box-shadow: 0 22px 48px -16px rgba(61, 44, 32, .55);
    overflow: visible;
    animation: mw-booking-rise .38s cubic-bezier(.22, 1, .36, 1) both;
}

/* Op desktop ruimer: even breed als de inline widget op de reserveringspagina. */
@media (min-width: 768px) {
    body .booking-widget-modal {
        max-width: 560px;
        height: min(820px, calc(100dvh - 112px));
    }
}

/* Laadindicator achter het iframe; het iframe dekt hem af zodra de widget er staat. */
body .booking-widget-modal::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    margin: -16px 0 0 -16px;
    border: 3px solid rgba(181, 84, 31, .2);
    border-top-color: #b5541f;
    border-radius: 50%;
    animation: mw-booking-spin .8s linear infinite;
}

body .booking-widget-modal .bw-frame {
    position: relative;
    z-index: 1;
    border-radius: inherit;
}

body .booking-widget-modal .bw-close {
    top: -52px;
    right: 0;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    background: #fffdfa;
    color: #3d2c20;
    font-size: 26px;
    box-shadow: 0 4px 14px -4px rgba(61, 44, 32, .45);
    transition: transform .2s ease, background-color .2s ease;
}

body .booking-widget-modal .bw-close:hover {
    background: #fff;
    transform: scale(1.06);
}

body .booking-widget-modal .bw-close:focus-visible {
    outline: 2px solid #fffdfa;
    outline-offset: 3px;
}

/* Inline widget op de reserveringspagina (iframe in de CMS-inhoud). Zelfde
 * kaart als de modal. De vaste menubalk is gescrold 100px hoog: de widget past
 * er met 16px marge onder, en scrollen ernaartoe (booking.js) stopt eronder.
 * Het thema zet `.user-content p iframe` op volle breedte, vandaar de extra
 * specificiteit. */
iframe.mw-booking-frame,
.user-content iframe.mw-booking-frame {
    display: block;
    width: 100%;
    max-width: 560px;
    height: min(720px, calc(100dvh - 132px));
    min-height: 520px;
    margin: 0 auto;
    scroll-margin-top: 116px;
    border: 0;
    border-radius: 24px;
    background: #fbf6ef;
    box-shadow: 0 22px 48px -16px rgba(61, 44, 32, .35);
}

/* Op de pagina met de inline widget is de zwevende boekknop overbodig. */
body:has(.mw-booking-frame) .booking-widget-btn {
    display: none;
}

@keyframes mw-booking-fade {
    from { opacity: 0; }
}

@keyframes mw-booking-rise {
    from { opacity: 0; transform: translateY(16px) scale(.97); }
}

@keyframes mw-booking-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    body .booking-widget-overlay,
    body .booking-widget-modal {
        animation: none;
    }
}

/* De chatknop staat boven alles (z-index 2147483000) en zou over de geopende
 * boekingsmodal heen vallen; verberg de chat — en de boekknop zelf — zolang
 * die open is. */
body:has(.booking-widget-overlay) mw-chat,
body:has(.booking-widget-overlay) .booking-widget-btn {
    display: none;
}

/* Zelfde zolang het Google-reviewpaneel open is. */
body:has(.review-widget.is-open) mw-chat,
body:has(.review-widget.is-open) .booking-widget-btn,
body:has(.review-widget.is-open) a.whatsapp {
    display: none;
}