/* Custom responsive styles */
@media (max-width: 768px) {
    .hero-title {
        font-size: 3rem !important;
        line-height: 1.1 !important;
    }
    .booking-form {
        padding: 1.25rem !important;
    }
    .form-field {
        padding: 0.875rem !important;
    }
    .form-text {
        font-size: 1rem !important;
    }
    .nav-text {
        font-size: 1.125rem !important;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2.5rem !important;
    }
    .booking-form {
        padding: 1rem !important;
    }
    .form-field {
        padding: 0.75rem !important;
    }
}

/* Smooth transitions */
.form-field:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Better focus states */
.form-field:focus-within {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Apply Open Sans font to text elements only, not icons */
body, h1, h2, h3, h4, h5, h6, p, span, div, a, button, input, textarea, select, label {
    font-family: 'Open Sans', sans-serif !important;
}

/* Ensure FontAwesome icons are completely protected */
.fas, .far, .fab, .fa, i[class*="fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
}

/* Specific solid icons */
.fas {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
}

/* Regular icons */
.far {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
    font-weight: 400 !important;
}

/* Extra bold headings */
.font-extrabold {
    font-weight: 800 !important;
}

/* Brand logo styling */
.brand-logo {
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 800 !important;
    font-size: 3.24rem !important; /* 51.84px - 20% smaller total */
    line-height: 1 !important;
}

@media (min-width: 768px) {
    .brand-logo {
        font-size: 4.05rem !important; /* 64.8px on larger screens - 20% smaller total */
    }
}

/* Hero title styling */
.hero-title {
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 800 !important;
}

/* Navigation text styling */
.nav-text {
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 600 !important;
}

/* Form text styling */
.form-text {
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 500 !important;
}

/* Button styling */
.btn-primary {
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 700 !important;
}

/* Force icon visibility */
i.fas, i.far, i.fab, i.fa {
    display: inline-block !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Ensure icon containers are properly sized */
.icon-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Add left padding to input content */
.form-text {
    padding-left: 10px !important;
}

/* Add more left spacing for form icons */
.form-field i {
    margin-left: 20px !important;
}

/* Map styles */
#map {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 0 !important;
}

/* Leaflet styles */
.leaflet-container {
    background: #2c2c2c !important;
}

/* Fallback background for map container */
#map {
    background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%) !important;
    min-height: 100vh !important;
}

/* Hide Leaflet controls */
.leaflet-control-container {
    display: none !important;
}

/* Dark overlay for map */
.map-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* Ensure all content elements stay above overlay */
.booking-form {
    position: relative !important;
    z-index: 30 !important;
}

/* Navigation bar above overlay */
nav {
    z-index: 100 !important;
}

/* Mobile menu above overlay */
#mobile-menu {
    position: relative !important;
    z-index: 100 !important;
}

/* Hamburger menu button above overlay */
#mobile-menu-button {
    position: relative !important;
    z-index: 100 !important;
}

/* Hero content above overlay */
.hero-title {
    position: relative !important;
    z-index: 30 !important;
}

/* All content in hero section above overlay */
#home > div:not(#map):not(.map-overlay) {
    position: relative !important;
    z-index: 30 !important;
}

/* Chat support button - highest z-index */
#chat-button {
    z-index: 9999 !important;
}

#chat-widget {
    z-index: 9998 !important;
}

/* Autocomplete styles */
.autocomplete-container {
    position: relative;
}

.autocomplete-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e5e7eb;
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    z-index: 50;
    display: none;
    max-height: 200px;
    overflow-y: auto;
}

.autocomplete-suggestion {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid #f3f4f6;
    font-size: 16px;
    color: #374151;
    transition: background-color 0.2s;
}

.autocomplete-suggestion:hover,
.autocomplete-suggestion.active {
    background-color: #f3f4f6;
}

.autocomplete-suggestion:last-child {
    border-bottom: none;
}