/* Approved decorative artwork; the host owns card layout and figure sizing. */
:where(.rcs-scenario-art, .rcs-scenario-art *, .rcs-scenario-art::before, .rcs-scenario-art::after, .rcs-scenario-art *::before, .rcs-scenario-art *::after) {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.rcs-scenario-art {
  --rcs-art-ink: #010c3d;
  --rcs-art-blue: #1f5fe8;
  --rcs-art-lime: #c7e981;
  --rcs-art-lime-ink: #2f4a12;
  position: absolute;
  inset: 0 -28px -28px;
  isolation: isolate;
  overflow: hidden;
  z-index: 1;
  font-family: inherit;
  line-height: 1.4;
  color: var(--rcs-art-ink);
  text-align: left;
  pointer-events: none;
}

.rcs-scenario-art svg { display: block; }
.rcs-scenario-art strong, .rcs-scenario-art b { margin: 0; }

.rcs-art-art-bg {
  position: absolute;
  inset: 0;
  color: var(--rcs-art-ink);
  opacity: .06;
  background-image: radial-gradient(currentColor 1px, transparent 1px);
  background-size: 15px 15px;
}
.rcs-scenario-art--mobility .rcs-art-art-bg { color: #fff; opacity: .11; }

.rcs-art-info-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 10px 22px rgba(1,12,61,.16);
}
.rcs-art-info-chip svg { width: 11px; height: 11px; flex: none; }
.rcs-art-info-chip--lime { background: var(--rcs-art-lime); color: var(--rcs-art-lime-ink); }
.rcs-art-info-chip--glass { background: rgba(255,255,255,.94); color: var(--rcs-art-ink); backdrop-filter: blur(6px); }
.rcs-art-info-chip--dark {
  background: rgba(255,255,255,.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: none;
  backdrop-filter: blur(6px);
}

/* Finance: static payment card and status chips. */
.rcs-art-spark { position: absolute; left: 0; right: 0; bottom: 8%; width: 100%; height: 46%; opacity: .5; }
.rcs-art-paycard {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(76%,292px);
  transform: translate(-50%,-50%) rotate(-7deg);
  border-radius: 18px;
  padding: 16px 18px 15px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  background: linear-gradient(135deg,var(--rcs-art-blue) 0%,#3d7bff 46%,#7aa6ff 100%);
  color: #fff;
  box-shadow: 0 22px 40px rgba(1,12,61,.3), inset 0 1px 0 rgba(255,255,255,.4);
}
.rcs-art-paycard::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120px 90px at 14% 6%,rgba(255,255,255,.28),transparent 70%);
}
.rcs-art-pc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; position: relative; }
.rcs-art-pc-brand { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .92; }
.rcs-art-pc-chip { width: 22px; height: 22px; opacity: .85; }
.rcs-art-pc-num { font-size: 13px; font-weight: 500; letter-spacing: .14em; opacity: .92; position: relative; white-space: nowrap; }
.rcs-art-pc-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; position: relative; }
.rcs-art-pc-lbl { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .72; }
.rcs-art-pc-amt { font-size: 19px; font-weight: 600; letter-spacing: -.01em; flex: none; }
.rcs-art-a-chip-1 { top: 13%; right: 7%; transform: rotate(5deg); }
.rcs-art-a-chip-2 { bottom: 11%; left: 7%; transform: rotate(-4deg); }

