/* ============================================================================================================
   auth-modal.css — the ONE look of the Shubh Muhrat sign-in (#authModal: phone OTP + Google), design.md 2026-10-10.
   Every page that has the modal links this file. Selectors start with `html` so they beat each page's older inline
   `#authModal …` rules whatever the load order (those still hold layout, this owns the look):
   Paper card · Petal Line · wine heading · wine pill primary · Kohl Plum text · the S emblem (no emoji) · no shimmer.
   ============================================================================================================ */
html .mov { background: rgba(58, 42, 47, .42); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
html #authModal {
  --gold: #7D2E3E; --rose: #B4524E; --deep: #3A2A2F; --muted: #6B5A5D; --border: #EADBD4; --green: #2F6B45; --sand: #F5E9E3;
  --ivory: #FFFDFB; --font-serif: 'Cormorant Garamond', Georgia, serif; --font-body: 'Outfit', 'Segoe UI', system-ui, sans-serif;
}
html #authModal .va-mdl { background: #FFFDFB; border: 1px solid #EADBD4; border-radius: 22px; color: #3A2A2F; font-family: var(--font-body);
  box-shadow: 0 40px 80px -40px rgba(90, 30, 40, .55); }
html #authModal .va-modal-emblem { font-size: 0; width: 44px; height: 48px; margin: 0 auto 10px;
  background: url('/static/assets/brand/emblem.webp') center / contain no-repeat; }
html #authModal .va-modal-t { font: 600 30px/1.1 var(--font-serif); color: #7D2E3E; }
html #authModal .va-modal-sub { font-size: 15px; line-height: 1.55; color: #6B5A5D; }
html #authModal .va-close { color: #6B5A5D; min-width: 44px; min-height: 44px; }
html #authModal .va-close:hover, html #authModal .va-close:focus-visible { color: #7D2E3E; background: #F5E9E3; }
html #authModal .va-label { font: 500 12px/1.2 var(--font-body); letter-spacing: .14em; color: #B4524E; }
html #authModal .va-cc { color: #3A2A2F; background: #F5E9E3; border-color: #EADBD4; font-weight: 500; border-radius: 12px 0 0 12px; }
html #authModal .va-input { min-height: 48px; border: 1px solid #EADBD4; border-radius: 12px; background: #FFFDFB; color: #3A2A2F; font-size: 16px; }
html #authModal .va-phone .va-input { border-radius: 0 12px 12px 0; }
html #authModal .va-input:focus { border-color: #7D2E3E; box-shadow: 0 0 0 3px rgba(125, 46, 62, .12); }
html #authModal .va-btn { min-height: 48px; border-radius: 999px; font: 500 16px/1.1 var(--font-body); }
html #authModal .va-btn-gold { background: #7D2E3E; color: #fff; box-shadow: 0 10px 24px -14px rgba(126, 34, 54, .7); }
html #authModal .va-btn-gold:hover { background: #66202F; opacity: 1; }
html #authModal .va-btn-google { background: #FFFDFB; color: #3A2A2F; border: 1.5px solid rgba(125, 46, 62, .25); font-weight: 500; }
html #authModal .va-btn-google:hover { background: #fff; border-color: #7D2E3E; box-shadow: none; }
html #authModal .va-or { color: #7C6D72; }
html #authModal .va-or::before, html #authModal .va-or::after { background: #EADBD4; }
html #authModal .va-status { color: #6B5A5D; }
html #authModal .va-status[data-kind="error"] { color: #9B2C2C; }
html #authModal .va-status[data-kind="success"] { color: #2F6B45; }
html #authModal .va-trust { color: #7C6D72; opacity: 1; font-size: 12.5px; }
html #authModal .spinner-lg { border-color: #F5E9E3; border-top-color: #7D2E3E; }
html #authModal .va-bar.active { background: rgba(125, 46, 62, .1); }
html #authModal .va-bar.active::after { background: #7D2E3E; }
/* plain loading blocks (design.md §7.4: no shimmering gradients) */
html #authModal .va-skeleton > div { background: #F5E9E3; animation: none; }
@media (max-width: 768px) { html #authModal input, html #authModal select, html #authModal textarea, html #authModal .va-cc { font-size: 16px !important; } }
@media (prefers-reduced-motion: reduce) { html #authModal .va-mdl, html #authModal .spinner-lg, html #authModal .va-bar.active::after { animation: none; } }