/* Self-hosted, same files/subsets as the Mini App (esim-bot/web/styles.css)
   - served from the same /assets/fonts path via the mysimway.com nginx
   alias, so there's exactly one copy of these font files on the server. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Design tokens - same amber signature as the Mini App (brand continuity),
   but treated the way the Revolut/MTS research brief calls for: one loud
   accent against near-black ink and white/near-white surfaces, never
   diluted into a gradient, never mixed with a second "SaaS pastel". */
:root {
  --ink: #14161a;
  --ink-soft: #4a4e58;
  --paper: #ffffff;
  --paper-soft: #f7f7f5;
  /* Measured off the account/store dashboard mockups (pixel-sampled: card
     fills consistently land around rgb(237,239,236), a touch darker than
     --paper-soft) - used only for the dashboard's flat card fills (orders,
     stats, filters, store cards), not site-wide. */
  --dash-card: #edefec;
  --line: rgba(20, 22, 26, 0.1);
  --line-on-dark: rgba(255, 255, 255, 0.12);
  --accent: #ffe000;
  --accent-strong: #f2c700;
  --green: #18b35b;
  --dark: #101114;
  --dark-card: #1a1b1f;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --wrap: 1160px;
}

* {
  box-sizing: border-box;
  /* Kills the blue/gray flash Chrome/Safari on Android/iOS paint over any
     tappable element (button, link, card) on touch - purely a mobile
     browser default, not something this stylesheet ever set. */
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

/* Indeterminate loading bar - swapped in for the old "Загружаем тарифы…"
   text wherever a catalog fetch is in flight, so a loading state always
   reads as the same thin animated bar rather than a line of text. */
.loading-bar {
  display: block;
  width: 100%;
  max-width: 220px;
  height: 4px;
  margin: 0 auto;
  border-radius: 999px;
  background: rgba(20, 22, 26, 0.08);
  overflow: hidden;
  position: relative;
}
.loading-bar-fill {
  position: absolute;
  top: 0;
  left: -40%;
  height: 100%;
  width: 40%;
  border-radius: 999px;
  background: var(--accent-strong);
  animation: loading-bar-slide 1.1s ease-in-out infinite;
}
@keyframes loading-bar-slide {
  0% { left: -40%; }
  100% { left: 100%; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 650;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 120ms ease, opacity 120ms ease, background 120ms ease;
}
.btn:active {
  transform: scale(0.97);
}
.btn-primary {
  background: var(--accent);
  color: var(--ink);
}
.btn-primary:hover {
  background: var(--accent-strong);
}
.btn-ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}
.btn-ghost:hover {
  border-color: var(--ink);
}
.btn-dark {
  background: var(--ink);
  color: var(--paper);
}
.btn-dark:hover {
  opacity: 0.85;
}
.btn-lg {
  padding: 16px 28px;
  font-size: 16px;
}
.btn-sm {
  padding: 10px 20px;
  font-size: 14px;
}
.btn-block {
  width: 100%;
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 72px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
}
.brand-mark {
  border-radius: 8px;
}
.brand-word {
  font-size: 19px;
  /* 650, not 800 - matches the one bold weight used consistently
     everywhere else (buttons, labels, links: see .btn). 800 made the logo
     wordmark noticeably heavier/blacker than everything around it instead
     of reading as the same "bold" the rest of the site uses. */
  font-weight: 650;
  letter-spacing: -0.01em;
}
.nav-links {
  display: flex;
  gap: 28px;
  font-size: 15px;
  font-weight: 550;
  color: var(--ink-soft);
}
.nav-links a:hover {
  color: var(--ink);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 108px 0 0;
  min-height: min(860px, calc(100vh - 73px));
  overflow: hidden;
}
.hero-photo {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left center;
  z-index: 0;
  pointer-events: none;
}
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0) 62%, var(--paper) 100%),
    linear-gradient(to right, var(--paper) 0%, rgba(255, 255, 255, 0) 14%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 1;
}
.hero-copy {
  max-width: 660px;
}
h1 {
  font-size: clamp(32px, 1.6vw + 26px, 54px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0;
}
.hero-checklist {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.hero-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16.5px;
  font-weight: 400;
  color: var(--ink-soft);
  line-height: 1.5;
}
.hero-checklist svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--ink);
}
.hero-note {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.5;
  margin: 48px 0 0;
}

/* ---------- Explainer ("Что такое eSIM?") ---------- */
.explainer {
  padding: 48px 0 64px;
}
.explainer .wrap {
  max-width: 1160px;
}

/* ---------- Promo banner (divider between hero and explainer) ---------- */
.promo-banner {
  padding: 108px 0 92px;
}
.promo-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 36px 28px 14px 14px;
}
.promo-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--paper);
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(20, 22, 26, 0.08);
}
.promo-logo img {
  width: 22px;
  height: 22px;
}
.promo-route-wrap {
  flex: 1;
  min-width: 300px;
}
.promo-route {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 5.985%;
  background-image: url('/assets/promo-route-line.png?v=20260819f');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 0 0;
}
.promo-stop-photo {
  position: absolute;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 999px;
}
.promo-stop-photo img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 3px 8px rgba(20, 22, 26, 0.18);
}
.promo-stop-label {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 2px;
  white-space: nowrap;
  align-items: center;
  transform: translate(-50%, -50%);
  text-align: center;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}
.promo-stop-label strong {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
}
.promo-stop-label span {
  font-size: 9.5px;
  color: var(--ink-soft);
}
.promo-quickcard {
  /* fixed (not absolute) so it's positioned against the viewport, not
     against .promo-card - which becomes a horizontal-scroll strip with
     overflow-x:auto on mobile (see the 900px query below). An overflow-x
     value other than visible forces overflow-y to auto too, so an
     absolutely-positioned popover anchored inside that strip got clipped
     by its own scroll box and was barely visible when opened. */
  position: fixed;
  z-index: 5;
  width: 320px;
  max-width: calc(100vw - 32px);
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 12px 32px rgba(20, 22, 26, 0.1);
  padding: 22px 20px 32px;
  opacity: 0;
  transform: translateX(10px);
  pointer-events: none;
  /* ease-out-cubic instead of the previous ease-out-expo curve - that one
     front-loaded almost all of the motion into the first third of the
     280ms, so it read as a quick snap rather than a smooth glide; this
     one spreads the motion out evenly across the whole duration, for both
     the open and the close (this transition isn't scoped to .is-visible,
     so it plays symmetrically in both directions). */
  transition: opacity 280ms cubic-bezier(0.33, 1, 0.68, 1), transform 280ms cubic-bezier(0.33, 1, 0.68, 1);
}
.promo-quickcard.no-transition {
  transition: none;
}
.promo-quickcard.is-visible {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
@keyframes promo-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.promo-quickcard-arrow {
  position: absolute;
  top: -6px;
  width: 12px;
  height: 12px;
  background: #fff;
  transform: translateX(-50%) rotate(45deg);
  border-radius: 3px 0 0 0;
  box-shadow: -2px -2px 4px rgba(20, 22, 26, 0.04);
}
.promo-quickcard-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--paper-soft);
  border-radius: 999px;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0;
}
.promo-quickcard-close svg {
  width: 12px;
  height: 12px;
}
.promo-quickcard-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  margin: 0 28px 14px 0;
}
.promo-quickcard-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 16px 0 8px;
}
.promo-quickcard-label:first-of-type {
  margin-top: 0;
}
.promo-quickcard-tariffs {
  display: flex;
  gap: 8px;
  min-height: 96px;
}
.promo-quickcard-tariffs .catalog-status {
  display: flex;
  align-items: center;
  animation: promo-fade-in 180ms ease;
}
.promo-quickcard-tariff {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: none;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 120ms ease, transform 120ms ease;
  animation: package-item-in 240ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.promo-quickcard-tariff:nth-child(1) { animation-delay: 0ms; }
.promo-quickcard-tariff:nth-child(2) { animation-delay: 40ms; }
.promo-quickcard-tariff:nth-child(3) { animation-delay: 80ms; }
.promo-quickcard-tariff:active {
  transform: scale(0.97);
}
.promo-quickcard-tariff:hover {
  border-color: var(--ink);
}
.promo-quickcard-tariff svg {
  width: 15px;
  height: 15px;
  color: #2f7cf6;
}
.promo-quickcard-tariff strong {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}
.promo-quickcard-tariff span {
  font-size: 10.5px;
  color: var(--ink-soft);
}
.promo-quickcard-tariff em {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-soft);
  margin-top: 2px;
}
.promo-quickcard-desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 14px 0 0;
}
.promo-quickcard-landmarks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 6px;
}
.promo-quickcard-landmarks img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.explainer-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(300px, 480px) minmax(0, 1fr);
  align-items: center;
  gap: 40px;
  background: linear-gradient(155deg, #eef6fa 0%, #e3eff5 55%, #d8ecf3 100%);
  border-radius: 32px;
  padding: 44px 48px;
  overflow: hidden;
}
/* Brand-mark watermark bleeding off the text column's corner, instead of
   the old plain diagonal lines - a pseudo-element (not an <img>) so `filter`
   (recoloring the yellow PNG to white) only touches this background layer,
   not the card's real content. Sized large enough that the mark itself
   reads as the logo rather than dissolving into a generic stripe texture
   the way a small repeating tile of it did.
   Scoped to .explainer-copy (not .explainer-card): the card switches to a
   single stacked column with the photo below the text under 900px, which
   roughly doubles the card's own height - a percentage position resolved
   against that full height pushed the watermark's visible slice down past
   the text entirely, leaving the title/paragraph with no mark at all.
   Scoping to the text column keeps the position meaningful regardless of
   whether the photo sits beside it or stacks below it. */
