/* ================================================================
   v4 — 393px correction pass.
   Source of truth: Figma 38:955 + location buttons 39:2560/39:2561.
   Desktop canon stays intact except location-button construction,
   which now follows the same Figma component principle.
   ================================================================ */

/* ---- LOCATION BUTTON COMPONENT: shared desktop/mobile principle ---- */
.city-tab {
  position: relative !important;
  display: block !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.city-tab::before,
.city-tab::after {
  content: none !important;
  display: none !important;
}
.city-tab span {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 2 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.city-tab .city-tab-chevron {
  position: absolute !important;
  display: block !important;
  z-index: 3 !important;
  object-fit: contain !important;
  transform-origin: 50% 50% !important;
  transition: transform .38s cubic-bezier(.2,.7,.2,1) !important;
  filter: none !important;
  opacity: 1 !important;
}
/* Exact exported Figma frame assets: 39:2560 active / 39:2561 inactive. */
.city-tab--active .city-tab-chevron {
  content: url("../assets/images/figma-501307d0-e56f-468c-8c5c-ea860e13b716.svg") !important;
  width: 43px !important;
  height: 43px !important;
  right: 5px !important;
  top: 5px !important;
}
.city-tab--inactive .city-tab-chevron {
  content: url("../assets/images/figma-1c564464-0a06-4649-a1cf-d160a0941e33.svg") !important;
  width: 43px !important;
  height: 43px !important;
  right: 5px !important;
  top: 5px !important;
}
/* Active export is the "up" state. Collapse = rotate 180°. */
.city-tab--active.is-list-open .city-tab-chevron {
  transform: rotate(0deg) !important;
}
.city-tab--active.is-location-selected .city-tab-chevron,
.city-tab--active:not(.is-list-open) .city-tab-chevron {
  transform: rotate(180deg) !important;
}
.city-tab--inactive .city-tab-chevron {
  transform: rotate(0deg) !important;
}

@media (max-width: 599px) {
  /* 1. Audience artwork: one geometry for personal and business.
     Figma image layer is 132×132 inside a 121×122 clipping frame. */
  .aud2-card-imagebox {
    width: 121px !important;
    height: 122px !important;
    overflow: hidden !important;
    display: block !important;
  }
  .aud2-card-image,
  .aud2-figure--business .aud2-card-image,
  .aud2-figure--business .aud2-card.is-active .aud2-card-image,
  .aud2-card.is-active .aud2-card-image {
    position: absolute !important;
    left: -5px !important;
    top: -5px !important;
    width: 132px !important;
    height: 132px !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
  }

  /* 2. Size tabs: clipping reaches the white card edge, as in Figma.
     Right padding remains available when scrolled to the last item. */
  .sizes-tabrow {
    left: 30px !important;
    width: 353px !important; /* x30 -> x383, exact white-card edge */
    box-sizing: border-box !important;
    padding-right: 20px !important;
    scroll-padding-right: 20px !important;
  }

  /* 3–4. Internal price-card geometry: white card x10..383,
     all content x30..363 = exactly 20px on both sides. */
  .sizes-metrics {
    left: 20px !important;   /* nested in .sizes-card */
    width: 333px !important;
  }
  .sizes-left {
    left: 20px !important;   /* nested in .sizes-card */
    width: 333px !important;
  }
  .sizes-cta {
    width: 333px !important;
  }
  .sizes-visual {
    left: -53px !important;  /* nested card x10 + (-53) = Figma x -43 */
  }

  /* 5. Exact 39:2560 / 39:2561 mobile geometry. */
  .city-tabs {
    left: 20px !important;
    top: 20px !important;
    width: 333px !important;
    height: 34.207px !important;
    gap: 10px !important;
  }
  .city-tab {
    height: 34.207px !important;
    border-radius: 5px !important;
    line-height: 1 !important;
  }
  .city-tab:first-child { width: 162px !important; }
  .city-tab:nth-child(2) { width: 161px !important; }
  .city-tab span {
    font-size: 16px !important;
    font-weight: 700 !important;
  }
  .city-tab--active .city-tab-chevron,
  .city-tab--inactive .city-tab-chevron {
    width: 27.753px !important;
    height: 27.753px !important;
    right: 3.227px !important;
    top: 3.227px !important;
  }

  /* 6. Route helper is a single centered line. */
  .route-hint {
    left: 20px !important;
    top: 308px !important;
    width: 333px !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  /* 7. Promo CTA copy is vertically centered in the 97px tile. */
  .promo-cta p {
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
  }

  /* 8. Footer: exact relative coordinates from mobile Figma 38:955.
     Keep one footer DOM; only geometry changes at mobile width. */
  .footer-frame {
    position: relative !important;
    width: 393px !important;
    height: 774px !important;
  }
  .footer-logo {
    left: 30px !important;
    top: 0 !important;
    width: 140px !important;
    height: 39px !important;
  }
  .footer-legal {
    left: 30px !important;
    top: 59px !important;
    width: 290px !important;
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1 !important;
  }
  .footer-nav {
    left: 30px !important;
    top: 161px !important;
    gap: 20px !important;
  }
  .footer-contact {
    left: 30px !important;
    top: 331px !important;
  }
  .footer-contact > div:not(.footer-socials) {
    height: 35px !important;
    gap: 10px !important;
  }
  .footer-socials {
    margin-top: 13px !important;
    gap: 10px !important;
  }
  .footer-socials .social,
  .footer-socials .social-tile {
    width: 35px !important;
    height: 35px !important;
    flex: 0 0 35px !important;
  }
  .footer-payment {
    left: 31px !important;
    top: 474px !important;
    width: 250px !important;
  }
  .footer-payment p {
    width: 225px !important;
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.1 !important;
  }
  .footer-pay-button {
    left: 0 !important;
    top: 85px !important;
    width: 250px !important;
    height: 37px !important;
  }
  .footer-divider {
    left: 30px !important;
    top: 646px !important;
    width: 333px !important;
    height: 3px !important;
  }
  .footer-credit {
    left: 30px !important;
    top: 666px !important; /* frame begins y7613; visible text y7616 */
    height: 24px !important;
    gap: 7px !important;
  }
  .footer-contract {
    left: 31px !important;
    top: 706px !important;
    font-size: 14px !important;
  }
  .footer-copy {
    left: 30px !important;
    top: 737px !important;
    font-size: 14px !important;
  }
}