
/* ============================================================
   UHOST — FUNIL DE ASSINATURA (orderform uhost_checkout) — 2026-10-01
   Visual do funil da POP Hosting (pophosting_premium) no design system UHOST:
   dark #1C1D21 · superficie #26272D/#33343F · dourado #FAC643 · Syne/Poppins.
   Classes uh-* sao criadas pelo js/uhost-checkout.js. REGRA: nunca display
   com !important em elemento que o WHMCS mostra/esconde (.w-hidden + .show()).
   ============================================================ */
:root{
  --uh-bg:#1C1D21; --uh-s1:#26272D; --uh-s2:#33343F; --uh-line:#3A3B44; --uh-line2:#4A4B56;
  --uh-gold:#FAC643; --uh-gold2:#FFD666; --uh-ongold:#111111; --uh-title:#FFFFFF;
  --uh-text:#D3D3D3; --uh-muted:#A3A4AD; --uh-ok:#86EFAC; --uh-r:16px; --uh-r2:12px;
}

/* ---------- tela limpa: so o logo em cima, rodape minimo ---------- */
body.uh-co #header .topbar,
body.uh-co #header .navbar .form-inline,
body.uh-co #header .navbar .toolbar,
body.uh-co #header .main-navbar-wrapper,
body.uh-co .master-breadcrumb,
body.uh-co #footer .nav,
body.uh-co #footer .list-inline,
body.uh-co #footer .btn[data-target="#modalChooseLanguage"],
body.uh-co #footer [data-toggle="modal"]{ display:none !important; }
body.uh-co #header .navbar{ padding-top:14px; padding-bottom:14px; }
body.uh-co #header .navbar > .container{ display:flex; align-items:center; justify-content:space-between; }
.uh-co-tagline{ display:flex; align-items:center; gap:10px; font-size:14px; font-weight:500; color:var(--uh-text); }
.uh-co-dot{ width:8px; height:8px; border-radius:50%; background:var(--uh-gold); box-shadow:0 0 0 0 rgba(250,198,67,.6); animation:uhPulse 2s infinite; }
@keyframes uhPulse{ 0%{box-shadow:0 0 0 0 rgba(250,198,67,.55)} 70%{box-shadow:0 0 0 10px rgba(250,198,67,0)} 100%{box-shadow:0 0 0 0 rgba(250,198,67,0)} }
body.uh-co #footer{ text-align:center; }
body.uh-co #footer .container{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.uh-co-help{ margin:0 0 8px; color:var(--uh-text); font-size:14px; }
.uh-co-help i{ color:#25D366; margin-right:4px; }
.uh-co-help a{ color:var(--uh-gold); font-weight:600; }
.uh-co-ssl{ margin:4px 0 0; font-size:12.5px; color:var(--uh-muted); }
.uh-co-ssl i{ margin-right:4px; }

/* sem a coluna de categorias: o funil ocupa a largura toda */
html body.uh-co #order-standard_cart .cart-sidebar,
html body.uh-co #order-standard_cart .sidebar-collapsed{ display:none !important; }
html body.uh-co #order-standard_cart .cart-body{ width:100% !important; max-width:100% !important; float:none !important; flex:0 0 100% !important; }
html body.uh-co #order-standard_cart{ max-width:1080px; margin:0 auto; }
/* a .row do carrinho tem margem -15px e a .cart-body (sem a lateral) nao devolve o padding:
   no celular o funil encostava na borda da tela (x=0) em vez do respiro de 15px */
html body.uh-co #order-standard_cart > .row{ margin-left:0; margin-right:0; }
html body.uh-co #order-standard_cart > .row > .cart-body{ padding-left:0; padding-right:0; }

/* titulo centralizado + subtitulo */
html body.uh-co #order-standard_cart .header-lined{ text-align:center; border:0 !important; margin:6px 0 22px; padding:0; }
html body.uh-co #order-standard_cart .header-lined h1{ font-size:30px !important; margin:0; }
.uh-co-sub{ margin:8px 0 0; color:var(--uh-muted); font-size:15px; }

/* ---------- etapas + confianca ---------- */
.uh-steps-wrap{ margin:4px auto 26px; max-width:760px; }
/* --uh-c = centro da 1a/ultima bolinha (padding 24 + metade do li de 96px): a linha vai de centro a centro */
.uh-steps-track{ --uh-c:72px; position:relative; padding:0 24px; max-width:620px; margin:0 auto; }
.uh-steps-track::before{ content:""; position:absolute; left:var(--uh-c); right:var(--uh-c); top:23px; height:3px; border-radius:3px; background:var(--uh-line); }
.uh-steps-fill{ position:absolute; left:var(--uh-c); top:23px; height:3px; width:0; border-radius:3px; background:var(--uh-gold); transition:width .85s cubic-bezier(.2,.8,.2,1); }
.uh-steps ol{ list-style:none; margin:0; padding:0; display:flex; justify-content:space-between; position:relative; }
.uh-step{ display:flex; flex-direction:column; align-items:center; gap:8px; width:96px; }
.uh-step-dot{ width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--uh-s1); border:2px solid var(--uh-line2); color:var(--uh-muted); font-size:17px; position:relative; }
.uh-step-check{ display:none; }
.uh-step-label{ font-size:13px; font-weight:600; color:var(--uh-muted); letter-spacing:.02em; }
.uh-step.is-active .uh-step-dot{ border-color:var(--uh-gold); color:var(--uh-gold); box-shadow:0 0 0 6px rgba(250,198,67,.14); }
.uh-step.is-active .uh-step-label{ color:var(--uh-gold); }
.uh-step.is-done .uh-step-dot{ background:var(--uh-gold); border-color:var(--uh-gold); color:var(--uh-ongold); }
.uh-step.is-done .uh-step-dot > i:first-child{ display:none; }
.uh-step.is-done .uh-step-check{ display:inline-block; }
.uh-step.is-done .uh-step-label{ color:var(--uh-text); }
.uh-trust{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px; margin-top:18px; font-size:13px; font-weight:500; color:var(--uh-text); }
.uh-trust i{ color:var(--uh-gold); margin-right:6px; }

