/* ==========================================================================
   CHIKSY.PROMOCODE — планка промокода.
   Оформление в тон сайту: тёмная панель, янтарная рамка, те же радиусы,
   кегли и переменные, что в css/chx/01-tokens.css. Ничего своего не
   вводим, кроме имён классов с префиксом chx-promo-bar.
   ========================================================================== */

.chx-promo-bar {
	display: block;
	margin: var(--s-3, 12px) 0 var(--s-2, 8px);
}

/* Полоса собрана на переносе строк, а не на медиазапросах: планка живёт
   внутри корзины, а та — узкая панель (360–440 px) на любом экране.
   Ширину окна здесь мерить нельзя, поэтому раскладка такая:
     • есть место — значок, текст и поле в одну строку;
     • не хватает — поле с кнопкой уезжает на вторую строку во всю ширину,
       а текст остаётся читаемым, а не по одному слову в столбик. */
.chx-promo-bar .chx-promo-bar__in {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-2, 8px) var(--s-3, 12px);
	padding: var(--s-3, 12px) var(--s-4, 16px);
	border: 1px solid var(--line-promo, #433832);
	border-radius: var(--r-md, 14px);
	background: linear-gradient(90deg, var(--panel-promo-l, #08090A), var(--panel-promo-r, #0F0B07));
	box-shadow: var(--shadow-card, 0 2px 14px rgba(0, 0, 0, .5));
}

.chx-promo-bar .chx-promo-bar__in.chx-promo-bar--on {
	border-color: var(--green-a, #2A8019);
	background: linear-gradient(90deg, #0A1208, #0F1A0C);
}

.chx-promo-bar .chx-promo-bar__ico {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: var(--r-pill, 999px);
	background: var(--glow-amber, rgba(230, 124, 18, .26));
	color: var(--amber-hot, #F7962A);
}

.chx-promo-bar .chx-promo-bar--on .chx-promo-bar__ico {
	background: rgba(42, 128, 25, .28);
	color: #6FD24E;
}

.chx-promo-bar .chx-promo-bar__body {
	flex: 1 1 200px;
	min-width: 0;
}

.chx-promo-bar .chx-promo-bar__t {
	font-family: var(--font-body, 'Manrope', 'Segoe UI', system-ui, sans-serif);
	font-size: var(--t-small, 14px);
	line-height: 1.35;
	color: var(--text-warm, #F2EADD);
	overflow-wrap: break-word;
}

.chx-promo-bar .chx-promo-bar__t b {
	color: var(--amber-hot, #F7962A);
	letter-spacing: .04em;
}

.chx-promo-bar .chx-promo-bar--on .chx-promo-bar__t b {
	color: #7FE05C;
}

.chx-promo-bar .chx-promo-bar__s {
	margin-top: 2px;
	font-family: var(--font-body, 'Manrope', 'Segoe UI', system-ui, sans-serif);
	font-size: var(--t-tiny, 11px);
	line-height: 1.35;
	color: var(--gray-4, #9A9A9A);
}

.chx-promo-bar .chx-promo-bar__err {
	margin-top: 3px;
	font-family: var(--font-body, 'Manrope', 'Segoe UI', system-ui, sans-serif);
	font-size: var(--t-tiny, 11px);
	color: var(--red-text, #F0402F);
}

.chx-promo-bar .chx-promo-bar__form {
	flex: 1 1 230px;
	display: flex;
	align-items: center;
	gap: var(--s-2, 8px);
	min-width: 0;
}

.chx-promo-bar .chx-promo-bar__input {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	height: var(--h-btn-sm, 34px);
	padding: 0 var(--s-3, 12px);
	border: 1px solid var(--line-cat, #363536);
	border-radius: var(--r-sm, 10px);
	background: var(--bg-soft, #060607);
	color: var(--text, #FFFFFF);
	font-family: var(--font-body, 'Manrope', 'Segoe UI', system-ui, sans-serif);
	font-size: var(--t-small, 14px);
	text-transform: uppercase;
	letter-spacing: .06em;
}

.chx-promo-bar .chx-promo-bar__input::placeholder {
	color: var(--gray-5, #888886);
	text-transform: none;
	letter-spacing: 0;
}

.chx-promo-bar .chx-promo-bar__input:focus {
	outline: none;
	border-color: var(--amber, #E67C12);
}

.chx-promo-bar .chx-promo-bar__go {
	flex: 0 0 auto;
	height: var(--h-btn-sm, 34px);
	padding: 0 var(--s-4, 16px);
	border: 0;
	border-radius: var(--r-sm, 10px);
	background: linear-gradient(180deg, var(--amber-hot, #F7962A), var(--amber-btn, #EE8521));
	color: #241203;
	font-family: var(--font-body, 'Manrope', 'Segoe UI', system-ui, sans-serif);
	font-size: var(--t-small, 14px);
	font-weight: 700;
	cursor: pointer;
	transition: filter var(--fast, .16s);
	white-space: nowrap;
}

.chx-promo-bar .chx-promo-bar__go:hover:not(:disabled) {
	filter: brightness(1.08);
}

.chx-promo-bar .chx-promo-bar__go:disabled {
	opacity: .6;
	cursor: default;
}

.chx-promo-bar .chx-promo-bar__x {
	flex: 0 0 auto;
	height: var(--h-btn-sm, 34px);
	padding: 0 var(--s-3, 12px);
	border: 1px solid var(--line-ghost, #3E3E3E);
	border-radius: var(--r-sm, 10px);
	background: transparent;
	color: var(--gray-2, #C0C0BE);
	font-family: var(--font-body, 'Manrope', 'Segoe UI', system-ui, sans-serif);
	font-size: var(--t-tiny, 11px);
	cursor: pointer;
	transition: border-color var(--fast, .16s);
	white-space: nowrap;
}

.chx-promo-bar .chx-promo-bar__x:hover:not(:disabled) {
	border-color: var(--gray-4, #9A9A9A);
	color: var(--text-warm, #F2EADD);
}

/* Строка-подарок по промокоду: у неё не должно быть кнопок количества —
   подарком распоряжается промокод. Само количество оставляем видимым. */
.basket-item.chx-promo-gift .basket-action-btn {
	display: none !important;
}

.basket-item.chx-promo-gift .basket-remove-btn {
	display: none !important;
}