/* WellHeart London — voice enquiry page. Reuses the design tokens/buttons
   from app.css; adds only the widget, captions, form and safety styles. */

.voice-wrap { max-width: 760px; margin: 0 auto; padding: 56px var(--gutter) var(--section); }
.voice-wrap--short { padding-top: 72px; max-width: 560px; }
.voice-back {
  display: inline-block; margin-bottom: 14px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--secondary); text-decoration: none;
}
.voice-back:hover { color: var(--primary); text-decoration: underline; }
.voice-head { text-align: center; margin-bottom: 22px; }
.voice-head .brand-logo { height: 46px; width: auto; display: inline-block; margin-bottom: 16px; }
.voice-head .brand-word { display: inline-block; margin-bottom: 22px; font-family: 'Playfair Display', Georgia, serif; font-weight: 600; font-size: 26px; letter-spacing: .01em; color: var(--mid, #00081E); text-decoration: none; }
.voice-head .lede { max-width: 46ch; margin: 10px auto 0; font-size: 16px; line-height: 1.5; }

/* Emergency banner — always visible, never dismissible. */
.emergency {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid #e7c9c9; background: #fbf1f1; color: #6b1f1f;
  border-radius: var(--radius); padding: 14px 16px; margin: 0 0 28px;
  font-size: 14px; line-height: 1.55;
}
.emergency strong { color: #8a1b1b; }
/* [hidden] alone can't hide a flex box, so honour it explicitly: the banner
   stays hidden until voice-page.js un-hides it when the assistant starts. */
.emergency[hidden] { display: none; }

/* Voice widget */
.voice-card {
  border: 1px solid var(--hairline); background: var(--white);
  border-radius: var(--radius); padding: 32px; text-align: center;
}
.voice-mic {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--primary); color: var(--on-primary);
  border: 0; border-radius: var(--radius); cursor: pointer;
  padding: 16px 30px; font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: background-color .25s ease;
}
.voice-mic:hover { background: var(--primary-container); }
.voice-mic[disabled] { opacity: .5; cursor: default; }
.voice-mic.is-live { background: var(--secondary); }
.voice-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--secondary-fixed); }
.voice-mic.is-live .voice-dot { background: #fff; animation: vpulse 1.6s infinite; }
@keyframes vpulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.voice-status { margin-top: 16px; font-size: 13px; color: var(--on-surface-variant); min-height: 1.2em; }
.voice-fine { margin-top: 14px; font-size: 12px; color: var(--on-surface-variant); }

/* Live captions */
.voice-captions {
  margin-top: 22px; text-align: left; max-height: 220px; overflow-y: auto;
  border-top: 1px solid var(--hairline); padding-top: 16px; display: none;
}
.voice-captions.has-lines { display: block; }
.cap { margin: 0 0 10px; font-size: 15px; line-height: 1.5; }
.cap .who { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--secondary); display: block; }
.cap.you .who { color: var(--on-surface-variant); }

/* Callback form */
.callback { margin-top: 40px; border: 1px solid var(--hairline); background: var(--surface-stone); border-radius: var(--radius); padding: 32px; }
.callback h2 { font-family: var(--serif); font-weight: 600; font-size: 22px; color: var(--primary); margin: 0 0 6px; }
.callback .sub { font-size: 14px; color: var(--on-surface-variant); margin: 0 0 22px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary); margin-bottom: 6px; }
.field input, .field select {
  width: 100%; font: inherit; font-size: 16px; color: var(--on-background);
  background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: 12px 14px;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--primary); }
