/*
 * Direct Charge — block/shortcode front-end styles.
 * Blokko's own brand colors, from the 2026-03 brand kit: #412E79
 * primary, #513A97 accent. Whitelabel builds this plugin FOR Blokko under
 * contract, so using Blokko's own palette here is the client's brand, not
 * a third-party trademark (see docs/02-comunicacion-cliente/PREGUNTAS-
 * ABIERTAS.md). Enqueued only when a Direct Charge instance actually
 * renders (Admin/ChargeRenderer::render()) — never loaded globally.
 */

.blokko-charge-form {
  max-width: 420px;
  margin: 1.5em 0;
}

.blokko-charge-label {
  margin: 0 0 0.5em;
  font-size: 1.2em;
}

.blokko-charge-description {
  margin: 0 0 1em;
  color: inherit;
  opacity: 0.85;
}

.blokko-charge-amount {
  margin: 0 0 1em;
  font-size: 1.4em;
  font-weight: 600;
}

.blokko-charge-amount input[type="number"] {
  font-size: 1em;
  padding: 0.4em 0.6em;
}

.blokko-charge-submit {
  /* Deliberately its own background + text color, never inherited from
	 * the active theme (the bug this file exists to fix: the button
	 * rendered with invisible text — light-on-light — on at least one real
	 * theme because it had no styles of its own at all). */
  display: inline-block;
  background-color: #412e79;
  color: #ffffff;
  border: 2px solid transparent;
  border-radius: 4px;
  padding: 0.75em 1.75em;
  font-size: 1em;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out;
}

.blokko-charge-submit:hover {
  background-color: #513a97;
}

.blokko-charge-submit:focus-visible {
  outline: none;
  border-color: #513a97;
  box-shadow: 0 0 0 3px rgba(81, 58, 151, 0.35);
}

.blokko-charge-submit:disabled {
  background-color: #9a90b8;
  color: #f2f0f8;
  cursor: not-allowed;
}