/**
 * InMode Provider Locator - Theme Integration Styles
 * 
 * These styles ensure proper integration with the InMode theme
 * @package InMode_Provider_Locator
 * @since   1.0.0
 */

/* InMode Theme Integration */
body.theme-inmode .inmode-provider-locator,
body.page-template-provider-locator-page .inmode-provider-locator {
    --inmode-primary: #59B7B3;
    --inmode-primary-dark: #4a9995;
    --inmode-black: #000000;
    --inmode-white: #ffffff;
    --inmode-gray: #cccccc;
    --inmode-border: #333333;
}

/* Theme-specific overrides */
.theme-inmode .inmode-provider-locator .search-title,
.theme-inmode .inmode-provider-locator .view-btn.active,
.theme-inmode .inmode-provider-locator .provider-verified,
.theme-inmode .inmode-provider-locator .use-location-btn,
.theme-inmode .inmode-provider-locator .contact-item:hover {
    color: #59B7B3;
}

.theme-inmode .inmode-provider-locator .search-btn,
.theme-inmode .inmode-provider-locator .apply-filters-btn,
.theme-inmode .inmode-provider-locator .load-more-btn,
.theme-inmode .inmode-provider-locator .directions-btn {
    background: #59B7B3;
}

.theme-inmode .inmode-provider-locator .search-btn:hover,
.theme-inmode .inmode-provider-locator .apply-filters-btn:hover,
.theme-inmode .inmode-provider-locator .load-more-btn:hover,
.theme-inmode .inmode-provider-locator .directions-btn:hover {
    background: #4a9995;
}

.theme-inmode .inmode-provider-locator .loading-spinner {
    border-top-color: #59B7B3;
}

/* Fix for map info windows */
.gm-style .gm-style-iw-c {
    padding: 12px !important;
    border-radius: 0 !important;
    background: #000000 !important;
    border: 2px solid #59B7B3 !important;
    color: #ffffff !important;
}

.gm-style .gm-style-iw-d {
    overflow: hidden !important;
}

.gm-style .gm-style-iw-t::after {
    background: #000000 !important;
}

.map-info-window h4 {
    color: #59B7B3;
    margin: 0 0 8px 0;
    font-size: 16px;
}

.map-info-window p {
    margin: 0 0 5px 0;
    font-size: 14px;
    color: #cccccc;
}

/* Mobile optimizations */
@media (max-width: 767px) {
    .theme-inmode .inmode-provider-locator .search-title {
        font-size: 28px;
    }
    
    .theme-inmode .inmode-provider-locator .search-inputs {
        flex-wrap: wrap;
    }
    
    .theme-inmode .inmode-provider-locator .location-search,
    .theme-inmode .inmode-provider-locator .search-radius,
    .theme-inmode .inmode-provider-locator .filter-group {
        width: 100%;
        margin-bottom: 10px;
    }
    
    .theme-inmode .inmode-provider-locator .search-btn {
        width: 100%;
    }
    
    /* Improve touch targets */
    .theme-inmode .inmode-provider-locator .provider-card {
        padding: 15px;
    }
    
    .theme-inmode .inmode-provider-locator .directions-btn {
        padding: 12px 15px;
    }
}

/* Smooth scrolling for better UX */
html.theme-inmode {
    scroll-behavior: smooth;
}

/* Better loading states */
.theme-inmode .inmode-provider-locator .map-loading, 
.theme-inmode .inmode-provider-locator .loading-results {
    transition: opacity 0.3s ease;
}

/* Modal improvements */
.theme-inmode .inmode-provider-locator .provider-modal .modal-content {
    border: 2px solid #59B7B3;
    border-radius: 0;
}

.theme-inmode .inmode-provider-locator .provider-modal .modal-header {
    background: #111111;
    border-bottom: 1px solid #333333;
}

.theme-inmode .inmode-provider-locator .provider-modal .modal-title {
    color: #59B7B3;
}

/* Provider card active state */
.theme-inmode .inmode-provider-locator .provider-card.active {
    border-left: 3px solid #59B7B3;
}

/* Treatment tags */
.theme-inmode .inmode-provider-locator .treatment-tag {
    border-radius: 0;
    background: rgba(89, 183, 179, 0.1);
    border-color: #59B7B3;
}

/* Focus states for accessibility */
.theme-inmode .inmode-provider-locator button:focus,
.theme-inmode .inmode-provider-locator input:focus,
.theme-inmode .inmode-provider-locator select:focus,
.theme-inmode .inmode-provider-locator a:focus {
    outline: 2px solid #59B7B3;
    outline-offset: 2px;
}

/* ====================================
   INMODE PROVIDER LOCATOR INTEGRATION
   ==================================== */

