/*
Theme Name: Listeo Child
Theme URI: https://listeo.pro
Description: Child theme for Listeo
Author: FLARE
Author URI: https://floridaarmexchange.com
Template: listeo
Version: 1.0.5
*/

/* Import parent theme styles */
@import url("../listeo/style.css");

/* ===================================================
   Fix: Compressed sidebar on classifieds-category
   archive pages. The sticky JS reads a bad computed
   width on these taxonomy templates and locks it in
   as an inline style. We force the correct Bootstrap
   column width so the sticky script inherits the
   right value, and override any inline style it sets.
   =================================================== */

.tax-classifieds_category .col-lg-3.sticky,
.tax-classifieds_category .col-md-4.sticky {
    width: 25% !important;       /* lg: col-lg-3 = 25% */
}

@media (max-width: 1199px) {
    .tax-classifieds_category .col-md-4.sticky {
        width: 33.3333% !important;  /* md: col-md-4 = 33% */
    }
}

@media (max-width: 991px) {
    .tax-classifieds_category .col-md-4.sticky {
        width: 100% !important;      /* stacks below tablet */
    }
}
/* ===================================================
   Fix: Sidebar search form on classifieds-category
   archive pages — stack inputs + restore input styling
   to match the /listings/ sidebar appearance.
   =================================================== */

