:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-b525be7 *//* =========================================
   LINK "DOWIEDZ SIĘ WIĘCEJ" (FILTR NIEBIESKI)
   ========================================= */

/* 1. Domyślnie ukrywamy cały widżet z linkiem */
.v-learn-more-link {
    display: none !important;
    margin-top: 4px !important;
}

/* 2. Pokazujemy go TYLKO, gdy rodzic (przycisk) ma klasę .active */
.v-coating-btn.active .v-learn-more-link {
    display: block !important;
}

/* 3. Wygląd i odblokowanie kliknięcia dla samego linku <a> */
.v-learn-more-link a {
    font-size: 8px !important;
    color: #60A5FA !important; /* Jasnoniebieski z Twojego projektu */
    text-decoration: none !important;
    font-weight: 600 !important;
    
    /* ODBLOKOWUJEMY MOŻLIWOŚĆ KLIKNIĘCIA W LINK! */
    pointer-events: auto !important; 
    position: relative !important;
    z-index: 10 !important;
    transition: color 0.3s ease !important;
}

/* 4. Delikatny efekt po najechaniu myszką (Hover) */
.v-learn-more-link a:hover {
    color: #93C5FD !important; /* Jaśniejszy niebieski */
    text-decoration: underline !important;
}/* End custom CSS */
/* Start custom CSS *//* --- 2. GŁÓWNY RDZEŃ KÓŁECZKA Z WYRÓWNANIEM (NAPRAWIONY ROZMIAR) --- */
.elementor .elite-tab-menu .v-tab-dot,
.elementor .elite-blue-tab-menu .v-tab-dot {
    position: absolute !important;
    top: 50% !important;
    right: 25px !important; /* Pozycja po prawej */
    
    /* Usunięto scale(), aby nieaktywne kółko było zawsze w pełnym rozmiarze */
    transform: translateY(-50%) !important; 
    
    /* ZWIĘKSZONY ROZMIAR */
    width: 16px !important; 
    height: 16px !important;
    border-radius: 50% !important;
    
    /* WYRAŹNY NIEAKTYWNY STAN (Puste kółko) */
    border: 2px solid #CBD5E1 !important; 
    background-color: transparent !important;
    
    /* Opacity 1, bo chcemy widzieć szarą obwódkę gdy jest nieaktywne */
    opacity: 1 !important; 
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    z-index: 15;
}

/* Budowa ptaszka (Checkmark) w czystym CSS - domyślnie ukryty */
.elementor .elite-tab-menu .v-tab-dot::after,
.elementor .elite-blue-tab-menu .v-tab-dot::after {
    content: '';
    position: absolute;
    
    /* Precyzyjne wyśrodkowanie ptaszka w kółku 22x22 */
    top: 1px;
    left: 4px;
    width: 4px;
    height: 8px;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    
    /* Schowany na starcie */
    transform: rotate(45deg) scale(0); 
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --- 3. USTAWIENIE TEKSTU NA IDEALNYM ŚRODKU --- */
.elementor .elite-tab-menu .e-n-tabs-heading-value,
.elementor .elite-blue-tab-menu .e-n-tabs-heading-value {
    /* Ustawiamy rodzica jako kontener dla pozycji absolutnej kropki */
    position: relative !important;
    width: 100%;
    height: 100%;
    
    /* Resetujemy stary flex, który wyśrodkowywał kropkę z tekstem */
    display: block !important;
    text-align: center !important; /* Centrowanie inline-block tekstów */
    padding: 0 10px !important; /* Oddech */
}

/* Właściwy tekst wyśrodkowany pionowo i poziomo */
.elementor .elite-tab-menu .e-n-tabs-heading-text,
.elementor .elite-blue-tab-menu .e-n-tabs-heading-text {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    width: 100% !important;
    left: 0 !important; /* Zabezpieczenie centrowania */
}
/* ==========================================
   4. STAN AKTYWNY (.e--selected) - Wjeżdża na front
========================================== */
.elementor .elite-tab-menu.e--selected,
.elementor .elite-blue-tab-menu.e--selected {
    background-color: #FFFFFF !important; 
    border-bottom: 1px solid transparent !important; 
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.03) !important; 
    z-index: 10;
}

