/* ==========================================================================
   Checkout Transparente Cielo - Estilos Premium
   Fase 2: Estilização completa com visual de cartão realista e animações 3D
   ========================================================================== */

/* ==========================================================================
   1. CSS Variables (Design Tokens AUREA)
   ========================================================================== */
:root {
  /* ==========================================================================
     1.1 TOKENS PRIMITIVOS (Primary Layer)
     ========================================================================== */
  
  /* Cores Neutras */
  --aurea-neutral-900: #070707;
  --aurea-neutral-800: #191919;
  --aurea-neutral-700: #393939;
  --aurea-neutral-600: #6d6d6d;
  --aurea-neutral-500: #b1b1b1;
  --aurea-neutral-400: #e0e0e0;
  --aurea-neutral-300: #eaeaea;
  --aurea-neutral-200: #e5e5e5;
  --aurea-neutral-100: #f5f5f5;
  --aurea-neutral-000: #ffffff;
  
  /* Cores Primárias (Azul AUREA) */
  --aurea-primary-900: #213bfd;
  --aurea-primary-800: #384ffe;
  --aurea-primary-700: #2b7afb;
  --aurea-primary-600: #5093ff;
  --aurea-primary-500: #8fb9ff;
  --aurea-primary-400: #b7d2ff;
  --aurea-primary-300: #d1e2ff;
  --aurea-primary-200: #e4eeff;
  --aurea-primary-100: #eff4ff;
  
  /* Cores RED CRM (Accent) */
  --aurea-accent-900: #ff0058;
  --aurea-accent-800: #ff2670;
  --aurea-accent-700: #ff5791;
  --aurea-accent-600: #ff90b6;
  --aurea-accent-100: #fff1f6;
  
  /* Cores UX - Checkout (Melhorias UX) */
  --btn-active: #FF0058;
  --btn-hover: #FF337A;
  --btn-disabled-opacity: 0.3;
  --color-error-ux: #FF0004;
  --color-success-ux: #00FF72;
  --color-loading: #FF0058;
  --border-active: #FF0058;
  --text-price: #000000;

  /* Aliases usados em boleto parcelado / dual UI (evita var() indefinido) */
  --aurea-brand-primary: var(--aurea-primary-800);
  --aurea-brand-primary-rgb: 56, 79, 254;
  --aurea-brand-primary-dark: var(--aurea-primary-900);
  --aurea-neutral-050: #fafafa;
  --aurea-success-500: var(--aurea-success-600);
  
  /* Cores de Sucesso */
  --aurea-success-900: #00ff72;
  --aurea-success-800: #21ff84;
  --aurea-success-700: #43ff97;
  --aurea-success-600: #6fffb0;
  --aurea-success-100: #eefff6;
  
  /* Cores de Alerta/Erro */
  --aurea-alert-900: #ff0000;
  --aurea-alert-800: #ff4747;
  --aurea-alert-700: #ff7676;
  --aurea-alert-100: #fff1f1;
  
  /* Cores de Warning */
  --aurea-warning-900: #ff8800;
  --aurea-warning-800: #ff9823;
  --aurea-warning-700: #ffb45f;
  --aurea-warning-100: #fff8f0;
  
  /* Espaçamentos AUREA */
  --aurea-spacing-2: 0.125rem;
  --aurea-spacing-4: 0.25rem;
  --aurea-spacing-8: 0.5rem;
  --aurea-spacing-10: 0.625rem;
  --aurea-spacing-16: 1rem;
  --aurea-spacing-18: 1.125rem;
  --aurea-spacing-20: 1.25rem;
  --aurea-spacing-24: 1.5rem;
  --aurea-spacing-28: 1.75rem;
  --aurea-spacing-36: 2.25rem;
  --aurea-spacing-48: 3rem;
  --aurea-spacing-54: 3.375rem;
  --aurea-spacing-64: 4rem;
  
  /* Border Radius AUREA */
  --aurea-radius-3xs: 2px;
  --aurea-radius-2xs: 4px;
  --aurea-radius-xs: 8px;
  --aurea-radius-sm: 10px;
  --aurea-radius-md: 12px;
  --aurea-radius-lg: 14px;
  --aurea-radius-xl: 16px;
  --aurea-radius-2xl: 18px;
  --aurea-radius-3xl: 24px;
  --aurea-radius-full: 999px;
  
  /* Border Width AUREA */
  --aurea-border-xs: 1px;
  --aurea-border-sm: 2px;
  --aurea-border-md: 3px;
  --aurea-border-lg: 4px;
  
  /* ==========================================================================
     1.2 TOKENS SEMÂNTICOS (Semantic Layer)
     ========================================================================== */
  
  /* Superfícies */
  --aurea-surface-main: var(--aurea-neutral-100);
  --aurea-surface-sunken: var(--aurea-neutral-200);
  --aurea-surface-card: var(--aurea-neutral-000);
  --aurea-surface-tertiary: var(--aurea-neutral-400);
  
  /* Texto */
  --aurea-text-title: var(--aurea-neutral-800);
  --aurea-text-subtitle: var(--aurea-neutral-700);
  --aurea-text-primary: var(--aurea-neutral-600);
  --aurea-text-description: var(--aurea-neutral-500);
  --aurea-text-inverse: var(--aurea-neutral-400);
  
  /* Cores Funcionais */
  --aurea-color-success: var(--aurea-success-800);
  --aurea-color-error: var(--aurea-alert-900);
  --aurea-color-warning: var(--aurea-warning-900);
  --aurea-color-info: var(--aurea-primary-900);
  
  /* Estados de Botão Primário */
  --aurea-btn-primary-default: var(--aurea-primary-800);
  --aurea-btn-primary-hover: var(--aurea-primary-900);
  --aurea-btn-primary-pressed: var(--aurea-primary-600);
  --aurea-btn-primary-disabled: var(--aurea-primary-200);
  
  /* Estados de Botão Secundário */
  --aurea-btn-secondary-default: var(--aurea-primary-200);
  --aurea-btn-secondary-hover: var(--aurea-primary-300);
  --aurea-btn-secondary-pressed: var(--aurea-primary-400);
  
  /* ==========================================================================
     1.3 MAPEAMENTO PARA VARIÁVEIS LEGACY (Compatibilidade)
     ========================================================================== */
  
  /* Cores principais */
  --color-primary: var(--aurea-neutral-800);
  --color-secondary: var(--aurea-primary-800);
  --color-secondary-dark: var(--aurea-primary-900);
  --color-success: var(--aurea-color-success);
  --color-success-dark: #059669;
  --color-error: var(--aurea-color-error);
  --color-error-dark: #dc2626;
  --color-warning: var(--aurea-color-warning);
  
  /* Cores do cartão */
  --card-gradient-start: var(--aurea-neutral-800);
  --card-gradient-mid: #2d3561;
  --card-gradient-end: #3d4f7c;
  --card-chip-gold: #d4af37;
  --card-chip-gold-dark: #b8860b;
  
  /* Cores de texto */
  --text-primary: var(--aurea-text-title);
  --text-secondary: var(--aurea-text-subtitle);
  --text-muted: var(--aurea-text-description);
  --text-light: var(--aurea-neutral-000);
  
  /* Backgrounds */
  --bg-body: var(--aurea-surface-main);
  --bg-card: var(--aurea-surface-card);
  --bg-input: var(--aurea-neutral-100);
  
  /* Bordas */
  --border-light: var(--aurea-neutral-300);
  --border-focus: var(--aurea-primary-800);
  
  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-card: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
  --shadow-card-hover: 0 30px 60px -15px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 40px rgba(56, 79, 254, 0.15);
  
  /* Espaçamentos (mantendo nomes legacy) */
  --spacing-xs: var(--aurea-spacing-4);
  --spacing-sm: var(--aurea-spacing-8);
  --spacing-md: var(--aurea-spacing-16);
  --spacing-lg: var(--aurea-spacing-24);
  --spacing-xl: var(--aurea-spacing-36);
  --spacing-2xl: var(--aurea-spacing-48);
  
  /* Border radius (mantendo nomes legacy) */
  --radius-sm: var(--aurea-radius-xs);
  --radius-md: var(--aurea-radius-sm);
  --radius-lg: var(--aurea-radius-md);
  --radius-xl: var(--aurea-radius-xl);
  --radius-card: var(--aurea-radius-xl);
  --radius-full: var(--aurea-radius-full);
  
  /* Transições */
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow: 500ms ease;
  --transition-flip: 600ms cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Tipografia */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Courier New', monospace;
}

/* ==========================================================================
   2. Reset e Base Styles
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  background: var(--bg-body);
  background-color: var(--bg-body);
  color: var(--text-primary);
  min-height: 100vh;
  line-height: 1.6;
  /* Removido flex centralizado para suportar layout de duas colunas */
}

/* Classe utilitária para acessibilidade */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   3. Container Principal
   ========================================================================== */
.checkout-container {
  width: 100%;
  max-width: 440px;
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl), var(--shadow-glow);
  padding: var(--spacing-xl);
  animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 768px) {
  .checkout-container {
    max-width: 480px;
    padding: var(--spacing-2xl);
  }
}

/* ==========================================================================
   4. Header
   ========================================================================== */
.checkout-header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.checkout-logo {
  display: block;
  width: 195px;
  height: 52px;
  margin: 0 auto var(--spacing-lg);
  object-fit: contain;
}

@media (min-width: 768px) {
  .checkout-logo {
    width: 150px;
    height: 40px;
  }
}

.checkout-header h1 {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
  letter-spacing: -0.025em;
}

.checkout-subtitle {
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

/* ==========================================================================
   5. Área de Conteúdo
   ========================================================================== */
.checkout-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

/* Layout lado a lado no desktop */
@media (min-width: 900px) {
  .checkout-container {
    max-width: 900px;
    padding: var(--spacing-2xl);
  }
  
  .checkout-content {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--spacing-2xl);
  }
  
  .card-preview {
    flex: 0 0 380px;
    position: sticky;
    top: var(--spacing-xl);
    margin: 0;
  }
  
  .payment-form {
    flex: 1;
    min-width: 0;
  }
}

/* ==========================================================================
   6. Preview do Cartão de Crédito
   ========================================================================== */
.card-preview {
  perspective: 1000px;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
}

.card-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 1.586 / 1;
  transition: transform var(--transition-flip);
  transform-style: preserve-3d;
  cursor: default;
}

/* Flip quando CVV em foco */
.card-preview.flipped .card-inner {
  transform: rotateY(180deg);
}

/* Efeito hover sutil */
.card-preview:hover .card-inner:not(.card-preview.flipped .card-inner) {
  transform: rotateY(-5deg) rotateX(5deg);
}

/* Faces do cartão */
.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius-card);
  overflow: hidden;
}

/* ==========================================================================
   6.1 Frente do Cartão
   ========================================================================== */
