/* ==========================================================================
   Ketology Macro Calculator — macro-calculator.css
   BEM prefix: keto-calc
   Breakpoint: 768px (single column)
   ========================================================================== */


/* ── Design tokens (scoped to the component) ─────────────────────────────── */

.keto-calc {
	--kc-bg-card:    var(--e-global-color-25f2e66);
	--kc-bg-option:  var(--e-global-color-4fd12c0);
	--kc-bg-muted:   var(--e-global-color-0cdc541);
	--kc-accent:     var(--e-global-color-cf64f6c);
	--kc-border:     var(--e-global-color-58606c7);
	--kc-fg:         var(--e-global-color-primary);
	--kc-muted-fg:   var(--e-global-color-text);
	--kc-primary:    var(--e-global-color-accent);
	--kc-disclaimer: #7b7b7b;
	--kc-shadow:     0px 8px 24px 0px rgba(0, 0, 0, 0.09);
}


/* ── Neutralise Hello Elementor defaults ─────────────────────────────────── *
 *                                                                            *
 * Hello Elementor reset.css applies these to [type=button] / button         *
 * (specificity 0-1-0):                                                       *
 *   border: 1px solid #c36  (pink)                                          *
 *   color: #c36              (pink)                                          *
 *   background-color: #c36  (pink on hover)                                 *
 *   border-radius: 3px                                                       *
 *   display: inline-block                                                    *
 *   padding: .5rem 1rem                                                      *
 *   transition: all .3s                                                      *
 *                                                                            *
 * Double-class selectors (0-2-0) beat those rules regardless of load order. *
 * The reset block comes first in this file; component styles come after      *
 * with identical specificity, so later-source wins. ✓                       *
 * ─────────────────────────────────────────────────────────────────────────── */

/* Base reset — font / UA appearance for ALL interactive elements */
.keto-calc .keto-calc__option,
.keto-calc .keto-calc__activity,
.keto-calc .keto-calc__toggle,
.keto-calc .keto-calc__cta {
	-webkit-appearance: none;
	appearance: none;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-transform: none;
	text-decoration: none;
	-webkit-user-select: none;
	user-select: none;
	box-sizing: border-box;
	cursor: pointer;
}

/* Visual reset — strip Hello Elementor's pink from selection controls.
   The CTA gets its own gold styles below; it does NOT need this block. */
.keto-calc .keto-calc__option,
.keto-calc .keto-calc__activity,
.keto-calc .keto-calc__toggle {
	background-color: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	color: inherit;
	box-shadow: none;
	display: block;
	width: auto;
	white-space: normal;
	text-align: inherit;
	transition: none;
}

/* Prevent Hello Elementor's pink hover/focus from bleeding through */
.keto-calc .keto-calc__option:hover,
.keto-calc .keto-calc__option:focus,
.keto-calc .keto-calc__activity:hover,
.keto-calc .keto-calc__activity:focus,
.keto-calc .keto-calc__toggle:hover,
.keto-calc .keto-calc__toggle:focus {
	background-color: transparent;
	color: inherit;
	text-decoration: none;
}

/* Input reset — Hello Elementor applies border/padding/radius to
   input[type=number] (specificity 0-1-0). Double-class wins. */
.keto-calc .keto-calc__weight-input {
	-webkit-appearance: none;
	appearance: none;
	border: none;
	border-radius: 0;
	padding: 0;
	width: auto;
	transition: none;
}


/* ── Root wrapper ────────────────────────────────────────────────────────── */

.keto-calc {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	width: 100%;
	box-sizing: border-box;
	font-family: inherit;
}


/* ── Form section ────────────────────────────────────────────────────────── */

.keto-calc__form {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
}


/* ── Input card ──────────────────────────────────────────────────────────── */

.keto-calc__card {
	background: var(--kc-bg-card);
	border-radius: 20px;
	padding: 36px;
	width: 100%;
	overflow: hidden;
	box-sizing: border-box;
}

.keto-calc__inner {
	display: flex;
	gap: 48px;
	align-items: stretch;
	width: 100%;
}


/* ── Columns ─────────────────────────────────────────────────────────────── */

.keto-calc__col {
	flex: 1 0 0;
	min-width: 0;
}

.keto-calc__col--left {
	display: flex;
	flex-direction: column;
	gap: 36px;
}

.keto-calc__col--right {
	display: flex;
	flex-direction: column;
	gap: 8px;
}


/* ── Gender buttons ──────────────────────────────────────────────────────── */

