/*
|--------------------------------------------------------------------------
| REZVAI / PROPERTY BOOKING MANAGER — FRONT-END BUILDER RENDER CSS
|--------------------------------------------------------------------------
|
| Step 104
|
| This file contains only design-facing rules needed by Live Draft Preview and
| the Published Website.
|
| It intentionally excludes:
| - editor toolbars
| - Layers
| - Settings UI
| - Add controls
| - drag/drop feedback
| - selection outlines
| - wp-admin workspace layout
|
*/

/*
|--------------------------------------------------------------------------
| BASE
|--------------------------------------------------------------------------
*/

.orb-builder-live-preview-app,
.orb-builder-live-preview-app *,
.orb-builder-live-preview-app *::before,
.orb-builder-live-preview-app *::after {
    box-sizing:border-box;
}


/*
|--------------------------------------------------------------------------
| RESPONSIVE VISIBILITY
|--------------------------------------------------------------------------
*/

.orb-builder-live-preview-app[data-orb-preview-device="desktop"]
[data-orb-visible-desktop="0"],
.orb-builder-live-preview-app[data-orb-preview-device="tablet"]
[data-orb-visible-tablet="0"],
.orb-builder-live-preview-app[data-orb-preview-device="mobile"]
[data-orb-visible-mobile="0"] {
    display:none !important;
}


/*
|--------------------------------------------------------------------------
| RESPONSIVE CONTAINER SPACING
|--------------------------------------------------------------------------
|
| Section / Row / Column / Nested Row / Nested Column use CSS variables emitted
| by the shared PHP spacing helper.
|
*/

.orb-builder-live-preview-app[data-orb-preview-device="desktop"]
[data-orb-container-spacing="1"] {
    margin-top:var(--orb-desktop-margin-top) !important;
    margin-right:var(--orb-desktop-margin-right) !important;
    margin-bottom:var(--orb-desktop-margin-bottom) !important;
    margin-left:var(--orb-desktop-margin-left) !important;

    padding-top:var(--orb-desktop-padding-top) !important;
    padding-right:var(--orb-desktop-padding-right) !important;
    padding-bottom:var(--orb-desktop-padding-bottom) !important;
    padding-left:var(--orb-desktop-padding-left) !important;
}


.orb-builder-live-preview-app[data-orb-preview-device="tablet"]
[data-orb-container-spacing="1"] {
    margin-top:var(--orb-tablet-margin-top) !important;
    margin-right:var(--orb-tablet-margin-right) !important;
    margin-bottom:var(--orb-tablet-margin-bottom) !important;
    margin-left:var(--orb-tablet-margin-left) !important;

    padding-top:var(--orb-tablet-padding-top) !important;
    padding-right:var(--orb-tablet-padding-right) !important;
    padding-bottom:var(--orb-tablet-padding-bottom) !important;
    padding-left:var(--orb-tablet-padding-left) !important;
}


.orb-builder-live-preview-app[data-orb-preview-device="mobile"]
[data-orb-container-spacing="1"] {
    margin-top:var(--orb-mobile-margin-top) !important;
    margin-right:var(--orb-mobile-margin-right) !important;
    margin-bottom:var(--orb-mobile-margin-bottom) !important;
    margin-left:var(--orb-mobile-margin-left) !important;

    padding-top:var(--orb-mobile-padding-top) !important;
    padding-right:var(--orb-mobile-padding-right) !important;
    padding-bottom:var(--orb-mobile-padding-bottom) !important;
    padding-left:var(--orb-mobile-padding-left) !important;
}


/*
|--------------------------------------------------------------------------
| SECTION BACKGROUNDS
|--------------------------------------------------------------------------
*/

.orb-builder-live-preview-app
.orb-builder-canvas-section {
    position:relative;
    isolation:isolate;
}


.orb-builder-live-preview-app
.orb-builder-canvas-section::before,
.orb-builder-live-preview-app
.orb-builder-canvas-section::after {
    pointer-events:none;
}


.orb-builder-live-preview-app
.orb-builder-canvas-section[data-orb-background-type="image"]::before {
    content:"";

    position:absolute;
    inset:0;

    z-index:-2;

    border-radius:inherit;

    background-image:var(--orb-section-background-image);
    background-position:var(--orb-section-background-position, center center);
    background-size:var(--orb-section-background-size, cover);
    background-repeat:var(--orb-section-background-repeat, no-repeat);
}


.orb-builder-live-preview-app
.orb-builder-canvas-section:not([data-orb-background-type="none"])[data-orb-background-gradient="1"]::after {
    content:"";

    position:absolute;
    inset:0;

    z-index:-1;

    border-radius:inherit;

    background:
        linear-gradient(
            135deg,
            var(--orb-section-background-color, transparent),
            var(--orb-section-gradient-end, transparent)
        );
}


.orb-builder-live-preview-app
.orb-builder-section-background-video {
    position:absolute;
    inset:0;

    z-index:-2;

    width:100%;
    height:100%;

    object-fit:cover;

    pointer-events:none;
}


.orb-builder-live-preview-app
.orb-builder-canvas-section[data-orb-background-blur="1"][data-orb-background-type="image"]::before,
.orb-builder-live-preview-app
.orb-builder-canvas-section[data-orb-background-blur="1"]
.orb-builder-section-background-video {
    filter:blur(8px);
    transform:scale(1.035);
}


/*
|--------------------------------------------------------------------------
| SECTION CONTENT SAFE ZONE
|--------------------------------------------------------------------------
|
| Section background remains full bleed.
|
| Safe width modes only constrain max width. Responsive side spacing comes
| from the Section padding controls so Builder / Live Draft / Published agree.
| `rows_full_width=1` and legacy `section_width=full` remain edge-to-edge.
|
*/

