/* ═══════════════════════════════════════════
   THEME VARIABLES
   ═══════════════════════════════════════════ */

/* ── Light theme (default) ── */
:root,
[data-theme="light"]{
  --bg:#ffffff;
  --surface:#ffffff;
  --card:#ffffff;
  --text:#1a1a2e;
  --muted:rgba(26,26,46,.60);
  --brand:#9a7b2e;
  --brand2:#7a6120;
  --brand3:#1a1a2e;
  --border:rgba(160,133,53,.20);
  --shadow:0 8px 30px rgba(0,0,0,.07);
  --radius:14px;
  --radius2:20px;
  --header-bg:rgba(255,255,255,.95);
  --nav-overlay:rgba(255,255,255,.99);
  --card-bg:#ffffff;
  --panel-bg:linear-gradient(180deg, #ffffff, #ffffff);
  --input-bg:#ffffff;
  --stat-bg:#ffffff;
  --table-head-bg:#ffffff;
  --footer-bg:#ffffff;
  --btn-bg:#ffffff;
  --btn-hover:rgba(0,0,0,.04);
  --btn-active:rgba(0,0,0,.08);
  --pill-bg:#ffffff;
  --pill-hover:rgba(0,0,0,.04);
  --pill-text:rgba(26,26,46,.88);
  --nav-text:rgba(26,26,46,.85);
  --nav-hover:rgba(0,0,0,.05);
  --nav-active-bg:linear-gradient(135deg, rgba(200,162,78,.18), rgba(160,133,53,.12));
  --nav-active-border:rgba(154,123,46,.40);
  --alert-bg:#ffffff;
  --fig-bg:#ffffff;
  --skip-bg:rgba(0,0,0,.06);
  --focus-ring:rgba(154,123,46,.18);
  --primary-btn-text:#ffffff;
  --table-wrap-bg:#ffffff;
  --footer-strong:rgba(26,26,46,.90);
  --body-grad1:transparent;
  --body-grad2:transparent;
  --body-grad3:transparent;
  --ref-underline:rgba(0,0,0,.35);
  color-scheme:light;
}

/* ── Dark theme ── */
[data-theme="dark"]{
  --bg:#0b0f1a;
  --surface:#101829;
  --card:#151e30;
  --text:#e8ecf4;
  --muted:rgba(232,236,244,.68);
  --brand:#c8a24e;
  --brand2:#a08535;
  --brand3:#e8ecf4;
  --border:rgba(200,162,78,.18);
  --shadow:0 16px 40px rgba(0,0,0,.45);
  --header-bg:rgba(11,15,26,.82);
  --nav-overlay:rgba(11,15,26,.96);
  --card-bg:rgba(255,255,255,.045);
  --panel-bg:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  --input-bg:rgba(0,0,0,.18);
  --stat-bg:rgba(0,0,0,.18);
  --table-head-bg:rgba(11,15,26,.92);
  --footer-bg:rgba(11,15,26,.65);
  --btn-bg:rgba(255,255,255,.06);
  --btn-hover:rgba(255,255,255,.09);
  --btn-active:rgba(255,255,255,.12);
  --pill-bg:rgba(255,255,255,.05);
  --pill-hover:rgba(255,255,255,.08);
  --pill-text:rgba(234,240,255,.92);
  --nav-text:rgba(244,255,249,.92);
  --nav-hover:rgba(255,255,255,.07);
  --nav-active-bg:linear-gradient(135deg, rgba(200,162,78,.25), rgba(160,133,53,.18));
  --nav-active-border:rgba(200,162,78,.45);
  --alert-bg:rgba(255,255,255,.05);
  --fig-bg:rgba(0,0,0,.18);
  --skip-bg:rgba(255,255,255,.12);
  --focus-ring:rgba(200,162,78,.14);
  --primary-btn-text:#0b0f1a;
  --table-wrap-bg:rgba(0,0,0,.12);
  --footer-strong:rgba(234,240,255,.95);
  --body-grad1:rgba(200,162,78,.12);
  --body-grad2:rgba(160,133,53,.08);
  --body-grad3:rgba(200,162,78,.05);
  --ref-underline:rgba(255,255,255,.55);
  color-scheme:dark;
}

/* ═══════════════════════════════════════════
   BASE STYLES
   ═══════════════════════════════════════════ */
*{box-sizing:border-box}
html{height:100%; -webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100%;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 800px at 12% 0%, var(--body-grad1), transparent 58%),
    radial-gradient(950px 780px at 92% 10%, var(--body-grad2), transparent 62%),
    radial-gradient(900px 700px at 55% 105%, var(--body-grad3), transparent 60%),
    var(--bg);
  color:var(--text);
  line-height:1.55;
  overflow-x:hidden;
  transition: background-color .3s ease, color .3s ease;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.container{width:min(1100px, 92vw); margin-inline:auto}

/* ── Skip link ── */
.skip-link{
  position:absolute; left:-999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:16px; top:16px; width:auto; height:auto;
  padding:10px 12px; border-radius:12px;
  background:var(--skip-bg); border:1px solid var(--border);
}

/* ═══════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════ */
header.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: var(--header-bg);
  border-bottom:1px solid var(--border);
  transition: background .3s ease;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
  gap:16px;
}
.brand{
  display:flex; align-items:center; gap:12px;
  min-width:0; flex-shrink:0;
}
.brand img{
  width:168px;
  height:auto;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.30));
}
.brand .tagline{
  font-size:12px; color:var(--muted);
  display:none;
}

