/*
 * Room33 Dashboard — Exclusive Module
 * File: assets/css/modules/exclusive.css
 */

/* ── Module wrapper ─────────────────────────────────────────────────────── */

.r33-exclusive-module {
    display       : flex;
    flex-direction: column;
    gap           : 32px;
}

/* ── Section titles ─────────────────────────────────────────────────────── */

.r33-excl-section-title {
    margin        : 0 0 16px;
    font-size     : 0.9rem;
    font-weight   : 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color         : var(--r33-text-muted, #888);
}


/* ── Balance strip ──────────────────────────────────────────────────────── */

.r33-excl-balance-strip {
    display        : flex;
    align-items    : center !important;
    justify-content: flex-start;
    gap            : 8px;
    padding        : 12px 18px;
    margin-top     : 20px;
    min-height     : 60px;
    background     : var(--r33-card-bg, #1a1a2e);
    border         : 1px solid var(--r33-border, rgba(255,255,255,.08));
    border-radius  : var(--r33-radius, 12px);
}

.r33-excl-balance-strip .r33-excl-gold-value {
    font-size  : 1.25rem;
    font-weight: 700;
    color      : var(--r33-text-primary, #fff);
}

.r33-excl-balance-strip .r33-excl-topup-btn {
    margin-left: auto;
    padding    : 7px 16px;
    font-size  : 0.8rem;
}


/* ── Section 1: Wallet ──────────────────────────────────────────────────── */

.r33-excl-wallet {
    background   : var(--r33-card-bg, #1a1a2e);
    border       : 1px solid var(--r33-border, rgba(255,255,255,.08));
    border-radius: var(--r33-radius, 12px);
    padding      : 24px;
}

.r33-excl-wallet-balance {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    gap            : 16px;
    flex-wrap      : wrap;
}

.r33-excl-wallet-amount {
    display    : flex;
    align-items: center;
    gap        : 10px;
}

.r33-excl-gold-icon {
    color      : #ffd700;
    display    : flex;
    align-items: center;
    flex-shrink: 0;
}

.r33-excl-gold-value {
    font-size  : 2rem;
    font-weight: 700;
    color      : var(--r33-text-primary, #fff);
    line-height: 1;
}

.r33-excl-gold-label {
    font-size     : 0.9rem;
    font-weight   : 600;
    color         : var(--r33-text-muted, #888);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.r33-excl-topup-btn {
    display        : inline-flex;
    align-items    : center;
    gap            : 6px;
    padding        : 10px 22px;
    background     : var(--r33-accent, #e91e8c);
    color          : #fff;
    border-radius  : var(--r33-radius-sm, 8px);
    font-size      : 0.85rem;
    font-weight    : 600;
    text-decoration: none;
    white-space    : nowrap;
    transition     : opacity .2s;
}

.r33-excl-topup-btn:hover { opacity: .85; color: #fff; }

.r33-excl-low-balance-warning {
    display      : flex;
    align-items  : center;
    gap          : 8px;
    margin       : 14px 0 0;
    padding      : 10px 14px;
    background   : rgba(231,76,60,.08);
    border       : 1px solid rgba(231,76,60,.20);
    border-radius: var(--r33-radius-sm, 8px);
    font-size    : 0.82rem;
    color        : #e74c3c;
}

.r33-excl-gold-explainer {
    margin-top : 18px;
    border-top : 1px solid var(--r33-border, rgba(255,255,255,.06));
    padding-top: 16px;
}

.r33-excl-gold-explainer summary {
    font-size  : 0.82rem;
    font-weight: 600;
    color      : var(--r33-text-muted, #888);
    cursor     : pointer;
    user-select: none;
    list-style : none;
}

.r33-excl-gold-explainer summary::-webkit-details-marker { display: none; }
.r33-excl-gold-explainer summary::after        { content: ' ↓'; font-size: .72rem; }
.r33-excl-gold-explainer[open] summary::after  { content: ' ↑'; }

.r33-excl-gold-uses {
    margin    : 12px 0 0;
    padding   : 0;
    list-style: none;
    display   : flex;
    flex-wrap : wrap;
    gap       : 8px 24px;
}

.r33-excl-gold-uses li     { font-size: 0.82rem; color: var(--r33-text-secondary, #ccc); }
.r33-excl-gold-uses strong { color: var(--r33-text-primary, #fff); }


/* ── Section 2: Current Plan ────────────────────────────────────────────── */

.r33-excl-current-plan {
    position     : relative;
    background   : var(--r33-card-bg, #1a1a2e);
    border       : 1px solid var(--r33-border, rgba(255,255,255,.08));
    border-radius: var(--r33-radius, 12px);
    padding      : 24px;
    overflow     : hidden;
}

/* Free: muted */
.r33-excl-current-plan--free {
    border-color: rgba(255,255,255,.08);
    opacity     : .85;
}

/* Paid tiers: gold glow */
.r33-excl-current-plan--top {
    border-color: rgba(255,189,46,.40);
    box-shadow  : 0 0 0 1px rgba(255,189,46,.12), 0 4px 24px rgba(255,189,46,.06);
}

.r33-excl-current-plan--vip {
    border-color: rgba(255,215,0,.45);
    box-shadow  : 0 0 0 1px rgba(255,215,0,.14), 0 4px 24px rgba(255,215,0,.08);
}

.r33-excl-current-plan--elite {
    border-color: rgba(255,189,46,.55);
    box-shadow  : 0 0 0 2px rgba(255,189,46,.18), 0 6px 32px rgba(255,189,46,.10);
}

/* ACTIVE corner badge */
.r33-excl-plan-active-badge {
    position      : absolute;
    top           : 0;
    right         : 0;
    padding       : 4px 14px;
    background    : rgba(46,204,113,.15);
    color         : #2ecc71;
    font-size     : 0.68rem;
    font-weight   : 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-radius : 0 12px 0 8px;
}

.r33-excl-plan-header {
    display    : flex;
    align-items: flex-start;
    gap        : 12px;
    margin-bottom: 16px;
}

.r33-excl-plan-name {
    font-size  : 1.15rem;
    font-weight: 700;
    color      : var(--r33-text-primary, #fff);
    line-height: 1.2;
}

.r33-excl-plan-status {
    margin-top : 4px;
    font-size  : 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.r33-excl-plan-status--free    { color: var(--r33-text-muted, #888); }
.r33-excl-plan-status--top     { color: #ffbd2e; }
.r33-excl-plan-status--vip     { color: #ffd700; }
.r33-excl-plan-status--elite { color: #ffbd2e; }

/* Perks / limits list */
.r33-excl-plan-perks {
    margin    : 0 0 14px;
    padding   : 0;
    list-style: none;
    display   : flex;
    flex-direction: column;
    gap       : 6px;
}

.r33-excl-plan-perks li {
    font-size  : 0.84rem;
    line-height: 1.4;
}

.r33-excl-plan-perk--ok   { color: var(--r33-text-secondary, #ccc); }
.r33-excl-plan-perk--warn { color: #e67e22; }

/* Expiry row */
.r33-excl-plan-expiry {
    display   : flex;
    align-items: center;
    gap       : 8px;
    margin    : 0 0 16px;
    font-size : 0.82rem;
}

.r33-excl-plan-expiry-label { color: var(--r33-text-muted, #888); }
.r33-excl-plan-expiry-val   { color: var(--r33-text-secondary, #ccc); font-weight: 600; }

/* Plan CTA link */
.r33-excl-plan-cta {
    display        : inline-flex;
    align-items    : center;
    padding        : 10px 20px;
    border-radius  : var(--r33-radius-sm, 8px);
    font-size      : 0.84rem;
    font-weight    : 600;
    text-decoration: none;
    transition     : opacity .2s;
    align-self     : flex-start;
}

.r33-excl-plan-cta--free              { background: var(--r33-accent, #e91e8c); color: #fff; }
.r33-excl-plan-cta--top               { background: rgba(255,189,46,.15); color: #ffbd2e; border: 1px solid rgba(255,189,46,.25); }
.r33-excl-plan-cta--vip               { background: rgba(255,215,0,.12);  color: #ffd700; border: 1px solid rgba(255,215,0,.22); }
.r33-excl-plan-cta:hover              { opacity: .85; }
.r33-excl-plan-cta--free:hover        { color: #fff; }
.r33-excl-plan-cta--top:hover         { color: #ffbd2e; }
.r33-excl-plan-cta--vip:hover         { color: #ffd700; }

.r33-excl-plan-top-note {
    margin   : 0;
    font-size: 0.82rem;
    color    : var(--r33-text-muted, #888);
    font-style: italic;
}


/* ── Section 3: Tier Ladder ─────────────────────────────────────────────── */

.r33-excl-ladder {
    display    : flex;
    align-items: center;
    flex-wrap  : wrap;
    gap        : 6px;
}

.r33-excl-ladder-arrow {
    color    : var(--r33-text-muted, #666);
    font-size: 0.9rem;
}

.r33-excl-step {
    display       : flex;
    flex-direction: column;
    align-items   : center;
    gap           : 4px;
    padding       : 10px 18px;
    border-radius : var(--r33-radius-sm, 8px);
    border        : 1px solid transparent;
    min-width     : 72px;
    text-align    : center;
}

.r33-excl-step-label {
    font-size  : 0.82rem;
    font-weight: 600;
    color      : var(--r33-text-primary, #fff);
}

.r33-excl-step-tag {
    font-size     : 0.68rem;
    font-weight   : 600;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* Done (past tier) */
.r33-excl-step--done {
    background  : rgba(46,204,113,.06);
    border-color: rgba(46,204,113,.15);
}
.r33-excl-step--done .r33-excl-step-tag { color: #2ecc71; }

/* Active */
.r33-excl-step--active {
    background  : rgba(255,189,46,.10);
    border-color: rgba(255,189,46,.35);
}
.r33-excl-step--active.r33-excl-step--free {
    background  : rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.12);
}
.r33-excl-step--active .r33-excl-step-tag  { color: #ffbd2e; }
.r33-excl-step--active.r33-excl-step--free .r33-excl-step-tag { color: var(--r33-text-muted, #888); }

/* Locked (future) */
.r33-excl-step--locked {
    background  : rgba(255,255,255,.02);
    border-color: rgba(255,255,255,.06);
    opacity     : .6;
}
.r33-excl-step--locked .r33-excl-step-tag  { color: var(--r33-text-muted, #666); }


/* Linked steps (non-active) */
a.r33-excl-step--link {
    text-decoration: none;
    cursor         : pointer;
    transition     : border-color .15s, background .15s, opacity .15s;
}
a.r33-excl-step--link:hover {
    opacity     : 1;
    border-color: rgba(255,215,0,.40) !important;
    background  : rgba(255,215,0,.08) !important;
}
a.r33-excl-step--link:hover .r33-excl-step-label { color: #ffd700; }
a.r33-excl-step--link:hover .r33-excl-step-tag   { color: #ffd700 !important; }


/* ── Section 4: Upgrade cards grid ─────────────────────────────────────── */

.r33-exclusive-cards {
    display              : grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap                  : 16px;
}

.r33-excl-card {
    position      : relative;
    background    : var(--r33-card-bg, #1a1a2e);
    border        : 1px solid var(--r33-border, rgba(255,255,255,.08));
    border-radius : var(--r33-radius, 12px);
    padding       : 22px;
    display       : flex;
    flex-direction: column;
    gap           : 8px;
    cursor        : default;
}


.r33-excl-card--active {
    border-color: rgba(255,189,46,.40);
    box-shadow  : 0 0 0 1px rgba(255,189,46,.10);
}

.r33-excl-card--past {
    opacity: .55;
}

/* Elite gold border */
.r33-excl-card--elite {
    border-color: rgba(255,189,46,.25);
    box-shadow  : 0 0 0 1px rgba(255,189,46,.10);
}

.r33-excl-card--elite.r33-excl-card--active {
    border-color: rgba(255,189,46,.55);
    box-shadow  : 0 0 0 2px rgba(255,189,46,.18);
}

/* ACTIVE tag inside upgrade card */
.r33-excl-card-active-tag {
    position      : absolute;
    top           : 0;
    right         : 0;
    padding       : 4px 12px;
    background    : rgba(46,204,113,.12);
    color         : #2ecc71;
    font-size     : 0.68rem;
    font-weight   : 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-radius : 0 12px 0 8px;
}

.r33-excl-expiry {
    margin     : 4px 0 8px;
    font-size  : 0.78rem;
    color      : #52c882;
    font-weight: 500;
}

.r33-excl-no-transfer-note {
    margin    : 20px 0 0;
    font-size : 0.72rem;
    color     : rgba(255,255,255,.35);
    font-style: italic;
}

.r33-excl-plan-expiry-val--none {
    color      : rgba(255,255,255,.35);
    font-style : italic;
}

.r33-excl-card h3 {
    margin    : 0;
    font-size : 1rem;
    font-weight: 600;
    color     : var(--r33-text-primary, #fff);
}

.r33-excl-card > p {
    margin     : 0;
    font-size  : 0.84rem;
    color      : var(--r33-text-muted, #888);
    line-height: 1.45;
}

/* Badge pills */
.r33-excl-card-badge {
    display       : inline-flex;
    align-items   : center;
    padding       : 3px 10px;
    border-radius : 20px;
    font-size     : 0.72rem;
    font-weight   : 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    align-self    : flex-start;
}

.r33-excl-card-badge--top     { background: rgba(255,189,46,.15); color: #ffbd2e; }
.r33-excl-card-badge--elite { background: rgba(255,189,46,.20); color: #ffbd2e; border: 1px solid rgba(255,189,46,.30); }
.r33-excl-card-badge--vip     { background: rgba(255,215,0,.18);  color: #ffd700; }
.r33-excl-card-badge--q       { background: rgba(233,30,140,.15); color: #e91e8c; }


/* ── Benefits list ──────────────────────────────────────────────────────── */

.r33-excl-benefits {
    margin    : 4px 0 8px;
    padding   : 0 0 0 16px;
    list-style: disc;
}

.r33-excl-benefits li {
    font-size  : 0.82rem;
    color      : var(--r33-text-secondary, #ccc);
    line-height: 1.6;
}


/* ── Duration rows ──────────────────────────────────────────────────────── */

.r33-excl-durations {
    display       : flex;
    flex-direction: column;
    gap           : 8px;
    margin-top    : 4px;
}

.r33-excl-duration-row {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    gap            : 8px;
    padding        : 8px 10px;
    background     : rgba(255,255,255,.03);
    border-radius  : var(--r33-radius-sm, 8px);
    flex-wrap      : wrap;
}

.r33-excl-duration-row[data-type] {
    cursor    : pointer;
    transition: background .15s, border-color .15s;
}

.r33-excl-duration-row[data-type]:hover {
    background  : rgba(255,215,0,.06);
    border-color: rgba(255,215,0,.25);
}

.r33-excl-duration-row > span:first-child {
    font-size: 0.84rem;
    color    : var(--r33-text-secondary, #ccc);
}

.r33-excl-cost {
    font-size  : 0.82rem;
    font-weight: 600;
    color      : #ffd700;
}

.r33-excl-saving {
    font-size      : 0.7rem;
    font-weight    : 700;
    color          : #2d9e5f;
    background     : rgba(45,158,95,0.12);
    border-radius  : 4px;
    padding        : 1px 6px;
    letter-spacing : 0.02em;
}


/* ── Activate buttons ───────────────────────────────────────────────────── */

.r33-excl-activate-btn {
    display        : inline-flex;
    align-items    : center;
    padding        : 7px 14px;
    background     : var(--r33-accent, #e91e8c);
    color          : #fff;
    border         : none;
    border-radius  : var(--r33-radius-sm, 8px);
    font-size      : 0.78rem;
    font-weight    : 600;
    cursor         : pointer;
    white-space    : nowrap;
    transition     : opacity .2s;
    text-decoration: none;
}

.r33-excl-activate-btn:hover { opacity: .85; }

.r33-excl-activate-btn--disabled,
.r33-excl-activate-btn[disabled] {
    background: rgba(255,255,255,.08);
    color     : var(--r33-text-muted, #666);
    cursor    : not-allowed;
    opacity   : 1;
}

.r33-excl-card-header {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    gap            : 8px;
}

/* Override active tag — remove absolute so it sits in the flex row */
.r33-excl-card-header .r33-excl-card-active-tag {
    position: static;
    border-radius: 20px;
}

.r33-excl-card-lock-tag {
    display        : flex;
    flex-direction : column;
    align-items    : flex-end;
    font-size      : 0.84rem;
    font-weight    : 500;
    color          : #52c882;
    text-decoration: none;
    transition     : color .15s;
    line-height    : 1.4;
}

.r33-excl-card-lock-tag::after {
    content    : '🔒';
    font-size  : 0.9rem;
    padding-top: 3px;
}

.r33-excl-card-lock-tag:hover {
    color: #72d898;
}

.r33-excl-activate-btn--success {
    background: rgba(46,204,113,.15);
    color     : #2ecc71;
    cursor    : default;
    opacity   : 1;
}

.r33-excl-activate-btn--accent {
    background     : rgba(233,30,140,.15);
    color          : #e91e8c;
    border         : 1px solid rgba(233,30,140,.25);
    width          : 100%;
    justify-content: center;
    padding        : 10px 14px;
    font-size      : 0.84rem;
}

.r33-excl-activate-btn--accent:hover { background: rgba(233,30,140,.25); opacity: 1; }

.r33-excl-topup-inline {
    display        : inline-flex;
    align-items    : center;
    font-size      : 0.72rem;
    color          : #fff;
    background     : var(--r33-accent, #e91e8c);
    text-decoration: none;
    font-weight    : 600;
    padding        : 3px 10px;
    border-radius  : 20px;
    margin-top     : 4px;
    transition     : opacity .2s;
}

.r33-excl-topup-inline:hover { opacity: .80; color: #fff; }

/* Highlighted card (anchor scroll target) */
.r33-excl-card--highlighted {
    border-color: var(--r33-accent, #e91e8c);
    box-shadow  : 0 0 0 3px rgba(233,30,140,.12);
    transition  : border-color .3s, box-shadow .3s;
}


/* ── Verify-to-unlock inline notice (shown on row click when unverified) ── */

.r33-excl-verify-notice {
    display      : flex;
    align-items  : flex-start;
    gap          : 14px;
    padding      : 18px;
    background   : rgba(82,200,130,.06);
    border       : 1px solid rgba(82,200,130,.22);
    border-radius: var(--r33-radius, 12px);
    margin-top   : 4px;
}

.r33-excl-verify-notice__icon {
    font-size  : 1.4rem;
    flex-shrink: 0;
    line-height: 1;
    margin-top : 2px;
}

.r33-excl-verify-notice__body {
    flex: 1;
}

.r33-excl-verify-notice__body strong {
    display      : block;
    font-size    : 0.9rem;
    font-weight  : 700;
    color        : #52c882;
    margin-bottom: 4px;
}

.r33-excl-verify-notice__body p {
    margin     : 0 0 12px;
    font-size  : 0.82rem;
    color      : var(--r33-text-secondary, #ccc);
    line-height: 1.5;
}

.r33-excl-verify-notice-btn {
    display        : inline-flex;
    align-items    : center;
    padding        : 8px 18px;
    background     : #52c882;
    color          : #1a1a2e;
    font-size      : 0.84rem;
    font-weight    : 700;
    border-radius  : var(--r33-radius-sm, 8px);
    text-decoration: none;
    transition     : background .15s;
}

.r33-excl-verify-notice-btn:hover { background: #72d898; color: #1a1a2e; }

.r33-excl-verify-notice-close {
    background : none;
    border     : none;
    color      : var(--r33-text-muted, #666);
    font-size  : 1.2rem;
    cursor     : pointer;
    line-height: 1;
    padding    : 0;
    flex-shrink: 0;
}

.r33-excl-verify-notice-close:hover { color: #fff; }


/* ── Verification notice ────────────────────────────────────────────────── */

.r33-excl-verif-notice {
    display      : flex;
    align-items  : flex-start;
    gap          : 14px;
    padding      : 16px 18px;
    border-radius: var(--r33-radius-sm, 8px);
    margin-bottom: 16px;
    border       : 1px solid transparent;
}

.r33-excl-verif-notice-icon {
    font-size  : 1.2rem;
    flex-shrink: 0;
    margin-top : 1px;
}

.r33-excl-verif-notice strong {
    display    : block;
    font-size  : 0.88rem;
    font-weight: 700;
    color      : var(--r33-text-primary, #fff);
    margin-bottom: 4px;
}

.r33-excl-verif-notice p {
    margin   : 0 0 10px;
    font-size: 0.82rem;
    color    : var(--r33-text-secondary, #ccc);
    line-height: 1.5;
}

.r33-excl-verif-notice p:last-child { margin-bottom: 0; }

.r33-excl-verif-cta {
    display        : inline-flex;
    align-items    : center;
    padding        : 7px 16px;
    border-radius  : var(--r33-radius-sm, 8px);
    font-size      : 0.8rem;
    font-weight    : 600;
    text-decoration: none;
    transition     : opacity .2s;
}

.r33-excl-verif-notice--required {
    background  : rgba(255,215,0,.06);
    border-color: rgba(255,215,0,.18);
}
.r33-excl-verif-notice--required .r33-excl-verif-cta {
    background: linear-gradient(135deg, #c9a84c, #f0d060);
    color     : #1a1a2e;
}
.r33-excl-verif-notice--required .r33-excl-verif-cta:hover { opacity: .85; }

.r33-excl-verif-notice--pending {
    background  : rgba(255,189,46,.06);
    border-color: rgba(255,189,46,.18);
}
.r33-excl-verif-notice--pending strong { color: #ffbd2e; }

.r33-excl-verif-notice--rejected {
    background  : rgba(231,76,60,.06);
    border-color: rgba(231,76,60,.18);
}
.r33-excl-verif-notice--rejected strong { color: #e74c3c; }
.r33-excl-verif-notice--rejected .r33-excl-verif-cta {
    background: rgba(231,76,60,.15);
    color     : #e74c3c;
    border    : 1px solid rgba(231,76,60,.25);
}


/* ── Section 5: Room33 Q ────────────────────────────────────────────────── */

.r33-excl-q-section {
    background   : var(--r33-card-bg, #1a1a2e);
    border       : 1px solid rgba(233,30,140,.20);
    border-radius: var(--r33-radius, 12px);
    padding      : 24px;
}

.r33-excl-q-header {
    display    : flex;
    align-items: center;
    gap        : 12px;
    margin-bottom: 16px;
}

.r33-excl-q-note {
    font-size: 0.78rem;
    color    : var(--r33-text-muted, #888);
}

.r33-excl-q-body {
    display  : flex;
    gap      : 24px;
    flex-wrap: wrap;
}

.r33-excl-q-info {
    flex: 1;
    min-width: 220px;
}

.r33-excl-q-info h3 {
    margin    : 0 0 8px;
    font-size : 1rem;
    font-weight: 700;
    color     : var(--r33-text-primary, #fff);
}

.r33-excl-q-info p {
    margin    : 0 0 12px;
    font-size : 0.84rem;
    color     : var(--r33-text-muted, #888);
    line-height: 1.5;
}

.r33-excl-q-action {
    display       : flex;
    flex-direction: column;
    justify-content: center;
    align-items   : center;
    gap           : 8px;
    min-width     : 180px;
}

.r33-excl-q-applied {
    display    : flex;
    align-items: center;
    gap        : 8px;
    padding    : 10px 18px;
    background : rgba(46,204,113,.08);
    border     : 1px solid rgba(46,204,113,.20);
    border-radius: var(--r33-radius-sm, 8px);
    color      : #2ecc71;
    font-size  : 0.84rem;
    font-weight: 600;
}

.r33-excl-coming-note {
    margin    : 0;
    font-size : 0.75rem;
    color     : var(--r33-text-muted, #666);
    text-align: center;
}


/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
    .r33-exclusive-cards {
        grid-template-columns: 1fr;
    }

    .r33-excl-duration-row {
        flex-wrap: wrap;
        row-gap  : 8px;
    }

    .r33-excl-ladder {
        justify-content: center;
    }

    .r33-excl-q-body {
        flex-direction: column;
    }

    .r33-excl-q-action {
        width: 100%;
    }
}