body{
    background-color: #11141A;
}

/* WELCOME TEXT */
/* Mobile */
@media (max-width: 750px) {
    .welcomeh1{
        color: #E4E8EF;
        margin-bottom: 0px;
        user-select: none;
        -moz-user-select: none;
        -webkit-user-drag: none;
        text-align: center;
    }
    .welcomeh3{
        color: #A5ACB9;
        font-family: poppins;
        margin-top: 12.5px;
        user-select: none;
        -moz-user-select: none;
        -webkit-user-drag: none;
        text-align: center;
        font-size: 15px;
    }
    .description-p{
        color: #A5ACB9;
    }
    .description-h2{
        color: #E4E8EF;
    }
}
/* Computer */
@media (min-width: 751px) {
    .welcomeh1{
        color: #E4E8EF;
        padding-left: 15px;
        margin-bottom: 0px;
        user-select: none;
        -moz-user-select: none;
        -webkit-user-drag: none;
    }
    .welcomeh3{
        color: #A5ACB9;
        padding-left: 15px;
        font-family: poppins;
        margin-top: 12.5px;
        user-select: none;
        -moz-user-select: none;
        -webkit-user-drag: none;
    }
    .description-p{
        color: #A5ACB9;
        padding-left: 15px;
    }
    .description-h2{
        color: #E4E8EF;
        padding-left: 15px;
    }
}

/* SERVICE ANNOUNCEMENT */
.service-announcement_container{
    padding: 25px;
    background-color: #0B0E12;
    align-items: center;
    justify-content: center;
    display: flex;
    width: 100%;
}
#service-announcement{
    margin-left: 20px;
    font-size: 18px;
    font-weight: bold;
    font-family: "titles", sans-serif;
    color: white;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
}

a{
    text-decoration: none;
}

:root {
    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --primary-light: #eff6ff;

    --background: #f8fafc;
    --surface: #ffffff;
    --border: #e2e8f0;

    --text: #0f172a;
    --text-secondary: #64748b;

    --success: #16a34a;
    --success-bg: #f0fdf4;

    --warning: #d97706;
    --warning-bg: #fffbeb;

    --danger: #dc2626;
    --danger-bg: #fef2f2;
}


/* ==============================
   Container
   ============================== */

#activeDeposits {
    width: 100%;
    max-width: 1200px;
    margin: 30px auto;
    padding: 0 20px;
    box-sizing: border-box;
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        sans-serif;
    color: var(--text);
}


/* ==============================
   Table wrapper
   ============================== */

.active-deposits-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow:
        0 4px 6px -1px rgba(15, 23, 42, 0.05),
        0 2px 4px -2px rgba(15, 23, 42, 0.05);
}


/* ==============================
   Header
   ============================== */

.active-deposits-table thead {
    background: linear-gradient(
        135deg,
        #2563eb,
        #1d4ed8
    );
}

.active-deposits-table th {
    padding: 15px 18px;
    text-align: left;
    color: white;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.025em;
    white-space: nowrap;
}


/* ==============================
   Rows
   ============================== */

.active-deposits-table tbody tr {
    transition:
        background-color 0.15s ease,
        box-shadow 0.15s ease;
}

.active-deposits-table tbody tr:hover {
    background: var(--primary-light);
}

.active-deposits-table tbody tr:not(:last-child) td {
    border-bottom: 1px solid var(--border);
}


/* ==============================
   Cells
   ============================== */

.active-deposits-table td {
    padding: 16px 18px;
    font-size: 14px;
    vertical-align: middle;
}


/* Transaction ID */

.active-deposits-table td:first-child {
    color: var(--primary);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 13px;
    font-weight: 600;
}


/* Amount */

.active-deposits-table td:nth-child(3) {
    font-weight: 600;
    white-space: nowrap;
}


/* PayPal email */

.active-deposits-table td:nth-child(4) {
    color: var(--text-secondary);
}


/* Date */

.active-deposits-table td:nth-child(5) {
    color: var(--text-secondary);
    white-space: nowrap;
}


/* ==============================
   Status
   ============================== */

.active-deposits-table td:nth-child(2) {
    font-weight: 600;
}


/* Created */

.active-deposits-table tbody tr:has(
    td:nth-child(2)
) td:nth-child(2) {
    color: var(--primary);
}


/* ==============================
   View button
   ============================== */

.active-deposits-table td:last-child {
    text-align: right;
}

.active-deposits-table td:last-child a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 8px 14px;

    background: var(--primary);
    color: white;

    border-radius: 8px;

    font-size: 13px;
    font-weight: 600;
    text-decoration: none;

    transition:
        background-color 0.15s ease,
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

.active-deposits-table td:last-child a:hover {
    background: var(--primary-hover);

    transform: translateY(-1px);

    box-shadow:
        0 4px 8px rgba(37, 99, 235, 0.25);
}

.active-deposits-table td:last-child a:active {
    transform: translateY(0);
}


/* ==============================
   Empty state
   ============================== */

#activeDeposits > p {
    margin: 40px auto;
    padding: 40px;

    max-width: 500px;

    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;

    color: var(--text-secondary);

    text-align: center;
    font-size: 15px;

    box-shadow:
        0 4px 6px -1px rgba(15, 23, 42, 0.05);
}


/* ==============================
   Mobile
   ============================== */

@media (max-width: 800px) {

    #activeDeposits {
        padding: 0 12px;
        margin: 20px auto;
    }

    .active-deposits-table {
        border-radius: 12px;
    }

    .active-deposits-table thead {
        display: none;
    }

    .active-deposits-table,
    .active-deposits-table tbody,
    .active-deposits-table tr,
    .active-deposits-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .active-deposits-table tr {
        padding: 18px;
        border-bottom: 1px solid var(--border);
    }

    .active-deposits-table tr:last-child {
        border-bottom: none;
    }

    .active-deposits-table td {
        padding: 7px 0;
        border: none !important;
        text-align: left !important;
    }

    .active-deposits-table td::before {
        display: block;
        margin-bottom: 3px;

        color: var(--text-secondary);

        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .active-deposits-table td:nth-child(1)::before {
        content: "ID";
    }

    .active-deposits-table td:nth-child(2)::before {
        content: "Status";
    }

    .active-deposits-table td:nth-child(3)::before {
        content: "Amount";
    }

    .active-deposits-table td:nth-child(4)::before {
        content: "PayPal Email";
    }

    .active-deposits-table td:nth-child(5)::before {
        content: "Date";
    }

    .active-deposits-table td:nth-child(6)::before {
        content: "Action";
    }

    .active-deposits-table td:last-child {
        margin-top: 8px;
    }

    .active-deposits-table td:last-child a {
        width: 100%;
        box-sizing: border-box;
    }
}

.button{
    border: 1px solid rgb(21, 87, 145);
    color: white;
    text-decoration: none;
    background-color: rgb(21, 87, 145);
    padding: 15px 50px;
    font-size: 25px;
    border-radius: 10px;
    font-family: "titles", sans-serif;
    margin-left: 15px;
}