/* ==========================================================================
   KALKULATOR KALORII - KOMPLETNY STYL (WZMACNIONY + CZARNY NAGŁÓWEK WYNIKU)
   ========================================================================== */

/* --- Główny kontener --- */
.pro-calc-container {
    max-width: 800px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: transparent;
    border-radius: 16px;
    padding: 30px;
    color: #ffffff; 
    box-sizing: border-box;
}

.pro-calc-header { margin-bottom: 25px; text-align: center; }
.pro-calc-header h3 { margin: 0 0 10px 0; font-size: 1.8rem; font-weight: bold; color: #ffffff !important;}
.pro-calc-header p { margin: 0; opacity: 0.8; font-size: 1.1rem; color: #ffffff !important; }

/* --- Etykiety --- */
.pro-calc-label { 
    display: block; 
    font-weight: 600; 
    font-size: 1rem; 
    margin-bottom: 12px; 
    color: #ffffff !important; 
}

/* --- Układ siatki --- */
.pro-calc-row { display: flex; gap: 20px; margin-bottom: 25px; flex-wrap: wrap; }
.pro-calc-group { flex: 1; min-width: 250px; display: flex; flex-direction: column; }
.pro-calc-full { width: 100%; flex: 0 0 100%; margin-bottom: 25px; }

/* --- Pola wejściowe i listy rozwijane --- */
.pro-calc-input,
select.pro-calc-input { 
    width: 100%;
    height: 60px !important; /* Wymuszenie równej wysokości wszędzie */
    padding: 0 20px; 
    border: none; 
    border-radius: 50px; 
    font-size: 1.1rem; 
    background: #ffffff; 
    color: #000000 !important; 
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
    box-sizing: border-box;
    cursor: pointer;
    -webkit-appearance: none; 
}

/* Strzałka dla list rozwijanych */
select.pro-calc-input {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 15px;
    padding-right: 45px;
}

select.pro-calc-input option {
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* ==========================================================================
   SUWAKI I WARTOSCI (LEWE POLE)
   ========================================================================== */

.pro-calc-slider-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #ffffff;
    border-radius: 50px;
    padding: 0 20px;
    box-sizing: border-box;
    height: 60px !important; /* SZTYWNA WYSOKOŚĆ !IMPORTANT */
    width: 100%;
}

/* --- WIZUALNE WYRÓŻNIENIE POLA DO WPISYWANIA --- */
.pro-calc-slider-wrapper input[type="number"].pro-calc-input {
    flex: 0 0 75px; /* Minimalnie szersze, żeby zmieścić 3 cyfry */
    text-align: center;
    padding: 8px 5px;
    margin: 0;
    border-radius: 8px; /* Wyraźny kształt pola tekstowego */
    background: #f5f5f5 !important; /* Delikatnie szare tło odcinające się od białego suwaka */
    border: 1px solid #dcdcdc !important; /* Widoczna ramka */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.06) !important; /* Efekt "wciśnięcia" (głębia) */
    height: 44px !important; /* Mniejsze niż cały biały wrapper (60px) */
    font-weight: 600;
    transition: all 0.3s ease;
}

/* Efekt aktywnego wpisywania (Focus) */
.pro-calc-slider-wrapper input[type="number"].pro-calc-input:focus {
    background: #ffffff !important;
    border-color: #d6ff00 !important; /* Neonowy akcent */
    box-shadow: 0 0 0 2px rgba(214, 255, 0, 0.4) !important; /* Neonowa poświata */
    outline: none;
}

/* Ukrycie systemowych strzałek (góra/dół) dla czystego wyglądu */
.pro-calc-slider-wrapper input[type="number"].pro-calc-input::-webkit-inner-spin-button,
.pro-calc-slider-wrapper input[type="number"].pro-calc-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.pro-calc-slider-wrapper input[type="number"].pro-calc-input {
    -moz-appearance: textfield; /* Firefox */
}

input[type=range].pro-calc-range {
    flex: 1;
    -webkit-appearance: none;
    background: transparent;
    margin: 0 15px 0 0;
}
input[type=range].pro-calc-range:focus { outline: none; }

/* WebKit (Chrome, Safari, Edge) */
input[type=range].pro-calc-range::-webkit-slider-runnable-track {
    width: 100%; height: 6px; cursor: pointer;
    background: #dddddd; border-radius: 3px;
}
input[type=range].pro-calc-range::-webkit-slider-thumb {
    height: 22px; width: 22px; border-radius: 50%;
    background: #d6ff00; 
    cursor: pointer;
    -webkit-appearance: none; margin-top: -8px; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Firefox */
input[type=range].pro-calc-range::-moz-range-track {
    width: 100%; height: 6px; cursor: pointer;
    background: #dddddd; border-radius: 3px;
}
input[type=range].pro-calc-range::-moz-range-thumb {
    height: 22px; width: 22px; border-radius: 50%;
    background: #d6ff00; cursor: pointer; border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* ==========================================================================
   PRZEŁĄCZNIK PŁCI (PRAWE POLE) - WZMOCNIONE WYRÓWNANIE
   ========================================================================== */

.gender-toggle {
    display: flex !important; /* Wymuś flexbox */
    background-color: #e0e0e0;
    border-radius: 50px;
    overflow: hidden;
    width: 100%;
    height: 60px !important; /* IDEALNIE TA SAMA WYSOKOŚĆ CO SUWAK !IMPORTANT */
    align-items: stretch !important;
}

.gender-toggle input[type="radio"] {
    display: none !important;
    opacity: 0 !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
}

/* Zabijanie stylów motywu */
.gender-toggle label::before,
.gender-toggle label::after {
    display: none !important;
    content: none !important;
    background: transparent !important;
    border: none !important;
}

.gender-toggle label {
    flex: 1 !important;
    display: flex !important; /* Wymuś flexbox dla centrowania wewnątrz */
    align-items: center !important; /* Środkowanie w pionie */
    justify-content: center !important; /* Środkowanie w poziomie - FIX NA LEWOO */
    font-weight: bold;
    color: #000000;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    
    /* Agresywne override'y dla motywu */
    margin: 0 !important;
    padding: 0 10px !important; /* Padding poziomy */
    line-height: 1 !important; 
    border: none !important;
    height: 100% !important;
    text-align: center !important; /* Dodatkowe wyśrodkowanie tekstu */
}

.gender-toggle input:checked#gender-male + label,
.gender-toggle input:checked#gender-female + label {
    background-color: #d6ff00 !important; 
    color: #000000 !important;
}

/* ==========================================================================
   PRZYCISK GŁÓWNY I WYNIKI
   ========================================================================== */

.pro-calc-btn-wrapper { margin-top: 30px; text-align: center; }
.pro-calc-btn {
    padding: 18px 50px;
    background: transparent; 
    color: #d6ff00; 
    border: 3px solid #d6ff00; 
    border-radius: 50px;
    font-size: 1.3rem; font-weight: bold; cursor: pointer;
    transition: background 0.3s, color 0.3s;
}
.pro-calc-btn:hover { background: #d6ff00; color: #000000; }

.pro-calc-results { margin-top: 40px; animation: fadeIn 0.5s ease-in; display: none; }
.pro-calc-summary { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 30px; }

.pro-calc-box { 
    flex: 1; min-width: 200px; 
    background: #222222; 
    padding: 25px; border-radius: 12px; text-align: center; border: 1px solid #333333;
}
.pro-calc-box-main { background: #d6ff00; border-color: #d6ff00; }
.pro-calc-box-main h4 { color: #000000 !important; } /* Wymuszony całkowicie czarny nagłówek */
.pro-calc-box-main .pro-calc-number { color: #000000 !important; }

.pro-calc-number { 
    font-size: 2.2rem; 
    font-weight: bold; 
    color: inherit; 
    margin: 10px 0;
}

.pro-calc-box h4 { margin: 0; font-size: 1rem; color: #aaaaaa; text-transform: uppercase; font-weight: 600; }
.pro-calc-box small { display:block; color:rgba(0,0,0,0.6); font-size:12px; margin-top: 5px; }

.pro-calc-macros { display:flex; gap:15px; flex-wrap:wrap; margin-top: 20px; }
.pro-calc-macro {
    flex:1; padding:20px; text-align:center;
    border-radius: 10px; 
}
.pro-calc-macro strong { display:block; font-size:12px; text-transform:uppercase; margin-bottom: 5px; opacity: 0.8; }
.pro-calc-macro span { font-size:1.6rem; font-weight:bold; }

.pro-calc-protein { background: #e53935; color: #ffffff; } 
.pro-calc-fat { background: #fb8c00; color: #ffffff; } 
.pro-calc-carbs { background: #43a047; color: #ffffff; } 

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }