/* ============================================================
   HYDRO WASHPRO - SUPPLEMENTAL FIXES & MOBILE RESPONSIVE CSS
   Add this as a <link> AFTER your main style.css
   ============================================================ */

/* ── Reset & base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

img { max-width: 100%; height: auto; }

/* ── Loading Bar ──────────────────────────────────────────── */
#loading-bar {
  position: fixed !important;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #EFEFEF !important;
  z-index: 10000 !important;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: auto;
}

#loading-bar #i1f2afm {
  background: #EFEFEF !important;
  min-height: 100vh;
  width: 100%;
}

#loading-bar #ibw35wp {
  width: 220px !important;
  height: auto !important;
  opacity: 1 !important;
}

#loading-bar .w-step {
  display: none !important;
}
#loading-bar .w-step.step-2 {
  display: block !important;
}

/* Per-num items shown for grp-100 */
#loading-bar.grp-100 .per-75,
#loading-bar.grp-100 .per-85 {
  display: flex !important;
}

/* ── Main Content hidden until loader done ────────────────── */
#iacw {
  opacity: 1;
  transition: opacity 0.5s ease;
}

/* ── Lazy images ──────────────────────────────────────────── */
.ctr-lazy-image { opacity: 0; transition: opacity 0.2s ease; }
.ctr-lazy-image.b-loaded { opacity: 1 !important; }

/* ── Field validation error ───────────────────────────────── */
.hwp-field-error {
  border-color: #e53935 !important;
  box-shadow: 0 0 0 2px rgba(229,57,53,0.2) !important;
}

/* ── FAQ Section ──────────────────────────────────────────── */
#i3vb6qq {
  display: block !important;
  visibility: visible !important;
  padding: 10px 15px;
  background-color: #eee;
}

#iic7ziv {
  display: block !important;
  padding: 10px 0;
}

/* Accordion item */
.js-accordion__item {
  background: #fff;
  margin-bottom: 12px;
  border-radius: 5px;
  overflow: hidden;
}

.js-accordion__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  cursor: pointer;
  border-bottom: 1px solid #ddd;
  font-size: 16px;
  font-family: Montserrat, Helvetica, Arial, sans-serif;
  user-select: none;
}

.js-accordion__header:hover { background: #fafafa; }

.accordion__icon-wrapper {
  flex-shrink: 0;
  margin-left: 12px;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.25s ease;
}

.accordion-active .accordion__icon-wrapper {
  transform: rotate(180deg);
}

.js-accordion__panel {
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

.accordion__content {
  padding: 16px 20px;
  font-size: 15px;
  line-height: 1.6;
  font-family: Montserrat, Helvetica, Arial, sans-serif;
}

/* ── Insurance / InsureShip ───────────────────────────────── */
.insureship-on,
.insureship-off,
.desc-selected,
.desc-not-selected { transition: opacity 0.2s ease; }

/* ── Product list items ───────────────────────────────────── */
#ircx1 {
  display: flex !important;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.list-item {
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  flex: 1 1 220px;
  min-width: 200px;
  max-width: 260px;
}

/* ── Progress bar (left sidebar) ─────────────────────────── */
.i3jmgo_global .progress--step--icon {
  transition: background-color 0.2s ease;
}

/* ── CVV / Fee popup overlay ─────────────────────────────── */
.ccv-popup {
  display: none;
  position: fixed !important;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9999;
  background: rgba(10,10,10,0.45);
  align-items: center;
  justify-content: center;
  overflow: auto;
}

/* ── Payment processing overlay ──────────────────────────── */
.paymentProccessing {
  display: none;
  position: fixed !important;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #fff;
  z-index: 9998;
  align-items: center;
  justify-content: center;
}

.paymentProccessing__loader_success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 20px;
  text-align: center;
}

/* ── Coupon messages ──────────────────────────────────────── */
.coupon-msg .success,
.coupon-msg .error {
  display: none;
  margin-top: 8px;
  font-size: 14px;
  font-family: Montserrat, Helvetica, Arial, sans-serif;
  font-weight: 600;
}
.coupon-msg .success { color: #1a73e8; }
.coupon-msg .error { color: #e53935; }

/* ── Social proof popup ───────────────────────────────────── */
#ivscqxu {
  position: fixed;
  bottom: 16px; left: 16px;
  min-width: 280px; max-width: 340px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.18);
  z-index: 1001;
  color: #000;
  transform: translateX(-110%);
  transition: transform 0.5s ease;
  font-family: Montserrat, Helvetica, Arial, sans-serif;
  overflow: hidden;
}

#ivscqxu .item { display: flex; width: 100%; }
#ivscqxu .thumb {
  width: 70px; padding: 10px;
  background: #f5f5f5;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
#ivscqxu .thumb img { width: 50px; }
#ivscqxu .desc {
  padding: 10px 12px;
  font-size: 12px; line-height: 1.5;
  background: #fff;
  color: #333;
}
#ivscqxu #ih1rt61 { color: #0ea5e9; font-weight: 700; font-size: 11px; }

