/*
 * Healthy Calculators — Plugin Stylesheet
 * Scoped under .hp-calc-wrap to avoid conflicts with any WordPress theme.
 * Mobile-first responsive design.
 */

/* ─── Custom Properties ─────────────────────────────────────────────────── */
.hp-calc-wrap {
	--hp-white:          #ffffff;
	--hp-bg:             #f5f7f8;
	--hp-card:           #ffffff;
	--hp-border:         #e4e8eb;
	--hp-text:           #1e1e1e;
	--hp-text-secondary: #6b7280;
	--hp-green:          #3a9e47;
	--hp-green-light:    #eaf6eb;
	--hp-green-dark:     #2d7d38;
	--hp-green-rgb:      58, 158, 71;
	--hp-red:            #dc3545;
	--hp-red-light:      #fff0f0;
	--hp-shadow-sm:      0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
	--hp-shadow-md:      0 4px 16px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05);
	--hp-shadow-lg:      0 12px 40px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.06);
	--hp-radius-sm:      8px;
	--hp-radius-md:      12px;
	--hp-radius-lg:      20px;
	--hp-transition:     0.18s ease;
	--hp-font: 'Montserrat', sans-serif;
}

/* ─── Wrapper ────────────────────────────────────────────────────────────── */
.hp-calc-wrap *,
.hp-calc-wrap *::before,
.hp-calc-wrap *::after {
	box-sizing: border-box;
}

.hp-calc-wrap {
	font-family:  var(--hp-font);
	color:        var(--hp-text);
	background:   var(--hp-bg);
	border-radius: var(--hp-radius-lg);
	padding:      32px 20px;
	max-width:    760px;
	margin:       0 auto;
	line-height:  1.6;
}

/* ─── Header ─────────────────────────────────────────────────────────────── */
.hp-calc-header {
	text-align: center;
	margin-bottom: 32px;
}

.hp-calc-badge {
	display:       inline-block;
	padding:       4px 12px;
	background:    var(--hp-green-light);
	color:         var(--hp-green-dark);
	font-size:     11px;
	font-weight:   700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 100px;
	margin-bottom: 12px;
}

.hp-calc-title {
	font-size:    clamp(1.6rem, 4vw, 2.2rem);
	font-weight:  800;
	line-height:  1.2;
	margin:       0 0 10px;
	color:        var(--hp-text);
}

.hp-calc-subtitle {
	font-size:   1rem;
	color:       var(--hp-text-secondary);
	margin:      0;
	max-width:   480px;
	margin-inline: auto;
}

/* ─── Form card ──────────────────────────────────────────────────────────── */
.hp-calc-form {
	background:    var(--hp-card);
	border-radius: var(--hp-radius-lg);
	padding:       28px 24px;
	box-shadow:    var(--hp-shadow-md);
	border:        1px solid var(--hp-border);
}

/* ─── Fieldset ───────────────────────────────────────────────────────────── */
.hp-calc-fieldset {
	border:  none;
	padding: 0;
	margin:  0 0 24px;
}

.hp-calc-legend {
	font-size:    0.9rem;
	font-weight:  700;
	color:        var(--hp-text);
	margin-bottom: 12px;
	padding:      0;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	font-size:    11px;
	color:        var(--hp-text-secondary);
}

/* ─── Gender toggle ──────────────────────────────────────────────────────── */
.hp-calc-toggle-group {
	display: flex;
	gap:     10px;
}

.hp-calc-toggle {
	flex:     1;
	cursor:   pointer;
	position: relative;
}

.hp-calc-toggle input[type="radio"] {
	position: absolute;
	opacity:  0;
	width:    0;
	height:   0;
}

.hp-calc-toggle-label {
	display:       flex;
	align-items:   center;
	justify-content: center;
	gap:           8px;
	padding:       14px 20px;
	border:        2px solid var(--hp-border);
	border-radius: var(--hp-radius-md);
	font-size:     1rem;
	font-weight:   600;
	color:         var(--hp-text-secondary);
	transition:    border-color var(--hp-transition),
	               background   var(--hp-transition),
	               color        var(--hp-transition);
}

.hp-calc-toggle-label svg {
	width:  18px;
	height: 18px;
}

.hp-calc-toggle:hover .hp-calc-toggle-label,
.hp-calc-toggle input:focus-visible + .hp-calc-toggle-label {
	border-color: var(--hp-green);
	color:        var(--hp-green);
	outline:      none;
}

