/* Mahendus Solar System Size Estimator — Frontend Styles v1.0
   Scoped under .msse-wrapper with !important on layout-critical properties
   so it survives being embedded in any WordPress theme without conflicts. */

html body .msse-wrapper {
	/* Fallback values — actual values are injected inline via admin settings */
	--msse-primary: #ffba00;
	--msse-secondary: #2d2d2d;
	--msse-heading: #2d2d2d;
	--msse-text: #333333;
	--msse-btn-bg: #ffba00;
	--msse-btn-text: #2d2d2d;
	--msse-card-bg: #ffffff;
	--msse-card-border: #eeeeee;
	--msse-input-border: #dddddd;
	--msse-card-radius: 14px;
	--msse-card-padding: 28px;
	--msse-section-spacing: 20px;
	--msse-font-size: 15px;
	--msse-input-radius: 8px;
	--msse-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	display: block !important;
	max-width: 900px !important;
	width: 100% !important;
	box-sizing: border-box !important;
	margin: 40px auto !important;
	font-family: var(--msse-font-family);
	font-size: var(--msse-font-size);
	color: var(--msse-text);
	padding: 0 16px !important;
	overflow-x: hidden !important; /* hard guard against page-level horizontal scroll */
}

.msse-wrapper,
.msse-wrapper *,
.msse-wrapper *::before,
.msse-wrapper *::after {
	box-sizing: border-box !important;
}

.msse-wrapper img { max-width: 100%; height: auto; }

.msse-card {
	background: var(--msse-card-bg) !important;
	border-radius: var(--msse-card-radius) !important;
	padding: var(--msse-card-padding) !important;
	margin: 0 0 var(--msse-section-spacing) 0 !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
	border: 1px solid var(--msse-card-border);
	width: 100% !important;
	max-width: 100% !important;
	overflow: hidden;
}

/* Intro */
.msse-intro {
	background: linear-gradient(135deg, var(--msse-secondary) 0%, #1a1a1a 100%);
	color: #fff;
	text-align: center;
}
.msse-title {
	margin: 0 0 10px !important;
	font-size: calc(var(--msse-font-size) + 13px);
	font-weight: 700;
	color: var(--msse-primary) !important;
	line-height: 1.3;
}
.msse-subtitle {
	margin: 0 auto !important;
	font-size: var(--msse-font-size);
	line-height: 1.6;
	opacity: 0.92;
	color: #fff;
	max-width: 640px;
}

/* Form */
.msse-field-row {
	display: flex !important;
	gap: 16px;
	margin: 0 0 20px 0 !important;
	flex-wrap: wrap;
	width: 100%;
}
.msse-field {
	flex: 1 1 240px;
	min-width: 0 !important;
	max-width: 100%;
	display: flex !important;
	flex-direction: column;
	margin: 0 !important;
}
.msse-field label { font-weight: 600; font-size: calc(var(--msse-font-size) - 1px); margin: 0 0 6px 0 !important; color: var(--msse-text); }

.msse-field input,
.msse-field select {
	padding: 12px 14px !important;
	border: 1.5px solid var(--msse-input-border) !important;
	border-radius: var(--msse-input-radius) !important;
	font-size: 16px !important; /* prevents iOS Safari auto-zoom on focus */
	background: #fafafa;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	width: 100% !important;
	max-width: 100% !important;
	min-height: 46px;
	-webkit-appearance: none;
	appearance: none;
	color: var(--msse-text);
}

.msse-field select {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 34px !important;
}

.msse-field input:focus,
.msse-field select:focus {
	outline: none;
	border-color: var(--msse-primary) !important;
	box-shadow: 0 0 0 3px rgba(255, 186, 0, 0.2) !important;
	background: #fff;
}

.msse-field-error {
	border-color: #d93025 !important;
	box-shadow: 0 0 0 3px rgba(217, 48, 37, 0.12) !important;
}

.msse-section-heading {
	font-size: calc(var(--msse-font-size) + 2px);
	font-weight: 700;
	color: var(--msse-heading) !important;
	margin: 0 0 6px 0 !important;
}
.msse-section-hint { font-size: 13px; color: #888; margin: 0 0 16px 0 !important; }

/* Appliance table (desktop) */
.msse-appliance-table-wrap { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 6px; }
.msse-appliance-table { width: 100%; border-collapse: collapse; font-size: calc(var(--msse-font-size) - 1px); }
.msse-appliance-table thead th {
	text-align: left;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: #999;
	font-weight: 700;
	padding: 6px 8px !important;
	border-bottom: 2px solid var(--msse-card-border);
}
.msse-appliance-table .msse-col-num { text-align: center; width: 78px; }
.msse-appliance-table .msse-col-check { width: 34px; text-align: center; }
.msse-appliance-row td { padding: 8px !important; border-bottom: 1px solid var(--msse-card-border); vertical-align: middle; }
.msse-appliance-name { font-weight: 600; color: var(--msse-text); cursor: default; display: inline-flex; align-items: center; gap: 6px; }
.msse-appliance-emoji { font-size: 16px; line-height: 1; }
.msse-appliance-row input[type="number"] { min-height: 38px; padding: 6px 8px !important; text-align: center; }
.msse-appliance-row input[type="checkbox"] {
	width: 20px; height: 20px; accent-color: var(--msse-primary); cursor: pointer; min-height: 0;
}
.msse-appliance-row.msse-row-disabled .msse-appliance-name,
.msse-appliance-row.msse-row-disabled input:not([type="checkbox"]) { opacity: 0.4; }

/* Custom appliance rows */
.msse-custom-row {
	display: flex !important;
	gap: 8px;
	align-items: center;
	margin-bottom: 8px !important;
	flex-wrap: wrap;
	background: #fafafa;
	border: 1px dashed var(--msse-input-border);
	border-radius: var(--msse-input-radius) !important;
	padding: 10px !important;
}
.msse-custom-row input[type="text"] { flex: 2 1 140px; min-width: 0; }
.msse-custom-row input[type="number"] { flex: 1 1 70px; min-width: 0; text-align: center; }
.msse-custom-row .msse-custom-remove {
	background: #fdeaea; color: #d93025; border: none; border-radius: var(--msse-input-radius) !important;
	width: 34px; height: 34px; cursor: pointer; font-weight: 700; flex: 0 0 auto;
}

.msse-btn-secondary {
	display: inline-block !important;
	background: #fafafa !important;
	color: var(--msse-heading) !important;
	border: 1.5px dashed var(--msse-input-border) !important;
	border-radius: var(--msse-input-radius) !important;
	padding: 10px 16px !important;
	font-size: calc(var(--msse-font-size) - 1px);
	font-weight: 600;
	cursor: pointer;
	margin: 4px 0 20px 0 !important;
}
.msse-btn-secondary:hover { border-color: var(--msse-primary) !important; color: var(--msse-primary) !important; }

.msse-btn-calculate {
	display: block !important;
	width: 100% !important;
	max-width: 100%;
	padding: 16px !important;
	background: var(--msse-btn-bg) !important;
	color: var(--msse-btn-text) !important;
	border: none !important;
	border-radius: var(--msse-input-radius) !important;
	font-size: calc(var(--msse-font-size) + 2px);
	font-weight: 700;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
	margin: 8px 0 0 0 !important;
	min-height: 52px;
}
.msse-btn-calculate:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); }
.msse-btn-calculate:active { transform: translateY(0); }

