/* Self-hosted (not Google Fonts CDN) - Telegram's in-app browser on some
   clients blocks or badly delays third-party font requests, which was
   silently falling back to the system font stack (much heavier/bigger
   looking) even though the CSS values were correct. Single variable font
   file per subset covers weights 400-900, same as the Google Fonts request
   it replaces. */
@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;
}

:root {
  --accent: #ffd21a;
  --accent-strong: #ffc400;
  --bg: #f5f6f8;
  --card: #ffffff;
  --text: #111827;
  --muted: #6f7480;
  --line: rgba(17, 24, 39, 0.08);
  --green: #18b35b;
  --shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  --radius: 22px;
  --app-max-width: 480px;
  --support-mine-bg: #ffe9ae;
}

/* Dark theme - toggled by tapping the top-right button on Home (was a
   duplicate shortcut to Profile, which is still one tap away via the
   bottom tab bar, so repurposing it costs nothing). These 9 tokens alone
   already recolor most of the app for free, since text/border/surface
   colors were mostly already written as var(--text)/var(--muted)/
   var(--card)/var(--bg)/var(--line) rather than literal hex - the large
   override block near the end of this file only has to deal with the
   places that used a literal color instead of the token. */
:root[data-theme="dark"] {
  --accent: #ffd21a;
  --accent-strong: #ffc400;
  --bg: #18181b;
  --card: #232428;
  --text: #f2f2f3;
  --muted: #9a9da3;
  --line: rgba(255, 255, 255, 0.08);
  --green: #27ce7a;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  --support-mine-bg: #4a3e14;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* The document itself (html/body) never scrolls at all - only #scroll-root
   does. Without this split, iOS/Android both let the whole page get
   dragged past its top/bottom edge (the elastic "rubber-band" stretch) -
   native apps and major Mini Apps never let that happen because there's no
   real page underneath to drag, just a fixed frame with one scrollable
   pane inside it. */
html {
  height: 100%;
  background: var(--bg);
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  letter-spacing: 0;
  overscroll-behavior: none;
  touch-action: none;
}

.scroll-root {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: calc(74px + max(var(--tg-inset-bottom, 0px), env(safe-area-inset-bottom, 0px)));
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

/* The support chat hides .tabbar entirely (setTabbarVisible in app.js) and
   its own fixed .support-input-bar reserves its own clearance instead - the
   74px above was still being added on top of that unconditionally, padding
   the scrollable area with ~74px of pure dead space nothing needed anymore
   (part of why the chat read as "stuck halfway up the screen" on open). */
body.no-tabbar .scroll-root {
  padding-bottom: max(var(--tg-inset-bottom, 0px), env(safe-area-inset-bottom, 0px));
}

/* Applied while a bottom sheet is open, so the page behind it can't be
   scrolled at the same time. */
.scroll-root.scroll-locked {
  overflow: hidden;
  touch-action: none;
}

button, input, textarea {
  font: inherit;
}

button {
  appearance: none;
  -webkit-appearance: none;
  color: inherit;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

button:focus,
input:focus {
  outline: none;
}

button:focus-visible,
input:focus-visible {
  outline: 2px solid rgba(255, 196, 0, 0.55);
  outline-offset: 2px;
}

button:disabled {
  cursor: default;
  opacity: 0.72;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(max(10px, env(safe-area-inset-top)) + var(--tg-inset-top, 0px)) 27px 10px;
}

.topbar.hidden {
  display: none;
}

/* Drill-down screens hide .topbar and show their own back-header instead -
   this keeps the same top safe-area clearance so content doesn't jump. */
body.no-topbar .app {
  padding-top: calc(max(10px, env(safe-area-inset-top)) + var(--tg-inset-top, 0px));
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  transition: opacity 120ms ease;
}

.brand:active {
  opacity: 0.65;
}

.brand-mark {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-mark img {
  display: block;
  width: 33px;
  height: 46px;
  object-fit: contain;
  /* The PNG has transparent gaps (comet trail, globe continents) that were
     drawn assuming a white page behind them. Pin a fixed white backdrop so
     the mark always renders the same way regardless of light/dark theme. */
  background: #fff;
  border-radius: 5px;
}

.brand-title {
  display: block;
  color: #ffc400;
  font-size: 24px;
  line-height: 1;
  font-weight: 600;
}

.brand-sub {
  display: block;
  margin-top: 4px;
  color: #69707d;
  font-size: 13px;
  line-height: 1.08;
}

.settings-btn {
  display: grid;
  place-items: center;
  width: 55px;
  height: 55px;
  border: 0;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
  color: var(--text);
  transition: transform 120ms ease, background-color 120ms ease;
}

.settings-btn:active {
  transform: scale(0.92);
  background: rgba(255, 255, 255, 1);
}

/* Sun/moon crossfade, same mechanism as .tab-icon-outline/.tab-icon-filled
   below - both icons always in the DOM, stacked, opacity+scale transition
   between them driven purely by the [data-theme="dark"] attribute. No JS
   icon-swapping needed; app.js only ever toggles the attribute itself. */
.theme-icon-wrap {
  position: relative;
  width: 24px;
  height: 24px;
}

.theme-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 220ms ease, transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.theme-icon svg {
  width: 24px;
  height: 24px;
}

.theme-icon-sun {
  opacity: 0;
  transform: scale(0.5) rotate(-40deg);
}

.theme-icon-moon {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

[data-theme="dark"] .theme-icon-sun {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

[data-theme="dark"] .theme-icon-moon {
  opacity: 0;
  transform: scale(0.5) rotate(40deg);
}

.app {
  padding: 0 27px 8px;
  transition: opacity 130ms ease;
  will-change: opacity;
}

.hero-card-wrap {
  margin-top: 2px;
}

.hero-card {
  position: relative;
  aspect-ratio: 343 / 198;
  overflow: hidden;
  border-radius: 22px;
  background: #101827;
  box-shadow: var(--shadow);
}

.hero-track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.hero-track::-webkit-scrollbar {
  display: none;
}

.hero-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background-position: center;
  background-size: cover;
}

/* A light dark tint on the left (not an opaque panel) so white title/price
   text stays readable regardless of how bright that part of the photo is,
   while the photo itself stays fully visible - the "text directly over a
   real photo" hero used by big travel/carrier apps. */
.hero-slide-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(10, 14, 25, 0.45) 0%,
    rgba(10, 14, 25, 0.2) 35%,
    rgba(10, 14, 25, 0) 65%
  );
}

.hero-slide-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  max-width: 68%;
  padding: 20px 18px 18px 20px;
}

.hero-slide-title {
  margin: 0;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
  font-size: 22px;
  line-height: 1.08;
  font-weight: 850;
}

.hero-slide-price {
  margin-top: 6px;
  color: var(--accent-strong);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
  font-size: 27px;
  line-height: 1.05;
  font-weight: 900;
}

.hero-slide-feature {
  margin-top: 10px;
  color: #f2f3f5;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
  font-size: 12.5px;
  line-height: 1.3;
  font-weight: 650;
}

.hero-slide-cta {
  margin-top: 13px;
  padding: 10px 20px;
  border-radius: 13px;
  font-size: 13.5px;
  font-weight: 800;
  background: var(--accent);
  color: #16181c;
}

.hero-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  gap: 5px;
}

.hero-dots span {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #dfe2e8;
  transition: background-color 200ms ease;
}

.hero-dots span.active {
  background: var(--accent-strong);
}

.search-row {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 54px;
  margin: 30px 0 24px;
  padding: 0 18px;
  border: 0;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow);
  color: #7a808a;
  text-align: left;
  font-size: 18px;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.search-row:active {
  transform: scale(0.992);
}

.search-row.compact {
  margin-top: 4px;
}

.search-icon {
  width: 30px;
  color: #59606c;
  font-size: 29px;
  line-height: 1;
}

.search-row input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 20px;
}

