/* =========================================================
   THE EMAIL STEP  (studentregistration.html, tutorregistration.html)
   The email is typed from the middle out; a round green arrow comes up on the
   right once something is typed (it is the Continue button) and turns into a
   spinner while the email is checked. A long email makes the box wider.
   js/email-step.js sizes the box.
   ========================================================= */

#emailPage .email-card { max-width: none; }

.em-field { display: flex; flex-direction: column; align-items: center; }

.em-box {
  position: relative;
  width: 520px;
  max-width: 100%;
  transition: width 0.25s ease;
}

/* room for the arrow on BOTH sides, so the typing stays in the middle */
#emailPage .em-box .float-field input[type="email"] {
  width: 100%;
  box-sizing: border-box;
  padding-left: 64px;
  padding-right: 64px;
  text-align: center;
}
#emailPage .em-box .float-field > span { left: 50%; transform: translate(-50%, -50%); max-width: calc(100% - 140px); }

.em-go {
  position: absolute;
  top: 50%;
  right: 6px;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4ade80, #16a34a 75%);
  color: #04160b;
  box-shadow: 0 8px 20px -6px rgba(34, 197, 94, 0.75);
  cursor: pointer;
  opacity: 0;
  transform: translateY(-50%) scale(0.4);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.3s cubic-bezier(0.3, 1.5, 0.5, 1), filter 0.15s ease;
}
.em-box.has-text .em-go { opacity: 1; transform: translateY(-50%) scale(1); pointer-events: auto; }
.em-go:hover { filter: brightness(1.08); }
.em-go:active { transform: translateY(-50%) scale(0.94); }
.em-go:focus-visible { outline: 2px solid #4ade80; outline-offset: 3px; }
.em-go:disabled { cursor: progress; }

.em-arrow svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s ease; }
.em-go:hover .em-arrow svg { transform: translateX(2px); }
.em-arrow.hidden, .em-spin.hidden { display: none; }

/* checking: the arrow becomes a ring that turns, right in the middle of the circle */
.em-spin {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2.6px solid rgba(4, 22, 11, 0.25);
  border-top-color: #04160b;
  animation: emSpin 0.7s linear infinite;
}
@keyframes emSpin { to { transform: rotate(360deg); } }

/* the next step (code / registration form) comes in softly */
/* (a fade only - nothing slides: the login itself shows at once, in its place, when the page opens) */
#registrationPage:not(.hidden), #otpPage:not(.hidden):not([hidden]) { animation: emIn 0.3s ease-out; }
@keyframes emIn { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 600px) {
  .em-box { width: 100%; }
  #emailPage .em-box .float-field input[type="email"] { padding-left: 54px; padding-right: 54px; }
  .em-go { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .em-go, .em-box, #registrationPage, #otpPage, #emailPage { transition: none; animation: none; }
}
/* the label sitting inside the empty box: no patch of colour behind it */
#emailPage .em-box .float-field input:placeholder-shown:not(:focus) + span { background: transparent; }

/* the arrow: a plain green circle with a white arrow - no shading */
.em-go {
  background: #16a34a;
  color: #ffffff;
  box-shadow: none;
}
.em-go:hover { filter: none; background: #15803d; }
.em-spin { border-color: rgba(255, 255, 255, 0.35); border-top-color: #ffffff; }
.em-arrow svg { stroke-width: 2.4; }

/* the heading is exactly as wide as the email box (js/email-step.js sets its size) */
#emailPage .intro h1.one-line-title { white-space: nowrap; }

/* "STUDENT" / "TUTOR" over the heading - the email step and the "Tell us about yourself" form */
.intro-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #22c55e;
}
.intro-kicker::before, .intro-kicker::after { content: ""; width: 26px; height: 1px; background: currentColor; opacity: 0.6; }
html[data-theme="light"] .intro-kicker { color: #16a34a; }
#emailPage .intro, .registration-intro { display: flex; flex-direction: column; align-items: center; text-align: center; }

/* "Tell us about yourself." smaller and close to the form */
.intro.registration-intro { padding: 44px 0 18px; }
.intro.registration-intro h1.one-line-title { font-size: clamp(26px, 5vw, 54px); letter-spacing: -0.035em; }
/* closer to the header */
.intro.registration-intro { padding-top: 4px; }

/* ---------- a chosen option is filled, not only outlined (both themes) ---------- */
/* buttons (Male / Female, Home / Online, timings, classes ...): solid green */
html #registrationPage .selection-option:has(input:checked),
html #registrationPage .time-option:has(input:checked) {
  background: #16a34a;
  border-color: #16a34a;
  color: #ffffff;
}
/* ticked rows (WhatsApp same, Languages Known ...): a clear green fill with the green tick */
html #registrationPage .pill-check:has(input:checked) {
  background: rgba(34, 197, 94, 0.16);
  border-color: rgba(34, 197, 94, 0.55);
}
html[data-theme="light"] #registrationPage .pill-check:has(input:checked) {
  background: #dcfce7;
  border-color: #86efac;
  color: #14532d;
}
html[data-theme="light"] #registrationPage .pill-check input:checked ~ .pill-check-icon { background: #16a34a; border-color: #16a34a; color: #ffffff; }
/* light mode: an option under the mouse gets a soft grey, so it reads as clickable */
html[data-theme="light"] #registrationPage .selection-option:not(:has(input:checked)):hover,
html[data-theme="light"] #registrationPage .time-option:not(:has(input:checked)):hover { background: #f3f4f6; }

