/**
 * eXeLearning Plugin - Frontend Styles
 */

/* Block frontend container */
.exelearning-block-frontend {
    margin: 1.5em 0;
}

.exelearning-block-frontend iframe {
    display: block;
    max-width: 100%;
}

/* No preview notice */
.exelearning-no-preview-frontend .exelearning-notice {
    padding: 20px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    text-align: center;
}

.exelearning-no-preview-frontend .exelearning-notice p {
    margin: 0 0 10px;
}

.exelearning-no-preview-frontend .exelearning-notice p:last-of-type {
    color: #666;
    font-size: 0.9em;
}

.exelearning-download-link {
    display: inline-block;
    padding: 8px 16px;
    background: #0073aa;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    margin-top: 10px;
}

.exelearning-download-link:hover {
    background: #005a87;
    color: #fff;
}

/* Multi-format split download button */
.exelearning-block-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 6px 8px;
    background: #f6f7f7;
    border: 1px solid #dee2e6;
    border-bottom: none;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.exelearning-download {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    background: #0073aa;
    border-radius: 4px;
    color: #fff;
    overflow: visible;
}

.exelearning-download[data-busy="1"] {
    opacity: 0.7;
    pointer-events: none;
}

.exelearning-download__primary,
.exelearning-download__toggle,
.exelearning-download__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: transparent;
    color: #fff;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.2;
}

.exelearning-download .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    line-height: 1;
}

.exelearning-download__primary:hover,
.exelearning-download__toggle:hover {
    background: rgba(0, 0, 0, 0.15);
    color: #fff;
}

.exelearning-download__toggle {
    border-left: 1px solid rgba(255, 255, 255, 0.25);
    padding: 6px 8px;
}

.exelearning-download__menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin: 4px 0 0;
    padding: 4px 0;
    list-style: none;
    background: #fff;
    color: #1d2327;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    min-width: 220px;
    z-index: 1000;
}

.exelearning-download__menu .exelearning-download__item {
    width: 100%;
    color: #1d2327;
    padding: 6px 12px;
    background: transparent;
    text-align: left;
}

.exelearning-download__menu .exelearning-download__item:hover {
    background: #f0f0f1;
    color: #1d2327;
}

.exelearning-download__status {
    font-size: 12px;
    margin-left: 10px;
    color: #50575e;
    align-self: center;
}

/* Error message */
.exelearning-error {
    padding: 15px;
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    color: #721c24;
}

.exelearning-download__item--disabled,
.exelearning-download__primary.exelearning-download__item--disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

/* Busy spinner — replaces the previous "Preparing download…" inline text.
   When the orchestrator JS is generating an export it sets data-busy="1" on
   the container; we overlay a small spinner over the primary action and
   dim it. Cleared automatically as soon as JS removes the attribute. */
.exelearning-download[data-busy="1"] {
    opacity: 1;
    pointer-events: none;
}
.exelearning-download[data-busy="1"] .exelearning-download__primary {
    position: relative;
}
.exelearning-download[data-busy="1"] .exelearning-download__primary > * {
    visibility: hidden;
}
.exelearning-download[data-busy="1"] .exelearning-download__primary::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    opacity: 0.85;
    animation: exelearning-spin 0.7s linear infinite;
    visibility: visible;
}
@keyframes exelearning-spin {
    to { transform: rotate(360deg); }
}

/* -------------------------------------------------------------------------
   Shortcode viewer ([exelearning] embed / screenshot)

   The toolbar hosts the title plus icon-only action controls. The Download
   control is an <a> and the Fullscreen control is a <button>; both share the
   .exelearning-toolbar-btn class so they render as identical square icon
   buttons regardless of the surrounding theme.
   ------------------------------------------------------------------------- */
.exelearning-shortcode {
    margin: 1.5em 0;
}

.exelearning-preview,
.exelearning-screenshot {
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    overflow: hidden;
}

.exelearning-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    box-sizing: border-box;
    padding: 6px 10px;
    background: #f6f7f7;
    border-bottom: 1px solid #dee2e6;
}

.exelearning-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #1d2327;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
}

.exelearning-toolbar-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
}

/* Shared icon-button base for the Download <a> and Fullscreen <button> so the
   two controls are visually equivalent (same box, padding and alignment). */
.exelearning-toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    margin: 0;
    padding: 0;
    color: #1d2327;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

.exelearning-toolbar-btn:hover,
.exelearning-toolbar-btn:focus {
    background: rgba(0, 0, 0, 0.06);
    color: #135e96;
}

/* Never remove the visible focus indicator (accessibility). */
.exelearning-toolbar-btn:focus-visible {
    outline: 2px solid #135e96;
    outline-offset: 1px;
}

.exelearning-toolbar-btn .dashicons {
    width: 1.25rem;
    height: 1.25rem;
    font-size: 1.25rem;
    line-height: 1;
}

.exelearning-iframe {
    display: block;
    width: 100%;
    max-width: 100%;
}

/* Loading state for the embedded package.
   The package is fetched, parsed and laid out inside the iframe before anything
   paints, so without this the visitor stares at an empty frame. The spinner is
   hidden unless the enqueued loader adds `is-loading`, so with JS disabled
   nothing is shown that JS would never be able to clear. */
.exelearning-embed-loader {
    position: relative;
}

.exelearning-embed-loader__spinner {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #50575e;
    font-size: 0.875rem;
}

/* Only the visibility depends on the state. */
.exelearning-embed-loader.is-loading .exelearning-embed-loader__spinner {
    display: flex;
}

.exelearning-embed-loader__spinner::before {
    content: "";
    width: 1.25em;
    height: 1.25em;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: exelearning-embed-spin 0.8s linear infinite;
}

@keyframes exelearning-embed-spin {
    to {
        transform: rotate(360deg);
    }
}

/* A slower spin is still a spin. Someone who asked for reduced motion gets none: the
   ring stays as a static shape, and the "Loading content…" text with role="status"
   carries the message on its own. */
@media (prefers-reduced-motion: reduce) {
    .exelearning-embed-loader__spinner::before {
        animation: none;
    }
}

.exelearning-screenshot-img {
    display: block;
    width: 100%;
    height: auto;
}

/* Click-to-load poster (screenshot="poster"). */
.exelearning-poster {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    background: #000;
    border: 0;
    cursor: pointer;
    overflow: hidden;
}

.exelearning-poster-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.exelearning-poster-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3rem;
    height: 3rem;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 3rem;
    line-height: 1;
    opacity: 0.9;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* Narrow viewports: keep the title from crushing the actions and let the
   action group wrap under the title instead of overflowing. */
@media (max-width: 480px) {
    .exelearning-toolbar {
        flex-wrap: wrap;
    }
}