.tax-classifieds_category .sidebar .main-search-input {
    display: block !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.tax-classifieds_category .sidebar .main-search-input-item {
    width: 100% !important;
    display: block !important;
    margin-bottom: 10px !important;
    border-right: none !important;
    padding: 0 !important;
}

.tax-classifieds_category .sidebar .main-search-input-item input[type="text"] {
    width: 100% !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 4px !important;
    padding: 10px 16px !important;
    background: #fff !important;
    font-size: 14px !important;
    color: #333 !important;
    box-shadow: none !important;
    height: auto !important;
    line-height: normal !important;
}

.tax-classifieds_category .sidebar .main-search-input-item.location {
    position: relative !important;
}

.tax-classifieds_category .sidebar .bootstrap-select,
.tax-classifieds_category .sidebar .bootstrap-select .btn {
    width: 100% !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 4px !important;
    background: #fff !important;
    box-shadow: none !important;
}
/* ===================================================
   Fix: Sticky sidebar overlaps footer when no results
   =================================================== */

.tax-classifieds_category .sticky-wrapper {
    min-height: 400px;
}

.tax-classifieds_category .col-lg-3.sticky,
.tax-classifieds_category .col-md-4.sticky {
    position: relative !important;
    top: auto !important;
}
/* ===== YOUR CUSTOM STYLES BELOW ===== */
/* ============================================================
   FLARE: User Type Badges
   ============================================================ */
.flare-badge {
    display: inline-block;
    vertical-align: middle;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    line-height: 1.4;
    white-space: nowrap;
    width: auto !important;
    margin-left: 8px;
    position: relative;
    top: -2px;
}

.flare-badge--business {
    background-color: #1a3a5c;
    color: #ffffff;
}

.flare-badge--private {
    background-color: #e8eff5;
    color: #1a3a5c;
    border: 1px solid #c5d3de;
}

/* ============================================================
   FLARE: Compact card badge override (Similar Listings / Nearby
   Listings carousels). These cards sit the badge directly over a
   product photo with a translucent overlay — the light blue/navy
   combo used elsewhere washes out against that backdrop. This
   swaps in a smaller, solid, high-contrast version scoped only
   to .compact cards; the main /listings/ archive grid is untouched.
   Added: 2026-06-28
   ============================================================ */
.listing-item-container.compact .flare-badge {
    font-size: 8px;
    padding: 2px 6px;
    letter-spacing: 0.04em;
    margin-left: 6px;
    top: -1px;
}

.listing-item-container.compact .flare-badge--private {
    background-color: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    border: none;
}

.listing-item-container.compact .flare-badge--business {
    background-color: rgba(26, 58, 92, 0.85);
    color: #ffffff;
    border: none;
}
/* ============================================================ */
/* ============================================================ */

/* ============================================================
   FLARE: Brand Color Overrides — #c73a3a
   Listeo's dynamic color output doesn't carry over to the
   child theme. These overrides restore the primary color
   across all key UI elements.
   ============================================================ */

/* 1. CSS custom properties (Listeo uses these for newer elements) */
:root {
    --primary-color:       #c73a3a;
    --primary-color-hover: #a82e2e;
    --secondary-color:     #c73a3a;
}

/* 2. Buttons */
.button.border,
a.button.border,
button.button,
input[type="submit"],
.btn-primary,
.listing-search-button,
.main-search-button,
.main-search-input .button,
.search-btn,
a.btn-primary {
    background-color: #c73a3a !important;
    border-color:     #c73a3a !important;
    color:            #ffffff !important;
}

.button.border:hover,
a.button.border:hover,
button.button:hover,
input[type="submit"]:hover,
.btn-primary:hover {
    background-color: #a82e2e !important;
    border-color:     #a82e2e !important;
}

/* 3. Links */
a,
a:visited {
    color: #c73a3a;
}
a:hover {
    color: #a82e2e;
}

/* 4. Header / navigation */
#header,
#header .main-nav ul li a:hover,
#header .main-nav ul li.current-menu-item > a,
.sticky-header.cloned {
    /* If your header uses a color background, uncomment:
    background-color: #c73a3a !important; */
}

.main-nav ul li a:hover,
.main-nav ul li.current-menu-item > a,
.main-nav ul li.current_page_item > a {
    color: #c73a3a !important;
}

/* 5. Category / icon accent colors */
.listing-item-category i,
.category-small-box i,
.icon-box-2 i,
.listing-features i,
.cat-icon i {
    color: #c73a3a !important;
}

/* 6. Badges, labels, tags */
.listing-badges span.featured,
.ribbon-featured,
.badge-color {
    background-color: #c73a3a !important;
}

/* 7. Pagination */
.pagination-next-prev a:hover,
ul.pagination li.active a,
ul.pagination li a:hover {
    background-color: #c73a3a !important;
    border-color:     #c73a3a !important;
    color:            #fff !important;
}

/* 8. Range slider / checkboxes (Listeo custom UI) */
.ui-slider .ui-slider-handle,
.ui-slider .ui-slider-range {
    background-color: #c73a3a !important;
}

/* 9. Dashboard sidebar active state */
.dashboard-nav ul li.active a,
.dashboard-nav ul li a:hover {
    color: #c73a3a !important;
}
.dashboard-nav ul li.active a::before {
    background-color: #c73a3a !important;
}

/* 10. Star ratings */
.listing-rating .star-rating span,
.listing-rating i.filled {
    color: #c73a3a !important;
}
/* ============================================================ */
/* ── FLARE: Hide contact info when author has toggled it off ── */
.flare-contact-hidden .listing-phone,
.flare-contact-hidden .listing-email,
.flare-contact-hidden .listing-website,
.flare-contact-hidden .listing-contact,
.flare-contact-hidden .listing-contact-details,
.flare-contact-hidden .author-contact,
.flare-contact-hidden .author-widget .phone,
.flare-contact-hidden .author-widget .email,
.flare-contact-hidden .freelancer-socials a[href^="tel:"],
.flare-contact-hidden .freelancer-socials a[href^="mailto:"],
.flare-contact-hidden a.call-btn,
.flare-contact-hidden .listing_phone,
.flare-contact-hidden .listing_email,
.flare-contact-hidden .listing_website,
.flare-contact-hidden .widget_listing_contact {
    display: none !important;
}
@media (max-width: 991px) {
  /* Sidebar (search/filters) is relocated into the full-screen
     overlay panel by JS on mobile — hide its original slot so
     it doesn't render twice while JS runs. See functions.php
     section 11 (flare_enqueue_mobile_filter_panel).
     Breakpoint widened from 767px to 991px on 2026-07-01: Bootstrap's
     own .col-md-4 sidebar layout doesn't apply until min-width:992px,
     so anything narrower than that (including iPad portrait,
     ~768-834px) fell into a dead zone with neither this mobile
     treatment nor Bootstrap's desktop columns applied — the sidebar
     rendered as a full-width block stacked above the listings. */
  .sticky-wrapper > .col-lg-3.col-md-4 {
    display: none !important;
  }

  /* Expand listings to full width */
  .col-lg-9.col-md-8.listings-column-content {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    float: none !important;
  }
}

/* ===================================================
   FLARE: Mobile filter panel (full-screen overlay)
   Triggered from a button injected into the sticky
   .flare-archive-search bar. Contains the REAL sidebar
   form (moved by reference, not cloned) so all dynamic
   per-category fields (Brand, Caliber, Condition, etc.)
   keep working exactly as they do in the sidebar.
   Injected via JS — see functions.php section 11.
   Added: 2026-06-30
   =================================================== */
.flare-mobile-filter-btn {
    display: none;
}

#flare-mobile-filter-overlay {
    display: none;
}

