/*
Theme Name: SlotPokerPro Theme
Template: hello-elementor
Description: Tema filho do Hello Elementor
Version: 6.8.2
*/

/* =========================================
   Card-r — Card com fundo gradiente e
   borda radial gradient via pseudo-elemento
   ========================================= */

.Card-r {
  position: relative;
  background: linear-gradient(180deg, #09112B -1.11%, #07070A 100.08%);
  border-radius: 8px;
  z-index: 0;
}

/* Borda radial gradient — usa ::before com mask
   para simular borda gradiente (não suportado nativamente pelo CSS) */
.Card-r::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
  padding: 1px; /* espessura da borda */
  background: radial-gradient(ellipse at top, #B8DCFD, #111D42);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  z-index: -1;
}

/* =========================================
   CSS migrado do "CSS adicional" do Customizer
   (post 138, era vinculado ao tema pai e sumia
   ao ativar o child) — 17/07/2026
   ========================================= */

.elementor .Card-borda-radial {
  position: relative !important;
  overflow: visible !important;
  z-index: 0;
}

.elementor .Card-borda-radial::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 12px;
  padding: 1px;
  background: radial-gradient(ellipse at top, #B8DCFD 15%, #111D42 60%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 99;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════
   SlotPoker — Botões Neon (3 variantes)
   Cores: Azul | Verde | Dourado
   ═══════════════════════════════════════════════════ */

/* ── Base compartilhada ── */
.btn-neon,
.btn-neon-green,
.btn-neon-gold {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  border-radius: 4px;
  color: #ffffff;
  font-family: 'Google Sans', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  border: none;
  isolation: isolate;
  transition: filter 0.2s ease;
}

.btn-neon:hover,
.btn-neon-green:hover,
.btn-neon-gold:hover {
  filter: brightness(1.15);
}

/* ── Glow layers ──
   SVGs sem feGaussianBlur interno — blur aplicado via CSS filter
   (feGaussianBlur em data:uri background-image não funciona nos browsers)
*/
.btn-neon::before,
.btn-neon-green::before,
.btn-neon-gold::before {
  content: '';
  position: absolute;
  inset: 0;
  mix-blend-mode: screen;
  pointer-events: none;
  filter: blur(10px);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: 193px 61px, 274px 166px, 149px 102px;
  background-position: 50% 30px, 50% -42px, 50% 4px;
}

/* ════════════════════════
   AZUL  #194057
   ════════════════════════ */
.btn-neon {
  background: #194057;
  box-shadow: inset 0px 1px 3px 0px #60D8F7;
}

.btn-neon::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='193' height='61' viewBox='0 0 193 61'%3E%3Cpath fill='%2360D8F7' d='M180.3 23.037C180.3 33.404 113 48.3 95.322 48.3C77.644 48.3 12.3 33.404 12.3 23.037C12.3 12.67 89.699 30.514 95.322 12.3C100.885 30.32 180.3 12.67 180.3 23.037Z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='274' height='166' viewBox='0 0 274 166'%3E%3Cpath fill='%23185F84' d='M235 96.231C235 113.224 191.124 127 137 127C82.876 127 39 113.224 39 96.231C39 79.237 119.784 68.856 137 39C154.033 68.538 235 79.237 235 96.231Z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='149' height='102' viewBox='0 0 149 102'%3E%3Cpath fill='%23185F84' d='M136.3 62.377C136.3 77.246 108.541 89.3 74.3 89.3C40.058 89.3 12.3 77.246 12.3 62.377C12.3 47.508 63.408 38.424 74.3 12.3C85.076 38.146 136.3 47.508 136.3 62.377Z'/%3E%3C/svg%3E");
}

/* ════════════════════════
   VERDE  #255719
   ════════════════════════ */
.btn-neon-green {
  background: #255719;
  box-shadow: inset 0px 1px 3px 0px #60F78D;
}

.btn-neon-green::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='193' height='61' viewBox='0 0 193 61'%3E%3Cpath fill='%2360F78D' d='M180.3 23.037C180.3 33.404 113 48.3 95.322 48.3C77.644 48.3 12.3 33.404 12.3 23.037C12.3 12.67 89.699 30.514 95.322 12.3C100.885 30.32 180.3 12.67 180.3 23.037Z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='274' height='166' viewBox='0 0 274 166'%3E%3Cpath fill='%23188428' d='M235 96.231C235 113.224 191.124 127 137 127C82.876 127 39 113.224 39 96.231C39 79.237 119.784 68.856 137 39C154.033 68.538 235 79.237 235 96.231Z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='149' height='102' viewBox='0 0 149 102'%3E%3Cpath fill='%23188428' d='M136.3 62.377C136.3 77.246 108.541 89.3 74.3 89.3C40.058 89.3 12.3 77.246 12.3 62.377C12.3 47.508 63.408 38.424 74.3 12.3C85.076 38.146 136.3 47.508 136.3 62.377Z'/%3E%3C/svg%3E");
}

/* ════════════════════════
   DOURADO  #886003
   ════════════════════════ */
.btn-neon-gold {
  background: #886003;
  box-shadow: inset 0px 1px 3px 0px #F7E360;
}

.btn-neon-gold::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='193' height='61' viewBox='0 0 193 61'%3E%3Cpath fill='%23F7E360' d='M180.3 23.037C180.3 33.404 113 48.3 95.322 48.3C77.644 48.3 12.3 33.404 12.3 23.037C12.3 12.67 89.699 30.514 95.322 12.3C100.885 30.32 180.3 12.67 180.3 23.037Z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='274' height='166' viewBox='0 0 274 166'%3E%3Cpath fill='%23B47E00' d='M235 96.231C235 113.224 191.124 127 137 127C82.876 127 39 113.224 39 96.231C39 79.237 119.784 68.856 137 39C154.033 68.538 235 79.237 235 96.231Z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='149' height='102' viewBox='0 0 149 102'%3E%3Cpath fill='%23B47E00' d='M136.3 62.377C136.3 77.246 108.541 89.3 74.3 89.3C40.058 89.3 12.3 77.246 12.3 62.377C12.3 47.508 63.408 38.424 74.3 12.3C85.076 38.146 136.3 47.508 136.3 62.377Z'/%3E%3C/svg%3E");
}
.pin-wrap { overflow: hidden; }
.pin-track { position: relative; }
.pin-card {
  position: absolute;
  inset: 0;
  will-change: transform, opacity;
}

/* =========================================
   Minha Conta — [woocommerce_my_account]
   Identidade SlotPokerPro (dark navy + neon)
   ========================================= */
.woocommerce-account .woocommerce {
  --spp-card:   #0A0E1E;
  --spp-line:   #1E2C4A;
  --spp-input:  #0E1526;
  --spp-text:   #FFFFFF;
  --spp-muted:  #94A3BF;
  --spp-cyan:   #4FC3F7;
  --spp-cyan-2: #B8DCFD;
  display: flex;
  gap: 32px;
  align-items: flex-start;
  color: var(--spp-text);
  font-family: 'Google Sans', system-ui, sans-serif;
}

/* Menu lateral como card */
.woocommerce-account .woocommerce-MyAccount-navigation {
  flex: 0 0 240px;
  background: var(--spp-card);
  border: 1px solid var(--spp-line);
  border-radius: 12px;
  padding: 12px;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.woocommerce-account .woocommerce-MyAccount-navigation li {
  margin: 0;
  padding: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 10px 14px;
  line-height: 1.4;
  border-radius: 8px;
  color: var(--spp-muted);
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  color: var(--spp-text);
  background: rgba(79, 195, 247, .08);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  color: var(--spp-cyan-2);
  background: rgba(79, 195, 247, .12);
}

/* Conteúdo como card */
.woocommerce-account .woocommerce-MyAccount-content {
  flex: 1;
  background: var(--spp-card);
  border: 1px solid var(--spp-line);
  border-radius: 12px;
  padding: 32px;
}
.woocommerce-account .woocommerce-MyAccount-content a {
  color: var(--spp-cyan);
}
.woocommerce-account .woocommerce-MyAccount-content a:hover {
  color: var(--spp-cyan-2);
}

/* Formulários (detalhes da conta, endereços) */
.woocommerce-account .woocommerce-MyAccount-content .form-row label {
  color: var(--spp-muted);
  margin-bottom: 6px;
}
.woocommerce-account .woocommerce-MyAccount-content input[type="text"],
.woocommerce-account .woocommerce-MyAccount-content input[type="email"],
.woocommerce-account .woocommerce-MyAccount-content input[type="password"],
.woocommerce-account .woocommerce-MyAccount-content input[type="tel"],
.woocommerce-account .woocommerce-MyAccount-content select,
.woocommerce-account .woocommerce-MyAccount-content textarea {
  background: var(--spp-input);
  border: 1px solid var(--spp-line);
  border-radius: 8px;
  color: var(--spp-text);
  padding: 12px 14px;
  width: 100%;
}
.woocommerce-account .woocommerce-MyAccount-content input:focus,
.woocommerce-account .woocommerce-MyAccount-content select:focus {
  border-color: var(--spp-cyan);
  outline: none;
  box-shadow: 0 0 0 2px rgba(79, 195, 247, .2);
}

/* Botões — branco estilo "Sign in" do Figma */
.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"] {
  background: #FFFFFF;
  color: #0A0E1E;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  line-height: 1.4;
  font-weight: 500;
  cursor: pointer;
  transition: filter .15s ease;
}
.woocommerce-account .woocommerce-MyAccount-content .button:hover,
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:hover {
  filter: brightness(.9);
  color: #0A0E1E;
}