.orb-builder-live-preview-app
.orb-builder-canvas-section[data-orb-section-width]
> :not(.orb-builder-section-background-video) {
    width:100%;
    max-width:var(--orb-section-content-max, none);

    margin-left:auto;
    margin-right:auto;
}


.orb-builder-live-preview-app
.orb-builder-canvas-section[data-orb-section-width]:not([data-orb-section-width="full"])
> :not(.orb-builder-section-background-video) {
    width:100% !important;
    max-width:var(--orb-section-content-max, 1200px) !important;

    margin-left:auto !important;
    margin-right:auto !important;
}


.orb-builder-live-preview-app
.orb-builder-canvas-section[data-orb-section-rows-full-width="1"]
> :not(.orb-builder-section-background-video),
.orb-builder-live-preview-app
.orb-builder-canvas-section[data-orb-section-width="full"]
> :not(.orb-builder-section-background-video) {
    width:100% !important;
    max-width:none !important;

    margin-left:0 !important;
    margin-right:0 !important;
}


/*
|--------------------------------------------------------------------------
| MEDIA SAFETY
|--------------------------------------------------------------------------
*/

.orb-builder-live-preview-app img,
.orb-builder-live-preview-app video {
    max-width:100%;
}


/*
|--------------------------------------------------------------------------
| REDUCED MOTION
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {

    .orb-builder-live-preview-app *,
    .orb-builder-live-preview-app *::before,
    .orb-builder-live-preview-app *::after {
        scroll-behavior:auto !important;
        transition-duration:.01ms !important;
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
    }
}


/*
|--------------------------------------------------------------------------
| STEP 106 — RESPONSIVE ROW LAYOUT CONTROLS
|--------------------------------------------------------------------------
|
| The public renderer consumes the same per-Row Tablet / Mobile attributes as
| the Builder Canvas.
|
*/


/* TABLET */

.orb-builder-live-preview-app[data-orb-preview-device="tablet"]
.orb-builder-live-row[data-orb-tablet-columns="stack"]
> .orb-builder-live-row-inner
> .orb-builder-live-column-list {
    flex-direction:column !important;
    flex-wrap:nowrap !important;
    align-items:stretch !important;
}


.orb-builder-live-preview-app[data-orb-preview-device="tablet"]
.orb-builder-live-row[data-orb-tablet-columns="stack"][data-orb-tablet-stack-order="reverse"]
> .orb-builder-live-row-inner
> .orb-builder-live-column-list {
    flex-direction:column-reverse !important;
}


.orb-builder-live-preview-app[data-orb-preview-device="tablet"]
.orb-builder-live-row[data-orb-tablet-columns="stack"]
> .orb-builder-live-row-inner
> .orb-builder-live-column-list
> .orb-builder-live-column {
    width:100% !important;
    max-width:100% !important;
    flex:0 0 auto !important;
    min-width:0 !important;
}


/* MOBILE */

.orb-builder-live-preview-app[data-orb-preview-device="mobile"]
.orb-builder-live-row[data-orb-mobile-columns="stack"]
> .orb-builder-live-row-inner
> .orb-builder-live-column-list {
    flex-direction:column !important;
    flex-wrap:nowrap !important;
    align-items:stretch !important;
}


.orb-builder-live-preview-app[data-orb-preview-device="mobile"]
.orb-builder-live-row[data-orb-mobile-columns="stack"][data-orb-mobile-stack-order="reverse"]
> .orb-builder-live-row-inner
> .orb-builder-live-column-list {
    flex-direction:column-reverse !important;
}


.orb-builder-live-preview-app[data-orb-preview-device="mobile"]
.orb-builder-live-row[data-orb-mobile-columns="stack"]
> .orb-builder-live-row-inner
> .orb-builder-live-column-list
> .orb-builder-live-column {
    width:100% !important;
    max-width:100% !important;
    flex:0 0 auto !important;
    min-width:0 !important;
}


/*
|--------------------------------------------------------------------------
| STEP 105 — EXTERNALIZED PUBLIC RENDERER CSS
|--------------------------------------------------------------------------
|
| These rules previously lived inline inside templates/builder-preview.php.
| They remain after the Step104 rules so cascade order is unchanged.
|
*/

