/* ============================================================
   VIP LIST 2026 · modal de compra
   O formulário do BuyNow.aspx (mesmos campos e validações) no
   visual da LP: fundo escuro, mármore no resumo, destaques em
   âmbar e os mesmos componentes dos cards de preço.
   O modal é o do Bootstrap 5.3 da master, com data-bs-theme="dark".
   ============================================================ */

/* Os botões dos planos viraram <button> (abrem este modal) e o viplist-fab.css
   só estiliza "a" dentro do .plan-cta: aqui vai o mesmo visual para o botão */
.vip-plan .plan-cta button {
    display: block; width: 100%; text-align: center; padding: 13px 16px !important; border-radius: 6px !important;
    background: #ffaf1f !important; color: #000 !important; border: 0 !important; font-weight: 700 !important; font-size: 16px;
}
.vip-plan .plan-cta button:hover { background: #ffcb4b !important; }
.vip-plan.is-featured .plan-cta button { background: #000 !important; color: #ffaf1f !important; }

.modal-backdrop.show { opacity: .82; }

/* O chat do Zoho SalesIQ da master fica acima de tudo e cobriria os campos:
   some enquanto o modal está aberto e volta ao fechar */
body.modal-open .zsiq_theme1 { visibility: hidden !important; }

.vip-co .modal-dialog { max-width: 1080px; }

.vip-co .modal-content {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid rgba(var(--sw-amber-rgb), .3);
    background:
        radial-gradient(900px 420px at 100% -10%, rgba(var(--sw-amber-rgb), .10), transparent 60%),
        #0b0b0b;
    box-shadow: 0 40px 120px rgba(0, 0, 0, .65), var(--sw-shadow-amber);
    color: var(--sw-light);
}

.vip-co-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 3;
}

/* Resumo à esquerda e formulário à direita, como no BuyNow */
.vip-co-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

/* ------------------------------------------------------------
   RESUMO: o plano clicado (preço VIP, usuários, recursos)
   ------------------------------------------------------------ */
.vip-co-summary {
    padding: 44px 36px;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .88)),
        url("../img/brand/bg-marble.webp") center / cover no-repeat;
    border-right: 1px solid rgba(255, 255, 255, .07);
}

.vip-co-sum-title {
    margin: 10px 0 18px;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.15;
    color: var(--sw-white);
}
    .vip-co-sum-title span { display: block; font-size: 15px; font-weight: 600; color: var(--sw-gray-500); }

.vip-co-price {
    padding: 16px 18px;
    border-radius: 16px;
    background: rgba(13, 13, 13, .65);
    border: 1px solid rgba(var(--sw-amber-rgb), .25);
}
    .vip-co-price-was {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 12px;
    }
    .vip-co-price-was s {
        font-size: 15px;
        color: var(--sw-gray-600);
        text-decoration-color: var(--sw-danger);
        text-decoration-thickness: 2px;
    }
    .vip-co-price-was .save {
        background: #000;
        color: var(--sw-amber);
        font-size: 13px;
        font-weight: 700;
        padding: 4px 8px;
    }
    .vip-co-price-vip {
        display: flex;
        align-items: baseline;
        gap: 4px;
        margin-top: 6px;
        color: var(--sw-amber);
    }
        .vip-co-price-vip .cur { font-size: 20px; font-weight: 800; }
        .vip-co-price-vip .val { font-size: 46px; font-weight: 800; line-height: 1; letter-spacing: -1px; }
        .vip-co-price-vip .per { font-size: 15px; color: var(--sw-gray-500); }
    .vip-co-price-year { margin-top: 4px; font-size: 13px; color: var(--sw-gray-500); }
    .vip-co-price-year:empty { display: none; }

.vip-co-users {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 0;
}
    .vip-co-users .users {
        padding: 4px 10px;
        border-radius: 6px;
        background: rgba(255, 255, 255, .08);
        color: #fff;
        font-size: 13px;
        font-weight: 700;
    }

.vip-co-extra {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px dashed rgba(var(--sw-amber-rgb), .5);
    background: rgba(255, 255, 255, .06);
    font-size: 14px;
    color: #e6e6e6;
}
    .vip-co-extra b, .vip-co-extra i { color: var(--sw-amber); }
    .vip-co-extra:empty { display: none; }

/* recursos: os mesmos itens do card clicado */
.vip-co-feats,
.vip-co-trust {
    list-style: none;
    padding: 0;
    margin: 18px 0 0;
    display: grid;
    gap: 8px;
}
    .vip-co-feats li,
    .vip-co-trust li {
        display: flex;
        align-items: flex-start;
        gap: 9px;
        font-size: 14px;
        line-height: 1.5;
        color: var(--sw-gray-400);
    }
    .vip-co-feats i,
    .vip-co-trust i { color: var(--sw-amber); font-size: 15px; line-height: 1.4; }
    .vip-co-feats .plan-everything {
        margin: 0 0 2px;
        padding: 8px 10px;
        border-radius: 10px;
        background: rgba(var(--sw-amber-rgb), .14);
        border: 1px solid rgba(var(--sw-amber-rgb), .45);
    }
        .vip-co-feats .plan-everything b { color: var(--sw-amber); }
    /* subitens do Drawing (2D/3D/DXF, PDF, nesting), presos ao item de cima como no card */
    .vip-co-feats .plan-sub { margin: -4px 0 0 24px; font-size: 13px; color: var(--sw-gray-500); }
