/* Hero Search Form Responsive Design - Mobile Only */
/* Keep desktop as original, only fix mobile responsiveness */

/* Mobile Landscape (768px and below) */
@media (max-width: 768px) {
    #heroSearchForm .booking-wrap {
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    #heroSearchForm .room-info {
        min-width: auto !important;
        width: 100% !important;
    }
    
    #heroSearchForm .date-display-wrapper {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 5px !important;
    }
    
    #heroSearchForm .SearchBoxTextDescription {
        width: 100% !important;
    }
}

/* Mobile Portrait (480px and below) */
@media (max-width: 480px) {
    #heroSearchForm .search-box input[type="text"] {
        height: 48px !important;
        font-size: 14px !important;
        padding: 0 50px 0 45px !important;
    }
    
    #heroSearchForm .input-icon {
        width: 16px !important;
        height: 16px !important;
        left: 12px !important;
    }
    
    #heroSearchForm .search-btn {
        width: 36px !important;
        height: 36px !important;
        right: 6px !important;
    }
    
    #heroSearchForm .search-btn img {
        width: 14px !important;
        height: 14px !important;
    }
    
    #heroSearchForm .check-in-out,
    #heroSearchForm .checkin-box {
        height: 48px !important;
        padding: 0 12px 0 45px !important;
    }
    
    #heroSearchForm .SearchBoxTextDescription__title {
        font-size: 9px !important;
    }
    
    #heroSearchForm .SearchBoxTextDescription__desc {
        font-size: 11px !important;
    }
    
    #heroSearchForm .info-box-trigger {
        font-size: 12px !important;
    }
    
    #heroSearchForm .searches-tags button {
        padding: 4px 8px !important;
        font-size: 11px !important;
    }
}

/* Extra Small Mobile (360px and below) */
@media (max-width: 360px) {
    #heroSearchForm .search-box input[type="text"] {
        height: 44px !important;
        font-size: 13px !important;
        padding: 0 45px 0 40px !important;
    }
    
    #heroSearchForm .input-icon {
        width: 14px !important;
        height: 14px !important;
        left: 10px !important;
    }
    
    #heroSearchForm .search-btn {
        width: 32px !important;
        height: 32px !important;
        right: 6px !important;
    }
    
    #heroSearchForm .search-btn img {
        width: 12px !important;
        height: 12px !important;
    }
    
    #heroSearchForm .check-in-out,
    #heroSearchForm .checkin-box {
        height: 44px !important;
        padding: 0 10px 0 40px !important;
    }
    
    #heroSearchForm .date-display-wrapper {
        gap: 3px !important;
    }
    
    #heroSearchForm .SearchBoxTextDescription__title {
        font-size: 8px !important;
    }
    
    #heroSearchForm .SearchBoxTextDescription__desc {
        font-size: 10px !important;
    }
    
    #heroSearchForm .info-box-trigger {
        font-size: 11px !important;
    }
    
    #heroSearchForm .searches-tags button {
        padding: 3px 6px !important;
        font-size: 10px !important;
    }
}

/* Landscape orientation fixes for mobile */
@media (max-height: 500px) and (orientation: landscape) {
    #heroSearchForm .search-box input[type="text"],
    #heroSearchForm .check-in-out,
    #heroSearchForm .checkin-box {
        height: 40px !important;
    }
    
    #heroSearchForm .search-btn {
        width: 30px !important;
        height: 30px !important;
    }
}

/* Focus improvements for keyboard navigation */
#heroSearchForm input:focus,
#heroSearchForm button:focus,
#heroSearchForm .checkin-box:focus {
    outline: 2px solid #2964fa !important;
    outline-offset: 2px !important;
}