.explainer-copy::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/assets/logo-mark.png?v=20260819a");
  background-repeat: no-repeat;
  background-position: 6% 48%;
  background-size: 440px auto;
  filter: brightness(0) invert(1);
  opacity: 0.3;
  /* The card's own background is a 155deg light->dark gradient, so a flat
     white overlay reads noticeably fainter at the top (light bg, low
     contrast) than at the bottom (darker bg, higher contrast) even at one
     uniform opacity. Mask along the same axis to pull the bottom's contrast
     back down to the top's, instead of the two ends looking uneven. */
  -webkit-mask-image: linear-gradient(155deg, black 0%, rgba(0, 0, 0, 0.45) 100%);
  mask-image: linear-gradient(155deg, black 0%, rgba(0, 0, 0, 0.45) 100%);
  pointer-events: none;
  z-index: -1;
}
.explainer-copy {
  position: relative;
  z-index: 1;
}
.explainer-title {
  font-size: clamp(26px, 1.2vw + 21px, 36px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 14px;
}
.explainer-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 24px;
}
.explainer-features {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin-bottom: 26px;
}
.explainer-feature {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  width: max-content;
  flex-shrink: 0;
}
.explainer-feature img {
  height: 28px;
  width: auto;
  flex-shrink: 0;
}
.explainer-feature span {
  font-size: 14px;
  font-weight: 650;
  color: var(--ink);
  line-height: 1.3;
}
.explainer-squiggle {
  width: 14px;
  height: 82px;
  flex-shrink: 0;
  color: rgba(20, 22, 26, 0.22);
  align-self: center;
}
.explainer-btn {
  padding: 15px 26px;
  font-size: 15px;
}
.explainer-photo {
  position: relative;
  z-index: 1;
  line-height: 0;
  max-width: 440px;
  margin: 0 auto;
}
.explainer-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

/* ---------- Section headings (shared) ---------- */
.section-title {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  text-align: center;
}
.section-title.light {
  color: var(--paper);
}
.section-sub {
  text-align: center;
  color: var(--ink-soft);
  margin: 0 auto 48px;
  max-width: 480px;
}
/* ---------- Countries ---------- */
.countries {
  padding: 112px 0;
}
.countries-title {
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}
.countries-sub {
  color: var(--ink-soft);
  font-size: 17px;
  margin: 0 0 32px;
}
.catalog-controls {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 32px;
}
.search-field {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 18px 24px;
  width: 100%;
}
.search-field svg {
  width: 22px;
  height: 22px;
  color: var(--ink-soft);
  flex-shrink: 0;
}
.search-field input {
  border: none;
  outline: none;
  font-size: 16px;
  width: 100%;
  font-family: inherit;
  background: transparent;
  color: var(--ink);
}
.search-field input::placeholder {
  color: var(--ink-soft);
}
.mode-toggle {
  display: flex;
  gap: 10px;
}
.mode-toggle-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: transparent;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
}
.mode-toggle-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.mode-toggle-btn.active {
  background: rgba(20, 22, 26, 0.06);
  border-color: transparent;
  color: var(--ink);
}
.country-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.country-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--paper);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color 120ms ease;
}
.country-card:hover {
  border-color: var(--ink);
}
/* Region cards have no photo/flag slot (see app.js regionCard) - a bit more
   padding so the text-only row doesn't look cramped next to the photo
   cards' taller footprint. */
.country-card-no-photo {
  padding: 16px 18px;
}
.country-card-photo {
  flex-shrink: 0;
  width: 30%;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  background: var(--paper-soft);
}
.country-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.country-card-flag {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.country-card-flag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.country-card-copy {
  flex: 1;
  min-width: 0;
}
.country-card-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.25;
}
.country-card-price {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  color: var(--ink-soft);
}
.country-card-chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--ink-soft);
}
.catalog-status {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--ink-soft);
  padding: 40px 0;
}
.catalog-more {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}
.catalog-more-btn {
  padding: 13px 26px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
}
.catalog-more-btn:hover {
  border-color: var(--ink);
}

/* ---------- Perks (two feature cards under Countries) ---------- */
.perks {
  padding: 0 0 112px;
}
.perks-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.perk-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 760px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
/* "Bitten" notch on the card's top-right edge, matching the reference
   mockup exactly - a small paper-colored circle straddling the border so
   only its inner half paints over the card, carving a dent out of the
   corner (a nod to a physical SIM card's cut corner). */
.perk-card::after {
  content: "";
  position: absolute;
  top: 16%;
  right: 0;
  width: 22px;
  height: 22px;
  background: var(--paper);
  border-radius: 999px;
  transform: translate(50%, -50%);
  z-index: 3;
}
.perk-card-connect {
  background: #f0f0f0;
  padding: 44px 40px 40px;
}
.perk-card-queue {
  background: #faf1d8;
  padding: 44px 40px 0;
}
.perk-copy {
  max-width: 420px;
}
.perk-title {
  font-size: clamp(24px, 1.1vw + 19px, 32px);
  font-weight: 600;
  letter-spacing: normal;
  color: var(--ink);
  margin: 0 0 14px;
}
.perk-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}
/* ---- Left card: fanned country-photo stack ---- */
.perk-stack {
  position: relative;
  flex: 1;
  min-height: 420px;
  margin-top: 32px;
}
.perk-stack-photo {
  position: absolute;
  width: 46%;
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  border: 4px solid #fff;
  box-shadow: 0 14px 28px rgba(20, 22, 26, 0.18);
}
/* border-radius lives on the <img> itself (not a wrapping overflow:hidden)
   so the flag badge - a sibling that deliberately floats above the photo's
   own top edge - never gets clipped by its container. */
.perk-stack-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 14px;
}
.perk-stack-photo-1 { left: 0; bottom: 0; transform: rotate(-9deg); z-index: 1; }
.perk-stack-photo-2 { left: 27%; bottom: 55px; transform: rotate(-1deg); z-index: 3; }
.perk-stack-photo-3 { left: 54%; bottom: 10px; transform: rotate(9deg); z-index: 2; }
.perk-stack-flag {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
  border: 3px solid #fff;
  box-shadow: 0 4px 10px rgba(20, 22, 26, 0.22);
}
.perk-stack-flag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ---- Right card: photo bled to the card's own edges, plan picker floating over it ---- */
.perk-visual {
  position: relative;
  flex: 1;
  min-height: 320px;
  margin: 28px -40px 0;
}
.perk-visual-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left 30%;
}
/* Soft blend from the card's cream copy area into the photo, instead of a
   hard seam - matches the reference mockup's gradual transition. */
.perk-visual::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 70px;
  background: linear-gradient(to bottom, #faf1d8 0%, rgba(250, 241, 216, 0) 100%);
  z-index: 1;
}
.perk-plan-picker {
  position: absolute;
  right: 24px;
  left: 46%;
  top: 12%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.perk-plan-row {
  display: flex;
  gap: 10px;
}
.perk-plan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 2px solid transparent;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  box-shadow: 0 8px 20px rgba(20, 22, 26, 0.14);
}
.perk-plan-wide {
  width: 100%;
}
.perk-plan-row .perk-plan {
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.perk-plan.is-active {
  border-color: var(--accent);
}
.perk-plan-info strong {
  display: block;
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.2;
}
.perk-plan-info span {
  font-size: 13px;
  color: var(--ink-soft);
}
.perk-plan-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--ink);
  flex-shrink: 0;
}
.perk-plan-check svg {
  width: 16px;
  height: 16px;
}
.perk-plan-radio {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 2px solid var(--line);
  flex-shrink: 0;
}

/* ---------- Steps ("3 простых шага") ---------- */
.steps {
  padding: 0 0 112px;
}
.steps-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
  background: #eef2f8;
  border-radius: var(--radius-lg);
  padding: 48px;
}
.steps-copy {
  display: flex;
  flex-direction: column;
}
.steps-title {
  font-size: clamp(26px, 1.4vw + 20px, 38px);
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 32px;
}
.steps-photos {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  margin-top: auto;
}
.steps-photo {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 14px 28px rgba(20, 22, 26, 0.14);
}
.steps-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.steps-photo-1 {
  width: 35%;
  aspect-ratio: 3 / 4;
}
.steps-photo-2 {
  width: 63%;
  aspect-ratio: 21 / 20;
}
.steps-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.step-item {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}
.step-icon-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: #ececec;
  color: var(--ink);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.step-icon-badge svg {
  width: 28px;
  height: 28px;
}
.step-toggle {
  width: 30px;
  height: 18px;
  border-radius: 999px;
  background: #34c759;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 2px;
}
.step-toggle span {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #fff;
  flex-shrink: 0;
}
/* Solid timeline connecting each stop, with a small dot marker set low
   (closer to the next badge, not centered) - one connector per gap,
   centered under the icon column (half of the 64px badge). */
.step-connector {
  position: relative;
  width: 0;
  height: 96px;
  margin-left: 32px;
  border-left: 2px solid #c8c8ce;
}
.step-connector::after {
  content: "";
  position: absolute;
  /* Not 50% - .step-connector is a width:0 box, so its border-left (the
     visible line) is drawn 2px entirely outside that box, to the left.
     left:50% of a 0-width containing block is just 0, which lines up with
     the box's own edge - i.e. the line's right edge, not its center - so
     the dot rendered 1px right of the line. -1px lands it on the line's
     actual center instead. */
  left: -1px;
  top: 77%;
  transform: translate(-50%, -50%);
  /* Even, not 7px - translate(-50%) of an odd width is a .5px shift, which
     different browsers/DPRs can round in either direction, so the dot
     still read as slightly off-line despite being exactly centered in
     logical CSS px. Every number in this chain (-1, width 8 -> -4 shift,
     final edges 27/35, center 31) is now a whole pixel, so there's nothing
     left to round unevenly. */
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #b2b2b8;
}
.step-body {
  padding-top: 6px;
}
.step-heading {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 8px;
}
.step-number {
  font-size: 30px;
  font-weight: 300;
  color: var(--ink);
  flex-shrink: 0;
  line-height: 1;
}
.step-title {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
}
.step-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}

/* ---------- FAQ ----------
   Two-column grid of square-cornered cards (reference layout supplied by
   the client), kept in the site's own colors/typography rather than the
   reference's palette. */
