/* ===========================================================================
   80-checkout — the one-page checkout (M8), in the same measured oct_promo
   vocabulary as 70-cart: white r12 cards on the #f3f3f3 page, navy primaries,
   the cart's .vk-ci row anatomy and .vk-cart-total-row totals reused in the
   right-hand order rail. Reference recon: r4-checkout-1440.png in
   design/clone/docs/research/octemplates-cart/.
   =========================================================================== */

#checkout-checkout .breadcrumb{
  --bs-breadcrumb-divider:'›';
  font-size:12px;line-height:18px;font-weight:400;margin:16px 0 0;padding:0;
}
#checkout-checkout .breadcrumb a{color:var(--pr-links-color)}
#checkout-checkout .breadcrumb-item:last-child a{color:var(--pr-grey-color);pointer-events:none}
#checkout-checkout .breadcrumb-item+.breadcrumb-item::before{color:var(--pr-grey-color)}
#checkout-checkout{padding-bottom:32px}

.vk-co-layout{
  display:grid;grid-template-columns:minmax(0,1fr) 384px;gap:16px;
  align-items:start;margin-top:16px;
}
.vk-co-main{min-width:0;display:flex;flex-direction:column;gap:16px}
.vk-co-main h1{font-size:24px;line-height:36px;font-weight:700;margin:0}

