/* --------------------------------------------------------------------------
   "Text Us" launcher and form.

   Replaces Capital One's Concierge in the same corner. The reference design
   the dealer sent is a white card with a flat blue header; this is that layout
   in JSJ's dark palette, because a white panel dropped onto this site would
   read as a third-party widget — which is precisely what it is replacing.

   Every colour here is a literal rather than a var(), and that is deliberate:
   this markup prints on EVERY page from wp_footer, including pages that never
   load srp.css or vdp.css, so the custom properties those sheets define are
   not guaranteed to exist. The values match them exactly.
   -------------------------------------------------------------------------- */

.jsj-textus__launcher,
.jsj-textus,
.jsj-textus * {
    box-sizing: border-box;
}

/*
 * THE PINK BUTTON, and this time the actual reason.
 *
 * hello-elementor's reset.css paints every button pink at rest:
 *
 *   [type=button],[type=submit],button
 *     {border:1px solid #c36; color:#c36; border-radius:3px; font-size:1rem;
 *      font-weight:400; padding:.5rem 1rem}
 *
 * The trap is `[type=button]` and `[type=submit]`. **An attribute selector
 * carries the same weight as a class** — 0-1-0 — so against a plain
 * `.jsj-textus__send` this is a TIE, not a loss for the theme. WP.com then
 * concatenates plugin and theme CSS into one _static bundle with the theme
 * last, and every tie goes to whatever comes last. That one fact explains the
 * whole reported defect: pink 1px borders, a pink chat icon (the SVG strokes
 * with currentColor), the system font on the close button, 16px, weight 400.
 * None of it was a missing declaration of ours; all of it was this rule
 * winning a tie.
 *
 * A comment in srp.css calls bare `button` "0-1-0", which is what sent me
 * looking at source order instead of at the selector. `button` alone is
 * 0-0-1 — it is the two attribute selectors beside it that reach 0-1-0.
 *
 * So this reset is 0-1-1 on both halves, which genuinely outranks 0-1-0 and
 * needs no !important anywhere. Every component rule below is scoped the same
 * way or better. Same shape as the `.jsj-srp button` guard.
 */
button.jsj-textus__launcher,
.jsj-textus button {
    border: 0;
    border-radius: 0;
    padding: 0;
    background-color: transparent;
    color: #fff;
    /* Not `font: inherit` — that hands the button the theme's body font, which
       is the system stack. The panel is Saira throughout, so the reset says so
       rather than inheriting something this file does not control. */
    font-family: 'Saira', sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
}

/* The theme repaints on hover and focus too — `background-color:#c36;
   color:#fff` at 0-1-1 — so this matches that weight and wins on order. */
button.jsj-textus__launcher:is(:hover, :focus, :focus-visible, :active),
.jsj-textus button:is(:hover, :focus, :focus-visible, :active) {
    color: #fff;
    text-decoration: none;
}

/* ------------------------------------------------------------- launcher */

/*
 * Pinned where Capital One's pill sat — 10px off the floor, 5px in from the
 * right on a desktop — because the page furniture already reserves exactly
 * that space via --jsj-chat-h. See class-text-us.php::bodyClass(): this
 * carries the same jsj-c1-chat body class the launcher did, so the inventory
 * filter bar, the compare bar and the vehicle action bar all stack above it
 * without any of them needing to know which widget is in the corner.
 *
 * 40px tall, matching the reserve. Change the height here and change
 * --jsj-chat-h in srp.css and vdp.css with it.
 */
/* THE GUARD, and it earns its ugliness.
 *
 * `position` and `z-index` are the two declarations that make these overlays
 * overlays; lose either and the launcher lands in the page flow below the
 * footer. That is not hypothetical — `body.jsj-brand-page>*:not(.jsj-aurora)`
 * in srp.css is 0-2-1 and beat `button.jsj-textus__launcher` at 0-1-1, so on
 * every branded page (About, Meet the Team, Trade-In, FAQ, Financing, the blog)
 * the launcher sat under the footer. Reported by the client 2026-08-21.
 *
 * That rule now excludes .jsj-overlay, which is the real fix. This is the
 * second line of defence: both of these print at wp_footer as direct children
 * of <body>, where ANY `body > *` rule on any page — including custom CSS
 * written in Elementor months from now — can reach them. The class is repeated
 * to reach 0-3-1 rather than !important, so the component's own layout rules
 * below stay ordinary and overridable. */
