/* Page Designer — Modal Block | Namespace: pd-blk-modal-*
 * v1.1.2 (last touched in PAGE_DESIGNER_VERSION 2.9.288)
 *
 * Runtime styles for the Modal Popup block — loaded into both the
 * editor canvas and published pages via the block-CSS loop.
 * CSS custom properties on the root [data-pd-block="modal-trigger"]
 * cascade to child elements. Data attributes drive size, position,
 * and animation variants.
 *
 * v1.1.1 — added canvas-only auto-trigger marker so the block stays
 *          visible / selectable in the editor when its trigger is
 *          page-load / scroll / exit-intent / delay. Scoped via
 *          [data-gjs-type="pd-modal"] which GrapesJS strips at save
 *          time, so the rule never applies on the published page.
 */

/* ── Trigger button ──────────────────────────────────────────── */
.pd-blk-modal-trigger-btn {
    padding: 12px 24px;
    /* v3.7.27 — obey Global Theme > Buttons by default (bg / text / font /
       size), mirroring the real Button block. A per-instance panel override
       (--pd-blk-modal-trigger-*) still wins when set; otherwise the global
       --pd-btn-* token flows through. No more hardcoded #667eea / #fff. */
    background: var(--pd-blk-modal-trigger-bg, var(--pd-btn-bg, #667eea));
    color: var(--pd-blk-modal-trigger-color, var(--pd-btn-color, #fff));
    border: none;
    border-radius: 6px;
    font-size: var(--pd-blk-modal-trigger-size, var(--pd-btn-size, 14px));
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, opacity 0.2s;
    font-family: var(--pd-btn-font, inherit);
}
/* v3.7.27 — hover follows Global Buttons Hover colours; the trailing opacity
   dim still gives feedback when a custom per-instance bg is set (then the
   hover-bg token resolves to that same custom colour, so bg won't change). */
.pd-blk-modal-trigger-btn:hover {
    background: var(--pd-blk-modal-trigger-bg, var(--pd-btn-hover-bg, #667eea));
    color: var(--pd-blk-modal-trigger-color, var(--pd-btn-hover-color, var(--pd-btn-color, #fff)));
    opacity: 0.92;
}

/* ── Overlay ─────────────────────────────────────────────────── */
.pd-blk-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* v3.7.21 — overlay scrim, no admin token */
    z-index: 9998;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(var(--pd-blk-modal-overlay-blur, 0px));
    -webkit-backdrop-filter: blur(var(--pd-blk-modal-overlay-blur, 0px));
    /* Always-fade base — runs on every open + close regardless of
       which entry animation the dialog uses. Prevents the abrupt
       backdrop snap that slide / scale / bounce close transitions
       used to show. */
    opacity: 0;
    transition: opacity var(--pd-blk-modal-anim-dur, 0.3s) ease;
}
.pd-blk-modal-overlay.pd-mdl-rt-open {
    opacity: 1;
}

/* ── Dialog box ──────────────────────────────────────────────── */
.pd-blk-modal-dialog {
    background: var(--pd-color-bg, #ffffff); /* v3.7.21 — opaque dialog = page background, no admin token */
    border-radius: 12px;
    padding: 32px;
    max-width: var(--pd-blk-modal-dialog-maxw, 500px);
    width: 90%;
    position: relative;
    box-sizing: border-box;
}

/* ── Size presets (via data attribute on root) ────────────────── */
[data-pd-modal-size="small"]  .pd-blk-modal-dialog { max-width: 500px; }
[data-pd-modal-size="medium"] .pd-blk-modal-dialog { max-width: 900px; }
[data-pd-modal-size="full"]   .pd-blk-modal-dialog { max-width: 96vw; width: 96vw; }
[data-pd-modal-size="custom"] .pd-blk-modal-dialog {
    max-width: var(--pd-blk-modal-dialog-maxw, 500px);
}

/* ── Position presets ────────────────────────────────────────── */
[data-pd-modal-pos="center"] .pd-blk-modal-overlay {
    align-items: center;
    justify-content: center;
}
[data-pd-modal-pos="top"] .pd-blk-modal-overlay {
    align-items: flex-start;
    justify-content: center;
    padding-top: 5vh;
}
[data-pd-modal-pos="bottom"] .pd-blk-modal-overlay {
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 5vh;
}
[data-pd-modal-pos="drawer-left"] .pd-blk-modal-overlay {
    align-items: stretch;
    justify-content: flex-start;
}
[data-pd-modal-pos="drawer-left"] .pd-blk-modal-dialog {
    border-radius: 0;
    height: 100%;
    width: 100%;
    min-width: 280px;
    /* max-width controlled by Size preset (S=500, M=900, L=96vw, custom=var) */
}
[data-pd-modal-pos="drawer-right"] .pd-blk-modal-overlay {
    align-items: stretch;
    justify-content: flex-end;
}
[data-pd-modal-pos="drawer-right"] .pd-blk-modal-dialog {
    border-radius: 0;
    height: 100%;
    width: 100%;
    min-width: 280px;
    /* max-width controlled by Size preset */
}
[data-pd-modal-pos="bottom-sheet"] .pd-blk-modal-overlay {
    align-items: flex-end;
    justify-content: center;
}
[data-pd-modal-pos="bottom-sheet"] .pd-blk-modal-dialog {
    border-radius: 16px 16px 0 0;
    width: 100%;
    padding-bottom: 40px;
    /* max-width controlled by Size preset */
}

/* ── Close button ────────────────────────────────────────────── */
.pd-blk-modal-close-btn {
    position: absolute;
    top: 12px; right: 16px;
    background: none;
    border: none;
    font-size: var(--pd-blk-modal-close-size, 22px);
    cursor: pointer;
    color: inherit; /* v3.7.21 — close button follows General Text on the dialog */
    line-height: 1;
    padding: 4px;
    transition: opacity 0.15s;
}
.pd-blk-modal-close-btn:hover { opacity: 0.7; }
[data-pd-modal-show-close="0"] .pd-blk-modal-close-btn { display: none; }

/* ── Trigger-button size (Click trigger only) ─────────────────
   Three size presets matching the Button block convention. Default
   medium = the existing 12px 24px / 14px font baseline. */
.pd-blk-modal[data-pd-modal-btn-size="sm"] .pd-blk-modal-trigger-btn {
    padding: 8px 16px;
    font-size: 12px;
}
.pd-blk-modal[data-pd-modal-btn-size="md"] .pd-blk-modal-trigger-btn {
    padding: 12px 24px;
    /* v3.7.27 — the default (untouched) size follows Global Buttons > Font
       Size; sm/lg below stay explicit per-instance overrides. */
    font-size: var(--pd-btn-size, 14px);
}
.pd-blk-modal[data-pd-modal-btn-size="lg"] .pd-blk-modal-trigger-btn {
    padding: 16px 32px;
    font-size: 16px;
}

/* ── Trigger-button alignment (Click trigger only) ────────────
   Aligns the trigger button within the modal root. Only meaningful
   when trigger=click (the button is hidden for auto triggers via the
   rule below). Applied to the root via text-align so the inline-block
   button shifts; "full" stretches the button to fill the row. */
.pd-blk-modal[data-pd-modal-btn-align="left"]   { text-align: left; }
.pd-blk-modal[data-pd-modal-btn-align="center"] { text-align: center; }
.pd-blk-modal[data-pd-modal-btn-align="right"]  { text-align: right; }
.pd-blk-modal[data-pd-modal-btn-align="full"]   .pd-blk-modal-trigger-btn {
    display: block;
    width: 100%;
}

/* ── Hide trigger for non-click triggers ─────────────────────── */
[data-pd-modal-trigger="page-load"]   > .pd-blk-modal-trigger-btn,
[data-pd-modal-trigger="scroll"]      > .pd-blk-modal-trigger-btn,
[data-pd-modal-trigger="exit-intent"] > .pd-blk-modal-trigger-btn,
[data-pd-modal-trigger="delay"]       > .pd-blk-modal-trigger-btn {
    display: none;
}

/* ── Zero the root chrome on non-click triggers ───────────────
   The trigger button is hidden and the overlay is position:fixed,
   so the root .pd-blk-modal serves no layout purpose on the
   published page. Without this, any Design panel border / padding /
   background applied to the modal block leaves a visible "ghost
   strip" where the empty root sits in the page flow. The popup
   itself (overlay + dialog) is unaffected — it escapes via fixed
   positioning when triggered.

   `!important` is required here as a defensive override: the Design
   panel's `addStyle()` writes via GrapesJS's default `#<gjs-id>`
   selector (specificity 1,0,0). No class/attribute combination can
   beat ID specificity, so this is the only way to neutralise dead-
   weight chrome on a hidden modal root. Scoped tightly — only fires
   when trigger is non-click. */
.pd-blk-modal[data-pd-modal-trigger="page-load"],
.pd-blk-modal[data-pd-modal-trigger="scroll"],
.pd-blk-modal[data-pd-modal-trigger="exit-intent"],
.pd-blk-modal[data-pd-modal-trigger="delay"] {
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    height: 0 !important;
    min-height: 0 !important;
    box-shadow: none !important;
}

/* ── Animations ──────────────────────────────────────────────── */
/* Triggered by the runtime adding `.pd-mdl-rt-open` to the overlay
   in a frame AFTER display:flex is applied — required so transitions
   actually run (transitions don't fire across a display:none boundary). */

/* Fade — base overlay rule already handles overlay opacity transition;
   no dialog-specific motion beyond that. */

/* Slide up */
[data-pd-modal-anim="slide-up"] .pd-blk-modal-dialog {
    transform: translateY(40px);
    opacity: 0;
    transition: transform var(--pd-blk-modal-anim-dur, 0.3s) ease,
                opacity var(--pd-blk-modal-anim-dur, 0.3s) ease;
}
[data-pd-modal-anim="slide-up"] .pd-blk-modal-overlay.pd-mdl-rt-open .pd-blk-modal-dialog {
    transform: translateY(0);
    opacity: 1;
}

/* Slide down */
[data-pd-modal-anim="slide-down"] .pd-blk-modal-dialog {
    transform: translateY(-40px);
    opacity: 0;
    transition: transform var(--pd-blk-modal-anim-dur, 0.3s) ease,
                opacity var(--pd-blk-modal-anim-dur, 0.3s) ease;
}
[data-pd-modal-anim="slide-down"] .pd-blk-modal-overlay.pd-mdl-rt-open .pd-blk-modal-dialog {
    transform: translateY(0);
    opacity: 1;
}

/* Scale */
[data-pd-modal-anim="scale"] .pd-blk-modal-dialog {
    transform: scale(0.85);
    opacity: 0;
    transition: transform var(--pd-blk-modal-anim-dur, 0.3s) ease,
                opacity var(--pd-blk-modal-anim-dur, 0.3s) ease;
}
[data-pd-modal-anim="scale"] .pd-blk-modal-overlay.pd-mdl-rt-open .pd-blk-modal-dialog {
    transform: scale(1);
    opacity: 1;
}

/* Bounce */
@keyframes pd-blk-modal-bounce-in {
    0%   { transform: scale(0.3);  opacity: 0; }
    50%  { transform: scale(1.05); opacity: 1; }
    70%  { transform: scale(0.95); }
    100% { transform: scale(1); }
}
[data-pd-modal-anim="bounce"] .pd-blk-modal-overlay.pd-mdl-rt-open .pd-blk-modal-dialog {
    animation: pd-blk-modal-bounce-in var(--pd-blk-modal-anim-dur, 0.5s) ease forwards;
}

/* ── Accessibility — focus-visible ring ──────────────────────── */
.pd-blk-modal-close-btn:focus-visible,
.pd-blk-modal-trigger-btn:focus-visible {
    outline: 2px solid var(--pd-link-color, #667eea); /* v3.7.27 — focus ring follows Global accent, no hardcoded colour */
    outline-offset: 2px;
}

/* ── Drawer / bottom-sheet positions — let cells wrap ─────────
   The dialog is width-constrained in drawer-left/right (400px) and
   bottom-sheet modes. Default `flex-wrap: nowrap` on .gjs-row would
   make cells overflow out of the dialog when more than one fits side-
   by-side. Wrapping keeps them inside the dialog by stacking. Scoped
   to these modal positions only — main canvas + center/top/bottom
   modal positions are untouched. */
[data-pd-modal-pos="drawer-left"]  .gjs-row,
[data-pd-modal-pos="drawer-right"] .gjs-row,
[data-pd-modal-pos="bottom-sheet"] .gjs-row {
    flex-wrap: wrap;
}

/* ── Responsive — mobile ─────────────────────────────────────── */
@media (max-width: 600px) {
    .pd-blk-modal-dialog {
        width: 95%;
        padding: 24px 20px;
        max-width: 95vw;
    }
    [data-pd-modal-pos="drawer-left"] .pd-blk-modal-dialog,
    [data-pd-modal-pos="drawer-right"] .pd-blk-modal-dialog {
        min-width: 85vw;
    }
}

/* ────────────────────────────────────────────────────────────────
   Editor canvas — auto-trigger marker
   ────────────────────────────────────────────────────────────────
   The hide rule above (line ~157) makes the trigger button invisible
   on the published page when the trigger is non-click — correct, the
   modal auto-opens. But in the editor canvas the author still needs
   a visible marker so the block can be seen, selected, and edited.

   Scoped via `[data-gjs-type="pd-modal"]` on the modal root, which
   is GrapesJS-only — getHtml() strips data-gjs-* attributes at save
   time, so this rule never matches on the published page. */
[data-gjs-type="pd-modal"][data-pd-modal-trigger="page-load"],
[data-gjs-type="pd-modal"][data-pd-modal-trigger="scroll"],
[data-gjs-type="pd-modal"][data-pd-modal-trigger="exit-intent"],
[data-gjs-type="pd-modal"][data-pd-modal-trigger="delay"] {
    position: relative;
}

[data-gjs-type="pd-modal"][data-pd-modal-trigger="page-load"]   > .pd-blk-modal-trigger-btn,
[data-gjs-type="pd-modal"][data-pd-modal-trigger="scroll"]      > .pd-blk-modal-trigger-btn,
[data-gjs-type="pd-modal"][data-pd-modal-trigger="exit-intent"] > .pd-blk-modal-trigger-btn,
[data-gjs-type="pd-modal"][data-pd-modal-trigger="delay"]       > .pd-blk-modal-trigger-btn {
    display: inline-block;
    opacity: 0.7;
    outline: 2px dashed #667eea;
    outline-offset: 2px;
}

/* ── Canvas-only — selection ergonomics ──────────────────────
   Without padding/margin the modal root collapses to the size of
   its inner trigger button (or to height 0 on non-click triggers),
   making it hard to click without hitting the parent column. This
   adds a small selectable ring so the user can target either the
   modal block (inner) or the column (outer). Scoped via
   [data-gjs-type="pd-modal"] (GrapesJS strips it at save → never
   reaches the published page).
   Selector chained with `.pd-blk-modal` to give specificity (0,2,1)
   matching the non-click clear rule above — source order then wins
   for us. !important required because the clear rule also uses it. */
[data-gjs-type="pd-modal"].pd-blk-modal {
    padding: 6px !important;
    margin: 4px !important;
    height: auto !important;
    min-height: auto !important;
}

/* Absolute-positioned overlay label — sits below the button visually
   but contributes zero height to the parent column. */
[data-gjs-type="pd-modal"][data-pd-modal-trigger="page-load"]::after,
[data-gjs-type="pd-modal"][data-pd-modal-trigger="scroll"]::after,
[data-gjs-type="pd-modal"][data-pd-modal-trigger="exit-intent"]::after,
[data-gjs-type="pd-modal"][data-pd-modal-trigger="delay"]::after {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    padding: 3px 8px;
    background: rgba(102, 126, 234, 0.95);
    border: 1px solid rgba(102, 126, 234, 1);
    border-radius: 4px;
    color: #fff; /* v3.7.21 — label text on the coloured pill, no admin token */
    font-size: 10px;
    font-style: italic;
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    line-height: 1.4;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
    /* Hover-only — invisible until the user hovers the modal block.
       Zero layout impact at all times (position: absolute), and zero
       visual noise unless the author is investigating the block. */
    opacity: 0;
    transition: opacity 0.12s ease;
}
[data-gjs-type="pd-modal"][data-pd-modal-trigger="page-load"]:hover::after,
[data-gjs-type="pd-modal"][data-pd-modal-trigger="scroll"]:hover::after,
[data-gjs-type="pd-modal"][data-pd-modal-trigger="exit-intent"]:hover::after,
[data-gjs-type="pd-modal"][data-pd-modal-trigger="delay"]:hover::after {
    opacity: 1;
}

[data-gjs-type="pd-modal"][data-pd-modal-trigger="page-load"]::after   { content: 'auto-opens on Page Load'; }
[data-gjs-type="pd-modal"][data-pd-modal-trigger="scroll"]::after      { content: 'auto-opens on Scroll'; }
[data-gjs-type="pd-modal"][data-pd-modal-trigger="exit-intent"]::after { content: 'auto-opens on Exit Intent'; }
[data-gjs-type="pd-modal"][data-pd-modal-trigger="delay"]::after       { content: 'auto-opens after Delay'; }