/* ============================================================
   JOINVIX VPS
   Layout final alinhado
   ============================================================ */

.jv-box {
    width: 100%;
    box-sizing: border-box;
    color: #334155;
}

.jv-box *,
.jv-box *::before,
.jv-box *::after {
    box-sizing: border-box;
}

.jv-box br {
    display: none;
}


/* ============================================================
   SPECS
   ============================================================ */

.jv-specs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;

    margin: 16px 0 24px;
}

.jv-spec {
    position: relative;
    overflow: hidden;

    height: 138px;

    padding: 15px 8px 12px;

    border-radius: 14px;

    text-align: center;
    color: #fff;

    background:
        linear-gradient(
            145deg,
            #2799ed 0%,
            #0875c8 48%,
            #07588e 100%
        );

    box-shadow:
        0 8px 16px rgba(7, 78, 128, .18);
}


/* onda */
.jv-spec::after {
    content: "";

    position: absolute;
    z-index: 0;

    left: -15%;
    right: -15%;
    bottom: -57px;

    height: 85px;

    border-radius: 50%;

    background: rgba(0, 62, 107, .22);
}


.jv-spec i {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    margin: 0 auto 8px;

    border-radius: 50%;

    font-size: 17px;

    color: #fff;

    background:
        linear-gradient(
            145deg,
            rgba(113,205,255,.58),
            rgba(17,115,196,.42)
        );

    border: 1px solid rgba(255,255,255,.2);
}


.jv-value {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: baseline;
    justify-content: center;

    height: 35px;

    line-height: 1;
}


.jv-num {
    font-size: 34px;
    line-height: 1;

    font-weight: 700;

    letter-spacing: -1.3px;

    color: #fff;
}


.jv-unit {
    margin-left: 2px;

    font-size: 14px;
    line-height: 1;

    font-weight: 700;

    color: #fff;
}


.jv-lbl {
    position: relative;
    z-index: 1;

    display: block;

    margin-top: 8px;

    font-size: 9.5px;
    line-height: 1;

    font-weight: 600;

    letter-spacing: 2.7px;

    color: #d6edfb;
}


/* ============================================================
   RECURSOS
   ============================================================ */

.jv-feats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    margin: 0;
    padding: 0;

    list-style: none;
}


/*
   Agora cada linha contém SOMENTE:
   [ícone] [span com a frase inteira]

   portanto flex é seguro.
*/

.jv-feats li {
    display: flex;
    align-items: center;

    gap: 12px;

    min-width: 0;
    min-height: 64px;

    padding: 8px 10px;

    border-bottom: 1px solid #e3ebf2;

    font-size: 13px;
    line-height: 1.42;

    color: #334155;
}


/* divisória vertical */
.jv-feats li:nth-child(odd) {
    border-right: 1px solid #e3ebf2;
}


/* última linha */
.jv-feats li:nth-last-child(-n + 2) {
    border-bottom: 0;
}


/* ícones */
.jv-feats li > i {
    flex: 0 0 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    margin: 0;

    border-radius: 50%;

    font-size: 15px;

    color: #0879cf;

    background:
        linear-gradient(
            145deg,
            #eff8ff,
            #dceefe
        );
}


/* TEXTO INTEIRO */
.jv-feats li > span {
    display: block;

    flex: 1 1 auto;

    min-width: 0;

    margin: 0;
    padding: 0;

    text-align: left;

    word-break: normal;
    overflow-wrap: normal;
}


/* palavras importantes nunca quebram internamente */
.jv-feats b {
    white-space: nowrap;

    font-weight: 700;

    color: #29394c;
}


/* ============================================================
   CTA
   ============================================================ */

.jv-cta {
    position: relative;

    display: flex;
    align-items: center;

    gap: 14px;

    min-height: 70px;

    margin-top: 22px;

    padding:
        12px
        48px
        12px
        14px;

    border: 1px solid #b5e5bf;

    border-radius: 14px;

    background:
        linear-gradient(
            90deg,
            #f1fff4 0%,
            #ebfbef 100%
        );

    color: #347542;

    font-size: 13.5px;
    line-height: 1.4;

    text-align: left;
}


/* círculo verde */
.jv-cta > i {
    flex: 0 0 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    margin: 0;

    border-radius: 50%;

    font-size: 18px;

    color: #208b3b;

    background:
        linear-gradient(
            145deg,
            #d7f6dc,
            #bcecc6
        );
}


/* frase completa da CTA */
.jv-cta > span {
    display: block;

    flex: 1 1 auto;

    min-width: 0;

    word-break: normal;
    overflow-wrap: normal;
}