.faq {
  padding: 108px 0;
  background: var(--paper-soft);
}
.faq .section-title {
  margin-bottom: 40px;
}
.faq-list {
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
.faq-item {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 22px;
  box-shadow: 0 1px 2px rgba(20, 22, 26, 0.04);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.faq-item:hover {
  border-color: var(--ink-soft);
  box-shadow: 0 10px 24px rgba(20, 22, 26, 0.07);
  transform: translateY(-2px);
}
.faq-item[open] {
  border-color: var(--ink-soft);
  box-shadow: 0 10px 24px rgba(20, 22, 26, 0.07);
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding: 12px 0;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item-q {
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.4;
}
.faq-item-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--ink-soft);
  flex-shrink: 0;
  transition: transform 200ms ease;
}
.faq-item-toggle svg {
  width: 16px;
  height: 16px;
}
.faq-item[open] .faq-item-toggle {
  transform: rotate(180deg);
}
.faq-item p {
  margin: 0 0 20px;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.6;
  white-space: pre-line;
}

/* ---------- Footer ---------- */
.footer {
  background: var(--dark);
  color: rgba(255, 255, 255, 0.7);
  padding: 56px 0;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--paper);
  font-weight: 800;
  font-size: 16px;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  row-gap: 8px;
  column-gap: 24px;
  font-size: 14px;
}
.footer-links a:hover {
  color: var(--paper);
}
.footer-legal {
  width: 100%;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.4);
  margin: 8px 0 0;
}

/* ---------- Package picker modal ----------
   Was a right-slide drawer - switched to a centered dialog (the pattern
   most storefronts use for a plan picker; a side drawer reads more like
   a cart/settings panel) on desktop, and a bottom sheet on phones (see the
   560px override below), rather than one layout stretched across both. */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(16, 17, 20, 0.5);
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: drawer-overlay-in 220ms ease;
}
@keyframes drawer-overlay-in {
  from { background: rgba(16, 17, 20, 0); }
  to { background: rgba(16, 17, 20, 0.5); }
}
.drawer-overlay[hidden] {
  display: none;
}
.drawer {
  width: min(460px, 100%);
  max-height: min(640px, 85vh);
  background: var(--paper);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(20, 22, 26, 0.25);
  animation: drawer-in 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes drawer-in {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
}
.drawer-head-copy {
  display: flex;
  align-items: center;
  gap: 12px;
}
.drawer-head-copy h3 {
  margin: 0;
  font-size: 18px;
}
.drawer-flag {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid var(--line);
}
.drawer-flag[src=""] {
  display: none;
}
.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  color: var(--ink-soft);
}
.icon-btn:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.drawer-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.package-item {
  display: flex;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin-bottom: 12px;
  cursor: pointer;
  background: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  /* Was an instant innerHTML swap from the loading bar straight to the
     full list - a plain fade+rise per item reads as a smooth arrival
     instead of the list just popping in. */
  animation: package-item-in 240ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
  transition: border-color 120ms ease, transform 120ms ease;
}
.package-item:hover {
  border-color: var(--ink);
}
.package-item:active {
  transform: scale(0.98);
}
@keyframes package-item-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Small stagger so the list arrives as a ripple, not all 6+ cards fading
   in on the exact same frame - capped at 6 explicit steps, anything past
   that just reuses the last delay rather than growing unbounded. */
.package-item:nth-child(1) { animation-delay: 0ms; }
.package-item:nth-child(2) { animation-delay: 30ms; }
.package-item:nth-child(3) { animation-delay: 60ms; }
.package-item:nth-child(4) { animation-delay: 90ms; }
.package-item:nth-child(5) { animation-delay: 120ms; }
.package-item:nth-child(n+6) { animation-delay: 150ms; }
.package-item-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.package-item-copy strong {
  font-size: 15.5px;
}
.package-item-price {
  font-size: 17px;
  font-weight: 800;
}

/* ---------- Auth pages (register.html) ----------
   Desktop-only pass for now (markup/visual only, no submit wiring) - built
   from a client-supplied mockup, matched as closely as pixel-sampling the
   reference image allowed. The airport photo in the left panel is the exact
   photo from that mockup (cropped to /assets/register-hero.jpg), not a
   substitute; the world-map watermark behind the icon in the mockup was not
   recreated (a real desktop-only concern to revisit, not dropped by
   accident). Colors intentionally reuse the site's own tokens (--accent /
   --accent-strong) rather than ones sampled off the mockup, so this page
   always tracks the site's current accent instead of a frozen snapshot. */
.auth-body {
  background: var(--paper-soft);
}
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 24px 40px;
}
/* Login's card is much shorter than register's (2 fields vs. 4+checkbox) -
   top-anchoring it the same way left a lot of dead space below, so it gets
   vertically centered instead. Register stays top-anchored (see the earlier
   note this file already has on why: it fills close to the full viewport,
   so centering it just adds empty space above for no benefit). */
.auth-page-centered {
  align-items: center;
}
.auth-card {
  display: grid;
  grid-template-columns: minmax(330px, 36%) minmax(0, 1fr);
  width: 100%;
  max-width: 1040px;
  background: var(--paper);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(20, 22, 26, 0.1);
}
/* Full-bleed split screen (register.html only, via auth-page-full/
   auth-card-full - login's card stays the smaller centered box, see the
   comment on .auth-page-centered) - no boxed card, no margin around it,
   photo and form each take the full viewport height. Desktop only
   (min-width matches the existing ≤900px mobile breakpoint below, which
   already drops the photo panel entirely and has its own reasons - a
   forced min-height:100vh + vertically-centered form fights the on-screen
   keyboard and a mobile form's natural top-anchored, scrollable flow). */
