/* ============================================
   HOSTZENIT - Branding personalizado
      Sobre templates/twenty-one (Bootstrap 4)
         ============================================ */
         
         /* Logo real do cabecalho (hostzenit.com) no lugar do texto */
         .navbar-brand {
           display: inline-block;
             width: 220px;
               height: 60px;
                 text-indent: -9999px;
                   overflow: hidden;
                     background-image: url('https://hostzenit.com/wp-content/uploads/2026/03/Hostzenit-Logo-s.png');
                       background-repeat: no-repeat;
                         background-position: left center;
                           background-size: contain;
                           }
                           
                           /* Botoes de acao principal: Pedir Ahora, Comprar, Continuar, etc. */
                           .btn-primary,
                           .btn-success,
                           .btn-order-now {
                             background-color: #7E499C !important;
                               border-color: #7E499C !important;
                               }
                               .btn-primary:hover,
                               .btn-primary:focus,
                               .btn-success:hover,
                               .btn-success:focus,
                               .btn-order-now:hover,
                               .btn-order-now:focus {
                                 background-color: #6B3E85 !important;
                                   border-color: #6B3E85 !important;
                                   }
                                   
                                   /* Botoes outline (Administracion: Ver productos, Buscar Dominios,
                                      Transfiera su dominio) - eram azul padrao Bootstrap */
                                      .btn-outline-primary {
                                        color: #7E499C !important;
                                          border-color: #7E499C !important;
                                          }
                                          .btn-outline-primary:hover,
                                          .btn-outline-primary:focus {
                                            background-color: #7E499C !important;
                                              border-color: #7E499C !important;
                                                color: #fff !important;
                                                }
                                                
                                                /* Categoria selecionada na barra lateral */
                                                .list-group-item.active {
                                                  background-color: #7E499C !important;
                                                    border-color: #7E499C !important;
                                                    }
                                                    
                                                    /* Rodape */
                                                    footer.footer {
                                                      background-color: #7E499C !important;
                                                      }
                                                      
                                                      /* Links de texto em todo o site - excluindo: rodape, .list-group-item
                                                         e .badge (a tag Popular tem cor de fundo + texto branco proprios,
                                                            nao pode herdar a cor de link) */
                                                            a:not(.btn):not(footer a):not(.footer a):not(.list-group-item):not(.badge) {
                                                              color: #7D5ABE !important;
                                                              }
                                                              a:not(.btn):not(footer a):not(.footer a):not(.list-group-item):not(.badge):hover {
                                                                color: #6A4DA2 !important;
                                                                }
                                                                
                                                                /* Link "Ver todos los precios" (btn-link) - nao entra na regra global
                                                                   de links porque tem classe .btn */
                                                                   .btn-link {
                                                                     color: #7E499C !important;
                                                                     }
                                                                     .btn-link:hover {
                                                                       color: #6B3E85 !important;
                                                                       }
                                                                       
                                                                       /* Anel de foco (outline verde padrao do navegador) nos botoes de
                                                                          categoria "Popular"/"Other" - trocado para branco ao clicar/focar */
                                                                          .badge:focus,
                                                                          .badge:active,
                                                                          a.badge:focus,
                                                                          a.badge:active {
                                                                            outline-color: #fff !important;
                                                                              box-shadow: 0 0 0 2px #fff !important;
                                                                              }
                                                                              
                                                                              /* Pagina Registrar Dominios - elementos fora da paleta de marca */
                                                                              .domain-checker-container {
                                                                                background-image: none !important;
                                                                                  background-color: #7D5ABE !important;
                                                                                  }
                                                                                  
                                                                                  .btn-warning {
                                                                                    background-color: #7D5ABE !important;
                                                                                      border-color: #7D5ABE !important;
                                                                                        color: #fff !important;
                                                                                        }
                                                                                        .btn-warning:hover,
                                                                                        .btn-warning:focus {
                                                                                          background-color: #6A4DA2 !important;
                                                                                            border-color: #6A4DA2 !important;
                                                                                            }
                                                                                            
                                                                                            .text-warning {
                                                                                              color: #7D5ABE !important;
                                                                                              }
                                                                                              
                                                                                              /* Subtitulo azul de "Transferencia de Dominios" - mesma cor do subtitulo
                                                                                                 de "Paquetes de Alojamiento" (.text-warning) por consistencia visual */
                                                                                                 .text-primary {
                                                                                                   color: #7D5ABE !important;
                                                                                                   }
                                                                                                   
                                                                                                   /* Tag Popular - fundo roxo + texto branco explicito */
                                                                                                   .badge-success {
                                                                                                     background-color: #7D5ABE !important;
                                                                                                       color: #fff !important;
                                                                                                       }
                                                                                                       
                                                                                                       /* Cabecalho da tabela de precos (Nombre de Dominio + Precio registro /
                                                                                                          Transferir / Renovar) - era azul do Bootstrap padrao */
                                                                                                          .tld-pricing-header .tld-column {
                                                                                                            border-bottom-color: #7E499C !important;
                                                                                                            }
                                                                                                            .tld-pricing-header .col-4:nth-child(1),
                                                                                                            .tld-pricing-header .col-4:nth-child(3) {
                                                                                                              border-bottom-color: #7E499C !important;
                                                                                                              }
                                                                                                              .tld-pricing-header .col-4:nth-child(2) {
                                                                                                                border-bottom-color: #7D5ABE !important;
                                                                                                                }
                                                                                                                
                                                                                                                /* Ilustracao do globo recolorida via mask num pseudo-elemento separado -
                                                                                                                   aplicar a mask no proprio .domain-checker-bg esconde o formulario de
                                                                                                                      busca que vive DENTRO dele, entao a mascara vai num ::before atras
                                                                                                                         do conteudo real */
                                                                                                                         .domain-checker-bg {
                                                                                                                           position: relative;
                                                                                                                             background-image: none !important;
                                                                                                                             }
                                                                                                                             .domain-checker-bg::before {
                                                                                                                               content: "";
                                                                                                                                 position: absolute;
                                                                                                                                   inset: 0;
                                                                                                                                     background-color: #7E499C;
                                                                                                                                       -webkit-mask-image: url('https://clientes.hostzenit.com/templates/orderforms/standard_cart/img/globe.png');
                                                                                                                                         mask-image: url('https://clientes.hostzenit.com/templates/orderforms/standard_cart/img/globe.png');
                                                                                                                                           -webkit-mask-repeat: no-repeat;
                                                                                                                                             mask-repeat: no-repeat;
                                                                                                                                               -webkit-mask-position: 110% -5px;
                                                                                                                                                 mask-position: 110% -5px;
                                                                                                                                                   pointer-events: none;
                                                                                                                                                     z-index: 0;
                                                                                                                                                     }
                                                                                                                                                     .domain-checker-bg > * {
                                                                                                                                                       position: relative;
                                                                                                                                                         z-index: 1;
                                                                                                                                                         }
                                                                                                                                                         
                                                                                                                                                         /* Area de Clientes (login, registro, recuperar contrasena) - TODOS os
                                                                                                                                                            botoes primary nestas paginas, inclusive dentro de modais injetados
                                                                                                                                                               fora do card. :has() no body cobre a pagina inteira */
                                                                                                                                                               body:has(.mw-540) .btn-primary,
                                                                                                                                                               body:has(#registration) .btn-primary {
                                                                                                                                                                 background-color: #7D5ABE !important;
                                                                                                                                                                   border-color: #7D5ABE !important;
                                                                                                                                                                   }
                                                                                                                                                                   body:has(.mw-540) .btn-primary:hover,
                                                                                                                                                                   body:has(.mw-540) .btn-primary:focus,
                                                                                                                                                                   body:has(#registration) .btn-primary:hover,
                                                                                                                                                                   body:has(#registration) .btn-primary:focus {
                                                                                                                                                                     background-color: #6A4DA2 !important;
                                                                                                                                                                       border-color: #6A4DA2 !important;
                                                                                                                                                                       }
                                                                                                                                                                       
                                                                                                                                                                       /* Ver Carrito - botao Comprar, cabecalho da tabela de itens e
                                                                                                                                                                          cabecalho do Sumario de Pedido */
                                                                                                                                                                          #checkout.btn-checkout {
                                                                                                                                                                            background-color: #7D5ABE !important;
                                                                                                                                                                              border-color: #7D5ABE !important;
                                                                                                                                                                              }
                                                                                                                                                                              #checkout.btn-checkout:hover,
                                                                                                                                                                              #checkout.btn-checkout:focus {
                                                                                                                                                                                background-color: #6A4DA2 !important;
                                                                                                                                                                                  border-color: #6A4DA2 !important;
                                                                                                                                                                                  }
                                                                                                                                                                                  .view-cart-items-header {
                                                                                                                                                                                    background-color: #7D5ABE !important;
                                                                                                                                                                                    }
                                                                                                                                                                                    .order-summary {
                                                                                                                                                                                      background-color: #7D5ABE !important;
                                                                                                                                                                                      }