/* ============================================================================
   Fibra Net — cookie consent banner + settings dialog
   ---------------------------------------------------------------------------
   Everything is namespaced `.fibra-cc*` and reads its own custom properties, so
   it can be dropped onto any page (storefront, checkout, legal) without
   inheriting from — or leaking into — shop-style.css / legal.css / nav.css.

   Stacking order used by the site: header 100 · order modal 200 · nav drawer 300
   · catalog panel 400 · cart drawer 500. Consent sits above all of them:
   banner 600 · debug 650 · settings dialog 700 · toast 800.
   ========================================================================== */

.fibra-cc,
.fibra-cc-modal,
.fibra-cc-toast,
.fibra-cc-debug {
  --cc-ink:      #111827;
  --cc-ink-2:    #374151;
  --cc-muted:    #6B7280;
  --cc-border:   #E5E7EB;
  --cc-line:     #111827;
  /* Фірмовий синій Fibra — той самий, що в основних кнопках магазину
     (--primary у shop-style.css). Дублюється тут навмисно: consent.css
     працює і на юридичних сторінках, де shop-style.css не підключений. */
  --cc-brand:      #1A56DB;
  --cc-brand-dark: #1342B0;
  --cc-brand-deep: #0F3A99;
  --cc-bg:       #ffffff;
  --cc-bg-soft:  #F9FAFB;
  --cc-radius:   14px;
  --cc-font:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-family: var(--cc-font);
  color: var(--cc-ink);
  line-height: 1.55;
  box-sizing: border-box;
}
.fibra-cc *,
.fibra-cc-modal *,
.fibra-cc-toast *,
.fibra-cc-debug * { box-sizing: border-box; }

.fibra-cc [hidden],
.fibra-cc-modal[hidden],
.fibra-cc-debug [hidden] { display: none !important; }

/* ── Banner ─────────────────────────────────────────────────────────────── */

.fibra-cc {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 600;
  background: var(--cc-bg);
  border-top: 1px solid var(--cc-border);
  /* Скруглені лише два верхні кути — нижні прямі, панель прилягає до краю
     екрана. Більше у вигляді банера нічого не змінюється. */
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -10px 30px rgba(17, 24, 39, .13);
  padding: 16px 16px max(16px, env(safe-area-inset-bottom, 0px));
  transform: translateY(110%);
  opacity: 0;
  visibility: hidden;
  transition: transform .28s ease, opacity .28s ease, visibility .28s;
}
.fibra-cc.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
.fibra-cc:focus { outline: none; }
.fibra-cc:focus-visible { outline: 3px solid var(--cc-line); outline-offset: -3px; }

/* While the cart drawer / order modal / nav drawer / catalog panel is open the
   banner steps aside so it can never cover their action buttons. */
