/* ================================================
   CLUB STATUS CARD  -  4.8.0  "A1 Medallion"
   Soft (neumorphic) card, raised image medallion on the left,
   punch-card progress track below. Self-contained: system fonts,
   no external requests. All classes are rdwcs- prefixed.
   Modal is moved to <body> by the plugin script, so modal rules
   are scoped to .rdwcs-modal-overlay, card rules to [class*="rdwcs-wrap-"].
   ================================================ */

[class*="rdwcs-wrap-"],
.rdwcs-modal-overlay {
    --rdwcs-red:        #d6202e;
    --rdwcs-red-text:   #b3141f;   /* small red text: >= 4.5:1 on the soft background */
    --rdwcs-red-dark:   #a3111b;
    --rdwcs-black:      #121212;
    --rdwcs-ink:        #1b1f24;
    --rdwcs-muted:      #4a5563;
    --rdwcs-bg:         #e4edf5;
    --rdwcs-bg-hi:      #f4f8fb;
    --rdwcs-sh-dark:    #c2ccd7;
    --rdwcs-sh-light:   #ffffff;
    --rdwcs-line:       #6b7684;   /* >= 3:1 non-text UI */
    --rdwcs-font:       Outfit, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --rdwcs-radius:     24px;
    --rdwcs-tap:        44px;
    font-family: var(--rdwcs-font);
    line-height: 1.35;
}

[class*="rdwcs-wrap-"] { display: block; margin: 0 !important; padding: 0 !important; }
[class*="rdwcs-wrap-"] *,
[class*="rdwcs-wrap-"] *::before,
[class*="rdwcs-wrap-"] *::after,
.rdwcs-modal-overlay *,
.rdwcs-modal-overlay *::before,
.rdwcs-modal-overlay *::after { box-sizing: border-box; }

