/* ═══════════════════════════════════════════════════════════════
   mobile-fix.css — Comprehensive Mobile-First Fixes
   Hreem Peetham  ·  Append <link> after main.css & admin.css
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1. RECEIPT LOOKUP CARD ─────────────────────────────────── */
.receipt-lookup-card {
  padding: 18px 16px;
}
.receipt-lookup-card h3 {
  font-size: 16px;
  margin-bottom: 6px;
}
.receipt-lookup-row {
  display: flex;
  flex-direction: column;    /* stack by default (mobile-first) */
  gap: 10px;
  flex-wrap: nowrap;
}
.receipt-lookup-row input {
  width: 100%;
  min-width: 0;
  font-size: 15px;           /* prevents iOS auto-zoom (≥16px triggers zoom) */
  padding: 12px 14px;
  border-radius: 8px;
  border: 1.5px solid var(--bd);
  font-family: inherit;
  background: #fff;
  color: var(--td);
  transition: border .2s;
  -webkit-appearance: none;
}
.receipt-lookup-row input:focus { border-color: var(--gd); outline: none; }
.receipt-lookup-row .btn {
  width: 100%;
  justify-content: center;
  padding: 13px;
  font-size: 15px;
}

/* Wider screens — inline row */
@media (min-width: 480px) {
  .receipt-lookup-row {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .receipt-lookup-row input  { flex: 1; min-width: 200px; }
  .receipt-lookup-row .btn   { width: auto; padding: 12px 20px; }
}

/* ─── 2. RECEIPT MODAL ───────────────────────────────────────── */
/* The dynamically-created modal uses .modal-box.modal-receipt */
.modal-overlay { padding: 10px; }

.modal-box {
  background: #fff;
  border-radius: 14px;
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,.22);
  display: flex;
  flex-direction: column;
}
/* Receipt modal header */
.modal-receipt .modal-header,
#receipt-modal .modal-header {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--bd);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
  gap: 10px;
}
.modal-receipt .modal-title,
#receipt-modal .modal-title {
  font-family: 'Crimson Text', serif;
  font-size: 18px;
  color: var(--mn);
  font-weight: 600;
  line-height: 1.2;
}
.modal-receipt .modal-body,
#receipt-modal .modal-body {
  padding: 14px 14px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.modal-receipt .modal-footer,
#receipt-modal .modal-footer {
  padding: 12px 14px;
  border-top: 1px solid var(--bd);
  background: #fff;
  position: sticky;
  bottom: 0;
}

/* ─── 3. RECEIPT CARD CONTENT ────────────────────────────────── */
.receipt-wrap {
  padding: 0;
  max-width: 100%;
}
.receipt-header {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 12px;
}
@media (min-width: 420px) {
  .receipt-header {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
  }
}
.receipt-logo { width: 52px; height: 52px; flex-shrink: 0; }
.receipt-org h2 { font-size: 16px; }
.receipt-org p  { font-size: 11px; line-height: 1.5; }