.home-search-row {
  margin: 6px 0 14px;
}

.search-results {
  margin-top: 18px;
}

.search-results[hidden] {
  display: none;
}

.search-results-head {
  margin-bottom: 10px;
}

.search-results-list {
  display: grid;
  gap: 10px;
}

.search-country-card {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 66px;
  padding: 10px 15px;
  border: 0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.055);
  text-align: left;
  transition: transform 120ms ease, background-color 120ms ease;
  /* ~190 rows in the full country list otherwise all get full layout/paint
     work even when scrolled off screen - content-visibility skips that for
     rows outside the viewport, and contain-intrinsic-size reserves roughly
     this row's real height (66px + the list's 10px gap) so scrollbar size
     doesn't jump as rows enter/exit their skipped state. */
  content-visibility: auto;
  contain-intrinsic-size: 0 76px;
}

.search-country-card:active {
  transform: scale(0.992);
  background: #fafafa;
}

.search-country-flag {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.06);
}

.search-country-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.search-country-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 16px;
  line-height: 1.12;
  font-weight: 400;
  white-space: nowrap;
}

.search-country-copy em {
  color: #777e89;
  font-size: 13px;
  line-height: 1.1;
  font-style: normal;
}

.compact-empty {
  padding: 18px 12px;
}

.sheet-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

.country-sheet {
  position: fixed;
  inset: 0;
  z-index: 50;
  overscroll-behavior: none;
  touch-action: none;
}

.country-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, 0.34);
  opacity: 0;
  touch-action: none;
  transition: opacity 200ms ease;
}

.country-sheet.open .country-sheet-backdrop {
  opacity: 1;
}

.country-sheet-panel {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  max-height: min(78vh, 680px);
  padding: 8px 16px max(18px, env(safe-area-inset-bottom));
  border-radius: 24px 24px 0 0;
  background: #fff;
  box-shadow: 0 -18px 45px rgba(15, 23, 42, 0.18);
  transform: translateY(100%);
  touch-action: pan-y;
  overscroll-behavior: contain;
  transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
}

.country-sheet.open .country-sheet-panel {
  transform: translateY(0);
}

.country-sheet-handle {
  width: 44px;
  height: 5px;
  margin: 3px auto 13px;
  border-radius: 999px;
  background: #d9dde5;
}

.sheet-search-row {
  display: flex;
  align-items: center;
  min-height: 58px;
  padding: 0 10px 0 18px;
  border-radius: 22px;
  background: #f5f6f8;
}

.sheet-search-row input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 18px;
}

.sheet-close {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #747b87;
  font-size: 28px;
  line-height: 1;
  transition: background-color 120ms ease, transform 120ms ease;
}

.sheet-close:active {
  background: #f4f5f7;
  transform: scale(0.96);
}

.sheet-title {
  margin: 18px 2px 12px;
  font-size: 20px;
  line-height: 1.15;
  font-weight: 700;
}

.sheet-results-list {
  max-height: calc(min(78vh, 680px) - 160px);
  overflow-y: auto;
  padding-bottom: 4px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.filter-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  transition: transform 120ms ease, background-color 120ms ease;
}

.filter-btn:active {
  transform: scale(0.96);
  background: #f5f6f8;
}

.filter-btn.active {
  background: #fff3cf;
  color: #7a5900;
}

.filter-icon {
  width: 16px;
  height: 16px;
}

.filter-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent-strong);
  border: 2px solid var(--bg);
  display: none;
}

.filter-btn.active .filter-dot {
  display: block;
}

.filter-sheet-panel {
  max-height: min(72vh, 580px);
  overflow: hidden;
}

.filter-sheet-viewport {
  overflow: hidden;
}

.filter-sheet-pages {
  display: flex;
  width: 200%;
  transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.filter-sheet-pages.page-continents {
  transform: translateX(-50%);
}

.filter-page {
  width: 50%;
  flex: 0 0 50%;
  min-width: 0;
}

.filter-sheet-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 2px 14px;
}

.filter-sheet-head .sheet-title {
  flex: 1;
  margin: 0;
}

.sheet-back {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #f5f6f8;
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  transition: background-color 120ms ease;
}

.sheet-back:active {
  background: #eceef1;
}

.filter-options {
  display: grid;
  gap: 6px;
  padding-bottom: 10px;
}

.filter-option {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 54px;
  padding: 0 16px;
  border: 0;
  border-radius: 16px;
  background: #f8f9fb;
  color: var(--text);
  font-size: 16px;
  font-weight: 650;
  text-align: left;
  transition: transform 120ms ease, background-color 120ms ease;
}

.filter-option:active {
  transform: scale(0.99);
  background: #eef0f3;
}

.filter-option.active {
  background: #fff3cf;
  color: #7a5900;
}

.filter-option-nav span:first-child {
  flex: 1;
}

.filter-option-value {
  margin-right: 4px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}

.filter-option .check {
  margin-left: auto;
  color: #c99400;
  font-weight: 900;
  opacity: 0;
}

.filter-option.active .check {
  opacity: 1;
}

.chevron {
  margin-left: auto;
  color: #737984;
  font-size: 42px;
  line-height: 0.7;
  font-weight: 300;
}

.home-section {
  margin-top: 22px;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

h2,
.section-title {
  margin: 0;
  font-size: 18px;
  line-height: 1.15;
  font-weight: 700;
}

.section-title {
  margin: 20px 0 14px;
}

.tariff-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-bottom: 16px;
}

.tariff-header .icon-btn {
  justify-self: start;
  margin-bottom: 0;
}

.tariff-header .fav-btn {
  justify-self: end;
}

.tariff-header-center {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}

.tariff-flag {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  margin-right: 0;
}

