/* ==========================================================================
   Checkout reskin — layered on top of simple.css / stylesheet.css.
   Uses the site's own design tokens (--ds-*) so it stays on-brand
   automatically if those tokens ever change.
   ========================================================================== */

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

.simplecheckout {
  --rk-bg: var(--ds-body-bg-light-color, #F8FBFD);
  --rk-surface: #FFFFFF;
  --rk-surface-2: #EEF6FA;
  --rk-border: #DCE8EE;
  --rk-border-strong: #C3D8E1;
  --rk-ink: var(--ds-primary-dark-color-light, #00171F);
  --rk-ink-muted: #4C6572;
  --rk-ink-faint: #8AA0AA;
  --rk-primary: var(--ds-primary-color, #00A8E8);
  --rk-primary-wash: #E4F6FE;
  --rk-green: var(--ds-green-color, #52BB38);
  --rk-green-wash: #EAF7E5;
  --rk-red: var(--ds-red-color, #D5383D);
  --rk-red-wash: #FDECEC;
  --rk-yellow: var(--ds-yellow-color, #FBC756);
  --rk-yellow-wash: #FFF6E2;
  --rk-radius-sm: 8px;
  --rk-radius-md: 12px;
  --rk-radius-lg: 16px;
  --rk-shadow: 0 1px 2px rgba(0, 23, 31, 0.06);
  max-width: 1180px;
  margin: 0 auto;
  font-family: var(--ds-main-font, 'Ubuntu', sans-serif);
}

/* Checkout is forced to light-theme (see simplecheckout.twig inline script,
   which sets html.class="light-theme" before paint) — user decision
   2026-07-11, to always match the light concept mockup regardless of
   device/stored site theme. The site's real dark-mode trigger is the
   html.dark-theme class (see header.twig octDetectTheme), not a raw
   prefers-color-scheme query — kept here, unused while forced light, in
   case dark support is wanted back later. */
html.dark-theme .simplecheckout {
  --rk-bg: #1B1B1B;
  --rk-surface: #242424;
  --rk-surface-2: #2B2B2B;
  --rk-border: #383D3F;
  --rk-border-strong: #454B4E;
  --rk-ink: #F8FCFF;
  --rk-ink-muted: #A9B7BE;
  --rk-ink-faint: #6E7C82;
  --rk-primary: #35BDFB;
  --rk-primary-wash: #12303C;
  --rk-green: #6FCB4E;
  --rk-green-wash: #17301A;
  --rk-red: #FF7A7E;
  --rk-red-wash: #3A1D1E;
  --rk-yellow: #FFD27A;
  --rk-yellow-wash: #3A2E10;
}

/* ---- columns: cart/summary sidebar visually on the RIGHT (like the
   mockup), steps on the LEFT. The vendor template puts {cart} in the
   "left_column" DOM slot and steps in "right_column", so we flip the
   float direction rather than touching template block order. ---- */
.simplecheckout-left-column {
  float: right !important;
  width: 33% !important;
  padding-left: 24px;
}
.simplecheckout-right-column {
  float: left !important;
  width: 67% !important;
  padding: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
.simplecheckout #simplecheckout_cart {
  position: sticky;
  top: 20px;
}
@media only screen and (max-width: 1024px) {
  .simplecheckout-left-column {
    padding-left: 0;
  }
}
/* payment_address is repurposed for the Nova Poshta city/department pickers
   (payment_address[company] = Місто, payment_address[address_2] =
   Відділення — real select2 fields, already populated, see
   np_city_autocomplete.js). Hidden by default, shown only while Nova Poshta
   is the selected shipping method (class toggled in simplecheckout.twig). */
.simplecheckout #simplecheckout_payment_address {
  display: none;
}
body.rk-show-np-address .simplecheckout #simplecheckout_payment_address {
  display: block !important;
  margin-top: -12px;
}
.simplecheckout #simplecheckout_payment_address .row-payment_address_country_id {
  display: none !important;
}
/* "Місто" (payment_address[company]) is itself scoped to whichever область
   is selected — vendor city dataset is split per oblast, not one flat
   all-Ukraine list — so this field genuinely has to stay visible, unlike
   country (always Ukraine). Default gets nudged to Чернівецька via JS
   (store's home region) since the vendor's blank default is Київ. */
.simplecheckout #simplecheckout_payment_address .form-group {
  margin-bottom: 10px;
}
@media only screen and (max-width: 1024px) {
  .simplecheckout-left-column,
  .simplecheckout-right-column {
    width: 100% !important;
    padding: 0 !important;
  }
  .simplecheckout #simplecheckout_cart {
    position: static;
    margin-bottom: 20px;
  }
}

/* ---- step nav ---- */
.simplecheckout #simplecheckout_step_menu {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  background: none;
  border: none;
  padding: 0;
}
.simplecheckout .simple-step {
  flex: 1;
  text-align: center;
  padding: 12px 14px;
  border-radius: var(--rk-radius-md);
  border: 1.5px solid var(--rk-border);
  background: var(--rk-surface);
  color: var(--rk-ink-muted);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.simplecheckout .simple-step.active,
.simplecheckout .simple-step[style*="background"] {
  border-color: var(--rk-primary);
  background: var(--rk-primary-wash);
  color: var(--rk-ink);
}
.simplecheckout .simple-step-delimiter {
  display: none;
}
.simplecheckout .simple-step:after,
.simplecheckout .simple-step:before {
  display: none !important;
}

/* ---- generic block card ---- */
.simplecheckout .simplecheckout-block {
  background: var(--rk-surface);
  border: 1px solid var(--rk-border);
  border-radius: var(--rk-radius-lg);
  box-shadow: var(--rk-shadow);
  padding: 26px 28px;
  margin-bottom: 20px;
}
.simplecheckout-right-column {
  counter-reset: rk-step;
}
.simplecheckout .checkout-heading.panel-heading {
  font-size: 17px;
  font-weight: 700;
  color: var(--rk-ink);
  margin-bottom: 16px;
  padding: 0;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.simplecheckout-right-column > #simplecheckout_shipping .checkout-heading.panel-heading::before,
.simplecheckout-right-column > #simplecheckout_customer .checkout-heading.panel-heading::before,
.simplecheckout-right-column > #simplecheckout_payment .checkout-heading.panel-heading::before {
  counter-increment: rk-step;
  content: counter(rk-step);
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--rk-primary-wash);
  color: var(--rk-primary);
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.simplecheckout .checkout-heading-button a {
  color: var(--rk-primary);
  font-weight: 500;
  font-size: 13px;
}
.simplecheckout .simplecheckout-block-content {
  padding: 0;
  border: none;
}
.simplecheckout hr {
  border: none;
  border-top: 1px solid var(--rk-border);
  margin: 16px 0;
}
.simplecheckout hr.g-line-red {
  display: none;
}

/* ---- shipping method tiles ---- */
.simplecheckout .cart-delivery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.simplecheckout .cart-delivery-item {
  flex: 1;
  min-width: 150px;
  display: flex;
  flex-direction: column;
  border: 1.5px solid var(--rk-border);
  border-radius: var(--rk-radius-md);
  padding: 14px 10px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.simplecheckout .cart-delivery-item:has(input:disabled) {
  cursor: default;
}
.simplecheckout .cart-delivery-item:has(input:checked) {
  border-color: var(--rk-yellow);
  background: var(--rk-yellow-wash);
}
.simplecheckout .cart-delivery-item .radio {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}
.simplecheckout .cart-delivery-item-botton {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0;
  color: var(--rk-ink-muted);
  font-weight: 500;
  font-size: 12.5px;
  text-align: center;
  cursor: pointer;
}
.simplecheckout .cart-delivery-item-botton:hover {
  background: none !important;
  color: var(--rk-ink-muted);
}
.simplecheckout .cart-delivery-item:has(input:checked) .cart-delivery-item-botton {
  color: var(--rk-ink);
}
.simplecheckout .cart-delivery-item-botton-image {
  height: 28px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.simplecheckout .cart-delivery-item-botton-image img {
  height: 28px !important;
  width: auto;
  object-fit: contain;
}
.simplecheckout .cart-delivery-item-botton input {
  accent-color: var(--rk-primary);
}
.simplecheckout .cart-delivery-item-botton-title {
  font-size: 11.5px;
  color: var(--rk-ink-faint);
  margin-top: 8px;
  text-align: center;
  line-height: 1.4;
}
/* "Not available yet" note on a dummy/disabled delivery tile (e.g. courier
   before a matching city is entered) — calm info note, not an alarm. */
.simplecheckout .cart-delivery-item .simplecheckout-error-text {
  order: 3;
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--rk-border);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--rk-ink-faint);
  line-height: 1.4;
  text-align: center;
}

/* ---- visually merge shipping-method + shipping-address into one card,
   matching the mockup's single "Спосіб отримання" section ---- */
.simplecheckout #simplecheckout_shipping {
  margin-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: none;
  padding-bottom: 20px;
}
.simplecheckout #simplecheckout_shipping_address {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  padding-top: 4px;
}