/* =========================================================
   THE STUDENT EMAIL STEP - the three side by side on one line, inside the header's width:
   How it works  ->  the email  ->  Prefer to talk?
   (the arrows are drawn by the script on studentregistration.html)
   ========================================================= */
@media (min-width: 1200px) {
  #emailPage .container.rf {
    width: min(1184px, 93.334%);
    grid-template-columns: 300px minmax(0, 1fr) 300px;
    grid-template-rows: auto;
    column-gap: 64px;
    row-gap: 0;
    align-items: center;
    padding-top: 40px;
    padding-bottom: 40px;
  }
  #emailPage .rf-main { grid-column: 2; grid-row: 1; align-self: center; }
  #emailPage .rf-how { grid-column: 1; grid-row: 1; align-self: center; margin: 0; }
  #emailPage .rf-talk { grid-column: 3; grid-row: 1; align-self: center; margin: 0; }
}

/* the two cards: no hard border, a soft glow, the same look */
#emailPage .rf-card { border: 0; border-radius: 26px; padding: 22px 22px 20px;
  background: linear-gradient(165deg, rgba(34, 197, 94, 0.08), rgba(255, 255, 255, 0.02) 55%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 30px 60px -36px rgba(0, 0, 0, 0.9); }
html[data-theme="light"] #emailPage .rf-card { background: linear-gradient(165deg, #f0fdf4, #ffffff 55%); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 26px 50px -34px rgba(15, 23, 42, 0.35); }
#emailPage .rf-title { font-size: 20px; }

/* the chat: a tidy window; the typing bubble only as big as its dots */
#emailPage .rf-chat { height: 116px; }
#emailPage .rf-chat .typing { align-self: start; height: auto; padding: 9px 11px; }
/* both cards the same height, side by side */
@media (min-width: 1200px) {
  #emailPage .rf-how, #emailPage .rf-talk { align-self: stretch; }
  #emailPage .rf-how { display: flex; flex-direction: column; }
  #emailPage .rf-how .rs-steps { flex: 1; align-content: space-evenly; }
}