.consent { display: flex; gap: 10px; align-items: flex-start; margin: 22px 0; font-size: 14px; line-height: 1.5; color: var(--on-surface-variant); }
.consent input { margin-top: 3px; flex-shrink: 0; }
.consent a { color: var(--secondary); text-decoration: underline; }
.callback .btn { width: 100%; }
.form-msg { margin-top: 14px; font-size: 14px; }
.form-msg.ok { color: #1f6b3a; }
.form-msg.err { color: var(--error); }

.fees-row { margin-top: 26px; text-align: center; font-size: 14px; color: var(--on-surface-variant); }
.fees-row a { color: var(--secondary); text-decoration: underline; font-weight: 600; }

.voice-unavail { margin-top: 20px; font-size: 13px; color: var(--on-surface-variant); text-align: center; }

@media (max-width: 767px) {
  .voice-wrap { padding-top: 26px; }
}

.voice-alt{color:var(--secondary);font-weight:600;text-decoration:underline;white-space:nowrap}
.voice-status.is-blocked{color:#cc0000;font-weight:600}
.voice-status.is-blocked .voice-alt{color:#cc0000}


/* ── 1. Call us — the first option on the page ─────────────────────────────
   A clinic is reached fastest by telephone, so the number is the strongest
   thing here: one solid rectangle, brand colours, tappable along its whole
   width. Rectangular (2px), restrained, no ornament. */
.callnow-wrap { margin: 0 0 14px; }
.callnow {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 18px; border-radius: var(--radius);
  background: var(--primary-container); color: var(--white);
  text-decoration: none; border: 1px solid var(--primary-container);
}
.callnow:hover { background: var(--primary); border-color: var(--primary); }
.callnow-ico { display: inline-flex; flex: 0 0 auto; color: var(--secondary-fixed); }
.callnow-ico .icon { width: 24px; height: 24px; }
.callnow-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.callnow-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--secondary-fixed);
}
.callnow-num {
  font-family: var(--serif); font-size: 25px; line-height: 1.15; font-weight: 600;
  letter-spacing: 0.01em; white-space: nowrap;
  /* A telephone number must read the same in Arabic as in English: isolate it from the
     surrounding RTL run, which otherwise reverses the digit groups. */
  direction: ltr; unicode-bidi: isolate;
}
[dir="rtl"] .callnow-num { text-align: right; }
.callnow-hours { margin: 7px 0 0; font-size: 12.5px; color: var(--on-surface-variant); text-align: center; }

/* The safety line stays visible at all times — it is the one thing on this page
   that can matter in the next five minutes. Compact, never a shouting banner. */
.urgent-line {
  margin: 0 0 18px; padding: 9px 12px;
  border-left: 2px solid #b3736f; background: #fbf4f3; color: #6b1f1f;
  font-size: 12.5px; line-height: 1.5; border-radius: 0 var(--radius) var(--radius) 0;
}
.urgent-line strong { color: #8a1b1b; font-weight: 700; }
[dir="rtl"] .urgent-line { border-left: 0; border-right: 2px solid #b3736f; border-radius: var(--radius) 0 0 var(--radius); }
/* Once the assistant is open, its own (fuller) emergency banner says the same thing and more —
   two identical 999 warnings on one screen is noise, so the compact line stands down. */
.gate-passed .urgent-line { display: none; }

/* ── 3. Ask the assistant — offered after we have a way to reach them ────── */
.or-ask { margin: 30px 0 12px; }
.or-ask h2 { font-family: var(--serif); font-size: 20px; font-weight: 600; margin: 0 0 6px; color: var(--primary); }
.or-ask .sub { margin: 0; font-size: 14px; line-height: 1.55; color: var(--on-surface-variant); }

@media (max-width: 640px) {
  .callnow { padding: 12px 14px; gap: 12px; }
  .callnow-num { font-size: 23px; }
  .voice-head .brand-logo { height: 40px; margin-bottom: 12px; }
  .voice-head .lede { font-size: 15px; }
  .voice-wrap--short { padding-top: 40px; }
}

/* ── The two assistants, as a pair ─────────────────────────────────────────
   Talk or type — the same job, so the same button, side by side and exactly
   the same size. Equal columns, so neither reads as the "real" one and the
   other as an afterthought. They stay two-up on a phone (both labels are two
   short words) and only stack on the narrowest handsets, where side-by-side
   would squeeze the text. */
.assist-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  max-width: 480px; margin: 0 auto;
}
/* One assistant switched off → one button, centred at a sane width rather than
   stretched across a column meant for two. */
.assist-actions--one { grid-template-columns: 1fr; max-width: 280px; }
.voice-card .voice-mic { width: 100%; justify-content: center; }
/* Two ways of saying the same thing, so two identical buttons — neither is the
   afterthought. "In use" is the same tell the microphone already uses: the
   secondary colour, nothing louder. */
.voice-mic--chat.is-open { background: var(--secondary); }
.voice-mic .voice-mic-ico { display: inline-flex; }
.voice-mic .icon { width: 18px; height: 18px; }

/* The chat, in place — no second page, so one Submit button serves both. */
.voice-chat {
  margin-top: 22px; text-align: start;
  border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden;
}
.voice-chat[hidden] { display: none; }
.voice-chat .chat-log { min-height: 150px; padding: 18px; }
.voice-chat .chat-input { position: static; box-shadow: none; }
/* On a phone the composer is only ~150px wide, so a one-line box clips a wrapped
   placeholder. Give it the two lines it actually needs rather than a cut-off word. */
.voice-chat .chat-input textarea { min-height: 52px; }

/* What pressing Submit does, said once, plainly, where the finger is. */
.submit-note {
  margin: 14px 0 0; font-size: 11.5px; line-height: 1.6; color: #74767d;
}
.submit-note a { color: var(--secondary); }

@media (max-width: 640px) {
  /* 32px of card padding either side left the two buttons ~138px each, which wrapped
     "Chat with us" onto a second line and made the pair look uneven. Give the card a
     phone-sized inset and the labels the room to sit on one line. */
  .voice-card { padding: 22px 16px; }
  .assist-actions { gap: 10px; }
  .voice-card .voice-mic { padding: 15px 10px; gap: 7px; font-size: 11px; letter-spacing: .05em; }
  .voice-card .voice-mic .icon { width: 16px; height: 16px; }
  .voice-chat .chat-log { padding: 14px; }
  .voice-chat .chat-input { padding: 12px; gap: 8px; }
  .voice-chat .chat-send { padding: 12px 16px; }
}
@media (max-width: 359px) {
  .assist-actions { grid-template-columns: 1fr; }
}

/* The "chat instead" escape offered when a workplace firewall kills the audio
   channel is a button now (the chat is on this page), so it must not inherit
   the browser's button chrome — it is a link in every visible respect. */
button.voice-alt {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
}
.voice-chat .chat-input[hidden] { display: none; }

/* ── Submit, where the conversation ends ──────────────────────────────────
   The details card that used to sit below repeated what the transcript above
   already showed, so Submit now lives in the assistant card itself and the
   summary folds away behind one link. */
/* Submit is not on the page until the visitor has actually told the assistant something, and when
   it arrives it should arrive quietly — a soft rise into place, over half a second, the way a
   receptionist slides a form across a desk rather than dropping it. It sits below the conversation
   and below the fine print, so nothing already read moves under a finger. */
.assist-submit { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--hairline); }
/* The default state is VISIBLE, and the fade is an animation played on arrival — not an opacity:0
   that a class has to undo. Written the other way round, a class that fails to land for any reason
   leaves the Submit button on the page and completely invisible, which is worse than no animation
   at all. Caught exactly that on 2026-08-20 while testing this. */
/* No fill-mode. With `both` the element sits at the animation's "from" — invisible — for as long as
   the animation is pending, and stays there for good if it never runs at all (a background tab, a
   browser with animations off). Without it, the resting state is the normal, visible one and the
   fade is purely something that happens on the way in. */
.assist-submit.is-in { animation: whRise .55s cubic-bezier(.22,.61,.36,1); }
@keyframes whRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .assist-submit.is-in { animation: none; } }
.assist-submit .btn { width: 100%; }
.assist-submit .field { text-align: start; margin: 16px 0 0; }
.assist-submit .field[hidden] { display: none; }
.assist-submit .details-field textarea {
  width: 100%; font: inherit; font-size: 15px; line-height: 1.6; color: var(--on-background);
  background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: 12px 14px; resize: vertical;
}
.assist-submit .details-field textarea:focus { outline: none; border-color: var(--primary); }
.review-row { margin: 12px 0 0; }
/* A link in every visible respect — it just happens to be a button, because it
   toggles rather than navigates. */
