/* Shared design tokens, layout chrome and generic components used across every
   tab. Tab-specific visual styling lives in css/themes/<tab-name>/style.css —
   see that folder for the styling that belongs to one particular tab only. */

:root {
  --maroon: #7a1f2b;
  --maroon-dark: #5c1620;
  --gold: #c9a227;
  --gold-light: #e8c766;
  --cream: #fff8ee;
  --ink: #2b2016;
  --success: #2e7d32;
  --pending: #a06a00;
  --danger: #b3261e;
  --radius: 20px;
  --shadow: 0 6px 24px rgba(90, 30, 20, 0.08);
}

* { box-sizing: border-box; }

/* Theme-matched focus ring (replaces the default blue outline, which clashed
   with the maroon/gold palette) — kept visible for keyboard users. */
button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  background:
    radial-gradient(circle at top right, rgba(201,162,39,0.08), transparent 40%),
    radial-gradient(circle at bottom left, rgba(122,31,43,0.05), transparent 40%),
    var(--cream);
  color: var(--ink);
}

h1, h2, h3 { font-family: 'Playfair Display', serif; }

h2 {
  position: relative;
  padding-bottom: 12px;
  color: var(--maroon);
}
h2::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), transparent);
  border-radius: 3px;
}

.container {
  max-width: min(1200px, 94%);
  margin: 0 auto;
  padding: 32px 20px 64px;
}

.about-text { font-size: 16px; line-height: 1.6; max-width: 720px; }

/* Header / nav */
.site-header {
  background: linear-gradient(135deg, var(--maroon), var(--maroon-dark));
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
  border-bottom: 3px solid var(--gold);
}
.header-inner {
  position: relative;
  max-width: min(1600px, 96%);
  margin: 0 auto;
  padding: 10px 24px 12px;
}
.brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.brand-mark {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 30px;
  color: var(--gold-light);
  text-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
/* Header title block: bigger, centered, stylish serif — matches the same
   treatment used on the root/Developmental/Emergency page headers. */
.brand-text { flex: 1 1 auto; text-align: center; }
.brand h1 {
  margin: 0;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(22px, 3.4vw, 32px);
  letter-spacing: 0.3px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.tagline {
  margin: 4px 0 0;
  font-size: clamp(12px, 1.4vw, 15px);
  color: #f1d9b0;
  letter-spacing: 0.4px;
}

/* Top-right utility cluster: language toggle, login, notifications, admin */
.header-utility {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
}
.utility-btn {
  padding: 7px 14px;
  font-size: 13px;
}
/* Contact Us in the utility cluster: a lighter "ghost" style so it visually
   reads as secondary next to Login/Notifications.
   Compound selector (.tab-btn.contact-btn) so this reliably beats the base
   .tab-btn rule regardless of source order/specificity ties. */
.tab-btn.contact-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.35);
  color: #f1d9b0;
}
.tab-btn.contact-btn:hover { background: rgba(255,255,255,0.1); }

/* Login button once signed in: shows the resident/admin's name, plus an
   "Admin" tag for anyone on the config/admins whitelist (see
   updateAuthDisplay() in js/app.js). */
#authButton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.admin-badge {
  background: var(--gold);
  color: var(--maroon-dark);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 999px;
  cursor: pointer;
}
.admin-badge:hover { background: var(--gold-light); }

@media (max-width: 760px) {
  .header-inner { padding: 6px 14px 8px; }
  .back-link { font-size: 11px; margin-bottom: 2px; }
  .brand { padding-bottom: 4px; margin-bottom: 4px; gap: 8px; }
  /* clamp()'s mobile floor (not just its vw-scaled value) needed lowering
     too — 22px was still the number actually rendering on every phone
     narrower than ~650px, i.e. all of them. */
  .brand h1 { font-size: clamp(19px, 3.4vw, 32px); }
  .tagline { margin-top: 2px; font-size: clamp(11px, 1.4vw, 15px); }

  /* Centered instead of right-aligned: right-aligning a cluster that wraps
     onto 2 rows made each row end up at a different length/position (a
     "staircase" look). Centering keeps both rows visually balanced. */
  .header-utility { width: 100%; justify-content: center; margin-top: 0; gap: 5px; }
  .utility-btn { padding: 5px 11px; font-size: 12px; }
  .lang-btn { padding: 4px 9px; font-size: 11px; }

  /* A long signed-in display name (or a long email fallback) could push the
     bell/hamburger onto their own extra row — truncate so the name+badge
     pill stays a predictable width and the rest of the row still fits. */
  .auth-name {
    display: inline-block;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
  }
}

