/* =====================================================================
   Kalkulator — motyw CIEMNY / liquid glass (nakładka na kalkulator.css)
   Ładowany PO kalkulator.css → przy równej specyficzności wygrywa.
   ===================================================================== */
:root {
    --bg-color:     #0a0d12;
    --card-bg:      rgba(255,255,255,0.055);
    --card-shadow:  0 14px 44px rgba(0,0,0,0.5);
    --border:       rgba(255,255,255,0.12);
    --border-solid: rgba(255,255,255,0.14);
    --text-main:    #f2f4f7;
    --text-muted:   rgba(255,255,255,0.62);
}

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    background-image: radial-gradient(circle at top right, rgba(46,204,113,0.10) 0%, transparent 45%),
                      radial-gradient(circle at bottom left, rgba(241,196,15,0.06) 0%, transparent 45%);
}
h1, h2, h3, h4 { color: var(--text-main); }
.step-indicator, .subtitle, .base-desc, .range-header label, .input-group label,
.route-info, .empty-state, .opt-label small { color: var(--text-muted); }

/* Szklane karty */
.card {
    background: var(--card-bg);
    -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid var(--border);
    box-shadow: var(--card-shadow);
}

/* Pola formularza */
input[type="text"], input[type="number"], select {
    background: rgba(255,255,255,0.06);
    color: var(--text-main);
    border: 2px solid var(--border);
}
input[type="text"]::placeholder { color: rgba(255,255,255,0.4); }
select option { background: #161b24; color: #fff; }
input:focus, select:focus { border-color: var(--primary); box-shadow: 0 4px 18px rgba(46,204,113,0.18); }

/* Suwaki */
input[type=range]::-webkit-slider-runnable-track { background: rgba(255,255,255,0.16); }
input[type=range]::-moz-range-track { background: rgba(255,255,255,0.16); height: 8px; border-radius: 4px; }

/* Przyciski outline na ciemnym tle */
.btn-outline {
    background: rgba(255,255,255,0.04); color: var(--text-main);
    border: 1.5px solid var(--border);
}
.btn-outline:hover { border-color: var(--primary); color: var(--primary); background: rgba(46,204,113,0.10); }

/* Karty usług + przełączniki */
.service-card.active { border-color: var(--primary); background: rgba(46,204,113,0.06); }
.slider { background: rgba(255,255,255,0.18); }

/* Checkboxy / addony */
.checkbox-label.large { background: rgba(255,255,255,0.04); border: 1px solid var(--border); }
.custom-checkbox { border-color: var(--border-solid); }

/* Modale na ciemno */
.modal-overlay { background: rgba(0,0,0,0.72); }
.modal-content { background: #11151c; border: 1px solid var(--border); color: var(--text-main); }
.modal-header { border-bottom-color: var(--border); }
.btn-icon { color: var(--text-main); }

/* Nagłówek kalkulatora */
.modern-header h1 { color: var(--text-main); }
.modern-header .accent { color: var(--primary); }

/* Nawigacja kroków */
.step-nav { margin-top: 24px; display: flex; justify-content: flex-end; }
.step-nav .btn-primary { padding: 14px 28px; font-size: 1.05rem; }