/*
 * Addon "ativeapps" - área do cliente. Desenvolvedor: DEVFAST.
 * CSS mínimo: só layout e forma. Cor vem do tema ativo (Bootstrap do WHMCS);
 * quando uso cor, é a variável do tema com fallback neutro. Sem hex fixo.
 */

.ativeapps {
    --aa-line: transparent;
    --aa-line: color-mix(in srgb, currentColor 15%, transparent);
}

.ativeapps .ativeapps-box {
    margin-bottom: 1.25rem;
}

.ativeapps .ativeapps-heading {
    margin: 1.5rem 0 .5rem;
}

.ativeapps .ativeapps-section-title {
    margin-top: 0;
    margin-bottom: .75rem;
}

.ativeapps .ativeapps-back {
    margin-bottom: 1rem;
}

/* Título do detalhe: app, ano e estado na mesma linha, quebrando no celular */
.ativeapps .ativeapps-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 0;
}

/* Badge de estado: formato próprio, cor do tema (label-* no Six, badge-* no Twenty-One) */
.ativeapps .ativeapps-state {
    display: inline-block;
    padding: .3em .6em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    border-radius: .25rem;
}

/* Lista de dados (rótulo / valor) */
.ativeapps .ativeapps-facts {
    display: grid;
    grid-template-columns: minmax(8rem, max-content) 1fr;
    gap: .4rem 1rem;
    margin: 0 0 1rem;
}

.ativeapps .ativeapps-facts dt {
    font-weight: 600;
}

.ativeapps .ativeapps-facts dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Formulários */
.ativeapps .ativeapps-form {
    max-width: 28rem;
}

.ativeapps .ativeapps-form .form-control {
    font-family: inherit;
}

.ativeapps input[name="mac"] {
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* Bloco recolhível (trocar aparelho / corrigir aparelho) */
.ativeapps .ativeapps-collapse {
    margin-top: 1rem;
}

.ativeapps .ativeapps-collapse > summary {
    display: inline-block;
    cursor: pointer;
    list-style: none;
}

.ativeapps .ativeapps-collapse > summary::-webkit-details-marker {
    display: none;
}

.ativeapps .ativeapps-collapse[open] > summary {
    margin-bottom: 1rem;
}

/* Compra em aberto */
.ativeapps .ativeapps-open {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.ativeapps .ativeapps-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* Catálogo em grade: cards da mesma altura, preço e botão alinhados */
.ativeapps .ativeapps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.ativeapps .ativeapps-app {
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: .75rem;
    overflow: hidden;
    border-top: 3px solid var(--primary, var(--brand-primary, currentColor));
    transition: transform .15s ease, box-shadow .15s ease;
}

.ativeapps .ativeapps-app:hover {
    transform: translateY(-2px);
    box-shadow: 0 .6rem 1.4rem color-mix(in srgb, currentColor 12%, transparent);
}

.ativeapps .ativeapps-app > .card-body,
.ativeapps .ativeapps-app > .panel-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100%;
    padding: 1.05rem 1.1rem 1.1rem;
}

.ativeapps .ativeapps-app form,
.ativeapps .ativeapps-app > .panel-body > .btn,
.ativeapps .ativeapps-app > .card-body > .btn {
    margin-top: auto;
    margin-bottom: 0;
}

.ativeapps .ativeapps-app-img {
    display: block;
    width: 100%;
    height: 7.5rem;
    margin: -.15rem 0 .85rem;
    object-fit: contain;
    border-radius: 1rem;
}

.ativeapps .ativeapps-app-name {
    margin: 0 0 .65rem;
    min-height: 2.6em;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .01em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.ativeapps .ativeapps-app-price {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--primary, var(--brand-primary, inherit));
}

.ativeapps .ativeapps-app-price strong {
    font-weight: 700;
}

.ativeapps .ativeapps-app-period {
    margin-left: .3rem;
    font-size: .8rem;
    font-weight: 600;
    color: inherit;
    opacity: .65;
}

.ativeapps .ativeapps-app-meta {
    margin: .35rem 0 1rem;
    font-size: .82rem;
    line-height: 1.4;
}

.ativeapps .ativeapps-app-off {
    opacity: .72;
}

.ativeapps .ativeapps-app-off:hover {
    transform: none;
    box-shadow: none;
}

.ativeapps .ativeapps-app .btn {
    white-space: nowrap;
    border-radius: .45rem;
    font-weight: 600;
    letter-spacing: .02em;
}

/* v1.5.0: compra com o aparelho. "Comprar" abre o formulário no próprio card (<details>, sem JS). */
.ativeapps .ativeapps-app .ativeapps-buy {
    margin-top: auto;
}

.ativeapps .ativeapps-buy > summary {
    display: block;
    cursor: pointer;
    list-style: none;
    text-align: center;
}

.ativeapps .ativeapps-buy > summary::-webkit-details-marker {
    display: none;
}

.ativeapps .ativeapps-buy[open] > summary {
    margin-bottom: .85rem;
    opacity: .7;
}

.ativeapps .ativeapps-buy-form {
    text-align: left;
}

.ativeapps .ativeapps-buy-form .form-group {
    margin-bottom: .75rem;
}

.ativeapps .ativeapps-buy-form label {
    font-weight: 600;
}

.ativeapps .ativeapps-buy-form .form-control {
    font-family: inherit;
}

.ativeapps .ativeapps-buy-note {
    margin: 0 0 .65rem;
    font-size: .82rem;
    line-height: 1.4;
}

/* Preço pode ser longo ("Gerar fatura de R$ 1.234,00/ano"): quebra em vez de vazar do card. */
.ativeapps .ativeapps-app .ativeapps-buy-form .btn {
    white-space: normal;
}

/* Aparelho informado numa compra aguardando pagamento */
.ativeapps .ativeapps-device {
    margin-bottom: 1rem;
}

/* Tabelas */
.ativeapps .ativeapps-table {
    margin-bottom: 0;
}

.ativeapps .ativeapps-table td,
.ativeapps .ativeapps-table th {
    vertical-align: middle;
}

.ativeapps .ativeapps-cell-action {
    text-align: right;
    white-space: nowrap;
}

.ativeapps .ativeapps-empty {
    text-align: center;
}

.ativeapps code {
    color: inherit;
    background: transparent;
    padding: 0;
    white-space: nowrap;
}

/* Device key pode ter até 191 caracteres: no detalhe ela quebra dentro do dd. */
.ativeapps .ativeapps-facts code {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-all;
}

/* v1.4.0: caixa de upsell (carrinho, pedido concluído, início, página do serviço) */
.ativeapps-upsell .ativeapps-upsell-list,
.ativeapps-upsell .ativeapps-upsell-pending {
    margin: 0 0 .75rem;
    padding: 0;
}

.ativeapps-upsell .ativeapps-upsell-item,
.ativeapps-upsell .ativeapps-upsell-pending > li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--aa-line);
}

