/* ShadiGiva strict mobile containment.
   Loaded last to prevent any panel/card/table from widening the phone viewport. */
@media (max-width: 700px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body,
  input,
  select,
  textarea,
  button {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  *,
  *::before,
  *::after {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  img,
  svg,
  video,
  canvas,
  iframe {
    max-width: 100% !important;
  }

  body {
    font-size: 15px;
  }

  nav,
  .topbar,
  .site-topbar {
    width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
  }

  nav.nav-home {
    display: flex !important;
    flex-wrap: nowrap !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  nav.nav-home .nav-brand {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 1.05rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.3rem !important;
  }

  nav.nav-home .nav-cta,
  nav.nav-home .nav-cta--logged-in {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: auto !important;
    gap: 6px !important;
    max-width: 62vw !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  nav.nav-home .nav-cta::-webkit-scrollbar,
  nav.nav-home .nav-cta--logged-in::-webkit-scrollbar {
    display: none !important;
  }

  nav.nav-home .nav-cta-user {
    display: none !important;
  }

  nav.nav-home .nav-cta-primary {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
  }

  nav.nav-home .nav-cta .bso,
  nav.nav-home .nav-cta .bsf,
  nav.nav-home .nav-cta-primary .bso,
  nav.nav-home .nav-cta-primary .bsf {
    width: auto !important;
    padding: 0.38rem 0.5rem !important;
    font-size: 0.66rem !important;
    min-height: 34px !important;
    flex: 0 0 auto !important;
  }

  nav.nav-home .sg-admin-profile-select {
    max-width: 5.5rem !important;
    font-size: 0.64rem !important;
    min-height: 34px !important;
    padding-right: 1.35rem !important;
  }

  nav.nav-home .nav-admin-toggle {
    padding-right: 0.45rem !important;
  }

  nav:has(.nav-back) {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-areas: "back brand action" !important;
    row-gap: 0 !important;
    min-height: 52px !important;
    max-height: none !important;
    height: auto !important;
  }

  nav:has(.nav-back) .nav-back {
    grid-area: back !important;
    width: auto !important;
    max-width: 38vw !important;
    justify-content: flex-start !important;
    padding: 0.38rem 0.55rem !important;
    font-size: 0.68rem !important;
  }

  nav:has(.nav-back) .nav-brand {
    grid-area: brand !important;
    justify-self: start !important;
    text-align: left !important;
    font-size: 1rem !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  nav:has(.nav-back) .nav-home,
  nav:has(.nav-back) .nav-right {
    grid-area: action !important;
    justify-self: end !important;
    width: auto !important;
    max-width: 100% !important;
  }

  nav:has(.nav-back) .nav-right {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 6px !important;
  }

  .nav-back {
    font-weight: 700 !important;
    color: var(--maroon, #7B1A35) !important;
    background: var(--rose-pale, #FCF0F3) !important;
    border: 1.5px solid rgba(181, 41, 78, 0.22) !important;
    border-radius: 4px !important;
    padding: 0.45rem 0.85rem !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    min-width: 0 !important;
  }

  .nav-links,
  .toplinks,
  .nav-tabs {
    overflow-x: auto !important;
    max-width: 100% !important;
  }

  .nav-cta,
  .nav-actions,
  .nav-r,
  .btn-row,
  .hero-btns,
  .assist-actions,
  .success-btns,
  .match-actions,
  .pcfoot,
  .nl-btns {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 8px !important;
  }

  .nav-cta {
    width: auto !important;
    grid-template-columns: auto auto !important;
  }

  .nav-cta button,
  .nav-r a,
  .nav-actions a,
  .btn,
  .btn-back,
  .btn-skip,
  .btn-next,
  .btn-submit,
  .send-btn,
  .verify-btn,
  .next-btn,
  .search-filter-btn,
  .sb-btn,
  .pay-btn,
  .mact,
  .pbtn,
  .abtn,
  .nlb {
    width: 100% !important;
    min-height: 42px !important;
    white-space: normal !important;
    text-align: center !important;
  }

  .reg-nav {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }

  .reg-nav .btn-back,
  .reg-nav .btn-skip,
  .reg-nav .btn-submit {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    white-space: nowrap !important;
    padding: .45rem .5rem !important;
    line-height: 1.2 !important;
    font-size: .78rem !important;
  }

  .page,
  .main,
  .content,
  .wrap,
  .upgrade-shell,
  .layout,
  .search-bar,
  .progress-wrap,
  .site-content,
  .container,
  .content-section,
  .sw,
  footer,
  .site-footer {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .safety-footer-links,
  .safety-footer-helplines {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.5rem 0.85rem !important;
    line-height: 1.5 !important;
  }

  .safety-footer-links a,
  .safety-footer-helplines a {
    display: inline-block !important;
    width: auto !important;
    max-width: none !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0.2rem 0.35rem !important;
  }

  .page,
  .layout,
  .wrap,
  .grid,
  .grid-4,
  .qa-grid,
  .form-grid,
  .values,
  .bullet-grid,
  .articles-grid,
  .search-bar,
  .sb-inputs,
  .filter-grid,
  .filter-row-2,
  .results-grid,
  .stats-bar,
  .matches-grid,
  .summary-grid,
  .slot-grid,
  .duration-grid,
  .fg,
  .fg2,
  .pref-grid,
  .kundali-grid,
  .dosha-4,
  .sim-grid,
  .photos-strip,
  .why-g,
  .svc-grid,
  .astro-flow,
  .bg3,
  .sg,
  .pl-g,
  .home-panels-grid,
  .horoscope-grid,
  .mind-usp,
  .verify-usp,
  .dasha-focus-grid,
  .dasha-coverage-cards,
  .custom-varga-grid,
  [style*="grid-template-columns"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .reg-overlay,
  .login-overlay {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .reg-overlay.open,
  .login-overlay.open {
    padding: 0 !important;
  }

  .reg-box,
  .login-box,
  .step-card,
  .profile-photo-card,
  .quick-actions,
  .astro-score,
  .similar-card,
  .content-card,
  .filter-panel,
  .filters,
  .match-card,
  .pc,
  .plan,
  .pl,
  .tier,
  .account-panel,
  .plans-panel,
  .card,
  .side,
  .hero-panel,
  .horoscope-card,
  .mind-panel,
  .verify-usp,
  .story,
  .bc,
  .wf,
  .svc-card,
  .step-card,
  .empty,
  .upload-area,
  .declaration-box {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 8px !important;
  }

  .reg-box,
  .login-box {
    min-height: 100dvh !important;
    border-radius: 0 !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: 12px !important;
    padding-right: 12px !important;
  }

  .reg-progress-wrap {
    top: 52px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .reg-step-menu,
  .progress-steps,
  .section-list,
  .planet-strip {
    display: flex !important;
    overflow-x: auto !important;
    max-width: 100% !important;
    gap: 6px !important;
  }

  .reg-step-menu button,
  .section-pill,
  .ps-item {
    flex: 0 0 auto !important;
  }

  .phone-row,
  .range-row,
  .otp-row,
  .call-platform {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 8px !important;
  }

  .otp-row {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  .otp-box {
    width: 100% !important;
    height: 46px !important;
    font-size: 1.05rem !important;
  }

  input,
  select,
  textarea,
  .sb-sel,
  .filter-sel,
  .filter-inp,
  .sort-sel,
  .country-code {
    width: 100% !important;
    max-width: 100% !important;
  }

  .search-bar,
  .sb-inputs {
    align-items: stretch !important;
  }

  .sb-label {
    white-space: normal !important;
  }

  .pcv,
  .fv,
  .mdv,
  .ps-val {
    text-align: left !important;
  }

  .pcr,
  .md-row,
  .fr,
  .ps-row,
  .mind-row,
  .locked-field,
  .interest-item,
  .tips-banner,
  .sv-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }

  .match-photo {
    height: 210px !important;
  }

  /* Profile sidebar / panel photo — full block, never a small circle */
  .profile-app-layout .photo-card,
  .profile-app-layout .photo-area {
    border-radius: 0 !important;
  }

  .profile-app-layout .photo-area {
    min-height: min(72vw, 420px) !important;
    height: min(72vw, 420px) !important;
  }

  .profile-app-layout .photo-avatar {
    width: 100% !important;
    height: 100% !important;
    min-height: min(72vw, 420px) !important;
    border-radius: 0 !important;
  }

  .profile-app-layout .photo-avatar img {
    border-radius: 0 !important;
  }

  .profile-photos-feature {
    border-radius: 0 !important;
  }

  #sec-photos .photos-panel-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .pthumb {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 !important;
  }

  .hcontent,
  .hsbox,
  .hsub,
  .destiny-wrap,
  .destiny-copy,
  .ssub,
  .founder-note,
  .astro-in,
  .footer-inner {
    max-width: 100% !important;
  }

  .hring {
    display: none !important;
  }

  .match-form-embed {
    overflow: hidden !important;
  }

  .match-form-embed iframe {
    width: 100% !important;
    min-width: 0 !important;
  }

  .table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
  }

  th,
  td {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .compare-table,
  .koot-table,
  .kg-panchang-table {
    min-width: 0 !important;
  }
}

@media (max-width: 390px) {
  body {
    font-size: 14px;
  }

  .page,
  .main,
  .content,
  .wrap,
  .sw,
  .search-bar,
  footer,
  .site-footer {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .nav-cta .bso,
  .nav-r .nb:not(.fill) {
    display: none !important;
  }
}

/* Compact page footer (profile, dashboard, app) */
.sg-page-footer {
  background: #1A0A10;
  color: rgba(255, 255, 255, .55);
  padding: 1.15rem 1rem .85rem;
  text-align: center;
  font-size: .74rem;
  line-height: 1.45;
}

.sg-page-footer-brand {
  font-family: 'Playfair Display', serif;
  font-size: .92rem;
  color: rgba(255, 255, 255, .78);
  margin-bottom: .4rem;
}

.sg-page-footer-brand span {
  color: #D4A82A;
}

.sg-page-footer-links {
  margin-bottom: .45rem;
}

.sg-page-footer-links a {
  color: rgba(255, 255, 255, .48);
  text-decoration: none;
  margin: 0 .45rem;
  font-size: .72rem;
}

.sg-page-footer-powered {
  font-size: .68rem;
  margin-bottom: .35rem;
  opacity: .85;
}

.sg-page-footer-powered a {
  color: rgba(255, 255, 255, .42);
  text-decoration: none;
}

.sg-page-footer-meta {
  font-size: .66rem;
  opacity: .5;
}

.sg-page-footer-meta a {
  color: inherit;
  text-decoration: none;
}

@media (max-width: 700px) {
  footer:not(.sg-page-footer) {
    padding-top: 1.15rem !important;
    padding-bottom: 0.75rem !important;
  }

  footer:not(.sg-page-footer) .ft {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
    margin-bottom: 0.65rem !important;
  }

  footer:not(.sg-page-footer) .fbr {
    font-size: 1.05rem !important;
    margin-bottom: 0.3rem !important;
  }

  footer:not(.sg-page-footer) .ftag {
    font-size: 0.7rem !important;
    margin-bottom: 0.4rem !important;
    line-height: 1.4 !important;
  }

  footer:not(.sg-page-footer) .fct {
    margin-bottom: 0.35rem !important;
    font-size: 0.62rem !important;
  }

  footer:not(.sg-page-footer) .fl a {
    font-size: 0.7rem !important;
  }

  footer:not(.sg-page-footer) .fb2 {
    padding-top: 0.65rem !important;
  }

  .sg-page-footer {
    padding: 0.85rem 10px 0.65rem !important;
  }

  .sg-page-footer-brand {
    font-size: 0.85rem !important;
    margin-bottom: 0.3rem !important;
  }

  .sg-page-footer-links a {
    margin: 0 0.35rem !important;
    font-size: 0.68rem !important;
  }
}