/* ============================================================================
   MagnoHost — Order Form (carrinho) overrides
   ----------------------------------------------------------------------------
   Carregado após all.min.css do order form (via {assetExists file="custom.css"}
   em common.tpl). O carrinho também herda o css/magnohost.css do template do
   sistema (botões, painéis, formulários), então aqui ajustamos só os
   componentes próprios do fluxo de pedido.
   ============================================================================ */

:root {
  --mh-purple-500: #9537ED;
  --mh-purple-600: #7C22CE;
  --mh-grad-vi: linear-gradient(90deg, #7C3AED 0%, #4F46E5 100%);
  --mh-grad-brand: linear-gradient(135deg, #A74AF7 0%, #9537ED 45%, #7C22CE 100%);
  --mh-surface: #FFFFFF;
  --mh-surface-2: #F4F0FB;
  --mh-border: rgba(149,55,237,.13);
  --mh-border-2: #E9E1F5;
  --mh-fg1: #1B1230;
  --mh-fg2: #5E5478;
  --mh-fg3: #6E6488;
  --mh-purple-400: #A24BF6;
  --mh-success: #16a34a;
  --mh-r-md: 14px; --mh-r-lg: 20px; --mh-r-xl: 28px; --mh-r-pill: 999px;
  --mh-shadow-sm: 0 1px 2px rgba(31,17,55,.06);
  --mh-shadow-md: 0 12px 30px -14px rgba(76,40,130,.22);
  --mh-shadow-lg: 0 30px 64px -22px rgba(76,40,130,.28);
  --mh-font-display: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mh-font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

body { font-family: var(--mh-font-body); color: var(--mh-fg1); }
h1, h2, h3, h4, h5, .product-title { font-family: var(--mh-font-display); }

/* ---------- Grade de produtos ---------- */
.products .product,
.product {
  background: var(--mh-surface);
  border: 1px solid var(--mh-border) !important;
  border-radius: var(--mh-r-lg) !important;
  box-shadow: var(--mh-shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
/* arredonda o header do card p/ casar com o raio do cartão (sem overflow:hidden) */
#order-standard_cart .products .product header {
  background: var(--mh-surface-2);
  border-bottom: 1px solid var(--mh-border);
  border-radius: var(--mh-r-lg) var(--mh-r-lg) 0 0;
}

/* ---------- Etiqueta de ESTOQUE ----------
   A base deixava .qty como texto cinza itálico .8em float:right (quase invisível).
   Vira uma PILL legível: verde = disponível; vermelho = "Sem estoque" (qty <= 0). */
#order-standard_cart .products .product header .qty {
  float: right; margin: 1px 0 0 8px; padding: 3px 10px;
  border-radius: var(--mh-r-pill); font-size: 11px; font-weight: 800; font-style: normal;
  text-transform: uppercase; letter-spacing: .03em; line-height: 1.5; white-space: nowrap;
  background: rgba(45,212,106,.14); color: #15803d; border: 1px solid rgba(45,212,106,.40);
}
#order-standard_cart .products .product header .qty.qty-out {
  background: rgba(220,38,38,.12); color: #b91c1c; border-color: rgba(220,38,38,.40);
}
/* Botão de pedido quando ESGOTADO: neutro e não-clicável (em vez do gradiente roxo) */
#order-standard_cart .products .product .btn-soldout {
  background: var(--mh-border-2) !important; color: var(--mh-fg3) !important;
  border: none !important; box-shadow: none !important; filter: none !important;
  cursor: not-allowed; pointer-events: none;
}
.products .product:hover,
.product:hover {
  transform: translateY(-4px);
  box-shadow: var(--mh-shadow-lg);
  border-color: rgba(124,58,237,.3) !important;
}
#order-standard_cart .products .product header span { font-family: var(--mh-font-display); font-weight: 800; color: var(--mh-fg1); }
.product-desc, .product-info { color: var(--mh-fg2); }

/* ---------- Legibilidade da descrição/specs dos produtos ----------
   O order form padrão usa font-size: 0.8em (~11px), pequeno e apertado.
   Aumenta a fonte, dá respiro entre as linhas e colore os ícones. */
#order-standard_cart .products .product div.product-desc {
  font-size: 12px; color: var(--mh-fg1); padding: 12px 16px;
}
#order-standard_cart .products .product div.product-desc p {
  margin: 0; line-height: 1.6; color: var(--mh-fg1);
}
#order-standard_cart .products .product div.product-desc i.fas {
  display: inline-block; width: 18px; text-align: center; margin-right: 5px;
  color: var(--mh-purple-500);
}
#order-standard_cart .products .product div.product-desc i.fa-check {
  color: var(--mh-success);
}
#order-standard_cart .products .product div.product-desc ul {
  list-style: none; padding: 0; margin: 8px 0 0;
}
#order-standard_cart .products .product div.product-desc li {
  padding: 3px 0; color: var(--mh-fg1);
}
#order-standard_cart .products .product div.product-desc .feature-value {
  font-weight: 700; color: var(--mh-purple-600);
}
.product-pricing, .price {
  font-family: var(--mh-font-display); font-weight: 800; color: var(--mh-purple-600);
  overflow-wrap: anywhere;
}
.product-pricing .price { color: var(--mh-purple-600); }
.product .cycle, .product-pricing .cycle { color: var(--mh-fg3); font-weight: 600; }

