/* СДЭК-виджет: карта ПВЗ (Leaflet/OSM) + расчёт. Стиль под тему tentoff (токены темы). */

/* Секция на странице «Доставка» */
.cdek-section { margin: 0 0 2rem; }
.cdek-section__title { font-family: var(--font-heading, sans-serif); color: var(--brand-green, #1e4620); margin: 0 0 .5rem; }
.cdek-section__lead { color: var(--ink-soft, #33423a); margin: 0 0 1rem; max-width: 60ch; }

.cdek { --cdek-pvz: var(--green, #1f6b41); --cdek-post: var(--amber, #e8720c); font-family: var(--font-body, sans-serif); color: var(--ink, #15211b); }

/* Поиск города + автоподсказка */
.cdek__search { position: relative; max-width: 420px; margin: 0 0 .75rem; }
.cdek__city {
	width: 100%; padding: .8rem 1rem; font-size: 1rem; font-family: inherit;
	border: 1px solid var(--line, #dcd6c8); border-radius: 10px; background: var(--paper, #fff); color: inherit;
}
.cdek__city:focus { outline: none; border-color: var(--cdek-pvz); box-shadow: 0 0 0 3px rgba(31,107,65,.15); }
.cdek__ac {
	position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 1200;
	margin: 0; padding: 4px; list-style: none; max-height: 320px; overflow-y: auto;
	background: var(--paper, #fff); border: 1px solid var(--line, #dcd6c8); border-radius: 10px;
	box-shadow: 0 18px 40px -14px rgba(0,0,0,.35);
}
.cdek__ac li { padding: .55rem .7rem; border-radius: 7px; cursor: pointer; display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.cdek__ac li:hover { background: var(--green-lite, #e7f0e8); }
.cdek__ac li span { color: var(--steel, #6a776f); font-size: .8rem; text-align: right; }

/* Раскладка карта + панель */
.cdek__body { display: flex; gap: 1rem; align-items: stretch; }
.cdek__map { flex: 1 1 auto; min-width: 0; height: 460px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line, #dcd6c8); background: #eceae3; }
.cdek__side { flex: 0 0 300px; display: flex; flex-direction: column; gap: .75rem; }

.cdek__result { padding: 1rem; border-radius: 12px; background: var(--green-lite, #e7f0e8); font-size: 1rem; line-height: 1.4; }
.cdek__price { font-family: var(--font-heading, sans-serif); font-size: 1.8rem; color: var(--price-deep, #5f9420); }
.cdek__term { color: var(--ink-soft, #33423a); }
.cdek__hint { color: var(--steel, #6a776f); font-size: .85rem; }
.cdek__err { padding: 1rem; color: var(--danger, #d23a2a); }

/* «Указать габариты» — не ссылка: подчёркивания нет, чуть крупнее, с отступом от блока выше. */
.cdek__dims-toggle {
	align-self: flex-start; margin-top: .75rem; padding: 0;
	background: none; border: none; cursor: pointer;
	font-family: var(--font-body, sans-serif); font-size: 1.05rem; font-weight: 600;
	color: var(--green, #1f6b41); text-decoration: none;
}
.cdek__dims-toggle:hover { color: var(--green-deep, #123a25); text-decoration: none; }
.cdek__dims { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.cdek__dim-f { display: flex; flex-direction: column; font-size: .8rem; color: var(--ink-soft, #33423a); gap: .25rem; }
.cdek__dim { padding: .5rem; border: 1px solid var(--line, #dcd6c8); border-radius: 8px; font: inherit; }
.cdek__dims .btn--sm, .cdek__recalc { grid-column: 1 / -1; }

/* Маркеры-пины (divIcon, без картинок) */
.cdek-pin { display: block; width: 22px; height: 22px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--cdek-pvz); border: 2px solid #fff; box-shadow: 0 3px 6px rgba(0,0,0,.4); }
.cdek-pin--post { background: var(--cdek-post); }

/* Попап пункта */
.cdek-pop { font-family: var(--font-body, sans-serif); font-size: .9rem; line-height: 1.4; max-width: 240px; }
.cdek-pop b { font-size: 1rem; }
.cdek-pop__w { color: var(--steel, #6a776f); }
.cdek-pop__type { margin: .35rem 0; font-size: .75rem; color: var(--cdek-pvz); text-transform: uppercase; letter-spacing: .04em; }

/* Кнопки виджета */
.cdek .btn--sm, .cdek-pop .btn { display: inline-block; padding: .5rem .9rem; font-size: .9rem; font-family: inherit; border: none; border-radius: 8px; background: var(--green, #1f6b41); color: #fff; cursor: pointer; }
.cdek .btn--sm:hover, .cdek-pop .btn:hover { background: var(--green-deep, #123a25); color: #fff; }

/* Официальный логотип СДЭК (инлайн в кнопках/строках итога) */
.cdek-logo { display: inline-block; vertical-align: -2px; height: 15px; width: auto; }
.cdek-logo--lg { height: 29px; vertical-align: -5px; }
/* Внутри кнопок логотип маленький — он опознавательный знак, а не главный элемент. */
button.cdek-pick .cdek-logo { height: 13px; vertical-align: 0; flex: 0 0 auto; }

/* Итоги корзины: товары / доставка / к оплате */
.cart-table tfoot .cart__ship-none { color: var(--steel, #6a776f); font-weight: 400; }
/* Строка доставки: логотип + город + кнопка выбора ПВЗ в одну линию, адрес — строкой ниже */
.cart-table tfoot .cart__ship-head { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .75rem; }
.cart-table tfoot .cart__ship-addr { margin-top: .35rem; font-size: .85rem; font-weight: 400; color: var(--steel, #6a776f); }
/* Габариты и вес, по которым посчитана доставка + неприметная кнопка правки. */
.cart-table tfoot .cart__ship-dims { margin-top: .15rem; font-size: .8rem; font-weight: 400; color: var(--steel, #6a776f); }
/* Кнопка правки габаритов — одинаковая в корзине и в форме заказа.
   Селектор без привязки к таблице (иначе в модалке стиль не применялся) и с тегом,
   чтобы правила темы для кнопок формы не перебивали. */
button.cart__dims-edit {
	display: inline; width: auto; margin: 0; padding: 0 0 0 .35rem;
	border: none; border-radius: 0; background: none; box-shadow: none; cursor: pointer;
	font-family: inherit; font-size: inherit; font-weight: 400; line-height: inherit;
	color: var(--green, #1f6b41); text-decoration: underline dotted;
}
button.cart__dims-edit:hover {
	background: none; color: var(--green-deep, #123a25);
	text-decoration-style: solid; transform: none;
}
/* Пояснение в блоке габаритов, когда они заданы в карточке товара. */
.cdek__dims-note { grid-column: 1 / -1; margin: .25rem 0 0; font-size: .8rem; color: var(--steel, #6a776f); }
.cdek__dims-hint { grid-column: 1 / -1; margin: 0 0 .25rem; font-size: .8rem; color: var(--steel, #6a776f); }
.cdek__dim[readonly] { background: #f2f1ec; color: var(--steel, #6a776f); cursor: not-allowed; }
.cart-table tfoot .cart__grand td { font-size: 1.15rem; border-top: 2px solid var(--line, #dcd6c8); }
.cart-table tfoot .cart__grand .cart__total { font-family: var(--font-heading, sans-serif); color: var(--price-deep, #5f9420); white-space: nowrap; }

/* Итог в модалке заказа товара */
.order-total { margin: .75rem 0; padding: .85rem 1rem; border-radius: 10px; background: var(--green-lite, #e7f0e8); }
.order-total[hidden] { display: none; }
.order-total__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .2rem 0; font-size: .95rem; }
.order-total__row b { white-space: nowrap; }
.order-total__addr { font-size: .8rem; color: var(--steel, #6a776f); }
.order-total__dims { font-size: .8rem; color: var(--steel, #6a776f); }
.order-total__grand { margin-top: .4rem; padding-top: .5rem; border-top: 1px solid rgba(0,0,0,.12); font-size: 1.1rem; }
.order-total__grand b { font-family: var(--font-heading, sans-serif); color: var(--price-deep, #5f9420); }

/* Кнопка «Выбрать ПВЗ» в форме заказа.
   Селектор с тегом (button.cdek-pick) — иначе правила темы для кнопок формы срезают рамку и фон,
   и кнопка читается как обычная надпись. */
button.cdek-pick {
	display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
	width: 100%; padding: .8rem 1.2rem; margin: .5rem 0;
	font-family: var(--font-body, sans-serif); font-size: 1rem; font-weight: 400; line-height: 1.2;
	border-radius: 10px; cursor: pointer;
	/* Светло-зелёная заливка (как блок «Итого к оплате») + отчётливая обводка:
	   на ней читается зелёный логотип СДЭК, и кнопка не спорит с главными CTA формы. */
	background: var(--green-lite, #e7f0e8); color: var(--ink, #15211b);
	border: 2px solid var(--green, #1f6b41);
	box-shadow: none;
	transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
button.cdek-pick:hover {
	background: #dbe9de; color: var(--ink, #15211b);
	border-color: var(--green-deep, #123a25); transform: translateY(-1px);
}
button.cdek-pick:focus-visible { outline: 3px solid var(--ink, #15211b); outline-offset: 2px; }
.cdek-note { font-size: .85rem; color: var(--ink-soft, #33423a); margin: .25rem 0; }

/* Модалка выбора ПВЗ */
.cdek-modal { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.cdek-modal[hidden] { display: none; }
.cdek-modal__ov { position: absolute; inset: 0; background: rgba(10,20,15,.55); }
.cdek-modal__box { position: relative; z-index: 1; width: min(960px, 100%); max-height: 90vh; overflow-y: auto; background: var(--paper, #fff); border-radius: 16px; padding: 1.5rem; box-shadow: 0 30px 80px -20px rgba(0,0,0,.5); }
.cdek-modal__box h3 { margin: 0 0 1rem; font-family: var(--font-heading, sans-serif); }
.cdek-modal__x { position: absolute; top: 10px; right: 14px; border: none; background: none; font-size: 2rem; line-height: 1; cursor: pointer; color: var(--steel, #6a776f); }
body.cdek-lock { overflow: hidden; }

/* --- Кнопка ПВЗ в строке доставки: заметная зелёная заливка. ---
   Идёт последней и с двойным классом — иначе базовый .cdek-pick (белый фон) перебивает её
   по порядку следования, и кнопка сливается с фоном таблицы. */
/* Тот же вид, что у кнопки в форме заказа (фон, обводка, логотип) — только компактнее. */
.cdek-pick.cdek-pick--inline {
	width: auto;   /* базовая кнопка формы — во всю ширину, в строке таблицы нужна компактная */
	padding: .45rem .85rem; margin: 0; line-height: 1.2;
	font-size: .9rem; font-weight: 400;
	border-radius: 8px;
}
.cdek-pick.cdek-pick--inline:focus-visible { outline: 3px solid var(--ink, #15211b); outline-offset: 2px; }

/* Адаптив */
@media (max-width: 760px) {
	.cdek__body { flex-direction: column; }
	.cdek__side { flex-basis: auto; }
	.cdek__map { height: 320px; }
	.cdek-modal__box { padding: 1rem; }
}