/* ==========================================================================
   STMGF Members — Public (Front-office) Styles
   Glassmorphism-inspired, modern, responsive
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ── Root variables ─────────────────────────────────────────────────────── */
:root {
    --stmgf-primary:    #123e7c;
    --stmgf-primary-lt: #eff4fc;
    --stmgf-accent:     #e31b23;
    --stmgf-accent-grd: linear-gradient(135deg, #e31b23 0%, #b8161c 100%);
    --stmgf-success:    #16a34a;
    --stmgf-success-lt: #dcfce7;
    --stmgf-warning:    #d97706;
    --stmgf-warning-lt: #fef3c7;
    --stmgf-error:      #dc2626;
    --stmgf-error-lt:   #fee2e2;
    --stmgf-text:       #1e293b;
    --stmgf-text-muted: #64748b;
    --stmgf-border:     #e2e8f0;
    --stmgf-bg:         #f1f5f9;
    --stmgf-white:      #ffffff;
    --stmgf-radius:     16px;
    --stmgf-radius-sm:  8px;
    --stmgf-shadow:     0 4px 24px rgba(0, 0, 0, .10);
    --stmgf-shadow-lg:  0 12px 40px rgba(0, 0, 0, .16);
    --stmgf-font:       'Inter', -apple-system, sans-serif;
    --stmgf-transition: 0.2s ease;
}

/* ── Reset & base ───────────────────────────────────────────────────────── */
.stmgf-wrap *,
.stmgf-wrap *::before,
.stmgf-wrap *::after {
    box-sizing: border-box;
}
.stmgf-wrap {
    font-family: var(--stmgf-font);
    color: var(--stmgf-text);
    line-height: 1.6;
}

/* ── Card ───────────────────────────────────────────────────────────────── */
.stmgf-card {
    background: var(--stmgf-white);
    border-radius: var(--stmgf-radius);
    box-shadow: var(--stmgf-shadow-lg);
    max-width: 440px;
    margin: 60px auto;
    overflow: hidden;
    position: relative;
    border: none;
    animation: stmgf-fade-in 0.4s ease;
}

/* Gradient top border for the card */
.stmgf-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--stmgf-primary) 0%, #2563eb 100%);
    z-index: 10;
}

@keyframes stmgf-fade-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.stmgf-card__header {
    background: transparent;
    padding: 40px 32px 10px;
    text-align: center;
    color: var(--stmgf-text);
}

.stmgf-logo-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--stmgf-primary-lt);
    color: var(--stmgf-primary);
    border-radius: 50%;
    box-shadow: 0 0 0 6px rgba(18, 62, 124, 0.04);
    animation: stmgf-pop 0.5s ease;
}
.stmgf-logo-icon svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

@keyframes stmgf-pop {
    0%   { transform: scale(0.6); opacity: 0; }
    80%  { transform: scale(1.1); }
    100% { transform: scale(1);   opacity: 1; }
}

.stmgf-card__title {
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    margin: 0 0 8px !important;
    color: var(--stmgf-primary) !important;
}

.stmgf-card__subtitle {
    font-size: 0.95rem;
    color: var(--stmgf-text-muted);
    margin: 0;
}

.stmgf-card__body {
    padding: 28px 32px 32px;
}

/* ── Alerts ─────────────────────────────────────────────────────────────── */
.stmgf-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--stmgf-radius-sm);
    margin-bottom: 20px;
    font-size: 0.9rem;
    animation: stmgf-fade-in 0.3s ease;
}
.stmgf-alert__icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 1px; }
.stmgf-alert p { margin: 4px 0 0; }

