/* =========================================================
   Ruwad Al-Sham responsive stability patch
   Fixes navbar wrapping, mobile hero, stats, galleries, videos,
   cards, tables and admin dashboard on tablets/phones.
   ========================================================= */
html,body{max-width:100%;overflow-x:hidden}
img,video,iframe{max-width:100%;height:auto}
.container{width:min(var(--container),calc(100% - 32px));max-width:100%}

/* Header: collapse earlier because nav has many links */
@media (max-width:1320px){
  .navbar{height:auto;min-height:78px;padding:8px 0;gap:12px;position:relative}
  .brand{max-width:330px;min-width:0;flex:1 1 auto}
  .brand span{min-width:0}
  .brand b,.brand span span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .menu-toggle{display:grid;place-items:center;flex:0 0 44px;order:2}
  .actions{order:3;flex:0 0 auto;gap:8px}
  .actions .btn{padding:10px 13px;font-size:13px}
  .navlinks{
    position:fixed;right:16px;left:16px;top:92px;z-index:999;
    display:none;flex-direction:column;align-items:stretch;gap:6px;
    max-height:calc(100vh - 115px);overflow:auto;
    padding:14px;background:rgba(5,5,5,.97);backdrop-filter:blur(14px);
    border:1px solid rgba(216,154,43,.32);border-radius:22px;box-shadow:0 28px 90px rgba(0,0,0,.65)
  }
  .navlinks.open{display:flex}
  .navlinks li{display:block;width:100%}
  .navlinks a{width:100%;padding:12px 14px;border-radius:14px;font-size:15px;background:rgba(255,255,255,.02)}
  .navlinks a.active:after,.navlinks a:hover:after{display:none}
}

@media (max-width:860px){
  .topbar{display:none}
  .header{position:sticky;top:0}
  .navlinks{top:82px}
  .brand img{width:48px;height:48px;border-radius:12px}
  .brand b{font-size:16px}.brand span span{font-size:11px}
  .actions .register-btn{display:none!important}
  .actions .btn-ghost{display:inline-flex!important}
  .actions .btn{padding:9px 10px;font-size:12px;white-space:nowrap}
}

@media (max-width:560px){
  .container{width:calc(100% - 22px)}
  .navbar{display:grid;grid-template-columns:1fr 44px;align-items:center;gap:8px}
  .brand{grid-column:1/2;max-width:100%}
  .menu-toggle{grid-column:2/3;grid-row:1/2}
  .actions{grid-column:1/3;order:4;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px;min-width:0}
  .actions .btn{width:100%;padding:10px 8px;font-size:12px}
  .actions .account-btn{grid-column:1/2}
  .navlinks{top:125px;right:11px;left:11px;max-height:calc(100vh - 145px)}
}

