/* ==========================================================================
   Fadelle Institut — interface concepts (order, booking, registration, account)
   Loaded only on pages that need it.
   ========================================================================== */

/* ---------- Flow shell (two columns: form + summary) ---------- */
.flow { display: grid; gap: var(--s-7); padding-bottom: var(--section); }
@media (min-width: 64em) { .flow { grid-template-columns: minmax(0, 1.6fr) minmax(19rem, 1fr); gap: var(--s-8); align-items: start; } }
.flow__aside { display: grid; gap: var(--s-5); padding: var(--s-6) var(--s-5); background: var(--paper-2); }
@media (min-width: 64em) { .flow__aside { position: sticky; top: calc(var(--header-h) + 1.5rem); } }
.flow__aside h2 { font-size: var(--fs-lg); }

/* ---------- Stepper ---------- */
.stepper { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--s-2); list-style: none; padding: 0; margin-bottom: var(--s-7); counter-reset: st; }
.stepper li { counter-increment: st; display: grid; gap: var(--s-2); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; color: var(--ink-3); }
.stepper li::before { content: ""; height: 2px; background: var(--line); transition: background var(--dur); }
.stepper li span::before { content: "0" counter(st) "  "; font-family: var(--f-display); font-style: italic; }
.stepper li[aria-current="step"] { color: var(--ink); }
.stepper li[aria-current="step"]::before, .stepper li.is-done::before { background: var(--ink); }
.stepper li.is-done { color: var(--ink-2); }
.stepper li span { display: none; }
.stepper li[aria-current="step"] span { display: inline; }
@media (min-width: 48em) { .stepper li span { display: inline; } }

.step[hidden] { display: none; }
.step { display: grid; gap: var(--s-6); animation: step-in .45s var(--ease); }
@keyframes step-in { from { opacity: 0; transform: translateX(1rem); } }
@media (prefers-reduced-motion: reduce) { .step { animation: none; } }
.step__head h2 { font-size: var(--fs-2xl); }
.step__head p { color: var(--ink-2); margin-top: var(--s-3); max-width: var(--measure); }
.step__nav { display: flex; justify-content: space-between; gap: var(--s-4); padding-top: var(--s-5); border-top: 1px solid var(--line); flex-wrap: wrap; }
.step__nav .btn { flex: 1 1 auto; }
@media (min-width: 40em) { .step__nav .btn { flex: 0 0 auto; } }

/* ---------- Choice cards (radio as card) ---------- */
.choices { display: grid; gap: var(--s-3); }
@media (min-width: 40em) { .choices--2 { grid-template-columns: 1fr 1fr; } .choices--3 { grid-template-columns: repeat(3, 1fr); } }
.choice { position: relative; display: grid; gap: .3rem; padding: var(--s-4) var(--s-5); border: 1px solid var(--line-strong); cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast); }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice:hover { border-color: var(--ink); }
.choice:has(input:checked) { border-color: var(--ink); background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--ink); }
.choice:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.choice b { font-weight: 600; }
.choice small { color: var(--ink-3); font-size: var(--fs-xs); }
.choice .choice__price { font-size: var(--fs-sm); font-weight: 600; }
.choice[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* ---------- Summary lines ---------- */
.summary-art { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--s-4); align-items: start; }
.summary-art .art { aspect-ratio: 4 / 5; }
.summary-art b { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: var(--fs-lg); line-height: 1.2; display: block; }
.summary-art span { font-size: var(--fs-xs); color: var(--ink-3); }
.lines { display: grid; gap: var(--s-2); font-size: var(--fs-sm); padding-block: var(--s-4); border-block: 1px solid var(--line); }
.lines div { display: flex; justify-content: space-between; gap: var(--s-4); }
.lines dt { color: var(--ink-2); }
.total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); }
.total strong { font-family: var(--f-display); font-size: var(--fs-xl); font-weight: 400; }
.reassure { display: grid; gap: var(--s-2); font-size: var(--fs-xs); color: var(--ink-3); list-style: none; padding: 0; }
.reassure li { display: flex; gap: var(--s-2); align-items: center; }
.reassure .icon { width: 1rem; height: 1rem; color: var(--ok); }

