/* Backdrop escurecido */
.ct-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(1px);
    z-index: 9998;
}

/* Card central (formato igual ao print) */
.ct-card {
    position: fixed;
    left: 50%;
    top: 64px; /* altura parecida com seu print; ajuste se quiser */
    transform: translateX(-50%);
    width: min(640px, calc(100vw - 40px));
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 12px 35px rgba(0,0,0,.25);
    z-index: 9999;
    overflow: hidden;
    padding: 18px 18px 16px 18px;
}

/* Layout interno */
.ct-row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

/* Ícone em círculo */
.ct-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid #e8edf3;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    margin-top: 2px;
}

.ct-title {
    font-weight: 700;
    font-size: 18px;
    margin: 0 0 4px 0;
    color: #1f2a37;
}

.ct-message {
    margin: 0;
    color: #65758b;
    font-size: 14px;
    line-height: 1.35;
}

/* Botões (lado direito) */
.ct-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 14px;
}

.ct-btn {
    border: 0;
    border-radius: 8px;
    padding: 8px 18px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}

.ct-btn-cancel {
    background: #edf2f7;
    color: #1f2a37;
}

.ct-btn-danger {
    background: #f6c9c9;
    color: #b91c1c;
}

.ct-btn-cancel:hover {
    filter: brightness(.98);
}

.ct-btn-danger:hover {
    filter: brightness(.98);
}

/* estado desabilitado padrão */
.ct-btn:disabled,
.ct-btn[aria-disabled="true"] {
    background: #e5e7eb; /* cinza claro */
    color: #9ca3af; /* texto apagado */
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.7;
}

/* especificamente o danger desabilitado */
.ct-btn-danger:disabled,
.ct-btn-danger[aria-disabled="true"] {
    background: #f3d6d6; /* vermelho bem claro */
    color: #c7a1a1;
}

/* remove efeito hover quando desabilitado */
.ct-btn:disabled:hover,
.ct-btn[aria-disabled="true"]:hover {
    filter: none;
}

.ct-btn {
    transition: background-color .15s ease, color .15s ease, opacity .15s ease;
}

@media (prefers-reduced-motion: no-preference) {
    .ct-card {
        animation: ct-pop .12s ease-out;
    }

    @keyframes ct-pop {
        from {
            opacity: 0;
            transform: translateX(-50%) translateY(-6px);
        }

        to {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
    }
}

/* Linha inferior: input à esquerda + botões à direita */
/* garante tudo na mesma linha */
.ct-bottom {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 14px;
    flex-wrap: nowrap; /* NÃO deixa quebrar */
}

    /* sobrescreve o Bootstrap form-control (width:100%) */
    .ct-bottom .ct-input.form-control {
        width: auto !important; /* tira 100% */
        flex: 1 1 0; /* cresce, mas permite botões ao lado */
        min-width: 260px; /* ajuste aqui */
        height: 38px;
    }

    /* botões sempre ao lado */
    .ct-bottom .ct-actions {
        display: flex;
        gap: 10px;
        flex: 0 0 auto;
        margin-top: 0;
        white-space: nowrap;
    }

.ct-input {
    flex: 1 1 auto; /* ocupa o espaço disponível */
    min-width: 240px; /* evita ficar minúsculo */
    height: 38px;
}

/* Botões à direita sem "empurrar" o input */
.ct-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 0; /* remove o margin-top antigo */
    flex: 0 0 auto;
}

/* Mobile: quebra pra baixo se faltar espaço */
@media (max-width: 520px) {
    .ct-bottom {
        flex-direction: column;
        align-items: stretch;
    }

    .ct-actions {
        justify-content: flex-end;
        width: 100%;
    }
}