@media (min-width: 901px) {
  .auth-page-full {
    padding: 0;
    align-items: stretch;
  }
  .auth-card-full {
    max-width: none;
    width: 100%;
    min-height: 100vh;
    border-radius: 0;
    box-shadow: none;
    /* Even 50/50 split - the boxed card's 36%/64% (minmax(330px, 36%)) was
       tuned for a small photo accent next to a wide form; full-bleed reads
       better with the photo as an equal half, not a narrow strip. */
    grid-template-columns: 1fr 1fr;
  }
  /* Grid items stretch to the row's full height by default, so both
     columns already span the full 100vh from auth-card-full above - only
     the photo's own background-size needs to change here. */
  .auth-card-full .auth-visual {
    /* `cover` instead of the boxed card's `100% auto` (see that rule's own
       comment for why it used 100% auto there) - this panel is now a full
       100vh-tall column instead of a short card, so the tradeoff flips:
       `cover` only needs a modest zoom to fill a tall panel with a
       landscape source photo, while `100% auto` would leave visible empty
       space above or below the image instead of a full-bleed photo.
       Position stays `bottom` (not `center`): the source photo is a tall
       portrait with ~65% bare sky up top and the actual plane/tarmac scene
       packed into its bottom third (same reason the boxed card's own rule
       below anchors low) - `center` on a 100vh-tall `cover` crop showed
       almost nothing but that empty sky, with the plane barely peeking in
       at the very bottom edge. */
    background-size: cover;
    background-position: center bottom;
  }
  .auth-card-full .auth-form-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    overflow-y: auto;
  }
}
.auth-visual {
  position: relative;
  /* `cover` (previous version) forces the image to fill the panel on
     whichever axis needs more zoom - once the card got shorter (see the
     size pass right before this comment), the panel's own aspect ratio
     drifted further from the source photo's, so `cover` had to blow the
     847px-wide source up well past its native size to satisfy that,
     producing visible upscale blur on top of the photo's own soft focus.
     `100% auto` never scales past the panel's actual width, so it never
     upscales beyond native resolution - it just shows less of the image's
     height instead (anchored low, via background-position, to keep the
     plane in frame rather than empty sky). */
  background-image: url("/assets/register-hero.jpg?v=20260821e");
  background-size: 100% auto;
  background-position: center bottom;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
/* Soft light "halo" centered on the text/icon block - the photo underneath
   varies from pale sky to a much busier tarmac scene depending on viewport
   height, so a flat scrim over the whole panel would either wash out the
   sky or barely help over the busy part. A radial gradient anchored where
   the content actually sits keeps contrast consistent regardless of which
   part of the photo lands there. */
.auth-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(247, 247, 245, 0.94) 0%, rgba(247, 247, 245, 0.62) 45%, rgba(247, 247, 245, 0) 72%);
  pointer-events: none;
}
.auth-visual-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 300px;
}
.auth-visual-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-soft);
  margin-bottom: 30px;
}
.auth-visual-icon svg {
  width: 36px;
  height: 36px;
}
.auth-visual-title {
  font-size: 26px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 14px;
}
.auth-visual-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}
.auth-form-panel {
  padding: 32px 60px 48px;
}
.auth-title {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 12px;
}
.auth-sub {
  font-size: 16px;
  color: var(--ink-soft);
  margin: 0 0 36px;
}
.auth-field-label {
  display: block;
  font-size: 14.5px;
  font-weight: 650;
  color: var(--ink);
  margin: 0 0 8px;
}
.auth-input-wrap {
  position: relative;
  margin-bottom: 22px;
}
.auth-input-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  color: var(--ink-soft);
  pointer-events: none;
}
.auth-input-icon svg {
  width: 19px;
  height: 19px;
}
.auth-input {
  width: 100%;
  padding: 16px 46px;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  font-size: 15px;
  font-family: inherit;
  outline: none;
  color: var(--ink);
}
.auth-input::placeholder {
  color: #a8adb5;
}
.auth-input:focus {
  border-color: var(--ink);
}
.auth-input-toggle {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0;
}
.auth-input-toggle svg {
  width: 19px;
  height: 19px;
}
.auth-input-toggle.is-active {
  color: var(--ink);
}
.auth-hint {
  font-size: 12.5px;
  color: var(--ink-soft);
  margin: -12px 0 20px;
}
.auth-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 4px 0 30px;
  cursor: pointer;
}
.auth-checkbox input {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--ink);
}
.auth-checkbox a {
  color: var(--ink);
  text-decoration: underline;
}
.auth-submit {
  font-size: 16px;
  padding: 17px;
}
.auth-footer-link {
  text-align: center;
  font-size: 14.5px;
  color: var(--ink-soft);
  margin: 24px 0 0;
}
.auth-footer-link a {
  color: var(--ink);
  font-weight: 650;
  text-decoration: underline;
}
.auth-footer-link a.is-disabled {
  color: var(--ink-soft);
  text-decoration: none;
  pointer-events: none;
}
.auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 26px;
}
.auth-row .auth-checkbox-inline {
  margin: 0;
}
.auth-checkbox-inline {
  align-items: center;
}
.auth-forgot {
  font-size: 13.5px;
  color: var(--ink-soft);
  text-decoration: underline;
  white-space: nowrap;
}
.auth-forgot:hover {
  color: var(--ink);
}
.auth-form-notice[hidden] {
  display: none;
}
.auth-form-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 0 0;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(24, 179, 91, 0.22);
  background: rgba(24, 179, 91, 0.08);
  color: #128a4a;
  font-size: 13.5px;
  font-weight: 560;
  line-height: 1.5;
  animation: promo-fade-in 200ms ease;
}
.auth-notice-icon {
  display: flex;
  flex: none;
  margin-top: 1px;
}
.auth-notice-icon svg {
  width: 18px;
  height: 18px;
}
.auth-form-notice a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
}
.auth-form-notice.is-error {
  border-color: rgba(220, 60, 50, 0.25);
  background: rgba(220, 60, 50, 0.08);
  color: #c23b30;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero { min-height: 0; padding: 32px 0 48px; }
  .hero-photo { display: none; }
  .hero-copy { max-width: none; }
  .nav-links { display: none; }
  .section-title { font-size: 28px; }
  .countries-title { font-size: 30px; }
  .country-grid { grid-template-columns: repeat(2, 1fr); }
  .explainer-card { grid-template-columns: 1fr; padding: 40px 28px; gap: 32px; }
  .explainer-copy { max-width: none; }
  .explainer-photo { aspect-ratio: 928 / 698; }
  .promo-banner { padding: 56px 0 48px; }
  .countries { padding: 72px 0; }
  .perks { padding: 0 0 72px; }
  .steps { padding: 0 0 72px; }
  .faq { padding: 72px 0; }
  .promo-card { padding: 10px 16px 10px 10px; border-radius: 18px; gap: 12px; }
  .promo-logo { width: 48px; height: 48px; border-radius: 15px; }
  .promo-logo img { width: 24px; height: 24px; }
  /* Route map doesn't reflow below its calibrated width (the stop photos
     are positioned as percentages against a fixed background PNG), so
     mobile keeps it as a horizontal-scroll strip instead - a standard
     pattern for route/timeline graphics on small screens. The touch/
     scrollbar/edge-fade rules below are what turn that into a strip that
     reads as deliberately scrollable, not like a desktop layout that just
     didn't fit. */
  .promo-banner .wrap { padding-left: 6px; }
  .promo-card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .promo-card::-webkit-scrollbar {
    display: none;
  }
  .promo-card::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    /* Narrower, and staying transparent for most of its own width (only
       ramping to solid right at the edge) - at 40px fully linear, this
       "more to scroll" hint was wide enough to land on top of the route
       line between two stops (Таиланд/Вьетнам on common phone widths) and
       visibly wash it out, not just fade the empty background behind it. */
    width: 26px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 55%, var(--paper) 100%);
    pointer-events: none;
    border-radius: 0 18px 18px 0;
  }
  .promo-route-wrap { min-width: 560px; }
  .promo-stop-label strong { font-size: 13.5px; }
  .promo-stop-label span { font-size: 12px; }
  .perks-grid { grid-template-columns: 1fr; }
  .perk-card { min-height: 0; }
  .perk-card-connect { padding: 36px 28px; }
  /* A bit more separation from "Быстрое подключение" above it, now that
     the two cards stack - the base grid gap alone read as too tight. */
  .perk-card-queue { padding: 36px 28px 0; margin-top: 14px; }
  .perk-copy { max-width: none; }
  .perk-stack { min-height: 300px; }
  .perk-visual { min-height: 380px; margin: 28px -28px 0; }
  .perk-plan-picker { left: 44%; right: 18px; }
  /* Stacked on mobile: title, then photos, then the numbered list. margin-
     top:auto on .steps-photos (used to push photos to the bottom on
     desktop, where the two columns stretch to match height) does nothing
     here - each stacked row is only as tall as its own content - so
     without an explicit margin the photos just hugged the title. Matching
     this gap to .steps-title's own margin-bottom below centers the photos
     evenly between the heading and "01 Укажите страну" instead of sitting
     closer to one side.
     The real offender was min-height:280px below (dropped here, not just
     reduced): the actual photos render well under 280px tall at phone
     widths, so that min-height forced a taller box than the photos filled,
     and align-items:flex-end (needed for the desktop bottom-alignment)
     then parked the empty leftover space at the TOP of that box instead of
     the bottom - the exact gap this whole fix is about. */
  .steps-card { grid-template-columns: 1fr; padding: 36px 28px; gap: 20px; }
  .steps-title { margin-bottom: 20px; }
  .faq-list { grid-template-columns: 1fr; }
  /* Auth pages (register.html and login.html) - the decorative photo panel
     is dropped entirely below tablet width rather than squeezed, matching
     how travel/eSIM auth screens (Saily included) treat it as desktop-only
     chrome; the form is the only thing that matters once space is tight. */
  .auth-page { padding: 0; align-items: stretch; }
  .auth-card { max-width: none; border-radius: 0; box-shadow: none; grid-template-columns: 1fr; }
  .auth-visual { display: none; }
  .auth-form-panel { padding: 40px 28px 48px; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 18px; }
  .hero { padding: 28px 0 40px; }
  .hero-checklist li { font-size: 15.5px; }
  .hero-note { font-size: 15px; }
  .country-grid { grid-template-columns: 1fr; }
  .mode-toggle-btn { flex: 1; justify-content: center; padding: 9px 12px; }
  /* Bottom sheet instead of a centered dialog once the screen is phone-sized -
     anchoring to the bottom edge (thumb-reachable) and dropping the top
     corners' radius is the standard mobile treatment for this exact "pick
     one from a list" pattern (App Store, Google, etc.). */
  .drawer-overlay { align-items: flex-end; padding: 0; }
  .drawer { width: 100%; max-height: 80vh; border-radius: 20px 20px 0 0; }
  .explainer { padding: 40px 0; }
  .explainer-card { padding: 32px 20px; border-radius: 28px; }
  /* All 3 items in one row, not 2+1 - "всегда на связи" has no manual <br/>
     (unlike the other two, which are deliberately pre-broken into two short
     lines), so at phone width it alone was wider than the row had left and
     wrapped to its own line. flex:1 + a smaller icon/font lets all three
     share the row evenly and wrap their own text if they need to, instead
     of one item bumping to a second row. */
  /* align-items:flex-start (overriding the base rule's :center) so every
     icon starts at the same top edge - the base :center was vertically
     centering each item inside the row by its own height, and "всегда на
     связи" (one line of text) is shorter than the other two (each
     pre-broken into two lines via <br/>), so its icon sat visibly lower
     than the other two icons instead of level with them. */
  .explainer-features { flex-wrap: nowrap; align-items: flex-start; gap: 10px; }
  .explainer-feature { flex: 1; width: auto; align-items: center; text-align: center; }
  .explainer-feature img { height: 22px; }
  .explainer-feature span { font-size: 12px; }
  .explainer-squiggle { display: none; }
  .countries { padding: 56px 0; }
  .perks { padding-bottom: 56px; }
  .steps { padding: 0 0 56px; }
  .faq { padding: 56px 0; }
  .perk-card { border-radius: 28px; }
  .perk-card-connect { padding: 32px 22px; }
  .perk-card-queue { padding: 32px 22px 0; }
  .perk-visual { margin: 24px -22px 0; }
  .perk-title { font-size: 24px; }
  .perk-plan-picker { left: 40%; right: 14px; }
  .perk-plan-info strong { font-size: 17px; }
  .steps-card { padding: 28px 20px; border-radius: 28px; }
  .steps-title { font-size: 26px; margin-bottom: 20px; }
  .step-icon-badge { width: 52px; height: 52px; border-radius: 15px; }
  .step-icon-badge svg { width: 22px; height: 22px; }
  .step-connector { margin-left: 26px; height: 72px; }
  .step-title { font-size: 17px; }
  .step-number { font-size: 24px; }
  .auth-form-panel { padding: 32px 20px 40px; }
  .auth-title { font-size: 26px; }
  .auth-sub { margin-bottom: 24px; }
  .auth-input { padding: 14px 42px; font-size: 16px; }
  .auth-submit { padding: 15px; }
}

/* ---------- account.html (Личный кабинет) ---------- */
/* Sidebar + main content dashboard shell. Unlike the marketing pages above,
   this one only shows what's real for a WebUser today - order requests and
   a live catalog pull, no active-eSIM/usage/balance/referral data (see
   app/routers/web_checkout.py's /orders docstring for why that doesn't
   exist yet on this account type). */
