/* =========================================
   WooCommerce My Account – ColinMarket (LIGHT)
   Autor: você :)
   Versão: 1.2
   ========================================= */

/* ---------- 0) Variáveis / Escopo ---------- */
.woocommerce-account {
  --cm-bg: #ffffff;
  --cm-card: #ffffff;
  --cm-border: #e5e7eb;         /* gray-200 */
  --cm-border-strong: #d1d5db;  /* gray-300 */
  --cm-text: #111827;           /* gray-900 */
  --cm-text-muted: #6b7280;     /* gray-500 */
  --cm-link: #2563eb;           /* blue-600 */
  --cm-link-hover: #1d4ed8;     /* blue-700 */
  --cm-chip: #f3f4f6;           /* gray-100 */
  --cm-table-head: #f8fafc;     /* slate-50 */
  --cm-focus: rgba(37, 99, 235, 0.18);
  --cm-btn: #000000;            /* preto */
  --cm-btn-hover: #111111;      /* preto no hover */
  --cm-radius-lg: 16px;
  --cm-radius-md: 12px;
  --cm-radius-sm: 5px;          /* para botões retangulares */
}

/* Não força grid por padrão; apenas dá folga entre colunas */
.woocommerce-account .woocommerce {
  gap: 24px;
}

/* Organiza em 2 colunas quando existir nav + content (e viewport larga) */
@media (min-width: 1024px) {
  .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content) {
    display: grid;
    grid-template-columns: 260px 1fr;
    align-items: start;
  }
}

/* =========================================
   1) Navegação lateral
   ========================================= */
.woocommerce-MyAccount-navigation {
  background: var(--cm-card);
  border: 1px solid var(--cm-border);
  border-radius: var(--cm-radius-lg);
  padding: 16px;
}
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation li { margin: 0; }
.woocommerce-MyAccount-navigation a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--cm-radius-md);
  text-decoration: none;
  color: var(--cm-text);
  font-weight: 600;
  border: 1px solid transparent;
  transition: background .2s, color .2s, border-color .2s;
}
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation a:hover {
  background: var(--cm-chip);
  border-color: var(--cm-border);
}

/* Ícones rápidos por emoji (pode remover se usar override com SVG) */
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard a::before { content: "🏠"; }
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--orders a::before { content: "📦"; }
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--downloads a::before { content: "⬇️"; }
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--edit-address a::before { content: "🏷️"; }
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--payment-methods a::before { content: "💳"; }
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--edit-account a::before { content: "⚙️"; }
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a::before { content: "🚪"; }
.woocommerce-MyAccount-navigation a::before { font-size: 16px; }

/* =========================================
   2) Conteúdo + Títulos + Mensagens
   ========================================= */
.woocommerce-MyAccount-content {
  background: var(--cm-card);
  border: 1px solid var(--cm-border);
  border-radius: var(--cm-radius-lg);
  padding: 22px;
  color: var(--cm-text);
}
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 { color: var(--cm-text); }
.woocommerce-MyAccount-content p { color: var(--cm-text-muted); }

