:root {

    --wmnl-orange: #ff6a00;
    --wmnl-orange-hover: #ff8533;

    --wmnl-navy: #0d1832;
    --wmnl-navy-light: #172547;

    --wmnl-white: #ffffff;
    --wmnl-light: #f4f6f8;

    --bg-color: #081220;
    --text-color: #ffffff;

    --card-bg: #12203d;

    --wmnl-logo-accent: var(--wmnl-orange);
    --wmnl-logo-primary: var(--wmnl-white);

    --transition: 0.35s ease;

    --shadow-small:
        0 4px 12px rgba(0,0,0,.10);

    --shadow-medium:
        0 10px 28px rgba(0,0,0,.16);

    --shadow-large:
        0 18px 45px rgba(0,0,0,.24);


    --sprd-main3: var(--bg-color) !important;
    --sprd-sub2: var(--bg-color) !important;
    --sprd-sub3: var(--bg-color) !important;
}

a {
  color: var(--wmnl-orange) !important;
  text-decoration: none !important;
}

/* Logo */

#logo-stripes .segment-fill {
  fill: var(--wmnl-orange) !important;
}

#logo-text .segment-fill {
  fill: var(--text-color) !important;
}

/* Light Theme */

body.light-mode {

    --bg-color: #f5f7fa;
    --text-color: #111111;

    --card-bg: #ffffff;

    --wmnl-logo-accent: var(--wmnl-orange);
    --wmnl-logo-primary: var(--wmnl-navy);
}

/* General */

body {

    background: var(--bg-color);
    color: var(--text-color);

    font-family: "Segoe UI", sans-serif;

    transition: var(--transition);

    overflow-x: hidden;
}

a {
    text-decoration: none;
}

/* Navbar */

.wmnl-navbar {

    background: rgba(8,18,32,0.9);

    backdrop-filter: blur(10px);

    position: sticky;
    top: 0;

    z-index: 1000;
}

.min-vh-100 {
  min-height: 42vh !important;
}

.nav-link {

    color: white !important;

    margin-left: 10px;

    transition: var(--transition);
}

.nav-link:hover {

    color: var(--wmnl-orange) !important;
}

/* Language Buttons */

.language-dropdown {

    background: rgba(255,255,255,.06);

    border: 1px solid rgba(255,255,255,.08);

    color: white;

    border-radius: 12px;

    padding: 10px 14px;

    transition: .3s ease;

    box-shadow: var(--shadow-small);
}

.language-dropdown:hover {

    background: rgba(255,255,255,.10);

    color: white;
}

.dropdown-menu {

    background: rgba(15,25,45,.98);

    border: none;

    border-radius: 16px;

    padding: 8px;

    box-shadow: var(--shadow-large);

    backdrop-filter: blur(12px);
}

.dropdown-item {

    color: white;

    border-radius: 10px;

    padding: 10px 15px;

    transition: .2s ease;
}

.dropdown-item:hover {

    background: rgba(255,255,255,.08);

    color: var(--wmnl-orange);
}

/* Theme Button */

.theme-toggle {

    background: transparent;

    color: white;

    border: 1px solid rgba(255,255,255,.2);

    padding: 5px 10px;

    border-radius: 8px;
}

/* Hero */

.hero-bg{
    z-index:1 !important;
}

.hero-overlay{
    z-index:2 !important;
}

.hero-gradient{
    z-index:3 !important;
}

.hero-content{
    position:relative !important;
    z-index:4 !important;
}

.hero{

    position:relative;

    height:40vh;

    overflow:hidden;

}

.hero-bg{

    position:absolute;

    inset:0;

    background:url("/assets/images/hero/hero-main.jpg");

    background-size:cover;

    background-position:center;

    transform:scale(1);

    will-change:transform;

}

.hero-overlay{

    position:absolute;
    inset:0;

    /*background:
    linear-gradient(

        180deg,

        rgba(8,16,35,.1) 30%,

        rgba(8,16,35,.50) 45%,

        rgba(8,16,35,.9) 100%

    );*/

}

.hero-content{

    position:relative;

    z-index:5;

    height:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:flex-start;

}

.hero-gradient{

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:220px;

    background:

    linear-gradient(transparent, var(--bg-color));
}