.jv-cta b {
    white-space: nowrap;

    font-weight: 700;

    color: #28763a;
}


.jv-cta-sep {
    display: inline;

    margin: 0 4px;

    color: #64a771;
}


/* seta direita */
.jv-cta::after {
    content: "\203A";

    position: absolute;

    right: 17px;
    top: 50%;

    transform: translateY(-52%);

    font-size: 25px;
    line-height: 1;

    color: #61ad71;
}


/* ============================================================
   RESPONSIVO
   ============================================================ */

@media (max-width: 700px) {

    .jv-specs {
        gap: 8px;
    }

    .jv-feats li {
        gap: 9px;

        padding-left: 9px;
        padding-right: 9px;

        font-size: 12.5px;
    }

    .jv-feats li > i {
        flex-basis: 38px;

        width: 38px;
        height: 38px;

        font-size: 13px;
    }
}


@media (max-width: 480px) {

    .jv-feats {
        grid-template-columns: 1fr;
    }

    .jv-feats li {
        min-height: 54px;

        border-right: 0 !important;
        border-bottom: 1px solid #e3ebf2 !important;
    }

    .jv-feats li:last-child {
        border-bottom: 0 !important;
    }

    .jv-cta {
        padding-right: 40px;
    }
}

/* Cards compactos da listagem de planos. */
.product[onclick] .jv-specs { gap: 7px; margin: 14px 0 12px; }
.product[onclick] .jv-spec { height: 116px; padding: 12px 4px 10px; }
.product[onclick] .jv-spec i { width: 34px; height: 34px; font-size: 15px; }
.product[onclick] .jv-value { height: 27px; }
.product[onclick] .jv-num { font-size: 25px; }
.product[onclick] .jv-unit { font-size: 13px; }
.product[onclick] .jv-lbl { letter-spacing: 2px; }
.product[onclick] .jv-feats { grid-template-columns: 1fr; }
.product[onclick] .jv-feats li { min-height: 44px; padding: 7px 0; border: 0 !important; }
.product[onclick] .jv-feats li > i { flex-basis: 30px; width: 30px; height: 30px; font-size: 13px; }
.product[onclick] .jv-cta { display: none; }

/* Microanimacoes decorativas, sem alterar o fluxo do layout. */
.jv-spec::after { pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .jv-spec { transition: transform 220ms ease, box-shadow 220ms ease; }
  .jv-spec i, .jv-spec::after, .jv-feats li > i {
    transition: transform 240ms ease;
  }
  .jv-feats li { transition: background-color 220ms ease; }
  .jv-cta { transition: border-color 220ms ease; }
  .jv-cta::after { transition: transform 220ms ease; }
  .jv-cta > i {
    position: relative;
    font-size: 23px;
    animation: jv-charge 2.8s ease-in-out infinite;
  }
  .jv-cta > i::before {
    display: block;
    transform-origin: center;
    animation: jv-bolt 2.8s ease-in-out infinite;
  }
  .jv-cta > i::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid rgba(32, 160, 65, .65);
    border-radius: 50%;
    pointer-events: none;
    animation: jv-energy 2.8s ease-out infinite;
  }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .jv-spec:hover { transform: translateY(-3px); box-shadow: 0 12px 22px rgba(7, 78, 128, .22); }
  .jv-spec:hover i { transform: translateY(-2px) scale(1.05); }
  .jv-spec:hover::after { transform: translateY(-4px); }
  .jv-feats li:hover { background-color: rgba(8, 121, 207, .035); }
  .jv-feats li:hover > i { transform: scale(1.07); }
  .jv-cta:hover { border-color: #83ce94; }
  .jv-cta:hover::after { transform: translate(3px, -52%); }
}
/* Carga, descarga e repouso: o raio ganha destaque sem flashes rapidos. */
@keyframes jv-bolt {
  0%, 65%, 100% {
    transform: translate(0, 0) rotate(0) scale(1);
    filter: drop-shadow(0 0 0 transparent);
  }
  18% {
    transform: translate(-1px, -4px) rotate(-16deg) scale(1.3);
    filter: drop-shadow(0 0 5px rgba(30, 185, 66, .65));
  }
  30% {
    transform: translate(2px, 1px) rotate(12deg) scale(1.15);
    filter: drop-shadow(0 0 8px rgba(30, 185, 66, .8));
  }
  42% {
    transform: translate(-1px, -3px) rotate(-8deg) scale(1.25);
    filter: drop-shadow(0 0 5px rgba(30, 185, 66, .65));
  }
}
@keyframes jv-charge {
  0%, 65%, 100% { box-shadow: 0 0 0 0 rgba(43, 180, 76, 0), inset 0 0 0 rgba(255, 255, 255, 0); }
  25% { box-shadow: 0 0 18px 4px rgba(43, 180, 76, .24), inset 0 0 12px rgba(255, 255, 255, .65); }
  45% { box-shadow: 0 0 10px 2px rgba(43, 180, 76, .12), inset 0 0 6px rgba(255, 255, 255, .3); }
}
@keyframes jv-energy {
  0%, 15% { transform: scale(.9); opacity: 0; }
  23% { transform: scale(1.02); opacity: .85; }
  62%, 100% { transform: scale(1.5); opacity: 0; }
}