.fibra-cc.is-behind-overlay {
  transform: translateY(110%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.fibra-cc__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
}
.fibra-cc__body { flex: 1 1 auto; min-width: 0; }

.fibra-cc__title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 4px;
  color: var(--cc-ink);
}
.fibra-cc__text {
  font-size: 13.5px;
  color: var(--cc-ink-2);
  margin: 0;
}
.fibra-cc__link {
  color: var(--cc-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
  white-space: nowrap;
}
@media (hover: hover) { .fibra-cc__link:hover { color: #000; } }
.fibra-cc__link:focus-visible { outline: 2px solid var(--cc-line); outline-offset: 2px; border-radius: 3px; }

/* Three actions, deliberately identical in size, weight and contrast — no
   option is visually privileged over another. */
.fibra-cc__actions {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
}
.fibra-cc__btn {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: var(--cc-ink);
  background: var(--cc-bg);
  border: 2px solid var(--cc-line);
  border-radius: 10px;
  padding: 12px 18px;
  min-width: 148px;
  min-height: 46px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .1s ease;
}
/* Hover only where a real pointer exists — on touch the :hover state sticks
   after a tap and would make one of the three options look privileged. */
@media (hover: hover) {
  .fibra-cc__btn:hover { background: var(--cc-ink); color: #fff; }
}
.fibra-cc__btn:active { transform: translateY(1px); }
.fibra-cc__btn:focus-visible { outline: 3px solid var(--cc-line); outline-offset: 2px; }

/* Рядок посилань під текстом. «Налаштувати» — саме посилання, а не третя
   кнопка: воно не має конкурувати з вибором «Прийняти / Відхилити», але має
   лишатися повноцінною кнопкою для клавіатури й скрінрідера. */
.fibra-cc__links {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.fibra-cc__sep { color: var(--cc-muted, #6B7280); }
.fibra-cc__link--btn {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

/* Основна кнопка — фірмовий синій, білий текст: як головні кнопки магазину.
   «Відхилити» лишається білою з темною обводкою. Форма, розмір і місце в ряду
   однакові, тож відмова не заховна — відрізняється лише заливка.
   Контраст білого на #1A56DB — 6.4:1, це вище порога AA для звичайного тексту. */
.fibra-cc__btn--accept {
  background: var(--cc-brand);
  border-color: var(--cc-brand);
  color: #fff;
}
@media (hover: hover) {
  .fibra-cc__btn--accept:hover { background: var(--cc-brand-dark); border-color: var(--cc-brand-dark); color: #fff; }
}
.fibra-cc__btn--accept:active { background: var(--cc-brand-deep); border-color: var(--cc-brand-deep); }
/* Фокус на синій заливці не видно темною обводкою впритул, тому контур
   відсунуто і додано білу прокладку між кнопкою й контуром. */
.fibra-cc__btn--accept:focus-visible {
  outline: 3px solid var(--cc-brand-deep);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px #fff;
}

@media (max-width: 860px) {
  .fibra-cc__inner { flex-direction: column; align-items: stretch; gap: 14px; }
  .fibra-cc__actions { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .fibra-cc__btn { width: 100%; min-width: 0; }
  .fibra-cc__title { font-size: 16px; }
  .fibra-cc__text { font-size: 13px; }
  .fibra-cc { padding: 14px 14px max(14px, env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 561px) and (max-width: 860px) {
  .fibra-cc__actions { grid-template-columns: 1fr 1fr; }
}

/* Keep the floating Telegram button reachable while the banner is up. */
body.fibra-cc-visible .tg-float {
  bottom: calc(18px + var(--fibra-cc-height, 0px));
  transition: bottom .28s ease;
}
@media (max-width: 560px) {
  body.fibra-cc-visible .tg-float { bottom: calc(14px + var(--fibra-cc-height, 0px)); }
}
@supports (bottom: env(safe-area-inset-bottom)) {
  body.fibra-cc-visible .tg-float { bottom: calc(18px + var(--fibra-cc-height, 0px)); }
  @media (max-width: 560px) {
    body.fibra-cc-visible .tg-float { bottom: calc(14px + var(--fibra-cc-height, 0px)); }
  }
}

/* Кнопка «Нагору» и плавающий чат KeyCRM. Обе живут в правом нижнем углу, и
   баннер накрыл бы их: у чата свой z-index 2147483003, то есть он оказался бы
   ПОВЕРХ баннера, а «Нагору» — под ним.

   Поднимаем не пересчётом `bottom`, а `margin-bottom`: у фиксированного
   элемента это сдвигает его ровно на заданную величину и НЕ требует знать,
   какой у него собственный отступ. Для «Нагору» этот отступ вычисляется в JS
   по реальной кнопке связи, а у виджета KeyCRM он свой и может измениться —
   пересчёт по константе сломался бы в обоих случаях.

   `!important` нужен только чату: виджет расставляет свои стили сам. */
body.fibra-cc-visible .to-top {
  margin-bottom: var(--fibra-cc-height, 0px);
  transition: margin-bottom .28s ease, opacity .18s ease, transform .18s ease, visibility .18s;
}
/* Замерено на живому проді: у віджета KeyCRM ДВА фіксовані контейнери —
   кнопка (`KeyCRM-toggleButtonContainer`) і вікно вітання/чату
   (`KeyCRM-chatWindowContainer`). Піднімати треба обидва, інакше вікно чату
   лягає на банер. Селектор навмисно закінчується на `Container`: клас
   `KeyCRM-toggleButton` — це ВКЛАДЕНА кнопка, і відступ на ній дав би подвійний
   зсув (перевірено: контейнер виростав з 56 до 184 px). */
body.fibra-cc-visible [class*="KeyCRM-toggleButtonContainer"],
body.fibra-cc-visible [class*="KeyCRM-chatWindowContainer"] {
  margin-bottom: var(--fibra-cc-height, 0px) !important;
}

/* ── Settings dialog ────────────────────────────────────────────────────── */

.fibra-cc-modal { position: fixed; inset: 0; z-index: 700; }
.fibra-cc-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(17, 24, 39, .55);
  opacity: 0;
  transition: opacity .2s ease;
}
.fibra-cc-modal.is-open .fibra-cc-modal__backdrop { opacity: 1; }

.fibra-cc-modal__panel {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -48%);
  width: min(560px, calc(100vw - 32px));
  max-height: min(86vh, 720px);
  display: flex;
  flex-direction: column;
  background: var(--cc-bg);
  border-radius: var(--cc-radius);
  box-shadow: 0 24px 60px rgba(17, 24, 39, .28);
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  overflow: hidden;
}
.fibra-cc-modal.is-open .fibra-cc-modal__panel { opacity: 1; transform: translate(-50%, -50%); }
.fibra-cc-modal__panel:focus { outline: none; }
.fibra-cc-modal__panel:focus-visible { outline: 3px solid var(--cc-line); outline-offset: -3px; }

.fibra-cc-modal__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 18px 12px;
  border-bottom: 1px solid var(--cc-border);
}
.fibra-cc-modal__title { font-size: 18px; font-weight: 700; margin: 0; }
.fibra-cc-modal__close {
  appearance: none; -webkit-appearance: none;
  width: 40px; height: 40px; flex: 0 0 40px;
  border: 1px solid var(--cc-border);
  border-radius: 10px;
  background: var(--cc-bg);
  color: var(--cc-ink);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.fibra-cc-modal__close svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; fill: none; }
@media (hover: hover) { .fibra-cc-modal__close:hover { background: var(--cc-bg-soft); } }
.fibra-cc-modal__close:focus-visible { outline: 3px solid var(--cc-line); outline-offset: 2px; }

.fibra-cc-modal__body { padding: 14px 18px 4px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.fibra-cc-modal__intro { font-size: 13.5px; color: var(--cc-ink-2); margin: 0 0 10px; }
/* The honest note about Advanced Consent Mode: visible, but not shouting. */
.fibra-cc-modal__note {
  font-size: 12px;
  line-height: 1.5;
  color: var(--cc-muted);
  background: var(--cc-bg-soft);
  border: 1px solid var(--cc-border);
  border-radius: 10px;
  padding: 9px 11px;
  margin: 0 0 14px;
}
.fibra-cc-modal__note b { color: var(--cc-ink-2); font-weight: 600; }
.fibra-cc-cat__desc code {
  font: 500 11.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: #EEF1F5; border-radius: 4px; padding: 0 4px;
}
.fibra-cc-cat__desc b { color: var(--cc-ink-2); font-weight: 600; }

.fibra-cc-cat {
  border: 1px solid var(--cc-border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--cc-bg-soft);
}
.fibra-cc-cat__head { display: flex; align-items: center; gap: 10px; }
.fibra-cc-cat__name { font-size: 15px; font-weight: 700; flex: 1 1 auto; }
.fibra-cc-cat__always { font-size: 11.5px; color: var(--cc-muted); font-weight: 600; white-space: nowrap; }
.fibra-cc-cat__desc { font-size: 12.5px; color: var(--cc-muted); margin: 6px 0 0; }

/* Switch — a real checkbox with role="switch": native keyboard + a11y support. */
.fibra-cc-sw { position: relative; display: inline-flex; flex: 0 0 auto; width: 48px; height: 28px; }
.fibra-cc-sw__input {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer; z-index: 2;
}
.fibra-cc-sw__track {
  position: absolute; inset: 0;
  border-radius: 999px;
  background: #D1D5DB;
  transition: background .18s ease;
  pointer-events: none;
}
.fibra-cc-sw__thumb {
  position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(17, 24, 39, .3);
  transition: transform .18s ease;
}
.fibra-cc-sw__input:checked ~ .fibra-cc-sw__track { background: var(--cc-ink); }
.fibra-cc-sw__input:checked ~ .fibra-cc-sw__track .fibra-cc-sw__thumb { transform: translateX(20px); }
.fibra-cc-sw__input:focus-visible ~ .fibra-cc-sw__track { outline: 3px solid var(--cc-line); outline-offset: 3px; }
.fibra-cc-sw__input:disabled { cursor: not-allowed; }
.fibra-cc-sw__input:disabled ~ .fibra-cc-sw__track { background: #9CA3AF; opacity: .65; }

.fibra-cc-modal__foot {
  display: flex; gap: 10px;
  padding: 14px 18px max(16px, env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--cc-border);
}
.fibra-cc-modal__foot .fibra-cc__btn { flex: 1 1 0; min-width: 0; }
/* «Прийняти всі» у налаштуваннях — та сама основна кнопка, що й у банері. */
.fibra-cc-modal__foot .fibra-cc__btn[data-cc="accept"] {
  background: var(--cc-brand);
  border-color: var(--cc-brand);
  color: #fff;
}
@media (hover: hover) {
  .fibra-cc-modal__foot .fibra-cc__btn[data-cc="accept"]:hover {
    background: var(--cc-brand-dark); border-color: var(--cc-brand-dark); color: #fff;
  }
}
.fibra-cc-modal__foot .fibra-cc__btn[data-cc="accept"]:active {
  background: var(--cc-brand-deep); border-color: var(--cc-brand-deep);
}
.fibra-cc-modal__foot .fibra-cc__btn[data-cc="accept"]:focus-visible {
  outline: 3px solid var(--cc-brand-deep); outline-offset: 3px; box-shadow: 0 0 0 3px #fff;
}

@media (max-width: 560px) {
  .fibra-cc-modal__panel {
    left: 0; top: auto; bottom: 0;
    transform: translate(0, 100%);
    width: 100%;
    max-height: 92vh;
    border-radius: var(--cc-radius) var(--cc-radius) 0 0;
  }
  .fibra-cc-modal.is-open .fibra-cc-modal__panel { transform: translate(0, 0); }
  .fibra-cc-modal__foot { flex-direction: column; }
}
@supports (height: 100dvh) {
  @media (max-width: 560px) { .fibra-cc-modal__panel { max-height: 92dvh; } }
}

/* ── "Налаштування cookie" entry point ──────────────────────────────────── */

.fibra-cc-openlink {
  appearance: none; -webkit-appearance: none;
  background: none; border: 0; padding: 0;
  font: inherit; color: inherit;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  display: block;
}
@media (hover: hover) { .fibra-cc-openlink:hover { text-decoration: underline; } }
.fibra-cc-openlink:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 3px; }
.fibra-cc-openlink--inline { display: inline; margin-left: 6px; text-decoration: underline; }
.fibra-cc-openlink-wrap {
  padding: 18px 20px max(18px, env(safe-area-inset-bottom, 0px));
  text-align: center;
  font: 500 13px/1.5 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #6B7280;
}

/* ── Toast ──────────────────────────────────────────────────────────────── */

.fibra-cc-toast {
  position: fixed;
  left: 50%;
  bottom: calc(20px + var(--fibra-cc-height, 0px));
  transform: translate(-50%, 12px);
  z-index: 800;
  background: var(--cc-ink);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  padding: 11px 18px;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(17, 24, 39, .3);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  max-width: calc(100vw - 32px);
  text-align: center;
}
.fibra-cc-toast.is-open { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* ── STAGING-ONLY debug panel (never promoted to production) ────────────── */

.fibra-cc-debug {
  position: fixed;
  left: 12px;
  bottom: calc(12px + var(--fibra-cc-height, 0px));
  z-index: 650;
  font-size: 11px;
  transition: bottom .28s ease;
}
.fibra-cc-debug__toggle {
  appearance: none; -webkit-appearance: none;
  font: 600 11px/1 var(--cc-font);
  background: #111827;
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 7px 11px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(17, 24, 39, .3);
  display: flex; align-items: center; gap: 6px;
}
.fibra-cc-debug__toggle:focus-visible { outline: 3px solid #111827; outline-offset: 2px; }
.fibra-cc-debug__body {
  margin-top: 8px;
  width: min(320px, calc(100vw - 24px));
  background: #fff;
  border: 1px solid var(--cc-border);
  border-radius: 12px;
  box-shadow: 0 12px 34px rgba(17, 24, 39, .22);
  padding: 10px 12px;
}
.fibra-cc-debug__row { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; align-items: center; }
.fibra-cc-debug__row code { font: 500 10.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--cc-ink-2); }
.fibra-cc-debug__row b { font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
.fibra-cc-debug__row b.is-denied  { background: #FEE2E2; color: #991B1B; }
.fibra-cc-debug__row--meta { border-top: 1px dashed var(--cc-border); margin-top: 5px; padding-top: 6px; }
.fibra-cc-debug__row--meta b { font-size: 10px; }
.fibra-cc-debug__row b.is-granted { background: #DCFCE7; color: #166534; }
.fibra-cc-debug__cookie {
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--cc-border);
  font: 400 10.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--cc-ink-2);
  word-break: break-all;
}
.fibra-cc-debug__acts { display: flex; gap: 6px; margin-top: 9px; }
.fibra-cc-debug__btn {
  flex: 1 1 0;
  appearance: none; -webkit-appearance: none;
  font: 600 11px/1 var(--cc-font);
  background: #fff;
  color: var(--cc-ink);
  border: 1px solid var(--cc-ink);
  border-radius: 8px;
  padding: 8px 6px;
  cursor: pointer;
}
@media (hover: hover) { .fibra-cc-debug__btn:hover { background: var(--cc-ink); color: #fff; } }
.fibra-cc-debug__btn:focus-visible { outline: 3px solid var(--cc-line); outline-offset: 2px; }
.fibra-cc-debug__note { margin-top: 8px; font-size: 9.5px; color: var(--cc-muted); text-align: center; letter-spacing: .02em; }

@media (max-width: 560px) {
  .fibra-cc-debug { left: 8px; bottom: calc(8px + var(--fibra-cc-height, 0px)); }
}

/* ── Motion preferences ─────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .fibra-cc,
  .fibra-cc-modal__panel,
  .fibra-cc-modal__backdrop,
  .fibra-cc-toast,
  .fibra-cc-sw__track,
  .fibra-cc-sw__thumb,
  .fibra-cc-debug,
  body.fibra-cc-visible .tg-float { transition: none !important; }
}

/* ── Print: never put the banner on paper ───────────────────────────────── */

@media print {
  .fibra-cc, .fibra-cc-modal, .fibra-cc-toast, .fibra-cc-debug { display: none !important; }
}