:root {
    /* Dark blue used for dark themes or font color */
    --color-1: #073b4c;
    /* Red */
    --color-2: #ef476f;
    /* Green */
    --color-3: #06d6a0;
    /* Yellow */
    --color-4: #ffd166;
    /* Blue */
    --color-5: #118ab2;
}

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");

body {
    font-family: "Poppins", sans-serif;
    background-color: #F8FAFD;
    min-height: 100vh;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.form-design {
    padding: 5px;
    background-color: rgba(255,255,255,1);
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(7,59,76,0.1);
}

/* Ensures the navbar logo scales properly */
.navbar-logo {
    height: 40px;
    width: auto;
}

@media (max-width: 767.98px) {
    .navbar-logo {
        height: 30px;
    }
}

/* Background style for auth pages */
.auth-bg {
    background: url('background.jpg') no-repeat center center fixed;
    background-size: cover;
    min-height: 100vh;
    background-color: #E7F2F8;
}

/* Ensure navbar and its dropdowns appear above sticky elements */
.navbar {
    z-index: 1030;
    position: sticky;
    top: 0;
}

/* Width adjustments for patungan table */
.game-column {
    width: 10ch;
    white-space: nowrap;
}


.price-column {
    width: 8ch;
    white-space: nowrap;
}

/* Prevent table header and cell text wrapping */
.table-nowrap th,
.table-nowrap td {
    white-space: nowrap;
}

/* Banner image on patungan page */
.patungan-banner {
    max-width: 300px;
}

.card-custom {
    display: flex;
    flex-direction: row;
    overflow: hidden;
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(7,59,76,0.1);
	width: 100%;
}

.card-img-gradient {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100px;
    background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
    z-index: 1;
}

.card-body {
    border: none !important;
/*     box-shadow: 0 4px 12px rgba(7,59,76,0.1) !important; */
	shadow: none !important;
}

.card-body-custom {
    width: 50%;
    background-color: rgba(255,255,255,1);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Allow wrapping in stacked columns */
.table-nowrap th.stack-column,
.table-nowrap td.stack-column {
    white-space: normal;
    word-break: break-word;
}
.stack-column div {
    line-height: 1.2;
}

/* Soft Bootstrap color overrides */
.btn-primary,
.bg-primary {
    background-color: var(--color-5) !important;
    border-color: var(--color-5) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--color-4) !important;
    border-color: var(--color-4) !important;
}

.btn-secondary,
.bg-secondary {
    background-color: var(--color-1) !important;
    border-color: var(--color-1) !important;
}

.btn-success,
.bg-success {
    background-color: var(--color-3) !important;
    border-color: var(--color-3) !important;
}

.btn-danger,
.bg-danger {
    background-color: var(--color-2) !important;
    border-color: var(--color-2) !important;
}

.btn-warning,
.bg-warning {
    background-color: var(--color-4) !important;
    border-color: var(--color-4) !important;
    color: var(--color-1) !important;
.btn-info,
.bg-info {
    background-color: var(--color-2) !important;
    border-color: var(--color-2) !important;
}

.btn-dark,
.bg-dark {
    background-color: var(--color-1) !important;
    border-color: var(--color-1) !important;
}


/* Remove borders and apply shadow-sm to all cards */
.card {
    border: none !important;
    box-shadow: 0 .125rem .25rem rgba(7,59,76,0.075) !important;
}

/* Ensure card headers and footers also have no borders */
.card-header,
.card-footer {
    border: none !important;
}

/* Larger payment confirmation image on small screens */
.game-image {
    width: 30%;
}

@media (max-width: 767.98px) {
    .game-image {
        width: 70%;
    }
}

.bg-purple {
    background-color: #6f42c1 !important;
    color: #fff !important;
}

/* Ensure cards never show a border even when Bootstrap border classes are used */
.card.border,
.card[class*="border-"] {
    border: none !important;
}

.card-body.border,
.card-body[class*="border-"] {
    border: none !important;
}

/* Login and register pages */
.login-container {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-form {
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
    padding: 30px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(205,180,219,0.1);
}

/* Home page cards and carousel */
.card-title {
    font-size: 1rem;
}

.card-text {
    font-size: 0.9rem;
}

.carousel-item {
    height: 200px;
    background-size: cover;
    background-position: center;
}

/* Admin and reseller tables */
.users-table-container,
.item-table-container {
    overflow-x: auto;
}

.users-table thead th,
.users-table tbody td,
.item-table thead th,
.item-table tbody td {
    white-space: nowrap;
}


/* Reseller success animation */
.success-animation {
    margin: 150px auto;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2000;
}

.checkmark {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #ffafcc;
    stroke-miterlimit: 10;
    box-shadow: inset 0px 0px 0px #ffafcc;
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
    position: relative;
    top: 5px;
    right: 5px;
    margin: 0 auto;
}

.checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #ffafcc;
    fill: #bde0fe;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes scale {
    0%, 100% {
        transform: none;
    }
    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}

@keyframes fill {
    100% {
        box-shadow: inset 0px 0px 0px 30px #ffafcc;
    }
}

/* Patungan page icon */
.icon-large {
    font-size: 3rem;
    color: var(--color-5);
}

hr {
	opacity: 7% !important;
}