/* ==========================================================================
   Quick enquiry (site-wide): bottom sheet on phones, small centred dialog from 640px.
   Opened by any element with data-enquire="<course key>" (js/quick-enquiry.js).
   Also here: the slim "Enquire + call/WhatsApp icons" action row, the quiet prospectus link,
   and the small "Enquire" chip beside the floating WhatsApp button.
   Needs tokens.css + base.css.
   ========================================================================== */

/* Slim action row: one primary Enquire, then small round Call / WhatsApp icons */
.qe-actions { display: flex; align-items: center; gap: var(--s-1); flex-wrap: wrap; }
.qe-actions .btn { min-height: 44px; padding-inline: 1.75rem; }
.qe-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 2px solid var(--c-line);
  border-radius: 50%;
  background: var(--c-white);
  color: var(--c-charcoal);
  transition: border-color var(--ease), background var(--ease), color var(--ease);
}
.qe-icon-btn:hover { border-color: var(--c-charcoal); background: var(--c-charcoal); color: var(--c-white); }
.qe-icon-btn svg { width: 20px; height: 20px; }
.qe-icon-btn--wa { color: #0E7C3F; }
.qe-icon-btn--wa:hover { background: #0E7C3F; border-color: #0E7C3F; color: var(--c-white); }

/* Quiet text links on cards: ask, download */
.card__quiet { display: flex; flex-wrap: wrap; gap: 2px var(--s-3); padding-top: var(--s-1); border-top: 1px solid var(--c-line); font-size: var(--fs-sm); }
.qe-link, .qe-prospectus a {
  display: inline-flex; align-items: center; gap: 0.4em;
  min-height: 44px;
  font-size: var(--fs-sm);
  color: var(--c-link-text);
  text-decoration: none;
  background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit;
}
.qe-link:hover, .qe-prospectus a:hover { text-decoration: underline; }
.qe-link svg, .qe-prospectus svg { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.qe-prospectus { margin-top: var(--s-1); }

/* Chip beside the floating WhatsApp button (phones and tablets, like the button itself) */
.enquire-chip {
  position: fixed;
  right: calc(var(--s-2) + 56px + var(--s-1));
  bottom: calc(var(--s-2) + 6px);
  z-index: 50;
  display: inline-flex; align-items: center; gap: 0.4em;
  min-height: 44px;
  padding: 0 1.1rem;
  font-family: var(--ff-display);
  font-size: 1rem;
  color: var(--c-white);
  background: var(--c-charcoal);
  border-radius: 99px;
  box-shadow: var(--shadow-float);
  text-decoration: none;
}
.enquire-chip:hover { background: var(--c-slate); color: var(--c-white); }
.enquire-chip svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 960px) { .enquire-chip { display: none; }}
/* Pages that already carry their own sticky contact bar, or sit under the signup bar, or are the form itself */
.page-test-series .enquire-chip, .page-writing-practice .enquire-chip, .page-enquiry-form .enquire-chip,
.page-contact .enquire-chip, .has-signup-bar .enquire-chip { display: none; }

/* The sheet ---------------------------------------------------------------- */
html.qe-lock { overflow: hidden; }
dialog.qe {
  position: fixed; inset: 0;
  width: 100%; max-width: none; height: 100%; max-height: none;
  margin: 0; padding: 0;
  border: 0; background: transparent;
  color: var(--c-text);
  overflow: hidden;
}
dialog.qe[open] { display: flex; align-items: flex-end; justify-content: center; }
dialog.qe::backdrop { background: rgba(20, 24, 28, 0.55); }
.qe__sheet {
  position: relative;
  width: 100%; max-height: 100%;
  overflow-y: auto; overscroll-behavior: contain;
  padding: var(--s-1) var(--s-3) var(--s-3);
  background: var(--c-white);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.25);
  animation: qe-up 260ms cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes qe-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.qe__grab { width: 44px; height: 4px; margin: 4px auto var(--s-2); border-radius: 99px; background: var(--c-line); }
.qe__close {
  position: absolute; top: 6px; right: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--c-slate); cursor: pointer;
}
.qe__close:hover { background: var(--c-surface); color: var(--c-charcoal); }
.qe__close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.qe [hidden] { display: none !important; }
.qe__panel { display: grid; gap: var(--s-2); }
.qe__kicker { font-family: var(--ff-display); font-size: var(--fs-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-red-text); padding-right: 44px; }
.qe__title { font-size: 1.5rem; line-height: var(--lh-tight); color: var(--c-charcoal); text-wrap: balance; }
.qe__title:focus { outline: none; }
.qe__sub { color: var(--c-text-muted); margin-top: calc(-1 * var(--s-1)); }
.qe__batch { font-size: var(--fs-sm); color: var(--c-text); margin-top: calc(-1 * var(--s-1)); }
.qe__fail {
  padding: var(--s-1) var(--s-2);
  border-left: 4px solid var(--c-red-text);
  background: #FFF4F4;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
}
.qe__fail[hidden] { display: none; }

.qe__form { display: grid; gap: var(--s-2); }
.qe__field { display: grid; gap: 6px; min-width: 0; }
.qe__label { font-family: var(--ff-display); font-size: 1.0625rem; color: var(--c-slate); }
.qe__input {
  width: 100%; min-height: 52px;
  padding: 0.625rem 0.875rem;
  font: inherit; font-size: 1.0625rem; line-height: 1.4;
  color: var(--c-text); background: var(--c-white);
  border: 2px solid var(--c-slate); border-radius: var(--radius);
  transition: border-color var(--ease), box-shadow var(--ease);
}
.qe__input::placeholder { color: #7A828E; }
.qe__input:focus { outline: none; border-color: var(--c-focus); box-shadow: 0 0 0 3px rgba(31, 111, 178, 0.25); }
.qe__field.is-invalid .qe__input, .qe__field.is-invalid .qe__phone { border-color: var(--c-red-text); }
.qe__phone { display: flex; border: 2px solid var(--c-slate); border-radius: var(--radius); background: var(--c-white); }
.qe__phone:focus-within { border-color: var(--c-focus); box-shadow: 0 0 0 3px rgba(31, 111, 178, 0.25); }
.qe__prefix { display: inline-flex; align-items: center; padding-inline: 0.875rem; font-family: var(--ff-display); font-size: 1.0625rem; color: var(--c-slate); background: var(--c-surface); border-right: 2px solid var(--c-line); border-radius: 4px 0 0 4px; }
.qe__phone .qe__input { min-height: 48px; border: 0; box-shadow: none; border-radius: 0; flex: 1 1 auto; min-width: 0; }
.qe__error { display: flex; gap: 0.5em; font-size: var(--fs-sm); font-weight: 700; color: var(--c-red-text); }
.qe__error::before { content: "!"; flex: 0 0 auto; width: 1.25em; height: 1.25em; margin-top: 0.1em; border-radius: 50%; background: var(--c-red-text); color: #fff; font-size: 0.8em; line-height: 1.25em; text-align: center; }
.qe__error[hidden] { display: none; }
.qe__note-toggle { justify-self: start; }
.qe__textarea { min-height: 84px; resize: vertical; }
.qe__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.qe__send { width: 100%; min-height: 52px; font-size: 1.0625rem; }
.qe__send:disabled { opacity: 0.75; cursor: wait; }
.qe__fine { font-size: var(--fs-sm); color: var(--c-text-muted); text-align: center; margin-top: calc(-1 * var(--s-1)); }

.qe__alt { display: grid; gap: var(--s-1); padding-top: var(--s-2); border-top: 1px solid var(--c-line); }
.qe__alt-label { font-size: var(--fs-sm); color: var(--c-text-muted); text-align: center; }
.qe__alt-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-1); }
.qe__alt .btn, .qe__panel .qe__wa, .qe__panel .qe__call { min-height: 48px; padding-inline: 0.75rem; white-space: normal; }
.qe__wa { background: #0E7C3F; border-color: #0E7C3F; }
.qe__wa:hover { background: #0A6633; border-color: #0A6633; }
.qe__wa svg, .qe__call svg { width: 20px; height: 20px; flex: 0 0 auto; }
.qe__call svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.qe__wa svg { fill: currentColor; }

.qe__badge { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #1E8E3E; animation: qe-pop 400ms cubic-bezier(.2, 1.4, .4, 1) both; }
.qe__badge svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes qe-pop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.qe__text { color: var(--c-text-muted); }
.qe__done-actions { display: grid; gap: var(--s-1); }
.qe-pref { display: grid; gap: var(--s-1); padding: var(--s-2); background: var(--c-surface); border-radius: var(--radius); }
.qe-pref__q { font-family: var(--ff-display); font-size: 1.0625rem; color: var(--c-charcoal); }
.qe-pref__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-1); }
.qe-pref__btn { display: grid; justify-items: center; gap: 4px; min-width: 0; min-height: 60px; padding: 8px 2px; font-family: var(--ff-display); font-size: 0.9375rem; color: var(--c-charcoal); background: var(--c-white); border: 2px solid var(--c-line); border-radius: var(--radius); cursor: pointer; }
.qe-pref__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.qe-pref__btn--wa svg { fill: currentColor; stroke: none; }
.qe-pref__btn:hover { border-color: var(--c-slate); }
.qe-pref__btn:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.qe-pref__btn[aria-pressed="true"] { background: var(--c-charcoal); border-color: var(--c-charcoal); color: #fff; }
.qe-pref__msg { font-size: var(--fs-sm); }

@media (min-width: 640px) {
  dialog.qe[open] { align-items: center; padding: var(--s-3); }
  .qe__sheet { max-width: 460px; padding: var(--s-2) var(--s-4) var(--s-4); border-radius: var(--radius-lg); animation-name: qe-fade; }
  .qe__grab { display: none; }
  .qe__panel { padding-top: var(--s-3); }
  @keyframes qe-fade { from { transform: translateY(12px) scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) { .qe__sheet, .qe__badge { animation: none; } }

/* Foundation batch popup: date block + course facts above the form (js/quick-enquiry.js, promoEl) */
.qe__promo { display: flex; gap: var(--s-2); align-items: stretch; padding: var(--s-2); margin: 0 0 var(--s-1); background: #FBF3F2; border-left: 4px solid var(--c-red-text); border-radius: var(--radius); }
.qe__date { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 76px; padding: var(--s-1) var(--s-2); background: var(--c-charcoal); color: var(--c-white); border-radius: var(--radius); line-height: 1; text-align: center; }
.qe__date b { font-family: var(--ff-display); font-size: 2.4rem; font-weight: 400; }
.qe__date span { font-family: var(--ff-display); font-size: 1.05rem; letter-spacing: 0.12em; margin-top: 4px; }
.qe__date i { font-style: normal; font-size: var(--fs-sm); opacity: 0.8; margin-top: 4px; }
.qe__promo-body { min-width: 0; }
.qe__when { display: inline-block; margin: 0 0 6px; padding: 2px 10px; background: var(--c-red-text); color: var(--c-white); border-radius: 99px; font-size: var(--fs-sm); font-weight: 700; }
.qe__points { list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); color: var(--c-text); }
.qe__points li { position: relative; padding-left: 1.3em; margin: 2px 0; }
.qe__points li::before { content: ''; position: absolute; left: 0.2em; top: 0.35em; width: 0.35em; height: 0.65em; border: solid var(--c-red-text); border-width: 0 2px 2px 0; transform: rotate(40deg); }