/**
 * innovacart - correções de responsividade
 * -----------------------------------------
 * Carregado DEPOIS de style.css, então sobrescreve o tema sem editá-lo.
 * Para desativar tudo, basta remover a linha <link> do common.tpl.
 *
 * O tema roda sobre Bootstrap 3.4.1 (templates/innova8/css/all.min.css).
 */


/* =========================================================================
 * 0. A CAUSA DA SOBREPOSIÇÃO SOBRE O RODAPÉ  *** principal ***
 *
 * Duas declarações se combinam para produzir o efeito:
 *
 *   innova8/css/all.css     ->  html, body { height: 100%; }
 *   innovacart/css/style.css ->  div#order-standard_cart { height: 100%; }
 *
 * "height: 100%" (altura EXATA, não mínima) prende o corpo da página à
 * altura da janela. Quando o conteúdo do carrinho fica mais alto que isso,
 * ele transborda da própria caixa em vez de empurrá-la: o rodapé é
 * posicionado como se o conteúdo terminasse ali, e os dois passam a ocupar
 * o mesmo espaço vertical.
 *
 * Por isso o problema só aparece na tela pequena: no desktop o conteúdo do
 * carrinho cabe na altura da janela; no celular tudo empilha, o conteúdo
 * fica muito mais alto que a janela e a sobreposição salta aos olhos.
 *
 * A troca de "height" por "min-height" preserva a intenção original
 * (página ocupar a tela inteira quando o conteúdo é curto) sem impor um
 * teto quando o conteúdo é longo.
 * ========================================================================= */

html,
body {
    height: auto !important;
    min-height: 100%;
}

div#order-standard_cart {
    height: auto !important;
    min-height: 0;
}

/* Garante que o rodapé sempre comece abaixo do conteúdo */
#footer,
.footer-section {
    clear: both;
}

/* =========================================================================
 * 1. reCAPTCHA com margem negativa
 *
 * O tema define #google-recaptcha com height:100px e margin-bottom:-50px.
 * A margem negativa puxa o conteúdo seguinte 50px para cima, por cima do
 * widget. Em telas estreitas, onde o reCAPTCHA já ocupa quase toda a
 * largura, a sobreposição fica evidente.
 * ========================================================================= */

#order-standard_cart .captcha-container #google-recaptcha {
    width: 100%;
    max-width: 304px;
    height: auto;
    min-height: 78px;
    margin-bottom: 15px;
    overflow: hidden;
}


/* =========================================================================
 * 2. Tabelas de preço com largura fixa
 *
 * .price-table tem width:262px e min-width:256px. Somando o padding do
 * container, isso estoura a viewport em aparelhos de 320-360px e cria
 * rolagem horizontal na página inteira.
 * ========================================================================= */

@media (max-width: 767px) {
    #order-standard_cart .price-table-container .price-table,
    #order-standard_cart .price-table-container .price-table.active {
        width: 100%;
        min-width: 0;
        max-width: 340px;
        margin-left: auto;
        margin-right: auto;
    }

    /* .active sobe 30px e encosta no elemento acima quando empilhado */
    #order-standard_cart .price-table-container .price-table.active {
        margin-top: 0;
    }
}


/* =========================================================================
 * 3. Tabela de preços de domínios sem rolagem
 *
 * .tld-pricing-table-wrap usa overflow:hidden. A tabela tem 4 colunas e,
 * no celular, o conteúdo que passa da largura é simplesmente cortado -
 * o cliente não consegue ver os valores de renovação.
 * ========================================================================= */

.tld-pricing-table-wrap {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
    .tld-pricing-table-wrap .table {
        min-width: 480px;
    }
}


/* =========================================================================
 * 4. Cartões de TLD em destaque com altura fixa
 *
 * .spotlight-tld tem height:112px + overflow:hidden. Quando o preço ou o
 * nome da extensão quebra em duas linhas no celular, o conteúdo some.
 * ========================================================================= */

.spotlight-tld {
    height: auto;
    min-height: 112px;
    overflow: visible;
}


/* =========================================================================
 * 5. Campos com largura fixa em px
 * ========================================================================= */

.form-control.domain-renewals-filter {
    width: 100% !important;
    max-width: 260px;
}

.domain-price .price,
.domain-price span.price {
    width: auto;
    min-width: 100px;
}


/* =========================================================================
 * 6. Linha de busca de domínio (sld . tld)
 *
 * As colunas da grade reservam espaço proporcional, o que deixa buracos
 * enormes entre os campos em telas largas e aperta demais no celular.
 * ========================================================================= */

#order-standard_cart .domains-row .form-control {
    min-width: 0;
}

@media (max-width: 480px) {
    #order-standard_cart .domain-input-group .col-sm-2 {
        margin-top: 10px;
    }

    #order-standard_cart .domain-input-group .btn-block {
        width: 100%;
    }
}


