/* ════════════════════════════════════════════════════════════════════
   TravelZona — Profile Page Styles
   Page-specific CSS for /profile and /profile/{username}

   Scoped to body.profile-page to avoid leaking into other pages
   (same pattern as css/pages/home.css).

   v2 (style fix round):
   - 16 base profile layout rules MOVED HERE from css/style.css
     (.profile-cover, .profile-avatar, .profile-info, .profile-name,
      .profile-username, .profile-badges, .profile-bio, .profile-meta,
      .profile-actions, .profile-stats — all scoped under body.profile-page)
   - .profile-stat .num + .label explicit color: var(--foreground)
     for dark-mode visibility (Issue 1)
   - .profile-stat cursor: default (Issue 2 — buttons are inert)
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   Base profile layout (moved from css/style.css)
   ────────────────────────────────────────────────────────────────────
   These 16 rules used to live in css/style.css (global). They were
   moved here so they only load on profile pages, scoped under
   body.profile-page to prevent leaks.
   ════════════════════════════════════════════════════════════════════ */

body.profile-page .profile-cover {
    position: relative;
    height: 14rem;
    overflow: hidden;
}
body.profile-page .profile-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
body.profile-page .profile-cover-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.3));
}

body.profile-page .profile-avatar-section {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    padding: 0 1rem;
    margin-top: -3.5rem;
    position: relative;
    z-index: 10;
}
body.profile-page .profile-avatar {
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    border: 4px solid var(--background);
    overflow: hidden;
    background: linear-gradient(135deg, var(--brand-400), #8b5cf6);
}
body.profile-page .profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.profile-page .profile-info {
    padding: 0.75rem 1rem 0;
}
body.profile-page .profile-name {
    font-size: 1.25rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
body.profile-page .profile-username {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}
body.profile-page .profile-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.5rem 0;
}
body.profile-page .profile-bio {
    font-size: 0.875rem;
    line-height: 1.6;
    margin: 0.5rem 0;
    white-space: pre-line;
}
body.profile-page .profile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
    margin: 0.75rem 0;
}
body.profile-page .profile-meta span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

body.profile-page .profile-actions {
    display: flex;
    gap: 0.5rem;
    margin: 1rem 0;
}
body.profile-page .profile-actions .btn-primary {
    flex: 1;
}

body.profile-page .profile-stats {
    display: flex;
    gap: 1.5rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin: 1rem 0;
}

/* ─── Stats — dark-mode fix (Issue 1) + inert button (Issue 2) ──── */
/* Issue 1: explicit color: var(--foreground) on .num so dark mode
            shows white text instead of inheriting a hardcoded black.
   Issue 2: cursor: default so the <button> elements don't look
            clickable (they're inert — no onclick, no href, just display).
   These rules OVERRIDE the .profile-stat* rules still in style.css
   (which Jamal chose to leave there for now). */

body.profile-page .profile-stat {
    cursor: default;
}
body.profile-page .profile-stat .num {
    color: var(--foreground);
}
body.profile-page .profile-stat .label {
    color: var(--muted-foreground);
}

/* ─── Layout container ────────────────────────────────────────────── */
body.profile-page .profile-container {
    max-width: 42rem;
    margin: 0 auto;
    padding: 0 1rem;
}

body.profile-page .profile-section {
    max-width: 42rem;
    margin: 0 auto 1rem;
    padding: 0 1rem;
}

body.profile-page .profile-bottom-spacer {
    height: 5rem;
}

/* ─── Cover fallback (when no cover photo) ─────────────────────────── */
body.profile-page .profile-cover-fallback {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--brand-400, #8b5cf6), #8b5cf6, #ec4899);
}

/* ─── Avatar fallback icon ─────────────────────────────────────────── */
body.profile-page .profile-avatar-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
body.profile-page .profile-avatar-fallback i {
    font-size: 2rem;
    color: white;
}

