/**
 * CSS Personalizado para Checkout WooCommerce - PeqArt
 * Harmonizado com o design de https://peqart.com.br/
 * * INSTRUÇÕES DE USO:
 * 1. Copie todo este conteúdo
 * 2. No WordPress, vá em Aparência > Personalizar > CSS Adicional
 * 3. Cole o código lá
 * OU
 * 1. Faça upload deste arquivo para seu tema
 * 2. Adicione no functions.php:
 * wp_enqueue_style('peqart-checkout', get_stylesheet_directory_uri() . '/woocommerce-checkout-peqart.css');
 */

/* ========================================
   VARIÁVEIS DE CORES PEQART
   ======================================== */
:root {
  --peqart-purple: #7C3AED;
  --peqart-purple-dark: #6D28D9;
  --peqart-purple-light: #A78BFA;
  --peqart-teal: #14B8A6;
  --peqart-coral: #EF4444;
  --peqart-yellow: #F59E0B;
  --peqart-text: #1F2937;
  --peqart-gray: #6B7280;
  --peqart-light: #F9FAFB;
  --peqart-white: #FFFFFF;
  --peqart-border: #E5E7EB;
}

.woocommerce-message {
	display:none;
}

/* ========================================
   CHECKOUT - CONTAINER PRINCIPAL
   ======================================== */
.woocommerce-checkout {
  background: linear-gradient(135deg, #F9FAFB 0%, #F3F4F6 100%);
  padding: 40px 20px;
}

.woocommerce-checkout .woocommerce {
  max-width: 1200px;
  margin: 0 auto;
}

/* ========================================
   FORMULÁRIOS E CAMPOS
   ======================================== */
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select {
  border: 2px solid var(--peqart-border);
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 15px;
  transition: all 0.3s ease;
  background: var(--peqart-white);
  color: var(--peqart-text);
  width: 100%;
}

.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus {
  border-color: var(--peqart-purple);
  outline: none;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
  transform: translateY(-1px);
}

/* Labels */
.woocommerce-checkout label {
  color: var(--peqart-text);
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 8px;
  display: block;
}

.woocommerce-checkout .required {
  color: var(--peqart-coral);
  font-weight: bold;
}

/* ========================================
   SEÇÕES DO CHECKOUT
   ======================================== */
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order {
  background: var(--peqart-white);
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  margin-bottom: 24px;
}

/* Títulos das seções */
.woocommerce-checkout h3 {
  color: var(--peqart-purple);
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 3px solid var(--peqart-purple-light);
}

/* ========================================
   BOTÕES
   ======================================== */
.woocommerce-checkout .button,
.woocommerce-checkout button.button,
.woocommerce-checkout input.button,
.woocommerce-checkout #place_order {
  background: linear-gradient(135deg, var(--peqart-purple) 0%, var(--peqart-purple-dark) 100%);
  color: var(--peqart-white) !important;
  border: none;
  border-radius: 50px;
  padding: 16px 40px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
  width: 100%;
}

.woocommerce-checkout .button:hover,
.woocommerce-checkout button.button:hover,
.woocommerce-checkout input.button:hover,
.woocommerce-checkout #place_order:hover {
  background: linear-gradient(135deg, var(--peqart-purple-dark) 0%, var(--peqart-purple) 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4);
}

/* Botão secundário (cupom, etc) */
.woocommerce-checkout .button.alt,
.woocommerce-checkout .showcoupon {
  background: var(--peqart-white);
  color: var(--peqart-purple) !important;
  border: 2px solid var(--peqart-purple);
  box-shadow: none;
}

.woocommerce-checkout .button.alt:hover,
.woocommerce-checkout .showcoupon:hover {
  background: var(--peqart-purple-light);
  border-color: var(--peqart-purple-dark);
}

/* ========================================
   RESUMO DO PEDIDO
   ======================================== */
