@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root{ --primary-color:#88bd2f; --primary-color-dark:#758d05; --secondary-color:#38b6ff; --accent-color:#99bb05; --text-color:#333333; --background-color:#ffffff; --light-gray-background:#f9f9f9; --border-color:#e0e0e0; --font-family-base:'Poppins',sans-serif; --font-family-headline:'Poppins',sans-serif; --base-font-size:1.5rem; --border-radius:5px; --box-shadow-light:0 4px 15px rgba(0,0,0,.08); --color-promo-price:#d0164b; }

/* Global / Typography */ body{ font-family:var(--font-family-base); font-size:var(--base-font-size); line-height:1.6; color:var(--text-color); background-color:var(--background-color); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } h1,h2,h3,h4,h5,h6,.headline,.big_label{ font-family:var(--font-family-headline); color:var(--text-color); font-weight:600; } a{ color:var(--primary-color); text-decoration:none; transition:color .2s ease-in-out; } a:hover{ color:var(--primary-color-dark); text-decoration:underline; }

/* Buttons */ .btn.--solid, input[type=submit], button[type=submit]{ background-color:var(--primary-color); color:var(--background-color); border:1px solid var(--primary-color); font-weight:600; text-transform:uppercase; border-radius:var(--border-radius); box-shadow:none; transition:background-color .2s ease,border-color .2s ease,transform .1s ease; padding:1.2rem 2.4rem; } .btn.--solid:hover, input[type=submit]:hover, button[type=submit]:hover{ background-color:var(--primary-color-dark); border-color:var(--primary-color-dark); color:var(--background-color); transform:translateY(-2px); } .btn.--solid:active, input[type=submit]:active, button[type=submit]:active{transform:translateY(1px)} .btn.--outline{ background-color:transparent; color:var(--primary-color); border-color:var(--primary-color); box-shadow:none; } .btn.--outline:hover{ background-color:var(--primary-color); color:var(--background-color); }

/* Forms */ input[type=text], input[type=password], input[type=email], input[type=tel], textarea, select{ font-family:var(--font-family-base); font-size:1.4rem; border:1px solid var(--border-color); box-shadow:none; border-radius:var(--border-radius); transition:border-color .2s ease,box-shadow .2s ease; } input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=tel]:focus, textarea:focus, select:focus{ border-color:var(--primary-color); box-shadow:0 0 0 3px rgba(136,189,47,.2); outline:none; }

/* Layout & Components */ #main_banner1{ width:100vw; position:relative; left:50%; transform:translateX(-50%); max-width:none; margin-left:0; margin-right:0; } header{ background:rgba(255,255,255,.9); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } header .nav-link{transition:transform .2s ease,color .2s ease} header .nav-link:hover{ transform:translateY(-2px); color:var(--primary-color); text-decoration:none; } footer{ background-color:var(--light-gray-background); border-top:1px solid var(--border-color); } .product{ border:none; border-radius:var(--border-radius); transition:box-shadow .3s ease,transform .3s ease; background-color:var(--background-color); } .product:hover{ box-shadow:var(--box-shadow-light); transform:translateY(-5px); } .product__icon,.article__image_wrapper{overflow:hidden} .product__icon img,.article__image_wrapper img{transition:transform .4s ease} .product:hover .product__icon img, .article__item:hover .article__image_wrapper img{transform:scale(1.05)} .product__name{font-weight:600;color:var(--text-color)} .product__name:hover{color:var(--primary-color)} .price.--main del{color:#999}

.less_success{ background-color:#eaf6d7; color:#5a701b; border-color:var(--primary-color); } .less_info{ background-color:#eaf8ff; color:#1a6f9e; border-color:var(--secondary-color); } #backTop:hover,.less_color-text,.icon_link::before,.btn-icon i{color:var(--primary-color)} .less_background_active,.less_color-background{background-color:var(--primary-color)!important} .less_payment_description_border{border-color:var(--primary-color)} .less_small_label{border-left-color:var(--primary-color)}

.swiper-button-prev, .swiper-button-next{ background-color:rgba(255,255,255,.8); color:var(--text-color); border-radius:50%; width:44px;height:44px; box-shadow:var(--box-shadow-light); transition:all .2s ease; } .swiper-button-prev:hover, .swiper-button-next:hover{ background-color:var(--background-color); color:var(--primary-color); transform:scale(1.1); }

/* Keyframes */ @keyframes fadeInScaleUp{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}} @keyframes fadeInSlideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}} @keyframes slideDownFadeIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}} @keyframes page-load-fade-in{from{opacity:0}to{opacity:1}} @keyframes gentle-pulse{0%{transform:scale(1)}50%{transform:scale(1.02)}100%{transform:scale(1)}} @keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.03)}100%{transform:scale(1)}} @keyframes shake-and-lift{ 0%,100%{transform:translateY(-4px) scale(1.01) translateX(0)} 10%,30%,50%,70%,90%{transform:translateY(-4px) scale(1.01) translateX(-.5px)} 20%,40%,60%,80%{transform:translateY(-4px) scale(1.01) translateX(.5px)} } @keyframes ripple-effect{to{transform:scale(4);opacity:0}}