/* ---------- 1. dominio: pergunta em 2 cards ---------- */
.uh-domain-wizard .domain-selection-options{ display:none; }
.uh-domain-wizard.uh-domain-step2 .domain-selection-options{ display:block; }
.uh-domain-wizard.uh-domain-step2 .domain-selection-options > .option:not(.uh-chosen){ display:none; }
.uh-domain-wizard.uh-domain-step2 .uh-domain-ask,
.uh-domain-wizard.uh-domain-step2 .uh-domain-alt{ display:none; }
.uh-domain-ask{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; margin:6px 0 18px; }
.uh-da-card{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
  padding:38px 28px; border-radius:var(--uh-r); background:var(--uh-s1); border:1px solid var(--uh-line); transition:transform .18s, border-color .18s, box-shadow .18s; }
.uh-da-card:hover, .uh-da-card:focus-visible{ transform:translateY(-3px); border-color:var(--uh-gold); box-shadow:0 14px 34px rgba(0,0,0,.35); outline:none; }
.uh-da-icon{ position:relative; font-size:44px; color:var(--uh-gold); line-height:1; margin-bottom:4px; }
.uh-da-badge{ position:absolute; right:-30px; bottom:-6px; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  background:var(--uh-gold); color:var(--uh-ongold); border-radius:6px; padding:3px 7px; font-family:Poppins,sans-serif; }
.uh-da-card h4{ margin:0; font-family:'Syne',sans-serif; font-size:20px; font-weight:700; color:var(--uh-title); }
.uh-da-card p{ margin:0; font-size:14px; color:var(--uh-muted); }
.uh-domain-alt{ display:flex; flex-direction:column; align-items:center; gap:6px; margin-bottom:10px; }
.uh-domain-alt a{ color:var(--uh-gold); font-size:14px; font-weight:600; }
.uh-domain-back{ display:none; margin:0 0 10px; }
.uh-domain-wizard.uh-domain-step2 .uh-domain-back{ display:block; }
.uh-domain-back a{ color:var(--uh-muted); font-size:13.5px; }
.uh-domain-back a:hover{ color:var(--uh-gold); }
.uh-domain-step-title{ display:none; margin:0 0 14px; font-family:'Syne',sans-serif; font-size:20px; color:var(--uh-title); }
.uh-domain-wizard.uh-domain-step2 .uh-domain-step-title{ display:block; }
.uh-domain-wizard.uh-domain-step2 .option.uh-chosen{ background:var(--uh-s1); border:1px solid var(--uh-gold); border-radius:var(--uh-r); padding:22px; }
.uh-domain-wizard.uh-domain-step2 .option.uh-chosen > label{ display:none; }

