/* ============================================================
   profile.css — Profile page specific styles only
   ============================================================ */

/* ── PROFILE HERO ── */
.profile-hero {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: visible; /* must be visible so avatar can overlap banner */
    margin-bottom: 20px;
    max-width: 100%;
}
.profile-banner {
    height: 110px;
    background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 40%, #a855f7 70%, #e879f9 100%);
    position: relative;
    overflow: hidden; /* clip banner contents only */
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    max-width: 100%;
    border-radius: 20px 20px 0 0;
}
.profile-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='30' cy='30' r='20'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}
.banner-edit-btn {
    position: absolute;
    top: 10px; right: 10px;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    border-radius: 8px;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
    z-index: 2;
}
.banner-edit-btn:hover { background: rgba(0,0,0,0.6); }

.profile-info { padding: 0 16px 20px; }
.profile-top-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: -28px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 8px;
}

.avatar-wrap { position: relative; width: 68px; height: 68px; flex-shrink: 0; }
.avatar-img {
    width: 68px; height: 68px;
    border-radius: 18px;
    background: linear-gradient(135deg, #c084fc, #818cf8);
    border: 4px solid #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    font-size: 22px;
    color: #fff;
    overflow: hidden;
}
.avatar-img img { width: 100%; height: 100%; object-fit: cover; }
.avatar-online {
    position: absolute;
    bottom: 2px; right: -2px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--success);
    border: 3px solid #fff;
    display: none;
}
.is-online .avatar-online { display: block; }

.profile-actions { display: flex; gap: 6px; flex-wrap: wrap; flex-shrink: 1; min-width: 0; }
.btn-edit {
    background: var(--brand);
    color: #fff;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 13px;
    padding: 0 16px;
    height: 36px;
    border: none;
    border-radius: 10px;
    transition: background 0.15s;
}
.btn-edit:hover { background: var(--brand-dark); }
.btn-share {
    background: var(--surface-2);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    padding: 0 14px;
    height: 36px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    display: flex; align-items: center; gap: 6px;
    transition: background 0.15s, border-color 0.15s;
}
.btn-share:hover { border-color: var(--brand); color: var(--brand); }
.btn-more {
    width: 36px; height: 36px;
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-secondary);
    transition: background 0.15s;
}
.btn-more:hover { background: var(--brand-light); border-color: var(--brand); }

.profile-name { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 2px; }
.profile-handle { font-size: 14px; color: var(--brand); font-weight: 500; margin-bottom: 8px; }
.profile-bio { font-size: 14px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 12px; max-width: 420px; }
.profile-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; font-size: 13px; color: var(--text-secondary); }
.profile-meta span { display: flex; align-items: center; gap: 5px; }
.profile-meta a { color: var(--brand); }

.profile-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.badge-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.badge-chip.gold   { background: var(--gold-light); color: #92400e; }
.badge-chip.purple { background: var(--brand-light); color: var(--brand-dark); }
.badge-chip.green  { background: #f0fdf4; color: #166534; }

.profile-stats {
    display: flex;
    border-top: 1px solid var(--border);
    padding-top: 16px;
}
.stat-item {
    flex: 1;
    text-align: center;
    padding: 4px 0;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s;
}
.stat-item:hover { background: var(--surface-2); }
.stat-item + .stat-item { border-left: 1px solid var(--border); }
.stat-num { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15px; font-weight: 800; }
.stat-num.accent { color: var(--brand); }
.stat-label { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-top: 2px; }

/* ── XP BAR ── */
.xp-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px 20px; margin-bottom: 20px; }
.xp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.xp-label { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; font-weight: 700; color: var(--text-secondary); }
.xp-values { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; font-weight: 700; }
.xp-values strong { color: var(--brand); }
.xp-bar-track { height: 8px; background: var(--brand-light); border-radius: 99px; overflow: hidden; }
.xp-bar-fill { height: 100%; background: linear-gradient(90deg, var(--brand-dark), var(--brand)); border-radius: 99px; transition: width 0.8s ease; }
.xp-sub { font-size: 11px; color: var(--text-muted); margin-top: 6px; }

/* ── PROFILE TABS ── */
.profile-tabs {
    /* Ken: this bar did not stick on scroll - matches the home feed's
       .feed-sort sticky bar (public/css/global.css), same 60px offset
       flush against the 60px navbar. */
    position: -webkit-sticky;
    position: sticky;
    top: 63px;
    z-index: 50;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 4px;
    display: flex;
    gap: 2px;
    margin-bottom: 20px;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    width: 100%;
    box-sizing: border-box;
}
.profile-tabs::-webkit-scrollbar { display: none; }
.tab-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 7px 12px;
    border: none;
    border-radius: 12px;
    background: transparent;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-secondary);
    display: flex; align-items: center; justify-content: center; gap: 6px;
    transition: background 0.15s, color 0.15s;
    text-decoration: none;
}
.tab-btn:hover { background: var(--surface-2); color: var(--text-primary); }
.tab-btn.active { background: var(--brand-light); color: var(--brand); font-weight: 600; }
.tab-count { font-size: 10px; background: var(--brand-glow); color: var(--brand); border-radius: 5px; padding: 1px 6px; font-weight: 700; display: inline; }

