/* ══════════════════════════════════════════════════════════════════════
   "Any issue with our result this time?" — the results-page prompt that
   lives in the Devin area, plus the Option dialog and the expiry notice.

   Every selector is anchored on #rfb-root. style.css skins bare
   input[type=...] site-wide (14px, 40px tall, 10px radius) and the site
   root font is small, so the inputs here are matched with
   #rfb-root input.rfb-input — id + class + element beats the bare element
   selector without needing !important. Sizes are absolute px for the same
   reason: nothing here inherits a usable em base.
   ══════════════════════════════════════════════════════════════════════ */

#rfb-root {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* ── The prompt card, sitting above the Devin bubble ──────────────────
   Bottom offset clears the bubble (56px) and the Review pill above it.

   Brand amber (--amber #F3A316 in 1860-theme.css) so it actually gets noticed —
   a white card in that corner reads as page furniture. 1860-theme.css warns that
   raw amber fails WCAG AA *as text* on light backgrounds; that doesn't apply here
   because it is the background and everything on it is near-black #1a1b13, which
   is about 9:1. Do not flip this to white text. */
#rfb-prompt {
    position: fixed;
    right: 24px;
    bottom: 132px;
    z-index: 99998; /* just under #dvw-root so the bubble stays clickable */
    width: 288px;
    max-width: calc(100vw - 40px);
    background: linear-gradient(150deg, #F7B23A 0%, #F3A316 55%, #E89A0C 100%);
    color: #1a1b13;
    border: 1px solid #d4880e;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(150, 98, 6, 0.34), 0 2px 8px rgba(16, 17, 15, 0.12);
    padding: 14px 14px 12px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}

#rfb-prompt.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

#rfb-prompt-head {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 10px;
}

#rfb-prompt-title {
    flex: 1;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0;
}

#rfb-prompt-sub {
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(26, 27, 19, 0.78);
    line-height: 1.4;
    margin: 0 0 10px;
}

#rfb-prompt-close {
    border: none;
    background: transparent;
    cursor: pointer;
    color: rgba(26, 27, 19, 0.7);
    font-size: 18px;
    line-height: 1;
    padding: 0 2px;
    flex-shrink: 0;
}

#rfb-prompt-close:hover { color: #1a1b13; }

/* Dark ring, not the brand blue: blue on amber is about 2.5:1 and a focus
   indicator nobody can see is not a focus indicator. Reads on white too. */
#rfb-prompt-close:focus-visible,
#rfb-root button:focus-visible,
#rfb-root input:focus-visible,
#rfb-root textarea:focus-visible { outline: 2px solid #1a1b13; outline-offset: 2px; }

.rfb-choices { display: flex; gap: 8px; }

/* Each choice carries its own hover explainer — see .rfb-tip, which is positioned against
   the prompt card, so this must NOT be a positioned element. */
.rfb-choice {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 10px;
    border-radius: 10px;
    border: 1px solid rgba(122, 79, 0, 0.28);
    background: #fff;
    color: #1a1b13;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

/* No transform on hover, however tempting: a transformed element becomes the containing
   block for its absolutely positioned descendants, so the tip would re-anchor to the
   button the moment it was hovered — which is the only time it is ever visible. */
.rfb-choice:hover {
    border-color: #1a1b13;
    background: #fffdf8;
    box-shadow: 0 2px 10px rgba(122, 79, 0, 0.3);
}

.rfb-choice svg { flex-shrink: 0; stroke: #048ED3; }

/* Hover explainer: "in quick words what it is about". Also shown on keyboard focus so it
   isn't mouse-only. The tip sits above the whole card rather than above its own button: the card is only
   ~90px tall, so a button-anchored tip covers the very question it explains, and one
   hanging below would land on the Devin bubble. Both tips share this slot and only one
   is ever visible, so they cannot collide. Positioned against #rfb-prompt - which is why
   .rfb-choice is deliberately not a positioned element. */
.rfb-tip {
    position: absolute;
    bottom: calc(100% + 22px);
    left: 0;
    right: 0;
    transform: translateY(4px);
    background: #14140f;
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
    padding: 8px 10px;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(16, 17, 15, 0.24);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.rfb-tip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border: 5px solid transparent;
    border-top-color: #14140f;
}

.rfb-choice:hover .rfb-tip,
.rfb-choice:focus-visible .rfb-tip {
    opacity: 1;
    transform: translateY(0);
}

/* ── Fare coach-mark: the short instruction shown after "Fare" ──────── */
#rfb-coach {
    position: fixed;
    right: 24px;
    bottom: 132px;
    z-index: 99998;
    width: 288px;
    max-width: calc(100vw - 40px);
    background: #0b2c4a;
    color: #fff;
    border-radius: 14px;
    box-shadow: 0 10px 34px rgba(11, 44, 74, 0.32);
    padding: 14px 14px 12px;
    font-size: 12.5px;
    line-height: 1.5;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}

#rfb-coach.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
#rfb-coach strong { color: #ffd479; }

#rfb-coach-close {
    border: none;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    border-radius: 8px;
    padding: 6px 12px;
    margin-top: 10px;
}

#rfb-coach-close:hover { background: rgba(255, 255, 255, 0.24); }

/* Pulses whatever the page declared as one "option" so "pick any
   available option" points at something the customer can see. */
.rfb-pick-me {
    animation: rfb-pulse 1.4s ease-in-out 3;
    border-radius: 12px;
}

