/* ============================================================
   Real Estate Runner — Booking Widget
   Design tokens grounded in the existing realestaterunner.com
   brand (warm taupe accent) plus a "dispatch ticket" motif —
   this business runs errands, so the order summary reads like
   a courier's manifest.
   ============================================================ */

:root {
  --rr-ink: #ffffff;
  --rr-ink-soft: #b8afa4;
  --rr-paper: #000000;
  --rr-card: #161412;
  --rr-taupe: #9a8070;
  --rr-taupe-dark: #b8a08e;
  --rr-green: #5fa682;
  --rr-green-dark: #4c8a6b;
  --rr-button: #3f5d4e;
  --rr-button-hover: #2e463a;
  --rr-line: #332f29;
  --rr-error: #e2685c;

  --rr-font-display: "Fraunces", Georgia, serif;
  --rr-font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --rr-font-mono: "IBM Plex Mono", monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--rr-ink);
  font-family: var(--rr-font-body);
  font-size: 15px;
  line-height: 1.5;
}

/* A plain, unclassed <a> (no .rr-quiet-link or similar) would otherwise
   fall back to the browser's own default link colors — blue for
   unvisited, and a low-contrast purple for visited, which is exactly
   what prompted this rule. Explicit :visited keeps the color the same
   regardless of visited state, rather than letting it silently drift
   back to browser defaults the moment a link's actually been clicked. */
a {
  color: var(--rr-taupe-dark);
}
a:visited {
  color: var(--rr-taupe-dark);
}
a:hover {
  color: var(--rr-green);
}

.rr-widget {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 20px 48px;
  background: var(--rr-paper);
}

/* ---------- Header ---------- */

.rr-header {
  margin-bottom: 28px;
}

.rr-eyebrow {
  margin: 0 0 4px;
  font-family: var(--rr-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rr-taupe-dark);
}

.rr-title {
  margin: 0 0 8px;
  font-family: var(--rr-font-display);
  font-weight: 600;
  font-size: 32px;
  letter-spacing: -0.01em;
  color: var(--rr-ink);
}

.rr-subtitle {
  margin: 0;
  color: var(--rr-ink-soft);
  font-size: 15px;
  max-width: 46ch;
}

/* ---------- Blocks ---------- */

.rr-block {
  margin-bottom: 28px;
}

.rr-block-title {
  font-family: var(--rr-font-display);
  font-weight: 600;
  font-size: 18px;
  margin: 0 0 12px;
  color: var(--rr-ink);
}

/* ---------- Services list ---------- */

.rr-services-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rr-line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--rr-card);
}

.rr-service-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--rr-line);
}
.rr-service-row:last-child { border-bottom: none; }

.rr-service-checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--rr-green);
  flex-shrink: 0;
}

.rr-service-info {
  flex: 1;
  min-width: 0;
}

.rr-service-name {
  font-weight: 500;
  font-size: 14.5px;
  color: var(--rr-ink);
}

.rr-service-desc {
  font-size: 13px;
  color: var(--rr-ink-soft);
  margin-top: 2px;
}

.rr-service-price {
  font-family: var(--rr-font-mono);
  font-size: 14px;
  color: var(--rr-taupe-dark);
  white-space: nowrap;
}

.rr-qty-stepper {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--rr-font-mono);
  visibility: hidden;
}
.rr-qty-stepper.rr-active { visibility: visible; }

.rr-qty-btn {
  width: 22px;
  height: 22px;
  border: 1px solid var(--rr-line);
  background: var(--rr-paper);
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  color: var(--rr-ink);
}
.rr-qty-btn:hover { border-color: var(--rr-taupe); }

.rr-qty-val {
  width: 18px;
  text-align: center;
  font-size: 13px;
}

.rr-loading {
  padding: 16px;
  color: var(--rr-ink-soft);
  font-size: 14px;
  animation: rr-loading-pulse 1.6s ease-in-out infinite;
}

@keyframes rr-loading-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

/* ---------- Form fields ---------- */

.rr-field-row {
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
}
/* Without these, the hidden attribute does nothing at all on either of
   these two classes — an explicit class-based display value always
   wins over the browser's own default [hidden] { display: none }. This
   is the same bug already found and fixed once tonight for
   .rr-refund-form; a broader audit turned up these two (plus
   .rr-checkbox-line below) as also affected, and genuinely used with
   hidden elsewhere \u2014 including the location-filter row shown only to a
   super admin, which this means was actually visible to a
   location-scoped admin too, not correctly hidden as intended. */
.rr-field-row[hidden] {
  display: none;
}
.rr-field-row-2 > .rr-field { flex: 1; }
.rr-field-row-3 > .rr-field { flex: 1; }
.rr-field-narrow { flex: 0 0 80px !important; }

