/**
 * Achermannsport Product Features - Frontend Styles
 * 
 * @package Achermannsport_Product_Features
 */

/* =============================================================================
   AUSSTELLUNG ICON (Shop/Kategorie)
   ============================================================================= */

/* Container für Icons auf der Produktkarte */
.aspf-card-icons {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 10;
}

/* Basis-Style für Icons */
.aspf-ausstellung-icon,
.aspf-preorder-icon {
    width: 32px;
    min-height: 32px;
    background: white;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 7px;
    position: relative;
    transition: all 0.3s ease;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Ausstellung Icon - Hover: Rosa */
.aspf-ausstellung-icon:hover {
    width: auto;
    padding-left: 15px;
    background: #E18585;
}

/* Preorder Icon - Hover: Grün */
.aspf-preorder-icon:hover {
    width: auto;
    padding-left: 15px;
    background: #77a464;
}

/* Links */
.aspf-ausstellung-icon a,
.aspf-preorder-icon a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #333;
    transition: color 0.2s ease;
    text-decoration: none;
    white-space: nowrap;
}

/* SVG Icons */
.aspf-ausstellung-icon svg,
.aspf-preorder-icon svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Text versteckt - erscheint bei Hover */
.aspf-ausstellung-icon a::before {
    content: 'Ausgestellt in Stans';
    font-size: 14px;
    font-weight: 500;
    color: #000;
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    transition: all 0.5s ease;
}

.aspf-preorder-icon a::before {
    content: 'Jetzt vorbestellen';
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    transition: all 0.5s ease;
}

/* Text bei Hover zeigen */
.aspf-ausstellung-icon:hover a::before,
.aspf-preorder-icon:hover a::before {
    opacity: 1;
    max-width: 200px;
}

/* Icon-Farbe bei Hover */
.aspf-ausstellung-icon:hover a {
    color: #000;
}

.aspf-preorder-icon:hover a {
    color: #fff;
}

/* =============================================================================
   PREORDER NOTICE (Produktseite)
   ============================================================================= */

.aspf-preorder-notice {
    margin: 1.5em 0;
    padding: 15px;
    background: #f0f8ff;
    border-left: 4px solid #77a464;
    border-radius: 0 4px 4px 0;
}

.aspf-preorder-title {
    color: #77a464;
}

/* =============================================================================
   BLOCKSY THEME INTEGRATION (type-as)
   ============================================================================= */

/* Für Blocksy Theme: Icons im ct-woo-card-extra Container */
[data-products="type-as"] .ct-woo-card-extra {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
}

[data-products="type-as"] .ct-woo-card-extra .aspf-ausstellung-icon,
[data-products="type-as"] .ct-woo-card-extra .aspf-preorder-icon {
    width: 32px;
    min-height: 32px;
    background: white;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 7px;
    position: relative;
    transition: all 0.3s ease;
    overflow: hidden;
}

[data-products="type-as"] .ct-woo-card-extra .aspf-ausstellung-icon:hover {
    width: auto;
    padding-left: 15px;
    background: #E18585;
}

[data-products="type-as"] .ct-woo-card-extra .aspf-preorder-icon:hover {
    width: auto;
    padding-left: 15px;
    background: #77a464;
}

[data-products="type-as"] .ct-woo-card-extra .aspf-ausstellung-icon a,
[data-products="type-as"] .ct-woo-card-extra .aspf-preorder-icon a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #333;
    transition: color 0.2s ease;
    text-decoration: none;
    white-space: nowrap;
}

[data-products="type-as"] .ct-woo-card-extra .aspf-ausstellung-icon a::before {
    content: 'Ausgestellt in Stans';
    font-size: 14px;
    font-weight: 500;
    color: #000;
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    transition: all 0.5s ease;
}

[data-products="type-as"] .ct-woo-card-extra .aspf-preorder-icon a::before {
    content: 'Jetzt vorbestellen';
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    transition: all 0.5s ease;
}