/* ── MEME GRID ── */
.meme-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.meme-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    aspect-ratio: 1;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transition: transform 0.18s, box-shadow 0.18s;
}
.meme-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(168,85,247,0.12); }
.meme-card:hover .meme-overlay { opacity: 1; }
.meme-placeholder {
    width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12px; font-weight: 700; color: var(--text-muted);
    position: relative; z-index: 0;
}
.meme-placeholder.featured { background: var(--brand-light); color: var(--brand-dark); }
.meme-placeholder.hot      { background: linear-gradient(135deg, #fff7ed, #fef3c7); color: #92400e; }
.meme-placeholder.new      { background: linear-gradient(135deg, #f0fdf4, #dcfce7); color: #166534; }
.meme-overlay {
    position: absolute; inset: 0;
    background: rgba(76, 29, 149, 0.72);
    display: flex; align-items: flex-end;
    padding: 12px;
    opacity: 0;
    transition: opacity 0.2s;
    border-radius: 14px;
}
.meme-overlay-stats { display: flex; gap: 12px; color: #fff; font-size: 12px; font-weight: 600; }
.meme-overlay-stats span { display: flex; align-items: center; gap: 4px; }
.meme-badge {
    position: absolute; top: 8px; left: 8px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: 10px; font-weight: 700;
    font-family: 'Plus Jakarta Sans', sans-serif;
    padding: 3px 8px; border-radius: 6px;
    display: flex; align-items: center; gap: 4px;
}
.meme-badge.hot  { background: #ef4444; }
.meme-badge.gold { background: var(--gold); }

/* Profile modal specifics */
.modal-avatar-row { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.modal-avatar {
    width: 64px; height: 64px; border-radius: 14px;
    background: linear-gradient(135deg, #c084fc, #818cf8);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 24px; color: #fff;
    overflow: hidden;
}
.modal-avatar img { width: 100%; height: 100%; object-fit: cover; }
.btn-change-avatar {
    background: var(--brand-light); color: var(--brand);
    font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600;
    border: 1.5px solid var(--brand); border-radius: 10px; padding: 8px 14px;
}

/* Share modal */
.share-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px; }
.share-btn {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 12px 8px; border: 1.5px solid var(--border); border-radius: 12px;
    background: transparent; font-size: 11px; font-weight: 600; color: var(--text-secondary);
    transition: background 0.15s, border-color 0.15s;
}
.share-btn:hover { background: var(--brand-light); border-color: var(--brand); color: var(--brand); }
.share-btn-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.copy-link-row { display: flex; gap: 8px; }
.copy-input {
    flex: 1; height: 38px; border: 1.5px solid var(--border); border-radius: 10px;
    padding: 0 12px; font-size: 13px; color: var(--text-secondary);
    background: var(--surface-2); outline: none;
}
.btn-copy {
    height: 38px; padding: 0 16px; background: var(--brand); color: #fff;
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; font-weight: 700;
    border: none; border-radius: 10px;
}

/* Meme detail modal */
.meme-preview {
    background: var(--brand-light); border-radius: 12px; height: 220px;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 18px; font-weight: 800;
    color: var(--brand-deeper); margin-bottom: 16px; overflow: hidden;
}
.meme-preview img { width: 100%; height: 100%; object-fit: cover; }
.meme-action-row { display: flex; gap: 8px; margin-bottom: 16px; }
.meme-action-btn {
    flex: 1; height: 38px; border-radius: 10px;
    border: 1.5px solid var(--border); background: transparent;
    font-size: 13px; font-weight: 600; color: var(--text-secondary);
    display: flex; align-items: center; justify-content: center; gap: 6px;
    transition: background 0.15s, border-color 0.15s;
}
.meme-action-btn:hover { background: var(--brand-light); border-color: var(--brand); color: var(--brand); }
.meme-action-btn.liked { background: #fff1f2; border-color: #fda4af; color: #e11d48; }
.meme-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.meme-tag { font-size: 12px; font-weight: 600; color: var(--brand); background: var(--brand-light); padding: 3px 10px; border-radius: 6px; }

/* Responsive profile overrides */
@media (min-width: 768px) {
    .profile-banner  { height: 140px; }
    .avatar-wrap     { width: 80px; height: 80px; }
    .avatar-img      { width: 80px; height: 80px; font-size: 28px; }
    .profile-top-row { margin-top: -36px; }
    .profile-name    { font-size: 22px; }
    .stat-num        { font-size: 20px; }
    .meme-grid       { grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .tab-btn         { font-size: 13px; padding: 8px 12px; }
}

/* ── Profile Pagination ── */
.profile-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 24px;
    flex-wrap: wrap;
}
.page-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    font-family: 'DM Sans', sans-serif;
}
.page-btn:hover:not(:disabled) {
    background: var(--brand-light);
    color: var(--brand);
    border-color: var(--brand);
}
.page-btn.active {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}
.page-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.page-ellipsis {
    color: var(--text-muted);
    font-size: 13px;
    padding: 0 4px;
}
.page-info {
    font-size: 12px;
    color: var(--text-muted);
    margin-left: 8px;
    white-space: nowrap;
}

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