/* ════════════════════════════════════════════
   EV Search Plugin — v3.6.0
   Shortcodes: simple | category | aimatch | mobile
════════════════════════════════════════════ */
:root {
    --ev-dark    : #1a1a1a;
    --ev-white   : #ffffff;
    --ev-border  : #d8d8d8;
    --ev-bg      : #f5f5f5;
    --ev-text    : #222222;
    --ev-muted   : #888888;
    --ev-green   : #2ecc71;
    --ev-shadow  : 0 4px 20px rgba(0,0,0,.08);
    --ev-h       : 54px;
    --ev-pill    : 50px;
    --ev-sq      : 8px;
}

.ev-search-wrapper {
    position   : relative;
    max-width  : 820px;
    margin     : 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ════════════════════════════════
   SHORTCODE 1 — [ev_search_simple]
   Pill bar with search icon + button
════════════════════════════════ */
.ev-search-bar--simple {
    display      : flex;
    align-items  : center;
    background   : var(--ev-white);
    border       : 2px solid var(--ev-green);
    border-radius: var(--ev-pill);
    height       : var(--ev-h);
    box-shadow   : var(--ev-shadow);
    overflow     : hidden;
    transition   : border-color .2s, box-shadow .2s;
}
.ev-search-bar--simple:focus-within {
    box-shadow: 0 0 0 3px rgba(46,204,113,.18);
}

.ev-search-icon {
    display    : flex;
    align-items: center;
    flex-shrink: 0;
    padding    : 0 14px 0 20px;
    color      : var(--ev-muted);
}
.ev-search-icon svg { width: 20px; height: 20px; }

.ev-simple .ev-search-input {
    flex      : 1;
    border    : none;
    outline   : none;
    font-size : 15px;
    color     : var(--ev-text);
    background: transparent;
    min-width : 0;
    padding   : 0;
}
.ev-simple .ev-search-input::placeholder { color: var(--ev-muted); }

.ev-simple .ev-search-btn {
    display        : flex;
    align-items    : center;
    justify-content: center;
    gap            : 0;
    padding        : 0 24px;
    height         : var(--ev-h);
    border         : none;
    border-radius  : 0 var(--ev-pill) var(--ev-pill) 0;
    font-size      : 14px;
    font-weight    : 600;
    cursor         : pointer;
    white-space    : nowrap;
    transition     : filter .2s;
    flex-shrink    : 0;
}
.ev-simple .ev-search-btn:hover { filter: brightness(.92); }


/* ════════════════════════════════
   SHORTCODE 2 — [ev_search_category]
   Dark dropdown + input + arrow button
════════════════════════════════ */
.ev-search-bar--category {
    display      : flex;
    align-items  : stretch;
    background   : var(--ev-white);
    border       : 1.5px solid var(--ev-border);
    border-radius: var(--ev-sq);
    height       : var(--ev-h);
    box-shadow   : var(--ev-shadow);
    overflow     : visible;
}

/* Category toggle */
.ev-cat-dropdown-wrap { position: relative; flex-shrink: 0; }
.ev-cat-toggle {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    gap            : 10px;
    padding        : 0 18px;
    height         : var(--ev-h);
    min-width      : 200px;
    background     : var(--ev-dark);
    color          : var(--ev-white);
    border         : none;
    border-radius  : calc(var(--ev-sq) - 1px) 0 0 calc(var(--ev-sq) - 1px);
    font-size      : 14px;
    font-weight    : 600;
    cursor         : pointer;
    white-space    : nowrap;
    transition     : background .2s;
}
.ev-cat-toggle:hover { background: #2d2d2d; }

.ev-chevron { width: 18px; height: 18px; flex-shrink: 0; transition: transform .25s; }
.ev-cat-toggle[aria-expanded="true"] .ev-chevron { transform: rotate(180deg); }

/* Category list */
.ev-cat-list {
    display      : none;
    position     : absolute;
    top          : calc(100% + 6px);
    left         : 0;
    min-width    : 230px;
    background   : var(--ev-white);
    border       : 1.5px solid var(--ev-border);
    border-radius: var(--ev-sq);
    box-shadow   : var(--ev-shadow);
    list-style   : none;
    margin       : 0;
    padding      : 0;
    z-index      : 9999;
    overflow     : hidden;
}
.ev-cat-list.open { display: block; }

.ev-cat-item {
    padding   : 13px 20px;
    font-size : 14px;
    color     : var(--ev-text);
    cursor    : pointer;
    transition: background .15s, color .15s;
    border-bottom: 1px solid #f0f0f0;
}
.ev-cat-item:last-child { border-bottom: none; }
.ev-cat-item:first-child { background: var(--ev-dark); color: var(--ev-white); font-weight: 600; }
.ev-cat-item:not(:first-child):hover,
.ev-cat-item:not(:first-child).active { background: #f5f5f5; font-weight: 600; }

/* Divider */
.ev-bar-divider {
    display    : block;
    width      : 1px;
    margin     : 13px 0;
    background : var(--ev-border);
    flex-shrink: 0;
}

/* Category input */
.ev-with-category .ev-search-input {
    flex      : 1;
    border    : none;
    outline   : none;
    padding   : 0 18px;
    font-size : 14px;
    color     : var(--ev-text);
    background: transparent;
    min-width : 0;
}
.ev-with-category .ev-search-input::placeholder { color: var(--ev-muted); }

/* Arrow button */
.ev-with-category .ev-search-btn {
    display        : flex;
    align-items    : center;
    justify-content: center;
    width          : 54px;
    height         : var(--ev-h);
    flex-shrink    : 0;
    border         : none;
    border-radius  : 0 calc(var(--ev-sq) - 1px) calc(var(--ev-sq) - 1px) 0;
    cursor         : pointer;
    transition     : filter .2s;
}
.ev-with-category .ev-search-btn:hover { filter: brightness(.92); }
.ev-with-category .ev-search-btn svg { width: 22px; height: 22px; }


/* ════════════════════════════════
   SHORTCODE 3 — [ev_search_aimatch]
   Typing animation + AI Match Now button
════════════════════════════════ */
.ev-search-bar--aimatch {
    display      : flex;
    align-items  : center;
    background   : var(--ev-white);
    border       : 1.5px solid var(--ev-border);
    border-radius: var(--ev-sq);
    height       : var(--ev-h);
    box-shadow   : var(--ev-shadow);
    overflow     : hidden;
    transition   : border-color .2s;
}
.ev-search-bar--aimatch:focus-within { border-color: #aaa; }

.ev-aimatch .ev-search-icon {
    padding: 0 12px 0 18px;
    color  : var(--ev-muted);
}

/* Typing wrapper fills remaining space */
.ev-typing-wrap {
    flex    : 1;
    position: relative;
    min-width: 0;
    height  : 100%;
    display : flex;
    align-items: center;
}

.ev-aimatch .ev-search-input {
    width     : 100%;
    border    : none;
    outline   : none;
    font-size : 15px;
    color     : var(--ev-text);
    background: transparent;
    padding   : 0;
    /* hide native placeholder when we animate */
    caret-color: var(--ev-dark);
}
.ev-aimatch .ev-search-input::placeholder { color: transparent; }
.ev-aimatch .ev-search-input.ev-has-value::placeholder { color: var(--ev-muted); }

/* Ghost animated placeholder */
.ev-typing-ghost {
    position  : absolute;
    top       : 50%;
    left      : 0;
    transform : translateY(-50%);
    font-size : 15px;
    color     : var(--ev-muted);
    white-space: nowrap;
    overflow  : hidden;
    pointer-events: none;
    user-select: none;
    /* blinking cursor via border-right */
    border-right: 2px solid var(--ev-muted);
}
/* hide ghost when user is typing */
.ev-aimatch.ev-user-typing .ev-typing-ghost { display: none; }

/* AI Match button */
.ev-ai-btn {
    display        : flex;
    align-items    : center;
    justify-content: center;
    gap            : 7px;
    padding        : 0 22px;
    height         : var(--ev-h);
    flex-shrink    : 0;
    border         : none;
    cursor         : pointer;
    font-size      : 14px;
    font-weight    : 700;
    white-space    : nowrap;
    transition     : filter .2s;
}
.ev-ai-btn:hover { filter: brightness(.92); }

.ev-star-icon { width: 18px; height: 18px; flex-shrink: 0; }
.ev-btn-label { font-size: 14px; font-weight: 700; }


/* ════════════════════════════════
   SHARED — RESULTS DROPDOWN (modern card style)
════════════════════════════════ */
.ev-results-dropdown {
    position     : absolute;
    top          : calc(100% + 10px);
    left         : 0;
    right        : 0;
    background   : var(--ev-white);
    border       : 1px solid #ececec;
    border-radius: 16px;
    box-shadow   : 0 16px 40px rgba(0,0,0,.12);
    z-index      : 9998;
    max-height   : 392px; /* ~4.5 rows visible, rest scrolls */
    overflow-y   : auto;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    padding      : 6px 0;
    box-sizing   : border-box;

    /* Modern thin scrollbar — Firefox */
    scrollbar-width: thin;
    scrollbar-color: #c9c9c9 transparent;
}

/* Modern thin scrollbar — Chrome / Safari / Edge */
.ev-results-dropdown::-webkit-scrollbar {
    width: 6px;
}
.ev-results-dropdown::-webkit-scrollbar-track {
    background: transparent;
    margin: 8px 0; /* keep the track clear of the dropdown's rounded corners */
}
.ev-results-dropdown::-webkit-scrollbar-thumb {
    background-color: #d4d4d4;
    border-radius: 10px;
    transition: background-color .15s ease;
}
.ev-results-dropdown::-webkit-scrollbar-thumb:hover {
    background-color: #b0b0b0;
}

.ev-results-list { list-style: none; margin: 0; padding: 0; }
.ev-results-list li { margin: 0; }
.ev-results-list li + li { border-top: 1px solid #f0f0f0; }

/* Result row — flush list style */
.ev-result-item {
    display        : flex;
    align-items    : center;
    gap            : 14px;
    padding        : 14px 18px;
    text-decoration: none;
    color          : var(--ev-text);
    transition     : background .15s ease;
}
.ev-result-item:hover,
.ev-result-item:focus-visible {
    background: #f2faf4;
}

/* ── IMAGE FIX — contain full image, no cropping ── */
.ev-result-img-wrap {
    width        : 64px;
    height       : 56px;
    flex-shrink  : 0;
    border-radius: 10px;
    overflow     : hidden;
    background   : var(--ev-bg);
    display      : flex;
    align-items  : center;
    justify-content: center;
}
.ev-result-thumb {
    width     : 100%;
    height    : 100%;
    object-fit: contain;   /* ← show full image, no cropping */
    object-position: center;
    display   : block;
}

/* Placeholder when no image */
.ev-result-thumb-placeholder {
    width        : 64px;
    height       : 56px;
    border-radius: 10px;
    flex-shrink  : 0;
    background   : var(--ev-bg);
    display      : flex;
    align-items  : center;
    justify-content: center;
    color        : var(--ev-muted);
}
.ev-result-thumb-placeholder svg { width: 24px; height: 24px; }

/* Title */
.ev-result-info {
    flex     : 1;
    min-width: 0;
}

.ev-result-title {
    font-size  : 15.5px;
    font-weight: 700;
    color      : var(--ev-text);
    line-height: 1.3;
    white-space: normal;       /* show the full vehicle name, no cutoff */
    overflow-wrap: break-word;
    word-break : break-word;
}

/* Price pill — sits on the right side of the row. A small circular ₹ chip
   + text, so long ranges wrap cleanly without the whole badge deforming
   into a blob. */
.ev-result-price {
    display        : inline-flex;
    align-items    : center;
    gap            : 6px;
    flex-shrink    : 0;
    max-width      : 140px;
    background     : #e9f9ee;
    padding        : 3px 12px 3px 3px;
    border-radius  : 14px;
}
.ev-result-price-icon {
    display        : flex;
    align-items    : center;
    justify-content: center;
    flex-shrink    : 0;
    width          : 22px;
    height         : 22px;
    border-radius  : 50%;
    background     : #c8f0d4;
    color          : #147a3d;
    font-size      : 12px;
    font-weight    : 800;
}
.ev-result-price-text {
    font-size  : 13px;
    font-weight: 700;
    color      : #1a7a3d;
    line-height: 1.35;
    letter-spacing: .1px;
}

/* Empty / loading */
.ev-results-empty,
.ev-results-loading {
    padding   : 24px 20px;
    text-align: center;
    font-size : 14px;
    color     : var(--ev-muted);
}

/* Spinner */
.ev-spinner {
    display      : inline-block;
    width        : 16px;
    height       : 16px;
    border       : 2px solid #e0e0e0;
    border-top-color: var(--ev-dark);
    border-radius: 50%;
    animation    : ev-spin .6s linear infinite;
    vertical-align: middle;
    margin-right : 8px;
}
@keyframes ev-spin { to { transform: rotate(360deg); } }

/* Small screens — free up room for the title and price by shrinking the
   thumbnail and hiding the trailing icon, so the price badge has enough
   width to sit on one or two lines instead of wrapping awkwardly. */
@media (max-width: 480px) {
    .ev-result-img-wrap,
    .ev-result-thumb-placeholder { width: 52px; height: 46px; }
    .ev-result-item { gap: 10px; padding: 10px 8px; }
    .ev-result-title { font-size: 14px; }
    .ev-result-price-text { font-size: 12px; }
    .ev-result-price { max-width: 100px; }
}



/* ════════════════════════════════
   SHORTCODE 4 — [ev_search_mobile]
   Icon-only trigger; tap drops a
   search bar down below the icon
════════════════════════════════ */
.ev-search-wrapper.ev-mobile {
    max-width  : none;
    display    : inline-block;
    position   : relative;
    margin     : 0;
}

.ev-mobile-icon-toggle {
    display        : flex;
    align-items    : center;
    justify-content: center;
    width          : 44px;
    height         : 44px;
    border-radius  : 50%;
    border         : 1.5px solid var(--ev-border);
    background     : var(--ev-white);
    color          : var(--ev-dark);
    cursor         : pointer;
    padding        : 0;
    flex-shrink    : 0;
    transition     : background .2s, border-color .2s;
}
.ev-mobile-icon-toggle svg { width: 20px; height: 20px; pointer-events: none; }
.ev-mobile-icon-toggle:hover,
.ev-mobile-icon-toggle[aria-expanded="true"] {
    background  : var(--ev-bg);
    border-color: var(--ev-muted);
}

/* Panel is fixed so it always drops cleanly below the icon,
   regardless of where the icon sits in a header/menu */
.ev-mobile-panel {
    position : fixed;
    z-index  : 99999;
    animation: ev-mobile-drop .18s ease;
}
@keyframes ev-mobile-drop {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ev-mobile-panel-inner {
    display      : flex;
    align-items  : center;
    background   : var(--ev-white);
    border       : 1.5px solid var(--ev-border);
    border-radius: var(--ev-pill);
    height       : 52px;
    box-shadow   : 0 10px 34px rgba(0,0,0,.18);
    overflow     : hidden;
}
.ev-mobile-panel .ev-search-icon { padding: 0 6px 0 18px; }

.ev-mobile-panel .ev-search-input {
    flex      : 1;
    border    : none;
    outline   : none;
    font-size : 16px;
    color     : var(--ev-text);
    background: transparent;
    min-width : 0;
    padding   : 0;
}
.ev-mobile-panel .ev-search-input::placeholder { color: var(--ev-muted); }

.ev-mobile-close {
    display        : flex;
    align-items    : center;
    justify-content: center;
    width          : 46px;
    height         : 100%;
    flex-shrink    : 0;
    border         : none;
    background     : transparent;
    color          : var(--ev-muted);
    cursor         : pointer;
    padding        : 0;
}
.ev-mobile-close svg { width: 18px; height: 18px; pointer-events: none; }
.ev-mobile-close:hover { color: var(--ev-text); }


/* ════════════════════════════════
   MOBILE SAFEGUARD
   iOS/Android auto-zoom the page
   when a tapped input's font-size
   is below 16px — keep all search
   inputs at 16px on small screens.
════════════════════════════════ */
@media (max-width: 768px) {
    .ev-search-wrapper input.ev-search-input { font-size: 16px; }
}