/*
 * Book Consultation Page – Stylesheet
 * Loaded only on pages using template-booking.php
 * Includes QuickCal calendar overrides to match brand.
 */

/* ═══════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════ */
:root {
    --bk-bg-light   : #F6F4F1;
    --bk-bg-white   : #FFFFFF;
    --bk-bg-dark    : #1E2820;
    --bk-accent     : #7FB13D;
    --bk-gold       : #C7A87A;
    --bk-gold-dark  : #b2945f;
    --bk-text       : #1A1A1A;
    --bk-muted      : #666666;
    --bk-border     : #DDD8D2;
    --bk-radius     : 4px;
    --bk-radius-lg  : 10px;
    --bk-shadow-sm  : 0 2px 12px rgba(0,0,0,0.06);
    --bk-shadow-md  : 0 8px 32px rgba(0,0,0,0.10);
    --bk-transition : 0.26s ease;
}


/* ═══════════════════════════════════════════
   SHARED LAYOUT
═══════════════════════════════════════════ */
.bk-container {
    max-width : 1180px;
    margin    : 0 auto;
    padding   : 0 24px;
}

.bk-label {
    display        : inline-block;
    font-family    : 'Inter', sans-serif;
    font-size      : 11px;
    font-weight    : 700;
    letter-spacing : 0.18em;
    text-transform : uppercase;
    color          : var(--bk-accent);
    margin-bottom  : 14px;
}


/* ═══════════════════════════════════════════
   BUTTON SYSTEM
═══════════════════════════════════════════ */
.bk-btn {
    display         : inline-flex;
    align-items     : center;
    gap             : 8px;
    padding         : 14px 36px;
    font-family     : 'Inter', sans-serif;
    font-size       : 14px;
    font-weight     : 500;
    letter-spacing  : 0.06em;
    text-transform  : uppercase;
    text-decoration : none;
    border-radius   : var(--bk-radius);
    border          : 2px solid transparent;
    cursor          : pointer;
    white-space     : nowrap;
    line-height     : 1;
    transition      : background-color var(--bk-transition), border-color var(--bk-transition), box-shadow var(--bk-transition);
}
.bk-btn--primary {
    background-color : var(--bk-gold);
    color            : #FFFFFF !important;
    border-color     : var(--bk-gold);
}
.bk-btn--primary:hover,
.bk-btn--primary:focus-visible {
    background-color : var(--bk-gold-dark);
    border-color     : var(--bk-gold-dark);
    box-shadow       : 0 4px 18px rgba(199,168,122,0.4);
}
.bk-btn--whatsapp {
    background-color : #1DAA57;
    color            : #FFFFFF !important;
    border-color     : #1DAA57;
}
.bk-btn--whatsapp:hover,
.bk-btn--whatsapp:focus-visible {
    background-color : #178f49;
    border-color     : #178f49;
    box-shadow       : 0 4px 18px rgba(29,170,87,0.35);
}
.bk-btn:focus-visible {
    outline        : 3px solid var(--bk-accent);
    outline-offset : 3px;
}


/* ═══════════════════════════════════════════
   1. HERO
═══════════════════════════════════════════ */
.bk-hero {
    background    : var(--bk-bg-white);
    padding       : 80px 24px 88px;
    text-align    : center;
    border-bottom : 1px solid var(--bk-border);
}

.bk-hero__title {
    font-family    : 'Playfair Display', Georgia, serif;
    font-size      : clamp(36px, 4.5vw, 54px);
    font-weight    : 600;
    color          : var(--bk-text);
    line-height    : 1.15;
    margin         : 0 0 20px;
    letter-spacing : -0.02em;
}

.bk-hero__sub {
    font-family : 'Inter', sans-serif;
    font-size   : 17px;
    font-weight : 300;
    color       : var(--bk-muted);
    line-height : 1.8;
    margin      : 0 auto;
    max-width   : 660px;
}


/* ═══════════════════════════════════════════
   2. TRUST BAR
═══════════════════════════════════════════ */
.bk-trust {
    background    : var(--bk-bg-dark);
    padding       : 28px 24px;
}

.bk-trust__list {
    list-style      : none;
    margin          : 0;
    padding         : 0;
    display         : flex;
    flex-wrap       : wrap;
    justify-content : center;
    gap             : 28px 48px;
}

.bk-trust__item {
    display     : flex;
    align-items : center;
    gap         : 10px;
    font-family : 'Inter', sans-serif;
    font-size   : 14px;
    font-weight : 400;
    color       : rgba(255,255,255,0.88);
    line-height : 1.4;
}


/* ═══════════════════════════════════════════
   3. CALENDAR + SIDEBAR
═══════════════════════════════════════════ */
.bk-calendar-section {
    background : var(--bk-bg-light);
    padding    : 88px 24px;
}

