/*
 * Spin Wheel: Premium unlock upsell (Cart + Checkout)
 * Separate stylesheet so the UI stays styled even when the main spin modal
 * is not being shown on the current page.
 */

:root{
  --pgsa-upsell-red:#e11d2e;
  --pgsa-upsell-red2:#b31222;
  --pgsa-upsell-gold:#facc15;
  --pgsa-upsell-ink:#111827;
}

/* High specificity to survive theme Woo overrides */
body.woocommerce .pgsa-spin-upsell,
body .woocommerce .pgsa-spin-upsell,
body.woocommerce-page .pgsa-spin-upsell{
  margin:12px 0 14px !important;
  border-radius:16px !important;
  border:1px solid rgba(255,255,255,.10) !important;
  background:
    radial-gradient(circle at 14% 20%, rgba(225,29,46,.34), transparent 55%),
    radial-gradient(circle at 86% 34%, rgba(250,204,21,.18), transparent 60%),
    linear-gradient(180deg, rgba(65,0,0,.55), rgba(35,0,0,.74)) !important;
  box-shadow:0 14px 36px rgba(0,0,0,.22) !important;
  overflow:hidden !important;
}

body.woocommerce .pgsa-spin-upsell__inner,
body .woocommerce .pgsa-spin-upsell__inner{
  padding:14px 14px 12px !important;
}

body.woocommerce .pgsa-spin-upsell__top,
body .woocommerce .pgsa-spin-upsell__top{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  margin:0 0 8px 0 !important;
}

body.woocommerce .pgsa-spin-upsell__badge,
body .woocommerce .pgsa-spin-upsell__badge{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:5px 10px !important;
  border-radius:999px !important;
  font-weight:900 !important;
  letter-spacing:.35px !important;
  text-transform:uppercase !important;
  font-size:11px !important;
  color:#111 !important;
  background:linear-gradient(180deg, var(--pgsa-upsell-gold), #ffdf6e) !important;
}

body.woocommerce .pgsa-spin-upsell__title,
body .woocommerce .pgsa-spin-upsell__title{
  font-weight:1000 !important;
  font-size:14px !important;
  letter-spacing:.2px !important;
  color:#fff !important;
  margin:0 !important;
}

body.woocommerce .pgsa-spin-upsell__text,
body .woocommerce .pgsa-spin-upsell__text{
  font-weight:900 !important;
  font-size:14px !important;
  color:#fff !important;
  margin:0 !important;
}

body.woocommerce .pgsa-spin-upsell__subtext,
body .woocommerce .pgsa-spin-upsell__subtext{
  margin-top:4px !important;
  font-size:12px !important;
  color:rgba(255,255,255,.82) !important;
}

body.woocommerce .pgsa-spin-upsell__bar,
body .woocommerce .pgsa-spin-upsell__bar{
  margin-top:10px !important;
  height:10px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.14) !important;
  overflow:hidden !important;
}

body.woocommerce .pgsa-spin-upsell__bar-fill,
body .woocommerce .pgsa-spin-upsell__bar-fill{
  height:100% !important;
  width:0;
  border-radius:999px !important;
  background:linear-gradient(90deg, var(--pgsa-upsell-red), var(--pgsa-upsell-gold)) !important;
}

body.woocommerce .pgsa-spin-upsell__row,
body .woocommerce .pgsa-spin-upsell__row{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  margin-top:10px !important;
}

body.woocommerce .pgsa-spin-upsell__meta,
body .woocommerce .pgsa-spin-upsell__meta{
  font-size:12px !important;
  color:rgba(255,255,255,.85) !important;
  margin:0 !important;
}

body.woocommerce .pgsa-spin-upsell__btn,
body .woocommerce .pgsa-spin-upsell__btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:10px 14px !important;
  border-radius:999px !important;
  font-weight:1000 !important;
  letter-spacing:.35px !important;
  text-transform:uppercase !important;
  text-decoration:none !important;
  color:#fff !important;
  background:linear-gradient(180deg, var(--pgsa-upsell-red), var(--pgsa-upsell-red2)) !important;
  box-shadow:0 14px 34px rgba(225,29,46,.24) !important;
  white-space:nowrap !important;
}

body.woocommerce .pgsa-spin-upsell__btn:hover,
body .woocommerce .pgsa-spin-upsell__btn:hover{
  filter:brightness(1.06) !important;
}

body.woocommerce .pgsa-spin-upsell__currency,
body .woocommerce .pgsa-spin-upsell__currency{
  margin-top:8px !important;
  font-size:12px !important;
  color:rgba(255,255,255,.82) !important;
}

@media (max-width: 820px){
  body.woocommerce .pgsa-spin-upsell__row,
  body .woocommerce .pgsa-spin-upsell__row{
    flex-direction:column !important;
    align-items:stretch !important;
  }
  body.woocommerce .pgsa-spin-upsell__btn,
  body .woocommerce .pgsa-spin-upsell__btn{
    width:100% !important;
  }
}