/* ==========================================================================
   Jagirdar Publications — shared theme for the app pages
   (login, signup, account, order flow). Loaded after Tailwind so it only
   restyles; markup and scripts are untouched. Tokens mirror style.css.
   ========================================================================== */
:root {
  --maroon-900: #2a0a0a; --maroon-800: #561512; --maroon-700: #7a1f1f; --maroon-600: #9a2b22;
  --gold-200: #f6e7c1; --gold-300: #f0d89c; --gold-400: #e2bd67; --gold-500: #c9a227; --gold-600: #a7801b;
  --cream-50: #fdfaf3; --cream-100: #f8f1e1; --cream-200: #efe1c3;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

html { scroll-behavior: smooth; }
body {
  font-family: "Inter", "Noto Sans Devanagari", system-ui, sans-serif !important;
  background-color: var(--cream-100) !important;
  background-image:
    radial-gradient(900px 520px at 100% -8%, rgba(122, 31, 31, 0.22), transparent 62%),
    radial-gradient(700px 480px at -6% 4%, rgba(201, 162, 39, 0.22), transparent 60%),
    radial-gradient(800px 500px at 50% 110%, rgba(122, 31, 31, 0.12), transparent 65%) !important;
  background-attachment: fixed !important;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--gold-500); color: #fff; }
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: #1c0606; }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--gold-400), var(--gold-600)); border-radius: 10px; }
:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 3px; }

/* Headings use the serif display face, like the home page */
body h1, body h2, body h3, body .font-serif { font-family: "Noto Serif Devanagari", "Cormorant Garamond", serif !important; }
body h1, body h2 { letter-spacing: -0.005em; }

/* ---------- Header (account etc.) → floating glass pill ---------- */
body > header.sticky {
  top: 12px !important; margin: 12px auto 0; max-width: 1200px; width: calc(100% - 24px);
  border: 1px solid rgba(255, 255, 255, 0.7) !important; border-radius: 999px;
  background: rgba(253, 250, 243, 0.72) !important;
  box-shadow: 0 10px 40px -18px rgba(42, 10, 10, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
}
body > header.sticky > div { height: 64px !important; padding-left: 20px; padding-right: 14px; }
body > header.sticky .font-serif { color: var(--maroon-900) !important; }

/* ---------- Surfaces ---------- */
body .bg-white.rounded-2xl, body .bg-white.rounded-3xl, body .bg-white.rounded-xl {
  background-color: rgba(255, 255, 255, 0.86) !important;
  border-color: rgba(201, 162, 39, 0.28) !important;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
body .rounded-3xl.bg-white, body .rounded-2xl.bg-white.shadow-xl, body .rounded-3xl.shadow-2xl, body .rounded-3xl.shadow-xl {
  box-shadow: 0 30px 70px -28px rgba(42, 10, 10, 0.45), 0 0 0 1px rgba(201, 162, 39, 0.18) !important;
}
body .rounded-3xl.bg-white, body .rounded-3xl.shadow-2xl { position: relative; }
body .bg-brand-50 { background-color: var(--cream-50) !important; }
body .border-brand-200, body .border-brand-100 { border-color: rgba(201, 162, 39, 0.3) !important; }

/* ---------- Buttons ---------- */
body button.bg-brand-800, body a.bg-brand-800, body .bg-brand-800.text-white:is(button, a, input) {
  background-image: linear-gradient(135deg, var(--maroon-600), var(--maroon-700) 55%, var(--maroon-800)) !important;
  background-color: var(--maroon-700) !important;
  box-shadow: 0 14px 30px -12px rgba(122, 31, 31, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), filter 0.3s ease !important;
}
body button.bg-brand-800:hover:not(:disabled), body a.bg-brand-800:hover {
  transform: translateY(-2px); filter: brightness(1.08);
  box-shadow: 0 20px 40px -12px rgba(122, 31, 31, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}
body button.bg-brand-800:active:not(:disabled) { transform: scale(0.98); }
body button:disabled { opacity: 0.6; }
body .bg-\[\#25D366\] { background-image: linear-gradient(135deg, #2fe077, #25d366 50%, #1aa851) !important; }

/* ---------- Form fields ---------- */
body input:not([type="checkbox"]):not([type="radio"]), body select, body textarea {
  border-radius: 14px !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
body input:focus, body select:focus, body textarea:focus {
  border-color: var(--gold-500) !important;
  box-shadow: 0 0 0 4px rgba(201, 162, 39, 0.2) !important;
  outline: none !important;
}
body input[type="checkbox"], body input[type="radio"] { accent-color: var(--maroon-700); }

/* ---------- Links & accents ---------- */
body a.text-brand-800, body a.text-brand-600 { transition: color 0.2s ease; }
body a.text-brand-800:hover, body a.text-brand-600:hover { color: var(--gold-600) !important; }
body .text-brand-500 { color: var(--gold-600) !important; }
body .bg-brand-100 { background-color: var(--gold-200) !important; }

/* ---------- Gold hairline under card headers, lotus-style divider feel ---------- */
body .border-b.border-brand-100, body .border-t.border-brand-100 { border-color: rgba(201, 162, 39, 0.25) !important; }

/* ---------- Entrance ---------- */
@keyframes app-rise { from { opacity: 0; transform: translateY(18px) scale(0.985); } to { opacity: 1; transform: none; } }
body main, body > div:not([id]):not([class*="fixed"]):not([class*="hidden"]), body > .rounded-3xl {
  animation: app-rise 0.7s var(--ease-out) both;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}