/* Hero and homepage */
.hero{background-size:cover!important;background-position:center!important}
@media (max-width:1100px){
  .hero{min-height:auto;text-align:center}
  .hero-grid{grid-template-columns:1fr!important;gap:26px;padding:62px 0 54px}
  .lead{margin-inline:auto}
  .hero-actions{justify-content:center}
  .hero-card{margin-inline:auto;width:min(520px,100%)}
  .hero-kpis{max-width:none}
  .stats-strip{max-width:none}
}
@media (max-width:720px){
  .hero-grid{padding:42px 0 40px}
  h1{font-size:clamp(34px,11vw,54px)}
  .lead{font-size:16px;line-height:1.85}
  .hero-actions{display:grid;grid-template-columns:1fr;gap:10px}
  .hero-actions .btn{width:100%}
  .hero-card{padding:14px;border-radius:22px}
  .hero-card img{max-height:330px;object-fit:contain;background:#050505}
  .hero-badge{right:18px;bottom:18px;padding:10px 12px;border-radius:14px}
  .hero-kpis{grid-template-columns:1fr!important;gap:10px;margin-top:20px}
  .kpi{padding:15px}
}

/* Animated stats must not break mobile */
.stats-strip{width:100%;min-width:0}
.home-stat{min-width:0;transition:.25s}
.home-stat b{word-break:normal;white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:900px){
  .stats-strip{grid-template-columns:repeat(2,1fr)!important;border-radius:22px}
  .home-stat:nth-child(2):after{display:none!important}
}
@media (max-width:480px){
  .stats-strip{grid-template-columns:1fr!important;margin:22px 0 8px;border-radius:18px}
  .home-stat{padding:16px 12px}.home-stat:after{display:none!important}
  .home-stat b{font-size:34px}.home-stat span:last-child{font-size:12px}
}

/* Sections and grids */
@media (max-width:980px){
  .grid-2,.grid-3,.grid-4,.product-grid,.steps,.track-steps,.form-row,.split{grid-template-columns:1fr!important}
  .section-title{display:block;text-align:center}
  .section-title p{margin-inline:auto}
  .media-frame.tall img{max-height:460px}
  .cta{display:block;text-align:center;padding:30px;border-radius:24px}
  .cta .btn{margin-top:18px}
}
@media (max-width:640px){
  .section{padding:52px 0}.section-sm{padding:36px 0}
  .card{padding:18px;border-radius:18px}.image-card{padding:0}
  .image-card img,.product-card img,.blog-card img{height:220px}
  .product-card .content,.image-card .body{padding:18px}
  .product-card h3,.card h3{font-size:20px}
  .specs{grid-template-columns:1fr}
  .table{min-width:680px}
}

/* Gallery and videos */
@media (max-width:980px){.masonry-gallery,.masonry-gallery.compact{columns:2 240px}}
@media (max-width:560px){.masonry-gallery,.masonry-gallery.compact{columns:1}.gallery-item img{min-height:180px}.video-card{padding:14px}.video-box{border-radius:14px}}

/* Auth/account pages */
.auth-callout{min-width:0}.auth-callout .hero-actions{margin-top:0}
@media (max-width:720px){
  .auth-callout{text-align:center}.auth-callout .hero-actions{display:grid;grid-template-columns:1fr;margin-top:14px}
  .login-box{width:100%}
}

/* Floating button */
@media (max-width:520px){.floating-whatsapp{left:12px;bottom:12px}.floating-whatsapp a{width:50px;height:50px;font-size:24px}}

/* Admin dashboard responsive improvements */
@media (max-width:1000px){
  .admin{grid-template-columns:1fr!important}
  .sidebar{position:relative!important;height:auto!important;border-left:0!important;border-bottom:1px solid var(--line);padding:14px!important}
  .nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .nav a,.nav button{margin:0!important;justify-content:center;text-align:center;font-size:13px;padding:10px 8px!important}
  .main{padding:14px!important}.top{align-items:flex-start;flex-direction:column}.top h1{font-size:24px!important}
  .stats,.form-grid,.grid-2{grid-template-columns:1fr!important}
}
@media (max-width:560px){
  .nav{grid-template-columns:1fr}
  .sidebar .brand{justify-content:center;text-align:center}
  .table-wrap{border-radius:14px;overflow:auto;-webkit-overflow-scrolling:touch}
  .table{min-width:720px}
  .btn{padding:10px 12px;font-size:13px}
}

/* =========================================================
   Desktop header fit fix after adding SVG icons
   Keeps all menu items visible instead of overflowing/cutting.
   ========================================================= */
@media (min-width:1321px){
  .header{overflow:visible}
  .navbar{
    height:auto;
    min-height:94px;
    padding:9px 0 11px;
    display:grid;
    grid-template-columns:minmax(210px,305px) minmax(0,1fr) auto;
    grid-template-areas:"brand nav actions";
    align-items:center;
    column-gap:12px;
    row-gap:8px;
  }
  .brand{grid-area:brand;min-width:0;max-width:305px}
  .brand img{width:52px;height:52px;border-radius:14px}
  .brand b{font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .brand span{min-width:0}
  .brand span span{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .navlinks{
    grid-area:nav;
    min-width:0;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:5px 3px;
    overflow:visible;
  }
  .navlinks li{flex:0 0 auto}
  .navlinks a{
    display:inline-flex!important;
    align-items:center;
    gap:4px;
    padding:8px 7px;
    border-radius:999px;
    font-size:13px;
    line-height:1.15;
    white-space:nowrap;
  }
  .site-nav-icon{width:14px;height:14px;margin-inline-end:2px}
  .actions{
    grid-area:actions;
    min-width:0;
    display:flex;
    flex-wrap:nowrap;
    justify-content:flex-end;
    gap:7px;
  }
  .actions .btn{padding:10px 12px;font-size:13px;white-space:nowrap}
  .actions .btn-icon{width:16px;height:16px}
}

/* If the screen is desktop but not wide enough for 13 menu links,
   move navigation to a clean second row instead of cutting it. */
@media (min-width:1321px) and (max-width:1680px){
  .navbar{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "brand actions"
      "nav nav";
    min-height:128px;
  }
  .navlinks{
    width:100%;
    padding-top:8px;
    border-top:1px solid rgba(216,154,43,.14);
    justify-content:center;
  }
  .navlinks a{padding:8px 9px;font-size:13px}
}

/* Very wide screens keep a compact premium single-row feel. */
@media (min-width:1900px){
  .navbar{grid-template-columns:minmax(240px,340px) minmax(0,1fr) auto;min-height:86px}
  .navlinks{flex-wrap:nowrap;justify-content:center;gap:4px}
  .navlinks a{padding:9px 8px;font-size:13px}
  .brand{max-width:340px}
}


/* =========================================================
   Clean compact professional header fix
   Groups secondary links into two premium dropdowns so icons do
   not crush the logo/buttons on desktop.
   ========================================================= */
@media (min-width:1321px){
  .header{overflow:visible!important}
  .navbar{
    height:84px!important;
    min-height:84px!important;
    padding:0!important;
    display:grid!important;
    grid-template-columns:minmax(230px,330px) minmax(0,1fr) auto!important;
    grid-template-areas:"brand nav actions"!important;
    align-items:center!important;
    column-gap:16px!important;
  }
  .brand{grid-area:brand!important;max-width:330px!important;min-width:0!important;justify-self:start!important}
  .brand img{width:56px!important;height:56px!important;border-radius:15px!important}
  .brand b{font-size:19px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .brand span{min-width:0!important}
  .brand span span{font-size:11px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .navlinks-compact{
    grid-area:nav!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
    min-width:0!important;
    overflow:visible!important;
  }
  .navlinks-compact>li{position:relative!important;flex:0 0 auto!important}
  .navlinks-compact a,
  .navlinks-compact .nav-more{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
    min-height:40px!important;
    padding:9px 12px!important;
    border:0!important;
    border-radius:999px!important;
    background:transparent!important;
    color:#f3ead9!important;
    font:800 13px/1.2 inherit!important;
    white-space:nowrap!important;
    cursor:pointer!important;
    transition:.25s!important;
  }
  .navlinks-compact a:hover,
  .navlinks-compact a.active,
  .navlinks-compact .nav-more:hover,
  .navlinks-compact .nav-more.active{
    background:rgba(216,154,43,.15)!important;
    color:var(--gold-2)!important;
    box-shadow:inset 0 0 0 1px rgba(244,199,109,.18)!important;
  }
  .nav-caret{font-size:13px;color:var(--gold-2);margin-inline-start:2px;transition:.25s}
  .nav-dropdown:hover .nav-caret,.nav-dropdown:focus-within .nav-caret{transform:rotate(180deg)}
  .nav-dropdown-menu{
    position:absolute!important;
    top:calc(100% + 12px)!important;
    right:0!important;
    min-width:220px!important;
    display:grid!important;
    gap:5px!important;
    padding:10px!important;
    border:1px solid rgba(216,154,43,.32)!important;
    border-radius:18px!important;
    background:rgba(5,5,5,.97)!important;
    backdrop-filter:blur(16px)!important;
    box-shadow:0 26px 80px rgba(0,0,0,.62)!important;
    opacity:0!important;
    visibility:hidden!important;
    transform:translateY(8px) scale(.98)!important;
    pointer-events:none!important;
    transition:.22s ease!important;
    z-index:9999!important;
  }
  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown:focus-within .nav-dropdown-menu{
    opacity:1!important;
    visibility:visible!important;
    transform:translateY(0) scale(1)!important;
    pointer-events:auto!important;
  }
  .nav-dropdown-menu a{
    width:100%!important;
    justify-content:flex-start!important;
    padding:11px 12px!important;
    border-radius:13px!important;
    background:rgba(255,255,255,.025)!important;
    color:#f0eadf!important;
  }
  .actions{
    grid-area:actions!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    justify-content:flex-end!important;
    align-items:center!important;
    gap:8px!important;
    min-width:0!important;
  }
  .actions .btn{padding:10px 14px!important;font-size:13px!important;white-space:nowrap!important;min-height:42px!important}
}

/* Medium desktop: keep the header elegant by making it two rows, not crowded. */
@media (min-width:1321px) and (max-width:1580px){
  .navbar{
    height:auto!important;
    min-height:118px!important;
    padding:8px 0 10px!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:"brand actions" "nav nav"!important;
    row-gap:8px!important;
  }
  .navlinks-compact{
    width:100%!important;
    padding-top:8px!important;
    border-top:1px solid rgba(216,154,43,.16)!important;
    justify-content:center!important;
  }
}

/* Mobile and tablet: dropdowns become normal menu sections inside hamburger. */
@media (max-width:1320px){
  .navlinks-compact .nav-dropdown{width:100%!important}
  .navlinks-compact .nav-more{
    width:100%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:8px!important;
    padding:12px 14px!important;
    border-radius:14px!important;
    border:0!important;
    background:rgba(216,154,43,.09)!important;
    color:var(--gold-2)!important;
    font:900 15px/1.2 inherit!important;
  }
  .navlinks-compact .nav-caret{margin-inline-start:auto!important}
  .navlinks-compact .nav-dropdown-menu{
    position:static!important;
    display:grid!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    pointer-events:auto!important;
    min-width:0!important;
    width:100%!important;
    margin:6px 0 0!important;
    padding:6px!important;
    border:1px solid rgba(216,154,43,.18)!important;
    border-radius:14px!important;
    background:rgba(0,0,0,.28)!important;
    box-shadow:none!important;
  }
  .navlinks-compact .nav-dropdown-menu a{padding:11px 14px!important;border-radius:12px!important;background:transparent!important}
}

/* =========================================================
   Final header cleanup: no icons in the main navbar.
   Icons remain available inside dashboard, cards, services, stats, footer.
   This prevents the menu from crowding and overlapping the logo/buttons.
   ========================================================= */
.header .site-nav-icon,
.header .btn-icon{display:none!important}
.header .navlinks-compact a,
.header .navlinks-compact .nav-more{gap:0!important}

@media (min-width:1501px){
  .header{overflow:visible!important}
  .navbar{
    height:84px!important;
    min-height:84px!important;
    padding:0!important;
    display:grid!important;
    grid-template-columns:minmax(220px,330px) minmax(0,1fr) auto!important;
    grid-template-areas:"brand nav actions"!important;
    align-items:center!important;
    column-gap:16px!important;
  }
  .brand{grid-area:brand!important;min-width:0!important;max-width:330px!important;justify-self:start!important}
  .brand img{width:56px!important;height:56px!important;border-radius:15px!important}
  .brand b{font-size:19px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .brand span{min-width:0!important}
  .brand span span{font-size:11px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .navlinks-compact{
    grid-area:nav!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    justify-content:center!important;
    align-items:center!important;
    gap:5px!important;
    min-width:0!important;
    overflow:visible!important;
  }
  .navlinks-compact>li{position:relative!important;flex:0 0 auto!important}
  .navlinks-compact a,
  .navlinks-compact .nav-more{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:40px!important;
    padding:9px 11px!important;
    border:0!important;
    border-radius:999px!important;
    background:transparent!important;
    color:#f3ead9!important;
    font:800 13.5px/1.2 inherit!important;
    white-space:nowrap!important;
    cursor:pointer!important;
    transition:.25s!important;
  }
  .navlinks-compact a:hover,
  .navlinks-compact a.active,
  .navlinks-compact .nav-more:hover,
  .navlinks-compact .nav-more.active{
    background:rgba(216,154,43,.15)!important;
    color:var(--gold-2)!important;
    box-shadow:inset 0 0 0 1px rgba(244,199,109,.18)!important;
  }
  .nav-caret{font-size:13px;color:var(--gold-2);margin-inline-start:6px;transition:.25s}
  .nav-dropdown:hover .nav-caret,.nav-dropdown:focus-within .nav-caret{transform:rotate(180deg)}
  .nav-dropdown-menu{
    position:absolute!important;
    top:calc(100% + 12px)!important;
    right:0!important;
    min-width:220px!important;
    display:grid!important;
    gap:5px!important;
    padding:10px!important;
    border:1px solid rgba(216,154,43,.32)!important;
    border-radius:18px!important;
    background:rgba(5,5,5,.97)!important;
    backdrop-filter:blur(16px)!important;
    box-shadow:0 26px 80px rgba(0,0,0,.62)!important;
    opacity:0!important;
    visibility:hidden!important;
    transform:translateY(8px) scale(.98)!important;
    pointer-events:none!important;
    transition:.22s ease!important;
    z-index:9999!important;
  }
  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown:focus-within .nav-dropdown-menu{
    opacity:1!important;
    visibility:visible!important;
    transform:translateY(0) scale(1)!important;
    pointer-events:auto!important;
  }
  .nav-dropdown-menu a{
    width:100%!important;
    justify-content:flex-start!important;
    padding:11px 12px!important;
    border-radius:13px!important;
    background:rgba(255,255,255,.025)!important;
    color:#f0eadf!important;
  }
  .actions{
    grid-area:actions!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    justify-content:flex-end!important;
    align-items:center!important;
    gap:8px!important;
    min-width:max-content!important;
  }
  .actions .btn{padding:10px 14px!important;font-size:13px!important;white-space:nowrap!important;min-height:42px!important}
}

/* Under 1500px the many links move into the hamburger menu.
   This is cleaner than forcing crowded desktop navigation. */
@media (max-width:1500px){
  .header{overflow:visible!important}
  .navbar{
    min-height:82px!important;
    height:auto!important;
    padding:8px 0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px!important;
    position:relative!important;
  }
  .brand{flex:1 1 auto!important;min-width:0!important;max-width:min(56vw,420px)!important}
  .brand img{width:54px!important;height:54px!important;border-radius:14px!important}
  .brand b{font-size:18px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .brand span{min-width:0!important}
  .brand span span{font-size:11px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .menu-toggle{display:grid!important;place-items:center!important;flex:0 0 44px!important;order:2!important}
  .actions{order:3!important;display:flex!important;align-items:center!important;gap:8px!important;flex:0 0 auto!important;min-width:0!important}
  .actions .btn{padding:10px 13px!important;font-size:13px!important;white-space:nowrap!important}
  .navlinks-compact{
    position:fixed!important;
    right:16px!important;
    left:16px!important;
    top:96px!important;
    z-index:9999!important;
    display:none!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:7px!important;
    max-height:calc(100vh - 118px)!important;
    overflow:auto!important;
    padding:14px!important;
    border:1px solid rgba(216,154,43,.32)!important;
    border-radius:22px!important;
    background:rgba(5,5,5,.98)!important;
    box-shadow:0 30px 90px rgba(0,0,0,.68)!important;
  }
  .navlinks-compact.open{display:flex!important}
  .navlinks-compact li{width:100%!important;position:relative!important}
  .navlinks-compact a,
  .navlinks-compact .nav-more{
    width:100%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    padding:12px 14px!important;
    border-radius:14px!important;
    font:900 15px/1.25 inherit!important;
    background:rgba(255,255,255,.025)!important;
    color:#f3ead9!important;
    border:0!important;
  }
  .navlinks-compact a.active,
  .navlinks-compact .nav-more.active{background:rgba(216,154,43,.14)!important;color:var(--gold-2)!important}
  .navlinks-compact .nav-caret{margin-inline-start:auto!important;color:var(--gold-2)!important}
  .navlinks-compact .nav-dropdown-menu{
    position:static!important;
    display:grid!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    pointer-events:auto!important;
    width:100%!important;
    min-width:0!important;
    margin-top:6px!important;
    padding:6px!important;
    border:1px solid rgba(216,154,43,.18)!important;
    border-radius:14px!important;
    background:rgba(0,0,0,.28)!important;
    box-shadow:none!important;
  }
}

@media (max-width:720px){
  .topbar .container{gap:8px!important}
  .navbar{min-height:76px!important}
  .brand{max-width:48vw!important}
  .brand img{width:48px!important;height:48px!important}
  .actions .btn-ghost{display:none!important}
  .actions .btn-primary{padding:9px 11px!important;font-size:12px!important}
  .menu-toggle{width:42px!important;height:42px!important}
  .navlinks-compact{top:86px!important;right:10px!important;left:10px!important;max-height:calc(100vh - 100px)!important}
}

/* =========================================================
   Mobile language switch fix
   - On mobile the old topbar was hidden, so Arabic/English did not appear.
   - Keep a small mobile language bar visible.
   - Also add language pills inside the hamburger menu.
   ========================================================= */
.mobile-language-switch{display:none!important;}
@media (max-width: 860px){
  .topbar{
    display:block!important;
    position:relative!important;
    z-index:2100!important;
    background:#050505!important;
    border-bottom:1px solid rgba(216,154,43,.25)!important;
  }
  .topbar .container{
    min-height:34px!important;
    padding:5px 0!important;
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
  }
  .topbar .contact-mini{display:none!important;}
  .topbar .langs-two{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:10px!important;
    direction:ltr!important;
    padding:3px 12px!important;
    border:1px solid rgba(216,154,43,.28)!important;
    border-radius:999px!important;
    background:rgba(0,0,0,.35)!important;
  }
  .topbar .langs-two a{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:24px!important;
    padding:0 4px!important;
    font-size:12px!important;
    font-weight:800!important;
    color:#d8cfbf!important;
  }
  .topbar .langs-two a.active{color:var(--gold-2)!important;}
  .topbar .langs-two a.active::after{height:2px!important;margin-top:2px!important;}

  .header .navlinks,
  .navlinks-compact{
    top:120px!important;
    max-height:calc(100vh - 132px)!important;
  }

  .header .navlinks .mobile-language-switch{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    width:100%!important;
    order:-20!important;
    padding:7px!important;
    margin-bottom:4px!important;
    border-radius:18px!important;
    border:1px solid rgba(216,154,43,.25)!important;
    background:linear-gradient(135deg,rgba(216,154,43,.12),rgba(0,0,0,.35))!important;
  }
  .header .navlinks .mobile-language-switch a{
    width:100%!important;
    min-height:42px!important;
    padding:10px 12px!important;
    justify-content:center!important;
    text-align:center!important;
    border-radius:14px!important;
    border:1px solid rgba(216,154,43,.22)!important;
    background:rgba(255,255,255,.035)!important;
    color:#f2eadb!important;
    font-weight:900!important;
  }
  .header .navlinks .mobile-language-switch a.active{
    background:linear-gradient(135deg,var(--gold),var(--gold-2))!important;
    color:#170f03!important;
    border-color:transparent!important;
  }
}
@media (max-width: 470px){
  .header .navlinks,
  .navlinks-compact{
    top:116px!important;
    max-height:calc(100vh - 128px)!important;
  }
}
@media (min-width: 861px){
  .header .navlinks .mobile-language-switch{display:none!important;}
}