.keto-calc__gender {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.keto-calc .keto-calc__option {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 16px 24px;
	border-radius: 9999px;
	border: 1px solid var(--kc-border);
	background: var(--kc-bg-option);
	color: var(--kc-muted-fg);
	opacity: 0.75;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.72px;
	transition: border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
	box-sizing: border-box;
	white-space: nowrap;
	text-align: center;
}

.keto-calc .keto-calc__option:hover,
.keto-calc .keto-calc__option:focus {
	background-color: var(--kc-bg-option);
	color: var(--kc-muted-fg);
	text-decoration: none;
	border-width: 1px;
	border-color: var(--e-global-color-accent);
}

.keto-calc .keto-calc__option--active:hover {
	color: var(--kc-fg);
	border-width: 1px;
}

.keto-calc .keto-calc__option--active:focus {
	border-color: var( --e-global-color-cf64f6c );
	border-width: 1px;
}

.keto-calc .keto-calc__option--active {
	border-color: var( --e-global-color-cf64f6c );
	color: var(--kc-fg);
	box-shadow: var(--kc-shadow);
	opacity: 1;
}


/* ── Divider ─────────────────────────────────────────────────────────────── */

.keto-calc__divider {
	width: 100%;
	height: 1px;
	background: var(--kc-border);
	flex-shrink: 0;
}


/* ── Weight row ──────────────────────────────────────────────────────────── */

.keto-calc__weight-row {
	display: flex;
	align-items: center;
	gap: 24px;
}

.keto-calc .keto-calc__weight-input {
	flex: 1 0 0;
	min-width: 0;
	height: 54px;
	padding: 16px 24px !important;
	border-radius: 9999px !important;
	border: 1px solid var(--kc-border) !important;
	background: var(--kc-bg-option) !important;
	color: var(--kc-fg);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.96px;
	text-align: center;
	box-sizing: border-box;
	-moz-appearance: textfield;
	appearance: textfield;
	transition: border-color 0.18s ease;
	width: auto;
}

.keto-calc .keto-calc__weight-input::-webkit-inner-spin-button,
.keto-calc .keto-calc__weight-input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	appearance: none;
}

.keto-calc .keto-calc__weight-input:focus {
	outline: none;
	border-color: var( --e-global-color-cf64f6c );
	border-width: 1px;
}

.keto-calc__unit-row {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.keto-calc__unit-label {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.56px;
	white-space: nowrap;
	transition: color 0.18s ease;
}

.keto-calc__unit-label--kg { color: var(--kc-fg); }
.keto-calc__unit-label--st { color: var(--kc-muted-fg); }

/* Flip label colours when stones is active */
.keto-calc--stones .keto-calc__unit-label--kg { color: var(--kc-muted-fg); }
.keto-calc--stones .keto-calc__unit-label--st { color: var(--kc-fg); }


/* ── Toggle switch ───────────────────────────────────────────────────────── */

.keto-calc .keto-calc__toggle {
	width: 50px;
	height: 34px;
	padding: 0;
	border: none;
	background: none;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.keto-calc__toggle-track {
	display: block;
	position: relative;
	width: 50px;
	height: 34px;
	border-radius: 9999px;
	background: var(--kc-bg);
	border: 1.5px solid var(--kc-border);
	box-sizing: border-box;
	transition: background 0.22s ease, border-color 0.22s ease;
}

.keto-calc__toggle-thumb {
	display: block;
	position: absolute;
	top: 50%;
	left: 3px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var( --e-global-color-cf64f6c );
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
	transform: translateY(-50%);
	transition: transform 0.22s ease;
}

.keto-calc .keto-calc__toggle[aria-checked="true"] .keto-calc__toggle-track {
/* 	background: var(--kc-accent); */
/* 	border-color: var(--kc-accent); */
}

.keto-calc .keto-calc__toggle[aria-checked="true"] .keto-calc__toggle-thumb {
	transform: translate(17px, -50%);
}

/* Maintain correct hover state on toggle */
.keto-calc .keto-calc__toggle:hover,
.keto-calc .keto-calc__toggle:focus {
	background: none;
	outline: none;
}


/* ── Activity cards ──────────────────────────────────────────────────────── */

.keto-calc .keto-calc__activity {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex: 1 0 0;
	width: 100%;
	padding: 16px 24px;
	border-radius: 20px;
	border: 1px solid var(--kc-border);
	background: var(--kc-bg-option);
	text-align: center;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
	box-sizing: border-box;
	border: 1px solid var(--kc-border);
	opacity: 0.75;
}

.keto-calc .keto-calc__activity--active {
	box-shadow: var(--kc-shadow);
	border-color: var( --e-global-color-cf64f6c );
	opacity: 1;
}

/* Keep background white on hover — don't let Hello Elementor pink in */
.keto-calc .keto-calc__activity:hover {
	background-color: var(--kc-bg-option);
	color: inherit;
	text-decoration: none;
	border: 1px solid var( --e-global-color-accent );
}

.keto-calc .keto-calc__activity:focus {
	background-color: var(--kc-bg-option);
	color: inherit;
	text-decoration: none;
	border: 1px solid var(  --e-global-color-cf64f6c );
}

.keto-calc__activity-title {
	display: block;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.72px;
	color: var(--kc-muted-fg);
	white-space: nowrap;
	transition: color 0.18s ease;
}

.keto-calc .keto-calc__activity--active .keto-calc__activity-title {
	color: var(--kc-fg);
}

.keto-calc__activity-desc {
	display: block;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.64px;
	color: var(--kc-muted-fg);
	white-space: nowrap;
}


/* ── CTA button ──────────────────────────────────────────────────────────── *
 * This IS a "normal" styled button — Hello Elementor resets are overridden  *
 * by our gold styles below. No pink leakage because the reset block above   *
 * already handled -webkit-appearance, font-family, etc.                     *
 * ─────────────────────────────────────────────────────────────────────────── */

.keto-calc .keto-calc__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 20px 24px;
	border-radius: 9999px;
	border: none;
	background: var(--kc-accent);
	color: var(--kc-bg-card);
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.36px;
	text-align: center;
	transition: background-color 0.3s ease;
	box-sizing: border-box;
}

.keto-calc .keto-calc__cta:hover,
.keto-calc .keto-calc__cta:focus {
	background-color: var( --e-global-color-f9f9839 );
	color: var(--kc-bg-card);
	text-decoration: none;
}


/* ── Results section ─────────────────────────────────────────────────────── */

.keto-calc__results {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
}

/* Ensure [hidden] wins despite the display:flex above */
.keto-calc__results[hidden] {
	display: none;
}


/* ── Macro grid (2 × 2) ──────────────────────────────────────────────────── */

.keto-calc__macro-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}


