/* Basic modal styles - you can customize or override in your theme */
.ec-modal{display:none;position:fixed;inset:0;z-index:9999;align-items:center;justify-content:center}
.ec-modal.is-open{display:flex}
.ec-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.5);backdrop-filter: blur(0.0);}
.ec-modal__dialog{position:relative;z-index:2;max-width:900px;width:clamp(280px,80%,900px);margin:1.5rem;border-radius:12px;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,0.25);overflow:auto;max-height:90vh}
.ec-modal__content{padding:1.25rem}
.ec-modal__close{position:absolute;top:0.5rem;right:0.5rem;border:0;background:transparent;font-size:1.25rem;padding:0.25rem;cursor:pointer}
/* Center the icon/text inside the close button. Use inline-flex centering
   so changing font-size won't anchor the glyph to the text baseline. We
   still use a few !important rules to defeat any Elementor-generated
   per-widget CSS when necessary, but keep them minimal. */
.ec-modal__close{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important; /* make width/height include padding */
    line-height: 1 !important; /* avoid vertical shift from line-height */
    padding: 0 !important; /* widget will set size/padding as needed */
    text-align: center !important;
    vertical-align: middle !important;
}

/* Ensure direct children behave as boxes and are centered by flex. Keep
   width/height auto so icon font-size controls the glyph size. */
.ec-modal__close > * {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    vertical-align: middle !important;
}

/* SVG / <i> helpers: allow the icon glyph to size by font-size and not
   stretch to 100% height which made it appear pinned to the top. */
.ec-modal__close svg, .ec-modal__close i {
    width: auto !important;
    height: auto !important;
    display: block !important;
    line-height: 1 !important;
    font-size: inherit !important;
}

/* Reset transforms / baseline shifts applied elsewhere so centering works
   regardless of where the rule originates. */
.ec-modal__close, .ec-modal__close * , .ec-modal__close::before, .ec-modal__close::after {
    transform: none !important;
    vertical-align: middle !important;
}

/* Make pseudo-elements render as inline-block so content injected via
   CSS follows the same centering rules as child elements. */
.ec-modal__close::before, .ec-modal__close::after {
    display: inline-block !important;
    content: inherit;
    margin: 0 !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}

/* Dedicated icon wrapper: use inline-flex so it's centered and scales
   predictably when you change font-size on the button or the icon. */
.ec-modal__close-icon{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
    height: 100%;
    box-sizing: border-box !important;
    text-align: center !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    font-size: inherit !important;
}
.ec-modal__close .ec-modal__close-icon{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
}
.ec-sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Animation helpers using CSS variables. Per-instance variables are set on the modal element
by the widget render() so enter/exit durations can differ. */
.ec-modal{
/* defaults (ms) */
--ec-anim-duration-in: 220ms;
--ec-anim-duration-out: 220ms;
--ec-anim-timing: ease;
--ec-backdrop-duration-in: 220ms;
--ec-backdrop-duration-out: 220ms;
}

/* Use the active state to switch which duration variable is used */
.ec-modal{
--ec-anim-duration: var(--ec-anim-duration-out);
--ec-backdrop-duration: var(--ec-backdrop-duration-out);
}
.ec-modal.is-open{
--ec-anim-duration: var(--ec-anim-duration-in);
--ec-backdrop-duration: var(--ec-backdrop-duration-in);
}

/* Dialog transition: opacity + transform where applicable */
.ec-modal__dialog{
opacity: 0;
transform: none;
transition-property: opacity, transform;
transition-duration: var(--ec-anim-duration);
transition-timing-function: var(--ec-anim-timing);
}
.ec-modal.is-open .ec-modal__dialog{
opacity: 1;
transform: none;
}

/* Entry/exit variants */
.ec-modal[data-ec-anim="fade"] .ec-modal__dialog{ transform: none; }
.ec-modal[data-ec-anim="slide-up"] .ec-modal__dialog{ transform: translateY(12px); }
.ec-modal[data-ec-anim="slide-down"] .ec-modal__dialog{ transform: translateY(-12px); }
.ec-modal[data-ec-anim="scale"] .ec-modal__dialog{ transform: scale(0.98); }
.ec-modal.is-open[data-ec-anim="slide-up"] .ec-modal__dialog{ transform: translateY(0); }
.ec-modal.is-open[data-ec-anim="slide-down"] .ec-modal__dialog{ transform: translateY(0); }
.ec-modal.is-open[data-ec-anim="scale"] .ec-modal__dialog{ transform: scale(1); }

/* Backdrop transition */
.ec-modal__backdrop{
opacity: 0;
transition: opacity var(--ec-backdrop-duration) var(--ec-anim-timing);
}
.ec-modal.is-open .ec-modal__backdrop{ opacity: 1; }




/*  ========================================================================
        |    
        Compatibility shim for Elementor Modal Widget
        This file exists to prevent 404 errors when older plugin versions
        attempt to load ec-modal.css. Keep this file minimal and safe to load.

    ========================================================================
*/