@charset "UTF-8";
/* ============================================================
   VISHWALINGAYAT MARRIAGE — THEME CSS
   New maroon/gold/cream design — replaces Bootstrap
   Sections:
   01. Variables & Reset
   02. Base Typography
   03. Announcement Ticker
   04. Top Bar & Logo
   05. Hamburger Toggle
   06. Main Nav
   07. Event Banner (Parichaya Vedika countdown)
   08. Hero Section
   09. Stats Bar
   10. Trust Features Strip
   11. Sparkle Highlighters
   12. Ad Slots
   13. Profile Cards (browse/search lists)
   14. Profile Detail Page
   15. Success Stories
   16. Footer
   17. Member Dashboard Layout
   18. Member Info Pages (forms/view)
   19. Admin Panel Header & Nav
   20. Admin Member Lists (DataTables)
   21. Registration & Auth Forms
   22. Search Forms
   23. Package Cards
   24. Parichaya Vedika Page
   25. Alert & Status Banners
   26. Pagination
   27. Slick Slider Overrides
   28. Back-to-Top Button
   29. Utility Classes
   30. Print Styles
   31. Responsive — Tablet (≤ 1024px)
   32. Responsive — Mobile (≤ 640px)
   ============================================================ */


/* ============================================================
   01. VARIABLES & RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --maroon:       #C62828;
  --maroon-dark:  #8B0000;
  --maroon-light: #D96B6B;
  --red-royal:    #E63946;
  --gold:         #D4AF37;
  --gold-light:   #E0C46A;
  --cream:        #FFF6EE;
  --cream-dark:   #FFE4C1;
  --text-dark:    #222222;
  --text-mid:     #555555;
  --white:        #ffffff;
  --border-light: #EEEEEE;
  --amber:        #E8901F;
  --burnt-orange: #B8481F;
  --shadow-sm:    0 2px 8px rgba(198,40,40,0.10);
  --shadow-md:    0 6px 24px rgba(198,40,40,0.15);
  --fs-hero:            clamp(33.5px, 5.4vw, 50.5px);
  --fs-section-heading: 21.5px;
  --fs-page-title:      24px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-monospace:  SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --font-heading: var(--font-family-sans-serif);
  --font-body:    var(--font-family-sans-serif);
  --font-accent:  var(--font-family-sans-serif);
  --radius:       6px;
  --transition:   0.2s ease;
}


/* ============================================================
   02. BASE TYPOGRAPHY
   ============================================================ */
html, body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--text-dark);
  font-size: 20.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  /* Defensive guard: several rounds of testing (7 viewport widths, forced
     scroll attempts, animation sampling) could not reproduce a page-level
     overflow in this environment, yet it was reliably reproduced on the
     reporter's own device/browser. Rather than leave the page structurally
     able to scroll horizontally at all pending an exact root cause, clip it
     outright here — this can only ever hide an already-invisible sliver of
     over-width content, never something a user needs to see. */
  overflow-x: hidden;
  max-width: 100%;
}
/* Screenshot / copy deterrent (user-select, touch-callout, drag) moved to
   include/incRightclkDsbl.php — that file is production-only and public-
   page-only (never loaded by admin or member-dashboard chrome), unlike this
   stylesheet which every page loads. Keeping it here made these rules apply
   unconditionally everywhere, including localhost and the admin panel,
   which is exactly what that file's own dev/prod gate exists to prevent.
   Worse: `img { pointer-events: none; }` disabled ALL mouse interaction on
   every image sitewide — including the onclick that opens the photo-zoom
   lightbox on both adm-member-details.php and mem-profile-view.php. */

h1, h2, h3, h4, h5, h6 { margin: 0; line-height: 1.25; font-family: var(--font-heading); }

a { text-decoration: none; color: var(--maroon); transition: color var(--transition); }
a:hover { color: var(--maroon-light); text-decoration: none; }

ul { list-style: none; margin: 0; padding: 0; }

p { margin: 0; }

img { max-width: 100%; height: auto; display: block; }

input, select, textarea, button { font-family: inherit; }

/* text-transform for member ID fields */
.txt-upper { text-transform: uppercase; }


/* ============================================================
   03. ANNOUNCEMENT TICKER
   ============================================================ */
.announcement-bar {
  background: linear-gradient(90deg, var(--maroon-dark), var(--maroon), var(--gold));
  color: #fff;
  font-size: 15.5px;
  padding: 6px 0;
  overflow: hidden;
}
.announcement-bar .ticker-wrap {
  display: flex;
  align-items: center;
}
.announcement-bar .ticker-label {
  background: rgba(0,0,0,0.18);
  color: #fff;
  font-weight: 700;
  padding: 2px 14px;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 14.5px;
  letter-spacing: 1px;
  flex-shrink: 0;
  margin-right: 16px;
}
.ticker-items {
  display: flex;
  animation: ticker 28s linear infinite;
  white-space: nowrap;
}
.ticker-items span { margin-right: 60px; color: #fff; }
.ticker-items span::before { content: "\25CF  "; }
.ticker-items a { color: #fff; text-decoration: underline; font-weight: 700; }
.ticker-items a:hover { color: var(--cream); }
@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.announcement-bar:hover .ticker-items { animation-play-state: paused; }


/* ============================================================
   04. TOP BAR & LOGO
   ============================================================ */
.top-bar {
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 40px;
  border-bottom: 1px solid var(--cream-dark);
}

/* Logo */
.logo-wrap { display: flex; align-items: center; }
.logo-icon { display: flex; align-items: center; flex-shrink: 0; }
.logo-icon img {
  height: 80px;
  width: auto;
  max-width: 320px;
  object-fit: contain;
  display: block;
}
.logo-text h1 {
  font-family: var(--font-heading);
  font-size: 26.5px;
  color: var(--maroon);
  line-height: 1.2;
  font-weight: 700;
}
.logo-text p {
  font-size: 13px;
  color: var(--gold);
  letter-spacing: 1.5px;
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 2px;
}

/* Centre tagline */
.tagline-center {
  text-align: center;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 19px;
  color: var(--maroon);
  line-height: 1.5;
  border-left: 3px solid var(--gold);
  border-right: 3px solid var(--gold);
  padding: 6px 20px;
}

/* Right actions (help, login links) */
.top-actions { display: flex; align-items: center; gap: 22px; }
.top-link {
  text-decoration: none;
  color: var(--text-mid);
  font-size: 17px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  transition: color var(--transition);
}
.top-link:hover { color: var(--maroon); }
.top-icon { font-size: 19px; }
.top-text { font-size: 17px; }

/* Register / CTA button */
.btn-register {
  background: var(--maroon);
  color: #fff !important;
  padding: 10px 22px;
  border-radius: 4px;
  font-family: var(--font-body);
  font-weight: 700 !important;
  font-size: 18px !important;
  letter-spacing: 0.5px;
  transition: background var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-register:hover { background: var(--maroon-light) !important; color: #fff !important; }

/* Header login form (inside top bar when not logged in) */
.header-login-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.header-login-form input[type="text"],
.header-login-form input[type="password"] {
  border: 1px solid var(--border-light) !important;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 15.5px;
  width: 160px;
  background: #fff;
  color: var(--text-dark);
  outline: none;
  box-shadow: none !important;
}
.header-login-form input:focus { border-color: var(--gold) !important; }
.header-login-form .btn-login {
  background: var(--maroon);
  color: #fff;
  border: none;
  padding: 8px 18px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 15.5px;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: background var(--transition);
}
.header-login-form .btn-login:hover { background: var(--maroon-light); }

/* Compact login toggle — hidden on desktop (full .header-login-form is used
   there instead), shown ≤640px beside Register so Login stays reachable from
   the top bar instead of being buried in the hamburger nav dropdown. Opens on
   tap via JS (.mini-login.open, see include/incFooter.php) — :focus-within
   alone doesn't reliably fire from a touch tap on a <button> in every mobile
   browser, so it's kept only as a bonus for keyboard/desktop users. */
.mini-login { display: none; position: relative; }
.btn-login-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--maroon);
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 4px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background var(--transition);
}
.btn-login-toggle:hover { background: var(--maroon-light); }
.mini-login-panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  flex-direction: column;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  padding: 14px;
  min-width: 220px;
  max-width: calc(100vw - 32px);
  z-index: 500;
}
.mini-login:focus-within .mini-login-panel,
.mini-login.open .mini-login-panel { display: flex; }
.mini-login-panel input[type="text"],
.mini-login-panel input[type="password"] {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  padding: 9px 12px;
  font-size: 15.5px;
  background: #fff;
  color: var(--text-dark);
  outline: none;
}
.mini-login-panel input:focus { border-color: var(--gold); }
.mini-login-panel .btn-login {
  width: 100%;
  background: var(--maroon);
  color: #fff;
  border: none;
  padding: 9px 12px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 15.5px;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: background var(--transition);
}
.mini-login-panel .btn-login:hover { background: var(--maroon-light); }

/* Logged-in user dropdown */
.user-dropdown { position: relative; display: inline-block; }
.user-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 12px;
  color: var(--text-dark);
  font-weight: 600;
  font-size: 17px;
}
.user-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  background: linear-gradient(135deg, #fef3d0, #f5d98a);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px;
  overflow: hidden;
}
.user-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.user-dropdown-menu {
  display: none;
  position: absolute;
  right: 0; top: 100%;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  min-width: 200px;
  z-index: 100;
  padding: 6px 0;
}
.user-dropdown:hover .user-dropdown-menu,
.user-dropdown-menu:hover { display: block; }
.user-dropdown-menu a {
  display: block;
  padding: 10px 18px;
  color: var(--text-dark);
  font-size: 17px;
  transition: background var(--transition);
}
.user-dropdown-menu a:hover { background: var(--cream); color: var(--maroon); }
.user-dropdown-menu .divider { border-top: 1px solid var(--border-light); margin: 4px 0; }


/* ============================================================
   05. HAMBURGER TOGGLE (pure CSS checkbox)
   ============================================================ */
#nav-toggle { display: none; }
.hamburger {
  display: none;
  background: none;
  border: 2px solid var(--maroon);
  border-radius: 4px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 8px;
  min-width: 44px; min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}
.hamburger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--maroon);
  border-radius: 2px;
  transition: all 0.3s;
  pointer-events: none;
}


/* ============================================================
   06. MAIN NAV
   ============================================================ */