/*
        |--------------------------------------------------------------------------
        | LIVE FRONT-END PREVIEW RESET
        |--------------------------------------------------------------------------
        */

        html,
        body {
            margin:0 !important;
            padding:0 !important;

            border:0 !important;

            min-height:100%;
            background:#ffffff !important;
        }


        body.orb-builder-live-preview-body {
            overflow:auto !important;

            color:#1d2327;

            font-family:
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                Roboto,
                Helvetica,
                Arial,
                sans-serif;

            /*
            | STEP 103C
            | Match the explicit Builder Canvas baseline instead of the
            | browser's 16px front-end default.
            */
            font-size:13px;
            line-height:1.4;
        }


        .orb-builder-live-preview-app {
            position:static !important;
            inset:auto !important;

            width:100% !important;
            min-height:100vh !important;

            display:block !important;

            background:#ffffff !important;

            z-index:auto !important;
        }


        /*
        |--------------------------------------------------------------------------
        | STEP 100D — REMOVE EDITOR-ONLY TOP SAFE GUTTER
        |--------------------------------------------------------------------------
        |
        | The editor stylesheet reserves 48px above the Canvas so the selected
        | Section toolbar has room to sit outside the Section boundary:
        |
        | .orb-builder-app[data-orb-preview-device="desktop"]
        | .orb-builder-canvas { padding:48px 0 0 !important; }
        |
        | That selector is more specific than the older live-preview reset, so
        | the 48px editor gutter leaked into Live Draft Preview / Published
        | rendering and looked like an empty toolbar strip with a horizontal
        | divider at the top.
        |
        | Match/exceed that specificity here so the front-end always starts at
        | the real first Section.
        |
        */

        .orb-builder-app.orb-builder-live-preview-app[data-orb-preview-device]
        .orb-builder-canvas {
            width:100% !important;
            min-height:100vh !important;

            display:block !important;

            margin:0 !important;
            padding:0 !important;

            border:0 !important;

            overflow:visible !important;

            background:#ffffff !important;
        }


        .orb-builder-app.orb-builder-live-preview-app
        .orb-builder-page {
            width:100% !important;
            max-width:none !important;

            margin:0 !important;
            padding-top:0 !important;

            border:0 !important;

            background:#ffffff !important;

            box-shadow:none !important;

            transform:none !important;
        }


        /*
        |--------------------------------------------------------------------------
        | STEP 103A — BUILDER / LIVE PREVIEW VISUAL PARITY
        |--------------------------------------------------------------------------
        |
        | Keep the clean explicit renderer from Step 103, but preserve the same
        | geometry the Builder Canvas uses for Rows, Column content wells and
        | Elements. Editor chrome remains hidden.
        |
        */


        /*
        |--------------------------------------------------------------------------
        | STEP 103 — CLEAN FRONT-END STRUCTURE
        |--------------------------------------------------------------------------
        |
        | These classes are rendered directly for Live Draft / Published pages.
        | They contain no editor controls, selection state or drag/drop chrome.
        |
        */

        .orb-builder-live-preview-app
        .orb-builder-live-structure,
        .orb-builder-live-preview-app
        .orb-builder-live-row-list,
        .orb-builder-live-preview-app
        .orb-builder-live-row,
        .orb-builder-live-preview-app
        .orb-builder-live-row-inner,
        .orb-builder-live-preview-app
        .orb-builder-live-column-list,
        .orb-builder-live-preview-app
        .orb-builder-live-column,
        .orb-builder-live-preview-app
        .orb-builder-live-column-inner,
        .orb-builder-live-preview-app
        .orb-builder-live-column-content,
        .orb-builder-live-preview-app
        .orb-builder-live-element {
            box-sizing:border-box;
        }


        .orb-builder-live-preview-app
        .orb-builder-live-structure {
            width:100%;
            min-width:0;
        }


        .orb-builder-live-preview-app
        .orb-builder-live-row-list {
            width:100%;
            min-width:0;

            display:flex;
            flex-direction:column;

            /* Match the Builder Canvas row rhythm. */
            gap:20px;
        }


        .orb-builder-live-preview-app
        .orb-builder-live-row {
            width:auto;
            min-width:0;

            /*
            | STEP 115.5 — Row parity after the Builder-only 22px working
            | inset was removed in Step 115.4. Live Draft / Published must
            | use the same real saved spacing instead of a hidden gutter.
            */
            margin-left:0;
            margin-right:0;
        }


        .orb-builder-live-preview-app
        .orb-builder-live-row-inner {
            width:100%;
            min-width:0;
        }


        .orb-builder-live-preview-app
        .orb-builder-live-nested-row {
            margin-top:0;
        }


        .orb-builder-live-preview-app
        .orb-builder-live-column-list {
            width:100%;
            min-width:0;
        }


        .orb-builder-live-preview-app
        .orb-builder-live-column {
            min-width:0;

            display:flex;
            align-items:stretch;
        }


        .orb-builder-live-preview-app
        .orb-builder-live-column-inner {
            width:100%;
            min-width:0;
            flex:1;
        }


        .orb-builder-live-preview-app
        .orb-builder-live-column-content {
            width:100%;
            min-width:0;
            min-height:90px;

            /*
            | The Builder's Column content well contributes 12px of inner
            | spacing. Step 103 removed that shell entirely, which made Live
            | Preview wider/shorter than the Canvas and changed image sizes,
            | heading wrapping, and vertical rhythm.
            |
            | Keep the geometry, remove only the dashed editor chrome.
            */
            padding:12px;
            border:0;
            border-radius:0;
            background:transparent;
        }


        .orb-builder-live-preview-app
        .orb-builder-live-element {
            width:auto;
            min-width:0;

            /* Preserve the Builder element box dimensions invisibly. */
            border:1px solid transparent;
            border-radius:6px;
        }


        .orb-builder-live-preview-app
        .orb-builder-live-element-heading,
        .orb-builder-live-preview-app
        .orb-builder-live-element-text {
            margin:0;
        }


        /*
        |--------------------------------------------------------------------------
        | STEP 103G — HEADING TYPOGRAPHY PARITY
        |--------------------------------------------------------------------------
        |
        | Browser default H3/H4 weight is typically bold while wp-admin can
        | apply a lighter heading baseline. Website content must not depend on
        | either environment.
        |
        | Use one explicit Builder-owned default. Any saved inline
        | `font-weight` from Heading Settings still overrides this rule.
        |
        */

        .orb-builder-live-preview-app
        .orb-builder-live-element-heading {
            font-weight:700;
        }


        .orb-builder-live-preview-app
        .orb-builder-live-element-heading-top {
            font-size:22px;
        }


        .orb-builder-live-preview-app
        .orb-builder-live-element-text {
            color:#50575e;
            line-height:1.6;
        }


        .orb-builder-live-preview-app
        .orb-builder-live-element-image {
            display:block;
            max-width:100%;
        }


        .orb-builder-live-preview-app
        .orb-builder-live-image-placeholder {
            min-height:80px;

            display:grid;
            place-items:center;

            border:1px dashed #dcdcde;
            border-radius:6px;

            background:#f6f7f7;
            color:#646970;
        }


        .orb-builder-live-preview-app
        .orb-builder-live-element-button {
            text-decoration:none;
        }


        /*
        | Section background / safe-zone behavior now comes from the dedicated
        | public renderer stylesheet. No editor stylesheet is required.
        */

        .orb-builder-live-preview-app
        .orb-builder-canvas-section {
            outline:none !important;
            box-shadow:none !important;
            cursor:default !important;
        }


        /*
        |--------------------------------------------------------------------------
        | LEGACY SECTION CONTENT
        |--------------------------------------------------------------------------
        |
        | Existing hero/custom section fields remain supported while the newer
        | Row/Column/Element structure continues to render below them.
        */

        .orb-builder-live-legacy-heading {
            margin:0 0 18px;

            font-size:36px;
            line-height:1.15;
        }


        .orb-builder-live-hero-heading {
            margin-bottom:20px;

            font-size:48px;
        }


        .orb-builder-live-legacy-copy {
            max-width:700px;

            margin:0 auto 24px;

            color:#646970;

            font-size:17px;
            line-height:1.7;
        }


        .orb-builder-live-hero-copy {
            margin-bottom:25px;

            font-size:18px;
            line-height:1.55;
        }


        .orb-builder-live-section[style*="text-align:left"]
        .orb-builder-live-legacy-copy {
            margin-left:0;
            margin-right:0;
        }


        .orb-builder-live-legacy-button,
        .orb-builder-live-preview-app
        .button.button-primary {
            /*
            | STEP 103C — BUILDER-OWNED CONTENT BUTTON BASELINE
            |
            | The Builder previously inherited its Button Element from the
            | logged-in WordPress admin color scheme while the public renderer
            | used a hard-coded default WordPress blue. That produced different
            | color, height, padding and weight.
            |
            | Use the same explicit content-button baseline on both surfaces.
            | Inline saved Button settings still override these defaults.
            */
            min-height:40px;

            display:inline-flex;
            align-items:center;
            justify-content:center;

            box-sizing:border-box;
            padding:0 16px;

            border:1px solid #3858e9;
            border-radius:3px;

            background:#3858e9;
            color:#ffffff;

            font-size:13px;
            font-weight:600;
            line-height:1;

            text-decoration:none;
            white-space:nowrap;
        }


        /*
        |--------------------------------------------------------------------------
        | RESPONSIVE SETTINGS — REAL VIEWPORT
        |--------------------------------------------------------------------------
        |
        | The editor normally switches responsive values with a device toggle.
        | The live preview switches the same data automatically from viewport
        | width so the URL behaves like an actual front-end page.
        */

        .orb-builder-live-preview-app[data-orb-preview-device="desktop"]
        [data-orb-visible-desktop="0"],
        .orb-builder-live-preview-app[data-orb-preview-device="tablet"]
        [data-orb-visible-tablet="0"],
        .orb-builder-live-preview-app[data-orb-preview-device="mobile"]
        [data-orb-visible-mobile="0"] {
            display:none !important;
        }


        /*
        | Do not use the editor's framed 768/390px device canvas on the real
        | front-end preview. The browser viewport itself is the device.
        */

        .orb-builder-live-preview-app[data-orb-preview-device="tablet"]
        .orb-builder-page,
        .orb-builder-live-preview-app[data-orb-preview-device="mobile"]
        .orb-builder-page {
            width:100% !important;
            max-width:none !important;

            margin:0 !important;

            box-shadow:none !important;
        }


        @media (max-width:767px) {

            .orb-builder-live-legacy-heading {
                font-size:30px;
            }


            .orb-builder-live-hero-heading {
                font-size:38px;
            }
        }


