.elementor-941 .elementor-element.elementor-element-39a46b8{margin:0rem 0rem calc(var(--kit-widget-spacing, 0px) + 0rem) 0rem;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-39a46b8 *//* --- KONTENER GŁÓWNY PRÓBNIKÓW --- */
.t-color-picker-wrapper {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-top: 15px;
}

/* --- POJEDYNCZY ELEMENT (Przycisk + Etykieta) --- */
.t-color-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* Tekst pod próbnikiem (Wymuszony font Inter) */
.t-color-label {
    font-family: 'Inter', sans-serif !important;
    font-size: 11px;
    font-weight: 700;
    color: #64748B;
    text-transform: uppercase;
    transition: color 0.3s ease;
    letter-spacing: 0.5px; /* Delikatne rozsunięcie liter dla czytelności */
}

/* --- PRZYCISK Z KOLOREM (Próbka) --- */
.t-color-swatch {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid transparent; 
    background: transparent !important; /* Wymuszenie braku tła z motywu */
    padding: 3px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Reset domyślnych stylów przeglądarki/Elementora (Usuwa czerwoną obwódkę) */
    outline: none !important;
    box-shadow: none !important;
}

/* Wewnętrzne wypełnienie (Gradient) */
.t-swatch-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: block;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.3); 
}

/* --- STAN HOVER (Najechanie myszką na nieaktywny element) --- */
.t-color-swatch:hover,
.t-color-swatch:focus {
    border-color: #E2E8F0 !important; /* Subtelna, jasnoszara obwódka zamiast czerwonej */
    background: transparent !important;
}

/* --- STAN AKTYWNY (Wybrany kolor) --- */
.t-color-swatch.active {
    border-color: #94A3B8 !important; /* Wyraźna szara obwódka wyboru */
    transform: scale(1.1); 
}

.t-color-swatch.active + .t-color-label {
    color: #1B1E3A; /* Wyostrzenie etykiety na granat */
}

/* --- PŁYNNOŚĆ SOCZEWKI --- */
.t-lens-tint {
    transition: background-color 0.4s ease !important;
}/* End custom CSS */
/* Start custom CSS *//* Zwijanie panelu "do zera", żeby Flexbox wyśrodkował soczewkę na całym ekranie */
.t-scene-wrapper.panel-is-closed .t-left-panel {
    flex: 0 0 0px !important; /* Odbiera całą przestrzeń w układzie Flexbox */
    width: 0 !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateX(-50px) !important; /* Lekki odjazd w lewo przy znikaniu */
}

/* =========================================
   SCROLLYTELLING: SCENA I PANORAMA
   ========================================= */
.t-scene-wrapper {
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    height: 100vh !important;
    display: flex !important;
    align-items: center !important;
}

.t-panorama-bg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: 100% !important;
    width: 300vw !important; 
    z-index: 0 !important;
    background-size: cover !important;
    background-position: left center !important;
    background-repeat: no-repeat !important;
    will-change: transform;
}

.t-lens-area {
    position: relative !important;
    z-index: 10 !important;
    flex-grow: 1 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 400px!important;
}

.t-lens-mask {
    position: relative !important;
   width: 600px !important;
    height: auto !important; /* Pozwalamy wysokości dopasować się samej */
    overflow: hidden !important;
    aspect-ratio: 3 / 2 !important;
    mask-image: url('https://viewv.dkonto.pl/wp-content/uploads/2026/07/maska-soczewka.svg'); 
    -webkit-mask-image: url('https://viewv.dkonto.pl/wp-content/uploads/2026/07/maska-soczewka.svg'); 
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 5 !important; /* Maska kształtuje tło, pod tintem */
}

/* 2. Powiększenie soczewki (gdy panel jest zamknięty) */
.t-scene-wrapper.panel-is-closed .t-lens-mask,
.t-scene-wrapper.panel-is-closed .t-lens-border {
    /* Cel: Wypełnij 80% całej szerokości ekranu */
    width: 80vw !important; 
    
    /* ZABEZPIECZENIE (Bardzo ważne!):
       Na monitorach ultrawide 80vw mogłoby wyjść poza górę/dół ekranu.
       Blokujemy wysokość na max 80vh, a width do max 120vh (zachowując proporcję 3/2). */
    max-height: 80vh !important;
    max-width: 120vh !important;
}

.t-lens-border svg, .lens-border path {
    fill: none !important;
    background-color: transparent !important;
}

/* =========================================
   RAMKA SOCZEWKI (SVG OVERLAY)
   ========================================= */