.vk-co-card{background:#fff;border-radius:12px;padding:24px}
.vk-co-step{
  display:flex;align-items:center;gap:10px;
  font-size:16px;line-height:24px;font-weight:700;margin:0 0 16px;
}
.vk-co-step-n{
  width:26px;height:26px;flex:0 0 26px;border-radius:50%;
  background:var(--pr-primary-dark-color);color:#fff;
  font-size:13px;font-weight:600;display:grid;place-items:center;
}

/* --- fields ---------------------------------------------------------------- */
.vk-co-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.vk-field{display:flex;flex-direction:column;gap:6px;position:relative}
.vk-field label{font-size:12px;line-height:18px;font-weight:600;color:var(--pr-dark-text-color)}
.vk-field input,.vk-field select,.vk-field textarea{
  min-height:44px;padding:10px 14px;font-size:13px;
}
.vk-field textarea{min-height:0;resize:vertical}
.vk-field input.vk-invalid,.vk-field select.vk-invalid{border-color:var(--pr-red-color)}
.vk-field-hint{font-size:11px;line-height:16px;color:var(--pr-grey-color)}
.vk-field-err{display:none;font-size:12px;line-height:18px;color:var(--pr-red-color)}
.vk-field-err.on{display:block}

/* --- option cards (delivery + payment) ------------------------------------- */
.vk-co-opts{display:flex;flex-direction:column;gap:10px}
.vk-co-opt{border:2px solid var(--pr-border);border-radius:8px;transition:border-color var(--pr-main-transition)}
.vk-co-opt.open{border-color:var(--pr-primary-light-color)}
.vk-co-opt-head{
  display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;
  font-size:14px;line-height:21px;font-weight:500;margin:0;
}
.vk-co-opt-head input{position:absolute;opacity:0;pointer-events:none}
.vk-co-radio{
  width:18px;height:18px;flex:0 0 18px;border-radius:50%;
  border:2px solid var(--pr-light-grey-color);background:#fff;
  transition:border-color var(--pr-main-transition);position:relative;
}
.vk-co-opt-head input:checked ~ .vk-co-radio{border-color:var(--pr-primary-dark-color)}
.vk-co-opt-head input:checked ~ .vk-co-radio::after{
  content:'';position:absolute;inset:3px;border-radius:50%;
  background:var(--pr-primary-dark-color);
}
.vk-co-opt-name{flex:1 1 auto;min-width:0}
.vk-co-opt-price{font-weight:600;white-space:nowrap;color:var(--pr-dark-text-color)}
.vk-co-free{color:var(--pr-green-color)}
.vk-co-opt-panel{display:none;padding:0 16px 16px;flex-direction:column;gap:12px}
.vk-co-opt.open .vk-co-opt-panel{display:flex}

/* sub-mode toggle: відділення / кур'єр */
.vk-co-modes{display:flex;gap:8px;flex-wrap:wrap}
.vk-co-modes button{
  border:0;border-radius:8px;background:var(--pr-bg);color:var(--pr-dark-text-color);
  font-family:inherit;font-size:13px;line-height:20px;font-weight:500;
  padding:9px 14px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  transition:background-color var(--pr-main-transition),color var(--pr-main-transition);
}
.vk-co-modes button.on{background:var(--pr-primary-dark-color);color:#fff}
.vk-co-modes .vk-co-mode-price{font-weight:600;font-size:12px}
.vk-co-modes button.on .vk-co-mode-price{color:#fff}

/* NP city autocomplete dropdown */
#np-city-list{
  display:none;position:absolute;top:100%;left:0;right:0;z-index:1050;
  background:#fff;border-radius:8px;box-shadow:rgba(12,43,106,.12) 0 6px 24px 0;
  max-height:260px;overflow-y:auto;margin-top:4px;
}
#np-city-list .np-city-item{
  display:block;width:100%;text-align:left;border:0;background:none;cursor:pointer;
  padding:10px 14px;font-family:inherit;font-size:13px;line-height:20px;color:var(--pr-dark-text-color);
  transition:background-color var(--pr-main-transition);
}
#np-city-list .np-city-item:hover{background:var(--pr-bg)}

.vk-co-pickup-address{
  display:flex;gap:10px;align-items:flex-start;margin:0;
  background:var(--pr-bg);border-radius:8px;padding:12px 16px;
  font-size:13px;line-height:20px;color:var(--pr-dark-grey-color);
}
.vk-co-pickup-address i{color:var(--pr-primary-dark-color);margin-top:3px}

/* --- right rail ------------------------------------------------------------ */
.vk-co-rail .vk-cart-rail-title{margin-bottom:4px}
.vk-co-items{display:flex;flex-direction:column;margin-bottom:4px}
.vk-co-items .vk-ci{padding:12px 0}
.vk-co-items .vk-ci-img{flex-basis:64px}
.vk-co-items .vk-ci-img img,.vk-co-items .vk-ci-img .pr-noimg{width:60px;height:60px}
.vk-co-items .vk-ci-info{padding-right:0}
.vk-co-ci-bottom{display:flex;align-items:baseline;gap:12px;margin-top:6px}
.vk-co-ci-bottom .vk-ci-unit{font-size:13px}
.vk-co-ci-bottom .vk-ci-line-total{margin-left:auto;font-size:15px;line-height:22px;font-weight:700}

.vk-co-totals{border-top:1px solid var(--pr-border)}

/* the payment extension's confirm block: hidden — its #button-confirm is
   auto-triggered; .vk-show reveals it as the manual fallback */
.vk-co-payarea{display:none}
.vk-co-payarea.vk-show{display:block;margin-top:12px}
.vk-co-payarea fieldset{border:0;padding:0;margin:0}
.vk-co-payarea legend{font-size:14px;font-weight:700;margin-bottom:8px}
.vk-co-payarea .btn-primary{
  display:inline-flex;align-items:center;justify-content:center;width:100%;
  background:var(--pr-primary-dark-color);border:0;border-radius:8px;color:#fff;
  font-size:14px;font-weight:600;min-height:44px;padding:10px 16px;
}
.vk-co-payarea .btn-primary:hover{background:#0a2158}
.vk-co-payhint{font-size:12px;line-height:18px;color:var(--pr-dark-grey-color);margin:0 0 8px}

#vk-co-submit{margin-top:16px;height:48px}
#vk-co-submit:disabled{opacity:.65;cursor:wait}
.vk-co-error{
  margin-top:12px;background:#fdecec;border-radius:8px;padding:10px 14px;
  font-size:13px;line-height:20px;color:var(--pr-red-color);
}
.vk-co-terms{font-size:11px;line-height:16px;color:var(--pr-grey-color);margin:12px 0 0}

/* --- carrier-paid delivery ------------------------------------------------- */
/* «за тарифами перевізника» where a price used to be — quiet, not a number */
.vk-co-tariff{font-weight:400;font-size:11px;line-height:14px;color:var(--pr-grey-color);white-space:normal;text-align:right;max-width:110px}
.vk-co-modes button .vk-co-tariff{max-width:none;text-align:left}
.vk-co-modes button.on .vk-co-tariff{color:rgba(255,255,255,.75)}

/* --- the AI-консультант bubble --------------------------------------------- */
/* it floats over the rail's terms line under the confirm button — same
   collision the cart drawer had (70-cart.css hides it while the drawer is
   open); here it is hidden for the whole checkout page */
body.vk-co-page .os24adv-bubble,
body.vk-co-page .os24adv-panel{display:none !important}

/* --- upsell ---------------------------------------------------------------- */
/* the last block in the rail, below the confirm button, terms and edit-cart —
   patiently waiting on the side; three switchable variants (a / b / c) */
.vk-upsell{margin-top:16px;border-top:1px solid var(--pr-border);padding-top:14px}
.vk-upsell-title{font-size:13px;line-height:20px;font-weight:700;margin:0 0 10px;color:var(--pr-dark-text-color)}
.vk-upsell-img{flex:0 0 48px}
.vk-upsell-img img{width:48px;height:48px;object-fit:contain;border-radius:6px;background:#fff}
.vk-upsell-row{display:flex;align-items:center;gap:10px;padding:8px 0}
.vk-upsell-row + .vk-upsell-row{border-top:1px solid var(--pr-bg)}
.vk-upsell-info{flex:1 1 auto;min-width:0}
.vk-upsell-name{font-size:12px;line-height:16px;font-weight:500;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vk-upsell-name a{color:var(--pr-dark-text-color)}
.vk-upsell-name a:hover{color:var(--pr-links-color)}
.vk-upsell-price{font-size:13px;line-height:18px;font-weight:600;margin-top:2px}
.vk-upsell-row .vk-upsell-add{
  flex:0 0 32px;width:32px;height:32px;border:0;border-radius:8px;cursor:pointer;
  background:var(--pr-bg);color:var(--pr-dark-text-color);font-size:13px;
  display:grid;place-items:center;
  transition:background-color var(--pr-main-transition),color var(--pr-main-transition);
}
.vk-upsell-row .vk-upsell-add:hover{background:var(--pr-primary-dark-color);color:#fff}
.vk-upsell-row .vk-upsell-add:disabled{opacity:.5;cursor:wait}

/* variant b: one card at a time */
.vk-upsell-slide{display:none;text-align:center}
.vk-upsell-slide.on{display:block}
.vk-upsell-slide .vk-upsell-img{display:inline-block}
.vk-upsell-slide .vk-upsell-img img{width:96px;height:96px}
.vk-upsell-slide-name{font-size:12px;line-height:16px;font-weight:500;margin:8px 0 2px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vk-upsell-slide-name a{color:var(--pr-dark-text-color)}
.vk-upsell-slide-price{font-size:14px;font-weight:700;margin-bottom:10px}
.vk-upsell-slide .vk-upsell-add{font-size:12px;min-height:36px}
.vk-upsell-nav{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:10px}
.vk-upsell-nav button{
  width:28px;height:28px;border:0;border-radius:8px;background:var(--pr-bg);cursor:pointer;
  color:var(--pr-dark-text-color);font-size:11px;display:grid;place-items:center;
}
.vk-upsell-nav button:hover{background:var(--pr-primary-dark-color);color:#fff}
.vk-upsell-count{font-size:11px;color:var(--pr-grey-color)}

/* variant c: collapsed strip */
.vk-upsell-toggle{
  width:100%;border:0;background:var(--pr-bg);border-radius:8px;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:10px 14px;font-family:inherit;font-size:12px;line-height:18px;font-weight:600;
  color:var(--pr-dark-text-color);margin-bottom:10px;
  transition:background-color var(--pr-main-transition);
}
.vk-upsell-toggle:hover{background:#e9e9e9}
.vk-upsell-toggle .fa-chevron-down{transition:transform var(--pr-main-transition);font-size:11px}
.vk-upsell-c.vk-upsell-collapsed .vk-upsell-list{display:none}
.vk-upsell-c.vk-upsell-collapsed .vk-upsell-toggle{margin-bottom:0}
.vk-upsell-c:not(.vk-upsell-collapsed) .vk-upsell-toggle .fa-chevron-down{transform:rotate(180deg)}

/* --- order success page ----------------------------------------------------
   «Ваше замовлення прийнято», redesigned 2026-08-11. Same vocabulary as the
   checkout: .vk-co-card whites, .vk-co-step-n numbered circles, the rail is a
   .vk-cart-rail with .vk-ci rows and .vk-cart-total-row totals. The page's own
   classes are vk-su-*. */
#checkout-success .breadcrumb{
  --bs-breadcrumb-divider:'›';
  font-size:12px;line-height:18px;font-weight:400;margin:16px 0 0;padding:0;
}
#checkout-success .breadcrumb a{color:var(--pr-links-color)}
#checkout-success .breadcrumb-item:last-child a{color:var(--pr-grey-color);pointer-events:none}
#checkout-success .breadcrumb-item+.breadcrumb-item::before{color:var(--pr-grey-color)}
#checkout-success{padding-bottom:32px}

.vk-su-layout{
  display:grid;grid-template-columns:minmax(0,1fr) 384px;gap:16px;
  align-items:start;margin-top:16px;
}
.vk-su-layout.vk-su-solo{grid-template-columns:minmax(0,1fr)}
.vk-su-main{min-width:0;display:flex;flex-direction:column;gap:16px}

/* hero: check mark + heading + the order number as the page's anchor fact */
.vk-su-hero{display:flex;gap:16px;align-items:flex-start}
.vk-su-check{
  width:52px;height:52px;flex:0 0 52px;border-radius:50%;
  background:var(--pr-primary-dark-color);color:#fff;
  font-size:22px;display:grid;place-items:center;
}
.vk-su-hero-body{min-width:0}
.vk-su-hero h1{font-size:24px;line-height:36px;font-weight:700;margin:2px 0 10px}
.vk-su-no{
  display:inline-flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  background:var(--pr-bg);border-radius:8px;padding:8px 16px;
  font-size:15px;line-height:22px;font-weight:500;
}
.vk-su-no b{font-size:18px;font-weight:700;color:var(--pr-primary-dark-color);white-space:nowrap}
.vk-su-date{font-size:12px;color:var(--pr-grey-color)}
.vk-su-keep{font-size:13px;line-height:20px;color:var(--pr-dark-grey-color);margin:10px 0 0}
.vk-su-note{
  display:flex;gap:10px;align-items:flex-start;
  background:var(--pr-bg);border-radius:8px;padding:12px 16px;
  font-size:13px;line-height:20px;font-weight:400;color:var(--pr-dark-grey-color);
  margin:12px 0 0;
}
.vk-su-note i{color:var(--pr-primary-dark-color);margin-top:3px}
.vk-su-note b{color:var(--pr-dark-text-color)}

/* «Що буде далі» — a quiet vertical timeline of numbered circles */
.vk-su-steps{display:flex;flex-direction:column}
.vk-su-step{display:flex;gap:12px}
.vk-su-step-side{display:flex;flex-direction:column;align-items:center;flex:0 0 26px}
.vk-su-step-line{flex:1 1 auto;width:2px;background:var(--pr-border);margin:4px 0;min-height:12px}
.vk-su-step-body{min-width:0;padding-bottom:18px}
.vk-su-step:last-child .vk-su-step-body{padding-bottom:0}
.vk-su-step-title{font-size:14px;line-height:21px;font-weight:700;margin-top:2px}
.vk-su-step-text{font-size:13px;line-height:20px;color:var(--pr-dark-grey-color);margin-top:2px}

/* contacts: one tap from a human */
.vk-su-help-line{font-size:13px;line-height:20px;color:var(--pr-dark-grey-color);margin:0 0 14px}
.vk-su-contacts{display:flex;gap:10px;flex-wrap:wrap}
.vk-su-contacts .vk-btn i{font-size:16px}
.vk-su-warm{
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  border-top:1px solid var(--pr-border);margin-top:16px;padding-top:14px;
  font-size:13px;line-height:20px;color:var(--pr-dark-grey-color);
}
.vk-su-warm-icons{display:inline-flex;gap:10px;color:var(--pr-primary-dark-color);font-size:16px}

/* the rail: the record they may never receive by mail */
.vk-su-rail .vk-co-items{margin-top:8px}
/* method rows are quiet meta even when one of them lands :last-child, and the
   long method names must WRAP — `.vk-cart-total-row .v` is nowrap at 0,2,0 and
   `.vk-cart-total-row:last-child` bolds at 0,2,0, so both need outranking */
.vk-su-rail .vk-cart-weight-row{padding-top:6px;font-size:12px}
.vk-su-rail .vk-cart-weight-row .t,
.vk-su-rail .vk-cart-weight-row .v{font-size:12px;font-weight:400;color:var(--pr-grey-color)}
.vk-su-rail .vk-cart-total-row .v.vk-su-method{white-space:normal;text-align:right;min-width:0}
.vk-su-continue{margin-top:16px}
.vk-su-solo-continue{margin-top:0}

/* --- responsive ------------------------------------------------------------ */
@media (max-width:1199px){
  .vk-co-layout{grid-template-columns:minmax(0,1fr) 340px}
  .vk-su-layout{grid-template-columns:minmax(0,1fr) 340px}
  .vk-su-layout.vk-su-solo{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:991px){
  .vk-co-layout{grid-template-columns:1fr}
  .vk-su-layout{grid-template-columns:1fr}
  .vk-cart-rail.vk-co-rail{position:static}
  .vk-cart-rail.vk-su-rail{position:static}

  /* «Рекомендуємо додати» moves up on a phone.
     On a desktop the rail is a column you take in at a glance, so the upsell
     sitting last — below the confirm button — stays visible and out of the way.
     Stacked on a 390px screen that same position lands it at y≈1934 of a
     3,700px page, BELOW the confirm button and past the point anyone scrolls:
     Hlib's report was that it is "somewhere underneath where you cannot even
     scroll". Reordering puts it directly under the order contents and above
     the button — beside the items it is meant to accompany, and seen before
     the decision rather than after it.
     Desktop keeps the DOM order untouched; this is a flex reorder only. */
  .vk-cart-rail.vk-co-rail{display:flex;flex-direction:column}
  .vk-co-rail .vk-cart-rail-title{order:1}
  .vk-co-rail .vk-co-items      {order:2}
  .vk-co-rail #checkout-confirm {order:3}
  .vk-co-rail #vk-upsell-slot   {order:4}
  .vk-co-rail #vk-co-submit     {order:5}
  .vk-co-rail #vk-co-alert      {order:6}
  .vk-co-rail .vk-co-terms      {order:7}
  .vk-co-rail .vk-cart-continue {order:8}
}
@media (max-width:575px){
  .vk-co-card{padding:16px}
  .vk-co-grid{grid-template-columns:1fr}
  .vk-co-main h1{font-size:20px;line-height:30px}
  .vk-su-hero{gap:12px}
  .vk-su-check{width:44px;height:44px;flex-basis:44px;font-size:18px}
  .vk-su-hero h1{font-size:20px;line-height:30px;margin-top:0}
  .vk-su-contacts .vk-btn{flex:1 1 100%}
}