/* Layout-fix: Garanterar att vänster sida inte flyter över höger */
/* Layout */
.layout {
    display: flex;
    max-width: 1250px;
    margin: 0 auto;
    gap: 25px;
    padding: 20px;
}

.main { flex: 1; min-width: 0; }
.sidebar { width: 300px; min-width: 300px; display: flex; flex-direction: column; gap: 20px; }



/* Kompakta horisontella Cards */
.link-card-horizontal {
    display: flex;
    background: rgba(0, 0, 0, 0);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    margin-bottom: 15px;
    overflow: hidden;
    height: 90px; /* Betydligt lägre höjd för att få plats med fler */
    transition: 0.3s;
}

.link-image-left {
    width: 130px; /* Mycket mindre thumbnail */
    min-width: 130px;
    background: rgba(30, 42, 40, 0.4); /* Transparent bakgrund */
}

.link-image-left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
}

.link-content-right {
    padding: 10px 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    flex-grow: 1;
}

.link-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.favicon-small { width: 20px; height: 20px; }

.link-header h3 {
    margin: 0;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.link-desc {
    font-size: 0.8rem;
    color: #9cd3c5ef; /* Samma färg som datum på index */
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Tvingar beskrivningen till en rad för att spara höjd */
}

.link-footer {
    margin-top: 4px;
    display: flex;
    gap: 15px;
    font-size: 0.65rem;
    color: #fec86a;
    opacity: 0.7;
}

/* Sidebar Boxar */
.sidebar .block {
    margin-bottom: 0; /* Vi använder gap i sidebaren istället */
}



/* Mobil-fix */
@media (max-width: 900px) {
    .layout { flex-direction: column; }
    .sidebar, .main { width: 100% !important; min-width: 100%; }
}

.main { width: 70%; }
.sidebar { width: 30%; display: flex; flex-direction: column; gap: 20px; }

/* Länk-korten inuti Box 1 */
.compact-link-card {
    display: flex;
    align-items: center;
    height: 50px; 
    background: #3e4947c6; 
    border-left: 4px solid #678787;
    border-radius: 4px;
    text-decoration: none;
    margin-bottom: 8px;
    overflow: hidden;
    transition: 0.3s;
    width: 100%;
}

.compact-link-card:hover {
    transform: translateX(5px);
    background: #4e5f5cc9;
    border-left-color: #f89710e1;
}

.card-text-group {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    white-space: nowrap;
}

/* Bilden längst till vänster */
.card-thumb {
    width: 70px;
    min-width: 70px;
    height: 100%;
    background: rgba(30, 42, 40, 0.4); /* Transparent bakgrund */
}

.card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block; /* Viktigt för att bilden ska synas */
    opacity: 0.8;
}

.card-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 15px;
    overflow: hidden;
}

/* Grupperar titel och beskrivning */
.text-wrapper {
    display: flex;
    align-items: baseline; /* Gör att den lilla texten ligger snyggt i linje med rubriken */
    flex-grow: 1;
    overflow: hidden;
    margin-right: 15px;
}

.card-title {
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 1px;
    font-size: 0.80rem;
    color: #f89710e1;
    flex-shrink: 0;
}

.card-main-info {
    display: flex;
    align-items: center;
    gap: 12px;
    overflow: hidden;
    white-space: nowrap;
}

/* Din specifika beskrivnings-stil */
.card-desc {
    text-transform: uppercase; 
    letter-spacing: 1px; 
    font-size: 0.55rem; 
    opacity: 0.8;
    color: #e2e8f0;
    margin-left: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-domain {
    font-size: 0.6rem;
    color: #5afaf8;
    font-family: 'Orbitron';
    margin-left: 10px;
    opacity: 0.6;
}

/* Justering av kortet för att garantera 40px trots padding */
.compact-link-card {
    display: flex;
    align-items: center;
    height: 40px; 
    background: #3d4342; 
    border-left: 4px solid #f89e0d;
    border-radius: 4px;
    text-decoration: none;
    color: #e2e8f0;
    margin-bottom: 6px;
    overflow: hidden;
    transition: 0.3s ease;
}

.favicon-mini { width: 20px; height: 20px; flex-shrink: 0; }

/* Den gemensamma Box-stilen */
.block {
    background: rgba(30, 42, 40, 0.4); /* Transparent bakgrund */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
}

.sidebar-title {
    font-family: 'Orbitron';
    font-size: 0.8rem;
    color: #f89710e1;
    background: #122324; /* Samma som boxen eller aningen ljusare */
    padding: 10px 15px;
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-transform: uppercase;
    letter-spacing: 2px;
    /* Den lilla skuggningen under bannern */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    position: relative; /* Säkerställer att skuggan syns över innehållet */
    z-index: 1;
}

/* Justering av innehållet i boxen */
.block-content {
    padding: 15px;
    background: transparent;
}

@media (max-width: 900px) {
    .layout { flex-direction: column; }
    .sidebar, .main { width: 100% !important; min-width: 100%; }
}

.tag-pill {
    background: #283630;
    color: #38f8eb;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 0.6rem;
    font-family: 'Orbitron';
    text-decoration: none;
    border: 2px solid #333;
    transition: 0.3s;
    display: inline-block;
}

.tag-pill:hover {
    border-color: #f89710e1;
    color: #f89710e1;
    background: #0a4052;
}

.genre-container div:hover {
    filter: brightness(1.5);
}
.stream-item:hover {
    background: rgba(53, 86, 84, 0.32) !important;
    color: #d74507e2 !important;
}

/* Blinkande högtalare */
.playing-icon {
    display: inline-block;
    margin-right: 8px;
    color: #f89710e1;
    animation: pulse-audio 1.5s infinite;
}

@keyframes pulse-audio {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(1.2); }
    100% { opacity: 1; transform: scale(1); }
}

/* Stil för den aktiva raden i listan */
.stream-item.active-stream {
    background: rgba(248, 151, 16, 0.15) !important;
    color: #f89710e1 !important;
    font-weight: bold;
}

/* Behållaren för den rullande texten */
#meta-container {
    width: 100%;
    overflow: hidden; /* Döljer texten som hamnar utanför */
    white-space: nowrap;
    position: relative;
    height: 1.2rem;
    padding-bottom: 4px;
}

#meta-info {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px; /* Anpassa efter din box-bredd */
    display: block;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.55rem;
    color: #38bdf8;
    opacity: 0.6;
    letter-spacing: 1px;
    margin-top: 2px;
    padding-bottom: 4px; /* Här har du din padding */
    /* Animationen */
    animation: marquee-scroll 20s linear infinite;
    transition: all 0.5s ease;
    display: block; /* Garanterar att paddingen tar plats */
    animation-delay: 0s !important;
}

/* Animation: Ut till vänster, in från höger */
@keyframes marquee-scroll {
    0%   { transform: translateX(100%); } /* Börja utanför till höger */
    100% { transform: translateX(-100%); } /* Sluta utanför till vänster */
}

/* En extra stil för kvalitet-texten */
/* Flytta upp och styla om kvalitets-taggen */
.stream-quality {
    display: inline-block;
    color: #39fda8e1;
    font-size: 0.45rem;
    margin-left: 10px;
    border: 1px solid rgba(57, 253, 168, 0.4);
    padding: 4px 4px 4px 4px; /* 0px uppåt för att flytta upp den */
    border-radius: 3px;
    vertical-align: top;
    font-family: 'Orbitron', sans-serif;
}

.meta-scroller-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    padding-bottom: 8px; /* Återställd padding under blå text */
    height: 20px;
    position: relative;
}