/* ── Language switcher ── */
.lang-switcher{
  display:flex;
  gap:4px;
  flex-shrink:0;
  margin-left:auto;
  order:10;
}
.lang-btn{
  display:flex; align-items:center; gap:4px;
  background:none;
  border:1px solid var(--border);
  border-radius:8px;
  padding:4px 8px;
  cursor:pointer;
  color:var(--text);
  font-size:11px;
  font-weight:600;
  letter-spacing:.02em;
  transition:.2s ease;
  -webkit-tap-highlight-color:transparent;
  opacity:.7;
}
.lang-btn img{
  border-radius:2px;
  display:block;
}
.lang-btn span{
  display:block;
}
.lang-btn:hover{
  background:var(--nav-hover);
  opacity:1;
}
.lang-btn.active{
  border-color:var(--brand);
  background:rgba(154,123,46,.10);
  opacity:1;
}

/* ── Theme toggle ── */
.theme-toggle{
  background:none;
  border:1px solid var(--border);
  border-radius:10px;
  width:40px; height:40px;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  color:var(--text);
  font-size:18px;
  transition:.2s ease;
  -webkit-tap-highlight-color:transparent;
}
.theme-toggle:hover{background:var(--nav-hover)}
.theme-toggle .icon-sun{display:inline}
.theme-toggle .icon-moon{display:none}
[data-theme="dark"] .theme-toggle .icon-sun{display:none}
[data-theme="dark"] .theme-toggle .icon-moon{display:inline}

/* ── Hamburger toggle ── */
.nav-toggle{
  display:none;
  background:none; border:1px solid var(--border);
  border-radius:10px;
  width:44px; height:44px;
  cursor:pointer;
  position:relative;
  flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
}
.hamburger,
.hamburger::before,
.hamburger::after{
  display:block;
  width:22px; height:2px;
  background:var(--text);
  border-radius:2px;
  position:absolute;
  left:50%; transform:translateX(-50%);
  transition:.25s ease;
}
.hamburger{top:50%; margin-top:-1px}
.hamburger::before{content:''; top:-7px; left:0; width:22px; transform:none}
.hamburger::after{content:''; top:7px; left:0; width:22px; transform:none}
.nav-toggle.open .hamburger{background:transparent}
.nav-toggle.open .hamburger::before{top:0; transform:rotate(45deg)}
.nav-toggle.open .hamburger::after{top:0; transform:rotate(-45deg)}

/* ═══════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════ */
.main-nav{}
nav .nav-row{
  display:flex; gap:8px; flex-wrap:wrap;
  justify-content:flex-end;
}
.nav-link{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px;
  border:1px solid transparent;
  border-radius:999px;
  color:var(--nav-text);
  font-size:14px;
  transition:.18s ease;
  -webkit-tap-highlight-color:transparent;
}
.nav-link:hover{
  background:var(--nav-hover);
  border-color:var(--border);
  transform: translateY(-1px);
}
.nav-link.active{
  background:var(--nav-active-bg);
  border-color:var(--nav-active-border);
}

/* ═══════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════ */
.hero{
  padding:42px 0 18px;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:18px;
  align-items:stretch;
}
.panel{
  background: var(--panel-bg);
  border:1px solid var(--border);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  transition: background .3s ease, box-shadow .3s ease;
}
.panel.pad{padding:22px}
.hero h1{margin:0 0 10px; font-size:32px; letter-spacing:-0.02em}
.hero p{margin:0 0 14px; color:var(--muted)}