/* the two arrows: a calm dotted line with a clear head, a light running along it */
#emailPage .rf-arrows path:not(.is-flow) { stroke-width: 2; stroke-opacity: 0.25; }
#emailPage .rf-arrows path.is-flow { stroke-width: 2.6; stroke-dasharray: 2 9; }
#emailPage .rf-arrows marker path { stroke-width: 2.4; }
@media (min-width: 1200px) { #emailPage .container.rf { column-gap: 96px; } }

/* =========================================================
   STUDENT EMAIL STEP - everything in the middle: the cards' words, the steps, the numbers;
   the row itself in the middle of the space between the header and the footer
   ========================================================= */
#emailPage .rf-card { text-align: center; }
#emailPage .rf-eye, #emailPage .rf-title { text-align: center; }
/* the three steps: a block in the middle of the card, each step's icon and words side by side */
#emailPage .rf-how .rs-steps { justify-self: center; align-self: center; width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; text-align: left; }
/* the number buttons: just the icon and the number, in the middle */
#emailPage .rf-btn { justify-content: center; }
#emailPage .rf-btn small { display: none; }
#emailPage .rf-btn b { font-size: 17px; }
@media (min-width: 1200px) {
  #emailPage.page { min-height: calc(100vh - 230px); display: flex; align-items: center; }
  #emailPage .container.rf { margin-left: auto; margin-right: auto; }
}

/* the email on the cards' middle line: the heading sits above it, the email box itself is centred on the row,
   so How it works, the email and Prefer to talk? share one centre */
@media (min-width: 1200px) {
  #emailPage .rf-main { align-self: stretch; display: grid; grid-template-rows: 1fr auto 1fr; }
  #emailPage .rf-main > .intro { grid-row: 1; align-self: end; }
  #emailPage .rf-main > .email-card { grid-row: 2; min-width: 0; width: 100%; }
  #emailPage .rf-main > .intro { min-width: 0; }
}

/* the two arrows: each draws itself with a loop in the middle, then its solid head; a pause, then again -
   the first, then the second */
#emailPage .rf-arrows path.rf-l { fill: none; stroke: #22c55e; stroke-width: 2.6; stroke-opacity: 1; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; }
#emailPage .rf-arrows path.rf-h { fill: #22c55e; stroke: #22c55e; stroke-width: 1.5; stroke-linejoin: round; opacity: 0; }
html[data-theme="light"] #emailPage .rf-arrows path.rf-l { stroke: #16a34a; }
html[data-theme="light"] #emailPage .rf-arrows path.rf-h { fill: #16a34a; stroke: #16a34a; }
#emailPage .rf.is-go .rf-l1 { animation: rfLoop 3.2s ease-in-out 0.9s infinite; }
#emailPage .rf.is-go .rf-h1 { animation: rfLoopHead 3.2s ease-in-out 0.9s infinite; }
#emailPage .rf.is-go .rf-l2 { animation: rfLoop 3.2s ease-in-out 2.1s infinite; }
#emailPage .rf.is-go .rf-h2 { animation: rfLoopHead 3.2s ease-in-out 2.1s infinite; }
@keyframes rfLoop { 0% { stroke-dashoffset: 1; opacity: 1; } 45% { stroke-dashoffset: 0; opacity: 1; } 85% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes rfLoopHead { 0%, 42% { opacity: 0; transform: scale(0.6); } 50%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }
#emailPage .rf-arrows .rf-h { transform-box: fill-box; transform-origin: left center; }
@media (prefers-reduced-motion: reduce) {
  #emailPage .rf-arrows path.rf-l { stroke-dashoffset: 0; animation: none; }
  #emailPage .rf-arrows path.rf-h { opacity: 1; animation: none; }
}

/* the chat: as tall as both messages (the reply is never cut off), each message's words from the left;
   the WhatsApp and call buttons fully round */
#emailPage .rf-chat { height: auto; }
#emailPage .rf-chat p { text-align: left; }
#emailPage .rf-btn { border-radius: 999px; }

/* no flicker on arriving: the two cards are not drawn before their slide-in starts (they used to show for a
   moment, vanish and slide in again); both come in together, quickly, and the chat starts soon after */
@media (prefers-reduced-motion: no-preference) {
  #emailPage .rf:not(.is-go) .rf-card { opacity: 0; }
}
#emailPage .rf.is-go .rf-how { animation: rfInL 0.55s cubic-bezier(.2, .8, .2, 1) 0s both; }
#emailPage .rf.is-go .rf-talk { animation: rfInR 0.55s cubic-bezier(.2, .8, .2, 1) 0.08s both; }
#emailPage .rf.is-go .rf-chat .out { animation-delay: 1.1s; }
#emailPage .rf.is-go .rf-chat .typing { animation-delay: 1.1s; }
#emailPage .rf.is-go .rf-chat .in { animation-delay: 1.1s; }

/* phones: the login card stays at the top under the header (the page is the screen's height so the footer is below it) */
@media (max-width: 760px) {
  #emailPage:not(.hidden):not([hidden]), #otpPage:not(.hidden):not([hidden]) { justify-content: flex-start; }
}