/* ---------- Upload dropzone ---------- */
.dropzone { position: relative; display: grid; justify-items: center; gap: var(--s-2); padding: var(--s-6) var(--s-5); border: 1px dashed var(--line-strong); text-align: center; transition: border-color var(--dur-fast), background var(--dur-fast); }
.dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone.is-over, .dropzone:has(input:focus-visible) { border-color: var(--ink); background: var(--paper-2); }
.dropzone .icon { width: 1.75rem; height: 1.75rem; }
.dropzone strong { font-weight: 600; }
.dropzone small { color: var(--ink-3); font-size: var(--fs-xs); }
.file-list { list-style: none; padding: 0; display: grid; gap: var(--s-2); }
.file-list li { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); background: var(--paper-2); font-size: var(--fs-sm); }
.file-list img { width: 2.75rem; height: 2.75rem; object-fit: cover; }
.file-list span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-list small { color: var(--ink-3); }
.file-list button { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; }
.field.is-invalid .dropzone { border-color: var(--err); }

/* ---------- Calendar (booking) ---------- */
.calendar { display: grid; gap: var(--s-4); }
.calendar__head { display: flex; justify-content: space-between; align-items: center; }
.calendar__head h3 { font-size: var(--fs-lg); text-transform: capitalize; }
.calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.calendar__grid .dow { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-3); padding-block: var(--s-2); letter-spacing: .06em; }
.day { aspect-ratio: 1; min-height: 2.75rem; display: grid; place-items: center; font-size: var(--fs-sm); border: 1px solid transparent; transition: background var(--dur-fast); }
.day:hover:not([disabled]) { border-color: var(--ink); }
.day[disabled] { color: var(--line-strong); cursor: not-allowed; text-decoration: line-through; text-decoration-color: var(--line); }
.day[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.day.is-today { font-weight: 800; box-shadow: inset 0 -2px 0 var(--gold); }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: var(--s-2); }
.slot { min-height: 2.75rem; border: 1px solid var(--line-strong); font-size: var(--fs-sm); font-weight: 600; }
.slot:hover:not([disabled]) { border-color: var(--ink); }
.slot[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.slot[disabled] { opacity: .35; text-decoration: line-through; cursor: not-allowed; }

/* ---------- Confirmation ---------- */
.confirm { display: grid; gap: var(--s-5); justify-items: start; padding: var(--s-7) 0; }
.confirm__mark { width: 4rem; height: 4rem; border-radius: 50%; border: 1px solid var(--ok); color: var(--ok); display: grid; place-items: center; }
.confirm__mark .icon { width: 2rem; height: 2rem; }
.confirm h2 { font-size: var(--fs-2xl); }
.ref { font-family: var(--f-display); font-size: var(--fs-lg); }

/* ---------- Order tracking timeline ---------- */
.track { list-style: none; padding: 0; display: grid; gap: 0; }
.track li { position: relative; display: grid; grid-template-columns: 1.5rem 1fr; gap: var(--s-4); padding-bottom: var(--s-5); }
.track li::before { content: ""; width: .75rem; height: .75rem; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--paper); margin-top: .35rem; margin-left: .375rem; z-index: 1; }
.track li::after { content: ""; position: absolute; left: .73rem; top: 1.1rem; bottom: 0; width: 1px; background: var(--line); }
.track li:last-child::after { display: none; }
.track li.is-done::before { background: var(--ink); border-color: var(--ink); }
.track li.is-current::before { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 4px rgb(184 134 46 / .2); }
.track b { display: block; font-weight: 600; font-size: var(--fs-sm); }
.track small { color: var(--ink-3); font-size: var(--fs-xs); }

