/* ========================================================================== */
/* GridLounge — Woo My Account Navigation (simplified)                        */
/* ========================================================================== */

/* ---- Block spacing ------------------------------------------------------- */
body.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation {
  margin: 0 0 28px;
}
@media (max-width: 767px) {
  body.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation {
    margin-bottom: 36px;
  }
}

/* ---- Mobile/Default: horizontal scroller -------------------------------- */
body.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation ul {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
body.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { height: 0; }
body.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation li {
  list-style: none;
  scroll-snap-align: start;
}

/* Links (icon + text) */
body.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation li a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  color: #fff;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-decoration: none;
  line-height: 1.2;
  white-space: nowrap;
  transition: color .2s ease, opacity .2s ease;
}
body.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation li a:hover,
body.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation li a:focus-visible {
  color: #cfe9ff;
  outline: none;
}

/* Active state: no underline; icon turns blue */
body.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation li.is-active a::after { content: none; }
body.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation li.is-active a::before { color: #1997ff; }

/* Icons (ETModules) */
body.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation li a::before{
  font-family:"ETmodules"; font-size:18px; line-height:1; display:inline-block;
  transform:translateY(1px); opacity:.9; color:rgba(255,255,255,.9);
}
.woocommerce-MyAccount-navigation-link--dashboard a::before       { content:'\e074'; }
.woocommerce-MyAccount-navigation-link--orders a::before          { content:'\e07a'; }
.woocommerce-MyAccount-navigation-link--memberships a::before,
.woocommerce-MyAccount-navigation-link--subscriptions a::before   { content:'\e0e0'; }
.woocommerce-MyAccount-navigation-link--edit-address a::before    { content:'\e081'; }
.woocommerce-MyAccount-navigation-link--edit-account a::before    { content:'\e038'; }
.woocommerce-MyAccount-navigation-link--customer-logout a::before { content:'\e06c'; }

body.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation ul:focus { outline: none; }

/* ---- Pager dots (single source of truth) -------------------------------- */
.gl-scroll-pager {
  display: none;                /* JS will set to flex if overflow exists */
  position: static;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 10px 0 28px;
}

.gl-scroll-pager .dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.35);
  opacity: .75;
  border: 0;
  padding: 0;
  display: inline-block;
  transition: width .25s ease, background .25s ease, opacity .25s ease;
}

.gl-scroll-pager .dot.active {
  width: 20px;                 /* pill for the active page */
  background: #ff5e40;         /* Grid Lounge orange */
  opacity: 1;
}

/* ---- Very small screens -------------------------------------------------- */
@media (max-width:380px){
  body.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation ul { gap:14px; }
  body.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation li a { font-size:13px; gap:5px; }
}

/* ---- Desktop: stacked sidebar, flush left, no scrolling/pager ------------ */
@media (min-width:768px){
  /* layout + left alignment */
  body.woocommerce-account .woocommerce{ display:flex; gap:40px; align-items:flex-start; }
  body.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation{
    flex:0 0 220px; margin-left:0 !important; padding-left:0 !important;
  }
  body.woocommerce-account .woocommerce .woocommerce-MyAccount-content{ flex:1; padding-left:0; }

  /* vertical list; remove snap/overflow/indents */
  body.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation ul{
    display:block; overflow:visible; scroll-snap-type:none; gap:0;
    margin-left:0 !important; padding-left:0 !important; list-style:none;
  }
  body.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation li{ margin:0 0 14px; scroll-snap-align:none; }
  body.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation li:last-child{ margin-bottom:0; }

  /* labels can wrap on desktop */
  body.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation li a{ white-space:normal; gap:10px; }

  /* hide pager on desktop */
  .gl-scroll-pager{ display:none !important; }
}