/* ============================================================================
   LIV International — 7-Day Hydration Challenge — Registration Form
   Module 2828 (ActionForm) — "Liquid Wellness" theme
   ----------------------------------------------------------------------------
   Pairs with the custom MANUAL LAYOUT (see liv-hc-layout.html).
   Self-contained. Scoped entirely under #pnlContent2828.
   DNN rules: NO font-size (hierarchy via weight/spacing/scale), livhc- prefix,
   self-contained, deploy to /Portals/0/frm/css/  ?ver=N
   ============================================================================ */

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

/* ---- Scope tokens + the frosted card ------------------------------------- */
#pnlContent2828.register-form {
  --livhc-forest:   #3f5a43;
  --livhc-sage:     #5c7d62;
  --livhc-sage-lt:  #8aa888;
  --livhc-mist:     #eef3ea;
  --livhc-cream:    #f7f4ea;
  --livhc-sand:     #efe7d4;
  --livhc-aqua:     #bfe3da;
  --livhc-ink:      #2b3a2d;
  --livhc-glass:    rgba(255, 255, 255, 0.62);
  --livhc-glass-bd: rgba(255, 255, 255, 0.85);
  --livhc-shadow:   30px 40px 80px -30px rgba(45, 70, 50, 0.45);
  --livhc-ring:     rgba(122, 161, 130, 0.38);
  --livhc-serif:    'Fraunces', Georgia, 'Times New Roman', serif;
  --livhc-sans:     'Lato', Arial, sans-serif;

  position: relative;
  max-width: 540px;
  margin: 2.2rem auto;
  padding: clamp(2.1rem, 5vw, 3.2rem) clamp(1.4rem, 4vw, 2.8rem) clamp(1.6rem, 4vw, 2.3rem);
  border-radius: 30px;
  background: var(--livhc-glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  backdrop-filter: blur(18px) saturate(1.25);
  border: 1px solid var(--livhc-glass-bd);
  box-shadow: var(--livhc-shadow), inset 0 1px 0 rgba(255,255,255,0.9);
  overflow: hidden;
  isolation: isolate;
  color: var(--livhc-ink);
  animation: livhc-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Atmospheric backdrop behind the whole module */
#pnlContent2828.register-form::before {
  content: "";
  position: absolute;
  inset: -40% -30% -40% -30%;
  z-index: -2;
  background:
    radial-gradient(38% 42% at 18% 12%, rgba(143,168,136,0.55), transparent 70%),
    radial-gradient(40% 45% at 92% 8%,  rgba(191,227,218,0.55), transparent 70%),
    radial-gradient(55% 60% at 80% 100%, rgba(239,231,212,0.7), transparent 70%),
    linear-gradient(158deg, var(--livhc-mist) 0%, var(--livhc-cream) 55%, var(--livhc-sand) 100%);
  animation: livhc-drift 22s ease-in-out infinite alternate;
}

/* Floating water-drop watermark */
#pnlContent2828.register-form::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -36px;
  bottom: -44px;
  width: 230px;
  height: 230px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 4 C50 4 86 44 86 68 A36 36 0 0 1 14 68 C14 44 50 4 50 4 Z' fill='none' stroke='%235c7d62' stroke-width='2.2' opacity='0.5'/><path d='M38 60 a12 12 0 0 0 12 12' fill='none' stroke='%235c7d62' stroke-width='2.2' stroke-linecap='round' opacity='0.6'/></svg>") no-repeat center / contain;
  opacity: 0.45;
  pointer-events: none;
  animation: livhc-float 7s ease-in-out infinite;
}

/* ---- Reset DNN / Bootstrap horizontal grid into a clean stack ------------ */
#pnlContent2828 .row,
#pnlContent2828 .c-form,
#pnlContent2828 .form-root { margin: 0; padding: 0; background: none; }
#pnlContent2828 [class*="col-sm-"] {
  width: 100%; max-width: 100%; float: none;
  padding-left: 0; padding-right: 0;
}

