/* Philatelist.co.in - Shared Stylesheet */
/* change313 - imports must precede every normal CSS rule or browsers may
   discard them and fall back to Times/Arial. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=DM+Sans:wght@300;400;500;600&family=Roboto:wght@400;500;700&family=Caveat:wght@500;700&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #0f0e0c; --bg2: #161512; --bg3: #1e1c18;
  --gold: #c9a84c; --gold-lt: #e2c97e; --gold-dim: rgba(201,168,76,0.18);
  --text: #e8e2d6; --muted: #9a9284; --white: #f5f0e8; --border: #2a2720;
  --header-h: 60px; --bottom-h: 56px;
  /* Change 89 - theme system: font/radius are now variables so [data-theme="whatsapp"]
     below can override them site-wide. Default theme values match what was
     previously hardcoded everywhere (Cormorant Garamond/DM Sans, 3px radius). */
  --font-head: 'Cormorant Garamond', serif;
  --font-body: 'DM Sans', sans-serif;
  --radius-btn: 3px;
  /* Future-ready semantic aliases. Existing component variables remain the
     compatibility layer; new layouts should consume these semantic tokens. */
  --surface-page: var(--bg);
  --surface-panel: var(--bg2);
  --surface-raised: var(--bg3);
  --color-accent: var(--gold);
  --color-accent-soft: var(--gold-dim);
  --color-text: var(--text);
  --color-text-muted: var(--muted);
  --color-line: var(--border);
  --color-success: #7fd99a;
  --color-danger: #d96c6c;
  --color-danger-soft: rgba(217,108,108,0.1);
  --color-on-accent: var(--bg);
  --radius-card: 8px;
  --shadow-card: 0 8px 24px rgba(0,0,0,0.18);
  --content-max: 1200px;
  /* change315 - shared layout scale. Page families choose a width tier but
     consume the same gutters and vertical rhythm on every viewport. */
  --content-narrow: 560px;
  --content-form: 640px;
  --content-standard: 720px;
  --content-wide: 1180px;
  --page-gutter: clamp(16px, 3vw, 32px);
  --page-gutter-wide: clamp(16px, 4.4vw, 60px);
  --space-page-top: clamp(22px, 4vw, 40px);
  --space-hero-bottom: clamp(20px, 3vw, 32px);
  --space-section: clamp(20px, 3vw, 32px);
  --space-card: clamp(14px, 2vw, 18px);
  --space-card-gap: clamp(10px, 1.5vw, 14px);
  --text-page-title: clamp(24px, 4vw, 36px);
  --text-card-title: clamp(14px, 1.6vw, 17px);
  --text-small-readable: 12px;
}
/* ============================================
   Change 89 - WhatsApp theme overrides
   Verified colors from WhatsApp's actual brand/app palette. Font and radius
   variables above get overridden here; every rule elsewhere in this file that
   uses var(--font-head)/var(--font-body)/var(--radius-btn) picks this up
   automatically - no per-page changes needed. See header.php for how the
   data-theme attribute gets set (cookie-based) and footer.php for the selector.
   ============================================ */
[data-theme="whatsapp"] {
  --bg: #111b21; --bg2: #1f2c34; --bg3: #202c33;
  --gold: #25D366; --gold-lt: #DCF8C6; --gold-dim: rgba(37,211,102,0.18);
  --text: #e9edef; --muted: #8696a0; --white: #ffffff; --border: #2a3942;
  --font-head: 'Roboto', sans-serif;
  --font-body: 'Roboto', sans-serif;
  --radius-btn: 24px;
  --color-success: #53bdeb;
  --color-danger: #ff6b6b;
  --color-danger-soft: rgba(255,107,107,0.12);
  --radius-card: 12px;
}
/* change269 - QR block set to white text specifically for WhatsApp theme,
   per Dipen's direct request (green block, white text). */
