@import url(https://fonts.googleapis.com/css?family=Nunito:300,400,600,700);
@import url(https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=JetBrains+Mono:wght@400;500&display=swap);
/* Checkout v2 redesign type: DM Sans (headings/body) + JetBrains Mono (prices). */

html {
  min-height: 100vh;
}

body {
  font-family: Nunito, sans-serif;
  min-height: 100vh;
  padding-bottom: 15px;
}

.brand-link:hover {
  text-decoration: none;
}
.brand-mark {
  height: 34px;
  width: auto;
}
.brand-wordmark {
  margin-left: .45rem;
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: -.005em;
  color: #4d4d4d;
}
[data-theme="dark"] .brand-wordmark {
  color: #ffffff;
}

.icon_user {
  color: red;
  width: 35px;
  height: 35px;
  margin: 0 0 0 5px;
  cursor: pointer;
  opacity: .5;
}

.profile {
  align-items: center;
  flex-direction: row-reverse;
  justify-content: flex-end;
  position: relative;
  margin: 0 5px 0 0;
}

.profile__menu {
  display: flex;
  justify-content: center;
}

.profile__email {
  margin: auto;
}

.profile__button {
  background-color: #555;
  color: #d7d7d7;
  padding: 10px;
}

.profile__button a {
  color: #d7d7d7;
}

.profile__button:hover {
  background-color: #828282;
}

.profile__controls {
  background-color: #555;
  -webkit-box-shadow: 0px 4px 3px 4px rgba(0, 0, 0, 0.46);
  box-shadow: 0px 4px 3px 4px rgba(0, 0, 0, 0.46);
  border-top: none;
  width: 150px;
  z-index: 3;
  position: absolute;
  display: none;
  top: 35px;
  right: 0;
}

.profile__controls.active {
  display: flex;
}

.profile__image {
  font-size: 30px;
  margin: auto 5px;
  cursor: pointer;
  opacity: 0.5;
}

.profile__image#dropdownMenuButton {
  opacity: 1;
}

.profile img {
  padding: 0 10px;
  cursor: pointer;
  width: 55px;
}

tr[data-link] {
  cursor: pointer;
}

.api-key-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.no-filter-control {
  height: 0
}

.fht-cell .filter-control select {
  width: auto !important;
  margin: 0 auto;
}

.is-archived {
  color: darkgrey;
}

.is-points-consumed {
  color: #b58a00 !important;
}

.is-spent {
  color: #d98125 !important;
}

.is_permanent {
  color: #6c1c44 !important;
}

.is-blocked {
  color: #c0392b !important;
}

.is-active {
  color: #2b8f99 !important;
}

.is-paid {
  color: #6c1c44 !important;
}

.is-temporary {
  color: #3db3bf;
}

.is-permanent {
  color: inherit;
}

.is-common {
  color: inherit;
}

.bootstrap-table .fixed-table-container .table td {
  white-space: nowrap;
}

/* Plan / product cards. Shared by the plan gallery (.upgrade-page) and the
   payment pages (.plan-deck). Surfaces/text/borders use the shared theme tokens
   (var(--bq-*)) so the cards re-theme in dark mode; the indigo plan accent and
   the check-badge fill are brightened for dark via the override block below. */
.upgrade-page,
.plan-deck {
  --plan-accent: #5b6ef5;
  --plan-accent-strong: #4c5bd4;
  --plan-check-bg: #eef0ff;
  --plan-enterprise-bg: linear-gradient(160deg, #f7f8ff 0%, #ffffff 60%);
  --plan-enterprise-border: #d7dbff;
}
[data-theme="dark"] .upgrade-page,
[data-theme="dark"] .plan-deck {
  --plan-accent: #9aa6ff;
  --plan-accent-strong: #7c8cff;
  --plan-check-bg: rgba(123, 138, 245, 0.18);
  --plan-enterprise-bg: linear-gradient(160deg, var(--bq-surface-2) 0%, var(--bq-surface) 60%);
  --plan-enterprise-border: rgba(123, 138, 245, 0.4);
}

.upgrade-page { padding: 0 0 3rem; }

.plan-grid,
.plan-deck {
  display: grid;
  gap: 1.5rem;
  align-items: stretch;
}
/* Gallery: a handful of plans stretch to fill the row. */
.plan-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
/* Payment page: usually one or two owned products — keep them at a fixed card
   width (left-aligned, wrapping) instead of stretching across the page. */
.plan-deck {
  grid-template-columns: repeat(auto-fill, minmax(280px, 345px));
}

.plan-card {
  display: flex;
  flex-direction: column;
  background: var(--bq-surface);
  color: var(--bq-text);
  border: 1px solid var(--bq-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--bq-shadow-lg);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.plan-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
  border-color: var(--plan-accent);
}

.plan-card__header {
  padding: 1.75rem 1.5rem 1.25rem;
  border-bottom: 1px solid var(--bq-border);
}
.plan-card__name { font-size: 1.25rem; font-weight: 600; margin: 0; }
.plan-card__qty {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--plan-accent, #4f46e5);
  background: var(--plan-check-bg, rgba(79, 70, 229, 0.1));
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
  vertical-align: middle;
}
.plan-card__price { margin-top: 0.75rem; display: flex; align-items: baseline; }
.plan-card__price-amount { font-size: 2.25rem; font-weight: 800; line-height: 1; }
.plan-card__price-custom { font-size: 2rem; font-weight: 800; color: var(--plan-accent-strong); }
.plan-card__price-period { color: var(--bq-text-muted); margin-left: 0.35rem; font-weight: 500; }
.plan-card__tagline { color: var(--bq-text-muted); font-size: 0.85rem; margin: 0.6rem 0 0; }

.plan-card__body { padding: 1.25rem 1.5rem; flex: 1 1 auto; }
.plan-features { list-style: none; padding: 0; margin: 0; }
.plan-features li {
  display: flex;
  align-items: center;
  padding: 0.55rem 0;
  font-size: 0.92rem;
  color: var(--bq-text);
  border-bottom: 1px solid var(--bq-border);
}
.plan-features li:last-child { border-bottom: none; }
/* Wrap the check in a real <span> badge: FontAwesome's SVG-with-JS mode
   swaps <i> for <svg>, so styling the icon element directly is unreliable.
   The span isn't swapped, so the circle + spacing always apply. */
.plan-features__check {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-right: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--plan-check-bg);
  border-radius: 50%;
  color: var(--plan-accent);
}
.plan-features__check i,
.plan-features__check svg { font-size: 0.7rem; width: 0.7rem; height: 0.7rem; }
.plan-features__label { line-height: 1.25; }
.plan-features .plan-features__value {
  margin-left: auto;
  padding-left: 1rem;
  font-weight: 600;
  color: var(--bq-text);
  white-space: nowrap;
}
/* One purchased product per line (name × qty), right-aligned in the value cell. */
.plan-features .plan-features__value--stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
}
.product-line { white-space: nowrap; }