.rdwcs-sr {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.rdwcs-ico { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: -.125em; }

/* ---------------- Card ---------------- */
[class*="rdwcs-wrap-"] .rdwcs-card {
    position: relative;
    background: var(--rdwcs-bg);
    border-radius: var(--rdwcs-radius);
    padding: 16px 16px 14px;
    color: var(--rdwcs-ink);
    box-shadow: 9px 9px 18px var(--rdwcs-sh-dark), -9px -9px 18px var(--rdwcs-sh-light);
    transition: box-shadow .2s ease;
}
[class*="rdwcs-wrap-"] .rdwcs-card.is-earned {
    box-shadow: 9px 9px 18px var(--rdwcs-sh-dark), -9px -9px 18px var(--rdwcs-sh-light), inset 0 0 0 2px var(--rdwcs-red);
}

/* whole card is one tap target that opens the qualifying-items sheet */
[class*="rdwcs-wrap-"] .rdwcs-card__open {
    position: absolute; inset: 0; z-index: 2; width: 100%; min-height: var(--rdwcs-tap);
    margin: 0; padding: 0; border: 0; border-radius: inherit; background: transparent;
    cursor: pointer; font: inherit; color: inherit; -webkit-tap-highlight-color: transparent;
    box-shadow: none; text-transform: none; letter-spacing: normal;
}
[class*="rdwcs-wrap-"] .rdwcs-card__open:hover,
[class*="rdwcs-wrap-"] .rdwcs-card__open:active { background: transparent; box-shadow: none; }
[class*="rdwcs-wrap-"] .rdwcs-card__open:focus-visible { outline: 3px solid var(--rdwcs-red-text); outline-offset: 4px; }

[class*="rdwcs-wrap-"] .rdwcs-a1__head { display: flex; align-items: center; gap: 14px; }
[class*="rdwcs-wrap-"] .rdwcs-a1__title { flex: 1; min-width: 0; }
[class*="rdwcs-wrap-"] .rdwcs-a1__name {
    font-size: 19px; font-weight: 700; line-height: 1.15; margin: 0; color: var(--rdwcs-ink);
    overflow-wrap: anywhere;
}
[class*="rdwcs-wrap-"] .rdwcs-a1__reward { font-size: 14px; color: var(--rdwcs-muted); margin: 3px 0 10px; }

/* ---------------- Medallion + image ---------------- */
.rdwcs-medal {
    position: relative; flex: none; width: 104px; height: 104px; padding: 6px; border-radius: 30px;
    background: var(--rdwcs-bg);
    box-shadow: 5px 5px 11px var(--rdwcs-sh-dark), -5px -5px 11px var(--rdwcs-sh-light);
}
.is-earned .rdwcs-medal {
    box-shadow: 5px 5px 11px var(--rdwcs-sh-dark), -5px -5px 11px var(--rdwcs-sh-light), inset 0 0 0 3px var(--rdwcs-red);
}
.rdwcs-medal--sm { width: 72px; height: 72px; padding: 4px; border-radius: 22px;
    box-shadow: 4px 4px 9px var(--rdwcs-sh-dark), -4px -4px 9px var(--rdwcs-sh-light); }

/* white tile; a blurred copy of the same image fills the empty space; the real image is shown whole */
.rdwcs-img {
    position: relative; display: block; width: 100%; height: 100%; overflow: hidden;
    border-radius: 24px; background: #fff; isolation: isolate; font-size: 30px;
}
.rdwcs-medal--sm .rdwcs-img { border-radius: 18px; font-size: 22px; }
.rdwcs-img__bg {
    position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center;
    filter: blur(14px) saturate(1.25); transform: scale(1.35); opacity: .6;
}
.rdwcs-img__fg {
    position: relative; z-index: 1; display: block; width: 100%; height: 100%;
    object-fit: contain; border: 0; border-radius: 0; margin: 0; padding: 0; max-width: none; box-shadow: none;
}
.rdwcs-img__fb {
    display: none; position: absolute; inset: 0; z-index: 2; place-items: center;
    background-color: var(--rdwcs-black); color: #fff; font-weight: 700; letter-spacing: .03em;
    background-image: radial-gradient(circle at 70% 20%, rgba(214,32,46,.55), transparent 55%);
}
.rdwcs-img.is-missing .rdwcs-img__fb,
.rdwcs-img.rdwcs-img--none .rdwcs-img__fb { display: grid; }
.rdwcs-img.is-missing .rdwcs-img__bg,
.rdwcs-img.is-missing .rdwcs-img__fg { display: none; }

.rdwcs-a1__badge {
    position: absolute; right: -7px; bottom: -7px; z-index: 3; width: 38px; height: 38px; border-radius: 50%;
    background: var(--rdwcs-red); color: #fff; display: grid; place-items: center; font-size: 19px;
    border: 3px solid var(--rdwcs-bg); box-shadow: 0 4px 10px rgba(214,32,46,.35);
    animation: rdwcs-pulse 2s ease-in-out infinite;
}

/* ---------------- Chips ---------------- */
.rdwcs-chip {
    display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
    font-size: 14px; font-weight: 600; line-height: 1.25; padding: 6px 12px; border-radius: 16px;
    color: var(--rdwcs-ink);
    box-shadow: 3px 3px 7px var(--rdwcs-sh-dark), -3px -3px 7px var(--rdwcs-sh-light);
}
.rdwcs-chip--almost { color: var(--rdwcs-red-text); }
.rdwcs-chip--earned { background: var(--rdwcs-red); color: #fff; box-shadow: 0 6px 14px rgba(214,32,46,.35); }

/* ---------------- Punch track ---------------- */
[class*="rdwcs-wrap-"] .rdwcs-track {
    margin: 14px 0 12px; padding: 12px 14px; border-radius: 999px; display: flex; align-items: center; gap: 12px;
    box-shadow: inset 4px 4px 9px var(--rdwcs-sh-dark), inset -4px -4px 9px var(--rdwcs-sh-light);
}
.rdwcs-dots { flex: 1; min-width: 0; display: flex; justify-content: space-between; gap: 4px; list-style: none; margin: 0 !important; padding: 0 !important; }
.rdwcs-dot {
    width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%;
    font-size: 13px; color: #fff; border: 2px solid var(--rdwcs-line); background: transparent;
    margin: 0 !important; padding: 0 !important; list-style: none;
}
.rdwcs-dot.is-on {
    border-color: var(--rdwcs-red);
    background: radial-gradient(circle at 35% 30%, #f04a56, var(--rdwcs-red) 60%, var(--rdwcs-red-dark));
    box-shadow: 2px 2px 5px rgba(163,17,27,.35);
}
.rdwcs-dot.is-next { border-style: dashed; border-color: var(--rdwcs-red-text); animation: rdwcs-pulse 1.6s ease-in-out infinite; }
.rdwcs-track--new .rdwcs-dot { border-style: dashed; }
/* long programs (13+ purchases): continuous bar instead of dots */
.rdwcs-bar { flex: 1; min-width: 0; height: 14px; border-radius: 999px; overflow: hidden; background: transparent;
    border: 2px solid var(--rdwcs-line); }
.rdwcs-bar > span { display: block; height: 100%; background: linear-gradient(90deg, #f04a56, var(--rdwcs-red)); border-radius: 999px; }
.rdwcs-count { font-size: 15px; font-weight: 700; white-space: nowrap; min-width: 3.2em; text-align: right; color: var(--rdwcs-ink); }
.rdwcs-count span { color: var(--rdwcs-muted); font-weight: 500; }

/* earned banner (replaces the track) */
[class*="rdwcs-wrap-"] .rdwcs-banner {
    display: flex; align-items: center; gap: 12px; margin: 14px 0 12px; padding: 12px 14px; border-radius: 18px;
    background: var(--rdwcs-red); color: #fff; box-shadow: 0 8px 18px rgba(214,32,46,.32);
}
.rdwcs-banner__ico { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.18); display: grid; place-items: center; font-size: 22px; flex: none; animation: rdwcs-pulse 2s ease-in-out infinite; }
.rdwcs-banner__txt { min-width: 0; }
.rdwcs-banner__txt b { display: block; font-size: 17px; }
.rdwcs-banner__txt span { font-size: 14px; }

/* ---------------- Footer ---------------- */
.rdwcs-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: nowrap; }
/* 4.9.0: meta text wraps on the left, "Items" stays pinned right on every card (never drops to its own row). */
.rdwcs-last { font-size: 14px; color: var(--rdwcs-muted); display: flex; align-items: flex-start; gap: 6px; margin: 0 !important; flex: 1 1 auto; min-width: 0; line-height: 1.4; }
.rdwcs-last > .rdwcs-ico { flex: none; margin-top: 2px; }
.rdwcs-last > span { min-width: 0; overflow-wrap: anywhere; }
.rdwcs-last strong { color: var(--rdwcs-ink); font-weight: 600; }
.rdwcs-more { font-size: 14px; font-weight: 600; color: var(--rdwcs-red-text); display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; flex: none; margin-left: auto; align-self: center; }
.rdwcs-more .rdwcs-ico { font-size: 16px; }
.rdwcs-note { font-size: 14px; color: var(--rdwcs-muted); margin: 10px 0 0 !important; }

/* narrow phones (320-360px) */
@media (max-width: 360px) {
    [class*="rdwcs-wrap-"] .rdwcs-card { padding: 14px 12px 12px; }
    .rdwcs-medal { width: 84px; height: 84px; padding: 5px; border-radius: 26px; }
    .rdwcs-img { border-radius: 21px; }
    [class*="rdwcs-wrap-"] .rdwcs-a1__head { gap: 10px; }
    [class*="rdwcs-wrap-"] .rdwcs-a1__name { font-size: 17px; }
    [class*="rdwcs-wrap-"] .rdwcs-track { padding: 10px; gap: 8px; }
    .rdwcs-dot { width: 20px; height: 20px; font-size: 11px; }
    .rdwcs-count { font-size: 14px; min-width: 2.8em; }
}

/* ---------------- Modal / bottom sheet ----------------
   4.10.2: the look (scrim, panel, handle, head, image chip, title, X, rule card, flat item list, Close button, motion)
   comes from roaddog-ui rdui-popup.css (A1 popup standard). Structure + open/close state only here. */
.rdwcs-modal-overlay {
    position: fixed; inset: 0; z-index: 99999; display: flex; align-items: flex-end; justify-content: center;
    opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility .2s;
}
.rdwcs-modal-overlay.rdwcs-modal-active { opacity: 1; visibility: visible; pointer-events: auto; }
.rdwcs-modal-content { position: relative; width: 100%; overflow: auto; overscroll-behavior: contain; }
.rdwcs-modal-header > div { flex: 1; min-width: 0; }
.rdwcs-modal-rule strong { color: var(--rdwcs-red-text); }
.rdwcs-item-row { display: flex; align-items: center; gap: 12px; }
.rdwcs-item-check { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; flex: none; }
.rdwcs-item-details { min-width: 0; }
.rdwcs-item-name { display: block; overflow-wrap: anywhere; }
.rdwcs-item-upc { display: block; }

@keyframes rdwcs-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) {
    [class*="rdwcs-wrap-"] *, .rdwcs-modal-overlay, .rdwcs-modal-overlay * {
        animation: none !important; transition: none !important; scroll-behavior: auto !important;
    }
}