/* ═══════════════════════════════════════════════════════
   Wig Salon Booking — Design "Élégance Crème"
   ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,400;1,600&family=Inter:wght@300;400;500;600&display=swap');

[hidden] { display: none !important; }

.wig-booking {
    --c-accent:     #3D1117;
    --c-accent-dim: rgba(61,17,23,.45);
    --c-bg:         #F2EBE3;
    --c-card:       #E8E1D9;
    --c-card-hover: #E0D9D0;
    --c-text:       #1C1410;
    --c-muted:      #9C8C82;
    --c-border:     rgba(28,20,16,.08);
    --c-white:      #FFFFFF;
    --r-card:       14px;
    --r-btn:        50px;
    --font-serif:   'Playfair Display', Georgia, serif;
    --font-sans:    'Inter', -apple-system, sans-serif;
    --ease:         cubic-bezier(.4,0,.2,1);
}

.wig-booking *, .wig-booking *::before, .wig-booking *::after {
    box-sizing: border-box; margin: 0; padding: 0;
}

.wig-booking {
    background: var(--c-bg);
    font-family: var(--font-sans);
    font-size: 15px;
    color: var(--c-text);
    max-width: 430px;
    min-height: 100svh;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-x: hidden;
}

/* ─── Header ─────────────────────────────────────────── */
.wig-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 0;
}
.wig-header__back {
    display: flex; align-items: center; gap: 4px;
    background: none; border: none; cursor: pointer;
    font-family: var(--font-sans); font-size: 14px;
    font-weight: 500; color: var(--c-text); padding: 0;
}
.wig-header__step {
    font-size: 11px; font-weight: 600;
    letter-spacing: .12em; color: var(--c-muted);
    text-transform: uppercase;
}

/* ─── Progress ───────────────────────────────────────── */
.wig-progress { display: flex; gap: 6px; padding: 14px 24px 0; }
.wig-progress__bar {
    flex: 1; height: 2.5px; border-radius: 2px;
    background: var(--c-border);
    transition: background 400ms var(--ease);
}
.wig-progress__bar.active { background: var(--c-accent); }

/* ─── Panels ─────────────────────────────────────────── */
.wig-panels { flex: 1; padding: 0 0 120px; }
.wig-panel  { display: none; padding: 28px 24px 0; animation: wFadeUp 300ms var(--ease) both; }
.wig-panel.active { display: block; }

@keyframes wFadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.wig-panel__title {
    font-family: var(--font-sans);
    font-size: 30px; font-weight: 400;
    line-height: 1.15; margin-bottom: 6px; color: var(--c-text);
}
.wig-panel__title em {
    font-family: var(--font-serif);
    font-style: italic; font-weight: 400;
}
.wig-panel__sub   { font-size: 14px; color: var(--c-muted); margin-bottom: 28px; font-weight: 300; }
.wig-section-label {
    font-size: 10px; font-weight: 600;
    letter-spacing: .14em; color: var(--c-muted);
    text-transform: uppercase; margin-bottom: 12px;
}

/* ─── Services ───────────────────────────────────────── */
.wig-services-list { display: flex; flex-direction: column; gap: 8px; }
.wig-service-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px; background: var(--c-card);
    border-radius: var(--r-card); cursor: pointer;
    transition: background 200ms var(--ease);
    border: 2px solid transparent;
}
.wig-service-item:hover    { background: var(--c-card-hover); }
.wig-service-item.selected { background: var(--c-accent); border-color: var(--c-accent); }
.wig-service-item__left    { display: flex; flex-direction: column; gap: 3px; }
.wig-service-item__name    { font-size: 15px; font-weight: 500; color: var(--c-text); transition: color 200ms; }
.wig-service-item__meta    { font-size: 12px; color: var(--c-muted); font-weight: 300; transition: color 200ms; }
.wig-service-item__price   { font-size: 17px; font-weight: 500; color: var(--c-text); white-space: nowrap; margin-left: 12px; transition: color 200ms; }
.wig-service-item.selected .wig-service-item__name,
.wig-service-item.selected .wig-service-item__meta,
.wig-service-item.selected .wig-service-item__price { color: #fff; }

/* ─── Suppléments ────────────────────────────────────── */
.wig-supplements-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }

