/* Zoonique — Beige & Gold Theme (sitewide)
   Palette: bg #F5F0E6, text #2A2A2A, gold #B6863C, ink #141414, accents #E7DAC5 / #D2A96C
   Typography & spacing tuned for clarity across book/pay/admin/receipt pages.
*/
:root{
  --bg: #F5F0E6;          /* page background (beige) */
  --panel: #FFFFFF;       /* cards/panels */
  --ink: #2A2A2A;         /* primary text */
  --ink-muted:#5A5A5A;    /* secondary text */
  --border:#E7DAC5;       /* soft borders */
  --gold: #B6863C;        /* brand gold */
  --gold-600:#A4762F;
  --gold-700:#8E6526;
  --gold-200:#E7D3B0;
  --ok:#228B5A;
  --err:#C83E4D;
  --focus:#D2A96C;        /* focus ring */
  --shadow: 0 10px 30px rgba(20,20,20,.08);
  --radius: 14px;
  --gap: 12px;
  --font: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:var(--font); color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.wrap{max-width:1080px;margin:0 auto;padding:20px}
main{display:block}

/* Headings & text */
h1,h2,h3{margin:0 0 8px;color:var(--ink)}
h1{font-size:28px;font-weight:800;letter-spacing:.2px}
h2{font-size:22px;font-weight:700}
p{margin:0 0 10px;line-height:1.55;color:var(--ink)}
.muted,.zq-sub{color:var(--ink-muted);font-size:14px}

/* Panels / cards (book/pay/receipt/admin) */
.zq-panel,.card,.zq-aside{
  background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius); padding:18px; box-shadow:var(--shadow);
}

/* Form bits */
label{display:block;margin:6px 0 6px 0;font-weight:600}
input[type="text"],input[type="email"],input[type="tel"],input[type="datetime-local"],textarea,select{
  width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:12px;
  background:#fff; color:var(--ink); outline:none; transition:border .15s, box-shadow .15s;
}
textarea{min-height:90px;resize:vertical}
input:focus,textarea:focus,select:focus{
  border-color:var(--focus); box-shadow:0 0 0 3px rgba(210,169,108,.25);
}
.zq-row{display:flex; gap:var(--gap); flex-wrap:wrap; align-items:flex-start}
.zq-lb{font-weight:700}
.zq-ack{display:flex; gap:8px; align-items:flex-start; color:var(--ink-muted)}
.zq-radio{display:inline-flex; gap:8px; align-items:center; margin-right:12px; color:var(--ink)}

/* Buttons */
.zq-btn,.btn{
  display:inline-block; padding:12px 18px; border-radius:12px; font-weight:700; text-decoration:none;
  border:1px solid transparent; cursor:pointer; transition:filter .15s, transform .02s, background .15s, border-color .15s, color .15s;
}
.zq-btn:active,.btn:active{transform:translateY(1px)}
.zq-gold,.btn{background:var(--gold); color:#fff}
.zq-gold:hover,.btn:hover{filter:brightness(1.03)}
.zq-outline{background:transparent; color:var(--gold); border-color:var(--gold)}
.zq-outline:hover{background:rgba(182,134,60,.12)}
.btn[disabled],.zq-btn[disabled]{opacity:.6; pointer-events:none}

/* Summaries (right column on book page) */
.zq-sum{display:grid; gap:8px}
.zq-sum .row{display:flex; justify-content:space-between; align-items:center; gap:10px}
.zq-sum .total{border-top:1px dashed var(--border); padding-top:10px}
#sum_note{color:var(--ink-muted)}

/* Inline states */
.hidden{display:none}
.ok{color:var(--ok)}
.err{color:var(--err)}
code{display:block; padding:8px 10px; border:1px solid var(--border); border-radius:10px; background:#fff; color:#333}

/* Layout helpers used in book page */
.zq-btns{display:flex; gap:10px; align-items:center}
.zq-grid{display:grid; grid-template-columns:1.25fr .75fr; gap:18px}
@media (max-width:960px){ .zq-grid{grid-template-columns:1fr} }

/* Pay page IDs */
#status{margin:10px 0}
#upiLink{word-break:break-all}

/* Receipt page quick tweaks */
.receipt-wrap{max-width:760px;margin:0 auto;padding:24px}
.receipt-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.receipt-head .brand{font-weight:800; color:var(--gold)}
.table{width:100%; border-collapse:collapse; margin-top:12px}
.table th,.table td{border:1px solid var(--border); padding:10px 12px; text-align:left}
.table th{background:#FBF7EF}

/* Footer / small notes */
.small{font-size:12px;color:var(--ink-muted)}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}

/* Graceful fallback for any legacy .card/.row usage */
.card .row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}

/* Make radio/checkbox inputs slightly larger for touch */
input[type="checkbox"], input[type="radio"]{width:18px;height:18px}

/* Slightly richer gold focus for buttons on keyboard nav */
.zq-btn:focus-visible,.btn:focus-visible{outline:3px solid rgba(182,134,60,.35); outline-offset:2px}

/* End */