/* ============================================================
   Serikov Coffee 2026 — условия своей курьерской доставки
   на шаге «Доставка» оформления заказа.

   Кадра под эту подсказку в макете нет, поэтому новых фигур не
   вводим: берём приём, который на этой же странице уже работает —
   плашку описания способа (.bx-soa-pp-desc-container в site.css):
   заливка --bg-soft, скруглённый угол, мелкая подпись. Отличается
   только масштабом, потому что живёт внутри карточки способа.

   Цвета и кегли — docs/DESIGN-SYSTEM-FIGMA.md:
   подпись Regular 14/130 %, зелёный бренда #00723B, бордовый #8B2628.
   Контраст на заливке #f4f6f3: --ink-soft 7,8 · --green-brand 5,6 ·
   --cart 8,0 — норму WCAG 2.1 AA (1.4.3, 4,5) проходят все три.

   Блок вставляет скрипт в шаблоне компонента sale.order.ajax
   (.default/template.php, раздел «Условия своей доставки»).
   ============================================================ */

/* Карточка способа — колонка, и порядок детей в ней задан руками
   (site.css: значок 1, название 2, цена 3). Без своего order наша
   плашка со значением 0 встала бы ПЕРЕД значком службы. */
.sc-checkout .bx-soa-pp-company .scdf{
  order:4;
  width:100%;
  margin-top:calc(10 * var(--u));
  padding:calc(10 * var(--u)) calc(12 * var(--u));
  background:var(--bg-soft);
  border-radius:calc(14 * var(--u));
  font-family:var(--font);
  font-weight:400;
  font-size:calc(14 * var(--u));
  line-height:1.3;
  color:var(--ink-soft);
  display:flex;
  flex-direction:column;
  gap:calc(4 * var(--u));
  text-align:left;
}

/* Первая строка — деньги: либо «уже бесплатно», либо сколько добрать.
   Она одна выделена начертанием, остальное читается как примечание. */
.sc-checkout .bx-soa-pp-company .scdf-lead{
  font-weight:700;
  font-size:calc(14.5 * var(--u));
}
.sc-checkout .bx-soa-pp-company .scdf-lead.is-free{color:var(--green-brand)}
.sc-checkout .bx-soa-pp-company .scdf-lead.is-need{color:var(--cart)}

/* ---------- Что поправить перед оформлением ----------
   Сообщения ставит checkout-address.js, когда «Оформить заказ» нажали
   без номера дома или без пункта самовывоза. Цвет — бордовый, как у
   подсказки «уточните дом» под полем адреса (.sc-addr-geo-note.is-bad
   в site.css), чтобы все просьбы на странице читались одинаково.
   Новых рамок не вводим: меняется только цвет текста. */
.sc-checkout .sc-addr [data-addr-hint].is-bad{
  color:var(--bordo);
  font-weight:700;
}
.sc-pick .sc-pick-need{
  margin:calc(12 * var(--u)) 0 0;
  font-family:var(--font-ui);
  font-size:calc(13 * var(--u));
  line-height:1.45;
  font-weight:700;
  color:var(--bordo);
}
.sc-pick .sc-pick-need[hidden]{display:none}

/* ---------- Телефон ----------
   Здесь карточка способа — уже не колонка, а грид 3×2 из
   mobile/checkout.css (значок · название+срок · цена), и order на неё не
   действует. Место указываем явно: своя строка во всю ширину, под сроком,
   который вписывает mobile/checkout.js (.mch-dmeta во второй строке).
   Размеры в пикселях — как во всём мобильном слое. */
@media (max-width:767px), (max-width:1023px) and (max-height:520px){
  .sc-checkout .bx-soa-pp-item-container .bx-soa-pp-company .scdf{
    grid-column:1 / -1;
    grid-row:3;
    margin-top:8px;
    padding:8px 10px;
    border-radius:12px;
    font-size:13px;
    gap:3px;
  }
  .sc-checkout .bx-soa-pp-item-container .bx-soa-pp-company .scdf-lead{font-size:13.5px}
  .sc-pick .sc-pick-need{font-size:12.5px;line-height:1.4;margin-top:10px}
}

