/* ══════════════════════════════════════════════════════════════════════
   SBAT Matrimony — Site-wide modern UI layer
   Scoped under body.site-modern (set only in layouts/main.php) so the
   admin panel (layouts/admin.php) is completely unaffected. Restyles the
   navbar, footer, login/reset modals and the shared Bootstrap components
   (buttons, cards, forms, alerts, badges, dropdowns) that every member-
   facing page already uses via app.css — no per-page markup required.
═══════════════════════════════════════════════════════════════════════ */

body.site-modern {
  --sx-ease: cubic-bezier(.22,1,.36,1);
  --sx-radius: 16px;
  --sx-radius-sm: 11px;
  --sx-shadow-sm: 0 1px 2px rgba(28,25,23,.05), 0 1px 1px rgba(28,25,23,.03);
  --sx-shadow-md: 0 10px 28px -14px rgba(123,24,24,.20), 0 2px 8px rgba(28,25,23,.05);
  --sx-shadow-lg: 0 22px 55px -20px rgba(123,24,24,.30), 0 4px 14px rgba(28,25,23,.07);
}

@media (prefers-reduced-motion: reduce) {
  body.site-modern, body.site-modern * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

@keyframes sxFadeUp  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sxSpin    { to { transform: rotate(360deg); } }
@keyframes sxPop     { 0% { transform: scale(.9); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* Page content settles in on load — subtle, once. */
body.site-modern #mainContent { animation: sxFadeUp .45s var(--sx-ease); }

/* ── Navbar ───────────────────────────────────────────────────────── */
body.site-modern .sbat-navbar {
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid rgba(123,24,24,.14);
  box-shadow: 0 1px 0 rgba(123,24,24,.06);
  transition: box-shadow .25s var(--sx-ease), background-color .25s var(--sx-ease);
}
body.site-modern .sbat-navbar.sx-scrolled {
  box-shadow: 0 8px 24px -12px rgba(28,25,23,.18);
}
/* Auto-hide on scroll-down / reveal on scroll-up — mobile only, frees up
   viewport for content. Desktop keeps the navbar always visible. */
@media (max-width: 767.98px) {
  body.site-modern .sbat-navbar {
    transition: transform .28s var(--sx-ease), box-shadow .25s var(--sx-ease), background-color .25s var(--sx-ease);
  }
  body.site-modern .sbat-navbar.sx-nav-hidden { transform: translateY(-100%); }
}
body.site-modern .sbat-logo-img { transition: transform .3s var(--sx-ease); }
body.site-modern .navbar-brand:hover .sbat-logo-img { transform: scale(1.06) rotate(-2deg); }

/* Underline-sweep nav links */
body.site-modern .sbat-navbar .nav-link {
  position: relative; border-radius: 10px; padding-block: .5rem;
  transition: color .18s var(--sx-ease), background-color .18s var(--sx-ease);
}
body.site-modern .sbat-navbar .nav-link:hover { background: rgba(123,24,24,.06); }
body.site-modern .sbat-navbar > .container .navbar-nav > .nav-item > .nav-link::after {
  content: ""; position: absolute; left: .9rem; right: .9rem; bottom: .18rem;
  height: 2px; border-radius: 2px; background: var(--sbat-orange);
  transform: scaleX(0); transform-origin: left; transition: transform .25s var(--sx-ease);
}
body.site-modern .sbat-navbar > .container .navbar-nav > .nav-item > .nav-link:hover::after { transform: scaleX(1); }

/* Notification / account / help dropdown toggles */
body.site-modern .sbat-navbar .dropdown-toggle::after { vertical-align: .1em; }
body.site-modern .sbat-navbar .dropdown-menu {
  border: 1px solid rgba(28,25,23,.08); border-radius: var(--sx-radius-sm);
  box-shadow: var(--sx-shadow-lg); padding: .4rem;
  animation: sxPop .18s var(--sx-ease);
}
body.site-modern .sbat-navbar .dropdown-item {
  border-radius: 8px; padding: .5rem .7rem; font-size: .86rem;
  transition: background .15s var(--sx-ease);
}
body.site-modern .sbat-navbar .dropdown-item:hover,
body.site-modern .sbat-navbar .dropdown-item:focus { background: rgba(123,24,24,.07); }
body.site-modern .sbat-navbar .dropdown-item.text-danger:hover { background: rgba(220,53,69,.08); }

/* Notification badge pulse when unread */
body.site-modern .sbat-navbar .badge.rounded-pill.bg-danger {
  box-shadow: 0 0 0 2px rgba(255,255,255,.9);
}

/* Mobile toggler */
body.site-modern .navbar-toggler {
  border-radius: 10px; padding: .4rem .55rem;
  transition: background .18s var(--sx-ease);
}
body.site-modern .navbar-toggler:hover { background: rgba(123,24,24,.06); }
body.site-modern .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(123,24,24,.15); }

/* ── Buttons ──────────────────────────────────────────────────────── */
body.site-modern .btn { border-radius: 11px; }
body.site-modern .btn-sbat-primary,
body.site-modern .btn-sbat-maroon,
body.site-modern .btn-sbat-outline {
  transition: transform .18s var(--sx-ease), box-shadow .18s var(--sx-ease), background-color .18s var(--sx-ease);
}
body.site-modern .btn-sbat-primary { box-shadow: 0 8px 20px -9px rgba(229,90,0,.55); }
body.site-modern .btn-sbat-maroon  { box-shadow: 0 8px 20px -9px rgba(123,24,24,.55); }
body.site-modern .btn-sbat-primary:hover,
body.site-modern .btn-sbat-maroon:hover,
body.site-modern .btn-sbat-outline:hover { transform: translateY(-1px); }
body.site-modern .btn-sbat-primary:active,
body.site-modern .btn-sbat-maroon:active { transform: translateY(0); }
body.site-modern .btn:disabled, body.site-modern .btn.disabled { transform: none !important; }

/* ── Cards ────────────────────────────────────────────────────────── */
body.site-modern .card {
  border-radius: var(--sx-radius-sm);
  border-color: rgba(28,25,23,.09);
  transition: box-shadow .22s var(--sx-ease), transform .22s var(--sx-ease);
}
body.site-modern .card.shadow-sm { box-shadow: var(--sx-shadow-sm) !important; }

/* ── Forms ────────────────────────────────────────────────────────── */
body.site-modern .form-control,
body.site-modern .form-select {
  border-radius: var(--sx-radius-sm);
  border-color: #e2dccf;
  transition: border-color .18s var(--sx-ease), box-shadow .18s var(--sx-ease);
}
body.site-modern .form-control:focus,
body.site-modern .form-select:focus {
  border-color: var(--sbat-primary);
  box-shadow: 0 0 0 4px rgba(123,24,24,.10);
}
body.site-modern .form-check-input:checked {
  background-color: var(--sbat-primary); border-color: var(--sbat-primary);
}
body.site-modern .form-check-input:focus { box-shadow: 0 0 0 3px rgba(123,24,24,.15); }

/* ── Alerts / badges ──────────────────────────────────────────────── */
body.site-modern .alert { border-radius: var(--sx-radius-sm); border-width: 1px; }
body.site-modern .badge { font-weight: 600; letter-spacing: .01em; }

/* ── Modals (login / password / reset) ───────────────────────────── */
body.site-modern .modal-content {
  border-radius: var(--sx-radius); border: 1px solid rgba(28,25,23,.08);
  box-shadow: var(--sx-shadow-lg); overflow: hidden;
}
body.site-modern .modal.fade .modal-dialog { transition: transform .25s var(--sx-ease), opacity .25s var(--sx-ease); }
body.site-modern .sbat-otp-circle {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(123,24,24,.10), rgba(201,148,42,.16));
  box-shadow: inset 0 0 0 1px rgba(123,24,24,.10);
}

/* ── Footer — fills in the (previously undefined) sbat-footer-* classes ── */
body.site-modern .sbat-footer {
  position: relative;
  background: linear-gradient(165deg, var(--sbat-primary) 0%, var(--sbat-primary-dark) 100%);
  overflow: hidden;
}
body.site-modern .sbat-footer::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(600px 260px at 90% -10%, rgba(201,148,42,.18), transparent 60%);
}
body.site-modern .sbat-footer > * { position: relative; z-index: 1; }