/* Check Payment Status: flows inline with the rest of the nav (wraps onto
   whichever row has room, like any other pill) but stays visually the most
   prominent call to action via the gold fill. Compound selector for the
   same specificity-over-order reason as above. */
.tab-btn.status-btn {
  background: var(--gold);
  color: var(--maroon-dark);
  border-color: var(--gold);
  font-weight: 700;
  padding: 7px 20px;
}
.tab-btn.status-btn:hover { background: var(--gold-light); }

/* Language toggle (EN / HI / BN) */
.lang-toggle {
  display: inline-flex;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 999px;
  padding: 3px;
}
.lang-btn {
  background: transparent;
  border: none;
  color: #f1d9b0;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.lang-btn.active { background: var(--gold); color: var(--maroon-dark); }

.tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  row-gap: 8px;
}
.tab-btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s;
}
.tab-btn:hover { background: rgba(255,255,255,0.2); }
.tab-btn.active { background: var(--gold); color: var(--maroon-dark); border-color: var(--gold); }
.admin-link { margin-left: 6px; }

/* Celebration group: the four Puja events shown together as visible options
   (not a hidden dropdown) inside a labeled pill cluster. */
.nav-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(201,162,39,0.14);
  border: 1px solid rgba(201,162,39,0.4);
  border-radius: 999px;
  padding: 3px 8px 3px 12px;
  flex-wrap: wrap;
}
.nav-group-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gold-light);
  font-weight: 700;
  margin-right: 2px;
}
.nav-group .tab-btn {
  padding: 5px 10px;
  font-size: 13px;
}

/* Scalability: as more events/activities are added to a group, scroll
   horizontally within its pill instead of wrapping to ever-more rows (which
   would keep growing the header's height unpredictably). Nothing is hidden
   behind a click — it's a swipe/scroll away, still "in the same screen".
   Desktop only; on mobile the group already stacks vertically inside the
   hamburger panel, where vertical scrolling is more natural. */
@media (min-width: 761px) {
  .nav-group {
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: min(580px, 40vw);
    scrollbar-width: thin;
  }
  .nav-group-label { flex-shrink: 0; }
  .nav-group .tab-btn { flex-shrink: 0; white-space: nowrap; }
}

/* Notifications: a top-right icon button, like a typical site's bell icon */
.notif-bell {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  line-height: 1;
}

/* Mobile menu toggle — sits at the end of the utility cluster (after the
   notifications bell) so on mobile it reads as one coherent right-aligned
   icon row, like the desktop utility bar, instead of a separate isolated
   button below it. Hidden on desktop, shown below the breakpoint. */
.mobile-menu-toggle {
  display: none;
  width: 38px;
  height: 38px;
  padding: 0;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  border-radius: 50%;
}

@media (max-width: 760px) {
  .header-inner { position: relative; }

  .mobile-menu-toggle { display: inline-flex; }

  /* Collapsed by default: an overlay panel, not a permanent stack that
     buries page content below the fold. Scoped to #mainTabs (the cultural
     site's nav, which has a hamburger toggle to reveal it) rather than the
     bare .tabs class — the Admin Panel also uses .tabs for its much
     simpler "Back to Site / Sign Out" nav, has no hamburger toggle at all,
     and was scoping this rule to plain .tabs left that nav permanently
     display:none on mobile with no way to open it. */
  #mainTabs {
    display: none;
    flex-direction: column;
    /* Without this, the base .tabs rule's flex-wrap:wrap is still in
       effect — combined with flex-direction:column and a bounded
       max-height below, a column-direction flex container that wraps
       doesn't overflow vertically, it starts a NEW COLUMN instead (classic
       flex gotcha). That's what made this panel render as 2+ side-by-side
       columns with no way to reach anything past the first one: the real
       overflow was horizontal, but only vertical scrolling was ever set
       up. nowrap forces genuine single-column stacking, so the content
       that doesn't fit actually overflows downward and overflow-y:auto
       can scroll to it. */
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
    position: absolute;
    left: 20px;
    right: 20px;
    top: 100%;
    margin-top: 10px;
    background: var(--maroon-dark);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 14px;
    padding: 10px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    box-shadow: 0 16px 40px rgba(0,0,0,0.35);
    /* iOS Safari computes vh against the viewport with its address/tab
       bars hidden, not the actually-visible height with them shown — so a
       plain 75vh box can be taller than what's really on screen, making
       the bottom of the scroll area unreachable even though scrolling
       "works". dvh (dynamic viewport height) accounts for that; declared
       second so browsers that support it override the vh fallback, and
       older ones just keep using vh. Also capped lower (68vh) and the
       content below made more compact, so scrolling the full list is
       needed less often in the first place. */
    max-height: 68vh;
    max-height: 68dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 20;
  }
  #mainTabs.open { display: flex; }

  /* Every group reads as the same kind of "card" on mobile — consistent
     background/border/padding regardless of which group it is, matching
     the desktop pill styling translated to a stacked layout. Sized down
     from the desktop pills so the whole list needs less scrolling. */
  .tab-btn { font-size: 13px; }
  .nav-group {
    flex-direction: column;
    align-items: stretch;
    border-radius: 10px;
    padding: 6px 8px;
    gap: 4px;
  }
  .nav-group-label { margin: 0 0 1px; font-size: 10px; }
  .nav-group .tab-btn { text-align: left; padding: 6px 12px; font-size: 13px; }

  .tab-btn.status-btn { padding: 8px 14px; text-align: center; }

  .notif-bell { margin-left: 0; }
  .admin-link { margin-left: 0; }
}

