:root {
  /* Dark theme palette tuned to lighter blues */
  --nav-height: 60px;
  --scroll-offset: 35px;

  /* Typography + layout primitives */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --container-max: 1200px;

  /* Theme-safe borders/surfaces */
  --surface-2: rgba(255, 255, 255, 0.02);
  --divider: rgba(124, 184, 255, 0.08);
  --shadow-soft: 0 12px 34px rgba(5, 18, 40, 0.22);

  /* Feature accents (kept subtle) */
  --brick-bg: #78421c;
  --brick-bg-hover: #8d5524;
  --brick-gold: #ffd700;
  --bg-gradient: linear-gradient(135deg, #0f2b49, #153e6a);
    /* Ensure page-level background falls back to the current nav/base color
      so swatch classes that set --nav-bg produce a uniform page color */
    --page-bg: var(--nav-bg);
  --text-color: #e8eef8; /* keep text color unchanged */
  --text-muted: rgba(232, 238, 248, 0.86);
  --heading-color: #ffffff;

  /* Card surfaces: make a slightly offset, elegant panel from the page bg */
  --card-bg: rgba(255, 255, 255, 0.05);
  --card-border: rgba(255, 255, 255, 0.06);
  --card-shadow: 0 10px 30px rgba(5, 18, 40, 0.28);
  --card-hover-shadow: 0 18px 42px rgba(5, 18, 40, 0.34);

    /* Live card contrast overlay: 0 = none, higher = stronger overlay
      `--card-overlay-color` is an RGB triplet used with the opacity value. */
    --card-overlay: 0.01;
    --card-overlay-color: 0,0,0;

  --nav-bg: rgba(10, 36, 66, 0.6);
  --nav-mobile-bg: rgba(10, 36, 66, 0.94);
  --nav-border: rgba(124, 184, 255, 0.06);
  --nav-link-color: rgba(232, 238, 248, 0.86);
  --nav-link-hover: #9fcfff; /* lighter hover blue */
  --hamburger-color: #e8eef8;

  --banner-bg: linear-gradient(to right, rgba(8, 34, 64, 0.6), rgba(18, 52, 88, 0.6));
  --banner-border: rgba(124, 184, 255, 0.16);
  --banner-text: #e8eef8;

  --input-bg: rgba(255, 255, 255, 0.025);
  --input-border: rgba(124, 184, 255, 0.04);

  --btn-primary-bg: linear-gradient(90deg, #7ecbff, #88c7ff);
  --btn-primary-text: #05203a;
  --btn-secondary-border: rgba(124, 184, 255, 0.06);
  --btn-secondary-text: #e8eef8;

  --link-color: rgba(232, 238, 248, 0.86);
  --link-hover: rgba(232, 238, 248, 0.98);

  --shape-color: rgba(124, 184, 255, 0.22);
  --highlight-bg: rgba(124, 184, 255, 0.045);
  --highlight-border: rgba(124, 184, 255, 0.07);
}

[data-theme="light"] {
  --bg-gradient: linear-gradient(135deg, #f0f4f8, #d9e2ec);
  --text-color: #102a43;
  --text-muted: #486581;
  --heading-color: #102a43;

  --surface-2: rgba(255, 255, 255, 0.45);
  --divider: rgba(0, 0, 0, 0.06);
  --shadow-soft: 0 14px 36px rgba(0, 0, 0, 0.06);

  /* Light theme cards: off-white panels with subtle border for a professional look */
  --card-bg: rgba(255, 255, 255, 0.96);
  --card-border: rgba(0, 0, 0, 0.06);
  --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  --card-hover-shadow: 0 22px 48px rgba(0, 0, 0, 0.08);

  --nav-bg: rgba(255, 255, 255, 0.7);
  --nav-mobile-bg: rgba(255, 255, 255, 0.95);
  --nav-border: rgba(0, 0, 0, 0.05);
  --nav-link-color: #334e68;
  --nav-link-hover: #0052cc;
  --hamburger-color: #102a43;

  --banner-bg: linear-gradient(to right, rgba(255, 255, 255, 0.8), rgba(240, 244, 248, 0.8));
  --banner-border: rgba(0, 0, 0, 0.05);
  --banner-text: #102a43;

  --input-bg: rgba(255, 255, 255, 0.5);
  --input-border: rgba(0, 0, 0, 0.1);

  --btn-primary-bg: linear-gradient(90deg, #0052cc, #2680eb);
  --btn-primary-text: #ffffff;
  --btn-secondary-border: rgba(0, 0, 0, 0.1);
  --btn-secondary-text: #102a43;

  --link-color: #0052cc;
  --link-hover: #003e9b;

  --shape-color: rgba(0, 82, 204, 0.08);
  --highlight-bg: rgba(0, 82, 204, 0.06);
  --highlight-border: rgba(0, 82, 204, 0.1);
  /* For light theme, using a white overlay will brighten cards when needed */
  --card-overlay-color: 255,255,255;
  /* Ensure progress bar is visible on light background */
  --progress-fill: #2f2f2f;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:var(--font-sans)}
/* Smooth scrolling and offset for fixed navbar so anchors aren't hidden */
html{scroll-behavior:smooth;scroll-padding-top:var(--scroll-offset);color-scheme:light dark}
/* Use a solid page background color (derived from --page-bg or --nav-bg)
  and disable background-image blending so the page stays visually uniform. */
body{background-color:var(--page-bg, var(--nav-bg, #153e6a));background-image:none;background-attachment:fixed;color:var(--text-color);min-height:100vh;overflow-x:hidden;padding-top:var(--scroll-offset);padding-bottom:50px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-variant-ligatures:common-ligatures}

::selection{background:var(--highlight-bg);color:var(--text-color)}

/* Accessible focus styles */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--nav-link-hover);
  outline-offset:3px;
}

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  html{scroll-behavior:auto}
  .bg-shape{animation:none}
  .rolling-banner-content{animation:none}
  *{transition-duration:0.001ms !important;animation-duration:0.001ms !important;animation-iteration-count:1 !important}
}

/* Glowing floating shapes (background) */
.bg-shape{position:fixed;width:420px;height:420px;border-radius:50%;z-index:-1;animation:float 12s ease-in-out infinite}
/* Neutralize decorative shapes so they don't introduce light/dark variation
  over the solid page background. If you prefer to keep subtle shapes, we
  can instead set them to use `var(--page-bg)` so they blend in. */
.bg-shape{background:transparent !important;filter:none !important;box-shadow:none !important}
.shape1{top:-80px;left:-80px}
.shape2{bottom:-80px;right:-80px;animation-delay:4s}
.shape3{top:300px;right:18%;animation-delay:7s}

@keyframes float{0%,100%{transform:translateY(0) translateX(0)}50%{transform:translateY(60px) translateX(40px)}}

/* Navbar */
.navbar{position:fixed;top:0;left:0;width:100%;background:var(--nav-bg);backdrop-filter:blur(16px);border-bottom:1px solid var(--nav-border);z-index:1000;padding:0 20px;box-shadow:0 6px 26px rgba(0,0,0,0.09);transition:background 0.3s,border-color 0.3s,box-shadow 0.3s}
.nav-container{max-width:var(--container-max);margin:0 auto;display:flex;justify-content:flex-start;align-items:center;height:var(--nav-height);gap:12px}
.nav-logo{display:flex;align-items:center;text-decoration:none;order:1}
.nav-logo img{height:44px;width:44px;border-radius:50%;object-fit:cover;border:2px solid var(--nav-border);transition:transform 0.2s,border-color 0.2s,box-shadow 0.2s;box-shadow:0 8px 22px rgba(0,0,0,0.18)}
.nav-logo:hover img{transform:scale(1.05);border-color:var(--highlight-border)}
.nav-menu{order:3;flex:1;display:flex;justify-content:center;gap:24px;align-items:center;list-style:none;margin:0;padding:0}
.theme-btn{order:4;margin-left:0}
.nav-link{color:var(--nav-link-color);text-decoration:none;font-size:0.95rem;font-weight:550;transition:color 0.2s,box-shadow 0.2s;box-shadow:inset 0 -1px 0 transparent}

/* Language select in navbar */
.nav-lang{order:6;display:flex;align-items:center;margin-left:8px}
.lang-select{
  background:var(--input-bg);
  color:var(--nav-link-color);
  border:1px solid var(--input-border);
  border-radius:12px;
  padding:8px 10px;
  font:inherit;
  cursor:pointer;
  appearance:none;
}
.lang-select:hover{border-color:var(--highlight-border)}
.lang-select:focus-visible{outline:2px solid var(--nav-link-hover);outline-offset:3px}

/* Visually hidden helper (used for accessible labels) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.nav-link:hover {
  color: var(--nav-link-hover);
  box-shadow: inset 0 -1px 0 var(--highlight-border);
}

.theme-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--nav-link-color);
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
  position: relative;
  z-index: 1101; /* keep theme toggle visible above mobile menu */
}
.theme-btn:hover {
  color: var(--nav-link-hover);
}

.moon-icon {
  display: none;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
}

/* Install CTA in nav */
/* Install CTA in nav */
.nav-cta-wrap{margin-left:auto;display:flex;align-items:center;order:5}
.nav-cta-wrap{position:relative}
.nav-cta{background:var(--btn-primary-bg);color:var(--btn-primary-text);padding:10px 14px;border-radius:12px;border:none;cursor:pointer;font-weight:750;font-size:0.95rem;box-shadow:0 8px 18px rgba(2,6,23,0.22);transition:transform 160ms ease,box-shadow 160ms ease,filter 160ms ease}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(2,6,23,0.26);filter:brightness(1.02)}
.nav-cta:active{transform:translateY(-1px)}

/* keep nav-link spacing on small screens; ensure CTA moves into mobile header */
@media(max-width:768px){
  .nav-cta{padding:8px 10px;border-radius:10px;font-size:0.9rem}
  .nav-cta-wrap{margin-left:8px}
}

/* iOS inline prompt */
/* iOS / Install modal */
#ios-prompt-inline{display:none}

.install-modal{display:none;position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2200}
.install-modal[aria-hidden="false"]{display:block}
.install-modal .install-modal-inner{max-width:420px;width:min(92%,420px);padding:18px;border-radius:14px;background:rgba(6,18,32,0.96);color:var(--text-color);box-shadow:0 18px 48px rgba(0,0,0,0.6);border:1px solid rgba(255,255,255,0.04);text-align:center}
.install-modal .install-modal-inner h3{margin:0 0 8px 0}
.install-modal .install-modal-inner p{margin:0 8px 12px 8px;color:var(--text-muted)}

/* Layout for install modal: QR left, instructions right on larger screens */
.install-grid{display:flex;flex-direction:column;gap:16px;align-items:center;justify-content:center}
.install-qr-wrap{display:flex;flex-direction:column;align-items:center;gap:8px}
.install-qr-img{width:300px;height:300px;border-radius:8px;border:1px solid var(--card-border);background:#fff;object-fit:contain}
.install-instructions{max-width:360px;text-align:left}
/* Hide individual instruction blocks by default; JS will show the relevant one(s) */
.install-instructions .instr-block{margin-bottom:12px;display:none}
.install-instructions h4{margin:0 0 6px 0;font-size:16px}
.install-instructions ol{margin:0 0 6px 18px;padding:0;color:var(--text-muted)}
.install-instructions li{margin-bottom:6px;font-size:14px}

/* Keep instructions below the QR on all screen sizes for clarity */
.install-qr-img{width:260px;height:260px}

.hamburger {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--hamburger-color);
  position: relative;
  transition: background 0.2s;
}

.hamburger::before,
.hamburger::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 2px;
  background: var(--hamburger-color);
  transition: transform 0.2s;
}

.hamburger::before { top: -6px; }
.hamburger::after { top: 6px; }

/* Mobile Menu */
@media (max-width: 768px) {
  .nav-toggle { display: block; order: 1; }

  /* Language selector right after hamburger on the left */
  .nav-lang {
    order: 2;
    margin-left: 8px;
    min-width: fit-content;
    flex-shrink: 0;
  }

  /* Center the logo on mobile using absolute positioning */
  .nav-logo {
    order: 3;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  /* Right side items: theme, install/palette */
  .theme-btn { order: 4; margin-left: auto; flex-shrink: 0; }
  .nav-cta-wrap { order: 5; margin-left: 8px; flex-shrink: 0; }
  .lang-select { padding: 7px 8px; border-radius: 10px; font-size: 0.92rem; }

  /* Nav menu slides down from top */
  .nav-menu { order: 6; justify-content: flex-start; }
  .nav-menu {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    width: 100%;
    background: var(--nav-mobile-bg);
    backdrop-filter: blur(16px);
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    gap: 20px;
    transform: translateY(-150%);
    transition: transform 0.3s ease-in-out;
    border-bottom: 1px solid var(--nav-border);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  }

  .nav-menu.active {
    transform: translateY(0);
  }

  .nav-toggle.active .hamburger { background: transparent; }
  .nav-toggle.active .hamburger::before { transform: rotate(45deg); top: 0; }
  .nav-toggle.active .hamburger::after { transform: rotate(-45deg); top: 0; }
}

/* (removed mobile override for donation grid; donation layout now uses standard .card-grid rules) */

/* Adjust container to account for fixed navbar */
.container{max-width:var(--container-max);margin:12px auto 36px;padding:clamp(18px,3vw,28px)}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(16px,2.4vw,28px)}

/* Utility spacing helpers used to replace inline styles */
.mt-6 { margin-top: 6px; }
.mt-8 { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }
.mt-18 { margin-top: 18px; }
.sp-h6 { height: 6px; }
.sp-h12 { height: 12px; }
.sp-h14 { height: 14px; }
.section-intro { max-width: 700px; margin: 10px auto; }
.center-m18 { text-align: center; margin: 18px 0; }
.center-flex { display:flex; justify-content:center; }
.hidden { display: none; }
.card-grid-compact { gap: 16px; }
.full-width-btn { width: 100%; margin-top: 12px; }
.spiritual-subsection{margin-top:20px;padding-top:16px}
.spiritual-subsection:first-of-type{margin-top:0;padding-top:0}
.spiritual-subsection h4{font-size:1.1em;font-weight:600;margin:0 0 12px 0;color:var(--heading-color)}
.aarti-list{list-style:none;padding:0;margin-top:12px;display:grid;grid-template-columns:repeat(2,1fr);gap:8px 12px;column-gap:16px}
.aarti-list li{margin-bottom:0}
.mantra-stack{margin-top:16px;display:flex;flex-direction:column;gap:10px}
.mantra-btn{width:100%;display:flex;justify-content:space-between;align-items:center}
.card-payment-info{padding-top:16px;border-top:1px solid var(--divider)}
.card-machine-icon{color:var(--text-color);opacity:0.9;margin:0 auto}

@media(min-width:700px){
  .card-grid{grid-template-columns:repeat(2,1fr)}
}
.hero{padding:26px 20px 18px;text-align:center;display:flex;flex-direction:column;align-items:center}
.hero h1{font-size:clamp(34px,5vw,48px);margin:0 0 10px 0;font-weight:800;letter-spacing:0.15px;line-height:1.05;color:var(--heading-color)}
.hero h2{font-size:clamp(16px,2.2vw,20px);font-weight:420;line-height:1.45;color:var(--text-muted);max-width:820px;margin:0}
.highlight-url{display:inline-block;margin-top:16px;background:var(--highlight-bg);color:var(--text-color);padding:8px 14px;border-radius:var(--radius-pill);border:1px solid var(--highlight-border)}

/* Narrow variant used for compact inline callouts (e.g. donations) */
.highlight-url.narrow{
  padding:4px 8px;
  border-radius:8px;
  font-weight:600;
  margin-top:0; /* keep inline with surrounding text */
}

/* Prevent underlines specifically for highlight pills (including on hover) */
.highlight-url, .highlight-url.narrow{ text-decoration:none; }
.highlight-url, .highlight-url.narrow{ display:inline-block; }
.highlight-url:hover, .highlight-url.narrow:hover{ text-decoration:none; }
.subtle-highlight {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--highlight-bg);
  color: inherit;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--highlight-border);
  transition: background 150ms ease, border-color 150ms ease;
}
a .subtle-highlight { color: inherit; }

