/*
 * Donate landing page (/donate) - pack grid, payment methods and FAQ.
 * Colours follow the theme variables declared in v1.css (--default-color #ba6356,
 * --dark-color #0b0c10, --bs-gradient).
 * NOTE: pulsemucms.css/donate.css carry no cache-busting query - hard refresh after changes.
 */

.dmn-donate-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
    margin-bottom:10px;
}

.dmn-donate-sub{
    color:var(--body-color);
    margin:0 0 14px
}

.dmn-donate-head .title{
    margin-bottom:6px
}

.dmn-donate-realm{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    padding:10px 16px;
    min-width:150px;
    background:var(--dark-color);
    border:1px solid #262832;
    border-radius:8px;
    text-align:right
}

.dmn-donate-realm-label{
    font-size:11px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--body-color)
}

.dmn-donate-realm-name{
    font-size:18px;
    color:#fff
}

.dmn-donate-note{
    padding:12px 16px;
    margin-bottom:14px;
    background:rgba(186,99,86,.08);
    border-left:3px solid var(--default-color);
    border-radius:4px;
    color:var(--body-color);
    font-size:14px
}

.dmn-donate-note a{
    color:var(--default-color)
}

.dmn-donate-note-realm{
    background:rgba(255,255,255,.03);
    border-left-color:#4a4d5c
}

.dmn-donate-packs{
    margin-top:6px
}

.dmn-donate-pack-col{
    margin-bottom:24px
}

.dmn-donate-pack{
    position:relative;
    display:flex;
    flex-direction:column;
    height:100%;
    padding:22px 18px 18px;
    background:var(--dark-color);
    border:1px solid #262832;
    border-radius:10px;
    text-align:center;
    transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease
}

.dmn-donate-pack:hover{
    border-color:var(--default-color);
    transform:translateY(-2px);
    box-shadow:0 8px 22px rgba(0,0,0,.45)
}

.dmn-donate-pack-badge{
    position:absolute;
    top:12px;
    right:12px;
    padding:3px 9px;
    font-size:12px;
    color:#fff;
    background:var(--bs-gradient);
    border-radius:20px
}

.dmn-donate-pack-img{
    display:block;
    max-width:120px;
    margin:0 auto 12px
}

.dmn-donate-pack-title{
    font-size:16px;
    color:#fff;
    margin-bottom:10px
}

.dmn-donate-pack-amount{
    font-size:30px;
    line-height:1.1;
    color:#fff
}

.dmn-donate-pack-amount span{
    display:block;
    font-size:13px;
    color:var(--body-color);
    margin-top:2px
}

.dmn-donate-pack-price{
    margin-top:12px;
    font-size:20px;
    color:var(--default-color)
}

.dmn-donate-pack-currency{
    margin-left:3px;
    font-size:14px
}

.dmn-donate-pack-old-price{
    display:block;
    font-size:14px;
    color:var(--body-color);
    text-decoration:line-through
}

.dmn-donate-pack-limit{
    margin-top:8px;
    font-size:12px;
    color:var(--body-color)
}

/* Bonus items a tier bundles with the currency (icons + xN, like MuDream's pack cards). */
.dmn-donate-pack-bonus{
    margin-top:14px;
    padding-top:12px;
    border-top:1px solid #262832
}

.dmn-donate-pack-bonus-label{
    display:block;
    margin-bottom:8px;
    font-size:11px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--body-color)
}

.dmn-donate-pack-bonus-items{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px
}

.dmn-donate-pack-bonus-item{
    display:inline-flex;
    align-items:center;
    gap:4px
}

.dmn-donate-pack-bonus-item img{
    width:32px;
    height:32px;
    object-fit:contain;
    cursor:help
}

.dmn-donate-pack-bonus-qty{
    font-size:13px;
    color:#fff
}

/* Buff tiers show how long the buff lasts instead of a count, like MuDream's cards. */
.dmn-donate-pack-bonus-duration{
    font-size:12px;
    color:var(--default-color);
    white-space:nowrap
}

.dmn-donate-pack-methods{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
    margin-top:16px;
    padding-top:16px;
    border-top:1px solid #262832
}

.dmn-donate-pack-methods .vs-btn{
    padding:8px 14px;
    font-size:14px
}

.dmn-donate-pack-unavailable{
    font-size:13px;
    color:var(--body-color)
}

.dmn-donate-section-title{
    margin:26px 0 6px;
    padding-top:20px;
    border-top:1px solid #262832;
    color:#fff
}

.dmn-donate-gateways{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:14px
}

.dmn-donate-gateways .vs-btn{
    min-width:170px
}

.dmn-donate-faq{
    margin-top:14px
}

.dmn-donate-faq-category{
    margin:18px 0 8px;
    font-size:12px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--default-color)
}

.dmn-donate-faq-item{
    border:1px solid #262832;
    border-radius:8px;
    background:var(--dark-color);
    margin-bottom:8px
}

.dmn-donate-faq-item summary{
    position:relative;
    padding:13px 40px 13px 16px;
    color:#fff;
    cursor:pointer;
    list-style:none
}

.dmn-donate-faq-item summary::-webkit-details-marker{
    display:none
}

.dmn-donate-faq-item summary:after{
    content:'+';
    position:absolute;
    right:16px;
    top:50%;
    transform:translateY(-50%);
    color:var(--default-color);
    font-size:18px;
    line-height:1
}

.dmn-donate-faq-item[open] summary:after{
    content:'\2013'
}

.dmn-donate-faq-item[open] summary{
    border-bottom:1px solid #262832
}

.dmn-donate-faq-answer{
    padding:13px 16px;
    color:var(--body-color);
    font-size:14px
}