/* OS-specific card components */

:root {
    /* Distro-specific colors with alpha channel for backgrounds */
    --debian-color: 215, 10, 83;
    --ubuntu-color: 233, 84, 32;
    --fedora-color: 41, 65, 114;
    --arch-color: 23, 147, 209;
    --mint-color: 135, 207, 62;
    --gentoo-color: 84, 72, 122;
    --slackware-color: 116, 121, 161;
    --pureos-color: 143, 87, 177;
    --opensuse-color: 115, 186, 37;
    --manjaro-color: 53, 191, 92;
    --popos-color: 72, 185, 199;
    --elementary-color: 100, 186, 255;
    --zorin-color: 21, 166, 240;
    --kali-color: 74, 102, 172;
    --rocky-color: 16, 185, 129;
    --endeavouros-color: 127, 63, 191;
}

/* OS-specific title & subtitle variations */
.distro-title {
    flex-grow: 1;
    margin: 0;
    font-size: 1.5rem;
}

.distro-title .subtitle {
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--card-text);
    letter-spacing: 1px;
    margin-left: 8px;
}

.version-subtitle {
    font-size: 14px;
    color: #aaaaaa;
    font-style: italic;
    margin: 0;
    padding: 0 0 8px 0;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
    text-align: left;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    display: block;
    min-height: 12px;
}

/* Distro card logo */
.distro-logo {
    width: 32px;
    height: 32px;
    margin-right: 10px;
    object-fit: contain;
}

