/* 1. Standard syntax for Firefox and modern browsers */
* {
  scrollbar-width: thin; /* Options: auto, thin, none */
  scrollbar-color: var(--siteBg) var(--textMain); /* thumb color | track color */
}

/* 2. WebKit syntax for Chrome, Edge, and Safari */
/* The entire scrollbar width */
::-webkit-scrollbar {
  width: 12px;               /* Width of vertical scrollbar */
  height: 12px;              /* Height of horizontal scrollbar */
}

/* The background track */
::-webkit-scrollbar-track {
  background: var(--textMain);       /* Color of the track */
  border-radius: 10px;       /* Rounded corners for the track */
}

/* The draggable thumb handle */
::-webkit-scrollbar-thumb {
  background: var(--siteBg);       /* Color of the draggable thumb */
  border-radius: 10px;       /* Rounded corners for the thumb */
  border: 3px solid var(--textMain); /* Creates padding around the thumb */
}

/* Change thumb color on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555555;       /* Darker color when hovering */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.leaderboard-card::-webkit-scrollbar,
#carouselLeaderboard::-webkit-scrollbar {
  display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
#carouselLeaderboard {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}


.overlay {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
}

.modal-xxl {
    --bs-modal-width: 80%;
}


.table tr th{
    background-color: color-mix(in srgb,var(--wellBg),var(--siteBg) 50%);
    color: var(--textMain);
}

.table tr td{
    vertical-align: middle;
}
.table tr:nth-child(odd) td{
    background-color: color-mix(in srgb,var(--wellBg),var(--highlight) 90%);
}
.table tr:nth-child(even) td{
    background-color: color-mix(in srgb,var(--wellBg),var(--highlight) 50%);
}
.table thead tr{
    background-color: var(--wellBg);
}
.table thead tr th{
    border-top: unset;
    color: var(--textMain);
}

/* .table-image:hover{ */
    /* TODO */
    /* Make position absolute image thats bigger */
/* } */

.card-label{
    font-weight: bold;
    background-color: var(--siteBg);
    color: var(--textMain);
    box-shadow: 0px 0px 6px 0px;
    border-radius: 5px;
    width: fit-content;
    margin: 5px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 10px;
    padding-right: 10px;
    border: 2px solid var(--highlight);
    
}

.card-label:hover{
    cursor: pointer;
}
.siteBg{
    background-color: var(--siteBg);
}
.highlightBg{
    background-color: var(--highlight);
}
.wellBg{
    background-color: var(--wellBg);
}
.card-holder{
    border-radius: 14px;
}
.table-image{
    border-radius: 2px;
    height: 50px;
}
.modal{
    display: block !important;
}
.modal-title{
    color: var(--textMain);
}
.form-label{
    color: var(--textMain);
}
.leaderboard-count{
    font-size: 160px;
    margin-top: auto;
    margin-bottom: auto;
    color: var(--highlight);
}
.leaderboard-row {
    margin: 10px;
    border: 10px solid var(--highlight);
    border-radius: 20px;
    background-color: var(--wellBg);
}

.leaderboard-card{
    display:flex;
    align-items:center;
    gap:20px;
    background:var(--wellBg);
    border:6px solid var(--highlight);
    border-radius:24px;
    padding:18px;
    margin-bottom:20px;
    min-height:220px;
    height: 100%;
    box-shadow:0 8px 20px rgba(0,0,0,.25);
    min-width: 800px;
}

.leaderboard-rank{
    min-width:110px;

    font-size:4rem;
    font-weight:900;

    color:var(--highlight);

    text-align:center;
}

.leaderboard-image{
    position: relative;
}

.leaderboard-image>img{
    width:160px;
    height:auto;
    border-radius:16px;
    display:block;
    position: relative;
}
.leaderboard-image img.foiling{
    position: absolute;
    width: 50%;
    height: 40%;
    opacity: 100;
    top: -20px;
    right: -20px;
    animation-name: glowLogo;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
        filter: grayscale(100%);
}

.leaderboard-content{
    flex:1;

    display:flex;
    flex-direction:column;
    justify-content:center;

    gap:10px;
}

.leaderboard-name{
    color:var(--sideColor);

    font-size:2rem;
    font-weight:700;

    line-height:1.1;
}

.leaderboard-price{
    color:var(--textMain);

    font-size:3rem;
    font-weight:900;

    line-height:1;
}
.leaderboard-quantity { 
    display: inline-block; 
    font-size: 0.65em; 
    font-weight: bold; 
    margin-left: 8px; 
    padding: 3px 7px; 
    border-radius: 10px; 
    background: var(--textMain); 
    color: var(--siteBg); 
    vertical-align: middle; 
    
} 
.leaderboard-pulled-by { 
    font-size: 1.3em; 
    opacity: 0.8; 
    margin-top: 5px; 
    color: var(--highlight); 
    font-weight: 900; 
    
}

