.booking-hero {
    min-height:360px
}

.booking-hero .page-hero__content {
    max-width:760px
}

.booking-section {
    background:linear-gradient(180deg,#f7fbff 0,#fff 42%)
}

.booking-app {
    max-width:1060px
}

.booking-view[hidden] {
    display:none
}

.booking-mode-switch {
    background:#eef4f8;
    border:1px solid var(--line);
    border-radius:14px;
    display:grid;
    gap:6px;
    grid-template-columns:repeat(2,minmax(0,1fr));
    margin-bottom:30px;
    padding:6px
}

.booking-mode-switch__button {
    appearance:none;
    background:transparent;
    border:1px solid transparent;
    border-radius:10px;
    color:var(--muted);
    cursor:pointer;
    display:flex;
    flex-direction:column;
    font:inherit;
    justify-content:center;
    min-height:62px;
    padding:9px 12px;
    text-align:left
}

.booking-mode-switch__button strong {
    color:var(--navy);
    font-size:.92rem
}

.booking-mode-switch__button span {
    font-size:.72rem;
    line-height:1.35
}

.booking-mode-switch__button.is-selected {
    background:#fff;
    border-color:rgba(0,124,137,.28);
    box-shadow:0 6px 18px rgba(0,43,92,.08);
    color:var(--blue)
}

.booking-mode-switch__button:disabled {
    cursor:wait;
    opacity:.62
}

.booking-start {
    display:grid;
    gap:16px;
    margin-bottom:24px
}

.booking-start h2,
.booking-panel__head h2,
.booking-manage__intro h2,
.booking-manage__result-head h2 {
    color:var(--navy);
    line-height:1.15;
    letter-spacing:-.02em;
    margin:0 0 8px
}

.booking-start h2 {
    font-size:clamp(1.6rem,6vw,2.35rem)
}

.booking-start p,
.booking-panel__head p,
.booking-manage__intro p {
    margin-bottom:0
}

.booking-start__time {
    align-items:flex-start;
    background:#fff;
    border:1px solid var(--line);
    border-radius:12px;
    display:flex;
    flex-direction:column;
    padding:12px 14px
}

.booking-start__time strong {
    color:var(--navy);
    font-size:.9rem
}

.booking-start__time span {
    color:var(--muted);
    font-size:.82rem
}

.booking-options {
    display:grid;
    gap:12px
}

.booking-option {
    appearance:none;
    align-items:center;
    background:#fff;
    border:1px solid var(--line);
    border-radius:14px;
    color:var(--ink);
    cursor:pointer;
    display:grid;
    font:inherit;
    gap:12px;
    grid-template-columns:46px 1fr auto;
    min-height:92px;
    padding:14px;
    text-align:left;
    transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease
}

.booking-option:hover {
    border-color:rgba(0,124,137,.5);
    box-shadow:0 10px 26px rgba(0,43,92,.08);
    transform:translateY(-1px)
}

.booking-option.is-selected {
    background:linear-gradient(145deg,#fff,#effbfc);
    border-color:var(--blue);
    box-shadow:0 0 0 3px rgba(0,124,137,.1),0 12px 30px rgba(0,43,92,.08)
}

.booking-option:focus-visible,
.booking-mode-switch__button:focus-visible,
.booking-calendar__nav:focus-visible,
.booking-calendar__day:focus-visible,
.booking-time:focus-visible,
.booking-form input:focus-visible,
.booking-form select:focus-visible {
    outline:3px solid rgba(216,162,27,.65);
    outline-offset:2px
}

.booking-option:disabled {
    cursor:wait;
    opacity:.65;
    transform:none
}

.booking-option__icon {
    align-items:center;
    background:var(--navy-tint);
    border-radius:12px;
    color:var(--blue);
    display:flex;
    height:46px;
    justify-content:center;
    width:46px
}

.booking-option.is-selected .booking-option__icon {
    background:var(--blue);
    color:#fff
}

.booking-option__icon svg {
    fill:currentColor;
    height:23px;
    width:23px
}

.booking-option__copy {
    display:flex;
    flex-direction:column;
    min-width:0
}

.booking-option__copy strong {
    color:var(--navy);
    font-size:1rem
}

.booking-option__copy small {
    color:var(--muted);
    font-size:.82rem;
    line-height:1.4
}

.booking-option__action {
    color:var(--blue);
    display:none;
    font-size:.78rem;
    font-weight:800;
    white-space:nowrap
}

.booking-option__action b {
    font-size:1rem
}

.booking-panels {
    margin-top:20px
}

.booking-panel {
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    box-shadow:0 18px 46px rgba(0,43,92,.08);
    overflow:hidden;
    scroll-margin-top:92px
}

.booking-panel[hidden] {
    display:none
}

.booking-panel__head {
    background:linear-gradient(135deg,var(--navy),#06447b);
    padding:22px
}

.booking-panel__head .eyebrow {
    color:#f4c95d
}

.booking-panel__head h2 {
    color:#fff;
    font-size:clamp(1.35rem,5vw,2rem)
}

.booking-panel__head p {
    color:rgba(255,255,255,.82);
    max-width:760px
}

.booking-panel--whatsapp {
    padding-bottom:24px
}

.booking-whatsapp-action {
    align-items:flex-start;
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:22px
}

.booking-whatsapp-action p {
    margin:0
}

.booking-form {
    display:grid;
    gap:0
}

.booking-form-section {
    border:0;
    border-bottom:1px solid var(--line);
    margin:0;
    min-width:0;
    padding:22px
}

.booking-form-section legend {
    align-items:center;
    color:var(--navy);
    display:flex;
    font-size:1.06rem;
    font-weight:900;
    gap:10px;
    line-height:1.35;
    padding:0
}

.booking-form-section legend span {
    align-items:center;
    background:var(--blue);
    border-radius:50%;
    color:#fff;
    display:inline-flex;
    flex:0 0 30px;
    height:30px;
    justify-content:center;
    width:30px
}

.booking-form-section legend b {
    font:inherit
}

.booking-form-section__hint {
    font-size:.9rem;
    margin:8px 0 18px
}

.booking-form-grid {
    display:grid;
    gap:15px
}

.booking-form label {
    color:var(--navy);
    display:grid;
    font-size:.88rem;
    font-weight:800;
    gap:6px
}

.booking-form input,
.booking-form select {
    appearance:none;
    background:#fff;
    border:1px solid #bdcad6;
    border-radius:9px;
    color:var(--ink);
    font:inherit;
    font-size:16px;
    min-height:50px;
    padding:11px 13px;
    width:100%
}

.booking-form select {
    background-image:linear-gradient(45deg,transparent 50%,var(--navy) 50%),linear-gradient(135deg,var(--navy) 50%,transparent 50%);
    background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;
    background-repeat:no-repeat;
    background-size:5px 5px,5px 5px;
    padding-right:38px
}

.booking-form input:hover,
.booking-form select:hover {
    border-color:#8799aa
}

.booking-form input:invalid:not(:placeholder-shown),
.booking-form select:invalid:not(:focus) {
    border-color:#b33a3a
}

.booking-form-context {
    background:var(--navy-tint);
    border-left:4px solid var(--blue);
    border-radius:9px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:86px;
    padding:12px 14px
}

.booking-form-context span,
.booking-form-context small {
    color:var(--muted);
    font-size:.78rem;
    line-height:1.45
}

.booking-form-context strong {
    color:var(--navy)
}

.booking-hp {
    height:1px!important;
    left:-10000px!important;
    opacity:0!important;
    pointer-events:none!important;
    position:absolute!important;
    width:1px!important
}

.booking-slot-picker {
    display:grid;
    gap:16px
}

.booking-calendar,
.booking-times {
    background:#f8fbfd;
    border:1px solid var(--line);
    border-radius:12px;
    min-width:0;
    padding:14px
}

.booking-calendar__toolbar {
    align-items:center;
    display:grid;
    gap:8px;
    grid-template-columns:44px 1fr 44px;
    margin-bottom:12px
}

.booking-calendar__toolbar strong {
    color:var(--navy);
    font-size:.98rem;
    text-align:center
}

.booking-calendar__nav {
    align-items:center;
    background:#fff;
    border:1px solid var(--line);
    border-radius:8px;
    color:var(--navy);
    cursor:pointer;
    display:flex;
    font-size:1.55rem;
    height:44px;
    justify-content:center;
    line-height:1;
    width:44px
}

.booking-calendar__nav:hover:not(:disabled) {
    background:var(--navy);
    color:#fff
}

.booking-calendar__nav:disabled {
    cursor:not-allowed;
    opacity:.38
}

.booking-calendar__weekdays,
.booking-calendar__grid {
    display:grid;
    gap:4px;
    grid-template-columns:repeat(7,minmax(0,1fr))
}

.booking-calendar__weekdays {
    margin-bottom:5px
}

.booking-calendar__weekdays span {
    color:var(--muted);
    font-size:.65rem;
    font-weight:900;
    text-align:center;
    text-transform:uppercase
}

.booking-calendar__day,
.booking-calendar__empty {
    aspect-ratio:1;
    min-width:0
}

.booking-calendar__day {
    align-items:center;
    background:#fff;
    border:1px solid transparent;
    border-radius:7px;
    color:var(--ink);
    display:flex;
    font:inherit;
    font-size:.82rem;
    font-weight:800;
    justify-content:center;
    min-height:36px;
    padding:0;
    position:relative
}

.booking-calendar__day.is-available {
    border-color:rgba(0,124,137,.35);
    color:var(--navy);
    cursor:pointer
}

.booking-calendar__day.is-available:hover {
    background:var(--sky-teal);
    border-color:var(--blue)
}

.booking-calendar__day.is-limited::after {
    background:var(--gold);
    border-radius:50%;
    bottom:3px;
    content:"";
    height:4px;
    position:absolute;
    width:4px
}

.booking-calendar__day.is-selected {
    background:var(--navy);
    border-color:var(--navy);
    color:#fff
}

.booking-calendar__day.is-unavailable {
    background:#f2f4f6;
    color:#98a3ad;
    cursor:not-allowed;
    text-decoration:line-through
}

.booking-times {
    display:flex;
    flex-direction:column
}

.booking-times__head {
    border-bottom:1px solid var(--line);
    display:flex;
    flex-direction:column;
    margin-bottom:12px;
    padding-bottom:10px
}

.booking-times__head strong {
    color:var(--navy);
    font-size:.94rem
}

.booking-times__head small {
    color:var(--muted)
}

.booking-time-grid {
    display:grid;
    gap:8px;
    grid-template-columns:repeat(2,minmax(0,1fr))
}

.booking-time {
    background:#fff;
    border:1px solid rgba(0,124,137,.4);
    border-radius:8px;
    color:var(--navy);
    cursor:pointer;
    font:inherit;
    font-size:.86rem;
    font-weight:800;
    min-height:44px;
    padding:8px
}

.booking-time:hover:not(:disabled) {
    background:var(--sky-teal);
    border-color:var(--blue)
}

.booking-time.is-selected {
    background:var(--navy);
    border-color:var(--navy);
    color:#fff
}

.booking-time.is-unavailable {
    background:#eff2f4;
    border-color:#d8dfe5;
    color:#929da7;
    cursor:not-allowed;
    text-decoration:line-through
}

.booking-time-empty,
.booking-calendar-error {
    color:var(--muted);
    font-size:.86rem;
    grid-column:1/-1;
    margin:0;
    padding:12px 4px
}

.booking-calendar-error {
    color:#8b2828
}

.booking-calendar-loading {
    animation:booking-pulse 1.1s ease-in-out infinite;
    background:linear-gradient(90deg,#e8eef3,#f8fbfd,#e8eef3);
    border-radius:10px;
    grid-column:1/-1;
    height:190px
}

.booking-calendar-legend {
    display:flex;
    flex-wrap:wrap;
    gap:9px 16px;
    margin-top:14px
}

.booking-calendar-legend span {
    align-items:center;
    color:var(--muted);
    display:inline-flex;
    font-size:.76rem;
    gap:6px
}

.booking-legend {
    background:#fff;
    border:1px solid var(--line);
    border-radius:3px;
    display:inline-block;
    height:11px;
    width:11px
}

.booking-legend--available {
    border-color:var(--blue)
}

.booking-legend--limited {
    background:var(--gold);
    border-color:var(--gold)
}

.booking-legend--unavailable {
    background:#dce2e7;
    border-color:#dce2e7
}

.booking-policy-inline {
    background:#fff8e7;
    border:1px solid rgba(216,162,27,.38);
    border-radius:10px;
    color:#57400c;
    display:flex;
    flex-direction:column;
    font-size:.86rem;
    gap:2px;
    margin:18px 22px 0;
    padding:12px 14px
}

.booking-policy-inline a {
    color:var(--blue);
    font-weight:800;
    text-decoration:underline;
    text-underline-offset:2px
}

.booking-processing {
    align-items:center;
    background:var(--navy-tint);
    border-radius:10px;
    display:flex;
    gap:12px;
    margin:18px 22px 0;
    padding:12px 14px
}

.booking-processing[hidden] {
    display:none
}

.booking-processing div {
    display:flex;
    flex-direction:column
}

.booking-processing strong {
    color:var(--navy)
}

.booking-processing small {
    color:var(--muted)
}

.booking-spinner {
    animation:booking-spin .8s linear infinite;
    border:3px solid rgba(0,124,137,.2);
    border-radius:50%;
    border-top-color:var(--blue);
    flex:0 0 24px;
    height:24px;
    width:24px
}

.booking-form__footer {
    align-items:stretch;
    display:flex;
    flex-direction:column;
    gap:14px;
    padding:22px
}

.booking-form__note {
    font-size:.83rem;
    margin:0
}

.booking-form__footer .btn {
    width:100%
}

.booking-message {
    border-radius:10px;
    font-size:.9rem;
    font-weight:700;
    margin:0 22px 22px;
    padding:0
}

.booking-message:not(:empty) {
    border:1px solid;
    padding:13px 14px
}

.booking-message.is-success {
    background:#eaf8f0;
    border-color:#8bc5a3;
    color:#1d663a
}

.booking-message.is-warning {
    background:#fff8e4;
    border-color:#dfbd58;
    color:#674d08
}

.booking-message.is-error {
    background:#fff0f0;
    border-color:#dfa2a2;
    color:#8a2929
}

.booking-form.is-confirmed {
    background:#fbfdfc
}

.booking-form.is-confirmed input,
.booking-form.is-confirmed select,
.booking-form.is-confirmed button {
    cursor:not-allowed;
    opacity:.72
}

.booking-manage {
    margin-inline:auto;
    max-width:920px
}

.booking-manage__intro {
    margin-bottom:20px;
    max-width:760px
}

.booking-manage__intro h2,
.booking-manage__result-head h2 {
    font-size:clamp(1.45rem,5vw,2rem)
}

.booking-manage__lookup {
    align-items:end;
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    box-shadow:0 16px 38px rgba(0,43,92,.07);
    display:grid;
    gap:14px;
    padding:20px
}

.booking-manage__lookup[hidden] {
    display:none
}

.booking-manage__lookup label {
    color:var(--navy);
    display:grid;
    font-size:.87rem;
    font-weight:800;
    gap:6px
}

.booking-manage__lookup input {
    background:#fff;
    border:1px solid #bdcad6;
    border-radius:9px;
    color:var(--ink);
    font:inherit;
    font-size:16px;
    min-height:50px;
    padding:11px 13px;
    width:100%
}

.booking-manage__lookup input:focus-visible {
    outline:3px solid rgba(216,162,27,.65);
    outline-offset:2px
}

.booking-manage__lookup .btn {
    min-width:140px;
    width:100%
}

.booking-message.booking-manage__message {
    margin:14px 0 0
}

.booking-manage__result {
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    box-shadow:0 18px 46px rgba(0,43,92,.08);
    margin-top:18px;
    overflow:hidden
}

.booking-manage__result[hidden],
.booking-manage__edit[hidden],
.booking-manage__cancel[hidden],
.booking-manage__reschedule[hidden] {
    display:none
}

.booking-manage__result-head {
    align-items:flex-start;
    border-bottom:1px solid var(--line);
    display:flex;
    flex-direction:column;
    gap:14px;
    justify-content:space-between;
    padding:20px
}

.booking-manage__result-head h2 {
    margin-bottom:0
}

.booking-table-wrap {
    max-width:100%;
    overflow-x:auto;
    padding:0 20px;
    -webkit-overflow-scrolling:touch
}

.booking-table {
    border-collapse:collapse;
    table-layout:fixed;
    width:100%
}

.booking-table caption {
    clip:rect(0 0 0 0);
    clip-path:inset(50%);
    height:1px;
    overflow:hidden;
    position:absolute;
    white-space:nowrap;
    width:1px
}

.booking-table th,
.booking-table td {
    border-bottom:1px solid #e5ebf0;
    padding:11px 8px;
    text-align:left;
    vertical-align:top
}

.booking-table th {
    color:var(--muted);
    font-size:.78rem;
    font-weight:800;
    padding-left:0;
    width:34%
}

.booking-table td {
    color:var(--ink);
    font-size:.9rem;
    overflow-wrap:anywhere;
    padding-right:0
}

.booking-status {
    background:#eaf8f0;
    border:1px solid #8bc5a3;
    border-radius:999px;
    color:#1d663a;
    display:inline-flex;
    font-size:.75rem;
    font-weight:900;
    padding:3px 9px
}

.booking-manage__actions {
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:20px
}

.booking-btn--danger {
    background:#fff;
    border:1px solid #c95454;
    color:#9a2929
}

.booking-btn--danger:hover {
    background:#9a2929;
    color:#fff
}

.booking-manage__edit {
    border-top:1px solid var(--line);
    margin-top:4px
}

.booking-manage__time-toggle {
    align-items:flex-start;
    background:#f8fbfd;
    border-bottom:1px solid var(--line);
    display:flex;
    flex-direction:column;
    gap:14px;
    padding:20px
}

.booking-manage__time-toggle div {
    display:flex;
    flex-direction:column
}

.booking-manage__time-toggle strong {
    color:var(--navy);
    font-size:.92rem
}

.booking-manage__time-toggle span {
    color:var(--muted);
    font-size:.8rem
}

.booking-manage__cancel {
    align-items:flex-start;
    background:#fff4f4;
    border-top:1px solid #e4b1b1;
    display:flex;
    flex-direction:column;
    gap:14px;
    padding:20px
}

.booking-manage__cancel strong {
    color:#842626
}

.booking-manage__cancel p {
    font-size:.86rem;
    margin:3px 0 0
}

.booking-manage__cancel-actions {
    display:flex;
    flex-direction:column;
    gap:10px;
    width:100%
}

.booking-manage button:disabled,
.booking-manage input:disabled,
.booking-manage select:disabled {
    cursor:wait;
    opacity:.68
}

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

@keyframes booking-pulse {
    50% { opacity:.55 }
}

@media (min-width:560px) {
    .booking-option__action {
        display:inline-flex
    }

    .booking-form__footer {
        align-items:center;
        flex-direction:row;
        justify-content:space-between
    }

    .booking-form__footer .btn {
        flex:0 0 auto;
        width:auto
    }

    .booking-form__note {
        max-width:560px
    }

    .booking-manage__result-head,
    .booking-manage__time-toggle {
        align-items:center;
        flex-direction:row
    }

    .booking-manage__actions,
    .booking-manage__cancel-actions {
        flex-direction:row;
        flex-wrap:wrap
    }

    .booking-manage__cancel-actions {
        width:auto
    }
}

@media (min-width:700px) {
    .booking-start {
        align-items:end;
        grid-template-columns:1fr auto
    }

    .booking-mode-switch {
        margin-inline:auto;
        max-width:650px
    }

    .booking-manage__lookup {
        grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;
        padding:24px
    }

    .booking-manage__lookup .btn {
        width:auto
    }

    .booking-options {
        grid-template-columns:repeat(3,minmax(0,1fr))
    }

    .booking-option {
        align-content:start;
        grid-template-columns:46px 1fr;
        min-height:154px
    }

    .booking-option__action {
        grid-column:1/-1;
        padding-top:2px
    }

    .booking-panel__head,
    .booking-form-section,
    .booking-form__footer {
        padding:28px
    }

    .booking-form-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }

    .booking-policy-inline,
    .booking-processing {
        margin-left:28px;
        margin-right:28px
    }

    .booking-message {
        margin-left:28px;
        margin-right:28px;
        margin-bottom:28px
    }

    .booking-time-grid {
        grid-template-columns:repeat(3,minmax(0,1fr))
    }

    .booking-manage__result-head,
    .booking-manage__actions,
    .booking-manage__time-toggle,
    .booking-manage__cancel {
        padding-left:28px;
        padding-right:28px
    }

    .booking-table-wrap {
        padding-left:28px;
        padding-right:28px
    }
}

@media (max-width:599px) {
    .booking-table,
    .booking-table tbody,
    .booking-table tr,
    .booking-table th,
    .booking-table td {
        display:block;
        width:100%
    }

    .booking-table tr {
        border-bottom:1px solid #e5ebf0;
        padding:9px 0
    }

    .booking-table th,
    .booking-table td {
        border:0;
        padding:1px 0
    }

    .booking-table th {
        font-size:.72rem
    }

    .booking-table td {
        font-size:.88rem
    }
}

@media (min-width:940px) {
    .booking-slot-picker {
        grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr)
    }

    .booking-calendar,
    .booking-times {
        padding:18px
    }

    .booking-calendar__day {
        font-size:.9rem;
        min-height:42px
    }
}

@media (max-width:389px) {
    .booking-option {
        grid-template-columns:42px 1fr;
        padding:12px
    }

    .booking-option__icon {
        height:42px;
        width:42px
    }

    .booking-option__action {
        display:none
    }

    .booking-panel__head,
    .booking-form-section,
    .booking-form__footer {
        padding:18px
    }

    .booking-calendar,
    .booking-times {
        padding:10px
    }

    .booking-calendar__day {
        font-size:.75rem;
        min-height:32px
    }

    .booking-time-grid {
        grid-template-columns:1fr
    }

    .booking-policy-inline,
    .booking-processing,
    .booking-message {
        margin-left:18px;
        margin-right:18px
    }
}

@media (prefers-reduced-motion:reduce) {
    .booking-option,
    .booking-mode-switch__button,
    .booking-calendar__nav,
    .booking-calendar__day,
    .booking-time {
        scroll-behavior:auto;
        transition:none
    }

    .booking-calendar-loading,
    .booking-spinner {
        animation:none
    }
}