/* Consult Booking — Kaaba palette: black / white / gold. Mobile-first. */
:root{
  --ink:#0b0b0c; --paper:#ffffff; --muted:#6b6b70; --line:#e6e6e8;
  --gold:#c8a24a; --gold-dk:#a9863a; --soft:#faf9f6; --danger:#b23b3b; --ok:#1f7a4d;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--soft);-webkit-font-smoothing:antialiased}
body.embed{background:transparent}
a{color:var(--gold-dk)}
.wrap{max-width:640px;margin:0 auto;padding:24px 16px 48px}
.wrap.narrow{max-width:380px}
.wrap.admin{max-width:820px}

.hero{text-align:center;padding:24px 8px 8px}
.kicker{display:inline-block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-dk);border:1px solid var(--gold);border-radius:999px;padding:4px 12px;margin-bottom:14px}
.hero h1{font-size:28px;line-height:1.2;margin:.2em 0}
.hero .sub{color:var(--muted);max-width:34ch;margin:0 auto}

.card{background:var(--paper);border:1px solid var(--line);border-radius:16px;
  padding:20px;margin:16px 0;box-shadow:0 1px 2px rgba(0,0,0,.03)}

/* host profile card */
.host{display:flex;align-items:center;gap:14px;background:var(--paper);border:1px solid var(--line);
  border-radius:16px;padding:16px 18px;margin:16px 0;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.host-photo{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:center top;
  border:2px solid var(--gold);flex:0 0 auto;background:#111}
.host-name{font-weight:700;font-size:17px}
.host-title{color:var(--gold-dk);font-size:14px;font-weight:600}
.host-blurb{color:var(--muted);font-size:14px;margin-top:4px;font-style:italic}
body.embed .host{margin-top:0}

.tzbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;
  font-size:14px;margin-bottom:16px;padding:10px 12px;background:var(--soft);border:1px solid var(--line);border-radius:12px}
.tzbar .tzlabel b{color:var(--ink)}
.tzbar .tzpick{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13px;font-weight:400;margin:0}
.tzbar select{padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:#fff;margin:0;width:auto}

.days .day{margin-bottom:18px}
.days h3{font-size:14px;color:var(--muted);margin:0 0 8px;font-weight:600}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.slot{padding:11px 6px;border:1px solid var(--gold);color:var(--ink);background:#fff;border-radius:10px;
  font-size:15px;cursor:pointer;transition:.12s}
.slot:hover{background:var(--gold);color:#fff}
.loading{color:var(--muted);padding:24px 0;text-align:center}

.back{background:none;border:0;color:var(--muted);cursor:pointer;padding:0;margin-bottom:10px;font-size:14px}
.chosen{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:16px}

label{display:block;margin:12px 0;font-size:14px;font-weight:600}
label .opt{color:var(--muted);font-weight:400}
input,textarea,select{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;
  font:inherit;margin-top:6px;background:#fff}
textarea{resize:vertical}
input[type=checkbox]{width:auto;margin:0 6px 0 0}

.cta{display:block;width:100%;text-align:center;background:var(--ink);color:#fff;border:0;border-radius:12px;
  padding:14px;font-size:16px;font-weight:600;cursor:pointer;margin-top:8px;text-decoration:none}
.cta:hover{background:#000}
.ghost{background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 14px;cursor:pointer;font:inherit}
.ghost.danger{color:var(--danger);border-color:#e8c9c9}
.link{background:none;border:0;color:var(--danger);cursor:pointer;font:inherit;padding:0 0 0 6px;text-decoration:underline}

.err{background:#fdecec;color:var(--danger);border:1px solid #f4caca;border-radius:10px;padding:10px 12px;margin:10px 0;font-size:14px}
.flash{background:#eafaf1;color:var(--ok);border:1px solid #bfe6cf;border-radius:10px;padding:10px 14px;margin:12px 0}

.done-check{width:56px;height:56px;border-radius:50%;background:var(--ok);color:#fff;font-size:30px;
  display:flex;align-items:center;justify-content:center;margin:6px auto 10px}
#step-done{text-align:center}
.done-when{font-size:18px;font-weight:600}
.done-note{color:var(--muted);font-size:14px}

.foot{text-align:center;color:var(--muted);font-size:13px;padding-top:8px}

/* admin */
.adminbar{display:flex;align-items:center;gap:16px;padding:6px 2px 0}
.adminbar .grow{flex:1}
.muted{color:var(--muted)} .small{font-size:13px} .warn{color:var(--danger)}
.bk{display:flex;gap:12px;justify-content:space-between;align-items:flex-start;
  border-top:1px solid var(--line);padding:12px 0}
.bk:first-of-type{border-top:0}
.problem{margin-top:6px;font-size:14px;white-space:pre-wrap}
table.avail{width:100%;border-collapse:collapse}
table.avail td{padding:5px 6px 5px 0}
table.avail input[type=time]{width:120px;margin:0}
.chk{font-weight:600;display:flex;align-items:center}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.row input{width:auto;flex:0 0 auto}
.blk{list-style:none;padding:0} .blk li{padding:4px 0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid2 .wide{grid-column:1/3}
.grid2 .chk2{display:flex;align-items:center;font-weight:600}
.code{background:var(--ink);color:#e9e2cf;padding:12px;border-radius:10px;overflow:auto;font-size:13px;white-space:pre-wrap;word-break:break-all}
@media(max-width:520px){.grid2{grid-template-columns:1fr}.grid2 .wide{grid-column:1}}