/* ═══════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════ */
.cta-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 14px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--btn-bg);
  color:var(--text);
  transition:.18s ease;
  font-weight:600;
  font-size:14px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  text-align:center;
}
.btn:hover{transform: translateY(-2px); background:var(--btn-hover)}
.btn:active{transform: translateY(0)}
.btn.primary{
  border-color: rgba(154,123,46,.45);
  background: linear-gradient(135deg, #9a7b2e, #7a6120);
  color:#ffffff;
}
[data-theme="dark"] .btn.primary{
  border-color: rgba(200,162,78,.55);
  background: linear-gradient(135deg, rgba(200,162,78,.85), rgba(160,133,53,.60));
  color:#0b0f1a;
}

/* ═══════════════════════════════════════════
   STATS
   ═══════════════════════════════════════════ */
.stats{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:10px;
}
.stat{
  padding:14px;
  border-radius:14px;
  background: var(--stat-bg);
  border:1px solid var(--border);
  transition: background .3s ease;
}
.stat .k{font-size:13px; color:var(--muted)}
.stat .v{font-size:20px; font-weight:800; margin-top:4px}

/* ═══════════════════════════════════════════
   MAIN / GRID
   ═══════════════════════════════════════════ */
main{padding:18px 0 44px}
.grid-2{display:grid; grid-template-columns: 1fr 1fr; gap:16px}

/* ═══════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════ */
.card{
  background: var(--card-bg);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:18px;
  transition: background .3s ease, box-shadow .3s ease;
}
.card{
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
[data-theme="dark"] .card{
  box-shadow: none;
}
.card .media{
  border-radius: 14px;
  overflow:hidden;
  border:1px solid var(--border);
  background: var(--fig-bg);
  margin: 10px 0 12px;
}
.card .media img{display:block; width:100%; height:auto}
.card h2,.card h3{margin:0 0 10px}
.card p{margin:0 0 10px; color:var(--muted)}

/* ═══════════════════════════════════════════
   PILLS
   ═══════════════════════════════════════════ */
.pill-grid{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background: var(--pill-bg);
  color: var(--pill-text);
  font-size:14px;
  -webkit-tap-highlight-color:transparent;
}
.pill:hover{
  background: var(--pill-hover);
  transform: translateY(-1px);
}

/* ── Two column ── */
.two-col{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:16px;
}

/* ── Lists ── */
.list{margin:0; padding-left:18px; color:var(--muted)}
.list li{margin:6px 0}

/* ── Page titles ── */
.page-title{margin:10px 0 14px; font-size:28px}
.breadcrumbs{color:var(--muted); font-size:13px; margin-bottom:12px}

/* ═══════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════ */
form .row{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
label{display:block; font-weight:650; margin:10px 0 6px; font-size:14px}
input,select,textarea{
  width:100%;
  padding:12px 12px;
  border-radius: 12px;
  border:1px solid var(--border);
  background: var(--input-bg);
  color: var(--text);
  outline:none;
  font-size:16px;
  -webkit-appearance:none;
  transition: background .3s ease, border-color .2s ease;
}
textarea{min-height:120px; resize:vertical}
input:focus,select:focus,textarea:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--focus-ring);
}
.help{font-size:12px; color:var(--muted); margin-top:6px}
.form-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.required{color:#c0392b; font-weight:700}

/* Phone input group */
.phone-input-group{display:flex; gap:6px}
.phone-code-select{width:180px; flex-shrink:0}
.phone-input-group input{flex:1; min-width:0}

/* Date of birth group */
.dob-group{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px}

/* Photo upload */
.photo-upload-area{
  position:relative;
  border:2px dashed var(--border);
  border-radius:var(--radius);
  padding:20px;
  text-align:center;
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
  min-height:160px;
  display:flex; align-items:center; justify-content:center;
}
.photo-upload-area:hover,.photo-upload-area.drag-over{
  border-color:var(--brand);
  background:var(--focus-ring);
}
.photo-input{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; cursor:pointer; z-index:2;
}
.photo-placeholder{display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--muted)}
.photo-placeholder svg{opacity:.5}
.photo-preview{
  max-width:140px; max-height:140px;
  border-radius:10px; object-fit:cover;
}

/* ═══════════════════════════════════════════
   MEMBERSHIP ID CARD (on-page display)
   ═══════════════════════════════════════════ */
.id-card-section{padding:0; overflow:hidden}
.id-card-section:hover{transform:none}
.id-card{
  position:relative;
  max-width:600px;
  margin:0 auto;
  background:#fff;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 4px 24px rgba(0,0,0,.12);
  border:2px solid #9a7b2e;
}
.id-card-watermark{
  position:absolute;
  top:50%; left:50%;
  width:280px; height:280px;
  transform:translate(-50%,-50%);
  opacity:.05;
  pointer-events:none;
  z-index:0;
}
.id-card-header{
  text-align:center;
  padding:24px 20px 16px;
  position:relative; z-index:1;
  border-bottom:3px solid #9a7b2e;
}
.id-card-logo{
  width:64px; height:64px;
  object-fit:contain;
  margin-bottom:6px;
}
.id-card-org{
  font-size:18px;
  font-weight:800;
  color:#1a1a2e;
  letter-spacing:.5px;
  text-transform:uppercase;
}
.id-card-motto{
  font-size:11px;
  font-style:italic;
  color:#9a7b2e;
  letter-spacing:2px;
  margin-top:2px;
}
.id-card-accent{
  height:4px;
  background:linear-gradient(90deg,#9a7b2e,#c8a24e,#9a7b2e);
}
.id-card-title-bar{
  text-align:center;
  font-size:13px;
  font-weight:700;
  color:#fff;
  background:#1a1a2e;
  padding:8px 0;
  letter-spacing:3px;
  text-transform:uppercase;
  position:relative; z-index:1;
}
.id-card-body{
  display:flex;
  gap:24px;
  padding:24px 28px 20px;
  position:relative; z-index:1;
}
.id-card-photo-col{flex-shrink:0}
.id-card-photo{
  width:110px; height:130px;
  object-fit:cover;
  border:2px solid #9a7b2e;
  border-radius:6px;
}
.id-card-details-col{flex:1; min-width:0}
.id-card-field{margin-bottom:12px}
.id-card-label{
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1.5px;
  color:#9a7b2e;
  margin-bottom:1px;
}
.id-card-value{
  font-size:14px;
  font-weight:600;
  color:#1a1a2e;
  padding-bottom:5px;
  border-bottom:1px solid rgba(154,123,46,.25);
}
.id-card-badge{
  display:inline-block;
  background:#1a1a2e;
  color:#c8a24e;
  font-size:17px;
  font-weight:800;
  letter-spacing:3px;
  padding:6px 16px;
  border-radius:5px;
}
.id-card-footer{
  text-align:center;
  font-size:9px;
  color:#888;
  padding:12px 20px 16px;
  border-top:2px solid #9a7b2e;
  position:relative; z-index:1;
}
.id-card-footer strong{color:#1a1a2e}
.id-card-date{font-size:10px; color:#666; margin-top:4px; display:inline-block}
.id-card-email-notice{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:16px;
  padding:14px 20px;
  background:var(--focus-ring);
  border:1px solid var(--border);
  border-radius:var(--radius);
  font-size:14px;
  color:var(--text);
}
.id-card-email-notice svg{flex-shrink:0; color:#9a7b2e}

/* ═══════════════════════════════════════════
   ADMIN PANEL
   ═══════════════════════════════════════════ */
.admin-layout{display:flex; gap:0; min-height:60vh}
.admin-sidebar{
  width:220px; flex-shrink:0;
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--radius) 0 0 var(--radius);
  padding:20px 0;
  display:flex; flex-direction:column;
}
.admin-sidebar-title{
  font-size:14px; font-weight:800; text-transform:uppercase;
  letter-spacing:2px; color:var(--brand);
  padding:0 20px 14px; border-bottom:1px solid var(--border);
}
.admin-nav{flex:1; padding:10px 0}
.admin-nav-link{
  display:block; padding:10px 20px;
  font-size:14px; font-weight:600;
  color:var(--text); text-decoration:none;
  transition:background .15s ease;
}
.admin-nav-link:hover{background:var(--btn-hover)}
.admin-nav-link.active{
  background:var(--nav-active-bg);
  border-left:3px solid var(--brand);
  color:var(--brand);
}
.admin-sidebar-footer{padding:14px 20px; border-top:1px solid var(--border)}
.admin-sidebar-footer .btn{width:100%; text-align:center}
.admin-main{
  flex:1; min-width:0;
  padding:20px 24px;
  border:1px solid var(--border);
  border-left:none;
  border-radius:0 var(--radius) var(--radius) 0;
  background:var(--card-bg);
}
.admin-stats{display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:14px; margin-bottom:20px}
.admin-stat{
  padding:18px 16px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  text-align:center;
}
.admin-stat-num{font-size:28px; font-weight:800; color:var(--brand)}
.admin-stat-label{font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin-top:4px}
.admin-table{width:100%; border-collapse:collapse}
.admin-table th{
  text-align:left; padding:10px 12px;
  border-bottom:2px solid var(--border);
  font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.5px;
  color:var(--muted);
}
.admin-table td{
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  font-size:14px;
}
.admin-table tr:hover td{background:var(--btn-hover)}
.admin-actions{display:flex; gap:6px; flex-wrap:wrap}
.admin-actions .btn{font-size:12px; padding:5px 10px}
.rcpt-filter{font-size:12px !important; padding:5px 12px !important}
.rcpt-filter.active{background:var(--brand) !important; color:#fff !important; border-color:var(--brand) !important}
.rcpt-item:last-child{border-bottom:none}
.pill{
  display:inline-block; padding:3px 10px;
  border-radius:20px; font-size:12px; font-weight:600;
  border:1px solid transparent;
}
.pill-green{background:rgba(6,214,160,.10); border-color:rgba(6,214,160,.35); color:#06d6a0}
.pill-red{background:rgba(239,71,111,.12); border-color:rgba(239,71,111,.35); color:#ef476f}
.pill-blue{background:rgba(17,138,178,.12); border-color:rgba(17,138,178,.35); color:#118ab2}
.admin-photo-thumb{width:40px; height:40px; border-radius:50%; object-fit:cover; border:1px solid var(--border)}
.confirm-delete{background:rgba(239,71,111,.08); border:1px solid rgba(239,71,111,.3); border-radius:var(--radius); padding:16px; margin-bottom:14px}

@media(max-width:768px){
  .admin-layout{flex-direction:column}
  .admin-sidebar{
    width:100%;
    border-radius:var(--radius) var(--radius) 0 0;
    padding:14px 0;
  }
  .admin-nav{display:flex; flex-wrap:wrap; gap:0; padding:6px 10px}
  .admin-nav-link{padding:8px 12px; font-size:13px}
  .admin-main{
    border-left:1px solid var(--border);
    border-top:none;
    border-radius:0 0 var(--radius) var(--radius);
    padding:16px;
  }
  .admin-table{font-size:13px}
  .admin-table th,.admin-table td{padding:8px 6px}
}

/* ═══════════════════════════════════════════
   TOOLBAR
   ═══════════════════════════════════════════ */
.toolbar{
  display:grid;
  grid-template-columns: 1.2fr .8fr .8fr;
  gap:10px;
  align-items:end;
}

/* ═══════════════════════════════════════════
   DATA TABLE
   ═══════════════════════════════════════════ */
.table-wrap{
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--border);
  border-radius:14px;
  background: var(--table-wrap-bg);
}
.data-table{
  width:100%;
  border-collapse:collapse;
  min-width:900px;
}
.data-table th,.data-table td{
  text-align:left;
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  vertical-align:top;
}
.data-table thead th{
  position:sticky;
  top:0;
  backdrop-filter: blur(6px);
  background: var(--table-head-bg);
}

/* ── Ref link ── */
.ref-link{
  color: var(--brand3);
  text-decoration: underline;
  text-decoration-color: var(--ref-underline);
}

/* ═══════════════════════════════════════════
   ALERTS
   ═══════════════════════════════════════════ */
.alert{
  padding:12px 14px;
  border-radius: 14px;
  border:1px solid var(--border);
  background: var(--alert-bg);
  margin:14px 0;
  word-break:break-word;
}
.alert.success{border-color: rgba(6, 214, 160, .55); background: rgba(6, 214, 160, .10)}
.alert.error{border-color: rgba(239, 71, 111, .55); background: rgba(239, 71, 111, .10)}

/* ═══════════════════════════════════════════
   FIGURES / IMAGES
   ═══════════════════════════════════════════ */
.fig{
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--border);
  background:var(--fig-bg);
  margin:12px 0;
}
.fig img{display:block; width:100%; max-width:100%; height:auto; object-fit:cover}
.fig figcaption{
  padding:10px 14px;
  font-size:13px;
  color:var(--muted);
  border-top:1px solid var(--border);
}
.fig-hero{max-height:320px; overflow:hidden}
.fig-hero img{height:320px; object-fit:cover}

/* ═══════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════ */
footer.site-footer{
  border-top:1px solid var(--border);
  background: var(--footer-bg);
  padding:22px 0;
  color: var(--muted);
  transition: background .3s ease;
}
.footer-grid{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
.footer-grid strong{color: var(--footer-strong)}

/* ═══════════════════════════════════════════
   RESPONSIVE — Tablet (max-width: 900px)
   ═══════════════════════════════════════════ */
@media (max-width: 900px){
  .hero-grid{grid-template-columns: 1fr}
  .grid-2{grid-template-columns: 1fr}
  .two-col{grid-template-columns:1fr}
  .brand img{width:130px}
  .hero h1{font-size:26px}
  .page-title{font-size:24px}

  .nav-toggle{display:flex; align-items:center; justify-content:center}

  .main-nav{
    display:none;
    position:absolute;
    top:100%; left:0; right:0;
    background:var(--nav-overlay);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border);
    padding:12px 0;
    box-shadow: 0 20px 40px rgba(0,0,0,.25);
  }
  .main-nav.open{display:block}

  nav .nav-row{
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    padding:0 5vw;
  }
  .nav-link{
    border-radius:12px;
    padding:12px 16px;
    font-size:15px;
    justify-content:flex-start;
  }
  .nav-link:hover{transform:none}

  .stats{grid-template-columns: repeat(2, 1fr)}
  .toolbar{grid-template-columns: 1fr 1fr}

  .fig-hero{max-height:240px}
  .fig-hero img{height:240px}

  .footer-grid{flex-direction:column; gap:14px; text-align:center}
}

/* ═══════════════════════════════════════════
   RESPONSIVE — Mobile (max-width: 650px)
   ═══════════════════════════════════════════ */
@media (max-width: 650px){
  .container{width:94vw}

  .header-inner{padding:10px 0}
  .brand img{width:110px}

  .hero{padding:24px 0 12px}
  .hero h1{font-size:22px}
  .panel.pad{padding:16px}

  .page-title{font-size:20px}

  .card{padding:14px; border-radius:12px}

  form .row{grid-template-columns: 1fr}
  .phone-code-select{width:140px}
  .dob-group{grid-template-columns:1fr 1fr 1fr}
  .toolbar{grid-template-columns: 1fr}

  .btn{padding:12px 16px; width:100%; justify-content:center; font-size:15px}
  .cta-row{flex-direction:column}

  .pill{padding:8px 12px; font-size:13px}
  .pill-grid{gap:8px}

  .hero-grid .panel:first-child{order:1}
  .hero-grid .panel:last-child{order:2}

  .stats{grid-template-columns: 1fr 1fr; gap:8px}
  .stat{padding:12px; text-align:center}
  .stat .v{font-size:18px}

  .fig-hero{max-height:200px}
  .fig-hero img{height:200px}
  .fig figcaption{padding:8px 12px; font-size:12px}

  .alert{padding:10px 12px; border-radius:12px; font-size:14px}

  .data-table{min-width:600px}
  .data-table th,.data-table td{padding:8px 10px; font-size:13px}

  .footer-grid{font-size:14px}

  .theme-toggle{width:36px; height:36px; font-size:16px}

  .lang-btn span{display:none}
  .lang-btn{padding:4px 6px}
}

/* ═══════════════════════════════════════════
   RESPONSIVE — Small phones (max-width: 400px)
   ═══════════════════════════════════════════ */
@media (max-width: 400px){
  .container{width:96vw}
  .brand img{width:90px}
  .hero h1{font-size:19px}
  .page-title{font-size:18px}
  .panel.pad{padding:12px}
  .card{padding:12px}
  .stats{grid-template-columns: 1fr 1fr}
  .stat{padding:10px}
  .stat .k{font-size:11px}
  .stat .v{font-size:16px}
  .fig-hero{max-height:160px}
  .fig-hero img{height:160px}
}

/* ═══════════════════════════════════════════
   TOUCH & ACCESSIBILITY
   ═══════════════════════════════════════════ */
@media (hover: none){
  .nav-link:hover,
  .btn:hover,
  .pill:hover{
    transform:none;
    background:inherit;
  }
  .btn:active{background:var(--btn-active)}
  .btn.primary:active{
    background: linear-gradient(135deg, rgba(200,162,78,.95), rgba(160,133,53,.70));
  }
  .nav-link:active{background:var(--nav-hover)}
  .pill:active{background:var(--pill-hover)}
}

/* ═══════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════ */
@keyframes fadeInUp{
  from{opacity:0; transform:translateY(24px)}
  to{opacity:1; transform:translateY(0)}
}
@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}
@keyframes slideInLeft{
  from{opacity:0; transform:translateX(-30px)}
  to{opacity:1; transform:translateX(0)}
}
@keyframes slideInRight{
  from{opacity:0; transform:translateX(30px)}
  to{opacity:1; transform:translateX(0)}
}
@keyframes scaleIn{
  from{opacity:0; transform:scale(.92)}
  to{opacity:1; transform:scale(1)}
}
@keyframes countPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.08)}
}

/* Scroll-triggered animations */
.anim{opacity:0; transition: none}
.anim.anim-visible{animation-fill-mode:both}
.anim-fade-up.anim-visible{animation:fadeInUp .6s ease both}
.anim-fade-in.anim-visible{animation:fadeIn .5s ease both}
.anim-slide-left.anim-visible{animation:slideInLeft .6s ease both}
.anim-slide-right.anim-visible{animation:slideInRight .6s ease both}
.anim-scale.anim-visible{animation:scaleIn .5s ease both}

/* Stagger delays */
.anim-d1{animation-delay:.1s !important}
.anim-d2{animation-delay:.2s !important}
.anim-d3{animation-delay:.3s !important}
.anim-d4{animation-delay:.4s !important}
.anim-d5{animation-delay:.5s !important}

/* Hero-specific animations (play on load, not scroll) */
.hero-anim-title{animation:fadeInUp .7s ease .1s both}
.hero-anim-text{animation:fadeInUp .7s ease .25s both}
.hero-anim-img{animation:scaleIn .7s ease .35s both}
.hero-anim-cta{animation:fadeInUp .6s ease .5s both}
.hero-anim-stats{animation:fadeIn .6s ease .3s both}

/* Stat hover pulse */
.stat{transition: background .3s ease, transform .2s ease}
.stat:hover{transform:scale(1.04)}

/* Card hover lift */
.card{transition: background .3s ease, box-shadow .3s ease, transform .25s ease}
.card:hover{transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.10)}
[data-theme="dark"] .card:hover{box-shadow:0 8px 24px rgba(0,0,0,.30)}

/* Image hover zoom */
.fig img{transition:transform .4s ease}
.fig:hover img{transform:scale(1.03)}

/* Button shimmer on primary */
.btn.primary{position:relative; overflow:hidden}
.btn.primary::after{
  content:'';
  position:absolute; top:0; left:-100%; width:60%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.20), transparent);
  transition:none;
}
.btn.primary:hover::after{
  left:120%;
  transition:left .6s ease;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
  .anim{opacity:1}
  .fig:hover img{transform:none}
  .card:hover{transform:none}
  .stat:hover{transform:none}
}