.tariff-name {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fav-btn {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #9096a2;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  transition: transform 120ms ease, background-color 120ms ease;
}

.fav-btn:active {
  transform: scale(0.88);
  background: #fafafa;
}

.fav-btn svg {
  width: 21px;
  height: 21px;
}

.fav-btn.active {
  color: #ff4d67;
}

.fav-btn.active svg {
  fill: #ff4d67;
}

.country-photo {
  position: relative;
  z-index: 1;
  aspect-ratio: 16 / 9;
  /* margin percentages resolve against the container's WIDTH, not this
     element's own height, so -6.75% of width ~= -12% of a 16:9 photo's
     height - a much smaller "rides up over the photo" amount than before
     (was 30%), which was hiding too much of the actual photo. */
  margin-bottom: -6.75%;
  border-radius: 20px;
  background-position: center;
  background-size: cover;
  background-color: #1a1d27;
  box-shadow: var(--shadow);
  transition: opacity 190ms ease;
}

/* Set only while the real photo is still being fetched (see the Image()
   preload in renderCountry) - fades in once it's decoded instead of
   popping in abruptly the instant the network request happens to finish. */
.country-photo.photo-pending {
  opacity: 0;
}

.country-photo-fallback {
  background: linear-gradient(135deg, #2b3245, #12141c);
}

.flag-img.country-photo-flag {
  position: absolute;
  top: 32%;
  left: 50%;
  width: 72px;
  height: 72px;
  transform: translate(-50%, -50%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.flag-img.country-photo-corner-flag {
  position: absolute;
  left: 14px;
  bottom: 15%;
  width: 44px;
  height: 44px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

/* Rides up over the bottom ~12% of the photo above it (negative margin on
   .country-photo does the pulling) instead of sitting flush below it - the
   layered "card floats over the photo" look from the reference screenshot. */
.feature-row {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 20px;
  padding: 18px 8px;
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
  font-weight: 600;
}

.feature-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f5f6f8;
  color: var(--text);
}

.feature-icon svg {
  width: 20px;
  height: 20px;
}

.tariff-card {
  position: relative;
  margin-bottom: 12px;
  padding: 16px;
  border-radius: 16px;
  background: var(--card);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.tariff-card.popular {
  margin-top: 14px;
  background: #fffcf2;
  box-shadow: inset 0 0 0 1.5px rgba(255, 196, 0, 0.55);
}

.tariff-badge {
  position: absolute;
  top: -12px;
  left: 14px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: #7a5b00;
  font-size: 11px;
  font-weight: 800;
}

.tariff-card-main {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: start;
}

.tariff-card-info {
  display: grid;
  gap: 6px;
}

.tariff-card-info strong {
  font-size: 19px;
  font-weight: 600;
}

.tariff-card-duration {
  color: var(--muted);
  font-size: 13px;
}

.tariff-pill {
  justify-self: start;
  padding: 3px 9px;
  border-radius: 999px;
  background: #f1f2f5;
  color: #5b6270;
  font-size: 11px;
  font-weight: 700;
}

.tariff-card-buy {
  display: grid;
  gap: 8px;
  justify-items: end;
  text-align: right;
}

.tariff-card-price {
  font-size: 17px;
  font-weight: 600;
}

.tariff-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 4px;
  padding: 14px;
  border-radius: 14px;
  background: #fff8e1;
  color: #8a6d1a;
  font-size: 13px;
  line-height: 1.35;
}

.tariff-note-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #f3d67a;
  color: #6b5312;
  font-size: 12px;
  font-weight: 800;
  font-style: italic;
}

.tariff-notes {
  margin-top: 10px;
}

.tariff-notes summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.tariff-notes summary::-webkit-details-marker {
  display: none;
}

.tariff-notes-icon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  color: #7a5b00;
  font-size: 10px;
  font-weight: 800;
  font-style: italic;
}

.tariff-notes[open] summary {
  margin-bottom: 8px;
}

.tariff-notes-item {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 196, 0, 0.14);
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.4;
}

.tariff-notes-item + .tariff-notes-item {
  margin-top: 6px;
}

.tariff-notes-item strong {
  display: block;
  margin-bottom: 2px;
}

.section-head h2 {
  min-width: 0;
}

.country-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 108px;
  gap: 12px;
  margin: 0 -27px;
  padding: 0 27px 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.country-strip::-webkit-scrollbar { display: none; }

.country-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 132px;
  height: 132px;
  padding: 16px 8px 12px;
  border: 0;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

.country-tile:active {
  transform: scale(0.985);
  background: #fafafa;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.country-flag {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin-bottom: 11px;
  overflow: hidden;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.06);
}

.flag-img {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid rgba(17, 24, 39, 0.14);
}

.title-flag {
  display: inline-flex;
  width: 26px;
  height: 26px;
  margin-right: 8px;
  overflow: hidden;
  border-radius: 50%;
  vertical-align: -6px;
  box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.08);
}

.country-name {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  line-height: 1.12;
  font-weight: 400;
  white-space: nowrap;
}

.country-price {
  margin-top: 7px;
  color: #777e89;
  font-size: 12px;
  line-height: 1.1;
}

.esim-home-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.esim-summary {
  position: relative;
  display: grid;
  grid-template-columns: minmax(112px, 25%) minmax(0, 1fr);
  gap: 16px;
  width: 100%;
  min-height: 146px;
  height: auto;
  padding: 10px 16px 10px 14px;
  border: 0;
  border-radius: 21px;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.075);
  text-align: left;
  transition: transform 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

.esim-summary:active {
  transform: scale(0.992);
  background: #fafafa;
  box-shadow: 0 7px 20px rgba(15, 23, 42, 0.07);
}

.esim-photo {
  position: relative;
  align-self: center;
  width: 100%;
  max-width: 150px;
  height: 124px;
  overflow: hidden;
  border-radius: 12px;
}

.esim-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Shown instead of a photo when this country has none in COUNTRIES_WITH_PHOTO
   - same dark-gradient-plus-flag treatment as .country-photo-fallback on the
   country detail page, not a distinct look of its own. */
.esim-photo-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #2b3245, #12141c);
}

.flag-img.esim-photo-fallback-flag {
  width: 64px;
  height: 64px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}

.esim-home-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 14px 14px 12px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
}

.esim-home-chip {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #eef1fa;
  color: #38446b;
}

.esim-home-copy {
  min-width: 0;
  flex: 1;
}

.esim-home-copy strong {
  display: block;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.2;
}

.esim-home-copy span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

.esim-home-link {
  flex: 0 0 auto;
  border: 0;
  background: none;
  padding: 6px 2px;
  color: var(--text);
  font-size: 13px;
  font-weight: 400;
  transition: opacity 120ms ease;
}

.esim-home-link:active {
  opacity: 0.6;
}

.esim-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 0 6px;
}

.esim-title-row {
  display: block;
  min-width: 0;
  /* Reserves clearance under .esim-status-tag (an absolutely-positioned
     corner label on .esim-summary, not a sibling in this row's own flow) so
     a long label + long status combination truncates with an ellipsis
     instead of running underneath the tag. */
  padding-right: 84px;
}

.esim-title-row strong {
  display: block;
  min-width: 0;
  overflow-wrap: break-word;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 400;
}

/* Small corner tag (top-right of the whole card, not inline with the
   title) - the subscription-status placement premium apps use (App Store
   subscription rows, banking cards), rather than a badge competing with the
   title for the same line. No dot, no pill fill - just a quiet uppercase
   label. */
.esim-status-tag {
  position: absolute;
  top: 14px;
  right: 16px;
  color: #9199a6;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.esim-status-tag.ok {
  color: #168847;
}

.esim-status-tag.failed {
  color: #c0392b;
}

.esim-plan {
  margin-top: 7px;
  color: #606775;
  font-size: 15px;
}

.usage-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}

.usage-track {
  display: block;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7e9ee;
}

.usage-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent-strong);
}

.usage-row b {
  color: #4f5665;
  font-size: 15px;
  white-space: nowrap;
}

.esim-left {
  margin-top: 9px;
  color: #7a808a;
  font-size: 14px;
}

.steps-section {
  margin-top: 44px;
  margin-bottom: 28px;
}

.steps-scroll {
  display: flex;
  gap: 12px;
  margin: 0 -27px;
  padding: 4px 27px 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.steps-scroll::-webkit-scrollbar {
  display: none;
}

.step-card {
  flex: 0 0 auto;
  width: 148px;
  padding: 18px 16px;
  border-radius: 18px;
  background: var(--card);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* Was a cool blue-lavender fill - off-brand next to a yellow/gold accent
   everywhere else in the app. A soft amber ring instead of a solid fill,
   matching how .detail-topbar-refresh is framed. */
.step-num {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: 14px;
  border-radius: 10px;
  background: #fffaf0;
  border: 1.5px solid rgba(255, 196, 0, 0.5);
  color: #8a6300;
  font-size: 13px;
  font-weight: 600;
}

.step-card strong {
  display: block;
  margin-bottom: 5px;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.25;
}

.step-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.phone-check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 16px;
  border-radius: 16px;
  background: var(--card);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.phone-check-row input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 15px;
}

.phone-check-row input::placeholder {
  color: #9096a2;
}

.phone-check-results {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.phone-check-results[hidden] {
  display: none;
}

.phone-result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 14px;
  background: var(--card);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.phone-result-copy {
  min-width: 0;
  flex: 1;
}

.phone-result-copy strong {
  display: block;
  font-size: 13.5px;
  font-weight: 400;
}

.phone-result-copy span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.35;
}

.phone-result-pill {
  flex: 0 0 auto;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.phone-result-full .phone-result-pill {
  background: #dcffe8;
  color: var(--green);
}

.phone-result-partial .phone-result-pill {
  background: #fff3cf;
  color: #a8790a;
}

.phone-result-none .phone-result-pill {
  background: #ffe1e1;
  color: #c0392b;
}

.phone-result-empty {
  padding: 16px;
  border-radius: 14px;
  background: var(--card);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.card {
  border: 0;
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--shadow);
  padding: 16px;
}

.list-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 11px;
  text-align: left;
  transition: transform 120ms ease, background-color 120ms ease;
}

.list-card:active {
  transform: scale(0.992);
  background: #fafafa;
}

.pill {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 210, 26, 0.18);
  color: #b18800;
  font-size: 12px;
  font-weight: 800;
}

