@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.css  —  /hydrate purchase area (module 2571) + popup (2839)
   Aesthetic: Botanical Spa Luxury + aqua→lime accent (Direction A)
   Prefix: livhyd-   Scope: #pnlContent2571 / #dnn2839popup
   DNN root = 10px  → all rem values authored against a 10px root.
   ===================================================================== */

/* ---- Design tokens + base (scoped) ---- */
#pnlContent2571,
#dnn2839popup.af-modal-module {
  --livhyd-pine:#2f4a38;
  --livhyd-sage:#5c7d62;
  --livhyd-mist:#dce6dd;
  --livhyd-cream:#f5f1e8;
  --livhyd-gold:#c9a24b;
  --livhyd-aqua:#1fb6c9;
  --livhyd-lime:#7fc242;
  --livhyd-ink:#3a4a3f;
  font-family:'Jost',sans-serif;
}

/* ---- DNN safety resets (purchase area) ---- */
#pnlContent2571 [class*="col-"]{width:100%!important;float:none!important;padding:0!important;}
#pnlContent2571 .form-control{height:auto!important;min-height:52px!important;}
#pnlContent2571 .c-form,
#pnlContent2571 .form-root,
#pnlContent2571 .form-group{margin:0!important;padding:0!important;background:none!important;border:none!important;}

/* =====================================================================
   PURCHASE AREA  (module 2571)
   ===================================================================== */

#pnlContent2571 .livhyd-wrap{margin:1.6rem 0 0;}

/* Card: buy column only. The product imagery comes from the page's own image rotator,
   so the previous green GREEN2o pack pane was removed (redundant). */
#pnlContent2571 .livhyd-hero{
  display:block;
  background:var(--livhyd-cream);border-radius:22px;overflow:hidden;
  box-shadow:0 18px 50px rgba(47,74,56,.16);
  animation:livhyd-rise .7s cubic-bezier(.2,.7,.2,1) both;
}

/* Buy column */
#pnlContent2571 .livhyd-buy{padding:3.52rem 3.2rem;}
@media(max-width:820px){#pnlContent2571 .livhyd-buy{padding:2.6rem 2.2rem;}}
#pnlContent2571 .livhyd-kick{
  color:var(--livhyd-sage);font-size:1.15rem;letter-spacing:.24em;text-transform:uppercase;margin:.3rem 0 .8rem;font-weight:500;
}
#pnlContent2571 .livhyd-title{
  font-family:'Fraunces',serif;color:var(--livhyd-pine);font-weight:600;font-size:4rem;line-height:1.02;margin:0 0 .32rem;
}
#pnlContent2571 .livhyd-sub{color:#4a5a4b;font-size:1.52rem;margin:0 0 2.08rem;line-height:1.4;}

/* Flavor pills (styled over the ChkLemon checkbox group) */
#pnlContent2571 .livhyd-flavlbl{
  font-size:1.06rem;letter-spacing:.2em;text-transform:uppercase;color:#7c8a7f;margin:0 0 .8rem;
}
#pnlContent2571 .livhyd-flav{display:flex;gap:.96rem;margin-bottom:2.4rem;flex-wrap:wrap;}
/* hide the raw checkbox/radio inputs; the label becomes the pill */
#pnlContent2571 .livhyd-flav input[type="checkbox"],
#pnlContent2571 .livhyd-flav input[type="radio"]{position:absolute;opacity:0;width:0;height:0;pointer-events:none;}
#pnlContent2571 .livhyd-flav label{
  display:inline-flex;align-items:center;gap:.5rem;margin:0;cursor:pointer;
  border:1.5px solid var(--livhyd-mist);background:#fff;border-radius:12px;
  padding:.96rem 2.08rem;font-weight:500;font-size:1.6rem;color:var(--livhyd-pine);
  transition:border-color .18s ease,background .18s ease,color .18s ease,transform .12s ease;
}
#pnlContent2571 .livhyd-flav label:hover{border-color:var(--livhyd-sage);transform:translateY(-1px);}
#pnlContent2571 .livhyd-flav label:active{transform:translateY(0);}
/* selected state — driven by the form's own is-selected class (InitJs) and :has fallback */
#pnlContent2571 .livhyd-flav label.is-selected,
#pnlContent2571 .livhyd-flav label:has(input:checked){
  background:var(--livhyd-pine);color:#fff;border-color:var(--livhyd-pine);
}

