/* EuroSwap: доработки поверх основного стиля сайта */

.es-noscroll, .es-noscroll body { overflow: hidden; }
[hidden] { display: none !important; }

/* ---------- Иконка Telegram на кнопках ---------- */
.btn .es-tg { width: 20px; height: 20px; flex: none; }

/* ---------- Калькулятор в телефоне ---------- */
.phone-screen { padding-top: 54px; }
.es-calc { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.es-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  margin-bottom: 10px;
  border-radius: 14px;
  background: #dfe8fb;
}
.es-tab {
  height: 34px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--ink-soft);
  font: 700 0.8rem var(--font-display);
  cursor: pointer;
}
.es-tab.is-on { background: #fff; color: var(--blue-800); box-shadow: 0 2px 8px rgba(10, 42, 143, .14); }
.es-field { display: block; cursor: text; transition: box-shadow .15s ease; }
.es-field:focus-within { box-shadow: 0 0 0 2px var(--blue-500); }
.es-field .field-row { display: flex; }
.es-input {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
}
.es-slot { display: contents; }
.es-coin { flex: none; }
.es-coin i.is-long { font-size: 0.6rem; letter-spacing: -0.02em; }
.es-pick {
  position: relative;
  padding: 4px 8px 4px 4px;
  margin: -4px 0 -4px -4px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .15s ease;
}
.es-pick:hover { background: #eef3fd; }
.es-pick:focus-within { box-shadow: 0 0 0 2px var(--blue-500); }
.es-pick b { font-weight: 700; }
.es-chev { color: var(--ink-mute); font-size: 0.8rem; }
.es-pick select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 16px;
}
.es-swap { cursor: pointer; padding: 0; font: inherit; transition: transform .3s ease; }
.es-swap:hover { transform: rotate(180deg); }
.phone-rate b.is-plus { color: #109a6b; }
.phone-rate b.is-minus { color: #c2410c; }
.es-rails button {
  flex: 1;
  text-align: center;
  font: 600 0.72rem var(--font-display);
  padding: 8px 4px;
  border-radius: 12px;
  background: #fff;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  cursor: pointer;
}
.es-rails button.on { background: var(--blue-700); color: #fff; border-color: var(--blue-700); }
.es-calc .btn { margin-top: auto; }
.es-calc .phone-rails { margin-bottom: 12px; }
.es-tab:focus-visible, .es-swap:focus-visible, .es-rails button:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; }

/* ---------- Мобильные: заголовок, потом телефон, потом текст ---------- */
@media (max-width: 900px) {
  .hero-grid { gap: 0 !important; }
  .hero-grid > div:first-child { display: contents; }
  .hero h1 { order: 1; }
  .hero .tagline { order: 2; }
  .phone-stage { order: 3; padding: 12px 0 8px; }
  .hero .lead { order: 4; margin-top: 18px; }
  .hero-actions { order: 5; }
  .hero-facts { order: 6; }
  .phone { width: min(340px, 92vw); aspect-ratio: auto; height: auto; }
  .phone-screen { height: auto; }
  .es-calc .btn { margin-top: 0; }
  .home-bar { margin-top: 14px; }
}

/* ---------- Карта ---------- */
.es-map { margin: 6px 0 22px; }
.es-map svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  overflow: visible;
  -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 52%, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 70% at 50% 52%, #000 62%, transparent 100%);
}
.es-map .vx-map-c { fill: #edf2fb; stroke: #fff; stroke-width: .8; stroke-linejoin: round; transition: fill .2s ease; }
.es-map .vx-map-c.is-eu { fill: #c9dcff; }
.es-map .vx-map-c.is-top { fill: #8fb7ff; }
.es-map .vx-map-c.is-eu:hover { fill: #6a9cff; }
.es-map .vx-map-dot { fill: var(--blue-800); stroke: #fff; stroke-width: 1.6; }
.es-map .vx-map-pulse { fill: var(--blue-700); opacity: 0; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .es-map .vx-map-pulse { animation: es-pulse 2.8s ease-out infinite; }
  .es-map .vx-map-pulse:nth-of-type(2) { animation-delay: .7s; }
  .es-map .vx-map-pulse:nth-of-type(3) { animation-delay: 1.4s; }
  .es-map .vx-map-pulse:nth-of-type(4) { animation-delay: 2.1s; }
}
@keyframes es-pulse { 0% { opacity: .35; transform: scale(1); } 100% { opacity: 0; transform: scale(4); } }

/* ---------- Шаги: по очереди при прокрутке ---------- */
.es-anim .step { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease, box-shadow .3s ease; }
.es-anim .step:before { transform: scale(.4); transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.es-anim.es-in .step { opacity: 1; transform: none; }
.es-anim.es-in .step:before { transform: none; }
.es-anim .step:nth-child(2), .es-anim .step:nth-child(2):before { transition-delay: .15s; }
.es-anim .step:nth-child(3), .es-anim .step:nth-child(3):before { transition-delay: .3s; }
.es-anim .step:nth-child(4), .es-anim .step:nth-child(4):before { transition-delay: .45s; }
.step:hover { box-shadow: 0 14px 30px -18px rgba(10, 42, 143, .45); }
.es-tether { width: 28px; height: 28px; flex: none; }
.es-map { margin: 22px -8px 0; }
#countries .split > .card:last-child { display: flex; flex-direction: column; }
#countries .split > .card:last-child .es-map { flex: 1; display: flex; align-items: flex-start; }