.pill.ok {
  background: #dcffe8;
  color: var(--green);
}

.pill.failed {
  background: #ffe1e1;
  color: #c0392b;
}

.btn {
  border: 0;
  border-radius: 13px;
  background: var(--accent);
  color: #16181c;
  padding: 11px 18px;
  font-size: 14px;
  font-weight: 400;
  transition: transform 120ms ease, filter 120ms ease;
}

.btn:active {
  transform: scale(0.98);
  filter: brightness(0.98);
}

.btn.block {
  width: 100%;
  margin-top: 12px;
  padding: 15px;
}

.btn.secondary {
  background: var(--card);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.hidden {
  display: none;
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--text);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  transition: transform 120ms ease, background-color 120ms ease;
}

.icon-btn svg {
  width: 20px;
  height: 20px;
}

.icon-btn:active {
  transform: scale(0.94);
  background: #fafafa;
}

.detail-topbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.detail-topbar .icon-btn {
  margin-bottom: 0;
}

/* Absolutely centered on the row itself, not just "between" back/refresh -
   back is a small fixed-width circle but refresh is now a wider text
   pill, so equal-width flex centering no longer lines up; this keeps the
   time dead-center regardless of either button's width. */
.detail-topbar-time {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--text);
  font-size: 16px;
  font-weight: 650;
  white-space: nowrap;
}

/* Same dead-center trick as .detail-topbar-time, for screens whose header
   is a page title next to a back button (Заказы, Реферальная программа,
   Настройки) rather than a timestamp next to refresh. max-width keeps a
   long title like "Реферальная программа" from ever running under the
   back button on a narrow screen - it ellipsizes instead. */
.detail-topbar-title {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: calc(100% - 96px);
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transform: translate(-50%, -50%);
  color: var(--text);
  font-size: 19px;
  font-weight: 700;
}

/* Plain neutral circle, same treatment as .icon-btn (#back) - the redesign
   is the icon glyph itself (a distinct two-arrow refresh symbol, not a
   recolored button). */
.detail-topbar-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--text);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  transition: transform 120ms ease, background-color 120ms ease;
}

.detail-topbar-refresh:active {
  transform: scale(0.94);
  background: #fafafa;
}

.detail-topbar-refresh-icon {
  display: flex;
}

.detail-topbar-refresh-icon svg {
  width: 18px;
  height: 18px;
}

.icon-btn.spinning svg,
.detail-topbar-refresh.spinning svg {
  animation: icon-spin 700ms linear infinite;
}

@keyframes icon-spin {
  to {
    transform: rotate(360deg);
  }
}

.code-card {
  padding: 14px 16px;
}

.code-card .copy-row {
  margin-bottom: 0;
  margin-top: 10px;
}

.info-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0;
  padding: 13px 14px;
  border-radius: 14px;
  background: #fff3cf;
  color: #6b5400;
  font-size: 12.5px;
  line-height: 1.4;
}

.info-banner-icon {
  flex: 0 0 auto;
  font-size: 15px;
  line-height: 1.4;
}

/* Light neutral gray card - dark enough to read as its own surface against
   the page background and the white QR/code cards below it, light enough
   to stay "quiet" rather than becoming its own loud colored block (that
   was the problem with the original green). Gold is reserved for the
   progress fill only, so the number stays the one accent that pops. */
.detail-hero {
  padding: 18px;
  border-radius: 18px;
  background: #e7e9ed;
  color: var(--text);
}

.progress-track {
  height: 8px;
  margin: 10px 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.09);
}

.progress-fill {
  height: 100%;
  /* The app's actual accent yellow (search bars, buttons, tab highlight -
     see --accent/--accent-strong), not the bronze/gold I'd invented for a
     "premium hero card" look - this bar should read as the same brand
     color as everything else, not its own separate palette. */
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
}

.qr-wrap {
  display: flex;
  justify-content: center;
  margin: 12px 0;
  padding: 16px;
  border-radius: 18px;
  background: #fff;
}

.qr-wrap img {
  width: 220px;
  height: 220px;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.detail-row:last-child { border-bottom: 0; }

.muted {
  color: var(--muted);
  font-size: 13px;
}

.empty {
  padding: 42px 16px;
  color: var(--muted);
  text-align: center;
}

.page-title {
  margin: 0 0 12px;
  font-size: 25px;
  line-height: 1.15;
  font-weight: 700;
}

.empty-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 26px 22px 22px;
  text-align: center;
}

.empty-illustration {
  width: 100%;
  max-width: 250px;
  height: 180px;
  margin: 4px 0 4px;
}

.empty-illustration-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

.empty-hero h2 {
  margin: 2px 0 5px;
  font-size: 18px;
  font-weight: 400;
}

.empty-hero p {
  max-width: 300px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}

.empty-hero .btn.block {
  max-width: 260px;
}

.order-info-list.card {
  display: block;
  padding: 4px 6px;
}

.order-info-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 10px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  font-weight: 650;
}

.order-info-row:last-child {
  border-bottom: 0;
}

.order-info-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 22px;
  height: 22px;
  color: var(--text);
}

.order-info-icon svg {
  width: 21px;
  height: 21px;
}

.order-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 11px;
  text-align: left;
}

.referral-hero strong {
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 700;
}

.referral-hero p {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
}

.about-card strong {
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 700;
}

.about-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
}

.about-version {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
}

.about-legal {
  margin-top: 14px;
}

.referral-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 14px;
  padding: 16px 6px;
}

.referral-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
}

.referral-stat:first-child::after {
  content: "";
  position: absolute;
  top: 8%;
  right: 0;
  bottom: 8%;
  width: 1px;
  background: var(--line);
}

.referral-stat b {
  font-size: 18px;
  font-weight: 700;
}

.referral-stat span {
  color: var(--muted);
  font-size: 11.5px;
}

.referral-link-card {
  margin-top: 14px;
  padding: 16px;
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.referral-link-label {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
}

/* Generic "truncated value + copy button" row - referral link, eSIM
   activation code, SM-DP+ address/confirmation code. */
.copy-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px 14px;
  border-radius: 13px;
  background: var(--bg);
}

.copy-row-text {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: 12.5px;
  font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
}

.copy-btn {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  transition: transform 120ms ease;
}

.copy-btn:active {
  transform: scale(0.9);
}

.settings-group-title {
  margin: 20px 2px 10px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.settings-group-title:first-child {
  margin-top: 0;
}

.settings-card {
  padding: 4px 16px;
}

.settings-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 62px;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  text-align: left;
}

.settings-row:last-child {
  border-bottom: 0;
}

.settings-row-action {
  transition: opacity 120ms ease;
}

.settings-row-action:active {
  opacity: 0.6;
}

