/* ================================
   CHECKOUT.CSS - v3.2.4
   Spiritualize Checkout Steps
   ================================ */

/* ========== VISIBILIDADE DOS STEPS ========== */
.spz-step {
  display: none;
}
.spz-step.is-active {
  display: block;
}
.elementor-editor-active .spz-step {
  display: block !important;
}

/* ========== ESTRUTURA DA TABELA (GRID) ========== */
/* Cart Review + Order Review */
.spz-cart-header,
.spz-row,
.spz-delivery-row,
.spz-discount-row,
.spz-total-row,
.spz-order-header,
.spz-order-row,
.spz-order-delivery-row,
.spz-order-discount-row,
.spz-order-total-row {
  display: grid;
  grid-template-columns: 60% 40%;
  align-items: center;
  position: relative;
}

.spz-col-1,
.spz-col-item,
.spz-delivery-label,
.spz-discount-label,
.spz-total-label,
.spz-order-col-item,
.spz-order-delivery-label,
.spz-order-discount-label,
.spz-order-total-label {
  text-align: left;
}

.spz-col-2,
.spz-col-val,
.spz-delivery-val,
.spz-discount-val,
.spz-total-val,
.spz-order-col-val,
.spz-order-delivery-val,
.spz-order-discount-val,
.spz-order-total-val {
  text-align: left;
}

.spz-row,
.spz-order-row {
  border-bottom: 1px solid transparent;
}

.spz-cart-footer,
.spz-order-footer {
  display: block;
  width: 100%;
}

/* Divisor vertical - Cart Review + Order Review */
.spz-cart-table.has-vertical-divider .spz-cart-header::after,
.spz-cart-table.has-vertical-divider .spz-row::after,
.spz-cart-table.has-vertical-divider .spz-delivery-row::after,
.spz-cart-table.has-vertical-divider .spz-discount-row::after,
.spz-cart-table.has-vertical-divider .spz-total-row::after,
.spz-order-table.has-vertical-divider .spz-order-header::after,
.spz-order-table.has-vertical-divider .spz-order-row::after,
.spz-order-table.has-vertical-divider .spz-order-delivery-row::after,
.spz-order-table.has-vertical-divider .spz-order-discount-row::after,
.spz-order-table.has-vertical-divider .spz-order-total-row::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: #e0e0e0;
  width: 1px;
  height: 70%;
  left: 60%;
}

/* ========== PROGRESS BAR ========== */
.spz-steps-progress {
  display: flex;
}

