/* =========================================================
   THE DINKIN PROJECT — PUBLIC SITE, DARK ARENA THEME
   Load AFTER tokens.css + style.css + booking-grid.css.
   Everything here re-skins the public marketing site and the
   guest booking flow onto the dark palette (--pub-* tokens)
   without touching the admin/customer portals.
   ========================================================= */

html{ background:var(--pub-bg); }

body.site-dark{
  background:var(--pub-bg);
  color:var(--pub-text);
}

body.site-dark ::selection{ background:var(--pub-gold); color:#0B0D10; }

body.site-dark a{ color:var(--pub-gold); }

/* ---------------- Navbar ---------------- */
body.site-dark .custom-navbar{
  background:rgba(5,7,10,.72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
}
body.site-dark .custom-navbar.is-scrolled{
  background:rgba(5,7,10,.92);
  border-bottom-color:var(--pub-border);
  box-shadow:0 12px 30px rgba(0,0,0,.35);
}
body.site-dark .navbar-brand{ color:var(--pub-text)!important; }
body.site-dark .navbar-brand span{ color:var(--pub-text); }
body.site-dark .navbar-brand img,
body.site-dark .bt-brand img,
body.site-dark .auth-brand img,
body.site-dark .receipt-brand img,
body.site-dark .site-footer img[src$="logo.png"]{
  background:#fff;
  border-radius:10px;
  padding:5px;
  box-shadow:0 6px 18px rgba(0,0,0,.24);
}
body.site-dark .navbar-brand img{
  max-height:58px;
  object-fit:contain;
}
body.site-dark .nav-link{ color:var(--pub-text-dim)!important; }
body.site-dark .nav-link:hover{ background:var(--pub-surface-2); color:var(--pub-text)!important; }
body.site-dark .navbar-toggler{ border-color:var(--pub-border); filter:invert(1) grayscale(1); }

body.site-dark .btn-outline-success{
  color:var(--pub-text);
  border:1.5px solid var(--pub-border-soft);
  background:transparent;
}
body.site-dark .btn-outline-success:hover{
  background:var(--pub-surface-2);
  border-color:var(--pub-text-dim);
  color:var(--pub-text);
}
body.site-dark .btn-success{
  background:var(--pub-gold);
  border-color:var(--pub-gold);
  color:#fff;
  box-shadow:0 8px 22px rgba(46,85,144,.35);
}
body.site-dark .btn-success:hover,
body.site-dark .btn-success:focus{
  background:var(--pub-navy-dk);
  border-color:var(--pub-navy-dk);
  color:#fff;
}
body.site-dark .btn-outline-dark{
  border-color:var(--pub-border-soft);
  color:var(--pub-text);
}
body.site-dark .btn-outline-dark:hover{
  background:var(--pub-text);
  border-color:var(--pub-text);
  color:#0B0D10;
}
body.site-dark .btn{ transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; }
body.site-dark .btn:hover{ transform:translateY(-2px); }

/* Pill CTA style, echoes the boxed "BOOK A COURT" button in the brief */
.btn-pill-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--pub-text);
  color:#0B0D10!important;
  font-weight:700;
  font-size:13px;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:11px 20px;
  border-radius:10px;
  transition:.18s;
}
.btn-pill-cta:hover{ background:var(--pub-gold); color:#fff!important; transform:translateY(-2px); }

/* ---------------- Hero (arena) ---------------- */
.arena-hero{
  position:relative;
  padding:150px 0 70px;
  background:
    radial-gradient(ellipse 900px 500px at 82% 8%, rgba(46,85,144,.22), transparent 60%),
    linear-gradient(90deg, rgba(5,7,10,.93) 0%, rgba(5,7,10,.82) 28%, rgba(5,7,10,.44) 50%, rgba(5,7,10,.18) 72%, rgba(5,7,10,.06) 100%),
    linear-gradient(180deg, rgba(5,7,10,.18) 0%, transparent 28%, transparent 70%, rgba(5,7,10,.34) 100%),
    url('../img/hero-bg-enhanced.jpg') center 22% / cover no-repeat;
  image-rendering:auto;
  overflow:hidden;
  border-bottom:1px solid var(--pub-border);
}

.arena-hero::before{
  /* dimple texture, echoes the ball's perforated surface */
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  background-image: radial-gradient(rgba(255,255,255,.045) 1.4px, transparent 1.4px);
  background-size: 26px 26px;
  pointer-events:none;
}

.arena-hero::after{
  /* one raking diagonal stripe, like the wall graphic in the brief photo */
  content:'';
  position:absolute;
  top:-30%;
  right:6%;
  width:180px;
  height:200%;
  z-index:1;
  background:rgba(255,255,255,.025);
  transform:rotate(20deg);
  pointer-events:none;
}

.arena-hero .container{ position:relative; z-index:3; }

.arena-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:8px 16px;
  border-radius:50px;
  border:1px solid var(--pub-border-soft);
  background:rgba(255,255,255,.03);
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--pub-text-dim);
  margin-bottom:28px;
}