.hero-img{width:100%;max-width:360px;height:auto;border-radius:var(--radius-md);object-fit:cover;display:block;margin:0 auto 18px;box-shadow:var(--shadow-soft);background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.04))}

.card{background-color:var(--card-bg);padding:clamp(18px,2.4vw,26px);border-radius:var(--radius-lg);border:1px solid var(--card-border);backdrop-filter:blur(6px) saturate(1.05);box-shadow:var(--card-shadow);transition:transform .22s cubic-bezier(.2,.9,.2,1),box-shadow .22s ease,border-color .22s ease;font-size:16px;line-height:1.65;color:var(--card-text, var(--text-color));position:relative;z-index:0}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;background-color:rgb(var(--card-overlay-color));opacity:var(--card-overlay);transition:opacity 180ms ease}
.card > *{position:relative;z-index:1}
.card:hover{transform:translateY(-5px);box-shadow:var(--card-hover-shadow);border-color:var(--highlight-border)}
.card h3{margin-bottom:10px;font-size:20px;color:var(--heading-color)}
.card p{font-size:16px}
.small{font-size:14px;color:var(--text-muted)}
.bold{font-weight:700;color:var(--heading-color)}

.section{margin-top:28px;clear:both}

.bank-details{background:var(--input-bg);padding:16px;border-radius:var(--radius-sm);border:1px solid var(--input-border);margin-top:12px}
.bank-instructions{margin-top:10px}
.donation-form label{display:block;margin:10px 0 6px;font-size:15px}
.donation-form input,.donation-form select{width:100%;padding:12px;border-radius:var(--radius-sm);border:1px solid var(--input-border);background:var(--input-bg);color:inherit;font-size:16px;transition:border-color 160ms ease,box-shadow 160ms ease,background 160ms ease}
.donation-form input:focus,.donation-form select:focus{border-color:var(--highlight-border);box-shadow:0 0 0 4px var(--highlight-bg)}
.methods{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap}
.btn{background:var(--btn-primary-bg);color:var(--btn-primary-text);padding:12px 16px;border-radius:var(--radius-md);border:none;cursor:pointer;font-weight:750;font-size:15px;transition:transform 160ms ease,filter 160ms ease,box-shadow 160ms ease}
.btn:hover{transform:translateY(-1px);filter:brightness(1.02);box-shadow:0 10px 24px rgba(2,6,23,0.22)}
.btn:active{transform:translateY(0);filter:brightness(0.99)}
.btn:disabled{opacity:0.55;cursor:not-allowed;transform:none;filter:none;box-shadow:none}
.btn.secondary{background:transparent;border:1px solid var(--btn-secondary-border);color:var(--btn-secondary-text);padding:10px 14px;border-radius:12px;transition:background 160ms ease,border-color 160ms ease,transform 160ms ease}
.btn.secondary:hover{background:var(--highlight-bg);border-color:var(--highlight-border);transform:translateY(-1px)}
.btn.primary-cta{background:var(--btn-primary-bg);color:var(--btn-primary-text);padding:12px 20px;border-radius:var(--radius-pill);box-shadow:0 8px 20px rgba(92,153,220,0.12);border:none;margin-top:6px}
.btn.primary-cta:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(92,153,220,0.16)}