.hero h1 {

    font-size: 4rem;

    font-weight: 800;

    text-transform: uppercase;

    color: beige;
}

.hero h2 {

    color: var(--wmnl-orange);

    font-size: 1.5rem;

    margin-bottom: 20px;

    color: beige;
}

.hero p {

    font-size: 1.15rem;

    max-width: 700px;

    color: beige;

}

/* Buttons */

.btn-wmnl {

    background: var(--wmnl-orange);

    color: var(--text-color) !important;

    box-shadow:

        0 6px 18px rgba(255,106,0,.18);

    transition: .3s ease;
    
    border: 2px solid transparent;
}

.btn-wmnl:hover {

    transform: translateY(-2px);

    box-shadow:

        0 12px 28px rgba(255,106,0,.30);

    border: 2px solid var(--wmnl-orange);
}

.btn-primary {

    background: var(--wmnl-orange);

    color: var(--text-color) !important;

    box-shadow:

        0 6px 18px rgba(255,106,0,.18);

    transition: .3s ease;
    
    border: 2px solid transparent;
}

.btn-primary:hover {

    transform: translateY(-2px);

    box-shadow:

        0 12px 28px rgba(255,106,0,.30);

    border: 2px solid var(--wmnl-orange);

    background-color: transparent;
}

/* Sections */

.section {

    padding: 100px 0;
}

.section-title {

    font-size: 2.5rem;

    font-weight: 700;

    margin-bottom: 50px;

    text-align: center;
}

/* Cards */

.wmnl-card {

    background: var(--card-bg);

    border: 1px solid rgba(255,255,255,.04);

    border-radius: 18px;

    overflow: hidden;

    transition: .3s ease;

    box-shadow:
        0 8px 25px rgba(0,0,0,.15);
}

.wmnl-card:hover {

    transform: translateY(-6px);

    box-shadow:
        0 18px 45px rgba(0,0,0,.22);
}

.wmnl-card img {

    width: 100%;
    height: 260px;

    object-fit: cover;
}

.wmnl-card-body {

    padding: 25px;
}

/* Division Cards */

.division-card {

    border-radius: 20px;

    padding: 40px;

    min-height: 250px;

    transition: .5s ease;

    cursor: pointer;

    border-radius: 20px;

    box-shadow:

        0 10px 30px rgba(0,0,0,.18);

    transition: .35s ease;
}

.division-wmnl {

    background: linear-gradient(
        135deg,
        #ff6a00,
        #ff8d33
    );
    color: var(--wmnl-white);
}

.division-nordclean {

    background: linear-gradient(
        135deg,
        #00a86b,
        #00784e
    );
    color: var(--wmnl-white);
}

.division-card:hover {

    transform:

        translateY(-8px)

        scale(1.01);

    box-shadow:

        0 18px 45px rgba(0,0,0,.28);
}

.wmnl-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.wmnl-card img {
    width: 100%;
    height: 235px;
    object-fit: cover;
    display: block;
}

.wmnl-card-body {
    flex: 1;
}

/* Footer */

.footer {

    /*
    background: #050d18;
    */

    background: var(--card-bg);

    padding: 60px 0;

    margin-top: 100px;

    box-shadow: 0 4px 8px 0 #11111191, 0 6px 20px 0 #11111191;
}

.footer-links {

    list-style: none;

    padding: 0;
}

.footer-links li {

    margin-bottom: 8px;
}

.footer-links a {

    color: var(--text-color);
}

/* NordClean Theme */

body.nordclean {

    --wmnl-orange: #00a86b;
    --wmnl-orange-hover: #00c77f;

    --wmnl-navy: #004d35;
    --wmnl-navy-light: #006847;

    transition: all .6s ease;
}

/* Mobile */

@media (max-width: 768px) {

    .hero h1 {

        font-size: 2.6rem;
    }

    .hero h2 {

        font-size: 1.2rem;
    }
}

.nordclean-hero {

    background:
    url('../images/hero/hero-nordclean.jpg');

    background-size: cover;
    background-position: center;
}

body.nordclean .wmnl-navbar {

    background:
        linear-gradient(
        rgba(0,40,25,.75),
        rgba(0,40,25,.75)
    )
}

body.nordclean .hero h2 {

    color: #8cffc6;
}

