/**
 * IDX Plugin Compatibility Layer
 *
 * Ensures IDX Pro plugin output inherits the TBG Realestate theme's
 * design system (fonts, colors, spacing, borders).
 *
 * Conditionally enqueued only when the IDX plugin is active.
 *
 * @package TBG_Realestate
 */

/* ============================================================
   Container & Layout
   ============================================================ */
.tbg-idx-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ============================================================
   IDX Search Wrapper — inherit theme fonts & colors
   ============================================================ */
.idx-search-wrapper,
.idx-search-form,
.idx-listing-grid,
.idx-listing-card,
.idx-listing-detail,
.idx-map-container,
.idx-portal-wrapper {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--text-color, #ccc);
    line-height: 1.6;
}

/* ============================================================
   IDX Cards — match theme card styling
   ============================================================ */
.idx-listing-card {
    background: var(--bg-card, #1a1f2a);
    border: 1px solid var(--border, rgba(255, 255, 255, 0.06));
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.idx-listing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.idx-listing-card a {
    text-decoration: none;
    color: inherit;
}

/* Card image */
.idx-listing-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

/* Card body text */
.idx-listing-card .card-price,
.idx-listing-card .idx-price {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--gold, #c8a55a);
}

.idx-listing-card .card-address,
.idx-listing-card .idx-address {
    font-size: 0.9rem;
    color: var(--text-muted, #999);
    margin-top: 4px;
}

.idx-listing-card .card-details,
.idx-listing-card .idx-details {
    font-size: 0.8rem;
    color: var(--text-dim, #666);
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

/* ============================================================
   IDX Search Form — match theme input styling
   ============================================================ */
.idx-search-form input,
.idx-search-form select,
.idx-search-form textarea {
    background: var(--bg-surface, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    border-radius: 8px;
    padding: 12px 16px;
    color: var(--text-color, #ccc);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    transition: border-color 0.3s ease;
}

.idx-search-form input:focus,
.idx-search-form select:focus {
    outline: none;
    border-color: var(--gold, #c8a55a);
}

.idx-search-form button,
.idx-search-form .idx-btn {
    background: var(--gold, #c8a55a);
    color: #0a0f14;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
}

.idx-search-form button:hover,
.idx-search-form .idx-btn:hover {
    background: #d4b66a;
    transform: translateY(-1px);
}

/* ============================================================
   IDX Map — border & radius to match theme
   ============================================================ */
.idx-map-container {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.06));
}

/* ============================================================
   IDX Listing Detail Page — headings & text
   ============================================================ */
.idx-listing-detail h1,
.idx-listing-detail h2,
.idx-listing-detail h3 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    color: var(--text-color, #fff);
}

.idx-listing-detail .idx-listing-price {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--gold, #c8a55a);
}

/* ============================================================
   IDX Portal / Dashboard — match theme panel styling
   ============================================================ */
.idx-portal-wrapper .idx-panel,
.idx-portal-wrapper .idx-tab-content {
    background: var(--bg-card, #1a1f2a);
    border: 1px solid var(--border, rgba(255, 255, 255, 0.06));
    border-radius: 12px;
    padding: 30px;
}

.idx-portal-wrapper .idx-tab {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.idx-portal-wrapper .idx-tab.active {
    color: var(--gold, #c8a55a);
    border-bottom-color: var(--gold, #c8a55a);
}

/* ============================================================
   MLS Compliance Footer — subtle styling
   ============================================================ */
.idx-compliance-footer,
.idx-disclaimer {
    font-size: 0.75rem;
    color: var(--text-muted, #999);
    opacity: 0.7;
    line-height: 1.5;
    text-align: center;
    padding: 20px;
}

/* ============================================================
   Light Theme Overrides
   ============================================================ */
[data-theme="light"] .idx-listing-card {
    background: #fff;
    border-color: #e0e0e0;
}

[data-theme="light"] .idx-listing-card:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .idx-search-form input,
[data-theme="light"] .idx-search-form select {
    background: #f5f5f5;
    border-color: #ddd;
    color: #333;
}

[data-theme="light"] .idx-portal-wrapper .idx-panel,
[data-theme="light"] .idx-portal-wrapper .idx-tab-content {
    background: #fff;
    border-color: #e0e0e0;
}

/* ============================================================
   Explore Homes Widget — Theme Overrides
   ============================================================ */

/* Reset the theme's global `section` styles for both wrappers */
.idx-explore-section,
.idx-explore-section .tbg-idx-explore-section {
    min-height: auto !important;
    display: block !important;
    justify-content: initial !important;
    align-items: initial !important;
}

/* Outer wrapper — use the theme's page background */
.idx-explore-section {
    position: relative;
    z-index: 2;
    padding: 60px 20px 80px !important;
    background: var(--bg);
}

/* Inner plugin section — transparent, full width */
.tbg-idx-explore-section {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 auto;
    max-width: 1400px;
    width: 100%;
}

/* Heading — use the theme's heading color */
.tbg-idx-explore-heading {
    font-family: var(--serif, 'Cormorant Garamond', serif) !important;
    color: var(--hero-heading) !important;
    text-align: center;
    margin: 0 0 2rem 0 !important;
    font-size: clamp(28px, 4vw, 40px) !important;
}

/* Tab Bar */
.tbg-idx-explore-tabs {
    border-bottom-color: var(--border) !important;
    justify-content: center;
    width: 100% !important;
    margin-bottom: 2rem !important;
}

.tbg-idx-explore-tab {
    color: var(--text-muted) !important;
    font-family: var(--sans, 'Montserrat', sans-serif) !important;
    font-size: 13px !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 10px 16px !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
}

.tbg-idx-explore-tab:hover {
    color: var(--hero-heading) !important;
    background: rgba(var(--white-rgb), 0.05);
}

.tbg-idx-explore-tab.is-active {
    color: var(--gold) !important;
    background: rgba(var(--gold-rgb), 0.08);
    border-color: var(--gold) !important;
    font-weight: 600 !important;
}

.tbg-idx-explore-tab.is-active::after {
    background: var(--gold) !important;
}

.tbg-idx-explore-tab svg {
    stroke: currentColor;
}

/* Arrow Buttons */
.tbg-idx-explore-arrow {
    background: rgba(var(--white-rgb), 0.1) !important;
    border-color: rgba(var(--white-rgb), 0.15) !important;
    color: var(--hero-heading) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.tbg-idx-explore-arrow:hover {
    background: rgba(var(--white-rgb), 0.2) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
}

/* Card Wrapper inside explore */
.tbg-idx-explore-card-wrapper .tbg-idx-listing-card,
.tbg-idx-explore-card-wrapper .idx-listing-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    overflow: hidden;
}

/* Days Badge — dark translucent, works on any bg */
.tbg-idx-explore-days-badge {
    background: rgba(0, 0, 0, 0.7) !important;
    color: #fff !important;
    font-family: var(--sans, 'Montserrat', sans-serif) !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    padding: 5px 10px !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Pagination Dots */
.tbg-idx-explore-dot {
    background: rgba(var(--white-rgb), 0.2) !important;
}

.tbg-idx-explore-dot.is-active {
    background: var(--gold) !important;
}

/* Empty State */
.tbg-idx-explore-empty {
    color: var(--text-muted) !important;
    min-height: 200px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.tbg-idx-explore-empty p {
    font-family: var(--sans, 'Montserrat', sans-serif);
    font-size: 1rem !important;
    white-space: normal !important;
    word-wrap: break-word;
    text-align: center;
}

/* Grid & Viewport — full width */
.tbg-idx-explore-grid,
.tbg-idx-explore-viewport {
    width: 100% !important;
}

/* Loading Spinner */
.tbg-idx-explore-spinner {
    border-color: var(--border) !important;
    border-top-color: var(--gold) !important;
}

/* ============================================================
   Light Mode — Explore Widget
   ============================================================ */
:root[data-theme="light"] .idx-explore-section {
    background: var(--bg);
}

:root[data-theme="light"] .tbg-idx-explore-tab:hover {
    background: rgba(0, 0, 0, 0.04);
}

:root[data-theme="light"] .tbg-idx-explore-tab.is-active {
    background: rgba(var(--gold-rgb), 0.1);
}

:root[data-theme="light"] .tbg-idx-explore-arrow {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: var(--hero-heading) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

:root[data-theme="light"] .tbg-idx-explore-arrow:hover {
    background: #fff !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}

:root[data-theme="light"] .tbg-idx-explore-card-wrapper .tbg-idx-listing-card,
:root[data-theme="light"] .tbg-idx-explore-card-wrapper .idx-listing-card {
    background: #fff !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

:root[data-theme="light"] .tbg-idx-explore-dot {
    background: rgba(0, 0, 0, 0.15) !important;
}

:root[data-theme="light"] .tbg-idx-explore-spinner {
    border-color: rgba(0, 0, 0, 0.1) !important;
    border-top-color: var(--gold) !important;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 768px) {
    .idx-listing-card img {
        height: 180px;
    }

    .idx-listing-detail .idx-listing-price {
        font-size: 2rem;
    }

    .idx-portal-wrapper .idx-panel {
        padding: 20px;
    }

    .idx-explore-section {
        padding: 40px 12px 60px !important;
    }

    .tbg-idx-explore-tabs {
        justify-content: flex-start;
    }
}