/* ==========================================================================
   Book a Demo popup — Round11
   Reconciled to Figma IxMWk5A8ZNgP10BHwNWojJ (popup desktop 4012:27431,
   tablet 4012:27637, form 4012:28276/28455, testimonials 4012:39215..361).
   Values keyed to global.css tokens; bookdemo-* vars hold the few extras.
   ========================================================================== */
:root {
    --bookdemo-z: 1000;                 /* header=60, drawer=100 */
    --bookdemo-dark: var(--color-reverse-bg);   /* #050505 */
    --bookdemo-light: var(--color-1st-bg);       /* #F6F5F4 */
    --bookdemo-error: var(--color-1st-brd);      /* #FF4E41 */
    --bookdemo-link: var(--color-3rd-btn-fg);    /* #274CE1 */
    --bookdemo-input-border: var(--color-stroke);        /* #D3D3D3 */
    --bookdemo-input-border-focus: var(--color-reverse-stroke); /* #4A4949 */
}

body.bookdemo-lock { overflow: hidden; }

.bookdemo-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--bookdemo-z);
    display: flex;
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
}
/* Dim backdrop as its own compositor layer: animate opacity (compositor-only) instead of
   background-color (repaints the whole viewport each frame -> jank on weak mobile GPUs).
   Black @ 50% = Figma "overlay" 4012:27113. */
.bookdemo-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: #000;
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
    will-change: opacity;
}
.bookdemo-overlay.is-open::before { opacity: 0.5; }
.bookdemo-overlay[hidden] { display: none; }

/* Slide up from the bottom (bottom-sheet reveal); translate3d + backface-visibility keep it
   on a crisp GPU layer so the transform composites smoothly on mobile. */
.bookdemo-modal {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    height: 100%;
    background: var(--bookdemo-light);
    transform: translate3d(0, 100%, 0);
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
    backface-visibility: hidden;
}
.bookdemo-overlay.is-open .bookdemo-modal { transform: translate3d(0, 0, 0); }

@media (prefers-reduced-motion: reduce) {
    .bookdemo-overlay::before,
    .bookdemo-modal { transition: none; }
}

.bookdemo-close {
    position: absolute;
    top: var(--var-24);
    right: var(--var-24);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-1st-fg);
    z-index: 3;
}
.bookdemo-close:hover { background: rgba(5, 5, 5, 0.06); }

/* ---------- LEFT (dark, info + testimonial tabs) ---------- */
.bookdemo-left {
    flex: 1 1 50%;
    min-width: 0;
    background: var(--bookdemo-dark);
    color: var(--color-reverse-fg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--var-64) var(--var-40);
    overflow-y: auto;
}
.bookdemo-left-inner {
    width: 100%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    gap: var(--var-40);
}
.bookdemo-logo { width: 120px; height: 32px; display: block; }

.bookdemo-intro { display: flex; flex-direction: column; gap: var(--var-12); }
.bookdemo-heading {
    margin: 0;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--fs-h3);           /* 40px desktop / 25px mobile */
    line-height: 1.15;
    color: var(--color-reverse-fg);
    letter-spacing: 0;
}
.bookdemo-desc {
    margin: 0;
    font-weight: 400;
    font-size: var(--fs-label-lg);     /* 16px */
    line-height: 22px;
    color: var(--color-reverse-fg);
}

/* Brand-logo tabs */
.bookdemo-tablist {
    display: flex;
    align-items: center;
    gap: var(--var-8);
    border-bottom: 1px solid var(--color-reverse-stroke);  /* #4A4949 */
}
.bookdemo-tab {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--var-16) var(--var-8);
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.15s ease, border-color 0.15s ease;
}
.bookdemo-tab img {
    height: 24px;
    width: auto;
    filter: brightness(0) invert(1);   /* monochrome brand marks -> white on dark */
}
.bookdemo-tab:hover { opacity: 0.7; }
.bookdemo-tab.is-active {
    opacity: 1;
    border-bottom-color: var(--color-reverse-fg);
}

/* Testimonials */
.bookdemo-testimonials { position: relative; }
.bookdemo-testi { display: flex; flex-direction: column; gap: var(--var-24); margin: 0; }
.bookdemo-testi[hidden] { display: none; }
.bookdemo-quote-mark { color: var(--color-reverse-fg); opacity: 0.9; }
.bookdemo-quote {
    margin: 0;
    font-weight: 400;
    font-size: var(--fs-quote);        /* 28px desktop / 16px mobile */
    line-height: 1.4;
    color: var(--color-reverse-fg);
}
.bookdemo-attr { display: flex; align-items: center; gap: var(--var-16); }
.bookdemo-avatar { width: 48px; height: 48px; border-radius: var(--radius-pill); object-fit: cover; flex-shrink: 0; }
.bookdemo-attr-text { display: flex; flex-direction: column; gap: var(--var-4); }
.bookdemo-attr-name { font-weight: 500; font-size: var(--fs-label-lg); color: var(--color-reverse-fg); }
.bookdemo-attr-role {
    font-weight: 500;
    font-size: var(--fs-label-md);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--Text-Ramp-inverse-80, rgba(255, 255, 255, 0.8));
}