body > .jsj-textus__launcher.jsj-textus__launcher.jsj-textus__launcher {
    position: fixed;
    z-index: 2147483000;
}

body > .jsj-textus.jsj-textus.jsj-textus {
    position: fixed;
    z-index: 2147483001;
}

button.jsj-textus__launcher {
    position: fixed;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    z-index: 2147483000;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    margin: 0;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: linear-gradient(180deg, #2e6be6, #1f56c4);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(46, 107, 230, 0.25);
    color: #fff;
    font-family: 'Saira', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .04em;
    line-height: 1;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
}

/* The theme styles bare <button> with color at !important and paints a pink
   #c36 on hover and focus. Both are beaten here the same way the vehicle page
   does it — :is() adds a class's weight, which also makes this immune to the
   source order WP.com's stylesheet concatenation happens to produce. */
button.jsj-textus__launcher:is(:hover, :focus, :focus-visible, :active) {
    background: linear-gradient(180deg, #3d78f0, #2560d4) !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(46, 107, 230, 0.4);
}

button.jsj-textus__launcher svg {
    flex: none;
}

@media (min-width: 1101px) {
    button.jsj-textus__launcher { right: 15px; bottom: 10px; }
}

/* Hidden while the panel is open — on a phone the panel covers the corner
   anyway, and a launcher peeking out from under its own dialog reads as a
   rendering fault. */
body.jsj-textus-open button.jsj-textus__launcher {
    opacity: 0;
    pointer-events: none;
}

/* ---------------------------------------------------------------- panel */

.jsj-textus {
    position: fixed;
    inset: 0;
    z-index: 2147483001;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 16px;
}

.jsj-textus[hidden] { display: none; }

.jsj-textus__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 6, 10, 0.62);
}

.jsj-textus__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 360px;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    background: #0d1016;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.7);
    animation: jsj-textus-in .22s ease-out;
}

@keyframes jsj-textus-in {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .jsj-textus__panel { animation: none; }
    button.jsj-textus__launcher { transition: none; }
}

/* The reference design's flat blue header bar, kept — it is the one element
   that makes this read as a messaging panel rather than another modal. */
.jsj-textus__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex: none;
    padding: 14px 16px;
    background: linear-gradient(180deg, #2e6be6, #2560d4);
}

.jsj-textus__title {
    font-family: 'Saira Condensed', 'Saira', sans-serif;
    font-weight: 800;
    font-size: 21px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
}

.jsj-textus .jsj-textus__x {
    flex: none;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.jsj-textus .jsj-textus__x:is(:hover, :focus, :active) {
    background: rgba(255, 255, 255, 0.28) !important;
    color: #fff !important;
}

.jsj-textus__form,
.jsj-textus__done {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
}

/* --------------------------------------------------------------- fields */

.jsj-textus__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.jsj-textus__field {
    display: block;
    margin: 0 0 12px;
}

.jsj-textus__grid .jsj-textus__field { margin-bottom: 0; }
.jsj-textus__grid + .jsj-textus__field { margin-top: 12px; }

.jsj-textus__field > span {
    display: block;
    margin: 0 0 6px;
    font-family: 'Saira', sans-serif;
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #dbe0e7;
}

/* The required marker is the dealership's bronze, not red — this is a contact
   form, and every field on it is required, so a wall of red asterisks reads as
   a page full of errors before anyone has typed anything. */
.jsj-textus__field > span i {
    margin-left: 3px;
    font-style: normal;
    color: #e7b57a;
}

.jsj-textus__field input,
.jsj-textus__field select,
.jsj-textus__field textarea {
    display: block;
    width: 100%;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.04);
    color: #f4f6f9;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.4;
    /* 15px minimum, or iOS Safari zooms the whole page on focus and the
       customer is left scrolled sideways inside a fixed panel. */
}

.jsj-textus__field textarea {
    min-height: 92px;
    resize: vertical;
}

.jsj-textus__field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239cc0fa' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 34px;
}

.jsj-textus__field :is(input, select, textarea):focus {
    outline: none;
    border-color: rgba(46, 107, 230, 0.75);
    box-shadow: 0 0 0 3px rgba(46, 107, 230, 0.22);
}

