/* ==========================================================================
   Book a Demo — standalone page.

   No site header, no sidebar, no second column: one centred column, one job.
   Every rule here is scoped under .demo-page so nothing leaks into the rest
   of the public site.
   ========================================================================== */

.demo-page {
    background: #fafafa;
    color: var(--black, #111);
    display: flex;
    flex-direction: column;
}

/* ── Top bar: back arrow left, logo centred ─────────────────────────────── */
.demo-top {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem 0;
}
.demo-back-link {
    /* Fixed, so it stays reachable however far down the page they are. Just the glyph — no
       circle, no plate: the page has one accent and this is not it. */
    position: fixed;
    left: 1rem;
    top: 1.15rem;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    color: #6b7280;
    background: none;
    border: 0;
    transition: color .15s;
}
.demo-back-link:hover { color: var(--black, #111); }
.demo-back-link svg   { width: 20px; height: 20px; }
.demo-logo img        { display: block; width: 52px; height: 52px; }

/* ── Shell ──────────────────────────────────────────────────────────────── */
.demo-shell {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 2.5rem 1rem 6rem;
    /* Keep the footer below the fold — it is a way off this page, not part of the task.
       76px is the top bar; dvh so mobile browser chrome does not pull it into view. */
    min-height: calc(100dvh - 76px);
}
.demo-shell h1 {
    /* general.css paints every h1 in the brand orange, which is too loud for the one line of
       text on a page whose only accent should be the buttons. */
    color: var(--black, #111);
    font-size: 1.75rem;
    line-height: 1.2;
    text-align: center;
    margin: 0 0 .4rem;
    letter-spacing: -.02em;
}
.demo-sub {
    text-align: center;
    margin: 0 0 1.5rem;
    font-size: .95rem;
    color: #6b7280;
}

/* ── Step track ─────────────────────────────────────────────────────────────
   Mirrors the signup wizard (.step-* in assets/css/auth.css) exactly: same
   34px circle, same greys, orange for the step you are on, GREEN for the ones
   you have finished — including the connecting line. Labels are omitted here;
   each step already names itself in its own heading.
   -------------------------------------------------------------------------- */
.demo-track {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.75rem;
}
.demo-node {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 0; background: none; border: 0;
    cursor: pointer;                 /* a completed step is a live control */
}
.demo-node:disabled { cursor: default; }
.demo-circle {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: #e5e7eb;
    color: var(--gray, #666);
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 700;
    flex-shrink: 0;
    transition: background .25s, color .25s;
}
/* Active and completed share the accent colour — the tick is what separates them. This is
   what the signup wizard actually renders: auth.css defines `done` as green, then overrides it
   per role (.wizard-coach .step-node.done → --role-coach), so green never reaches the screen. */
.demo-node.active .demo-circle,
.demo-node.done   .demo-circle { background: var(--primary, #ffa500); color: var(--white, #fff); }
.demo-line {
    flex: 1;
    height: 2px;
    background: #e5e7eb;
    margin: 17px 6px 0;
    transition: background .25s;
}
.demo-line.done { background: var(--primary, #ffa500); }

/* Same cap as the signup wizard (assets/css/auth.css): without it the connectors take every
   spare pixel on a phone and the numbers sit at opposite edges of the card. */
@media (max-width: 560px) {
    .demo-track { justify-content: center; }
    .demo-line  { flex: 0 1 48px; max-width: 48px; margin-left: 4px; margin-right: 4px; }
}

/* ── Card ───────────────────────────────────────────────────────────────── */
.demo-card {
    min-width: 0;
    background: #fff;
    border: 1px solid #e8eaed;
    border-radius: 14px;
    padding: 1.5rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

/* general.css sets `.form-group { display: flex }`, which overrides the browser's own
   [hidden] rule — so `el.hidden = true` had no visible effect on a form group. Restore it. */
.demo-page [hidden] { display: none; }

.demo-step        { display: none; }
.demo-step.active { display: block; }

.demo-step-title {
    margin: 0 0 1.25rem;
    padding-bottom: .8rem;
    border-bottom: 1px solid #eef0f2;
    font-size: 1.02rem; font-weight: 700;
    color: var(--black, #111);
}

/* ── Fields ─────────────────────────────────────────────────────────────── */
.demo-page .form-group        { margin-bottom: 1.1rem; }
/* Only the last field of a STEP loses its gap. Scoping this to direct children matters:
   the phone group is the last .form-group inside .demo-row, and an unscoped rule collapsed
   the space between it and the field underneath. */
.demo-page .demo-step > .form-group:last-of-type,
.demo-page form > .form-group:last-of-type { margin-bottom: 0; }
.demo-page label {
    display: block;
    font-size: .82rem; font-weight: 600;
    color: var(--black, #111); margin-bottom: .45rem;
}

/*
 * Every single-line control on this page is the same box: same height, same border, same
 * radius, same focus ring. That includes the two SHARED pickers, which each ship their own
 * padding, font size and focus colour — `.phone-field` is the bordered wrapper around a
 * borderless button and input, so the height is set on the wrapper and the children fill it.
 */
.demo-page input[type="text"],
.demo-page input[type="email"],
.demo-page input[type="number"],
.demo-page select,
.demo-page .lp-input,
.demo-page .phone-field {
    box-sizing: border-box;
    width: 100%;
    height: 46px;
    padding: 0 .85rem;
    font-family: inherit; font-size: .95rem; line-height: 1.4;
    color: var(--black, #111);
    background: #fff;
    border: 1px solid #dfe2e7;
    border-radius: 10px;
    transition: border-color .15s, box-shadow .15s;
}
.demo-page .phone-field { padding: 0; display: flex; align-items: stretch; }
.demo-page .phone-field .pf-country {
    height: 100%;
    padding: 0 .7rem;
    font-size: .95rem;
    border: 0; border-right: 1px solid #dfe2e7;
    border-radius: 10px 0 0 10px;
}
.demo-page .phone-field .pf-number {
    height: 100%;
    padding: 0 .85rem;
    font-size: .95rem;
    border: 0; border-radius: 0 10px 10px 0;
}
.demo-page .phone-field .pf-flag { font-size: 17px; }

.demo-page textarea {
    box-sizing: border-box;
    width: 100%;
    padding: .72rem .85rem;
    font-family: inherit; font-size: .95rem; line-height: 1.5;
    color: var(--black, #111);
    background: #fff;
    border: 1px solid #dfe2e7; border-radius: 10px;
    resize: vertical; min-height: 84px;
    transition: border-color .15s, box-shadow .15s;
}

/* Focus is not defined here — assets/css/input-focus.css owns it for the whole app. */

/* Selects: the same chevron the portals draw (assets/css/platform-general.css:526) rather
   than the OS default, which differs on every platform and does not match the fields around
   it. appearance:none removes the native control; padding-right reserves room for the glyph. */
.demo-page select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='3'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
    cursor: pointer;
}

/* Spinners on the age field would make it a different width to everything else. */
.demo-page input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.demo-page input[type="number"]::-webkit-inner-spin-button,
.demo-page input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.demo-page input::placeholder,
.demo-page textarea::placeholder { color: #b3b8c0; }

/* Two fields on one line where they are both short. */
.demo-row { display: grid; grid-template-columns: 96px 1fr; gap: .75rem; }
@media (max-width: 380px) { .demo-row { grid-template-columns: 1fr; gap: 0; } }

.demo-opt {
    font-weight: 500; font-size: .68rem; color: #9aa0aa;
    text-transform: none; letter-spacing: 0;
}

/* Honeypot — present for bots, gone for everyone else. */
.demo-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ── Choice chips (role, player range) ──────────────────────────────────── */
.demo-choices    { display: grid; grid-template-columns: 1fr; gap: .5rem; }
.demo-choices-sm { grid-template-columns: repeat(4, 1fr); }
.demo-choice {
    padding: .7rem .8rem;
    font-family: inherit; font-size: .9rem; font-weight: 600;
    color: var(--black, #111); background: #fff; text-align: center;
    border: 1px solid #dfe2e7; border-radius: 10px; cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
.demo-choice:hover           { border-color: var(--orange, #ffa500); }
.demo-choice[aria-checked="true"] {
    background: var(--orange, #ffa500);
    border-color: var(--orange, #ffa500);
    color: #fff;
}
@media (max-width: 420px) { .demo-choices-sm { grid-template-columns: repeat(2, 1fr); } }

/* ── Calendar + times (the Google-scheduler shape) ─────────────────────── */
.demo-cal-wrap {
    display: grid;
    grid-template-columns: 1fr 200px;
    gap: 1.25rem;
    align-items: start;
}
@media (max-width: 560px) {
    .demo-cal-wrap { grid-template-columns: 1fr; gap: 1rem; }
}

.demo-cal { min-width: 0; }
.demo-cal-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: .6rem;
}
.demo-cal-month { font-size: .95rem; font-weight: 700; }
.demo-cal-nav {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px;
    background: none; border: none; border-radius: 50%;
    color: #4b5563; cursor: pointer;
    transition: background .15s, color .15s, opacity .15s;
}
.demo-cal-nav svg      { width: 17px; height: 17px; }
.demo-cal-nav:hover    { background: #f2f3f5; }
.demo-cal-nav:disabled { opacity: .28; cursor: default; background: none; }

.demo-cal-dow {
    display: grid; grid-template-columns: repeat(7, 1fr);
    margin-bottom: .25rem;
}
.demo-cal-dow span {
    text-align: center;
    font-size: .68rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: #9aa0aa;
}

.demo-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.demo-cal-day {
    aspect-ratio: 1 / 1;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto; width: 100%; max-width: 38px;
    font-family: inherit; font-size: .87rem; font-weight: 600;
    font-variant-numeric: tabular-nums;
    background: none; border: none; border-radius: 50%;
    color: #c3c7ce;                    /* default: a day with nothing free */
    cursor: default;
}
/* Bookable days carry the weight; everything else recedes. */
.demo-cal-day.open        { color: var(--black, #111); background: #fff4e0; cursor: pointer; }
.demo-cal-day.open:hover  { background: #ffe6bd; }
/* Selected wins over hover — same specificity as .open:hover, declared after it, plus its
   own hover rule so the colour never flickers back while the pointer is on it. */
.demo-cal-day.selected,
.demo-cal-day.open.selected,
.demo-cal-day.open.selected:hover {
    background: var(--orange, #ffa500);
    color: #fff;
}
.demo-cal-day.today       { box-shadow: inset 0 0 0 1.5px #d6d9de; }
.demo-cal-day.selected.today { box-shadow: none; }
.demo-cal-day.blank       { visibility: hidden; }

/* ── Times ──────────────────────────────────────────────────────────────── */
.demo-times      { min-width: 0; }
.demo-times-head {
    margin: 0;
    font-size: .84rem; font-weight: 700; color: var(--black, #111);
}
.demo-times-dur {
    margin: 2px 0 .6rem;
    font-size: .74rem; color: #9aa0aa; font-weight: 500;
}
/* Inherits the page's field styling; no inner scroll area, so the whole day is one list the
   browser handles natively. */
.demo-times-select { width: 100%; }

.demo-times-empty { font-size: .82rem; color: #9aa0aa; line-height: 1.5; margin: 0; }


/* The time carried into step 3, so they see what they are booking. */
.demo-chosen {
    margin: 0 0 1.25rem;
    font-size: .95rem; font-weight: 700;
    color: var(--black, #222);
}

/* ── Actions ────────────────────────────────────────────────────────────── */
.demo-actions { display: flex; gap: .6rem; margin-top: 1.5rem; }
/* Layout only. Colour, hover and the lift come from .btn-primary in general.css, so this
   page cannot drift from the rest of the app the way it did when it declared its own. */
.demo-next {
    flex: 1 1 auto;
    display: block;
    width: 100%;
    padding: .8rem 1rem;
    font-family: inherit; font-size: .95rem; font-weight: 700;
    border-radius: 10px;
}
.demo-next:disabled,
.demo-next:disabled:hover {
    opacity: .5; cursor: not-allowed;
    background: var(--primary, #ffa500);
    transform: none;
}
.demo-back {
    flex: 0 0 auto;
    padding: .8rem 1.1rem;
    font-family: inherit; font-size: .95rem; font-weight: 600;
    border-radius: 10px;
}

/* Byte-for-byte the signup wizard's .step-error (assets/css/auth.css): plain red text,
   no panel, sitting between the fields and the button. */
.demo-error {
    display: none;
    color: var(--error, #ef4444);
    font-size: 0.85rem;
    font-weight: 500;
    text-align: left;
    margin: -6px 0 14px;
}
.demo-error.show { display: block; }

/* ── Loading / empty ────────────────────────────────────────────────────── */
.demo-loading, .demo-empty {
    padding: 2.4rem 1rem; text-align: center;
    color: #6b7280; font-size: .9rem; line-height: 1.55;
}
.demo-spinner {
    display: block; width: 24px; height: 24px; margin: 0 auto;
    border: 3px solid #e8eaed; border-top-color: var(--orange, #ffa500);
    border-radius: 50%; animation: demoSpin .7s linear infinite;
}
@keyframes demoSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .demo-spinner { animation-duration: 2.4s; } }

/* ── Done ───────────────────────────────────────────────────────────────────
   Once a booking exists the page stops being a form and becomes a receipt, so
   everything that leads somewhere else is removed rather than restyled.
   -------------------------------------------------------------------------- */
.demo-done      { display: none; text-align: center; }
.demo-done.show { display: block; }
.demo-done-icon {
    display: flex; align-items: center; justify-content: center;
    width: 66px; height: 66px; margin: 0 auto 1.5rem;
    border-radius: 50%;
    background: var(--orange, #ffa500);
    color: #fff;
}
.demo-done-icon svg { width: 34px; height: 34px; }
.demo-done h2       { font-size: 2.4rem; margin: 0 0 .8rem; color: var(--black, #111); letter-spacing: -.025em; line-height: 1.15; }

/* The date is information, not decoration: one plain line, no panel. */
.demo-when {
    margin: 0 0 .25rem;
    /* A step below the headline: same family and colour, slightly smaller and a shade lighter
       in weight, so it reads as the same voice continuing rather than a caption. */
    font-size: 1.2rem; font-weight: 600;
    color: var(--black, #111);
    letter-spacing: -.01em;
}
.demo-when-time {
    /* The wider gap below separates "when" from "what happens next". */
    margin: 0 0 2.1rem;
    font-size: 1.2rem; font-weight: 600;
    color: var(--black, #111);
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}
.demo-done-note  { color: #6b7280; font-size: .92rem; line-height: 1.6; margin: 0 0 .3rem; }
.demo-done-email {
    margin: 0 0 1.6rem;
    font-size: .95rem; font-weight: 700;
    color: var(--black, #111);
    word-break: break-word;          /* a long address must not widen the page */
}

.demo-done-home {
    font-size: .9rem; font-weight: 400;
    color: var(--orange, #ffa500); text-decoration: none;
}
.demo-done-home:hover { text-decoration: underline; }

/* ── Confirmation mode ──────────────────────────────────────────────────────
   Strip the page back to the receipt, then centre what is left. The logo keeps
   its place at the top and the message sits in the middle of everything below,
   so a short confirmation does not hang off the top of a tall screen.
   -------------------------------------------------------------------------- */
.demo-complete .demo-back-link,
.demo-complete .demo-shell h1,
.demo-complete .demo-sub,
.demo-complete .demo-track,
.demo-complete .site-footer,
.demo-complete .app-cta { display: none; }

.demo-complete {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    /* Logo and message are centred TOGETHER as one block, rather than the logo being pinned
       to the top with the text centred in what is left. The bottom padding lifts the group
       above the true middle — dead centre reads as slightly low to the eye. */
    justify-content: center;
    padding-bottom: 12rem;     /* lifts the group; the link is pinned separately below */
    position: relative;        /* containing block for the link pinned below */
}

/* Anchored near the foot of the page rather than sitting in the centred group, so moving it
   does not drag the message up or down with it. */
.demo-complete .demo-done-home {
    position: absolute;
    left: 0; right: 0; bottom: 2.75rem;
    text-align: center;
}
.demo-complete .demo-top   { flex: 0 0 auto; padding-top: 0; }
.demo-complete .demo-logo img { width: 74px; height: 74px; }
.demo-complete .demo-shell {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    min-height: 0;
    padding-top: 3.5rem;       /* gap between the logo and the message */
    padding-bottom: 0;
}
.demo-complete .demo-card {
    border: none; box-shadow: none; background: none;
    padding: 0; width: 100%;
}

/* ── Confirmation animation ─────────────────────────────────────────────────
   The circle arrives, then the tick draws itself inside it. Two short, ordered
   beats rather than everything fading at once — it reads as the booking being
   completed rather than a page appearing.
   -------------------------------------------------------------------------- */
.demo-done.show .demo-done-icon { animation: doneCircle .38s cubic-bezier(.2,.8,.3,1.2) both; }
.demo-done.show .demo-done-icon svg polyline {
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    animation: doneTick .32s .3s ease-out forwards;
}
.demo-done.show h2,
.demo-done.show .demo-when,
.demo-done.show .demo-when-time,
.demo-done.show .demo-done-note,
.demo-done.show .demo-done-email,
.demo-done.show .demo-done-home { animation: doneRise .4s both; }
.demo-done.show h2              { animation-delay: .30s; }
.demo-done.show .demo-when       { animation-delay: .38s; }
.demo-done.show .demo-when-time  { animation-delay: .44s; }
.demo-done.show .demo-done-note  { animation-delay: .52s; }
.demo-done.show .demo-done-email { animation-delay: .58s; }
.demo-done.show .demo-done-home  { animation-delay: .66s; }

@keyframes doneCircle { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes doneTick   { to   { stroke-dashoffset: 0; } }
@keyframes doneRise   { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Motion is decoration here; the confirmation must read instantly without it. */
@media (prefers-reduced-motion: reduce) {
    .demo-done.show .demo-done-icon,
    .demo-done.show h2,
    .demo-done.show .demo-when,
    .demo-done.show .demo-when-time,
    .demo-done.show .demo-done-note,
    .demo-done.show .demo-done-email,
    .demo-done.show .demo-done-home { animation: none; }
    .demo-done.show .demo-done-icon svg polyline { stroke-dashoffset: 0; animation: none; }
}

@media (max-width: 560px) {
    .demo-track { justify-content: center; }
    .demo-line  { flex: 0 1 48px; max-width: 48px; margin-left: 4px; margin-right: 4px; }
}

/* ── Cancel page ────────────────────────────────────────────────────────── */
.demo-cancel-when {
    margin: 0 0 .75rem;
    font-size: 1.05rem; font-weight: 700; color: var(--black, #111);
}
.demo-cancel-note {
    margin: 0;
    font-size: .92rem; line-height: 1.55; color: #6b7280;
}
.demo-cancel-note a { color: var(--orange, #ffa500); font-weight: 600; }