/* overrideinfo-slider-public.css */
.overrideinfo-slider-wrapper {
    position: relative;
    /* Breakout to full screen width (up to 1920px) even if inside a container */
    width: 100vw !important;
    max-width: 1920px !important;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
}

.overrideinfo-slider-container {
    position: relative;
    /* width and height are set via inline style from PHP (design dimensions) */
    /* JS applies scale() transform to fit the viewport proportionally */
    overflow: hidden;
    background: #f0f0f0;
    transform-origin: top left;
}

/*
  FULL-WIDTH OVERRIDE
  PHP outputs: #overrideinfo-slider-{id} .overrideinfo-slider-container { width: Npx !important }
  That selector has specificity (1,1,0). A plain class rule like
  `.overrideinfo-slider-container { width: 100% !important }` is only (0,1,0)
  and LOSES — so the PHP's fixed pixel width always wins.

  Fix: add `.overrideinfo-slider-wrapper` (0,1,0) + `.overrideinfo-slider-container` (0,1,0)
  + `:not(#ovrinfo-w)` whose argument is a non-existent ID giving (1,0,0) per spec.
  Total = (1,2,0) which is higher than PHP's (1,1,0) — our rule wins on every breakpoint.
  HEIGHT values set by PHP are intentionally left untouched.
*/
.overrideinfo-slider-wrapper .overrideinfo-slider-container:not(#ovrinfo-w) {
    width: 100% !important;
    max-width: 100% !important;
}

.ovrinfo-slider-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    width: 100%;
    height: 100%;
}

.ovrinfo-slider-slide {
    flex-shrink: 0 !important;
    width: 100% !important;
    /* Height set via inline style (matches design canvas height exactly) */
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
}

/* Base element styles */
.ovrinfo-slider-el {
    position: relative;
    z-index: 10;
    box-sizing: border-box;
    color: inherit;
    visibility: visible;
    opacity: 1;
}

/* Group layer: acts as a positioned container for child layers */
.ovrinfo-slider-el-group {
    overflow: visible !important;
}

/* Button layer wrapper must never clip its inner <a> border */
.ovrinfo-slider-el-button {
    overflow: visible !important;
}

.ovrinfo-slider-group-inner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Child layers inside a group are absolutely positioned relative to the group */
.ovrinfo-slider-group-inner>.ovrinfo-slider-el {
    position: absolute;
}

/* Text and heading layers must stay content-sized — no full-width stretching */
.ovrinfo-slider-el-text,
.ovrinfo-slider-el-heading,
.ovrinfo-slider-el-title {
    max-width: max-content;
}

.ovrinfo-slider-content-wrapper {
    /* MUST be absolute covering the full slide so layer positions
       reference the same origin as the editor canvas (top-left of slide) */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    display: block;
    overflow: visible;
    z-index: 10;
}

.ovrinfo-slider-btn {
    display: inline-block;
    padding: 12px 24px;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    transition: all 0.3s ease;
    text-align: center;
    box-sizing: border-box;
    /* Removed background-clip:padding-box so background-image can render through text/icon clipping */
}


/* Navigation Arrows */
.ovrinfo-slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s, transform 0.2s;
    padding: 0;
}

.ovrinfo-slider-nav svg {
    display: block;
    pointer-events: none;
    flex-shrink: 0;
}

.ovrinfo-slider-nav:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: translateY(-50%) scale(1.08);
}

.ovrinfo-slider-prev {
    left: 20px;
}

.ovrinfo-slider-next {
    right: 20px;
}

/* Dots */
.ovrinfo-slider-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 20;
}

.ovrinfo-slider-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.25s, transform 0.2s, border-color 0.25s;
    display: block;
    flex-shrink: 0;
}

.ovrinfo-slider-dot-active,
.ovrinfo-slider-dot:hover {
    background: #fff;
    transform: scale(1.25);
}

/* Image overlay */
.ovrinfo-slide-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

