/* ============================================
   CARDS.CSS - Card Components
   ============================================ */

.card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    transition: all var(--transition-base);
    height: 340px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.card:hover {
    border-color: rgba(255, 255, 255, 0.28);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* Coloured glow on typed cards */
.dj-card:hover {
    border-color: rgba(102, 126, 234, 0.45);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.2);
}

.venue-card:hover {
    border-color: rgba(242, 193, 109, 0.45);
    box-shadow: 0 8px 24px rgba(242, 193, 109, 0.2);
}

/* DJ Card - Flex layout for bottom-aligned socials */
.dj-card {
    display: flex;
    flex-direction: column;
    position: relative;
}

.dj-card    .dj-avatar { box-shadow: 0 0 0 2px var(--secondary); }
.venue-card .dj-avatar { box-shadow: 0 0 0 2px #F2C16D; }

.dj-card .genre-tags {
    flex: 1;
    align-content: flex-start;
}

/* Fixed-height social row on DJ cards so the divider is always at the same position */
.dj-card .card-social-links {
    height: 40px;
    margin-top: 0;
}

.dj-card .dj-name {
    color: var(--secondary);
}

/* Move LIVE badge to top left */
.dj-card .live-badge,
.venue-card .live-badge {
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    right: auto; /* Remove right positioning */
    border-radius: var(--radius-md);
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 700;
    z-index: 10;
}

/* Social links always at bottom */
.card-social-links {
    display: flex;
    gap: var(--space-sm);
    padding-top: var(--space-sm); /* Reduced from space-md */
    margin-top: auto; /* Pushes to bottom */
    border-top: 1px solid var(--border-color);
    min-height: 24px;
}

.card-social-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border-radius: 50%;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    text-decoration: none;
}

/* Target the Font Awesome icon specifically */
.card-social-icon i,
.card-social-icon svg {
    font-size: 16px;
    /* Remove fixed width/height that causes misalignment */
    /* Instead use flex centering on the parent */
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Ensure brand icons are properly centered */
.card-social-icon i.fa-brands,
.card-social-icon i.fab {
    /* Brand icons have different viewBox dimensions */
    /* Force them to align to center properly */
    transform: translateY(0); /* Reset any inherited transforms */
    vertical-align: middle;
}

.card-social-icon:hover {
    background: var(--secondary);
    color: white;
    transform: translateY(-2px);
}


/* DJ Cards */

.dj-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.dj-avatar {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-full);
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 20px;
    color: var(--text-primary);
    overflow: hidden;
}

.dj-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dj-info {
    flex: 1;
}

.dj-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

.dj-meta {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--text-secondary);
}

/* Venue Cards */
.venue-card {
    display: flex;
    flex-direction: column;
    position: relative;
}

.venue-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.venue-address {
    color: var(--text-secondary);
    font-size: 14px;
}

/* ============================================
   VENUE CARD IMPROVEMENTS
   ============================================ */

/* Venue address row with copy functionality */
.venue-address-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    margin-top: var(--space-sm);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
    color: var(--text-secondary);
    font-size: 13px;
}

.venue-address-row:hover {
    color: var(--text-primary);
}

.venue-address-row:hover .copy-hint {
    opacity: 1;
}

.venue-address-row .address-icon {
    font-size: 18px;
}

.venue-address-row .address-text {
    flex: 1;
}

.venue-address-row .copy-hint {
    opacity: 0;
    font-size: 12px;
    transition: opacity 0.2s ease;
}

/* Live DJ indicator on venue cards */
.venue-live-dj {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 5px var(--space-sm);
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
}

.venue-live-dj:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
}