.card-front {
  background: linear-gradient(
    135deg,
    var(--card-gradient-start) 0%,
    var(--card-gradient-mid) 50%,
    var(--card-gradient-end) 100%
  );
  box-shadow: var(--shadow-card);
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--text-light);
}

/* Efeito de brilho no cartão */
.card-front::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.03) 45%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0.03) 55%,
    transparent 60%
  );
  pointer-events: none;
}

/* Padrão decorativo */
.card-front::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 60%);
  pointer-events: none;
}

/* Chip do cartão */
.card-chip {
  width: 50px;
  height: 38px;
  background: linear-gradient(
    135deg,
    var(--card-chip-gold) 0%,
    var(--card-chip-gold-dark) 50%,
    var(--card-chip-gold) 100%
  );
  border-radius: 6px;
  position: relative;
  box-shadow: 
    inset 0 1px 1px rgba(255, 255, 255, 0.4),
    0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Linhas do chip */
.card-chip::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 4px;
  right: 4px;
  height: 1px;
  background: rgba(0, 0, 0, 0.2);
}

.card-chip::after {
  content: '';
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 50%;
  width: 1px;
  background: rgba(0, 0, 0, 0.2);
}

/* Logo da bandeira */
.card-logo {
  position: absolute;
  top: var(--spacing-lg);
  right: var(--spacing-lg);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  min-width: 60px;
  min-height: 40px;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Imagem do logo da bandeira */
.card-logo img {
  max-width: 70px;
  max-height: 45px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Estilos específicos por bandeira */
.card-logo.brand-visa {
  color: #ffffff;
  font-style: italic;
}

.card-logo.brand-visa img {
  max-width: 80px;
  max-height: 50px;
}

.card-logo.brand-mastercard {
  color: #ff5f00;
}

.card-logo.brand-mastercard img {
  max-width: 60px;
  max-height: 45px;
}

.card-logo.brand-amex img {
  max-width: 90px;
  max-height: 35px;
}

.card-logo.brand-elo img {
  max-width: 70px;
  max-height: 40px;
}

.card-logo.brand-amex {
  color: #006fcf;
  font-size: 1rem;
}

.card-logo.brand-elo {
  color: #ffcb05;
}

.card-logo.brand-hipercard {
  color: #b3131b;
}

/* Número do cartão */
.card-number {
  font-family: var(--font-mono);
  font-size: 1.375rem;
  letter-spacing: 0.2em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  margin: var(--spacing-md) 0;
  word-spacing: 0.5em;
}

/* Info do titular e validade */
.card-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--spacing-md);
}

.card-holder-group,
.card-expiry-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.card-expiry-group {
  text-align: right;
}

.card-label {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.7;
}

.card-holder {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-expiry {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.1em;
}

/* ==========================================================================
   6.2 Verso do Cartão
   ========================================================================== */
.card-back {
  background: linear-gradient(
    135deg,
    var(--card-gradient-end) 0%,
    var(--card-gradient-mid) 50%,
    var(--card-gradient-start) 100%
  );
  box-shadow: var(--shadow-card);
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  padding: 0;
}

/* Tarja magnética */
.card-stripe {
  width: 100%;
  height: 50px;
  background: linear-gradient(
    180deg,
    #1a1a1a 0%,
    #2d2d2d 50%,
    #1a1a1a 100%
  );
  margin-top: var(--spacing-lg);
}

/* Área de assinatura e CVV */
.card-signature-strip {
  margin: var(--spacing-lg) var(--spacing-lg) 0;
  margin-left: auto;
  width: 75%;
  background: linear-gradient(
    90deg,
    #f5f5f5 0%,
    #ffffff 50%,
    #f5f5f5 100%
  );
  background-size: 8px 100%;
  height: 44px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 var(--spacing-md);
  position: relative;
}

/* Linhas de assinatura */
.card-signature-strip::before {
  content: '';
  position: absolute;
  left: var(--spacing-sm);
  right: 60px;
  top: 50%;
  transform: translateY(-50%);
  height: 20px;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 4px,
    #e0e0e0 4px,
    #e0e0e0 5px
  );
}

.card-cvv {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-style: italic;
  color: #333;
  background: #fff;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: 2px;
  min-width: 45px;
  text-align: center;
  letter-spacing: 0.1em;
}

/* ==========================================================================
   7. Formulário de Pagamento
   ========================================================================== */
.payment-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.payment-form fieldset {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
}

/* Labels */
.form-group label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color var(--transition-fast);
}

.form-group:focus-within label {
  color: var(--border-active);
}

/* Inputs */
.form-group input {
  width: 100%;
  padding: 0.875rem var(--spacing-md);
  background: var(--bg-input);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--text-primary);
  transition: 
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast);
}

.form-group input::placeholder {
  color: var(--text-muted);
}

/* Estado Focus */
.form-group input:focus {
  outline: none;
  border-color: var(--aurea-primary-800);
  background: var(--aurea-surface-card);
  box-shadow: 0 0 0 4px rgba(56, 79, 254, 0.15);
}

/* Estado Error */
.form-group input.error,
.form-group input:invalid:not(:placeholder-shown):not(:focus) {
  border-color: var(--aurea-alert-900);
  background-color: var(--aurea-alert-100);
}

.form-group input.error:focus {
  box-shadow: 0 0 0 4px rgba(255, 0, 0, 0.1);
}

/* Estado Success */
.form-group input.success {
  border-color: var(--aurea-success-800);
  background-color: var(--aurea-success-100);
}

.form-group input.success:focus {
  box-shadow: 0 0 0 4px rgba(33, 255, 132, 0.15);
}

/* Estado Disabled */
.form-group input:disabled {
  background-color: #f3f4f6;
  cursor: not-allowed;
  opacity: 0.7;
}

/* Hints */
.hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  transition: color var(--transition-fast);
}

.form-group:focus-within .hint {
  color: var(--text-secondary);
}

/* Error message */
.error-message {
  font-size: 0.75rem;
  color: var(--color-error);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.error-message::before {
  content: '⚠';
  font-size: 0.875rem;
}

/* ==========================================================================
   8. Botão de Pagamento
   ========================================================================== */
.btn-pay {
  width: 100%;
  padding: var(--spacing-md) var(--spacing-lg);
  background: linear-gradient(135deg, var(--aurea-btn-primary-default) 0%, var(--aurea-btn-primary-hover) 100%);
  color: var(--aurea-neutral-000);
  border: none;
  border-radius: var(--aurea-radius-md);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 600;
  cursor: pointer;
  transition: 
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    background var(--transition-fast);
  position: relative;
  overflow: hidden;
}

.btn-pay::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.5s ease;
}

.btn-pay:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(56, 79, 254, 0.4);
}

.btn-pay:hover:not(:disabled)::before {
  left: 100%;
}

.btn-pay:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 4px 15px rgba(56, 79, 254, 0.3);
}

.btn-pay:disabled {
  background: var(--aurea-btn-primary-disabled);
  color: var(--aurea-neutral-600);
  cursor: not-allowed;
  transform: none;
}

/* Texto do botão */
.btn-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
}

/* Estado Loading */
.btn-loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
}

.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: var(--text-light);
  border-radius: var(--radius-full);
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ==========================================================================
   9. Área de Feedback
   ========================================================================== */
.feedback {
  margin-top: var(--spacing-lg);
}

