/* ZagaSMM landing page polish (template: basic) */
:root{
  --zaga-brand: hsl(var(--base-h) var(--base-s) var(--base-l));
  --zaga-brand-2: hsl(var(--base-two-h) var(--base-two-s) var(--base-two-l));
  --zaga-brand-soft: color-mix(in srgb, var(--zaga-brand) 18%, transparent);
  --zaga-bg: #f6f7fb;
  --zaga-text: #0f172a;
  --zaga-muted: #5b6475;
}

.theme-dark{
  /* Override template-level variables so existing CSS flips too */
  --white: 222 47% 11%;
  --black: 0 0% 100%;
  --heading-color: var(--black);
  --body-color: 220 13% 80%;
  --border-color-dashboard: 0, 0%, 20%;
  --border-color: hsl(0, 0%, 20%);
  --section-bg: hsl(222, 47%, 9%);

  --zaga-bg: #0b1220;
  --zaga-text: #e5e7eb;
  --zaga-muted: rgba(229, 231, 235, 0.72);
}

html.theme-dark body{
  background: var(--zaga-bg);
  color: var(--zaga-text);
}

/* Premium loader (Orbit Multi) */
#overlayer{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  background:
    radial-gradient(900px circle at 16% 18%, color-mix(in srgb, var(--zaga-brand) 18%, transparent), transparent 58%),
    radial-gradient(900px circle at 86% 14%, color-mix(in srgb, var(--zaga-brand-2) 14%, transparent), transparent 58%),
    rgba(246, 247, 251, 0.92);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}
html.theme-dark #overlayer{
  background:
    radial-gradient(900px circle at 16% 18%, color-mix(in srgb, var(--zaga-brand) 16%, transparent), transparent 58%),
    radial-gradient(900px circle at 86% 14%, color-mix(in srgb, var(--zaga-brand-2) 12%, transparent), transparent 58%),
    rgba(11, 18, 32, 0.92);
}
#overlayer .loader{
  height: auto;
  width: auto;
  background: transparent;
  position: static;
  top: auto;
  border: 0;
  animation: none;
  -webkit-animation: none;
  display: grid;
  place-items: center;
  z-index: auto;
}
#overlayer .orbit-multi{
  width: 60px;
  height: 60px;
  position: relative;
  filter: drop-shadow(0 18px 50px rgba(2, 6, 23, 0.18));
}
#overlayer .orbit-multi span{
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-top-color: var(--zaga-brand);
  border-radius: 50%;
  animation: orbitMultiSpin 1.4s linear infinite;
}
#overlayer .orbit-multi span:nth-child(2){
  border-top-color: var(--zaga-brand-2);
  animation-direction: reverse;
  animation-duration: 1.9s;
}
#overlayer .orbit-multi span:nth-child(3){
  inset: 8px;
  border-top-color: color-mix(in srgb, var(--zaga-brand) 60%, var(--zaga-brand-2) 40%);
  animation-duration: 2.4s;
}

.loader-md{ width: 64px !important; height: 64px !important; }

@keyframes orbitMultiSpin{ to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce){
  #overlayer .orbit-multi span{ animation: none !important; }
}

html.theme-dark .section-bg{
  background: transparent !important;
}

html.theme-dark .card,
html.theme-dark .custom--card,
html.theme-dark .accordion-item,
html.theme-dark .modal-content,
html.theme-dark .dropdown-menu{
  background: rgba(15, 23, 42, 0.88) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: var(--zaga-text);
}

html.theme-dark .table,
html.theme-dark .table thead th,
html.theme-dark .table tbody td{
  color: var(--zaga-text);
  border-color: rgba(255, 255, 255, 0.10);
}

html.theme-dark .form-control,
html.theme-dark .input-group-text,
html.theme-dark .form-select,
html.theme-dark textarea{
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: var(--zaga-text) !important;
}
html.theme-dark .form-control::placeholder{
  color: rgba(229, 231, 235, 0.55);
}

/* Select2 (dropdowns) */
html.theme-dark .select2-container--default .select2-selection--single{
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  height: 44px;
}
html.theme-dark .select2-container--default .select2-selection--single .select2-selection__rendered{
  color: rgba(229, 231, 235, 0.92) !important;
  line-height: 42px;
}
html.theme-dark .select2-container--default .select2-selection--single .select2-selection__placeholder{
  color: rgba(229, 231, 235, 0.60) !important;
}
html.theme-dark .select2-container--default .select2-selection--single .select2-selection__arrow b{
  border-color: rgba(229, 231, 235, 0.65) transparent transparent transparent !important;
}
html.theme-dark .select2-dropdown{
  background: rgba(15, 23, 42, 0.96) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}
