:root{
    --wvc-accent: #2563EB;
    --wvc-border: #E5E7EB;
    --wvc-border-active: #2563EB;
    --wvc-text: #1F2937;
    --wvc-bg: #FFFFFF;
    --wvc-radius: 14px;
    --gradient-primary: linear-gradient(135deg, #eb3678, #5b23ff);
    --gradient-active: linear-gradient(135deg, #ffb508, #ff8c00);
}

.wvc-group{
    margin: 0 0 14px;
    direction: rtl;
}

.wvc-step-header{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:8px;
    margin:0 0 10px;
    color:var(--wvc-text);
    font-size:15px;
    font-weight:700;
}

.wvc-step-num{
    width:22px;
    height:22px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--wvc-accent);
    color:#fff;
    font-size:11px;
    font-weight:700;
    line-height:1;
}

.wvc-step-title{
    line-height:1.3;
}

.wvc-cards-wrap{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
}

.wvc-card{
    position:relative;
    min-height:62px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:12px 42px 12px 14px;
    background:var(--gradient-primary);
    border:1px solid var(--wvc-border);
    border-radius:var(--wvc-radius);
    cursor:pointer;
    text-align:center;
    transition:border-color .18s ease, filter .18s ease, transform .18s ease;
    box-shadow:none;
}

.wvc-card::after{
    content:"";
    position:absolute;
    right:16px;
    top:50%;
    transform:translateY(-50%);
    width:18px;
    height:18px;
    border-radius:50%;
    border:2px solid #D1D5DB;
    background:#fff;
    box-sizing:border-box;
    transition:all .18s ease;
}

.wvc-card:hover{
    border-color:#D6DAE1;
    filter:brightness(1.08);
}

.wvc-card:active{
    transform:scale(.98);
}

.wvc-card.active{
    border-color:var(--wvc-border-active);
    background:var(--gradient-active);
}

.wvc-card.active::after{
    border-color:var(--wvc-accent);
    background:
        radial-gradient(circle at center, var(--wvc-accent) 0 42%, #fff 43% 100%);
}

.wvc-card.hidden{
    display:none !important;
}

.wvc-card.disabled{
    opacity:.45;
    pointer-events:none;
}

.wvc-check{
    display:none !important;
}

.wvc-card img{
    width:22px;
    height:22px;
    object-fit:cover;
    border-radius:6px;
    margin-left:6px;
    flex:0 0 22px;
}

.wvc-label{
    width:100%;
    display:block;
    color:#fff;
    font-size:15px;
    font-weight:700;
    line-height:1.45;
    text-align:center;
    white-space:normal;
    word-break:break-word;
}

/* مهم: نخلي عمودين حتى في الهاتف */
@media (max-width: 767px){
    .wvc-cards-wrap{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:10px;
    }

    .wvc-card{
        min-height:58px;
        padding:10px 38px 10px 12px;
        border-radius:13px;
    }

    .wvc-card::after{
        right:14px;
        width:17px;
        height:17px;
    }

    .wvc-label{
        font-size:14px;
        line-height:1.4;
    }

    .wvc-card img{
        width:20px;
        height:20px;
        margin-left:5px;
        flex-basis:20px;
    }
}

/* شاشات صغيرة جدًا */
@media (max-width: 380px){
    .wvc-cards-wrap{
        gap:8px;
    }

    .wvc-card{
        min-height:54px;
        padding:8px 34px 8px 10px;
    }

    .wvc-card::after{
        right:12px;
        width:16px;
        height:16px;
    }

    .wvc-label{
        font-size:13px;
    }
}