/* Botão de pedido (era verde no padrão) -> gradiente da marca */
.order-button,
.product .btn,
.btn.btn-success {
  background: var(--mh-grad-vi) !important;
  border: none !important;
  color: #fff !important;
  border-radius: var(--mh-r-md) !important;
  font-weight: 700;
}
.order-button:hover, .product .btn:hover { filter: brightness(1.08); }

/* O footer do card flutua à direita (40%); prende o botão à largura da coluna
   para ele NÃO vazar pela borda do card. Quebra o texto se precisar. */
#order-standard_cart .products .product footer {
  box-sizing: border-box;
  padding: 0 14px;
}
#order-standard_cart .products .product footer .btn,
.product footer .btn-order-now {
  display: flex;
  align-items: center;        /* centraliza o ícone verticalmente com o texto */
  justify-content: center;    /* centraliza ícone+texto na largura do botão */
  gap: 6px;                   /* respiro entre ícone e texto (flex ignora o espaço do HTML) */
  width: 100%;
  max-width: 100%;
  white-space: normal;
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
  line-height: 1.25;
}

/* ---------- Resumo do pedido / sidebar ---------- */
.order-summary,
.summary-container,
.cart-sidebar .panel {
  background: var(--mh-surface);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r-xl);
  box-shadow: var(--mh-shadow-sm);
}
.total-due-today {
  font-family: var(--mh-font-display); font-weight: 800; color: var(--mh-fg1);
}
.total-due-today { color: var(--mh-purple-600); }
.cart-promotion-code .btn { white-space: nowrap; }

