/* OttoCare REWARDS module — every rule scoped to .oc-rewards. Look moved from rewards_review_3.html (.hero-rewards-*).
 * Colors come from config shops.*.rewardsCard and are set on the card as --rw-bg / --rw-accent / --rw-oil-popup;
 * --rw-bar-text and --rw-bg-text are picked (black or white) for contrast by rewards.js. */
.oc-rewards, .oc-rewards * { box-sizing: border-box; }

.oc-rewards {
  --rw-bg: #ffffff;
  --rw-accent: #0c4da2;
  --rw-accent-text: var(--rw-accent);   /* text on the card in the shop's color; config rewardsCard.text overrides */
  --rw-bar-text: #ffffff;
  --rw-bg-text: #000000;
  --rw-oil-popup: #fde3e3;
  width: min(100%, 370px);
  margin-top: 14px;
  perspective: 1200px;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  color: #141414;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.oc-rewards[hidden] { display: none; }
.oc-rewards button { font-family: 'DM Sans', sans-serif; }
.oc-rewards [hidden] { display: none !important; }

/* both faces share one grid cell, so the card is as tall as its taller face */
.oc-rewards .rw-inner {
  display: grid;
  min-height: 250px;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}
.oc-rewards.is-flipped .rw-inner { transform: rotateY(180deg); }

.oc-rewards .rw-face {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 18px 18px 0;
  border-radius: 16px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backdrop-filter: blur(10px);
}
.oc-rewards .rw-front {
  background: color-mix(in srgb, var(--rw-bg) 86%, transparent);
  border: 1px solid color-mix(in srgb, var(--rw-accent) 28%, transparent);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
}
.oc-rewards .rw-back {
  transform: rotateY(180deg);
  padding: 16px 18px 0;
  background: linear-gradient(145deg, color-mix(in srgb, var(--rw-bg) 86%, transparent), color-mix(in srgb, var(--rw-bg) 68%, transparent));
  border: 1px solid rgba(201, 168, 76, 0.42);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.38);
}

/* front */
.oc-rewards .rw-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.oc-rewards .rw-logo { max-width: 155px; max-height: 48px; object-fit: contain; object-position: left center; }
.oc-rewards .rw-balance-block { margin-left: auto; text-align: right; }
.oc-rewards .rw-balance { color: var(--rw-accent-text); font-family: 'DM Serif Display', serif; font-size: 34px; line-height: 1; }
.oc-rewards .rw-balance-label { margin-top: 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }

.oc-rewards .rw-program { margin-top: 6px; }

/* name + member since on the front: the back bar's sizes, dark on the card */
/* the name line always sits the bar's own top padding (12px) above the bar */
.oc-rewards .rw-front-member { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; margin-bottom: 12px; }
.oc-rewards .rw-front-member + .rw-bar { margin-top: 0; }
.oc-rewards .rw-front-member .rw-member-name { color: var(--rw-accent-text); }
.oc-rewards .rw-front-member .rw-member-since { color: color-mix(in srgb, var(--rw-bg-text) 60%, transparent); text-align: right; }