.feedback-success,
.feedback-error {
  padding: var(--spacing-xl);
  border-radius: var(--radius-lg);
  text-align: center;
  animation: slideIn 0.4s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Sucesso - Cores AUREA */
.feedback-success {
  background: linear-gradient(135deg, var(--aurea-success-100) 0%, #d2ffe6 100%);
  border: 1px solid var(--aurea-success-800);
}

.feedback-success .feedback-icon {
  color: var(--aurea-success-800);
}

.feedback-success .feedback-title {
  color: #065f46;
}

.feedback-success .feedback-message {
  color: #047857;
}

/* Erro - Cores AUREA */
.feedback-error {
  background: linear-gradient(135deg, var(--aurea-alert-100) 0%, #ffe0e0 100%);
  border: 1px solid var(--aurea-alert-900);
}

.feedback-error .feedback-icon {
  color: var(--aurea-alert-900);
}

.feedback-error .feedback-title {
  color: #991b1b;
}

.feedback-error .feedback-message {
  color: #b91c1c;
}

/* Elementos do feedback */
.feedback-icon {
  display: block;
  font-size: 3rem;
  margin-bottom: var(--spacing-sm);
  line-height: 1;
}

.feedback-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: var(--spacing-xs);
}

.feedback-message {
  font-size: 0.9375rem;
  margin-bottom: var(--spacing-md);
  opacity: 0.9;
}

.transaction-details {
  font-size: 0.8125rem;
  opacity: 0.7;
  padding-top: var(--spacing-sm);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* Botão Retry */
.btn-retry {
  padding: var(--spacing-sm) var(--spacing-lg);
  background: var(--aurea-alert-800);
  color: var(--aurea-neutral-000);
  border: none;
  border-radius: var(--aurea-radius-md);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.btn-retry:hover {
  background: var(--aurea-alert-900);
  transform: translateY(-1px);
}

.btn-retry:active {
  transform: translateY(0);
}

/* ==========================================================================
   10. Footer
   ========================================================================== */
.checkout-footer {
  margin-top: var(--spacing-xl);
  text-align: center;
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border-light);
}

.security-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.lock-icon {
  font-size: 1rem;
}

/* ==========================================================================
   11. Utilitários
   ========================================================================== */
[hidden] {
  display: none !important;
}

/* ==========================================================================
   12. Responsividade
   ========================================================================== */

/* Mobile pequeno (< 375px) */
@media (max-width: 374px) {
  .checkout-container {
    padding: var(--spacing-md);
  }
  
  .card-number {
    font-size: 1.125rem;
    letter-spacing: 0.15em;
  }
  
  .form-row {
    grid-template-columns: 1fr;
  }
}

/* Tablet e acima (>= 768px) */
@media (min-width: 768px) {
  .checkout-header h1 {
    font-size: 2rem;
  }
  
  .card-preview {
    max-width: 380px;
  }
  
  .card-number {
    font-size: 1.5rem;
  }
}

/* ==========================================================================
   13. Animações de Entrada
   ========================================================================== */
.card-preview {
  animation: cardFloat 0.8s ease-out;
}

@keyframes cardFloat {
  from {
    opacity: 0;
    transform: translateY(-30px) rotateX(10deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotateX(0);
  }
}

.payment-form {
  animation: formSlide 0.6s ease-out 0.2s both;
}

@keyframes formSlide {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   14. Estados de Foco para Acessibilidade
   ========================================================================== */
.btn-pay:focus-visible,
.btn-retry:focus-visible {
  outline: 3px solid var(--aurea-primary-600);
  outline-offset: 2px;
}

.form-group input:focus-visible {
  outline: none;
}

/* ==========================================================================
   15. Ícones SVG das Bandeiras
   ========================================================================== */

/* Container para ícone SVG */
.card-logo svg {
  width: 60px;
  height: 40px;
}

/* Visa - Estilo texto (JS insere "VISA") */
/* O texto já é inserido via JavaScript */

/* Mastercard - Usa imagem, pseudo-elementos removidos */
/* Os círculos foram substituídos pelo logo oficial */

/* American Express */
.card-logo.brand-amex {
  font-size: 0.75rem;
  background: #006fcf;
  padding: 4px 8px;
  border-radius: 4px;
  letter-spacing: 0;
}

/* Elo */
.card-logo.brand-elo {
  font-weight: 800;
  font-size: 1.5rem;
  color: #ffcb05;
  text-shadow: 
    1px 1px 0 #000,
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000;
}

/* Hipercard */
.card-logo.brand-hipercard {
  color: #b3131b;
  font-weight: 700;
  font-size: 0.9rem;
}

/* Diners */
.card-logo.brand-diners {
  color: #004c97;
  font-size: 0.8rem;
  font-weight: 600;
}

/* Discover */
.card-logo.brand-discover {
  color: #ff6000;
  font-weight: 700;
  font-style: italic;
}

/* JCB */
.card-logo.brand-jcb {
  background: linear-gradient(135deg, #0066b3 0%, #00a651 50%, #ed1c24 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800;
}

/* ==========================================================================
   16. Preferências de Movimento Reduzido
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .card-inner {
    transition: none;
  }
  
  .card-preview:hover .card-inner {
    transform: none;
  }
}

/*
 * Exceção: indicador de progresso da modal de checkout (WCAG — feedback de carregamento
 * deve permanecer perceptível; ver comentário em #processing-loading no index.html).
 */
@media (prefers-reduced-motion: reduce) {
  .processing-modal .processing-spinner,
  .processing-modal .processing-spinner::before,
  .processing-modal .processing-spinner::after {
    animation-duration: 1s !important;
    animation-iteration-count: infinite !important;
  }
}

/* ==========================================================================
   17. Seletor de Método de Pagamento
   ========================================================================== */

.payment-method-selector {
  margin-bottom: var(--spacing-lg);
}

.method-options {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.method-option {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--bg-input);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: 
    border-color var(--transition-fast),
    background-color var(--transition-fast),
    box-shadow var(--transition-fast);
  position: relative;
}

.method-option:hover {
  border-color: var(--border-active);
  background: var(--aurea-surface-card);
}

.method-option.active {
  border-color: var(--border-active);
  background: var(--aurea-surface-card);
  box-shadow: 0 0 0 3px rgba(255, 0, 88, 0.1);
}

.method-option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-light);
  border-radius: 50%;
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color 0.2s ease, border-width 0.15s ease;
  background: white;
  margin: 0;
}

.method-option.active input[type="radio"],
.method-option input[type="radio"]:checked {
  border-color: var(--btn-active);
  border-width: 6px;
}

.method-icon {
  font-size: 1.5rem;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-input);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

/* Logo dos métodos de pagamento */
.method-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.method-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.method-name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.9375rem;
}

.method-desc {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.method-check {
  display: none;
}

/* Cores de fundo do ícone por método de pagamento */
.method-option[data-method="credit-card"] .method-icon { background: #eef2ff; }
.method-option[data-method="pix"] .method-icon { background: #e0f2f1; }
.method-option[data-method="boleto"] .method-icon { background: #fff8e1; }
.method-option[data-method="dois_meios"] .method-icon { background: #fff3e0; }
.method-option[data-method="cartao-recorrente"] .method-icon { background: #fce4ec; }

/* Badge informativo no seletor de método (ex.: "Mais usado") */
.method-badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 12px;
  background: #e8f5e9;
  color: #2e7d32;
  white-space: nowrap;
  margin-left: auto;
  flex-shrink: 0;
}

/* ==========================================================================
   18. Formulários por Método de Pagamento
   ========================================================================== */

.payment-form-section {
  animation: fadeIn 0.3s ease-out;
  width: 100%; /* Garante largura consistente entre formulários */
}

.payment-form-section[hidden] {
  display: none;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Container dos formulários */
#payment-forms-container {
  width: 100%;
}

/* Botão PIX - Verde AUREA */
.btn-pix {
  background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
}

.btn-pix:hover:not(:disabled) {
  box-shadow: 0 8px 25px rgba(20, 184, 166, 0.4);
}

/* Botão Boleto - Warning AUREA */
.btn-boleto {
  background: linear-gradient(135deg, var(--aurea-warning-900) 0%, var(--aurea-warning-800) 100%);
}

.btn-boleto:hover:not(:disabled) {
  box-shadow: 0 8px 25px rgba(255, 136, 0, 0.4);
}

/* Select estilizado */
.form-group select {
  width: 100%;
  padding: 0.875rem var(--spacing-md);
  padding-right: 2.5rem;
  background: var(--bg-input);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--text-primary);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  transition: 
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.form-group select:focus {
  outline: none;
  border-color: var(--aurea-primary-800);
  box-shadow: 0 0 0 4px rgba(56, 79, 254, 0.15);
}

.form-group select:disabled {
  background-color: #f3f4f6;
  cursor: not-allowed;
  opacity: 0.7;
}

/* Grid de formulário melhorado */
.form-group--small {
  flex: 0 0 80px;
}

.form-group--large {
  flex: 1;
}

/* Form row com proporções diferentes */
.form-row {
  display: flex;
  gap: var(--spacing-md);
}

.form-row .form-group--small {
  flex: 0 0 80px;
}

.form-row .form-group--large {
  flex: 1;
}

.form-row .form-group--half {
  flex: 1;
}

/* ==========================================================================
   19. Seletor de Parcelamento
   ========================================================================== */

.installments-summary {
  margin-top: var(--spacing-sm);
  padding: var(--spacing-md);
  background: linear-gradient(135deg, var(--aurea-primary-100) 0%, var(--aurea-primary-200) 100%);
  border: 1px solid var(--aurea-primary-400);
  border-radius: var(--aurea-radius-md);
  font-size: 0.875rem;
}

.installments-summary p {
  margin: 0;
  color: var(--text-secondary);
}

.installments-summary p + p {
  margin-top: var(--spacing-xs);
}

.installments-summary strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* Destaque para parcelas com juros */
.installments-summary.has-interest {
  background: linear-gradient(135deg, var(--aurea-warning-100) 0%, #fff6eb 100%);
  border-color: var(--aurea-warning-700);
}

.installments-summary.has-interest #total-with-interest strong {
  color: var(--aurea-warning-900);
}

/* Select de parcelas estilizado */
#installments {
  font-weight: 500;
}

/* ==========================================================================
   20. Preview PIX
   ========================================================================== */

.payment-preview {
  padding: var(--spacing-xl);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  text-align: center;
  animation: slideIn 0.4s ease-out;
}

.preview-header {
  margin-bottom: var(--spacing-lg);
}

.preview-icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: var(--spacing-sm);
}

.preview-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
}

.preview-subtitle {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

/* QR Code Container */
.qr-code-container {
  background: white;
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  display: inline-block;
  margin-bottom: var(--spacing-lg);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-light);
}

#qr-code-canvas {
  display: block;
}

/* PIX Copy/Paste */
.pix-copy-paste {
  margin-bottom: var(--spacing-md);
}

.pix-copy-paste label {
  display: block;
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
}

.copy-container {
  display: flex;
  gap: var(--spacing-sm);
}

.copy-container input {
  flex: 1;
  padding: 0.75rem var(--spacing-md);
  background: var(--bg-input);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-primary);
  min-width: 0;
}

.btn-copy {
  padding: 0.75rem var(--spacing-md);
  background: var(--aurea-primary-800);
  color: var(--aurea-neutral-000);
  border: none;
  border-radius: var(--aurea-radius-md);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background var(--transition-fast);
  white-space: nowrap;
}

.btn-copy:hover {
  background: var(--aurea-primary-900);
}

.btn-copy.copied {
  background: var(--aurea-success-800);
}

.pix-expiration {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
}

.pix-expiration strong {
  color: var(--color-error);
  font-family: var(--font-mono);
}

/* ==========================================================================
   21. Preview Boleto
   ========================================================================== */

.boleto-info {
  margin-bottom: var(--spacing-lg);
}

.boleto-barcode {
  background: white;
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-md);
  overflow: hidden;
  border: 1px solid var(--border-light);
}

.boleto-barcode svg {
  display: block;
  margin: 0 auto;
}

.boleto-line {
  text-align: left;
}

.boleto-line label {
  display: block;
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
}

.boleto-expiration {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-lg);
}

.boleto-expiration strong {
  color: var(--text-primary);
}

.boleto-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.btn-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-xl);
  background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
  color: white;
  text-decoration: none;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1rem;
  transition: 
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.btn-download:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 152, 0, 0.4);
}

/* Botão secundário */
.btn-secondary {
  padding: var(--spacing-sm) var(--spacing-lg);
  background: transparent;
  color: var(--aurea-text-subtitle);
  border: 2px solid var(--aurea-neutral-300);
  border-radius: var(--aurea-radius-md);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: 
    border-color var(--transition-fast),
    color var(--transition-fast);
}

.btn-secondary:hover {
  border-color: var(--aurea-primary-800);
  color: var(--aurea-primary-800);
}

/* ==========================================================================
   22. Estilos específicos do PIX Preview
   ========================================================================== */

.pix-preview {
  background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%);
  border: 1px solid #5eead4;
}

.pix-preview .preview-icon {
  color: #14b8a6;
}

.pix-preview .preview-title {
  color: #0f766e;
}

/* ==========================================================================
   23. Estilos específicos do Boleto Preview
   ========================================================================== */

.boleto-preview {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 1px solid #fcd34d;
}

.boleto-preview .preview-icon {
  color: #f59e0b;
}

.boleto-preview .preview-title {
  color: #b45309;
}

/* ==========================================================================
   24. Responsividade adicional para novos componentes
   ========================================================================== */

@media (max-width: 374px) {
  .method-options {
    gap: var(--spacing-xs);
  }
  
  .method-option {
    padding: var(--spacing-sm);
  }
  
  .method-icon {
    width: 36px;
    height: 36px;
    font-size: 1.25rem;
  }
  
  .method-name {
    font-size: 0.8125rem;
  }
  
  .method-desc {
    font-size: 0.75rem;
  }
  
  .copy-container {
    flex-direction: column;
  }
  
  .copy-container input {
    font-size: 0.625rem;
  }
  
  .boleto-actions {
    gap: var(--spacing-xs);
  }
  
  .btn-download {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.875rem;
  }
}

/* Desktop layout para checkout */
@media (min-width: 900px) {
  #payment-forms-container {
    flex: 1;
    min-width: 0;
  }
}

/* ==========================================================================
   25. Esconder preview do cartão quando não é método cartão
   ========================================================================== */