html.theme-dark .select2-results__option{
  color: rgba(229, 231, 235, 0.92) !important;
}
html.theme-dark .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{
  background: color-mix(in srgb, var(--zaga-brand) 20%, rgba(255,255,255,0.06)) !important;
  color: #fff !important;
}
html.theme-dark .select2-container--default .select2-results__option--selected{
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}
html.theme-dark .select2-search--dropdown .select2-search__field{
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: rgba(229, 231, 235, 0.92) !important;
}

html.theme-dark h1,
html.theme-dark h2,
html.theme-dark h3,
html.theme-dark h4,
html.theme-dark h5,
html.theme-dark h6,
html.theme-dark .title,
html.theme-dark .section-heading__title,
html.theme-dark .dashboard-section-title{
  color: #fff !important;
}
html.theme-dark p,
html.theme-dark span,
html.theme-dark small,
html.theme-dark label{
  color: rgba(229, 231, 235, 0.82);
}

/* Deposit / funding (dark mode + mobile) */
html.theme-dark .payment-system-list,
html.theme-dark .payment-item__btn{
  background: rgba(15, 23, 42, 0.72) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}
html.theme-dark .payment-item{
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}
html.theme-dark .payment-item:first-child{
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}
html.theme-dark .payment-item__name,
html.theme-dark .payment-item__btn-text{
  color: rgba(229, 231, 235, 0.90) !important;
}
html.theme-dark .payment-item__check{
  border-color: color-mix(in srgb, var(--zaga-brand) 80%, rgba(255,255,255,0.20)) !important;
}
html.theme-dark .deposit-info__input-group,
html.theme-dark .deposit-info__input-select{
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}
html.theme-dark .custom--card .bg-light{
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}
/* Fix vertical scroll list (prevents horizontal overflow on small screens) */
.payment-system-list.is-scrollable{
  overflow-y: auto;
  overflow-x: hidden;
}
@media (max-width: 575.98px){
  .payment-system-list{
    --thumb-width: 76px;
    --thumb-height: 32px;
  }
  .payment-item{
    padding: 10px 12px;
  }
  .deposit-info__title,
  .deposit-info__input{
    max-width: 100%;
    text-align: left;
  }
  .deposit-info__input-group .form--control{
    text-align: left;
  }
}