.stmgf-alert--error   { background: var(--stmgf-error-lt);   color: #991b1b; border-left: 4px solid var(--stmgf-error);   }
.stmgf-alert--success { background: var(--stmgf-success-lt); color: #14532d; border-left: 4px solid var(--stmgf-success); }
.stmgf-alert--warning { background: var(--stmgf-warning-lt); color: #92400e; border-left: 4px solid var(--stmgf-warning); }

/* ── Form elements ──────────────────────────────────────────────────────── */
.stmgf-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}
.stmgf-form-group label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--stmgf-text);
}
.stmgf-input {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid var(--stmgf-border);
    border-radius: 10px;
    font-size: 1rem;
    font-family: var(--stmgf-font);
    color: var(--stmgf-text);
    background: #fafbfc;
    transition: all var(--stmgf-transition);
    outline: none;
}
.stmgf-input:focus {
    border-color: var(--stmgf-primary);
    background: var(--stmgf-white);
    box-shadow: 0 0 0 4px rgba(18, 62, 124, .12);
}
.stmgf-input--otp {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 12px;
    text-align: center;
    padding: 14px 20px;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.stmgf-wrap button.stmgf-btn,
.stmgf-wrap a.stmgf-btn,
.stmgf-wrap .stmgf-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 14px 24px !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    font-family: var(--stmgf-font) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.stmgf-wrap .stmgf-btn:hover {
    transform: translateY(-2px) !important;
}

.stmgf-wrap .stmgf-btn:active {
    transform: translateY(0) !important;
}

.stmgf-wrap .stmgf-btn--primary,
.stmgf-wrap button.stmgf-btn--primary {
    background: linear-gradient(135deg, #123e7c 0%, #1a56a6 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(18, 62, 124, 0.25) !important;
}

.stmgf-wrap .stmgf-btn--primary:hover,
.stmgf-wrap button.stmgf-btn--primary:hover {
    background: linear-gradient(135deg, #1a56a6 0%, #2570d0 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(18, 62, 124, 0.35) !important;
}

.stmgf-wrap .stmgf-btn--primary:active,
.stmgf-wrap button.stmgf-btn--primary:active {
    box-shadow: 0 4px 10px rgba(18, 62, 124, 0.2) !important;
}

.stmgf-wrap .stmgf-btn--ghost,
.stmgf-wrap button.stmgf-btn--ghost {
    background: transparent !important;
    color: var(--stmgf-primary) !important;
    border: 1.5px solid var(--stmgf-border) !important;
    box-shadow: none !important;
}

.stmgf-wrap .stmgf-btn--ghost:hover,
.stmgf-wrap button.stmgf-btn--ghost:hover {
    background: var(--stmgf-primary-lt) !important;
    border-color: var(--stmgf-primary) !important;
    color: var(--stmgf-primary) !important;
}

.stmgf-wrap .stmgf-btn--full {
    width: 100% !important;
}

.stmgf-wrap .stmgf-btn--lg {
    padding: 16px 28px !important;
    font-size: 1.02rem !important;
}

.stmgf-wrap .stmgf-btn:disabled,
.stmgf-wrap button.stmgf-btn:disabled {
    opacity: 0.65 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Beautiful custom CSS spinner */
.stmgf-wrap .stmgf-btn__spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    border-top-color: #ffffff;
    animation: stmgf-spin 0.8s linear infinite;
    display: inline-block;
    vertical-align: middle;
}

.stmgf-wrap .stmgf-btn--ghost .stmgf-btn__spinner {
    border: 2px solid rgba(18, 62, 124, 0.2);
    border-top-color: var(--stmgf-primary);
}

@keyframes stmgf-spin {
    to { transform: rotate(360deg); }
}

/* ── OTP countdown & actions ────────────────────────────────────────────── */
.stmgf-otp-timer {
    font-size: 0.85rem;
    color: var(--stmgf-text-muted);
    text-align: center;
    margin: -6px 0 16px;
}
.stmgf-otp-timer strong {
    color: var(--stmgf-primary);
    font-size: 1rem;
}
.stmgf-otp-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
    flex-wrap: wrap;
}
.stmgf-otp-actions .stmgf-btn {
    font-size: 0.82rem;
    padding: 8px 14px;
}

/* ── Dashboard wrap ─────────────────────────────────────────────────────── */
.stmgf-dashboard-wrap {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px 16px 60px;
}

/* ── Dashboard header ───────────────────────────────────────────────────── */
.stmgf-dashboard-header {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--stmgf-white);
    border-radius: var(--stmgf-radius);
    padding: 28px 30px;
    color: var(--stmgf-text);
    margin-bottom: 24px;
    flex-wrap: wrap;
    box-shadow: var(--stmgf-shadow-lg);
    border-top: 4px solid var(--stmgf-primary);
}
.stmgf-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--stmgf-primary-lt);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--stmgf-primary);
    flex-shrink: 0;
    border: none;
}
.stmgf-dashboard-header__info { flex: 1; }
.stmgf-dashboard-header h1 {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    margin: 0 0 4px !important;
    color: var(--stmgf-primary) !important;
}
.stmgf-dashboard-header__email { color: var(--stmgf-text-muted); font-size: 0.9rem; margin: 0; }

