.voap-progression {
    scroll-margin-top: 24px;
}

.voap-progression__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 4px;
}

.voap-progression__heading .voap-profile__title {
    margin-bottom: 0;
}

.voap-progression__eyebrow {
    display: block;
    margin-bottom: 3px;
    color: var(--gg-gold-dark, #8a671a);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.voap-progression__count {
    flex: 0 0 auto;
    padding: 5px 10px;
    border: 1px solid var(--gg-border, #e6d8c2);
    border-radius: 999px;
    background: var(--gg-surface-soft, #f9f2e3);
    color: var(--gg-text-muted, #725f58);
    font-size: 12px;
    font-weight: 700;
}

.voap-progression__empty {
    margin: 14px 0 0;
    padding: 16px;
    border: 1px dashed var(--gg-border, #e6d8c2);
    border-radius: 12px;
    text-align: center;
}

.voap-badges {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.voap-progression__subtitle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 20px 0 0;
    color: var(--gg-text-muted, #725f58);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.voap-progression__subtitle > span {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--gg-surface-soft, #f9f2e3);
    font-size: 11px;
}

/* The group header is a <summary>, and display:flex drops the native marker —
   so the chevron is drawn here, the same trick the profile guide uses. */
.voap-progression__group > summary {
    cursor: pointer;
    list-style: none;
}

.voap-progression__group > summary::-webkit-details-marker {
    display: none;
}

.voap-progression__group > summary::after {
    content: "\25BE";
    margin-left: auto;
    font-size: 1.1em;
    line-height: 1;
    transition: transform .18s ease;
}

.voap-progression__group[open] > summary::after {
    transform: rotate(180deg);
}

/* The tile is a <button>, and Elementor's global button style (maroon
   gradient, forced padding, uppercase accent type) outranks a single class —
   so every rule here is doubled up to sit above it, the same trick the profile
   headings use. Dropping any of these resets brings the gradient back. */
.voap-badges .voap-badge {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    width: 100%;
    margin: 0;
    padding: 16px 12px 14px;
    border: 1px solid var(--voap-p-track, #ece7df);
    border-radius: var(--voap-p-radius, 14px);
    background-color: var(--voap-p-bg, #fffdf9);
    background-image: none;
    color: var(--voap-p-fg, #660c1b);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: normal;
    text-align: center;
    text-transform: none;
    text-shadow: none;
    box-shadow: var(--gg-shadow-sm, 0 1px 3px rgba(60, 30, 0, .10));
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.voap-badges .voap-badge:hover,
.voap-badges .voap-badge:focus-visible {
    transform: translateY(-2px);
    border-color: var(--voap-p-accent, #e8542f);
    background-image: none;
    box-shadow: var(--gg-shadow, 0 6px 16px rgba(60, 30, 0, .14));
}

/* Earned reads as gold, locked as an unfilled outline. */
.voap-badges .voap-badge.is-earned {
    border-color: var(--gg-gold, #f4a900);
    box-shadow: 0 2px 10px rgba(244, 169, 0, .18);
}

.voap-badges .voap-badge.is-locked {
    border-style: dashed;
    background-color: #fbf8f2;
}

.voap-badge__image {
    position: relative;
    display: grid;
    width: 64px;
    height: 64px;
    margin: 0;
    place-items: center;
    border-radius: 50%;
    background: var(--gg-surface-soft, #f6efe1);
    color: var(--gg-gold-dark, #8a671a);
}

/* Badge art is a transparent circular PNG, so `contain` (not `cover`) keeps every
   medallion the same size and centred instead of cropping whatever does not fit
   a square.
   The zoom then takes up the slack: exported badge art carries transparent
   margin around the circle, and `contain` fits the whole canvas — margin
   included — which leaves the visible disc floating small inside the frame.
   Scaling up pushes only that transparent margin past the edge, so the disc
   fills the frame and nothing real is ever clipped. Retune --voap-art-zoom to
   match however much margin the badge set is exported with. */
.voap-badge__image img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: contain;
    object-position: center;
    transform: scale(var(--voap-art-zoom, 1.22));
}

.voap-badge__image > .dashicons {
    width: 32px;
    height: 32px;
    font-size: 32px;
}

/* Muted, not obliterated — a locked badge should still read as a picture. */
.is-locked .voap-badge__image {
    background: var(--voap-p-track, #ece7df);
}

.is-locked .voap-badge__image > img,
.is-locked .voap-badge__image > .dashicons:not(.voap-badge__lock) {
    filter: grayscale(1);
    opacity: .45;
}

/* Progress towards the badge, as a ring around the art. The conic gradient is
   masked into a rim so the medallion underneath stays untouched; --voap-progress
   is set per tile in PHP, and 0 leaves just the faint track. */
.is-locked .voap-badge__image::before,
.voap-badge-modal.is-locked .voap-badge__image::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: conic-gradient(
        var(--voap-p-fg, #660C1B) calc(var(--voap-progress, 0) * 1%),
        rgba(102, 12, 27, .12) 0
    );
    -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
            mask: radial-gradient(closest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
}

/* A corner chip, so the artwork stays visible underneath it. */
.voap-badge__lock {
    position: absolute;
    right: -2px;
    bottom: -2px;
    display: grid !important;
    width: 22px !important;
    height: 22px !important;
    place-items: center;
    border-radius: 50%;
    border: 2px solid var(--voap-p-bg, #fffdf9);
    background: var(--voap-p-fg, #660c1b);
    color: #fff;
    font-size: 11px !important;
}

.voap-badge__title {
    display: block;
    color: var(--voap-p-fg, #660c1b);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: none;
}

.voap-badge__status {
    display: block;
    color: var(--voap-p-muted, #93686f);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.voap-badge.is-earned .voap-badge__status {
    color: var(--gg-gold-dark, #8a671a);
}

/* Detail popup: native <dialog>, so the backdrop and Esc come from the browser. */
.voap-badge-modal {
    box-sizing: border-box;
    width: min(360px, calc(100vw - 32px));
    padding: 28px 24px 24px;
    border: 1px solid var(--gg-border, #e6d8c2);
    border-radius: 16px;
    background: #fff;
    color: var(--gg-text, #2c1b18);
    text-align: center;
    box-shadow: 0 24px 60px rgba(38, 5, 10, .28);
}

.voap-badge-modal::backdrop {
    background: rgba(25, 10, 16, .68);
    backdrop-filter: blur(4px);
}

.voap-badge-modal .voap-badge__image {
    width: 112px;
    height: 112px;
    /* auto side margins: the grid tile has margin 0, the dialog centres its art */
    margin: 0 auto 14px;
}

.voap-badge-modal .voap-badge__image > .dashicons {
    width: 56px;
    height: 56px;
    font-size: 56px;
}

/* Bigger medallion, so the chip scales with it — the glyph must stay inside it. */
.voap-badge-modal .voap-badge__lock {
    right: 2px;
    bottom: 2px;
    width: 32px !important;
    height: 32px !important;
    border-width: 3px;
    font-size: 16px !important;
}

.voap-badge-modal__progress {
    margin-top: 14px;
}

.voap-badge-modal__bar {
    height: 8px;
    border-radius: 999px;
    background: rgba(102, 12, 27, .12);
    overflow: hidden;
}

.voap-badge-modal__bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--voap-p-fg, #660C1B);
    transition: width .4s ease;
}

.voap-badge-modal__progress p {
    margin: 6px 0 0;
    color: var(--gg-text-muted, #725f58);
    font-size: 12px;
    font-weight: 700;
}

.voap-badge-modal h4 {
    margin: 0 0 6px;
    font-size: 19px;
}

.voap-badge-modal__status {
    margin: 0;
    color: var(--gg-text-muted, #725f58);
    font-size: 12px;
    font-weight: 700;
}

.voap-badge-modal.is-earned .voap-badge-modal__status {
    color: var(--gg-gold-dark, #8a671a);
}

.voap-badge-modal__description {
    margin-top: 14px;
    color: var(--gg-text-muted, #725f58);
    font-size: 14px;
    line-height: 1.55;
    text-align: left;
}

.voap-badge-modal__description p {
    margin: 0 0 8px;
}

.voap-badge-modal__description p:last-child {
    margin-bottom: 0;
}

.voap-badge-modal__perks {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--gg-border, #e6d8c2);
    text-align: left;
}

.voap-badge-modal__perks h5 {
    margin: 0 0 6px;
    color: var(--gg-text-muted, #725f58);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.voap-badge-modal__perks ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    line-height: 1.5;
}

.voap-badge-modal__perks li {
    position: relative;
    padding: 3px 0 3px 22px;
}

.voap-badge-modal__perks li::before {
    position: absolute;
    left: 0;
    content: "★";
    color: var(--gg-gold, #c9a24b);
}

/* Locked badges list what the perks *would* be, so keep them visibly pending. */
.voap-badge-modal.is-locked .voap-badge-modal__perks li::before {
    color: var(--voap-p-muted, #93686f);
}

/* A ladder step that a later one has taken over: the badge stays, the reward reads as past. */
.voap-badge-modal__perks.is-superseded ul {
    opacity: .55;
    text-decoration: line-through;
}

.voap-badge-modal__perks.is-superseded li::before {
    color: var(--voap-p-muted, #93686f);
    text-decoration: none;
}

.voap-badge-modal__superseded {
    margin: 8px 0 0;
    color: var(--gg-text-muted, #725f58);
    font-size: 12px;
    line-height: 1.45;
}

.voap-badge__perk-flag {
    display: inline-block;
    padding: 2px 9px;
    border: 1px solid var(--gg-gold, #f4a900);
    border-radius: 999px;
    background: transparent;
    color: var(--gg-gold-dark, #8a671a);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.6;
    text-transform: uppercase;
}

.voap-badge-modal__close {
    position: absolute;
    top: 10px;
    right: 12px;
    padding: 0 6px;
    border: 0;
    background: none;
    color: var(--gg-text-muted, #725f58);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

@media (max-width: 600px) {
    .voap-progression__heading {
        display: block;
    }

    .voap-progression__count {
        display: inline-flex;
        margin-top: 8px;
    }
}

/* The rank view — header card and ladder alike — runs on the house colour
   instead of the profile's orange accent. */
.voap-rank,
#voap-milestones {
    --voap-p-accent: #660c1b;
}

/* Badge case: the medallions the member has won, in line with the avatar
   and the balances. */
.voap-rank {
    flex: 1 1 320px;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid var(--voap-p-track, #ece7df);
    border-radius: var(--voap-p-radius, 14px);
    background: var(--gg-surface-soft, #f9f2e3);
    scroll-margin-top: 24px;
}

/* The case: the rank held, then the top earned step of every badge group. */
.voap-case {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

/* Doubled-up selectors for the reason the badge grid needs them too: a tile is
   a <button>, and Elementor's global button style outranks a single class. */
.voap-case .voap-case__item,
.voap-profile a.voap-case__item {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 88px;
    margin: 0;
    padding: 6px 2px;
    border: 0;
    background: none;
    background-image: none;
    color: var(--voap-p-fg, #660c1b);
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: normal;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    text-shadow: none;
    box-shadow: none;
    cursor: pointer;
    transition: transform .15s ease;
}

.voap-case .voap-case__item:hover,
.voap-case .voap-case__item:focus-visible,
.voap-profile a.voap-case__item:hover,
.voap-profile a.voap-case__item:focus {
    transform: translateY(-2px);
    background-image: none;
    color: var(--voap-p-fg, #660c1b);
}

/* Everything in the case is earned, so every medallion reads gold. */
.voap-case .voap-badge__image {
    box-sizing: border-box;
    width: 56px;
    height: 56px;
    border: 1px solid var(--gg-gold, #f4a900);
    box-shadow: 0 2px 10px rgba(244, 169, 0, .18);
}

.voap-case__label {
    color: var(--voap-p-muted, #93686f);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.voap-case__title {
    font-weight: 800;
}

.voap-rank__bar {
    height: 7px;
    margin-top: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--voap-p-track, #ece7df);
}

.voap-rank__bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--voap-p-accent, #e8542f);
}

.voap-profile a.voap-rank__more {
    display: inline-block;
    margin-top: 10px;
    color: var(--voap-p-accent, #660c1b);
    font-size: .9em;
    font-weight: 700;
}

.voap-profile a.voap-rank__more:hover,
.voap-profile a.voap-rank__more:focus {
    color: #470813;
}

.voap-rank__perks {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    font-size: .9em;
}

.voap-rank__perk {
    position: relative;
    padding: 3px 0 3px 22px;
}

.voap-rank__perk::before {
    position: absolute;
    left: 0;
    content: "★";
    color: var(--gg-gold, #c9a24b);
}

/* The ladder: one step per rank, its milestones listed underneath as the
   requirements. Reached steps read gold, the next one carries the accent. */
.voap-ladder {
    display: grid;
    gap: 12px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.voap-ladder__step {
    display: flex;
    gap: 14px;
    box-sizing: border-box;
    padding: 14px;
    border: 1px solid var(--voap-p-track, #ece7df);
    border-left: 4px solid var(--voap-p-track, #ece7df);
    border-radius: var(--voap-p-radius, 14px);
    background: var(--voap-p-bg, #fffdf9);
}

.voap-ladder__step.is-locked {
    border-style: dashed;
    background: #fbf8f2;
}

.voap-ladder__step.is-next {
    border-style: solid;
    border-left-color: var(--voap-p-accent, #e8542f);
}

.voap-ladder__marker {
    display: grid;
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    place-items: center;
    border-radius: 50%;
    background: var(--gg-surface-soft, #f6efe1);
    color: var(--gg-gold-dark, #8a671a);
    font-size: 18px;
    font-weight: 800;
    line-height: 0;
}

.voap-ladder__marker img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.is-locked .voap-ladder__marker img {
    filter: grayscale(1);
    opacity: .5;
}

.voap-ladder__body {
    flex: 1 1 auto;
    min-width: 0;
}

.voap-ladder__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.voap-ladder__name {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.25;
}

.voap-ladder__status {
    color: var(--voap-p-muted, #93686f);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.voap-ladder__step.is-next .voap-ladder__status {
    color: var(--voap-p-accent, #e8542f);
}

.voap-ladder .voap-rank__bar {
    margin-top: 10px;
}

.voap-ladder__reqs {
    display: grid;
    gap: 8px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

/* Title and count on one row, the detail line and the bar spanning both. */
.voap-ladder__req {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--gg-surface-soft, #f9f2e3);
    font-size: 13px;
}

.voap-ladder__req-title {
    font-weight: 700;
}

.voap-ladder__req-title::before {
    content: "○";
    margin-right: 6px;
    color: var(--voap-p-muted, #93686f);
}

.voap-ladder__req.is-met {
    color: var(--voap-p-muted, #93686f);
}

.voap-ladder__req.is-met .voap-ladder__req-title::before {
    content: "✔";
    color: var(--gg-emerald, #0e9f6e);
}

.voap-ladder__req-count {
    color: var(--voap-p-muted, #93686f);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.voap-ladder__req-detail {
    grid-column: 1 / -1;
    color: var(--voap-p-muted, #93686f);
    font-size: 12px;
    line-height: 1.4;
}

.voap-ladder__req-reward {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--voap-p-muted, #93686f);
    font-size: 12px;
    font-weight: 700;
}

.voap-ladder__req-bar {
    grid-column: 1 / -1;
    height: 5px;
    margin-top: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--voap-p-track, #ece7df);
}

.voap-ladder__req-bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--voap-p-accent, #e8542f);
}

.voap-ladder__req.is-met .voap-ladder__req-bar > span {
    background: var(--gg-gold, #f4a900);
}

@media (max-width: 600px) {
    .voap-ladder__step {
        flex-direction: column;
    }

    .voap-ladder__marker {
        width: 44px;
        height: 44px;
    }
}