/*
 * Colors are literal, not var(--sp-color-*), on purpose: this plugin must
 * render correctly regardless of which theme is active, so it can't depend
 * on custom properties defined in salimpick-child-theme/assets/css/tokens.css.
 * Values are kept in sync with that file by hand.
 */
.salimpick-tool {
	max-width: 420px;
	padding: 20px;
	border-radius: 12px;
	border: 1px solid #e8eae6;
	background: #ffffff;
}

.salimpick-tool__title {
	margin: 0 0 14px;
}

.salimpick-tool__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 12px;
	font-size: 14px;
}

/* Two fields side by side (e.g. duration value + unit) on wide enough
   screens; stacks on narrow ones via the media query below so the unit
   select never gets cramped. */
.salimpick-tool__field-row {
	display: flex;
	gap: 10px;
}

.salimpick-tool__field-row .salimpick-tool__field {
	flex: 1;
	min-width: 0;
}

.salimpick-tool__field-row .salimpick-tool__field--unit {
	flex: 0 0 92px;
}

.salimpick-tool__field input,
.salimpick-tool__field select {
	padding: 10px;
	border-radius: 8px;
	border: 1px solid #e8eae6;
	font-size: 16px;
	color: #222222;
	min-height: 44px;
}

.salimpick-tool__form button {
	padding: 10px 18px;
	border-radius: 8px;
	border: none;
	background: #7f9c8a;
	color: #ffffff;
	font-weight: 600;
	cursor: pointer;
	min-height: 44px;
	width: 100%;
}

.salimpick-tool__form button:hover {
	background: #6c8875;
}

/* #566c5d, not the #7f9c8a sage fill: sage measures ~2.99:1 on white,
   under the WCAG 2.1 SC 1.4.11 3:1 non-text-contrast minimum for a
   focus indicator -- same value as the theme's --sp-color-link-
   accessible, kept in sync by hand per the note at the top of this
   file (2026-09-16 a11y pass). */
.salimpick-tool__form button:focus-visible {
	outline: 2px solid #566c5d;
	outline-offset: 2px;
}

/* 2026-09-29 a11y pass: the parent theme sets outline: 0 on focused text,
   number and select fields and relies on a border-colour change that
   our field border overrides -- so a keyboard user tabbing through a
   calculator saw no focus indicator at all (WCAG 2.4.7). Same indicator
   as the buttons above. The extra .salimpick-tool class outranks the
   parent theme's input[type=...]:focus selector whatever the load order. */
.salimpick-tool .salimpick-tool__field input:focus-visible,
.salimpick-tool .salimpick-tool__field select:focus-visible,
.salimpick-tool .salimpick-tool__form input[type="radio"]:focus-visible {
	outline: 2px solid #566c5d;
	outline-offset: 2px;
}

.salimpick-tool__result {
	margin-top: 14px;
	font-size: 14px;
	color: #222222;
}

.salimpick-tool__result p {
	margin: 0 0 6px;
}

.salimpick-tool__result p:last-child {
	margin-bottom: 0;
}

.salimpick-tool__result:empty {
	display: none;
}

.salimpick-tool__result--error {
	color: #b3261e;
}

/* The one emphasized line in a result (e.g. "월 예상 사용량: 25.00 kWh") —
   larger and bold, but still plain text, not a big number card. */
.salimpick-tool__result-highlight {
	font-size: 18px;
	font-weight: 700;
}

.salimpick-tool__result-note {
	font-size: 12px;
	color: #6f746f;
}

.salimpick-tool__note {
	margin-top: 10px;
	font-size: 12px;
	color: #6f746f;
}

/* Plain text links between related tools (e.g. power-usage -> multi-power-
   usage -> electricity-bill) — never a banner, card, or button. */
.salimpick-tool__cta {
	margin: 14px 0 0;
	font-size: 14px;
}

.salimpick-tool__cta a {
	color: #7f9c8a;
	font-weight: 600;
	text-decoration: underline;
}

.salimpick-tool__cta a:hover,
.salimpick-tool__cta a:focus-visible {
	color: #6c8875;
}

/* [salimpick_tools_hub] fallback — used only when the active theme doesn't
   provide its own hub template (see includes/class-shortcode.php). Plain
   list, no card styling, so it never looks like it's trying to be the real
   salimpick-child-theme hub design. */
.salimpick-tools-hub-fallback {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 640px;
}

.salimpick-tools-hub-fallback li {
	padding-block: 16px;
	border-bottom: 1px solid #e8eae6;
}

.salimpick-tools-hub-fallback a {
	color: #222222;
	font-weight: 600;
	text-decoration: none;
}

.salimpick-tools-hub-fallback a:hover {
	color: #7f9c8a;
}

.salimpick-tools-hub-fallback p {
	margin: 4px 0 0;
	font-size: 14px;
	color: #6f746f;
}

.salimpick-tools-hub-fallback__empty {
	color: #6f746f;
}

@media (max-width: 480px) {
	.salimpick-tool {
		max-width: 100%;
		padding: 16px;
	}

	.salimpick-tool__field-row {
		flex-direction: column;
		gap: 12px;
	}

	.salimpick-tool__field--unit {
		flex: 1;
	}
}