.rr-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 0; /* without this, a flex child's content (like a long dropdown
                   option) can force it wider than its column, overflowing
                   past the card's edge — this is what was happening */
}
/* Same fix as .rr-field-row above, same reason — this specific one is
   the actual cause of the reported confusion: Month, Quarter, and Year
   fields in the Reports section all appeared at once regardless of
   which Range was selected, because toggling hidden on any of them was
   silently doing nothing at all. */
.rr-field[hidden] {
  display: none;
}
.rr-field-wide { flex-grow: 2; }

.rr-field span {
  font-size: 12.5px;
  color: var(--rr-ink-soft);
  font-weight: 500;
}

.rr-field input,
.rr-field textarea {
  font-family: var(--rr-font-body);
  font-size: 14.5px;
  padding: 10px 12px;
  border: 1px solid var(--rr-line);
  border-radius: 8px;
  background: var(--rr-card);
  color: var(--rr-ink);
  width: 100%;
  min-width: 0;
}

.rr-field input:focus,
.rr-field textarea:focus {
  outline: 2px solid var(--rr-taupe);
  outline-offset: 1px;
  border-color: var(--rr-taupe);
}

.rr-field textarea { resize: vertical; }

/* ---------- Dispatch ticket (signature element) ---------- */

.rr-ticket {
  margin: 8px 0 20px;
  position: relative;
}

.rr-ticket-inner {
  background: var(--rr-card);
  border: 1px dashed var(--rr-taupe);
  border-radius: 4px;
  padding: 16px 18px 18px;
  position: relative;
}

/* perforated top edge */
.rr-ticket-inner::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 12px;
  right: 12px;
  height: 1px;
  background-image: radial-gradient(circle, var(--rr-paper) 2px, transparent 2.5px);
  background-size: 12px 4px;
  background-repeat: repeat-x;
}

/* Same perforated-stub treatment as the customer booking page's order
   summary (.rr-ticket-inner above) — reused here rather than
   reinvented, so a runner's actual assigned run visually reads as the
   same kind of "ticket" a customer sees themselves, tying the two
   sides of this app together instead of leaving the runner side
   looking like an unrelated generic dashboard. Used specifically for
   an individual run card, not applied more broadly than that. */
.rr-run-ticket {
  background: var(--rr-card);
  border: 1px dashed var(--rr-taupe);
  border-radius: 4px;
  padding: 16px 18px 18px;
  margin-bottom: 14px;
  position: relative;
}

.rr-run-ticket::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 12px;
  right: 12px;
  height: 1px;
  background-image: radial-gradient(circle, var(--rr-paper) 2px, transparent 2.5px);
  background-size: 12px 4px;
  background-repeat: repeat-x;
}

.rr-success-check {
  margin-bottom: 10px;
}

.rr-ticket-head {
  display: flex;
  justify-content: space-between;
  font-family: var(--rr-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rr-taupe-dark);
  border-bottom: 1px solid var(--rr-line);
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.rr-ticket-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 20px;
}

.rr-ticket-empty {
  margin: 0;
  font-size: 13.5px;
  color: var(--rr-ink-soft);
  font-style: italic;
}

.rr-ticket-line {
  display: flex;
  justify-content: space-between;
  font-size: 13.5px;
  gap: 12px;
}

.rr-ticket-line-name { color: var(--rr-ink); }
.rr-ticket-line-price { font-family: var(--rr-font-mono); color: var(--rr-ink-soft); white-space: nowrap; }

.rr-ticket-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--rr-line);
  font-family: var(--rr-font-display);
  font-weight: 600;
  font-size: 15px;
}

.rr-ticket-stamp {
  font-family: var(--rr-font-mono);
  font-weight: 600;
  font-size: 17px;
  color: var(--rr-green);
  border: 2px solid var(--rr-green);
  border-radius: 6px;
  padding: 2px 10px;
  transform: rotate(-2deg);
  display: inline-block;
}

/* ---------- Buttons & state ---------- */