/* Visual style for the active (playing) mantra button */
.btn.active {
  background: var(--btn-primary-bg) !important;
  color: var(--btn-primary-text) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.18);
  transform: translateY(-2px);
  border-radius: 12px;
  border: 1px solid var(--divider);
}

/* `#calc-rashi` now uses `.btn.secondary` so no specific override needed */

.progress{width:100%;background:var(--surface-2);border-radius:var(--radius-pill);padding:4px;border:1px solid var(--divider);margin-top:12px}
.progress-track{width:100%;height:16px;border-radius:999px;background:rgba(0,0,0,0.12);overflow:hidden}
.progress-fill{height:100%;width:0%;background:var(--progress-fill, #ffffff);border-radius:999px;transition:width 600ms ease}
.progress-text{margin-top:8px;font-size:13px;color:var(--text-muted);font-weight:600}

footer{text-align:center;padding:30px 10px;color:var(--text-muted)}
.footer-credit{margin-top:8px;font-size:0.85rem;opacity:0.8}
.footer-meta{margin-top:5px;font-size:0.8rem;opacity:0.7}
.footer-link{color:inherit;text-decoration:underline}

/* Fallback: ensure targeted elements account for fixed navbar */
:target{scroll-margin-top:var(--scroll-offset)}

@media(max-width:900px){.card-grid{grid-template-columns:1fr}.shape3{display:none}}

@media(max-width:900px){.hero-img{width:260px}}

/* Make Facebook embed and Gallery placeholder match other card sizing and be responsive */
/* Gallery and Facebook placeholders: keep equal visible height and center content. */
.gallery-placeholder{height:420px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);border:1px dashed var(--input-border);border-radius:8px;padding:14px;overflow:auto;-webkit-overflow-scrolling:touch}

/* Make placeholder visually match the card surface so embedded widgets
   (which may have white backgrounds) don't create a jarring difference. */
.facebook-card .gallery-placeholder{
  background:var(--card-bg);
}

@media(max-width:700px){
  .facebook-embed{height:320px}
  .gallery-placeholder{height:220px}
}
@media(max-width:480px){.hero-img{width:160px}}

.card a, a[href^="tel:"] {color:var(--link-color);text-decoration:none;box-shadow:inset 0 -1px 0 var(--highlight-border)}
.card a:hover, a[href^="tel:"]:hover {color:var(--link-hover);text-decoration:underline}

.charity-verify-top{font-size:12px;color:var(--text-muted);margin-top:6px}

/* Subtle pill-style highlight for the Verify Charity link */
.charity-verify-top a{
  display:inline-block;
  background:var(--highlight-bg) !important;
  color:var(--text-color) !important;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--highlight-border) !important;
  font-weight:600;
  font-size:13px;
  text-decoration:none;
  box-shadow:0 4px 10px rgba(2,6,23,0.06);
  transition:transform .12s ease,box-shadow .12s ease,opacity .12s ease;
}
.charity-verify-top a:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(2,6,23,0.08);
  opacity:0.98;
}
.charity-verify-top a:hover{color:var(--text-color);text-decoration:underline}

