/* ===== promo-children.css — Kids Modal (v1.1.0) ===== */

.promo-children-modal{
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: none;
  align-items: center;
  justify-content: center;
  height: 100svh;                  /* стабильная высота на iOS */
  overflow: hidden;                /* скролл только внутри */
  background: transparent;
}
.promo-children-modal.is-open{ display:flex !important; }

.promo-children-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}

/* Диалог: flex-колонка (header + scroll) */
.promo-children-dialog{
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 92%;
  max-width: 1100px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
  outline: none;
  padding: 0;
  z-index: 1060;
  max-height: min(90vh, calc(100svh - 24px));
}

/* Хедер */
.promo-children-header{
  flex: none;
  background: #fff;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}
.promo-children-header .btn-close{ width:32px; height:32px; }

/* Прокручиваемая область */
.promo-children-scroll{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

/* Отступы */
.promo-children-scroll .container{ padding-left:.75rem; padding-right:.75rem; }
.promo-children-dialog .card.rounded-4{ border-radius:1rem !important; }

/* Чипы */
.chip{
  display:flex; align-items:center; justify-content:center;
  gap:.5rem; padding:.45rem .8rem;
  height:44px; line-height:1.2;
  border-radius:14px; font-weight:700; font-size:.9rem;
  width:100%;
}
.chip-red{ background:#e43d46; color:#fff; animation:pulse-red 1.8s infinite; }
.chip-green{ background:#28a745; color:#fff; }
.chip-blue{
  background:#3d8bfd; color:#fff;
  margin-bottom:12px;
  display:flex; align-items:center; justify-content:center;
  text-align:center; height:auto;
  padding:.65rem 1rem;
  border-radius:16px;
}
.chip-blue .chip-center{ display:block; width:100%; line-height:1.25; font-weight:800; }

@keyframes pulse-red{
  0%,100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.05); opacity:.9; }
}

/* Тексты/списки */
.hero-title{ line-height:1.25; }
.price-pill{
  background:#ff5a62; color:#fff;
  padding:.35rem .8rem;
  border-radius:999px;
  font-weight:800;
}
.countdown .countdown-number{ font-weight:800; color:#1d3b6c; }
.hero-list{ list-style:none; padding-left:0; }
.hero-list li{ margin-bottom:.35rem; font-size:.96rem; }
.brand-black{ font-weight:700; color:#000; }
.brand-red{
  font-weight:700;
  background:linear-gradient(to right,#d52c37,#f0262c);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* Видео */
#teacher-video-children-promo .lazy-video-wrapper{
  aspect-ratio:16/9 !important;
  height:auto !important;
}
#teacher-video-children-promo .lazy-video-wrapper>img,
#teacher-video-children-promo .lazy-video-wrapper>video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.play-overlay{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:72px; height:72px;
  background:rgba(0,0,0,.6);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}

/* CTA — одинаковые увеличенные */
#teacher-video-children-promo .cta-row{
  gap:.5rem;
  margin-top:.75rem;
  flex-wrap:nowrap;
}
.btn-primary-cta,
.btn-outline-cta{
  height:46px;
  min-width:0;
  padding:.55rem 1.2rem;
  font-size:1rem;
  font-weight:700;
  border-radius:999px;
  flex:1 1 0;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
}
.btn-primary-cta{ background:#dc3545; border:none; color:#fff; }
.btn-outline-cta{ background:#fff; border:2px solid #6c757d; color:#5b6770; }
.btn-outline-cta:hover{ background:#f8f9fa; }

/* Выравнивание колонок */
.hero-block .col-12.col-md-6{
  padding-top:12px !important;
  padding-bottom:16px !important;
}
@media (min-width:768px){
  .hero-block{ align-items:stretch; }
  .hero-block>[class*="col-"]{ display:flex; flex-direction:column; }
  #teacher-video-children-promo{ display:flex; flex-direction:column; justify-content:flex-start; }
}

/* Мобилки */
@media (max-width:767.98px){
  .promo-children-modal{ align-items:flex-start; padding:8px 0; }
  .promo-children-dialog{ max-height: calc(100svh - 16px); margin:8px auto; }
  #promoChildrenTitle{ font-size:.95rem; line-height:1.25; }
  .promo-children-dialog .p-5{ padding:1.25rem !important; }
  .promo-children-dialog .p-4{ padding:1rem !important; }
}

/* Очень узкие */
@media (max-width:380px){
  #promoChildrenTitle{ font-size:.9rem; line-height:1.2; }
  .btn-primary-cta, .btn-outline-cta{
    height:42px;
    font-size:.95rem;
    padding:.5rem 1rem;
  }
}

/* Десктоп */
@media (min-width:992px){
  .promo-children-dialog{ margin:3.5vh auto; }
}

/* ===============================
   📱 820–1024px (планшеты/Asus Fold/iPad)
================================= */
@media (min-width: 820px) and (max-width: 1024.98px) {

  /* Карточка и внутренние отступы */
  .promo-children-dialog { max-width: 900px; }
  .promo-children-dialog .p-5 { padding: 1.2rem !important; }
  .promo-children-dialog .p-4 { padding: 1rem !important; }

  /* Заголовки / плашки */
  #promoChildrenTitle { font-size: 1.05rem; line-height: 1.25; }
  .hero-title { font-size: 1.22rem !important; line-height: 1.28; }
  .price-pill { font-size: .92rem; padding: .32rem .7rem; }

  /* ⏳ Счётчик — строго в одну строку */
  .countdown {
    white-space: nowrap;
    font-size: .92rem;
    line-height: 1.2;
  }
  .countdown .countdown-number { font-size: .96rem; }

  /* Чипы */
  .chip { height: 40px; font-size: .86rem; border-radius: 12px; }
  .chip-blue { padding: .55rem .9rem; border-radius: 14px; }

  /* Списки фич */
  .hero-list li { font-size: .95rem; margin-bottom: .32rem; }

  /* Сетка */
  .hero-block { align-items: stretch !important; }
  .hero-block > [class*="col-"]{ display:flex; flex-direction:column; }

  /* Видео */
  #teacher-video-children-promo .lazy-video-wrapper {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 12px !important;
  }

  /* Подпись под видео */
  #teacher-video-children-promo .teacher-caption {
    font-size: .95rem;
    line-height: 1.3;
    margin-top: .6rem;
    margin-bottom: .6rem;
  }

  /* CTA */
  #teacher-video-children-promo .cta-row {
    gap: .6rem;
    margin-top: .6rem;
    flex-wrap: nowrap;
  }

  .btn-primary-cta,
  .btn-outline-cta {
    height: 40px;
    font-size: .9rem;
    padding: .4rem .9rem;
    min-width: 140px;
    border-radius: 999px;
    flex: 1 1 0;
  }

  /* Тени */
  .btn-primary-cta,
  .btn-outline-cta { box-shadow: 0 1px 4px rgba(0,0,0,.06); }
}

/* 🔁 Узкий планшет/складной (если всё ещё не влезает) */
@media (min-width: 820px) and (max-width: 900px) {
  .countdown { font-size: .88rem; }
  .countdown .countdown-number { font-size: .92rem; }
  .btn-primary-cta, .btn-outline-cta {
    height: 38px;
    font-size: .88rem;
    padding: .35rem .8rem;
    min-width: 128px;
  }
}

/* ===============================
   📱 744–819px — iPad mini / малые планшеты
================================= */
@media (min-width: 744px) and (max-width: 819.98px) {

  /* Карточка компактнее */
  .promo-children-dialog { max-width: 860px; }
  .promo-children-dialog .p-5 { padding: 1.1rem !important; }
  .promo-children-dialog .p-4 { padding: .9rem !important; }

  /* Заголовки / плашки */
  #promoChildrenTitle { font-size: 1rem; line-height: 1.25; }
  .hero-title { font-size: 1.18rem !important; line-height: 1.28; }
  .price-pill { font-size: .9rem; padding: .3rem .65rem; }

  /* ⏳ Счётчик — строго в одну строку */
  .countdown { white-space: nowrap; font-size: .9rem; line-height: 1.2; }
  .countdown .countdown-number { font-size: .94rem; }

  /* Списки фич — чуть плотнее */
  .hero-list li { font-size: .93rem; margin-bottom: .3rem; }

  /* Видео: немного уже, округление */
  #teacher-video-children-promo .lazy-video-wrapper,
  #teacher-video-children-es .lazy-video-wrapper {
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 12px !important;
  }

  /* Подпись под видео */
  #teacher-video-children-promo .teacher-caption,
  #teacher-video-children-es .teacher-caption {
    font-size: .92rem;
    line-height: 1.28;
    margin-top: .5rem;
    margin-bottom: .55rem;
  }

  /* CTA — компактные, чтобы красиво влезли */
  #teacher-video-children-promo .cta-row,
  #teacher-video-children-es .cta-row {
    gap: .55rem;
    margin-top: .55rem;
    flex-wrap: nowrap;
  }
  .btn-primary-cta,
  .btn-outline-cta {
    height: 38px;
    font-size: .9rem;
    padding: .35rem .85rem;
    min-width: 128px;
    border-radius: 999px;
    flex: 1 1 0;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
  }
}

/* ===============================
   📱 360–399px — узкие телефоны (Galaxy S8+ и др.)
   держим счётчик в одну строку + компактные CTA
================================= */
@media (max-width: 399.98px) {
  /* ⏳ счётчик — не переносить */
  .countdown{
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-wrap: nowrap;
    white-space: nowrap;
    word-break: keep-all;
    font-size: .88rem;           /* чуть меньше общий размер */
    line-height: 1.2;
  }
  .countdown .text-muted{ font-size: .88rem; }
  .countdown .countdown-number{ font-size: .90rem; font-weight: 800; }

  /* CTA — компактнее, чтобы красиво влезли */
  .btn-primary-cta,
  .btn-outline-cta{
    height: 40px;
    font-size: .9rem;
    padding: .4rem .85rem;
    min-width: 128px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
  }
}

/* ещё чуть ужимаем на совсем узких (≤360px) */
@media (max-width: 360px) {
  .countdown{ font-size: .86rem; }
  .countdown .countdown-number{ font-size: .88rem; }
}