.venue-live-dj .live-pulse {
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.venue-live-dj .dj-avatar {
    width: 24px;
    height: 24px;
    font-size: 12px;
}

.venue-live-dj .live-text {
    font-size: 11px;
    font-weight: 700;
    color: #ef4444;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.venue-live-dj .dj-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
}

/* Override .card-body .dj-name (same specificity, later in file) for the live DJ pill */
.card-body .venue-live-dj .dj-name {
    font-size: 13px;
    font-weight: 600;
}

/* OPEN badge - always visible, not just on hover */
.venue-card .live-badge--open {
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    background: var(--success);
    color: white;
    padding: 4px 10px;
    border-radius: var(--radius-md);
    font-size: 11px;
    font-weight: 700;
    z-index: 10;
    display: inline-flex !important; /* Force always visible */
    opacity: 1 !important;
    visibility: visible !important;
}

.live-badge.live-badge--open {
    display: inline-flex !important;
    opacity: 1 !important;
}

/* Override any hover-only styles */
.venue-card .live-badge--open,
.venue-card:hover .live-badge--open {
    display: inline-flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* OPEN (pending/unconfirmed) — yellow */
.live-badge--pending {
    background: #c9960a;
}
.live-badge--pending::before {
    content: '';
    width: 7px;
    height: 7px;
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.venue-card .live-badge--pending {
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    background: #c9960a;
    color: white;
    padding: 4px 10px;
    border-radius: var(--radius-md);
    font-size: 11px;
    font-weight: 700;
    z-index: 10;
    display: inline-flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.live-badge.live-badge--pending {
    display: inline-flex !important;
    opacity: 1 !important;
}


/* ============================================
   SKELETON LOADING CARDS
   ============================================ */

.skeleton-card {
    position: relative;
    overflow: hidden;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    transition: transform 0.2s ease;
}

.skeleton-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.06) 50%,
        transparent 100%
    );
    animation: shimmer 1.5s infinite;
    pointer-events: none;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

.skeleton-thumbnail {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    position: relative;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.skeleton-thumbnail::before {
    content: none; /* Remove the emoji */
}


.skeleton-logo {
    max-width: 70%;
    max-height: 70%;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: 0.25;
    filter: grayscale(100%) brightness(1.2);
    animation: skeleton-pulse 2s ease-in-out infinite;
}

.skeleton-avatar {
    background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--border-color) 50%, var(--bg-tertiary) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

/* Directory skeleton card modifiers */
.skeleton-dir-card {
    height: 220px;
    pointer-events: none;
}

.skeleton-avatar--lg {
    width: 56px;
    height: 56px;
}

.skeleton-info {
    flex: 1;
    margin-left: 12px;
}

.skeleton-line {
    background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-secondary) 50%, var(--bg-tertiary) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: 4px;
}

.skeleton-line--wide  { width: 60%; height: 18px; margin-bottom: 8px; }
.skeleton-line--narrow { width: 40%; height: 14px; }

.skeleton-tags-row {
    padding: 0 var(--space-md);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.skeleton-tag {
    height: 22px;
    background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-secondary) 50%, var(--bg-tertiary) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: 11px;
}

.skeleton-tag--sm { width: 50px; }
.skeleton-tag--md { width: 70px; }

.skeleton-footer {
    margin-top: auto;
    padding: var(--space-md);
    display: flex;
    gap: 12px;
}

.skeleton-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-secondary) 50%, var(--bg-tertiary) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
}