/* ---------- Domínio (checker, spotlight TLDs) ---------- */
.domain-checker-bg, .domain-checker-container {
  background: var(--mh-grad-brand) !important;
  border-radius: var(--mh-r-xl);
}
.domain-checker-available, .domain-checker-result-headline.available { color: #16a34a; }
.domain-checker-unavailable { color: #dc2626; }
.spotlight-tld, .spotlight-tlds .spotlight-tld {
  border-radius: var(--mh-r-lg); border: 1px solid var(--mh-border);
  background: var(--mh-surface);
}
.spotlight-tld-hot, .spotlight-tld-new, .spotlight-tld-sale {
  background: var(--mh-grad-vi); color: #fff; border-radius: var(--mh-r-pill);
  font-weight: 700; padding: 3px 10px; font-size: 11px;
}
.suggested-domains .domain, .domain-suggestions .domain { border-radius: var(--mh-r-md); }

/* ---------- Avisos finos ---------- */
.slim-alert { border-radius: var(--mh-r-md); border: 1px solid var(--mh-border); }

/* ---------- Configuração de produto / Opções Configuráveis ---------- */
.product-info {
  background: var(--mh-surface); border: 1px solid var(--mh-border);
  border-radius: var(--mh-r-lg);
}
/* Card das opções: superfície suave + conteúdo em largura cheia (não fica meio vazio) */
.product-configurable-options {
  background: var(--mh-surface) !important;
  border: 1px solid var(--mh-border) !important;
  border-radius: var(--mh-r-lg) !important;
  padding: 16px 20px;
}
.product-configurable-options .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
.product-configurable-options .form-control { border-radius: var(--mh-r-md); }
.product-configurable-options .form-group { margin-bottom: 6px; }
/* nome da opção (rótulo principal) em destaque */
.product-configurable-options .form-group > label[for] {
  display: block; font-weight: 700; color: var(--mh-fg1); margin-bottom: 6px;
}
/* cada alternativa (radio/checkbox + texto) como linha clicável */
.product-configurable-options .form-group > label:not([for]) {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 500; color: var(--mh-fg1); cursor: pointer;
  margin: 2px 0; padding: 6px 10px; border-radius: var(--mh-r-md);
}
.product-configurable-options .form-group > label:not([for]):hover { background: rgba(124,58,237,.06); }

/* Radios/checkboxes iCheck (sprite "square-blue") recoloridos para o roxo da marca.
   hue-rotate desloca o azul (~207°) para o roxo (~262°) sem trocar o sprite. */
.iradio_square-blue, .icheckbox_square-blue { filter: hue-rotate(55deg) saturate(1.15); }

/* Respiro entre o card de opções e a caixa de ajuda (estavam colados) */
.product-configurable-options { margin-bottom: 16px; }
.alert.info-text-sm { margin-top: 16px; }

/* ---------- Descrição do produto na pág. de CONFIGURAR (.product-info) ----------
   Mesma legibilidade da listagem (12px, espaçamento, ícones coloridos). */
.product-info { padding: 18px 20px; }
.product-info .product-title {
  font-family: var(--mh-font-display); font-weight: 800; font-size: 20px;
  color: var(--mh-fg1); margin-bottom: 10px;
}
.product-info > p:not(.product-title) {
  font-size: 12px; line-height: 1.6; color: var(--mh-fg1); margin: 0;
}
.product-info i.fas {
  display: inline-block; width: 18px; text-align: center; margin-right: 5px;
  color: var(--mh-purple-500);
}
.product-info i.fa-check { color: var(--mh-success); }

/* ---------- Resumo do Pedido — cabeçalho roxo (era cinza escuro #666) ---------- */
#order-standard_cart .order-summary {
  background: var(--mh-grad-vi) !important;
  border: none !important;
  border-radius: var(--mh-r-lg) !important;
  box-shadow: var(--mh-shadow-md);
  overflow: hidden;
}
#order-standard_cart .order-summary h2 {
  font-family: var(--mh-font-display); font-weight: 800; font-size: 18px;
  color: #fff; padding: 15px 16px;
}
#order-standard_cart .summary-container {
  background: var(--mh-surface) !important;
  font-size: 13px; color: var(--mh-fg2); padding: 18px 16px;
}
#order-standard_cart .order-summary .product-name {
  font-family: var(--mh-font-display); font-weight: 800; font-size: 15px; color: var(--mh-fg1);
}
#order-standard_cart .order-summary .product-group { color: var(--mh-fg3); }
#order-standard_cart .order-summary .summary-totals { border-color: var(--mh-border); }
#order-standard_cart .order-summary .total-due-today .amt {
  font-family: var(--mh-font-display); font-weight: 800; color: var(--mh-purple-600);
}

/* ---------- Erro do order form ---------- */
.error-heading { font-family: var(--mh-font-display); font-weight: 800; color: var(--mh-fg1); }

/* ===================== REVISÃO (auditoria multiagente) ===================== */
/* Itens/abas do carrinho: o markup real usa .view-cart-* (as regras .cart-* eram mortas).
   Aba ativa em gradiente roxo (era azul #058 da base standard_cart). */
#order-standard_cart .view-cart-items-header {
  background: var(--mh-surface-2) !important; border-bottom: 1px solid var(--mh-border) !important;
  color: var(--mh-fg3); font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: .04em;
}
#order-standard_cart .view-cart-items .item { border-bottom: 1px solid var(--mh-border); }
#order-standard_cart .view-cart-tabs .nav-tabs { border-bottom-color: var(--mh-border-2); }
#order-standard_cart .view-cart-tabs .nav-tabs .nav-link { color: var(--mh-fg2); font-weight: 600; border: none; }
#order-standard_cart .view-cart-tabs .nav-tabs .nav-link.active,
#order-standard_cart .view-cart-tabs .nav-tabs a[aria-selected="true"] {
  background: var(--mh-grad-vi) !important; color: #fff !important; border-color: transparent !important;
}