/* Tabela de pedidos */
.woocommerce-account table.woocommerce-orders-table {
  border-collapse: collapse;
  width: 100%;
  border: none;
}
.woocommerce-account table.woocommerce-orders-table th {
  color: var(--spp-muted);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--spp-line);
  padding: 12px;
}
.woocommerce-account table.woocommerce-orders-table td {
  border: none;
  border-bottom: 1px solid var(--spp-line);
  padding: 14px 12px;
  background: transparent;
}

/* Coluna AÇÕES dos pedidos: os botões (Pagar/Visualizar/Cancelar) vinham
   colados — sem margem nenhuma. Só aparecem juntos quando o pedido está em
   "Pagamento pendente"/"Malsucedido" (wc_get_account_orders_actions), por
   isso o bug passa despercebido nos testes com pedidos concluídos.
   Usamos inline-block + margens (e NÃO display:flex no <td>, que tiraria a
   célula do fluxo da tabela e desalinharia as colunas do cabeçalho). */
.woocommerce-account table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions {
  white-space: normal;
  text-align: right;
}
.woocommerce-account table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions .button {
  display: inline-block;
  margin: 4px 0 4px 8px;
  white-space: nowrap;
}
.woocommerce-account table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions .button:first-child {
  margin-left: 0;
}

/* Avisos */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info {
  background: rgba(79, 195, 247, .08);
  border-top-color: var(--spp-cyan);
  color: var(--spp-text);
  border-radius: 0 0 8px 8px;
}

/* Mobile: empilha menu sobre conteúdo */
@media (max-width: 768px) {
  .woocommerce-account .woocommerce {
    flex-direction: column;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation {
    flex: none;
    width: 100%;
  }
}

/* =========================================
   Esqueci a senha — /minha-conta/lost-password/
   (form de pedir link + form de redefinir)
   ========================================= */
body.woocommerce-lost-password .woocommerce {
  justify-content: center;
}
.woocommerce-account form.lost_reset_password {
  background: #0A0E1E;
  border: 1px solid #1E2C4A;
  border-radius: 12px;
  padding: 32px;
  max-width: 480px;
  width: 100%;
  color: #FFFFFF;
  font-family: 'Google Sans', system-ui, sans-serif;
}
.woocommerce-account form.lost_reset_password p:first-child {
  color: #94A3BF;
  margin-bottom: 20px;
}
.woocommerce-account form.lost_reset_password label {
  display: block;
  color: #94A3BF;
  margin-bottom: 6px;
}
.woocommerce-account form.lost_reset_password input.woocommerce-Input {
  background: #0E1526;
  border: 1px solid #1E2C4A;
  border-radius: 8px;
  color: #FFFFFF;
  padding: 12px 14px;
  width: 100%;
}
.woocommerce-account form.lost_reset_password input.woocommerce-Input:focus {
  border-color: #4FC3F7;
  outline: none;
  box-shadow: 0 0 0 2px rgba(79, 195, 247, .2);
}
.woocommerce-account form.lost_reset_password button[type="submit"] {
  background: #FFFFFF;
  color: #0A0E1E;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  line-height: 1.4;
  font-weight: 500;
  width: 100%;
  margin-top: 8px;
  cursor: pointer;
  transition: filter .15s ease;
}
.woocommerce-account form.lost_reset_password button[type="submit"]:hover {
  filter: brightness(.9);
}

/* =========================================
   Login — widget UAP (uap-login-template-3)
   Dark navy no padrão do Figma
   ========================================= */
.uap-login-form-wrap.uap-login-template-3 {
  background: transparent !important;
  box-shadow: none !important;
  max-width: 420px;
  margin: 0 auto;
}
/* barra ciano do topo do template */
.uap-login-form-wrap .grad {
  display: none !important;
}
.uap-login-form-wrap #uap_login_form {
  background: transparent !important;
  padding: 0 !important;
}
.uap-login-form-wrap .uap-form-line-fr input[type="text"],
.uap-login-form-wrap .uap-form-line-fr input[type="password"] {
  background: #0E1526 !important;
  border: 1px solid #1E2C4A !important;
  border-radius: 8px !important;
  color: #FFFFFF !important;
  padding: 12px 44px 12px 14px !important;
  width: 100% !important;
  box-shadow: none !important;
  font-family: 'Google Sans', system-ui, sans-serif;
}
.uap-login-form-wrap .uap-form-line-fr input::placeholder {
  color: #94A3BF !important;
}
.uap-login-form-wrap .uap-form-line-fr input:focus {
  border-color: #4FC3F7 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(79, 195, 247, .2) !important;
}
/* olhinho de mostrar senha */
.uap-login-form-wrap .uap-hide-pw .dashicons {
  color: #94A3BF;
}
/* botão Log In — branco estilo "Sign in" do Figma */
.uap-login-form-wrap .uap-form-submit input[type="submit"],
.uap-login-form-wrap .uap-form-submit button {
  background: #FFFFFF !important;
  color: #0A0E1E !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 12px 20px !important;
  font-weight: 500 !important;
  width: 100% !important;
  cursor: pointer;
  transition: filter .15s ease;
  text-shadow: none !important;
  box-shadow: none !important;
}
.uap-login-form-wrap .uap-form-submit input[type="submit"]:hover,
.uap-login-form-wrap .uap-form-submit button:hover {
  filter: brightness(.9);
}
/* rodapé do form: Remember me | Register | Lost password */
.uap-login-form-wrap .uap-temp3-bottom {
  background: transparent !important;
  border: none !important;
  padding: 16px 0 0 !important;
  color: #94A3BF !important;
}
.uap-login-form-wrap .uap-temp3-bottom a,
.uap-login-form-wrap .uap-remember-wrapper label,
.uap-login-form-wrap .uap-remember-wrapper {
  color: #94A3BF !important;
  font-family: 'Google Sans', system-ui, sans-serif;
}
.uap-login-form-wrap .uap-temp3-bottom a:hover {
  color: #B8DCFD !important;
}
.uap-login-form-wrap .uap-remember-wrapper input[type="checkbox"] {
  accent-color: #4FC3F7;
}

/* input do lost-password ocupa a largura toda (Woo aplica form-row-first ~47%) */
.woocommerce-account form.lost_reset_password .form-row,
.woocommerce-account form.lost_reset_password p.form-row-first {
  width: 100% !important;
  max-width: none !important;
  float: none !important;
}

/* =========================================
   Criar Conta — [woocommerce_simple_registration]
   (form.register) — padrão Figma "Pronto para começar?"
   ========================================= */
.woocommerce form.register {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  max-width: 420px;
  margin: 0 auto;
  color: #FFFFFF;
  font-family: 'Google Sans', system-ui, sans-serif;
  display: flex;
  flex-wrap: wrap;
  gap: 0 4%;
}
/* Nome e Sobrenome lado a lado (como no Figma) */
.woocommerce form.register .form-row-first,
.woocommerce form.register .form-row-last {
  width: 48%;
  float: none;
  margin: 0 0 16px;
}
.woocommerce form.register .form-row-wide,
.woocommerce form.register .woocommerce-privacy-policy-text,
.woocommerce form.register .woocommerce-simple-registration-login-link {
  width: 100%;
  margin: 0 0 16px;
}
.woocommerce form.register label {
  display: block;
  color: #94A3BF;
  margin-bottom: 6px;
  line-height: 1.3;
}
.woocommerce form.register .required {
  color: #4FC3F7;
}
.woocommerce form.register .woocommerce-Input {
  background: #0E1526;
  border: 1px solid #1E2C4A;
  border-radius: 8px;
  color: #FFFFFF;
  padding: 15px 16px;
  min-height: 54px;
  box-sizing: border-box;
  width: 100%;
}
/* garante que Nome/Sobrenome (dentro das colunas) fiquem 100% da coluna */
.woocommerce form.register .form-row-first .woocommerce-Input,
.woocommerce form.register .form-row-last .woocommerce-Input { width: 100%; }
.woocommerce form.register .woocommerce-Input:focus {
  border-color: #4FC3F7;
  outline: none;
  box-shadow: 0 0 0 2px rgba(79, 195, 247, .2);
}
/* olhinho da senha */
.woocommerce form.register .show-password-input::after {
  color: #94A3BF;
}
/* texto de privacidade */
.woocommerce form.register .woocommerce-privacy-policy-text,
.woocommerce form.register .woocommerce-privacy-policy-text p {
  color: #94A3BF;
  font-size: 13px;
  line-height: 1.5;
}
.woocommerce form.register .woocommerce-privacy-policy-text a {
  color: #4FC3F7;
}
/* linha do submit (classe com typo é exclusiva dela no plugin) */
.woocommerce form.register .woocomerce-FormRow {
  width: 100%;
  margin: 0;
}
/* botão de registro — espelho exato do botão da página de login */
.woocommerce form.register input.woocommerce-Button,
.woocommerce form.register button.woocommerce-Button {
  background-color: #FFFFFF;
  color: #000000;
  font-family: "Google Sans", Sans-serif;
  font-size: 16px;
  font-weight: 500;
  border: none;
  border-radius: 8px;
  width: 100%;
  padding: 14px 20px;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.woocommerce form.register input.woocommerce-Button:hover,
.woocommerce form.register button.woocommerce-Button:hover {
  background-color: #19A3DA;
  color: #FFFFFF;
}
/* link "Log in" embaixo */
.woocommerce form.register .woocommerce-simple-registration-login-link,
.woocommerce .woocommerce-simple-registration-login-link a {
  text-align: center;
  color: #94A3BF;
}
.woocommerce .woocommerce-simple-registration-login-link a {
  color: #4FC3F7;
}
@media (max-width: 600px) {
  .woocommerce form.register .form-row-first,
  .woocommerce form.register .form-row-last {
    width: 100%;
  }
}

/* título "Inscrição" do shortcode oculto (a página já tem o próprio heading) */
.registration-form.woocommerce > h2 {
  display: none;
}

/* =========================================
   Checkout clássico [woocommerce_checkout]
   Passo 1 — campos dark (identidade SlotPokerPro)
   ========================================= */
.woocommerce-checkout {
  --spp-card:  #0A0E1E;
  --spp-line:  #1E2C4A;
  --spp-input: #0E1526;
  --spp-text:  #FFFFFF;
  --spp-muted: #94A3BF;
  --spp-cyan:  #4FC3F7;
  color: var(--spp-text);
  font-family: 'Google Sans', system-ui, sans-serif;
}

/* Títulos de seção (Detalhes de cobrança, etc.) */
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
  color: var(--spp-text);
  font-weight: 600;
}

