/**
 * Gnarly Booking Engine - Copyright (c) 2025 Brand Wars LLC
 * Licensed under proprietary license. See LICENSE.txt for details.
 */

/* Main Search Bar Container */
.hostapi-search-bar-container {
    width: 100% !important;
    margin: 0 auto 20px auto !important; /* Add bottom margin */
    padding: 0 !important;
    max-width: 100% !important;
}

.hostapi-search-bar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    width: 100% !important;
    gap: 0px !important;
    z-index: 9999;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
}

/* Match width of listings content */
.hostapi-search-bar-container, 
.hostapi-listings-content,
.hostapi-custom-banner {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.hostapi-map-container, 
#hostapi-map,
.leaflet-map-pane {
    z-index: 0; /* Ensure map stays below other elements */
}

/* Enhanced Dropdown Styles */
.hostapi-select-container {
    position: relative !important;
    flex: 1; /* Ensures the dropdown resizes properly */
    min-width: 300px;
    max-width: 400px;
    display: flex; /* Keeps it inline with other elements */
    align-items: center;
    z-index: 1000;
    height: 100%;
    /* The divider between the city box and the date field is drawn by the
       trigger's own border-right (below) so it is exactly the field height.
       A border on this full-height container would extend past the 82px
       fields and create a misaligned seam. */
}

/* Dropdown Trigger Button */
.hostapi-select-trigger {
    position: relative;
    width: 100%;
    padding: 15px;
    padding-left: 45px;
    background: white;
    /* AI Search is now the first cell, so the City cell is a middle segment:
       square corners and no left border (AI Search's right border is the seam). */
    border-left: none;
    border-top: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 0;
    cursor: pointer;
    font-size: 16px;
    font-weight: 400;
    color: #1a1a1a;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 72px;
}

.hostapi-trigger-text {
    font-size: 16px;
    font-weight: 400;
}

/* Ensure the icons are centered vertically with the new height */
.hostapi-select-trigger:before,
.hostapi-date-range-field:before {
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
}

/* Ensure the dropdown arrow is positioned correctly */
.hostapi-select-trigger:after {
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
}

/* Location Icon */
.hostapi-select-trigger:before {
    content: "";
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.4;
}

/* Dropdown Arrow */
.hostapi-select-trigger:after {
    content: "";
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
}

.hostapi-select-trigger.open:after {
    transform: translateY(-50%) rotate(180deg) !important;
}

.hostapi-select-trigger:hover {
    border-color: #3b82f6;
}

.hostapi-select-options {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-top: 4px;
    max-height: 300px;
    overflow-y: auto;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    z-index: 10001 !important; /* Increased z-index to be higher than everything */
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s ease !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.hostapi-select-options.open {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 10001 !important; /* Ensure it's on top when open */
}

/* Individual Dropdown Options */
.hostapi-select-option {
    padding: 12px 15px 12px 45px;
    cursor: pointer;
    position: relative;
    font-size: 16px;
    font-weight: 400;
    color: #1a1a1a;
}

.hostapi-select-option:before {
    content: "";
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.4;
}

.hostapi-select-option:hover {
    background-color: #f7fafc;
}

.hostapi-select-option.selected {
    background-color: #f1f5f9;
    font-weight: 500;
}

/* Remove the blue border hover effect */
.hostapi-select-trigger:hover,
.hostapi-date-range-field:hover {
    border-color: #e2e8f0 !important; /* Keep the original border color */
}

/* Also remove any outline on focus if present */
.hostapi-select-trigger:focus,
.hostapi-date-range-field:focus,
.hostapi-select-trigger:active,
.hostapi-date-range-field:active {
    outline: none !important;
    border-color: #e2e8f0 !important;
    box-shadow: none !important;
}

/* Remove any transitions that might be causing the effect */
.hostapi-select-trigger,
.hostapi-date-range-field {
    transition: none !important;
    /* Force a shared box model + height so the two fields always line up,
       regardless of whether the active theme applies a border-box reset.
       Without this, the city trigger (72px) and the date field (82px)
       render at different heights under border-box. */
    box-sizing: border-box;
    height: 82px;
}

/* Hide the actual select dropdown */
#hostapi-city {
    display: none;
}

/* Date Range Picker Styles */
.hostapi-dates-container {
    position: relative;
    flex: 1;
    min-width: 200px;
    z-index: 9999;
}

/* Ensure proper positioning of the Litepicker calendar */
.litepicker {
    z-index: 10000 !important; /* High z-index but below dropdown */
    top: auto !important;
    left: 0 !important;
    position: absolute !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    font-size: 14px !important;
    border-radius: 8px !important;
    background-color: white !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    max-width: fit-content !important; /* Only take up space needed for content */
}

.hostapi-date-range-field {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px;
    padding-left: 45px;
    padding-right: 170px; /* Make room for buttons */
    background: white;
    border-left: none;
    border-top: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 0px 8px 8px 0px;
    cursor: pointer;
    transition: all 0.2s ease;
    height: 82px;
}

.hostapi-date-range-field:hover {
    border-color: #3b82f6;
}

.hostapi-date-range-label {
    font-size: 12px;
    color: #6B7280;
    margin-bottom: 2px;
}

.hostapi-date-range-values {
    font-size: 15px;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    max-width: calc(100% - 180px); /* Prevent overlap with buttons */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hostapi-date-start, .hostapi-date-end {
    white-space: nowrap;
}

/* Add the calendar icon */
.hostapi-date-range-field:before {
    content: "";
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.4;
}

/* Style when dates are selected */
.hostapi-date-start.dates-selected {
    color: #1a1a1a;
    font-weight: 400;
}

.hostapi-date-start {
    font-size: 16px;
    font-weight: 400;
    color: #1a1a1a;
}

/* Button container inside date range field */
.hostapi-buttons-container {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 8px;
    z-index: 5;
}

/* Standard button styling */
.hostapi-search-button,
#hostapi-clear-button,
.hostapi-date-range-field .hostapi-search-button,
.hostapi-date-range-field .hostapi-clear-button {
    padding: 0 20px;
    border-radius: 8px !important;
    font-size: 17px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 90px;
    margin: 0;
}

/* Standalone buttons (outside date field) */
.hostapi-search-button,
#hostapi-clear-button {
    height: 62px !important; /* Same height as fields */
}

.hostapi-search-button {
    background: #e63946;
    color: white;
}

.hostapi-search-button:hover {
    background: #dc2f3d;
    transform: none !important; /* Prevent movement on hover */
}

#hostapi-clear-button {
    background: #6b7280;
    color: white;
}

