/* ShadiGiva modern design system - mobile-first visual polish */
:root {
  --maroon: #4a1735;
  --rose: #B5294E;
  --rose-light: #D94F72;
  --rose-pale: #fbf1f7;
  --gold: #c89a2f;
  --gold-light: #e0be6c;
  --gold-pale: #fff7e8;
  --ivory: #fbfcff;
  --cream: #f8f3eb;
  --grey: #f4f0f6;
  --ink: #241726;
  --ink-soft: #3b2b3f;
  --muted: #5f4a5b;
  --gtxt: #3f3343;
  --green: #198754;
  --green-pale: #edf8f2;
  --blue: #2b4f96;
  --blue-pale: #ecf3ff;
  --border: rgba(74, 23, 53, 0.16);
  --shadow: rgba(36, 23, 38, 0.09);
  --sg-page-padding: 16px;
  --sg-safe-top: env(safe-area-inset-top, 0px);
}

html,
body {
  background: linear-gradient(180deg, #fdfbf8 0%, #f4f0f6 100%);
  color: var(--ink);
}

body {
  font-size: 16.5px;
  line-height: 1.66;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}

p,
li {
  color: var(--gtxt);
  line-height: 1.68;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

h1,
h2,
h3,
h4 {
  color: var(--maroon);
  letter-spacing: -0.01em;
}

nav,
.site-topbar,
.topbar {
  border-bottom-color: var(--border) !important;
  background: linear-gradient(180deg, rgba(253, 251, 248, 0.98), rgba(247, 241, 246, 0.96)) !important;
  box-shadow: 0 2px 14px rgba(36, 23, 38, 0.06);
  padding-top: max(var(--sg-safe-top), 0px) !important;
  min-height: calc(58px + max(var(--sg-safe-top), 0px)) !important;
}

.nav-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--maroon);
  background: var(--rose-pale, #FCF0F3);
  border: 1.5px solid rgba(181, 41, 78, 0.22);
  padding: 0.4rem 0.9rem;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  white-space: nowrap;
}

.nav-back:hover,
.nav-back:focus {
  background: var(--maroon);
  color: #fff;
  border-color: var(--maroon);
}

.hero {
  margin-top: calc(64px + max(var(--sg-safe-top), 0px)) !important;
}

.card,
.panel,
.mcard,
.content-card,
.filter-panel,
.match-card,
.pl,
.bc,
.story,
.wf,
.svc-card,
.tips-banner,
.empty,
.side,
.hero-panel,
.horoscope-card,
.mind-panel,
.verify-usp,
.photo-card,
.menu-card,
.welcome-card,
.stat-card,
.filter-bar {
  border-radius: 12px !important;
  border-color: color-mix(in srgb, var(--maroon) 14%, #ffffff) !important;
  box-shadow: 0 12px 28px rgba(36, 23, 38, 0.11) !important;
}

.btn,
.bfind,
.bso,
.bsf,
.mact,
.abtn,
.nlb,
.bpl,
.empty-btn,
.verify-btn-home {
  border-radius: 8px !important;
  min-height: 44px;
  font-weight: 700;
}

.bso,
.abtn-outline,
.mact-out {
  border-color: color-mix(in srgb, var(--rose) 46%, #ffffff) !important;
  color: var(--maroon) !important;
  background: #fffaf6 !important;
}

.bsf,
.mact-fill,
.abtn-primary,
.bfind,
.verify-btn-home {
  background: linear-gradient(135deg, var(--rose-light), var(--rose)) !important;
  color: #fff !important;
  border: 0 !important;
}

.bsf:hover,
.mact-fill:hover,
.abtn-primary:hover,
.bfind:hover,
.verify-btn-home:hover {
  background: var(--rose) !important;
}

.ssub,
.hsub,
.wfd,
.destiny-copy,
.about-text,
.mind-para,
.horoscope-copy,
.squote,
.tb-sub,
.empty-sub,
.match-form-note {
  text-align: justify !important;
  text-justify: inter-word;
}

input,
select,
textarea,
.filter-inp,
.filter-sel,
.sb-sel,
.sort-sel {
  border-radius: 8px !important;
  border-color: rgba(114, 96, 140, 0.28) !important;
  background: #fff !important;
  color: var(--ink-soft) !important;
  min-height: 42px;
}

/* Readability hardening for profile and dense cards */
.csb-label,
.mind-detail,
.kundli-note,
.gr-name,
.gr-pts,
.sim-meta,
.sim-score,
.pi-lbl,
.match-form-note,
.lock-label,
.lock-msg,
.psi-planet,
.psi-house,
.d4-lbl,
.d4-desc,
.fk {
  font-size: clamp(0.76rem, 1.9vw, 0.9rem) !important;
  line-height: 1.5 !important;
}

.fv,
.pi-val,
.mind-label {
  font-size: clamp(0.9rem, 2.3vw, 1rem) !important;
  line-height: 1.55 !important;
}

input:focus,
select:focus,
textarea:focus,
.filter-inp:focus,
.filter-sel:focus,
.sort-sel:focus {
  outline: none !important;
  border-color: var(--rose) !important;
  box-shadow: 0 0 0 3px rgba(196, 71, 124, 0.14) !important;
}

.slabel,
.eyebrow,
.ps-title,
.hs-ttl,
.cti {
  color: var(--gold) !important;
}

/* Registration multi-step visibility hardening */
.reg-overlay .reg-box,
.reg-overlay .reg-body,
.reg-overlay .fg,
.reg-overlay .ff {
  visibility: visible !important;
  opacity: 1 !important;
}

.reg-overlay .fg {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.reg-overlay .ff.full {
  grid-column: 1 / -1 !important;
}

.reg-overlay .ff input,
.reg-overlay .ff select,
.reg-overlay .ff textarea {
  background: #fff !important;
  color: var(--ink-soft) !important;
  border: 1.5px solid rgba(122, 42, 82, 0.24) !important;
}

.reg-overlay .ff input::placeholder,
.reg-overlay .ff textarea::placeholder {
  color: #8a7b8c !important;
}

.reg-overlay .ff select:disabled,
.reg-overlay .ff input:disabled {
  opacity: 1 !important;
  background: #f8f3f8 !important;
  color: #6f6175 !important;
  border-color: rgba(122, 42, 82, 0.2) !important;
}

.reg-overlay .sec-divider {
  color: var(--gold) !important;
  border-top-color: rgba(200, 154, 47, 0.3) !important;
}

@media (max-width: 700px) {
  body {
    font-size: 16px;
    line-height: 1.62;
  }

  p,
  li,
  .ssub,
  .hsub,
  .wfd,
  .destiny-copy,
  .about-text,
  .mind-para,
  .horoscope-copy,
  .squote,
  .tb-sub,
  .empty-sub,
  .match-form-note {
    text-align: justify !important;
    text-justify: inter-word;
  }

  nav,
  .site-topbar,
  .topbar,
  .page,
  .main,
  .content,
  .wrap,
  .container,
  .site-content,
  .sw,
  footer,
  .site-footer {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .hero {
    margin-top: calc(58px + max(var(--sg-safe-top), 0px)) !important;
  }

  .page,
  .layout,
  .main {
    gap: 12px !important;
  }

  .card,
  .panel,
  .content-card,
  .match-card,
  .filter-panel,
  .filter-bar,
  .hero-panel,
  .horoscope-card,
  .mind-panel,
  .verify-usp,
  .photo-card,
  .menu-card,
  .welcome-card {
    border-radius: 10px !important;
  }

  .reg-head,
  .login-head,
  .step-head,
  .step-body,
  .step-footer,
  .reg-body,
  .login-body,
  .content-card,
  .filter-panel,
  .filters,
  .card,
  .side,
  .plans-panel,
  .profile-photo-card,
  .quick-actions,
  .astro-score,
  .similar-card {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .h1 {
    font-size: clamp(2rem, 8vw, 2.5rem) !important;
  }

  .reg-overlay .fg {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .stitle,
  .destiny-title,
  .horoscope-title,
  .app-h {
    font-size: clamp(1.28rem, 5.6vw, 1.75rem) !important;
    line-height: 1.2 !important;
  }

  .verify-usp .stitle,
  #astro-services > .stitle,
  #astro-services .horoscope-title {
    font-size: clamp(calc(1.28rem - 1pt), calc(5.6vw - 1pt), calc(1.75rem - 1pt)) !important;
  }
}