.settings-row-copy {
  min-width: 0;
  flex: 1;
}

.settings-row-copy strong {
  display: block;
  font-size: 14px;
  font-weight: 400;
}

.settings-row-copy span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.settings-row-value {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 14px;
}

.settings-row-column {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.settings-row-top {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
}

.threshold-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 4px;
}

.threshold-pills[hidden] {
  display: none;
}

.threshold-pill {
  padding: 7px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--bg);
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  transition: transform 120ms ease, background-color 120ms ease, color 120ms ease;
}

.threshold-pill:active {
  transform: scale(0.95);
}

.threshold-pill.active {
  background: #fff3cf;
  color: #7a5900;
}

.faq-card {
  padding: 4px 16px;
}

.faq-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.faq-item:last-child {
  border-bottom: 0;
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--text);
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 20px;
  font-weight: 400;
  transition: transform 150ms ease;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

/* Support chat screen - reuses the app's own .detail-topbar/.icon-btn back
   button and centered title (same shell as FAQ/Orders/Settings) rather than
   a bespoke header, since Telegram's own fullscreen chrome already renders
   its native close pill above the page - a second, different-looking close
   control right under it read as a broken duplicate. */

/* Fixed against the real viewport, not sticky within the page - a sticky
   header only covers its own box, leaving the safe-area strip above it
   (status bar / notch zone) with no explicit background of its own, which
   read as a transparent gap letting scrolled content show through at the
   very top. Fixed + padding-top starting at 0 covers that whole strip in
   one continuous opaque surface, same approach as .support-input-bar uses
   at the bottom. .support-top-spacer (in the thread, sized in JS by
   layoutSupportChrome) reserves the matching space so the first message
   isn't hidden behind it.

   The safe-area padding lives on THIS outer wrapper only, not on the inner
   .detail-topbar - .detail-topbar-title centers itself via `top: 50%` of
   its nearest positioned ancestor, and stacking the huge safe-area inset
   into that same box skewed the 50% point way above the back button's
   actual center (the title visibly floated above the button instead of
   sitting level with it). Nesting a plain, unpadded .detail-topbar inside
   keeps that centering math exactly the same as every other screen. */
.support-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 16;
  padding: calc(max(10px, env(safe-area-inset-top)) + var(--tg-inset-top, 0px)) 27px 10px;
  background: var(--bg);
}

.support-topbar .detail-topbar {
  margin-bottom: 0;
}

/* Live inside the fixed .support-topbar (not the scrollable thread below)
   on purpose - a returning customer with existing history opens the chat
   already scrolled to the bottom of it, so anything placed in the
   scrollable flow near the top would sit off-screen, unseen, exactly when
   it matters most (telling them who's answering right now). The header is
   the one place that's always visible regardless of scroll position. */
.support-status,
.support-hours-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 550;
  text-align: center;
}

/* Both beat plain .hidden on specificity alone, regardless of source order -
   toggled by paintSupportStatus() in app.js: the green dot only while an
   admin has actually replied recently, the bot-hours note only outside
   specialists' 10:00-18:00 (MSK) window - never both, never unconditionally
   like the reference mockup this screen started from. */
.support-status.hidden,
.support-hours-banner.hidden {
  display: none;
}

.support-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
}

/* Reserves the space the now-fixed .support-topbar covers, at the very
   start of the page content - mirrors .support-bottom-spacer's job at the
   other end. Height is set in JS (layoutSupportChrome) to the header's real
   measured height (which changes as .support-status/.support-hours-banner
   above show or hide); this is just the pre-JS fallback. */
.support-top-spacer {
  height: 64px;
}

/* min-height reaches down to the composer (100dvh minus the header+composer
   height, kept in --support-chrome-h by layoutSupportChrome in app.js),
   with justify-content:flex-end below pinning short content to the bottom
   of that space - so a fresh or near-empty conversation sits right above
   the composer like a real chat app, instead of stranded at the top with a
   dead gap below it (plain top-aligned block flow otherwise produces
   whenever there's too little content to fill the screen). Has no visible
   effect once real content is tall enough to fill/exceed it.
   `dvh` (not `vh`) matters here - it's resolved against the WebView's real
   visual viewport, where window.innerHeight (this used to be JS-computed)
   measured short in Telegram's fullscreen mode and left this same gap. The
   plain `vh` line is only a fallback for browsers without dvh support. */
.support-body {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: calc(100vh - var(--support-chrome-h, 130px));
  min-height: calc(100dvh - var(--support-chrome-h, 130px));
}

.support-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 0 16px;
}

.support-empty {
  margin: 24px 12px;
  color: var(--muted);
  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(--card);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 650;
}

/* Plain fade, no vertical slide - a translateY here (in either direction)
   read as the bubble arriving from the wrong end of the chat depending on
   the eye, so this stays direction-neutral: messages simply appear in
   their already-correct place (oldest at top, newest at the bottom). */
@keyframes support-bubble-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.support-bubble {
  max-width: 78%;
  padding: 12px 14px 8px;
  border-radius: 18px;
  box-shadow: var(--shadow);
  animation: support-bubble-in 220ms ease;
}

/* Applied by app.js to every bubble that was already on screen at the
   previous paint - the whole list is rebuilt on every repaint (no DOM
   diffing), so without this every bubble replayed its entrance animation
   on every single repaint, which read as the entire chat flickering. */
.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(--card);
  color: var(--text);
  border-bottom-left-radius: 5px;
}

.support-bubble-mine {
  align-self: flex-end;
  background: var(--support-mine-bg);
  color: var(--text);
  border-bottom-right-radius: 5px;
}

.support-bubble-ai-tag {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.support-faq {
  padding: 4px 8px 4px 16px;
  margin-bottom: 8px;
}

.support-faq-header {
  display: flex;
  align-items: center;
  gap: 2px;
}

.support-faq-title {
  flex: 1;
  min-width: 0;
  padding: 12px 0;
  color: var(--text);
  font-size: 14.5px;
}

/* Dismisses the whole card, for a customer who already knows this stuff
   and doesn't want it taking up space above the composer. */
.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(--muted);
  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(--text);
  font-size: 14px;
  text-align: left;
}

/* Reserves the space the fixed .support-input-bar below would otherwise
   cover, at the end of the scrollable thread - its real height is set by
   layoutSupportInputBar() in app.js (the input bar grows with the
   auto-growing textarea), this is just a safe fallback before JS runs. */
.support-bottom-spacer {
  height: 70px;
}

/* Fixed against the real viewport (not sticky within the page) so the
   composer is always docked at the very bottom, however short the
   conversation is - a sticky element only reaches the bottom once you've
   scrolled the page that far, which left it floating mid-screen on a
   near-empty thread. The tab bar is hidden entirely while this screen is
   open (setTabbarVisible(false) in app.js), so this bar effectively takes
   its place - bottom is set in JS (layoutSupportInputBar, reading the now-0
   .tabbar height) and the bottom padding below picks up the same safe-area
   clearance the tab bar itself used to provide. */
.support-input-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 15;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 10px 27px max(env(safe-area-inset-bottom, 0px), var(--tg-inset-bottom, 0px), 10px);
  background: var(--bg);
}

.support-input {
  flex: 1;
  resize: none;
  max-height: 120px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  color: var(--text);
  font-size: 15px;
  line-height: 1.35;
}

.support-send-btn {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: #16181c;
  box-shadow: 0 6px 16px rgba(255, 196, 0, 0.35);
  transition: transform 120ms ease, filter 120ms ease;
}

.support-send-btn:active {
  transform: scale(0.94);
  filter: brightness(0.98);
}

.support-send-btn svg {
  width: 22px;
  height: 22px;
}

