/* ===============================
   Animated Border Property
================================ */
@property --border-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* ===============================
   Combo Card – Animated Border
================================ */
.combo-card {
    --border-angle: 0deg;
    position: relative;
    background:
        linear-gradient(180deg, #12182A, #12182A) padding-box,
        conic-gradient(
            from var(--border-angle),
            transparent 0deg,
            var(--e-global-color-secondary) 40deg,
            #ff7a18 60deg,
            var(--e-global-color-secondary) 80deg,
            transparent 100deg,
            transparent 180deg,
            var(--e-global-color-secondary) 220deg,
            #ff7a18 240deg,
            var(--e-global-color-secondary) 260deg,
            transparent 280deg
        ) border-box;
    border-radius: 18px;
    border: 1px solid transparent;
    padding: 28px;
    color: #fff;
    animation: combo-border-spin 5s linear infinite;
    transition: box-shadow 0.3s ease;
}

/* Hover glow */
.combo-card:hover {
    box-shadow: rgba(231, 112, 67, 0.6) 0px 2px 8px;
}

/* ===============================
   Border Animation
================================ */
@keyframes combo-border-spin {
    to {
        --border-angle: 360deg;
    }
}

/* ===============================
   Typography
================================ */
.combo-title {
    font-weight: 700;
    margin-bottom: 12px;
}

/* Subtitle divider */
.combo-subtitle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--e-global-color-secondary);
    font-size: 13px;
    margin-bottom: 16px;
}

.combo-subtitle .line {
    flex: 1;
    height: 1px;
    background: var(--e-global-color-secondary);
    opacity: 0.6;
}

.combo-subtitle .dot {
    width: 5px;
    height: 5px;
    background: var(--e-global-color-secondary);
    border-radius: 50%;
}

/* ===============================
   Price
================================ */
.combo-price {
    margin:auto 0 20px;
   
}

.combo-mrp { 
    opacity: 0.6;
}

.combo-sale {
    font-size: 30px;
    font-family: "Baron Neue", Sans-serif;
    font-weight: 700;
    color: var(--e-global-color-secondary);
}

/* ===============================
   Game List
================================ */
.combo-list {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}
.combo-list li {
 line-height: 1.8em;
}

/* ===============================
   Button
================================ */
.combo-btn {
    display: inline-block;
    border-radius: 8px;
    border: 1px solid var(--e-global-color-secondary);
    position: absolute !important;
    background-color: #0B0F19;
    left: 50%;
    bottom: 0%;
    transform: translate(-50%, 50%);  
}

.combo-btn a {
    background-color: transparent;
    border-radius: 8px;
    color: var(--e-global-color-secondary) !important;
}

.combo-btn:hover a {
    color: #ffffff !important;
}

.combo-btn span {
    position: relative;
    z-index: 1;
}
.combo-slider{
  margin-left: 2px !important;
}
.combo-prev::after, 
.combo-next::after {
    font-size: 12px !important;
    font-weight: 800;
    color: #000000;
    padding: 7px 10px;
    border-radius: 30px;
    Background-color: var(--e-global-color-secondary); 
}

@media (min-width: 768px) {

.combo-prev {
   left: 0 !important;
   transform: translatex(-35px);
}
.combo-next {
   right: 0 !important;
   transform: translatex(35px);
}
}