/* =============================================================================
   Finkelisim modal  —  storage/app/media/modal/modal.css
   Заменяет собой прежний блок <style> перед <div id="myModal">.

   МАСШТАБ. Всё построено от одной переменной --u:
       1u = 10 px макета  (макет 1006 x 1350 px  =>  100.6u x 135u)
   --u вычисляется так, чтобы модалка ВСЕГДА влезала целиком, без скролла:
       * не шире  (100vw - 24px)
       * не выше  92vh   (+ запас: max-height 96vh со скроллом — страховка на случай,
                          если шрифт темы шире макетного и текст уйдёт на строку ниже)
       * не больше 6.35px  ->  это «полный» размер: 639 x 857 px
   Хотите модалку крупнее/мельче на десктопе — меняйте ТОЛЬКО число 6.35px.

   Иконки (flash.svg, tenge0.svg, shield-tick.svg) подключаются относительными
   путями, поэтому этот файл должен лежать в той же папке, что и они.
   ============================================================================= */

/* ---------- каркас: логику показа не меняем, меняем размер и радиус ---------- */
#myModal.active { opacity: 1; visibility: visible; }
.video_title { display: none; }

.modal_home {
  opacity: 0;
  visibility: hidden;
  transition: .3s cubic-bezier(.47, 0, .745, .715);
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99999;
}

#myModal {
  --u: min(6.35px, calc(92vh / 135), calc((100vw - 24px) / 100.6));
  width: calc(var(--u) * 100.6);
  max-width: none;
  max-height: 96vh;
  overflow-y: auto;
}

#myModal .modal__box { border-radius: calc(var(--u) * 2.4); }

#myModal .modal__body {
  display: block;
  position: relative;
  overflow: hidden;                    /* обрезает 3D-объекты по скруглению */
  border-radius: calc(var(--u) * 2.4);
  background: linear-gradient(105deg, #0B5645 0%, #0E5749 45%, #145B5E 100%);
}
#myModal .modal__body::before {        /* мягкое зелёное свечение сверху слева */
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 80% at 12% 0%, rgba(74, 169, 110, .20), transparent 60%);
}

#myModal .modal__close {
  position: absolute;
  top: calc(var(--u) * 7); right: calc(var(--u) * 7.1);
  width: calc(var(--u) * 2.4); height: calc(var(--u) * 2.4);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 50;
}
#myModal .modal__close svg {
  width: calc(var(--u) * 1.8); height: calc(var(--u) * 1.8);
  display: block;
}
#myModal .modal__close svg path { stroke: #fff; }   /* тема ниже 991px красит его в чёрный */

#myModal .modal__image { padding: 0; }
#myModal .row { margin: 0; }
#myModal .col-lg-12 { padding: 0; }

/* ---------- контент --------------------------------------------------------- */
#myModal .fk {
  position: relative; z-index: 1;
  padding: calc(var(--u) * 7.1) calc(var(--u) * 7.1) calc(var(--u) * 2.3);
  color: #fff;
  text-align: left;
}
#myModal .fk * { box-sizing: border-box; }

#myModal .fk-logo {
  display: block;
  width: calc(var(--u) * 23.4); height: auto;
  margin: 0;
}

#myModal .fk-title {
  margin: calc(var(--u) * 2) 0 0;
  font-size: calc(var(--u) * 4.8);
  line-height: 1.083;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #fff;
}

#myModal .fk-sub {
  margin: calc(var(--u) * 3) 0 0;
  font-size: calc(var(--u) * 3);
  line-height: 1.5;
  font-weight: 400;
  color: #fff;
}

#myModal .fk-pills {
  display: flex; flex-wrap: wrap;
  gap: calc(var(--u) * 1.2);
  margin: calc(var(--u) * 2.5) 0 0;
  padding: 0;
  list-style: none;
}
#myModal .fk-pill {
  display: flex; align-items: center;
  gap: calc(var(--u) * 1.8);
  height: calc(var(--u) * 8.6);
  padding-right: calc(var(--u) * 2.8);
  border-radius: calc(var(--u) * 4.3);
  background: rgba(255, 255, 255, .07);
}
#myModal .fk-pill__ico {
  flex: 0 0 calc(var(--u) * 8.6);
  width: calc(var(--u) * 8.6); height: calc(var(--u) * 8.6);
  border-radius: 50%;
  background-color: #4AA96E;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: 0 0 0 calc(var(--u) * .6) rgba(74, 169, 110, .12),
              0 calc(var(--u) * .6) calc(var(--u) * 2.2) rgba(74, 169, 110, .55);
}
/* иконки лежат в этой же папке media/modal/ */
#myModal .fk-pill__ico--fast {
  background-image: url(flash.svg);
  background-size: calc(var(--u) * 4.2) calc(var(--u) * 4.2);
}
#myModal .fk-pill__ico--free {
  background-image: url(tenge0.svg);
  background-size: calc(var(--u) * 4.1) calc(var(--u) * 2.5);
}
#myModal .fk-pill__ico--clear {
  background-image: url(shield-tick.svg);
  background-size: calc(var(--u) * 4.2) calc(var(--u) * 4.2);
}
#myModal .fk-pill__txt {
  font-size: calc(var(--u) * 2.6);
  font-weight: 500;
  white-space: nowrap;
}

