/**
 * Airtime Panel Professional Design
 * Network-branded colors with gradients and modern animations
 */

/* ===== NETWORK CARDS (GLOBAL) ===== */
/* Professional design with network-branded colors */
#airtimePurchasePanel .network-card,
#airtimePurchasePanel .btn.network-card,
#airtimePurchasePanel label.network-card {
    padding: 0 !important;
    width: 80px !important;
    height: 80px !important;
    min-height: 80px !important;
    border-radius: 50% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid rgba(255, 255, 255, 0.8) !important;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08) !important;
    margin: 0 auto !important;
    position: relative !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    overflow: hidden !important;
}

/* Network-specific brand colors */
#airtimePurchasePanel .network-card[for="panel-airtime-network-mtn"] {
    background: linear-gradient(135deg, #ffcc00 0%, #ffd700 100%) !important;
    border-color: #ffb700 !important;
}

#airtimePurchasePanel .network-card[for="panel-airtime-network-glo"] {
    background: linear-gradient(135deg, #00b140 0%, #00d452 100%) !important;
    border-color: #009933 !important;
}

#airtimePurchasePanel .network-card[for="panel-airtime-network-airtel"] {
    background: linear-gradient(135deg, #ff0000 0%, #ff3333 100%) !important;
    border-color: #cc0000 !important;
}

#airtimePurchasePanel .network-card[for="panel-airtime-network-9mobile"] {
    background: linear-gradient(135deg, #006f3b 0%, #008a4a 100%) !important;
    border-color: #005830 !important;
}

/* Hover effects with glow */
#airtimePurchasePanel .network-card:hover {
    transform: translateY(-5px) scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

#airtimePurchasePanel .network-card[for="panel-airtime-network-mtn"]:hover {
    box-shadow: 0 8px 30px rgba(255, 204, 0, 0.4), 0 4px 12px rgba(255, 204, 0, 0.3) !important;
}

#airtimePurchasePanel .network-card[for="panel-airtime-network-glo"]:hover {
    box-shadow: 0 8px 30px rgba(0, 177, 64, 0.4), 0 4px 12px rgba(0, 177, 64, 0.3) !important;
}

#airtimePurchasePanel .network-card[for="panel-airtime-network-airtel"]:hover {
    box-shadow: 0 8px 30px rgba(255, 0, 0, 0.4), 0 4px 12px rgba(255, 0, 0, 0.3) !important;
}

#airtimePurchasePanel .network-card[for="panel-airtime-network-9mobile"]:hover {
    box-shadow: 0 8px 30px rgba(0, 111, 59, 0.4), 0 4px 12px rgba(0, 111, 59, 0.3) !important;
}

/* Selected state with enhanced glow */
#airtimePurchasePanel .btn-check:checked+.network-card {
    transform: scale(1.1) !important;
    border-width: 3px !important;
    animation: pulse 2s ease-in-out infinite !important;
}

#airtimePurchasePanel .btn-check:checked+.network-card[for="panel-airtime-network-mtn"] {
    box-shadow: 0 0 0 4px rgba(255, 204, 0, 0.3), 0 8px 30px rgba(255, 204, 0, 0.5) !important;
}

#airtimePurchasePanel .btn-check:checked+.network-card[for="panel-airtime-network-glo"] {
    box-shadow: 0 0 0 4px rgba(0, 177, 64, 0.3), 0 8px 30px rgba(0, 177, 64, 0.5) !important;
}

#airtimePurchasePanel .btn-check:checked+.network-card[for="panel-airtime-network-airtel"] {
    box-shadow: 0 0 0 4px rgba(255, 0, 0, 0.3), 0 8px 30px rgba(255, 0, 0, 0.5) !important;
}

#airtimePurchasePanel .btn-check:checked+.network-card[for="panel-airtime-network-9mobile"] {
    box-shadow: 0 0 0 4px rgba(0, 111, 59, 0.3), 0 8px 30px rgba(0, 111, 59, 0.5) !important;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1.1);
    }

    50% {
        transform: scale(1.12);
    }
}

/* Network logo container with white background */
#airtimePurchasePanel .network-logo,
#airtimePurchasePanel .network-card .network-logo {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px !important;
    background: white !important;
    border-radius: 50% !important;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.05) !important;
}

/* Network logo image */
#airtimePurchasePanel .network-logo img,
#airtimePurchasePanel .network-card .network-logo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
    visibility: visible !important;
}

/* Hide Network Name Text */
#airtimePurchasePanel .network-card .fw-semibold,
#airtimePurchasePanel .network-card span.fw-semibold,
#airtimePurchasePanel label.network-card .fw-semibold {
    display: none !important;
}

@media (max-width: 768px) {

    /* ===== NETWORK CARDS (LAYOUT ONLY) ===== */
    #airtimePurchasePanel .network-selection .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0.5rem !important;
        margin: 0 !important;
        justify-content: center !important;
        padding: 1rem 0 !important;
    }

    #airtimePurchasePanel .network-selection .col-3,
    #airtimePurchasePanel .network-selection .col-6,
    #airtimePurchasePanel .network-selection .col-md-3 {
        flex: 0 0 auto !important;
        max-width: none !important;
        padding: 0 !important;
        display: flex !important;
        justify-content: center !important;
    }

    /* Reduce card size on mobile to fit 4 in a row */
    #airtimePurchasePanel .network-card,
    #airtimePurchasePanel .btn.network-card,
    #airtimePurchasePanel label.network-card {
        width: 70px !important;
        height: 70px !important;
        min-height: 70px !important;
    }
}

/* ===== EXTRA SMALL DEVICES ===== */
@media (max-width: 360px) {
    #airtimePurchasePanel .network-card {
        width: 60px !important;
        height: 60px !important;
        min-height: 60px !important;
    }

    #airtimePurchasePanel .network-logo {
        padding: 4px !important;
    }

    #airtimePurchasePanel .network-selection .row {
        gap: 0.4rem !important;
    }
}