.dash-body {
  background: var(--paper-soft);
}
.dash-shell {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}
.dash-sidebar {
  flex: 0 0 260px;
  display: flex;
  flex-direction: column;
  padding: 24px 16px;
  /* A touch darker than --paper-soft (used by .dash-body/.dash-main) -
     pixel-measured off the dashboard mockups: page ~ rgb(246,246,244),
     sidebar ~ rgb(244,244,244). Subtle on purpose - just enough that the
     sidebar reads as its own panel next to the main content. */
  background: #f4f4f2;
  border-right: 1px solid var(--line);
}
.dash-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 24px;
  text-decoration: none;
  color: var(--ink);
}
.dash-brand-copy {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.dash-brand-name {
  font-weight: 700;
  font-size: 15px;
}
.dash-brand-sub {
  font-size: 12.5px;
  color: var(--ink-soft);
}
.dash-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dash-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: var(--radius-md);
  color: var(--ink);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 550;
}
.dash-nav-item svg {
  width: 19px;
  height: 19px;
  flex: none;
  color: #57514a;
}
.dash-nav-item:hover {
  /* Grayer than the sidebar's own #f4f4f2, but clearly lighter than
     .is-active below - hover and "currently selected" need to read as two
     different states, not the same one at two opacities. */
  background: #eceeea;
}
.dash-nav-item.is-active {
  background: #e2e4df;
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(20, 22, 26, 0.06);
}
.dash-nav-item.is-active:hover {
  background: #e2e4df;
}
.dash-nav-item.is-active svg {
  color: var(--accent-strong);
}
.dash-main {
  flex: 1 1 auto;
  min-width: 0;
  padding: 32px 40px 56px;
  max-width: 1280px;
}
.dash-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.dash-eyebrow {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}
.dash-title {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.dash-topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.dash-topbar-btn svg {
  width: 16px;
  height: 16px;
}
.dash-user-chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  margin-left: 4px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  cursor: pointer;
  user-select: none;
}
.dash-user-chip.is-open .dash-user-chip-chevron svg {
  transform: rotate(180deg);
}
.dash-user-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 170px;
  padding: 6px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 28px rgba(20, 22, 26, 0.14);
  z-index: 20;
}
.dash-user-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 10px;
  border-radius: var(--radius-sm);
  background: none;
  border: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 550;
  cursor: pointer;
  text-align: left;
}
.dash-user-menu-item svg {
  width: 18px;
  height: 18px;
  flex: none;
}
.dash-user-menu-item.dash-logout,
.dash-user-menu-item.dash-logout:hover {
  color: #d64545;
}
.dash-user-menu-item.dash-logout:hover {
  background: rgba(214, 69, 69, 0.08);
}
.dash-user-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  font-size: 14px;
  flex: none;
}
.dash-user-chip-copy {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.dash-user-chip-copy strong {
  font-size: 13.5px;
}
.dash-user-chip-copy span {
  font-size: 12px;
  color: var(--ink-soft);
}
.dash-user-chip-chevron {
  flex: none;
  color: var(--ink-soft);
}
.dash-user-chip-chevron svg {
  width: 15px;
  height: 15px;
}

.dash-section {
  margin-bottom: 24px;
}
.dash-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.dash-section-head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}
.dash-section-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}
.dash-section-link svg {
  width: 16px;
  height: 16px;
}
.dash-section-link:hover {
  color: var(--ink);
}

.dash-loading,
.dash-error {
  color: var(--ink-soft);
  font-size: 14px;
}

/* Shown when /me itself can't be reached (network blip, 5xx) - never for a
   real "not logged in" (that's authenticated:false, which still redirects
   to login.html as before). A dead network must not look like a logout. */
.dash-connection-error {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 20px;
  background: #fff3cf;
  color: var(--ink);
  font-size: 14px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(20, 22, 26, 0.08);
}
.dash-connection-error p {
  margin: 0;
}
.dash-connection-error button {
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-weight: 650;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.dash-orders-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dash-order-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: var(--dash-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.dash-order-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 224, 0, 0.16);
  color: #8a6d00;
  overflow: hidden;
  flex: none;
}
.dash-order-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dash-order-icon svg {
  width: 21px;
  height: 21px;
}
.dash-order-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dash-order-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.dash-order-head strong {
  font-size: 15px;
}
.dash-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.dash-badge-pending {
  background: var(--paper-soft);
  border: 1px solid var(--line);
  color: var(--ink-soft);
}
.dash-order-meta {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: var(--ink-soft);
}
.dash-order-price {
  font-weight: 700;
  color: var(--ink);
}
.dash-order-date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dash-order-date svg {
  width: 15px;
  height: 15px;
}

@media (max-width: 560px) {
  .dash-order-card {
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
  }
  .dash-order-head {
    gap: 8px;
  }
  .dash-order-meta {
    gap: 8px 14px;
  }
}

.dash-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  background: var(--dash-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
}
.dash-empty p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14.5px;
}

/* history.html's Дата/Тариф/Сумма/Статус table - same flat-card treatment
   (--dash-card/--line/--radius-md) as .dash-stats-card/.dash-order-card
   above, just as a real <table> instead of a stacked-card list, per the
   История покупок design this page was built from. */
.history-table-card {
  overflow: hidden;
  background: var(--dash-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.history-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.history-table th,
.history-table td {
  padding: 14px 10px;
  text-align: left;
  vertical-align: top;
}

.history-table th:first-child,
.history-table td:first-child {
  padding-left: 20px;
}

.history-table th:last-child,
.history-table td:last-child {
  padding-right: 20px;
}

.history-table th {
  width: 20%;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 700;
}

.history-table th:nth-child(2) {
  width: 42%;
}

.history-table th:nth-child(3) {
  width: 16%;
}

.history-table tbody tr:not(:last-child) td {
  border-bottom: 1px solid var(--line);
}

.history-table td {
  font-size: 14px;
  color: var(--ink);
  overflow-wrap: break-word;
}

.history-tariff {
  line-height: 1.35;
}

.history-tariff strong {
  display: block;
  font-weight: 700;
  font-size: 14.5px;
}

.history-tariff span {
  display: block;
  margin-top: 2px;
  color: var(--ink-soft);
  font-size: 12px;
}

.history-status {
  color: #e0ac00;
  font-weight: 700;
}

.history-status.ok {
  color: var(--green);
}

.history-status.failed {
  color: #c0392b;
}

@media (max-width: 560px) {
  .history-table th,
  .history-table td {
    padding: 12px 8px;
  }
  .history-table th:first-child,
  .history-table td:first-child {
    padding-left: 14px;
  }
  .history-table th:last-child,
  .history-table td:last-child {
    padding-right: 14px;
  }
  /* Real status text ("Ожидает подтверждения") is long - give Статус more
     room than the desktop 20/42/16/20 split, at Тариф's expense (its own
     wrapping already reads fine narrower, unlike a status word overflowing
     the card's rounded-corner clip). */
  .history-table th:nth-child(2) {
    width: 34%;
  }
  .history-table th:last-child {
    width: 28%;
  }
}

/* ---------- payment.html - order review step before checkout ---------- */
.payment-body {
  background: var(--paper-soft);
}
.payment-wrap {
  padding: 32px 24px 64px;
}
.payment-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.payment-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(20, 22, 26, 0.1);
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.payment-back:hover {
  box-shadow: 0 2px 8px rgba(20, 22, 26, 0.16);
}
.payment-back:active {
  transform: scale(0.94);
}
.payment-back svg {
  width: 20px;
  height: 20px;
}
.payment-heading {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-right: auto;
  padding-left: 16px;
}
.payment-heading h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.payment-heading p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14.5px;
}
.payment-steps {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  margin: 8px 0 0;
  padding: 8px 16px;
  background: var(--paper);
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(20, 22, 26, 0.08);
}
.payment-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
}
.payment-step + .payment-step {
  position: relative;
  padding-left: 18px;
}
.payment-step + .payment-step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 14px;
  height: 1px;
  background: var(--line);
}
.payment-step-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--paper-soft);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 700;
}
.payment-step.is-done .payment-step-dot {
  background: var(--accent);
  color: var(--ink);
}
.payment-step.is-current {
  color: var(--ink);
}
.payment-step.is-current .payment-step-dot {
  background: var(--paper);
  border: 2px solid var(--ink-soft);
  color: var(--ink);
}

.payment-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  align-items: start;
}
.payment-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.payment-tariff-top {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.payment-tariff-photo {
  position: relative;
  flex: none;
  width: 200px;
  height: 200px;
  border-radius: var(--radius-md);
  background: var(--dash-card) center / cover no-repeat;
  overflow: hidden;
}
.payment-tariff-photo-globe {
  display: grid;
  place-items: center;
  color: var(--ink-soft);
}
.payment-tariff-photo-globe svg {
  width: 64px;
  height: 64px;
}
.payment-tariff-flag {
  position: absolute;
  left: 12px;
  bottom: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--paper);
}
.payment-tariff-flag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.payment-tariff-info h2 {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 700;
}
.payment-tariff-info p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.55;
}
.payment-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 24px;
}
.payment-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: 18px 10px;
  background: var(--paper-soft);
  border-radius: var(--radius-md);
}
.payment-stat-icon {
  display: flex;
  color: var(--ink-soft);
}
.payment-stat-icon svg {
  width: 22px;
  height: 22px;
}
.payment-stat strong {
  font-size: 15px;
  font-weight: 700;
}
.payment-stat span:last-child {
  font-size: 12px;
  color: var(--ink-soft);
}

.payment-summary-card h2 {
  margin: 0 0 18px;
  font-size: 19px;
  font-weight: 700;
}
.payment-line-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 15px;
  font-weight: 600;
}
.payment-line-sub {
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: 13px;
}
.payment-hr {
  margin: 18px 0;
  border: 0;
  border-top: 1px solid var(--line);
}
.payment-promo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
}
.payment-promo-add {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent-strong);
  font-weight: 700;
}
.payment-promo-add svg {
  width: 16px;
  height: 16px;
}
.payment-promo-chevron {
  display: inline-flex;
  transition: transform 220ms ease;
}
.payment-promo-row[aria-expanded="true"] .payment-promo-chevron {
  transform: rotate(90deg);
}

/* Smooth 0 -> auto height open/close via an animatable grid track instead
   of guessing a max-height - .payment-promo-panel-inner supplies the
   overflow:hidden clip, this element supplies the animated 0fr/1fr row. */
.payment-promo-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 260ms ease;
}
.payment-promo-panel.is-open {
  grid-template-rows: 1fr;
}
.payment-promo-panel-inner {
  min-height: 0;
  overflow: hidden;
}
.payment-promo-field {
  display: flex;
  gap: 8px;
  padding-top: 14px;
}
.payment-promo-input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.payment-promo-input::placeholder {
  color: var(--ink-soft);
}
.payment-promo-input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(20, 22, 26, 0.06);
}
.payment-promo-note {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.payment-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  font-size: 15px;
  font-weight: 600;
}
.payment-total-row strong {
  font-size: 22px;
  font-weight: 700;
}
.payment-pay-btn {
  gap: 6px;
}
.payment-pay-btn svg {
  width: 18px;
  height: 18px;
}
.payment-pay-notice {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--paper-soft);
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}
.payment-secure-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  color: var(--ink-soft);
  font-size: 12.5px;
}
.payment-secure-icon {
  display: flex;
  flex: none;
}
.payment-secure-icon svg {
  width: 18px;
  height: 18px;
}
@media (max-width: 860px) {
  .payment-grid {
    grid-template-columns: 1fr;
  }
  .payment-tariff-top {
    flex-direction: column;
  }
  .payment-tariff-photo {
    width: 100%;
  }
}