.jsj-textus__field :is(input, textarea)::placeholder { color: #6e7682; }

/* A field the browser has flagged, but only after the customer has left it —
   :invalid alone paints every empty required field red on first paint. */
.jsj-textus__field :is(input, select, textarea).is-error {
    border-color: rgba(226, 90, 90, 0.8);
    background: rgba(226, 90, 90, 0.07);
}

/* Off-screen rather than display:none — a hidden honeypot is the one bots have
   learned to skip. Never focusable, never announced. */
.jsj-textus__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ----------------------------------------------------------------- send */

.jsj-textus .jsj-textus__send {
    display: block;
    width: 100%;
    margin: 14px 0 0;
    padding: 13px 18px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(180deg, #2e6be6, #1f56c4);
    color: #fff;
    font-family: 'Saira', sans-serif;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
}

.jsj-textus .jsj-textus__send:is(:hover, :focus, :active) {
    background: linear-gradient(180deg, #3d78f0, #2560d4) !important;
    color: #fff !important;
}

.jsj-textus .jsj-textus__send[disabled] {
    opacity: .6;
    cursor: default;
}

.jsj-textus__error {
    margin: 12px 0 0;
    padding: 9px 11px;
    border: 1px solid rgba(226, 90, 90, 0.4);
    border-radius: 8px;
    background: rgba(226, 90, 90, 0.1);
    color: #f0b4b4;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    line-height: 1.45;
}

.jsj-textus__error[hidden] { display: none; }

.jsj-textus__consent {
    margin: 12px 0 0;
    color: #8c95a0;
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    line-height: 1.55;
}

/* ----------------------------------------------------------- confirmation */

.jsj-textus__done {
    text-align: center;
    padding-top: 34px;
    padding-bottom: 34px;
}

.jsj-textus__done[hidden] { display: none; }

.jsj-textus__done-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: rgba(46, 107, 230, 0.16);
    color: #6fa2f5;
    font-size: 24px;
}

.jsj-textus__done strong {
    display: block;
    margin: 0 0 6px;
    font-family: 'Saira Condensed', 'Saira', sans-serif;
    font-weight: 800;
    font-size: 22px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #f4f6f9;
}

.jsj-textus__done p {
    margin: 0;
    color: #8c95a0;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

/* ----------------------------------------------------------------- foot */

/*
 * A LIGHT credit bar under a dark panel, and the reason is measured rather
 * than aesthetic.
 *
 * Pin-Up's logo is navy artwork on a transparent ground, drawn for a white
 * page: 62% of its opaque pixels sit at luminance 32 (the "PIN-UP" wordmark)
 * and 34% at 128 (the blue script). Filtering it onto a dark panel was tried
 * first and does not work — brightness(2.6) lifted the navy to 83, which is
 * 2.42:1 against a dark footer, below even the 3:1 floor for a non-text
 * graphic. Any multiplier large enough to fix the wordmark (about 4.7x) clips
 * the blue script to white and destroys the two-tone mark.
 *
 * So the ground changes instead of the artwork. The logo renders exactly as
 * drawn, at full contrast, and the strip reads as the credit line it is rather
 * than as part of the form — which is also how the reference design the dealer
 * sent has it. No second "reversed" asset for anyone to keep in step.
 */
.jsj-textus__foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: none;
    padding: 10px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    background: #f2f4f7;
    color: #5a6270;
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
}

.jsj-textus__foot img {
    display: block;
    width: auto;
    height: 18px;
}

.jsj-textus__foot a {
    display: block;
    line-height: 0;
    opacity: .95;
    transition: opacity .15s ease;
}

.jsj-textus__foot a:is(:hover, :focus) { opacity: 1; }

/* ---------------------------------------------------------------- phones */

@media (max-width: 520px) {
    .jsj-textus { padding: 0; align-items: stretch; justify-content: stretch; }

    .jsj-textus__panel {
        max-width: none;
        max-height: none;
        height: 100%;
        border: 0;
        border-radius: 0;
    }

    /* The launcher label is the whole affordance on a phone, where there is no
       hover to reveal anything, so it stays — only the padding tightens. */
    button.jsj-textus__launcher { padding: 0 15px; }
}