/* =========================================================
EGBE ORI OKAN - FRAMEWORK CSS V2
========================================================= */

/* =========================================================
ROOT / IDENTIDADE VISUAL
========================================================= */

:root{

    --bg-body:#0f0f0f;
    --bg-card:#1a1a1a;
    --bg-secondary:#232323;
    --bg-hover:#2c2c2c;

    --gold:#c8a96b;
    --gold-hover:#e0bf7f;

    --text:#f1f1f1;
    --text-soft:#bdbdbd;

    --border:#333;

    --success:#2d6a4f;
    --danger:#a94442;
    --warning:#d4a017;

    --shadow:0 4px 20px rgba(0,0,0,0.35);

    --radius:12px;

    --transition:0.2s ease;
}



/* =========================================================
RESET
========================================================= */

*{

    margin:0;
    padding:0;
    box-sizing:border-box;
}



/* =========================================================
BODY
========================================================= */

body{

    font-family:Arial, Helvetica, sans-serif;
    background:var(--bg-body);
    color:var(--text);
    line-height:1.5;
}



/* =========================================================
LINKS
========================================================= */

a{

    text-decoration:none;
    color:var(--gold);
    transition:var(--transition);
}

a:hover{

    color:var(--gold-hover);
}



/* =========================================================
IMAGENS
========================================================= */

img{

    max-width:100%;
    height:auto;
}



/* =========================================================
TOPO
========================================================= */

.topo{

    background:#000;
    color:var(--gold);

    padding:22px 30px;

    font-size:28px;
    font-weight:bold;

    border-bottom:1px solid var(--border);

    box-shadow:var(--shadow);
}



/* =========================================================
CONTAINER
========================================================= */

.container{

    width:100%;
    max-width:1400px;

    margin:auto;

    padding:30px;
}



/* =========================================================
CARDS
========================================================= */

.card{

    background:var(--bg-card);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:25px;

    margin-bottom:25px;

    box-shadow:var(--shadow);
}



/* =========================================================
TÍTULOS
========================================================= */

h1,
h2,
h3,
h4,
h5{

    margin-bottom:15px;
    color:var(--gold);
}



/* =========================================================
TEXTOS
========================================================= */

p{

    margin-bottom:15px;
    color:var(--text-soft);
}



/* =========================================================
BOTÕES
========================================================= */

.btn{

    display:inline-block;

    padding:12px 22px;

    border:none;

    border-radius:8px;

    cursor:pointer;

    font-size:15px;
    font-weight:bold;

    transition:var(--transition);

    text-align:center;

    background:var(--gold);
    color:#000;
}

.btn:hover{

    background:var(--gold-hover);
}



/* =========================================================
BOTÃO SUCCESS
========================================================= */

.btn-success{

    background:var(--success);
    color:#fff;
}

.btn-success:hover{

    opacity:0.9;
}



/* =========================================================
BOTÃO DANGER
========================================================= */

.btn-danger{

    background:var(--danger);
    color:#fff;
}

.btn-danger:hover{

    opacity:0.9;
}



/* =========================================================
BOTÃO OUTLINE
========================================================= */

.btn-outline{

    background:transparent;

    border:1px solid var(--gold);

    color:var(--gold);
}

.btn-outline:hover{

    background:var(--gold);
    color:#000;
}



/* =========================================================
FORMULÁRIOS
========================================================= */

form{

    width:100%;
}



/* =========================================================
FORM ROW
========================================================= */

.form-row{

    display:flex;
    flex-wrap:wrap;

    margin-left:-10px;
    margin-right:-10px;
}



/* =========================================================
FORM GROUP
========================================================= */

.form-group{

    padding-left:10px;
    padding-right:10px;

    margin-bottom:20px;
}



/* =========================================================
LABELS
========================================================= */

.form-group label{

    display:block;

    margin-bottom:8px;

    font-size:14px;
    font-weight:bold;

    color:var(--gold);
}



/* =========================================================
INPUTS
========================================================= */

.form-control{

    width:100%;

    padding:13px;

    border:1px solid var(--border);

    border-radius:8px;

    background:var(--bg-secondary);

    color:var(--text);

    font-size:15px;

    transition:var(--transition);
}



/* =========================================================
FOCUS
========================================================= */

.form-control:focus{

    outline:none;

    border-color:var(--gold);

    box-shadow:0 0 0 3px rgba(200,169,107,0.2);
}



/* =========================================================
TEXTAREA
========================================================= */

textarea.form-control{

    min-height:120px;

    resize:vertical;
}



/* =========================================================
SELECT
========================================================= */

select.form-control{

    cursor:pointer;
}



/* =========================================================
CHECKBOX
========================================================= */

.checkbox-group{

    display:flex;

    align-items:center;

    gap:10px;

    padding-top:34px;
}

.checkbox-group input{

    width:auto;
}



/* =========================================================
COLUNAS
========================================================= */