/* =========================================================================
 * 7. Botões e ações no celular
 *
 * Vários botões do carrinho ficam lado a lado em telas largas e, quando
 * empilham, ficam grudados ou com largura irregular.
 * ========================================================================= */

@media (max-width: 767px) {
    #order-standard_cart .btn + .btn {
        margin-top: 8px;
    }

    #order-standard_cart .pull-right,
    #order-standard_cart .pull-left {
        float: none !important;
    }

    #order-standard_cart .text-right {
        text-align: left !important;
    }
}


/* =========================================================================
 * 8. Barreiras gerais contra estouro horizontal
 *
 * Impede que qualquer elemento largo (imagem, tabela, palavra comprida
 * como um domínio) force rolagem lateral na página toda.
 * ========================================================================= */

@media (max-width: 767px) {
    #order-standard_cart {
        overflow-x: hidden;
    }

    #order-standard_cart img {
        max-width: 100%;
        height: auto;
    }

    #order-standard_cart .table-responsive,
    #order-standard_cart .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* domínios longos quebram em vez de esticar o layout */
    #order-standard_cart .domain-checker-result-headline,
    #order-standard_cart .domain-suggestion,
    #order-standard_cart .referral-commission-table td {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}


/* =========================================================================
 * 9. Bloco de nameservers empilhado (configuredomains)
 *
 * Blindagem do container criado no template: garante que nada herde
 * float ou posicionamento do tema.
 * ========================================================================= */

.ns-stack {
    width: 100%;
    max-width: 480px;
    display: block;
    float: none;
    position: static;
    overflow: hidden;   /* contém qualquer float herdado */
}

.ns-stack .ns-field {
    display: block;
    float: none;
    clear: both;
    width: 100%;
    position: static;
    margin: 0 0 15px 0;
}

.ns-stack .ns-field:last-child {
    margin-bottom: 0;
}

.ns-stack .ns-field label {
    display: block;
    float: none;
    width: auto;
    margin-bottom: 5px;
}

.ns-stack .ns-field .form-control {
    display: block;
    float: none;
    width: 100%;
    position: static;
}


/* =========================================================================
 * 10. Formulário de transferência de domínio (domaintransfer.tpl)
 *
 * O tema define:
 *
 *     .domain-checker-container .row {
 *         display: flex;
 *         align-items: center;
 *         justify-content: center;
 *     }
 *
 * Duas consequências, que são exatamente os dois defeitos relatados:
 *
 * a) Sem "flex-wrap", o padrão é "nowrap". As três colunas ficam presas
 *    numa única linha em qualquer largura de tela e, no celular, apenas
 *    encolhem - por isso o campo de domínio aparece espremido em vez de
 *    empilhar embaixo dos outros.
 *
 * b) "align-items: center" centraliza cada coluna verticalmente. As colunas
 *    dos campos são mais altas (label + input), a do botão só tem o botão.
 *    Resultado: o botão fica na altura do meio, desalinhado do input ao
 *    lado - o "grudado" que aparece inclusive no desktop.
 * ========================================================================= */

#order-standard_cart .domain-checker-container .row {
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
}

/* Alerta e captcha não são colunas: ocupam a linha inteira */
#order-standard_cart .domain-checker-container .row > #transferUnavailable,
#order-standard_cart .domain-checker-container .row > .captcha-container,
#order-standard_cart .domain-checker-container .row > .recaptcha-container {
    flex: 0 0 100%;
    width: 100%;
}

/* O label espaçador precisa ser block: como <label> e <button> são ambos
   inline-block por padrão, eles ficariam lado a lado na mesma linha e o
   label não empurraria o botão para baixo. Nas colunas dos campos isso não
   acontece porque .form-control já é display:block. */
.btn-align-spacer {
    display: block;
    width: 100%;
    margin-bottom: 5px;
}

/* No celular o botão ocupa a linha inteira e o espaçador não é necessário */
@media (max-width: 991px) {
    .btn-align-spacer {
        display: none;
    }

    #order-standard_cart .domain-checker-container .row > [class*="col-"] {
        flex: 0 0 100%;
        width: 100%;
    }

    #btnTransferDomain {
        width: 100%;
        margin-top: 5px;
    }
}

/* Respiro entre o campo do código de autorização e o botão no desktop */
@media (min-width: 992px) {
    #btnTransferDomain {
        margin-left: 0;
    }
}

.domain-transfer-wrap {
    padding: 30px 20px;
}

@media (max-width: 575px) {
    .domain-transfer-wrap {
        padding: 20px 15px;
    }
}


/* -------------------------------------------------------------------------
 * 10b. Largura do botão "Adicionar ao Carrinho"
 *
 * A coluna do botão é col-md-3 (25% fixos). O botão tem largura natural
 * (texto + 60px de padding) e, quando essa largura passa dos 25%, ele
 * simplesmente vaza para fora da coluna e ultrapassa a borda do card.
 *
 * Como a .row já é flex, a solução é deixar a coluna do botão do tamanho
 * exato do conteúdo e os dois campos dividirem o espaço que sobra.
 * ------------------------------------------------------------------------- */

