/**
 * Demo Popup — Report button toolbar + report form styles.
 *
 * The Report button sits in a toolbar row above the demo player, flush
 * right. Clicking it opens a bum_modal() lightbox that shows the form.
 * Because the form's <dialog> renders in the browser's top layer on
 * top of the demo popup (itself a dimmed overlay), we get the "double
 * dark layer" separation for free — we just bump the dialog::backdrop
 * opacity so the second dim is visible against the first.
 */

/* ---------- Player column wrapper ----------
 *
 * .demo-popup__main is a flex column on mobile and a flex row on
 * desktop (>=1024px) with player | info side-by-side. To stack the
 * Report toolbar above the player without splitting that row into
 * three slots, we wrap the toolbar + player in a flex column here
 * and let this wrapper take the slot the player used to occupy.
 */
.demo-popup__player-column {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
}

@media (min-width: 1024px) {
    .demo-popup__player-column {
        flex: 1;
        max-width: 1024px;
    }
}

/* ---------- Toolbar row above the player ---------- */

.demo-popup__player-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 0 8px;
}

.demo-popup__report-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: transparent;
    border: 1px solid var(--popup-border, rgba(0, 0, 0, 0.15));
    border-radius: 6px;
    color: var(--popup-text-navy, #1a3365);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.demo-popup__report-btn:hover,
.demo-popup__report-btn:focus-visible {
    background: rgba(0, 0, 0, 0.04);
    color: var(--popup-text-dark, #0c1b39);
    border-color: rgba(0, 0, 0, 0.25);
    outline: none;
}

.demo-popup__report-btn svg {
    flex: none;
}

/* bum-modal-wrapper needs to sit inline within the toolbar without
 * adding layout. The <dialog> positions itself when opened. */
.demo-popup__player-toolbar .bum-modal-wrapper {
    display: inline-flex;
}

/* Fullscreen — flatten the new wrapper like the other ancestors and
 * hide the toolbar so only the player renders. Mirrors the existing
 * rules in modal.css for .demo-popup / __body / __main / __player. */
.demo-popup-modal--fullscreen .demo-popup__player-column {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    padding: 0;
    margin: 0;
    gap: 0;
    aspect-ratio: auto;
    background: #000;
}

.demo-popup-modal--fullscreen .demo-popup__player-toolbar {
    display: none;
}

/* ---------- Second backdrop tone (modal-over-modal) ---------- */

/* When the report dialog opens on top of the demo popup, its ::backdrop
 * renders above the demo popup's own backdrop. Darken it a touch so the
 * separation reads clearly — users should feel they're in a second,
 * narrower context. */
dialog.bum-modal[open]::backdrop {
    background: rgba(0, 0, 0, 0.55);
}

/* ---------- Report form body ---------- */

.demo-report-form {
    font-size: 14px;
    color: #1a1a1a;
}

.demo-report-form__intro {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.4;
    color: #444;
}

.demo-report-form__form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* `display: flex` above wins against the HTML `hidden` attribute, so
 * toggling form.hidden = true in JS wouldn't actually hide the form
 * post-submit. Explicit override. Same story for inline-level elements
 * like the button-text / button-loading spans that use hidden. */
.demo-report-form__form[hidden],
.demo-report-form__btn-text[hidden],
.demo-report-form__btn-loading[hidden] {
    display: none !important;
}

.demo-report-form__honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.demo-report-form__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.demo-report-form__label {
    font-size: 13px;
    font-weight: 600;
    color: #222;
}

.demo-report-form__label-optional {
    font-weight: 400;
    color: #888;
}

.demo-report-form__select,
.demo-report-form__textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    background: #fff;
    font: inherit;
    color: #1a1a1a;
    box-sizing: border-box;
}

.demo-report-form__select:focus,
.demo-report-form__textarea:focus {
    outline: none;
    border-color: #4b6fff;
    box-shadow: 0 0 0 3px rgba(75, 111, 255, 0.15);
}

.demo-report-form__textarea {
    resize: vertical;
    min-height: 72px;
}

.demo-report-form__error {
    padding: 8px 10px;
    border-radius: 4px;
    background: #fdecec;
    color: #a51d1d;
    font-size: 13px;
}

.demo-report-form__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}

.demo-report-form__btn {
    padding: 9px 16px;
    border-radius: 6px;
    border: 1px solid transparent;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.demo-report-form__btn--secondary {
    background: #fff;
    border-color: #d0d5dd;
    color: #333;
}

.demo-report-form__btn--secondary:hover,
.demo-report-form__btn--secondary:focus-visible {
    background: #f5f6f8;
    outline: none;
}

.demo-report-form__btn--primary {
    background: #4b6fff;
    color: #fff;
}

.demo-report-form__btn--primary:hover,
.demo-report-form__btn--primary:focus-visible {
    background: #3857e0;
    outline: none;
}

.demo-report-form__btn:disabled {
    opacity: 0.6;
    cursor: progress;
}

.demo-report-form__success {
    text-align: center;
    padding: 12px 0 4px;
}

.demo-report-form__success-title {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
}

.demo-report-form__success-body {
    margin: 0 0 16px;
    color: #555;
    font-size: 14px;
}