/* Mega Dedicados — telas de pedido no WHMCS (21/10/2026, v2 escura). Mesma linguagem do site megadedicados.com.br:
   fundo marinho profundo com a malha do herói, cards #0B3557, sinal ciano só em seleção/foco/ação.
   O "chrome" do Lagom (barra, título, rodapé, cookie) some nestas telas; topo e rodapé são nossos (configureproduct.tpl). */
.mega-order{--bg0:#01192B;--bg1:#02253D;--bg2:#0B3557;--bg3:#124068;--bg4:#1B4C78;
  --ink:#F3F7FB;--ink2:#C6D3E0;--mute:#8FA3B8;--line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.15);
  --sinal:#00B5EA;--sinal2:#5FD3F5;--sinal-ink:#02253D;--sinal-dim:rgba(0,181,234,.13);--sinal-glow:rgba(0,181,234,.45);--ok:#36D399;
  --display:"Barlow",system-ui,sans-serif;--body:"Source Sans 3",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace}
.mega-order,.mega-order body{background:var(--bg0)!important;color:var(--ink)}
.mega-order body{background:
  radial-gradient(900px 420px at 10% 0%,rgba(0,181,234,.16),transparent 62%),
  radial-gradient(700px 380px at 95% 40%,rgba(0,181,234,.07),transparent 60%),
  repeating-linear-gradient(90deg,rgba(255,255,255,.022) 0 1px,transparent 1px 96px),
  repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 96px),var(--bg0)!important;background-attachment:fixed!important}
/* fora o Lagom */
.mega-order .app-nav,.mega-order .main-header,.mega-order .main-footer,.mega-order .cookie-bar,.mega-order .main-header-title,.mega-order .page-order .sidebar,.mega-order .page-order .breadcrumb{display:none!important}
html.mega-order body.lagom,html.mega-order body{padding-top:0!important;margin-top:0!important}
.mega-order .app-main{margin-top:0!important;padding-top:0!important}
.mega-order .app-main,.mega-order .main-body,.mega-order .main-body>.container,.mega-order #main-body{background:transparent!important;padding:0!important;max-width:none!important;width:100%!important}

