.elementor-13710 .elementor-element.elementor-element-7f63bef{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--overlay-opacity:1;--margin-top:0%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;--z-index:1;}.elementor-13710 .elementor-element.elementor-element-7f63bef:not(.elementor-motion-effects-element-type-background), .elementor-13710 .elementor-element.elementor-element-7f63bef > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#352F2F;background-image:url("https://oknagk.pl/wp-content/uploads/2023/07/kolor-elewacji.jpg");background-repeat:no-repeat;background-size:cover;}.elementor-13710 .elementor-element.elementor-element-7f63bef::before, .elementor-13710 .elementor-element.elementor-element-7f63bef > .elementor-background-video-container::before, .elementor-13710 .elementor-element.elementor-element-7f63bef > .e-con-inner > .elementor-background-video-container::before, .elementor-13710 .elementor-element.elementor-element-7f63bef > .elementor-background-slideshow::before, .elementor-13710 .elementor-element.elementor-element-7f63bef > .e-con-inner > .elementor-background-slideshow::before, .elementor-13710 .elementor-element.elementor-element-7f63bef > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';background-color:#000000AD;}.elementor-13710 .elementor-element.elementor-element-7f63bef.e-con{--align-self:flex-start;}.elementor-13710 .elementor-element.elementor-element-7f63bef .elementor-repeater-item-fb6b214.jet-parallax-section__layout .jet-parallax-section__image{background-size:auto;}.elementor-13710 .elementor-element.elementor-element-34cfac3{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--overlay-opacity:0.13;}.elementor-13710 .elementor-element.elementor-element-34cfac3::before, .elementor-13710 .elementor-element.elementor-element-34cfac3 > .elementor-background-video-container::before, .elementor-13710 .elementor-element.elementor-element-34cfac3 > .e-con-inner > .elementor-background-video-container::before, .elementor-13710 .elementor-element.elementor-element-34cfac3 > .elementor-background-slideshow::before, .elementor-13710 .elementor-element.elementor-element-34cfac3 > .e-con-inner > .elementor-background-slideshow::before, .elementor-13710 .elementor-element.elementor-element-34cfac3 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-13710 .elementor-element.elementor-element-94fecc5{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:space-evenly;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overlay-opacity:1;--border-radius:15px 15px 15px 15px;box-shadow:0px 6px 25px -20px rgba(0, 0, 0, 0.3);--margin-top:10px;--margin-bottom:10px;--margin-left:10px;--margin-right:10px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-13710 .elementor-element.elementor-element-94fecc5::before, .elementor-13710 .elementor-element.elementor-element-94fecc5 > .elementor-background-video-container::before, .elementor-13710 .elementor-element.elementor-element-94fecc5 > .e-con-inner > .elementor-background-video-container::before, .elementor-13710 .elementor-element.elementor-element-94fecc5 > .elementor-background-slideshow::before, .elementor-13710 .elementor-element.elementor-element-94fecc5 > .e-con-inner > .elementor-background-slideshow::before, .elementor-13710 .elementor-element.elementor-element-94fecc5 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';background-image:url("https://oknagk.pl/wp-content/uploads/2026/02/projekt-bez-nazwy9.jpg");background-position:top center;background-repeat:no-repeat;background-size:auto;}.elementor-13710 .elementor-element.elementor-element-94fecc5::before{filter:brightness( 82% ) contrast( 100% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );}.elementor-13710 .elementor-element.elementor-element-94fecc5.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-13710 .elementor-element.elementor-element-34ddc2b{--display:flex;}.elementor-13710 .elementor-element.elementor-element-8a3491f{--display:flex;--justify-content:center;--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--border-radius:10px 10px 10px 10px;box-shadow:0px 0px 10px 0px rgba(0, 0, 0, 0.3);--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:20px;--padding-bottom:20px;--padding-left:0px;--padding-right:0px;}.elementor-13710 .elementor-element.elementor-element-8a3491f:not(.elementor-motion-effects-element-type-background), .elementor-13710 .elementor-element.elementor-element-8a3491f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-13710 .elementor-element.elementor-element-20294df{text-align:left;}.elementor-13710 .elementor-element.elementor-element-20294df .elementor-heading-title{font-family:"Baloo Da 2", Sans-serif;font-size:32px;font-weight:400;color:#000000;}.elementor-13710 .elementor-element.elementor-element-20294df > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 50px 0px 50px;}.elementor-13710 .elementor-element.elementor-element-d798d52{font-family:"Baloo Da 2", Sans-serif;}.elementor-13710 .elementor-element.elementor-element-d798d52 > .elementor-widget-container{padding:0px 0px 0px 50px;}.elementor-13710 .elementor-element.elementor-element-5030b7b .elementor-field-group{padding-right:calc( 25px/2 );padding-left:calc( 25px/2 );margin-bottom:5px;}.elementor-13710 .elementor-element.elementor-element-5030b7b .elementor-form-fields-wrapper{margin-left:calc( -25px/2 );margin-right:calc( -25px/2 );margin-bottom:-5px;}.elementor-13710 .elementor-element.elementor-element-5030b7b .elementor-field-group.recaptcha_v3-bottomleft, .elementor-13710 .elementor-element.elementor-element-5030b7b .elementor-field-group.recaptcha_v3-bottomright{margin-bottom:0;}body.rtl .elementor-13710 .elementor-element.elementor-element-5030b7b .elementor-labels-inline .elementor-field-group > label{padding-left:5px;}body:not(.rtl) .elementor-13710 .elementor-element.elementor-element-5030b7b .elementor-labels-inline .elementor-field-group > label{padding-right:5px;}body .elementor-13710 .elementor-element.elementor-element-5030b7b .elementor-labels-above .elementor-field-group > label{padding-bottom:5px;}.elementor-13710 .elementor-element.elementor-element-5030b7b .elementor-field-group > label, .elementor-13710 .elementor-element.elementor-element-5030b7b .elementor-field-subgroup label{color:#000000;}.elementor-13710 .elementor-element.elementor-element-5030b7b .elementor-field-group > label{font-family:"Baloo Da 2", Sans-serif;font-size:22px;font-weight:400;}.elementor-13710 .elementor-element.elementor-element-5030b7b .elementor-field-type-html{padding-bottom:5px;color:#000000;font-family:"Baloo Da 2", Sans-serif;}.elementor-13710 .elementor-element.elementor-element-5030b7b .elementor-field-group .elementor-field{color:#000000;}.elementor-13710 .elementor-element.elementor-element-5030b7b .elementor-field-group .elementor-field, .elementor-13710 .elementor-element.elementor-element-5030b7b .elementor-field-subgroup label{font-family:"Baloo Da 2", Sans-serif;font-size:16px;font-weight:normal;}.elementor-13710 .elementor-element.elementor-element-5030b7b .elementor-field-group .elementor-field:not(.elementor-select-wrapper){background-color:#FFFFFF;border-radius:10px 10px 10px 10px;}.elementor-13710 .elementor-element.elementor-element-5030b7b .elementor-field-group .elementor-select-wrapper select{background-color:#FFFFFF;border-radius:10px 10px 10px 10px;}.elementor-13710 .elementor-element.elementor-element-5030b7b .elementor-button{font-family:"Baloo Da 2", Sans-serif;border-radius:5px 5px 5px 5px;padding:20px 15px 20px 15px;}.elementor-13710 .elementor-element.elementor-element-5030b7b .e-form__buttons__wrapper__button-next{background-color:#82A000;color:#ffffff;}.elementor-13710 .elementor-element.elementor-element-5030b7b .elementor-button[type="submit"]{background-color:#82A000;color:#ffffff;}.elementor-13710 .elementor-element.elementor-element-5030b7b .elementor-button[type="submit"] svg *{fill:#ffffff;}.elementor-13710 .elementor-element.elementor-element-5030b7b .e-form__buttons__wrapper__button-previous{background-color:#B5BAC5;color:#ffffff;}.elementor-13710 .elementor-element.elementor-element-5030b7b .e-form__buttons__wrapper__button-next:hover{color:#ffffff;}.elementor-13710 .elementor-element.elementor-element-5030b7b .elementor-button[type="submit"]:hover{color:#ffffff;}.elementor-13710 .elementor-element.elementor-element-5030b7b .elementor-button[type="submit"]:hover svg *{fill:#ffffff;}.elementor-13710 .elementor-element.elementor-element-5030b7b .e-form__buttons__wrapper__button-previous:hover{color:#ffffff;}.elementor-13710 .elementor-element.elementor-element-5030b7b .elementor-message{font-family:"Baloo Da 2", Sans-serif;}.elementor-13710 .elementor-element.elementor-element-5030b7b .e-form__indicators__indicator, .elementor-13710 .elementor-element.elementor-element-5030b7b .e-form__indicators__indicator__label{font-family:"Baloo Da 2", Sans-serif;font-size:16px;}.elementor-13710 .elementor-element.elementor-element-5030b7b{--e-form-steps-indicators-spacing:10px;--e-form-steps-indicator-padding:50px;--e-form-steps-indicator-inactive-primary-color:#BBBBBB;--e-form-steps-indicator-active-primary-color:#0092E2;--e-form-steps-indicator-active-secondary-color:#FFFFFF;--e-form-steps-indicator-completed-primary-color:#43AD04;--e-form-steps-indicator-completed-secondary-color:#FFFFFF;--e-form-steps-divider-width:1px;--e-form-steps-divider-gap:25px;}.elementor-13710 .elementor-element.elementor-element-5030b7b > .elementor-widget-container{margin:0px 0px 0px 0px;padding:25px 50px 50px 50px;background-color:#FFFEFE;border-radius:10px 10px 10px 10px;box-shadow:0px 0px 10px 0px rgba(0, 0, 0, 0.3);}@media(max-width:1024px){.elementor-13710 .elementor-element.elementor-element-7f63bef{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-13710 .elementor-element.elementor-element-94fecc5{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}}@media(max-width:767px){.elementor-13710 .elementor-element.elementor-element-7f63bef{--margin-top:-0%;--margin-bottom:-0%;--margin-left:-0%;--margin-right:0%;}.elementor-13710 .elementor-element.elementor-element-94fecc5{--width:100%;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:15px;--padding-right:15px;}.elementor-13710 .elementor-element.elementor-element-34ddc2b{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-13710 .elementor-element.elementor-element-20294df{text-align:center;}.elementor-13710 .elementor-element.elementor-element-20294df .elementor-heading-title{font-size:22px;}.elementor-13710 .elementor-element.elementor-element-20294df > .elementor-widget-container{padding:0px 25px 0px 25px;}.elementor-13710 .elementor-element.elementor-element-d798d52{text-align:center;font-size:14px;}.elementor-13710 .elementor-element.elementor-element-d798d52 > .elementor-widget-container{padding:0px 25px 0px 25px;}.elementor-13710 .elementor-element.elementor-element-5030b7b .elementor-field-group > label{font-size:16px;}.elementor-13710 .elementor-element.elementor-element-5030b7b .elementor-field-group .elementor-field, .elementor-13710 .elementor-element.elementor-element-5030b7b .elementor-field-subgroup label{font-size:16px;}.elementor-13710 .elementor-element.elementor-element-5030b7b .e-form__indicators__indicator, .elementor-13710 .elementor-element.elementor-element-5030b7b .e-form__indicators__indicator__label{font-size:14px;}.elementor-13710 .elementor-element.elementor-element-5030b7b{--e-form-steps-indicators-spacing:10px;--e-form-steps-indicator-padding:30px;width:100%;max-width:100%;}.elementor-13710 .elementor-element.elementor-element-5030b7b > .elementor-widget-container{padding:15px 15px 15px 15px;}}@media(min-width:768px){.elementor-13710 .elementor-element.elementor-element-7f63bef{--content-width:1480px;}.elementor-13710 .elementor-element.elementor-element-94fecc5{--width:30%;}}@media(max-width:1024px) and (min-width:768px){.elementor-13710 .elementor-element.elementor-element-94fecc5{--width:100%;}}/* Start custom CSS for form, class: .elementor-element-5030b7b */.e-form__indicators__indicator__label { white-space: nowrap; } #form-field-plik { padding: 5px 0px 10px 0px; } #form-field-dodatkowe_informacje { border: 2px solid #ccc; border-radius: 8px; padding: 10px 15px; font-size: 16px; transition: all 0.3s ease; width: 100%; /* Sprawia, że pole wypełnia szerokość kontenera */ box-sizing: border-box; /* Ważne dla poprawnego paddingu */ } /* Efekt po kliknięciu w pole */ #form-field-dodatkowe_informacje:focus { outline: none; border-color: #0073aa; /* Przykładowy kolor akcentu */ box-shadow: 0 0 5px rgba(0, 115, 170, 0.5); } #form-field-miasto { border: 2px solid #ccc; border-radius: 8px; padding: 10px 15px; font-size: 16px; transition: all 0.3s ease; width: 100%; /* Sprawia, że pole wypełnia szerokość kontenera */ box-sizing: border-box; /* Ważne dla poprawnego paddingu */ } /* Efekt po kliknięciu w pole */ #form-field-miasto:focus { outline: none; border-color: #0073aa; /* Przykładowy kolor akcentu */ box-shadow: 0 0 5px rgba(0, 115, 170, 0.5); } #form-field-Miejscowosc { border: 2px solid #ccc; border-radius: 8px; padding: 10px 15px; font-size: 16px; transition: all 0.3s ease; width: 100%; /* Sprawia, że pole wypełnia szerokość kontenera */ box-sizing: border-box; /* Ważne dla poprawnego paddingu */ } /* Efekt po kliknięciu w pole */ #form-field-Miejscowosc:focus { outline: none; border-color: #0073aa; /* Przykładowy kolor akcentu */ box-shadow: 0 0 5px rgba(0, 115, 170, 0.5); } /* --- STYLIZACJA PRZYCISKÓW WYBORU (4 W RZĘDZIE) --- */ /* 1. Kontener - zmieniamy na Grid dla idealnego układu 4 kolumn */ .elementor-field-group-termin_suwak .elementor-field-subgroup { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; /* 4 równe kolumny */ gap: 15px !important; /* Odstęp między przyciskami */ background: transparent !important; /* Usuwamy tło kontenera, by przyciski były osobno */ padding: 0 !important; border: none !important; } /* 2. Ukrywamy standardowe kółka radio */ .elementor-field-group-termin_suwak input[type="radio"] { display: none !important; } /* 3. Stylizacja pojedynczego przycisku (opcji) */ .elementor-field-group-termin_suwak .elementor-field-option { margin: 0 !important; padding: 0 !important; } /* 4. Wygląd przycisku (Etykiety) */ .elementor-field-group-termin_suwak .elementor-field-option label { display: block !important; padding: 15px 10px !important; cursor: pointer !important; background: #f4f7f9 !important; /* Jasne tło domyślne */ border: 1px solid #e1e8ed !important; border-radius: 15px !important; /* Zaokrąglenie 15px zgodnie z życzeniem */ text-align: center !important; color: #1a1a1a !important; font-weight: 500 !important; font-size: 14px !important; transition: all 0.3s ease !important; } /* 5. Efekt najechania (Hover) */ .elementor-field-group-termin_suwak .elementor-field-option label:hover { background: #ebf1f5 !important; border-color: #007bff !important; } /* 6. EFEKT PO ZAZNACZENIU (Aktywny przycisk) */ .elementor-field-group-termin_suwak input[type="radio"]:checked + label { background: #007bff !important; /* Kolor niebieski */ color: #ffffff !important; /* Biały tekst */ border-color: #007bff !important; box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3); } /* 7. Responsywność - na komórkach 2 w rzędzie lub 1 */ @media (max-width: 768px) { .elementor-field-group-termin_suwak .elementor-field-subgroup { grid-template-columns: repeat(2, 1fr) !important; /* 2 w rzędzie na tabletach */ } } @media (max-width: 480px) { .elementor-field-group-termin_suwak .elementor-field-subgroup { grid-template-columns: repeat(2, 1fr) !important; /* 1 w rzędzie na małych telefonach */ } } /* --- Stylizacja dla przycisków RADIO --- */ /* 1. Ukrywamy domyślne radio buttony */ .elementor-field-group-montaz input[type="radio"] { opacity: 0 !important; position: absolute !important; pointer-events: none; } /* 2. Układ Grid (zmień repeat(2, 1fr) na np. 3 lub 4 jeśli masz więcej opcji) */ .elementor-field-group-montaz .elementor-field-subgroup { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; } /* 3. Stylizacja kafelka Radio - Stan spoczynku */ .elementor-field-group-montaz .elementor-field-option label { display: flex !important; flex-direction: column; align-items: center; justify-content: center; min-height: 45px; /* Nieco niższe niż produkty */ background: #ffffff !important; border: 2px solid #e1e8ed !important; border-radius: 16px; padding: 8px !important; cursor: pointer; transition: all 0.3s ease !important; color: #1a1a1a !important; font-weight: 500 !important; font-size: 14px; text-align: center; box-sizing: border-box; } /* 4. --- EFEKT PO ZAZNACZENIU (Radio) --- */ .elementor-field-group-montaz input[type="radio"]:checked + label { border: 2px solid #007bff !important; background-color: #ffffff !important; box-shadow: 0 10px 25px rgba(0,123,255,0.25) !important; transform: translateY(-4px) !important; } /* Ptaszek (Checkmark) w prawym górnym rogu */ .elementor-field-group-montaz input[type="radio"]:checked + label::after { content: '✓'; position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; background: #007bff; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: bold; box-shadow: 0 2px 5px rgba(0,0,0,0.2); } /* 5. Responsywność */ @media (max-width: 767px) { .elementor-field-group-montaz .elementor-field-subgroup { grid-template-columns: 1fr !important; } } /* --- KASTRALIZACJA KAFELKÓW Z INDYWIDUALNYMI IKONAMI --- */ /* 1. Ukrywamy domyślne checkboxy */ .elementor-field-group-produkt_kafelki input[type="checkbox"] { opacity: 0 !important; position: absolute !important; pointer-events: none; } /* 2. Układ Grid 4 kolumny */ .elementor-field-group-produkt_kafelki .elementor-field-subgroup { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 15px !important; padding: 0px 0px 40px 0px; } /* 3. Stylizacja kafelka - Stan spoczynku */ .elementor-field-group-produkt_kafelki .elementor-field-option label { display: flex !important; flex-direction: column; align-items: center; justify-content: center; min-height: 150px; background: #ffffff !important; border: 2px solid #e1e8ed !important; border-radius: 16px; padding: 20px !important; cursor: pointer; transition: all 0.3s ease !important; color: #1a1a1a !important; font-weight: 500 !important; font-size: 14px; position: relative; text-align: center; box-sizing: border-box; } /* 4. DEFINICJA IKON (Indywidualne dla każdego kafelka) */ /* Wspólne ustawienia dla wszystkich ikon */ .elementor-field-group-produkt_kafelki .elementor-field-option label::before { content: ""; display: block; width: 50px; height: 50px; margin-bottom: 15px; background-size: contain; background-repeat: no-repeat; background-position: center; } /* Przypisanie konkretnych ikon (zmień adresy URL na własne) */ .elementor-field-group-produkt_kafelki .elementor-field-option:nth-child(1) label::before { background-image: url('https://oknagk.pl/wp-content/uploads/2026/02/okna-pcv.svg'); } .elementor-field-group-produkt_kafelki .elementor-field-option:nth-child(2) label::before { background-image: url('https://oknagk.pl/wp-content/uploads/2026/02/okna-aluminiowe.svg'); } .elementor-field-group-produkt_kafelki .elementor-field-option:nth-child(3) label::before { background-image: url('https://oknagk.pl/wp-content/uploads/2026/02/okna-tarasowe.svg'); } .elementor-field-group-produkt_kafelki .elementor-field-option:nth-child(4) label::before { background-image: url('https://oknagk.pl/wp-content/uploads/2026/02/drzwi-zewnetrzne.svg'); } .elementor-field-group-produkt_kafelki .elementor-field-option:nth-child(5) label::before { background-image: url('https://oknagk.pl/wp-content/uploads/2026/02/bramy-garazowe.svg'); } .elementor-field-group-produkt_kafelki .elementor-field-option:nth-child(6) label::before { background-image: url('https://oknagk.pl/wp-content/uploads/2026/02/zaluzje-zewnetrzne.svg'); } .elementor-field-group-produkt_kafelki .elementor-field-option:nth-child(7) label::before { background-image: url('https://oknagk.pl/wp-content/uploads/2026/02/rolety-wewnetrzne.svg'); } /* 5. UKRYCIE 8-MEGO KAFELKA */ .elementor-field-group-produkt_kafelki .elementor-field-option:nth-child(8) { display: none !important; } /* 6. EFEKT PO ZAZNACZENIU */ .elementor-field-group-produkt_kafelki input[type="checkbox"]:checked + label { border: 2px solid #007bff !important; background-color: #ffffff !important; box-shadow: 0 10px 25px rgba(0,123,255,0.25) !important; transform: translateY(-4px) !important; } /* Ptaszek (Checkmark) */ .elementor-field-group-produkt_kafelki input[type="checkbox"]:checked + label::after { content: '✓'; position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; background: #007bff; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: bold; } /* 7. Responsywność */ @media (max-width: 1024px) { .elementor-field-group-produkt_kafelki .elementor-field-subgroup { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 480px) { .elementor-field-group-produkt_kafelki .elementor-field-subgroup { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 480px) { .elementor-field-group-produkt_kafelki .elementor-field-option label { min-height: 170px;} }/* End custom CSS */ /* Start custom CSS for form, class: .elementor-element-5030b7b */.e-form__indicators__indicator__label { white-space: nowrap; } #form-field-plik { padding: 5px 0px 10px 0px; } #form-field-dodatkowe_informacje { border: 2px solid #ccc; border-radius: 8px; padding: 10px 15px; font-size: 16px; transition: all 0.3s ease; width: 100%; /* Sprawia, że pole wypełnia szerokość kontenera */ box-sizing: border-box; /* Ważne dla poprawnego paddingu */ } /* Efekt po kliknięciu w pole */ #form-field-dodatkowe_informacje:focus { outline: none; border-color: #0073aa; /* Przykładowy kolor akcentu */ box-shadow: 0 0 5px rgba(0, 115, 170, 0.5); } #form-field-miasto { border: 2px solid #ccc; border-radius: 8px; padding: 10px 15px; font-size: 16px; transition: all 0.3s ease; width: 100%; /* Sprawia, że pole wypełnia szerokość kontenera */ box-sizing: border-box; /* Ważne dla poprawnego paddingu */ } /* Efekt po kliknięciu w pole */ #form-field-miasto:focus { outline: none; border-color: #0073aa; /* Przykładowy kolor akcentu */ box-shadow: 0 0 5px rgba(0, 115, 170, 0.5); } #form-field-Miejscowosc { border: 2px solid #ccc; border-radius: 8px; padding: 10px 15px; font-size: 16px; transition: all 0.3s ease; width: 100%; /* Sprawia, że pole wypełnia szerokość kontenera */ box-sizing: border-box; /* Ważne dla poprawnego paddingu */ } /* Efekt po kliknięciu w pole */ #form-field-Miejscowosc:focus { outline: none; border-color: #0073aa; /* Przykładowy kolor akcentu */ box-shadow: 0 0 5px rgba(0, 115, 170, 0.5); } /* --- STYLIZACJA PRZYCISKÓW WYBORU (4 W RZĘDZIE) --- */ /* 1. Kontener - zmieniamy na Grid dla idealnego układu 4 kolumn */ .elementor-field-group-termin_suwak .elementor-field-subgroup { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; /* 4 równe kolumny */ gap: 15px !important; /* Odstęp między przyciskami */ background: transparent !important; /* Usuwamy tło kontenera, by przyciski były osobno */ padding: 0 !important; border: none !important; } /* 2. Ukrywamy standardowe kółka radio */ .elementor-field-group-termin_suwak input[type="radio"] { display: none !important; } /* 3. Stylizacja pojedynczego przycisku (opcji) */ .elementor-field-group-termin_suwak .elementor-field-option { margin: 0 !important; padding: 0 !important; } /* 4. Wygląd przycisku (Etykiety) */ .elementor-field-group-termin_suwak .elementor-field-option label { display: block !important; padding: 15px 10px !important; cursor: pointer !important; background: #f4f7f9 !important; /* Jasne tło domyślne */ border: 1px solid #e1e8ed !important; border-radius: 15px !important; /* Zaokrąglenie 15px zgodnie z życzeniem */ text-align: center !important; color: #1a1a1a !important; font-weight: 500 !important; font-size: 14px !important; transition: all 0.3s ease !important; } /* 5. Efekt najechania (Hover) */ .elementor-field-group-termin_suwak .elementor-field-option label:hover { background: #ebf1f5 !important; border-color: #007bff !important; } /* 6. EFEKT PO ZAZNACZENIU (Aktywny przycisk) */ .elementor-field-group-termin_suwak input[type="radio"]:checked + label { background: #007bff !important; /* Kolor niebieski */ color: #ffffff !important; /* Biały tekst */ border-color: #007bff !important; box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3); } /* 7. Responsywność - na komórkach 2 w rzędzie lub 1 */ @media (max-width: 768px) { .elementor-field-group-termin_suwak .elementor-field-subgroup { grid-template-columns: repeat(2, 1fr) !important; /* 2 w rzędzie na tabletach */ } } @media (max-width: 480px) { .elementor-field-group-termin_suwak .elementor-field-subgroup { grid-template-columns: repeat(2, 1fr) !important; /* 1 w rzędzie na małych telefonach */ } } /* --- Stylizacja dla przycisków RADIO --- */ /* 1. Ukrywamy domyślne radio buttony */ .elementor-field-group-montaz input[type="radio"] { opacity: 0 !important; position: absolute !important; pointer-events: none; } /* 2. Układ Grid (zmień repeat(2, 1fr) na np. 3 lub 4 jeśli masz więcej opcji) */ .elementor-field-group-montaz .elementor-field-subgroup { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; } /* 3. Stylizacja kafelka Radio - Stan spoczynku */ .elementor-field-group-montaz .elementor-field-option label { display: flex !important; flex-direction: column; align-items: center; justify-content: center; min-height: 45px; /* Nieco niższe niż produkty */ background: #ffffff !important; border: 2px solid #e1e8ed !important; border-radius: 16px; padding: 8px !important; cursor: pointer; transition: all 0.3s ease !important; color: #1a1a1a !important; font-weight: 500 !important; font-size: 14px; text-align: center; box-sizing: border-box; } /* 4. --- EFEKT PO ZAZNACZENIU (Radio) --- */ .elementor-field-group-montaz input[type="radio"]:checked + label { border: 2px solid #007bff !important; background-color: #ffffff !important; box-shadow: 0 10px 25px rgba(0,123,255,0.25) !important; transform: translateY(-4px) !important; } /* Ptaszek (Checkmark) w prawym górnym rogu */ .elementor-field-group-montaz input[type="radio"]:checked + label::after { content: '✓'; position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; background: #007bff; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: bold; box-shadow: 0 2px 5px rgba(0,0,0,0.2); } /* 5. Responsywność */ @media (max-width: 767px) { .elementor-field-group-montaz .elementor-field-subgroup { grid-template-columns: 1fr !important; } } /* --- KASTRALIZACJA KAFELKÓW Z INDYWIDUALNYMI IKONAMI --- */ /* 1. Ukrywamy domyślne checkboxy */ .elementor-field-group-produkt_kafelki input[type="checkbox"] { opacity: 0 !important; position: absolute !important; pointer-events: none; } /* 2. Układ Grid 4 kolumny */ .elementor-field-group-produkt_kafelki .elementor-field-subgroup { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 15px !important; padding: 0px 0px 40px 0px; } /* 3. Stylizacja kafelka - Stan spoczynku */ .elementor-field-group-produkt_kafelki .elementor-field-option label { display: flex !important; flex-direction: column; align-items: center; justify-content: center; min-height: 150px; background: #ffffff !important; border: 2px solid #e1e8ed !important; border-radius: 16px; padding: 20px !important; cursor: pointer; transition: all 0.3s ease !important; color: #1a1a1a !important; font-weight: 500 !important; font-size: 14px; position: relative; text-align: center; box-sizing: border-box; } /* 4. DEFINICJA IKON (Indywidualne dla każdego kafelka) */ /* Wspólne ustawienia dla wszystkich ikon */ .elementor-field-group-produkt_kafelki .elementor-field-option label::before { content: ""; display: block; width: 50px; height: 50px; margin-bottom: 15px; background-size: contain; background-repeat: no-repeat; background-position: center; } /* Przypisanie konkretnych ikon (zmień adresy URL na własne) */ .elementor-field-group-produkt_kafelki .elementor-field-option:nth-child(1) label::before { background-image: url('https://oknagk.pl/wp-content/uploads/2026/02/okna-pcv.svg'); } .elementor-field-group-produkt_kafelki .elementor-field-option:nth-child(2) label::before { background-image: url('https://oknagk.pl/wp-content/uploads/2026/02/okna-aluminiowe.svg'); } .elementor-field-group-produkt_kafelki .elementor-field-option:nth-child(3) label::before { background-image: url('https://oknagk.pl/wp-content/uploads/2026/02/okna-tarasowe.svg'); } .elementor-field-group-produkt_kafelki .elementor-field-option:nth-child(4) label::before { background-image: url('https://oknagk.pl/wp-content/uploads/2026/02/drzwi-zewnetrzne.svg'); } .elementor-field-group-produkt_kafelki .elementor-field-option:nth-child(5) label::before { background-image: url('https://oknagk.pl/wp-content/uploads/2026/02/bramy-garazowe.svg'); } .elementor-field-group-produkt_kafelki .elementor-field-option:nth-child(6) label::before { background-image: url('https://oknagk.pl/wp-content/uploads/2026/02/zaluzje-zewnetrzne.svg'); } .elementor-field-group-produkt_kafelki .elementor-field-option:nth-child(7) label::before { background-image: url('https://oknagk.pl/wp-content/uploads/2026/02/rolety-wewnetrzne.svg'); } /* 5. UKRYCIE 8-MEGO KAFELKA */ .elementor-field-group-produkt_kafelki .elementor-field-option:nth-child(8) { display: none !important; } /* 6. EFEKT PO ZAZNACZENIU */ .elementor-field-group-produkt_kafelki input[type="checkbox"]:checked + label { border: 2px solid #007bff !important; background-color: #ffffff !important; box-shadow: 0 10px 25px rgba(0,123,255,0.25) !important; transform: translateY(-4px) !important; } /* Ptaszek (Checkmark) */ .elementor-field-group-produkt_kafelki input[type="checkbox"]:checked + label::after { content: '✓'; position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; background: #007bff; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: bold; } /* 7. Responsywność */ @media (max-width: 1024px) { .elementor-field-group-produkt_kafelki .elementor-field-subgroup { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 480px) { .elementor-field-group-produkt_kafelki .elementor-field-subgroup { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 480px) { .elementor-field-group-produkt_kafelki .elementor-field-option label { min-height: 170px;} }/* End custom CSS */