/* ==== Ali Sticky Sections — Plus Auto Pro (v1.9.1) ==== */
:root{
  --ali-top-offset: 0px;
  --ali-border: #e5e7eb;
  --ali-muted: #64748b;
  --ali-ink:   #0f172a;
  --ali-accent:#00bfd6;
  --ali-accent-ink:#036672;
  --ali-dot-filled:#00bfd6;
  --ali-dot-empty:#cbd5e1;
}

/* Desktop wrapper */
#ali-sticky-wrap{ width:1167px; margin-right:auto; margin-left:auto; }
@media (max-width:1280px){ #ali-sticky-wrap{ width:auto; margin:0; padding:0 12px; } }

/* Bar (in-flow) */
#ali-sticky-nav{
  z-index: 10010;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 0; direction:rtl;
  background: transparent;
  min-height: 58px;
}

/* Spacer when fixed */
#ali-sticky-spacer{ display:none; height:58px; }

/* Fixed (pinned) */
#ali-sticky-nav.ali-fixed{
  position: fixed;
  top: var(--ali-top-offset, 0px);
  background:#fff;
  box-shadow:0 6px 16px rgba(2,12,27,.06);
  right: 0;
}

/* Tabs */
#ali-sticky-nav .ali-right{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
#ali-sticky-nav .ali-nav-link{
  position:relative; display:inline-flex; align-items:center; gap:8px;
  color:var(--ali-muted); font-weight:800; font-size:14px;
  padding:10px 14px; border-radius:999px; text-decoration:none; white-space:nowrap;
  transition:background .2s ease, color .2s ease, transform .12s ease, box-shadow .2s ease;
}
#ali-sticky-nav .ali-nav-link:hover{ color:var(--ali-accent-ink); background:rgba(0,191,214,.08); transform:translateY(-1px); }
/* Stronger specificity for active (beats page builders) */
#ali-sticky-nav .ali-right .ali-nav-link.active{
  background:rgba(0,191,214,.16); color:var(--ali-accent-ink);
  box-shadow:0 4px 10px rgba(0,191,214,.18);
}
#ali-sticky-nav .ali-right .ali-nav-link.active::after{
  content:""; position:absolute; left:12px; right:12px; bottom:-6px; height:2px;
  background:linear-gradient(90deg, rgba(0,191,214,0), rgba(0,191,214,1), rgba(0,191,214,0)); border-radius:2px;
}
#ali-sticky-nav .ali-ico{ width:18px; height:18px; display:inline-block; }
#ali-sticky-nav .ali-ico svg{ width:18px; height:18px; display:block; }
#ali-sticky-nav .ali-ico path{ fill:currentColor; }

/* Left group */
#ali-sticky-nav .ali-left{
  display:flex; align-items:center; gap:16px;
  visibility:hidden; opacity:0; pointer-events:none; transition: opacity .2s ease;
}
#ali-sticky-nav.ali-fixed .ali-left{ visibility:visible; opacity:1; pointer-events:auto; }

#ali-sticky-nav .ali-rating{ display:flex; align-items:center; gap:10px;
  padding:6px 10px; border:1px solid var(--ali-border); border-radius:12px; background:#fff; }
#ali-sticky-nav .ali-score{ font-weight:900; color:#0f172a; font-size:14px; }

/* Fractional dots */
#ali-sticky-nav .ali-dots{ display:inline-flex; gap:6px; align-items:center; }
#ali-sticky-nav .ali-dots .dot{
  width:10px; height:10px; border-radius:999px;
  background: linear-gradient(to left, var(--ali-dot-filled) calc(var(--fill, 0)*100%), var(--ali-dot-empty) 0);
}

/* No count */
#ali-sticky-nav .ali-count{ display:none !important; }

#ali-sticky-nav .ali-rating-label{ color:#0f172a; font-weight:800; font-size:14px; }

#ali-sticky-nav .ali-share{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--ali-border); background:#fff; border-radius:12px;
  padding:8px 12px; font-weight:800; cursor:pointer;
  transition:border-color .2s ease, color .2s ease, transform .12s ease;
}
#ali-sticky-nav .ali-share:hover{ border-color:#036672; color:#036672; transform:translateY(-1px); }
#ali-sticky-nav .ali-share .ali-ico{ width:16px; height:16px; }

/* Separator */
#ali-sticky-sep{ height:1px; background:var(--ali-border); margin:8px 0 12px; }

/* ===== Mobile/Tablet ===== */
@media (max-width: 768px){
  #ali-sticky-wrap{ width:auto; margin:0; padding:0 8px; }
  #ali-sticky-nav.ali-fixed{ right:0; left:0; width:auto; }
  #ali-sticky-nav .ali-left{ display:none !important; }
  #ali-sticky-nav .ali-right{
    flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; gap:6px;
    scrollbar-width:none;
  }
  #ali-sticky-nav .ali-right::-webkit-scrollbar{ display:none; }
  #ali-sticky-nav .ali-nav-link{ font-size:13px; padding:10px 12px; }
  #ali-sticky-nav .ali-right .ali-nav-link.active{ box-shadow:0 4px 10px rgba(0,191,214,.2); }
}
/* === [Added by ChatGPT] Responsive overrides to avoid horizontal overflow and keep scroll within components === */
html, body { overflow-x: hidden; }

#ali-sticky-wrap, #ali-sticky-wrap * {
  box-sizing: border-box;
  max-width: 100%;
}

#ali-sticky-wrap img,
#ali-sticky-wrap video,
#ali-sticky-wrap iframe {
  max-width: 100%;
  height: auto;
}

#ali-sticky-nav { max-width: 100%; overflow: hidden; }
#ali-sticky-nav .ali-right{
  display:flex;
  flex-wrap:nowrap;
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  gap:8px;
  scrollbar-width:none;
}
#ali-sticky-nav .ali-right::-webkit-scrollbar{ display:none; }
#ali-sticky-nav .ali-nav-link{ flex:0 0 auto; white-space:nowrap; }

@media (max-width:768px){
  #ali-sticky-wrap{ width:auto !important; margin:0; padding-inline:8px; }
  #ali-sticky-nav.ali-fixed{ right:0; left:0; width:auto; }
}

/* Sections internal horizontal scrolling if wide content exists */
#az1, #az2, #az3, #az4{
  overflow-x:auto;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
}

#az1 table, #az2 table, #az3 table, #az4 table{
  display:block;
  max-width:100%;
  overflow-x:auto;
  border-collapse:collapse;
}

#ali-sticky-wrap a, #ali-sticky-wrap .ali-nav-link{
  word-break:keep-all;
  overflow-wrap:anywhere;
}

#ali-sticky-nav[dir="rtl"] .ali-right{ direction:rtl; }