/*
|--------------------------------------------------------------------------
| STEP 106A — KEEP COLUMNS OVERFLOW / TEXT COLLISION FIX
|--------------------------------------------------------------------------
|
| Match the Builder Canvas behavior when Tablet/Mobile is set to Keep Columns.
| Columns remain side-by-side, but every layer can shrink below its content's
| intrinsic minimum width instead of colliding with the next Column.
|
*/

.orb-builder-live-preview-app
.orb-builder-live-column-list,
.orb-builder-live-preview-app
.orb-builder-live-column,
.orb-builder-live-preview-app
.orb-builder-live-column-inner,
.orb-builder-live-preview-app
.orb-builder-live-column-content,
.orb-builder-live-preview-app
.orb-builder-live-element {
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
}


.orb-builder-live-preview-app
.orb-builder-live-element-heading,
.orb-builder-live-preview-app
.orb-builder-live-element-text {
    min-width:0;
    max-width:100%;

    overflow-wrap:anywhere;
    word-break:normal;
}


.orb-builder-live-preview-app
.orb-builder-live-element-image,
.orb-builder-live-preview-app
.orb-builder-live-element-button {
    max-width:100%;
}


/*
|--------------------------------------------------------------------------
| STEP 107 — RESPONSIVE COLUMN SIZING
|--------------------------------------------------------------------------
*/