.bk-calendar-section__inner {
    display               : grid;
    grid-template-columns : 1fr 340px;
    gap                   : 56px;
    align-items           : start;
}

/* Calendar column */
.bk-calendar-header { margin-bottom: 24px; }

.bk-calendar-header__title {
    font-family    : 'Playfair Display', Georgia, serif;
    font-size      : clamp(24px, 2.8vw, 32px);
    font-weight    : 600;
    color          : var(--bk-text);
    line-height    : 1.2;
    margin         : 0;
    letter-spacing : -0.01em;
}

.bk-calendar-embed {
    background    : var(--bk-bg-white);
    border        : 1px solid var(--bk-border);
    border-radius : var(--bk-radius-lg);
    padding       : 32px;
    box-shadow    : var(--bk-shadow-sm);
}

.bk-calendar-fallback {
    font-family : 'Inter', sans-serif;
    font-size   : 15px;
    color       : var(--bk-muted);
    line-height : 1.7;
    padding     : 40px 0;
    text-align  : center;
    margin      : 0;
}
.bk-calendar-fallback a {
    color           : var(--bk-gold);
    text-decoration : underline;
}

/* Sidebar */
.bk-sidebar {
    display        : flex;
    flex-direction : column;
    gap            : 20px;
    position       : sticky;
    top            : 32px;
}

.bk-info-card {
    background    : var(--bk-bg-white);
    border        : 1px solid var(--bk-border);
    border-radius : var(--bk-radius-lg);
    padding       : 24px 28px;
    display       : flex;
    flex-direction: column;
    gap           : 10px;
}

