/* ═══════════════════════════════════════════════════════════════════════════
   RaiderTrader Subscriptions — Frontend CSS
   Designed to blend with the hello-elementor-child dark theme.
   Uses theme-matching colors: dark bg #1a1a1a, card bg ~#242424, gold #f59e0b
═══════════════════════════════════════════════════════════════════════════ */

:root {
    --rt-gold:          #f59e0b;
    --rt-gold-dark:     #d97706;
    --rt-gold-glow:     rgba(245,158,11,.15);
    --rt-purple:        #6366f1;
    --rt-purple-dark:   #4f46e5;
    --rt-success:       #10b981;
    --rt-error:         #ef4444;
    --rt-warning:       #f59e0b;

    /* Match theme dark palette */
    --rt-bg:            #141414;
    --rt-card:          #1e1e1e;
    --rt-card-border:   #2e2e2e;
    --rt-card-hover:    #262626;
    --rt-text:          #f0f0f0;
    --rt-text-muted:    #888;
    --rt-text-dim:      #555;

    --rt-radius:        12px;
    --rt-radius-sm:     8px;
    --rt-radius-xs:     5px;
}

/* ── Layout wrapper ──────────────────────────────────────────────────────── */
.rt-blended-dashboard { width: 100%; }

/* ── Flash messages ──────────────────────────────────────────────────────── */
.rt-flash {
    padding: 14px 18px;
    border-radius: var(--rt-radius-sm);
    margin-bottom: 24px;
    font-size: .9rem;
}
.rt-flash-success {
    background: rgba(16,185,129,.12);
    border: 1px solid rgba(16,185,129,.3);
    color: #6ee7b7;
}

/* ── Section heading (matches theme "Membership" style) ──────────────────── */
.rt-section { margin-bottom: 32px; }
.rt-section-heading {
    font-size: 1rem;
    font-weight: 700;
    color: var(--rt-text);
    margin: 0 0 14px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* ══════════════════════════════════════════════════════════════════════════
   MEMBERSHIP CARD — mirrors the theme's PRO card exactly
══════════════════════════════════════════════════════════════════════════ */
.rt-membership-card {
    background: var(--rt-card);
    border: 1px solid var(--rt-card-border);
    border-radius: var(--rt-radius);
    padding: 22px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 2px;
}
.rt-membership-pro {
    border-color: rgba(245,158,11,.35);
    background: linear-gradient(135deg, rgba(245,158,11,.07) 0%, var(--rt-card) 50%);
}
.rt-membership-free {
    border-color: var(--rt-card-border);
}

.rt-membership-main {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

/* PRO badge — matches theme's orange "PRO" block */
.rt-pro-badge-lg {
    background: var(--rt-gold);
    color: #000;
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .1em;
    padding: 5px 10px;
    border-radius: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

.rt-membership-title {
    margin: 0 0 2px;
    font-size: .95rem;
    font-weight: 700;
    color: var(--rt-text);
}
.rt-membership-price {
    margin: 0 0 2px;
    font-size: .8rem;
    color: var(--rt-text-muted);
}
.rt-membership-renews {
    margin: 0;
    font-size: .8rem;
    color: var(--rt-text-muted);
}
.rt-text-warning { color: var(--rt-warning) !important; }
.rt-text-muted   { color: var(--rt-text-muted) !important; }

/* Lightning bolt icon — right side of card */
.rt-membership-icon {
    font-size: 2rem;
    opacity: .25;
    flex-shrink: 0;
}
.rt-membership-pro .rt-membership-icon { opacity: .5; }

/* ── Billing details row (below membership card) ─────────────────────────── */
.rt-billing-details {
    background: var(--rt-card);
    border: 1px solid var(--rt-card-border);
    border-top: none;
    border-radius: 0 0 var(--rt-radius) var(--rt-radius);
    padding: 16px 24px 20px;
    margin-bottom: 12px;
}

.rt-card-on-file {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--rt-card-border);
}
.rt-detail-label {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--rt-text-muted);
    min-width: 140px;
}
.rt-detail-value {
    font-size: .9rem;
    font-weight: 600;
    color: var(--rt-text);
    display: flex;
    align-items: center;
    gap: 8px;
}
.rt-card-chip {
    background: var(--rt-purple);
    color: #fff;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 4px;
}
.rt-card-exp {
    font-size: .78rem;
    color: var(--rt-text-muted);
    font-weight: 400;
}

/* ── Action buttons ──────────────────────────────────────────────────────── */
.rt-membership-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

/* Base theme button — matches the theme's button style */
.rt-theme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 20px;
    border-radius: var(--rt-radius-xs);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all .15s ease;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
}
.rt-theme-btn:disabled { opacity: .5; cursor: not-allowed; }