/* ─── Profile actions row (Edit / Follow / Message / Verify) ─────── */
body.profile-page .profile-actions-row {
    margin-left: auto;
    margin-bottom: 0.5rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

body.profile-page .profile-actions-row .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 0.5rem;
    text-decoration: none;
    cursor: pointer;
}

body.profile-page .profile-actions-row .btn-secondary.btn-danger {
    color: var(--danger, #ef4444);
}

body.profile-page .profile-actions-row .btn-secondary.btn-verify-on {
    background: #dbeafe;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

body.profile-page .profile-actions-row .btn-secondary.btn-verify-off {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

/* ─── Follow Button (the spec from Jamal) ─────────────────────────── */
/* Default state = NOT following: purple gradient + white text + fa-user-plus */
/* .following state = grey background + dark text + fa-user-check */
/* .following:hover = red background + "· Unfollow" hint appended via ::after */

body.profile-page .follow-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

/* Default (not following) — purple gradient per spec */
body.profile-page .follow-btn:not(.following) {
    background: linear-gradient(135deg, #7c3aed, #8b5cf6);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 3px rgba(124, 58, 237, 0.2);
}

body.profile-page .follow-btn:not(.following):hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

/* Following state — grey per spec */
body.profile-page .follow-btn.following {
    background: var(--muted, #f4f4f5);
    color: var(--foreground, #18181b);
    border-color: var(--border, #e4e4e7);
    box-shadow: none;
}

/* Hover-unfollow: red + "· Unfollow" hint per spec */
body.profile-page .follow-btn.following:hover:not(:disabled) {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #fecaca;
}

body.profile-page .follow-btn.following:hover:not(:disabled) .follow-btn-label::after {
    content: ' · Unfollow';
    font-size: 0.7em;
    opacity: 0.8;
}

body.profile-page .follow-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* ─── Breadcrumb ──────────────────────────────────────────────────── */
body.profile-page .profile-breadcrumb {
    max-width: 42rem;
    margin: 0 auto 0.5rem;
    padding: 0.5rem 1rem 0;
    font-size: 0.75rem;
    color: var(--muted-foreground);
}
body.profile-page .profile-breadcrumb a {
    color: var(--muted-foreground);
    text-decoration: none;
}
body.profile-page .profile-breadcrumb a:hover {
    color: var(--brand-500, #8b5cf6);
}
body.profile-page .profile-breadcrumb .current {
    color: var(--foreground);
    font-weight: 600;
}

/* ─── Verified badge (blue circle check) ──────────────────────────── */
body.profile-page .verified-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border-radius: 50%;
    color: #fff;
    font-size: 0.875rem;
    margin-left: 0.375rem;
    vertical-align: middle;
    box-shadow: 0 1px 3px rgba(59, 130, 246, 0.4);
    cursor: help;
}

body.profile-page .email-verified-icon {
    color: var(--brand-500, #8b5cf6);
    font-size: 1rem;
    margin-left: 0.25rem;
    vertical-align: middle;
}

/* ─── User-type badge pill ────────────────────────────────────────── */
body.profile-page .profile-name .badge-pill {
    margin-left: 0.5rem;
}

/* ─── Languages row ───────────────────────────────────────────────── */
body.profile-page .profile-languages {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
}
body.profile-page .profile-languages strong {
    color: var(--foreground);
}

/* ─── Trust Statistics grid ───────────────────────────────────────── */
body.profile-page .trust-stats-grid {
    max-width: 42rem;
    margin: 0 auto 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.75rem;
    padding: 0 1rem;
}
body.profile-page .trust-stat-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 0.625rem;
    padding: 0.875rem;
    text-align: center;
}
body.profile-page .trust-stat-card .num {
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.2;
}
body.profile-page .trust-stat-card .label {
    font-size: 0.7rem;
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.125rem;
}
body.profile-page .trust-stat-card .sub {
    font-size: 0.65rem;
    color: var(--muted-foreground);
    margin-top: 0.25rem;
}
body.profile-page .trust-stat-card .num.rating { color: #f59e0b; }
body.profile-page .trust-stat-card .num.response { color: var(--brand-500, #8b5cf6); }
body.profile-page .trust-stat-card .num.listings { color: var(--brand-500, #8b5cf6); }
body.profile-page .trust-stat-card .num.bookings { color: #8b5cf6; }
body.profile-page .trust-stat-card .num.earnings { color: #10b981; }

/* ─── About box ──────────────────────────────────────────────────── */
body.profile-page .about-box {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 0.875rem;
    padding: 1.25rem;
}
body.profile-page .about-box h2 {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted-foreground);
    margin: 0 0 0.625rem;
}
body.profile-page .about-box p {
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--foreground);
    margin: 0;
}

/* ─── Section heading (Specialties / Destinations / Featured / Reviews) */
body.profile-page .section-heading {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted-foreground);
    margin: 0 0 0.625rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}
body.profile-page .section-heading .view-all {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--brand-500, #8b5cf6);
    text-decoration: none;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}
body.profile-page .section-heading .view-all:hover {
    text-decoration: underline;
}

/* ─── Specialties chips ──────────────────────────────────────────── */
body.profile-page .chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}
body.profile-page .chip-specialty {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    background: var(--brand-50, #f5f3ff);
    color: var(--brand-600, #7c3aed);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid var(--brand-500, #8b5cf6);
}
body.profile-page .chip-destination {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    background: #ecfdf5;
    color: #15803d;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid #86efac;
    text-decoration: none;
}
body.profile-page .chip-destination:hover {
    background: #d1fae5;
}
body.profile-page .chip-destination.inactive {
    background: var(--muted, #f4f4f5);
    color: var(--foreground);
    border-color: var(--border, #e4e4e7);
    cursor: default;
}
body.profile-page .chip-destination .count {
    opacity: 0.6;
    font-weight: 400;
}

/* ─── Featured listings grid ─────────────────────────────────────── */
body.profile-page .featured-listings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem;
}
body.profile-page .featured-listing-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 0.625rem;
    overflow: hidden;
    transition: transform 0.15s, box-shadow 0.15s;
}
body.profile-page .featured-listing-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
body.profile-page .featured-listing-card img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
}
body.profile-page .featured-listing-card .body {
    padding: 0.625rem;
}
body.profile-page .featured-listing-card .title {
    font-size: 0.75rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 0.125rem;
}
body.profile-page .featured-listing-card .location {
    font-size: 0.65rem;
    color: var(--muted-foreground);
    margin-bottom: 0.125rem;
}
body.profile-page .featured-listing-card .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
body.profile-page .featured-listing-card .rating {
    font-size: 0.7rem;
    color: #f59e0b;
    font-weight: 600;
}
body.profile-page .featured-listing-card .type-label {
    font-size: 0.65rem;
    color: var(--muted-foreground);
}
body.profile-page .featured-listing-card .price {
    font-size: 0.7rem;
    color: var(--brand-500, #8b5cf6);
    font-weight: 700;
}

/* ─── Reviews section ─────────────────────────────────────────────── */
body.profile-page .reviews-box {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 0.875rem;
    padding: 1.25rem;
}
body.profile-page .reviews-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.875rem;
}
body.profile-page .reviews-header .overall {
    font-size: 0.875rem;
    font-weight: 700;
    color: #f59e0b;
}
body.profile-page .reviews-header .overall .sub {
    color: var(--muted-foreground);
    font-weight: 400;
    font-size: 0.75rem;
}
body.profile-page .reviews-list {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}
body.profile-page .review-item {
    padding: 0.75rem;
    background: var(--muted, #f4f4f5);
    border-radius: 0.5rem;
}
body.profile-page .review-item .meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
}
body.profile-page .review-item .stars {
    color: #f59e0b;
    font-size: 0.8125rem;
}
body.profile-page .review-item .reviewer {
    font-size: 0.75rem;
    color: var(--muted-foreground);
}
body.profile-page .review-item .date {
    font-size: 0.7rem;
    color: var(--muted-foreground);
    margin-left: auto;
}
body.profile-page .review-item .content {
    font-size: 0.8125rem;
    color: var(--foreground);
    line-height: 1.5;
    margin: 0;
}
body.profile-page .review-item .listing-link {
    font-size: 0.7rem;
    color: var(--muted-foreground);
    margin: 0.375rem 0 0;
}
body.profile-page .review-item .listing-link a {
    color: var(--brand-500, #8b5cf6);
    text-decoration: none;
}

/* ─── Contact supplier CTA ───────────────────────────────────────── */
body.profile-page .contact-cta {
    display: block;
    text-align: center;
    background: linear-gradient(135deg, #7c3aed, #8b5cf6);
    color: #fff;
    padding: 0.875rem 1.5rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.9375rem;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
    transition: transform 0.15s, box-shadow 0.15s;
}
body.profile-page .contact-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(124, 58, 237, 0.4);
}

/* ─── Empty state (used by all tabs) ──────────────────────────────── */
body.profile-page .empty-state {
    border-radius: 1rem;
    padding: 3rem 1rem;
    text-align: center;
    background: var(--card, rgba(255, 255, 255, 0.6));
    border: 1px solid var(--border, rgba(0, 0, 0, 0.06));
    backdrop-filter: blur(8px);
}
body.profile-page .empty-state i {
    font-size: 2rem;
    color: var(--muted-foreground);
    margin-bottom: 0.5rem;
}
body.profile-page .empty-state .title {
    color: var(--muted-foreground);
    font-weight: 600;
    margin: 0;
}
body.profile-page .empty-state .subtitle {
    font-size: 0.875rem;
    color: var(--muted-foreground);
    margin-top: 0.25rem;
}
body.profile-page .empty-state .btn-primary {
    display: inline-block;
    width: auto;
    padding: 0.625rem 1.5rem;
    margin-top: 1rem;
}

/* ─── Posts tab: post card tweaks ─────────────────────────────────── */
body.profile-page .post-card {
    margin-bottom: 1rem;
}
body.profile-page .post-card .post-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--foreground);
    margin: 0 0 0.5rem 0;
}
body.profile-page .post-card .post-content-excerpt {
    color: var(--foreground);
}

/* ─── Media tab: 3-col grid ───────────────────────────────────────── */
body.profile-page .media-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.375rem;
}
body.profile-page .media-grid .media-item {
    aspect-ratio: 1;
    border-radius: 0.5rem;
    overflow: hidden;
}
body.profile-page .media-grid .media-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ─── Trips tab: trip cards ───────────────────────────────────────── */
body.profile-page .trip-card {
    margin-bottom: 0.75rem;
}
body.profile-page .trip-card .trip-body {
    display: flex;
    gap: 1rem;
    padding: 1rem;
}
body.profile-page .trip-card .trip-thumb {
    width: 5rem;
    height: 5rem;
    border-radius: 0.75rem;
    object-fit: cover;
}
body.profile-page .trip-card .trip-title {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0;
}
body.profile-page .trip-card .trip-meta {
    font-size: 0.75rem;
    color: var(--muted-foreground);
    margin-top: 0.25rem;
}
body.profile-page .trip-card .badge-pill {
    margin-top: 0.5rem;
    background: rgba(16, 185, 129, 0.1);
    color: var(--success, #10b981);
}

/* ─── Bookings tab: booking cards ─────────────────────────────────── */
body.profile-page .booking-card {
    margin-bottom: 0.75rem;
    padding: 1rem;
}
body.profile-page .booking-card .booking-body {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}
body.profile-page .booking-card .booking-thumb {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.5rem;
    object-fit: cover;
}
body.profile-page .booking-card .booking-title {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0;
}
body.profile-page .booking-card .booking-meta {
    font-size: 0.75rem;
    color: var(--muted-foreground);
    margin: 0;
}
body.profile-page .booking-card .booking-status {
    background: rgba(14, 165, 233, 0.1);
    color: var(--brand-500, #8b5cf6);
}

/* ─── Saved tab: 2-col overlay grid ───────────────────────────────── */
body.profile-page .saved-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}
body.profile-page .saved-item {
    border-radius: 0.75rem;
    overflow: hidden;
    position: relative;
}
body.profile-page .saved-item img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}
body.profile-page .saved-item .saved-placeholder {
    width: 100%;
    aspect-ratio: 1;
    background: var(--muted, #f4f4f5);
    display: flex;
    align-items: center;
    justify-content: center;
}
body.profile-page .saved-item .saved-placeholder i {
    font-size: 2rem;
    color: var(--muted-foreground);
}
body.profile-page .saved-item .saved-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.75rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
}
body.profile-page .saved-item .saved-caption p {
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    margin: 0;
}

/* ─── Wallet tab ──────────────────────────────────────────────────── */
body.profile-page .wallet-balance-card {
    background: linear-gradient(135deg, var(--brand-500, #7c3aed), #8b5cf6);
    border-radius: 1rem;
    padding: 1.5rem;
    color: white;
    margin-bottom: 1rem;
}
body.profile-page .wallet-balance-card .label {
    font-size: 0.875rem;
    opacity: 0.8;
}
body.profile-page .wallet-balance-card .amount {
    font-size: 2.5rem;
    font-weight: 800;
    margin: 0.5rem 0;
}
body.profile-page .wallet-balance-card .currency {
    font-size: 0.75rem;
    opacity: 0.7;
}
body.profile-page .wallet-balance-card .btn-primary {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    margin-top: 1rem;
}
body.profile-page .wallet-tx-heading {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

body.profile-page .wallet-tx-item {
    border-radius: 0.75rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    background: var(--card, rgba(255, 255, 255, 0.6));
    border: 1px solid var(--border, rgba(0, 0, 0, 0.06));
    backdrop-filter: blur(8px);
}
body.profile-page .wallet-tx-item .tx-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
body.profile-page .wallet-tx-item .tx-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
body.profile-page .wallet-tx-item .tx-icon.in {
    background: rgba(16, 185, 129, 0.1);
}
body.profile-page .wallet-tx-item .tx-icon.out {
    background: rgba(239, 68, 68, 0.1);
}
body.profile-page .wallet-tx-item .tx-icon.in i {
    color: var(--success, #10b981);
}
body.profile-page .wallet-tx-item .tx-icon.out i {
    color: var(--danger, #ef4444);
}
body.profile-page .wallet-tx-item .tx-desc {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0;
}
body.profile-page .wallet-tx-item .tx-time {
    font-size: 0.75rem;
    color: var(--muted-foreground);
    margin: 0;
}
body.profile-page .wallet-tx-item .tx-amount {
    font-weight: 700;
}
body.profile-page .wallet-tx-item .tx-amount.in {
    color: var(--success, #10b981);
}
body.profile-page .wallet-tx-item .tx-amount.out {
    color: var(--danger, #ef4444);
}

/* ─── Tab content wrapper ─────────────────────────────────────────── */
body.profile-page .profile-tab-content {
    padding: 1rem 0;
}

/* ─── Responsive tweaks ──────────────────────────────────────────── */
@media (max-width: 640px) {
    body.profile-page .profile-actions-row {
        width: 100%;
        justify-content: flex-start;
    }
    body.profile-page .featured-listings-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    body.profile-page .trust-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    body.profile-page .wallet-balance-card .amount {
        font-size: 2rem;
    }
}