/* =========================================================
   Heizungsrechner — Frontend
   Rebrendiranje: promeni samo varijable ispod (--hr-primary itd.)
   ========================================================= */
.hr-app {
	--hr-primary: #0a6cb0;       /* glavna akcijska boja (BKW-style plava) */
	--hr-primary-dark: #075486;
	--hr-text: #2a2a2a;
	--hr-muted: #6b7280;
	--hr-line: #e4e7eb;
	--hr-bg: #ffffff;
	--hr-radius: 6px;
	--hr-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	font-family: var(--hr-font);
	color: var(--hr-text);
	background: var(--hr-bg);
	max-width: 1100px;
	margin: 0 auto;
	position: relative;
}
@media (max-width: 860px) {
	.hr-app { grid-template-columns: 1fr; }
}

/* --- Mapa --- */
.hr-map-col { position: relative; }
.hr-address-bar { position: relative; margin-bottom: 8px; }
.hr-address-input {
	width: 100%; padding: 12px 14px; border: 1px solid var(--hr-line);
	border-radius: var(--hr-radius); font-size: 15px; box-sizing: border-box;
}
.hr-address-results {
	list-style: none; margin: 2px 0 0; padding: 0; position: absolute; z-index: 1000;
	background: #fff; width: 100%; border: 1px solid var(--hr-line);
	border-radius: var(--hr-radius); box-shadow: 0 6px 20px rgba(0,0,0,.08); max-height: 240px; overflow:auto;
}
.hr-address-results li { padding: 10px 12px; cursor: pointer; font-size: 14px; border-bottom: 1px solid #f1f3f5; }
.hr-address-results li:hover { background: #f4f8fb; }
.hr-map { width: 100%; height: 460px; border-radius: var(--hr-radius); overflow: hidden; }
@media (max-width: 860px) { .hr-map { height: 280px; } }

/* --- Sažetak --- */
.hr-summary { margin-bottom: 18px; }
.hr-sum-row {
	display: grid; grid-template-columns: 1fr 1fr auto; align-items: center;
	gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--hr-line); font-size: 14px;
}
.hr-sum-label { color: var(--hr-muted); }
.hr-sum-val { font-weight: 600; }
.hr-sum-change { color: var(--hr-primary); cursor: pointer; font-size: 13px; }
.hr-sum-change:hover { text-decoration: underline; }

/* --- Korak --- */
.hr-step-head { display: flex; justify-content: space-between; align-items: baseline; }
.hr-step-title { font-size: 22px; margin: 0; }
.hr-step-count { color: var(--hr-muted); font-size: 14px; }
.hr-step-q { color: var(--hr-text); margin: 8px 0 22px; }

.hr-options { display: flex; flex-wrap: wrap; gap: 12px; }
.hr-options-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.hr-option {
	flex: 1 1 auto; min-width: 120px; padding: 18px 14px; background: #fff;
	border: 1.5px solid var(--hr-line); border-radius: var(--hr-radius);
	cursor: pointer; font-size: 14px; text-align: center; transition: all .15s ease;
}
.hr-option:hover { border-color: var(--hr-primary); }
.hr-option.is-selected { border-color: var(--hr-primary); background: #eef6fc; color: var(--hr-primary-dark); font-weight: 600; }

.hr-field { margin-top: 18px; display: flex; align-items: center; gap: 10px; }
.hr-field label { color: var(--hr-text); font-size: 14px; }
.hr-field select, .hr-field input {
	padding: 10px 12px; border: 1px solid var(--hr-line); border-radius: var(--hr-radius); font-size: 15px;
}
.hr-number { width: 140px; }
.hr-unit { color: var(--hr-muted); }
.hr-estimate-note { color: var(--hr-muted); font-size: 13px; margin-top: 8px; }

/* --- Navigacija --- */
.hr-step-nav { margin-top: 28px; display: flex; gap: 12px; }
.hr-next, .hr-cta {
	background: var(--hr-primary); color: #fff; border: 0; padding: 14px 28px;
	border-radius: var(--hr-radius); font-size: 15px; font-weight: 600; cursor: pointer;
}
.hr-next:hover, .hr-cta:hover { background: var(--hr-primary-dark); }
.hr-back {
	background: transparent; color: var(--hr-muted); border: 1px solid var(--hr-line);
	padding: 14px 22px; border-radius: var(--hr-radius); font-size: 15px; cursor: pointer;
}

/* --- Rezultati / tabovi --- */
.hr-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 2px solid var(--hr-line); }
.hr-tab {
	background: #f4f6f8; border: 0; padding: 12px 16px; cursor: pointer; font-size: 13px;
	border-radius: var(--hr-radius) var(--hr-radius) 0 0;
}
.hr-tab.is-active { background: var(--hr-primary); color: #fff; }
.hr-tab-pdf { margin-left: auto; }
.hr-panel { display: none; padding: 20px 0; }
.hr-panel.is-active { display: block; }
.hr-rtable { width: 100%; border-collapse: collapse; margin-top: 10px; }
.hr-rtable th, .hr-rtable td { padding: 10px; border-bottom: 1px solid var(--hr-line); text-align: left; font-size: 14px; }
.hr-rtable th { background: #f4f8fb; }
.hr-muted { color: var(--hr-muted); font-size: 13px; }

/* --- Modal --- */
.hr-modal {
	position: fixed; inset: 0; background: rgba(20,28,38,.55);
	display: flex; align-items: center; justify-content: center; z-index: 99999; padding: 20px;
}
/* Skriveno stanje preko klase + !important da pregazi tema-CSS koji ignoriše [hidden]. */
.hr-modal.hr-hidden { display: none !important; }
/* Isto za korake i rezultate — neke teme forsiraju display na .hr-step itd. */
.hr-step.hr-hidden, #hr-results.hr-hidden { display: none !important; }
.hr-modal-box {
	background: #fff; border-radius: 10px; max-width: 560px; width: 100%;
	padding: 32px; position: relative; max-height: 90vh; overflow: auto;
}
.hr-modal-close { position: absolute; top: 14px; right: 16px; border: 0; background: none; font-size: 26px; cursor: pointer; color: var(--hr-muted); }
.hr-modal-sub { color: var(--hr-muted); font-size: 14px; }
.hr-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0; }
.hr-form-grid input { padding: 12px; border: 1px solid var(--hr-line); border-radius: var(--hr-radius); font-size: 14px; }
.hr-modal-label { font-size: 14px; margin: 8px 0; }
.hr-toggles { display: grid; gap: 8px; margin-bottom: 14px; }
.hr-toggles label, .hr-checkrow { font-size: 14px; display: flex; gap: 8px; align-items: flex-start; }
.hr-checkrow { margin: 12px 0; }
#hr-message { width: 100%; min-height: 90px; padding: 12px; border: 1px solid var(--hr-line); border-radius: var(--hr-radius); box-sizing: border-box; margin: 8px 0; font-family: inherit; }
.hr-form-msg { margin-top: 12px; font-size: 14px; }
.hr-form-msg.is-error { color: #c0392b; }
.hr-form-msg.is-success { color: #1e7e34; }
#hr-submit { width: 100%; margin-top: 8px; }

/* --- micro --- */
.hr-shake { animation: hrShake .4s; }
@keyframes hrShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }