/*
 * ============================================================
 *  Kalkulator Zużycia Fug VivaSil — Arkusz stylów
 *  Plugin:  kalkulator-fug
 *  Wersja:  2.1.0
 *  Autor:   Robert Karbownik
 *  Opis:    Kalkulator fug do płyt tarasowych, podjazdów
 *           i ścieżek. Obsługuje produkty VivaSil:
 *           Gres 2.0 oraz DuoProCeram 4.0.
 *  Użycie:  [kalkulator_fug] w edytorze WordPress
 * ============================================================
 *
 *  SPIS TREŚCI
 *  ──────────────────────────────────────────────────────────
 *  1.  Zmienne CSS (Custom Properties)
 *  2.  Reset i kontener (.kf-wrap)
 *  3.  Nagłówek (.kf-head)
 *  4.  Treść / ciało (.kf-body)
 *  5.  Etykiety sekcji (.kf-sec)
 *  6.  Przyciski wyboru — chipy (.kf-chips, .chip)
 *  7.  Siatka pól (.kf-grid, .kf-field)
 *  8.  Stałe opakowanie 20 kg (.kf-bag-fixed)
 *  9.  Przycisk „Oblicz" (.kf-btn)
 *  10. Linia podziału (.kf-div)
 *  11. Wyniki obliczeń (.kf-results, .metric)
 *  12. Tabela referencyjna (.kf-ref-table)
 *  13. Stopka z autorem (.kf-footer)
 *  14. Responsywność (@media)
 * ============================================================
 */


/* ============================================================
 * 1. ZMIENNE CSS
 *    Edytuj tę sekcję, aby zmienić wygląd całej wtyczki.
 * ============================================================ */

.kf-wrap {
    /* Kolor główny (nagłówek, przyciski, akcenty) */
    --kf-color-primary:      #307AA0;

    /* Odcienie pochodne od koloru głównego */
    --kf-color-primary-dark: #1a5272;
    --kf-color-primary-bg:   #ddeef7;   /* tło chipów ON, opakowania */
    --kf-color-result-bg:    #edf6fb;   /* tło sekcji wyników */

    /* Obramowania */
    --kf-border-color:       #c8dde9;
    --kf-border-inner:       #cce0ec;
    --kf-border-result:      #bcd9e9;
    --kf-border-table:       #e8f4fa;
    --kf-border-divider:     #daeaf3;

    /* Tła */
    --kf-bg-wrap:            #ffffff;
    --kf-bg-field:           #f4fafd;
    --kf-bg-footer:          #f4fafd;
    --kf-bg-table-head:      #ddeef7;

    /* Typografia */
    --kf-font:               'DM Sans', system-ui, -apple-system, sans-serif;
    --kf-text-primary:       #1a3040;
    --kf-text-secondary:     #5a7e96;
    --kf-text-muted:         #7a9fb5;
    --kf-text-faint:         #94b5c6;

    /* Cień zewnętrzny */
    --kf-shadow:             0 6px 40px rgba(48, 122, 160, 0.10);

    /* Zaokrąglenia */
    --kf-radius-wrap:        16px;
    --kf-radius-chip:        50px;
    --kf-radius-field:       8px;
    --kf-radius-btn:         9px;
    --kf-radius-result:      12px;
    --kf-radius-icon:        10px;

    /* Przejścia */
    --kf-transition:         0.14s ease;
}


/* ============================================================
 * 2. RESET I KONTENER GŁÓWNY
 * ============================================================ */

.kf-wrap *,
.kf-wrap *::before,
.kf-wrap *::after {
    box-sizing: border-box;
    margin:     0;
    padding:    0;
}

.kf-wrap {
    font-family: var(--kf-font);
    max-width:   800px;
    margin:      2rem auto;
    background:  var(--kf-bg-wrap);
    border:      1px solid var(--kf-border-color);
    border-radius: var(--kf-radius-wrap);
    overflow:    hidden;
    box-shadow:  var(--kf-shadow);
    color:       var(--kf-text-primary);
}


/* ============================================================
 * 3. NAGŁÓWEK
 * ============================================================ */

.kf-head {
    background:  var(--kf-color-primary);
    color:       #ffffff;
    padding:     1.5rem 2rem;
    display:     flex;
    align-items: center;
    gap:         1rem;
}