.wig-supplement-item {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px; background: var(--c-card);
    border-radius: var(--r-card); cursor: pointer;
    transition: background 200ms var(--ease), box-shadow 200ms;
    border: 2px solid transparent;
}
.wig-supplement-item:hover { background: var(--c-card-hover); }
.wig-supplement-item.selected {
    background: rgba(61,17,23,.07);
    border-color: var(--c-accent);
    box-shadow: 0 0 0 1px var(--c-accent);
}

.wig-supplement-item__check {
    width: 22px; height: 22px; flex-shrink: 0;
    border: 2px solid var(--c-muted); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: background 200ms, border-color 200ms;
    color: transparent; font-size: 12px; font-weight: 700;
}
.wig-supplement-item.selected .wig-supplement-item__check {
    background: var(--c-accent); border-color: var(--c-accent); color: #fff;
}

.wig-supplement-item__content { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.wig-supplement-item__name    { font-size: 14px; font-weight: 500; color: var(--c-text); }
.wig-supplement-item__desc    { font-size: 12px; color: var(--c-muted); font-weight: 300; }
.wig-supplement-item__price   { font-size: 16px; font-weight: 600; color: var(--c-accent); white-space: nowrap; }

/* Prix total */
.wig-price-summary {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 18px; background: var(--c-accent);
    border-radius: var(--r-card); color: #fff;
    margin-top: 8px; animation: wFadeUp 250ms var(--ease);
}
.wig-price-summary__label { font-size: 13px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; opacity: .85; }
.wig-price-summary__value { font-size: 22px; font-weight: 700; }

/* ─── Dates ──────────────────────────────────────────── */
.wig-date-strip {
    display: flex; gap: 8px; overflow-x: auto;
    padding-bottom: 6px; margin-bottom: 28px;
    scrollbar-width: none;
}
.wig-date-strip::-webkit-scrollbar { display: none; }

.wig-day-card {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; min-width: 66px; height: 72px;
    background: var(--c-card); border-radius: var(--r-card);
    cursor: pointer; transition: background 200ms var(--ease);
    flex-shrink: 0; gap: 4px; border: 2px solid transparent;
}
.wig-day-card:hover                      { background: var(--c-card-hover); }
.wig-day-card.selected                   { background: var(--c-accent); border-color: var(--c-accent); }
.wig-day-card.disabled                   { opacity: .35; cursor: not-allowed; pointer-events: none; }
.wig-day-card__name { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); transition: color 200ms; }
.wig-day-card__num  { font-size: 22px; font-weight: 500; color: var(--c-text); line-height: 1; transition: color 200ms; }
.wig-day-card.selected .wig-day-card__name,
.wig-day-card.selected .wig-day-card__num { color: #fff; }

/* ─── Créneaux ───────────────────────────────────────── */
.wig-slots-wrap  { animation: wFadeUp 250ms var(--ease) both; }
.wig-slots-grid  { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 12px; }
.wig-slot-btn {
    padding: 14px 8px; background: var(--c-card);
    border: 2px solid transparent; border-radius: var(--r-card);
    font-family: var(--font-sans); font-size: 15px;
    font-weight: 400; color: var(--c-text); cursor: pointer;
    text-align: center; transition: background 200ms, color 200ms;
}
.wig-slot-btn:hover    { background: var(--c-card-hover); }
.wig-slot-btn.selected { background: var(--c-accent); border-color: var(--c-accent); color: #fff; font-weight: 500; }
.wig-slots-empty       { text-align: center; color: var(--c-muted); font-size: 14px; padding: 20px 0; font-weight: 300; }

/* ─── Champs formulaire ──────────────────────────────── */
.wig-field       { margin-bottom: 16px; }
.wig-field__label {
    display: block; font-size: 10px; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--c-muted); margin-bottom: 8px;
}
.wig-field__input {
    width: 100%; padding: 14px 16px;
    background: var(--c-card); border: 2px solid transparent;
    border-radius: var(--r-card); font-family: var(--font-sans);
    font-size: 15px; color: var(--c-text);
    transition: border-color 200ms, background 200ms;
    outline: none; resize: none;
}
.wig-field__input::placeholder { color: var(--c-muted); font-weight: 300; }
.wig-field__input:focus  { border-color: var(--c-accent); background: var(--c-white); }
.wig-field__input.error  { border-color: #DC2626; }
.wig-field__input--textarea { line-height: 1.5; }
.wig-field__error { font-size: 12px; color: #DC2626; margin-top: 5px; min-height: 16px; }

/* ─── Récap ──────────────────────────────────────────── */
.wig-recap       { background: var(--c-card); border-radius: var(--r-card); overflow: hidden; margin-bottom: 20px; }
.wig-recap__row  {
    display: flex; justify-content: space-between; align-items: center;
    padding: 13px 18px; border-bottom: 1px solid var(--c-border); font-size: 14px;
}
.wig-recap__row:last-child { border-bottom: none; }
.wig-recap__label { color: var(--c-muted); font-weight: 300; }
.wig-recap__value { font-weight: 500; text-align: right; }

/* ─── Checklist ──────────────────────────────────────── */
.wig-checklist         { background: #FEF3C7; border-radius: var(--r-card); padding: 18px; border: 1px solid #FDE68A; }
.wig-checklist__title  { font-size: 14px; font-weight: 600; color: #92400E; margin-bottom: 4px; }
.wig-checklist__sub    { font-size: 13px; color: #78350F; font-weight: 300; margin-bottom: 14px; }
.wig-check-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 8px 0; border-bottom: 1px solid rgba(120,53,15,.12);
    cursor: pointer; font-size: 13px; color: var(--c-text);
}
.wig-check-item:last-child { border-bottom: none; }
.wig-check-item input[type="checkbox"] {
    width: 18px; height: 18px; accent-color: var(--c-accent);
    cursor: pointer; flex-shrink: 0; margin-top: 1px;
}
.wig-check-item.checked { color: var(--c-muted); text-decoration: line-through; }

/* ─── Footer / bouton ────────────────────────────────── */
.wig-footer {
    position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 100%; max-width: 430px;
    padding: 16px 24px 28px;
    background: linear-gradient(to top, var(--c-bg) 70%, transparent);
    z-index: 100;
}
.wig-footer__btn {
    width: 100%; height: 54px;
    background: var(--c-accent); color: #fff;
    border: none; border-radius: var(--r-btn);
    font-family: var(--font-sans); font-size: 13px;
    font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    cursor: pointer; display: flex; align-items: center;
    justify-content: center; gap: 8px;
    transition: opacity 250ms, transform 150ms;
}
.wig-footer__btn:disabled              { opacity: .45; cursor: not-allowed; }
.wig-footer__btn:not(:disabled):hover  { opacity: .9; }
.wig-footer__btn:not(:disabled):active { transform: scale(.98); }

/* ─── Succès ─────────────────────────────────────────── */
.wig-success              { text-align: center; padding: 40px 0 20px; }
.wig-success__icon        { font-size: 52px; margin-bottom: 12px; }
.wig-success__title       { font-family: var(--font-serif); font-style: italic; font-size: 28px; font-weight: 400; color: var(--c-accent); margin-bottom: 10px; }
.wig-success__text        { font-size: 15px; color: var(--c-muted); margin-bottom: 20px; font-weight: 300; }
.wig-success__recap       { background: var(--c-card); border-radius: var(--r-card); padding: 16px 20px; font-size: 15px; font-weight: 500; margin-bottom: 16px; text-align: left; }
.wig-success__note        { font-size: 13px; color: var(--c-muted); font-weight: 300; line-height: 1.6; margin-bottom: 28px; }
.wig-success__new {
    background: transparent; border: 1.5px solid var(--c-accent);
    color: var(--c-accent); padding: 11px 24px;
    border-radius: var(--r-btn); font-family: var(--font-sans);
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: background 200ms, color 200ms;
}
.wig-success__new:hover { background: var(--c-accent); color: #fff; }

/* ─── Utilitaires ────────────────────────────────────── */
.wig-loading  { display: flex; justify-content: center; padding: 32px 0; }
.wig-spinner  { width: 24px; height: 24px; border: 3px solid var(--c-border); border-top-color: var(--c-accent); border-radius: 50%; animation: wSpin 650ms linear infinite; }
.wig-spinner--sm { width: 16px; height: 16px; border-width: 2px; }
@keyframes wSpin { to { transform: rotate(360deg); } }

.wig-error-toast {
    position: fixed; bottom: 96px; left: 50%; transform: translateX(-50%);
    width: calc(100% - 48px); max-width: 382px;
    background: #FEF2F2; border: 1px solid #FECACA;
    border-radius: var(--r-card); padding: 12px 16px;
    font-size: 13px; color: #991B1B;
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; z-index: 200; animation: wFadeUp 250ms var(--ease);
}
.wig-error-toast button { background: none; border: none; cursor: pointer; color: #991B1B; font-size: 14px; padding: 0; flex-shrink: 0; }

/* ─── Modal overlay ──────────────────────────────────── */
.wig-modal-overlay {
    position:        fixed;
    inset:           0;
    background:      rgba(0,0,0,.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index:         99999;
    display:         flex;
    align-items:     flex-end;
    justify-content: center;
    opacity:         0;
    pointer-events:  none;
    transition:      opacity 300ms ease;
}
.wig-modal-overlay.wig-open { opacity: 1; pointer-events: all; }

/* Carte modale : flex column pour que le footer soit TOUJOURS visible */
.wig-modal-overlay .wig-booking {
    display:        flex !important;
    flex-direction: column !important;
    max-height:     92svh !important;
    overflow:       hidden !important;
    min-height:     unset !important;
    width:          100%;
    max-width:      430px;
    border-radius:  24px 24px 0 0;
    transform:      translateY(100%);
    transition:     transform 380ms cubic-bezier(.4,0,.2,1);
}
.wig-modal-overlay.wig-open .wig-booking { transform: translateY(0); }

/* Panels : flex:1 + min-height:0 = clé pour que le footer ne soit pas coupé */
.wig-modal-overlay .wig-panels {
    flex:           1 1 0% !important;
    min-height:     0 !important;
    overflow-y:     auto !important;
    overflow-x:     hidden !important;
    padding-bottom: 0 !important;
}

/* Footer : positionné normalement dans le flux flex, jamais fixed/sticky */
.wig-modal-overlay .wig-footer {
    flex-shrink: 0 !important;
    position:    relative !important;
    bottom:      auto !important;
    top:         auto !important;
    left:        0 !important;
    right:       0 !important;
    transform:   none !important;
    width:       100% !important;
    max-width:   none !important;
    z-index:     1;
    padding:     12px 24px 20px !important;
    background:  linear-gradient(to top, var(--c-bg) 80%, transparent) !important;
}

@media (min-width: 500px) {
    .wig-modal-overlay                           { align-items: center; }
    .wig-modal-overlay .wig-booking              { border-radius: 20px; max-height: 90svh; transform: translateY(16px) scale(.97); }
    .wig-modal-overlay.wig-open .wig-booking     { transform: translateY(0) scale(1); }
}