/**
 * Skin Zeke para o checkout clássico do WooCommerce.
 * Só apresentação — nenhuma mudança de markup/comportamento.
 * Design system da página de preços: Rubik, dourado #F9B233, preto #231F20.
 */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700;800&display=swap');

body.woocommerce-checkout {
  --zk-gold: #F9B233;
  --zk-gold-soft: rgba(249, 178, 51, .10);
  --zk-black: #231F20;
  --zk-gray: #6b6560;
  --zk-line: #ece7e0;
  --zk-radius: 16px;
}

body.woocommerce-checkout .woocommerce {
  font-family: 'Rubik', -apple-system, sans-serif;
  color: var(--zk-black);
}

/* ==================== Títulos ==================== */
body.woocommerce-checkout .woocommerce h3,
body.woocommerce-checkout #order_review_heading {
  font-family: 'Rubik', sans-serif;
  font-weight: 800;
  letter-spacing: -.3px;
  color: var(--zk-black);
}

/* ==================== Cards (colunas e caixas) ==================== */
body.woocommerce-checkout .woocommerce-form-login,
body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info {
  background: #fff;
  border: 1px solid var(--zk-line) !important;
  border-radius: var(--zk-radius);
}

/* Campos ficam direto no container pai (widget) — sem card próprio */
body.woocommerce-checkout .woocommerce-billing-fields,
body.woocommerce-checkout .woocommerce-additional-fields {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info {
  padding: 16px 20px;
  color: var(--zk-gray);
}
body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info a {
  color: #8a6d1a;
  font-weight: 600;
}
body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info::before {
  color: var(--zk-gold);
}

/* ==================== Campos ==================== */
body.woocommerce-checkout .woocommerce form .form-row label {
  font-weight: 600;
  font-size: 14px;
  color: var(--zk-black);
}
body.woocommerce-checkout .woocommerce form .form-row .required {
  color: #8a6d1a;
  text-decoration: none;
}

body.woocommerce-checkout .woocommerce form .form-row input.input-text,
body.woocommerce-checkout .woocommerce form .form-row textarea,
body.woocommerce-checkout .woocommerce form .form-row select,
body.woocommerce-checkout .woocommerce form .form-row .select2-selection {
  background: #fff !important;
  border: 1.5px solid var(--zk-line) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  font-family: inherit;
  font-size: 15px;
  color: var(--zk-black);
  box-shadow: none !important;
  transition: border-color .18s ease, box-shadow .18s ease;
}

body.woocommerce-checkout .woocommerce form .form-row input.input-text:focus,
body.woocommerce-checkout .woocommerce form .form-row textarea:focus,
body.woocommerce-checkout .woocommerce form .form-row select:focus {
  outline: none;
  border-color: var(--zk-gold) !important;
  box-shadow: 0 0 0 3px rgba(249, 178, 51, .25) !important;
}

body.woocommerce-checkout .woocommerce form .form-row ::placeholder {
  color: #b3aca4;
}

/* Select2/selectWoo (Estado, País): centraliza o valor verticalmente —
   a lib traz line-height/padding próprios que desalinham com o padding do campo */
body.woocommerce-checkout .select2-container .select2-selection--single {
  height: auto !important;
  min-height: 47px;
  display: flex;
  align-items: center;
}
body.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__rendered {
  line-height: normal !important;
  padding: 0 !important;
  color: var(--zk-black);
}
body.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__arrow {
  height: 100% !important;
  top: 0 !important;
  right: 12px;
}
body.woocommerce-checkout .select2-dropdown {
  border: 1.5px solid var(--zk-line);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(35, 31, 32, .12);
}
body.woocommerce-checkout .select2-results__option--highlighted {
  background: var(--zk-gold) !important;
  color: var(--zk-black) !important;
}

/* Telefone com bandeira/DDI (intl-tel-input do plugin de campos BR):
   neutraliza o fundo do seletor de bandeira e integra ao campo */
body.woocommerce-checkout .iti { width: 100%; }
body.woocommerce-checkout .iti__selected-flag,
body.woocommerce-checkout .iti__flag-container,
body.woocommerce-checkout .iti__country-container,
body.woocommerce-checkout .iti button,
body.woocommerce-checkout .iti button.iti__selected-country {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--zk-black) !important;
}
body.woocommerce-checkout .iti__selected-flag,
body.woocommerce-checkout .iti button.iti__selected-country {
  border-right: 1px solid var(--zk-line) !important;
  border-radius: 10px 0 0 10px !important;
  padding: 0 10px;
}
body.woocommerce-checkout .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag,
body.woocommerce-checkout .iti--allow-dropdown .iti button.iti__selected-country:hover {
  background: #faf8f4 !important;
}
body.woocommerce-checkout .iti__country-list {
  border: 1.5px solid var(--zk-line);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(35, 31, 32, .15);
}
body.woocommerce-checkout .iti__country.iti__highlight,
body.woocommerce-checkout .iti__country:hover {
  background: rgba(249, 178, 51, .15) !important;
}

/* CEP: o locale BR do Woo marca como form-row-last (metade direita) sem par
   na esquerda, deixando um buraco — força linha cheia */
body.woocommerce-checkout #billing_postcode_field,
body.woocommerce-checkout #shipping_postcode_field {
  width: 100% !important;
  float: none !important;
  clear: both !important;
  margin-left: 0 !important;
}