[data-products="type-as"] .ct-woo-card-extra .aspf-ausstellung-icon:hover a::before,
[data-products="type-as"] .ct-woo-card-extra .aspf-preorder-icon:hover a::before {
    opacity: 1;
    max-width: 200px;
}

[data-products="type-as"] .ct-woo-card-extra .aspf-ausstellung-icon:hover a {
    color: #000;
}

[data-products="type-as"] .ct-woo-card-extra .aspf-preorder-icon:hover a {
    color: #fff;
}

[data-products="type-as"] .ct-woo-card-extra .aspf-ausstellung-icon svg,
[data-products="type-as"] .ct-woo-card-extra .aspf-preorder-icon svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Preorder Icon Link nicht klickbar */
.aspf-preorder-icon a {
    pointer-events: none;
}

/* =============================================================================
   SINGLE PRODUCT PAGE - AUSSTELLUNG & PREORDER BADGES
   ============================================================================= */

/* Container für die Produktgalerie muss relativ sein */
.woocommerce-product-gallery,
.woocommerce div.product div.images {
    position: relative;
}

/* Container für die runden Badges rechts */
.aspf-single-badges-container {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Basis-Style für runde Badges auf Single */
.aspf-single-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

/* Ausstellung Badge - Rosa/Rot */
.aspf-single-ausstellung {
    background: #E18585;
    color: #000;
}

.aspf-single-ausstellung:hover {
    background: #d06060;
    color: #000;
    transform: translateX(-5px);
}

.aspf-single-ausstellung svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Preorder Badge - Grün */
.aspf-single-preorder {
    background: #77a464;
    color: #fff;
}

.aspf-single-preorder:hover {
    background: #5d8a4e;
}

.aspf-single-preorder svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Badge Text */
.aspf-badge-text {
    white-space: nowrap;
}

/* Mobile Anpassungen */
@media (max-width: 767px) {
    .aspf-single-badge {
        padding: 8px 12px;
        font-size: 12px;
    }
    
    .aspf-single-badge svg {
        width: 16px;
        height: 16px;
    }
}


/* =============================================================================
   PRODUKT-CLUSTER (Farbvarianten auf Produktseite)

   Darstellung: kompakte Swatch-Leiste im Produkt-Summary.
   - Aktive Farbe:   dunkler Rahmen, nicht klickbar
   - Sale:           roter Punkt oben rechts
   - Ausverkauft:    ausgegraut + diagonal durchgestrichen
   Die POSITION der Leiste wird NICHT hier gesteuert, sondern in
   includes/class-aspf-product-cluster.php (Block "POSITION IM FRONTEND").
   ============================================================================= */

.apc-cluster-variations {
    margin: 20px 0;
}

/* Label-Zeile: "Weitere Farben: <Name>" */
.apc-cluster-title {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 400;
    color: #666;
}

.apc-cluster-label-name {
    color: #111;
    font-weight: 600;
}

/* Swatch-Leiste */
.apc-cluster-items {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Einzelner Swatch (Produktbild als Mini-Thumbnail) */
.apc-cluster-item {
    position: relative;
    display: block;
    width: 56px;
    height: 56px;
    padding: 3px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.apc-cluster-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
    display: block;
    margin: 0;
}

.apc-cluster-item:hover {
    border-color: #111;
}

/* Aktuell angezeigtes Produkt */
.apc-cluster-item.current {
    border: 2px solid #111;
    padding: 2px;
    pointer-events: none;
}

/* Sale-Punkt oben rechts */
.apc-item-dot {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e2231a;
    border: 2px solid #fff;
}

/* Ausverkauft: ausgegraut + diagonaler Strich */
.apc-cluster-item.out-of-stock {
    opacity: 0.45;
}

.apc-item-strike {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.apc-item-strike::before {
    content: "";
    width: 70%;
    height: 2px;
    background: #999;
    transform: rotate(-45deg);
}

/* Mobile: horizontal scrollen statt umbrechen */
@media (max-width: 480px) {
    .apc-cluster-items {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 6px;
        -webkit-overflow-scrolling: touch;
    }

    .apc-cluster-item {
        flex-shrink: 0;
    }
}