.leaderboard-meta{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.leaderboard-meta span{
    background:rgba(255,255,255,.15);

    color:var(--sideColor);

    padding:8px 14px;

    border-radius:999px;

    font-size:1rem;
    font-weight:600;
}
.leaderboard-name-display{
    display: none;
    max-width: calc(50vw - 160px);
}
.carousel-item.active:not(.carousel-item-start) .leaderboard-name-display{

    font-weight: bold;
    color: var(--textMain);
    font-size: 65px;
    border: 5px solid var(--highlight);
    /* line-height: 84px; */
    background: var(--wellBg);
    border-radius: 16px;
    padding: 5px 13px;
    position: fixed;
    top: 10px;
    right: 10px;
    animation-name: fadeIn;
    animation-duration: 3s;
    animation-iteration-count:1;
    display: block;
    max-width: calc(100vw - 300px);
    font-size: 4vw;
    white-space: nowrap;
    overflow: hidden;
    max-height: 300px;
}

.main_logo{
    animation-name: glowLogo;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    width: 300px;
    height: 300px;
}

#carouselLeaderboard{
    height: calc(100vh - 304px);
    overflow-y: scroll;
    /* animation-name: autoScrollVertical;
    animation-duration: 10s;
    animation-iteration-count: infinite; */
}

#heading{
    /* border-radius: 0 0 7px 7px; */
    border-bottom: 4px solid var(--wellBg);
    text-align: center;
}

.btn-action{
position:relative;
    background:var(--wellBg);
    color:var(--textMain) !important;
    border:none;
    border-radius:10px;
    font-weight:700;
    font-size:1rem;
    padding: 2px 15px;
    transition:.2s;
}
.btn-action:hover{
    background:var(--siteBg);
}


.btn-approval{
    position:relative;
    background:var(--textMain);
    color:var(--siteBg);
    border:none;
    border-radius:10px;
    font-weight:700;
    font-size:1rem;
    padding:12px 22px;
    transition:.2s;
}

.btn-approval:hover{
    background:var(--highlight);
    color:var(--siteBg);

    transform:translateY(-2px);
}

.notification-badge{
    position:absolute;

    top:-8px;
    right:-8px;

    min-width:24px;
    height:24px;

    padding:0 6px;

    border-radius:50%;

    background:#dc3545;
    color:#fff;

    font-size:.8rem;
    font-weight:700;

    display:flex;
    align-items:center;
    justify-content:center;

    border:2px solid var(--sideColor);
}
.qr_display{
    position: fixed;
    height: 200px;
    width: 200px;
    top: 50px;
    left: 50px;
}

.drag-handle {
    cursor: grab;
    font-size: 20px;
    width: 40px;
}

.drag-handle:active {
    cursor: grabbing;
}

#leaderboardSortable tr.ui-sortable-helper {
    opacity: 0.8;
}

#leaderboardSortable tr.ui-sortable-placeholder {
    height: 50px;
}

.store-settings-modal {
    background-color: var(--wellBg);
    color: var(--textMain);
    min-height: 60vh;
}

.store-color-settings {
    padding: 10px;
}

.color-setting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 15px 0;
    border-bottom: 1px solid var(--sideColor);
}

.color-setting label {
    display: block;
    margin-bottom: 3px;
    font-weight: 600;
    color: var(--textMain);
}

.color-setting small {
    display: block;
    color: var(--textMain);
    opacity: .65;
}

.color-input {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 180px;
}

.color-input input[type="color"] {
    width: 45px;
    height: 38px;
    padding: 3px;
    border: 1px solid var(--sideColor);
    border-radius: 6px;
    background: var(--wellBg);
    cursor: pointer;
}

.color-hex {
    width: 110px;
    background-color: var(--siteBg);
    color: var(--textMain);
    border-color: var(--sideColor);
}

.color-help {
    margin-top: 20px;
    padding: 12px;
    border-radius: 7px;
    background-color: var(--siteBg);
    color: var(--textMain);
    font-size: .85rem;
}

/* Preview */

.store-color-preview {
    height: 100%;
    min-height: 500px;
    overflow: hidden;
    border: 1px solid var(--sideColor);
    border-radius: 10px;
    background-color: var(--siteBg);
    color: var(--textMain);
}

.preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-bottom: 1px solid var(--sideColor);
    background-color: var(--wellBg);
}

.preview-logo {
    font-weight: 700;
    color: var(--textMain);
}

.preview-logo img {
    max-width: 100px;
    max-height: 40px;
    object-fit: contain;
}

.preview-nav {
    display: flex;
    gap: 18px;
    font-size: .8rem;
    color: var(--textMain);
}