/* Plain checkbox-free toggle switch - a <button role="switch"> instead of
   <input type="checkbox"> so its look isn't at the mercy of each platform's
   native checkbox skin. */
.switch {
  flex: 0 0 auto;
  position: relative;
  width: 46px;
  height: 27px;
  border: 0;
  border-radius: 999px;
  background: #e2e4ea;
  transition: background-color 160ms ease;
}

.switch.on {
  background: var(--accent-strong);
}

.switch-knob {
  position: absolute;
  top: 2.5px;
  left: 2.5px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
  transition: transform 160ms ease;
}

.switch.on .switch-knob {
  transform: translateX(19px);
}

.dest-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 132px;
  gap: 12px;
  margin: 0 -27px;
  padding: 0 27px 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.dest-strip::-webkit-scrollbar {
  display: none;
}

.dest-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  transition: transform 120ms ease, opacity 120ms ease;
}

.dest-card:active {
  transform: scale(0.96);
  opacity: 0.85;
}

.dest-card-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-bottom: 8px;
  border-radius: 16px;
  overflow: hidden;
  background-color: #e7eaef;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.dest-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.flag-img.dest-card-flag {
  position: absolute;
  left: 8px;
  bottom: 8px;
  width: 26px;
  height: 26px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}

.dest-card-name {
  font-size: 13px;
  font-weight: 400;
}

.dest-card-price {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.profile-page {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.profile-page .profile-copy strong {
  font-size: 17px;
  font-weight: 500;
}

.profile-page .profile-premium-badge {
  font-weight: 600;
}

.profile-page .profile-stat b {
  font-size: 15px;
  font-weight: 500;
}

.profile-page .profile-action strong {
  font-size: 15px;
  font-weight: 400;
}

.profile-page .profile-menu-badge {
  font-weight: 600;
}

.profile-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-bottom: 20px;
  padding: 2px 0;
  border: 0;
  background: transparent;
  text-align: left;
  transition: opacity 120ms ease;
}

.profile-card:active {
  opacity: 0.65;
}

.profile-avatar {
  position: relative;
  z-index: 1;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 72px;
  height: 72px;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(145deg, #ffdc2e, #ffb800);
  color: #fff;
}

.profile-avatar svg {
  width: 38px;
  height: 38px;
}

.profile-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.profile-copy strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: 19px;
  line-height: 1.2;
  font-weight: 850;
}

.profile-copy em {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.2;
  font-style: normal;
}

.profile-premium-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  background: #fff3cf;
  color: #8a6600;
  font-size: 12.5px;
  font-weight: 800;
}

.profile-stats.card {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 16px 6px;
  margin-bottom: 14px;
}

.profile-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 0 8px;
  text-align: center;
}

.profile-stat:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 8%;
  right: 0;
  bottom: 8%;
  width: 1px;
  background: var(--line);
}

.profile-stat-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 2px;
  border-radius: 12px;
  background: #f5f6f8;
  color: var(--text);
}

.profile-stat-icon svg {
  width: 19px;
  height: 19px;
}

.profile-stat b {
  font-size: 16px;
  font-weight: 850;
}

.profile-stat-label {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
}

.profile-menu.card {
  padding: 4px 6px;
}

.profile-action {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 62px;
  padding: 12px 16px 12px 8px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  text-align: left;
  transition: transform 120ms ease, background-color 120ms ease;
}

.profile-action:last-child {
  border-bottom: 0;
}

.profile-action:active {
  transform: scale(0.99);
  background: #f7f7f9;
}

.profile-action-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #f5f6f8;
  color: var(--text);
}

.profile-action-icon svg {
  width: 22px;
  height: 22px;
}

.profile-action-meta {
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.profile-action strong {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 15.5px;
  line-height: 1.12;
  font-weight: 750;
}

.profile-action em {
  display: block;
  margin-top: 3px;
  color: #737984;
  font-size: 12.5px;
  line-height: 1.18;
  font-style: normal;
}

.profile-menu-badge {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: #16181c;
  font-size: 10.5px;
  font-weight: 850;
}

/* Only the "Стран" tile is interactive (opens the 3D globe) - reset the
   button chrome so it stays visually identical to its two static siblings,
   just with tap feedback. */
.profile-stat-link {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 120ms ease, transform 120ms ease;
}

.profile-stat-link:active {
  opacity: 0.6;
  transform: scale(0.97);
}

.globe-wrap {
  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1 / 1;
  margin: 6px auto 4px;
  touch-action: none;
  /* A true circular porthole (50%, not a rounded-rect radius) at every
     zoom level - a rounded-rect still reads as "a box" once you're
     zoomed in past its corners; a circle reads as a lens onto the map no
     matter how far in you go, which is the actual shape a circular map
     widget (a live-location "blue dot" preview, Maps' own circular
     avatars) keeps at any zoom. Without this, pinch-zoom pushing the
     sphere past the box's flat edges read as a jarring hard-cornered
     square. */
  border-radius: 50%;
  overflow: hidden;
}

.globe-wrap canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
}

.globe-wrap canvas:active {
  cursor: grabbing;
}

.globe-tooltip {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  transform: translate(-50%, calc(-100% - 12px));
  padding: 7px 12px 7px 7px;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

.globe-tooltip[hidden] {
  display: none;
}

.globe-tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 10px;
  height: 10px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--text);
}

.globe-tooltip-flag {
  display: inline-flex;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 50%;
}

.globe-summary {
  margin: 6px 0 14px;
  color: var(--muted);
  font-size: 13.5px;
  text-align: center;
}

.globe-summary b {
  color: var(--text);
}

/* Same "card with divided rows" language as .profile-menu - a loose wrap
   of pill chips read fine for 3-4 countries but turned into a messy
   ragged wall of buttons once someone had 10+, and didn't match how every
   other list in the app (My eSIM, Orders, Profile menu) presents a list
   of things. This is that same pattern reused, not a one-off style. */
.globe-chips.card {
  padding: 4px 6px;
  margin-top: 2px;
}

.globe-chips.globe-chips-empty {
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.globe-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 9px 10px 9px 8px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  transition: transform 120ms ease, background-color 120ms ease;
}

.globe-chip:last-child {
  border-bottom: 0;
}

.globe-chip:active {
  transform: scale(0.99);
  background: #f7f7f9;
}

.globe-chip-flag {
  display: inline-flex;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.16);
}

.globe-chip-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 15px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.globe-chip-count {
  flex: 0 0 auto;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent);
  color: #16181c;
  font-size: 12px;
  font-weight: 800;
}

.tabbar {
  position: fixed;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  /* Sits just above whichever system-bar inset is actually being reported
     (env() on iOS/most Android WebViews, --tg-inset-bottom as a Telegram-
     reported fallback) rather than adding both, which double-counts on
     clients that report the same inset through both channels. */
  padding: 8px 6px max(env(safe-area-inset-bottom, 0px), var(--tg-inset-bottom, 0px), 8px);
  background: rgba(255, 255, 255, 0.98);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 18px rgba(15, 23, 42, 0.05);
}

/* Beats plain .hidden on specificity alone regardless of source order -
   toggled by setTabbarVisible() in app.js while the support chat is open. */
.tabbar.hidden {
  display: none;
}

.tab {
  min-width: 0;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #9199a6;
  font-size: 11px;
  font-weight: 650;
  line-height: 1;
  transition: color 220ms ease;
}

.tab:active .tab-icon {
  transform: scale(0.88);
}

/* Sized to its own content (not the full tap-target width/height of .tab)
   so the pill reads as a snug capsule behind icon+label, YouTube/Airbnb-
   style, rather than tinting the whole quarter-width tab cell. */