.t-lens-border {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    
    /* BAZOWE WYMIARY (Gdy panel lewy jest otwarty) */
    width: 600px !important;  
    height: auto !important; /* Pozwalamy wysokości liczyć się automatycznie */
    aspect-ratio: 3 / 2 !important; /* Trzyma proporcje 600x400 bez zniekształceń */
    
    z-index: 20 !important; /* Zawsze na samej górze, nad maską i tintem */
    pointer-events: none !important; /* Kluczowe: pozwala scrollować tło pod ramką */
    
    /* PŁYNNA ANIMACJA POWIĘKSZANIA (Musi być identyczna jak w .t-lens-mask!) */
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Wymuszenie na pliku SVG poprawnego wypełnienia widgetu */
.t-lens-border svg,
.t-lens-border path {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    fill: none !important; 
    background-color: transparent !important;
}

/* =========================================
   STAN AKTYWNY: POWIĘKSZENIE RAMKI (Gdy panel jest zamknięty)
   ========================================= */
.t-scene-wrapper.panel-is-closed .t-lens-border {
    /* Cel: Wypełnij dokładnie 80% szerokości ekranu, tak jak maska */
    width: 80vw !important; 
    
    /* Bezpieczniki przed wyjechaniem poza ekran na ogromnych monitorach */
    max-height: 80vh !important;
    max-width: 120vh !important;
}

.t-lens-tint {
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: #D97706 !important; 
    opacity: 0; 
    pointer-events: none !important;
    z-index: 5 !important;
    
}

/* =========================================
   ZWIJANY PANEL LEWY (Z przyciskami pokaz/ukryj)
   ========================================= */
.t-left-panel {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease !important;
}
.t-left-panel::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

.t-close-btn {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    cursor: pointer !important;
    z-index: 20 !important;
    transition: transform 0.2s ease !important;
}
.t-close-btn:hover {
    transform: scale(1.1) !important;
}

.t-open-btn {
    position: absolute !important;
    top: 2rem !important;
    left: 2rem !important;
    z-index: 5 !important; 
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateX(-30px) !important;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.t-scene-wrapper.panel-is-closed .t-left-panel {
    transform: translateX(calc(-100% - 80px)) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.t-scene-wrapper.panel-is-closed .t-open-btn {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateX(0) !important;
    z-index: 20 !important;
}

/* =========================================
   OBSZAR SCROLLOWANIA (Wewnętrzny)
   ========================================= */
.t-scroll-area {
    scrollbar-width: thin !important;
    scrollbar-color: #CBD5E1 transparent !important;
}
.t-scroll-area::-webkit-scrollbar { width: 5px !important; }
.t-scroll-area::-webkit-scrollbar-track { background: transparent !important; }
.t-scroll-area::-webkit-scrollbar-thumb {
    background-color: #CBD5E1 !important; 
    border-radius: 10px !important;
}

/* =========================================
   AKORDEON TRANSITIONS (Opcje i Checkboxy)
   ========================================= */
.t-opt-body {
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    border-top: 1px solid transparent !important;
    
    transition: 
        max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
        opacity 0.3s ease,
        padding 0.4s ease,
        margin 0.4s ease,
        border-color 0.4s ease !important;
}

.t-opt-card.active .t-opt-body {
    opacity: 1 !important;
    max-height: 500px !important; 
    margin-top: 15px !important;
    padding-top: 15px !important;
    border-top-color: #E2E8F0 !important; 
}

.t-opt-header {
    cursor: pointer !important;
    user-select: none !important; 
}
.t-opt-header * {
    pointer-events: none !important;
}

/* POPRAWIONY CHECKBOX (IDEALNE KÓŁKO) */
.t-opt-check {
    width: 24px !important;   
    height: 24px !important;  
    min-width: 24px !important; 
    min-height: 24px !important;
    border: 1px solid #CBD5E1 !important; 
    border-radius: 100% !important;
    background-color: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    transition: background-color 0.3s ease, border-color 0.3s ease !important;
}

.t-opt-check::after {
    content: '' !important;
    width: 5px !important;
    height: 10px !important;
    border: solid white !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) scale(0) !important; 
    opacity: 0 !important;
    display: block !important;
    margin-top: -2px !important; 
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease !important;
}

.t-opt-card.active .t-opt-check {
    background-color: #1B2135 !important; 
    border-color: #1B2135 !important;
}
.t-opt-card.active .t-opt-check::after {
    opacity: 1 !important;
    transform: rotate(45deg) scale(1) !important; 
}


.t-opt-icon svg,
.t-opt-icon path {
    fill: #15203B !important; /* Granatowy */
    transition: fill 0.3s ease !important;
}


.t-opt-card.active .t-opt-icon {
    /* WŁAŚCIWE KOLORY - AKTYWNE */
    background: #15203B !important; /* Granatowe tło */
}

.t-opt-card.active .t-opt-icon svg,
.t-opt-card.active .t-opt-icon path {
    fill: #ffffff !important; 
}

.t-opt-card.active .t-opt-icon i {
    color: #ffffff !important;
}


/* =========================================
   WSKAŹNIK SCROLLA (Scroll Hint & Progress Bar)
   ========================================= */

/* 1. Wyciągamy cały widżet HTML Elementora ze standardowego układu Flexbox */
.t-hint-widget {
    position: absolute !important;
    bottom: -6rem !important; /* Odstęp od dołu ekranu */
    left: 0 !important;
    width: 100% !important; /* Zajmuje całą dostępną szerokość prawej sekcji */
    z-index: 30 !important;
    pointer-events: none !important; /* Nie blokuje kliknięć w tło pod nim */
    display: flex !important;
    justify-content: center !important; /* Idealne centrowanie */
    transition: opacity 0.4s ease !important;
}

/* 2. Układ wewnętrzny samego wskaźnika (Usunięto stąd position: absolute) */
.t-scroll-hint {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
}

/* Biała pigułka z tekstem */
.t-hint-pill {
    background-color: #ffffff !important;
    padding: 12px 1rem !important;
    border-radius: 30px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
    color: #1B2135 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    font-family: inherit !important;
}

/* Animowana strzałka w pigułce */
.t-hint-pill svg {
    width: 18px !important;
    height: 18px !important;
    animation: hintBounce 2s infinite !important;
}

@keyframes hintBounce {
    0%, 20%, 50%, 80%, 100% { transform: translateX(0); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(3px); }
}

/* Szklana ścieżka pod spodem (Track) */
.t-hint-track {
    width: 200px !important; /* Twarda, stała szerokość paska */
    height: 4px !important;
    background-color: rgba(255, 255, 255, 0.3) !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
}

/* Wypełniający się pasek postępu (Progress) */
.t-hint-progress {
    width: 0% !important;
    height: 100% !important;
    background-color: #ffffff !important;
    border-radius: 4px !important;
}

/* (Opcjonalnie) Ukrycie wskaźnika, gdy zamykamy lewy panel. 
   Jeśli chcesz, żeby wskaźnik był widoczny nawet po zamknięciu panelu - usuń te 3 linijki. */
.t-scene-wrapper.panel-is-closed .t-hint-widget {
    opacity: 0 !important;
}



/* =========================================
   POPUP WIDEO (Placeholder)
   ========================================= */

/* Główny kontener - obejmuje cały ekran */
.v-video-popup {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99999 !important; /* Najwyżej na stronie */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Domyślnie ukryty */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease !important;
}

/* Rozmyte, ciemne tło (Overlay) */
.v-video-overlay {
    position: absolute !important;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(15, 23, 42, 0.85) !important; /* Ciemny granat zzezroczystością */
    
}

/* Główne okno popupu */
.v-video-modal {
    position: relative !important;
    background-color: #1B1E3A !important; /* Granat Vanberg */
    width: 90% !important;
    max-width: 650px !important;
    padding: 60px 40px !important;
    border-radius: 16px !important;
    text-align: center !important;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5) !important;
    
    /* Delikatne pomniejszenie na start dla efektu wjazdu */
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Klasa aktywująca (Dodawana przez JS) */
.v-video-popup.is-open {
    opacity: 1 !important;
    pointer-events: auto !important;
}
.v-video-popup.is-open .v-video-modal {
    transform: scale(1) !important; /* Okno 'odskakuje' do pełnego rozmiaru */
}

/* Przycisk zamknięcia (X) */
.v-video-close {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: none !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
}
.v-video-close:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
}
.v-video-close svg {
    width: 16px !important;
    height: 16px !important;
}

/* =========================================
   WYMUSZENIE POJAWIENIA SIĘ IKONKI "X" W POPUPIE
   ========================================= */
.v-video-close svg {
    width: 16px !important;
    height: 16px !important;
    display: block !important;
    overflow: visible !important;
}

.v-video-close svg path {
    stroke: #ffffff !important;       /* Wymusza biały kolor linii */
    stroke-width: 2.5px !important;   /* Wymusza grubość linii */
    fill: none !important;            /* Usuwa ewentualne czarne wypełnienie Elementora */
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

/* Wygląd ikonki 'Play' */
.v-video-icon {
    width: 64px !important;
    height: 64px !important;
    background-color: #B61A13 !important; /* Czerwono-pomarańczowy kolor Play */
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 24px auto !important;
    color: #ffffff !important;
}
.v-video-icon svg {
    width: 24px !important;
    height: 24px !important;
}

/* Teksty wewnątrz */
.v-video-content h3 {
    color: #ffffff !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    margin-bottom: 12px !important;
}
.v-video-content p {
    color: #94A3B8 !important; /* Jasnoszary */
    font-size: 15px !important;
    margin: 0 !important;
}/* End custom CSS */