.rr-btn-primary {
  width: 100%;
  padding: 14px 20px;
  background: var(--rr-button);
  color: #fff;
  border: none;
  border-radius: 9px;
  font-family: var(--rr-font-body);
  font-weight: 600;
  font-size: 15.5px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.rr-btn-primary:hover:not(:disabled) { background: var(--rr-button-hover); }

/* Used for "I'm on my way" — a fixed taupe/black combination rather
   than the site's own configurable theme color, so it reads
   consistently regardless of branding, matching the muted tone already
   used for other text throughout this app. Smaller and narrower than a
   standard primary button by request, not full-width. */
.rr-btn-urgent {
  display: block;
  width: fit-content;
  margin: 0 auto 12px;
  padding: 10px 18px;
  background: var(--rr-taupe-dark);
  color: #000;
  border: none;
  border-radius: 9px;
  font-family: var(--rr-font-body);
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: 0.01em;
  cursor: pointer;
}
.rr-btn-urgent:hover { filter: brightness(0.92); }

/* Used throughout the admin dashboard for a positive/confirming action
   (Save, Issue refund, View full details) — was referenced in several
   places but never actually had a style defined here until now, so
   these have all just been rendering as plain default buttons. */
.rr-btn-go {
  background: var(--rr-green);
  color: #fff;
  border-color: var(--rr-green);
}
.rr-btn-go:hover { background: var(--rr-green-dark); }
.rr-btn-primary:disabled {
  background: var(--rr-line);
  color: var(--rr-ink-soft);
  cursor: not-allowed;
}
.rr-btn-primary:focus-visible {
  outline: 2px solid var(--rr-taupe-dark);
  outline-offset: 2px;
}

.rr-error {
  background: color-mix(in srgb, var(--rr-error) 15%, var(--rr-paper));
  border: 1px solid var(--rr-error);
  color: var(--rr-error);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13.5px;
  margin-bottom: 14px;
}

#rr-checkout-container {
  border-radius: 10px;
  overflow: hidden;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .rr-btn-primary { transition: none; }
}

/* Mobile */
@media (max-width: 480px) {
  .rr-title { font-size: 26px; }
  .rr-field-row-3 { flex-wrap: wrap; }
  .rr-field-narrow { flex: 1 1 45% !important; }

  /* Two-column rows (name+company, email+phone, area+speed, date+window,
     etc.) previously stayed side-by-side at any width — cramped and hard
     to tap accurately on a phone. Stack them into one column instead. */
  .rr-field-row-2 { flex-wrap: wrap; }
  .rr-field-row-2 > .rr-field { flex: 1 1 100%; }

  .rr-coupon-row { flex-wrap: wrap; }
  .rr-coupon-row .rr-field { flex: 1 1 100%; }
  .rr-coupon-apply-btn { width: 100%; }

  /* Account page's plan list: name/price/description on the left, a
     Subscribe button on the right — stack instead of squeezing the button
     against long plan text on a narrow phone. */
  .rr-service-row { flex-wrap: wrap; }
  .rr-service-row .rr-btn-secondary { width: 100%; }
}

/* ============================================================
   Additions for multi-run booking (leg cards, selects, checkboxes)
   ============================================================ */

.rr-select {
  font-family: var(--rr-font-body);
  font-size: 14.5px;
  padding: 10px 12px;
  border: 1px solid var(--rr-line);
  border-radius: 8px;
  background: var(--rr-card);
  color: var(--rr-ink);
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rr-select:focus {
  outline: 2px solid var(--rr-taupe);
  outline-offset: 1px;
  border-color: var(--rr-taupe);
}

.rr-checkbox-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--rr-ink-soft);
  margin: 10px 0;
}
/* Same fix as .rr-field and .rr-field-row above, same reason. */
.rr-checkbox-line[hidden] {
  display: none;
}
.rr-checkbox-line span {
  min-width: 0; /* without this, a long label (e.g. the SMS opt-in text)
                   forces the row wider than its container instead of
                   wrapping — same root cause as the earlier dropdown fix */
  overflow-wrap: break-word;
}
.rr-checkbox-line input[type="checkbox"] {
  flex-shrink: 0; /* keep the checkbox from getting squeezed when the label wraps */
  width: 16px;
  height: 16px;
  accent-color: var(--rr-green);
}

.rr-field-checkbox-wrap {
  justify-content: flex-end;
}

.rr-runs-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}

.rr-runs-count {
  font-family: var(--rr-font-mono);
  font-size: 12px;
  color: var(--rr-taupe-dark);
}

/* ---------- Leg (run) cards ---------- */

.rr-leg-card {
  background: var(--rr-card);
  border: 1px solid var(--rr-line);
  border-radius: 12px;
  padding: 18px 18px 14px;
  margin-bottom: 16px;
}

.rr-leg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rr-line);
}

.rr-leg-label {
  font-family: var(--rr-font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--rr-taupe-dark);
}

.rr-leg-remove {
  background: none;
  border: none;
  color: var(--rr-error);
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  padding: 2px 4px;
}

.rr-leg-subhead {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--rr-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 14px 0 8px;
}

.rr-area-note {
  font-size: 12.5px;
  color: var(--rr-ink-soft);
  margin: -4px 0 12px;
  line-height: 1.4;
}

.rr-dropoff-toggle {
  margin-top: 4px;
}

.rr-dropoff-block {
  background: var(--rr-paper);
  border-radius: 8px;
  padding: 4px 12px 8px;
  margin-bottom: 8px;
}

.rr-map-upload-row input[type="file"] {
  font-size: 13px;
  padding: 8px 0;
}