@media (min-width: 992px) {
    #order-standard_cart .domain-transfer-wrap .row > .col-md-3 {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
    }

    #order-standard_cart .domain-transfer-wrap .row > .col-md-5,
    #order-standard_cart .domain-transfer-wrap .row > .col-md-4 {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }
}

#btnTransferDomain {
    white-space: nowrap;
    margin-top: 4px;   /* mesmo recuo dos inputs, para alinhar o topo */
}


/* =========================================================================
 * 11. Busca de domínio (domainregister.tpl)
 *
 * O campo e o botão estão num .input-group, mas o tema define altura só
 * para o campo:
 *
 *     #order-standard_cart .input-group-lg > .form-control { height: 46px; }
 *
 * O botão não recebe altura equivalente e, para piorar, o tema força
 * .search-btn { font-size: 15px !important }, anulando os 18px que o
 * Bootstrap aplicaria ao botão dentro de um input-group-lg. Resultado:
 * botão mais baixo que o campo, sem encostar nas bordas dele.
 * ========================================================================= */

#order-standard_cart .input-group-lg > .input-group-btn > .btn,
#order-standard_cart #btnCheckAvailability {
    height: 46px;
    padding: 10px 28px;
    line-height: 1.3333333;
    border-radius: 0 6px 6px 0;
}

/* O input-group é uma tabela: a célula do botão deve encostar no topo
   para as bordas coincidirem, em vez de centralizar o botão. */
#order-standard_cart .input-group-lg > .input-group-btn {
    vertical-align: top;
}

/* -------------------------------------------------------------------------
 * A regra do tema transforma TODA .row dentro de .domain-checker-container
 * em flex container. No formulário de transferência isso é útil (três
 * colunas lado a lado), mas aqui a linha tem uma coluna só, centralizada
 * por col-xs-offset-1 - o flex não acrescenta nada e ainda quebra.
 *
 * Como item flex, a coluna tem "min-width: auto" implícito: se a largura
 * mínima do conteúdo (campo + botão, que tem white-space: nowrap) passar
 * dos 83,33% da coluna, ela se recusa a encolher e vaza para fora do card.
 * É o que acontece nas larguras intermediárias, onde ainda não há espaço
 * sobrando mas o botão já não cabe na proporção reservada.
 *
 * Devolver esta linha ao comportamento padrão do Bootstrap resolve em
 * todas as larguras, sem depender de breakpoint.
 * ------------------------------------------------------------------------- */

#order-standard_cart .domain-checker-bg .row {
    display: block;
}

#order-standard_cart .domain-checker-bg .row > [class*="col-"] {
    min-width: 0;
    max-width: 100%;
}

/* -------------------------------------------------------------------------
 * O .input-group do Bootstrap 3 é uma TABELA (display: table). Uma tabela
 * nunca encolhe abaixo da soma das larguras mínimas das suas células, e
 * aqui as duas células têm mínimos grandes:
 *
 *   - o <input> tem tamanho intrínseco de ~20 caracteres, agravado pelo
 *     font-size de 18px que o tema aplica;
 *   - a célula do botão usa white-space: nowrap, então vale a largura
 *     inteira do botão.
 *
 * Quando essa soma passa da largura da coluna, a tabela simplesmente
 * transborda - "width: 100%" não impede, porque o mínimo intrínseco vence.
 *
 * Trocando a tabela por flexbox, o campo passa a aceitar "min-width: 0" e
 * pode encolher à vontade, cedendo espaço ao botão em qualquer largura.
 * ------------------------------------------------------------------------- */

#order-standard_cart .domain-checker-bg .input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
}

#order-standard_cart .domain-checker-bg .input-group > .form-control {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;      /* a chave: libera o campo para encolher */
    float: none;
}

#order-standard_cart .domain-checker-bg .input-group > .input-group-btn {
    display: block;
    flex: 0 0 auto;
    width: auto;
}

/* Em telas estreitas o campo aproveita a largura toda e o botão encolhe
   o padding, para o placeholder não ficar cortado. */
@media (max-width: 575px) {
    #order-standard_cart .domain-checker-bg .row > .col-xs-10.col-xs-offset-1 {
        width: 100%;
        margin-left: 0;
        padding-left: 15px;
        padding-right: 15px;
    }

    #order-standard_cart .input-group-lg > .input-group-btn > .btn,
    #order-standard_cart #btnCheckAvailability {
        padding: 10px 16px;
    }

    #order-standard_cart .input-group-lg > .form-control {
        font-size: 16px;   /* evita o zoom automatico do iOS ao focar */
    }
}

.domain-checker-bg {
    padding: 30px 0;
}

@media (max-width: 575px) {
    .domain-checker-bg {
        padding: 20px 0;
    }
}