/* Animations apply */ .modal__wrapper{animation:fadeInScaleUp .4s ease-out forwards} #main_banner1 .main_slider__content{animation:fadeInSlideUp .8s .3s ease-out forwards;opacity:0} header .nav-item:hover>.navbar-subnav{animation:slideDownFadeIn .3s ease-out forwards} #container{animation:page-load-fade-in .6s ease-in-out forwards} #logo a{display:inline-block;animation:gentle-pulse 3.5s infinite ease-in-out;transform-origin:center center}

/* Headlines underline effect */ .headline__name,.headline{ position:relative; display:inline-block; padding-bottom:4px; cursor:pointer; } .headline__name::after,.headline::after{ content:''; position:absolute; width:100%;height:2px; background-color:var(--accent-color); bottom:0;left:0; transform:scaleX(0); transform-origin:left; transition:transform .3s ease-in-out; } .headline__name:hover::after,.headline:hover::after{transform:scaleX(1)} a:has(.headline__name):hover{text-decoration:none} a.headline:hover{text-decoration:none}

/* Banners / images */ .menu_button_wrapper img,#menu_banners2 img,#menu_banners3 img,.cm img{ transition:transform .4s ease-out,filter .4s ease-out; display:block;max-width:100%; } .menu_button_wrapper a,#menu_banners2 a,#menu_banners3 a,.cm a{ display:block;overflow:hidden;border-radius:var(--border-radius); } .menu_button_wrapper:hover img,#menu_banners2:hover img,#menu_banners3:hover img, .hotspot a:hover img,.cm p:hover>img,.cm a:hover img{ transform:scale(1.05);filter:brightness(105%); } .menu_button_wrapper,#menu_banners2,#menu_banners3,.cm img:not(a *){cursor:pointer}

#info_banners .info_banners__item{ transition:transform .3s ease,box-shadow .3s ease; border-radius:var(--border-radius); cursor:pointer; } #info_banners .info_banners__item:hover{ transform:translateY(-5px); box-shadow:var(--box-shadow-light); } #info_banners .info_banners__item .info_banners__icon i{ transition:transform .3s ease,color .3s ease; } #info_banners .info_banners__item:hover .info_banners__icon i{ transform:scale(1.1);color:var(--primary-color); }

img[src*="Noba_Banner_PC_2.png"],img[src*="1419416722_rwd_mobile.png"]{ transition:transform .35s ease-out,filter .35s ease-out;border-radius:8px; } img[src*="Noba_Banner_PC_2.png"]:hover,img[src*="1419416722_rwd_mobile.png"]:hover{ transform:scale(1.03);filter:brightness(1.05); }

/* Animated CTA */ .animated-alert{ display:block;padding:15px 20px;margin:10px 0; background:linear-gradient(90deg,var(--secondary-color),var(--color-promo-price),var(--secondary-color)); background-size:200% auto; color:var(--background-color)!important; text-align:center; font-family:var(--font-family-base); font-size:1.6rem;font-weight:600; border-radius:var(--border-radius); box-shadow:var(--box-shadow-light); text-decoration:none; transition:box-shadow .3s ease; animation:pulse 2.5s infinite ease-in-out; } .animated-alert:hover{ text-decoration:none;cursor:pointer; box-shadow:0 8px 25px rgba(0,0,0,.15); animation:shake-and-lift .6s infinite; }

