/*
 * Room33 Dashboard — Monetisation CTA Panel
 * File: assets/css/modules/monetisation-cta.css
 *
 * Loaded automatically via the glob() asset loader.
 * Uses CSS custom properties from dashboard-base.css.
 */

/* ── Panel shell ─────────────────────────────────────────────────────────── */

.r33-monetisation-cta {
    background   : var(--r33-card-bg, #1a1a2e);
    border       : 1px solid var(--r33-border, rgba(255,255,255,.08));
    border-radius: var(--r33-radius, 12px);
    padding      : 18px 20px;
    margin-top   : 12px;
    display      : flex;
    align-items  : center;
    gap          : 16px;
    flex-wrap    : wrap;
}

/* Accent left border per tier */
.r33-monetisation-cta--new         { border-left: 3px solid #52c882; }
.r33-monetisation-cta--rising_star { border-left: 3px solid var(--r33-accent, #e91e8c); }
.r33-monetisation-cta--top         { border-left: 3px solid #ffbd2e; }
.r33-monetisation-cta--elite     { border-left: 3px solid #ffbd2e; }
.r33-monetisation-cta--vip         { border-left: 3px solid #ffd700; }


/* ── Text ────────────────────────────────────────────────────────────────── */

.r33-cta-text {
    flex     : 1 1 200px;
    margin   : 0;
    font-size: 0.84rem;
    color    : var(--r33-text-secondary, #ccc);
    line-height: 1.45;
}


/* ── Actions row ─────────────────────────────────────────────────────────── */

.r33-cta-actions {
    display    : flex;
    align-items: center;
    gap        : 12px;
    flex-wrap  : wrap;
    flex-shrink: 0;
}


/* ── Primary CTA button ──────────────────────────────────────────────────── */

.r33-cta-btn {
    display        : inline-flex;
    align-items    : center;
    gap            : 6px;
    padding        : 9px 18px;
    border-radius  : var(--r33-radius-sm, 8px);
    font-size      : 0.82rem;
    font-weight    : 600;
    text-decoration: none;
    white-space    : nowrap;
    transition     : opacity .2s, transform .15s;
    border         : none;
    cursor         : pointer;
}

.r33-cta-btn:hover {
    opacity  : .88;
    transform: translateY(-1px);
}

/* Variants */
.r33-cta-btn--primary {
    background: rgba(255,255,255,.10);
    color     : var(--r33-text-primary, #fff);
    border    : 1px solid rgba(255,255,255,.16);
}

.r33-cta-btn--accent {
    background: var(--r33-accent, #e91e8c);
    color     : #fff;
}

.r33-cta-btn--gold {
    background: linear-gradient(135deg, #d4a017, #ffbd2e);
    color     : #1a1209;
}


/* ── Secondary Q upsell link ─────────────────────────────────────────────── */

.r33-cta-link {
    display        : inline-flex;
    align-items    : center;
    gap            : 4px;
    font-size      : 0.78rem;
    color          : var(--r33-text-muted, #888);
    text-decoration: none;
    white-space    : nowrap;
    transition     : color .2s;
}

.r33-cta-link:hover {
    color: var(--r33-text-secondary, #ccc);
}


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

@media (max-width: 600px) {
    .r33-monetisation-cta {
        flex-direction: column;
        align-items   : flex-start;
    }
}