/* Booking UI override for the streamlined production booking flow. */

.booking-sample-faq{
    max-width:860px;
    margin:0 auto 56px;
    padding:clamp(32px, 5vw, 56px) clamp(16px, 6vw, 40px);
}

.booking-sample-faq .section-head{
    margin:0 auto 22px;
    text-align:center;
}

.booking-sample-faq .section-head h2{
    margin:0;
    color:#0f172a;
    font-size:clamp(1.7rem, 4vw, 2.15rem);
    line-height:1.15;
}

.booking-sample-faq .faq-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:0;
}

.booking-sample-faq .faq-list{
    display:grid;
    gap:12px;
}

.booking-sample-faq .faq-item{
    padding:17px 20px;
    border:1px solid rgba(0,53,102,.06);
    border-radius:18px;
    background:rgba(0,119,255,.04);
    box-shadow:0 10px 24px rgba(12,33,71,.035);
}

.booking-sample-faq .faq-item summary{
    cursor:pointer;
    font-weight:700;
    color:var(--primary);
}

.booking-sample-faq .faq-item p{
    margin-top:12px;
    color:#5d6c7f;
    line-height:var(--line-relaxed);
}

@media (max-width:720px){
    .booking-sample-faq{
        margin-bottom:52px;
        padding:34px 16px 48px;
    }

    .booking-sample-faq .faq-list{
        border-radius:22px;
    }
}

/* Booking page simplification */

body[data-page="booking"] .booking-hero{
    padding-top:clamp(30px, 5vw, 46px);
    padding-bottom:clamp(26px, 4vw, 38px);
}

body[data-page="booking"] .booking-hero h1{
    margin-bottom:0;
}

body[data-page="booking"] .booking-main > .booking-card > h2,
body[data-page="booking"] .booking-main > .booking-card > h3 + p{
    display:none;
}

body[data-page="booking"] .booking-main{
    gap:16px;
}

body[data-page="booking"] .booking-layout{
    max-width:860px;
    padding-bottom:24px;
}

body[data-page="booking"] .sample-sticky-selection{
    display:none !important;
}

body[data-page="booking"] .sample-sticky-selection[hidden]{
    display:none;
}

body[data-page="booking"] .sample-sticky-chip{
    width:100%;
    min-height:52px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:13px 15px;
    border:1px solid rgba(0,119,255,.16);
    border-radius:16px;
    background:rgba(255,255,255,.9);
    color:var(--primary);
    text-align:left;
    box-shadow:0 10px 24px rgba(12,33,71,.055);
    cursor:pointer;
}

body[data-page="booking"] .sample-sticky-chip[hidden]{
    display:none;
}

body[data-page="booking"] .sample-sticky-chip span{
    color:#64748b;
    font-size:.9rem;
    font-weight:850;
    white-space:nowrap;
}

body[data-page="booking"] .sample-sticky-chip strong{
    min-width:0;
    color:var(--primary);
    font-size:1rem;
    line-height:1.2;
    overflow-wrap:anywhere;
}

body[data-page="booking"] .sample-sticky-chip i{
    width:20px;
    height:20px;
    margin-left:auto;
    flex:0 0 auto;
    opacity:.62;
    background:center / 19px 19px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23003566' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
}

body[data-page="booking"] .booking-card{
    padding:clamp(18px, 2.4vw, 24px);
}

body[data-page="booking"] .booking-card h3{
    margin:0 0 14px;
    font-size:clamp(1.25rem, 2vw, 1.55rem);
}

body[data-page="booking"] .sample-step-card{
    position:relative;
}

body[data-page="booking"] .sample-step-preview{
    width:100%;
    min-height:66px;
    display:none;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:17px 18px;
    border:1px solid rgba(0,119,255,.14);
    border-radius:18px;
    background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,251,255,.92));
    color:var(--primary);
    text-align:left;
    box-shadow:0 12px 28px rgba(12,33,71,.055);
    cursor:pointer;
}

body[data-page="booking"] .sample-step-card.is-collapsed{
    display:block;
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none;
}

body[data-page="booking"] .sample-step-card.is-collapsed:hover{
    transform:none;
    box-shadow:none;
}

