:root{
       --bg: #fbfdff;
    --text: #1e2933;
    --muted: #6b7b88;
    /* palette tuned to match .Drugi (ogien, woda, powietrze, ziemia) */
    --accent: #6EC6FF;
    /* woda (primary accent) */
    --accenter: #31a5f3;
    --accent-dark: #165fb8;
    /* darker water for hover / emphasis */
    --warm: #FF7F50;
    /* ogien (warm accent) */
    --warmer: #fd6e3a;
    --evenwarmer: #ff591c;
    --earth: #C49A6C;
    /* ziemia */
    --earther: #8a6238;
    --evenearther: #4b3620;
    --air: #B0E0FF;
    /* powietrze */
    --airer: #86ccfb;
    --evenairer: #70c4fc;
    --card-bg: #ffffff;
    --border: #e6eef6;
    --shadow-color: rgba(30, 41, 51, 0.06);
    --accent-contrast: #5FA8D3;
    --green: #33ba35;
    --greener: rgb(34, 232, 37);
    --lightgreen: #6cce6e;
    --lightred: #f28b8b;
      --radius: 14px;
      font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    }
    *{box-sizing:border-box}
    body{margin:0;background:linear-gradient(180deg,var(--bg),#f2f6f0);color:#111;}
    header{backdrop-filter: blur(6px);position:sticky;top:0;z-index:60}

    .container{max-width:1100px;margin:32px auto;padding:0 16px}

 .grid{display:grid;grid-template-columns:1fr 420px;gap:20px;align-items:start}
    @media (max-width:980px){.grid{grid-template-columns:1fr;}
        .kontakt_flex{
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            
        }
    }
    .kontakt_flex p, .kontakt_flex a, .kontakt_flex strong{
        font-size: 1.17em !important;
        color: var(--text);
    }
    .kontakt_flex_outter{
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        flex-direction: column !important;
    }
    @media (max-width: 1050px) {
    form {
        width: 100% !important;
        max-width: 90vw !important;
        box-sizing: border-box !important;
        margin: 0 auto !important;
        overflow-x: hidden !important;
    }

    form input[type="text"],
    form input[type="email"],
    form input[type="tel"],
    form textarea {
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 16px !important; 
    }

    form label:has(input[type="checkbox"]) {
        display: block !important;
        position: relative !important;
        padding-left: 35px !important; 
        width: 100% !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        line-height: 1.5 !important;
        margin-bottom: 20px !important;
    }

    form label:has(input[type="radio"]) {
        display: inline-block !important;
        position: relative !important;
        padding-left: 32px !important;
        margin-right: 15px !important;
        margin-bottom: 10px !important;
        line-height: 1.5 !important;
    }

    form input[type="checkbox"],
    form input[type="radio"] {
        left: 0 !important;
        top: 2px !important; 
        width: 22px !important;
        height: 22px !important;
        --webkit-appearance: auto !important; 
    }
    
    form label:not(:has(input[type="checkbox"])):not(:has(input[type="radio"])) {
        display: block !important;
        padding-left: 0 !important;
        margin-bottom: 5px !important;
    }
}
form input[type="checkbox"] {
    margin: 10px !important;

}

    /* Kalendarz / lista terminów */
    .dostepnosc{
        width: 18px;
        height: 18px;
        border-radius: 40px;
        transform: translate(0) !important;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .info{
        opacity: 0;
        visibility: hidden;
        width: 250px;
        height: fit-content;
        transform: translateY(50%);
        transition: 0.2s;
        bottom: 5px;
        right: 5px;
        position: absolute;
        font-size: 16px;
        border: solid 5px;
        padding: 8px;
        border-radius: 25px 25px 5px 25px;
        text-align: start;
        color: white;
    }
    .info.duzo{
        background-color: var(--lightgreen) !important;
        border-color: var(--lightgreen);
    }
    .info.malo{
        background-color: var(--lightred) !important;
        border-color: var(--lightred);
    }
    .info.nic{
        background-color: var(--text) !important;
        border-color: var(--text);
    }
    .dostepnosc:hover + .info{
        opacity: 1;
        visibility: visible;
        transform: translate(0);
        z-index: 10000;
    }  
    /* Kalendarz / lista terminów */
.dostepnosc {
    width: 18px;
    height: 18px;
    border-radius: 40px;
    transform: translate(0) !important;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.info {
    opacity: 0;
    visibility: hidden;
    width: 250px;
    height: fit-content;
    transform: translateY(50%);
    transition: 0.2s;
    bottom: 5px;
    right: 5px;
    position: absolute;
    font-size: 16px;
    border: solid 5px;
    padding: 8px;
    border-radius: 25px 25px 5px 25px;
    text-align: start;
    color: white;
}

/* Style dla Info Boxów */
.info.duzo { background-color: var(--lightgreen) !important; border-color: var(--lightgreen); }
.info.malo { 
    background-color: var(--lightred) !important; 
    border-color: var(--lightred); 
}
.info.nic { background-color: #333 !important; border-color: #333; } /* Ciemny szary/czarny */

.availability:hover .info,
.dostepnosc:hover + .info,
.info:hover {
    opacity: 1;
    visibility: visible;
    transform: translate(0);
    z-index: 10000;
    justify-content: end;
}

.info {
    margin-bottom: 10px; /* Odsuwa wizualnie, ale zachowuje strefę najechania */
}

.dostepnosc.duzo { background-color: var(--lightgreen) !important; }
.dostepnosc.malo {
    background-color: var(--lightred) !important;
    animation: pulse 1s infinite ease-in-out;
}
@keyframes pulse {
    0% { scale: 0.9; }
    50% { scale: 1.1; }
    100% { scale: 0.9; }
}

.dostepnosc.nic { background-color: #333 !important;}
    .card{background:var(--card);border-radius:var(--radius);padding:18px;box-shadow:0 8px 24px rgba(20,30,20,0.06)}
    .term-list{display:grid;gap:12px}
    .term{display:flex;align-items:center;justify-content:space-between;padding:12px;border-radius:10px;border:2px solid #edf7ed}
    
    .term .left{display:flex;gap:12px;align-items:center;width: 70%;justify-content:space-between}
    .badge{background:var(--accent-2);padding:8px 12px;border-radius:10px;font-weight:600;
        color: var(--bg);
    }
    .badge.ogien{
        background: var(--warm);
    }
    .badge.woda{
        background: var(--accent);
    }
    .badge.powietrze{
        background: var(--evenairer);
    }
    .badge.ziemia{
        background: var(--earther);
    }
    .meta{font-size:0.9rem;color:var(--muted)}
    .availability{
        font-weight:700;
        display: flex;
        flex-direction: row;
        gap: 5px;
        position: relative;
            justify-content: end;
    }
    .btn{
        background:var(--accent);
        color:white;
        padding:10px 14px;
        border-radius:10px;
        border:3px solid var(--accent);
        cursor:pointer;
        transition: 0.2s ease-in-out;
        font-weight: 600;
    }
    .btn:hover{
        background: var(--bg) !important;
        scale: 1.1;
        color: var(--accent);
        transition: 0.1s;
    }
    .btn.Ogien{
        background: var(--warm);
        border: 2px solid  var(--warm);
    }
    .btn.Ogien:hover{
        color: var(--warm);
    }
    .btn.Woda{
        background: var(--accent);
        border: 2px solid  var(--accent);
    }
    .btn.Woda:hover{
        color: var(--accent);
    }
    .btn.Powietrze{
        background: var(--evenairer);
        border: 2px solid  var(--evenairer);
    }
    .btn.Powietrze:hover{
        color: var(--evenairer);
    }
    .btn.Ziemia{
        background: var(--earther);
        border: 2px solid  var(--earther);
    }
    .btn.Ziemia:hover{
        color: var(--earther);
    }
    .btn:disabled{opacity:0.5;cursor:not-allowed}

    /* Formularz */
    form label{display:block;margin-top:12px;font-size:0.9rem}
    .form-row{display:flex;gap:8px}
    .form-row .book_input{flex:1}
    input.book_input{width:100%;padding:10px;border-radius:8px;border:1px solid #e5e7eb}

    /* FAQ */
    .faq .q{font-weight:600;}
    .faq .a{margin:8px 0;color:var(--muted);}

    /* Animations */
    .fade-in{animation:fadeIn .5s ease both}
    @keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}


    /* success / error */
    .notice{padding:12px;border-radius:8px;margin-bottom:12px}
    .ok{background:#e6f6ea;border:1px solid var(--accent-2);color:#0b5a2b}
    .err{background:#fff0f0;border:1px solid #f3b0b0;color:#8b1d1d}