.plan-card__footer { padding: 0 1.5rem 1.75rem; }
.plan-btn { font-weight: 600; border-radius: 9px; padding: 0.6rem 1rem; }
.plan-btn--primary {
  color: #fff;
  background: linear-gradient(135deg, #5b6ef5 0%, #4c5bd4 100%);
  border: none;
}
.plan-btn--primary:hover { filter: brightness(1.05); color: #fff; }
.plan-btn--current {
  color: #fff;
  background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
  border: none;
}
.plan-btn--current:hover { filter: brightness(1.05); color: #fff; }
.plan-btn--enterprise {
  color: var(--plan-accent-strong);
  background: transparent;
  border: 1.5px solid var(--plan-accent-strong);
}
.plan-btn--enterprise:hover { background: var(--plan-accent-strong); color: #fff; }

.plan-card--enterprise {
  background: var(--plan-enterprise-bg);
  border-color: var(--plan-enterprise-border);
}

/* Payment page: full-width panels (e.g. Billing Periods) that sit below the
   card grid. Same surface / border / radius / shadow as .plan-card so the whole
   page reads as one family of cards. */
.pay-panel {
  background: var(--bq-surface);
  color: var(--bq-text);
  border: 1px solid var(--bq-border);
  border-radius: 14px;
  box-shadow: var(--bq-shadow-lg);
  overflow: hidden;
}
.pay-panel__header {
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--bq-border);
  font-size: 1.25rem;
  font-weight: 600;
}
/* Let a <strong> title (active-period panel) inherit the header weight instead
   of the browser-default bold, so all panel captions match. */
.pay-panel__header strong { font-weight: inherit; }
.pay-panel__body { padding: 1.25rem 1.5rem; }
/* Full-width sub-section label inside a pay-panel (e.g. the Products breakdown
   in the subscription card). */
.pay-panel__section {
  padding: 0.85rem 1.5rem 0.35rem;
  border-top: 1px solid var(--bq-border);
  font-weight: 600;
}
.pay-panel__footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--bq-border);
  display: flex;
  justify-content: center;
}
.pay-panel .table { margin: 0; color: var(--bq-text); }
.pay-panel .table th { border-top: none; font-weight: 600; color: var(--bq-text-muted); }
/* Align table cells with the header's horizontal padding so the first column
   isn't flush against the panel edge. */
.pay-panel .table th,
.pay-panel .table td { padding: 0.6rem 0.75rem; vertical-align: middle; }
.pay-panel .table th:first-child,
.pay-panel .table td:first-child { padding-left: 1.5rem; }
.pay-panel .table th:last-child,
.pay-panel .table td:last-child { padding-right: 1.5rem; }
/* Download control inside a plan-card feature row (Documents panel). */
.plan-features__value .btn { white-space: nowrap; }

.upgrade-footnote { margin-top: 2rem; }

/* Monthly / Annual interval toggle on the plan gallery (Step 1). */
.interval-toggle .btn { font-weight: 600; }
.interval-toggle__save { color: #1f9d55; font-weight: 700; }
.interval-toggle .btn.active .interval-toggle__save { color: #fff; }

/* Annual price: original monthly struck through, plus the billed-annually note. */
.plan-card__price-was {
  text-decoration: line-through;
  color: var(--bq-text-muted);
  font-size: 1.25rem;
  font-weight: 600;
  margin-right: 0.5rem;
  align-self: center;
}
.plan-card__billed { color: var(--bq-text-muted); font-size: 0.8rem; margin-top: 0.35rem; }

/* Current-plan card + badge (shown to subscribed buyers). */
.plan-card--current { border-color: var(--plan-accent-strong); box-shadow: 0 0 0 1px var(--plan-accent-strong) inset; }
/* Plan already scheduled for the next renewal (pending downgrade). Distinct
   from the current-plan accent so the two markers don't read as the same. */
.plan-card--scheduled { border-color: #1f9d55; box-shadow: 0 0 0 1px #1f9d55 inset; }
.plan-card__badge--scheduled { background: #1f9d55; }
.plan-card__badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--plan-accent-strong);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  margin-bottom: 0.5rem;
}
.plan-card__discount {
  font-size: 0.75rem;
  font-weight: 700;
  color: #1f9d55;
  margin-left: 0.5rem;
  align-self: center;
}
.plan-btn--outline {
  color: var(--bq-text-muted);
  background: transparent;
  border: 1.5px solid var(--bq-border, #ccc);
}
.plan-btn--outline:hover { background: rgba(0, 0, 0, 0.04); }

/* Add-ons step (Step 2). */
.addons-plan-summary {
  padding: 0.75rem 1rem;
  border-radius: 10px;
  background: rgba(91, 110, 245, 0.06);
}
.addons-list { display: flex; flex-direction: column; gap: 0.75rem; max-width: 720px; }
.addon-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin: 0;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--bq-border, #e3e3e3);
  border-radius: 10px;
  cursor: pointer;
}
.addon-row__info { flex: 1 1 auto; }
.addon-row__name { font-weight: 600; display: block; }
.addon-row__badge {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #0d9488;
  background: rgba(20, 184, 166, 0.12);
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  vertical-align: middle;
}
.addon-row__meta { color: var(--bq-text-muted); font-size: 0.85rem; }
.addon-row__features {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1.25rem;
  font-size: 0.85rem;
}
.addon-row__features li { display: flex; align-items: baseline; gap: 0.35rem; }
.addon-row__feature-label { color: var(--bq-text-muted); }
.addon-row__feature-value { font-weight: 600; }
.addon-row__controls { display: flex; gap: 0.5rem; align-items: center; }
.addon-row__controls--right { flex-direction: column; align-items: flex-end; gap: 0.35rem; }
.addon-row__check { width: 18px; height: 18px; cursor: pointer; margin-top: 0.15rem; }
.addon-row__qty { width: 80px; }
.addon-row__total { font-weight: 600; white-space: nowrap; }
.addon-row--selected { border-color: var(--bq-primary, #c13a5c); }

.order-summary {
  max-width: 720px;
  padding: 1rem 1.25rem;
  border: 1px solid var(--bq-border, #e3e3e3);
  border-radius: 10px;
  background: var(--bq-surface-2, rgba(0, 0, 0, 0.02));
}
.order-summary__title { font-weight: 700; margin-bottom: 0.6rem; }
.order-summary__note { padding: 0.3rem 0 0.5rem; font-size: 0.9rem; }
.order-summary__fineprint { font-size: 0.8rem; line-height: 1.35; }
.order-summary__line {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.3rem 0;
}
.order-summary__line--total {
  margin-top: 0.4rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--bq-border, #e3e3e3);
  font-weight: 700;
  font-size: 1.05rem;
}
.addons-actions { display: flex; gap: 0.75rem; max-width: 720px; }

.license-card {
  min-width: 300px;
  max-width: 600px;
}

.license-card tbody :nth-child(1) td {
  border-top: none;
}

.coin-image, .card-image {
  width: auto;
  height: 30px;
  margin-right: 5px;
}

.row--active {
  background: rgba(61, 179, 191, .10);
  box-shadow: inset 3px 0 0 var(--bq-teal, #3db3bf);
}

.row--archived {
  background: rgba(0, 0, 0, 0.03);
  color: var(--bq-text-muted, #6b7280);
}

a.sort_link {
  color: black !important;
}

a.sort_link:hover {
  text-decoration: none;
}

.table-header {
  display: flex;
  align-items: center;
  vertical-align: middle;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}

.table-header .th-inner {
  display: block;
  padding: 0.75rem;
  vertical-align: bottom;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

.table-header .th-inner--pre {
  white-space: pre;
}

.table-header .th-inner.sortable {
  cursor: pointer;
  background-position: right;
  background-repeat: no-repeat;
  padding-right: 30px !important;
}

.table-header .sort_link {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAQAAADYWf5HAAAAkElEQVQoz7X QMQ5AQBCF4dWQSJxC5wwax1Cq1e7BAdxD5SL+Tq/QCM1oNiJidwox0355mXnG/DrEtIQ6azioNZQxI0ykPhTQIwhCR+BmBYtlK7kLJYwWCcJA9M4qdrZrd8pPjZWPtOqdRQy320YSV17OatFC4euts6z39GYMKRPCTKY9UnPQ6P+GtMRfGtPnBCiqhAeJPmkqAAAAAElFTkSuQmCC");
}

.table-header .sort_link.asc {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAZ0lEQVQ4y2NgGLKgquEuFxBPAGI2ahhWCsS/gDibUoO0gPgxEP8H4ttArEyuQYxAPBdqEAxPBImTY5gjEL9DM+wTENuQahAvEO9DMwiGdwAxOymGJQLxTyD+jgWDxCMZRsEoGAVoAADeemwtPcZI2wAAAABJRU5ErkJggg==);
}

.table-header .sort_link.desc {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAZUlEQVQ4y2NgGAWjYBSggaqGu5FA/BOIv2PBIPFEUgxjB+IdQPwfC94HxLykus4GiD+hGfQOiB3J8SojEE9EM2wuSJzcsFMG4ttQgx4DsRalkZENxL+AuJQaMcsGxBOAmGvopk8AVz1sLZgg0bsAAAAASUVORK5CYII=);
}

input[type=checkbox] {
  cursor: pointer;
}

.table thead th {
  vertical-align: middle;
  white-space: nowrap;
}

.table tbody td {
  vertical-align: middle;
  white-space: nowrap;
}

.plus-button {
  font-size: 12px;
  line-height: 12px;
  padding: 2px 2px;
}

.minus-button {
  font-size: 12px;
  padding: 2px 12px;
}

.invalid {
  border-color: red;
  color: red;
}

.dashed {
  color: #007bff;
  text-underline: #007bff;
  text-decoration: underline;
  text-decoration-style: dashed;
  cursor: pointer;
}

.is-gray {
  background-color: gray !important;
}

.is-red {
  background-color: red !important;
}

.is-orange {
  background-color: orange !important;
}

.is-green {
  background-color: limegreen !important;
}

.system-status {
  position: relative;
  font-size: 16px;
  color: #ffffff;
  top: -2px;
}

.table tbody td.blockchains {
  vertical-align: middle;
  white-space: unset;
}

.tooltip {
  position: absolute;
  border: none !important;
  border-radius: 5px !important;
  padding: 6px !important;
  background: none !important;
  pointer-events: none !important;
}

.tooltip .tooltip-inner {
  text-align: left;
  max-width: 700px !important;
}

.tr-no-borders th,
.tr-no-borders td {
  border: none;
}

.accordion-btn:focus {
  box-shadow: none;
  text-decoration: none;
}

.pre-wrapped {
  white-space: pre-wrap;
}

.wrapper-30 {
  position: absolute;
  top: 30%;
}

.wrapper-20 {
  position: absolute;
  top: 20%;
}

/* The .wrapper-20/.wrapper-30 absolute positioning is meant for standalone,
   vertically-centered auth screens (login, password reset, 2FA, …) that render
   without a page caption. Inside the admin layout these forms sit in a
   .container-fluid below an <h3> page caption, where absolute positioning yanks
   them out of flow and overlaps the heading. Reset to normal flow there. */
.container-fluid .wrapper-20,
.container-fluid .wrapper-30 {
  position: static;
  top: auto;
}

.text-pink {
  color: #e83e8c
}

.c-badge {
  padding: 0.5em 1.2em;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
  font-size: 45%;
  background: linear-gradient(90deg, #6c1c44, #3db3bf);
  color: white;
}

.hubspot-btn-outline {
  border-color: #CA3568;
  color: #CA3568;
  font-family: helvetica, sans-serif;
  margin: 0;
  cursor: pointer;
  display: inline-block;
  font-weight: 700;
  line-height: 12px;
  position: relative;
  text-align: center;
  transition: all .15s linear;
  border-radius: 3px;
  border-style: solid;
  border-width: 1px;
  font-size: 14px;
  padding: 12px 24px;
}

.fz-16 {
  font-size: 16px;
}

.fz-14 {
  font-size: 14px;
}

.fz-12 {
  font-size: 12px;
}

.fz-10 {
  font-size: 10px;
}

/* -------- Bitquery IDE-aligned theme --------
   Light + dark themes switch on the `data-theme` attribute set on <html> by the
   shared theme controller (app/javascript/theme.js + inline apply in
   shared/_head.html.erb). The choice is persisted in the `bq-theme` cookie that
   is shared across *.bitquery.io, so it stays in sync with the IDE and other
   Bitquery apps. Components reference the var(--bq-*) tokens below, so the whole
   UI re-themes by flipping one attribute. */
:root,
[data-theme="light"] {
  color-scheme: light; /* native controls (selects, scrollbars, inputs) render light */
  --bq-pink:        #CA3568;
  --bq-pink-dark:   #A82755;
  --bq-burgundy:    #6c1c44;
  --bq-teal:        #3db3bf;
  --bq-teal-dark:   #2b8f99;
  --bq-yellow:      #ffd500;
  --bq-surface:     #ffffff; /* cards, header, dropdowns, inputs */
  --bq-surface-2:   #fafbfd; /* card headers/footers, subtle strips */
  --bq-surface-3:   #f1f3f7; /* hover strips */
  --bq-bg:          #f7f8fa; /* page background */
  --bq-border:      #e3e6eb;
  --bq-text:        #1f2330;
  --bq-text-muted:  #6b7280;
  --bq-link:        var(--bq-pink);
  --bq-focus-ring:  rgba(202, 53, 104, .25); /* brand focus glow (matches --bq-pink) */
  --bq-code-bg:     #f5eef3;
  --bq-code-text:   var(--bq-burgundy);
  --bq-muted-bg:    #eef0f4; /* progress track, muted badges */
  --bq-row-hover:   rgba(61, 179, 191, .06);
  --bq-shadow:      0 1px 2px rgba(20, 24, 40, .04), 0 1px 3px rgba(20, 24, 40, .06);
  --bq-shadow-lg:   0 4px 14px rgba(20, 24, 40, .08);
}

/* Bitquery brand dark theme — matches the IDE / bitquery.io: near-black
   surfaces, teal accents, magenta CTA. */
[data-theme="dark"] {
  color-scheme: dark; /* native controls (selects, scrollbars, inputs) render dark */
  --bq-pink:        #d8537e; /* brighter magenta for contrast on dark */
  --bq-pink-dark:   #b42d5b;
  --bq-burgundy:    #e25284;
  --bq-teal:        #3db3bf;
  --bq-teal-dark:   #aee0e5;
  --bq-yellow:      #ffd500;
  --bq-surface:     #0b0f16; /* cards, header, dropdowns, inputs */
  --bq-surface-2:   #11151c; /* card headers/footers, subtle strips */
  --bq-surface-3:   #191d26; /* hover strips */
  --bq-bg:          #06090d; /* page background */
  --bq-border:      #1b1f2b;
  --bq-text:        #c3cad6;
  --bq-text-muted:  #7e8696;
  --bq-link:        #d8537e;
  --bq-focus-ring:  rgba(216, 83, 126, .35); /* brand focus glow (matches --bq-pink) */
  --bq-code-bg:     #191d26;
  --bq-code-text:   #e25284;
  --bq-muted-bg:    #191d26;
  --bq-row-hover:   rgba(61, 179, 191, .10);
  --bq-shadow:      0 1px 2px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .5);
  --bq-shadow-lg:   0 4px 14px rgba(0, 0, 0, .55);
}

body {
  background-color: var(--bq-bg);
  color: var(--bq-text);
}

.header.border-bottom {
  background-color: var(--bq-surface);
  border-bottom: 1px solid var(--bq-border) !important;
  box-shadow: var(--bq-shadow);
}

/* Links — use Bitquery pink */
a { color: var(--bq-pink); }
a:hover { color: var(--bq-pink-dark); }

/* Kill Bootstrap's blue focus glow on every button (and the focusable chrome
   that reuses it) — each Bootstrap variant ships its own blue ring, so override
   them all with the brand glow regardless of state. */
.btn:focus,
.btn.focus,
.btn:not(:disabled):not(.disabled):active:focus,
.btn:not(:disabled):not(.disabled).active:focus,
.page-link:focus,
.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem var(--bq-focus-ring) !important;
}

/* Primary button */
.btn-primary {
  background-color: var(--bq-pink);
  border-color: var(--bq-pink);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--bq-pink-dark);
  border-color: var(--bq-pink-dark);
  box-shadow: 0 0 0 0.2rem rgba(202, 53, 104, .20);
}

.btn-outline-primary {
  color: var(--bq-pink);
  border-color: var(--bq-pink);
}
.btn-outline-primary:hover {
  background-color: var(--bq-pink);
  border-color: var(--bq-pink);
  color: #fff;
}
/* Bootstrap leaves the selected (.active) / pressed (:active) outline button on
   its default primary blue, which clashes with the brand. Keep the active state
   on brand pink too — e.g. the My-queries/Whole-team scope toggle. */
.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active {
  background-color: var(--bq-pink);
  border-color: var(--bq-pink);
  color: #fff;
}

/* Link-styled buttons (e.g. the accordion "Last time at …" toggles) default to
   Bootstrap's primary blue; use the themed brand link colour instead. */
.btn-link {
  color: var(--bq-link);
}
.btn-link:hover,
.btn-link:focus {
  color: var(--bq-link);
}

/* Cards — cleaner, slightly rounded */
.card {
  background-color: var(--bq-surface);
  color: var(--bq-text);
  border: 1px solid var(--bq-border);
  border-radius: 8px;
  box-shadow: var(--bq-shadow);
}
.card-header {
  background-color: var(--bq-surface-2);
  border-bottom: 1px solid var(--bq-border);
  font-weight: 600;
}
.card-footer {
  background-color: var(--bq-surface-2);
  border-top: 1px solid var(--bq-border);
}

/* Nav tabs — underline-style active */
.nav-tabs {
  border-bottom: 1px solid var(--bq-border);
}
.nav-tabs .nav-link {
  color: var(--bq-text-muted);
  border: none;
  border-bottom: 2px solid transparent;
  padding: .6rem 1rem;
  font-weight: 500;
}
.nav-tabs .nav-link:hover {
  color: var(--bq-text);
  border-bottom-color: var(--bq-border);
  background: transparent;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--bq-pink);
  background: transparent;
  border-color: transparent transparent var(--bq-pink);
}

/* Dropdown menu consistency */
.dropdown-menu {
  border: 1px solid var(--bq-border);
  box-shadow: var(--bq-shadow-lg);
  border-radius: 8px;
}
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--bq-pink);
}

/* Tables */
.table {
  color: var(--bq-text);
}
.table thead th {
  border-bottom: 2px solid var(--bq-border);
  color: var(--bq-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: .02em;
}
.table td, .table th {
  border-top: 1px solid var(--bq-border);
}
.table-hover tbody tr:hover {
  background-color: var(--bq-row-hover);
  /* Bootstrap's .table-hover also forces color:#212529 on hover, which is
     invisible on dark surfaces — keep the themed text colour instead. */
  color: var(--bq-text);
}

/* Alerts — softer tints */
.alert-primary {
  background-color: #fde8ef;
  border-color: #f8c9d9;
  color: var(--bq-burgundy);
}
.alert-info {
  background-color: #e8f5f7;
  border-color: #c9e8ec;
  color: var(--bq-teal-dark);
}

/* Forms */
.form-control:focus {
  border-color: var(--bq-teal);
  box-shadow: 0 0 0 0.2rem rgba(61, 179, 191, .20);
}

/* Progress bar default (dashboard usage) */
.progress {
  background-color: var(--bq-muted-bg);
  border-radius: 4px;
}
.progress-bar.bg-success { background-color: var(--bq-teal) !important; }

/* Sort links sit in table headers — match the muted header text colour so
   sortable and non-sortable columns render consistently. */
a.sort_link { color: var(--bq-text-muted) !important; }

/* Code blocks */
code {
  color: var(--bq-code-text);
  background: var(--bq-code-bg);
  padding: 1px 5px;
  border-radius: 3px;
}


/* Bootstrap's reboot hard-codes bare <pre> to a near-black colour ($gray-900),
   which vanishes on dark surfaces. Bare <pre> blocks (e.g. the payment provider
   response / document content) need the themed text colour. */
pre {
  color: var(--bq-text);
}

pre code {
  color: var(--bq-text);
}

/* Status pills aligned with palette */
.badge-success {
  background-color: rgba(61, 179, 191, .15);
  color: var(--bq-teal-dark);
  font-weight: 600;
}
.badge-bq-muted {
  background-color: var(--bq-muted-bg);
  color: var(--bq-text-muted);
  font-weight: 600;
}
.badge-bq-warning {
  background-color: rgba(255, 213, 0, .18);
  color: #8a6d00;
  font-weight: 600;
}

/* Monochrome secondary button — cleaner */
.btn-outline-secondary {
  color: var(--bq-text-muted);
  border-color: var(--bq-border);
}
.btn-outline-secondary:hover {
  /* Brand-accent hover instead of a grey fill — a grey fill with muted text
     reads as a disabled button. */
  background-color: rgba(202, 53, 104, .06);
  color: var(--bq-link);
  border-color: var(--bq-link);
}

/* -------- IDE-aligned header (Contact Sales + profile dropdown) -------- */
.bitquery-profile-button {
  margin-left: auto;
}

.bitquery-links {
  display: flex;
  align-items: center;
  white-space: nowrap;
  padding: 7px 10px;
  border-radius: 8px;
  text-decoration: none !important;
  color: #3f3f46;
  font-size: .9rem;
  transition: background .2s ease, color .2s ease;
}
.bitquery-links:hover,
.bitquery-links:focus {
  cursor: pointer;
  text-decoration: none;
  color: #3f1f8a;
  background: linear-gradient(135deg, #fcfaff, #f8eeff);
}

.bitquery-dropdown > .nav-link.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fcfaff, #f8eeff);
  padding: 4px 10px;
  border: 1px solid #ece7ff;
  border-radius: 8px;
  font-size: .9rem;
  color: #3f3f46;
  cursor: pointer;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.bitquery-dropdown > .nav-link.dropdown-toggle:hover {
  transform: translateY(-.5px);
  box-shadow: 0 6px 14px rgba(236, 231, 255, .25);
  border-color: #dab0ff;
  color: #3f1f8a;
}
.bitquery-dropdown > .nav-link.dropdown-toggle:active,
.bitquery-dropdown > .nav-link.dropdown-toggle.show {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(189, 166, 255, .2);
  border-color: #dab0ff;
}
.bitquery-dropdown > .nav-link.dropdown-toggle:focus {
  outline: none;
  border-color: #dab0ff;
  box-shadow: 0 0 0 3px rgba(236, 231, 255, .2);
}
.bitquery-dropdown > .nav-link.dropdown-toggle::after {
  border-top-color: #3f1f8a;
  margin-left: .4em;
}

.bitquery-dropdown .dropdown-menu {
  border: 1px solid #ece7ff;
  border-radius: 8px;
  box-shadow: 0 6px 14px rgba(236, 231, 255, .35), 0 1px 3px rgba(20, 24, 40, .06);
  padding: .25rem 0;
  min-width: 200px;
}

.bitquery-dropdown .profile-email {
  color: #646464 !important;
  font-size: .85rem;
  padding: .5rem 1rem;
  cursor: default;
}

.bitquery-links-item {
  font-size: .9rem;
  padding: .4rem 1rem;
  color: #3f3f46;
}
.bitquery-links-item:hover,
.bitquery-links-item:focus {
  color: #3f1f8a;
  background: linear-gradient(135deg, #fcfaff, #f8eeff);
}
.bitquery-dropdown .dropdown-item.active,
.bitquery-dropdown .dropdown-item:active {
  color: #3f1f8a;
  background: linear-gradient(135deg, #fcfaff, #f8eeff);
}

/* ============================================================================
   Theme control — mirrors the IDE (src/scss/_header.scss): a borderless header
   cycle button that steps System -> Light -> Dark.
   ========================================================================== */

/* Header cycle button — a plain bitquery-links chip, no border/box. */
button.bq-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0.35rem 0.55rem;
  cursor: pointer;
}
button.bq-theme-toggle i {
  font-size: 1.05rem;
  line-height: 1;
}
button.bq-theme-toggle:focus,
button.bq-theme-toggle:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Smooth the transition when the user flips the theme. */
body,
.card, .card-header, .card-footer,
.header.border-bottom,
.dropdown-menu,
.table,
.form-control, .custom-select,
.modal-content, .list-group-item {
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

/* ============================================================================
   Dark theme — overrides for Bootstrap chrome that hard-codes light colours and
   isn't already driven by the var(--bq-*) tokens above. Surfaces/text/borders
   come from the [data-theme="dark"] token block.
   ========================================================================== */
[data-theme="dark"] .header.border-bottom {
  background-color: var(--bq-surface);
}

/* Dropdowns / popovers / menus */
[data-theme="dark"] .dropdown-menu {
  background-color: var(--bq-surface);
  border-color: var(--bq-border);
  color: var(--bq-text);
}
[data-theme="dark"] .dropdown-item {
  color: var(--bq-text);
}
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
  background-color: var(--bq-surface-3);
  color: var(--bq-text);
}
[data-theme="dark"] .dropdown-divider {
  border-top-color: var(--bq-border);
}
[data-theme="dark"] .dropdown-item-text,
[data-theme="dark"] .profile-email {
  color: var(--bq-text-muted) !important;
}

/* Forms / inputs / selects */
[data-theme="dark"] .form-control,
[data-theme="dark"] .custom-select,
[data-theme="dark"] textarea,
[data-theme="dark"] .input-group-text {
  background-color: var(--bq-surface-2);
  border-color: var(--bq-border);
  color: var(--bq-text);
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .custom-select:focus {
  background-color: var(--bq-surface-2);
  color: var(--bq-text);
}
[data-theme="dark"] .form-control::placeholder { color: var(--bq-text-muted); }
[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-control[readonly] {
  background-color: var(--bq-surface-3);
}

/* Tables */
[data-theme="dark"] .table {
  color: var(--bq-text);
}
[data-theme="dark"] .table td,
[data-theme="dark"] .table th,
[data-theme="dark"] .table thead th {
  border-color: var(--bq-border);
}
[data-theme="dark"] .table-bordered,
[data-theme="dark"] .table-bordered td,
[data-theme="dark"] .table-bordered th {
  border-color: var(--bq-border);
}
[data-theme="dark"] .bootstrap-table .fixed-table-container,
[data-theme="dark"] .fixed-table-toolbar,
[data-theme="dark"] .fixed-table-pagination {
  color: var(--bq-text);
}

/* Modals / list groups / cards-as-containers */
[data-theme="dark"] .modal-content {
  background-color: var(--bq-surface);
  color: var(--bq-text);
  border-color: var(--bq-border);
}
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
  border-color: var(--bq-border);
}
[data-theme="dark"] .list-group-item {
  background-color: var(--bq-surface);
  border-color: var(--bq-border);
  color: var(--bq-text);
}
[data-theme="dark"] .close {
  color: var(--bq-text);
  text-shadow: none;
}

/* Pagination */
/* Bootstrap colours page links with its default primary blue in both themes;
   use the brand link colour instead. */
.page-link,
.page-link:hover,
.page-link:focus {
  color: var(--bq-link);
}
[data-theme="dark"] .page-link {
  background-color: var(--bq-surface);
  border-color: var(--bq-border);
  color: var(--bq-link);
}
/* The active page keeps Bootstrap's default primary blue; pull it onto the
   brand pink in both themes so it matches the rest of the chrome. */
.page-item.active .page-link {
  background-color: var(--bq-pink);
  border-color: var(--bq-pink);
  color: #fff;
}
[data-theme="dark"] .page-item.disabled .page-link {
  background-color: var(--bq-surface-2);
  border-color: var(--bq-border);
  color: var(--bq-text-muted);
}

/* Misc text/dividers */
[data-theme="dark"] .text-muted { color: var(--bq-text-muted) !important; }
[data-theme="dark"] .text-dark { color: var(--bq-text) !important; }
[data-theme="dark"] hr { border-top-color: var(--bq-border); }
[data-theme="dark"] .border,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-left,
[data-theme="dark"] .border-right { border-color: var(--bq-border) !important; }
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-light {
  background-color: var(--bq-surface) !important;
  color: var(--bq-text);
}

/* Alerts — darker tints */
[data-theme="dark"] .alert-primary {
  background-color: rgba(216, 83, 126, .12);
  border-color: rgba(216, 83, 126, .35);
  color: #e7a9bf;
}
[data-theme="dark"] .alert-info {
  background-color: rgba(61, 179, 191, .12);
  border-color: rgba(61, 179, 191, .35);
  color: var(--bq-teal-dark);
}
[data-theme="dark"] .alert-success {
  background-color: rgba(149, 234, 135, .10);
  border-color: rgba(149, 234, 135, .30);
  color: #b8e6ad;
}
[data-theme="dark"] .alert-warning {
  background-color: rgba(255, 213, 0, .10);
  border-color: rgba(255, 213, 0, .30);
  color: #e6c84d;
}
[data-theme="dark"] .alert-danger {
  background-color: rgba(192, 57, 43, .15);
  border-color: rgba(192, 57, 43, .4);
  color: #f0a097;
}

/* IDE-aligned header chips — dark restyle of the light gradient pills */
[data-theme="dark"] .bitquery-links { color: var(--bq-text-muted); }
[data-theme="dark"] .bitquery-links:hover,
[data-theme="dark"] .bitquery-links:focus {
  color: var(--bq-text);
  background: var(--bq-surface-3);
}
[data-theme="dark"] .bitquery-dropdown > .nav-link.dropdown-toggle {
  background: var(--bq-surface-2);
  border-color: var(--bq-border);
  color: var(--bq-text-muted);
}
[data-theme="dark"] .bitquery-dropdown > .nav-link.dropdown-toggle:hover {
  border-color: var(--bq-pink);
  color: var(--bq-text);
  box-shadow: none;
}
[data-theme="dark"] .bitquery-dropdown > .nav-link.dropdown-toggle::after {
  border-top-color: var(--bq-text);
}
[data-theme="dark"] .bitquery-dropdown .dropdown-menu {
  background-color: var(--bq-surface);
  border-color: var(--bq-border);
  box-shadow: var(--bq-shadow-lg);
}
[data-theme="dark"] .bitquery-links-item { color: var(--bq-text); }
[data-theme="dark"] .bitquery-links-item:hover,
[data-theme="dark"] .bitquery-links-item:focus,
[data-theme="dark"] .bitquery-dropdown .dropdown-item.active,
[data-theme="dark"] .bitquery-dropdown .dropdown-item:active {
  color: var(--bq-text);
  background: var(--bq-surface-3);
}

/* Archived rows: the light theme dims with a translucent-black wash; on dark
   use a translucent-white wash instead so the row still reads as muted. */
[data-theme="dark"] .row--archived {
  background: rgba(255, 255, 255, 0.03);
}

/* Progress track: --bq-muted-bg is nearly indistinguishable from the dark
   surface, so the unfilled portion of usage/seat bars vanishes. Use a faint
   translucent-white track that reads on any dark panel. */
[data-theme="dark"] .progress {
  background-color: rgba(255, 255, 255, 0.08);
}

/* Google Charts Timeline only exposes backgroundColor + rowLabelStyle as options,
   so its light row-band rects and (un-stylable) date-axis labels are recoloured
   here by reaching into the rendered SVG. The teal bars keep their #3db3bf fill,
   so the band overrides (white / light-grey fills) leave the bars untouched. */
[data-theme="dark"] .timeline-chart text {
  fill: var(--bq-text) !important; /* row labels + bottom date axis */
}
[data-theme="dark"] .timeline-chart rect[fill="#ffffff"],
[data-theme="dark"] .timeline-chart rect[fill="#FFFFFF"],
[data-theme="dark"] .timeline-chart rect[fill="#fff"],
[data-theme="dark"] .timeline-chart rect[fill="#fafafa"],
[data-theme="dark"] .timeline-chart rect[fill="#f7f7f7"],
[data-theme="dark"] .timeline-chart rect[fill="#f5f5f5"],
[data-theme="dark"] .timeline-chart rect[fill="#f3f3f3"],
[data-theme="dark"] .timeline-chart rect[fill="#eeeeee"],
[data-theme="dark"] .timeline-chart rect[fill="#ededed"],
[data-theme="dark"] .timeline-chart rect[fill="#e9e9e9"],
[data-theme="dark"] .timeline-chart rect[fill="#e6e6e6"],
[data-theme="dark"] .timeline-chart rect[fill="#dddddd"],
[data-theme="dark"] .timeline-chart rect[fill="#cccccc"] {
  fill: #11151c !important; /* alternating row bands -> dark surface */
}


/* ==========================================================================
   CHECKOUT v2 — self-service checkout redesign (stepper + persistent cart
   rail + special result page). Everything is scoped under `.checkout` so the
   design's own component classes (.plan, .summary, .plan-grid, .addon, .step…)
   don't collide with the billing / admin pages that reuse .plan-card, .plan-
   grid, .order-summary etc. Prices/eligibility stay server-computed; JS only
   tracks the live selection. Ported from the design handoff (Checkout v2).
   ========================================================================== */
.checkout {
  /* Constant brand tokens (theme-independent). */
  --co-cta:#93254b; --co-cta-hover:#af3e76; --co-pink-soft:#f788c0; --co-teal:#00d8dd;
  --co-grad:linear-gradient(96deg,#f93f9c 0%,#af3e76 46%,#00d8dd 100%);
  --co-radius-card:16px; --co-radius-btn:4px;
  /* Light theme (default). */
  --co-surface:#ffffff; --co-inset:#f6f8fc;
  --co-line:rgba(6,9,13,.11); --co-line-2:rgba(6,9,13,.06);
  --co-text:#0c121c; --co-text-2:#4d5665; --co-text-3:#818a99;
  --co-chip-bg:rgba(6,9,13,.035); --co-track:rgba(6,9,13,.08);
  --co-success:#0e9f6e; --co-success-ink:#ffffff; --co-warn:#c9820f;
  --co-shadow:0 22px 48px -16px rgba(20,39,57,.18); --co-shadow-sm:0 3px 12px rgba(20,39,57,.08);
  --co-sel-glow:0 0 0 1.5px var(--co-cta-hover),0 16px 36px -14px rgba(147,37,75,.28);
  --co-card-top:linear-gradient(180deg,rgba(6,9,13,.02),transparent 40%);
  --co-font:'DM Sans',Nunito,system-ui,sans-serif;
  --co-mono:'JetBrains Mono',ui-monospace,monospace;
  position:relative;
  font-family:var(--co-font);
  color:var(--co-text);
}
[data-theme="dark"] .checkout {
  --co-surface:#0c121c; --co-inset:#080c13;
  --co-line:rgba(255,255,255,.09); --co-line-2:rgba(255,255,255,.055);
  --co-text:#ffffff; --co-text-2:#aab2c0; --co-text-3:#727c8d;
  --co-chip-bg:rgba(255,255,255,.045); --co-track:rgba(255,255,255,.08);
  --co-success:#3fd39a; --co-success-ink:#04140d; --co-warn:#f3b04c;
  --co-shadow:0 24px 60px -12px rgba(0,0,0,.6); --co-shadow-sm:0 4px 16px rgba(0,0,0,.3);
  --co-sel-glow:0 0 0 1.5px var(--co-cta-hover),0 18px 44px -14px rgba(175,62,118,.5);
  --co-card-top:linear-gradient(180deg,rgba(255,255,255,.04),transparent 40%);
}
/* Subtle brand radial washes behind the whole flow (fixed, non-interactive). */
.checkout::before {
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1100px 460px at 78% -140px,color-mix(in srgb,var(--co-cta) 12%,transparent),transparent 70%),
    radial-gradient(900px 420px at -6% -100px,color-mix(in srgb,var(--co-teal) 7%,transparent),transparent 68%);
}
.checkout *{box-sizing:border-box;}
.checkout a{color:inherit;text-decoration:none;}

/* ---- Checkout header + stepper ---- */
.checkout .co-head{padding:26px 0 18px;}
.checkout .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:600;
  letter-spacing:1.4px;text-transform:uppercase;margin-bottom:13px;}
.checkout .eyebrow .g{background:var(--co-grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.checkout .eyebrow .c-sep{color:var(--co-text-3);opacity:.6;}
.checkout .eyebrow a{color:var(--co-text-3);transition:.15s;}
.checkout .eyebrow a:hover{color:var(--co-text-2);}
.checkout .co-title{font-family:var(--co-font);font-weight:500;font-size:34px;letter-spacing:-.9px;
  margin:0;line-height:1.08;color:var(--co-text);}
.checkout .co-sub{font-size:14.5px;color:var(--co-text-2);margin-top:9px;max-width:660px;line-height:1.55;}
.checkout .co-sub b{color:var(--co-text);font-weight:600;}

.checkout .stepper{display:flex;align-items:center;gap:0;margin:26px 0 4px;padding:0;list-style:none;}
.checkout .step{display:flex;align-items:center;gap:12px;flex:0 1 auto;min-width:0;color:inherit;}
.checkout .step .snum{width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:13.5px;font-weight:600;font-family:var(--co-mono);border:1.5px solid var(--co-line);
  background:var(--co-surface);color:var(--co-text-3);transition:.25s;}
.checkout .step .slab{font-size:13.5px;font-weight:500;color:var(--co-text-3);white-space:nowrap;transition:.25s;}
.checkout .step .sconn{flex:1 1 40px;height:2px;border-radius:2px;background:var(--co-track);margin:0 16px;
  min-width:24px;transition:.25s;}
.checkout .step.active .snum{border-color:transparent;background:var(--co-cta);color:#fff;
  box-shadow:0 0 0 5px color-mix(in srgb,var(--co-cta) 20%,transparent),0 6px 16px -4px rgba(147,37,75,.6);}
.checkout .step.active .slab{color:var(--co-text);font-weight:600;}
.checkout .step.done .snum{border-color:transparent;background:var(--co-success);color:var(--co-success-ink);}
.checkout .step.done .slab{color:var(--co-text-2);}
.checkout .step.done .sconn{background:var(--co-grad);}
.checkout .step.done .snum svg{width:15px;height:15px;}
.checkout a.step:hover .slab{color:var(--co-text);}
@media(max-width:760px){.checkout .step .slab{display:none;}.checkout .step .sconn{margin:0 10px;}}

/* ---- Two-column layout ---- */
.checkout .co-body{display:grid;grid-template-columns:1fr 372px;gap:30px;align-items:start;padding:16px 0 80px;}
.checkout .co-body.full{grid-template-columns:1fr;}
@media(max-width:980px){.checkout .co-body{grid-template-columns:1fr;}}

.checkout .panel-head{margin-bottom:18px;}
.checkout .panel-head h2{font-size:19px;font-weight:600;margin:0 0 4px;letter-spacing:-.4px;color:var(--co-text);}
.checkout .panel-head h2 .opt{color:var(--co-text-3);font-weight:400;font-size:14px;letter-spacing:0;}
.checkout .panel-head p{font-size:13.5px;color:var(--co-text-3);margin:0;}

/* ---- Buttons (co-btn, to avoid clobbering Bootstrap .btn) ---- */
.checkout .co-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--co-font);
  font-weight:600;font-size:14.5px;border-radius:var(--co-radius-btn);padding:12px 20px;border:1px solid transparent;
  cursor:pointer;transition:background .15s,border-color .15s,color .15s,transform .08s,box-shadow .15s;white-space:nowrap;}
.checkout .co-btn:active{transform:translateY(1px);}
.checkout .co-btn svg{width:16px;height:16px;}
.checkout .co-btn--primary{background:var(--co-cta);color:#fff;box-shadow:0 8px 20px -8px rgba(147,37,75,.7);}
.checkout .co-btn--primary:hover{background:var(--co-cta-hover);color:#fff;box-shadow:0 10px 26px -8px rgba(175,62,118,.8);}
.checkout .co-btn--primary:disabled,.checkout .co-btn--primary[disabled]{opacity:.4;cursor:not-allowed;box-shadow:none;}
.checkout .co-btn--primary:disabled:hover{background:var(--co-cta);}
.checkout .co-btn--ghost{background:var(--co-surface);color:var(--co-text);border-color:var(--co-line);}
.checkout .co-btn--ghost:hover{border-color:var(--co-cta-hover);color:var(--co-text);}
.checkout .co-btn--lg{padding:14px 24px;font-size:15px;}
.checkout .co-btn--block{width:100%;}
.checkout .co-btn.is-disabled{opacity:.4;pointer-events:none;box-shadow:none;}
.checkout .co-per{font-size:.82em;color:var(--co-text-3);font-weight:400;}

/* ---- Cycle (monthly/annual) toggle ---- */
.checkout .cycle{display:inline-flex;background:var(--co-chip-bg);border:1px solid var(--co-line-2);
  border-radius:11px;padding:4px;gap:4px;margin-bottom:24px;}
.checkout .cycle button{border:none;background:transparent;font-family:var(--co-font);font-weight:600;
  font-size:13.5px;color:var(--co-text-2);padding:9px 18px;border-radius:8px;cursor:pointer;transition:.18s;
  display:flex;align-items:center;gap:8px;}
.checkout .cycle button:hover{color:var(--co-text);}
.checkout .cycle button.on{background:var(--co-surface);color:var(--co-text);box-shadow:var(--co-shadow-sm);}
.checkout .cycle .save{font-size:10.5px;font-weight:700;letter-spacing:.3px;color:var(--co-success);
  background:color-mix(in srgb,var(--co-success) 16%,transparent);padding:2px 7px;border-radius:99px;}
/* Fixed-term note shown in place of the cycle toggle for annual subscribers, so
   the plan grid still sits below it and the summary rail stands proud above the
   cards (same offset the toggle creates). */
.checkout .co-cyclenote{display:inline-block;font-size:13px;color:var(--co-text-2);background:var(--co-chip-bg);
  border:1px solid var(--co-line-2);border-radius:11px;padding:10px 16px;margin-bottom:24px;}
.checkout .co-cyclenote strong{color:var(--co-text);font-weight:600;}

/* ---- Plan grid ---- */
.checkout .plan-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
@media(max-width:1180px){.checkout .plan-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.checkout .plan-grid{grid-template-columns:1fr;}}
.checkout .plan{position:relative;border:1px solid var(--co-line);border-radius:var(--co-radius-card);
  background:var(--co-surface);background-image:var(--co-card-top);padding:22px 18px 18px;display:flex;
  flex-direction:column;cursor:pointer;transition:border-color .18s,box-shadow .18s,transform .18s;}
.checkout .plan:hover{border-color:var(--co-cta-hover);transform:translateY(-3px);box-shadow:var(--co-shadow-sm);}
.checkout .plan.selected{box-shadow:var(--co-sel-glow);border-color:transparent;}
.checkout .plan.rec{border-color:transparent;background:
    linear-gradient(var(--co-surface),var(--co-surface)) padding-box,var(--co-grad) border-box;
    border:1.5px solid transparent;}
.checkout .plan.rec.selected{box-shadow:0 0 0 1.5px var(--co-cta-hover),0 20px 46px -14px rgba(175,62,118,.55);}
.checkout .plan .rib{position:absolute;top:-11px;left:50%;transform:translateX(-50%);font-size:9.5px;
  font-weight:700;letter-spacing:.7px;text-transform:uppercase;padding:5px 11px;border-radius:99px;color:#fff;
  background:var(--co-cta);white-space:nowrap;box-shadow:var(--co-shadow-sm);}
.checkout .plan .rib.rec{background:var(--co-grad);color:#08111a;}
.checkout .plan .pname{font-size:16.5px;font-weight:600;letter-spacing:-.2px;}
.checkout .plan .ptag{font-size:12px;color:var(--co-text-3);margin-top:3px;min-height:34px;line-height:1.4;}
.checkout .plan .price{margin:14px 0 2px;display:flex;align-items:baseline;gap:4px;}
.checkout .plan .price b{font-size:34px;font-weight:600;letter-spacing:-1.4px;font-family:var(--co-font);}
.checkout .plan .price .per{font-size:12.5px;color:var(--co-text-3);}
.checkout .plan .price .custom{font-size:27px;font-weight:600;letter-spacing:-.6px;
  background:var(--co-grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.checkout .plan .annnote{font-size:11.5px;color:var(--co-text-3);min-height:16px;margin-bottom:14px;}
.checkout .plan .annnote b{color:var(--co-success);font-weight:700;}
.checkout .plan .feats{list-style:none;margin:0 0 16px;padding:15px 0 0;border-top:1px solid var(--co-line-2);
  display:flex;flex-direction:column;gap:10px;flex:1;}
.checkout .plan .feats li{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--co-text-2);}
.checkout .plan .feats li .fk{color:var(--co-text-3);}
.checkout .plan .feats li .fv{margin-left:auto;font-weight:600;color:var(--co-text);font-family:var(--co-mono);font-size:12px;}
.checkout .plan .feats li i,.checkout .plan .feats li svg{width:14px;height:14px;color:var(--co-teal);flex:none;font-size:11px;}
.checkout .plan .pact{margin-top:auto;}
.checkout .selbtn{width:100%;border-radius:var(--co-radius-btn);padding:11px;font-family:var(--co-font);
  font-weight:600;font-size:13.5px;cursor:pointer;border:1px solid var(--co-line);background:var(--co-surface);
  color:var(--co-text);transition:.15s;display:flex;align-items:center;justify-content:center;gap:7px;text-align:center;}
.checkout .selbtn:hover{border-color:var(--co-cta-hover);color:var(--co-text);}
.checkout .plan.selected .selbtn{background:var(--co-cta);color:#fff;border-color:var(--co-cta);
  box-shadow:0 8px 20px -10px rgba(147,37,75,.8);}
.checkout .selbtn.cur{background:var(--co-chip-bg);color:var(--co-text-2);cursor:default;border-color:var(--co-line-2);box-shadow:none;}
.checkout .badge-cur{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;color:var(--co-teal);background:color-mix(in srgb,var(--co-teal) 14%,transparent);
  padding:3px 8px;border-radius:6px;margin-bottom:9px;align-self:flex-start;}
.checkout .badge-cur.scheduled{color:var(--co-success);background:color-mix(in srgb,var(--co-success) 14%,transparent);}
.checkout .co-dot{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block;}

/* ---- Add-ons ---- */
.checkout .addon-list{display:flex;flex-direction:column;gap:12px;}
.checkout .addon{display:flex;align-items:center;gap:16px;border:1px solid var(--co-line);border-radius:13px;
  background:var(--co-surface);background-image:var(--co-card-top);padding:16px 18px;margin:0;cursor:pointer;
  transition:border-color .15s,box-shadow .15s;}
.checkout .addon.on{border-color:var(--co-cta-hover);box-shadow:var(--co-sel-glow);}
.checkout .addon .chk{width:22px;height:22px;border-radius:7px;border:1.5px solid var(--co-line);flex:none;
  display:grid;place-items:center;cursor:pointer;transition:.15s;background:var(--co-inset);color:transparent;position:relative;}
.checkout .addon.on .chk{background:var(--co-cta);border-color:var(--co-cta);color:#fff;}
.checkout .addon .chk svg{width:13px;height:13px;}
.checkout .addon .chk input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;}
.checkout .addon .ainfo{flex:1;min-width:0;}
.checkout .addon .aname{font-size:14.5px;font-weight:600;}
.checkout .addon .aname .cur{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  color:var(--co-teal);background:color-mix(in srgb,var(--co-teal) 14%,transparent);padding:2px 7px;border-radius:99px;margin-left:6px;}
.checkout .addon .adetail{font-size:12.5px;color:var(--co-text-3);margin-top:3px;display:flex;gap:12px;flex-wrap:wrap;}
.checkout .addon .adetail .tag{font-family:var(--co-mono);color:var(--co-teal);}
.checkout .addon .aprice{font-size:14.5px;font-weight:700;font-family:var(--co-mono);white-space:nowrap;}
.checkout .addon .aprice small{font-size:11.5px;color:var(--co-text-3);font-family:var(--co-font);font-weight:400;}
.checkout .stepper-qty{display:flex;align-items:center;border:1px solid var(--co-line);border-radius:9px;overflow:hidden;background:var(--co-inset);}
.checkout .stepper-qty button{width:32px;height:34px;border:none;background:transparent;color:var(--co-text-2);
  font-size:17px;cursor:pointer;transition:.15s;display:grid;place-items:center;}
.checkout .stepper-qty button:hover:not(:disabled){background:var(--co-chip-bg);color:var(--co-text);}
.checkout .stepper-qty button:disabled{opacity:.3;cursor:not-allowed;}
.checkout .stepper-qty input{width:44px;height:34px;border:none;background:transparent;text-align:center;
  color:var(--co-text);font-family:var(--co-mono);font-size:14px;font-weight:600;
  border-left:1px solid var(--co-line-2);border-right:1px solid var(--co-line-2);-moz-appearance:textfield;}
.checkout .stepper-qty input::-webkit-outer-spin-button,
.checkout .stepper-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.checkout .stepper-qty input:focus{outline:none;}

/* ---- Order summary rail ---- */
.checkout .summary{position:sticky;top:82px;border:1px solid var(--co-line);border-radius:var(--co-radius-card);
  background:var(--co-surface);overflow:hidden;box-shadow:var(--co-shadow);}
.checkout .summary::before{content:"";display:block;height:3px;background:var(--co-grad);}
.checkout .sum-head{padding:17px 20px 15px;border-bottom:1px solid var(--co-line-2);display:flex;align-items:center;gap:10px;}
.checkout .sum-head h3{margin:0;font-size:14.5px;font-weight:600;letter-spacing:-.2px;}
.checkout .sum-head .ic{color:var(--co-text-3);display:grid;place-items:center;}
.checkout .sum-head .ic svg{width:16px;height:16px;}
.checkout .sum-body{padding:8px 20px 16px;}
.checkout .sline{display:flex;align-items:flex-start;gap:10px;padding:11px 0;font-size:13.5px;border-bottom:1px solid var(--co-line-2);}
.checkout .sline:last-child{border-bottom:none;}
.checkout .sline .sl-name{color:var(--co-text-2);}
.checkout .sline .sl-name small{display:block;color:var(--co-text-3);font-size:11.5px;margin-top:2px;}
.checkout .sline .sl-amt{margin-left:auto;font-family:var(--co-mono);font-weight:600;white-space:nowrap;}
.checkout .sline.plan-line .sl-name{color:var(--co-text);font-weight:600;}
.checkout .sum-empty{font-size:12.5px;color:var(--co-text-3);padding:10px 0;text-align:center;}
.checkout .sum-div{height:1px;background:var(--co-line-2);margin:4px 0;}
.checkout .sum-total{display:flex;align-items:baseline;padding:14px 0 4px;}
.checkout .sum-total .tl{font-size:14px;font-weight:600;}
.checkout .sum-total .ta{margin-left:auto;font-size:27px;font-weight:600;font-family:var(--co-font);letter-spacing:-1px;}
.checkout .sum-total .ta .co-per{font-size:12.5px;color:var(--co-text-3);font-weight:400;letter-spacing:0;}
.checkout .sum-note{font-size:11.5px;color:var(--co-text-3);line-height:1.5;margin-top:10px;}
.checkout .sum-billed{font-size:12.5px;color:var(--co-text-2);margin-top:10px;display:flex;align-items:center;gap:8px;
  padding:9px 12px;border-radius:9px;background:color-mix(in srgb,var(--co-success) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--co-success) 22%,transparent);}
.checkout .sum-billed .save{color:var(--co-success);font-weight:700;}
.checkout .sum-foot{padding:0 20px 20px;}
.checkout .trust{display:flex;align-items:center;gap:7px;justify-content:center;font-size:11.5px;color:var(--co-text-3);margin-top:14px;}
.checkout .trust svg{width:13px;height:13px;color:var(--co-success);}

/* ---- Review (step 3) ---- */
.checkout .rev-card{border:1px solid var(--co-line);border-radius:var(--co-radius-card);background:var(--co-surface);
  margin-bottom:16px;overflow:hidden;box-shadow:var(--co-shadow-sm);}
.checkout .rev-card .rc-head{padding:16px 20px;border-bottom:1px solid var(--co-line-2);display:flex;align-items:center;gap:10px;}
.checkout .rev-card .rc-head h2{margin:0;font-size:15px;font-weight:600;letter-spacing:-.2px;}
.checkout .rev-card .rc-head .ic{width:30px;height:30px;border-radius:8px;background:var(--co-chip-bg);
  color:var(--co-pink-soft);display:grid;place-items:center;}
.checkout .rev-card .rc-head .ic svg{width:16px;height:16px;}
.checkout .rev-card .rc-head .edit{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--co-pink-soft);cursor:pointer;}
.checkout .rev-card .rc-head .edit:hover{color:var(--co-cta-hover);}
.checkout .rev-card .rc-body{padding:18px 20px;}
.checkout .rev-order{display:flex;flex-direction:column;}
.checkout .rev-order .ro{display:flex;align-items:center;gap:12px;padding:13px 0;border-top:1px solid var(--co-line-2);font-size:13.5px;}
.checkout .rev-order .ro:first-child{border-top:none;padding-top:2px;}
.checkout .rev-order .ro .rn{color:var(--co-text-2);}
.checkout .rev-order .ro .rn b{color:var(--co-text);font-weight:600;}
.checkout .rev-order .ro .rq{font-size:11.5px;color:var(--co-text-3);font-family:var(--co-mono);}
.checkout .rev-order .ro .ra{margin-left:auto;font-family:var(--co-mono);font-weight:600;}
.checkout .changenote{display:flex;gap:11px;align-items:center;padding:13px 15px;border-radius:11px;margin-bottom:16px;
  background:color-mix(in srgb,var(--co-warn) 12%,transparent);border:1px solid color-mix(in srgb,var(--co-warn) 30%,transparent);}
.checkout .changenote svg{width:18px;height:18px;color:var(--co-warn);flex:none;}
.checkout .changenote .ct{font-size:12.5px;color:var(--co-text-2);line-height:1.45;}
.checkout .changenote .ct b{color:var(--co-text);}
.checkout .stripe-note{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--co-line);border-radius:12px;
  background:var(--co-inset);padding:16px;}
.checkout .stripe-note .sn-ic{width:38px;height:38px;border-radius:10px;background:color-mix(in srgb,var(--co-teal) 13%,transparent);
  color:var(--co-teal);display:grid;place-items:center;flex:none;}
.checkout .stripe-note .sn-ic svg{width:18px;height:18px;}
.checkout .stripe-note .sn-txt b{font-size:14px;font-weight:600;}
.checkout .stripe-note .sn-txt p{margin:5px 0 0;font-size:12.5px;color:var(--co-text-3);line-height:1.55;}
.checkout .cardchips{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:13px;}
.checkout .cardchips .cc{font-size:10.5px;font-weight:700;letter-spacing:.4px;color:var(--co-text-2);
  background:var(--co-chip-bg);border:1px solid var(--co-line-2);border-radius:5px;padding:3px 8px;font-family:var(--co-font);}
.checkout .cardchips .powered{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--co-text-3);margin-left:auto;}
.checkout .cardchips .powered svg{width:13px;height:13px;color:var(--co-teal);}
.checkout .terms-box{border:1px solid var(--co-line);border-radius:11px;background:var(--co-inset);max-height:190px;
  overflow-y:auto;padding:16px 18px;font-size:12.5px;color:var(--co-text-2);line-height:1.65;margin-bottom:16px;white-space:pre-wrap;}
.checkout .terms-box h4{margin:0 0 8px;font-size:13px;color:var(--co-text);font-weight:600;}
.checkout .agree{display:flex;gap:11px;align-items:flex-start;padding:14px 15px;border:1px solid var(--co-line);
  border-radius:11px;background:var(--co-inset);cursor:pointer;margin-bottom:10px;transition:border-color .15s;}
.checkout .agree:hover{border-color:var(--co-cta-hover);}
.checkout .agree.on{border-color:var(--co-cta-hover);background:color-mix(in srgb,var(--co-cta) 6%,var(--co-inset));}
.checkout .agree .box{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--co-line);flex:none;
  display:grid;place-items:center;background:var(--co-surface);color:transparent;transition:.15s;margin-top:1px;position:relative;}
.checkout .agree.on .box{background:var(--co-cta);border-color:var(--co-cta);color:#fff;}
.checkout .agree .box svg{width:12px;height:12px;}
.checkout .agree .box input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;}
.checkout .agree .atxt{font-size:13px;color:var(--co-text-2);line-height:1.5;}
.checkout .agree .atxt a{color:var(--co-pink-soft);font-weight:600;}
.checkout .nav-btns{display:flex;align-items:center;gap:12px;margin-top:22px;}
.checkout .nav-btns .spacer{flex:1;}

/* ---- Confirmation (step 4) ---- */
.checkout .done-hero{text-align:center;padding:20px 0 34px;}
.checkout .done-hero .dmark{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;margin:0 auto 20px;
  color:var(--co-success);background:color-mix(in srgb,var(--co-success) 15%,transparent);
  box-shadow:0 0 0 8px color-mix(in srgb,var(--co-success) 7%,transparent);animation:co-pop .45s cubic-bezier(.2,.8,.2,1);}
@keyframes co-pop{0%{transform:scale(.5);opacity:0;}60%{transform:scale(1.12);}100%{transform:scale(1);opacity:1;}}
.checkout .done-hero .dmark svg{width:38px;height:38px;}
.checkout .done-hero .dmark.pending{color:var(--co-warn);background:color-mix(in srgb,var(--co-warn) 15%,transparent);
  box-shadow:0 0 0 8px color-mix(in srgb,var(--co-warn) 7%,transparent);}
.checkout .done-hero h1{font-family:var(--co-font);font-weight:500;font-size:30px;letter-spacing:-.7px;margin:0 0 10px;color:var(--co-text);}
.checkout .done-hero p{font-size:14px;color:var(--co-text-2);margin:0 auto;max-width:560px;line-height:1.55;}
.checkout .done-hero p b{color:var(--co-text);font-family:var(--co-mono);}
.checkout .succ-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(216px,1fr));gap:14px;align-items:start;max-width:940px;margin:0 auto;}
.checkout .succard{border:1px solid var(--co-line);border-radius:var(--co-radius-card);background:var(--co-surface);
  background-image:var(--co-card-top);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--co-shadow-sm);}
.checkout .succard.pay{box-shadow:var(--co-sel-glow);border-color:transparent;}
.checkout .succard .sc-top{padding:16px 17px 14px;border-bottom:1px solid var(--co-line-2);}
.checkout .succard .sc-name{font-size:13.5px;font-weight:600;letter-spacing:-.2px;display:flex;align-items:center;gap:6px;}
.checkout .succard .sc-name .q{font-size:11px;font-weight:600;color:var(--co-teal);background:color-mix(in srgb,var(--co-teal) 14%,transparent);
  padding:2px 7px;border-radius:99px;font-family:var(--co-mono);}
.checkout .succard .sc-price{margin-top:9px;display:flex;align-items:baseline;gap:4px;}
.checkout .succard .sc-price b{font-size:25px;font-weight:600;letter-spacing:-.8px;}
.checkout .succard .sc-price .per{font-size:12px;color:var(--co-text-3);}
.checkout .succard .sc-body{padding:13px 17px 16px;flex:1;}
.checkout .sfeat{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.checkout .sfeat li{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:var(--co-text-2);}
.checkout .sfeat li i,.checkout .sfeat li svg{width:14px;height:14px;color:var(--co-success);flex:none;margin-top:1px;font-size:11px;}
.checkout .sfeat li .fv{margin-left:auto;font-weight:600;color:var(--co-text);font-family:var(--co-mono);font-size:11.5px;text-align:right;}
.checkout .sfeat li .fk{color:var(--co-text-3);}
.checkout .pay-rows{display:flex;flex-direction:column;}
.checkout .pay-rows .pr{display:flex;align-items:flex-start;gap:10px;padding:9px 0;font-size:12.5px;border-top:1px solid var(--co-line-2);}
.checkout .pay-rows .pr:first-child{border-top:none;}
.checkout .pay-rows .pr .pk{color:var(--co-text-3);}
.checkout .pay-rows .pr .pv{margin-left:auto;font-weight:600;text-align:right;}
.checkout .pay-rows .pr .pv.mono{font-family:var(--co-mono);}
.checkout .pay-rows .pr .pv.pill{color:var(--co-success);background:color-mix(in srgb,var(--co-success) 15%,transparent);
  padding:2px 9px;border-radius:99px;font-size:11.5px;display:inline-flex;align-items:center;gap:5px;}
.checkout .pay-note{font-size:11px;color:var(--co-text-3);line-height:1.55;margin-top:11px;padding-top:11px;border-top:1px solid var(--co-line-2);}
.checkout .doc-row{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--co-text-2);padding:5px 0;}
.checkout .doc-row .dl-btn{margin-left:auto;}
.checkout .dl-btn{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--co-pink-soft);
  border:1px solid var(--co-line);border-radius:8px;padding:7px 12px;cursor:pointer;transition:.15s;background:var(--co-surface);}
.checkout .dl-btn:hover{border-color:var(--co-cta-hover);color:var(--co-pink-soft);}
.checkout .dl-btn svg{width:14px;height:14px;}
.checkout .done-actions{display:flex;gap:12px;justify-content:center;margin-top:28px;flex-wrap:wrap;}


/*# sourceMappingURL=application-3801de0c.css.map*/