/* ==========================================================================
   The Waffle Taco — Rewards Page (rewards.php)
   Steps Slider, Reward Tiers
   ========================================================================== */

/* Steps Vertical Slider */
.steps-slider {
    max-width:520px;
    margin:0 auto;
    position:relative;
}

.steps-slider-track {
    position:relative;
    min-height:220px;
    overflow:hidden;
}

.steps-slide {
    position:absolute;
    top:0; left:0; right:0;
    text-align:center;
    padding:var(--space-xl) var(--space-lg);
    background:var(--color-white);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-md);
    opacity:0;
    transform:translateY(30px);
    transition:all 0.5s cubic-bezier(0.25,0.46,0.45,0.94);
    pointer-events:none;
}

.steps-slide.active {
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
    position:relative;
}

.steps-slide.exit-up {
    opacity:0;
    transform:translateY(-30px);
}

.steps-slide h3 { margin-bottom:var(--space-sm); }

.step-number {
    width:56px; height:56px;
    background:linear-gradient(135deg, var(--color-taco-orange), var(--color-gold));
    color:var(--color-white);
    font-family:var(--font-display);
    font-size:1.5rem; font-weight:700;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    margin:0 auto var(--space-md);
    box-shadow:0 4px 12px rgba(236,106,54,0.25);
}

.steps-slide p { color:var(--color-brown-light); font-size:0.95rem; line-height:1.6; max-width:400px; margin:0 auto; }

/* Dots */
.steps-slider-dots {
    display:flex;
    justify-content:center;
    gap:var(--space-sm);
    margin-top:var(--space-lg);
}

.steps-dot {
    width:10px; height:10px;
    border-radius:50%;
    border:2px solid var(--color-taco-orange);
    background:transparent;
    cursor:pointer;
    padding:0;
    transition:all 0.3s ease;
}

.steps-dot.active {
    background:var(--color-taco-orange);
    transform:scale(1.2);
}

/* Progress bar */
.steps-slider-progress {
    max-width:200px;
    height:3px;
    background:var(--color-stone-light);
    border-radius:3px;
    margin:var(--space-md) auto 0;
    overflow:hidden;
}

.steps-progress-bar {
    height:100%;
    background:linear-gradient(90deg, var(--color-taco-orange), var(--color-gold));
    border-radius:3px;
    width:33.33%;
    transition:width 0.4s ease;
}

/* Reward Tiers */
.rewards-tiers { display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-xl); max-width:900px; margin:0 auto; }
.tier-card {
    background:var(--color-white);
    border-radius:var(--radius-lg);
    padding:var(--space-2xl) var(--space-xl);
    text-align:center;
    box-shadow:var(--shadow-sm);
    border:2px solid var(--color-stone-light);
    transition:all 0.3s ease;
    position:relative;
}
.tier-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.tier-card--highlight { border-color:var(--color-taco-orange); box-shadow:var(--shadow-md); }
.tier-card--highlight:hover { box-shadow:0 8px 30px rgba(236,106,54,0.2); }
.tier-badge {
    position:absolute; top:-12px; left:50%; transform:translateX(-50%);
    background:var(--color-taco-orange); color:var(--color-white);
    font-family:var(--font-display); font-size:0.75rem; font-weight:600;
    padding:0.3rem 1rem; border-radius:50px;
    text-transform:uppercase; letter-spacing:0.05em;
}
.tier-points {
    font-family:var(--font-display);
    font-size:2.5rem; font-weight:700;
    color:var(--color-taco-orange);
    margin-bottom:var(--space-sm);
}
.tier-points span { font-size:1rem; font-weight:500; color:var(--color-brown-light); }
.tier-card h3 { margin-bottom:var(--space-sm); }
.tier-card p { color:var(--color-brown-light); font-size:0.9rem; }


/* ==========================================================================
   Responsive — Rewards
   ========================================================================== */

@media (max-width:900px) {
    .rewards-tiers { grid-template-columns:1fr; max-width:360px; }
}