/* WhatsApp quick booking: "Book on WhatsApp" buttons, the booking popup and
   the sticky Call / WhatsApp bar on phones. Self-contained so it looks the
   same on every page template (main site, tour pages and the blog).
   Behaviour lives in /quick-book.js.
   Icons: Font Awesome Free 6.4.0, CC BY 4.0 - https://fontawesome.com/license/free */

:root {
    --qb-green: #15803d;
    --qb-green-dark: #166534;
    --qb-ink: #1f2937;
    --qb-muted: #6b7280;
    --qb-line: #d1d5db;
    --qb-ico-wa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'/%3E%3C/svg%3E");
    --qb-ico-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z'/%3E%3C/svg%3E");
    --qb-ico-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3zM609.3 512H471.4c5.4-9.4 8.6-20.3 8.6-32v-8c0-60.7-27.1-115.2-69.8-151.8c2.4-.1 4.7-.2 7.1-.2h61.4C567.8 320 640 392.2 640 481.3c0 17-13.8 30.7-30.7 30.7zM432 256c-31 0-59-12.6-79.3-32.9C372.4 196.5 384 163.6 384 128c0-26.8-6.6-52.1-18.3-74.3C384.3 40.1 407.2 32 432 32c61.9 0 112 50.1 112 112s-50.1 112-112 112z'/%3E%3C/svg%3E");
    --qb-ico-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M128 0c17.7 0 32 14.3 32 32V64H288V32c0-17.7 14.3-32 32-32s32 14.3 32 32V64h48c26.5 0 48 21.5 48 48v48H0V112C0 85.5 21.5 64 48 64H96V32c0-17.7 14.3-32 32-32zM0 192H448V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V192zm64 80v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm128 0v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H208c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H336zM64 400v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H208zm112 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H336c-8.8 0-16 7.2-16 16z'/%3E%3C/svg%3E");
    --qb-ico-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z'/%3E%3C/svg%3E");
    --qb-ico-map: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M408 120c0 54.6-73.1 151.9-105.2 192c-7.7 9.6-22 9.6-29.6 0C241.1 271.9 168 174.6 168 120C168 53.7 221.7 0 288 0s120 53.7 120 120zm8 80.4c3.5-6.9 6.7-13.8 9.6-20.6c.5-1.2 1-2.5 1.5-3.7l116-46.4C558.9 123.4 576 135 576 152V422.8c0 9.8-6 18.6-15.1 22.3L416 503V200.4zM137.6 138.3c2.4 14.1 7.2 28.3 12.8 41.5c2.9 6.8 6.1 13.7 9.6 20.6V451.8L32.9 502.7C17.1 509 0 497.4 0 480.4V209.6c0-9.8 6-18.6 15.1-22.3l122.6-49zM327.8 332c13.9-17.4 35.7-45.7 56.2-77V504.3L192 449.4V255c20.5 31.3 42.3 59.6 56.2 77c20.5 25.6 59.1 25.6 79.6 0zM288 152a40 40 0 1 0 0-80 40 40 0 1 0 0 80z'/%3E%3C/svg%3E");
    --qb-ico-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z'/%3E%3C/svg%3E");
}

/* ---------- Icons (drawn in the current text colour) ---------- */
.qb-i,
.qb-btn::before {
    display: inline-block;
    flex-shrink: 0;
    width: 1.15em;
    height: 1.15em;
    background-color: currentColor;
    -webkit-mask: var(--qb-ico-wa) center / contain no-repeat;
    mask: var(--qb-ico-wa) center / contain no-repeat;
}

.qb-btn::before {
    content: "";
    width: 1.3em;
    height: 1.3em;
}

.qb-i-phone { -webkit-mask-image: var(--qb-ico-phone); mask-image: var(--qb-ico-phone); }
.qb-i-users { -webkit-mask-image: var(--qb-ico-users); mask-image: var(--qb-ico-users); }
.qb-i-date  { -webkit-mask-image: var(--qb-ico-date);  mask-image: var(--qb-ico-date); }
.qb-i-pin   { -webkit-mask-image: var(--qb-ico-pin);   mask-image: var(--qb-ico-pin); }
.qb-i-map   { -webkit-mask-image: var(--qb-ico-map);   mask-image: var(--qb-ico-map); }
.qb-i-x     { -webkit-mask-image: var(--qb-ico-x);     mask-image: var(--qb-ico-x); }

/* ---------- "Book on WhatsApp" button (tour cards, tour pages) ---------- */
.qb-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    margin: 0 0 0.75rem;
    padding: 13px 20px;
    border: 0;
    border-radius: 50px;
    background: var(--qb-green);
    color: #fff !important;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(21, 128, 61, 0.3);
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.qb-btn:hover {
    background: var(--qb-green-dark);
    box-shadow: 0 8px 20px rgba(21, 128, 61, 0.38);
    transform: translateY(-1px);
}

.qb-btn:active {
    transform: translateY(0);
}

.qb-btn:focus-visible,
.qb-dialog :focus-visible,
.qb-bar :focus-visible {
    outline: 3px solid #f59e0b;
    outline-offset: 2px;
}

/* Larger version at the top of each tour page's booking box */
.qb-btn-lg {
    padding: 16px 20px;
    font-size: 1.1rem;
    margin: 0 0 0.5rem;
}

.qb-note {
    margin: 0 0 1rem !important;
    color: var(--qb-muted) !important;
    font-size: 0.85rem !important;
    text-align: center;
}

