/* HomeoValley auth, on the Clinical Green tokens.
   Mobile is treated as the real case: the form sits at the top, the
   reassurance drops below it and shrinks, and the type scale comes down so
   the whole thing reads as an app screen rather than a landing page. */

.hva {
  --bg:#F5F9F8; --surface:#FFFFFF; --ink:#12312A; --muted:#54756D;
  --accent:#0E7C6B; --accent-dark:#0A5F52; --accent-deep:#083F35;
  --tint:#EAF4F1; --line:#DCE8E4; --alert:#C62828;
  --r-in:10px; --r-card:14px; --r-pill:99px;
  font-family: Manrope, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
.hva * { box-sizing: border-box; }

/* ---------- phone: form first, compact ---------- */

.hva__sheet { order: 1; padding: 22px 16px 26px; }
.hva__side  { order: 2; padding: 20px 16px 24px; background: var(--tint); color: var(--ink); }

.hva__in { width: 100%; max-width: 400px; margin-inline: auto; }

.hva__in h2 {
  font-family: Merriweather, Georgia, serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.25;
  margin: 0 0 6px;
  color: var(--ink);
}
.hva__p { font-size: 13px; color: var(--muted); margin: 0 0 18px; line-height: 1.5; }
.hva__who { font-size: 13px; color: var(--muted); margin: 0 0 16px; line-height: 1.5; }
.hva__who b { color: var(--ink); font-variant-numeric: tabular-nums; }

.hva__link {
  border: 0; background: none; padding: 1px 2px;
  color: var(--accent); font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; text-decoration: underline;
}

.hva__f { margin-bottom: 13px; position: relative; }
.hva__f label {
  display: block; margin-bottom: 5px;
  font-size: 12px; font-weight: 600; color: var(--muted);
  letter-spacing: .01em;
}
.hva__opt { font-weight: 500; opacity: .75; }
.hva__f input {
  width: 100%;
  height: 46px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-in);
  background: var(--surface);
  font-family: inherit;
  font-size: 16px;            /* 16px keeps iOS from zooming on focus */
  color: var(--ink);
}
.hva__f input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.hva__hint { display: block; margin-top: 5px; font-size: 11.5px; color: var(--muted); line-height: 1.45; }

.hva__f--tel .hva__cc {
  position: absolute; left: 13px; bottom: 0; height: 46px;
  display: flex; align-items: center;
  font-size: 16px; color: var(--muted); pointer-events: none;
}
.hva__f--tel input { padding-left: 49px; }

.hva__btn {
  display: block; width: 100%;
  height: 46px; padding: 0 18px;
  border: 0; border-radius: var(--r-pill);
  background: var(--accent); color: #fff;
  font-family: inherit; font-size: 14.5px; font-weight: 700;
  cursor: pointer; text-align: center; text-decoration: none;
  line-height: 46px;
  transition: background 140ms ease;
}
.hva__btn:hover, .hva__btn:focus { background: var(--accent-dark); color: #fff; }
.hva__btn[aria-busy="true"] { opacity: .55; pointer-events: none; }
.hva__btn--ghost {
  margin-top: 9px;
  background: var(--surface);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--line);
}
.hva__btn--ghost:hover { background: var(--tint); color: var(--accent-dark); }

.hva__otp { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; margin-bottom: 16px; }
.hva__otp input {
  width: 100%; height: 48px; padding: 0;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--r-in);
  background: var(--surface);
  font-family: inherit; font-size: 19px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.hva__otp input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.hva__otp.is-bad input { border-color: var(--alert); }
.hva__otp.is-bad { animation: hvaNudge 220ms ease; }
@keyframes hvaNudge { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }

.hva__msg {
  padding: 9px 11px; margin-bottom: 14px;
  border-radius: var(--r-in);
  font-size: 12.5px; line-height: 1.45;
  background: #FBEDEB; border: 1px solid #F3D6D3; color: #8A2F26;
}
.hva__msg.is-ok { background: var(--tint); border-color: var(--line); color: var(--accent-dark); }

.hva__alt { margin: 14px 0 0; font-size: 13px; color: var(--muted); text-align: center; }
.hva__alt a { color: var(--accent); font-weight: 600; }

.hva__fine--bottom {
  margin-top: 18px; padding-top: 13px;
  border-top: 1px solid var(--line);
  color: var(--muted); font-size: 11.5px; line-height: 1.5; text-align: center;
}
.hva__fine--bottom a { color: var(--muted); text-decoration: underline; }