/* ── Extended text badge ──────────────────────────────────── */
.extended-text {
  font-size: 15px !important;
  font-weight: 700 !important;
  font-family: Montserrat !important;
  color: #1f8305 !important;
  display: block !important;
}

/* ── Sticky order summary on desktop ─────────────────────── */
#imp3gz {
  position: sticky;
  top: 20px;
}

/* ── Button flash animation ───────────────────────────────── */
@keyframes flashBg {
  0%   { background-position: -30% 0; }
  100% { background-position: 130% 100%; }
}

.order-now-active > .child-element .btn-flash {
  -webkit-animation: flashBg 0.8s cubic-bezier(.54,.04,.73,.94) infinite;
  animation: flashBg 0.8s cubic-bezier(.54,.04,.73,.94) infinite;
  background-image: url(https://cdn.wowsuite.ai/ctrwow/shared/sitecommon/images/flash-bg.png);
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-color: transparent !important;
}

/* ============================================================
   MOBILE RESPONSIVE OVERRIDES
   ============================================================ */

@media (max-width: 767px) {

  /* General spacing */
  #iacw { min-height: auto; }

  /* Header / banner */
  #iol0c { min-height: 80px; }
  #iu88oj { max-width: 160px !important; width: 160px !important; }
  #ifhes4 { display: none !important; }
  #it37bt9 { display: block !important; padding: 8px 15px; }

  /* Discount banner */
  .im93m5_global .heading-bar__text { font-size: 14px !important; }

  /* Progress steps */
  .i3jmgo_global {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    padding: 10px 16px 44px !important;
    background: #eee !important;
  }
  .i3jmgo_global .progress-bar-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  .i3jmgo_global .progress--step--title { font-size: 11px !important; }
  .i3jmgo_global .progress--step--icon {
    width: 34px !important; height: 34px !important;
    padding: 0 !important;
  }

  /* Product selection */
  #ircx1 {
    flex-direction: column !important;
    align-items: center !important;
  }
  .list-item { max-width: 100% !important; width: 100% !important; }

  /* Secure checkout badge */
  #i25hi4 { display: none !important; }

  /* BUY NOW button */
  #itmr93n, #itmr93n-2, #itmr93n-3, #itmr93n-4 {
    font-size: 16px !important;
    padding: 12px 10px !important;
    min-height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Order columns stack */
  #iodav8 {
    position: static !important;
    height: auto !important;
    max-width: 100% !important;
    display: block !important;
  }
  #i3g9jh { max-width: 100% !important; margin: 16px auto 0 !important; }
  #io5afl { max-width: 100% !important; margin: 16px auto !important; }
  #iq3gva { max-width: 100% !important; }
  #iep8xk { margin: 20px auto 40px !important; padding: 0 12px !important; }
  #iwrlij { margin: 0 0 24px !important; }
  #iwva3z { max-width: 100% !important; }
  #isv8lr { max-width: 100% !important; }

  /* Payment section */
  #ilu59k { flex-direction: column !important; }
  #ifu37t { font-size: 20px !important; line-height: 22px !important; }
  #i4xw8e { font-size: 20px !important; }
  #i22mzs { font-size: 20px !important; }
  #ibckmkr { max-width: 100% !important; }
  button.ctaSubmit { font-size: 16px !important; padding: 14px 5px !important; }

  /* Order summary */
  #i1rzjcy { margin: 0 !important; }
  #icv4u3 { display: none !important; }
  #ivl4tii { display: block !important; padding: 14px 0 24px !important; }
  #ibk6zt8 { display: flex !important; align-items: center !important; }
  #imp3gz { position: static !important; top: unset !important; padding: 20px 0 0 !important; }

  /* Product cards on mobile - stack images */
  #ibbg5yr, #isbv7kh, #i8vmw4m, #ivc9ppt {
    width: 100% !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
  }

  #is16xi3, #ittd8f8, #iri50ec, #iku979h, #iceyegg {
    position: static !important;
    width: 100% !important;
    min-height: auto !important;
    justify-content: center !important;
  }

  #id914cl, #i79e1vv, #i2mjli1, #iuzeywh {
    display: block !important;
    margin: 0 auto !important;
    max-height: 160px !important;
    width: auto !important;
  }

  /* Selling out badge */
  #ivoasdc {
    padding: 6px 12px 10px !important;
    font-size: 15px !important;
  }

  /* Seals / Trust badges */
  #iiwj09u { margin: 20px auto 40px !important; padding: 0 12px !important; }
  #i4837bp, #i91pemm { display: block !important; }
  #iwky8t1, #ig34fzk, #ifzl2hw { width: 100% !important; display: block !important; }
  .seal { display: flex !important; align-items: flex-start !important; padding: 16px 10px !important; }

  /* FAQ section */
  #i3vb6qq { padding: 10px 12px !important; }
  #ii31ldb { font-size: 16px !important; }
  #ioqlp4z { font-size: 15px !important; }
  .js-accordion__header { padding: 14px 16px !important; font-size: 14px !important; }
  .accordion__content { padding: 12px 16px !important; font-size: 14px !important; }

  /* Footer */
  #igwn4k a { margin: 0 6px 4px !important; font-size: 11px !important; }
  #ilfjea-2 { flex-direction: column !important; }

  /* CC form */
  #ip3yt0p, #i6f546 { max-width: 100% !important; margin: 0 auto !important; }
  #itu4rtr, #iw9btvi { flex-wrap: wrap !important; }
  #iw9btvi { width: 100% !important; }
  #iwdra7c, #imw6k5i { width: 100% !important; }

  /* InsureShip widget */
  #is5xwfi { max-width: 100% !important; }
  #i3myl3x { padding: 10px 12px !important; }

  /* Social proof popup */
  #ivscqxu { min-width: 260px !important; max-width: 90vw !important; bottom: 10px !important; left: 10px !important; }

  /* Loading bar */
  #loading-bar #i74bt6h { padding: 20px 12px !important; }
  #loading-bar #i4f1tsy { padding: 20px 12px !important; }
  #loading-bar #i1318mm { margin: 0 0 60px !important; font-size: 22px !important; }
  #loading-bar #i9adixg { margin: 0 0 60px !important; font-size: 22px !important; }

  /* Popup close button positioning */
  #hwp-pop1-close, #hwp-pop2-close {
    top: 6px !important; right: 6px !important;
  }
}

