/* ==========================================================
   Alcohol Calculator page — additions on top of the existing
   .analyzer-shell / .analyzer-input-card / .result-card design
   system in styles.css (same shared system the Barcode Scanner
   and AI Analyzer use). Kept in its own file so it only loads on
   the /alcohol-calculator/ template instead of bloating every page.
   ========================================================== */

.alc-field-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--text-600);
	margin-bottom: 10px;
}

.alc-input,
.alc-select {
	width: 100%;
	border: 1.5px solid var(--border);
	border-radius: 11px;
	padding: 15px 16px;
	font-size: 15px;
	font-family: inherit;
	color: var(--text-900);
	background: var(--cream); /* warm off-white, matching the site's
	                              palette, instead of stark pure white
	                              which read as flat/generic against
	                              the card. */
	margin: 0;
	transition: border-color .15s, box-shadow .15s, background .15s;
}
.alc-select { cursor: pointer; }

.alc-input:hover,
.alc-select:hover {
	border-color: #cfd6cd;
}

/* A deliberate green focus ring — this is what should visually read as
   "you're editing this field now", not the browser's default blue text
   -selection overlay (which is unrelated to this CSS and disappears the
   moment you click elsewhere on the page). */
.alc-input:focus,
.alc-select:focus {
	outline: none;
	border-color: var(--green-600);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(27, 138, 79, .16);
}

/* Every field group gets the SAME generous bottom margin before the
   next one: the preset/custom panel (label + select/hint), the
   size/ABV/qty/carbs grid, and the "stay under" field. */
[data-alc-panel],
.alc-field,
.alc-grid {
	margin-bottom: 28px;
}

.alc-hint {
	font-size: 12px;
	color: var(--text-400);
	margin: 10px 0 0;
	line-height: 1.6;
}

/* Two-column grid for size/ABV/qty/carbs — collapses to one column on
   narrow screens via the existing analyzer-shell breakpoint's stacking,
   plus its own tighter breakpoint below since 2-up number inputs get
   cramped earlier than the outer shell does. */
.alc-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
	row-gap: 24px;
}
@media (max-width: 480px) {
	.alc-grid { grid-template-columns: 1fr; }
}

/* Extra breathing room around the Calculate button and the disclaimer
   below it, and between the mode tabs and the first panel — these
   previously relied on whatever the shared .mode-tabs/.analyzer-disclaimer
   rules happened to already provide, which wasn't enough once every
   other gap on the page grew to 28px. */
.mode-tabs { margin-bottom: 28px; }
#alc-calculate { margin-bottom: 20px; }

/* "Stay under X kcal" result callout — reuses the same visual language
   as .callout-box (site-wide amber/green alert style) rather than
   inventing a new box design for one insight line. */
#alc-budget-insight .callout-box { margin: 0; }

.alc-save-note {
	font-size: 12px;
	color: var(--text-400);
	text-align: center;
	margin: 10px 0 0;
}