/* ---------- 2. plano: cards de ciclo ---------- */
html body.uh-co .uh-step-cycle .secondary-cart-sidebar{ display:none !important; }
html body.uh-co .uh-step-cycle .secondary-cart-body{ width:100% !important; max-width:100% !important; float:none !important; flex:0 0 100% !important; padding-left:0; padding-right:0; }
/* sem a coluna lateral, a .row (margem -15px) + coluna 100% vazavam 15px no celular (scroll lateral) */
html body.uh-co .uh-step-cycle #frmConfigureProduct > .row{ margin-left:0; margin-right:0; }
.uh-step-cycle .secondary-cart-body > p:first-child,
.uh-step-cycle .product-info,
.uh-step-cycle .secondary-cart-body > .alert-warning.info-text-sm,
.uh-cycle-select{ display:none; }
.uh-cycles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin:26px 0 24px; }
.uh-cycles.is-single{ grid-template-columns:minmax(220px,340px); justify-content:center; }
.uh-cycle{ all:unset; box-sizing:border-box; cursor:pointer; position:relative; display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:34px 18px 22px; border-radius:var(--uh-r); background:var(--uh-s1); border:1px solid var(--uh-line);
  transition:transform .18s, border-color .18s, box-shadow .18s, background-color .18s; }
.uh-cycle:hover, .uh-cycle:focus-visible{ transform:translateY(-3px); border-color:var(--uh-line2); box-shadow:0 14px 34px rgba(0,0,0,.35); outline:none; }
.uh-cycle.is-selected{ border-color:var(--uh-gold); background:linear-gradient(180deg, rgba(250,198,67,.10), rgba(250,198,67,.02)), var(--uh-s1); box-shadow:0 0 0 1px var(--uh-gold), 0 16px 38px rgba(0,0,0,.35); }
.uh-cycle-radio{ width:22px; height:22px; border-radius:50%; border:2px solid var(--uh-line2); margin-bottom:12px; position:relative; }
.uh-cycle.is-selected .uh-cycle-radio{ border-color:var(--uh-gold); background:var(--uh-gold); box-shadow:inset 0 0 0 4px var(--uh-s1); }
.uh-cycle-title{ font-family:'Syne',sans-serif; font-weight:700; font-size:17px; color:var(--uh-title); text-transform:uppercase; letter-spacing:.04em; }
.uh-cycle-save{ margin-top:8px; display:inline-block; padding:3px 10px; border-radius:48px; font-size:12px; font-weight:700; background:rgba(134,239,172,.14); color:var(--uh-ok); border:1px solid rgba(134,239,172,.35); }
.uh-cycle-price{ margin-top:12px; font-family:'Syne',sans-serif; font-weight:700; font-size:26px; line-height:1.15; color:var(--uh-gold); white-space:nowrap; }
.uh-cycle-each{ margin-top:4px; font-size:13px; color:var(--uh-text); }
.uh-cycle-eq{ margin-top:14px; padding-top:12px; border-top:1px dashed var(--uh-line2); width:100%; font-size:12.5px; color:var(--uh-muted); }
.uh-cycle-ribbon{ position:absolute; top:-11px; left:50%; transform:translateX(-50%); white-space:nowrap; font-size:11px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; background:var(--uh-gold); color:var(--uh-ongold); border-radius:48px; padding:4px 12px; }
.uh-cycle-continue{ display:flex; justify-content:center; margin:6px 0 10px; }
.uh-cycle-continue .text-center{ width:100%; max-width:420px; }
html body.uh-co #order-standard_cart .uh-cycle-continue #btnCompleteProductConfig{ width:100%; border-radius:48px; padding:15px 28px; font-size:16px; font-weight:600;
  background:var(--uh-gold); border-color:var(--uh-gold); color:var(--uh-ongold); box-shadow:0 10px 28px rgba(250,198,67,.25); }
html body.uh-co #order-standard_cart .uh-cycle-continue #btnCompleteProductConfig:hover{ background:var(--uh-gold2); border-color:var(--uh-gold2); }

