/*
 * Mowiti — Cotele Dunării
 * Paleta și tipografia sunt preluate din tema „mowiti":
 *   fundal  #F4EEE1  · text #1D2321 · accent #C87941 · teal închis #1C4646
 *   titluri Bricolage Grotesque · text Albert Sans
 * Totul e limitat la .mwt-cote, ca să nu afecteze restul temei.
 * Culorile se pot suprascrie din Aspect → Personalizare → CSS suplimentar.
 */

.mwt-cote {
	--mwt-ink:        #1d2321;
	--mwt-ink-2:      #4a5250;
	--mwt-ink-3:      #7d8583;
	--mwt-cream:      #f4eee1;
	--mwt-cream-2:    #faf6ee;
	--mwt-surface:    #ffffff;
	--mwt-accent:     #c87941;
	--mwt-teal:       #1c4646;
	--mwt-teal-deep:  #0e2a2b;
	--mwt-brown:      #6b4226;
	--mwt-linie:      rgba(29, 35, 33, .12);
	--mwt-linie-fina: rgba(29, 35, 33, .07);
	--mwt-radius:     18px;
	--mwt-font:       "Albert Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
	--mwt-font-titlu: "Bricolage Grotesque", "Albert Sans", ui-sans-serif, system-ui, sans-serif;

	font-family: var(--mwt-font);
	color: var(--mwt-ink);
	font-size: 16px;
	line-height: 1.5;
	background: var(--mwt-surface);
	border: 1px solid var(--mwt-linie);
	border-radius: var(--mwt-radius);
	overflow: hidden;
	margin: 2rem 0;
}

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

/* ---------- antet ---------- */
.mwt-cote__head {
	padding: 26px 28px 20px;
	background: var(--mwt-cream-2);
	border-bottom: 1px solid var(--mwt-linie);
}
.mwt-cote__titlu {
	font-family: var(--mwt-font-titlu);
	font-weight: 700;
	font-size: clamp(22px, 3vw, 30px);
	letter-spacing: -.03em;
	line-height: 1.15;
	color: var(--mwt-ink);
	margin: 0;
}
.mwt-cote__subtitlu {
	margin: 7px 0 0;
	font-size: 15px;
	color: var(--mwt-ink-2);
	max-width: 62ch;
}

/* ---------- stații ---------- */
.mwt-cote__statii {
	display: flex;
	gap: 7px;
	flex-wrap: wrap;
	padding: 16px 28px;
	border-bottom: 1px solid var(--mwt-linie);
}
.mwt-cote__st {
	appearance: none;
	cursor: pointer;
	font: inherit;
	font-size: 14.5px;
	font-weight: 600;
	padding: 9px 18px;
	border-radius: 999px;
	border: 1px solid var(--mwt-linie);
	background: transparent;
	color: var(--mwt-ink-2);
	transition: background .16s, color .16s, border-color .16s;
	line-height: 1.2;
}
.mwt-cote__st:hover { border-color: var(--mwt-teal); color: var(--mwt-teal); }
.mwt-cote__st[aria-pressed="true"] {
	background: var(--mwt-teal);
	border-color: var(--mwt-teal);
	color: #fff;
}
.mwt-cote__st:focus-visible { outline: 2px solid var(--mwt-accent); outline-offset: 2px; }