.receipt-title {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.receipt-type  { font-size: 14px; font-weight: 700; color: #1a0533; }
.status-ok     { font-size: 12px; }
.status-pending{ font-size: 12px; }

.receipt-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.receipt-table td { padding: 7px 6px; }
/* Make label column not overflow on small screens */
.receipt-table td:first-child {
  width: 38%;
  font-size: 11px;
  color: #777;
  white-space: normal;   /* allow wrap on tiny phones */
  word-break: break-word;
}
.receipt-table .amt-row td { font-size: 14px; }
.receipt-footer { font-size: 11px; }

/* Receipt modal action buttons — stack on small, row on wide */
.receipt-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.receipt-modal-actions .btn {
  flex: 1;
  min-width: 90px;
  justify-content: center;
  font-size: 12px;
  padding: 9px 10px;
}
@media (min-width: 400px) {
  .receipt-modal-actions { justify-content: flex-end; }
  .receipt-modal-actions .btn { flex: none; }
}

/* ─── 4. CONTACT PAGE — fix sec-sub inside receipt-lookup ───── */
.receipt-lookup-card .sec-sub {
  font-size: 13px;
  margin: 0 0 12px;
  line-height: 1.5;
}

/* ─── 5. GENERAL MODAL IMPROVEMENTS ─────────────────────────── */
/* Reinforce flex-column scroll layout for all modals */
.modal {
  max-width: calc(100vw - 20px);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-body {
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1 1 auto;
  overscroll-behavior: contain;
}
/* Prevent any modal inner content from causing horizontal overflow */
.modal-body * { max-width: 100%; }
.modal-body textarea,
.modal-body input { font-size: 15px; }  /* prevent iOS zoom */
.modal-body select { font-size: 15px; }

/* ─── 6. DONATION SECTION INPUTS (prevent iOS zoom) ─────────── */
.form-group input,
.form-group select,
.form-group textarea {
  font-size: 15px;  /* ≥16px prevents iOS zoom; 15px is close enough with viewport */
}
@media (max-width: 768px) {
  .form-group input,
  .form-group select,
  .form-group textarea { font-size: 16px; }  /* strictly prevent iOS zoom on mobile */
}

/* ─── 7. DONATION LAYOUT — sidebar stacking ──────────────────── */
@media (max-width: 768px) {
  .donation-layout { grid-template-columns: 1fr; gap: 16px; }
  .donation-card { padding: 16px; }
  .sidebar-card  { padding: 14px; }
  .amount-btns   { gap: 7px; }
  .amt-btn       { padding: 9px 12px; font-size: 13px; }
}

/* ─── 8. CONTACT GRID ────────────────────────────────────────── */
@media (max-width: 768px) {
  .contact-grid { grid-template-columns: 1fr; gap: 16px; }
  .contact-info-card,
  .contact-form-card { padding: 16px; }
  .map-container { height: 200px; }
}

/* --- 9. HERO - mobile: image on top, content below ----------- */
@media (max-width: 480px) {

  /* Hero: flex column so image sits on top, content flows below.
     padding-top = nav height (56px) so nav never covers the image.   */
  .hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding-top: 56px;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    min-height: 0;
    max-height: none;
    height: auto;
    overflow: visible;
  }

  /* Slider: normal-flow block sized by image aspect ratio.
     Banner is 1920x800 -> padding-top = 800/1920 x 100 = 41.6667%   */
  .hero-slider {
    position: relative !important;
    width: 100%;
    height: 0;
    padding-top: 41.6667%;
    flex-shrink: 0;
  }

  /* Slides fill the slider box absolutely */
  .hero-slide {
    position: absolute;
    inset: 0;
    background-size: contain;      /* full image, zero crop */
    background-repeat: no-repeat;
    background-position: center center;
  }

  /* No overlay - let the banner image show fully */
  .hero-slide-overlay { display: none; }

  /* Dot indicators sit inside the slider box */
  .hero-slide-dots {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
  }

  /* Content: normal flow BELOW the image, dark maroon bg continues */
  .hero-content {
    position: static !important;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 12px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(180deg, #3a0d00 0%, #1A0500 100%);
  }

  /* Hide non-essential elements */
  .hero-eyebrow { display: none; }
  .hero-desc    { display: none; }
  .hero-ticker  { display: none; }
  .hero-social  { display: none; }
  .hero-text    { margin-bottom: 10px; }

  /* Essential text */
  .hero-h1     { font-size: 20px; line-height: 1.2; margin-bottom: 4px; text-align: center; color: #fff; }
  .hero-telugu { font-size: 13px; margin-bottom: 0; text-align: center; }

  /* 3 CTA buttons in 2-col grid, third spans full width */
  .hero-ctas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    width: 100%;
  }
  .hero-ctas .btn:last-child { grid-column: 1 / -1; }
  .hero-ctas .btn {
    font-size: 12px;
    padding: 9px 8px;
    justify-content: center;
    width: 100%;
  }
}

/* ─── 9b. HEADER — stop title from overflowing the fixed nav on mobile ─ */
@media (max-width: 768px) {
  .main-nav { height: 56px; padding: 0 10px; }
  #site-main { padding-top: 56px; }
}
/* Tablet hero (481px–768px): auto height, normal padding — no fixed vw */
@media (min-width: 481px) and (max-width: 768px) {
  .hero { padding: 64px 14px 36px; min-height: 0; max-height: none; height: auto; }
}
@media (max-width: 768px) {
  .nav-logo { width: 34px; height: 34px; border-width: 1.5px; }
  .nav-brand-text h1 { font-size: 14.5px; }
  .nav-brand-text span { font-size: 9px; }
  .nav-right { gap: 4px; }
  /* Admin login already lives inside the ☰ menu on mobile — no need for
     a second entry point competing for header space. */
  .nav-admin-btn { display: none; }
}
@media (max-width: 360px) {
  .nav-brand-text span { display: none; }
}

/* ─── 10. HOME GRID ──────────────────────────────────────────── */
@media (max-width: 480px) {
  .home-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .home-card { padding: 14px 10px; }
  .home-card h3 { font-size: 14px; }
  .home-card p  { font-size: 11px; }
  .hc-icon { font-size: 28px; }
}
@media (max-width: 340px) {
  .home-grid { grid-template-columns: 1fr; }
}

/* ─── 11. PRODUCTS GRID (catalog) ────────────────────────────── */
@media (max-width: 480px) {
  .products-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
  .product-image { height: 130px; }
  .product-body  { padding: 10px; }
  .product-body h3    { font-size: 15px; }
  .product-body p     { font-size: 11px; -webkit-line-clamp: 2; }
  .product-bottom strong { font-size: 14px; }
  .product-bottom .btn   { padding: 6px 8px; font-size: 11px; }
}

/* ─── 12. SERVICES / EVENTS GRID ─────────────────────────────── */
@media (max-width: 640px) {
  .services-grid,
  .events-grid { grid-template-columns: 1fr; gap: 12px; }
  .service-card,
  .event-card   { padding: 14px; }
  .sc-media     { height: 140px; }
  .event-banner { height: 120px !important; }
}

/* ─── 13. DETAIL PAGE ────────────────────────────────────────── */
@media (max-width: 640px) {
  .detail-hero {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 12px;
  }
  .detail-image { height: 240px; }
  .detail-copy h1 { font-size: 28px; }
  .detail-price   { font-size: 22px; }
  .detail-content { padding: 14px; }
  .detail-actions { flex-wrap: wrap; gap: 8px; }
  .detail-actions .btn { flex: 1; justify-content: center; min-width: 0; }
}

/* ─── 14. SECTION TITLE / NAV ────────────────────────────────── */
@media (max-width: 640px) {
  .sec-title { font-size: 24px; }
  .sec-sub   { font-size: 13px; }
  #site-main { padding: 62px 12px 96px; }
}

/* ─── 15. BOTTOM NAV ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .mobile-bottom-nav { display: flex !important; }
  .mbn-btn { font-size: 9px; padding: 5px 6px; min-width: 0; flex: 1; }
  .mbn-btn span { font-size: 18px; }
}
/* Prevent overflow when 6 items */
@media (max-width: 380px) {
  .mobile-bottom-nav { overflow-x: auto; }
  .mbn-btn { min-width: 56px; font-size: 8px; }
}

/* ─── 16. POLICY CARDS ───────────────────────────────────────── */
@media (max-width: 640px) {
  .policy-card { padding: 14px; }
  .policy-card h3 { font-size: 17px; }
}

/* ─── 17. PAYMENT OPTIONS in modals ─────────────────────────── */
@media (max-width: 400px) {
  .payment-options { grid-template-columns: 1fr 1fr; gap: 7px; }
  .pay-opt { padding: 9px 7px; }
  .pay-icon { font-size: 17px; }
}

/* ─── 18. BOOKING / EVENT MODALS ─────────────────────────────── */
@media (max-width: 600px) {
  .modal { max-width: 100%; border-radius: 14px 14px 0 0; display: flex; flex-direction: column; overflow: hidden; }
  .modal-overlay {
    align-items: flex-end;    /* sheet slides up from bottom */
    padding: 0;
  }
  .modal-overlay .modal {
    max-height: 92vh;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .modal-header,
  .modal-footer { flex-shrink: 0; }
  /* Override for receipt modal to center it */
  #receipt-modal.modal-overlay { align-items: center; padding: 10px; }
  #receipt-modal .modal-box    { border-radius: 14px; }
}
@media (max-width: 400px) {
  .modal-header { padding: 14px 12px 10px; }
  .modal-body   { padding: 12px; }
  .modal-footer { padding: 10px 12px; flex-wrap: wrap; }
  .modal-footer .btn { flex: 1; justify-content: center; font-size: 13px; }
}

/* ─── 19. ORDER SUMMARY ──────────────────────────────────────── */
@media (max-width: 400px) {
  .order-summary { padding: 10px; }
  .order-row     { font-size: 12px; }
}

/* ─── 20. WHATSAPP FLOAT BUTTON ──────────────────────────────── */
@media (max-width: 480px) {
  .wa-float {
    right: 10px;
    bottom: 76px;
    padding: 10px 12px;
    font-size: 11px;
  }
  .wa-float b { display: none; }
}

/* ─── 21. TOAST NOTIFICATION ─────────────────────────────────── */
@media (max-width: 480px) {
  .toast {
    top: auto;
    bottom: 90px;
    right: 10px;
    left: 10px;
    max-width: 100%;
    text-align: center;
  }
}

/* ─── 22. FORM ROW — single col on very small ────────────────── */
@media (max-width: 400px) {
  .form-row { grid-template-columns: 1fr; gap: 0; }
}

/* ─── 23. TABLE WRAPS — horizontal scroll ────────────────────── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.receipt-table { min-width: 260px; }

/* ─── 24. ADMIN: SIDEBAR + TABLE IMPROVEMENTS ────────────────── */
@media (max-width: 768px) {
  .admin-sidebar { transform: translateX(-100%); z-index: 300; }
  .admin-sidebar.open { transform: translateX(0); }
  .admin-main { margin-left: 0; }
  .menu-toggle { display: block !important; }
  .admin-content { padding: 12px; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .dash-grid  { grid-template-columns: 1fr; }
  .af-row     { grid-template-columns: 1fr; }
  /* admin tables: horizontal scroll only */
  .a-table { font-size: 11px; min-width: 520px; }
  .a-table th,
  .a-table td { padding: 7px 8px; white-space: nowrap; }
  /* admin receipt card */
  .receipt-card { padding: 16px; margin: 0; }
  .rc-row { font-size: 12px; }
}
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat-val   { font-size: 22px; }
  .tab-bar    { width: 100%; overflow-x: auto; }
  .tab-btn    { white-space: nowrap; font-size: 11px; padding: 6px 10px; }
  /* admin form inputs: prevent iOS zoom */
  .af-group input,
  .af-group select,
  .af-group textarea,
  .a-input { font-size: 16px; }
}

/* ─── 25. ADMIN TOPBAR ───────────────────────────────────────── */
@media (max-width: 480px) {
  .admin-topbar { padding: 10px 12px; }
  .atb-title    { font-size: 13px; max-width: 55vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .admin-user   { display: none; }   /* hide email on tiny screens */
}

/* ─── 26. ADMIN MODAL ────────────────────────────────────────── */
@media (max-width: 480px) {
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal {
    max-width: 100%;
    border-radius: 14px 14px 0 0;
    max-height: 90vh;
  }
  .admin-modal-overlay { padding: 0; align-items: flex-end; }
}

/* ─── 27. ADMIN SEC TOOLBAR ──────────────────────────────────── */
@media (max-width: 480px) {
  .sec-toolbar   { flex-direction: column; align-items: stretch; gap: 8px; }
  .toolbar-left  { flex-wrap: wrap; }
  .a-btn         { font-size: 12px; padding: 8px 12px; }
}

/* ─── 28. IMAGE PREVIEW (admin catalog) ──────────────────────── */
@media (max-width: 480px) {
  .image-preview { height: 140px; min-height: 140px; }
  .af-row.image-row { grid-template-columns: 1fr; }
}

/* ─── 29. ABOUT PAGE ─────────────────────────────────────────── */
@media (max-width: 480px) {
  .about-trust-box { padding: 16px; }
  .trustee-card { padding: 12px; gap: 10px; }
  .trustee-av   { width: 42px; height: 42px; font-size: 17px; }
  .trustee-name { font-size: 13px; }
  .mission-card { padding: 14px; }
}

/* ─── 30. QUOTE BLOCK ────────────────────────────────────────── */
@media (max-width: 480px) {
  .quote-block { padding: 18px 14px; }
  .quote-text  { font-size: 14px; }
}

/* ─── 31. FOOTER ─────────────────────────────────────────────── */
@media (max-width: 480px) {
  .site-footer { padding: 14px 12px; font-size: 11px; }
}

/* ─── 32. SAFE-AREA INSETS (notch / home indicator) ─────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .mobile-bottom-nav {
    padding-bottom: max(6px, env(safe-area-inset-bottom));
  }
  #site-main {
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }
}

/* ─── 33. PREVENT HORIZONTAL OVERFLOW SITE-WIDE ─────────────── */
html { overflow-x: clip; } /* overflow-x:hidden on body kills iOS scroll */
#site-main, .hero, .main-nav { max-width: 100vw; }


/* ═══════════════════════════════════════════════════════════════
   PRODUCT / RITUAL / EVENT DETAIL IMAGE — Emoji Fallback Fix
   Problem: fallback emoji leaks over real image on detail pages
   ═══════════════════════════════════════════════════════════════ */

/* 1. detail-image must be position:relative so absolute children stay inside */
.detail-image {
  position: relative !important;
  overflow: hidden !important;
}

/* 2. detail-img: use cover (not contain) so image fills the box completely,
      eliminating transparent letterbox areas where the emoji bleeds through.
      background matches the warm catalog tone for the rare case of odd-ratio images. */
.detail-img {
  object-fit: cover !important;
  object-position: center !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  position: relative !important;
  z-index: 1 !important;           /* sits above the fallback (z-index:0) */
  background: #faf3eb !important;  /* warm fallback bg, never bare white */
}

/* 3. Fallback icons: hidden by default when image is present.
      Only shown (z-index promoted) when .img-failed is set by the onerror handler. */
.detail-image .sc-icon-fallback,
.detail-image .product-icon-fallback,
.detail-image .event-icon-fallback {
  z-index: 0 !important;
  opacity: 0 !important;           /* fully hidden when image loads */
  pointer-events: none;
}
.detail-image.img-failed .sc-icon-fallback,
.detail-image.img-failed .product-icon-fallback,
.detail-image.img-failed .event-icon-fallback {
  z-index: 2 !important;
  opacity: 1 !important;           /* revealed only on image error */
}

/* 4. Also cover catalog card thumbnails — same leak can happen there */
.sc-media.catalog-media .sc-icon-fallback,
.product-image.catalog-media .product-icon-fallback,
.event-banner.catalog-media .event-icon-fallback {
  opacity: 0;
  pointer-events: none;
}
.catalog-media.img-failed .sc-icon-fallback,
.catalog-media.img-failed .product-icon-fallback,
.catalog-media.img-failed .event-icon-fallback {
  opacity: 1;
}

/* 5. Ensure catalog-img (in cards) also stays z-index:1 */
.catalog-img {
  position: relative !important;
  z-index: 1 !important;
}

/* ═══════════════════════════════════════════════════════════════
   LANGUAGE TOGGLE BUTTON — 🌐 EN ↔ తె
   ═══════════════════════════════════════════════════════════════ */
.btn-lang {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  border: 1.5px solid var(--mn, #7b1e1e);
  border-radius: 20px;
  background: #fff;
  color: var(--mn, #7b1e1e);
  cursor: pointer;
  transition: background .2s, color .2s, transform .1s;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: inherit;
  line-height: 1;
}
.btn-lang:hover  { background: var(--mnl, #fdf0f0); }
.btn-lang.active { background: var(--mn, #7b1e1e); color: #fff; }
.btn-lang:active { transform: scale(.96); }
/* loading state */
.btn-lang:disabled { opacity: .6; cursor: not-allowed; }

/* fit nicely on mobile */
@media (max-width: 480px) {
  .btn-lang { padding: 5px 9px; font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════════
   ADMIN MOBILE — NO HORIZONTAL SCROLL, ALL PAGES FIT
   ═══════════════════════════════════════════════════════════════ */

/* Prevent body from being wider than viewport in admin */
/* NOTE: overflow-x:hidden on html/body kills iOS Safari vertical scroll.
   Use overflow:clip on a wrapper div instead, or contain via max-width only. */
@media (max-width: 768px) {
  html {
    /* overflow-x:clip is safe — only clips horizontally, never kills vertical scroll */
    overflow-x: clip;
    max-width: 100vw;
  }
  body {
    /* Do NOT set overflow-x:hidden on body — iOS Safari treats it as
       overflow:hidden on both axes, locking the entire page scroll.
       max-width alone is sufficient to prevent horizontal bleed. */
    max-width: 100vw;
  }

  /* Admin main content must never exceed viewport */
  .admin-layout {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }
  .admin-main {
    width: 100%;
    max-width: 100vw;
    min-width: 0;
    overflow-x: hidden;
  }
  .admin-content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  /* Sections inside admin-content */
  .a-sec, .a-card, .a-card-body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /* Toolbar stacks vertically on small screens */
  .sec-toolbar {
    flex-wrap: wrap;
    gap: 8px;
  }
  .toolbar-left {
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
  }
  .toolbar-left .a-input,
  .toolbar-left .a-select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Tables scroll internally, not the whole page */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .a-table {
    min-width: 480px; /* allow table to scroll inside wrapper only */
  }

  /* Login screen fits mobile */
  .login-screen {
    padding: 16px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100vw;
  }
  .login-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 24px 18px;
  }

  /* Settings / PG keys wide rows collapse */
  .settings-sec .af-row {
    grid-template-columns: 1fr;
  }

  /* Stats grid: 2 col on mobile */
  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  /* Devotee search bar full-width */
  #dev-search {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Receipt section search row */
  #rc-id {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Devotee edit modal full-screen on mobile */
  #devotee-edit-modal .modal {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 14px 14px 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 92vh;
    overflow-y: auto;
  }
  #devotee-edit-modal {
    align-items: flex-end !important;
  }
}

@media (max-width: 400px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
  .admin-topbar {
    padding: 0 10px;
  }
  .atb-right .a-btn {
    display: none; /* hide refresh on tiny screens */
  }
}

/* ─── 34. iOS SAFARI MODAL SCROLL FIX ───────────────────────── */
/* When body is position:fixed for scroll-lock, modal must fill viewport */
body.modal-open-ios {
  position: fixed;
  left: 0;
  right: 0;
  overflow: hidden;
}

/* Ensure modal overlay and its children scroll natively on iOS */
.modal-overlay {
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
}
.modal {
  -webkit-overflow-scrolling: touch;
}
.modal-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* --- 35. RAZORPAY CHECKOUT - mobile safe-area & z-index ---- */
/* Razorpay iframe must render above ALL site elements */
.razorpay-container,
.razorpay-backdrop {
  z-index: 2147483647 !important;
}
/* Prevent modal overlay from blocking Razorpay on mobile */
.modal-overlay {
  isolation: auto !important;
}

/* ─── 36. BOOKING/PRODUCT MODAL — scrollable form on mobile ── */
@media (max-width: 600px) {
  /* Let the whole modal sheet scroll, not just .modal-body */
  #booking-modal .modal,
  #product-order-modal .modal,
  #event-reg-modal .modal,
  #donation-modal .modal,
  #info-modal .modal {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Bottom sheet: show from bottom on mobile */
    max-height: 94vh;
  }
  /* Sticky footer stays pinned even when form scrolls */
  #booking-modal .modal-footer,
  #product-order-modal .modal-footer,
  #event-reg-modal .modal-footer {
    position: sticky;
    bottom: 0;
    background: #fff;
    border-top: 1px solid var(--bd);
    z-index: 2;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
}

/* ═══════════════════════════════════════════════════════════════
   PWA INSTALL BANNER
   Shows only when the browser says the site is installable.
   ═══════════════════════════════════════════════════════════════ */
.pwa-install-banner{
  position:fixed;
  z-index:2147483000;
  left:16px;
  right:16px;
  bottom:calc(16px + env(safe-area-inset-bottom));
  max-width:560px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border:1px solid rgba(107,30,30,.16);
  border-radius:16px;
  background:rgba(255,255,255,.98);
  box-shadow:0 12px 40px rgba(0,0,0,.20);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transform:translateY(0);
  opacity:1;
  transition:transform .25s ease,opacity .25s ease;
}
.pwa-install-banner.hidden{display:none}
.pwa-install-icon{
  flex:0 0 48px;width:48px;height:48px;border-radius:12px;overflow:hidden;
  background:#fdf8f3;display:grid;place-items:center;
}
.pwa-install-icon img{width:100%;height:100%;object-fit:cover}
.pwa-install-copy{min-width:0;flex:1;line-height:1.25}
.pwa-install-copy strong{display:block;font-size:14px;color:#4b1717}
.pwa-install-copy span{display:block;font-size:12px;color:#6b6262;margin-top:3px}
.pwa-install-btn{
  border:0;border-radius:10px;padding:10px 14px;cursor:pointer;
  background:#6B1E1E;color:#fff;font-weight:700;white-space:nowrap;
}
.pwa-install-btn:hover{opacity:.92}
.pwa-install-close{
  width:30px;height:30px;border:0;background:transparent;cursor:pointer;
  font-size:24px;line-height:1;color:#6b6262;padding:0;
}
@media(max-width:480px){
  .pwa-install-banner{left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));padding:10px}
  .pwa-install-icon{flex-basis:42px;width:42px;height:42px}
  .pwa-install-copy strong{font-size:13px}
  .pwa-install-copy span{font-size:11px}
  .pwa-install-btn{padding:9px 11px}
}