/*
 * GovtSave — Premium Mobile Layer
 * Loaded after desktop, country-specific and base responsive styles.
 * All layout changes are scoped to mobile/tablet widths.
 */

@media (max-width: 820px) {
  /* Country selector: show every market together instead of an off-screen rail. */
  .global-market-rail {
    margin-top: 22px;
    padding: 13px;
    border-radius: 18px;
    background: rgba(3, 28, 36, .42);
    box-shadow: 0 16px 36px rgba(0, 20, 24, .14);
    backdrop-filter: blur(14px);
  }

  .global-market-rail-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5px 10px;
    margin-bottom: 11px;
    line-height: 1.35;
  }

  .global-market-rail-heading small {
    text-align: right;
    font-size: .68rem;
  }

  .global-hero .global-market-rail-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    max-width: 100%;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
    overscroll-behavior: auto;
  }

  .global-hero .global-market-rail-list > .market-chip {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 8px;
    border-radius: 12px;
    scroll-snap-align: none;
    white-space: normal;
    transform: none;
  }

  .global-hero .market-chip > span:nth-child(2) {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: clamp(.65rem, 1.8vw, .75rem);
    line-height: 1.2;
  }

  .global-hero .market-chip-flag {
    flex: 0 0 27px;
    width: 27px;
    height: 23px;
    border-radius: 6px;
  }

  .global-hero .market-chip > i {
    flex: 0 0 auto;
    margin-left: 0;
    font-size: .55rem;
  }

  /* Keep country-page section links in a visible, compact grid—no horizontal swipe. */
  body[class*="market-page"] :is(
    .mp-section-nav, .uk-section-nav, .nz-section-nav, .ie-section-nav,
    .sg-section-nav, .ca-section-nav, .au-section-nav, .de-section-nav, .ph-section-nav
  ) {
    position: relative;
    top: auto;
    z-index: 20;
    max-width: 100%;
    overflow: visible;
    border-radius: 0;
  }

  body[class*="market-page"] :is(
    .mp-section-nav-inner, .uk-section-nav-inner, .nz-section-nav-inner,
    .ie-section-nav-inner, .sg-section-nav-inner, .ca-section-nav-inner,
    .au-section-nav-inner, .de-section-nav-inner, .ph-section-nav-inner
  ) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 6px;
    min-height: 0;
    max-width: 100%;
    padding-top: 9px;
    padding-bottom: 9px;
    overflow: visible;
    scroll-snap-type: none;
  }

  body[class*="market-page"] :is(
    .mp-section-nav-inner, .uk-section-nav-inner, .nz-section-nav-inner,
    .ie-section-nav-inner, .sg-section-nav-inner, .ca-section-nav-inner,
    .au-section-nav-inner, .de-section-nav-inner, .ph-section-nav-inner
  ) > span {
    display: none;
  }

  body[class*="market-page"] :is(
    .mp-section-nav-inner, .uk-section-nav-inner, .nz-section-nav-inner,
    .ie-section-nav-inner, .sg-section-nav-inner, .ca-section-nav-inner,
    .au-section-nav-inner, .de-section-nav-inner, .ph-section-nav-inner
  ) a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    min-height: 38px;
    padding: 7px 4px;
    border: 1px solid rgba(100, 116, 139, .18);
    border-radius: 10px;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: .68rem;
    line-height: 1.2;
  }

  body[class*="market-page"] :is(
    .mp-nav, .uk-nav, .nz-nav, .ie-nav, .sg-nav, .ca-nav, .au-nav, .de-nav, .ph-nav
  ) {
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    gap: 7px;
    overflow: visible;
    white-space: normal;
  }

  body[class*="market-page"] :is(
    .mp-nav, .uk-nav, .nz-nav, .ie-nav, .sg-nav, .ca-nav, .au-nav, .de-nav, .ph-nav
  ) a {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* Make dense dashboards feel intentionally composed on a phone. */
  body[class*="market-page"] :is(
    .mp-section, .uk-section, .nz-section, .ie-section, .sg-section,
    .ca-section, .au-section, .de-section, .ph-section
  ) {
    padding-top: 38px;
    padding-bottom: 38px;
    scroll-margin-top: 18px;
  }

  body[class*="market-page"] :is(
    .mp-section-heading, .uk-section-heading, .nz-section-heading,
    .ie-section-heading, .sg-section-heading, .ca-section-heading,
    .au-section-heading, .de-section-heading, .ph-section-heading
  ) {
    margin-bottom: 22px;
  }

  body[class*="market-page"] :is(
    .mp-section-heading h2, .uk-section-heading h2, .nz-section-heading h2,
    .ie-section-heading h2, .sg-section-heading h2, .ca-section-heading h2,
    .au-section-heading h2, .de-section-heading h2, .ph-section-heading h2
  ) {
    font-size: clamp(1.55rem, 6.5vw, 2.15rem);
    line-height: 1.17;
    letter-spacing: -.025em;
    overflow-wrap: anywhere;
  }

  body[class*="market-page"] :is(
    .mp-card, .mp-rate-card, .mp-calculator-shell, .mp-review-card,
    .mp-planner-card, .uk-card, .ca-card, .de-card, .au-card,
    .nz-card, .ie-card, .sg-card, .ph-card
  ) {
    min-width: 0;
    max-width: 100%;
  }

  body[class*="market-page"] :is(
    .mp-hero-grid, .uk-hero-grid, .nz-hero-grid, .ie-hero-grid,
    .sg-hero-grid, .ca-hero-grid, .au-hero-grid, .de-hero-grid, .ph-hero-grid
  ) {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  body[class*="market-page"] :is(
    .mp-shell, .uk-shell, .nz-shell, .ie-shell, .sg-shell,
    .ca-shell, .au-shell, .de-shell, .ph-shell, .ph-wrap
  ) {
    min-width: 0;
    max-width: 100%;
  }

  /* Keep dense tables within their own scroll surface instead of shifting the page. */
  body[class*="market-page"] :is(
    .mp-table-wrap, .uk-table-wrap, .ca-table-wrap, .de-table-wrap,
    .au-table-wrap, .nz-table-wrap, .ie-table-wrap, .sg-table-wrap, .ph-table-wrap,
    .mp-history-table-wrap, .mp-comparison-wrap, .mp-rate-table-wrap
  ) {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .hero-actions .btn,
  .mp-hero-actions .mp-button,
  .auth-card button,
  .auth-card .btn {
    min-height: 44px;
  }

  .calculator-card,
  .savings-goals-dashboard-page .savings-goal-card,
  .sem-card,
  .sem-stat-card {
    min-width: 0;
    max-width: 100%;
  }
}

@media (max-width: 620px) {
  .container {
    width: calc(100% - 24px);
  }

  .global-market-rail {
    margin-top: 20px;
    padding: 11px;
  }

  .global-market-rail-heading {
    align-items: flex-start;
  }

  .global-market-rail-heading > span {
    font-size: .78rem;
  }

  .global-market-rail-heading small {
    font-size: .64rem;
  }

  .global-hero .global-market-rail-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .global-hero .global-market-rail-list > .market-chip {
    min-height: 46px;
    padding: 7px;
    gap: 7px;
  }

  .global-hero .market-chip > span:nth-child(2) {
    font-size: .69rem;
  }

  .global-hero .market-chip-flag {
    flex-basis: 26px;
    width: 26px;
    height: 22px;
  }

  .section {
    padding-top: 38px;
    padding-bottom: 38px;
  }

  .section-heading {
    text-align: left;
    margin-bottom: 22px;
  }

  .section-heading h2 {
    font-size: clamp(1.55rem, 6.6vw, 2.05rem);
    line-height: 1.18;
  }

  .hero {
    padding-top: 32px;
    padding-bottom: 36px;
  }

  .hero h1 {
    margin-top: 16px;
    margin-bottom: 15px;
    font-size: clamp(1.95rem, 8.5vw, 2.6rem);
    letter-spacing: -.035em;
  }

  .hero-panel {
    padding: 18px;
    border-radius: 18px;
  }

  .hero-actions {
    margin-top: 20px;
  }

  .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .calculator-card {
    padding: 17px;
    border-radius: 16px;
  }

  .calc-head {
    gap: 8px;
    margin-bottom: 16px;
  }

  .amount-input, input, select, textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .field-help {
    align-items: flex-start;
    gap: 4px 12px;
  }

  .mobile-quick-nav {
    box-shadow: 0 10px 34px rgba(3, 25, 21, .2);
  }

  .mobile-quick-nav a {
    min-height: 49px;
    font-size: 9px;
  }

  body[class*="market-page"] :is(
    .mp-section-nav-inner, .uk-section-nav-inner, .nz-section-nav-inner,
    .ie-section-nav-inner, .sg-section-nav-inner, .ca-section-nav-inner,
    .au-section-nav-inner, .de-section-nav-inner, .ph-section-nav-inner
  ) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    padding: 8px 0;
  }

  body[class*="market-page"] :is(
    .mp-section-nav-inner, .uk-section-nav-inner, .nz-section-nav-inner,
    .ie-section-nav-inner, .sg-section-nav-inner, .ca-section-nav-inner,
    .au-section-nav-inner, .de-section-nav-inner, .ph-section-nav-inner
  ) a {
    min-height: 37px;
    padding: 6px 3px;
    font-size: .64rem;
  }

  body[class*="market-page"] :is(
    .mp-section, .uk-section, .nz-section, .ie-section, .sg-section,
    .ca-section, .au-section, .de-section, .ph-section
  ) {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  body[class*="market-page"] :is(
    .mp-card, .mp-rate-card, .mp-calculator-shell, .mp-review-card,
    .mp-planner-card, .uk-card, .ca-card, .de-card, .au-card,
    .nz-card, .ie-card, .sg-card, .ph-card
  ) {
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 16px;
  }
}

@media (max-width: 380px) {
  .container {
    width: calc(100% - 20px);
  }

  .global-market-rail {
    padding: 9px;
    border-radius: 15px;
  }

  .global-market-rail-heading {
    gap: 4px 7px;
  }

  .global-market-rail-heading small {
    max-width: 100%;
    text-align: left;
  }

  .global-hero .global-market-rail-list {
    gap: 6px;
  }

  .global-hero .global-market-rail-list > .market-chip {
    min-height: 44px;
    gap: 6px;
    padding: 6px;
    border-radius: 10px;
  }

  .global-hero .market-chip-flag {
    flex-basis: 24px;
    width: 24px;
    height: 21px;
  }

  .global-hero .market-chip > span:nth-child(2) {
    font-size: .65rem;
    line-height: 1.16;
  }

  .hero h1 {
    font-size: 1.9rem;
  }

  body[class*="market-page"] :is(
    .mp-section-nav-inner, .uk-section-nav-inner, .nz-section-nav-inner,
    .ie-section-nav-inner, .sg-section-nav-inner, .ca-section-nav-inner,
    .au-section-nav-inner, .de-section-nav-inner, .ph-section-nav-inner
  ) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .global-hero .market-chip,
  body[class*="market-page"] .mp-section-nav a {
    transition: none !important;
  }
}