/* ================================================================
   Exposhop Video Badge — product card video popup.

   Migrated from a Code Snippets snippet (see
   includes/class-exposhop-video-badge.php for context). Not scoped to
   body.exposhop-catalog — this file is also enqueued on is_product()
   pages (related products), which never get that body class
   (Exposhop_Catalog::add_body_class() only applies it on
   is_shop()/is_product_category()/is_product_taxonomy()).

   No li.product { position: relative } rule here (the original
   snippet had one) — .esc-card__image/.astra-shop-thumbnail-wrap
   already carry it from the catalog module, and li.product itself
   already has it too (task 3) — adding it again here would be
   redundant, not incorrect, so it's just left out. ================ */
/* ---- Кнопка видео — капсула по макету (Catalog Page.dc.html,
   раздел «ЗНАЧОК ВИДЕО»), 24.07.2026, docs/tasks/task-badges-video-
   button.md, Этап 2.5. Было: сплошной белый круг 42px, розовый глиф
   «▶», top-right. Стало: тёмная полупрозрачная капсула bottom-left,
   белый кружок-иконка с розовым CSS-треугольником внутри + подпись.

   Позиция: бейдж печатается на woocommerce_before_shop_loop_item@9
   (class-exposhop-video-badge.php, перенесено на Этапе 3 — было
   @20 на after_shop_loop_item, ПОСЛЕ закрытия .astra-shop-thumbnail-
   wrap, из-за чего bottom/left отмерялись от низа/левого края ВСЕЙ
   карточки, не фото — капсула улетала мимо, найдено живым замером).
   Теперь бейдж вложен в .astra-shop-thumbnail-wrap, как .onsale/out-
   of-stock/preorder — bottom:12px;left:12px буквально по макету, без
   компенсации на padding li.product. В каталоге (body.exposhop-
   catalog) эту позицию перекрывает более специфичное правило
   catalog.css — держать оба места синхронными при следующей правке. */
.exps-video-badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  top: auto;
  right: auto;
  z-index: 50;
  width: auto;
  height: auto;
  border-radius: 100px;
  border: 0;
  cursor: pointer;
  background: rgba(10, 9, 7, .55); /* oklch(0.15 0.005 90 / 0.55) ≈ --esc-text-1 при альфе 55% */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 8px;
}
/* margin:0 !important на трёх правилах ниже (icon/triangle/label) —
   Волна 21 (25.07.2026, фикс по прямому наблюдению Вакхтанга: «треугольник
   прижат к верхнему краю», но ТОЛЬКО у кнопки из [video_btn], catalog/
   --single были в порядке). Найдено через CDP CSS.getMatchedStylesForNode:
   WooCommerce core — `.woocommerce-js div.product div.summary
   .woocommerce-product-details__short-description :last-child{margin-
   bottom:1em}` — это ОБЩЕЕ правило типографики для параграфов внутри
   краткого описания, но `:last-child` без ограничения по тегу ловит
   ЛЮБОЙ элемент-предпоследний/последний ребёнок в этой ветке DOM,
   включая наш .exps-video-badge__triangle (last-child внутри .icon) и
   .exps-video-badge__label (last-child внутри самой кнопки) — специфичность
   WC-правила (5 классов+psevdoklass) на порядок выше наших (1 класс),
   бьёт без !important. margin-bottom:1em (≈16px, у .triangle — от
   унаследованного font-size 16px кнопки) на .triangle делает его margin-
   box асимметричным (0 сверху / 16px снизу) — flex align-items:center
   центрирует ИМЕННО margin-box, поэтому видимый треугольник уезжает
   вверх. Затрагивает только --inline (единственный вариант, который
   реально живёт внутри .short-description, куда шорткод и вставляется)
   — catalog/--single физически не пересекаются с этим WC-селектором
   (другие контейнеры), поэтому у них бага не было и без явного margin:0. */
.exps-video-badge__icon {
  width: 22px;
  height: 22px;
  margin: 0 !important;
  border-radius: 100px;
  background: #fff;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.exps-video-badge__triangle {
  width: 0;
  height: 0;
  margin-top: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid #d00072;
  margin-left: 1px; /* оптическая центровка треугольника в круге, как в макете */
}
.exps-video-badge__label {
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  margin: 0 !important;
}

/* ---- Modal — Волна 19 (25.07.2026), переписано по образцу Ailo Chat
   (ailo-chat-v2/assets/css/video-modal.css::.ailo-video-modal__*).
   Ключевое отличие от прежней версии: кнопка закрытия теперь ОБЫЧНЫЙ
   flex-item внутри .exps-video-head, в одной строке с заголовком — НЕ
   absolute-соседний элемент. Раньше .exps-video-close лежал ВНЕ
   .exps-video-head (сосед по dialog), позиционировался absolute
   поверх него — а .exps-video-head ТОЖЕ имел position:relative (для
   своих же nav-стрелок) и шёл позже в DOM, поэтому рисовался ПОВЕРХ
   кнопки в зоне их пересечения (оба «positioned», z-index:auto — при
   такой ничьей побеждает DOM-порядок). Тап по видимому крестику на
   самом деле попадал в .exps-video-title — крестик было видно, но
   нельзя было нажать, ровно баг из задания «сложно закрыть на
   мобильном». Flex-раскладка исключает это в принципе — geometрически
   пересекаться нечему. Nav (prev/next, перебор между всеми видео-
   бейджами страницы) убран — прямое требование задания
   «минималистичный, без лишних элементов управления». */