.preview-nav span {
    padding: 5px 0;
}

.preview-nav-active {
    font-weight: 700;
    border-bottom: 2px solid var(--highlight);
}

.preview-content {
    padding: 20px;
}

.preview-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.preview-title h4 {
    margin: 0;
    color: var(--textMain);
}

.preview-title small {
    color: var(--textMain);
    opacity: .6;
}

.preview-button {
    padding: 8px 14px;
    border: 0;
    border-radius: 6px;
    background-color: var(--highlight);
    color: var(--textMain);
    font-weight: 600;
}

.preview-button-small {
    margin-top: 12px;
    font-size: .8rem;
}

.preview-well {
    padding: 16px;
    border: 1px solid var(--sideColor);
    border-radius: 8px;
    background-color: var(--wellBg);
}

.preview-well-title {
    margin-bottom: 12px;
    font-weight: 600;
    color: var(--textMain);
}

.preview-stat {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.preview-stat strong {
    font-size: 1.5rem;
    color: var(--highlight);
}

.preview-stat span {
    font-size: .8rem;
    color: var(--textMain);
    opacity: .7;
}

.preview-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--sideColor);
}

.preview-card-image {
    width: 40px;
    height: 55px;
    border-radius: 4px;
    background-color: var(--sideColor);
}

.preview-card-info {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.preview-card-info strong {
    color: var(--textMain);
}

.preview-card-info span {
    font-size: .75rem;
    color: var(--textMain);
    opacity: .65;
}

.preview-card-price {
    font-weight: 700;
    color: var(--highlight);
}
.store-settings-tabs {
    border-bottom: 1px solid var(--highlight);
    padding: 0 16px;
}

.store-settings-tabs .nav-link {
    color: var(--highlight);
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 12px 18px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.store-settings-tabs .nav-link:hover {
    color: var(--textMain);
}

.store-settings-tabs .nav-link.active {
    color: var(--textMain);
    background: var(--wellBg);
    border: none;
    border-bottom: 3px solid var(--highlight);
}

.store-settings-tabs .nav-link i {
    margin-right: 8px;
}

.store-settings-tab-content {
    background: var(--wellBg);
    color: var(--textMain);
}
.alert-box{
    border-radius: 10px;
    color: var(--textMain);
    background-color: var(--wellBg);
    padding: 5px 10px;
    font-weight: 900;
}
.card-display-container{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:40px;
    width:90%;
    max-width:1400px;
}

.card-display-side{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    flex:1;
    min-width:0;
}

.card-display-label{
    color:var(--textMain);
    background:var(--wellBg);
    border:2px solid var(--highlight);
    border-radius:8px;
    padding:8px 20px;
    margin-bottom:15px;
    font-weight:bold;
    text-align:center;
}

.card-display-image{
    max-width:100%;
    max-height:75vh;
    object-fit:contain;
    border-radius:8px;
}

.card-display-side .tilt-container{
    max-width:100%;
    max-height:75vh;
}


/* ---------------------------------------------------------
   Card Approval Modals
   --------------------------------------------------------- */

.pre-approval-modal,
.store-approval-modal {
    background-color: var(--wellBg);
    color: var(--textMain);
    border: 1px solid var(--sideColor);
    border-radius: 16px;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

.pre-approval-modal .modal-header,
.store-approval-modal .modal-header {
    border-bottom: 1px solid var(--sideColor);
    padding: 20px 24px;
}

.pre-approval-modal .modal-title,
.store-approval-modal .modal-title {
    font-weight: 700;
    color: var(--textMain);
    display: flex;
    align-items: center;
}

.pre-approval-modal .modal-title .badge,
.store-approval-modal .modal-title .badge {
    background-color: var(--highlight) !important;
    color: var(--siteBg) !important;
    font-weight: 600;
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 20px;
}

.pre-approval-modal .btn-close,
.store-approval-modal .btn-close {
    filter: invert(1) grayscale(1) opacity(0.7);
}

.pre-approval-modal .modal-body,
.store-approval-modal .modal-body {
    padding: 24px;
}


/* ---------------------------------------------------------
   Approval Card Images
--------------------------------------------------------- */

.pre-approval-image-wrap {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--sideColor);
    background-color: var(--siteBg);
}

.pre-approval-image,
#storeApprovalSubmittedImage,
#storeApprovalTcgImage {
    display: block;
    width: 100%;
    height: auto;
    max-height: 550px;
    object-fit: contain;
    border-radius: 12px;
    border: 1px solid var(--sideColor);
    background-color: var(--siteBg);
}


/* ---------------------------------------------------------
   Approval Tables
--------------------------------------------------------- */

.pre-approval-table,
.store-approval-table {
    background-color: var(--siteBg);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 16px;
}

.pre-approval-table th,
.store-approval-table th {
    color: var(--textMain);
    opacity: 0.65;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    border-color: var(--sideColor);
    width: 40%;
    vertical-align: middle;
}

.pre-approval-table td,
.store-approval-table td {
    color: var(--siteBg);
    font-weight: 500;
    border-color: var(--sideColor);
    vertical-align: middle;
}


/* ---------------------------------------------------------
   Approval Form Inputs
--------------------------------------------------------- */

.pre-approval-table input.form-control,
.pre-approval-table select.form-select {
    background-color: var(--wellBg);
    border: 1px solid var(--sideColor);
    color: var(--textMain);
}

.pre-approval-table input.form-control:focus,
.pre-approval-table select.form-select:focus {
    border-color: var(--highlight);
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.15);
}


