@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Space+Grotesk:wght@500;600;700&display=swap");
/* ==========================================================================
   ConectHost — Order Form (standard_cart) custom overrides
   --------------------------------------------------------------------------
   Carregado por common.tpl via {assetExists file="custom.css"} (depois do
   all.min.css do order form). Espelha o design system do tema. Como o
   style.css do order form pode carregar por último em algumas versões do
   WHMCS, usamos seletores específicos + !important nos pontos de marca.
   Não editar style.css/all.min.css/scripts.min.js do order form.
   ========================================================================== */

:root {
    --ch-primary: #0a5edc;
    --ch-primary-dark: #0948b3;
    --ch-navy: #02345c;
    --ch-accent: #f67a3c;
    --ch-accent-dark: #e9631f;
    --ch-success: #16a34a;
    --ch-danger: #ef4444;
    --ch-bg: #f4f7fc;
    --ch-text: #334155;
    --ch-text-muted: #64748b;
    --ch-heading: #0f213a;
    --ch-border: #e2e8f0;
    --ch-border-strong: #cbd5e1;
    --ch-radius-sm: 8px;
    --ch-radius: 12px;
    --ch-radius-lg: 18px;
    --ch-radius-pill: 999px;
    --ch-shadow-xs: 0 1px 2px rgba(15,33,58,.06);
    --ch-shadow-sm: 0 2px 8px rgba(15,33,58,.06);
    --ch-shadow: 0 8px 24px rgba(15,33,58,.08);
    --ch-font-head: "Space Grotesk","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    --ch-font-mono: "JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* O corpo do carrinho vira um CARD BRANCO que senta sobre o deck navy do
   tema (V3). Assim NENHUM texto solto (h1, parágrafos de instrução, erros)
   cai escuro sobre o navy — tudo dentro do card é legível. */
#order-standard_cart .cart-body {
    background: #fff;
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius-lg);
    box-shadow: 0 1px 3px rgba(15,33,58,.05), 0 18px 44px -24px rgba(2,18,40,.35);
    padding: 1.6rem 1.8rem;
}
#order-standard_cart .header-lined { border-bottom-color: var(--ch-border); }
#order-standard_cart .header-lined h1 { color: var(--ch-heading); }
/* Voz técnica (V3): specs e somas em mono; preços/total em Space Grotesk */
#order-standard_cart .product .product-desc .feature-value,
#order-standard_cart .summary-totals,
#order-standard_cart .order-summary .clearfix { font-family: var(--ch-font-mono); font-size: .92em; }
#order-standard_cart .product-pricing .price,
#order-standard_cart .total-due-today .amt { font-family: var(--ch-font-head); }

#order-standard_cart { color: var(--ch-text); }
#order-standard_cart h1, #order-standard_cart h2, #order-standard_cart h3,
#order-standard_cart h4, #order-standard_cart h5 {
    font-family: var(--ch-font-head);
    color: var(--ch-heading);
    letter-spacing: -.01em;
}
#order-standard_cart a { color: var(--ch-primary); }
#order-standard_cart a:hover { color: var(--ch-primary-dark); }

/* ------------------------------------------------------------- HEADERS --- */
.header-lined { border-bottom: 2px solid var(--ch-border); padding-bottom: .75rem; margin-bottom: 1.5rem; }
.header-lined h1 { font-weight: 800 !important; }
.sub-heading { border-bottom: 1px solid var(--ch-border); margin: 1.5rem 0 1rem; }
.sub-heading span.primary-bg-color,
.sub-heading > span {
    background: transparent !important;
    color: var(--ch-heading) !important;
    font-family: var(--ch-font-head);
    font-weight: 700;
    border-bottom: 2px solid var(--ch-primary);
    padding-bottom: .5rem;
}