/* ---- address search + geolocation row ---- */
.simplecheckout .rk-locate-row {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}
.simplecheckout .rk-address-search {
  flex: 1;
  border: 1.5px solid var(--rk-border);
  background: var(--rk-surface);
  border-radius: var(--rk-radius-sm);
  padding: 11px 14px;
  font-size: 14px;
  font-family: inherit;
  color: var(--rk-ink);
}
.simplecheckout .rk-address-search:focus {
  outline: none;
  border-color: var(--rk-primary);
}
.simplecheckout .rk-address-search::placeholder {
  color: var(--rk-ink-faint);
}
.simplecheckout .rk-locate-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1.5px solid var(--rk-border);
  background: var(--rk-surface);
  color: var(--rk-primary);
  font-family: inherit;
  font-weight: 500;
  font-size: 13.5px;
  border-radius: var(--rk-radius-sm);
  padding: 0 16px;
  cursor: pointer;
  white-space: nowrap;
}
.simplecheckout .rk-locate-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ---- distance badge next to pharmacy name ---- */
.simplecheckout .pharmacy__distance {
  font-size: 12px;
  color: var(--rk-primary);
  font-weight: 500;
  margin-left: 8px;
}

/* ---- pharmacy picker ---- */
.simplecheckout .list-pharmacy {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.simplecheckout .list-pharmacy .radio {
  border: 1.5px solid var(--rk-border);
  border-radius: var(--rk-radius-md);
  padding: 14px 16px;
  transition: border-color .15s ease, background .15s ease;
}
.simplecheckout .list-pharmacy .radio:has(input:checked) {
  border-color: var(--rk-green);
  background: var(--rk-green-wash);
}
.simplecheckout .list-pharmacy__container {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px 16px;
  font-size: 13.5px;
  color: var(--rk-ink);
  line-height: 1.5;
}
.simplecheckout .pharmacy__brand {
  /* Logo icon removed per user request — element stays in the DOM (just
     hidden) because it still carries the data-lat/data-lon used by the
     distance-sort script in simplecheckout.twig. */
  display: none;
}
.simplecheckout .pharmacy__brand img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.simplecheckout .pharmacy__info {
  flex: 1;
  min-width: 200px;
}
.simplecheckout .pharmacy__name {
  font-weight: 500;
  font-size: 14.5px;
  color: var(--rk-ink);
}
.simplecheckout .pharmacy__address {
  font-size: 13px;
  color: var(--rk-ink-muted);
  margin-top: 2px;
}
.simplecheckout .pharmacy__stock {
  margin-top: 8px;
}
.simplecheckout .pharmacy__stock-label {
  font-size: 11.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--rk-ink-faint);
  margin-bottom: 3px;
}
.simplecheckout .pharmacy__stock-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12.5px;
  color: var(--rk-green);
  font-weight: 500;
}
.simplecheckout .pharmacy__stock-item::before {
  content: "\2713";
  flex: none;
}
.simplecheckout .pharmacy__stock-qty {
  color: var(--rk-ink-muted);
  font-weight: 400;
}
.simplecheckout .pharmacy__detail {
  flex: none;
  margin-left: auto;
  text-align: right;
  font-size: 12px;
  color: var(--rk-ink-faint);
}
.simplecheckout .pharmacy__contact .marker-work {
  white-space: nowrap;
}
.simplecheckout .pharmacy__contact .icon-clock-o {
  display: none;
}
.simplecheckout .list-pharmacy-actions {
  flex: none;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}
