.item-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: none;
    perspective: 180cqw;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.item-modal.active {
    display: flex;
    opacity: 1;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
}

.modal-content {
    background: linear-gradient(0deg, light-dark(transparent, #000000e6), transparent);
    padding: 30px;
    min-height: 500px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    @supports (corner-shape: squircle) {
        corner-shape: squircle;
        border-radius: 65px;
    }
}

.modal-content canvas {
    filter: drop-shadow(0px 4px 11px #00000040);
}


body:has(.item-modal.active) {
    overflow: hidden;
}

.modal-container {
    overflow: visible;
    position: relative;
    margin: auto;
    background: #2a2a2a;
    border-radius: 20px;
    max-width: 368px;
    width: 90%;
    outline: 6px solid #ffffff;
    max-height: 90vh;
    min-height: 500px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), inset 0px 0px 0px 11px #00000047;
    transition: all 0.3s ease, transform 0.6s ease-in-out;
    transform-style: preserve-3d;

    @supports (corner-shape: squircle) {
        corner-shape: squircle;
        border-radius: 65px;
    }
}

.modal-container:has(.flipped) {
    transform: rotateY(180deg);
}


.modal-container.transitioning {
    transform: scale(0.95);
    opacity: 0.8;
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.modal-close:hover {
    opacity: 1;
}






.modal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: var(--bg-item);
    border: 2px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

.modal-nav:hover {
    background: var(--border-color);
    transform: translateY(-50%) scale(1.1);
}

.modal-nav:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.modal-nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.modal-prev {
    left: 7vw;
}

.modal-next {
    right: 7vw;
}


.modal-nav::after {
    content: '';
    width: 12px;
    height: 12px;
    border-right: 3px solid CanvasText;
    border-bottom: 3px solid CanvasText;
}

.modal-prev::after {
    transform: rotate(135deg);
    margin-left: 7px;
}

.modal-next::after {
    transform: rotate(-45deg);
    margin-right: 4px;
}

.modal-header {
    width: -webkit-fill-available;
    display: inline-flex;
    align-items: flex-start;
    height: auto;
        max-height: 82px;
    min-height: 60px;
}

.modal-title-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.modal-title {
    font-weight: bold;
    overflow-wrap: anywhere;
    color: white;
    margin: 0;
    z-index: 2;
    flex: 1;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.modal-alias {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;
    margin-top: 4px;
    margin-bottom: 0;
    font-weight: 400;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.modal-price {
    display: flex;
    align-items: center;
    white-space: nowrap;
    font-weight: bold;
    flex-basis: min-content;
    flex-wrap: wrap;
    color: white;
    flex-direction: row-reverse;
    line-height: 1;
    background: #00000038;
    padding: 6px 9px 6px 12px;
    margin-left: 7px;
    border-radius: 17px;
}

.modal-price h2 {
    font-family: 'BuilderSans';
    font-weight: 1000;
    translate: 0px -2px;
}

.modal-price h2::before {
    content: '';
    background: url(data:image/svg+xml,%3Csvg%20style%3D%22width%3A%2013px%3B%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016.6%2018%22%3E%3Cpath%20d%3D%22M6.251%206.993v3.999h4.025V6.99Zm-.156-4.689c1.917-1.213%202.507-1.154%204.484.034l3.37%202.027c.648.43%201.255.949%201.157%202.077v4.444c.009%201.578-.127%202.032-1.065%202.656l-3.492%202.052c-2.118%201.195-2.219%201.353-4.55.001l-3.28-1.913c-.886-.562-1.373-1.115-1.315-2.45V6.733c-.025-1.63.458-1.874%201.242-2.405Zm.395%201.298c1.287-.804%201.855-1.088%203.612.034l2.777%201.641c.568.423.954.838.96%201.652v3.952c-.007.705-.271%201.405-.9%201.77l-2.813%201.684c-1.786.942-1.799%201.004-3.127.287l-3.22-1.835c-.658-.474-1.038-.651-1.006-2.009V7.131c.005-1.044.193-1.432.991-1.952ZM5.605.944C7.71-.331%208.871-.345%2011.011.985l4.062%202.444c.646.363%201.512%201.515%201.528%202.588v5.847c.003%201.055-.645%202.014-1.424%202.63l-4.178%202.501c-1.843%201.087-3.052%201.56-5.486.002l-3.928-2.348C.71%2014.043-.006%2013.267%200%2011.695V6.272c.033-1.551.668-2.233%201.498-2.899Z%22%20fill%3D%22%23fff%22%20fill-rule%3D%22evenodd%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E) no-repeat center center;
    display: inline-block;
    width: 25px;
    height: 25px;
    translate: -3px 4px;
    background-size: contain;
}

/* Modal Tax Indicator */
.modal-tax-indicator {
    border-radius: 6px;
    color: #ffd700;
    font-weight: 600;
    margin-right: -3px;
    padding: 4px 4px;
    cursor: pointer;
    margin-top: -4px;
    font-size: 13px;
    position: relative;
    transition: all 0.2s;
}


.modal-tax-indicator:hover {
    background: rgba(255, 208, 0, 0.25);
    border-color: rgba(255, 208, 0, 0.5);
}

.modal-quantity {
    font-family: 'Nothing You Could Do';
    font-size: 37px;
    font-weight: bold;
    color: #ffffff;
    line-height: 45px;
    height: 0px;
    filter: opacity(0.5);
    z-index: 10;
    pointer-events: none;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

.tax-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) scale(0.95);
    background: rgba(0, 0, 0, 0.95);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: all 0.2s;
    z-index: 1000;
    border: 1px solid rgba(255, 208, 0, 0.3);
    font-style: italic;
}

.tax-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.95);
}

.modal-tax-indicator.show-tooltip .tax-tooltip {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

/* Demand Rating Styles */
.modal-demand {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 1px;
    gap: 2px;
}

.modal-demand::before {
    content: '';
    height: 18px;
    background: linear-gradient(#00000029, #00000052);
    display: none;
    color: white;
    font-size: 12px;
    font-weight: 600;
    position: absolute;
    text-align: center;
    border-radius: 14px;
    translate: 0% 54%;
    transition: all 0.2s allow-discrete;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    padding: 6px 11px 0px;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;

    @supports (corner-shape: squircle) {
        corner-shape: squircle;
        border-radius: 65px;
    }
}

.modal-demand:hover::before {
    display: block;
    translate: 0% 116%;
    opacity: 1;

    @starting-style {
        opacity: 0;
        translate: 0% 54%;
    }
}

.modal-demand.bad-demand::before {
    content: 'Bad Demand';
}

.modal-demand.okay-demand::before {
    content: 'Okay Demand';
}

.modal-demand.good-demand::before {
    content: 'Good Demand';
}

.modal-demand.great-demand::before {
    content: 'Great Demand';
}

.modal-demand.amazing-demand::before {
    content: 'Amazing Demand';
}

/* Demand info on back side */
.modal-demand-info {
    width: 100%;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    margin-bottom: 16px;
}

.demand-label-container {
    display: flex;
    align-items: center;
    gap: 12px;
    color: white;
    font-size: 14px;
}

.demand-label-container strong {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
}

.demand-text-label {
    font-weight: 800;
    font-size: 16px;
    padding: 4px 12px;
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 140, 0, 0.2));
    border: 1px solid rgba(255, 215, 0, 0.3);
}

/* Color variations for demand text */
.modal-demand-info:has(.demand-text-label:contains("Amazing")) .demand-text-label {
    background: linear-gradient(135deg, rgba(50, 205, 50, 0.3), rgba(34, 139, 34, 0.2));
    border-color: rgba(50, 205, 50, 0.4);
    color: #90EE90;
}

.modal-demand-info:has(.demand-text-label:contains("Great")) .demand-text-label {
    background: linear-gradient(135deg, rgba(135, 206, 250, 0.3), rgba(70, 130, 180, 0.2));
    border-color: rgba(135, 206, 250, 0.4);
    color: #ADD8E6;
}

.modal-demand-info:has(.demand-text-label:contains("Good")) .demand-text-label {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(255, 165, 0, 0.2));
    border-color: rgba(255, 215, 0, 0.4);
    color: #FFD700;
}

.modal-demand-info:has(.demand-text-label:contains("Okay")) .demand-text-label {
    background: linear-gradient(135deg, rgba(255, 165, 0, 0.3), rgba(255, 140, 0, 0.2));
    border-color: rgba(255, 165, 0, 0.4);
    color: #FFA500;
}

.modal-demand-info:has(.demand-text-label:contains("Bad")) .demand-text-label {
    background: linear-gradient(135deg, rgba(255, 99, 71, 0.3), rgba(220, 20, 60, 0.2));
    border-color: rgba(255, 99, 71, 0.4);
    color: #FF6347;
}

.modal-demand-info:has(.demand-text-label:contains("Terrible")) .demand-text-label {
    background: linear-gradient(135deg, rgba(178, 34, 34, 0.3), rgba(139, 0, 0, 0.2));
    border-color: rgba(178, 34, 34, 0.4);
    color: #CD5C5C;
}

.modal-image {
        transition: scale 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    width: 153px;
    height: 153px;
}

.modal-description {
    text-align: center;
    margin: 12px 0;
    white-space: pre-wrap;
    background: -webkit-linear-gradient(#00000042, #0000005e);
    height: fit-content;
    color: #fff;
    padding: 4px 8px;
    border-radius: 5px;
}


.modal-details {
    margin: 12px 0;
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.modal-details:empty {
    display: none;
}

.detail-item {
    background: rgb(0 0 0 / 30%);
    padding: 4px 10px;
    border-radius: 8px;
    color: white;
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Detail Link Button */
.detail-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: linear-gradient(180deg, #4a9eff 0%, #667eea 100%);
    border: 2px solid #4a9eff;
    border-radius: 10px;
    color: white;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
    box-shadow:
        0 4px 15px rgba(74, 158, 255, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.5px;

    @supports (corner-shape: squircle) {
        corner-shape: squircle;
        border-radius: 65px;
    }
}

.detail-link-btn:hover {
    background: linear-gradient(180deg, #5ba8ff 0%, #7688eb 100%);
    transform: translateY(-2px);
    box-shadow:
        0 8px 25px rgba(74, 158, 255, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.detail-link-btn:active {
    transform: translateY(0);
    box-shadow:
        0 4px 15px rgba(74, 158, 255, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.detail-link-btn svg {
    transition: transform 0.2s;
}

.detail-link-btn:hover svg {
    transform: translateX(2px) translateY(-2px);
}

.modal-content svg {
    display: unset;
    filter: drop-shadow(0px 4px 11px #00000040);
    width: 85%;
    height: auto;
    overflow: visible;
}

.demand-stars {
    display: flex;
    align-items: center;
}

.demand-star {
    width: 18px !important;
    height: 18px !important;
    color: #ffd700 !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) !important;
    transition: all 0.2s !important;
}

.demand-star.empty {
    color: #404040;
    opacity: 0.5;
}

.detail-icon {
    height: 20px;
}

.modal-badges {
    display: flex;
    gap: 10px;
    font-variant: all-petite-caps;
    justify-content: space-around;
    width: -webkit-fill-available;
}


.modal-container:has(.modal-flip-btn:not(.hidden)) .modal-content-wrapper .modal-front .modal-badges {
    width: 50%;
    align-self: flex-start;
}



.modal-badges span {
    padding: 4px 13px;
    flex: 1 1 10%;
    border-radius: 20px;
    border: 1px solid black;
    font-weight: bold;
}

.badge-premium {
    background: linear-gradient(90deg, #ffd700, #ffed4e 70%);
    color: #333;
}

.badge-retired {
    background: linear-gradient(90deg, #ff3c3c, #9f0000 70%);
    color: white;
}

.badge-untradable {
    background: linear-gradient(90deg, #666, #333 70%);
    color: white;
}

.badge-typicalgroup {
    background: linear-gradient(90deg, #21aeff, #4093ff 70%);
    color: white;
}

.badge-removed {
    background: linear-gradient(90deg, #000000, #000000 70%);
    color: white;
}

/* Modal Content Wrapper for Flipping */
.modal-content-wrapper {
    position: relative;
    width: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s;
}


.modal-front,
.modal-back {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: opacity 0.3s;
}

.modal-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotateY(180deg);
    overflow-y: auto;
    padding: 20px;
    opacity: 0;
    align-content: stretch;
}

.modal-front {
    position: relative;
    opacity: 1;
}

.flipped .modal-back {
    opacity: 1;
}

.flipped .modal-front {
    opacity: 0;
}

/* Flip Button */
.modal-flip-btn {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: transparent;
    color: #ffffffad;
    border: none;
    padding: 9px 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s;
    z-index: 10;
    opacity: 1;

    @starting-style {
        opacity: 0;
    }

    @supports (corner-shape: squircle) {
        corner-shape: squircle;
        border-radius: 65px;
    }
}



.modal-flip-btn:hover {
    transform: translateY(-2px);
    color: #ffffff;
}

.modal-flip-btn .flip-icon {
    transition: transform 0.3s;
}



.flipped~.modal-flip-btn {
    transform: rotateY(180deg);
    color: #fff;
    animation: fadeout-in 0.6s ease forwards alternate;
}

.unflipping~.modal-flip-btn {
    opacity: 0;
}

.modal-flip-btn.hidden {
    display: none;
}

@keyframes fadeout-in {

    0%,
    100% {
        opacity: 1;
    }

    20% {
        opacity: 0;
    }
}

/* Back Content Styling */
.modal-back-header h3 {
    margin: 0 0 20px 0;
    color: white;
}

.modal-graph-section {
    margin-bottom: 30px;
    padding: 20px;
    width: -webkit-fill-available;
}

.modal-graph-section h4 {
    margin: 0 0 15px 0;
    color: white;
}

.modal-graph-container {
    height: 200px;
    margin-bottom: 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 10px;
}

.modal-last-admin {
    color: rgba(255, 255, 255, 0.75);
    text-align: right;
    font-style: italic;
}

.modal-metadata-section {
    background: var(--bg-item);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 15px;
}

.metadata-item {
    margin: 10px 0;
    color: white;
    background: var(--bg-item);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 20px;
}

.metadata-item strong {
    color: #5de7ffe6;
    margin-right: 8px;
}

.modal-lore-section {
        margin: 4px 20px;
        width: -webkit-fill-available;
background: linear-gradient(135deg, #feffa0 0%, #fff2a0 100%);
    border: 1px solid #d4c23a;
    border-radius: 4px;
    padding: 19px 14px 16px;
    position: relative;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transform: rotate(-1deg);
    transition: all 0.3s ease;
}


.modal-lore-section::before {
    content: '';
        position: absolute;
        top: 0px;
        left: 39%;
        translate: 50% -72%;
        width: 29px;
        height: 47px;
        background: linear-gradient(180deg, #ffffec85 0%, #dbdbd57d 100%);
        backdrop-filter: blur(14px);
        border-top-left-radius: 11px;
        border-top-right-radius: 8px;
        @supports (corner-shape: squircle) {
        corner-top-left-shape: squircle;
        corner-top-right-shape: bevel;
        }
}

.modal-lore-section h4 {
    margin: 0 0 15px 0;
    color: white;
    font-size: 18px;
}

.modal-lore-content {
    color: #000000e3;
        line-height: 1.1;
        font-family: 'Cairo';
        font-size: 15px;
        overflow-wrap: break-word;
}

/* Credits displayed vertically on the right */
.modal-credits {
    position: absolute;
    writing-mode: vertical-rl;
    top: 42%;
    right: 18px;
    transform: translateY(-50%) rotate(-180deg);
    transform-origin: center;
    color: rgb(255 255 255 / 20%);
    font-size: 64px;
    font-weight: 600;
    white-space: nowrap;
    z-index: 10001;
    opacity: 0.5;
    transition: opacity 0.3s ease, right 0.6s ease;
    display: none;
    pointer-events: none;
}


/* Modal Action Buttons (Wishlist & Favorite) */
.modal-actions {
    position: absolute;
    top: 50%;
    right: -70px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 15px;
    opacity: 1;
    z-index: 10000;
    transition: opacity 2s ease allow-discrete;

    @starting-style {
        opacity: 0;
    }
}

.flipped~.modal-actions {
    right: unset;
    left: -70px;
    opacity: 1;
    transform: translateY(-50%) rotateY(180deg);
    transition: opacity 2s ease allow-discrete;

    @starting-style {
        opacity: 0;
    }
}

.modal-action-btn {
    display: inline-block;
    width: 48px;
    height: 48px;
    mask-repeat: no-repeat;
    transition: all 0.2s, transform 0.4s cubic-bezier(.47, 1.64, .41, .8);
    cursor: pointer;
    background: CanvasText;
    background-repeat: no-repeat;
    filter: saturate(1) brightness(1) drop-shadow(0px 0px 0.5px black) drop-shadow(0px 0px 0.5px black) drop-shadow(0px 0px 0.5px black) drop-shadow(0px 0px 0.5px black) drop-shadow(0px 0px 0.5px black);
}

.modal-action-btn:hover {
    transform: scale(1.15);
    background: rgb(from CanvasText r g b / 0.75);
}

.modal-action-btn.modal-wishlist-btn {
    mask-image: url("data: image/svg+xml, %3Csvg%20viewBox%3D%22-1.5%20-2.5%2037%2037%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M18.05.242c.466.226.843.596%201.073%201.054L23.1%209.194l8.874%201.276c1.294.186%202.19%201.368%202%202.64a2.3%202.3%200%200%201-.688%201.327l-6.416%206.157%201.507%208.687c.22%201.267-.647%202.47-1.936%202.685a2.4%202.4%200%200%201-1.499-.233L17%2027.64l-7.942%204.093c-1.159.597-2.59.159-3.198-.98a2.3%202.3%200%200%201-.238-1.472l1.508-8.687-6.416-6.157a2.3%202.3%200%200%201-.04-3.29%202.4%202.4%200%200%201%201.352-.677L10.9%209.194l3.977-7.898c.58-1.152%202-1.624%203.173-1.054M12.472%2011.32%202.369%2012.772l7.305%207.01-1.717%209.89L17%2025.012l9.042%204.66-1.716-9.89%207.305-7.01-10.103-1.452L17%202.328z%22%2F%3E%3C%2Fsvg%3E");
}

.modal-action-btn.modal-wishlist-btn.active {
    mask-image: url("data: image/svg+xml, %3Csvg%20viewBox%3D%22-1.5%20-2.5%2037%2037%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M18.05.242c.466.226.843.596%201.073%201.054L23.1%209.194l8.874%201.276c1.294.186%202.19%201.368%202%202.64a2.3%202.3%200%200%201-.688%201.327l-6.416%206.157%201.507%208.687c.22%201.267-.647%202.47-1.936%202.685a2.4%202.4%200%200%201-1.499-.233L17%2027.64l-7.942%204.093c-1.159.597-2.59.159-3.198-.98a2.3%202.3%200%200%201-.238-1.472l1.508-8.687-6.416-6.157a2.3%202.3%200%200%201-.04-3.29%202.4%202.4%200%200%201%201.352-.677L10.9%209.194l3.977-7.898c.58-1.152%202-1.624%203.173-1.054%22%2F%3E%3C%2Fsvg%3E");
    background: linear-gradient(yellow, gold, orange);
}

.modal-action-btn.modal-favorite-btn {
    mask-image: url("data:image/svg+xml, %3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%204.528a6%206%200%200%200-8.243%208.715l6.829%206.828a2%202%200%200%200%202.828%200l6.829-6.828A6%206%200%200%200%2012%204.528m-1.172%201.644.465.464a1%201%200%200%200%201.414%200l.465-.464a4%204%200%201%201%205.656%205.656L12%2018.657l-6.828-6.829a4%204%200%200%201%205.656-5.656%22%2F%3E%3C%2Fsvg%3E");
}

.modal-action-btn.modal-favorite-btn.active {
    mask-image: url("data:image/svg+xml, %3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M%2012%204.528%20a%206%206%200%200%200%20-8.243%208.715%20l%206.829%206.828%20a%202%202%200%200%200%202.828%200%20l%206.829%20-6.828%20A%206%206%200%200%200%2012%204.528%22%2F%3E%3C%2Fsvg%3E");
    background: linear-gradient(red, darkred);
}



.modal-action-btn.active {
    transform: scale(1.15);
}

.modal-action-btn.active:hover {
    transform: scale(1.25);
    filter: brightness(0.9);
}

.modal-action-btn:active {
    transform: scale(0.95);
}

.modal-action-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.modal-action-count {
    font-size: 26px;
        font-family: 'BuilderSans';
        color: rgba(255, 255, 255, 0.7);
        font-weight: 500;
        min-width: 20px;
        text-align: center;
}

@media (max-width: 768px) {
    .modal-nav {
        display: none;
    }

    .modal-container {
        zoom: 0.9;
        width: 70%;
    }

    .modal-flip-btn {
        bottom: 10px;
        right: 10px;
        padding: 8px 16px;
    }

    .modal-back {
        padding: 15px;
    }

    .modal-graph-container {
        height: 150px;
    }

    /* Position modal actions at the bottom for mobile */
    .modal-actions {
        position: fixed;
        top: auto;
        bottom: -25px;
        right: 50%;
        transform: translate(50%, 100%);
        flex-direction: row;
        gap: 20px;
    }

    .modal-action-btn {
        width: 64px;
        height: 64px;

        @supports (corner-shape: round) {
            corner-shape: round;
        }
    }

    .modal-action-btn:hover,
    .modal-action-btn:active,
    .modal-action-btn.active {
        transform: scale(1);
        background: CanvasText;
    }
}