#divisionBadge {

    position: fixed;

    right: 20px;
    bottom: 20px;

    background: #00a86b;

    color: white;

    padding: 12px 20px;

    border-radius: 12px;

    font-weight: bold;

    z-index: 9999;
}

#wmnl-transition {

    position: fixed;

    inset: 0;

    pointer-events: none;

    z-index: 99999;
}

#wmnl-transition .stripe {

    position: absolute;

    width: 150%;

    height: 40%;

    left: -170%;

    background: var(--wmnl-orange);

    transform: skewX(-25deg);

    transition: left .8s ease;
}

#wmnl-transition .stripe:nth-child(1) {

    top: -10%;
}

#wmnl-transition .stripe:nth-child(2) {

    top: 30%;

    transition-delay: .1s;
}

#wmnl-transition .stripe:nth-child(3) {

    top: 70%;

    transition-delay: .2s;
}

.nav-link.active {

    color: var(--wmnl-orange) !important;

    font-weight: 700;
}

.addon-hero {
  background: url('../images/hero/hero-addon.jpg');
    background-position-x: 0%;
    background-position-y: 0%;
    background-size: auto;
  background-size: cover;
  background-position: center;
  min-height: 40vh;
  align-content: center;
}

.addon-hero h1{

font-size:4rem;

font-weight:800;

text-transform:uppercase;

}

.addon-hero h2{

color:var(--wmnl-orange);

max-width:700px;

margin-bottom:40px;

}

.gallery img{

transition:.3s ease;

}

.gallery img:hover{

transform:scale(1.02);

}

.gallery-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 16px;
}

.gallery-track {
    display: flex;
    width: 100%;
    transition: transform .7s ease-in-out;
}

.gallery-slide {
    flex: 0 0 100%;
    width: 100%;
}

.gallery-slide img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    display: block;
}

.gallery-prev,
.gallery-next {

    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    width: 50px;
    height: 50px;

    border: none;
    border-radius: 50%;

    background: rgba(0,0,0,.45);
    color: white;

    cursor: pointer;
    z-index: 20;

    transition: .2s;
}

.gallery-prev:hover,
.gallery-next:hover {

    background: #ff6a00;
}

.gallery-prev {
    left: 20px;
}

.gallery-next {
    right: 20px;
}

.media-hero {
  background: url('../images/hero/hero-media.jpg');
    background-position-x: 0%;
    background-position-y: 0%;
    background-size: auto;
  background-size: cover;
  background-position: center;
  min-height: 40vh;
}

.media-hero h1{

font-size:4rem;

font-weight:800;

}

.media-hero h2{

color:var(--wmnl-orange);

margin-bottom:40px;

}

.fleet-hero{

background:

linear-gradient(
rgba(8,18,32,.75),
rgba(8,18,32,.75)
),

url('../images/fleet/fleet-banner.jpg');

background-size:cover;

background-position:center;

min-height:100vh;

}

.form-select{

background:#12203d;

color:white;

border:none;

padding:15px;

}

body.light-mode .form-select{

background:white;

color:#111;

}

.wmnl-card .badge{

font-size:.9rem;

padding:8px 12px;

}

.contact-hero {

    background:

    linear-gradient(
        rgba(8,18,32,.80),
        rgba(8,18,32,.80)
    ),

    url('../images/contact/contact-hero.jpg');

    background-size: cover;
    background-position: center;

    min-height: 70vh;
}

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  color: var(--bs-modal-color);
  pointer-events: auto;
  background-color: var(--card-bg);
  background-clip: padding-box;
  border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
  border-radius: var(--bs-modal-border-radius);
  outline: 0;
  color: var(--wmnl-logo-accent) !important;
}

.contact-hero h1 {

    font-size: 4rem;

    font-weight: 800;
}

.contact-hero h2 {

    color: var(--wmnl-orange);

    max-width: 700px;
}

.form-control {

    background: rgba(255,255,255,.08);

    border: 1px solid rgba(255,255,255,.15);

    color: var(--text-color);

    border-radius: 12px;

    padding: 14px;

    box-shadow:

        inset 0 1px 2px rgba(255,255,255,.03),

        0 4px 10px rgba(0,0,0,.08);
}

