/*
 * Custom CSS for Nexus Cart Orderform
 *
 * This file allows you to customize the theme colors and styles for the Nexus Cart orderform.
 *
 * To customize colors:
 * - Replace the var() references with your own hex colors or other CSS values.
 * - For example, instead of --vl-primary: var(--zinc-900); use --vl-primary: #your-color;
 * - You can also override any CSS properties here.
 *
 * Note: Changes here will apply to the orderform's Shadow DOM.
 */

/* Add you custom styles here */
:host, :root {
    /* Primary colors */
    --vl-primary: var(--primary);
    --vl-primary-lifted: var(--primary-lifted);
    --vl-primary-accented: var(--primary-accented);

    /* Secondary colors */
    --vl-secondary: var(--secondary);
    --vl-secondary-lifted: var(--secondary-lifted);
    --vl-secondary-accented: var(--secondary-accented);

    /* Success colors */
    --vl-success: var(--success);
    --vl-success-lifted: var(--success-lifted);
    --vl-success-accented: var(--success-accented);

    /* Info colors */
    --vl-info: var(--info);
    --vl-info-lifted: var(--info-lifted);
    --vl-info-accented: var(--info-accented);

    /* Notice colors */
    --vl-notice: var(--notice);
    --vl-notice-lifted: var(--notice-lifted);
    --vl-notice-accented: var(--notice-accented);

    /* Warning colors */
    --vl-warning: var(--warning);
    --vl-warning-lifted: var(--warning-lifted);
    --vl-warning-accented: var(--warning-accented);

    /* Error colors */
    --vl-error: var(--error);
    --vl-error-lifted: var(--error-lifted);
    --vl-error-accented: var(--error-accented);

    /* Grayscale colors */
    --vl-grayscale: var(--grayscale);
    --vl-grayscale-lifted: var(--grayscale-lifted);
    --vl-grayscale-accented: var(--grayscale-accented);

    /* Neutral colors */
    --vl-neutral: var(--neutral);
    --vl-neutral-lifted: var(--neutral-lifted);
    --vl-neutral-accented: var(--neutral-accented);

    /* Text neutral colors */
    --vl-text-inverted: var(--text-inverted);
    --vl-text-muted: var(--text-muted);
    --vl-text-lifted: var(--text-lifted);
    --vl-text-accented: var(--text-accented);
    --vl-text: var(--text);

    /* Border neutral colors */
    --vl-border-muted: var(--border-muted);
    --vl-border: var(--border);
    --vl-border-lifted: var(--border-lifted);
    --vl-border-accented: var(--border-accented);

    /* Background neutral colors */
    --vl-bg: var(--bg);
    --vl-bg-muted: var(--bg-muted);
    --vl-bg-lifted: var(--bg-lifted);
    --vl-bg-accented: var(--bg-accented);
    --vl-bg-inverted: var(--bg-inverted);

    /* Additional custom properties */
    /* Font Sizes */
    --vl-text-xs: var(--text-xs);
    --vl-text-sm: var(--text-sm);
    --vl-text-md: var(--text-md);
    --vl-text-lg: var(--text-lg);

    /* Spacing */
    --vl-outline-sm: var(--outline-sm);
    --vl-outline-md: var(--outline-md);
    --vl-outline-lg: var(--outline-lg);

    /* Rounding */
    --vl-rounding-sm: var(--rounding-sm);
    --vl-rounding-md: var(--rounding-md);
    --vl-rounding-lg: var(--rounding-lg);

    /* Other */
    --vl-letter-spacing: var(--letter-spacing);
    --vl-disabled-opacity: var(--disabled-opacity);
}

/* ============================================================
   DM Brand 2026 — alinhamento com www.designmaster.com.br
   (deve vir por último para sobrescrever as definições anteriores)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Geist:wght@400;500;600;700;800&display=swap');

:root {
    /* Paleta DM 2026 (igual ao site institucional) */
    --dm-50:  #f0faff;
    --dm-100: #e0f4fe;
    --dm-200: #bae5fd;
    --dm-300: #7dd0fc;
    --dm-400: #54bcf8;   /* primary do site */
    --dm-500: #2aa5ec;
    --dm-600: #0084B6;   /* primary-dark */
    --dm-700: #006a92;   /* primary-darker */
    --dm-800: #0e5476;
    --dm-900: #0a1525;   /* bg-dark */
    --dm-950: #060e1a;

    --primary-50:  var(--dm-50);
    --primary-100: var(--dm-100);
    --primary-200: var(--dm-200);
    --primary-300: var(--dm-300);
    --primary-400: var(--dm-400);
    --primary-500: var(--dm-500);
    --primary-600: var(--dm-600);
    --primary-700: var(--dm-700);
    --primary-800: var(--dm-800);
    --primary-900: var(--dm-900);
    --primary-950: var(--dm-950);

    --primary:           var(--dm-600);
    --primary-lifted:    var(--dm-500);
    --primary-accented:  var(--dm-700);

    /* Tipografia */
    --font-display: 'Geist', 'Inter', system-ui, -apple-system, sans-serif;
    --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* Roundness um pouco maior (vibe do site) */
    --rounding-sm: 0.375rem;
    --rounding-md: 0.625rem;
    --rounding-lg: 1rem;
}