.spz-step-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.spz-step-dot span {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ========== PAYMENT METHODS ========== */
.spz-payment-methods {
  display: flex;
  flex-direction: column;
}

.spz-payment-method {
  display: block;
  cursor: pointer;
  transition: all 0.3s ease;
}

.spz-payment-method-content {
  display: flex;
  flex-direction: column;
}

.spz-payment-method input[type="radio"] {
  display: none !important;
}

/* ========== DELIVERY SPEED ========== */
.spz-delivery-options {
  display: flex;
  width: 100%;
}

.spz-delivery-options.layout-vertical {
  flex-direction: column;
}

.spz-delivery-options.layout-horizontal {
  flex-direction: row;
  flex-wrap: nowrap;
}

.spz-delivery-options.layout-horizontal .spz-delivery-option {
  flex: 1;
  min-width: 0;
}

.spz-delivery-option {
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.spz-delivery-label {
  font-weight: 600;
  display: block;
}

.spz-delivery-description {
  display: block;
  font-size: 0.9em;
}

/* ========== CUPOM ========== */
.spz-coupon-input-wrapper {
  display: flex;
  align-items: stretch;
}

.spz-coupon-input {
  flex: 1;
  border: 1px solid #ddd;
}

.spz-coupon-btn {
  flex: 1;
  flex-shrink: 0;
  cursor: pointer;
  border: none;
  background: #000;
  color: #fff;
}

/* ✅ v3.2.4 FIX: Cupom aplicado ocupa 100% da largura */
.spz-coupon-applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100% !important;
  flex: 1 1 100% !important;
}

.spz-coupon-remove {
  cursor: pointer;
  background: none;
  border: none;
  font-size: 20px;
  flex-shrink: 0;
}

/* ========== NAVIGATION ========== */
.spz-navigation {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.spz-navigation > div {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.spz-nav-primary,
.spz-nav-secondary {
  width: 100%;
  text-decoration: none;
  display: block;
  text-align: center;
  box-sizing: border-box;
}

.spz-btn {
  cursor: pointer;
  border: none;
  background: transparent;
  transition: all 0.3s ease;
}

.spz-btn:disabled {
  cursor: not-allowed;
}

/* ========== ASTERISCOS DE CAMPOS OBRIGATÓRIOS ========== */

/* Adicionar asterisco via CSS nos campos obrigatórios */
.spz-billing-fields .spz-required-field,
.spz-payment-form .spz-required-field,
.spz-payment-forms .spz-required-field,
.spz-gateway-fields .spz-required-field {
  position: relative;
}

.spz-billing-fields .spz-required-field::after,
.spz-payment-form .spz-required-field::after,
.spz-payment-forms .spz-required-field::after,
.spz-gateway-fields .spz-required-field::after {
  content: '*';
  color: #dc2626; /* COR DO ASTERISCO - ALTERE AQUI */
  font-weight: bold;
  font-size: 16px;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 10;
}

/* Ajuste específico para campos do Asaas que ficam em 33.33% */
#asaas-cc-security-code_field.spz-required-field::after,
#asaas-cc-security_code_field.spz-required-field::after {
  right: 20px; /* Mais espaço à direita nos campos menores */
}

/* ========== WOOCOMMERCE RESETS - BILLING ========== */
.spz-billing-fields .woocommerce-input-wrapper {
  width: 100%;
}

.spz-billing-fields input,
.spz-billing-fields select,
.spz-billing-fields textarea {
  width: 100% !important;
  box-sizing: border-box;
}

.spz-billing-fields input:focus,
.spz-billing-fields select:focus,
.spz-billing-fields textarea:focus {
  outline: none;
}

/* Ocultar campos preenchidos automaticamente */
.spz-billing-fields #billing_first_name_field,
.spz-billing-fields #billing_last_name_field,
.spz-billing-fields #billing_phone_field {
  display: none !important;
}

/* Garantir que CPF e email estejam visíveis */
.spz-billing-fields #billing_email_field,
.spz-billing-fields #billing_cpf_field {
  display: block !important;
}

/* ========== GATEWAY - ESTRUTURA ========== */

/* Esconder campos billing duplicados nos gateways */
.spz-payment-forms .woocommerce-billing-fields,
.spz-payment-forms #billing_first_name_field,
.spz-payment-forms #billing_last_name_field,
.spz-payment-forms #billing_email_field,
.spz-payment-forms #billing_phone_field,
.spz-payment-forms #billing_cpf_field,
.spz-payment-forms #billing_cnpj_field {
  display: none !important;
}

/* Ocultar descrição do gateway */
.spz-payment-form .payment_box,
.spz-payment-form .woocommerce-info,
.spz-payment-form p:first-of-type,
.spz-payment-forms .payment_box p,
.spz-gateway-fields > p:first-child,
.spz-payment-form .wc-payment-form p:first-child,
.spz-gateway-fields .wc-payment-form p:first-child {
  display: none !important;
}

/* Ocultar label "Data de Expiração" do Asaas */
#asaas-cc-expiration-label_field,
#assas-cc-expiration-label_field,
.asaas-cc-form-field-no-margin {
  display: none !important;
}

/* ========== GATEWAY - FORÇAR ESTILOS HERDADOS ========== */
.spz-payment-form input:not([type="radio"]):not([type="checkbox"]),
.spz-payment-form select,
.spz-payment-form textarea,
.spz-payment-forms input:not([type="radio"]):not([type="checkbox"]),
.spz-payment-forms select,
.spz-payment-forms textarea,
.spz-gateway-fields input:not([type="radio"]):not([type="checkbox"]),
.spz-gateway-fields select,
.spz-gateway-fields textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
  color: inherit !important;
}

