/**
 * Design Modernization CSS — v2.1
 * Plugin: ListingPro Custom Layout Replacements
 *
 * All overrides target stable ListingPro theme classes.
 * This file survives theme updates — no theme files are modified.
 *
 * Color System (canonical palette):
 *   Primary:    #0DAAAA (teal)         — SET IN REDUX, not overridden here
 *   Secondary:  #0D2847 (navy)         — headings, text — Redux doesn't control these
 *   Accent/CTA: #FF6B35 (orange)       — search btn, CTA — intentional override
 *   BG:         #F8FAFC (light gray)   — section backgrounds
 *   Text:       #1A1A2E (near-black)   — body text
 *   Text-muted: #6B7A8D (steel)        — meta text
 *   Border:     #E2E8F0 (cool gray)    — card/form borders
 *   Success:    #22C55E                — semantic
 *   Error:      #EF4444                — semantic
 *
 * RULE: Colors controlled by Redux (theme_color, footer_bgcolor, etc.)
 *       are NOT overridden here. Change them in Appearance > Theme Options.
 */

/* ============================================================
   0. FONT LOADING — Inter loaded via wp_enqueue_style (class-design-system.php)
   ============================================================ */

/* ============================================================
   1. GLOBAL RESETS & BASE STYLES
   ============================================================ */

body,
body.home,
body.page,
body.single,
body.archive,
body.search {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
    color: #1A1A2E;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.lp-h1, .lp-h2, .lp-h3, .lp-h4, .lp-h5, .lp-h6 {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
    color: #0D2847;
    font-weight: 700;
    line-height: 1.3;
}

p, span, a, li, td, th, label, input, select, textarea, button {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}

a {
    transition: color 0.15s ease;
}

/* ============================================================
   2. GLOBAL TRANSITIONS
   ============================================================ */

