/* VIPServer in the WordPress movie/episode editor. */
#repeatable-fieldset-one tr.nxx-vip-server-row > td {
    background: #fff8dc;
    border-color: #c69214;
}

#repeatable-fieldset-one tr.nxx-vip-server-row input[name="name[]"] {
    color: #3f2b00;
    background: linear-gradient(135deg, #fff7cf, #e7bd50);
    border-color: #a97708;
    box-shadow: 0 0 0 1px rgba(198, 146, 20, 0.18);
    font-weight: 700;
}

/* VIPServer in the public server selector. */
body .dooplay_player .options ul li.nxx-vip-server {
    color: #fff8d5 !important;
    background: linear-gradient(135deg, #6e4b08, #b78312) !important;
    border-color: #e7bd50 !important;
    box-shadow: 0 7px 18px rgba(198, 146, 20, 0.3) !important;
}

body .dooplay_player .options ul li.nxx-vip-server:hover,
body .dooplay_player .options ul li.nxx-vip-server.on {
    color: #555252 !important;
    background: linear-gradient(135deg, #f8dc83, #d5a62c) !important;
    border-color: #ffe8a3 !important;
    box-shadow: 0 9px 22px rgba(226, 177, 48, 0.4) !important;
}

body .dooplay_player .options ul li.nxx-vip-server .title,
body .dooplay_player .options ul li.nxx-vip-server .server,
body .dooplay_player .options ul li.nxx-vip-server i {
    color: inherit !important;
}

/* The theme sets white on nested labels; override it for the active gold button. */
body .dooplay_player .options ul li.nxx-vip-server:hover *,
body .dooplay_player .options ul li.nxx-vip-server.on * {
    color: #555252 !important;
}

/* Beat the episode theme's !important color on the nested title. */
body #playeroptionsul li.nxx-vip-server:hover span.title,
body #playeroptionsul li.nxx-vip-server.on span.title,
body #playeroptionsul li.nxx-vip-server:hover span.server,
body #playeroptionsul li.nxx-vip-server.on span.server,
body #playeroptionsul li.nxx-vip-server:hover > i,
body #playeroptionsul li.nxx-vip-server.on > i {
    color: #555252 !important;
}

/* Lightweight AJAX hand-off: keep a stable visual layer above the iframe
 * while DooPlay resolves and mounts the newly selected source. */
body .dooplay_player #playcontainer {
    position: relative;
    isolation: isolate;
}

body .dooplay_player #dooplay_player_response {
    transition: opacity 160ms ease;
}

body .dooplay_player.nxx-server-is-loading #dooplay_player_response {
    opacity: 0.72;
    will-change: opacity;
}

body .dooplay_player.nxx-server-is-loading #playcontainer::before {
    position: absolute;
    z-index: 20;
    inset: 0;
    content: '';
    pointer-events: auto;
    background:
        radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.09), transparent 32%),
        linear-gradient(135deg, rgba(18, 18, 23, 0.7), rgba(8, 8, 12, 0.84));
    animation: nxx-server-overlay-in 160ms ease both;
}

body .dooplay_player.nxx-server-is-loading #playcontainer::after {
    position: absolute;
    z-index: 21;
    top: 50%;
    left: 50%;
    width: 42px;
    height: 42px;
    margin: -24px 0 0 -24px;
    content: '';
    pointer-events: none;
    border: 3px solid rgba(255, 255, 255, 0.22);
    border-top-color: #fff;
    border-radius: 50%;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
    animation: nxx-server-spinner 700ms linear infinite;
}

/* DooPlay addresses its legacy loader by stored source number. Once the
 * display order differs, that can animate the wrong button; use the semantic
 * loading class applied to the clicked button instead. */
body .dooplay_player #playeroptions .dooplay_player_option > span.loader {
    display: none !important;
}

body .dooplay_player #playeroptions .dooplay_player_option.nxx-server-loading {
    position: relative;
    pointer-events: none;
}

/* DooPlay does not cancel an older player request when another server is
 * clicked. Lock the selector only for the short active hand-off so responses
 * cannot arrive out of order and mount the wrong iframe. */
body .dooplay_player.nxx-server-is-loading #playeroptions {
    pointer-events: none;
}

/* Keep the loading feedback attached to the real play glyph. This is
 * direction-safe: on RTL pages the ring follows the icon instead of moving
 * to the logical end of the whole server button. */
body .dooplay_player #playeroptions .dooplay_player_option.nxx-server-loading > i:first-child {
    position: relative;
    overflow: visible;
}

body .dooplay_player #playeroptions .dooplay_player_option.nxx-server-loading > i:first-child::after {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    box-sizing: border-box;
    width: 1.72em;
    height: 1.72em;
    content: '';
    pointer-events: none;
    border: 2px solid currentColor;
    border-bottom-color: transparent;
    border-radius: 50%;
    opacity: 0.88;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.2);
    will-change: transform;
    animation: nxx-server-icon-ring 680ms linear infinite;
}

body .dooplay_player #playeroptions .dooplay_player_option.nxx-server-load-error {
    animation: nxx-server-error-pulse 240ms ease;
}

@keyframes nxx-server-overlay-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes nxx-server-spinner {
    to { transform: rotate(360deg); }
}

@keyframes nxx-server-icon-ring {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes nxx-server-error-pulse {
    50% { opacity: 0.62; }
}

@media (max-width: 480px) {
    body .dooplay_player.nxx-server-is-loading #playcontainer::after {
        width: 34px;
        height: 34px;
        margin: -20px 0 0 -20px;
        border-width: 2px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body .dooplay_player #dooplay_player_response,
    body .dooplay_player.nxx-server-is-loading #playcontainer::before,
    body .dooplay_player #playeroptions .dooplay_player_option.nxx-server-load-error {
        transition: none;
        animation: none;
    }
}