.hp-calc-toggle input:checked + .hp-calc-toggle-label {
	border-color: var(--hp-green);
	background:   var(--hp-green-light);
	color:        var(--hp-green-dark);
}

/* ─── Row layout ─────────────────────────────────────────────────────────── */
.hp-calc-row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap:     16px;
	margin-bottom: 24px;
}

.hp-calc-row--half {
	grid-template-columns: 1fr 1fr;
}

/* ─── Field ──────────────────────────────────────────────────────────────── */
.hp-calc-field {
	display:        flex;
	flex-direction: column;
	gap:            6px;
}

.hp-calc-label {
	display:     flex;
	align-items: baseline;
	gap:         6px;
	font-size:   0.875rem;
	font-weight: 600;
	color:       var(--hp-text);
}

.hp-calc-unit {
	font-size:   0.75rem;
	font-weight: 400;
	color:       var(--hp-text-secondary);
}

.hp-calc-input {
	width:        100%;
	padding:      13px 14px;
	border:       2px solid var(--hp-border);
	border-radius: var(--hp-radius-sm);
	font-size:    1rem;
	font-family:  var(--hp-font);
	color:        var(--hp-text);
	background:   var(--hp-white);
	transition:   border-color var(--hp-transition),
	              box-shadow   var(--hp-transition);
	-moz-appearance: textfield;
	appearance:   textfield;
}

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

.hp-calc-input:hover {
	border-color: #c5ccd3;
}

.hp-calc-input:focus {
	outline:      none;
	border-color: var(--hp-green);
	box-shadow:   0 0 0 4px rgba(var(--hp-green-rgb), 0.12);
}

.hp-calc-input.hp-error {
	border-color: var(--hp-red);
	background:   var(--hp-red-light);
}

.hp-calc-input.hp-error:focus {
	box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.12);
}

/* ─── Error messages ─────────────────────────────────────────────────────── */
.hp-calc-error {
	font-size: 0.8rem;
	color:     var(--hp-red);
	margin:    4px 0 0;
	min-height: 1em;
}

.hp-calc-error:empty {
	display: none;
}

/* ─── Unit toggle ────────────────────────────────────────────────────────── */
.hp-calc-unit-toggle {
	display:     flex;
	align-items: center;
	gap:         8px;
	margin-bottom: 24px;
	flex-wrap:   wrap;
}

.hp-calc-unit-toggle-label {
	font-size:   0.82rem;
	font-weight: 600;
	color:       var(--hp-text-secondary);
}

.hp-calc-unit-btn {
	padding:       6px 14px;
	border:        2px solid var(--hp-border);
	border-radius: 100px;
	font-size:     0.82rem;
	font-weight:   600;
	background:    transparent;
	color:         var(--hp-text-secondary);
	cursor:        pointer;
	transition:    border-color var(--hp-transition),
	               background   var(--hp-transition),
	               color        var(--hp-transition);
}

.hp-calc-unit-btn:hover,
.hp-calc-unit-btn:focus-visible {
	border-color: var(--hp-green);
	color:        var(--hp-green);
	outline:      none;
}

.hp-calc-unit-btn.active {
	background:   var(--hp-green);
	border-color: var(--hp-green);
	color:        var(--hp-white);
}

/* ─── Imperial height ────────────────────────────────────────────────────── */
.hp-calc-imperial-height {
	margin-bottom: 24px;
}

/* ─── Activity grid ──────────────────────────────────────────────────────── */
.hp-calc-activity-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap:     10px;
}

.hp-calc-activity-card {
	cursor:   pointer;
	position: relative;
}

.hp-calc-activity-card input[type="radio"] {
	position: absolute;
	opacity:  0;
	width:    0;
	height:   0;
}

.hp-calc-activity-inner {
	display:        flex;
	flex-direction: column;
	gap:            4px;
	padding:        14px 16px;
	border:         2px solid var(--hp-border);
	border-radius:  var(--hp-radius-md);
	transition:     border-color var(--hp-transition),
	                background   var(--hp-transition);
}

.hp-calc-activity-inner .hp-calc-activity-icon {
	font-size: 1.4rem;
	line-height: 1;
	margin-bottom: 2px;
}

.hp-calc-activity-inner strong {
	font-size:   0.9rem;
	font-weight: 700;
	color:       var(--hp-text);
	display:     block;
}

.hp-calc-activity-inner span {
	font-size: 0.78rem;
	color:     var(--hp-text-secondary);
	line-height: 1.4;
}