/* Apresentacao do produto, acima das especificacoes. */
.jv-intro { margin: 6px 0 20px; text-align: left; }
.jv-slogan {
    margin: 0 0 7px;
    color: #475569;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: normal;
}
.jv-summary {
    margin: 0;
    color: #526174;
    font-size: 13px;
    line-height: 1.65;
}
.product[onclick] .jv-intro { margin: 10px 0 14px; }
.product[onclick] .jv-slogan { font-size: 14px; }
.product[onclick] .jv-summary { font-size: 12px; }
@media (max-width: 480px) {
    .jv-slogan { font-size: 15px; }
}


/* Nome do produto renderizado pelo WHMCS antes da descricao. */
:is(#order-standard_cart .product-info > .product-title, .jv-preview-title):has(~ .jv-box) {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 0 10px;
    color: #263442;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.4px;
    text-wrap: balance;
}
/* SVG decorativo independente da versao do Font Awesome do tema. */
:is(#order-standard_cart .product-info > .product-title, .jv-preview-title):has(~ .jv-box)::before,
#order-modern .product:has(.jv-box) > .name::before {
    content: "";
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background-color: #e3f2ff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230879cf' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='7' rx='2'/%3E%3Crect x='3' y='14' width='18' height='7' rx='2'/%3E%3Cpath d='M7 6.5h.01M7 17.5h.01M12 6.5h5M12 17.5h5'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 23px;
}
.product[onclick] :is(#order-standard_cart .product-info > .product-title, .jv-preview-title):has(~ .jv-box) {
    font-size: 23px;
}
@media (max-width: 480px) {
    :is(#order-standard_cart .product-info > .product-title, .jv-preview-title):has(~ .jv-box) {
        font-size: 24px;
    }
}


/* Cabecalho dos cards VPS no template Modern, preservando o preco. */
#order-modern .product:has(.jv-box) > .name {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    min-width: 0;
    margin: 0 0 12px;
    color: #263442;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.4px;
    overflow-wrap: anywhere;
}
/* O valor e um span.pricing dentro do div.pricing do WHMCS. */
#order-modern .product:has(.jv-box) > .pricing {
    float: right;
    box-sizing: border-box;
    width: auto;
    min-width: 112px;
    max-width: 48%;
    margin: 0 0 14px 16px;
    padding: 8px 10px;
    border: 1px solid #deecf6;
    border-radius: 12px;
    background: #f3f9fe;
    color: #64748b;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
    text-align: center;
}
#order-modern .product:has(.jv-box) > .pricing > span.pricing {
    float: none;
    display: inline-block;
    width: auto;
    margin: 2px 0;
    padding: 0;
    color: #07588e;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.6px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    max-width: 100%;
}
#order-modern .product:has(.jv-box) > .description {
    margin-left: 0;
    margin-right: 0;
}
#order-modern .product .jv-intro {
    margin: 4px 0 18px;
}
#order-modern .product .jv-slogan {
    margin-bottom: 7px;
    color: #475569;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
}
#order-modern .product .jv-summary {
    font-size: 13px;
    line-height: 1.65;
}
@media (max-width: 480px) {
    #order-modern .product:has(.jv-box) > .name {
        font-size: 22px;
        gap: 8px;
    }
    #order-modern .product:has(.jv-box) > .name::before {
        flex-basis: 30px;
        width: 30px;
        height: 30px;
        background-size: 20px;
    }
}

@media (max-width: 480px) {
    #order-modern .product:has(.jv-box) > .pricing {
        min-width: 108px;
        margin-left: 10px;
        padding: 8px 10px;
        font-size: 11px;
    }
    #order-modern .product:has(.jv-box) > .pricing > span.pricing {
        font-size: 23px;
    }
}

/* Respiro acima do titulo na pagina de configuracao do VPS. */
#order-standard_cart .product-info:has(.jv-box) {
    padding-top: 20px;
}