#myModal .fk-lead {
  margin: calc(var(--u) * 4.2) 0 0;
  font-size: calc(var(--u) * 3.4);
  line-height: 1.2;
  font-weight: 700;
}
#myModal .fk-lead-sub {
  margin: calc(var(--u) * 1) 0 0;
  font-size: calc(var(--u) * 2.8);
  line-height: 1.5;
}

#myModal .fk-media {
  position: relative;
  margin: calc(var(--u) * 3.6) 0 calc(var(--u) * 3.5);
}
#myModal .fk-shot {
  display: block;
  width: 100%;
  height: auto;              /* обязательно: без этого сработает атрибут height="571" у <img> */
  aspect-ratio: 868 / 594;   /* пропорция блока из макета; лишнее подрезается object-fit */
  object-fit: cover;
  border-radius: calc(var(--u) * 2.4);
}

#myModal .fk-deco { position: absolute; z-index: 2; pointer-events: none; }
#myModal .fk-deco--calc {
  width: calc(var(--u) * 20.5);
  left: calc(var(--u) * -7.1);
  bottom: calc(var(--u) * -1.9);
}
#myModal .fk-deco--card {
  width: calc(var(--u) * 34.2);
  right: calc(var(--u) * -5.9);
  bottom: calc(var(--u) * -5.7);
}

#myModal .fk-cta {
  position: absolute; z-index: 3;
  left: 50%; bottom: calc(var(--u) * -3.5);
  transform: translateX(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  gap: calc(var(--u) * 1);
  min-width: calc(var(--u) * 42.4);
  height: calc(var(--u) * 10.5);
  padding: 0 calc(var(--u) * 2.8);
  border-radius: calc(var(--u) * 2);
  background: #F9F300;
  color: #1c1c1c !important;
  font-size: calc(var(--u) * 3);
  font-weight: 500;
  text-decoration: none !important;
  white-space: nowrap;
  box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(0, 0, 0, .18);
  transition: filter .2s, transform .2s;
}
#myModal .fk-cta:hover,
#myModal .fk-cta:focus { color: #1c1c1c !important; filter: brightness(1.05); }
#myModal .fk-cta:hover { transform: translateX(-50%) translateY(-2px); }
#myModal .fk-cta svg {
  flex: 0 0 auto;
  width: calc(var(--u) * 1.4); height: calc(var(--u) * 1.4);
}

/* ---------- локали: layout отдаёт <html lang="ru"> / <html lang="kk"> ------- */
#myModal .fk-kk { display: none; }
html[lang="kk"] #myModal .fk-ru { display: none; }
html[lang="kk"] #myModal .fk-kk { display: inline; }

/* ---------- мобильный: пропорциональный масштаб дал бы нечитаемый шрифт,
             поэтому здесь фиксированные размеры и свободный перенос строк ---- */
@media only screen and (max-width: 575px) {
  #myModal {
    width: calc(100vw - 24px);
    max-height: 92vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  #myModal .modal__box,
  #myModal .modal__body { border-radius: 14px; }

  #myModal .modal__close { top: 16px; right: 16px; width: 24px; height: 24px; }
  #myModal .modal__close svg { width: 15px; height: 15px; }

  #myModal .fk { padding: 20px 18px 10px; }
  #myModal .fk-logo { width: 110px; }

  #myModal .fk-title { margin-top: 12px; font-size: 21px; line-height: 24px; }
  #myModal .fk-title br { display: none; }        /* пусть переносится сам */
  #myModal .fk-sub { margin-top: 10px; font-size: 14px; line-height: 20px; }

  #myModal .fk-pills { margin-top: 16px; gap: 6px; }
  #myModal .fk-pill { height: 38px; padding-right: 12px; gap: 8px; border-radius: 19px; }
  #myModal .fk-pill__ico {
    flex-basis: 38px; width: 38px; height: 38px;
    box-shadow: 0 0 0 3px rgba(74, 169, 110, .12), 0 3px 12px rgba(74, 169, 110, .5);
  }
  #myModal .fk-pill__ico--fast  { background-size: 18px 18px; }
  #myModal .fk-pill__ico--free  { background-size: 18px 11px; }
  #myModal .fk-pill__ico--clear { background-size: 18px 18px; }
  #myModal .fk-pill__txt { font-size: 12.5px; }

  #myModal .fk-lead { margin-top: 18px; font-size: 15.5px; }
  #myModal .fk-lead-sub { margin-top: 6px; font-size: 13px; line-height: 19px; }

  #myModal .fk-media { margin: 16px 0 20px; }
  #myModal .fk-shot { border-radius: 12px; }
  #myModal .fk-deco--calc { width: 100px; left: -18px; bottom: -10px; }
  #myModal .fk-deco--card { width: 165px; right: -28px; bottom: -27px; }

  #myModal .fk-cta {
    min-width: 180px; height: 46px; bottom: -20px;
    padding: 0 18px; font-size: 14px; border-radius: 12px;
    gap: 8px;
  }
  #myModal .fk-cta svg { width: 12px; height: 12px; }
}