/* ==========================================================
   Kenya Fans Association
   Palette: black #0A0A0A, red #CE1126, green #00543C, white #FAF9F6
   Type: Montserrat (display + body), 'Space Mono' for scoreboard digits
   Signature: Maasai-shield motif echoing the emblem on the Kenyan flag
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,600&family=Space+Mono:wght@400;700&display=swap');

:root{
  --black:#0A0A0A;
  --black-soft:#171412;
  --red:#CE1126;
  --red-deep:#8C0C1A;
  --green:#00543C;
  --green-bright:#00A65E;
  --white:#FAF9F6;
  --cream:#F1ECE2;
  --gold:#E8B84B;
  --text:#181614;
  --radius:14px;
  --shadow: 0 12px 30px rgba(0,0,0,.16);
  --font-display:'Montserrat', sans-serif;
  --font-mono:'Space Mono', monospace;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-display);
  color:var(--text);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none; margin:0; padding:0;}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:800; margin:0 0 .5em; line-height:1.15;}
p{margin:0 0 1em;}
:focus-visible{outline:3px solid var(--gold); outline-offset:2px;}

.container{max-width:1180px; margin:0 auto; padding:0 24px;}
.section{padding:72px 0;}
.section--tight{padding:48px 0;}
.section--dark{background:var(--black); color:var(--white);}
.section--cream{background:var(--cream);}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--red); margin-bottom:14px;
}
.eyebrow::before{content:''; width:22px; height:3px; background:var(--green); border-radius:2px;}

.section-head{max-width:640px; margin-bottom:40px;}
.section-head h2{font-size:clamp(28px,4vw,40px);}
.section-head p{color:#514c47; font-size:17px;}
.section--dark .section-head p{color:#c9c5bf;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 28px; border-radius:999px; font-weight:700; font-size:15px;
  border:2px solid transparent; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--red); color:#fff; box-shadow:0 10px 22px rgba(206,17,38,.35);}
.btn-primary:hover{background:var(--red-deep);}
.btn-secondary{background:var(--green); color:#fff; box-shadow:0 10px 22px rgba(0,84,60,.3);}
.btn-secondary:hover{background:#003c2b;}
.btn-outline{background:transparent; border-color:var(--white); color:var(--white);}
.btn-outline:hover{background:var(--white); color:var(--black);}
.btn-dark-outline{background:transparent; border-color:var(--black); color:var(--black);}
.btn-block{width:100%;}
.btn-sm{padding:9px 18px; font-size:13px;}

/* ---------- Navbar ---------- */
.navbar{
  position:sticky; top:0; z-index:100;
  background:var(--black);
  border-bottom:4px solid;
  border-image:linear-gradient(90deg,var(--black) 0 33%, var(--red) 33% 66%, var(--green) 66% 100%) 1;
}
.navbar .container{display:flex; align-items:center; justify-content:space-between; padding-top:14px; padding-bottom:14px;}
.brand{display:flex; align-items:center; gap:10px; color:var(--white); font-weight:800; font-size:19px; letter-spacing:.01em;}
.brand .shield{width:34px; height:38px; flex-shrink:0;}
.brand small{display:block; font-size:10px; font-weight:600; letter-spacing:.16em; color:var(--gold); text-transform:uppercase;}