.col-1{ width:8.333%; }
.col-2{ width:16.666%; }
.col-3{ width:25%; }
.col-4{ width:33.333%; }
.col-5{ width:41.666%; }
.col-6{ width:50%; }
.col-7{ width:58.333%; }
.col-8{ width:66.666%; }
.col-9{ width:75%; }
.col-10{ width:83.333%; }
.col-11{ width:91.666%; }
.col-12{ width:100%; }



/* =========================================================
TABLE RESPONSIVE
========================================================= */

.table-responsive{

    width:100%;

    overflow-x:auto;
}



/* =========================================================
GRID TABLE
========================================================= */

.grid-table{

    width:100%;

    border-collapse:collapse;

    min-width:700px;

    background:var(--bg-card);

    border:1px solid var(--border);

    border-radius:var(--radius);

    overflow:hidden;
}



/* =========================================================
GRID HEADER
========================================================= */

.grid-table th{

    background:#000;

    color:var(--gold);

    padding:11px 14px;

    text-align:left;

    font-size:14px;

    border-bottom:1px solid var(--border);
}



/* =========================================================
GRID TD
========================================================= */

.grid-table td{

    padding:10px 14px;

    border-bottom:1px solid var(--border);

    font-size:14px;

    line-height:1.3;

    color:var(--text-soft);
}



/* =========================================================
GRID HOVER
========================================================= */

.grid-table tr:hover{

    background:var(--bg-hover);
}



/* =========================================================
BADGES
========================================================= */

.badge{

    display:inline-block;

    padding:6px 12px;

    border-radius:20px;

    font-size:12px;

    font-weight:bold;
}



/* =========================================================
BADGE GOLD
========================================================= */

.badge-gold{

    background:rgba(200,169,107,0.15);

    color:var(--gold);
}



/* =========================================================
BADGE SUCCESS
========================================================= */

.badge-success{

    background:rgba(45,106,79,0.2);

    color:#7dffb0;
}



/* =========================================================
BADGE DANGER
========================================================= */

.badge-danger{

    background:rgba(169,68,66,0.2);

    color:#ff9d9b;
}



/* =========================================================
MENSAGENS
========================================================= */

.msg-sucesso{

    background:rgba(45,106,79,0.15);

    border:1px solid rgba(45,106,79,0.4);

    color:#8ff0b2;

    padding:15px;

    border-radius:8px;

    margin-bottom:20px;
}



.msg-erro{

    background:rgba(169,68,66,0.15);

    border:1px solid rgba(169,68,66,0.4);

    color:#ffb3b0;

    padding:15px;

    border-radius:8px;

    margin-bottom:20px;
}



/* =========================================================
UTILITÁRIOS
========================================================= */

.text-center{

    text-align:center;
}

.text-right{

    text-align:right;
}

.w-100{

    width:100%;
}



/* =========================================================
MARGENS
========================================================= */

.mt-1{ margin-top:5px; }
.mt-2{ margin-top:10px; }
.mt-3{ margin-top:15px; }
.mt-4{ margin-top:20px; }
.mt-5{ margin-top:30px; }

.mb-1{ margin-bottom:5px; }
.mb-2{ margin-bottom:10px; }
.mb-3{ margin-bottom:15px; }
.mb-4{ margin-bottom:20px; }
.mb-5{ margin-bottom:30px; }



/* =========================================================
RESPONSIVO TABLET
========================================================= */

@media(max-width:992px){

    .container{

        padding:20px;
    }

    .topo{

        font-size:24px;
    }
}



/* =========================================================
RESPONSIVO MOBILE
========================================================= */

@media(max-width:768px){

    .container{

        padding:15px;
    }

    .card{

        padding:18px;
    }

    .topo{

        padding:18px;

        font-size:22px;
    }

    .form-row{

        margin-left:0;
        margin-right:0;
    }

    .form-group{

        padding-left:0;
        padding-right:0;
    }

    .col-1,
    .col-2,
    .col-3,
    .col-4,
    .col-5,
    .col-6,
    .col-7,
    .col-8,
    .col-9,
    .col-10,
    .col-11,
    .col-12{

        width:100%;
    }

    .checkbox-group{

        padding-top:0;
    }

    .btn{

        width:100%;
    }

    .grid-table{

        min-width:600px;
    }
}



/* =========================================================
RESPONSIVO MOBILE PEQUENO
========================================================= */

@media(max-width:480px){

    .topo{

        font-size:20px;
    }

    .card{

        padding:15px;
    }

    .form-control{

        padding:11px;
    }
    
    
    
}

/* ==========================================
SELECT2
========================================== */

.select2-container{

    width:100% !important;
}

.select2-container--default .select2-selection--single{

    height:48px !important;

    background:#232323 !important;

    border:1px solid #333 !important;

    border-radius:8px !important;

    color:#f1f1f1 !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered{

    color:#f1f1f1 !important;

    line-height:46px !important;
}

.select2-dropdown{

    background:#232323 !important;

    border:1px solid #333 !important;
}

.select2-search__field{

    background:#1a1a1a !important;

    color:#f1f1f1 !important;

    border:1px solid #444 !important;
}

.select2-results__option{

    color:#f1f1f1 !important;
}

.select2-results__option--highlighted{

    background:#c8a96b !important;

    color:#000 !important;
}