/* assets/css/rate-quote.css — service list and loading state for the rate calculators.
 * Light by default; .rq-dark suits the calculator page's dark result panel. */
.rq-services {
  --rq-bg: #fff; --rq-line: #dbe3f0; --rq-text: #14213d; --rq-muted: #5b6b85;
  --rq-price: #22479b; --rq-note: #92500a; --rq-on: #22479b; --rq-on-text: #fff;
  --rq-cheap-bg: #e3f6ec; --rq-cheap: #12693f; --rq-fast-bg: #e6edfb; --rq-fast: #22479b;
}
.rq-dark {
  --rq-bg: rgba(255,255,255,.05); --rq-line: rgba(255,255,255,.1); --rq-text: #dce8ff; --rq-muted: #9db2cf;
  --rq-price: #fbbf24; --rq-note: #fcd38a; --rq-on: #dce8ff; --rq-on-text: #0c1524;
  --rq-cheap-bg: rgba(52,211,153,.16); --rq-cheap: #6ee7b7; --rq-fast-bg: rgba(147,180,255,.18); --rq-fast: #bcd0ff;
}

.rq-sort { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.rq-sort-btn {
  font: 600 12.5px 'Plus Jakarta Sans', sans-serif; color: var(--rq-muted);
  background: transparent; border: 1px solid var(--rq-line); border-radius: 100px;
  padding: 6px 12px; cursor: pointer; min-height: 32px;
}
.rq-sort-btn[aria-pressed="true"] { background: var(--rq-on); border-color: var(--rq-on); color: var(--rq-on-text); }
.rq-sort-btn:focus-visible, .rq-more:focus-visible { outline: 2px solid var(--rq-price); outline-offset: 2px; }

.rq-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rq-card { background: var(--rq-bg); border: 1px solid var(--rq-line); border-radius: 10px; padding: 11px 13px; }
.rq-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.rq-name { font-size: 13.5px; font-weight: 700; color: var(--rq-text); line-height: 1.5; min-width: 0; }
.rq-price { font-size: 15px; font-weight: 800; color: var(--rq-price); white-space: nowrap; }
.rq-transit { font-size: 12.5px; color: var(--rq-muted); margin-top: 2px; }
.rq-note { font-size: 12px; color: var(--rq-note); margin-top: 5px; line-height: 1.45; }
.rq-badge {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 100px;
  font-size: 10.5px; font-weight: 700; vertical-align: 1px; white-space: nowrap;
}
.rq-cheap { background: var(--rq-cheap-bg); color: var(--rq-cheap); }
.rq-fast { background: var(--rq-fast-bg); color: var(--rq-fast); }
.rq-more {
  width: 100%; margin-top: 8px; padding: 9px; min-height: 38px; cursor: pointer;
  font: 600 13px 'Plus Jakarta Sans', sans-serif; color: var(--rq-text);
  background: transparent; border: 1px dashed var(--rq-line); border-radius: 10px;
}

.rq-skel { display: flex; flex-direction: column; gap: 10px; }
.rq-skel span {
  display: block; height: 54px; border-radius: 10px;
  background: linear-gradient(90deg, rgba(127,147,180,.14), rgba(127,147,180,.3), rgba(127,147,180,.14));
  background-size: 200% 100%; animation: rq-shine 1.2s linear infinite;
}
.rq-skel span:first-child { height: 34px; width: 55%; }
@keyframes rq-shine { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .rq-skel span { animation: none; } }