@media (max-width: 560px) {
  /* Mockup puts "Оплата" itself in the same compact top row as the back
     button and the step pill (centered between them), with the subtitle
     as its own full-width line below - not the desktop's big left-aligned
     heading block. display: contents unwraps .payment-heading so its h1/p
     become direct flex items of .payment-header, individually orderable,
     without giving up the desktop grouping in markup. */
  .payment-header {
    justify-content: space-between;
    row-gap: 10px;
  }
  .payment-heading {
    display: contents;
  }
  .payment-heading h1 {
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 18px;
    text-align: center;
  }
  .payment-heading p {
    order: 4;
    flex: 1 1 100%;
    margin: 0;
    font-size: 13px;
  }
  /* Scoped to .payment-header specifically, not bare .payment-back - that
     class is reused purely for its circle-button visuals on other pages
     (e.g. .support-chat-back on support.html), and an unscoped `order: 1`
     here leaked into those too, silently reordering their own unrelated
     flex row (support.html's chat header rendered title-then-back-button
     instead of back-button-then-title because of exactly this). */
  .payment-header .payment-back {
    order: 1;
  }
  .payment-steps {
    order: 3;
    margin-top: 0;
    padding: 6px 10px;
  }
  .payment-step {
    font-size: 11px;
  }
  .payment-step-dot {
    width: 18px;
    height: 18px;
  }
  .payment-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.dash-stats-card {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 22px 24px;
  margin-bottom: 24px;
  background: var(--dash-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.dash-stat {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dash-stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--paper-soft);
  color: var(--ink-soft);
  flex: none;
}
.dash-stat-icon svg {
  width: 19px;
  height: 19px;
}
.dash-stat-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.dash-stat-label {
  font-size: 12.5px;
  color: var(--ink-soft);
}
.dash-stat-value {
  font-size: 17px;
  font-weight: 700;
}

.dash-dest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.dash-dest-card {
  position: relative;
  display: block;
  height: 190px;
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  background-color: var(--paper-soft);
}
.dash-dest-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.dash-dest-overlay {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  background: linear-gradient(to top, rgba(16, 17, 20, 0.85) 0%, rgba(16, 17, 20, 0.35) 60%, rgba(16, 17, 20, 0) 100%);
}
.dash-dest-name {
  color: var(--paper);
  font-weight: 700;
  font-size: 15px;
}
.dash-dest-price {
  color: var(--accent);
  font-weight: 650;
  font-size: 13px;
}

/* ---------- support.html (Поддержка) ----------
   Hub (default view, normal page flow) - FAQ tiles, searchable FAQ list,
   contact rows, "Начать чат". Matches the original design reference. */
.support-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 24px;
}
.support-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  padding: 18px;
  background: var(--dash-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.support-tile:hover {
  box-shadow: 0 4px 16px rgba(20, 22, 26, 0.08);
}
.support-tile:active {
  transform: scale(0.98);
}
.support-tile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink-soft);
}
.support-tile-icon svg {
  width: 19px;
  height: 19px;
}
.support-tile strong {
  font-size: 15px;
  font-weight: 700;
}
.support-tile span {
  color: var(--ink-soft);
  font-size: 12.5px;
  line-height: 1.4;
}

.support-search-wrap {
  margin-bottom: 24px;
}
.support-contact-head {
  /* #faq-list right above has no bottom margin of its own (just inter-item
     gap), so without this the last FAQ card and "Свяжитесь с нами" sat
     almost flush against each other. */
  margin-top: 32px;
  margin-bottom: 14px;
}
.support-chat-btn {
  gap: 8px;
  margin: 8px 0 4px;
}
.support-chat-btn svg {
  width: 18px;
  height: 18px;
}

/* Shared between the hub's "Свяжитесь с нами" section and the chat
   overlay's side panel - same rows, same look, just reused in two places. */
.support-contact-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.support-contact-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  transition: box-shadow 120ms ease;
}
.support-contact-row:hover {
  box-shadow: 0 2px 10px rgba(20, 22, 26, 0.06);
}
.support-contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--paper-soft);
  color: var(--ink-soft);
}
.support-contact-icon svg {
  width: 18px;
  height: 18px;
}
.support-contact-label {
  flex: 1 1 auto;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}
.support-contact-chevron {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--ink-soft);
}
.support-side-note {
  margin: 4px 4px 0;
  color: var(--ink-soft);
  font-size: 12.5px;
  line-height: 1.5;
}

/* Chat overlay (#support-chat-view) - a self-contained fixed full-viewport
   flex column (topbar / layout / composer as its three children), not a
   page-flow section. That's the actual fix for the old "crooked, drifts
   around" chat: everything before this lived in the hub page's own normal
   scroll with a position:fixed composer and a hand-guessed padding-bottom
   on the thread to keep the composer from covering the last message - a
   guess that was wrong the moment the composer grew past one line (see
   support.js's autoGrow). Here the composer is a normal (non-fixed) flex
   child; the browser's own flexbox keeps the scrollable middle section
   correctly sized around it with zero JS measuring, on any screen size. */
.support-chat-view {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  /* Soft backdrop behind .support-chat-window below - on desktop the window
     floats on this as a contained card (Yandex-support-style), not an
     edge-to-edge white page. Mobile keeps the plain full-bleed look (see
     the max-width: 900px override), so this only shows as a sliver behind
     the window's own rounded corners there. */
  background: var(--paper-soft);
}
.support-chat-view[hidden] {
  display: none;
}
body.support-chat-open {
  overflow: hidden;
}
.support-chat-window {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--paper);
}
@media (min-width: 901px) {
  .support-chat-view {
    align-items: center;
    justify-content: center;
    padding: 40px;
  }
  .support-chat-window {
    flex: none;
    width: 100%;
    max-width: 1080px;
    height: 100%;
    max-height: 800px;
    /* Desktop-only tint, kept off the backdrop behind it (.support-chat-view
       stays --paper-soft) and off the mobile full-bleed view - just the
       window itself. */
    background: #eaf3fb;
    border-radius: 20px;
    border: 1px solid var(--line);
    box-shadow: 0 30px 70px rgba(20, 22, 26, 0.16);
    overflow: hidden;
  }
}

.support-chat-topbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: max(16px, env(safe-area-inset-top)) 24px 14px;
  border-bottom: 1px solid var(--line);
}
.support-chat-back {
  flex: none;
}
.support-chat-heading h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.support-chat-layout {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: stretch;
  gap: 24px;
  padding: 0 24px;
}
.support-chat-panel {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.support-side-panel {
  flex: 0 0 300px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 0;
}
.support-chat-status,
.support-chat-hours {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
}
.support-chat-status.hidden,
.support-chat-hours.hidden {
  display: none;
}
.support-chat-status {
  color: var(--green);
}
.support-chat-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
}

/* The actual scrollable element - flex column + justify-content: flex-end
   pins a short conversation to the bottom (right above the composer, like
   any real chat app) instead of stranding it at the top with a dead gap
   below, the same trick the Mini App's .support-body uses (that one needs
   a JS-measured min-height to reach the composer since it's sharing the
   whole app's scroll container; here .support-chat-scroll IS the scroll
   container, so plain flex does it with no measuring). */
.support-chat-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px 0;
}
.support-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.support-empty {
  margin: 24px 4px;
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.5;
  text-align: center;
}
.support-date-divider {
  display: flex;
  justify-content: center;
  margin: 6px 0;
}
.support-date-divider span {
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--dash-card);
  color: var(--ink-soft);
  font-size: 11.5px;
  font-weight: 650;
}

@keyframes support-bubble-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.support-bubble {
  max-width: 78%;
  padding: 12px 14px 8px;
  border-radius: 18px;
  box-shadow: 0 1px 3px rgba(20, 22, 26, 0.08);
  animation: support-bubble-in 220ms ease;
}
.support-bubble.support-bubble-noanim {
  animation: none;
}
.support-bubble p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.45;
  white-space: pre-wrap;
}
.support-bubble-time {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  margin-top: 4px;
  font-size: 10.5px;
  opacity: 0.65;
}
.support-bubble-time svg {
  width: 13px;
  height: 13px;
}
.support-bubble-theirs {
  align-self: flex-start;
  background: var(--dash-card);
  color: var(--ink);
  border-bottom-left-radius: 5px;
}
.support-bubble-mine {
  align-self: flex-end;
  /* Same --support-mine-bg the Mini App's own chat uses (web/styles.css) -
     exact color match is the point here, unlike the rest of this page. */
  background: #ffe9ae;
  color: var(--ink);
  border-bottom-right-radius: 5px;
}
.support-bubble-ai-tag {
  display: block;
  margin-bottom: 3px;
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.support-bubble-failed {
  cursor: pointer;
  border: 1.5px solid #c0392b;
}
.support-bubble-failed .support-bubble-time {
  color: #c0392b;
  opacity: 1;
}

.support-faq.card {
  padding: 4px 8px 4px 16px;
  margin-top: 14px;
  margin-bottom: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
}
.support-faq-header {
  display: flex;
  align-items: center;
  gap: 2px;
}
.support-faq-header strong {
  flex: 1;
  min-width: 0;
  padding: 12px 0;
  font-size: 14.5px;
}
.support-faq-close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-soft);
  transition: background-color 120ms ease;
}
.support-faq-close:active {
  background: var(--line);
}
.support-faq-close svg {
  width: 16px;
  height: 16px;
}
.support-faq-item {
  display: block;
  width: 100%;
  padding: 13px 0;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  text-align: left;
}

.support-composer {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 14px 0 calc(18px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
}
.support-input {
  flex: 1;
  resize: none;
  max-height: 120px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 14.5px;
  line-height: 1.35;
  /* A <textarea>'s UA default is overflow:auto, which some mobile browsers
     paint as an always-visible scrollbar track down the right edge even at
     a single empty row (nothing to actually scroll yet) - read as a stray
     grey bar sitting right in front of the send button. Scrolling itself
     stays available for once a long message grows past max-height; only
     the track chrome is hidden. Same fix as the Mini App's own composer
     (web/styles.css's .support-input). */
  scrollbar-width: none;
}
.support-input::-webkit-scrollbar {
  display: none;
}
.support-input:focus {
  outline: none;
  border-color: var(--ink);
}
.support-send-btn {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  transition: transform 120ms ease, filter 120ms ease;
}
.support-send-btn:active {
  transform: scale(0.94);
}
.support-send-btn:disabled {
  opacity: 0.6;
}
.support-send-btn svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 900px) {
  /* The overlay covers the whole viewport (sidebar included) regardless of
     breakpoint - only the side panel (a desktop-only extra, not part of
     the Mini App-matched chat itself) and some spacing needs to change. */
  .support-side-panel {
    display: none;
  }
  .support-chat-topbar {
    padding: max(14px, env(safe-area-inset-top)) 16px 12px;
  }
  .support-chat-layout {
    padding: 0 16px;
  }
}