/* Reassurance, now a quiet strip under the form */
.hva__side h1 {
  font-family: Merriweather, Georgia, serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  color: var(--accent-dark);
  margin: 0 0 11px;
  max-width: 400px;
  margin-inline: auto;
}
.hva__side ul {
  list-style: none; margin: 0 auto; padding: 0;
  display: grid; gap: 7px; max-width: 400px;
}
.hva__side li {
  position: relative; padding-left: 22px;
  font-size: 12.5px; line-height: 1.45; color: var(--muted);
}
.hva__side li::before {
  content: ""; position: absolute; left: 1px; top: 4px;
  width: 11px; height: 6px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.hva__fine { display: none; }

/* ---------- desktop: side by side, full size ---------- */

@media (min-width: 900px) {
  .hva { display: grid; grid-template-columns: 1fr 1fr; min-height: 76vh; }

  .hva__side {
    order: 0;
    background: linear-gradient(160deg, var(--accent) 0%, var(--accent-dark) 100%);
    color: #fff;
    padding: 56px 48px;
    display: flex; flex-direction: column; justify-content: center;
  }
  .hva__side h1 { font-size: 32px; color: #fff; margin: 0 0 20px; max-width: none; }
  .hva__side ul { gap: 12px; max-width: none; }
  .hva__side li { padding-left: 27px; font-size: 14.5px; color: rgba(255,255,255,.92); }
  .hva__side li::before {
    top: 6px; width: 15px; height: 9px;
    border-color: rgba(255,255,255,.85);
  }
  .hva__fine { display: block; font-size: 12.5px; color: rgba(255,255,255,.75); margin: 20px 0 0; }

  .hva__sheet { order: 1; padding: 56px 48px; display: flex; align-items: center; }
  .hva__in { max-width: 400px; }
  .hva__in h2 { font-size: 24px; }
  .hva__p { font-size: 14px; margin-bottom: 22px; }
}
/* ==========================================================================
   Phone: the auth screen as a card.

   Same shape as the booking gate, so signing in from the Book tab and from
   the Sign in tab feel like one flow rather than two different screens.
   ========================================================================== */

@media (max-width: 899px) {

  .hva { background: #F5F9F8; padding: 10px 12px 18px; }

  .hva__sheet {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px 16px 20px;
  }

  /* The reassurance drops out of the card and reads as a quiet footnote. */
  .hva__side {
    background: none;
    padding: 16px 4px 0;
  }
  .hva__side h1 {
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: .02em;
    text-transform: uppercase;
    font-family: Manrope, sans-serif;
    margin-bottom: 9px;
  }
  .hva__side li { font-size: 12.5px; }
  .hva__side li::before {
    background: none;
    border: 0;
    border-left: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    border-radius: 0;
    box-shadow: none;
    width: 10px;
    height: 5px;
    top: 4px;
  }

  .hva__in h2 { font-size: 18px; }
  .hva__fine--bottom { margin-top: 16px; padding-top: 12px; }
}
/* ==========================================================================
   One title per page.
   The theme prints its own heading above the card, which then says the same
   thing again. The card heading is the accurate one, so it carries the h1
   and the theme's is removed.
   ========================================================================== */

body.hvapp-auth-page .page-header,
body.hvapp-auth-page .entry-title,
body.hvapp-auth-page h1.entry-title,
body.hvapp-auth-page .elementor-page-title { display: none; }

.hva__in h1 {
  font-family: Merriweather, Georgia, serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  margin: 0 0 6px;
  color: var(--ink);
}

.hva__sideh {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .02em;
  text-transform: uppercase;
  font-family: Manrope, sans-serif;
  margin: 0 0 9px;
}

@media (min-width: 900px) {
  .hva__in h1 { font-size: 24px; margin-bottom: 8px; }
  .hva__sideh {
    font-family: Merriweather, Georgia, serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: normal;
    text-transform: none;
    color: #fff;
    margin: 0 0 20px;
  }
}
/* ==========================================================================
   Corrections

   1. The theme styles every h2 on the page: large serif, and a red rule
      underneath via ::after. That was landing on the footnote heading and
      making it shout louder than the form. Beaten with specificity rather
      than !important, and the rule is switched off.
   2. The card was too tight once the type came down, so it gets its
      breathing room back.
   ========================================================================== */

@media (max-width: 899px) {

  .hva .hva__side { padding: 20px 4px 0; }

  .hva .hva__sideh {
    font-family: Manrope, -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 12px;
    padding: 0;
    border: 0;
  }
  .hva .hva__sideh::after,
  .hva .hva__sideh::before { content: none; display: none; }

  .hva .hva__side ul { gap: 9px; }
  .hva .hva__side li { font-size: 13px; color: var(--muted); padding-left: 24px; }

  /* Card: room to breathe */
  .hva { padding: 12px 12px 22px; }
  .hva__sheet { padding: 22px 18px 24px; }

  .hva__in h1 { font-size: 19px; margin-bottom: 8px; }
  .hva__p { font-size: 13.5px; margin-bottom: 22px; }

  .hva__f { margin-bottom: 16px; }
  .hva__f label { font-size: 12.5px; margin-bottom: 7px; }
  .hva__f input { height: 50px; }
  .hva__f--tel .hva__cc { height: 50px; }

  .hva__btn { height: 50px; line-height: 50px; font-size: 15px; }

  .hva__otp { gap: 8px; margin-bottom: 18px; }
  .hva__otp input { height: 50px; font-size: 20px; }

  .hva__fine--bottom { margin-top: 20px; padding-top: 14px; }
}
/* ==========================================================================
   Buttons

   The theme styles every button and .button on the page, so the pill shape
   was being overwritten and the two variants did not match. These are
   written against the block and the element together, which beats the
   theme without reaching for !important. Flex centring is used instead of
   line-height so an <a> and a <button> sit identically.
   ========================================================================== */

.hva a.hva__btn,
.hva button.hva__btn,
.hva .hva__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  min-height: 50px;
  padding: 0 20px;
  margin: 0;
  border: 0;
  border-radius: 99px;
  background: var(--accent);
  color: #fff;
  font-family: Manrope, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  box-shadow: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: background 140ms ease;
}

.hva a.hva__btn:hover,
.hva button.hva__btn:hover,
.hva .hva__btn:hover,
.hva .hva__btn:focus {
  background: var(--accent-dark);
  color: #fff;
  box-shadow: none;
}

.hva .hva__btn:focus-visible {
  outline: 2px solid var(--accent-dark);
  outline-offset: 2px;
}

.hva .hva__btn[aria-busy="true"] { opacity: .55; pointer-events: none; }

/* Secondary: same shape, quiet fill */
.hva a.hva__btn--ghost,
.hva button.hva__btn--ghost,
.hva .hva__btn--ghost {
  margin-top: 10px;
  background: #fff;
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.hva .hva__btn--ghost:hover,
.hva .hva__btn--ghost:focus {
  background: var(--tint);
  color: var(--accent-dark);
  box-shadow: inset 0 0 0 1px var(--accent-dark);
}
/* ==========================================================================
   Holding the theme off the form

   Hello Elementor plus the kit style every input, button and heading on the
   page. That was inflating the fields, turning the small "change" link into
   a solid green button, and drawing a red rule under the headings. Each of
   these is written against the block and the element so it wins on
   specificity rather than on !important.
   ========================================================================== */

/* Headings inside the card: no decorative rule */
.hva .hva__in h1::after,
.hva .hva__in h1::before,
.hva .hva__in h2::after,
.hva .hva__in h2::before { content: none; display: none; }
.hva .hva__in h1,
.hva .hva__in h2 { padding: 0; border: 0; text-transform: none; }

/* The change control is a link, not a button */
.hva button.hva__link,
.hva .hva__link {
  display: inline;
  width: auto;
  min-height: 0;
  height: auto;
  padding: 0 2px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  background-color: transparent;
  color: var(--accent);
  font-family: Manrope, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: inherit;
  text-transform: none;
  text-decoration: underline;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.hva button.hva__link:hover,
.hva .hva__link:hover {
  background: none;
  color: var(--accent-dark);
}

/* Text fields: one height, everywhere */
.hva .hva__f input[type="tel"],
.hva .hva__f input[type="text"],
.hva .hva__f input[type="email"],
.hva .hva__f input[type="password"],
.hva .hva__f input {
  display: block;
  width: 100%;
  height: 50px;
  min-height: 50px;
  max-height: 50px;
  padding: 0 13px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
  font-family: Manrope, -apple-system, sans-serif;
  font-size: 16px;
  line-height: normal;
  color: var(--ink);
  appearance: none;
  -webkit-appearance: none;
}
.hva .hva__f input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
  box-shadow: none;
}
.hva .hva__f--tel input[type="tel"] { padding-left: 49px; }

/* Labels */
.hva .hva__f label {
  display: block;
  margin: 0 0 7px;
  padding: 0;
  font-family: Manrope, -apple-system, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

/* Code boxes: six equal squares, not six tall fields */
.hva .hva__otp { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.hva .hva__otp input[type="text"],
.hva .hva__otp input {
  width: 100%;
  height: 52px;
  min-height: 52px;
  max-height: 52px;
  padding: 0;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
  text-align: center;
  font-family: Manrope, -apple-system, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: normal;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  appearance: none;
  -webkit-appearance: none;
}
.hva .hva__otp input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

/* Supporting text */
.hva .hva__hint,
.hva .hva__who,
.hva .hva__p {
  font-family: Manrope, -apple-system, sans-serif;
  text-transform: none;
}
.hva .hva__hint { font-size: 12px; line-height: 1.45; margin: 6px 0 0; color: var(--muted); }
.hva .hva__who  { font-size: 13px; line-height: 1.5; }