/* =====================================================================
   SANAN RELIEF - interaction & motion layer
   Ports the static reference build (assets/css/styles.css) onto the
   Elementor V3 DOM. Low specificity, no !important, so the Blocksy
   Customizer always wins.
   ===================================================================== */

:root{
  --sr-teal:#4B9A99; --sr-teal-deep:#34706F; --sr-red:#AA3436;
  --sr-ink:#1F282B; --sr-slate:#566468; --sr-grey:#899598;
  --sr-border:#DDE5E6; --sr-teal-soft:#EDF6F5; --sr-teal-light:#D9ECEB;
  --sr-red-soft:#F7EAEA; --sr-offwhite:#F8FAFA; --sr-grey-light:#F1F5F5;
  --sr-ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 1. SCROLL REVEAL ---------- */
.sr-reveal{opacity:0;transform:translateY(28px);
  transition:opacity .7s var(--sr-ease),transform .7s var(--sr-ease);will-change:opacity,transform;}
.sr-reveal.sr-in{opacity:1;transform:none;}
.sr-reveal.sr-d1{transition-delay:.08s}
.sr-reveal.sr-d2{transition-delay:.16s}
.sr-reveal.sr-d3{transition-delay:.24s}
.sr-reveal.sr-d4{transition-delay:.32s}

/* ---------- 2. CUSTOM CURSOR (desktop only) ---------- */
.sr-cursor-dot,.sr-cursor-ring{position:fixed;top:0;left:0;border-radius:50%;
  pointer-events:none;z-index:99999;opacity:0;transition:opacity .3s var(--sr-ease);}
.sr-cursor-on .sr-cursor-dot,.sr-cursor-on .sr-cursor-ring{opacity:1}
.sr-cursor-dot{width:7px;height:7px;background:var(--sr-teal);transform:translate(-50%,-50%);}
.sr-cursor-ring{width:30px;height:30px;border:1.5px solid var(--sr-grey);transform:translate(-50%,-50%);
  transition:width .2s var(--sr-ease),height .2s var(--sr-ease),border-color .2s var(--sr-ease),opacity .3s var(--sr-ease);}
.sr-cursor-ring.sr-hover{width:46px;height:46px;border-color:var(--sr-teal);}
.sr-cursor-ring.sr-rx{border-color:var(--sr-red);}
html.sr-has-cursor,html.sr-has-cursor *{cursor:none;}
html.sr-has-cursor input,html.sr-has-cursor textarea,html.sr-has-cursor select{cursor:auto;}
@media (hover:none),(max-width:1024px){.sr-cursor-dot,.sr-cursor-ring{display:none}}

/* ---------- 3. HEADER: scroll shrink + shadow ---------- */
[data-header] .ct-header,.ct-header{transition:box-shadow .3s var(--sr-ease),background-color .3s var(--sr-ease);}
body.sr-scrolled [data-sticky] .ct-header,
body.sr-scrolled .ct-header{box-shadow:0 6px 24px rgba(31,40,43,.07);}
[data-header] .site-logo-container img,.ct-header img.logo,.site-logo-container img{
  transition:max-height .3s var(--sr-ease),height .3s var(--sr-ease);}

/* active nav marker: small red dot */
header [data-id="menu"] .current-menu-item > a,
header [data-id="menu"] .current_page_item > a{color:var(--sr-red);position:relative;}
header [data-id="menu"] .current-menu-item > a:after,
header [data-id="menu"] .current_page_item > a:after{content:"";position:absolute;left:50%;bottom:2px;
  width:5px;height:5px;border-radius:50%;background:var(--sr-red);transform:translateX(-50%);}

/* ---------- 4. STICKY CONTEXTUAL CTA (desktop) ---------- */
.sr-sticky-cta{position:fixed;right:24px;bottom:24px;z-index:9000;background:#fff;
  border:1px solid var(--sr-border);border-radius:14px;box-shadow:0 26px 60px rgba(31,40,43,.13);
  padding:13px 18px;display:flex;align-items:center;gap:14px;max-width:330px;text-decoration:none;
  transform:translateY(150%);transition:transform .4s var(--sr-ease);}
.sr-sticky-cta.sr-show{transform:translateY(0);}
.sr-sticky-cta .sr-ic{width:40px;height:40px;border-radius:10px;background:var(--sr-teal-soft);
  color:var(--sr-teal);display:grid;place-items:center;flex-shrink:0;}
.sr-sticky-cta .sr-txt small{display:block;color:var(--sr-grey);font-size:12px;line-height:1.3;}
.sr-sticky-cta .sr-txt b{font-family:Poppins,sans-serif;font-size:14px;color:var(--sr-ink);line-height:1.3;}
.sr-sticky-cta .sr-go{color:var(--sr-teal);font-size:18px;line-height:1;}
.sr-sticky-cta:hover{border-color:var(--sr-teal-light);}
.sr-sticky-cta:hover .sr-go{transform:translateX(3px);transition:transform .3s var(--sr-ease);}

/* mobile bottom bar */
.sr-mobile-cta{position:fixed;left:0;right:0;bottom:0;z-index:9000;background:#fff;display:none;
  border-top:1px solid var(--sr-border);padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  box-shadow:0 -6px 20px rgba(31,40,43,.08);transform:translateY(150%);transition:transform .35s var(--sr-ease);}
.sr-mobile-cta.sr-show{transform:translateY(0);}
.sr-mobile-cta a{display:flex;justify-content:center;align-items:center;gap:8px;width:100%;
  background:var(--sr-teal-deep);color:#fff;text-decoration:none;font-family:Poppins,sans-serif;
  font-weight:600;font-size:15px;padding:14px 18px;border-radius:10px;}
@media (max-width:1024px){.sr-sticky-cta{display:none}.sr-mobile-cta{display:block}}

/* ---------- 5. MICRO-INTERACTIONS ---------- */
.elementor-button{transition:transform .25s var(--sr-ease),background-color .25s var(--sr-ease),box-shadow .25s var(--sr-ease);}
.elementor-button:hover{transform:translateY(-1px);}
.elementor-button .elementor-button-icon{transition:transform .3s var(--sr-ease);display:inline-flex;}
.elementor-button:hover .elementor-button-icon{transform:translateX(5px);}

/* card lift */
.sr-card{transition:transform .3s var(--sr-ease),box-shadow .3s var(--sr-ease),border-color .3s var(--sr-ease);}
.sr-card:hover{transform:translateY(-5px);box-shadow:0 14px 34px rgba(31,40,43,.10);border-color:var(--sr-teal-light);}

/* icon-box icon nudge inside cards */
.sr-card .elementor-icon-box-icon .elementor-icon{transition:transform .3s var(--sr-ease),color .3s var(--sr-ease);}
.sr-card:hover .elementor-icon-box-icon .elementor-icon{transform:translateY(-3px);}

/* teal underline on inline links */
.elementor-widget-text-editor a:not(.elementor-button){
  background-image:linear-gradient(var(--sr-teal),var(--sr-teal));
  background-size:0% 1.5px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .3s var(--sr-ease);text-decoration:none;color:var(--sr-teal-deep);padding-bottom:1px;}
.elementor-widget-text-editor a:not(.elementor-button):hover{background-size:100% 1.5px;}

/* icon-list check items */
.elementor-icon-list-item{transition:transform .25s var(--sr-ease);}
.elementor-icon-list-item:hover{transform:translateX(3px);}

/* ---------- 6. TABS / ACCORDION polish ---------- */
.e-n-tab-title{transition:background-color .25s var(--sr-ease),color .25s var(--sr-ease);}
.e-n-accordion-item-title{transition:background-color .25s var(--sr-ease),color .25s var(--sr-ease);}
.e-n-accordion-item{transition:border-color .25s var(--sr-ease),box-shadow .25s var(--sr-ease);}
.e-n-accordion-item[open]{border-color:var(--sr-teal-light);box-shadow:0 6px 18px rgba(31,40,43,.05);}
.e-n-accordion-item-title-icon{transition:transform .3s var(--sr-ease);}

/* ---------- 7. BADGES / MEDIA (from the reference) ---------- */
.sr-badge{display:inline-block;padding:5px 12px;border-radius:30px;font-family:Poppins,sans-serif;
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1.4;}
.sr-badge-rx{background:var(--sr-red-soft);color:var(--sr-red);}
.sr-badge-otc{background:var(--sr-teal-soft);color:var(--sr-teal-deep);}
.sr-prod-media{min-height:132px;background-image:linear-gradient(160deg,rgba(255,255,255,.55),rgba(255,255,255,0));
  transition:transform .35s var(--sr-ease);}
.sr-card:hover .sr-prod-media{transform:translateY(-4px);}
.sr-step-num{min-width:40px;max-width:40px;min-height:40px;}

/* eyebrow red rule */
.sr-eyebrow .elementor-heading-title:before{content:"";display:inline-block;width:24px;height:2px;
  margin-right:10px;vertical-align:middle;background:var(--sr-red);}

/* ---------- 8. FOCUS VISIBILITY ---------- */
a:focus-visible,button:focus-visible,.elementor-button:focus-visible,.e-n-tab-title:focus-visible{
  outline:2px solid var(--sr-teal);outline-offset:2px;}

/* ---------- 9. REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  .sr-reveal{opacity:1;transform:none;transition:none;}
  .sr-cursor-dot,.sr-cursor-ring{display:none;}
  html.sr-has-cursor,html.sr-has-cursor *{cursor:auto;}
  .elementor-button,.sr-card,.sr-prod-media,.elementor-icon-list-item{transition:none;}
  .elementor-button:hover,.sr-card:hover,.elementor-icon-list-item:hover{transform:none;}
  .elementor-button:hover .elementor-button-icon{transform:none;}
  .sr-sticky-cta,.sr-mobile-cta{transition:none;}
}

/* ---------- 10. RESPONSIVE ---------- */
@media (max-width:767px){
  .sr-prod-media{min-height:116px;}
  .sr-card:hover{transform:none;box-shadow:none;}
}