/* =====================================================
   Jayda Vehicle Checker — CSS token defaults + FAB + Overlay
   Continued in: style-modal.css, style-result.css
   All visual values are CSS custom properties.
   Defaults here; overrides injected by JVC_Assets_CSS::build_css_vars().
   ===================================================== */

/* ── Default token values ── (overwritten by PHP inline style) */
#jvc-fab,
#jvc-modal,
#jvc-overlay,
.jvc-inline-widget {
    /* FAB */
    --jvc-fab-bg:           #136EFB;
    --jvc-fab-bg-hover:     #0F5ED6;
    --jvc-fab-radius:       100px;
    --jvc-fab-py:           12px;
    --jvc-fab-px:           20px;
    --jvc-fab-font-size:    14px;
    --jvc-fab-font-weight:  500;
    --jvc-fab-icon-size:    18px;
    --jvc-fab-bottom:       28px;
    --jvc-fab-pos-right:    24px;
    --jvc-fab-pos-left:     auto;

    /* Primary (shared) */
    --jvc-primary:          #136EFB;
    --jvc-primary-hover:    #0F5ED6;
    --jvc-primary-alpha:    rgba(19,110,251,.14);

    /* Overlay */
    --jvc-overlay-bg:       rgba(30,37,56,.48);

    /* Modal */
    --jvc-modal-max-width:  480px;
    --jvc-modal-radius:     16px;

    /* Typography */
    --jvc-font-family:      inherit;
    --jvc-body-color:       #1E2538;
    --jvc-body-font-size:   14px;
    --jvc-label-color:      #6F7587;
    --jvc-label-font-size:  11px;
    --jvc-label-weight:     600;
    --jvc-title-font-size:  15px;
    --jvc-title-weight:     600;

    /* Inputs */
    --jvc-input-bg:         #ffffff;
    --jvc-input-text:       #1E2538;
    --jvc-input-border:     #D1D8EE;
    --jvc-input-focus:      #136EFB;
    --jvc-input-focus-alpha:rgba(19,110,251,.14);
    --jvc-input-radius:     8px;

    /* Buttons */
    --jvc-btn-radius:       8px;
    --jvc-btn-font-size:    14px;
    --jvc-btn-weight:       500;

    /* Result card */
    --jvc-card-bg:          #F0F7FF;
    --jvc-card-border:      #BFD9FD;
    --jvc-card-title:       #1E2538;
    --jvc-card-detail:      #6F7587;
}

/* ── Inline widget (shortcode) ───────────────────── */
.jvc-inline-widget {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    /* height: auto breaks Elementor Flexbox Container collapsing this to height:0 */
    height: auto !important;
    min-height: 100px;
    max-width: 100%;
    width: 100%;
    background: #ffffff;
    border-radius: var(--jvc-modal-radius);
    box-shadow: 0 4px 20px rgba(30,37,56,.12);
    font-family: var(--jvc-font-family);
    color: var(--jvc-body-color);
    font-size: var(--jvc-body-font-size);
    /* overflow:hidden creates a BFC (Block Formatting Context) which ensures
       both tab panels (Year/Make/Model and VIN) have identical widths.
       Previously used overflow:clip to avoid height:0 in Elementor grid context —
       now safe because custom.css resets the widget container to display:block. */
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.jvc-inline-widget,
.jvc-inline-widget * {
    box-sizing: border-box !important;
}

/* =====================================================
   Elementor / theme CSS isolation
   Every rule inside #jvc-modal resets box-model and
   font inheritance so Elementor's global resets can't
   bleed in. !important is used only on properties
   Elementor Pro is known to override (focus shadows,
   border-colors, font-family).
   ===================================================== */
#jvc-modal,
#jvc-modal * {
    box-sizing: border-box !important;
}

/* ── FAB ─────────────────────────────────────────── */
#jvc-fab {
    position: fixed !important;
    bottom: var(--jvc-fab-bottom);
    right:  var(--jvc-fab-pos-right);
    left:   var(--jvc-fab-pos-left);
    z-index: 9999100;

    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: var(--jvc-fab-py) var(--jvc-fab-px);
    background: var(--jvc-fab-bg);
    color: #ffffff;
    border: none;
    border-radius: var(--jvc-fab-radius);
    font-family: var(--jvc-font-family);
    font-size: var(--jvc-fab-font-size);
    font-weight: var(--jvc-fab-font-weight);
    line-height: 1.2;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(0,0,0,.22);
    transition: background .15s, box-shadow .15s, transform .15s;
    white-space: nowrap;
    overflow: visible;
    text-decoration: none !important;
}

#jvc-fab svg {
    width: var(--jvc-fab-icon-size);
    height: var(--jvc-fab-icon-size);
    flex-shrink: 0;
}

#jvc-fab:hover {
    background: var(--jvc-fab-bg-hover);
    box-shadow: 0 6px 22px rgba(0,0,0,.28);
    transform: translateY(-2px);
    color: #ffffff;
}

#jvc-fab:active {
    transform: translateY(0);
}

/* ── FAB pulse ring ──────────────────────────────── */
#jvc-fab::before {
    content: '';
    position: absolute;
    inset: -16px 0;                                      /* 16px trên/dưới, flush 2 bên */
    border-radius: calc(var(--jvc-fab-radius) + 16px);   /* giữ đúng hình pill */
    background: var(--jvc-fab-bg);
    opacity: 0;
    animation: jvc-pulse 2.8s ease-out infinite;
    pointer-events: none;
    z-index: -1;
    will-change: transform, opacity;
}

@keyframes jvc-pulse {
    0%   { transform: scale(1);   opacity: .55; }
    70%  { transform: scale(1.3); opacity: 0;   }
    100% { transform: scale(1.3); opacity: 0;   }
}

/* ── Overlay ─────────────────────────────────────── */
#jvc-overlay {
    position: fixed !important;
    inset: 0;
    z-index: 9999200;
    background: var(--jvc-overlay-bg);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}

#jvc-overlay.jvc-visible {
    opacity: 1;
    pointer-events: auto;
}