/* Navigation tile */ .navigation_item{ background-color:#fff;border:1px solid #eee;border-radius:8px;overflow:hidden; transition:transform .25s ease-out,box-shadow .25s ease-out,border-color .25s ease-out; } .navigation_item .name{color:#333;font-weight:500;transition:color .25s ease-out} .navigation_item:hover{transform:translateY(-5px);box-shadow:0 6px 18px rgba(0,0,0,.07);border-color:#88bd2f} .navigation_item:hover .name{color:#88bd2f}

/* Search button */ button.menu_search__submit{ position:relative;overflow:hidden; transition:transform .3s ease,box-shadow .3s ease,background-color .3s ease; box-shadow:0 2px 5px rgba(0,0,0,.1); border:none;cursor:pointer;background-color:#99c64d; width:50px;height:50px;border-radius:50%; } button.menu_search__submit:hover{ transform:translateY(-4px);box-shadow:0 6px 12px rgba(0,0,0,.2);background-color:#9dbc00; } button.menu_search__submit::after{ content:"";position:absolute;top:50%;left:50%;width:100%;height:100%; transform:scale(0);opacity:1;border-radius:50%;background-color:rgba(255,255,255,.6); } button.menu_search__submit:active::after{animation:ripple-effect .6s linear}

/* Minor fixes */ button.btn[type=submit]:hover{text-decoration:none}

/* Banner entry animation */ @keyframes banner-entry-animation{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:translateY(0)}} #menu_buttons3 .menu_button_wrapper{opacity:0} #menu_buttons3 .menu_button_wrapper:nth-child(1){animation:banner-entry-animation .9s .8s ease-out forwards} #menu_buttons3 .menu_button_wrapper:nth-child(2){animation:banner-entry-animation .9s 1.2s ease-out forwards}

/* Phone popup */ #phone-popup-idosell{ position:fixed!important; bottom:95px!important;right:25px!important; background-color:#88bd2f!important;border-radius:12px!important; box-shadow:0 8px 20px rgba(0,0,0,.15)!important; z-index:9999!important;font-family:'Poppins',sans-serif!important; opacity:0!important;transform:translateY(20px)!important;visibility:hidden!important; transition:opacity .4s ease,transform .4s ease,visibility .4s,box-shadow .3s ease!important; } #phone-popup-idosell.show{opacity:1!important;transform:translateY(0)!important;visibility:visible!important} #phone-popup-idosell:hover{transform:translateY(-5px)!important;box-shadow:0 12px 25px rgba(56,182,255,.2)!important} #phone-popup-idosell a{ display:flex!important;align-items:center!important;text-decoration:none!important; padding:14px 22px!important; } #phone-popup-idosell .popup-title{ font-size:14px!important;color:#fff!important;opacity:.9!important;display:block!important; margin-bottom:3px!important;line-height:1.2!important;font-weight:400!important; } #phone-popup-idosell .popup-phone{ font-size:17px!important;color:#fff!important;font-weight:500!important;display:block!important;line-height:1.2!important; } #phone-popup-idosell .popup-phone strong{font-weight:700!important;color:#fff!important} #phone-popup-idosell::before{ content:''!important;position:absolute!important;top:5px!important;left:5px!important;right:5px!important;bottom:5px!important; border:2px solid #99c64d!important;border-radius:8px!important;opacity:.9!important; }

/* Toplayer */ #noba-toplayer-container{ font-family:'Poppins',sans-serif;display:none; justify-content:center;align-items:center;padding:15px 20px;box-sizing:border-box; color:#fff;background:linear-gradient(90deg,#758d05,#88bd2f,#9dbc00); box-shadow:0 2px 10px rgba(0,0,0,.2); position:fixed!important;top:0!important;left:0!important;width:100%!important;height:auto!important; max-width:none!important;transform:none!important;border-radius:0!important;z-index:99999!important; } #noba-toplayer-content{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap} #noba-toplayer-text{font-size:16px;font-weight:400;margin:0;text-align:center} #noba-toplayer-text .rabat-highlight{font-weight:700;color:#ff001f;text-shadow:1px 1px 2px rgba(0,0,0,.1)} #noba-toplayer-button{ background-color:#38b6ff;color:#fff;padding:10px 25px;border-radius:25px;text-decoration:none; font-weight:600;font-size:15px;border:none;cursor:pointer;transition:transform .2s ease,background-color .2s ease;white-space:nowrap; } #noba-toplayer-button:hover{background-color:#2da4ec;transform:scale(1.05)} #noba-toplayer-close{ position:absolute;top:50%;right:20px;transform:translateY(-50%); font-size:24px;font-weight:700;color:#fff;cursor:pointer;transition:transform .2s ease; } #noba-toplayer-close:hover{transform:translateY(-50%) scale(1.2)} @media (max-width:768px){ #noba-toplayer-container{padding:15px 50px 15px 20px} #noba-toplayer-content{flex-direction:column;gap:10px} #noba-toplayer-text{font-size:14px} }

/* Menu colors */ #menu_navbar .nav-link{color:#000!important} #menu_navbar .nav-link:hover{color:#99c64d!important}

/* Custom heading on CMS page */ .custom-heading{font-size:3rem!important;line-height:1.1!important} @media (min-width:768px){.custom-heading{font-size:4.5rem!important}}

/* Form section anchor */ #form-section-anchor{ background-color:#efefef;border-top:3px solid #4C6444;border-bottom:3px solid #4C6444; }

/* Product description fixes */ .product-description-container .product-description ul{ padding-left:40px!important;list-style-position:outside!important;list-style-type:disc!important; } .product-description-container .product-description h2{ display:flex!important;align-items:center!important;gap:12px!important; }

/* Homepage text center */ #main_cms .kategorie-naglowek p{text-align:center!important}

/*/* Stylowanie konkretnego napisu "Wybierz model swojego tonera :" */
h1.big_label {
    color: #88bd2f; /* Kolor główny marki Noba Group */