/* ============================================================
   Hudson Brand Slider — Elementor widget styles
   Colour auto-syncs with the site's  body[data-colour]  switcher.
   ============================================================ */
.hb-slider{
  --hb-primary:#39FF14;        /* default (green) */
  --hb-on-primary:#000;
  --hb-bg:#000;
  --hb-text:#fff;
  --hb-radius:34px;
  --hb-media-h:460px;
  --hb-font:'Prompt', sans-serif;
  position:relative;
  background:var(--hb-bg);
  padding:40px 70px 56px;
  overflow:hidden;
  box-sizing:border-box;
  font-family:var(--hb-font);
}
.hb-slider *{box-sizing:border-box;}

/* ---- Colour themes, driven by the existing site switcher ----
   Uses the Elementor global palette variables so the slider tracks the site's
   colours automatically (incl. the 2026 update); hex fallbacks keep it working
   if a variable is ever unavailable. Switcher order: yellow, orange, pink,
   purple, blue, green(=default). */
body[data-colour="yellow"] .hb-slider{--hb-primary:var(--e-global-color-9cf2d14,#F6FE0D);--hb-on-primary:#000;}
body[data-colour="orange"] .hb-slider{--hb-primary:var(--e-global-color-c0d22e7,#FF661F);--hb-on-primary:#000;}
body[data-colour="pink"]   .hb-slider{--hb-primary:var(--e-global-color-c1a15d8,#F51CC6);--hb-on-primary:#000;}
body[data-colour="purple"] .hb-slider{--hb-primary:var(--e-global-color-04e7660,#B01CF5);--hb-on-primary:#fff;}
body[data-colour="blue"]   .hb-slider{--hb-primary:var(--e-global-color-b1cb24a,#5026D1);--hb-on-primary:#fff;}
body[data-colour="green"]  .hb-slider,
body[data-colour="default"] .hb-slider{--hb-primary:var(--e-global-color-accent,#39FF14);--hb-on-primary:#000;}

/* ---- Viewport / track ---- */
.hb-viewport{overflow:hidden;}
.hb-track{display:flex;will-change:transform;
  transition:transform .6s cubic-bezier(.25,.1,.25,1);}
.hb-track.hb-no-anim{transition:none;}
.hb-slide{min-width:100%;flex:0 0 100%;display:flex;flex-direction:column;
  align-items:center;text-align:center;padding:0 10px;}

/* ---- Media (brand image) ---- */
.hb-media{width:100%;display:flex;justify-content:center;align-items:center;height:var(--hb-media-h);}
.hb-media img{max-height:var(--hb-media-h);max-width:100%;width:auto;object-fit:contain;display:block;}

/* ---- Body text ---- */
.hb-text{color:var(--hb-text);max-width:832px;margin:24px auto 26px;
  font-size:16px;line-height:28px;font-weight:500;}

/* ---- Buttons ---- */
.hb-actions{display:flex;flex-wrap:wrap;gap:24px;justify-content:center;width:100%;}
.hb-btn{display:inline-flex;align-items:center;justify-content:center;
  min-width:406px;max-width:100%;height:66px;padding:15px 30px;
  font-family:var(--hb-font);font-size:16px;font-weight:700;line-height:1;
  text-decoration:none;border-radius:var(--hb-radius);border:4px solid var(--hb-primary);
  transition:background-color .25s,color .25s;cursor:pointer;}
.hb-btn--solid{background:var(--hb-primary);color:var(--hb-on-primary);}
.hb-btn--solid:hover{background:transparent;color:var(--hb-primary);}
.hb-btn--outline{background:transparent;color:var(--hb-primary);}
.hb-btn--outline:hover{background:var(--hb-primary);color:var(--hb-on-primary);}

/* ---- Arrows ---- */
.hb-arrow{
    position: absolute;
    top: calc(40px + var(--hb-media-h)/2);
    transform: translateY(-50%);
    z-index: 5;
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 3px;
    background: transparent!important;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .25s;

}

.hb-arrow .hb-chev{position:relative;z-index:1;width:12px;height:12px;
  border-right:3px solid var(--hb-primary);border-bottom:3px solid var(--hb-primary);
  transition:border-color .25s;}
.hb-arrow:hover .hb-chev{border-color:#fff;}
.hb-prev{left:14px;}
.hb-next{right:14px;}
.hb-prev .hb-chev{transform:rotate(135deg);margin-left:5px;}
.hb-next .hb-chev{transform:rotate(-45deg);margin-right:5px;}

/* ---- Dots (shown only when JS has built them) ---- */
.hb-dots{display:none;justify-content:center;gap:10px;margin-top:22px;}
.hb-dots:not(:empty){display:flex;}
.hb-dots button{width:9px;height:9px;border-radius:50%;border:0;padding:0;
  background:#666;cursor:pointer;transition:background .25s;}
.hb-dots button.is-active{background:var(--hb-primary);}

/* ---- Responsive ---- */
@media(max-width:1024px){
  .hb-slider{padding:32px 20px 44px;--hb-media-h:360px;}
  .hb-arrow{top:calc(32px + var(--hb-media-h)/2);}
}
@media(max-width:640px){
  .hb-slider{--hb-media-h:280px;}
  .hb-arrow{width:44px;height:44px;}
  .hb-btn{min-width:100%;height:58px;}
  .hb-actions{gap:14px;}
  .hb-text{font-size:15px;line-height:26px;}
}