/**
 * mod_contact_form_pro - popup dialog
 *
 * @author      Fakas Agamemnon <info@easylogic.gr>
 * @copyright   (C) 2026 Easylogic CO LP
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 *
 * Built on the native <dialog> element: focus trap, Esc-to-close, click-outside
 * (closedby="any"), inert background and ::backdrop come for free. The open/close
 * animation is pure CSS (@starting-style + allow-discrete) and is chosen by an
 * .mcf-anim-* class. The hidden position is a single custom property
 * (--mcf-hidden-transform), so each animation variant is one line and your own
 * Custom CSS can override it by redefining that property.
 *
 * Everything modern here degrades on its own except the closed state of an
 * unsupported <dialog>; that is handled by the .mcf-no-dialog block at the
 * bottom, driven by media/js/dialog.js. Custom properties are paired with a
 * static declaration first so browsers without var() still get the defaults.
 */

/* The trigger is a <button> (required by the Invoker Commands API); strip its
   native chrome so it renders exactly as the admin's editor content. */
.mcf-trigger {
    display: inline-block;
    padding: 0;
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

.mcf-dialog {
    --mcf-hidden-transform: translateY(10px) scale(.98);
    --mcf-anim-duration: .22s;
    --mcf-max-width: 560px;
    --mcf-backdrop: rgba(0, 0, 0, .5);
    width: calc(100% - 2rem);
    max-width: 560px;
    max-width: var(--mcf-max-width);
    padding: 0;
    border: 0;
    border-radius: 10px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, .22);
    opacity: 0;
    transform: translateY(10px) scale(.98);
    transform: var(--mcf-hidden-transform);
    /* First declaration is what pre-2024 browsers keep: one invalid entry in a
       transition list drops the whole declaration, and overlay/allow-discrete
       are exactly that. Modern browsers take the second and animate the
       top-layer exit as well. */
    transition:
        opacity var(--mcf-anim-duration) ease,
        transform var(--mcf-anim-duration) ease;
    transition:
        opacity var(--mcf-anim-duration) ease,
        transform var(--mcf-anim-duration) ease,
        overlay var(--mcf-anim-duration) ease allow-discrete,
        display var(--mcf-anim-duration) ease allow-discrete;
}

.mcf-dialog[open] {
    opacity: 1;
    transform: none;
}

@starting-style {
    .mcf-dialog[open] {
        opacity: 0;
        transform: var(--mcf-hidden-transform);
    }
}

/* Animation variants: each just sets where the dialog starts from. */
.mcf-anim-fade       { --mcf-hidden-transform: none; }
.mcf-anim-zoom       { --mcf-hidden-transform: scale(.9); }
.mcf-anim-slide-up   { --mcf-hidden-transform: translateY(28px); }
.mcf-anim-slide-down { --mcf-hidden-transform: translateY(-28px); }

/* No animation: appear instantly. */
.mcf-anim-none {
    --mcf-hidden-transform: none;
    transition: none;
}

.mcf-dialog::backdrop {
    background: rgba(0, 0, 0, 0);
    transition: background var(--mcf-anim-duration) ease;
    transition:
        background var(--mcf-anim-duration) ease,
        overlay var(--mcf-anim-duration) ease allow-discrete,
        display var(--mcf-anim-duration) ease allow-discrete;
}

.mcf-dialog[open]::backdrop {
    background: rgba(0, 0, 0, .5);
    background: var(--mcf-backdrop);
}

.mcf-dialog__inner {
    position: relative;
    padding: 1.75rem;
}

.mcf-dialog__close {
    position: absolute;
    top: .4rem;
    right: .6rem;
    padding: .25rem;
    font-size: 1.6rem;
    line-height: 1;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
    opacity: .6;
}

.mcf-dialog__close:hover,
.mcf-dialog__close:focus {
    opacity: 1;
}

/* Lock background scroll while a dialog is open. The :has() rule is the no-JS
   path on modern browsers; the body class is set by dialog.js everywhere else. */
body:has(.mcf-dialog[open]) {
    overflow: hidden;
}

body.mcf-scroll-lock {
    overflow: hidden;
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .mcf-dialog,
    .mcf-dialog::backdrop {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   Fallback: browsers with no <dialog> (Safari/iOS < 15.4, Firefox < 98, IE).
   There the element has no UA styles at all, so the closed popup would render
   as a visible block in the page flow. dialog.js stamps .mcf-no-dialog on
   <html> and toggles .is-open; the dialog element becomes the backdrop and
   .mcf-dialog__inner becomes the panel. No ::backdrop, no top layer, no
   animation - just a working modal.
   -------------------------------------------------------------------------- */
.mcf-no-dialog .mcf-dialog {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    width: auto;
    max-width: none;
    height: auto;
    padding: 1rem;
    margin: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background: rgba(0, 0, 0, .5);
    background: var(--mcf-backdrop, rgba(0, 0, 0, .5));
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    transform: none;
    transition: none;
}

.mcf-no-dialog .mcf-dialog.is-open {
    display: block;
}

.mcf-no-dialog .mcf-dialog__inner {
    max-width: 560px;
    max-width: var(--mcf-max-width, 560px);
    margin: 2rem auto;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, .22);
}

/* IE and old Android do not style [hidden] or unknown elements; make sure a
   dialog we never opened stays out of the flow even before the script runs. */
.mcf-no-dialog .mcf-dialog:not(.is-open) {
    display: none;
}