/* Pretty and Private — booking + paiement (démo) */
@import url("style.css");

body.booking { background-image: radial-gradient(120% 80% at 50% 0%, #FBF6EF 0%, #F6F1EA 45%, #EFE7DC 100%); min-height: 100vh; }

/* demo banner */
.demo-banner { position: sticky; top: 0; z-index: 200; background: var(--bg-dark); color: #EDE3D6; font-size: .82rem; padding: .7rem clamp(1rem,5vw,2rem); display: flex; align-items: center; gap: .6rem; justify-content: center; text-align: center; border-bottom: 1px solid var(--border-dark); }
.demo-banner svg { width: 16px; height: 16px; color: #D9B58C; flex-shrink: 0; }
.demo-banner strong { color: #D9B58C; }
.demo-banner.danger { background: #2A1714; }
.demo-banner.danger strong { color: #E7A18C; }
.demo-banner a { color: #D9B58C; text-decoration: underline; text-underline-offset: 2px; }

/* booking header */
.book-head { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.book-head .brand small { color: var(--text-muted); }
.book-head a.back { display: inline-flex; align-items: center; gap: .4rem; color: var(--text-muted); font-size: .9rem; font-weight: 500; }
.book-head a.back svg { width: 16px; height: 16px; }

/* stepper */
.stepper { display: flex; align-items: center; gap: .5rem; max-width: var(--container); margin: 1.5rem auto 0; padding-inline: clamp(1.25rem,5vw,2.5rem); flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: .55rem; font-size: .85rem; color: var(--text-muted); }
.step .dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); font-size: .8rem; font-weight: 600; flex-shrink: 0; }
.step.active { color: var(--text); font-weight: 600; }
.step.active .dot { background: linear-gradient(145deg, #BE9874, var(--accent)); color: #fff; border-color: transparent; box-shadow: var(--shadow-1); }
.step.done .dot { background: var(--accent-dark); color: #fff; border-color: transparent; }
.step.done .dot svg { width: 14px; height: 14px; }
.step-sep { flex: 1; height: 1px; background: var(--border); min-width: 14px; }

/* layout */
.book-wrap { max-width: var(--container); margin: 2rem auto 4rem; padding-inline: clamp(1.25rem,5vw,2.5rem); display: grid; gap: 1.8rem; align-items: start; }
@media (min-width: 920px){ .book-wrap { grid-template-columns: 1.5fr .9fr; gap: 2.5rem; } }

.book-main { display: flex; flex-direction: column; gap: 2rem; }
.book-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: clamp(1.3rem,3vw,2rem); box-shadow: var(--shadow-1); }
.book-block h2 { font-size: 1.3rem; margin-bottom: .35rem; }
.book-block .sub { color: var(--text-muted); font-size: .92rem; margin-bottom: 1.3rem; }

/* form */
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .4rem; color: var(--text); }
.field input, .field select, .field textarea {
  width: 100%; font-family: inherit; font-size: .98rem; padding: .8rem .9rem; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--bg); color: var(--text); transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(176,141,106,.15); }
.field-row { display: grid; gap: 1.1rem; }
@media (min-width: 560px){ .field-row { grid-template-columns: 1fr 1fr; } }

/* radio cards */
.radio-cards { display: grid; gap: .8rem; }
.radio-card { position: relative; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1rem 1.1rem; cursor: pointer; transition: border-color .2s, box-shadow .2s, background .2s; display: flex; align-items: center; gap: 1rem; }
.radio-card:hover { border-color: var(--accent); }
.radio-card input { position: absolute; opacity: 0; }
.radio-card .rc-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(145deg, #FBF8F3, #EFE7DC); border: 1px solid var(--border); box-shadow: inset 0 1px 0 #fff; flex-shrink: 0; }
.radio-card .rc-icon svg { width: 20px; height: 20px; color: var(--accent-dark); }
.radio-card .rc-body { flex: 1; }
.radio-card .rc-body b { display: block; font-weight: 600; font-size: .98rem; }
.radio-card .rc-body span { font-size: .85rem; color: var(--text-muted); }
.radio-card .rc-price { font-weight: 600; font-feature-settings: 'tnum'; white-space: nowrap; }
.radio-card input:checked ~ .rc-check { opacity: 1; }
.radio-card:has(input:checked) { border-color: var(--accent); background: rgba(176,141,106,.06); box-shadow: var(--shadow-1), 0 0 0 1px var(--accent); }

.time-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px,1fr)); gap: .6rem; }
.time-slot { text-align: center; padding: .65rem .2rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: .92rem; font-weight: 500; cursor: pointer; background: var(--bg); transition: all .2s; }
.time-slot:hover { border-color: var(--accent); }
.time-slot.active { background: var(--bg-dark); color: var(--bg); border-color: var(--bg-dark); }

/* trust row */
.trust-row { display: grid; gap: 1rem; margin-top: 1.4rem; }
@media (min-width: 560px){ .trust-row { grid-template-columns: repeat(3,1fr); } }
.trust-item { display: flex; gap: .7rem; align-items: flex-start; }
.trust-item svg { width: 20px; height: 20px; color: var(--accent-dark); flex-shrink: 0; margin-top: 2px; }
.trust-item b { display: block; font-size: .9rem; }
.trust-item span { font-size: .82rem; color: var(--text-muted); }

/* recap sticky */
.recap { position: sticky; top: 90px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-2); }
.recap__media { position: relative; }
.recap__media img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.recap__media .tag { position: absolute; bottom: .8rem; left: .8rem; padding: .35rem .8rem; border-radius: 999px; background: rgba(28,23,20,.6); backdrop-filter: blur(8px); color: #EDE3D6; font-size: .78rem; font-weight: 600; }
.recap__body { padding: 1.4rem; }
.recap__body h3 { font-size: 1.15rem; margin-bottom: 1rem; }
.recap-line { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; font-size: .92rem; border-bottom: 1px solid var(--border); }
.recap-line span:first-child { color: var(--text-muted); }
.recap-line span:last-child { font-weight: 500; text-align: right; }
.recap-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 1rem; margin-top: .4rem; }
.recap-total span { color: var(--text-muted); font-size: .9rem; }
.recap-total b { font-family: var(--font-display); font-size: 1.7rem; font-weight: 400; font-feature-settings: 'tnum'; }
.recap-save { margin-top: .9rem; padding: .7rem .9rem; border-radius: var(--radius-sm); background: rgba(138,106,73,.08); border: 1px solid var(--border); font-size: .82rem; color: var(--accent-dark); display: flex; gap: .5rem; align-items: center; }
.recap-save svg { width: 16px; height: 16px; flex-shrink: 0; }
.recap__body .btn { margin-top: 1.3rem; }
.recap__note { font-size: .76rem; color: var(--text-muted); text-align: center; margin-top: .9rem; }

/* ---- Paiement: payment method cards ---- */
.pay-methods { display: grid; gap: .7rem; margin-bottom: 1.6rem; }
@media (min-width:560px){ .pay-methods { grid-template-columns: repeat(3,1fr); } }
.pay-method { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .9rem; text-align: center; cursor: pointer; font-weight: 600; font-size: .9rem; transition: all .2s; position: relative; }
.pay-method:hover { border-color: var(--accent); }
.pay-method svg { width: 22px; height: 22px; display: block; margin: 0 auto .4rem; color: var(--accent-dark); }
.pay-method input { position: absolute; opacity: 0; }
.pay-method:has(input:checked) { border-color: var(--accent); background: rgba(176,141,106,.06); box-shadow: 0 0 0 1px var(--accent); }

/* credit card visual */
.cc-visual { position: relative; aspect-ratio: 1.586/1; max-width: 380px; border-radius: 18px; padding: 1.4rem; color: #F4ECE0; margin-bottom: 1.6rem;
  background: linear-gradient(135deg, #2A211B 0%, #1C1714 55%, #38291D 100%);
  box-shadow: var(--shadow-3), inset 0 1px 0 rgba(217,181,140,.18); overflow: hidden; }
.cc-visual::after { content:""; position:absolute; inset:0; background: radial-gradient(120% 80% at 80% 0%, rgba(217,181,140,.16), transparent 60%); }
.cc-visual .cc-top { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 1; }
.cc-brand { font-family: var(--font-display); font-style: italic; font-size: 1.15rem; color: #D9B58C; }
.cc-chip { width: 42px; height: 32px; border-radius: 7px; background: linear-gradient(135deg, #D9B58C, #B08D6A); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); margin: 1.4rem 0 1.1rem; position: relative; z-index: 1; }
.cc-number { font-family: "Inter", monospace; font-size: 1.18rem; letter-spacing: .12em; font-feature-settings: 'tnum'; position: relative; z-index: 1; }
.cc-bottom { display: flex; justify-content: space-between; margin-top: 1.1rem; position: relative; z-index: 1; }
.cc-bottom small { display: block; font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(244,236,224,.6); margin-bottom: 2px; }
.cc-bottom .v { font-size: .92rem; letter-spacing: .04em; text-transform: uppercase; }

.checkbox-row { display: flex; gap: .7rem; align-items: flex-start; margin: 1rem 0; font-size: .9rem; }
.checkbox-row input { margin-top: 3px; accent-color: var(--accent-dark); width: 16px; height: 16px; }
.checkbox-row label { color: var(--text-muted); }
.checkbox-row a { color: var(--accent-dark); text-decoration: underline; }

.pay-disclaimer { font-size: .78rem; color: var(--text-muted); text-align: center; margin-top: 1rem; }

/* success modal */
.modal { border: none; padding: 0; border-radius: var(--radius-lg); max-width: 440px; width: 92vw; box-shadow: var(--shadow-3); }
.modal::backdrop { background: rgba(24,19,15,.7); backdrop-filter: blur(4px); }
.modal__inner { padding: 2.5rem 2rem; text-align: center; background: var(--surface); }
.modal__check { width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 1.3rem; display: grid; place-items: center; background: linear-gradient(145deg, #5E8C5A, #4A7547); box-shadow: 0 10px 30px rgba(74,117,71,.35); }
.modal__check svg { width: 36px; height: 36px; color: #fff; }
.modal h3 { font-size: 1.6rem; margin-bottom: .6rem; }
.modal p { color: var(--text-muted); font-size: .95rem; margin-bottom: 1.6rem; }
.modal .demo-note { font-size: .8rem; color: var(--accent-dark); font-style: italic; margin-bottom: 1.6rem; }
.modal .btn { width: 100%; justify-content: center; }
@keyframes pop { 0% { transform: scale(.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.modal[open] .modal__inner { animation: pop .4s var(--ease); }