/**
 * Psilocybin Dosage Calculator styles (v1.1.0).
 * All selectors namespaced .psi-* to avoid conflicts with Flatsome / theme styles.
 *
 * Theme colours are injected via inline CSS custom properties on .psi-calc-wrap:
 *   --psi-primary    -> Flatsome Primary Color   (title, button, dividers)
 *   --psi-secondary  -> Flatsome Secondary Color (result section accent)
 *   --psi-success    -> Flatsome Success Color   (dosage amount)
 *   --psi-alert      -> Flatsome Alert Color     (disclaimer, errors)
 *
 * Derived tints and hover shades use color-mix() (supported in all major
 * browsers since 2023).
 */

.psi-calc-wrap {
	/* Neutral palette — independent of theme colours. */
	--psi-bg: #f8f4ec;
	--psi-card: #ffffff;
	--psi-ink: #2a2520;
	--psi-muted: #6b6258;
	--psi-line: #e3dccd;

	/* Sensible fallbacks if the inline custom properties are missing. */
	--psi-primary:   #446084;
	--psi-secondary: #D26E4B;
	--psi-success:   #7A9C59;
	--psi-alert:     #B20000;

	max-width: 640px;
	margin: 40px auto;
	padding: 0;
	color: var(--psi-ink);
	font-family: Georgia, 'Times New Roman', serif;
	line-height: 1.5;
	box-sizing: border-box;
}

.psi-calc-wrap *,
.psi-calc-wrap *::before,
.psi-calc-wrap *::after {
	box-sizing: border-box;
}

.psi-calc-card {
	background: var(--psi-card);
	border: 1px solid var(--psi-line);
	border-radius: 4px;
	padding: 40px 36px;
	box-shadow: 0 10px 40px rgba(42, 37, 32, 0.06);
}

.psi-calc-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 11px;
	font-family: 'Helvetica Neue', Arial, sans-serif;
	color: var(--psi-secondary);
	text-align: center;
	margin: 0 0 8px;
	font-weight: 600;
}

.psi-calc-title {
	font-size: 28px;
	text-align: center;
	margin: 0 0 4px;
	font-weight: 400;
	letter-spacing: -0.01em;
	color: var(--psi-primary);
	line-height: 1.2;
}

.psi-calc-subtitle {
	text-align: center;
	color: var(--psi-muted);
	font-size: 14px;
	font-style: italic;
	margin: 0 0 28px;
}

.psi-divider {
	border: none;
	border-top: 1px solid var(--psi-line);
	margin: 0 0 28px;
}

.psi-field {
	margin-bottom: 18px;
}

.psi-calc-wrap label {
	display: block;
	font-family: 'Helvetica Neue', Arial, sans-serif;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 600;
	color: var(--psi-ink);
	margin-bottom: 6px;
}

.psi-calc-wrap input[type="number"],
.psi-calc-wrap select {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--psi-line);
	border-radius: 3px;
	font-size: 15px;
	font-family: Georgia, serif;
	background: var(--psi-bg);
	color: var(--psi-ink);
	height: auto;
	line-height: 1.4;
	transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.psi-calc-wrap select {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%232a2520' d='M6 8L0 0h12z'/></svg>");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 36px;
	cursor: pointer;
}

.psi-calc-wrap input[type="number"]:focus,
.psi-calc-wrap select:focus {
	outline: none;
	border-color: var(--psi-primary);
	background-color: #ffffff;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--psi-primary) 15%, transparent);
}

.psi-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

/* ---- Primary action button ---- */
.psi-btn {
	width: 100%;
	padding: 16px;
	margin-top: 8px;
	background: var(--psi-primary);
	color: #ffffff;
	font-family: 'Helvetica Neue', Arial, sans-serif;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	border: none;
	border-radius: 3px;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.1s ease;
	line-height: 1.4;
}

.psi-btn:hover,
.psi-btn:focus {
	background: color-mix(in srgb, var(--psi-primary) 85%, #000);
	color: #ffffff;
	outline: none;
}

.psi-btn:active {
	transform: translateY(1px);
}

/* ---- Result box (uses Secondary as the accent, Success for the amount) ---- */
.psi-result {
	margin-top: 28px;
	padding: 24px;
	background: color-mix(in srgb, var(--psi-secondary) 10%, transparent);
	border-left: 3px solid var(--psi-secondary);
	border-radius: 3px;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.3s, transform 0.3s;
	display: none;
}

.psi-result.psi-show {
	display: block;
	opacity: 1;
	transform: translateY(0);
}

.psi-result-label {
	font-family: 'Helvetica Neue', Arial, sans-serif;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--psi-secondary);
	font-weight: 600;
	margin: 0 0 6px;
}

.psi-result-amount {
	font-size: 34px;
	font-weight: 400;
	color: var(--psi-success);
	margin: 0 0 6px;
	line-height: 1.15;
	font-family: Georgia, serif;
}

.psi-result-amount span {
	font-size: 16px;
	color: var(--psi-muted);
	font-style: italic;
}

.psi-result-context {
	font-style: italic;
	color: var(--psi-ink);
	margin: 12px 0 0;
	font-size: 15px;
	line-height: 1.55;
}

.psi-error {
	color: var(--psi-alert);
	font-style: italic;
	font-size: 15px;
	font-family: 'Helvetica Neue', Arial, sans-serif;
}

/* ---- Disclaimer (uses Alert colour) ---- */
.psi-disclaimer {
	margin-top: 24px;
	padding: 16px 18px;
	background: color-mix(in srgb, var(--psi-alert) 6%, transparent);
	border-left: 3px solid var(--psi-alert);
	font-size: 13px;
	line-height: 1.6;
	color: var(--psi-ink);
	font-family: 'Helvetica Neue', Arial, sans-serif;
	border-radius: 3px;
}

.psi-disclaimer strong {
	display: block;
	margin-bottom: 4px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 11px;
	color: var(--psi-alert);
	font-weight: 700;
}

@media (max-width: 520px) {
	.psi-calc-card {
		padding: 28px 22px;
	}
	.psi-calc-title {
		font-size: 24px;
	}
	.psi-row {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.psi-result-amount {
		font-size: 28px;
	}
}