body.elementor-page-2447:not(.elementor-motion-effects-element-type-background), body.elementor-page-2447 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-bb55ad5 */.perso-viz-col .elementor-widget-html,
.perso-viz-col .elementor-widget-container { height: 100% !important; display: flex; flex-grow: 1; }

#perso-simulator { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; position: relative; font-family: Inter, sans-serif; }
#perso-simulator > input { display: none; }

/* ===================================================
   1. PRZEŁĄCZNIK (Wzór z Twoich zrzutów ekranu)
=================================================== */
.vanberg-toggle-wrapper {
    position: absolute; top: 20px; 
    display: grid !important; grid-template-columns: 1fr 1fr !important; min-width: 320px; 
    background-color: rgba(20, 25, 35, 0.4); 
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    border-radius: 50px; padding: 5px; z-index: 300; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.vanberg-toggle-wrapper label {
    padding: 10px 15px; cursor: pointer; font-size: 12px; font-weight: 600; text-transform: none; 
    color: rgba(255, 255, 255, 0.85); transition: color 0.3s ease; z-index: 2; position: relative; 
    display: flex; align-items: center; justify-content: center; text-align: center;
}

.vanberg-toggle-slider {
    position: absolute; top: 5px; left: 5px; width: calc(50% - 5px); height: calc(100% - 10px);
    background-color: #ffffff; border-radius: 50px;
    transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28), background-color 0.3s ease; 
    z-index: 1; box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Kolory aktywne przełącznika */
#view-standard:checked ~ .vanberg-toggle-wrapper .v-label-standard { color: #1e293b; }
#view-standard:checked ~ .vanberg-toggle-wrapper .vanberg-toggle-slider { background-color: #ffffff; transform: translateX(0); }
#view-perso:checked ~ .vanberg-toggle-wrapper .v-label-perso { color: #ffffff; }
#view-perso:checked ~ .vanberg-toggle-wrapper .vanberg-toggle-slider { background-color: #B61A13; transform: translateX(100%); }

/* ===================================================
   2. WIZUALIZACJA I GŁÓWNE ZDJĘCIE
=================================================== */
.v-viz-viewport {
    width: 100%; height: 100%; position: relative; overflow: hidden; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.02);
}
.img-base { display: block; width: 100%; height: 100%; object-fit: cover; z-index: 1; }

/* ===================================================
   3. STREFA BLIŻY - BLUR I LINIA W JEDNYM ELEMENCIE!
=================================================== */
.v-near-zone {
    position: absolute;
    top: 65%; /* Tutaj znajduje się szczyt łuku */
    left: -50%; /* Wyjeżdżamy poza ekran, żeby spłaszczyć łuk */
    width: 200%; /* Ogromna szerokość dla gładkiego łuku */
    height: 150%; 
    border-radius: 50%; /* Zmienia div w idealny owal */
    
    /* LINIA PRZERYWANA - rysowana tylko na górnej krawędzi owalu */
    border-top: 2px dashed rgba(255, 255, 255, 0.7);
    
    /* BLUR I TŁO - wypełniają tylko środek owalu */
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background-color: rgba(0, 0, 0, 0.15); /* Ściemnienie zmęczenia */
    
    transition: backdrop-filter 0.5s ease, background-color 0.5s ease, border-color 0.5s ease;
    z-index: 10;
}

/* STAN PERSO: Usuwamy blur, zmieniamy kolor tła i linii */
#view-perso:checked ~ .v-viz-viewport .v-near-zone {
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
    background-color: rgba(226, 106, 32, 0.12); /* Lekka pomarańczowa nakładka */
    border-top-color: rgba(226, 106, 32, 0.8); /* Pomarańczowa przerywana krawędź */
}

/* ===================================================
   4. ETYKIETY (DAL / BLIŻ) - W JEDNEJ LINII PIONOWEJ
=================================================== */
.v-zone-labels-layer { 
    position: absolute; 
    top: 0; left: 0; width: 100%; height: 100%; 
    z-index: 15; pointer-events: none; 
}

/* Wygląd Pigułki (Glassmorphism) i wspólna oś pionowa */
.v-zone-badge {
    position: absolute;
    
    /* KLUCZOWE: Obie pigułki wyrównane do prawej krawędzi (jedna linia w pionie) */
    right: 5%; 
    
    background-color: rgba(20, 25, 35, 0.6); 
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    
    padding: 6px 14px;
    border-radius: 30px;
    
    display: flex;
    align-items: center;
    gap: 8px; 
    
    font-size: 11px; 
    font-weight: 800; 
    text-transform: uppercase; 
    letter-spacing: 1.5px; 
    color: #ffffff; 
    
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Ozdobne, świecące kropki */
.v-badge-dot {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.v-badge-dal .v-badge-dot { 
    background-color: #3b82f6; 
    box-shadow: 0 0 6px #3b82f6;
}
.v-badge-bliz .v-badge-dot { 
    background-color: #E26A20; 
    box-shadow: 0 0 6px #E26A20;
}

/* ===================================================
   POZYCJONOWANIE NA WYSOKOŚCI (GÓRA / DÓŁ)
=================================================== */
.v-badge-dal {
    top: 18%; /* Daleko u góry, w ostrej strefie */
}

.v-badge-bliz {
    top: 65%; /* Głęboko na dole, bezpiecznie w strefie bluru/wsparcia */
}

/* ===================================================
   5. ODZNAKI (BADGES)
=================================================== */
.v-badge-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 200 !important; pointer-events: none; }
.v-badge {
    position: absolute; left: 50%; transform: translateX(-50%); padding: 12px 26px; border-radius: 50px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08); width: auto; white-space: nowrap; display: flex; flex-direction: column; align-items: center; justify-content: center;
    transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1), transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.v-badge-title { font-size: 12px; font-weight: 800; color: #ffffff; text-transform: uppercase; letter-spacing: 1.2px; line-height: 1.2; }
.v-badge-sub { font-size: 10px; font-weight: 500; color: rgba(255, 255, 255, 0.85); margin-top: 3px; line-height: 1; }
.v-badge-top { top: 25%; }
.v-badge-bottom { bottom: 14%; }
.v-badge-standard-top, .v-badge-perso-top { background-color: rgba(30, 41, 59, 0.85); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.v-badge-standard-bottom { background-color: rgba(163, 60, 50, 0.95); }
.v-badge-perso-bottom { background-color: rgba(226, 106, 32, 0.95); }

/* Animacje odznak */
#view-standard:checked ~ .v-viz-viewport .v-badge-standard-top { opacity: 1; transform: translate(-50%, 0); }
#view-standard:checked ~ .v-viz-viewport .v-badge-perso-top { opacity: 0; transform: translate(-50%, -10px); }
#view-standard:checked ~ .v-viz-viewport .v-badge-standard-bottom { opacity: 1; transform: translate(-50%, 0); }
#view-standard:checked ~ .v-viz-viewport .v-badge-perso-bottom { opacity: 0; transform: translate(-50%, 10px); }
#view-perso:checked ~ .v-viz-viewport .v-badge-standard-top { opacity: 0; transform: translate(-50%, -10px); }
#view-perso:checked ~ .v-viz-viewport .v-badge-perso-top { opacity: 1; transform: translate(-50%, 0); }
#view-perso:checked ~ .v-viz-viewport .v-badge-standard-bottom { opacity: 0; transform: translate(-50%, 10px); }
#view-perso:checked ~ .v-viz-viewport .v-badge-perso-bottom { opacity: 1; transform: translate(-50%, 0); }/* End custom CSS */