/* ==========================================================================
   SOLPOWER — Checkout re-skin (Variant A: desktop two-column + mobile)
   Design tokens + reusable component classes for «Оформление заказа».
   Pixel-faithful to docs/superpowers/design-refs/checkout/*.
   Markup (Task 2) and JS (Task 3) reuse the class names defined here.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&display=swap');

/* --------------------------------------------------------------------------
   Design tokens — scoped to .np-checkout so the rest of the site is untouched.
   -------------------------------------------------------------------------- */
.np-checkout {
  /* Brand / accents */
  --np-brand: #F5731F;          /* оранжевый бренд (логотип, цена, акценты) */
  --np-brand-light: #FF9F33;    /* оранжевый светлый (градиент/иконки) */
  --np-brand-ring: #F58220;     /* фокус-обводка / активная граница */
  --np-brand-bg: #FFF4E8;       /* оранжевый фон-подложка */
  --np-brand-bg-2: #FFF8F0;     /* оранжевый фон-подложка (вторичный) */

  /* CTA (вариант A — фиолетовый) */
  --np-cta-from: #8E36A2;
  --np-cta-to: #6E2380;
  --np-cta-shadow: 0 8px 22px rgba(110, 35, 128, .32);
  --np-cta-shadow-hover: 0 12px 28px rgba(110, 35, 128, .42);

  /* Links / success */
  --np-link: #159FB0;           /* бирюзовая ссылка «Продолжить покупки» */
  --np-success-from: #27B96C;
  --np-success-to: #1B9E5A;

  /* Text */
  --np-text: #141728;           /* текст основной */
  --np-text-2: #1E2330;         /* текст основной (вариант) */
  --np-text-3: #171B26;         /* текст инпутов */
  --np-label: #3A4151;          /* подпись поля */
  --np-secondary: #6B7280;      /* текст вторичный */
  --np-secondary-2: #8A909C;    /* текст вторичный (вариант) */
  --np-muted: #9AA1AD;          /* приглушённый / плейсхолдер */
  --np-muted-2: #A0A6B0;        /* плейсхолдер (вариант) */
  --np-active-text: #C2640F;    /* активная кнопка доставки — текст */
  --np-toggle-off-text: #5A6172;/* неактивная кнопка доставки — текст */

  /* Borders / dividers / surfaces */
  --np-input-border: #E4E7EC;   /* граница инпута */
  --np-card-border: #ECEEF2;    /* граница карточки */
  --np-divider: #F0F1F4;        /* разделитель */
  --np-divider-2: #EEF0F3;      /* разделитель (вариант) */
  --np-soft-bg: #FAFBFC;        /* фон-подложка карточек */
  --np-soft-bg-2: #F9FAFB;      /* фон-подложка (поиск) */

  /* Radii */
  --np-r-input: 12px;           /* инпут */
  --np-r-card: 20px;            /* карточка-секция */
  --np-r-frame: 24px;           /* карточка-фрейм */
  --np-r-cta: 14px;             /* кнопка CTA */
  --np-r-row: 9px;              /* строка списка */

  /* Shadows */
  --np-shadow-frame: 0 1px 3px rgba(0, 0, 0, .08);
  --np-shadow-summary: 0 12px 34px rgba(20, 23, 40, .06);
  --np-shadow-picker: 0 18px 40px rgba(20, 23, 40, .16);
  --np-shadow-mobilebar: 0 -8px 24px rgba(20, 23, 40, .06);

  /* Focus ring */
  --np-focus-ring: 0 0 0 4px rgba(245, 130, 32, .14);

  font-family: 'Nunito', -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--np-text);
}

.np-checkout *,
.np-checkout *::before,
.np-checkout *::after { box-sizing: border-box; }

.np-checkout input,
.np-checkout textarea,
.np-checkout select,
.np-checkout button { font-family: inherit; }

.np-checkout input::placeholder,
.np-checkout textarea::placeholder { color: var(--np-muted-2); }

.np-checkout a { text-decoration: none; }

/* --------------------------------------------------------------------------
   Layout: card + two-column grid
   -------------------------------------------------------------------------- */
.np-card {
  background: #fff;
  border: 1px solid var(--np-card-border);
  border-radius: var(--np-r-card);
  padding: 28px;
}

.np-grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 28px;
  align-items: start;
}

.np-form-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.np-summary {
  position: sticky;
  top: 20px;
  background: #fff;
  border: 1px solid var(--np-card-border);
  border-radius: var(--np-r-card);
  overflow: hidden;
  box-shadow: var(--np-shadow-summary);
}

/* --------------------------------------------------------------------------
   Form controls: input / select / textarea
   -------------------------------------------------------------------------- */