.kf-head-icon {
    width:            48px;
    height:           48px;
    border-radius:    var(--kf-radius-icon);
    background:       rgba(255, 255, 255, 0.18);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    flex-shrink:      0;
}

.kf-head h2 {
    font-size:   1.15rem;
    font-weight: 700;
    line-height: 1.3;
    color:       #ffffff;
}

.kf-head p {
    font-size:   0.79rem;
    opacity:     0.82;
    margin-top:  0.2rem;
    color:       #ffffff;
}


/* ============================================================
 * 4. CIAŁO KALKULATORA
 * ============================================================ */

.kf-body {
    padding: 1.75rem 2rem;
    display: grid;
    gap:     1.4rem;
}


/* ============================================================
 * 5. ETYKIETY SEKCJI
 * ============================================================ */

.kf-sec {
    font-size:      0.66rem;
    font-weight:    700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color:          var(--kf-text-muted);
    margin-bottom:  0.55rem;
}


/* ============================================================
 * 6. CHIPY — PRZYCISKI WYBORU
 *    Używane do wyboru produktu i szerokości spoiny.
 * ============================================================ */

.kf-chips {
    display:   flex;
    flex-wrap: wrap;
    gap:       0.5rem;
}

.chip {
    padding:       0.44rem 1.1rem;
    border:        1.5px solid var(--kf-border-inner);
    border-radius: var(--kf-radius-chip);
    font-size:     0.87rem;
    font-weight:   500;
    color:         var(--kf-text-secondary);
    background:    var(--kf-bg-field);
    cursor:        pointer;
    transition:    border-color var(--kf-transition),
                   color        var(--kf-transition),
                   background   var(--kf-transition);
    user-select:   none;
    line-height:   1.4;
}

.chip:hover {
    border-color: var(--kf-color-primary);
    color:        var(--kf-color-primary);
}

/* Stan aktywny — wybrany chip */
.chip.on {
    border-color: var(--kf-color-primary);
    background:   var(--kf-color-primary-bg);
    color:        var(--kf-color-primary);
    font-weight:  700;
}


/* ============================================================
 * 7. SIATKA PÓL WEJŚCIOWYCH
 * ============================================================ */

.kf-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   0.9rem;
}

.kf-field label {
    display:       block;
    font-size:     0.78rem;
    font-weight:   600;
    color:         var(--kf-text-secondary);
    margin-bottom: 0.3rem;
}

.kf-field input[type="number"] {
    width:         100%;
    padding:       0.52rem 0.8rem;
    border:        1.5px solid var(--kf-border-inner);
    border-radius: var(--kf-radius-field);
    font-size:     0.93rem;
    font-family:   var(--kf-font);
    color:         var(--kf-text-primary);
    background:    var(--kf-bg-field);
    transition:    border-color var(--kf-transition),
                   background   var(--kf-transition);
    appearance:    textfield;
    -moz-appearance: textfield;
}

.kf-field input[type="number"]::-webkit-outer-spin-button,
.kf-field input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.kf-field input[type="number"]:focus {
    outline:      none;
    border-color: var(--kf-color-primary);
    background:   #ffffff;
}

/* Podpis jednostki pod polem */
.kf-field .unit {
    font-size:  0.72rem;
    color:      var(--kf-text-faint);
    margin-top: 0.22rem;
}


/* ============================================================
 * 8. STAŁE OPAKOWANIE 20 KG
 *    Wyświetlane jako zablokowane pole — bez możliwości edycji.
 * ============================================================ */

.kf-bag-fixed {
    width:         100%;
    padding:       0.52rem 0.8rem;
    border:        1.5px solid var(--kf-color-primary);
    border-radius: var(--kf-radius-field);
    font-size:     0.93rem;
    font-weight:   700;
    font-family:   var(--kf-font);
    color:         var(--kf-color-primary);
    background:    var(--kf-color-primary-bg);
    cursor:        default;
    user-select:   none;
    display:       flex;
    align-items:   center;
    gap:           0.4rem;
}

.kf-bag-fixed svg {
    flex-shrink: 0;
    opacity:     0.70;
}


/* ============================================================
 * 9. PRZYCISK „OBLICZ ZUŻYCIE"
 * ============================================================ */

