/* ============================================================
   Support module
   ============================================================ */

.r33-support-module h2 {
    margin     : 0 0 8px;
    font-size  : 1.1rem;
    font-weight: 600;
    color      : var(--r33-text-primary, #fff);
}

.r33-support-intro {
    margin   : 0 0 10px;
    font-size: 0.88rem;
    color    : var(--r33-text-muted, #888);
}

.r33-support-response-time {
    margin      : 0 0 28px;
    font-size   : 0.80rem;
    font-weight : 500;
    color       : #2ecc71;
    opacity     : .80;
}

/* ── Card grid ──────────────────────────────────────────────── */

.r33-support-options {
    display              : grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap                  : 16px;
}

.r33-support-card {
    display       : flex;
    flex-direction: column;
    gap           : 10px;
    padding       : 20px;
    background    : var(--r33-card-bg, #1a1a2e);
    border        : 1px solid var(--r33-border, rgba(255,255,255,.08));
    border-radius : var(--r33-radius, 12px);
    transition    : border-color .2s;
}

.r33-support-card:hover {
    border-color: rgba(255,255,255,.16);
}

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

.r33-support-card-desc {
    margin     : 0;
    flex       : 1;
    font-size  : 0.83rem;
    color      : var(--r33-text-muted, #888);
    line-height: 1.5;
}

/* ── Button ─────────────────────────────────────────────────── */

.r33-support-button {
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    padding        : 10px 16px;
    border-radius  : var(--r33-radius-sm, 8px);
    background     : rgba(255,255,255,.06);
    border         : 1px solid rgba(255,255,255,.10);
    color          : var(--r33-text-secondary, #ccc);
    font-size      : 0.82rem;
    font-weight    : 600;
    text-decoration: none;
    transition     : background .15s, border-color .15s, color .15s;
    white-space    : nowrap;
}

.r33-support-button:hover {
    background  : rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.20);
    color       : var(--r33-text-primary, #fff);
}

@media (max-width: 480px) {
    .r33-support-options {
        grid-template-columns: 1fr;
    }
}