/* Random Discount Module Styles */

/* Animation */
@keyframes fire {
    0% {
        box-shadow: 0 0 10px 5px rgba(0, 255, 0, 0.8), 0 0 20px 10px rgba(0, 255, 140, 0.7), 0 0 30px 15px rgba(0, 255, 215, 0.5);
        transform: scale(1) rotate(0deg);
    }
    20% {
        box-shadow: 0 0 15px 8px rgba(0, 255, 0, 0.9), 0 0 25px 12px rgba(0, 255, 140, 0.8), 0 0 40px 20px rgba(0, 255, 215, 0.6);
        transform: scale(1.05) rotate(5deg);
    }
    40% {
        box-shadow: 0 0 20px 10px rgba(0, 255, 0, 1), 0 0 30px 15px rgba(0, 255, 140, 0.9), 0 0 50px 25px rgba(0, 255, 215, 0.7);
        transform: scale(1.1) rotate(-5deg);
    }
    60% {
        box-shadow: 0 0 25px 12px rgba(0, 255, 0, 1), 0 0 35px 18px rgba(0, 255, 140, 1), 0 0 60px 30px rgba(0, 255, 215, 0.8);
        transform: scale(1.1) rotate(5deg);
    }
    80% {
        box-shadow: 0 0 20px 10px rgba(0, 255, 0, 1), 0 0 30px 15px rgba(0, 255, 140, 0.9), 0 0 50px 25px rgba(0, 255, 215, 0.7);
        transform: scale(1.05) rotate(-5deg);
    }
    100% {
        box-shadow: 0 0 15px 8px rgba(0, 255, 0, 0.9), 0 0 25px 12px rgba(0, 255, 140, 0.8), 0 0 40px 20px rgba(0, 255, 215, 0.6);
        transform: scale(1) rotate(0deg);
    }
}

.discount-slider-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.daily-discounts{
    background: #2d271d;
    padding: 10px;
    margin-bottom: 7px;
    text-align:center;
    border-radius: 2px 2px 0 0;
    box-shadow: 0 2px rgba(0, 0, 0, 0.1), inset 0 2px rgba(165, 148, 124, 0.15);
    box-sizing: border-box;
}

.discount-slider {
    margin: 0;
    height: 288px !important;
    display: flex !important;
    overflow: hidden;
}
.discount-slider.ls-initialized {
    display: block !important;
    overflow: visible;
}

.discount-slider .item-box {
    display: inline-block;
    width: 20%;
    text-align: center;
    border: 1px solid #312b24;
    border-radius: 5px;
    padding: 10px;
    background-color: #252017;
    box-shadow: 0 2px rgba(0, 0, 0, 0.1), inset 0 2px rgba(165, 148, 124, 0.15);
    margin-right: 10px;
    height: 288px !important;
    box-sizing: border-box;
}

/* Hot Item discount */
@property --bg-angle {
  inherits: false;
  initial-value: 0deg;
  syntax: "<angle>";
}
@keyframes spin {
  to {
    --bg-angle: 360deg;
  }
}

.discount-slider .item-box.hot {
  animation: spin 2.5s infinite linear paused;
  background:
    linear-gradient(
        to bottom,
        oklch(0.25 0.02 82.11),
        oklch(0.25 0.02 82.11)
      )
      padding-box,
    conic-gradient(
        from var(--bg-angle),
        #2f2c27 0deg 180deg,
        #00ff00 60deg 180deg,
        #32ff32 180deg 240deg,
        #ff5c00 240deg 360deg 
      )
      border-box;
  border: 2px solid transparent;
  animation-play-state: running;
}

.discount-slider .item-box.hot:hover {
animation-duration: 0.5s;
}


.icon-wrapper {
    width: 72px;
    height: 72px;
    margin: -4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.15);
    border-radius: 10px;
    overflow: hidden;
}

.icon-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain; 
}