.simplecheckout .list-pharm-shop__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.simplecheckout .list-pharm-shop__label input {
  accent-color: var(--rk-green);
  width: 18px;
  height: 18px;
}
.simplecheckout .list-pharm-shop__status-success {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--rk-primary);
  color: #fff;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
}
.simplecheckout .list-pharm-shop__status.disabled .list-pharm-shop__status-success {
  background: var(--rk-border-strong);
  color: var(--rk-ink-faint);
}

/* ---- payment methods ---- */
.simplecheckout .b-gf__check-block {
  border: 1.5px solid var(--rk-border);
  border-radius: var(--rk-radius-md);
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: border-color .15s ease, background .15s ease;
}
.simplecheckout .b-gf__check-block:has(input:checked) {
  border-color: var(--rk-green);
  background: var(--rk-green-wash);
}
.simplecheckout .b-gf__check {
  /* vendor simple.css: ".simplecheckout label{display:inline-block!important}"
     beats a plain flex here — needs !important to actually win. */
  display: flex !important;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  position: relative;
  padding-left: 0;
}
.simplecheckout .b-gf__check input.input-radio {
  /* rk (2026-07-21): нативний radio невидимий (opacity:0 з vendor-стилю,
     наш попередній position:static + width/height 19px все одно займав
     реальне місце в flex-рядку + gap:12px перед логотипом -- візуально
     "порожнє поле" зліва від LiqPay/оплата-в-аптеці карток, бо картка й
     так підсвічується цілком при виборі (:has(input:checked), окремий
     видимий чекбокс не потрібен). Прибираємо з розкладу повністю
     (position:absolute -- не займає місця, gap на нього не діє) замість
     видимого, але порожнього блоку. */
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}
.simplecheckout .b-gf__check .icon-radio {
  display: none;
}
.simplecheckout .b-gf__check .text-radio {
  font-size: 14px;
  font-weight: 500;
  color: var(--rk-ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
.simplecheckout .b-gf__check[for="liqpay"] .text-radio::before {
  content: "";
  flex: none;
  width: 30px;
  height: 20px;
  background: url('../images/payments/liqpay.svg') no-repeat center / contain;
}

/* ---- consent checkbox ---- */
.simplecheckout .agreement-check__wrap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.simplecheckout .agreement-check__input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--rk-primary);
  flex: none;
}
.simplecheckout .agreement-check__checkbox {
  display: none;
}
.simplecheckout .agreement-check__text {
  font-size: 12.5px;
  color: var(--rk-ink-muted);
  line-height: 1.5;
  margin: 0;
}
.simplecheckout .agreement-check__text a {
  color: var(--rk-primary);
  text-decoration: underline;
}
/* ---- "ліки не підлягають поверненню" -- інформаційний напис (round 21),
   видимий лише для доставки кур'єром / Укрпоштою / Новою Поштою ---- */
