/*
 * Schwebende QR-Vorschau (Mobile) — Darstellung
 * Pfad: assets/css/qr-preview-floating.css
 *
 * GEMEINSAM genutzt von create-qr.php und create-qr-free.php, eingebunden
 * ueber $head_options['additional_css'].
 *
 * Gehoert zu assets/js/qr-preview-floating.js. Beide Dateien standen bis
 * 2026-08-08 doppelt in den zwei Erstellungsseiten. Die Regeln waren
 * inhaltlich identisch, nur Kommentare und Umbrueche unterschieden sich —
 * geprueft per Zeilenvergleich vor der Zusammenlegung.
 *
 * Aenderungen hier wirken auf BEIDE Seiten.
 */
@media (max-width: 1023px) {
    #qr-preview-floating {
        position: fixed;
        right: 16px;
        bottom: 16px;
        z-index: 30;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding: 10px;
        background: #ffffff;
        border-radius: 18px;
        box-shadow: 0 8px 28px rgba(15,23,42,0.22), 0 2px 6px rgba(15,23,42,0.08);
        /* Kein grosses translate im hidden-State — iOS Safari legt
           sonst dauerhaft Off-Screen-Layer an, was bei bestimmten
           Scroll-Kombinationen zu leeren Repaint-Bereichen fuehrt.
           Stattdessen: kleine translate + opacity + pointer-events. */
        transform: translateY(20px);
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
        transition: transform .25s ease, opacity .18s ease, visibility 0s linear .18s,
                    background-color .2s ease, border-radius .25s ease, padding .25s ease;
        /* will-change bewusst weggelassen: dauerhaft aktiv ist ein
           bekannter iOS-Rendering-Bug (verlorene Repaints). */
        -webkit-transform-style: preserve-3d;
        /* NUR layout — paint containment wuerde den Close-Button
           (top:-8px/right:-8px) am Karten-Rand abschneiden. */
        contain: layout;
        overflow: visible;
    }
    .dark #qr-preview-floating {
        background: #1e293b;
        box-shadow: 0 8px 28px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.25);
    }
    #qr-preview-floating[data-visible="true"] {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
        transition: transform .25s ease, opacity .18s ease, visibility 0s linear 0s,
                    background-color .2s ease, border-radius .25s ease, padding .25s ease;
    }
    /* === Expanded State === */
    #qr-preview-floating .floating-qr {
        width: 108px;
        height: 108px;
        background: #ffffff;
        border-radius: 10px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        /* Kein Schatten: auf dem weissen Traeger der Floating-Vorschau
           erzeugte er einen feinen Saum, der wie ein Rahmen um den
           QR-Code wirkte (2026-08-02). */
    }
    #qr-preview-floating .floating-qr img,
    #qr-preview-floating .floating-qr svg {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: contain;
    }
    #qr-preview-floating .floating-minimize {
        position: absolute;
        top: -8px;
        right: -8px;
        width: 26px;
        height: 26px;
        border-radius: 9999px;
        background: #1e293b;
        border: 2px solid #ffffff;
        color: #ffffff;
        font-size: 10px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
        transition: transform .15s ease;
    }
    .dark #qr-preview-floating .floating-minimize {
        background: #f1f5f9;
        color: #1e293b;
        border-color: #1e293b;
    }
    #qr-preview-floating .floating-minimize:active { transform: scale(.9); }
    #qr-preview-floating .floating-label {
        text-align: center;
        font-size: 10px;
        font-weight: 600;
        color: #64748b;
        margin-top: 6px;
        letter-spacing: .04em;
        text-transform: uppercase;
    }
    .dark #qr-preview-floating .floating-label { color: #94a3b8; }
    #qr-preview-floating .floating-expand { display: none; }
    /* === Minimized State === */
    #qr-preview-floating[data-state="minimized"] {
        padding: 0;
        border-radius: 9999px;
        background: linear-gradient(135deg, #10b981, #059669);
    }
    .dark #qr-preview-floating[data-state="minimized"] {
        background: linear-gradient(135deg, #10b981, #047857);
    }
    #qr-preview-floating[data-state="minimized"] .floating-qr,
    #qr-preview-floating[data-state="minimized"] .floating-label,
    #qr-preview-floating[data-state="minimized"] .floating-minimize { display: none; }
    #qr-preview-floating[data-state="minimized"] .floating-expand {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 18px;
        background: transparent;
        border: 0;
        color: #ffffff;
        font-weight: 600;
        font-size: 13px;
        cursor: pointer;
        letter-spacing: .01em;
    }
    #qr-preview-floating[data-state="minimized"] .floating-expand i {
        font-size: 14px;
    }
    .preview-help-mobile { display: block !important; }
}