/* Keep gateway radios accessible for form submit, but visually hide */
.payment-item__radio{
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Header */
html.theme-dark .header-section .header-bottom-area{
  background: rgba(15, 23, 42, 0.70) !important;
  border-bottom-color: rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}
html.theme-dark .header-section .main-menu li a{
  color: rgba(229, 231, 235, 0.88) !important;
}
html.theme-dark .header-section .main-menu li a:hover,
html.theme-dark .header-section .main-menu li a.active{
  color: #fff !important;
}
html.theme-dark .navbar-toggler{
  color: rgba(255,255,255,0.92);
  border-color: rgba(255,255,255,0.18);
}

/* Dashboard + sidebar */
html.theme-dark .dashboard{
  background: rgba(15, 23, 42, 0.88) !important;
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
}
html.theme-dark .dashboard .sidebar-menu{
  background: rgba(15, 23, 42, 0.94) !important;
  border-right-color: rgba(255, 255, 255, 0.10) !important;
}
html.theme-dark .dashboard .sidebar-menu-list__link{
  color: rgba(229, 231, 235, 0.88) !important;
}
html.theme-dark .dashboard .sidebar-menu-list__item.has-dropdown > a:after{
  color: rgba(229, 231, 235, 0.55) !important;
}
html.theme-dark .dashboard .sidebar-menu-list__link:hover{
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: #fff !important;
}
html.theme-dark .dashboard .sidebar-menu-list__item.active > a,
html.theme-dark .dashboard .sidebar-menu-list__item.has-dropdown > a.side-menu--open{
  background-color: color-mix(in srgb, var(--zaga-brand) 18%, rgba(255,255,255,0.04)) !important;
  color: #fff !important;
}
html.theme-dark .dashboard .sidebar-menu-list__item.active > a::before,
html.theme-dark .dashboard .sidebar-menu-list__link:hover::before{
  background: var(--zaga-brand) !important;
}
html.theme-dark .dashboard .sidebar-submenu-list__link,
html.theme-dark .dashboard .sidebar-submenu-list__item a{
  color: rgba(229, 231, 235, 0.82) !important;
}
html.theme-dark .dashboard .sidebar-submenu-list__item a:hover{
  color: #fff !important;
}

html.theme-dark .dashboard .dashboard-body{
  color: var(--zaga-text);
}
html.theme-dark .dashboard .dashboard-widget{
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}
html.theme-dark .dashboard .dashboard-widget__text{
  color: rgba(229, 231, 235, 0.70) !important;
}
html.theme-dark .dashboard .dashboard-widget__number{
  color: #fff !important;
}
html.theme-dark .dashboard .dashboard-widget__icon{
  background-color: rgba(255, 255, 255, 0.06) !important;
}

/* Balance card */
html.theme-dark .zaga-balance-card{
  background: linear-gradient(135deg, color-mix(in srgb, var(--zaga-brand) 18%, transparent), rgba(15, 23, 42, 0.92)) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}
html.theme-dark .zaga-balance-card__label{
  color: rgba(229, 231, 235, 0.70) !important;
}
html.theme-dark .zaga-balance-card__amount{
  color: #fff !important;
}
html.theme-dark .zaga-balance-card__toggle{
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}
html.theme-dark .zaga-balance-card__account{
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}
html.theme-dark .zaga-balance-card__account-meta{
  color: rgba(229, 231, 235, 0.78) !important;
}

/* Header toggle button */
.zaga-theme-toggle{
  height: 40px;
  width: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.90);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.zaga-theme-toggle:hover{
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.14);
  border-color: color-mix(in srgb, var(--zaga-brand) 35%, rgba(255,255,255,0.20));
}
.zaga-theme-toggle i{ font-size: 20px; color: #fff; }
html:not(.theme-dark) .zaga-theme-toggle{
  border-color: rgba(15, 23, 42, 0.10);
  background: rgba(255, 255, 255, 0.75);
}
html:not(.theme-dark) .zaga-theme-toggle i{ color: color-mix(in srgb, var(--zaga-brand) 88%, #000 12%); }

.zaga-home{
  background: var(--zaga-bg);
  color: var(--zaga-text);
}

body.zaga-landing--basic{
  background: var(--zaga-bg);
}

.zaga-home--basic{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.zaga-home--basic h1,
.zaga-home--basic h2,
.zaga-home--basic h3{
  letter-spacing: -0.02em;
}

/* Banner polish */
.zaga-home--basic .banner-section{
  padding-top: clamp(36px, 5vw, 70px);
  padding-bottom: clamp(24px, 4vw, 54px);
}
.zaga-home--basic .banner-element img{
  filter: drop-shadow(0 30px 60px rgba(2, 6, 23, 0.18));
}

/* Sticky glass header */
.zaga-landing--basic .header-section{
  position: sticky;
  top: 0;
  z-index: 1000;
}
.zaga-landing--basic .header-section .header-bottom-area{
  background: rgba(255, 255, 255, 0.70);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.zaga-landing--basic .header-section .main-menu li a{
  color: rgba(15, 23, 42, 0.78);
  font-weight: 500;
}
.zaga-landing--basic .header-section .main-menu li a:hover,
.zaga-landing--basic .header-section .main-menu li a.active{
  color: var(--zaga-brand);
}

/* Hero */
.zaga-home--basic .zaga-hero{
  position: relative;
  padding: clamp(42px, 5vw, 70px) 0;
  background:
    radial-gradient(900px circle at 12% 20%, color-mix(in srgb, var(--zaga-brand) 22%, transparent), transparent 55%),
    radial-gradient(900px circle at 86% 10%, color-mix(in srgb, var(--zaga-brand-2) 18%, transparent), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, var(--zaga-bg) 100%);
}

.zaga-home--basic .banner-content .title{
  font-size: clamp(2.1rem, 2.7vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}

.zaga-home--basic .banner-content p{
  color: var(--zaga-muted);
  font-size: 1.05rem;
  max-width: 54ch;
}

.zaga-home--basic .zaga-hero__badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--zaga-brand-soft);
  border: 1px solid color-mix(in srgb, var(--zaga-brand) 28%, transparent);
  font-weight: 700;
  margin-bottom: 14px;
}
.zaga-home--basic .zaga-hero__badge i{
  color: var(--zaga-brand);
  font-size: 18px;
}

.zaga-home--basic .zaga-hero__cta{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.zaga-home--basic .zaga-hero__primary.btn--base,
.zaga-home--basic .zaga-hero__primary.btn.btn--base{
  border-radius: 14px;
  padding: 12px 18px;
  box-shadow: 0 12px 28px rgba(2, 6, 23, 0.14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.zaga-home--basic .btn-outline--base{
  border-radius: 14px;
  padding: 12px 18px;
  border: 1px solid color-mix(in srgb, var(--zaga-brand) 35%, transparent);
  background: rgba(255,255,255,0.75);
  color: var(--zaga-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.zaga-home--basic .zaga-hero__trust{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 18px;
}
.zaga-home--basic .zaga-hero__trust-item{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(15, 23, 42, 0.08);
  color: rgba(15, 23, 42, 0.78);
  font-size: 0.92rem;
}
.zaga-home--basic .zaga-hero__trust-item i{
  color: var(--zaga-brand);
  font-size: 18px;
}

/* Section spacing + cards */
.zaga-home--basic .ptb-80{
  padding-top: clamp(40px, 5vw, 80px) !important;
  padding-bottom: clamp(40px, 5vw, 80px) !important;
}

.zaga-home--basic .section-header .sub-title{
  color: var(--zaga-brand) !important;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.zaga-home--basic .section-header .section-title{
  letter-spacing: -0.02em;
}

.zaga-home--basic .feature-item,
.zaga-home--basic .service-item{
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255,255,255,0.90);
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.zaga-home--basic .feature-item:hover,
.zaga-home--basic .service-item:hover{
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--zaga-brand) 28%, transparent);
  box-shadow: 0 18px 44px rgba(2, 6, 23, 0.10);
}

.zaga-home--basic .feature-item .feature-icon,
.zaga-home--basic .service-item .service-icon{
  color: var(--zaga-brand) !important;
}

/* Use brand color for legacy blue accents (home only) */
.zaga-home--basic .title-border{
  border-color: color-mix(in srgb, var(--zaga-brand) 45%, transparent) !important;
}
.zaga-home--basic .title-border::after{
  background-color: var(--zaga-brand) !important;
}

.zaga-home--basic .counter-section,
.zaga-home--basic .news-section,
.zaga-home--basic .faq-section,
.zaga-home--basic .call-to-action-section{
  background-image: none !important;
  background-color: transparent !important;
}

.zaga-home--basic .counter-section .counter-item{
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255,255,255,0.90);
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.06);
  padding: 18px 14px;
}
.zaga-home--basic .counter-section .counter-item .counter-icon{
  background-color: color-mix(in srgb, var(--zaga-brand) 16%, transparent) !important;
  color: var(--zaga-brand) !important;
}

/* Action CTA */
.zaga-home--basic .action-section{
  border-radius: 22px;
  overflow: hidden;
  position: relative;
}
.zaga-home--basic .action-section::before{
  opacity: 1 !important;
  visibility: visible !important;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--zaga-brand) 55%, #000 45%) 0%,
    color-mix(in srgb, var(--zaga-brand-2) 40%, #000 60%) 100%) !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
}
.zaga-home--basic .action-section::after{ display: none !important; }
.zaga-home--basic .action-section .action-content{
  position: relative;
  z-index: 2;
}
.zaga-home--basic .action-section .action-content .title{
  font-size: clamp(1.6rem, 2.2vw, 2.4rem);
  letter-spacing: -0.02em;
}
.zaga-home--basic .btn--base-active{
  border-radius: 14px;
  padding: 12px 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 12px 28px rgba(2, 6, 23, 0.18);
}

/* Subscribe */
.zaga-home--basic .call-to-action-section .call-to-action-content .call-to-action-form input{
  border-radius: 14px !important;
}
.zaga-home--basic .call-to-action-section .call-to-action-content .call-to-action-form .input-group{
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.06);
}
.zaga-home--basic .call-to-action-section .call-to-action-content .call-to-action-form .submit-btn{
  background-color: var(--zaga-brand) !important;
  border-color: var(--zaga-brand) !important;
  border-radius: 12px !important;
}
.zaga-home--basic .call-to-action-section .call-to-action-content .call-to-action-form .submit-btn:hover{
  filter: brightness(0.98);
}

/* FAQ */
.zaga-home--basic .faq-wrapper .faq-item .faq-title{
  border-radius: 16px !important;
  border-color: rgba(15, 23, 42, 0.10) !important;
  background-color: rgba(255,255,255,0.86) !important;
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.06);
}
.zaga-home--basic .faq-wrapper .faq-item.open .faq-title{
  background: var(--zaga-brand) !important;
  border-color: var(--zaga-brand) !important;
}
.zaga-home--basic .faq-wrapper .right-icon::before,
.zaga-home--basic .faq-wrapper .right-icon::after{
  background: color-mix(in srgb, var(--zaga-brand) 55%, #0f172a 45%) !important;
}
.zaga-home--basic .faq-wrapper .faq-item.open .right-icon::before,
.zaga-home--basic .faq-wrapper .faq-item.open .right-icon::after{
  background: #ffffff !important;
}
.zaga-home--basic .faq-thumb img,
.zaga-home--basic .about-thumb img,
.zaga-home--basic .about-thumb-two img{
  border-radius: 22px;
  box-shadow: 0 25px 60px rgba(2, 6, 23, 0.14);
}

/* Blog */
.zaga-home--basic .news-item .news-thumb{
  border-radius: 18px !important;
}
.zaga-home--basic .news-item .news-content .title a:hover{
  color: var(--zaga-brand) !important;
}
.zaga-home--basic .custom-btn:hover{
  color: var(--zaga-brand) !important;
}

/* Testimonials + blog cards */
.zaga-home--basic .client-section{
  position: relative;
}
.zaga-home--basic .client-section::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  pointer-events: none;
}
.zaga-home--basic .client-section > .container{
  position: relative;
  z-index: 1;
}

.zaga-home--basic .client-item,
.zaga-home--basic .news-item{
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.08);
  overflow: hidden;
}

.zaga-home--basic .news-thumb img{
  width: 100%;
  height: auto;
  display: block;
}

.zaga-home--basic .news-item .title a:hover{
  color: var(--zaga-brand);
}

@media (max-width: 575px){
  .zaga-home--basic .zaga-hero__cta .btn{ width: 100%; justify-content: center; }
  .zaga-home--basic .zaga-hero__trust-item{ width: 100%; justify-content: center; }
}

/* iOS-style bottom navigation (auth users) */
.has-bottom-nav{
  padding-bottom: calc(86px + env(safe-area-inset-bottom));
}

.zaga-bottom-nav{
  position: fixed;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 1100;
  width: min(520px, calc(100% - 24px));
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  padding: 10px 10px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.06)),
    rgba(10, 10, 10, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 18px 60px rgba(2, 6, 23, 0.30);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
}

/* Light mode: make bottom nav clearly visible */
html:not(.theme-dark) .zaga-bottom-nav{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.78));
  border-color: rgba(15, 23, 42, 0.10);
  box-shadow: 0 18px 60px rgba(2, 6, 23, 0.16);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}

