/* ============================================================
   ananda.css — BSPD Matrimony Design System (Ananta Theme)
   Single stylesheet. No inline styles needed in any HTML page.
   All design tokens use the Ananta palette.
   ============================================================ */

/* ── Google Fonts — Ananta palette fonts ──────────────────── */
/* Base font set — Inter as system default, DM Serif Display for headings only */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=DM+Serif+Display:ital@0;1&display=swap');
/* Additional font choices (IBM Plex Sans, Outfit, Jost, Figtree, Raleway) loaded on demand by bspd-site.js font picker */

/* ── Design tokens (Ananta palette — maroon + amber) ─────── */
:root {
  --red:      #7B2D00;   /* Ananta primary — deep maroon */
  --red-dk:   #5e2200;   /* hover / darker */
  --red-lt:   #eeddd5;   /* light tint bg — richer than before */
  --red-md:   #ddc4b8;   /* medium tint */
  --nav-bg:   #5a1b00;   /* nav bar — deep */
  --gold:     #C07800;   /* Ananta secondary — richer amber */
  --gold-lt:  #fdf0d0;   /* gold tint bg */
  --gold-dk:  #8f5800;   /* gold hover */
  --green:    #1e6b22;
  --dark:     #1a110a;
  --mid:      #3a2c20;   /* richer dark brown for body text */
  --soft:     #6b5c50;
  --border:   #d8cec5;   /* more defined borders */
  --bg:       #ffffff;
  --bg2:      #f5ede6;   /* warmer f5ede6 — more defined */
  --bg3:      #e8dbd0;   /* even more defined warm tan */

  --f-heading: 'DM Serif Display', Georgia, serif;         /* display serif — headings only */
  --f-body:    'Plus Jakarta Sans', system-ui, sans-serif; /* sharp geometric sans — default */
  --f-ui:      'Plus Jakarta Sans', system-ui, sans-serif; /* UI chrome */

  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;

  --shadow:    0 2px 14px rgba(0,0,0,.10);
  --shadow-md: 0 4px 22px rgba(0,0,0,.14);
  --shadow-lg: 0 8px 36px rgba(0,0,0,.18);

  --tap:       48px;
  --nav-h:     0px;    /* no separate nav bar — nav is inline in header */
  --hdr-h:     58px;
  --sidebar-w: 220px;

  /* Aliases for backward-compat with inline styles in HTML files */
  --primary:   #7B2D00;   /* alias for --red */
  --ink-2:     #6b5c50;   /* alias for --soft */
  --bg-warm:   #f5ede6;   /* alias for --bg2 */
  --f-brand:   'DM Serif Display', Georgia, serif;    /* alias for --f-heading */
  --f-display: 'DM Serif Display', Georgia, serif;    /* alias for --f-heading */
}

/* ── Slim scrollbars — subtle, blends with background ──────── */
* { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.08) transparent; }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,.10); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.22); }
.admin-sidebar, .app-sidebar { scrollbar-color: rgba(255,255,255,.12) transparent; }
.admin-sidebar::-webkit-scrollbar-thumb,
.app-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); }
.admin-sidebar::-webkit-scrollbar-thumb:hover,
.app-sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.28); }

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { font-size: 18px; scroll-behavior: smooth; overflow-x: clip; }
body  {
  font-family: var(--f-body);
  color: var(--dark);
  background: var(--bg);
  line-height: 1.7;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* DM Sans for all UI chrome — nav, buttons, labels, forms */
button, input, select, textarea,
.hdr-link, .btn-solid-hdr, .btn-p, .btn-outline, .btn-sm, .btn-ghost,
.bsub, .abtn, .lang-toggle, .lang-opt,
.nav-list a, .nav-a11y, .a11y-lbl,
.fld-label, .fld, label, .badge,
.tab, .sub-tab, .sb-link, .pg-btn,
.stat-card-lbl, .text-sm, .form-section-title,
.logo-sub, .filter-group-title, .vol-info-lbl, .vol-info-val,
.result-id, .result-tags span,
.assigned-id, .assigned-meta {
  font-family: var(--f-ui);
}
p { color: var(--dark); font-size: 1rem; line-height: 1.75; }
main  { flex: 1; }
img   { max-width: 100%; display: block; }
a     { color: var(--red); text-decoration: none; }
a:hover { color: var(--red-dk); }
ul    { list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--f-heading);
  line-height: 1.25;
  color: var(--dark);
}
h1 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); color: var(--red); }
h2 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }
h3 { font-size: clamp(1.05rem, 2vw, 1.35rem); }
h4 { font-family: var(--f-body); font-size: 1rem; font-weight: 600; }
p  { color: var(--dark); font-size: .95rem; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
button { cursor: pointer; border: none; background: none; }

/* Focus ring — gold, 3px */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ── Skip link ────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -120px;
  left: 1rem;
  background: var(--red);
  color: #fff;
  padding: .6rem 1.2rem;
  border-radius: var(--r-sm);
  text-decoration: none;
  font-weight: 600;
  font-size: .9rem;
  z-index: 9999;
  transition: top .2s;
}
.skip-link:focus { top: 1rem; }

/* ── Width wrappers ───────────────────────────────────────── */
.pw    { margin: 0 auto; padding: 1.2rem 1.2rem;    max-width: 1280px; }
.pw-md { max-width: 800px; margin: 0 auto; padding: 1.5rem 1.2rem; }
.pw-sm { max-width: 520px; margin: 0 auto; padding: 1.5rem 1.2rem; }
/* In sidebar layouts: compact vertical padding only (horizontal padding stays) */
.app-layout > main .pw,  .app-layout > main .pw-md,  .app-layout > main .pw-sm,
.admin-main .pw, .admin-main .pw-md, .admin-main .pw-sm {
  margin-left: 0; margin-right: 0;
  max-width: none;
  padding-top: .5rem; padding-bottom: 1rem;
}
/* Admin main: pw removes horizontal padding since admin-main provides it */
.admin-main .pw, .admin-main .pw-md, .admin-main .pw-sm {
  padding-left: 0; padding-right: 0;
}

/* ── Sticky single header wrapper ───────────────────────────── */
#bspd-topwrap {
  position: sticky;
  top: 0;
  z-index: 500;
  background: var(--red);
  box-shadow: 0 2px 14px rgba(0,0,0,.22);
}