/* THE offer card (replaces the Subscribe/One-Time radio) */
#pnlContent2571 .livhyd-offer{
  position:relative;border:2px solid var(--livhyd-sage);background:#fff;border-radius:18px;
  padding:2.4rem 2.4rem 2.24rem;box-shadow:0 10px 30px rgba(47,74,56,.10);
  animation:livhyd-rise .7s .12s cubic-bezier(.2,.7,.2,1) both;
}
#pnlContent2571 .livhyd-ribbon{
  position:absolute;top:-1.3rem;left:50%;transform:translateX(-50%);
  background:var(--livhyd-gold);color:#3a2f10;font-size:.99rem;letter-spacing:.16em;font-weight:700;
  padding:.51rem 1.44rem;border-radius:999px;text-transform:uppercase;white-space:nowrap;
}
#pnlContent2571 .livhyd-oh{display:flex;align-items:baseline;justify-content:space-between;gap:1.6rem;margin-bottom:1.44rem;}
#pnlContent2571 .livhyd-oh .name{font-family:'Fraunces',serif;font-weight:600;color:var(--livhyd-pine);font-size:2.24rem;line-height:1.1;}
#pnlContent2571 .livhyd-oh .name small{
  display:block;font-family:'Jost';font-size:1.15rem;letter-spacing:.06em;color:#7c8a7f;font-weight:400;margin-top:.32rem;
}
#pnlContent2571 .livhyd-price{text-align:right;white-space:nowrap;}
#pnlContent2571 .livhyd-price .amt{
  font-family:'Fraunces',serif;font-weight:600;font-size:3.84rem;line-height:1;
  background:linear-gradient(100deg,var(--livhyd-aqua),var(--livhyd-lime));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
#pnlContent2571 .livhyd-price .ship{
  display:inline-block;margin-top:.56rem;font-size:.96rem;letter-spacing:.1em;font-weight:700;
  color:#0e7c86;background:#e6f7f9;border-radius:999px;padding:.35rem .88rem;
}
#pnlContent2571 .livhyd-bul{
  list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:.64rem 1.28rem;
}
@media(max-width:520px){#pnlContent2571 .livhyd-bul{grid-template-columns:1fr;}}
#pnlContent2571 .livhyd-bul li{font-size:1.31rem;color:var(--livhyd-ink);display:flex;gap:.72rem;align-items:center;}
#pnlContent2571 .livhyd-bul li::before{content:"✓";color:var(--livhyd-sage);font-weight:700;}

/* CTA (styles the AddCart button) */
#pnlContent2571 .livhyd-cta,
#pnlContent2571 .livhyd-offer .liv-add-cart{
  display:block;margin-top:2.24rem;width:100%;border:none;cursor:pointer;border-radius:14px;
  padding:1.68rem;font-family:'Jost';font-weight:600;font-size:1.68rem;letter-spacing:.03em;color:#fff;
  background:linear-gradient(100deg,var(--livhyd-aqua),var(--livhyd-lime));
  box-shadow:0 10px 24px rgba(31,182,201,.32);
  position:relative;overflow:hidden;
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
}
#pnlContent2571 .livhyd-offer .liv-add-cart:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(31,182,201,.40);filter:saturate(1.06);}
#pnlContent2571 .livhyd-offer .liv-add-cart:active{transform:translateY(0);}
/* moving sheen */
#pnlContent2571 .livhyd-offer .liv-add-cart::after{
  content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-18deg);animation:livhyd-sheen 3.6s ease-in-out infinite;
}

