/* ================================
   QN FLEX SHOP - Mini-Cart (Header Widget)
   ================================
   Basis-Verhalten:
   - Dropdown erscheint nur bei Hover/Focus
   - Container ist initial unsichtbar (Anti-Flash)
   - Bei leerem Warenkorb bleibt alles versteckt
   - Styling (Farben/Position) liefert das Sitepackage
   ================================ */

/* === Mini-Cart Container: initial unsichtbar === */
/*
 * Wir starten mit is-hidden + is-empty im Template.
 * JS entfernt diese Klassen, sobald Warenkorb gefuellt ist.
 * So kein Flash beim Seitenladen.
 */
.qn-shop-mini-cart {
    transition: opacity var(--qn-shop-transition-slow), transform var(--qn-shop-transition-slow);
}

.qn-shop-mini-cart.is-empty {
    display: none !important;
}

.qn-shop-mini-cart.is-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateX(20px);
}

.qn-shop-mini-cart.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

/* === Doppelte Mini-Carts: Duplikate ausblenden ===
 * Falls mehrere Mini-Cart Elemente im DOM sind (z.B. Template-Einbindung +
 * zusaetzliches Content-Element), werden alle bis auf den ersten vom JS
 * mit der Klasse .is-duplicate versehen und hier ausgeblendet.
 * CSS alleine kann das nicht zuverlaessig, wenn die Carts in unterschiedlichen
 * Parents liegen (:first-of-type greift pro Parent, nicht global).
 */
.qn-shop-mini-cart.is-duplicate {
    display: none !important;
}

/* === Dropdown: Default unsichtbar === */
/*
 * Sitepackage definiert Position/Farben.
 * Wir setzen NUR die Sichtbarkeits-Defaults.
 */
.qn-shop-mini-cart-dropdown {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--qn-shop-transition-slow),
                visibility var(--qn-shop-transition-slow);
}

/* === Dropdown sichtbar bei Hover, Focus oder JS-Klasse ===
 * Hover/Focus-Effekt nur fuer Geraete mit echter Maus (@media hover: hover).
 * Auf Touch-Geraeten wuerde der Browser bei Tap kurz :hover triggern
 * und das Dropdown abgeschnitten aufblitzen lassen, bevor die Navigation
 * zur Warenkorb-Seite greift. Daher: kein Hover-Dropdown auf Touch.
 * Die .show-Klasse funktioniert weiterhin ueberall (JS-gesteuert).
 */
@media (hover: hover) and (pointer: fine) {
    .qn-shop-mini-cart:hover .qn-shop-mini-cart-dropdown,
    .qn-shop-mini-cart:focus-within .qn-shop-mini-cart-dropdown {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}

.qn-shop-mini-cart-dropdown.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Bei leerem Warenkorb: Dropdown NIE anzeigen, auch nicht bei Hover */
.qn-shop-mini-cart-dropdown.is-empty,
.qn-shop-mini-cart.is-empty .qn-shop-mini-cart-dropdown,
.qn-shop-mini-cart.is-hidden .qn-shop-mini-cart-dropdown {
    display: none !important;
}

/* === Update-Animationen === */
.qn-shop-cart-count.qn-shop-bounce {
    animation: qnShopCartBounce 0.5s ease;
}

@keyframes qnShopCartBounce {
    0%, 100% { transform: scale(1); }
    25%      { transform: scale(1.3); }
    50%      { transform: scale(0.9); }
    75%      { transform: scale(1.1); }
}

.qn-shop-cart-updated .qn-shop-cart-icon {
    animation: qnShopCartPulse 0.6s ease;
}

@keyframes qnShopCartPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.2); }
}

/*
 * HINWEIS: Exakte Position, Hintergrundfarben, Schatten, Radius
 * werden ausschliesslich im Sitepackage definiert.
 * Beispiel: design_hitziger/Resources/Public/Scss/shop/_mini-cart.scss
 */