.vip-co-trust {
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}
    .vip-co-trust li:first-child { color: var(--sw-white); font-weight: 700; }

/* ------------------------------------------------------------
   FORMULÁRIO
   ------------------------------------------------------------ */
.vip-co-form { padding: 44px 48px 36px; }

.vip-co-title {
    margin: 10px 0 4px;
    font-size: clamp(24px, 2.4vw, 32px);
    font-weight: 800;
    line-height: 1.15;
    color: var(--sw-white);
}
    .vip-co-title .plan { display: block; font-size: .8em; color: var(--sw-amber); }

.vip-co-note {
    margin: 0 0 22px;
    font-size: 13px;
    font-weight: 600;
    color: var(--sw-amber);
}

.vip-co .form-label {
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #e9e9e9;
}
    .vip-co .form-label .req { color: var(--sw-amber); }

.vip-co .form-control,
.vip-co .form-select,
.vip-co .input-group-text {
    min-height: 48px;
    border-color: rgba(255, 255, 255, .14);
    border-radius: 10px;
    font-size: 15px;
}
.vip-co .form-control,
.vip-co .form-select {
    background-color: rgba(255, 255, 255, .04);
    color: var(--sw-light);
}
    .vip-co .form-control::placeholder { color: var(--sw-gray-600); }
    .vip-co .form-control:focus,
    .vip-co .form-select:focus {
        border-color: var(--sw-amber);
        background-color: rgba(255, 255, 255, .06);
        box-shadow: 0 0 0 .2rem rgba(var(--sw-amber-rgb), .18);
    }
.vip-co .input-group-text {
    background: rgba(255, 255, 255, .07);
    color: var(--sw-gray-500);
}
/* A lista aberta do select é do navegador: sem cor própria, o Chrome a mostrava
   branca com o texto claro do campo, quase ilegível */
.vip-co .form-select option {
    background-color: #1a1a1a;
    color: var(--sw-light);
}
.vip-co .input-group > .form-control { min-width: 120px; }

.vip-co-hint { margin-top: 6px; font-size: 13px; color: var(--sw-gray-500); }

/* erros: aparecem embaixo do campo, como os validadores do BuyNow */
.vip-co-error {
    margin-top: 6px;
    font-size: 13px;
    color: #ff6b6b;
}
.vip-co [aria-invalid="true"] { border-color: #ff6b6b !important; }
    .vip-co [aria-invalid="true"]:focus { box-shadow: 0 0 0 .2rem rgba(255, 107, 107, .2) !important; }

.vip-co-terms { margin-top: 20px; font-size: 14px; color: var(--sw-gray-400); }
    .vip-co-terms .form-check { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; }
    .vip-co-terms .form-check-input { margin: 0; width: 20px; height: 20px; flex: none; cursor: pointer; }
        .vip-co-terms .form-check-input:checked { background-color: var(--sw-amber); border-color: var(--sw-amber); }
        .vip-co-terms .form-check-input:focus { border-color: var(--sw-amber); box-shadow: 0 0 0 .2rem rgba(var(--sw-amber-rgb), .2); }
    .vip-co-terms a { color: var(--sw-amber); font-weight: 700; text-underline-offset: 3px; }

.vip-co-submit {
    width: 100%;
    margin-top: 24px;
    padding: 14px 20px;
    font-size: 17px;
}

.vip-co-recaptcha {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--sw-gray-600);
}
    .vip-co-recaptcha a { color: var(--sw-gray-500); }

/* ------------------------------------------------------------
   TELAS MENORES: modal em tela cheia (modal-fullscreen-lg-down),
   formulário primeiro e resumo embaixo, como no BuyNow
   ------------------------------------------------------------ */
@media (max-width: 991.98px) {
    /* em tela cheia o Bootstrap só rola o .modal-body, que este modal não usa: rola o conteúdo todo */
    .vip-co .modal-content { border-radius: 0; border: 0; overflow-y: auto; overscroll-behavior: contain; }
    .vip-co-grid { grid-template-columns: minmax(0, 1fr); }
    .vip-co-form { order: 1; padding: 56px 20px 28px; }
    .vip-co-summary { order: 2; padding: 28px 20px 40px; border-right: 0; border-top: 1px solid rgba(255, 255, 255, .07); }
    /* o X acompanha a rolagem */
    .vip-co-close {
        position: fixed;
        top: 12px;
        right: 12px;
        padding: 12px;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, .65);
    }
}