.lp-grid-box,
.lp-primary-btn,
.lp-secondary-btn,
.lp-search-btn,
.lp-submit-btn,
.lpl-button,
.lp-home-categoires li a,
.lp-add-to-fav,
.widget-box,
.lp-blog-grid-box {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ============================================================
   3. HEADER / NAVIGATION
   ============================================================
   NOTE: header background color controlled by Redux (header_bgcolor).
   Button colors controlled by Redux dynamic CSS. We only add shadow,
   font, and alignment fixes here. */

.lp-menu-bar,
.lp-menu-bar.header-bg-color-class {
    box-shadow: 0 1px 3px rgba(13,40,71,0.06) !important;
    border-bottom: none !important;
}

.header-fixed .lp-menu-bar,
.header-fixed .lp-menu-bar.header-bg-color-class {
    box-shadow: 0 2px 12px rgba(13,40,71,0.08) !important;
}

/* Nav menu items */
.lp-menu-container .menu-item > a,
#menu-home-page-menu li a,
.lp-menu ul li a {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    color: #1A1A2E !important;
    transition: color 0.2s ease !important;
}

.lp-menu-container .menu-item > a:hover,
.lp-menu ul li a:hover {
    color: #0DAAAA !important;
}

/* Header buttons alignment container */
.contentlogin-flex {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* Strip ul/li default margin/padding */
.lp-add-listing-btn ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.lp-add-listing-btn ul li {
    margin: 0 !important;
    padding: 0 !important;
}

/* Add Company button — inline-flex for icon+text alignment.
   Colors controlled by Redux. Only layout here. */
.lp-add-listing-btn a.header-list-icon-st6,
.lp-header-full-width .lp-add-listing-btn ul li a.header-list-icon-st6,
.lp-header-style-classic .header-list-icon-st6 {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}

/* Sign In — match Add Company button size.
   classic-header.css sets border: 2px solid #FFFFFF which is invisible on white bg.
   Override border color to navy so it's visible on all pages. */
.lp-header-style-classic .lp-join-now {
    padding: 1px 12px !important;
    margin-top: 0px !important;
    height: 41px !important;
}

.lp-header-style-classic .lp-join-now:hover {
    border-color: #0DAAAA !important;
    background: rgba(13,170,170,0.05) !important;
}

/* Sign In icon color — match text */
.lp-header-style-classic .lp-join-now span i {
    color: #0D2847 !important;
}

.lp-join-now a {
    font-size: 14px !important;
    font-weight: 500 !important;
}

/* Logo */
.lp-logo img {
    max-height: 44px;
    width: auto;
}

/* ============================================================
   4. HERO / BANNER SECTION
   ============================================================ */

.lp-home-banner-contianer {
    position: relative;
}

.page-header-overlay,
.lp-header-overlay {
    background: linear-gradient(135deg, rgba(13,40,71,0.88) 0%, rgba(13,170,170,0.72) 100%) !important;
    opacity: 1 !important;
}

/* Banner heading */
.lp-home-banner-contianer-inner h1,
.lp-home-banner-contianer-inner h1[data-locnmethod="withip"] {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 44px !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    letter-spacing: -0.5px !important;
    line-height: 1.2 !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.15) !important;
    margin-bottom: 8px !important;
}

/* Banner subtitle */
.lp-banner-browse-txt {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    color: rgba(255,255,255,0.9) !important;
    margin-top: 8px !important;
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Hide the outdated arrow/instruction below search */
.lp-search-description {
    display: none !important;
}

/* ============================================================
   5. SEARCH BAR
   ============================================================
   DOM: .lp-search-bar > form.form-inline
     ├── .form-group.lp-suggested-search  (What)
     │     ├── .input-group-addon.lp-border
     │     └── .pos-relative > .what-placeholder > input#select
     ├── .form-group.lp-location-search  (Where)
     │     ├── .input-group-addon.lp-border.lp-where
     │     └── .ui-widget > input#customCities
     └── .form-group.pull-right
           └── .lp-search-bar-right > input.lp-search-btn + i.lp-search-icon
   ============================================================ */

/* Search bar container */
.lp-search-bar {
    background: rgba(255,255,255,0.97) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-radius: 12px !important;
    padding: 4px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
}

/* The theme positions labels (.input-group-addon) at the left of the form-group
   via position:absolute, and uses padding-left:65px on the input so the input
   text starts AFTER the label. We keep this layout — only override colors,
   font, and ensure the padding-left is enforced with !important. */

/* Labels ("What" / "Where") — style + vertical centering.
   classic-header.css sets padding: 0 0 0 10px with no vertical centering.
   Fix: line-height: 46px centers text in the 46px-tall form-group. */
.lp-header-style-classic .form-group.lp-suggested-search .input-group-addon.lp-border,
.lp-header-style-classic .form-group.lp-location-search .input-group-addon.lp-border.lp-where,
.lp-home-banner-contianer .lp-search-bar .form-group .input-group-addon.lp-border,
.lp-home-banner-contianer .lp-search-bar .form-group .input-group-addon.lp-where {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #6B7A8D !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    opacity: 1 !important;
    line-height: 46px !important;
    height: 46px !important;
}

/* "What" input — padding-left:65px clears the label.
   This is the theme's original approach; we enforce it with !important
   because our earlier rules accidentally overrode it to 0. */
.lp-home-banner-contianer .lp-search-bar .form-group.lp-suggested-search .lp-search-input.form-control,
.lp-home-banner-contianer .lp-search-bar .form-group input#select {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    padding-left: 65px !important;
    padding-right: 10px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 15px !important;
    color: #1A1A2E !important;
    height: 46px !important;
    line-height: 46px !important;
    width: 100% !important;
}

/* "Where" input — padding-left:90px clears BOTH the "WHERE" label AND the
   crosshairs icon (positioned absolute at left:65px, ~14px wide = ends at ~79px).
   90px provides clear spacing after the icon. */
.lp-home-banner-contianer .lp-search-bar .form-group.lp-location-search input#customCities,
.lp-home-banner-contianer .lp-search-bar .form-group input#customCities,
.lp-search-bar .lp-location-search .ui-widget input#customCities {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    padding-left: 90px !important;
    padding-right: 10px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 15px !important;
    color: #1A1A2E !important;
    height: 46px !important;
    width: 100% !important;
    line-height: 46px !important;
}

/* Hide theme's fake placeholder pseudo-element */
.lp-home-banner-contianer .lp-search-bar .what-placeholder::after {
    display: none !important;
}