/* ---------- Планшет ----------
   Карточка остаётся колонкой из site.css, поэтому меняем только кегль. */
@media (min-width:768px) and (max-width:1023px) and (min-height:521px){
  .sc-checkout .bx-soa-pp-company .scdf{font-size:13px}
  .sc-checkout .bx-soa-pp-company .scdf-lead{font-size:13.5px}
}

/* ---------- Кружки легенды зон на карте ----------
   Строки легенды печатает checkout-address.js, а размеры кружка (10 * --u,
   скруглённый квадрат) заданы в site.css — их не трогаем, здесь только цвет.
   Кружок должен повторять то, что покупатель видит на карте, иначе легенда
   читается как отдельная схема: прозрачная зона с зелёным контуром, жёлтое
   и красное пятна маркером (заливка бледная, край плотнее).

   Селекторы длиннее, чем в site.css, потому что правила ниже перебивают его
   .sc-addr-zone-row .dot и .dot.is-paid порядком точности, а не !important:
   файл подключён до мобильного слоя, и !important сломал бы телефон. */
.sc-checkout .sc-addr-map .sc-addr-zones .sc-addr-zone-row .dot{
  box-sizing:border-box;
}
/* Первая зона: заливки нет, только контур — как на карте. */
.sc-checkout .sc-addr-map .sc-addr-zones .sc-addr-zone-row .dot.is-free{
  background:transparent;
  border:calc(2 * var(--u)) solid #2E7D32;
}
.sc-checkout .sc-addr-map .sc-addr-zones .sc-addr-zone-row .dot.is-paid{
  background:rgba(201,138,23,.22);
  border:calc(2 * var(--u)) solid rgba(201,138,23,.62);
}
.sc-checkout .sc-addr-map .sc-addr-zones .sc-addr-zone-row .dot.is-red{
  background:rgba(139,38,40,.2);
  border:calc(2 * var(--u)) solid rgba(139,38,40,.62);
}

/* На телефоне кружок 9px (mobile/checkout.css), и обводка в долях --u
   получалась бы тоньше волоса: ставим пиксель, как во всём мобильном слое. */
@media (max-width:767px), (max-width:1023px) and (max-height:520px){
  .sc-checkout .sc-addr-map .sc-addr-zones .sc-addr-zone-row .dot.is-free,
  .sc-checkout .sc-addr-map .sc-addr-zones .sc-addr-zone-row .dot.is-paid,
  .sc-checkout .sc-addr-map .sc-addr-zones .sc-addr-zone-row .dot.is-red{
    border-width:2px;
  }
}

/* Яндекс вне часов работы офиса (template.php, sc_work_hours.php).
   Серая и не нажимается, но видна: покупатель понимает, что Яндексом у нас
   можно, просто не сейчас. Приглушаем саму карточку, а подпись оставляем
   читаемой — ради неё карточка и видна. */
.bx-soa-pp-company.sc-closed{cursor:not-allowed}
.bx-soa-pp-company.sc-closed > :not(.sc-closed-note){filter:grayscale(1);opacity:.45}
/* место подписи — как у подсказки курьера (.scdf выше): под названием */
.sc-checkout .bx-soa-pp-company .sc-closed-note{
  order:4;
  width:100%;
  margin-top:calc(10 * var(--u));
  padding:calc(10 * var(--u)) calc(12 * var(--u));
  background:var(--bg-soft);
  border-radius:calc(14 * var(--u));
  font-family:var(--font);
  font-size:calc(14 * var(--u));
  line-height:1.3;
  color:var(--ink-soft);
  text-align:left;
}
@media (max-width:767px), (max-width:1023px) and (max-height:520px){
  .sc-checkout .bx-soa-pp-item-container .bx-soa-pp-company .sc-closed-note{
    grid-column:1 / -1;
    grid-row:3;
    margin-top:8px;
    padding:8px 10px;
    border-radius:12px;
    font-size:13px;
  }
}