/*!
 * Home Load Calculator — module CSS (e2z-hlc- prefix).
 * Reference standalone CSS se converted:
 * - #e2zHomeLoadCalculator scope -> .e2z-tool-home-load-calculator
 *   (framework ka shortcode wrapper — har instance par present)
 * - e2z-calc-*  ->  e2z-hlc-*
 * - Generic .hidden -> .e2z-hlc-hidden (contract prefix rule)
 * - Modal overlay/content body me append hota hai isliye wrapper-scope
 *   ke bina, lekin e2z-hlc- prefix ke saath — conflict impossible.
 * Baaki har rule, value aur breakpoint reference jaisa hi.
 */

.e2z-tool-home-load-calculator,
.e2z-tool-home-load-calculator *,
.e2z-tool-home-load-calculator *::before,
.e2z-tool-home-load-calculator *::after {
	box-sizing: border-box;
}

.e2z-tool-home-load-calculator .e2z-hlc-container {
	font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
	line-height: 1.5;
	color: #334155;
	width: 100%;
	margin: 0 auto;
	padding: 16px;
	background: #FFFFFF;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

/* Header */
.e2z-tool-home-load-calculator .e2z-hlc-header {
	padding: 24px 16px;
	background: linear-gradient(135deg, #0F766E, #134E4A);
	color: #fff;
	text-align: center;
	border-radius: 12px 12px 0 0;
}
.e2z-tool-home-load-calculator .e2z-hlc-title {
	font-size: 1.8rem;
	font-weight: 700;
	margin: 0 0 4px;
	color: #fff;
}
.e2z-tool-home-load-calculator .e2z-hlc-subtitle {
	font-size: 1rem;
	opacity: 0.9;
	margin: 0 0 12px;
}

/* Progress */
.e2z-tool-home-load-calculator .e2z-hlc-progress-container { margin-top: 12px; }
.e2z-tool-home-load-calculator .e2z-hlc-progress-bar {
	height: 8px;
	background: rgba(255,255,255,0.2);
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 6px;
}
.e2z-tool-home-load-calculator .e2z-hlc-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #EA580C, #F97316);
	width: 0%;
	transition: width 0.3s ease;
	border-radius: 4px;
}
.e2z-tool-home-load-calculator .e2z-hlc-progress-text {
	font-size: 0.85rem;
	margin: 0;
	color: rgba(255,255,255,0.9);
}

/* Main Grid */
.e2z-tool-home-load-calculator .e2z-hlc-main-grid {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 16px;
}
@media (min-width: 1024px) {
	.e2z-tool-home-load-calculator .e2z-hlc-main-grid {
		flex-direction: row;
		align-items: flex-start;
	}
	.e2z-tool-home-load-calculator .e2z-hlc-appliance-section { flex: 3; }
	.e2z-tool-home-load-calculator .e2z-hlc-results-section {
		flex: 1;
		min-width: 320px;
		position: sticky;
		top: 20px;
	}
}

/* Panels */
.e2z-tool-home-load-calculator .e2z-hlc-appliance-panel,
.e2z-tool-home-load-calculator .e2z-hlc-results-panel {
	background: #FFFFFF;
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.04);
	border: 1px solid #E2E8F0;
}
.e2z-tool-home-load-calculator .e2z-hlc-section-title {
	font-size: 1.4rem;
	font-weight: 600;
	color: #0F172A;
	margin: 0 0 16px;
	padding-bottom: 8px;
	border-bottom: 2px solid #F1F5F9;
}

