/* Enhanced Mobile Search Button Styling */
/* Consolidated mobile search styles - works with main.css */

/* Tablet and mobile (up to 768px) */
@media (max-width: 768px) {

    /* Hero section title sizing for mobile */
    .hero-title {
        font-size: 2rem;
    }

    /* Search container mobile refinements */
    .search-container {
        padding: 0 15px;
        max-width: 100%;
    }

    .search-input-wrapper {
        flex-direction: column;
        gap: 12px;
        padding: 15px;
        border-radius: 20px;
    }

    .search-icon {
        display: none;
    }

    .search-input {
        width: 100%;
        padding: 14px 16px;
        font-size: 1rem;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.05);
    }

    .search-btn {
        width: 100%;
        padding: 14px 24px;
        font-size: 1rem;
        font-weight: 600;
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
    }
}

/* Very small screens (up to 380px) */
@media (max-width: 380px) {
    .hero-title {
        font-size: 1.7rem;
    }

    .search-input-wrapper {
        padding: 12px;
    }

    .search-input,
    .search-btn {
        padding: 12px 14px;
        font-size: 0.95rem;
    }
}