/* Wyostrzenie tekstu w aktywnym tabie */
.elementor .elite-tab-menu.e--selected .e-n-tabs-heading-text,
.elementor .elite-blue-tab-menu.e--selected .e-n-tabs-heading-text {
    color: #1E293B !important; 
    font-weight: 800 !important;
}

/* Aktywacja Checkboxa (usunięcie szarej ramki) */
.elementor .elite-tab-menu.e--selected .v-tab-dot,
.elementor .elite-blue-tab-menu.e--selected .v-tab-dot {
    border-color: transparent !important;
}

/* Płynne pokazanie ptaszka (skalowanie w górę) */
.elementor .elite-tab-menu.e--selected .v-tab-dot::after,
.elementor .elite-blue-tab-menu.e--selected .v-tab-dot::after {
    opacity: 1;
    transform: rotate(45deg) scale(1);
}


/* --- 5. LOGIKA AKTYWACJI KROPKI (v-tab-dot) --- */
.elementor .elite-tab-menu.e--selected .v-tab-dot,
.elementor .elite-blue-tab-menu.e--selected .v-tab-dot {
    opacity: 1 !important;
    /* Płynne pokazanie ze skalowaniem, zachowując wyśrodkowanie w pionie */
    transform: translateY(-50%) scale(1) !important;
}

/* Kropka dla pierwszego taba (ELITE) - Pomarańczowa z Glow */
.elementor .elite-tab-menu.e--selected .v-tab-dot {
background-color: #B61A13 !important;
box-shadow: 0 0 8px rgba(182, 26, 19, 0.5) !important; /* Cień dopasowany do czerwieni */
    
}

/* Kropka dla drugiego taba (BLUE NEO) - Niebieska z Glow */
.elementor .elite-blue-tab-menu.e--selected .v-tab-dot {
    background-color: #3B82F6 !important;
   box-shadow: 0 0 8px rgba(59, 130, 246, 0.5) !important;
}



.view-workspace {
    /* Ustaw ciemny kolor jako "zapasowe" tło pod zdjęciem */
    background-color: #1B1E3A !important; 
    
    /* Dodaj przejście dla tła - to wygładzi milisekundowe przeskoki */
    transition: background-image 0.2s ease-in-out !important;
}

.view-workspace {
    background-color: #1B1E3A !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    
    /* Mówimy przeglądarce: "Będziemy tu często zmieniać tło, przygotuj się" */
    will-change: background-image; 
    transition: background-image 0.3s ease-in-out !important;
}


/* =========================================
   IPAD FIX: OPTYMALIZACJA DOTYKU W SAFARI
   ========================================= */

/* 1. Wyłączenie szarego mignięcia w Safari przy dotyku, które potrafi blokować repaint */
.v-coating-btn {
    -webkit-tap-highlight-color: transparent !important;
}

/* 2. ABSOLUTNA BLOKADA: Elementy wewnątrz przycisku nie mogą "kraść" dotyku! */
.v-coating-btn * {
    pointer-events: none !important;
}
/* =========================================
   SOCZEWKA I SUWAK (Środkowa kolumna)
   ========================================= */
.lens-container {
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1 !important;
    
    mask-image: url('https://viewv.dkonto.pl/wp-content/uploads/2026/07/maska-soczewka.svg');
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    -webkit-mask-image: url('https://viewv.dkonto.pl/wp-content/uploads/2026/07/maska-soczewka.svg');
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
}

.lens-drops {
    position: absolute !important;
    top: 0; left: 0; 
    width: 100% !important; 
    height: 100% !important;
    background-image: url('https://viewv.dkonto.pl/wp-content/uploads/2026/07/powloka-hydrofobowa.webp') !important;
    background-size: cover !important;
    background-position: center !important;
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%); 
    z-index: 2 !important;
}

