/* Meedoen bar */
.reward-progress-wrap { margin:20px 0; }
.reward-progress-bar {
height: 14px;
background:#eee;
border-radius:10px;
overflow:hidden;
}
.reward-progress-fill {
height: 100%;
background:#3fbd78;
transition: .3s;
}
.reward-users { margin-top:8px;font-size:11px;color:#444;line-height:1.2; }
.reward-users span { display:block; }
.reward-btn {
margin-top:10px;
display:inline-block;
padding:8px 16px;
background:#3fbd78;
color:#fff !important;
border-radius:6px;
text-decoration:none;
}
.reward-btn.disabled { background:#999; pointer-events:none; }

/* ===== WRAPPER ===== */
.rewards-slider-container {
position: relative;
margin: 20px 0;
}

.rewards-slider-wrap {
overflow-x: auto;
display: flex;
gap: 20px;
scroll-snap-type: x mandatory;
padding: 10px 5px;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
}
.rewards-slider-wrap::-webkit-scrollbar {
display: none;
}

/* ===== KAART ===== */
.rewards-card {
scroll-snap-align: start;
background: #fff;
border-radius: 10px;
padding: 15px;
text-align: center;
border: 1px solid #efefef;
flex-shrink: 0;
}

/* MOBIEL */
@media(max-width: 700px) { .rewards-card { min-width: 80%; } }

/* TABLET */
@media(min-width: 701px) and (max-width: 1024px) {
.rewards-card { min-width: calc(50% - 20px); }
}

/* DESKTOP */
@media(min-width: 1025px) {
.rewards-card {
	min-width: calc(100% / <?php echo intval($atts['per_row']); ?> - 20px);
}
}

/* AFBEELDING FIX */
.rewards-card img {
width: 100%;
max-width: 100%;
max-height: 260px;
object-fit: cover;
border-radius: 10px;
display: block;
contain-intrinsic-size: auto !important;
}

/* TITEL */
.rewards-card .rw-title {
font-size: 18px;
font-weight: 600;
margin: 10px 0;
}

/* BUTTON */
.rewards-card .rw-btn {
display: inline-block;
margin-top: 5px;
padding: 8px 14px;
background:#3fbd78;
color:#fff;
border-radius: 8px;
text-decoration:none;
transition: transform 0.3s ease;
}

.rw-btn:hover {

transform: scale(1.03);
color: #FFF !important;
}

/* ===== PIJLTJES ===== */
.rewards-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: #000;
color: #fff;
width: 38px;
height: 38px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 22px;
z-index: 50;
opacity: 0.75;
transition: 0.2s;
user-select: none;
}
.rewards-arrow:hover {
opacity: 1;
}

.rewards-arrow-left {
left: -50px;
}
.rewards-arrow-right {
right: -50px;
}

@media(max-width:700px) {
.rewards-arrow {
	width: 32px;
	height: 32px;
	font-size: 18px;
}
}

.winnen-titel-icon {
width: 20px;
height: 20px;
margin-bottom: -3px;
margin-right: 10px;
}

.reward-meta-hoe, .reward-meta-waar, .reward-meta-voorwaarden {

margin-left: 35px;
margin-bottom: 25px;
}

.reward-meta-hoe ol {
counter-reset: reward-counter;
list-style: none;
padding-left: 0;
margin-left: -50px;
}

.reward-meta-hoe ol li {
counter-increment: reward-counter;
position: relative;
padding-left: 40px;
margin-top: 15px;
margin-bottom: 15px;
}

.reward-meta-hoe ol li::before {
content: counter(reward-counter);
position: absolute;
left: 0;
top: 0;

width: 25px;
height: 25px;

background: #4c9c50;
color: #fff;

font-size: 17px;
font-weight: bold;

display: flex;
align-items: center;
justify-content: center;

border-radius: 50%;
}

.reward-meta a {

color: #3fbd78 !important;
text-decoration: underline !important;
}

.winnen-status-actiedatum,
.rw-status,
.rw-date {

color: #555;
font-size: 12px;
}

.reward-status, .reward-actiedatum {

float: left;	
margin-right: 20px;
}

.rewards-card.is-active {
    border-color: #3fbd78;
}

.rewards-card.is-active .de-status {

color: #3fbd78;
font-weight: bold;
}

.rewards-card.is-upcoming {

opacity: 0.5;	
}

.rewards-card.is-upcoming:hover {

opacity: 1;	
}