/* ===================================================
   FLARE: Fix sticky positioning broken by overflow-x
   Listeo's parent theme sets overflow-x: hidden on BOTH body and
   #wrapper as horizontal-scroll guards. Any non-visible overflow
   value on an ancestor between a sticky element and the real page
   scroll container breaks position: sticky — the sticky element
   ends up anchored to that ancestor's (non-scrolling) box instead
   of the actual viewport scroll. overflow: clip specifically does
   NOT establish a scrolling box (unlike hidden, which still creates
   one programmatically even without visible scrollbars), so
   switching both rules to clip preserves the horizontal-scroll
   protection while letting sticky bubble up to the real viewport.
   Added: 2026-06-30
   =================================================== */
html {
    overflow-x: clip;
}
body {
    overflow-x: visible !important;
}
#wrapper {
    overflow-x: clip !important;
}

@media (max-width: 991px) {

  .flare-mobile-filter-btn {
      flex-shrink: 0;
      width: 48px;
      height: 48px;
      border: none;
      border-radius: 4px;
      background: #c73a3a;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 20px;
      padding: 0;
  }

  .flare-mobile-filter-btn:active {
      background: #a82e2e;
  }

  #flare-mobile-filter-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: #fff;
      flex-direction: column;
  }

  #flare-mobile-filter-overlay.flare-overlay-open {
      display: flex;
  }

  .flare-overlay-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px;
      border-bottom: 1px solid #eee;
      flex-shrink: 0;
  }

  .flare-overlay-header span {
      font-size: 16px;
      font-weight: 600;
      color: #1a1a1a;
  }

  .flare-overlay-close {
      background: none;
      border: none;
      font-size: 24px;
      line-height: 1;
      color: #666;
      cursor: pointer;
      padding: 4px 8px;
  }

  .flare-overlay-body {
      flex: 1;
      overflow-y: auto;
      padding: 16px;
  }

  .flare-overlay-footer {
      flex-shrink: 0;
      display: flex;
      gap: 10px;
      padding: 12px 16px;
      border-top: 1px solid #eee;
  }

  .flare-overlay-footer button {
      flex: 1;
      height: 46px;
      border-radius: 6px;
      border: none;
      background: #c73a3a;
      color: #fff;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
  }

  #flare-mobile-filter-overlay .sidebar {
      width: 100% !important;
      position: static !important;
      top: auto !important;
  }

  #flare-mobile-filter-overlay .widget-title {
      display: none;
  }

  #flare-mobile-filter-overlay #listeo_core-search-form {
      display: flex;
      flex-direction: column;
      gap: 18px;
  }
}

/* ============================================================
   FLARE: Welcome / Feedback Popup
   ============================================================ */
.flare-welcome-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
}