body[data-page="booking"] .sample-step-card.is-collapsed > h2,
body[data-page="booking"] .sample-step-card.is-collapsed > h3,
body[data-page="booking"] .sample-step-card.is-collapsed > p,
body[data-page="booking"] .sample-step-card.is-collapsed > .booking-calendar,
body[data-page="booking"] .sample-step-card.is-collapsed > .booking-panel{
    display:none !important;
}

body[data-page="booking"] .sample-step-card.is-collapsed .sample-step-preview{
    display:flex;
}

body[data-page="booking"] .sample-step-preview-copy{
    min-width:0;
    display:flex;
    align-items:baseline;
    gap:8px;
}

body[data-page="booking"] .sample-step-label{
    color:#5f7187;
    font-size:var(--text-base);
    font-weight:800;
    white-space:nowrap;
}

body[data-page="booking"] .sample-step-preview strong{
    color:var(--primary);
    font-size:clamp(1rem, 2.4vw, 1.18rem);
    line-height:1.25;
    overflow-wrap:anywhere;
}

body[data-page="booking"] .sample-step-edit-icon{
    width:25px;
    height:25px;
    flex:0 0 auto;
    opacity:.72;
    background:center / 23px 23px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23003566' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
}

body[data-page="booking"] .booking-period-list{
    gap:12px;
}

body[data-page="booking"] .booking-period{
    padding:16px;
    border-radius:20px;
}

body[data-page="booking"] .booking-period-header{
    align-items:flex-start;
    margin-bottom:14px;
}

body[data-page="booking"] .booking-period-title{
    align-items:flex-start;
}

body[data-page="booking"] .booking-period-icon{
    width:42px;
    height:42px;
    border-radius:14px;
}

body[data-page="booking"] .booking-period-icon.morning::after{
    inset:11px auto auto 11px;
    width:10px;
    height:10px;
}

body[data-page="booking"] .booking-period-copy{
    gap:5px;
}

body[data-page="booking"] .booking-period-copy strong{
    font-size:1.05rem;
}

body[data-page="booking"] .booking-period-copy span{
    font-size:.84rem;
}

body[data-page="booking"] .booking-period-copy .period-badge{
    width:fit-content;
    margin-top:4px;
    padding:6px 10px;
    font-size:11px;
}

body[data-page="booking"] .booking-slot-grid{
    gap:9px;
}

body[data-page="booking"] .sample-compact-slot{
    min-height:46px;
    justify-content:center;
    padding:12px 14px;
    border-radius:15px;
    gap:0;
}

body[data-page="booking"] .sample-compact-slot .slot-time{
    font-size:.96rem;
    line-height:1.2;
}

body[data-page="booking"] .sample-compact-slot.closed .slot-time{
    color:#9aa5b5;
}

body[data-page="booking"] .sample-booking-details{
    display:grid;
    gap:16px;
    margin-top:0;
}

body[data-page="booking"] .sample-booking-details[hidden]{
    display:none;
}

body[data-page="booking"] .sample-insight-card{
    background:
        radial-gradient(circle at top right, rgba(14,165,233,.14), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(239,248,255,.9));
}

body[data-page="booking"] .sample-insight-card .sample-card-copy{
    display:block;
    max-width:none;
    margin:0 0 18px;
    color:#5f7187;
    font-size:var(--text-sm);
    line-height:1.7;
}

body[data-page="booking"] .sample-field{
    display:grid;
    gap:8px;
    margin-top:14px;
}

body[data-page="booking"] .sample-field span{
    color:var(--primary);
    font-size:var(--text-sm);
    font-weight:850;
}

body[data-page="booking"] .sample-field input,
body[data-page="booking"] .sample-field textarea{
    width:100%;
    border:1px solid rgba(0,53,102,.16);
    border-radius:16px;
    background:#fff;
    color:var(--primary);
    font-size:var(--text-base);
    line-height:1.5;
}

body[data-page="booking"] .sample-field input{
    min-height:48px;
    padding:0 14px;
}

body[data-page="booking"] .sample-field textarea{
    min-height:92px;
    padding:13px 14px;
    resize:vertical;
}