/* Rótulos */
.woocommerce-checkout .form-row label,
.woocommerce-checkout label {
  color: var(--spp-muted);
  margin-bottom: 6px;
  display: inline-block;
}
.woocommerce-checkout .required { color: var(--spp-cyan); border: 0; }

/* Inputs, selects, textarea */
.woocommerce-checkout .input-text,
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="password"],
.woocommerce-checkout input[type="number"],
.woocommerce-checkout select,
.woocommerce-checkout textarea {
  background: var(--spp-input) !important;
  border: 1px solid var(--spp-line) !important;
  border-radius: 8px !important;
  color: var(--spp-text) !important;
  padding: 12px 14px !important;
  width: 100%;
  box-shadow: none !important;
  line-height: 1.4;
}
.woocommerce-checkout ::placeholder { color: var(--spp-muted); opacity: 1; }
.woocommerce-checkout .input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
  border-color: var(--spp-cyan) !important;
  outline: none;
  box-shadow: 0 0 0 2px rgba(79,195,247,.2) !important;
}

/* select2 (País / Estado do Brazilian Market) */
.woocommerce-checkout .select2-container--default .select2-selection--single {
  background: var(--spp-input);
  border: 1px solid var(--spp-line);
  border-radius: 8px;
  height: 46px;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--spp-text);
  line-height: 46px;
  padding-left: 14px;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px; }