.nav-links{display:flex; align-items:center; gap:28px;}
.nav-links a{color:#e9e6e1; font-weight:600; font-size:14.5px; padding:6px 2px; border-bottom:2px solid transparent; transition:.15s;}
.nav-links a:hover, .nav-links a.active{color:var(--white); border-color:var(--red);}
.nav-cta{display:flex; align-items:center; gap:12px;}
.nav-toggle{display:none; background:none; border:none; color:var(--white); font-size:26px; cursor:pointer;}

/* Auth links duplicated inside the collapsible menu: hidden on desktop,
   shown only inside the mobile dropdown (see media query below). */
.nav-links-auth{display:none;}

@media (max-width: 900px){
  .nav-links{
    position:absolute; top:100%; left:0; right:0; background:var(--black-soft);
    flex-direction:column; align-items:flex-start; gap:0; padding:8px 24px 18px;
    display:none; border-bottom:3px solid var(--red);
  }
  .nav-links.open{display:flex;}
  .nav-links a{width:100%; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.08);}
  .nav-toggle{display:block;}

  /* Hide Login / Join Now (and the Hi, name / Logout pair) from the top bar on mobile... */
  .nav-cta-auth{display:none;}

  /* ...and show them instead inside the collapsible menu. */
  .nav-links-auth{
    display:flex; flex-direction:column; width:100%; gap:10px;
    margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,.15);
  }
  .nav-links-auth a{
    width:100%; text-align:center; padding:12px 0; border-radius:999px; font-weight:700;
    border-bottom:none !important;
  }
  .nav-links-auth a:first-child{background:transparent; border:2px solid var(--white); color:var(--white);}
  .nav-links-auth a:last-child{background:var(--red); color:#fff;}
}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(circle at 85% 20%, rgba(206,17,38,.35), transparent 45%),
    radial-gradient(circle at 10% 90%, rgba(0,166,94,.35), transparent 50%),
    var(--black);
  color:var(--white);
  padding:96px 0 80px;
}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center;}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr;} }
.hero h1{font-size:clamp(34px,5.2vw,58px); letter-spacing:-.01em;}
.hero h1 .accent-red{color:var(--red);}
.hero h1 .accent-green{color:var(--green-bright);}
.hero p.lead{font-size:18px; color:#d8d5cf; max-width:520px;}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap; margin-top:28px;}
.hero-stats{display:flex; gap:32px; margin-top:44px; flex-wrap:wrap;}
.hero-stats div strong{display:block; font-family:var(--font-mono); font-size:28px; color:var(--gold);}
.hero-stats div span{font-size:12.5px; color:#bdb9b3; text-transform:uppercase; letter-spacing:.08em;}

.hero-shield-wrap{position:relative; display:flex; justify-content:center;}
.hero-shield{width:100%; max-width:360px;}

/* ---------- Shield / badge motif (SVG uses currentColor via classes) ---------- */
.shield-badge{
  position:relative; width:280px; margin:0 auto;
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.35));
}

/* ---------- Cards ---------- */
.grid{display:grid; gap:26px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:900px){ .grid-3,.grid-4{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;} }

