/* ================================================
   Lumière Booking Pro — Booking Wizard
   lbp-public.css
================================================ */
:root {
    --lbp-rose:     #C9957A;
    --lbp-rose-lt:  #FBF4F0;
    --lbp-ink:      #1A1A1A;
    --lbp-ink-soft: #6B6560;
    --lbp-muted:    #9E9892;
    --lbp-line:     #E8E2DC;
    --lbp-bg:       #F8F5F0;
    --lbp-white:    #fff;
    --lbp-green:    #16A34A;
    --lbp-radius:   10px;
}

.lbp-booking-wizard {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    max-width: 720px;
    margin: 0 auto;
    color: var(--lbp-ink);
    font-size: 15px;
    line-height: 1.5;
    position: relative;
    padding: 0 0 80px;
}

/* ── Progress bar ── */
.lbp-progress { display: flex; align-items: center; margin-bottom: 28px; gap: 0; padding: 4px 2px; }
.lbp-progress-step { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 1; min-width: 0; }
.lbp-step-circle {
    width: 32px; height: 32px; border-radius: 50%;
    border: 2px solid var(--lbp-line);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.82rem;
    background: var(--lbp-white); color: var(--lbp-muted);
    transition: all .25s; flex-shrink: 0;
}
.lbp-progress-step.active .lbp-step-circle { background: var(--lbp-ink); border-color: var(--lbp-ink); color: #fff; }
.lbp-progress-step.done   .lbp-step-circle { background: var(--lbp-rose); border-color: var(--lbp-rose); color: #fff; }
.lbp-progress-step span { font-size: 0.68rem; color: var(--lbp-muted); text-align: center; white-space: nowrap; }
.lbp-progress-step.active span { color: var(--lbp-ink); font-weight: 600; }
.lbp-progress-line { flex: 1; height: 2px; background: var(--lbp-line); margin: 0 4px 18px; min-width: 12px; }

/* ── Steps ── */
.lbp-step { display: none; }
.lbp-step.active { display: block; }
.lbp-step h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 18px; color: var(--lbp-ink); }

/* ── Fields ── */
.lbp-field { margin-bottom: 18px; }
.lbp-field label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--lbp-ink); margin-bottom: 7px; }
.lbp-req { color: #DC2626; }
.lbp-field input, .lbp-field select, .lbp-field textarea {
    width: 100%; padding: 11px 14px;
    border: 1.5px solid var(--lbp-line); border-radius: 8px;
    font-size: 16px; color: var(--lbp-ink); background: var(--lbp-white);
    transition: border-color .15s; box-sizing: border-box;
    -webkit-appearance: none; appearance: none; font-family: inherit;
}
.lbp-field input:focus, .lbp-field select:focus, .lbp-field textarea:focus { border-color: var(--lbp-rose); outline: none; }
.lbp-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lbp-field-full { grid-column: 1 / -1; }

/* ── Service cards ── */
.lbp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.lbp-card {
    background: var(--lbp-white); border: 2px solid var(--lbp-line);
    border-radius: var(--lbp-radius); padding: 0; cursor: pointer;
    transition: all .18s; overflow: hidden; position: relative;
}
.lbp-card-color-bar { height: 4px; background: var(--lbp-color, var(--lbp-rose)); }
.lbp-card > strong, .lbp-card > span, .lbp-card-meta { padding: 0 14px; }
.lbp-card > strong { display: block; font-size: 0.88rem; margin: 12px 0 3px; }
.lbp-card > span { font-size: 0.75rem; color: var(--lbp-ink-soft); display: block; }
.lbp-card-meta { display: flex; gap: 8px; margin: 8px 0 12px; flex-wrap: wrap; }
.lbp-card:hover    { border-color: var(--lbp-rose); background: var(--lbp-rose-lt); }
.lbp-card.selected { border-color: var(--lbp-ink); background: var(--lbp-rose-lt); }
.lbp-card.selected::after { content: '✓'; position: absolute; top: 10px; right: 12px; color: var(--lbp-ink); font-weight: 700; font-size: .82rem; }

.lbp-price-tag { background: var(--lbp-rose-lt); color: var(--lbp-rose); font-size: .75rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; }
.lbp-price-tag.lbp-free { background: #F0FDF4; color: #166534; }
.lbp-dur-tag { background: var(--lbp-bg); color: var(--lbp-ink-soft); font-size: .75rem; font-weight: 500; padding: 2px 8px; border-radius: 99px; }

/* ── Calendar ── */
.lbp-calendar-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.lbp-cal-prev, .lbp-cal-next {
    background: none; border: 1.5px solid var(--lbp-line); border-radius: 6px;
    width: 36px; height: 36px; cursor: pointer; font-size: 1.2rem;
    color: var(--lbp-ink); display: flex; align-items: center; justify-content: center; transition: all .15s; flex-shrink: 0;
}
.lbp-cal-prev:hover, .lbp-cal-next:hover { border-color: var(--lbp-rose); color: var(--lbp-rose); }
.lbp-cal-month-label { font-weight: 700; font-size: 0.92rem; }
.lbp-calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }
.lbp-cal-header { font-size: .68rem; font-weight: 600; color: var(--lbp-muted); padding: 5px 0; text-transform: uppercase; }
.lbp-cal-day { padding: 9px 2px; border-radius: 6px; font-size: .82rem; cursor: default; color: var(--lbp-muted); transition: all .15s; }
.lbp-cal-day.available { background: var(--lbp-bg); color: var(--lbp-ink); cursor: pointer; }
.lbp-cal-day.available:hover { background: var(--lbp-rose-lt); color: var(--lbp-rose); }
.lbp-cal-day.selected  { background: var(--lbp-ink); color: #fff; }
.lbp-cal-day.today     { font-weight: 700; }
.lbp-cal-day.empty     { visibility: hidden; }

/* ── Time slots ── */
.lbp-slots { display: flex; flex-wrap: wrap; gap: 7px; }
.lbp-slot {
    padding: 9px 14px; border: 1.5px solid var(--lbp-line); border-radius: 6px;
    font-size: .82rem; cursor: pointer; transition: all .15s; font-weight: 500;
    background: var(--lbp-white); min-width: 70px; text-align: center; font-family: inherit;
}
.lbp-slot:hover    { border-color: var(--lbp-rose); color: var(--lbp-rose); }
.lbp-slot.selected { background: var(--lbp-ink); color: #fff; border-color: var(--lbp-ink); }

/* ── Summary ── */
.lbp-summary { background: var(--lbp-bg); border: 1px solid var(--lbp-line); border-radius: var(--lbp-radius); padding: 16px 18px; margin-bottom: 18px; }
.lbp-summary-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 7px 0; font-size: .85rem; border-bottom: 1px solid var(--lbp-line); gap: 12px; }
.lbp-summary-row:last-child { border-bottom: none; font-weight: 700; font-size: .9rem; }
.lbp-summary-row .lbp-label { color: var(--lbp-muted); flex-shrink: 0; }
.lbp-summary-row .lbp-value { color: var(--lbp-ink); text-align: right; }

/* ── Payment options ── */
.lbp-field-label { font-size: .82rem; font-weight: 600; color: var(--lbp-ink); margin-bottom: 10px; }
.lbp-payment-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }
.lbp-payment-option { display: block; cursor: pointer; }
.lbp-payment-option input[type=radio] { display: none; }
.lbp-payment-option-inner {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px; border: 2px solid var(--lbp-line); border-radius: var(--lbp-radius);
    transition: border-color .15s, background .15s;
}
.lbp-payment-option input:checked + .lbp-payment-option-inner { border-color: var(--lbp-ink); background: var(--lbp-rose-lt); }
.lbp-payment-icon { font-size: 1.5rem; flex-shrink: 0; }
.lbp-payment-title { font-weight: 700; font-size: .88rem; }
.lbp-payment-desc  { font-size: .75rem; color: var(--lbp-ink-soft); margin-top: 2px; }

/* ── Buttons ── */
.lbp-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.lbp-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 11px 22px; border-radius: 8px; font-size: .88rem; font-weight: 600;
    cursor: pointer; border: 1.5px solid var(--lbp-line);
    background: var(--lbp-white); color: var(--lbp-ink);
    text-decoration: none; transition: all .15s; font-family: inherit;
}
.lbp-btn:hover { border-color: var(--lbp-ink); }
.lbp-btn-primary { background: var(--lbp-ink); color: #fff; border-color: var(--lbp-ink); }
.lbp-btn-primary:hover { background: var(--lbp-rose); border-color: var(--lbp-rose); }
.lbp-btn-back { color: var(--lbp-muted); }
.lbp-btn-next:disabled { opacity: .4; cursor: not-allowed; }

/* ── Success ── */
.lbp-success { text-align: center; padding: 48px 20px; }
.lbp-success-icon { font-size: 2.5rem; color: var(--lbp-rose); margin-bottom: 12px; }
.lbp-success h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: 8px; }
.lbp-success p  { color: var(--lbp-ink-soft); margin-bottom: 16px; }
.lbp-booking-ref-wrap { display: inline-flex; flex-direction: column; align-items: center; background: var(--lbp-bg); border: 1px solid var(--lbp-line); border-radius: 8px; padding: 10px 20px; margin-bottom: 16px; }
.lbp-ref-label { font-size: .65rem; text-transform: uppercase; letter-spacing: .1em; color: var(--lbp-muted); margin-bottom: 4px; }
.lbp-ref-code  { font-family: monospace; font-size: 1rem; font-weight: 700; color: var(--lbp-ink); letter-spacing: .05em; }

