/* Перший шар — блок «застосунок на телефоні» + вікно з інструкцією.
   Окремий файл, щоб не чіпати fl.css: його правлять паралельно інші руки. */

.fl-app {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(212px, 268px);
  gap: 44px; align-items: center;
  padding: 44px 48px;
  background: linear-gradient(150deg, var(--fl-navy) 0%, var(--fl-navy-dp) 100%);
  border-radius: var(--fl-r, 22px);
  box-shadow: 0 24px 70px rgba(12, 28, 50, .22);
}
.fl-app[hidden] { display: none; }
/* тепле сяйво за телефоном: права частина не має виглядати порожньою плямою */
.fl-app::after {
  content: ""; position: absolute; right: -80px; top: 50%;
  width: 460px; height: 460px; transform: translateY(-50%);
  pointer-events: none;
  background: radial-gradient(circle, rgba(107, 240, 140, .14) 0%, rgba(107, 240, 140, 0) 66%);
}
.fl-app-t, .fl-app-ph { position: relative; z-index: 1; }

.fl-app h2 { margin: 12px 0 0; color: #fff; font-size: clamp(22px, 3.2vw, 31px); line-height: 1.2; }
.fl-app .fl-eyebrow { color: var(--fl-neon); }
.fl-app-lead { margin: 12px 0 0; color: #C6D6E8; font-size: 15.5px; line-height: 1.6; max-width: 62ch; }

/* пункти — картками у дві колонки: саме вони заповнюють ширину блоку */
.fl-app-ul {
  margin: 22px 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
}
.fl-app-ul li {
  position: relative; padding: 12px 14px 12px 42px;
  border: 1px solid rgba(255, 255, 255, .09); border-radius: 14px;
  background: rgba(255, 255, 255, .045);
  color: #DCE7F3; font-size: 14px; line-height: 1.45;
}
.fl-app-ul li::before {
  content: ""; position: absolute; left: 14px; top: 13px;
  width: 17px; height: 17px; border-radius: 50%;
  background: rgba(107, 240, 140, .14);
  box-shadow: inset 0 0 0 1px rgba(107, 240, 140, .5);
}
.fl-app-ul li::after {
  content: ""; position: absolute; left: 19px; top: 18px;
  width: 6px; height: 3px;
  border-left: 2px solid var(--fl-neon); border-bottom: 2px solid var(--fl-neon);
  transform: rotate(-45deg);
}

.fl-app-act { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 18px; margin-top: 26px; }
.fl-app-btn svg { width: 18px; height: 18px; }
.fl-app-btn:disabled { opacity: .65; cursor: default; }
.fl-app-hint { margin: 0; font-size: 12.5px; line-height: 1.45; color: #93A9C2; }

/* ── телефон із живим магазином усередині ─────────────────── */
.fl-app-ph { justify-self: center; }
.fl-ph {
  font-size: 10px;                    /* усе всередині — в em від цього */
  width: 25em; padding: .75em; border-radius: 4.2em;
  background: linear-gradient(160deg, #35486310 0%, #0A1526 100%), linear-gradient(#2B3D57, #18273D);
  box-shadow:
    0 2.4em 4.4em rgba(0, 0, 0, .42),
    inset 0 0 0 .1em rgba(255, 255, 255, .13),
    inset 0 .12em .4em rgba(255, 255, 255, .1);
}
.fl-ph-scr {
  position: relative; border-radius: 3.5em; overflow: hidden;
  background: var(--fl-page); color: var(--fl-ink);
  font-family: var(--fl-b, system-ui, sans-serif);
  padding-bottom: 1.4em;
}
/* смуга стану */
.fl-ph-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1em 1.9em .5em; font-size: 1.05em; font-weight: 700; color: var(--fl-ink);
}
.fl-ph-sig { display: inline-flex; align-items: flex-end; gap: .2em; }
.fl-ph-sig i { width: .28em; background: var(--fl-ink); border-radius: .14em; display: block; }
.fl-ph-sig .s1 { height: .3em } .fl-ph-sig .s2 { height: .45em }
.fl-ph-sig .s3 { height: .62em } .fl-ph-sig .s4 { height: .8em }
.fl-ph-bat {
  width: 1.5em; height: .78em; margin-left: .35em; border-radius: .22em;
  border: .1em solid var(--fl-ink); position: relative; display: block;
}
.fl-ph-bat::before { content: ""; position: absolute; inset: .12em; background: var(--fl-green); border-radius: .1em; }
/* шапка магазину */
.fl-ph-hd {
  display: flex; align-items: center; gap: .6em;
  margin: .3em .9em .8em; padding: .7em .8em;
  background: #fff; border-radius: 1.4em;
  box-shadow: 0 .4em 1.2em rgba(12, 28, 50, .08);
}
.fl-ph-hd img { width: 2.4em; height: 2.4em; object-fit: contain; }
.fl-ph-nm { flex: 1; font-size: 1.18em; font-weight: 800; letter-spacing: -.01em; }
.fl-ph-cart {
  width: 2.4em; height: 2.4em; display: grid; place-items: center; border-radius: .9em;
  background: var(--fl-green); color: #fff; font-size: .95em; font-weight: 800;
}
/* банер каталогу */
.fl-ph-hero {
  margin: 0 .9em .8em; padding: 1.1em 1.2em; border-radius: 1.6em;
  background: linear-gradient(140deg, var(--fl-navy) 0%, var(--fl-navy-dp) 100%); color: #fff;
}
.fl-ph-eye {
  display: block; font-size: .82em; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--fl-neon);
}
.fl-ph-hero b { display: block; margin: .45em 0 .9em; font-size: 1.35em; line-height: 1.25; }
.fl-ph-btn {
  display: inline-block; padding: .55em 1.4em; border-radius: 2em;
  background: var(--fl-green); color: #fff; font-size: .98em; font-weight: 700;
}
/* картка товару */
.fl-ph-card {
  margin: 0 .9em; padding: .9em; border-radius: 1.6em;
  background: #fff; box-shadow: 0 .4em 1.2em rgba(12, 28, 50, .08);
}
.fl-ph-img {
  height: 6.4em; display: grid; place-items: center;
  border-radius: 1.1em; background: var(--fl-tint, #F2F7FC);
}
.fl-ph-img img { width: 3.6em; height: 3.6em; object-fit: contain; }
.fl-ph-t1, .fl-ph-t2 { display: block; height: .62em; border-radius: .31em; background: #D8E3F0; }
.fl-ph-t1 { margin: .9em 0 .45em; width: 86%; }
.fl-ph-t2 { width: 58%; }
.fl-ph-row { display: flex; align-items: center; justify-content: space-between; margin-top: .9em; }
.fl-ph-row b { font-size: 1.35em; font-weight: 800; color: var(--fl-ink); }
.fl-ph-add {
  padding: .5em 1.1em; border-radius: 2em;
  background: var(--fl-green-lt, #E7F6E9); color: var(--fl-green-dk);
  font-size: .95em; font-weight: 700;
}
.fl-ph-bar {
  width: 8em; height: .42em; margin: 1.3em auto 0;
  border-radius: .21em; background: rgba(8, 28, 51, .22);
}

/* ── вікно з інструкцією ──────────────────────────────────── */
.fl-appm {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: 20px;
  background: rgba(8, 20, 36, .62); backdrop-filter: blur(3px);
}
.fl-appm[hidden] { display: none; }
.fl-appm-b {
  position: relative; width: min(100%, 440px);
  padding: 26px 26px 22px; border-radius: 20px;
  background: var(--fl-card); box-shadow: 0 30px 80px rgba(12, 28, 50, .34);
  animation: fl-pop .18s ease-out;
}
.fl-appm-b h3 { margin: 10px 0 16px; font-size: 21px; }
.fl-appm-x {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; display: grid; place-items: center; padding: 0 !important;
  border: 1px solid var(--fl-line) !important; border-radius: 9px !important;
  background: var(--fl-card) !important; color: var(--fl-muted) !important; cursor: pointer;
}
.fl-appm-x svg { width: 15px; height: 15px; }
.fl-appm-x:hover { color: var(--fl-ink) !important; border-color: var(--fl-ink) !important; }
.fl-appm-steps { margin: 0; padding-left: 0; list-style: none; counter-reset: flapp; display: grid; gap: 12px; }
.fl-appm-steps li {
  counter-increment: flapp; position: relative; padding-left: 40px;
  font-size: 14.5px; line-height: 1.55; color: var(--fl-ink);
}
.fl-appm-steps li::before {
  content: counter(flapp); position: absolute; left: 0; top: -1px;
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: 9px;
  background: var(--fl-green-lt); color: var(--fl-green-dk);
  font-family: var(--fl-m); font-size: 12px; font-weight: 800;
}
.fl-appm-note {
  margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--fl-line);
  font-size: 12.5px; line-height: 1.5; color: var(--fl-muted);
}

/* ── планшет ──────────────────────────────────────────────── */
@media (max-width: 1040px) {
  .fl-app { gap: 30px; padding: 38px 32px; grid-template-columns: minmax(0, 1fr) minmax(190px, 220px); }
  .fl-ph { font-size: 8.6px; }
}

/* ── телефон ──────────────────────────────────────────────── */
@media (max-width: 860px) {
  .fl-app { grid-template-columns: 1fr; gap: 26px; padding: 32px 22px; text-align: center; }
  .fl-app::after { right: 50%; top: 22%; transform: translate(50%, -50%); width: 340px; height: 340px; }
  .fl-app-lead { margin-left: auto; margin-right: auto; }
  .fl-app-ul { grid-template-columns: 1fr; text-align: left; max-width: 380px; margin-left: auto; margin-right: auto; }
  .fl-app-act { flex-direction: column; gap: 10px; }
  .fl-app-btn { width: 100%; max-width: 340px; }
  .fl-app-hint { text-align: center; }
  /* телефон першим: одразу видно, про що мова */
  .fl-app-ph { order: -1; }
  .fl-ph { font-size: 7.4px; }
}
@media (max-width: 420px) {
  .fl-app { padding: 26px 16px; }
  .fl-ph { font-size: 6.6px; }
}

/* У встановленому застосунку пропонувати встановлення нема сенсу. */
.fl-inapp .fl-app { display: none; }