.ativeapps-upsell img.ativeapps-upsell-logo {
    box-sizing: border-box;
    width: 3rem;
    height: 3rem;
    min-width: 3rem;
    max-width: 3rem;
    min-height: 3rem;
    max-height: 3rem;
    object-fit: contain;
    border-radius: .75rem;
    flex: 0 0 3rem;
}

.ativeapps-upsell .ativeapps-upsell-name {
    flex: 1 1 10rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.ativeapps-upsell .ativeapps-upsell-price {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ativeapps-upsell .ativeapps-upsell-note {
    margin-bottom: .5rem;
}

/* Celular: tabela vira lista empilhada (rótulo vindo de data-label) */
@media (max-width: 767.98px) {
    .ativeapps .ativeapps-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .ativeapps .ativeapps-table,
    .ativeapps .ativeapps-table tbody,
    .ativeapps .ativeapps-table tr,
    .ativeapps .ativeapps-table td {
        display: block;
        width: 100%;
    }

    .ativeapps .ativeapps-table tr {
        padding: .5rem 0;
        border-bottom: 1px solid var(--aa-line);
    }

    .ativeapps .ativeapps-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        border: 0;
        padding: .3rem .75rem;
        text-align: right;
        overflow-wrap: anywhere;
    }

    /* Bootstrap 3 (Six) põe nowrap nas células de .table-responsive abaixo de 768px (0,2,3). */
    .ativeapps .table-responsive > .ativeapps-table > tbody > tr > td {
        white-space: normal;
    }

    .ativeapps .ativeapps-table td > * {
        min-width: 0;
    }

    .ativeapps .ativeapps-table td[data-label]::before {
        content: attr(data-label);
        font-weight: 600;
        text-align: left;
    }

    .ativeapps .ativeapps-cell-action {
        justify-content: flex-end;
    }

    .ativeapps .ativeapps-facts {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .ativeapps .ativeapps-facts dd {
        margin-bottom: .5rem;
    }

    .ativeapps .ativeapps-open {
        flex-direction: column;
        align-items: stretch;
    }
}

/* v1.6.0: "Atualizar status" em processando / trocando aparelho */
.ativeapps .ativeapps-refresh {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1rem;
}

/* v1.9.0: barra de pesquisa. Só forma; a cor vem do tema (form-control/btn/text-muted). */
.ativeapps .ativeapps-search {
    margin: 0 0 1.25rem;
}

.ativeapps .ativeapps-search input[type="search"] {
    min-width: 0;
}

.ativeapps .ativeapps-search-count {
    min-height: 1.25em;
    margin: .35rem 0 0;
}

/* hidden vence o display do card (flex) e da tabela empilhada no celular (block). */
.ativeapps [hidden] {
    display: none !important;
}

/* v1.11.0: "Minhas ativações" no topo (primeira seção logo abaixo da busca). */
.ativeapps .ativeapps-heading-first {
    margin-top: .5rem;
    scroll-margin-top: 5rem;
}

/* v1.11.0: "Falar com o suporte" (classe secundária do tema; só espaçamento). */
.ativeapps .ativeapps-support-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 1rem 0 0;
}

.ativeapps .alert .ativeapps-support {
    margin-left: .5rem;
    vertical-align: baseline;
}

.ativeapps .ativeapps-cell-action .ativeapps-support {
    margin-left: .25rem;
}

/* v1.11.0: painel "Meus aplicativos" do início da área do cliente */
.ativeapps-panel .ativeapps-panel-list {
    margin: 0;
    padding: 0;
}

.ativeapps-panel .ativeapps-panel-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem 1rem;
    padding: .55rem 0;
    border-bottom: 1px solid var(--aa-line);
}

