/* ═══════════════════════════════════════════════════════════
   Outlook-style appointment shell
═══════════════════════════════════════════════════════════ */

/* ── Outer wrapper — breathing room above and below the shell ── */
.outlook-shell-wrap {
    padding: 2rem 0 3rem;      /* 2rem gap below nav • 3rem gap above footer    */
}

/* Shell card */
.outlook-shell {
    display: flex;
    flex-direction: column;
    /*  Navbar logo: ~76px
        body padding-top (fixed-navbar-padding): ~76px  (already handled by body)
        main mt-4: 1.5rem = 24px
        wrap padding-top: 2rem = 32px
        wrap padding-bottom: 3rem = 48px
        ─────────────────────────────────────────────────
        Total overhead to subtract from 100vh: 76 + 24 + 32 + 48 = ~180px        */
    height: calc(100vh - 180px);
    max-height: calc(100vh - 180px);
    min-height: 520px;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: rgba(10,10,10,.6);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(212,175,55,.18);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,.55);
    color: #ccc;
}

/* Shell card */
.outlook-shell2 {
    display: flex;
    flex-direction: column;
    /*  Navbar logo: ~76px
        body padding-top (fixed-navbar-padding): ~76px  (already handled by body)
        main mt-4: 1.5rem = 24px
        wrap padding-top: 2rem = 32px
        wrap padding-bottom: 3rem = 48px
        ─────────────────────────────────────────────────
        Total overhead to subtract from 100vh: 76 + 24 + 32 + 48 = ~180px        */
    height: calc(100vh - 180px);
    max-height: calc(100vh - 180px);
    min-height: 520px;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: #000;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(212,175,55,.18);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,.55);
    color: #ccc;
}