.card-preview[hidden] {
  display: none !important;
}

/* ==========================================================================
   26. NOVO LAYOUT - Two-Column Checkout (Phase 5)
   ========================================================================== */

/* Página principal - Design Flat AUREA */
.checkout-page {
  width: 100%;
  min-height: 100vh;
  background: var(--aurea-surface-main);
  padding: var(--spacing-lg);
}

/* Grid de duas colunas */
.checkout-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
  max-width: 1200px;
  margin: 0 auto;
  animation: fadeInUp 0.6s ease-out;
}

/* Desktop: duas colunas */
@media (min-width: 900px) {
  .checkout-page {
    padding: var(--spacing-2xl);
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }
  
  .checkout-grid {
    grid-template-columns: 1fr 380px;
    gap: var(--spacing-2xl);
    align-items: start;
  }
}

@media (min-width: 1100px) {
  .checkout-grid {
    grid-template-columns: 1fr 420px;
  }
}

/* ==========================================================================
   26.1 Coluna Esquerda - Área de Pagamento
   ========================================================================== */

.checkout-payment {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  width: 100%; /* Garante largura total da coluna */
}

/* Força largura consistente na coluna esquerda - evita colapso ao trocar métodos */
@media (min-width: 900px) {
  .checkout-payment {
    min-width: 520px;
    max-width: 520px;
  }
}

@media (min-width: 1100px) {
  .checkout-payment {
    min-width: 560px;
    max-width: 560px;
  }
}

/* Header do checkout */
.checkout-payment .checkout-header {
  text-align: left;
  margin-bottom: 0;
}

.checkout-payment .checkout-logo {
  width: 140px;
  height: auto;
  margin: 0 0 var(--spacing-md) 0;
}

.checkout-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
  letter-spacing: -0.025em;
}

.checkout-payment .checkout-subtitle {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  text-align: left;
}

/* Wrapper dos formulários */
.payment-forms-wrapper {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
  width: 100%;
  box-sizing: border-box;
}

/* Seletor de método dentro do wrapper */
.checkout-payment .payment-method-selector {
  margin-bottom: 0;
}

/* ==========================================================================
   26.2 Coluna Direita - Resumo da Compra
   ========================================================================== */

.checkout-summary {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

/* Sticky no desktop: resumo + CTA permanecem visíveis no topo ao rolar o formulário */
@media (min-width: 900px) {
  .checkout-summary {
    position: sticky;
    top: var(--spacing-lg);
    align-self: start;
    max-height: calc(100vh - var(--spacing-lg) * 2);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Mobile: formulário aparece primeiro, resumo depois */
@media (max-width: 899px) {
  .checkout-summary {
    order: 1; /* Resumo vem depois do formulário no mobile */
  }
  
  .checkout-payment {
    order: 0; /* Formulário vem primeiro no mobile */
  }
}

/* ==========================================================================
   26.3 Resumo do Pedido
   ========================================================================== */

.order-summary {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
}

.summary-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--border-light);
}

/* Item do pedido */
.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) 0;
}

.item-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.item-name {
  font-weight: 500;
  color: var(--text-primary);
  font-size: 0.9375rem;
}

.item-description {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.item-price {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.9375rem;
  white-space: nowrap;
}

/* Linhas do resumo */
.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) 0;
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

.summary-row--fees {
  color: var(--color-warning);
}

/* Divisor */
.summary-divider {
  height: 1px;
  background: var(--border-light);
  margin: var(--spacing-sm) 0;
}

/* Total */
.summary-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
}

.summary-total span:last-child {
  color: var(--aurea-primary-800);
}

/* Badge do método de pagamento */
.summary-method {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border-light);
}

.method-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: linear-gradient(135deg, var(--aurea-primary-100) 0%, var(--aurea-primary-200) 100%);
  border: 1px solid var(--aurea-primary-400);
  border-radius: var(--aurea-radius-md);
  font-size: 0.875rem;
  color: var(--aurea-primary-900);
  font-weight: 500;
}

.method-badge-icon {
  font-size: 1rem;
}

/* ==========================================================================
   26.4 Informações de Segurança
   ========================================================================== */

.security-info {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
  text-align: center;
}

.security-info .security-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  color: var(--text-secondary);
  font-size: 0.8125rem;
  margin-bottom: var(--spacing-md);
}

.security-info .lock-icon {
  font-size: 1rem;
}

.security-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.security-logo {
  height: 24px;
  width: auto;
  opacity: 0.6;
  filter: grayscale(30%);
  transition: opacity var(--transition-fast), filter var(--transition-fast);
}

.security-logo:hover {
  opacity: 1;
  filter: grayscale(0%);
}

/* ==========================================================================
   26.5 Ajustes de Responsividade
   ========================================================================== */

/* Mobile pequeno */
@media (max-width: 374px) {
  .checkout-page {
    padding: var(--spacing-sm);
  }
  
  .payment-forms-wrapper,
  .order-summary,
  .security-info {
    padding: var(--spacing-md);
  }
  
  .checkout-title {
    font-size: 1.25rem;
  }
}

/* Tablet */
@media (min-width: 600px) and (max-width: 899px) {
  .checkout-grid {
    max-width: 600px;
  }
  
  .checkout-payment .checkout-header {
    text-align: center;
  }
  
  .checkout-payment .checkout-logo {
    margin: 0 auto var(--spacing-md);
  }
  
  .checkout-payment .checkout-subtitle {
    text-align: center;
  }
}

/* ==========================================================================
   26.6 Animações de Entrada
   ========================================================================== */

.checkout-payment {
  animation: slideInLeft 0.5s ease-out;
}

.checkout-summary {
  animation: slideInRight 0.5s ease-out 0.1s both;
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Preferência de movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  .checkout-payment,
  .checkout-summary {
    animation: none;
  }
  
  .method-option,
  .payment-form,
  .summary-row,
  .order-summary {
    transition: none !important;
  }
}

/* ==========================================================================
   26.8 Animações de Transição entre Métodos (Phase 4)
   ========================================================================== */

/* Transição suave para formulários de pagamento */
.payment-form {
  animation: fadeInSlide 0.35s ease-out;
}

.payment-form[hidden] {
  display: none !important;
}

@keyframes fadeInSlide {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Feedback visual aprimorado para seleção de método */
.method-option {
  transition: 
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.method-option:hover:not(.active) {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Transição suave para o badge do método */
.method-badge {
  transition: 
    background-color 0.3s ease,
    color 0.3s ease,
    transform 0.2s ease;
}

.method-badge.updated {
  animation: badgeUpdate 0.4s ease-out;
}

@keyframes badgeUpdate {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* Animação para linhas do resumo quando valor muda */
.summary-row {
  transition: background-color 0.3s ease;
}

.summary-row.highlight {
  animation: highlightRow 0.6s ease-out;
}

@keyframes highlightRow {
  0% {
    background-color: transparent;
  }
  30% {
    background-color: rgba(56, 79, 254, 0.1);
  }
  100% {
    background-color: transparent;
  }
}

/* Animação para o valor total */
.summary-total .summary-value {
  transition: transform 0.2s ease, color 0.2s ease;
}

.summary-total.updated .summary-value {
  animation: totalPop 0.4s ease-out;
}

@keyframes totalPop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
    color: var(--aurea-primary-800);
  }
  100% {
    transform: scale(1);
  }
}

/* ==========================================================================
   26.9 Scroll Suave para Mobile
   ========================================================================== */

/* Scroll suave global */
html {
  scroll-behavior: smooth;
}

/* Botão de scroll para resumo (mobile) */
.scroll-to-summary {
  display: none;
  position: fixed;
  bottom: var(--spacing-lg);
  right: var(--spacing-lg);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--aurea-primary-800);
  color: var(--aurea-neutral-000);
  border: none;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  z-index: 100;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.scroll-to-summary:hover {
  transform: scale(1.1);
}

.scroll-to-summary:active {
  transform: scale(0.95);
}

@media (max-width: 899px) {
  .scroll-to-summary.visible {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease-out;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ==========================================================================
   26.10 Melhorias de Acessibilidade (Phase 4)
   ========================================================================== */

/* Focus visible aprimorado */
.method-option:focus-visible {
  outline: 3px solid var(--aurea-primary-600);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(56, 79, 254, 0.2);
}

.btn:focus-visible {
  outline: 3px solid var(--aurea-primary-600);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(56, 79, 254, 0.2);
}

/* Skip link para navegação por teclado */
.skip-link {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--aurea-primary-800);
  color: var(--aurea-neutral-000);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--aurea-radius-md);
  text-decoration: none;
  font-weight: 600;
  z-index: 1000;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: var(--spacing-md);
}

/* Indicador de foco para campos de formulário */
.form-input:focus-visible,
.form-select:focus-visible {
  outline: none;
  border-color: var(--aurea-primary-800);
  box-shadow: 0 0 0 4px rgba(56, 79, 254, 0.15);
}

/* Melhor contraste para estados de erro */
.form-input.error:focus-visible {
  border-color: var(--aurea-alert-900);
  box-shadow: 0 0 0 4px rgba(255, 0, 0, 0.15);
}

/* Labels com melhor visibilidade */
.form-label {
  font-weight: 500;
}

/* Indicador visual de campo obrigatório */
.form-label[data-required]::after {
  content: " *";
  color: var(--aurea-alert-900);
}

/* Estado de loading acessível */
.btn.loading {
  position: relative;
  color: transparent;
}

.btn.loading::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  top: 50%;
  left: 50%;
  margin-left: -10px;
  margin-top: -10px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ==========================================================================
   26.7 Feedback dentro da coluna de pagamento
   ========================================================================== */

.checkout-payment .feedback {
  margin-top: 0;
}

.checkout-payment .payment-preview {
  margin-top: var(--spacing-lg);
}

/* ==========================================================================
   27. Tela de Loading Inicial (Phase 3)
   ========================================================================== */

.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--aurea-surface-main);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.loading-screen[hidden] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loading-content {
  text-align: center;
  animation: fadeInUp 0.6s ease-out;
}

.loading-logo {
  width: 160px;
  height: auto;
  margin-bottom: var(--spacing-xl);
}

.loading-spinner-large {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--spacing-lg);
  border: 4px solid rgba(56, 79, 254, 0.2);
  border-top-color: var(--aurea-primary-800);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.loading-text {
  font-size: 1rem;
  color: var(--text-secondary);
  margin: 0;
}

/* ==========================================================================
   28. Tela de Erro de Sessão (Phase 3)
   ========================================================================== */

.session-error-screen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--aurea-surface-main);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9998;
  padding: var(--spacing-lg);
}

.session-error-screen[hidden] {
  display: none;
}

.error-content {
  text-align: center;
  max-width: 480px;
  background: var(--bg-card);
  padding: var(--spacing-2xl);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  animation: fadeInUp 0.6s ease-out;
}