.exps-video-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:999999;
}
.exps-video-modal.is-open{ display:block; }
.exps-video-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.7);
}
.exps-video-dialog{
  position:relative;
  width:min(1020px,calc(100vw - 20px));
  margin:60px auto 0;
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 25px 80px rgba(0,0,0,.45);
}
.exps-video-head{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid rgba(0,0,0,.08);
  background:#fff;
}
.exps-video-title{
  flex:1;
  min-width:0;
  font-size:15px;
  font-weight:700;
  color:#111;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* Кнопка закрытия — БОЛЬШАЯ на мобильном (touch-friendly, задание
   явно требует "особенно важно для мобильного"), обычный flex-item,
   не absolute — см. пояснение к .exps-video-modal выше. */
.exps-video-close{
  flex-shrink:0;
  width:36px;
  height:36px;
  border:0;
  border-radius:50%;
  background:#f1f0ee;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
  transition:background .15s ease;
}
.exps-video-close:hover{ background:#e4e2de; }
.exps-video-close svg{
  width:18px;
  height:18px;
  fill:#0a0907;
  display:block;
}
.exps-video-body{ background:#000; }
/* max-height cap — found during Пакет A QA (docs/tasks/task-wave2b-2-video-implementation.md):
   width:100% + aspect-ratio alone lets a portrait/vertical video (JS
   sets --exps-ar from the real videoWidth/videoHeight on load, see
   video-badge.js) compute a height taller than the viewport on
   desktop, since nothing capped it — the dialog has no scroll of its
   own, so the video just ran off-screen. 140px ≈ dialog's 60px
   top margin + .exps-video-head's own height, leaving the rest of the
   viewport for the video itself. object-fit:contain on the <video>
   below (unchanged) means letterboxing bars appear instead of any
   distortion once this box's own ratio no longer matches the video's. */
.exps-video-embed{
  width:100%;
  aspect-ratio:var(--exps-ar,16/9);
  max-height: calc(100vh - 140px);
  background:#000;
}
.exps-video-embed video{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
@media (max-width:768px){
  .exps-video-dialog{
    margin:12px auto 0;
    border-radius:14px;
  }
  /* 44px — Apple/Google touch-target минимум, задание явно требует
     "кнопка ещё крупнее (touch-friendly)" на мобильном. */
  .exps-video-close{
    width:44px;
    height:44px;
  }
  .exps-video-close svg{
    width:20px;
    height:20px;
  }
}

/* === Кнопка видео на странице товара (--single) — 24.07.2026,
   docs/tasks/task-badges-video-button.md, Этап 2.5: та же капсула,
   что в каталоге, тот же угол (решение Вакхтанга — «капсула в том же
   месте, что и указано» в макете, не отдельный центрированный
   паттерн, который был здесь раньше). Позиция — bottom-left
   относительно самой галереи (.woocommerce-product-gallery), без
   компенсации на padding — в отличие от каталожного контекста, здесь
   бейдж не является потомком чужого элемента с padding:12px, поэтому
   12px по макету остаются буквально 12px. Уточнить живьём на
   стейджинге (Этап 3) — если позиционирующий предок окажется другим,
   поправить одним числом здесь же. ===*/
.single-product .woocommerce-product-gallery{
  position: relative !important;
}
.single-product .woocommerce-product-gallery
.exps-video-badge.exps-video-badge--single{
  position: absolute !important;
  bottom: 12px !important;
  left: 12px !important;
  top: auto !important;
  right: auto !important;
  z-index: 999999 !important;
  transition: transform .18s ease, background .18s ease !important;
}
.single-product .woocommerce-product-gallery
.exps-video-badge.exps-video-badge--single:hover{
  transform: scale(1.04) !important;
  background: rgba(10, 9, 7, .7) !important;
}


/* === [video_btn]-shortcode variant — .exps-video-badge--inline ===
   Migrated from Code Snippets #36 (Пакет A revisited). Unlike
   --single (absolutely positioned over the product gallery image),
   this one is printed wherever the shortcode sits in the short
   description text flow — so it must NOT inherit the base
   .exps-video-badge rule's position:absolute (catalog-card overlay
   positioning, meaningless here without an image to anchor to).

   ПОБОЧНЫЙ ЭФФЕКT правки Этапа 2.5 (не в объёме задания, только
   фиксация факта): базовый класс `.exps-video-badge` теперь капсула
   с иконкой+подписью (было — сплошной кружок с глифом «▶») — этот
   вариант ничего своего для вида не переопределяет, только позицию,
   поэтому теперь тоже покажет тёмную капсулу с подписью «ვიდეო»
   вместо прежнего маленького кружка. 124 живых использования
   шорткода — визуально другой вид, не поломка (inline-flex не
   ломает вёрстку текста). Если понадобится вернуть прежний
   компактный кружок именно здесь — отдельная точечная правка. */
.exps-video-badge.exps-video-badge--inline {
  position: static !important;
  top: auto !important;
  right: auto !important;
  display: inline-flex !important;
  vertical-align: middle;
  /* !important добавлен Волной 21 — та же коллизия с WC core
     :last-child{margin-bottom:1em} (см. пояснение выше на icon/
     triangle/label), только на самой кнопке: без !important
     margin-bottom WC-правила (specificity выше) отрезал 6px по
     макету и подставлял 16px. */
  margin: 6px 8px 6px 0 !important;
}