/*
 * Booking wizard + account + booking detail styles.
 * Uses design-system.css tokens (dark theme). Scoped under .booking-page so it
 * never bleeds into the marketing pages.
 */

.booking-page {
    min-height: 100vh;
    background: var(--color-background);
    color: var(--color-text-primary);
    padding: 100px 24px 80px;
}

.booking-shell {
    max-width: 860px;
    margin: 0 auto;
}

.booking-page h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: var(--font-weight-extrabold);
    letter-spacing: var(--letter-spacing-tight);
    margin: 0 0 8px;
}

.booking-lede {
    color: var(--color-text-secondary);
    margin: 0 0 32px;
    font-size: var(--font-size-md);
}

/* Step indicator */
.wizard-steps {
    display: flex;
    gap: 8px;
    margin-bottom: 36px;
    flex-wrap: wrap;
}

.wizard-step {
    flex: 1;
    min-width: 120px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.wizard-step .num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    background: var(--color-surface-elevated);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
}

.wizard-step.active {
    border-color: var(--color-accent-primary);
    color: var(--color-text-primary);
}

.wizard-step.active .num {
    background: var(--color-accent-primary);
    color: #fff;
}

.wizard-step.done {
    color: var(--color-text-secondary);
}

.wizard-step.done .num {
    background: var(--color-success);
    color: #06251a;
}

/* Cards */
.booking-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    padding: 28px;
    margin-bottom: 20px;
}

.booking-card h2 {
    margin: 0 0 6px;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}

.booking-card .muted {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
}

/* Studio choices */
.studio-grid {
    display: grid;
    /* min(240px, 100%) lets tracks shrink below 240px instead of overflowing
       the card on narrow screens. */
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 16px;
}

.studio-choice {
    display: block;
    text-align: left;
    background: var(--color-surface-elevated);
    border: 2px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    padding: 22px;
    cursor: pointer;
    color: var(--color-text-primary);
    transition: var(--transition-fast);
    width: 100%;
    font: inherit;
}

.studio-choice:hover {
    border-color: var(--color-border-strong);
}

.studio-choice.selected {
    border-color: var(--color-accent-primary);
}

.studio-choice .studio-name {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    margin-bottom: 6px;
}

.studio-choice .studio-rate {
    color: var(--color-accent-secondary);
    font-weight: var(--font-weight-semibold);
}

.studio-choice .studio-meta {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
    margin-top: 8px;
}

/* Calendar */
.cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.cal-title {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-md);
}