/* ═══════════════════════════════════════════
   EVENTS
   ═══════════════════════════════════════════ */
.events-timeline{
  display:flex; flex-direction:column;
  gap:24px; max-width:820px; margin:0 auto;
}
.event-card{
  border:1px solid var(--border);
  border-left:4px solid var(--event-color, var(--brand));
  border-radius:var(--radius);
  background:var(--card-bg);
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}
.event-card:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(0,0,0,.10);
}
.event-card-ribbon{
  display:inline-block;
  background:var(--event-color, var(--brand));
  color:#fff; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:1.5px;
  padding:5px 16px;
  border-radius:0 0 var(--radius) 0;
}
.event-card-header{
  display:flex; gap:16px; align-items:flex-start;
  padding:20px 24px 0;
}
.event-card-icon{flex-shrink:0; margin-top:2px}
.event-card-title{
  font-size:20px; font-weight:800;
  margin:0 0 8px; color:var(--text);
}
.event-card-meta{
  display:flex; flex-wrap:wrap; gap:14px;
  font-size:13px; color:var(--muted);
}
.event-meta-item{
  display:inline-flex; align-items:center; gap:5px;
}
.event-meta-item svg{flex-shrink:0; opacity:.6}
.event-card-body{
  padding:16px 24px;
  font-size:14px; line-height:1.75;
}
.event-card-body p{margin:0 0 12px}
.event-card-highlights{
  background:var(--alert-bg);
  border:1px solid var(--border);
  border-radius:10px;
  padding:14px 18px;
}
.event-card-highlights strong{
  display:block; font-size:13px;
  color:var(--brand); margin-bottom:6px;
}
.event-card-highlights ul{
  margin:0; padding-left:18px;
  font-size:13px; line-height:1.8;
}
.event-card-footer{
  display:flex; align-items:center; gap:10px;
  flex-wrap:wrap;
  padding:0 24px 20px;
}