body[data-page="booking"] .sample-field input:focus,
body[data-page="booking"] .sample-field textarea:focus{
    outline:none;
    border-color:#0ea5e9;
    box-shadow:0 0 0 4px rgba(14,165,233,.12);
}

body[data-page="booking"] .sample-ghost-toggle{
    width:100%;
    display:flex;
    align-items:center;
    gap:14px;
    margin-top:16px;
    min-height:62px;
    padding:14px 16px;
    border:1px solid rgba(0,53,102,.08);
    border-radius:18px;
    background:rgba(255,255,255,.86);
    color:var(--primary);
    text-align:left;
    cursor:pointer;
    transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

body[data-page="booking"] .sample-toggle-light{
    width:16px;
    height:16px;
    border-radius:50%;
    background:#cbd5e1;
    box-shadow:0 0 0 8px rgba(148,163,184,.12);
    flex:0 0 auto;
}

body[data-page="booking"] .sample-toggle-copy{
    display:grid;
    gap:4px;
}

body[data-page="booking"] .sample-toggle-copy strong{
    color:var(--primary);
    font-size:var(--text-base);
    line-height:1.2;
}

body[data-page="booking"] .sample-toggle-copy small{
    color:#64748b;
    font-size:var(--text-sm);
    font-weight:800;
}

body[data-page="booking"] .sample-ghost-toggle.is-on{
    border-color:rgba(14,165,233,.56);
    background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(232,248,255,.92));
    box-shadow:0 16px 34px rgba(14,116,144,.12);
}

body[data-page="booking"] .sample-ghost-toggle.is-on .sample-toggle-light{
    background:#22c55e;
    box-shadow:0 0 0 8px rgba(34,197,94,.16), 0 0 18px rgba(34,197,94,.48);
}

body[data-page="booking"] .sample-profile-card{
    background:rgba(255,255,255,.88);
}

body[data-page="booking"] .sample-profile-email{
    display:block;
    margin:0 0 14px;
    color:#607287;
    font-size:var(--text-sm);
    line-height:1.6;
}

body[data-page="booking"] .sample-profile-email strong{
    color:var(--primary);
    font-weight:850;
    overflow-wrap:anywhere;
}

body[data-page="booking"] .booking-auth-modal > h2{
    margin-bottom:8px;
}

body[data-page="booking"] .booking-auth-modal > h2::before{
    content:"方案與付款";
    display:block;
}

body[data-page="booking"] .booking-auth-modal > h2{
    font-size:0;
}

body[data-page="booking"] .booking-auth-modal > h2::before{
    font-size:clamp(1.55rem, 4vw, 2rem);
    line-height:1.15;
}

body[data-page="booking"] #bookingCompleteModal.is-success .booking-auth-modal > h2::before{
    content:"預約完成";
}

body[data-page="booking"] #bookingCompleteModal:not(.is-success) .booking-auth-modal > h2{
    display:none;
}

body[data-page="booking"] #bookingCompleteModal.is-success .advanced-service-section,
body[data-page="booking"] #bookingCompleteModal.is-success #bookingPaymentChoicePanel,
body[data-page="booking"] #bookingCompleteModal.is-success #bookingPaymentPanel{
    display:none !important;
}

body[data-page="booking"] #bookingCompleteModal.is-success #bookingSuccessPanel > .summary-kicker,
body[data-page="booking"] #bookingCompleteModal.is-success #bookingSuccessPanel > h2,
body[data-page="booking"] #bookingCompleteModal.is-success #bookingSuccessPanel > .auth-copy,
body[data-page="booking"] #bookingCompleteModal.is-success #bookingSuccessNote{
    display:none !important;
}

body[data-page="booking"] .booking-auth-modal > .auth-copy,
body[data-page="booking"] #bookingAuthSummaryGrid,
body[data-page="booking"] #bookingAuthInputGrid{
    display:none !important;
}

body[data-page="booking"] .booking-auth-modal .advanced-service-section{
    display:grid;
    gap:18px;
    margin:18px 0 0;
    padding:0;
    border:0;
    background:transparent;
}