.bk-info-card--alt {
    background : var(--bk-bg-dark);
    border-color: transparent;
}
.bk-info-card--alt .bk-info-card__title { color: #FFFFFF; }
.bk-info-card--alt .bk-info-card__text  { color: rgba(255,255,255,0.72); }

.bk-info-card__icon {
    width           : 40px;
    height          : 40px;
    border-radius   : 50%;
    background      : rgba(127,177,61,0.1);
    display         : flex;
    align-items     : center;
    justify-content : center;
    color           : var(--bk-accent);
    flex-shrink     : 0;
}

.bk-info-card__title {
    font-family : 'Playfair Display', Georgia, serif;
    font-size   : 16px;
    font-weight : 600;
    color       : var(--bk-text);
    margin      : 0;
    line-height : 1.3;
}

.bk-info-card__text {
    font-family : 'Inter', sans-serif;
    font-size   : 14px;
    font-weight : 300;
    color       : var(--bk-muted);
    line-height : 1.7;
    margin      : 0;
}

.bk-phone-link {
    color           : var(--bk-gold);
    text-decoration : none;
    font-weight     : 500;
}
.bk-phone-link:hover { color: var(--bk-gold-dark); }

.bk-hours-table {
    width           : 100%;
    border-collapse : collapse;
    font-family     : 'Inter', sans-serif;
    font-size       : 13px;
}
.bk-hours-table td {
    padding     : 7px 0;
    border-bottom: 1px solid var(--bk-border);
    line-height : 1.4;
    color       : var(--bk-text);
}
.bk-hours-table tr:last-child td { border-bottom: none; }
.bk-hours-table td:last-child { text-align: right; color: var(--bk-muted); }
.bk-hours-closed { color: #C0392B !important; font-weight: 500; }

.bk-wa-btn {
    display         : inline-flex;
    align-items     : center;
    gap             : 8px;
    padding         : 12px 24px;
    background      : #1DAA57;
    color           : #FFFFFF !important;
    border-radius   : var(--bk-radius);
    font-family     : 'Inter', sans-serif;
    font-size       : 13px;
    font-weight     : 500;
    letter-spacing  : 0.06em;
    text-transform  : uppercase;
    text-decoration : none;
    border          : 2px solid #1DAA57;
    transition      : background-color var(--bk-transition), box-shadow var(--bk-transition);
    align-self      : flex-start;
}
.bk-wa-btn:hover { background: #178f49; border-color: #178f49; box-shadow: 0 4px 14px rgba(29,170,87,0.3); }


/* ═══════════════════════════════════════════
   4. WHAT TO EXPECT
═══════════════════════════════════════════ */
.bk-expect {
    background    : var(--bk-bg-white);
    padding       : 88px 24px;
    border-top    : 1px solid var(--bk-border);
}

.bk-section-header {
    text-align    : center;
    margin-bottom : 56px;
}

.bk-section-header__title {
    font-family    : 'Playfair Display', Georgia, serif;
    font-size      : clamp(28px, 3.2vw, 38px);
    font-weight    : 600;
    color          : var(--bk-text);
    line-height    : 1.2;
    margin         : 0;
    letter-spacing : -0.01em;
}

.bk-steps {
    display               : grid;
    grid-template-columns : repeat(4, 1fr);
    gap                   : 32px;
}

.bk-step {
    position : relative;
    padding  : 0;
}

.bk-step__num {
    font-family    : 'Playfair Display', Georgia, serif;
    font-size      : 48px;
    font-weight    : 700;
    color          : rgba(199,168,122,0.18);
    line-height    : 1;
    margin-bottom  : 16px;
    letter-spacing : -0.02em;
}

.bk-step__title {
    font-family : 'Playfair Display', Georgia, serif;
    font-size   : 19px;
    font-weight : 600;
    color       : var(--bk-text);
    margin      : 0 0 12px;
    line-height : 1.3;
}

.bk-step__desc {
    font-family : 'Inter', sans-serif;
    font-size   : 14px;
    font-weight : 300;
    color       : var(--bk-muted);
    line-height : 1.75;
    margin      : 0;
}


/* ═══════════════════════════════════════════
   5. CTA
═══════════════════════════════════════════ */
.bk-cta {
    background : var(--bk-bg-dark);
    padding    : 80px 24px;
    text-align : center;
}

.bk-cta__heading {
    font-family    : 'Playfair Display', Georgia, serif;
    font-size      : clamp(28px, 3.5vw, 42px);
    font-weight    : 600;
    color          : #FFFFFF !important;
    line-height    : 1.2;
    margin         : 0 0 16px;
    letter-spacing : -0.01em;
}

.bk-cta__desc {
    font-family : 'Inter', sans-serif;
    font-size   : 16px;
    font-weight : 300;
    color       : rgba(255,255,255,0.72);
    line-height : 1.8;
    margin      : 0 auto 40px;
    max-width   : 560px;
}

.bk-cta__actions {
    display         : flex;
    gap             : 16px;
    justify-content : center;
    flex-wrap       : wrap;
}


/* ═══════════════════════════════════════════
   QUICKCAL BRAND OVERRIDES
   Integrate the plugin calendar with our design
═══════════════════════════════════════════ */

/* Container reset */
.bk-calendar-embed .booked-calendar-shortcode-wrap { margin: 0; }

/* Calendar table heading row */
.booked-calendar table thead th {
    background-color : var(--bk-bg-dark) !important;
    color            : #FFFFFF !important;
    font-family      : 'Inter', sans-serif !important;
    font-size        : 12px !important;
    font-weight      : 600 !important;
    letter-spacing   : 0.08em !important;
    text-transform   : uppercase !important;
    padding          : 10px 0 !important;
}

/* Month navigation header */
.booked-calendar-wrap .booked-calendar table th.booked-prev,
.booked-calendar-wrap .booked-calendar table th.booked-next,
.booked-calendar-wrap .booked-calendar table th.booked-month-year {
    background    : var(--bk-bg-white) !important;
    border-bottom : 2px solid var(--bk-border) !important;
}

.booked-calendar-wrap .booked-month-year span {
    font-family    : 'Playfair Display', Georgia, serif !important;
    font-size      : 20px !important;
    font-weight    : 600 !important;
    color          : var(--bk-text) !important;
    letter-spacing : -0.01em !important;
}

/* Prev/Next arrow buttons */
.booked-calendar table .booked-prev a,
.booked-calendar table .booked-next a {
    color      : var(--bk-gold) !important;
    transition : color var(--bk-transition) !important;
}
.booked-calendar table .booked-prev a:hover,
.booked-calendar table .booked-next a:hover {
    color : var(--bk-gold-dark) !important;
}

/* Calendar day cells */
.booked-calendar table td {
    font-family : 'Inter', sans-serif !important;
    font-size   : 14px !important;
    border      : 1px solid var(--bk-border) !important;
}

/* Available day — has appointment slots */
.booked-calendar table td.booked-has-appointments a {
    background-color : var(--bk-gold) !important;
    color            : #FFFFFF !important;
    border-radius    : var(--bk-radius) !important;
    font-weight      : 500 !important;
    transition       : background-color var(--bk-transition) !important;
}
.booked-calendar table td.booked-has-appointments a:hover {
    background-color : var(--bk-gold-dark) !important;
}

/* Today */
.booked-calendar table td.booked-today > span,
.booked-calendar table td.booked-today > a {
    background-color : rgba(199,168,122,0.12) !important;
    border-radius    : var(--bk-radius) !important;
    font-weight      : 600 !important;
}

/* Selected day */
.booked-calendar table td.booked-active > a,
.booked-calendar table td.booked-active > span {
    background-color : var(--bk-bg-dark) !important;
    color            : #FFFFFF !important;
    border-radius    : var(--bk-radius) !important;
}

/* Time slot list */
.booked-appt-list h4 {
    font-family    : 'Playfair Display', Georgia, serif !important;
    font-size      : 18px !important;
    font-weight    : 600 !important;
    color          : var(--bk-text) !important;
    letter-spacing : -0.01em !important;
    margin-bottom  : 16px !important;
}

.booked-appt-list ul li .timeslot .time-info strong {
    font-family : 'Inter', sans-serif !important;
    font-size   : 14px !important;
    font-weight : 600 !important;
    color       : var(--bk-text) !important;
}

/* Book slot button */
.booked-appt-list ul li .timeslot .button,
.booked-appt-list ul li .timeslot .booked-btn {
    background-color : var(--bk-gold) !important;
    border-color     : var(--bk-gold) !important;
    color            : #FFFFFF !important;
    font-family      : 'Inter', sans-serif !important;
    font-size        : 13px !important;
    font-weight      : 500 !important;
    letter-spacing   : 0.05em !important;
    text-transform   : uppercase !important;
    border-radius    : var(--bk-radius) !important;
    padding          : 10px 20px !important;
    transition       : background-color var(--bk-transition), border-color var(--bk-transition) !important;
}
.booked-appt-list ul li .timeslot .button:hover,
.booked-appt-list ul li .timeslot .booked-btn:hover {
    background-color : var(--bk-gold-dark) !important;
    border-color     : var(--bk-gold-dark) !important;
}

/* Fully booked slot */
.booked-appt-list ul li .timeslot.fully-booked .button,
.booked-appt-list ul li .timeslot.fully-booked .booked-btn {
    background-color : var(--bk-border) !important;
    border-color     : var(--bk-border) !important;
    color            : var(--bk-muted) !important;
}

/* Modal / popup */
#booked-modal .booked-modal-inner,
.booked-modal-content {
    border-radius : var(--bk-radius-lg) !important;
    font-family   : 'Inter', sans-serif !important;
}

#booked-modal h2,
.booked-modal-content h2 {
    font-family    : 'Playfair Display', Georgia, serif !important;
    font-size      : 22px !important;
    font-weight    : 600 !important;
    color          : var(--bk-text) !important;
    letter-spacing : -0.01em !important;
}

/* Form fields inside modal */
#booked-modal input[type="text"],
#booked-modal input[type="email"],
#booked-modal input[type="tel"],
#booked-modal textarea,
.booked-modal-content input[type="text"],
.booked-modal-content input[type="email"],
.booked-modal-content textarea {
    font-family   : 'Inter', sans-serif !important;
    font-size     : 14px !important;
    border        : 1.5px solid var(--bk-border) !important;
    border-radius : var(--bk-radius) !important;
    padding       : 10px 14px !important;
    transition    : border-color var(--bk-transition) !important;
}
#booked-modal input:focus,
#booked-modal textarea:focus,
.booked-modal-content input:focus,
.booked-modal-content textarea:focus {
    border-color : var(--bk-accent) !important;
    outline      : none !important;
    box-shadow   : 0 0 0 3px rgba(127,177,61,0.12) !important;
}

/* Confirm / submit button in modal */
#booked-modal .booked-submit,
#booked-modal input[type="submit"],
.booked-modal-content .booked-submit,
.booked-modal-content input[type="submit"] {
    background-color : var(--bk-gold) !important;
    border-color     : var(--bk-gold) !important;
    color            : #FFFFFF !important;
    font-family      : 'Inter', sans-serif !important;
    font-weight      : 500 !important;
    letter-spacing   : 0.06em !important;
    text-transform   : uppercase !important;
    border-radius    : var(--bk-radius) !important;
    padding          : 12px 28px !important;
    transition       : background-color var(--bk-transition) !important;
}
#booked-modal .booked-submit:hover,
#booked-modal input[type="submit"]:hover,
.booked-modal-content .booked-submit:hover,
.booked-modal-content input[type="submit"]:hover {
    background-color : var(--bk-gold-dark) !important;
    border-color     : var(--bk-gold-dark) !important;
}


/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 960px) {
    .bk-calendar-section__inner {
        grid-template-columns : 1fr;
    }
    .bk-sidebar { position: static; }
    .bk-steps   { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .bk-hero              { padding: 60px 20px 72px; }
    .bk-trust__list       { gap: 16px 32px; }
    .bk-calendar-section  { padding: 64px 20px; }
    .bk-calendar-embed    { padding: 20px 16px; }
    .bk-expect            { padding: 64px 20px; }
    .bk-steps             { grid-template-columns: 1fr; gap: 40px; }
    .bk-cta               { padding: 64px 20px; }
    .bk-cta__actions      { flex-direction: column; align-items: stretch; }
    .bk-cta__actions .bk-btn { justify-content: center; }
}