/* ── Loading/Error ── */
.lbp-loading { position: absolute; inset: 0; background: rgba(248,245,240,.75); display: flex; align-items: center; justify-content: center; z-index: 10; border-radius: var(--lbp-radius); backdrop-filter: blur(2px); }
.lbp-spinner { width: 32px; height: 32px; border: 3px solid var(--lbp-line); border-top-color: var(--lbp-rose); border-radius: 50%; animation: lbp-spin .7s linear infinite; }
@keyframes lbp-spin { to { transform: rotate(360deg); } }
.lbp-error-banner { background: #FEE2E2; color: #991B1B; border-radius: 8px; padding: 12px 16px; font-size: .85rem; margin-top: 12px; }

/* ── Responsive ── */
@media (max-width: 640px) {
    .lbp-progress-step span { display: none; }
    .lbp-form-grid { grid-template-columns: 1fr; }
    .lbp-field-full { grid-column: 1; }
    .lbp-cards { grid-template-columns: 1fr; }
    .lbp-booking-wizard { padding: 0 0 60px; }
}

/* ── Theme integration: card wrapper when inside Lumière theme ── */
.lumiere-page--shortcode .lbp-booking-wizard {
    background: #fff;
    border: 1px solid #E8E2DC;
    border-radius: 16px;
    padding: 40px 40px 60px;
    box-shadow: 0 2px 24px rgba(26,26,26,.06);
}

@media (max-width: 640px) {
    .lumiere-page--shortcode .lbp-booking-wizard {
        padding: 24px 16px 40px;
        border-radius: 12px;
    }
}