/* v2.1.0: the control panel is inside the Joomla module; the animation is BODY-level. */
.santa-flyby {
    position: relative;
    display: block;
    width: 100%;
    min-height: 1px;
    overflow: visible !important;
    pointer-events: auto;
    z-index: 1;
    font: 14px/1.4 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.santa-flyby-animation-layer {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow: visible !important;
    pointer-events: none !important;
    z-index: 2147483000 !important;
}

.santa-flyby__video {
    position: fixed !important;
    left: 0;
    top: var(--santa-top, 18vh);
    width: var(--santa-size, 260px);
    height: auto;
    max-width: none !important;
    pointer-events: none !important;
    user-select: none;
    will-change: transform;
    transform-origin: center center;
}

.santa-flyby__controls {
    position: relative;
    z-index: 2147483646;
    display: inline-block;
    max-width: min(420px, 100%);
    pointer-events: auto;
}

.santa-flyby__control-toggle,
.santa-flyby__control-actions button,
.santa-flyby__sound-button {
    border: 1px solid rgba(0,0,0,.18);
    border-radius: 8px;
    background: rgba(255,255,255,.97);
    color: #222;
    cursor: pointer;
    padding: 8px 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    pointer-events: auto;
}
.santa-flyby__control-toggle { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; }
.santa-flyby__control-toggle:focus-visible,
.santa-flyby__control-actions button:focus-visible,
.santa-flyby__sound-button:focus-visible { outline: 3px solid #3b82f6; outline-offset: 2px; }

.santa-flyby__control-body {
    margin-top: 6px;
    padding: 12px;
    border-radius: 10px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 4px 18px rgba(0,0,0,.16);
    min-width: min(300px, calc(100vw - 30px));
    max-width: 420px;
    box-sizing: border-box;
    color: #222;
    pointer-events: auto;
}
.santa-flyby__control-row { display: grid; grid-template-columns: 1fr 1.5fr auto; align-items: center; gap: 8px; margin: 8px 0; }
.santa-flyby__control-row input[type="range"] { width: 100%; }
.santa-flyby__control-row select { width: 100%; box-sizing: border-box; padding: 5px; }
.santa-flyby__control-row--check { grid-template-columns: 1fr auto; }
.santa-flyby__control-row output { white-space: nowrap; font-size: 12px; opacity: .75; }
.santa-flyby__control-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.santa-flyby__sound-button { margin-top: 8px; }
.santa-flyby__control-body[hidden] { display: none !important; }
.santa-flyby__sound-button[hidden] { display: none !important; }

@media (max-width: 600px) {
    .santa-flyby__control-row { grid-template-columns: 1fr; gap: 3px; }
    .santa-flyby__control-body { min-width: min(300px, calc(100vw - 24px)); }
}

@media (prefers-reduced-motion: reduce) {
    .santa-flyby__video { animation: none !important; }
}
.santa-flyby__control-note {
    margin: 4px 0 8px;
    font-size: 12px;
    line-height: 1.35;
    opacity: .72;
}