.header-controls {
    display: flex;
    gap: 10px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.home-link, .docs-link {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(30, 30, 30, 0.6);
    border-radius: 6px;
    color: #e0e0e0;
    text-decoration: none;
    font-size: 15px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.2s ease;
    position: relative;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.home-link:hover, .docs-link:hover {
    background-color: rgba(var(--circle-primary-color, 212, 175, 55), 0.3);
    border-color: rgba(var(--circle-primary-color, 212, 175, 55), 0.5);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* OS-specific icon color variations */
.debian .home-link:hover, .debian .docs-link:hover { 
    background-color: rgba(var(--debian-color), 0.3);
    border-color: rgba(var(--debian-color), 0.5); 
}
.ubuntu .home-link:hover, .ubuntu .docs-link:hover { 
    background-color: rgba(var(--ubuntu-color), 0.3); 
    border-color: rgba(var(--ubuntu-color), 0.5); 
}
.fedora .home-link:hover, .fedora .docs-link:hover { 
    background-color: rgba(var(--fedora-color), 0.3); 
    border-color: rgba(var(--fedora-color), 0.5); 
}
.arch .home-link:hover, .arch .docs-link:hover { 
    background-color: rgba(var(--arch-color), 0.3); 
    border-color: rgba(var(--arch-color), 0.5); 
}
.mint .home-link:hover, .mint .docs-link:hover { 
    background-color: rgba(var(--mint-color), 0.3); 
    border-color: rgba(var(--mint-color), 0.5); 
}
.gentoo .home-link:hover, .gentoo .docs-link:hover { 
    background-color: rgba(var(--gentoo-color), 0.3);
    border-color: rgba(var(--gentoo-color), 0.5); 
}
.slackware .home-link:hover, .slackware .docs-link:hover { 
    background-color: rgba(var(--slackware-color), 0.3);
    border-color: rgba(var(--slackware-color), 0.5); 
}
.pureos .home-link:hover, .pureos .docs-link:hover { 
    background-color: rgba(var(--pureos-color), 0.3);
    border-color: rgba(var(--pureos-color), 0.5); 
}
.opensuse .home-link:hover, .opensuse .docs-link:hover { 
    background-color: rgba(var(--opensuse-color), 0.3);
    border-color: rgba(var(--opensuse-color), 0.5); 
}
.manjaro .home-link:hover, .manjaro .docs-link:hover { 
    background-color: rgba(var(--manjaro-color), 0.3);
    border-color: rgba(var(--manjaro-color), 0.5); 
}
.popos .home-link:hover, .popos .docs-link:hover { 
    background-color: rgba(var(--popos-color), 0.3);
    border-color: rgba(var(--popos-color), 0.5); 
}
.elementary .home-link:hover, .elementary .docs-link:hover { 
    background-color: rgba(var(--elementary-color), 0.3);
    border-color: rgba(var(--elementary-color), 0.5); 
}
.zorin .home-link:hover, .zorin .docs-link:hover { 
    background-color: rgba(var(--zorin-color), 0.3);
    border-color: rgba(var(--zorin-color), 0.5); 
}
.kali .home-link:hover, .kali .docs-link:hover { 
    background-color: rgba(var(--kali-color), 0.3);
    border-color: rgba(var(--kali-color), 0.5); 
}
.rocky .home-link:hover, .rocky .docs-link:hover { 
    background-color: rgba(var(--rocky-color), 0.3);
    border-color: rgba(var(--rocky-color), 0.5); 
}
.endeavouros .home-link:hover, .endeavouros .docs-link:hover { 
    background-color: rgba(var(--endeavouros-color), 0.3);
    border-color: rgba(var(--endeavouros-color), 0.5); 
}

/* Tooltip styles */
.home-link .quick-tooltip, .docs-link .quick-tooltip {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 100;
}

.home-link:hover .quick-tooltip, .docs-link:hover .quick-tooltip {
    opacity: 1;
}

/* Download section */
.download-section {
    display: flex;
    flex-direction: column;
    gap: 0px;
    width: 100%;
    margin-top: 0;
}

/* OS-specific links and buttons */
.os-link {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    font-size: 16px;
    text-decoration: none;
    background-color: var(--card-bg);
    color: var(--card-text);
    padding: 12px 20px;
    border-radius: 6px;
    transition: all 0.25s ease;
    border: 1px solid var(--card-border);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
    font-weight: 500;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
    letter-spacing: 0.5px;
}

.os-link:hover {
    transform: translateY(-2px);
    filter: brightness(1.5);
}

.os-link:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.os-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* OS-specific button styling using CSS variables */
.debian .os-link { background-color: rgba(var(--debian-color), 0.25); border-color: rgba(var(--debian-color), 0.5); }
.ubuntu .os-link { background-color: rgba(var(--ubuntu-color), 0.25); border-color: rgba(var(--ubuntu-color), 0.5); }
.fedora .os-link { background-color: rgba(var(--fedora-color), 0.25); border-color: rgba(var(--fedora-color), 0.5); }
.arch .os-link { background-color: rgba(var(--arch-color), 0.25); border-color: rgba(var(--arch-color), 0.5); }
.mint .os-link { background-color: rgba(var(--mint-color), 0.25); border-color: rgba(var(--mint-color), 0.5); }
.gentoo .os-link { background-color: rgba(var(--gentoo-color), 0.25); border-color: rgba(var(--gentoo-color), 0.5); }
.slackware .os-link { background-color: rgba(var(--slackware-color), 0.25); border-color: rgba(var(--slackware-color), 0.5); }
.pureos .os-link { background-color: rgba(var(--pureos-color), 0.25); border-color: rgba(var(--pureos-color), 0.5); }
.opensuse .os-link { background-color: rgba(var(--opensuse-color), 0.25); border-color: rgba(var(--opensuse-color), 0.5); }
.manjaro .os-link { background-color: rgba(var(--manjaro-color), 0.25); border-color: rgba(var(--manjaro-color), 0.5); }
.popos .os-link { background-color: rgba(var(--popos-color), 0.25); border-color: rgba(var(--popos-color), 0.5); }
.elementary .os-link { background-color: rgba(var(--elementary-color), 0.25); border-color: rgba(var(--elementary-color), 0.5); }
.zorin .os-link { background-color: rgba(var(--zorin-color), 0.25); border-color: rgba(var(--zorin-color), 0.5); }
.kali .os-link { background-color: rgba(var(--kali-color), 0.25); border-color: rgba(var(--kali-color), 0.5); }
.rocky .os-link { background-color: rgba(var(--rocky-color), 0.25); border-color: rgba(var(--rocky-color), 0.5); }
.endeavouros .os-link { background-color: rgba(var(--endeavouros-color), 0.25); border-color: rgba(var(--endeavouros-color), 0.5); }

/* Hash display */
.hash {
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    padding: 6px 10px;
    background-color: rgba(30, 30, 30, 0.3);
    color: #e0e0e0a0;
    overflow-x: auto;
    white-space: nowrap;
    font-size: 15px;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    max-width: 100%;
    scrollbar-width: thin;
    scrollbar-color: rgba(200, 200, 200, 0.3) transparent;
    margin: 8px 0 2px 0;
    position: relative;
    -webkit-mask-image: linear-gradient(to right, transparent, black 30px, black calc(100% - 30px), transparent);
    mask-image: linear-gradient(to right, transparent, black 30px, black calc(100% - 30px), transparent);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hash::before, .hash::after {
    content: none;
}

.hash:hover {
    background-color: rgba(50, 50, 50, 0.4);
    color: #e0e0e0c0;
    border-color: rgba(var(--circle-primary-color-rgb, 235, 94, 40), 0.3);
}

/* Tooltip for hash element */
.hash .tooltip {
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 14px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 1;
    z-index: 100;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    text-align: center;
}

.hash .tooltip.fade-out {
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* Copy indicator styling */
.copy-indicator {
    font-style: italic;
    text-shadow: none;
}

/* OS-specific hover effects for distro cards */
.distro-card.debian:hover {
    border-color: rgba(var(--debian-color), 0.8) !important;
    background-color: rgba(var(--debian-color), 0.05) !important;
}
.distro-card.ubuntu:hover {
    border-color: rgba(var(--ubuntu-color), 0.8) !important;
    background-color: rgba(var(--ubuntu-color), 0.05) !important;
}
.distro-card.fedora:hover {
    border-color: rgba(var(--fedora-color), 0.8) !important;
    background-color: rgba(var(--fedora-color), 0.05) !important;
}
.distro-card.arch:hover {
    border-color: rgba(var(--arch-color), 0.8) !important;
    background-color: rgba(var(--arch-color), 0.05) !important;
}
.distro-card.mint:hover {
    border-color: rgba(var(--mint-color), 0.8) !important;
    background-color: rgba(var(--mint-color), 0.05) !important;
}
.distro-card.gentoo:hover {
    border-color: rgba(var(--gentoo-color), 0.8) !important;
    background-color: rgba(var(--gentoo-color), 0.05) !important;
}
.distro-card.slackware:hover {
    border-color: rgba(var(--slackware-color), 0.8) !important;
    background-color: rgba(var(--slackware-color), 0.05) !important;
}
.distro-card.pureos:hover {
    border-color: rgba(var(--pureos-color), 0.8) !important;
    background-color: rgba(var(--pureos-color), 0.05) !important;
}
.distro-card.opensuse:hover {
    border-color: rgba(var(--opensuse-color), 0.8) !important;
    background-color: rgba(var(--opensuse-color), 0.05) !important;
}
.distro-card.manjaro:hover {
    border-color: rgba(var(--manjaro-color), 0.8) !important;
    background-color: rgba(var(--manjaro-color), 0.05) !important;
}
.distro-card.popos:hover {
    border-color: rgba(var(--popos-color), 0.8) !important;
    background-color: rgba(var(--popos-color), 0.05) !important;
}
.distro-card.elementary:hover {
    border-color: rgba(var(--elementary-color), 0.8) !important;
    background-color: rgba(var(--elementary-color), 0.05) !important;
}
.distro-card.zorin:hover {
    border-color: rgba(var(--zorin-color), 0.8) !important;
    background-color: rgba(var(--zorin-color), 0.05) !important;
}
.distro-card.kali:hover {
    border-color: rgba(var(--kali-color), 0.8) !important;
    background-color: rgba(var(--kali-color), 0.05) !important;
}
.distro-card.rocky:hover {
    border-color: rgba(var(--rocky-color), 0.8) !important;
    background-color: rgba(var(--rocky-color), 0.05) !important;
}
.distro-card.endeavouros:hover {
    border-color: rgba(var(--endeavouros-color), 0.8) !important;
    background-color: rgba(var(--endeavouros-color), 0.05) !important;
}

/* Card border colors using CSS variables */
.distro-card.debian { border-color: rgba(var(--debian-color), 0.4) !important; }
.distro-card.ubuntu { border-color: rgba(var(--ubuntu-color), 0.4) !important; }
.distro-card.fedora { border-color: rgba(var(--fedora-color), 0.4) !important; }
.distro-card.arch { border-color: rgba(var(--arch-color), 0.4) !important; }
.distro-card.mint { border-color: rgba(var(--mint-color), 0.4) !important; }
.distro-card.gentoo { border-color: rgba(var(--gentoo-color), 0.4) !important; }
.distro-card.slackware { border-color: rgba(var(--slackware-color), 0.4) !important; }
.distro-card.pureos { border-color: rgba(var(--pureos-color), 0.4) !important; }
.distro-card.opensuse { border-color: rgba(var(--opensuse-color), 0.4) !important; }
.distro-card.manjaro { border-color: rgba(var(--manjaro-color), 0.4) !important; }
.distro-card.popos { border-color: rgba(var(--popos-color), 0.4) !important; }
.distro-card.elementary { border-color: rgba(var(--elementary-color), 0.4) !important; }
.distro-card.zorin { border-color: rgba(var(--zorin-color), 0.4) !important; }
.distro-card.kali { border-color: rgba(var(--kali-color), 0.4) !important; }
.distro-card.rocky { border-color: rgba(var(--rocky-color), 0.4) !important; }
.distro-card.endeavouros { border-color: rgba(var(--endeavouros-color), 0.4) !important; }

/* OS card-specific responsive styles */
@media (max-width: 600px) {
    .download-section,
    .os-link {
        width: 100%;
    }
    
    .os-link {
        box-sizing: border-box;
        text-align: center;
    }
}