/* === BADGE MODAL === */

/* Tombol ikon badge — reset semua style bawaan button */
.badge-icon-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    position: relative;
    vertical-align: middle;
}

.badge-icon-btn i {
    font-size: 1.1em;
    display: inline-block;
}

/* ---- Overlay tipis, hanya untuk menangkap klik di luar ---- */
#badge-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: transparent;
}

#badge-modal-overlay.active {
    display: block;
}

/* ---- Modal box ---- */
/*
 * Warna mengikuti variabel CSS yang didefinisikan di style.css:
 * --modal-bg    : background modal (gelap = #000, terang = #fff)
 * --text-main   : warna teks utama
 * --text-muted  : teks sekunder / redup
 * --border-color: garis tepi
 * --card-hover  : efek hover tombol
 */
.badge-modal-box {
    position: fixed;
    z-index: 9001;
    background: var(--modal-bg);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.35);
    padding: 20px 20px 16px 20px;
    min-width: 290px;
    max-width: 320px;
    width: max-content;
    pointer-events: all;
    animation: badgeModalIn 0.15s ease;

    /*
     * --badge-modal-offset-x
     * Atur posisi horizontal popup relatif terhadap ikon badge.
     * Nilai positif  = geser ke kanan
     * Nilai negatif  = geser ke kiri
     * Contoh: 0px (rata dengan ikon), -20px (20px ke kiri), 10px (10px ke kanan)
     */
    --badge-modal-offset-x: -105px;
}

@keyframes badgeModalIn {
    from { opacity: 0; transform: scale(0.95) translateY(-6px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ---- Header: ikon besar + judul ---- */
.badge-modal-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.badge-modal-header i {
    font-size: 1.4rem;
    flex-shrink: 0;
}

.badge-modal-header h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-main);
    line-height: 1.3;
}

/* ---- Baris item (deskripsi, tanggal) ---- */
.badge-modal-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-main);
}

.badge-modal-item i {
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.badge-modal-item a {
    color: #1d9bf0;
    text-decoration: none;
    font-weight: 500;
}

.badge-modal-item a:hover {
    text-decoration: underline;
}

/* Baris tanggal sedikit lebih redup */
.badge-modal-date {
    color: var(--text-muted) !important;
    font-size: 0.85rem;
}

.badge-modal-date i {
    color: var(--text-muted) !important;
}

/* ---- Tombol upgrade ---- */
.badge-modal-btn {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 10px 0;
    border-radius: 999px;
    background: transparent;
    border: 1.5px solid var(--border-color);
    color: var(--text-main);
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s ease;
    font-family: inherit;
}

.badge-modal-btn:hover {
    background: var(--card-hover);
}

/* ---- Warna ikon per tipe badge ---- */
.badge-modal-box.badge-verified .badge-modal-header i { color: #1d9bf0; }
.badge-modal-box.badge-premium  .badge-modal-header i { color: #e2b719; }
.badge-modal-box.badge-official .badge-modal-header i { color: #f4212e; }
.badge-modal-box.badge-creator  .badge-modal-header i { color: #00ba7c; }

.badge-modal-box.badge-verified .badge-modal-item:not(.badge-modal-date) i { color: #1d9bf0; }
.badge-modal-box.badge-premium  .badge-modal-item:not(.badge-modal-date) i { color: #e2b719; }
.badge-modal-box.badge-official .badge-modal-item:not(.badge-modal-date) i { color: #f4212e; }
.badge-modal-box.badge-creator  .badge-modal-item:not(.badge-modal-date) i { color: #00ba7c; }

/* ---- Responsive mobile ---- */
@media (max-width: 600px) {
    .badge-modal-box {
        min-width: 0;
        max-width: calc(100vw - 24px);
        width: calc(100vw - 24px);
        border-radius: 14px;
        padding: 16px 16px 14px 16px;
    }
}