/* ---------------------------------------------------------
   Section Labels
--------------------------------------------------------- */

.store-approval-modal p.text-muted {
    color: var(--textMain) !important;
    opacity: 0.55;
    letter-spacing: 0.06em;
    font-size: 12px;
    font-weight: 700;
}


/* ---------------------------------------------------------
   TCGPlayer ID / Form Labels
--------------------------------------------------------- */

.pre-approval-modal .form-label {
    color: var(--textMain);
    opacity: 0.75;
}


/* ---------------------------------------------------------
   Approval Buttons
--------------------------------------------------------- */

.pre-approval-modal .btn-primary,
.store-approval-modal .btn-primary,
#storeApproveBtn,
#approveSubmission {
    background-color: var(--highlight);
    border-color: var(--highlight);
    color: var(--siteBg);
    font-weight: 700;
}

.pre-approval-modal .btn-primary:hover,
.store-approval-modal .btn-primary:hover,
#storeApproveBtn:hover,
#approveSubmission:hover {
    filter: brightness(1.08);
}


/* ---------------------------------------------------------
   Reject Buttons
--------------------------------------------------------- */

.pre-approval-modal .btn-outline-danger,
.store-approval-modal .btn-outline-danger,
#storeRejectBtn,
#rejectSubmission {
    border-color: #E8637A;
    color: #E8637A;
    background: transparent;
    font-weight: 600;
}

.pre-approval-modal .btn-outline-danger:hover,
.store-approval-modal .btn-outline-danger:hover,
#storeRejectBtn:hover,
#rejectSubmission:hover {
    background-color: rgba(232, 99, 122, 0.12);
}


/* ---------------------------------------------------------
   Secondary / Look At Later Buttons
--------------------------------------------------------- */

.pre-approval-modal .btn-outline-secondary,
#lookAtLaterBtn {
    border-color: var(--sideColor);
    color: var(--textMain);
    opacity: 0.8;
    background: transparent;
}

.pre-approval-modal .btn-outline-secondary:hover,
#lookAtLaterBtn:hover {
    background-color: var(--siteBg);
    opacity: 1;
}


/* ---------------------------------------------------------
   Error Box
--------------------------------------------------------- */

.pre-approval-modal .alert-danger,
.store-approval-modal .alert-danger {
    background-color: rgba(232, 99, 122, 0.12);
    border: 1px solid rgba(232, 99, 122, 0.35);
    color: #E8637A;
    border-radius: 10px;
}


/* ---------------------------------------------------------
   Empty State
--------------------------------------------------------- */

#preApprovalEmptyState,
#storeApprovalEmptyState {
    color: var(--textMain);
    opacity: 0.6;
}


/* ---------------------------------------------------------
   Store Approval Copy Count
--------------------------------------------------------- */

#storeApprovalCopyCount {
    font-weight: 700;
    color: var(--highlight);
}

@keyframes glowLogo {
  0% { 
        filter: drop-shadow(0px 0px 165px var(--textMain));
   }
  33% { 
        filter: drop-shadow(0px 0px 30px var(--textMain));
   }
  66% { 
        filter: drop-shadow(0px 0px 117px var(--textMain));
   }
   100%{
        filter: drop-shadow(0px 0px 165px var(--textMain));
   }
}

@keyframes fadeIn {
  0% { 
        opacity: 0%;
   }
  100% { 
        opacity: 100%;
   }
}

@keyframes autoScrollVertical {
  0% {
    transform: translateY(100%); /* Start completely below the frame */
  }
  100% {
    transform: translateY(-100%); /* End completely above the frame */
  }
}


@media screen and (min-width: 1500px) {
  .carousel-item.active:not(.carousel-item-start) .leaderboard-name-display{
    max-width: calc(50vw - 160px);
    font-size: 4vw;
    }
}
@media (min-width: 1900px) {
    .col-12.leaderboard-card-col {
        flex: 0 0 auto;
        width: 50%;
    }
}