/* ---------- 3. finalizar: 2 colunas ---------- */
.uh-co-grid{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:22px; align-items:start; }
.uh-co-left, .uh-co-right{ display:flex; flex-direction:column; gap:18px; min-width:0; }
.uh-co-right{ position:sticky; top:16px; }
html body.uh-co #order-standard_cart .uh-co-card{ background:var(--uh-s1); border:1px solid var(--uh-line); border-radius:var(--uh-r); padding:22px 22px 8px; }
html body.uh-co #order-standard_cart .uh-co-card .sub-heading{ height:auto; border:0 !important; text-align:left; margin:0 0 14px; }
html body.uh-co #order-standard_cart .uh-co-card .sub-heading::before{ display:none; }
html body.uh-co #order-standard_cart .uh-co-card .sub-heading span{ position:static; top:auto; padding:0; background:transparent !important; font-family:'Syne',sans-serif; font-size:17px; font-weight:700; color:var(--uh-title) !important; }
html body.uh-co #order-standard_cart .uh-co-card .sub-heading span small,
html body.uh-co #order-standard_cart .uh-co-card .sub-heading span i{ display:block; margin-top:4px; font-family:Poppins,sans-serif; font-size:12px; font-weight:400; font-style:normal; color:var(--uh-muted) !important; }
html body.uh-co #order-standard_cart .uh-co-card .sub-heading:has(br){ margin-bottom:14px; }
.uh-co-card-title{ margin:0 0 12px; font-family:'Syne',sans-serif; font-size:17px; font-weight:700; color:var(--uh-title); }
.uh-co-order{ padding-bottom:18px !important; }
.uh-co-item{ padding:12px 14px; border-radius:var(--uh-r2); background:var(--uh-bg); border:1px solid var(--uh-line); margin-bottom:8px; }
.uh-co-item-name{ font-weight:600; color:var(--uh-title); font-size:14.5px; }
.uh-co-item-meta{ margin-top:3px; font-size:12.5px; color:var(--uh-gold); }
.uh-co-edit{ display:inline-block; margin-top:2px; font-size:12.5px; color:var(--uh-muted) !important; }
.uh-co-edit:hover{ color:var(--uh-gold) !important; }
.uh-co-coupon{ margin-top:10px; }
.uh-co-coupon-toggle{ font-size:13.5px; font-weight:600; color:var(--uh-gold) !important; }
.uh-co-coupon-box{ display:none; gap:8px; margin-top:10px; }
.uh-co-coupon.is-open .uh-co-coupon-box{ display:flex; }
.uh-co-coupon-box .form-control{ flex:1; }
.uh-co-coupon-box .btn{ border-radius:48px; background:var(--uh-s2); border:1px solid var(--uh-line2); color:var(--uh-title); padding:8px 18px; white-space:nowrap; }
.uh-co-coupon-box .btn:hover{ border-color:var(--uh-gold); color:var(--uh-gold); }
/* pagamento hoje */
html body.uh-co #order-standard_cart #totalDueToday{ display:flex; flex-direction:column; align-items:center; gap:2px; margin:0 0 16px; padding:18px 16px;
  border-radius:var(--uh-r2); background:var(--uh-bg) !important; border:1px solid rgba(250,198,67,.35) !important; }
.uh-co-total-label{ font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--uh-muted); }
html body.uh-co #order-standard_cart #totalDueToday #totalCartPrice{ font-family:'Syne',sans-serif; font-size:30px; font-weight:700; color:var(--uh-gold) !important; }
/* formas de pagamento como linhas selecionaveis */
html body.uh-co #order-standard_cart #paymentGatewaysContainer > p,
html body.uh-co #order-standard_cart #paymentGatewaysContainer .text-center > p{ font-size:13px; color:var(--uh-muted); text-align:left; margin-bottom:8px; }
html body.uh-co #order-standard_cart #paymentGatewaysContainer .text-center{ text-align:left !important; }
html body.uh-co #order-standard_cart #paymentGatewaysContainer label.radio-inline{ display:flex; align-items:center; gap:12px; width:100%; margin:0 0 8px; padding:14px 16px;
  border-radius:var(--uh-r2); background:var(--uh-bg); border:1px solid var(--uh-line); color:var(--uh-title); font-weight:600; cursor:pointer; transition:border-color .15s, background-color .15s; }