.hp-calc-activity-card:hover .hp-calc-activity-inner,
.hp-calc-activity-card input:focus-visible + .hp-calc-activity-inner {
	border-color: var(--hp-green);
	outline:      none;
}

.hp-calc-activity-card input:checked + .hp-calc-activity-inner {
	border-color: var(--hp-green);
	background:   var(--hp-green-light);
}

.hp-calc-activity-card input:checked + .hp-calc-activity-inner strong {
	color: var(--hp-green-dark);
}

/* ─── Submit button ──────────────────────────────────────────────────────── */
.hp-calc-submit-wrap {
	margin-top: 28px;
	text-align: center;
}

.hp-calc-submit {
	display:         inline-flex;
	align-items:     center;
	gap:             10px;
	padding:         16px 36px;
	background:      var(--hp-green);
	color:           var(--hp-white);
	border:          none;
	border-radius:   8px;
	font-family:     var(--hp-font);
	font-size:       1rem;
	font-weight:     700;
	cursor:          pointer;
	transition:      background   var(--hp-transition),
	                 transform    var(--hp-transition),
	                 box-shadow   var(--hp-transition);
	box-shadow:      0 4px 14px rgba(var(--hp-green-rgb), 0.35);
	min-width:       220px;
	justify-content: center;
}

.hp-calc-submit:hover {
	background:  var(--hp-green-dark);
	box-shadow:  0 6px 20px rgba(var(--hp-green-rgb), 0.4);
	transform:   translateY(-1px);
}

.hp-calc-submit:active {
	transform: translateY(0);
}

.hp-calc-submit:focus-visible {
	outline:    3px solid var(--hp-green);
	outline-offset: 3px;
}

.hp-calc-submit-icon {
	width:  18px;
	height: 18px;
	flex-shrink: 0;
	transition: transform var(--hp-transition);
}

.hp-calc-submit:hover .hp-calc-submit-icon {
	transform: translateX(3px);
}

.hp-calc-submit.hp-loading {
	opacity: 0.75;
	pointer-events: none;
}

/* ─── Results ────────────────────────────────────────────────────────────── */
.hp-calc-results {
	margin-top:     24px;
	animation:      hp-fade-in 0.35s ease both;
}

@keyframes hp-fade-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

.hp-calc-results-card {
	background:    var(--hp-card);
	border-radius: var(--hp-radius-lg);
	box-shadow:    var(--hp-shadow-md);
	border:        1px solid var(--hp-border);
	overflow:      hidden;
}

/* Results header */
.hp-calc-results-header {
	background:    linear-gradient(135deg, var(--hp-green) 0%, var(--hp-green-dark) 100%);
	padding:       28px 28px 24px;
	text-align:    center;
	color:         var(--hp-white);
}

.hp-calc-results-heading {
	font-size:    0.75rem;
	font-weight:  700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity:      0.85;
	margin:       0 0 4px;
}

.hp-calc-results-title {
	font-size:    clamp(1.4rem, 3.5vw, 1.8rem);
	font-weight:  800;
	margin:       0 0 6px;
	color: white !important;
}

.hp-calc-results-subtitle {
	font-size:  0.83rem;
	opacity:    0.8;
	margin:     0;
	line-height: 1.5;
}

/* Metrics grid */
.hp-calc-metrics {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap:     1px;
	background: var(--hp-border);
}

.hp-calc-metric {
	background: var(--hp-white);
	padding:    22px 20px;
	text-align: center;
}

.hp-calc-metric--full {
	grid-column: 1 / -1;
	background: var(--hp-bg);
}

.hp-calc-metric-icon {
	font-size: 1.4rem;
	margin-bottom: 6px;
}

.hp-calc-metric-value {
	font-size:   clamp(1.6rem, 4vw, 2.2rem);
	font-weight: 800;
	color:       var(--hp-green);
	line-height: 1;
	margin-bottom: 4px;
}

.hp-calc-metric--full .hp-calc-metric-value {
	color: var(--hp-text);
	font-size: clamp(1.2rem, 3vw, 1.6rem);
}

.hp-calc-metric-label {
	font-size:   0.85rem;
	font-weight: 700;
	color:       var(--hp-text);
	margin-bottom: 2px;
}

.hp-calc-metric-desc {
	font-size: 0.75rem;
	color:     var(--hp-text-secondary);
	line-height: 1.4;
}

.hp-calc-metric-range {
	font-size:   0.78rem;
	color:       var(--hp-text-secondary);
	margin-top:  4px;
}