.form-control:focus {

    border-color: var(--wmnl-orange);

    box-shadow: 0 0 0 .2rem rgba(255,106,0,.15);

    background: rgba(255,255,255,.12);

    color: var(--text-color);
}

.error-page{

min-height:100vh;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

background:

linear-gradient(
rgba(8,18,32,.82),
rgba(8,18,32,.82)
),

url("../images/errors/404.jpg");

background-size:cover;

background-position:center;

}

.error-code{

font-size:10rem;

font-weight:900;

color:var(--wmnl-orange);

text-shadow:

0 10px 30px rgba(0,0,0,.4);

}

.error-page h2{

font-size:2.5rem;

margin-bottom:20px;

}

.wmnl-error-info{

display:inline-block;

padding:12px 24px;

border-radius:12px;

background:

rgba(255,255,255,.06);

box-shadow:

var(--shadow-medium);

font-weight:bold;

letter-spacing:1px;

}

.download-card{

    border-radius:24px;
    overflow:hidden;
    position:relative;

}

.download-card::before{

    content:"";
    position:absolute;
    inset:0;

    background:
    radial-gradient(circle at center,
    rgba(255,140,0,.15),
    transparent 70%);

    pointer-events:none;

}

.download-card h2{

    font-size:2.5rem;
    font-weight:700;

}

.download-card p{

    max-width:700px;
    margin:auto;
    line-height:1.8;

}

/* ===== Automatische foto-galerij ===== */

.gallery-item {
    overflow: hidden;
}

.gallery-item a {
    display: block;
    position: relative;
    text-decoration: none;
    border-radius: 0.5rem;
    overflow: hidden;
}

.gallery-img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    transition: transform 0.35s ease, filter 0.35s ease;
}

.gallery-item a:hover .gallery-img {
    transform: scale(1.06);
    filter: brightness(0.85);
}

.gallery-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.6rem 0.9rem;
    font-size: 0.9rem;
    color: var(--wmnl-white);
    background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}

.gallery-item a:hover .gallery-caption {
    opacity: 1;
    transform: translateY(0);
}

.gallery-empty {
    color: var(--text-color);
    opacity: 0.7;
}

#gallery-load-more {
    min-width: 160px;
}

/* Lightbox */

.gallery-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(4, 9, 20, 0.94);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 2rem;
}

.gallery-lightbox.active {
    display: flex;
}

.gallery-lightbox-img {
    max-width: min(90vw, 1100px);
    max-height: 80vh;
    object-fit: contain;
    border-radius: 0.5rem;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

.gallery-lightbox-caption {
    margin-top: 1rem;
    color: var(--wmnl-white);
    font-size: 1.05rem;
    text-align: center;
    max-width: 90vw;
}

.gallery-lightbox-close {
    position: absolute;
    top: 1.2rem;
    right: 1.8rem;
    font-size: 2.5rem;
    line-height: 1;
    color: var(--wmnl-white);
    cursor: pointer;
    user-select: none;
    transition: color 0.2s ease;
}

.gallery-lightbox-close:hover {
    color: var(--wmnl-orange);
}

.language-menu{

    width:auto;

    min-width:340px;

    padding:16px;

    background:var(--card-bg);

    border:1px solid rgba(255,255,255,.08);

    border-radius:18px;

    box-shadow:var(--shadow-large);

    backdrop-filter:blur(12px);

}

.language-search{

    margin-bottom:12px;

}

.language-grid{

    display:grid;

    grid-template-columns:repeat(var(--columns),1fr);

    gap:6px 18px;

}

.language-item{

    display:flex;

    align-items:center;

    gap:10px;

    white-space:nowrap;

    border-radius:8px;

    padding:8px 12px;

    color:var(--text-color);

    transition:var(--transition);

}

.language-item:hover{

    background:rgba(255,106,0,.10);

    color:var(--wmnl-orange);

}

.language-item{

    transform:translateX(0);

}

.language-item:hover{

    transform:translateX(4px);

}

.language-item .flag{

    width:22px;

    text-align:center;

}

@media (max-width:768px){

    .language-grid{

        grid-template-columns:1fr;

    }

}

.language-search .form-control{

    background:var(--bg-color);

    color:var(--text-color);

    border:1px solid rgba(255,255,255,.10);

}

.language-search .form-control::placeholder{

    color:rgba(255,255,255,.45);

}

body.light-mode .language-search .form-control::placeholder{

    color:#777;

}

.language-search .form-control:focus{

    background:var(--bg-color);

    color:var(--text-color);

    border-color:var(--wmnl-orange);

    box-shadow:0 0 0 .2rem rgba(255,106,0,.15);

}

.flag{

    font-size:1.1rem;

}

/* =========================================================
   WMNL WEBSHOP
   ========================================================= */

/* =========================================================
   WMNL WEBSHOP
   ========================================================= */

.shop-page {
    padding: 4px 0 0px;
}

.shop-heading {
    text-align: center;
    margin-bottom: 45px;
}

.shop-heading .section-title {
    margin-bottom: 12px;
}

.shop-subtitle {
    margin: 0;
    opacity: .7;
}


/* =========================================================
   FULL WIDTH SPREADSHOP
   ========================================================= */

.shop-fullwidth {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

#myShop {
    width: 100% !important;
    max-width: none !important;
    min-height: 700px;
}


/*
 * De Spreadshop-client kan zelf nog een maximale
 * breedte aan een directe wrapper geven.
 */

#myShop > * {
    width: 100% !important;
    max-width: none !important;
}


