@import url("cancelled-polish.css?v=1");

/* Closest-stop loading shell: real DOM content prevents blank/ghost paints during fast scroll. */
body.is-loading-schedule .closest-card,
body.is-locating-user:not(.has-location) .closest-card {
  min-height: 224px !important;
}

body.is-loading-schedule #closestStop,
body.is-locating-user:not(.has-location) #closestStop {
  display: block !important;
  min-height: 164px !important;
  padding: 0 !important;
  overflow: visible !important;
  isolation: isolate;
}

body.is-loading-schedule #closestStop > :not(.closest-loading-card),
body.is-locating-user:not(.has-location) #closestStop > :not(.closest-loading-card) {
  display: none !important;
}

.closest-loading-card {
  display: none;
}

body.is-loading-schedule #closestStop .closest-loading-card,
body.is-locating-user:not(.has-location) #closestStop .closest-loading-card {
  position: relative;
  display: grid !important;
  grid-template-columns: 66px minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  min-height: 164px;
  padding: 24px 24px;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(18, 150, 223, .34);
  background:
    linear-gradient(90deg, rgba(255,255,255,.22) 0 9%, transparent 9% 17%, rgba(255,255,255,.22) 17% 26%, transparent 26% 100%),
    radial-gradient(circle at 84% 46%, rgba(18, 150, 223, .18), transparent 8rem),
    radial-gradient(circle at 16% 18%, rgba(255, 205, 126, .30), transparent 7rem),
    linear-gradient(135deg, rgba(255, 250, 240, .94), rgba(255, 235, 191, .84));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.46), 0 12px 26px rgba(0,0,0,.12);
  transform: translateZ(0);
  backface-visibility: hidden;
  animation: rbLoadingCardGlow 1.8s ease-in-out infinite;
}

.closest-loading-badge {
  position: relative;
  z-index: 2;
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  border-radius: 23px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.22), transparent 1.7rem),
    linear-gradient(135deg, #061b33, #1296df);
  border: 1px solid rgba(255,255,255,.46);
  box-shadow: 0 16px 30px rgba(12, 84, 140, .34), inset 0 1px 0 rgba(255,255,255,.26);
}

.closest-loading-badge img {
  width: 39px;
  height: 39px;
  display: block;
}

.closest-loading-badge::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 3px solid rgba(255, 248, 238, .32);
  border-top-color: #fff8ee;
  animation: rbSpin .85s linear infinite;
}

.closest-loading-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
  padding-right: 72px;
  color: #0c2239;
}

.closest-loading-title {
  display: block;
  font-size: clamp(1.32rem, 4.9vw, 1.88rem);
  font-weight: 950;
  letter-spacing: -.045em;
  line-height: 1.02;
  text-shadow: 0 1px 0 rgba(255,255,255,.38);
}

.closest-loading-subtitle {
  display: block;
  margin-top: 8px;
  color: rgba(12, 34, 57, .72);
  font-size: .82rem;
  line-height: 1.25;
  font-weight: 900;
}

.closest-loading-meter {
  position: absolute;
  left: 112px;
  right: 96px;
  bottom: 26px;
  z-index: 2;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(18, 150, 223, .12);
  border: 1px solid rgba(18, 150, 223, .16);
}

.closest-loading-meter span {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(18,150,223,.20), rgba(18,150,223,.84), rgba(255,190,86,.70));
  animation: rbLoadingMeter 1.25s ease-in-out infinite;
}

body.is-loading-schedule .closest-card .mini-label,
body.is-locating-user:not(.has-location) .closest-card .mini-label {
  position: relative;
  z-index: 6;
  color: #0d8ed8 !important;
}

body.is-loading-schedule .closest-card .mini-label::after,
body.is-locating-user:not(.has-location) .closest-card .mini-label::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 8px;
  border-radius: 999px;
  background: #7ee074;
  box-shadow: 0 0 0 5px rgba(126, 224, 116, .16);
  vertical-align: 1px;
}