.arena-eyebrow .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--pub-lime);
  box-shadow:0 0 0 4px rgba(110,231,160,.18);
}

.arena-title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(48px, 7vw, 92px);
  line-height:.98;
  letter-spacing:-.02em;
  text-transform:uppercase;
  margin:0 0 26px;
  color:var(--pub-text);
}

.arena-title .line-outline{
  color:rgba(255,255,255,.55);
}
@supports (-webkit-text-stroke:1px transparent){
  .arena-title .line-outline{
    color:transparent;
    -webkit-text-stroke:1.5px rgba(255,255,255,.55);
  }
}

.arena-title .line-accent{ color:var(--pub-gold); }

.arena-hero p.lead-copy{
  color:var(--pub-text-dim);
  font-size:17.5px;
  line-height:1.75;
  max-width:46ch;
  margin:0 0 34px;
}

.arena-cta-row{
  display:flex;
  align-items:center;
  gap:22px;
  flex-wrap:wrap;
  margin-bottom:56px;
}

.link-underline{
  color:var(--pub-text);
  font-weight:600;
  font-size:14.5px;
  text-decoration:none;
  border-bottom:1.5px solid var(--pub-border-soft);
  padding-bottom:3px;
  transition:.18s;
}
.link-underline:hover{ border-color:var(--pub-gold); color:var(--pub-gold); }

.arena-stats{
  display:flex;
  gap:38px;
  flex-wrap:wrap;
  padding-top:28px;
  border-top:1px dashed var(--pub-border);
}

.arena-stats .stat-num{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:26px;
  color:var(--pub-text);
  display:block;
}
.arena-stats .stat-lbl{
  font-size:12.5px;
  color:var(--pub-text-faint);
  letter-spacing:.03em;
}

/* ---- "Tonight" live availability card ---- */
.tonight-card{
  position:relative;
  background:linear-gradient(165deg, var(--pub-surface-2), var(--pub-surface));
  border:1px solid var(--pub-border-soft);
  border-radius:22px;
  padding:22px;
  box-shadow:0 30px 70px rgba(0,0,0,.55);
  transform:translateZ(0);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}

.tonight-card .tc-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--pub-text-dim);
  margin-bottom:16px;
}

.tonight-card .tc-top .live-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--pub-lime);
  display:inline-block;
  margin-right:6px;
  box-shadow:0 0 0 3px rgba(110,231,160,.2);
  animation:tcPulse 1.8s ease-in-out infinite;
  will-change:opacity;
}

@keyframes tcPulse{
  0%,100%{ opacity:1; }
  50%{ opacity:.35; }
}

.tc-court{
  position:relative;
  height:230px;
  border-radius:14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 40%),
    var(--pub-navy);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

.tc-court .court-lines{
  position:absolute;
  inset:14px;
  border:2px solid rgba(255,255,255,.55);
  border-radius:2px;
}
.tc-court .kitchen{
  position:absolute;
  left:14px; right:14px; top:50%;
  height:44px;
  transform:translateY(-50%);
  background:rgba(46,85,144,.14);
  border-top:2px solid rgba(255,255,255,.55);
  border-bottom:2px solid rgba(255,255,255,.55);
}
.tc-court .net{
  position:absolute;
  left:14px; right:14px; top:50%;
  height:2px;
  transform:translateY(-50%);
  background:#fff;
}
.tc-court .ball{
  position:relative;
  width:18px; height:18px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #d4ff5c, #7cfc00 55%, #4fd600 100%);
  box-shadow:0 0 10px 2px rgba(124,252,0,.85), 0 0 22px 6px rgba(124,252,0,.45), 0 0 0 4px rgba(124,252,0,.12);
  animation:dink 2.6s ease-in-out infinite;
  will-change:transform;
  z-index:2;
}
@keyframes dink{
  0%,100%{ transform:translateY(-46px); }
  50%{ transform:translateY(46px); }
}