.events-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:16px}
.event-card{background:var(--card-bg);padding:16px;border-radius:var(--radius-sm);border:1px solid var(--card-border);box-shadow:var(--card-shadow);color:var(--card-text, var(--text-color));position:relative;z-index:0}
.event-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;background-color:rgb(var(--card-overlay-color));opacity:var(--card-overlay);transition:opacity 180ms ease}
.event-card > *{position:relative;z-index:1}
.event-card h4{margin:6px 0 8px;font-size:18px;color:var(--heading-color)}
.event-date{font-weight:700;color:var(--text-muted);margin-bottom:0;margin-right:8px}
.event-meta{font-size:14px;color:var(--text-muted)}
.event-time{font-size:14px;color:var(--text-muted);margin-bottom:0}
.event-datetime{display:flex;align-items:center;margin-bottom:8px;flex-wrap:wrap}
/* Ensure at least one visible gap between date and time in Safari: use a pseudo-element fallback */
.event-date::after{content:'\00a0';display:inline-block;width:8px}
.drik-pager-btn{background:transparent;border:1px solid var(--btn-secondary-border);color:var(--text-color);padding:6px 12px;border-radius:18px;font-size:0.92rem;cursor:pointer;min-width:72px;transition:background 160ms ease,border-color 160ms ease}
.drik-pager-btn:hover{background:var(--highlight-bg);border-color:var(--highlight-border)}
.drik-pager-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.drik-pager-status{flex:1;text-align:left;font-size:0.9rem;color:var(--text-muted)}
.drik-pager-actions{display:flex;gap:8px;justify-content:flex-end;align-items:center}

.events-title{text-align:center}

.section > .card,
.section > .events-grid,
.section > .card-grid{
  max-width:1100px;
  margin-left:auto;
  margin-right:auto;
}

.section > .card{width:100%}