.developer-donate-modal {
  width: min(430px, calc(100vw - 28px)) !important;
  padding: 30px 18px 16px !important;
  border-radius: 28px !important;
}

.developer-donate-modal .mini-label,
.developer-donate-modal h2,
.developer-donate-modal .donate-intro,
.developer-donate-modal .donate-note,
.developer-donate-modal .donate-options,
.developer-donate-modal .modal-ok {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.developer-donate-modal .mini-label,
.developer-donate-modal h2,
.developer-donate-modal .donate-intro,
.developer-donate-modal .donate-note {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.developer-donate-modal h2 {
  width: 100% !important;
  max-width: none !important;
  margin-top: 8px !important;
  margin-bottom: 12px !important;
  padding-right: 34px !important;
  color: #fff8ee !important;
  font-family: "Playfair Display", Georgia, serif !important;
  font-size: clamp(2rem, 7.2vw, 2.62rem) !important;
  font-style: italic !important;
  font-weight: 900 !important;
  letter-spacing: -.025em !important;
  line-height: .98 !important;
  text-wrap: balance;
  text-shadow: 0 2px 0 rgba(255, 255, 255, .08), 0 12px 28px rgba(0, 0, 0, .34);
}

.developer-donate-modal h2::after {
  content: "";
  display: block;
  width: min(168px, 46%);
  height: 3px;
  margin-top: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #67d6ff, #f6cf8a 68%, rgba(246, 207, 138, 0));
  box-shadow: 0 0 18px rgba(103, 214, 255, .18);
}

.developer-donate-modal .donate-intro,
.developer-donate-modal .donate-note {
  max-width: 100% !important;
  font-size: .9rem !important;
  line-height: 1.36 !important;
}

.developer-donate-modal .donate-note {
  margin-top: 12px !important;
}

.developer-donate-modal .donate-options {
  display: grid !important;
  grid-template-columns: 116px minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 12px !important;
  width: 100% !important;
  margin-top: 14px !important;
}

.developer-donate-modal .qr-frame {
  width: 116px !important;
  height: 116px !important;
  min-width: 116px !important;
  display: grid !important;
  place-items: center !important;
  padding: 10px !important;
  border-radius: 20px !important;
}

.developer-donate-modal .qr-frame img {
  width: 96px !important;
  height: 96px !important;
  object-fit: contain !important;
}

.developer-donate-modal .paypal-link {
  min-height: 96px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 5px !important;
  padding: 16px 18px !important;
  border-radius: 18px !important;
}

.developer-donate-modal .paypal-link strong,
.developer-donate-modal .paypal-link span {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

.developer-donate-modal .modal-ok {
  width: 100% !important;
  margin-top: 14px !important;
  min-height: 56px !important;
  border-radius: 18px !important;
}

body:not(.is-loading-schedule):has(#closestStop .closest-empty):has(#results .cancelled-card):not(:has(#results .stop-card:not(.cancelled-card):not(.empty-card))) #closestStop .closest-empty h2,
body:not(.is-loading-schedule):has(#closestStop .closest-empty):has(#results .empty-card) #closestStop .closest-empty h2 {
  font-size: 0 !important;
  line-height: 0 !important;
}

body:not(.is-loading-schedule):has(#closestStop .closest-empty):has(#results .cancelled-card):not(:has(#results .stop-card:not(.cancelled-card):not(.empty-card))) #closestStop .closest-empty h2::after,
body:not(.is-loading-schedule):has(#closestStop .closest-empty):has(#results .empty-card) #closestStop .closest-empty h2::after {
  content: "All stops are closed today";
  display: block;
  color: #0c2239;
  font-size: clamp(1.34rem, 4.9vw, 1.9rem);
  font-weight: 950;
  letter-spacing: -.035em;
  line-height: 1.02;
}

body:not(.is-loading-schedule):has(#closestStop .closest-empty):has(#results .cancelled-card):not(:has(#results .stop-card:not(.cancelled-card):not(.empty-card))) #closestStop .closest-empty .closest-chip-row span,
body:not(.is-loading-schedule):has(#closestStop .closest-empty):has(#results .empty-card) #closestStop .closest-empty .closest-chip-row span {
  font-size: 0 !important;
  line-height: 0 !important;
}

body:not(.is-loading-schedule):has(#closestStop .closest-empty):has(#results .cancelled-card):not(:has(#results .stop-card:not(.cancelled-card):not(.empty-card))) #closestStop .closest-empty .closest-chip-row span::after,
body:not(.is-loading-schedule):has(#closestStop .closest-empty):has(#results .empty-card) #closestStop .closest-empty .closest-chip-row span::after {
  content: "Check back tomorrow for the next Bean route.";
  display: inline;
  color: rgba(12, 34, 57, .76);
  font-size: .86rem;
  font-weight: 900;
  line-height: 1.24;
}

@keyframes rbLoadingCardGlow {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.46), 0 12px 26px rgba(0,0,0,.12); }
  50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.58), 0 18px 36px rgba(18,150,223,.20); }
}

@keyframes rbLoadingMeter {
  0% { transform: translateX(-125%); }
  100% { transform: translateX(250%); }
}

@media (max-width: 430px) {
  body.is-loading-schedule .closest-card,
  body.is-locating-user:not(.has-location) .closest-card {
    min-height: 206px !important;
  }

  body.is-loading-schedule #closestStop,
  body.is-locating-user:not(.has-location) #closestStop {
    min-height: 146px !important;
  }

  body.is-loading-schedule #closestStop .closest-loading-card,
  body.is-locating-user:not(.has-location) #closestStop .closest-loading-card {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 14px;
    min-height: 146px;
    padding: 20px 18px;
  }

  .closest-loading-badge {
    width: 56px;
    height: 56px;
    border-radius: 20px;
  }

  .closest-loading-badge img {
    width: 33px;
    height: 33px;
  }

  .closest-loading-copy {
    padding-right: 38px;
  }

  .closest-loading-title {
    font-size: clamp(1.12rem, 6vw, 1.54rem);
  }

  .closest-loading-subtitle {
    font-size: .75rem;
  }

  .closest-loading-meter {
    left: 88px;
    right: 58px;
    bottom: 21px;
  }

  .developer-donate-modal {
    width: min(430px, calc(100vw - 26px)) !important;
    padding: 28px 18px 16px !important;
  }

  .developer-donate-modal h2 {
    padding-right: 28px !important;
    font-size: clamp(1.9rem, 8.1vw, 2.22rem) !important;
    line-height: .98 !important;
  }

  .developer-donate-modal h2::after {
    width: 142px;
    margin-top: 8px;
  }

  .developer-donate-modal .donate-intro,
  .developer-donate-modal .donate-note {
    font-size: .86rem !important;
    line-height: 1.34 !important;
  }

  .developer-donate-modal .donate-options {
    grid-template-columns: 104px minmax(0, 1fr) !important;
    gap: 12px !important;
    margin-top: 12px !important;
  }

  .developer-donate-modal .qr-frame {
    width: 104px !important;
    height: 104px !important;
    min-width: 104px !important;
    padding: 9px !important;
    border-radius: 19px !important;
  }

  .developer-donate-modal .qr-frame img {
    width: 86px !important;
    height: 86px !important;
  }

  .developer-donate-modal .paypal-link {
    min-height: 88px !important;
    padding: 14px 16px !important;
  }

  .developer-donate-modal .paypal-link strong {
    font-size: .95rem !important;
    line-height: 1.12 !important;
  }

  .developer-donate-modal .paypal-link span {
    font-size: .78rem !important;
    line-height: 1.15 !important;
  }

  .developer-donate-modal .modal-ok {
    min-height: 54px !important;
    margin-top: 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.is-loading-schedule #closestStop .closest-loading-card,
  body.is-locating-user:not(.has-location) #closestStop .closest-loading-card,
  .closest-loading-badge::after,
  .closest-loading-meter span {
    animation: none !important;
  }
}