.review-toggle {
  background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--secondary); text-decoration: underline; cursor: pointer;
}
.review-toggle:hover { color: var(--primary); }
.assist-submit .submit-note { text-align: center; max-width: 58ch; margin-inline: auto; }
.assist-submit .form-msg { text-align: center; }

/* ── The 999/111 stop ─────────────────────────────────────────────────────
   Shown when either assistant refers someone to the emergency services. Not a
   notice — the page's only remaining job. Same restrained palette as the
   emergency banner, but the two things to tap are unmistakable and full width,
   because the person reading this may be doing so one-handed and frightened. */
.emergency-act {
  border: 1px solid #d9a9a6; background: #fbf1f1; border-radius: var(--radius);
  padding: 22px 22px 24px; margin: 0 0 22px;
}
.emergency-act[hidden] { display: none; }
.emergency-act h2 {
  font-family: var(--serif); font-size: 23px; font-weight: 600; line-height: 1.25;
  color: #8a1b1b; margin: 0 0 10px;
}
.emergency-act p { font-size: 14.5px; line-height: 1.6; color: #6b1f1f; margin: 0 0 18px; }
.emergency-act-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.btn--emg {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; background: #a81f1f; color: #fff; border: 1px solid #a81f1f;
  border-radius: var(--radius); padding: 16px 14px;
  font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none;
}
.btn--emg:hover { background: #8a1b1b; border-color: #8a1b1b; color: #fff; }
.btn--emg .icon { width: 17px; height: 17px; }
/* 111 is the calmer of the two and must not compete with 999 for the thumb. */
.btn--emg-alt { background: transparent; color: #8a1b1b; border-color: #c08d8a; }
.btn--emg-alt:hover { background: #f4e2e1; color: #8a1b1b; border-color: #a81f1f; }
@media (max-width: 480px) {
  .emergency-act { padding: 18px 16px 20px; }
  .emergency-act h2 { font-size: 20px; }
  .emergency-act-btns { grid-template-columns: 1fr; }
}