/* ── Macro cards ─────────────────────────────────────────────────────────── */

.keto-calc__macro-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding: 32px;
	background: var(--kc-bg-muted);
	border-radius: 24px;
	box-sizing: border-box;
}

.keto-calc__macro-value {
	display: flex;
	align-items: baseline;
	gap: 0;
	margin: 0;
	line-height: 1;
}

.keto-calc__macro-num {
	font-size: 32px;
	font-weight: 600;
	color: var(--kc-primary);
	letter-spacing: -0.64px;
	line-height: 1;
}

.keto-calc__macro-sep {
	font-size: 24px;
	font-weight: 500;
	color: var(--kc-primary);
	letter-spacing: -0.64px;
	line-height: 1;
}

.keto-calc__macro-unit {
	font-size: 24px;
	font-weight: 500;
	color: var(--kc-primary);
	letter-spacing: -0.64px;
	line-height: 1;
}

.keto-calc__macro-label {
	font-size: 18px;
	font-weight: 400;
	color: var(--kc-muted-fg);
	letter-spacing: -0.36px;
	line-height: 1.6;
	text-align: center;
	margin: 0;
}


/* ── Disclaimer ──────────────────────────────────────────────────────────── */

.keto-calc__disclaimer {
	font-size: 13px;
	font-weight: 400;
	color: var(--kc-disclaimer);
	line-height: 1.6;
	letter-spacing: -0.52px;
	text-align: center;
	max-width: 512px;
	margin: auto !important;
	margin-top: 20px !important;
}


/* ==========================================================================
   Responsive — ≤ 768px (single column)
   ========================================================================== */

@media (max-width: 768px) {

	.keto-calc__card {
		padding: 36px 20px;
	}

	.keto-calc__inner {
		flex-direction: column;
		gap: 48px;
	}

	/* Activity description may wrap on narrow screens */
	.keto-calc__activity-desc {
		white-space: normal;
	}

	/* Macro cards: single column */
	.keto-calc__macro-grid {
		grid-template-columns: 1fr;
	}

	/* Disclaimer: left-aligned, full width */
	.keto-calc__disclaimer {
		text-align: left;
		max-width: none;
		margin: 0;
	}
}

/* Very small screens */
@media (max-width: 380px) {

	.keto-calc__activity-title {
		white-space: normal;
	}

	.keto-calc .keto-calc__option {
		white-space: normal;
	}
}