/* Mobile Responsive Styles */
@media (max-width: 768px) {

    /* Header adjustments */
    .glass-header {
        padding: 0.5rem 1rem;
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }

    .logo {
        width: 100%;
        gap: 0.5rem;
    }

    .logo-image {
        height: 60px;
    }

    .header-text {
        max-width: 100% !important;
    }

    .header-text span:first-child {
        font-size: 1.3rem !important;
    }

    .header-text span:last-child {
        font-size: 0.85rem !important;
        white-space: normal !important;
        line-height: 1.3 !important;
    }

    .user-controls {
        width: 100%;
        justify-content: flex-end;
    }

    /* Adjust container top margin for smaller header */
    .container {
        margin-top: 180px;
    }

    /* Modal adjustments */
    .modal {
        padding: 150px 0 1rem 0;
    }

    .modal-content {
        width: 95%;
        padding: 1.5rem;
    }

    /* Spots grid */
    .spots-grid {
        grid-template-columns: 1fr;
    }

    /* Buttons */
    .btn {
        font-size: 0.9rem;
        padding: 0.6rem 1rem;
    }
}

@media (max-width: 480px) {
    .logo-image {
        height: 50px;
    }

    .header-text span:first-child {
        font-size: 1.1rem !important;
    }

    .header-text span:last-child {
        font-size: 0.75rem !important;
    }

    .container {
        margin-top: 160px;
        padding: 1rem;
    }

    .modal {
        padding: 120px 0 1rem 0;
    }
}