/* Animations */
.ovrinfo-anim-hidden {
    opacity: 0;
    visibility: hidden;
}

.ovrinfo-anim-visible {
    opacity: 1;
    visibility: visible;
}

/* Editor Keyframes */
@keyframes ovrFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes ovrFadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes ovrMoveUp {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.98);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes ovrMoveDown {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ovrMoveLeft {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes ovrMoveRight {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes ovrPopIn {
    from {
        opacity: 0;
        transform: scale(0.5);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes ovrPopUp {
    from {
        opacity: 0;
        transform: scale(0.5);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes ovrPopOut {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(0.5);
    }
}

/* SR7-style preset keyframes (name = ovr + preset without spaces) */
@keyframes ovrSlideHorizontal {
    from {
        opacity: 0;
        transform: translateX(80px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes ovrSlideVertical {
    from {
        opacity: 0;
        transform: translateY(70px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ovrSlideDiagTL {
    from {
        opacity: 0;
        transform: translate(-70px, -70px);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes ovrSlideDiagTR {
    from {
        opacity: 0;
        transform: translate(70px, -70px);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes ovrSkewMoveX {
    from {
        opacity: 0;
        transform: skewX(14deg) translateX(-50px);
    }

    to {
        opacity: 1;
        transform: skewX(0) translateX(0);
    }
}

@keyframes ovrSkewMoveY {
    from {
        opacity: 0;
        transform: skewY(14deg) translateY(50px);
    }

    to {
        opacity: 1;
        transform: skewY(0) translateY(0);
    }
}

@keyframes ovrSkewRotate {
    from {
        opacity: 0;
        transform: skewX(20deg) rotate(-8deg);
    }

    to {
        opacity: 1;
        transform: skewX(0) rotate(0);
    }
}

@keyframes ovrRotate360 {
    from {
        opacity: 0;
        transform: rotate(-200deg) scale(0.5);
    }

    to {
        opacity: 1;
        transform: rotate(0) scale(1);
    }
}

@keyframes ovrRotateZoom {
    from {
        opacity: 0;
        transform: rotate(-45deg) scale(0.2);
    }

    to {
        opacity: 1;
        transform: rotate(0) scale(1);
    }
}

@keyframes ovrRotateFall {
    from {
        opacity: 0;
        transform: rotate(45deg) translateY(-80px);
    }

    to {
        opacity: 1;
        transform: rotate(0) translateY(0);
    }
}

@keyframes ovrZoomIn {
    from {
        opacity: 0;
        transform: scale(0.25);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes ovrZoomOut {
    from {
        opacity: 0;
        transform: scale(1.5);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes ovrZoomInBack {
    0% {
        opacity: 0;
        transform: scale(0.2);
    }

    70% {
        opacity: 1;
        transform: scale(1.06);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes ovrZoomOutBack {
    0% {
        opacity: 0;
        transform: scale(1.8);
    }

    70% {
        opacity: 1;
        transform: scale(0.94);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Premium Animations */
@keyframes ovrSlideUpLong {
    0% {
        opacity: 0;
        transform: translateY(150px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ovrSlideDownLong {
    0% {
        opacity: 0;
        transform: translateY(-150px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ovrRotateInCW {
    0% {
        opacity: 0;
        transform: rotate(-180deg) scale(0.5);
    }

    100% {
        opacity: 1;
        transform: rotate(0) scale(1);
    }
}

@keyframes ovrRotateInCCW {
    0% {
        opacity: 0;
        transform: rotate(180deg) scale(0.5);
    }

    100% {
        opacity: 1;
        transform: rotate(0) scale(1);
    }
}

@keyframes ovrZoomInElastic {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }

    60% {
        opacity: 1;
        transform: scale(1.1);
    }

    80% {
        transform: scale(0.95);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes ovrZoomOutElastic {
    0% {
        opacity: 0;
        transform: scale(1.7);
    }

    60% {
        opacity: 1;
        transform: scale(0.9);
    }

    80% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes ovrFlipXFast {
    0% {
        opacity: 0;
        transform: perspective(400px) rotateX(90deg);
    }

    100% {
        opacity: 1;
        transform: perspective(400px) rotateX(0);
    }
}

@keyframes ovrFlipYFast {
    0% {
        opacity: 0;
        transform: perspective(400px) rotateY(90deg);
    }

    100% {
        opacity: 1;
        transform: perspective(400px) rotateY(0);
    }
}

@keyframes ovrSkewLeft {
    0% {
        opacity: 0;
        transform: skewX(30deg) translateX(100px);
    }

    100% {
        opacity: 1;
        transform: skewX(0) translateX(0);
    }
}

@keyframes ovrSkewRight {
    0% {
        opacity: 0;
        transform: skewX(-30deg) translateX(-100px);
    }

    100% {
        opacity: 1;
        transform: skewX(0) translateX(0);
    }
}

@keyframes ovrBounceIn {

    0%,
    20%,
    40%,
    60%,
    80%,
    100% {
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }

    20% {
        transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
        transform: scale3d(0.9, 0.9, 0.9);
    }

    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
        transform: scale3d(0.97, 0.97, 0.97);
    }

    100% {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

@keyframes ovrRollIn {
    0% {
        opacity: 0;
        transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0deg);
    }
}

@keyframes ovrRotate3DDown {
    0% {
        opacity: 0;
        transform: perspective(800px) rotateX(-90deg);
        transform-origin: top;
    }

    100% {
        opacity: 1;
        transform: perspective(800px) rotateX(0deg);
        transform-origin: top;
    }
}

@keyframes ovrRotate3DUp {
    0% {
        opacity: 0;
        transform: perspective(800px) rotateX(90deg);
        transform-origin: bottom;
    }

    100% {
        opacity: 1;
        transform: perspective(800px) rotateX(0deg);
        transform-origin: bottom;
    }
}

@keyframes ovrSlideLeftElastic {
    0% {
        opacity: 0;
        transform: translateX(200px);
    }

    60% {
        opacity: 1;
        transform: translateX(-20px);
    }

    80% {
        transform: translateX(10px);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes ovrSlideRightElastic {
    0% {
        opacity: 0;
        transform: translateX(-200px);
    }

    60% {
        opacity: 1;
        transform: translateX(20px);
    }

    80% {
        transform: translateX(-10px);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes ovrSwingIn {
    0% {
        transform: rotate3d(0, 0, 1, -100deg);
        transform-origin: top left;
        opacity: 0;
    }

    100% {
        transform: rotate3d(0, 0, 1, 0deg);
        transform-origin: top left;
        opacity: 1;
    }
}

@keyframes ovrJelly {

    0%,
    11.1%,
    100% {
        transform: none;
    }

    22.2% {
        transform: skewX(-12.5deg) skewY(-12.5deg);
    }

    33.3% {
        transform: skewX(6.25deg) skewY(6.25deg);
    }

    44.4% {
        transform: skewX(-3.125deg) skewY(-3.125deg);
    }

    55.5% {
        transform: skewX(1.5625deg) skewY(1.5625deg);
    }

    66.6% {
        transform: skewX(-0.78125deg) skewY(-0.78125deg);
    }

    77.7% {
        transform: skewX(0.390625deg) skewY(0.390625deg);
    }

    88.8% {
        transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    }
}

@keyframes ovrMaskRevealV {
    from {
        clip-path: inset(0 0 100% 0);
        opacity: 1;
    }

    to {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

@keyframes ovrMaskRevealH {
    from {
        clip-path: inset(0 100% 0 0);
        opacity: 1;
    }

    to {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

@keyframes ovrMaskCircle {
    from {
        clip-path: circle(0% at 50% 50%);
        opacity: 1;
    }

    to {
        clip-path: circle(75% at 50% 50%);
        opacity: 1;
    }
}

@keyframes ovrMaskSquare {
    from {
        clip-path: inset(50% 50% 50% 50%);
        opacity: 1;
    }

    to {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

@keyframes ovrLineFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes ovrLineSlideUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ovrLineSlideDown {
    from {
        opacity: 0;
        transform: translateY(-40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ovrLineSlideLeft {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes ovrLineSlideRight {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes ovrWordFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes ovrWordSlideUp {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ovrWordSlideDown {
    from {
        opacity: 0;
        transform: translateY(-25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ovrWordZoomIn {
    from {
        opacity: 0;
        transform: scale(0.4);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes ovrWordZoomOut {
    from {
        opacity: 0;
        transform: scale(1.5);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes ovrCharFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes ovrCharSlideUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ovrCharBoxIn {
    from {
        opacity: 0;
        transform: scale(0) rotate(8deg);
    }

    to {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

@keyframes ovrCharFlipX {
    from {
        opacity: 0;
        transform: perspective(400px) rotateX(90deg);
    }

    to {
        opacity: 1;
        transform: perspective(400px) rotateX(0);
    }
}

@keyframes ovrCharFlipY {
    from {
        opacity: 0;
        transform: perspective(400px) rotateY(90deg);
    }

    to {
        opacity: 1;
        transform: perspective(400px) rotateY(0);
    }
}

/* Fade */
@keyframes ovrinfoFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.ovrinfo-anim-fade {
    animation: ovrinfoFadeIn forwards;
}

/* Slide Up */
@keyframes ovrinfoSlideUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ovrinfo-anim-slide-up {
    animation: ovrinfoSlideUp forwards;
}

/* Slide Down */
@keyframes ovrinfoSlideDown {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ovrinfo-anim-slide-down {
    animation: ovrinfoSlideDown forwards;
}

/* Zoom In */
@keyframes ovrinfoZoomIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.ovrinfo-anim-zoom-in {
    animation: ovrinfoZoomIn forwards;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .ovrinfo-slider-content-wrapper {
        width: 100%;
    }

    /* min-height intentionally removed:
       PHP defines height per breakpoint with !important — a static
       min-height: 300px here overrides those values and breaks mobile layout. */

    .ovrinfo-slider-nav {
        width: 30px;
        height: 30px;
        font-size: 18px;
    }
}

/* SR7 Background Animation Engine Keyframes */
.ovrinfo-bg-buffer-a,
.ovrinfo-bg-buffer-b {
    transform: translate3d(0, 0, 0);
    will-change: transform, opacity, filter;
    backface-visibility: hidden;
    overflow: hidden;
}

@keyframes ovrBgSlideLeft {
    from {
        transform: translate3d(5%, 0, 0) scale(1.1);
    }

    to {
        transform: translate3d(0, 0, 0) scale(1.1);
    }
}

@keyframes ovrBgSlideRight {
    from {
        transform: translate3d(-5%, 0, 0) scale(1.1);
    }

    to {
        transform: translate3d(0, 0, 0) scale(1.1);
    }
}

@keyframes ovrBgSlideUp {
    from {
        transform: translate3d(0, 5%, 0) scale(1.1);
    }

    to {
        transform: translate3d(0, 0, 0) scale(1.1);
    }
}

@keyframes ovrBgSlideDown {
    from {
        transform: translate3d(0, -5%, 0) scale(1.1);
    }

    to {
        transform: translate3d(0, 0, 0) scale(1.1);
    }
}

@keyframes ovrBgZoomIn {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.15);
    }
}

@keyframes ovrBgZoomOut {
    from {
        transform: scale(1.3);
    }

    to {
        transform: scale(1.1);
    }
}

@keyframes ovrBgParallax {
    0% {
        transform: translate3d(-2%, -2%, 0) scale(1.1);
    }

    50% {
        transform: translate3d(2%, 2%, 0) scale(1.1);
    }

    100% {
        transform: translate3d(-2%, -2%, 0) scale(1.1);
    }
}

@keyframes ovrBgBlur {
    from {
        filter: blur(10px);
        opacity: 0;
    }

    to {
        filter: blur(0);
        opacity: 1;
    }
}

@keyframes ovrBgBrightness {
    from {
        filter: brightness(0);
        opacity: 0;
    }

    to {
        filter: brightness(1);
        opacity: 1;
    }
}

@keyframes ovrBgContrast {
    from {
        filter: contrast(0);
        opacity: 0;
    }

    to {
        filter: contrast(1);
        opacity: 1;
    }
}

@keyframes ovrBgGrayscale {
    from {
        filter: grayscale(1);
        opacity: 0;
    }

    to {
        filter: grayscale(0);
        opacity: 1;
    }
}

/* Helper classes for the animation engine */
.ovrinfo-anim-slide-left {
    animation: ovrBgSlideLeft 1s both !important;
}

.ovrinfo-anim-slide-right {
    animation: ovrBgSlideRight 1s both !important;
}

.ovrinfo-anim-zoom-out {
    animation: ovrBgZoomOut 1s both !important;
}

.ovrinfo-anim-parallax {
    animation: ovrBgParallax 10s ease-in-out infinite both !important;
}

.ovrinfo-anim-blur {
    animation: ovrBgBlur 1s both !important;
}

.ovrinfo-anim-brightness {
    animation: ovrBgBrightness 1s both !important;
}

.ovrinfo-anim-contrast {
    animation: ovrBgContrast 1s both !important;
}
/* ARROW SKINS - All 13 SR7 skins */
/* Ares: circular with double border */
.ovrinfo-nav-skin-ares { border-radius: 50% !important; border: 3px double currentColor !important; background: transparent !important; }
/* Custom: square */
.ovrinfo-nav-skin-custom { border-radius: 4px !important; background: transparent !important; }
/* Dione: circle with outer ring glow */
.ovrinfo-nav-skin-dione { border-radius: 50% !important; outline: 3px solid currentColor !important; outline-offset: 2px !important; }
/* Erinyen: sharp square, transparent, solid border */
.ovrinfo-nav-skin-erinyen { border-radius: 0 !important; border: 2px solid currentColor !important; background: transparent !important; }
/* Hades: dark themed square */
.ovrinfo-nav-skin-hades { border-radius: 4px !important; background: #1a1a2e !important; box-shadow: 0 4px 12px rgba(0,0,0,0.6) !important; }
/* Hebe: glowing circle */
.ovrinfo-nav-skin-hebe { border-radius: 50% !important; border: 2px solid currentColor !important; background: transparent !important; box-shadow: 0 0 8px currentColor !important; }
/* Hephaistos: inset shadow rounded */
.ovrinfo-nav-skin-hephaistos { border-radius: 8px !important; box-shadow: inset 0 -3px 0 rgba(0,0,0,0.3) !important; }
/* Hermes: small rounded corners */
.ovrinfo-nav-skin-hermes { border-radius: 4px !important; }
/* Hesperiden: perfect circle (default) */
.ovrinfo-nav-skin-hesperiden { border-radius: 50% !important; }
/* Metis: sharp square */
.ovrinfo-nav-skin-metis { border-radius: 0 !important; }
/* Persephone: circle, transparent with subtle border */
.ovrinfo-nav-skin-persephone { border-radius: 50% !important; border: 1px solid rgba(255,255,255,0.4) !important; background: transparent !important; }
/* Uranus: rounded with elevated shadow */
.ovrinfo-nav-skin-uranus { border-radius: 8px !important; box-shadow: 0 4px 15px rgba(0,0,0,0.25) !important; }
/* Zeus: circle with double glow aura */
.ovrinfo-nav-skin-zeus { border-radius: 50% !important; box-shadow: 0 0 0 4px rgba(255,255,255,0.15), 0 6px 20px rgba(0,0,0,0.4) !important; }

/* ── Tab Navigation Base Reset ─────────────────────────────────────────────── */
/* Prevent theme CSS from hiding tab text or resetting sizes */
.ovrinfo-slider-tabs {
    display: flex;
    align-items: center;
    pointer-events: auto;
}

.ovrinfo-slider-tabs .ovr-nav-tab {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-indent: 0 !important;
    line-height: normal !important;
    visibility: visible !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}

.ovrinfo-slider-btn {
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
}

.ovrinfo-slider-btn br {
    display: initial !important;
}

/* Force all button children to inherit font-size and text wrapping rules */
.ovrinfo-slider-btn > * {
    font-size: inherit !important;
    white-space: inherit !important;
    word-break: inherit !important;
    overflow-wrap: inherit !important;
}

/* Button text element - background-clip:text support for button bg images */
.ov-btn-text {
    font-size: inherit !important;
    min-width: 0 !important;
}

/* Button Layer Icon Styling - SR7 Compatible */
.ov-btn-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    font-size: inherit !important;
}

.ov-btn-icon:empty {
    display: none !important;
}

.ov-btn-icon svg {
    width: 1em !important;
    height: 1em !important;
    vertical-align: middle;
}

.ov-btn-icon i,
.ov-btn-icon span,
.ov-btn-icon .material-icons,
.ov-btn-icon .fa,
.ov-btn-icon .fab,
.ov-btn-icon .fas,
.ov-btn-icon .far {
    font-size: 1em !important;
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
}



.ovrinfo-slider-btn svg {
    width: 1em !important;
    height: 1em !important;
    vertical-align: middle;
}

.ovrinfo-slider-btn i,
.ovrinfo-slider-btn .material-icons,
.ovrinfo-slider-btn .fa,
.ovrinfo-slider-btn .fab,
.ovrinfo-slider-btn .fas,
.ovrinfo-slider-btn .far {
    font-size: 1em !important;
    line-height: 1 !important;
    vertical-align: middle;
}

/* ── Missing Layer Preset Keyframes ─────────────────────────────────────────
   The panel generates animation names as 'ovr' + presetName.replace(/\s+/g,'')
   These are required for the public JS to find them by name at runtime.
──────────────────────────────────────────────────────────────────────────── */

/* Fade category */
@keyframes ovrFadeUp {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes ovrFadeDown {
    from { opacity: 0; transform: translateY(-40px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Slide category — standard direction variants */
@keyframes ovrSlideLeft {
    from { opacity: 0; transform: translateX(80px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes ovrSlideRight {
    from { opacity: 0; transform: translateX(-80px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes ovrSlideUp {
    from { opacity: 0; transform: translateY(80px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes ovrSlideDown {
    from { opacity: 0; transform: translateY(-80px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Slide Long variants */
@keyframes ovrSlideLeftLong {
    from { opacity: 0; transform: translateX(200px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes ovrSlideRightLong {
    from { opacity: 0; transform: translateX(-200px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Rotate category */
@keyframes ovrRotateIn {
    from { opacity: 0; transform: rotate(-180deg) scale(0.5); }
    to   { opacity: 1; transform: rotate(0) scale(1); }
}

/* Flip category — full (non-Fast) variants */
@keyframes ovrFlipX {
    from { opacity: 0; transform: perspective(600px) rotateX(90deg); }
    to   { opacity: 1; transform: perspective(600px) rotateX(0); }
}
@keyframes ovrFlipY {
    from { opacity: 0; transform: perspective(600px) rotateY(90deg); }
    to   { opacity: 1; transform: perspective(600px) rotateY(0); }
}

/* Filters category */
@keyframes ovrBlurIn {
    from { opacity: 0; filter: blur(16px); }
    to   { opacity: 1; filter: blur(0); }
}
@keyframes ovrBrightness {
    from { opacity: 0; filter: brightness(3); }
    to   { opacity: 1; filter: brightness(1); }
}

/* Loops category */
@keyframes ovrFloating {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}
@keyframes ovrPulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.07); }
    100% { transform: scale(1); }
}