.lp-search-bar .form-control:focus,
.lp-search-bar .lp-search-input:focus {
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Search button wrapper — transparent bg */
.form-group .lp-search-bar-right,
.lp-search-bar .lp-search-bar-right {
    background: transparent !important;
    background-color: transparent !important;
    position: relative !important;
}

/* Last form-group transparent */
.lp-home-banner-contianer .lp-search-bar .form-group:last-of-type {
    background-color: transparent !important;
}

/* Search button — orange, matching 46px height */
.lp-home-banner-contianer .lp-search-bar input.lp-search-btn,
.lp-search-bar input.lp-search-btn,
input.lp-search-btn {
    background: #FF6B35 !important;
    background-color: #FF6B35 !important;
    color: #FFFFFF !important;
    height: 46px !important;
    padding: 0 20px 0 38px !important;
    border-radius: 0 8px 8px 0 !important;
    border: none !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 46px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Search button hover */
.lp-home-banner-contianer .lp-search-bar input.lp-search-btn:hover,
.lp-search-bar input.lp-search-btn:hover,
input.lp-search-btn:hover {
    background: #E55A2B !important;
    background-color: #E55A2B !important;
}

/* Search icon — above the submit button */
.lp-search-bar-right i.lp-search-icon,
.lp-search-bar-right i.icons8-search,
i.icons8-search.lp-search-icon {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #FFFFFF !important;
    font-size: 15px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 3 !important;
    pointer-events: none !important;
    width: auto !important;
    height: auto !important;
}

/* Issue 2 fix: Search dropdown z-index */
#input-dropdown {
    border-radius: 12px !important;
    box-shadow: 0 12px 40px rgba(13,40,71,0.12) !important;
    border: 1px solid #E2E8F0 !important;
    margin-top: 6px !important;
    overflow: hidden !important;
    background: #FFFFFF !important;
    z-index: 99999 !important;
    position: absolute !important;
}

/* Issue 2 fix: Parent stacking context */
.lp-search-bar .pos-relative {
    position: relative !important;
    z-index: 100 !important;
}

/* Issue 2 fix: Category area below search */
.home-categories-area {
    position: relative !important;
    z-index: 1 !important;
    margin-top: -40px !important;
}

#input-dropdown ul {
    padding: 8px 0 !important;
}

#input-dropdown ul li,
#input-dropdown ul li.lp-wrap-cats {
    padding: 10px 16px !important;
    transition: background 0.15s ease !important;
    border-bottom: none !important;
}

/* Issue 6 fix: Override child theme #00CCC0 dropdown hover */
#input-dropdown ul li:hover,
#input-dropdown ul li.lp-wrap-cats:hover,
#input-dropdown li:hover,
#input-dropdown li:hover span {
    background-color: #0DAAAA !important;
    color: #FFFFFF !important;
}

#input-dropdown ul li .lp-s-cat {
    font-size: 14px !important;
    color: #1A1A2E !important;
    font-weight: 500 !important;
}

#input-dropdown ul li:hover .lp-s-cat {
    color: #FFFFFF !important;
}

/* Chosen select (location dropdown) */
.chosen-container .chosen-results li,
.chosen-container .chosen-single {
    font-family: 'Inter', system-ui, sans-serif !important;
}

/* ============================================================
   6. CATEGORY ICONS (HOMEPAGE)
   ============================================================
   NOTE: categories_color is set in Redux, but we intentionally override
   to glassmorphism style (translucent) which Redux can't produce. */

.lp-home-categoires {
    display: flex !important;
    justify-content: center !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    padding: 0 !important;
    margin: 28px auto 0 !important;
    list-style: none !important;
}

.lp-home-categoires li {
    list-style: none !important;
    float: none !important;
    display: block !important;
}

.lp-home-categoires li a,
.lp-home-categoires li a.lp-border-radius-5 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 20px 18px !important;
    background: rgba(255,255,255,0.12) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 12px !important;
    color: #FFFFFF !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: all 0.25s ease !important;
    min-width: 110px !important;
    text-align: center !important;
    text-decoration: none !important;
    line-height: 1.3 !important;
}

.lp-home-categoires li a:hover {
    background: rgba(255,255,255,0.22) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
}

/* Category icons */
.lp-home-categoires .icons-banner-cat,
.lp-home-categoires img.icons-banner-cat,
.lp-home-categoires img.icon {
    width: 40px !important;
    height: 40px !important;
    filter: brightness(0) invert(1) !important;
    margin: 0 !important;
}

/* Category icon wrapper */
.lp-home-categoires li a span {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
}

.lp-home-categoires li a span #cat-img-bg {
    margin: 0 !important;
    padding: 0 !important;
}

.lp-home-categoires li a span br {
    display: none !important;
}

/* ============================================================
   7. LISTING CARDS
   ============================================================ */

/* Card container */
.lp-grid-box-contianer {
    margin-bottom: 24px !important;
}

/* Card */
.lp-grid-box {
    background: #FFFFFF !important;
    border-radius: 12px !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: 0 1px 3px rgba(13,40,71,0.06), 0 1px 2px rgba(13,40,71,0.04) !important;
    overflow: hidden !important;
}

.lp-grid-box:hover {
    box-shadow: 0 12px 40px rgba(13,40,71,0.1) !important;
    transform: translateY(-4px) !important;
    border-color: transparent !important;
}