@media(max-width:600px){
  .event-card-header{flex-direction:column; gap:10px; padding:16px 16px 0}
  .event-card-body{padding:12px 16px}
  .event-card-footer{padding:0 16px 16px}
  .event-card-title{font-size:17px}
  .event-card-meta{gap:8px; font-size:12px}
}

/* ═══════════════════════════════════════════
   GALLERY
   ═══════════════════════════════════════════ */
.gallery-filters{
  display:flex; gap:6px; flex-wrap:wrap;
  justify-content:center; margin-bottom:24px;
}
.gallery-filter-btn{
  padding:8px 18px; border-radius:20px;
  border:1px solid var(--border);
  background:var(--btn-bg);
  color:var(--text); font-size:13px; font-weight:600;
  cursor:pointer; transition:all .2s ease;
}
.gallery-filter-btn:hover{background:var(--btn-hover)}
.gallery-filter-btn.active{
  background:var(--brand); color:#fff;
  border-color:var(--brand);
}
.gallery-section{margin-bottom:32px}
.gallery-section-header{
  text-align:center; margin-bottom:8px;
}
.gallery-section-header h2{
  font-size:22px; margin:0;
  color:var(--brand);
}
.gallery-section-header p{
  font-size:13px; color:var(--muted);
  margin:2px 0 0; font-style:italic;
}
.gallery-section-desc{
  max-width:800px; margin:0 auto 18px;
  font-size:14px; line-height:1.75;
  color:var(--text); text-align:center;
}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(270px, 1fr));
  gap:16px;
}
.gallery-item{
  margin:0; border-radius:var(--radius);
  overflow:hidden; border:1px solid var(--border);
  background:var(--card-bg);
  cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease;
}
.gallery-item:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}
.gallery-item img{
  display:block; width:100%; height:220px;
  object-fit:cover;
  transition:transform .4s ease;
}
.gallery-item:hover img{transform:scale(1.05)}
.gallery-item figcaption{
  padding:14px 16px;
}
.gallery-item figcaption strong{
  display:block; font-size:14px;
  color:var(--text); margin-bottom:4px;
}
.gallery-item figcaption span{
  display:block; font-size:12px;
  line-height:1.6; color:var(--muted);
}