/* ---------- Member dashboard ---------- */
.dash { display: grid; gap: var(--s-6); padding-bottom: var(--section); }
@media (min-width: 64em) { .dash { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--s-8); align-items: start; } }
.dash-nav { display: flex; gap: var(--s-2); overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); border-bottom: 1px solid var(--line); }
.dash-nav::-webkit-scrollbar { display: none; }
.dash-nav [role="tab"] { flex: none; min-height: 3rem; padding-inline: var(--s-3); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-3); border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: var(--s-2); }
.dash-nav [role="tab"][aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.dash-nav .badge { font-size: .6875rem; background: var(--gold); color: var(--indigo-night); border-radius: 999px; padding: 0 .45rem; }
@media (min-width: 64em) {
  .dash-nav { position: sticky; top: calc(var(--header-h) + 1.5rem); flex-direction: column; margin: 0; padding: 0; border: 0; border-left: 1px solid var(--line); }
  .dash-nav [role="tab"] { justify-content: space-between; border-bottom: 0; border-left: 2px solid transparent; margin: 0 0 0 -1px; padding-inline: var(--s-4); }
  .dash-nav [role="tab"][aria-selected="true"] { border-left-color: var(--ink); }
}
.dash-panel { display: grid; gap: var(--s-6); }
.dash-panel > h2 { font-size: var(--fs-2xl); }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 64em) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpi { background: var(--paper); padding: var(--s-5) var(--s-4); display: grid; gap: var(--s-2); }
.kpi dt { font-size: var(--fs-xs); color: var(--ink-3); letter-spacing: .04em; }
.kpi dd { font-family: var(--f-display); font-size: var(--fs-xl); line-height: 1; }
.kpi dd small { font-family: var(--f-body); font-size: var(--fs-xs); color: var(--ink-3); }

.member-card { display: grid; gap: var(--s-4); padding: var(--s-6) var(--s-5); background: var(--indigo-deep); color: var(--on-dark); }
@media (min-width: 48em) { .member-card { grid-template-columns: 1fr auto; align-items: center; } }
.member-card h2 { font-size: var(--fs-xl); }
.member-card p { color: var(--on-dark-2); font-size: var(--fs-sm); }

/* Data table → stacked cards on mobile */
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table caption { text-align: left; font-size: var(--fs-xs); color: var(--ink-3); padding-bottom: var(--s-3); }
.table th { text-align: left; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); padding: var(--s-3) var(--s-3); border-bottom: 1px solid var(--line-strong); }
.table td { padding: var(--s-4) var(--s-3); border-bottom: 1px solid var(--line); vertical-align: middle; }
.table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .art-cell { display: flex; align-items: center; gap: var(--s-3); }
.table .art-cell .art { width: 3rem; height: 3.5rem; flex: none; }
.table .art-cell b { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: var(--fs-base); }
.table a { font-weight: 600; }
@media (max-width: 47.99em) {
  .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table tr { display: grid; grid-template-columns: 1fr auto; gap: var(--s-2) var(--s-4); padding-block: var(--s-4); border-bottom: 1px solid var(--line); }
  .table td { padding: 0; border: 0; }
  .table td[data-label]::before { content: attr(data-label) " · "; color: var(--ink-3); font-size: var(--fs-xs); }
  .table td:first-child { grid-column: 1 / -1; }
}
.pill { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-xs); font-weight: 600; padding: .2rem .6rem; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line); white-space: nowrap; }
.pill::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.pill--ok { color: var(--ok); } .pill--warn { color: var(--warn); } .pill--err { color: var(--err); } .pill--info { color: var(--indigo); }

.panel-card { border: 1px solid var(--line); padding: var(--s-5); display: grid; gap: var(--s-4); }
.panel-card h3 { font-size: var(--fs-lg); }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); flex-wrap: wrap; }

/* Login gate (prototype) */
.auth { display: grid; gap: var(--s-7); padding-bottom: var(--section); }
@media (min-width: 64em) { .auth { grid-template-columns: 1fr 1fr; align-items: stretch; } }
.auth__visual { position: relative; min-height: 18rem; }
.auth__visual .art { position: absolute; inset: 0; }
.auth__form { display: grid; gap: var(--s-6); align-content: center; max-width: 30rem; }
.auth__form h1 { font-size: var(--fs-2xl); }

/* Payment method logos (text-based, no brand imagery) */
.pay-note { font-size: var(--fs-xs); color: var(--ink-3); display: flex; gap: var(--s-2); align-items: center; }
.dash-side { display: grid; gap: var(--s-4); align-content: start; }
@media (min-width: 64em) { .dash-side { position: sticky; top: calc(var(--header-h) + 1.5rem); } .dash-side .dash-nav { position: static; } .dash-side [data-logout] { padding-inline: var(--s-4); } }
.field .choice, .field .check { text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); font-weight: 400; color: var(--ink); }
.field .choice b { font-size: var(--fs-base); }