.rt-theme-btn-primary {
    background: var(--rt-purple);
    color: #fff;
}
.rt-theme-btn-primary:hover:not(:disabled) {
    background: var(--rt-purple-dark);
}

.rt-theme-btn-ghost {
    background: transparent;
    color: var(--rt-text-muted);
    border: 1px solid var(--rt-card-border);
}
.rt-theme-btn-ghost:hover:not(:disabled) {
    background: var(--rt-card-hover);
    color: var(--rt-text);
    border-color: #444;
}

.rt-theme-btn-danger {
    background: var(--rt-error);
    color: #fff;
}
.rt-theme-btn-danger:hover:not(:disabled) {
    background: #dc2626;
}

.rt-manage-note {
    margin: 0;
    font-size: .78rem;
    color: var(--rt-text-dim);
}

/* ── Upgrade banner (free users) ─────────────────────────────────────────── */
.rt-upgrade-banner {
    background: var(--rt-card);
    border: 1px solid rgba(245,158,11,.25);
    border-radius: var(--rt-radius-sm);
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.rt-upgrade-banner-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.rt-upgrade-banner-text strong {
    color: var(--rt-gold);
    font-size: .95rem;
}
.rt-upgrade-banner-text span {
    font-size: .82rem;
    color: var(--rt-text-muted);
}

/* ══════════════════════════════════════════════════════════════════════════
   INVOICE HISTORY — matches theme's list card style
══════════════════════════════════════════════════════════════════════════ */
.rt-invoices {
    background: var(--rt-card);
    border: 1px solid var(--rt-card-border);
    border-radius: var(--rt-radius);
    padding: 20px 24px;
    margin-top: 12px;
}
.rt-invoices-heading {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--rt-text-muted);
    margin: 0 0 14px;
}

.rt-invoice-list { display: flex; flex-direction: column; gap: 0; }
.rt-invoice-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--rt-card-border);
    gap: 12px;
}
.rt-invoice-row:last-child { border-bottom: none; padding-bottom: 0; }

.rt-invoice-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.rt-invoice-date {
    font-size: .85rem;
    font-weight: 600;
    color: var(--rt-text);
}
.rt-invoice-num {
    font-size: .72rem;
    color: var(--rt-text-dim);
    font-family: monospace;
}

.rt-invoice-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.rt-invoice-amount {
    font-size: .9rem;
    font-weight: 700;
    color: var(--rt-text);
}
.rt-invoice-badge {
    font-size: .7rem;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 99px;
    text-transform: capitalize;
}
.rt-invoice-badge-paid         { background: rgba(16,185,129,.15); color: #6ee7b7; }
.rt-invoice-badge-open         { background: rgba(245,158,11,.15); color: var(--rt-gold); }
.rt-invoice-badge-void         { background: rgba(255,255,255,.06); color: var(--rt-text-muted); }
.rt-invoice-badge-uncollectible{ background: rgba(239,68,68,.15); color: #fca5a5; }

.rt-invoice-links { display: flex; gap: 8px; }
.rt-inv-dl {
    color: var(--rt-text-muted);
    font-size: .75rem;
    font-weight: 600;
    text-decoration: none;
    padding: 3px 8px;
    border: 1px solid var(--rt-card-border);
    border-radius: var(--rt-radius-xs);
    transition: all .12s;
}
.rt-inv-dl:hover {
    color: var(--rt-text);
    border-color: #444;
    background: var(--rt-card-hover);
}

/* ══════════════════════════════════════════════════════════════════════════
   CANCEL MODAL
══════════════════════════════════════════════════════════════════════════ */
.rt-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.7);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(4px);
}
.rt-modal-box {
    background: #222;
    border: 1px solid #333;
    border-radius: var(--rt-radius);
    padding: 36px;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 24px 60px rgba(0,0,0,.6);
}
.rt-modal-box h3 {
    margin: 0 0 10px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--rt-text);
}
.rt-modal-box p {
    color: var(--rt-text-muted);
    margin: 0 0 24px;
    font-size: .9rem;
    line-height: 1.6;
}
.rt-modal-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════════════════════════
   AUTH FORMS (register / login) — dark theme