#hostapi-clear-button:hover {
    background: #4b5563;
    transform: none !important; /* Prevent movement on hover */
}

.hostapi-search-button i, 
#hostapi-search-button i {
    margin-right: 5px; /* Add 5px spacing between icon and text */
}

.hostapi-date-range-field .hostapi-search-button i {
    font-size: 16px;
}

/* Hide original search button if it exists */
.hostapi-search-bar > .hostapi-search-button:not(.hostapi-date-range-field .hostapi-search-button) {
    display: none;
}

/* Maintain existing search bar layout */
.hostapi-guesty-search-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 0;
    flex-wrap: wrap;
}

/* Hide original select */
#hostapi-guesty-city {
    display: none;
}

/* Prevent overflow */
html, body {
    overflow-x: hidden !important;
}

/* Mobile Styles */
@media (max-width: 768px) {
    .hostapi-search-bar {
        flex-direction: column;
        gap: 15px;
    }
    
    .hostapi-select-container,
    .hostapi-dates-container,
    #hostapi-clear-button {
        width: 100%;
        max-width: none;
    }
    
    .hostapi-date-range-field {
        width: 100%;
        border-radius: 8px;
        border-left: 1px solid #e2e8f0;
        padding-right: 15px; /* Reset padding on mobile */
    }
    
    .hostapi-date-range-values {
        max-width: 100%; /* Full width on mobile */
    }
    
    .hostapi-select-trigger {
        border-radius: 8px;
        border-right: 1px solid #e2e8f0;
    }
    
    /* All Cities dropdown icon alignment */
    .hostapi-select-trigger,
    .hostapi-dropdown-select {
        background-position: right 15px center;
        appearance: none;
        -webkit-appearance: none;
    }
    
    /* Button styling */
    .hostapi-search-button,
    #hostapi-clear-button {
        width: 100%;
        min-height: 48px;
        margin-top: 5px;
        font-size: 16px;
        font-weight: 600;
        display: block;
        flex: 1 !important;
    }
    
    .hostapi-buttons-container {
        position: relative;
        width: 100%;
        display: flex;
        gap: 8px;
        margin-top: 10px;
        transform: none;
        right: auto;
    }
    
    .hostapi-date-range-field .hostapi-search-button,
    .hostapi-date-range-field .hostapi-clear-button {
        flex: 1;
    }
    
    .hostapi-select-trigger,
    .hostapi-date-range-field {
        height: 54px !important; /* Slightly smaller for mobile but still larger than before */
    }
    
    .hostapi-search-button,
    #hostapi-clear-button,
    .hostapi-date-range-field .hostapi-search-button,
    .hostapi-date-range-field .hostapi-clear-button {
        height: 46px !important;
    }
    
    .litepicker {
        max-width: fit-content !important; /* Only take up space needed for content */
    }
}

