/* ==========================================================================
   KAN-22 — Courier to your door: the home band, the /courier quote form and
   the rider's courier screen. Linked only by those views (home/partials/courier,
   courier/create, rider/courier). Storefront parts use the app tokens (--oa-*,
   oy/app.css); the rider screen uses the rider tokens (--oy-*, orderyfy.css).
   ========================================================================== */

/* ---- Home band ---- */
.oa-cr-band {
  position: relative; overflow: hidden; margin: 30px 0 8px; padding: 20px 18px 18px;
  border-radius: var(--oa-r-lg); background: var(--oa-lime-50); border: 1px solid var(--oa-lime-100);
}
/* A soft disc behind the icon corner, so the band reads as its own little card on white. */
.oa-cr-band::after {
  content: ''; position: absolute; top: -48px; inset-inline-end: -48px; width: 160px; height: 160px;
  border-radius: 50%; background: var(--oa-lime-100); pointer-events: none;
}
.oa-cr-band > * { position: relative; z-index: 1; }
.oa-cr-band-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.oa-cr-band-ic {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: 18px; background: var(--oa-lime); color: var(--oa-ink);
  display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(79, 122, 18, .18);
}
.oa-cr-kicker { display: block; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--oa-lime-ink); margin-bottom: 2px; }
.oa-cr-band-title { font-family: var(--oa-display); font-size: 20px; line-height: 26px; font-weight: 800; letter-spacing: -.01em; margin: 0; color: var(--oa-ink); }
.oa-cr-band-text { margin: 0 0 12px; font-size: 14px; line-height: 21px; color: var(--oa-ink-2); }
.oa-cr-brands { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.oa-cr-brands span {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--oa-r-pill);
  background: #fff; border: 1px solid var(--oa-border); font-size: 12px; font-weight: 700; color: var(--oa-ink-2);
}
.oa-cr-steps { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.oa-cr-steps li { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: var(--oa-r); padding: 10px 12px; }
.oa-cr-step-ic {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 11px; background: var(--oa-lime-50); color: var(--oa-lime-ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.oa-cr-steps strong { display: block; font-size: 14px; line-height: 19px; }
.oa-cr-steps small { display: block; font-size: 12.5px; line-height: 17px; color: var(--oa-mute); }
@media (min-width: 900px) {
  .oa-cr-band { display: grid; grid-template-columns: 1fr 1fr; column-gap: 36px; align-items: start; padding: 28px 32px; }
  .oa-cr-band-head, .oa-cr-band-text, .oa-cr-brands, .oa-cr-band-cta { grid-column: 1; }
  .oa-cr-steps { grid-column: 2; grid-row: 1 / span 4; margin: 0; }
  .oa-cr-band-cta { width: auto; justify-self: start; }
  .oa-cr-band-title { font-size: 24px; line-height: 30px; }
}

/* ---- Quote form (/courier) ---- */
.oa-cr-intro { display: flex; align-items: flex-start; gap: 14px; margin: 8px 0 18px; padding: 16px; border-radius: var(--oa-r-md); background: var(--oa-lime-50); }
.oa-cr-intro-ic {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 15px; background: var(--oa-lime); color: var(--oa-ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.oa-cr-intro p { margin: 4px 0 0; font-size: 14px; line-height: 20px; color: var(--oa-ink-2); }
.oa-cr-h { font-family: var(--oa-display); font-size: 17px; font-weight: 800; margin: 22px 0 12px; }
.oa-cr-h:first-of-type { margin-top: 4px; }
.oa-cr-hint { font-size: 12.5px; line-height: 17px; color: var(--oa-mute); }
/* Off-screen, never display:none: some bots skip hidden fields. */
.oa-cr-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Courier company: radio chips, the chosen one filled (no script needed). */
.oa-cr-companies { border: 0; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.oa-cr-companies legend { margin-bottom: 8px; padding: 0; }
.oa-cr-companies .oa-chip { position: relative; }
.oa-cr-companies .oa-chip:has(input:checked) { background: var(--oa-ink); border-color: var(--oa-ink); color: #fff; }
.oa-cr-companies .oa-chip:has(input:focus-visible) { outline: 3px solid var(--oa-lime-600); outline-offset: 2px; }
.oa-cr-companies.has-err .oa-chip { border-color: var(--oa-sale); }
.oa-cr-companies .oa-err { flex-basis: 100%; }

/* Saved addresses above the "Deliver to" box. */
.oa-cr-saved { display: flex; flex-wrap: wrap; gap: 8px; }
.oa-cr-saved .oa-chip { font: inherit; font-size: 13.5px; font-weight: 600; }
.oa-cr-saved .oa-chip[aria-pressed="true"] { background: var(--oa-ink); border-color: var(--oa-ink); color: #fff; }

.oa-cr-paylater { display: flex; align-items: center; gap: 10px; margin: 6px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--oa-sunk); font-size: 13.5px; font-weight: 600; color: var(--oa-ink-2); }
.oa-cr-paylater svg { flex: 0 0 auto; color: var(--oa-lime-ink); }

/* ---- Rider app: courier screen ---- */
.oy-rcr-h { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 16px; font-weight: 800; color: var(--oy-ink); margin: 18px 0 8px; }
.oy-rhead + .oy-rcr-h { margin-top: 0; }
.oy-rcr-hint { font-size: 13px; color: var(--oy-mute); margin: -2px 0 12px; line-height: 1.45; }
.oy-rcr .oy-rfeed + .oy-rcr-h { margin-top: 22px; }
/* Used on a moving bike: bigger targets than the order cards. (This file loads before
   rider-flow.css, hence the extra class to win over its .oy-rbtns .oy-rcall.) */
.oy-rcr-card .oy-rcard-accept { padding: 16px; font-size: 16px; }
.oy-rcr-card .oy-rbtns .oy-rcall { padding: 10px 16px; font-size: 14px; }
.oy-rcr-card .oy-rtotals + form { margin-top: 10px; }