/* ════════════════════════════════════════════════════════════
   GBI Slawi — account-notice.css
   Modal notifikasi status akun (nonaktif / role berubah)
   Letakkan di: public/css/frontend/account-notice.css
   Menggunakan CSS variables dari tema GBI Slawi yang sudah ada.
   Variabel: --bg, --bg2, --bg3, --text, --text2, --text3,
             --gold, --gold-dim, --danger, --warning, --border
   ════════════════════════════════════════════════════════════ */

.an-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: anFadeIn .22s ease;
}

@keyframes anFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.an-modal {
    background: var(--bg2, #1a1a2e);
    border: 1px solid var(--border, rgba(255, 255, 255, .1));
    border-radius: 20px;
    width: 100%;
    max-width: 420px;
    padding: 2.2rem 2rem 1.8rem;
    box-shadow: 0 32px 80px rgba(0, 0, 0, .5);
    animation: anSlideUp .28s cubic-bezier(.34, 1.56, .64, 1);
    position: relative;
    overflow: hidden;
}

@keyframes anSlideUp {
    from {
        opacity: 0;
        transform: translateY(28px) scale(.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Garis aksen atas sesuai tipe */
.an-modal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 20px 20px 0 0;
}

.an-modal.type-inactive::before {
    background: #e74c3c;
}

.an-modal.type-role_changed::before {
    background: var(--gold, #c8a96e);
}

.an-modal.type-generic::before {
    background: var(--text3, #666);
}

/* ── Icon ── */
.an-icon-wrap {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.4rem;
    font-size: 1.8rem;
}

.an-icon-wrap.type-inactive {
    background: rgba(231, 76, 60, .12);
    border: 1.5px solid rgba(231, 76, 60, .3);
    color: #e74c3c;
}

.an-icon-wrap.type-role_changed {
    background: var(--gold-dim, rgba(200, 169, 110, .12));
    border: 1.5px solid rgba(200, 169, 110, .3);
    color: var(--gold, #c8a96e);
}

.an-icon-wrap.type-generic {
    background: rgba(255, 255, 255, .06);
    border: 1.5px solid var(--border, rgba(255, 255, 255, .1));
    color: var(--text2, #aaa);
}

/* ── Body ── */
.an-body {
    text-align: center;
}

.an-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text, #eee);
    margin: 0 0 .6rem;
    line-height: 1.3;
}

.an-desc {
    font-size: .9rem;
    color: var(--text2, #aaa);
    margin: 0 0 1.1rem;
    line-height: 1.55;
}

/* Kotak detail alasan */
.an-detail-box {
    background: var(--bg3, rgba(255, 255, 255, .05));
    border: 1px solid var(--border, rgba(255, 255, 255, .08));
    border-radius: 10px;
    padding: .75rem 1rem;
    margin-bottom: .9rem;
    text-align: left;
    display: flex;
    gap: .5rem;
    align-items: flex-start;
}

.an-detail-label {
    font-size: .78rem;
    color: var(--text3, #777);
    white-space: nowrap;
    padding-top: .05rem;
}

.an-detail-text {
    font-size: .85rem;
    color: var(--text, #eee);
    line-height: 1.45;
}

.an-contact {
    font-size: .82rem;
    color: var(--text3, #777);
    margin: 0 0 .2rem;
}

/* ── Aksi ── */
.an-actions {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    margin-top: 1.5rem;
}

.an-btn {
    width: 100%;
    padding: .75rem 1.2rem;
    border-radius: 10px;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all .18s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    text-decoration: none;
}

.an-btn-primary {
    background: var(--gold, #c8a96e);
    color: #111;
}

.an-btn-primary:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.an-btn-secondary {
    background: var(--bg3, rgba(255, 255, 255, .07));
    color: var(--text, #eee);
    border: 1px solid var(--border, rgba(255, 255, 255, .1));
}

.an-btn-secondary:hover {
    background: var(--bg3, rgba(255, 255, 255, .12));
}

.an-btn-danger {
    background: rgba(231, 76, 60, .1);
    color: #e74c3c;
    border: 1px solid rgba(231, 76, 60, .25);
}

.an-btn-danger:hover {
    background: rgba(231, 76, 60, .18);
}

/* ── Progress bar auto-redirect ── */
.an-progress-wrap {
    margin-top: 1.2rem;
    background: var(--bg3, rgba(255, 255, 255, .06));
    border-radius: 99px;
    height: 3px;
    overflow: hidden;
}

.an-progress-bar {
    height: 100%;
    background: var(--gold, #c8a96e);
    border-radius: 99px;
    width: 100%;
    transition: width linear;
}

/* ── Responsive ── */
@media (max-width: 480px) {
    .an-modal {
        padding: 1.8rem 1.4rem 1.5rem;
        border-radius: 16px;
    }

    .an-title {
        font-size: 1.05rem;
    }
}