.tc-meta{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-top:16px;
  padding-top:14px;
  border-top:1px dashed var(--pub-border);
}
.tc-meta .tc-slot-label{ font-size:13.5px; color:var(--pub-text-dim); }
.tc-meta .tc-slot-time{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:19px;
  color:var(--pub-text);
}
.tc-meta .tc-slot-price{
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--pub-lime);
}

.tc-cta{
  display:block;
  text-align:center;
  margin-top:18px;
  background:var(--pub-navy);
  color:#fff;
  font-weight:700;
  letter-spacing:.03em;
  padding:13px;
  border-radius:11px;
  transition:.18s;
  text-transform:uppercase;
  font-size:13.5px;
}
.tc-cta:hover,
.tc-cta:focus{
  background:var(--pub-navy-dk);
  transform:translateY(-2px);
  color:#fff;
}

/* Beat body.site-dark a { color: var(--pub-gold) } — gold text on navy bg was invisible */
body.site-dark .tonight-card a.tc-cta{
  color:#fff;
}
body.site-dark .tonight-card a.tc-cta:hover,
body.site-dark .tonight-card a.tc-cta:focus{
  color:#fff;
  background:var(--pub-navy-dk);
}

.hero-address-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:20px;
  padding:9px 16px;
  border-radius:50px;
  border:1px solid var(--pub-border-soft);
  background:rgba(255,255,255,.04);
  color:var(--pub-text-dim);
  font-size:13.5px;
  font-weight:500;
  text-decoration:none;
  transition:background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.hero-address-chip i{ color:var(--pub-gold); font-size:15px; }
.hero-address-chip:hover,
.hero-address-chip:focus{
  background:rgba(255,255,255,.08);
  border-color:var(--pub-gold);
  color:var(--pub-text);
  transform:translateY(-1px);
}
body.site-dark a.hero-address-chip{ color:var(--pub-text-dim); }
body.site-dark a.hero-address-chip:hover,
body.site-dark a.hero-address-chip:focus{ color:var(--pub-text); }

.site-footer .footer-address-link{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .18s ease, color .18s ease;
}
.site-footer .footer-address-link:hover,
.site-footer .footer-address-link:focus{
  color:var(--pub-gold);
  border-bottom-color:var(--pub-gold);
}
body.site-dark .site-footer .footer-address-link:hover,
body.site-dark .site-footer .footer-address-link:focus{ color:var(--pub-gold); }

@media (max-width:991px){
  .arena-hero{ padding:130px 0 50px; text-align:left; }
  .arena-title{ font-size:clamp(38px,10vw,56px); }
  .tonight-card{ margin-top:40px; }
}

/* ---------------- Section framing (dark) ---------------- */
body.site-dark .section-eyebrow{ color:var(--pub-text-faint); }
body.site-dark .section-title{ color:var(--pub-text); }
body.site-dark .section-lead{ color:var(--pub-text-dim); }

body.site-dark section.py-5{ background:var(--pub-bg); }
body.site-dark section.dimple-bg{
  background-color:var(--pub-bg-soft);
  background-image: radial-gradient(rgba(255,255,255,.045) 1.4px, transparent 1.4px);
}

/* ---------------- Sport cards (dark) ---------------- */
body.site-dark .sport-card{
  background:var(--pub-surface);
  border-color:var(--pub-border);
  box-shadow:0 14px 30px rgba(0,0,0,.35);
}
body.site-dark .sport-card:hover{ border-color:var(--pub-navy); box-shadow:0 20px 44px rgba(0,0,0,.5); }
body.site-dark .sport-card h4{ color:var(--pub-text); }
body.site-dark .sport-card p{ color:var(--pub-text-dim); }
body.site-dark .sport-art-pickleball{
  background-image:
    radial-gradient(rgba(255,255,255,.35) 1.4px, transparent 1.4px),
    linear-gradient(135deg, var(--pub-navy), var(--pub-navy-dk));
}

