/* Riyata Studio — page de reservation. Reutilise les tokens de styles.css. */
.bk { max-width: 920px; margin: 0 auto; }
.bk-steps { display: flex; gap: 8px; margin-bottom: var(--s-6); flex-wrap: wrap; }
.bk-step { display: flex; align-items: center; gap: 8px; color: var(--text-3); font: 500 13px var(--font-sans); }
.bk-step .num { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--border-2); font-size: 12px; }
.bk-step.active { color: var(--text-0); }
.bk-step.active .num { background: var(--accent); border-color: var(--accent); color: #fff; }
.bk-step.done .num { background: var(--success); border-color: var(--success); color: #06210f; }
.bk-step .sep { width: 18px; height: 1px; background: var(--border-2); }

.bk-card { background: var(--surface-1); border: 1px solid var(--border-1); border-radius: var(--r-xl); padding: clamp(20px, 4vw, 36px); }
.bk-card h2 { font: 600 19px var(--font-display); color: var(--text-0); margin: 0 0 4px; }
.bk-card .lead { color: var(--text-2); font: 400 14px/1.6 var(--font-sans); margin: 0 0 var(--s-5); }

.bk-days { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: var(--s-4); }
.bk-day { flex: none; border: 1px solid var(--border-2); background: var(--surface-2); border-radius: var(--r-md); padding: 10px 14px; cursor: pointer; color: var(--text-2); font: 500 13px var(--font-sans); text-align: center; white-space: nowrap; }
.bk-day.active { border-color: var(--accent); color: var(--text-0); background: var(--accent-soft); }
.bk-day b { display: block; font: 600 15px var(--font-sans); color: var(--text-0); }

.bk-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.bk-slot { border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text-1); border-radius: var(--r-md); padding: 12px 6px; cursor: pointer; font: 600 14px var(--font-mono); transition: border-color var(--dur-1), background var(--dur-1); }
.bk-slot:hover { border-color: var(--accent); background: var(--accent-soft); }
.bk-slot.sel { border-color: var(--accent); background: var(--accent); color: #fff; }

.bk-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: var(--s-4); }
.bk-type { border: 1px solid var(--border-2); background: var(--surface-2); border-radius: var(--r-md); padding: 14px; cursor: pointer; text-align: center; color: var(--text-2); }
.bk-type.sel { border-color: var(--accent); background: var(--accent-soft); color: var(--text-0); }
.bk-type svg { width: 22px; height: 22px; margin-bottom: 6px; }
.bk-type b { display: block; font: 600 14px var(--font-sans); color: var(--text-0); }
.bk-type span { font: 400 12px var(--font-sans); }

.bk-field { margin-bottom: var(--s-4); }
.bk-field label { display: block; font: 500 13px var(--font-sans); color: var(--text-2); margin-bottom: 6px; }
.bk-field .req { color: var(--accent-2); }
.bk-input { width: 100%; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--r-md); color: var(--text-0); font: 400 15px var(--font-sans); padding: 12px 14px; outline: none; }
.bk-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
textarea.bk-input { resize: vertical; min-height: 92px; }
.bk-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.bk-recap { background: var(--surface-2); border: 1px solid var(--border-1); border-radius: var(--r-md); padding: 12px 14px; font: 500 14px var(--font-sans); color: var(--text-1); margin-bottom: var(--s-4); display: flex; align-items: center; gap: 10px; }
.bk-recap svg { width: 18px; height: 18px; color: var(--accent-2); flex: none; }
.bk-actions { display: flex; gap: 10px; align-items: center; margin-top: var(--s-5); flex-wrap: wrap; }
.bk-otp { font: 600 26px var(--font-mono); letter-spacing: .4em; text-align: center; }
.bk-status { font: 500 14px var(--font-sans); margin-top: var(--s-4); min-height: 20px; }
.bk-status.err { color: #ff8e8e; }
.bk-status.ok { color: var(--success); }
.bk-empty { text-align: center; color: var(--text-3); padding: var(--s-7) var(--s-4); }
.bk-done { text-align: center; padding: var(--s-6) var(--s-4); }
.bk-done .check { width: 56px; height: 56px; border-radius: 50%; background: rgba(74,222,128,.15); color: var(--success); display: grid; place-items: center; margin: 0 auto var(--s-4); }
.bk-done .check svg { width: 30px; height: 30px; }
.bk-link-btn { display: inline-block; margin-top: var(--s-4); background: var(--accent); color: #fff; text-decoration: none; font: 600 15px var(--font-sans); padding: 14px 24px; border-radius: var(--r-md); }
.bk-note { color: var(--text-3); font: 400 13px/1.6 var(--font-sans); margin-top: var(--s-4); }
.cf-turnstile { margin: var(--s-4) 0; }
@media (max-width: 560px) { .bk-types { grid-template-columns: 1fr; } .bk-row { grid-template-columns: 1fr; } }