/* Mobile nav: a right-side slide-out drawer (.dash-drawer), replacing the
   earlier bottom tab bar entirely (dropped per direct request - its icons
   never sat cleanly against the separate account/support buttons up top,
   and duplicating nav in two places was the root of that). Opened via one
   enlarged always-present avatar button (.dash-mobile-account-btn,
   top-right on every dash page, not just account.html, and position:fixed
   so it stays pinned in place while the page scrolls) - the drawer holds
   the same 4 nav links as the desktop sidebar plus Выйти. Markup lives
   once per dash page (same duplication convention as .dash-nav). */
.dash-mobile-account-btn,
.dash-drawer-overlay,
.dash-drawer {
  display: none;
}

@media (max-width: 900px) {
  .dash-shell {
    position: relative;
    flex-direction: column;
  }
  /* Sidebar nav is a desktop-only concept on mobile - navigation lives in
     .dash-drawer below. The brand row (logo + "Simway") is desktop-sidebar
     furniture too now - kept only on account.html (Главная) as a sticky
     top strip with the wordmark and a divider under it; every other page
     hides the whole strip (not just the brand row inside it) so there's no
     leftover empty band + divider line where the wordmark used to be. */
  .dash-sidebar {
    display: none;
  }
  body[data-page="account"] .dash-sidebar {
    display: flex;
    /* Base rule's flex: 0 0 260px sets a fixed WIDTH on desktop (a row
       flex item) - .dash-shell switches to flex-direction: column here,
       where the same flex-basis instead forces a fixed HEIGHT, stretching
       this down to a tall 260px band. flex: none clears it back to
       content-sized. */
    flex: none;
    flex-direction: row;
    align-items: center;
    height: 60px;
    padding: 0 20px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    /* Sticky, not static - the brand strip stays pinned at the top while
       the page scrolls, same as the account button floating over it. */
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--paper-soft);
  }
  .dash-brand {
    padding: 0;
  }
  .dash-brand-sub { display: none; }
  /* Bumped up from the desktop sidebar's 30px - this is the only place the
     wordmark appears on mobile now, so it can afford to read a bit larger. */
  body[data-page="account"] .dash-brand .brand-mark {
    width: 34px;
    height: 34px;
    flex: none;
  }
  .dash-nav {
    display: none;
  }
  .dash-main {
    /* 48px, not 24 - the floating account button (.dash-mobile-account-btn)
       overlays this top-right corner on every page but account.html (which
       instead gets its own sticky brand strip pushing content down for
       free, see the override just below). Without this, a page whose
       header title/action row reaches close to the top edge (esims.html's
       «История» button was the one that actually collided) sits directly
       under the button instead of clear of it. */
    padding: 48px 18px 56px;
  }
  body[data-page="account"] .dash-main {
    padding-top: 24px;
  }
  .dash-stats-card {
    grid-template-columns: 1fr;
  }
  .dash-dest-grid {
    grid-template-columns: 1fr;
  }

  /* The old per-page topbar chip (Поддержка button + full name/email
     avatar dropdown) only ever existed on account.html and is superseded
     by .dash-mobile-account-btn below (present on every page now) - hidden
     outright on mobile rather than repositioned. */
  .dash-topbar-actions {
    display: none;
  }
  /* "Все страны" next to "Рекомендуемые направления" - dropped entirely on
     mobile (not just its text label), the heading alone is enough. */
  .dash-section-link-countries {
    display: none;
  }
  /* esims.html's «История» button sits in the same row as the page title,
     right under the floating account button above it - the desktop btn-sm
     sizing (10px 20px padding, 14px text) reads as too big next to a 30px
     bold title on a narrow phone screen. */
  .esims-history-btn {
    padding: 7px 14px;
    font-size: 13px;
    gap: 6px;
  }
  .esims-history-btn svg {
    width: 14px;
    height: 14px;
  }

  .dash-mobile-account-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    position: fixed;
    top: 14px;
    right: 20px;
    z-index: 30;
    /* A light pill (person icon + name + chevron), not a solid-dark
       bare-initial circle - reads as a proper account/profile control
       instead of an unlabeled avatar dot. Capped so a long name can't eat
       the row; the name span (not this whole button) is what ellipsizes,
       so the icon and chevron never get squeezed out. */
    height: 40px;
    max-width: 46vw;
    padding: 0 14px 0 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink);
    font-weight: 650;
    font-size: 14.5px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(20, 22, 26, 0.08);
  }
  .dash-mobile-account-icon {
    width: 20px;
    height: 20px;
    flex: none;
  }
  #dash-mobile-account-avatar {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .dash-mobile-account-chevron {
    width: 14px;
    height: 14px;
    flex: none;
    color: var(--ink-soft);
  }
  /* account.html has its own 60px sticky brand strip above (see
     body[data-page="account"] .dash-sidebar) - re-center the button inside
     that strip instead of the generic floating offset every other page
     uses, so it lines up evenly with the wordmark next to it. */
  body[data-page="account"] .dash-mobile-account-btn {
    top: 10px;
  }

  .dash-drawer-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 49;
    background: rgba(16, 17, 20, 0.45);
    opacity: 0;
    transition: opacity 220ms ease;
  }
  .dash-drawer-overlay[hidden] {
    display: none;
  }
  .dash-drawer-overlay.is-open {
    opacity: 1;
  }

  .dash-drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    width: min(300px, 82vw);
    background: var(--paper);
    box-shadow: -10px 0 34px rgba(20, 22, 26, 0.2);
    padding: max(20px, env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom, 0px));
    transform: translateX(100%);
    transition: transform 220ms ease;
    overflow-y: auto;
  }
  .dash-drawer[hidden] {
    display: none;
  }
  .dash-drawer.is-open {
    transform: translateX(0);
  }
  .dash-drawer-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--line);
  }
  .dash-drawer-head-link {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
    color: inherit;
    text-decoration: none;
    border-radius: var(--radius-md);
    margin: -6px;
    padding: 6px;
    transition: background 0.15s ease;
  }
  .dash-drawer-head-link:active {
    background: #e2e4df;
  }
  .dash-drawer-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--paper);
    font-weight: 700;
    font-size: 15px;
    flex: none;
  }
  .dash-drawer-user {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
    min-width: 0;
    flex: 1 1 auto;
  }
  .dash-drawer-user strong {
    font-size: 14.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dash-drawer-user span {
    font-size: 12.5px;
    color: var(--ink-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dash-drawer-close {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--paper-soft);
    color: var(--ink-soft);
    cursor: pointer;
  }
  .dash-drawer-close svg {
    width: 16px;
    height: 16px;
  }
  .dash-drawer-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 12px;
  }
  .dash-drawer-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: var(--radius-md);
    color: var(--ink);
    text-decoration: none;
    font-size: 15px;
    font-weight: 550;
  }
  .dash-drawer-link svg {
    width: 20px;
    height: 20px;
    flex: none;
    color: #57514a;
  }
  .dash-drawer-link.is-active {
    background: #e2e4df;
    font-weight: 700;
  }
  .dash-drawer-link.is-active svg {
    color: var(--accent-strong);
  }
  .dash-drawer-logout {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    margin-top: auto;
    border-top: 1px solid var(--line);
    border-left: none;
    border-right: none;
    border-bottom: none;
    background: none;
    font-family: inherit;
    font-size: 15px;
    font-weight: 550;
    color: #d64545;
    cursor: pointer;
    text-align: left;
  }
  .dash-drawer-logout svg {
    width: 20px;
    height: 20px;
    flex: none;
  }
}

/* ---------- store.html (Магазин) ---------- */
.store-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  /* account.html's h1 sits below a small "Обзор" eyebrow line, so its
     title text starts ~23px lower than a bare .store-header's would at the
     same .dash-main padding-top. Match that so every page's title lands at
     the same vertical position, eyebrow or not. */
  padding-top: 23px;
  margin-bottom: 28px;
}
/* The title+subtitle wrapper - a flex item that otherwise only shrinks to
   its own content width (visible on esims.html: .store-title-row's
   "История" button then hugs the title's own edge instead of the page's
   right edge, since justify-content: space-between on .store-header has
   nothing to push against with only one child using its real width). */
.store-header > div {
  flex: 1 1 auto;
  min-width: 0;
}
.store-title {
  margin: 0 0 9px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
/* esims.html's «История» button - was a sibling of the whole title+subtitle
   block, so .store-header's align-items: center centered it against BOTH
   lines together and it landed low, between the two rather than level with
   "Мои eSIM" itself. Nested one level in instead: this row holds just the
   title and the button (naturally level with each other), subtitle sits
   below spanning full width on its own line. */
.store-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.store-title-row .store-title {
  margin-bottom: 0;
}
.esims-history-btn {
  flex: none;
}
.store-subtitle {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14.5px;
}
.store-toolbar {
  position: relative;
  display: flex;
  gap: 12px;
  margin-bottom: 28px;
}
.store-search-wrap {
  position: relative;
  flex: 1 1 auto;
}
.store-search-wrap svg {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--ink-soft);
}
.store-search-input {
  width: 100%;
  padding: 13px 16px 13px 46px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--paper);
  font-family: inherit;
  font-size: 14.5px;
  color: var(--ink);
}
.store-search-input:focus {
  outline: none;
  border-color: var(--ink);
}
.store-filters-btn {
  flex: none;
  gap: 8px;
  padding: 0 20px;
}
.store-filters-btn.is-active {
  border-color: var(--ink);
}
.store-filters-btn svg {
  width: 18px;
  height: 18px;
}