.msse-disclaimer { font-size: 12px; color: #888; text-align: center; margin: 12px 0 0 0 !important; }

/* Ad slots */
.msse-ad-slot { text-align: center; margin: var(--msse-section-spacing) 0 !important; min-height: 20px; overflow: hidden; max-width: 100%; width: 100%; }
.msse-ad-slot iframe, .msse-ad-slot ins { max-width: 100% !important; }

/* Results */
.msse-results { width: 100%; animation: msse-fade-in 0.5s ease; }
@keyframes msse-fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.msse-result-hero {
	display: flex !important;
	gap: 16px;
	flex-wrap: wrap;
	text-align: center;
	background: #fff8e6;
	border: 1.5px solid rgba(255, 186, 0, 0.35);
	width: 100%;
}
.msse-result-hero-item { flex: 1 1 200px; min-width: 0; padding: 10px !important; }
.msse-result-label { display: block; font-size: 12.5px; color: #777; font-weight: 600; margin: 0 0 8px 0 !important; text-transform: uppercase; letter-spacing: 0.4px; }
.msse-result-value { display: block; font-size: calc(var(--msse-font-size) + 11px); font-weight: 800; color: var(--msse-heading); word-break: break-word; overflow-wrap: break-word; }
.msse-result-note { display: block; font-size: 12px; color: #b8860b; margin-top: 4px; font-weight: 600; }
.msse-result-note:empty { display: none; }

.msse-result-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; width: 100%; }
.msse-result-box { background: #fafafa; border-radius: var(--msse-input-radius) !important; padding: 16px !important; text-align: center; border: 1px solid var(--msse-card-border); min-width: 0; }
.msse-mini-label { display: block; font-size: 12.5px; color: #777; margin: 0 0 6px 0 !important; font-weight: 600; }
.msse-mini-value { display: block; font-size: calc(var(--msse-font-size) + 5px); font-weight: 700; color: var(--msse-text); word-break: break-word; overflow-wrap: break-word; }

/* Breakdown list */
.msse-breakdown-card h3 { margin: 0 0 16px 0 !important; font-size: calc(var(--msse-font-size) + 2px); color: var(--msse-heading); }
.msse-breakdown-row { margin-bottom: 12px; }
.msse-breakdown-row:last-child { margin-bottom: 0; }
.msse-breakdown-top { display: flex; justify-content: space-between; font-size: calc(var(--msse-font-size) - 1px); margin-bottom: 4px; }
.msse-breakdown-name { font-weight: 600; color: var(--msse-text); }
.msse-breakdown-pct { color: #888; }
.msse-breakdown-bar-track { width: 100%; height: 10px; background: #f0f0f0; border-radius: 6px; overflow: hidden; }
.msse-breakdown-bar-fill { height: 100%; background: var(--msse-primary); border-radius: 6px; transition: width 0.4s ease; }

/* CTA */
.msse-cta-card { text-align: center; background: #2d2d2d0d; background: rgba(45, 45, 45, 0.04); border: 1.5px solid rgba(45, 45, 45, 0.12); }
.msse-cta-text { font-size: var(--msse-font-size); margin: 0 0 18px 0 !important; line-height: 1.6; }
.msse-cta-buttons { display: flex !important; gap: 14px; justify-content: center; flex-wrap: wrap; width: 100%; }
.msse-btn-cta,
.msse-btn-whatsapp {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	padding: 14px 26px !important;
	border-radius: var(--msse-input-radius) !important;
	font-weight: 700;
	font-size: calc(var(--msse-font-size) - 0.5px);
	text-decoration: none !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
	min-height: 48px;
	flex: 1 1 200px;
	text-align: center;
	max-width: 100%;
}
.msse-btn-cta { background: var(--msse-secondary) !important; color: #fff !important; }
.msse-btn-whatsapp { background: #25d366 !important; color: #fff !important; }
.msse-btn-cta:hover, .msse-btn-whatsapp:hover { filter: brightness(1.15); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15); }
.msse-btn-cta:hover { color: #fff !important; }
.msse-btn-whatsapp:hover { color: #fff !important; }

/* -----------------------------------------------------------------
   RESPONSIVE / MOBILE-FRIENDLY BREAKPOINTS
   ----------------------------------------------------------------- */

@media (max-width: 768px) {
	html body .msse-wrapper { margin: 24px auto !important; }
	.msse-card { padding: calc(var(--msse-card-padding) * 0.7) !important; }
}

@media (max-width: 600px) {
	html body .msse-wrapper {
		margin: 14px auto !important;
		padding: 0 10px !important;
		font-size: calc(var(--msse-font-size) - 1px);
	}
	.msse-card {
		padding: 16px !important;
		margin-bottom: 12px !important;
		border-radius: calc(var(--msse-card-radius) * 0.7) !important;
	}
	.msse-title { font-size: calc(var(--msse-font-size) + 6px); }
	.msse-subtitle { font-size: calc(var(--msse-font-size) - 1px); }

	.msse-field-row { flex-direction: column !important; gap: 10px !important; margin-bottom: 14px !important; }

	/* Appliance table -> stacked "card" rows on phones (classic responsive table technique) */
	.msse-appliance-table thead { display: none; }
	.msse-appliance-table, .msse-appliance-table tbody, .msse-appliance-row { display: block !important; width: 100%; }
	.msse-appliance-row {
		display: flex !important;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px 10px;
		padding: 10px !important;
		border: 1px solid var(--msse-card-border);
		border-radius: var(--msse-input-radius) !important;
		margin-bottom: 8px !important;
		background: #fafafa;
	}
	.msse-appliance-row td { display: block; border: none; padding: 0 !important; }
	.msse-appliance-row .msse-col-check { order: 1; flex: 0 0 auto; }
	.msse-appliance-row .msse-col-name { order: 2; flex: 1 1 100%; }
	.msse-appliance-row .msse-col-num { order: 3; flex: 1 1 28%; text-align: left; width: auto; }
	.msse-appliance-row .msse-col-num::before { content: attr(data-label); display: block; font-size: 10.5px; color: #999; font-weight: 700; text-transform: uppercase; margin-bottom: 2px; }
	.msse-appliance-row input[type="number"] { width: 100%; }

	.msse-custom-row { flex-direction: column; align-items: stretch; }
	.msse-custom-row input { width: 100%; }
	.msse-custom-row .msse-custom-remove { width: 100%; height: 38px; }

	.msse-result-hero { flex-direction: column !important; gap: 2px; }
	.msse-result-hero-item { padding: 8px !important; }
	.msse-result-value { font-size: calc(var(--msse-font-size) + 6px); }

	.msse-result-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
	.msse-result-box { padding: 12px !important; }
	.msse-mini-value { font-size: calc(var(--msse-font-size) + 2px); }

	.msse-cta-buttons { flex-direction: column !important; }
	.msse-btn-cta, .msse-btn-whatsapp { width: 100% !important; }
}

@media (max-width: 360px) {
	.msse-result-grid { grid-template-columns: 1fr !important; }
	.msse-card { padding: 12px !important; }
	.msse-appliance-row .msse-col-num { flex: 1 1 45%; }
}