.error-logo {
  width: 140px;
  height: auto;
  margin-bottom: var(--spacing-lg);
}

.error-icon {
  display: block;
  font-size: 4rem;
  margin-bottom: var(--spacing-md);
  line-height: 1;
}

.error-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

.error-message {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--spacing-lg);
}

.error-details {
  font-size: 0.875rem;
  color: var(--text-muted);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border-light);
}

.error-details p {
  margin: var(--spacing-xs) 0;
}

/* Variações de ícones de erro */
.error-icon.expired { color: var(--aurea-warning-900); }
.error-icon.not-found { color: var(--aurea-alert-800); }
.error-icon.error { color: var(--aurea-alert-800); }
.error-icon.cancelled { color: var(--aurea-neutral-600); }
.error-icon.completed { color: var(--aurea-success-800); }

/* ==========================================================================
   29. Exibição de Valor da Sessão (Phase 3)
   ========================================================================== */

.session-amount-display {
  margin-bottom: var(--spacing-md);
}

.session-value-box {
  background: linear-gradient(135deg, var(--aurea-primary-100) 0%, var(--aurea-primary-200) 100%);
  border: 2px solid var(--aurea-primary-400);
  border-radius: var(--aurea-radius-md);
  padding: var(--spacing-md);
  text-align: center;
}

.session-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--aurea-primary-800);
}

/* ==========================================================================
   30. Campos de Endereço para Cartão (Phase 3)
   ========================================================================== */

.address-fieldset {
  border: none;
  padding: 0;
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--border-light);
}

.address-fieldset legend {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  padding: 0 var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.address-fieldset .form-group {
  margin-bottom: var(--spacing-md);
}

/* ==========================================================================
   31. Cliente Info Banner (Phase 3)
   ========================================================================== */

.cliente-info-banner {
  background: linear-gradient(135deg, var(--aurea-warning-100) 0%, #fff6eb 100%);
  border: 1px solid var(--aurea-warning-700);
  border-radius: var(--aurea-radius-md);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.cliente-info-banner h3 {
  font-size: 0.875rem;
  font-weight: 600;
  color: #92400e;
  margin-bottom: var(--spacing-xs);
}

.cliente-info-banner p {
  font-size: 0.875rem;
  color: #a16207;
  margin: 0;
}

.cliente-info-banner .cliente-nome {
  font-weight: 600;
}

/* ==========================================================================
   32. Polling Status Indicator (Phase 3)
   ========================================================================== */

.polling-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: rgba(33, 255, 132, 0.1);
  border-radius: var(--aurea-radius-md);
  margin-top: var(--spacing-md);
  font-size: 0.875rem;
  color: var(--aurea-success-800);
}

.polling-indicator .pulse-dot {
  width: 8px;
  height: 8px;
  background: var(--aurea-success-800);
  border-radius: 50%;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.2);
  }
}

/* ==========================================================================
   33. Sessão Modo (Ajustes para campos readonly) (Phase 3)
   ========================================================================== */

.session-mode .form-group input[readonly],
.session-mode .form-group input[disabled] {
  background-color: #f3f4f6;
  cursor: not-allowed;
  opacity: 0.8;
}

/* Esconde campos de nome/documento no modo sessão (já vem preenchidos) */
.session-mode #pix-name,
.session-mode #pix-document,
.session-mode #boleto-name,
.session-mode #boleto-document {
  background-color: #f3f4f6;
}

/* ==========================================================================
   34. Ajustes para tela de pagamento pendente PIX/Boleto (Phase 3)
   ========================================================================== */

.pix-preview .polling-indicator,
.boleto-preview .payment-pending-info {
  animation: fadeIn 0.3s ease-out;
}

.payment-pending-info {
  text-align: center;
  padding: var(--spacing-md);
  background: rgba(245, 158, 11, 0.1);
  border-radius: var(--radius-md);
  margin-top: var(--spacing-md);
}

.payment-pending-info p {
  margin: 0;
  font-size: 0.875rem;
  color: #b45309;
}

/* ==========================================================================
   35. Modal de Processamento (UX Improvements)
   ========================================================================== */

.processing-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.processing-modal[hidden] {
  display: none !important;
}

.processing-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.processing-modal-content {
  position: relative;
  background: var(--aurea-surface-card);
  padding: var(--spacing-2xl);
  border-radius: var(--aurea-radius-xl);
  text-align: center;
  max-width: 600px;
  width: 90%;
  box-shadow: var(--shadow-xl);
  animation: modalEnter 0.3s ease-out;
}

@keyframes modalEnter {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.processing-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
}

.processing-state[hidden] {
  display: none !important;
}

.processing-loading-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
}

/* Anel duplo em vermelho branding; animação sujeita à exceção prefers-reduced-motion acima */
.processing-spinner {
  position: relative;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 50%;
  background: transparent;
}

.processing-spinner::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 4px solid color-mix(in srgb, var(--color-loading) 22%, transparent);
  border-top-color: var(--color-loading);
  border-right-color: var(--aurea-accent-800);
  animation: spin 0.85s linear infinite;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-loading) 12%, transparent);
}

.processing-spinner::after {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-bottom-color: color-mix(in srgb, var(--color-loading) 45%, transparent);
  animation: spin 1.25s linear infinite reverse;
}

.processing-text {
  font-size: 1rem;
  color: var(--text-secondary);
  margin: 0;
}

.processing-subtext {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: 0;
  max-width: 22rem;
  line-height: 1.45;
}

.processing-subtext[hidden] {
  display: none !important;
}

.processing-icon {
  font-size: 3.5rem;
  display: block;
  line-height: 1;
}

.processing-icon.success {
  color: var(--color-success-ux);
}

.processing-icon.error {
  color: var(--color-error-ux);
}

.processing-modal-content h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: var(--spacing-sm) 0;
}

.processing-modal-content p {
  font-size: 1rem;
  color: var(--text-secondary);
  margin: 0 0 var(--spacing-md);
}

#processing-success-details {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-md);
  background: var(--aurea-neutral-100);
  border-radius: var(--aurea-radius-md);
}

#processing-success-details p {
  margin: var(--spacing-xs) 0;
  font-size: 0.875rem;
}

.processing-modal-content .btn-primary {
  width: 100%;
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--btn-active);
  color: var(--aurea-neutral-000);
  border: none;
  border-radius: var(--aurea-radius-md);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.processing-modal-content .btn-primary:hover {
  background: var(--btn-hover);
  transform: translateY(-1px);
}

.processing-modal-content .btn-secondary {
  width: 100%;
  padding: var(--spacing-md) var(--spacing-lg);
  background: transparent;
  color: var(--text-secondary);
  border: 2px solid var(--aurea-neutral-300);
  border-radius: var(--aurea-radius-md);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.processing-modal-content .btn-secondary:hover {
  border-color: var(--btn-active);
  color: var(--btn-active);
}

/* Estado PIX no Modal */
.processing-state-pix,
.processing-state-boleto {
  max-width: 360px;
  margin: 0 auto;
}

.modal-pix-header,
.modal-boleto-header {
  text-align: center;
  margin-bottom: var(--spacing-lg);
}

.modal-pix-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%);
  border-radius: 50%;
  margin-bottom: var(--spacing-sm);
}

.modal-pix-icon .pix-icon-img {
  width: 32px;
  height: 32px;
  filter: brightness(0) saturate(100%) invert(48%) sepia(79%) saturate(558%) hue-rotate(131deg) brightness(95%) contrast(87%);
}

.modal-boleto-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  color: var(--aurea-primary-800);
  background: linear-gradient(135deg, var(--aurea-primary-100) 0%, var(--aurea-primary-200) 100%);
  border-radius: 50%;
  margin-bottom: var(--spacing-sm);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--aurea-primary-800) 12%, transparent);
}

.modal-boleto-icon-svg {
  display: block;
}

.modal-pix-subtitle,
.modal-boleto-subtitle {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  margin: 0;
}

.modal-qr-code-container {
  background: white;
  padding: var(--spacing-md);
  border-radius: var(--aurea-radius-md);
  margin: 0 auto var(--spacing-lg);
  display: inline-block;
  border: 2px solid #e5e7eb;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

#modal-qr-code-canvas {
  display: block;
}

.modal-pix-copy-paste,
.modal-boleto-line {
  margin-bottom: var(--spacing-md);
  text-align: left;
}

.modal-pix-copy-paste label,
.modal-boleto-line label {
  display: block;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xs);
}

.modal-copy-container {
  display: flex;
  gap: var(--spacing-xs);
  background: var(--aurea-neutral-100);
  border-radius: var(--aurea-radius-md);
  padding: var(--spacing-xs);
}

.modal-copy-container input {
  flex: 1;
  background: transparent;
  border: none;
  padding: var(--spacing-sm);
  font-size: 0.75rem;
  font-family: var(--font-mono);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
}

.modal-copy-container input:focus {
  outline: none;
}

.modal-copy-container .btn-copy {
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--btn-active);
  color: white;
  border: none;
  border-radius: var(--aurea-radius-sm);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
  white-space: nowrap;
}

.modal-copy-container .btn-copy:hover {
  background: var(--btn-hover);
}

.modal-copy-container .btn-copy.copied {
  background: var(--aurea-success-800);
}

.modal-pix-expiration,
.modal-boleto-expiration {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
  text-align: center;
}

.modal-pix-expiration strong {
  color: var(--color-error);
  font-family: var(--font-mono);
}

.modal-boleto-barcode {
  background: white;
  padding: var(--spacing-md);
  border-radius: var(--aurea-radius-md);
  margin-bottom: var(--spacing-lg);
  border: 1px solid #e5e7eb;
  text-align: center;
}

.modal-boleto-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.modal-boleto-actions .btn-primary {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
}

/* Ajustar largura do modal quando em estado PIX/Boleto */
.processing-modal-content:has(.processing-state-pix:not([hidden])),
.processing-modal-content:has(.processing-state-boleto:not([hidden])) {
  max-width: 600px;
  width: 90%;
}

/* ==========================================================================
   36. Estilos UX Melhorados (Cores e Feedback)
   ========================================================================== */

/* Input Focus com nova cor */
.form-group input:focus,
.form-group select:focus {
  border-color: var(--border-active);
  box-shadow: 0 0 0 3px rgba(255, 0, 88, 0.12);
}

/* Método de pagamento selecionado com nova cor */
.method-option.active {
  border-color: var(--border-active);
  background-color: rgba(255, 0, 88, 0.04);
  box-shadow: 0 0 0 3px rgba(255, 0, 88, 0.1);
}

/* ==========================================================================
   Método de pagamento travado (modo sessão)
   ========================================================================== */

/* Container com método travado */
.payment-method-locked {
  position: relative;
}

/* Opções desabilitadas (não selecionadas quando travado) */
.method-option--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(50%);
}

.method-option--disabled:hover {
  border-color: var(--border-default);
  background: var(--bg-input);
  transform: none;
  box-shadow: none;
}