/* Lightbox */
.gallery-lightbox{
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,.85);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .3s ease;
  padding:20px;
}
.gallery-lightbox.open{opacity:1}
.gallery-lightbox-inner{
  max-width:900px; width:100%;
  position:relative;
}
.gallery-lightbox-close{
  position:absolute; top:-40px; right:0;
  background:none; border:none;
  color:#fff; font-size:32px;
  cursor:pointer; line-height:1;
}
.gallery-lightbox-inner img{
  display:block; width:100%; max-height:70vh;
  object-fit:contain; border-radius:10px;
}
.gallery-lightbox-caption{
  color:#fff; padding:14px 0;
  text-align:center;
}
.gallery-lightbox-caption strong{
  display:block; font-size:16px; margin-bottom:4px;
}
.gallery-lightbox-caption span{
  display:block; font-size:13px;
  line-height:1.6; opacity:.8;
}

@media(max-width:600px){
  .gallery-grid{grid-template-columns:1fr 1fr}
  .gallery-item img{height:160px}
  .gallery-filter-btn{font-size:12px; padding:6px 12px}
}
@media(max-width:400px){
  .gallery-grid{grid-template-columns:1fr}
  .gallery-item img{height:200px}
}

/* ═══════════════════════════════════════════
   SMALLER FIGURE (membership form etc.)
   ═══════════════════════════════════════════ */