/* Mobile and Small Device Styles */
@media (max-width: 480px) {
    /* Search bar container - full width with appropriate spacing */
    .hostapi-search-bar-container {
        width: 100% !important;
        padding: 10px !important;
        margin: 0 auto 15px auto !important;
    }
    
    /* Overall search bar layout - stack everything vertically */
    .hostapi-search-bar {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    /* City dropdown - full width with correct border radius */
    .hostapi-select-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: unset !important;
        border-right: none !important;
    }
    
    /* Completely normalize both fields to have identical box models */
    .hostapi-select-trigger,
    .hostapi-date-range-field {
        width: 100% !important;
        border-radius: 8px !important;
        border: 1px solid #e2e8f0 !important;
        box-sizing: border-box !important;
        height: 60px !important; /* Increased height to match visually */
        min-height: 60px !important;
        max-height: 60px !important; /* Prevent expansion */
        line-height: normal !important; /* Reset line height */
        margin: 0 !important; /* Remove any margins */
        overflow: hidden !important;
    }
    
    .hostapi-select-trigger {
        display: flex !important;
        align-items: center !important; 
        justify-content: flex-start !important;
        text-align: left !important;
        position: relative !important;
    }
    
    .hostapi-select-trigger span,
    .hostapi-select-trigger div {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        position: relative !important;
        top: 1px !important; /* Fine-tune vertical alignment */
    }
    
    /* If there's any inner text element, make sure it's also left-aligned */
    .hostapi-trigger-text {
        text-align: left !important;
        width: 100% !important;
    }
    
    /* Date selection field - full width and properly styled */
    .hostapi-dates-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: unset !important;
        box-sizing: border-box !important;
        z-index: 1;
    }
    
    .hostapi-date-range-field {
        padding: 10px 15px 10px 45px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
    
    /* Reset internal elements' spacing */
    .hostapi-date-range-label,
    .hostapi-date-range-values {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Move buttons outside date field for cleaner layout */
    .hostapi-buttons-container {
        position: static !important;
        width: 100% !important;
        display: flex !important;
        gap: 8px !important;
        margin-top: 10px !important;
        transform: none !important;
    }
    
    /* Search and Reset buttons - equal width */
    .hostapi-search-button,
    #hostapi-clear-button {
        flex: 1 !important;
        width: 100% !important;
        height: 48px !important;
        min-height: 48px !important;
        border-radius: 8px !important;
        font-size: 17px !important; /* Keep consistent with your earlier change */
        font-weight: 500 !important;
        margin: 0 !important;
    }
    
    /* Force proper z-index ordering */
    .hostapi-select-options {
        z-index: 10001 !important;
    }
    
    .litepicker {
        z-index: 10000 !important;
        width: 100% !important;
        left: 0 !important;
        box-sizing: border-box !important;
        max-width: fit-content !important;
    }
    
    /* Ensure date text doesn't overflow */
    .hostapi-date-range-values {
        width: 100% !important;
        max-width: 100% !important;
        white-space: normal !important; /* Allow text to wrap */
    }
    
    .hostapi-date-start {
        font-size: 15px !important;
    }
}
/* Small Tablet Styles (481px to 767px) */
@media (min-width: 481px) and (max-width: 767px) {
    /* Similar layout to mobile but with slightly adjusted proportions */
    .hostapi-search-bar {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .hostapi-select-container,
    .hostapi-dates-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: unset !important;
    }
    
    .hostapi-select-trigger,
    .hostapi-date-range-field {
        width: 100% !important;
        border-radius: 8px !important;
        border: 1px solid #e2e8f0 !important;
        height: 54px !important;
        min-height: 54px !important;
    }
    
    .hostapi-date-range-field {
        width: 100% !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    
    .hostapi-buttons-container {
        position: static !important;
        width: 100% !important;
        display: flex !important;
        gap: 10px !important;
        margin-top: 10px !important;
    }
    
    .hostapi-search-button,
    #hostapi-clear-button {
        flex: 1 !important;
        height: 50px !important;
    }
}

/* Medium Tablet Styles (768px to 934px) */
@media (min-width: 768px) and (max-width: 934px) {
    /* Two-column layout for this range */
    .hostapi-search-bar {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    
    .hostapi-select-container,
    .hostapi-dates-container {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .hostapi-buttons-container {
        position: static !important;
        width: 100% !important;
        display: flex !important;
        gap: 10px !important;
        margin-top: 10px !important;
    }
    
    .hostapi-search-button,
    #hostapi-clear-button {
        flex: 1 !important;
    }
    
    .hostapi-select-trigger,
    .hostapi-date-range-field {
        border-radius: 8px !important;
        border: 1px solid #e2e8f0 !important;
    }
}