/* ===== promo-children-es.css — Spanish Kids Modal (v1.1.1) ===== */

.promo-children-es-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-es-modal.is-open{ display:flex !important; }

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

/* Диалог как flex-колонка: header (фикс) + scroll (гибкий) */
.promo-children-es-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-es-header{
  flex: none;
  background: #fff;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}
.promo-children-es-header .btn-close{ width:32px; height:32px; }

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

/* Внутренние отступы и скругления */
.promo-children-es-scroll .container{ padding-left:.75rem; padding-right:.75rem; }
.promo-children-es-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;
}

/* Видео (совместимые селекторы для двух id) */
#teacher-video-children-es .lazy-video-wrapper,
#teacher-video-children-promo .lazy-video-wrapper{
  aspect-ratio:16/9 !important;
  height:auto !important;
}
#teacher-video-children-es .lazy-video-wrapper>img,
#teacher-video-children-es .lazy-video-wrapper>video,
#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 — одинаковые увеличенные (46px) */
#teacher-video-children-es .cta-row,
#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-es,
  #teacher-video-children-promo{
    display:flex; flex-direction:column; justify-content:flex-start;
  }
}

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

/* Очень узкие (≤380px) */
@media (max-width:380px){
  #promoChildrenEsTitle{ 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-es-dialog{ margin:3.5vh auto; }
}

/* ===============================
   📱 744–819px — iPad mini / малые планшеты
================================= */
@media (min-width: 744px) and (max-width: 819.98px) {
  .promo-children-es-dialog { max-width: 860px; }
  .promo-children-es-dialog .p-5 { padding: 1.1rem !important; }
  .promo-children-es-dialog .p-4 { padding: .9rem !important; }

  #promoChildrenEsTitle { 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-es .lazy-video-wrapper,
  #teacher-video-children-promo .lazy-video-wrapper{
    max-width: 380px;
    margin-left: auto; margin-right: auto;
    border-radius: 12px !important;
  }

  #teacher-video-children-es .teacher-caption,
  #teacher-video-children-promo .teacher-caption{
    font-size: .92rem; line-height: 1.28;
    margin-top: .5rem; margin-bottom: .55rem;
  }

  #teacher-video-children-es .cta-row,
  #teacher-video-children-promo .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);
  }
}

/* ===============================
   📱 820–1024px — планшеты / Asus Fold / iPad
================================= */
@media (min-width: 820px) and (max-width: 1024.98px) {
  .promo-children-es-dialog { max-width: 900px; }
  .promo-children-es-dialog .p-5 { padding: 1.2rem !important; }
  .promo-children-es-dialog .p-4 { padding: 1rem !important; }

  #promoChildrenEsTitle { 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; }

  #teacher-video-children-es .lazy-video-wrapper,
  #teacher-video-children-promo .lazy-video-wrapper{
    max-width: 420px;
    margin-left: auto; margin-right: auto;
    border-radius: 12px !important;
  }

  #teacher-video-children-es .teacher-caption,
  #teacher-video-children-promo .teacher-caption{
    font-size: .95rem; line-height: 1.3;
    margin-top: .6rem; margin-bottom: .6rem;
  }

  #teacher-video-children-es .cta-row,
  #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; box-shadow: 0 1px 4px rgba(0,0,0,.06);
  }
}

/* 🔁 Доп. ужимание для 820–900, если строка всё ещё рвётся */
@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;
  }
}

/* ===============================
   📱 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; }

  .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);
  }
}
@media (max-width: 360px) {
  .countdown{ font-size: .86rem; }
  .countdown .countdown-number{ font-size: .88rem; }
}

/* iOS safe areas */
@supports (padding: max(0px)) {
  .promo-children-es-dialog{
    margin: max(8px, env(safe-area-inset-top)) auto max(8px, env(safe-area-inset-bottom));
  }
}


/* === Header fixes: видимый крестик + компактный заголовок (v1.0.1) === */
.promo-children-es-header{
  position: sticky; top: 0; z-index: 2;
  background:#fff;
}

.promo-children-es-header h2{
  flex: 1 1 auto;
  margin: 0 1rem 0 0;      /* место под крестик справа */
  font-size: 1.18rem;      /* компактнее */
  line-height: 1.2;
  font-weight: 800;
  overflow-wrap: anywhere; /* чтобы длинный текст не съедал крестик */
}

.promo-children-es-header .btn-close{
  flex: 0 0 auto;
  width: 32px; height: 32px;
  margin-left: .25rem;
}

/* мобилки — ещё меньше заголовок */
@media (max-width: 576px){
  .promo-children-es-header h2{ font-size: 1rem; line-height: 1.22; }
}

/* выравнивание CTA по высоте */
.promo-children-es-dialog .cta-row .btn{
  min-height: 46px;
  padding: 12px 20px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
/* === CTA: красиво и аккуратно === */
.promo-children-es-dialog .cta-row{
  gap: 14px;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
}

/* обе кнопки — одинаковая высота и “пилюля” */
.promo-children-es-dialog .cta-row .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  padding: 0 26px;
  border-radius: 9999px;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .2px;
  line-height: 1;
  transition: transform .08s ease, box-shadow .2s ease,
              background-color .2s ease, color .2s ease, border-color .2s ease;
  /* делаем их равными по ширине на десктопе, не смотря на w-100 */
  flex: 1 1 0;
  width: auto !important;
  min-width: 240px;
  max-width: 420px;
}

/* PRIMARY — аккуратный градиент + тень */
.promo-children-es-dialog .cta-row .to-shop{
  background: linear-gradient(180deg, #e83c46 0%, #d62a35 100%);
  color: #fff;
  border: none;
  box-shadow: 0 10px 24px rgba(220,53,69,.22);
}
.promo-children-es-dialog .cta-row .to-shop:hover{
  filter: brightness(1.04);
  box-shadow: 0 12px 28px rgba(220,53,69,.28);
}
.promo-children-es-dialog .cta-row .to-shop:active{
  transform: translateY(1px) scale(.99);
}
.promo-children-es-dialog .cta-row .to-shop:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(220,53,69,.15), 0 12px 28px rgba(220,53,69,.28);
}

/* OUTLINE — светлая, с аккуратной обводкой и заливкой при hover */
.promo-children-es-dialog .cta-row .btn-more{
  background: #fff;
  color: #5b6770;
  border: 2px solid #8b95a1;
  box-shadow: 0 6px 18px rgba(0,0,0,.06) inset, 0 6px 18px rgba(0,0,0,.04);
}
.promo-children-es-dialog .cta-row .btn-more:hover{
  background: #f8f9fa;
  border-color: #768190;
  color: #475160;
}
.promo-children-es-dialog .cta-row .btn-more:active{
  transform: translateY(1px) scale(.99);
}
.promo-children-es-dialog .cta-row .btn-more:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(124,135,150,.18);
}

/* мобилки: каждая на всю ширину */
@media (max-width: 576px){
  .promo-children-es-dialog .cta-row .btn{
    flex: 1 1 100%;
    width: 100% !important;
    min-width: 0;
    max-width: none;
    height: 50px;
    font-size: 1rem;
  }
}