.select2-dropdown {
  background: var(--spp-input);
  border: 1px solid var(--spp-line);
  color: var(--spp-text);
}
.select2-results__option--highlighted { background: rgba(79,195,247,.15) !important; color: #fff !important; }

/* Cupom */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-checkout .checkout_coupon {
  background: var(--spp-card);
  border: 1px solid var(--spp-line);
  border-radius: 8px;
  border-top-color: var(--spp-cyan);
  color: var(--spp-text);
}
.woocommerce-checkout .woocommerce-form-coupon-toggle a { color: var(--spp-cyan); }

/* Resumo do pedido / tabela */
.woocommerce-checkout #order_review,
.woocommerce-checkout .shop_table {
  background: transparent;
  color: var(--spp-text);
  border: none;
}
.woocommerce-checkout .shop_table th,
.woocommerce-checkout .shop_table td {
  border-color: var(--spp-line);
  color: var(--spp-text);
}

/* Métodos de pagamento (passo 2 vira abas; aqui só o dark) */
.woocommerce-checkout #payment,
.woocommerce-checkout .woocommerce-checkout-payment {
  background: transparent !important;
}
.woocommerce-checkout .wc_payment_methods li {
  list-style: none;
  border: 1px solid var(--spp-line);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 8px;
}
.woocommerce-checkout .payment_box {
  background: var(--spp-input) !important;
  color: var(--spp-muted);
  border-radius: 8px;
}
.woocommerce-checkout .payment_box::before { display: none; }

/* Botão finalizar */
.woocommerce-checkout #place_order,
.woocommerce-checkout button[type="submit"] {
  background: #FFFFFF !important;
  color: #0A0E1E !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 14px 28px !important;
  font-weight: 500 !important;
  width: 100%;
  cursor: pointer;
  transition: filter .15s ease;
}
.woocommerce-checkout #place_order:hover { filter: brightness(.9); }

/* =========================================
   Checkout — reforços (cupom, tabela, botão, inputs)
   ========================================= */
/* Caixa do cupom (notice claro do Woo) */
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info,
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .checkout_coupon {
  background: #0A0E1E !important;
  border: 1px solid #1E2C4A !important;
  border-top: 2px solid #4FC3F7 !important;
  color: #FFFFFF !important;
}
body.woocommerce-checkout .woocommerce-info::before { color: #4FC3F7 !important; }

/* Inputs — cobertura ampla e específica */
body.woocommerce-checkout form.checkout input.input-text,
body.woocommerce-checkout form.checkout textarea,
body.woocommerce-checkout form.checkout select,
body.woocommerce-checkout .woocommerce-billing-fields input,
body.woocommerce-checkout .woocommerce-additional-fields input {
  background: #0E1526 !important;
  border: 1px solid #1E2C4A !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
}

/* Tabela "Seu pedido" — cabeçalho e linhas dark */
body.woocommerce-checkout .woocommerce-checkout-review-order-table,
body.woocommerce-checkout .woocommerce-checkout-review-order-table th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table td,
body.woocommerce-checkout .woocommerce-checkout-review-order-table thead th {
  background: transparent !important;
  color: #FFFFFF !important;
  border-color: #1E2C4A !important;
}

/* Botão Finalizar pedido — sobrepõe o roxo do Elementor */
body.woocommerce-checkout form.checkout #place_order,
body.woocommerce-checkout #place_order.button {
  background: #FFFFFF !important;
  color: #0A0E1E !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 14px 28px !important;
  font-weight: 600 !important;
}
body.woocommerce-checkout form.checkout #place_order:hover { filter: brightness(.9); background:#FFFFFF !important; }

/* Checkbox de termos */
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper a { color:#4FC3F7 !important; }

/* =========================================
   Checkout 2 colunas — template override
   ========================================= */
.spp-checkout .spp-checkout-grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 32px;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
}
.spp-checkout .spp-col-left,
.spp-checkout .spp-col-right {
  background: #0A0E1E;
  border: 1px solid #1E2C4A;
  border-radius: 14px;
  padding: 28px;
}

/* largura total dos campos na coluna esquerda */
.spp-checkout .col2-set,
.spp-checkout #customer_details { width: 100%; }
.spp-checkout .form-row { width: 100%; float: none; padding: 0 0 14px; }
.spp-checkout .form-row-first,
.spp-checkout .form-row-last {
  display: inline-block;
  width: calc(50% - 7px);
}
.spp-checkout .form-row-first { margin-right: 12px; }

/* Card do plano */
.spp-plan-title { color:#fff; font-size:1.6rem; font-weight:600; margin:0 0 18px; }
.spp-plan-card {
  display:flex; align-items:center; gap:14px;
  background: linear-gradient(135deg,#1E3A6B,#2547A0);
  border-radius:12px; padding:16px 18px; margin-bottom:22px;
}
.spp-plan-logo {
  width:48px; height:48px; border-radius:10px; flex:0 0 48px;
  background:#fff url('https://lightyellow-deer-511475.hostingersite.com/wp-content/uploads/2026/07/cropped-favicon.png') center/60% no-repeat, #fff;
}
.spp-plan-info { display:flex; flex-direction:column; flex:1; }
.spp-plan-info strong { color:#fff; font-size:1.05rem; }
.spp-plan-info em { color:#B8DCFD; font-style:normal; font-size:.85rem; }
.spp-plan-price { color:#fff; font-weight:600; font-size:1.05rem; }

/* Principais Recursos */
.spp-features h3 { color:#fff; font-size:1.05rem; margin:0 0 14px; }
.spp-features ul { list-style:none; margin:0 0 8px; padding:0; display:flex; flex-direction:column; gap:12px; }
.spp-features li { display:flex; align-items:center; gap:12px; color:#E5EAF3; }
.spp-features .spp-feat-ic { flex:0 0 22px; }

/* separador antes do resumo */
.spp-col-right #order_review { border-top:1px solid #1E2C4A; margin-top:22px; padding-top:20px; }

/* esconder heading redundante */
.spp-checkout .screen-reader-text { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* Responsivo */
@media (max-width: 900px) {
  .spp-checkout .spp-checkout-grid { grid-template-columns: 1fr; }
  .spp-checkout .spp-col-right { order:-1; }
}

/* =========================================
   Passo 2 — Métodos de pagamento como abas (coluna esquerda)
   ========================================= */
.spp-payment-wrap { margin-top: 28px; }
.spp-payment-title { color:#fff; font-size:1.1rem; margin:0 0 14px; }

.spp-checkout #payment,
.spp-checkout .woocommerce-checkout-payment { background:transparent !important; }

/* lista de métodos vira linha de abas */
.spp-checkout .wc_payment_methods {
  display:flex; flex-wrap:wrap; gap:10px;
  list-style:none; margin:0 0 4px; padding:0; align-items:flex-start;
}
/* `> li` (filho direto!) e não `li`: como descendente, isto pegava também os
   <li> dos passos do GG Poker dentro do payment_box. Com display:contents o
   <li> perde a caixa, o position:relative dele para de valer e os ::before
   (numerinhos) empilhavam todos num círculo só em cima do texto. */
.spp-checkout .wc_payment_methods > li { display:contents; }   /* label e payment_box viram itens do flex */
.spp-checkout .wc_payment_methods > li > input.input-radio { display:none; }

/* cada label = botão/aba */
.spp-checkout .wc_payment_methods li > label {
  flex:1 1 0; min-width:110px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid #1E2C4A; border-radius:10px;
  padding:14px 12px; margin:0;
  color:#94A3BF; cursor:pointer; text-align:center;
  transition:border-color .15s, background .15s, color .15s;
}
.spp-checkout .wc_payment_methods li > label:hover { border-color:#4FC3F7; color:#fff; }
.spp-checkout .wc_payment_methods li input:checked + label {
  border-color:#4FC3F7; color:#fff; background:rgba(79,195,247,.10);
}
.spp-checkout .wc_payment_methods li > label img { max-height:22px; width:auto; }

/* campos do método selecionado ocupam a linha inteira, abaixo das abas */
.spp-checkout .wc_payment_methods li .payment_box {
  flex-basis:100%; order:99; width:100%;
  margin:6px 0 0; padding:16px;
  background:#0E1526 !important; border:1px solid #1E2C4A; border-radius:10px;
}
.spp-checkout .wc_payment_methods li .payment_box::before { display:none; }

/* botão Assinar */
.spp-checkout #payment .place-order { margin-top:18px; padding:0; }
.spp-checkout #payment .place-order #place_order { width:100%; }

/* =========================================
   Checkout — refino Figma (node 177:14006)
   tokens: primary #60D8F7 · azul #2541A6 · texto #d8e1e9 · muted #3c518c
   ========================================= */
.spp-checkout {
  --spp-line:  #1A2A4A;
  --spp-cyan:  #60D8F7;
  --spp-blue:  #2541A6;
  --spp-text:  #d8e1e9;
  --spp-muted: #3c518c;
  --spp-input: #0C1424;
  --spp-card:  #0A101F;
}

/* a coluna esquerda deixa de ser card; os filhos viram cards */
.spp-checkout .spp-col-left { background:transparent !important; border:0 !important; padding:0 !important; display:flex; flex-direction:column; gap:20px; }
.spp-checkout .spp-card {
  background:var(--spp-card);
  border:1px solid var(--spp-line);
  border-radius:16px;
  padding:26px 28px;
}
.spp-checkout .spp-card-head { display:flex; align-items:center; justify-content:space-between; }
.spp-checkout .spp-card-head h3 { margin:0; color:#fff; font-size:18px; font-weight:500; }
.spp-checkout .spp-toggle-details { color:var(--spp-cyan); font-size:14px; text-decoration:none; }
.spp-checkout .spp-details-body { margin-top:18px; }

/* accent/labels/foco com tokens exatos */
.spp-checkout .required { color:var(--spp-cyan); }
.spp-checkout .form-row label,
.spp-checkout label { color:var(--spp-text); font-size:14px; }
.spp-checkout .input-text:focus,
.spp-checkout select:focus,
.spp-checkout textarea:focus { border-color:var(--spp-cyan) !important; box-shadow:0 0 0 2px rgba(96,216,247,.2) !important; }

/* abas de pagamento — estado ativo com token exato */
.spp-checkout .wc_payment_methods li input:checked + label {
  border-color:var(--spp-cyan); color:#fff; background:rgba(96,216,247,.10);
}
.spp-checkout .wc_payment_methods li > label:hover { border-color:var(--spp-cyan); }
.spp-payment-title { color:#fff; font-size:18px; font-weight:500; margin:0 0 18px; }

/* título "Checkout" da página */
.spp-checkout-grid { position:relative; }

/* ---- Coluna direita: card do plano ---- */
.spp-plan-card { background:linear-gradient(135deg,#1E3A6B,#2541A6); }
.spp-plan-title { font-size:24px; }

/* Totais (resumo) no padrão Figma */
.spp-checkout .woocommerce-checkout-review-order-table { font-size:15px; }
.spp-checkout .cart-subtotal th,
.spp-checkout .order-total th { color:var(--spp-text); font-weight:400; }
.spp-checkout .order-total th { font-weight:600; color:#fff; }
.spp-checkout .order-total .amount { color:#fff; font-size:20px; }

/* Botão Aplicar cupom (azul Figma) */
.spp-checkout .coupon .button,
.spp-checkout button[name="apply_coupon"] {
  background:var(--spp-blue) !important; color:#fff !important;
  border-radius:8px !important; border:0 !important;
}

/* Assinar — branco */
.spp-checkout #place_order { background:#fff !important; color:#0A101F !important; font-weight:600 !important; border-radius:10px !important; padding:15px !important; }

/* =========================================
   Checkout — correções de layout (limpeza)
   ========================================= */
/* 1. Esconde Apple/Google Pay (Express Checkout do Stripe) e o "OR" */
body.woocommerce-checkout [class*="payment-request"],
body.woocommerce-checkout [class*="express-checkout"],
body.woocommerce-checkout [id*="express-checkout"],
body.woocommerce-checkout [id*="payment-request"],
body.woocommerce-checkout .wc-stripe-express-checkout-button-separator,
body.woocommerce-checkout .apple-pay-button,
body.woocommerce-checkout .gpay-button { display:none !important; }

/* 2. Esconde o "Billing details" duplicado do Woo (mantém meu "Detalhes da compra") */
.spp-checkout .spp-details-body .woocommerce-billing-fields > h3,
.spp-checkout .spp-details-body > h3,
.spp-checkout #ship-to-different-address { display:none; }

/* 3. Esconde o cupom padrão do topo (fica no card direito) */
body.woocommerce-checkout .woocommerce-form-coupon-toggle,
body.woocommerce-checkout .checkout_coupon.woocommerce-form-coupon { display:none !important; }

/* 5. Tabela de resumo (direita) — só totais, estilo Figma */
.spp-checkout .woocommerce-checkout-review-order-table thead,
.spp-checkout .woocommerce-checkout-review-order-table .cart_item { display:none; }
.spp-checkout .woocommerce-checkout-review-order-table { border:0 !important; width:100%; }
.spp-checkout .woocommerce-checkout-review-order-table tr th,
.spp-checkout .woocommerce-checkout-review-order-table tr td {
  border:0 !important; padding:8px 0 !important; background:transparent !important;
  color:var(--spp-text); font-size:15px; text-align:left;
}
.spp-checkout .woocommerce-checkout-review-order-table tr td { text-align:right; }
.spp-checkout .woocommerce-checkout-review-order-table .order-total th { color:#fff; font-weight:600; border-top:1px solid var(--spp-line) !important; padding-top:14px !important; }
.spp-checkout .woocommerce-checkout-review-order-table .order-total td { color:#fff; font-weight:700; font-size:20px; border-top:1px solid var(--spp-line) !important; padding-top:14px !important; }

/* ícones das abas de pagamento (o Woo injeta <img> na label) */
.spp-checkout .wc_payment_methods li > label img { max-height:24px; width:auto; margin:0 4px; display:inline-block; vertical-align:middle; }

/* espaço do card direito */
.spp-checkout .spp-col-right { padding:28px; }
.spp-checkout .spp-col-right #order_review { margin-top:20px; }

/* (accordion antigo removido — convenção única: is-collapsed, script no template) */

/* =========================================
   Abas de pagamento — refino dos botões
   ========================================= */
.spp-checkout .wc_payment_methods {
  display:flex; gap:12px; flex-wrap:wrap;
}
.spp-checkout .wc_payment_methods li > label {
  flex:1 1 0;
  min-width:0;
  display:flex; align-items:center; justify-content:center; gap:8px;
  height:56px; padding:0 14px; margin:0;
  border:1.5px solid var(--spp-line); border-radius:12px;
  color:var(--spp-text); font-size:15px; font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  cursor:pointer; background:transparent;
  transition:border-color .15s, background .15s, color .15s;
}
.spp-checkout .wc_payment_methods li input:checked + label {
  border-color:var(--spp-cyan);
  background:rgba(96,216,247,.08);
  color:#fff;
  box-shadow:0 0 0 1px var(--spp-cyan) inset;
}
.spp-checkout .wc_payment_methods li > label img {
  max-height:22px; width:auto; margin:0;
}
/* campos do método selecionado — cai abaixo em largura total, sem a setinha */
.spp-checkout .wc_payment_methods li .payment_box {
  flex-basis:100%; order:99; width:100%;
  margin:14px 0 0; padding:18px;
  background:var(--spp-input) !important;
  border:1px solid var(--spp-line); border-radius:12px;
}
.spp-checkout .wc_payment_methods li .payment_box::before,
.spp-checkout .wc_payment_methods li .payment_box::after { display:none !important; }

/* =========================================
   Campos de cobrança — grid 2 colunas (arranjo Figma)
   Reordena visualmente sem mexer no DOM (não quebra o
   toggle CPF/CNPJ do Brazilian Market).
   ========================================= */
.spp-checkout .woocommerce-billing-fields__field-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
}
.spp-checkout .woocommerce-billing-fields__field-wrapper > .form-row {
  width: 100% !important;
  float: none !important;
  clear: none !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
}
/* ordem tipo Figma */
.spp-checkout #billing_first_name_field   { order: 1; }
.spp-checkout #billing_last_name_field    { order: 2; }
.spp-checkout #billing_postcode_field     { order: 3; }
.spp-checkout #billing_address_1_field    { order: 4; }
.spp-checkout #billing_number_field       { order: 5; }
.spp-checkout #billing_address_2_field    { order: 6; }
.spp-checkout #billing_neighborhood_field { order: 7; }
.spp-checkout #billing_city_field         { order: 8; }
.spp-checkout #billing_state_field        { order: 9; }
.spp-checkout #billing_country_field      { order: 10; }
.spp-checkout #billing_persontype_field   { order: 11; }
.spp-checkout #billing_cpf_field          { order: 12; }
.spp-checkout #billing_cnpj_field         { order: 13; }
.spp-checkout #billing_cellphone_field    { order: 14; }
.spp-checkout #billing_phone_field        { order: 14; }
/* campos que ocupam a linha inteira */
.spp-checkout #billing_email_field        { order: 15; grid-column: 1 / -1; }

/* =========================================
   Checkout — contraste + box dupla do Stripe
   ========================================= */
/* contraste: textos base mais claros */
.spp-checkout,
.spp-checkout .form-row label,
.spp-checkout label,
.spp-checkout p,
.spp-checkout .woocommerce-checkout-review-order-table tr th,
.spp-checkout .woocommerce-checkout-review-order-table tr td {
  color:#C9D6E8;
}
.spp-checkout .spp-card-head h3,
.spp-checkout .spp-payment-title,
.spp-checkout .spp-plan-title,
.spp-checkout .spp-features h3 { color:#FFFFFF; }
.spp-checkout ::placeholder { color:#6B7FA6 !important; }
.spp-checkout .spp-features li { color:#DCE6F5; }

/* "Test mode" do Stripe — legível */
.spp-checkout .payment_box,
.spp-checkout .payment_box p { color:#A9B8D4 !important; }

/* box dupla: o Stripe UPE desenha um frame próprio; removo o meu wrapper
   duplicado e as bordas brancas internas */
.spp-checkout .payment_box .wc-stripe-upe-element,
.spp-checkout .payment_box [class*="__PrivateStripeElement"],
.spp-checkout .payment_box iframe { border:0 !important; box-shadow:none !important; }
.spp-checkout .payment_box fieldset,
.spp-checkout .payment_box .wc-payment-form,
.spp-checkout .payment_box .wc_payment_method-inner {
  border:0 !important; outline:0 !important; box-shadow:none !important; background:transparent !important;
}
/* bordas brancas de foco/tabela que o Stripe injeta em volta do form */
.spp-checkout .payment_box > div { border-color:transparent !important; }

/* checkbox "salvar informações" sem caixa própria */
.spp-checkout .payment_box .wc-stripe-save-source,
.spp-checkout .payment_box p.form-row { border:0 !important; background:transparent !important; padding:8px 0 0 !important; }

/* =========================================
   Selects nativos (Person type etc.) + bordas de validação
   ========================================= */
.spp-checkout select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 48px !important;
  line-height: 1.2 !important;
  padding: 0 40px 0 14px !important;
  background-color: #0E1526 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%2394A3BF' stroke-width='1.6'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
}
/* igualar altura do select2 (Country) aos selects nativos */
.spp-checkout .select2-container--default .select2-selection--single { height: 48px !important; }
.spp-checkout .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 48px !important; }
.spp-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px !important; }

/* Neutraliza as bordas verde/vermelha de validação do Woo (mantém identidade) */
.spp-checkout .form-row.woocommerce-validated input.input-text,
.spp-checkout .form-row.woocommerce-validated select,
.spp-checkout .form-row.woocommerce-validated .select2-selection,
.spp-checkout .form-row.woocommerce-validated textarea {
  border-color: #1E2C4A !important;
  box-shadow: none !important;
}
.spp-checkout .form-row.woocommerce-invalid input.input-text,
.spp-checkout .form-row.woocommerce-invalid select,
.spp-checkout .form-row.woocommerce-invalid .select2-selection {
  border-color: #E05260 !important;
  box-shadow: none !important;
}

/* =========================================
   Aviso de erro de login (/login/?login=failed)
   ========================================= */
.spp-login-error {
  max-width: 460px;
  margin: 24px auto 0;
  padding: 12px 18px;
  border-radius: 10px;
  background: rgba(224, 82, 96, .12);
  border: 1px solid rgba(224, 82, 96, .45);
  color: #ffb3ba;
  text-align: center;
  font-family: 'Google Sans', system-ui, sans-serif;
  font-size: 14px;
}

/* =========================================
   Person type / selects nativos — alinhamento robusto
   ========================================= */
.spp-checkout select,
.spp-checkout #billing_persontype {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
  height: 48px !important;
  min-height: 48px !important;
  line-height: 46px !important;      /* centra o texto verticalmente no select nativo */
  padding: 0 40px 0 14px !important;
  margin: 0 !important;
  vertical-align: middle !important;
  text-align-last: left !important;
  background-color: #0E1526 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%2394A3BF' stroke-width='1.6'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  color: #FFFFFF !important;
}
/* remove qualquer seta nativa remanescente (IE/Edge) */
.spp-checkout select::-ms-expand { display: none; }
/* garante mesma altura no select2 do Country, alinhando o par */
.spp-checkout .select2-container,
.spp-checkout .select2-container .select2-selection--single {
  height: 48px !important;
  min-height: 48px !important;
}
.spp-checkout .select2-selection__rendered { line-height: 46px !important; padding-left: 14px !important; }
/* os dois campos do par começam do topo, alinhados */
.spp-checkout #billing_country_field,
.spp-checkout #billing_persontype_field { align-self: start; }

/* =========================================
   Cupom na coluna direita (estilo Figma)
   ========================================= */
.spp-col-right .spp-coupon { margin: 20px 0; }
.spp-col-right .spp-coupon form.checkout_coupon {
  display: block !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.spp-col-right .spp-coupon .form-row { padding: 0 !important; margin: 0 !important; }
/* input + botão lado a lado */
.spp-col-right .spp-coupon .checkout_coupon .form-row-first,
.spp-col-right .spp-coupon .checkout_coupon p:first-of-type {
  display: flex; gap: 10px; width: 100%;
}
.spp-col-right .spp-coupon input#coupon_code {
  flex: 1; background:#0E1526 !important; border:1px solid #1E2C4A !important;
  border-radius:8px !important; color:#fff !important; padding:12px 14px !important; margin:0 !important;
}
.spp-col-right .spp-coupon button[name="apply_coupon"] {
  background:#2547A0 !important; color:#fff !important; border:none !important;
  border-radius:8px !important; padding:12px 20px !important; font-weight:500 !important;
  white-space:nowrap; cursor:pointer;
}
.spp-col-right .spp-coupon button[name="apply_coupon"]:hover { filter:brightness(1.1); }

/* =========================================
   Person type select2 — largura + caixa (fix real)
   ========================================= */
.spp-checkout .select2-container { width: 100% !important; }
.spp-checkout .select2-container--default .select2-selection--single {
  height: 48px !important;
  background: #0E1526 !important;
  border: 1px solid #1E2C4A !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
}
.spp-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 1.2 !important;
  padding: 0 30px 0 14px !important;
  color: #FFFFFF !important;
}
.spp-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 0 !important; height: 48px !important; right: 10px !important;
}

/* =========================================
   Lost-password: mensagem de confirmação
   Corrige o vazamento do display:flex da Minha Conta
   e estiliza o aviso como card dark de largura total
   ========================================= */
body.woocommerce-lost-password .woocommerce {
  display: block;
  max-width: 640px;
  margin: 0 auto;
}
body.woocommerce-lost-password .woocommerce-message,
body.woocommerce-lost-password .woocommerce-info {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: #0A0E1E;
  border: 1px solid #1E2C4A;
  border-left: 3px solid #4FC3F7;
  border-radius: 10px;
  padding: 16px 20px;
  margin: 0;
  color: #FFFFFF;
  font-family: 'Google Sans', system-ui, sans-serif;
}
body.woocommerce-lost-password .woocommerce-message::before,
body.woocommerce-lost-password .woocommerce-info::before {
  position: static;
  color: #4FC3F7;
  font-size: 20px;
  line-height: 1;
}
body.woocommerce-lost-password .woocommerce-message a,
body.woocommerce-lost-password .woocommerce-info a {
  color: #4FC3F7;
}

/* =========================================
   Accordion "Detalhes da compra"
   ========================================= */
.spp-card-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.spp-card-head h3 { margin:0; }
.spp-toggle-details { display:none; color:#4FC3F7; text-decoration:none; font-size:.95rem; }
.spp-toggle-details:hover { color:#B8DCFD; }
.spp-details-actions { margin-top:16px; }
.spp-save-details.button {
  background:#fff !important; color:#0A0E1E !important; border:none !important;
  border-radius:8px !important; padding:12px 22px !important; font-weight:600 !important; cursor:pointer;
}
.spp-save-details.button:hover { filter:brightness(.9); }

/* estado fechado: some o corpo e o botão salvar; mostra "Alterar" */
.spp-card-details.is-collapsed .spp-details-body { display:none; }
.spp-card-details.is-collapsed .spp-toggle-details { display:inline; }

/* =========================================
   Página de confirmação do pedido (order-received)
   ========================================= */
.woocommerce-order { color:#fff; font-family:'Google Sans',system-ui,sans-serif;
  padding-left:clamp(16px,4vw,56px); padding-right:clamp(16px,4vw,56px); box-sizing:border-box; }

/* faixa-resumo: nº / data / e-mail / total / método (grid uniforme, sem slivers) */
.woocommerce-order .woocommerce-order-overview {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px;
  list-style:none; margin:24px 0; padding:0; border:0;
}
.woocommerce-order .woocommerce-order-overview li {
  background:#0A0E1E; border:1px solid #1E2C4A; border-radius:12px;
  padding:14px 16px; margin:0; text-transform:none;
  color:#94A3BF; font-size:.8rem; min-width:0; word-break:break-word;
}
.woocommerce-order .woocommerce-order-overview li strong { display:block; color:#fff; font-size:1rem; margin-top:4px; }

/* aviso produto digital (badge verde) */
.spp-digital-note {
  background:rgba(37,87,25,.18); border:1px solid #2e7d32; border-left:3px solid #60F78D;
  border-radius:12px; padding:16px 18px; margin:20px 0;
}
.spp-digital-badge {
  display:inline-block; background:#255719; color:#60F78D; font-weight:600; font-size:.8rem;
  padding:4px 12px; border-radius:999px; margin-bottom:8px;
}
.spp-digital-note p { margin:0; color:#E5EAF3; }
.spp-digital-note a { color:#4FC3F7; }

/* tabela de detalhes num card com borda azul neon */
.woocommerce-order .woocommerce-table--order-details {
  background:#0A0E1E; border:1px solid #1E2C4A; border-radius:12px; overflow:hidden; width:100%;
}
.woocommerce-order .woocommerce-table--order-details th,
.woocommerce-order .woocommerce-table--order-details td {
  border-color:#1E2C4A !important; color:#fff; padding:14px 16px;
}
.woocommerce-order .woocommerce-table--order-details tfoot th { color:#94A3BF; }
.woocommerce-order .woocommerce-table--order-details a { color:#4FC3F7; }

/* card e passos numerados do GG Poker */
.spp-gg-card {
  background:linear-gradient(180deg,#09112B,#07070A); border:1px solid #1E2C4A;
  border-radius:14px; padding:26px; margin:24px 0; position:relative;
}
.spp-gg-title { color:#fff; font-size:1.3rem; margin:0 0 18px; }
.spp-gg-steps { list-style:none; counter-reset:spp; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
.spp-gg-steps li {
  counter-increment:spp; position:relative; padding-left:46px; color:#E5EAF3; line-height:1.5;
}
.spp-gg-steps li::before {
  content:counter(spp); position:absolute; left:0; top:-2px;
  width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#194057; box-shadow:inset 0 1px 3px 0 #60D8F7; color:#fff; font-weight:600; font-size:.9rem;
}
.spp-gg-steps li a { color:#4FC3F7; }
.spp-gg-note { margin:18px 0 0; color:#94A3BF; font-size:.9rem; }

/* =========================================
   Express Checkout (FunnelKit) — só cores.
   O bloco em si liga/desliga nas configs do FunnelKit (é decisão do
   painel, não do código). Aqui só fazemos ele parar de destoar:
   o <legend> vinha escuro sobre fundo escuro (ilegível).
   O botão do Google Pay é renderizado pelo Google — a cor dele
   (preto/branco/outline) é uma opção do FunnelKit, não dá por CSS.
   ========================================= */
#fkwcs-expresscheckout-fieldset {
  border: 1px solid #1A2A4A !important;
  border-radius: 10px !important;
  background: rgba(10, 16, 31, .45) !important;
  padding: 14px 16px 16px !important;
  margin: 0 0 18px !important;
}
#fkwcs-expresscheckout-fieldset legend {
  color: #A9B8D4 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: .02em;
  padding: 0 8px !important;
  width: auto !important;
  border: 0 !important;
  background: transparent !important;
}
/* separador "Ou" entre o express e o checkout normal */
.fkwcs_express_smart_button_wrapper + *,
#fkwcs-expresscheckout-fieldset ~ .fkwcs-or,
.fkwcs-or { color: #94A3BF !important; }

/* =========================================
   Notificações do WooCommerce no checkout (cupom aplicado, erros…)
   O Woo moderno usa `wc-block-components-notice-banner` mesmo no checkout
   clássico — vinha branco com ícone verde, destoando do tema escuro.
   Cobrimos as duas gerações de markup (clássica e banner).
   ========================================= */
.spp-checkout .woocommerce-message,
.spp-checkout .woocommerce-error,
.spp-checkout .woocommerce-info,
.spp-checkout .wc-block-components-notice-banner,
.woocommerce-checkout .wc-block-components-notice-banner {
  background: #0C1424 !important;
  border: 1px solid #1A2A4A !important;
  border-left: 3px solid #60D8F7 !important;
  border-radius: 8px !important;
  color: #E5EAF3 !important;
  padding: 12px 14px !important;
  margin: 0 0 14px !important;
  font-size: 14px !important;
  line-height: 1.45;
  box-shadow: none !important;
  list-style: none !important;
}
/* sucesso = verde, erro = vermelho (só a barra lateral muda) */
.spp-checkout .woocommerce-message,
.spp-checkout .wc-block-components-notice-banner.is-success,
.woocommerce-checkout .wc-block-components-notice-banner.is-success {
  border-left-color: #3FBF6A !important;
}
.spp-checkout .woocommerce-error,
.spp-checkout .wc-block-components-notice-banner.is-error,
.woocommerce-checkout .wc-block-components-notice-banner.is-error {
  border-left-color: #FF6B6B !important;
}
.spp-checkout .wc-block-components-notice-banner__content,
.spp-checkout .woocommerce-message *,
.spp-checkout .wc-block-components-notice-banner * {
  color: #E5EAF3 !important;
  background: transparent !important;
}
/* ícone do banner acompanha a cor do estado */
.spp-checkout .wc-block-components-notice-banner > svg,
.woocommerce-checkout .wc-block-components-notice-banner > svg {
  fill: #3FBF6A !important;
  width: 20px; height: 20px; flex: 0 0 20px;
}
.spp-checkout .wc-block-components-notice-banner.is-error > svg,
.woocommerce-checkout .wc-block-components-notice-banner.is-error > svg {
  fill: #FF6B6B !important;
}
/* o ::before de check/aviso do markup clássico */
.spp-checkout .woocommerce-message::before,
.spp-checkout .woocommerce-error::before,
.spp-checkout .woocommerce-info::before { color: #60D8F7 !important; }

/* Icone ::before do aviso classico (erro/cupom aplicado): o padding de 14px
   acima tirava o espaco onde o Woo posiciona o icone, que caia sobre o texto. */
.spp-checkout .woocommerce-message,
.spp-checkout .woocommerce-error,
.spp-checkout .woocommerce-info { position: relative !important; padding-left: 44px !important; }
.spp-checkout .woocommerce-message::before,
.spp-checkout .woocommerce-error::before,
.spp-checkout .woocommerce-info::before { position: absolute !important; left: 14px !important; top: 12px !important; }

/* linha do cupom no resumo + link Remover */
.spp-checkout .cart-discount th,
.spp-checkout .cart-discount td { color: #E5EAF3 !important; }
.spp-checkout .woocommerce-remove-coupon {
  color: #94A3BF !important;
  text-decoration: underline;
  font-size: 12px;
  margin-left: 6px;
}
.spp-checkout .woocommerce-remove-coupon:hover { color: #FF6B6B !important; }

/* =========================================
   Campos nativos de QUALQUER gateway (tema escuro)
   Provider-agnóstico de propósito: vale pro Asaas (cartão/pix/boleto),
   PayPal e qualquer gateway futuro que use woocommerce_form_field().
   Assim o stakeholder troca de provedor sem precisar de CSS novo.
   (O Stripe/FunnelKit NÃO entra aqui: os campos dele são iframe e o tema
   escuro vai pelo filtro `fkwcs_stripe_payment_element_data` no plugin.)
   ========================================= */
.spp-checkout .payment_box input[type="text"],
.spp-checkout .payment_box input[type="tel"],
.spp-checkout .payment_box input[type="email"],
.spp-checkout .payment_box input[type="number"],
.spp-checkout .payment_box input[type="password"],
.spp-checkout .payment_box select,
.spp-checkout .payment_box textarea {
  background: #0C1424 !important;
  border: 1px solid #1A2A4A !important;
  border-radius: 8px !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  caret-color: #60D8F7;
  padding: 12px !important;
  width: 100% !important;
  box-shadow: none !important;
  font-size: 15px;
}
.spp-checkout .payment_box input:focus,
.spp-checkout .payment_box select:focus,
.spp-checkout .payment_box textarea:focus {
  border-color: #60D8F7 !important;
  box-shadow: 0 0 0 2px rgba(96, 216, 247, .20) !important;
  outline: none !important;
}
.spp-checkout .payment_box input::placeholder,
.spp-checkout .payment_box textarea::placeholder {
  color: #94A3BF !important;
  -webkit-text-fill-color: #94A3BF !important;
  opacity: 1;
}
.spp-checkout .payment_box label {
  color: #A9B8D4 !important;
  font-weight: 500;
}
/* autofill do navegador não pode devolver o fundo branco */
.spp-checkout .payment_box input:-webkit-autofill,
.spp-checkout .payment_box input:-webkit-autofill:focus {
  -webkit-text-fill-color: #FFFFFF !important;
  transition: background-color 9999s ease-in-out 0s;
}

/* Catch-all: mata a "setinha"/bolha que o WooCommerce desenha no topo da
   caixa do método selecionado. As regras antigas tinham escopo antigo
   (.spp-checkout / .woocommerce-checkout) e o FunnelKit renderiza em outra
   estrutura, então sobrava um círculo solto sobre o texto (visto no GG Poker).
   `content:none` é mais confiável que `display:none` em pseudo-elementos. */
#payment .payment_box::before,
#payment .payment_box::after,
.woocommerce-checkout #payment div.payment_box::before,
.wc_payment_methods .payment_box::before {
  content: none !important;
  display: none !important;
  border: 0 !important;
}

@media (max-width:600px){
  .woocommerce-order .woocommerce-order-overview { flex-direction:column; }
}

/* Imagem do produto no card azul do plano */
.spp-plan-card .spp-plan-logo {
  width: 56px; height: 56px; flex: 0 0 56px;
  border-radius: 10px; overflow: hidden;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
}
.spp-plan-card .spp-plan-logo img.spp-plan-img,
.spp-plan-card .spp-plan-logo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Instruções GG Poker dentro da aba do checkout */
.spp-checkout .payment_box .spp-gg-steps { margin:12px 0 0 18px; padding:0; color:#d8e1e9; display:flex; flex-direction:column; gap:8px; }
.spp-checkout .payment_box .spp-gg-steps a { color:#60D8F7; }

/* Passos do GG Poker no checkout — regra explícita.
   As regras base do <li> (position/padding/contador) estavam sendo
   sobrescritas dentro do payment_box: os números sumiam e o círculo
   ficava em cima do texto. Aqui fixamos tudo de uma vez. */
.spp-checkout .payment_box ol.spp-gg-steps {
  counter-reset: spp !important;
  list-style: none !important;
}
.spp-checkout .payment_box ol.spp-gg-steps > li {
  counter-increment: spp !important;
  position: relative !important;
  list-style: none !important;
  display: block !important;        /* nunca display:contents */
  /* O card do passo é definido AQUI — assim a geometria do círculo é
     nossa e não depende da regra externa que estava desenhando a borda
     (o círculo ficava montado em cima dela, metade pra fora). */
  background: rgba(255, 255, 255, .02) !important;
  border: 1px solid #1A2A4A !important;
  border-radius: 10px !important;
  padding: 12px 14px 12px 54px !important;  /* 14 (gutter) + 28 (círculo) + 12 */
  min-height: 28px;
}
.spp-checkout .payment_box ol.spp-gg-steps > li::before {
  content: counter(spp) !important;
  position: absolute !important;
  left: 14px !important;            /* dentro do card, não na borda */
  top: 12px !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #194057 !important;
  box-shadow: inset 0 1px 3px 0 #60D8F7 !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}
.spp-checkout .payment_box .spp-gg-currency-note { margin:14px 0 0; padding:12px 14px; border:1px solid #60D8F7; border-radius:8px; background:rgba(96,216,247,.07); color:#fff; font-size:14px; }

/* =========================================
   Correções: aba Cartão (nome via CSS, imune ao JS
   do Stripe), radio solto, aviso "finalize primeiro"
   ========================================= */
/* Nome "Cartão" forçado por CSS: texto original zerado, rótulo injetado */
.spp-checkout li.payment_method_stripe > label {
  font-size: 0 !important;
  gap: 0;
}
.spp-checkout li.payment_method_stripe > label::before {
  content: '';
  width: 22px; height: 22px;
  background: url('/wp-content/uploads/2026/07/credit-card-02.svg') center/contain no-repeat;
  margin-right: 8px;
}
.spp-checkout li.payment_method_stripe > label::after {
  content: 'Cartão';
  font-size: 15px;
  font-weight: 500;
}
/* esconde ícones que o Stripe injeta dentro do rótulo */
.spp-checkout li.payment_method_stripe > label img { display: none !important; }

/* radio solto (bolinha) — esconde só os radios diretos da lista,
   preservando os de cartões salvos dentro do payment_box */
.spp-checkout .wc_payment_methods > li > input[type="radio"] {
  display: none !important;
}

/* aviso "finalize o pedido primeiro" na aba GG */
.spp-checkout .payment_box .spp-gg-order-first {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-left: 3px solid #60D8F7;
  background: rgba(96,216,247,.05);
  color: #d8e1e9;
  font-size: 14px;
}

/* =========================================
   Formulário de Contato (Elementor Form)
   Texto digitado ficava invisível (preto no escuro)
   ========================================= */
.elementor-field-group .elementor-field,
.elementor-field-type-text input,
.elementor-field-type-tel input,
.elementor-field-type-email input,
.elementor-field-type-textarea textarea,
.elementor-field-group textarea.elementor-field {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;   /* Safari/Chrome autofill */
  caret-color: #60D8F7;
}
.elementor-field-group .elementor-field::placeholder,
.elementor-field-group textarea::placeholder {
  color: #94A3BF !important;
  -webkit-text-fill-color: #94A3BF !important;
  opacity: 1;
}
/* autofill do navegador não pode voltar o fundo branco */
.elementor-field-group .elementor-field:-webkit-autofill,
.elementor-field-group .elementor-field:-webkit-autofill:focus {
  -webkit-text-fill-color: #FFFFFF !important;
  transition: background-color 9999s ease-in-out 0s;
}
/* trava o "puxador" de redimensionar da textarea (evita o usuário
   arrastar e quebrar o layout). Cobre o form clássico E o widget atômico
   novo do Elementor (.e-form-textarea-base). */
.elementor-field-type-textarea textarea,
.elementor-field-group textarea.elementor-field,
.e-form-textarea-base,
textarea[class*="e-form-textarea"] {
  resize: none !important;
}

/* =========================================
   Sticky footer — páginas de conteúdo curto (Minha conta, Login,
   Criar conta) não deixam sobrar fundo preto abaixo do footer.
   O header fica fora do fluxo (sticky), então só main cresce.
   ========================================= */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body > main#content,
body > .site-main {
  flex: 1 0 auto;
}

/* =========================================
   Header mobile (Figma node 2083:7284)
   No mobile o container visível é o .elementor-element-346da9c
   (fica display:none no desktop; o desktop usa o 7a6cd92, já escuro).
   Ele vinha sem fundo → aparecia o azul do hero atrás.
   Especificidade alta p/ vencer o container atômico do Elementor.
   Logo já é 120px (SVG); padding lateral vem do sync (=blocos).
   ========================================= */
html body header.elementor.elementor-location-header .e-con.elementor-element-346da9c.e-atomic-element.e-flexbox-base {
  background: rgba(4, 4, 6, 0.8) !important;
  background-color: rgba(4, 4, 6, 0.8) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid #1E3C76 !important;
  padding-top: 12px !important;
  padding-bottom: 28px !important;
  align-items: center !important;
  /* padding lateral no CSS (não depender do sync JS: se o HTML vier
     do cache do LiteSpeed sem o JS, ainda há padding) — 24px (Figma) */
  padding-left: 24px !important;
  padding-right: 24px !important;
}
/* Logo do header mobile: travado em 120px (Figma) e sem a "altura-fantasma"
   do widget do ícone (line-height), senão no tablet o logo inflava (152px) e
   o respiro entre a logo e a borda de baixo ficava grande demais (header 69px).
   Assim o respiro fica ~12px e o header ~55-58px como no Figma. */
html body header.elementor.elementor-location-header .elementor-element-4800479 .elementor-icon,
html body header.elementor.elementor-location-header .elementor-element-4800479 .elementor-icon-wrapper,
html body header.elementor.elementor-location-header .elementor-element-4800479 .elementor-widget-container {
  line-height: 0 !important;
  font-size: 0 !important;
}
html body header.elementor.elementor-location-header .elementor-element-4800479 .elementor-icon svg,
html body header.elementor.elementor-location-header .elementor-element-4800479 img {
  width: 120px !important;
  max-width: 120px !important;
  height: auto !important;
  display: block !important;
}

/* =========================================
   Teto de largura em telas largas (4K)
   O conteúdo boxed do Elementor centraliza; os fundos
   full-width (.e-con) continuam ocupando a tela toda.
   Só age acima de 1600px — telas menores ficam intactas.
   ========================================= */
@media (min-width: 1600px) {
  /* containers Boxed clássicos (se houver) */
  .e-con-boxed > .e-con-inner {
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
  }
  /* HEADER — alinhamento tratado fora do media query (regra do 2761d2d
     com a conta max(20px, calc((100% - 1216px)/2))). Nada aqui. */
  /* FOOTER — mesma ideia */
  .elementor-location-footer > .e-con.e-flexbox-base {
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* =========================================
   Criar Conta (page 628) — Nome/Sobrenome
   empilhados em largura total (campos compridos)
   ========================================= */
body.page-id-628 .woocommerce-form-register .form-row-first,
body.page-id-628 .woocommerce-form-register .form-row-last {
  width: 100% !important;
  float: none !important;
  margin-right: 0 !important;
  clear: both;
}
body.page-id-628 .woocommerce-form-register .form-row {
  margin-bottom: 18px;
}
/* inputs um pouco mais altos, alinhados ao E-mail/Senha */
body.page-id-628 .woocommerce-form-register .input-text {
  width: 100%;
  padding: 14px 16px;
}

/* =========================================
   Carrinho clássico [woocommerce_cart] (fallback)
   ========================================= */
.woocommerce-cart .woocommerce {
  color:#fff; font-family:'Google Sans',system-ui,sans-serif;
  max-width:1100px; margin:0 auto; padding:0 clamp(16px,4vw,40px); box-sizing:border-box;
}
.woocommerce-cart table.cart,
.woocommerce-cart table.shop_table {
  background:#0A0E1E; border:1px solid #1E2C4A; border-radius:12px; border-collapse:separate; overflow:hidden; width:100%;
}
.woocommerce-cart table.cart th,
.woocommerce-cart table.cart td {
  border-color:#1E2C4A !important; color:#fff; padding:16px; background:transparent;
}
.woocommerce-cart table.cart thead th { color:#94A3BF; font-weight:500; text-transform:uppercase; font-size:12px; letter-spacing:.05em; }
.woocommerce-cart table.cart a { color:#4FC3F7; }
.woocommerce-cart .product-remove a.remove { color:#94A3BF !important; }
.woocommerce-cart .quantity input.qty {
  background:#0E1526; border:1px solid #1E2C4A; color:#fff; border-radius:8px; padding:8px; width:64px;
}
/* cupom + atualizar */
.woocommerce-cart .coupon input#coupon_code {
  background:#0E1526; border:1px solid #1E2C4A; color:#fff; border-radius:8px; padding:12px 14px;
}
.woocommerce-cart .actions .button,
.woocommerce-cart .actions button {
  background:#0E1526 !important; color:#fff !important; border:1px solid #1E2C4A !important; border-radius:8px !important;
}
/* totais do carrinho */
.woocommerce-cart .cart-collaterals .cart_totals {
  background:#0A0E1E; border:1px solid #1E2C4A; border-radius:12px; padding:8px 20px 20px; float:none; width:100%; max-width:420px; margin-left:auto;
}
.woocommerce-cart .cart_totals h2 { color:#fff; }
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td { border-color:#1E2C4A !important; color:#fff; }
.woocommerce-cart .cart_totals .order-total .amount { color:#fff; font-size:20px; }
/* botão finalizar compra — branco */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  background:#fff !important; color:#0A0E1E !important; border-radius:10px !important; font-weight:600 !important; padding:15px !important; text-align:center;
}
/* aviso "carrinho vazio" real do Woo (quando estiver vazio de verdade) */
.woocommerce-cart .cart-empty.woocommerce-info {
  background:#0A0E1E; border:1px solid #1E2C4A; border-top:2px solid #4FC3F7; color:#fff; border-radius:12px; padding:20px;
}
.woocommerce-cart .return-to-shop a.button {
  background:#fff !important; color:#0A0E1E !important; border-radius:10px !important; font-weight:600 !important;
}

/* =========================================
   Header alinhado ao content-box dos blocos (1216px)
   O container VISÍVEL do header é o .elementor-element-2761d2d.
   Ele vinha com padding lateral de 15% (percentual) — no 4K isso
   virava centenas de px de recuo e desalinhava/"esticava".
   Solução: largura total + a MESMA conta dos blocos, então o
   conteúdo interno (logo à esquerda, botões à direita) cai
   exatamente no mesmo eixo das seções (1216 centralizado).
   ========================================= */
/* Especificidade alta (6 classes) para vencer a regra do container
   atômico do Elementor, que tinha padding lateral de 15%. */
header.elementor.elementor-location-header .e-con.elementor-element-2761d2d.e-atomic-element.e-flexbox-base {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: max(20px, calc((100% - 1216px) / 2)) !important;
  padding-right: max(20px, calc((100% - 1216px) / 2)) !important;
  padding-inline-start: max(20px, calc((100% - 1216px) / 2)) !important;
  padding-inline-end: max(20px, calc((100% - 1216px) / 2)) !important;
}

/* =========================================
   Confirmação do pedido (order-received) — faixa de resumo
   -----------------------------------------
   O CSS do WooCommerce (woocommerce.css) trata essa <ul> como um
   bloco de texto com floats, e vencia as nossas regras:

     .woocommerce ul.order_details li            -> (0,2,2)
     .woocommerce-order .woocommerce-order-overview li -> (0,2,1)

   Por isso o `padding` e o `text-transform` do tema nunca valeram:
   quem mandava era `padding-left:0`, `border-right:1px dashed`,
   `float:left`, `font-size:.715em` e `line-height:1` do plugin.

   E o "fantasma" que desalinhava a faixa era o `::before` de
   clearfix do próprio WooCommerce (`content:" "; display:table`):
   num grid um pseudo-elemento vira item e ocupa UMA COLUNA inteira.

   Aqui subimos a especificidade para (0,3,x) usando a classe
   `order_details` — que o WooCommerce sempre põe nessa <ul> — e
   desligamos o clearfix. Sem truques: nada de `font-size:0`, que
   em 29/09/2026 (v6.5) apagou o texto de todos os cards.
   Validado em mock local COM o woocommerce.css carregado.
   ========================================= */

/* respiro no topo e no rodapé da página */
.woocommerce-order {
  padding-top: clamp(28px, 5vw, 56px);
  padding-bottom: clamp(32px, 6vw, 72px);
}

/* "Obrigado! Recebemos o seu pedido." era um <p> solto, sem estilo */
.woocommerce-order .woocommerce-thankyou-order-received {
  margin: 0;
  color: #fff;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  font-weight: 600;
  line-height: 1.25;
}

/* o clearfix do WooCommerce: é ele o item fantasma */
.woocommerce-order ul.woocommerce-order-overview.order_details::before,
.woocommerce-order ul.woocommerce-order-overview.order_details::after {
  content: none;
}

.woocommerce-order ul.woocommerce-order-overview.order_details {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;      /* todos os cards da linha com a mesma altura */
  gap: 0;                    /* espaçamento vem das margens dos <li> */
  margin: 36px 0 32px;       /* respiro entre o título e a faixa */
  padding: 0;
  border: 0;
  list-style: none;
}

.woocommerce-order ul.woocommerce-order-overview.order_details li {
  box-sizing: border-box;    /* sem isso o padding soma ao flex-basis */
  flex: 1 1 170px;
  min-width: 0;
  float: none;               /* WooCommerce: float:left */
  border-right: 0;           /* WooCommerce: 1px dashed #cfc8d8 dentro do card */
  margin: 0 14px 14px 0;     /* WooCommerce: margin-right:2em */
  padding: 20px 22px;        /* WooCommerce: padding-left:0; padding-right:2em */
  font-size: .75rem;         /* WooCommerce: .715em */
  line-height: 1.35;         /* WooCommerce: 1 */
  letter-spacing: .03em;
  word-break: normal;        /* antes cortava "lynxweb.co / m.br" no meio */
  overflow-wrap: anywhere;   /* só quebra se realmente não couber */
}
.woocommerce-order ul.woocommerce-order-overview.order_details li:last-of-type {
  margin-right: 0;
}

/* o e-mail é o campo mais longo: recebe uma fatia maior da sobra */
.woocommerce-order ul.woocommerce-order-overview.order_details li.email {
  flex-grow: 2.2;
}

.woocommerce-order ul.woocommerce-order-overview.order_details li strong {
  display: block;
  color: #fff;
  font-size: 1rem;           /* WooCommerce: 1.4em */
  line-height: 1.4;
  letter-spacing: normal;
  margin-top: 6px;
}

/* Quebras previsíveis: 5 por linha no desktop, 2 no tablet, 1 no celular.
   O `max-width` impede que um card sozinho na última linha estique e
   ocupe a largura toda. */
@media (max-width: 1023px) {
  .woocommerce-order ul.woocommerce-order-overview.order_details li {
    flex: 1 1 calc(50% - 7px);
    max-width: calc(50% - 7px);
  }
  .woocommerce-order ul.woocommerce-order-overview.order_details li.email { flex-grow: 1; }
  .woocommerce-order ul.woocommerce-order-overview.order_details li:nth-of-type(2n) { margin-right: 0; }
}
@media (max-width: 640px) {
  .woocommerce-order ul.woocommerce-order-overview.order_details li {
    flex: 1 1 100%;
    max-width: 100%;
    margin-right: 0;
  }
}

/* =========================================
   Pix (Asaas) na pagina de pedido recebido.
   O CSS do Woo para `ul.order_details li` (maiuscula, fonte pequena, float,
   borda tracejada) vazava para o bloco do Pix, que mora dentro dessa lista.
   ========================================= */
.woocommerce ul.order_details:has(> li.asaas-pix-instructions) > li,
.woocommerce ul.order_details .asaas-pix-instructions__list li {
  float: none !important; border: 0 !important; margin: 0 0 16px !important; padding: 0 !important;
  text-transform: none !important; font-size: 15px !important; line-height: 1.5 !important; width: 100%;
  color: #E5EAF3;
}
.woocommerce ul.order_details li.asaas-pix-instructions {
  display: flex !important; flex-direction: row !important; flex-wrap: wrap; gap: 24px; align-items: center;
  background: #0C1424; border: 1px solid #1A2A4A !important; border-radius: 12px; padding: 20px !important;
}
.asaas-pix-instructions img.js-pix-qr-code {
  background: #fff; padding: 10px; border-radius: 10px; width: 220px !important; height: 220px !important;
}
.woocommerce ul.order_details .asaas-pix-instructions__list {
  counter-reset: pix; list-style: none !important; padding: 0 !important; margin: 0 !important;
  flex: 1 1 280px; width: auto !important; max-width: none !important;
}
.woocommerce ul.order_details .asaas-pix-instructions__list li {
  position: relative; display: block !important; counter-increment: pix;
  padding-left: 38px !important; margin-bottom: 14px !important; color: #C9D3E5;
}
.woocommerce ul.order_details .asaas-pix-instructions__list li::before {
  content: counter(pix); position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; border-radius: 50%; background: #1A2A4A; color: #60D8F7;
  font-size: 13px; font-weight: 700; line-height: 26px; text-align: center;
}
/* prazo: nota sem numero, separada por linha */
.woocommerce ul.order_details .asaas-pix-instructions__list li:last-child {
  padding: 14px 0 0 !important; margin: 4px 0 0 !important; border-top: 1px solid #1A2A4A !important;
  color: #94A3BF; font-size: 13px !important;
}
.woocommerce ul.order_details .asaas-pix-instructions__list li:last-child::before { content: none; }
/* codigo copia-e-cola: uma linha com reticencias; o botao copia o codigo inteiro */
.woocommerce ul.order_details .asaas-pix-copy-to-clipboard > div {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; max-width: none !important;
}
.woocommerce ul.order_details .woocommerce-order-details__asaas-pix-payload {
  flex: 1 1 280px; height: auto !important; margin: 0 !important; overflow: hidden !important;
  white-space: nowrap !important; text-overflow: ellipsis; word-break: normal !important; overflow-wrap: normal !important;
  background: #0C1424 !important; border: 1px solid #1A2A4A; border-radius: 8px;
  color: #94A3BF !important; padding: 12px 14px !important; font-size: 13px !important; line-height: 20px;
}
.woocommerce ul.order_details .woocommerce-order-details__asaas-pix-button {
  background: var(--spp-blue, #2547A0) !important; color: #fff !important; border: 0 !important;
  border-radius: 8px !important; padding: 12px 20px !important; font-weight: 600 !important;
  font-size: 15px !important; text-transform: none !important;
}
.woocommerce ul.order_details .woocommerce-order-details__asaas-pix-button:hover { filter: brightness(1.15); }