/* ── Car Finder Widget v1.0.5 ── Fully Responsive ──────────────────────── */

/* Outer wrapper handles horizontal alignment */
.cfw-finder-wrap {
    display: flex;
    width: 100%;
    justify-content: center; /* default; overridden by Elementor selector */
}

/* ── Main card ── */
.cfw-finder {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #ffffff;
    border-radius: 20px;
    padding: 36px;
    width: 100%;
    max-width: 620px;
    box-sizing: border-box;

    /* Deep shadow — default */
    box-shadow:
        0 2px 4px  rgba(0, 0, 0, 0.04),
        0 8px 16px rgba(0, 0, 0, 0.08),
        0 24px 48px rgba(0, 0, 0, 0.14),
        0 48px 80px rgba(0, 0, 0, 0.10);
}

/* Shadow overrides via data-shadow attribute */
.cfw-finder[data-shadow="none"]  { box-shadow: none; }
.cfw-finder[data-shadow="soft"]  { box-shadow: 0 4px 24px rgba(0,0,0,.10); }
.cfw-finder[data-shadow="deep"]  {
    box-shadow:
        0 2px 4px  rgba(0,0,0,.04),
        0 8px 16px rgba(0,0,0,.08),
        0 24px 48px rgba(0,0,0,.14),
        0 48px 80px rgba(0,0,0,.10);
}
.cfw-finder[data-shadow="ultra"] {
    box-shadow:
        0 4px 8px  rgba(0,0,0,.12),
        0 16px 32px rgba(0,0,0,.20),
        0 40px 80px rgba(0,0,0,.28);
}

/* ── Heading ── */
.cfw-heading {
    font-size: clamp(1.1rem, 3vw, 1.5rem);
    font-weight: 700;
    color: #1a1a2e;
    text-align: center;
    margin: 0 0 4px;
    line-height: 1.25;
}

/* ── Sub-label ── */
.cfw-sub-label {
    font-size: .72rem;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin: 0 0 14px;
    text-align: center;
}

/* ── Brand grid — fluid by default, columns overridden by Elementor ── */
.cfw-brand-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    width: 100%;
}

/* ── Brand card ── */
.cfw-brand-card {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    border: 1.5px solid #ebebeb;
    background: #f9f9f9;
    cursor: pointer;
    padding: 10px;
    box-sizing: border-box;
    outline: none;
    text-decoration: none;
    color: inherit;
    width: 100%;
    min-width: 0; /* prevent grid blowout */

    transition:
        transform        .18s ease,
        box-shadow       .18s ease,
        border-color     .18s ease,
        background-color .18s ease;
}

.cfw-brand-card:hover {
    background: #e8f0fe;
    border-color: #b8caee;
    transform: translateY(-4px);
    box-shadow:
        0 4px 8px   rgba(26, 26, 46, 0.08),
        0 12px 24px rgba(26, 26, 46, 0.14);
    text-decoration: none;
    color: inherit;
}

.cfw-brand-card:focus-visible {
    outline: 3px solid #4a80f0;
    outline-offset: 2px;
}

/* ── Logo ── */
.cfw-brand-logo {
    max-height: 44px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    pointer-events: none;
    filter: grayscale(25%);
    transition: filter .18s ease;
    display: block;
}

.cfw-brand-card:hover .cfw-brand-logo {
    filter: grayscale(0%);
}

/* ── Text fallback (no logo) ── */
.cfw-brand-name {
    font-size: clamp(.5rem, 1.2vw, .65rem);
    font-weight: 700;
    color: #555;
    text-align: center;
    line-height: 1.3;
    word-break: break-word;
    hyphens: auto;
}

/* ── Built-in responsive breakpoints (Elementor overrides these) ── */

/* Tablet */
@media (max-width: 1024px) {
    .cfw-finder {
        border-radius: 16px;
        padding: 28px;
    }
    .cfw-brand-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }
    .cfw-brand-logo { max-height: 36px; }
}

/* Mobile */
@media (max-width: 767px) {
    .cfw-finder {
        border-radius: 12px;
        padding: 20px 16px;
        max-width: 100%;
    }
    .cfw-brand-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }
    .cfw-brand-logo { max-height: 28px; }
    .cfw-heading { font-size: 1.15rem; }
}

/* Very small screens */
@media (max-width: 360px) {
    .cfw-brand-grid { grid-template-columns: repeat(3, 1fr); gap: 4px; }
    .cfw-finder { padding: 16px 12px; }
}