/* ============================================================
   Линейка карт: витрина-лента, описание под картой, физическая карта
   Геометрия - наша: inset grouped lists, радиусы 26/20/16, отступы 16.
   Материалы карт (screen поверх card-face.png) живут в components.css.
   ============================================================ */

/* ---------- hero с лентой карт ---------- */

/* Hero уходит под панель навигации: на вкладке заголовка в ней нет, на
   пушнутом экране он белый, пока hero в кадре (см. .on-hero). Низ скруглён
   радиусом 34 (large), как у листов iOS 26. */
.tier-hero {
  position: relative;
  margin-top: calc(-44px - var(--top-inset));
  padding: calc(44px + var(--top-inset) + 4px) 0 18px;
  text-align: center;
  color: #fff;
  overflow: hidden;
  border-radius: 0 0 var(--radius-large) var(--radius-large);
  /* пока фон не выбран, цвет базовой карты, чтобы не мигнуть чёрным */
  background: #2d2399;
}

.tab-view .tier-hero {
  margin-top: calc(-30px - var(--top-inset));
  padding-top: calc(30px + var(--top-inset) + 10px);
}

/* четыре фона друг над другом: активный проявляется, остальные гаснут */
.tier-hero .tier-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.tier-hero .tier-hero-bg.active {
  opacity: 1;
}

.tier-hero .tier-hero-bg.tier-subs {
  background: linear-gradient(175deg, #5449e0 0%, #2d2399 60%, #1b1568 100%);
}

.tier-hero .tier-hero-bg.tier-travel {
  background: linear-gradient(175deg, #1a90f5 0%, #0b5cbe 60%, #08418f 100%);
}

.tier-hero .tier-hero-bg.tier-premium {
  background: linear-gradient(175deg, #35353b 0%, #17171a 55%, #050506 100%);
}

.tier-hero .tier-hero-bg.tier-physical {
  background: linear-gradient(175deg, #5b5d64 0%, #2e2f35 55%, #18191d 100%);
}

/* мягкое световое пятно за картой, как у Apple Card */
.tier-hero .tier-hero-bg::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 34%;
  width: 320px;
  height: 320px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0));
}

/* лента: страницы по ширине hero, снап по центру */
.tier-pager {
  position: relative;
  z-index: 1;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  will-change: transform, opacity;
}

.tier-pager::-webkit-scrollbar {
  display: none;
}

.tier-page {
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  padding: 0 var(--inset-x);
  box-sizing: border-box;
}

.tier-page .tier-hero-card {
  width: 250px;
  margin: 0 auto;
  filter: drop-shadow(0 22px 30px rgba(0, 0, 0, 0.45));
}

.tier-page .card3d {
  animation: tier-card-float 5s ease-in-out infinite;
}

@keyframes tier-card-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

.tier-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 4px;
}

.tier-pill {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.1px;
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.22);
}

.tier-hero-title {
  margin: 14px 0 0;
  font-size: 28px;
  line-height: 34px;
  font-weight: 700;
  letter-spacing: -0.4px;
}

.tier-hero-sub {
  margin: 6px auto 0;
  max-width: 300px;
  font-size: 17px;
  line-height: 22px;
  color: rgba(255, 255, 255, 0.78);
}

/* статус заявки на физическую карту */
.tier-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  height: 28px;
  padding: 0 12px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 600;
  background: rgba(52, 199, 89, 0.22);
  box-shadow: inset 0 0 0 0.5px rgba(52, 199, 89, 0.5);
}

.tier-status svg {
  width: 14px;
  height: 14px;
  color: #34c759;
}

/* точки ленты, белые на цветном */
.tier-dots {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
}

.tier-dots i {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.35);
  transition: width 0.25s ease-out, background 0.2s ease;
}

.tier-dots i.active {
  width: 20px;
  background: #fff;
}

/* пока hero в кадре, заголовок панели белый, а плашка scroll-edge
   выключена: иначе в светлой теме поверх цветного hero ложится светлая полоса */
.screen.on-hero .nav-bar .nav-title {
  color: #fff;
}

.screen.collapsed.on-hero .nav-bar::before {
  opacity: 0;
}

/* ---------- описание под лентой ---------- */

.catalog-body {
  padding-top: 16px;
}

.catalog-cta-wrap {
  margin-bottom: 20px;
}

/* на пушнутом экране кнопка нативная, встроенная не нужна */
.screen .catalog-cta-wrap {
  display: none;
}

.catalog-cta[disabled] {
  opacity: 0.5;
}

.tier-footer {
  padding-top: 10px;
}

/* ---------- «подходит для»: сетка 2×3 ---------- */

.use-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.use-tile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 118px;
  padding: 14px 14px 13px;
  border-radius: 20px;
  background: var(--bg-section);
}

.use-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: #fff;
  background-color: var(--icon-color, var(--tint));
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0));
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.35);
}

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

.use-title {
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  color: var(--label);
}

.use-sub {
  margin-top: -6px;
  font-size: 13px;
  line-height: 17px;
  color: var(--label-2);
}

/* ---------- аккордеон: вопросы ---------- */

.acc + .acc {
  box-shadow: inset 0 var(--separator-h) 0 var(--separator-line);
}

.acc-head {
  width: 100%;
}

.acc-head .acc-chevron {
  display: flex;
  align-items: center;
  color: var(--gray3);
  transition: transform 0.28s var(--ease-out-ios);
}

.acc-head .acc-chevron svg {
  width: 9.9px;
  height: 14px;
}

.acc.open .acc-head .acc-chevron {
  transform: rotate(90deg);
}

.acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s var(--ease-out-ios);
}

.acc.open .acc-panel {
  grid-template-rows: 1fr;
}

.acc-body {
  overflow: hidden;
  min-height: 0;
}

.acc-text {
  padding: 0 var(--inset-x) 14px;
  font-size: 15px;
  line-height: 20px;
  color: var(--label-2);
}

.acc-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 2px var(--inset-x) 14px;
  margin: 0;
}

.acc-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  font-size: 15px;
  line-height: 20px;
  color: var(--label);
}

.acc-list li svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--red);
}

.acc-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 var(--inset-x) 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--tint);
}

/* ---------- физическая: ввод ---------- */

.physical-note .input-cell input {
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .tier-page .card3d {
    animation: none;
  }
}