/**
 * dangathi-swal.css
 * Identidade visual Dangathi para os popups (SweetAlert2) do sistema,
 * seguindo o padrão do site dangathi.com:
 * degradê azul linear-gradient(145deg, #0039e4 0%, #04dbf1 100%),
 * texto branco e botões arredondados (pílula).
 */

.swal2-popup {
    background-image: linear-gradient(145deg, #0039e4 0%, #04dbf1 100%) !important;
    color: #fff !important;
    border-radius: 18px !important;
    padding-bottom: 26px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35) !important;
}

.swal2-title {
    color: #fff !important;
    font-weight: 800 !important;
}

.swal2-html-container {
    color: #fff !important;
}

.swal2-html-container b,
.swal2-html-container strong {
    color: #fff !important;
}

.swal2-html-container small {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Botões estilo pílula, como no site */
.swal2-styled {
    border-radius: 30px !important;
    font-weight: 700 !important;
    padding: 6px 16px !important;
    box-shadow: none !important;
    border: none !important;
}

.swal2-styled:focus {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35) !important;
}

/* X de fechar no canto */
.swal2-close {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 2rem !important;
}

.swal2-close:hover {
    color: #fff !important;
    transform: none !important;
}

/* Campos de formulário dentro do popup (edição de veículo) */
.swal2-popup .swal2-input {
    background: #fff !important;
    color: #1a1b1e !important;
    border: none !important;
    border-radius: 28px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.swal2-popup .swal2-input:focus {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5) !important;
}

/* Mensagem de validação (ex: "A placa não pode ficar vazia") */
.swal2-validation-message {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    border-radius: 10px !important;
}

/* Ícones: anéis mais suaves sobre o degradê */
.swal2-icon {
    border-color: rgba(255, 255, 255, 0.5) !important;
}

.swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(255, 255, 255, 0.45) !important;
}

.swal2-icon.swal2-success [class^='swal2-success-line'] {
    background-color: #fff !important;
}

.swal2-icon.swal2-error {
    border-color: rgba(255, 255, 255, 0.6) !important;
}

.swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
    background-color: #fff !important;
}

.swal2-icon.swal2-warning,
.swal2-icon.swal2-info,
.swal2-icon.swal2-question {
    border-color: rgba(255, 255, 255, 0.7) !important;
    color: #fff !important;
}

/* Ícones dos botões dos popups em círculo branco 40x40, como os botões do site */
.swal2-styled i {
    background: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    margin-right: 0;
    vertical-align: middle;
    color: #0039e4;
    font-style: normal;
}

/* Botões com ícone: padding mínimo à direita, como o octf-btn do site */
.swal2-styled:has(i) {
    padding: 4px 4px 4px 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    font-size: 14px !important;
    line-height: 1 !important;
    /* height: 38px !important; */
}

/* Cor do ícone acompanhando a cor do botão */
.swal2-styled.swi-laranja i { color: #fe4c1c; }
.swal2-styled.swi-amarelo i { color: #f5a623; }
.swal2-styled.swi-verde i   { color: #28a745; }
.swal2-styled.swi-cinza i   { color: #fe4c1c; }
.swal2-styled.swi-red { background: #ee0000 !important; }
.swal2-styled.swi-red i { color: #ee0000; }

/* Timer bar dos toasts de sucesso */
.swal2-timer-progress-bar {
    background: rgba(255, 255, 255, 0.6) !important;
}

/* ============================================================
   BOTÕES COM BRILHO NO HOVER (efeito do site dangathi.com)
   Aplica em: botões dos popups (Swal), modal do cliente,
   cabeçalhos (Novo Cadastro / Sair / Ver clientes), login e busca.
   ============================================================ */
.swal2-styled,
.btn-novo,
.btn-sair,
.btn-entrar,
.search-bar .btn,
.topbar-interna a,
.topbar-interna button,
#modalCliente .modal-footer .btn {
    position: relative !important;
    overflow: hidden !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease !important;
}

/* o "raio de luz" que atravessa o botão */
.swal2-styled::after,
.btn-novo::after,
.btn-sair::after,
.btn-entrar::after,
.search-bar .btn::after,
.topbar-interna a::after,
.topbar-interna button::after,
#modalCliente .modal-footer .btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 45%;
    height: 100%;
    background: linear-gradient(120deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    pointer-events: none;
}

.swal2-styled:hover,
.btn-novo:hover,
.btn-sair:hover,
.btn-entrar:hover,
.search-bar .btn:hover,
.topbar-interna a:hover,
.topbar-interna button:hover,
#modalCliente .modal-footer .btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
    filter: brightness(1.07) !important;
}

.swal2-styled:hover::after,
.btn-novo:hover::after,
.btn-sair:hover::after,
.btn-entrar:hover::after,
.search-bar .btn:hover::after,
.topbar-interna a:hover::after,
.topbar-interna button:hover::after,
#modalCliente .modal-footer .btn:hover::after {
    animation: dangathi-shine 0.75s ease;
}

@keyframes dangathi-shine {
    100% { left: 130%; }
}

/* ============================================================
   Linhas de detalhe do veículo dentro do popup (mesmo padrão
   visual do .linha-cobertura do modal "Solução para Caminhão")
   ============================================================ */
.swal2-html-container .lista-veiculo {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Cartão que envolve a lista, mesmo padrão do .ot-accordions.accordions-gradient
   do modal "Solução para Caminhão": cantos arredondados + sombra suave */
.swal2-html-container .cartao-veiculo {
    margin: 0 0;
    padding: 0px 20px;
    border-radius: 28px;
    -webkit-border-radius: 28px;
    -moz-border-radius: 28px;
    box-shadow: 8px 8px 25px 0px rgba(42, 67, 113, 0.15);
    -webkit-box-shadow: 8px 8px 25px 0px rgba(42, 67, 113, 0.15);
    -moz-box-shadow: 8px 8px 25px 0px rgba(42, 67, 113, 0.15);
    background: rgba(255, 255, 255, 0.06);
}

.swal2-html-container .linha-veiculo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    padding: 10px 2px;
    margin: 0;
    font-size: 0.8rem;
}

.swal2-html-container .linha-veiculo:last-child {
    border-bottom: none;
}

.swal2-html-container .linha-veiculo .lbl {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    text-align: left;
}

.swal2-html-container .linha-veiculo .val {
    color: #fff;
    font-weight: 700;
    text-align: right;
}

/* Ícones de ação da listagem (olho / lápis / lixeira): leve destaque no hover */
.btn-acao {
    transition: transform 0.2s ease !important;
}
.btn-acao:hover {
    transform: scale(1.25) !important;
}

/* Espaço entre os botões dos popups */
.swal2-actions {
    gap: 2px !important;
}