nav.main-nav {
  background: var(--maroon);
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  overflow-x: auto;
  position: relative;
  z-index: 50;
}
nav.main-nav a {
  color: #fff;
  text-decoration: none;
  padding: 14px 28px;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-wrap: nowrap;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--transition), color var(--transition);
  display: block;
}
nav.main-nav a.active,
nav.main-nav a:hover { background: rgba(255,255,255,0.1); color: #fff; }
nav.main-nav a.active { color: var(--gold-light); }

/* Nav dropdown (search profiles) */
nav.main-nav .nav-item { position: relative; }
nav.main-nav .nav-dropdown {
  display: none;
  position: absolute;
  top: 100%; left: 0;
  background: var(--maroon-dark);
  min-width: 200px;
  z-index: 200;
  border-top: 2px solid var(--gold);
  box-shadow: var(--shadow-md);
}
nav.main-nav .nav-item:hover .nav-dropdown { display: block; }
nav.main-nav .nav-dropdown a {
  padding: 11px 20px;
  font-size: 14.5px;
  letter-spacing: 1px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
nav.main-nav .nav-dropdown a:last-child { border-bottom: none; }
nav.main-nav .nav-dropdown a:hover { background: rgba(255,255,255,0.1); }

/* Mobile-only nav links (login/logout shown in hamburger menu) — hidden on desktop */
nav.main-nav a.mob-nav-link { display: none; }
nav.main-nav .mob-login-form { display: none; }


/* ============================================================
   07. EVENT BANNER (Parichaya Vedika countdown)
   ============================================================ */
#event-banner {
  background: linear-gradient(135deg, #b8860b 0%, #D4AF37 40%, #E0C46A 70%, #D4AF37 100%);
  background-size: 200% 200%;
  animation: goldShimmer 4s ease infinite;
  position: relative;
  overflow: hidden;
  width: 100%;
}
#event-banner.hidden { display: none; }

@keyframes goldShimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
#event-banner::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent, transparent 60px, rgba(255,255,255,0.06) 60px, rgba(255,255,255,0.06) 62px);
  pointer-events: none;
}
.event-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 40px;
  gap: 20px;
  position: relative;
  z-index: 1;
}
.event-left { display: flex; align-items: center; gap: 16px; }
.event-icon-wrap {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  border: 2px solid rgba(255,255,255,0.5);
  display: flex; align-items: center; justify-content: center;
  font-size: 29px;
  flex-shrink: 0;
  animation: pulseRing 2s ease-in-out infinite;
}
@keyframes pulseRing {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,0.4); }
  50%       { transform: scale(1.05); box-shadow: 0 0 0 8px rgba(255,255,255,0); }
}
.event-badge {
  background: var(--maroon);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 3px 10px;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.event-title {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  color: var(--maroon-dark);
  line-height: 1.2;
  margin-bottom: 3px;
}
.event-meta {
  font-size: 15.5px;
  color: var(--maroon-dark);
  font-weight: 600;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.event-meta span { display: flex; align-items: center; gap: 5px; }
.event-meta a { color: var(--maroon-dark); text-decoration: underline; text-underline-offset: 2px; }
.event-center { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.event-countdown { display: flex; gap: 10px; }
.countdown-unit {
  background: var(--maroon);
  color: #fff;
  border-radius: var(--radius);
  padding: 8px 12px;
  text-align: center;
  min-width: 54px;
}
.countdown-unit .num {
  font-family: var(--font-heading);
  font-size: 26.5px;
  font-weight: 700;
  line-height: 1;
  display: block;
}
.countdown-unit .lbl {
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.8;
  display: block;
  margin-top: 2px;
}
.countdown-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--maroon-dark);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.event-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.btn-event-register {
  background: var(--maroon);
  color: #fff;
  border: none;
  padding: 11px 24px;
  border-radius: 4px;
  font-family: var(--font-heading);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background var(--transition), transform 0.1s;
  white-space: nowrap;
}
.btn-event-register:hover { background: var(--maroon-dark); transform: translateY(-1px); }
.btn-event-close {
  background: none;
  border: none;
  color: var(--maroon-dark);
  font-size: 15.5px;
  cursor: pointer;
  opacity: 0.7;
  font-family: var(--font-body);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
}
.btn-event-close:hover { opacity: 1; }


/* ============================================================
   08. HERO SECTION
   Hero image is admin-managed via site_settings.hero_image.
   PHP should resize uploads to 1400×700px (GD library).
   CSS uses object-fit:cover so any image fills correctly.
   ============================================================ */
.hero {
  position: relative;
  min-height: 560px;
  background: linear-gradient(135deg, #FFE4C1 0%, #FFF6EE 40%, #F4B878 100%);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-bg-img {
  position: absolute;
  right: 0; top: 0;
  width: 62%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.hero-overlay {
  position: absolute;
  right: 0; top: 0;
  width: 62%;
  height: 100%;
  background: none;
  pointer-events: none;
}
.hero-content {
  position: relative;
  z-index: 2;
  padding: 40px 40px 40px 50px;
  max-width: 480px;
}
.hero-content h2 {
  font-family: var(--font-accent);
  font-size: 33.5px;
  color: var(--maroon);
  font-weight: 400;
  line-height: 1.1;
}
.hero-content h1 {
  font-family: var(--font-heading);
  font-size: 53px;
  color: var(--maroon);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 10px;
}
.hero-content p {
  font-size: 18px;
  color: var(--text-mid);
  margin-bottom: 26px;
  line-height: 1.6;
}
.hero-content .btn-register {
  font-size: 19px !important;
  padding: 14px 32px !important;
}


/* ============================================================
   09. STATS BAR
   ============================================================ */
.stats-bar {
  background: var(--maroon);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 22px 0;
}
.stat-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 50px;
  border-right: 1px solid rgba(255,255,255,0.2);
}
.stat-item:last-child { border-right: none; }
.stat-icon { font-size: 36px; color: var(--gold-light); }
.stat-text strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 26.5px;
  color: var(--gold-light);
  font-weight: 700;
}
.stat-text span { font-size: 15.5px; color: rgba(255,255,255,0.85); }


/* ============================================================
   10. TRUST FEATURES STRIP
   ============================================================ */
.features-section {
  background: var(--cream);
  padding: 36px 40px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 10px 40px;
  border-right: 1px solid var(--border-light);
  flex: 1 1 160px;
  min-width: 140px;
}
.feature-item:last-child { border-right: none; }
.feature-icon { font-size: 36px; color: var(--gold); margin-bottom: 10px; }
.feature-item h4 {
  font-family: var(--font-heading);
  font-size: 17px;
  color: var(--maroon);
  margin-bottom: 6px;
  font-weight: 700;
}
.feature-item p { font-size: 14.5px; color: var(--text-mid); line-height: 1.5; max-width: 160px; }


/* ============================================================
   11. SPARKLE HIGHLIGHTERS
   ============================================================ */
.highlighters-section {
  background: linear-gradient(135deg, #222222 0%, #8B0000 40%, #C62828 70%, #8B0000 100%);
  padding: 52px 40px;
  position: relative;
  overflow: hidden;
}
.highlighters-section::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(-55deg, transparent, transparent 40px, rgba(201,152,42,0.04) 40px, rgba(201,152,42,0.04) 42px);
  pointer-events: none;
}
.highlighters-section::after {
  content: '';
  position: absolute;
  bottom: -60px; right: -60px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,152,42,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.hl-heading {
  text-align: center;
  font-family: var(--font-heading);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 36px;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.hl-heading::before, .hl-heading::after {
  content: '';
  flex: 1;
  max-width: 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.hl-heading::after { background: linear-gradient(90deg, var(--gold), transparent); }
.hl-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  position: relative;
  z-index: 1;
}
.hl-card {
  position: relative;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(201,152,42,0.3);
  border-radius: 12px;
  padding: 30px 16px 24px;
  text-align: center;
  overflow: hidden;
  transition: transform 0.3s, border-color 0.3s, background 0.3s;
  cursor: default;
  word-break: break-word;
}
.hl-card:hover {
  transform: translateY(-6px);
  border-color: rgba(201,152,42,0.8);
  background: rgba(255,255,255,0.09);
}
.hl-card::before {
  content: '';
  position: absolute;
  top: -20px; left: 50%;
  transform: translateX(-50%);
  width: 80px; height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,152,42,0.25) 0%, transparent 70%);
  pointer-events: none;
}
.hl-card::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  transition: left 0.5s ease;
  pointer-events: none;
}
.hl-card:hover::after { left: 150%; }
.hl-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.hl-icon {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(201,152,42,0.2), rgba(232,184,75,0.1));
  border: 2px solid rgba(201,152,42,0.5);
  display: flex; align-items: center; justify-content: center;
  font-size: 31px;
  position: relative;
  z-index: 1;
}
.sparkle-ring {
  position: absolute;
  width: 80px; height: 80px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  animation: spinSlow 8s linear infinite;
}
.sparkle-ring .sp {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold-light);
  opacity: 0;
  animation: sparkPulse 2s ease-in-out infinite;
}
.sparkle-ring .sp:nth-child(1) { top:0;    left:50%; transform:translateX(-50%); animation-delay:0s; }
.sparkle-ring .sp:nth-child(2) { top:50%;  right:0;  transform:translateY(-50%); animation-delay:0.5s; }
.sparkle-ring .sp:nth-child(3) { bottom:0; left:50%; transform:translateX(-50%); animation-delay:1s; }
.sparkle-ring .sp:nth-child(4) { top:50%;  left:0;   transform:translateY(-50%); animation-delay:1.5s; }
.sparkle-ring .sp:nth-child(5) { top:12%;  left:12%; animation-delay:0.25s; width:4px; height:4px; }
.sparkle-ring .sp:nth-child(6) { top:12%;  right:12%;animation-delay:0.75s; width:4px; height:4px; }
.sparkle-ring .sp:nth-child(7) { bottom:12%;left:12%;animation-delay:1.25s; width:4px; height:4px; }
.sparkle-ring .sp:nth-child(8) { bottom:12%;right:12%;animation-delay:1.75s; width:4px; height:4px; }
@keyframes sparkPulse {
  0%, 100% { opacity:0; transform:scale(0.5) translateX(-50%); }
  50%       { opacity:1; transform:scale(1.2) translateX(-50%); }
}
.sparkle-ring .sp:nth-child(5),
.sparkle-ring .sp:nth-child(6),
.sparkle-ring .sp:nth-child(7),
.sparkle-ring .sp:nth-child(8) { animation-name: sparkPulsePlain; }
@keyframes sparkPulsePlain {
  0%,100% { opacity:0; transform:scale(0.5); }
  50%      { opacity:1; transform:scale(1.4); }
}
@keyframes spinSlow {
  from { transform:translate(-50%,-50%) rotate(0deg); }
  to   { transform:translate(-50%,-50%) rotate(360deg); }
}
.star-sparks { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.star-sparks .stk {
  position: absolute;
  font-size: 13px;
  color: var(--gold-light);
  opacity: 0;
  animation: floatStar 3s ease-in-out infinite;
}
.star-sparks .stk:nth-child(1) { top:10%; left:8%;   animation-delay:0s;   }
.star-sparks .stk:nth-child(2) { top:20%; right:10%; animation-delay:0.6s; }
.star-sparks .stk:nth-child(3) { bottom:15%;left:15%;animation-delay:1.2s; }
.star-sparks .stk:nth-child(4) { bottom:20%;right:8%;animation-delay:1.8s; }
.star-sparks .stk:nth-child(5) { top:50%; left:4%;   animation-delay:0.9s; font-size:9.5px; }
.star-sparks .stk:nth-child(6) { top:60%; right:4%;  animation-delay:2.1s; font-size:9.5px; }
@keyframes floatStar {
  0%       { opacity:0; transform:translateY(0)    scale(0.6); }
  30%,70%  { opacity:1; transform:translateY(-8px) scale(1); }
  100%     { opacity:0; transform:translateY(-18px) scale(0.6); }
}
.hl-number {
  font-family: var(--font-heading);
  font-size: 43px;
  font-weight: 700;
  color: var(--gold-light);
  line-height: 1.2;
  margin-bottom: 4px;
  text-shadow: 0 0 20px rgba(232,184,75,0.4);
  word-break: break-word;
}
.hl-label {
  font-family: var(--font-heading);
  font-size: 15.5px;
  color: #fff;
  font-weight: 600;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}
.hl-desc {
  font-size: 14.5px;
  color: rgba(255,255,255,0.55);
  line-height: 1.6;
  font-family: var(--font-accent);
  font-style: italic;
}
.hl-grid-bottom {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 20px;
  position: relative;
  z-index: 1;
}
.hl-card.wide { background: rgba(201,152,42,0.08); border-color: rgba(201,152,42,0.4); }
.hl-card.wide .hl-number { font-size: 33.5px; }
.icon-emoji { display: none; }


/* ============================================================
   12. AD SLOTS
   ============================================================ */
/* Leaderboard (728×90) */
.ad-banner-full {
  background: linear-gradient(90deg, #FFF6EE, #FFE4C1);
  border-top: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  padding: 14px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.ad-label {
  font-size: 12px;
  background: #ccc;
  color: #666;
  padding: 2px 7px;
  border-radius: 3px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.ad-placeholder {
  flex: 1;
  max-width: 728px;
  height: 90px;
  background: repeating-linear-gradient(45deg, #FFDDB0, #FFDDB0 10px, #FFD4A0 10px, #FFD4A0 20px);
  border: 2px dashed var(--gold);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 1px;
  font-family: var(--font-heading);
  overflow: hidden;
}
.ad-placeholder img { width: 100%; height: 100%; object-fit: cover; }

/* 4-column ad row (300×160 each) */
.content-with-ads {
  padding: 24px 20px;
  background: var(--cream);
  display: flex;
  justify-content: center;
}
.sidebar-ad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  width: 100%;
  max-width: 1280px;
}
.sidebar-ad-box {
  border: 2px dashed var(--gold);
  border-radius: var(--radius);
  background: linear-gradient(135deg, #FFF8F0, #FFE4C1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 10px;
  text-align: center;
  height: 160px;
  color: var(--gold);
  font-family: var(--font-heading);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 1px;
  overflow: hidden;
}
.sidebar-ad-box img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.sidebar-ad-box .ad-label { margin-bottom: 10px; }
.sidebar-ad-box i { font-size: 29px; margin-bottom: 10px; }

/* Footer billboard (970×90) */
.footer-ad {
  background: var(--cream-dark);
  padding: 18px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border-top: 2px solid var(--gold);
}
.footer-ad-box {
  width: 100%;
  max-width: 970px;
  height: 90px;
  background: repeating-linear-gradient(45deg, #FFDDB0, #FFDDB0 10px, #FFD4A0 10px, #FFD4A0 20px);
  border: 2px dashed var(--gold);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 1px;
  gap: 10px;
  overflow: hidden;
}
.footer-ad-box img { width: 100%; height: 100%; object-fit: cover; }


/* ============================================================
   13. PROFILE CARDS (browse / search lists)
   ============================================================ */
.profiles-section {
  padding: 32px 40px;
  background: var(--cream);
}
.section-heading {
  font-family: var(--font-heading);
  font-size: 26.5px;
  color: var(--maroon);
  margin-bottom: 6px;
  font-weight: 700;
}
.section-sub {
  font-size: 15.5px;
  color: var(--text-mid);
  margin-bottom: 20px;
  font-family: var(--font-accent);
  font-style: italic;
}
.gold-divider {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  border-radius: 2px;
  margin-bottom: 22px;
}
.profiles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}
.profile-card {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
}
.profile-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.profile-img {
  width: 100%;
  height: 180px;
  background: linear-gradient(135deg, #FFE4C1, #FFCB91);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.profile-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.profile-img .placeholder-icon { font-size: 77px; color: var(--gold); }
.profile-info { padding: 14px 16px; }
.profile-info h5 {
  font-family: var(--font-heading);
  font-size: 18px;
  color: var(--maroon);
  margin-bottom: 6px;
  font-weight: 700;
}
.profile-info p { font-size: 14.5px; color: var(--text-mid); line-height: 1.6; }
.profile-info .tag {
  display: inline-block;
  background: var(--cream-dark);
  color: var(--maroon);
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 700;
  margin-top: 6px;
  letter-spacing: 0.5px;
}
.btn-view-profile {
  display: block;
  margin: 0 16px 16px;
  text-align: center;
  background: var(--maroon);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 8px;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: 0.5px;
  transition: background var(--transition);
}
.btn-view-profile:hover { background: var(--maroon-light); color: #fff; }

/* Profile card for home page carousel (slim) */
.carousel-profile-card {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  overflow: hidden;
  margin: 0 10px;
}
.carousel-profile-card .profile-img { height: 140px; }
.carousel-profile-card .profile-info { padding: 10px 12px; }
.carousel-profile-card .profile-info h5 { font-size: 15.5px; }
.carousel-profile-card .profile-info p { font-size: 13px; }
.more-grid {
  border-top: 1px solid var(--border-light);
  padding: 0;
  text-align: center;
}
.more-grid a {
  display: block;
  padding: 9px;
  background: linear-gradient(to right, var(--maroon), var(--maroon-light));
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  transition: opacity var(--transition);
}
.more-grid a:hover { opacity: 0.9; color: #fff; }


/* ============================================================
   14. PROFILE DETAIL PAGE
   ============================================================ */
.profile-detail-wrap {
  padding: 28px 40px;
  background: var(--cream);
}
.profile-detail-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 30px;
  align-items: start;
}
.profile-photo-col { display: flex; flex-direction: column; gap: 12px; }
.profile-main-photo {
  width: 100%;
  aspect-ratio: 3/4;
  border-radius: 8px;
  overflow: hidden;
  border: 3px solid var(--gold);
  background: var(--cream-dark);
}
.profile-main-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.profile-thumb-row { display: flex; gap: 8px; }
.profile-thumb {
  width: 80px; height: 80px;
  border-radius: 4px;
  overflow: hidden;
  border: 2px solid var(--border-light);
  cursor: pointer;
  transition: border-color var(--transition);
}
.profile-thumb:hover, .profile-thumb.active { border-color: var(--gold); }
.profile-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

.profile-info-col { background: #fff; border: 1px solid var(--border-light); border-radius: 8px; overflow: hidden; }
.profile-info-header {
  background: var(--maroon);
  padding: 16px 24px;
  color: #fff;
}
.profile-info-header h2 { font-family: var(--font-heading); font-size: 26.5px; color: var(--gold-light); }
.profile-info-header .member-id { font-size: 15.5px; color: rgba(255,255,255,0.7); margin-top: 4px; }

.profile-info-body { padding: 20px 24px; }
.profile-section-title {
  font-family: var(--font-heading);
  font-size: var(--fs-section-heading);
  font-weight: 700;
  color: var(--maroon);
  border-bottom: 2px solid var(--gold);
  padding-bottom: 6px;
  margin: 20px 0 14px;
  letter-spacing: 0.5px;
}
.profile-info-table { width: 100%; border-collapse: collapse; }
.profile-info-table td {
  padding: 7px 0;
  font-size: 17px;
  vertical-align: top;
  border-bottom: 1px dashed var(--border-light);
}
.profile-info-table td:last-child { border-bottom: none; }
.profile-info-table .label {
  color: var(--maroon);
  font-weight: 700;
  width: 40%;
  padding-right: 12px;
}
.profile-info-table .value { color: var(--text-dark); }

/* Inactive profile (no photo, limited info) */
.profile-inactive-notice {
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: var(--radius);
  padding: 14px 20px;
  margin-bottom: 20px;
  font-size: 17px;
  color: #856404;
}


/* ============================================================
   15. SUCCESS STORIES
   ============================================================ */
.success-section {
  background: linear-gradient(135deg, #C62828 0%, #8B0000 100%);
  padding: 44px 40px;
  text-align: center;
  color: #fff;
}
.success-section h2 {
  font-family: var(--font-heading);
  font-size: 33.5px;
  color: var(--gold-light);
  margin-bottom: 6px;
}
.success-section p.sub {
  font-family: var(--font-accent);
  font-style: italic;
  color: rgba(255,255,255,0.75);
  margin-bottom: 30px;
  font-size: 19px;
}
.success-cards { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; }
.success-card {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(201,152,42,0.4);
  border-radius: 10px;
  padding: 24px 20px;
  width: 240px;
  text-align: center;
}
.couple-icon { font-size: 43px; margin-bottom: 12px; }
.success-card h5 {
  font-family: var(--font-heading);
  font-size: 18px;
  color: var(--gold-light);
  margin-bottom: 8px;
}
.success-card p {
  font-size: 15.5px;
  color: rgba(255,255,255,0.75);
  line-height: 1.6;
  font-family: var(--font-accent);
  font-style: italic;
}
.success-card .couple-photo {
  width: 80px; height: 80px;
  border-radius: 50%;
  margin: 0 auto 14px;
  border: 3px solid var(--gold);
  overflow: hidden;
}
.success-card .couple-photo img { width: 100%; height: 100%; object-fit: cover; }


/* ============================================================
   16. FOOTER
   ============================================================ */
footer {
  background: var(--maroon-dark);
  color: rgba(255,255,255,0.8);
  padding: 40px 60px 20px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 30px;
}
.footer-brand h3 {
  font-family: var(--font-heading);
  font-size: 21.5px;
  color: var(--gold-light);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer-brand p { font-size: 15.5px; line-height: 1.7; color: rgba(255,255,255,0.65); }
.footer-brand .footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  font-size: 15.5px;
  color: rgba(255,255,255,0.65);
}
.footer-brand .footer-contact-item i { color: var(--gold); margin-top: 3px; flex-shrink: 0; }
.footer-col h4 {
  font-family: var(--font-heading);
  font-size: 17px;
  color: var(--gold-light);
  margin-bottom: 14px;
  font-weight: 600;
}
.footer-col ul li { margin-bottom: 8px; }
.footer-col ul li a {
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  font-size: 15.5px;
  transition: color var(--transition);
  display: flex;
  align-items: center;
  gap: 6px;
}
.footer-col ul li a::before { content: '\f105'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 13px; }
.footer-col ul li a:hover { color: var(--gold-light); }
.footer-payment-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.footer-payment-qr img {
  width: 100%;
  max-width: 220px;
  height: auto;
  border-radius: 8px;
  border: 2px solid var(--gold);
  background: #fff;
  cursor: zoom-in;
  pointer-events: auto; /* site-wide `img{pointer-events:none}` copy-guard would otherwise block this click */
  transition: transform .2s;
}
.footer-payment-qr img:hover { transform: scale(1.03); }
.footer-payment-qr-hint {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  display: flex;
  align-items: center;
  gap: 5px;
}
.footer-payment-qr-hint i { color: var(--gold); }

/* QR zoom overlay */
.qr-zoom-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 99999;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  padding: 30px;
}
.qr-zoom-overlay.show { display: flex; }
.qr-zoom-overlay img {
  max-width: min(90vw, 420px);
  max-height: 85vh;
  width: auto;
  height: auto;
  border-radius: 10px;
  border: 4px solid var(--gold);
  background: #fff;
  box-shadow: var(--shadow-md);
}
.qr-zoom-close {
  position: absolute;
  top: 18px;
  right: 24px;
  color: #fff;
  font-size: 43px;
  line-height: 1;
  cursor: pointer;
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  font-size: 14.5px;
  color: rgba(255,255,255,0.4);
}
.footer-starfield-seal { margin-top: 14px; }

/* Admin footer (minimal) */
footer.footer-adm {
  background: var(--maroon-dark);
  padding: 14px 30px;
  text-align: center;
  font-size: 14.5px;
  color: rgba(255,255,255,0.5);
}


/* ============================================================
   17. MEMBER DASHBOARD LAYOUT
   ============================================================ */
.dash-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: calc(100vh - 180px);
  background: var(--cream);
}

/* Sidebar */
.dash-sidebar {
  background: var(--maroon-dark);
  padding: 24px 0;
  position: sticky;
  top: 0;
  height: calc(100vh - 180px);
  overflow-y: auto;
}
.dash-profile-box {
  text-align: center;
  padding: 20px 16px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 8px;
}
.dash-profile-box .profile-pic {
  width: 90px; height: 90px;
  border-radius: 50%;
  border: 3px solid var(--gold);
  margin: 0 auto 12px;
  overflow: hidden;
  background: var(--cream-dark);
}
.dash-profile-box .profile-pic img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.dash-profile-box h5 {
  font-family: var(--font-heading);
  font-size: 17px;
  color: var(--gold-light);
  margin-bottom: 4px;
}
.dash-profile-box .member-id { font-size: 13px; color: rgba(255,255,255,0.55); }
.dash-status-badge {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.dash-status-badge.active   { background: rgba(40,167,69,0.2); color: #5cb85c; border: 1px solid #5cb85c; }
.dash-status-badge.inactive { background: rgba(255,193,7,0.2); color: #ffc107; border: 1px solid #ffc107; }
.dash-status-badge.rejected { background: rgba(220,53,69,0.2); color: #dc3545; border: 1px solid #dc3545; }
.dash-status-badge.parichayaVedika { background: rgba(0,123,255,0.2); color: #4dabf7; border: 1px solid #4dabf7; }

.dash-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  color: rgba(255,255,255,0.75);
  font-size: 17px;
  font-weight: 600;
  transition: background var(--transition), color var(--transition);
  border-left: 3px solid transparent;
}
.dash-nav a i { width: 18px; text-align: center; font-size: 18px; color: var(--gold); }
.dash-nav a:hover,
.dash-nav a.active {
  background: rgba(255,255,255,0.06);
  color: var(--gold-light);
  border-left-color: var(--gold);
}
.dash-nav .divider { border-top: 1px solid rgba(255,255,255,0.08); margin: 8px 0; }
.dash-login-info {
  padding: 16px 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  line-height: 1.8;
}

/* Dashboard content area */
.dash-content { padding: 28px 32px; background: var(--cream); }
.dash-page-title {
  font-family: var(--font-heading);
  font-size: 24px;
  color: var(--maroon);
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 10px;
}
.dash-page-title i { color: var(--gold); }

/* Info card (view mode) */
.info-card {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 24px;
}
.info-card-header {
  background: var(--maroon);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.info-card-header h4 {
  font-family: var(--font-heading);
  font-size: 18px;
  color: var(--gold-light);
  font-weight: 600;
}
.info-card-header .btn-edit {
  background: var(--gold);
  color: #fff;
  border: none;
  padding: 5px 14px;
  border-radius: 4px;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition);
}
.info-card-header .btn-edit:hover { background: var(--gold-light); color: var(--text-dark); }
.info-card-body { padding: 16px 20px; }
.info-row {
  display: flex;
  padding: 8px 0;
  border-bottom: 1px dashed var(--border-light);
  font-size: 17px;
}
.info-row:last-child { border-bottom: none; }
.info-label { color: var(--maroon); font-weight: 700; width: 200px; flex-shrink: 0; }
.info-value { color: var(--text-dark); flex: 1; }

/* Package info card */
.package-card {
  background: #fff;
  border: 2px solid var(--gold);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 24px;
}
.package-card-header {
  background: var(--maroon);
  padding: 14px 20px;
  text-align: center;
}
.package-card-header h3 {
  font-family: var(--font-heading);
  font-size: 21.5px;
  color: var(--gold-light);
  text-transform: uppercase;
}
.package-card-body { padding: 20px; }
.package-expiry-bar { margin: 16px 0; }
.package-expiry-bar label { font-size: 14.5px; color: var(--maroon); font-weight: 700; display: block; margin-bottom: 6px; }
.progress-track { height: 10px; background: var(--cream-dark); border-radius: 5px; overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--maroon), var(--gold)); border-radius: 5px; transition: width 0.4s ease; }


/* ============================================================
   18. MEMBER INFO PAGES (forms / view)
   ============================================================ */
.form-section {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 24px;
}
.form-section-header {
  background: var(--maroon);
  padding: 12px 20px;
  font-family: var(--font-heading);
  font-size: 18px;
  color: var(--gold-light);
  font-weight: 600;
}
.form-section-body { padding: 20px; }

.form-row { display: flex; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.form-group { display: flex; flex-direction: column; gap: 5px; flex: 1 1 240px; min-width: 0; }
.form-group.full { flex: 1 1 100%; }
.form-group label {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--maroon);
  letter-spacing: 0.3px;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group input[type="tel"],
.form-group select,
.form-group textarea {
  border: 1px solid var(--border-light) !important;
  border-radius: 4px;
  padding: 9px 12px;
  font-size: 17px;
  color: var(--text-dark);
  background: #fff;
  outline: none;
  box-shadow: none !important;
  transition: border-color var(--transition);
  width: 100%;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--gold) !important; }
.form-group select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C62828' stroke-width='2' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
.form-group textarea { resize: vertical; min-height: 90px; }

.btn-submit {
  background: var(--maroon);
  color: #fff;
  border: none;
  padding: 11px 32px;
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: background var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-submit:hover { background: var(--maroon-light); }
.btn-secondary-action {
  background: none;
  color: var(--maroon);
  border: 2px solid var(--maroon);
  padding: 9px 24px;
  border-radius: 4px;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-secondary-action:hover { background: var(--maroon); color: #fff; }

/* Photo upload */
.photo-upload-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; }
.photo-slot {
  border: 2px dashed var(--gold);
  border-radius: 6px;
  aspect-ratio: 3/4;
  background: var(--cream-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--transition);
  position: relative;
}
.photo-slot:hover { border-color: var(--maroon); }
.photo-slot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.photo-slot-placeholder { font-size: 43px; color: var(--gold); opacity: 0.6; }
.photo-slot input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* OTP form */
.otp-box {
  max-width: 420px;
  margin: 40px auto;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 36px 30px;
  text-align: center;
}
.otp-box h2 { font-family: var(--font-heading); font-size: 24px; color: var(--maroon); margin-bottom: 8px; }
.otp-box p { font-size: 17px; color: var(--text-mid); margin-bottom: 24px; }
.otp-input {
  font-size: 33.5px !important;
  text-align: center;
  letter-spacing: 10px;
  font-weight: 700;
  border: 2px solid var(--gold) !important;
  border-radius: 6px !important;
  padding: 12px !important;
  width: 100%;
}
.otp-input:focus { border-color: var(--maroon) !important; }
.btn-resend-otp {
  background: none;
  border: none;
  color: var(--maroon);
  font-size: 15.5px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 14px;
  text-decoration: underline;
}


/* ── Shared section header pill — dark badge sized to its own text, used to
   introduce a group of fields/details (member details, registration forms,
   and every member-side .content-card-header — matched by selector here so
   those 16 pages need no markup change). Page-specific layout concerns (grid
   placement, spacing before/after) stay in each page's own <style>; only the
   visual look lives here. ── */
.vl-section-hdr,
.content-card-header h2 {
  display: inline-block;
  font-family: var(--font-heading);
  color: var(--cream);
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  background: var(--maroon-dark);
  padding: 6px 14px;
  border-radius: 6px;
}
.vl-section-hdr i,
.content-card-header h2 i { color: var(--gold); }
.vl-section-hdr { margin: 14px 0; }

/* ── Shared top bar — used by both the admin panel (incMainHeaderAdm.php)
   and the member area (incMemDashTop.php / mem-dashboard.php) so both
   logins present one consistent header instead of two different designs. ── */
.adm-topbar {
  background: var(--cream);
  border-bottom: 1px solid var(--cream-dark);
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
  height: 64px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  gap: 16px;
}
.adm-topbar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.adm-topbar-logo img { height: 48px; }
.adm-topbar-logo .adm-site-name {
  font-family: var(--font-heading);
  font-size: 15.5px;
  color: var(--maroon);
  letter-spacing: .5px;
  white-space: nowrap;
}
.adm-panel-label {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-mid);
  margin-left: 4px;
}
.adm-topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.adm-home-link {
  color: var(--text-mid);
  font-size: 15.5px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color .15s;
}
.adm-home-link:hover { color: var(--maroon); }

/* User chip + dropdown */
.adm-user-chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--cream-dark);
  border: 1px solid var(--border-light);
  border-radius: 20px;
  padding: 4px 11px 4px 5px;
  cursor: pointer;
  color: var(--text-dark);
  font-family: var(--font-body);
  font-size: 15.5px;
  user-select: none;
  transition: background .15s;
}
.adm-user-chip:hover,
.adm-user-chip:focus-within { background: var(--cream-dark); }
.adm-user-initial {
  width: 26px;
  height: 26px;
  background: var(--gold);
  color: var(--maroon-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.adm-user-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-user-caret { font-size: 12px; opacity: .65; }
.adm-user-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #fff;
  border: 1px solid var(--cream-dark);
  border-top: 3px solid var(--gold);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  min-width: 190px;
  z-index: 9999;
  overflow: hidden;
}
.adm-user-chip:hover .adm-user-dropdown,
.adm-user-chip:focus-within .adm-user-dropdown { display: block; }
.adm-user-dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  color: var(--text-dark);
  font-size: 15.5px;
  text-decoration: none;
  font-family: var(--font-body);
  transition: background .12s, color .12s;
}
.adm-user-dropdown a:hover { background: var(--cream); color: var(--maroon); }
.adm-user-dropdown a i { color: var(--gold); width: 16px; text-align: center; }
.adm-user-dropdown .adm-dd-divider { margin: 4px 0; border: none; border-top: 1px solid var(--cream-dark); }

/* Dark variant — same .adm-topbar structure/markup, member area only.
   The dropdown panel itself stays light in both variants for readability. */
.adm-topbar-dark {
  background: var(--maroon-dark);
  border-bottom: none;
  box-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.adm-topbar-dark .adm-topbar-logo .adm-site-name { color: var(--gold-light); }
.adm-topbar-dark .adm-panel-label { color: rgba(255,255,255,.55); }
.adm-topbar-dark .adm-home-link { color: rgba(255,255,255,.75); }
.adm-topbar-dark .adm-home-link:hover { color: #fff; }
.adm-topbar-dark .adm-user-chip { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color: #fff; }
.adm-topbar-dark .adm-user-chip:hover,
.adm-topbar-dark .adm-user-chip:focus-within { background: rgba(255,255,255,.18); }

@media (max-width: 1024px) {
  .adm-topbar { padding: 0 14px; gap: 10px; }
  .adm-topbar-logo img { height: 40px; }
}
@media (max-width: 640px) {
  .adm-topbar { height: 56px; padding: 0 10px; gap: 8px; }
  .adm-topbar-logo img { height: 34px; }
  .adm-topbar-logo .adm-site-name { display: none; }
  .adm-panel-label { display: none; }
  .adm-home-link { font-size: 0; gap: 0; }
  .adm-home-link i { font-size: 18px; }
  .adm-user-name { display: none; }
  .adm-user-chip { padding: 4px 8px 4px 4px; }
}

/* Admin nav bar */
nav.adm-nav {
  background: var(--maroon);
  display: flex;
  flex-wrap: wrap;
  padding: 0 16px;
  position: relative;
  z-index: 100;
}
nav.adm-nav > .adm-nav-item { position: relative; }
nav.adm-nav > .adm-nav-item > a {
  display: block;
  padding: 13px 18px;
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--transition);
}
nav.adm-nav > .adm-nav-item > a:hover,
nav.adm-nav > .adm-nav-item.open > a { background: rgba(255,255,255,0.12); color: var(--gold-light); }
nav.adm-nav > .adm-nav-item > a i { margin-left: 4px; font-size: 12px; }

/* Admin dropdown menus */
.adm-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%; left: 0;
  background: var(--maroon-dark);
  min-width: 220px;
  box-shadow: var(--shadow-md);
  border-top: 2px solid var(--gold);
  z-index: 500;
}
.adm-nav-item:hover > .adm-dropdown-menu { display: block; }
.adm-dropdown-menu a {
  display: block;
  padding: 10px 18px;
  color: rgba(255,255,255,0.8);
  font-size: 15.5px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
}
.adm-dropdown-menu a:last-child { border-bottom: none; }
.adm-dropdown-menu a:hover { background: rgba(255,255,255,0.08); color: var(--gold-light); }
.adm-dropdown-menu .menu-divider { border-top: 1px solid rgba(255,255,255,0.15); margin: 4px 0; }


/* ============================================================
   20. ADMIN MEMBER LISTS (DataTables)
   ============================================================ */
.admin-list-wrap { background: #f9f4ee; padding: 20px; }

/* Action buttons on each member row */
.bride-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.bride-btns a,
.bride-btns button {
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 14.5px;
  font-weight: 700;
  color: #fff !important;
  text-decoration: none;
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: opacity var(--transition);
  letter-spacing: 0.3px;
}
.bride-btns a:hover, .bride-btns button:hover { opacity: 0.85; }
.btn-inactivate  { background: #6c757d !important; }
.btn-activate    { background: #28a745 !important; }
.btn-reject      { background: #dc3545 !important; }
.btn-vedika      { background: #fd7e14 !important; }
.btn-update      { background: #e67e22 !important; }
.btn-package     { background: #6610f2 !important; }
.btn-type        { background: #17a2b8 !important; }
.btn-mobswap     { background: #6f42c1 !important; }
.btn-photo       { background: #0dcaf0 !important; }
.btn-addnl       { background: #20c997 !important; }
.btn-pdf         { background: #007bff !important; }
.btn-delete      { background: #b02a37 !important; }

/* DataTables overrides */
table.dataTable { width: 100% !important; border-collapse: collapse; font-size: 17px; }
table.dataTable thead th {
  background: var(--maroon) !important;
  color: #fff !important;
  padding: 12px 16px;
  font-family: var(--font-heading);
  font-size: 15.5px;
  font-weight: 600;
  border: none !important;
}
table.dataTable tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: top;
  color: var(--text-dark);
}
table.dataTable tbody tr:hover { background: rgba(198,40,40,0.04); }
table.dataTable tbody tr:nth-child(even) { background: #fdf8f0; }
table.dataTable tbody tr:nth-child(even):hover { background: rgba(198,40,40,0.06); }

.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--gold) !important;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 15.5px;
  margin-left: 8px;
}
.dataTables_wrapper .dataTables_filter input:focus { border-color: var(--maroon) !important; outline: none; }
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--gold) !important;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 15.5px;
}
.dataTables_paginate .paginate_button {
  padding: 5px 10px !important;
  border-radius: 4px !important;
  margin: 0 2px !important;
  font-size: 15.5px !important;
  color: var(--maroon) !important;
  border: 1px solid var(--border-light) !important;
  background: #fff !important;
  cursor: pointer;
}
.dataTables_paginate .paginate_button.current {
  background: var(--maroon) !important;
  color: #fff !important;
  border-color: var(--maroon) !important;
}
.dataTables_paginate .paginate_button:hover:not(.disabled) {
  background: var(--cream-dark) !important;
  color: var(--maroon) !important;
}
.dataTables_info { font-size: 15.5px; color: var(--text-mid); }

/* Admin dashboard stat cards */
.adm-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 24px;
}
.adm-stat-card {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  border-top: 4px solid var(--gold);
}
.adm-stat-card .num {
  font-family: var(--font-heading);
  font-size: 38.5px;
  color: var(--maroon);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 6px;
}
.adm-stat-card .lbl { font-size: 15.5px; color: var(--text-mid); font-weight: 600; }
.adm-stat-card.active-stat { border-top-color: #28a745; }
.adm-stat-card.inactive-stat { border-top-color: #ffc107; }
.adm-stat-card.rejected-stat { border-top-color: #dc3545; }
.adm-stat-card.vedika-stat { border-top-color: #4dabf7; }


/* ============================================================
   21. REGISTRATION & AUTH FORMS
   ============================================================ */
/* Public registration (join.php, joinus.php) */
.register-section {
  background: url('../images/vishwa-banner-bottom1.jpg') no-repeat top center;
  background-size: cover;
  min-height: 560px;
  position: relative;
}
.register-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(34,34,34, 0.45);
}
.register-box-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  padding: 40px;
  min-height: 560px;
  align-items: center;
}
.register-box {
  background: rgba(255,246,238, 0.97);
  border: 2px solid var(--gold);
  border-radius: 8px;
  padding: 28px 24px;
  width: 380px;
  max-width: 100%;
}
.register-box .hdrtxt {
  font-family: var(--font-heading);
  font-size: 21.5px;
  text-align: center;
  color: var(--maroon);
  font-weight: 700;
  margin-bottom: 4px;
}
.register-box .hdrtxt2 {
  font-size: 15.5px;
  text-align: center;
  color: var(--text-mid);
  font-style: italic;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 16px;
}

/* Full registration form (joinus.php) — multi-section */
.joinus-wrap { background: var(--cream); padding: 28px 40px; }
.joinus-section { margin-bottom: 28px; }
.joinus-section-title {
  font-family: var(--font-heading);
  font-size: var(--fs-section-heading);
  color: var(--maroon);
  font-weight: 700;
  border-left: 4px solid var(--gold);
  padding-left: 12px;
  margin-bottom: 18px;
}

/* Availability check (mobile) */
.availability-msg { font-size: 15.5px; margin-top: 5px; font-weight: 600; }
.availability-msg.taken  { color: #dc3545; }
.availability-msg.avail  { color: #28a745; }

/* Terms checkbox styled */
.terms-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15.5px;
  color: var(--text-mid);
  line-height: 1.5;
}
.terms-check input[type="checkbox"] { margin-top: 2px; accent-color: var(--maroon); width: 16px; height: 16px; flex-shrink: 0; }
.terms-check a { color: var(--maroon); font-weight: 700; text-decoration: underline; }


/* ============================================================
   22. SEARCH FORMS
   ============================================================ */
.search-page-wrap { padding: 24px 40px; background: var(--cream); }
.search-filter-box {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 24px;
}
.search-filter-box h3 {
  font-family: var(--font-heading);
  font-size: 19px;
  color: var(--maroon);
  margin-bottom: 16px;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 8px;
}
.search-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.search-actions { margin-top: 18px; display: flex; gap: 12px; flex-wrap: wrap; }
.btn-search {
  background: var(--maroon);
  color: #fff;
  border: none;
  padding: 10px 28px;
  border-radius: 4px;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background var(--transition);
}
.btn-search:hover { background: var(--maroon-light); }
.btn-reset {
  background: var(--cream-dark);
  color: var(--text-mid);
  border: 1px solid var(--border-light);
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition);
}
.btn-reset:hover { background: var(--border-light); }
.search-results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  font-size: 17px;
  color: var(--text-mid);
}
.search-results-header strong { color: var(--maroon); font-family: var(--font-heading); }


/* ============================================================
   23. PACKAGE CARDS (packages.php)
   ============================================================ */
.packages-wrap { padding: 32px 40px; background: var(--cream); }
.packages-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pkg-card {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
}
.pkg-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.pkg-card.featured { border: 2px solid var(--gold); }
.pkg-card-header {
  background: var(--maroon);
  padding: 20px;
  text-align: center;
}
.pkg-card.featured .pkg-card-header { background: linear-gradient(135deg, var(--maroon), var(--maroon-light)); }
.pkg-card-header h4 {
  font-family: var(--font-heading);
  font-size: 21.5px;
  color: var(--gold-light);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.pkg-card-header .price {
  font-family: var(--font-heading);
  font-size: 38.5px;
  color: #fff;
  font-weight: 700;
  margin-top: 8px;
}
.pkg-card-header .price span { font-size: 19px; }
.pkg-card-body { padding: 20px; }
.pkg-feature { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px dashed var(--border-light); font-size: 17px; color: var(--text-dark); }
.pkg-feature:last-child { border-bottom: none; }
.pkg-feature i { color: var(--gold); font-size: 17px; width: 16px; }
.pkg-cta { padding: 0 20px 20px; }
.pkg-cta a {
  display: block;
  text-align: center;
  background: var(--maroon);
  color: #fff;
  padding: 12px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 17px;
  transition: background var(--transition);
}
.pkg-cta a:hover { background: var(--maroon-light); color: #fff; }


/* ============================================================
   24. PARICHAYA VEDIKA PAGE
   ============================================================ */
.vedika-page-wrap { background: var(--cream); padding: 32px 40px; }
.vedika-banner-images { display: flex; flex-direction: column; gap: 20px; max-width: 860px; margin: 0 auto; }
.vedika-banner-images img { border-radius: 8px; border: 2px solid var(--gold); box-shadow: var(--shadow-md); }
.vedika-info-box {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 24px;
  margin-top: 24px;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
.vedika-info-box h3 { font-family: var(--font-heading); font-size: 24px; color: var(--maroon); margin-bottom: 12px; }
.vedika-info-box p { font-size: 17px; color: var(--text-mid); line-height: 1.7; }


/* ============================================================
   25. ALERT & STATUS BANNERS
   ============================================================ */
/* Inactive member alert (shown under header) */
.inac-mem-alrt {
  background: #fff3cd;
  border-bottom: 2px solid #ffc107;
  padding: 10px 20px;
  text-align: center;
  font-size: 17px;
  color: #856404;
  font-weight: 600;
}
.inac-mem-alrt a { color: var(--maroon); text-decoration: underline; font-weight: 700; }

/* Flash messages (success/error) */
.alert-box {
  padding: 12px 18px;
  border-radius: var(--radius);
  margin-bottom: 16px;
  font-size: 17px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.alert-success { background: #d4edda; border: 1px solid #c3e6cb; color: #155724; }
.alert-error   { background: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; }
.alert-info    { background: #d1ecf1; border: 1px solid #bee5eb; color: #0c5460; }
.alert-warning { background: #fff3cd; border: 1px solid #ffc107; color: #856404; }


/* ============================================================
   26. PAGINATION
   ============================================================ */
.pagination-wrap { display: flex; justify-content: center; padding: 24px 0; flex-wrap: wrap; gap: 4px; }
.pagination-wrap .page-item {
  display: inline-block;
}
.pagination-wrap .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  background: #fff;
  color: var(--maroon);
  font-size: 15.5px;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--transition);
}
.pagination-wrap .page-link:hover { background: var(--cream-dark); border-color: var(--gold); }
.pagination-wrap .page-item.active .page-link {
  background: var(--maroon);
  color: #fff;
  border-color: var(--maroon);
}
.pagination-wrap .page-item.disabled .page-link { opacity: 0.4; pointer-events: none; }


/* ============================================================
   27. SLICK SLIDER OVERRIDES
   ============================================================ */
/* Keep Slick functional, update colours to new theme */
.premium-list .slick-slider { border: 1px solid var(--border-light); padding: 16px 0; border-radius: 6px; background: #fff; }
.slick-slide { margin: 0 10px; }
.slick-prev, .slick-next {
  background: var(--cream-dark) !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  z-index: 10;
}
.slick-prev { left: 6px !important; }
.slick-next { right: 6px !important; }
.slick-prev:before {
  font-family: "Font Awesome 6 Free" !important;
  content: "\f104" !important;
  color: var(--maroon) !important;
  font-weight: 900;
  font-size: 17px;
}
.slick-next:before {
  font-family: "Font Awesome 6 Free" !important;
  content: "\f105" !important;
  color: var(--maroon) !important;
  font-weight: 900;
  font-size: 17px;
}
.slick-prev:hover, .slick-next:hover { background: var(--gold) !important; }
.slick-prev:hover::before, .slick-next:hover::before { color: #fff !important; }
.promotionl_slide { border: none !important; padding: 0 !important; }


/* ============================================================
   28. BACK-TO-TOP BUTTON
   ============================================================ */
.back-to-top {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 44px; height: 44px;
  background: var(--maroon);
  color: #fff;
  border: none;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 21.5px;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: background var(--transition), transform var(--transition);
  z-index: 999;
  text-decoration: none;
}
.back-to-top:hover { background: var(--maroon-light); transform: translateY(-2px); color: #fff; }
.back-to-top.visible { display: flex; }


/* ============================================================
   29. UTILITY CLASSES
   ============================================================ */
.pad_t50  { padding-top:    50px !important; }
.pad_t30  { padding-top:    30px !important; }
.pad_b40  { padding-bottom: 40px !important; }
.pad_r10  { padding-right:  10px !important; }
.pad_l10  { padding-left:   10px !important; }
.pad_l30  { padding-left:   30px !important; }
.pad0     { padding: 0 !important; }
.marb_b20 { margin-bottom: 20px !important; }

.text-center { text-align: center !important; }
.text-left   { text-align: left !important; }
.text-right  { text-align: right !important; }
.fw-bold     { font-weight: 700 !important; }
.text-maroon { color: var(--maroon) !important; }
.text-gold   { color: var(--gold) !important; }
.text-muted  { color: var(--text-mid) !important; }

.img-fluid { max-width: 100%; height: auto; }
.img-responsive { max-width: 100%; height: auto; }

.d-none   { display: none !important; }
.d-flex   { display: flex !important; }
.d-block  { display: block !important; }
.w-100    { width: 100% !important; }

/* Legacy Bootstrap-like classes used in existing PHP templates */
.container-fluid { width: 100%; padding: 0 15px; }
.row { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.no-gutters { margin: 0; }
.no-gutters > [class*="col-"] { padding: 0; }

.col-md-1  { flex: 0 0  8.333%; max-width:  8.333%; padding: 0 15px; }
.col-md-2  { flex: 0 0 16.666%; max-width: 16.666%; padding: 0 15px; }
.col-md-3  { flex: 0 0 25%;     max-width: 25%;     padding: 0 15px; }
.col-md-4  { flex: 0 0 33.333%; max-width: 33.333%; padding: 0 15px; }
.col-md-5  { flex: 0 0 41.666%; max-width: 41.666%; padding: 0 15px; }
.col-md-6  { flex: 0 0 50%;     max-width: 50%;     padding: 0 15px; }
.col-md-7  { flex: 0 0 58.333%; max-width: 58.333%; padding: 0 15px; }
.col-md-8  { flex: 0 0 66.666%; max-width: 66.666%; padding: 0 15px; }
.col-md-9  { flex: 0 0 75%;     max-width: 75%;     padding: 0 15px; }
.col-md-10 { flex: 0 0 83.333%; max-width: 83.333%; padding: 0 15px; }
.col-md-11 { flex: 0 0 91.666%; max-width: 91.666%; padding: 0 15px; }
.col-md-12 { flex: 0 0 100%;    max-width: 100%;    padding: 0 15px; }

.col-xs-12 { flex: 0 0 100%; max-width: 100%; padding: 0 15px; }

.mb-2 { margin-bottom: 8px !important; }
.mb-3 { margin-bottom: 16px !important; }
.mb-4 { margin-bottom: 24px !important; }
.mt-2 { margin-top: 8px !important; }
.p-2  { padding: 8px !important; }
.p-4  { padding: 24px !important; }
.px-3 { padding-left: 12px !important; padding-right: 12px !important; }
.py-2 { padding-top: 8px !important; padding-bottom: 8px !important; }

.float-right { float: right !important; }
.float-left  { float: left !important; }
.clearfix::after { content: ''; display: table; clear: both; }

.shadow-sm { box-shadow: var(--shadow-sm); }
.bg-white  { background: #fff !important; }
.border    { border: 1px solid var(--border-light) !important; }
.rounded-0 { border-radius: 0 !important; }


/* ============================================================
   30. PRINT STYLES  (admin PDF generation)
   ============================================================ */
@media print {
  header, footer, nav, .adm-nav, .dash-sidebar, .back-to-top,
  .announcement-bar, .event-banner, .features-section,
  .highlighters-section, .ad-banner-full, .content-with-ads, .footer-ad { display: none !important; }
  body { background: #fff; color: #000; font-size: 14pt; }
  .dash-content, .profile-detail-wrap { padding: 0; }
  .profile-info-table td, .info-row { border-color: #ccc; }
  .profile-info-header { background: #C62828 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}


/* ============================================================
   31. RESPONSIVE — TABLET (≤ 1024px)
   ============================================================ */
@media (max-width: 1024px) {
  /* Top bar */
  .top-bar { padding: 12px 20px; gap: 12px; }
  .logo-icon img { height: 62px; }
  .logo-text h1 { font-size: 20.5px; }
  .tagline-center { font-size: 15.5px; padding: 4px 12px; }
  .top-actions { gap: 14px; }
  .top-link { font-size: 14.5px; }

  /* Nav */
  nav.main-nav a { padding: 12px 14px; font-size: 13px; letter-spacing: 0.8px; }

  /* Hero */
  .hero { min-height: 420px; }
  .hero-content { padding: 30px 24px; max-width: 380px; }
  .hero-content h1 { font-size: 41px; }
  .hero-content h2 { font-size: 26.5px; }

  /* Stats bar */
  .stat-item { padding: 0 24px; gap: 10px; }
  .stat-text strong { font-size: 21.5px; }

  /* Features */
  .features-section { padding: 20px; flex-wrap: wrap; }
  .feature-item { padding: 12px 16px; border-right: none; border-bottom: 1px solid var(--border-light); width: 50%; flex: none; }
  .feature-item:nth-child(3), .feature-item:nth-child(4) { border-bottom: none; }

  /* Highlighters */
  .highlighters-section { padding: 40px 20px; }
  .hl-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .hl-grid-bottom { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .hl-grid-bottom .hl-card:last-child { grid-column: 1 / -1; }

  /* Ads */
  .ad-banner-full { padding: 12px 20px; }
  .content-with-ads { padding: 20px 16px; }
  .sidebar-ad { grid-template-columns: repeat(2, 1fr); gap: 14px; }

  /* Profiles */
  .profiles-grid { grid-template-columns: repeat(3, 1fr); }
  .profile-detail-grid { grid-template-columns: 220px 1fr; gap: 20px; }

  /* Search */
  .search-grid { grid-template-columns: repeat(3, 1fr); }

  /* Dashboard */
  .dash-layout { grid-template-columns: 220px 1fr; }
  .dash-content { padding: 20px; }

  /* Admin */
  .adm-stats-grid { grid-template-columns: repeat(2, 1fr); }

  /* Packages */
  .packages-grid { grid-template-columns: repeat(2, 1fr); }

  /* Footer */
  footer { padding: 32px 24px 16px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }

  /* Event banner */
  .event-banner-inner { padding: 14px 20px; flex-wrap: wrap; gap: 14px; }
  .event-center { width: 100%; order: 3; }
  .event-right { order: 4; width: 100%; align-items: flex-start; flex-direction: row; }

  /* Col overrides for medium screens */
  .col-md-3 { flex: 0 0 50%; max-width: 50%; }
  .col-md-4 { flex: 0 0 50%; max-width: 50%; }
}


/* ============================================================
   32. RESPONSIVE — MOBILE (≤ 640px)
   ============================================================ */
@media (max-width: 640px) {
  /* Ticker */
  .announcement-bar .ticker-label { font-size: 12px; padding: 2px 8px; }
  .ticker-items { font-size: 14.5px; }

  /* Top bar */
  /* align-items:flex-start (overriding the base :center) — .top-bar is now
     taller than .logo-wrap since .mini-login wraps onto its own full-width
     line below logo+hamburger+Register; without this the logo vertically
     centers against that full height and ends up floating beside the
     Member ID field instead of staying pinned to the top row. */
  .top-bar { padding: 10px 16px; flex-wrap: wrap; align-items: flex-start; }
  .logo-wrap { padding-top: 2px; }
  .logo-wrap { flex: 1; min-width: 0; }
  /* This logo file is a wide horizontal lockup (532x78, ~6.8:1) — at a fixed
     height:48px it naturally wants to render ~327px wide, which would eat
     most of a phone screen. max-height + width/height:auto scales it
     proportionally without distortion. Sized as large as fits alongside
     hamburger (44px) + Register (~92px) + gaps without crowding them —
     comfortable from ~355px up; a tighter cap kicks in below that for
     narrow phones (iPhone SE class, ~320-360px) where there isn't enough
     row width to spare. */
  .logo-icon img { height: auto; width: auto; max-height: 34px; max-width: 185px; }
  .logo-text h1 { font-size: 15.5px; line-height: 1.2; }
  .logo-text p { font-size: 11px; letter-spacing: 0.8px; }
  .tagline-center { display: none; }
  .top-actions { flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; row-gap: 10px; gap: 8px; }
  .top-text { display: none; }
  .top-icon { font-size: 17px; }
  .btn-register { padding: 10px 14px !important; font-size: 15.5px !important; }

  /* Login fields shown upfront on mobile — no tap-to-reveal. The toggle
     button is hidden; the panel becomes a static full-width block (instead
     of the absolute-positioned dropdown desktop/tablet still doesn't need,
     since it never collapses here) that wraps onto its own line below the
     hamburger + Register row. */
  .btn-login-toggle { display: none; }
  /* .mini-login used to be nested inside .top-actions, sizing its wrapped
     row against .top-actions' own narrow (hamburger+Register-sized) box —
     leaving a big empty gap under the logo instead of using the full row
     width. It's now a direct sibling of .top-actions in the HTML (see
     incHeader.php), so flex:0 0 100% here sizes it against .top-bar's real
     full content width instead. .top-bar now needs flex-wrap:wrap so this
     can drop to its own line below logo-wrap + .top-actions. */
  .mini-login { display: block; flex: 0 0 100%; width: 100%; margin-top: 8px; box-sizing: border-box; position: static; }
  .mini-login-panel {
    display: flex;
    position: static;
    width: 100%;
    box-sizing: border-box;
    box-shadow: none;
    border: none;
    border-top: 1px solid var(--border-light);
    border-radius: 0;
    margin-top: 4px;
    padding: 12px 0 0;
    min-width: 0;
    max-width: none;
  }

  /* Hamburger */
  .hamburger { display: flex; }
  nav.main-nav { display: none; flex-direction: column; align-items: stretch; background: var(--maroon-dark); }
  #nav-toggle:checked ~ nav.main-nav { display: flex; }
  nav.main-nav a { padding: 14px 20px; font-size: 15.5px; letter-spacing: 1px; border-bottom: 1px solid rgba(255,255,255,0.08); }
  nav.main-nav a:last-child { border-bottom: none; }
  /* Flatten dropdown into the mobile menu instead of hiding it — hover has
     no touch equivalent, so hidden items would be permanently unreachable. */
  nav.main-nav .nav-dropdown {
    display: block;
    position: static;
    min-width: 0;
    border-top: none;
    box-shadow: none;
    background: rgba(0,0,0,0.15);
  }
  nav.main-nav .nav-dropdown a { padding-left: 40px; font-size: 14.5px; }
  nav.main-nav .nav-item > a .fa-chevron-down { display: none; }
  /* Hide desktop login form; show mobile-only nav links instead */
  .header-login-form, .user-dropdown { display: none; }
  nav.main-nav a.mob-nav-link { display: block; }
  nav.main-nav .mob-login-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  nav.main-nav .mob-login-form input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 5px;
    background: rgba(255,255,255,0.08);
    color: #fff;
    font-size: 15.5px;
    box-sizing: border-box;
  }
  nav.main-nav .mob-login-form input::placeholder { color: rgba(255,255,255,0.6); }
  nav.main-nav .mob-login-form input:focus { outline: none; border-color: var(--gold); }
  nav.main-nav .mob-login-form button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 12px;
    background: var(--gold);
    color: var(--maroon-dark);
    border: none;
    border-radius: 5px;
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
  }

  /* Hero */
  .hero { min-height: auto; flex-direction: column; background: linear-gradient(180deg, #FFF6EE 0%, #FFE4C1 100%); }
  .hero-bg-img { position: relative; width: 100%; height: 180px; top: auto; right: auto; object-position: center center; }
  .hero-overlay { display: none; }
  .hero-content { position: relative; z-index: 2; padding: 24px 20px 32px; max-width: 100%; text-align: center; }
  .hero-content h2 { font-size: 19px; }
  .hero-content h1 { font-size: 33.5px; margin-bottom: 12px; }
  .hero-content p { font-size: 17px; margin-bottom: 22px; }
  .hero-content .btn-register { padding: 13px 28px !important; font-size: 17px !important; }

  /* Stats bar */
  .stats-bar { flex-wrap: wrap; padding: 0; }
  .stat-item { width: 50%; padding: 14px 10px; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.15); gap: 8px; justify-content: center; }
  .stat-item:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.15); }
  .stat-item:nth-child(3), .stat-item:nth-child(4) { border-bottom: none; }
  .stat-icon { font-size: 24px; }
  .stat-text strong { font-size: 18px; }
  .stat-text span { font-size: 12px; }

  /* Features */
  .features-section { flex-direction: column; padding: 0; }
  .feature-item { width: 100%; flex: none; padding: 14px 20px; border-right: none; border-bottom: 1px solid var(--border-light); flex-direction: row; align-items: center; text-align: left; gap: 14px; }
  .feature-item:last-child { border-bottom: none; }
  .feature-icon { font-size: 29px; margin-bottom: 0; flex-shrink: 0; }
  .feature-item h4 { font-size: 15.5px; margin-bottom: 2px; }
  .feature-item p { font-size: 14.5px; max-width: none; }
  .icon-emoji { display: inline; }

  /* Ad banner */
  .ad-banner-full { padding: 10px 12px; }
  .ad-placeholder { height: 60px; font-size: 13px; }
  .ad-label { display: none; }
  .content-with-ads { padding: 14px 12px; }
  .sidebar-ad { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .sidebar-ad-box { height: 90px; font-size: 13px; padding: 10px 6px; }
  .sidebar-ad-box i { font-size: 21.5px; margin-bottom: 4px; }

  /* Highlighters */
  .highlighters-section { padding: 24px 12px; }
  .hl-heading { font-size: 13px; letter-spacing: 2px; margin-bottom: 18px; }
  .hl-grid { grid-template-columns: 1fr; gap: 10px; }
  .hl-card { padding: 16px; display: block; text-align: center; }
  .hl-icon { width: 44px; height: 44px; font-size: 24px; }
  .sparkle-ring { width: 58px; height: 58px; }
  .hl-number { font-size: 29px; }
  .hl-label { font-size: 15.5px; }
  .hl-desc { font-size: 14.5px; }
  .hl-grid-bottom { grid-template-columns: 1fr; gap: 10px; margin-top: 10px; }
  .hl-card.wide .hl-number { font-size: 21.5px; }

  /* Profile cards */
  .profiles-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .profiles-section { padding: 20px 16px; }
  .profile-img { height: 140px; }

  /* Profile detail */
  .profile-detail-wrap { padding: 16px; }
  .profile-detail-grid { grid-template-columns: 1fr; }
  .profile-photo-col { flex-direction: row; gap: 12px; align-items: flex-start; }
  .profile-main-photo { width: 140px; flex-shrink: 0; aspect-ratio: 3/4; }
  .profile-thumb-row { flex-direction: column; }

  /* Search */
  .search-page-wrap { padding: 16px; }
  .search-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  /* Dashboard */
  .dash-layout { grid-template-columns: 1fr; }
  .dash-sidebar { position: static; height: auto; }
  .dash-content { padding: 16px; }
  .dash-profile-box { display: flex; align-items: center; gap: 16px; text-align: left; }
  .dash-profile-box .profile-pic { width: 60px; height: 60px; margin: 0; flex-shrink: 0; }

  /* Admin stats */
  .adm-stats-grid { grid-template-columns: repeat(2, 1fr); padding: 14px; gap: 10px; }
  .adm-stat-card .num { font-size: 29px; }

  /* Admin list table */
  table.dataTable thead th,
  table.dataTable tbody td { display: block !important; width: 100% !important; }

  /* Forms */
  .form-row { flex-direction: column; gap: 10px; }
  .form-group { flex: none; }
  .register-box-wrap { padding: 20px 16px; justify-content: center; }
  .register-box { width: 100%; }
  .joinus-wrap { padding: 16px; }

  /* Photo upload */
  .photo-upload-grid { grid-template-columns: repeat(2, 1fr); }

  /* Packages */
  .packages-grid { grid-template-columns: 1fr; }
  .packages-wrap { padding: 20px 16px; }

  /* Success stories */
  .success-section { padding: 28px 16px; }
  .success-section h2 { font-size: 24px; }
  .success-cards { flex-direction: column; align-items: stretch; gap: 14px; }
  .success-card { width: 100%; max-width: 100%; }

  /* Footer ad */
  .footer-ad { padding: 12px 16px; }
  .footer-ad-box { height: 60px; font-size: 13px; }

  /* Footer */
  footer { padding: 28px 16px 14px; }
  .footer-grid { grid-template-columns: 1fr; gap: 20px; }
  .footer-bottom { flex-direction: column; gap: 6px; text-align: center; }

  /* Event banner */
  .event-banner-inner { flex-direction: column; padding: 14px; align-items: flex-start; gap: 12px; }
  .event-left { flex-direction: column; align-items: flex-start; gap: 8px; }
  .event-icon-wrap { width: 40px; height: 40px; font-size: 21.5px; }
  .event-title { font-size: 18px; }
  .event-meta { font-size: 14.5px; flex-direction: column; gap: 4px; }
  .event-center { width: 100%; }
  .event-countdown { gap: 6px; width: 100%; }
  .countdown-unit { flex: 1; padding: 6px 4px; min-width: 0; }
  .countdown-unit .num { font-size: 21.5px; }
  .countdown-unit .lbl { font-size: 11px; }
  .event-right { flex-direction: row; align-items: center; gap: 10px; width: 100%; }
  .btn-event-register { padding: 9px 14px; font-size: 13px; flex: 1; }

  /* Columns reset for mobile */
  .col-md-1, .col-md-2, .col-md-3, .col-md-4,
  .col-md-5, .col-md-6, .col-md-7, .col-md-8,
  .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Narrow-phone tier (iPhone SE class, ~320-360px): the 185px logo cap above
   is sized for ~355px+ screens; below that there isn't enough spare row
   width to fit it alongside hamburger + Register without crowding, so a
   tighter cap applies here instead. */
@media (max-width: 360px) {
  .logo-icon img { max-height: 26px; max-width: 130px; }
}


/* ============================================================
   33. MEMBER DASHBOARD LAYOUT
   Shared by include/incMemDashTop.php (member sub-pages) and
   mem-dashboard.php (the "My Profile" view). Both link this file
   instead of carrying their own copy — single source for the
   member-area chrome (top nav, sidebar, main) and content patterns.
   ============================================================ */
:root {
  --sidebar-w: 240px;
}
body { font-family: var(--font-body); background: var(--cream); color: var(--text-dark); min-height: 100vh; display: flex; flex-direction: column; }

/* Top-right quick search dropdown (member area) — search by name/ID/other
   details and jump straight to a profile. The input itself now lives in the
   light-background .dash-search variant below (member top bar is now the
   shared light .adm-topbar, see the "Shared top bar" block); these result-
   dropdown classes are still used by that light variant. */
.mtop-search-results { display: none; position: absolute; top: calc(100% + 8px); right: 0; width: 340px; max-width: 85vw; max-height: 380px; overflow-y: auto; background: #fff; border: 1px solid var(--border-light); border-top: 3px solid var(--gold); border-radius: 0 0 8px 8px; box-shadow: 0 8px 24px rgba(0,0,0,.3); z-index: 500; }
.mtop-search-results.show { display: block; }
.mtop-search-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; cursor: pointer; text-decoration: none; color: var(--text-dark); border-bottom: 1px solid var(--border-light); }
.mtop-search-item:last-child { border-bottom: none; }
.mtop-search-item:hover { background: var(--cream); }
.mtop-search-item i { color: var(--gold); width: 14px; text-align: center; flex-shrink: 0; margin-top: 2px; }
.mtop-search-item .ms-text { min-width: 0; overflow: hidden; }
.mtop-search-item .ms-id { font-weight: 700; color: var(--maroon); font-size: 14.5px; }
.mtop-search-item .ms-name { font-size: 15px; color: var(--text-dark); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mtop-search-item .ms-meta { font-size: 13px; color: var(--text-mid); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mtop-search-empty, .mtop-search-loading { padding: 14px; font-size: 15px; color: var(--text-mid); text-align: center; }

/* Quick-search input — sits above the KPI/stats strip on mem-dashboard.php.
   Reuses .mtop-search-results/-item/-empty/-loading above for the dropdown. */
.dash-search-row { display: flex; justify-content: flex-end; width: 100%; margin-bottom: 20px; }
.dash-search { position: relative; width: 100%; max-width: 420px; }
.dash-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-mid); font-size: 15.5px; pointer-events: none; }
.dash-search-input { width: 100%; padding: 11px 14px 11px 38px; border: 1.5px solid var(--border-light); border-radius: 24px; background: #fff; color: var(--text-dark); font-size: 16px; font-family: var(--font-body); outline: none; box-sizing: border-box; transition: border-color .15s, box-shadow .15s; box-shadow: 0 2px 8px rgba(198,40,40,.05); }
.dash-search-input::placeholder { color: #aaa; }
.dash-search-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,152,42,.12); }

/* Layout */
.layout { display: flex; flex: 1; }

/* Sidebar */
.sidebar { width: var(--sidebar-w); background: #fff; border-right: 1px solid var(--border-light); display: flex; flex-direction: column; position: sticky; top: 58px; height: calc(100vh - 58px); overflow-y: auto; flex-shrink: 0; }
.sidebar-profile { padding: 22px 20px 16px; text-align: center; border-bottom: 1px solid var(--cream-dark); }
.sidebar-avatar { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; border: 3px solid var(--gold); margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--cream-dark), var(--gold-light)); font-size: 36px; }
.sidebar-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-profile h3 { font-family: var(--font-heading); font-size: 15.5px; color: var(--maroon); font-weight: 700; margin-bottom: 3px; }
.sidebar-profile p { font-size: 13px; color: var(--text-mid); line-height: 1.5; }
.profile-complete { margin-top: 10px; font-size: 13px; color: var(--text-mid); }
.progress-bar { height: 5px; background: var(--cream-dark); border-radius: 3px; margin-top: 5px; overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--maroon), var(--gold)); border-radius: 3px; }
.sidebar-nav { padding: 10px 0; flex: 1; }
.sidebar-nav a { display: flex; align-items: center; gap: 11px; padding: 10px 20px; text-decoration: none; font-size: 15.5px; font-weight: 600; color: var(--text-mid); border-left: 3px solid transparent; transition: all .15s; }
.sidebar-nav a:hover { background: var(--cream); color: var(--maroon); }
.sidebar-nav a.active { background: var(--cream-dark); color: var(--maroon); border-left-color: var(--maroon); font-weight: 700; }
.sidebar-nav a i { width: 17px; text-align: center; font-size: 15.5px; }
.sidebar-nav .nav-badge { margin-left: auto; background: var(--maroon); color: #fff; font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 10px; }
.sidebar-nav .nav-badge.muted, .sidebar-nav .nav-badge.phase-badge { background: #aaa; }
.sidebar-nav a.soon, .sidebar-nav a.coming-soon { opacity: .5; cursor: default; pointer-events: none; }
.sidebar-divider { height: 1px; background: var(--cream-dark); margin: 5px 16px; }

/* Main */
.main { flex: 1; padding: 28px 32px; overflow-y: auto; min-width: 0; }

/* Page header */
.page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.page-header h1 { font-family: var(--font-heading); font-size: var(--fs-page-title); color: var(--maroon); font-weight: 700; }
.page-header p { font-size: 15.5px; color: var(--text-mid); font-family: var(--font-accent); font-style: italic; margin-top: 3px; }

/* Stats strip (mem-dashboard.php) */
.stats-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 26px; }
.stat-card { background: #fff; border: 1px solid var(--border-light); border-radius: 8px; padding: 16px 18px; display: flex; align-items: center; gap: 12px; }
.stat-icon-box { width: 42px; height: 42px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 21.5px; flex-shrink: 0; }
.stat-icon-box.maroon { background: rgba(198,40,40,.1); color: var(--maroon); }
.stat-icon-box.gold   { background: rgba(201,152,42,.1); color: var(--gold); }
.stat-icon-box.green  { background: rgba(60,130,60,.1);  color: #3a7a3a; }
.stat-icon-box.blue   { background: rgba(50,100,180,.1); color: #3264b4; }
.stat-card-text strong { display: block; font-family: var(--font-heading); font-size: 23px; color: var(--maroon); line-height: 1; margin-bottom: 3px; }
.stat-card-text span { font-size: 13px; color: var(--text-mid); }

/* Membership expiry pill — sits top-right of the "My Profile" header (mem-dashboard.php) */
.mem-expiry-pill {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  background: #fff; border: 1px solid var(--border-light); border-left: 3px solid var(--gold);
  border-radius: 20px; padding: 7px 16px; font-size: 13.5px; color: var(--maroon);
  white-space: nowrap; transition: border-color var(--transition), color var(--transition);
}
.mem-expiry-pill i { color: var(--gold); font-size: 13.5px; }
.mem-expiry-pill strong {
  font-family: var(--font-heading); font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: .3px;
}
a.mem-expiry-pill:hover { border-color: var(--maroon); color: var(--maroon); }
.mem-expiry-pill.is-expired { border-left-color: var(--red-royal); color: var(--red-royal); font-weight: 600; }
.mem-expiry-pill.is-expired i { color: var(--red-royal); }
.mem-expiry-pill.is-none { border-left-color: var(--border-light); color: var(--text-mid); }
.mem-expiry-pill.is-none i { color: var(--text-mid); }
@media (max-width: 640px) {
  .mem-expiry-pill { font-size: 12.5px; padding: 6px 13px; }
}

/* Content card (member sub-pages) */
.content-card { background: #fff; border: 1px solid var(--border-light); border-radius: 10px; overflow: hidden; margin-bottom: 24px; }
.content-card-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid var(--cream-dark); flex-wrap: wrap; gap: 10px; }
.content-card-body { padding: 22px; }

/* Detail / info tables */
.detail-table, .info-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.detail-table tr+tr td, .info-table tr+tr td { border-top: 1px solid var(--cream-dark); }
.detail-table td, .info-table td { padding: 9px 4px; vertical-align: top; }
.detail-table td:first-child, .info-table td:first-child { color: var(--maroon); font-weight: 700; font-size: 14.5px; white-space: nowrap; width: 35%; padding-right: 16px; }
.detail-table td:last-child, .info-table td:last-child { color: var(--text-dark); }
.detail-empty { color: #bbb; font-style: italic; }
.status-badge { display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 13px; font-weight: 700; }
.status-badge.active   { background: #d4edda; color: #1a6b2a; }
.status-badge.inactive { background: #fff3cd; color: #7a5800; }
.status-badge.parichayaVedika { background: #cce5ff; color: #1a4a7a; }

/* Edit buttons */
.btn-edit { display: inline-flex; align-items: center; gap: 6px; background: var(--maroon); color: #fff; border: none; padding: 8px 18px; border-radius: 5px; font-family: var(--font-heading); font-size: 14.5px; font-weight: 700; letter-spacing: .5px; text-decoration: none; cursor: pointer; transition: background .2s; }
.btn-edit:hover { background: var(--maroon-light); color: #fff; }
.btn-edit-outline { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: var(--maroon); border: 1.5px solid var(--maroon); padding: 7px 16px; border-radius: 5px; font-size: 14.5px; font-weight: 700; text-decoration: none; cursor: pointer; transition: all .2s; font-family: var(--font-body); }
.btn-edit-outline:hover { background: var(--maroon); color: #fff; }
.btn-group { display: flex; gap: 10px; flex-wrap: wrap; }

/* Form styles */
.form-section { padding: 22px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field-group { display: flex; flex-direction: column; gap: 5px; }
.field-group label { font-size: 13px; font-weight: 700; color: var(--maroon); text-transform: uppercase; letter-spacing: .7px; }
.field-group input[type="password"],
.field-group input[type="text"],
.field-group input[type="file"],
.field-group select,
.field-group textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border-light); border-radius: 5px; font-size: 15.5px; color: var(--text-dark); background: #fdfaf5; font-family: var(--font-body); outline: none; transition: border-color .2s; }
.field-group input:focus,
.field-group select:focus,
.field-group textarea:focus { border-color: var(--gold); }
.field-note { font-size: 13px; color: var(--text-mid); margin-top: 2px; }
.field-error { font-size: 13px; color: #c0392b; margin-top: 2px; min-height: 16px; }
.form-actions { padding: 18px 22px; border-top: 1px solid var(--cream-dark); display: flex; gap: 12px; align-items: center; }

/* Photo grid (member sub-pages) */
.photo-grid { display: flex; gap: 20px; flex-wrap: wrap; padding: 22px; }
.photo-slot { text-align: center; }
.photo-slot-preview { width: 140px; height: 170px; border-radius: 8px; overflow: hidden; border: 2px solid var(--border-light); background: linear-gradient(135deg, var(--cream-dark), var(--gold-light)); display: flex; align-items: center; justify-content: center; font-size: 67px; margin-bottom: 10px; }
.photo-slot-preview img { width: 100%; height: 100%; object-fit: cover; }
.photo-slot label { display: block; font-size: 13px; font-weight: 700; color: var(--maroon); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 6px; }
.photo-slot input[type="file"] { width: 140px; font-size: 14.5px; }

/* Profile viewed list */
.viewed-list { padding: 0; list-style: none; }
.viewed-item { display: flex; align-items: flex-start; gap: 14px; padding: 14px 22px; border-bottom: 1px solid var(--cream-dark); }
.viewed-item:last-child { border-bottom: none; }
.viewed-date { font-size: 14.5px; font-weight: 700; color: var(--text-mid); white-space: nowrap; min-width: 160px; }
.viewed-ids { font-size: 15.5px; color: var(--text-dark); word-break: break-all; }
.viewed-count { display: inline-block; background: var(--maroon); color: #fff; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 10px; margin-top: 4px; }

/* Section title */
.section-title { font-family: var(--font-heading); font-size: var(--fs-section-heading); color: var(--maroon); font-weight: 700; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.gold-line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); }

/* Profile panel (mem-dashboard.php "My Profile" view) */
.profile-top { display: grid; grid-template-columns: 240px 1fr; gap: 24px; margin-bottom: 28px; }
.profile-photos { background: #fff; border: 1px solid var(--border-light); border-radius: 10px; padding: 20px; text-align: center; }
.main-photo-wrap { width: 100%; aspect-ratio: 3/4; max-height: 240px; border-radius: 8px; overflow: hidden; background: linear-gradient(135deg, var(--cream-dark), var(--gold-light)); display: flex; align-items: center; justify-content: center; font-size: 86.5px; margin-bottom: 10px; border: 2px solid var(--border-light); }
.main-photo-wrap img { width: 100%; height: 100%; object-fit: cover; }
.extra-photos { display: flex; gap: 8px; justify-content: center; }
.extra-photo-wrap { width: 54px; height: 54px; border-radius: 6px; overflow: hidden; background: linear-gradient(135deg, var(--cream-dark), var(--gold-light)); display: flex; align-items: center; justify-content: center; font-size: 29px; border: 1.5px solid var(--border-light); }
.extra-photo-wrap img { width: 100%; height: 100%; object-fit: cover; }
.photo-update-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 14.5px; color: var(--maroon); font-weight: 600; text-decoration: none; border: 1px solid var(--cream-dark); padding: 6px 14px; border-radius: 4px; transition: all .15s; }
.photo-update-link:hover { background: var(--cream); }
.profile-details { background: #fff; border: 1px solid var(--border-light); border-radius: 10px; padding: 22px 24px; }
.profile-details h2 { font-family: var(--font-heading); font-size: 24px; color: var(--maroon); font-weight: 700; margin-bottom: 4px; }
.profile-details .mem-id-badge { display: inline-block; background: linear-gradient(135deg, var(--maroon), var(--maroon-light)); color: #fff; font-size: 13px; font-weight: 700; padding: 2px 10px; border-radius: 10px; margin-bottom: 16px; letter-spacing: .5px; }

/* Quick edit cards */
.edit-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 0; }
.edit-card { background: #fff; border: 1px solid var(--border-light); border-radius: 8px; padding: 18px 16px; text-align: center; text-decoration: none; color: var(--text-dark); transition: all .2s; display: block; }
.edit-card:hover { box-shadow: 0 6px 20px rgba(198,40,40,.12); transform: translateY(-2px); border-color: var(--gold); }
.edit-card-icon { width: 44px; height: 44px; border-radius: 50%; background: rgba(198,40,40,.08); display: flex; align-items: center; justify-content: center; font-size: 21.5px; color: var(--maroon); margin: 0 auto 10px; }
.edit-card h4 { font-family: var(--font-heading); font-size: 14.5px; color: var(--maroon); font-weight: 700; margin-bottom: 4px; }
.edit-card p { font-size: 13px; color: var(--text-mid); }
.edit-card .edit-arrow { display: inline-block; margin-top: 10px; font-size: 13px; color: var(--gold); font-weight: 700; }

/* Empty state */
.empty-state { text-align: center; padding: 64px 20px; color: var(--text-mid); }
.empty-state .empty-icon, .empty-state i { font-size: 57.5px; margin-bottom: 16px; opacity: .5; display: block; }
.empty-state h3 { font-family: var(--font-heading); font-size: 20.5px; color: var(--maroon); margin-bottom: 8px; }
.empty-state p { font-size: 15.5px; line-height: 1.6; margin-bottom: 20px; }
.coming-tag { display: inline-block; background: linear-gradient(135deg, var(--maroon), var(--gold)); color: #fff; font-size: 13px; font-weight: 700; padding: 4px 14px; border-radius: 10px; letter-spacing: .5px; }

/* Toast */
#toast { position: fixed; bottom: 28px; right: 28px; background: var(--maroon-dark); color: #fff; padding: 12px 20px; border-radius: 6px; font-size: 15.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 20px rgba(0,0,0,.25); transform: translateY(80px); opacity: 0; transition: all .3s ease; z-index: 999; max-width: 320px; pointer-events: none; }
#toast.show { transform: translateY(0); opacity: 1; }
#toast.green { background: #3a7a3a; }
#toast.red   { background: #c0392b; }

/* Tab panels (mem-dashboard.php) */
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Info banner */
.info-banner { background: linear-gradient(135deg, var(--cream), var(--cream-dark)); border: 1px solid var(--gold); border-radius: 8px; padding: 13px 18px; margin-bottom: 20px; display: flex; align-items: center; gap: 12px; font-size: 15.5px; color: var(--text-mid); }
.info-banner i { color: var(--gold); font-size: 20.5px; flex-shrink: 0; }

/* ── Responsive — Tablet (≤ 1024px) ── */
@media (max-width: 1024px) {
  :root { --sidebar-w: 200px; }
  .main { padding: 22px; }
  .form-grid { gap: 14px; }
  .profile-top { grid-template-columns: 200px 1fr; gap: 18px; }
  .stats-strip { grid-template-columns: repeat(2, 1fr); }
  .edit-cards { grid-template-columns: repeat(2, 1fr); }
}

/* ── Responsive — Mobile (≤ 640px) ── */
@media (max-width: 640px) {
  .layout { flex-direction: column; }
  .sidebar { width: 100%; position: static; height: auto; border-right: none; border-bottom: 1px solid var(--border-light); }
  .sidebar-profile { padding: 16px; }
  .sidebar-nav { display: flex; flex: none; overflow-x: auto; padding: 6px 8px; gap: 2px; -webkit-overflow-scrolling: touch; }
  .sidebar-nav a { flex-direction: column; gap: 4px; padding: 8px 14px; white-space: nowrap; border-left: none; border-bottom: 3px solid transparent; font-size: 12.5px; text-align: center; flex-shrink: 0; }
  .sidebar-nav a.active { border-left-color: transparent; border-bottom-color: var(--maroon); }
  .sidebar-nav .nav-badge { margin-left: 4px; }
  .sidebar-divider { display: none; }

  .main { padding: 14px; }
  .page-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .content-card-body, .form-section { padding: 16px; }
  .form-grid { grid-template-columns: 1fr; }
  .photo-grid { justify-content: center; gap: 14px; padding: 16px; }
  .detail-table td:first-child, .info-table td:first-child { width: 45%; white-space: normal; }
  .viewed-item { flex-direction: column; gap: 4px; }
  .viewed-date { min-width: auto; }

  .stats-strip { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat-card { padding: 12px 14px; }
  .profile-top { grid-template-columns: 1fr; }
  .profile-photos, .profile-details { padding: 16px; }
  .edit-cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .edit-card { padding: 14px 10px; }

  #toast { left: 14px; right: 14px; bottom: 14px; max-width: none; }

  /* Member photos were getting cropped on mobile (object-fit:cover on
     desktop-sized fixed boxes) — show the full photo uncropped here
     instead. Desktop keeps the cover-crop look (the base rule above),
     this only applies ≤640px. */
  .sidebar-avatar img,
  .main-photo-wrap img,
  .extra-photo-wrap img,
  .photo-slot-preview img { object-fit: contain; }
}