.widget-vip {
padding-block: 1rem;
padding-inline: 0.5rem; /* minder ruimte aan de zijkanten */
}

.widget-vip .discount {
font-size: 2.5rem;
margin-bottom: 1.5rem;
font-weight: 700;
}

.widget-vip-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
justify-items: center;
width: 100%;
box-sizing: border-box;
padding: 0 1rem;
}

@media (max-width: 1024px) {
.widget-vip-cards {
grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 600px) {
.widget-vip-cards {
grid-template-columns: 1fr;
}
}

.widget-vip-card-wrapper {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 340px; /* iets breder */
box-sizing: border-box;
flex: 1 1 320px;
}

.vip-stars {
margin-bottom: 0.5em;
display: flex;
gap: 0.25em;
justify-content: center;
}

.vip-stars svg {
width: 1.4em;
height: 1.4em;
fill: #f5c518;
}

.vip-star--inactive svg {
fill: #ccc !important;
}

.widget-vip-card {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 0.75rem;
padding: 1.5rem;
width: 100%;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
text-align: center;
transition: transform 0.2s ease, box-shadow 0.2s ease;
box-sizing: border-box;
}

.widget-vip-card:hover {
transform: translateY(-4px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.widget-vip-card-info {
text-align: center;
}

.widget-vip-card-info ul {
margin-inline-start: 0 !important;
list-style: none;
padding-left: 0;
}

.widget-vip-card-infoul > li {
position: relative;
display: flex;
}

.widget-vip-card-info ul:not(.st-custom-list) > li:before {
--st-icon-size: var(--text-size-xl);
content: '';
margin-inline-end: var(--st-spacing-xs);
-webkit-mask-image: var(--usp-check-icon);
mask-image: var(--usp-check-icon);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
background-color: var(--usp-icon-color);
min-width: 1em;
min-height: 1em;
height: var(--st-icon-size);
display: inline-block;
vertical-align: text-bottom;
}

.widget-vip .st-icon-star-full svg {
width: 1.2em;
height: 1.2em;
fill: #f5c518;
vertical-align: middle;
}

.widget-vip-card-wrapper.is-inactive {
transition: all 0.3s ease;
pointer-events: none;
}

.widget-vip-card-wrapper.is-active {
opacity: 1;
filter: none;
transform: scale(1.05);
transition: all 0.3s ease;
z-index: 1;
}

.widget-vip-card-wrapper.is-active .widget-vip-card {
    box-shadow: 0 0 12px 2px rgba(218, 165, 32, 0.2); /* goudkleurige gloed */
    border: 1px solid rgba(218, 165, 32, 0.2); /* optioneel subtiel randje */
}