/*
 * EtG Calculator — responsive stylesheet
 * Mobile-first. All heading-looking elements are <span class="etgc-title"> etc.
 * No horizontal overflow at any breakpoint.
 * All selectors namespaced under .etgc-root to prevent host-theme collisions.
 * All color / typography declarations use !important so host WordPress themes
 * cannot bleed styles onto the calculator.
 */

.etgc-root,
.etgc-root *,
.etgc-root *::before,
.etgc-root *::after {
	box-sizing: border-box;
}

/* Ensure [hidden] wins over any display: flex/grid rule below. */
.etgc-root [hidden] { display: none !important; }

.etgc-root {
	--etgc-primary: #0D9488;
	--etgc-primary-dark: #04403A;
	--etgc-primary-tint: #E6F5F3;
	--etgc-primary-tint-2: #CDEBE7;
	--etgc-bg: #FEFEFE;
	--etgc-card: #FFFFFF;
	--etgc-border: #ECECEC;
	--etgc-border-strong: #E0E0E0;
	--etgc-ink-1: #111111;
	--etgc-ink-2: #555555;
	--etgc-ink-3: #999999;
	--etgc-ink-4: #CCCCCC;
	--etgc-warn-bg: #FEF3C7;
	--etgc-warn-fg: #92400E;
	--etgc-warn-line: #D97706;
	--etgc-risk-bg: #FEE2E2;
	--etgc-risk-fg: #991B1B;
	--etgc-risk-line: #DC2626;
	--etgc-radius-card: 16px;
	--etgc-radius-input: 10px;
	--etgc-shadow: 0 1px 2px rgba(17,17,17,.03);
	--etgc-focus: 0 0 0 3px rgba(13,148,136,.18);

	max-width: 100%;
	color: var(--etgc-ink-1) !important;
	background: transparent !important;
	font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif !important;
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

.etgc-root img,
.etgc-root svg {
	max-width: 100%;
	height: auto;
}

/* ---------- tabs ---------- */
.etgc-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
}
.etgc-pill {
	appearance: none;
	-webkit-appearance: none;
	border: 1px solid var(--etgc-border-strong) !important;
	background: var(--etgc-card) !important;
	color: var(--etgc-ink-2) !important;
	padding: 8px 14px;
	border-radius: 999px !important;
	font: inherit;
	font-size: 13.5px !important;
	font-weight: 500 !important;
	cursor: pointer;
	transition: all .15s ease;
	max-width: 100%;
	text-transform: none !important;
	letter-spacing: normal !important;
	text-decoration: none !important;
	line-height: 1.3 !important;
}
.etgc-pill:hover { border-color: var(--etgc-primary) !important; color: var(--etgc-primary) !important; }
.etgc-pill:focus-visible { outline: none !important; box-shadow: var(--etgc-focus) !important; }
.etgc-pill.is-active {
	background: var(--etgc-primary-tint) !important;
	border-color: var(--etgc-primary-tint-2) !important;
	color: var(--etgc-primary-dark) !important;
	font-weight: 600 !important;
}

/* ---------- grid ---------- */
.etgc-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}
@media (min-width: 900px) {
	.etgc-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
}

/* ---------- card ---------- */
.etgc-card {
	background: var(--etgc-card) !important;
	border: 1px solid var(--etgc-border) !important;
	border-radius: var(--etgc-radius-card) !important;
	padding: 20px;
	box-shadow: var(--etgc-shadow) !important;
	color: var(--etgc-ink-1) !important;
	min-width: 0;
}
@media (min-width: 600px) { .etgc-card { padding: 24px; } }
@media (min-width: 900px) { .etgc-card { padding: 28px; } }

.etgc-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 18px;
}

/* headings-as-spans */
.etgc-title {
	display: block;
	font-size: 17px !important;
	font-weight: 600 !important;
	color: var(--etgc-ink-1) !important;
	line-height: 1.3 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	margin: 0 !important;
}
@media (min-width: 600px) { .etgc-title { font-size: 18px !important; } }

/* ---------- form ---------- */
.etgc-fields {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px 14px;
}
@media (min-width: 520px) { .etgc-fields { grid-template-columns: 1fr 1fr; } }
.etgc-field-full { grid-column: 1 / -1; }
.etgc-field { min-width: 0; }

