/**
 * Card icon system – one icon system (Lucide), reusable across user + admin.
 * Top-center of card, rounded container, soft gradient, subtle shadow.
 * Semantic icons via data-lucide; theme-aware.
 */

/* ---------- Reusable card icon wrapper ---------- */
.card-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: rgba(11, 37, 120, 0.08);
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    line-height: 1;
}

.card-icon-wrap i,
.card-icon-wrap svg {
    width: 28px;
    height: 28px;
    color: #0B2578;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
}

.card-icon-wrap svg {
    display: block;
}

/* User: product & plan cards – 56px, soft theme */
.user-layout .services-section .card-icon-wrap,
.user-layout .choose-your-plan .card-icon-wrap {
    width: 56px;
    height: 56px;
}

/* Specific icon colors for different services */
.user-layout .services-section .service-card:nth-child(1) .card-icon-wrap {
    background: rgba(11, 37, 120, 0.08);
}

.user-layout .services-section .service-card:nth-child(1) .card-icon-wrap i,
.user-layout .services-section .service-card:nth-child(1) .card-icon-wrap svg {
    color: #0B2578;
}

.user-layout .services-section .service-card:nth-child(2) .card-icon-wrap {
    background: rgba(107, 114, 128, 0.08);
}

.user-layout .services-section .service-card:nth-child(2) .card-icon-wrap i,
.user-layout .services-section .service-card:nth-child(2) .card-icon-wrap svg {
    color: #6B7280;
}

.user-layout .services-section .service-card:nth-child(3) .card-icon-wrap {
    background: rgba(22, 163, 74, 0.08);
}

.user-layout .services-section .service-card:nth-child(3) .card-icon-wrap i,
.user-layout .services-section .service-card:nth-child(3) .card-icon-wrap svg {
    color: #16A34A;
}

.user-layout .services-section .service-card:nth-child(4) .card-icon-wrap {
    background: rgba(71, 85, 105, 0.08);
}

.user-layout .services-section .service-card:nth-child(4) .card-icon-wrap i,
.user-layout .services-section .service-card:nth-child(4) .card-icon-wrap svg {
    color: #475569;
}

.user-layout .services-section .service-card:hover .card-icon-wrap,
.user-layout .choose-your-plan .plan-card:hover .card-icon-wrap {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Admin: KPI cards – 44px, soft theme */
.admin-summary-card .card-icon-wrap {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: rgba(11, 37, 120, 0.08);
    border: none;
}

.admin-summary-card .card-icon-wrap i,
.admin-summary-card .card-icon-wrap svg {
    width: 22px;
    height: 22px;
    color: #0B2578;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
}

.admin-summary-card--alert .card-icon-wrap {
    background: rgba(220, 38, 38, 0.08);
    border: none;
}

.admin-summary-card--alert .card-icon-wrap i,
.admin-summary-card--alert .card-icon-wrap svg {
    color: #DC2626;
}

.admin-summary-card:hover .card-icon-wrap {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

@media (prefers-reduced-motion: reduce) {
    .card-icon-wrap,
    .user-layout .services-section .service-card:hover .card-icon-wrap,
    .user-layout .choose-your-plan .plan-card:hover .card-icon-wrap {
        transition: none;
        transform: none;
    }
}