﻿.accordion-item-continente{
    margin-bottom:12px;
    transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease;
    cursor:grab;
}

.accordion-header-continente{
    cursor:pointer;
    user-select:none;
}

.accordion-body-continente{
    max-height:0;
    overflow:hidden;
    transition:max-height .35s ease;
}

.accordion-body-wrapper{
    padding-top:10px;
}

.pais-titulo{
    font-size:15px;
    font-weight:700;
    margin-top:15px;
    margin-bottom:10px;
    display:flex;
    align-items:center;
    gap:8px;
}

.portal-row-item{
    padding:12px 0;
    border-top:1px solid rgba(0,0,0,.05);
}

.flag-icon{
    width:20px;
    height:13px;
    object-fit:cover;
    border-radius:2px;
    box-shadow:0 1px 3px rgba(0,0,0,.15);
}

.portal-row-item a{
    text-decoration:none;
    color:inherit;
}

.badge-total{
    background:#e42f08;
    color:#fff;
    font-size:11px;
    padding:2px 7px;
    border-radius:20px;
    margin-left:6px;
    font-weight:600;
}

.seta-accordion{
    transition:transform .3s ease;
}

/* =========================================================
   TOGGLE PADRONIZADO
========================================================= */

.toggle-button-cover{
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

/* RESET TOTAL DO STYLE GLOBAL */

.toggle-button-cover .button.r,
.toggle-button-cover .button.r *{
    box-sizing:border-box;
}

.toggle-button-cover .button.r{
    position:relative !important;
    width:44px !important;
    height:24px !important;
    overflow:visible !important;
    border:none !important;
    border-radius:100px !important;
    background:none !important;
    padding:0 !important;
    margin:0 !important;
}

/* CHECKBOX */

.toggle-button-cover .button.r .checkbox{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    opacity:0 !important;
    margin:0 !important;
    padding:0 !important;
    cursor:pointer !important;
    z-index:30 !important;
}

/* FUNDO */

.toggle-button-cover .button.r .layer{
    position:absolute !important;
    top:0 !important;
    left:0 !important;
    right:auto !important;
    bottom:auto !important;
    width:44px !important;
    height:24px !important;
    background:#d8d8d8 !important;
    border-radius:100px !important;
    transition:all .25s ease !important;
    z-index:1 !important;
}

/* BOLINHA */

.toggle-button-cover .button.r .knobs{
    position:absolute !important;
    top:3px !important;
    left:3px !important;
    right:auto !important;
    bottom:auto !important;
    width:18px !important;
    height:18px !important;
    border-radius:50% !important;
    background:#fff !important;
    box-shadow:0 2px 5px rgba(0,0,0,.25) !important;
    transition:all .25s ease !important;
    z-index:2 !important;
}

/* REMOVE O BEFORE DO STYLE GLOBAL */

.toggle-button-cover .button.r .knobs:before{
    display:none !important;
    content:none !important;
}

/* LIGADO */

.toggle-button-cover .button.r .checkbox:checked ~ .layer{
    background:#0d6efd !important;
}

.toggle-button-cover .button.r .checkbox:checked ~ .knobs{
    left:23px !important;
}

/* DESLIGADO */

.toggle-button-cover .button.r .checkbox:not(:checked) ~ .layer{
    background:#d8d8d8 !important;
}

.toggle-button-cover .button.r .checkbox:not(:checked) ~ .knobs{
    left:3px !important;
}

/* DARK MODE */

[data-theme=dark] .toggle-button-cover .button.r .layer{
    background:#4a4a4a !important;
}

[data-theme=dark] .toggle-button-cover .button.r .checkbox:checked ~ .layer{
    background:#0d6efd !important;
}

/* =========================================================
   DRAG AND DROP
========================================================= */

.accordion-item-continente.dragging{
    opacity:.4;
    transform:scale(.98);
    box-shadow:0 5px 15px rgba(0,0,0,.15);
    background-color:#f8f9fa;
    border:1px dashed #333;
}

.accordion-item-continente.drag-over{
    border-top:3px solid #e42f08 !important;
    background-color:rgba(40,167,69,.03);
}