.skeleton-text {
    background: linear-gradient(90deg, var(--border-color) 25%, var(--bg-tertiary) 50%, var(--border-color) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: 4px;
    height: 12px;
}

.skeleton-name {
    width: 60%;
    height: 14px;
}

.skeleton-title {
    width: 90%;
    margin-top: 8px;
}

.skeleton-title-short {
    width: 50%;
    margin-top: 6px;
}

@keyframes skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

@keyframes skeleton-pulse {
    0%, 100% {
        opacity: 0.2;
        transform: scale(1);
    }
    50% {
        opacity: 0.35;
        transform: scale(1.02);
    }
}

/* Live Badge */
.live-badge {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    background: var(--danger);
    color: white;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.live-badge::before {
    content: '';
    width: 7px;
    height: 7px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

/* Live Badge - Open Variant (Venues) */
.live-badge--open {
    background: var(--success);
}

/* Tonight badge — upcoming event later today */
.live-badge--tonight {
    background: rgba(99, 102, 241, 0.9);
    animation: none;
}
.venue-card .live-badge--tonight {
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    background: rgba(99, 102, 241, 0.9);
    color: white;
    padding: 4px 10px;
    border-radius: var(--radius-md);
    font-size: 11px;
    font-weight: 700;
    z-index: 10;
    display: inline-flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    animation: none;
}
.live-badge--tonight::before {
    display: none;
}

.live-badge--open::before {
    content: '';
    width: 7px;
    height: 7px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

/* Avatar Modifiers */
.dj-avatar--logo {
    background: var(--bg-secondary);
    padding: 0;
}

.dj-avatar--default {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: white;
}

.verified-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-left: 4px;
    vertical-align: middle; /* Aligns with text */
    position: relative;
    top: -1px; /* Fine-tune if needed */
}

.verified-badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ============================================
   HEADER BAND - Profile Card Style (Option A)
   ============================================ */

.card-header-band {
    /* Bleed to card edges despite card's padding */
    margin: calc(-1 * var(--space-lg)) calc(-1 * var(--space-lg)) 0;
    height: 88px;
    flex-shrink: 0;
    background: linear-gradient(
        135deg,
        rgba(102, 126, 234, 0.35) 0%,
        rgba(86, 100, 210, 0.15) 100%
    );
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

/* Region label — absolutely positioned at bottom-right of the colour-break line */
.card-header-region {
    position: absolute;
    right: var(--space-md);
    bottom: 10px;
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60%;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.card-header-band--venue {
    background: linear-gradient(
        135deg,
        rgba(242, 193, 109, 0.35) 0%,
        rgba(217, 119, 6, 0.15) 100%
    );
}

/* Large avatar — centered at bottom of band, overlapping into card body */
.dj-avatar--lg {
    width: 72px;
    height: 72px;
    font-size: 24px;
    position: relative;
    margin-bottom: -36px;
    z-index: 2;
}

/* Card body — content area below the header band */
.card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    gap: var(--space-xs); /* 4px uniform spacing between all children */
    padding-top: 44px; /* 36px avatar overlap + 8px breathing room */
    text-align: center;
}

/* Venue cards use a logo-row to fill the 44px overlap zone instead */
.venue-card .card-body {
    padding-top: 0;
}

/* Row that flanks the logo in the grey body area.
   Negative margins match the header band bleed so the spacer
   is centered on the full card width (same as the logo). */
.venue-logo-row {
    display: flex;
    align-items: center;
    height: 44px;
    flex-shrink: 0;
    margin-left: calc(-1 * var(--space-lg));
    margin-right: calc(-1 * var(--space-lg));
}

.venue-logo-spacer {
    width: 72px;
    flex-shrink: 0;
}

.card-body .dj-name {
    font-size: 17px;
}

.card-body .dj-meta {
    justify-content: center;
}

.card-body .genre-tags {
    justify-content: center;
}

/* Venue content is left-aligned after the centered name */
.venue-card .card-body {
    text-align: left;
}

.venue-card .card-body .dj-name {
    text-align: center;
}

/* Venue address row: remove excess top space in the new compact layout */
.card-body .venue-address-row {
    margin-top: 0;
    padding-top: 2px;
    padding-bottom: 2px;
}

.card-body-right {
    position: absolute;
    top: var(--space-sm);
    right: calc(-1 * var(--space-md));
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 500;
    white-space: nowrap;
    text-align: right;
}

.venue-amenities-left,
.venue-amenities-right {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 3px;
    min-width: 0;
}

.venue-amenities-left {
    justify-content: flex-start;
    padding-left: var(--space-sm);
}

.venue-amenities-right {
    justify-content: flex-end;
    padding-right: var(--space-sm);
}

.venue-amenities-left .venue-amenity-tag,
.venue-amenities-right .venue-amenity-tag {
    font-size: 15px;
}

.amenity-overflow {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    padding: 1px 4px;
    line-height: 1;
    cursor: default;
    white-space: nowrap;
}

/* Fixed-height social row on venue cards — keeps divider at same position */
.venue-card .card-social-links {
    height: 40px;
    margin-top: 0;
}

/* Genre Tags */
.genre-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.genre-tag {
    background: rgba(102, 126, 234, 0.1);
    color: #a0aef7;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    border: 1px solid rgba(102, 126, 234, 0.25);
}

.genre-tag.active {
    background: var(--secondary);
    color: white;
    border-color: var(--secondary);
}

/* ============================================
   LIVE STREAM HEADER - STRICT 2-ROW LAYOUT
   ============================================ */

.stream-header {
    display: flex;
    flex-wrap: wrap; /* Allow rows to stack */
    align-items: center;
    gap: var(--space-xs) var(--space-sm);
    margin-bottom: var(--space-xs);
}

/* Avatar and name - always on the left */
.stream-header .dj-avatar--sm {
    flex-shrink: 0;
}

.stream-header .stream-dj-name {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: auto;
}

/* Row 1: First 4 socials - inline with name */
.stream-header .social-row-1 {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Row 2: Overflow socials + Twitch + Profile - always on new line */
.stream-header .social-row-2 {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    width: 100%; /* Force to new line */
    justify-content: flex-end; /* Right align */
    padding-top: 2px;
}

/* All icons consistent sizing */
.stream-header .card-social-icon,
.stream-header .stream-twitch-icon,
.stream-header .stream-profile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
    border-radius: 50%;
}

/* Twitch icon */
.stream-header .stream-twitch-icon {
    background: rgba(145, 70, 255, 0.15);
    border: 1px solid rgba(145, 70, 255, 0.3);
    color: #9146FF;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.stream-header .stream-twitch-icon:hover {
    background: #9146FF;
    color: white;
    transform: scale(1.1);
}

/* Profile icon */
.stream-header .stream-profile-icon {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.stream-header .stream-profile-icon:hover {
    background: var(--secondary);
    color: white;
    transform: scale(1.1);
}

/* Social icon hover */
.stream-header .card-social-icon:hover {
    transform: scale(1.1);
}

/* Override card-social-links for stream rows */
.stream-header .social-row-1 .card-social-links,
.stream-header .social-row-2 .card-social-links {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 0;
    margin-top: 0;
    border-top: none;
    flex-wrap: nowrap;
}

/* ============================================
   VENUE LOGO WITH FADE-IN
   ============================================ */

.venue-logo-container {
    position: relative;
    overflow: hidden;
}

.venue-logo-img {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.4s ease-in-out, transform 0.3s ease-out;
    display: block;
}

.venue-logo-img.loaded,
.venue-logo-img[data-cached="true"] {
    opacity: 1;
    transform: scale(1);
}

/* Placeholder while loading */
.venue-logo-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    z-index: 1;
}

.venue-logo-img.loaded + .venue-logo-placeholder,
.venue-logo-img[data-cached="true"] + .venue-logo-placeholder {
    opacity: 0;
    pointer-events: none;
}

/* Live card favorite button - make it round */
.live-stream-card .btn-favorite-card {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 18px;
    line-height: 1;
}

/* Ensure the star is centered */
.live-stream-card .btn-favorite-card span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.venue-amenities-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: var(--space-xs) 0;
}

.venue-amenity-tag {
    font-size: 18px;
    line-height: 1;
    cursor: default;
    opacity: 0.85;
    transition: opacity 0.15s;
}

.venue-amenity-tag:hover {
    opacity: 1;
}