/* ---------------- Gallery (dark) ---------------- */
body.site-dark .gallery-photo{
  border-color:var(--pub-border);
  box-shadow:0 14px 30px rgba(0,0,0,.35);
}
body.site-dark .gallery-photo:hover{ box-shadow:0 20px 44px rgba(0,0,0,.5); }

/* ---------------- Scroll reveal ---------------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

/* ---------------- Footer tie-in ---------------- */
body.site-dark .site-footer{ border-top:1px solid var(--pub-border); }

/* ---------------- Forms on dark pages (book.php, login, register) ---------------- */
body.site-dark .form-control,
body.site-dark .form-select{
  background:var(--pub-surface-2);
  border:1.5px solid var(--pub-border);
  color:var(--pub-text);
}
body.site-dark .form-control::placeholder{ color:var(--pub-text-faint); }
body.site-dark .form-control:disabled{ background:var(--pub-surface); color:var(--pub-text-faint); }
body.site-dark .form-control:focus,
body.site-dark .form-select:focus{
  background:var(--pub-surface-2);
  border-color:var(--pub-navy);
  color:var(--pub-text);
  box-shadow:0 0 0 .2rem rgba(46,85,144,.28);
}
body.site-dark label{ color:var(--pub-text-dim); }

body.site-dark .card,
body.site-dark .booking-card{
  background:var(--pub-surface);
  border:1px solid var(--pub-border)!important;
  color:var(--pub-text);
}

/* Bootstrap's default .text-muted (#6c757d) is near-invisible on our
   dark surfaces — brighten it wherever it's used across the public
   site and customer portal instead of patching each page. */
body.site-dark .text-muted{
  color:var(--pub-text-dim)!important;
}

body.site-dark .text-secondary,
body.site-dark .small.text-muted{
  color:var(--pub-text-dim)!important;
}

body.site-dark .addon-card{
  border-color:var(--pub-border);
  background:var(--pub-surface-2);
}
body.site-dark .addon-card:has(.addon-check:checked){
  border-color:var(--pub-navy);
  background:rgba(46,85,144,.14);
}
body.site-dark .addon-card .form-check-label{
  color:var(--pub-text);
  font-size:15px;
}
.addon-desc{
  font-size:13.5px;
  font-weight:500;
  color:var(--pub-text-dim);
}
.addon-desc strong{ color:var(--pub-text); }

body.site-dark .pmc-inner{
  border-color:var(--pub-border);
  background:var(--pub-surface-2);
}
body.site-dark .pmc-inner i{ color:var(--pub-gold); font-size:20px; }
body.site-dark .pmc-inner strong{ color:var(--pub-text); font-size:15px; }
body.site-dark .pmc-inner span{ color:var(--pub-text-dim); font-weight:500; }
body.site-dark .pay-method-card input:checked + .pmc-inner{
  border-color:var(--pub-gold);
  background:rgba(46,85,144,.08);
}

body.site-dark .pay-instructions{
  background:rgba(46,85,144,.12);
  border-color:var(--pub-navy);
  color:var(--pub-text);
}

body.site-dark .dropzone{
  border-color:var(--pub-border);
  background:var(--pub-surface-2);
}
body.site-dark .dropzone:hover,
body.site-dark .dropzone.dragover{
  border-color:var(--pub-navy);
  background:var(--pub-surface-3);
}
body.site-dark .dropzone i{ color:var(--pub-gold); }
body.site-dark .dropzone small{ color:var(--pub-text-faint); }

body.site-dark hr{ border-color:var(--pub-border); opacity:1; }

/* =========================================================
   BOOKING PAGE — layout, stepper, summary sidebar
   ========================================================= */
.booking-page{
  background:
    radial-gradient(ellipse 900px 400px at 90% 0%, rgba(46,85,144,.22), transparent 60%),
    var(--pub-bg);
  min-height:100vh;
  padding-bottom:60px;
}

