/* checkout-core.css
   CSS PAI (fixo): estrutura, layout, responsividade e tokens de tema via CSS variables.
   Os temas (filhos) só definem as variáveis abaixo e, opcionalmente, pequenos overrides visuais. */

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{font-size:var(--base-font-size, 16px)}

/* Layout base da página do checkout */
body{
  font-family: var(--font-family, 'Inter'), system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: var(--page-bg, #f8f8f8);
  overflow-x:hidden;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  min-height:100vh;
  padding:16px;
}

/* Tipografia mínima usada no HTML */
.text-xs{font-size:.75rem;line-height:1rem}
.text-sm{font-size:.875rem;line-height:1.25rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.font-extrabold{font-weight:800}
.uppercase{text-transform:uppercase}
.italic{font-style:italic}
.tracking-widest{letter-spacing:.1em}
.opacity-80{opacity:.8}
.text-red-500{color:var(--color-error, #ef4444)}
.mt-1{margin-top:.25rem}

/* Utilitários mínimos necessários no cartão */
.flex{display:flex}
.flex-col{flex-direction:column}
.flex-1{flex:1}
.justify-between{justify-content:space-between}
.items-start{align-items:flex-start}
.w-12{width:3rem}.h-8{height:2rem}
.rounded-sm{border-radius:.125rem}

/* Ícone dentro do input (âncora no campo, não no bloco label+input) */
.input-icon-wrap{position:relative}
.input-with-icon{position:relative;width:100%}
.with-right-icon{padding-right:48px}
.input-icon{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  width:auto;height:22px;opacity:.75;pointer-events:none
}

/* Linha inline com rolagem horizontal para muitos campos */
.inline-row{
  display:flex;
  gap:12px;
  flex-wrap:nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.field-col{
  flex:0 0 220px; /* largura base por campo; ajusta conforme necessário */
}

/* Container do aplicativo */
#payment-app{
  width:100%;
  max-width:640px;
  background: var(--surface, #fff);
  border: 1px solid var(--surface-border, transparent);
  border-radius:12px;
  box-shadow: var(--surface-shadow, 0 10px 30px rgba(0,0,0,.12));
  padding:24px
}

/* Logo slot (top/footer) */
.checkout-logo-slot{
  display:flex;
  justify-content:center;
  align-items:center;
}
.checkout-logo-slot--top{
  margin:0 0 12px;
}
.checkout-logo-slot--footer{
  margin:14px 0 0;
  padding-top:12px;
  border-top:1px solid rgba(0,0,0,.06);
}
.checkout-logo-img{
  max-height: 2rem;
  max-width: 12rem;
  width:auto;
  height:auto;
  object-fit:contain;
}
.checkout-logo-slot--unicef{
  background:#1CABE2; /* UNICEF blue */
  padding:8px 12px;
  border-radius:10px;
}

/* Cartão (estrutura e flip) */
.card-container{perspective:1000px;width:100%;max-width:420px;margin:0 auto var(--space-card-bottom, 24px)}
#credit-card-display{position:relative;transition:transform .6s;transform-style:preserve-3d;height:200px;width:100%;border-radius:12px}
#credit-card-display.flipped,.flipped#credit-card-display{transform:rotateY(180deg)}
.card-front,.card-back{
  position:absolute;width:100%;height:100%;
  backface-visibility:hidden;border-radius:12px;padding:24px;box-shadow:0 10px 25px rgba(0,0,0,.1)
}
.card-front{
  background: var(--card-front-bg, linear-gradient(45deg,#1f2937,#4b5563));
  color: var(--card-front-text, #fff); z-index:2
}
.card-back{
  background: var(--card-back-bg, linear-gradient(45deg,#4b5563,#1f2937));
  color: var(--card-back-text, #fff); transform:rotateY(180deg); z-index:1
}
.cvv-strip{
  background: var(--cvv-strip-bg, #fff);
  color: var(--cvv-strip-text, #1f2937);
  text-align:right;padding:4px 12px;font-size:14px;font-weight:700;border-radius:4px;margin-top:20px
}
#card-number-display{letter-spacing:.04em;white-space:nowrap;font-variant-numeric:tabular-nums;display:block;width:100%;overflow:hidden}
#card-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}
#card-name-display{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-expiry{display:flex;flex-direction:column;align-items:flex-end;min-width:88px;white-space:nowrap}

/* Espaçamentos e larguras usados no formulário do checkout */
.mb-4{margin-bottom:.75rem}
.mb-6{margin-bottom:1.25rem}
.space-x-4>*+*{margin-left:16px}
.w-1\/2{width:50%}
.mb-8{margin-bottom:1.5rem}

/* Formulário e botões */
#payment-form label{color:var(--label-color, #374151)}
#payment-form input[type="text"],
#payment-form input[type="password"]{
  width:100%;
  padding:8px 10px;
  font-size:0.875rem;
  border:1px solid var(--input-border, #d1d5db);
  border-radius:8px;
  outline:none;
  transition: border-color .15s, box-shadow .15s;
  background:var(--input-bg, #fff);
  color:var(--input-text, #111827);
}
#payment-form input[type="text"]:focus,
#payment-form input[type="password"]:focus{
  border-color:var(--input-focus, #3b82f6);
  box-shadow:0 0 0 3px var(--input-focus-ring, rgba(59,130,246,.2));
}
/* Neutraliza estilos de autofill */
#payment-form input:-webkit-autofill,
#payment-form input:-webkit-autofill:hover,
#payment-form input:-webkit-autofill:focus,
#payment-form input:-webkit-autofill:active{
  -webkit-text-fill-color:var(--input-text, #111827)!important;
  caret-color:var(--input-text, #111827)!important;
  box-shadow:0 0 0 1000px var(--input-bg, #ffffff) inset!important;
  transition:background-color 9999s ease-out 0s!important;
}
#payment-form input:-moz-autofill{
  background-color:var(--input-bg, #ffffff)!important;
  color:var(--input-text, #111827)!important;
  box-shadow:0 0 0 1000px var(--input-bg, #ffffff) inset!important;
}

#submit-button{
  width:100%;
  background:var(--button-bg, #2563eb);
  color:var(--button-text, #fff);
  font-weight:600;
  padding:10px 12px;
  font-size:0.875rem;
  border:none;
  border-radius:var(--button-radius, 8px);
  cursor:pointer;
  transition:background-color .2s;
  box-shadow:var(--button-shadow, 0 3px 10px rgba(37,99,235,.25));
}
#submit-button:hover{background:var(--button-bg-hover, #1d4ed8)}
#submit-button:disabled{background:var(--button-disabled-bg, #6b7280);cursor:not-allowed;box-shadow:none}

/* Modal de mensagens */
.hidden{display:none!important}
.flex{display:flex!important}
#message-modal{
  position:fixed;inset:0;background:rgba(75,85,99,.5);z-index:9999;
  align-items:center;justify-content:center;padding:16px;
}
#message-modal>div{
  background:#fff;padding:24px;border-radius:12px;max-width:420px;width:100%;
  box-shadow:0 10px 25px rgba(0,0,0,.2);text-align:center;
}

/* Modal reCAPTCHA: mesmo overlay do message-modal, z-index acima */
#recaptcha-modal{
  position:fixed;
  inset:0;
  background:rgba(75,85,99,.5);
  z-index:10000;
  align-items:center;
  justify-content:center;
  padding:16px;
}
#recaptcha-modal>div{
  background:#fff;
  padding:24px;
  border-radius:12px;
  max-width:28rem;
  width:100%;
  box-shadow:0 10px 25px rgba(0,0,0,.2);
  text-align:center;
}

#recaptcha-widget-container{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:78px;
  margin-bottom:.75rem;
  width:100%;
}