.icon-wrapper.is-morph img {
    image-rendering: auto;
}
.discount-slider .item-box img {
    max-width: 80%;
    width:70%;
    height: auto;
    margin-bottom: 10px;
    border: 1px solid;
    border-radius: 5px;
    margin-top: 10px;
}

.discount-slider .item-box p {
    font-size: 14px;
    margin: 5px 0;
    color: #555;
}

.discount-slider .buy-btn-container {
    position: absolute;
    bottom: 23px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}

.discount-slider .buy-btn-container .buy-btn {
    background-color: #3f362f;
    color: #be9f87;
    padding: 3px 17px 7px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-family: tahoma;
    font-size:14px;
    text-align: center;
    box-shadow: 0 2px rgba(0, 0, 0, 0.1), inset 0 2px rgb(165 148 124 / 25%);
    box-sizing: border-box;
}

.discount-slider .buy-btn-container .buy-btn.buy-btn:hover {
    background-color: #ad3a16;
    color:#dbc298;
}

/* Shimmer: applied to real elements before slider init */
@keyframes rd-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.discount-slider:not(.ls-initialized) .item-box {
    flex: 0 0 calc(100% / 7 - 10px);
    height: 288px !important;
    box-sizing: border-box;
    animation: none !important;
    pointer-events: none;
}

.discount-slider:not(.ls-initialized) .item-box * {
    color: transparent !important;
    text-decoration: none !important;
    text-shadow: none !important;
    -webkit-text-fill-color: transparent !important;
}

.discount-slider:not(.ls-initialized) .item-box .icon-wrapper {
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.04) 75%);
    background-size: 200% 100%;
    animation: rd-shimmer 1.4s ease infinite;
    border-color: transparent !important;
    box-shadow: none !important;
}

.discount-slider:not(.ls-initialized) .item-box .icon-wrapper img {
    opacity: 0;
}

.discount-slider:not(.ls-initialized) .item-box h5 {
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.04) 75%);
    background-size: 200% 100%;
    animation: rd-shimmer 1.4s ease infinite;
    border-radius: 4px;
    min-height: 14px;
    height: 14px;
    width: 80%;
    margin: 10px auto 0;
    overflow: hidden;
}

.discount-slider:not(.ls-initialized) .item-box .price-container p {
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.04) 75%);
    background-size: 200% 100%;
    animation: rd-shimmer 1.4s ease infinite;
    border-radius: 4px;
    height: 12px;
    overflow: hidden;
}

.discount-slider:not(.ls-initialized) .item-box .price-container span {
    display: none !important;
}

.discount-slider:not(.ls-initialized) .item-box .buy-btn {
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.04) 75%) !important;
    background-size: 200% 100% !important;
    animation: rd-shimmer 1.4s ease infinite;
    border-color: transparent !important;
    box-shadow: none !important;
    border-radius: 5px;
    min-width: 60px;
    min-height: 28px;
}

/* Shimmer for realm-switch (JS-injected) */
.rd-shimmer-list {
    display: flex;
    overflow: hidden;
    height: 288px;
}
.rd-shimmer-item {
    position: relative;
    flex: 0 0 calc(100% / 7 - 10px);
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 288px;
    background-color: #252017;
    border: 1px solid #312b24;
    border-radius: 5px;
    padding: 10px;
    margin-right: 10px;
    box-shadow: 0 2px rgba(0, 0, 0, 0.1), inset 0 2px rgba(165, 148, 124, 0.15);
    box-sizing: border-box;
}
.rd-skel {
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.04) 75%);
    background-size: 200% 100%;
    animation: rd-shimmer 1.4s ease infinite;
    border-radius: 5px;
}
.rd-skel-icon { width: 72px; height: 72px; border-radius: 10px; }
.rd-skel-title { width: 80%; height: 14px; margin-top: 10px; }
.rd-skel-price-old { width: 50%; height: 12px; position: absolute; top: 140px; }
.rd-skel-price-new { width: 55%; height: 14px; position: absolute; top: 162px; }
.rd-skel-btn { width: 60px; height: 28px; border-radius: 5px; position: absolute; bottom: 23px; }