.booking-topbar{
  padding:26px 0 18px;
  border-bottom:1px solid var(--pub-border);
  margin-bottom:34px;
}

.booking-topbar .bt-brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-display);
  font-weight:700;
  color:var(--pub-text);
  text-decoration:none;
  font-size:16px;
}
.booking-topbar .bt-brand img{ border-radius:6px; }

.book-stepper{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:18px;
}
.book-step{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 14px 8px 8px;
  border-radius:50px;
  background:var(--pub-surface-2);
  border:1px solid var(--pub-border);
  font-size:12.5px;
  font-weight:600;
  color:var(--pub-text-dim);
}
.book-step .num{
  width:22px; height:22px;
  border-radius:50%;
  background:var(--pub-surface-3);
  color:var(--pub-text-dim);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono);
  font-size:11.5px;
}
.book-step.is-active{ border-color:var(--pub-gold); color:var(--pub-text); }
.book-step.is-active .num{ background:var(--pub-gold); color:#fff; }

.booking-layout{
  display:grid;
  grid-template-columns:1fr;
  gap:26px;
  align-items:start;
}
.booking-main,
.booking-summary,
.booking-panel{
  min-width:0;
}
@media (min-width:992px){
  .booking-layout{ grid-template-columns:1fr 360px; }
}

.booking-panel{
  background:var(--pub-surface);
  border:1px solid var(--pub-border);
  border-radius:20px;
  padding:30px;
}

.booking-panel + .booking-panel{ margin-top:22px; }

.panel-heading{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:18px;
}
.panel-heading h5{
  font-family:var(--font-display);
  color:var(--pub-text);
  margin:0;
  font-size:19px;
}
.panel-heading .panel-hint{ font-size:12.5px; color:var(--pub-text-faint); }

.booking-summary{
  position:sticky;
  top:24px;
  background:linear-gradient(165deg, var(--pub-surface-2), var(--pub-surface));
  border:1px solid var(--pub-border);
  border-radius:20px;
  padding:26px;
}

.booking-summary h6{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--pub-text-faint);
  margin-bottom:16px;
}

.bs-empty{
  font-size:13.5px;
  color:var(--pub-text-faint);
  border:1px dashed var(--pub-border);
  border-radius:12px;
  padding:18px;
  text-align:center;
}

.bs-slot-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  padding:10px 0;
  border-bottom:1px dashed var(--pub-border);
  font-size:13.5px;
}
.bs-slot-row:last-of-type{ border-bottom:0; }
.bs-slot-row .bs-slot-name{ color:var(--pub-text); font-weight:600; }
.bs-slot-row .bs-slot-time{ color:var(--pub-text-dim); font-size:12px; display:block; }
.bs-slot-row .bs-slot-price{ font-family:var(--font-mono); color:var(--pub-lime); white-space:nowrap; }

.bs-line{
  display:flex;
  justify-content:space-between;
  font-size:13.5px;
  color:var(--pub-text-dim);
  padding:6px 0;
}

.bs-total{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--pub-border);
  font-size:14px;
  color:var(--pub-text);
  font-weight:700;
}
.bs-total .bs-total-num{
  font-family:var(--font-mono);
  font-size:24px;
  color:var(--pub-gold);
}

.booking-summary .btn-success{ width:100%; margin-top:18px; }

/* Grid wrap sits inside a panel now — flatten its own outer chrome a touch */
.booking-panel .booking-grid-wrap{ padding:20px; border-radius:14px; }

/* =========================================================
   BOOKING CONFIRMATION — boarding-pass style receipt ticket
   shown in place of the plain success alert.
   ========================================================= */
.receipt-wrap{
  max-width:640px;
  margin:24px auto 40px;
}