/* Disclaimer */
.hp-calc-disclaimer {
	padding:    16px 24px;
	font-size:  0.75rem;
	color:      var(--hp-text-secondary);
	text-align: center;
	border-top: 1px solid var(--hp-border);
	line-height: 1.5;
}

/* ─── Product recommendation block ───────────────────────────────────────── */
.hp-calc-recommendation {
	margin-top:    16px;
	background:    var(--hp-card);
	border-radius: var(--hp-radius-lg);
	box-shadow:    var(--hp-shadow-sm);
	border:        1px solid var(--hp-border);
	padding:       24px;
	display:       flex;
	align-items:   flex-start;
	gap:           16px;
}

.hp-calc-rec-icon {
	font-size:   2rem;
	flex-shrink: 0;
	margin-top:  2px;
}

.hp-calc-rec-content {
	flex: 1;
}

.hp-calc-rec-title {
	font-size:     0.95rem;
	font-weight:   700;
	color:         var(--hp-text);
	margin:        0 0 6px;
}

.hp-calc-rec-text {
	font-size:   0.85rem;
	color:       var(--hp-text-secondary);
	margin:      0 0 14px;
	line-height: 1.55;
}

.hp-calc-rec-btn {
	display:         inline-flex;
	align-items:     center;
	gap:             6px;
	padding:         10px 20px;
	margin: 		 20px 0px;
	background:      #073a41;
	color:           #ffffff !important;
	border-radius:   8px;
	font-family:     var(--hp-font);
	font-size:       0.875rem;
	font-weight:     700;
	text-decoration: none !important;
	cursor:          pointer;
	transition:      background var(--hp-transition),
	                 color      var(--hp-transition);
}

.hp-calc-rec-btn:hover {
	background: var(--hp-green);
	color:      #ffffff !important;
}

.hp-calc-rec-btn:focus-visible {
	outline:        3px solid var(--hp-green);
	outline-offset: 3px;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
	.hp-calc-wrap {
		padding: 24px 14px;
		border-radius: var(--hp-radius-md);
	}

	.hp-calc-form {
		padding: 22px 16px;
	}

	.hp-calc-row {
		grid-template-columns: 1fr;
	}

	.hp-calc-activity-grid {
		grid-template-columns: 1fr;
	}

	.hp-calc-submit {
		width: 100%;
	}

	.hp-calc-metrics {
		grid-template-columns: 1fr;
	}

	.hp-calc-metric--full {
		grid-column: 1;
	}

	.hp-calc-recommendation {
		flex-direction: column;
	}

	.hp-calc-toggle-group {
		flex-direction: column;
	}
}

@media (min-width: 601px) and (max-width: 768px) {
	.hp-calc-row {
		grid-template-columns: 1fr 1fr;
	}

	.hp-calc-row > .hp-calc-field:last-child {
		grid-column: 1 / -1;
	}
}