.stmgf-logout-btn {
    margin-left: auto;
    background: transparent !important;
    color: var(--stmgf-error) !important;
    border: 1px solid var(--stmgf-error-lt) !important;
    font-size: 0.85rem !important;
    padding: 8px 16px !important;
}
.stmgf-logout-btn:hover { background: var(--stmgf-error-lt) !important; border-color: var(--stmgf-error) !important; }

/* ── Info cards ─────────────────────────────────────────────────────────── */
.stmgf-info-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.stmgf-info-card {
    background: var(--stmgf-white);
    border: 1px solid var(--stmgf-border);
    border-radius: var(--stmgf-radius-sm);
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    transition: transform var(--stmgf-transition), box-shadow var(--stmgf-transition);
}
.stmgf-info-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--stmgf-shadow);
}
.stmgf-info-card__icon { font-size: 1.6rem; flex-shrink: 0; }
.stmgf-info-card__label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--stmgf-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.stmgf-info-card__value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--stmgf-text);
}
.stmgf-info-card--success { border-color: #bbf7d0; background: #f0fdf4; }
.stmgf-info-card--warning { border-color: #fed7aa; background: #fffbeb; }

/* ── Status badges (front) ──────────────────────────────────────────────── */
.stmgf-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.stmgf-badge--active    { background: var(--stmgf-success-lt); color: #15803d; }
.stmgf-badge--suspended { background: var(--stmgf-warning-lt); color: #b45309; }
.stmgf-badge--payment-pending   { background: #fef3c7; color: #b45309; }
.stmgf-badge--payment-success   { background: var(--stmgf-success-lt); color: #15803d; }
.stmgf-badge--payment-failed    { background: var(--stmgf-error-lt); color: #b91c1c; }
.stmgf-badge--payment-cancelled { background: #f1f5f9; color: var(--stmgf-text-muted); }

/* ── Payment CTA ────────────────────────────────────────────────────────── */
.stmgf-payment-cta {
    background: var(--stmgf-white);
    border: 1px solid var(--stmgf-border);
    border-radius: var(--stmgf-radius);
    padding: 24px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
    flex-wrap: wrap;
    box-shadow: var(--stmgf-shadow);
    border-left: 4px solid var(--stmgf-accent);
}
.stmgf-payment-cta h2 {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--stmgf-primary) !important;
    margin: 0 0 6px !important;
}
.stmgf-payment-cta p {
    color: var(--stmgf-text-muted);
    font-size: 0.95rem;
    margin: 0;
}

/* ── Section ────────────────────────────────────────────────────────────── */
.stmgf-section { margin-bottom: 40px; }
.stmgf-section-title {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--stmgf-primary) !important;
    margin-bottom: 16px !important;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--stmgf-primary-lt);
}

/* ── Payment rows ───────────────────────────────────────────────────────── */
.stmgf-payments-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.stmgf-payment-row {
    background: var(--stmgf-white);
    border: 1px solid var(--stmgf-border);
    border-radius: var(--stmgf-radius-sm);
    padding: 14px 18px;
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: 16px;
    transition: box-shadow var(--stmgf-transition);
}
.stmgf-payment-row:hover { box-shadow: var(--stmgf-shadow); }
.stmgf-payment-row__ref code { font-size: 0.8rem; color: var(--stmgf-text-muted); }
.stmgf-payment-row__ref small { display: block; font-size: 0.72rem; color: var(--stmgf-text-muted); }
.stmgf-payment-row__amount { font-size: 1rem; }
.stmgf-payment-row__date { font-size: 0.82rem; color: var(--stmgf-text-muted); }

@media (max-width: 600px) {
    .stmgf-payment-row {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }
}

/* ── Payment page specific ──────────────────────────────────────────────── */
.stmgf-payment-wrap .stmgf-card { max-width: 520px; }
.stmgf-test-badge {
    background: #fef3c7;
    color: #b45309;
    font-size: 0.8rem;
    font-weight: 700;
    text-align: center;
    padding: 8px 16px;
    border-bottom: 1px solid #fbbf24;
    letter-spacing: 0.5px;
}

.stmgf-order-summary {
    background: #f8faff;
    border: 1px solid #c7d9f5;
    border-radius: var(--stmgf-radius-sm);
    padding: 18px 20px;
    margin-bottom: 24px;
}
.stmgf-order-summary__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 0.9rem;
    color: var(--stmgf-text-muted);
    border-bottom: 1px solid #e8eef8;
}
.stmgf-order-summary__total {
    border-bottom: none;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 2px solid #c7d9f5;
}
.stmgf-price-big { font-size: 1.4rem; color: var(--stmgf-primary); }

.stmgf-payment-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}
.stmgf-payment-logos img {
    height: 28px;
    object-fit: contain;
    opacity: 0.8;
}
.stmgf-secure-badge {
    font-size: 0.8rem;
    font-weight: 600;
    color: #15803d;
    background: #dcfce7;
    padding: 4px 10px;
    border-radius: 20px;
}

.stmgf-pay-btn { font-size: 1.05rem !important; padding: 15px 24px !important; }
.stmgf-payment-note {
    font-size: 0.78rem;
    color: var(--stmgf-text-muted);
    text-align: center;
    margin-top: 14px;
    line-height: 1.5;
}
.stmgf-payment-ref code {
    font-size: 0.85rem;
    background: rgba(0,0,0,.06);
    padding: 2px 6px;
    border-radius: 4px;
}

/* ── Dashboard stats grid ───────────────────────────────────────────────── */
.stmgf-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}
@media (max-width: 900px) {
    .stmgf-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Member since badge (premium golden style) ─────────────────────────── */
.stmgf-member-since-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.08) 0%, rgba(245, 158, 11, 0.12) 100%);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #d97706;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    vertical-align: middle;
    margin-left: 10px;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.05);
    transition: all 0.2s ease;
    animation: stmgf-pulse-badge 2s infinite ease-in-out;
}
.stmgf-member-since-badge:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.12) 0%, rgba(245, 158, 11, 0.2) 100%);
    border-color: rgba(245, 158, 11, 0.45);
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.15);
}
.stmgf-member-since-badge__icon {
    color: #f59e0b;
    font-size: 0.8rem;
    line-height: 1;
}
@keyframes stmgf-pulse-badge {
    0%, 100% { box-shadow: 0 2px 6px rgba(245, 158, 11, 0.05); }
    50% { box-shadow: 0 2px 14px rgba(245, 158, 11, 0.22); }
}
.stmgf-stat-card {
    background: var(--stmgf-white);
    border: 1px solid var(--stmgf-border);
    border-radius: var(--stmgf-radius-sm);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    transition: transform var(--stmgf-transition), box-shadow var(--stmgf-transition);
    animation: stmgf-fade-in 0.4s ease;
    border-top: 3px solid var(--stmgf-border);
}
.stmgf-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--stmgf-shadow);
}
.stmgf-stat-card__icon {
    display: none;
}
.stmgf-stat-card__content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    width: 100%;
}
.stmgf-stat-card__label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--stmgf-text-muted);
    margin-bottom: 6px;
}
.stmgf-stat-card__value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--stmgf-text);
    line-height: 1.2;
}
.stmgf-stat-card__value--big {
    font-size: 1.6rem;
    color: var(--stmgf-primary);
}
.stmgf-stat-card__value small {
    font-size: 0.6em;
    font-weight: 500;
    opacity: 0.6;
}
.stmgf-stat-card__sub {
    font-size: 0.78rem;
    color: var(--stmgf-text-muted);
    margin-top: 4px;
}
.stmgf-stat-card--status   { border-top-color: var(--stmgf-primary); }
.stmgf-stat-card--total    { border-top-color: var(--stmgf-success); }
.stmgf-stat-card--payments { border-top-color: var(--stmgf-accent); }
.stmgf-stat-card--years    { border-top-color: var(--stmgf-warning); }
.stmgf-stat-card--fee      { border-top-color: #8b5cf6; }
.stmgf-stat-card--ok       { border-top-color: var(--stmgf-success); }
.stmgf-stat-card--warn     { border-top-color: var(--stmgf-warning); }

/* ── Mini progress bar ──────────────────────────────────────────────────── */
.stmgf-mini-progress {
    height: 6px;
    background: #e8ecf2;
    border-radius: 3px;
    margin-top: 8px;
    overflow: hidden;
}
.stmgf-mini-progress__bar {
    height: 100%;
    background: linear-gradient(90deg, var(--stmgf-primary) 0%, var(--stmgf-accent) 100%);
    border-radius: 3px;
    transition: width 0.6s ease;
}

/* ── Pulse animation for CTA ────────────────────────────────────────────── */
@keyframes stmgf-pulse {
    0%, 100% { box-shadow: 0 4px 14px rgba(37, 99, 235, .35); }
    50%      { box-shadow: 0 4px 24px rgba(37, 99, 235, .55), 0 0 0 6px rgba(37, 99, 235, .10); }
}
.stmgf-btn--pulse { animation: stmgf-pulse 2s ease-in-out infinite; }

/* ── Dashboard grid (chart + timeline) ──────────────────────────────────── */
.stmgf-dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
@media (max-width: 700px) {
    .stmgf-dashboard-grid { grid-template-columns: 1fr; }
}
.stmgf-section--chart,
.stmgf-section--timeline {
    background: var(--stmgf-white);
    border: 1px solid var(--stmgf-border);
    border-radius: var(--stmgf-radius-sm);
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
}

/* ── Year bar chart ─────────────────────────────────────────────────────── */
.stmgf-year-chart {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.stmgf-year-bar-group {
    display: flex;
    align-items: center;
    gap: 12px;
}
.stmgf-year-bar-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--stmgf-primary);
    min-width: 40px;
    text-align: right;
}
.stmgf-year-bar-track {
    flex: 1;
    height: 28px;
    background: #f0f4f8;
    border-radius: 6px;
    overflow: hidden;
}
.stmgf-year-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--stmgf-primary) 0%, var(--stmgf-accent) 100%);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
    min-width: fit-content;
    transition: width 0.6s ease;
}
.stmgf-year-bar-fill span {
    font-size: 0.72rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}

