/* ==========================================================
   RANEE'S — shared ticket-system styles
   ========================================================== */

:root{
  --ink:#000000;
  --paper:#ffffff;
  --grey-0:#fafaf9;
  --grey-1:#f1f0ed;
  --grey-2:#dcdad3;
  --grey-3:#a3a097;
  --grey-4:#67645d;
  --gold:#9c8a5e;
  --green:#3f6b41;
  --red:#9c3b2c;
  --page-bg:#e8e6e0;

  /* spacing scale — single source of truth, fixes the "too tight" issue */
  --sp-1: 6px;
  --sp-2: 10px;
  --sp-3: 16px;
  --sp-4: 22px;
  --sp-5: 32px;
  --sp-6: 44px;
}

*{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--page-bg);
  font-family:'Archivo',sans-serif;
  color:var(--ink);
  display:flex;
  justify-content:center;
  -webkit-font-smoothing:antialiased;
}

.wrap{
  width:100%;
  max-width:440px;
  background:var(--paper);
  min-height:100vh;
}

/* ===== Letterhead ===== */
.head{
  background:var(--ink);
  padding:40px 28px 28px;
  text-align:center;
}
.logo{
  max-width:200px;
  width:64%;
  height:auto;
  display:block;
  margin:0 auto var(--sp-3);
}
.branch-tag{
  display:inline-block;
  font-family:'Fraunces',serif;
  font-style:italic;
  font-weight:500;
  font-size:14px;
  letter-spacing:0.01em;
  color:#d8d4c8;
  border:1px solid #3a3935;
  border-radius:20px;
  padding:5px 18px;
}

/* ===== Typography ===== */
h1{
  font-family:'Fraunces',serif;
  font-optical-sizing:auto;
  font-weight:600;
  font-size:27px;
  margin:0 0 var(--sp-1);
  letter-spacing:-0.01em;
  line-height:1.22;
  color:var(--ink);
}
.sub{
  font-size:14px;
  color:var(--grey-4);
  margin:0;
  line-height:1.6;
  max-width:320px;
}
.sub b{ color:var(--ink); font-weight:600; }

/* ===== Form elements ===== */
.field-group{ margin-top:var(--sp-3); }
.field-group:first-child{ margin-top:0; }

textarea, input[type=tel], input[type=text]{
  display:block;
  width:100%;
  font-size:15px;
  font-family:'Archivo',sans-serif;
  border:1px solid var(--grey-2);
  border-radius:6px;
  padding:14px 15px;
  background:var(--grey-0);
  color:var(--ink);
  line-height:1.4;
}
textarea{ min-height:76px; resize:none; }
textarea:focus, input:focus{ outline:none; border-color:var(--ink); }
textarea::placeholder, input::placeholder{ color:var(--grey-3); }

.hint{
  font-size:12px;
  color:var(--grey-3);
  margin-top:var(--sp-2);
  line-height:1.55;
}
.consent-row{
  display:flex;
  gap:10px;
  font-size:12.5px;
  color:var(--grey-4);
  margin-top:var(--sp-3);
  align-items:flex-start;
  line-height:1.55;
}
.consent-row input{
  margin-top:3px;
  width:16px;
  height:16px;
  flex-shrink:0;
  accent-color:var(--ink);
}

button{ font-family:'Archivo',sans-serif; }

.primary-btn{
  width:100%;
  background:var(--ink);
  color:#fff;
  font-size:14.5px;
  font-weight:600;
  letter-spacing:0.05em;
  text-transform:uppercase;
  border:none;
  border-radius:6px;
  padding:18px;
  margin-top:var(--sp-3);
  cursor:pointer;
}
.primary-btn:disabled{
  background:var(--grey-2);
  color:var(--grey-3);
  cursor:default;
}
.primary-btn:active:not(:disabled){ background:#1a1a1a; }

.error-msg{
  color:var(--red);
  font-size:13px;
  margin-top:var(--sp-2);
  display:none;
  line-height:1.5;
}

/* ===== Loading state ===== */
.loading-view{
  display:none;
  text-align:center;
  padding:90px 28px;
  color:var(--grey-4);
  font-size:14px;
}
.spinner{
  width:28px; height:28px;
  border:2.5px solid var(--grey-2);
  border-top-color:var(--ink);
  border-radius:50%;
  margin:0 auto var(--sp-3);
  animation:spin 0.7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ===== Ticket stub (the voucher object) ===== */
.stub-wrap{ margin:var(--sp-6) 28px 0; }
.stub-top-rule{
  border-top:3px dashed var(--ink);
  margin:0;
}
.stub{
  border:1.5px solid var(--ink);
  border-top:none;
  background:var(--paper);
}
.stub-head{ padding:24px 24px 0; text-align:center; }
.stub-amt{
  font-family:'JetBrains Mono',monospace;
  font-weight:700;
  font-size:12px;
  letter-spacing:0.09em;
  color:var(--gold);
  text-transform:uppercase;
}
.stub-code{
  font-family:'JetBrains Mono',monospace;
  font-weight:700;
  font-size:44px;
  letter-spacing:0.08em;
  text-align:center;
  padding:14px 0 20px;
  color:var(--ink);
}
.stub-divider{ border-top:1px dashed var(--grey-2); margin:0 24px; }
.stub-foot{
  display:flex;
  justify-content:space-between;
  padding:16px 24px 22px;
  font-family:'JetBrains Mono',monospace;
  font-size:10.5px;
  color:var(--grey-4);
  letter-spacing:0.02em;
}
.stub-foot span b{ color:var(--ink); }

.footnote{
  text-align:center;
  font-size:12px;
  color:var(--grey-3);
  padding:24px 28px 48px;
  line-height:1.5;
}

.save-btn{
  display:block;
  width:calc(100% - 56px);
  margin:18px 28px 0;
  background:var(--paper);
  color:var(--ink);
  font-size:13px;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
  border:1.5px solid var(--ink);
  border-radius:6px;
  padding:14px;
  cursor:pointer;
}
.save-btn:active{ background:var(--grey-1); }