.fig-small{
  max-width:360px;
  max-height:180px;
  margin:0 auto 16px;
}
.fig-small img{
  height:180px;
}

/* ═══════════════════════════════════════════
   TIMELINE (history page)
   ═══════════════════════════════════════════ */
.timeline{
  position:relative;
  padding:20px 0;
}
.timeline::before{
  content:'';
  position:absolute;
  left:50%;
  top:0; bottom:0;
  width:3px;
  background:var(--brand);
  transform:translateX(-50%);
  border-radius:3px;
}
.timeline-item{
  display:flex;
  align-items:flex-start;
  margin-bottom:30px;
  position:relative;
}
.timeline-item:nth-child(odd){
  flex-direction:row-reverse;
  text-align:right;
}
.timeline-content{
  width:44%;
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px 20px;
  box-shadow:var(--shadow);
  position:relative;
}
.timeline-item:nth-child(odd) .timeline-content{margin-right:6%}
.timeline-item:nth-child(even) .timeline-content{margin-left:6%}
.timeline-year{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  background:var(--brand);
  color:#fff;
  font-weight:700;
  font-size:13px;
  padding:4px 14px;
  border-radius:20px;
  white-space:nowrap;
  z-index:1;
}
.timeline-content h3{
  margin:0 0 6px;
  color:var(--brand);
  font-size:16px;
}
.timeline-content p{
  margin:0;
  font-size:14px;
  line-height:1.6;
}
@media(max-width:768px){
  .timeline::before{left:20px}
  .timeline-item,
  .timeline-item:nth-child(odd){flex-direction:column; text-align:left}
  .timeline-content,
  .timeline-item:nth-child(odd) .timeline-content,
  .timeline-item:nth-child(even) .timeline-content{
    width:calc(100% - 50px);
    margin-left:50px;
    margin-right:0;
  }
  .timeline-year{left:20px; transform:translateX(-50%)}
}