.kf-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             0.5rem;
    padding:         0.75rem;
    width:           100%;
    background:      var(--kf-color-primary);
    color:           #ffffff;
    border:          none;
    border-radius:   var(--kf-radius-btn);
    font-size:       0.95rem;
    font-family:     var(--kf-font);
    font-weight:     700;
    letter-spacing:  0.01em;
    cursor:          pointer;
    transition:      opacity   var(--kf-transition),
                     transform var(--kf-transition);
}

.kf-btn:hover  { opacity: 0.87; }
.kf-btn:active { transform: scale(0.98); }
.kf-btn:focus-visible {
    outline:        2px solid var(--kf-color-primary);
    outline-offset: 3px;
}


/* ============================================================
 * 10. LINIA PODZIAŁU
 * ============================================================ */

.kf-div {
    border:     none;
    border-top: 1px solid var(--kf-border-divider);
    margin:     0;
}


/* ============================================================
 * 11. SEKCJA WYNIKÓW
 * ============================================================ */

.kf-results {
    background:            var(--kf-color-result-bg);
    border:                1px solid var(--kf-border-result);
    border-radius:         var(--kf-radius-result);
    padding:               1.3rem;
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   0.75rem;
}

/* Pojedyncza metryka wynikowa */
.metric {
    text-align: center;
}

.metric-val {
    font-size:   2.1rem;
    font-weight: 800;
    color:       var(--kf-color-primary);
    line-height: 1;
}

.metric-lbl {
    font-size:  0.72rem;
    color:      var(--kf-text-muted);
    margin-top: 0.3rem;
}

.metric-sub {
    font-size:   0.82rem;
    font-weight: 600;
    color:       var(--kf-text-primary);
    margin-top:  0.15rem;
}


/* ============================================================
 * 12. TABELA REFERENCYJNA
 *     Pokazuje zużycie kg/m² dla wszystkich kombinacji
 *     produktów i szerokości spoin. Aktywna komórka
 *     jest podświetlana klasą .kf-hl.
 * ============================================================ */

.kf-table-wrap {
    overflow-x: auto;
}

.kf-ref-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       0.82rem;
}

.kf-ref-table th {
    background:    var(--kf-bg-table-head);
    padding:       0.5rem 0.75rem;
    text-align:    left;
    font-weight:   700;
    color:         var(--kf-color-primary);
    border-bottom: 2px solid var(--kf-border-result);
}

.kf-ref-table td {
    padding:       0.5rem 0.75rem;
    border-bottom: 1px solid var(--kf-border-table);
    color:         var(--kf-text-primary);
    transition:    background var(--kf-transition);
}

.kf-ref-table tr:last-child td {
    border-bottom: none;
}

/* Aktywna komórka — zaznaczona na podstawie wyboru użytkownika */
.kf-ref-table .kf-hl {
    color:       var(--kf-color-primary-dark);
    font-weight: 700;
    background:  var(--kf-border-result);
}


/* ============================================================
 * 13. STOPKA Z AUTOREM
 * ============================================================ */

.kf-footer {
    padding:         0.9rem 2rem;
    background:      var(--kf-bg-footer);
    border-top:      1px solid var(--kf-border-divider);
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             0.5rem;
}

.kf-footer-note {
    font-size: 0.74rem;
    color:     var(--kf-text-faint);
}

.kf-footer-author {
    font-size:   0.72rem;
    font-weight: 600;
    color:       var(--kf-color-primary);
    opacity:     0.80;
}


/* ============================================================
 * 14. RESPONSYWNOŚĆ
 * ============================================================ */

/* Tablet — 2 kolumny w siatce pól */
@media (max-width: 600px) {
    .kf-head {
        padding: 1.2rem 1.25rem;
    }

    .kf-body {
        padding: 1.25rem;
        gap:     1.1rem;
    }

    .kf-grid {
        grid-template-columns: 1fr 1fr;
    }

    .kf-footer {
        padding:         0.75rem 1.25rem;
        flex-direction:  column;
        align-items:     flex-start;
    }
}

/* Telefon — 1 kolumna wszędzie */
@media (max-width: 400px) {
    .kf-head {
        flex-direction: column;
        align-items:    flex-start;
        padding:        1rem;
    }

    .kf-body {
        padding: 1rem;
    }

    .kf-grid {
        grid-template-columns: 1fr;
    }

    .kf-results {
        grid-template-columns: 1fr;
    }

    .metric-val {
        font-size: 1.75rem;
    }
}