.oc-rewards .rw-oil-progress { font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--rw-bg-text); }
.oc-rewards .rw-card-name { color: var(--rw-bar-text); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.oc-rewards .rw-type { color: var(--rw-accent-text); font-size: 21px; font-weight: 700; line-height: 1.15; }
.oc-rewards .rw-discount { margin-top: 4px; font-size: 13px; font-weight: 700; }
.oc-rewards .rw-spinner {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 2px solid rgba(93, 142, 255, 0.25);
  border-top-color: #5d8eff;
  border-radius: 50%;
  vertical-align: -2px;
  animation: rw-spin 0.8s linear infinite;
}
.oc-rewards.is-loaded .rw-spinner { display: none; }
@keyframes rw-spin { to { transform: rotate(360deg); } }

.oc-rewards .rw-oil { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.oc-rewards .rw-oil-count { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.oc-rewards .rw-oil-badge {
  min-width: 44px;
  padding: 5px 12px;
  border: 2px solid var(--rw-accent);
  border-radius: 10px;
  background: transparent;
  color: var(--rw-accent-text);
  font: 700 18px 'DM Sans', sans-serif;
  line-height: 1;
  cursor: pointer;
}
.oc-rewards .rw-oil-label { font-size: 12px; font-weight: 700; }
.oc-rewards .rw-oil-earned {   /* same gold as the Schedule Service button */
  flex: 1 1 auto;
  min-width: 0;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid #c9a84c;
  border-radius: 9px;
  background: #c9a84c;
  color: #141414;
  font: 600 12px/1.35 'DM Sans', sans-serif;
  text-align: center;
  cursor: pointer;
}
.oc-rewards .rw-oil-earned:hover { filter: brightness(1.1); }

/* the colored bottom bars: pushed to the bottom of the face, edge to edge, as tall as their content */
.oc-rewards .rw-bar, .oc-rewards .rw-member {
  position: relative;
  z-index: 1;
  margin: auto -18px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--rw-accent);
  border-radius: 0 0 15px 15px;
}
.oc-rewards .rw-bar-btn {
  flex: 1 1 0;
  padding: 9px 8px;
  border: 1.5px solid color-mix(in srgb, var(--rw-bar-text) 85%, transparent);
  border-radius: 10px;
  background: transparent;
  color: var(--rw-bar-text);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.oc-rewards .rw-bar-btn:hover { background: color-mix(in srgb, var(--rw-bar-text) 15%, transparent); }

/* back */
.oc-rewards .rw-back::after {
  content: '';
  position: absolute;
  right: -48px;
  bottom: -70px;
  width: 150px;
  height: 150px;
  border: 1px solid rgba(201, 168, 76, 0.2);
  border-radius: 50%;
  pointer-events: none;
}
.oc-rewards .rw-back-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.oc-rewards .rw-back-title {
  color: color-mix(in srgb, var(--rw-bg-text) 55%, transparent);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.oc-rewards .rw-back-nav { display: flex; align-items: center; gap: 6px; }
.oc-rewards .rw-nav-btn {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--rw-accent) 38%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--rw-accent) 14%, transparent);
  color: var(--rw-accent-text);
  font-size: 9px;
  cursor: pointer;
}
.oc-rewards .rw-nav-count { min-width: 30px; text-align: center; font-size: 9px; font-weight: 600; color: color-mix(in srgb, var(--rw-bg-text) 60%, transparent); }

.oc-rewards .rw-awards {
  margin-top: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.oc-rewards .rw-awards::-webkit-scrollbar { display: none; }
.oc-rewards .rw-awards-track { display: flex; align-items: stretch; }
.oc-rewards .rw-award-page {
  flex: 0 0 100%;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 6px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.oc-rewards .rw-award {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
  padding: 5px 8px;
  border: 1px solid rgba(201, 168, 76, 0.35);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.55);
  cursor: pointer;
}
.oc-rewards .rw-award-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-size: 9px; font-weight: 600; }
.oc-rewards .rw-award-left { flex: 0 0 auto; color: #c9a84c; font-size: 10px; font-weight: 700; }
.oc-rewards .rw-benefits {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
  margin: 0;
  padding: 0 6px 0 18px;
  color: color-mix(in srgb, var(--rw-bg-text) 85%, transparent);
  font: 500 12px/1.3 'DM Sans', sans-serif;
}
.oc-rewards .rw-member { align-items: baseline; justify-content: space-between; min-height: 54px; padding: 11px 16px; }
.oc-rewards .rw-card-name-bar { flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; }
.oc-rewards .rw-card-discount { color: color-mix(in srgb, var(--rw-bar-text) 80%, transparent); font-size: 12px; font-weight: 600; }
.oc-rewards .rw-member-name { color: var(--rw-bar-text); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.oc-rewards .rw-member-since { color: color-mix(in srgb, var(--rw-bar-text) 75%, transparent); font-size: 9px; letter-spacing: 0.08em; text-align: right; text-transform: uppercase; }