/* ── Loading overlay ─────────────────────────────────── */
.custom_lock {
  position: relative;
}
.custom_lock::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0.5;
  z-index: 100;
}
.custom_lock::after {
  content: "";
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: 80px;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='0' fill='none' stroke='%23F5400A' stroke-width='3'%3E%3Canimate attributeName='r' values='0;40' dur='1s' begin='-0.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='1;0' dur='1s' begin='-0.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='50' cy='50' r='0' fill='none' stroke='%23F5400A' stroke-width='3'%3E%3Canimate attributeName='r' values='0;40' dur='1s' begin='0s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='1;0' dur='1s' begin='0s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E");
  z-index: 101;
}

/* ── Fieldset card ───────────────────────────────────── */
.custom-fieldset {
  border: 1px solid var(--lv-border, #e2e8f0);
  border-radius: var(--lv-radius-lg, 12px);
  padding: 20px;
  margin-bottom: 20px;
  background: #fff;
}
.custom-legend {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--lv-dark, #0D1B4B);
  padding-bottom: 10px;
  border-bottom: 2px solid var(--lv-primary, #1B3EAA);
  display: inline-block;
}

/* .lv-auth-links itself is styled further down ("EVA-style banner") — this
   used to be a second, superseded definition of the same class. It only
   still mattered for one leftover property: `.lv-auth-links a { color }`,
   which (class+element, 0,1,1) outranked .btn-lv-buy's plain `color: white`
   (0,1,0), so the login button's text rendered primary-blue instead of
   white like every other CTA button on the page. */

/* ── Required-field marker (JS toggles .required on the wrapper).
   .ocnp-point-group/.ocnp-courier-group/#st_ukrposhta_branch — точки
   видачі/адреса кур'єра, .required тут статичний у twig (не JS-toggle):
   поле обов'язкове щоразу, коли ця група взагалі видима. */
.lv-page-form [id^="customer-field"].required > .form-label::after,
.lv-page-form [id^="shipping-field"].required > .form-label::after,
.lv-page-form .ocnp-point-group.required > .form-label::after,
.lv-page-form .ocnp-courier-group.required > .form-label::after,
.lv-page-form #st_ukrposhta_branch.required > .form-label::after {
  content: " *";
  color: #dc3545;
}

/* ── Sticky sidebar ──────────────────────────────────── */
.custom-sticky-block {
  align-self: flex-start;
  position: sticky;
  top: 190px;
}

/* ── Cart list ───────────────────────────────────────── */
.lv-cart-list {
  border: 1px solid var(--lv-border, #e2e8f0);
  border-radius: var(--lv-radius-lg, 12px);
  background: #fff;
  overflow: hidden;
  margin-bottom: 12px;
}

/* Single cart item row */
.lv-cart-item {
  display: flex;
  padding: 14px 16px;
  border-bottom: 1px solid var(--lv-border, #e2e8f0);
  gap: 12px;
  align-items: center;
}
.lv-cart-item:last-child { border-bottom: none; }

/* Thumbnail */
.lv-cart-item__thumb {
  flex-shrink: 0;
  display: block;
  width: 72px;
  height: 72px;
  border-radius: var(--lv-radius, 8px);
  overflow: hidden;
  background: var(--lv-light, #f8fafc);
  margin-left: 4px;
}
.lv-cart-item__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Content (name + meta + foot) */
.lv-cart-item__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.lv-cart-item__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--lv-dark, #0D1B4B);
  text-decoration: none;
  line-height: 1.3;
  display: block;
}
.lv-cart-item__name:hover { color: var(--lv-primary, #1B3EAA); }
.lv-cart-item__badge { margin-left: 4px; font-size: 12px; }
.lv-cart-item__meta {
  font-size: 12px;
  color: var(--lv-muted, #6c757d);
  line-height: 1.3;
}

/* Bottom row: [qty | unit price] ...... [total | remove] — two tight
   sub-groups (each hugs its own content) so unit-price digits never
   change how far the qty/total groups sit from each other. */
.lv-cart-item__foot {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lv-cart-item__foot-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lv-cart-item__foot-row--action {
  margin-left: auto;
}
.lv-cart-item__price {
  font-size: 12px;
  color: var(--lv-muted, #6c757d);
}
.lv-cart-item__total {
  font-size: 15px;
  font-weight: 700;
  color: var(--lv-primary, #1B3EAA);
}

/* Quantity stepper */
.lv-cart-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--lv-border, #e2e8f0);
  border-radius: 20px;
  overflow: hidden;
  height: 28px;
}
.lv-cart-qty__btn {
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--lv-dark, #0D1B4B);
  transition: background .15s, color .15s;
  padding: 0;
  flex-shrink: 0;
}
.lv-cart-qty__btn:hover:not(:disabled) {
  background: var(--lv-primary, #1B3EAA);
  color: #fff;
}
.lv-cart-qty__btn:disabled { opacity: .35; cursor: default; }
.lv-cart-qty__input {
  width: 32px;
  height: 28px;
  border: none;
  border-left: 1px solid var(--lv-border, #e2e8f0);
  border-right: 1px solid var(--lv-border, #e2e8f0);
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--lv-dark, #0D1B4B);
  background: none;
  outline: none;
  padding: 0;
}

/* Remove button */
.lv-cart-item__remove {
  width: 26px;
  height: 26px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--lv-muted, #6c757d);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background .15s, color .15s;
  padding: 0;
}
.lv-cart-item__remove:hover {
  background: #fee2e2;
  color: #dc3545;
}

/* On narrow phones (Oppo/S10-class, ~360-412px) qty+price and total+remove
   no longer fit on one shared line. Stack the two sub-groups instead of
   letting the outer row wrap — each keeps hugging its own content, so
   there's never a stray gap or an edge overflow regardless of how wide
   the price/total digits are. */
@media (max-width: 480px) {
  .lv-cart-item__foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .lv-cart-item__foot-row--action {
    margin-left: 0;
  }
}

/* ── Totals ──────────────────────────────────────────── */
.custom-cart-total {
  border: 1px solid var(--lv-border, #e2e8f0);
  border-radius: var(--lv-radius-lg, 12px);
  overflow: hidden;
  background: #fff;
  margin-bottom: 16px;
}
.custom-cart-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--lv-border, #e2e8f0);
  font-size: 14px;
}
.custom-cart-total-row:last-child { border-bottom: none; }
.custom-cart-total-final {
  background: var(--lv-light, #f8fafc);
  font-size: 16px;
}
.custom-cart-total-value { font-weight: 700; color: var(--lv-primary, #1B3EAA); }
.custom-cart-total-final .custom-cart-total-value { font-size: 20px; }

/* ── Accordion panels (coupon / reward / voucher / shipping) ── */
.lv-total-panel {
  border: 1px solid var(--lv-border, #e2e8f0);
  border-radius: var(--lv-radius-lg, 12px);
  margin-bottom: 8px;
  background: #fff;
  overflow: hidden;
}
.lv-total-panel-header {
  padding: 0;
}
.lv-panel-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--lv-dark, #0D1B4B);
  text-decoration: none;
  background: var(--lv-light, #f8fafc);
  border-radius: var(--lv-radius-lg, 12px);
  transition: background .15s, color .15s;
}
.lv-panel-toggle:hover {
  background: var(--lv-border, #e2e8f0);
  color: var(--lv-primary, #1B3EAA);
}
.lv-panel-toggle .bi-chevron-down {
  transition: transform .25s;
  flex-shrink: 0;
}
.lv-panel-toggle:not(.collapsed) {
  background: #fff;
  border-bottom: 1px solid var(--lv-border, #e2e8f0);
  border-radius: var(--lv-radius-lg, 12px) var(--lv-radius-lg, 12px) 0 0;
  color: var(--lv-primary, #1B3EAA);
}
.lv-panel-toggle:not(.collapsed) .bi-chevron-down {
  transform: rotate(-180deg);
}
.lv-total-panel-body {
  padding: 14px 16px;
}
.lv-total-panel-body .form-control::placeholder {
  color: #b0b8c1;
  font-weight: 400;
}

/* ── Payment updating ───────────────────────────────── */
#custom-payment {
  transition: opacity 0.25s ease;
}
#custom-payment.lv-updating {
  opacity: 0.4;
  pointer-events: none;
}

/* ── Order button ────────────────────────────────────── */
.lv-btn-order {
  width: 100%;
  justify-content: center;
}

/* ── Checkout control area ───────────────────────────── */
.lv-checkout-control {
  border: 1px solid var(--lv-border, #e2e8f0);
  border-radius: var(--lv-radius-lg, 12px);
  padding: 16px 20px;
  background: #fff;
}

/* ── Auto-registration notice — info look WITHOUT .alert class ──
   Not a Bootstrap .alert, so global $('.alert').remove() (cart/shipping
   updates, checkout steps) can never wipe it. Spacing from utilities. */
.lv-registration-notice {
  color: #055160;
  background-color: #cff4fc;
  border: 1px solid #b6effb;
  border-radius: .375rem;
}

/* ── Shipping autocomplete dropdown (Nova Poshta / Ukrposhta / …) ──────────
   Restyles the module's fixed markup (<ul.dropdown-address><li><a>) without
   touching the module. shippingdata.css is added after this file, so the
   #custom-shipping prefix is what wins - it beats the module's bare
   ul.dropdown-address selectors on specificity regardless of load order. */

/* Anchor the absolutely-positioned <ul> to its own field wrapper so it lines up
   under the input and takes its width from the field, not a distant ancestor. */
#custom-shipping .mb-3 { position: relative; }

#custom-shipping ul.dropdown-address {
  box-sizing: border-box;
  width: 100%;
  left: 0 !important;
  margin: 4px 0 0;
  padding: 4px;
  max-height: 260px;
  background: var(--lv-white, #fff);
  border: 1px solid var(--lv-border, #c9d1e5);
  border-radius: var(--lv-radius, 10px);
  box-shadow: var(--lv-shadow-md, 0 4px 20px rgba(27, 62, 170, .12));
  z-index: 1050;
}
/* The module creates the <ul> visible and only fills it once the ajax returns —
   hide it while empty so the first click doesn't flash a bare 4px box. */
#custom-shipping ul.dropdown-address:empty { display: none !important; }

#custom-shipping .dropdown-address li {
  list-style: none;
  border-radius: 6px;
}
#custom-shipping .dropdown-address li:hover {
  background: color-mix(in srgb, var(--lv-accent, #f5400a) 8%, transparent);
}
#custom-shipping .dropdown-address li a {
  display: block;
  padding: .55em .8em;
  font-size: 14px;
  line-height: 1.4;
  color: var(--lv-body, #2d3748);
  text-decoration: none;
  white-space: normal;
  word-break: break-word;
}
#custom-shipping .dropdown-address li:hover a,
#custom-shipping .dropdown-address li a:hover {
  color: var(--lv-accent, #f5400a);
}
/* Slim scrollbar to match the panel */
#custom-shipping ul.dropdown-address::-webkit-scrollbar { width: 8px; }
#custom-shipping ul.dropdown-address::-webkit-scrollbar-thumb {
  background: var(--lv-border, #c9d1e5);
  border-radius: 999px;
}

/* ==========================================================================
   Ported from cartello.localhost — Nova Poshta / Ukrposhta checkout + EVA-style
   shared city picker. Kept the "st-" prefix used by the source implementation
   for these brand-new components (no naming collision either way — see port
   report for why a full lv- rename wasn't done). Colors/spacing remapped to
   this theme's own --lv-* tokens instead of cartello's --color-* / --space-* ones.
   ========================================================================== */

/* ── Спосіб доставки — кожна опція як окрема картка-варіант ─────────────── */
.lv-page-form .st-shipping-option {
  display: flex !important;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--lv-border, #e2e8f0);
  border-radius: var(--lv-radius-lg, 12px);
  padding: 12px 16px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.lv-page-form .st-shipping-option:last-child { margin-bottom: 0; }
/* Bootstrap's .form-check-input is float:left with a negative margin-left
   sized for .form-check's own 1.5em padding-left gutter — this card overrides
   that padding with its own `padding: 12px 16px` above, so the float's
   negative margin pulled the radio out past the card's left edge instead of
   sitting in a gutter that no longer exists. With the row now flex, `gap`
   handles all the spacing itself — floats don't apply to flex items, but the
   stray margin/float still need clearing so they don't fight the gap.
   !important on all three: this exact element/property trio was still losing
   the cascade somewhere between server and browser for one tester even after
   a hard refresh — pinning it removes any remaining specificity/order doubt. */
.lv-page-form .st-shipping-option .form-check-input {
  float: none !important;
  margin: 0 !important;
  flex: none !important;
}
.lv-page-form .st-shipping-option:hover { border-color: var(--lv-primary, #1B3EAA); }
.lv-page-form .st-shipping-option.is-selected {
  border-color: var(--lv-primary, #1B3EAA);
  background: color-mix(in srgb, var(--lv-primary, #1B3EAA) 6%, transparent);
}
.st-shipping-option__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--lv-light, #f8fafc);
  color: var(--lv-muted, #6c757d);
  font-size: 1rem;
  flex: none;
}
.lv-page-form .st-shipping-option.is-selected .st-shipping-option__icon {
  background: var(--lv-primary, #1B3EAA);
  color: #fff;
}
/* Офіційні бренд-лого (НП/Укрпошта) — власний колір, не перефарбовуємо під
   primary при виборі (card вже дає власну border/bg підказку вибору). */
.st-shipping-option__icon--logo,
.lv-page-form .st-shipping-option.is-selected .st-shipping-option__icon--logo {
  background: #fff;
  border: 1px solid var(--lv-border, #e2e8f0);
}
.st-shipping-option__icon--logo img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.st-shipping-option__label { flex: 1; }

/* ── Спільне поле "Місто" (shipping_city.js) — Rozetka-style persistent card ── */
.st-shipping-city-card {
  border: 1px solid var(--lv-border, #e2e8f0);
  border-radius: var(--lv-radius-lg, 12px);
  padding: 16px;
  margin-bottom: 16px;
  background: #fff;
}
.st-shipping-city-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.st-shipping-city-card__info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.st-shipping-city-card__label {
  font-size: 11px;
  color: var(--lv-muted, #6c757d);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.st-shipping-city-card__value {
  font-size: 14px;
  font-weight: 600;
  color: var(--lv-dark, #0D1B4B);
}
.st-shipping-city-card__change {
  flex: none;
  padding: 0;
  border: none;
  background: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--lv-primary, #1B3EAA);
  cursor: pointer;
}
.st-shipping-city-card__change:hover { text-decoration: underline; }

.st-shipping-city-editor {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.st-shipping-city-editor .st-shipping-city-card__label {
  display: block;
  margin-bottom: 4px;
}
/* Коли картка згорнута (summary-рядок видно) і редактор відкритий поверх
   нього через "Змінити" — відділяємо його лінією, як експандер під рядком.
   У відкритому (EVA) стані редактор — єдиний вміст картки, лінія не потрібна. */
.st-shipping-city-card.is-collapsed .st-shipping-city-editor {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--lv-border, #e2e8f0);
}
/* select2 рахує width:'100%' у момент ініціалізації (document ready), коли
   #custom-shipping-city-editor ще display:none — контейнер тоді має нульову
   ширину, і select2 запам'ятовує неправильне значення inline-стилем, який
   потім сам не перераховує. Перебиваємо !important, бо інакше звичайний
   клас програє inline style. Той самий страховий трюк — для піквера точки
   видачі НП (.ocnp-point-group) і відділень Укрпошти (#st_ukrposhta_branch),
   де select2 теж ініціалізується до показу контейнера. */
.st-shipping-city-editor .select2-container,
.ocnp-point-group .select2-container,
#st_ukrposhta_branch .select2-container {
  width: 100% !important;
}

/* select2 за замовчуванням малює свій "селект" висотою 28px (жорстко у власному
   CSS), що не збігається з висотою звичайних .form-control на цій сторінці —
   рамка виглядає нижчою/куцою поряд з іншими полями. Підганяємо під ту саму
   формулу. Стосується міста й обох піквера точок видачі. */
.lv-page-form .select2-container--default .select2-selection--single {
  height: auto;
  padding: 0.6em 0.9em;
  border: 1px solid var(--lv-border, #e2e8f0);
  border-radius: var(--lv-radius, 8px);
}
.lv-page-form .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0;
  line-height: 1.5;
  color: var(--lv-body, #2d3748);
  font-size: 14px;
}
.lv-page-form .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  top: 0;
  right: 0.6em;
}
.lv-page-form .select2-container--default.select2-container--open .select2-selection--single,
.lv-page-form .select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--lv-primary, #1B3EAA);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lv-primary, #1B3EAA) 15%, transparent);
}
.st-shipping-city-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.st-city-preset {
  display: inline-flex;
  align-items: center;
  padding: 0.4em 0.9em;
  font-size: 13px;
  font-weight: 500;
  color: var(--lv-dark, #0D1B4B);
  background: var(--lv-light, #f8fafc);
  border: 1px solid var(--lv-border, #e2e8f0);
  border-radius: 999px;
  cursor: pointer;
  transition: all .15s;
}
.st-city-preset:hover {
  background: var(--lv-primary, #1B3EAA);
  border-color: var(--lv-primary, #1B3EAA);
  color: #fff;
}

/* ── Точка видачі перевізника, приєднана прямо під обраним способом
   доставки (shipping.twig::attachShippingPointPanel) — не окремий блок
   унизу всього списку методів. ─────────────────────────────────────────── */
.st-shipping-point-panel {
  margin: 0 0 12px 0;
  padding: 12px 16px;
  background: var(--lv-light, #f8fafc);
  border-left: 3px solid var(--lv-primary, #1B3EAA);
  border-radius: 0 var(--lv-radius, 8px) var(--lv-radius, 8px) 0;
}
.st-shipping-point-panel .form-group { margin-bottom: 12px; }
.st-shipping-point-panel .form-group:last-child { margin-bottom: 0; }
.st-shipping-point-hint {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--lv-muted, #6c757d);
}
.st-shipping-point-panel label {
  font-size: 14px;
  font-weight: 500;
  color: var(--lv-dark, #0D1B4B);
  display: block;
  margin-bottom: 4px;
}

/* ── Empty cart state ─────────────────────────────────────────────────────
   Кошик порожній -> column_left рендерить лише іконку+текст+кнопку, і без
   min-height рядок одразу під хлібними крихтами схлопується до пари рядків
   тексту (стрибок header -> footer майже впритул). */
.st-empty-col {
  min-height: 400px;
}
.st-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 4rem 16px;
  min-height: 400px;
  justify-content: center;
}
.st-empty-state__icon {
  width: 4.5rem;
  height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--lv-light, #f8fafc);
  color: var(--lv-muted, #6c757d);
  font-size: 2rem;
  margin-bottom: 8px;
}
.st-empty-state__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--lv-dark, #0D1B4B);
  margin: 0;
}
.st-empty-state__hint {
  color: var(--lv-muted, #6c757d);
  margin: 0;
  max-width: 32em;
}
.st-empty-state__cta {
  margin-top: 8px;
}

/* ── "Увійти щоб швидко заповнити свої дані" banner (EVA-style): highlighted
   box with a real button. ───────────────────────────────────────────────── */
.lv-auth-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--lv-light, #f8fafc);
  border-radius: var(--lv-radius, 8px);
  padding: 12px 16px;
  font-size: 13px;
  color: var(--lv-muted, #6c757d);
}
/* .btn-lv-buy (livenza.css) is the big product "buy" button — 14px/36px
   padding, 16px/800-weight text. It loads after this file, and at equal
   specificity (single class) that padding was winning over the smaller one
   meant for this compact inline banner, blowing the "Log in" pill up to
   full buy-button size. Compound the selector with .btn-lv-buy itself
   (0,2,0) to out-rank it regardless of file order. */
.lv-auth-links__btn.btn-lv-buy {
  flex-shrink: 0;
  padding: 0.5em 1.1em;
  font-size: 13px;
  font-weight: 700;
}
/* Narrow screens: heading + banner no longer fit side by side without
   squeezing both into unreadably narrow columns (heading wrapping word by
   word, banner text wrapping 3-4 lines around the button). Let the row wrap
   and give the banner its own full-width line below the heading instead. */
@media (max-width: 575.98px) {
  .custom-legend.d-flex {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .lv-auth-links {
    flex: 1 1 100%;
  }
}