.store-filters-panel[hidden] {
  display: none;
}
.store-filters-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 320px;
  max-width: calc(100vw - 40px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 14px 36px rgba(20, 22, 26, 0.16);
  z-index: 30;
}
.store-filters-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.store-filters-head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}
.store-filters-clear {
  background: none;
  border: none;
  padding: 0;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: underline;
}
.store-filters-clear:hover {
  color: var(--ink);
}
.store-filter-group {
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.store-filter-group:first-of-type {
  padding-top: 0;
  border-top: none;
}
.store-filter-group h3 {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.store-checkbox {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  cursor: pointer;
}
.store-checkbox input {
  width: 16px;
  height: 16px;
  accent-color: var(--ink);
  cursor: pointer;
}
.store-price-range {
  width: 100%;
  accent-color: var(--accent-strong);
}
.store-price-labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--ink-soft);
}

.store-tabs {
  display: flex;
  gap: 22px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 560px) {
  .store-tabs {
    /* 4 tab labels don't fit a ~340px phone viewport at their natural
       width - wrapping would break the underline-tab look, so scroll
       horizontally instead (the standard mobile tab-bar pattern), with
       the scrollbar itself hidden for a cleaner edge. */
    gap: 16px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .store-tabs::-webkit-scrollbar {
    display: none;
  }
  .store-tab {
    flex: none;
    white-space: nowrap;
  }
}
.store-tab {
  padding: 0 0 12px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
}
.store-tab.is-active {
  color: var(--ink);
  border-bottom-color: var(--accent-strong);
}

.store-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.dash-empty-text {
  grid-column: 1 / -1;
  color: var(--ink-soft);
  font-size: 14.5px;
  padding: 20px 0;
}
.store-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(20, 22, 26, 0.08);
}
.store-card-local {
  color: inherit;
  text-decoration: none;
  transition: box-shadow 150ms ease;
}
.store-card-local:hover {
  box-shadow: 0 12px 28px rgba(20, 22, 26, 0.12);
}
.store-card-photo {
  position: relative;
  /* Was a flat height: 130px - against a full-width mobile card (the main
     way these photos are seen: store.html's country list), that's roughly
     a 2.7:1 crop window on a 16:9 source, aggressive enough to regularly
     cut the actual subject (tower tops, skyline spires) right out of frame.
     Matching the source ratio here means essentially no crop, regardless
     of viewport width - the photo pipeline already picks a single hero
     landmark per country (see esimbot-country-photo-pipeline memory), so
     showing it whole is what actually sells the destination. */
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: var(--paper-soft);
}
.store-card-photo-region {
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(135deg, #dbeafe 0%, #eef2ff 100%);
}
.store-card-flag {
  position: absolute;
  left: 14px;
  bottom: -14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 0 0 3px var(--paper);
  overflow: hidden;
}
.store-card-flag img {
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: 50%;
}
.store-card-globe {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--paper);
  color: #4d6bd6;
}
.store-card-globe svg {
  width: 22px;
  height: 22px;
}
.store-card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 16px 16px;
}
.store-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.store-card-name {
  display: flex;
  flex-direction: column;
  font-weight: 700;
  font-size: 15px;
}
.store-card-count {
  font-weight: 500;
  font-size: 12px;
  color: var(--ink-soft);
}
.store-card-price {
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
}
.store-card-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.store-card-meta span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 6px;
  border-radius: var(--radius-sm);
  background: var(--paper-soft);
  text-align: center;
}
.store-card-meta small {
  font-size: 10.5px;
  color: var(--ink-soft);
}
.store-card-meta strong {
  font-size: 12.5px;
}
.store-card-btn {
  /* Was deliberately muted gray vs the site's bright accent-yellow -
     explicitly overridden back to it per direct request ("в популярных
     тоже выбрать тариф желтым сделай"), so this now just adjusts
     size/padding and leaves color to .btn-primary. */
  padding: 11px;
  font-size: 14px;
}

@media (max-width: 900px) {
  .store-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  /* Was wrapping onto its own row below the search bar (flex-wrap: wrap on
     .store-toolbar) - an orphaned little pill sitting alone with a full
     empty row of space beside it. Icon-only and kept on the same row as
     the search box instead, like a standard mobile toolbar. */
  .store-filters-btn {
    flex: none;
    width: 46px;
    padding: 0;
    justify-content: center;
  }
  .store-filters-btn-label {
    display: none;
  }
  .store-filters-panel {
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
  }
}

/* ---------- esims.html (Мои eSIM) ---------- */
.esims-search-wrap {
  margin-bottom: 24px;
}
.esims-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.esim-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 22px;
  background: var(--paper);
  border: 1px solid rgba(20, 22, 26, 0.05);
  border-radius: var(--radius-lg);
  box-shadow: 0 6px 18px rgba(20, 22, 26, 0.05);
}
.esim-flag {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--paper-soft);
  overflow: hidden;
  flex: none;
  color: #4d6bd6;
}
.esim-flag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.esim-flag svg {
  width: 23px;
  height: 23px;
}
.esim-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.esim-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.esim-head strong {
  font-size: 15.5px;
  font-weight: 700;
}
.esim-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 18px;
  color: var(--ink-soft);
  font-size: 13px;
}
.esim-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.esim-meta svg {
  width: 14px;
  height: 14px;
  flex: none;
}
.esim-price {
  font-weight: 700;
  color: var(--ink);
  font-size: 14.5px;
  margin-left: auto;
}
.esim-status-note {
  flex: 0 0 250px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--paper-soft);
  border: 1px solid rgba(20, 22, 26, 0.05);
  border-radius: var(--radius-md);
}
.esim-status-note p {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.esim-status-note .btn {
  align-self: flex-start;
}

@media (max-width: 900px) {
  .esim-row {
    flex-wrap: wrap;
  }
  .esim-status-note {
    flex: 1 1 100%;
  }
}

/* ---------- country.html (тарифы одной страны) ---------- */
.country-card-btn {
  /* Was deliberately muted (#f2c94c) vs the full --accent for a whole
     column of repeated buttons - explicitly overridden back to the site's
     bright accent per direct request ("кнопки выбрать тариф все сделай
     желтыми и яркими"), so this now just adjusts size/padding and leaves
     color to .btn-primary. */
  padding: 11px;
  font-size: 14px;
}
/* Oval/pill frame instead of a plain text link - same white-surface +
   shadow language as .payment-back (payment.html), just a pill wide enough
   to keep the "Все страны" label instead of an icon-only circle. */
.country-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  padding: 9px 16px 9px 12px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(20, 22, 26, 0.1);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.country-back-btn svg {
  width: 16px;
  height: 16px;
  flex: none;
}
.country-back-btn:hover {
  box-shadow: 0 2px 8px rgba(20, 22, 26, 0.16);
}
.country-back-btn:active {
  transform: scale(0.97);
}
.country-header-copy {
  display: flex;
  align-items: center;
  gap: 14px;
}
.country-flag {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 4px 14px rgba(20, 22, 26, 0.1);
  overflow: hidden;
  flex: none;
}
.country-flag img {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: 50%;
}
.country-card-plain .store-card-body {
  padding: 20px;
}

/* ---------- settings.html (Настройки) ---------- */
.settings-card {
  max-width: 480px;
  padding: 22px 24px;
  margin-bottom: 20px;
  background: var(--dash-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
@media (min-width: 901px) {
  /* On a wide desktop viewport .dash-main can be far wider than the
     480px-capped settings cards, leaving them hugging the sidebar's edge
     while most of the page sits empty to the right - shift the whole
     profile column (header included, so the title lines up with the cards
     below it) into a centered block instead. */
  body[data-page="settings"] .dash-main {
    max-width: 640px;
    margin: 0 auto;
  }
}
.settings-card h2 {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 700;
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
}
.settings-row:first-of-type {
  border-top: none;
}
.settings-row-label {
  color: var(--ink-soft);
}
.settings-row-value {
  font-weight: 600;
}
@media (max-width: 560px) {
  .settings-row {
    /* space-between on a row this narrow leaves no room for a long email
       address next to its label - they end up jammed together with no
       gap at all. Stack label above value instead. */
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}
.settings-form .auth-field-label:first-of-type {
  margin-top: 0;
}
.settings-form .btn {
  margin-top: 4px;
}

/* Inline-editable profile rows (name/email) - swaps the plain value+label
   row for a small form in place, without navigating away or opening a
   modal. See site/settings.js. */
.settings-row-edit {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.settings-row-static {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.settings-row-static[hidden] {
  display: none;
}
.settings-edit-btn {
  flex: none;
  padding: 0;
  border: none;
  background: none;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--ink-soft);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.settings-edit-btn:hover {
  color: var(--ink);
}
.settings-row-editform {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.settings-row-editform[hidden] {
  display: none;
}
.settings-inline-input {
  padding: 11px 14px;
  border-radius: 10px;
}
.settings-row-actions {
  display: flex;
  gap: 8px;
}
.settings-resend-btn {
  align-self: flex-start;
  padding: 0;
  border: none;
  background: none;
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.settings-resend-btn:hover {
  color: var(--ink);
}
.settings-pending-note {
  margin: 0;
  font-size: 13.5px;
  color: var(--ink-soft);
}
.settings-pending-note strong {
  color: var(--ink);
}
.settings-row-notice {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 2px 0 0;
  font-size: 13px;
  font-weight: 560;
  color: #1c7c3f;
}
.settings-row-notice[hidden] {
  display: none;
}
.settings-row-notice .auth-notice-icon {
  margin-top: 0;
}
.settings-row-notice .auth-notice-icon svg {
  width: 15px;
  height: 15px;
}
.settings-row-notice.is-error {
  color: #c23b3b;
}

/* Language / currency preference card */
.settings-select-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.settings-select-row:first-of-type {
  border-top: none;
}
.settings-select-label {
  font-size: 14.5px;
  color: var(--ink);
}
.settings-select {
  flex: none;
  padding: 9px 34px 9px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  background: var(--paper) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23807a70" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>') no-repeat right 10px center / 16px 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.settings-select:focus {
  outline: none;
  border-color: var(--ink);
}
.settings-currency-hint {
  margin: 14px 0 0;
}
@media (max-width: 560px) {
  .settings-select-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .settings-select {
    align-self: stretch;
  }
}