.flare-welcome-box {
    background: #fff;
    border-radius: 8px;
    max-width: 420px;
    width: 90%;
    padding: 30px;
    position: relative;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.flare-welcome-logo {
    width: 180px !important;
    height: auto !important;
    margin: 0 auto 15px;
    display: block;
}

.flare-welcome-box h3 {
    color: #c73a3a;
    margin-top: 0;
}

.flare-welcome-box p {
    color: #333;
    line-height: 1.5;
    margin: 0 0 14px;
}

.flare-welcome-box p:last-of-type {
    margin-bottom: 20px;
}

.flare-welcome-close {
    position: absolute;
    top: 10px;
    right: 14px;
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: #888;
}

.flare-welcome-close:hover {
    color: #c73a3a;
}

.flare-welcome-btn,
.flare-welcome-btn:visited {
    display: inline-block;
    background: #c73a3a;
    color: #fff !important;
    padding: 10px 22px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    margin-bottom: 15px;
}

.flare-welcome-btn:hover {
    background: #a82e2e;
    color: #fff;
}

.flare-welcome-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    color: #777;
    cursor: pointer;
}

.flare-welcome-checkbox input {
    width: 16px !important;
    height: 16px !important;
    margin: 0;
}
/* ============================================================ */

/* Hide Longitude, Latitude, and Place ID fields on Add Listing.
   Values still autopopulate via Listeo's address-autocomplete JS — 
   inputs remain in the DOM and in the form, just visually hidden. */
.form-field-_geolocation_long-container,
.form-field-_geolocation_lat-container,
.form-field-_place_id-container {
    display: none !important;
}


/* ===================================================
   FLARE: "Posted X time ago" on single listing page
   Injected via JS into the sidebar, right after the
   "Added By" line — see functions.php section 12.
   Added: 2026-06-28
   =================================================== */
.flare-posted-ago {
    font-size: 12px;
    color: #999;
    margin: 2px 0 0;
}


/* ===================================================
   FLARE: Top-of-archive search bar
   Mirrors the sidebar keyword search. Sits above the
   Filters toggle on mobile, top of content column on desktop.
   Re-added: 2026-06-29
   =================================================== */
.flare-archive-search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 20px;
}

/* FLARE: Sticky + full-bleed override for the mobile filter panel
   redesign. Placed here deliberately — AFTER the base rule above —
   because CSS resolves equal-specificity rules by source order
   regardless of media-query nesting; an earlier declaration inside
   a media query still loses to a later unconditional one. See
   functions.php section 11 (flare_enqueue_mobile_filter_panel).
   Added: 2026-06-30
   Breakpoint widened from 767px to 991px on 2026-07-01 — see the
   .sticky-wrapper > .col-lg-3.col-md-4 rule above for why. */
@media (max-width: 991px) {
    .flare-archive-search {
        position: sticky;
        top: 0;
        z-index: 40;
        background: #fff;
        padding: 10px 15px;
        box-shadow: 0 1px 0 rgba(0,0,0,0.06);
        width: 100vw;
        margin-left: calc(50% - 50vw);
        box-sizing: border-box;
        flex: none;
        margin-bottom: 12px;
    }
}

.flare-archive-search input[type="text"],
.flare-archive-search-btn {
    box-sizing: border-box !important;
    height: 48px !important;
    margin: 0 !important;
    vertical-align: middle !important;
    line-height: normal !important;
}

.flare-archive-search input[type="text"] {
    flex: 1;
    border: 1px solid #e0e0e0 !important;
    border-radius: 4px;
    padding: 0 16px !important;
    font-size: 14px;
    color: #333;
}