.method-option--disabled .method-check {
  display: none;
}

/* Opção ativa quando travado (indicador visual de locked) */
.method-option--locked {
  cursor: default;
}

.method-option--locked::after {
  content: '';
  position: absolute;
  top: var(--spacing-xs);
  right: var(--spacing-xs);
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff0058'%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.7;
}

/* Esconder o ícone de lock em mobile para não conflitar com o layout */
@media (max-width: 480px) {
  .method-option--locked::after {
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    width: 14px;
    height: 14px;
  }
}

/* Opção oculta por visibilidade dinâmica (payment_methods.visible) */
.method-option--hidden,
.method-option[hidden] {
  display: none !important;
}

/* PIX Discount Badge no seletor de método */
.pix-discount-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: linear-gradient(135deg, #00c853, #00a844);
  color: white;
  font-size: 0.6875rem;
  font-weight: 700;
  border-radius: 10px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 1.4;
  flex-shrink: 0;
}

.pix-discount-badge[hidden] {
  display: none !important;
}

/* Desconto PIX no resumo */
.summary-row--discount {
  color: #00a844;
}

.summary-row--discount .discount-value {
  color: #00a844;
  font-weight: 600;
}

/* Valor original riscado no resumo */
.summary-original-price {
  text-decoration: line-through;
  color: var(--text-muted);
  font-size: 0.8125rem;
  margin-left: 0.5rem;
}

/* Total do resumo em preto */
.summary-total span:last-child,
#summary-total {
  color: var(--text-price) !important;
  font-weight: 700;
}

/* Botão de pagamento com novas cores */
.btn-pay {
  background: var(--btn-active);
}

.btn-pay:hover:not(:disabled) {
  background: var(--btn-hover);
  box-shadow: 0 8px 25px rgba(255, 0, 88, 0.35);
}

.btn-pay:disabled {
  background: var(--btn-active);
  opacity: var(--btn-disabled-opacity);
}

/* Mensagem de erro com nova cor */
.feedback-error .feedback-icon,
.processing-icon.error {
  color: var(--color-error-ux);
}

/* ==========================================================================
   37. Estilos do Parcelamento na Sidebar (UX Improvements)
   ========================================================================== */

#installments-sidebar-group {
  margin-bottom: var(--spacing-lg);
}

#installments-sidebar-group .form-group label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

/* ==========================================================================
   38. CEP Input com Botão de Busca (ViaCEP)
   ========================================================================== */

.cep-input-wrapper {
  display: flex;
  gap: var(--spacing-xs);
}

.cep-input-wrapper input {
  flex: 1;
}

.btn-cep-search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--btn-active);
  color: white;
  border: none;
  border-radius: var(--aurea-radius-md);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
  white-space: nowrap;
  min-width: 80px;
}

.btn-cep-search:hover:not(:disabled) {
  background: var(--btn-hover);
}

.btn-cep-search:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.btn-cep-loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cep-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Estado de sucesso do CEP - cor primária */
.cep-success {
  border-color: var(--btn-active) !important;
}

/* Estado de erro do CEP */
.cep-error {
  border-color: var(--color-error-ux) !important;
}

/* ==========================================================================
   39.1 Card de Parcelamento na Sidebar (UX Improvements)
   ========================================================================== */

/* Parcelamento inline dentro do resumo do pedido */
.installments-inline {
  margin: var(--spacing-sm) 0;
}

.installments-inline .summary-divider {
  margin-bottom: var(--spacing-md);
}

.installments-select-group {
  margin-bottom: 0;
}

.installments-select-group label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xs);
  display: block;
}

.installments-select-group select {
  width: 100%;
  padding: 0.75rem var(--spacing-md);
  padding-right: 2.5rem;
  background: var(--bg-input);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--text-primary);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.installments-select-group select:focus {
  outline: none;
  border-color: var(--border-active);
  box-shadow: 0 0 0 3px rgba(255, 0, 88, 0.12);
}

/* ==========================================================================
   40. Botão de Pagamento na Sidebar (UX Improvements)
   ========================================================================== */

.payment-action {
  background: transparent;
}

.payment-action .btn-pay {
  width: 100%;
}

/* Botão PIX - Cor Primária */
.payment-action .btn-pay.btn-pix-style {
  background: var(--btn-active);
}

.payment-action .btn-pay.btn-pix-style:hover:not(:disabled) {
  background: var(--btn-hover);
  box-shadow: 0 8px 25px rgba(255, 0, 88, 0.35);
}

/* Botão Boleto - Cor Primária */
.payment-action .btn-pay.btn-boleto-style {
  background: var(--btn-active);
}

.payment-action .btn-pay.btn-boleto-style:hover:not(:disabled) {
  background: var(--btn-hover);
  box-shadow: 0 8px 25px rgba(255, 0, 88, 0.35);
}

/* ==========================================================================
   41. Ajustes Mobile para Novo Layout (UX Improvements)
   ========================================================================== */

@media (max-width: 899px) {
  /* No mobile, formulário aparece primeiro, resumo depois */
  .checkout-payment {
    order: 0;
  }
  
  .checkout-summary {
    order: 1;
  }
  
  /* Botão de pagamento sticky no mobile */
  .payment-action {
    position: sticky;
    bottom: 0;
    z-index: 50;
    margin: 0 calc(-1 * var(--spacing-lg));
    padding: var(--spacing-md) var(--spacing-lg);
    background: transparent;
  }
}

/* ==========================================================================
   42. Feedback como Modal - Esconder feedback inline
   ========================================================================== */

/* Esconder feedbacks inline quando usamos o modal */
.feedback-inline-hidden .feedback-success,
.feedback-inline-hidden .feedback-error {
  display: none !important;
}

/* ==========================================================================
   43. Toast de Validação
   ========================================================================== */

.validation-toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--aurea-alert-900, #dc2626);
  color: var(--aurea-neutral-000, #fff);
  border-radius: var(--aurea-radius-lg);
  box-shadow: var(--shadow-lg);
  font-size: 0.95rem;
  font-weight: 500;
  animation: toastSlideIn 0.3s ease-out;
  max-width: 90%;
}

.validation-toast[hidden] {
  display: none !important;
}

.validation-toast.toast-hiding {
  animation: toastSlideOut 0.3s ease-in forwards;
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes toastSlideOut {
  from {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  to {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
}

.toast-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
}

.toast-message {
  line-height: 1.4;
}

/* ==========================================================================
   44. Boleto Unificado (à vista + parcelado) - Formulário e Modal
   ========================================================================== */

/* Seção de parcelas do boleto unificado */
.boleto-installments-section {
  margin-bottom: var(--spacing-lg);
}

.boleto-section-header {
  text-align: center;
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--aurea-neutral-300);
}

.boleto-section-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--aurea-neutral-900);
  margin: 0 0 var(--spacing-xs) 0;
}

.boleto-total-display {
  font-size: 0.95rem;
  color: var(--aurea-neutral-600);
  margin: 0;
}

.boleto-total-display strong {
  color: var(--aurea-brand-primary);
  font-weight: 700;
}

/* Legacy: Header do formulário (retrocompat) */
.boleto-parcelado-header {
  text-align: center;
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--aurea-neutral-300);
}

.boleto-parcelado-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--aurea-neutral-900);
  margin: 0 0 var(--spacing-xs) 0;
}

.boleto-parcelado-total {
  font-size: 0.95rem;
  color: var(--aurea-neutral-600);
  margin: 0;
}

.boleto-parcelado-total strong {
  color: var(--aurea-brand-primary);
  font-weight: 700;
}

/* Grid de opções de parcelas */
.installments-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
}

.installment-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-md);
  background: var(--aurea-neutral-100);
  border: 2px solid var(--aurea-neutral-300);
  border-radius: var(--aurea-radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
}

.installment-option:hover {
  border-color: var(--aurea-brand-primary);
  background: var(--aurea-neutral-050);
}

.installment-option.selected {
  border-color: var(--aurea-brand-primary);
  background: rgba(var(--aurea-brand-primary-rgb), 0.08);
}

.installment-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.installment-option-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
}

.installment-number {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--aurea-neutral-900);
}

.installment-value {
  font-size: 0.85rem;
  color: var(--aurea-neutral-600);
}

.installment-option.selected .installment-number,
.installment-option.selected .installment-value {
  color: var(--aurea-brand-primary);
}

/* Mensagem de indisponibilidade */
.installments-unavailable {
  text-align: center;
  padding: var(--spacing-lg);
  background: var(--aurea-neutral-100);
  border-radius: var(--aurea-radius-md);
  color: var(--aurea-neutral-600);
}

.installments-unavailable p {
  margin: var(--spacing-xs) 0;
}

/* Preview das parcelas */
.installments-preview-box {
  background: var(--aurea-neutral-050);
  border: 1px solid var(--aurea-neutral-200);
  border-radius: var(--aurea-radius-md);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.preview-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--aurea-neutral-700);
  margin: 0 0 var(--spacing-sm) 0;
}

.installments-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.installment-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-xs) 0;
  border-bottom: 1px solid var(--aurea-neutral-200);
  font-size: 0.85rem;
}

.installment-item:last-child {
  border-bottom: none;
}

.installment-item-number {
  font-weight: 500;
  color: var(--aurea-neutral-800);
}

.installment-item-value {
  font-weight: 600;
  color: var(--aurea-brand-primary);
}

.installment-item-date {
  color: var(--aurea-neutral-600);
  font-size: 0.8rem;
}

/* Seções do pagador */
.boleto-payer-section,
.boleto-address-section {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--aurea-neutral-200);
}

.payer-section-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--aurea-neutral-700);
  margin: 0 0 var(--spacing-md) 0;
}

/* Modal de confirmação do Boleto Parcelado */
.processing-state-boleto-parcelado {
  max-width: 480px;
  width: 100%;
}

.modal-boleto-parcelado-header {
  text-align: center;
  margin-bottom: var(--spacing-lg);
}

.modal-boleto-parcelado-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--aurea-success-500), var(--aurea-success-700));
  border-radius: 50%;
  margin-bottom: var(--spacing-md);
}

.modal-boleto-parcelado-icon svg {
  stroke: white;
}

.modal-boleto-parcelado-subtitle {
  font-size: 1rem;
  color: var(--aurea-neutral-600);
  margin: var(--spacing-sm) 0 0 0;
}

/* Modal simplificado de boleto parcelado (mensagem + downloads individuais) */
.modal-boleto-parcelado-message {
  text-align: center;
  padding: var(--spacing-lg);
  background: var(--aurea-neutral-050);
  border-radius: var(--aurea-radius-lg);
  margin-bottom: var(--spacing-lg);
}

.boleto-parcelado-success-text {
  font-size: 1.1rem;
  color: var(--aurea-neutral-800);
  margin: 0 0 var(--spacing-md) 0;
}

