/* ==========================================================
   PROJECT : QatarLotto V2
   FILE    : history.css
   VERSION : FINAL
==========================================================*/

.history-section{

    padding:0 30px 30px;

}

.history-card{

    background:linear-gradient(
        180deg,
        #182233 0%,
        #111827 100%
    );

    border:1px solid rgba(255,215,90,.08);

    border-radius:24px;

    padding:34px;

    box-shadow:
        0 20px 50px rgba(0,0,0,.35);

}

/* ========================================= */

.history-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:25px;

}

.history-badge{

    display:inline-block;

    background:#8A1538;

    color:#FFF;

    padding:8px 16px;

    border-radius:50px;

    font-size:12px;

    font-weight:600;

    letter-spacing:.5px;

}

.history-header h2{

    margin-top:16px;

    color:#FFF;

    font-size:36px;

    font-weight:800;

}

.history-search{

    width:320px;

}

.history-search input{

    width:100%;

    height:52px;

    background:#101826;

    color:#FFF;

    border:1px solid rgba(255,255,255,.08);
    transition:.25s;
    border-radius:16px;

    padding:0 18px;

    outline:none;

    transition:.25s;

}

.history-search input:focus{

    border-color:#FFD54F;

    box-shadow:
        0 0 0 4px rgba(255,213,79,.10);

}

/* ========================================= */

.history-table-wrapper{

    overflow-x:auto;

}

.history-table{

    width:100%;

    border-collapse:collapse;

}

.history-table thead{

    background:#101826;

}

.history-table th{

    color:#D8E0EE;

    padding:18px;

    text-align:left;

    font-size:14px;

    font-weight:600;
    
    text-transform:uppercase;

letter-spacing:1px;

}



.history-table td{

    padding:18px;

    color:#D7DFED;

    border-bottom:1px solid rgba(255,255,255,.05);

}

.history-table tbody tr{

    transition:.25s;

}

.history-table tbody tr:hover{

    background:#1A2435;

}

/* ========================================= */

.pagination{

    display:flex;

    justify-content:flex-end;

    gap:10px;

    margin-top:25px;

}

.pagination button{

    width:42px;

    height:42px;

    border:none;

    border-radius:14px;

    background:#111827;

    color:#FFF;

    cursor:pointer;

    transition:.25s;

    border:1px solid rgba(255,255,255,.05);

}

.pagination button:hover{

    background:#FFD54F;

    color:#111;

    border-color:#FFD54F;

}

/* ========================================= */

@media(max-width:992px){

.history-header{

flex-direction:column;

align-items:flex-start;

}

.history-search{

width:100%;

}

}

@media(max-width:768px){

.history-section{

padding:20px;

}

.history-card{

padding:22px;

}

.history-header h2{

font-size:26px;

}

.history-table th,
.history-table td{

padding:14px;

font-size:13px;

}

.pagination{

justify-content:center;

}

}