/* ===================================
   FRONTEND CSS (assets/css/frontend.css)
   =================================== */

/* Basis Styles für JS Links */
.aawp-js-link {
    cursor: pointer;
    position: relative;
    transition: opacity 0.2s ease, transform 0.1s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Hover Effekte */
.aawp-js-link:hover {
    opacity: 0.85;
}

/* Focus Styles für Accessibility */
.aawp-js-link:focus {
    outline: 2px solid #0073aa;
    outline-offset: 2px;
    z-index: 10;
}

.aawp-js-link:focus:not(:focus-visible) {
    outline: none;
}

/* Active/Click State */
.aawp-js-link:active,
.aawp-js-link.clicking {
    transform: scale(0.98);
    opacity: 0.7;
}

/* Touch Active State */
.aawp-js-link.touch-active {
    background-color: rgba(0, 0, 0, 0.05);
}

/* Button Styles */
button.aawp-js-link {
    border: none;
    background: transparent;
    font: inherit;
    color: inherit;
    padding: 0;
    margin: 0;
    text-align: inherit;
    width: auto;
    display: inline-block;
}

/* Vollbreite Buttons in Tables */
.aawp-table button.aawp-js-link,
.aawp-comparison-table button.aawp-js-link {
    width: 100%;
}

/* Span Link Styles */
span.aawp-js-link {
    display: inline-block;
    text-decoration: inherit;
    color: inherit;
}

/* Titel Links */
span.aawp-js-link.aawp-product__title,
span.aawp-js-link.aawp-product-title {
    color: #0073aa;
    text-decoration: none;
}

span.aawp-js-link.aawp-product__title:hover,
span.aawp-js-link.aawp-product-title:hover {
    text-decoration: underline;
}

/* Bild Links */
span.aawp-js-link.aawp-product__image-link,
span.aawp-js-link[data-element-type="image"] {
    display: block;
    line-height: 0;
}

.aawp-js-link img {
    pointer-events: none;
    max-width: 100%;
    height: auto;
}

/* Field Links */
span.aawp-js-link.aawp-field-link {
    color: #0073aa;
}

/* Loading State */
.aawp-js-link.loading {
    opacity: 0.5;
    pointer-events: none;
    position: relative;
}

.aawp-js-link.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #0073aa;
    border-radius: 50%;
    animation: aawp-js-spin 1s linear infinite;
}

@keyframes aawp-js-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Mobile Optimierung */
@media (max-width: 768px) {
    .aawp-js-link {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Größere Touch-Targets für Mobile */
    .aawp-product__thumb .aawp-js-link,
    .aawp-product__image .aawp-js-link {
        display: block;
        padding: 10px;
        margin: -10px;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .aawp-js-link:focus {
        outline-color: #52acff;
    }
    
    span.aawp-js-link.aawp-product__title,
    span.aawp-js-link.aawp-field-link {
        color: #52acff;
    }
    
    .aawp-js-link.touch-active {
        background-color: rgba(255, 255, 255, 0.1);
    }
}

/* Print Styles */
@media print {
    .aawp-js-link {
        text-decoration: underline !important;
    }
    
    .aawp-js-link[data-url]::after {
        content: " (" attr(data-url) ")";
        font-size: 0.8em;
        color: #666;
    }
}