/* =========================
   RESET / BASE
========================= */
*{box-sizing:border-box;margin:0;padding:0}
h1,h2,h3,h4,h5,h6,p,img{margin:0;padding:0;line-height:1}
body{margin:0;padding:0;background:#fff;font-family:unset;overflow-x:hidden;overflow-y:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* =========================
   HEADER LAYOUT VARS
   (Offsets so content won't hide under sticky header)
========================= */
:root{
  --header-top-h: 40px;   /* approx desktop top row height */
  --header-sub-h: 24px;   /* approx desktop sub row height */
  --header-total-h: calc(var(--header-top-h) + var(--header-sub-h));
}


.main-header{
  position:fixed;top:0;left:0;width:100%;
  background:#fff;
  border-bottom:1px solid #00000015;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
  z-index:1000;
}

/* top row: left / center / right */
.main-header .header-top{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:0px 18px;

}

/* shared */
.left,.center,.right{display:flex;align-items:center;min-width:0}
.left{justify-content:flex-start;gap:10px}
.center{justify-content:center;gap:clamp(24px,3vw,52px);flex-wrap:nowrap}
.right{justify-content:flex-end;gap:14px;position:relative;z-index:1200}

/* left */
.left .home-link{text-decoration:none;color:rgb(129,124,124);transition:color .3s}
.left .home-link:hover{color:#0b8a00}
.left .home-text{font-size:clamp(24px,2.2vw,32px);letter-spacing:.5px}

/* main links */
.center a{
  text-decoration:none;color:#000;
  font-size:clamp(15px,1.15vw,19px);
  letter-spacing:.5px;
  transition:color .3s,transform .2s;
  white-space:nowrap
}
.center a:hover{color:#0b8a00;transform:translateY(-1px)}
.divider{color:#bbb;opacity:.7;font-size:18px;white-space:nowrap}

/* right links */
.right a{text-decoration:underline;color:#000;font-size:clamp(16px,1.4vw,21px);letter-spacing:.3px;transition:color .3s}
.right a:hover{color:#0b8a00}

/* currently hidden as in your setup */
#loginToggleBtn{display:none!important}

.main-header .header-sub{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 28px 2px;
  border-top:0px solid rgba(0,0,0,.05);
  min-height:var(--header-sub-h);
  z-index:950;
}

.main-header .sub-links-scroll{
  display:flex;
  justify-content:center;
  align-items:stretch;
  gap:clamp(28px,3.5vw,60px);
  width:1200px;
  padding-top:3px;
}

/* sublink style */
.main-header .header-sub a{
  text-decoration:none;
  color:#000;
  font-size:clamp(14px,1.05vw,16px);
  font-weight:500;
  transition:color .3s;
  white-space:nowrap
}
.main-header .header-sub a:hover{color:#0b8a00}

#travelToolsLink{position:static!important;left:auto!important}

/* menu toggle stays hidden on desktop */
.menu-toggle{
  display:none;
  align-items:center;justify-content:center;
  border-radius:999px;padding:3px 6px;border:1px solid #e5e7eb;
  background:#fff;cursor:pointer;position:relative;z-index:2000;
  margin-left:1px;width:37px;height:27px;
}
.menu-toggle:hover{background:#f3f4f6}
.menu-toggle i{width:22px;height:22px}

/* =========================
   SIDEBARS (FIXED)
========================= */
.left-sidebar-container,
.right-sidebar{
  position:fixed;top:0;height:100vh;width:230px;z-index:900;
}
.left-sidebar-container .sidebar-illustration{width:100%;height:100vh;object-fit:cover}

/* Left sidebar QR */
.qr-download-area{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);text-align:center}
.qr-image-wrapper{
  padding:5px;border-radius:12px;background:rgba(255,255,255,.27);
  box-shadow:0 4px 10px rgba(0,0,0,.2);
  margin-bottom:8px;max-width:120px;margin-left:auto;margin-right:auto;
}
.qr-image-wrapper img{
  display:block;width:100%;max-width:100px;aspect-ratio:1/1;height:auto;
  object-fit:contain;border-radius:4px;
}
.download-text{
  font-size:15px;font-weight:600;
  background:linear-gradient(to right,#0B8A00 0%,#00BC3B 50%,#0B8A00 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  letter-spacing:.5px;line-height:1.2;
}

/* Right sidebar */
.right-sidebar{right:0;background:#fff;border-left:1px solid #ffffff}
.right-sidebar-scroll{
  position:absolute;top:95px;bottom:0;left:0;right:0;
  overflow-y:auto;overflow-x:hidden;
  padding:16px 14px 20px;
  scrollbar-width:none;-ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
}
.right-sidebar-scroll::-webkit-scrollbar{width:0;height:0}
.right-sidebar-title{margin:0 0 25px;font-weight:700;font-size:15px;letter-spacing:.2px}
.right-sidebar-divider{height:1px;background:#eef2f6;margin:8px 0}
.right-sidebar-footer{margin-left:15px;color:#6a6f76;font-size:12.5px;line-height:1.4}

/* =========================
   CATEGORY LIST
========================= */
.category-list{display:flex;flex-direction:column}
.category-item{
  border:1px solid #e2e8f0;border-radius:14px;
  background:linear-gradient(180deg,#fff,#f7faf9);
  overflow:hidden;transition:all .25s ease;
  margin-bottom:10px;
}
.category-link{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;
  border:1px solid #e2e8f0;border-radius:14px;
  background:linear-gradient(180deg,#fff,#f7faf9);
  text-decoration:none;color:#0b0f17;
  font-weight:600;font-size:14px;cursor:pointer;
  transition:all .2s ease;
}
.category-link:hover{border-color:#0b8a00;box-shadow:0 2px 8px rgba(11,138,0,.1)}
.category-link i[data-lucide]{width:18px;height:18px;color:#0b8a00;flex-shrink:0}
.category-link.category-currency{padding:10px 4px 10px 10px}
.cat-icon-svg{width:18px;height:18px;display:inline-block;flex-shrink:0}
.category-info{
  max-height:0;padding:0 8px;color:#4a4f55;font-size:12.5px;line-height:1.4;
  overflow:hidden;transition:max-height .25s ease,padding .25s ease;
}
.category-item.open .category-info{max-height:200px;padding:8px 14px 14px}

/* =========================
   LOGIN / LANG / MOBILE MENU
========================= */
#loginFormWrapper{transition:all .3s ease;display:none;position:absolute;right:0;top:110px;z-index:1000}
.login-form-panel{width:280px;border-radius:.75rem;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);border:none}

.lang{position:relative;z-index:3000}
.lang summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px}
.lang summary::-webkit-details-marker{display:none}
.lang-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:4px 12px;border-radius:999px;
  border:1px solid #e9edf3;
  background:linear-gradient(180deg,#f3f3f3ff,#fafbff);
  box-shadow:0 6px 18px rgba(11,138,0,.04),inset 0 0 0 1px rgba(255,255,255,.6);
}
.lang-code{font-size:14px;letter-spacing:.4px;color:#0b0f17;font-weight:600}
.lang-caret{opacity:.7;transition:transform .2s}
.lang[open] .lang-caret{transform:rotate(180deg)}
.lang .lang-menu{
  position:absolute;right:0;top:calc(100% + 10px);
  width:220px;padding:8px;border-radius:16px;z-index:3200;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(1.2) blur(8px);
  border:1px solid rgba(230,236,244,.95);
  box-shadow:0 18px 40px rgba(15,23,42,.14);
}
.lang .lang-item{
  width:100%;text-align:left;display:flex;gap:10px;align-items:center;
  padding:10px 12px;border:none;background:transparent;border-radius:12px;
  cursor:pointer;font-size:14px;color:#0b0f17;
}
.lang .lang-item:hover{background:rgba(11,138,0,.06)}
.lang .check{margin-left:auto;opacity:0;transition:opacity .15s}
.lang .lang-item[aria-selected="true"] .check{opacity:.95}

.mobile-menu{
  display:none;flex-direction:column;gap:6px;
  padding:8px 18px 12px;background:#ffffff;
  border-bottom:1px solid #e5e7eb;position:relative;z-index:1200;
}
.mobile-menu.open{display:flex}
.mobile-menu a{text-decoration:none;font-size:15px;color:#111827;padding:4px 2px}
.mobile-menu a:hover{color:#0b8a00}

/* =========================
   CONTENT WRAPPER + SCROLLBAR
   IMPORTANT: offset for fixed header
========================= */
.content-wrapper{
  margin-left:auto;margin-right:auto;
  flex:1;position:relative;
  max-width:1400px;width:100%;
  background:#fff;padding:40px;
  box-shadow:0 0 0px rgba(0,0,0,.1);
  min-height:calc(100vh - 12px);
  display:flex;flex-direction:column;
  overflow-x:hidden;
  padding-top:calc(40px + var(--header-total-h));
}
#page-content{flex:1;background:#fff;padding-bottom:40px}

.content-wrapper::-webkit-scrollbar{width:8px}
.content-wrapper::-webkit-scrollbar-track{background:transparent}
.content-wrapper::-webkit-scrollbar-thumb{background:transparent;border-radius:10px;transition:background .25s ease}
.content-wrapper.show-scrollbar::-webkit-scrollbar-thumb{background:rgba(0,0,0,.5)}
.content-wrapper{scrollbar-width:thin;scrollbar-color:transparent transparent}
.content-wrapper.show-scrollbar{scrollbar-color:rgba(0,0,0,.5) transparent}

/* =========================
   BUTTONS
========================= */
.download-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:4px 12px;border-radius:999px;
  font-size:clamp(14px,1.1vw,15px);
  font-weight:600;border:1px solid #e9edf3;
  cursor:pointer;
  background:linear-gradient(180deg,#fff,#fafbff);
  box-shadow:0 6px 18px rgba(11,138,0,.04),inset 0 0 0 1px rgba(255,255,255,.6);
  transition:background .25s,transform .15s,box-shadow .25s;
}
.download-btn:hover{
  background:linear-gradient(180deg,#ffffff,#f1f7f1);
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(11,138,0,.06),inset 0 0 0 1px rgba(255,255,255,.7);
}
.download-btn i{color:#0b8a00}

/* =========================
   TOGGLES / UTIL
========================= */
.t-switch{position:relative;width:48px;height:26px}
.t-switch input{appearance:none;-webkit-appearance:none;width:100%;height:100%;margin:0;outline:none;cursor:pointer}
.t-slider{position:absolute;inset:0;background:#e5e7eb;border-radius:999px;transition:background .25s ease}
.t-knob{
  position:absolute;top:3px;left:3px;width:20px;height:20px;
  background:#9ca3af;border-radius:999px;
  transition:transform .25s ease,background .25s ease;
  box-shadow:0 1px 2px rgba(0,0,0,.12);
}
.t-switch input:checked + .t-slider{background:#d1fae5}
.t-switch input:checked + .t-slider .t-knob{transform:translateX(22px);background:var(--brand)}
.is-hidden{display:none}

/* =========================
   RESPONSIVE
========================= */
@media (max-width:1400px) and (min-width:1281px){
  .left-sidebar-container,.right-sidebar{width:190px}
}

@media (max-width:1280px) and (min-width:1025px){
  .left-sidebar-container,.right-sidebar{width:170px}
  .right-sidebar .category-link{font-size:12px!important}
  .main-header .sub-links-scroll{width:600px}
  .right-sidebar-scroll{top:73px}
}

/* MOBILE/TABLET: sticky header, stacked rows, scrollable sublinks with toggle */
@media (max-width:1024px){
  :root{
    --header-top-h: 42px;
    --header-sub-h: 37px;
  }

  .main-header{
    position:sticky;
    top:0;
    box-shadow:0 1px 2px rgba(0,0,0,.06);
  }

  .main-header .header-top{
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "left right"
      "center center";
    grid-template-rows:auto auto;
    padding:10px 14px 6px;
    row-gap:4px;
    min-height:auto;
  }

  .left{grid-area:left;display:flex;align-items:center;justify-content:flex-start;gap:10px}
  .right{grid-area:right;display:flex;align-items:center;justify-content:flex-end;gap:10px}
  .center{
    grid-area:center;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
    margin-top:2px;
  }
  .center a{font-size:15px}

  .left-sidebar-container,.right-sidebar{display:none}

  /* sublinks row becomes “mobile bar”: left scroll + right toggle */
  .main-header .header-sub{
    justify-content:space-between;
    padding:3px 14px 6px;
    border-top:1px solid rgba(0,0,0,.05);
    border-bottom:1px solid #e5e7eb;
    min-height:auto;
  }
  .main-header .sub-links-scroll{
    width:auto;
    flex:1;
    justify-content:flex-start;
    gap:16px;
    overflow-x:auto;
    white-space:nowrap;
    scrollbar-width:none;
    padding-top:0;
  }
  .main-header .sub-links-scroll::-webkit-scrollbar{display:none}
  .main-header .header-sub a{font-size:14px}

  .menu-toggle{display:inline-flex}

  .lang .lang-menu{width:200px;left:-1px}

  /* content offset in mobile should still account for header height */
  .content-wrapper{
    width:100%;
    padding:30px;
    min-height:calc(100vh - 100px);
    padding-top:calc(30px + var(--header-total-h));
  }

  #main-content{margin-top:16px!important}
}

@media (max-width:767px){
  .main-header .header-top{padding:8px 12px 4px}
  .left .home-text{font-size:22px}
  .center a{font-size:15px}
  .divider{display:none}
  .qr-download-area{display:none}

  #loginFormWrapper{top:70px;right:5%;width:90%}

  .main-header .header-sub a{font-size:13px}
  #main-content{margin-top:16px!important}
}

@media (max-width:600px){
  .content-wrapper{
    width:100%;
    padding:20px 15px;
    min-height:calc(100vh - 80px);
    padding-top:calc(20px + var(--header-total-h));
  }
}