.hp-calc-ad-slot {
    margin-top: 24px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BMI CALCULATOR — specific styles
   All scoped under .hp-calc-wrap so no theme conflicts.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── BMI score in results header ────────────────────────────────────────── */
.hp-calc-results-header {
	background: var(--hp-white);
	border-bottom: 1px solid var(--hp-border);
	color: var(--hp-text);
	padding: 28px 28px 24px;
	text-align: center;
}

/* Override gradient header for BMI (uses dynamic color) */
[data-hp-calc="bmi"] .hp-calc-results-header {
	background: var(--hp-bg);
}

[data-hp-calc="bmi"] .hp-calc-results-heading {
	color: var(--hp-text-secondary);
}

[data-hp-calc="bmi"] .hp-calc-results-subtitle {
	color: var(--hp-text-secondary);
	opacity: 1;
}

.hp-bmi-score {
	font-size:   clamp(3rem, 10vw, 5rem);
	font-weight: 900;
	line-height: 1;
	margin:      8px 0 10px;
	letter-spacing: -0.02em;
}

.hp-bmi-category-badge {
	display:       inline-block;
	padding:       5px 16px;
	border-radius: 100px;
	font-size:     0.85rem;
	font-weight:   700;
	margin-bottom: 10px;
}

/* ─── Visual BMI scale ───────────────────────────────────────────────────── */
.hp-bmi-scale-wrap {
	padding: 28px 28px 8px;
}

.hp-bmi-scale-bar {
	position:     relative;
	display:      flex;
	height:       14px;
	border-radius: 100px;
	overflow:     visible;
	margin-bottom: 28px;
}

.hp-bmi-scale-segment {
	flex: 1;
}

/* Segment widths reflect actual BMI ranges within 15–45 window */
.hp-bmi-seg--underweight {
	flex:          1.17; /* 15–18.5 = 3.5 of 30 */
	background:    #3b82f6;
	border-radius: 100px 0 0 100px;
}

.hp-bmi-seg--normal {
	flex:       2.13; /* 18.5–25 = 6.5 of 30 */
	background: #22c55e;
}

.hp-bmi-seg--overweight {
	flex:       1.67; /* 25–30 = 5 of 30 */
	background: #f59e0b;
}

.hp-bmi-seg--obese {
	flex:          5;  /* 30–45 = 15 of 30 */
	background:    linear-gradient( to right, #f97316, #ef4444, #b91c1c );
	border-radius: 0 100px 100px 0;
}

/* Marker pin */
.hp-bmi-scale-marker {
	position:  absolute;
	top:       -6px;
	transform: translateX( -50% );
	display:   flex;
	flex-direction: column;
	align-items:    center;
	gap:       4px;
	z-index:   2;
}

.hp-bmi-scale-marker-pin {
	width:         26px;
	height:        26px;
	border-radius: 50% 50% 50% 0;
	transform:     rotate( -45deg );
	border:        3px solid var(--hp-white);
	box-shadow:    0 2px 8px rgba(0,0,0,.18);
}

.hp-bmi-scale-marker-label {
	font-size:   0.75rem;
	font-weight: 800;
	white-space: nowrap;
	margin-top:  4px;
}

/* Scale text labels */
.hp-bmi-scale-labels {
	display:         flex;
	justify-content: space-between;
	font-size:       0.72rem;
	font-weight:     600;
	color:           var(--hp-text-secondary);
	padding:         0 2px;
}

/* ─── BMI metrics grid (2 columns, equal) ────────────────────────────────── */
.hp-bmi-metrics {
	grid-template-columns: 1fr 1fr !important;
}

.hp-bmi-range-value {
	font-size:   1.1rem !important;
	font-weight: 700;
	color:       var(--hp-text) !important;
	line-height: 1.3;
}

.hp-bmi-range-metric {
	display:   block;
	font-size: 0.75rem;
	color:     var(--hp-text-secondary);
	font-weight: 500;
	margin-top: 2px;
}

/* ─── Reference table ────────────────────────────────────────────────────── */
.hp-bmi-table-wrap {
	padding: 0 24px 20px;
}

.hp-bmi-table {
	width:           100%;
	border-collapse: collapse;
	font-size:       0.83rem;
}

.hp-bmi-table th {
	text-align:  left;
	padding:     8px 12px;
	font-weight: 700;
	font-size:   0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color:       var(--hp-text-secondary);
	border-bottom: 2px solid var(--hp-border);
}

.hp-bmi-table td {
	padding:     10px 12px;
	color:       var(--hp-text-secondary);
	border-bottom: 1px solid var(--hp-border);
	vertical-align: middle;
}

.hp-bmi-table tbody tr:last-child td {
	border-bottom: none;
}

.hp-bmi-table-row--active td {
	background:  var(--hp-green-light);
	color:       var(--hp-text);
	font-weight: 700;
}

.hp-bmi-dot {
	display:       inline-block;
	width:         10px;
	height:        10px;
	border-radius: 50%;
	margin-right:  8px;
	vertical-align: middle;
	flex-shrink:   0;
}

/* ─── Disclaimer ─────────────────────────────────────────────────────────── */
.hp-bmi-disclaimer {
	display:     flex;
	align-items: flex-start;
	gap:         6px;
	font-style:  italic;
}

.hp-bmi-disclaimer svg {
	flex-shrink: 0;
	margin-top:  2px;
	color:       var(--hp-text-secondary);
}

/* ─── Ad slot ────────────────────────────────────────────────────────────── */
.hp-calc-ad-slot {
	display:       none;
	margin-top:    20px;
	border-radius: var(--hp-radius-md);
	overflow:      hidden;
	min-height:    90px;
}

/* ─── BMI responsive overrides ───────────────────────────────────────────── */
@media (max-width: 600px) {
	.hp-bmi-metrics {
		grid-template-columns: 1fr !important;
	}

	.hp-bmi-scale-wrap {
		padding: 20px 16px 8px;
	}

	.hp-bmi-table-wrap {
		padding: 0 16px 16px;
		overflow-x: auto;
	}

	.hp-bmi-score {
		font-size: clamp(2.8rem, 16vw, 4rem);
	}
}