/* Card image */
.lp-grid-box-thumb-container {
    overflow: hidden !important;
    border-radius: 12px 12px 0 0 !important;
}

.lp-grid-box-thumb img {
    transition: transform 0.35s ease !important;
}

.lp-grid-box:hover .lp-grid-box-thumb img {
    transform: scale(1.04) !important;
}

/* Quick actions overlay */
.lp-grid-box-quick {
    background: linear-gradient(to top, rgba(0,0,0,0.55), transparent) !important;
    border-radius: 12px 12px 0 0 !important;
}

.lp-grid-box-quick .lp-post-quick-links a {
    color: #FFFFFF !important;
    font-size: 13px !important;
}

/* Card description */
.lp-grid-desc-container,
.lp-grid-desc-container.lp-border {
    padding: 16px !important;
    border: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
}

/* Card title */
.lp-grid-box-description .lp-h4 {
    margin-bottom: 8px !important;
}

.lp-grid-box-description .lp-h4 a {
    color: #1A1A2E !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
}

.lp-grid-box-description .lp-h4 a:hover {
    color: #0DAAAA !important;
}

/* Rating stars */
.lp-grid-box-description .fa-star,
.post-stat .fa-star,
.lp-rating .fa-star {
    color: #FBBF24 !important;
}

/* Rating text */
.lp-grid-box-description ul li span {
    color: #6B7A8D !important;
    font-size: 13px !important;
}

