/*
 Description: Iptv-Abonnemang "Mitt Konto CSS"
 Version: 5.1
*/

/* Stil för abonnemangslistan */
.iptv-subscriptions-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.iptv-subscriptions-list li {
    background-color: #fff; /* Vit bakgrund för renare look */
    border: 1px solid #e0e0e0; /* Ljusare ram */
    border-radius: 10px; /* Rundare hörn */
    padding: 20px; /* Mer padding för luft */
    margin-bottom: 20px; /* Mer avstånd mellan abonnemang */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* Lätt skugga för djup */
    font-size: 1em;
    color: #333;
    position: relative; /* För att tillåta absoluta positioner för tooltip */
    overflow: visible; /* Förhindra att tooltipen klipps bort */
}

.iptv-subscriptions-list li strong {
    color: #000;
    font-size: 14px; /* Samma storlek som värdet för bättre linjering */
    width: 150px; /* Fast bredd för etiketterna */
    display: inline-block; /* Gör att bredden respekteras */
    margin-right: 10px; /* Mellanslag mellan etikett och värde */
}

/* Stil för varje rad i abonnemanget */
.iptv-subscriptions-list li div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    word-break: break-all;
    max-width: 100%;
    margin: 8px 0;
    font-size: 14px;
    color: #555;
}

/* Ny stil för att skapa en tvåkolumnslayout */
.iptv-subscriptions-list li div .label {
    display: inline-flex;
    align-items: center;
    width: 150px; /* Fast bredd för etiketten */
    flex-shrink: 0; /* Förhindra att etiketten krymper */
    color: #333; /* Mörkare färg för etiketten */
}

.iptv-subscriptions-list li div .value {
    flex: 1; /* Ta upp resten av utrymmet */
    word-break: break-all;
    max-width: calc(100% - 150px); /* Justera för etikettens bredd */
    display: flex; /* Gör .value till en flex-container */
    align-items: center; /* Centrera vertikalt */
    flex-wrap: wrap; /* Tillåt radbrytning */
}

/* Lägg till ikoner för varje fält */
.iptv-subscriptions-list li div i {
    margin-right: 8px; /* Avstånd mellan ikon och text */
    color: #007bff; /* Blå färg på ikoner */
    font-size: 16px; /* Anpassad ikonstorlek */
}

.iptv-subscriptions-list li div .value a {
    color: #007bff;
    text-decoration: none;
    word-break: break-all;
    display: inline-block;
    max-width: calc(100% - 40px); /* Lämna plats för knappen */
}

.iptv-subscriptions-list li div .value a:hover {
    text-decoration: underline;
}

.iptv-subscriptions-list li .copy-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 3px; 
    padding: 4px 6px 4px 4px; /* 4px topp, 6px höger, 4px botten, 4px vänster */
    background-color: #007bff; /* Blå bakgrund */
    color: #fff; /* Vit text */
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    height: 24px;
    width: auto;
    flex-shrink: 0;
    transition: background-color 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Lätt skugga för att göra knappen mer framträdande */
}

.iptv-subscriptions-list li .copy-button i {
    font-size: 14px;
    width: 14px;
    height: 14px;
    line-height: 1;
    color: #fff;
    opacity: 1;
    align-items: center;
    justify-content: center;
    display: flex;
    margin: 0;
    padding: 0;
}

/* Ensure long URLs don't break the layout */
.iptv-subscriptions-list li div a {
    white-space: nowrap;       /* Keep the URL on one line */
    overflow: hidden;          /* Hide overflow if too long */
    text-overflow: ellipsis;   /* Add ellipsis (...) if truncated */
    max-width: 60%;           /* Limit URL width to avoid overflow (adjust as needed) */
}

.iptv-subscriptions-list li .copy-button:hover {
    background-color: #0056b3; /* Mörkare blå vid hover */
}

.iptv-subscriptions-list li .copy-button:hover i {
    color: #fff; /* Behåll vit färg vid hover */
}

/* Stil för tooltip */
.iptv-subscriptions-list li .copy-tooltip {
    display: none; /* Dölj tooltipen initialt */
    position: fixed; /* Använd fixed istället för absolute för att ta hänsyn till scroll */
    top: 0; /* Positionen sätts dynamiskt via JS */
    left: 0; /* Positionen sätts dynamiskt via JS */
    transform: translateX(-50%); /* Centrera horisontellt */
    background-color: #4CAF50; /* Grön bakgrund */
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    z-index: 1000;
    white-space: nowrap;
    transition: opacity 0.3s ease-in-out;
}

.iptv-subscriptions-list li .copy-button.copied + .copy-tooltip {
    display: block; /* Visa tooltipen när knappen har klassen 'copied' */
    opacity: 1; /* Full synlighet */
}

/* Responsiv design */
@media (max-width: 768px) {
    .iptv-subscriptions-list li {
        padding: 15px; /* Mindre padding på små skärmar */
    }

    .iptv-subscriptions-list li div {
        max-width: 85%; /* Minska bredden för att ge plats för knappen */
    }

    .iptv-subscriptions-list li div .value {
        max-width: calc(85% - 150px); /* Justera för etikettens bredd på små skärmar */
    }

    .iptv-subscriptions-list li div .value a {
        max-width: calc(100% - 40px); /* Lämna plats för knappen */
    }

    .iptv-subscriptions-list li .copy-button {
        margin-left: 3px; /* Ytterligare minskad marginal på små skärmar */
        padding: 3px 5px; /* Mindre knapp på små skärmar */
        height: 20px; /* Mindre höjd */
    }

    .iptv-subscriptions-list li .copy-tooltip {
        font-size: 10px; /* Mindre tooltip-text */
        padding: 3px 8px; /* Mindre padding */
        top: -25px; /* Justera position */
    }
}