.tab-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 9px 24px;
  border-radius: 999px;
  transition: background-color 220ms ease;
}

.tab.active .tab-pill {
  background: #fff3cf;
}

.tab-icon-wrap {
  position: relative;
  width: 26px;
  height: 26px;
}

/* Both icons sit stacked (absolute) on top of the same 26x26 box and
   crossfade opacity instead of one snapping via display:none/flex - a
   plain display swap can't be transitioned at all, which was the "hard"
   instant jump on every tab switch. */
.tab-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: opacity 220ms ease, transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tab-icon svg {
  width: 26px;
  height: 26px;
}

.tab-icon-filled {
  opacity: 0;
}

.tab.active .tab-icon-outline {
  opacity: 0;
}

.tab.active .tab-icon-filled {
  opacity: 1;
  color: var(--accent-strong);
}

.tab.active {
  color: #111827;
  font-weight: 600;
}

@media (max-width: 560px) {
  .topbar {
    padding-inline: 16px;
  }

  .app {
    padding-inline: 16px;
  }

  .support-input-bar {
    padding-left: 16px;
    padding-right: 16px;
  }

  .support-topbar {
    padding-left: 16px;
    padding-right: 16px;
  }

  .brand-title {
    font-size: 25px;
  }

  .brand-sub {
    font-size: 13px;
  }

  .settings-btn {
    width: 50px;
    height: 50px;
    border-radius: 18px;
    font-size: 24px;
  }

  .search-row {
    min-height: 52px;
    margin-bottom: 20px;
    border-radius: 21px;
    font-size: 16px;
  }

  .home-search-row {
    margin: 4px 0 16px;
  }

  .search-row input {
    font-size: 16px;
  }

  h2,
  .section-title {
    font-size: 18px;
  }

  .country-strip {
    grid-auto-columns: 92px;
    gap: 11px;
    margin-inline: -16px;
    padding-inline: 16px;
  }

  .country-tile {
    height: 114px;
    min-height: 114px;
    padding: 13px 6px 10px;
    border-radius: 14px;
  }

  .country-flag {
    width: 43px;
    height: 43px;
    margin-bottom: 9px;
    font-size: 29px;
  }

  .country-name {
    font-size: 13px;
  }

  .country-price {
    margin-top: 6px;
    font-size: 11px;
  }

  .esim-summary {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 10px;
    min-height: 116px;
    padding: 10px 30px 10px 10px;
  }

  .esim-photo {
    width: 96px;
    height: 80px;
  }

  .flag-img.esim-photo-fallback-flag {
    width: 48px;
    height: 48px;
  }

  .esim-title-row {
    /* .esim-status-tag shrinks a lot at this width (see below) - the 84px
       clearance reserved for its desktop size was eating into the already-
       narrow text column and truncating labels like "Великобритания 3 GB /
       30 дней" mid-word. */
    padding-right: 58px;
  }

  .esim-title-row strong {
    font-size: 17px;
  }

  .esim-status-tag {
    top: 12px;
    right: 12px;
    font-size: 10px;
  }

  .usage-row {
    gap: 7px;
    margin-top: 12px;
  }

  .usage-track {
    height: 8px;
  }

  .usage-row b,
  .esim-plan,
  .esim-left {
    font-size: 12px;
  }

  .steps-scroll {
    margin-inline: -16px;
    padding-inline: 16px;
  }

  .tabbar {
    padding-inline: 6px;
  }

  .tab {
    font-size: 10.5px;
  }

  .tab-pill {
    padding: 8px 14px;
  }
}

/* Desktop / wide viewport (Telegram Desktop window, or the mini app opened
   directly in a laptop browser). Nothing below this width ever appears on a
   real phone, so the mobile layout above is untouched - we just stop it
   from stretching edge-to-edge across a monitor by pinning the whole app
   (header, scrollable body, tab bar, bottom sheets) to one centered column
   the same width it was actually designed at. .country-sheet-panel and
   .tabbar are position:fixed/absolute against the viewport, so centering
   them takes an explicit left:50% + translateX(-50%), not margin auto. */
@media (min-width: 640px) {
  html,
  body {
    background: #e4e6eb;
  }

  body {
    display: flex;
    justify-content: center;
  }

  .scroll-root {
    width: 100%;
    max-width: var(--app-max-width);
    border-left: 1px solid rgba(15, 23, 42, 0.06);
    border-right: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 0 60px rgba(15, 23, 42, 0.12);
  }

  .tabbar {
    left: 50%;
    right: auto;
    width: 100%;
    max-width: var(--app-max-width);
    transform: translateX(-50%);
    border-left: 1px solid rgba(15, 23, 42, 0.06);
    border-right: 1px solid rgba(15, 23, 42, 0.06);
  }

  .support-input-bar,
  .support-topbar {
    left: 50%;
    right: auto;
    width: 100%;
    max-width: var(--app-max-width);
    transform: translateX(-50%);
  }

  .country-sheet-panel {
    left: 50%;
    right: auto;
    width: 100%;
    max-width: var(--app-max-width);
    transform: translateX(-50%) translateY(100%);
  }

  .country-sheet.open .country-sheet-panel {
    transform: translateX(-50%) translateY(0);
  }
}

/* Mouse/trackpad affordance - the whole app otherwise only styles :active
   (touch) states, so a desktop pointer got zero hover feedback on any
   tappable element. Scoped to hover-capable pointers only, so touchscreens
   (including touch laptops) keep the existing tap-only behavior. */
@media (hover: hover) and (pointer: fine) {
  .country-tile:hover,
  .esim-summary:hover,
  .list-card:hover,
  .dest-card:hover,
  .search-country-card:hover,
  .profile-action:hover,
  .settings-row-action:hover,
  .esim-home-link:hover {
    opacity: 0.82;
  }

  .btn:hover,
  .settings-btn:hover,
  .filter-btn:hover,
  .sheet-close:hover,
  .sheet-back:hover,
  .icon-btn:hover,
  .fav-btn:hover,
  .filter-option:hover,
  .copy-btn:hover,
  .threshold-pill:hover {
    filter: brightness(0.96);
  }

  .tab:not(.active):hover {
    color: #6b7280;
  }

  .brand:hover {
    opacity: 0.82;
  }
}

/* ==========================================================================
   Dark theme overrides
   ==========================================================================
   Everything above this point is untouched light-theme CSS - nothing here
   modifies an existing rule, it only adds [data-theme="dark"] rules that
   win on specificity when the attribute is set on <html> (see app.js, the
   settings-btn click handler). Grouped by what literal color each cluster
   shares, not by component, since most of the repetition here is the same
   handful of "pale tint on white" and "white chip" patterns reused across
   many otherwise-unrelated components. Anything that already read its
   color from var(--text)/var(--muted)/var(--card)/var(--bg)/var(--line)
   needed nothing added here - the :root[data-theme="dark"] token block
   above already recolors it. */

/* Muted gray text written as a literal hex instead of var(--muted) -
   different shades in the light theme (design drift, not intentional
   variation), unified to one dark-legible gray here. */
[data-theme="dark"] .brand-sub,
[data-theme="dark"] .search-row,
[data-theme="dark"] .search-icon,
[data-theme="dark"] .search-country-copy em,
[data-theme="dark"] .chevron,
[data-theme="dark"] .tariff-pill,
[data-theme="dark"] .esim-plan,
[data-theme="dark"] .usage-row b,
[data-theme="dark"] .esim-left,
[data-theme="dark"] .esim-status-tag,
[data-theme="dark"] .country-price,
[data-theme="dark"] .profile-action em,
[data-theme="dark"] .tab {
  color: #9a9da3;
}