/* Corrigido: Tabela do Resumo do Pedido ocupando toda horizontal */
.woocommerce-checkout-review-order-table {
  border: none !important;
  background: var(--peqart-light);
  border-radius: 12px;
  overflow: hidden;
  width: 100%; /* << NOVO: Ocupa toda a largura */
  box-sizing: border-box; 
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  border: none !important;
  padding: 16px 20px;
  color: var(--peqart-text);
}

.woocommerce-checkout-review-order-table thead {
  background: var(--peqart-purple);
}

.woocommerce-checkout-review-order-table thead th {
  color: var(--peqart-white);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.5px;
}

.woocommerce-checkout-review-order-table tbody tr {
  border-bottom: 1px solid var(--peqart-border);
}

.woocommerce-checkout-review-order-table tbody tr:last-child {
  border-bottom: none;
}

/* Total do pedido */
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
  font-size: 22px;
  font-weight: 700;
  color: var(--peqart-purple);
  background: rgba(124, 58, 237, 0.05);
  padding: 20px;
}

/* ========================================
   MÉTODOS DE PAGAMENTO
   ======================================== */
.woocommerce-checkout #payment {
  /* Estilos removidos/ajustados aqui para dar mais controle à lista de métodos */
  background: none; /* << NOVO: Remove background do container principal de pagamento */
  box-shadow: none; /* << NOVO: Remove sombra do container principal de pagamento */
  padding: 0; /* << NOVO: Remove padding do container principal de pagamento */
  border-radius: 0;
  margin-bottom: 24px;
}

.woocommerce-checkout #payment ul.payment_methods {
  border: none !important;
  padding: 0;
  list-style: none;
  margin: 0; /* << NOVO: Remove margem do UL */
}

.woocommerce-checkout #payment .payment_method_stripe,
.woocommerce-checkout #payment .payment_method_paypal,
.woocommerce-checkout #payment .payment_method_bacs,
.woocommerce-checkout #payment li.payment_method {
  background: var(--peqart-light);
  border: 2px solid var(--peqart-border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  transition: all 0.3s ease;
}

.woocommerce-checkout #payment li.payment_method:hover {
  border-color: var(--peqart-purple-light);
  background: rgba(124, 58, 237, 0.03);
}

.woocommerce-checkout #payment .payment_method_stripe.active,
.woocommerce-checkout #payment .payment_method_paypal.active,
.woocommerce-checkout #payment li.payment_method:has(input:checked) {
  border-color: var(--peqart-purple);
  background: rgba(124, 58, 237, 0.08);
}
#payment >ul >li>label {
    font-size: 16pt;
    display: inline-block;
}
#payment >ul >li {
    background-color: #f2f1fa;
    padding: 20px;
    border-radius: 10px;
    margin-top: 10px;
}
.woocommerce-checkout #payment label {
  cursor: pointer;
  /*display: flex;*/
  align-items: center;
  gap: 12px;
  font-weight: 600;
}

.woocommerce-checkout #payment input[type="radio"] {
  appearance: none;
  width: 22px;
  height: 22px;
  border: 2px solid var(--peqart-purple);
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
}

.woocommerce-checkout #payment input[type="radio"]:checked {
  background: var(--peqart-purple);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2);
}

.woocommerce-checkout #payment input[type="radio"]:checked::before {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--peqart-white);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ========================================
   CHECKBOX E TERMOS
   ======================================== */
/* Corrigido: Alinhamento do checkbox de termos */
.woocommerce-checkout .form-row.terms {
    display: flex; /* << NOVO: Garante que o container se comporte como flexível */
    align-items: center; /* << NOVO: Alinha verticalmente o checkbox e o label */
    margin-top: 15px;
    gap: 10px;
}

.woocommerce-checkout .woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.woocommerce-checkout input[type="checkbox"] {
  appearance: none;
  width: 20px;
	position:relative;
  height: 20px;
  border: 2px solid var(--peqart-purple);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
  margin: 0; /* << NOVO: Remove margem extra */
}

.woocommerce-checkout input[type="checkbox"]:checked {
  background: var(--peqart-purple);
  border-color: var(--peqart-purple);
}