/* Mobiel */

@media (max-width: 768px) {

    .shop-page {
        padding-top: 50px;
        padding-bottom: 60px;
    }

    .shop-heading {
        margin-bottom: 30px;
    }

    #myShop {
        min-height: 550px;
    }

}

/* =========================================================
   SPREADSHOP COMPACT LAYOUT
   ========================================================= */

/* Shop volledig scherm */
.shop-fullwidth {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* Voorkom onnodige verticale ruimte */
#myShop {
    width: 100% !important;
    max-width: none !important;
}

/* Afbeeldingen mogen geen extra ruimte onder zich veroorzaken */
#myShop img {
    display: block;
}

/* Algemene secties binnen de shop compacter */
#myShop section {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Knoppen en headings niet onnodig uit elkaar trekken */
#myShop h1,
#myShop h2,
#myShop h3,
#myShop h4 {
    margin-top: 0;
}

/* Product/design containers */
#myShop [class*="product"],
#myShop [class*="design"] {
    box-sizing: border-box;
}

.SprdMain .customPageBackground {
  background-color: var(--bg-color) !important;
  color: var(--text-color) !important;
  transition: var(--transition) !important;
}

.sprd-bg-m3 {
  background-color: var(--card-bg) !important;
  border-radius: 4px !important;
  transition: var(--transition) !important;
}

@media (min-width: 1000px) {
  .SprdMain .sprd-header {
    padding: 1em 0;
    padding-top: 1em;
    background-color: var(--bg-color) !important;
    transition: var(--transition) !important;
  }
}

.sprd-c-s3 {
  color: #a27b7b;
  background-color: var(--bg-color) !important;
  color: var(--text-color) !important;
  transition: var(--transition) !important;
}

.SprdMain .sprd-btn-primary {
  background: var(--wmnl-orange) !important;
  color: white !important;
  box-shadow: 0 6px 18px rgba(255,106,0,.18) !important;
  transition: .3s ease !important;
  border-radius: var(--bs-border-radius) !important;
  border: 2px solid transparent !important;
}

.SprdMain .sprd-btn-primary:hover {
  border: 2px solid var(--wmnl-orange) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px rgba(255,106,0,.30) !important;
  background-color: var(--bg-color) !important;
  color: var(--text-color) !important;
}

.SprdMain .sprd-img-spinner__image {
  color: transparent;
  height: 100%;
  opacity: 1;
  transition: opacity .2s ease-in .25s;
  width: 100%;
  visibility: visible !important;
  border-radius: 4px;
}

.SprdMain .sprd-header__image > img {
  max-height: 34px;
  max-width: 100%;
  object-fit: scale-down;
  object-position: left;
  visibility: collapse !important;
}

.sprd-bg-m2 {
  background-color: var(--wmnl-orange) !important;
  color: white !important;
  transition: var(--transition) !important;
}

.sprd-bg-m2:hover {
  border-color: transparent !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px rgba(255,106,0,.30) !important;
  background-color: var(--bg-color) !important;
  color: var(--text-color) !important;
}