/* Faixa "adicionar" dos addons (produto + domínio): verde BS3 #5cb85c -> gradiente roxo */
#order-standard_cart .panel-addon { border-radius: var(--mh-r-lg); border-color: var(--mh-border); }
#order-standard_cart .panel-addon .panel-add,
#order-standard_cart .panel-addon-selected .panel-add { background: var(--mh-grad-vi) !important; color: #fff; }
#order-standard_cart .panel-addon-selected { border-color: var(--mh-purple-500); }

/* Cabeçalhos de seção (.sub-heading): texto azul #058 -> roxo da marca */
#order-standard_cart .sub-heading span,
#order-standard_cart .sub-heading-borderless span {
  color: var(--mh-purple-600); font-family: var(--mh-font-display); font-weight: 700;
}
#order-standard_cart .sub-heading { border-top-color: var(--mh-border-2); }

/* Foco de teclado visível também no carrinho (a base zera o outline) */
:where(a, button, .btn, .nav-link, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--mh-purple-400) !important; outline-offset: 2px;
}

/* Cards de produto empilham descrição + preço/botão em tablet/mobile (era só <576px) */
@media (max-width: 991px) {
  #order-standard_cart .products .product div.product-desc,
  #order-standard_cart .products .product footer { float: none !important; width: 100% !important; }
  #order-standard_cart .products .product footer { margin: 10px 0 0; padding: 0 16px 14px; text-align: left; }
}

/* ===================== REVISÃO 2 (cobertura de cor restante do carrinho) ===================== */
/* "Esvaziar carrinho" (btn-link) era azul #058 -> neutro discreto */
#order-standard_cart .empty-cart .btn { background: transparent !important; color: var(--mh-fg2) !important; }
#order-standard_cart .empty-cart .btn:hover { color: var(--mh-purple-600) !important; text-decoration: underline; }
/* Borda inferior 2px azul #058 sob a lista de itens */
#order-standard_cart .view-cart-items { border-bottom-color: var(--mh-border-2) !important; }

/* ---------- Botão REMOVER (X) do item do carrinho ----------
   A base punha um .btn largo numa coluna col-sm-1 estreita (~46px c/ 30px de padding do
   grid) → o X estourava pra fora do card à direita. Escopado à ÚLTIMA coluna da linha
   (o X do desktop; não afeta o "× Remover" com texto do mobile, que fica na 1ª coluna). */
#order-standard_cart .view-cart-items .item .row > div:last-child {
  padding-left: 4px; padding-right: 4px; text-align: center;
}
#order-standard_cart .view-cart-items .item .row > div:last-child .btn-remove-from-cart {
  padding: 0; min-width: 0; width: 30px; height: 30px; max-width: 100%;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
  border-radius: 50%; border: 1px solid transparent;
  color: var(--mh-fg3); background: transparent;
}
#order-standard_cart .view-cart-items .item .row > div:last-child .btn-remove-from-cart:hover,
#order-standard_cart .view-cart-items .item .row > div:last-child .btn-remove-from-cart:focus {
  color: #dc2626; background: rgba(220,38,38,.10); border-color: rgba(220,38,38,.30); text-decoration: none;
}
/* Botão "Adicionar" das recomendações (era verde #9abb3a) -> gradiente da marca */
#order-standard_cart .product-recommendations .product-recommendation .btn-add { background: var(--mh-grad-vi) !important; border: none; color: #fff; }
#order-standard_cart .product-recommendations .product-recommendation .btn-add .arrow { background: transparent !important; }
/* Botão "Finalizar" DESABILITADO: afordância clara (não gradiente roxo cheio) */
#order-standard_cart .btn-checkout.disabled,
#order-standard_cart .btn.btn-success.disabled { background: var(--mh-border-2) !important; color: var(--mh-fg3) !important; opacity: 1; cursor: not-allowed; }