/* ── Payment timeline ───────────────────────────────────────────────────── */
.stmgf-timeline {
    position: relative;
    padding-left: 22px;
}
.stmgf-timeline::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e2e8f0;
}

.stmgf-timeline-year {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--stmgf-primary);
    background: var(--stmgf-primary-lt);
    padding: 4px 14px;
    border-radius: 20px;
    display: inline-block;
    margin: 16px 0 10px -6px;
    position: relative;
    z-index: 1;
}

.stmgf-timeline-item {
    position: relative;
    padding: 10px 0 10px 8px;
    border-bottom: 1px solid #f5f7fa;
}
.stmgf-timeline-item:last-child { border-bottom: none; }

.stmgf-timeline-dot {
    position: absolute;
    left: -19px;
    top: 16px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--stmgf-border);
    background: #fff;
    z-index: 1;
}
.stmgf-timeline-item--success .stmgf-timeline-dot { border-color: var(--stmgf-success); background: var(--stmgf-success-lt); }
.stmgf-timeline-item--failed  .stmgf-timeline-dot { border-color: var(--stmgf-error);   background: var(--stmgf-error-lt);   }
.stmgf-timeline-item--pending .stmgf-timeline-dot { border-color: var(--stmgf-warning); background: var(--stmgf-warning-lt); }
.stmgf-timeline-item--cancelled .stmgf-timeline-dot { border-color: #94a3b8; background: #f1f5f9; }

.stmgf-timeline-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.stmgf-timeline-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.stmgf-timeline-amount {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--stmgf-text);
}
.stmgf-timeline-details {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.stmgf-timeline-ref code {
    font-size: 0.72rem;
    background: #f0f4f8;
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--stmgf-text-muted);
}
.stmgf-timeline-date {
    font-size: 0.72rem;
    color: var(--stmgf-text-muted);
}