#pnlContent2571 .livhyd-trust{
  display:flex;gap:1.92rem;justify-content:center;margin-top:1.6rem;font-size:1.15rem;color:#7c8a7f;flex-wrap:wrap;
}

/* Hide the original purchase-option radio (offer card replaces it) but keep it posting */
#pnlContent2571 .livhyd-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
#pnlContent2571 .livhyd-hidden .liv-radio-card{display:none!important;}

/* =====================================================================
   POPUP  (module 2839 — email-capture lead magnet)
   Renders as a Bootstrap modal: #dnn2839popup .modal-dialog .modal-content.
   This file is only loaded on /hydrate, so .modal-backdrop styling is page-safe.
   ===================================================================== */

/* Botanical dim + blur behind the popup.  IMPORTANT stacking fact on this DNN:
   the modal #dnn2839popup (z-index 1050) is nested inside SECTION#main_content, which sets
   position:relative; z-index:1 — that creates a stacking context, so the modal (and its card)
   live at GLOBAL z-index ~1. AF's native .modal-backdrop is a <body> child at z-index 1040,
   i.e. globally ABOVE main_content — so a *styled* backdrop paints over the card (graying +
   blurring it) and, at auto/open time, also eats clicks. No z-index on the card can escape
   the trap. So we do NOT style the backdrop — we neutralize it and put the dim on the modal
   CONTAINER itself. The card (.modal-content) is a child of #dnn2839popup, so it paints crisp
   ON TOP of the container's dimmed background while the page behind is dimmed + blurred.
   Verified live: card crisp, page dimmed/blurred, email field reachable + focusable. */
.modal-backdrop,.modal-backdrop.in,.modal-backdrop.show{
  background:transparent!important;opacity:0!important;pointer-events:none!important;
}
#dnn2839popup{
  background:rgba(20,35,25,.55)!important;
  -webkit-backdrop-filter:blur(3px)!important;backdrop-filter:blur(3px)!important;
}

/* Kill the default AF modal chrome ("Register" header bar) */
#dnn2839popup .modal-header{border:none!important;padding:0!important;min-height:0!important;background:none!important;}
#dnn2839popup .modal-title{display:none!important;}
#dnn2839popup .modal-header .close{
  position:absolute;top:1.2rem;right:1.6rem;z-index:5;opacity:.6;
  font-size:2.4rem;line-height:1;color:#2f4a38;text-shadow:none;font-weight:400;
}
#dnn2839popup .modal-header .close:hover{opacity:1;}

/* The frosted card */
#dnn2839popup .modal-dialog{width:min(44rem,94vw)!important;max-width:44rem!important;margin:6rem auto;}
#dnn2839popup .modal-content{
  position:relative;overflow:hidden;border:1px solid rgba(47,74,56,.06);border-radius:22px;
  background:#ffffff;
  box-shadow:0 30px 80px rgba(20,35,25,.30),0 0 0 1px rgba(47,74,56,.04);
  animation:livhyd-pop-in .45s cubic-bezier(.2,.8,.2,1) both;
}
#dnn2839popup .modal-content::before{
  content:"";position:absolute;top:-6rem;right:-6rem;width:18rem;height:18rem;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 30% 30%,rgba(31,182,201,.35),rgba(127,194,66,.18) 60%,transparent 70%);
}
#dnn2839popup .modal-body{padding:3.52rem 3.2rem 3.2rem;position:relative;z-index:1;}

/* DNN safety inside popup */
#dnn2839popup .modal-body .row{margin:0!important;}
/* zero margin-left too — AF wraps the submit in col-sm-offset-3 (margin-left:25%) which
   otherwise pushes the button right and overflows the card */
#dnn2839popup .modal-body [class*="col-"]{width:100%!important;float:none!important;padding:0!important;margin-left:0!important;margin-right:0!important;}
#dnn2839popup .modal-body label{display:none!important;}
#dnn2839popup .modal-body .form-control{height:auto!important;min-height:5.2rem!important;}

