/* Styles for the shortcodes this plugin still owns — [af_footer_lang],
   [af_footer_sponsors], and [af_footer_brand] (logo + copyright + sponsors
   bundled in one drop-in, 2026-09-20). Everything else about the footer's
   layout is now plain Elementor content Sergio builds/edits himself.
   Still !important throughout: confirmed live that Motors' own
   theme-options CSS ships a blanket `h4, .h4 { font-weight: 400 }` (and
   likely similar resets for other tags/selectors) that silently beats
   even a more specific selector — same reasoning autofliper-header.css
   and every credits-plugin stylesheet already bake in. */

.aff-lang-field {
    margin-bottom: 16px !important; /* breathing room when Language and Appearance are stacked in the same column */
}
.aff-lang-field label {
    display: block !important; font-family: 'DM Sans', -apple-system, sans-serif !important;
    font-size: 13px !important; font-weight: 700 !important; color: var(--af-ink) !important; margin: 0 0 8px !important;
}
.aff-lang-select {
    /* Confirmed live (2026-09-20): Motors' own single-listing.css ships a
       blanket `select { visibility:hidden; opacity:0 }` (presumably
       expecting every native select on that template to be replaced by a
       JS-enhanced dropdown) which silently swallowed this one too, only on
       listing detail pages — invisible-but-present, not simply missing. */
    visibility: visible !important; opacity: 1 !important;
    appearance: none !important; -webkit-appearance: none !important;
    /* The dropdown chevron is an inline SVG data URI — a color inside one
       can't be a var(), so it's swapped for a whole different data URI
       (stroke matching --af-ink-2's dark value) under html.af-dark below,
       instead of the single-file var() approach used everywhere else. */
    background: var(--af-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B70' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center !important;
    background-size: 14px !important;
    border: 1px solid var(--af-line) !important; border-radius: 10px !important;
    color: var(--af-ink) !important; font-family: 'DM Sans', -apple-system, sans-serif !important; font-size: 13px !important; font-weight: 500 !important;
    padding: 9px 32px 9px 12px !important; min-width: 160px !important; cursor: pointer !important;
}
.aff-lang-select:focus { outline: none !important; border-color: var(--af-accent) !important; }
html.af-dark .aff-lang-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239B9BA1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
}

/* Sponsor logos — bare logo only, no card/frame (Sergio, 2026-09-19: "samo
   logo da stoji bez ikakvog okvira"). Height is the primary dimension
   (readable regardless of a tall/portrait logo file) with a generous
   max-width safety cap, not a competing constraint, so a very wide-aspect
   logo file (this site already has one at ~9:1) never gets silently
   squashed down to a sliver or overflows a narrow phone screen. */
.aff-sponsors-row { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 36px !important; }
.aff-sponsor { display: flex !important; align-items: center !important; justify-content: center !important; opacity: .85 !important; transition: opacity .15s ease !important; text-decoration: none !important; }
.aff-sponsor:hover { opacity: 1 !important; }
.aff-sponsor img { height: 60px !important; width: auto !important; max-width: 220px !important; object-fit: contain !important; }

/* Dark mode: sponsor logos are uploaded company logos of unknown color
   (often dark text on a transparent PNG) — spec section 7: brand marks
   stay on a light backdrop in dark mode, never inverted. A fixed
   circle (like the make-browser chips use) doesn't fit here since
   sponsor logos can be any aspect ratio, including ~9:1 wide — a
   rounded-rect white pill sized to the logo does the same job without
   cropping or distorting a wide logo. */
html.af-dark .aff-sponsor img {
    background: #FFFFFF !important;
    border-radius: 10px !important;
    padding: 6px 10px !important;
    box-sizing: content-box !important;
}

/* [af_footer_nav] — Language+Theme / Company / Legal / Dealer / Explore, all in one row, max-width 1100px per Sergio's spec (2026-09-20). */
.aff-nav-row { display: flex !important; flex-wrap: wrap !important; gap: 28px 20px !important; max-width: 1100px !important; margin: 0 auto !important; }
.aff-nav-col { flex: 1 1 180px !important; min-width: 140px !important; }
.aff-nav-col-lang { flex: 0 0 auto !important; min-width: 160px !important; }
.aff-nav-col h4 { font-family: 'DM Sans', -apple-system, sans-serif !important; font-size: 13px !important; font-weight: 700 !important; color: var(--af-ink) !important; margin: 0 0 12px !important; }
.aff-nav-col a { display: block !important; color: var(--af-ink-2) !important; font-size: 13.5px !important; text-decoration: none !important; padding: 5px 0 !important; transition: color .15s ease !important; }
.aff-nav-col a:hover { color: var(--af-accent) !important; }
/* Reserves the exact footprint of the Appearance dropdown ([af_footer_theme]) so dropping it in later doesn't shift anything else — remove this div once that shortcode actually goes here. */
.aff-theme-placeholder { height: 50px !important; }

/* [af_footer_brand] — logo, copyright, sponsors stacked in that order. */
.aff-brand-block { padding-top: 40px !important; }
.aff-brand-logo { display: flex !important; justify-content: center !important; margin-bottom: 18px !important; }
.aff-brand-logo img { height: 26px !important; width: auto !important; max-width: 220px !important; }
.aff-brand-copy { font-family: 'DM Sans', -apple-system, sans-serif !important; font-size: 12px !important; color: var(--af-accent) !important; font-weight: 600 !important; text-align: center !important; margin-bottom: 36px !important; }

/* ─── mobile: Language centered full-width first, then Company+Legal as a
   centered pair, then Dealer+Explore as a centered pair, then (via
   Elementor's own element order, outside this shortcode) sponsors last —
   Sergio, 2026-09-20: "sve lepo centrirano". ─── */
@media (max-width: 600px) {
    .aff-nav-row { justify-content: center !important; text-align: center !important; gap: 32px 16px !important; }

    /* Compound selector (not just .aff-nav-col-lang) so this reliably beats
       .aff-nav-col's own `flex:` shorthand below regardless of which rule
       happens to come second in the file — confirmed live this was
       silently losing as a same-specificity single-class selector,
       shoving Language into a 50/50 pair with Company instead of its own
       full-width row. */
    .aff-nav-col.aff-nav-col-lang { flex: 1 0 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; }
    .aff-lang-field { display: flex !important; flex-direction: column !important; align-items: center !important; }
    .aff-lang-select { min-width: 220px !important; width: auto !important; text-align: center !important; text-align-last: center !important; }
    .aff-theme-placeholder { width: 220px !important; }

    /* Company+Legal on one row, Dealer+Explore on the next — matches the
       array order the shortcode already outputs them in, just forced two
       per row instead of wrapping wherever width happens to run out. */
    .aff-nav-col { flex: 0 1 calc(50% - 8px) !important; min-width: 0 !important; text-align: center !important; }
    .aff-nav-col a { padding: 6px 0 !important; } /* a touch more breathing room now links are stacked+centered, easier to tap */

    .aff-sponsors-row { gap: 24px !important; }
    .aff-sponsor img { height: 46px !important; max-width: calc(100vw - 80px) !important; }
    .aff-brand-logo { margin-bottom: 14px !important; }
    .aff-brand-copy { font-size: 11.5px !important; margin-bottom: 28px !important; }
}

@media (prefers-reduced-motion: reduce) { .aff-sponsor { transition: none !important; } }