/* ---------- Popup ---------- */
html.qb-lock {
    overflow: hidden;
}

.qb-dialog {
    width: min(440px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 20px;
    background: #fff;
    color: var(--qb-ink);
    font-family: inherit;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
    overflow: auto;
    overscroll-behavior: contain;
}

.qb-dialog[open] {
    animation: qb-in 0.18s ease-out;
}

.qb-dialog:focus {
    outline: none;
}

.qb-dialog::backdrop {
    background: rgba(15, 23, 42, 0.55);
}

@keyframes qb-in {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

.qb-form {
    display: grid;
    gap: 14px;
    padding: 20px;
}

.qb-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.qb-head-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    font-size: 24px;
}

.qb-title {
    margin: 0 !important;
    color: var(--qb-ink) !important;
    font-family: inherit;
    font-size: 1.2rem !important;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
}

.qb-sub {
    margin: 2px 0 0 !important;
    color: var(--qb-muted) !important;
    font-size: 0.88rem !important;
    line-height: 1.4;
}

.qb-close {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    margin: -4px -6px 0 auto;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f3f4f6;
    color: #374151;
    font-size: 16px;
    cursor: pointer;
}

.qb-close:hover {
    background: #e5e7eb;
}

.qb-field {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.qb-label {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    color: #374151;
    font-size: 0.88rem;
    font-weight: 600;
}

.qb-label .qb-i {
    color: var(--qb-green);
    font-size: 0.95rem;
}

.qb-row {
    display: grid;
    grid-template-columns: 136px minmax(0, 1fr);
    gap: 12px;
}

@media (max-width: 359px) {
    .qb-row {
        grid-template-columns: 1fr;
    }
}

.qb-dialog input,
.qb-dialog select {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    margin: 0;
    padding: 10px 14px;
    border: 1.5px solid var(--qb-line);
    border-radius: 12px;
    background-color: #fff;
    color: var(--qb-ink);
    font-family: inherit;
    font-size: 16px; /* 16px stops iOS from zooming into the field */
    line-height: 1.3;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}

.qb-dialog input:focus,
.qb-dialog select:focus {
    outline: none;
    border-color: var(--qb-green);
    box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.18);
}

.qb-dialog select {
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%236b7280' d='M5.3 7.3a1 1 0 0 1 1.4 0L10 10.6l3.3-3.3a1 1 0 1 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 20px;
    text-overflow: ellipsis;
    cursor: pointer;
}

.qb-dialog input[type="date"] {
    text-align: left;
}

.qb-dialog input[type="date"]::-webkit-date-and-time-value {
    text-align: left;
}

.qb-stepper {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    border: 1.5px solid var(--qb-line);
    border-radius: 12px;
    overflow: hidden;
}

.qb-stepper:focus-within {
    border-color: var(--qb-green);
    box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.18);
}

.qb-dialog .qb-stepper input {
    min-height: 45px;
    padding: 8px 4px;
    border: 0;
    border-radius: 0;
    text-align: center;
    font-weight: 600;
    -moz-appearance: textfield;
}

.qb-dialog .qb-stepper input:focus {
    box-shadow: none;
}

.qb-stepper input::-webkit-outer-spin-button,
.qb-stepper input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.qb-step {
    margin: 0;
    padding: 0;
    border: 0;
    background: #f3f4f6;
    color: var(--qb-ink);
    font-family: inherit;
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
}

.qb-step:hover {
    background: #e5e7eb;
}

.qb-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 54px;
    margin: 4px 0 0;
    padding: 12px 20px;
    border: 0;
    border-radius: 50px;
    background: var(--qb-green);
    color: #fff;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(21, 128, 61, 0.3);
    transition: background-color 0.2s ease;
}

.qb-submit:hover {
    background: var(--qb-green-dark);
}

.qb-submit .qb-i {
    font-size: 1.35rem;
}

.qb-foot {
    margin: -4px 0 0 !important;
    color: var(--qb-muted) !important;
    font-size: 0.8rem !important;
    line-height: 1.4;
    text-align: center;
}

/* ---------- Sticky Call / WhatsApp bar (phones only) ---------- */
.qb-bar,
.qb-bar-spacer {
    display: none;
}

@media (max-width: 768px) {
    .qb-bar {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 10px;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9990;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
        background: #fff;
        box-shadow: 0 -6px 24px rgba(15, 23, 42, 0.14);
        transition: transform 0.2s ease;
    }

    /* Moves out of the way while someone types into a form on the page */
    .qb-bar.qb-bar-hidden {
        transform: translateY(110%);
    }

    .qb-bar-spacer {
        display: block;
        height: calc(70px + env(safe-area-inset-bottom, 0px));
    }

    .qb-bar a,
    .qb-bar button {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 48px;
        margin: 0;
        padding: 0 12px;
        border-radius: 50px;
        font-family: inherit;
        font-size: 0.98rem;
        font-weight: 700;
        line-height: 1;
        text-decoration: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .qb-bar-call {
        border: 1.5px solid var(--qb-line);
        background: #fff;
        color: var(--qb-ink) !important;
    }

    .qb-bar-wa {
        border: 0;
        background: var(--qb-green);
        color: #fff;
    }

    .qb-bar .qb-i {
        font-size: 1.15rem;
    }

    /* The bar replaces the round floating WhatsApp bubble on phones */
    body .floating-buttons,
    body .whatsapp-float {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .qb-dialog[open] {
        animation: none;
    }

    .qb-btn,
    .qb-bar {
        transition: none;
    }
}