══════════════════════════════════════════════════════════════════════════ */
.rt-auth-wrap {
    display: flex;
    justify-content: center;
    padding: 60px 20px;
}
.rt-auth-card {
    background: var(--rt-card);
    border: 1px solid var(--rt-card-border);
    border-radius: var(--rt-radius);
    padding: 40px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 8px 40px rgba(0,0,0,.4);
}
.rt-auth-title {
    margin: 0 0 28px;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--rt-text);
}

/* ── Form layout ──────────────────────────────────────────────────────────── */
.rt-form { display: flex; flex-direction: column; gap: 18px; }

.rt-form-message {
    padding: 12px 16px;
    border-radius: var(--rt-radius-xs);
    font-size: .875rem;
    margin-bottom: 4px;
}
.rt-alert-error   { background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.3); color: #fca5a5; }
.rt-alert-success { background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.3); color: #6ee7b7; }

.rt-form-row-half {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 480px) {
    .rt-form-row-half { grid-template-columns: 1fr; }
}

.rt-form-field { display: flex; flex-direction: column; gap: 6px; }

.rt-form-field label {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--rt-text-muted);
}

.rt-form-field input[type="text"],
.rt-form-field input[type="email"],
.rt-form-field input[type="password"] {
    background: #111;
    border: 1px solid var(--rt-card-border);
    border-radius: var(--rt-radius-xs);
    padding: 11px 14px;
    font-size: .9rem;
    color: var(--rt-text);
    width: 100%;
    box-sizing: border-box;
    transition: border-color .15s;
}
.rt-form-field input:focus {
    outline: none;
    border-color: var(--rt-purple);
    box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}

.rt-field-hint, .rt-optional {
    font-size: .75rem;
    color: var(--rt-text-dim);
    font-weight: 400;
}
.rt-required { color: var(--rt-error); }

/* Submit button */
.rt-btn-primary.rt-btn-full,
.rt-submit-btn {
    background: var(--rt-purple);
    color: #fff;
    border: none;
    border-radius: var(--rt-radius-xs);
    padding: 12px 24px;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    transition: background .15s;
}
.rt-submit-btn:hover:not(:disabled) { background: var(--rt-purple-dark); }
.rt-submit-btn:disabled { opacity: .5; cursor: not-allowed; }

.rt-auth-switch {
    margin: 18px 0 0;
    font-size: .82rem;
    color: var(--rt-text-muted);
    text-align: center;
}
.rt-auth-switch a { color: var(--rt-gold); text-decoration: none; font-weight: 600; }
.rt-auth-switch a:hover { text-decoration: underline; }

/* ── Pro gate ─────────────────────────────────────────────────────────────── */
.rt-pro-gate {
    border: 1px dashed rgba(245,158,11,.4);
    border-radius: var(--rt-radius);
    background: rgba(245,158,11,.05);
    padding: 48px 32px;
    text-align: center;
    margin: 24px 0;
}
.rt-gate-icon   { font-size: 2.2rem; display: block; margin-bottom: 12px; }
.rt-gate-title  { margin: 0 0 8px; font-size: 1.2rem; font-weight: 700; color: var(--rt-text); }
.rt-gate-message{ color: var(--rt-text-muted); margin: 0 0 22px; font-size: .9rem; }
.rt-gate-note   { margin: 10px 0 0; font-size: .78rem; color: var(--rt-text-dim); }

/* ── Notice ──────────────────────────────────────────────────────────────── */
.rt-notice { color: var(--rt-text-muted); font-size: .9rem; }