/* ==========================================================================
   Simulador interativo de cortinas — barrinhas (sliders)
   ========================================================================== */

.csl {
	--csl-vinho: #800203;
	--csl-vinho-esc: #5e0102;
	--csl-gold: #c9a227;
	--csl-creme: #faf6f2;
	--csl-borda: #e6dbd1;
	--csl-texto: #2a2a2a;
	--csl-texto-2: #6b615c;
	--csl-wa: #25d366;

	background: #fff;
	border-radius: 20px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .18);
	overflow: hidden;
	color: var(--csl-texto);
	font-family: "Inter", system-ui, -apple-system, sans-serif;
	text-align: left;
}
.csl * { box-sizing: border-box; }

.csl__grid {
	display: grid;
	grid-template-columns: 1fr;
}

/* ---------- Coluna de controles ---------- */
.csl__controls {
	padding: 26px 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.csl__field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }

/* Dois campos lado a lado (Tecido + Franzido) */
.csl__row { display: grid; grid-template-columns: 1fr; gap: 16px; min-width: 0; }
@media (min-width: 560px) {
	.csl__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.csl__label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--csl-texto);
}

.csl__hint { font-size: 12px; color: var(--csl-texto-2); }

/* ---------- Chips (tipo / bainha) ---------- */
.csl__chips { display: flex; flex-wrap: wrap; gap: 8px; }

.csl__chip {
	appearance: none;
	background: var(--csl-creme);
	border: 1.5px solid var(--csl-borda);
	border-radius: 999px;
	padding: 10px 16px;
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	color: var(--csl-texto);
	cursor: pointer;
	transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.csl__chip small { font-size: 12px; opacity: .75; }
.csl__chip:hover { border-color: var(--csl-vinho); transform: translateY(-1px); }
.csl__chip.is-active {
	background: var(--csl-vinho);
	border-color: var(--csl-vinho);
	color: #fff;
	font-weight: 600;
}
.csl__chip.is-active small { opacity: .85; }
.csl__chip:focus-visible { outline: 3px solid rgba(128, 2, 3, .35); outline-offset: 2px; }

/* ---------- Barrinhas (range) ---------- */
.csl__slider-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

.csl__value {
	font-size: 15px;
	font-weight: 700;
	color: var(--csl-vinho);
	background: var(--csl-creme);
	border-radius: 999px;
	padding: 4px 12px;
	min-width: 78px;
	text-align: center;
}

.csl__range {
	--pct: 30%;
	appearance: none;
	width: 100%;
	height: 8px;
	border-radius: 999px;
	background: linear-gradient(to right, var(--csl-vinho) 0 var(--pct), #e9e0d8 var(--pct) 100%);
	outline: none;
	cursor: pointer;
	margin: 4px 0;
}
/* Thumb — WebKit */
.csl__range::-webkit-slider-thumb {
	appearance: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--csl-vinho);
	box-shadow: 0 3px 10px rgba(128, 2, 3, .35);
	cursor: grab;
	transition: transform .15s ease;
}
.csl__range::-webkit-slider-thumb:active { transform: scale(1.15); cursor: grabbing; }
/* Thumb — Firefox */
.csl__range::-moz-range-thumb {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--csl-vinho);
	box-shadow: 0 3px 10px rgba(128, 2, 3, .35);
	cursor: grab;
}
.csl__range:focus-visible { outline: 3px solid rgba(128, 2, 3, .35); outline-offset: 4px; }

/* ---------- Selects ---------- */
.csl__select {
	width: 100%;
	padding: 13px 14px;
	border: 1.5px solid var(--csl-borda);
	border-radius: 10px;
	background: var(--csl-creme);
	font: inherit;
	font-size: 15px;
	color: var(--csl-texto);
	min-height: 44px;
}
.csl__select:focus { outline: none; border-color: var(--csl-vinho); background: #fff; }

/* ---------- Toggles ---------- */
.csl__toggles { display: flex; flex-wrap: wrap; gap: 18px; }
.csl__toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; min-height: 44px; }
.csl__toggle input { width: 20px; height: 20px; accent-color: var(--csl-vinho); cursor: pointer; }

/* ==========================================================================
   Painel de resumo
   ========================================================================== */
.csl__panel {
	/* Tom bem mais escuro que o fundo vinho da seção, para o painel ler como cartão */
	background: linear-gradient(165deg, #3d0102 0%, #520102 100%);
	border-left: 1px solid rgba(255, 255, 255, .10);
	color: #fff;
	padding: 28px 24px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
}

/* Prévia visual da cortina */
.csl__preview {
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 14px;
	padding: 18px;
	height: 190px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
}
.csl__window {
	position: relative;
	width: 60%;
	height: 70%;
	background: linear-gradient(180deg, #ffe9a8 0%, #ffd166 100%);
	border-radius: 6px;
	box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .3);
	transition: width .35s cubic-bezier(.4, 0, .2, 1), height .35s cubic-bezier(.4, 0, .2, 1);
	overflow: hidden;
}
.csl__curtain {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 18%;
	background: repeating-linear-gradient(90deg, #f7f3ee 0 4px, #ded3c6 4px 8px);
	transition: width .35s cubic-bezier(.4, 0, .2, 1);
}
.csl__curtain--l { left: 0; border-right: 1px solid rgba(0, 0, 0, .08); }
.csl__curtain--r { right: 0; border-left: 1px solid rgba(0, 0, 0, .08); }
.csl__preview-dims { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .9); }

/* Resumo de itens */
.csl__resumo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.csl__resumo li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 14px;
	color: rgba(255, 255, 255, .88);
	padding-bottom: 8px;
	border-bottom: 1px dashed rgba(255, 255, 255, .2);
}
.csl__resumo li span:last-child { font-weight: 600; white-space: nowrap; }

/* Total */
.csl__total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 4px; }
.csl__total-label { font-size: 14px; color: rgba(255, 255, 255, .85); }
.csl__total-value { font-size: 30px; font-weight: 800; color: var(--csl-gold); line-height: 1.1; }

.csl__disclaimer { font-size: 11.5px; line-height: 1.5; color: rgba(255, 255, 255, .68); margin: 0; }

/* Botão WhatsApp */
.csl__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: var(--csl-wa);
	color: #fff !important;
	text-decoration: none;
	font-weight: 700;
	font-size: 16px;
	padding: 16px 20px;
	border-radius: 999px;
	min-height: 52px;
	transition: transform .18s ease, filter .18s ease;
}
.csl__btn svg { width: 22px; height: 22px; fill: #fff; }
.csl__btn:hover { filter: brightness(.94); transform: translateY(-2px); color: #fff !important; }
.csl__btn:focus-visible { outline: 3px solid rgba(255, 255, 255, .6); outline-offset: 3px; }

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (min-width: 860px) {
	.csl__grid { grid-template-columns: 1.2fr 1fr; }
	.csl__controls { padding: 30px 34px; }
	.csl__panel { padding: 30px 32px; gap: 14px; }
	/* A prévia cresce para preencher a altura do painel — mais imersivo */
	.csl__preview { flex: 1; height: auto; min-height: 170px; }
}

/* Em telas largas, um pouco mais de respiro */
@media (min-width: 1200px) {
	.csl__controls { padding: 34px 44px; gap: 18px; }
	.csl__panel { padding: 34px 38px; }
	.csl__preview { min-height: 190px; }
	.csl__total-value { font-size: 32px; }
}

@media (prefers-reduced-motion: reduce) {
	.csl__window, .csl__curtain, .csl__chip, .csl__btn, .csl__range::-webkit-slider-thumb { transition: none; }
}