/* Appliance list - 2 columns */
.e2z-tool-home-load-calculator .e2z-hlc-appliance-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin-bottom: 16px;
}
@media (min-width: 640px) {
	.e2z-tool-home-load-calculator .e2z-hlc-appliance-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Cards */
.e2z-tool-home-load-calculator .e2z-hlc-appliance-card {
	background: #F8FAFC;
	border-radius: 10px;
	padding: 16px;
	border: 1px solid #E2E8F0;
	transition: box-shadow 0.2s;
	display: flex;
	flex-direction: column;
}
.e2z-tool-home-load-calculator .e2z-hlc-appliance-card:hover {
	box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.e2z-tool-home-load-calculator .e2z-hlc-appliance-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}
.e2z-tool-home-load-calculator .e2z-hlc-appliance-icon {
	font-size: 24px;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ECFDF5;
	border-radius: 8px;
	flex-shrink: 0;
}
.e2z-tool-home-load-calculator .e2z-hlc-appliance-select {
	flex: 1;
	min-width: 150px;
	padding: 8px 10px;
	border: 1px solid #CBD5E1;
	border-radius: 6px;
	font-size: 0.9rem;
	background: #fff;
	color: #334155;
}
.e2z-tool-home-load-calculator .e2z-hlc-custom-name-input {
	flex: 1;
	min-width: 150px;
	padding: 8px 10px;
	border: 1px solid #CBD5E1;
	border-radius: 6px;
	font-size: 0.9rem;
}

/* Rows */
.e2z-tool-home-load-calculator .e2z-hlc-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 10px;
}
.e2z-tool-home-load-calculator .e2z-hlc-input-group {
	flex: 1;
	min-width: 120px;
	display: flex;
	flex-direction: column;
}
.e2z-tool-home-load-calculator .e2z-hlc-input-label {
	font-size: 0.85rem;
	font-weight: 500;
	color: #475569;
	margin-bottom: 4px;
}
.e2z-tool-home-load-calculator .e2z-hlc-quantity-controls {
	display: flex;
	align-items: center;
	gap: 4px;
}
.e2z-tool-home-load-calculator .e2z-hlc-decrement-btn,
.e2z-tool-home-load-calculator .e2z-hlc-increment-btn {
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #E2E8F0;
	border: none;
	border-radius: 6px;
	color: #334155;
	font-size: 1rem;
	cursor: pointer;
}
.e2z-tool-home-load-calculator .e2z-hlc-decrement-btn:hover,
.e2z-tool-home-load-calculator .e2z-hlc-increment-btn:hover {
	background: #CBD5E1;
}
.e2z-tool-home-load-calculator .e2z-hlc-quantity-input {
	width: 55px;
	padding: 6px;
	text-align: center;
	border: 1px solid #CBD5E1;
	border-radius: 6px;
	font-size: 0.9rem;
}
.e2z-tool-home-load-calculator .e2z-hlc-watts-input,
.e2z-tool-home-load-calculator .e2z-hlc-hours-input,
.e2z-tool-home-load-calculator .e2z-hlc-usage-select,
.e2z-tool-home-load-calculator .e2z-hlc-surge-watts-input,
.e2z-tool-home-load-calculator .e2z-hlc-category-select {
	padding: 8px 10px;
	border: 1px solid #CBD5E1;
	border-radius: 6px;
	font-size: 0.9rem;
	width: 100%;
	background: #fff;
}
.e2z-tool-home-load-calculator .e2z-hlc-watts-input:focus,
.e2z-tool-home-load-calculator .e2z-hlc-hours-input:focus,
.e2z-tool-home-load-calculator .e2z-hlc-usage-select:focus,
.e2z-tool-home-load-calculator .e2z-hlc-appliance-select:focus,
.e2z-tool-home-load-calculator .e2z-hlc-surge-watts-input:focus,
.e2z-tool-home-load-calculator .e2z-hlc-category-select:focus {
	outline: none;
	border-color: #0F766E;
	box-shadow: 0 0 0 3px rgba(15,118,110,0.1);
}

/* Info row */
.e2z-tool-home-load-calculator .e2z-hlc-info-row {
	justify-content: flex-start;
}
.e2z-tool-home-load-calculator .e2z-hlc-info-btn {
	background: none;
	border: 1px solid #CBD5E1;
	border-radius: 6px;
	padding: 6px 14px;
	font-size: 0.85rem;
	color: #0F766E;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.e2z-tool-home-load-calculator .e2z-hlc-info-btn:hover {
	background: #F1F5F9;
}

/* Modal overlay — body me append hota hai, isliye wrapper-scope nahi,
   sirf unique e2z-hlc- prefix (reference me yahi scoped hone se style dead thi — fix) */
.e2z-hlc-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.3);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}
.e2z-hlc-modal-content {
	background: #fff;
	border-radius: 12px;
	padding: 20px;
	max-width: 500px;
	width: 90%;
	box-shadow: 0 10px 30px rgba(0,0,0,0.2);
	max-height: 80vh;
	overflow-y: auto;
	font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
	color: #334155;
	box-sizing: border-box;
}
.e2z-hlc-modal-content p {
	margin: 0 0 10px;
	font-size: 0.95rem;
	line-height: 1.5;
}
.e2z-hlc-modal-close {
	background: #0F766E;
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 8px 16px;
	cursor: pointer;
	float: right;
}

/* Remove button */
.e2z-tool-home-load-calculator .e2z-hlc-remove-btn {
	background: none;
	border: none;
	color: #DC2626;
	font-size: 0.85rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 4px 0;
	margin-top: auto;
}
.e2z-tool-home-load-calculator .e2z-hlc-remove-btn.e2z-hlc-hidden {
	display: none;
}

