
html[data-bs-theme="light"] {
    --common-card-row-color: #f8f9fa;
    --rare-card-row-color: #cfe2ff;
    --unique-card-row-color: #f8d7da;
}
html[data-bs-theme="dark"] {
    --common-card-row-color: #e2e3e5;
    --rare-card-row-color: #a3c7ff;
    --unique-card-row-color: #ffafb6;
}

.sticky-column {
    position: sticky;
    top: 70px;
}

@media (max-width: 576px) {
    /* Disable sticky behavior on small screens */
    .sticky-column {
        position: static;
    }
}


#card-showcase {
    max-height: 500px;
    box-shadow: 0 0 12px var(--deck-display-shadow);
}
.sticky-container {
    position: sticky;
    top: 70px;
}

#deck-qr-code{
    width: 200px;
    height: 200px;
    margin: auto;
    background-color: #fff;
}

span.bio {
    font-weight: bold;
    /* color: #333; */
    background-color: var(--bs-info-bg-subtle); 
    display: block;
    text-align: left;
    margin-top: 0.25rem;
    max-width: 160px;
}

/* CARD TABLE */
.card-table tr span.hand-mana {
    color: #5095c9;
}

.card-table tr[data-faction="AX"] span.reserve-mana {
    color: var(--AX-color);
}

.card-table tr[data-faction="BR"] span.reserve-mana {
    color: #b24848;
}

.card-table tr[data-faction="LY"] span.reserve-mana {
    color: var(--LY-color);
}

.card-table tr[data-faction="MU"] span.reserve-mana {
    color: var(--MU-color);
}

.card-table tr[data-faction="OR"] span.reserve-mana {
    color: var(--OR-color);
}

.card-table tr[data-faction="YZ"] span.reserve-mana {
    color: var(--YZ-color);
}

.card-table tr[data-rarity="common"] {
    --bs-table-bg: var(--common-card-row-color);
}

.card-table tr[data-rarity="rare"] {
    --bs-table-bg: var(--rare-card-row-color);
}

.card-table tr[data-rarity="unique"] {
    --bs-table-bg: var(--unique-card-row-color);
}

/* COMMENTS */
#comments form {
	margin-bottom:30px;
}

#comments .btn {
	margin-top:7px;
}

#comments form fieldset {
	clear:both;
}

#comments form textarea {
	height:100px;
}

#comments .media {
	border-top:1px dashed #DDDDDD;
	padding:20px 0;
	margin:0;
}

#comments .media > .float-start {
    margin-right:20px;
}

#comments .media img {
	max-width:100px;
}

#comments .media h4 {
	margin:0 0 10px;
}

#comments .media h4 span {
	font-size:14px;
	float:right;
	color:#999999;
}

#comments .media p {
	margin-bottom:15px;
	text-align:justify;
}

#comments .media-detail {
	margin:0;
}

#comments .media-detail li {
	font-size:12px;
	padding-right: 10px;
	font-weight:600;
}

#comments .media-detail a:hover {
	text-decoration:underline;
}

#comments .media-detail li:last-child {
	padding-right:0;
}

#comments .media-detail li i {
	font-size:15px;
	margin-right:10px;
}

.offcanvas-btn {
    right: 100%;
    bottom: 50%;
    visibility: visible;
}

.offcanvas-btn.animate {
    animation: 1s ease-out 0s 1 slideInFromLeft;
}

@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}

/* DISPLAY SELECTOR */
.display-selector {
    border-color: var(--cta-bg-active-color);
    border-radius: var(--default-border-radius);
    transition: 0.1s;
}

.display-selector:first-child:hover {
    clip-path: inset(-12px 0 -12px -12px);
}
.display-selector:not(:first-child):not(:last-child):hover {
    clip-path: inset(-12px 0 -12px 0);
}
.display-selector:last-child:hover {
    clip-path: inset(-12px -12px -12px 0);
}

.display-selector:hover {
    box-shadow: 0 0 12px var(--cta-bg-active-color);
    border-color: var(--cta-bg-active-color);
}

.display-selector:active:focus {
    border-color: var(--cta-bg-active-color);
}

.display-selector.selected {
    background-color: var(--cta-bg-active-color);
    color: var(--cta-active-color);
}

.display-selector:not(.selected) {
    color: var(--cta-inactive-color);
}

.row-button {
    border-color: var(--btn-color);
    background-color: transparent !important;
}