/* ============================================================
   RK Keys — offers.css
   Single BOGO offer page (Buy X Get Y Free flow)
   Product cards reuse .product-card / .product-grid from components.css —
   only the offer-specific bits (progress bar, steps, free label) live here.
   ============================================================ */

.rk-offer-page {
  padding: var(--space-xl) 0;
  background: var(--clr-light);
}

.rk-offer-header {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.rk-offer-header h1 {
  font-family: var(--font-display);
  color: var(--clr-dark);
  margin-bottom: var(--space-xs);
}

.rk-offer-subtitle {
  color: var(--clr-text-muted);
}

.rk-offer-step {
  display: none;
}
.rk-offer-step.active {
  display: block;
}

/* ── Sticky selection counter — stays visible while scrolling the grid ──
   Deliberately NOT nested inside .container: that class carries
   `overflow-x: hidden`, which per spec promotes its overflow-y to `auto`,
   turning it into the sticky containing block instead of the viewport. */
.rk-offer-progress {
  display: none;
  position: sticky;
  top: var(--rk-sticky-offset, 0px);
  z-index: 30;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--clr-gray-200);
  border-bottom: 1px solid var(--clr-gray-200);
  box-shadow: 0 4px 16px rgba(26, 46, 48, 0.1);
  margin-bottom: var(--space-lg);
}

.rk-offer-progress.rk-offer-progress--active {
  display: block;
}

.rk-offer-progress .container {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  text-align: center;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--clr-dark);
}

.rk-offer-progress__count {
  color: var(--clr-primary-dark);
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
}

/* ── Free-step tweaks on the shared product card ─────────── */
.rk-offer-free-label {
  color: var(--clr-success);
}

.rk-offer-badge-free {
  background: var(--clr-success);
}

#rk-offer-proceed,
#rk-offer-submit,
#rk-offer-back {
  display: block;
  margin: var(--space-lg) auto 0;
}

.rk-offer-step2-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.rk-offer-step2-actions #rk-offer-submit,
.rk-offer-step2-actions #rk-offer-back {
  margin-top: 0;
}

.rk-offer-error {
  color: var(--clr-danger);
  text-align: center;
  margin-top: var(--space-md);
  font-weight: 600;
}

.rk-offer-login-prompt {
  text-align: center;
  background: var(--clr-white);
  border: 1px solid var(--clr-gray-200);
  border-radius: 10px;
  padding: var(--space-xl) var(--space-md);
}
.rk-offer-login-prompt p {
  color: var(--clr-text-muted);
  margin-bottom: var(--space-md);
}
.rk-offer-login-prompt .btn {
  display: inline-block;
}

.rk-free-gift-qty {
  font-weight: 700;
  color: var(--clr-success);
}