/* Category in card */
.lp-grid-box-description .cat-icon + a,
.lp-grid-box-description ul li a {
    color: #6B7A8D !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

/* Issue C fix: Card bottom bar — high-specificity flexbox to beat theme's
   .grid_view2 .lp-grid-box-bottom and absolute positioning rules */

/* Base layout — applies to all view types */
.lp-grid-box-bottom,
.grid_view2 .lp-grid-box-bottom,
.grid_view_s1 .lp-grid-box-bottom,
.list_view .lp-grid-box-bottom,
body .lp-list-page-grid .lp-grid-box-bottom,
body .lp-list-page-grid .list_view.lp-grid-box-contianer .lp-grid-box .lp-grid-box-bottom,
.lp-grid-box .lp-grid-box-bottom {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 10px 16px !important;
    background: #F8FAFC !important;
    border-top: 1px solid #E2E8F0 !important;
    position: relative !important;
    width: 100% !important;
    float: none !important;
}

/* Location text — flex child, truncate */
.lp-grid-box-bottom .pull-left,
.grid_view2 .lp-grid-box-bottom .pull-left,
.list_view .lp-grid-box-bottom .pull-left,
.lp-grid-box .lp-grid-box-bottom .pull-left {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: hidden !important;
    float: none !important;
}

.lp-grid-box-bottom .pull-left .show,
.lp-grid-box-bottom .pull-left .hide {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    display: block !important;
}

.lp-grid-box-bottom .pull-left .hide .text.gaddress {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: inline !important;
    max-width: calc(100% - 10px) !important;
}

/* Distance badge — OVERRIDE theme's position:absolute with static flex child */
.lp-nearest-distance,
.grid_view2 .lp-grid-box-bottom .lp-nearest-distance,
.list_view .lp-grid-box-bottom .lp-nearest-distance,
body .lp-grid-box-bottom .lp-nearest-distance,
body .lp-list-page-grid .lp-grid-box-bottom .lp-nearest-distance {
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    order: 2 !important;
    background: #F0FDFA !important;
    color: #0DAAAA !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    padding: 2px 8px !important;
    font-size: 12px !important;
}

/* Status badge — flex child, right side */
.lp-grid-box-bottom .pull-right,
.grid_view2 .lp-grid-box-bottom .pull-right,
.list_view .lp-grid-box-bottom .pull-right,
.lp-grid-box .lp-grid-box-bottom .pull-right {
    flex-shrink: 0 !important;
    margin-left: auto !important;
    float: none !important;
    order: 3 !important;
}

/* Remove clearfix that breaks flex layout */
.lp-grid-box-bottom .clearfix {
    display: none !important;
}

/* Verified badge */
.verified,
span.verified {
    color: #22C55E !important;
}

.verified i.fa-check {
    color: #22C55E !important;
}

/* Promoted / Ad badge */
span.listing-pro {
    background: #FF6B35 !important;
    color: #FFFFFF !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

/* Status badge (Open/Closed) */
.lp-grid-box-bottom .status-btn {
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

/* ============================================================
   8. SECTION BACKGROUNDS & SPACING
   ============================================================ */

.aliceblue,
section.aliceblue {
    background: #F8FAFC !important;
}

.lp-section-row {
    padding: 48px 0 !important;
}

.lp-section-row.margin-bottom-60 {
    margin-bottom: 0 !important;
    padding-bottom: 48px !important;
}

.page-container-five {
    padding-top: 32px !important;
}

/* ============================================================
   9. BUTTONS (GLOBAL)
   ============================================================
   NOTE: .lp-primary-btn and .lp-submit-btn background/color are
   controlled by Redux theme_color. We only add layout/shape here. */

.lp-primary-btn,
.lp-submit-btn,
.lpl-button.lpl-add-listing-loggedout {
    border-radius: 8px !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    border: none !important;
    transition: all 0.2s ease !important;
}

.lp-primary-btn:hover,
.lp-submit-btn:hover,
.lpl-button.lpl-add-listing-loggedout:hover {
    transform: translateY(-1px) !important;
}

.lp-secondary-btn {
    background: transparent !important;
    color: #0D2847 !important;
    border: 2px solid #E2E8F0 !important;
    border-radius: 8px !important;
    padding: 10px 22px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

.lp-secondary-btn:hover {
    border-color: #0DAAAA !important;
    color: #0DAAAA !important;
    background: rgba(13,170,170,0.04) !important;
}

/* ============================================================
   10. FORMS
   ============================================================ */

.form-control,
input.form-control,
select.form-control,
textarea.form-control {
    border-radius: 8px !important;
    border: 1px solid #E2E8F0 !important;
    padding: 10px 14px !important;
    font-size: 15px !important;
    color: #1A1A2E !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.form-control:focus {
    border-color: #0DAAAA !important;
    box-shadow: 0 0 0 3px rgba(13,170,170,0.1) !important;
    outline: none !important;
}

/* ============================================================
   11. FOOTER
   ============================================================
   NOTE: footer background (footer_bgcolor) and text colors
   (footer_bottom_text_color) are controlled by Redux.
   We only add layout/spacing/animation here. */

.footer-bottom-bar {
    border-top: 1px solid rgba(255,255,255,0.1) !important;
    padding-top: 20px !important;
}

.footer-about-company li {
    font-size: 14px !important;
}

.footer-social-icons li a,
.footer-social-icons li a i {
    font-size: 20px !important;
    transition: all 0.25s ease !important;
}

.footer-social-icons li a:hover,
.footer-social-icons li a:hover i {
    transform: translateY(-2px) !important;
}

.credit-links,
p.credit-links {
    font-size: 13px !important;
}

/* Footer link hover — Redux doesn't control hover state */
footer a:hover,
.footer-section a:hover {
    color: #0DAAAA !important;
}

/* ============================================================
   12. SINGLE LISTING DETAIL PAGE
   ============================================================ */

.listing-detail-infos {
    border-radius: 12px !important;
    overflow: hidden !important;
}

.widget-box,
.widget-box.viewed-listing {
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(13,40,71,0.06) !important;
    border: 1px solid #E2E8F0 !important;
    overflow: hidden !important;
    margin-bottom: 20px !important;
}

.lp-review-detail-container {
    border-radius: 12px !important;
    padding: 24px !important;
    background: #F8FAFC !important;
}

/* NOTE: .lp-review-btn color is controlled by Redux theme_color.
   We only add shape/transition here. */
.lp-review-btn {
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: all 0.25s ease !important;
}

.lp-details-address {
    padding: 16px !important;
    background: #F8FAFC !important;
    border-radius: 8px !important;
}

.lp-listing-timings {
    border-radius: 8px !important;
}

/* Gallery images */
.listing-detail_gallery img,
.lp-grid-box-thumb img {
    border-radius: 0 !important;
}

/* Map container */
.listing-detail-infos .mapboxgl-map,
.listing-detail-infos .leaflet-container {
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* ============================================================
   13. SEARCH RESULTS PAGE
   ============================================================ */

.search-page-header {
    background: #F8FAFC !important;
    padding: 24px 0 !important;
}

.lp-sidebar-filters-style {
    border-radius: 12px !important;
    padding: 20px !important;
    background: #FFFFFF !important;
    box-shadow: 0 1px 3px rgba(13,40,71,0.06) !important;
}

.search-row,
.search-row-classic {
    background: #FFFFFF !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 12px rgba(13,40,71,0.06) !important;
    padding: 16px !important;
    margin-bottom: 24px !important;
}

.lp-s-title {
    font-weight: 600 !important;
    color: #0D2847 !important;
}

/* Pagination */
.lp-pagination .page-numbers {
    border-radius: 8px !important;
    padding: 8px 14px !important;
    margin: 0 3px !important;
    transition: all 0.15s ease !important;
    font-weight: 500 !important;
}

.lp-pagination .page-numbers.current,
.lp-pagination .page-numbers:hover {
    background: #0DAAAA !important;
    color: #FFFFFF !important;
    border-color: #0DAAAA !important;
}

/* ============================================================
   14. DASHBOARD
   ============================================================ */

.lp-dashboard-panel-outer {
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(13,40,71,0.06) !important;
    border: 1px solid #E2E8F0 !important;
}

.lp-dashboard-tabs .dashboard-tab {
    border-radius: 8px 8px 0 0 !important;
    transition: all 0.15s ease !important;
    font-weight: 500 !important;
}

.lp-user-listings .lp-list-view {
    border-radius: 12px !important;
    margin-bottom: 16px !important;
    border: 1px solid #E2E8F0 !important;
}

/* ============================================================
   15. BLOG
   ============================================================ */

.lp-blog-grid-box {
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(13,40,71,0.06) !important;
    border: 1px solid #E2E8F0 !important;
}

.lp-blog-grid-box:hover {
    box-shadow: 0 8px 24px rgba(13,40,71,0.1) !important;
    transform: translateY(-3px) !important;
}

.lp-blog-grid-box-description {
    padding: 20px !important;
}

.lp-blog-grid-title a {
    color: #1A1A2E !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    line-height: 1.4 !important;
}

.lp-blog-grid-title a:hover {
    color: #0DAAAA !important;
}

/* ============================================================
   16. MODALS / POPUPS
   ============================================================ */

.md-modal .md-content {
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(13,40,71,0.15) !important;
}

/* Login popup */
#app-view-login-popup .modal-content,
.modal-content {
    border-radius: 16px !important;
    border: none !important;
    box-shadow: 0 20px 60px rgba(13,40,71,0.15) !important;
}

/* ============================================================
   17. PRICING / PLANS
   ============================================================ */

.lp-plan-box,
.plan-box {
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(13,40,71,0.06) !important;
    border: 1px solid #E2E8F0 !important;
    transition: all 0.25s ease !important;
}

.lp-plan-box:hover,
.plan-box:hover {
    box-shadow: 0 8px 24px rgba(13,40,71,0.1) !important;
    transform: translateY(-3px) !important;
}

/* ============================================================
   18. HOMEPAGE NATIVE CONTENT (replaces Elementor)
   ============================================================ */

.tss-homepage-section {
    padding: 64px 0;
    position: relative;
}

.tss-homepage-section .container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Value proposition section */
.tss-value-section {
    background: #FFFFFF;
    padding: 72px 0;
}

.tss-value-section .tss-section-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.tss-value-section .tss-section-image img {
    width: 100%;
    max-width: 480px;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(13,40,71,0.1);
}

.tss-section-title {
    font-size: 36px;
    font-weight: 700;
    color: #0D2847;
    line-height: 1.25;
    margin-bottom: 20px;
}

.tss-section-title span {
    color: #0DAAAA;
}

.tss-section-subtitle {
    font-size: 17px;
    color: #6B7A8D;
    line-height: 1.7;
    margin-bottom: 24px;
}

/* Features grid */
.tss-features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 24px;
}

.tss-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: #F8FAFC;
    border-radius: 10px;
    transition: all 0.2s ease;
}

.tss-feature-item:hover {
    background: #EEF6F6;
    transform: translateY(-2px);
}

.tss-feature-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    background: #0DAAAA;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 18px;
}

.tss-feature-item h4 {
    font-size: 15px;
    font-weight: 600;
    color: #0D2847;
    margin: 0 0 4px;
}

.tss-feature-item p {
    font-size: 13px;
    color: #6B7A8D;
    margin: 0;
    line-height: 1.5;
}

/* CTA / Pricing section */
.tss-cta-section {
    background: #F8FAFC;
    padding: 72px 0;
    text-align: center;
}

.tss-cta-section .tss-section-title {
    margin-bottom: 12px;
}

.tss-cta-section .tss-section-subtitle {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 32px;
}

.tss-pricing-image {
    max-width: 900px;
    margin: 0 auto 32px;
    display: block;
}

.tss-pricing-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(13,40,71,0.08);
}

.tss-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #FF6B35;
    color: #FFFFFF;
    padding: 14px 32px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.25s ease;
    box-shadow: 0 4px 12px rgba(255,107,53,0.25);
}