.receipt-ticket{
  display:flex;
  background:var(--pub-panel, #12151A);
  border:1px solid var(--pub-border);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
}

.receipt-main{
  flex:1;
  padding:28px 26px;
  position:relative;
}

.receipt-brand{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:13px;
  color:var(--pub-text-dim);
  text-transform:uppercase;
  letter-spacing:.05em;
  margin-bottom:14px;
}
.receipt-brand img{ border-radius:6px; }

.receipt-title{
  font-family:var(--font-display);
  color:var(--pub-text);
  font-size:22px;
  margin:0 0 8px;
}

.receipt-status{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:4px 12px;
  border-radius:50px;
  background:rgba(46,85,144,.12);
  color:var(--gold);
  border:1px solid rgba(46,85,144,.35);
  margin-bottom:18px;
}
.receipt-status.status-paid{ background:rgba(74,222,128,.12); color:#4ADE80; border-color:rgba(74,222,128,.35); }

.receipt-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 18px;
  margin-top:18px;
}
.receipt-grid .span-2{ grid-column:1 / -1; }
.receipt-grid label{
  display:block;
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--pub-text-dim);
  margin-bottom:3px;
}
.receipt-grid span{
  font-size:14px;
  color:var(--pub-text);
  font-weight:600;
}
.receipt-proof{
  margin-top:18px;
}
.receipt-proof label{
  display:block;
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--pub-text-dim);
  margin-bottom:8px;
}
.receipt-proof img{
  display:block;
  width:100%;
  max-height:220px;
  object-fit:contain;
  border:1px solid var(--pub-border);
  border-radius:10px;
  background:rgba(255,255,255,.04);
  padding:8px;
}
.receipt-proof a{
  color:var(--pub-text);
  font-weight:700;
}

.receipt-total{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-top:22px;
  padding-top:16px;
  border-top:1px dashed var(--pub-border);
  font-size:15px;
  color:var(--pub-text);
  font-weight:700;
}
.receipt-total span:last-child{
  font-family:var(--font-mono);
  font-size:26px;
  color:var(--gold);
}
.receipt-policy{
  margin-top:14px;
  padding-top:12px;
  border-top:1px dashed var(--pub-border);
  color:var(--pub-text-dim);
  font-size:12.5px;
  line-height:1.45;
}

.receipt-perforation{
  width:0;
  border-left:2px dashed rgba(255,255,255,.18);
  position:relative;
}
.receipt-perforation::before,
.receipt-perforation::after{
  content:'';
  position:absolute;
  left:-9px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--pub-bg);
}
.receipt-perforation::before{ top:-9px; }
.receipt-perforation::after{ bottom:-9px; }

.receipt-stub{
  width:150px;
  padding:28px 18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:linear-gradient(160deg, var(--primary), var(--primary-dk));
}
.stub-label{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:rgba(255,255,255,.6);
  margin-bottom:6px;
}
.stub-ref{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:16px;
  color:var(--gold);
  letter-spacing:.03em;
  word-break:break-all;
}
.stub-dots{
  margin:16px 0;
  width:100%;
  height:36px;
  background-image:radial-gradient(rgba(255,255,255,.35) 1.5px, transparent 1.5px);
  background-size:6px 6px;
  opacity:.6;
}
.stub-note{
  font-size:10.5px;
  color:rgba(255,255,255,.55);
  line-height:1.4;
}

.receipt-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:20px;
}

@media(max-width:560px){
  .receipt-ticket{ flex-direction:column; }
  .receipt-perforation{ display:none; }
  .receipt-stub{ width:auto; flex-direction:row; justify-content:space-between; padding:14px 22px; }
  .stub-dots{ display:none; }
}

/* Print: show only the ticket, nothing else on the page */
@media print{
  body *{ visibility:hidden; }
  #receiptTicket, #receiptTicket *{ visibility:visible; }
  #receiptTicket{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    box-shadow:none;
  }
  .receipt-actions{ display:none; }
}

/* ---------------------------------------------------------
   Auth pages (login.php, register.php, forgot/reset password)
   These are guest-facing pages used by every role before they
   land in a portal, so they share the dark arena palette too.
   --------------------------------------------------------- */
body.site-dark .auth-brand span{ color:var(--pub-text); }

body.site-dark .alert-success{ background:rgba(46,125,79,.15); color:#8FE0AC; border-left-color:#4ADE80; }
body.site-dark .alert-danger{ background:rgba(178,59,59,.15); color:#F4A3A3; border-left-color:#B23B3B; }
body.site-dark .alert-warning{ background:rgba(240,194,57,.12); color:#F0C239; border-left-color:#F0C239; }