.ativeapps-panel .ativeapps-panel-item:last-child {
    border-bottom: 0;
}

.ativeapps-panel .ativeapps-panel-main {
    flex: 1 1 12rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.ativeapps-panel .ativeapps-panel-meta {
    flex: 1 1 100%;
    order: 3;
    font-variant-numeric: tabular-nums;
}

.ativeapps-panel .ativeapps-panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.ativeapps-panel .ativeapps-panel-more {
    margin-top: .5rem;
}

/* v1.11.0: quadro da ativação na página do serviço */
.ativeapps-service .ativeapps-service-links {
    margin-top: 1rem;
    align-items: center;
}

/* v1.12.0: listra própria de "Minhas ativações" (assets/client.js tira o table-striped e marca
   .ativeapps-odd só nas linhas visíveis). Sem cor fixa: a variável do tema, ou um cinza translúcido. */
.ativeapps .ativeapps-zebra > tbody > tr.ativeapps-odd > td,
.ativeapps .ativeapps-zebra > tbody > tr.ativeapps-odd > th {
    background-color: var(--bs-table-striped-bg, rgba(127, 127, 127, .08));
}

/* v1.12.0: upsell no carrinho (configurar produto / checkout / plano B do rodapé) */
.ativeapps-upsell-slot {
    margin: 1rem 0;
}

.ativeapps-upsell .ativeapps-upsell-lead {
    margin-bottom: .75rem;
}

/* v1.12.0: vínculo com o serviço principal (compra e página do serviço vinculado) */
.ativeapps .ativeapps-link-note {
    margin-bottom: 1rem;
}

.ativeapps .ativeapps-buy-form select.form-control {
    width: 100%;
}

.ativeapps-linked .ativeapps-linked-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ativeapps-linked .ativeapps-linked-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .75rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--aa-line);
}

.ativeapps-linked .ativeapps-linked-item:last-child {
    border-bottom: 0;
}

.ativeapps-linked .ativeapps-linked-main {
    flex: 1 1 12rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.ativeapps-linked .ativeapps-linked-meta {
    flex: 1 1 100%;
    order: 3;
    font-variant-numeric: tabular-nums;
}

.ativeapps-linked .ativeapps-linked-meta code {
    word-break: break-all;
}

.ativeapps-linked .ativeapps-linked-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.ativeapps-linked .ativeapps-linked-cta {
    margin: 1rem 0 0;
}