/* SK EKO Kalkulator Pompy Ciepła – style frontu (izolowane pod .skeko-calc) */

.skeko-calc {
	--sk-primary: #0f766e;
	--sk-primary-dark: #115e59;
	--sk-accent: #ea580c;
	--sk-bg: #ffffff;
	--sk-surface: #f8fafc;
	--sk-border: #e2e8f0;
	--sk-text: #0f172a;
	--sk-muted: #475569;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 15px;
	color: var(--sk-text);
	max-width: 1220px;
	margin: 0 auto;
	box-sizing: border-box;
	line-height: 1.5;
	text-align: left;
}
.alignwide > .skeko-calc,
.alignfull > .skeko-calc { max-width: none; }

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

/* Reset typowych nadpisań motywów */
.skeko-calc h2,
.skeko-calc h4,
.skeko-calc p { margin: 0; padding: 0; text-transform: none; letter-spacing: normal; }
.skeko-calc button,
.skeko-calc select,
.skeko-calc input,
.skeko-calc textarea {
	font-family: inherit;
	text-transform: none;
	letter-spacing: normal;
	margin: 0;
	min-height: 0;
	box-shadow: none;
}
.skeko-calc a { text-decoration: none; }

.skeko-calc .sk-calc-container {
	background: var(--sk-bg);
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
	border: 1px solid var(--sk-border);
	overflow: hidden;
}

/* NAGŁÓWEK */
.skeko-calc .sk-calc-header {
	background: linear-gradient(135deg, #0f172a 0%, #134e4a 100%);
	color: #fff;
	padding: 20px 28px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 18px;
}
.skeko-calc .sk-header-left { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.skeko-calc .sk-brand-logo-box {
	background: #fff;
	border-radius: 12px;
	padding: 8px 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
	min-height: 68px;
}
.skeko-calc .sk-real-logo-img {
	display: block;
	max-height: 58px;
	max-width: 240px;
	width: auto;
	height: auto;
	object-fit: contain;
	margin: 0;
	border: 0;
	box-shadow: none;
}
.skeko-calc .sk-brand-text {
	font-weight: 800;
	font-size: 17px;
	color: var(--sk-primary);
	letter-spacing: 0.3px;
	white-space: nowrap;
}
.skeko-calc .sk-calc-header .sk-calc-title {
	margin: 0 0 4px 0;
	font-size: 21px;
	line-height: 1.3;
	font-weight: 700;
	color: #fff;
	letter-spacing: -0.3px;
}
.skeko-calc .sk-calc-header .sk-calc-subtitle { margin: 0; font-size: 13.5px; color: #cbd5e1; }
.skeko-calc .sk-badge-zone {
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.25);
	padding: 8px 14px;
	border-radius: 8px;
	font-size: 12.5px;
	color: #f8fafc;
	font-weight: 600;
}

/* SIATKA */
.skeko-calc .sk-calc-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 0; }
.skeko-calc .sk-inputs-col { padding: 24px 28px; border-right: 1px solid var(--sk-border); min-width: 0; }
.skeko-calc .sk-results-col {
	padding: 24px 28px;
	background: var(--sk-surface);
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
}
@media (max-width: 960px) {
	.skeko-calc .sk-calc-grid { grid-template-columns: 1fr; }
	.skeko-calc .sk-inputs-col { border-right: 0; border-bottom: 1px solid var(--sk-border); }
}

.skeko-calc .sk-section { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--sk-border); }
.skeko-calc .sk-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.skeko-calc .sk-sec-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--sk-text);
	margin: 0 0 14px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
}
.skeko-calc .sk-sec-step {
	background: var(--sk-primary);
	color: #fff;
	font-size: 12px;
	padding: 3px 9px;
	border-radius: 6px;
	margin-right: 8px;
}
.skeko-calc .sk-u-pill {
	font-size: 12px;
	font-weight: 600;
	background: #e0f2fe;
	color: #0369a1;
	padding: 4px 10px;
	border-radius: 99px;
}
.skeko-calc .sk-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 12px; }
.skeko-calc .sk-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; min-width: 0; }
.skeko-calc .sk-field label {
	font-size: 13px;
	font-weight: 600;
	color: var(--sk-muted);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	margin: 0;
	line-height: 1.4;
}
.skeko-calc .sk-field.is-disabled { opacity: 0.45; }
.skeko-calc .sk-val-highlight { color: var(--sk-primary); font-weight: 700; font-size: 14px; white-space: nowrap; }