.woocommerce-checkout input[type="checkbox"]:checked::before {
  content: '✔'; /* Alterado de unicode para caractere simples */
  display: block;
  text-align: center;
  color: var(--peqart-white);
  font-size: 14px;
  font-weight: bold;
  line-height: 16px;
}

/* ========================================
   CUPOM DE DESCONTO
   ======================================== */
.woocommerce-checkout .woocommerce-form-coupon {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.05) 0%, rgba(20, 184, 166, 0.05) 100%);
  border: 2px dashed var(--peqart-purple-light);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
}

.woocommerce-checkout .woocommerce-form-coupon input.input-text {
  border-color: var(--peqart-purple-light);
  flex: 1;
}

/* ========================================
   MENSAGENS E ALERTAS
   ======================================== */
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-info {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.1) 0%, rgba(20, 184, 166, 0.05) 100%);
  border-left: 4px solid var(--peqart-teal);
  color: var(--peqart-text);
  padding: 16px 20px;
  border-radius: 8px;
  margin-bottom: 24px;
}

.woocommerce-checkout .woocommerce-error {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%);
  border-left: 4px solid var(--peqart-coral);
  color: var(--peqart-text);
  padding: 16px 20px;
  border-radius: 8px;
  margin-bottom: 24px;
}

/* ========================================
   LOADING E PROCESSAMENTO
   ======================================== */
.woocommerce-checkout .blockUI.blockOverlay {
  background: rgba(124, 58, 237, 0.1) !important;
  backdrop-filter: blur(4px);
}

.woocommerce-checkout .blockUI.blockMsg {
  background: var(--peqart-purple) !important;
  color: var(--peqart-white) !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 20px 30px !important;
  font-weight: 600;
}

/* ========================================
   BADGES E TAGS
   ======================================== */
.woocommerce-checkout .woocommerce-Price-amount {
  color: var(--peqart-purple);
  font-weight: 700;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
  .woocommerce-checkout #customer_details,
  .woocommerce-checkout #order_review,
  .woocommerce-checkout .woocommerce-checkout-review-order,
  .woocommerce-checkout #payment {
    padding: 20px;
  }

  .woocommerce-checkout h3 {
    font-size: 20px;
  }

  .woocommerce-checkout .button,
  .woocommerce-checkout button.button,
  .woocommerce-checkout input.button,
  .woocommerce-checkout #place_order {
    padding: 14px 30px;
    font-size: 14px;
  }
}

/* ========================================
   ANIMAÇÕES E TRANSIÇÕES
   ======================================== */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review {
  animation: fadeIn 0.5s ease;
}

/* ========================================
   ACESSÓRIOS VISUAIS
   ======================================== */
