/*
 * Estilo base = el de `select/src/assets/styles/payment/_paymentCardWompi.scss`, para que el
 * comensal no note que el formulario vive en otro origen.
 *
 * Los colores del restaurante NO llegan como CSS: pay.js los pide a la API, valida cada valor
 * (hex/rgb y fuentes de una lista cerrada) y los pone con `style.setProperty`. Estas variables
 * son los únicos puntos que se pueden cambiar desde afuera.
 */
@font-face {
  font-family: "Source Sans Pro";
  font-weight: 400;
  font-display: swap;
  src: url("fonts/source-sans-pro-400.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans Pro";
  font-weight: 600;
  font-display: swap;
  src: url("fonts/source-sans-pro-600.woff2") format("woff2");
}

:root {
  --colorCheckout: #444;
  --bgColorCheckout: #fff;
  --errorColor: #e04b4b;
  --fontFamily: "Source Sans Pro";
  --radius: 6px;
  --inputHeight: 30px;
  --inputFont: 12px;
  --placeholderColor: var(--colorCheckout);
  --optionBg: var(--bgColorCheckout);
  --borderColor: var(--colorCheckout);
  --borderWidth: 1px;
  --paddingX: 15px;
  --gap: 20px;
  --fontWeight: 400;
}

* { box-sizing: border-box; }

/* ⛔ `hidden` tiene que ganar SIEMPRE: `#pp-form { display: flex }` le pasaba por encima y el
   formulario se veía abierto directo en el navegador, sin padre. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  /* Transparente: el fondo lo pone la tarjeta del select que contiene al iframe. */
  background: transparent;
  font-family: var(--fontFamily), "Source Sans Pro", system-ui, sans-serif;
  color: var(--colorCheckout);
  overflow: hidden; /* el alto lo ajusta el padre con el mensaje `resize`: sin scroll doble */
}

/* Misma fila que el formulario del select: número (264) · mes · año · CVC (90 c/u), 20 px de
   separación, y se parte en dos renglones cuando no cabe. */
#pp-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--gap);
  padding: 1px; /* que el borde no se corte contra el borde del iframe */
}
.pp-number { flex: 1 1 194px; max-width: 264px; }
/* Mes, año y CVC: 90 px como en el select, pero se achican si el iframe es angosto (nunca se
   salen del borde: el iframe no tiene scroll). */
.pp-row { display: flex; gap: var(--gap); flex: 1 1 250px; max-width: 310px; min-width: 0; }
.pp-row .pp-field { flex: 1 1 90px; max-width: 90px; min-width: 0; }
.pp-err { flex-basis: 100%; }

.pp-field { position: relative; }

.pp-field input,
.pp-field select {
  width: 100%;
  height: var(--inputHeight);
  padding: 0 var(--paddingX);
  border: var(--borderWidth) solid var(--borderColor);
  border-radius: var(--radius);
  background-color: var(--bgColorCheckout);
  color: var(--colorCheckout);
  font-family: inherit;
  font-size: var(--inputFont);
  font-weight: var(--fontWeight);
  outline: none;
  appearance: none;
}

/* Los desplegables son <select> nativos: un menú propio no se puede salir del iframe.
   La flecha es un chevron fino (⌄) como el de los selectores de los fronts, en el color del
   texto. Va con CSS (bordes de un cuadrado rotado) porque la CSP no deja cargar imágenes. */
.pp-field select {
  padding-right: 28px;
  cursor: pointer;
}
.pp-select::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 6px;
  height: 6px;
  border: solid var(--colorCheckout);
  border-width: 0 0 1.2px 1.2px;
  border-radius: 0 0 0 1px;
  transform: translateY(-75%) rotate(-45deg);
  pointer-events: none;
}
.pp-field select option {
  background-color: var(--optionBg);
  color: var(--colorCheckout);
}

/* Igual que el select (`input::placeholder { color: var(--colorCheckout) }`): sin transparencia.
   El `opacity: 1` también le gana al 0.54 que Firefox pone por defecto. */
.pp-field input::placeholder { color: var(--placeholderColor); opacity: 1; }

.pp-field input:focus,
.pp-field select:focus { box-shadow: 0 0 0 1px var(--colorCheckout); }

.pp-field .is-danger,
.pp-field input[aria-invalid="true"],
.pp-field select[aria-invalid="true"] { border-color: var(--errorColor); }

.pp-number input { padding-right: 52px; }
.pp-brand {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .8;
}

.pp-err {
  display: block;
  min-height: 0;
  color: var(--errorColor);
  font-size: 11px;
}
.pp-err:empty { display: none; }

.pp-fatal {
  margin: 0;
  font-size: 12px;
  color: var(--errorColor);
}

/* iOS hace zoom al enfocar un campo con letra de menos de 16 px, y dentro de un iframe el
   zoom deja la página corrida. En pantallas táctiles la letra sube a 16. */
@media (pointer: coarse) {
  :root { --inputFont: 16px; }
}

/* ── Tema gift card ──────────────────────────────────────────────────────────────────────
   Igual a `.container-inputs` de select/src/assets/styles/GiftCard/giftcardRedesign.scss:
   borde blanco 1 px, radio 5, fondo transparente, 33 px, letra blanca 14, placeholder #8F8F8F.
   La fila es la de la gift card: número 45 % y mes/año/CVC iguales, 14 px de separación. */
.tema-giftcard {
  --colorCheckout: #fff;
  --bgColorCheckout: transparent;
  --optionBg: #1e1e1e;
  --placeholderColor: #8F8F8F;
  --errorColor: #FF2424;
  --radius: 5px;
  --inputHeight: 33px;
  --inputFont: 14px;
  --paddingX: 9px;
  --gap: 14px;
}
.tema-giftcard #pp-form {
  display: grid;
  grid-template-columns: minmax(0, 2.45fr) repeat(3, minmax(0, 1fr));
}
.tema-giftcard .pp-row { display: contents; }
.tema-giftcard .pp-number,
.tema-giftcard .pp-row .pp-field { max-width: none; }
.tema-giftcard .pp-err { grid-column: 1 / -1; }
.tema-giftcard .pp-field select { padding-right: 24px; }
.tema-giftcard .pp-select::after { right: 9px; }
/* Angosto (celular): el número en su renglón y los otros tres debajo, como la gift card. */
@media (max-width: 420px) {
  .tema-giftcard #pp-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tema-giftcard .pp-number { grid-column: 1 / -1; }
}
@media (pointer: coarse) {
  .tema-giftcard { --inputFont: 16px; }
}
/* Sin CVC (PayU): la fila de la gift card queda número + mes + año. */
.tema-giftcard.sin-cvc #pp-form { grid-template-columns: minmax(0, 2.45fr) repeat(2, minmax(0, 1fr)); }
@media (max-width: 420px) {
  .tema-giftcard.sin-cvc #pp-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}