/* =====================================================
   Jayda Vehicle Checker — Error, buttons, result card, mobile
   Depends on: style.css, style-modal.css
   ===================================================== */

/* Enforce [hidden] inside modal/widget — prevents theme overrides.
   The high-specificity variants below beat display:flex on .jvc-btn-primary
   (same base specificity but declared later = loses in cascade order). */
#jvc-modal [hidden],
.jvc-inline-widget [hidden] { display: none !important; }

/* Higher-specificity override: ensures buttons/links with [hidden] are invisible
   even when .jvc-btn-primary sets display:flex !important on the same element. */
#jvc-modal button[hidden],
#jvc-modal a[hidden],
.jvc-inline-widget button[hidden],
.jvc-inline-widget a[hidden] { display: none !important; }

/* ── Error ───────────────────────────────────────── */
.jvc-error {
    padding: 10px 14px;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 8px;
    font-size: 13px;
    color: #B91C1C;
}

/* ── Primary button ──────────────────────────────── */
#jvc-modal .jvc-btn-primary,
.jvc-inline-widget .jvc-btn-primary {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100% !important;
    padding: 11px 20px !important;
    background: var(--jvc-primary) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: var(--jvc-btn-radius) !important;
    font-family: var(--jvc-font-family) !important;
    font-size: var(--jvc-btn-font-size) !important;
    font-weight: var(--jvc-btn-weight) !important;
    cursor: pointer;
    text-decoration: none !important;
    transition: background .15s, opacity .15s;
    box-sizing: border-box !important;
    box-shadow: none !important;
    letter-spacing: normal;
    line-height: 1.4;
}

#jvc-modal .jvc-btn-primary:hover,
.jvc-inline-widget .jvc-btn-primary:hover {
    background: var(--jvc-primary-hover) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

#jvc-modal .jvc-btn-primary:disabled,
.jvc-inline-widget .jvc-btn-primary:disabled {
    opacity: .38;
    cursor: not-allowed;
}

/* ── Spinner ─────────────────────────────────────── */
.jvc-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: jvc-spin .7s linear infinite;
    flex-shrink: 0;
    will-change: transform;
}

@keyframes jvc-spin { to { transform: rotate(360deg); } }

/* ── Result card ─────────────────────────────────── */
#jvc-result,
#jvc-w-result {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.jvc-result-label {
    font-size: var(--jvc-label-font-size);
    font-weight: var(--jvc-label-weight);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--jvc-label-color);
}

.jvc-result-card {
    padding: 14px 16px;
    background: var(--jvc-card-bg);
    border: 1.5px solid var(--jvc-card-border);
    border-radius: calc(var(--jvc-btn-radius) + 2px);
}

.jvc-result-vehicle {
    font-size: 16px;
    font-weight: 600;
    color: var(--jvc-card-title);
    margin-bottom: 4px;
}

.jvc-result-detail {
    font-size: 13px;
    color: var(--jvc-card-detail);
}

.jvc-result-prompt {
    font-size: 13px;
    color: var(--jvc-card-detail);
    margin: 0;
    line-height: 1.5;
}

.jvc-disambig-notice {
    font-size: 13px;
    color: var(--jvc-label-color);
    margin: 0 0 10px;
    line-height: 1.5;
}

.jvc-cta { margin-top: 4px; }

/* ── Result icon (car SVG above result label) ─────── */
.jvc-result-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 4px;
}

/* ── Confirmed label (success green, non-uppercase) ── */
.jvc-result-confirmed {
    color: #15803d;
    text-transform: none;
    letter-spacing: normal;
    font-size: 13px;
}

/* ── Link button ─────────────────────────────────── */
.jvc-link-btn {
    background: none !important;
    border: none !important;
    font-family: var(--jvc-font-family);
    font-size: 13px;
    color: var(--jvc-primary);
    cursor: pointer;
    text-align: center;
    width: 100%;
    padding: 4px;
    text-decoration: underline;
    text-underline-offset: 2px;
    box-shadow: none !important;
}

.jvc-link-btn:hover { color: var(--jvc-primary-hover); }

/* Recheck button matches primary button font metrics */
#jvc-recheck,
#jvc-w-recheck {
    font-size: var(--jvc-btn-font-size);
    font-weight: var(--jvc-btn-weight);
}

/* ── Mobile ──────────────────────────────────────── */
@media (max-width: 500px) {
    .jvc-fab-text { display: none; }
    #jvc-fab { border-radius: 50%; padding: 14px; }
    .jvc-select-grid { grid-template-columns: 1fr; }
    .jvc-field-full { grid-column: auto; }

    /* Tooltip above circular FAB on mobile — always visible */
    #jvc-fab::after {
        content: attr(aria-label);
        position: absolute;
        bottom: calc(100% + 8px);
        background: #ffffff;
        color: var(--jvc-body-color);
        font-size: 11px;
        font-weight: 500;
        white-space: nowrap;
        padding: 4px 10px;
        border-radius: 6px;
        box-shadow: 0 2px 8px rgba(0,0,0,.18);
        pointer-events: none;
    }

    /* Anchor tooltip to the same edge as the FAB to prevent off-screen overflow */
    #jvc-fab[data-pos="right"]::after { right: 0; left: auto; transform: none; }
    #jvc-fab[data-pos="left"]::after  { left: 0; right: auto; transform: none; }

    /* Pulse ring: circle to match the circular FAB on mobile */
    #jvc-fab::before {
        inset: -16px;
        border-radius: 50%;
    }

}