/* ---- Custom header (real HTML from the manual layout) -------------------- */
#pnlContent2828 .livhc-head {
  text-align: center;
  margin: 0 0 1.9rem;
}
#pnlContent2828 .livhc-drop {
  display: block;
  width: 2.7rem;
  height: 3.1rem;
  margin: 0 auto 0.7rem;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%238aa888'/><stop offset='1' stop-color='%233f5a43'/></linearGradient></defs><path d='M50 6 C50 6 88 50 88 78 A38 38 0 0 1 12 78 C12 50 50 6 50 6 Z' fill='url(%23g)'/><path d='M36 74 a14 14 0 0 0 14 14' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' opacity='0.8'/><circle cx='40' cy='44' r='5' fill='white' opacity='0.55'/></svg>") no-repeat center / contain;
  filter: drop-shadow(0 8px 14px rgba(63,90,67,0.35));
  animation: livhc-float 6s ease-in-out infinite;
}
#pnlContent2828 .livhc-title {
  font-family: var(--livhc-serif);
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.005em;
  line-height: 1.12;
  color: var(--livhc-forest);
  transform: scale(1.62);
  transform-origin: center top;
  margin: 0.2rem auto 1.45rem;
  max-width: 17em;
  animation: livhc-fade-up 0.8s cubic-bezier(0.22,1,0.36,1) 0.12s both;
}
#pnlContent2828 .livhc-sub {
  font-family: var(--livhc-sans);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--livhc-sage);
  opacity: 0.85;
  line-height: 1.5;
  transform: scale(0.8);
  transform-origin: center top;
  margin: 0 auto;
  max-width: 40em;
  animation: livhc-fade-up 0.8s cubic-bezier(0.22,1,0.36,1) 0.2s both;
}

/* ---- Field wrappers + labels -------------------------------------------- */
#pnlContent2828 .livhc-field { margin: 0 0 1.15rem; animation: livhc-fade-up 0.7s ease 0.28s both; }
#pnlContent2828 .livhc-field--phone { animation-delay: 0.34s; }
#pnlContent2828 .field-container { position: relative; margin: 0; }

#pnlContent2828 .control-label,
#pnlContent2828 label.control-label {
  display: block;
  text-align: left;
  width: 100%;
  margin: 0 0 0.4rem 0.15rem;
  padding: 0;
  font-family: var(--livhc-sans);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--livhc-forest);
  opacity: 0.9;
}

/* ---- Inputs -------------------------------------------------------------- */
#pnlContent2828 input.form-control,
#pnlContent2828 input.email,
#pnlContent2828 .intl-tel-input input {
  width: 100%;
  height: 3.55rem;
  box-sizing: border-box;
  padding: 0 1.1rem 0 3rem;
  border: 1.5px solid rgba(92,125,98,0.28);
  border-radius: 14px;
  background-color: rgba(255,255,255,0.9);
  background-repeat: no-repeat;
  background-position: 1rem center;
  background-size: 1.15rem;
  color: var(--livhc-ink);
  font-family: var(--livhc-sans);
  box-shadow: inset 0 2px 6px rgba(63,90,67,0.06);
  transition: border-color .35s ease, box-shadow .35s ease, background-color .35s ease, transform .35s ease;
  -webkit-appearance: none; appearance: none;
}
#pnlContent2828 input.email,
#pnlContent2828 input#dnn2828Email {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c7d62' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='2.5'/><path d='m3.5 7 8.5 6 8.5-6'/></svg>");
}
/* Name field — person icon (applies once it's a Textbox) */
#pnlContent2828 input#dnn2828Name.form-control {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c7d62' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/></svg>");
}
/* While Name is still a hidden "static text" field, collapse its wrapper
   so it leaves no empty gap. It reveals automatically once set to Textbox. */
#pnlContent2828 .livhc-field--name:has(input[aria-hidden="true"]) {
  display: none;
  margin: 0;
}
#pnlContent2828 input.form-control::placeholder,
#pnlContent2828 input.email::placeholder { color: #9fb09f; opacity: 1; }

#pnlContent2828 input.form-control:focus,
#pnlContent2828 input.email:focus,
#pnlContent2828 .intl-tel-input input:focus {
  outline: none;
  border-color: var(--livhc-sage);
  background-color: #fff;
  box-shadow: 0 0 0 4px var(--livhc-ring), inset 0 2px 6px rgba(63,90,67,0.05);
  transform: translateY(-1px);
}