/* ── Toolbar ─────────────────────────────────────────── */
.otb {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem;
    height: 52px;
    background: rgba(18,18,18,.95);
    border-bottom: 1px solid rgba(212,175,55,.18);
    flex-shrink: 0;
    gap: .75rem;
    min-width: 0;
    border-radius: 10px 10px 0 0;  /* follows the shell's rounded top corners   */
}
.otb-left  { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.otb-icon  { color: #d4af37; font-size: 1.1rem; flex-shrink: 0; }
.otb-title {
    color: #e0e0e0;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.otb-center {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 1;
    justify-content: center;
    min-width: 0;
}
.otb-period {
    font-size: .95rem;
    font-weight: 600;
    color: #d4af37;
    min-width: 140px;
    text-align: center;
    letter-spacing: .02em;
    white-space: nowrap;
}
.otb-nav {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: #aaa;
    text-decoration: none;
    font-size: .95rem;
    transition: background .14s, color .14s;
    flex-shrink: 0;
}
.otb-nav:hover          { background: rgba(255,255,255,.08); color: #d4af37; }
.otb-nav--disabled      { color: #3a3a3a; pointer-events: none; }
.otb-right              { display: flex; align-items: center; flex-shrink: 0; }
.otb-today-btn {
    font-size: .8rem;
    font-weight: 600;
    padding: .3rem .85rem;
    border-radius: 4px;
    border: 1px solid rgba(212,175,55,.35);
    color: #d4af37;
    text-decoration: none;
    background: transparent;
    cursor: pointer;
    letter-spacing: .04em;
    transition: background .14s, border-color .14s;
    white-space: nowrap;
}
.otb-today-btn:hover {
    background: rgba(212,175,55,.12);
    border-color: #d4af37;
    color: #d4af37;
}

/* ── Body ────────────────────────────────────────────── */
.outlook-body {
    display: flex;
    flex: 1;
    overflow: hidden;
    position: relative;
    min-height: 0;
}

/* ── Left sidebar ────────────────────────────────────── */
.o-sidebar {
    width: 220px;
    flex-shrink: 0;
    padding: 1.1rem .9rem;
    border-right: 1px solid rgba(255,255,255,.06);
    background: rgba(14,14,14,.85);
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    overflow-y: auto;
}

/* Mini calendar */
.mini-cal { user-select: none; }
.mini-cal-dow-row {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    margin-bottom: .25rem;
}
.mini-dow {
    text-align: center;
    font-size: .62rem;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: .2rem 0;
}
.mini-cal-grid {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    gap: 1px;
}
.mini-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    border-radius: 4px;
    font-size: .78rem;
    font-weight: 500;
    cursor: default;
    transition: background .12s, color .12s;
}
.mini-cell--past  { color: #383838; }
.mini-cell--full  { color: #5a2525; text-decoration: line-through; }
.mini-cell--open  { color: #bbb; cursor: pointer; }
.mini-cell--open:hover,
.mini-cell--open:focus-visible {
    background: rgba(212,175,55,.14);
    color: #d4af37;
    outline: none;
}
.mini-cell--today {
    font-weight: 700;
    color: #d4af37;
    box-shadow: inset 0 0 0 1px rgba(212,175,55,.55);
    border-radius: 50%;
}
.mini-cell--selected {
    background: #d4af37 !important;
    color: #000 !important;
    font-weight: 700;
    border-radius: 50%;
}

/* Closed days (schedule-defined, e.g. Sundays) — dimmed, not interactive */
.mini-cell--closed {
    color: #444;
    cursor: default;
    opacity: 0.35;
}

/* Legend */
.o-legend { display: flex; flex-direction: column; gap: .45rem; }
.o-legend-row {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .72rem;
    color: #555;
}
.o-pip {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.o-pip--open  { background: rgba(212,175,55,.7); }
.o-pip--full  { background: rgba(180,50,50,.6); }
.o-pip--today { background: transparent; box-shadow: 0 0 0 2px #d4af37; }
.o-sidebar-hint { font-size: .75rem; color: #444; line-height: 1.5; margin: 0; }

/* ── Scheduling pane ─────────────────────────────────── */
.o-schedule-pane {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: rgba(16,16,16,.7);
    border-right: 1px solid rgba(255,255,255,.05);
    min-width: 0;
}

/* Empty state */
.o-empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #3a3a3a;
    gap: .75rem;
    padding: 3rem;
    text-align: center;
}
.o-empty-icon    { font-size: 3rem; }
.o-empty-state p { font-size: .9rem; line-height: 1.6; margin: 0; }

/* Day header */
.o-day-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .85rem 1.25rem .6rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
    background: rgba(20,20,20,.9);
    flex-shrink: 0;
}
.o-day-header-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 48px;
    flex-shrink: 0;
}
.o-day-name { font-size: .62rem; font-weight: 700; color: #666; letter-spacing: .1em; }
.o-day-num  { font-size: 1.7rem; font-weight: 300; color: #d4af37; line-height: 1; }
.o-day-full { font-size: .88rem; color: #888; }

/* Slots */
.o-slots-wrap    { flex: 1; padding: .5rem 1rem 2rem; overflow-y: auto; }
.o-slots-loading {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: #555;
    font-size: .85rem;
    padding: 1.5rem 0;
}
.o-spinner {
    width: 16px; height: 16px;
    border: 2px solid rgba(212,175,55,.2);
    border-top-color: #d4af37;
    border-radius: 50%;
    animation: spin .7s linear infinite;
    flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

.o-slot-group-hdr {
    font-size: .68rem;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
    letter-spacing: .12em;
    padding: .9rem 0 .35rem;
    border-bottom: 1px solid rgba(255,255,255,.05);
    margin-bottom: .25rem;
}
.o-slot-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .55rem .75rem;
    border-radius: 6px;
    margin-bottom: 3px;
    transition: background .13s;
}
.o-slot-row--open {
    cursor: pointer;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.05);
}
.o-slot-row--open:hover,
.o-slot-row--open:focus-visible {
    background: rgba(212,175,55,.1);
    border-color: rgba(212,175,55,.3);
    outline: none;
}
.o-slot-row--taken  { opacity: .38; cursor: not-allowed; border: 1px solid transparent; }
.o-slot-row--active { background: rgba(212,175,55,.18) !important; border-color: rgba(212,175,55,.55) !important; }

.o-slot-time { font-size: .83rem; color: #ccc; font-variant-numeric: tabular-nums; }
.o-slot-row--active .o-slot-time { color: #d4af37; font-weight: 600; }

.o-slot-badge {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .15rem .5rem;
    border-radius: 3px;
}

/* Available — green */
.o-slot-row--open   .o-slot-badge { background: rgba(50,160,80,.12);   color: #4caf73; border: 1px solid rgba(50,160,80,.2); }

/* Selected — gold fill */
.o-slot-row--active .o-slot-badge { background: rgba(212,175,55,.2);   color: #d4af37; border: 1px solid rgba(212,175,55,.4); }

/* Fallback for taken slots with no specific status */
.o-slot-row--taken  .o-slot-badge { background: rgba(255,255,255,.04); color: gold;    border: 1px solid rgba(255,255,255,.08); }
.o-slot-row--taken  .o-slot-time  { color: gold; }

/* Pending — muted */
.o-slot-row--taken.o-slot-row--pending .o-slot-badge { background: rgba(255,255,255,.04); color: #888; border: 1px solid rgba(255,255,255,.1); }
.o-slot-row--taken.o-slot-row--pending .o-slot-time  { color: #888; }

/* Confirmed — gold */
.o-slot-row--taken.o-slot-row--confirmed .o-slot-badge { background: rgba(212,175,55,.15); color: #d4af37; border: 1px solid rgba(212,175,55,.4); }
.o-slot-row--taken.o-slot-row--confirmed .o-slot-time  { color: #c9a227; }

/* Blocked — gold */
.o-slot-row--taken.o-slot-row--blocked .o-slot-badge { background: rgba(212,175,55,.08); color: #d4af37; border: 1px solid rgba(212,175,55,.25); }
.o-slot-row--taken.o-slot-row--blocked .o-slot-time  { color: #c9a227; }
.o-slot-error { color: #c0392b; font-size: .82rem; padding: .5rem 0; }

/* ── Booking panel (right drawer — desktop) ──────────── */
.o-booking-panel {
    width: 0;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(16,16,16,.97);
    border-left: 1px solid rgba(212,175,55,.14);
    display: flex;
    flex-direction: column;
    transition: width .22s ease;
}
.o-booking-panel--open { width: 320px; }

/* Panel header */
.o-panel-header {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.07);
    flex-shrink: 0;
    color: #d4af37;
    font-size: .88rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
}
.o-panel-header span { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.o-panel-close {
    margin-left: auto;
    background: none;
    border: none;
    color: #555;
    font-size: 1rem;
    cursor: pointer;
    padding: .2rem .3rem;
    border-radius: 4px;
    transition: color .13s, background .13s;
    flex-shrink: 0;
}
.o-panel-close:hover { color: #ccc; background: rgba(255,255,255,.07); }
.o-alert { font-size: .82rem; margin: .5rem 1rem 0; }

/* Slot summary */
.o-slot-summary {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: .75rem 1rem .25rem;
    padding: .45rem .75rem;
    border-radius: 6px;
    background: rgba(212,175,55,.1);
    border: 1px solid rgba(212,175,55,.25);
    color: #d4af37;
    font-size: .82rem;
    font-weight: 600;
}

/* Form */
.o-form         { display: flex; flex-direction: column; flex: 1; overflow-y: auto; }
.o-form-section { padding: .75rem 1rem; display: flex; flex-direction: column; gap: .65rem; flex: 1; }
.o-field-row    { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }

.o-field        { display: flex; flex-direction: column; gap: .3rem; }
.o-field label  { font-size: .72rem; font-weight: 600; color: #777;  letter-spacing: .07em; }

.o-req          { color: #d4af37; }

.o-field input:not([type="checkbox"]),
.o-field textarea {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 5px;
    color: #e8e8e8;
    font-size: .87rem;
    padding: .52rem .7rem;
    outline: none;
    transition: border-color .15s, background .15s, box-shadow .15s;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
}
.o-field input:not([type="checkbox"])::placeholder,
.o-field textarea::placeholder { color: #555; }
.o-field input:not([type="checkbox"]):focus,
.o-field textarea:focus {
    border-color: rgba(212,175,55,.5);
    background: rgba(255,255,255,.10);
    box-shadow: 0 0 0 3px rgba(212,175,55,.09);
    color: #f2f2f2;
}
.o-field textarea { resize: vertical; min-height: 70px; }

.o-form-footer {
    padding: .75rem 1rem 1rem;
    border-top: 1px solid rgba(255,255,255,.06);
    flex-shrink: 0;
}
.o-send-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .65rem;
    border-radius: 5px;
    border: 1px solid rgba(212,175,55,.4);
    background: linear-gradient(135deg, rgba(212,175,55,.18), rgba(212,175,55,.08));
    color: #d4af37;
    font-size: .88rem;
    font-weight: 600;
    letter-spacing: .05em;
    cursor: pointer;
    transition: background .16s, border-color .16s, box-shadow .16s;
}
.o-send-btn:disabled { opacity: .4; cursor: not-allowed; }
.o-send-btn:not(:disabled):hover {
    background: linear-gradient(135deg, rgba(212,175,55,.32), rgba(212,175,55,.16));
    border-color: #d4af37;
    box-shadow: 0 3px 14px rgba(212,175,55,.18);
}

/* ── Success ─────────────────────────────────────────── */
.o-success {
    padding: 2rem 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .65rem;
}
.o-success-icon { font-size: 2.5rem; color: #4caf73; }
.o-success h3   { color: #d4af37; margin: 0; font-size: 1.05rem; }
.o-success p    { color: #888; font-size: .85rem; margin: 0; }
.o-confirm-code {
    font-size: 1rem;
    font-weight: 700;
    color: #d4af37;
    background: rgba(212,175,55,.1);
    border: 1px solid rgba(212,175,55,.25);
    border-radius: 6px;
    padding: .4rem 1rem;
    letter-spacing: .08em;
}
.o-confirm-note { font-size: .8rem; color: #555; line-height: 1.5; }

/* ── Select — matches input style ───────────────────── */
.o-field select {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 5px;
    color: #e8e8e8;
    font-size: .87rem;
    padding: .52rem .7rem;
    outline: none;
    transition: border-color .15s, background .15s, box-shadow .15s;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23d4af37' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    padding-right: 2.25rem;
    cursor: pointer;
}
.o-field select option {
    background: #121212;
    color: #e8e8e8;
}
.o-field select:focus {
    border-color: rgba(212,175,55,.5);
    background-color: rgba(255,255,255,.10);
    box-shadow: 0 0 0 3px rgba(212,175,55,.09);
    color: #f2f2f2;
}
.o-field select option[value=""][disabled] { color: #555; }

/* ── Consent checkbox ────────────────────────────────── */
.o-field--consent { margin-top: .2rem; }

.o-consent-label {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    cursor: pointer;
    /* Reset the inherited .o-field label styles */
    font-size: inherit;
    font-weight: normal;
    color: inherit;
    text-transform: none;
    letter-spacing: normal;
}

.o-consent-check {
    margin-top: .2rem;
    flex-shrink: 0;
    accent-color: #d4af37;
    width: 15px;
    height: 15px;
    cursor: pointer;
}

.o-consent-text {
    font-size: .78rem;
    color: #999;
    line-height: 1.5;
}

.o-consent-text a {
    color: #d4af37;
    text-decoration: underline;
}

.o-consent-text a:hover {
    color: #f0d060;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE  (≤ 700px)
═══════════════════════════════════════════════════════════ */
@media (max-width: 700px) {

    .outlook-shell-wrap {
        padding: 2rem 0 2rem;   /* was 1rem — extra top gap below the mobile navbar */
    }

    .outlook-shell {
        height: auto;
        max-height: none;
        min-height: 0;
        border-radius: 8px;
    }

    .otb-title { display: none; }
    .otb-left  { display: none; }
    .otb-center { justify-content: flex-start; }
    .otb-period { min-width: 0; font-size: .9rem; }

    .outlook-body {
        flex-direction: column;
        overflow: visible;
        height: auto;
    }

    /* Step indicator */
    .o-steps {
        display: flex;
        align-items: center;
        padding: .65rem 1rem;
        background: rgba(18,18,18,.95);
        border-bottom: 1px solid rgba(255,255,255,.06);
        gap: 0;
        flex-shrink: 0;
    }
    .o-step {
        display: flex;
        align-items: center;
        gap: .35rem;
        flex: 1;
        justify-content: center;
        font-size: .72rem;
        color: #444;
        font-weight: 600;
        letter-spacing: .05em;
        text-transform: uppercase;
        position: relative;
    }
    .o-step::after {
        content: '';
        position: absolute;
        right: 0;
        width: 1px;
        height: 16px;
        background: rgba(255,255,255,.07);
    }
    .o-step:last-child::after { display: none; }
    .o-step-num {
        width: 20px; height: 20px;
        border-radius: 50%;
        border: 1px solid #444;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .68rem;
        flex-shrink: 0;
    }
    .o-step--active { color: #d4af37; }
    .o-step--active .o-step-num { border-color: #d4af37; background: rgba(212,175,55,.15); color: #d4af37; }
    .o-step--done   { color: #4caf73; }
    .o-step--done   .o-step-num { border-color: #4caf73; background: rgba(76,175,115,.12); color: #4caf73; }

    .o-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,.06);
        padding: 1rem;
        gap: .9rem;
    }
    .mini-cal-grid { gap: 2px; }
    .mini-cell     { height: 38px; font-size: .88rem; border-radius: 6px; }
    .mini-cell--today,
    .mini-cell--selected { border-radius: 50%; }
    .o-legend { flex-direction: row; flex-wrap: wrap; gap: .55rem .9rem; justify-content: center; }
    .o-sidebar-hint { text-align: center; }

    .o-schedule-pane {
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,.06);
        overflow-y: visible;
        min-height: 0;
    }
    .o-slot-row  { padding: .75rem .85rem; }
    .o-slot-time { font-size: .9rem; }

    .o-booking-panel {
        width: 100% !important;
        max-height: 0;
        overflow: hidden;
        border-left: none;
        border-top: 1px solid rgba(212,175,55,.14);
        transition: max-height .3s ease;
    }
    .o-booking-panel--open { max-height: 1200px; }

    @media (max-width: 420px) {
        .o-field-row { grid-template-columns: 1fr; }
    }
}

/* ═══════════════════════════════════════════════════════════
   TABLET  (701px – 960px)
═══════════════════════════════════════════════════════════ */
@media (min-width: 701px) and (max-width: 960px) {

    .outlook-shell-wrap {
        padding: 1.5rem 0 2.5rem;
    }

    .outlook-shell {
        height: calc(100vh - 160px);
        max-height: calc(100vh - 160px);
    }
}