/* ── Empty state ────────────────────────────────────────────────────────── */
.stmgf-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--stmgf-text-muted);
}
.stmgf-empty span { font-size: 2.5rem; display: block; margin-bottom: 10px; opacity: 0.5; }

.stmgf-muted { color: var(--stmgf-text-muted); font-style: italic; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .stmgf-card { margin: 20px 10px; }
    .stmgf-card__header { padding: 28px 20px 22px; }
    .stmgf-card__body { padding: 20px; }
    .stmgf-dashboard-header { padding: 20px; }
    .stmgf-dashboard-header h1 { font-size: 1.2rem !important; }
    .stmgf-stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .stmgf-info-cards { grid-template-columns: 1fr 1fr; }
    .stmgf-payment-cta { flex-direction: column; }
    .stmgf-payment-cta .stmgf-btn { width: 100%; }
    .stmgf-dashboard-grid { grid-template-columns: 1fr; }
    .stmgf-timeline-top { flex-direction: column; align-items: flex-start; }
}

/* ── Premium Payment Status States ───────────────────────────────────────── */
.stmgf-payment-status-card {
    text-align: center;
    padding: 10px 0;
}

.stmgf-state-icon-wrapper {
    margin: 10px auto 25px;
    display: flex;
    justify-content: center;
}

