@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

* {
    -webkit-user-select: none;
    user-select: none;
    font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif !important;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: black;
    overflow: hidden;
}

media-player { width: 100%; height: 100%; }

[data-media-player][data-layout=video]:not([data-fullscreen]) {
    border: 0;
    border-radius: 0;
}

/* ── OVERLAYS ── */
.overlay-background { background: transparent; width: auto; }

.overlay {
    position: absolute;
    opacity: 1;
    transition: all .5s ease-in-out;
}

.overlay.hidden {
    opacity: 0;
    display: flex !important;
}

/* WATERMARK */
.overlay-watermark {
    position: absolute;
    padding: 17px;
    right: 0;
    bottom: 50px;
    transition: all .25s ease-in-out;
    z-index: 102;
    opacity: 0;
}
[data-controls] .overlay-watermark { bottom: 80px; opacity: 1; }

#videaste-watermark { opacity: .6; transition: all .3s ease-in-out; }
[data-controls] #videaste-watermark { opacity: .8; }
[data-controls] #videaste-watermark:hover { opacity: 1; }

/* INFO BUBBLES */
.overlay-info {
    position: absolute;
    padding: 20px;
    right: 0;
    top: 0;
    transition: all .5s ease-in-out;
    opacity: 1;
}
.overlay-info.hidden { right: -60px; display: block; opacity: 0; }

.videaste-information {
    color: white;
    font-size: 23px;
    background: rgba(0,0,0,.8);
    display: block;
    border-radius: 10px;
    padding: 9px 14px;
    margin: -9px;
    opacity: .9;
    text-decoration: none;
}
.videaste-information:hover { opacity: 1; background: rgba(0,0,0,.95); }
.videaste-information svg { margin-right: .6rem; vertical-align: text-bottom; width: 1em; height: 1em; }
.videaste-information span { vertical-align: middle; }

.videaste-information-icon {
    background: rgba(0,0,0,.8);
    color: white;
    font-size: 24px;
    border-radius: 100%;
    width: 40px;
    height: 40px;
    padding: 8px;
    opacity: .9;
    text-decoration: none;
    display: block;
}
.videaste-information-icon svg { vertical-align: text-top; text-align: center; width: 1em; height: 1em; }

/* ── BOUTONS OVERLAY ── */
.overlay-button {
    display: flex;
    flex-wrap: wrap;
    gap: 2vw;
    width: 100% !important;
    left: 50%;
    bottom: 22%;
    transform: translateX(-50%);
    justify-content: center;
    align-items: flex-end;
    z-index: 101;
}
.overlay-button.hidden { transform: translate(-50%, -47%); }

.hidden {
    opacity: 0;
    z-index: 0;
    pointer-events: none;
}
.hidden a { pointer-events: none; }

.videaste-button {
    color: white;
    font-size: clamp(16px, 2.5vw, 30px);
    font-weight: bold;
    background: black;
    display: block;
    border-radius: 100px;
    padding: clamp(16px, 1.7vw, 20px) clamp(25px, 2.7vw, 32px);
    opacity: 1;
    text-decoration: none;
    animation: fadeIn 0.5s forwards;
}
.videaste-button:not(.disable):hover { filter: brightness(1.1); transform: scale(1.02); }
.videaste-button.disable { cursor: not-allowed; opacity: .5; }
.videaste-button svg { margin-right: clamp(6px,1vw,12px); vertical-align: text-bottom; width: clamp(19px,3vw,36px); height: clamp(19px,3vw,36px); }
.videaste-button span { vertical-align: bottom; }
.videaste-button-multi { display: flex !important; gap: 2vw; }
.icon-only svg { margin: 0; }

.videaste-button .label {
    z-index: -1;
    position: absolute;
    width: max-content;
    background: white;
    opacity: 0;
    top: -1em;
    left: 50%;
    padding: .5em .8em;
    border-radius: 1em;
    translate: -50%;
    font-weight: lighter;
    font-size: .7em;
    transition: all .2s ease;
}
.videaste-button:hover .label { opacity: .7; top: -2.7em; }

/* ── TOGGLE ── */
.toggle-off,
#toggle,
media-player:has(#toggle.target) .toggle-on { display: none !important; }

media-player:has(#toggle.target) .toggle-off,
#toggle.target { display: block !important; opacity: 1; }

#toggle.target.videaste-button-multi {
    animation: fadeIn 0.5s forwards;
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
}

:where(.vds-video-layout .vds-controls[data-visible]) {
    background-image: linear-gradient(to top,rgb(0 0 0 / 1),10%,transparent,95%,rgb(0 0 0 / .3));
}

/* ── IFRAME FALLBACK ── */
.embed-container { position: relative; width: 100%; height: 100%; }
.embed-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; background: black; }