/* checkout.css — identitatea vizuală a paginii de plată (18-aug-2026).
   Se sprijină pe variabilele din theme.css; nu redefinește culorile temei, ca
   pagina să respecte modul light/dark ales de utilizator. */

.co-hero { text-align: center; padding: 8px 0 28px; }
.co-logo { max-width: min(280px, 70vw); height: auto; display: block; margin: 0 auto 10px; }
.co-by { margin: 0 0 22px; font-size: .92rem; letter-spacing: .02em; opacity: .75; }
.co-by strong { font-weight: 600; }
.co-hero h2 { margin: 0 0 6px; }
.co-hero .subtitle { margin: 0 auto; max-width: 46ch; }

.co-trust {
  list-style: none; margin: 20px auto 0; padding: 0; max-width: 640px;
  display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center;
  font-size: .88rem; opacity: .85;
}
.co-trust li { white-space: nowrap; }

/* Bandă de mod test — trebuie să se vadă imediat, dar să nu semene a eroare. */
.co-testmode {
  margin: 0 0 26px; padding: 16px 18px; border-radius: 12px;
  border: 1px dashed color-mix(in srgb, var(--primary) 55%, transparent);
  background: color-mix(in srgb, var(--primary) 7%, transparent);
}
.co-testmode-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.co-testmode-badge {
  flex: none; font-size: .72rem; font-weight: 700; letter-spacing: .09em;
  padding: 4px 9px; border-radius: 999px;
  background: var(--primary); color: var(--primary-fg);
}
.co-testmode-sub { margin: 8px 0 14px; font-size: .86rem; opacity: .8; }

.co-cards { display: flex; flex-wrap: wrap; gap: 10px; }
.co-card {
  flex: 1 1 210px; text-align: left; cursor: pointer;
  padding: 11px 13px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  background: color-mix(in srgb, currentColor 4%, transparent);
  font: inherit; color: inherit;
  transition: border-color .15s ease, transform .15s ease;
}
.co-card:hover  { border-color: var(--primary); transform: translateY(-1px); }
.co-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.co-card-num {
  display: block; font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 1rem; letter-spacing: .04em; margin-bottom: 3px;
}
.co-card-label { display: block; font-size: .8rem; opacity: .75; }
/* textul vine tradus din JS (checkout-testmode.js), nu scris aici */
.co-card.copied .co-card-label::after { content: attr(data-copiat); font-weight: 600; opacity: 1; }

.co-section-hint { margin: -4px 0 14px; font-size: .87rem; opacity: .72; }

.co-foot {
  margin: 48px 0 8px; padding-top: 22px; text-align: center; font-size: .85rem;
  border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}
.co-foot-logo { opacity: .5; margin-bottom: 8px; }
.co-foot p { margin: 0; line-height: 1.6; }

@media (max-width: 560px) {
  .co-trust { flex-direction: column; align-items: center; gap: 7px; }
  .co-trust li { white-space: normal; }
}

/* Logo-ul livrat ca fișier are wordmark-ul alb (#EAF1FF), gândit pentru fundal
   întunecat — pe tema deschisă devine ilizibil. Inline în pagină, culorile vin
   din temă, deci rămâne citibil în ambele moduri.
   ATENȚIE la convenția din theme.css: `:root` ESTE tema dark; light se declară
   explicit prin :root[data-theme="light"]. Ordinea de mai jos respectă asta. */
.co-logo-word { fill: var(--text); }
.co-logo-mark { stroke: #00FFF0; }
.co-logo-rule { fill: #00FFF0; opacity: .6; }
:root[data-theme="light"] .co-logo-mark { stroke: #00A99D; }
:root[data-theme="light"] .co-logo-rule { fill: #00A99D; opacity: .55; }