/* ── Header ───────────────────────────────────────────────── */
#hdr {
  background: transparent; /* bg on #bspd-topwrap — full bleed */
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 0 1.4rem;
  min-height: var(--hdr-h);
  margin: 0 auto;
  width: 100%;
  position: relative; /* for .hdr-nav dropdown on mobile */
}
.logo-wrap {
  display: flex;
  align-items: center;
  gap: .8rem;
  text-decoration: none;
  flex-shrink: 0;
  min-height: var(--tap);
}
.logo-wrap img {
  width: 44px; height: 44px;
  flex-shrink: 0;
  filter: brightness(0) invert(1);   /* render SVG in pure white on red header */
}
.logo-divider { width: 1px; height: 32px; background: rgba(255,255,255,.3); }
.logo-text    { display: flex; flex-direction: column; gap: 1px; }
.logo-name    { font-family: var(--f-ui); font-size: 1.15rem; color: #fff; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.logo-full    { display: block; }
.logo-abbr    { display: none; }
/* ── Inline header nav (public pages only) ────────────────── */
.hdr-nav { display: flex; align-items: stretch; flex: 1; min-width: 0; overflow: hidden; justify-content: center; }
.hdr-nav-link {
  display: flex; align-items: center;
  padding: 0 .55rem; font-size: .78rem; font-weight: 500;
  color: rgba(255,255,255,.8); text-decoration: none; white-space: nowrap;
  border-bottom: 3px solid transparent; min-height: var(--hdr-h);
  transition: color .15s, border-color .15s;
}
.hdr-nav-link:hover    { color: #fff; border-bottom-color: rgba(255,255,255,.35); }
.hdr-nav-cur           { color: #fff !important; border-bottom-color: var(--gold) !important; font-weight: 600; }

/* ── Pages dropdown (demo nav) ───────────────────────────── */
/* Mobile-only Pages section inside hamburger nav */
.hdr-nav-pages-mobile { display: none; }   /* hidden on desktop */
.hdr-nav-sep {
  font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.45); padding: .55rem 1rem .25rem;
}

.hdr-dd { position: relative; display: flex; align-items: stretch; }
.hdr-dd-trigger {
  display: flex; align-items: center; gap: .28rem;
  padding: 0 .55rem; font-size: .78rem; font-weight: 500;
  color: rgba(255,255,255,.8); text-decoration: none;
  border-bottom: 3px solid transparent; min-height: var(--hdr-h);
  cursor: pointer; background: none; border-top: none; border-left: none; border-right: none;
  font-family: inherit; transition: color .15s;
}
.hdr-dd-trigger:hover { color: #fff; }
.hdr-dd-trigger .dd-caret { font-size: .55em; margin-left: .1rem; transition: transform .18s; }
.hdr-dd:hover .dd-caret,
.hdr-dd.open .dd-caret { transform: rotate(180deg); }
.hdr-dd-menu {
  display: none; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  background: var(--red-dk); border-radius: 0 0 var(--r-md) var(--r-md);
  min-width: 170px; padding: .35rem 0;
  box-shadow: 0 8px 24px rgba(0,0,0,.3); z-index: 510;
  border-top: 2px solid var(--gold);
}
.hdr-dd:hover .hdr-dd-menu,
.hdr-dd.open .hdr-dd-menu { display: block; }
.hdr-dd-item {
  display: flex; align-items: center; gap: .55rem;
  padding: .62rem 1.1rem; color: rgba(255,255,255,.82);
  font-size: .82rem; font-weight: 500; text-decoration: none;
  transition: background .12s, color .12s;
}
.hdr-dd-item:hover { background: rgba(255,255,255,.12); color: #fff; }
.hdr-dd-item svg { flex-shrink: 0; }

/* ── A11y tools inline in header ─────────────────────────── */
.hdr-a11y { display: flex; align-items: center; gap: .18rem; flex-shrink: 0; }
.hdr-user  { color: rgba(255,255,255,.78); font-size: .78rem; font-weight: 500; padding: 0 .4rem; white-space: nowrap; }
.hdr-flex-push { flex: 1; min-width: 0; }
.hdr-right    { display: flex; align-items: center; gap: .3rem; flex-shrink: 0; }
.hdr-actions  { display: flex; align-items: center; gap: .3rem; }
.hdr-link {
  color: rgba(255,255,255,.85);
  font-size: .82rem;
  font-weight: 500;
  text-decoration: none;
  padding: .4rem .65rem;
  border-radius: var(--r-sm);
  white-space: nowrap;
  transition: color .15s, background .15s;
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
}
.hdr-link:hover { color: #fff; background: rgba(255,255,255,.12); }
.hdr-tag { color: rgba(255,255,255,.5); font-size: .72rem; text-transform: uppercase; letter-spacing: .09em; }
.btn-solid-hdr {
  background: var(--gold);
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  padding: .5rem 1.1rem;
  border-radius: var(--r-sm);
  text-decoration: none;
  white-space: nowrap;
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  transition: background .15s, transform .1s;
}
.btn-solid-hdr:hover { background: #9a700a; transform: translateY(-1px); color: #fff; }

/* ── Language switcher ────────────────────────────────────── */
.lang-switcher { position: relative; }
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  color: rgba(255,255,255,.9);
  font-family: var(--f-body);
  font-size: .8rem;
  font-weight: 600;
  padding: .4rem .65rem;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.1);
  min-height: var(--tap);
  white-space: nowrap;
  transition: background .15s;
}
.lang-toggle:hover { background: rgba(255,255,255,.2); color: #fff; }
.lang-caret { width: 8px; height: 5px; fill: rgba(255,255,255,.7); flex-shrink: 0; }
.lang-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  padding: .4rem;
  z-index: 500;
  flex-wrap: wrap;
  gap: .25rem;
  min-width: 180px;
}
.lang-menu.open { display: flex; }
.lang-opt {
  flex: 0 0 calc(50% - .125rem);
  padding: .55rem .4rem;
  font-size: .82rem;
  font-weight: 500;
  color: var(--mid);
  border-radius: var(--r-sm);
  text-align: center;
  border: 1px solid transparent;
  transition: background .12s;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lang-opt:hover  { background: var(--red-lt); color: var(--red); }
.lang-opt.active { background: var(--red); color: #fff; border-color: var(--red); }

/* ── Hamburger ────────────────────────────────────────────── */
.hb {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: var(--tap);
  height: var(--tap);
  border-radius: var(--r-sm);
  border: 1px solid rgba(255,255,255,.28);
  flex-shrink: 0;
}
.hb span { display: block; width: 22px; height: 2px; background: rgba(255,255,255,.9); border-radius: 2px; transition: transform .2s, opacity .2s; }
.hb[aria-expanded='true'] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hb[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.hb[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── A11y buttons (header) ────────────────────────────────── */
.a11y-lbl { display: none; } /* hidden — context clear from button labels */
.abtn {
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
  font-size: .72rem;
  font-weight: 700;
  color: rgba(255,255,255,.8);
  flex-shrink: 0;
  transition: background .12s, color .12s;
}
.abtn:hover { background: rgba(255,255,255,.22); color: #fff; }

/* Font picker dropdown in header */
.abtn-sel {
  height: 30px; font-size: .7rem; padding: 0 .35rem;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.12); color: #fff;
  border-radius: var(--r-sm); cursor: pointer;
  max-width: 105px; outline: none;
}
.abtn-sel option { background: var(--red-dk); color: #fff; }

/* ── Page banner — light/mild, inside <main> ──────────────── */
.page-banner {
  background: var(--red-lt);
  border-bottom: 2px solid var(--red-md);
  padding: .65rem 0;    /* no horizontal — inner handles it */
  margin-bottom: 1rem;
  position: relative;
  overflow: hidden;
}
/* Left-extreme BSPD logo watermark — centered at left edge, right half visible inside banner */
.page-banner::after {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 5rem; height: 5rem;
  background-image: url('../images/logos/bspdlogo.svg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}
/* Inner aligns to the same grid as .pw on all widths */
.page-banner-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.2rem 0 3rem;   /* 3rem = 2.5rem visible logo half + 0.5rem gap */
  position: relative;
  z-index: 1;
}
.page-banner h1    { font-family: var(--f-heading); color: var(--red); font-size: clamp(1.1rem, 2vw, 1.5rem); margin-bottom: .1rem; }
.page-banner p     { color: var(--soft); font-size: .84rem; margin: 0; }
.page-banner-row   { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem; }
/* Sidebar layout: page-banner is inside a constrained column, inner unrestricted */
.app-layout > main .page-banner, .admin-main .page-banner { margin-bottom: .9rem; }
.app-layout > main .page-banner-inner, .admin-main .page-banner-inner { max-width: none; padding: 0 1.2rem 0 3rem; }

/* ── Layouts ──────────────────────────────────────────────── */
.two-col      { display: flex; gap: 2rem; align-items: flex-start; }
.main-col     { flex: 1; min-width: 0; }
.side-col     { width: 280px; flex-shrink: 0; }
.search-layout{ display: flex; gap: 1.5rem; align-items: flex-start; }

/* ── Form card ────────────────────────────────────────────── */
.form-card {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 4rem 1.5rem 1.5rem;   /* extra top for pinned logo */
  box-shadow: var(--shadow);
}
/* Ensure space above form-card for the half-protruding logo */
.pw-sm > .form-card,
.main-col > .form-card,
.pw > .form-card { margin-top: 2.5rem; }

/* Pinned logo — centered on the top border edge */
.form-card-logo {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--red-lt);
  box-shadow: 0 4px 20px rgba(165,51,25,.18);
  object-fit: contain;
  padding: 7px;
  display: block;
  pointer-events: none;
}
.form-card-title { font-family: var(--f-heading); font-size: 1.5rem; color: var(--red); margin-bottom: .25rem; }
.form-card-sub   { color: var(--soft); font-size: .88rem; margin-bottom: 1.5rem; }
.form-divider    { border: none; border-top: 1px solid var(--border); margin: 1.2rem 0; }

/* form-section-title: Lora serif, red, 2px red-lt border-bottom, 1.5rem, margin 2rem 0 1rem */
.form-section-title {
  font-family: var(--f-heading);
  font-size: 1.05rem;
  color: var(--red);
  font-weight: 600;
  margin: 2rem 0 1rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--red-lt);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.form-card > .form-section-title:first-child { margin-top: 0; }

.fld-row   { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.fld-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }

/* fld-group: margin-bottom 1.2rem */
.fld-group { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1.2rem; }

/* fld-label: Lora italic */
.fld-label {
  font-family: var(--f-ui);
  font-style: normal;
  font-size: .88rem;
  font-weight: 600;
  color: var(--mid);
  display: flex;
  align-items: center;
  gap: .3rem;
}
.fld-label .req { color: var(--red); font-style: normal; font-size: 1rem; line-height: 1; }

/* fld: 48px min-height, 1px border #ccc, red focus with 3px gold-tinted shadow */
.fld {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: var(--r-md);
  padding: .72rem .9rem;
  font-size: .95rem;
  color: var(--dark);
  background: var(--bg);
  min-height: 48px;
  transition: border-color .15s, box-shadow .15s;
  appearance: none;
  -webkit-appearance: none;
}
.fld:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(200,69,25,.15);
  outline: none;
}
.fld:disabled { background: var(--bg2); color: var(--soft); cursor: not-allowed; }
textarea.fld  { min-height: 100px; resize: vertical; }
.err { font-size: .8rem; color: #c0392b; display: none; align-items: center; gap: .3rem; }
.err.show { display: flex; }
.rl  { font-size: .75rem; color: var(--soft); text-align: right; }
.fld-hint { font-size: .78rem; color: var(--soft); margin-top: .15rem; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn-p, .btn-outline, .btn-sm, .btn-danger, .btn-ghost, .bsub, .btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .72rem 1.5rem; border-radius: var(--r-md);
  font-weight: 600; font-size: .9rem; text-decoration: none; cursor: pointer;
  transition: background .15s, transform .1s, box-shadow .15s;
  min-height: var(--tap); border: 2px solid transparent; white-space: nowrap;
}
/* primary: red bg, white text, gold focus outline 3px */
.btn-p          { background: var(--red); color: #fff; }
.btn-p:hover    { background: var(--red-dk); transform: translateY(-1px); box-shadow: var(--shadow); color: #fff; }
.btn-p:focus-visible { outline: 3px solid var(--gold); }
.btn-outline    { background: transparent; color: var(--red); border-color: var(--red); }
.btn-outline:hover { background: var(--red-lt); color: var(--red); }
.btn-secondary  { background: var(--gold); color: #fff; }
.btn-secondary:hover { background: #9a700a; color: #fff; transform: translateY(-1px); }
.btn-sm         { padding: .45rem 1rem; font-size: .82rem; min-height: 40px; background: var(--bg2); color: var(--mid); border-color: var(--border); border-width: 1px; }
.btn-sm:hover   { background: var(--red-lt); color: var(--red); border-color: var(--red); }
.btn-danger     { background: #c0392b; color: #fff; }
.btn-danger:hover { background: #a02d22; color: #fff; }
.btn-ghost      { background: transparent; color: var(--red); border-color: transparent; padding: .45rem .8rem; min-height: 40px; }
.btn-ghost:hover{ background: var(--red-lt); }
/* bsub: full-width, red bg, white, Lora font, 52px height */
.bsub {
  background: var(--red);
  color: #fff;
  width: 100%;
  font-family: var(--f-heading);
  font-size: 1rem;
  font-weight: 600;
  min-height: 52px;
  padding: .85rem 1.6rem;
  border-radius: var(--r-md);
  border: none;
}
.bsub:hover { background: var(--red-dk); }
.btn-group { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.btn-group-full .btn-p,
.btn-group-full .btn-outline { flex: 1; justify-content: center; }

/* ── Alert boxes ──────────────────────────────────────────── */
.successbox, .errorbox, .tipbox, .infobox {
  border-radius: var(--r-md); padding: .9rem 1.1rem;
  font-size: .9rem; line-height: 1.6; margin-bottom: 1rem;
}
.successbox { background: #edf7ed; border: 1px solid #b7dfb7; color: #1d5e1d; }
.errorbox   { background: #fdecea; border: 1px solid #f5c6c2; color: #8b1a13; }
.tipbox     { background: var(--gold-lt); border: 1px solid #f0cc88; color: #5a3a00; }
.infobox    { background: #e8f4fd; border: 1px solid #a8d4f5; color: #1a4a6e; }

/* ── Badges — colourful small pills ──────────────────────── */
.badge {
  display: inline-flex; align-items: center;
  padding: .25rem .75rem; border-radius: 99px;
  font-size: .75rem; font-weight: 600; letter-spacing: .03em; white-space: nowrap;
}
.badge-fresh   { background: #e8f4fd; color: #1a4a6e; }
.badge-pending { background: #fff3cd; color: #856404; }
.badge-active  { background: #edf7ed; color: #1d5e1d; }
.badge-settled { background: #f0e6ff; color: #5a2d82; }
.badge-expired { background: #fdecea; color: #8b1a13; }
.badge-denied  { background: #f2f2f2; color: #555; }
.badge-free    { background: var(--red-lt); color: var(--red); }
.badge-premium { background: var(--gold-lt); color: #7a4d00; }
.badge-new     { background: var(--red); color: #fff; }
.badge-unread  { background: var(--red); color: #fff; font-size: .7rem; padding: .15rem .5rem; }

/* ── Stat rows — white with coloured left border (4px) ───── */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: .75rem; margin-bottom: 1.2rem;
}
.stat-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 4px solid var(--red);
  border-radius: var(--r-lg);
  padding: .9rem .85rem;
  text-align: center;
  box-shadow: var(--shadow);
}
.stat-card.amber  { border-left-color: var(--gold); }
.stat-card.green  { border-left-color: var(--green); }
.stat-card.blue   { border-left-color: #2980b9; }
.stat-card-num { font-family: var(--f-heading); font-size: 1.65rem; color: var(--red); line-height: 1; margin-bottom: .2rem; font-weight: 600; }
.stat-card-lbl { font-size: .73rem; color: var(--soft); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }

/* ── Profile thumb — broken images show red-lt tinted box ── */
.profile-thumb    { width: 80px; height: 96px; object-fit: cover; border-radius: var(--r-md); flex-shrink: 0; background: var(--red-lt); }
.profile-thumb-sm { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--red-lt); }

/* ── Profile cards (search results) ──────────────────────── */
.profile-cards { display: flex; flex-direction: column; gap: 1rem; }
.profile-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  display: flex; gap: 1rem;
  padding: 1rem 1.2rem;
  align-items: flex-start;
  box-shadow: var(--shadow);
  transition: box-shadow .2s, border-color .2s;
}
.profile-card:hover { box-shadow: var(--shadow-md); border-color: #ccc; }
.profile-card-info  { flex: 1; min-width: 0; }
.profile-card-name  { font-family: var(--f-heading); font-size: 1.1rem; font-weight: 600; color: var(--dark); margin-bottom: .1rem; }
.profile-card-id    { font-size: .75rem; color: var(--soft); }
.profile-card-meta  { font-size: .82rem; color: var(--mid); margin: .35rem 0; line-height: 1.7; }
.profile-card-actions { display: flex; flex-direction: column; gap: .45rem; align-items: flex-end; flex-shrink: 0; }

/* ── Dashboard profile status cards (.psc) ───────────────── */
.psc-list { display: flex; flex-direction: column; gap: 1.2rem; }
.psc {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
/* red header strip */
.psc-head {
  background: var(--red);
  padding: .85rem 1.2rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; flex-wrap: wrap;
}
.psc-name { font-family: var(--f-heading); font-size: 1.05rem; color: #fff; font-weight: 600; }
.psc-id   { font-size: .78rem; color: rgba(255,255,255,.75); }
.psc-body { padding: 1rem 1.2rem; }
.psc-row  { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.psc-photo { width: 80px; height: 96px; object-fit: cover; border-radius: var(--r-md); background: var(--red-lt); flex-shrink: 0; }
.psc-info  { flex: 1; min-width: 180px; }
.psc-meta  { font-size: .85rem; color: var(--mid); line-height: 1.8; }
.psc-actions {
  display: flex; flex-wrap: wrap; gap: .5rem;
  padding: .85rem 1.2rem;
  border-top: 1px solid var(--border);
  background: var(--bg2); align-items: center;
}

/* ── Interest / contact cards ─────────────────────────────── */
.interest-card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-lg); display: flex; gap: .9rem;
  padding: 1rem 1.1rem; align-items: flex-start;
  margin-bottom: .9rem; box-shadow: var(--shadow);
}
.interest-card.highlight { border-left: 4px solid var(--red); }
.interest-card.faded     { opacity: .65; }
.interest-card-info     { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: .7rem; }
.interest-card-info strong { font-size: .95rem; color: var(--dark); display: block; }
.interest-card-info p   { font-size: .82rem; color: var(--mid); margin: .2rem 0; }
.interest-card-date     { font-size: .75rem; color: var(--soft); white-space: nowrap; }
.interest-card-actions  { display: flex; flex-direction: column; gap: .4rem; align-items: flex-end; flex-shrink: 0; }

/* ── Tabs ─────────────────────────────────────────────────── */
.tabs {
  display: flex; gap: 0; border-bottom: 2px solid var(--border);
  margin-bottom: 1.5rem; overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: flex; align-items: center; padding: .75rem 1.3rem;
  font-size: .88rem; font-weight: 500; color: var(--soft);
  text-decoration: none; border-bottom: 3px solid transparent;
  margin-bottom: -2px; white-space: nowrap; min-height: var(--tap);
  transition: color .15s;
}
.tab:hover { color: var(--red); }
.tab.active { color: var(--red); border-bottom-color: var(--red); font-weight: 600; }
.sub-tabs { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.sub-tab  {
  padding: .4rem 1rem; border-radius: 99px; font-size: .82rem; font-weight: 500;
  color: var(--soft); border: 1px solid var(--border); text-decoration: none;
  background: var(--bg); transition: background .12s; min-height: 40px;
  display: inline-flex; align-items: center;
}
.sub-tab:hover, .sub-tab.active { background: var(--red); color: #fff; border-color: var(--red); }

/* ── Inbox — unread has left accent ──────────────────────── */
.inbox-list { display: flex; flex-direction: column; }
.inbox-item {
  display: flex; align-items: center; gap: .9rem;
  padding: .9rem 1rem; border-bottom: 1px solid var(--border);
  text-decoration: none; color: inherit; transition: background .12s;
  min-height: var(--tap);
}
.inbox-item:hover     { background: var(--bg2); }
.inbox-item.unread    { background: var(--red-lt); border-left: 3px solid var(--red); }
.inbox-item.unread .inbox-sender { font-weight: 700; color: var(--red); }
.inbox-content  { flex: 1; min-width: 0; }
.inbox-sender   { font-size: .9rem; color: var(--dark); font-weight: 500; }
.inbox-preview  { font-size: .82rem; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-date     { font-size: .75rem; color: var(--soft); white-space: nowrap; flex-shrink: 0; }

/* ── Message bubbles: recv (white, left) / sent (red-lt, right) */
.msg-thread    { padding: 1rem 0; }
.msg-wrap      { margin-bottom: 1rem; }
.msg-bubble    { max-width: 75%; padding: .85rem 1rem; border-radius: var(--r-lg); font-size: .9rem; color: var(--dark); line-height: 1.6; }
.msg-bubble.recv { background: var(--bg); border: 1px solid var(--border); margin-right: auto; border-bottom-left-radius: 4px; }
.msg-bubble.sent { background: var(--red-lt); color: var(--dark); margin-left: auto; border-bottom-right-radius: 4px; border: 1px solid rgba(200,69,25,.2); }
.msg-meta      { font-size: .72rem; margin-top: .4rem; opacity: .7; }
.msg-reply-box { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.2rem; margin-top: 1rem; }
.msg-profile-bar {
  display: flex; align-items: center; gap: 1rem;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: .8rem 1.2rem; margin-bottom: 1.5rem;
}
.msg-profile-name { font-size: .92rem; font-weight: 600; color: var(--dark); }
.msg-profile-sub  { font-size: .78rem; color: var(--soft); }

/* ── Profile quick-nav — sticky below banner ──────────────── */
.profile-quicknav {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: calc(var(--hdr-h) + var(--nav-h));
  z-index: 100;
  box-shadow: var(--shadow);
  padding: 0 1.2rem;
}
/* Inside app-layout, main is the scroll container that starts at the header bottom.
   top: 0 here means "stick at the very top of the scroll viewport" = just below header. */
.app-layout > main .profile-quicknav { top: 0; margin-top: -1rem; }
.profile-quicknav-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: .25rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding: .5rem 0;
}
.profile-quicknav-inner::-webkit-scrollbar { display: none; }
.pqn-link {
  display: inline-flex;
  align-items: center;
  padding: .4rem .9rem;
  border-radius: 99px;
  font-size: .82rem;
  font-weight: 500;
  color: var(--mid);
  text-decoration: none;
  background: var(--bg2);
  border: 1px solid var(--border);
  white-space: nowrap;
  transition: background .12s, color .12s;
  min-height: 36px;
}
.pqn-link:hover { background: var(--red-lt); color: var(--red); border-color: var(--red); }
.pqn-link.active { background: var(--red); color: #fff; border-color: var(--red); }

/* ── Profile detail page ──────────────────────────────────── */
.profile-detail-wrap { display: flex; gap: 2rem; align-items: flex-start; }
.profile-sidebar-col { width: 220px; flex-shrink: 0; }
.profile-main-col    { flex: 1; min-width: 0; }
/* profile photo: 120px circle, red border */
.profile-main-photo {
  width: 120px; height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--red);
  background: var(--red-lt);
  display: block;
  margin: 0 auto 1rem;
}
.profile-action-box  { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1rem; display: flex; flex-direction: column; gap: .6rem; }
.profile-action-box .btn-p,
.profile-action-box .btn-outline,
.profile-action-box .btn-sm { width: 100%; justify-content: center; }
.profile-contact-box { background: var(--gold-lt); border: 1px solid #f0cc88; border-radius: var(--r-lg); padding: .9rem 1rem; margin-top: .8rem; font-size: .85rem; color: var(--mid); }
.profile-contact-box strong { color: var(--dark); display: block; margin-bottom: .3rem; }
/* profile-section: white bg, Lora heading, red underline */
.profile-section { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.5rem; margin-bottom: 1.2rem; box-shadow: var(--shadow); }
.profile-section h3 {
  font-family: var(--f-heading);
  font-size: 1.1rem;
  color: var(--red);
  margin-bottom: 1rem;
  padding-bottom: .6rem;
  border-bottom: 2px solid var(--red-lt);
}
/* profile-row: flex, label 35%, value 65% */
.profile-row        { display: flex; gap: .5rem; padding: .45rem 0; border-bottom: 1px solid var(--border); font-size: .88rem; }
.profile-row:last-child { border-bottom: none; }
.profile-lbl { width: 35%; max-width: 180px; color: var(--soft); flex-shrink: 0; font-style: italic; font-size: .85rem; }
.profile-val { color: var(--dark); flex: 1; }
/* ID badge in sidebar */
.profile-id-badge { display: inline-block; background: var(--red-lt); color: var(--red); font-size: .78rem; font-weight: 600; padding: .2rem .7rem; border-radius: 99px; margin-bottom: .5rem; }
.profile-plan-badge { display: inline-block; background: var(--gold-lt); color: #7a4d00; font-size: .78rem; font-weight: 600; padding: .2rem .7rem; border-radius: 99px; }

/* ── Rasi chart — proper 4×4 grid ────────────────────────── */
.rasi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, minmax(60px, auto));
  gap: 2px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
  font-size: .78rem;
  max-width: 340px;
}
.rasi-cell {
  background: var(--bg);
  padding: .5rem .6rem;
  min-height: 60px;
  color: var(--mid);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15rem;
}
.rasi-cell .rasi-num    { font-size: .65rem; color: var(--soft); }
.rasi-cell .rasi-planet { font-weight: 600; color: var(--red); font-size: .8rem; }
/* center 2×2 spans */
.rasi-center { background: var(--bg3); font-family: var(--f-heading); font-style: italic; color: var(--red); font-size: .82rem; }
.rasi-span2  { grid-column: span 2; }

/* ── Filter sidebar — STICKY within inner-scroll main ──────── */
.filter-sidebar {
  width: 250px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  max-height: calc(100vh - var(--hdr-h));
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.filter-sidebar::-webkit-scrollbar { width: 4px; }
.filter-sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.filter-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.2rem; box-shadow: var(--shadow); }
.filter-title { font-family: var(--f-heading); font-size: 1rem; color: var(--red); margin-bottom: 1rem; padding-bottom: .5rem; border-bottom: 2px solid var(--red-lt); }
.results-col    { flex: 1; min-width: 0; }
.results-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.results-count  { font-size: .88rem; color: var(--soft); }

/* ── Pagination ───────────────────────────────────────────── */
.pagination { display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap; padding: 1.5rem 0; }
.pg-btn {
  min-width: 40px; height: 40px; border-radius: var(--r-sm);
  border: 1px solid var(--border); font-size: .85rem; font-weight: 500;
  color: var(--mid); background: var(--bg); padding: 0 .7rem;
  transition: background .12s, color .12s;
}
.pg-btn:hover    { background: var(--red-lt); color: var(--red); }
.pg-btn.active   { background: var(--red); color: #fff; border-color: var(--red); }
.pg-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ── Shared app layout (admin/member/volunteer) ───────────── */
/* Inner-scroll pattern: layout fills viewport, sidebar + main scroll independently */
.app-layout, .admin-layout {
  display: flex;
  height: calc(100vh - var(--hdr-h));
  overflow: hidden;
}
.admin-sidebar, .app-sidebar {
  width: var(--sidebar-w);
  background: var(--red);
  flex-shrink: 0;
  height: 100%;
  overflow-y: auto;
  z-index: 200;
  transition: width .25s ease, transform .28s ease;
}
.app-main {
  flex: 1; padding: 1rem 0; min-width: 0;
  background: var(--bg2); overflow-y: auto; overflow-x: hidden; height: 100%;
}
.admin-main {
  flex: 1; padding: 1rem 1.2rem; min-width: 0;
  background: var(--bg2); overflow-y: auto; overflow-x: hidden; height: 100%;
}
/* Page-banner inside admin-main must extend to full column width */
.admin-main > .page-banner { margin-left: -1.2rem; margin-right: -1.2rem; }
/* #main inside app-layout acts as app-main */
.app-layout > main {
  flex: 1; padding: 1rem 0; min-width: 0;
  background: var(--bg2); overflow-y: auto; overflow-x: hidden; height: 100%;
}

.sb-inner-wrap, .sb-inner { }
.sb-inner   { padding: .4rem 0; }
.sb-brand, .sb-brand-txt { font-size: .62rem; color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: .13em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.sb-nav     { display: flex; flex-direction: column; }
.sb-link    {
  display: flex; align-items: center; gap: .55rem;
  padding: .7rem .9rem .7rem 1.4rem; color: rgba(255,255,255,.82);
  font-size: .83rem; font-weight: 500; text-decoration: none;
  transition: background .12s, color .12s; border-left: 3px solid transparent;
  white-space: nowrap; overflow: hidden;
}
.sb-link:hover { background: rgba(255,255,255,.1); color: #fff; }
.sb-cur { background: rgba(255,255,255,.16); color: #fff; border-left-color: var(--gold); font-weight: 600; }
.sb-divider { height: 1px; background: rgba(255,255,255,.15); margin: .4rem 0; }
.sb-icon    { width: 2.2em; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
/* Hide legacy in-page toggle button — hamburger in header handles it */
.sb-toggle-btn { display: none !important; }

/* ── Sidebar collapse button (desktop) ───────────────────── */
/* Left-padded to 1.4rem so the pin button left-edge aligns with the header logo */
.sb-top {
  display: flex; align-items: center; justify-content: flex-start; gap: .65rem;
  padding: .55rem .7rem .55rem 1.4rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,.08);
  min-height: 44px;
}
.sb-pin {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.75);
  font-size: .85rem; font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .12s, color .12s;
}
.sb-pin:hover { background: rgba(255,255,255,.22); color: #fff; }

/* Collapsed: icon-only mode — re-center everything */
.admin-sidebar.sb-collapsed,
.app-sidebar.sb-collapsed { width: 60px; }
.sb-collapsed .sb-txt   { display: none; }
.sb-collapsed .sb-brand { display: none; }
.sb-collapsed .sb-top   { justify-content: center; padding-left: 0; padding-right: 0; }
.sb-collapsed .sb-link  { justify-content: center; padding: .75rem 0; }
.sb-collapsed .sb-icon  { width: 2.8em; }
/* Transition for collapse — already on .admin-sidebar/.app-sidebar above */

/* ── Admin panel ──────────────────────────────────────────── */
.admin-panel { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); margin-bottom: 1rem; }
.admin-panel-head { background: var(--bg2); border-bottom: 1px solid var(--border); padding: .9rem 1.2rem; display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.admin-panel-title { font-family: var(--f-heading); font-size: 1rem; color: var(--dark); font-weight: 600; }
.admin-filters { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; padding: .9rem 1.2rem; background: var(--bg2); border-bottom: 1px solid var(--border); }
.admin-filters .fld { min-height: 40px; font-size: .85rem; max-width: 220px; }

.admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.admin-table th {
  background: var(--red); color: rgba(255,255,255,.92);
  padding: .6rem .9rem; text-align: left; font-weight: 600;
  font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
  white-space: nowrap; cursor: pointer; user-select: none;
  border-bottom: 2px solid rgba(0,0,0,.1);
}
.admin-table th:hover { background: var(--red-dk); }
.admin-table th[data-sort]::after { content: ' ⇅'; opacity: .5; font-size: .7rem; }
.admin-table th[data-sort="asc"]::after  { content: ' ↑'; opacity: 1; }
.admin-table th[data-sort="desc"]::after { content: ' ↓'; opacity: 1; }
.admin-table td { padding: .7rem .9rem; border-bottom: 1px solid var(--border); color: var(--mid); vertical-align: middle; }
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table tbody tr:hover td { background: var(--red-lt); color: var(--dark); }
.admin-table tbody tr:nth-child(even) td { background: var(--bg); }
.admin-table tbody tr:nth-child(even):hover td { background: var(--red-lt); }
.td-actions { display: flex; gap: .4rem; flex-wrap: wrap; }

/* Small stat boxes — left border, not coloured bg */
.small-boxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: .85rem; margin-bottom: 1.4rem; }
.small-box {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: .85rem .9rem;
  border-left: 4px solid var(--red); box-shadow: var(--shadow);
}
.small-box.amber  { border-left-color: var(--gold); }
.small-box.green  { border-left-color: var(--green); }
.small-box.blue   { border-left-color: #2980b9; }
.small-box.red    { border-left-color: #e74c3c; }
.small-box.purple { border-left-color: #8e44ad; }
.small-box-num  { font-family: var(--f-heading); font-size: 1.8rem; color: var(--dark); line-height: 1; margin-bottom: .2rem; font-weight: 600; }
.small-box-lbl  { font-size: .76rem; color: var(--soft); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.small-box-link { font-size: .75rem; color: var(--red); text-decoration: none; display: block; margin-top: .5rem; font-weight: 600; }
.small-box-link:hover { text-decoration: underline; }
/* Arrow color tracks each card's accent */
.small-box.amber  .small-box-link { color: var(--gold-dk); }
.small-box.green  .small-box-link { color: var(--green); }
.small-box.blue   .small-box-link { color: #2980b9; }
.small-box.purple .small-box-link { color: #8e44ad; }
.small-box.red    .small-box-link { color: #c0392b; }

/* ── Section headings ─────────────────────────────────────── */
.section-title { font-family: var(--f-heading); font-size: 1.15rem; color: var(--dark); margin-bottom: .8rem; display: flex; align-items: center; gap: .6rem; }
.section-title::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.section-sub { color: var(--soft); font-size: .85rem; margin-bottom: 1.2rem; }

/* ── Content card ─────────────────────────────────────────── */
.content-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1rem 1.1rem; box-shadow: var(--shadow); margin-bottom: .9rem; }

/* ── Sidebar box — white bg with red header strip ─────────── */
.sidebar-box { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 1.2rem; box-shadow: var(--shadow); }
.sidebar-box h2 { background: var(--red); color: #fff; font-family: var(--f-heading); font-size: .95rem; font-weight: 600; padding: .7rem 1rem; margin: 0; }
.sidebar-box-body { padding: 1rem; }

/* widget is an alias for sidebar-box */
.widget      { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 1.2rem; box-shadow: var(--shadow); }
.widget-head { background: var(--red); color: #fff; font-family: var(--f-heading); font-size: .95rem; font-weight: 600; padding: .7rem 1rem; }
.widget-body { padding: 1rem; }
/* Stat cards inside widgets (side-col is narrow ~280px) */
.widget .stat-row     { gap: .5rem; margin-bottom: 0; }
.widget .stat-card    { padding: .6rem .55rem; }
.widget .stat-card-num{ font-size: 1.25rem; }
.widget .stat-card-lbl{ font-size: .68rem; }

/* ── Plan cards — rich with featured badge + green checkmarks */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; margin-bottom: 2rem; }
.plan-card { background: var(--bg); border: 2px solid var(--border); border-radius: var(--r-xl); padding: 1.8rem 1.5rem; display: flex; flex-direction: column; gap: .8rem; transition: box-shadow .2s, border-color .2s; }
.plan-card:hover   { box-shadow: var(--shadow-md); border-color: #ccc; }
.plan-card.featured{ border-color: var(--gold); box-shadow: 0 0 0 3px rgba(184,134,11,.14); }
.plan-name { font-family: var(--f-heading); font-size: 1.3rem; color: var(--red); font-weight: 600; }
.plan-price { font-family: var(--f-heading); font-size: 2rem; color: var(--dark); line-height: 1; }
.plan-period{ font-size: .8rem; color: var(--soft); }
.plan-features { list-style: none; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.plan-features li { font-size: .88rem; color: var(--mid); display: flex; align-items: baseline; gap: .4rem; }
.plan-features li::before { content: '✓'; color: var(--green); font-weight: 700; flex-shrink: 0; }
.plan-features li.no::before { content: '✗'; color: #bbb; }
.plan-features li.no { color: var(--soft); }
.featured-badge { display: inline-block; background: var(--gold); color: #fff; font-size: .7rem; font-weight: 700; padding: .2rem .75rem; border-radius: 99px; text-transform: uppercase; letter-spacing: .08em; }

/* ── Step progress bar ────────────────────────────────────── */
.step-progress { display: flex; align-items: flex-start; gap: 0; margin-bottom: 2rem; }
.step-item { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; }
.step-item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 17px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--border);
  z-index: 0;
}
.step-item.done:not(:last-child)::after  { background: var(--red); }
.step-item.active:not(:last-child)::after { background: var(--red-lt); }
.step-num {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--bg);
  font-size: .82rem;
  font-weight: 700;
  color: var(--soft);
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
  transition: background .2s, border-color .2s, color .2s;
}
.step-item.done   .step-num  { background: var(--red); border-color: var(--red); color: #fff; }
.step-item.active .step-num  { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 0 0 4px var(--red-lt); }
.step-lbl { font-size: .7rem; color: var(--soft); margin-top: .4rem; text-align: center; line-height: 1.3; }
.step-item.active .step-lbl  { color: var(--red); font-weight: 600; }

/* Step panels — show/hide */
.step-panel { display: none; }
.step-panel.active { display: block; }
.step-title { font-family: var(--f-heading); font-size: 1.2rem; color: var(--red); margin-bottom: 1.5rem; padding-bottom: .6rem; border-bottom: 2px solid var(--red-lt); }
.step-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid var(--border); }

/* ── Upload zone ──────────────────────────────────────────── */
.upload-zone { border: 2px dashed var(--border); border-radius: var(--r-lg); padding: 2.5rem 1.5rem; text-align: center; background: var(--bg2); cursor: pointer; transition: border-color .15s, background .15s; }
.upload-zone:hover, .upload-zone.drag-over { border-color: var(--red); background: var(--red-lt); }
.upload-zone input[type=file] { display: none; }
.upload-icon { font-size: 2.5rem; margin-bottom: .8rem; color: var(--soft); }
.upload-text { font-size: .9rem; color: var(--mid); margin-bottom: .5rem; }
.upload-hint { font-size: .78rem; color: var(--soft); }
.photo-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .8rem; margin-top: 1.2rem; }
.photo-item  { position: relative; aspect-ratio: 3/4; border-radius: var(--r-md); overflow: hidden; background: var(--red-lt); }
.photo-item img { width: 100%; height: 100%; object-fit: cover; }
.photo-del   { position: absolute; top: .3rem; right: .3rem; background: rgba(0,0,0,.6); color: #fff; border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: 1rem; cursor: pointer; border: none; }

/* ── Event carousel ───────────────────────────────────────── */
.carousel-wrap {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 2rem;
  box-shadow: var(--shadow);
}
.carousel-track { display: flex; transition: transform .4s ease; }
.carousel-slide {
  flex: 0 0 100%;
  position: relative;
  background: var(--red-lt);
  min-height: 220px;
}
.carousel-slide img { width: 100%; height: 220px; object-fit: cover; display: block; background: var(--red-lt); }
.carousel-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,.72));
  padding: 2rem 1.2rem 1rem;
  color: #fff;
}
.carousel-caption h3 { font-family: var(--f-heading); color: #fff; font-size: 1.1rem; margin-bottom: .25rem; }
.carousel-date { display: inline-block; background: var(--red); color: #fff; font-size: .72rem; font-weight: 600; padding: .2rem .6rem; border-radius: 99px; margin-bottom: .4rem; }
.carousel-btn {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,.45);
  color: #fff;
  border: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
  z-index: 10;
}
.carousel-btn:hover { background: rgba(0,0,0,.7); }
.carousel-prev { left: .8rem; }
.carousel-next { right: .8rem; }
.carousel-dots { display: flex; justify-content: center; gap: .4rem; padding: .5rem 0; background: rgba(0,0,0,.6); }
.carousel-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.4); cursor: pointer; border: none; transition: background .15s; }
.carousel-dot.active { background: var(--gold); }

/* ── Volunteer — info grid, 2-col label/value ─────────────── */
.vol-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.2rem; display: flex; gap: 1rem; align-items: flex-start; margin-bottom: .9rem; box-shadow: var(--shadow); border-top: 3px solid var(--red); }
.vol-card-info    { flex: 1; min-width: 0; }
.vol-card-actions { display: flex; flex-direction: column; gap: .4rem; align-items: flex-end; flex-shrink: 0; }
.vol-name { font-family: var(--f-heading); font-size: 1.1rem; color: var(--dark); margin-bottom: .25rem; }

/* vol-info-grid: CSS grid 2-col label | value, no wrapping */
.vol-info-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .3rem .8rem;
  align-items: start;
  font-size: .9rem;
}
.vol-info-lbl { color: var(--soft); font-style: italic; white-space: nowrap; }
.vol-info-val { color: var(--dark); }

/* ── Assigned profile cards (volunteer) ───────────────────── */
.assigned-list { display: flex; flex-direction: column; gap: .8rem; }
.assigned-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  display: flex;
  gap: 1rem;
  padding: 1rem 1.2rem;
  align-items: center;
  box-shadow: var(--shadow);
  transition: box-shadow .2s;
}
.assigned-card:hover { box-shadow: var(--shadow-md); }
/* 64px circle photo */
.assigned-photo {
  width: 64px; height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--red-lt);
}
.assigned-info { flex: 1; min-width: 0; }
.assigned-name { font-family: var(--f-heading); font-size: 1rem; color: var(--dark); margin-bottom: .15rem; }
.assigned-id   { font-size: .78rem; color: var(--soft); }
.assigned-meta { font-size: .82rem; color: var(--mid); margin-top: .2rem; }
/* actions stay inside, flex-wrap */
.assigned-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; flex-shrink: 0; }

/* ── Receipt ──────────────────────────────────────────────── */
.receipt-card     { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 2rem; max-width: 560px; margin: 0 auto; box-shadow: var(--shadow-md); }
.receipt-logo-row { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.5rem; }
/* receipt-row */
.receipt-row      { display: flex; justify-content: space-between; padding: .5rem 0; border-bottom: 1px solid #eee; font-size: .9rem; gap: .5rem; }
.receipt-lbl { color: var(--soft); font-weight: 500; }
.receipt-val { color: var(--dark); font-weight: 600; text-align: right; }
/* receipt-total */
.receipt-total { font-weight: 700; color: var(--red); border-bottom: none; }
.receipt-total .receipt-lbl,
.receipt-total .receipt-val { color: var(--red); font-size: 1.05rem; }

/* ── Minimal footer — member/admin/volunteer ──────────────── */
.ftr-minimal a { color: var(--red); text-decoration: none; }
.ftr-minimal a:hover { color: var(--red-dk); }

/* ── Full footer — public pages only, 4-column ────────────── */
.ftr-full { background: #fdf5ec; color: var(--dark); border-top: 3px solid var(--red-md); }
.ftr-full .ftr-main {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2rem;
  max-width: 1120px;
  margin: 0 auto;
  padding: 3rem 1.2rem 2rem;
}
/* min-width: 0 on all grid children prevents nowrap content from blowing out columns */
.ftr-full .ftr-main > * { min-width: 0; }
/* block (not inline-flex) — inline-flex propagates nowrap min-width into the grid track */
.ftr-about-inner { display: block; }
.ftr-brand-row { display: flex; align-items: center; gap: 1rem; margin-bottom: .9rem; flex-wrap: nowrap; }
.ftr-logo    { width: 72px; height: 72px; flex-shrink: 0; display: block; }
.ftr-brand   { font-family: var(--f-heading); font-size: 1.25rem; color: var(--red); font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ftr-about p { font-size: .85rem; color: var(--soft); line-height: 1.8; max-width: 24rem; }
.ftr-full .ftr-col h4 { color: var(--soft); font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: .8rem; }
.ftr-full .ftr-col ul { display: flex; flex-direction: column; gap: .55rem; }
.ftr-full .ftr-col a  { color: var(--red); text-decoration: none; font-size: .85rem; transition: color .12s; }
.ftr-full .ftr-col a:hover { color: var(--red-dk); }
.ftr-social { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .25rem; }
.ftr-social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--red-lt); color: var(--red);
  font-size: 1.05rem; text-decoration: none;
  transition: background .15s, color .15s;
}
.ftr-social-link:hover { background: var(--red); color: #fff; }
.ftr-full .ftr-bottom {
  border-top: 1px solid var(--border);
  padding: 1rem 1.2rem;
  text-align: center;
  font-size: .8rem; color: var(--soft);
}
.ftr-minimal {
  background: #fdf5ec;
  color: var(--soft);
  border-top: 2px solid var(--border);
  text-align: center;
  padding: .9rem 1rem;
  font-size: .82rem;
}

/* ── Hero ─────────────────────────────────────────────────── */
.hero { background: linear-gradient(135deg, var(--red) 0%, #7a2010 100%); padding: 1.5rem 1.2rem; position: relative; overflow: hidden; border-bottom: 3px solid var(--red-md); }
.hero-inner  { max-width: 1120px; margin: 0 auto; display: flex; gap: 3rem; align-items: center; }
.hero-text   { flex: 1; }
.hero-tagline{ font-size: .8rem; color: var(--gold-lt); text-transform: uppercase; letter-spacing: .15em; margin-bottom: .8rem; font-weight: 600; }
.hero-heading{ font-family: var(--f-heading); font-size: clamp(2rem, 5vw, 3rem); color: #fff; line-height: 1.2; margin-bottom: .9rem; }
.hero-subhead{ font-family: var(--f-heading); font-size: clamp(.95rem, 1.8vw, 1.15rem); color: rgba(255,255,255,.8); margin-bottom: 2rem; font-style: italic; }
.hero-cta    { display: flex; gap: .8rem; flex-wrap: wrap; }
.hero-btn-primary {
  background: var(--gold); color: #fff; padding: .85rem 2rem;
  border-radius: var(--r-md); font-weight: 700; font-size: 1rem;
  text-decoration: none; min-height: var(--tap); display: inline-flex; align-items: center;
  transition: background .15s, transform .1s;
}
.hero-btn-primary:hover { background: #9a700a; transform: translateY(-2px); color: #fff; }
.hero-btn-secondary {
  background: rgba(255,255,255,.12); color: #fff; padding: .85rem 2rem;
  border-radius: var(--r-md); font-weight: 600; font-size: 1rem; text-decoration: none;
  border: 1.5px solid rgba(255,255,255,.4); min-height: var(--tap);
  display: inline-flex; align-items: center; transition: background .15s;
}
.hero-btn-secondary:hover { background: rgba(255,255,255,.2); color: #fff; }
.hero-visual { flex-shrink: 0; width: 360px; }
.hero-visual img { width: 100%; border-radius: var(--r-xl); box-shadow: var(--shadow-lg); background: var(--red-lt); }
.hero-stats { display: flex; gap: 2rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.2); flex-wrap: wrap; }
.hero-stat-num { font-family: var(--f-heading); font-size: 1.6rem; color: var(--gold-lt); line-height: 1; }
.hero-stat-lbl { font-size: .75rem; color: rgba(255,255,255,.6); }

/* ── E-boxes ──────────────────────────────────────────────── */
.e-boxes  { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 2rem 0; }
.e-box    { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.5rem; text-align: center; box-shadow: var(--shadow); }
.e-box-icon  { font-size: 2rem; margin-bottom: .8rem; }
.e-box-title { font-family: var(--f-heading); font-size: 1.1rem; color: var(--red); margin-bottom: .5rem; }
.e-box-text  { font-size: .85rem; color: var(--mid); }

/* ── Events ───────────────────────────────────────────────── */
.event-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.2rem; margin-bottom: 1.5rem; }
.event-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; transition: box-shadow .2s; }
.event-card:hover { box-shadow: var(--shadow-md); }
.event-card-img  { width: 100%; height: 160px; object-fit: cover; background: var(--red-lt); }
.event-card-date { display: inline-flex; align-items: center; background: var(--red); color: #fff; font-size: .72rem; font-weight: 600; padding: .3rem .75rem; margin: .8rem .8rem 0; border-radius: 99px; width: fit-content; }
.event-card-body { padding: .8rem; flex: 1; display: flex; flex-direction: column; gap: .4rem; }
.event-card-title{ font-family: var(--f-heading); font-size: 1rem; color: var(--dark); }
.event-card-desc { font-size: .82rem; color: var(--soft); flex: 1; }
.event-card-loc  { font-size: .78rem; color: var(--soft); }
.event-card-foot { padding: .8rem; border-top: 1px solid var(--border); display: flex; gap: .5rem; }

/* ── Modal ────────────────────────────────────────────────── */
.modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 500; align-items: center; justify-content: center; padding: 1rem; }
.modal-content { background: var(--bg); border-radius: var(--r-xl); max-width: 480px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg); }
.modal-header  { padding: 1.2rem 1.5rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.modal-header h2 { font-family: var(--f-heading); font-size: 1.1rem; color: var(--red); }
.modal-close   { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg2); font-size: 1.2rem; color: var(--soft); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background .12s; }
.modal-close:hover { background: #fdecea; color: #c0392b; }
.modal-body    { padding: 1.5rem; }
.modal-footer  { padding: 1rem 1.5rem; border-top: 1px solid var(--border); display: flex; gap: .6rem; justify-content: flex-end; }

/* ── FAQ accordion ────────────────────────────────────────── */
.faq-item  { border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: .6rem; overflow: hidden; }
.faq-q     { width: 100%; text-align: left; padding: 1rem 1.2rem; background: var(--bg2); font-weight: 600; font-size: .92rem; color: var(--dark); display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: var(--tap); transition: background .12s; }
.faq-q:hover { background: var(--red-lt); }
.faq-arrow { font-size: 1rem; color: var(--red); transition: transform .2s; flex-shrink: 0; }
.faq-item.open .faq-arrow { transform: rotate(180deg); }
.faq-a     { display: none; padding: .9rem 1.2rem; font-size: .88rem; color: var(--mid); background: var(--bg); line-height: 1.75; }
.faq-item.open .faq-a { display: block; }

/* ── High contrast ────────────────────────────────────────── */
body.hc {
  --red:    #000000;
  --red-dk: #000000;
  --red-lt: #ffff00;
  --gold:   #0055cc;
  --gold-lt:#e8f0ff;
  --bg:     #ffffff;
  --bg2:    #f0f0f0;
  --bg3:    #e8e8e8;
  --dark:   #000000;
  --mid:    #111111;
  --soft:   #444444;
  --border: #999999;
}

/* ── Utilities ────────────────────────────────────────────── */
.flex         { display: flex; align-items: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .8rem; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-col     { display: flex; flex-direction: column; }
.flex-wrap    { flex-wrap: wrap; }
.gap-xs       { gap: .3rem; }
.gap-sm       { gap: .6rem; }
.gap-md       { gap: 1rem; }
.gap-lg       { gap: 1.5rem; }
.mt-xs        { margin-top: .3rem; }
.mt-sm        { margin-top: .6rem; }
.mt-md        { margin-top: 1.2rem; }
.mt-lg        { margin-top: 2rem; }
.mb-sm        { margin-bottom: .6rem; }
.mb-md        { margin-bottom: 1.2rem; }
.mb-lg        { margin-bottom: 2rem; }
.pt-md        { padding-top: 1.2rem; }
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-muted   { color: var(--soft); }
.text-sm      { font-size: .82rem; }
.text-xs      { font-size: .75rem; }
.fw-bold      { font-weight: 700; }
.fw-semi      { font-weight: 600; }
.w-full       { width: 100%; }
.opacity-60   { opacity: .6; }
.d-none       { display: none !important; }
.separator    { border: none; border-top: 1px solid var(--border); margin: 1.2rem 0; }
.highlight-box{ background: var(--gold-lt); border: 1px solid #f0cc88; border-radius: var(--r-md); padding: .9rem 1.1rem; font-size: .88rem; color: var(--mid); }
.ml-auto      { margin-left: auto; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* admin sidebar: slides in on mobile */
  .admin-sidebar {
    position: fixed; top: 0; left: -260px; height: 100vh;
    z-index: 400; transition: left .25s ease; padding-top: var(--hdr-h);
  }
  .admin-sidebar.sb-open { left: 0; box-shadow: var(--shadow-lg); }
  .sb-toggle-btn { display: flex; }
  .admin-main { padding: 1.2rem 1rem; }
  .admin-main > .page-banner { margin-left: -1rem; margin-right: -1rem; }
}

@media (max-width: 900px) {
  /* two-col stacks and stretches children to full width */
  .two-col      { flex-direction: column; align-items: stretch; }
  .main-col, .side-col { width: 100%; min-width: 0; }
  /* body-wrap grid: sidebar must collapse to single column (flex rules don't affect grid) */
  .body-wrap .two-col { grid-template-columns: 1fr; }
  /* Three E cards: 2 columns on tablet, 1 on phone */
  .three-e { grid-template-columns: 1fr 1fr; }
  /* Show Pages links inside hamburger nav; hide desktop dropdown */
  .hdr-nav-pages-mobile { display: block; }
  .hdr-dd { display: none !important; }
  /* filter: static when stacked */
  .search-layout{ flex-direction: column; }
  .filter-sidebar { width: 100%; position: static; max-height: none; }
  .ftr-full .ftr-main { grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; }
  .ftr-about   { grid-column: 1 / -1; }
  .hero-inner  { flex-direction: column; gap: 2rem; }
  .hero-visual { width: 100%; max-width: 360px; }
  .profile-detail-wrap { flex-direction: column; }
  .profile-sidebar-col { width: 100%; }
  .profile-main-photo  { margin: 0 auto 1rem; }
  .profile-quicknav { top: var(--hdr-h); }
}

/* ── Responsive: admin/member/volunteer sidebar ───────────── */
@media (max-width: 767px) {
  /* Revert to normal flow on mobile — sidebar slides in as overlay */
  .app-layout, .admin-layout { height: auto; overflow: visible; }
  .admin-sidebar, .app-sidebar {
    position: fixed; left: 0; top: var(--hdr-h); bottom: 0;
    width: min(80vw, 290px); height: auto;
    transform: translateX(-100%); z-index: 400;
    box-shadow: 4px 0 24px rgba(0,0,0,.22);
    overflow-y: auto;
  }
  .admin-sidebar.sb-open, .app-sidebar.sb-open {
    transform: translateX(0);
  }
  .admin-main, .app-main, .app-layout > main {
    height: auto; overflow: visible; padding: .9rem 0;
  }
  /* Hide collapse/expand pin on mobile — no use for it */
  .sb-pin { display: none !important; }
  /* Mobile header: show hamburger always for auth pages */
  body[data-auth="admin"] .hb,
  body[data-auth="member"] .hb,
  body[data-auth="volunteer"] .hb { display: flex !important; }
}

/* ── Logo abbreviation on public pages (which have inline nav) ── */
@media (max-width: 1400px) {
  body[data-auth="public"] .logo-full    { display: none; }
  body[data-auth="public"] .logo-abbr   { display: block; font-size: 1rem; font-weight: 800; }
  body[data-auth="public"] .logo-divider { display: none; }
}

@media (max-width: 900px) {
  /* Public inline nav collapses into vertical dropdown */
  .hdr-nav {
    display: none; flex-direction: column;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--nav-bg); padding: .5rem 0;
    z-index: 490; box-shadow: 0 8px 20px rgba(0,0,0,.25);
  }
  .hdr-nav.open { display: flex; }
  .hdr-nav-link {
    border-bottom: 1px solid rgba(255,255,255,.08); border-left: 3px solid transparent;
    padding: .78rem 1.3rem; min-height: 48px; font-size: .88rem;
  }
  .hdr-nav-cur  { border-left-color: var(--gold); }
  .hb { display: flex; }
  /* Hide Register button — hamburger nav covers it */
  .hdr-actions .btn-solid-hdr { display: none; }
  /* Hide all text/accessibility tools — too crowded on mobile, hamburger nav is primary */
  .hdr-a11y { display: none !important; }
  /* Pages dropdown is desktop-only — hidden on mobile (outside hamburger nav) */
  .hdr-dd { display: none !important; }
}

@media (max-width: 768px) {
  :root { --hdr-h: 52px; }
  .hb   { display: flex; }
  .hdr-actions { gap: .2rem; }
  .logo-divider { display: none; }
  .logo-full    { display: none; }
  .logo-abbr    { display: block; font-size: 1.15rem; font-weight: 800; }
  /* Admin/member layout: stack content full-width */
  .admin-main .two-col, .app-layout .two-col { grid-template-columns: 1fr; }
  .small-boxes { grid-template-columns: repeat(2, 1fr); }
  .fld-row, .fld-row-3 { grid-template-columns: 1fr; }
  .profile-card { flex-direction: column; }
  .profile-card-actions { flex-direction: row; flex-wrap: wrap; }
  .psc-row { flex-direction: column; }
  .interest-card { flex-direction: column; }
  .interest-card-actions { flex-direction: row; flex-wrap: wrap; }
  .plan-grid { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto 2rem; }
  .modal-content { border-radius: var(--r-lg); }
  .profile-lbl { width: 40%; }
  /* assigned cards: photo+name top, actions below */
  .assigned-card { flex-wrap: wrap; }
  .assigned-actions { width: 100%; justify-content: flex-start; margin-top: .6rem; }
  .vol-card { flex-direction: column; }
  .vol-card-actions { flex-direction: row; }
}

@media (max-width: 560px) {
  .pw, .pw-md, .pw-sm { padding: 1.2rem .9rem; }
  .form-card    { padding: 1.2rem .9rem; border-radius: var(--r-md); }
  .stat-row     { grid-template-columns: 1fr 1fr; }
  .small-boxes  { grid-template-columns: 1fr 1fr; }
  .three-e      { grid-template-columns: 1fr; }
  .hero         { padding: 2.5rem .9rem; }
  .hero-stats   { gap: 1.2rem; }
  .ftr-full .ftr-main { grid-template-columns: 1fr 1fr; gap: 1.2rem; }
  .ftr-brand { font-size: 1.05rem; }
  .page-banner  { padding: 1.4rem .9rem; }
  .msg-bubble   { max-width: 90%; }
  .profile-lbl  { width: 45%; font-size: .82rem; }
  .profile-val  { font-size: .85rem; }
  .receipt-card { padding: 1.2rem; }
  .lang-toggle  { font-size: .75rem; padding: .35rem .5rem; }
  .step-lbl     { display: none; }
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  #hdr, #bspd-nav, .admin-sidebar, #ftr, .hdr-right,
  .ftr-minimal, .ftr-full, .profile-quicknav { display: none !important; }
  .pw, .pw-md, .pw-sm { max-width: 100%; padding: 0; }
  .receipt-card { box-shadow: none; border: 1px solid #ccc; }
  body { font-size: 12pt; }
}

/* ── Quick action grid (member dashboard) ────────────────── */
.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
}
.qa-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .4rem; padding: 1rem .5rem;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg);
  color: var(--dark); text-align: center; font-size: .82rem; font-weight: 600;
  box-shadow: var(--shadow); transition: box-shadow .15s, transform .15s;
  text-decoration: none; min-height: 80px;
}
.qa-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); color: var(--red); }
.qa-card.qa-amber { border-top: 3px solid var(--gold); }
.qa-card.qa-green { border-top: 3px solid var(--green); }
.qa-card.qa-blue  { border-top: 3px solid #2980b9; }
.qa-icon { font-size: 1.5rem; line-height: 1; }

/* ── Admin Quick Action list ─────────────────────────────── */
.qa-list { display: flex; flex-direction: column; gap: .5rem; }
.qa-item {
  display: flex; align-items: center; gap: .65rem;
  padding: .65rem .85rem; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--bg);
  text-decoration: none; color: var(--dark);
  font-size: .85rem; font-weight: 500;
  transition: background .12s, box-shadow .12s;
}
.qa-item:hover { background: var(--red-lt); box-shadow: var(--shadow); }
.qa-num  { font-size: 1.1rem; font-weight: 700; width: 2.2rem; text-align: center; flex-shrink: 0; }
.qa-icon { font-size: 1.1rem; width: 2.2rem; text-align: center; flex-shrink: 0; }
.qa-label{ flex: 1; }
.qa-arrow{ color: var(--mid); font-size: .9rem; flex-shrink: 0; }
.qa-item-red    { border-left: 3px solid var(--red); } .qa-item-red .qa-num { color: var(--red); }
.qa-item-blue   { border-left: 3px solid #2980b9; }  .qa-item-blue .qa-num { color: #2980b9; }
.qa-item-amber  { border-left: 3px solid var(--gold); } .qa-item-amber .qa-num { color: #b5810a; }
.qa-item-plain  { border-left: 3px solid var(--border); }

/* ── Search results grid ─────────────────────────────────── */
.results-grid { display: flex; flex-direction: column; gap: .8rem; }
.result-card {
  display: flex; gap: 1rem; align-items: center;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 1rem; box-shadow: var(--shadow);
  transition: box-shadow .15s;
}
.result-card:hover { box-shadow: var(--shadow-md); }
.result-photo { flex-shrink: 0; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: var(--red-lt); }
.result-photo img { width: 100%; height: 100%; object-fit: cover; }
.result-body  { flex: 1; min-width: 0; }
.result-name  { font-family: var(--f-heading); font-size: 1rem; font-weight: 600; color: var(--dark); }
.result-id    { font-size: .75rem; color: var(--soft); margin-bottom: .3rem; }
.result-tags  { display: flex; flex-wrap: wrap; gap: .3rem; }
.result-tags span { background: var(--red-lt); color: var(--red); border-radius: 99px; padding: .15rem .55rem; font-size: .72rem; font-weight: 600; }
.result-actions { display: flex; flex-direction: column; gap: .4rem; flex-shrink: 0; }

/* ── Search filter groups ────────────────────────────────── */
.filter-group { border-bottom: 1px solid var(--border); padding: .8rem 0; }
.filter-group:first-child { padding-top: 0; }
.filter-group-title { font-family: var(--f-heading); font-size: .78rem; color: var(--red); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; margin-bottom: .5rem; }

/* Mobile filter toggle */
.filter-toggle-mobile { display: none; margin-bottom: .8rem; background: var(--red-lt); color: var(--red); border: 1px solid var(--red); border-radius: var(--r-md); padding: .55rem 1rem; font-weight: 600; font-size: .88rem; cursor: pointer; }

/* ── Profile hero card ───────────────────────────────────── */
.profile-hero-card {
  display: flex; gap: 1.5rem; align-items: flex-start;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 1.5rem; box-shadow: var(--shadow); margin-bottom: 1.2rem;
}
.profile-hero-photos { flex-shrink: 0; }
.profile-hero-img { width: 120px; height: 140px; border-radius: var(--r-lg); object-fit: cover; background: var(--red-lt); border: 2px solid var(--red-lt); }
.profile-hero-info { flex: 1; min-width: 0; }
.profile-hero-info h1 { font-size: 1.4rem; color: var(--dark); margin-bottom: .4rem; }
.profile-id-line { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .6rem; }
.profile-hero-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1rem; }
.profile-hero-tags span { background: var(--bg3); border: 1px solid var(--border); color: var(--mid); border-radius: 99px; padding: .2rem .65rem; font-size: .78rem; }
.profile-hero-actions { display: flex; gap: .6rem; flex-wrap: wrap; }

/* ── Profile section ─────────────────────────────────────── */
.profile-section { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.5rem; margin-bottom: 1.2rem; box-shadow: var(--shadow); scroll-margin-top: 130px; }
.profile-section-title { font-family: var(--f-heading); font-size: 1.05rem; color: var(--red); border-bottom: 2px solid var(--red-lt); padding-bottom: .5rem; margin-bottom: 1rem; font-style: italic; }

/* Profile detail key/value grid */
.profile-details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.pd-item { display: flex; flex-direction: column; }
.pd-lbl  { font-size: .72rem; color: var(--soft); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.pd-val  { font-size: .9rem; color: var(--dark); font-weight: 500; }
.profile-about-text { font-size: .9rem; color: var(--mid); }
.profile-about-text p { margin: 0; }

/* ── Profile page layout (detail wrap) ──────────────────── */
.profile-detail-wrap { display: flex; gap: 2rem; align-items: flex-start; }
.profile-main  { flex: 1; min-width: 0; }
.profile-sidebar { width: 240px; flex-shrink: 0; position: sticky; top: calc(var(--hdr-h) + 1rem); }

/* ── Profile quick-nav (inner) ───────────────────────────── */
.pqn-inner { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; padding: .1rem .2rem; }
.pqn-inner::-webkit-scrollbar { display: none; }

/* ── Horoscope chart display ─────────────────────────────── */
.horoscope-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: .5rem; }
.hor-chart-title { font-family: var(--f-heading); font-size: .82rem; color: var(--red); text-align: center; margin-bottom: .4rem; font-style: italic; }
.hor-chart {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border); border-radius: var(--r-md);
  overflow: hidden;
}
.hor-cell {
  border: 1px solid var(--border); min-height: 48px; background: var(--bg2);
  display: flex; align-items: center; justify-content: center; font-size: .7rem; color: var(--soft);
}
.hor-center { background: var(--red-lt); color: var(--red); font-family: var(--f-heading); font-style: italic; font-size: .78rem; }

/* ── Photo locked state ──────────────────────────────────── */
.photo-locked { position: relative; background: var(--bg3) !important; display: flex; align-items: center; justify-content: center; }
.photo-locked img { display: none; }
.photo-lock-msg { text-align: center; color: var(--soft); font-size: .72rem; line-height: 1.5; padding: .5rem; }

/* ── Step connector (alt — visual connector div) ─────────── */
.step-connector { flex: 1; height: 2px; background: var(--border); margin-top: 18px; }

/* ── Infobox ─────────────────────────────────────────────── */
.infobox { background: var(--gold-lt); border: 1px solid var(--gold); border-radius: var(--r-md); padding: .9rem 1rem; color: var(--mid); font-size: .88rem; }

/* ── Mobile sidebar backdrop ─────────────────────────────── */
.sb-backdrop {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.4); z-index: 399;
}
.sb-backdrop.show { display: block; }

/* ── Responsive additions ────────────────────────────────── */
@media (max-width: 900px) {
  .quick-actions-grid { grid-template-columns: repeat(3, 1fr); }
  .profile-hero-card  { flex-direction: column; }
  .profile-hero-img   { width: 100%; height: 180px; }
  .profile-details-grid { grid-template-columns: 1fr; }
  .profile-detail-wrap { flex-direction: column; }
  .profile-sidebar { width: 100%; position: static; }
  .horoscope-charts { grid-template-columns: 1fr; }
  .filter-toggle-mobile { display: block; }
  .filter-sidebar { display: none; }
  .filter-sidebar.filter-open { display: block; position: static; max-height: none; }
  .result-actions { flex-direction: row; }
}

@media (max-width: 560px) {
  .quick-actions-grid { grid-template-columns: repeat(2, 1fr); }
  .result-card { flex-wrap: wrap; }
  .result-actions { width: 100%; flex-direction: row; flex-wrap: wrap; }
  .profile-hero-actions { flex-direction: column; }
}

/* ── Text utilities ─────────────────────────────────────── */
.text-center { text-align: center; }
.mt-lg  { margin-top: 2.5rem; }
.mb-lg  { margin-bottom: 2.5rem; }
.mt-md  { margin-top: 1.5rem; }
.mb-md  { margin-bottom: 1.5rem; }

/* ── Hero (index.html split layout) — mobile-first ──────── */
.hero {
  display: grid; grid-template-columns: 1fr;   /* single column on mobile */
  overflow: hidden;
  background: linear-gradient(115deg, #e4c8bc 0%, #f7ede6 45%, #fdf8f5 100%);
}
@media (min-width: 901px) {
  /* Desktop: side-by-side split */
  .hero { grid-template-columns: 56% 44%; }
  .hero-left { padding: 1.8rem 2rem 1.8rem max(1.2rem, calc((100vw - 1280px) / 2 + 1.2rem)); }
}
.hero-left {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  padding: 1.5rem 1.2rem;   /* mobile-first padding — desktop overridden above */
  gap: .5rem;
  overflow: hidden;
}
/* Large watermark logo — behind all hero text */
.hero-left::before {
  content: '';
  position: absolute;
  inset: -10%;
  background-image: url('../images/logos/bspdlogo.svg');
  background-size: 65%;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.09;
  pointer-events: none;
  z-index: 0;
}
/* Keep all hero-left content above the watermark */
.hero-left > * { position: relative; z-index: 1; }
.hero-eyebrow { font-size: .74rem; letter-spacing: .09em; text-transform: uppercase; color: var(--gold-dk); font-family: var(--f-ui); font-weight: 600; margin-bottom: 0; }
.hero-left h1 { font-size: clamp(2rem, 2.8vw, 2.8rem); line-height: 1.2; margin-bottom: 0; color: var(--dark); }
.hero-left h1 em { color: var(--red); font-style: italic; }
.hero-sub { font-size: .9rem; line-height: 1.6; color: var(--mid); max-width: 460px; margin-bottom: 0; }
.hero-btns { display: flex; gap: .55rem; flex-wrap: wrap; margin-bottom: 0; }
.btn-hp {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--red); color: #fff; font-family: var(--f-ui);
  font-size: .86rem; font-weight: 600; border-radius: var(--r-md);
  padding: .55rem 1.2rem; text-decoration: none;
  transition: background .2s, transform .1s;
}
.btn-hp:hover { background: var(--red-dk); transform: translateY(-1px); }
.btn-hs {
  display: inline-flex; align-items: center; gap: .35rem;
  background: transparent; color: var(--red); font-family: var(--f-ui);
  font-size: .86rem; font-weight: 600; border: 1.5px solid var(--red);
  border-radius: var(--r-md); padding: .55rem 1.2rem; text-decoration: none;
  transition: background .2s, color .2s;
}
.btn-hs:hover { background: var(--red); color: #fff; }
.hero-stats { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.hstat { display: flex; flex-direction: column; }
.hstat-n { font-family: var(--f-heading); font-size: 1.35rem; font-weight: 600; color: var(--red); line-height: 1; }
.hstat-l { font-size: .72rem; color: var(--soft); font-family: var(--f-ui); margin-top: .12rem; }
.hero-right { position: relative; overflow: clip; isolation: isolate; }
.hero-right-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to right, #e4c8bc 0%, transparent 35%);
  z-index: 2; pointer-events: none;
}

/* ── Hero marquee (right side — continuous image scroll) ─── */
.hero-marquee { width: 100%; height: 100%; overflow: clip; }
.hero-marquee-track {
  display: flex; gap: 8px; width: max-content; height: 100%;
  animation: heroScroll 60s linear infinite;
  will-change: transform;
}
.hero-marquee-track:hover { animation-play-state: paused; }
.hero-marquee-track img {
  height: 100%; width: auto;   /* fills the exact .hero height; aspect ratio preserved */
  object-fit: cover; display: block; flex-shrink: 0;
  border-radius: 6px;
  background: var(--red-lt);
}
@keyframes heroScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 4px)); }
}

/* ── Hero responsive ────────────────────────────────────── */
@media (max-width: 900px) {
  /* grid-template-columns already 1fr from base — just set sizes */
  .hero-left h1 { font-size: clamp(1.6rem, 5vw, 2.2rem); }
  .hero-sub { font-size: .92rem; }
  /* Image strip below text — tall enough to be appreciable */
  .hero-right { height: 220px; }
}
@media (max-width: 480px) {
  .hero-left h1 { font-size: 1.5rem; }
  .hero-sub { font-size: .88rem; }
  .hero-right { height: 170px; }
  .hstat-n { font-size: 1.1rem; }
}

/* ── Body wrap two-col ──────────────────────────────────── */
.body-wrap { padding: 1.5rem 0; }
.body-wrap .two-col { display: grid; grid-template-columns: 1fr 260px; gap: 1.5rem; }
.body-wrap .two-col > * { min-width: 0; }
.content {}
.sidebar { display: flex; flex-direction: column; gap: 1.5rem; }
.sb { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1rem 1.25rem; }
.sb-hd { display: block; font-family: var(--f-heading); font-size: .98rem; font-weight: 600; color: var(--red); margin-bottom: .75rem; border-bottom: 1px solid var(--border); padding-bottom: .5rem; }
.ql { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .3rem; }
.ql li a { display: block; font-size: .9rem; color: var(--mid); padding: .3rem 0; text-decoration: none; border-bottom: 1px dotted var(--border); transition: color .15s; }
.ql li:last-child a { border-bottom: none; }
.ql li a:hover { color: var(--red); }
.eml { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .6rem; }
.eml li a { display: flex; gap: .65rem; align-items: center; text-decoration: none; color: var(--text); font-size: .88rem; transition: color .15s; }
.eml li a:hover { color: var(--red); }
.eml li a img { width: 60px; height: 44px; object-fit: cover; border-radius: var(--r-sm); flex-shrink: 0; background: var(--red-lt); }
.eml li a span { flex: 1; line-height: 1.4; }

/* ── Three E cards ──────────────────────────────────────── */
.three-e { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 1rem; }
.ec { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.5rem 1.25rem; text-align: center; box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s; }
.ec:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.ec-letter { width: 52px; height: 52px; border-radius: 50%; background: var(--red); color: #fff; font-family: var(--f-heading); font-size: 1.6rem; font-weight: 600; display: flex; align-items: center; justify-content: center; margin: 0 auto .75rem; }
.ec-title { font-family: var(--f-heading); font-size: 1.1rem; font-weight: 600; color: var(--dark); margin-bottom: .4rem; }
.ec-desc { font-size: .88rem; color: var(--mid); line-height: 1.6; }

/* ── Plan grid ──────────────────────────────────────────── */
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 1.25rem; }
.plan-grid-lg { max-width: 960px; margin-left: auto; margin-right: auto; }
.plan-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 2rem 1.5rem; display: flex; flex-direction: column; gap: .75rem; position: relative; box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s; }
.plan-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.plan-card.plan-featured { border: 2px solid var(--red); }
.plan-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--red); color: #fff; font-size: .72rem; font-weight: 700; font-family: var(--f-ui); letter-spacing: .06em; text-transform: uppercase; padding: .2rem .7rem; border-radius: 99px; white-space: nowrap; }
.plan-icon { font-size: 2rem; text-align: center; }
.plan-name { font-family: var(--f-heading); font-size: 1.3rem; font-weight: 600; color: var(--dark); text-align: center; }
.plan-price { font-family: var(--f-ui); font-size: 1.8rem; font-weight: 700; color: var(--red); text-align: center; line-height: 1.2; }
.plan-price span { font-size: .85rem; font-weight: 400; color: var(--soft); }
.plan-features { list-style: none; padding: 0; margin: 0; flex: 1; display: flex; flex-direction: column; gap: .45rem; }
.plan-features li { font-size: .88rem; color: var(--mid); padding-left: 1.2rem; position: relative; }
.plan-features li::before { content: '✓'; position: absolute; left: 0; color: var(--red); font-weight: 700; }

/* ── Shloka block ───────────────────────────────────────── */
.shloka { background: var(--red-lt); border-left: 3px solid var(--red); border-radius: 0 var(--r-md) var(--r-md) 0; padding: 1rem 1.25rem; margin: 1.25rem 0; }
.shloka-text { font-family: var(--f-heading); font-size: 1.05rem; color: var(--red); line-height: 1.8; }
.shloka-src { font-size: .78rem; color: var(--soft); margin-top: .4rem; font-style: italic; }

/* ── Events grid ────────────────────────────────────────── */
.events-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.event-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s; }
.event-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.event-img { aspect-ratio: 16/9; overflow: hidden; background: var(--red-lt); }
.event-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.event-body { padding: 1.25rem; }
.event-date-chip { display: inline-block; background: var(--red); color: #fff; font-size: .72rem; font-weight: 700; font-family: var(--f-ui); letter-spacing: .05em; text-transform: uppercase; padding: .2rem .65rem; border-radius: 99px; margin-bottom: .6rem; }
.event-title { font-family: var(--f-heading); font-size: 1.05rem; font-weight: 600; color: var(--dark); margin-bottom: .5rem; }
.event-desc { font-size: .88rem; color: var(--mid); line-height: 1.65; margin-bottom: .75rem; }
.event-meta { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .78rem; color: var(--soft); font-family: var(--f-ui); }

/* ── Data table ─────────────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.data-table th { background: var(--red); color: #fff; font-family: var(--f-ui); font-weight: 600; padding: .65rem 1rem; text-align: left; white-space: nowrap; }
.data-table td { padding: .6rem 1rem; border-bottom: 1px solid var(--border); color: var(--mid); }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:nth-child(even) td { background: var(--red-lt); }

/* ── Layout responsive (late — must come after all base styles above) ─ */
@media (max-width: 900px) {
  /* Body sidebar collapses */
  .body-wrap .two-col { grid-template-columns: 1fr; }
  .three-e { grid-template-columns: 1fr; }
  .plan-grid { grid-template-columns: 1fr; }
  .events-grid { grid-template-columns: 1fr; }
  /* Header: push hdr-right to far right — nav is display:none so no flex spacer */
  #hdr { justify-content: space-between; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .plan-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .plan-card { padding: 1.5rem 1rem; }
  .events-grid { grid-template-columns: repeat(2, 1fr); }
}