.rr-map-status {
  font-size: 12.5px;
  color: var(--rr-green);
  margin-top: 4px;
  display: inline-block;
}

.rr-leg-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--rr-line);
  font-size: 13.5px;
  color: var(--rr-ink-soft);
}

.rr-leg-price {
  font-family: var(--rr-font-mono);
  font-weight: 600;
  color: var(--rr-ink);
  font-size: 14.5px;
}

/* ---------- Secondary button (add another run) ---------- */

.rr-btn-secondary {
  width: 100%;
  padding: 12px 20px;
  background: var(--rr-paper);
  color: var(--rr-taupe-dark);
  border: 1px dashed var(--rr-taupe);
  border-radius: 9px;
  font-family: var(--rr-font-body);
  font-weight: 500;
  font-size: 14.5px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.rr-btn-secondary:hover {
  background: color-mix(in srgb, var(--rr-taupe) 15%, var(--rr-paper));
}

/* ---------- Account page tabs ---------- */

.rr-tabs {
  display: flex;
  flex-wrap: wrap; /* with 10 admin tabs now, a single non-wrapping row was
                      forcing the last tab's label to break and spill past
                      the container's edge — this lets extra tabs move to
                      a second row instead */
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--rr-line);
}

.rr-tab-group-label {
  flex-basis: 100%; /* forces a line break before/after — a label and the
                        tabs following it never share a row with a
                        different group's tabs, regardless of viewport
                        width or how many tabs wrap */
  font-family: var(--rr-font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rr-ink-soft);
  margin: 10px 0 3px;
}

.rr-tab-group-label:first-child {
  margin-top: 0;
}

.rr-tab {
  background: var(--rr-paper);
  border: 1px solid var(--rr-line);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  padding: 9px 14px;
  font-family: var(--rr-font-body);
  font-weight: 500;
  font-size: 13px;
  color: var(--rr-ink-soft);
  cursor: pointer;
  white-space: nowrap; /* keeps a tab's own label on one line — if it
                          doesn't fit, the whole tab wraps to the next
                          row rather than the label breaking mid-word */
  margin-bottom: -2px;
  transition: background 0.15s ease, color 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.rr-tab-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Without this, a scoped admin's hidden super-admin-only tabs (see
   SUPER_ADMIN_ONLY_TABS in admin.js) would show up anyway — the same
   hidden-attribute-override bug already found and fixed three times
   elsewhere tonight, caught here before shipping a fourth instance of
   it rather than after. */
.rr-tab[hidden] {
  display: none;
}

.rr-tab:hover {
  color: var(--rr-ink);
}

.rr-tab-active {
  background: var(--rr-card);
  color: var(--rr-green);
  border-color: var(--rr-green);
  border-bottom: 2px solid var(--rr-card); /* "erases" the divider right
                          under the active tab, so it visually connects
                          to the content panel below it, like a real
                          folder tab */
  font-weight: 600;
}

/* ---------- Credit / coupon controls on the booking widget ---------- */

.rr-credit-toggle {
  margin: 8px 0 0;
  font-size: 13px;
}
.rr-credit-toggle input {
  accent-color: var(--rr-green);
}
.rr-credit-toggle.rr-disabled {
  opacity: 0.5;
}

.rr-coupon-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  margin-bottom: 8px;
}
.rr-coupon-row .rr-field { flex: 1; }
.rr-coupon-apply-btn {
  padding: 10px 16px;
  background: var(--rr-button);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.rr-coupon-apply-btn:hover { background: var(--rr-button-hover); }

.rr-coupon-status {
  font-size: 13px;
  margin: 4px 0 0;
}
.rr-coupon-status.rr-ok { color: var(--rr-green); }
.rr-coupon-status.rr-bad { color: var(--rr-error); }

.rr-ticket-line-discount .rr-ticket-line-price {
  color: var(--rr-green);
}

.rr-account-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

.rr-account-link {
  display: inline-block;
  font-size: 13px;
  color: var(--rr-taupe-dark);
}

/* ---------- Cancel button on account page receipts ---------- */

.rr-cancel-leg-btn {
  margin-left: 8px;
  padding: 3px 9px;
  font-size: 11.5px;
  border-radius: 5px;
  border: 1px solid var(--rr-error);
  background: transparent;
  color: var(--rr-error);
  cursor: pointer;
}
.rr-cancel-leg-btn:hover {
  background: color-mix(in srgb, var(--rr-error) 15%, var(--rr-paper));
}

/* ---------- Quiet link (e.g. cancel subscription) — intentionally low-key ---------- */

.rr-quiet-link {
  font-size: 12px;
  color: var(--rr-ink-soft);
  text-decoration: underline;
  opacity: 0.7;
}
.rr-quiet-link:hover {
  opacity: 1;
  color: var(--rr-error);
}