.simplecheckout .rk-no-return-notice {
  border: 1.5px solid #dc2a1c;
  background: rgba(220, 42, 28, 0.06);
  border-radius: var(--rk-radius-sm);
  padding: 10px 12px;
  margin-bottom: 14px;
}
.simplecheckout .rk-no-return-text {
  margin: 0;
  font-size: 13px;
  color: #dc2a1c;
}
.simplecheckout .rk-no-return-text strong {
  font-weight: 700;
}

/* ---- form fields (customer info) ---- */
.simplecheckout .form-group {
  margin-bottom: 14px;
}
.simplecheckout .form-group label.control-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--rk-ink-muted);
  padding: 0 0 6px;
  width: auto;
  float: none;
  display: block;
  text-align: left;
}
.simplecheckout .form-control {
  width: 100%;
  border: 1.5px solid var(--rk-border);
  background: var(--rk-surface);
  border-radius: var(--rk-radius-sm);
  padding: 11px 14px;
  font-size: 14px;
  font-family: inherit;
  color: var(--rk-ink);
  height: auto;
  box-shadow: none;
}
.simplecheckout .form-control:focus {
  border-color: var(--rk-primary);
  box-shadow: none;
  outline: none;
}
.simplecheckout .col-sm-8,
.simplecheckout .col-sm-10 {
  width: 100%;
  float: none;
  padding: 0;
}
.simplecheckout .col-sm-4,
.simplecheckout .col-sm-2 {
  width: 100%;
  float: none;
  padding: 0;
}