/* No card amplo, o preco nao empurra o slogan para baixo. */
@media (min-width: 481px) {
    #order-modern .product:has(.jv-box) {
        position: relative;
    }
    #order-modern .product:has(.jv-box) > .pricing {
        position: absolute;
        top: 15px;
        right: 15px;
        float: none;
        margin: 0;
        max-width: 140px;
    }
    #order-modern .product:has(.jv-box) > .name {
        margin-right: 150px;
        margin-bottom: 8px;
    }
    #order-modern .product:has(.jv-box) > .description {
        margin-top: 0;
    }
    #order-modern .product .jv-intro {
        margin-top: 0;
    }
    #order-modern .product .jv-slogan {
        box-sizing: border-box;
        padding-right: 150px;
        min-height: 50px;
        margin-bottom: 8px;
    }
}


/* Recursos: icones vetoriais e colunas conforme a largura do bloco. */
.jv-box { container-type: inline-size; }
.jv-feats { grid-template-columns: 1fr; }
.jv-feats li > span { white-space: nowrap; }
.jv-feats li:nth-child(odd) { border-right: 0; }
.jv-feats li:nth-last-child(2) { border-bottom: 1px solid #e3ebf2; }
.jv-feats .jv-icon::before {
    content: "";
    display: block;
    width: 21px;
    height: 21px;
    background-image: var(--jv-icon);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
@container (min-width: 460px) {
    .jv-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .jv-feats li { gap: 9px; padding-left: 9px; padding-right: 9px; font-size: 12.5px; }
    .jv-feats li > i { flex-basis: 38px; width: 38px; height: 38px; }
    .jv-feats li:nth-child(odd) { border-right: 1px solid #e3ebf2; }
    .jv-feats li:nth-last-child(-n + 2) { border-bottom: 0; }
}
@container (max-width: 300px) {
    .jv-feats li { gap: 8px; padding-left: 0; padding-right: 0; font-size: 12px; }
    .jv-feats li > i { flex-basis: 30px; width: 30px; height: 30px; }
}

.jv-icon-brasil { --jv-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230879cf%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2021s7-6%207-12a7%207%200%200%200-14%200c0%206%207%2012%207%2012Z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%229%22%20r%3D%222.5%22%2F%3E%3C%2Fsvg%3E"); }

.jv-icon-reinstall { --jv-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230879cf%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2010a9%209%200%201%201%202%208M3%204v6h6%22%2F%3E%3Cpath%20d%3D%22m10%2010%206%203-3%201-1%203Z%22%2F%3E%3C%2Fsvg%3E"); }

.jv-icon-root { --jv-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230879cf%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m4%206%206%206-6%206M13%2018h7%22%2F%3E%3C%2Fsvg%3E"); }

.jv-icon-apps { --jv-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230879cf%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%222%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%223%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%222%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%2214%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M17.5%2014v7M14%2017.5h7%22%2F%3E%3C%2Fsvg%3E"); }

.jv-icon-painel { --jv-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230879cf%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%223%22%2F%3E%3Cpath%20d%3D%22M3%209h18M9%209v12M13%2013h4M13%2017h4%22%2F%3E%3C%2Fsvg%3E"); }

.jv-icon-ipv4 { --jv-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230879cf%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cellipse%20cx%3D%2212%22%20cy%3D%2212%22%20rx%3D%224%22%20ry%3D%229%22%2F%3E%3Cpath%20d%3D%22M3%2012h18%22%2F%3E%3C%2Fsvg%3E"); }

.jv-icon-sla { --jv-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230879cf%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m12%203%208%203v6c0%205-8%209-8%209s-8-4-8-9V6Z%22%2F%3E%3Cpath%20d%3D%22m8%2012%203%203%205-6%22%2F%3E%3C%2Fsvg%3E"); }

.jv-icon-ssl { --jv-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230879cf%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%225%22%20y%3D%2210%22%20width%3D%2214%22%20height%3D%2211%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M8%2010V7a4%204%200%200%201%208%200v3M12%2014v3%22%2F%3E%3C%2Fsvg%3E"); }

.jv-icon-ia { --jv-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230879cf%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%225%22%20y%3D%225%22%20width%3D%2214%22%20height%3D%2214%22%20rx%3D%224%22%2F%3E%3Cpath%20d%3D%22M9%202v3M15%202v3M9%2019v3M15%2019v3M2%209h3M2%2015h3M19%209h3M19%2015h3m-9-6%201.2%202.8L15%2012l-2.8%201.2L11%2016l-1.2-2.8L7%2012l2.8-1.2Z%22%2F%3E%3C%2Fsvg%3E"); }

.jv-icon-rede { --jv-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230879cf%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2018a9%209%200%201%201%2016%200M12%2012l5-5M5%2018h14%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%221.5%22%2F%3E%3C%2Fsvg%3E"); }


/* Lista interna mais compacta, mantendo a organizacao em duas colunas. */
#order-standard_cart .jv-feats li {
    min-height: 38px;
    padding-top: 3px;
    padding-bottom: 3px;
}
#order-standard_cart .jv-feats li > i {
    flex-basis: 30px;
    width: 30px;
    height: 30px;
}
#order-standard_cart .jv-specs { margin-bottom: 14px; }
#order-standard_cart .jv-cta { margin-top: 14px; }

/* Cards de ciclo: precos reais e selecao integrada ao WHMCS. */
.jv-billing { border: 0; padding: 0; margin: 26px 0; min-width: 0; container-type: inline-size; }
.jv-billing *, .jv-billing *::before, .jv-billing *::after { box-sizing: border-box; }
.jv-billing legend { border: 0; padding: 0; margin: 0 0 7px; font-size: 21px; font-weight: 700; line-height: 1.3; color: #263442; letter-spacing: -.35px; }
.jv-billing-intro { margin: 0 0 19px; color: #64748b; font-size: 13px; line-height: 1.5; }
.jv-billing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.jv-cycle { position: relative; display: flex; flex-direction: column; gap: 0; min-width: 0; margin: 0; padding: 18px 18px 0; border: 1px solid #dce6ef; border-radius: 15px; background: linear-gradient(155deg, #fff 65%, #f5f9fd); cursor: pointer; color: #475569; font-weight: 400; box-shadow: 0 4px 14px rgba(25, 62, 95, .045); }
.jv-cycle-head { display: flex; align-items: center; gap: 9px; min-height: 24px; margin-bottom: 14px; }
.jv-cycle input { accent-color: #0879cf; margin: 0; width: 19px; height: 19px; flex-shrink: 0; }
.jv-cycle-head > div { flex-shrink: 0; }
.jv-cycle-name { color: #263442; font-size: 17px; font-weight: 700; }
.jv-cycle-benefit { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 39px; margin-bottom: 7px; }
.jv-cycle-period { font-size: 12px; color: #64748b; }
.jv-cycle-discount { display: inline-block; border-radius: 20px; padding: 4px 8px; background: #ddf6e8; color: #176444; font-size: 10px; font-weight: 700; line-height: 1.4; }
.jv-cycle-original { font-size: 11px; color: #697b8f; }
.jv-cycle-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px; color: #0879cf; margin-bottom: 7px; line-height: 1.15; }
.jv-cycle-amount { font-size: 34px; font-weight: 700; letter-spacing: -1.3px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.jv-cycle-currency, .jv-cycle-per { font-size: 12px; font-weight: 400; }
.jv-cycle-cadence { font-size: 12px; color: #334155; line-height: 1.5; }
.jv-cycle-total { font-size: 11px; color: #64748b; margin: 0 0 5px; line-height: 1.5; }
.jv-cycle-monthly { font-size: 13px; font-weight: 600; color: #334155; margin-bottom: 5px; line-height: 1.5; }
.jv-cycle-saving { display: block; margin: 13px 0 17px; font-size: 11px; font-weight: 600; color: #347542; line-height: 1.5; }
.jv-cycle-footer { display: block; margin: auto -18px 0; padding: 10px 12px; border-top: 1px solid #e1ebf3; border-radius: 0 0 14px 14px; background: #f1f6fa; color: #47627a; text-align: center; font-size: 12px; font-weight: 600; }
.jv-cycle-active { display: none; }
.jv-cycle:has(input:checked) { border-color: #0879cf; background: linear-gradient(155deg, #fff, #eff8ff); box-shadow: 0 0 0 2px rgba(8, 121, 207, .16), 0 7px 20px rgba(8, 121, 207, .09); }
.jv-cycle:has(input:checked) .jv-cycle-footer { background: #0879cf; color: #fff; border-top-color: #0879cf; }
.jv-cycle:has(input:checked) .jv-cycle-idle { display: none; }
.jv-cycle:has(input:checked) .jv-cycle-active { display: inline; }
.jv-cycle:focus-within { outline: 2px solid #0879cf; outline-offset: 4px; }
.jv-cycle:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.jv-billing-note { margin: 13px 0 0; color: #64748b; font-size: 11px; line-height: 1.6; }
@container (min-width: 860px) { .jv-billing-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container (max-width: 380px) { .jv-billing-grid { grid-template-columns: 1fr; } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .jv-cycle { transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; }
    .jv-cycle:hover { transform: translateY(-2px); border-color: #81bae3; box-shadow: 0 7px 20px rgba(25, 62, 95, .1); }
}