/* Mobility: original map, route and inline SVG icons. */
.rcs-art-roads { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; }
.rcs-art-route { position: absolute; inset: 0; width: 100%; height: 100%; }
.rcs-art-rt-track {
  fill: none;
  stroke: var(--rcs-art-lime);
  stroke-opacity: .34;
  stroke-width: 2;
  stroke-dasharray: 5 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.rcs-art-rt-done {
  fill: none;
  stroke: var(--rcs-art-lime);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.rcs-art-wp {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0b1a3d;
  border: 2px solid var(--rcs-art-lime);
  transform: translate(-50%,-50%);
  box-shadow: 0 0 0 4px rgba(199,233,129,.14);
}
.rcs-art-node {
  position: absolute;
  width: 56px;
  height: 56px;
  border-radius: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%,-50%);
}
.rcs-art-node svg { width: 24px; height: 24px; }
.rcs-art-node--start { left: 12.78%; top: 68.18%; width: 42px; height: 42px; border-radius: 13px; background: #182c5c; border: 1px solid #53658b; color: #fff; }
.rcs-art-battery { position: absolute; bottom: calc(100% + 6px); display: inline-flex; align-items: center; gap: 4px; color: var(--rcs-art-lime); font-size: 11px; font-weight: 700; }
.rcs-art-battery svg { width: 14px; height: 14px; }
.rcs-art-station { position: absolute; top: 8%; left: 52%; right: 5%; max-width: 200px; padding: 9px 10px; border-radius: 14px; background: #f5f8ff; color: var(--rcs-art-ink); display: grid; gap: 5px; font-size: 11px; }
.rcs-art-station-name { display: flex; align-items: center; gap: 5px; font-size: 13px; }
.rcs-art-station-name svg { width: 13px; height: 13px; flex: none; color: #2464d8; }
.rcs-art-station-eta { color: #42567a; }
.rcs-art-station-availability { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.rcs-art-station-slots { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); flex: 1; gap: 3px; }
.rcs-art-station-slots i { height: 11px; border-radius: 2px; background: #dae4f5; }
.rcs-art-station-slots i:nth-child(-n+4) { background: #92c94e; }
.rcs-art-station-price { font-weight: 600; }
.rcs-art-replies { position: absolute; inset: auto 8px 10px; display: flex; justify-content: center; gap: 8px; }
.rcs-art-replies span { padding: 5px 10px; border: 1px solid #667db2; border-radius: 99px; color: #eef4ff; background: #102456; font-size: 11px; white-space: nowrap; }
.rcs-art-replies span:last-child { background: var(--rcs-art-lime); border-color: transparent; color: var(--rcs-art-lime-ink); }

/* Events: upright pass, with readable labels in the shared short figure. */
.rcs-art-pass {
  position: absolute;
  left: 50%;
  top: 51%;
  width: min(72%,214px);
  transform: translate(-50%,-50%);
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 46px rgba(1,12,61,.28);
}
.rcs-art-pass-head {
  background: linear-gradient(160deg,#16307a,var(--rcs-art-ink));
  color: #fff;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  overflow: hidden;
}
.rcs-art-pass-head::after { content: ""; position: absolute; right: -26px; top: -26px; width: 86px; height: 86px; border-radius: 50%; background: rgba(199,233,129,.16); }
.rcs-art-pass-lbl { font-size: 11px; line-height: 1.2; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: #9db4e4; }
.rcs-art-pass-time { font-size: 27px; font-weight: 600; letter-spacing: -.02em; line-height: 1.12; }
.rcs-art-pass-hall { font-size: 11px; line-height: 1.3; color: #b9c9ea; margin-top: 2px; }
.rcs-art-pass-body { background: #fff; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rcs-art-pass-qr { width: 64px; height: 64px; flex: none; color: var(--rcs-art-ink); }
.rcs-art-pass-meta { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; text-align: right; min-width: 0; }
.rcs-art-pass-seat { border: 1px solid #dbe4f1; border-radius: 9px; padding: 4px 9px; line-height: 1.15; }
.rcs-art-pass-seat > span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8795ad; }
.rcs-art-pass-seat strong { display: block; font-size: 15px; font-weight: 600; }
.rcs-art-pass-gate { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--rcs-art-lime-ink); background: var(--rcs-art-lime); border-radius: 999px; padding: 4px 9px; white-space: nowrap; }
.rcs-art-pass-gate svg { width: 10px; height: 10px; flex: none; }
.rcs-art-pass-foot { background: #f4f7fc; border-top: 1px dashed #d5dfef; padding: 8px 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; color: #6b7b95; white-space: nowrap; }
.rcs-art-pass-foot strong { font-weight: 600; color: var(--rcs-art-ink); }
.rcs-art-ticket-number { display: inline-flex; gap: 4px; align-items: baseline; }
.rcs-art-confetti { position: absolute; border-radius: 50%; }
.rcs-art-c-chip-1 { left: 5%; top: 9%; transform: rotate(-3deg); }
.rcs-art-c-chip-2 { right: 5%; bottom: 12%; transform: rotate(3deg); }

/* Only the artwork bleed follows the existing card padding breakpoint. */
@media (max-width: 1100px) {
  .rcs-scenario-art { inset: 0 -24px -24px; }
}

/* Query the existing host card container, including Indonesian long labels. */
@container (max-width: 380px) {
  .rcs-art-paycard { width: min(84%,280px); }
  .rcs-art-info-chip { padding: 6px 10px; }
}

/* Event leads the grid; finance gets the wider, side-by-side stage. */
.rcs-scenario-art--events .rcs-art-pass {
  top: auto; bottom: 0; left: 51%; width: min(47%, 283px);
  transform: translateX(-50%); border-radius: 24px 24px 0 0;
}
.rcs-scenario-art--events .rcs-art-pass-head { padding: 14px 18px 12px; }
.rcs-scenario-art--events .rcs-art-pass-time { font-size: clamp(23px, 3vw, 37px); }
.rcs-scenario-art--events .rcs-art-pass-body { padding: 13px 18px; }
.rcs-scenario-art--events .rcs-art-pass-qr { width: clamp(48px,6vw,86px); height: auto; }
.rcs-scenario-art--events .rcs-art-c-chip-1 { left: 9%; top: 8%; }
.rcs-scenario-art--events .rcs-art-c-chip-2 { right: 10%; bottom: 21%; }
@media(min-width:761px){
  .rcs-scenario-art--finance .rcs-art-paycard {
    left: 51%; top: 53%; width: min(61%, 414px); padding: 22px 24px; gap: 20px;
    transform: translate(-50%,-50%) rotate(-4deg); border-radius: 26px;
  }
  .rcs-scenario-art--finance .rcs-art-pc-amt { font-size: clamp(20px,2.3vw,30px); }
  .rcs-scenario-art--finance .rcs-art-pc-num { font-size: clamp(14px,1.6vw,22px); }
  .rcs-scenario-art--finance .rcs-art-a-chip-2 { left: 3%; bottom: 49%; transform:none; }
}
@media(max-width:1100px){
  .rcs-scenario-art--events .rcs-art-pass { width:min(66%,246px); }
  .rcs-scenario-art--events .rcs-art-c-chip-1 { left:3%; top:2%; }
  .rcs-scenario-art--events .rcs-art-c-chip-2 { right:3%; bottom:15%; }
}
@media(max-width:760px){
  .rcs-scenario-art--events .rcs-art-pass { width:min(73%,246px); }
  .rcs-scenario-art--events .rcs-art-c-chip-1 { left:50%; transform:translateX(-50%) rotate(-3deg); }
  .rcs-scenario-art--events .rcs-art-c-chip-2 { display:none; }
}

/* Paint the glow on the card so it extends beyond the artwork boundary. */
[data-product="rcs"] .sms-scenario:has(.rcs-scenario-art--finance) {
  background-image: radial-gradient(ellipse at 80% 20%, #dce4f5, transparent 70%), radial-gradient(ellipse at 58% 110%, #e6ede1, transparent 55%);
}
[data-product="rcs"] .sms-scenario:has(.rcs-scenario-art--mobility) {
  background-image: radial-gradient(ellipse 85% 74% at 9% 48%, rgb(47 110 233 / .38), transparent 90%), radial-gradient(ellipse 68% 62% at 100% 100%, rgb(199 233 129 / .09), transparent 90%);
}
[data-product="rcs"] .sms-scenario:has(.rcs-scenario-art--events) {
  background-image: radial-gradient(ellipse at 75% 65%, #e9f0ff, transparent 78%);
}