.boleto-parcelado-success-text strong {
  color: var(--aurea-brand-primary);
  font-weight: 700;
}

.boleto-parcelado-info-text {
  font-size: 0.95rem;
  color: var(--aurea-neutral-600);
  margin: 0 0 var(--spacing-md) 0;
  line-height: 1.5;
}

.boleto-parcelado-valor-text {
  font-size: 0.95rem;
  color: var(--aurea-neutral-700);
  margin: 0;
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--aurea-neutral-200);
}

.boleto-parcelado-valor-text strong {
  color: var(--aurea-brand-primary);
  font-weight: 700;
  font-size: 1.1rem;
}

.boleto-parcelado-links {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
  max-height: min(52vh, 420px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: var(--spacing-xs);
  scrollbar-gutter: stable;
}

.boleto-parcelado-links-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* Card por parcela (lista gerada em script.js) */
.boleto-parcelado-download-card {
  text-align: left;
  background: var(--aurea-neutral-000);
  border: 1px solid var(--aurea-neutral-200);
  border-radius: var(--aurea-radius-lg);
  padding: var(--spacing-md);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.boleto-parcelado-download-card:hover {
  border-color: color-mix(in srgb, var(--aurea-brand-primary) 35%, var(--aurea-neutral-200));
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.boleto-parcelado-download-card.is-downloaded {
  border-color: var(--aurea-success-600);
  background: var(--aurea-success-100);
}

.boleto-parcelado-download-card__head {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
}

.boleto-parcelado-download-card__meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.boleto-parcelado-download-card__parcela {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--aurea-neutral-700);
}

.boleto-parcelado-download-card__valor {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--aurea-neutral-900);
  letter-spacing: -0.02em;
}

.boleto-parcelado-download-card__venc {
  font-size: 0.8125rem;
  color: var(--aurea-neutral-600);
  margin: 0 0 var(--spacing-sm) 0;
}

.boleto-parcelado-link-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-decoration: none;
  padding: var(--spacing-sm) var(--spacing-md);
  border: none;
  border-radius: var(--aurea-radius-md);
  color: var(--aurea-neutral-000);
  background: linear-gradient(135deg, var(--btn-active) 0%, var(--btn-hover) 100%);
  font-size: 0.9rem;
  font-weight: 600;
  transition: filter 0.2s ease, transform 0.15s ease;
  box-sizing: border-box;
}

.boleto-parcelado-link-item:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.boleto-parcelado-download-card.is-downloaded .boleto-parcelado-link-item {
  background: var(--aurea-neutral-000);
  color: var(--aurea-success-900);
  border: 1px solid var(--aurea-success-600);
}

.boleto-parcelado-download-card.is-downloaded .boleto-parcelado-link-item:hover {
  filter: none;
  transform: none;
  background: var(--aurea-success-100);
}

.boleto-parcelado-links-empty {
  margin: 0;
  text-align: center;
  color: var(--aurea-neutral-600);
  font-size: 0.9rem;
}

/* Legacy: Container dos cards de boleto (mantido para retrocompat) */
.boleto-parcelado-cards-container {
  max-height: 350px;
  overflow-y: auto;
  padding-right: var(--spacing-xs);
  margin-bottom: var(--spacing-lg);
}

@keyframes boletoCardFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Card individual de boleto */
.boleto-parcelado-card {
  background: var(--aurea-neutral-050);
  border: 1px solid var(--aurea-neutral-200);
  border-radius: var(--aurea-radius-md);
  padding: var(--aurea-spacing-16);
  margin-bottom: var(--spacing-sm);
  transition: all 0.2s ease;
  opacity: 0;
  animation: boletoCardFadeIn 0.3s ease forwards;
}

.boleto-parcelado-card:hover {
  border-color: var(--aurea-brand-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.boleto-card-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--aurea-radius-full);
  background: linear-gradient(135deg, var(--btn-active) 0%, var(--btn-hover) 100%);
  color: var(--aurea-neutral-000);
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

.boleto-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-xs);
}

.boleto-card-header-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  margin-left: var(--aurea-spacing-8);
}

.boleto-card-number {
  font-weight: 600;
  color: var(--aurea-neutral-900);
}

.boleto-card-value {
  font-weight: 700;
  color: var(--aurea-brand-primary);
  font-size: 1.1rem;
}

.boleto-card-info {
  margin-bottom: var(--spacing-sm);
}

.boleto-card-due {
  font-size: 0.85rem;
  color: var(--aurea-neutral-600);
}

.boleto-card-line {
  background: var(--aurea-neutral-100);
  border: 1px solid var(--aurea-neutral-200);
  border-radius: var(--aurea-radius-sm);
  padding: var(--aurea-spacing-8) var(--aurea-spacing-10);
  margin-bottom: var(--aurea-spacing-8);
}

.boleto-digitable-code {
  display: flex;
  align-items: center;
  gap: var(--aurea-spacing-8);
}

.boleto-digitable-code code {
  flex: 1;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.8rem;
  color: var(--aurea-neutral-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.boleto-digitable-line {
  flex: 1;
  font-family: 'Courier New', monospace;
  font-size: 0.75rem;
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--aurea-neutral-300);
  border-radius: var(--aurea-radius-sm);
  background: white;
  color: var(--aurea-neutral-700);
}

.btn-copy-line {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--aurea-text-description);
  padding: var(--aurea-spacing-4);
  border-radius: var(--aurea-radius-2xs);
  flex-shrink: 0;
  transition: color 0.2s ease, background 0.2s ease;
}

.btn-copy-line:hover {
  color: var(--btn-active);
  background: var(--aurea-accent-100);
}

.btn-copy-line.copied {
  color: var(--aurea-color-success);
}

.boleto-card-download-link {
  font-size: 0.8rem;
  color: var(--aurea-text-description);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}

.boleto-card-download-link:hover {
  color: var(--btn-active);
}

.boleto-card-download-link.is-downloaded {
  color: var(--aurea-success-700);
  font-weight: 600;
}

.boleto-card-actions {
  display: flex;
  justify-content: center;
}

.btn-download-boleto {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-md);
  background: var(--aurea-brand-primary);
  color: white;
  text-decoration: none;
  border-radius: var(--aurea-radius-sm);
  font-size: 0.85rem;
  font-weight: 500;
  transition: background 0.2s;
}

.btn-download-boleto:hover {
  background: var(--aurea-brand-primary-dark);
}

.btn-download-boleto[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

/* Footer do modal */
.modal-boleto-parcelado-footer {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

/* Ícone SVG nos métodos de pagamento */
.method-logo-svg {
  width: 28px;
  height: 28px;
  stroke: var(--aurea-neutral-600);
}

/* Boleto Unificado - Opção única (quando parcelado desabilitado) */
.boleto-single-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md);
  background: var(--aurea-neutral-50);
  border-radius: var(--radius-md);
  border: 1px solid var(--aurea-neutral-200);
}

.boleto-single-label {
  font-size: 0.9rem;
  color: var(--aurea-neutral-700);
}

.boleto-single-value {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--aurea-brand-primary);
}

/* Responsive */
@media (max-width: 480px) {
  .installments-options-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .installment-option {
    padding: var(--spacing-sm);
  }
  
  .installment-number {
    font-size: 1.1rem;
  }
  
  .installment-value {
    font-size: 0.75rem;
  }
  
  .boleto-parcelado-cards-container {
    max-height: 280px;
  }
  
  .boleto-digitable-line {
    font-size: 0.65rem;
  }
}

/* =========================================================================
   DUAL PAYMENT — 2 Meios de Pagamento (Etapa 2)
   Tokens: AUREA Design System
   ========================================================================= */

/* Header */
.dual-payment-header {
  margin-bottom: var(--aurea-spacing-24);
}

.dual-payment-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--aurea-text-title);
  margin: 0 0 var(--aurea-spacing-4);
}

.dual-payment-subtitle {
  font-size: 0.85rem;
  color: var(--aurea-text-description);
  margin: 0 0 var(--aurea-spacing-10);
}

.dual-total-display {
  font-size: 0.9rem;
  color: var(--aurea-text-subtitle);
}

.dual-total-display strong {
  color: var(--text-price);
  font-weight: 700;
}

/* Acordeão — Seções de método */
.dual-method-section {
  border: var(--aurea-border-xs) solid var(--aurea-neutral-300);
  border-radius: var(--aurea-radius-sm);
  margin-bottom: var(--aurea-spacing-16);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dual-method-section.expanded {
  border-color: var(--border-active);
  box-shadow: 0 0 0 3px rgba(255, 0, 88, 0.08);
}

.dual-method-header {
  display: flex;
  align-items: center;
  gap: var(--aurea-spacing-10);
  padding: var(--aurea-spacing-16);
  cursor: pointer;
  background: var(--aurea-surface-main);
  user-select: none;
  transition: background 0.2s ease;
}

.dual-method-header:hover {
  background: var(--aurea-surface-sunken);
}

.dual-method-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--aurea-radius-full);
  background: linear-gradient(135deg, var(--btn-active) 0%, var(--btn-hover) 100%);
  color: var(--aurea-neutral-000);
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.dual-method-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--aurea-text-title);
  flex: 1;
}

.dual-method-status {
  font-size: 0.8rem;
  padding: 2px 8px;
  border-radius: var(--aurea-radius-2xs);
  font-weight: 600;
}

.dual-method-toggle {
  font-size: 0.7rem;
  color: var(--aurea-text-description);
  transition: transform 0.2s ease;
}

.dual-method-section.expanded .dual-method-toggle {
  transform: rotate(180deg);
}

.dual-method-body {
  padding: var(--aurea-spacing-16);
  border-top: var(--aurea-border-xs) solid var(--aurea-neutral-300);
  background: var(--aurea-surface-card);
}

/* Sub-seletor PIX / Cartão */
.dual-sub-selector {
  display: flex;
  gap: var(--aurea-spacing-10);
  margin-bottom: var(--aurea-spacing-16);
}

.dual-sub-option {
  flex: 1;
  position: relative;
  cursor: pointer;
}

.dual-sub-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.dual-sub-label {
  display: block;
  padding: var(--aurea-spacing-10) var(--aurea-spacing-16);
  text-align: center;
  border: var(--aurea-border-sm) solid var(--aurea-neutral-300);
  border-radius: var(--aurea-radius-xs);
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.2s ease;
  color: var(--aurea-text-subtitle);
  background: var(--aurea-surface-card);
}

.dual-sub-option input[type="radio"]:checked + .dual-sub-label {
  border-color: var(--border-active);
  background: var(--aurea-accent-100);
  color: var(--btn-active);
}

.dual-sub-option:hover .dual-sub-label {
  border-color: var(--border-active);
}

/* Input de valor — herda padrão .form-group */
.dual-value-group {
  margin-bottom: var(--aurea-spacing-16);
}

.dual-value-group input {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-price);
}