.tss-cta-btn:hover {
    background: #E55A2B;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255,107,53,0.35);
    color: #FFFFFF;
    text-decoration: none;
}

/* Partners section */
.tss-partners-section {
    background: #FFFFFF;
    padding: 48px 0;
    text-align: center;
    border-top: 1px solid #E2E8F0;
}

.tss-partners-label {
    font-size: 13px;
    font-weight: 600;
    color: #6B7A8D;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 24px;
}

.tss-partners-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 48px;
    flex-wrap: wrap;
}

.tss-partners-grid a {
    display: block;
    opacity: 0.5;
    transition: opacity 0.3s ease;
    filter: grayscale(100%);
}

.tss-partners-grid a:hover {
    opacity: 1;
    filter: grayscale(0%);
}

.tss-partners-grid img {
    max-height: 60px;
    width: auto;
}

/* ============================================================
   19. ABOUT US PAGE NATIVE STYLES
   ============================================================ */

.tss-about-hero {
    background: linear-gradient(135deg, #0D2847 0%, #0DAAAA 100%);
    padding: 72px 0;
    text-align: center;
    color: #FFFFFF;
}

.tss-about-hero h1 {
    font-size: 42px;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 16px;
}

.tss-about-hero p {
    font-size: 18px;
    color: rgba(255,255,255,0.85);
    max-width: 600px;
    margin: 0 auto;
}

.tss-about-content {
    padding: 64px 0;
    background: #FFFFFF;
}

.tss-about-content .container {
    max-width: 800px;
}

.tss-about-content h2 {
    font-size: 28px;
    font-weight: 700;
    color: #0D2847;
    margin-bottom: 20px;
}

.tss-about-content p {
    font-size: 17px;
    color: #1A1A2E;
    line-height: 1.8;
    margin-bottom: 20px;
}

.tss-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    padding: 48px 0;
    text-align: center;
}