.stmgf-state-icon-large {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    animation: stmgf-pop-large 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.stmgf-state-icon-large--success {
    background-color: var(--stmgf-success-lt);
    color: var(--stmgf-success);
    box-shadow: 0 8px 24px rgba(22, 163, 74, 0.16);
    border: 2px solid rgba(22, 163, 74, 0.1);
}

.stmgf-state-icon-large--error {
    background-color: var(--stmgf-error-lt);
    color: var(--stmgf-error);
    box-shadow: 0 8px 24px rgba(220, 38, 38, 0.16);
    border: 2px solid rgba(220, 38, 38, 0.1);
}

@keyframes stmgf-pop-large {
    0% { transform: scale(0.3); opacity: 0; }
    70% { transform: scale(1.1); }
    90% { transform: scale(0.95); }
    100% { transform: scale(1); opacity: 1; }
}

.stmgf-receipt-container {
    background: #f8fafc;
    border: 1px dashed var(--stmgf-border);
    border-radius: 12px;
    padding: 20px;
    margin: 24px 0;
    text-align: left;
    position: relative;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.stmgf-receipt-container::before,
.stmgf-receipt-container::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: var(--stmgf-white);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
}
.stmgf-receipt-container::before { left: -7px; border-right: 1px dashed var(--stmgf-border); }
.stmgf-receipt-container::after { right: -7px; border-left: 1px dashed var(--stmgf-border); }

.stmgf-receipt-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--stmgf-text-muted);
    letter-spacing: 1px;
    margin-bottom: 14px;
    text-align: center;
    border-bottom: 1px solid var(--stmgf-border);
    padding-bottom: 8px;
}

.stmgf-receipt-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
    font-size: 0.9rem;
}

.stmgf-receipt-label {
    color: var(--stmgf-text-muted);
    margin-right: 8px;
    white-space: nowrap;
}

.stmgf-receipt-dots {
    flex-grow: 1;
    border-bottom: 1px dotted #cbd5e1;
    margin: 0 8px;
    position: relative;
    top: -4px;
}

.stmgf-receipt-value {
    font-weight: 600;
    color: var(--stmgf-text);
    text-align: right;
}

.stmgf-receipt-total {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--stmgf-border);
    font-weight: 700;
}

.stmgf-receipt-total .stmgf-receipt-value {
    font-size: 1.2rem;
    color: var(--stmgf-primary);
}

.stmgf-payment-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
}

.stmgf-payment-actions .stmgf-btn {
    width: 100% !important;
}

.stmgf-payment-actions-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 480px) {
    .stmgf-payment-actions-row {
        grid-template-columns: 1fr;
    }
}