.np-input,
.np-select {
  width: 100%;
  height: 50px;
  padding: 0 16px;
  border: 1.5px solid var(--np-input-border);
  border-radius: var(--np-r-input);
  font-size: 15px;
  color: var(--np-text-3);
  background: #fff;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

/* input with a leading icon (phone / city / branch) */
.np-input.np-input--icon { padding-left: 44px; }

.np-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

.np-textarea {
  width: 100%;
  min-height: 96px;
  padding: 14px 16px;
  border: 1.5px solid var(--np-input-border);
  border-radius: var(--np-r-input);
  font-size: 15px;
  color: var(--np-text-3);
  background: #fff;
  outline: none;
  resize: vertical;
  line-height: 1.5;
  transition: border-color .15s, box-shadow .15s;
}

.np-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--np-label);
  margin-bottom: 8px;
}
.np-label .np-req { color: var(--np-brand); }

.np-field { position: relative; }
.np-field-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* Focus ring — dynamic, can't be expressed inline in the prototype. */
.np-input:focus,
.np-select:focus,
.np-textarea:focus,
.j-branch-search:focus,
.j-office-search:focus {
  border-color: var(--np-brand-ring);
  box-shadow: var(--np-focus-ring);
}

/* --------------------------------------------------------------------------
   CTA — purple gradient (Variant A)
   -------------------------------------------------------------------------- */
.np-cta {
  width: 100%;
  height: 56px;
  border: none;
  border-radius: var(--np-r-cta);
  background: linear-gradient(135deg, var(--np-cta-from), var(--np-cta-to));
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: var(--np-cta-shadow);
  transition: transform .15s, box-shadow .15s;
}
.np-cta:hover {
  box-shadow: var(--np-cta-shadow-hover);
}

/* --------------------------------------------------------------------------
   Delivery toggle (segmented: «на отделение» / «по адресу»)
   -------------------------------------------------------------------------- */
.np-deliv-toggle {
  display: flex;
  gap: 10px;
}