/* ── Small phones (< 380px) ───────────────────────────────── */
@media (max-width: 380px) {
  #itmr93n, #itmr93n-2, #itmr93n-3, #itmr93n-4 { font-size: 14px !important; }
  .js-accordion__header { font-size: 13px !important; }
  button.ctaSubmit { font-size: 14px !important; }
  #ii31ldb { font-size: 14px !important; }
}

/* ── Tablet (768px – 1023px) ──────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  #ircx1 { flex-wrap: wrap !important; }
  .list-item { flex: 1 1 45% !important; max-width: 48% !important; }

  #iodav8 {
    position: static !important;
    height: auto !important;
    max-width: 100% !important;
    display: block !important;
  }
  #imp3gz { position: static !important; }

  #i4837bp { display: block !important; }
  #iwky8t1, #ig34fzk { width: 100% !important; display: inline-block !important; }

  #iep8xk { max-width: 720px !important; }
  #iwva3z { max-width: 100% !important; }

  .i3jmgo_global {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    padding: 14px 24px 50px !important;
  }


}

/* ── Desktop (≥ 1024px) ───────────────────────────────────── */
@media (min-width: 1024px) {
  .golden-border {
    position: relative;
    border-radius: 10px !important;
    background-image: linear-gradient(white, #fff),
      linear-gradient(180deg, #bd8f2f 0, #f9f1b2 66%, #bd8f2f 100%) !important;
    background-origin: border-box !important;
    background-clip: content-box, border-box !important;
    border: double 3px transparent !important;
  }

  #iodav8 {
    position: absolute !important;
    top: 0 !important; right: 15px !important;
    max-width: 430px !important;
    height: 100% !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
  }

  #imp3gz { padding: 40px 0 0 !important; }
}

/* ── Print ────────────────────────────────────────────────── */
@media print {
  #loading-bar, #ivscqxu, #hwp-coupon-popup-1, #hwp-coupon-popup-2,
  .paymentProccessing, .ccv-popup { display: none !important; }
}


@media screen and (max-width:767px) {
      #ivscqxu {
	max-height: 100px !important;
}

}