.dual-value-readonly {
  background: var(--aurea-surface-main) !important;
  cursor: not-allowed;
  opacity: 0.8;
}

.dual-value-error {
  display: block;
  color: var(--aurea-color-error);
  font-size: 0.8rem;
  margin-top: var(--aurea-spacing-4);
}

.dual-value-hint {
  display: block;
  color: var(--aurea-neutral-600);
  font-size: 0.8rem;
  margin-top: var(--aurea-spacing-4);
}

/* Desconto PIX proporcional */
.dual-pix-discount-info {
  background: rgba(0, 200, 83, 0.06);
  border: var(--aurea-border-xs) solid rgba(0, 168, 68, 0.2);
  border-radius: var(--aurea-radius-xs);
  padding: var(--aurea-spacing-10) var(--aurea-spacing-16);
  margin-bottom: var(--aurea-spacing-16);
  font-size: 0.85rem;
  color: var(--aurea-neutral-800);
}

.dual-pix-discount-info strong {
  color: var(--text-price);
}

.pix-discount-tag {
  display: inline-block;
  background: linear-gradient(135deg, #00c853, #00a844);
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--aurea-radius-full);
  margin-right: var(--aurea-spacing-8);
}

.discount-savings {
  color: var(--aurea-neutral-700);
  font-weight: 600;
}

/* Campos de cartão/PIX dentro do acordeão */
.dual-card-fields,
.dual-pix-fields {
  animation: fadeInDown 0.2s ease;
}

.dual-card-installments-group {
  margin-top: var(--aurea-spacing-8);
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Endereço compartilhado */
.dual-address-section {
  border-top: var(--aurea-border-xs) solid var(--aurea-neutral-300);
  padding-top: var(--aurea-spacing-16);
  margin-top: var(--aurea-spacing-16);
}

/* =========================================================================
   DUAL PAYMENT MODAL — Popup de Processamento Sequencial
   ========================================================================= */

.dual-payment-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dual-payment-modal[hidden] {
  display: none;
}

.dual-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(7, 7, 7, 0.6);
  backdrop-filter: blur(4px);
}

.dual-modal-container {
  position: relative;
  background: var(--aurea-surface-card);
  border-radius: var(--aurea-radius-xl);
  max-width: 460px;
  width: 90%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(7, 7, 7, 0.25);
  animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.dual-modal-close-btn {
  position: absolute;
  top: var(--aurea-spacing-10);
  right: var(--aurea-spacing-16);
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--aurea-text-description);
  cursor: pointer;
  padding: var(--aurea-spacing-4) var(--aurea-spacing-8);
  border-radius: var(--aurea-radius-2xs);
  z-index: 1;
}

.dual-modal-close-btn:hover {
  background: var(--aurea-surface-main);
  color: var(--aurea-text-title);
}

.dual-modal-body {
  padding: var(--aurea-spacing-36);
  text-align: center;
}

/* Modal Steps */
.dual-modal-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--aurea-spacing-16);
}

.dual-modal-step h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--aurea-text-title);
  margin: 0;
}

.dual-modal-method-info {
  font-size: 0.95rem;
  color: var(--aurea-text-subtitle);
  margin: 0;
}

.dual-modal-status {
  font-size: 0.85rem;
  color: var(--aurea-text-description);
}

/* Spinner — usa accent brand */
.dual-modal-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--aurea-neutral-300);
  border-top-color: var(--btn-active);
  border-radius: var(--aurea-radius-full);
  animation: dualSpin 0.8s linear infinite;
}

@keyframes dualSpin {
  to { transform: rotate(360deg); }
}

/* Success icon */
.dual-modal-icon-success {
  width: 56px;
  height: 56px;
  border-radius: var(--aurea-radius-full);
  background: var(--aurea-color-success);
  color: var(--aurea-neutral-000);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  animation: iconScaleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes iconScaleIn {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

.dual-modal-icon-big {
  width: 72px;
  height: 72px;
  font-size: 2rem;
  background: transparent;
}

/* Error icon */
.dual-modal-icon-error {
  width: 56px;
  height: 56px;
  border-radius: var(--aurea-radius-full);
  background: var(--aurea-color-error);
  color: var(--aurea-neutral-000);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
}

.dual-modal-error-msg {
  color: var(--aurea-color-error);
  font-size: 0.9rem;
  font-weight: 500;
}

.dual-modal-info-text {
  color: var(--aurea-text-description);
  font-size: 0.85rem;
  font-style: italic;
}

/* Modal actions */
.dual-modal-actions {
  display: flex;
  gap: var(--aurea-spacing-10);
  justify-content: center;
  flex-wrap: wrap;
}

.dual-modal-proceed-btn {
  padding: var(--aurea-spacing-10) var(--aurea-spacing-24);
  font-size: 1rem;
  background: linear-gradient(135deg, var(--btn-active) 0%, var(--btn-hover) 100%);
  color: var(--aurea-neutral-000);
  border: none;
  border-radius: var(--aurea-radius-full);
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dual-modal-proceed-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 0, 88, 0.3);
}

/* Step group (Método 1 + 2) */
.dual-modal-step-group {
  display: flex;
  flex-direction: column;
  gap: var(--aurea-spacing-16);
}

.dual-modal-completed-summary {
  display: flex;
  align-items: center;
  gap: var(--aurea-spacing-8);
  padding: var(--aurea-spacing-10) var(--aurea-spacing-16);
  background: var(--aurea-success-100);
  border-radius: var(--aurea-radius-xs);
  font-size: 0.9rem;
  color: var(--aurea-success-700);
  font-weight: 600;
  flex-wrap: wrap;
}

.dual-summary-method-text {
  flex: 1;
  min-width: 0;
}

.dual-paid-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  background: var(--aurea-success-100);
  color: var(--aurea-success-700);
  border: 1px solid var(--aurea-success-700);
  border-radius: var(--aurea-radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

.dual-check {
  color: var(--aurea-color-success);
  font-weight: 700;
}

.dual-modal-divider {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--aurea-neutral-300), transparent);
  margin: var(--aurea-spacing-4) 0;
}

/* Completion summary */
.dual-modal-summary {
  width: 100%;
  text-align: left;
}

.dual-summary-row {
  display: flex;
  align-items: center;
  gap: var(--aurea-spacing-10);
  padding: var(--aurea-spacing-10) 0;
  font-size: 0.9rem;
  color: var(--aurea-text-subtitle);
}

.dual-summary-value {
  margin-left: auto;
  font-weight: 600;
  color: var(--text-price);
}

.dual-summary-divider {
  height: 1px;
  background: var(--aurea-neutral-300);
  margin: var(--aurea-spacing-4) 0;
}

.dual-summary-total {
  font-weight: 700;
  font-size: 1rem;
  color: var(--aurea-text-title);
}

.dual-modal-thanks {
  margin-top: var(--aurea-spacing-16);
  color: var(--aurea-text-description);
  font-size: 0.95rem;
}

/* PIX QR no modal */
.dual-pix-qr-container {
  margin: var(--aurea-spacing-16) 0;
}

.dual-pix-copy-container {
  width: 100%;
  text-align: left;
  margin-top: var(--aurea-spacing-16);
}

.dual-pix-copy-container label {
  display: block;
  font-size: 0.85rem;
  margin-bottom: var(--aurea-spacing-4);
  color: var(--aurea-text-description);
}

.dual-pix-expiration {
  margin-top: var(--aurea-spacing-16);
  color: var(--aurea-text-subtitle);
  font-size: 0.9rem;
}

/* Bloco de valor em destaque (boleto parcelado) */
.boleto-parcelado-valor-highlight {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--aurea-spacing-4);
  padding: var(--aurea-spacing-10) var(--aurea-spacing-24);
  background: var(--aurea-accent-100);
  border-radius: var(--aurea-radius-sm);
  width: 100%;
}

.boleto-parcelado-valor-label {
  font-size: 0.8rem;
  color: var(--aurea-text-description);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.boleto-parcelado-valor-amount {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--aurea-brand-primary);
}

/* Botão Fechar como link */
.dual-modal-close-link {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--aurea-text-description);
  font-size: 0.9rem;
  padding: var(--aurea-spacing-8);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}

.dual-modal-close-link:hover {
  color: var(--aurea-text-subtitle);
}

/* Responsive */
@media (max-width: 480px) {
  .dual-modal-container {
    width: 95%;
    border-radius: var(--aurea-radius-md);
  }

  .dual-modal-body {
    padding: var(--aurea-spacing-20);
  }

  .dual-sub-selector {
    flex-direction: column;
  }
}

/* ===== CARTÃO RECORRENTE ===== */

.recurrence-info-box {
  background: var(--aurea-bg-body);
  border: 1px solid var(--aurea-border);
  border-radius: var(--aurea-radius-md);
  padding: var(--aurea-spacing-16);
  margin-bottom: var(--aurea-spacing-20);
}

.recurrence-info-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--aurea-text-heading);
  margin: 0 0 var(--aurea-spacing-8) 0;
}

.recurrence-info-text {
  font-size: 0.85rem;
  color: var(--aurea-text-body);
  margin: 0 0 var(--aurea-spacing-8) 0;
}

.recurrence-info-note {
  font-size: 0.8rem;
  color: var(--aurea-text-subtitle);
  margin: 0;
}

.recurrence-consent {
  margin: var(--aurea-spacing-16) 0;
}

.recurrence-consent .check-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  background: var(--aurea-neutral-100);
  border-radius: var(--aurea-radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1.5px solid transparent;
}

.recurrence-consent .check-row:hover {
  background: var(--aurea-accent-100);
}

.recurrence-consent .check-row.on {
  border-color: var(--aurea-accent-900);
  background: var(--aurea-accent-100);
}

.recurrence-consent .check-box {
  width: 18px;
  height: 18px;
  border: 2px solid var(--aurea-neutral-300);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  transition: all 0.2s ease;
}

.recurrence-consent .check-row.on .check-box {
  background: var(--aurea-accent-900);
  border-color: var(--aurea-accent-900);
}

.recurrence-consent .check-box svg {
  width: 11px;
  height: 11px;
  color: #fff;
  opacity: 0;
  transition: all 0.2s ease;
}

.recurrence-consent .check-row.on .check-box svg {
  opacity: 1;
}

.recurrence-consent .check-label {
  font-size: 13px;
  color: var(--aurea-text-body);
  line-height: 1.4;
}

.sop-card-fields--recurrence {
  margin-bottom: var(--aurea-spacing-16);
}

/* ==========================================================================
   EMBEDDED MODE — loaded inside iframe with ?embedded param
   ========================================================================== */
body.is-embedded .checkout-page {
  min-height: auto;
  padding: var(--spacing-md);
}

body.is-embedded .checkout-payment .checkout-header {
  display: none;
}

@media (min-width: 768px) {
  body.is-embedded .checkout-page {
    padding: var(--spacing-lg);
  }
}