/* public/css/member-referral.css — 紹介プログラム v2 (member.css の後に読み込む) */

.rf-wrap { display: flex; flex-direction: column; gap: 20px; max-width: 960px; margin: 0 auto; }

.rf-loading { text-align: center; padding: 48px 16px; color: var(--gray-500); }
.rf-loading .loading-spinner { margin: 0 auto 12px; }

/* ヒーロー: 説明 + 自分の登録名 */
.rf-hero {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 20px;
    padding: 24px 28px;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    box-shadow: 0 10px 30px rgba(26, 95, 74, 0.25);
}
.rf-hero-text h2 { font-size: 1.25rem; margin: 0 0 8px; }
.rf-hero-text p { font-size: 0.9rem; line-height: 1.7; opacity: 0.92; margin: 0; }

.rf-me {
    display: flex; flex-direction: column; gap: 6px;
    padding: 16px 18px; border-radius: 14px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
}
.rf-me-label { font-size: 0.75rem; opacity: 0.85; }
.rf-me-name { font-size: 1.4rem; letter-spacing: 0.06em; line-height: 1.2; }
.rf-me small { font-size: 0.75rem; opacity: 0.85; line-height: 1.5; }
.rf-me-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.rf-btn-ghost {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
}
.rf-btn-ghost:hover { background: rgba(255, 255, 255, 0.3) !important; }

/* カード */
.rf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.rf-card {
    background: #fff; border: 1px solid var(--gray-200); border-radius: 16px;
    padding: 20px 22px;
}
.rf-card h3 { font-size: 1rem; margin: 0 0 6px; }
.rf-card > p { font-size: 0.85rem; color: var(--gray-600); line-height: 1.7; margin: 0 0 14px; }

.rf-input-row { display: flex; gap: 8px; align-items: stretch; }
.rf-input-row .form-input { flex: 1; min-width: 0; font-size: 1rem; letter-spacing: 0.04em; }
.rf-input-row .btn { white-space: nowrap; }

/* ステータス表示 */
.rf-status {
    margin-top: 12px; padding: 12px 14px; border-radius: 10px;
    font-size: 0.85rem; line-height: 1.7;
}
.rf-status.ok   { background: #e8f5e9; color: #1b5e20; border: 1px solid #c8e6c9; }
.rf-status.wait { background: #fff8e1; color: #8a6414; border: 1px solid #f3e0b0; }
.rf-status.none { background: var(--gray-50); color: var(--gray-600); border: 1px dashed var(--gray-300); }

/* ヒント */
.rf-hint {
    background: linear-gradient(135deg, #fffdf5 0%, #fef6e3 100%);
    border-color: #f3e0b0;
}
.rf-hint h3 { color: #8a6414; }
.rf-hint-item {
    display: flex; flex-direction: column; gap: 10px;
    padding: 14px 16px; margin-top: 10px;
    background: #fff; border: 1px solid #f3e0b0; border-radius: 12px;
}
.rf-hint-text { font-size: 0.95rem; }
.rf-hint-text strong { color: var(--primary-dark); font-size: 1.05rem; }

/* 紹介した人リスト */
.rf-list { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 8px; }
.rf-list li {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 10px;
    background: var(--gray-50); border: 1px solid var(--gray-200);
}
.rf-list li.matched { background: #e8f5e9; border-color: #c8e6c9; }
.rf-list-name { flex: 1; font-weight: 600; letter-spacing: 0.04em; }
.rf-badge {
    font-size: 0.72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px;
    background: #fff3cd; color: #8a6414; white-space: nowrap;
}
.rf-list li.matched .rf-badge { background: var(--primary); color: #fff; }
.rf-remove {
    width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--gray-300);
    background: #fff; color: var(--gray-500); cursor: pointer; font-size: 1rem; line-height: 1;
}
.rf-remove:hover { background: var(--error); border-color: var(--error); color: #fff; }
.rf-empty { font-size: 0.85rem; color: var(--gray-500); margin: 12px 0 0; }

/* 成立一覧 */
.rf-table-wrap { overflow-x: auto; }
.rf-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.rf-table th, .rf-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--gray-200); }
.rf-table th { font-size: 0.78rem; color: var(--gray-600); background: var(--gray-50); }

.rf-warn { border-color: #f3e0b0; background: #fffdf5; }
.rf-warn h3 { color: #8a6414; }

@media (max-width: 768px) {
    .rf-hero { grid-template-columns: 1fr; padding: 18px 16px; }
    .rf-grid { grid-template-columns: 1fr; }
    .rf-card { padding: 16px; }
    .rf-input-row { flex-direction: column; }
    .rf-input-row .btn { width: 100%; justify-content: center; }
    .rf-me-name { font-size: 1.2rem; }
}