/* Aplicar tipografia em todo o WHMCS */
html, body {
    font-family: var(--font-body) !important;
    font-feature-settings: 'cv11', 'ss01';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.card-title, .panel-title,
.navbar-brand,
.section-title, .page-title {
    font-family: var(--font-display) !important;
    font-weight: 600;
    letter-spacing: -.025em;
}
h1, .h1, .page-title { letter-spacing: -.035em; font-weight: 600; }
h2, .h2 { letter-spacing: -.03em; }

/* Botões — botão primary com gradiente DM */
.btn-primary,
.btn-primary:focus,
button.btn-primary {
    background: linear-gradient(135deg, var(--dm-400) 0%, var(--dm-600) 100%) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(0,132,182,.28);
    transition: transform .15s ease, box-shadow .2s ease;
}
.btn-primary:hover,
.btn-primary:active,
button.btn-primary:hover {
    background: linear-gradient(135deg, var(--dm-500) 0%, var(--dm-700) 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(0,132,182,.45);
}

/* Header navbar — fundo navy igual ao header do site */
header.header,
.navbar.navbar-main,
.navbar {
    background-color: var(--dm-900) !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
}

/* Cards com bordas suaves e shadow leve (estilo site) */
.card, .panel {
    border-radius: var(--rounding-lg) !important;
    border-color: var(--border-muted) !important;
    box-shadow: 0 1px 2px rgba(11,18,32,.04), 0 4px 12px rgba(11,18,32,.04);
}

/* Inputs com tom DM no foco */
.form-control:focus, input:focus, select:focus, textarea:focus {
    border-color: var(--dm-400) !important;
    box-shadow: 0 0 0 3px rgba(84,188,248,.18) !important;
}

/* Links de KB e do footer */
a, a:visited { color: var(--dm-600); }
a:hover { color: var(--dm-700); }

/* Footer mais clean */
footer.footer {
    background: var(--dm-900) !important;
    color: rgba(255,255,255,.7);
}
footer.footer a { color: rgba(255,255,255,.85); }
footer.footer a:hover { color: var(--dm-300); }

/* Selection & focus visible */
::selection { background: var(--dm-400); color: #fff; }
:focus-visible { outline: 2px solid var(--dm-400) !important; outline-offset: 3px !important; }

/* Force light mode (impede Safari auto-dark) */
:root { color-scheme: light; }
html, body { color-scheme: light; }

/* responsive polish 2026-05-04 */

/* Cards de produto: contraste do texto descritivo (sem mexer no fundo) */
.product .product-desc { color: #475569 !important; }
.product .product-desc p,
.product .product-desc li { color: #475569 !important; }
.product .product-desc strong,
.product .product-desc h1, .product .product-desc h2,
.product .product-desc h3, .product .product-desc h4 { color: #0f172a !important; }

/* Footer do site: dar respiro aos links */
footer.footer .nav .nav-item .nav-link { padding: .55rem .9rem !important; }
footer.footer .nav { gap: .25rem; flex-wrap: wrap; justify-content: center !important; }

/* Mobile: ajustes finos */
@media (max-width: 768px) {
  /* Cards com mais respiro */
  .product { margin-bottom: 1rem !important; }
  /* Hero search button row */
  .home-shortcuts { padding: 1rem .75rem !important; }
  /* Container padding mobile */
  .main-content > .container,
  #main-body > .container { padding-left: 1rem !important; padding-right: 1rem !important; }
  /* Headlines não estourar */
  h1, h2 { word-wrap: break-word; overflow-wrap: break-word; }
  /* Pricing destacado */
  .product .product-pricing .price { font-size: 1.6rem !important; }
}

@media (max-width: 480px) {
  h1 { font-size: 1.6rem !important; }
  h2 { font-size: 1.35rem !important; }
  .navbar-brand .logo-img { max-height: 28px !important; height: 28px !important; }
}


/* product card footer light — substitui o navy escuro padrão do nexus */
.product > footer,
.product .product-pricing {
  background: #f8fafc !important;
  color: #0f172a !important;
  border-top: 1px solid #e5e7eb !important;
}
.product > footer * { color: inherit !important; }
.product .product-pricing .price { color: #0f172a !important; font-weight: 600 !important; }
.product > footer .btn-primary,
.product .product-pricing .btn-primary {
  background: linear-gradient(135deg, var(--dm-400) 0%, var(--dm-600) 100%) !important;
  color: #fff !important; border: none !important;
}