/* ---- cart list (persistent left card) ---- */
.simplecheckout .cart-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.simplecheckout .cart-list__item {
  display: flex;
  gap: 14px;
  padding: 4px 0 16px;
  border-bottom: 1px solid var(--rk-border);
  margin-bottom: 16px;
  position: relative;
}
.simplecheckout .cart-list__thumb img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: var(--rk-radius-sm);
}
.simplecheckout .cart-list__option {
  flex: 1;
  min-width: 0;
  position: relative;
  padding-right: 24px;
}
.simplecheckout .cart-list__option .prod-header {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--rk-ink);
  line-height: 1.4;
  display: inline-block;
}
.simplecheckout .cart-list__option .del {
  position: absolute;
  top: 0;
  right: 0;
  color: var(--rk-ink-faint);
  font-size: 16px;
  cursor: pointer;
}
.simplecheckout .cart-sum {
  font-size: 12.5px;
  color: var(--rk-ink-muted);
  margin-top: 6px;
}
.simplecheckout .cart-sum .text-update {
  font-weight: 500;
  color: var(--rk-ink);
  font-variant-numeric: tabular-nums;
}
.simplecheckout .block-quantity {
  margin-top: 8px;
}
.simplecheckout .number-block.small {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--rk-border);
  border-radius: 999px;
  padding: 4px 10px;
}
.simplecheckout .number-block .count-caption {
  display: none;
}
.simplecheckout .number-block input {
  width: 24px;
  text-align: center;
  border: none;
  background: none;
  font-size: 13px;
  color: var(--rk-ink);
  padding: 0;
}
.simplecheckout .num__control {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--rk-surface-2);
  color: var(--rk-ink-muted);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}
/* Vendor never actually defines a glyph for these (content:none either way,
   with or without reskin) — draw the +/- ourselves. */
.simplecheckout .num__control.icon-minus::before {
  content: "\2212";
}
.simplecheckout .num__control.icon-plus::before {
  content: "+";
}

/* ---- totals ---- */
.simplecheckout .simplecheckout-cart-total {
  background: none;
  border: none;
  padding: 0;
}
.simplecheckout .cart-list-total {
  font-size: 13.5px;
  color: var(--rk-ink-muted);
}
.simplecheckout .cart-list-total p {
  display: flex;
  justify-content: space-between;
  margin: 0 0 10px;
}
.simplecheckout .cart-list-total .text-update {
  font-variant-numeric: tabular-nums;
  color: var(--rk-ink);
}
.simplecheckout .cart-list-total hr.hrg-line {
  display: none;
}
.simplecheckout .cart-list-total .text-condensed.fs17 {
  display: flex;
  justify-content: space-between;
  font-size: 17px;
  font-weight: 700;
  color: var(--rk-ink);
  padding-top: 10px;
  border-top: 1px solid var(--rk-border);
}
.simplecheckout .cart-list-total .text-condensed.fs17 .text-red {
  color: var(--rk-ink) !important;
  font-variant-numeric: tabular-nums;
}

/* ---- buttons ---- */
.simplecheckout .button_oc,
.simplecheckout .button.btn-primary,
.simplecheckout button.button_oc {
  background: var(--rk-primary);
  border: none;
  border-radius: var(--rk-radius-md);
  color: #fff;
  font-weight: 500;
  font-size: 15px;
  padding: 14px 22px;
  box-shadow: none;
  text-shadow: none;
  transition: opacity .15s ease;
}
.simplecheckout .button_oc:hover,
.simplecheckout .button.btn-primary:hover {
  opacity: .92;
  background: var(--rk-primary);
}
/* vendor's own .button__text has color:var(--ds-primary-color) (matches our
   solid button background — invisible until :hover flips it to white). Our
   buttons are solid from the start, so the text must be white from the
   start too. */
.simplecheckout .button_oc .button__text,
.simplecheckout .button.btn-primary .button__text {
  color: #fff;
}
.simplecheckout .simplecheckout-button-block {
  border: none;
  background: none;
  padding: 0;
  margin-top: 4px;
}

/* ---- warnings ---- */
.simplecheckout .simplecheckout-warning-block,
.simplecheckout .alert-danger {
  background: var(--rk-red-wash);
  border: 1px solid color-mix(in srgb, var(--rk-red) 30%, transparent);
  color: var(--rk-red);
  border-radius: var(--rk-radius-md);
  padding: 12px 14px;
  font-size: 13px;
}

