/* =========================================================
   WOOTZ — home promo banner (replaces the trust ticker while enabled).
   Loaded only when the banner renders — see sections/home-banner.blade.php.
   Logical properties throughout, so RTL and LTR share every rule.
   ========================================================= */
.hb{padding-block:32px}
.hb-frame{position:relative;border-radius:var(--r);overflow:hidden;
  background:var(--surface-2);border:1px solid var(--line)}

/* The track is a native scroll-snap rail: swiping works with no JS at all. */
.hb-track{display:flex;align-items:flex-start;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hb-track::-webkit-scrollbar{display:none}
.hb-slide{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
.hb-media{display:block}
.hb-media img{display:block;width:100%;height:auto}
a.hb-media:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}

/* Arrows: prev at inline-start, next at inline-end (right/left in RTL). */
.hb-nav{position:absolute;inset-block-start:50%;z-index:2;translate:0 -50%;
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--line-strong);background:color-mix(in srgb,var(--surface) 85%,transparent);
  backdrop-filter:blur(8px);color:var(--text);box-shadow:var(--shadow);
  opacity:0;transition:opacity .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.hb-nav svg{width:20px;height:20px}
.hb-nav.prev{inset-inline-start:14px}
.hb-nav.next{inset-inline-end:14px}
.hb-nav.prev svg{transform:rotate(180deg)}
[dir="rtl"] .hb-nav svg{scale:-1 1}
.hb.is-ready .hb-frame:hover .hb-nav,.hb.is-ready .hb-nav:focus-visible{opacity:1}
.hb-nav:hover{color:var(--accent);border-color:var(--accent)}
.hb-nav:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* Touch screens have no hover: keep the arrows visible, just quieter. */
@media (hover:none){.hb.is-ready .hb-nav{opacity:.85}}
@media (max-width:640px){.hb-nav{display:none}}

.hb-dots{display:flex;justify-content:center;gap:8px;margin-block-start:14px;visibility:hidden}
.hb.is-ready .hb-dots{visibility:visible}
.hb-dot{width:8px;height:8px;padding:0;border:0;border-radius:99px;cursor:pointer;
  background:var(--line-strong);transition:width .3s var(--ease),background .3s var(--ease)}
.hb-dot[aria-current="true"]{width:26px;background:var(--accent)}
.hb-dot:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

@media (max-width:640px){.hb{padding-block:20px}}
@media (prefers-reduced-motion:reduce){
  .hb-track{scroll-behavior:auto}
  .hb-nav,.hb-dot{transition:none}
}