/* ── Booking modal · Brana Barber Shop (Art-Déco: negro · oro · cyan) ── */
.modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:1.2rem}
.modal.open{display:flex}
.modal-backdrop{position:absolute;inset:0;background:rgba(4,6,8,.78);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);animation:bkFade .3s var(--e)}
.modal-card{position:relative;width:min(560px,100%);max-height:92dvh;overflow-y:auto;background:linear-gradient(180deg,var(--ink-2),var(--ink-1));border:1px solid var(--line);border-radius:3px;padding:clamp(1.6rem,4vw,2.6rem);box-shadow:0 40px 90px -30px rgba(0,0,0,.95),0 0 0 1px rgba(216,175,90,.08);animation:bkPop .4s var(--e2)}
.modal-close{position:absolute;top:1rem;right:1rem;width:38px;height:38px;border:1px solid var(--line);background:transparent;border-radius:2px;display:grid;place-items:center;color:var(--muted);cursor:pointer;transition:color .25s,border-color .25s}
.modal-close:hover{color:var(--gold-bright);border-color:var(--gold)}
.modal-card h3{font-family:var(--ff-disp);font-weight:700;font-size:clamp(1.6rem,4vw,2rem);letter-spacing:.02em;text-transform:uppercase;color:var(--paper);margin:.5rem 0 .4rem}
.modal-card .sub{color:var(--muted);font-size:.92rem;margin-bottom:1.5rem;line-height:1.55}
@keyframes bkFade{from{opacity:0}to{opacity:1}}
@keyframes bkPop{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}

.bk-field{margin-bottom:1.2rem}
.bk-field>label,.bk-form-field label{display:block;font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:.6rem}
.bk-select,.bk-form-field input{width:100%;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:2px;color:var(--paper);padding:.85em 1em;font-family:var(--ff-body);font-size:.95rem;transition:border-color .25s,background .25s}
.bk-select:focus,.bk-form-field input:focus{outline:none;border-color:var(--cyan);background:rgba(47,230,236,.04)}
.bk-select option,.bk-select optgroup{background:var(--ink-2);color:var(--paper)}
.bk-row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-bottom:1.2rem}
@media (max-width:520px){.bk-row{grid-template-columns:1fr}}

.cal{border:1px solid var(--line-soft);border-radius:3px;padding:1rem;background:rgba(255,255,255,.015)}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.8rem}
.cal-head b{font-family:var(--ff-disp);font-weight:600;font-size:1.15rem;letter-spacing:.04em;text-transform:uppercase}
.cal-head button{width:34px;height:34px;border:1px solid var(--line);background:transparent;border-radius:2px;display:grid;place-items:center;color:var(--muted);cursor:pointer;transition:.2s}
.cal-head button:hover:not(:disabled){border-color:var(--cyan);color:var(--cyan)}
.cal-head button:disabled{opacity:.3;cursor:not-allowed}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:4px}
.cal-dow span{text-align:center;font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.1em;color:var(--muted-2);text-transform:uppercase;padding:.4em 0}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-cell{aspect-ratio:1;border:0;background:transparent;border-radius:2px;color:var(--muted);font-family:var(--ff-mono);font-size:.86rem;display:grid;place-items:center;cursor:pointer;transition:background .18s,color .18s}
.cal-cell.empty{pointer-events:none}
.cal-cell:not(.dis):not(.empty):hover{background:rgba(216,175,90,.1);color:var(--paper)}
.cal-cell.today{box-shadow:inset 0 0 0 1px rgba(47,230,236,.45);color:var(--paper)}
.cal-cell.dis{color:rgba(238,243,245,.14);cursor:not-allowed}
.cal-cell.sel{background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:#1a1206;font-weight:700}

.time-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:.5rem}
.time-empty{grid-column:1/-1;color:var(--muted-2);font-size:.88rem;text-align:center;padding:1.2rem .5rem}
.time-slot{border:1px solid var(--line);background:transparent;border-radius:2px;padding:.7em .4em;font-family:var(--ff-mono);font-size:.8rem;color:var(--muted);cursor:pointer;transition:.2s}
.time-slot:hover{border-color:var(--cyan);color:var(--paper)}
.time-slot.sel{background:linear-gradient(180deg,var(--cyan-bright),var(--cyan));color:#022;font-weight:700;border-color:transparent}

.bk-summary{border:1px dashed rgba(216,175,90,.4);border-radius:2px;padding:.9rem 1.1rem;margin-bottom:1.1rem;display:flex;flex-direction:column;gap:.2rem}
.bk-summary[hidden]{display:none}
.bk-summary .bs-when{font-family:var(--ff-disp);font-weight:600;font-size:1.1rem;letter-spacing:.03em;text-transform:uppercase;color:var(--gold-bright)}
.bk-summary .bs-svc{font-size:.86rem;color:var(--muted)}
.form-msg{font-size:.86rem;min-height:1.2em;margin-bottom:.6rem;color:var(--muted-2)}
.form-msg.err{color:#ff7a7a}
.bk-submit{width:100%;justify-content:center}
.form-alt{text-align:center;margin-top:1rem;font-size:.86rem;color:var(--muted-2)}
.form-alt a{color:var(--cyan);text-decoration:underline;font-weight:600}

.bk-success{display:none;text-align:center;padding:1rem 0}
.bk-success.show{display:block;animation:bkFade .4s var(--e)}
.bk-success h3{margin-top:0}
.bk-ok{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:0 auto 1.2rem;color:#1a1206;background:linear-gradient(180deg,var(--gold-bright),var(--gold));box-shadow:0 0 44px -10px rgba(216,175,90,.7)}
.bk-recap{text-align:left;border:1px solid var(--line-soft);border-radius:3px;margin:1.4rem 0;overflow:hidden}
.bk-recap div{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 1.1rem;border-bottom:1px solid var(--line-soft);font-size:.92rem}
.bk-recap div:last-child{border-bottom:0}
.bk-recap span:first-child{color:var(--muted-2);font-family:var(--ff-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;align-self:center}
.bk-recap span:last-child{color:var(--paper);text-align:right}
.bk-success-cta{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}
.bk-success-cta .btn{padding:.75em 1.2em;font-size:.76rem}