.contact-qr{display:flex;align-items:center;gap:10px;margin-top:8px}
.contact-qr img{width:100%;max-width:96px;height:auto;border-radius:8px;border:1px solid var(--card-border);background:#fff}
.download-vcard{display:inline-block}
@media(max-width:600px){.contact-qr{flex-direction:row;gap:8px}.contact-qr img{width:72px;height:72px}}

.qr-pair{display:flex;justify-content:space-between;align-items:flex-start;gap:32px}
.qr-item{flex:0 0 auto;max-width:160px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
.qr-item img{display:block;width:100%;max-width:140px;height:auto;border-radius:8px;border:1px solid var(--card-border);background:#fff}
.qr-caption{margin-top:8px}
.qr-caption-row{display:flex;align-items:center;justify-content:center;gap:6px}
/* Brand icons from Simple Icons CDN (CC0 Public Domain) */
.qr-item img.qr-icon{width:32px;height:32px}

#weather-display{margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--divider)}
#festival-list{margin-top:8px}
#weekly-panchang-list{margin-top:12px}
.wisdom-quote{margin:20px 0;font-style:italic;font-size:1.1rem;border-left:4px solid var(--nav-link-hover);padding-left:16px}
#quote-source{text-align:right;font-weight:bold}
/* Smooth fade when JS swaps quotes */
#quote-text, #quote-source{transition:opacity 180ms ease}

/* Donation QR: match Contact QR visual (rounded, white edge, subtle border) */
.donate-qr{
  width:180px;
  max-width:100%;
  height:auto;
  border-radius:10px;
  padding:4px;
  background:#fff;
  border:1px solid var(--card-border);
  display:block;
  margin: 0 auto;
  object-fit:contain;
}

.paypal-logo{height:16px;filter:brightness(0) invert(1)}
.qr-item:first-child{align-items:flex-start}
.qr-item:last-child{align-items:flex-end}

.contact-qr .qr-pair{width:100%;justify-content:space-between}
.contact-qr .qr-item{flex:0 0 auto}
.contact-qr .qr-item:first-child{align-items:flex-start;justify-content:flex-start}
.contact-qr .qr-item:last-child{align-items:flex-end;justify-content:flex-end}
@media(max-width:600px){
  .qr-pair{flex-direction:row;flex-wrap:nowrap;gap:8px;justify-content:space-between}
  .qr-item{flex:0 1 auto;display:flex;flex-direction:column;align-items:center;min-width:0}
  .qr-item img{width:100%;max-width:100px;height:auto}
  .donate-qr{width:140px}
}

/* Facebook embed card (replaces inline styles) */
.facebook-card{
  /* Keep the same card surface as other .card elements but ensure
     inner content is centered. Avoid resetting padding so the card
     visual matches others. */
  display:block;
  margin-top:20px;
}

.facebook-card .gallery-placeholder{
  /* Ensure the placeholder used for Gallery is also used for Facebook
     and centers its content. */
  display:flex;
  align-items:center;
  justify-content:center;
}

.facebook-embed{
  border:none;
  overflow:auto;
  width:100%;
  max-width:360px;
  height:100%;
  max-height:100%;
  align-self:center;
  display:block;
  margin:0 auto;
  border-radius:8px;
}

.rolling-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: var(--banner-bg);
  color: var(--banner-text);
  overflow: hidden;
  white-space: nowrap;
  padding: 10px 0;
  z-index: 1000;
  border-top: 1px solid var(--banner-border);
  box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
  backdrop-filter: blur(16px);
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}

.rolling-banner-content {
  display: inline-block;
  padding-left: 100%;
  animation: roll 20s linear infinite;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

@media(max-width:600px){
  .rolling-banner { padding: 6px 0; }
  .rolling-banner-content { font-size: 13px; }
}

@keyframes roll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* --- New Features --- */

/* Audio Player */
.audio-player-floating {
  position: fixed;
  bottom: 60px;
  right: 20px;
  background: var(--nav-mobile-bg);
  border: 1px solid var(--nav-border);
  backdrop-filter: blur(16px);
  padding: 10px 16px;
  border-radius: 50px;
  display: none;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  z-index: 999;
  transition: transform 0.3s, background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.audio-player-floating:hover { transform: translateY(-2px); }
.play-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--nav-link-hover);
  border: none;
  color: var(--btn-primary-text);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.fp-track-title {
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--text-color);
}
.fp-close-btn {
  background: none;
  border: none;
  color: var(--text-color);
  cursor: pointer;
  font-size: 1.2rem;
}

/* Brick Wall */
.brick-wall-container {
  background: var(--surface-2);
  padding: 20px;
  border-radius: 12px;
  margin-top: 16px;
}
.brick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: 4px;
  margin-top: 10px;
}
.brick {
  height: 30px;
  background: var(--brick-bg-hover);
  border-radius: 2px;
  opacity: 0.8;
  transition: opacity 0.2s, transform 0.2s;
}
.brick:hover { opacity: 1; transform: scale(1.05); }
.brick.gold { background: var(--brick-gold); box-shadow: 0 0 10px rgba(255, 215, 0, 0.38); }

/* Seva Options */
.seva-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.seva-card {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  padding: 12px;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}
.seva-card:hover {
  border-color: var(--nav-link-hover);
  background: var(--highlight-bg);
}

/* Shloka Card */
.shloka-text {
  font-family: 'Georgia', serif;
  font-size: 1.2rem;
  color: var(--heading-color);
  text-align: center;
  margin: 10px 0;
  line-height: 1.6;
}
#shloka-hindi{ text-align:center; font-style:italic; margin-top:8px; color:var(--heading-color); }
#shloka-meaning{ text-align:center; font-style:italic; }

/* Recipe Card */
.recipe-item {
  display: flex;
  gap: 12px;
  padding: 10px;
  border-bottom: 1px solid var(--card-border);
}
.recipe-item:last-child { border-bottom: none; }
.recipe-img {
  width: 60px; height: 60px;
  border-radius: 8px;
  object-fit: cover;
  background: #333;
}
#rashi-form{margin-top:12px}
#rashi-form input{width:100%;padding:10px 12px;margin-bottom:8px;border:1px solid var(--input-border);border-radius:var(--radius-sm);background:var(--input-bg);color:var(--text-color);transition:border-color 160ms ease,box-shadow 160ms ease}
#rashi-form input:focus{border-color:var(--highlight-border);box-shadow:0 0 0 4px var(--highlight-bg)}
#rashi-result{margin-top:12px;text-align:center;font-weight:bold;display:none}
#rashi-name{color:var(--nav-link-hover)}

/* Aarti page (moved from inline <style> to stylesheet for maintainability) */
.aarti-container{
  max-width:800px;
  margin:40px auto;
  padding:20px;
  text-align:center;
  /* keep content below fixed navbar */
  margin-top: calc(var(--nav-height) + 50px);
}
.aarti-text{
  white-space:pre-wrap;
  font-size:18px;
  line-height:1.8;
  margin-top:20px;
  color:var(--text-color);
  background:var(--card-bg);
  padding:30px;
  border-radius:12px;
  border:1px solid var(--card-border);
  backdrop-filter:blur(6px);
  box-shadow:var(--card-shadow);
}
.aarti-controls{
  margin-bottom:20px;
  display:flex;
  justify-content:center;
  gap:10px;
  align-items:center;
}
.toggle-btn{
  background:var(--input-bg);
  border:1px solid var(--input-border);
  color:var(--text-color);
  padding:8px 16px;
  border-radius:20px;
  cursor:pointer;
  font-size:14px;
  transition:background 160ms ease,border-color 160ms ease,transform 160ms ease;
}
.toggle-btn:hover{transform:translateY(-1px);border-color:var(--highlight-border);background:var(--highlight-bg)}
.toggle-btn.active{
  background:var(--nav-link-hover);
  color:var(--btn-primary-text);
  border-color:var(--nav-link-hover);
  font-weight:700;
}
.back-link{
  display:inline-block;
  margin-bottom:20px;
  color:var(--nav-link-hover);
  text-decoration:none;
  font-size:14px;
}
.back-link:hover{text-decoration:underline}

/* Fallback: ensure targeted elements account for fixed navbar in browsers
  that don't respect `scroll-padding-top` for fragment navigation. */
/* (Defined once near the footer using `--nav-height`.) */

/* Saffron-centered site-wide palette
  Usage: the in-page selector applies a `.saffron-XX` class to the document
  element so the whole site (navbar, body, cards, banners, aarti page, etc.)
  uses the selected colors. Each rule also supports `.navbar.saffron-XX`
  for manual testing via the `.navbar` element.
*/
.saffron-01, .navbar.saffron-01 { --nav-bg:#4e2a04; --nav-mobile-bg:#4e2a04; --nav-link-color:#ffffff; --hamburger-color:#ffffff; --bg-gradient: linear-gradient(135deg,var(--nav-bg), rgba(0,0,0,0.28)); --card-bg: rgba(0,0,0,0.22); --card-border: rgba(255,255,255,0.06); --card-text: #ffffff; --banner-bg: linear-gradient(to right,var(--nav-bg), rgba(0,0,0,0.24)); --btn-primary-bg: linear-gradient(90deg,#ffb74d,#ff8f00); }
.saffron-02, .navbar.saffron-02 { --nav-bg:#6b2e00; --nav-mobile-bg:#6b2e00; --nav-link-color:#ffffff; --hamburger-color:#ffffff; --bg-gradient: linear-gradient(135deg,var(--nav-bg), rgba(0,0,0,0.28)); --card-bg: rgba(0,0,0,0.20); --card-border: rgba(255,255,255,0.05); --card-text: #ffffff; --banner-bg: linear-gradient(to right,var(--nav-bg), rgba(0,0,0,0.24)); --btn-primary-bg: linear-gradient(90deg,#ffb74d,#ff8f00); }
.saffron-03, .navbar.saffron-03 { --nav-bg:#8d3300; --nav-mobile-bg:#8d3300; --nav-link-color:#ffffff; --hamburger-color:#ffffff; --bg-gradient: linear-gradient(135deg,var(--nav-bg), rgba(0,0,0,0.28)); --card-bg: rgba(0,0,0,0.20); --card-border: rgba(255,255,255,0.05); --card-text: #ffffff; --banner-bg: linear-gradient(to right,var(--nav-bg), rgba(0,0,0,0.24)); --btn-primary-bg: linear-gradient(90deg,#ffb74d,#ff8f00); }
.saffron-04, .navbar.saffron-04 { --nav-bg:#a84300; --nav-mobile-bg:#a84300; --nav-link-color:#ffffff; --hamburger-color:#ffffff; --bg-gradient: linear-gradient(135deg,var(--nav-bg), rgba(0,0,0,0.26)); --card-bg: rgba(0,0,0,0.18); --card-border: rgba(255,255,255,0.05); --card-text: #ffffff; --banner-bg: linear-gradient(to right,var(--nav-bg), rgba(0,0,0,0.24)); --btn-primary-bg: linear-gradient(90deg,#ffb74d,#ff8f00); }
.saffron-05, .navbar.saffron-05 { --nav-bg:#cc5200; --nav-mobile-bg:#cc5200; --nav-link-color:#ffffff; --hamburger-color:#ffffff; --bg-gradient: linear-gradient(135deg,var(--nav-bg), rgba(0,0,0,0.26)); --card-bg: rgba(0,0,0,0.16); --card-border: rgba(255,255,255,0.05); --card-text: #ffffff; --banner-bg: linear-gradient(to right,var(--nav-bg), rgba(0,0,0,0.22)); --btn-primary-bg: linear-gradient(90deg,#ffb74d,#ff8f00); }
.saffron-06, .navbar.saffron-06 { --nav-bg:#e65100; --nav-mobile-bg:#e65100; --nav-link-color:#ffffff; --hamburger-color:#ffffff; --bg-gradient: linear-gradient(135deg,var(--nav-bg), rgba(0,0,0,0.22)); --card-bg: rgba(0,0,0,0.14); --card-border: rgba(255,255,255,0.06); --card-text: #ffffff; --banner-bg: linear-gradient(to right,var(--nav-bg), rgba(0,0,0,0.2)); --btn-primary-bg: linear-gradient(90deg,#ffb74d,#ff8f00); }
.saffron-07, .navbar.saffron-07 { --nav-bg:#ff6d00; --nav-mobile-bg:#ff6d00; --nav-link-color:#ffffff; --hamburger-color:#ffffff; --bg-gradient: linear-gradient(135deg,var(--nav-bg), rgba(0,0,0,0.18)); --card-bg: rgba(0,0,0,0.12); --card-border: rgba(255,255,255,0.06); --card-text: #ffffff; --banner-bg: linear-gradient(to right,var(--nav-bg), rgba(0,0,0,0.18)); --btn-primary-bg: linear-gradient(90deg,#ffb74d,#ff8f00); }
.saffron-08, .navbar.saffron-08 { --nav-bg:#ff7a1a; --nav-mobile-bg:#ff7a1a; --nav-link-color:#ffffff; --hamburger-color:#ffffff; --bg-gradient: linear-gradient(135deg,var(--nav-bg), rgba(0,0,0,0.16)); --card-bg: rgba(0,0,0,0.12); --card-border: rgba(255,255,255,0.06); --card-text: #ffffff; --banner-bg: linear-gradient(to right,var(--nav-bg), rgba(0,0,0,0.16)); --btn-primary-bg: linear-gradient(90deg,#ffb74d,#ff8f00); }
.saffron-09, .navbar.saffron-09 { --nav-bg:#ff8f00; --nav-mobile-bg:#ff8f00; --nav-link-color:#ffffff; --hamburger-color:#ffffff; --bg-gradient: linear-gradient(135deg,var(--nav-bg), rgba(0,0,0,0.14)); --card-bg: rgba(0,0,0,0.12); --card-border: rgba(255,255,255,0.06); --card-text: #ffffff; --banner-bg: linear-gradient(to right,var(--nav-bg), rgba(0,0,0,0.14)); --btn-primary-bg: linear-gradient(90deg,#ffb74d,#ff8f00); }
.saffron-10, .navbar.saffron-10 { --nav-bg:#ffa000; --nav-mobile-bg:#ffa000; --nav-link-color:#ffffff; --hamburger-color:#ffffff; --bg-gradient: linear-gradient(135deg,var(--nav-bg), rgba(0,0,0,0.12)); --card-bg: rgba(0,0,0,0.12); --card-border: rgba(255,255,255,0.06); --card-text: #ffffff; --banner-bg: linear-gradient(to right,var(--nav-bg), rgba(0,0,0,0.12)); --btn-primary-bg: linear-gradient(90deg,#ffb74d,#ff8f00); }
.saffron-11, .navbar.saffron-11 { --nav-bg:#ffb300; --nav-mobile-bg:#ffb300; --nav-link-color:#ffffff; --hamburger-color:#ffffff; --bg-gradient: linear-gradient(135deg,var(--nav-bg), rgba(0,0,0,0.10)); --card-bg: rgba(0,0,0,0.10); --card-border: rgba(255,255,255,0.06); --card-text: #ffffff; --banner-bg: linear-gradient(to right,var(--nav-bg), rgba(0,0,0,0.12)); --btn-primary-bg: linear-gradient(90deg,#ffb74d,#ff8f00); }
.saffron-12, .navbar.saffron-12 { --nav-bg:#ffc107; --nav-mobile-bg:#ffc107; --nav-link-color:#ffffff; --hamburger-color:#ffffff; --bg-gradient: linear-gradient(135deg,var(--nav-bg), rgba(0,0,0,0.10)); --card-bg: rgba(0,0,0,0.10); --card-border: rgba(255,255,255,0.06); --card-text: #ffffff; --banner-bg: linear-gradient(to right,var(--nav-bg), rgba(0,0,0,0.10)); --btn-primary-bg: linear-gradient(90deg,#ffb74d,#ff8f00); }
.saffron-13, .navbar.saffron-13 { --nav-bg:#ffd54f; --nav-mobile-bg:#ffd54f; --nav-link-color:#ffffff; --hamburger-color:#ffffff; --bg-gradient: linear-gradient(135deg,var(--nav-bg), rgba(0,0,0,0.08)); --card-bg: rgba(255,213,79,0.10); --card-border: rgba(0,0,0,0.06); --card-text: #102a43; --banner-bg: linear-gradient(to right,var(--nav-bg), rgba(0,0,0,0.10)); --btn-primary-bg: linear-gradient(90deg,#ffb74d,#ff8f00); }
.saffron-14, .navbar.saffron-14 { --nav-bg:#ffe082; --nav-mobile-bg:#ffe082; --nav-link-color:#ffffff; --hamburger-color:#ffffff; --bg-gradient: linear-gradient(135deg,var(--nav-bg), rgba(0,0,0,0.06)); --card-bg: rgba(255,224,130,0.10); --card-border: rgba(0,0,0,0.08); --card-text: #102a43; --banner-bg: linear-gradient(to right,var(--nav-bg), rgba(0,0,0,0.08)); --btn-primary-bg: linear-gradient(90deg,#ffb74d,#ff8f00); }
.saffron-15, .navbar.saffron-15 { --nav-bg:#fff3e0; --nav-mobile-bg:#fff3e0; --nav-link-color:#102a43; --hamburger-color:#102a43; --bg-gradient: linear-gradient(135deg,var(--nav-bg), rgba(0,0,0,0.06)); --card-bg: rgba(255,243,224,0.10); --card-border: rgba(0,0,0,0.08); --card-text: #102a43; --banner-bg: linear-gradient(to right,var(--nav-bg), rgba(0,0,0,0.06)); --btn-primary-bg: linear-gradient(90deg,#ffd54f,#ffb74d); }

/* Additional blue shades (saffron-22 → saffron-31) */
.saffron-22, .navbar.saffron-22 { --nav-bg:#e6f7ff; --nav-mobile-bg:#e6f7ff; --nav-link-color:#05203a; --hamburger-color:#05203a; --bg-gradient: linear-gradient(135deg,var(--nav-bg), rgba(255,255,255,0.8)); --card-bg: rgba(230,247,255,0.10); --card-border: rgba(0,0,0,0.06); --card-text: #05203a; --banner-bg: linear-gradient(to right,var(--nav-bg), rgba(255,255,255,0.8)); --btn-primary-bg: linear-gradient(90deg,#d7f0ff,#bfe6ff); }
.saffron-23, .navbar.saffron-23 { --nav-bg:#ccf0ff; --nav-mobile-bg:#ccf0ff; --nav-link-color:#05203a; --hamburger-color:#05203a; --bg-gradient: linear-gradient(135deg,var(--nav-bg), rgba(255,255,255,0.75)); --card-bg: rgba(204,240,255,0.10); --card-border: rgba(0,0,0,0.06); --card-text: #05203a; --banner-bg: linear-gradient(to right,var(--nav-bg), rgba(255,255,255,0.75)); --btn-primary-bg: linear-gradient(90deg,#c0ecff,#9fe0ff); }
.saffron-24, .navbar.saffron-24 { --nav-bg:#b3e9ff; --nav-mobile-bg:#b3e9ff; --nav-link-color:#05203a; --hamburger-color:#05203a; --bg-gradient: linear-gradient(135deg,var(--nav-bg), rgba(255,255,255,0.7)); --card-bg: rgba(179,233,255,0.10); --card-border: rgba(0,0,0,0.06); --card-text: #05203a; --banner-bg: linear-gradient(to right,var(--nav-bg), rgba(255,255,255,0.7)); --btn-primary-bg: linear-gradient(90deg,#9fe6ff,#7ed6ff); }
.saffron-25, .navbar.saffron-25 { --nav-bg:#99e2ff; --nav-mobile-bg:#99e2ff; --nav-link-color:#05203a; --hamburger-color:#05203a; --bg-gradient: linear-gradient(135deg,var(--nav-bg), rgba(255,255,255,0.65)); --card-bg: rgba(153,226,255,0.10); --card-border: rgba(0,0,0,0.06); --card-text: #05203a; --banner-bg: linear-gradient(to right,var(--nav-bg), rgba(255,255,255,0.65)); --btn-primary-bg: linear-gradient(90deg,#84dcff,#59c8ff); }
.saffron-26, .navbar.saffron-26 { --nav-bg:#80dbff; --nav-mobile-bg:#80dbff; --nav-link-color:#05203a; --hamburger-color:#05203a; --bg-gradient: linear-gradient(135deg,var(--nav-bg), rgba(0,0,0,0.04)); --card-bg: rgba(128,219,255,0.10); --card-border: rgba(0,0,0,0.06); --card-text: #05203a; --banner-bg: linear-gradient(to right,var(--nav-bg), rgba(255,255,255,0.6)); --btn-primary-bg: linear-gradient(90deg,#5fd3ff,#2fb8ff); }
.saffron-27, .navbar.saffron-27 { --nav-bg:#66d4ff; --nav-mobile-bg:#66d4ff; --nav-link-color:#ffffff; --hamburger-color:#ffffff; --bg-gradient: linear-gradient(135deg,var(--nav-bg), rgba(0,0,0,0.06)); --card-bg: rgba(102,212,255,0.10); --card-border: rgba(255,255,255,0.06); --card-text: #05203a; --banner-bg: linear-gradient(to right,var(--nav-bg), rgba(0,0,0,0.06)); --btn-primary-bg: linear-gradient(90deg,#40caff,#12b6ff); }
.saffron-28, .navbar.saffron-28 { --nav-bg:#4fcaff; --nav-mobile-bg:#4fcaff; --nav-link-color:#ffffff; --hamburger-color:#ffffff; --bg-gradient: linear-gradient(135deg,var(--nav-bg), rgba(0,0,0,0.08)); --card-bg: rgba(79,202,255,0.10); --card-border: rgba(255,255,255,0.06); --card-text: #05203a; --banner-bg: linear-gradient(to right,var(--nav-bg), rgba(0,0,0,0.08)); --btn-primary-bg: linear-gradient(90deg,#2dbfff,#00aaff); }
.saffron-29, .navbar.saffron-29 { --nav-bg:#33c0ff; --nav-mobile-bg:#33c0ff; --nav-link-color:#ffffff; --hamburger-color:#ffffff; --bg-gradient: linear-gradient(135deg,var(--nav-bg), rgba(0,0,0,0.1)); --card-bg: rgba(51,192,255,0.10); --card-border: rgba(255,255,255,0.06); --card-text: #05203a; --banner-bg: linear-gradient(to right,var(--nav-bg), rgba(0,0,0,0.1)); --btn-primary-bg: linear-gradient(90deg,#0fb8ff,#009eff); }
.saffron-30, .navbar.saffron-30 { --nav-bg:#1aa6ff; --nav-mobile-bg:#1aa6ff; --nav-link-color:#ffffff; --hamburger-color:#ffffff; --bg-gradient: linear-gradient(135deg,var(--nav-bg), rgba(0,0,0,0.12)); --card-bg: rgba(26,166,255,0.10); --card-border: rgba(255,255,255,0.06); --card-text: #05203a; --banner-bg: linear-gradient(to right,var(--nav-bg), rgba(0,0,0,0.12)); --btn-primary-bg: linear-gradient(90deg,#009eff,#007ecc); }
.saffron-31, .navbar.saffron-31 { --nav-bg:#008fff; --nav-mobile-bg:#008fff; --nav-link-color:#ffffff; --hamburger-color:#ffffff; --bg-gradient: linear-gradient(135deg,var(--nav-bg), rgba(0,0,0,0.14)); --card-bg: rgba(0,143,255,0.10); --card-border: rgba(255,255,255,0.06); --card-text: #ffffff; --banner-bg: linear-gradient(to right,var(--nav-bg), rgba(0,0,0,0.14)); --btn-primary-bg: linear-gradient(90deg,#0077e6,#005fcc); }

/* Additional deeper blue shades (saffron-32 → saffron-41) */
.saffron-32, .navbar.saffron-32 { --nav-bg:#0077e6; --nav-mobile-bg:#0077e6; --nav-link-color:#ffffff; --hamburger-color:#ffffff; --bg-gradient: linear-gradient(135deg,var(--nav-bg), rgba(0,0,0,0.14)); --card-bg: rgba(0,119,230,0.10); --card-border: rgba(255,255,255,0.06); --card-text: #ffffff; --banner-bg: linear-gradient(to right,var(--nav-bg), rgba(0,0,0,0.14)); --btn-primary-bg: linear-gradient(90deg,#006fe6,#005fd6); }
.saffron-33, .navbar.saffron-33 { --nav-bg:#006fe0; --nav-mobile-bg:#006fe0; --nav-link-color:#ffffff; --hamburger-color:#ffffff; --bg-gradient: linear-gradient(135deg,var(--nav-bg), rgba(0,0,0,0.14)); --card-bg: rgba(0,111,224,0.10); --card-border: rgba(255,255,255,0.06); --card-text: #ffffff; --banner-bg: linear-gradient(to right,var(--nav-bg), rgba(0,0,0,0.14)); --btn-primary-bg: linear-gradient(90deg,#0066d6,#0056c6); }
.saffron-34, .navbar.saffron-34 { --nav-bg:#0066d9; --nav-mobile-bg:#0066d9; --nav-link-color:#ffffff; --hamburger-color:#ffffff; --bg-gradient: linear-gradient(135deg,var(--nav-bg), rgba(0,0,0,0.14)); --card-bg: rgba(0,102,217,0.10); --card-border: rgba(255,255,255,0.06); --card-text: #ffffff; --banner-bg: linear-gradient(to right,var(--nav-bg), rgba(0,0,0,0.14)); --btn-primary-bg: linear-gradient(90deg,#005ed0,#004ec0); }
.saffron-35, .navbar.saffron-35 { --nav-bg:#005ccc; --nav-mobile-bg:#005ccc; --nav-link-color:#ffffff; --hamburger-color:#ffffff; --bg-gradient: linear-gradient(135deg,var(--nav-bg), rgba(0,0,0,0.16)); --card-bg: rgba(0,92,204,0.10); --card-border: rgba(255,255,255,0.06); --card-text: #ffffff; --banner-bg: linear-gradient(to right,var(--nav-bg), rgba(0,0,0,0.16)); --btn-primary-bg: linear-gradient(90deg,#0054c0,#0044b0); }
.saffron-36, .navbar.saffron-36 { --nav-bg:#0052bf; --nav-mobile-bg:#0052bf; --nav-link-color:#ffffff; --hamburger-color:#ffffff; --bg-gradient: linear-gradient(135deg,var(--nav-bg), rgba(0,0,0,0.16)); --card-bg: rgba(0,82,191,0.10); --card-border: rgba(255,255,255,0.06); --card-text: #ffffff; --banner-bg: linear-gradient(to right,var(--nav-bg), rgba(0,0,0,0.16)); --btn-primary-bg: linear-gradient(90deg,#004ab5,#003fa5); }
.saffron-37, .navbar.saffron-37 { --nav-bg:#0048b2; --nav-mobile-bg:#0048b2; --nav-link-color:#ffffff; --hamburger-color:#ffffff; --bg-gradient: linear-gradient(135deg,var(--nav-bg), rgba(0,0,0,0.18)); --card-bg: rgba(0,72,178,0.10); --card-border: rgba(255,255,255,0.06); --card-text: #ffffff; --banner-bg: linear-gradient(to right,var(--nav-bg), rgba(0,0,0,0.18)); --btn-primary-bg: linear-gradient(90deg,#0040aa,#003399); }
.saffron-38, .navbar.saffron-38 { --nav-bg:#003e99; --nav-mobile-bg:#003e99; --nav-link-color:#ffffff; --hamburger-color:#ffffff; --bg-gradient: linear-gradient(135deg,var(--nav-bg), rgba(0,0,0,0.2)); --card-bg: rgba(0,62,153,0.10); --card-border: rgba(255,255,255,0.06); --card-text: #ffffff; --banner-bg: linear-gradient(to right,var(--nav-bg), rgba(0,0,0,0.2)); --btn-primary-bg: linear-gradient(90deg,#003688,#002e77); }
.saffron-39, .navbar.saffron-39 { --nav-bg:#003377; --nav-mobile-bg:#003377; --nav-link-color:#ffffff; --hamburger-color:#ffffff; --bg-gradient: linear-gradient(135deg,var(--nav-bg), rgba(0,0,0,0.22)); --card-bg: rgba(0,51,119,0.10); --card-border: rgba(255,255,255,0.06); --card-text: #ffffff; --banner-bg: linear-gradient(to right,var(--nav-bg), rgba(0,0,0,0.22)); --btn-primary-bg: linear-gradient(90deg,#002f66,#002455); }
.saffron-40, .navbar.saffron-40 { --nav-bg:#002b59; --nav-mobile-bg:#002b59; --nav-link-color:#ffffff; --hamburger-color:#ffffff; --bg-gradient: linear-gradient(135deg,var(--nav-bg), rgba(0,0,0,0.24)); --card-bg: rgba(0,43,89,0.10); --card-border: rgba(255,255,255,0.06); --card-text: #ffffff; --banner-bg: linear-gradient(to right,var(--nav-bg), rgba(0,0,0,0.24)); --btn-primary-bg: linear-gradient(90deg,#00264f,#001f44); }
.saffron-41, .navbar.saffron-41 { --nav-bg:#002040; --nav-mobile-bg:#002040; --nav-link-color:#ffffff; --hamburger-color:#ffffff; --bg-gradient: linear-gradient(135deg,var(--nav-bg), rgba(0,0,0,0.26)); --card-bg: rgba(0,32,64,0.10); --card-border: rgba(255,255,255,0.06); --card-text: #ffffff; --banner-bg: linear-gradient(to right,var(--nav-bg), rgba(0,0,0,0.26)); --btn-primary-bg: linear-gradient(90deg,#001a38,#00102a); }

/* Palette + Contrast modal */
.nav-palette{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.nav-palette .swatch{width:30px;height:20px;border-radius:6px;cursor:pointer;border:2px solid rgba(255,255,255,0.08);box-shadow:inset 0 -2px 0 rgba(0,0,0,0.15);transition:transform 120ms ease,box-shadow 120ms ease}
.nav-palette .swatch:focus{outline:2px solid var(--nav-link-hover);outline-offset:2px}
.nav-palette .swatch.active{transform:scale(1.06);box-shadow:0 6px 16px rgba(0,0,0,0.4);border-color:rgba(255,255,255,0.95)}
.nav-palette .reset{width:30px;height:20px;display:flex;align-items:center;justify-content:center;background:transparent;color:var(--text-color);border-radius:6px;border:1px dashed rgba(255,255,255,0.12);cursor:pointer;font-size:12px}

.nav-palette-row{display:flex;gap:8px;align-items:center;margin-bottom:6px}

.palette-toggle{background:transparent;border:1px solid rgba(255,255,255,0.08);padding:8px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--nav-link-color)}
.palette-toggle:hover{border-color:var(--highlight-border);color:var(--nav-link-hover)}

.palette-popover{position:absolute;top:calc(var(--nav-height) + 12px);right:0;background:rgba(6,18,32,0.96);border-radius:14px;border:1px solid rgba(255,255,255,0.06);box-shadow:0 18px 48px rgba(0,0,0,0.38);padding:14px 16px;min-width:320px;z-index:1500;display:none}
.palette-popover.open{display:block}
.palette-popover-inner{display:flex;flex-direction:column;gap:14px;color:var(--text-color)}
.palette-popover-header{display:flex;align-items:center;justify-content:space-between;font-weight:600;font-size:0.95rem}
.palette-close{background:transparent;border:none;color:var(--text-color);font-size:20px;line-height:1;cursor:pointer;padding:2px 6px;border-radius:6px}
.palette-close:hover{background:rgba(255,255,255,0.08)}
.palette-hint{margin:0;color:var(--text-muted);font-size:0.9rem}
.palette-sections{display:flex;flex-direction:column;gap:16px}
.palette-popover-inner .nav-palette{background:rgba(255,255,255,0.04);padding:10px;border-radius:12px;border:1px solid rgba(255,255,255,0.06);box-shadow:inset 0 1px 0 rgba(255,255,255,0.08)}
.palette-popover-inner .nav-palette-row{flex-wrap:wrap}
.palette-popover-inner .reset{width:38px;height:24px}

.card-contrast-control{display:flex;flex-direction:column;gap:10px;padding:16px;background:rgba(255,255,255,0.04);border-radius:12px;border:1px solid rgba(255,255,255,0.06);box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);color:var(--text-color)}
.card-contrast-control .cc-label{font-size:0.9rem;font-weight:600;display:flex;gap:8px;align-items:center}
.card-contrast-control .cc-value{font-weight:600;opacity:0.95}
.card-contrast-control .cc-range{width:100%}
.card-contrast-control .cc-reset{align-self:flex-end;background:transparent;border:1px solid var(--highlight-border);color:var(--text-color);padding:6px 10px;border-radius:8px;cursor:pointer;font-size:0.85rem}

@media(max-width:700px){
  .palette-popover{right:8px;min-width:280px;padding:12px}
}


/* Re-apply light-theme variables at the end to ensure they override palette classes when
   the user selects the light theme via `data-theme="light"`. This ensures the
   light/dark toggle has precedence over per-palette variable overrides. */
[data-theme="light"] {
  --bg-gradient: linear-gradient(135deg, #f0f4f8, #d9e2ec);
  --text-color: #102a43;
  --text-muted: #486581;
  --heading-color: #102a43;

  --surface-2: rgba(255, 255, 255, 0.45);
  --divider: rgba(0, 0, 0, 0.06);
  --shadow-soft: 0 14px 36px rgba(0, 0, 0, 0.06);

  /* Light theme cards: off-white panels with subtle border for a professional look */
  --card-bg: rgba(255, 255, 255, 0.96);
  --card-border: rgba(0, 0, 0, 0.06);
  --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  --card-hover-shadow: 0 22px 48px rgba(0, 0, 0, 0.08);

  --nav-bg: rgba(255, 255, 255, 0.7);
  --nav-mobile-bg: rgba(255, 255, 255, 0.95);
  --nav-border: rgba(0, 0, 0, 0.05);
  --nav-link-color: #334e68;
  --nav-link-hover: #0052cc;
  --hamburger-color: #102a43;

  --banner-bg: linear-gradient(to right, rgba(255, 255, 255, 0.8), rgba(240, 244, 248, 0.8));
  --banner-border: rgba(0, 0, 0, 0.05);
  --banner-text: #102a43;

  --input-bg: rgba(255, 255, 255, 0.5);
  --input-border: rgba(0, 0, 0, 0.1);

  --btn-primary-bg: linear-gradient(90deg, #0052cc, #2680eb);
  --btn-primary-text: #ffffff;
  --btn-secondary-border: rgba(0, 0, 0, 0.1);
  --btn-secondary-text: #102a43;

  --link-color: #0052cc;
  --link-hover: #003e9b;

  --shape-color: rgba(0, 82, 204, 0.08);
  --highlight-bg: rgba(0, 82, 204, 0.06);
  --highlight-border: rgba(0, 82, 204, 0.1);
  /* For light theme, using a white overlay will brighten cards when needed */
  --card-overlay-color: 255,255,255;
}

/* Accessibility: Visually hidden but accessible to screen readers */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Utility classes for inline style removal */
.hidden {
  display: none !important;
}

.ml-8 {
  margin-left: 8px;
}

.text-center {
  text-align: center;
}

.paypal-btn-img {
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  background: none;
  max-width: 240px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.gift-aid-link {
  font-weight: bold;
  color: #ffd700;
  text-decoration: underline;
}