/* Additional mobile responsiveness improvements */

/* Hero section mobile adjustments */
@media (max-width: 576px) {
    .hero-banner {
        padding: 40px 0;
    }

    .hero-title {
        font-size: 1.8rem;
        line-height: 1.2;
    }

    .hero-description {
        font-size: 0.95rem;
        margin-bottom: 20px;
    }

    /* Stack buttons on very small screens */
    .hero-banner .btn {
        margin-bottom: 10px;
        display: block;
        width: 100%;
    }

    .hero-banner .btn:last-child {
        margin-bottom: 0;
    }
}

/* Form improvements for mobile */
@media (max-width: 768px) {
    .main-content {
        padding: 20px 0;
    }

    /* Ensure forms don't overflow */
    .input-group {
        margin-bottom: 1rem;
    }

    /* Better spacing for checkboxes on mobile */
    .form-check {
        margin-bottom: 0.75rem;
    }

    /* Ensure buttons stack properly */
    .row.g-3 > .col-12 {
        margin-bottom: 0.75rem;
    }

    .row.g-3 > .col-12:last-child {
        margin-bottom: 0;
    }
}

/* Fix input group buttons on mobile */
@media (max-width: 576px) {
    .input-group-text {
        min-width: 40px;
        justify-content: center;
    }
}

/* Make cards stack better on mobile */
@media (max-width: 992px) {
    .col-12.col-lg-7,
    .col-12.col-lg-5 {
        margin-bottom: 2rem;
    }

    .col-12.col-lg-5 {
        margin-bottom: 0;
    }
}

/* Fix navbar brand title truncation */
@media (max-width: 768px) {
    .navbar-brand {
        font-size: 0.9rem;
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (max-width: 576px) {
    .navbar-brand {
        font-size: 0.8rem;
        max-width: 150px;
    }
}

/* Add spacing between buttons */
.btn + .btn {
    margin-top: 0.75rem;
}

@media (min-width: 768px) {
    .btn + .btn {
        margin-top: 0;
        margin-left: 0.75rem;
    }
}

/* Modal improvements for mobile */
@media (max-width: 768px) {
    .modal-dialog {
        margin: 1rem;
        max-width: calc(100% - 2rem);
    }
    
    .modal-lg {
        max-width: calc(100% - 2rem);
    }
    
    .modal-body {
        padding: 1rem 0.75rem;
    }
    
    .table {
        font-size: 0.875rem;
    }
    
    .table td {
        padding: 0.5rem 0.25rem;
        word-break: break-word;
    }
}