/* Add buttons */
.e2z-tool-home-load-calculator .e2z-hlc-appliance-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 16px;
}
.e2z-tool-home-load-calculator .e2z-hlc-add-btn,
.e2z-tool-home-load-calculator .e2z-hlc-add-custom-btn {
	flex: 1;
	padding: 12px;
	border: none;
	border-radius: 8px;
	font-size: 0.95rem;
	font-weight: 500;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	color: #fff;
}
.e2z-tool-home-load-calculator .e2z-hlc-add-btn {
	background: #14B8A6;
}
.e2z-tool-home-load-calculator .e2z-hlc-add-custom-btn {
	background: #0F766E;
}
.e2z-tool-home-load-calculator .e2z-hlc-add-btn:hover,
.e2z-tool-home-load-calculator .e2z-hlc-add-custom-btn:hover {
	filter: brightness(0.9);
}

/* Results */
.e2z-tool-home-load-calculator .e2z-hlc-results-container {
	margin-bottom: 16px;
}
.e2z-tool-home-load-calculator .e2z-hlc-empty-state {
	padding: 24px;
	text-align: center;
	color: #64748B;
	background: #F8FAFC;
	border-radius: 8px;
}

/* Result cards */
.e2z-tool-home-load-calculator .e2z-hlc-result-card {
	background: #ECFDF5;
	border: 1px solid #10B981;
	border-radius: 10px;
	padding: 16px;
	margin-bottom: 16px;
}
.e2z-tool-home-load-calculator .e2z-hlc-result-card h3 {
	font-size: 1.1rem;
	color: #0F172A;
	margin: 0 0 12px;
}
.e2z-tool-home-load-calculator .e2z-hlc-result-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 12px;
}
.e2z-tool-home-load-calculator .e2z-hlc-result-item {
	padding: 10px;
	border-radius: 8px;
	text-align: center;
}
.e2z-tool-home-load-calculator .e2z-hlc-result-item-orange {
	background: rgba(254,215,170,0.3);
	border: 1px solid rgba(254,215,170,0.5);
}
.e2z-tool-home-load-calculator .e2z-hlc-result-item-green {
	background: rgba(154,230,180,0.3);
	border: 1px solid rgba(154,230,180,0.5);
}
.e2z-tool-home-load-calculator .e2z-hlc-result-item-purple {
	background: rgba(214,188,250,0.3);
	border: 1px solid rgba(214,188,250,0.5);
}
.e2z-tool-home-load-calculator .e2z-hlc-result-item-blue {
	background: rgba(173,216,230,0.3);
	border: 1px solid rgba(173,216,230,0.5);
}
.e2z-tool-home-load-calculator .e2z-hlc-result-label {
	font-size: 0.8rem;
	font-weight: 600;
	color: #334155;
	margin-bottom: 4px;
}
.e2z-tool-home-load-calculator .e2z-hlc-result-value {
	font-size: 1.2rem;
	font-weight: 700;
	margin: 0;
}
.e2z-tool-home-load-calculator .e2z-hlc-result-value-orange { color: #EA580C; }
.e2z-tool-home-load-calculator .e2z-hlc-result-value-green  { color: #16A34A; }
.e2z-tool-home-load-calculator .e2z-hlc-result-value-purple { color: #7C3AED; }
.e2z-tool-home-load-calculator .e2z-hlc-result-value-blue   { color: #0F766E; }

/* Settings inside result cards */
.e2z-tool-home-load-calculator .e2z-hlc-settings-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 10px;
	align-items: center;
}
.e2z-tool-home-load-calculator .e2z-hlc-settings-row label {
	font-size: 0.85rem;
	color: #475569;
}
.e2z-tool-home-load-calculator .e2z-hlc-settings-row select,
.e2z-tool-home-load-calculator .e2z-hlc-settings-row input {
	padding: 6px 8px;
	border: 1px solid #CBD5E1;
	border-radius: 6px;
	font-size: 0.85rem;
}

/* Table */
.e2z-tool-home-load-calculator .e2z-hlc-table-container {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.e2z-tool-home-load-calculator .e2z-hlc-results-table {
	width: 100%;
	min-width: 600px;
	border-collapse: collapse;
	font-size: 0.85rem;
	margin-top: 8px;
}
.e2z-tool-home-load-calculator .e2z-hlc-results-table th {
	background: #F1F5F9;
	padding: 8px;
	text-align: left;
	font-weight: 600;
	border-bottom: 2px solid #E2E8F0;
}
.e2z-tool-home-load-calculator .e2z-hlc-results-table td {
	padding: 8px;
	border-bottom: 1px solid #F1F5F9;
}
.e2z-tool-home-load-calculator .e2z-hlc-results-table tr:nth-child(even) {
	background: #F8FAFC;
}

/* Action buttons */
.e2z-tool-home-load-calculator .e2z-hlc-action-buttons {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.e2z-tool-home-load-calculator .e2z-hlc-calculate-btn,
.e2z-tool-home-load-calculator .e2z-hlc-print-btn,
.e2z-tool-home-load-calculator .e2z-hlc-copy-btn,
.e2z-tool-home-load-calculator .e2z-hlc-reset-btn {
	padding: 12px;
	border: none;
	border-radius: 8px;
	font-size: 0.95rem;
	font-weight: 500;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	color: #fff;
}
.e2z-tool-home-load-calculator .e2z-hlc-calculate-btn { background: #EA580C; }
.e2z-tool-home-load-calculator .e2z-hlc-calculate-btn:hover { background: #C2410C; }
.e2z-tool-home-load-calculator .e2z-hlc-print-btn { background: #16A34A; }
.e2z-tool-home-load-calculator .e2z-hlc-print-btn:hover { background: #15803D; }
.e2z-tool-home-load-calculator .e2z-hlc-copy-btn { background: #0F766E; }
.e2z-tool-home-load-calculator .e2z-hlc-copy-btn:hover { background: #0E6B63; }
.e2z-tool-home-load-calculator .e2z-hlc-reset-btn { background: #DC2626; }
.e2z-tool-home-load-calculator .e2z-hlc-reset-btn:hover { background: #B91C1C; }

/* Responsive fine‑tuning */
@media (max-width: 480px) {
	.e2z-tool-home-load-calculator .e2z-hlc-title { font-size: 1.5rem; }
	.e2z-tool-home-load-calculator .e2z-hlc-appliance-card { padding: 12px; }
	.e2z-tool-home-load-calculator .e2z-hlc-input-group { min-width: 100px; }
}
@media (max-width: 360px) {
	.e2z-tool-home-load-calculator .e2z-hlc-container { padding: 8px; }
	.e2z-tool-home-load-calculator .e2z-hlc-header { padding: 16px 10px; }
	.e2z-tool-home-load-calculator .e2z-hlc-title { font-size: 1.3rem; }
}

/* ---------- Mobile responsive hardening (appliance box overflow fix) ----------
 * Root cause: grid/flex items ka default min-width:auto — lambi <select> option
 * text (jaise "Non-Continuous...") card ko min-content tak phaila deti thi,
 * jisse card parent panel se bahar overflow karta tha chhoti screens par.
 * Fix: min-width:0 poori chain par + max-width:100% form controls par.
 * Desktop layout par zero effect (wahan content already fit hota hai). */
.e2z-tool-home-load-calculator .e2z-hlc-appliance-section,
.e2z-tool-home-load-calculator .e2z-hlc-appliance-panel,
.e2z-tool-home-load-calculator .e2z-hlc-appliance-list,
.e2z-tool-home-load-calculator .e2z-hlc-appliance-card,
.e2z-tool-home-load-calculator .e2z-hlc-appliance-header,
.e2z-tool-home-load-calculator .e2z-hlc-row,
.e2z-tool-home-load-calculator .e2z-hlc-input-group {
	min-width: 0;
	max-width: 100%;
}
.e2z-tool-home-load-calculator .e2z-hlc-appliance-card {
	width: 100%;
}
/* Form controls kabhi bhi card se bahar na nikle — select ki intrinsic
 * min-content width ko shrink hone do, text ellipsis se handle hota hai */
.e2z-tool-home-load-calculator .e2z-hlc-appliance-card select,
.e2z-tool-home-load-calculator .e2z-hlc-appliance-card input,
.e2z-tool-home-load-calculator .e2z-hlc-appliance-card button {
	min-width: 0;
	max-width: 100%;
}
.e2z-tool-home-load-calculator .e2z-hlc-appliance-select,
.e2z-tool-home-load-calculator .e2z-hlc-usage-select,
.e2z-tool-home-load-calculator .e2z-hlc-category-select {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
/* input-group ke andar flex column children bhi shrink ho sake */
.e2z-tool-home-load-calculator .e2z-hlc-input-group > * {
	min-width: 0;
	max-width: 100%;
}
/* Bahut chhoti screens: appliance-select ko header me poori width lene do
 * (icon ke neeche wrap) taaki 150px minimum bhi kabhi na phode */
@media (max-width: 420px) {
	.e2z-tool-home-load-calculator .e2z-hlc-appliance-select,
	.e2z-tool-home-load-calculator .e2z-hlc-custom-name-input {
		min-width: 0;
		flex-basis: 100%;
	}
	.e2z-tool-home-load-calculator .e2z-hlc-input-group { min-width: 46%; }
}