.sprd-hc-m2 {
  color: var(--text-color) !important;
  transform: translateY(0px) !important;
  transition: var(--transition) !important;
}

.sprd-hc-m2:hover {
  color: var(--wmnl-orange) !important;
  transform: translateY(-2px) !important;
  text-shadow: 0 12px 28px rgba(255,106,0,.30) !important;
}

.SprdMain .sprd-startpage-teaser__content {
  margin: 0 8% 0 50% !important;
  min-height: 20em;
  padding-bottom: 1em;
  padding-top: 1em;
  transform: translateX(-100%) !important;
  /*background: linear-gradient( 180deg, rgba(8,16,35,.8) 30%, rgba(8,16,35,.85) 45%, rgba(8,16,35,.9) 100% ) !important;*/
  background-color: transparent !important;
}

.SprdMain .sprd-f-s2 {
  fill: var(--wmnl-orange) !important;
}

.sprd-lbc-s2 {
  border-color: var(--wmnl-orange) !important;
  transition: var(--transition) !important;
}
.sprd-c-s2 {
  color: var(--text-color) !important;
}

.sprd-info-footer__open-shop {
  visibility: collapse !important;
}

.sprd-info-footer__open-shop:hover {
  visibility: collapse !important;
}

.sprd-bg-m1 {
  background-color: var(--card-bg) !important;
}

.sprd-footer {
  background: var(--card-bg) !important;
  padding: 60px 0 !important;
  box-shadow: 0 4px 8px 0 #11111191, 0 6px 20px 0 #11111191 !important;
  border-radius: 16px !important;
 transition: var(--transition);
}

@media (min-width: 1000px) {
  .SprdMain .sprd-department-filter {
    height: 2.25em;
    background-color: var(--bg-color) !important;
  }
}

.SprdMain .sprd-btn-secondary {
  background-color: var(--sprd-main3) !important;
  border: 1px solid var(--wmnl-orange) !important;
  color: var(--text-color) !important;
}

.SprdMain .sprd-btn-secondary:hover {
  background-color: var(--sprd-main3) !important;
  border: 1px solid var(--text-color) !important;
  color: var(--wmnl-orange-hover) !important;
}

*, ::after, ::before {
  box-sizing: border-box;
  text-align: -webkit-center !important;
  color: var(--text-color) !important;
}

.SprdMain .sprd-startpage-teaser .sprd__caption, .SprdMain .sprd-startpage-teaser__content, .SprdMain .sprd-startpage-teaser__subcaption {
  text-align: left;
  color: #ebebeb !important;
}


.sprd-startpage-teaser__image {
  background-image: url("/assets/images/hero/hero-shop.jpg") !important;
}

/* =========================================================
   COOKIE BANNER
   ========================================================= */

.cookie-banner {
    position: fixed;
    left: 20px;
    right: 20px;
    bottom: 20px;
    z-index: 10000;

    background: var(--card-bg);
    color: var(--text-color);

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;

    box-shadow: var(--shadow-large);

    padding: 20px 25px;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.cookie-banner-content {
    max-width: 1400px;
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;
}

.cookie-banner-text {
    flex: 1;
}

.cookie-banner-text strong {
    display: block;

    font-size: 1.1rem;
    margin-bottom: 5px;
}

.cookie-banner-text p {
    margin: 0;
    opacity: 0.75;
}

.cookie-banner-actions {
    display: flex;
    align-items: center;
    gap: 10px;

    flex-shrink: 0;
}

.cookie-btn-secondary {
    background: transparent;
    color: var(--text-color);

    border: 1px solid rgba(255, 255, 255, 0.15);
}

.cookie-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-color);
}

/* Light mode */
body.light-mode .cookie-banner {
    border-color: rgba(0, 0, 0, 0.08);
}

body.light-mode .cookie-btn-secondary {
    border-color: rgba(0, 0, 0, 0.15);
}

/* Mobile */
@media (max-width: 768px) {

    .cookie-banner {
        left: 10px;
        right: 10px;
        bottom: 10px;

        padding: 18px;
    }

    .cookie-banner-content {
        flex-direction: column;
        align-items: stretch;

        gap: 15px;
    }

    .cookie-banner-actions {
        flex-direction: column;
    }

    .cookie-banner-actions .btn {
        width: 100%;
    }
}