/* ═══════════════════════════════════════════
   IMAGE SLIDESHOW (home page)
   ═══════════════════════════════════════════ */
.slideshow{
  position:relative;
  width:100%;
  height:420px;
  border-radius:var(--radius2);
  overflow:hidden;
  margin-bottom:24px;
  box-shadow:0 12px 40px rgba(0,0,0,.15);
}
.slideshow-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 1s ease-in-out;
}
.slideshow-slide.active{opacity:1}
.slideshow-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.slideshow-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,.15) 50%, transparent 100%);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:30px;
  color:#fff;
}
.slideshow-overlay h2{
  font-size:28px;
  margin:0 0 4px;
  text-shadow:0 2px 8px rgba(0,0,0,.4);
}
.slideshow-overlay p{
  font-size:14px;
  margin:0;
  opacity:.9;
}
.slideshow-dots{
  position:absolute;
  bottom:14px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
  z-index:2;
}
.slideshow-dot{
  width:10px; height:10px;
  border-radius:50%;
  background:rgba(255,255,255,.45);
  border:none;
  cursor:pointer;
  transition:background .3s ease, transform .2s ease;
  padding:0;
}
.slideshow-dot.active{
  background:#fff;
  transform:scale(1.3);
}
@media(max-width:650px){
  .slideshow{height:260px; border-radius:var(--radius)}
  .slideshow-overlay{padding:16px}
  .slideshow-overlay h2{font-size:20px}
  .slideshow-overlay p{font-size:12px}
}
@media(max-width:400px){
  .slideshow{height:200px}
  .slideshow-overlay h2{font-size:17px}
}

/* ═══════════════════════════════════════════
   DIRECTORY STATE CARDS (directory page)
   ═══════════════════════════════════════════ */
.state-section{
  margin-bottom:28px;
}
.state-section h2{
  margin:0 0 14px;
  padding-bottom:8px;
  border-bottom:2px solid var(--brand);
  display:flex;
  align-items:center;
  gap:10px;
}
.state-section .state-images{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:16px;
}
.state-section .state-images .fig{
  margin:0;
}
.lga-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:10px;
}
.lga-card{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:10px;
  padding:12px 14px;
  transition:background .2s ease, box-shadow .2s ease;
}
.lga-card:hover{
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}
.lga-card h4{
  margin:0 0 4px;
  font-size:14px;
  color:var(--brand);
}
.lga-card .lga-places{
  font-size:13px;
  color:var(--muted);
  margin:0;
  line-height:1.5;
}
@media(max-width:650px){
  .state-section .state-images{grid-template-columns:1fr}
  .lga-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:400px){
  .lga-grid{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════
   EMBASSY INFO BOX
   ═══════════════════════════════════════════ */
.embassy-info{
  background:var(--stat-bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px 24px;
  margin:16px 0;
}
.embassy-info h3{
  margin:0 0 12px;
  color:var(--brand);
}
.embassy-info .info-row{
  display:flex;
  gap:8px;
  margin-bottom:8px;
  font-size:14px;
  line-height:1.6;
}
.embassy-info .info-label{
  font-weight:700;
  min-width:110px;
  flex-shrink:0;
}

/* ═══════════════════════════════════════════
   QUICK LINKS GRID (home page)
   ═══════════════════════════════════════════ */
.quick-links{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:12px;
}
.quick-link{
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  text-decoration:none;
  color:var(--text);
  font-weight:600;
  font-size:14px;
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.quick-link:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 16px rgba(0,0,0,.08);
  background:var(--pill-hover);
}
.quick-link-icon{
  font-size:24px;
  flex-shrink:0;
}

/* Safe area insets for notched phones */
@supports(padding: env(safe-area-inset-bottom)){
  footer.site-footer{padding-bottom: calc(22px + env(safe-area-inset-bottom))}
  .main-nav{padding-bottom: env(safe-area-inset-bottom)}
}