/* ---------- RIGHT (light, form) ---------- */
.bookdemo-right {
    flex: 1 1 50%;
    min-width: 0;
    background: var(--bookdemo-light);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--var-64) var(--var-40);
    overflow-y: auto;
}
.bookdemo-form {
    width: 100%;
    max-width: 604px;
    display: flex;
    flex-direction: column;
    gap: var(--var-32);
    padding: var(--var-32);
    background: var(--color-2nd-bg);   /* #fff */
    border-radius: var(--radius-default);
}
.bookdemo-form-head { display: flex; flex-direction: column; gap: var(--var-8); }
.bookdemo-form-title {
    margin: 0;
    font-weight: 600;
    font-size: var(--fs-h4);           /* 32px desktop / 22px mobile */
    line-height: 1.15;
    color: var(--color-1st-fg);
}
.bookdemo-form-sub {
    margin: 0;
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
    color: var(--color-2nd-fg);        /* rgba(5,5,5,.8) */
}

.bookdemo-fields { display: flex; flex-direction: column; gap: var(--var-20); }
.bookdemo-field { display: flex; flex-direction: column; gap: var(--var-2); min-width: 0; }
.bookdemo-field > label {
    font-weight: 500;
    font-size: 12px;
    line-height: 12px;
    color: var(--color-1st-fg);
}
.bookdemo-req { color: var(--color-1st-fg); margin-left: 2px; }

/* Underline inputs (Figma: bottom border only, radius 0, pad 6/2/6/0) */
.bookdemo-field input,
.bookdemo-field select {
    width: 100%;
    padding: var(--var-6) var(--var-2) var(--var-6) 0;
    border: 0;
    border-bottom: 1px solid var(--bookdemo-input-border);
    border-radius: 0;
    background: transparent;
    color: var(--color-1st-fg);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--fs-label-lg);     /* 16px */
    line-height: 22px;
    transition: border-color 0.15s ease;
    appearance: none;
    -webkit-appearance: none;
}
.bookdemo-field input::placeholder { color: var(--color-disabled-fg); }   /* rgba(5,5,5,.24) */
.bookdemo-field select:required:invalid { color: var(--color-disabled-fg); } /* "Select one" gray */
.bookdemo-field option { color: var(--color-1st-fg); }
.bookdemo-field input:focus,
.bookdemo-field select:focus {
    outline: none;
    border-bottom-color: var(--bookdemo-input-border-focus);   /* #4A4949 */
}
/* select chevron */
.bookdemo-field--select { position: relative; }
.bookdemo-field--select::after {
    content: "";
    position: absolute;
    right: 4px;
    bottom: 14px;
    width: 10px;
    height: 10px;
    border-right: 1.5px solid var(--color-1st-fg);
    border-bottom: 1.5px solid var(--color-1st-fg);
    transform: rotate(45deg);
    pointer-events: none;
}
/* error (Figma: red help text; border unchanged) */
.bookdemo-error {
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
    color: var(--bookdemo-error);
}
.bookdemo-error:empty { display: none; }

.bookdemo-actions { display: flex; flex-direction: column; gap: var(--var-8); }
.bookdemo-submit {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: var(--var-6);
    padding: var(--var-14) var(--var-28);
    border: none;
    border-radius: var(--radius-pill);
    background: var(--color-1st-btn-bg);       /* #050505 */
    color: var(--color-1st-btn-fg);            /* #fff */
    font-weight: 500;
    font-size: var(--fs-label-md);
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 0.15s ease;
}
.bookdemo-submit:hover { opacity: 0.9; }
.bookdemo-submit:active { transform: translateY(1px); }
.bookdemo-privacy {
    margin: 0;
    max-width: 450px;
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
    color: var(--color-2nd-fg);
}
.bookdemo-privacy a { display: inline; color: var(--bookdemo-link); text-decoration: none; }
.bookdemo-privacy a:hover { text-decoration: underline; }

/* ==========================================================================
   Tablet + mobile (<=1024) — stacked: dark top (logo strip, no testimonial) + form
   Figma 4012:27637
   ========================================================================== */
@media (max-width: 1024px) {
    /* Sheet is exactly one viewport tall and scrolls INTERNALLY (like desktop), so the slide-up is a
       clean one-viewport translate instead of translating an oversized element (which read as a scroll). */
    .bookdemo-overlay { overflow: hidden; }
    .bookdemo-modal { flex-direction: column; height: 100%; overflow-y: auto; min-height: 0; }
    /* stacked layout puts the X over the dark top panel -> white so it's visible (Figma 4012:27637) */
    .bookdemo-close { color: var(--color-reverse-fg); }
    .bookdemo-close:hover { background: rgba(255, 255, 255, 0.12); }
    .bookdemo-left,
    .bookdemo-right {
        flex: 0 0 auto;
        padding: var(--var-40) var(--var-24);
    }
    .bookdemo-left { padding-top: var(--var-64); }
    .bookdemo-left-inner { max-width: 720px; margin: 0 auto; gap: var(--var-24); }
    /* mobile: interactive tabs + switchable testimonial shown (base opacity 0.4 / active 1 applies) */
    .bookdemo-tablist { border-bottom: 0; gap: var(--var-32); flex-wrap: wrap; }
    .bookdemo-tab { flex: 0 0 auto; border-bottom: 0; padding: var(--var-8) 0; }
    .bookdemo-form { max-width: 720px; margin: 0 auto; }
}

@media (max-width: 520px) {
    .bookdemo-form { padding: var(--var-20); }
    .bookdemo-tablist { gap: var(--var-20); }
    .bookdemo-tab img { height: 20px; }
}