/* Placeholders */
.spz-payment-form input::placeholder,
.spz-payment-form textarea::placeholder,
.spz-payment-forms input::placeholder,
.spz-payment-forms textarea::placeholder,
.spz-gateway-fields input::placeholder,
.spz-gateway-fields textarea::placeholder {
  text-transform: lowercase !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  opacity: 0.6 !important;
}

.spz-payment-form input:focus,
.spz-payment-form select:focus,
.spz-payment-form textarea:focus,
.spz-payment-forms input:focus,
.spz-payment-forms select:focus,
.spz-payment-forms textarea:focus {
  outline: none !important;
}

/* Ocultar labels */
.spz-payment-form label,
.spz-payment-forms label,
.spz-gateway-fields label {
  display: none !important;
}

/* Espaçamento base dos form-row */
.spz-payment-form .form-row,
.spz-payment-forms .form-row,
.spz-gateway-fields .form-row {
  width: 100% !important;
  margin-bottom: 16px !important;
  padding: 0 !important;
}

/* ========== ASAAS - 3 COLUNAS (MÊS, ANO, CVV) ========== */

/* Wrapper com flexbox */
.asaas-cc-form-wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
}

/* Nome - 100% */
#asaas-cc-name_field {
  width: 100% !important;
  margin-right: 0 !important;
}

/* Número - 100% */
#asaas-cc-number_field {
  width: 100% !important;
  margin-right: 0 !important;
}

/* Mês - 33.33% */
#asaas-cc-expiration-month_field {
  width: 33.33% !important;
  margin-right: 0 !important;
  padding-right: 8px !important;
}

/* Ano - 33.33% */
#asaas-cc-expiration-year_field {
  width: 33.33% !important;
  margin-right: 0 !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
}

/* CVV - 33.33% (forçar mesmo que tenha form-row-wide) */
#asaas-cc-security-code_field,
#asaas-cc-security_code_field,
#asaas-cc-security-code_field.form-row-wide,
#asaas-cc-security_code_field.form-row-wide {
  width: 33.33% !important;
  margin-right: 0 !important;
  padding-left: 8px !important;
  flex-basis: 33.33% !important;
  max-width: 33.33% !important;
}

/* Resetar padding interno dos inputs para evitar conflito */
#asaas-cc-expiration-month_field .input-text,
#asaas-cc-expiration-year_field .input-text,
#asaas-cc-security-code_field .input-text,
#asaas-cc-security_code_field .input-text,
#asaas-cc-security-code_field.form-row-wide .input-text,
#asaas-cc-security_code_field.form-row-wide .input-text {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* ========== OCULTAR ASTERISCOS OBRIGATÓRIOS DO WOOCOMMERCE ========== */
.spz-billing-fields .required,
.spz-billing-fields abbr[title="required"],
.spz-payment-form .required,
.spz-payment-form abbr[title="required"],
.spz-payment-forms .required,
.spz-gateway-fields .required,
.spz-step .required,
.spz-step abbr[title="required"] {
  display: none !important;
  visibility: hidden !important;
}

/* ========== REMOVER VALIDAÇÃO VERDE/VERMELHA DO WOOCOMMERCE ========== */

/* Remover TUDO do WooCommerce - box-shadow, background-image, border-color */
.woocommerce form .form-row.woocommerce-validated input.input-text,
.woocommerce form .form-row.woocommerce-validated select,
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select,
.woocommerce-page form .form-row.woocommerce-validated input.input-text,
.woocommerce-page form .form-row.woocommerce-validated select,
.woocommerce-page form .form-row.woocommerce-invalid input.input-text,
.woocommerce-page form .form-row.woocommerce-invalid select,
.spz-billing-fields .form-row.woocommerce-validated input,
.spz-billing-fields .form-row.woocommerce-invalid input,
.spz-billing-fields input.woocommerce-validated,
.spz-billing-fields input.woocommerce-invalid,
.spz-payment-form .form-row.woocommerce-validated input,
.spz-payment-form .form-row.woocommerce-invalid input,
.spz-payment-form input.woocommerce-validated,
.spz-payment-form input.woocommerce-invalid,
.spz-payment-forms .form-row.woocommerce-validated input,
.spz-payment-forms .form-row.woocommerce-invalid input,
.spz-payment-forms input.woocommerce-validated,
.spz-payment-forms input.woocommerce-invalid,
.spz-gateway-fields .form-row.woocommerce-validated input,
.spz-gateway-fields .form-row.woocommerce-invalid input,
.spz-gateway-fields input.woocommerce-validated,
.spz-gateway-fields input.woocommerce-invalid {
  box-shadow: none !important;
  background-image: none !important;
  outline: none !important;
  border-color: #A080D8 !important; /* Forçar cor da borda configurada no Elementor */
}