/* ---- comment field gets a gentle nudge when it's needed for a manual
   Ukrposhta/courier address (see simplecheckout.twig inline script) ---- */
#comment.rk-comment-hint {
  border-color: var(--rk-primary, #00A8E8) !important;
  box-shadow: 0 0 0 3px var(--rk-primary-wash, #E4F6FE);
}

/* ---- courier: self-filled address fields (not vendor-backed — plain
   custom inputs, composed into #comment on input, see simplecheckout.twig)
   ---- */
.simplecheckout .rk-courier-fields {
  display: none;
  margin-top: -12px;
}
body.rk-show-courier-fields .simplecheckout .rk-courier-fields {
  display: block;
}
.simplecheckout .rk-courier-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.simplecheckout .rk-courier-row + .rk-courier-row {
  margin-top: 14px;
}
.simplecheckout .rk-courier-field label {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--rk-ink-muted);
  padding: 0 0 6px;
}
.simplecheckout .rk-courier-input {
  width: 100%;
  border: 1.5px solid var(--rk-border);
  background: var(--rk-surface);
  border-radius: var(--rk-radius-sm);
  padding: 11px 14px;
  font-size: 14px;
  font-family: inherit;
  color: var(--rk-ink);
}
.simplecheckout .rk-courier-input:focus {
  outline: none;
  border-color: var(--rk-primary);
}
.simplecheckout .rk-courier-input::placeholder {
  color: var(--rk-ink-faint);
}
@media (max-width: 560px) {
  .simplecheckout .rk-courier-row {
    grid-template-columns: 1fr;
  }
}
.simplecheckout .rk-shipping-info-note {
  margin-top: 14px;
  margin-bottom: 14px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.45;
  color: var(--rk-ink-muted);
  background: var(--rk-primary-wash, #E4F6FE);
  border: 1px solid var(--rk-primary-wash-strong, #C7EBFB);
  border-radius: var(--rk-radius-sm);
  padding: 12px 14px;
}
.simplecheckout .rk-shipping-info-note::before {
  content: "\2139";
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-style: normal;
  color: var(--rk-primary, #00A8E8);
  background: var(--rk-surface);
}


/* ---- Nova Poshta: "У відділення" / "У поштомат" chip toggle above the
   "Відділення" select2 field (see simplecheckout.twig + np_city_autocomplete.js)
   ---- */
.simplecheckout .rk-np-dept-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.simplecheckout .rk-chip {
  border: 1.5px solid var(--rk-border);
  background: var(--rk-surface);
  color: var(--rk-ink-muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.simplecheckout .rk-chip.is-active {
  border-color: var(--rk-primary);
  background: var(--rk-primary-wash);
  color: var(--rk-ink);
}

/* ---- courier tile: "до безкоштовної доставки" progress bar ---- */
.simplecheckout .rk-free-shipping-progress {
  order: 4;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--rk-border);
  width: 100%;
}
.simplecheckout .rk-free-shipping-bar-track {
  height: 6px;
  border-radius: 999px;
  background: var(--rk-border);
  overflow: hidden;
  margin-bottom: 6px;
}
.simplecheckout .rk-free-shipping-bar-fill {
  height: 100%;
  background: var(--rk-primary);
  border-radius: 999px;
  transition: width .3s ease;
}
.simplecheckout .rk-free-shipping-text {
  font-size: 11.5px;
  color: var(--rk-ink-faint);
  text-align: center;
}
.simplecheckout .rk-free-shipping-text.is-done {
  color: var(--rk-primary);
  font-weight: 500;
}
/* variant: same bar, but inside the "Сума замовлення" cart summary card
   instead of the courier delivery tile -- no flex order/border-top needed,
   just spacing above (card already ends with the "До сплати" row). */
.simplecheckout .rk-free-shipping-progress--cart {
  order: initial;
  margin-top: 14px;
  padding-top: 0;
  border-top: none;
}
.simplecheckout .rk-free-shipping-progress--cart:empty {
  display: none;
}

/* ---- responsive ---- */
@media (max-width: 720px) {
  .simplecheckout #simplecheckout_step_menu {
    flex-wrap: wrap;
  }
  .simplecheckout .cart-delivery-item {
    min-width: calc(50% - 5px);
  }
  .simplecheckout .rk-locate-row {
    flex-wrap: wrap;
  }
  .simplecheckout .rk-address-search {
    flex: 1 1 100%;
    min-width: 0;
  }
  .simplecheckout .rk-locate-btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* rk: стан завантаження кнопки "Відправити замовлення" (анти-дубль кліків,
   спінер замість "нічого не відбулось") */
#rk-submit-order:disabled{opacity:.65;cursor:not-allowed;pointer-events:none}
#rk-submit-order.rk-btn-loading{position:relative}
#rk-submit-order.rk-btn-loading .button__text{visibility:hidden}
#rk-submit-order.rk-btn-loading::after{content:'';position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:rk-spin .7s linear infinite}
@keyframes rk-spin{to{transform:rotate(360deg)}}

/* rk: невалідний телефон (rk-phone) */
#customer_telephone.rk-input-error{border-color:#d9534f!important;background:#fdf3f3!important}
.rk-phone-error-msg{color:#d9534f;font-size:13px;margin-top:4px}

/* rk: охайніший список товарів у картці аптеки */
.simplecheckout .pharmacy__stock-item{justify-content:space-between}
.simplecheckout .pharmacy__stock-name{flex:1 1 auto;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.simplecheckout .pharmacy__stock-qty{flex:none;white-space:nowrap;text-align:right}
.simplecheckout .pharmacy__stock--collapsed .rk-stock-extra{display:none}
.simplecheckout .rk-stock-toggle{background:none;border:0;padding:2px 0 0;font-size:12.5px;font-weight:500;color:var(--ds-primary-color,#1a9cd8);cursor:pointer;text-decoration:underline}

/* rk: шрифт полів >= 16px на мобільних, інакше iOS Safari зумить сторінку
   при фокусі поля і не повертає зум назад (скарга: "після вибору відділення
   Нової Пошти картинка зумується і не повертається") */
@media (max-width: 991.98px){
  .simplecheckout input[type="text"],
  .simplecheckout input[type="tel"],
  .simplecheckout input[type="email"],
  .simplecheckout select,
  .simplecheckout textarea{font-size:16px !important}
}

/* rk: підказка про залишок біля кнопки "+" у кошику чекауту */
.simplecheckout .block-quantity{position:relative}
.simplecheckout .rk-stock-limit-hint{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:4px;font-size:11.5px;line-height:1.3;color:#d9534f;background:#fdf3f3;border:1px solid #f3c8c8;border-radius:6px;padding:3px 6px;text-align:center;opacity:0;pointer-events:none;transition:opacity .15s ease;max-width:min(220px,80vw);width:max-content;z-index:2}
.simplecheckout .rk-stock-limit-hint.is-visible{opacity:1}
/* rk (2026-07-21, узагальнено): #simplecheckout_shipping_address --
   vendor-контейнер. Для САМОВИВОЗУ в ньому реально живе НАШ список аптек
   (.list-pharmacy, через кастомний рядок field20/sklad_id) -- займати не
   можна. Для решти способів (кур'єрка/Укrposhta/Нова Пошта) там лишаються
   ЛИШЕ приховані інпути (zone_id/city/postcode), жодного видимого вмісту
   -- але порожній блок все одно рендерив білу картку з відступами.
   Замість прив'язки до конкретного способу (крихко -- довелось би
   дублювати правило під кожен новий метод) ховаємо за ознакою вмісту:
   блок без .list-pharmacy всередині -- завжди порожня оболонка. */
.simplecheckout #simplecheckout_shipping_address:not(:has(.list-pharmacy)) {
  display: none;
}
.simplecheckout .rk-shipping-info-note__text {
  flex: 1;
  min-width: 0;
}
.simplecheckout .rk-shipping-info-note__text .hrg-line {
  border-top-color: var(--rk-primary-wash-strong, #C7EBFB);
}

/* Приховуємо breadcrumb на чекауті — дублює текст H1 нижче (лише 1 рівень крихт тут).
   Цей файл підключається ЛИШЕ на сторінці чекауту, тому просте .breadcrumb безпечне. */
ul.breadcrumb {
  display: none;
}