/* Tabs content */
.tab-panel { display: none; animation: fadeIn 0.3s ease; }
.tab-panel.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* Generic card component (used by Home + Contact Us) */
.info-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 24px;
}
.card {
  background: #fff;
  border: 1px solid #eadfc9;
  border-radius: 28px 28px 28px 6px;
  padding: 24px;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:nth-child(even) { border-radius: 28px 28px 6px 28px; }
.card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(90,30,20,0.16); }
.card h3 { margin-top: 0; color: var(--maroon); }

/* Map embed (used by Home + Contact Us) */
.map-embed {
  margin-top: 14px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #eadfc9;
}
.map-embed iframe {
  width: 100%;
  height: 220px;
  border: 0;
  display: block;
}

/* Generic buttons */
button {
  background: var(--maroon);
  color: #fff;
  border: none;
  padding: 11px 24px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}
button:hover { background: var(--maroon-dark); transform: translateY(-1px); }
button.secondary { background: #ccc; color: #222; margin-left: 8px; }
button:disabled { opacity: 0.6; cursor: not-allowed; }

/* Generic form field styling shared by every payment form (Khunti/Durga/Laxmi/Kali) */
.payment-form label, .status-form label {
  display: block;
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 500;
}
.payment-form input, .payment-form textarea, .status-form input,
.payment-form select, .status-form select {
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid #d8cbb0;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  background: #fff;
}

/* Flat Number picker: three dropdowns (Block / Floor / Flat) side by side,
   combining into one value carried by a hidden input — see js/app.js. */
.flat-select-group {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.flat-select-group select {
  margin-top: 0;
  flex: 1 1 0;
  min-width: 0;
}
/* About / Contribution sub-tabs inside each Puja event tab — mutually
   exclusive, matching the same toggle pattern as the status-lookup toggle. */
.puja-subtabs {
  display: inline-flex;
  background: #fff;
  border: 1px solid #eadfc9;
  border-radius: 999px;
  padding: 4px;
  margin-top: 16px;
  box-shadow: var(--shadow);
}
.puja-panel { display: none; }
.puja-panel.active { display: block; margin-top: 20px; animation: fadeIn 0.25s ease; }
/* Contribution panel specifically: QR box + payment form side by side
   (instead of the default block stacking) so the wide page container
   doesn't leave a large empty gap next to the narrow QR box. Compound
   selector beats the generic .puja-panel.active rule above regardless of
   source order. */
.puja-panel.active[data-pujapanel="contribution"] {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 32px;
}

.field-hint { font-size: 12px; color: #776a55; margin: -6px 0 12px; }

/* Dynamic UPI ID + a single "Copy UPI ID" button inside .qr-box — shown
   once js/app.js's loadPaymentSettings() finds an admin-set UPI ID for
   that event; hidden by default (see the `hidden` attribute in the HTML).
   No app-specific deep links (tried and abandoned — see the comment above
   loadPaymentSettings() in js/app.js) — copy-and-paste is the one flow
   confirmed to work with every UPI app. */
.upi-id-display {
  font-size: 13px;
  font-weight: 600;
  color: var(--maroon);
  margin-top: 12px;
  word-break: break-all;
}
.upi-app-buttons { margin-top: 12px; }
.upi-copy-btn {
  width: 100%;
  padding: 10px 16px;
  background: var(--maroon);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  box-shadow: var(--shadow);
}
.upi-copy-btn:hover { background: var(--maroon-dark); }

/* Screenshot upload field gets a brief highlight when the resident returns
   to the tab after tapping "Pay via UPI App" (see the window focus
   listener in js/app.js), so it's obvious what to do next. */
.upi-return-highlight {
  animation: upiReturnPulse 2s ease;
  border-radius: 10px;
}
@keyframes upiReturnPulse {
  0%, 100% { box-shadow: none; }
  20%, 60% { box-shadow: 0 0 0 4px rgba(201,162,39,0.5); }
}

/* Fieldset reset — used to disable a whole payment form at once until login */
fieldset.payment-fields {
  border: none;
  padding: 0;
  margin: 0;
  min-width: 0;
}
fieldset.payment-fields:disabled { opacity: 0.55; }
.payment-form input[readonly] { background: var(--cream); cursor: not-allowed; }

/* Optional login hint shown above a payment form's fields (login is not
   required to pay — see updatePaymentGates() in js/app.js) */
.login-gate {
  background: rgba(201,162,39,0.1);
  border: 1px dashed var(--gold);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
  text-align: center;
}
.login-gate p { margin: 0 0 10px; font-size: 14px; color: var(--maroon-dark); }
.ocr-status { font-size: 13px; margin-bottom: 12px; min-height: 1em; }
.ocr-status.scanning { color: var(--pending); }
.ocr-status.found { color: var(--success); }
.ocr-status.not-found { color: #776a55; }
.form-status { margin-top: 12px; font-size: 14px; }
.form-status.error { color: var(--danger); }
.form-status.success { color: var(--success); }

/* Admin-only: payment screenshot thumbnail (shown across all events) */
.screenshot-thumb {
  max-width: 220px;
  border-radius: 14px;
  border: 1px solid #eadfc9;
  margin: 8px 0;
  cursor: zoom-in;
  transition: max-width 0.2s ease;
}
.screenshot-thumb.screenshot-thumb-large {
  max-width: 100%;
  cursor: zoom-out;
}

/* Footer */
.site-footer {
  text-align: center;
  padding: 24px;
  background: var(--maroon-dark);
  color: #f1d9b0;
  font-size: 13px;
}

/* Receipt code modal (shown after submitting any payment form) */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: #fff;
  border-radius: var(--radius);
  padding: 28px;
  max-width: 420px;
  width: 90%;
  text-align: center;
}
.modal-box h3 { color: var(--maroon); margin-top: 0; }
.receipt-code {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
  background: var(--cream);
  border: 1px dashed var(--gold);
  border-radius: 8px;
  padding: 12px;
  margin: 16px 0;
  color: var(--maroon-dark);
}

/* Event banner (Khunti Puja, Durga Puja, and future events): shows the full
   artwork without cropping or distortion. Any letterboxing is filled with a
   blurred, darkened copy of the same image as a thematic backdrop instead of
   plain empty space. Markup: a .banner-backdrop element with its own inline
   background-image (NOT a CSS custom property — url() in a var() resolves
   relative to the stylesheet it's used in, not the HTML file, which breaks
   relative paths), plus the sharp <img> on top. */
.event-banner {
  position: relative;
  width: 100%;
  max-height: 480px;
  overflow: hidden;
  border-bottom: 4px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--maroon-dark);
}
.event-banner img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: contain;
  display: block;
}

/* Home tab: rotating carousel of event banners */
.banner-carousel {
  position: relative;
  width: 100%;
  max-height: 420px;
  overflow: hidden;
  border-bottom: 4px solid var(--gold);
}
.banner-carousel .carousel-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.9s ease;
  background: var(--maroon-dark);
}
.banner-carousel .carousel-slide.active { opacity: 1; position: relative; }
.banner-carousel img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: contain;
  display: block;
}