/* Remover ícones :before e :after */
.spz-billing-fields .woocommerce-validated::after,
.spz-billing-fields .woocommerce-invalid::after,
.spz-billing-fields .woocommerce-validated::before,
.spz-billing-fields .woocommerce-invalid::before,
.spz-billing-fields .form-row.woocommerce-validated::after,
.spz-billing-fields .form-row.woocommerce-invalid::after,
.spz-billing-fields .form-row.woocommerce-validated::before,
.spz-billing-fields .form-row.woocommerce-invalid::before,
.spz-payment-form .woocommerce-validated::after,
.spz-payment-form .woocommerce-invalid::after,
.spz-payment-form .woocommerce-validated::before,
.spz-payment-form .woocommerce-invalid::before,
.spz-payment-form .form-row.woocommerce-validated::after,
.spz-payment-form .form-row.woocommerce-invalid::after,
.spz-payment-form .form-row.woocommerce-validated::before,
.spz-payment-form .form-row.woocommerce-invalid::before,
.spz-payment-forms .woocommerce-validated::after,
.spz-payment-forms .woocommerce-invalid::after,
.spz-payment-forms .woocommerce-validated::before,
.spz-payment-forms .woocommerce-invalid::before,
.spz-payment-forms .form-row.woocommerce-validated::after,
.spz-payment-forms .form-row.woocommerce-invalid::after,
.spz-payment-forms .form-row.woocommerce-validated::before,
.spz-payment-forms .form-row.woocommerce-invalid::before,
.spz-gateway-fields .woocommerce-validated::after,
.spz-gateway-fields .woocommerce-invalid::after,
.spz-gateway-fields .woocommerce-validated::before,
.spz-gateway-fields .woocommerce-invalid::before,
.spz-gateway-fields .form-row.woocommerce-validated::after,
.spz-gateway-fields .form-row.woocommerce-invalid::after,
.spz-gateway-fields .form-row.woocommerce-validated::before,
.spz-gateway-fields .form-row.woocommerce-invalid::before,
.woocommerce-validated::after,
.woocommerce-invalid::after,
.woocommerce-validated::before,
.woocommerce-invalid::before {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* ========== ANIMAÇÃO SHAKE - SEM AFETAR BORDER ========== */

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-10px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(10px);
  }
}

/* Classe aplicada manualmente por JS - APENAS transform */
.spz-field-shake {
  animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
  /* NÃO sobrescrever nenhuma propriedade de borda */
}

/* ========== MENSAGENS DE ERRO ========== */
.spz-error-container {
  width: 100%;
  cursor: pointer;
  transition: all 0.3s ease;
}

.spz-error-message {
  width: 100%;
}

/* ========== NOTIFICAÇÕES ========== */
.spz-notification {
  display: none;
  width: 100%;
}

.spz-notification-message {
  width: 100%;
}

/* Transições suaves */
.spz-notification {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Asterisco roxo nos campos obrigatórios */
.spz-required-field label::after {
    content: ' *';
    color: #A080D8;
    font-weight: bold;
}

/* Garantir que funciona mesmo com classes do WooCommerce */
.woocommerce-billing-fields .spz-required-field label::after,
.spz-payment-form .spz-required-field label::after,
.spz-payment-forms .spz-required-field label::after,
.spz-gateway-fields .spz-required-field label::after {
    content: ' *';
    color: #A080D8;
    font-weight: bold;
}

/* Se o Brazilian Market ou outro plugin já adicionar asterisco,
   remover o padrão e usar o nosso */
.spz-required-field label abbr,
.spz-required-field label .required {
    display: none;
}