/* ---- International phone widget — LOCKED TO US --------------------------- */
#pnlContent2828 .intl-tel-input { width: 100%; display: block; }
#pnlContent2828 .intl-tel-input .selected-flag {
  border-radius: 14px 0 0 14px;
  background: rgba(238,243,234,0.9);
  padding-left: 0.95rem;
  outline: none;
  /* US-only lock: flag is fixed, dropdown cannot be opened */
  pointer-events: none;
  cursor: default;
}
#pnlContent2828 .intl-tel-input .iti-arrow { display: none; }            /* no dropdown caret */
#pnlContent2828 .intl-tel-input .country-list { display: none !important; } /* no country menu */
#pnlContent2828 .intl-tel-input.allow-dropdown input {
  padding-left: 5.5rem;
  background-image: none;
}

/* ---- Register button ----------------------------------------------------- */
#pnlContent2828 .livhc-cta { animation: livhc-fade-up 0.8s ease 0.42s both; }
#pnlContent2828 .btn.submit,
#pnlContent2828 button#dnn2828Register,
#pnlContent2828 .form-button {
  position: relative;
  display: block;
  width: 100%;
  height: 3.7rem;
  margin-top: 0.7rem;
  border: none;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--livhc-sage) 0%, var(--livhc-forest) 100%);
  color: #fff;
  font-family: var(--livhc-sans);
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 16px 30px -12px rgba(63,90,67,0.6), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform .3s cubic-bezier(0.22,1,0.36,1), box-shadow .3s ease, filter .3s ease;
}
#pnlContent2828 .btn.submit::after,
#pnlContent2828 button#dnn2828Register::after { content: " →"; white-space: pre; }
#pnlContent2828 .btn.submit::before,
#pnlContent2828 button#dnn2828Register::before {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 70%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: skewX(-18deg);
}
#pnlContent2828 .btn.submit:hover,
#pnlContent2828 button#dnn2828Register:hover {
  transform: translateY(-3px);
  filter: saturate(1.12) brightness(1.04);
  box-shadow: 0 24px 42px -14px rgba(63,90,67,0.7), inset 0 1px 0 rgba(255,255,255,0.3);
}
#pnlContent2828 .btn.submit:hover::before,
#pnlContent2828 button#dnn2828Register:hover::before { animation: livhc-sweep 0.9s ease forwards; }
#pnlContent2828 .btn.submit:active,
#pnlContent2828 button#dnn2828Register:active { transform: translateY(-1px) scale(0.992); }

/* ---- Footer note --------------------------------------------------------- */
#pnlContent2828 .livhc-note {
  text-align: center;
  font-family: var(--livhc-sans);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--livhc-sage);
  opacity: 0.78;
  transform: scale(0.78);
  transform-origin: center top;
  margin: 1.2rem auto 0;
  animation: livhc-fade-up 0.8s ease 0.5s both;
}

/* validation / messages keep on-brand */
#pnlContent2828 .field-validation-error,
#pnlContent2828 .text-danger,
#pnlContent2828 [class*="error"] { color: #b4553d; font-family: var(--livhc-sans); }

/* ---- Motion -------------------------------------------------------------- */
@keyframes livhc-rise {
  from { opacity: 0; transform: translateY(26px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes livhc-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes livhc-float {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-12px) rotate(2deg); }
}
@keyframes livhc-drift {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(2%, 2%, 0) scale(1.06); }
}
@keyframes livhc-sweep { from { left: -120%; } to { left: 130%; } }

@media (prefers-reduced-motion: reduce) {
  #pnlContent2828.register-form,
  #pnlContent2828.register-form::before,
  #pnlContent2828.register-form::after,
  #pnlContent2828 .livhc-drop,
  #pnlContent2828 .livhc-title,
  #pnlContent2828 .livhc-sub,
  #pnlContent2828 .livhc-field,
  #pnlContent2828 .livhc-cta,
  #pnlContent2828 .livhc-note { animation: none !important; }
}

/* ---- Small screens ------------------------------------------------------- */
@media (max-width: 600px) {
  #pnlContent2828.register-form { border-radius: 24px; margin: 1.2rem auto; }
  #pnlContent2828 .livhc-title { transform: scale(1.4); }
}