.np-deliv-btn {
  flex: 1;
  min-height: 50px;
  padding: 8px 12px;
  border-radius: var(--np-r-input);
  border: 1.5px solid var(--np-input-border);
  background: #fff;
  color: var(--np-toggle-off-text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all .15s;
}

.np-deliv-btn.is-active {
  background: var(--np-brand-bg);
  border-color: var(--np-brand-ring);
  color: var(--np-active-text);
}

/* --------------------------------------------------------------------------
   Searchable branch picker («Отделение»)
   -------------------------------------------------------------------------- */
.j-branch { position: relative; width: 100%; }

.j-branch-trigger {
  width: 100%;
  height: 50px;
  padding: 0 14px;
  border: 1.5px solid var(--np-input-border);
  border-radius: var(--np-r-input);
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.j-branch-trigger.is-open {
  border-color: var(--np-brand-ring);
  box-shadow: var(--np-focus-ring);
}
.j-branch-trigger .j-branch-placeholder {
  font-size: 15px;
  color: var(--np-muted-2);
}
.j-branch-trigger .j-branch-value {
  font-size: 15px;
  color: var(--np-text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* chevron rotates when open */
.j-branch-chev { transition: transform .2s; transform: rotate(0deg); }
.j-branch-chev.is-open { transform: rotate(180deg); }

.j-branch-panel {
  position: absolute;
  z-index: 60;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  background: #fff;
  border: 1px solid var(--np-input-border);
  border-radius: 14px;
  box-shadow: var(--np-shadow-picker);
  overflow: hidden;
}

.j-branch-search-wrap {
  padding: 10px;
  border-bottom: 1px solid var(--np-divider);
  position: relative;
}
.j-branch-search-icon {
  position: absolute;
  left: 23px; /* 10px wrap padding + 13px inner */
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* search field inside the panel */
.j-branch-search,
.j-office-search {
  width: 100%;
  height: 44px;
  padding: 0 14px 0 38px;
  border: 1.5px solid var(--np-input-border);
  border-radius: 10px;
  font-size: 15px;
  color: var(--np-text-3);
  background: var(--np-soft-bg-2);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

.j-branch-list {
  max-height: 248px;
  overflow-y: auto;
  padding: 6px;
}

.j-branch-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px;
  border: none;
  border-radius: var(--np-r-row);
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.j-branch-row:hover { background: var(--np-soft-bg); }
.j-branch-row.is-selected { background: var(--np-brand-bg); }
.j-branch-row .j-branch-row-label {
  font-size: 14px;
  color: var(--np-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.j-branch-empty {
  padding: 22px 12px;
  text-align: center;
  font-size: 14px;
  color: var(--np-muted);
}

/* --------------------------------------------------------------------------
   Trust badges (Гарантия / Оплата при получении / Доставка)
   -------------------------------------------------------------------------- */
.np-badges {
  display: flex;
  background: var(--np-soft-bg);
  border-top: 1px solid var(--np-divider);
}
.np-badge {
  flex: 1;
  padding: 14px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--np-secondary);
}
.np-badge + .np-badge { border-left: 1px solid var(--np-divider); }

/* --------------------------------------------------------------------------
   Quantity stepper
   -------------------------------------------------------------------------- */
.np-step {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--np-input-border);
  border-radius: 11px;
  overflow: hidden;
  height: 38px;
}
.np-step button {
  width: 36px;
  height: 36px;
  border: none;
  background: #fff;
  color: var(--np-label);
  font-size: 19px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.np-step button:hover { background: #F7F8FA; }
.np-qty {
  width: 40px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--np-text);
}

/* --------------------------------------------------------------------------
   Mobile sticky bottom bar (итог + CTA) — hidden on desktop.
   -------------------------------------------------------------------------- */
.np-mobile-bar { display: none; }

/* --------------------------------------------------------------------------
   Success-page animations (galочка появления + пульсирующее кольцо)
   -------------------------------------------------------------------------- */
@keyframes okPop {
  0%   { transform: scale(.5); opacity: 0; }
  55%  { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes okRing {
  0%   { transform: scale(.7); opacity: .55; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* --------------------------------------------------------------------------
   Responsive — ≤600px: one column, vertical toggle, sticky bottom bar,
   16px inputs (iOS no-zoom).
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .np-grid { grid-template-columns: 1fr; }

  .np-summary { position: static; }

  .np-deliv-toggle { flex-direction: column; }

  .np-input,
  .np-select,
  .np-textarea,
  .j-branch-search,
  .j-office-search { font-size: 16px; }

  .np-mobile-bar {
    display: block;
    position: sticky;
    bottom: 0;
    background: #fff;
    border-top: 1px solid var(--np-divider-2);
    padding: 14px 18px 18px;
    box-shadow: var(--np-shadow-mobilebar);
    z-index: 50;
  }
}

/* ============================================================
   Variant A — full component styles (ported from the mockup)
   ============================================================ */
.np-checkout{max-width:1180px;margin:0 auto;}
.np-card{background:#fff;border-radius:24px;box-shadow:0 1px 3px rgba(0,0,0,.08);overflow:hidden;}
.np-header{display:flex;align-items:center;justify-content:space-between;padding:18px 36px;border-bottom:1px solid #F0F1F4;}
.np-logo{display:flex;align-items:center;gap:11px;}
.np-logo-mark{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#FF9F33,#F5731F);display:flex;align-items:center;justify-content:center;box-shadow:0 5px 14px rgba(245,115,31,.34);}
.np-logo-text{line-height:1;display:inline-block;}
.np-logo-name{font-size:20px;font-weight:900;letter-spacing:.01em;color:#F5731F;}
.np-logo-sub{font-size:8.5px;font-weight:700;color:#A6ABB5;letter-spacing:.06em;margin-top:4px;}
.np-cartcount{display:flex;align-items:center;gap:9px;color:#5A6172;font-size:13.5px;font-weight:500;}
.np-cartcount b{color:#141728;}
.np-body{padding:30px 36px 38px;}
.np-titlerow{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px;}
.np-crumbs{font-size:12.5px;color:#9AA1AD;font-weight:500;}
.np-h1{margin:10px 0 0;font-size:30px;font-weight:800;color:#141728;letter-spacing:-.01em;}
.np-continue{display:inline-flex;align-items:center;gap:7px;color:#159FB0;font-size:14px;font-weight:600;white-space:nowrap;}
.np-grid{display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:start;}

/* left card */
.np-section{background:#fff;border:1px solid #ECEEF2;border-radius:20px;padding:28px;}
.np-section-head{display:flex;align-items:center;gap:12px;}
.np-section-ico{width:42px;height:42px;border-radius:12px;background:#FFF4E8;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.np-section-title{font-size:17px;font-weight:700;color:#141728;}
.np-section-sub{font-size:13px;color:#8A909C;margin-top:2px;}
.np-fields{display:flex;flex-direction:column;gap:20px;margin-top:24px;}
.np-label{display:block;font-size:13px;font-weight:600;color:#3A4151;margin-bottom:8px;}
.np-req{color:#F5731F;}
.np-input{width:100%;height:50px;padding:0 16px;border:1.5px solid #E4E7EC;border-radius:12px;font-size:15px;color:#171B26;background:#fff;outline:none;}
.np-input--icon{padding:0 16px 0 44px;}
.np-input-wrap{position:relative;}
.np-input-ico{position:absolute;left:15px;top:50%;transform:translateY(-50%);}
.np-input:focus,.j-office-search:focus,.np-textarea:focus{border-color:#F58220;box-shadow:0 0 0 4px rgba(245,130,32,.14);}
.np-textarea{width:100%;min-height:96px;padding:14px 16px;border:1.5px solid #E4E7EC;border-radius:12px;font-size:15px;color:#171B26;background:#fff;outline:none;resize:vertical;line-height:1.5;font-family:inherit;}
.np-hidden-native{display:none !important;}
.np-deliv-toggle{display:flex;gap:10px;}
.np-deliv-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:8px 12px;border-radius:12px;font-size:13.5px;font-weight:600;cursor:pointer;background:#fff;border:1.5px solid #E4E7EC;color:#5A6172;line-height:1.2;text-align:center;}
.np-deliv-btn.is-active{background:#FFF4E8;border-color:#F58220;color:#C2640F;}

/* right summary */
.np-summary{position:sticky;top:20px;}
.np-summary-card{background:#fff;border:1px solid #ECEEF2;border-radius:20px;overflow:hidden;box-shadow:0 12px 34px rgba(20,23,40,.06);}
.np-summary-pad{padding:18px 24px;}
.np-summary-card>.np-summary-pad:first-child{padding:22px 24px 18px;}
.np-summary-kicker{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#9AA1AD;margin-bottom:18px;}
.np-prod{display:flex;gap:14px;margin-top:14px;}
.np-prod:first-of-type{margin-top:0;}
.np-prod-thumb{width:62px;height:62px;border-radius:13px;background:linear-gradient(135deg,#FFF4E8,#FFE6CC);flex-shrink:0;border:1px solid #FBE0C2;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.np-prod-thumb img,.np-prod-img{max-width:100%;max-height:100%;border-radius:8px;}
.np-prod-info{flex:1;min-width:0;}
.np-prod-name{font-size:14px;font-weight:600;color:#1E2330;line-height:1.35;}
/* Order item name is a link to the product page (opens in a new tab). Keep the
   text identical to plain text — only the cursor turns into a pointer; no colour
   change and no underline on hover (override the template's global a:hover). */
.np-prod-name a, .np-mo-name a,
.np-prod-name a:hover, .np-mo-name a:hover,
.np-prod-name a:focus, .np-mo-name a:focus,
.np-prod-name a:active, .np-mo-name a:active,
.np-prod-name a:visited, .np-mo-name a:visited{
  color:inherit !important;
  text-decoration:none !important;
  cursor:pointer;
}
.np-prod-sku{font-size:12px;color:#9AA1AD;margin-top:5px;}
.np-prod-row2{display:flex;align-items:center;justify-content:space-between;margin-top:16px;}
.np-stepper{display:inline-flex;align-items:center;border:1.5px solid #E4E7EC;border-radius:11px;overflow:hidden;height:38px;}
.np-step{width:36px;height:36px;border:none;background:#fff;color:#3A4151;font-size:19px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.np-step:hover{background:#FAFBFC;}
.np-qty{width:40px;text-align:center;font-size:15px;font-weight:700;color:#141728;}
.np-prod-line{font-size:15px;font-weight:700;color:#141728;}
.np-prod-line .priceColor1,.np-prod-line span{font-size:inherit;color:inherit;font-weight:inherit;}
.np-summary-divider{height:1px;background:#F0F1F4;}
.np-summary-rows{display:flex;flex-direction:column;gap:12px;}
.np-row{display:flex;justify-content:space-between;font-size:14px;}
.np-row-l{color:#6B7280;}
.np-row-r{color:#1E2330;font-weight:600;}
.np-row-muted{color:#9AA1AD;}
.np-total-row{display:flex;align-items:center;justify-content:space-between;}
.np-total-l{font-size:15px;font-weight:600;color:#141728;}
.np-total-r{font-size:25px;font-weight:800;color:#F5731F;}
.np-total-r .priceColor1,.np-total-r span{font-size:inherit;color:inherit;font-weight:inherit;}
.np-cta-pad{padding:0 24px 22px;}
.np-cta{width:100%;height:56px;border:none;border-radius:14px;background:linear-gradient(135deg,#8E36A2,#6E2380);color:#fff;font-size:16px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 8px 22px rgba(110,35,128,.32);transition:transform .15s,box-shadow .15s;}
.np-cta:hover{box-shadow:0 12px 28px rgba(110,35,128,.42);}
.np-cta-note{margin:12px 2px 0;font-size:11.5px;line-height:1.5;color:#9AA1AD;text-align:center;}
.np-badges{display:flex;background:#FAFBFC;border-top:1px solid #F0F1F4;}
.np-badge{flex:1;padding:14px 8px;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;border-right:1px solid #F0F1F4;}
.np-badge:last-child{border-right:none;}
.np-badge span{font-size:11px;color:#6B7280;font-weight:500;line-height:1.3;}

/* mobile sticky bar (hidden on desktop) */
.np-mobile-bar{display:none;}

/* ---- responsive ---- */
@media (max-width:600px){
  .np-header{padding:14px 16px;}
  .np-body{padding:18px 16px 90px;}
  .np-h1{font-size:22px;}
  .np-section{padding:18px 16px;border-radius:16px;}
  .np-grid{grid-template-columns:1fr;gap:18px;}
  .np-summary{position:static;}
  .np-deliv-toggle{flex-direction:column;}
  .np-input,.np-textarea,.j-office-search{font-size:16px;}
  .np-titlerow{flex-direction:column;align-items:flex-start;gap:8px;}
  .np-mobile-bar{display:flex;align-items:center;gap:12px;position:sticky;bottom:0;z-index:40;background:#fff;box-shadow:0 -8px 24px rgba(20,23,40,.08);padding:12px 16px;}
  .np-mobile-total{display:flex;flex-direction:column;line-height:1.1;}
  .np-mobile-total-l{font-size:11px;color:#9AA1AD;font-weight:600;}
  .np-mobile-total-r{font-size:18px;font-weight:800;color:#F5731F;}
  .np-cta--mobile{flex:1;height:50px;}
}

/* ============================================================
   Checkout page only (checkout.css loads only on the cart view):
   hide the catalog/bestseller sidebar and use full width so the
   checkout card matches the mockup with nothing distracting.
   ============================================================ */
.oPosBlock.sidebar > .oPos.sidebar-1{display:none !important;}
.oPosBlock.sidebar > .oContentBlock.span9{width:100% !important;margin-left:0 !important;}
.oPos.maincontent,.oPos.maincontent .component{width:100%;}

/* ============================================================
   Searchable branch picker (Отделение) — BranchPicker mockup
   ============================================================ */
.j-branch{position:relative;width:100%;}
.j-branch-trigger{width:100%;height:50px;padding:0 14px;border:1.5px solid #E4E7EC;border-radius:12px;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;outline:none;transition:border-color .15s,box-shadow .15s;font-family:inherit;}
.j-branch.is-open .j-branch-trigger,.j-branch-trigger:focus{border-color:#F58220;box-shadow:0 0 0 4px rgba(245,130,32,.14);}
.j-branch.is-disabled .j-branch-trigger{background:#F9FAFB;cursor:not-allowed;opacity:.65;}
.j-branch-trigger-l{display:flex;align-items:center;gap:10px;min-width:0;}
.j-branch-box{flex-shrink:0;}
.j-branch-txt{font-size:15px;color:#171B26;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.j-branch-txt.is-placeholder{color:#A0A6B0;}
.j-branch-chev{transition:transform .2s;flex-shrink:0;}
.j-branch.is-open .j-branch-chev{transform:rotate(180deg);}
.j-branch-panel{position:absolute;z-index:60;left:0;right:0;top:calc(100% + 8px);background:#fff;border:1px solid #E4E7EC;border-radius:14px;box-shadow:0 18px 40px rgba(20,23,40,.16);overflow:hidden;}
.j-branch-searchbox{padding:10px;border-bottom:1px solid #F0F1F4;position:relative;}
.j-branch-searchico{position:absolute;left:23px;top:50%;transform:translateY(-50%);}
.j-branch-search{width:100%;height:44px;padding:0 14px 0 38px;border:1.5px solid #E4E7EC;border-radius:10px;font-size:15px;color:#171B26;background:#F9FAFB;outline:none;font-family:inherit;}
.j-branch-search:focus{border-color:#F58220;box-shadow:0 0 0 4px rgba(245,130,32,.14);background:#fff;}
.j-branch-list{max-height:248px;overflow-y:auto;padding:6px;}
.j-branch-row{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px;border:none;border-radius:9px;background:transparent;cursor:pointer;text-align:left;font-family:inherit;}
.j-branch-row:hover{background:#F9FAFB;}
.j-branch-row.is-sel{background:#FFF4E8;}
.j-branch-row-l{display:flex;align-items:center;gap:11px;min-width:0;}
.j-branch-row-txt{font-size:14px;color:#1E2330;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.j-branch-check{flex-shrink:0;}
.j-branch-empty{padding:22px 12px;text-align:center;font-size:14px;color:#9AA1AD;}
@media (max-width:600px){ .j-branch-search{font-size:16px;} }

/* ============================================================
   Overrides to beat the template/Bootstrap globals (pixel-perfect)
   ============================================================ */
/* Force Nunito everywhere in the checkout */
.np-checkout,.np-checkout h1,.np-checkout h2,.np-checkout h3,.np-checkout input,
.np-checkout select,.np-checkout textarea,.np-checkout button,.np-checkout span,
.np-checkout div,.np-checkout a,.np-checkout label,.np-checkout p,.np-checkout strong,
.ui-autocomplete,.ui-autocomplete *{
  font-family:'Nunito',-apple-system,'Segoe UI',sans-serif !important;
}
.np-checkout .np-h1{font-size:30px !important;font-weight:800 !important;color:#141728 !important;margin:0 !important;line-height:1.15 !important;}

/* Inputs / textarea — override Bootstrap/vmsite form styles */
.np-checkout .np-input{
  height:50px !important;min-height:50px !important;line-height:normal !important;width:100% !important;
  padding:0 16px !important;border:1.5px solid #E4E7EC !important;border-radius:12px !important;
  font-size:15px !important;color:#171B26 !important;background:#fff !important;box-shadow:none !important;margin:0 !important;
}
.np-checkout .np-input--icon{padding:0 16px 0 44px !important;}
.np-checkout .np-textarea{
  min-height:96px !important;height:auto !important;width:100% !important;padding:14px 16px !important;
  border:1.5px solid #E4E7EC !important;border-radius:12px !important;font-size:15px !important;
  color:#171B26 !important;background:#fff !important;line-height:1.5 !important;box-shadow:none !important;
}
.np-checkout .np-input:focus,.np-checkout .np-textarea:focus{border-color:#F58220 !important;box-shadow:0 0 0 4px rgba(245,130,32,.14) !important;}

/* Delivery toggle / CTA / stepper buttons (beat template button styles) */
.np-checkout .np-deliv-btn{height:auto !important;min-height:50px !important;border:1.5px solid #E4E7EC !important;border-radius:12px !important;background:#fff !important;color:#5A6172 !important;font-size:13.5px !important;font-weight:600 !important;box-shadow:none !important;}
.np-checkout .np-deliv-btn.is-active{background:#FFF4E8 !important;border-color:#F58220 !important;color:#C2640F !important;}
.np-checkout .np-cta{height:56px !important;border:none !important;border-radius:14px !important;background:linear-gradient(135deg,#8E36A2,#6E2380) !important;color:#fff !important;font-size:16px !important;font-weight:700 !important;width:100% !important;}
.np-checkout .np-step{width:36px !important;height:36px !important;border:none !important;background:#fff !important;color:#3A4151 !important;box-shadow:none !important;border-radius:0 !important;}

/* Branch picker — beat globals + cap width so long names never break the layout */
.np-checkout .np-form-col{min-width:0;}
.np-checkout .np-field-office,.np-checkout .j-branch{max-width:100%;min-width:0;}
.np-checkout .j-branch-trigger{height:50px !important;min-height:50px !important;width:100% !important;max-width:100% !important;padding:0 14px !important;border:1.5px solid #E4E7EC !important;border-radius:12px !important;background:#fff !important;box-shadow:none !important;overflow:hidden;}
.np-checkout .j-branch-trigger-l{flex:1 1 auto;min-width:0;overflow:hidden;}
.np-checkout .j-branch-txt{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.np-checkout .j-branch-search{height:44px !important;min-height:44px !important;width:100% !important;padding:0 14px 0 38px !important;border:1.5px solid #E4E7EC !important;border-radius:10px !important;font-size:15px !important;color:#171B26 !important;background:#F9FAFB !important;box-shadow:none !important;margin:0 !important;}
.np-checkout .j-branch-search:focus,.np-checkout .j-branch.is-open .j-branch-trigger,.np-checkout .j-branch-trigger:focus{border-color:#F58220 !important;box-shadow:0 0 0 4px rgba(245,130,32,.14) !important;}
.np-checkout .j-branch-row-txt{max-width:100%;}

/* City autocomplete dropdown — style like the branch panel */
.ui-autocomplete.ui-menu{background:#fff !important;border:1px solid #E4E7EC !important;border-radius:14px !important;box-shadow:0 18px 40px rgba(20,23,40,.16) !important;padding:6px !important;max-height:262px;overflow-y:auto;z-index:9999 !important;}
.ui-autocomplete .ui-menu-item{border:none !important;background:transparent !important;margin:0 !important;}
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper,.ui-autocomplete .ui-menu-item a{display:block !important;padding:11px 12px !important;border-radius:9px !important;font-size:14px !important;color:#1E2330 !important;border:none !important;background:transparent !important;margin:0 !important;line-height:1.3 !important;}
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.ui-state-active,.ui-autocomplete .ui-menu-item a.ui-state-focus,.ui-autocomplete .ui-menu-item a.ui-state-active,.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper:hover{background:#F9FAFB !important;color:#1E2330 !important;}

/* ---- clearable × buttons (Город, Адрес, поиск Отделений) ---- */
.np-checkout .np-input--clearable{padding-right:42px !important;}
.np-checkout .np-clear{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:22px;height:22px;border:none;border-radius:50%;background:#EEF0F3;color:#6B7280;font-size:16px;line-height:1;cursor:pointer;display:none;align-items:center;justify-content:center;padding:0;}
.np-checkout .np-clear:hover{background:#E0E3E8;color:#141728;}
.np-checkout .j-branch-search{padding-right:38px !important;}
.np-checkout .j-branch-clear{position:absolute;right:20px;top:50%;transform:translateY(-50%);width:20px;height:20px;border:none;border-radius:50%;background:#EEF0F3;color:#6B7280;font-size:15px;line-height:1;cursor:pointer;display:none;align-items:center;justify-content:center;padding:0;}
.np-checkout .j-branch-clear:hover{background:#E0E3E8;color:#141728;}

/* ---- balanced card spacing (remove double padding; equal all sides) ---- */
.np-checkout .np-card{padding:0 !important;}
.np-checkout .np-body{padding:32px !important;}

/* ---- product item + remove × ---- */
.np-checkout .np-prod-item{position:relative;}
.np-checkout .np-prod-item + .np-prod-item{margin-top:18px;padding-top:18px;border-top:1px solid #F0F1F4;}
.np-checkout .np-prod{margin-top:0 !important;}
.np-checkout .np-prod-info{padding-right:26px;}
.np-checkout .np-prod-remove{position:absolute;top:0;right:0;width:22px;height:22px;border:none;border-radius:50%;background:#F2F3F6;color:#9AA1AD;font-size:15px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background .15s,color .15s;}
.np-checkout .np-prod-remove:hover{background:#FDE2E2;color:#D64545;}
.np-checkout .np-prod-item + .np-prod-item .np-prod-remove{top:18px;}

/* ============================================================
   «Заказ оформлен» confirmation page (screens 4 & 5)
   ============================================================ */
@keyframes okPop{0%{transform:scale(.5);opacity:0;}55%{transform:scale(1.1);}100%{transform:scale(1);opacity:1;}}
@keyframes okRing{0%{transform:scale(.7);opacity:.55;}100%{transform:scale(1.7);opacity:0;}}
.np-checkout .np-confirm{max-width:560px;margin:0 auto;}
.np-checkout .np-confirm-header{display:flex;align-items:center;justify-content:center;gap:11px;padding:18px;border-bottom:1px solid #F0F1F4;}
.np-checkout .np-confirm-header .np-logo-mark{width:38px;height:38px;border-radius:11px;}
.np-checkout .np-confirm-header .np-logo-name{font-size:19px;font-weight:900;color:#F5731F;letter-spacing:.01em;}
.np-checkout .np-confirm-body{padding:40px 44px 36px;text-align:center;}
.np-checkout .np-ok{position:relative;width:96px;height:96px;margin:0 auto;display:flex;align-items:center;justify-content:center;}
.np-checkout .np-ok-ring{position:absolute;width:96px;height:96px;border-radius:50%;background:#1B9E5A;animation:okRing 1.8s ease-out infinite;}
.np-checkout .np-ok-circle{position:relative;width:96px;height:96px;border-radius:50%;background:linear-gradient(135deg,#27B96C,#1B9E5A);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px rgba(27,158,90,.36);animation:okPop .55s cubic-bezier(.2,.8,.3,1.2) both;}
.np-checkout .np-confirm-h1{margin:24px 0 0 !important;font-size:28px !important;font-weight:800 !important;color:#141728 !important;letter-spacing:-.01em;}
.np-checkout .np-confirm-sub{margin:12px auto 0;max-width:400px;font-size:15px;line-height:1.55;color:#6B7280;}
.np-checkout .np-order-details{margin-top:28px;text-align:left;background:#FAFBFC;border:1px solid #EEF0F3;border-radius:16px;overflow:hidden;}
.np-checkout .np-od-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;border-bottom:1px solid #EEF0F3;}
.np-checkout .np-od-l{font-size:14px;color:#6B7280;flex-shrink:0;}
.np-checkout .np-od-num{font-size:15px;font-weight:700;color:#141728;letter-spacing:.02em;}
.np-checkout .np-od-pay{font-size:14px;font-weight:600;color:#1E2330;text-align:right;}
.np-checkout .np-od-total{background:#FFF8F0;border-bottom:none;}
.np-checkout .np-od-sum{font-size:20px;font-weight:800;color:#F5731F;white-space:nowrap;}
.np-checkout .np-support{margin-top:24px;text-align:left;border:1px solid #EEF0F3;border-radius:16px;padding:20px;}
.np-checkout .np-support-title{font-size:13px;font-weight:600;color:#8A909C;margin-bottom:12px;}
.np-checkout .np-support-phone{display:flex;align-items:center;gap:13px;padding:6px 0;}
.np-checkout .np-support-ico{width:44px;height:44px;border-radius:12px;background:#FFF4E8;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.np-checkout .np-support-cap{display:block;font-size:12px;color:#9AA1AD;}
.np-checkout .np-support-num{display:block;font-size:18px;font-weight:700;color:#141728;margin-top:1px;}
.np-checkout .np-tg-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:50px;margin-top:14px;border-radius:13px;background:linear-gradient(135deg,#2AABEE,#229ED9);color:#fff;font-size:15px;font-weight:700;box-shadow:0 8px 20px rgba(34,158,217,.32);transition:transform .15s,box-shadow .15s;}
.np-checkout .np-tg-btn:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(34,158,217,.42);}
.np-checkout .np-ghost-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:52px;margin-top:18px;border-radius:13px;border:1.5px solid #E4E7EC;color:#3A4151;font-size:15px;font-weight:600;background:#fff;transition:background .15s;}
.np-checkout .np-ghost-btn:hover{background:#FAFBFC;}
@media (max-width:600px){
  .np-checkout .np-confirm-body{padding:30px 18px 26px;}
  .np-checkout .np-ok,.np-checkout .np-ok-ring,.np-checkout .np-ok-circle{width:84px;height:84px;}
  .np-checkout .np-confirm-h1{font-size:23px !important;}
  .np-checkout .np-od-row{padding:14px 16px;}
  .np-checkout .np-support{padding:16px;}
}

/* ---- «Оформить заказ» loading state (spinner) ---- */
.np-checkout .np-cta.is-loading{pointer-events:none;opacity:.9;}
.np-checkout .np-cta.is-loading svg{display:none;}
.np-checkout .np-cta.is-loading::before{content:"";width:18px;height:18px;border:2.5px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:npspin .7s linear infinite;}
@keyframes npspin{to{transform:rotate(360deg);}}

/* ---- confirmation: responsive label/title swaps (mobile mockup, screen 5) ---- */
.np-checkout .np-m-only{display:none;}
@media (max-width:600px){
  .np-checkout .np-d-only{display:none;}
  .np-checkout .np-m-only{display:inline;}
  .np-checkout .np-confirm{border-radius:30px;border:1px solid #ECEEF2;}
}

/* ============================================================
   Mobile checkout: compact order summary on top (mockup screen 3).
   Hidden on desktop; on mobile it shows above the form and the full
   «Ваш заказ» card is hidden (totals/CTA live in the sticky bar).
   ============================================================ */
.np-checkout .np-mobile-order{display:none;}
@media (max-width:600px){
  .np-checkout .np-mobile-order{display:block;margin-bottom:20px;}
  .np-checkout .np-summary{display:none !important;}
}
.np-checkout .np-mo-item{display:flex;align-items:center;gap:10px;background:#FAFBFC;border:1px solid #EEF0F3;border-radius:14px;padding:12px;}
.np-checkout .np-mo-item + .np-mo-item{margin-top:10px;}
.np-checkout .np-mo-thumb{width:48px;height:48px;border-radius:11px;background:linear-gradient(135deg,#FFF4E8,#FFE6CC);flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:5px;}
.np-checkout .np-mo-thumb img{max-width:100%;max-height:100%;border-radius:6px;}
.np-checkout .np-mo-info{flex:1;min-width:0;}
.np-checkout .np-mo-name{font-size:13px;font-weight:600;color:#1E2330;line-height:1.3;}
.np-checkout .np-mo-meta{font-size:12px;color:#9AA1AD;margin-top:3px;}
.np-checkout .np-mo-meta *{font-size:inherit !important;color:inherit !important;font-weight:inherit !important;}
.np-checkout .np-mo-stepper{display:inline-flex;align-items:center;border:1.5px solid #E4E7EC;border-radius:9px;overflow:hidden;height:34px;flex-shrink:0;}
.np-checkout .np-mo-stepper .np-step{width:30px !important;height:32px !important;font-size:17px;}
.np-checkout .np-qty--m{width:26px;font-size:13px;}
/* mobile order: per-item remove button (parity with the desktop summary's .np-prod-remove) */
.np-checkout .np-mo-remove{flex-shrink:0;width:28px;height:28px;border:none;border-radius:50%;background:#F2F3F6;color:#9AA1AD;font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;-webkit-tap-highlight-color:transparent;transition:background .15s,color .15s;}
.np-checkout .np-mo-remove:hover,.np-checkout .np-mo-remove:active{background:#FDE2E2;color:#D64545;}

/* ---- mobile sticky bar: total row on top, full-width CTA below (mockup) ---- */
@media (max-width:600px){
  .np-checkout .np-mobile-bar{display:block;position:sticky;bottom:0;z-index:40;background:#fff;box-shadow:0 -8px 24px rgba(20,23,40,.06);padding:14px 18px 18px;}
  .np-checkout .np-mobile-total{display:flex;align-items:center;justify-content:space-between;flex-direction:row;margin-bottom:12px;line-height:1.2;}
  .np-checkout .np-mobile-total-l{font-size:13px;color:#6B7280;font-weight:400;}
  .np-checkout .np-mobile-total-r{font-size:21px;font-weight:800;color:#F5731F;}
  .np-checkout .np-cta--mobile{width:100%;height:54px;flex:none;}
}

/* ============================================================
   Mobile: ONE frame (mockup screen 3). The desktop layout nests the
   «Контактная информация» card inside the page card — on a phone that
   reads as a frame-in-frame and wastes width. Flatten the inner section,
   widen the body, bump the card radius, and let the sticky bar span the
   full card width.
   ============================================================ */
@media (max-width:600px){
  .np-checkout .np-card{border-radius:30px !important;border:1px solid #ECEEF2;}
  .np-checkout .np-body{padding:18px 18px 0 !important;}
  .np-checkout .np-section{background:transparent !important;border:none !important;border-radius:0 !important;padding:0 !important;}
  .np-checkout .np-mobile-bar{margin:20px -18px 0;border-top:1px solid #EEF0F3;}
}