/* Amber, matching the prompt that triggered it, so the highlight reads as
   "this is what that gold card was pointing at". */
@keyframes rfb-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(243, 163, 22, 0); }
    50% { box-shadow: 0 0 0 4px rgba(243, 163, 22, 0.55); }
}

/* ── Modal shell, shared by the Option dialog and the expiry notice ── */
.rfb-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000; /* above the Devin widget - this one is modal */
    background: rgba(16, 17, 15, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.rfb-overlay.is-visible { opacity: 1; pointer-events: auto; }

.rfb-modal {
    width: 400px;
    max-width: 100%;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: #fff;
    color: #14140f;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(16, 17, 15, 0.3);
    padding: 22px 22px 20px;
    transform: translateY(10px) scale(0.98);
    transition: transform 0.2s ease;
}

.rfb-overlay.is-visible .rfb-modal { transform: translateY(0) scale(1); }

.rfb-modal h2 {
    font-size: 17px;
    font-weight: 800;
    line-height: 1.3;
    margin: 0 0 6px;
    color: #14140f;
}

.rfb-modal p.rfb-lede {
    font-size: 12.5px;
    line-height: 1.5;
    color: #5c5d51;
    margin: 0 0 14px;
}

.rfb-modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    border: none;
    background: transparent;
    font-size: 20px;
    line-height: 1;
    color: #6b6c5e;
    cursor: pointer;
}

.rfb-modal-head { position: relative; padding-right: 40px; }

/* The search we already hold, shown read-only so it's clear the customer
   isn't being asked to type their request again. */
.rfb-request-box {
    background: #f6f7f4;
    border: 1px dashed #d8d6cc;
    border-radius: 10px;
    padding: 10px 12px;
    margin: 0 0 16px;
}

.rfb-request-box .rfb-request-label {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8a8b7c;
    margin-bottom: 3px;
}

.rfb-request-box .rfb-request-value {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.45;
    color: #14140f;
    word-break: break-word;
}

.rfb-field { margin: 0 0 12px; }

.rfb-field label {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    color: #4a4b40;
    margin: 0 0 5px;
}

/* id + class + element: beats style.css's bare input[type=...] rule. */
#rfb-root input.rfb-input {
    width: 100%;
    height: 42px;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    color: #14140f;
    background: #fff;
    border: 1px solid #d8d6cc;
    border-radius: 10px;
    padding: 10px 12px;
    margin: 0;
}

/* style.css skins bare textarea the same way it skins the inputs, so this needs the same
   id + class + element specificity. Height is auto, not the inputs' fixed 42px. */
#rfb-root textarea.rfb-input {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.45;
    color: #14140f;
    background: #fff;
    border: 1px solid #d8d6cc;
    border-radius: 10px;
    padding: 10px 12px;
    margin: 0;
    height: auto;
    resize: vertical;
}

#rfb-root textarea.rfb-input:focus {
    border-color: #048ED3;
    outline: none;
    box-shadow: 0 0 0 3px rgba(4, 142, 211, 0.16);
}

.rfb-optional {
    font-weight: 600;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #8a8b7c;
    margin-left: 4px;
}

#rfb-root input.rfb-input:focus {
    border-color: #048ED3;
    outline: none;
    box-shadow: 0 0 0 3px rgba(4, 142, 211, 0.16);
}

#rfb-root input.rfb-input.is-invalid { border-color: #d92d20; }

.rfb-error {
    font-size: 11.5px;
    font-weight: 600;
    color: #d92d20;
    margin: 6px 0 0;
    min-height: 14px;
}

.rfb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 12px 16px;
    border: none;
    border-radius: 10px;
    background: #048ED3;
    color: #fff;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease;
}

.rfb-btn:hover { background: #036ca3; }
.rfb-btn[disabled] { background: #9dc7dd; cursor: default; }

.rfb-btn-ghost {
    background: transparent;
    color: #5c5d51;
    font-weight: 600;
    padding: 10px 16px;
}

.rfb-btn-ghost:hover { background: #f1efe8; color: #14140f; }

/* Success state after an Option request is filed. */
.rfb-done { text-align: center; padding: 6px 0 0; }

.rfb-done-ic {
    width: 46px;
    height: 46px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: #e7f7ee;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rfb-done-ic svg { stroke: #0f7a4d; }

.rfb-ref {
    display: inline-block;
    margin-top: 10px;
    font-size: 11.5px;
    font-weight: 700;
    color: #5c5d51;
    background: #f1efe8;
    border-radius: 6px;
    padding: 4px 10px;
}

/* ── Expiry notice ──────────────────────────────────────────────────── */
#rfb-expiry .rfb-modal { text-align: center; }

.rfb-expiry-ic {
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #fdf0e6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rfb-expiry-ic svg { stroke: #a1560a; }

#rfb-expiry-count { font-weight: 800; }

@media (max-width: 480px) {
    #rfb-prompt, #rfb-coach { right: 12px; left: 12px; width: auto; bottom: 92px; }
}

@media (prefers-reduced-motion: reduce) {
    #rfb-prompt, #rfb-coach, .rfb-overlay, .rfb-modal, .rfb-choice, .rfb-tip { transition: none; }
    .rfb-pick-me { animation: none; box-shadow: 0 0 0 3px rgba(243, 163, 22, 0.55); }
}