.woocommerce-checkout::before {
  content: '';
  position: fixed;
  top: 0;
  right: 0;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.1) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.woocommerce-checkout::after {
  content: '';
  position: fixed;
  bottom: 0;
  left: 0;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(20, 184, 166, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.woocommerce-checkout > * {
  position: relative;
  z-index: 1;
}

/* ========================================
   ÍCONES E ELEMENTOS ESPECIAIS
   ======================================== */
.woocommerce-checkout .payment_method_paypal label::before {
  content: '💳';
  margin-right: 8px;
}

.woocommerce-checkout .payment_method_stripe label::before {
  content: '💳';
  margin-right: 8px;
}

.woocommerce-checkout .payment_method_bacs label::before {
  content: '💰';
  margin-right: 8px;
}

/* ========================================
   AJUSTES SOLICITADOS - FINALIZAÇÃO DE COMPRA (Order Received)
   ======================================== */

/* Formatação do Bloco com os Detalhes do Pedido */
.woocommerce-order-details,
.woocommerce-customer-details {
    background: var(--peqart-white);
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    margin-bottom: 24px;
}

/* Ajuste para os detalhes listados (li, p) */
.woocommerce-order-details li,
.woocommerce-order-details p,
.woocommerce-customer-details address {
    color: var(--peqart-text);
    line-height: 1.8;
}

/* Destacar o texto importante */
.woocommerce-order-details strong,
.woocommerce-order-details b {
    color: var(--peqart-purple-dark);
}

/* Título Endereço de Cobrança */
.woocommerce-customer-details h2 {
    color: var(--peqart-purple);
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--peqart-border);
}

/* Ajuste para a lista de informações do pedido no topo (Order Received) */
.woocommerce-order-overview.woocommerce-thankyou-order-details.order_details {
    background: var(--peqart-light);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    border: 1px solid var(--peqart-border);
    list-style: none;
    padding-left: 20px; /* Garante que não haja recuo padrão de lista */
}

.woocommerce-order-overview.woocommerce-thankyou-order-details.order_details li {
    font-weight: 600;
    color: var(--peqart-text);
    font-size: 15px;
    border-bottom: 1px dashed var(--peqart-border);
    padding: 8px 0;
}

.woocommerce-order-overview.woocommerce-thankyou-order-details.order_details li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* ========================================
   CORREÇÕES FORÇADAS - PAGAMENTO E TERMOS
   ======================================== */

/* 1. Alinhamento dos Campos do Cartão (dentro da UL) */
/* Força os elementos de checkout do cartão a se comportarem como bloco */
.woocommerce-checkout .payment_box .form-row {
    clear: both; /* Remove qualquer float que possa estar quebrando a linha */
    width: 100%; /* Garante que ocupe a largura total */
    box-sizing: border-box;
    margin-bottom: 15px; /* Adiciona espaçamento entre os campos */
}

/* Força os campos de CVV/Vencimento/Parcelamento (geralmente uma div form-row) a usarem flexbox para alinhamento horizontal */
.woocommerce-checkout .payment_box .form-row:has(.input-text[name^="card-cvc"]),
.woocommerce-checkout .payment_box .form-row:has(.input-text[name^="card-expiry"]) {
    display: flex; /* Permite que os campos fiquem lado a lado */
    flex-wrap: wrap;
    gap: 20px; /* Espaço entre os grupos de CVV/Vencimento/Parcelamento */
}

/* Garante que os containers dos inputs dentro do bloco de pagamento se dividam corretamente */
.woocommerce-checkout .payment_box .form-row-first,
.woocommerce-checkout .payment_box .form-row-last {
    float: none; /* Remove float */
    width: 100%;
}

/* Para o bloco CVV/Vencimento */
.woocommerce-checkout .payment_box .form-row:has(.input-text[name^="card-cvc"]) .form-row-first {
    width: calc(50% - 10px); /* Divide o espaço com o form-row-last */
}
.woocommerce-checkout .payment_box .form-row:has(.input-text[name^="card-cvc"]) .form-row-last {
    width: calc(50% - 10px); /* Divide o espaço com o form-row-first */
}

/* Campo de parcelamento (select) - se for um form-row separado */
.woocommerce-checkout .payment_box select {
    width: auto; /* Deixa o campo Parcelamento com a largura que precisa */
    max-width: 100%;
}

/* 2. Correção do Checkbox de Termos e Condições */
/* Força o container principal dos termos a ser flexível */
#payment .form-row.terms {
    display: flex; 
    align-items: center; 
    gap: 10px; /* Espaçamento entre o ícone/checkbox e o texto */
    margin-top: 20px;
    padding: 0;
}

/* Garante que o label (que contém o checkbox e o texto) seja alinhado */
#payment .form-row.terms .woocommerce-form__label-for-checkbox {
    display: flex;
    align-items: center; /* Alinha o input e o texto verticalmente */
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400; /* Reduz o peso da fonte, se necessário */
    line-height: 1.4;
}

/* Garante que o input do checkbox não tenha margens extras e fique alinhado */
#payment .form-row.terms input[type="checkbox"] {
    margin: 0; 
    flex-shrink: 0; /* Impede que o checkbox encolha */
}

/* Corrige o alinhamento da div de 'private policy' que está entre o Pix e o Termos */
.woocommerce-privacy-policy-text {
    margin: 15px 0 10px;
    line-height: 1.6;
    color: var(--peqart-gray);
    font-size: 14px;
}

/* ========================================
   FIM DO CSS PERSONALIZADO PEQART
   ======================================== */