body[data-page="booking"] .booking-auth-modal .advanced-service-header,
body[data-page="booking"] .booking-auth-modal .advanced-service-section > .advanced-service-block{
    display:none !important;
}

body[data-page="booking"] .booking-auth-modal .advanced-service-footer{
    margin:0;
}

body[data-page="booking"] .booking-auth-modal .addon-total-card{
    align-items:flex-start;
    padding:clamp(24px, 5vw, 36px);
    border:0;
    border-radius:0;
    background:
        radial-gradient(circle at 88% 10%, rgba(125,211,252,.52), transparent 30%),
        linear-gradient(180deg, rgba(248,253,255,.98), rgba(239,248,255,.92));
    box-shadow:0 14px 28px rgba(12,33,71,.06);
}

body[data-page="booking"] .booking-auth-modal .addon-total-label{
    display:block;
    width:auto;
    padding:0;
    border-radius:0;
    background:transparent;
    color:var(--primary);
    font-size:clamp(1rem, 4vw, 1.18rem);
    font-weight:900;
    line-height:1.22;
    letter-spacing:0;
    text-transform:none;
}

body[data-page="booking"] .booking-auth-modal #bookingAddonTotal{
    margin-top:6px;
    color:var(--primary);
    font-size:clamp(2.25rem, 9vw, 3.45rem);
    line-height:1.04;
    letter-spacing:0;
}

body[data-page="booking"] .booking-auth-modal .addon-service-tags{
    display:block;
    margin-top:18px;
}

body[data-page="booking"] .booking-auth-modal .addon-service-tags span{
    display:block;
    max-width:420px;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    color:#8a94a3;
    font-size:clamp(1rem, 4vw, 1.18rem);
    font-weight:700;
    line-height:1.45;
    box-shadow:none;
}

body[data-page="booking"] .booking-auth-modal .consent-check-row,
body[data-page="booking"] .booking-auth-modal .consent-details,
body[data-page="booking"] #bookingPaymentChoicePanel,
body[data-page="booking"] #bookingPaymentPanel{
    border:1px solid rgba(0,53,102,.08);
    border-radius:22px;
    background:rgba(255,255,255,.82);
    box-shadow:0 12px 30px rgba(12,33,71,.04);
}

body[data-page="booking"] .booking-auth-modal .consent-check-row{
    min-height:60px;
    padding:18px 20px;
}

body[data-page="booking"] .booking-auth-modal .consent-details{
    padding:18px 20px;
}

body[data-page="booking"] .booking-auth-modal .consent-details summary{
    color:var(--primary);
    font-weight:900;
}

body[data-page="booking"] #bookingPaymentChoicePanel{
    margin-top:18px;
    padding:22px;
}

body[data-page="booking"] .booking-success-addon-card{
    position:relative;
    display:grid;
    gap:10px;
    margin:18px 0 14px;
    padding:clamp(22px, 5vw, 34px);
    overflow:hidden;
    border:0;
    border-radius:16px;
    background:
        radial-gradient(circle at 88% 6%, rgba(125,211,252,.56), transparent 30%),
        linear-gradient(180deg, rgba(249,253,255,.98), rgba(242,249,255,.94));
    box-shadow:0 18px 34px rgba(12,33,71,.06);
}

body[data-page="booking"] #bookingCompleteModal.is-success .booking-success-panel > .google-login-status{
    display:none;
}

body[data-page="booking"] .booking-success-addon-card[hidden]{
    display:none;
}

body[data-page="booking"] .booking-success-addon-card h3{
    position:relative;
    z-index:1;
    margin:0;
    color:var(--primary);
    font-size:clamp(2.05rem, 8vw, 3.2rem);
    line-height:1.02;
    letter-spacing:0;
}

body[data-page="booking"] .booking-success-addon-kicker{
    position:relative;
    z-index:1;
    margin:0;
    color:var(--primary);
    font-size:clamp(1rem, 4vw, 1.22rem);
    font-weight:900;
    line-height:1.2;
}

body[data-page="booking"] .booking-success-addon-copy{
    position:relative;
    z-index:1;
    display:block;
    max-width:420px;
    margin:6px 0 0;
    color:#7b8797;
    font-size:clamp(1rem, 4vw, 1.18rem);
    font-weight:700;
    line-height:1.45;
}