/* Mensagens nativas */
.woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-MyAccount-content .woocommerce-error {
  background: #ffffff;
  border: 1px solid var(--cm-border);
  border-left-width: 4px;
  border-radius: var(--cm-radius-md);
  padding: 12px 14px;
  color: var(--cm-text);
}
.woocommerce-info { border-left-color: #3b82f6; }     /* blue-500 */
.woocommerce-message { border-left-color: #22c55e; }  /* green-500 */
.woocommerce-error { border-left-color: #ef4444; }    /* red-500 */

/* =========================================
   3) Tabelas (Orders / Downloads)
   ========================================= */
.woocommerce-account table.shop_table {
  width: 100%;
  border-collapse: collapse;
  background: var(--cm-card);
  border: 1px solid var(--cm-border);
  border-radius: var(--cm-radius-md);
  overflow: hidden;
}
.woocommerce-account table.shop_table thead th {
  background: var(--cm-table-head);
  color: var(--cm-text);
  font-weight: 700;
  padding: 14px;
  text-align: left;
  border-bottom: 1px solid var(--cm-border);
}
.woocommerce-account table.shop_table tbody td {
  padding: 14px;
  border-top: 1px solid var(--cm-border);
  color: var(--cm-text);
}
.woocommerce-account table.shop_table a {
  color: var(--cm-link);
  text-decoration: none;
}
.woocommerce-account table.shop_table a:hover {
  color: var(--cm-link-hover);
}

/* =========================================
   4) Botões (globais) – preto com texto branco
   ========================================= */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button:visited,
.woocommerce button.button:visited,
.woocommerce input.button:visited {
  background: var(--cm-btn);
  color: #ffffff !important;
  border: 1px solid transparent;
  border-radius: 999px;             /* pílula padrão global */
  padding: 10px 16px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: filter .2s, background .2s, transform .05s, color .2s;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background: var(--cm-btn-hover);
  color: #ffffff !important;
}
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active {
  transform: translateY(1px);
}

/* =========================================
   5) Botão "Download" (Downloads) – ícone + radius: 5px
   ========================================= */
.woocommerce-account .download-file .button {
  display: inline-flex;
  align-items: center;
  gap: 8px;                   /* espaço entre ícone e texto */
  padding: 8px 14px;
  border-radius: var(--cm-radius-sm); /* 5px */
  background: var(--cm-btn) !important;
  color: #ffffff !important;
  font-weight: 600;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.woocommerce-account .download-file .button::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 4v12m0 0l3.5-3.5M12 16.5l-3.5-3.5M4 20h16'/%3E%3C/svg%3E");
}
.woocommerce-account .download-file .button:hover {
  background: var(--cm-btn-hover) !important;
  color: #ffffff !important;
}

/* =========================================
   6) Formulários (Login / Endereços / Conta)
   ========================================= */
.woocommerce form .form-row,
.woocommerce-address-fields .form-row,
.woocommerce-EditAccountForm .form-row { margin-bottom: 14px; }

.woocommerce form .input-text,
.woocommerce form input[type="text"],
.woocommerce form input[type="email"],
.woocommerce form input[type="password"],
.woocommerce form input[type="tel"],
.woocommerce form input[type="number"],
.woocommerce form textarea,
.woocommerce form select {
  width: 100%;
  background: #ffffff;
  border: 1px solid var(--cm-border-strong);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--cm-text);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.woocommerce form .input-text:focus,
.woocommerce form select:focus,
.woocommerce form textarea:focus {
  border-color: var(--cm-link);
  box-shadow: 0 0 0 4px var(--cm-focus);
}

/* Colunas login/registro (deslogado) */
.woocommerce-account .u-columns .u-column1,
.woocommerce-account .u-columns .u-column2 {
  background: var(--cm-card);
  border: 1px solid var(--cm-border);
  border-radius: var(--cm-radius-lg);
  padding: 20px;
}

/* =========================================
   7) Breadcrumb / Títulos / Paginação
   ========================================= */
.woocommerce .woocommerce-breadcrumb { color: var(--cm-text-muted); }
.woocommerce-account h1,
.woocommerce-account h2.entry-title { color: var(--cm-text); }

.woocommerce nav.woocommerce-pagination ul { display: inline-flex; gap: 8px; padding: 0; }
.woocommerce nav.woocommerce-pagination li { list-style: none; }
.woocommerce nav.woocommerce-pagination a,
.woocommerce nav.woocommerce-pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 10px;
  border-radius: 10px;
  background: #fff; border: 1px solid var(--cm-border);
  color: var(--cm-text); font-weight: 600;
}
.woocommerce nav.woocommerce-pagination .current { background: var(--cm-chip); }

/* =========================================
   8) Orders – Status como “botões” outlined (rounded 5)
   ========================================= */
/* Esconde o texto original do status */
.woocommerce-orders-table__cell-order-status {
  position: relative;
  text-align: center;
  padding: 12px 8px !important;
  font-size: 0;         /* some com o label original */
  white-space: nowrap;
}
/* Alguns temas envolvem em <mark> — esconde para não duplicar */
.woocommerce-orders-table__cell-order-status mark {
  display: none !important;
}

/* “Botão” base por pseudo-elemento */
.woocommerce-orders-table__cell-order-status::after {
  display: inline-block;
  min-width: 110px;
  padding: 6px 12px;
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1;
  border-radius: var(--cm-radius-sm); /* 5px */
  background: transparent;
  border: 2px solid currentColor;     /* outlined */
  /* content & color definidos por status abaixo */
}

/* Labels + cores por status */
/*
.woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status::after {
  content: "Processing";
  color: #2563eb;
  border-color: #2563eb;
}
  */

  /* Muda o texto e a cor do status "Processing" */
.woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status::after {
  content: "Completed";
  color: #15803d;  /* cor verde para o texto */
  border-color: #15803d; /* cor verde para a borda */
}

.woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status::after {
  content: "Completed";
  color: #16a34a;  /* verde */
  border-color: #16a34a;
}
.woocommerce-orders-table__row--status-pending .woocommerce-orders-table__cell-order-status::after,
.woocommerce-orders-table__row--status-pending-payment .woocommerce-orders-table__cell-order-status::after {
  content: "Pending payment";
  color: #f59e0b;  /* amarelo */
  border-color: #f59e0b;
}
.woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status::after {
  content: "On hold";
  color: #f97316;  /* laranja */
  border-color: #f97316;
}
.woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status::after {
  content: "Cancelled";
  color: #dc2626;  /* vermelho */
  border-color: #dc2626;
}
.woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status::after {
  content: "Failed";
  color: #6b7280;  /* cinza */
  border-color: #6b7280;
}
.woocommerce-orders-table__row--status-refunded .woocommerce-orders-table__cell-order-status::after {
  content: "Refunded";
  color: #9333ea;  /* roxo */
  border-color: #9333ea;
}


/* Oculta apenas os botões Pay e Cancel na tabela de pedidos */
body.woocommerce-account .woocommerce-orders-table .button.pay,
body.woocommerce-account .woocommerce-orders-table .button.cancel {
    display: none !important;
}
body.woocommerce-account .woocommerce-orders-table .button.pay,
body.woocommerce-account .woocommerce-orders-table .button.cancel {
    display: none !important;
}

/* Oculta a linha inteira de "Actions" no resumo do pedido */
tr:has(.order-actions--heading) {
    display: none !important;
}


/* Remove arredondamento de qualquer elemento dentro do form */
.xoo-el-action-form,
.xoo-el-action-form * {
  border-radius: 0 !important;
}


/* REMOVE ORDER AGAIN: */
p.order-again {
  display: none;
}