.etgc-label {
	display: block;
	font-size: 13px !important;
	color: var(--etgc-ink-2) !important;
	margin-bottom: 6px;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

.etgc-input,
.etgc-select {
	width: 100%;
	max-width: 100%;
	border: 1px solid var(--etgc-border-strong) !important;
	background: #fff !important;
	border-radius: var(--etgc-radius-input) !important;
	padding: 11px 13px;
	font: inherit;
	font-size: 14px !important;
	color: var(--etgc-ink-1) !important;
	outline: none !important;
	transition: border-color .15s, box-shadow .15s;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	line-height: 1.4 !important;
}
.etgc-input::placeholder { color: var(--etgc-ink-3) !important; opacity: 1 !important; }
.etgc-input:focus,
.etgc-select:focus { border-color: var(--etgc-primary) !important; box-shadow: var(--etgc-focus) !important; }

.etgc-select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23999'><path d='M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.06l3.71-3.83a.75.75 0 1 1 1.08 1.04l-4.25 4.39a.75.75 0 0 1-1.08 0L5.21 8.27a.75.75 0 0 1 .02-1.06z'/></svg>") !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
	background-size: 16px !important;
	padding-right: 36px;
}

.etgc-unit-wrap { position: relative; display: flex; }
.etgc-unit-wrap .etgc-input { padding-right: 60px; }
.etgc-unit-badge {
	position: absolute;
	right: 4px; top: 4px; bottom: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--etgc-primary) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 8px !important;
	padding: 0 14px;
	font: inherit;
	font-size: 13px !important;
	font-weight: 600 !important;
	min-width: 44px;
	cursor: pointer;
	transition: background .15s;
	text-shadow: none !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}
.etgc-unit-badge:hover { background: var(--etgc-primary-dark) !important; }
.etgc-unit-badge:focus-visible { outline: none !important; box-shadow: var(--etgc-focus) !important; }

/* ---------- multi-drink rows ---------- */
.etgc-drinks {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 18px 0 12px;
}
.etgc-drink-row {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 10px;
	align-items: start;
	background: var(--etgc-primary-tint) !important;
	border-radius: 12px !important;
	padding: 12px;
	min-width: 0;
	color: var(--etgc-ink-1) !important;
}
.etgc-drink-idx {
	background: var(--etgc-primary) !important;
	color: #fff !important;
	width: 28px; height: 28px;
	border-radius: 50% !important;
	display: grid; place-items: center;
	font-size: 13px !important;
	font-weight: 700 !important;
	flex-shrink: 0;
	margin-top: 20px;
	line-height: 1 !important;
}
.etgc-drink-fields {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	min-width: 0;
}
@media (min-width: 480px) { .etgc-drink-fields { grid-template-columns: 1fr 1fr 1fr; } }
.etgc-drink-remove {
	background: transparent !important;
	border: 0 !important;
	color: var(--etgc-ink-3) !important;
	font-size: 22px !important;
	line-height: 1 !important;
	padding: 6px 10px;
	border-radius: 8px !important;
	cursor: pointer;
	transition: all .15s;
	margin-top: 18px;
	flex-shrink: 0;
	box-shadow: none !important;
	text-shadow: none !important;
}
.etgc-drink-remove:hover { color: var(--etgc-risk-line) !important; background: rgba(220,38,38,.08) !important; }
.etgc-drink-remove:focus-visible { outline: none !important; box-shadow: var(--etgc-focus) !important; }

.etgc-add-drink {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: transparent !important;
	color: var(--etgc-primary) !important;
	border: 1px dashed var(--etgc-primary) !important;
	border-radius: 10px !important;
	padding: 10px 16px;
	font: inherit;
	font-size: 14px !important;
	font-weight: 600 !important;
	cursor: pointer;
	transition: all .15s;
	text-transform: none !important;
	letter-spacing: normal !important;
	text-decoration: none !important;
	line-height: 1.3 !important;
	box-shadow: none !important;
	text-shadow: none !important;
}
.etgc-add-drink:hover { background: var(--etgc-primary-tint) !important; }
.etgc-add-drink:focus-visible { outline: none !important; box-shadow: var(--etgc-focus) !important; }
.etgc-add-drink span[aria-hidden] { font-size: 16px !important; line-height: 1 !important; }

/* ---------- actions ---------- */
.etgc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.etgc-actions-secondary { margin-top: 16px; }