.card{
  background:#fff; border-radius:var(--radius); padding:28px;
  box-shadow:var(--shadow); border-top:4px solid var(--red);
  transition:transform .18s ease;
}
.card:hover{transform:translateY(-4px);}
.card.green-top{border-top-color:var(--green);}
.card .icon{
  width:50px; height:50px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:var(--black); color:var(--gold); font-size:22px; margin-bottom:16px;
}
.card h3{font-size:19px;}
.card p{color:#5b564f; font-size:15px; margin-bottom:0;}

/* ---------- Pillars strip ---------- */
.pillars{display:flex; gap:0; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);}
.pillar{flex:1; padding:30px 26px; color:#fff;}
.pillar:nth-child(1){background:var(--black);}
.pillar:nth-child(2){background:var(--red);}
.pillar:nth-child(3){background:var(--green);}
.pillar h4{font-size:16px; text-transform:uppercase; letter-spacing:.06em;}
.pillar p{font-size:14px; opacity:.9; margin:0;}
@media (max-width:800px){ .pillars{flex-direction:column;} }

/* ---------- Forms ---------- */
.auth-wrap{
  max-width:560px; margin:0 auto; background:#fff; border-radius:20px;
  box-shadow:var(--shadow); padding:44px; border-top:6px solid var(--red);
}
.auth-wrap.otp{border-top-color:var(--green); text-align:center;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
@media (max-width:600px){ .form-row{grid-template-columns:1fr;} }
.field{margin-bottom:18px;}
.field label{display:block; font-weight:600; font-size:13.5px; margin-bottom:6px; color:#3a3632;}
.field input, .field select, .field textarea{
  width:100%; padding:13px 14px; border:1.5px solid #ddd8d0; border-radius:10px;
  font-family:var(--font-display); font-size:15px; background:#fff; color:var(--text);
}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--green); outline:none;}
.field-hint{font-size:12.5px; color:#8a847b; margin-top:4px;}

.field-feedback{font-size:12.5px; margin-top:6px; font-weight:600; min-height:16px;}
.field-feedback-checking{color:#8a847b;}
.field-feedback-ok{color:var(--green);}
.field-feedback-ok::before{content:'\2713  ';}
.field-feedback-error{color:var(--red-deep);}
.field-feedback-error::before{content:'\2715  ';}
.field-feedback-error a{color:var(--red-deep); text-decoration:underline;}
.field-feedback-warn{color:#946200;}
.field-feedback-warn::before{content:'\26A0  ';}
.otp-input{
  letter-spacing:14px; text-align:center; font-family:var(--font-mono); font-size:26px !important;
  font-weight:700;
}
.alert{padding:14px 18px; border-radius:10px; font-size:14.5px; margin-bottom:20px; font-weight:600;}
.alert-error{background:#fdeceb; color:var(--red-deep); border:1px solid #f6c6c6;}
.alert-success{background:#e6f5ee; color:#00543C; border:1px solid #b9e3cd;}
.checkbox-row{display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:#5b564f;}
.checkbox-row input{width:auto; margin-top:3px;}

.field select[multiple]{
  height:auto; padding:6px; cursor:pointer;
}
.field select[multiple] option{
  padding:10px 12px; border-radius:6px; margin:2px 0;
}
.field select[multiple] option:checked{
  background:linear-gradient(0deg, #fdeceb 0%, #fdeceb 100%);
  color:var(--red-deep); font-weight:700;
}

/* ---------- Sport selection chips (touch + mouse friendly) ---------- */
.sport-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(118px, 1fr));
  gap:10px;
}
.sport-chip{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  gap:6px;
  padding:12px 10px;
  border:1.5px solid #ddd8d0;
  border-radius:10px;
  background:#fff;
  font-size:13.5px; font-weight:700; color:var(--text);
  text-align:center;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.sport-chip input[type="checkbox"]{
  position:absolute;
  opacity:0;
  width:100%; height:100%;
  top:0; left:0;
  margin:0;
  cursor:pointer;
}
.sport-chip .sport-check-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; flex:0 0 auto;
  border:1.5px solid #ddd8d0; border-radius:5px;
  font-size:11px; line-height:1; color:transparent;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.sport-chip:hover{border-color:var(--red);}
.sport-chip:active{transform:scale(.97);}
.sport-chip:has(input:checked){
  background:var(--red); border-color:var(--red); color:#fff;
}
.sport-chip:has(input:checked) .sport-check-icon{
  background:#fff; border-color:#fff; color:var(--red);
}
.sport-chip:has(input:focus-visible){
  outline:2px solid var(--green); outline-offset:2px;
}
/* Fallback for browsers without :has() support (older Safari/Firefox): JS toggles this class */
.sport-chip.is-checked{
  background:var(--red); border-color:var(--red); color:#fff;
}
.sport-chip.is-checked .sport-check-icon{
  background:#fff; border-color:#fff; color:var(--red);
}
@media (max-width:480px){
  .sport-grid{grid-template-columns:repeat(auto-fill, minmax(100px, 1fr));}
  .sport-chip{padding:11px 8px; font-size:13px;}
}
.auth-foot{text-align:center; margin-top:20px; font-size:14px; color:#5b564f;}
.auth-foot a{color:var(--red); font-weight:700;}

/* ---------- Membership badge / card ---------- */
.badge-card{
  max-width:420px; margin:0 auto; border-radius:20px; overflow:hidden;
  box-shadow:0 22px 40px rgba(0,0,0,.28); position:relative; color:#fff;
  background:linear-gradient(160deg, var(--black) 0%, var(--black) 55%, var(--green) 100%);
}
.badge-card::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 60%, rgba(206,17,38,.55) 100%);
}
.badge-top{position:relative; display:flex; justify-content:space-between; align-items:center; padding:20px 22px 0;}
.badge-top .kfa-mark{display:flex; align-items:center; gap:8px; font-weight:800; font-size:14px; letter-spacing:.04em;}
.badge-top .kfa-mark svg{width:22px; height:24px;}
.badge-sport-tag{
  background:var(--gold); color:#211a06; font-size:11px; font-weight:800; text-transform:uppercase;
  padding:5px 10px; border-radius:999px; letter-spacing:.05em;
}
.badge-body{position:relative; padding:26px 22px 10px; display:flex; gap:18px; align-items:center;}
.badge-avatar{
  width:66px; height:66px; border-radius:50%; background:#fff2; border:2px solid var(--gold);
  display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:800; flex-shrink:0;
}
.badge-name{font-size:19px; font-weight:800; margin:0;}
.badge-id{font-family:var(--font-mono); font-size:13.5px; color:var(--gold); margin:2px 0 0;}
.badge-meta{position:relative; display:flex; justify-content:space-between; padding:16px 22px 22px; font-size:12px; color:#e6e3dd; border-top:1px dashed rgba(255,255,255,.25); margin-top:14px;}
.badge-meta strong{display:block; color:#fff; font-size:13.5px;}
.badge-qr{background:#fff; padding:6px; border-radius:8px;}

/* ---------- Print only the badge card, centered on a single page ---------- */
@media print{
  html, body{ height:100%; margin:0; }
  header.navbar, footer.site-footer, .no-print{ display:none !important; }
  .badge-print-section{ padding:0 !important; }
  .badge-print-section .container{ max-width:100%; padding:0; }
  .badge-print-area{
    display:flex; align-items:center; justify-content:center;
    min-height:100vh; width:100%;
    page-break-inside:avoid; break-inside:avoid;
  }
  .badge-card{
    margin:0; box-shadow:none;
    page-break-inside:avoid; break-inside:avoid;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  @page{ margin:0; size:auto; }
}

/* ---------- Tab buttons (used by gallery filter) ---------- */
.tab-btn{
  padding:10px 20px; border-radius:999px; border:1.5px solid #ddd8d0; background:#fff;
  font-weight:700; font-size:13.5px; cursor:pointer; color:#5b564f;
}
.tab-btn.active{background:var(--black); border-color:var(--black); color:#fff;}

/* ---------- Events ---------- */
.event-card{background:#fff; border-radius:16px; overflow:hidden; box-shadow:var(--shadow);}
.event-date-strip{
  background:var(--black); color:#fff; padding:14px 20px; display:flex; justify-content:space-between; align-items:center;
}
.event-date-strip .cat{background:var(--red); font-size:11px; font-weight:800; padding:4px 10px; border-radius:999px; text-transform:uppercase;}
.event-body{padding:22px;}
.event-body h3{font-size:18.5px;}
.event-loc{font-size:13.5px; color:#8a847b; font-weight:600; display:flex; align-items:center; gap:6px; margin-top:12px;}

/* ---------- Gallery ---------- */
.gallery-filter{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:30px;}
.gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
@media (max-width:900px){ .gallery-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .gallery-grid{grid-template-columns:1fr;} }
.gallery-item{position:relative; border-radius:14px; overflow:hidden; aspect-ratio:4/5; box-shadow:var(--shadow);}
.gallery-item img{width:100%; height:100%; object-fit:cover; transition:transform .3s;}
.gallery-item:hover img{transform:scale(1.06);}
.gallery-cap{
  position:absolute; inset:auto 0 0 0; padding:16px 14px 12px; color:#fff; font-size:13px; font-weight:700;
  background:linear-gradient(0deg, rgba(0,0,0,.85), transparent);
}

/* ---------- AFCON page ---------- */
.afcon-hero{
  background:linear-gradient(135deg, var(--green) 0%, #003c2b 60%, var(--black) 100%);
  color:#fff; padding:90px 0 70px; position:relative; overflow:hidden;
}
.afcon-hero .container{position:relative;}
.countdown{display:flex; gap:16px; margin-top:30px; flex-wrap:wrap;}
.countdown .box{background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); border-radius:14px; padding:16px 20px; text-align:center; min-width:88px;}
.countdown .box strong{display:block; font-family:var(--font-mono); font-size:30px; color:var(--gold);}
.countdown .box span{font-size:11px; text-transform:uppercase; letter-spacing:.08em;}

.stadium-card{background:#fff; border-radius:16px; overflow:hidden; box-shadow:var(--shadow);}
.stadium-img{height:170px; background-size:cover; background-position:center;}
.stadium-body{padding:20px;}
.stadium-body h3{font-size:18px; margin-bottom:4px;}
.stadium-cap{font-size:13px; color:#8a847b; font-weight:700; margin-bottom:10px;}

/* ---------- Footer ---------- */
.site-footer{background:var(--black); color:#cfcbc4; padding:60px 0 24px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px;}
@media (max-width:800px){ .footer-grid{grid-template-columns:1fr 1fr;} }
.site-footer h4{color:#fff; font-size:14px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:16px;}
.site-footer a{color:#cfcbc4; font-size:14px; line-height:2.1;}
.site-footer a:hover{color:var(--gold);}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12); margin-top:40px; padding-top:20px; font-size:13px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; color:#948f88;}
.footer-flag-strip{height:6px; width:100%; background:linear-gradient(90deg,#000 0 33%, var(--red) 33% 66%, var(--green) 66% 100%);}

/* ---------- Misc ---------- */
.text-center{text-align:center;}
.mt-0{margin-top:0;}
.stat-strip{display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; background:var(--black); color:#fff; border-radius:20px; padding:36px 40px;}
.stat-strip div{text-align:center; flex:1; min-width:130px;}
.stat-strip strong{display:block; font-family:var(--font-mono); font-size:34px; color:var(--gold);}
.stat-strip span{font-size:12.5px; text-transform:uppercase; letter-spacing:.07em; color:#c9c5bf;}

/* ==========================================================
   Admin CMS shell
   ========================================================== */
.admin-body{background:var(--cream);}
.admin-shell{display:flex; min-height:100vh;}
.admin-sidebar{
  width:250px; flex-shrink:0; background:var(--black); color:#fff;
  padding:24px 20px; position:sticky; top:0; height:100vh; overflow-y:auto;
}
.admin-sidebar .brand small{display:block; font-size:9px;}
.admin-nav{display:flex; flex-direction:column; gap:4px;}
.admin-nav a{
  padding:11px 14px; border-radius:10px; font-size:14px; font-weight:600; color:#d8d5cf;
}
.admin-nav a:hover{background:rgba(255,255,255,.08); color:#fff;}
.admin-nav a.active{background:var(--red); color:#fff;}
.admin-nav-divider{height:1px; background:rgba(255,255,255,.15); margin:14px 4px;}

.admin-main{flex:1; padding:32px 40px; min-width:0;}
.admin-topbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; flex-wrap:wrap; gap:10px;}
.admin-topbar h1{font-size:26px; margin:0;}
.admin-whoami{font-size:13.5px; color:#5b564f;}

@media (max-width:900px){
  .admin-shell{flex-direction:column;}
  .admin-sidebar{width:100%; height:auto; position:relative;}
  .admin-nav{flex-direction:row; flex-wrap:wrap;}
  .admin-main{padding:24px 18px;}
}

/* Admin cards / stat tiles */
.admin-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:32px;}
@media (max-width:900px){ .admin-stats{grid-template-columns:repeat(2,1fr);} }
.admin-stat{background:#fff; border-radius:14px; padding:22px; box-shadow:var(--shadow); border-top:4px solid var(--red);}
.admin-stat:nth-child(2){border-top-color:var(--green);}
.admin-stat:nth-child(3){border-top-color:var(--gold);}
.admin-stat:nth-child(4){border-top-color:var(--black);}
.admin-stat strong{display:block; font-family:var(--font-mono); font-size:30px;}
.admin-stat span{font-size:12.5px; color:#8a847b; text-transform:uppercase; letter-spacing:.06em;}

.admin-panel{background:#fff; border-radius:16px; box-shadow:var(--shadow); padding:26px; margin-bottom:26px;}
.admin-panel h2{font-size:18px; margin-bottom:18px;}

/* Data table */
.admin-table{width:100%; border-collapse:collapse; font-size:14px;}
.admin-table th{
  text-align:left; padding:10px 12px; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em;
  color:#8a847b; border-bottom:2px solid #eee;
}
.admin-table td{padding:12px; border-bottom:1px solid #f0ede8; vertical-align:middle;}
.admin-table tr:hover td{background:#faf9f6;}
.admin-table img.thumb{width:46px; height:46px; object-fit:cover; border-radius:8px;}
.admin-table .actions{display:flex; gap:8px; flex-wrap:wrap;}

.admin-table th.sortable{
  cursor:pointer; user-select:none; white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}
.admin-table th.sortable:hover{color:var(--red);}
.admin-table th.sortable .sort-icon{
  display:inline-block; margin-left:5px; font-size:9px; letter-spacing:0;
  color:#c9c3b8; vertical-align:middle;
}
.admin-table th.sortable[aria-sort="ascending"],
.admin-table th.sortable[aria-sort="descending"]{ color:var(--text); }
.admin-table th.sortable[aria-sort="ascending"] .sort-icon,
.admin-table th.sortable[aria-sort="descending"] .sort-icon{ color:var(--red); }
.admin-table tr.no-results-row td{
  text-align:center; padding:26px 12px; color:#8a847b; font-style:italic;
}

.pill-yes{background:#e6f5ee; color:#00543C; font-size:11px; font-weight:800; padding:4px 10px; border-radius:999px; text-transform:uppercase;}
.pill-no{background:#fdeceb; color:#8C0C1A; font-size:11px; font-weight:800; padding:4px 10px; border-radius:999px; text-transform:uppercase;}
.pill-admin{background:#f3ebd0; color:#7a5c05; font-size:11px; font-weight:800; padding:4px 10px; border-radius:999px; text-transform:uppercase;}

.btn-xs{padding:6px 14px; font-size:12px; border-radius:999px;}
.btn-danger{background:#fff; border:1.5px solid var(--red); color:var(--red);}
.btn-danger:hover{background:var(--red); color:#fff;}

.admin-form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:700px){ .admin-form-grid{grid-template-columns:1fr;} }
.settings-group{margin-bottom:34px;}
.settings-group h3{font-size:15px; text-transform:uppercase; letter-spacing:.05em; color:var(--red); margin-bottom:16px; padding-bottom:8px; border-bottom:2px solid #f0ede8;}

.export-toolbar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid #f0ede8;}

/* ---------- Referral program ---------- */
.referral-card{
  background:#fff; border-radius:var(--radius); padding:32px;
  box-shadow:var(--shadow); border-top:4px solid var(--gold);
}
.referral-card h3{font-size:22px; margin-bottom:6px;}
.referral-card > p{color:#5b564f; font-size:15px; margin-bottom:22px;}
.referral-code-box{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--cream); border-radius:12px; padding:16px 20px; margin-bottom:18px;
}
.referral-code-box strong{
  font-family:var(--font-mono); font-size:22px; letter-spacing:.08em; color:var(--black);
}
.referral-link-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px;}
.referral-link-row input{
  flex:1; min-width:220px; padding:12px 14px; border-radius:10px; border:1.5px solid #ddd8d0;
  font-family:var(--font-mono); font-size:13px; background:#fff; color:var(--text);
}
.referral-progress-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; font-size:14px; font-weight:700;}
.referral-progress-head span:last-child{color:var(--green); font-family:var(--font-mono);}
.referral-progress{background:#f0ede8; border-radius:999px; height:14px; overflow:hidden;}
.referral-progress-fill{height:100%; background:linear-gradient(90deg, var(--green), var(--green-bright)); border-radius:999px; transition:width .4s ease;}
.referral-goal-banner{
  margin-top:22px; padding:20px; border-radius:12px; background:#fff8e6; border:1px solid #f3e2ac;
}
.referral-goal-banner.claimed{background:#e6f5ee; border-color:#b9e3cd;}
.referral-goal-banner h4{margin:0 0 10px; font-size:16px;}
.referral-goal-banner .field-row{display:flex; gap:10px; flex-wrap:wrap;}
.referral-goal-banner input[type="text"]{
  flex:1; min-width:200px; padding:12px 14px; border-radius:10px; border:1.5px solid #ddd8d0; font-size:15px;
}