/* ---------- controale ---------- */
.mwt-cote__controale {
	display: flex;
	gap: 22px;
	align-items: flex-end;
	flex-wrap: wrap;
	padding: 16px 28px;
	background: var(--mwt-cream);
	border-bottom: 1px solid var(--mwt-linie);
}
.mwt-cote__grup { display: flex; flex-direction: column; gap: 7px; }
.mwt-cote__eticheta {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mwt-ink-3);
}
.mwt-cote__perioade {
	display: flex;
	gap: 3px;
	background: var(--mwt-surface);
	padding: 3px;
	border: 1px solid var(--mwt-linie);
	border-radius: 999px;
}
.mwt-cote__p {
	appearance: none;
	cursor: pointer;
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	padding: 8px 15px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--mwt-ink-2);
	transition: background .16s, color .16s;
	line-height: 1.2;
}
.mwt-cote__p:hover { background: var(--mwt-cream); color: var(--mwt-ink); }
.mwt-cote__p[aria-pressed="true"] { background: var(--mwt-ink); color: #fff; }
.mwt-cote__p:focus-visible { outline: 2px solid var(--mwt-accent); outline-offset: 2px; }

.mwt-cote__date { display: flex; gap: 8px; align-items: center; }
.mwt-cote__date input {
	font: inherit;
	font-size: 14px;
	padding: 8px 12px;
	border-radius: 999px;
	border: 1px solid var(--mwt-linie);
	background: var(--mwt-surface);
	color: var(--mwt-ink);
	min-width: 9.5rem;
}
.mwt-cote__sageata { color: var(--mwt-ink-3); }

.mwt-cote__comutator {
	display: flex;
	align-items: center;
	gap: 9px;
	cursor: pointer;
	font-size: 14px;
	color: var(--mwt-ink-2);
	user-select: none;
	padding-bottom: 9px;
}
.mwt-cote__comutator input { accent-color: var(--mwt-accent); width: 17px; height: 17px; cursor: pointer; margin: 0; }

/* ---------- indicatori ---------- */
.mwt-cote__indicatori {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-bottom: 1px solid var(--mwt-linie);
}
.mwt-cote__ind { padding: 17px 22px; border-right: 1px solid var(--mwt-linie-fina); }
.mwt-cote__ind:last-child { border-right: 0; }
.mwt-cote__ind-k {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--mwt-ink-3);
}
.mwt-cote__ind-v {
	font-family: var(--mwt-font-titlu);
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -.035em;
	margin-top: 5px;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}
.mwt-cote__ind-n { font-size: 12.5px; color: var(--mwt-ink-3); margin-top: 3px; }
.mwt-cote__sus { color: #2f6b45; }
.mwt-cote__jos { color: var(--mwt-brown); }

/* ---------- grafic ---------- */
.mwt-cote__grafic { padding: 20px 16px 10px; position: relative; }
.mwt-cote__grafic canvas { display: block; }
.mwt-cote__stare {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 1rem;
	text-align: center;
	color: var(--mwt-ink-3);
	font-size: 14.5px;
	background: var(--mwt-surface);
}
.mwt-cote--gata .mwt-cote__stare { display: none; }

/* ---------- subsol ---------- */
.mwt-cote__subsol {
	padding: 13px 28px 17px;
	font-size: 12.5px;
	color: var(--mwt-ink-3);
	border-top: 1px solid var(--mwt-linie);
	display: flex;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	background: var(--mwt-cream-2);
}

/* ---------- mobil ---------- */
@media (max-width: 782px) {
	.mwt-cote__head,
	.mwt-cote__statii,
	.mwt-cote__controale,
	.mwt-cote__subsol { padding-left: 18px; padding-right: 18px; }
	.mwt-cote__indicatori { grid-template-columns: 1fr 1fr; }
	.mwt-cote__ind:nth-child(2) { border-right: 0; }
	.mwt-cote__ind:nth-child(1),
	.mwt-cote__ind:nth-child(2) { border-bottom: 1px solid var(--mwt-linie-fina); }
	.mwt-cote__ind { padding: 14px 18px; }
	.mwt-cote__ind-v { font-size: 23px; }
	.mwt-cote__grafic { padding: 14px 6px 6px; height: 320px !important; }
	.mwt-cote__controale { gap: 14px; }
	.mwt-cote__perioade { flex-wrap: wrap; }
	.mwt-cote__date input { min-width: 8.5rem; }
}

@media (prefers-reduced-motion: reduce) {
	.mwt-cote * { transition: none !important; }
}