.flare-archive-search-btn {
    flex-shrink: 0;
    background-color: #c73a3a;
    color: #fff;
    border: none !important;
    border-radius: 4px;
    padding: 0 18px !important;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* Align the search bar with the content column (not the sidebar) at
   breakpoints where the sidebar sits beside the content. */
@media (min-width: 1200px) {
    .flare-archive-search {
        margin-left: 25%;
        width: 75%;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .flare-archive-search {
        margin-left: 33.3333%;
        width: 66.6667%;
    }
}

/* ===================================================
   FLARE: Sidebar filter widget — darker text, bold
   parent categories.
   The category dropdown list (Categories, Location,
   Radius, Price Filter) uses light gray/blue text by
   default in Listeo's styling; this darkens the labels
   for readability. Parent categories are bolded via a
   JS-added class (see functions.php section 14) since
   Listeo marks sub-categories only with literal leading
   spaces in the label text, not a class or attribute
   CSS could target directly.
   Added: 2026-06-30
   =================================================== */
.sidebar .range-slider-subtitle,
.sidebar .data-radius-title,
.sidebar .filter-option,
.sidebar .bootstrap-select .dropdown-menu .text {
    color: #1a1a1a !important;
}

.sidebar .bootstrap-select .dropdown-menu li.flare-cat-parent a {
    font-weight: 700;
}

.sidebar .bootstrap-select .dropdown-menu li.flare-cat-parent a .text {
    color: #1a1a1a !important;
}

/* ===================================================
   FLARE: Single listing mobile reorder
   On desktop, Bootstrap's col-lg-4 (sidebar: price,
   message vendor form, author widget, bookmark button)
   and col-lg-8 (content: overview/details, description,
   location) sit side by side inside .row.sticky-wrapper,
   sidebar first in source order. Below 768px neither
   column has a defined width/float, so they just stack
   in raw DOM order -- sidebar (including the author
   widget) renders above the actual listing details,
   which reads backwards on mobile.
   Scoped to body.single-listing (WP's automatic body
   class for the "listing" post type singular) so this
   never touches the archive/category page's own
   .sticky-wrapper (different column classes: col-lg-3/
   col-lg-9 there vs col-lg-4/col-lg-8 here, but scoping
   by body class is the more explicit, future-proof
   guard).
   Flips render order only -- no DOM move, no JS -- so
   Details/Description/Location render right under the
   photo, and the sidebar block (price, message form,
   author info, bookmark) renders afterward, putting the
   author widget near the bottom of the page.
   Added: 2026-07-01
   =================================================== */
@media (max-width: 767px) {
    body.single-listing .sticky-wrapper {
        display: flex;
        flex-direction: column;
    }

    body.single-listing .sticky-wrapper > .listeo-single-listing-content {
        order: 1;
        width: 100% !important;
        float: none !important;
    }

    body.single-listing .sticky-wrapper > .listeo-single-listing-sidebar {
        order: 2;
        width: 100% !important;
        float: none !important;
        position: static !important;
        top: auto !important;
    }
}

/* ===================================================
   FLARE: Single listing mobile price wrapper
   Positions #classifieds_price after it's moved by JS
   (functions.php section 15) to sit directly under the
   photo gallery, above the listing details. #classifieds_price
   itself keeps its existing look from the parent theme's
   ID-based styling -- this just spaces the wrapper to
   align with the page's normal side padding.
   Added: 2026-07-01
   =================================================== */
@media (max-width: 767px) {
    body.single-listing .flare-mobile-price-wrap {
        margin: 0 15px 15px;
    }
}

/* ===================================================
   FLARE: Author name on listing cards
   Injected via JS (functions.php: flare_enqueue_badge_script,
   the "Author name (linked) on listing cards" block) right
   after the location line (or after the title, on cards
   without a location line, like the compact carousel cards).
   Kept intentionally small and low-contrast -- cards are
   already tight on space -- one line, no extra vertical
   padding beyond a small top margin to separate it from
   whatever it follows.
   Added: 2026-07-01
   =================================================== */
.flare-card-author {
    font-size: 11px;
    color: #999;
    margin: 3px 0 0;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.flare-card-author a {
    color: #999;
    text-decoration: none;
}

.flare-card-author a:hover {
    color: #c73a3a;
    text-decoration: underline;
}

/* Compact carousel cards (Similar/Nearby Listings) sit the badge/price
   over a photo with less room below the title -- keep the author line
   just as tight there, no additional override needed beyond the base
   rule above, but scoped smaller top margin since these cards are
   denser. */
.listing-item-container.compact .flare-card-author {
    margin-top: 2px;
    font-size: 10px;
}