html body.uh-co #order-standard_cart #paymentGatewaysContainer label.radio-inline:hover{ border-color:var(--uh-line2); }
html body.uh-co #order-standard_cart #paymentGatewaysContainer label.radio-inline:has(input:checked),
html body.uh-co #order-standard_cart #paymentGatewaysContainer label.radio-inline:has(.checked){ border-color:var(--uh-gold); background:rgba(250,198,67,.07); }
/* iCheck (sprite azul do tema) re-tematizado: bolinha dourada */
html body.uh-co #order-standard_cart .iradio_square-blue{ width:20px; height:20px; flex:0 0 20px; border-radius:50%; border:2px solid var(--uh-line2); background:transparent none !important; }
html body.uh-co #order-standard_cart .iradio_square-blue.checked{ border-color:var(--uh-gold); background:var(--uh-gold) none !important; box-shadow:inset 0 0 0 3px var(--uh-bg); }
html body.uh-co #order-standard_cart .icheckbox_square-blue{ width:20px; height:20px; border-radius:6px; border:2px solid var(--uh-line2); background:transparent none !important; }
html body.uh-co #order-standard_cart .icheckbox_square-blue.checked{ border-color:var(--uh-gold); background:var(--uh-gold) none !important; }
html body.uh-co #order-standard_cart .icheckbox_square-blue.checked::after{ content:"\f00c"; font-family:"Font Awesome 5 Pro","Font Awesome 5 Free"; font-weight:900; font-size:11px; color:var(--uh-ongold); display:flex; align-items:center; justify-content:center; height:100%; }
/* final: termos + Completar pedido */
html body.uh-co #order-standard_cart .uh-co-final{ background:var(--uh-s1); border:1px solid var(--uh-line); border-radius:var(--uh-r); padding:20px; text-align:left !important; }
html body.uh-co #order-standard_cart .uh-co-final p.checkbox, html body.uh-co #order-standard_cart .uh-co-final label{ color:var(--uh-text); }
html body.uh-co #order-standard_cart #btnCompleteOrder{ width:100%; margin-top:10px; border-radius:48px; padding:16px 24px; font-size:16.5px; font-weight:600;
  background:var(--uh-gold); border-color:var(--uh-gold); color:var(--uh-ongold); box-shadow:0 10px 28px rgba(250,198,67,.25); }
html body.uh-co #order-standard_cart #btnCompleteOrder:hover{ background:var(--uh-gold2); border-color:var(--uh-gold2); }
.uh-co-safe{ margin:12px 0 0; font-size:12.5px; color:var(--uh-muted); text-align:center; }
.uh-co-safe i{ margin-right:4px; }
.uh-co-safe .fa-whatsapp{ color:#25D366; }
.uh-co-safe a{ color:var(--uh-gold); font-weight:600; }
html body.uh-co #order-standard_cart .checkout-security-msg{ margin-top:18px; background:transparent !important; border:0 !important; color:var(--uh-muted) !important; font-size:12.5px; text-align:center; }
html body.uh-co #order-standard_cart .already-registered{ margin-bottom:14px; }
/* cidade / estado / CEP: o col-sm-4/5/3 de fabrica deixava o CEP com ~110px na coluna estreita (placeholder cortado) */
html body.uh-co #frmCheckout .uh-addr-row{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,.85fr); column-gap:30px; margin-left:0; margin-right:0; }
html body.uh-co #frmCheckout .uh-addr-row > [class*="col-"]{ max-width:none; width:auto; flex:none; padding-left:0; padding-right:0; }
html body.uh-co #frmCheckout .uh-addr-row > .uh-addr-full{ grid-column:1 / -1; }

@media (max-width: 900px){
  .uh-co-grid{ grid-template-columns:minmax(0,1fr); }
  .uh-co-right{ position:static; }
}
@media (max-width: 560px){
  .uh-co-tagline{ display:none; }
  .uh-steps-track{ --uh-c:62px; }
  .uh-step{ width:76px; }
  .uh-step-dot{ width:42px; height:42px; font-size:15px; }
  html body.uh-co #frmCheckout .uh-addr-row{ grid-template-columns:minmax(0,1fr); }
  .uh-steps-track::before, .uh-steps-fill{ top:20px; }
  html body.uh-co #order-standard_cart .header-lined h1{ font-size:24px !important; }
  .uh-da-card{ padding:28px 20px; }
  .uh-cycles{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .uh-cycle{ padding:30px 10px 18px; }
  .uh-cycle-price{ font-size:21px; }
}
@media (prefers-reduced-motion: reduce){
  .uh-steps-fill, .uh-da-card, .uh-cycle{ transition:none; }
  .uh-co-dot{ animation:none; }
}
