/* ═══════════════════════════════════════════════════════════════
   MODULE DE RÉSERVATION TRENDYCAR — Styles
═══════════════════════════════════════════════════════════════ */

#bk-overlay {
    position:fixed; inset:0; z-index:10000;
    display:flex; align-items:stretch; justify-content:center;
    animation:bkFade 0.18s ease;
}
@keyframes bkFade { from{opacity:0} to{opacity:1} }
.bk-back-layer { position:absolute; inset:0; background:rgba(0,0,0,0.7); backdrop-filter:blur(8px); }

.bk-panel {
    position:relative;
    width:100%; max-width:1100px;
    margin:auto;
    background:var(--bg-1);
    border:1px solid var(--bdr);
    border-radius:14px;
    display:flex; flex-direction:column;
    max-height:96vh;
    box-shadow:0 40px 100px rgba(0,0,0,0.7);
    overflow:hidden;
    animation:bkRise 0.22s cubic-bezier(.2,.8,.3,1);
}
@keyframes bkRise { from{transform:translateY(20px); opacity:0} to{transform:translateY(0); opacity:1} }

/* Header */
.bk-head {
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:18px 26px;
    border-bottom:1px solid var(--bdr);
    background:linear-gradient(180deg,#0f0f0f,#0b0b0b);
    flex-shrink:0;
}
.bk-head-l { display:flex; align-items:center; gap:14px; }
.bk-close {
    width:36px; height:36px;
    background:var(--bg-2); border:1px solid var(--bdr-2);
    border-radius:8px; color:var(--muted);
    transition:all .18s ease;
    display:flex; align-items:center; justify-content:center;
}
.bk-close:hover { color:#fff; border-color:var(--red); background:rgba(232,0,30,0.1); }
.bk-eyebrow {
    font-family:var(--fb); font-size:0.66rem; font-weight:700;
    text-transform:uppercase; letter-spacing:2px; color:var(--red);
    margin-bottom:2px;
}
.bk-head h2 {
    font-family:var(--fd); font-size:1.4rem; font-weight:800;
    text-transform:uppercase; letter-spacing:-0.4px; line-height:1.1;
    color:#fff;
}
.bk-head-r .bk-phone {
    display:flex; align-items:center; gap:9px;
    background:var(--bg-2); border:1px solid var(--bdr-2);
    padding:9px 14px; border-radius:8px;
    color:var(--off); font-size:0.84rem; font-weight:600;
    transition:all .18s ease;
}
.bk-head-r .bk-phone:hover { border-color:var(--red); color:var(--red); }
.bk-head-r .bk-phone i { color:var(--red); }

/* Body scrollable */
.bk-body {
    flex:1;
    overflow-y:auto;
    padding:8px 0 30px;
    background:var(--bg);
}
.bk-body::-webkit-scrollbar { width:8px; }
.bk-body::-webkit-scrollbar-thumb { background:var(--bdr-2); border-radius:4px; }
.bk-body::-webkit-scrollbar-track { background:var(--bg-1); }

/* Section */
.bk-sec {
    display:flex; gap:18px;
    padding:24px 36px;
    border-bottom:1px solid var(--bdr);
}
.bk-sec:last-of-type { border-bottom:none; }
.bk-sec-num {
    flex-shrink:0;
    width:42px; height:42px;
    background:var(--bg-2); border:1px solid var(--bdr-2);
    border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--fd); font-size:1rem; font-weight:800;
    color:var(--muted);
}
.bk-sec-content { flex:1; min-width:0; }
.bk-sec-content h3 {
    font-family:var(--fd); font-size:1.3rem; font-weight:800;
    text-transform:uppercase; letter-spacing:-0.3px;
    color:#fff; margin-bottom:4px;
}
.bk-sec-sub { font-size:0.84rem; color:var(--muted); margin-bottom:16px; line-height:1.55; }
.bk-mini-title {
    font-family:var(--fb); font-size:0.78rem; font-weight:700;
    text-transform:uppercase; letter-spacing:1.4px; color:var(--muted);
    margin:18px 0 10px;
}

/* Catégories véhicule */
.bk-cats { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:10px; }
.bk-cat {
    position:relative;
    background:var(--bg-1);
    border:1px solid var(--bdr-2);
    border-radius:10px;
    padding:14px;
    cursor:pointer;
    transition:all .18s ease;
}
.bk-cat:hover { border-color:#3a3a3a; background:var(--bg-2); }
.bk-cat input { position:absolute; opacity:0; pointer-events:none; }
.bk-cat.sel { border-color:var(--red); background:rgba(232,0,30,0.05); }
.bk-cat.sel::after {
    content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900;
    position:absolute; top:10px; right:10px;
    width:18px; height:18px; background:var(--red); color:#fff;
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:0.6rem;
}
.bk-cat-name { font-family:var(--fb); font-size:0.92rem; font-weight:700; color:#fff; margin-bottom:4px; }
.bk-cat-desc { font-size:0.72rem; color:var(--muted); line-height:1.4; margin-bottom:10px; min-height:32px; }
.bk-cat-price { font-family:var(--fd); font-size:1.3rem; font-weight:900; color:var(--red); display:flex; align-items:baseline; gap:4px; }
.bk-cat-price small { font-family:var(--fb); font-size:0.62rem; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:var(--muted); }
.bk-cat-price em { font-family:var(--fb); font-size:0.68rem; font-style:normal; font-weight:600; color:var(--muted); }

.bk-hint {
    margin-top:14px; padding:10px 14px;
    background:rgba(232,0,30,0.06); border:1px solid rgba(232,0,30,0.18);
    border-radius:8px;
    font-size:0.8rem; color:var(--off);
    display:flex; align-items:center; gap:9px;
}
.bk-hint i { color:var(--red); }

/* Grilles formulaires */
.bk-grid-2, .bk-grid-3, .bk-grid-4 { display:grid; gap:12px; }
.bk-grid-2 { grid-template-columns:1fr 1fr; }
.bk-grid-3 { grid-template-columns:repeat(3, 1fr); }
.bk-grid-4 { grid-template-columns:repeat(4, 1fr); }
.bk-fld-full { grid-column:1 / -1; }
.bk-fld { display:flex; flex-direction:column; gap:5px; }
.bk-fld.hidden { display:none; }
.bk-fld label {
    font-size:0.66rem; font-weight:700; text-transform:uppercase;
    letter-spacing:1px; color:var(--muted);
}
.bk-fld input, .bk-fld select, .bk-fld textarea {
    background:var(--bg-1);
    border:1px solid var(--bdr-2);
    color:#fff;
    border-radius:7px;
    padding:11px 13px;
    font-family:var(--fi); font-size:0.86rem;
    outline:none;
    transition:border-color .18s ease;
    width:100%;
}
.bk-fld input:focus, .bk-fld select:focus, .bk-fld textarea:focus { border-color:var(--red); }
.bk-fld textarea { resize:vertical; min-height:70px; font-family:var(--fi); }

.bk-duration {
    margin-top:12px; padding:10px 14px;
    background:var(--bg-1); border:1px solid var(--bdr);
    border-radius:8px; font-size:0.84rem; color:var(--off);
    display:flex; align-items:center; gap:10px;
}
.bk-duration i { color:var(--red); }

/* Pickup / return options */
.bk-pickups { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:10px; }
.bk-pickup {
    position:relative;
    display:flex; align-items:center; gap:12px;
    background:var(--bg-1); border:1px solid var(--bdr-2);
    border-radius:10px; padding:12px 14px;
    cursor:pointer; transition:all .18s ease;
}
.bk-pickup:hover { border-color:#3a3a3a; background:var(--bg-2); }
.bk-pickup input { position:absolute; opacity:0; pointer-events:none; }
.bk-pickup.sel { border-color:var(--red); background:rgba(232,0,30,0.05); }
.bk-pickup > i:first-of-type {
    width:36px; height:36px; flex-shrink:0;
    background:var(--bg-2); border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    color:var(--muted); font-size:0.95rem;
    transition:color .18s ease;
}
.bk-pickup.sel > i:first-of-type { color:var(--red); }
.bk-pu-body { flex:1; min-width:0; }
.bk-pu-body strong { display:block; font-family:var(--fb); font-size:0.86rem; font-weight:700; color:#fff; margin-bottom:2px; }
.bk-pu-body span { display:block; font-size:0.72rem; color:var(--muted); }
.bk-pu-price {
    flex-shrink:0;
    font-family:var(--fd); font-size:0.95rem; font-weight:800;
    color:var(--red);
    padding:4px 9px;
    background:rgba(232,0,30,0.08);
    border-radius:6px;
}

/* Services additionnels */
.bk-svc-cat { margin-bottom:18px; }
.bk-svc-cat h5 {
    font-family:var(--fb); font-size:0.74rem; font-weight:700;
    text-transform:uppercase; letter-spacing:1.4px; color:var(--muted);
    margin-bottom:8px;
}
.bk-svc-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:8px; }
.bk-svc {
    position:relative;
    display:flex; align-items:center; gap:12px;
    background:var(--bg-1); border:1px solid var(--bdr-2);
    border-radius:9px; padding:11px 13px;
    cursor:pointer; transition:all .18s ease;
}
.bk-svc:hover { border-color:#3a3a3a; background:var(--bg-2); }
.bk-svc input { position:absolute; opacity:0; pointer-events:none; }
.bk-svc.sel { border-color:var(--red); background:rgba(232,0,30,0.06); }
.bk-svc > i:first-of-type {
    width:30px; height:30px; flex-shrink:0;
    background:var(--bg-2); border-radius:7px;
    display:flex; align-items:center; justify-content:center;
    color:var(--muted); font-size:0.86rem;
    transition:color .18s ease;
}
.bk-svc.sel > i:first-of-type { color:var(--red); }
.bk-svc-body { flex:1; min-width:0; }
.bk-svc-body strong { display:block; font-family:var(--fb); font-size:0.82rem; font-weight:700; color:#fff; line-height:1.25; }
.bk-svc-body span { display:block; font-size:0.7rem; color:var(--muted); margin-top:2px; }
.bk-svc-check {
    width:22px; height:22px; flex-shrink:0;
    border:1.5px solid var(--bdr-2);
    border-radius:6px;
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:0.66rem;
    transition:all .18s ease;
}
.bk-svc-check i { opacity:0; transform:scale(0.6); transition:all .18s ease; }
.bk-svc.sel .bk-svc-check { background:var(--red); border-color:var(--red); }
.bk-svc.sel .bk-svc-check i { opacity:1; transform:scale(1); }

/* Section combo (véhicule perso) */
.bk-sec-combo {
    background:linear-gradient(135deg, rgba(232,0,30,0.04), transparent 70%);
    position:relative;
}
.bk-sec-combo::before {
    content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
    background:linear-gradient(180deg, var(--red), transparent);
}
.bk-combo-eyebrow {
    display:inline-flex; align-items:center; gap:8px;
    background:rgba(232,0,30,0.1); border:1px solid rgba(232,0,30,0.25);
    color:var(--red);
    font-family:var(--fb); font-size:0.7rem; font-weight:700;
    text-transform:uppercase; letter-spacing:1.5px;
    padding:5px 11px; border-radius:50px;
    margin-bottom:10px;
}
.bk-combo-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:8px; }

/* Toggle particulier/pro */
.bk-toggle-row { display:flex; gap:8px; margin-bottom:14px; }
.bk-toggle {
    flex:1;
    display:flex; align-items:center; justify-content:center; gap:8px;
    background:var(--bg-1); border:1px solid var(--bdr-2);
    border-radius:8px; padding:11px;
    color:var(--muted); font-family:var(--fb); font-size:0.84rem; font-weight:600;
    transition:all .18s ease;
}
.bk-toggle:hover { color:#fff; border-color:#3a3a3a; }
.bk-toggle.sel {
    background:rgba(232,0,30,0.08);
    border-color:var(--red);
    color:#fff;
}
.bk-toggle.sel i { color:var(--red); }

/* CGV checkbox */
.bk-check-row {
    display:flex; align-items:flex-start; gap:9px;
    margin-top:14px; padding:12px 14px;
    background:var(--bg-1); border:1px solid var(--bdr);
    border-radius:8px;
    font-size:0.78rem; color:var(--muted); line-height:1.6;
}
.bk-check-row input { margin-top:3px; accent-color:var(--red); flex-shrink:0; }
.bk-check-row a { color:var(--off); text-decoration:underline; }
.bk-check-row strong { color:var(--off); }

/* Récap */
.bk-sec-recap { background:var(--bg-1); }
.bk-recap {
    background:var(--bg); border:1px solid var(--bdr);
    border-radius:10px; padding:14px 18px;
}
.bk-rec-row {
    display:flex; justify-content:space-between; align-items:center;
    padding:7px 0; font-size:0.84rem; color:var(--off);
    gap:14px;
}
.bk-rec-row strong { font-family:var(--fd); font-weight:800; color:#fff; }
.bk-rec-row.bk-rec-sub { font-size:0.78rem; color:var(--muted); padding:4px 0; }
.bk-rec-row.bk-rec-sub strong { font-family:var(--fi); font-weight:600; font-size:0.82rem; color:var(--off); }
.bk-rec-row.bk-rec-total {
    margin-top:8px; padding-top:14px; border-top:1px dashed var(--bdr-2);
    font-size:1rem; color:#fff;
}
.bk-rec-row.bk-rec-total strong {
    font-size:1.5rem; color:var(--red); font-family:var(--fd);
}

/* Footer sticky */
.bk-foot {
    flex-shrink:0;
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:16px 26px;
    background:linear-gradient(0deg,#0a0a0a,#0e0e0e);
    border-top:1px solid var(--bdr);
}
.bk-foot-l { display:flex; flex-direction:column; gap:1px; }
.bk-foot-label {
    font-family:var(--fb); font-size:0.66rem; font-weight:700;
    text-transform:uppercase; letter-spacing:1.5px; color:var(--muted);
}
.bk-foot-total {
    font-family:var(--fd); font-size:1.9rem; font-weight:900;
    color:#fff; line-height:1; letter-spacing:-0.5px;
}
.bk-foot-note { font-size:0.7rem; color:var(--dim); margin-top:3px; }
.bk-submit {
    display:flex; align-items:center; gap:10px;
    background:var(--red); color:#fff;
    font-family:var(--fb); font-size:0.92rem; font-weight:700;
    padding:14px 28px; border-radius:9px;
    transition:all .18s ease;
    letter-spacing:0.3px;
    flex-shrink:0;
}
.bk-submit:hover { background:var(--red-d); transform:translateY(-1px); }
.bk-submit:disabled { opacity:0.65; cursor:not-allowed; transform:none; }

/* Success */
.bk-success {
    text-align:center;
    padding:60px 30px;
    max-width:520px; margin:0 auto;
}
.bk-success-icon {
    width:72px; height:72px;
    background:rgba(34,197,94,0.12); border:2px solid #22c55e;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:#22c55e; font-size:1.8rem;
    margin:0 auto 22px;
    animation:bkPop 0.4s cubic-bezier(.2,1.3,.4,1);
}
@keyframes bkPop { from{transform:scale(0); opacity:0} to{transform:scale(1); opacity:1} }
.bk-success h3 { font-family:var(--fd); font-size:1.5rem; color:#fff; margin-bottom:14px; text-transform:uppercase; }
.bk-success p { color:var(--muted); font-size:0.9rem; line-height:1.7; margin-bottom:10px; }
.bk-success-sub { font-size:0.78rem !important; }
.bk-success-actions { display:flex; gap:12px; justify-content:center; margin-top:24px; }
.bk-success-btn {
    display:flex; align-items:center; gap:8px;
    background:var(--red); color:#fff;
    padding:12px 22px; border-radius:9px;
    font-family:var(--fb); font-size:0.86rem; font-weight:700;
    transition:background .18s ease;
}
.bk-success-btn.alt { background:var(--bg-2); border:1px solid var(--bdr-2); color:var(--muted); }
.bk-success-btn:hover { background:var(--red-d); }
.bk-success-btn.alt:hover { color:#fff; }

/* Responsive */
@media (max-width:780px) {
    .bk-panel { max-height:100vh; border-radius:0; max-width:100%; height:100vh; }
    .bk-head { padding:14px 18px; }
    .bk-head h2 { font-size:1.1rem; }
    .bk-head-r .bk-phone span { display:none; }
    .bk-head-r .bk-phone { width:38px; height:38px; padding:0; justify-content:center; }
    .bk-sec { padding:18px 20px; gap:12px; }
    .bk-sec-num { width:34px; height:34px; font-size:0.86rem; }
    .bk-sec-content h3 { font-size:1.1rem; }
    .bk-grid-2, .bk-grid-3, .bk-grid-4 { grid-template-columns:1fr; }
    .bk-cats { grid-template-columns:repeat(2, 1fr); }
    .bk-foot { padding:12px 18px; gap:10px; }
    .bk-foot-total { font-size:1.4rem; }
    .bk-submit { padding:12px 18px; font-size:0.84rem; }
    .bk-submit span { display:inline; }
}
@media (max-width:420px) {
    .bk-cats { grid-template-columns:1fr; }
}