/* 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'; }

/* ── The popup stands out from the page (owner, 14 Oct 2026) ───────
   The dialog wears the page background, so on a light page it blended into
   the page behind it. A thin line from the theme's General Text colour and a
   soft shadow mark its edge on any theme. A border set on the dialog in the
   Design panel (its own id rule) still wins. */
.pd-blk-modal-dialog {
    border: 1px solid color-mix(in srgb, var(--pd-general-color, currentColor) 22%, transparent);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

/* ── The words always stay inside the popup (owner, 14 Oct 2026) ───
   A drawer popup was exactly as tall as the space it opened in. Opened from
   a card that lifts on touch, that space is the card, so a few lines ran
   out of the bottom of the box. Every popup now grows to fit its words, and
   only once it reaches the height of the screen does it scroll inside its
   own box. Holds for any popup, on any page, whatever is written in it. */
.pd-blk-modal-dialog {
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
}
[data-pd-modal-pos="drawer-left"] .pd-blk-modal-dialog,
[data-pd-modal-pos="drawer-right"] .pd-blk-modal-dialog {
    height: auto;
    min-height: 100%;
    align-self: flex-start;   /* stretched, it could never grow past its space */
}