/* ============================================================
   FlyUGC – Frontend
   Scoped unter .flyugc, kollidiert nicht mit Theme/Woo.
   ============================================================ */

.flyugc{--fly-accent:#1d9bf0;--fly-star:#ffb400;--fly-trust:#2e7d4f;--fly-card:282px;--fly-gap:28px;--fly-maxw:1350px;--fly-padx:45px;margin:30px auto;position:relative;max-width:var(--fly-maxw);padding-left:var(--fly-padx);padding-right:var(--fly-padx)}
.flyugc *{box-sizing:border-box}
.flyugc-heading{text-align:center;margin:0 0 22px;font-size:24px;line-height:1.25}

/* ---- Track ---- */
.flyugc-track{
    display:flex;gap:var(--fly-gap);
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    padding:6px 2px 18px;
    scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;
}
/* Scroll-Modus: seitliches Center-Padding, damit JEDE Karte (inkl. erster/letzter)
   exakt mittig andocken kann -> Peek links UND rechts sichtbar. */
.flyugc-track.is-scroll{
    padding-left:calc(50% - var(--fly-card)/2);
    padding-right:calc(50% - var(--fly-card)/2);
}
.flyugc-track::-webkit-scrollbar{height:6px}
.flyugc-track::-webkit-scrollbar-thumb{background:rgba(0,0,0,.18);border-radius:99px}
.flyugc-track::-webkit-scrollbar-track{background:transparent}

/* Alles passt rein -> statisch zentriert, kein Snap/Scroll. */
.flyugc-track.is-static{justify-content:center;overflow-x:hidden;flex-wrap:wrap;scroll-snap-type:none}
.flyugc--single .flyugc-track{justify-content:center;overflow-x:hidden;scroll-snap-type:none}

/* ---- Card ---- */
.flyugc-card{flex:0 0 var(--fly-card);max-width:var(--fly-card);width:var(--fly-card);scroll-snap-align:center;scroll-snap-stop:always}
.flyugc-track.is-static > .flyugc-card{margin:0}

/* ---- iPhone-Device ---- */
.flyugc-device{
    position:relative;padding:11px;border-radius:52px;
    background:linear-gradient(155deg,#46474a 0%,#1c1d1f 9%,#0a0a0b 50%,#1c1d1f 91%,#46474a 100%);
    /* Kein Cast-Shadow -> Hintergrund bleibt sauber weiss. Nur innere Kanten-Definition. */
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,.30),
        inset 0 0 0 1px rgba(0,0,0,.6);
}
.flyugc-device::before{
    content:"";position:absolute;left:-2px;top:112px;width:3px;height:24px;border-radius:2px;
    background:#1f2022;box-shadow:0 38px 0 #1f2022,0 74px 0 #1f2022;
}
.flyugc-device::after{
    content:"";position:absolute;right:-2px;top:150px;width:3px;height:52px;border-radius:2px;background:#1f2022;
}

.flyugc-screen{position:relative;border-radius:42px;overflow:hidden;background:#000;line-height:0}

/* Dynamic Island */
.flyugc-island{
    position:absolute;top:15px;left:50%;transform:translateX(-50%);
    width:94px;height:28px;background:#000;border-radius:16px;z-index:6;
    box-shadow:0 0 0 1px rgba(255,255,255,.05);pointer-events:none;
}
.flyugc-island::after{
    content:"";position:absolute;right:13px;top:50%;transform:translateY(-50%);
    width:8px;height:8px;border-radius:50%;
    background:radial-gradient(circle at 35% 30%,#2a3942,#05080a 70%);
    box-shadow:0 0 0 1px rgba(255,255,255,.06);
}

/* ---- Video-Slot + eigener minimaler Player ---- */
.flyugc-video{line-height:0}
.flyugc-video > *{margin:0!important}

.flyugc-player{position:relative;width:100%;aspect-ratio:9/16;background:#000;overflow:hidden}
.flyugc-media{
    display:block;width:100%;height:100%;object-fit:cover;background:#000;cursor:pointer;
    /* Sicherheitsnetz: falls irgendein UA native Controls erzwingt, ausblenden. */
}
/* Native Controls in WebKit vollständig verstecken (Fallback, wir setzen controls=false ohnehin) */
.flyugc-media::-webkit-media-controls{display:none!important}
.flyugc-media::-webkit-media-controls-enclosure{display:none!important}
.flyugc-media::-webkit-media-controls-panel{display:none!important}
.flyugc-media::-webkit-media-controls-start-playback-button{display:none!important}

/* Zentraler Play-Button */
.flyugc-play{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:74px;height:74px;padding:0;border:none;background:none;cursor:pointer;z-index:3;
    display:flex;align-items:center;justify-content:center;
    transition:opacity .22s ease,transform .22s ease;
    -webkit-tap-highlight-color:transparent;
}
.flyugc-play svg{width:100%;height:100%;display:block;filter:drop-shadow(0 4px 14px rgba(0,0,0,.45))}
.flyugc-play circle{fill:rgba(15,15,17,.55)}
.flyugc-play path{fill:#fff}
.flyugc-play:hover{transform:translate(-50%,-50%) scale(1.06)}
.flyugc-play:active{transform:translate(-50%,-50%) scale(.96)}

/* Läuft -> Button weg (nicht klickbar, ausgeblendet) */
.flyugc-player[data-state="playing"] .flyugc-play{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.8)}

/* ---- Chin / Trust-Leiste ---- */
.flyugc-chin{display:flex;align-items:center;gap:10px;padding:10px 14px 12px;background:#0a0a0b;border-top:1px solid rgba(255,255,255,.06)}
.flyugc-badge{flex:0 0 auto;width:19px;height:19px;border-radius:50%;background:var(--fly-accent);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1}
.flyugc-id{display:flex;flex-direction:column;line-height:1.18;margin-right:auto;min-width:0}
.flyugc-name{color:#fff;font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.flyugc-sub{color:#9a9aa0;font-size:10.5px;letter-spacing:.02em;margin-top:1px}
.flyugc-stars{flex:0 0 auto;color:var(--fly-star);font-size:14px;letter-spacing:1.5px}

/* ---- Carousel-Navigation ---- */
.flyugc-nav{position:absolute;top:6px;left:0;right:0;height:var(--fly-navh,420px);pointer-events:none;z-index:5}
.flyugc-arrow{
    pointer-events:auto;position:absolute;top:42%;transform:translateY(-50%);
    width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;
    background:rgba(255,255,255,.96);box-shadow:0 6px 20px rgba(0,0,0,.20);
    font-size:25px;line-height:1;color:#111;display:flex;align-items:center;justify-content:center;
    transition:transform .15s ease,opacity .2s ease;
}
.flyugc-arrow:hover{transform:translateY(-50%) scale(1.08)}
.flyugc-prev{left:2px}
.flyugc-next{right:2px}

/* Dots */
.flyugc-dots{display:flex;justify-content:center;gap:7px;margin-top:6px}
.flyugc-dot{width:7px;height:7px;border-radius:50%;background:rgba(0,0,0,.18);border:none;padding:0;cursor:pointer;transition:all .2s ease}
.flyugc-dot.is-active{background:var(--fly-accent);width:20px;border-radius:99px}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1024px){
    .flyugc{--fly-padx:20px}
}

@media (max-width:760px){
    .flyugc{--fly-card:266px;--fly-gap:18px;--fly-padx:16px}
    .flyugc-arrow{display:none}
    .flyugc--single .flyugc-card{max-width:300px;width:auto}
}

@media (max-width:380px){
    .flyugc{--fly-card:240px}
}