@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..900;1,9..144,400..600&family=Jost:wght@300..600&display=swap');

/* =====================================================================
   liv-hydrate-upsell.css  —  /hydrate/green2o-30  30-Day upsell (module 2848)
   Aesthetic: Botanical Spa + aqua→lime shifted to MINT (matches /hydrate)
   Prefix: livhyd-up-   Scope: #pnlContent2848
   DNN root = 10px → all rem values authored against a 10px root.
   Buttons are real ActionForm fields, targeted by data-name:
     MSPUpsale (primary) · RegularUpsale (secondary) · NoUpSale (ghost)
   ===================================================================== */

#pnlContent2848{
  --up-pine:#2f4a38; --up-sage:#5c7d62; --up-mist:#dce6dd;
  --up-mint:#37bfa0; --up-mint-deep:#1f9f88; --up-lime:#7fc242; --up-gold:#c19a4f; --up-ink:#3a463c;
  font-family:'Jost',sans-serif; color:var(--up-ink);
  background:
    radial-gradient(1000px 420px at 82% -8%, rgba(55,191,160,.10), transparent 60%),
    radial-gradient(760px 420px at -8% 108%, rgba(127,194,66,.10), transparent 60%),
    linear-gradient(180deg,#f6f1e8,#efe8db);
  padding:48px 20px 60px;
}

/* --- DNN / Bootstrap grid neutralization (AF wraps buttons in col-sm-* offsets) --- */
#pnlContent2848 .row{margin:0!important;}
#pnlContent2848 [class*="col-"]{width:100%!important;float:none!important;margin-left:0!important;margin-right:0!important;padding:0!important;}

/* --- Header --- */
.livhyd-up-wrap{width:100%; max-width:600px; margin:0 auto; text-align:center;}
.livhyd-up-kick{font-size:1.3rem; letter-spacing:.28em; text-transform:uppercase; color:var(--up-sage); font-weight:500; margin:0 0 14px;}
.livhyd-up-title{font-family:'Fraunces',serif; font-weight:600; color:var(--up-pine); font-size:4rem; line-height:1.04; letter-spacing:-.01em; margin:0 0 14px;}
.livhyd-up-title em{font-style:italic; color:var(--up-mint-deep);}
.livhyd-up-lede{font-size:1.7rem; color:#54614f; line-height:1.5; margin:0 auto 30px; max-width:34ch;}
.livhyd-up-lede b{color:var(--up-pine); font-weight:600;}

/* --- Offer card --- */
.livhyd-up-card{
  position:relative; overflow:hidden; text-align:left; background:#fff;
  border:1px solid rgba(47,74,56,.08); border-radius:24px;
  box-shadow:0 30px 70px rgba(28,60,45,.16), 0 2px 6px rgba(28,60,45,.05);
  padding:30px 30px 28px;
}
.livhyd-up-card::before{
  content:""; position:absolute; top:-70px; right:-70px; width:220px; height:220px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 30% 30%, rgba(55,191,160,.32), rgba(127,194,66,.16) 60%, transparent 72%);
}
.livhyd-up-head{display:flex; align-items:flex-start; gap:12px; position:relative; z-index:1;}
.livhyd-up-leaf{flex:0 0 auto; width:38px; height:38px; margin-top:2px;}
.livhyd-up-name{font-family:'Fraunces',serif; font-weight:600; color:var(--up-pine); font-size:2.6rem; line-height:1.1; margin:0;}
.livhyd-up-sub{color:var(--up-sage); font-size:1.4rem; margin:4px 0 0;}