.etgc-btn {
	border-radius: var(--etgc-radius-input) !important;
	padding: 12px 18px;
	font: inherit;
	font-size: 14.5px !important;
	font-weight: 600 !important;
	border: 1px solid transparent !important;
	cursor: pointer;
	transition: all .15s;
	max-width: 100%;
	text-align: center !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	text-decoration: none !important;
	text-shadow: none !important;
	box-shadow: none !important;
}
.etgc-btn-primary {
	background: var(--etgc-primary) !important;
	color: #fff !important;
	border-color: var(--etgc-primary) !important;
	flex: 1 1 200px;
}
.etgc-btn-primary:hover { background: var(--etgc-primary-dark) !important; border-color: var(--etgc-primary-dark) !important; color: #fff !important; }
.etgc-btn-ghost {
	background: #fff !important;
	color: var(--etgc-ink-2) !important;
	border-color: var(--etgc-border-strong) !important;
	flex: 0 1 auto;
}
.etgc-btn-ghost:hover { color: var(--etgc-ink-1) !important; border-color: var(--etgc-ink-4) !important; background: #fff !important; }
.etgc-btn:focus-visible { outline: none !important; box-shadow: var(--etgc-focus) !important; }

.etgc-actions-secondary .etgc-btn { flex: 1 1 130px; }

.etgc-foot {
	display: block;
	text-align: center !important;
	font-size: 12.5px !important;
	color: var(--etgc-ink-3) !important;
	margin-top: 16px;
	line-height: 1.4 !important;
	font-weight: 400 !important;
}

/* ---------- badges ---------- */
.etgc-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #F5F5F5 !important;
	color: var(--etgc-ink-3) !important;
	padding: 5px 12px;
	border-radius: 999px !important;
	font-size: 12.5px !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	max-width: 100%;
	border: 0 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}
.etgc-badge .etgc-dot {
	width: 6px; height: 6px;
	border-radius: 50% !important;
	background: currentColor !important;
	opacity: .6;
	flex-shrink: 0;
}
.etgc-badge-awaiting { background: #F5F5F5 !important; color: var(--etgc-ink-3) !important; }
.etgc-badge-ok       { background: var(--etgc-primary-tint) !important; color: var(--etgc-primary-dark) !important; }
.etgc-badge-warn     { background: var(--etgc-warn-bg) !important; color: var(--etgc-warn-fg) !important; }
.etgc-badge-risk     { background: var(--etgc-risk-bg) !important; color: var(--etgc-risk-fg) !important; }

/* ---------- empty state ---------- */
.etgc-empty {
	background: var(--etgc-primary-tint) !important;
	border-radius: 12px !important;
	padding: 40px 20px;
	text-align: center !important;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	color: var(--etgc-ink-1) !important;
}
@media (min-width: 600px) { .etgc-empty { padding: 56px 24px; } }
.etgc-empty-head {
	font-size: 15px !important;
	font-weight: 600 !important;
	color: var(--etgc-ink-1) !important;
	line-height: 1.3 !important;
}
.etgc-empty-sub {
	font-size: 13px !important;
	color: var(--etgc-ink-3) !important;
	line-height: 1.3 !important;
	font-weight: 400 !important;
}

/* ---------- result stats ---------- */
.etgc-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-bottom: 18px;
}
@media (max-width: 379px) { .etgc-stats { grid-template-columns: 1fr; } }
.etgc-stat {
	background: var(--etgc-primary-tint) !important;
	border-radius: 12px !important;
	padding: 14px 16px;
	min-width: 0;
	color: var(--etgc-ink-1) !important;
}
.etgc-stat-lbl {
	display: block;
	font-size: 11px !important;
	color: var(--etgc-ink-2) !important;
	margin-bottom: 6px;
	text-transform: uppercase !important;
	letter-spacing: .4px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
}
.etgc-stat-val {
	display: block;
	font-size: 22px !important;
	font-weight: 700 !important;
	color: var(--etgc-primary-dark) !important;
	line-height: 1.1 !important;
	overflow-wrap: break-word;
	word-break: break-word;
	text-transform: none !important;
}
@media (min-width: 600px) { .etgc-stat-val { font-size: 24px !important; } }
.etgc-stat-val small {
	font-size: 12px !important;
	color: var(--etgc-ink-2) !important;
	font-weight: 500 !important;
	margin-left: 4px;
}

/* ---------- chart ---------- */
.etgc-chart-wrap {
	border: 1px solid var(--etgc-border) !important;
	border-radius: 12px !important;
	padding: 14px 10px 6px;
	background: #fff !important;
	overflow: hidden;
}
.etgc-chart-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0 6px 8px;
}
.etgc-chart-title {
	display: block;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--etgc-ink-2) !important;
	line-height: 1.3 !important;
}
.etgc-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 11.5px !important;
	color: var(--etgc-ink-3) !important;
}
.etgc-legend span { display: inline-flex; align-items: center; gap: 5px; }
.etgc-legend i { display: inline-block; width: 12px; height: 0; border-top: 2px dashed !important; }
.etgc-l-100 i { border-color: var(--etgc-primary) !important; }
.etgc-l-300 i { border-color: var(--etgc-warn-line) !important; }
.etgc-l-500 i { border-color: var(--etgc-risk-line) !important; }

