/* ====================================

   INFO BOX REDESIGN - BLACK GOLD ELEGAN

   Background Putih dengan Aksen Black Gold

===================================== */



/* === VARIABLES === */

:root {

    --gold-primary: #d4af37;

    --gold-secondary: #b49450;

    --gold-light: #f5e7c8;

    --gold-soft: rgba(212, 175, 55, 0.15);

    --black-deep: #0a0a0a;

    --black-medium: #333333;

    --black-soft: #666666;

    --white-pure: #ffffff;

    --white-soft: #fafafa;

    --white-cream: #fffdf7;

    --shadow-elegant: 0 15px 35px rgba(0, 0, 0, 0.1);

    --shadow-gold: 0 5px 20px rgba(212, 175, 55, 0.2);

    --border-radius: 20px;

    --transition-smooth: all 0.3s ease;

}



/* === MAIN CONTAINER === */

.info-box-DEMOSLOT {

    max-width: 900px;

    margin: 5px auto;

    background: var(--white-pure);

    border-radius: var(--border-radius);

    border: 2px solid #d44537;

    box-shadow: var(--shadow-elegant), var(--shadow-gold);

    overflow: hidden;

    font-family: 'Poppins', sans-serif;

    position: relative;

}



/* Efek garis dekoratif di pojok */

.info-box-DEMOSLOT::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 150px;

    height: 150px;

    background: radial-gradient(circle at top left, var(--gold-soft), transparent 70%);

    pointer-events: none;

    z-index: 0;

}



.info-box-DEMOSLOT::after {

    content: '';

    position: absolute;

    bottom: 0;

    right: 0;

    width: 150px;

    height: 150px;

    background: radial-gradient(circle at bottom right, var(--gold-soft), transparent 70%);

    pointer-events: none;

    z-index: 0;

}



/* === HEADER === */

.info-header-DEMOSLOT {

    background: linear-gradient(145deg, var(--black-deep), var(--black-medium));

    color: #d44537;

    text-align: center;

    padding: 22px 20px;

    font-size: 18px;

    font-weight: 700;

    letter-spacing: 1px;

    border-bottom: 3px solid #d44537;

    position: relative;

    z-index: 1;

    text-transform: uppercase;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

}



/* Efek garis emas di header */

.info-header-DEMOSLOT::before {

    content: '';

    position: absolute;

    bottom: -3px;

    left: 25%;

    width: 50%;

    height: 3px;

    background: linear-gradient(90deg, transparent, var(--gold-light), transparent);

    border-radius: 3px;

}



.info-header-DEMOSLOT::after {

    content: '✦';

    position: absolute;

    right: 30px;

    top: 50%;

    transform: translateY(-50%);

    color: #d44537;

    font-size: 20px;

    opacity: 0.5;

}



/* === ROWS === */

.info-row-DEMOSLOT {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 8px 15px;

    border-bottom: 1px solid rgba(212, 175, 55, 0.15);

    position: relative;

    z-index: 1;

    background: var(--white-pure);

    transition: var(--transition-smooth);

}



.info-row-DEMOSLOT:hover {

    background: var(--white-cream);

    transform: translateX(5px);

    box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.1);

}



.info-row-DEMOSLOT:last-child {

    border-bottom: none;

}



/* Hover effect untuk baris terakhir */

.info-row-DEMOSLOT:last-child:hover {

    border-radius: 0 0 var(--border-radius) var(--border-radius);

}



/* === LABEL === */

.info-label-DEMOSLOT {

    font-weight: 600;

    color: var(--black-deep);

    width: 35%;

    font-size: 11px;

    letter-spacing: 0.3px;

    position: relative;

    padding-left: 15px;

}



/* Titik emas di depan label */

.info-label-DEMOSLOT::before {

    content: '●';

    position: absolute;

    left: -5px;

    top: 50%;

    transform: translateY(-50%);

    color: #d44537;

    font-size: 10px;

    opacity: 0.7;

}



/* === VALUE === */

.info-value-DEMOSLOT {

    font-weight: 600;

    color: var(--black-medium);

    width: 65%;

    font-size: 11px;

    line-height: 1.6;

    text-align: right;

    padding-right: 10px;

}



/* Strong dalam value */

.info-value-DEMOSLOT strong {

    color: #d44537;

    font-weight: 700;

    background: rgba(212, 175, 55, 0.08);

    padding: 2px 8px;

    border-radius: 30px;

    margin-left: 5px;

    font-size: 11px;

}



/* === RATING SPECIAL === */

.rating-DEMOSLOT {

    color: #d44537 !important;

    font-weight: 700;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 5px;

    flex-wrap: wrap;

}



.rating-DEMOSLOT strong {

    background: linear-gradient(145deg, #d44537, var(--gold-secondary));

    color: var(--white-pure) !important;

    padding: 4px 12px !important;

    border-radius: 30px;

    font-size: 13px;

    margin-left: 8px;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);

}



/* Bintang rating */

.rating-DEMOSLOT::before {

    content: '★★★★★';

    color: #d44537;

    letter-spacing: 3px;

    font-size: 16px;

    margin-right: 8px;

}



/* Sembunyikan bintang asli jika ada */

.rating-DEMOSLOT span,

.rating-DEMOSLOT .stars {

    color: #d44537;

}



/* === RESPONSIVE === */

@media (max-width: 768px) {

    .info-header-DEMOSLOT {

        font-size: 20px;

        padding: 18px 16px;

    }

    

    .info-row-DEMOSLOT {

        padding: 14px 18px;

    }

    

    .info-label-DEMOSLOT,

    .info-value-DEMOSLOT {

        font-size: 14px;

    }

}



@media (max-width: 600px) {

    .info-row-DEMOSLOT {

        flex-direction: column;

        align-items: flex-start;

        gap: 8px;

    }

    

    .info-label-DEMOSLOT {

        width: 100%;

        margin-bottom: 4px;

        padding-left: 0;

    }

    

    .info-label-DEMOSLOT::before {

        display: none;

    }

    

    .info-value-DEMOSLOT {

        width: 100%;

        text-align: left;

        padding-left: 15px;

        border-left: 3px solid #d44537;

    }

    

    .rating-DEMOSLOT {

        justify-content: flex-start;

        flex-wrap: wrap;

    }

    

    .info-header-DEMOSLOT::after {

        display: none;

    }

}



@media (max-width: 480px) {

    .info-box-DEMOSLOT {

        margin: 20px 15px;

    }

    

    .info-header-DEMOSLOT {

        font-size: 18px;

        padding: 15px 12px;

    }

    

    .info-row-DEMOSLOT {

        padding: 12px 15px;

    }

    

    .info-label-DEMOSLOT,

    .info-value-DEMOSLOT {

        font-size: 13px;

    }

    

    .rating-DEMOSLOT::before {

        font-size: 14px;

    }

    

    .rating-DEMOSLOT strong {

        font-size: 12px;

        padding: 3px 8px;

    }

}