/* Small additions for dashboard pages. Everything else comes from Unfold's
   compiled stylesheet, which only contains the classes Unfold itself uses. */
.dashboard-steps { list-style: none; margin: 0; padding: 0; }
.dashboard-steps li + li { margin-top: 0.75rem; }
.dashboard-done { color: rgb(22 163 74); }
.dashboard-figure { font-variant-numeric: tabular-nums; }

/* Onboarding tracker: numbered steps, done ones ticked, the current one
   in the primary color. Wraps on narrow screens. */
.onboarding-steps { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; list-style: none; margin: 0 0 1.5rem; padding: 0; }
.onboarding-step { align-items: center; display: flex; gap: 0.5rem; opacity: 0.7; }
.onboarding-step.is-done, .onboarding-step.is-current { opacity: 1; }
.onboarding-marker {
  align-items: center; border: 2px solid currentColor; border-radius: 9999px;
  display: inline-flex; font-size: 0.8rem; font-weight: 600; height: 1.75rem;
  justify-content: center; width: 1.75rem;
}
.onboarding-marker .material-symbols-outlined { font-size: 1.1rem; }
.onboarding-step.is-done .onboarding-marker { color: rgb(22 163 74); }
.onboarding-step.is-current { color: var(--color-primary-600, #087f8c); font-weight: 600; }
.dark .onboarding-step.is-current { color: var(--color-primary-500, #00dde0); }

/* Order summary: the promo discount line and the promo panel. Uses the
   brand's primary (teal on light, cyan on dark) as accent and tint. */
.quote-discount { color: var(--color-primary-700, #076a75); }
.dark .quote-discount { color: var(--color-primary-400, #2ce4e7); }
.quote-promo {
  background: color-mix(in srgb, var(--color-primary-600, #087f8c) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary-600, #087f8c) 45%, transparent);
  border-left-width: 4px;
  border-radius: 0.5rem;
  padding: 0.75rem 0.875rem;
}
.dark .quote-promo {
  background: color-mix(in srgb, var(--color-primary-500, #00dde0) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-primary-500, #00dde0) 50%, transparent);
}
.quote-promo-title {
  align-items: center; display: flex; font-weight: 600; gap: 0.4rem;
  color: var(--color-primary-700, #076a75); margin-bottom: 0.4rem;
}
.dark .quote-promo-title { color: var(--color-primary-400, #2ce4e7); }
.quote-promo-title .material-symbols-outlined { font-size: 1.15rem; }
.quote-promo-benefits { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.875rem; list-style: none; margin: 0; padding: 0; }
.quote-promo-benefits li { align-items: flex-start; display: flex; gap: 0.35rem; }
.quote-promo-benefits .material-symbols-outlined { color: var(--color-primary-600, #087f8c); font-size: 1rem; margin-top: 0.1rem; }
.dark .quote-promo-benefits .material-symbols-outlined { color: var(--color-primary-500, #00dde0); }

/* The current step's detail, set apart from the step list above it. */
.onboarding-now { border-top: 1px solid var(--color-base-200, #dfe7ed); padding-top: 1.25rem; }
.dark .onboarding-now { border-top-color: var(--color-base-800, #263a48); }
.onboarding-now h3 { font-size: 1rem; }
/* The order's own steps as a mini checklist; wraps on narrow screens. */
.onboarding-substeps {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem;
  list-style: none; margin: 0.5rem 0 1rem; padding: 0;
}
.onboarding-substep { align-items: center; display: flex; gap: 0.35rem; opacity: 0.75; }
.onboarding-substep .material-symbols-outlined { font-size: 1.1rem; }
.onboarding-substep.is-done { opacity: 1; }
.onboarding-substep.is-done .material-symbols-outlined { color: rgb(22 163 74); }
.onboarding-substep.is-current { font-weight: 600; opacity: 1; }
.onboarding-substep.is-current .material-symbols-outlined { color: var(--color-primary-600, #087f8c); }
.dark .onboarding-substep.is-current .material-symbols-outlined { color: var(--color-primary-500, #00dde0); }
@media (max-width: 640px) {
  .onboarding-substeps { flex-direction: column; }
}
.dashboard-bullets { list-style: disc; margin-inline-start: 1.5rem; }

/* Public legal pages (legal/document.html): the text, with the version
   history in a panel that slides in from the right (static/js/legal.js). */
/* Full page width, so the pill sits at the far right under the header;
   the text itself keeps a readable width. */
.legal-notice {
  max-width: 44rem;
}
.legal-title {
  font-family: "Sora", var(--font-sans, sans-serif);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-font-important-light, #0b1b26);
}
.dark .legal-title {
  color: var(--color-font-important-dark, #fff);
}
.legal-meta {
  margin: 0.5rem 0 1.5rem;
  color: var(--color-base-500, #6b7f8e);
}
.legal-notice {
  margin-bottom: 1.5rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid var(--color-primary-300, #8cc8ea);
  background: var(--color-primary-50, #eef7fd);
}
.dark .legal-notice {
  border-color: var(--color-primary-800, #1c4b66);
  background: transparent;
}
.legal-notice a,
.legal-prose a {
  color: var(--color-primary-600, #0b78b5);
  text-decoration: underline;
}
.dark .legal-notice a,
.dark .legal-prose a {
  color: var(--color-primary-400, #4fb0e5);
}
.legal-prose {
  line-height: 1.7;
  max-width: 44rem;
}
.legal-prose h1,
.legal-prose h2,
.legal-prose h3,
.legal-prose h4 {
  font-family: "Sora", var(--font-sans, sans-serif);
  font-weight: 600;
  line-height: 1.3;
  margin: 2rem 0 0.75rem;
  color: var(--color-font-important-light, #0b1b26);
  scroll-margin-top: 1rem;
}
.dark .legal-prose h1,
.dark .legal-prose h2,
.dark .legal-prose h3,
.dark .legal-prose h4 {
  color: var(--color-font-important-dark, #fff);
}
.legal-prose h1 { font-size: 1.5rem; }
.legal-prose h2 { font-size: 1.25rem; }
.legal-prose h3 { font-size: 1.075rem; }
.legal-prose h4 { font-size: 1rem; }
.legal-prose p,
.legal-prose ul,
.legal-prose ol,
.legal-prose blockquote {
  margin: 0 0 1rem;
}
.legal-prose ul {
  list-style: disc;
  margin-inline-start: 1.5rem;
}
.legal-prose ol {
  list-style: decimal;
  margin-inline-start: 1.5rem;
}
.legal-prose li {
  margin-bottom: 0.35rem;
}
.legal-prose blockquote {
  border-inline-start: 4px solid var(--color-primary-500, #1593d6);
  padding: 0.5rem 1rem;
  background: var(--color-base-50, #f5f8fa);
}
.dark .legal-prose blockquote {
  background: var(--color-base-800, #263a48);
}
.legal-prose blockquote p:last-child {
  margin-bottom: 0;
}
.legal-prose hr {
  margin: 2rem 0;
  border-color: var(--color-base-200, #dfe7ed);
}
.legal-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin: 0.5rem 0 1.5rem;
}
.legal-meta-row .legal-meta {
  margin: 0;
}
.legal-meta-actions {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
}
.legal-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--color-base-200, #dfe7ed);
  border-radius: 999px;
  background: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-base-700, #3a4d5b);
  cursor: pointer;
}
.legal-pill .material-symbols-outlined {
  font-size: 1.05rem;
}
.legal-pill:hover {
  border-color: var(--color-primary-600, #087f8c);
  color: var(--color-primary-600, #087f8c);
}
.legal-pill:focus-visible,
.legal-drawer-close:focus-visible,
.legal-history a:focus-visible {
  outline: 2px solid var(--color-primary-600, #087f8c);
  outline-offset: 2px;
}
.dark .legal-pill {
  border-color: var(--color-base-700, #3a4d5b);
  background: var(--color-base-900, #102431);
  color: var(--color-base-200, #dfe7ed);
}
.dark .legal-pill:hover {
  border-color: var(--color-primary-500, #00dde0);
  color: var(--color-primary-500, #00dde0);
}
/* The panel overlays the text (it doesn't push it); full width on phones. */
.legal-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgb(16 36 49 / 0.45);
}
.legal-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 61;
  display: flex;
  flex-direction: column;
  width: min(24rem, 100vw);
  padding: 1.25rem;
  overflow-y: auto;
  background: #fff;
  box-shadow: -12px 0 40px rgb(16 36 49 / 0.18);
}
.dark .legal-drawer {
  background: var(--color-base-900, #102431);
  box-shadow: -12px 0 40px rgb(0 0 0 / 0.45);
}
@media (max-width: 480px) {
  .legal-drawer {
    width: 100vw;
  }
}
.legal-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.legal-drawer-head h2 {
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--color-font-important-light, #0b1b26);
}
.dark .legal-drawer-head h2 {
  color: var(--color-font-important-dark, #fff);
}
.legal-drawer-close {
  display: inline-flex;
  padding: 0.25rem;
  border-radius: 999px;
  cursor: pointer;
  color: var(--color-base-500, #6b7f8e);
}
.legal-drawer-close:hover {
  color: var(--color-base-900, #102431);
  background: var(--color-base-100, #eef3f7);
}
.dark .legal-drawer-close:hover {
  color: #fff;
  background: var(--color-base-800, #263a48);
}
.legal-history ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.legal-history a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border-radius: 0.375rem;
}
.legal-history a:hover {
  background: var(--color-base-50, #f5f8fa);
}
.dark .legal-history a:hover {
  background: var(--color-base-800, #263a48);
}
.legal-history a.is-selected {
  font-weight: 600;
  background: var(--color-primary-50, #eef7fd);
  color: var(--color-primary-700, #0a6295);
}
.dark .legal-history a.is-selected {
  background: var(--color-base-800, #263a48);
  color: var(--color-primary-400, #4fb0e5);
}
.legal-badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  color: #166534;
  background: #dcfce7;
}
.legal-badge.is-upcoming {
  color: #854d0e;
  background: #fef9c3;
}
.legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.25rem;
  font-size: 0.875rem;
  color: var(--color-base-500, #6b7f8e);
}
.legal-links a:hover {
  text-decoration: underline;
}

/* The recurring-charge authorization under "What you pay today" (first order). */
.quote-authorization {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-base-200, #dfe7ed);
  font-size: 0.8125rem;
  line-height: 1.5;
}
.dark .quote-authorization {
  border-top-color: var(--color-base-800, #263a48);
}
.quote-authorization a {
  color: var(--color-primary-600, #0b78b5);
  text-decoration: underline;
}
.dark .quote-authorization a {
  color: var(--color-primary-400, #4fb0e5);
}

/* Footer on every signed-in page: the legal links, always visible. */
.dashboard-footer {
  border-top: 1px solid var(--color-base-200, #dfe7ed);
  padding: 1rem;
}
.dark .dashboard-footer {
  border-top-color: var(--color-base-800, #263a48);
}
/* Signed-in pages: the partnership on the left, the legal links on the
   right; stacked and centered on phones. */
.dashboard-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
}
.dashboard-footer .partnership {
  font-size: 0.875rem;
  color: var(--color-base-500, #6b7f8e);
}
.dashboard-footer .partnership a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dashboard-footer .partnership a:hover {
  color: var(--color-primary-600, #087f8c);
}
.dark .dashboard-footer .partnership a:hover {
  color: var(--color-primary-500, #00dde0);
}
.dashboard-footer .legal-links {
  justify-content: flex-end;
}
@media (max-width: 640px) {
  .dashboard-footer {
    flex-direction: column;
    text-align: center;
  }
  .dashboard-footer .legal-links {
    justify-content: center;
  }
}

/* Home while onboarding isn't done: a banner back to Getting started. */
.onboarding-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 1.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid rgb(8 127 140 / 0.3);
  border-radius: var(--border-radius, 6px);
  background: rgb(8 127 140 / 0.08);
  color: var(--color-base-700, #3a4d5b);
}
.onboarding-banner .material-symbols-outlined {
  color: var(--color-primary-600, #087f8c);
}
.onboarding-banner a {
  margin-left: auto;
  font-weight: 600;
  color: var(--color-primary-600, #087f8c);
}
.dark .onboarding-banner {
  border-color: rgb(0 221 224 / 0.25);
  background: rgb(0 221 224 / 0.08);
  color: var(--color-base-200, #dfe7ed);
}
.dark .onboarding-banner .material-symbols-outlined,
.dark .onboarding-banner a {
  color: var(--color-primary-500, #00dde0);
}

/* Order forms (dashboard/includes/order_form.html): sections in cards, the
   live quote sticky beside them on desktop. Unfold's prebuilt CSS lacks some
   grid utilities, so the layout is here. */
.order-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}
.order-aside {
  position: sticky;
  top: 1.5rem;
}
@media (max-width: 1023px) {
  .order-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .order-aside {
    position: static;
  }
}
.order-field {
  margin: 0 0 1.5rem;
  padding: 0;
  border: 0;
  min-width: 0;
}
.order-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-font-important-light, #0b1b26);
}
.dark .order-label {
  color: var(--color-font-important-dark, #fff);
}
.order-help {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--color-base-500, #687d8c);
}
.order-error {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: #dc2626;
}
/* Headsets stepper */
.order-stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--color-base-200, #dfe7ed);
  border-radius: var(--border-radius, 6px);
  overflow: hidden;
  box-shadow: 0 1px 2px rgb(0 0 0 / 5%);
}
.dark .order-stepper {
  border-color: var(--color-base-700, #3a4d5b);
}
.order-stepper-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  cursor: pointer;
  color: var(--color-base-600, #4d6170);
  background: var(--color-base-50, #f7fafc);
}
.order-stepper-button:hover {
  color: var(--color-primary-600, #087f8c);
  background: var(--color-base-100, #eef3f7);
}
.dark .order-stepper-button {
  color: var(--color-base-300, #c5d2db);
  background: var(--color-base-800, #263a48);
}
.dark .order-stepper-button:hover {
  color: var(--color-primary-500, #00dde0);
}
.order-stepper-input {
  width: 4rem;
  border: 0;
  border-inline: 1px solid var(--color-base-200, #dfe7ed);
  text-align: center;
  font-weight: 600;
  font-size: 1rem;
  padding: 0.5rem 0;
  background: #fff;
  color: var(--color-base-900, #102431);
  -moz-appearance: textfield;
}
.order-stepper-input::-webkit-outer-spin-button,
.order-stepper-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.dark .order-stepper-input {
  border-color: var(--color-base-700, #3a4d5b);
  background: var(--color-base-900, #102431);
  color: var(--color-base-100, #eef3f7);
}
.order-stepper :focus-visible {
  outline: 2px solid var(--color-primary-600, #087f8c);
  outline-offset: -2px;
}
/* Customer type radio cards (first order): the pack card look, wider. */
.order-types {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.75rem;
}
.order-type-name {
  font-family: "Sora", var(--font-sans), sans-serif;
  font-weight: 600;
  color: var(--color-font-important-light, #0b1b26);
  margin-bottom: 0.375rem;
}
.dark .order-type-name {
  color: var(--color-font-important-dark, #fff);
}
.order-type-description {
  font-size: 0.8125rem;
  color: var(--color-base-500, #687d8c);
}
/* Examples: a labeled row of tags under the description, pinned to the
   bottom so the cards line up. */
.order-type-examples {
  display: block;
  margin-top: auto;
  padding-top: 0.75rem;
}
.order-type-examples-label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-base-500, #687d8c);
}
.order-type-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.order-type-tag {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  line-height: 1.25rem;
  color: var(--color-primary-700, #066a75);
  background: rgb(8 127 140 / 0.08);
  border: 1px solid rgb(8 127 140 / 0.2);
}
.dark .order-type-tag {
  color: var(--color-primary-400, #5ee9eb);
  background: rgb(0 221 224 / 0.08);
  border-color: rgb(0 221 224 / 0.25);
}
.order-pack input:checked + .order-pack-body .order-type-tag {
  background: rgb(8 127 140 / 0.14);
  border-color: rgb(8 127 140 / 0.35);
}
.dark .order-pack input:checked + .order-pack-body .order-type-tag {
  background: rgb(0 221 224 / 0.14);
  border-color: rgb(0 221 224 / 0.4);
}
/* Play pack radio cards */
.order-packs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.75rem;
}
@media (max-width: 640px) {
  .order-packs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.order-pack {
  position: relative;
  cursor: pointer;
}
.order-pack input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}
.order-pack-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0.875rem 1rem;
  border: 1px solid var(--color-base-200, #dfe7ed);
  border-radius: var(--border-radius, 6px);
  background: #fff;
}
.dark .order-pack-body {
  border-color: var(--color-base-700, #3a4d5b);
  background: var(--color-base-900, #102431);
}
.order-pack:hover .order-pack-body {
  border-color: var(--color-primary-600, #087f8c);
}
.order-pack input:checked + .order-pack-body {
  border-color: var(--color-primary-600, #087f8c);
  box-shadow: 0 0 0 1px var(--color-primary-600, #087f8c);
  background: rgb(8 127 140 / 0.06);
}
.dark .order-pack input:checked + .order-pack-body {
  border-color: var(--color-primary-500, #00dde0);
  box-shadow: 0 0 0 1px var(--color-primary-500, #00dde0);
  background: rgb(0 221 224 / 0.08);
}
.order-pack input:focus-visible + .order-pack-body {
  outline: 2px solid var(--color-primary-600, #087f8c);
  outline-offset: 2px;
}
.order-pack-plays {
  font-family: "Sora", var(--font-sans), sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-font-important-light, #0b1b26);
}
.dark .order-pack-plays {
  color: var(--color-font-important-dark, #fff);
}
.order-pack-unit {
  font-size: 0.75rem;
  color: var(--color-base-500, #687d8c);
  margin-bottom: 0.5rem;
}
.order-pack-price {
  font-weight: 600;
  color: var(--color-font-important-light, #0b1b26);
}
.dark .order-pack-price {
  color: var(--color-font-important-dark, #fff);
}
.order-pack-per {
  font-size: 0.8125rem;
  color: var(--color-base-500, #687d8c);
}
.order-pack-badge {
  align-self: flex-start;
  margin-top: 0.5rem;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #5b4cd6;
  background: rgb(139 124 248 / 0.14);
}
.dark .order-pack-badge {
  color: #c4bcff;
  background: rgb(139 124 248 / 0.2);
}
/* Promo code: a small inline field behind "Have a promo code?" */
.order-promo summary {
  display: inline-block;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary-600, #087f8c);
}
.dark .order-promo summary {
  color: var(--color-primary-500, #00dde0);
}
.order-promo-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  max-width: 24rem;
}
.order-promo-input {
  text-transform: uppercase;
}
.order-button-secondary {
  flex: none;
  padding: 0 1rem;
  border: 1px solid var(--color-base-200, #dfe7ed);
  border-radius: var(--border-radius, 6px);
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  color: var(--color-base-700, #3a4d5b);
  background: #fff;
}
.order-button-secondary:hover {
  border-color: var(--color-primary-600, #087f8c);
  color: var(--color-primary-600, #087f8c);
}
.dark .order-button-secondary {
  border-color: var(--color-base-700, #3a4d5b);
  color: var(--color-base-200, #dfe7ed);
  background: var(--color-base-900, #102431);
}
/* Shipping: a grid of fields; one column on phones. */
.order-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: 1rem;
}
.order-col-full { grid-column: span 6; }
.order-col-half { grid-column: span 3; }
.order-col-third { grid-column: span 2; }
@media (max-width: 640px) {
  .order-col-full,
  .order-col-half,
  .order-col-third {
    grid-column: span 6;
  }
}
.order-grid .max-w-2xl {
  max-width: none;
}
/* Submit: the agreement and the button, aligned with the cards. */
.order-submit {
  padding: 0 0.25rem;
}
@media (max-width: 640px) {
  .order-submit-button {
    width: 100%;
  }
}
/* Address search (static/js/addresses-google.js): our own input, styled
   like the other Unfold inputs, with a magnifier and a suggestions list. */
.address-search {
  margin-bottom: 1.25rem;
}
.address-search-field {
  position: relative;
}
.address-search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  translate: 0 -50%;
  font-size: 1.25rem;
  color: var(--color-base-400, #93a6b4);
  pointer-events: none;
}
.address-search-input.address-search-input {
  padding-left: 2.5rem;
  max-width: none;
  width: 100%;
}
.address-suggestions {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: calc(100% + 0.25rem);
  max-height: 18rem;
  overflow-y: auto;
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  border: 1px solid var(--color-base-200, #dfe7ed);
  border-radius: var(--border-radius, 6px);
  background: #fff;
  box-shadow: 0 10px 30px -10px rgb(16 36 49 / 0.25);
}
.dark .address-suggestions {
  border-color: var(--color-base-700, #3a4d5b);
  background: var(--color-base-900, #102431);
  box-shadow: 0 10px 30px -10px rgb(0 0 0 / 0.6);
}
.address-suggestions [role="option"] {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0.75rem;
  border-radius: calc(var(--border-radius, 6px) - 2px);
  cursor: pointer;
}
.address-suggestions [role="option"]:hover,
.address-suggestions [role="option"][aria-selected="true"] {
  background: var(--color-base-100, #eef3f7);
}
.dark .address-suggestions [role="option"]:hover,
.dark .address-suggestions [role="option"][aria-selected="true"] {
  background: var(--color-base-800, #263a48);
}
.address-suggestion-main {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-font-important-light, #0b1b26);
}
.dark .address-suggestion-main {
  color: var(--color-font-important-dark, #fff);
}
.address-suggestion-secondary {
  font-size: 0.8125rem;
  color: var(--color-base-500, #687d8c);
}
.address-suggestions-attribution {
  padding: 0.375rem 0.75rem 0.25rem;
  text-align: right;
  font-size: 0.6875rem;
  color: var(--color-base-400, #93a6b4);
}

/* A small pill on the right of a card's title bar (e.g. Credits never
   expire), sized like the widget timing chips. */
.card-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.0625rem 0.5rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--color-primary-700, #076a75);
  background: rgb(8 127 140 / 0.12);
}
.card-pill .material-symbols-outlined {
  font-size: 0.875rem;
}
.dark .card-pill {
  color: var(--color-primary-400, #2ce4e7);
  background: rgb(0 221 224 / 0.14);
}
.order-pack-name {
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary-600, #087f8c);
}
.dark .order-pack-name {
  color: var(--color-primary-500, #00dde0);
}

/* Selects on dashboard and account forms (unfold_field): the same inset
   caret as the dashboard filters (css/stats.css). */
select.dashboard-select {
  appearance: none;
  padding-right: 2.5rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23687d8c'%3E%3Cpath d='M5.3 7.3a1 1 0 0 1 1.4 0L10 10.6l3.3-3.3a1 1 0 1 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.1rem;
}
.dark select.dashboard-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2393a6b4'%3E%3Cpath d='M5.3 7.3a1 1 0 0 1 1.4 0L10 10.6l3.3-3.3a1 1 0 1 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E");
}