/*
/ Name: SleekStore
/ Author: qSeek
/ Link: https://www.mc-market.org/resources/10013/
/ Support: https://discord.gg/4sDtzrs
*/
:root {
    --main-color: #24BBEB;
    --main-color-transparent: rgba(36, 187, 235, 0.45); /* Accent cyan (craftok.dev) — ajuster l’opacité si besoin */
                                               to convert --main-color to --main-color-transparent use 
                                               this website: https://www.rgbtohex.net/hextorgb/ 
                                               you will receive the color in this format rgb(x,x,x)
                                               you will need to edit that to rgb(x,x,x,0.6);
                                              */
     --sleek-logo-size: 250px; /* Change Header Logo Size */
   }
   html {
        font-size: 15px!important;   
   }
   .table-dark {
       --bs-table-bg: #19222b2f;
   }
   .btn-primary {
       text-decoration:none;
   }
   .table-dark * { border:0; }
   body {
       font-family: "Geist", "Outfit", "Inter", sans-serif;
       background-color: #fafafa;
       color: #18181b;
       --primary:#F61753;
       --primary-2:rgb(200, 24, 71);
       --secondary:#24BBEB;
       --secondary-2:#00ade1;
       --tri: rgba(217, 217, 217, 0.38);
       --tri-2: rgba(217, 217, 217, 0.673);
       --bs-primary: #F61753;
       -webkit-font-smoothing: antialiased;
   }
   .logo {
        text-align: center;
    }
   
   .logo img {
       width: var(--sleek-logo-size);
       margin-bottom: 50px;
       animation: pulse 4s infinite;
       animation-timing-function: ease-in-out;
   }
   @keyframes pulse {
       0% {
           transform: scale(1);
       }
       50% {
           transform: scale(1.1);
       }
       100% {
           transform: scale(1);
       }
   }
    @media (min-width: 1200px) {
       .container {
         width: 90%;
       }
   }
   .header {
       background: var(--main-color-transparent);
       position: relative;
       overflow: hidden;
   }
   .headerbg {
       position: absolute;
       z-index: -1;
       background: url(https://files.amodsus.com/new-lobby.png);
       top: 0;
       background-repeat: no-repeat;
       background-size: cover;
       background-position: center;
       width: 100%;
       height: 100%;
       filter: blur(7px);
   }
   .navbar-default {
       background: transparent;
   }
   .navbar-nav>li {
       transition: 0.05s;
       float: unset;
       background: #fff;
       border-radius: 3px;
       margin-bottom: 12px;
       box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.05);
       -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.05);
   }
   .card img {
       max-width:100%;
   }
   .navbar-nav {
       float: unset!important;
   }
   .navbar-default .navbar-collapse, .navbar-default .navbar-form {
       padding: 0!important
   }
   .navbar-default .navbar-nav>li>a {
       color: #373737;
       font-weight: bold;
       font-size: 15px;
   }
   .navbar-default .navbar-nav>li:hover, .navbar-default .navbar-nav>li:focus, .navbar-default .navbar-nav>.open {
       color: #373737;
       border-left: 4px solid var(--primary);
   }
   .dropdown-menu {
       position: unset;
       float: unset;
       border: 0;
       box-shadow: unset;
   }
   .topbar {
       background: rgba(255,255,255,0.2);
       box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.05);
       -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.05);
   }
   .topbar ul {
       list-style-type: none;
       margin-top: auto;
       margin-bottom: auto;
       padding: 0;
   }
   .topbar .topbar-items {
       float: left;
       display: flex;
       width: 100%;
       margin-top: 25px;
       margin-bottom: 25px;
   }
   .topbar ul li {
       float: left;
       margin: 0;
       margin-right: 25px;
   }
   .topbar ul li a {
       color: rgba(255, 255, 255, 0.9);
       font-weight: bold;
       font-size: 18px;
       line-height: 15px;
       text-transform: uppercase;
   }
   .topbar-server {
       margin-left: auto;  
       text-align: right;
   
   }
   .topbar-server .text {
       font-weight: normal;
       font-size: 10px;
       line-height: 12px;
       color: #fff;    
   }
   .topbar-server .ip {
       font-weight: bold;
       font-size: 18px;
       line-height: 22px;
       color: #fff;
   }
   .panel-default>.panel-heading {
       font-size: 14px;
       background: transparent;
       border: 0;
       text-align: center;
       color: var(--main-color);
       font-weight: bold;
       position: relative;
   }
   .panel-default {
       background: #fff;
       border: 0;
   }
   .panel-default>.panel-heading:after {
       position: absolute;
       content: "";
       width: 36px;
       height: 4px;
       right: calc(50% - 18px);
       bottom: 2px;
       background: var(--main-color);
       border-radius: 3px;
   }
   .topbar-items i {
       vertical-align: middle;
   }
   .topbar-items .text {
       display: inline-block;
       vertical-align: middle;
       margin-left: 5px;
   }
   .top-donator{
       display: grid;
       grid-template-columns: 84px auto;
   }
   
   .top-donator .data {
       margin: auto;
       margin-left: 10px;
   }
   
   .top-donator .data b {
       color: #373737;
   }
   
   .top-donator .avatar img {
       width: 64px;
   }
   .topdonator-module .panel-body {
       padding: 0;
   }
   
   .topdonator-module .avatar {
       height: 96px;
       position: relative;
       top: -12px;
       margin-bottom: -12px;
       margin-left: 12px;
       overflow: hidden;
   }
   
   .topdonator-module .data p {
       margin: 0;
   }
   .topdonator-module .data p.text {
       font-size: 10px;
       color: #000000;
   }
   .payments .payment img {
       width: 32px;
       border-radius: 4px
   
   }
   .payments {
       display: flex;
       justify-content: space-around;
       flex: 1;
   }
   .profile {
       background: #fff;
       border-radius: 3px;
       margin-bottom: 12px;
       box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.05);
       -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.05);
       padding: 15px;
   }
   .profile .information img {
       width: 45px;
       border-radius: 8px;
   }
   .profile .information .avatar {
       margin-top: auto;
       margin-bottom: auto;
   }
   .profile .information {
       display: flex;
   }
   .profile .information .info {
       margin-left: 10px;
       margin-top: auto;
       margin-bottom: auto;
       overflow: hidden;
   }
   .profile .information .info .main {
       color: #828282;
       font-weight: bold;
       font-size: 10px;
       text-transform: uppercase;
   }
   .profile .information .info .sub {
       font-weight: bold;
       font-size: 18px;
       color: #000000;
       line-height: 1;
       overflow: hidden;
       text-overflow: ellipsis;
   }
   .profile .information .settings {
       display: flex;
       margin-left: auto;
   }
   .profile .information .settings div {
       margin-top: auto;
       margin-bottom: auto;
       margin-right: 10px;
   }
   .profile .information .settings .logout i {
       color: #DB3434;
   }
   .profile .information .settings .basket i {
       color: var(--primary);
   }
   .announce .bar {
       background: var(--main-color);
       animation: rainbow 15s infinite;
       border-radius: 4px;
       color: #fff;
       box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.05);
       -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.05);
       display: flex;
       padding: 15px;
       position: relative;
       margin-bottom: 10px;
   }
   .announce .bar .text {
       margin-left: 8px;
       margin-top: auto;
       margin-bottom: auto;
   }
   .announce .bar i,.announce .bar em {
       margin-top: auto;
       margin-bottom: auto;
       font-size: 28px;
   }
   .announce .bar .button {
       z-index: 2;
       margin-left: auto;
       margin-top: auto;
       margin-bottom: auto;
       background: rgb(255,255,255, 0.2);
       padding: 10px;
       border-radius: 4px;
       box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.05);
       -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.05);
   }
   .announce .bar .button a {
       color: #fff;
       font-weight: bold;	
   }
   @keyframes rainbow {
       0% {
           background: var(--main-color);
       }
       20% {
           background: #db3434;
       }
       40% {
           background: #4ec344;
       }
       60% {
           background: #db34a0;
       }
       80% {
           background: #d8db34;
       }
       100% {
           background: var(--main-color);
       }                
   }
   #particles-js {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background-repeat: no-repeat;
       background-size: cover;
       background-position: 50% 50%;
   }
   footer .seekutils {
       background: #D0D0D0;
   }
   footer .seekrow {
       display: flex;
       justify-content: space-between;
       padding: 25px 25px 25px 25px;
   }
   
   footer .seekutils img {
       max-height: 250px;
       max-width: 100%;
       margin: auto;
       display: block;
   }
   
   footer .seekutils .block {
       flex: 1;
       margin: 0px 35px 0px 35px;
       display: flex;
       flex-direction: column;
   }
   
   .seekcopyright {
       display: flex;
       background: #C4C4C4;
   
   }
   
   .seekrow .left {
       flex: 1;
       font-weight: bold;
       font-size: 12px;
       color: #828282;
       margin-top: auto;
       margin-bottom: auto;
   
   }
   .dark .modal-footer {
       border-color: #000000 !important;
   }
   .dark .modal-header {
       border-color: #000000 !important;
   }
   .seekrow .right {
       flex: 1;
   
   }
   .seekrow .right img {
       display: block;
       margin-left: auto;
       width: 32px;
       filter: grayscale(1);
       transition: 1s;
   }
   .seekrow .right img:hover {
       filter: grayscale(0);
   }
   .seekrow .block .title {
       text-align: center;
       font-weight: bold;
       font-size: 16px;
       color: #000000;
       margin-bottom: 15px;
       position: relative;
   }
   .seekrow .block .title:after {
       position: absolute;
       content: "";
       height: 4px;
       width: 28px;
       border-radius: 4px;
       background: var(--main-color); 
       left: calc(50% - 14px);
       bottom: -6px;
   }
   #ipvalue {
       opacity: 0;
       cursor: context-menu;
       position:fixed;
   }
   #CopyIP {
       cursor: pointer;
   }
   .seekutils .block li {
       margin: 15px 0px 15px 0px;
       padding-bottom: 10px;
       border-bottom: 1px dashed #7b7b7b;
       list-style-type: none;
   }
   .seekutils .block ul {
       padding: 0;
   }
   .seekutils .block li a {
       color: #2c3e50;
   }
   .seek_themechanger {
       position: fixed;
       left: 0;
       top: 50%;
       box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.05);
       -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.05);
       padding: 10px;
       border-bottom-right-radius: 8px;
       border-top-right-radius: 8px;
       cursor: pointer;
       z-index: 999;
       user-select: none;
       line-height: 1;
       background: #fff;
       color: #272727;
   }
   .dark .seek_themechanger {
       background: #272727;
       color: #fff;
   }
   @media (max-width: 991px){
       footer .seekrow {
           flex-direction: column;
       }
       .seekrow .right img {
           margin: auto;
       }
       .seek_themechanger {
           top: unset;
           bottom: 12px;
       }
   }
   
   .item-footer button {
       width: 100%;
       border: transparent;
       text-transform: uppercase;
       color: rgba(0, 0, 0, 0.5);
       font-weight: bold;
       padding: 12px 24px;
       border: 0;
   }
   
   .announce .bar .text p {
       margin: 0;
   }
   .navbar-nav {
       margin: 0;
   }
   body.dark {
       position: relative;
       background-color: #09090b;
       color: #fafafa;
       --tri: rgba(63, 63, 70, 0.45);
       --tri-2: rgba(63, 63, 70, 0.65);
   }
   body.dark::before {
       content: "";
       position: fixed;
       inset: 0;
       z-index: -2;
       pointer-events: none;
       background:
           radial-gradient(80% 55% at 10% 5%, rgba(139, 92, 246, 0.22) 0%, transparent 55%),
           radial-gradient(70% 50% at 92% 8%, rgba(6, 182, 212, 0.16) 0%, transparent 50%),
           radial-gradient(60% 45% at 50% 100%, rgba(246, 23, 83, 0.08) 0%, transparent 45%),
           #09090b;
   }
   body.dark::after {
       content: "";
       position: fixed;
       inset: 0;
       z-index: -1;
       pointer-events: none;
       opacity: 0.035;
       background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
   }
   body.dark ::-webkit-scrollbar {
       width: 6px;
   }
   body.dark ::-webkit-scrollbar-track {
       background: #09090b;
   }
   body.dark ::-webkit-scrollbar-thumb {
       background: #27272a;
       border-radius: 10px;
   }
   body.dark ::-webkit-scrollbar-thumb:hover {
       background: #3f3f46;
   }
   .dark .panel-default {
       background: #272727;
       border: unset;
   }
   .dark .profile {
       background: #101316;
   }
   .dark .profile .information .info .main {
       color: #c1c1c1;
   }
   .dark .profile .information .info .sub {
       color: #fff;
   }
   .dark .navbar-nav>li {
       background: #101316;
   }
   .dark .navbar-nav>li:hover {
       background: black !important;
   }
   .dark .navbar-default .navbar-nav>li>a {
       color: #e2e2e2;
       display: block;
       padding: 20px;
       text-decoration:none;
   }
   .dark .topdonator-module .data p.text {
       color: #ececec;
   }
   .dark .top-donator .data b {
       color: #ececec;   
   }
   .dark .seekcopyright {
       background: #404040;
   }
   .dark .seekrow .block .title {
       color: #ececec;
   }
   .dark .seekutils .block li a {
       color: #c5c5c5;
   }
   .dark footer .seekutils {
       background: #333333;
   }
   .dark .modal-content {
       background-color: #272727;
   }
   .dark .modal-header {
       border-bottom: 1px solid #4e4e4e;
   }
   .dark .modal-footer {
       border-top: 1px solid #4e4e4e;
   }
   
   .dark .navbar-nav>li>.dropdown-menu {
       background: #272727;
   }
   .dark .navbar-default .navbar-nav>.open>a, .dark .navbar-default .navbar-nav>.open>a:hover, .dark .navbar-default .navbar-nav>.open>a:focus {
       background: #272727; 
       color: #e2e2e2;
   }
   .sk-cube-grid {
     width: 50px;
     height: 50px;
     position: fixed;
     top: calc(50% - 25px);
     left: calc(50% - 25px);
   }
   
   .sk-cube-grid .sk-cube {
     width: 33%;
     height: 33%;
     background-color: #fff;
     float: left;
     -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
     animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
   }
   .sk-cube-grid .sk-cube1 {
     -webkit-animation-delay: 0.2s;
             animation-delay: 0.2s; }
   .sk-cube-grid .sk-cube2 {
     -webkit-animation-delay: 0.3s;
             animation-delay: 0.3s; }
   .sk-cube-grid .sk-cube3 {
     -webkit-animation-delay: 0.4s;
             animation-delay: 0.4s; }
   .sk-cube-grid .sk-cube4 {
     -webkit-animation-delay: 0.1s;
             animation-delay: 0.1s; }
   .sk-cube-grid .sk-cube5 {
     -webkit-animation-delay: 0.2s;
             animation-delay: 0.2s; }
   .sk-cube-grid .sk-cube6 {
     -webkit-animation-delay: 0.3s;
             animation-delay: 0.3s; }
   .sk-cube-grid .sk-cube7 {
     -webkit-animation-delay: 0s;
             animation-delay: 0s; }
   .sk-cube-grid .sk-cube8 {
     -webkit-animation-delay: 0.1s;
             animation-delay: 0.1s; }
   .sk-cube-grid .sk-cube9 {
     -webkit-animation-delay: 0.2s;
             animation-delay: 0.2s; }
   
   @-webkit-keyframes sk-cubeGridScaleDelay {
     0%, 70%, 100% {
       -webkit-transform: scale3D(1, 1, 1);
               transform: scale3D(1, 1, 1);
     } 35% {
       -webkit-transform: scale3D(0, 0, 1);
               transform: scale3D(0, 0, 1); 
     }
   }
   
   @keyframes sk-cubeGridScaleDelay {
     0%, 70%, 100% {
       -webkit-transform: scale3D(1, 1, 1);
               transform: scale3D(1, 1, 1);
     } 35% {
       -webkit-transform: scale3D(0, 0, 1);
               transform: scale3D(0, 0, 1);
     } 
   }
   
   @keyframes fadeOut {
    0% {
       opacity: 1;   
    }
    100% {
       opacity: 0; 
        visibility: hidden;
    }
   }
   
   #preloader {
       position: fixed;
       background: var(--main-color);
       width: 100%;
       height: 100%;
       z-index: 1000;
       transition: 1s;
   }
   
   .loaded#preloader {
       animation: fadeOut 0.8s ease-out;
       animation-fill-mode: forwards;
   }
   .dark .dropdown-menu>li>a:hover, .dark .dropdown-menu>li>a:focus {
       text-decoration: none;
       color: #ffffff;
       background-color: rgb(255,255,255,0.2);
   }
   .dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {
       text-decoration: none;
       color: #ffffff;
       background-color: rgb(0,0,0,0.2);
   }
   .dropdown-menu>li>a {
       color: #333;
   }
   .dark .dropdown-menu>li>a {
       color: #fff;
   }
   .dark .table-striped>tbody>tr:nth-of-type(odd) {
       background-color: #1b1b1b;
   }
   .dark .progress {
       background-color: #1b1b1b;
   }
   .progress {
       background-color: #efefef;
       height: 20px;
   }
   .progress-bar {
       background-color: var(--main-color);
   }
   .dark .quantity input {
       background: #272727;
       border: 0;
   }
   ::-webkit-scrollbar {
     width: 6px;
   }
   
   
   ::-webkit-scrollbar-track {
     background: var(--main-color-transparent);
   }
   
   
   ::-webkit-scrollbar-thumb {
     background: var(--main-color);
     border-radius: 4px;
   }
   
   
   ::-webkit-scrollbar-thumb:hover {
     background: var(--main-color);
   }
   @media (max-width: 450px){
       .seek-basket-reponsive {
           overflow-x: scroll;   
       }
   }
   .table-responsive {
       border: 0;
   }
   .item-wrapper img {
       margin: auto;
   }
   .dark hr {
       border-top: 1px solid #383838;
   }
   .modal-footer {
       display: flex;
   }
   .modal-currency {
       margin: auto 0px auto 0px;
   }
   .modal-buttons {
       margin-left: auto;
   }
   .dark .table-hover>tbody>tr:hover {
       background-color: rgb(0,0,0,0.1);
   }
   .panel img {
       max-width: 100%;
       height: unset!important;
   }
   #particles-header {
       position: absolute;
       width: 100%;
       height: 100%;
       z-index: -1;
       top: 0;
   }
   .dark .swal2-popup, .dark .swal2-popup .swal2-header {
       background: #272727
   }
   .dark .swal2-title {
       color: #d8d8d8;
   }
   .dark .swal2-content {
       color: #cacaca;
   }
   .fa , .fas{
       font-size: 24px;
   }
   .topbar .fa, .topbar .fas {
       font-size: 18px;
   }
   .btn-featured {
       border: 0;
       width: 100%;
       color: rgba(0, 0, 0, 0.5);
       font-weight: bold;
       padding: 12px 0;
       text-transform: initial;
   }
   .btn-featured:hover {
       border: 0;
       background: #43b04f;
       padding: 12px 0;
   }
   .featured {
       position: relative;   
   }
   .featured-badge {
       position: absolute;
       right: -10px;
       top: -10px;
       color: rgba(0, 0, 0, 0.5);
       background: var(--main-color);
       padding: 6px 16px;
       border-radius: 8px;
   }
   .payments-module {
       display: flex;
   }
   .payments-module .far {
       margin: auto;
       margin-right: auto;
       margin-right: 12px;
       font-size: 20px;
       color: #4e4e4e;
   }
   .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
       background-color: unset;
       color: var(--main-color);
   }
   .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
     color: var(--main-color);
   }
   .navbar-default .navbar-nav .open .dropdown-menu > li > a {
       color: #333;
   }
   .dark .navbar-default .navbar-nav .open .dropdown-menu > li > a {
       color: #fff;
   }
   .ranks-tables {
     display: flex;
     gap: 8px;
     /*! align-items: flex-start; */
   }
    @media (min-width: 1200px) {
       .hide-desktop {
         display: none;
       }
   }
    @media (max-width: 1200px) {
       .ranks-tables {
         display: none;
       }
   }
   .rank-card {
     background: #2f2e2e;
     position: relative;
     border-top: 6px solid var(--rank-color);
     text-align: center;
     border-radius: 4px;
     padding: 0 8px;
     margin-bottom: 20px;
     flex-basis: 50%;
     margin-top: 100px;
     flex: 1;
     padding-bottom: 20px;
   }
   .rank-card__name {
     font-size: 1.2em;
     font-weight: bold;
     color: var(--rank-color);
     margin-bottom: 0;
   }
   .rank-card__price {
     font-size: 0.8em;
     font-weight: bold;
     color: var(--rank-color);
     text-align: center;
     margin-bottom: 8px;
     display: block;
   }
   .rank-card__features {
     padding: 0;
   }
   .rank-card__features > li {
     list-style-type: none;
     padding: 8px 0;
     border-top: 2px solid #3c3939;
     font-weight: bold;
     font-size: 0.9em;
   }
   .rank-card__button {
     background: var(--primary);
     font-weight: bold;
     color: white;
     padding: 12px 24px;
     border-radius: 8px;
     width: fit-content;
     margin: auto;
     margin-bottom: -20px;
     transition: 0.1s;
     cursor: pointer;
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
   }
   .rank-card__icon {
     margin-top: -100px;
     position: relative;
   }
   .rank-card__button:hover {
     background: var(--primary-2);
   }
   
   .rank-icon__bg {
     position: absolute;
     left: 0;
     right: 0;
     width: 100%;
     top: -40px;
   }
   .rank-icon__bg > g > circle {
     fill: var(--rank-color);
   }
   .ranks-tables {
       padding:20px;
   }
   .rank-card {
       background: #faf7f705;
   }
   .section__title {
       font-weight:900;
       text-transform: uppercase;
   }
   .section__text {
       font-size:18px;
       font-weight:600;
   }
   .section__img {
       border-radius: 10px;
   }
   .section__btn {
       background:var(--tri);
       border:0;
       border-radius: 12px;
       display: block;
       font-weight: 700;
       font-size: 15px;
       line-height: 21px;
       text-decoration: none;
       color:black;
       text-transform: uppercase;
       padding:17px 30px;
       transition: all ease 0.3s;
   }
   .section__btn:hover {
       background:var(--tri-2);
       transition: all ease 0.3s;
   }
   /****************************************/
   body.dark .footer__content,body.dark .footer__copyright {
       background-color: #18181b;
   }
   body.dark .news__content,body.dark .card-body,body.dark .card,body.dark .card-header,body.dark .modal-content,body.dark .card-footer,body.dark .modal-body,body.dark .modal-header,body.dark .modal-footer {
       color:#fafafa;
       background-color: #18181b;
   }
   body.dark .section__btn,body.dark .btn-primary  {
       
       color:white;
   }
   body.dark .section__text svg {
       color:white;
   } 
   .modal-body {
       border-radius: 10px;
   }
   body.dark .btn-close  {
       
   filter: brightness(0) invert(1);
       color:white;
   }
   body.dark .form-control {
       color:white;
       background-color: #19222b2f;
       border:1px solid #1a1a1a;
   }
   body.dark .form-control::placeholder {
       color:rgba(255, 255, 255, 0.467);
   }
   body.dark .breadcrumb-item .text-dark {
       color:white !important;
   }
   body.dark .breadcrumb-item+.breadcrumb-item::before {
       color:rgba(255, 255, 255, 0.377);
   }
   body.dark .form-control:focus {
       border-color:var(--primary) !important;
   }
   body.dark #forum .forums-parent,body.dark #forum .forum-wrapper {
       color:white;
       background-color: #0b0e11;
   }
   body.dark #forum .forum-item {
       background-color: #13191f;
   }
   *::selection {
       background:rgba(255, 255, 255, 0.2);
       color: inherit;
   }
   body:not(.dark) *::selection {
       background:rgba(246, 23, 83, 0.2);
   }
   .form-check-input:focus {
       border-color: #fe8686;
       outline: 0;
       box-shadow: 0 0 0 0.25rem rgba(253, 13, 13, 0.25);
   }
   .form-check-input:checked {
       background-color: var(--primary);
       border-color: var(--primary-2);
   }
   a {
       color:var(--primary);
   }
   a:not(nav a,.storebtn,.btn,.section__btn,.game__btn,.footer a):hover {
       color:var(--primary-2);
   }
   .dropdown-menu {
       --bs-dropdown-link-active-bg: rgba(217, 217, 217, 0.38);
   }
   .dropdown-item:hover,.dropdown-item:focus {
       color: black;
   }
   .form-label {
       font-size: 18px;
       font-weight: 600;
   }
   .btn.btn-primary {
       --bs-btn-color: #000000;
       --bs-btn-bg: rgba(217, 217, 217, 0.38);
       --bs-btn-border-color: rgba(217, 217, 217, 0.38);
       --bs-btn-hover-color: #000000;
       --bs-btn-hover-bg: var(--tri-2);
       --bs-btn-hover-border-color: rgba(217, 217, 217, 0.673);
       --bs-btn-focus-shadow-rgb: 49,132,253;
       --bs-btn-active-color: #000000;
       --bs-btn-active-bg: rgba(217, 217, 217, 0.673);
       --bs-btn-active-border-color: rgba(217, 217, 217, 0.673);
       --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
       --bs-btn-disabled-color: #000000;
       --bs-btn-disabled-bg: rgba(217, 217, 217, 0.875);
       --bs-btn-disabled-border-color: rgba(217, 217, 217, 0.875);
       background: var(--tri);
       border: 0;
       border-radius: 12px;
       font-weight: 700;
       font-size: 15px;
       line-height: 21px;
       text-transform: uppercase;
       padding: 17px 30px;
       transition: all ease 0.3s;
   }
   body.dark .text-body-secondary {
       color:white !important;
   }
   .card-header {
       background-color: white;
   }
   .card {
       border:0;
   }
   .card-body,.card-header {
       padding:30px;
   }
   .card-title {
       
       font-weight:900;
       text-transform: uppercase;
   }
   .content h1:first-of-type {
       
       font-weight:900;
       text-transform: uppercase;
   }
   html > div[style] {
       display: none !important;
   }
   .join {
       font-size:18px;
       position:relative;
       background:var(--tri);
       font-weight: 500;
       padding:13px 10px;
       padding-left:30px;
       border-radius: 14px;
       margin-bottom:20px;
   }
   .join__step {
       font-weight: 900;
       font-size: 20px;
       background-color: #FFCB13;
       border-radius: 10px;
       width: 33px;
       height: 33px;
       display: flex;
       align-items: center;
       justify-content: center;
       position:absolute;
       left:-16.5px;
   }
   .join__highlight {
       font-weight: 700;
       text-decoration-line: underline;
   }
   .join__ip {
       font-weight: 700;
       font-size: 20px;
       color: #1655F6;
   }
   .join__ip-btn {
       padding:0 20px;
       background:#1655F6;
       color:white;
       font-weight: 700;
       font-size: 16px;
       border: 0;
       border-radius: 10px;
       transition: all ease 0.3s;
   }
   .join__ip-btn:hover {
       background:#1243c1;
       transition: all ease 0.3s;
   }
   .miniheader {
       position:relative;
       width: 100%;
       height: calc(40vh + 74px);
   }
   .miniheader .header__content-join {
       position:absolute;
       top:100%;
       right:50%;
       transform: translate(50%,-50%);
   }
   .content {
       position: relative;
   }
   .header__video {
       object-fit: cover;
       width: 100%;
       height: 100%;
       transform: scale(1.2);
   }
   .miniheader .header__video {
       transform: none;
   }
   .header__content {
       position:absolute;
       top:0;
       bottom:0;
       right:0;
       left:0;
       display:flex;
       align-items: center;
       justify-content: center;
       flex-direction: column;
   }
   .miniheader__content {
       position:absolute;
       top:0;
       bottom:0;
       right:0;
       left:0;
       display:flex;
       align-items: center;
       justify-content: center;
   }
   .header__content-img {
       width:600px;
       max-width: 80vw;
   }
   .header__content-join {
       align-items: center;
       position:relative;
       display:inline-flex;
       color:#FFFFFF;
       text-decoration: none;
       text-transform: uppercase;
       font-size: 16px;
       padding:10px 25px;
       border-radius: 15px;
       border:0;
       background:var(--primary);
       box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.21);
       font-weight: 900;
       text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.69);
       transition: all ease 0.3s;
   }
   .header__content-join:hover {
       background:var(--primary-2);
       transition: all ease 0.3s;
   }
   
   .header__content-online {
       display:flex;
       align-items: center;
       margin-bottom: 0;
       font-size: 14px;
       color:white;
       font-weight: 600;
       padding:3px 7px;
       border-radius: 10px;
       text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.69);
   }
   .navs {
       background:rgba(9, 9, 11, 0.72);
       backdrop-filter: blur(14px);
       -webkit-backdrop-filter: blur(14px);
       border-bottom:1px solid rgba(255, 255, 255, 0.08);
       position:absolute;
       left:0;
       right:0;
       padding:0;
       top:0;
   }
   .navbar__middle {
       flex:1;
       padding-left:70px;
   } 
   .navbar__left {
       display:flex;
       align-items: center;
   }
   .navbar__right {
       display:flex;
       align-items: center;
   }
   .navbar__left-logo {
       height:45px;
   }
   .navbar__left-logo-content {
       display:flex;
       justify-content: center;
       text-align: center;
       flex-direction: column;
   }
   .navbar__left-logo-content-img {
       width:120px; 
   }
   .navbar__left-logo-content-online {
       display:flex;
       align-items: center;
       margin-bottom: 0;
       font-size: 10px;
       color:white;
       background: rgba(0, 0, 0, 0.28);
       font-weight: 600;
       padding:3px 7px;
       border-radius: 10px;
   }
   .navbar__middle-item {
       position:relative;
       display:inline-block;
       color:#FFFFFF;
       text-decoration: none;
       font-weight:700;
       text-transform: uppercase;
       font-size: 13px;
       letter-spacing: 0.06em;
       padding:25px 0px;
       text-shadow: 0px 2px 12px rgba(0, 0, 0, 0.5);
       margin:0 15px;
   } 
   .navbar__right .navbar__middle-item {
       transform: translateY(2px);
   }
   .navbar__middle-item img {
       transform: translateY(-2px);
   }
   .navbar__middle-item::after {
       content:"";
       position:absolute;
       bottom:0;
       left:50%;
       right:50%;
       height:7px;
       background-color: var(--primary);
       border-radius: 10px;
       transition: all ease 0.3s;
   
   }
   .navbar__middle-item:hover::after {
       left:0;
       right:0;
       transition: all ease 0.3s;
   
   }
   .navbar__middle-item--active::after {
       content:"";
       position:absolute;
       bottom:0;
       left:0;
       right:0;
       height:7px;
       background-color: var(--primary);
       border-radius: 10px;
   }
   .navbar__right-item {
       position:relative;
       display:inline-block;
       color:#FFFFFF;
       text-decoration: none;
       font-weight:800;
       text-transform: uppercase;
       font-size: 16px;
       padding:25px 0px;
       text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.46);
       margin:0 15px;
       transition: all ease 0.3s;
   } 
   .navbar__right-item:hover {
       transform: scale(1.1);
       transition: all ease 0.3s;
   }
   .navbar__right .navbar__middle-item::after {
       width: 0;
   }
   .menu-end {
       right:0 !important;
       left:auto !important;
     }
   .navs .dropdown-menu {
       margin:0;
       background: var(--primary);
   }
   .navs a.dropdown-item {
       font-weight: bold;
       text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.69);
       color:white;
   }
   .navbar__middle-item.show::after {
       width:0;
       transition: all ease 0.3s;
   }
   .navs .dropdown-item:hover {
       background:var(--primary-2);
   }
   .navs a.dropdown-item i {
       transform: scale(1.2);
       margin-right:7px;
       text-shadow: 0px 2px 4px rgb(0, 0, 0);
   }
   .navs .dropdown-header {
       font-weight:bold;
       color:white;
       text-transform: uppercase;
   }
   .navs .dropdown-menu::after {
       color:var(--primary);
       display: inline-block;
       margin-left: .5em;
       vertical-align: .25em;
       content: "";
       border-bottom: .7em solid;
       border-right: .7em solid transparent;
       border-top: 0;
       border-left: .7em solid transparent;
       position:absolute;
       bottom:100%;
     }
     .navs .dropdown-menu.dropdown-menu-end::after {
       right:12px;
   }
   .storebtn {
       align-items: center;
       position:relative;
       display:inline-flex !important;
       color:#FFFFFF;
       text-decoration: none;
       font-weight:800;
       text-transform: uppercase;
       font-size: 13px;
       letter-spacing: 0.02em;
       padding:8px 14px;
       border-radius: 10px;
       margin-right:7.5px;
       background:var(--secondary);
       text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.35);
       box-shadow: 0 0 20px rgba(6, 182, 212, 0.35), 0 4px 12px rgba(0, 0, 0, 0.25);
       transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease, background 0.25s ease;
   } 
   .storebtn:hover {
       background:var(--secondary-2);
       filter: brightness(1.08);
       box-shadow: 0 0 28px rgba(6, 182, 212, 0.55), 0 8px 24px rgba(0, 0, 0, 0.3);
       transform: scale(1.03);
   }
   
   .storebtn img {
       transform:translateY(1px);
   }
   .storebtn--xl {
       padding:10px 15px;
   }
   .footer__img {
       height:90px;
       display:flex;
       align-items: center;
       justify-content: center;
   }
   .footer__content {
       background: #18181b;
   }
   .footer__title {
       font-weight: 700;
       font-size: 17px;
       text-transform: uppercase;
       color: #FFFFFF;
   }
   .footer__description {
       color: #969696;
       font-size: 14px;
   }
   .footer__copyright {
       font-weight: bold;
       font-size: 13px;
       text-transform: uppercase;
       color: #FFFFFF;
       padding-bottom:10px;
       background: #18181b;
   }
   .footer__link {
       display: flex;
       align-items: center;
       text-decoration: none;
       color: #969696;
       transition: all ease 0.3s;
   }
   .footer__link:hover {
       color: #fff;
       transition: all ease 0.3s;
   }
   .footer__ip {
       position:relative;
       padding:10px 25px;
       background-color: transparent;
       color:white;
       border: 1px dashed #969696;
       border-radius: 7px;
       transition: all ease 0.3s;
   }
   .footer__ip:hover {
       border-color:transparent;
       background-color: rgba(128, 128, 128, 0.125);
       transition: all ease 0.3s;
       transform:scale(1.05);
   }
   .footer__ip-text {
       font-weight: 700;
       font-size: 9px;
       text-transform: uppercase;
       color: #FFFFFF;
       position:absolute;
       top:100%;
       left:0;
       right:0;
   }
   .footer__copyright a {
       color: white;
   }
   .dropdown-menu {
       transform-origin: top center;
       transform: perspective(1000px) rotateX(-20deg) translateY(10px);
       transition: transform 0.25s ease, opacity 0.25s ease;
       opacity: 0;
     }
   
     .dropdown.show .dropdown-menu {
       transform: perspective(1000px) rotateX(0deg) translateY(30px);
       opacity: 1;
     }
   .sectionshop .storebtn {
       background:var(--primary);
   }
   .sectionshop .storebtn:hover {
       background:var(--primary-2);
   }
   .content {
       margin-top:80px !important;
   }
   .navbar__left-menu {
       background-color: transparent;
       border:none;
   }
   .form-control:focus {
       border-color: black;
       box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0);
     }
   .navbar-mobile {
       transform:translateX(-100%);
       position:fixed;
       top:0;
       bottom:0;
       left:0;
       width: 300px;
       background-color: var(--primary);
       box-shadow: 1px -1px 12px 0px rgba(0, 0, 0, 0.334);
       z-index: 5;
       transition: all ease 0.3s;
   }
   .navbar-mobile.active {
       transform:translateX(0%);
       transition: all ease 0.3s;
   }
   .navbar-mobile .navbar__middle-item {
       display:block;
       padding-left:36px;
       padding-right:36px;
       margin:0;
   }
   .navbar-mobile .navbar__middle-item--active {
       background-color: var(--primary-2);
   }
   .navbar-mobile .navbar__middle-item:hover {
       background-color: var(--primary-2);
   }
   .navbar-mobile .navbar__middle-item::after {
       opacity: 0;
   }
   .navbar-mobile .navbar__title {
       font-weight: bold;
       display:flex;
       justify-content: space-between;
       padding:36px;
       align-items: center;
       padding-bottom: 0;
       color:white;
   }
   .navbar-mobile .navbar__middle-item--collapse {
       display: flex !important;
       justify-content: space-between;
   }
   .navbar-mobile .navbar__middle-item--collapse[aria-expanded="true"] {
       background-color: var(--primary-2);
   }
   .navbar-mobile .collapse-menu {
       background-color: var(--primary-2);
   }
   .navbar-mobile .collapse-item {
       display:block;
       color:white;
       text-decoration: none;
       padding:10px 36px ;
       color: #FFFFFF;
       text-decoration: none;
       transform: translateY(2px);
       font-weight: 800;
       text-transform: uppercase;
       font-size: 13px;
       text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.46);
   }
   .navbar-mobile .collapse-item i {
       margin-right:5px;
   }
   .navbar-mobile .storebtn {
       display: block;
       padding:15px;
       text-align: center;
       margin:0 20px;
   }
   .navbar__title .close {
       background-color: transparent;
       color:white;
       padding:0;
       border:0;
   }
   .card,.card-body {
       border-radius: 10px;
   }
   
   .card-header {
       font-weight: bold;
       padding-bottom:0;
       border:0;
   }
   .flex-1 {
       flex:1;
   }
   .card-footer {
       background-color: white;
   }
   .nav-tabs .nav-link {
       border:0 !important;
   }
   .nav-tabs .nav-link.active {
       border:0;
   }
   .list-group-flush>.list-group-item {
       border:0;
   }
   .nav-tabs {
       border:0;
   }
   .nav-link { 
       color:black;
   }
   .social-item {
       display:flex;
       align-items: center;
       justify-content: center;
       color:black;
       padding:10px 14px;
       margin:0 10px;
       border-radius:100px;
       background:rgba(255, 255, 255, 0.51);
       backdrop-filter: blur(10px);
   }
   .social-item i {
       transform:scale(1.3);
        transition:all ease 0.3s;
   }
   .social-item:hover i {
        transform:scale(1.5);
        transition:all ease 0.3s;
   }
   .card img:not(.online-user img) {
       max-width:100%;
   }
   .bi-moon {
       display: none;
   }
   .dark .bi-brightness-high {
       display: none;
   }
   .dark .bi-moon {
       display: inline-block;
   }

   /* —— Liquid glass (style Apple / visionOS) : boutique Tebex —— */
   body.dark {
       --lg-blur: blur(28px) saturate(185%);
       --lg-surface: linear-gradient(
           155deg,
           rgba(255, 255, 255, 0.2) 0%,
           rgba(255, 255, 255, 0.06) 42%,
           rgba(255, 255, 255, 0.11) 100%
       );
       --lg-border: rgba(255, 255, 255, 0.24);
       --lg-border-hover: rgba(255, 255, 255, 0.38);
       --lg-shadow:
           0 8px 40px rgba(0, 0, 0, 0.38),
           0 2px 12px rgba(0, 0, 0, 0.22),
           inset 0 1px 0 rgba(255, 255, 255, 0.28);
       --lg-shadow-hover:
           0 20px 56px rgba(0, 0, 0, 0.5),
           0 0 0 1px rgba(139, 92, 246, 0.12),
           inset 0 1px 0 rgba(255, 255, 255, 0.38);
   }

   body.dark .site-sale-banner {
       background: linear-gradient(
           125deg,
           rgba(246, 23, 83, 0.72) 0%,
           rgba(139, 92, 246, 0.45) 50%,
           rgba(6, 182, 212, 0.4) 100%
       ) !important;
       backdrop-filter: var(--lg-blur);
       -webkit-backdrop-filter: var(--lg-blur);
       border: 1px solid rgba(255, 255, 255, 0.22);
       border-radius: 20px;
       box-shadow: var(--lg-shadow);
   }

   body.dark .site-home-categories .category {
       background: var(--lg-surface);
       backdrop-filter: var(--lg-blur);
       -webkit-backdrop-filter: var(--lg-blur);
       border: 1px solid var(--lg-border);
       border-radius: 22px;
       box-shadow: var(--lg-shadow);
       transition:
           transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
           box-shadow 0.4s ease,
           border-color 0.3s ease;
   }
   body.dark .site-home-categories .category:hover {
       transform: translateY(-3px);
       border-color: var(--lg-border-hover);
       box-shadow: var(--lg-shadow-hover);
   }

   body.dark.page-index .site-home-categories {
       gap: 20px 28px;
   }

   body.dark .site-content .category-description {
       background: var(--lg-surface);
       backdrop-filter: var(--lg-blur);
       -webkit-backdrop-filter: var(--lg-blur);
       border: 1px solid var(--lg-border);
       border-radius: 22px;
       box-shadow: var(--lg-shadow);
   }

   body.dark .site-content .no-products {
       background: var(--lg-surface);
       backdrop-filter: var(--lg-blur);
       -webkit-backdrop-filter: var(--lg-blur);
       border: 1px solid var(--lg-border);
       border-radius: 22px;
       box-shadow: var(--lg-shadow);
   }

   body.dark .store-sidebar .widget {
       background: var(--lg-surface);
       backdrop-filter: var(--lg-blur);
       -webkit-backdrop-filter: var(--lg-blur);
       border: 1px solid var(--lg-border);
       border-radius: 24px;
       box-shadow: var(--lg-shadow);
   }
   body.dark.page-index .store-sidebar .widget + .widget {
       margin-top: 20px;
   }
   body.dark .store-sidebar .widget-title {
       font-weight: 650;
       letter-spacing: -0.02em;
   }

   body.dark .site-content .store-products-images {
       gap: 28px 28px;
   }
   body.dark.page-index .site-content .store-products-images {
       gap: 32px 32px;
   }

   body.dark .site-content .store-products-images .store-product {
       position: relative;
       isolation: isolate;
       overflow: hidden;
       background: var(--lg-surface);
       backdrop-filter: var(--lg-blur);
       -webkit-backdrop-filter: var(--lg-blur);
       border: 1px solid var(--lg-border);
       border-radius: 26px;
       box-shadow: var(--lg-shadow);
       padding: 26px 24px 28px;
       transition:
           transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
           box-shadow 0.45s ease,
           border-color 0.35s ease;
   }
   body.dark .site-content .store-products-images .store-product::before {
       content: "";
       position: absolute;
       inset: 0;
       border-radius: inherit;
       background: radial-gradient(
           100% 85% at 15% -25%,
           rgba(255, 255, 255, 0.35) 0%,
           transparent 52%
       );
       pointer-events: none;
       z-index: 0;
   }
   body.dark .site-content .store-products-images .store-product > * {
       position: relative;
       z-index: 1;
   }
   body.dark .site-content .store-products-images .store-product:hover {
       transform: translateY(-6px) scale(1.015);
       border-color: var(--lg-border-hover);
       box-shadow: var(--lg-shadow-hover);
   }

   body.dark .site-content .store-products-images .store-product .image {
       border-radius: 18px;
       box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
   }

   body.dark .site-content .store-products-list .store-product {
       background: var(--lg-surface);
       backdrop-filter: var(--lg-blur);
       -webkit-backdrop-filter: var(--lg-blur);
       border: 1px solid var(--lg-border);
       border-radius: 20px;
       box-shadow: var(--lg-shadow);
       transition:
           border-color 0.3s ease,
           box-shadow 0.35s ease;
   }
   body.dark .site-content .store-products-list .store-product:hover {
       border-color: var(--lg-border-hover);
       box-shadow: var(--lg-shadow-hover);
   }

   body.dark .site-content .btn-primary,
   body.dark .site-content .btn-secondary,
   body.dark .site-content .btn-tertiary {
       border-radius: 999px;
   }
   body.dark .site-content .btn-primary {
       box-shadow: 0 6px 24px rgba(246, 23, 83, 0.38);
   }
   body.dark .site-content .btn-primary:hover,
   body.dark .site-content .btn-primary:focus {
       box-shadow: 0 10px 32px rgba(246, 23, 83, 0.48);
   }

   body.dark.page-index .site-content {
       padding-bottom: 8px;
   }

   /* Mode clair : vitrail léger sur cartes */
   body:not(.dark) .site-content .store-products-images .store-product {
       background: linear-gradient(
           165deg,
           rgba(255, 255, 255, 0.92) 0%,
           rgba(255, 255, 255, 0.72) 100%
       );
       backdrop-filter: blur(20px) saturate(160%);
       -webkit-backdrop-filter: blur(20px) saturate(160%);
       border: 1px solid rgba(0, 0, 0, 0.06);
       border-radius: 24px;
       box-shadow:
           0 8px 32px rgba(0, 0, 0, 0.08),
           inset 0 1px 0 rgba(255, 255, 255, 0.9);
   }

   /* —— Popups Tebex (fiche produit, options, etc.) : liquid glass —— */
   body.dark .popup:not(.basket-popup) {
       background: rgba(9, 9, 11, 0.52);
       backdrop-filter: blur(28px) saturate(140%);
       -webkit-backdrop-filter: blur(28px) saturate(140%);
   }

   body.dark .popup:not(.basket-popup) .popup-content {
       position: relative;
       isolation: isolate;
       overflow: hidden;
       max-width: min(800px, calc(100vw - 32px));
       padding: calc(var(--widget-padding) + 12px) var(--widget-padding) var(--widget-padding);
       background: var(--lg-surface);
       backdrop-filter: var(--lg-blur);
       -webkit-backdrop-filter: var(--lg-blur);
       border: 1px solid var(--lg-border);
       border-radius: 28px;
       box-shadow:
           var(--lg-shadow),
           0 0 0 1px rgba(255, 255, 255, 0.04) inset;
   }

   body.dark .popup:not(.basket-popup) .popup-content::after {
       content: "";
       position: absolute;
       inset: 0;
       border-radius: inherit;
       background: radial-gradient(
           90% 55% at 10% -15%,
           rgba(255, 255, 255, 0.22) 0%,
           transparent 55%
       );
       pointer-events: none;
       z-index: 0;
   }

   /* Ne pas cibler .popup-close : il est le 1er enfant dans le flux (avant le contenu) ;
      lui mettre position:relative le sortait du coin et le faisait chevaucher le titre (login). */
   body.dark .popup:not(.basket-popup) .popup-content > *:not(.popup-close) {
       position: relative;
       z-index: 1;
   }

   body.dark .popup:not(.basket-popup) .popup-close {
       position: absolute;
       top: 14px;
       right: 14px;
       left: auto;
       z-index: 10;
       width: 44px;
       height: 44px;
       border-radius: 50%;
       background-color: rgba(0, 0, 0, 0.35);
       background-image: url("https://webstore-template-assets.tebex.io/images/close.svg");
       background-position: center center;
       background-repeat: no-repeat;
       background-size: 18px;
       border: 1px solid rgba(255, 255, 255, 0.2);
       opacity: 1;
       backdrop-filter: blur(14px) saturate(150%);
       -webkit-backdrop-filter: blur(14px) saturate(150%);
       transition:
           transform 0.2s ease,
           background-color 0.2s ease,
           border-color 0.2s ease;
   }

   body.dark .popup:not(.basket-popup) .popup-close:hover {
       background-color: rgba(255, 255, 255, 0.12);
       border-color: rgba(255, 255, 255, 0.35);
       transform: scale(1.06);
   }

   body.dark .popup .store-product-full .image,
   body.dark .popup .store-product-full .image-link {
       border-radius: 20px;
   }

   body.dark .popup .store-product-full .image {
       box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
   }

   body.dark .popup .store-product-full .product-title {
       font-weight: 650;
       letter-spacing: -0.02em;
   }

   body.dark .popup .store-product-full .descr {
       color: var(--color-text-darker, #e4e4e7);
   }

   body.dark .popup .store-product-full .actions {
       margin: 0 calc(var(--widget-padding) * -1) calc(var(--widget-padding) * -1);
       padding: var(--widget-padding);
       padding-top: 20px;
       background: linear-gradient(
           180deg,
           rgba(255, 255, 255, 0.05) 0%,
           rgba(9, 9, 11, 0.55) 35%,
           rgba(9, 9, 11, 0.82) 100%
       ) !important;
       backdrop-filter: blur(22px) saturate(180%);
       -webkit-backdrop-filter: blur(22px) saturate(180%);
       border-top: 1px solid var(--lg-border);
       box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.28);
   }

   @media (width > 600px) {
       body.dark .popup .store-product-full .actions {
           padding-left: calc(180px + var(--widget-padding) * 2);
       }
   }

   body.dark .popup .btn-primary,
   body.dark .popup .btn-secondary,
   body.dark .popup .btn-tertiary {
       border-radius: 999px;
   }

   body.dark .popup .btn-primary {
       box-shadow: 0 6px 24px rgba(246, 23, 83, 0.35);
   }

   body.dark .popup .gift {
       border-radius: 14px;
   }

   body:not(.dark) .popup:not(.basket-popup) {
       background: rgba(24, 24, 27, 0.45);
       backdrop-filter: blur(24px);
       -webkit-backdrop-filter: blur(24px);
   }

   body:not(.dark) .popup:not(.basket-popup) .popup-content {
       overflow: hidden;
       border-radius: 28px;
       border: 1px solid rgba(0, 0, 0, 0.08);
       box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
       background: linear-gradient(
           165deg,
           rgba(255, 255, 255, 0.94) 0%,
           rgba(255, 255, 255, 0.82) 100%
       );
       backdrop-filter: blur(24px) saturate(160%);
       -webkit-backdrop-filter: blur(24px) saturate(160%);
   }

   /* —— Panier latéral (basket drawer) : liquid glass —— */
   body.dark .basket-popup {
       background: rgba(9, 9, 11, 0.48);
       backdrop-filter: blur(22px) saturate(135%);
       -webkit-backdrop-filter: blur(22px) saturate(135%);
   }

   body.dark .basket-popup-content {
       position: relative;
       isolation: isolate;
       overflow: hidden;
       background: var(--lg-surface);
       backdrop-filter: var(--lg-blur);
       -webkit-backdrop-filter: var(--lg-blur);
       border-left: 1px solid var(--lg-border);
       box-shadow:
           -16px 0 56px rgba(0, 0, 0, 0.42),
           inset 1px 0 0 rgba(255, 255, 255, 0.12);
   }

   body.dark .basket-popup-content::after {
       content: "";
       position: absolute;
       inset: 0;
       pointer-events: none;
       z-index: 0;
       background: radial-gradient(
           90% 45% at 100% 0%,
           rgba(255, 255, 255, 0.18) 0%,
           transparent 52%
       );
   }

   body.dark .basket-popup-content > *:not(.popup-close) {
       position: relative;
       z-index: 1;
   }

   body.dark .basket-popup .popup-close {
       position: absolute;
       top: 18px;
       right: 18px;
       left: auto;
       z-index: 20;
       width: 44px;
       height: 44px;
       border-radius: 50%;
       background-color: rgba(0, 0, 0, 0.35);
       background-image: url("https://webstore-template-assets.tebex.io/images/close.svg");
       background-position: center center;
       background-repeat: no-repeat;
       background-size: 18px;
       border: 1px solid rgba(255, 255, 255, 0.2);
       opacity: 1;
       backdrop-filter: blur(14px) saturate(150%);
       -webkit-backdrop-filter: blur(14px) saturate(150%);
       transition:
           transform 0.2s ease,
           background-color 0.2s ease,
           border-color 0.2s ease;
   }

   body.dark .basket-popup .popup-close:hover {
       background-color: rgba(255, 255, 255, 0.12);
       border-color: rgba(255, 255, 255, 0.35);
       transform: scale(1.06);
   }

   body.dark .basket .basket-header {
       padding-right: calc(var(--content-padding) + 56px);
       background: linear-gradient(
           180deg,
           rgba(255, 255, 255, 0.1) 0%,
           rgba(9, 9, 11, 0.15) 100%
       );
       backdrop-filter: blur(18px) saturate(160%);
       -webkit-backdrop-filter: blur(18px) saturate(160%);
       border-bottom: 1px solid var(--lg-border);
   }

   body.dark .basket .basket-second-header {
       background: rgba(9, 9, 11, 0.4);
       backdrop-filter: blur(14px) saturate(150%);
       -webkit-backdrop-filter: blur(14px) saturate(150%);
       border-bottom: 1px solid rgba(255, 255, 255, 0.06);
   }

   body.dark .basket .basket-item {
       background: var(--lg-surface);
       backdrop-filter: blur(22px) saturate(170%);
       -webkit-backdrop-filter: blur(22px) saturate(170%);
       border: 1px solid var(--lg-border);
       border-radius: 22px;
       box-shadow: var(--lg-shadow);
       transition:
           border-color 0.25s ease,
           box-shadow 0.25s ease,
           transform 0.25s ease;
   }

   body.dark .basket .basket-item:hover {
       border-color: var(--lg-border-hover);
       box-shadow: var(--lg-shadow-hover);
   }

   body.dark .basket .basket-items {
       gap: 16px;
   }

   body.dark .basket .basket-checkout {
       background: linear-gradient(
           180deg,
           transparent 0%,
           rgba(255, 255, 255, 0.05) 100%
       );
       backdrop-filter: blur(16px) saturate(150%);
       -webkit-backdrop-filter: blur(16px) saturate(150%);
       border-top: 1px solid var(--lg-border);
       margin-top: auto;
   }

   body.dark .basket .basket-item .remove {
       border-radius: 14px;
       background: rgba(255, 255, 255, 0.08);
       border: 1px solid rgba(255, 255, 255, 0.12);
   }

   body.dark .basket .basket-checkout .checkout,
   body.dark .basket .basket-checkout .btn-primary {
       border-radius: 999px;
   }

   body:not(.dark) .basket-popup {
       background: rgba(24, 24, 27, 0.35);
       backdrop-filter: blur(18px);
       -webkit-backdrop-filter: blur(18px);
   }

   body:not(.dark) .basket-popup-content {
       background: linear-gradient(
           165deg,
           rgba(255, 255, 255, 0.92) 0%,
           rgba(255, 255, 255, 0.78) 100%
       );
       backdrop-filter: blur(24px) saturate(160%);
       -webkit-backdrop-filter: blur(24px) saturate(160%);
       border-left: 1px solid rgba(0, 0, 0, 0.08);
       box-shadow: -12px 0 40px rgba(0, 0, 0, 0.12);
   }

   body:not(.dark) .basket-popup .popup-close {
       position: absolute;
       top: 18px;
       right: 18px;
       left: auto;
       z-index: 20;
       border-radius: 50%;
       background-color: rgba(0, 0, 0, 0.06);
       border: 1px solid rgba(0, 0, 0, 0.1);
   }

   /* —— Stepper quantité (+/−) : capsule verre + pastilles centrées —— */
   .quantity-field {
       height: auto !important;
       min-height: 44px;
       padding: 6px 10px;
       gap: 10px;
       align-items: center;
       justify-content: center;
       flex-wrap: nowrap;
       border-radius: 9999px !important;
       box-sizing: border-box;
   }

   .quantity-field .adjust.decrease,
   .quantity-field .adjust.increase {
       margin-left: 0 !important;
       margin-right: 0 !important;
   }

   .quantity-field .adjust,
   .quantity-field .adjust.btn-tertiary {
       display: flex !important;
       align-items: center;
       justify-content: center;
       width: 36px !important;
       height: 36px !important;
       min-width: 36px !important;
       max-width: 36px !important;
       padding: 0 !important;
       line-height: 0 !important;
       font-size: 0 !important;
       flex-shrink: 0;
       align-self: center;
       border: none;
       border-radius: 50%;
       color: transparent !important;
       background: linear-gradient(
           165deg,
           #4fe8ff 0%,
           #24bbeb 48%,
           #1599c7 100%
       ) !important;
       box-shadow:
           0 1px 0 rgba(255, 255, 255, 0.38) inset,
           0 4px 16px rgba(6, 182, 212, 0.42);
       transition:
           transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
           filter 0.18s ease,
           box-shadow 0.18s ease;
   }

   .quantity-field .adjust:hover,
   .quantity-field .adjust.btn-tertiary:hover,
   .quantity-field .adjust:focus,
   .quantity-field .adjust.btn-tertiary:focus {
       filter: brightness(1.07);
       transform: scale(1.05);
       color: transparent !important;
       background: linear-gradient(
           165deg,
           #5eecff 0%,
           #2ec4f5 50%,
           #1aa8d4 100%
       ) !important;
       box-shadow:
           0 1px 0 rgba(255, 255, 255, 0.45) inset,
           0 6px 20px rgba(6, 182, 212, 0.55);
   }

   .quantity-field .adjust:active,
   .quantity-field .adjust.btn-tertiary:active {
       transform: scale(0.94);
       filter: brightness(0.95);
   }

   .quantity-field .adjust::before {
       background-color: #fff;
       mask-size: 12px;
   }

   body.dark .quantity-field {
       background: rgba(255, 255, 255, 0.07) !important;
       border: 1px solid rgba(255, 255, 255, 0.22) !important;
       backdrop-filter: blur(22px) saturate(170%);
       -webkit-backdrop-filter: blur(22px) saturate(170%);
       box-shadow:
           0 4px 20px rgba(0, 0, 0, 0.25),
           inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
   }

   body:not(.dark) .quantity-field {
       background: rgba(255, 255, 255, 0.92) !important;
       border: 1px solid rgba(0, 0, 0, 0.1) !important;
       box-shadow:
           0 2px 14px rgba(0, 0, 0, 0.07),
           inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
   }

   .quantity-field .open-basket {
       font-size: 14px;
       font-weight: 600;
       letter-spacing: 0.01em;
       padding: 0 4px;
   }

   .basket .basket-item .quantity-field {
       min-height: 44px;
   }

   @media (prefers-reduced-motion: reduce) {
       .logo img {
           animation: none;
       }
       .announce .bar {
           animation: none;
       }
       .sk-cube-grid .sk-cube {
           animation: none !important;
       }
   }