.livhyd-up-save{
  display:inline-flex; align-items:center; gap:6px; margin:16px 0 4px;
  background:rgba(55,191,160,.12); color:var(--up-mint-deep); font-weight:600; font-size:1.35rem;
  padding:8px 14px; border-radius:100px; border:1px solid rgba(55,191,160,.25); position:relative; z-index:1;
}
.livhyd-up-save .strike{color:#9aa79b; text-decoration:line-through; font-weight:400;}

/* --- Two pricing tiers (informational; MSP always highlighted as best value) --- */
.livhyd-up-opts{display:flex; flex-direction:column; gap:13px; margin:20px 0 4px; position:relative; z-index:1;}
.livhyd-up-opt{
  position:relative; border:1.5px solid var(--up-mist); border-radius:14px; padding:15px 17px;
  display:flex; align-items:center; justify-content:space-between; gap:12px; background:#fff;
}
.livhyd-up-opt.is-sel{border-color:var(--up-mint); box-shadow:0 0 0 3px rgba(55,191,160,.14); background:linear-gradient(180deg,#f3fbf8,#fff);}
.livhyd-up-tag{
  position:absolute; top:-10px; left:16px; background:linear-gradient(180deg,#d8b871,#c19a4f); color:#3d2f10;
  font-size:.95rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; padding:4px 11px;
  border-radius:100px; box-shadow:0 5px 12px rgba(193,154,79,.3);
}
.livhyd-up-opt-l{display:flex; flex-direction:column; gap:3px;}
.livhyd-up-opt-name{font-family:'Jost'; font-weight:600; color:var(--up-pine); font-size:1.6rem;}
.livhyd-up-opt-name b{font-weight:500; color:var(--up-sage); font-size:1.4rem;}
.livhyd-up-opt-meta{color:#7d8a7e; font-size:1.3rem;}
.livhyd-up-opt-r{text-align:right; flex:0 0 auto;}
.livhyd-up-opt-price{font-family:'Fraunces',serif; font-weight:600; font-size:2.9rem; color:var(--up-pine); line-height:1;}
.livhyd-up-opt.is-sel .livhyd-up-opt-price{background:linear-gradient(100deg,var(--up-mint),var(--up-lime)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.livhyd-up-opt-price i{font-style:normal; font-size:1.2rem; color:var(--up-sage); -webkit-text-fill-color:var(--up-sage);}
.livhyd-up-opt-per{display:block; color:#9aa79b; font-size:1.15rem; margin-top:2px;}

/* --- Benefits --- */
.livhyd-up-bul{list-style:none; margin:20px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; position:relative; z-index:1;}
.livhyd-up-bul li{display:flex; align-items:center; gap:9px; color:#46523f; font-size:1.5rem; line-height:1.3;}
.livhyd-up-bul li::before{content:"✓"; color:var(--up-mint); font-weight:700; flex:0 0 auto;}

/* --- Actions (real ActionForm buttons, by data-name) --- */
.livhyd-up-actions{margin:0; position:relative; z-index:1;}

#pnlContent2848 button[data-name="MSPUpsale"]{
  display:block!important; width:100%!important; margin:24px 0 0!important; border:none!important; cursor:pointer;
  background:linear-gradient(100deg,var(--up-mint),var(--up-lime))!important; color:#fff!important;
  font-family:'Jost'!important; font-weight:600!important; font-size:1.8rem!important; letter-spacing:.01em;
  padding:18px!important; border-radius:14px!important; box-shadow:0 14px 28px rgba(55,191,160,.34)!important;
  transition:transform .16s ease, box-shadow .16s ease; text-shadow:none!important;
}
#pnlContent2848 button[data-name="MSPUpsale"]:hover{transform:translateY(-2px)!important; box-shadow:0 20px 38px rgba(55,191,160,.42)!important;}

#pnlContent2848 button[data-name="RegularUpsale"]{
  display:block!important; width:100%!important; margin:13px 0 0!important; border:none!important; background:none!important; cursor:pointer;
  color:var(--up-mint-deep)!important; font-family:'Jost'!important; font-weight:500!important; font-size:1.5rem!important;
  padding:6px!important; text-decoration:none!important; box-shadow:none!important;
}
#pnlContent2848 button[data-name="RegularUpsale"]:hover{text-decoration:underline!important;}

.livhyd-up-nothanks{text-align:center; margin:22px 0 0;}
#pnlContent2848 button[data-name="NoUpSale"]{
  display:inline-block!important; width:auto!important; margin:0!important; border:none!important; background:none!important; cursor:pointer;
  color:#8a968b!important; font-family:'Jost'!important; font-weight:400!important; font-size:1.5rem!important;
  padding:0 0 1px!important; border-bottom:1px solid rgba(138,150,139,.4)!important; text-decoration:none!important; box-shadow:none!important;
}
#pnlContent2848 button[data-name="NoUpSale"]:hover{color:var(--up-sage)!important;}

/* --- Mobile --- */
@media(max-width:560px){
  #pnlContent2848{padding:34px 14px 48px;}
  .livhyd-up-title{font-size:3.2rem;}
  .livhyd-up-card{padding:24px 20px 22px;}
  .livhyd-up-opt{flex-direction:column; align-items:flex-start; gap:6px;}
  .livhyd-up-opt-r{text-align:left;}
  .livhyd-up-bul{grid-template-columns:1fr;}
}
@media(prefers-reduced-motion:reduce){
  #pnlContent2848 button[data-name="MSPUpsale"]{transition:none;}
}