.etgc-chart-svg { width: 100%; max-width: 100%; overflow: hidden; }
.etgc-chart-svg svg { width: 100%; height: auto; display: block; max-width: 100%; }

/* ---------- validation ---------- */
.etgc-error {
	display: block;
	margin-top: 6px;
	font-size: 12.5px !important;
	line-height: 1.35 !important;
	color: var(--etgc-risk-line) !important;
	background: transparent !important;
	font-weight: 500 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}
.etgc-root .etgc-input.etgc-input-error,
.etgc-root .etgc-select.etgc-input-error {
	border-color: var(--etgc-risk-line) !important;
	box-shadow: 0 0 0 3px rgba(220,38,38,.12) !important;
}

/* ---------- disclaimer ---------- */
.etgc-disclaimer {
	display: block;
	max-width: 720px;
	margin: 24px auto 0;
	text-align: center !important;
	color: var(--etgc-ink-3) !important;
	font-size: 12.5px !important;
	line-height: 1.5 !important;
	padding: 0 8px;
	font-weight: 400 !important;
	background: transparent !important;
}

/* ---------- dark mode ---------- */
.etgc-dark,
.etgc-dark-auto[data-force-dark] {
	--etgc-bg: #0F1613;
	--etgc-card: #16211D;
	--etgc-border: #223029;
	--etgc-border-strong: #2C3D34;
	--etgc-ink-1: #F1F5F3;
	--etgc-ink-2: #B7C4BE;
	--etgc-ink-3: #7A8B83;
	--etgc-ink-4: #48574F;
	--etgc-primary-tint: rgba(13,148,136,.14);
	--etgc-primary-tint-2: rgba(13,148,136,.28);
	--etgc-warn-bg: rgba(217,119,6,.16);
	--etgc-warn-fg: #FBBF24;
	--etgc-risk-bg: rgba(220,38,38,.16);
	--etgc-risk-fg: #FCA5A5;
	--etgc-shadow: 0 1px 2px rgba(0,0,0,.3);
}
@media (prefers-color-scheme: dark) {
	.etgc-dark-auto {
		--etgc-bg: #0F1613;
		--etgc-card: #16211D;
		--etgc-border: #223029;
		--etgc-border-strong: #2C3D34;
		--etgc-ink-1: #F1F5F3;
		--etgc-ink-2: #B7C4BE;
		--etgc-ink-3: #7A8B83;
		--etgc-ink-4: #48574F;
		--etgc-primary-tint: rgba(13,148,136,.14);
		--etgc-primary-tint-2: rgba(13,148,136,.28);
		--etgc-warn-bg: rgba(217,119,6,.16);
		--etgc-warn-fg: #FBBF24;
		--etgc-risk-bg: rgba(220,38,38,.16);
		--etgc-risk-fg: #FCA5A5;
		--etgc-shadow: 0 1px 2px rgba(0,0,0,.3);
	}
	.etgc-dark-auto .etgc-input,
	.etgc-dark-auto .etgc-select,
	.etgc-dark-auto .etgc-btn-ghost,
	.etgc-dark-auto .etgc-chart-wrap { background: #0F1613 !important; }
}
.etgc-dark .etgc-input,
.etgc-dark .etgc-select,
.etgc-dark .etgc-btn-ghost,
.etgc-dark .etgc-chart-wrap { background: #0F1613 !important; color: var(--etgc-ink-1) !important; }

/* ---------- print ---------- */
@media print {
	body * { visibility: hidden; }
	.etgc-root, .etgc-root * { visibility: visible; }
	.etgc-root {
		position: absolute; left: 0; top: 0; width: 100%;
	}
	.etgc-tabs,
	.etgc-actions,
	.etgc-add-drink,
	.etgc-drink-remove,
	.etgc-unit-badge,
	.etgc-btn,
	.etgc-error { display: none !important; }
	.etgc-grid { grid-template-columns: 1fr 1fr !important; }
	.etgc-card {
		border-color: #DDD !important;
		box-shadow: none !important;
		break-inside: avoid;
	}
	.etgc-input,
	.etgc-select { border-color: #DDD !important; }
}