/* Integration with InMode Theme */
.inmode-provider-locator {
    max-width: 1550px; /* Matching theme's fixed_width */
    margin: 0 auto;
    padding: 0;
    background-color: var(--bs-black, #000);
    color: var(--bs-white, #fff);
    font-family: 'Heebo', sans-serif;
}

/* Page-specific styling */
.page-template-provider-locator .inmode-provider-locator {
    background: var(--bs-black, #000);
    padding: 0;
    border: none;
    box-shadow: none;
}

/* Header styling to match theme */
.inmode-provider-locator .search-title,
.inmode-provider-locator .results-title,
.inmode-provider-locator .filters-title {
    color: var(--bs-lightblue, #59B7B3) !important;
    font-family: 'Heebo', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
}

/* Button styling to match theme */
.inmode-provider-locator .search-btn,
.inmode-provider-locator .apply-filters-btn,
.inmode-provider-locator .load-more-btn {
    background: var(--bs-lightblue, #59B7B3) !important;
    color: var(--bs-white, #fff) !important;
    border: 1px solid var(--bs-lightblue, #59B7B3) !important;
    font-family: 'Heebo', sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 0 !important;
    transition: all 0.3s ease;
}

.inmode-provider-locator .search-btn:hover,
.inmode-provider-locator .apply-filters-btn:hover,
.inmode-provider-locator .load-more-btn:hover {
    background: var(--bs-white, #fff) !important;
    color: var(--bs-black, #000) !important;
    border-color: var(--bs-white, #fff) !important;
}

/* Clear button styling */
.inmode-provider-locator .clear-filters-btn {
    background: transparent !important;
    color: var(--bs-white, #fff) !important;
    border: 1px solid var(--bs-white, #fff) !important;
    font-family: 'Heebo', sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 0 !important;
}

.inmode-provider-locator .clear-filters-btn:hover {
    background: var(--bs-white, #fff) !important;
    color: var(--bs-black, #000) !important;
}

/* === CORRECTED Filter Bar Styles v2 === */
.locator-controls .search-inputs {
    display: flex;
    flex-wrap: nowrap; /* Force single line */
    gap: 16px;
    align-items: flex-end;
}

.locator-controls .search-inputs > div {
    flex: 1 1 auto;
}

.locator-controls .location-search {
    flex-grow: 2; /* Make address field larger */
}

.locator-controls .search-radius,
.locator-controls .filter-group {
    min-width: 180px; /* Give a minimum width */
}

.locator-controls .search-inputs label {
    color: var(--bs-white, #fff);
    text-transform: uppercase;
    font-size: 12px;
    margin-bottom: 8px;
    display: block;
}

.locator-controls .location-input,
.locator-controls .search-radius-select,
.locator-controls .technology-filter,
.locator-controls .treatment-filter,
.locator-controls .clinic-name-filter {
    height: 48px !important;
    width: 100%;
    padding: 0 12px;
    box-sizing: border-box; 
}

.locator-controls .search-btn {
    height: 48px;
    flex-shrink: 0;
    flex-grow: 0;
    flex-basis: auto;
    padding-left: 2rem;
    padding-right: 2rem;
}
/* === End Corrected Styles === */

/* === CORRECTED Map and Results List Dimensions === */
.locator-results {
    display: flex;
    height: 724px;
    gap: 24px; /* Space between list and map */
}

.locator-results .results-container {
    width: 569px;
    flex-shrink: 0; /* Don't shrink */
    height: 100%;
    overflow-y: auto;
    background: #1A1A1A; /* Dark background */
    padding: 20px;
    box-sizing: border-box;
}

.locator-results .map-container {
    flex-grow: 1;
    height: 100%;
}

/* Provider logo in results list */
.inmode-provider-locator .provider-card .provider-logo {
    max-width: 150px; /* Adjust as needed */
    height: auto;
    margin-bottom: 16px;
}

/* Input and select styling */
.inmode-provider-locator input,
.inmode-provider-locator select {
    background: var(--bs-black, #000) !important;
    border: 1px solid var(--bs-white, #fff) !important;
    color: var(--bs-white, #fff) !important;
    font-family: 'Heebo', sans-serif !important;
    border-radius: 0 !important;
}

.inmode-provider-locator input:focus,
.inmode-provider-locator select:focus {
    border-color: var(--bs-lightblue, #59B7B3) !important;
    outline: none !important;
}

.inmode-provider-locator input::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Provider card styling */
.inmode-provider-locator .provider-card {
    background: var(--bs-black, #000) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-bottom: 1px solid var(--bs-lightblue, #59B7B3) !important;
    color: var(--bs-white, #fff) !important;
}

.inmode-provider-locator .provider-card:hover {
    background: rgba(89, 183, 179, 0.1) !important;
    border-color: var(--bs-lightblue, #59B7B3) !important;
}

.inmode-provider-locator .provider-name {
    color: var(--bs-white, #fff) !important;
    font-family: 'Heebo', sans-serif !important;
}

.inmode-provider-locator .provider-verified {
    background: var(--bs-lightblue, #59B7B3) !important;
    color: var(--bs-white, #fff) !important;
}

.inmode-provider-locator .contact-item {
    color: var(--bs-lightblue, #59B7B3) !important;
}

.inmode-provider-locator .contact-item:hover {
    color: var(--bs-white, #fff) !important;
}

.inmode-provider-locator .distance-info {
    color: var(--bs-lightblue, #59B7B3) !important;
}

.inmode-provider-locator .directions-btn {
    background: transparent !important;
    color: var(--bs-lightblue, #59B7B3) !important;
    border: 1px solid var(--bs-lightblue, #59B7B3) !important;
    font-family: 'Heebo', sans-serif;
    text-transform: uppercase;
    border-radius: 0 !important;
}

.inmode-provider-locator .directions-btn:hover {
    background: var(--bs-lightblue, #59B7B3) !important;
    color: var(--bs-white, #fff) !important;
}

/* Mobile responsive adjustments */
@media (max-width: 767px) {
    .inmode-provider-locator .search-title {
        font-size: 19px !important;
    }
    
    .inmode-provider-locator .locator-controls {
        padding: 40px 15px !important;
    }
    
    .inmode-provider-locator .provider-card {
        padding: 15px !important;
    }

    /* Stack layout for mobile */
    .provider-search-form {
        flex-direction: column;
        align-items: stretch;
    }

    #provider-map-container .asl-p-cont {
        flex-direction: column;
        height: auto; /* Let content define height */
    }

    #provider-map-container #asl-list,
    #provider-map-container #asl-map {
        width: 100%;
    }

    #provider-map-container #asl-map {
        height: 400px; /* Or a suitable height for mobile maps */
    }

    /* Advanced Search Toggle */
    .search-field.distance-field,
    .search-field.technology-field,
    .search-field.treatments-field,
    .search-field.clinic-field {
        display: none;
    }

    .provider-search-form.advanced-visible .search-field {
        display: flex;
    }

    .advanced-search-toggle {
        color: var(--bs-lightblue, #59B7B3);
        cursor: pointer;
        text-align: right;
        margin-top: 16px;
        text-transform: uppercase;
    }

    /* Info Window Styling */
    .asl-p-infowindow {
        background-color: var(--bs-black, #000) !important;
        color: var(--bs-white, #fff) !important;
        border-radius: 0 !important;
        padding: 16px !important;
    }

    .asl-p-infowindow .item-title a {
        color: var(--bs-lightblue, #59B7B3) !important;
        font-weight: 700;
    }

    .asl-p-infowindow,
    .asl-p-infowindow p,
    .asl-p-infowindow div {
        color: var(--bs-white, #fff) !important;
    }
}

/* ====================================
   LEGACY ASL STORE LOCATOR OVERRIDES
   ==================================== */

/* Hide the original ASL search form if it exists */
.asl-p-cont .asl-filter-cntrl {
    display: none !important;
}

/* Customize the ASL map markers if ASL is still being used */
.asl-p-cont .map-marker:before {
    color: var(--bs-lightblue, #59B7B3) !important;
}

/* Style the ASL provider list to match theme if it exists */
.asl-p-cont #asl-list {
    background-color: var(--bs-black, #000) !important;
}

.asl-p-cont .list-group-item {
    background-color: var(--bs-black, #000) !important;
    color: var(--bs-white, #fff) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.asl-p-cont .list-group-item .item-title {
    color: var(--bs-white, #fff) !important;
}

/* ====================================
   THEME INTEGRATION UTILITIES
   ==================================== */

/* Ensure proper spacing within theme layout */
section.main_part .inmode-provider-locator {
    margin: 0;
    padding: 0;
}

/* Match theme container widths */
.inmode-provider-locator .fixed_width {
    max-width: 1550px;
    margin: 0 auto;
}

/* Typography consistency */
.inmode-provider-locator h1,
.inmode-provider-locator h2,
.inmode-provider-locator h3,
.inmode-provider-locator h4 {
    font-family: 'Heebo', sans-serif !important;
    color: var(--bs-lightblue, #59B7B3) !important;
}

/* Border consistency */
.inmode-provider-locator hr {
    border: 2px solid var(--bs-lightblue, #59B7B3) !important;
    opacity: 1 !important;
}

/* Loading spinner to match theme */
.inmode-provider-locator .loading-spinner {
    border-color: rgba(89, 183, 179, 0.3);
    border-top-color: var(--bs-lightblue, #59B7B3);
}

.inmode-provider-locator .locator-results .results-container {
    height: 100%;
    overflow-y: auto;
}

/* Individual Result Item */
.inmode-provider-locator .result-item {
    padding: 20px;
}

/* Main Layout: Results and Map */
.inmode-provider-locator .locator-main {
    display: flex;
    height: 724px;
    width: 100%;
}

.inmode-provider-locator .locator-results {
    flex: 0 0 569px; /* Do not grow or shrink, base width */
    height: 100%;
    overflow: hidden;
    background-color: #000;
    display: flex;
    flex-direction: column;
}

.inmode-provider-locator .locator-map {
    flex: 1 1 auto; /* Grow to fill remaining space */
    height: 100%;
}

.inmode-provider-locator .map-canvas {
    width: 100%;
    height: 100%;
}

.inmode-provider-locator .results-container {
    height: 100%;
    overflow-y: auto;
}