body[data-page="booking"] .booking-success-addon-actions{
    display:flex;
    margin:0 0 12px;
}

body[data-page="booking"] .booking-success-addon-actions .primary-action{
    width:100%;
    justify-content:center;
}

body[data-page="booking"] #bookingCompleteModal.is-success #bookingSuccessCalendarBtn.calendar-action,
body[data-page="booking"] #bookingCompleteModal.is-success .booking-success-nav-actions .secondary-action{
    background:#eef4fb;
    color:var(--primary);
    box-shadow:none;
}

body[data-page="booking"] #bookingCompleteModal.is-success #bookingSuccessCalendarBtn.calendar-action{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:100%;
    margin:18px 0 16px;
    border:1.5px solid rgba(0,188,212,.56);
    background:linear-gradient(180deg, #ffffff, #eaffff);
    color:#007f8c;
    font-weight:900;
    box-shadow:0 12px 28px rgba(0,188,212,.12);
}

body[data-page="booking"] #bookingCompleteModal.is-success #bookingSuccessCalendarBtn.calendar-action::before{
    content:"";
    width:21px;
    height:21px;
    flex:0 0 auto;
    background:center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23007f8c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='3'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M8 15h.01'/%3E%3Cpath d='M12 15h.01'/%3E%3Cpath d='M16 15h.01'/%3E%3C/svg%3E");
}

body[data-page="booking"] #bookingCompleteModal.is-success #bookingSuccessCalendarBtn.calendar-action::after{
    content:"›";
    margin-left:2px;
    color:#007f8c;
    font-size:1.35rem;
    line-height:1;
}

body[data-page="booking"] #bookingCompleteModal.is-success #bookingSuccessCalendarBtn.calendar-action:hover,
body[data-page="booking"] #bookingCompleteModal.is-success #bookingSuccessCalendarBtn.calendar-action:focus-visible{
    transform:translateY(-1px);
    background:linear-gradient(180deg, #ffffff, #dcffff);
    border-color:rgba(0,188,212,.76);
    box-shadow:0 16px 32px rgba(0,188,212,.18);
}

body[data-page="booking"] #bookingCompleteModal.is-success #bookingSuccessCalendarBtn.calendar-action:active{
    transform:translateY(0);
    box-shadow:0 8px 18px rgba(0,119,255,.12);
}

body[data-page="booking"] #bookingCompleteModal.is-success .booking-success-addon-actions .primary-action{
    background:linear-gradient(135deg, var(--accent), #0062cc);
    color:#fff;
    box-shadow:0 14px 24px rgba(0,119,255,.22);
}

body[data-page="booking"] #bookingSummary{
    max-width:860px;
    padding:0;
    background:transparent;
    border:0;
    box-shadow:none;
    backdrop-filter:none;
}

body[data-page="booking"] #bookingSummary .summary-kicker,
body[data-page="booking"] #bookingSummary h2,
body[data-page="booking"] #bookingSummary .summary-lead,
body[data-page="booking"] #bookingSummary .summary-row,
body[data-page="booking"] #bookingSummary .summary-divider,
body[data-page="booking"] #bookingSummary .summary-hint{
    display:none;
}

body[data-page="booking"] #continueBtn{
    margin-top:0;
    min-height:54px;
    font-size:1rem;
    border-radius:14px;
}

@media(max-width:768px){
    body[data-page="booking"] .booking-hero{
        margin:88px 16px 14px;
        padding:24px 20px;
    }

    body[data-page="booking"] .booking-layout{
        gap:14px;
    }

    body[data-page="booking"] .booking-card{
        padding:16px;
    }

    body[data-page="booking"] .booking-period{
        padding:14px;
    }

    body[data-page="booking"] .booking-slot-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    body[data-page="booking"] .sample-compact-slot{
        min-height:44px;
        padding:10px 12px;
    }

    body[data-page="booking"] .sample-compact-slot .slot-time{
        font-size:.84rem;
    }
}

@media(max-width:360px){
    body[data-page="booking"] .booking-slot-grid{
        grid-template-columns:1fr;
    }
}