/* Shared blurred backdrop, used inside .event-banner and .carousel-slide */
.banner-backdrop {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(28px) brightness(0.55) saturate(1.15);
  transform: scale(1.15);
  z-index: 0;
}
.carousel-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
}
.carousel-dots .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  border: none;
  padding: 0;
  cursor: pointer;
}
.carousel-dots .dot.active { background: var(--gold); }

/* Toast notifications (see js/toast.js) */
.toast-container {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 320px;
}
.toast {
  background: #fff;
  border-left: 4px solid var(--maroon);
  border-radius: 8px;
  padding: 12px 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  font-size: 14px;
  color: var(--ink);
  animation: toastIn 0.25s ease;
}
.toast.success { border-left-color: var(--success); }
.toast.error { border-left-color: var(--danger); }
.toast-out { animation: toastOut 0.2s ease forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(24px); } }

/* Back-link to the community landing page — kept in normal flow (an
   absolutely-positioned version was tried to save its row entirely, but it
   overlapped the title since nothing pushed the title down to compensate).
   Kept small so its row costs as little height as possible. */
.back-link {
  display: inline-block;
  color: #f1d9b0;
  font-size: 12px;
  text-decoration: none;
  margin-bottom: 4px;
}
.back-link:hover { text-decoration: underline; }