.tss-stat-item {
    padding: 32px 20px;
    background: #F8FAFC;
    border-radius: 12px;
}

.tss-stat-number {
    font-size: 42px;
    font-weight: 700;
    color: #0DAAAA;
    line-height: 1;
    margin-bottom: 8px;
}

.tss-stat-label {
    font-size: 15px;
    font-weight: 500;
    color: #6B7A8D;
}

/* ============================================================
   20. LOADING / SKELETON
   ============================================================ */

/* Hide the old GIF-based loader */
.lp-section-loaders img,
img.loadinerSearch {
    max-width: 40px !important;
}

/* ============================================================
   20b. NAV MENU — PREVENT WRAPPING ON SMALLER LAPTOPS
   ============================================================
   classic-header.css sets padding-right: 28px on menu items.
   Inner pages use col-md-6 for menu (narrower than homepage col-md-9).
   Reduce padding at smaller widths to prevent wrapping. */

.lp-header-style-classic .lp-menu.menu.lp-menu-outer.lp-nav-menu-after ul {
    white-space: nowrap !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
}

@media (max-width: 1280px) {
    .lp-header-style-classic .lp-menu.menu.lp-menu-outer.lp-nav-menu-after li {
        padding-right: 14px !important;
    }

    .lp-header-style-classic .lp-menu.menu.lp-menu-outer.lp-nav-menu-after li a {
        font-size: 13px !important;
    }
}

@media (max-width: 1100px) {
    .lp-header-style-classic .lp-menu.menu.lp-menu-outer.lp-nav-menu-after li {
        padding-right: 8px !important;
    }

    .lp-header-style-classic .lp-menu.menu.lp-menu-outer.lp-nav-menu-after li a {
        font-size: 12px !important;
    }
}

/* ============================================================
   21. MISCELLANEOUS
   ============================================================ */

/* Breadcrumb */
.breadcrumb {
    background: transparent !important;
    padding: 12px 0 !important;
    font-size: 13px !important;
}

/* Page heading */
.page-heading {
    background: #F8FAFC !important;
    padding: 32px 0 !important;
}

.page-heading h1 {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #0D2847 !important;
}

/* Tooltips */
.simptip-position-top::before,
.simptip-position-top::after {
    border-radius: 6px !important;
}

/* Select2 overrides */
.select2-container--default .select2-selection--single {
    border-radius: 8px !important;
    border: 1px solid #E2E8F0 !important;
    height: 42px !important;
}

.select2-dropdown {
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(13,40,71,0.1) !important;
    border: 1px solid #E2E8F0 !important;
}

/* ============================================================
   22. RESPONSIVE — MOBILE (max-width: 767px)
   ============================================================ */