.orb-builder-live-preview-app[data-orb-preview-device="tablet"]
.orb-builder-live-row[data-orb-tablet-columns="keep"]
> .orb-builder-live-row-inner
> .orb-builder-live-column-list
> .orb-builder-live-column:not([data-orb-tablet-width="inherit"]) {
    flex:0 0 var(--orb-tablet-column-width) !important;
    width:var(--orb-tablet-column-width) !important;
    max-width:var(--orb-tablet-column-width) !important;
}


.orb-builder-live-preview-app[data-orb-preview-device="mobile"]
.orb-builder-live-row[data-orb-mobile-columns="keep"]
> .orb-builder-live-row-inner
> .orb-builder-live-column-list
> .orb-builder-live-column:not([data-orb-mobile-width="inherit"]) {
    flex:0 0 var(--orb-mobile-column-width) !important;
    width:var(--orb-mobile-column-width) !important;
    max-width:var(--orb-mobile-column-width) !important;
}


/*
|--------------------------------------------------------------------------
| STEP 108 — RESPONSIVE ROW GAP + ALIGNMENT OVERRIDES
|--------------------------------------------------------------------------
*/

.orb-builder-live-preview-app[data-orb-preview-device="tablet"]
.orb-builder-live-row
> .orb-builder-live-row-inner
> .orb-builder-live-column-list {
    --orb-effective-row-gap:
        var(--orb-tablet-row-gap, var(--orb-row-column-gap, 10px));

    gap:var(--orb-effective-row-gap) !important;

    justify-content:
        var(--orb-tablet-row-justify, var(--orb-row-justify, flex-start)) !important;

    align-items:
        var(--orb-tablet-row-align, var(--orb-row-align, stretch)) !important;
}


.orb-builder-live-preview-app[data-orb-preview-device="mobile"]
.orb-builder-live-row
> .orb-builder-live-row-inner
> .orb-builder-live-column-list {
    --orb-effective-row-gap:
        var(--orb-mobile-row-gap, var(--orb-row-column-gap, 10px));

    gap:var(--orb-effective-row-gap) !important;

    justify-content:
        var(--orb-mobile-row-justify, var(--orb-row-justify, flex-start)) !important;

    align-items:
        var(--orb-mobile-row-align, var(--orb-row-align, stretch)) !important;
}


/*
|--------------------------------------------------------------------------
| STEP 109 — RESPONSIVE COLUMN CONTENT ALIGNMENT
|--------------------------------------------------------------------------
|
| Applies to both top-level and nested Columns because both render through
| .orb-builder-live-column-content on the public/live preview surface.
|
*/

.orb-builder-live-preview-app[data-orb-preview-device="tablet"]
.orb-builder-live-column
> .orb-builder-live-column-inner
> .orb-builder-live-column-content {
    justify-content:
        var(--orb-tablet-column-justify, var(--orb-column-justify, flex-start)) !important;

    align-items:
        var(--orb-tablet-column-align, var(--orb-column-align, stretch)) !important;
}


.orb-builder-live-preview-app[data-orb-preview-device="mobile"]
.orb-builder-live-column
> .orb-builder-live-column-inner
> .orb-builder-live-column-content {
    justify-content:
        var(--orb-mobile-column-justify, var(--orb-column-justify, flex-start)) !important;

    align-items:
        var(--orb-mobile-column-align, var(--orb-column-align, stretch)) !important;
}


/*
|--------------------------------------------------------------------------
| STEP 109B — FULL-WIDTH ELEMENT CONTAINMENT
|--------------------------------------------------------------------------
|
| Column Left / Center / Right alignment can shrink auto-width Element
| wrappers. A Button set to Full Width must instead stretch its wrapper across
| the available Column width so the button's width:100% remains meaningful and
| never crosses the Column boundary.
|
*/

.orb-builder-live-preview-app
.orb-builder-live-element[data-orb-layout-width="full"] {
    width:auto !important;
    max-width:100%;
    min-width:0;
    align-self:stretch !important;
    box-sizing:border-box;
}


/*
|--------------------------------------------------------------------------
| STEP 110 — RESPONSIVE HEADING / TEXT TYPOGRAPHY
|--------------------------------------------------------------------------
|
| Public/live output uses the same responsive typography variables emitted by
| PHP. Blank Tablet/Mobile overrides fall back to Desktop without duplicating
| saved values.
|
*/

.orb-builder-live-preview-app[data-orb-preview-device="desktop"]
:is(.orb-builder-live-element-heading, .orb-builder-live-element-text) {
    font-size:var(--orb-typography-font-size-desktop) !important;
    line-height:var(--orb-typography-line-height-desktop) !important;
    letter-spacing:var(--orb-typography-letter-spacing-desktop, normal) !important;
    text-align:var(--orb-typography-align-desktop, left) !important;
}


.orb-builder-live-preview-app[data-orb-preview-device="tablet"]
:is(.orb-builder-live-element-heading, .orb-builder-live-element-text) {
    font-size:var(
        --orb-typography-font-size-tablet,
        var(--orb-typography-font-size-desktop)
    ) !important;

    line-height:var(
        --orb-typography-line-height-tablet,
        var(--orb-typography-line-height-desktop)
    ) !important;

    letter-spacing:var(
        --orb-typography-letter-spacing-tablet,
        var(--orb-typography-letter-spacing-desktop, normal)
    ) !important;

    text-align:var(
        --orb-typography-align-tablet,
        var(--orb-typography-align-desktop, left)
    ) !important;
}