.slider-line {
    position: absolute !important;
    top: 0; bottom: 0; 
    left: 50%; 
    width: 2px !important;
    background-color: #ffffff !important;
    transform: translateX(-50%) !important;
    z-index: 3 !important;
    border: none !important; 
}

.lens-border {
    position: relative !important;
    top: 0; left: 0; 
    width: 100% !important; 
    height: 100% !important;
    z-index: 5 !important;
    pointer-events: none !important;
}
.lens-border svg, .lens-border path {
    fill: none !important;
    background-color: transparent !important;
}

.slider-handle {
    position: absolute !important;
    top: 50% !important; 
    left: 50%; 
    transform: translate(-50%, -50%) !important;
    width: 40px !important; 
    height: 64px !important;
    background-color: #ffffff !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: grab !important;
    z-index: 10 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
    border: solid 1px rgba(226, 232, 240, 1) !important;
}
.slider-handle svg {
    width: 20px !important; 
    height: 20px !important; 
    fill: #1B1E3A !important;
    pointer-events: none !important;
}

/* =========================================
   ETYKIETY Z BOKU SOCZEWKI (Badges)
   ========================================= */
.lens-badge-left,
.lens-badge-right {
    position: absolute !important;
    top: 50% !important; 
    transform: translateY(-50%) !important;
    padding: 12px 24px !important;
    border-radius: 12px !important;
    z-index: 6 !important;
    white-space: nowrap !important;
    pointer-events: none !important; 
    box-shadow: 0px 20px 25px -5px rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: fit-content !important;
}

.lens-badge-left span,
.lens-badge-right span {
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    font-family: Inter !important;
}

.lens-badge-left {
    left: -48px !important; 
    background-color: rgba(15, 23, 42, 0.8) !important; 
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.lens-badge-right {
    right: -48px !important; 
    background-color: rgba(182, 26, 19, 0.8) !important; 
    border: 2px solid rgba(255, 255, 255, 0.1);
}



/* =========================================
   PRZYCISKI POWŁOK (Prawy panel)
   ========================================= */
.v-coating-btn {
    padding: 10px 10px !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    background: #ffffff !important;
    transition: all 0.3s ease !important;
    margin-bottom: 12px !important; 
}

/* Kółko checkboxa - domyślne */
.c-check {
    width: 6px !important;
    height: 16px !important;
    min-width: 16px !important;
    border: 2px solid #D1D5DB !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* --- STAN AKTYWNY POWŁOKI --- */
.v-coating-btn.active {
    background: #1B2135 !important; 
    border-color: #1B2135 !important;
}

.v-coating-btn.active .c-text,
.v-coating-btn.active .c-text * {
    color: #ffffff !important;
}

.v-coating-btn.active .c-icon {
    background-color: rgba(59, 130, 246, 0.1) !important;
}

.v-coating-btn.active .c-icon svg,
.v-coating-btn.active .c-icon path,
.v-coating-btn.active .c-icon i {
    fill: rgba(96, 165, 250, 1) !important;
    color: rgba(96, 165, 250, 1) !important;
}

.v-coating-btn.active .c-check {
    background-color: #10B981 !important; 
    border-color: #10B981 !important;
}

.v-coating-btn.active .c-check::after {
    content: '' !important;
    width: 4px !important;
    height: 10px !important;
    border: solid white !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) translateY(-1px) !important;
    display: block !important;
    margin-left: -1px !important;
}

/* =========================================
   REFLEKS RESZTKOWY (Pulsujące kropki)
   ========================================= */
@keyframes dotBreathe {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); }
    100% { opacity: 1; transform: scale(1); }
}

.v-reflex-dot {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    border-radius: 50% !important;
    animation: dotBreathe 2s ease-in-out infinite !important;
}

.tab-content-blue-neo .v-reflex-dot {
    background-color: #3B82F6 !important; 
    box-shadow: 0 0 6px rgba(59, 130, 246, 0.4) !important; 
}

.tab-content-elite .v-reflex-dot {
    background-color: #8B5CF6 !important; 
    box-shadow: 0 0 6px rgba(139, 92, 246, 0.4) !important; 
}/* End custom CSS */