/* Softer cancelled stop cards: obvious status without the oversized stamp. */
.stop-card.cancelled-card {
  isolation: isolate;
  border-color: rgba(184, 62, 62, 0.44) !important;
  background:
    linear-gradient(90deg, rgba(191, 62, 62, 0.12), rgba(255, 250, 242, 0) 38%),
    radial-gradient(circle at 90% 10%, rgba(191, 62, 62, 0.11), rgba(191, 62, 62, 0) 10rem),
    linear-gradient(145deg, rgba(255, 250, 242, 0.9), rgba(246, 232, 218, 0.78)) !important;
  box-shadow:
    0 18px 36px rgba(0, 0, 0, 0.22),
    inset 5px 0 0 rgba(190, 55, 55, 0.72),
    inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}

.stop-card.cancelled-card::after,
.stop-card.cancelled-card[data-cancelled-label]::after {
  content: none !important;
  display: none !important;
}

.stop-card.cancelled-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 42%),
    repeating-linear-gradient(-16deg, rgba(194, 58, 58, 0.045) 0 10px, rgba(255, 255, 255, 0) 10px 24px) !important;
  opacity: 1 !important;
}

.stop-card.cancelled-card > * {
  position: relative;
  z-index: 2;
}

.stop-card.cancelled-card .card-topline {
  margin-bottom: 12px !important;
}

.stop-card.cancelled-card .distance-chip {
  display: none !important;
}

.stop-card.cancelled-card .open-chip,
.stop-card.cancelled-card .cancelled-chip {
  color: #fff !important;
  background: linear-gradient(135deg, #d94a4a, #a93131) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow:
    0 8px 16px rgba(148, 41, 41, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

.stop-card.cancelled-card .stop-name {
  color: #3c2530 !important;
  text-decoration: none !important;
}

.stop-card.cancelled-card .stop-time {
  color: #743a2c !important;
  background: rgba(160, 68, 45, 0.1) !important;
  border-color: rgba(160, 68, 45, 0.16) !important;
}

.stop-card.cancelled-card .stop-address {
  color: rgba(60, 37, 48, 0.78) !important;
}

.stop-card.cancelled-card .stop-source {
  color: rgba(91, 50, 55, 0.78) !important;
  font-size: 0 !important;
  font-weight: 850 !important;
}

.stop-card.cancelled-card .stop-source::before {
  content: "Cancelled Removed" !important;
  display: inline-block;
  font-size: 0.82rem;
  line-height: 1.25;
}

.stop-card.cancelled-card .route-main,
.stop-card.cancelled-card .route-main.route-disabled {
  display: none !important;
}

.stop-card.cancelled-card .route-icon,
.stop-card.cancelled-card .route-provider,
.stop-card.cancelled-card .route-main::after {
  display: none !important;
}

/* Visual guard for the outer Showing Schedule card.
   app.js can render the weekday first, then the schedule-art flag lands on #results.
   Use that flag so the outer card says Today/Tomorrow when the selected schedule is relative. */
.app-shell:has(#results[data-schedule-art="today"]) #dayTitle,
.app-shell:has(#results[data-schedule-art="tomorrow"]) #dayTitle {
  font-size: 0 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

.app-shell:has(#results[data-schedule-art="today"]) #dayTitle::after,
.app-shell:has(#results[data-schedule-art="tomorrow"]) #dayTitle::after {
  display: block !important;
  font-size: clamp(1.26rem, 5.4vw, 1.65rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.06em !important;
  color: var(--cream) !important;
}

.app-shell:has(#results[data-schedule-art="today"]) #dayTitle::after {
  content: "Today" !important;
}

.app-shell:has(#results[data-schedule-art="tomorrow"]) #dayTitle::after {
  content: "Tomorrow" !important;
}

@media (max-width: 520px) {
  .stop-card.cancelled-card {
    box-shadow:
      0 14px 28px rgba(0, 0, 0, 0.22),
      inset 4px 0 0 rgba(190, 55, 55, 0.72),
      inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
  }

  .stop-card.cancelled-card .card-topline {
    margin-bottom: 10px !important;
  }
}