body.site-modern .sbat-footer-logo-img { border-radius: 50%; background: rgba(255,255,255,.12); padding: 3px; }
body.site-modern .sbat-footer-brand-name { font-weight: 800; font-size: 1.1rem; color: #fff; letter-spacing: -.01em; }
body.site-modern .sbat-footer-mission { font-size: .84rem; line-height: 1.65; color: rgba(255,255,255,.72); max-width: 34rem; }

body.site-modern .sbat-footer-col-title {
  font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sbat-gold); margin-bottom: .9rem;
}
body.site-modern .sbat-footer-links { display: flex; flex-direction: column; gap: .55rem; margin: 0; }
body.site-modern .sbat-footer-links a {
  position: relative; display: inline-block; width: fit-content;
  transition: color .18s var(--sx-ease), transform .18s var(--sx-ease);
}
body.site-modern .sbat-footer-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: var(--sbat-gold); transform: scaleX(0); transform-origin: left;
  transition: transform .22s var(--sx-ease);
}
body.site-modern .sbat-footer-links a:hover { color: #fff; transform: translateX(2px); }
body.site-modern .sbat-footer-links a:hover::after { transform: scaleX(1); }

body.site-modern .sbat-footer-connect-item {
  display: flex; align-items: flex-start; gap: .65rem; margin-bottom: .85rem;
  font-size: .84rem; color: rgba(255,255,255,.78); line-height: 1.5;
}
body.site-modern .sbat-footer-connect-icon {
  flex: none; width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.12); color: var(--sbat-gold); font-size: .85rem;
}
body.site-modern .sbat-footer-connect-item a { color: rgba(255,255,255,.78); }
body.site-modern .sbat-footer-connect-item a:hover { color: #fff; }

body.site-modern .sbat-footer-bottom {
  border-top: 1px solid rgba(255,255,255,.14);
  padding: 1.1rem 0; font-size: .78rem; color: rgba(255,255,255,.6); text-align: center;
}

/* ── Back-to-top button ───────────────────────────────────────────── */
.sx-to-top {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 1030;
  width: 42px; height: 42px; border-radius: 50%; border: none;
  background: var(--sbat-primary); color: #fff; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sx-shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .25s var(--sx-ease), transform .25s var(--sx-ease), visibility .25s, background .18s;
}
.sx-to-top.sx-visible { opacity: 1; visibility: visible; transform: none; }
.sx-to-top:hover { background: var(--sbat-primary-dark); color: #fff; }

/* ── Toasts (shared across pages that don't ship their own) ───────── */
.sx-toast-stack {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 2000;
  display: flex; flex-direction: column; gap: .5rem; max-width: min(360px, 92vw);
}
.sx-toast {
  display: flex; align-items: flex-start; gap: .55rem;
  background: #fff; border: 1px solid #e9e3d9; border-left: 4px solid var(--sbat-teal);
  border-radius: 12px; padding: .7rem .85rem; box-shadow: var(--sx-shadow-lg, 0 20px 40px rgba(0,0,0,.15));
  font-size: .84rem; animation: sxToastIn .32s var(--sx-ease);
}
.sx-toast.error { border-left-color: #c0392b; }
.sx-toast i { font-size: 1.05rem; color: var(--sbat-teal); margin-top: 1px; }
.sx-toast.error i { color: #c0392b; }
.sx-toast .msg { flex: 1; }
@keyframes sxToastIn { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.sx-toast.sx-toast-out { animation: sxToastOut .28s var(--sx-ease) forwards; }
@keyframes sxToastOut { to { opacity: 0; transform: translateY(6px) scale(.97); } }

/* ══════════════════════════════════════════════════════════════════════
   ADVANCED MOBILE — bottom tab bar, safe-area insets, touch targets,
   bottom-sheet modals, scroll-snap for horizontal strips.
═══════════════════════════════════════════════════════════════════════ */

:root { --sx-bn-height: 60px; }

/* ── Bottom tab bar (mobile only, logged-in users) ───────────────── */
.sx-bottom-nav {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid rgba(28,25,23,.08);
  box-shadow: 0 -6px 20px rgba(28,25,23,.08);
  height: calc(var(--sx-bn-height) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 767.98px) { .sx-bottom-nav { display: grid; } }

/* Pages that own their own sticky bottom bar hide the global tab bar so
   the two never stack on top of each other. */
body:has(.epx-actionbar) .sx-bottom-nav,
body:has(.regx-navbar) .sx-bottom-nav,
body:has(.messages-layout) .sx-bottom-nav { display: none; }

.sx-bn-item {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .18rem; color: #8a8478; text-decoration: none;
  font-size: .64rem; font-weight: 700; letter-spacing: .01em;
  transition: color .18s var(--sx-ease), transform .15s var(--sx-ease);
  -webkit-tap-highlight-color: transparent;
}
.sx-bn-item i { font-size: 1.28rem; line-height: 1; transition: transform .18s var(--sx-ease); }
.sx-bn-item:active { transform: scale(.92); }
.sx-bn-item.active { color: var(--sbat-primary); }
.sx-bn-item.active i { transform: translateY(-1px); }
.sx-bn-item.active::before {
  content: ""; position: absolute; top: 2px; left: 50%; width: 22px; height: 3px;
  background: var(--sbat-orange); border-radius: 0 0 4px 4px; transform: translateX(-50%);
}
.sx-bn-badge {
  position: absolute; top: 2px; right: calc(50% - 20px);
  min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px;
  background: #dc3545; color: #fff; font-size: .58rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px #fff;
}

/* Reserve space at the bottom of the page so content isn't hidden behind
   the fixed tab bar — only on pages where it's actually visible (matches
   the same exclusion list as the tab bar's own display:none rule above). */
@media (max-width: 767.98px) {
  body.site-modern:has(.sx-bottom-nav):not(:has(.epx-actionbar)):not(:has(.regx-navbar)):not(:has(.messages-layout)) #mainContent,
  body.site-modern:has(.sx-bottom-nav):not(:has(.epx-actionbar)):not(:has(.regx-navbar)):not(:has(.messages-layout)) .sbat-footer {
    padding-bottom: calc(var(--sx-bn-height) + env(safe-area-inset-bottom, 0px));
  }
  /* Reposition floating helpers above the tab bar when it's present */
  body.site-modern:has(.sx-bottom-nav):not(:has(.epx-actionbar)):not(:has(.regx-navbar)):not(:has(.messages-layout)) .sx-to-top,
  body.site-modern:has(.sx-bottom-nav):not(:has(.epx-actionbar)):not(:has(.regx-navbar)):not(:has(.messages-layout)) .sx-toast-stack {
    bottom: calc(var(--sx-bn-height) + env(safe-area-inset-bottom, 0px) + .75rem);
  }
}

/* ── Safe-area insets everywhere else that hugs a screen edge ──────── */
body.site-modern .sbat-navbar { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
.epx-actionbar, .regx-navbar {
  padding-bottom: max(.85rem, env(safe-area-inset-bottom, 0px)) !important;
}
@media (max-width: 767.98px) {
  .messages-layout .chat-composer { padding-bottom: max(.65rem, env(safe-area-inset-bottom, 0px)); }
}

/* ── Touch targets — bump up interactive elements on touch/mobile ─── */
@media (max-width: 767.98px) {
  body.site-modern .btn,
  body.site-modern .form-control,
  body.site-modern .form-select { min-height: 44px; }
  body.site-modern .btn-sm { min-height: 38px; }
  body.site-modern .form-check-input { width: 1.15rem; height: 1.15rem; }
  body.site-modern .sbat-navbar .dropdown-item { padding: .65rem .7rem; }
  body.site-modern .navbar-toggler { min-width: 44px; min-height: 44px; }
}

/* ── Bottom-sheet modals on mobile (login / password / reset / camera) ──
   Slides up from the bottom edge like a native app sheet instead of a
   centered dialog — same markup, same Bootstrap JS, CSS-only swap. ── */
@media (max-width: 575.98px) {
  body.site-modern .modal .modal-dialog {
    margin: 0; min-height: 100dvh; display: flex; align-items: flex-end;
  }
  body.site-modern .modal .modal-content {
    width: 100%; max-height: 92dvh; border-radius: 20px 20px 0 0;
    border-bottom: none; padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  body.site-modern .modal.fade .modal-dialog { transform: translateY(24px); }
  body.site-modern .modal.show .modal-dialog { transform: translateY(0); }
  body.site-modern .modal-body { overflow-y: auto; }
  /* Small grab-handle affordance, purely decorative */
  body.site-modern .modal .modal-header::before {
    content: ""; position: absolute; top: .5rem; left: 50%; transform: translateX(-50%);
    width: 36px; height: 4px; border-radius: 4px; background: #e2dccf;
  }
  body.site-modern .modal .modal-header { position: relative; padding-top: 1.1rem; }
}

/* ── Momentum scrolling + snap for horizontal strips on mobile ─────── */
@media (max-width: 767.98px) {
  .wizard-steps, .epx-steps {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .wizard-steps > .wizard-step-item,
  .epx-steps > .epx-step { scroll-snap-align: start; }
}