/**
 * Internet Panel Mobile Optimizations
 * Rectangular provider cards with centered layout
 */

/* Internet Provider Cards */
.network-selection .row {
    justify-content: center !important;
}

.network-selection .col-6,
.network-selection .col-md-3 {
    max-width: 200px !important;
}

/* Make cards rectangular and modern */
.network-selection .network-card {
    min-height: 160px !important;
    border-radius: 16px !important;
    border: 2px solid #e5e7eb !important;
    transition: all 0.3s ease !important;
    background: #ffffff !important;
    padding: 1.5rem 1rem !important;
}

.network-selection .network-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1) !important;
}

/* Selected state */
.network-selection input[type="radio"]:checked+.network-card {
    border-width: 3px !important;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
}

.network-selection input[type="radio"]:checked+.btn-outline-success {
    border-color: #10b981 !important;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;
}

.network-selection input[type="radio"]:checked+.btn-outline-primary {
    border-color: #3b82f6 !important;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
}

/* Make logos fill the card */
.network-selection .network-logo {
    width: 100% !important;
    height: 90px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 0.75rem !important;
}

.network-selection .network-logo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    max-width: 120px !important;
}

/* Provider text */
.network-selection .network-card span {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
}

/* Active state text color */
.network-selection input[type="radio"]:checked+.btn-outline-success span {
    color: #059669 !important;
}

.network-selection input[type="radio"]:checked+.btn-outline-primary span {
    color: #2563eb !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .network-selection .col-6 {
        flex: 0 0 auto !important;
        width: 45% !important;
        max-width: 180px !important;
    }

    .network-selection .network-card {
        min-height: 140px !important;
        padding: 1rem 0.5rem !important;
    }

    .network-selection .network-logo {
        height: 70px !important;
    }

    .network-selection .network-logo img {
        max-width: 90px !important;
    }

    .network-selection .network-card span {
        font-size: 0.875rem !important;
    }
}

/* Extra small mobile */
@media (max-width: 480px) {
    .network-selection .col-6 {
        width: 48% !important;
        max-width: 160px !important;
    }

    .network-selection .network-card {
        min-height: 120px !important;
    }

    .network-selection .network-logo {
        height: 60px !important;
    }
}