/* --------------------------------------------------- SIDEBAR CATEGORIAS -- */
.cart-sidebar .list-group-item.active,
.cart-sidebar .panel .list-group-item.active {
    background: var(--ch-primary) !important;
    border-color: var(--ch-primary) !important;
    color: #fff !important;
}
.cart-sidebar .list-group-item { border-color: var(--ch-border); }
.cart-sidebar .list-group-item:hover { background: #f1f5fb; }

/* ----------------------------------------------------- CARDS DE PRODUTO -- */
.products .product {
    background: #fff;
    border: 1px solid var(--ch-border) !important;
    border-radius: var(--ch-radius) !important;
    box-shadow: var(--ch-shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease;
    overflow: hidden;
}
.products .product:hover { transform: translateY(-4px); box-shadow: var(--ch-shadow); }
.products .product header {
    background: linear-gradient(120deg, var(--ch-navy), var(--ch-primary-dark)) !important;
    color: #fff !important;
    font-family: var(--ch-font-head);
    font-weight: 700;
}
.products .product header span { color: #fff !important; }
.products .product .product-desc .feature-value { color: var(--ch-primary); font-weight: 700; }
.products .product footer { border-top: 1px solid var(--ch-border); }
.products .product .product-pricing .price {
    color: var(--ch-heading) !important;
    font-family: var(--ch-font-head);
    font-weight: 800;
}

/* --------------------------------------------------------------- PANELS -- */
.panel {
    border: 1px solid var(--ch-border) !important;
    border-radius: var(--ch-radius) !important;
    box-shadow: var(--ch-shadow-xs);
    overflow: hidden;
}
.panel-heading {
    background: #f8fafc !important;
    border-bottom: 1px solid var(--ch-border) !important;
    color: var(--ch-heading) !important;
    font-family: var(--ch-font-head);
    font-weight: 700;
}
.panel-addon-selected, .panel-add.selected {
    border-color: var(--ch-primary) !important;
    box-shadow: 0 0 0 2px rgba(10,94,220,.18);
}
.panel-price { color: var(--ch-primary) !important; font-weight: 700; }

/* ------------------------------------------------------------- BOTÕES ---- */
#order-standard_cart .btn {
    font-family: var(--ch-font-head);
    font-weight: 600;
    border-radius: var(--ch-radius-sm) !important;
    transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
#order-standard_cart .btn:active { transform: translateY(1px); }
#order-standard_cart .btn-primary,
.btn-order-now, .btn-add {
    background-color: var(--ch-primary) !important;
    border-color: var(--ch-primary) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(10,94,220,.24);
}
#order-standard_cart .btn-primary:hover,
.btn-order-now:hover, .btn-add:hover {
    background-color: var(--ch-primary-dark) !important;
    border-color: var(--ch-primary-dark) !important;
}
/* Finalizar compra = CTA laranja de destaque */
.btn-checkout {
    background-color: var(--ch-accent) !important;
    border-color: var(--ch-accent) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(246,122,60,.26);
}
.btn-checkout:hover { background-color: var(--ch-accent-dark) !important; border-color: var(--ch-accent-dark) !important; }

/* --------------------------------------------------- RESUMO DO PEDIDO ---- */
.order-summary, .cart-sidebar .order-summary {
    border: 1px solid var(--ch-border) !important;
    border-radius: var(--ch-radius) !important;
    box-shadow: var(--ch-shadow-sm);
    overflow: hidden;
}
.order-summary .product-name { color: var(--ch-heading) !important; font-weight: 700; }
.order-summary .product-group { color: var(--ch-text-muted) !important; }
.summary-totals { border-top: 1px solid var(--ch-border); }
.total-due-today {
    background: linear-gradient(120deg, var(--ch-navy), var(--ch-primary-dark)) !important;
    color: #fff !important;
    border-radius: 0 0 var(--ch-radius) var(--ch-radius);
}
.total-due-today .amt { color: #fff !important; font-family: var(--ch-font-head); font-weight: 800; }
.total-due-today span { color: rgba(255,255,255,.85) !important; }

/* ----------------------------------------------------- BUSCA DE DOMÍNIO -- */
.domain-checker-bg, .domain-checker-container {
    background: linear-gradient(135deg, var(--ch-navy) 0%, var(--ch-primary-dark) 60%, var(--ch-primary) 100%) !important;
    border-radius: var(--ch-radius-lg);
}
.domain-checker-available { color: var(--ch-success) !important; }
.domain-checker-unavailable { color: var(--ch-danger) !important; }
.domain-pricing .price, .domain-pricing strong { color: var(--ch-primary); }

/* --------------------------------------------------------------- FORMS --- */
#order-standard_cart .form-control,
#order-standard_cart select {
    border-radius: var(--ch-radius-sm);
    border-color: var(--ch-border-strong);
}
#order-standard_cart .form-control:focus {
    border-color: var(--ch-primary);
    box-shadow: 0 0 0 .2rem rgba(10,94,220,.15);
}
.account { border: 1px solid var(--ch-border); border-radius: var(--ch-radius); transition: border-color .18s ease; }
.account.active { border-color: var(--ch-primary); box-shadow: 0 0 0 2px rgba(10,94,220,.15); }

/* -------------------------------------------------------------- ALERTAS -- */
.checkout-error-feedback, #order-standard_cart .alert-danger {
    border-radius: var(--ch-radius);
    background: #fef3f2; border-color: #fecdca; color: #b42318;
}
.checkout-security-msg { color: var(--ch-text-muted); }

@media (prefers-reduced-motion: reduce) { #order-standard_cart * { transition: none !important; } }