.orb-builder-live-preview-app[data-orb-preview-device="mobile"]
:is(.orb-builder-live-element-heading, .orb-builder-live-element-text) {
    font-size:var(
        --orb-typography-font-size-mobile,
        var(--orb-typography-font-size-desktop)
    ) !important;

    line-height:var(
        --orb-typography-line-height-mobile,
        var(--orb-typography-line-height-desktop)
    ) !important;

    letter-spacing:var(
        --orb-typography-letter-spacing-mobile,
        var(--orb-typography-letter-spacing-desktop, normal)
    ) !important;

    text-align:var(
        --orb-typography-align-mobile,
        var(--orb-typography-align-desktop, left)
    ) !important;
}


/*
|--------------------------------------------------------------------------
| STEP 110B / 110C — GLOBAL TYPOGRAPHY
|--------------------------------------------------------------------------
*/

.orb-builder-live-preview-app .orb-builder-page {
    font-family:var(
        --orb-global-body-font,
        -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif
    );
    color:var(--orb-global-body-color,#50575e);
}

.orb-builder-live-element-heading {
    font-family:var(
        --orb-global-heading-font,
        var(
            --orb-global-body-font,
            -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif
        )
    );
}

.orb-builder-live-element-text,
.orb-builder-live-element-button {
    font-family:var(
        --orb-global-body-font,
        -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif
    );
}

/*
|--------------------------------------------------------------------------
| STEP 111 — RESPONSIVE BUTTON CONTROLS
|--------------------------------------------------------------------------
|
| Live Draft / Published output consumes the same effective Button variables
| emitted by PHP. The public runtime updates data-orb-preview-device from the
| real viewport, so these rules also become the production responsive rules.
|
*/

.orb-builder-live-preview-app[data-orb-preview-device="desktop"]
.orb-builder-live-element-button {
    display:var(--orb-button-display-desktop, inline-flex) !important;
    width:var(--orb-button-width-desktop, auto) !important;
    justify-content:var(--orb-button-justify-desktop, center) !important;
    text-align:var(--orb-button-text-align-desktop, center) !important;
    padding-top:var(--orb-button-padding-top-desktop, 0px) !important;
    padding-right:var(--orb-button-padding-right-desktop, 16px) !important;
    padding-bottom:var(--orb-button-padding-bottom-desktop, 0px) !important;
    padding-left:var(--orb-button-padding-left-desktop, 16px) !important;
    font-size:var(--orb-button-font-size-desktop, 13px) !important;
}

.orb-builder-live-preview-app[data-orb-preview-device="tablet"]
.orb-builder-live-element-button {
    display:var(--orb-button-display-tablet, var(--orb-button-display-desktop, inline-flex)) !important;
    width:var(--orb-button-width-tablet, var(--orb-button-width-desktop, auto)) !important;
    justify-content:var(--orb-button-justify-tablet, var(--orb-button-justify-desktop, center)) !important;
    text-align:var(--orb-button-text-align-tablet, var(--orb-button-text-align-desktop, center)) !important;
    padding-top:var(--orb-button-padding-top-tablet, var(--orb-button-padding-top-desktop, 0px)) !important;
    padding-right:var(--orb-button-padding-right-tablet, var(--orb-button-padding-right-desktop, 16px)) !important;
    padding-bottom:var(--orb-button-padding-bottom-tablet, var(--orb-button-padding-bottom-desktop, 0px)) !important;
    padding-left:var(--orb-button-padding-left-tablet, var(--orb-button-padding-left-desktop, 16px)) !important;
    font-size:var(--orb-button-font-size-tablet, var(--orb-button-font-size-desktop, 13px)) !important;
}

.orb-builder-live-preview-app[data-orb-preview-device="mobile"]
.orb-builder-live-element-button {
    display:var(--orb-button-display-mobile, var(--orb-button-display-desktop, inline-flex)) !important;
    width:var(--orb-button-width-mobile, var(--orb-button-width-desktop, auto)) !important;
    justify-content:var(--orb-button-justify-mobile, var(--orb-button-justify-desktop, center)) !important;
    text-align:var(--orb-button-text-align-mobile, var(--orb-button-text-align-desktop, center)) !important;
    padding-top:var(--orb-button-padding-top-mobile, var(--orb-button-padding-top-desktop, 0px)) !important;
    padding-right:var(--orb-button-padding-right-mobile, var(--orb-button-padding-right-desktop, 16px)) !important;
    padding-bottom:var(--orb-button-padding-bottom-mobile, var(--orb-button-padding-bottom-desktop, 0px)) !important;
    padding-left:var(--orb-button-padding-left-mobile, var(--orb-button-padding-left-desktop, 16px)) !important;
    font-size:var(--orb-button-font-size-mobile, var(--orb-button-font-size-desktop, 13px)) !important;
}

.orb-builder-live-preview-app[data-orb-preview-device="desktop"]
.orb-builder-live-element[data-orb-button-width-desktop="full"],
.orb-builder-live-preview-app[data-orb-preview-device="tablet"]
.orb-builder-live-element[data-orb-button-width-tablet="full"],
.orb-builder-live-preview-app[data-orb-preview-device="mobile"]
.orb-builder-live-element[data-orb-button-width-mobile="full"] {
    width:auto !important;
    max-width:100%;
    min-width:0;
    align-self:stretch !important;
}

.orb-builder-live-preview-app[data-orb-preview-device="desktop"]
.orb-builder-live-element[data-orb-button-width-desktop="auto"],
.orb-builder-live-preview-app[data-orb-preview-device="tablet"]
.orb-builder-live-element[data-orb-button-width-tablet="auto"],
.orb-builder-live-preview-app[data-orb-preview-device="mobile"]
.orb-builder-live-element[data-orb-button-width-mobile="auto"] {
    width:auto !important;
    max-width:100%;
    min-width:0;
    align-self:auto !important;
}


/* Step 111A — Button Styles padding belongs to the Button, not its wrapper. */
.orb-builder-live-preview-app
.orb-builder-live-element[data-element-type="button"] {
    padding:0 !important;
}

/* Step 111B — Button Main Text + optional Sub Text. */
.orb-builder-live-element-button .orb-builder-button-content,
.button.button-primary .orb-builder-button-content {
    display:inline-flex;
    flex-direction:column;
    align-items:inherit;
    justify-content:center;
    min-width:0;
    max-width:100%;
    text-align:inherit;
    line-height:inherit;
}

.orb-builder-live-element-button .orb-builder-button-main-text,
.orb-builder-live-element-button .orb-builder-button-sub-text,
.button.button-primary .orb-builder-button-main-text,
.button.button-primary .orb-builder-button-sub-text {
    display:block;
    min-width:0;
    max-width:100%;
}

.orb-builder-live-element-button .orb-builder-button-sub-text,
.button.button-primary .orb-builder-button-sub-text {
    margin-top:0.15em;
    font-size:0.78em;
    line-height:1.2;
    opacity:0.78;
}

/*
|--------------------------------------------------------------------------
| STEP 111C — BUTTON ACTIONS
|--------------------------------------------------------------------------
*/
.orb-builder-action-hidden {
    display:none !important;
}

body.orb-builder-action-popup-open {
    overflow:hidden;
}

.orb-builder-action-popup-overlay {
    position:fixed;
    inset:0;
    z-index:999999;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    box-sizing:border-box;
    background:rgba(0,0,0,.55);
}

.orb-builder-action-popup-dialog {
    position:relative;
    width:min(720px,100%);
    max-height:calc(100vh - 48px);
    overflow:auto;
    box-sizing:border-box;
    padding:32px;
    border-radius:16px;
    background:#fff;
}

.orb-builder-action-popup-close {
    position:absolute;
    top:10px;
    right:10px;
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    padding:0;
    border:0;
    border-radius:50%;
    background:rgba(0,0,0,.08);
    color:#111;
    font:inherit;
    font-size:24px;
    line-height:1;
    cursor:pointer;
}

.orb-builder-action-popup-content > .orb-builder-live-element {
    width:100%;
    max-width:none;
}


/*
|--------------------------------------------------------------------------
| STEP 111E2 — SAFE BUTTON ICONS
|--------------------------------------------------------------------------
| Icons live inside the clickable Button and inherit Button font sizing.
*/
.button.button-primary .orb-builder-button-icon,
.orb-builder-live-element-button .orb-builder-button-icon {
    display:inline-flex;
    flex:0 0 auto;
    align-items:center;
    justify-content:center;
    line-height:0;
}

.button.button-primary .orb-builder-button-icon-before,
.orb-builder-live-element-button .orb-builder-button-icon-before {
    margin-right:0.5em;
}

.button.button-primary .orb-builder-button-icon-after,
.orb-builder-live-element-button .orb-builder-button-icon-after {
    margin-left:0.5em;
}

.button.button-primary .orb-builder-button-icon-svg,
.orb-builder-live-element-button .orb-builder-button-icon-svg {
    display:block;
    width:1em;
    height:1em;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.button.button-primary .orb-builder-button-icon-svg-fill,
.orb-builder-live-element-button .orb-builder-button-icon-svg-fill {
    fill:currentColor;
    stroke:none;
}

/*
|--------------------------------------------------------------------------
| STEP 112 — RESPONSIVE IMAGE CONTROLS
|--------------------------------------------------------------------------
*/
.orb-builder-live-preview-app[data-orb-preview-device="desktop"]
.orb-builder-live-element-image {
    width:var(--orb-image-width-desktop,100%) !important;
    max-width:var(--orb-image-max-width-desktop,100%) !important;
    margin-left:var(--orb-image-margin-left-desktop,0) !important;
    margin-right:var(--orb-image-margin-right-desktop,auto) !important;
}

.orb-builder-live-preview-app[data-orb-preview-device="tablet"]
.orb-builder-live-element-image {
    width:var(--orb-image-width-tablet,var(--orb-image-width-desktop,100%)) !important;
    max-width:var(--orb-image-max-width-tablet,var(--orb-image-max-width-desktop,100%)) !important;
    margin-left:var(--orb-image-margin-left-tablet,var(--orb-image-margin-left-desktop,0)) !important;
    margin-right:var(--orb-image-margin-right-tablet,var(--orb-image-margin-right-desktop,auto)) !important;
}

.orb-builder-live-preview-app[data-orb-preview-device="mobile"]
.orb-builder-live-element-image {
    width:var(--orb-image-width-mobile,var(--orb-image-width-desktop,100%)) !important;
    max-width:var(--orb-image-max-width-mobile,var(--orb-image-max-width-desktop,100%)) !important;
    margin-left:var(--orb-image-margin-left-mobile,var(--orb-image-margin-left-desktop,0)) !important;
    margin-right:var(--orb-image-margin-right-mobile,var(--orb-image-margin-right-desktop,auto)) !important;
}

/*
|--------------------------------------------------------------------------
| STEP 115.5 — MOBILE BUTTON CONTAINMENT / TEXT OVERFLOW PARITY
|--------------------------------------------------------------------------
|
| Auto-width Buttons should size to their content when room is available,
| but must remain inside a narrow Column on small screens. The older global
| white-space:nowrap baseline could clip the last characters/icon whenever
| max-width:100% constrained the Button.
|
| max-content preserves the expected single-line auto width when it fits.
| max-width:100% provides the hard containment boundary. If the available
| Column really is narrower than the label, the text may wrap instead of
| being cut off.
|
*/
.orb-builder-live-preview-app
.orb-builder-live-element[data-element-type="button"] {
    min-width:0;
}

.orb-builder-live-preview-app[data-orb-preview-device="desktop"]
.orb-builder-live-element[data-element-type="button"][data-orb-button-width-desktop="auto"],
.orb-builder-live-preview-app[data-orb-preview-device="tablet"]
.orb-builder-live-element[data-element-type="button"][data-orb-button-width-tablet="auto"],
.orb-builder-live-preview-app[data-orb-preview-device="mobile"]
.orb-builder-live-element[data-element-type="button"][data-orb-button-width-mobile="auto"] {
    width:max-content !important;
    max-width:100%;
    min-width:0;
}

.orb-builder-live-preview-app
.orb-builder-live-element-button {
    max-width:100%;
    min-width:0;
    white-space:normal !important;
}

.orb-builder-live-preview-app
.orb-builder-live-element-button .orb-builder-button-content {
    flex:1 1 auto;
    min-width:0;
    max-width:100%;
}

.orb-builder-live-preview-app
.orb-builder-live-element-button .orb-builder-button-main-text,
.orb-builder-live-preview-app
.orb-builder-live-element-button .orb-builder-button-sub-text {
    max-width:100%;
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:normal;
}


/*
|--------------------------------------------------------------------------
| STEP 115.6 — STACKED ROW DISTRIBUTION PARITY
|--------------------------------------------------------------------------
|
| Space Between is useful for horizontal Desktop Columns, but inheriting it
| after a Row stacks changes it into vertical distribution and creates large
| gaps between stacked Columns. While stacked, an unset responsive
| Distribution now falls back to Start. Explicit Tablet/Mobile overrides are
| preserved.
|
*/
.orb-builder-live-preview-app[data-orb-preview-device="tablet"]
.orb-builder-live-row[data-orb-tablet-columns="stack"]
> .orb-builder-live-row-inner
> .orb-builder-live-column-list {
    justify-content:var(--orb-tablet-row-justify, flex-start) !important;
}

.orb-builder-live-preview-app[data-orb-preview-device="mobile"]
.orb-builder-live-row[data-orb-mobile-columns="stack"]
> .orb-builder-live-row-inner
> .orb-builder-live-column-list {
    justify-content:var(--orb-mobile-row-justify, flex-start) !important;
}

/*
|--------------------------------------------------------------------------
| STEP 115.7 — STACKED ROW GAP PARITY
|--------------------------------------------------------------------------
|
| Desktop Row gap is horizontal. Once Columns stack on Tablet/Mobile, an
| inherited Desktop gap becomes vertical and can create an unexpectedly large
| space between stacked items. Use the normal 10px stack gap unless that
| device has an explicit Row Gap override.
|
*/
.orb-builder-live-preview-app[data-orb-preview-device="tablet"]
.orb-builder-live-row[data-orb-tablet-columns="stack"]
> .orb-builder-live-row-inner
> .orb-builder-live-column-list {
    --orb-effective-row-gap:var(--orb-tablet-row-gap, 10px) !important;
    gap:var(--orb-effective-row-gap) !important;
}

.orb-builder-live-preview-app[data-orb-preview-device="mobile"]
.orb-builder-live-row[data-orb-mobile-columns="stack"]
> .orb-builder-live-row-inner
> .orb-builder-live-column-list {
    --orb-effective-row-gap:var(--orb-mobile-row-gap, 10px) !important;
    gap:var(--orb-effective-row-gap) !important;
}

/*
|--------------------------------------------------------------------------
| STEP 115.8 — PUBLIC COLUMN CONTENT GEOMETRY PARITY
|--------------------------------------------------------------------------
|
| Live Draft / Published do not need the Builder's empty-column editing
| affordance. The previous 90px min-height + 12px inner padding duplicated
| the real saved Column spacing and became visible as large vertical gaps
| when Columns stacked on Tablet/Mobile.
|
| Column spacing remains controlled by .orb-builder-live-column-inner via
| the responsive container-spacing variables. Keep the content wrapper
| layout-only.
|
*/
.orb-builder-live-preview-app .orb-builder-live-column-content {
    min-height:0 !important;
    padding:0 !important;
}


/*
|--------------------------------------------------------------------------
| STEP 116.1 — DESKTOP ROW STACKING
|--------------------------------------------------------------------------
|
| Mirror the Builder's explicit Desktop Keep Columns / Stack Columns setting
| in Live Draft and Published rendering. Existing Rows default to Keep Columns.
|
*/

.orb-builder-live-preview-app[data-orb-preview-device="desktop"]
.orb-builder-live-row[data-orb-desktop-columns="stack"]
> .orb-builder-live-row-inner
> .orb-builder-live-column-list {
    flex-direction:column !important;
    flex-wrap:nowrap !important;
    align-items:stretch !important;
}

.orb-builder-live-preview-app[data-orb-preview-device="desktop"]
.orb-builder-live-row[data-orb-desktop-columns="stack"][data-orb-desktop-stack-order="reverse"]
> .orb-builder-live-row-inner
> .orb-builder-live-column-list {
    flex-direction:column-reverse !important;
}

.orb-builder-live-preview-app[data-orb-preview-device="desktop"]
.orb-builder-live-row[data-orb-desktop-columns="stack"]
> .orb-builder-live-row-inner
> .orb-builder-live-column-list
> .orb-builder-live-column {
    width:100% !important;
    max-width:100% !important;
    flex:0 0 auto !important;
    min-width:0 !important;
}