.skeko-calc .sk-select {
	width: 100%;
	max-width: 100%;
	height: auto;
	padding: 10px 12px;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--sk-text);
	background-color: #fff;
	transition: border-color 0.2s;
}
.skeko-calc .sk-select:focus {
	outline: none;
	border-color: var(--sk-primary);
	box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15);
}
.skeko-calc .sk-range {
	width: 100%;
	accent-color: var(--sk-primary);
	cursor: pointer;
	height: 6px;
	margin: 6px 0;
	padding: 0;
	border: 0;
	background: transparent;
}

/* ZAKŁADKI TRYBU */
.skeko-calc .sk-mode-tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-bottom: 18px;
	background: #f1f5f9;
	padding: 5px;
	border-radius: 10px;
}
.skeko-calc .sk-mode-btn {
	padding: 10px 8px;
	border: none;
	border-radius: 8px;
	font-size: 13px;
	line-height: 1.3;
	font-weight: 700;
	cursor: pointer;
	background: transparent;
	color: var(--sk-muted);
	transition: all 0.2s;
}
.skeko-calc .sk-mode-btn:hover { color: var(--sk-primary); background: rgba(255, 255, 255, 0.5); }
.skeko-calc .sk-mode-btn.active { background: #fff; color: var(--sk-primary); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); }

/* KARTY CWU */
.skeko-calc .sk-cwu-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 8px 0 14px 0; }
.skeko-calc .sk-cwu-card {
	border: 2px solid var(--sk-border);
	background: #fff;
	color: var(--sk-text);
	border-radius: 10px;
	padding: 12px 10px;
	text-align: center;
	cursor: pointer;
	transition: all 0.2s;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	width: 100%;
	font-weight: 400;
	line-height: 1.3;
}
.skeko-calc .sk-cwu-card:hover { border-color: #99f6e4; background: #f0fdfa; color: var(--sk-text); }
.skeko-calc .sk-cwu-card.active { border-color: var(--sk-primary); background: #f0fdfa; box-shadow: 0 4px 12px rgba(15, 118, 110, 0.12); }
.skeko-calc .sk-cwu-icon { font-size: 22px; line-height: 1; margin-bottom: 2px; display: block; }
.skeko-calc .sk-cwu-title { font-size: 13px; font-weight: 700; color: var(--sk-text); display: block; }
.skeko-calc .sk-cwu-sub { font-size: 11px; color: var(--sk-muted); line-height: 1.3; display: block; }

/* WYNIKI */
.skeko-calc .sk-main-result {
	background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
	color: #fff;
	padding: 20px;
	border-radius: 12px;
	box-shadow: 0 8px 20px rgba(15, 118, 110, 0.22);
}
.skeko-calc .sk-main-result-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px; opacity: 0.9; font-weight: 600; }
.skeko-calc .sk-main-power { font-size: 36px; font-weight: 800; margin: 4px 0 6px 0; line-height: 1.1; }
.skeko-calc .sk-main-ref { font-size: 13px; opacity: 0.95; }
.skeko-calc .sk-main-sub {
	font-size: 13px;
	opacity: 0.95;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 8px;
	padding-top: 10px;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.skeko-calc .sk-cwu-result-box {
	background: #fff;
	border: 1.5px solid #0d9488;
	border-radius: 10px;
	padding: 14px 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.skeko-calc .sk-cwu-res-left { display: flex; flex-direction: column; gap: 2px; }
.skeko-calc .sk-cwu-res-title { font-size: 12px; font-weight: 700; color: var(--sk-primary); text-transform: uppercase; letter-spacing: 0.4px; }
.skeko-calc .sk-cwu-res-val { font-size: 22px; font-weight: 800; color: var(--sk-text); }
.skeko-calc .sk-cwu-res-details { font-size: 12px; color: var(--sk-muted); }
.skeko-calc .sk-cwu-coil-badge {
	background: #f0fdfa;
	border: 1px solid #99f6e4;
	color: #0f766e;
	padding: 6px 10px;
	border-radius: 8px;
	font-size: 11.5px;
	font-weight: 700;
	text-align: right;
}
.skeko-calc .sk-kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.skeko-calc .sk-kpi-card { background: #fff; border: 1px solid var(--sk-border); padding: 14px; border-radius: 10px; transition: opacity 0.2s; }
.skeko-calc .sk-kpi-title { font-size: 12px; color: var(--sk-muted); font-weight: 600; margin-bottom: 4px; }
.skeko-calc .sk-kpi-value { font-size: 20px; font-weight: 800; color: var(--sk-text); }
.skeko-calc .sk-kpi-desc { font-size: 11px; color: #64748b; margin-top: 3px; }

.skeko-calc .sk-bars-box { background: #fff; border: 1px solid var(--sk-border); padding: 16px; border-radius: 10px; }
.skeko-calc .sk-bars-title { font-size: 13px; font-weight: 700; margin: 0 0 12px 0; }
.skeko-calc .sk-bar-item { margin-bottom: 10px; }
.skeko-calc .sk-bar-item:last-child { margin-bottom: 0; }
.skeko-calc .sk-bar-head { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; margin-bottom: 4px; font-weight: 600; }
.skeko-calc .sk-bar-track { width: 100%; height: 8px; background: #e2e8f0; border-radius: 99px; overflow: hidden; }
.skeko-calc .sk-bar-fill { height: 100%; background: var(--sk-primary); border-radius: 99px; transition: width 0.3s ease; }

.skeko-calc .sk-expert-box {
	background: #fffbeb;
	border: 1px solid #fde68a;
	color: #92400e;
	padding: 14px;
	border-radius: 10px;
	font-size: 12.5px;
	line-height: 1.45;
}
.skeko-calc .sk-expert-box strong { display: block; margin-bottom: 4px; color: #78350f; }

.skeko-calc .sk-cost-box { background: #fff; border: 1px solid var(--sk-border); padding: 16px; border-radius: 10px; }
.skeko-calc .sk-cost-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	padding: 6px 0;
	border-bottom: 1px dashed #e2e8f0;
}
.skeko-calc .sk-cost-row strong { white-space: nowrap; }
.skeko-calc .sk-cost-row:last-child { border-bottom: none; padding-top: 10px; font-weight: 700; color: #15803d; font-size: 15px; }
.skeko-calc .sk-cost-old { color: #dc2626; }

/* LEAD */
.skeko-calc .sk-lead-box { background: #0f172a; color: #fff; padding: 20px; border-radius: 12px; }
.skeko-calc .sk-lead-box h4 { margin: 0 0 6px 0; font-size: 16px; line-height: 1.35; color: #fff; }
.skeko-calc .sk-lead-box p { margin: 0 0 14px 0; font-size: 12.5px; color: #cbd5e1; }
.skeko-calc .sk-btn-primary,
.skeko-calc .sk-btn-primary:visited {
	width: 100%;
	padding: 13px 16px;
	background: var(--sk-accent);
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.2s;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	margin-bottom: 10px;
	text-align: center;
}
.skeko-calc .sk-btn-primary:hover,
.skeko-calc .sk-btn-primary:focus { background: #c2410c; color: #fff; }
.skeko-calc .sk-lead-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.skeko-calc .sk-lead-actions.sk-single { grid-template-columns: 1fr; }
.skeko-calc .sk-btn-secondary,
.skeko-calc .sk-btn-secondary:visited {
	width: 100%;
	padding: 11px 12px;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 8px;
	font-size: 13px;
	line-height: 1.3;
	font-weight: 600;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	text-align: center;
}
.skeko-calc .sk-btn-secondary:hover,
.skeko-calc .sk-btn-secondary:focus { background: rgba(255, 255, 255, 0.18); color: #fff; }
.skeko-calc .sk-report-textarea {
	width: 100%;
	height: 115px;
	margin-top: 12px;
	padding: 10px;
	border-radius: 8px;
	border: 1px solid #334155;
	background: #1e293b;
	color: #e2e8f0;
	font-size: 11.5px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	resize: vertical;
}

/* MOBILE */
@media (max-width: 640px) {
	.skeko-calc .sk-cwu-cards { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.skeko-calc .sk-row,
	.skeko-calc .sk-kpi-grid,
	.skeko-calc .sk-lead-actions { grid-template-columns: 1fr; }
	.skeko-calc .sk-inputs-col,
	.skeko-calc .sk-results-col,
	.skeko-calc .sk-calc-header { padding: 16px; }
	.skeko-calc .sk-calc-header .sk-calc-title { font-size: 18px; }
	.skeko-calc .sk-main-power { font-size: 30px; }
	.skeko-calc .sk-mode-btn { font-size: 12px; }
}