/* Content */
.livhyd-pop{--livhyd-pine:#2f4a38;--livhyd-sage:#5c7d62;--livhyd-mist:#dce6dd;--livhyd-aqua:#1fb6c9;--livhyd-lime:#7fc242;
  font-family:'Jost',sans-serif;text-align:center;}
.livhyd-pop-drop{font-size:2.72rem;margin-bottom:.64rem;animation:livhyd-bob 3s ease-in-out infinite;}
.livhyd-pop-kick{color:var(--livhyd-sage);font-size:1.06rem;letter-spacing:.24em;text-transform:uppercase;margin:0 0 .96rem;font-weight:500;}
.livhyd-pop-title{font-family:'Fraunces',serif;color:var(--livhyd-pine);font-weight:600;font-size:3.2rem;line-height:1.05;margin:0 0 .96rem;}
.livhyd-pop-title em{font-style:italic;color:var(--livhyd-sage);}
.livhyd-pop-sub{color:#45564a;font-size:1.47rem;line-height:1.5;margin:0 auto 2.24rem;max-width:34ch;}

.livhyd-pop-field{display:flex;flex-direction:column;gap:1.12rem;text-align:left;}
#dnn2839popup .livhyd-pop-field input[type="text"],
#dnn2839popup .livhyd-pop-field input[type="email"],
#dnn2839popup .livhyd-pop-field .form-control{
  width:100%!important;border:1.5px solid var(--livhyd-mist)!important;background:#fff!important;border-radius:12px!important;
  padding:1.44rem 1.6rem!important;font-family:'Jost'!important;font-size:1.6rem!important;color:#2f4a38!important;box-sizing:border-box;
  transition:border-color .18s ease,box-shadow .18s ease;
}
#dnn2839popup .livhyd-pop-field input:focus,
#dnn2839popup .livhyd-pop-field .form-control:focus{
  border-color:var(--livhyd-aqua)!important;box-shadow:0 0 0 3px rgba(31,182,201,.14)!important;outline:none!important;
}
#dnn2839popup .livhyd-pop-field button,
#dnn2839popup .livhyd-pop-field .btn,
#dnn2839popup .livhyd-pop-field input[type="submit"]{
  width:100%!important;border:none!important;cursor:pointer;border-radius:12px!important;
  padding:1.6rem!important;font-family:'Jost'!important;font-weight:600!important;font-size:1.6rem!important;letter-spacing:.02em;
  color:#fff!important;background:linear-gradient(100deg,var(--livhyd-aqua),var(--livhyd-lime))!important;
  box-shadow:0 10px 24px rgba(31,182,201,.30);transition:transform .16s ease,box-shadow .16s ease;
}
#dnn2839popup .livhyd-pop-field button:hover,
#dnn2839popup .livhyd-pop-field .btn:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(31,182,201,.38);}
.livhyd-pop-fine{margin:1.6rem 0 0;font-size:1.12rem;color:#8a988c;line-height:1.5;}

/* AF success confirmation restyle */
#dnn2839popup .submit-confirm{
  font-family:'Fraunces',serif!important;color:var(--livhyd-pine)!important;font-size:1.8rem!important;
  background:none!important;border:none!important;padding:2rem 0!important;
}

/* ---- Keyframes ---- */
@keyframes livhyd-rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
@keyframes livhyd-pop-in{from{opacity:0;transform:translateY(18px) scale(.98);}to{opacity:1;transform:none;}}
@keyframes livhyd-bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-.5rem);}}
@keyframes livhyd-sheen{0%,60%{left:-60%;}100%{left:130%;}}
@media(prefers-reduced-motion:reduce){
  #pnlContent2571 .livhyd-hero,#pnlContent2571 .livhyd-offer,
  #pnlContent2571 .livhyd-offer .liv-add-cart::after{animation:none;}
  #dnn2839popup .modal-content,.livhyd-pop-drop{animation:none;}
}