.zaga-bottom-nav__item{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 6px;
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.90);
  text-decoration: none;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.theme-dark .zaga-bottom-nav__item{ color: rgba(255, 255, 255, 0.90); }
html:not(.theme-dark) .zaga-bottom-nav__item{
  color: rgba(15, 23, 42, 0.72);
}
.zaga-bottom-nav__item i{
  font-size: 22px;
  line-height: 1;
}
.theme-dark .zaga-bottom-nav__item i{ color: rgba(255,255,255,0.92); }
html:not(.theme-dark) .zaga-bottom-nav__item i{ color: rgba(15, 23, 42, 0.70); }
.zaga-bottom-nav__item span{
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.zaga-bottom-nav__item:hover{
  color: #fff;
  transform: translateY(-1px);
}
html:not(.theme-dark) .zaga-bottom-nav__item:hover{
  color: rgba(15, 23, 42, 0.92);
}
.zaga-bottom-nav__item.is-active{
  background: color-mix(in srgb, var(--zaga-brand) 22%, rgba(255,255,255,0.10));
  color: #fff;
}
.zaga-bottom-nav__item.is-active i{
  color: var(--zaga-brand);
}
.zaga-bottom-nav__item.is-active span{
  color: #fff;
}
.theme-dark .zaga-bottom-nav__item.is-active span{ color: #fff; }
html:not(.theme-dark) .zaga-bottom-nav__item.is-active{
  background: color-mix(in srgb, var(--zaga-brand) 12%, rgba(15, 23, 42, 0.06));
  color: rgba(15, 23, 42, 0.92);
}
html:not(.theme-dark) .zaga-bottom-nav__item.is-active i{
  color: var(--zaga-brand);
}
html:not(.theme-dark) .zaga-bottom-nav__item.is-active span{
  color: rgba(15, 23, 42, 0.92);
}
.zaga-bottom-nav__item:hover i{
  color: color-mix(in srgb, var(--zaga-brand) 85%, #fff 15%);
}
.zaga-bottom-nav__item:hover{
  background: rgba(255, 255, 255, 0.10);
}
html:not(.theme-dark) .zaga-bottom-nav__item:hover{
  background: rgba(15, 23, 42, 0.06);
}
html:not(.theme-dark) .zaga-bottom-nav__item:hover i{
  color: color-mix(in srgb, var(--zaga-brand) 88%, rgba(15,23,42,1) 12%);
}

@media (min-width: 992px){
  .has-bottom-nav{ padding-bottom: 0; }
  .zaga-bottom-nav{ display: none; }
}