@media (max-width: 767px) {
    /* Banner */
    .lp-home-banner-contianer {
        height: 520px !important;
    }

    .lp-home-banner-contianer-inner h1,
    .lp-home-banner-contianer-inner h1[data-locnmethod="withip"] {
        font-size: 28px !important;
        line-height: 1.3 !important;
        letter-spacing: -0.3px !important;
    }

    .lp-banner-browse-txt {
        font-size: 15px !important;
    }

    /* Search stacks vertically */
    .lp-search-bar {
        border-radius: 12px !important;
        padding: 8px !important;
    }

    .lp-search-bar .form-group {
        width: 100% !important;
        margin-bottom: 6px !important;
    }

    .lp-search-bar .lp-border {
        border-right: none !important;
        border-bottom: 1px solid #E2E8F0 !important;
    }

    .lp-search-btn,
    input.lp-search-btn {
        width: 100% !important;
        border-radius: 8px !important;
        padding: 14px !important;
    }

    /* Categories scroll horizontally */
    .lp-home-categoires {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start !important;
        padding: 0 16px 8px !important;
        gap: 10px !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    .lp-home-categoires::-webkit-scrollbar {
        display: none !important;
    }

    .lp-home-categoires li a,
    .lp-home-categoires li a.lp-border-radius-5 {
        min-width: 90px !important;
        padding: 14px 12px !important;
        font-size: 12px !important;
    }

    /* Listing cards */
    .lp-grid-box-contianer {
        padding: 0 4px !important;
        margin-bottom: 16px !important;
    }

    /* Touch targets minimum 48px */
    .lp-search-btn,
    input.lp-search-btn,
    .lp-primary-btn,
    .lp-secondary-btn,
    .status-btn,
    .lp-add-to-fav,
    .lpl-button,
    .lp-submit-btn {
        min-height: 48px !important;
    }

    /* Footer */
    .footer-about-company li {
        display: block !important;
        margin-bottom: 8px !important;
    }

    /* Homepage native sections */
    .tss-value-section .tss-section-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .tss-section-title {
        font-size: 28px;
    }

    .tss-features-grid {
        grid-template-columns: 1fr;
    }

    .tss-stats-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .tss-about-hero h1 {
        font-size: 32px;
    }

    .tss-partners-grid {
        gap: 24px;
    }

    .tss-partners-grid img {
        max-height: 40px;
    }

    /* Issue C: mobile card bottom — column stacking */
    .lp-grid-box-bottom,
    .grid_view2 .lp-grid-box-bottom {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .lp-grid-box-bottom .pull-left,
    .grid_view2 .lp-grid-box-bottom .pull-left {
        width: 100% !important;
        max-width: 100% !important;
    }

    .lp-nearest-distance,
    .grid_view2 .lp-grid-box-bottom .lp-nearest-distance {
        align-self: flex-start !important;
        margin-top: 4px !important;
    }

    /* Mobile search bar — full-width button */
    .lp-home-banner-contianer .lp-search-bar input.lp-search-btn,
    .lp-search-bar input.lp-search-btn,
    input.lp-search-btn {
        width: 100% !important;
        border-radius: 8px !important;
        height: 46px !important;
    }
}

/* ============================================================
   23. RESPONSIVE — TABLET (768px - 1024px)
   ============================================================ */

@media (min-width: 768px) and (max-width: 1024px) {
    .lp-home-banner-contianer {
        height: 540px !important;
    }

    .lp-home-banner-contianer-inner h1,
    .lp-home-banner-contianer-inner h1[data-locnmethod="withip"] {
        font-size: 36px !important;
    }

    .lp-grid-box-contianer {
        width: 50% !important;
    }

    .tss-value-section .tss-section-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .tss-section-title {
        font-size: 32px;
    }
}

/* ============================================================
   24. ANIMATION — FADE IN ON SCROLL
   ============================================================ */

.tss-homepage-section {
    opacity: 0;
    transform: translateY(20px);
    animation: tssFadeIn 0.6s ease forwards;
}

.tss-homepage-section:nth-child(1) { animation-delay: 0.1s; }
.tss-homepage-section:nth-child(2) { animation-delay: 0.2s; }
.tss-homepage-section:nth-child(3) { animation-delay: 0.3s; }

@keyframes tssFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================
   25. PRINT STYLES
   ============================================================ */

@media print {
    .lp-header-search-wrap,
    .lp-home-banner-contianer,
    .lp-search-bar,
    footer,
    .lp-menu-bar {
        display: none !important;
    }
}