[data-theme="whatsapp"] .profile-qr-block { color: #ffffff; }
[data-theme="whatsapp"] .dir-pill-inner { color: #ffffff; }
/* change162 - Light theme, Facebook's actual real brand palette per Dipen's
   confirmation: background #F0F2F5, primary blue #1877F2, dark text
   #050505/#1C1E21. --white is repurposed here (as it already is for other
   themes) to mean "highest-contrast text", not literally white - on a light
   background that's dark text, matching how the variable is actually used
   throughout the site's components. */
/* change351 - --gold-lt was #E7F3FF, a near-white tint tuned for use as
   highlight text against a dark background - on this theme's own white
   card background it was almost invisible (secondary labels, hover
   states, active-tab highlights sitewide). Re-tuned to a legible mid
   blue, kept visually distinct from the main --gold accent. */
[data-theme="light"] {
  --bg: #F0F2F5; --bg2: #FFFFFF; --bg3: #E4E6EB;
  --gold: #1877F2; --gold-lt: #3E72D6; --gold-dim: rgba(24,119,242,0.12);
  --text: #1C1E21; --muted: #65676B; --white: #050505; --border: #CED0D4;
  --font-head: 'Roboto', sans-serif;
  --font-body: 'Roboto', sans-serif;
  --radius-btn: 6px;
  --color-success: #2e7d32;
  --color-danger: #c62828;
  --color-danger-soft: rgba(198,40,40,0.09);
  --color-on-accent: #ffffff;
  --radius-card: 10px;
}
/* change169 - scoped duplicate of :root's own values, purely so the theme
   picker's "Classic" preview button can show its real colors via the same
   data-theme attribute-scoping trick the other 3 buttons already rely on. */
[data-theme="classic"] {
  --bg: #0f0e0c; --bg2: #161512; --bg3: #1e1c18;
  --gold: #c9a84c; --gold-lt: #e2c97e; --gold-dim: rgba(201,168,76,0.18);
  --text: #e8e2d6; --muted: #9a9284; --white: #f5f0e8; --border: #2a2720;
}
/* Buttons using --gold as background need light text for contrast on FB's
   bright blue - same pattern already used for the WhatsApp green button. */
[data-theme="light"] .btn-primary { color: #ffffff; }
[data-theme="light"] .profile-qr-block { color: #ffffff; }
[data-theme="light"] .dir-pill-inner { color: #ffffff; }
/* change163 - header, bottom-nav, hero background, icon-pill, and the map
   state-label badge were all hardcoded to the default dark color directly
   (not driven by --bg), so they stayed dark under WhatsApp theme too - it
   just never showed because WhatsApp theme is also dark. A light theme
   makes that immediately visible, so these need real light-theme values,
   not a variable that was never there to begin with. */
[data-theme="light"] header { background: rgba(255,255,255,0.97); }
[data-theme="light"] .bottom-nav { background: rgba(255,255,255,0.98); }
[data-theme="light"] .hero-bg { background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(24,119,242,0.08) 0%, transparent 70%), linear-gradient(180deg,#F0F2F5 0%,#FFFFFF 100%); }
[data-theme="light"] .icon-pill { background: rgba(255,255,255,0.85); }
[data-theme="light"] .india-state-label { background: rgba(255,255,255,0.9); color: var(--text); }
/* change164 - hero-arrow carousel buttons kept a hardcoded dark circle background
   regardless of theme (missed in the Light-theme sweep); Light theme gets the
   same light-surface treatment as .icon-pill for consistency. */
[data-theme="light"] .hero-arrow { background: rgba(255,255,255,0.85); }
/* change351 - the round page-level Share button (renderShareButton(),
   used across ~15 module detail pages) was hardcoded to a dark circle
   regardless of theme, same missed-in-the-Light-theme-sweep pattern as
   .icon-pill/.hero-arrow above - light-surface treatment applied here too. */
[data-theme="light"] .page-share-btn { background: rgba(255,255,255,0.85); }

/* change166 (Batch B) - Instagram theme: identical to the Light/FB theme above
   in every surface color (--bg/--bg2/--bg3/--text/--muted/--white/--border and
   all the hardcoded near-white overrides for header/bottom-nav/hero-bg/icon-pill/
   map-labels/hero-arrow) - only the accent color is swapped to Instagram orange. */
/* change351 - --gold-lt was #F5A469, a lighter tone than needed against
   this theme's white background too (weaker case than the Light/blue
   theme, but still under normal readability contrast) - re-tuned to a
   deeper, still-orange, legible shade. */
[data-theme="instagram"] {
  --bg: #F0F2F5; --bg2: #FFFFFF; --bg3: #E4E6EB;
  --gold: #D9622B; --gold-lt: #B36530; --gold-dim: rgba(217,98,43,0.12);
  --text: #1C1E21; --muted: #65676B; --white: #050505; --border: #CED0D4;
  --font-head: 'DM Sans', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --radius-btn: 6px;
  --color-success: #2e7d32;
  --color-danger: #c62828;
  --color-danger-soft: rgba(198,40,40,0.09);
  --color-on-accent: #ffffff;
  --radius-card: 14px;
}
[data-theme="instagram"] .btn-primary { color: #ffffff; }
[data-theme="instagram"] .profile-qr-block { color: #ffffff; }
[data-theme="instagram"] .dir-pill-inner { color: #ffffff; }
[data-theme="instagram"] header { background: rgba(255,255,255,0.97); }
[data-theme="instagram"] .bottom-nav { background: rgba(255,255,255,0.98); }
[data-theme="instagram"] .hero-bg { background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(217,98,43,0.08) 0%, transparent 70%), linear-gradient(180deg,#F0F2F5 0%,#FFFFFF 100%); }
[data-theme="instagram"] .icon-pill { background: rgba(255,255,255,0.85); }
[data-theme="instagram"] .india-state-label { background: rgba(255,255,255,0.9); color: var(--text); }
[data-theme="instagram"] .hero-arrow { background: rgba(255,255,255,0.85); }
[data-theme="instagram"] .page-share-btn { background: rgba(255,255,255,0.85); }
/* Note: .btn-primary etc. use color:var(--bg) for text on a var(--gold)
   background. Checked this still has good contrast under the WhatsApp theme
   too (dark #111b21 text on bright #25D366 green) - no special-casing needed. */

html { scroll-behavior: smooth; }
body { font-family:var(--font-body); background:var(--bg); color:var(--text); font-size:15px; line-height:1.7; overflow-x:hidden; padding-bottom:var(--bottom-h); }
h1,h2,h3,h4 { font-family:var(--font-head); font-weight:600; line-height:1.2; }
button,input,select,textarea { font-family:var(--font-body); }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
.acct-wrap { width:100%; max-width:var(--content-standard); margin-left:auto; margin-right:auto; padding:var(--space-page-top) var(--page-gutter) 80px; }
.text-success { color:var(--color-success); }
.text-danger { color:var(--color-danger); }
.text-muted { color:var(--muted); }
.surface-scroll-x { width:100%; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
@media (max-width:480px) {
  .acct-wrap { padding:24px 16px 76px; }
}

header { position:sticky; top:0; z-index:200; height:var(--header-h); background:rgba(15,14,12,0.97); backdrop-filter:blur(16px); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; padding:0 16px; }
.logo { display:flex; align-items:center; gap:8px; cursor:pointer; min-width:0; flex-shrink:1; overflow:hidden; }
.logo-mark { width: 28px; height: 28px; border: 1.5px solid var(--gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--gold); flex-shrink: 0; }
.logo-mark svg { width: 13px; height: 13px; }
.logo-text { font-family:var(--font-head); font-size:16px; font-weight:600; color:var(--white); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.logo-text span { color:var(--gold); }
.nav-links { display:none; align-items:center; gap:28px; }
.nav-links a { font-size:12px; color:var(--muted); letter-spacing:0.07em; text-transform:uppercase; transition:color .2s; }
.nav-links a:hover, .nav-links a.active { color:var(--gold); }
.nav-cta { background:var(--gold) !important; color:var(--color-on-accent) !important; padding:8px 18px !important; border-radius:var(--radius-btn); font-weight:500 !important; }

/* Shared, registry-driven theme picker. Keep presentation here so adding a
   theme changes the registry and CSS only, never duplicated header markup. */
.header-right-cluster { display:flex; align-items:center; gap:12px; margin-left:auto; flex-shrink:0; }
.theme-switch-wrap { position:relative; display:inline-flex; align-items:center; }
.theme-switch-wrap > summary { list-style:none; }
.theme-switch-wrap > summary::-webkit-details-marker { display:none; }
.theme-switch-btn { display:inline-flex; align-items:center; gap:3px; background:none; border:none; cursor:pointer; padding:0; }
.theme-switch-btn .caret { color:var(--muted); font-size:9px; }
.theme-swatch-current { width:16px; height:16px; border-radius:50%; border:1px solid var(--border); display:inline-block; }
.header-theme-menu { display:none; position:absolute; top:100%; right:0; margin-top:8px; background:var(--bg2); border:1px solid var(--border); border-radius:8px; min-width:176px; z-index:50; overflow:hidden; box-shadow:var(--shadow-card); }
.header-theme-menu.open, .theme-switch-wrap[open] .header-theme-menu { display:block; }
.theme-menu-title { font-size:11px; color:var(--gold); text-transform:uppercase; letter-spacing:.05em; padding:10px 14px; border-bottom:1px solid var(--border); }
.theme-menu-option { width:100%; display:flex; align-items:center; gap:10px; padding:11px 14px; background:none; border:0; border-bottom:1px solid var(--border); color:var(--text); font-family:var(--font-body); font-size:13px; cursor:pointer; text-align:left; }
.theme-menu-option:last-child { border-bottom:0; }
.theme-menu-option:hover, .theme-menu-option.active { background:var(--bg3); color:var(--gold); }
.theme-menu-option .theme-swatch { width:18px; height:18px; border-radius:50%; flex-shrink:0; }
.promo-register-link { text-decoration:underline; }
.svg-sprite { display:none; }
.club-domain-label { opacity:.65; font-size:.7em; margin-left:6px; }
.header-bell-icon { width:21px; height:21px; }
.header-menu-trigger { background:none; border:none; cursor:pointer; }

/* Homepage structural utilities and reusable section primitives. These replace
   presentation embedded in index.php without changing data or interaction. */
.is-hidden { display:none; }
.home-hero { min-height:auto; }
.section-view-all { font-size:11px; color:var(--gold); }
.section-title-row { display:flex; justify-content:space-between; align-items:baseline; gap:16px; }
.scroll-section-compact { padding-top:20px; }
.home-news-card { flex:0 0 220px; }
.home-region-list { margin-top:16px; }
.home-region-title { font-size:20px; }
.home-popup-overlay { display:none; position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.7); align-items:center; justify-content:center; padding:16px; }
.home-popup-dialog { position:relative; max-width:480px; width:100%; background:var(--bg); border:1px solid var(--border); border-radius:12px; padding:16px; max-height:90vh; overflow-y:auto; }
.home-popup-close { position:absolute; top:8px; right:8px; width:30px; height:30px; border-radius:50%; background:var(--bg2); border:1px solid var(--border); color:var(--text); font-size:16px; line-height:1; cursor:pointer; z-index:2; }
.home-popup-image { width:100%; height:auto; border-radius:8px; display:block; }
.home-referral-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius-card); padding:18px; margin:0 20px; box-shadow:var(--shadow-card); }
.home-referral-title { font-size:17px; color:var(--white); font-weight:700; font-family:var(--font-head); margin-bottom:4px; }
.home-referral-copy { font-size:12px; color:var(--muted); margin:0 0 14px; line-height:1.4; }
.home-form-status { font-size:12px; color:var(--color-success); margin-bottom:10px; }
.home-submit-button { display:block; width:100%; margin-top:8px; }
.home-testimonials-section { background:var(--bg2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.home-testimonial-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:var(--bg3); color:var(--gold); font-family:var(--font-head); }
.home-member-alias { color:var(--gold); font-style:italic; font-size:.85em; }

.hamburger { display:flex; flex-direction:column; gap:5px; cursor:pointer; padding:6px; border:none; background:transparent; }
.hamburger span { display:block; width:22px; height:2px; background:var(--text); border-radius:2px; transition:all .25s; }
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

.nav-drawer { display:none; position:fixed; top:var(--header-h); left:0; right:0; background:var(--bg2); border-bottom:1px solid var(--border); z-index:199; flex-direction:column; padding:8px 0 16px; }
.nav-drawer.open { display:flex; }
.nav-drawer a { padding:14px 24px; font-size:14px; color:var(--muted); letter-spacing:0.05em; border-bottom:1px solid var(--border); transition:color .2s, background .2s; }
.nav-drawer a:last-child { border-bottom:none; }
.nav-drawer a:hover, .nav-drawer a.active { color:var(--gold); background:var(--bg3); }
.nav-drawer .drawer-cta { margin:12px 24px 0; padding:13px 18px; background:var(--gold); color:var(--color-on-accent); border-radius:var(--radius-btn); text-align:center; font-weight:500; font-size:13px; letter-spacing:0.06em; }

/* change118 - bottom nav rebuilt with 5 categories (Directory/Club Updates/
   Awareness/Exhibitions/Value Added), matching the homepage floating menu.
   Icons increased from 20px to 25px, top padding reduced (was 6px all
   round, now 3px top / 6px bottom) - both per direct feedback comparing
   against the live nav. Sub-options fly upward in a connected card, same
   idea as the homepage's sideways flyout, just pointed the only direction
   there's room for at the very bottom of the screen. */
/* change120 - main icons now sit inside the same icon-box style as the
   sub-icons (border + background square), instead of bare icons - matches
   feedback that they should look the same both places. Flyouts for the
   leftmost (Directory) and rightmost (More) items are now clamped to the
   screen edge instead of centering on their own icon, since centering a
   wide flyout on an icon near the edge pushed it off-screen entirely.
   Also fixes a real bug: the whole nav bar was capped at z-index 200 while
   its own overlay sat at 205 - meaning even though the flyout itself asked
   for z-index 210, that number only ever counted inside the nav's own
   z-index 200 "room," so it could never actually climb above the overlay.
   The overlay was silently sitting on top of every tap. Fix: raise the
   nav bar itself above the overlay, same relationship the homepage's
   floating menu already uses correctly (300 vs 250). */
.bottom-nav { position:fixed; bottom:0; left:0; right:0; height:var(--bottom-h); background:rgba(22,21,18,0.98); border-top:1px solid var(--border); display:flex; z-index:260; }
.bn-item-wrap { position: relative; flex: 1; display: flex; }
.bn-item { flex:1; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; font-size:10px; color:var(--muted); letter-spacing:0.04em; transition:color .2s; padding:5px 0 6px; cursor:pointer; border:none; background:transparent; }
.bn-item.active, .bn-item.bn-active { color:var(--gold); }
.bn-main-icon { width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; background:var(--bg3, #1e1c18); border:1px solid var(--border); }
.bn-item.active .bn-main-icon, .bn-item.bn-active .bn-main-icon { border-color:var(--gold); }
.bn-main-icon svg { width:15px; height:15px; stroke:currentColor; }
.bn-item .nav-avatar-img { width:20px; height:20px; border-radius:50%; object-fit:cover; border:1.5px solid var(--border); }
.bn-item.active .nav-avatar-img { border-color:var(--gold); }

.bn-flyout { position:absolute; bottom:100%; left:50%; transform:translateX(-50%); background:var(--bg2, #161512); border:1px solid var(--border); border-bottom:none; border-radius:12px 12px 0 0; display:none; gap:2px; padding:6px 4px 4px; white-space:nowrap; box-shadow:0 -4px 14px rgba(0,0,0,0.35); z-index:1; }
.bn-flyout.bn-flyout-wide { flex-wrap: wrap; max-width: 280px; white-space: normal; justify-content: center; }
.bn-flyout.bn-flyout-wide a span { white-space: normal; }
.bn-flyout.bn-flyout-left { left:0; transform:none; border-radius:0 12px 12px 0; }
.bn-flyout.bn-flyout-right { left:auto; right:0; transform:none; border-radius:12px 0 12px 12px; }
.bn-flyout.bn-open { display:flex; }
.bn-flyout a { flex:none; width:60px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:6px 2px; border-radius:8px; text-decoration:none; color:inherit; }
.bn-flyout a:hover { background:var(--bg3, #1e1c18); }
.bn-sub-icon { width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; background:var(--bg3, #1e1c18); border:1px solid var(--border); }
.bn-sub-icon svg { width:14px; height:14px; stroke:var(--gold); }
.bn-flyout span { font-size:9px; font-weight:500; color:var(--muted); text-align:center; }
.bn-overlay { position:fixed; inset:0; z-index:255; display:none; }
.bn-overlay.bn-open { display:block; }

.btn-primary { display:inline-block; background:var(--gold); color:var(--color-on-accent); padding:13px 28px; font-size:12px; font-weight:500; letter-spacing:0.07em; text-transform:uppercase; border-radius:var(--radius-btn); border:none; cursor:pointer; transition:background .2s; font-family:var(--font-body); }
/* change269 - profile referral QR block was hardcoded to a fixed dark
   background (rgba(15,14,12,0.7)) regardless of theme, so it didn't match
   WhatsApp/Light/Instagram at all. Now follows the theme's own accent color
   (--gold), same as .btn-primary above - text color per theme uses the same
   pairing already established for buttons: dark text on the Classic theme's
   gold, white text on WhatsApp/Light/Instagram (matching their existing
   .btn-primary color overrides further down this file). */
.profile-qr-block { position:absolute; top:10px; right:10px; text-align:center; background:var(--gold); border-radius:var(--radius-btn); padding:8px; color:var(--color-on-accent); }
.profile-qr-block .qr-caption { font-size:9px; margin-top:3px; font-weight:600; }
.btn-primary:hover { background:var(--gold-lt); }
.btn-outline { display:inline-block; border:1px solid var(--border); color:var(--muted); padding:13px 28px; font-size:12px; letter-spacing:0.07em; text-transform:uppercase; border-radius:var(--radius-btn); cursor:pointer; background:transparent; transition:border-color .2s,color .2s; font-family:var(--font-body); }
.btn-outline:hover { border-color:var(--gold); color:var(--gold); }

.hero { position:relative; min-height:85vh; display:flex; align-items:center; padding:20px 20px 17px; overflow:hidden; }
.hero-bg { position:absolute; inset:0; background:radial-gradient(ellipse 80% 60% at 50% 100%, rgba(201,168,76,0.07) 0%, transparent 70%), linear-gradient(180deg,#0f0e0c 0%,#13120f 100%); }
.hero-img { position:absolute; inset:0; opacity:0.08; background:url('https://images.unsplash.com/photo-1758556022418-10c5e5dc94f0?w=900&auto=format&fit=crop') center/cover no-repeat; }
.hero-content { position:relative; z-index:2; width:100%; text-align:center; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold); margin-bottom:20px; }
.eyebrow::before, .eyebrow::after { content:''; width:20px; height:1px; background:var(--gold); }
.hero h1 { font-size:clamp(36px,9vw,64px); color:var(--white); margin-bottom:13px; letter-spacing:-0.01em; }
.hero h1 em { font-style:italic; color:var(--gold); }
.hero p { font-size:15px; color:var(--muted); max-width:480px; margin:0 auto 25px; line-height:1.9; }
.hero-btns { display:flex; flex-direction:column; gap:12px; align-items:center; }

.stats-bar { display:grid; grid-template-columns:repeat(2,1fr); background:var(--bg3); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.stat-item { padding:28px 20px; text-align:center; border-right:1px solid var(--border); border-bottom:1px solid var(--border); }
.stat-item:nth-child(2n) { border-right:none; }
.stat-item:nth-child(3), .stat-item:nth-child(4) { border-bottom:none; }
.stat-num { font-family:var(--font-head); font-size:44px; color:var(--gold); line-height:1; margin-bottom:6px; }
.stat-label { font-size:10px; letter-spacing:0.15em; text-transform:uppercase; color:var(--muted); }

/* change277 - icon added above each stat, per Dipen's confirmed mock */
.stat-icon { width:34px; height:34px; margin:0 auto 8px; border-radius:50%; background:var(--gold-dim); display:flex; align-items:center; justify-content:center; }
.stat-icon svg { width:18px; height:18px; }
.stats-bar-icons .stat-item { padding:20px 12px; }

.section { padding:clamp(48px, 7vw, 80px) var(--page-gutter-wide); }
.section-eyebrow { font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.section-eyebrow::before { content:''; width:20px; height:1px; background:var(--gold); }
.section-title { font-size:clamp(28px,6vw,46px); color:var(--white); margin-bottom:12px; }
.section-sub { font-size:14px; color:var(--muted); line-height:1.9; margin-bottom:40px; }

.features-grid { display:flex; flex-direction:column; gap:1px; background:var(--border); border:1px solid var(--border); }
.feature-card { background:var(--bg2); padding:36px 28px; }
.feature-icon { width:40px; height:40px; border:1px solid var(--gold-dim); border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:18px; color:var(--gold); font-size:17px; }
.feature-card h3 { font-size:22px; color:var(--white); margin-bottom:10px; }
.feature-card p { font-size:14px; color:var(--muted); line-height:1.8; }

.testimonials-wrap { display:flex; flex-direction:column; gap:16px; }
.t-card { background:var(--bg2); border:1px solid var(--border); padding:32px 24px; position:relative; }
.t-card::before { content:'"'; font-family:var(--font-head); font-size:72px; color:var(--gold-dim); position:absolute; top:10px; left:20px; line-height:1; }
.t-text { font-size:14px; color:var(--muted); line-height:1.9; margin-bottom:24px; padding-top:28px; }
.t-author { display:flex; align-items:center; gap:12px; }
.t-avatar { width:40px; height:40px; border-radius:50%; overflow:hidden; flex-shrink:0; border:1px solid var(--border); }
.t-avatar img { width:100%; height:100%; object-fit:cover; }
.t-name { font-family:var(--font-head); font-size:17px; color:var(--white); }
.t-role { font-size:11px; color:var(--muted); }

/* ===== change216 - postcard-style testimonial cards (testimonials.php only;
   homepage strip keeps the .t-card design above, unchanged). Design
   confirmed with Dipen through several mock iterations - fixed 3:2 ratio
   (not fixed pixel height, so it scales correctly on any screen), one
   uniform cream background, airmail-stripe border, badge-style rating
   (circle score + stars + "Rating" text) sitting left of the stamp. */
.pc-outer {
  width: 100%; max-width: 560px; margin: 0 auto 20px; padding: 10px;
  background: repeating-linear-gradient(-45deg, #c0392b 0 14px, transparent 14px 28px, #2e5f8a 28px 42px, transparent 42px 56px);
  border-radius: 6px;
}
.pc-card {
  width: 100%; aspect-ratio: 3 / 2;
  background: #F2E9CE;
  border-radius: 4px; padding: 5% 4.5%;
  display: flex; flex-direction: column; min-height: 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
.pc-body { flex: 1 1 auto; min-height: 0; display: flex; }
.pc-left { width: 58%; padding-right: 4%; min-height: 0; overflow: hidden; }
.pc-right { width: 42%; padding-left: 4%; border-left: 1px solid rgba(60,50,30,0.3); min-height: 0; display: flex; flex-direction: column; align-items: flex-end; }
.pc-text { font-family: 'Caveat', cursive; font-size: clamp(13px, 3.6vw, 16px); line-height: 1.35; color: #2b2416; }
.pc-text .clamp { display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.pc-more { font-size: 10.5px; font-family: var(--font-body); color: #8a4a2b; text-decoration: underline; display: inline-block; margin-top: 3px; }
.pc-stamp-row { display: flex; align-items: center; justify-content: flex-end; width: 100%; }
.pc-stamp-zone { position: relative; flex-shrink: 0; width: 18%; min-width: 34px; max-width: 44px; }
.pc-stamp { width: 100%; aspect-ratio: 5 / 6.2; border: 2px solid #8a7a5c; background: #ffffff; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 2px; }
.pc-stamp img { width: 100%; height: 100%; object-fit: cover; }
.pc-stamp .initials { font-family: var(--font-head); font-size: 1.5em; color: #6b5b3a; }
.pc-badge { display: flex; align-items: center; gap: 4px; border: 1.4px solid var(--gold); border-radius: 5px; padding: 3px 5px; flex-shrink: 0; margin-right: -2px; }
.pc-badge-circle { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; background: var(--gold); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-body); font-weight: 700; font-size: 6.5px; }
.pc-badge-right { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.pc-badge-stars { color: var(--gold); font-size: 8px; letter-spacing: 1px; }
.pc-badge-text { color: var(--gold); font-size: 5px; font-weight: 700; letter-spacing: 0.6px; margin-top: 1px; text-transform: uppercase; }
.pc-ratings-list { flex: 0 0 auto; width: 100%; margin-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.pc-rating-line { display: flex; align-items: baseline; gap: 5px; justify-content: flex-end; white-space: nowrap; }
.pc-rating-line .lbl { color: rgba(60,50,30,0.7); font-size: 9px; }
.pc-rating-line .stars-static { color: var(--gold); font-size: 10.5px; letter-spacing: 1px; }
.pc-footer { flex-shrink: 0; margin-top: 2px; padding-top: 2px; border-top: 1px solid rgba(60,50,30,0.3); text-align: center; }
.pc-footer-line { font-family: 'Caveat', cursive; font-size: clamp(13px, 3.6vw, 16px); line-height: 1.1; color: #2b2416; }
/* change347 - item 31b: the homepage's single simplified testimonial card
   (includes/community_home.php) has no ratings-breakdown list, unlike the
   full Testimonials page's own .pc-card (includes/community_testimonials.php,
   untouched here) - so the same fixed 3:2 postcard shape left a lot of empty
   space below a short testimonial, before the sign-off line. Scoped to the
   homepage instance only via this modifier class: drops the fixed aspect
   ratio so the card's height follows its own content (the stamp/badge
   column) instead of a shape sized for the fuller card. Best-effort structural
   fix, not a pixel-exact "2 lines" tune - please confirm it looks right on
   the live homepage.  */
.pc-card-home { aspect-ratio: auto; }

footer { background:var(--bg2); border-top:1px solid var(--border); padding:48px 20px 24px; }
.footer-brand { margin-bottom:36px; }
.footer-brand p { font-size:13px; color:var(--muted); line-height:1.8; margin-top:14px; }
.footer-cols { display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-bottom:36px; }
.footer-col h4 { font-size:10px; letter-spacing:0.15em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; }
.footer-col a { display:block; font-size:13px; color:var(--muted); margin-bottom:10px; transition:color .2s; }
.footer-col a:hover { color:var(--gold); }
/* change344 - footer redesign: each column is now made of grouped headings
   (some linked to a hub page, some plain) + sub-links, instead of one flat
   list per column. .footer-col-group adds spacing between groups within
   the same column; .footer-col h4 a keeps a linked heading looking
   identical to a plain one (otherwise the general ".footer-col a" rule
   above would restyle it like a regular 13px sub-link).
   change345 - the spacing rule was margin-top before, which relies on
   CSS margin collapsing with the previous group's last link and can end
   up looking like no gap at all depending on the exact box context.
   Switched to padding-top, which is never collapsed, so the gap always
   renders. Same fix pattern applies in assets/community.css: the
   community-theme override for .footer-col a was written broadly enough
   to also recolor a heading's own link, which is why linked headings
   (Directory/Stamps/Club Events) were showing black instead of the
   theme's accent color while plain-text headings were not - fixed there
   with a more specific ".footer-col h4 a{color:inherit}" rule. */
.footer-col-group { padding-top:20px; margin-top:0; }
.footer-col-group:first-child { padding-top:0; }
.footer-col h4 a { color:inherit; text-decoration:none; }
.footer-col h4 a:hover { color:var(--white); }
.footer-network { border-top:1px solid var(--border); padding:16px 0; font-size:12px; color:var(--muted); text-align:center; line-height:1.8; }
.footer-network a { color:var(--gold); text-decoration:none; }
.footer-network a:hover { color:var(--gold-lt); }
.footer-bottom { border-top:1px solid var(--border); padding-top:20px; display:flex; flex-direction:column; gap:14px; align-items:center; text-align:center; }
.footer-bottom span { font-size:12px; color:var(--muted); }
.social-links { display:flex; gap:12px; }
.social-links a { width:32px; height:32px; border:1px solid var(--border); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--muted); transition:border-color .2s,color .2s; }
.social-links a:hover { border-color:var(--gold); color:var(--gold); }

.login-wrap { min-height:calc(100vh - var(--header-h) - var(--bottom-h)); display:flex; align-items:center; justify-content:center; padding:40px 20px; background:radial-gradient(ellipse 60% 40% at 50% 0%, rgba(201,168,76,0.06) 0%, transparent 60%), var(--bg); }
.login-card { width:100%; max-width:420px; background:var(--bg2); border:1px solid var(--border); padding:40px 28px; border-radius:4px; }
.login-top { text-align:center; margin-bottom:32px; }
.login-top .logo-mark { margin:0 auto 12px; width:46px; height:46px; }
.login-top .logo-mark svg { width:22px; height:22px; }
.login-top h2 { font-size:28px; color:var(--white); }
.login-top p { font-size:13px; color:var(--muted); margin-top:6px; }
.social-btn { width:100%; padding:13px 16px; border:1px solid var(--border); background:transparent; color:var(--text); font-family:var(--font-body); font-size:14px; border-radius:var(--radius-btn); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:10px; transition:border-color .2s,background .2s; min-height:48px; }
.social-btn:hover { border-color:var(--gold); background:var(--bg3); }
.g-icon { color:#4285f4; font-weight:700; font-size:15px; }
.fb-icon { color:#1877f2; font-weight:700; font-size:15px; }
.divider { display:flex; align-items:center; gap:10px; margin:20px 0; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); }
.divider::before, .divider::after { content:''; flex:1; height:1px; background:var(--border); }
.form-group { margin-bottom:14px; }
.form-label { display:block; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); margin-bottom:7px; }
.form-control { width:100%; background:var(--bg3); border:1px solid var(--border); color:var(--text); padding:13px 14px; font-family:var(--font-body); font-size:15px; border-radius:var(--radius-btn); outline:none; transition:border-color .2s; min-height:48px; }
.form-control:focus { border-color:var(--gold); }
select.form-control { appearance:none; padding-right:38px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 5 5-5' stroke='%239a9284' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; }
.phone-row { display:flex; gap:8px; }
.phone-code { width:72px; flex-shrink:0; text-align:center; }
.otp-grid { display:flex; gap:8px; }
.otp-box { flex:1; height:52px; text-align:center; font-size:20px; letter-spacing:0.05em; padding:0; }
.btn-full { width:100%; padding:14px; min-height:48px; background:var(--gold); color:var(--color-on-accent); border:none; border-radius:var(--radius-btn); font-family:var(--font-body); font-size:13px; font-weight:500; letter-spacing:0.07em; text-transform:uppercase; cursor:pointer; margin-top:6px; transition:background .2s; }
.btn-full:disabled { opacity:0.4; cursor:not-allowed; }
.btn-full:hover { background:var(--gold-lt); }
.login-foot { text-align:center; margin-top:24px; font-size:13px; color:var(--muted); }
.login-foot a { color:var(--gold); }

.dir-head { background:var(--bg2); border-bottom:1px solid var(--border); padding:var(--space-page-top) var(--page-gutter) 0; }
.dir-head.page-head-embedded { padding:0 0 var(--space-card-gap); background:transparent; }
.dir-title { font-size:clamp(32px,8vw,52px); color:var(--white); margin-bottom:6px; }
.dir-sub { font-size:13px; color:var(--muted); margin-bottom:24px; }
.dir-stats-compact { text-align:center; font-size:12px; color:var(--text); padding:14px 16px; border-top:1px solid var(--border); line-height:1.8; }
.dir-stats-compact b { color:var(--gold); font-weight:500; }

.filter-bar { padding:16px var(--page-gutter); background:var(--bg); border-bottom:1px solid var(--border); display:flex; flex-direction:column; gap:10px; }
/* change192 - fix: extending .filter-bar (form) down to wrap .dir-body (so the
   relocated per-page control could still submit) meant .dir-body inherited
   .filter-bar's own 20px side padding on top of its own - cards ended up
   visibly narrower/more inset. Cancel it back out here. */
.filter-bar > .dir-body, .filter-bar > .dfs-count-standalone { margin-left:calc(-1 * var(--page-gutter)); margin-right:calc(-1 * var(--page-gutter)); }
.search-wrap { position:relative; }
.search-wrap input { width:100%; background:var(--bg3); border:1px solid var(--border); color:var(--text); padding:12px 14px 12px 40px; font-family:var(--font-body); font-size:14px; border-radius:var(--radius-btn); outline:none; transition:border-color .2s; min-height:46px; }
.search-wrap input:focus { border-color:var(--gold); }
.search-icon { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:17px; background:none; border:none; cursor:pointer; padding:0; z-index:1; }
.filter-row { display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; }
.filter-row::-webkit-scrollbar { display:none; }
.fselect { background:var(--bg3); border:1px solid var(--border); color:var(--text); padding:10px 30px 10px 12px; font-family:var(--font-body); font-size:12px; border-radius:var(--radius-btn); outline:none; cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 5 5-5' stroke='%239a9284' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; white-space:nowrap; flex-shrink:0; min-height:44px; transition:border-color .2s; }
.fselect:focus { border-color:var(--gold); }

/* Item 6: filter summary line */
.dir-filter-summary { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; align-items:center; margin-top:14px; padding:0 20px; }
.dfs-pill { font-size:11px; color:var(--gold); border:1px solid var(--gold-dim); border-radius:12px; padding:4px 10px; display:inline-flex; align-items:center; gap:6px; }
/* change218 - per-tag remove button, so one filter can be dropped without clearing
   everything else. Reused by directory.php/clubs.php/org_events.php - same .dfs-pill
   markup on all 3. */
.dfs-pill-remove { color:var(--muted); text-decoration:none; font-size:10px; line-height:1; }
.dfs-pill-remove:hover { color:var(--gold); }
.dfs-count { font-size:11px; color:var(--muted); margin-left:4px; }
.dfs-count-standalone { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:12px; color:var(--muted); padding:6px 20px 2px; }
/* change191 - active-filter pills now render inline next to the results count
   instead of above the search box (dir-filter-summary/dfs-pill above stays
   defined for any other usage, this is just a new lightweight wrapper). */
.dfs-pills-inline { display:flex; flex-wrap:wrap; gap:6px; }

.info-tip-icon { width:15px; height:15px; border-radius:50%; border:1px solid var(--muted); color:var(--muted); font-size:10px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; margin-right:6px; font-style:italic; }
.info-tip-box { display:none; background:var(--gold-dim); border-left:2px solid var(--gold); padding:8px 12px; border-radius:var(--radius-btn); font-size:12px; color:var(--text); margin:6px 0 10px; line-height:1.6; }
.social-action-hint { font-size:11px; color:var(--muted); margin-top:8px; line-height:1.6; }
.social-count-links { display:flex; gap:16px; justify-content:center; margin-top:8px; }
.social-count-link { font-size:12px; color:var(--muted); cursor:pointer; }
.social-count-link b { color:var(--gold); font-weight:500; }
.card-legend-box { background:var(--bg2); border:1px solid var(--border); border-radius:4px; margin:10px 0; font-size:12px; color:var(--muted); line-height:1.8; }
.card-legend-head { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; cursor:pointer; }
.card-legend-head b { color:var(--gold); font-weight:500; font-size:12px; }
.card-legend-toggle { color:var(--gold); font-size:14px; flex-shrink:0; }
.card-legend-body { display:none; padding:0 14px 12px; }
.card-legend-body.open { display:block; }

/* Item 5: sort row with icon arrows, above filter row */
.sort-row { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.sort-arrows { display:flex; gap:4px; }
.sort-arrow-btn { background:var(--bg3); border:1px solid var(--border); color:var(--muted); font-size:13px; padding:8px 10px; border-radius:var(--radius-btn); cursor:pointer; }
.sort-arrow-btn.active { border-color:var(--gold); color:var(--gold); }

.sort-compact { flex:1; display:flex; align-items:center; gap:6px; border:1px solid var(--border); border-radius:4px; padding:9px 14px; font-size:13px; color:var(--text); cursor:pointer; background:var(--bg3); }
.sort-compact b { color:var(--gold); font-weight:500; }
.sort-caret { color:var(--muted); margin-left:auto; }
.sort-panel { background:var(--bg2); border:1px solid var(--gold); border-radius:4px; padding:6px; margin-top:8px; }
.sort-panel-row { padding:10px 12px; border-radius:var(--radius-btn); display:flex; justify-content:space-between; align-items:center; gap:10px; }
.sort-panel-name { font-size:13px; color:var(--white); }
.sort-panel-desc { font-size:11px; color:var(--muted); }
.sort-panel-pills { display:flex; gap:6px; flex-shrink:0; }
.sort-pill { font-size:11px; padding:5px 12px; border-radius:10px; border:1px solid var(--border); color:var(--muted); background:transparent; cursor:pointer; font-family:var(--font-body); }
.sort-pill.active { background:var(--gold); color:var(--color-on-accent); border-color:var(--gold); }

/* Item 3: India/World scope tabs */
.scope-toggle-row { display:flex; align-items:center; gap:12px; justify-content:center; margin-bottom:14px; }
.scope-toggle { display:flex; border:1px solid var(--border); border-radius:20px; overflow:hidden; }
.scope-toggle-half { padding:7px 18px; font-size:11px; font-weight:600; letter-spacing:0.03em; background:transparent; color:var(--muted); border:none; cursor:pointer; font-family:var(--font-body); }
.scope-toggle-half.active { background:#3f8f5f; color:#fff; }
.filter-icon-btn { height:28px; padding:0 12px; border-radius:14px; border:1px solid var(--border); display:flex; align-items:center; gap:5px; color:var(--gold); font-size:12px; cursor:pointer; background:var(--bg2); flex-shrink:0; white-space:nowrap; }
.filters-active-count { font-size:11px; color:var(--muted); white-space:nowrap; }
/* change191 - inverted theme-colored fill when filters are active, replacing
   the old "N filters active" text with a compact "Filter (N)" label. Base
   rule below works for Classic (near-black text on gold, i.e. "black text")
   automatically via var(--bg); the 3 light-surface themes need an explicit
   white override since their var(--bg) is a light color. */
.filter-icon-btn.active { background:var(--gold); color:var(--color-on-accent); border-color:var(--gold); }
[data-theme="whatsapp"] .filter-icon-btn.active { color:#ffffff; }
[data-theme="light"] .filter-icon-btn.active { color:#ffffff; }
[data-theme="instagram"] .filter-icon-btn.active { color:#ffffff; }
.icon-btn-group { display:flex; align-items:center; gap:8px; }
.sort-icon-btn { height:28px; width:28px; border-radius:14px; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:13px; cursor:pointer; background:var(--bg2); flex-shrink:0; }
.clear-x-btn { color:#e5484d; font-weight:700; font-size:14px; text-decoration:none; margin-left:2px; line-height:1; display:inline-flex; align-items:center; }
.clear-filters-link { grid-column:1 / -1; text-align:center; font-size:12px; color:var(--muted); text-decoration:none; padding-top:4px; }
.clear-filters-link:hover { color:var(--gold); }

/* Item 4: mobile-friendly filter row - wraps into a responsive grid instead of one long line */
.filter-row { display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; }
@media (min-width:600px) { .filter-row { grid-template-columns:repeat(3, 1fr); } }
@media (min-width:900px) { .filter-row { grid-template-columns:repeat(5, 1fr); } }
/* Real fix - the picker-component dropdowns (State/City/Profile/Format) were
   inheriting .phone-code-btn's original phone-picker sizing (14px, half-rounded,
   no right border, meant to sit flush against a phone input) instead of matching
   the plain <select> dropdowns (Club/Theme/Country/Colony) also used in this same
   row, which use .fselect at 12px with a full border. Standardizing so every
   dropdown in this filter row looks the same regardless of which component built it. */
.filter-row .phone-code-btn { font-size:12px; border-radius:var(--radius-btn); border-right:1px solid var(--border); height:auto; min-height:44px; padding:10px 12px; }
/* Item 11 - header theme-switcher swatches, real color values per theme */
.theme-swatch-default { background: linear-gradient(135deg, #161512 50%, #c9a84c 50%); }
.theme-swatch-whatsapp { background: linear-gradient(135deg, #1f2c34 50%, #25D366 50%); }
.theme-swatch-light { background: linear-gradient(135deg, #FFFFFF 50%, #1877F2 50%); }
.theme-swatch-instagram { background: linear-gradient(135deg, #FFFFFF 50%, #D9622B 50%); }
.theme-swatch-community { background: linear-gradient(135deg, #eaf6ff 50%, #79bff2 50%); }
.filter-row .fselect { width:100%; min-width:0; }

.dir-body { padding:var(--space-section) var(--page-gutter) clamp(60px, 8vw, 88px); }
.members-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.members-grid > * { min-width:0; }
/* change211 - Stamp-frame perf redesign: .member-card (the same outer element
   .perforated already sits on) now IS the frame itself: thin padding + a
   muted tint of the theme's own accent color, with the scalloped clip-path
   (unchanged JS) cut into that frame's outer edge. The actual card content
   moves into a new .perf-inner wrapper that keeps today's real background/
   padding/look untouched. color-mix() derives the muted tone directly from
   each theme's own --gold/--bg variables, so it stays correct per theme
   automatically (no separate color guessed per theme). change212 - the
   .scroller-compact and WhatsApp list-row overrides this comment used to
   reference have since been removed entirely (WhatsApp now uses the same
   layout as every other theme). */
.member-card {
  background: color-mix(in srgb, var(--gold) 55%, var(--bg) 45%);
  border: none !important;
  padding: 6px;
  border-radius: var(--radius-card);
  cursor: pointer;
  transition: border-color .2s;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
}
.member-card--collector,
.member-card--club,
.member-card--album,
.member-card--scan,
.member-card--event { display:block; position:relative; }
.card-member-alias { color:var(--gold); font-style:italic; font-size:.85em; }
.card-meta-icon { width:10px; height:10px; vertical-align:-1px; }
.pill-count-icon { width:9px; height:9px; vertical-align:-1px; }
.card-media-thumb { border-radius:6px; }
.card-secondary-meta { margin-top:2px; }
.card-substats { font-size:11px; color:var(--muted); text-align:center; margin-top:4px; }
.membership-status { display:flex; align-items:center; gap:4px; background:#6e6858; }
.membership-status--verified { background:#2d8a4e; }
.membership-status--pending { background:#b8862c; }
.membership-status--unverified,
.membership-status--rejected { background:#6e6858; }
.membership-status-icon { width:11px; height:11px; border-radius:50%; background:rgba(255,255,255,.25); display:inline-flex; align-items:center; justify-content:center; font-size:7px; font-weight:700; }
.event-ribbon--draft { background:#c96c3a; }
.event-ribbon--published { background:var(--gold); }
.member-card .event-card-countdown {
  position:absolute !important;
  bottom:4px !important;
  right:8px !important;
  top:auto !important;
  left:auto !important;
  width:auto !important;
  height:auto !important;
  min-height:0 !important;
  font-size:9.5px !important;
  padding:3px 7px !important;
  border-radius:10px !important;
  gap:3px !important;
}

/* Shared profile/account shells. Page-specific content remains inside these
   stable layout anchors so future themes can change layout without PHP logic. */
.state-message { max-width:420px; margin:0 auto; padding:60px 20px; text-align:center; }
.state-message-title { font-size:20px; color:var(--white); margin-bottom:10px; }
.state-message-copy { font-size:13px; color:var(--muted); }
.state-message-link { display:inline-block; margin-top:20px; font-size:12px; color:var(--gold); }
.account-page-shell { width:100%; max-width:var(--content-standard); margin:0 auto; padding:var(--space-page-top) var(--page-gutter) 80px; }
.account-page-heading { text-align:center; margin-bottom:28px; }
.account-page-title { font-size:30px; color:var(--white); }
.account-page-subtitle { font-size:13px; color:var(--muted); margin-top:8px; }
.account-section-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius-card); padding:14px 16px; margin-bottom:16px; }
.account-section-card .prof-req-strip { margin-top:0; }
.theme-checks{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}.theme-check{display:flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid var(--border);border-radius:20px;background:var(--bg3);color:var(--muted);font-size:13px;cursor:pointer}.theme-check input{accent-color:var(--gold)}.subject-cat-toggle{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}.cat-btn{padding:8px 14px;border:1px solid var(--border);border-radius:20px;background:var(--bg3);color:var(--text);font-size:12px;cursor:pointer}.subject-subgroup{display:none;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}.subject-subgroup.open{display:block}.group-label{display:block;margin:14px 0 8px;color:var(--gold);font-size:10px;letter-spacing:.1em;text-transform:uppercase}.cap-counter{display:block;margin-top:6px;color:var(--gold);font-size:11px}.btn-add-row{width:100%;padding:10px;border:1px dashed var(--border);border-radius:var(--radius-btn);background:transparent;color:var(--gold);font-size:12px;cursor:pointer}
.prof-icon-grid{display:flex;flex-wrap:wrap;gap:14px;margin:4px 0 6px}.prof-icon-chip{display:flex;width:66px;flex-direction:column;align-items:center;gap:6px;cursor:pointer;text-decoration:none}.prof-icon-box{position:relative;display:flex;width:40px;height:40px;align-items:center;justify-content:center;border:1px solid var(--gold-dim);border-radius:10px;background:var(--bg3);color:var(--gold)}.prof-icon-chip.active .prof-icon-box{border-color:var(--gold);background:var(--gold);color:var(--bg)}.prof-icon-box svg{width:18px;height:18px}.prof-icon-label{color:var(--muted);font-size:9.5px;line-height:1.2;text-align:center}.prof-icon-chip.active .prof-icon-label{color:var(--gold);font-weight:600}.prof-status-badge{position:absolute;right:-4px;bottom:-4px;display:flex;width:15px;height:15px;align-items:center;justify-content:center;border:2px solid var(--bg);border-radius:50%;color:#fff;font-size:9px;font-weight:700}.prof-status-badge.done{background:#22a559}.prof-status-badge.missing{background:#e8a23d}.prof-req-strip{margin:10px 0 6px;color:var(--muted);font-size:10px;letter-spacing:.05em;text-transform:uppercase}
.profile-empty-copy { font-size:13px; color:var(--muted); }
.profile-inline-link { color:var(--gold); }
.profile-status-note { margin-bottom:16px; }
.profile-initials { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-size:32px; color:var(--gold); }
.profile-action-row { align-items:center; }
.profile-edit-action { text-decoration:none; background:var(--gold); color:var(--color-on-accent); }
.profile-download-action { text-decoration:none; }
.profile-static-count { cursor:default; }
.profile-contact-link { color:var(--gold); }
.component-hidden { display:none; }
.component-visible { display:block; }
.account-profile-summary { padding-bottom:12px; }
.account-profile-row { display:flex; align-items:center; gap:12px; }
.account-profile-avatar-link { flex-shrink:0; }
.account-profile-avatar { width:52px; height:52px; }
.account-media-cover { width:100%; height:100%; object-fit:cover; }
.account-avatar-initials { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--gold); font-family:var(--font-head); font-size:16px; }
.account-profile-name { flex:1; color:var(--white); font-size:14px; text-decoration:none; }
.account-profile-alias { font-size:11px; color:var(--muted); }
.account-profile-edit { flex-shrink:0; font-size:11px; padding:6px 14px; text-decoration:none; }
.modal-copy { font-size:13px; color:var(--muted); margin:12px 0; }
.modal-actions { display:flex; gap:10px; margin-top:16px; }
.modal-actions > * { flex:1; }
.form-section-open { display:block; }
.form-section-head-static { cursor:default; }
.form-section-body-open { display:block; }
.edit-profile-completion { margin-top:0; }
.edit-profile-sprite { display:none; }
.profile-photo-field { display:flex; align-items:center; gap:16px; margin-top:8px; margin-bottom:16px; }
.profile-photo-preview { width:72px; height:72px; border-radius:50%; border:2px solid var(--gold); overflow:hidden; background:var(--bg3); flex-shrink:0; }
.profile-photo-preview .account-avatar-initials { font-size:24px; }
.profile-file-control { flex:1; }
.profile-cover-field { margin-top:8px; margin-bottom:16px; }
.profile-cover-preview { width:100%; height:90px; border-radius:6px; border:1px solid var(--border); overflow:hidden; background:var(--bg3); margin-bottom:8px; }
.profile-cover-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:11px; }
.profile-file-control-wide { width:100%; }
.form-help { font-size:11px; color:var(--muted); display:block; margin-top:6px; }
.form-inline-status { font-size:11px; display:block; margin-top:4px; }
.form-consent-row { display:flex; align-items:flex-start; gap:8px; }
.form-consent-switch { margin-top:1px; }
.form-consent-label { margin:0; font-size:12px; color:var(--text); cursor:pointer; }
.form-consent-label-static { cursor:default; }
.form-divider-section { margin-top:14px; padding-top:14px; border-top:1px solid var(--border); }
.profile-content-group { margin-bottom:20px; }
.profile-content-subgroup { margin-bottom:10px; }
.profile-content-label { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.profile-content-value { color:var(--text); }
.profile-pills-spaced { margin-top:6px; }

/* Directory and hub primitives shared by every directory-like landing page. */
.directory-count-icon { width:7px; height:7px; vertical-align:-1px; }
.directory-helper-text { font-size:11px; color:var(--muted); margin:0; padding:0 2px; }
.hub-heading-row { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.hub-secondary-action { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--gold-lt); text-decoration:none; border:1px solid var(--border); border-radius:20px; padding:6px 12px; background:var(--bg2); white-space:nowrap; }
.directory-page-grid { padding-top:20px; }
.directory-page-title { font-family:var(--font-head); font-size:19px; color:var(--white); margin:0; }
.directory-page-subtitle { font-size:13px; color:var(--muted); margin:4px 0 0; }
.directory-filter-caption { text-align:center; font-size:11px; color:var(--muted); margin:8px 0; }
.directory-filter-icons { display:flex; gap:10px; overflow-x:auto; padding:2px 2px 4px; margin-bottom:10px; }
.directory-filter-icon-glyph { font-size:16px; }
.directory-filter-icon-locked { opacity:.75; cursor:default; }
.directory-active-tags { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:10px; min-height:30px; }
.directory-sort-trigger { flex-shrink:0; }
.directory-clear-all { color:#e5484d; border-color:#e5484d; }
.directory-filter-panel { background:var(--bg2); border:1px solid var(--border); border-radius:12px; padding:12px; margin-bottom:12px; display:none; }
.directory-filter-heading-row { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.directory-filter-heading { font-size:12px; color:var(--white); margin:0 0 10px; }
.directory-filter-heading-row .directory-filter-heading { margin:0; flex:1; }
.directory-search-wrap { position:relative; width:118px; }
.directory-search-wrap--wide { width:100%; }
.directory-search-input { width:100%; min-height:38px; background:var(--bg3); border:1px solid var(--border); border-radius:20px; padding:8px 11px; font-family:var(--font-body); font-size:12px; color:var(--text); }
.directory-search-wrap--wide .directory-search-input { padding:8px 12px; font-size:12px; }
.directory-suggestion-list { display:none; position:absolute; top:100%; left:0; right:0; margin-top:4px; background:var(--bg3); border:1px solid var(--border); border-radius:8px; max-height:160px; overflow-y:auto; z-index:10; }
.directory-browse-scroll { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; }
.directory-browse-scroll--wide-gap { gap:10px; }
.directory-filter-subsection { margin-top:10px; padding-top:10px; border-top:1px solid var(--border); }
.directory-filter-subheading { font-size:12px; color:var(--white); margin:0 0 8px; }
.directory-empty-state { text-align:center; color:var(--muted); padding:40px 0; }
.directory-inline-panel { display:none; }
.directory-state-empty { text-align:center; color:var(--muted); padding:20px 0; }
.directory-state-browser { margin-bottom:20px; }
.directory-state-card { display:flex; align-items:center; justify-content:center; text-align:center; }
.directory-suggestion-item { padding:8px 12px; font-size:11px; color:var(--text); border-bottom:1px solid var(--border); cursor:pointer; }
.directory-suggestion-meta { color:var(--muted); font-size:10.5px; line-height:1.35; }
.directory-access-notice { margin:14px; padding:12px; text-align:center; background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius-btn); color:var(--muted); font-size:13px; }
.perf-inner {
  background: var(--bg2);
  border-radius: 2px;
  padding: var(--space-card);
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  /* change211 - position:relative so absolute-positioned badges (ribbon-badge,
     tenure-badge, card-icon-pills, digiex-countdown) anchor to this inner content
     box instead of the outer frame - keeps them safely inside the card, not
     overlapping the new thin frame border. */
  position: relative;
}
.perf-inner .member-name { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; line-height:1.35em; min-height:2.7em; word-break:break-word; text-align:center; min-width:0; }
.perf-inner .btn-view { margin-top:auto; padding-top:12px; }
.member-avatar { width:56px; height:56px; border-radius:50%; margin:0 auto 12px; overflow:hidden; border:2px solid var(--border); background:var(--bg3); }
.member-avatar img { width:100%; height:100%; object-fit:cover; }
.avatar-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-size:22px; color:var(--gold); }
.member-name { font-family:var(--font-head); font-size:clamp(13px, 1.2vw, 15px); color:var(--white); text-align:center; margin-bottom:3px; }
/* change214 - club/event card names (Latest Clubs, Latest Events, and directory/clubs.php
   full cards, since they share renderOrgCard()) - font size down one step, capped at 2
   lines, and that 2-line height reserved even when the actual text is shorter, so every
   card in a strip stays the same fixed height regardless of name length. Deliberately a
   separate class, not a change to the base .member-name rule, since that's also used by
   Member cards' own name (short, not affected by this height issue, not requested). */
.card-title-clamp {
  font-size: 13px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3em;
  min-height: 2.6em;
}
/* change279 - was unconstrained, so a long state name (e.g. "Andaman and
   Nicobar Islands") wrapped to 2 lines while short ones stayed at 1,
   making that card taller than its neighbors in the same row. Capped to
   1 line, trimmed with an ellipsis if it doesn't fit - matches every
   other card in the row regardless of state name length. */
.member-city { font-size:11px; color:var(--muted); text-align:center; margin-bottom:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.member-tags { display:flex; flex-wrap:wrap; gap:4px; justify-content:center; margin-bottom:12px; max-height:3.4em; overflow:hidden; }
.view-all-themes-link { cursor:pointer; border:1px dashed var(--gold); color:var(--gold); }
.tag { font-size:9px; letter-spacing:0.07em; text-transform:uppercase; padding:2px 8px; border:1px solid var(--gold-dim); color:var(--gold); border-radius:2px; }
.member-meta { display:flex; justify-content:center; gap:10px; padding-top:12px; border-top:1px solid var(--border); font-size:10px; color:var(--muted); flex-wrap:wrap; }
.member-meta strong { color:var(--text); font-size:11px; }
.member-meta-top { border-top:none; padding-top:0; padding-bottom:6px; }
.tenure-badge { position:absolute; bottom:10px; right:10px; font-size:9px; color:var(--gold); border:1px solid var(--gold-dim); border-radius:10px; padding:2px 8px; background:var(--bg2); text-transform:uppercase; letter-spacing:0.03em; }
.member-counts-line { display:flex; justify-content:center; align-items:center; gap:6px; font-size:11px; color:var(--muted); margin-bottom:8px; flex-wrap:wrap; }
.member-counts-line .mcl-item { cursor:pointer; }
.member-counts-line .mcl-item:hover { color:var(--gold); }
.member-counts-line .mcl-sep { color:var(--border); }
.member-awards {
  position:absolute; top:10px; left:10px; right:auto; bottom:auto;
  display:flex; gap:3px; cursor:pointer;
}
.member-awards .award-badge { font-size:11px; }
.btn-view { display:block; margin-top:12px; padding:9px; text-align:center; border:1px solid var(--border); font-size:10px; letter-spacing:0.09em; text-transform:uppercase; color:var(--muted); border-radius:2px; transition:border-color .2s,color .2s; }
.btn-view:hover { border-color:var(--gold); color:var(--gold); }
.pagination { display:flex; justify-content:center; align-items:center; gap:14px; margin-top:36px; }
.pg-btn { padding:8px 16px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); font-size:13px; color:var(--muted); border-radius:var(--radius-btn); cursor:pointer; transition:border-color .2s,color .2s; text-decoration:none; white-space:nowrap; }
/* change191 - per-page control relocated from the top filter bar to
   bottom-right, near pagination, on Directory/Clubs/Events. */
.perpage-row { display:flex; justify-content:flex-end; margin:14px 0 4px; }
.perpage-row .fselect { width:auto; }
.pg-btn.active, .pg-btn:hover { border-color:var(--gold); color:var(--gold); }
.pg-info { font-size:12px; color:var(--muted); }

.profile-cover { height:200px; background:linear-gradient(to bottom, transparent 30%, var(--bg) 100%), url('https://images.unsplash.com/photo-1767635360163-0633939b9f4b?w=900&auto=format&fit=crop') center/cover no-repeat; }
.profile-body { padding:0 var(--page-gutter) clamp(72px, 9vw, 96px); }
.profile-top { display:flex; flex-direction:column; align-items:center; margin-top:-48px; margin-bottom:32px; text-align:center; }
.profile-photo { width:96px; height:96px; border-radius:50%; border:3px solid var(--gold); overflow:hidden; background:var(--bg3); margin-bottom:14px; }
.profile-photo img { width:100%; height:100%; object-fit:cover; }
.profile-name { font-size:34px; color:var(--white); margin-bottom:8px; }
/* change269 - member profile's own name/alias sizing, split from .profile-name
   so org_profile.php's club-name heading (still using .profile-name as-is)
   is untouched. Name 34px -> 28px; alias moved to its own line below,
   ~30% smaller than the new name size (28 * 0.7 = ~20px), per Dipen. */
.profile-name-member { font-size:28px; color:var(--white); margin-bottom:2px; font-family:var(--font-head); }
.profile-alias-line { font-size:20px; color:var(--gold); font-style:italic; margin-bottom:8px; }
.profile-badges { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; font-size:12px; color:var(--muted); margin-bottom:18px; }
.badge-verified { color:var(--gold); }
.profile-actions { display:flex; gap:8px; }
.btn-follow { padding:9px 12px; background:transparent; border:1px solid var(--gold); color:var(--gold); border-radius:var(--radius-btn); font-family:var(--font-body); font-size:11px; font-weight:500; letter-spacing:0.03em; text-transform:uppercase; cursor:pointer; min-height:38px; display:flex; align-items:center; justify-content:center; gap:5px; white-space:nowrap; flex:1; min-width:0; }
.btn-follow.active { background:var(--gold); color:var(--color-on-accent); }
.btn-like { padding:9px 12px; background:transparent; border:1px solid var(--border); color:var(--muted); border-radius:var(--radius-btn); font-family:var(--font-body); font-size:11px; letter-spacing:0.03em; text-transform:uppercase; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:5px; min-height:38px; white-space:nowrap; flex:1; min-width:0; }
.btn-like.active { background:var(--color-danger); border-color:var(--color-danger); color:#fff; }
.btn-stat-pill { padding:9px 12px; background:transparent; border:1px solid var(--border); color:var(--muted); border-radius:var(--radius-btn); font-family:var(--font-body); font-size:11px; letter-spacing:0.03em; text-transform:uppercase; display:flex; align-items:center; justify-content:center; gap:5px; min-height:38px; white-space:nowrap; flex:1; min-width:0; cursor:default; }
.btn-action-label { white-space:nowrap; }
.btn-count { font-size:10px; opacity:0.75; letter-spacing:normal; text-transform:none; padding:2px 6px; border-radius:8px; background:rgba(0,0,0,0.15); }
.btn-like .btn-count, .btn-stat-pill .btn-count { background:rgba(255,255,255,0.06); }
/* change193 - club page only: Follow/Like default state now matches their own
   active look (theme-colored fill from the start), per Dipen's request - scoped
   by ID to the club page's buttons specifically since this whole conversation
   was about org_profile.php; member profile's Follow/Like keep their original
   outline-then-fill distinction, untouched. */
#orgFollowBtn { background:var(--gold); color:var(--color-on-accent); }
#orgLikeBtn { background:var(--color-danger); border-color:var(--color-danger); color:#fff; }

/* change279 - was a horizontal side-by-side row, which made the pills wide
   enough to land on top of the centered avatar photo on narrower cards.
   Stacked vertically instead (follow on top, heart below, via
   column-reverse - markup order is heart-then-follow in both card
   templates, reversed here so no PHP markup change was needed). Narrower
   footprint keeps it clear of the avatar without needing to move the
   anchor position itself. */
.card-icon-pills { position:absolute; top:8px; right:8px; display:flex; flex-direction:column-reverse; align-items:flex-end; gap:4px; z-index:2; }
.icon-pill { display:flex; align-items:center; gap:4px; height:24px; padding:0 8px 0 6px; border-radius:12px; background:rgba(15,14,12,0.75); border:1px solid var(--border); font-size:11px; color:var(--muted); cursor:pointer; }
.icon-pill .ic { font-size:12px; }
.icon-pill.heart .ic { color:var(--color-danger); }
.icon-pill.heart.active { background:var(--color-danger); border-color:var(--color-danger); color:#fff; }
/* item 6 (2026-09-20 batch) bugfix - this used to read `color:var(--white)`,
   which is fine on the dark themes (--white really is white there) but on
   the light themes (Facebook/Instagram/community, see the --white repurpose
   comment above under [data-theme="light"]) --white is repurposed to mean
   "highest-contrast text on the page background", which resolves to a
   near-black. That's correct for text sitting on the page, but this icon
   sits on the solid red .active circle above, not the page - it needs
   literal white on every theme, same as the sibling rule already uses for
   the pill's own text/count. Matches Dipen's screenshot report exactly:
   heart showed black on red while the count next to it showed white. */
.icon-pill.heart.active .ic { color:#fff; }
.icon-pill.follow .ic { color:var(--gold); font-weight:600; }
.icon-pill.follow.active { background:var(--gold); border-color:var(--gold); color:var(--color-on-accent); }
.icon-pill.follow.active .ic { color:var(--color-on-accent); }
/* change280 originally set this to --muted on purpose (neutral, secondary to
   Heart/Follow's accent colors). item 6 (2026-09-20 batch) supersedes that
   per Dipen's direct screenshot feedback - share icon should track the
   theme's accent color like Follow/Bookmark already do, not sit muted/gray.
   Flagging the change from change280's original intent rather than silently
   overwriting it. */
.icon-pill.share .ic { color:var(--gold); }
/* change280 (hotfix) - platform-correct Share icon. Android icon shows by
   default (Android + desktop web); iOS icon only shows once footer.php's
   JS detects an iPhone/iPad and adds .is-ios-share to <body>. Applies to
   both card pills (.ic svg) and page-level buttons (.page-share-btn svg)
   since both use the same renderShareIconSvg() output. */
.ic-share-ios { display:none; }
body.is-ios-share .ic-share-and { display:none; }
body.is-ios-share .ic-share-ios { display:inline; }
/* change280 - page-level Share button (renderShareButton()). Circular icon
   button, top-right of wherever it's dropped in (self-positioning wrapper,
   see the PHP helper). Same visual weight as the header icon row buttons
   for consistency, not the smaller card pill style. */
.page-share-btn { position:absolute; top:10px; right:10px; z-index:5; width:34px; height:34px; border-radius:50%; background:rgba(15,14,12,0.75); border:1px solid var(--border); color:var(--text); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.page-share-btn:hover { border-color:var(--gold); color:var(--gold); }
/* change269 - nd-strip-published (news card date label) had no CSS at all
   before - it just fell wherever default block/inline flow put it, not
   actually top-right despite looking that way, since the ribbon badge next
   to it is independently absolute-positioned. Anchored properly now,
   matching the same top-right convention as .card-icon-pills above. */
.nd-strip-published { position:absolute; top:8px; right:8px; font-size:10px; color:var(--muted); z-index:2; background:var(--bg2); padding:3px 8px; border-radius:12px; border:1px solid var(--border); }
/* change253 - bookmark icon-pill, same modifier convention as .heart/.follow -
   used on Daily News listing cards. */
.icon-pill.bookmark { padding:0; width:24px; justify-content:center; }
.icon-pill.bookmark .ic-bm { fill:none; stroke:var(--gold); stroke-width:1.8; }
.icon-pill.bookmark.active { background:var(--gold); border-color:var(--gold); }
.icon-pill.bookmark.active .ic-bm { fill:var(--bg); stroke:var(--bg); }
.profile-stats { display:grid; grid-template-columns:repeat(3,1fr); background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius-btn); margin-bottom:28px; }
.ps-item { padding:18px 10px; text-align:center; border-right:1px solid var(--border); }
.ps-item:last-child { border-right:none; }
.ps-num { font-family:var(--font-head); font-size:24px; color:var(--gold); line-height:1; }
.ps-label { font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); margin-top:4px; }
.section-heading { font-size:10px; letter-spacing:0.15em; text-transform:uppercase; color:var(--gold); padding-bottom:12px; border-bottom:1px solid var(--border); margin-bottom:18px; }
.profile-bio { font-size:14px; color:var(--muted); line-height:1.9; margin-bottom:32px; }
.showcase-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:32px; }
.showcase-item { aspect-ratio:1; background:var(--bg3); border:1px solid var(--border); overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:10px; color:var(--muted); letter-spacing:0.05em; }
.showcase-item img { width:100%; height:100%; object-fit:cover; }
.theme-pills { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:32px; }
.theme-pill { font-size:11px; padding:5px 14px; border:1px solid var(--gold-dim); color:var(--gold); border-radius:20px; }
.exhibition-row { padding:16px; background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius-btn); margin-bottom:10px; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.exh-title { font-family:var(--font-head); font-size:17px; color:var(--white); margin-bottom:3px; }
.exh-meta { font-size:11px; color:var(--muted); }
.exh-year { font-size:10px; color:var(--gold); letter-spacing:0.08em; text-transform:uppercase; border:1px solid var(--gold-dim); padding:3px 10px; border-radius:2px; flex-shrink:0; }

.about-hero { padding:clamp(44px, 7vw, 68px) var(--page-gutter) clamp(36px, 5vw, 52px); text-align:center; background:radial-gradient(ellipse 80% 40% at 50% 0%, rgba(201,168,76,0.06) 0%, transparent 60%), var(--bg2); border-bottom:1px solid var(--border); }
.about-hero h1 { font-size:clamp(36px,10vw,64px); color:var(--white); margin-bottom:16px; }
.about-hero p { font-size:15px; color:var(--muted); line-height:1.9; max-width:480px; margin:0 auto; }
.about-img { width:100%; aspect-ratio:16/9; object-fit:cover; border-bottom:1px solid var(--border); opacity:0.7; }

.events-head { padding:var(--space-page-top) var(--page-gutter) var(--space-hero-bottom); background:var(--bg2); border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.events-grid { display:flex; flex-direction:column; gap:1px; background:var(--border); margin:20px; border:1px solid var(--border); }
.event-card { background:var(--bg2); padding:28px 24px; }
.event-date { display:inline-block; background:var(--gold-dim); border:1px solid var(--gold); padding:3px 10px; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold); margin-bottom:12px; border-radius:2px; }
.event-card h3 { font-size:20px; color:var(--white); margin-bottom:8px; }
.event-card p { font-size:13px; color:var(--muted); line-height:1.8; margin-bottom:16px; }
.event-meta { display:flex; gap:14px; font-size:11px; color:var(--muted); flex-wrap:wrap; }

.contact-wrap { max-width:var(--content-narrow); margin:0 auto; padding:var(--space-page-top) var(--page-gutter) clamp(72px, 9vw, 96px); }

/* ===== change247 - Contact Us Inland Letter layout, confirmed via mock
   (contact_inland_letter_mock_v2.html) before building. Uses the site's
   real div-based picker (filter_select_picker.php) for Reason/Module,
   not native <select>, per standing site rule. ===== */
.letter-outer {
  max-width: 480px; margin: 40px auto 60px;
  background: #ADC6D9;
  border-radius:var(--radius-btn);
  box-shadow: 0 3px 14px rgba(0,0,0,0.35);
  position: relative;
  overflow: hidden;
}
.letter-fold-row { display: flex; height: 14px; }
.letter-fold-row div { flex: 1; background: linear-gradient(135deg, transparent 49%, #8fa9bd 49% 51%, transparent 51%); }
.letter-head { display: flex; justify-content: space-between; align-items: flex-start; padding: 14px 16px 6px; }
.letter-head-text { font-family: var(--font-head); font-weight: 700; font-size: 20px; color: #2b3f4f; letter-spacing: 0.03em; }
.letter-head-sub { font-size: 9px; color: #4a5d6b; margin-top: 2px; letter-spacing: 0.08em; }
.letter-stamp-box { width: 46px; height: 56px; border: 1.5px solid #2b3f4f; border-radius: 2px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: rgba(255,255,255,0.25); }
.letter-stamp-box svg { width: 22px; height: 22px; }
.letter-section-1 { margin: 10px 16px 0; border: 1px solid #6f8ea3; border-radius: 2px; padding: 10px 12px; background: rgba(255,255,255,0.15); }
.letter-field-line { border-bottom: 1px solid #4a5d6b; padding: 7px 2px 5px; font-size: 13px; color: #1e2d38; min-height: 16px; }
.letter-field-line:last-child { border-bottom: none; }
.letter-field-line.autofetched { color: #1e2d38; font-weight: 500; }
.letter-field-line input { border: none; background: transparent; width: 100%; font-family: 'DM Sans', sans-serif; font-size: 13px; color: #1e2d38; outline: none; padding: 0; }
.letter-field-line input::placeholder { color: #5c7284; }
.letter-autofetch-note { font-size: 9px; color: #3d5566; text-align: right; margin-top: 4px; font-style: italic; }
.letter-divider { margin: 12px 16px 0; border-top: 1px dashed #6f8ea3; padding-top: 6px; font-size: 8.5px; color: #3d5566; text-align: center; letter-spacing: 0.05em; }
.letter-section-2 { margin: 10px 16px 14px; background: rgba(255,255,255,0.15); border: 1px solid #6f8ea3; border-radius: 2px; padding: 12px; }
.letter-label { font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #2b3f4f; margin-bottom: 4px; display: block; font-weight: 600; }
.letter-textarea { width: 100%; border: 1px solid #4a5d6b; border-radius: 2px; background: rgba(255,255,255,0.4); font-family: 'DM Sans', sans-serif; font-size: 13px; color: #1e2d38; padding: 8px; resize: vertical; outline: none; margin-top: 4px; }
.letter-submit { display: block; width: 100%; margin: 0 16px 16px; padding: 12px; background: #2b3f4f; color: #ADC6D9; border: none; border-radius: 2px; font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.letter-footer { text-align: center; font-size: 8px; color: #3d5566; letter-spacing: 0.06em; padding-bottom: 10px; }
/* letter-section-2's picker needs its own color scheme to sit correctly
   on the letter's pale-blue paper, since the picker's default styling is
   built for the site's dark theme surfaces. */
.letter-section-2 .phone-code-btn { background: rgba(255,255,255,0.4); border: 1px solid #4a5d6b; color: #1e2d38; }
.letter-section-2 .phone-dropdown { background: #dbe6ee; border: 1px solid #2b3f4f; }
.letter-section-2 .phone-search { background: #c9d9e3; color: #1e2d38; border-bottom: 1px solid #6f8ea3; }
.letter-section-2 .phone-option { color: #1e2d38; }
.letter-section-2 .phone-option:hover { background: #b9cddb; }
.letter-error{margin:0 16px;padding:8px 10px;background:#f5d0d0;border:1px solid #a94442;border-radius:2px;color:#7a2e2e;font-size:12px}
.letter-module-field{display:none;margin-top:12px}.letter-module-field.open{display:block}
.letter-label-spaced{margin-top:10px}
.letter-event-reference{width:100%;border:1px solid #4a5d6b;border-radius:2px;padding:8px 10px;font-family:var(--font-body);font-size:12.5px;color:#1e2d38;background:rgba(255,255,255,.4);margin:6px 0 0}
.contact-info-box { background:var(--bg2); border:1px solid var(--border); padding:24px; border-radius:4px; margin-bottom:24px; font-size:14px; color:var(--muted); }
.success-box { background:rgba(201,168,76,0.1); border:1px solid var(--gold); color:var(--gold); padding:16px; border-radius:var(--radius-btn); margin-bottom:20px; font-size:13px; text-align:center; }
.error-box { background:var(--color-danger-soft); border:1px solid var(--color-danger); color:var(--color-danger); padding:12px 16px; border-radius:var(--radius-btn); margin-bottom:20px; font-size:13px; }

@media (min-width:768px) {
  body { padding-bottom:0; }
  header { padding:0 40px; }
  .hamburger { display:none; }
  .bottom-nav { display:none; }
  .nav-drawer { display:none !important; }
  .nav-links { display:flex; margin-left:40px; }
  /* change288 - this area used to hold only a short intro block, so 100px
     of padding top and bottom was right. It now holds the full benefits
     comparison section, so that padding read as a large blank band above
     the tagline and below the button. Top cut to 5px as instructed.
     Confirmed homepage-only - no other page uses this section. */
  .hero { padding:5px 60px 32px; text-align:left; min-height:88vh; }
  .hero-content { max-width:none; text-align:left; }
  /* change287 - the 560px cap that used to be here was written for the
     original hero layout (a narrow text column beside a right-hand
     image), which is correct for reading text but wrong for everything
     later added into this same container. The countdown banner and the
     benefits comparison section both live inside .hero-content now, so
     they silently inherited that narrow cap - widening those elements
     themselves (change286) could never work while the box around them
     was still capped. Cap removed here; the original text elements keep
     their own comfortable reading width via the rule below so nothing
     that was correct before gets stretched. */
  .hero-content > .eyebrow { max-width:none; display:flex; justify-content:center; }
  .hero-btns { flex-direction:row; }
  .eyebrow { justify-content:flex-start; }
  .stats-bar { grid-template-columns:repeat(4,1fr); }
  .stat-item { border-bottom:none; }
  .stat-item:nth-child(2n) { border-right:1px solid var(--border); }
  .stat-item:last-child { border-right:none; }
  .section { padding:80px 60px; }
  .features-grid { flex-direction:row; }
  .feature-card { flex:1; }
  .testimonials-wrap { flex-direction:row; }
  .t-card { flex:1; }
  footer { padding:60px 60px 32px; }
  .footer-brand { margin-bottom:0; }
  .footer-cols { grid-template-columns:repeat(3,1fr); }
  .footer-inner { display:grid; grid-template-columns:2fr 3fr; gap:60px; margin-bottom:40px; }
  .footer-bottom { flex-direction:row; text-align:left; }
  .dir-head { padding:56px 60px 0; }
  .dir-body { padding:32px 60px 80px; }
  /* item 10 (2026-09-20 batch) full sweep - same root cause and fix as item 8's
     .scan-grid: this used to be repeat(3,1fr) here, then repeat(4,1fr)@1200px,
     repeat(5,1fr)@900px and repeat(6,1fr)@1400px further down, all sized off
     the VIEWPORT, never the legacy sidebar (item 37) that now eats ~510px of
     real content width on Directory/Clubs/Search desktop. Same auto-fill/
     minmax() fix as .scan-grid, using the same 200px card-width reference
     (.scroller > .member-card) - one rule replaces all 4 of the old
     breakpoints below (removed at the "Point 5"/1400px spots), sizing off
     .members-grid's own real rendered width instead of guessing from the
     viewport. */
  .members-grid { grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:16px; }
  .filter-bar { padding:20px 60px; }
  .search-wrap { flex:1; }
  .filter-row { overflow:visible; flex-shrink:0; }
  .profile-body { padding:0 60px 80px; max-width:900px; margin:0 auto; }
  .profile-top { flex-direction:row; text-align:left; align-items:flex-end; margin-top:-48px; gap:24px; }
  .profile-actions { margin-left:auto; }
  .profile-badges { justify-content:flex-start; }
  .showcase-grid { grid-template-columns:repeat(4,1fr); }
  .about-hero { padding:80px 60px 60px; }
  .about-body { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; padding:80px 60px; }
  .about-img { width:100%; aspect-ratio:4/3; border:1px solid var(--border); border-bottom:none; }
  .events-head { padding:56px 60px 36px; align-items:flex-end; }
  .events-grid { flex-direction:row; flex-wrap:wrap; margin:32px 60px; }
  .event-card { flex:1 1 calc(33.33% - 1px); min-width:260px; }
  .login-wrap { padding:60px 40px; }
}
/* item 10 (2026-09-20 batch) - old repeat(4,1fr)@1200px .members-grid rule
   removed, superseded by the auto-fill rule above (see its comment). */

/* ============================================
   Phone Country Selector
   ============================================ */
.phone-selector-wrap { display: flex; gap: 0; position: relative; }
.phone-code-btn { display: flex; align-items: center; gap: 6px; background: var(--bg3); border: 1px solid var(--border); border-right: none; color: var(--text); padding: 0 12px; height: 44px; border-radius:var(--radius-btn) 0 0 3px; cursor: pointer; font-size: 14px; white-space: nowrap; }
.phone-code-btn .caret { font-size: 10px; color: var(--muted); }
.phone-selector-wrap input[type="tel"] { border-radius: 0 3px 3px 0; height: 44px; }
.phone-dropdown { position: absolute; top: 46px; left: 0; width: 280px; max-height: 320px; background: var(--bg2); border: 1px solid var(--gold); border-radius: 4px; z-index: 50; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
.phone-search { width: 100%; padding: 10px 12px; background: var(--bg3); border: none; border-bottom: 1px solid var(--border); color: var(--text); font-size: 13px; outline: none; }
.phone-list { max-height: 260px; overflow-y: auto; }
.phone-option { padding: 9px 12px; font-size: 13px; color: var(--text); cursor: pointer; display: flex; justify-content: space-between; text-decoration: none; }
.phone-option:hover { background: var(--bg3); }
.phone-option .dial-hint { color: var(--muted); font-size: 11px; }
/* change253 - jump-to-page dropdown: current page shown grayed-out/disabled
   inside the list, not a clickable link like every other page number. */
.jtp-wrap .phone-code-btn { min-height: 42px; font-size: 12px; }
.phone-option.jtp-current { color: var(--muted); opacity: 0.5; cursor: default; pointer-events: none; background: var(--bg3); }
/* change253-fix - Daily News has no infinite-scroll fallback, so its pager
   must never be theme-hidden like .pagination/.sortpage-pager are on
   WhatsApp. Same visual treatment, deliberately no [data-theme] rule. */
.nd-pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 20px 0; font-size: 12px; color: var(--muted); }
.nd-pagination a { color: var(--gold); text-decoration: none; }

/* ============================================
   Generic Modal Selector (Countries/Colonies/Themes)
   ============================================ */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 200; display: none; align-items: center; justify-content: center; padding: 20px; }
.modal-overlay.open { display: flex; }
.modal-box { background: var(--bg2); border: 1px solid var(--gold); border-radius: 6px; width: 100%; max-width: 460px; max-height: 80vh; display: flex; flex-direction: column; }
.modal-head { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.modal-head h3 { font-size: 18px; color: var(--white); font-family: var(--font-head); }
.modal-close { background: none; border: none; color: var(--muted); font-size: 20px; cursor: pointer; }
.modal-search { padding: 12px 20px; border-bottom: 1px solid var(--border); }
.modal-search input { width: 100%; background: var(--bg3); border: 1px solid var(--border); color: var(--text); padding: 9px 12px; border-radius:var(--radius-btn); font-size: 13px; outline: none; }
.modal-body { overflow-y: auto; padding: 12px 20px; flex: 1; }
.modal-option { display: flex; align-items: center; gap: 8px; padding: 8px 0; font-size: 13px; color: var(--text); cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.04); }
.modal-option input { accent-color: var(--gold); }
.modal-foot { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.modal-select-link { color: var(--gold); font-size: 12px; cursor: pointer; text-decoration: underline; }
.selected-tags-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* ============================================
   Stamp Perforation Edge
   Change 88 - replaced the old radial-gradient pseudo-element technique (kept
   producing barely-visible bites in practice) with a real scalloped clip-path,
   generated in JS per-element since card sizes vary (grid cards, scroll-strip
   cards, list rows) and a single fixed path can't stretch without distorting
   the circular bites into ovals. See applyPerforatedEdges() in footer.php.
   Same visual depth everywhere (5px bite radius); only the bite COUNT per
   edge adapts to that specific element's actual rendered size.
   ============================================ */
.perforated {
  position: relative;
  /* change211 - background/padding removed from here: .member-card (the same
     element .perforated always sits on) now owns the frame background/padding
     directly, since this rule is declared later in the cascade and would
     otherwise override it. filter reverted to a plain shadow - color now
     comes from the real frame band (.member-card's background), not a
     shadow tint (change210's approach, superseded). */
  border: none !important;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35));
}
/* perforated-sides kept as a harmless no-op for backward compatibility -
   visiting_card.php combined "perforated perforated-sides" to get all 4 edges
   under the old technique; the new one covers all 4 edges from .perforated
   alone, so the second class simply does nothing now (not removed from
   visiting_card.php to avoid an unrelated touch-point for this change). */
.perforated-sides {}

/* ============================================
   Address branching blocks
   ============================================ */
#addressIntlBlock { display: none; }

.locked-field { pointer-events: none; opacity: 0.65; background: var(--bg3); }
.locked-field.unlocked { pointer-events: auto; opacity: 1; }

.region-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text); }
.muted-count { font-size: 11px; color: var(--gold); margin-left: 4px; }

.theme-subgroup { display: none; margin-top: 6px; padding-left: 14px; flex-wrap: wrap; gap: 5px; flex-basis:100%; }
.theme-subgroup.open { display: flex; }
.theme-pill-sub { font-size: 11px; background:var(--gold); color:#1e1c18; border-color:var(--gold); font-weight:600; }
.interest-row { display:flex; flex-direction:row; flex-wrap:wrap; gap:8px; align-items:flex-start; margin-top:8px; }

/* Change 2 - Contact protection / reveal-on-click */
.reveal-mask { cursor:pointer; border-bottom:1px dashed var(--gold-dim); display:inline-block; }
.reveal-mask:hover { color:var(--gold); }
.reveal-mask .reveal-hint { font-size:12px; color:var(--gold); margin-left:6px; }
.reveal-mask.revealed { cursor:default; border-bottom:none; }
/* change269 - .contact-row had no font-size/color rule at all, so it inherited
   the page's raw default text (bigger, and black/white depending on theme).
   Fixed to match the 13px + muted-color style already used consistently on
   About/Identity/Selling further down this same page (profile.php only -
   org_profile.php's equivalent block already uses its own correct class,
   .icon-contact-value, and is untouched by this change). */
.contact-row { margin-bottom:8px; font-size:13px; color:var(--muted); line-height:1.5; }
.bearer-block { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius-btn); padding:14px; margin-bottom:28px; }
.bearer-block-label { font-size:12px; color:var(--gold); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:10px; }
.bearer-scroll { display:flex; gap:10px; overflow-x:auto; overflow-y:hidden; padding:2px 30px 8px; scrollbar-width:none; }
.bearer-scroll::-webkit-scrollbar { display:none; }
.bearer-tile { text-align:center; width:110px; flex-shrink:0; background:var(--bg3); border:1px solid var(--border); border-radius:6px; padding:12px 8px; display:flex; flex-direction:column; align-items:center; min-height:150px; }
.bearer-tile-name { font-size:12px; color:var(--white); margin-top:8px; line-height:1.3; flex:1; display:flex; align-items:center; }
.bearer-tile-role { font-size:10px; color:var(--gold); margin-top:6px; }
.bearer-scroll-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:28px; height:28px; border-radius:50%; border:1px solid var(--gold-dim); background:var(--bg2); color:var(--gold); font-size:16px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.bearer-scroll-arrow:hover { background:var(--gold); color:var(--bg); }
.icon-contact-row { display:flex; align-items:flex-start; gap:12px; padding:9px 0; border-bottom:1px solid var(--border); }
.icon-contact-row:last-child { border-bottom:none; }
.icon-chip { flex-shrink:0; width:32px; height:32px; border-radius:50%; border:1px solid var(--gold-dim); display:flex; align-items:center; justify-content:center; color:var(--gold); }
.icon-chip svg { width:16px; height:16px; }
.icon-contact-text { min-width:0; flex:1; padding-top:2px; display:flex; align-items:baseline; flex-wrap:wrap; gap:4px; }
.icon-contact-label { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:0.04em; flex-shrink:0; }
.icon-contact-label::after { content:'-'; margin-left:4px; color:var(--muted); }
.icon-contact-value { font-size:13px; color:var(--text); word-break:break-word; }
.icon-contact-tag { display:inline-block; font-size:9px; color:var(--gold); border:1px solid var(--gold-dim); border-radius:8px; padding:1px 6px; margin-left:6px; text-transform:uppercase; letter-spacing:0.03em; vertical-align:middle; }

/* Change 6 - Browse by Theme: search + category accordion */
.theme-search-wrap { padding:0 20px 16px; max-width:520px; margin:0 auto; }
.theme-search-wrap input { width:100%; background:rgba(30,28,24,0.7); border:1px solid var(--border); color:var(--text); padding:12px 16px; font-family:var(--font-body); font-size:14px; border-radius:var(--radius-btn); outline:none; }
.theme-search-wrap input:focus { border-color:var(--gold); }
.theme-cat-list { display:flex; flex-direction:column; gap:10px; padding:0 20px; max-width:720px; margin:0 auto; }
.theme-cat-card { background:var(--bg2); border:1px solid var(--border); border-radius:4px; padding:14px 18px; }
.theme-cat-head { display:flex; align-items:center; justify-content:space-between; cursor:pointer; }
.theme-cat-name { font-family:var(--font-head); font-size:17px; color:var(--white); }
.theme-cat-count { font-size:11px; color:var(--gold); margin-left:8px; }
.theme-cat-expand { width:28px; height:28px; border-radius:50%; border:1px solid var(--border); background:var(--bg3); color:var(--gold); font-size:16px; display:flex; align-items:center; justify-content:center; transition:transform .2s, border-color .2s; flex-shrink:0; }
.theme-cat-card.open .theme-cat-expand { transform:rotate(45deg); border-color:var(--gold); }
.theme-cat-subs { display:none; flex-wrap:wrap; gap:8px; margin-top:14px; padding-top:14px; border-top:1px solid var(--border); }
.theme-cat-card.open .theme-cat-subs { display:flex; }
.theme-cat-subs a.theme-pill { text-decoration:none; }
.theme-cat-card.no-match { display:none; }

/* Rotating hero banner (heading + supporting text rotate inside the existing hero) */
.hero-slide { display: none; }
.hero-slide.active { display: block; animation: heroFade .6s ease; }
@keyframes heroFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.hero-dots { display: flex; gap: 6px; justify-content: center; margin: -8px 0 20px; }
.hero-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--border); cursor: pointer; transition: background .2s; display: inline-block; }
.hero-dots span.active { background: var(--gold); }
.hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; background: rgba(20,18,15,0.55); border: 1px solid var(--border); color: var(--gold); width: 38px; height: 38px; border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color .2s, background .2s; }
.hero-arrow:hover { border-color: var(--gold); background: rgba(20,18,15,0.85); }
.hero-arrow-left { left: 14px; }
.hero-arrow-right { right: 14px; }
@media (min-width: 768px) { .hero-arrow-left { left: 28px; } .hero-arrow-right { right: 28px; } }

/* Change 18 - Club Homepage redesign: News Flash tile cards */
.newsflash-tiles { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 24px; -webkit-overflow-scrolling: touch; }
.newsflash-tile { flex: 0 0 150px; background: var(--bg3); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; text-decoration: none; display: block; }
.nf-tile-img { width: 100%; height: 90px; background: var(--bg2); overflow: hidden; position: relative; }
.nf-tile-img img { width: 100%; height: 100%; object-fit: cover; }
.nf-tile-img-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 26px; opacity: 0.4; }
.nf-tile-register-badge { position: absolute; top: 6px; right: 6px; background: var(--gold); color: var(--color-on-accent); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 3px 7px; border-radius: 10px; }
.nf-tile-body { padding: 8px 10px; }
.nf-tile-date { font-size: 10px; color: var(--gold); text-transform: uppercase; letter-spacing: 0.04em; }
.nf-tile-title { font-size: 12px; color: var(--white); line-height: 1.4; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.newsflash-top-strip { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; }
.nf-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: 15px; flex-shrink: 0; cursor: pointer; background: var(--bg2); }
.nf-scroll-track { flex: 1; display: flex; gap: 8px; overflow-x: auto; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.nf-scroll-track::-webkit-scrollbar { display: none; }
.nf-top-tile { flex: 0 0 130px; background: var(--bg2); border: 1px solid var(--border); border-radius: 4px; padding: 8px; text-decoration: none; display: block; }
.nf-top-tile-img { width: 100%; height: 60px; border-radius:var(--radius-btn); background: var(--bg3); overflow: hidden; position: relative; margin-bottom: 6px; }
.nf-top-tile-img img { width: 100%; height: 100%; object-fit: cover; }
.nf-top-tile-date { font-size: 9px; color: var(--muted); }
.nf-top-tile-title { font-size: 11px; color: var(--text); line-height: 1.3; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Change 18 - Club Homepage redesign: mini event calendar with dot-markers + popup bubble */
.event-calendar { background: var(--bg3); border: 1px solid var(--border); border-radius: 6px; padding: 14px; margin-bottom: 8px; }
.ec-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ec-month { font-family: var(--font-head); font-size: 16px; color: var(--white); }
.ec-nav { background: none; border: 1px solid var(--border); color: var(--gold); width: 28px; height: 28px; border-radius: 50%; font-size: 16px; cursor: pointer; }
.ec-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.ec-dow { font-size: 10px; color: var(--muted); padding: 4px 0; }
.ec-day { position: relative; font-size: 12px; color: var(--text); padding: 7px 0; border-radius: 4px; }
.ec-day.has-event { color: var(--gold); cursor: pointer; font-weight: 600; background: rgba(201,168,76,0.08); }
.ec-day.has-event:hover { background: rgba(201,168,76,0.18); }
.ec-dot { position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }
.ec-bubble { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 10px; }
.ec-bubble-item { display: block; text-decoration: none; padding: 6px 0; border-bottom: 1px solid var(--border); }
.ec-bubble-item:last-child { border-bottom: none; }
.ec-bubble-type { font-size: 9px; color: var(--gold); text-transform: uppercase; letter-spacing: 0.04em; }
.ec-bubble-title { font-size: 13px; color: var(--white); margin: 2px 0; }
.ec-bubble-meta { font-size: 11px; color: var(--muted); }

/* Change 18 - Profile completion meter */
.profile-completion { background: var(--bg3); border: 1px solid var(--border); border-radius: 6px; padding: 14px 16px; margin: 16px 0 24px; }
.pc-header { margin-bottom: 8px; }
.pc-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.pc-bar { height: 26px; background: var(--bg2); border-radius: 13px; overflow: hidden; margin-bottom: 12px; border: 1px solid var(--border); position: relative; }
.pc-bar-fill { height: 100%; background: linear-gradient(90deg, #3f9142, #5cb85c); border-radius: 13px; transition: width .4s ease; display: flex; align-items: center; justify-content: flex-end; padding-right: 8px; min-width: 46px; }
.pc-bar-text { font-size: 11px; font-weight: 600; color: #fff; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.pc-sections { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.pc-chip { font-size: 10px; border-radius: 12px; padding: 4px 10px; font-weight: 500; }
.pc-chip.done { color: #fff; background: rgba(92,184,92,0.28); border: 1px solid rgba(92,184,92,0.6); }
.pc-chip.missing { color: #f0a8a8; background: rgba(217,108,108,0.18); border: 1px solid rgba(217,108,108,0.45); }
.pc-note { font-size: 11px; color: var(--muted); margin: 0; }
.accordion-head h3.sec-done { color: #7fc97f; }
.accordion-head h3.sec-missing { color: #e08a8a; }
@media (min-width: 768px) { .hero-dots { justify-content: flex-start; } }

/* Change 11 - Accordion sections for Registration & Edit Profile */
.accordion-section { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-card); margin-bottom: var(--space-card-gap); overflow: hidden; }
.accordion-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 22px; cursor: pointer; }
.accordion-head .acc-title-wrap { min-width: 0; display: flex; align-items: center; }
.accordion-head h3 { font-size: 18px; color: var(--white); margin: 0; }
.accordion-toggle { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg3); color: var(--gold); font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: transform .25s, border-color .2s; flex-shrink: 0; }
.accordion-section.open .accordion-toggle { transform: rotate(45deg); border-color: var(--gold); }
.accordion-body { display: none; padding: 0 22px 26px; }
.accordion-section.open .accordion-body { display: block; animation: accFade .35s ease; }
@keyframes accFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.accordion-subhead { font-size: 12px; color: var(--gold); text-transform: uppercase; letter-spacing: 0.07em; margin: 22px 0 12px; padding-top: 18px; border-top: 1px solid var(--border); }
.accordion-subhead:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.accordion-continue { display: flex; align-items: center; justify-content: center; gap: 6px; background: transparent; border: 1px dashed var(--gold-dim); color: var(--gold); padding: 12px; width: 100%; border-radius:var(--radius-btn); cursor: pointer; font-size: 12px; margin-top: 8px; text-transform: uppercase; letter-spacing: 0.05em; }
.accordion-continue:hover { border-color: var(--gold); }

/* change342 - shared "field grid" component (label above value, two
   columns) used inside accordion-body sections. Originally defined only in
   identify/identify.css for the AI Stamp Scanner result page's "More
   Details"/"Image Details" cards; moved here so it's a true sitewide
   component both Identify and Albums use directly, instead of Albums having
   to link an unrelated module's stylesheet just to get the same look. Fixes
   Dipen's complaint that the Album stamp page's details looked like a plain
   list ("excel table") while Identify's looked like a proper card grid -
   they were literally different markup/CSS before this. */
.identify-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.identify-field-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 2px; }
.identify-field-value { font-size: 14px; color: var(--text); }
.identify-field-value.identify-pending, .identify-pending { color: var(--muted); font-style: italic; font-size: 12.5px; }
.sell-fields-block { display: none; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.sell-fields-block.show { display: block; }

/* Ribbon badge - top-left corner of org cards */
.ribbon-badge {
  position: absolute;
  top: 10px;
  left: -6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 4px 10px 4px 12px;
  color: #fff;
  z-index: 2;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 6px 100%, 0 70%);
}
.ribbon-verified { background: #2d8a4e; }
.ribbon-unclaimed { background: #b03d3d; }
.ribbon-reverify { background: #b8862c; }
/* change249 - same ribbon pattern, 2 new variants for the homepage News strip */
.ribbon-new-issue { background: var(--gold); color: #241f14; }
.ribbon-exhibition { background: #2d8a4e; }

/* change250 (item 2c) - Daily News type filter, icon-toggle row */
.nd-type-row { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 10px; }
.nd-type-icon { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg2); color: var(--muted); text-decoration: none; min-width: 62px; }
.nd-type-icon svg { width: 18px; height: 18px; }
.nd-type-icon span { font-size: 9.5px; white-space: nowrap; }
.nd-type-icon.active { border-color: var(--gold); background: var(--gold-dim); color: var(--gold-lt); }
/* change253 - Daily News date-filter mode choice: 2 plain text links (Date
   Range / Month & Year), not buttons/a toggle-switch - picking one shows
   that mode's fields below it. */
.nd-mode-links { display:flex; gap:16px; margin-bottom:10px; font-size:12px; }
.nd-mode-link { color:var(--muted); text-decoration:none; padding-bottom:2px; }
.nd-mode-link.active { color:var(--gold-lt); border-bottom:2px solid var(--gold); font-weight:600; }
.nd-my-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
/* change253-fix - single collapsed "Filter by Date" entry link + active-dot */
.nd-date-toggle { font-size:12px; color:var(--gold-lt); cursor:pointer; margin-bottom:10px; display:inline-flex; align-items:center; gap:6px; }
.nd-date-active-dot { width:6px; height:6px; border-radius:50%; background:var(--gold); display:inline-block; }
/* change253-fix - card date blocks: Published On / News Date / Event, always
   1 row (equal-width flex, no wrap), Published On first. */
.nd-date-row { display: flex; gap: 6px; margin-top: 4px; flex-wrap: nowrap; }
.nd-date-block { flex: 1 1 0; min-width: 0; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; padding: 6px 6px; text-align: center; }
.nd-date-label { font-size: 8px; letter-spacing:0.03em; text-transform:uppercase; color: var(--muted); line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nd-date-value { font-size: 10.5px; color: var(--text); font-weight: 600; margin-top: 2px; line-height:1.1; white-space:nowrap; }

/* Scroll to top button */
#scrollTopBtn {
  position: fixed;
  right: 16px;
  bottom: calc(var(--bottom-h) + 16px);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--color-on-accent);
  border: none;
  font-size: 18px;
  font-weight: bold;
  z-index: 150;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
#scrollTopBtn.visible { opacity: 1; pointer-events: auto; }
@media (min-width: 768px) { #scrollTopBtn { bottom: 24px; } }

/* change164 - floating Message icon, disabled placeholder (matches the
   footer's .footer-soon-link "Coming Soon" treatment: dimmed, cursor:default,
   no click target) until chat is built. Always visible (not scroll-linked
   like #scrollTopBtn), stacked directly above it with a small gap. */
.float-msg-btn {
  position: fixed;
  right: 16px;
  bottom: calc(var(--bottom-h) + 16px + 42px + 10px);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 150;
  opacity: 0.55;
  cursor: default;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.float-msg-btn svg { width: 18px; height: 18px; }
@media (min-width: 768px) { .float-msg-btn { bottom: calc(24px + 42px + 10px); } }
/* Change 90 fix2 - under the WhatsApp theme, the Identify FAB (.theme-fab) and this
   scroll-to-top button previously landed in the exact same spot (both right:~16-18px,
   bottom: calc(var(--bottom-h) + 16px)), overlapping whenever both were visible at once.
   Default theme has no FAB at all, so it's untouched - only shifting scroll-to-top up
   here, stacked above the FAB with a small gap. */
[data-theme="whatsapp"] #scrollTopBtn { bottom: calc(var(--bottom-h) + 16px + 52px + 10px); }

/* Change 85 - floating Join button (#joinLoginBtn) removed permanently. Its CSS block
   used to live here (Change 79 batch). See footer.php for removal rationale. */

/* ============================================
   India Map - homepage browse by state
   ============================================ */
.india-map-wrap { padding: 0 20px 8px; max-width: 480px; margin: 0 auto; }
.india-map-inner { position: relative; width: 100%; }
.india-map-svg { width: 100%; height: auto; display: block; }
.india-state-path {
  fill: #3a3328;
  stroke: #5a4f3a;
  stroke-width: 1.2;
  transition: fill 0.2s;
}
.india-map-hotspots { position: absolute; inset: 0; }
.india-hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  z-index: 2;
}
.india-hotspot-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.7;
  transition: transform 0.15s, opacity 0.15s;
}
.india-hotspot:hover .india-hotspot-dot,
.india-hotspot:active .india-hotspot-dot,
.india-hotspot.is-active .india-hotspot-dot {
  transform: scale(2.2);
  opacity: 1;
}

/* change269 - click-to-reveal interaction: labels and leader lines were
   always-visible before; now hidden by default and only shown for whichever
   state's dot was last tapped, per approved mock. Popup sits above the dot. */
.india-map-leaders { position: absolute; inset: 0; pointer-events: none; width: 100%; height: 100%; }
.leader-line { stroke: var(--muted); stroke-width: 0.3; stroke-dasharray: 1,1; opacity: 0; vector-effect: non-scaling-stroke; transition: opacity 0.2s; }
.leader-line.is-active { opacity: 0.55; }
.india-map-labels { position: absolute; inset: 0; pointer-events: none; }
.india-state-label {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--gold-lt);
  background: rgba(15,14,12,0.8);
  border: 1px solid var(--border);
  padding: 1px 4px;
  border-radius: 2px;
  white-space: normal;
  max-width: 78px;
  text-align: center;
  line-height: 1.15;
  z-index: 3;
  display: none;
}
.india-state-label.is-active { display: block; }
.map-state-popup {
  position: absolute;
  transform: translate(-50%, calc(-100% - 10px));
  background: var(--bg2);
  border: 1px solid var(--gold);
  border-radius: 6px;
  padding: 6px 10px;
  text-align: center;
  white-space: nowrap;
  z-index: 4;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
  cursor: pointer;
}
.map-state-popup .msp-name { font-family: var(--font-body); font-size: 11px; font-weight: 600; color: var(--white); margin-bottom: 2px; }
.map-state-popup .msp-cta { font-family: var(--font-body); font-size: 9.5px; letter-spacing: 0.03em; color: var(--gold); }

/* Change 22 (Phase E) - India/World map toggle */
.map-toggle-tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: 14px; }
.map-toggle-btn { padding: 8px 20px; font-size: 12px; border-radius: 16px; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; transition: border-color .2s, color .2s; }
.map-toggle-btn.active { border-color: var(--gold); color: var(--gold); }
.world-map-wrap { padding: 0 20px 8px; max-width: 600px; margin: 0 auto; }
.world-map-inner { position: relative; width: 100%; }
.world-map-svg { width: 100%; height: auto; display: block; }
.world-country-path { fill: #3a3328; stroke: #5a4f3a; stroke-width: 0.5; transition: fill 0.2s; }
.world-map-hotspots { position: absolute; inset: 0; }
.world-hotspot { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; z-index: 2; }
.world-hotspot-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); opacity: 0.8; transition: transform 0.15s, opacity 0.15s; }
.world-hotspot:hover .world-hotspot-dot, .world-hotspot:active .world-hotspot-dot { transform: scale(2.2); opacity: 1; }

/* Find Philatelists section - arrows moved below carousel, centered */
.find-philatelists-block { margin-bottom: 36px; }
.scroll-arrows-bottom { display: flex; justify-content: center; gap: 10px; margin-top: 4px; }
.scroll-arrows-bottom button { width: 34px; height: 34px; border: 1px solid var(--border); background: var(--bg2); color: var(--muted); border-radius: 50%; cursor: pointer; font-size: 16px; transition: border-color .2s, color .2s; }
.scroll-arrows-bottom button:hover { border-color: var(--gold); color: var(--gold); }

/* Change 18 - shared sort/pagination controls for club module listing pages */
.sortpage-bar { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.sortpage-select { font-size: 11px; background: var(--bg3); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 6px 8px; flex: 1; min-width: 120px; }
.sortpage-pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 20px 0; font-size: 12px; color: var(--muted); }
.sortpage-pager a { color: var(--gold); text-decoration: none; }

/* ============================================
   Change 89 - WhatsApp theme LAYOUT overrides (not just colors/font/radius).
   Same markup as the default theme everywhere - these rules only change how
   existing elements are arranged (display mode, order, visibility), per the
   "one codebase, CSS only" approach confirmed with the user. See the approved
   mockups (whatsapp_theme_mockup.html, homepage_directory_mockup.html) for
   what these are matching.
   ============================================ */

/* Hero: collapses from a centered marketing block into a compact title row.
   Same headline text/data - just laid out differently and the tagline <p> is
   hidden (data still there for the default theme, simply not shown here). */
/* Change 91 fix2 - WhatsApp hero, full rebuild. Previous version only hid the
   tagline/eyebrow and left-aligned the title with nothing to replace that visual
   weight, reading as broken/malformed rather than deliberately minimal. Now:
   background image/gradient hidden (WhatsApp's own top area has no photo
   background), title kept compact but still 2 lines (no run-together text from
   hiding <br>), carousel dots hidden (less relevant for a single compact title),
   and a tappable search-bar-style link to directory.php replaces the marketing
   paragraph - giving the empty space real purpose instead of just removing text. */
[data-theme="whatsapp"] .hero { min-height: auto !important; padding: 10px 16px 12px !important; text-align: left; display: block; }
[data-theme="whatsapp"] .hero-bg, [data-theme="whatsapp"] .hero-img { display: none; }
[data-theme="whatsapp"] .hero .eyebrow { display: none; }
[data-theme="whatsapp"] .hero-content { display: block; }
/* Change 92 fix2 - hero card corrections per further user feedback:
   (a) hiding the <br> via CSS was running words together ("Profilefor") -
   switched to a real space character in the markup instead (index.php),
   so this CSS-hide rule is no longer needed/present.
   (b) text color changed to white per explicit correction (was var(--bg)
   dark from fix1). */
[data-theme="whatsapp"] #heroRotator {
  position: relative;
  margin-top: 10px;
  padding: 14px 20px;
  background: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 14px;
}
[data-theme="whatsapp"] .hero-slide h1 { font-size: 18px; line-height: 1.3; margin-bottom: 0; color: var(--white); }
[data-theme="whatsapp"] .hero-slide h1 em { color: var(--white); font-style: normal; }
[data-theme="whatsapp"] .hero-slide p {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--white);
  opacity: 0.85;
}
[data-theme="whatsapp"] .hero-arrow {
  display: flex;
  width: 28px; height: 28px;
  background: var(--bg2);
  border-color: var(--border);
  color: var(--gold);
  font-size: 15px;
}
[data-theme="whatsapp"] .hero-arrow-left { left: -4px; }
[data-theme="whatsapp"] .hero-arrow-right { right: -4px; }
[data-theme="whatsapp"] .hero-dots { display: none; }

/* Change 92 fix1 - hero search box, now a real functional search input
   (was a plain link to directory.php - corrected per user feedback: a
   search box should let you type/search, not just navigate away). Reuses
   the .hero-search-box styling already defined in index.php's own <style>
   block. Hidden under Default theme, shown under WhatsApp theme. */
.hero-search-box-whatsapp { display: none; }
[data-theme="whatsapp"] .hero-search-box-whatsapp {
  display: block;
  margin-top: 0;
  margin-bottom: 10px;
}
[data-theme="whatsapp"] .hero-search-box-whatsapp input {
  background: var(--bg3);
  border-radius: 20px;
  padding: 12px 16px 12px 40px;
  font-size: 13px;
}

/* change212 - Classic theme's grid-card name color stays (color-only theme
   difference, not a layout override) - the WhatsApp flat list-row layout that
   used to live in this section (frozen per list_row_mockup2.html) has been
   removed per Dipen's explicit decision: WhatsApp theme now renders the same
   stamp-card layout as every other theme, differing only in accent color. */
[data-theme="classic"] .members-grid .member-card .member-name { color: var(--gold) !important; }


/* Traditional Prev/Next pagination hidden under this theme - infinite scroll
   (shared JS, see footer.php) takes over instead. Default theme's pagination
   is completely untouched, this only hides it when whatsapp theme is active. */
[data-theme="whatsapp"] .sortpage-pager { display: none !important; }
/* change253-fix2 - Club/Directory: Prev/Next stay hidden on WhatsApp since
   infinite scroll substitutes them, but jump-to-page has no substitute
   anywhere - only hide the Prev/Next links, not the whole .pagination
   container, so jump-to-page (.jtp-wrap) stays visible on every theme. */
[data-theme="whatsapp"] .pagination .pg-btn { display: none !important; }

/* Floating action button - WhatsApp theme only, links to Identify (the
   closest thing this site has to a universal "create/add" action).
   Change 92 - hidden per user request (kept in markup/PHP, CSS-hidden only,
   easy to restore by flipping this back to flex). */
[data-theme="whatsapp"] .theme-fab {
  display: none !important;
}
.theme-fab {
  display: none;
  position: fixed;
  bottom: calc(var(--bottom-h) + 16px);
  right: 18px;
  width: 52px; height: 52px;
  background: var(--gold);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  color: var(--color-on-accent);
  font-size: 24px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  z-index: 150;
}

/* change212 - the WhatsApp-only "Compact" homepage card style (frozen per
   featured_card_mockup3.html) has been removed per Dipen's explicit decision:
   WhatsApp theme now renders the same stamp-card design as every other theme,
   differing only in accent color, never layout. The "Homepage Card Style"
   toggle in admin/settings.php is left in place (does nothing now) - explicit
   decision to defer that cleanup to later, not forgotten. */

/* ===== change129: sitewide Yes/No slide switch (green=Yes, red=No, fixed
   colors in both themes per user decision) - CSS-only, wraps the real
   checkbox so every form's server-side handling stays untouched. ===== */
.pk-switch { display: inline-flex; align-items: center; cursor: pointer; flex-shrink: 0; }
.pk-switch input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.pk-switch .pk-slider {
  width: 46px; height: 26px; border-radius: 13px; position: relative;
  background: rgba(217,115,108,0.18); border: 1px solid #d9736c; transition: all 0.15s;
}
.pk-switch .pk-slider::after {
  content: ""; width: 20px; height: 20px; border-radius: 50%;
  background: #d9736c; position: absolute; top: 2px; left: 2px; transition: all 0.15s;
}
.pk-switch input:checked + .pk-slider { background: rgba(47,174,78,0.18); border-color: #2fae4e; }
.pk-switch input:checked + .pk-slider::after { background: #2fae4e; left: 23px; }
.pk-switch input:disabled + .pk-slider { opacity: 0.45; cursor: not-allowed; }

/* change157 - custom checkbox, replacing bare native <input type="checkbox">
   wherever a genuine multi-select (not a single yes/no) is needed - the
   toggle switch above is for yes/no; this is for "pick any of these".
   Used by Announcements' Related-To tags and Volunteer's requirement list. */
.styled-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.styled-check input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.styled-check .chk-box { width: 18px; height: 18px; border: 1.5px solid var(--border); border-radius: 4px; background: var(--bg3); flex-shrink: 0; position: relative; transition: 0.15s; }
.styled-check input:checked ~ .chk-box { background: var(--gold); border-color: var(--gold); }
.styled-check input:checked ~ .chk-box::after { content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 9px; border: solid var(--bg); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* change158 - shared file upload UI (Add Another pattern + cover page) */
.upload-field-wrap { margin-top: 14px; }
.upload-doc-row { display: flex; justify-content: space-between; align-items: center; background: var(--bg3); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; margin-bottom: 6px; font-size: 12.5px; }
.upload-doc-row a { color: var(--gold); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-doc-remove { background: none; border: none; color: #d9736c; font-size: 16px; cursor: pointer; line-height: 1; }
.cover-preview { width: 100%; max-width: 240px; border-radius: 6px; margin-top: 8px; display: block; }
.pk-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pk-switch-row .pk-switch-label { font-size: 13.5px; color: var(--text); }

/* ===== change129: sitewide pill toggle group (2-4 fixed options),
   generalised from the camp/epoll per-module copies. ===== */
.pk-toggle-group { display: flex; gap: 8px; }
.pk-toggle-opt {
  flex: 1; text-align: center; padding: 10px 8px; border: 1px solid var(--border);
  border-radius: 10px; font-size: 13px; color: var(--muted); cursor: pointer; transition: all 0.15s;
}
.pk-toggle-opt.active { border-color: var(--gold); color: var(--gold); background: var(--gold-dim); }
.pk-toggle-opt.pk-toggle-disabled { opacity: 0.45; cursor: not-allowed; }

/* ===== change133: sitewide date/time icon-button, generalised from the
   camp-date-pick-btn / epoll-date-pick-btn pattern already proven working.
   Real native input stays underneath, invisible - min/max/required/disabled
   and whatever gets submitted are completely unchanged. ===== */
.pk-date-wrap { position: relative; }
.pk-date-btn {
  width: 100%; background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius-btn); color: var(--text); padding: 10px 12px;
  font-family: var(--font-body); display: flex; align-items: center; gap: 10px; text-align: left;
}
.pk-date-btn svg { width: 18px; height: 18px; color: var(--gold); flex-shrink: 0; }
.pk-date-text { display: flex; flex-direction: column; }
.pk-date-label { font-size: 11px; color: var(--muted); }
.pk-date-value { font-size: 12.5px; color: var(--white); font-weight: 600; }
.pk-date-real { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; border: none; cursor: pointer; }
.pk-date-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ===== change136: locked-date visual state - used when a Publish Date
   field is locked (e.g. once Published) instead of the native "disabled"
   attribute, which breaks the invisible-overlay trick on some mobile
   browsers (a disabled date/time input can render its own native box
   instead of staying hidden). pointer-events:none on the real input
   achieves the same "can't tap it" result without that side effect -
   the actual protection is already enforced server-side regardless. ===== */
.pk-date-locked-real { pointer-events: none !important; }
.pk-date-locked-btn { opacity: 0.55; }
.pk-date-locked-btn svg { color: var(--muted) !important; }

/* ===== change232 - shared sub-nav row (Community/Stamps/AI section back-links),
   reusing digiex-nav-row's exact visual pattern (filled gold/green, flex, wraps
   to 2 lines) but as a sitewide class so any page can use it, not just event modules. ===== */
.subnav-row { display: flex; gap: 6px; flex-wrap: wrap; width: 100%; margin-bottom: 14px; }
.subnav-btn {
  flex: 1 1 30%; min-width: 0; display: block; background: var(--gold); color: var(--color-on-accent);
  border: none; border-radius: var(--radius-btn, 10px); padding: 10px 4px; font-size: 11px;
  font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none;
  text-align: center; white-space: normal; line-height: 1.25; word-break: break-word;
}

/* ===== change232 - Directory/Stamps/Community hub landing pages: 2-icon and
   5-icon grid of large tappable cards, disabled state for not-yet-built links. ===== */
.hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-card-gap); max-width:var(--content-wide); margin:0 auto; padding:var(--space-section) var(--page-gutter); }
.hub-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: clamp(18px, 3vw, 24px) var(--space-card); background: var(--bg2, var(--bg3)); border: 1px solid var(--border); border-radius: var(--radius-card); text-decoration: none; text-align: center; }
.hub-card-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--gold-dim, rgba(201,168,76,0.15)); display: flex; align-items: center; justify-content: center; }
.hub-card-icon svg { width: 24px; height: 24px; stroke: var(--gold); }
.hub-card-title { font-size: 14px; font-weight: 700; color: var(--text, #fff); }
.hub-card-desc { font-size: var(--text-small-readable); color: var(--muted); line-height: 1.55; }
.hub-card.hub-card-disabled { opacity: 0.5; }
.hub-card-soon { font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 2px 8px; margin-top: -4px; }
/* change269 - directory_hub.php full rebuild: two module cards with real
   stats (reusing the existing .org-stats-bar pattern already used elsewhere
   on the site), plus grouped Browse-by boxes below, per approved mock.
   Genuinely new layout - .hub-card above wasn't built for a stats/CTA
   footer, so this is a separate, richer card, not an extension of it. */
.dir-module-grid { display: flex; flex-direction: column; gap: 14px; padding: 0 20px 26px; max-width: 480px; margin: 0 auto; }
.dir-module-card {
  position: relative; border-radius: var(--radius-card); overflow: hidden; border: 1px solid var(--border);
  background: var(--bg2); text-decoration: none; color: inherit; display: block;
}
.dir-module-visual {
  height: 100px; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--gold-dim), transparent 70%), var(--bg3);
}
.dir-mv-icon { font-size: 46px; opacity: 0.9; }
.dir-mv-deco { position: absolute; font-size: 26px; opacity: 0.25; }
.dir-mv-deco-1 { top: 12px; left: 18%; transform: rotate(-8deg); }
.dir-mv-deco-2 { bottom: 10px; right: 14%; transform: rotate(10deg); }
.dir-mv-deco-3 { top: 16px; right: 22%; transform: rotate(6deg); }
.dir-module-stats { display: flex; gap: 10px; margin: 12px 0; }
.dir-mstat { flex: 1; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; padding: 8px 6px; text-align: center; }
.dir-mstat b { display: block; font-size: 15px; color: var(--white); font-family: var(--font-head); }
.dir-mstat span { display: block; font-size: 10.5px; color: var(--muted); margin-top: 2px; line-height:1.35; }
.dir-module-body { padding: 14px 16px 16px; }
.dir-module-kicker { font-size: 10.5px; color: var(--gold); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; margin-bottom: 3px; }
.dir-module-body h3 { font-size: 19px; color: var(--white); margin: 0 0 6px; font-family: var(--font-head); }
.dir-module-body p { font-size: 12.5px; color: var(--muted); line-height: 1.45; margin: 0 0 4px; }
.dir-module-cta { display: flex; align-items: center; justify-content: space-between; color: var(--gold); font-size: 12.5px; font-weight: 600; padding-top: 10px; margin-top: 8px; border-top: 1px solid var(--border); }

.dir-browse-box { border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--bg2); padding: var(--space-card) var(--space-card) 6px; margin: 0 var(--page-gutter) var(--space-section); max-width: 440px; }
@media (min-width: 500px) { .dir-browse-box { margin-left: auto; margin-right: auto; } }
.dir-browse-box-head { font-size: 15px; color: var(--white); font-family: var(--font-head); margin: 0 0 14px; padding: 0 2px; }
.dir-browse-section { margin-bottom: 16px; }
.dir-browse-head { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; margin-bottom: 8px; }
.dir-browse-head h4 { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gold); font-weight: 600; margin: 0; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dir-sub-note { font-size: 10px; color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
.dir-search-wrap { position: relative; width: 118px; flex-shrink: 0; }
.dir-search-wrap input { width: 100%; background: var(--bg3); border: 1px solid var(--border); border-radius: 20px; padding: 6px 10px 6px 26px; font-size: 11px; color: var(--text); font-family: var(--font-body); }
.dir-search-wrap .ico { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--muted); }
.dir-search-suggest { display: none; position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; max-height: 160px; overflow-y: auto; z-index: 10; }
.dir-search-suggest.open { display: block; }
.dir-search-suggest .sugg-item { padding: 8px 12px; font-size: 11px; color: var(--text); border-bottom: 1px solid var(--border); cursor: pointer; }
.dir-search-suggest .sugg-item:last-child { border-bottom: none; }
.dir-search-suggest .sugg-parent { color: var(--muted); font-size: 10.5px; }
@keyframes allStatesPulse { 0%,100% { background: var(--bg2); } 50% { background: var(--gold-dim); } }
.dir-pill.all-states-hint .dir-pill-inner { animation: allStatesPulse 1.4s ease-in-out infinite; }
.dir-pill.selected .dir-pill-inner { outline: none; }
.dir-pill.selected { position: relative; }
.dir-pill.selected::after {
  content: "✓"; position: absolute; top: -5px; right: -5px; width: 16px; height: 16px;
  background: var(--white); color: var(--bg); border-radius: 50%; font-size: 10px;
  display: flex; align-items: center; justify-content: center; font-weight: 700;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3); z-index: 2;
}
.dir-browse-scroll { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
.dir-browse-scroll::-webkit-scrollbar { display: none; }
.dir-pill { flex-shrink: 0; width: 64px; text-align: center; text-decoration: none; color: inherit; }
/* Reuses the real sitewide .perforated frame mechanism (buildPerforatedPath in
   footer.php) - not a new perforation effect, just applied to a small tile. */
/* change269 (fix) - inverted per correction: the tile's main fill now
   carries the full accent color, with light/dark text on top - was the
   other way round (accent only as a thin outer band, plain dark fill,
   muted text). Text color follows the same real convention already used
   for .btn-primary/.profile-qr-block: dark text on Classic's gold, white
   text on WhatsApp/Light/Instagram (each theme's existing override below). */
.dir-pill.perforated { background: color-mix(in srgb, var(--gold) 70%, var(--bg) 30%); padding: 2.5px; }
.dir-pill-inner { background: var(--gold); color: var(--color-on-accent); border-radius: var(--radius-btn); padding: 7px 3px; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.dir-pill.flag .dir-pill-inner { font-size: 18px; padding-top: 8px; }
.dir-pill .flag-cnt { font-size: 8px; color: inherit; opacity: 0.85; margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-height: 2.1em; line-height: 1.2; }
.dir-pill .code { font-family: var(--font-head); font-size: 14px; color: inherit; font-weight: 600; }
.dir-pill .cnt { font-size: 8.5px; color: inherit; opacity: 0.75; margin-top: 2px; }
/* change269 (fix) - icon size increased (was cramped/dot-like at 20px),
   text now single line trimmed with an ellipsis (was 2-line wrap, which
   kept growing tile height unevenly - corrected per Dipen's actual ask).
   Icon sits on its own small neutral backing chip so its own colors never
   blend into the tile's accent fill, whatever color that fill is on a
   given theme (e.g. a gold coin icon on a gold-filled tile). */
.dir-theme-icon { display: flex; justify-content: center; margin-bottom: 2px; }
/* change269 (fix) - square badge with a border matching the card's own
   real border color, replacing the earlier plain circle - per correction,
   this is now the one standard treatment used everywhere on these tiles,
   not a special case for just Theme/Profile. */
.dir-theme-icon .icon-chip { width: 30px; height: 30px; border-radius: 6px; background: rgba(255,255,255,0.92); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; margin: 0 auto; }
.dir-theme-icon svg { width: 22px; height: 22px; display: block; }
.dir-theme-icon .flag-chip { font-size: 16px; }
.dir-theme-icon .code-chip { font-family: var(--font-head); font-size: 12px; font-weight: 600; color: #1a1a1a; }
/* change279 - was single-line with an ellipsis (change269's own later
   correction, made because an earlier 2-line attempt had no reserved
   height, so a short 1-line label sat shorter than a long 2-line label in
   the same row). This version fixes that root cause: 2-line clamp AND a
   fixed min-height sized for exactly 2 lines at this font-size/line-height,
   so every tile in a row reserves the same space regardless of its own
   label length - a 1-line label just leaves blank space below it instead
   of shrinking the tile. */
.dir-theme-name { font-size: 9px; color: inherit; opacity: 0.95; margin-top: 6px; line-height: 1.2; min-height: 21.6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* change256 - real .v2-main-chip pattern, copied exactly from my_account.php's
   local style block (it lived only there before) - reused as-is for Albums'
   icon-nav, smaller/tighter than .hub-card, matching My Account's look. */
.v2-main-grid { display: flex; flex-wrap: wrap; gap: 14px; margin: 16px 0 20px; }
.v2-main-chip { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; width: 68px; text-decoration: none; }
.v2-main-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--bg3); border: 1px solid var(--gold-dim); color: var(--gold); }
.v2-main-icon svg { width: 19px; height: 19px; }
.v2-main-chip.active .v2-main-icon { background: var(--gold); border-color: var(--gold); color: var(--color-on-accent); }
.v2-main-label { font-size: 10px; color: var(--muted); text-align: center; line-height: 1.2; }
.v2-main-chip.active .v2-main-label { color: var(--gold); font-weight: 600; }

/* change269 (fix) - new icon-bearing tiles (Theme, Club Type, Collector
   Profile, and the top filter-icon row) now reuse the exact real
   .v2-main-chip/.v2-main-icon/.v2-main-label pattern already proven on My
   Account, instead of an invented approximation. A white badge sits inside
   the real icon box to hold the colorful multi-color icon artwork, since
   the real pattern's color:var(--gold) only works for simple single-color
   icons. Country/State/Colony tiles are untouched - they carry no drawn
   icon, so this doesn't apply to them. */
.dir-icon-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; width: 64px; text-decoration: none; flex-shrink: 0; }
.dir-icon-tile-box { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--bg3); border: 1px solid var(--gold-dim); margin: 0 auto; }
.dir-icon-tile.selected .dir-icon-tile-box { background: var(--gold); border-color: var(--gold); }
.dir-icon-tile-label { font-size: 9.5px; color: var(--muted); text-align: center; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dir-icon-tile.selected .dir-icon-tile-label { color: var(--gold); font-weight: 600; }
.dir-icon-tile-box .icon-chip { width: 26px; height: 26px; border-radius: 6px; background: rgba(255,255,255,0.92); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; }
.dir-icon-tile-box .icon-chip svg { width: 18px; height: 18px; }
/* change256 - Albums quota progress bar, replacing the plain text badge */
.quota-bar-wrap { margin: 0 0 20px; }
/* change258-fix - period toggle buttons and tier-select-card, previously
   relying on inline styles that JS couldn't actually update (period-btn
   had no CSS at all) and a clipped Recommended badge (no top headroom on
   the row). Defined properly here instead. */
.period-btn { flex:1; text-align:center; padding:9px; border-radius:8px; border:1px solid var(--border); background:var(--bg2); color:var(--muted); font-size:12px; font-weight:600; cursor:pointer; }
.period-btn.active { border-color:var(--gold); background:var(--gold-dim); color:var(--gold-lt); }
.tier-select-row { display:flex; gap:8px; overflow-x:auto; margin-top:22px; padding:14px 2px 4px; }
.tier-select-card { flex:0 0 124px; background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:14px 8px; text-align:center; position:relative; cursor:pointer; }
.tier-select-card.recommended { background:var(--gold-dim); border-color:var(--gold); }
.tier-select-card.chosen { outline:2px solid var(--gold); }
.tier-select-badge { position:absolute; top:-9px; left:50%; transform:translateX(-50%); background:var(--gold); color:var(--color-on-accent); font-size:8px; font-weight:700; padding:2px 8px; border-radius:8px; text-transform:uppercase; white-space:nowrap; }
/* change257 - Albums hero, matching content-card dimensions/border exactly
   (full border + radius, same inset width) instead of the old full-bleed
   background+border-bottom strip look. */
.album-hero { padding: 16px; margin-bottom: 20px; background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; }
.quota-bar-track { position: relative; height: 26px; border-radius: 8px; background: var(--bg3); border: 1px solid var(--border); overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 0 8px; gap: 8px; }
.quota-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--gold-dim); }
.quota-bar-text { position: relative; z-index: 1; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--text); padding: 0 8px; text-align: center; }

/* ============================================
   change282 - desktop-only fixes. Every rule below is scoped inside
   min-width:900px so mobile's existing layout for these same shared
   classes is completely untouched.
   ============================================ */
@media (min-width: 900px) {
  /* Points 2 & 3 (part 1) - Clubs/Philatelists/Directory-hub top card.
     Was capped at a phone-width 480px on every screen with no desktop
     version. Per Dipen's direct correction: not a blown-up mobile card -
     one short single-row band instead. Icon shrinks to a small left
     accent, heading takes about half the width, stats sit compact on
     the right in the same line. Used by clubs.php, directory.php, and
     both tiles on directory_hub.php - all reuse these exact classes,
     so one change here covers all of them, nothing duplicated. */
  .dir-module-grid { max-width: 1040px; }
  .dir-module-card { display: flex; align-items: center; gap: 18px; padding: 14px 22px; }
  .dir-module-visual { width: 56px; height: 56px; flex-shrink: 0; border-radius: 10px; }
  .dir-module-visual .dir-mv-icon { font-size: 26px; }
  .dir-module-visual .dir-mv-deco { display: none; }
  .dir-module-body { flex: 1; display: flex; align-items: center; gap: 24px; padding: 0; min-width: 0; }
  .dir-module-heading { flex: 1 1 50%; min-width: 0; }
  .dir-module-heading p { display: none; }
  .dir-module-stats { flex: 0 0 auto; gap: 8px; margin: 0; max-width: 380px; }
  .dir-mstat { padding: 5px 10px; min-width: 64px; }
  .dir-mstat b { font-size: 13px; }
  /* directory_hub.php's two tiles also carry a Browse CTA line the plain
     clubs.php/directory.php header never had - hidden here only so the
     single-row band stays to the confirmed heading/stats split; the
     whole tile is still a real link either way. */
  .dir-module-cta { display: none; }

  /* Point 5 / item 10 (2026-09-20 batch) - old repeat(5,1fr)@900px and
     repeat(6,1fr)@1400px .members-grid rules removed, superseded by the
     auto-fill rule set at the 768px breakpoint above (see its comment). */
}

/* Point 4 - All Scans gallery only (identify/browse.php, .scan-grid wrapper
   added there). Image left, text right, on desktop - mobile keeps today's
   stacked layout exactly. Deliberately scoped to .scan-grid, NOT applied to
   the bare .member-avatar-col/.member-info-col classes, since those are
   also used by Albums, Members, Clubs and one Event card type - changing
   the bare classes would have silently changed all of those too. */
@media (min-width: 900px) {
  .scan-grid .perf-inner { flex-direction: row; align-items: center; gap: 14px; text-align: left; }
  .scan-grid .member-avatar-col { flex-shrink: 0; }
  .scan-grid .member-avatar { margin: 0; width: 64px; height: 64px; border-radius: 6px; }
  .scan-grid .member-info-col { flex: 1; min-width: 0; }
  .scan-grid .member-name { text-align: left; }
  .scan-grid .member-city { text-align: left; }
}

/* change285 - desktop-only batch: homepage strips, club profile's Featured
   Members strip, All Scans gallery columns, homepage map layout. Mobile
   untouched throughout - every rule below sits inside a min-width query. */
@media (min-width: 768px) {
  /* Homepage's 7 "Latest X" strips + club profile's Featured Members strip
     all share this one card class inside a horizontal-scroll strip - a
     card's width was never set explicitly, so it sized itself to its own
     content (name/city text), landing narrower than intended and showing
     fewer cards than the available desktop width could hold. One shared
     fix covers every strip that uses this pattern, not page by page. */
  .scroller > .member-card { flex: 0 0 200px; }

  /* All Scans gallery - was hardcoded to exactly 2 columns on any screen
     size. Desktop gets more columns, same idea as the Club/Philatelist
     Directory grids; mobile's 2-column layout is untouched (no rule
     applies below 768px).
     item 8 (2026-09-20 batch) root cause + fix: this used to be a fixed
     repeat(5, 1fr) / repeat(6, 1fr)@1400px based on VIEWPORT width, which
     never accounted for the legacy sidebar (item 37) eating ~510px off the
     actual content width on desktop - at a wide viewport it kept forcing 6
     columns into a much narrower .lg-main, squeezing every scan card so
     tight that the title/country/theme text truncated hard, reading as
     "less info than before" even though renderScanCard() itself never
     changed. Switched to the same auto-fill/minmax() technique .hub-grid
     already uses elsewhere in this file - the grid now sizes columns off
     its own real rendered width (sidebar or no sidebar, any theme),
     instead of guessing from the viewport. 200px matches the card width
     already established for this same card family (.scroller > .member-
     card). */
  .scan-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important; }
}

/* Homepage India/World map - on desktop, show both side by side instead of
   toggling one at a time; the toggle buttons only make sense on mobile at
   that point, since there's nothing left to switch on desktop. !important
   is required here because the toggle's own JS sets display:none/block
   directly on these elements' inline style - without it, opening the page
   with World hidden would keep it hidden even at desktop width. Uses a
   real wrapper div (.map-pair, added around the two map divs in index.php)
   rather than floats, so nothing needs a manual clearfix afterward. */
@media (min-width: 900px) {
  .map-toggle-tabs { display: none; }
  /* change287/288 - vertically centre the two maps against each other,
     keep India first (left) and World second (right) as originally, and
     pull each map toward the middle so they don't drift apart. The
     show/hide toggle logic is untouched and still governs mobile. */
  .map-pair { display: flex; gap: 24px; align-items: center; }
  .map-pair > div { min-width: 0; display: block !important; }
  /* Confirmed via the two real map images' own proportions: India's is a
     perfect square, World's is roughly 2.3x wider than tall. Equal 50/50
     width made India render much taller than World; this split makes both
     come out the same height instead. India stays FIRST (left), World
     SECOND (right) - their original order. */
  .map-pair > div:first-child { flex: 0 0 30%; }
  .map-pair > div:last-child { flex: 0 0 68%; }
  /* Each map has its own inner box with a fixed max-width and margin:0
     auto, which centres it inside its column and leaves a wide empty gap
     between the two maps. Overriding just the margins here pulls India to
     the right edge of its column and World to the left edge of its own,
     closing that middle gap - without touching either map's own size. */
  .map-pair > div:first-child .india-map-wrap { margin-left: auto; margin-right: 0; }
  .map-pair > div:last-child .world-map-wrap { margin-left: 0; margin-right: auto; }
  /* Both maps are shown side by side on desktop, so a heading that names
     only one of them ("Find Philatelist in India") no longer applies.
     Hidden rather than removed, because the scope-toggle script still
     updates the label inside it for mobile. */
  .find-heading { display: none; }
}

/* ============================================
   change283 - Phase 1 width fix, confirmed by mock: Directory Hub, Club
   Directory, Philatelist Directory ONLY. Nothing else touched - club
   profile, personal profile, Events, Community, homepage, everywhere else
   stays exactly as it is.

   Two new classes, used only on the three pages above:
   .pw-flush  - real, existing sections (.dir-head/.dir-body/.filter-bar)
                are shared with many other pages sitewide (Community,
                Albums, Events, Learn, etc.), so their own real padding is
                only zeroed where this class is explicitly added alongside
                them - never sitewide.
   .pw-container - the one shared width rule itself: a fixed percentage of
                the screen, same on any device, no fixed-pixel numbers, no
                breakpoints to maintain.
   ============================================ */
@media (min-width: 768px) {
  /* Desktop only - mobile keeps its current spacing exactly as it is,
     both here and for .pw-container/.dir-module-grid below. */
  .pw-flush { padding-left: 0 !important; padding-right: 0 !important; }
  .pw-container { width: 94%; margin: 0 auto; }
  .dir-module-grid { max-width: none; width: 94%; margin: 0 auto; padding-left: 0; padding-right: 0; }
  /* .dir-browse-box - confirmed used ONLY on directory_hub.php (the
     "Browse Philatelist by" / "Browse Club by" panels), missed in the
     first pass of this fix even though it's the same page - real gap,
     caught from a live screenshot, not from re-checking the file properly
     the first time. Same rule as everything else on this page now. */
  .dir-browse-box { max-width: none; width: 94%; margin-left: auto; margin-right: auto; }
}

/* change284 - shared left/right scroll-arrow design for horizontal strips,
   generalized from the real, existing design already used on the club
   profile page's office-bearers strip (.bearer-scroll-arrow) - same look,
   not a new invented one. Desktop only; mobile keeps swipe-only scrolling
   with no arrows shown, exactly as it is today. The matching auto-wiring
   JS lives in footer.php (initStripArrows/updateStripArrows) - one shared
   function for every page, not per-page click logic.
   change347 - item 35: this was originally set up to only show an arrow
   once a strip had enough items to overflow (both here via the 900px gate
   and in footer.php's JS via a real overflow check). Dipen confirmed on
   the live site that strips with plenty of extra content still weren't
   showing arrows, and asked for arrows to always be visible on desktop
   instead - so the overflow-based hiding is gone from both the CSS and
   the JS below. Two other, older, unconditional arrow controls left over
   from before this shared system existed (Famous Members' own pair in its
   heading, and the Philatelists/Clubs pair below their strips) are removed
   below too, so every homepage strip now uses this one consistent style
   instead of a 3-way mix. Mobile is untouched - still swipe-only. */
.strip-arrow-wrap { position: relative; }
.strip-arrow { display: none; }
@media (min-width: 900px) {
  .strip-arrow {
    display: flex; position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    /* item 4 (2026-09-20 batch) - Dipen's own description of what these
       should look like: "little transparent and bigger in height not
       width like professional sites do". Was a 32x32 circle; now a
       narrower, taller rounded pill with a translucent background instead
       of a solid one. */
    width: 24px; height: 44px; border-radius: 10px; border: 1px solid var(--gold-dim);
    background: color-mix(in srgb, var(--bg2) 78%, transparent); color: var(--gold); font-size: 16px; line-height: 1; cursor: pointer;
    align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  }
  /* item 38 - these strips run edge-to-edge on every page that uses them (no
     side gutter on the strip itself or on <body>), so the previous -14px
     offset (meant to sit just outside the strip) pushed the arrows mostly or
     fully off the visible page - matches Dipen's screenshot exactly. Moved
     to a small positive inset so the arrow always sits on top of the strip's
     own edge instead, staying on-screen no matter what padding (or lack of
     it) surrounds the strip on a given page - one shared rule, fixes all
     pages using this system at once. */
  .strip-arrow.left { left: 6px; }
  .strip-arrow.right { right: 6px; }
  .strip-arrow:hover { background: var(--gold); color: #0f0e0c; }
  /* item 4 (2026-09-20 batch) - that same 6px inset worked fine for wide
     card strips (.scroller etc.) where covering a sliver of a ~200px card
     edge barely registers, but on tighter rows (filter-icon pills, browse-
     strip flag pills) the arrow was landing almost fully on top of the
     first/last icon itself, matching Dipen's screenshot. .strip-arrow-
     target is the one shared class already present on every strip site-
     wide (see footer.php's updateStripArrows()), so reserving room for the
     arrow here fixes every strip in one place rather than special-casing
     individual pages - directory/club filter rows get real breathing room
     now, and wide card strips just get a little extra edge padding, which
     doesn't hurt them. */
  .strip-arrow-target { padding-left: 34px; padding-right: 34px; scroll-padding-left: 34px; scroll-padding-right: 34px; }
}

/* change294 - club-site relationship notice, shown at the top of the legal
   pages and in the footer on a club's own web address only. Uses the real
   theme variables throughout, so it holds up in all four themes - the
   background is theme-reactive and the text colour is paired to it, never
   a fixed colour against a variable background. */
.club-site-notice {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
  padding: 16px 18px;
  margin: 0 0 28px;
}
.club-site-notice h4 {
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 8px;
}
.club-site-notice p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
  margin: 0 0 8px;
}
.club-site-notice p:last-child { margin-bottom: 0; }

/* change304 - explanation block on the data deletion page, setting out what
   deletion actually does. Real theme variables throughout so it holds up in
   all four themes - the background is theme-reactive and the text colours are
   paired to it, never a fixed colour against a variable background. */
.dd-explain {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 24px;
}
.dd-explain h3 { font-size: 14px; color: var(--gold); margin: 18px 0 6px; }
.dd-explain h3:first-child { margin-top: 0; }
.dd-explain p, .dd-explain li { font-size: 13px; color: var(--muted); line-height: 1.8; margin-bottom: 6px; }
.dd-explain ul { padding-left: 20px; margin-bottom: 10px; }
.dd-explain strong { color: var(--text); }

/* change311 - reusable account management cards and panel utilities. */
.account-alert { background:rgba(217,167,90,.12); border:1px solid var(--gold-dim); border-radius:6px; padding:10px 12px; margin-bottom:12px; }
.account-alert-title { font-size:11px; color:var(--gold); text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px; }
.account-alert-link { display:block; font-size:12.5px; color:var(--text); text-decoration:underline; padding:2px 0; }
.account-panel-hidden { display:none; }
/* change351 - My Account's Clubs/Exhibitions/Quizzes/etc. sub-lists (each
   an .accordion-section .v2-tabpanel) were never showing on legacy themes:
   an old, unrelated rule further down (".v2-tabpanel { display:none }",
   written for manage_members.php's own separate mm-active tab system)
   was hiding every one of them regardless of .account-panel-hidden state,
   since My Account's own script only ever toggles .account-panel-hidden,
   never adds manage_members.php's .mm-active marker. Community theme
   already has its own equivalent override (community.css); this brings
   legacy in line, scoped to .accordion-section only so it can never touch
   manage_members.php's real v2-tabpanel/mm-active system (that page has
   no .accordion-section on the page at all). */
.accordion-section .v2-tabpanel { display: block; }
.accordion-section .account-panel-hidden { display: none !important; }
.account-club-card { margin-bottom:10px; position:relative; }
.account-club-ribbon { background:var(--gold); top:0; left:auto; right:-6px; clip-path:polygon(100% 0,100% 100%,6px 100%,0 70%,0 0); }
.account-club-layout { display:flex; gap:12px; }
.account-club-media { display:flex; flex-direction:column; align-items:center; gap:5px; flex-shrink:0; }
.account-club-main { flex:1; min-width:0; }
.account-card-link { text-decoration:none; }
.account-card-logo { width:100%; height:100%; object-fit:cover; }
.account-card-initials { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--gold); font-family:var(--font-head); font-size:16px; }
.account-config-link { font-size:9.5px; padding:3px 9px; text-decoration:none; white-space:nowrap; }
/* change351 - My Clubs card redesign, mock-approved: Config/Branded moved
   below the club name/status line (was beside it) and restyled from a
   full button box to a thin ribbon tag with a settings icon (replaces
   the old "(Change)" text on Branded). Uses the theme's own accent colour
   automatically via var(--gold)/var(--gold-dim), so it needs no separate
   per-theme override across classic/whatsapp/light/instagram. */
.account-settings-row { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.account-settings-ribbon { display:inline-flex; align-items:center; gap:4px; font-size:9.5px; font-weight:600; letter-spacing:0.02em; color:var(--gold); background:var(--gold-dim); padding:3px 9px 3px 7px; text-decoration:none; white-space:nowrap; clip-path:polygon(8px 0,100% 0,100% 100%,8px 100%,0 50%); }
.account-settings-ribbon svg { width:10px; height:10px; flex-shrink:0; }
/* change351 - the 3 link rows under each club card (Members/Featured/
   Activity, Bearers/Co-Admins/Transfer/Payments, Events/Awards/Publish/
   Approval) each carried their own top border/gap, stacking into 3 heavy
   dividers instead of reading as one consistent group - only the first
   row keeps the divider now. */
.club-card-links + .club-card-links { border-top:none; padding-top:0; }
/* change352_fix1 - full-screen "please wait" cover for any data-ai-lock form
   sitewide (Album's page upload / Run AI Now / Try Again today), matching
   AI Stamp Identify's own overlay behaviour (identify/identify.css
   .identify-overlay) but under its own class name here so this works on
   any page without depending on that page-specific stylesheet. Created
   dynamically by the shared script in footer.php - no markup needed on any
   individual page.
   Colours are fixed literals, not theme variables, on purpose: this
   overlay's background is always dark regardless of which theme is
   active (same as Identify's own version), but --gold-lt/--white are
   tuned per-theme for use against each theme's own LIGHT card
   backgrounds elsewhere on the site (on the light/blue and instagram/
   orange themes they're now a darker shade for that reason, since
   change351) - using them here on an always-dark overlay would make the
   text hard to read on exactly those 2 themes. A fixed light colour reads
   correctly against this overlay in every theme, with no exceptions. */
.ai-wait-overlay { display:none; position:fixed; inset:0; z-index:500; background:rgba(15,14,12,0.94); flex-direction:column; align-items:center; justify-content:center; gap:18px; text-align:center; padding:20px; }
.ai-wait-overlay.active { display:flex; }
.ai-wait-spinner { width:44px; height:44px; border:3px solid rgba(245,240,232,0.25); border-top-color:#e2c97e; border-radius:50%; animation:ai-wait-spin 0.9s linear infinite; }
@keyframes ai-wait-spin { to { transform:rotate(360deg); } }
.ai-wait-text { color:#f0ece0; font-size:14px; max-width:260px; }
/* change353 - rotating-message behaviour (matches Identify's own overlay):
   an up-front "this can take 1-2 minutes" line, the changing progress
   message (.ai-wait-text above), a standing "don't refresh" warning, and a
   "Check progress" button that only appears if it runs far longer than
   expected. Same fixed-colour reasoning as the block above. */
.ai-wait-intro { color:#e2c97e; font-size:13px; font-weight:600; max-width:280px; }
.ai-wait-intro:empty { display:none; }
.ai-wait-note { color:rgba(240,236,224,0.72); font-size:12px; max-width:280px; }
.ai-wait-action { display:none; margin-top:4px; padding:10px 22px; border:0; border-radius:8px; background:#e2c97e; color:#0f0e0c; font-size:13px; font-weight:700; cursor:pointer; }
.ai-wait-action.show { display:inline-block; }
.account-primary-block { display:block; text-align:center; text-decoration:none; margin-top:6px; }
.account-mini-card { margin-bottom:8px; }
.account-item-stack { display:flex; flex-direction:column; margin-bottom:8px; }
.account-item-note { font-size:10px; color:var(--muted); text-align:center; padding:2px 0; }
.account-item-actions { display:flex; gap:14px; justify-content:center; margin-top:2px; }
.account-action-link { font-size:10px; color:var(--gold); text-align:center; padding:4px 0; text-decoration:underline; }
.account-action-muted { font-size:10px; color:var(--muted); text-align:center; padding:4px 0; text-decoration:underline; }
button.account-action-muted { background:none; border:0; cursor:pointer; width:100%; }
.account-inline-form { display:inline; }
.account-clear { clear:both; }
.account-filter-wrap { float:right; margin-bottom:8px; }
.account-panel-summary { font-size:11px; color:var(--muted); margin-bottom:8px; }
.account-award-action { margin-top:4px; }
.account-award-link { color:var(--gold); text-decoration:underline; cursor:pointer; font-size:11px; }

/* change312 - remaining My Account module layouts. */
.account-tabs-2 { grid-template-columns:repeat(2,1fr); }
.account-tabs-3 { grid-template-columns:repeat(3,1fr); }
.account-module-hint { font-size:11px; color:var(--muted); margin:-6px 0 10px; }
.account-module-linked { font-size:11px; color:var(--muted); margin-top:4px; }
.account-card-row { margin-bottom:10px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.account-card-block { margin-bottom:10px; display:block; text-decoration:none; }
.account-module-title { color:var(--white); font-size:13px; }
.account-module-meta { font-size:10.5px; color:var(--muted); }
.account-community-label { color:var(--gold); font-size:10px; }
.account-search-wrap { margin-bottom:10px; }
.account-network-empty { display:none; }
.account-network-pager { display:flex; justify-content:center; align-items:center; gap:14px; margin-top:14px; font-size:12px; color:var(--muted); }
.account-logout { display:block; text-align:center; text-decoration:none; margin-top:20px; color:var(--color-danger); border-color:var(--color-danger); }
.account-card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.account-card-static { cursor:default; }
.account-badge-spaced { margin-left:6px; }
.account-network-direction { width:22px; height:22px; border-radius:50%; font-size:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.account-network-icon { font-size:16px; flex-shrink:0; }
.account-pager-link { color:var(--gold); cursor:pointer; }
.account-form-centred { text-align:center; }

/* change313 - consistent typography for club/account management pages. */
.mini-card-grid { display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.mini-card { display:flex; align-items:center; gap:12px; padding:10px; background:var(--bg3); border:1px solid var(--border); border-radius:4px; text-decoration:none; position:relative; }
.mini-card-avatar { width:40px; height:40px; border-radius:50%; overflow:hidden; background:var(--bg2); flex-shrink:0; border:1px solid var(--border); }
.mini-card-info { min-width:0; flex:1; }
.mini-card-name { font-size:13px; color:var(--white); }
.mini-card-sub { font-size:11px; color:var(--muted); }
.macct-rich-card { align-items:flex-start; padding-bottom:32px; }
.macct-rich-card .mini-card-avatar { align-self:flex-start; height:40px; max-height:40px; }
.macct-card-title-row { display:flex; align-items:center; gap:6px; }
.macct-status-badge { display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px; border-radius:4px; font-size:9.5px; font-weight:700; flex-shrink:0; }
.macct-status-badge.draft { background:#d9a75a; color:var(--bg); }
.macct-status-badge.published { background:var(--gold); color:var(--bg); }
.macct-overlay-badge { position:absolute; bottom:8px; right:10px; font-size:9px; font-weight:600; padding:3px 8px; border-radius:10px; white-space:nowrap; }
.macct-overlay-badge.open { background:rgba(120,180,120,.18); color:#7bc47f; }
.macct-overlay-badge.closing-soon { background:rgba(217,115,108,.18); color:#d9736c; }
.macct-overlay-badge.closed,.macct-overlay-badge.published-badge { background:rgba(134,150,160,.18); color:var(--muted); }
.macct-club-ribbon { position:absolute; bottom:8px; left:10px; max-width:50%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:3px 10px; border-radius:10px; background:var(--gold-dim); color:var(--gold); font-size:9.5px; font-weight:700; }
.macct-date-row { margin-top:3px; color:var(--muted); font-size:10px; line-height:1.5; }
.v2-tab-grid { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:16px; }
.v2-tab { display:flex; flex-direction:column; align-items:center; gap:5px; width:58px; cursor:pointer; }
.v2-tab-icon { display:flex; align-items:center; justify-content:center; width:28px; height:28px; border:1px solid var(--gold-dim); border-radius:8px; background:var(--bg3); color:var(--gold); }
.v2-tab-icon svg { width:15px; height:15px; }
.v2-tab.active .v2-tab-icon { border-color:var(--gold); background:var(--gold); color:var(--bg); }
.v2-tab-label { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:9.5px; line-height:1.3; text-align:center; }
.v2-tab.active .v2-tab-label { color:var(--gold); font-weight:600; }
.acc-icon { display:flex; align-items:center; justify-content:center; width:34px; height:34px; margin-right:10px; border-radius:8px; background:var(--gold-dim); flex-shrink:0; }
.acc-icon svg { width:17px; height:17px; stroke:var(--gold); }
.acct-empty { padding:10px 0; color:var(--muted); font-size:12px; }
.quiz-score-pill { position:absolute; top:8px; right:10px; padding:3px 9px; border-radius:10px; font-size:10px; font-weight:700; }
.quiz-score-pill.pass { background:rgba(37,211,102,.18); color:var(--gold); }
.quiz-score-pill.review { background:rgba(217,167,90,.18); color:#d9a75a; }
.club-card-v2 { display:flex; flex-direction:column; gap:10px; padding:10px; border:1px solid var(--border); border-radius:4px; background:var(--bg3); }
.club-card-links { display:flex; flex-wrap:wrap; gap:6px 8px; padding-top:8px; border-top:1px solid var(--border); }
.club-card-links a { color:var(--gold); font-size:11px; text-decoration:none; white-space:nowrap; }
.pending-badge { padding:1px 7px; border:1px solid var(--gold-dim); border-radius:10px; color:var(--gold); font-size:9px; text-transform:uppercase; letter-spacing:.03em; }
.pending-badge.badge-blocked { color:var(--color-danger); border-color:var(--color-danger); }
.pending-badge.badge-sentback { color:var(--gold); border-color:var(--gold); }
.pending-badge.badge-pending { color:var(--muted); border-color:var(--border); }
.acct-stat-row { display:flex; gap:24px; margin:6px 0 16px; }
.network-pills { display:flex; gap:6px; overflow-x:auto; padding-bottom:8px; margin-bottom:10px; }
.network-pill { flex-shrink:0; padding:6px 12px; border:1px solid var(--border); border-radius:14px; color:var(--muted); font-size:11px; cursor:pointer; white-space:nowrap; }
.network-pill.active { border-color:var(--gold); background:var(--gold); color:var(--bg); font-weight:600; }
.acct-stat { text-align:center; }
.acct-stat .num { color:var(--gold); font-family:var(--font-head); font-size:22px; }
.acct-stat .lbl { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.05em; }
.club-status-pill { margin-left:8px; padding:2px 8px; border-radius:10px; font-size:10px; }
.club-status-pill.approved { background:rgba(127,217,154,.15); color:var(--color-success); }
.club-status-pill.pending { background:rgba(230,180,90,.15); color:var(--gold); }
.club-status-pill.sentback { background:rgba(217,108,108,.15); color:var(--color-danger); }
.myev-subhead-row { display:flex; align-items:center; justify-content:space-between; }
.myev-filter-wrap { position:relative; }
.myev-filter-btn { display:flex; align-items:center; justify-content:center; width:30px; height:30px; border:1px solid var(--border); border-radius:8px; background:var(--bg2); color:var(--muted); cursor:pointer; }
.myev-filter-btn svg { width:14px; height:14px; }
.myev-filter-menu { display:none; position:absolute; right:0; top:34px; z-index:20; min-width:100px; padding:4px; border:1px solid var(--border); border-radius:8px; background:var(--bg2); }
.myev-filter-menu.myev-open { display:block; }
.myev-filter-menu a { display:block; padding:6px 10px; border-radius:6px; color:var(--text); font-size:12px; text-decoration:none; }
.myev-filter-menu a:hover { background:var(--bg3); }
.myev-filter-menu a.active { color:var(--gold); font-weight:600; }
.myev-dates { color:var(--muted); font-size:10.5px; }
.myev-pagination { display:flex; align-items:center; justify-content:center; gap:14px; margin:8px 0 4px; color:var(--muted); font-size:12px; }
.myev-pagination a { color:var(--gold); text-decoration:none; }
.account-chip-link { text-decoration:none; }
.account-approval-alert { color:var(--color-danger)!important; }
.account-expired-note { color:var(--color-danger)!important; }
.account-pending-summary { color:var(--gold)!important; }
.account-network-direction.like { background:var(--color-danger); color:#fff; }
.account-network-direction.follow { background:var(--gold); color:var(--bg); }
.account-network-direction.view { background:transparent; color:var(--muted); }

/* Legacy Awards/Publications presentation, centralized after inline cleanup. */
.legacy-content-search { margin-bottom:14px; }
.legacy-content-restricted { padding:24px; border:1px solid var(--border); border-radius:4px; background:var(--bg2); color:var(--muted); font-size:13px; text-align:center; }
.legacy-content-type { color:var(--gold); font-size:11px; text-transform:uppercase; letter-spacing:.06em; }
.legacy-content-detail-title { margin:6px 0 10px; color:var(--white); font-size:24px; }
.legacy-content-meta { color:var(--muted); font-size:12px; line-height:1.8; }
.legacy-content-description { margin-bottom:18px; color:var(--text); font-size:14px; line-height:1.8; }
.legacy-content-file,.legacy-content-tags { margin-bottom:18px; }
.legacy-content-tags { color:var(--muted); font-size:11px; }
.legacy-inline-action { display:inline-block; text-decoration:none; }
.legacy-block-action { display:block; margin-top:14px; text-align:center; text-decoration:none; }
.content-draft-banner { border-color:var(--gold)!important; background:rgba(230,180,90,.12)!important; color:var(--gold)!important; }
.form-message-spaced { margin-bottom:16px; }
.draft-status-message { margin-bottom:16px; border-color:var(--gold); background:rgba(230,180,90,.12); color:var(--gold); }
.legacy-tier-option { display:flex; align-items:center; gap:8px; margin:8px 0; color:var(--text); font-size:13px; }
.legacy-current-file { display:block; margin-bottom:6px; color:var(--gold); font-size:12px; }
.legacy-current-cover { display:block; width:70px; margin-bottom:8px; border-radius:4px; }
.legacy-switch-row { display:flex; align-items:center; gap:8px; }
.legacy-switch-label { margin:0; font-size:13px; }
.legacy-submit-spaced { margin-top:8px; }
.legacy-publication-title { font-size:28px; }
.legacy-publication-form { max-width:640px; }
.legacy-publication-detail { max-width:680px; }
.pub-card { display:flex; gap:12px; padding:12px; margin-bottom:10px; border:1px solid var(--border); border-radius:4px; background:var(--bg3); text-decoration:none; }
.pub-cover { width:56px; height:72px; object-fit:cover; border-radius:var(--radius-btn); flex-shrink:0; background:var(--bg2); }
.pub-cover-placeholder { display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:20px; }
.pub-card .pub-type { color:var(--gold); font-size:10px; text-transform:uppercase; letter-spacing:.05em; }
.pub-card .pub-title { margin:2px 0; color:var(--white); font-family:var(--font-head); font-size:15px; }
.pub-card .pub-meta { color:var(--muted); font-size:11px; }
.type-filter-row { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.type-filter-row a { padding:5px 12px; border:1px solid var(--border); border-radius:14px; color:var(--muted); font-size:11px; text-decoration:none; }
.type-filter-row a.active { border-color:var(--gold); color:var(--gold); }
.pub-toggle-group { display:flex; gap:8px; margin-top:6px; }
.pub-toggle-opt { flex:1; padding:10px 8px; border:1px solid var(--border); border-radius:var(--radius-btn); color:var(--muted); font-size:13px; text-align:center; cursor:pointer; }
.pub-toggle-opt.active { border-color:var(--gold); background:var(--gold-dim); color:var(--gold); }
.pub-disabled-banner,.award-disabled-banner { padding:12px; margin-bottom:16px; border:1px solid var(--color-danger); border-radius:4px; background:rgba(217,108,108,.12); color:var(--color-danger); font-size:12px; }
.legacy-publication-identity { display:flex; align-items:flex-start; flex-wrap:wrap; gap:20px; margin:14px 0 22px; }
.legacy-publication-cover { width:130px; border-radius:6px; flex-shrink:0; }
.legacy-publication-identity-copy { min-width:200px; flex:1; }
.legacy-publication-frame { width:100%; height:480px; margin-bottom:10px; border:1px solid var(--border); border-radius:6px; }
.legacy-awards-title { font-size:28px; }
.legacy-award-form { max-width:640px; }
.legacy-readonly-control { background:var(--bg3); color:var(--muted); }
.legacy-picker-trigger { width:100%; justify-content:space-between; }
.legacy-other-input { margin-top:8px; }
.award-card { display:flex; align-items:flex-start; gap:14px; padding:14px; margin-bottom:10px; border:1px solid var(--border); border-radius:4px; background:var(--bg3); text-decoration:none; }
.award-left { display:flex; flex-direction:column; align-items:center; gap:4px; width:64px; flex-shrink:0; }
.award-photo { width:56px; height:56px; border:1px solid var(--gold-dim); border-radius:50%; background:var(--bg2); object-fit:cover; flex-shrink:0; }
.award-photo-fallback { display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:20px; }
.award-left-name { color:var(--text); font-size:11px; line-height:1.25; text-align:center; }
.award-left-date { color:var(--muted); font-size:10px; text-align:center; }
.award-right { min-width:0; flex:1; }
.award-self-badge { padding:1px 6px; border-radius:var(--radius-btn); background:var(--gold-dim); color:var(--gold); font-size:9px; }
.award-card .award-title { margin:4px 0 2px; color:var(--white); font-family:var(--font-head); font-size:17px; line-height:1.25; }
.award-card .award-cat { color:var(--white); font-family:var(--font-head); font-size:15px; }
.award-awarded-by { margin-top:6px; color:var(--muted); font-size:11px; }
.legacy-award-identity { display:flex; align-items:center; flex-wrap:wrap; gap:20px; margin:14px 0 22px; }
.legacy-award-identity-copy { min-width:200px; flex:1; }
.legacy-award-detail-title { margin-bottom:8px; }
.legacy-award-recipient { color:var(--text); font-size:14px; }
.legacy-award-meta { margin-top:4px; color:var(--muted); font-size:12px; }
.legacy-award-event { color:var(--gold); font-size:12px; }
.legacy-award-edit { margin-top:24px; }
.award-photo-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:14px 0; }
.award-photo-grid img { width:100%; border-radius:4px; aspect-ratio:1; object-fit:cover; }
.award-doc-list a { display:block; margin-bottom:6px; color:var(--gold); font-size:13px; }
.recip-results { display:none; max-height:200px; overflow-y:auto; margin-top:4px; border:1px solid var(--border); border-radius:4px; background:var(--bg3); }
.recip-results div { padding:8px 12px; border-bottom:1px solid var(--border); font-size:13px; cursor:pointer; }
.recip-results div:hover { background:var(--bg2); }
.recip-selected { display:none; align-items:center; gap:8px; padding:8px 12px; margin-top:6px; border:1px solid var(--gold-dim); border-radius:4px; background:var(--bg3); font-size:13px; }
.recip-selected button { margin-left:auto; border:0; background:none; color:var(--color-danger); font-size:12px; cursor:pointer; }
.recipient-current { display:flex; align-items:center; gap:8px; padding:8px 12px; margin-bottom:8px; border:1px solid var(--gold-dim); border-radius:4px; background:var(--bg3); font-size:13px; }
.recipient-change-btn { margin-left:auto; border:0; background:none; color:var(--gold); cursor:pointer; }
.recipient-check-btn { margin-top:8px; padding:8px 18px; font-size:13px; }
.recipient-note { padding:10px; margin-top:10px; border:1px solid var(--gold-dim); border-radius:4px; background:var(--bg2); color:var(--gold); font-size:12px; }
.recipient-note-error { color:var(--color-danger); }
.recipient-new-name { margin-top:10px; }
.recipient-location-wrap { margin-top:12px; }
.recipient-current.component-hidden,.recipient-check-area.component-hidden,.recipient-note.component-hidden,.recipient-new-name.component-hidden,.award-rest-of-form.component-hidden,.legacy-other-input.component-hidden,.phone-dropdown.component-hidden { display:none; }
.fselect-trigger { width:100%; justify-content:space-between; }
.fselect-group-label { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.05em; pointer-events:none; }
.fselect-group-option { padding-left:28px; }
.phone-number-input { flex:1; }
.location-pincode-status { display:block; margin-top:6px; color:var(--muted); font-size:11px; }
.location-resolved-copy { margin:6px 0 12px; color:var(--muted); font-size:12px; }
.location-resolved-value { color:var(--text); }

.management-page-head { text-align:center; margin-bottom:20px; }
.management-page-title { font-family:var(--font-head); font-size:clamp(22px,3vw,26px); font-weight:600; color:var(--white); line-height:1.2; }
.management-page-subtitle { font-size:13px; color:var(--muted); text-align:center; margin-bottom:20px; }
.management-page-head .management-page-subtitle { margin:4px 0 0; }
.management-primary-action { display:block; text-align:center; text-decoration:none; margin-bottom:18px; }
.management-empty { font-size:13px; color:var(--muted); text-align:center; padding:30px 0; }
.management-back-link { display:block; text-align:center; margin-top:20px; font-size:12px; color:var(--muted); }
.management-table-scroll { overflow-x:auto; }
.management-table { font-family:var(--font-body); }
.management-table th { font-family:var(--font-body); font-weight:600; letter-spacing:.035em; }
.management-table td { font-family:var(--font-body); font-size:12px; line-height:1.55; }
.management-muted { color:var(--muted); }
.management-accent-link { color:var(--gold); }
.bearer-card-main { flex:1; min-width:0; }
.bearer-initials { display:flex; align-items:center; justify-content:center; color:var(--gold); font-family:var(--font-head); font-size:18px; }
.bearer-name-link { color:inherit; text-decoration:none; }
.bearer-edit-link { font-size:11px; color:var(--gold); }
/* Change 324 Revision Q — keep news imagery proportional in every legacy theme. */
.legacy-news-card{display:flow-root!important}
.legacy-news-thumb{float:left;width:170px;height:125px;aspect-ratio:auto!important;margin:-4px 16px 10px -4px!important}
.legacy-news-detail-image{width:min(100%,680px);margin-left:auto!important;margin-right:auto!important}
@media(max-width:600px){.legacy-news-thumb{float:none;width:100%;height:180px;margin:-4px -4px 12px!important}.legacy-news-detail-image{width:100%}}

/* Z45 centralized legacy account-layout declarations (deduplicated from page markup). */
.cm-conditional-block{display:none}.cm-conditional-block.is-visible{display:block}.cm-spaced-block{margin-top:24px}.cm-centred-link{text-align:center;text-decoration:none}
.legacy-account-layout-001{display:flex; align-items:flex-start; gap:8px;}
.legacy-account-layout-002{margin-top:1px;}
.legacy-account-layout-003{cursor:default;}
.legacy-account-layout-004{display:block;}
.legacy-account-layout-005{display:flex; gap:12px; flex-wrap:wrap;}
.legacy-account-layout-006{flex:1; min-width:140px;}
.legacy-account-layout-007{background:rgba(100,200,120,0.12); color:var(--color-success); display:inline-flex; align-items:center; gap:8px;}
.legacy-account-layout-008{text-decoration:none; padding:8px 16px; font-size:12px;}
.legacy-account-layout-009{max-width:380px;}
.legacy-account-layout-010{margin-top:14px;}
.legacy-account-layout-011{margin-top:20px;}
.legacy-account-layout-012{padding:8px 18px;}
.legacy-account-layout-013{cursor:pointer;}
.legacy-account-layout-014{margin-left:10px;}
.legacy-account-layout-015{display:inline-block; width:auto; padding:10px 16px;}
.legacy-account-layout-016{width:fit-content;}
.legacy-account-layout-017{background:var(--bg3); border:1px solid var(--border); padding:12px; border-radius:var(--radius-btn); margin-bottom:8px;}
.legacy-account-layout-018{margin-top:24px; display:block;}
.legacy-account-layout-019{width:fit-content; margin-bottom:16px;}
.legacy-account-layout-020{justify-content:flex-end;}
.legacy-account-layout-021{margin-top:10px;}
.legacy-account-layout-022{margin-bottom:8px; display:flex; gap:12px;}
.legacy-account-layout-023{width:0%;}
.legacy-account-layout-024{margin:0; font-size:12px; color:var(--text);}
.legacy-account-layout-025{color:var(--gold);}
.legacy-account-layout-026{background:var(--bg2); min-height:180px; border-radius: 0 0 var(--radius-btn) var(--radius-btn);}
.legacy-account-layout-027{display:none;}
.legacy-account-layout-028{display:none; margin-bottom:14px; padding:10px 12px; background:rgba(230,180,90,0.1); border:1px solid var(--gold-dim); border-radius:4px;}
.legacy-account-layout-029{display:flex; gap:8px; align-items:flex-start; font-size:12px; color:var(--text); cursor:pointer;}
.legacy-account-layout-030{font-size:11px; color:var(--muted); display:block; margin-top:6px;}
.legacy-account-layout-031{font-size:12px; color:var(--muted); margin:6px 0 12px;}
.legacy-account-layout-032{color:var(--text);}
.legacy-account-layout-033{font-family:var(--font-body); resize:vertical;}
.legacy-account-layout-034{margin-top:14px; padding-top:14px; border-top:1px solid var(--border);}
.legacy-account-layout-035{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:10px;}
.legacy-account-layout-036{display:flex; gap:10px; flex-wrap:wrap;}
.legacy-account-layout-037{color:var(--gold); text-decoration:underline; font-size:11px;}
.legacy-account-layout-038{font-size:12px; color:var(--color-danger); margin-top:10px;}
.legacy-account-layout-039{font-size:12px; color:var(--color-success); margin-top:10px;}
.legacy-account-layout-040{padding:20px;}
.legacy-account-layout-041{color:var(--color-danger); font-size:12px; margin-top:8px; display:none;}
.legacy-account-layout-042{width:14px;height:14px;vertical-align:-2px;margin-right:4px;color:var(--gold);}
.legacy-account-layout-043{margin-top:10px; display:flex; flex-wrap:wrap; gap:6px;}
.legacy-account-layout-044{display:inline-block; width:auto; max-width:280px;}
.legacy-account-layout-045{font-size:10px; color:var(--muted); margin-top:6px;}
.legacy-account-layout-046{margin-bottom:8px;}
.legacy-account-layout-047{font-size:12px; color:var(--muted); display:flex; align-items:center; gap:6px;}
.legacy-account-layout-048{font-size:11px; color:var(--muted); margin-bottom:8px;}
.legacy-account-layout-049{font-size:12px; color:var(--muted); margin-bottom:12px;}
.legacy-account-layout-050{font-size:12px; color:var(--muted); margin-bottom:14px;}
.legacy-account-layout-051{font-size:11px; color:var(--muted); margin-top:14px; margin-bottom:6px;}
.legacy-account-layout-052{margin-top:8px;}
.legacy-account-layout-053{flex:1;}
.legacy-account-layout-054{max-width:680px; margin:0 auto; padding:40px 20px 80px; text-align:center;}
.legacy-account-layout-055{font-size:11px; padding:4px 11px;}
.legacy-account-layout-056{text-decoration:none;}
.legacy-account-layout-057{text-decoration:none; margin-left:8px;}
.legacy-account-layout-058{background:color-mix(in srgb, var(--gold) 55%, var(--bg) 45%); border-radius:8px; padding:6px; max-width:560px; margin:0 auto 28px; position:relative;}
.legacy-account-layout-059{font-size:30px; color:var(--white); margin-bottom:8px;}
.legacy-account-layout-060{font-size:13px; color:var(--muted); margin-bottom:28px;}
.legacy-account-layout-061{background:var(--bg2); border-radius:6px; padding:30px; text-align:left;}
.legacy-account-layout-062{display:flex; gap:22px; align-items:flex-start;}
.legacy-account-layout-063{width:110px; height:110px; border:3px solid var(--gold); border-radius:6px; overflow:hidden; flex-shrink:0; background:var(--bg3);}
.legacy-account-layout-064{width:100%;height:100%;object-fit:cover;}
.legacy-account-layout-065{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--gold);font-family:var(--font-head);font-size:32px;}
.legacy-account-layout-066{font-family:var(--font-head); font-size:30px; color:var(--white); line-height:1.15;}
.legacy-account-layout-067{color:var(--gold); font-style:italic; font-size:18px; margin-top:2px;}
.legacy-account-layout-068{font-size:14px; color:var(--muted); margin-top:10px;}
.legacy-account-layout-069{font-size:14px; color:var(--muted); margin-top:4px;}
.legacy-account-layout-070{font-size:13px; color:var(--muted); margin-top:8px;}
.legacy-account-layout-071{font-size:13px; color:var(--muted); margin-top:2px;}
.legacy-account-layout-072{flex-shrink:0;}
.legacy-account-layout-073{border:2px solid var(--border); border-radius:4px;}
.legacy-account-layout-074{margin-top:18px; display:flex; flex-wrap:wrap; gap:7px;}
.legacy-account-layout-075{margin-top:22px; padding-top:16px; border-top:1px solid var(--border); font-size:14px; color:var(--gold); letter-spacing:0.04em; font-weight:500;}
.legacy-account-layout-076{font-size:20px;}
.legacy-account-layout-077{flex:1; padding:9px; font-size:11px;}
.legacy-account-layout-078{width:100%; padding:9px; font-size:11px;}
.legacy-account-layout-079{font-size:16px; color:var(--white); font-weight:700; margin-top:8px;}
.legacy-account-layout-080{flex:1 1 30%; min-width:0; text-align:center; padding:10px 4px; font-size:11px;}
.legacy-account-layout-081{width:100%; display:block; text-align:center; padding:10px 4px; font-size:11px;}
.legacy-account-layout-082{display:block; width:100%; text-align:center; padding:10px 4px; font-size:11px;}
.legacy-account-layout-083{margin-top:14px; padding:10px 24px;}
.legacy-account-layout-084{font-size:12.5px; color:var(--muted);}
.legacy-account-layout-085{font-family:var(--font-head); font-size:14px; color:var(--white); font-weight:700; margin-top:6px;}
.legacy-account-layout-086{font-size:11px; color:var(--gold-lt); margin-top:4px;}
.legacy-account-layout-087{font-size:10px; color:var(--muted); font-weight:400;}
.legacy-account-layout-088{width:100%; background:var(--bg3); border:1px solid var(--border); border-radius:8px; color:var(--text); padding:9px 10px; font-size:13px; box-sizing:border-box;}
.legacy-account-layout-089{margin-top:16px; font-size:12.5px;}
.legacy-account-layout-090{color:var(--muted);}
.legacy-account-layout-091{flex:1 1 30%; min-width:0;}
.legacy-account-layout-092{width:100%; margin-bottom:8px; padding:8px; border-radius:6px; border:1px solid var(--border); background:var(--bg); color:var(--text);}
.legacy-account-layout-093{width:100%; margin-bottom:8px;}
.legacy-account-layout-094{background:var(--bg2); border:1px solid var(--border); border-radius:8px; padding:10px 12px; margin-bottom:6px; font-size:12px;}
.legacy-account-layout-095{display:flex; justify-content:space-between;}
.legacy-account-layout-096{font-size:10.5px; color:var(--muted);}
.legacy-account-layout-097{background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:24px; max-width:320px; text-align:center;}
.legacy-account-layout-098{font-size:13px; color:var(--text);}
.legacy-account-layout-099{display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--border);}
.legacy-account-layout-100{display:flex; justify-content:space-between; padding-top:10px; font-weight:700; color:var(--white); font-size:14px;}

/* Club subscription: structure shared by every theme. */
.cp-wrap{box-sizing:border-box;max-width:760px;margin:0 auto;padding:16px}.cp-plan-badge{text-align:center;background:var(--bg2,var(--bg3));border:1px solid var(--gold);border-radius:10px;padding:16px;margin-bottom:20px}.cp-plan-badge .lbl{font-size:10px;color:var(--muted);text-transform:uppercase}.cp-plan-badge .name{font-size:20px;font-weight:700;color:var(--gold);margin-top:4px}.cp-icon-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.cp-icon-tile{display:block;padding:16px 8px;border:1px solid var(--border);border-radius:10px;background:var(--bg2,var(--bg3));text-align:center;text-decoration:none}.cp-icon-tile svg{width:22px;height:22px;margin-bottom:6px;stroke:var(--gold)}.cp-icon-tile .lbl{font-size:11px;font-weight:600;color:var(--text,#fff)}
.cp-pkg-icon-row{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:16px}.cp-pkg-tile{position:relative;padding:18px 10px;border:1px solid var(--border);border-radius:10px;background:var(--bg2,var(--bg3));text-align:center;cursor:pointer}.cp-pkg-tile.open{border-color:var(--gold)}.cp-pkg-tile svg{width:26px;height:26px;margin-bottom:8px;stroke:var(--gold)}.cp-pkg-tile .pt-name{font-size:13px;font-weight:700;color:var(--text,#fff)}.cp-pkg-tile .pt-sub{margin-top:2px;font-size:9.5px;color:var(--muted)}.cp-tile-check{display:none;position:absolute;top:6px;right:6px;width:16px;height:16px;align-items:center;justify-content:center;border-radius:50%;background:var(--gold);color:var(--bg);font-size:10px;font-weight:700}.cp-tile-check.on{display:flex}
.cp-section-box{padding:14px;margin-bottom:14px;border:1px solid var(--border);border-radius:10px;background:var(--bg2,var(--bg3))}.cp-package-section{display:none}.cp-package-section.is-open{display:block}.cp-section-title{margin-bottom:6px;color:var(--gold);font-weight:700}.cp-section-title span,.cp-muted{color:var(--muted);font-weight:400}.cp-toggle-group{display:block}.cp-why{list-style:none;padding:0;margin:8px 0 12px}.cp-why li{position:relative;margin-bottom:5px;padding-left:16px;color:var(--text,#d8d2c4);font-size:11px;line-height:1.4}.cp-why li::before{content:'✓';position:absolute;left:0;color:var(--gold);font-weight:700}.cp-opt{display:flex;align-items:center;gap:10px;padding:9px 10px;margin-bottom:8px;border:1px solid var(--border);border-radius:7px;cursor:pointer}.cp-opt.active{border-color:var(--gold);background:var(--gold-dim,rgba(201,168,76,.12))}.cp-opt-remove{display:flex;width:20px;height:20px;flex-shrink:0;align-items:center;justify-content:center;border:1px solid var(--muted);border-radius:50%;background:var(--bg);color:var(--muted);font-size:11px;cursor:pointer}.cp-opt-name{flex:1;font-size:12.5px}.cp-opt-price{color:var(--gold);font-size:12.5px;font-weight:700}.cp-opt-discount{color:var(--muted);font-size:9.5px;font-weight:400}.cp-note{margin:2px 0 8px;color:var(--muted);font-size:9.5px;line-height:1.5}.cp-add-btn{display:flex;width:100%;margin-top:4px;padding:9px;align-items:center;justify-content:center;gap:8px;border:1px solid var(--gold);border-radius:6px;background:none;color:var(--gold);font-size:11px;font-weight:700;text-transform:uppercase}.cp-add-btn svg{width:15px;height:15px;stroke:var(--gold)}
.cp-cart-bar{display:flex;align-items:center;justify-content:space-between;margin-top:20px;padding:12px 16px;border:1px solid var(--border);border-radius:10px;background:var(--bg2,var(--bg3))}.cp-cart-info{padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;text-decoration:underline dotted;cursor:pointer}.cp-cart-info b{display:block;color:var(--gold);font-size:15px}.cp-cart-proceed{padding:10px 18px;border:0;border-radius:6px;background:var(--gold);color:var(--bg);font-size:12px;font-weight:700;text-decoration:none;text-transform:uppercase}.cp-row-card{padding:10px 12px;margin-bottom:8px;border:1px solid var(--border);border-radius:8px;background:var(--bg2,var(--bg3));font-size:12.5px}.cp-row-top{display:flex;justify-content:space-between;gap:8px;margin-bottom:3px}.cp-amt{color:var(--gold);font-weight:700}.cp-date{color:var(--muted);font-size:11px}.cp-empty{padding:20px 0;color:var(--muted);font-size:12.5px;text-align:center}.cp-pending-notice{padding:10px;margin-bottom:14px;border:1px solid var(--gold-dim,rgba(201,168,76,.3));border-radius:8px;color:var(--gold)}.cp-link{padding:0;border:0;background:none;color:var(--gold);font-size:10.5px;text-decoration:underline;cursor:pointer}.cp-link-muted{color:var(--muted)}.cp-back-link{color:var(--muted);font-size:11px;text-decoration:none}.cp-title-main{font-size:22px}.cp-title-sub{margin-top:6px;font-size:20px}.cp-inline-actions{display:flex;align-items:center;gap:8px}.cp-total{padding-top:6px;margin-top:6px;border-top:1px solid var(--border);color:var(--gold);font-weight:700}.cp-grand-total{font-size:17px}.cp-full-btn{display:block;width:100%;margin-top:12px}.cp-pay-later-form{flex:1 1 30%;min-width:0}.cp-offline-form{display:none;margin-top:12px}.cp-offline-form.is-open{display:block}.cp-offline-form input{box-sizing:border-box;width:100%;margin-bottom:8px;padding:8px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text,#fff)}.cp-pay-error{display:none;margin-top:14px}.cp-pay-error.is-visible{display:block}.cp-payment-actions{display:flex;gap:14px;margin-top:6px}.cp-payment-actions form{display:inline}.cp-hidden-form{display:none}.cp-modal{display:none;position:fixed;inset:0;z-index:300;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.6)}.cp-modal.is-open{display:flex}.cp-modal-box{box-sizing:border-box;width:100%;max-width:340px;padding:16px;border:1px solid var(--border);border-radius:10px;background:var(--bg2,var(--bg3))}


/* Club configuration legacy-theme structure (centralized from page markup). */

/* Former edit_org.php local rules. */
.org-icon-grid { display: flex; flex-wrap: wrap; gap: 14px; margin: 4px 0 6px; }
    .org-icon-chip { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; width: 68px; }
    .org-icon-box { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--bg3); border: 1px solid var(--gold-dim); color: var(--gold); position: relative; }
    .org-icon-chip.active .org-icon-box { background: var(--gold); border-color: var(--gold); color: var(--bg); }
    .org-icon-box svg { width: 19px; height: 19px; }
    .org-icon-label { font-size: 10px; color: var(--muted); text-align: center; line-height: 1.2; }
    .org-icon-chip.active .org-icon-label { color: var(--gold); font-weight: 600; }
    .org-status-badge { position: absolute; bottom: -4px; right: -4px; width: 15px; height: 15px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #fff; border: 2px solid var(--bg); }
    .org-status-badge.done { background: #22A559; }
    .org-status-badge.missing { background: #E8A23D; }
    .org-req-strip { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin: 10px 0 6px; }

/* Former manage_members.php local rules. */
.mini-card-grid { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
  .mini-card { display: flex; align-items: center; gap: 12px; padding: 10px; background: var(--bg3); border: 1px solid var(--border); border-radius: 4px; }
  .mini-card-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--bg2); flex-shrink: 0; border: 1px solid var(--border); }
  .mini-card-name { font-size: 13px; color: var(--white); }
  .mini-card-sub { font-size: 11px; color: var(--muted); }
  .acct-empty { font-size: 12px; color: var(--muted); padding: 10px 0; }
  .req-actions { display: flex; gap: 6px; flex-shrink: 0; }
  .req-actions button { font-size: 11px; padding: 6px 10px; border-radius:var(--radius-btn); border: 1px solid var(--border); background: var(--bg2); color: var(--text); cursor: pointer; }
  .req-actions button.accept { color: var(--color-success); border-color: var(--color-success); }
  .req-actions button.sendback { color: var(--gold); border-color: var(--gold-dim); }
  .req-actions button.reject { color: var(--color-danger); border-color: var(--color-danger); }
  .source-pill { font-size: 10px; color: var(--muted); margin-left: 6px; }
  /* change222 - unified status badge + join message, same classes used across
     Current/Blocked/Past sections so a card reads the same way everywhere. */
  .status-badge { font-size: 10px; padding: 2px 8px; border-radius: 10px; font-weight:600; letter-spacing:0.02em; white-space:nowrap; }
  .status-active { color:var(--color-success); background:rgba(127,217,154,0.12); }
  .status-pending { color: var(--gold); background: var(--gold-dim); }
  .status-blocked { color:var(--color-danger); background:rgba(217,108,108,0.12); }
  .status-past { color: var(--muted); background: rgba(154,146,132,0.15); }
  .join-msg { font-size: 11px; color: var(--text); margin-top: 6px; padding: 6px 8px; background: var(--bg2); border-left: 2px solid var(--gold-dim); border-radius: 2px; font-style: italic; }
  /* change223 - Start/End on one line with a header, matching the events-page pattern */
  .daterange-block { background: var(--bg2); border: 1px solid var(--border); border-radius: 4px; padding: 6px 10px; }
  .daterange-header { font-size: 10px; color: var(--muted); text-transform:uppercase; letter-spacing:0.03em; display:flex; justify-content:space-between; margin-bottom:2px; }
  .daterange-value { display:flex; justify-content:space-between; align-items:center; font-size:12px; color: var(--text); }
  .daterange-value .arrow { color: var(--gold); font-size:11px; }
  /* change229 - icon-menu, copied from my_account.php's established v2-tab pattern (not globally shared in style.css) */
  .v2-tab-grid { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; }
  .v2-tab { display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; width: 64px; }
  .v2-tab-icon { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--bg3); border: 1px solid var(--gold-dim); color: var(--gold); }
  .v2-tab-icon svg { width: 15px; height: 15px; }
  .v2-tab.active .v2-tab-icon { background: var(--gold); border-color: var(--gold); color: var(--bg); }
  .v2-tab-label { font-size: 9.5px; color: var(--muted); line-height: 1.3; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: block; }
  .v2-tab.active .v2-tab-label { color: var(--gold); font-weight: 600; }
  .v2-tabpanel { display: none; }
  .v2-tabpanel.mm-active { display: block; }
  .mm-filter-row { display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
  .mm-filter-row select { background:var(--bg2); border:1px solid var(--border); color:var(--text); font-size:11px; padding:6px 8px; border-radius:var(--radius-btn); flex:1; min-width:110px; }

/* Former org_admins.php local rules. */
.perm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 10px 0; align-items: start; }
  .perm-grid label { font-size: 12px; color: var(--text); display: flex; align-items: flex-start; gap: 6px; line-height: 1.4; }
  .perm-grid label input[type="checkbox"] { flex-shrink: 0; margin-top: 2px; }
  .perm-sub { display: block; font-size: 10px; color: var(--muted); margin-top: 2px; }
  .admin-card { background: var(--bg3); border: 1px solid var(--border); border-radius: 4px; padding: 14px; margin-bottom: 12px; }
  .cap-note { font-size: 12px; color: var(--muted); margin-bottom: 14px; }

/* Former club_join.php local rules. */
.cj-wrap { max-width: 480px; margin: 0 auto; padding: 28px 20px 60px; }
  .tier-card { border:1px solid var(--border); border-radius:5px; padding:14px; margin-bottom:10px; background:var(--bg2); cursor:pointer; }
  .tier-card.selected, .tier-card.active { border-color: var(--gold); background: var(--gold-dim); }
  .tier-name { font-size:15px; color:var(--white); font-weight:600; }
  .tier-price { font-size:20px; color:var(--gold); font-weight:700; margin:4px 0; }
  .tier-dur { font-size:11px; color:var(--muted); }
  .pay-btn-row { display:flex; gap:10px; margin-top:16px; }
  .bank-row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--border); font-size:12px; }
  .bank-row:last-child { border-bottom:none; }
  .bank-row b { color: var(--white); }

.club-config-layout-001{text-align:center; margin-bottom:32px;}
.club-config-layout-002{font-size:30px; color:var(--white);}
.club-config-layout-003{font-size:13px; color:var(--muted); margin-top:8px;}
.club-config-layout-004{display:none;}
.club-config-layout-005{background:var(--bg2); border:1px solid var(--border); border-radius:8px; padding:14px 16px; margin-top:14px;}
.club-config-layout-006{margin-top:0;}
.club-config-layout-007{display:block;}
.club-config-layout-008{cursor:default;}
.club-config-layout-009{color:var(--color-danger);}
.club-config-layout-010{color:var(--muted);}
.club-config-layout-011{width:100%; height:90px; border-radius:6px; border:1px solid var(--border); overflow:hidden; background:var(--bg3); margin-bottom:8px;}
.club-config-layout-012{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:11px;}
.club-config-layout-013{font-size:11px; color:var(--muted); display:block; margin-top:6px;}
.club-config-layout-014{font-size:12px; color:var(--muted); margin:6px 0 12px;}
.club-config-layout-015{color:var(--text);}
.club-config-layout-016{font-size:11px; color:var(--gold); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:8px; border-bottom:1px solid var(--border); padding-bottom:4px;}
.club-config-layout-017{display:flex; align-items:flex-end; gap:8px;}
.club-config-layout-018{flex:1;}
.club-config-layout-019{padding:9px 18px; font-size:12px; flex-shrink:0;}
.club-config-layout-020{font-size:12px; color:var(--muted); margin-bottom:4px;}
.club-config-layout-021{font-size:11px; color:var(--gold); text-transform:uppercase; letter-spacing:0.05em; margin:16px 0 8px; border-bottom:1px solid var(--border); padding-bottom:4px;}
.club-config-layout-022{font-size:11px; color:var(--gold); cursor:pointer; margin-bottom:4px; text-decoration:underline;}
.club-config-layout-023{display:flex; align-items:center; gap:10px;}
.club-config-layout-024{flex-shrink:0;}
.club-config-layout-025{font-size:11px; color:var(--muted); margin-bottom:8px;}
.club-config-layout-026{display:flex; gap:8px; margin-bottom:4px; padding:0 2px;}
.club-config-layout-027{flex:1; font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:0.03em;}
.club-config-layout-028{flex:0.8; font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:0.03em;}
.club-config-layout-029{width:38px;}
.club-config-layout-030{display:flex; gap:8px; margin-bottom:8px; align-items:center;}
.club-config-layout-031{flex:0.8;}
.club-config-layout-032{padding:0 12px;}
.club-config-layout-033{font-size:12px; padding:6px 14px;}
.club-config-layout-034{width:100%; justify-content:space-between;}
.club-config-layout-035{font-size:12px; color:var(--muted);}
.club-config-layout-036{background:var(--bg2); min-height:220px; border-radius: 0 0 var(--radius-btn) var(--radius-btn);}
.club-config-layout-037{font-size:12px; color:var(--muted); margin-bottom:12px;}
.club-config-layout-038{width:fit-content;}
.club-config-layout-039{font-size:12px; color:var(--muted); margin-bottom:14px;}
.club-config-layout-040{justify-content:flex-end;}
.club-config-layout-041{padding:8px 18px;}
.club-config-layout-042{margin-top:10px;}
.club-config-layout-043{font-size:11px; color:var(--muted); margin-top:14px; margin-bottom:6px;}
.club-config-layout-044{margin-top:8px;}
.club-config-layout-045{margin-bottom:8px; display:flex; gap:12px;}
.club-config-layout-046{font-size:12px; margin-bottom:8px;}
.club-config-layout-047{font-size:12px; color:var(--muted); margin-bottom:8px;}
.club-config-layout-048{display:block; text-align:center; margin-top:14px; font-size:12px; color:var(--muted);}
.club-config-layout-049{text-align:center; margin-bottom:24px;}
.club-config-layout-050{font-size:28px; color:var(--white);}
.club-config-layout-051{font-size:13px; color:var(--muted); margin-top:6px;}
.club-config-layout-052{margin-bottom:16px;}
.club-config-layout-053{justify-content:center; margin-bottom:20px;}
.club-config-layout-054{display:flex; gap:10px; margin-bottom:10px; flex-wrap:wrap;}
.club-config-layout-055{text-decoration:none; flex:1; text-align:center;}
.club-config-layout-056{margin-bottom:20px;}
.club-config-layout-057{width:100%; text-align:center;}
.club-config-layout-058{margin:16px 0; padding:14px; border:1px dashed var(--border); border-radius:8px; background:var(--bg2);}
.club-config-layout-059{font-size:12px; font-weight:700; color:var(--gold); text-transform:uppercase; margin-bottom:8px;}
.club-config-layout-060{width:100%; background:var(--bg3); border:1px solid var(--border); border-radius:8px; color:var(--text); padding:9px 10px; font-size:13px; box-sizing:border-box;}
.club-config-layout-061{display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--border); font-size:13px;}
.club-config-layout-062{color:#d9736c;}
.club-config-layout-063{font-size:11px; padding:5px 10px; border-radius:6px; border:1px solid var(--gold); background:transparent; color:var(--gold);}
.club-config-layout-064{color:var(--white); font-size:16px; margin-bottom:10px;}
.club-config-layout-065{margin-bottom:8px; justify-content:space-between; flex-wrap:wrap; align-items:flex-start;}
.club-config-layout-066{display:flex; align-items:center; gap:12px; min-width:0;}
.club-config-layout-067{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--gold);font-family:var(--font-head);font-size:16px;}
.club-config-layout-068{margin-top:2px;}
.club-config-layout-069{width:100%; margin-top:10px; padding-top:10px; border-top:1px solid var(--border);}
.club-config-layout-070{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:4px;}
.club-config-layout-071{font-size:11px; color:var(--muted);}
.club-config-layout-072{font-size:10.5px; color:var(--muted); margin-bottom:8px;}
.club-config-layout-073{background:var(--bg3); border:1px solid var(--border); border-radius:4px; padding:8px 10px; margin-bottom:8px;}
.club-config-layout-074{display:flex; justify-content:space-between; align-items:center; gap:6px;}
.club-config-layout-075{width:auto;}
.club-config-layout-076{padding:4px 8px; font-size:10px;}
.club-config-layout-077{margin-top:6px;}
.club-config-layout-078{font-size:9px; color:var(--muted); margin-bottom:2px;}
.club-config-layout-079{display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-bottom:8px;}
.club-config-layout-080{flex:1; min-width:140px; font-size:11px; padding:6px 8px;}
.club-config-layout-081{font-size:10px; max-width:120px;}
.club-config-layout-082{font-size:11px; padding:6px 10px; border-radius:var(--radius-btn); border:1px solid var(--gold-dim); background:var(--bg2); color:var(--gold); cursor:pointer;}
.club-config-layout-083{margin-bottom:8px; justify-content:space-between; flex-wrap:wrap;}
.club-config-layout-084{flex:1; min-width:110px;}
.club-config-layout-085{margin-top:2px; display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.club-config-layout-086{display:flex; flex-direction:column; gap:6px; align-items:flex-end; width:100%; max-width:220px;}
.club-config-layout-087{width:100%; background:var(--bg3); border:1px solid var(--border); border-radius:4px; padding:6px 10px;}
.club-config-layout-088{display:flex; justify-content:space-between; gap:6px;}
.club-config-layout-089{width:100%;}
.club-config-layout-090{display:none; width:100%; font-size:10px; color:var(--muted);}
.club-config-layout-091{display:block; margin-bottom:2px;}
.club-config-layout-092{accent-color:var(--gold);}
.club-config-layout-093{display:none; width:100%; padding-top:4px; border-top:1px dashed var(--border);}
.club-config-layout-094{font-size:10px; padding:5px 7px; margin-bottom:4px;}
.club-config-layout-095{font-size:9px; max-width:100%;}
.club-config-layout-096{width:100%; font-size:10px; padding:7px; margin-top:4px;}
.club-config-layout-097{font-size:11px; padding:6px 10px; border-radius:var(--radius-btn); border:1px solid var(--color-danger); background:var(--bg2); color:var(--color-danger); cursor:pointer; margin-top:6px;}
.club-config-layout-098{display:flex; align-items:center; gap:12px; justify-content:space-between; flex-wrap:wrap;}
.club-config-layout-099{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.club-config-layout-100{font-size:11px; padding:6px 10px; border-radius:var(--radius-btn); border:1px solid var(--color-success); background:var(--bg2); color:var(--color-success); cursor:pointer;}
.club-config-layout-101{margin-top:10px; padding-top:10px; border-top:1px solid var(--border);}
.club-config-layout-102{font-size:11px; color:var(--gold); text-transform:uppercase; letter-spacing:0.03em; margin-bottom:6px;}
.club-config-layout-103{font-size:12px; min-height:50px; margin-bottom:8px;}
.club-config-layout-104{display:flex; gap:8px;}
.club-config-layout-105{font-size:11px; padding:6px 10px; border-radius:var(--radius-btn); border:1px solid var(--color-danger); background:var(--bg2); color:var(--color-danger); cursor:pointer;}
.club-config-layout-106{margin-bottom:8px; display:block;}
.club-config-layout-107{margin-top:4px;}
.club-config-layout-108{display:none; position:fixed; inset:0; z-index:999; background:rgba(0,0,0,0.7);}
.club-config-layout-109{max-width:380px; margin:60px auto; background:var(--bg); border:1px solid var(--border); border-radius:6px; max-height:calc(100vh - 120px); display:flex; flex-direction:column; overflow:hidden;}
.club-config-layout-110{display:flex; justify-content:flex-end; padding:8px 10px; border-bottom:1px solid var(--border);}
.club-config-layout-111{background:none; border:none; color:var(--muted); font-size:20px; cursor:pointer; line-height:1;}
.club-config-layout-112{overflow-y:auto;}
.club-config-layout-113{padding:40px; text-align:center; color:var(--muted); font-size:12px;}
.club-config-layout-114{text-align:center; margin-bottom:20px;}
.club-config-layout-115{color:var(--color-success); font-size:13px; text-align:center; margin-bottom:14px;}
.club-config-layout-116{color:var(--color-danger); font-size:13px; text-align:center; margin-bottom:14px;}
.club-config-layout-117{color:var(--white);}
.club-config-layout-118{font-size:11px; color:var(--muted); margin:4px 0 8px;}
.club-config-layout-119{cursor:pointer;}
.club-config-layout-120{display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--border);}
.club-config-layout-121{cursor:pointer; margin:0;}
.club-config-layout-122{font-size:11px; color:var(--muted); display:flex; align-items:center; gap:8px;}
.club-config-layout-123{cursor:pointer; border-top:1px solid var(--border); margin-top:8px; padding-top:10px;}
.club-config-layout-124{padding:6px 14px; font-size:11px; margin-right:8px; margin-top:10px;}
.club-config-layout-125{display:inline;}
.club-config-layout-126{margin-top:24px;}
.club-config-layout-127{display:flex; gap:6px;}
.club-config-layout-128{margin-bottom:10px;}
.club-config-layout-129{padding:8px 16px; font-size:12px; margin-top:10px;}
.club-config-layout-130{max-width:640px; margin:0 auto; padding:16px;}
.club-config-layout-131{font-size:18px; margin-bottom:4px;}
.club-config-layout-132{font-size:13px; color:var(--muted); margin-bottom:20px;}
.club-config-layout-133{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:10px;}
.club-config-layout-134{color:var(--muted); font-size:13px; margin-bottom:20px;}
.club-config-layout-135{background:var(--bg2); border:1px solid var(--border); border-radius:6px; padding:14px; margin-bottom:10px;}
.club-config-layout-136{font-size:11px; color:var(--gold); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:4px;}
.club-config-layout-137{font-size:14px; color:var(--text); margin-bottom:4px;}
.club-config-layout-138{font-size:12px; color:var(--muted); margin-bottom:10px;}
.club-config-layout-139{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em; margin:24px 0 10px;}
.club-config-layout-140{font-size:12px; color:var(--muted); margin-bottom:2px;}
.club-config-layout-141{display:flex; gap:8px; margin-top:10px;}
.club-config-layout-142{max-width:680px; margin:0 auto; padding:32px 20px 80px;}
.club-config-layout-143{font-size:12px; color:var(--muted); margin-top:10px;}
.club-config-layout-144{margin-bottom:24px; padding:16px; background:var(--bg2); border:1px solid var(--border); border-radius:4px;}
.club-config-layout-145{font-size:15px; color:var(--white); margin-bottom:10px;}
.club-config-layout-146{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px;}
.club-config-layout-147{display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); flex-wrap:wrap;}
.club-config-layout-148{flex:1; min-width:140px; color:var(--text); font-size:13px;}
.club-config-layout-149{color:var(--muted); font-size:11px;}
.club-config-layout-150{flex:0 0 130px;}
.club-config-layout-151{padding:8px 14px;}
.club-config-layout-152{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px; background:var(--bg3); border:1px solid var(--border); border-radius:4px; margin-bottom:8px; flex-wrap:wrap;}
.club-config-layout-153{font-size:13px; color:var(--white);}
.club-config-layout-154{font-size:11px; color:var(--muted); margin-top:2px;}
.club-config-layout-155{max-width:640px; margin:0 auto; padding:32px 20px 80px;}
.club-config-layout-156{background:var(--bg3); border:1px solid var(--gold-dim); border-radius:4px; padding:14px; margin-bottom:20px;}
.club-config-layout-157{font-size:13px; color:var(--text);}
.club-config-layout-158{background:var(--bg3); border:1px solid var(--border); border-radius:4px; padding:14px;}
.club-config-layout-159{padding:8px 16px; font-size:12px;}
.club-config-layout-160{max-width:560px; margin:0 auto; padding:32px 20px 80px;}
.club-config-layout-161{font-size:24px; color:var(--white);}
.club-config-layout-162{font-size:13px; color:var(--muted); margin-bottom:20px; padding:12px; background:var(--bg2); border:1px solid var(--border); border-radius:4px;}
.club-config-layout-163{font-size:13px; color:var(--muted); margin-bottom:14px;}
.club-config-layout-164{min-height:100px; margin-bottom:12px;}
.club-config-layout-165{font-size:13px; color:var(--muted);}
.club-config-layout-166{font-size:12px; color:var(--gold); text-transform:uppercase; letter-spacing:0.03em; margin-bottom:10px;}
.club-config-layout-167{font-size:10px; color:var(--muted);}
.club-config-layout-168{margin-top:14px;}
.club-config-layout-169{font-size:12px; color:var(--muted); margin-top:14px;}
.club-config-layout-170{display:block; text-align:center; margin-top:20px; font-size:12px; color:var(--muted);}
.club-config-layout-171{font-size:22px; color:var(--white); text-align:center; margin-bottom:4px;}
.club-config-layout-172{font-size:13px; color:var(--muted); text-align:center; margin-bottom:24px;}
.club-config-layout-173{color:var(--muted); font-size:10px;}
.club-config-layout-174{width:100%; margin-top:6px;}
.club-config-layout-175{width:100%; margin-top:16px;}
.club-config-layout-176{width:100%; color:var(--muted); border-color:var(--border);}
.club-config-layout-177{margin-top:14px; display:none;}
.club-config-layout-178{font-size:11px; color:var(--muted); text-transform:uppercase; margin-bottom:8px;}
.club-config-layout-179{background:var(--bg2); border:1px solid var(--border); border-radius:4px; padding:10px 12px; margin-bottom:18px;}
.club-config-layout-180{font-size:11px; color:var(--muted); text-transform:uppercase; margin-bottom:5px;}
.club-config-layout-181{margin-bottom:12px;}

/* Club configuration rules from PHP-bearing tags. */
.club-config-layout-182{width:56px;height:56px;border-radius:50%;object-fit:cover;display:block;margin-bottom:8px;border:1px solid var(--border);}
.club-config-layout-183{color:var(--gold);}
.club-config-layout-184{text-decoration:none; flex:1; text-align:center;}
.club-config-layout-185{margin-bottom:8px; justify-content:space-between; flex-wrap:wrap; cursor:pointer;}
.club-config-layout-186{width:100%;height:100%;object-fit:cover;}
.club-config-layout-187{margin-top:8px; font-size:11px; padding:6px 14px; border-radius:var(--radius-btn); border:1px solid var(--color-danger); background:var(--bg2); color:var(--color-danger); cursor:pointer;}
.club-config-layout-188{font-size:11px; padding:6px 14px; border-radius:var(--radius-btn); border:1px solid var(--color-success); background:var(--bg2); color:var(--color-success); cursor:pointer;}
.club-config-layout-189{font-size:11px; padding:6px 14px; border-radius:var(--radius-btn); border:1px solid var(--border); background:var(--bg2); color:var(--text); cursor:pointer;}
.club-config-layout-190{font-size:11px; padding:6px 14px; border-radius:var(--radius-btn); border:1px solid var(--color-danger); background:var(--bg2); color:var(--color-danger); cursor:pointer;}
.club-config-layout-191{display:block; text-align:center; margin-top:20px; font-size:12px; color:var(--muted);}
.club-config-layout-192{color:inherit;}
.club-config-layout-193{flex:1; min-width:160px; background:var(--bg3); border:1px solid var(--border); color:var(--text); padding:8px; border-radius:var(--radius-btn);}
.club-config-layout-194{display:block; text-align:center; margin-top:14px; font-size:12px; color:var(--muted);}
.club-config-layout-195{padding:8px 16px; font-size:12px;}
.club-config-layout-196{display:block; text-align:center; margin-top:24px; font-size:12px; color:var(--muted);}
.club-config-layout-197{flex:1; text-decoration:none; text-align:center;}

/* Club configuration rules from PHP-bearing tags. */
.club-config-layout-198{font-size:10px;}
.cm-club-progress{display:block;width:100%;height:18px}.cm-cover-preview,.cm-member-photo{width:100%;height:100%;object-fit:cover}.cm-conditional-block,.cm-add-member-link,.cm-more-numbers,.cm-affiliated-picker,.cm-picker-dropdown{display:none}.cm-conditional-block.is-visible,.cm-more-numbers.is-visible,.cm-affiliated-picker.is-visible{display:block}.cm-add-member-link.is-visible{display:inline-block}.cm-has-value{color:var(--text)}.cm-no-value{color:var(--muted)}.cm-add-member-link{margin-bottom:14px;color:var(--gold);font-size:11px}.cm-more-numbers{margin-top:10px;padding-top:10px;border-top:1px dashed var(--border)}.cm-affiliated-picker{margin-top:14px}.cm-flex-field{flex:1}.cm-inline-link,.cm-row-link{color:var(--gold)}.cm-row-link{display:block;margin-top:2px;font-size:11px}.cm-small-text{font-size:10px}.cm-small-accent{color:var(--gold);font-size:10px}.cm-compact-picker{font-size:11px}.cm-compact-picker-button{width:100%;justify-content:space-between;padding:4px 8px;font-size:11px}.cm-member-row-flex{margin-bottom:8px;justify-content:space-between;flex-wrap:wrap;cursor:pointer}.cm-member-row-block{display:block;margin-bottom:8px;cursor:pointer}.cm-appeal-message{margin-bottom:10px;font-size:13px}.cm-appeal-message.is-member{color:var(--text)}.cm-appeal-message.is-admin{color:var(--gold)}.cm-reply-box{min-height:70px;margin-bottom:12px}

/* Shared structural rules moved from club-management pages. */
.bearer-card{display:flex;align-items:center;gap:12px;padding:12px;margin-bottom:10px;border:1px solid var(--border);border-radius:4px;background:var(--bg3)}
.bearer-photo{width:52px;height:52px;flex-shrink:0;border:1px solid var(--gold-dim);border-radius:50%;background:var(--bg2);object-fit:cover}
.bearer-role{color:var(--gold);font-size:10px;letter-spacing:.05em;text-transform:uppercase}
.bearer-name{color:var(--white);font-family:var(--font-head);font-size:15px;font-weight:600}
.pmt-wrap,.mar-wrap{max-width:720px;margin:0 auto;padding:24px 16px 60px}
table.pmt-table{width:100%;border-collapse:collapse}
table.pmt-table th{padding:6px;border-bottom:1px solid var(--border);color:var(--muted);font-size:10px;text-align:left;text-transform:uppercase}
table.pmt-table td{padding:6px;border-bottom:1px solid var(--border);color:var(--text);vertical-align:top}
.mar-row{padding:10px 12px;margin-bottom:8px;border:1px solid var(--border);border-radius:4px;background:var(--bg2);font-size:12px}
.mar-row-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.mar-row-head b{color:var(--white)}
.mar-status{padding:2px 8px;border-radius:10px;font-size:10px;font-weight:600;text-transform:uppercase}
.mar-verified{background:rgba(127,217,154,.12);color:var(--color-success)}
.mar-sentback,.mar-changed{background:var(--gold-dim);color:var(--gold)}
.mar-blocked,.mar-rejected,.mar-archived{background:rgba(217,108,108,.12);color:var(--color-danger)}
.mar-note{margin-top:4px;color:var(--muted);font-size:11px}
.mar-meta{margin-top:4px;color:var(--muted);font-size:10px}

/* item 37 - legacy-theme sidebars (preview, not yet wired into any live
   page - see includes/legacy_content_shell.php). Same three-column grid
   structure, sticky offsets and 1100px/760px responsive breakpoints as
   community's .cm-shell (assets/community.css), re-skinned with legacy's
   own dark/gold tokens (--bg2/--bg3/--gold/--border/--radius-card/
   --shadow-card) instead of community's light-blue palette, so it matches
   the rest of the legacy theme rather than looking transplanted. */
.lg-shell{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:230px minmax(0,1fr) 280px;gap:20px;padding:20px}
.lg-shell>.lg-main{width:100%;max-width:none;min-width:0}
.lg-left,.lg-right{position:sticky;top:84px;align-self:start}
.lg-main{min-width:0}
/* item 9 (2026-09-20 batch, second pass) - the side-panel rollout only ever
   added the left/right columns; it never gave the middle content area its
   own card look the way the side panels themselves (.lg-welcome/.lg-side-
   card/.lg-rail-card, above) already have. Every one of the 161 pages that
   route through legacyContentShell()/the shared event-shell pair lands in
   this one .lg-main wrapper, so one rule here reaches all of them - no
   per-page changes needed. Confirmed legacy-desktop-only scope (mobile never
   shows these side panels at all, same 761px cutoff item 7's lesson-page fix
   already uses) - nothing changes below that width, and community theme uses
   its own separate .cm-main, untouched by this. */
@media (min-width: 761px) {
  .lg-main { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius-card); box-shadow:var(--shadow-card); padding:20px; }
}
.lg-welcome,.lg-side-card,.lg-rail-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-card);box-shadow:var(--shadow-card)}
.lg-welcome{display:flex;align-items:center;gap:10px;padding:15px;margin-bottom:14px}
.lg-welcome strong,.lg-welcome span{display:block;color:var(--text)}
.lg-welcome strong{font-family:var(--font-head)}
.lg-welcome span{color:var(--muted);font-size:12px}
.lg-avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--gold-dim);color:var(--gold);font-weight:800;flex:0 0 auto}
.lg-side-card{padding:8px}
.lg-side-card a{min-height:42px;border-radius:6px;padding:9px 11px;color:var(--text);display:flex;align-items:center;gap:10px;text-decoration:none}
.lg-side-card a:hover,.lg-side-card a.active{background:var(--gold-dim);color:var(--gold);font-weight:700}
.lg-side-card svg{width:19px;height:19px}
.lg-side-label{display:block;padding:10px;color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.lg-account-rail{margin-top:14px}
.lg-rail-card{padding:16px;margin-bottom:14px}
.lg-card-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.lg-card-heading strong{color:var(--white);font-family:var(--font-head);font-size:16px}
.lg-card-heading a{color:var(--gold);font-size:11px;text-decoration:none}
.lg-mini{display:grid;grid-template-columns:46px 1fr;gap:10px;padding:11px 0;border-top:1px solid var(--border);color:var(--text);text-decoration:none}
.lg-mini:first-of-type{border-top:0}
.lg-mini img,.lg-mini-fallback{width:46px;height:46px;border-radius:8px;object-fit:cover;background:var(--gold-dim);color:var(--gold);display:grid;place-items:center;font-weight:800}
.lg-mini strong,.lg-mini small{display:block}
.lg-mini strong{font-size:12px;line-height:1.35;color:var(--text)}
.lg-mini small{color:var(--muted);font-size:10px;margin-top:3px}
.lg-learning-mini{display:grid;grid-template-columns:36px 1fr;gap:9px;padding:10px 0;border-top:1px solid var(--border);color:var(--text);text-decoration:none}
.lg-learning-mini>span{width:36px;height:36px;border-radius:8px;background:var(--gold-dim);color:var(--gold);display:grid;place-items:center}
.lg-learning-mini svg{width:18px;height:18px}
.lg-learning-mini small,.lg-learning-mini strong{display:block}
.lg-learning-mini small{font-size:9px;color:var(--gold);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lg-learning-mini strong{font-size:12px;line-height:1.35;margin-top:2px;color:var(--text)}
@media (max-width:1100px){
  .lg-shell{grid-template-columns:200px minmax(0,1fr)}
  .lg-right{display:none}
}
@media (max-width:760px){
  .lg-shell{display:block;padding:10px}
  .lg-left{display:none}
}