/* topo e rodapé próprios */
.mg-bar{position:sticky;top:0;z-index:40;background:rgba(1,25,43,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.mg-bar-in{max-width:1180px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.mg-logo img{height:42px;width:auto;display:block}
.mg-bar-nav{display:flex;align-items:center;gap:20px;font:600 14.5px var(--body);white-space:nowrap}
.mg-bar-nav>a{color:var(--ink2);text-decoration:none}.mg-bar-nav>a:hover{color:#fff}
.mg-lang{display:inline-flex;gap:2px;border:1px solid var(--line2);border-radius:999px;padding:2px}
.mg-lang a{font-size:12px;font-weight:700;letter-spacing:.04em;padding:4px 9px;border-radius:999px;color:var(--mute);text-decoration:none}
.mg-lang a[aria-current]{background:rgba(255,255,255,.14);color:#fff}
@media (max-width:640px){.mg-bar-nav>a:first-child{display:none}.mg-logo img{height:34px}}
.mg-foot{max-width:1180px;margin:0 auto;padding:28px 20px 40px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13.5px;color:var(--mute)}
.mg-foot a{color:var(--ink2);text-decoration:none}.mg-foot a:hover{color:#fff}

#order-standard_cart.mega{font-family:var(--body);font-size:16px;line-height:1.5;color:var(--ink);max-width:1180px;margin:0 auto;padding:0 20px 64px}
#order-standard_cart.mega *{box-sizing:border-box}
.mega .w-hidden{display:none}
.mg-steps{display:flex;gap:4px;align-items:center;padding:28px 0 22px;font-size:14px;color:var(--mute)}
.mg-steps span{display:flex;align-items:center;gap:8px}
.mg-steps span+span::before{content:"";width:28px;height:1px;background:var(--line2);margin:0 10px}
.mg-steps i{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line2);display:inline-grid;place-items:center;font-style:normal;font:700 12px var(--display)}
.mg-steps .on{color:#fff;font-weight:600}
.mg-steps .on i{background:var(--sinal);border-color:var(--sinal);color:var(--sinal-ink);box-shadow:0 0 0 4px var(--sinal-dim)}
.mg-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:36px;align-items:start}
@media (max-width:940px){.mg-grid{grid-template-columns:1fr}.mg-summary{position:static!important}}

.mg-head h1{font-family:var(--display);font-weight:700;font-size:clamp(32px,4vw,44px);letter-spacing:-.02em;line-height:1.05;margin:0;color:#fff;text-wrap:balance}
.mg-sub{margin:12px 0 12px;color:var(--mute);font-size:15px}
.mg-specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line2);border:1px solid var(--line2);border-radius:var(--r,12px);overflow:hidden}
.mg-spec{background:var(--bg1);padding:13px 16px;display:flex;flex-direction:column;gap:2px;min-width:0}
.mg-spec b{font:700 18px/1.2 var(--display);color:#fff;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mg-spec span{font-size:13px;color:var(--mute)}
@media (max-width:560px){.mg-specs{grid-template-columns:repeat(2,minmax(0,1fr))}}

.mg-alert{margin-top:22px;padding:12px 16px;border-radius:12px;background:rgba(255,138,92,.12);border:1px solid rgba(255,138,92,.45);color:#FFD2C0}
.mg-alert p{margin:0 0 4px;font-weight:600}.mg-alert ul{margin:0;padding-left:18px}

.mg-sec{margin-top:44px}
.mg-sec h2{font:700 22px/1.2 var(--display);margin:0;letter-spacing:-.01em;color:#fff}
.mg-sec .hint{color:var(--mute);font-size:14.5px;margin:4px 0 14px}

.mg-tiles{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.mg-tiles-2{grid-template-columns:repeat(2,minmax(0,1fr))}.mg-tiles-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:560px){.mg-tiles-3,.mg-tiles-2{grid-template-columns:1fr 1fr}}
.mg-tile{position:relative;display:flex;flex-direction:column;gap:3px;padding:14px 44px 14px 16px;border:1px solid var(--line2);border-radius:12px;background:var(--bg2);cursor:pointer;margin:0;font-weight:400;min-width:0}
.mg-tile:hover{border-color:rgba(0,181,234,.5)}
.mg-tile[hidden]{display:none}
.mg-tile input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.mg-tile::after{content:"";position:absolute;top:14px;right:14px;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line2)}
.mg-tile:has(input:checked){border-color:var(--sinal);box-shadow:0 0 0 1px var(--sinal),0 18px 50px rgba(0,181,234,.12);background:linear-gradient(180deg,rgba(0,181,234,.10),rgba(0,181,234,0) 70%),var(--bg2)}
.mg-tile:has(input:checked)::after{border-color:var(--sinal);background:var(--sinal) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='%2302253D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/12px no-repeat}
.mg-tile:has(input:focus-visible){outline:2px solid var(--sinal2);outline-offset:2px}
.mg-tile .t{font-weight:600;font-size:16px;color:#fff}
.mg-tile .d{font-size:13.5px;color:var(--mute)}
.mg-tile .p{font-size:13px;color:var(--sinal2);font-weight:600;min-height:1.2em}
.mg-tile.eol .t{color:var(--mute)}.mg-tile.eol .p{color:var(--mute);font-weight:400}
.mg-cy .d{font:600 16px var(--display);color:var(--ink)}
.mg-cy .p{display:inline-block;width:max-content;background:rgba(54,211,153,.14);color:var(--ok);border-radius:999px;padding:1px 9px;font-size:12.5px;margin-top:2px}
.mg-cy .p:empty{display:none}

.mg-fam{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;background:var(--bg1);border:1px solid var(--line2);border-radius:999px;margin:0 0 12px}
.mg-chip{appearance:none;border:0;background:transparent;color:var(--ink2);border-radius:999px;padding:8px 16px;font:600 14.5px var(--body);cursor:pointer}
.mg-chip:hover{color:#fff}
.mg-chip.on{background:var(--sinal);color:var(--sinal-ink)}
.mg-chip:focus-visible{outline:2px solid var(--sinal2);outline-offset:2px}

.mg-rows{display:grid;gap:8px}
.mg-row{display:grid;grid-template-columns:200px minmax(0,1fr);gap:14px;align-items:center;padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:var(--bg1)}
.mg-row .n{font-weight:600;margin:0;color:#fff;display:flex;flex-direction:column;gap:2px}
.mg-row .n .d{font-weight:400;font-size:13px;color:var(--mute)}
.mg-row-col{grid-template-columns:1fr;gap:8px}
@media (max-width:680px){.mg-row{grid-template-columns:1fr}}
.mg-pills{display:flex;flex-wrap:wrap;gap:6px}
.mg-pill{position:relative;display:flex;flex-direction:column;align-items:center;padding:8px 14px;border:1px solid var(--line2);border-radius:10px;background:var(--bg2);cursor:pointer;margin:0;font-weight:400;min-width:98px;text-align:center}
.mg-pill:hover{border-color:rgba(0,181,234,.5)}
.mg-pill input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.mg-pill:has(input:checked){border-color:var(--sinal);background:var(--sinal-dim);box-shadow:0 0 0 1px var(--sinal)}
.mg-pill:has(input:focus-visible){outline:2px solid var(--sinal2);outline-offset:2px}
.mg-pill .t{font-weight:600;font-size:14.5px;color:#fff}
.mg-pill .p{font-size:12px;color:var(--mute)}
.mg-pill:has(input:checked) .p{color:var(--sinal2)}
.mg-check{display:flex;align-items:center;gap:8px;margin:0}
.mg-text,.mg-row select,.mg-row input.form-control,.mg-row textarea{appearance:none;-webkit-appearance:none;width:100%;background:var(--bg0)!important;border:1px solid var(--line2)!important;border-radius:10px;padding:11px 13px;font:15px var(--body);color:#fff!important}
.mg-text::placeholder{color:var(--mute)}
.mg-text:focus,.mg-row select:focus,.mg-row textarea:focus{outline:none;border-color:var(--sinal)!important;box-shadow:0 0 0 3px var(--sinal-dim)}
.mg-mono{font-family:var(--mono)!important;font-size:14px!important}
.mg-qty{max-width:120px}
.mg-pw{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px}
.mg-mini{appearance:none;border:1px solid var(--line2);background:var(--bg2);color:#fff;border-radius:10px;padding:0 14px;font:600 13.5px var(--body);cursor:pointer}
.mg-mini:hover{border-color:var(--sinal)}

/* o resumo é o momento da página: card com o brilho do plano "mais escolhido" do site */
.mg-summary{position:sticky;top:88px;border-radius:16px;background:linear-gradient(180deg,var(--bg3),var(--bg2) 55%);border:1px solid var(--sinal);box-shadow:0 0 0 1px var(--sinal),0 30px 80px rgba(0,181,234,.16);overflow:hidden}
.mg-sum-head{padding:18px 22px;border-bottom:1px solid var(--line2);display:flex;justify-content:space-between;align-items:center}
.mg-sum-head b{font:700 18px var(--display);color:#fff}
.mg-sum-head .loader{color:var(--mute);font-size:13px}
.mg-sum-lines{padding:14px 22px;display:grid;gap:9px;font-size:14.5px}
.mg-sum-lines div{display:flex;justify-content:space-between;gap:12px}
.mg-sum-lines .k{color:var(--ink2)}.mg-sum-lines .v{font-family:var(--mono);font-size:13px;white-space:nowrap;color:#fff}
.mg-sum-total{padding:18px 22px;border-top:1px solid var(--line2);display:flex;flex-direction:column;gap:2px;background:rgba(1,25,43,.35)}
.mg-sum-total .l{font-size:13px;color:var(--mute)}
.mg-sum-total b{font:700 40px/1.05 var(--display);letter-spacing:-.02em;color:#fff}
.mg-sum-total .r{font-size:13px;color:var(--mute)}
.mg-cta{padding:8px 22px 16px}
.mg-btn{display:inline-flex;align-items:center;justify-content:center;width:100%;padding:15px 24px;border-radius:12px;font:700 16px var(--body);border:0;background:var(--sinal);color:var(--sinal-ink);cursor:pointer}
.mg-btn:hover{background:var(--sinal2);box-shadow:0 0 0 6px var(--sinal-dim)}
.mg-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.mg-trust{list-style:none;margin:0;padding:6px 22px 20px;display:grid;gap:7px;font-size:13.5px;color:var(--ink2)}
.mg-trust li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--sinal);margin-right:9px;vertical-align:middle;box-shadow:0 0 8px var(--sinal-glow)}
@media (prefers-reduced-motion:no-preference){.mg-tile,.mg-pill,.mg-chip,.mg-btn{transition:border-color .15s,box-shadow .15s,background .15s,color .15s}}
@media (max-width:640px){.mg-steps{font-size:13px}.mg-steps span:not(.on){font-size:0;gap:0}.mg-steps span:not(.on) i{font-size:12px}.mg-steps span+span::before{width:16px;margin:0 6px}.mg-bar-in{padding:12px 16px}#order-standard_cart.mega{padding:0 16px 48px}}
@media (max-width:640px){.mg-fam{border-radius:16px;display:flex}}

/* 21/10: ícones dos sistemas (teste a pedido do Diego) — selo claro com a marca na cor dela; no chip, só o desenho na cor do texto */
.mg-tile.com-ico{padding-left:64px;min-height:64px;justify-content:center}
.mg-ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:10px;background:#F3F7FB;box-shadow:inset 0 0 0 1px rgba(2,37,61,.08)}
.mg-ico::before{content:"";position:absolute;inset:8px;background:var(--cor);-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.mg-tile.eol .mg-ico{opacity:.55;filter:grayscale(1)}
.mg-chip{display:inline-flex;align-items:center;gap:8px}
.mg-ico-sm{width:16px;height:16px;flex:none;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat;opacity:.85}
.mg-chip.on .mg-ico-sm{opacity:1}
.mg-rec{display:inline-block;width:max-content;font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--sinal-ink);background:var(--sinal);border-radius:999px;padding:1px 8px;margin-top:2px}
/* lista do grupo (products.tpl) */
.mg-lista-head{padding:36px 0 24px}
.mg-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.mg-plano{background:var(--bg1);border:1px solid var(--line2);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:12px}
.mg-plano h2{font:700 20px/1.2 var(--display);color:#fff;margin:0}
.mg-plano-preco{margin:0;color:var(--mute);font-size:13.5px}
.mg-plano-preco b{font:700 26px/1.1 var(--display);color:#fff;letter-spacing:-.01em}
.mg-plano-desc{color:var(--ink2);font-size:14.5px;line-height:1.55;flex:1;margin:0;padding:0;list-style:none}
.mg-plano-desc *{color:inherit!important;background:none!important;padding:0!important;margin:0!important;font:inherit!important;min-height:0!important;height:auto!important;line-height:1.7!important}
.mg-plano-desc b,.mg-plano-desc strong{color:#fff!important;font-weight:600!important}
.mg-plano-desc br{display:none}
.mg-plano-btn{text-align:center;text-decoration:none}
.mg-plano-desc ul{list-style:none!important;display:flex!important;flex-direction:column;gap:6px}
.mg-plano-desc li{display:block!important;border:0!important;line-height:1.45!important}
.mg-plano-desc li::before,.mg-plano-desc li::after{content:none!important;display:none!important}
.mg-plano-desc>p:first-child{display:none}
a.mg-btn,a.mg-btn:hover,a.mg-btn:focus{color:var(--sinal-ink)!important;text-decoration:none}

/* VPS com app (22/10): tile travado do aplicativo + domínio próprio opcional */
.mg-tile.locked{cursor:default;border-color:var(--sinal);background:linear-gradient(180deg,rgba(0,181,234,.10),rgba(0,181,234,0) 70%),var(--bg2)}
.mg-tile.locked .t small{color:var(--mute);font-weight:400;font-size:13px}
.mg-dom{margin:10px 0 4px}
.mg-dom-abre{background:none;border:0;padding:4px 0;color:var(--sinal);font:inherit;font-size:14px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.mg-dom-abre::before{content:"+";text-decoration:none;display:inline-block;width:1em}
.mg-dom-abre[aria-expanded="true"]::before{content:"−"}
.mg-dom-abre:focus-visible{outline:2px solid var(--sinal);outline-offset:2px;border-radius:4px}
.mg-dom .mg-rows{margin-top:8px}
.mg-tile.locked::after{content:"";border-color:var(--sinal);background:var(--sinal) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='%2302253D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/12px no-repeat}