/* ════════════════════════════════════════════════════════════════════
   TravelZona — Patch 3: Trust Layer styles
   ─────────────────────────────────────────
   • Activity ticker (live recent activity strip)
   • Trust band (platform stats for logged-out visitors)
   • Verified badge (purple, for People to Follow + profile)
   Loaded only on / (index.php) via a <link> tag.
   ════════════════════════════════════════════════════════════════════ */

/* ═══ PATCH-3: Activity Ticker ═══════════════════════════════════════
   A thin horizontal strip that sits between the hero and the feed.
   Shows recent bookings, shorts, and reviews with a "Live" pulse. */

.home-activity-ticker {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1.25rem;
    background: var(--card, #ffffff);
    border-bottom: 1px solid var(--border, #e4e4e7);
    overflow: hidden;
    white-space: nowrap;
    font-size: 0.8125rem;
    color: var(--foreground, #18181b);
}

/* On desktop, break out of the feed grid column to span full width
   (same technique as the hero, but using the grid-area from Patch 2.1).
   The ticker sits right below the hero in the "hero" grid row area,
   but since it's a separate element we use a simple full-width approach. */
@media (min-width: 1024px) {
    body.home-page .home-activity-ticker {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        border-radius: 0;
    }
}

.home-activity-pulse {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-weight: 700;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #ef4444;
    flex-shrink: 0;
    padding-right: 0.75rem;
    border-right: 1px solid var(--border, #e4e4e7);
}

.home-activity-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #ef4444;
    animation: tz-pulse 1.8s ease-in-out infinite;
}

@keyframes tz-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.75); }
}

.home-activity-track {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    overflow: hidden;
    flex: 1;
    min-width: 0;
}

.home-activity-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--muted-foreground, #71717a);
    font-size: 0.8125rem;
}

.home-activity-item i {
    color: #7c3aed;
    font-size: 0.75rem;
}

.home-activity-item strong {
    color: var(--foreground, #18181b);
    font-weight: 600;
}

/* Hide ticker on mobile if it would be too cramped */
@media (max-width: 640px) {
    .home-activity-ticker {
        padding: 0.5rem 1rem;
        gap: 0.5rem;
    }
    .home-activity-track {
        gap: 1rem;
    }
    .home-activity-item {
        font-size: 0.75rem;
    }
}

/* ═══ PATCH-3: Trust Band — REMOVED ═════════════════════════════════
   The platform stats band (Countries / Listings / Travelers / Avg Rating /
   Secure) was removed per user request. HTML and PHP query also removed
   from index.php. Verified Badge styles below are KEPT (used by S1.2
   suggested users widget). */

/* ═══ PATCH-3: Verified Badge (for People to Follow on homepage) ═══
   A small purple circle with a white check. Sits inline next to the
   user's name. The profile page already has its own .verified-badge
   class from profile-helpers.php — this is the homepage variant. */

.home-person-verified {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    color: #ffffff;
    font-size: 0.5rem;
    margin-left: 0.25rem;
    vertical-align: middle;
    box-shadow: 0 1px 3px rgba(124, 58, 237, 0.4);
    flex-shrink: 0;
}

.home-person-verified i {
    font-size: 0.5rem;
}

/* Also update the existing .verified-badge class on the profile page
   to use purple (overrides the blue from profile-helpers.php). */
.verified-badge {
    background: linear-gradient(135deg, #7c3aed, #6d28d9) !important;
    box-shadow: 0 1px 4px rgba(124, 58, 237, 0.4) !important;
}