[data-theme="dark"] .tab.active {
  color: var(--text);
}

[data-theme="dark"] .esim-status-tag.ok {
  color: #34d399;
}

[data-theme="dark"] .esim-status-tag.failed,
[data-theme="dark"] .pill.failed,
[data-theme="dark"] .phone-result-none .phone-result-pill {
  color: #ff6b6b;
}

/* White "surface" chips/buttons (search results, sheet controls, icon
   buttons, tiles...) - same idea as .card (which already uses var(--card)
   and needs nothing here), just written as literal #fff. */
[data-theme="dark"] .search-row,
[data-theme="dark"] .search-country-card,
[data-theme="dark"] .search-country-flag,
[data-theme="dark"] .country-sheet-panel,
[data-theme="dark"] .sheet-close,
[data-theme="dark"] .filter-btn,
[data-theme="dark"] .fav-btn,
[data-theme="dark"] .country-tile,
[data-theme="dark"] .country-flag,
[data-theme="dark"] .esim-summary,
[data-theme="dark"] .esim-home-row,
[data-theme="dark"] .icon-btn,
[data-theme="dark"] .detail-topbar-refresh,
[data-theme="dark"] .copy-btn {
  background: var(--card);
}

/* Light-gray icon chips (menu rows, stat tiles) sit on top of a white/dark
   .card surface, so they need their own step lighter than --card in dark
   mode instead of inheriting it - otherwise they'd be visually invisible
   against the card behind them. */
[data-theme="dark"] .profile-action-icon,
[data-theme="dark"] .profile-stat-icon {
  background: #2c2d32;
}

/* .tariff-card.popular's cream #fffcf2 fill is a literal hex, not
   var(--card) like every other card - it never adapted for dark mode, so
   the "Популярный" tariff kept its light beige background right in the
   middle of an otherwise dark screen. Same lighter-than-card gray as the
   icon chips above, with the gold inset border doing the "featured" work
   instead of a light fill. */
[data-theme="dark"] .tariff-card.popular {
  background: #2c2d32;
}

/* Same chips' :active/pressed states - one step lighter than the resting
   surface so a tap still gives visible feedback on a dark background. */
[data-theme="dark"] .search-country-card:active,
[data-theme="dark"] .country-tile:active,
[data-theme="dark"] .esim-summary:active,
[data-theme="dark"] .icon-btn:active,
[data-theme="dark"] .detail-topbar-refresh:active,
[data-theme="dark"] .fav-btn:active,
[data-theme="dark"] .list-card:active,
[data-theme="dark"] .profile-action:active,
[data-theme="dark"] .globe-chip:active {
  background: #2c2d32;
}

/* The pale-gold "selected/active" tint - #fff3cf reused across tabs,
   filters, thresholds, badges - becomes a translucent amber wash instead
   of a solid pale fill, plus a brighter gold text so it stays legible. */
[data-theme="dark"] .filter-btn.active,
[data-theme="dark"] .filter-option.active,
[data-theme="dark"] .threshold-pill.active,
[data-theme="dark"] .tab.active .tab-pill,
[data-theme="dark"] .info-banner,
[data-theme="dark"] .profile-premium-badge,
[data-theme="dark"] .phone-result-partial .phone-result-pill,
[data-theme="dark"] .pill {
  background: rgba(255, 196, 0, 0.16);
}

[data-theme="dark"] .filter-btn.active,
[data-theme="dark"] .filter-option.active,
[data-theme="dark"] .threshold-pill.active,
[data-theme="dark"] .info-banner,
[data-theme="dark"] .profile-premium-badge,
[data-theme="dark"] .phone-result-partial .phone-result-pill,
[data-theme="dark"] .pill,
[data-theme="dark"] .filter-option .check {
  color: #ffd257;
}

/* Green "ok" status pill - same translucent-tint treatment as the gold
   one above, using the dark-mode --green token for the text. Needs its own
   color rule (not just background): .pill.ok and the generic dark-mode
   .pill selector just above are tied in specificity, and .pill.ok's own
   light-theme `color: var(--green)` loses that tie by source order - the
   pill was rendering with the generic gold text (#ffd257) on a green
   background, an olive/swamp mix instead of the intended green. */
[data-theme="dark"] .pill.ok,
[data-theme="dark"] .phone-result-full .phone-result-pill {
  background: rgba(39, 206, 122, 0.16);
}

[data-theme="dark"] .pill.ok {
  color: var(--green);
}

/* Red "failed" status pill, same pattern. */
[data-theme="dark"] .phone-result-none .phone-result-pill {
  background: rgba(255, 107, 107, 0.16);
}

/* Light gray inset rows/dividers/handles (#f5f6f8, #eef0f3, #e2e4ea and
   friends) - a subtle white-on-dark wash instead, since a literal gray
   would either vanish into the dark card behind it or fight the app's
   near-black page background. */
[data-theme="dark"] .sheet-search-row,
[data-theme="dark"] .sheet-back,
[data-theme="dark"] .filter-option,
[data-theme="dark"] .feature-icon,
[data-theme="dark"] .tariff-pill,
[data-theme="dark"] .switch,
[data-theme="dark"] .dest-card-photo,
[data-theme="dark"] .esim-home-chip {
  background: rgba(255, 255, 255, 0.07);
}

/* .switch.on and the dark-mode .switch rule just above are tied in CSS
   specificity (two classes vs one attribute + one class) - source order
   let the translucent-white "off" wash win over the yellow "on" fill,
   same bug as the .pill.ok/dark-mode-.pill collision fixed earlier. Needs
   its own, more specific rule to actually show yellow when on. */
[data-theme="dark"] .switch.on {
  background: var(--accent-strong);
}

[data-theme="dark"] .sheet-back:active,
[data-theme="dark"] .filter-option:active {
  background: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .country-sheet-handle {
  background: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .esim-home-chip {
  color: #c7cad1;
}

[data-theme="dark"] .flag-img {
  border-color: rgba(255, 255, 255, 0.14);
}

[data-theme="dark"] .title-flag {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .usage-track,
[data-theme="dark"] .progress-track {
  background: rgba(255, 255, 255, 0.14);
}

/* Step-number ring (Home, "Как подключиться") - same amber-ring idea as
   the light theme, tuned for a dark card behind it. */
[data-theme="dark"] .step-num {
  background: rgba(255, 196, 0, 0.12);
  color: #ffd257;
}

/* Traffic card on the eSIM detail screen - deliberately a shade lighter
   than --card so it still reads as its own surface, same reasoning as the
   light theme's "not pure white like the cards below it" choice. Text
   already flips to light via var(--text) - only the background needs
   setting. */
[data-theme="dark"] .detail-hero {
  background: #2a2b30;
}

/* QR codes need a light background with dark modules to stay scannable -
   deliberately NOT touched here, .qr-wrap stays white in both themes. */

[data-theme="dark"] .tabbar {
  background: rgba(20, 21, 24, 0.96);
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .tab:not(.active):hover {
  color: #c2c5cb;
}

/* Top-right theme toggle itself - same pill shape as the light theme but
   on a dark surface, since it sits directly on the (now dark) page
   background rather than on a card. */
[data-theme="dark"] .settings-btn {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .settings-btn:active {
  background: rgba(255, 255, 255, 0.16);
}

@media (min-width: 640px) {
  [data-theme="dark"] html,
  [data-theme="dark"] body {
    background: #000;
  }

  [data-theme="dark"] .scroll-root,
  [data-theme="dark"] .tabbar {
    border-left-color: rgba(255, 255, 255, 0.08);
    border-right-color: rgba(255, 255, 255, 0.08);
  }

  [data-theme="dark"] .scroll-root {
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.6);
  }
}