.cal-grid {
    display: grid;
    /* minmax(0, 1fr) so day cells can compress below their min-content width
       and the 7-column grid never overflows on phones. */
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.cal-dow {
    text-align: center;
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    padding: 6px 0;
}

.cal-day {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-surface-elevated);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.cal-day.empty {
    border: none;
    background: transparent;
    cursor: default;
}

.cal-day[data-status="available"] { border-color: rgba(82, 183, 136, 0.5); }
.cal-day[data-status="partial"] { border-color: rgba(244, 162, 97, 0.5); }
.cal-day[data-status="unavailable"],
.cal-day[data-status="blocked"],
.cal-day[data-status="past"] {
    color: var(--color-text-tertiary);
    background: var(--color-surface);
    cursor: not-allowed;
    opacity: 0.5;
}

.cal-day:not([data-status="past"]):not([data-status="unavailable"]):not([data-status="blocked"]):hover {
    border-color: var(--color-accent-primary);
}

.cal-day.selected {
    background: var(--color-accent-primary);
    border-color: var(--color-accent-primary);
    color: #fff;
    font-weight: var(--font-weight-bold);
}

.cal-legend {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 16px;
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend .dot { width: 10px; height: 10px; border-radius: 3px; border: 1px solid; }
.cal-legend .dot.available { border-color: rgba(82,183,136,0.8); }
.cal-legend .dot.partial { border-color: rgba(244,162,97,0.8); }
.cal-legend .dot.unavailable { border-color: var(--color-border-medium); background: var(--color-surface); }

/* Time picker */
.slot-list { margin: 12px 0; }
.slot-window {
    padding: 10px 14px;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    margin-bottom: 8px;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}
.slot-window.booked { opacity: 0.6; }
.slot-window.open { border-color: rgba(82,183,136,0.4); color: var(--color-text-primary); }
/* Add-on (e.g. engineer) at-capacity windows: distinct dashed style. */
.slot-window.addon-busy {
    border-style: dashed;
    border-color: rgba(244,162,97,0.6);
    color: #f6cfa1;
}

/* Add-on choices (step 1) */
.addon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 16px;
}
.addon-choice {
    display: block;
    text-align: left;
    background: var(--color-surface-elevated);
    border: 2px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    cursor: pointer;
    color: var(--color-text-primary);
    transition: var(--transition-fast);
    width: 100%;
    font: inherit;
}
.addon-choice:hover { border-color: var(--color-border-strong); }
.addon-choice.selected { border-color: var(--color-accent-primary); }
.addon-choice .addon-name {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
}
.addon-choice .addon-rate { color: var(--color-accent-secondary); font-weight: var(--font-weight-semibold); }
.addon-choice .addon-meta {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
    margin-top: 6px;
}

.addon-block { display: flex; flex-direction: column; }
.engineer-picker {
    margin-top: 10px;
    padding: 12px 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.engineer-option {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}
.engineer-option .eng-name { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.engineer-option .eng-rate { color: var(--color-accent-secondary); font-weight: var(--font-weight-semibold); }
.engineer-option .eng-bio {
    grid-column: 2 / -1;
    color: var(--color-text-tertiary);
    font-size: var(--font-size-xs);
}

.time-fields {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 16px;
}
.time-fields .field { flex: 1; min-width: min(140px, 100%); }

label.book-label {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: 6px;
}

.book-input, select.book-input,
.booking-card input[type="text"],
.booking-card input[type="email"],
.booking-card input[type="password"],
.booking-card input[type="date"],
.booking-card input[type="time"],
.booking-card textarea {
    width: 100%;
    padding: 12px 14px;
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border-medium);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    font-family: inherit;
    box-sizing: border-box;
}

.book-input:focus, select.book-input:focus,
.booking-card input:focus,
.booking-card textarea:focus {
    outline: none;
    border-color: var(--color-accent-primary);
}

.price-display {
    margin-top: 18px;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}
.price-display .amount { color: var(--color-accent-secondary); }

/* Confirm summary */
.summary-row {
    display: flex;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid var(--color-border-subtle);
}
.summary-row:last-child { border-bottom: none; }
.summary-row .label { color: var(--color-text-tertiary); }
.summary-row .value { font-weight: var(--font-weight-semibold); }
.summary-total { font-size: var(--font-size-lg); }
.summary-total .value { color: var(--color-accent-secondary); }

/* Buttons */
.btn-row {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.book-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
    transition: var(--transition-fast);
}
.book-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.book-btn.primary {
    background: var(--color-accent-primary);
    color: #fff;
}
.book-btn.primary:hover:not(:disabled) { background: var(--color-accent-tertiary); }

.book-btn.ghost {
    background: transparent;
    color: var(--color-text-secondary);
    border-color: var(--color-border-medium);
}
.book-btn.ghost:hover { color: var(--color-text-primary); border-color: var(--color-border-strong); }

.book-btn.danger {
    background: var(--color-error);
    color: #fff;
}

/* Inline messages */
.book-alert {
    padding: 14px 16px;
    border-radius: var(--radius-md);
    margin-bottom: 20px;
    font-size: var(--font-size-sm);
    border: 1px solid;
}
.book-alert.error { background: rgba(231,111,81,0.12); border-color: rgba(231,111,81,0.4); color: #ffb59f; }
.book-alert.info { background: rgba(74,144,226,0.12); border-color: rgba(74,144,226,0.4); color: #a9cbf5; }
.book-alert.success { background: rgba(82,183,136,0.12); border-color: rgba(82,183,136,0.4); color: #9fe3c3; }
.book-alert.warning { background: rgba(244,162,97,0.12); border-color: rgba(244,162,97,0.4); color: #f6cfa1; }

/* Status badges */
.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    border: 1px solid;
}
.status-badge.confirmed, .status-badge.verified { color: #9fe3c3; border-color: rgba(82,183,136,0.5); background: rgba(82,183,136,0.1); }
.status-badge.pending_payment, .status-badge.pending { color: #f6cfa1; border-color: rgba(244,162,97,0.5); background: rgba(244,162,97,0.1); }
.status-badge.completed { color: #a9cbf5; border-color: rgba(74,144,226,0.5); background: rgba(74,144,226,0.1); }
.status-badge.cancelled, .status-badge.expired, .status-badge.no_show, .status-badge.failed { color: #ffb59f; border-color: rgba(231,111,81,0.5); background: rgba(231,111,81,0.1); }
.status-badge.not_started { color: var(--color-text-tertiary); border-color: var(--color-border-medium); }

/* Dashboard + booking lists */
.dash-section { margin-bottom: 40px; }
.dash-section h2 {
    font-size: var(--font-size-lg);
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border-subtle);
}

.booking-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    margin-bottom: 10px;
    text-decoration: none;
    color: var(--color-text-primary);
    transition: var(--transition-fast);
}
.booking-row:hover { border-color: var(--color-border-strong); }
.booking-row .b-main { display: flex; flex-direction: column; gap: 4px; }
.booking-row .b-when { color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.booking-row .b-conf { color: var(--color-text-tertiary); font-size: var(--font-size-xs); }
.addon-tag {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    color: var(--color-accent-secondary);
    border: 1px solid rgba(244,162,97,0.4);
    background: rgba(244,162,97,0.08);
    align-self: flex-start;
}

.empty-state {
    padding: 30px;
    text-align: center;
    color: var(--color-text-tertiary);
    border: 1px dashed var(--color-border-medium);
    border-radius: var(--radius-md);
}

.identity-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 18px 20px;
    border-radius: var(--radius-md);
    margin-bottom: 28px;
    border: 1px solid;
}
.identity-banner.warn { background: rgba(244,162,97,0.1); border-color: rgba(244,162,97,0.4); }
.identity-banner.ok { background: rgba(82,183,136,0.1); border-color: rgba(82,183,136,0.4); }

@media (max-width: 640px) {
    .booking-page { padding-top: 90px; }
    .booking-row { flex-direction: column; align-items: flex-start; }
    /* Compact stepper: inactive steps collapse to their number; only the
       active step keeps its label, so nothing ever truncates mid-word. */
    .wizard-step { min-width: 0; flex: 0 0 auto; padding: 10px; }
    .wizard-step.active { flex: 1; }
    .wizard-step:not(.active) .label { display: none; }
    .booking-card { padding: 18px; }
}