/* Campo com erro de validação */
body.woocommerce-checkout .woocommerce form .form-row.woocommerce-invalid input.input-text,
body.woocommerce-checkout .woocommerce form .form-row.woocommerce-invalid select {
  border-color: #c0392b !important;
}

/* ==================== Seu Pedido ==================== */
/* O checkout usa o widget do Elementor Pro: a coluna e-checkout__order_review
   traz um painel cinza próprio envolvendo o título + card — neutraliza */
body.woocommerce-checkout .e-checkout__order_review {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
body.woocommerce-checkout #order_review_heading {
  margin: 0 0 14px;
  padding: 0;
}

body.woocommerce-checkout .woocommerce-checkout-review-order {
  background: #fff;
  border: 2px solid var(--zk-gold) !important;
  border-radius: var(--zk-radius);
  padding: 24px !important;
  box-shadow: 0 12px 32px rgba(249, 178, 51, .18);
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table {
  border: 0 !important;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table th,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table td {
  border: 0 !important;
  border-bottom: 1px solid var(--zk-line) !important;
  padding: 12px 6px;
  font-size: 14.5px;
  background: transparent !important;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table thead th {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--zk-gray);
  border-bottom: 2px solid var(--zk-black) !important;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.order-total th,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.order-total td {
  border-bottom: 0 !important;
  font-size: 16px;
  font-weight: 700;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.order-total .first-payment-date small,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.order-total small {
  font-weight: 400;
  color: var(--zk-gray);
}

/* Caixa dos sliders de adicionais (markup do próprio plugin) */
body.woocommerce-checkout .wcs-adicionais-container {
  background: var(--zk-gold-soft) !important;
  border: 1px solid var(--zk-gold) !important;
  border-radius: 12px;
  padding: 18px !important;
}
body.woocommerce-checkout .wcs-adicionais-container h3 {
  font-size: 15px !important;
  margin-top: 0;
}

/* Sliders no padrão da página de preços */
body.woocommerce-checkout .wcs-adicionais-container input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: #e8e2d9;
  outline: none;
  margin: 8px 0 4px;
  padding: 0;
  border: 0;
  cursor: pointer;
}
body.woocommerce-checkout .wcs-adicionais-container input[type=range]::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  height: 6px;
  border-radius: 999px;
  background: transparent;
  border: 0;
}
body.woocommerce-checkout .wcs-adicionais-container input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--zk-gold);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(35, 31, 32, .35);
  cursor: pointer;
}
body.woocommerce-checkout .wcs-adicionais-container input[type=range]::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: transparent;
  border: 0;
}
body.woocommerce-checkout .wcs-adicionais-container input[type=range]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--zk-gold);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(35, 31, 32, .35);
  cursor: pointer;
}

/* ==================== Pagamento ==================== */
body.woocommerce-checkout .woocommerce-checkout-payment {
  background: #fff !important;
  border: 1px solid var(--zk-line);
  border-radius: var(--zk-radius);
}

body.woocommerce-checkout .wc_payment_method label {
  font-weight: 600;
  font-family: inherit;
}
body.woocommerce-checkout .wc_payment_method input[type=radio] {
  accent-color: var(--zk-gold);
}
body.woocommerce-checkout .woocommerce-checkout-payment div.payment_box {
  background: transparent !important;
  border-radius: 0;
  padding-left: 0 !important;
  padding-right: 0 !important;
  color: var(--zk-black);
}
body.woocommerce-checkout .woocommerce-checkout-payment div.payment_box::before {
  display: none !important;
}

/* Campos dos gateways (cartão etc.) no mesmo padrão dos demais */
body.woocommerce-checkout .woocommerce-checkout-payment div.payment_box input[type="text"],
body.woocommerce-checkout .woocommerce-checkout-payment div.payment_box input[type="tel"],
body.woocommerce-checkout .woocommerce-checkout-payment div.payment_box input[type="number"],
body.woocommerce-checkout .woocommerce-checkout-payment div.payment_box select {
  background: #fff !important;
  border: 1.5px solid var(--zk-line) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  font-family: inherit;
  font-size: 15px;
  color: var(--zk-black);
  box-shadow: none !important;
  transition: border-color .18s ease, box-shadow .18s ease;
}
body.woocommerce-checkout .woocommerce-checkout-payment div.payment_box input:focus,
body.woocommerce-checkout .woocommerce-checkout-payment div.payment_box select:focus {
  outline: none;
  border-color: var(--zk-gold) !important;
  box-shadow: 0 0 0 3px rgba(249, 178, 51, .25) !important;
}

body.woocommerce-checkout .woocommerce-privacy-policy-text,
body.woocommerce-checkout .woocommerce-privacy-policy-text p {
  font-size: 13px;
  color: var(--zk-gray);
}
body.woocommerce-checkout .woocommerce-privacy-policy-text a {
  color: #8a6d1a;
}

/* Botão finalizar: dourado da marca, hover preto+dourado */
body.woocommerce-checkout #place_order {
  background: var(--zk-gold) !important;
  color: var(--zk-black) !important;
  border: 1.5px solid var(--zk-gold) !important;
  border-radius: 10px !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  padding: 15px 24px !important;
  width: 100%;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
body.woocommerce-checkout #place_order:hover,
body.woocommerce-checkout #place_order:focus {
  background: var(--zk-black) !important;
  border-color: var(--zk-black) !important;
  color: var(--zk-gold) !important;
}