/* GD Gift Pricing Engine — Visual Designer modal shell + Customize button (v1.6.0).
   Tiny, loaded on designer-enabled GD product pages. The engine's own styles live in core/. */

/* v1.9.8 — sits inline between the quantity box and Add to Quotation (one row). vertical-align keeps it level with
   the quantity input; the small side margin spaces it from both neighbours. */
.gdgpe-vd-open { margin: 0 8px; vertical-align: middle; }
.gdgpe-vd-open[disabled] { opacity: .5; cursor: not-allowed; }
.gdgpe-vd-open.gdgpe-vd-ready { }
/* v1.9.24 — sit INSIDE Blocksy's .ct-cart-actions flex row, BETWEEN the qty box (order:1) and the Add to Quotation
   button (order:2). Ours is also order:2 but earlier in the DOM, so the tie-break lands it before the Add button.
   flex/width pinned so the theme can't stretch it to a full-width second row. The container's gap spaces it. */
.ct-cart-actions .gdgpe-vd-open { order: 2 !important; flex: 0 0 auto !important; width: auto !important; margin: 0 !important; }
/* small phones: three-in-a-row is too cramped — let it wrap to its own full-width row under qty + Add */
@media (max-width: 640px) {
    .ct-cart-actions .gdgpe-vd-open { order: 3 !important; flex: 1 1 100% !important; }
}

.gdgpe-vd-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 99999;
}
.gdgpe-vd-overlay[hidden] { display: none; }

.gdgpe-vd-modal {
    position: relative;
    width: 100%;
    max-width: 1060px;
    max-height: 94vh;
    overflow: auto;
    scrollbar-gutter: stable;
    background: #fff;
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}
.gdgpe-vd-close {
    position: absolute;
    top: 10px;
    right: 14px;
    border: 0;
    background: transparent;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    color: #98a2b3;
    z-index: 1;
}
.gdgpe-vd-close:hover { color: #344054; }

.gdgpe-vd-head { font-size: 17px; font-weight: 600; color: #111827; margin-bottom: 14px; }
.gdgpe-vd-body { min-height: 120px; }
.gdgpe-vd-soon { color: #6b7280; font-size: 14px; margin: 0; text-align: center; padding: 30px 0; }

@media (max-width: 560px) {
    .gdgpe-vd-overlay { padding: 8px; }
    .gdgpe-vd-modal { padding: 16px; border-radius: 12px; }
}

/* v1.9.55 — PHONE (touch + narrow): the designer takes the WHOLE screen; the engine core renders its own
   mobile chrome (.pd-m). Same breakpoint as the engine's own matchMedia detection. */
@media (max-width: 820px) and (pointer: coarse) {
    .gdgpe-vd-overlay { padding: 0; }
    .gdgpe-vd-modal { max-width: none; width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; padding: 0; overflow: hidden; }
    .gdgpe-vd-head { display: none; }
    .gdgpe-vd-body { height: 100%; min-height: 0; }
    #gdgpe-vd-root { height: 100%; }
    /* the close ✕ docks into the engine's top bar (it reserves 52px right padding) */
    .gdgpe-vd-close { top: 4px; right: 4px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 28px; }
}