*,
:before,
:after {
    box-sizing: border-box;
}

:before,
:after {
    font-weight: normal;
}

:root[lang="en"] {
    --font: "Inter";
}

:root[lang="ar"] {
    --font: "Alexandria";
}

html {
    transform-origin: 0 0;
}

body {
    font-family: var(--font);
    font-size: 14px;
    min-height: 100vh;
    line-height: 1.5em;
    overflow: hidden auto;
}

p {
    margin: 0
}

button {
    user-select: none;
    cursor: pointer;
    border: none;
}

/* FONTS */
@font-face {
    font-family: "icons";
    src: url("/assets/builder/fonts/icons.woff?5") format("woff");
    font-style: normal;
    font-weight: normal;
    font-display: block;
}

/* COMMON */
.hide {
    display: none !important;
}

.hidden {
    opacity: 0;
}

.page-wrapper:not(.demo-embed-code *) {
    /* [PHASE-EC embed-code · 2026-05-13 architectural fix] */
    max-width: var(--max-width, 960px);
    width: 95%;
    margin: 0 auto;
}

.page-content:not(.demo-embed-code *) {
    /* [PHASE-EC embed-code · 2026-05-13 architectural fix] */
    display: grid;
    gap: var(--gap);
}

/* [PHASE-EC embed-code · 2026-05-13 architectural fix]
   `.container` and `.wrapper` are generic class names that collide with
   Tailwind utility classes of the same name (used pervasively in AI-
   generated landing pages). Scope these builder rules so they DON'T
   apply to user content inside an embed-code block.
   `:not(.demo-embed-code *)` excludes any descendant of an embed block.
   Specificity: .container = (0,0,1,0); .container:not(.demo-embed-code *)
   inherits the highest specificity inside the :not() = (0,0,1,0), summing
   to (0,0,2,0). Beats Tailwind's `.container` (0,0,1,0) for builder
   elements (no change to existing pages); doesn't match user's Tailwind
   `.container` because it's a descendant of `.demo-embed-code`.
   This mirrors how GHL and Webflow scope their builder CSS so it never
   collides with user-pasted code. */
.container:not(.demo-embed-code *) {
    /* position: relative; */
    /* for mask :before */
    width: 100%;
    display: flex;
    margin: 0 auto;
    height: 100%;
}

.wrapper:not(.demo-embed-code *) {
    max-width: var(--max-width, 960px);
    width: 100%;
    margin: 0 auto;
}

[data-type="container"],
[data-type="grid"],
[data-type="form"],
[data-type="iframe"],
[data-type="divider"],
[data-type="switch"],
[data-type="accordion"],
[data-type="accordion2"],
[data-type="tabs"],
[data-type="tabs2"],
[data-type="marquee"],
[data-type="slideshow"],
[data-type="carousel"] {
    width: 100%;
}

[data-type="form"]>form>.container>.element:not([data-type="button"]) {
    width: 100%;
}

[data-type="carousel"] {
    /* overflow: hidden; */
    max-width: 100vw;
}

.element:not(.demo-embed-code *) {
    /* [PHASE-EC embed-code · 2026-05-13 architectural fix] Scope to exclude
       user content. `.element` is unique to builder structure but defensive
       in case user pastes `<div class="element">`. */
    display: grid;
    position: relative;
}

.demo-range {
    display: flex;
    gap: 5px;
    flex-direction: column;
}

.container.wrapper:not(.demo-embed-code *) {
    /* [PHASE-EC embed-code · 2026-05-13 architectural fix] Same scoping. */
    z-index: 2;
}

table.demo-table {
    width: 100%;
    border: 1px solid;
    border-spacing: 0;
}

table.demo-table td {
    border-bottom: 1px solid;
    padding: 10px;
}

table.demo-table th {
    padding: 10px;
    border-bottom: 2px solid;
    text-align: start;
}

table.demo-table tbody tr:last-of-type td {
    border-bottom: none;
}


.demo-heading,
.demo-paragraph {
    line-height: 1.5;
    margin: 0;
    width: 100%;
}

.demo-paragraph b,
.demo-paragraph i,
.demo-paragraph u {
    display: block;
}

figure.demo-image,
figure.demo-video,
figure.demo-audio {
    margin: 0;
    width: inherit;
    height: inherit;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

figure.demo-image picture {
    object-fit: inherit;
    display: flex;
    width: 100%;
    height: 100%;
}

.demo-iframe {
    width: 100%;
    max-width: 100%;
    min-height: 300px;
}

.demo-image img,
.demo-video {
    width: 100%;
    height: 100%;
}

figure.demo-image a {
    display: block;
    width: 100%;
}

figure.demo-image img {
    display: block;
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    mask-image: var(--image-mask, unset);
    object-fit: var(--object-fit, unset);
    aspect-ratio: var(--aspect-ratio, unset);
}

.demo-video video {
    object-fit: var(--object-fit, contain);
    aspect-ratio: var(--aspect-ratio, auto);
}

.demo-input input {
    padding: 10px;
    width: 100%;
}

label.demo-textarea textarea {
    padding: 10px;
    width: 100%;
    resize: vertical;
    min-height: 100px;
}

.demo-selectbox select {
    padding: 10px;
    width: 100%;
}

label.demo-input,
label.demo-textarea,
label.demo-selectbox {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-width: 100%;
}

label.demo-radio,
label.demo-checkbox {
    display: flex;
    gap: 10px;
}

label.demo-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.demo-switch-wrap input {
    position: absolute;
    opacity: 0;
    z-index: -1;
}

.demo-switch-wrap {
    position: relative;
    cursor: pointer;
}

.demo-switch-wrap span {
    background: #eee;
    width: 45px;
    height: 25px;
    border-radius: 100px;
    display: block;
    padding: 5px;
    transition: 0.2s;
}

.demo-switch-wrap span:after {
    content: "";
    width: 15px;
    height: 15px;
    border-radius: 100px;
    background: #9d9d9d;
    display: block;
    transition: inherit;
}

.demo-switch-wrap input:checked+span {
    background-color: #00c957;
}

.demo-switch-wrap input:checked+span:after {
    background-color: #FFF;
    margin-inline-start: 20px;
}

[data-type="panel"] {
    height: 100%;
}

hr.el {
    width: 100%;
    max-width: 100% !important;
    overflow: hidden;
}

.demo-text.el {
    white-space: pre;
}

.placeholder {
    display: none;
}



/**/

.demo-input input,
.demo-selectbox select,
.demo-textarea textarea {
    justify-self: var(--inputs-justify-self, revert);
    width: var(--inputs-width, revert);
    min-width: var(--inputs-min-width, revert);
    max-width: var(--inputs-max-width, revert);
    box-shadow: var(--inputs-box-shadow, revert);
    opacity: var(--inputs-opacity, revert);
    cursor: var(--inputs-cursor, revert);
    padding: var(--inputs-padding, revert);
    margin: var(--inputs-margin, revert);
    background: var(--inputs-background, revert);
    border-radius: var(--inputs-border-radius, revert);
    border: var(--inputs-border, revert);
    border-top-width: var(--inputs-border-top-width, revert);
    border-right-width: var(--inputs-border-right-width, revert);
    border-bottom-width: var(--inputs-border-bottom-width, revert);
    border-left-width: var(--inputs-border-left-width, revert);


    color: var(--inputs-color, revert);
    text-decoration: var(--inputs-text-decoration, revert);
    text-transform: var(--inputs-text-transform, revert);
    letter-spacing: var(--inputs-letter-spacing, revert);
    word-spacing: var(--inputs-word-spacing, revert);
    line-height: var(--inputs-line-height, 1);
    font-family: var(--inputs-font-family, revert);
    font-size: var(--inputs-font-size, revert);
    font-weight: var(--inputs-font-weight, revert);
    font-style: var(--inputs-font-style, revert);
}

.demo-label {
    justify-self: var(--label-justify-self, revert);
    width: var(--label-width, revert);
    min-width: var(--label-min-width, revert);
    max-width: var(--label-max-width, revert);
    box-shadow: var(--label-box-shadow, revert);
    opacity: var(--label-opacity, revert);
    cursor: var(--label-cursor, revert);
    padding: var(--label-padding, revert);
    margin: var(--label-margin, revert);
    background: var(--label-background, revert);

    color: var(--label-color, revert);
    font-family: var(--label-font-family, revert);
    font-size: var(--label-font-size, revert);
    font-weight: var(--label-font-weight, revert);
    font-style: var(--label-font-style, revert);
    text-decoration: var(--label-text-decoration, revert);
    text-transform: var(--label-text-transform, revert);
    letter-spacing: var(--label-letter-spacing, revert);
    word-spacing: var(--label-word-spacing, revert);
    line-height: var(--label-line-height, 1);

    border-radius: var(--label-border-radius, revert);
    border: var(--label-border, revert);
    border-top-width: var(--label-border-top-width, revert);
    border-right-width: var(--label-border-right-width, revert);
    border-bottom-width: var(--label-border-bottom-width, revert);
    border-left-width: var(--label-border-left-width, revert);
}

.demo-details-content {
    cursor: var(--content-cursor, revert);
    padding: var(--content-padding, 20px);
    margin: var(--content-margin, revert);
    border-radius: var(--content-border-radius, revert);
    border: var(--content-border, revert);
    border-top-width: var(--content-border-top-width, revert);
    border-right-width: var(--content-border-right-width, revert);
    border-bottom-width: var(--content-border-bottom-width, revert);
    border-left-width: var(--content-border-left-width, revert);
    box-shadow: var(--content-box-shadow, revert);
    background: var(--content-background, revert);
    opacity: var(--content-opacity, revert);
    color: var(--content-color, revert);
    text-decoration: var(--content-text-decoration, revert);
    text-transform: var(--content-text-transform, revert);
    letter-spacing: var(--content-letter-spacing, revert);
    word-spacing: var(--content-word-spacing, revert);
    line-height: var(--content-line-height, 1.5);
    font-family: var(--content-font-family, revert);
    font-size: var(--content-font-size, revert);
    font-weight: var(--content-font-weight, revert);
    font-style: var(--content-font-style, revert);
}

.demo-button span.button-text {
    color: var(--text-color, revert);
    font-family: var(--text-font-family, revert);
    font-size: var(--text-font-size, revert);
    font-weight: var(--text-font-weight, revert);
    font-style: var(--text-font-style, revert);
    text-decoration: var(--text-text-decoration, revert);
    text-transform: var(--text-text-transform, revert);
    letter-spacing: var(--text-letter-spacing, revert);
    word-spacing: var(--text-word-spacing, revert);
    line-height: var(--text-line-height, 1);
}

.demo-button span.button-subtext {
    color: var(--subtext-color, revert);
    font-family: var(--subtext-font-family, revert);
    font-size: var(--subtext-font-size, revert);
    font-weight: var(--subtext-font-weight, revert);
    font-style: var(--subtext-font-style, revert);
    text-decoration: var(--subtext-text-decoration, revert);
    text-transform: var(--subtext-text-transform, revert);
    letter-spacing: var(--subtext-letter-spacing, revert);
    word-spacing: var(--subtext-word-spacing, revert);
    line-height: var(--subtext-line-height, 1);
}

span.button-subtext:empty {
    display: none;
}

/**/

.demo-list {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin: 0
}

.demo-list a {
    text-decoration: inherit;
    font: inherit;
    color: inherit;
}


.element[data-type="code"] .el,
.element[data-type="tabs2"] .el {
    max-width: 100%;
    width: 100%;
}

.demo-code {
    white-space: pre;
}

/* TABS */
.demo-tabs,
.demo-tabs2 {
    max-width: 100%;
    overflow: hidden;
}

.demo-tabs-head {
    display: flex;
    justify-content: var(--buttons-justify-content, flex-start);
}


.demo-tabs-head button {
    background: var(--buttons-background, #eee);
    padding: var(--buttons-padding, 20px);
    margin: var(--buttons-margin, revert);
    box-shadow: var(--buttons-box-shadow, revert);
    border-radius: var(--buttons-border-radius, revert);
    border: var(--buttons-border, none);
    border-top-width: var(--buttons-border-top-width, revert);
    border-right-width: var(--buttons-border-right-width, revert);
    border-bottom-width: var(--buttons-border-bottom-width, revert);
    border-left-width: var(--buttons-border-left-width, revert);
    cursor: var(--buttons-cursor, pointer);
    opacity: var(--buttons-opacity, revert);
    color: var(--buttons-color, revert);
    text-decoration: var(--buttons-text-decoration, revert);
    text-transform: var(--buttons-text-transform, revert);
    letter-spacing: var(--buttons-letter-spacing, revert);
    word-spacing: var(--buttons-word-spacing, revert);
    line-height: var(--buttons-line-height, 1);
    font-family: var(--buttons-font-family, revert);
    font-size: var(--buttons-font-size, revert);
    font-weight: var(--buttons-font-weight, revert);
    font-style: var(--buttons-font-style, revert);
}

.demo-tabs-content {
    background: var(--body-background, revert);
    padding: var(--body-padding, 20px);
    margin: var(--body-margin, revert);
    box-shadow: var(--body-box-shadow, revert);
    border-radius: var(--body-border-radius, revert);
    border: var(--body-border, revert);
    border-top-width: var(--body-border-top-width, revert);
    border-right-width: var(--body-border-right-width, revert);
    border-bottom-width: var(--body-border-bottom-width, revert);
    border-left-width: var(--body-border-left-width, revert);
    cursor: var(--body-cursor, default);
    opacity: var(--body-opacity, revert);
    color: var(--body-color, revert);
    text-decoration: var(--body-text-decoration, revert);
    text-transform: var(--body-text-transform, revert);
    letter-spacing: var(--body-letter-spacing, revert);
    word-spacing: var(--body-word-spacing, revert);
    line-height: var(--body-line-height, revert);
    font-family: var(--body-font-family, revert);
    font-size: var(--body-font-size, revert);
    font-weight: var(--body-font-weight, revert);
    font-style: var(--body-font-style, revert);
}

.demo-tabs-head button.active {
    font-weight: bold;
}

.demo-tab-content {
    display: none;
}

.demo-tab-content.active {
    display: block;
}

/* ACCORDION */

.demo-summary {
    background: var(--summary-background, #eee);
    padding: var(--summary-padding, 20px);
    margin: var(--summary-margin, revert);
    box-shadow: var(--summary-box-shadow, revert);
    border-radius: var(--summary-border-radius, revert);
    border: var(--summary-border, revert);
    border-top-width: var(--summary-border-top-width, revert);
    border-right-width: var(--summary-border-right-width, revert);
    border-bottom-width: var(--summary-border-bottom-width, revert);
    border-left-width: var(--summary-border-left-width, revert);
    cursor: var(--summary-cursor, pointer);
    opacity: var(--summary-opacity, revert);
    color: var(--summary-color, revert);
    text-decoration: var(--summary-text-decoration, revert);
    text-transform: var(--summary-text-transform, revert);
    letter-spacing: var(--summary-letter-spacing, revert);
    word-spacing: var(--summary-word-spacing, revert);
    line-height: var(--summary-line-height, 1);
    font-family: var(--summary-font-family, revert);
    font-size: var(--summary-font-size, revert);
    font-weight: var(--summary-font-weight, revert);
    font-style: var(--summary-font-style, revert);
}

[open]>.demo-summary {
    font-weight: bold;
}

.demo-accordion {
    display: grid;
    width: 100%;
    max-width: 100%;
}

.demo-accordion2 {
    max-width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* MARQUEE */
.demo-marquee {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.marquee-wrapper {
    display: flex;
    align-items: center;
    gap: 30px;
    animation: ltr-marquee var(--duration, 5s) linear infinite;
}

[data-direction="ltr"] .marquee-wrapper {
    transform: translateX(100%);
    animation-name: ltr-marquee;
}

[data-direction="rtl"] .marquee-wrapper {
    transform: translateX(-100%);
    animation-name: rtl-marquee;
}

.demo-marquee.pauseOnHover:hover .marquee-wrapper {
    animation-play-state: paused;
}

.marquee-wrapper span {
    white-space: nowrap;
}

@keyframes ltr-marquee {
    to {
        transform: translateX(-100%);
    }
}

@keyframes rtl-marquee {
    to {
        transform: translateX(100%);
    }
}

/* SOCIAL */
.demo-social {
    display: flex;
}

.demo-social a {
    text-decoration: none;
    padding: var(--icons-padding, revert);
    border-radius: var(--icons-border-radius, revert);
    border: var(--icons-border, revert);
    border-top-width: var(--icons-border-top-width, revert);
    border-right-width: var(--icons-border-right-width, revert);
    border-bottom-width: var(--icons-border-bottom-width, revert);
    border-left-width: var(--icons-border-left-width, revert);
    box-shadow: var(--icons-box-shadow, revert);
    background-color: var(--icons-background-color, #222);
    color: var(--icons-color, #FFF);
    align-items: center;
    justify-content: center;
    display: flex;
    font-size: 0 !important;
    width: calc(var(--icons-width) + 1rem);
    height: calc(var(--icons-width) + 1rem);
}

.demo-social a:before {
    font-size: var(--icons-width, 30px) !important;
}

/* COUNTER */
ul.demo-counter {
    max-width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}

ul.demo-counter li {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    text-align: center;
    width: 100px;
}

ul.demo-counter li p {
    margin: 0;
}

ul.demo-counter li b {
    font-weight: inherit;
}

ul.demo-counter li i {
    font-style: inherit;
}

ul.demo-counter li u {
    text-decoration: inherit;
}

.counter-wrap {
    font-size: 30px;
    font-weight: bold;
}

.counter-wrap {
    color: var(--number-color, revert);
    text-decoration: var(--number-text-decoration, revert);
    text-transform: var(--number-text-transform, revert);
    letter-spacing: var(--number-letter-spacing, revert);
    word-spacing: var(--number-word-spacing, revert);
    line-height: var(--number-line-height, 1);
    font-family: var(--number-font-family, revert);
    font-size: var(--number-font-size, revert);
    font-weight: var(--number-font-weight, revert);
    font-style: var(--number-font-style, revert);
}

ul.demo-counter li p {
    color: var(--label-color, revert);
    text-decoration: var(--label-text-decoration, revert);
    text-transform: var(--label-text-transform, revert);
    letter-spacing: var(--label-letter-spacing, revert);
    word-spacing: var(--label-word-spacing, revert);
    line-height: var(--label-line-height, 1);
    font-family: var(--label-font-family, revert);
    font-size: var(--label-font-size, revert);
    font-weight: var(--label-font-weight, revert);
    font-style: var(--label-font-style, revert);
}

/* COUNTDOWN */
.demo-countdown {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 30px;
}

.demo-countdown li {
    display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: center;
}

.demo-countdown li b {
    font-size: 50px;
    line-height: 1em;
    width: 1.2em;
}

.demo-gallery {
    grid-template-columns: var(--grid-columns, unset);
    max-width: 100%;
    display: grid;
    gap: 20px;
}

figure.gallery-item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

figure.gallery-item a {
    display: block;
    width: 100%;
    height: 100%;
}

.demo-gallery img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: var(--object-fit, contain);
    aspect-ratio: var(--aspect-ratio, auto);
    mask-image: var(--image-mask);
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
}

.mask:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--mask-background, #000);
    pointer-events: none;
    z-index: 1;
    backdrop-filter: var(--mask-backdrop-filter);
}

span.demo-icon {
    width: 50px;
}

a.demo-button {
    cursor: pointer;
    text-decoration: none;
    align-items: center;
    display: flex;
    justify-content: center;
    border-radius: inherit;
}

.button-wrap {
    display: flex;
    flex-direction: column;
    row-gap: inherit;
}

.with-icon svg.icon {
    fill: var(--icon-fill, #ff4a4a);
    width: var(--icon-width, 20px);
    align-self: var(--icon-align-self, center);
    flex-shrink: 0;
}

.with-icon[data-icon-position="after"] svg {
    order: 1;
}

.demo-snippet.with-icon {
    display: flex;
    gap: 10px
}

/**/

.grid {
    position: relative;
    width: 100%;
    display: grid;
    margin: 0 auto;
    height: 100%;
    grid-template-columns: var(--grid-columns, unset);
    gap: 0;
}

[data-layout="grid-1"],
[data-layout="grid-2"] {
    grid-template-columns: 1fr 1fr;
}

[data-layout="grid-1"] .grid-item:first-of-type {
    grid-column: span 2;
}


[data-layout="grid-2"] .grid-item:first-of-type,
[data-layout="grid-2"] .grid-item:nth-of-type(6n+5),
[data-layout="grid-2"] .grid-item:nth-of-type(6n+7) {
    grid-row: span 2;
}

[data-layout="grid-3"],
[data-layout="grid-4"],
[data-layout="grid-5"] {
    grid-template-columns: 1fr 1fr 1fr;
}


[data-layout="grid-3"] .grid-item:nth-of-type(4n+2),
[data-layout="grid-3"] .grid-item:nth-of-type(4n+3) {
    grid-column: span 2
}


[data-layout="grid-4"] .grid-item:nth-of-type(4n+1),
[data-layout="grid-4"] .grid-item:nth-of-type(4n+4) {
    grid-column: span 2
}

[data-layout="grid-5"] .grid-item:nth-child(1),
[data-layout="grid-5"] .grid-item:nth-child(6n+5),
[data-layout="grid-5"] .grid-item:nth-child(6n+7) {
    grid-row: span 2;
    grid-column: span 2;
}

/**/

.splide__arrows button {
    position: absolute;
    top: 50%;
    z-index: 999;
    width: 35px;
    height: 35px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    margin-top: -17.5px;
}

button.splide__arrow.splide__arrow--prev {
    inset-inline-start: 30px;
}

button.splide__arrow.splide__arrow--next {
    inset-inline-end: 30px;
}

button.splide__arrow.splide__arrow--prev svg {
    transform: scaleX(-1);
}

ul.splide__pagination {
    position: absolute;
    bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
}

ul.splide__pagination button {
    width: 10px;
    height: 10px;
    background: #FFF;
    border-radius: 100px;
    display: block;
    border: none;
    padding: 0;
}

/* 
.splide__track {
    overflow: visible !important
} */

[data-type="360deg"] {
    width: 100%
}

svg.icon {
    aspect-ratio: 1/1;
    display: block;
    width: 100%;
}

.demo-form iframe {
    border: none;
    width: 100%;
    min-height: 200px;
}

.select-form {
    display: none;
}

video.demo-video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.splide__slide,
.splide__slide * {
    min-width: 0;
    box-sizing: border-box;
}

.grid.wrapper {
    align-items: stretch;
}

.grid-item {
    height: 100%;
}

[data-type="block"] {
    height: 100%;
}

/* ───────────────────────────────────────────────────────────────────────
 * [PHASE-EC embed-code · 2026-04-25] Embed Code element.
 *
 * Two states:
 *   1. Empty (just-dragged, no code yet)
 *      → :empty::before renders a placeholder hint so authors can find it.
 *   2. Populated (user pasted code)
 *      → div carries the user's HTML — placeholder disappears via :empty
 *        selector no longer matching.
 *
 * In the published HTML, the user's code is baked in at save time. The
 * :empty pseudo never matches (because the content is in the DOM from
 * page parse), so visitors NEVER see the placeholder. It's editor-only.
 *
 * Rollback: Agent/embed-code-feature.md §5
 * ─────────────────────────────────────────────────────────────────────── */
/* [PHASE-EC embed-code · 2026-05-13] Force the .element wrapper to take
   full page-content width. This mirrors what demo.css does for every other
   block element (container, grid, iframe, slideshow, …) in its big
   width:100% rule at line ~86. embed-code wasn't in that rule because we
   add the type retroactively from this feature module — kept here so the
   rollback (delete this block) takes the rule with it.

   Without this, the .element wrapper collapses to the intrinsic width of
   its child (an iframe with no intrinsic width ≈ 300px), and Tailwind
   inside the srcdoc sees a mobile viewport, applying mobile breakpoints
   to a page meant to be seen at desktop width. */
.element[data-type="embed-code"] {
    width: 100%;
}

.demo-embed-code {
    width: 100%;
    /* Min-height comes from the inline style applied by the default
       stylesObj["embed-code"] (100px). Tweakable per-instance from the
       Properties panel like any other element. */
}

/* User-pasted snippets that contain an <iframe> (YouTube, Calendly, etc.)
   render their iframe as a child of .demo-embed-code. Default it to full
   width + block display to neutralize the inline-iframe baseline gap.
   Specific embeds can override via inline style or their own CSS. */
.demo-embed-code > iframe {
    width: 100%;
    display: block;
    border: 0;
}

/* [PHASE-EC embed-code · 2026-05-13 auto-fullwidth] Full HTML documents
   automatically break out of any constraining parent container.
   ─────────────────────────────────────────────────────────────────────
   When the user drags an embed-code element INSIDE a container (which
   most users do — the builder UI encourages it), the container's
   max-width (typically 960px–1240px) clips the AI-generated landing
   page into a centered column. AI vibe-coded pages are designed for
   full viewport width — they look broken in narrow columns.

   This rule detects "the embed contains a full HTML doc" via the
   presence of `.embed-code-doc-wrapper` (only created by the full-doc
   branch in code()), and applies the classic "full-bleed" CSS trick:

     width: 100vw                      → element fills the entire viewport
     margin-left: calc(50% - 50vw)     → shifts left to viewport's left edge
     margin-right: calc(50% - 50vw)    → mirror on the right

   The math: when a centered container has parent.left = (vw - parent.w)/2,
   adding `margin-left: 50% - 50vw` to a child puts the child's left edge
   at exactly 0 in the viewport — regardless of how many nested containers
   are in the way. Same trick used by Webflow's "Full-bleed" component,
   Tailwind's `w-screen` plus margin tricks, and most modern CSS frameworks.

   This kicks in ONLY for full-doc mode (presence of doc-wrapper). Snippet
   mode (innerHTML directly into target) stays respectful of its parent,
   so widget embeds like Calendly still fit inside the container the user
   dragged them into.

   Editor canvas is unaffected (we render a placeholder, not the doc-wrapper). */
.demo-embed-code:has(.embed-code-doc-wrapper) {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    position: relative;
    /* Containment: clip anything inside the embed that overflows horizontally,
       so a stray fixed-width div in the user's AI page can't break the host
       page's layout. `contain: layout style` also stops the user's
       transforms / animations / counters from affecting elements outside
       the embed. `isolation: isolate` creates a new stacking context so the
       user's z-index battles stay inside. */
    overflow-x: hidden;
    contain: layout style;
    isolation: isolate;
}

/* Prevent horizontal scrollbar when a fullwidth embed exists on the page.
   The negative-margin trick above would otherwise push the page wider
   than its host content area in some layouts. `:has()` is supported by
   Chrome 105+/Firefox 121+/Safari 15.4+ — covers ~98% of modern browsers.
   We also apply it on <html> as a fallback for layouts that put the
   scrollbar there instead of on <body>. */
body:has(.demo-embed-code .embed-code-doc-wrapper),
html:has(.demo-embed-code .embed-code-doc-wrapper) {
    overflow-x: hidden;
}

/* [PHASE-EC embed-code · 2026-05-13 architectural fix] The earlier
   `.demo-embed-code .container { revert }` resets are no longer needed.
   Builder CSS for `.container`, `.wrapper`, `.element`, `.page-wrapper`,
   `.page-content`, and `.container.wrapper` is now scoped with
   `:not(.demo-embed-code *)` at its source — those rules naturally don't
   match user content inside an embed-code block, so no reset required.
   This mirrors how GHL and Webflow scope their builder CSS at the source
   to prevent collisions with user-pasted code. */

/* [PHASE-EC embed-code · 2026-05-13] Editor canvas placeholder.
   This is the visual the AUTHOR sees in the builder while they're
   editing — NOT what visitors see. The visitor's published page renders
   the user's actual iframe srcdoc (full-doc) or innerHTML (snippet).
   Detection lives in properties.js::code() — looks for the demo iframe's
   pathname `/builder/website_demo`. */
.embed-code-editor-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 28px 20px;
    min-height: 140px;
    background: repeating-linear-gradient(
        45deg,
        #f8fafc,
        #f8fafc 8px,
        #f1f5f9 8px,
        #f1f5f9 16px
    );
    border: 2px dashed #6366f1;
    border-radius: 10px;
    color: #475569;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    text-align: center;
    box-sizing: border-box;
}
.embed-code-editor-placeholder .embed-code-icon {
    width: 32px;
    height: 32px;
    color: #6366f1;
    opacity: 0.85;
}
.embed-code-editor-placeholder strong {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: 0.02em;
}
.embed-code-editor-placeholder .embed-code-meta {
    font-size: 12px;
    color: #64748b;
}
.embed-code-editor-placeholder .embed-code-sample {
    display: inline-block;
    max-width: min(90%, 480px);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    color: #475569;
    background: #ffffff;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    direction: ltr;
}
.embed-code-editor-placeholder em {
    font-size: 11px;
    font-style: normal;
    color: #94a3b8;
    margin-top: 2px;
}

.demo-embed-code:empty::before {
    content: "Embed Code — paste a snippet OR a full HTML page in the Properties panel";
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    padding: 24px 16px;
    background: repeating-linear-gradient(
        45deg,
        #f8fafc,
        #f8fafc 8px,
        #f1f5f9 8px,
        #f1f5f9 16px
    );
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    color: #64748b;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    box-sizing: border-box;
}

/* Make the property-pane textarea behave like a code editor: monospace
   font, no autocorrect underlines, horizontal scroll on long lines.
   Scoped to .embed-code-textarea so other textareas (Success Message,
   Pixel snippet, etc.) keep their normal text styling. */
textarea.embed-code-textarea {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 12.5px;
    line-height: 1.55;
    tab-size: 2;
    white-space: pre;
    overflow-wrap: normal;
    overflow-x: auto;
    min-height: 240px;
}

/* [PHASE-EC embed-code · 2026-05-13] Full-document mode wrappers.
   When the user pastes a complete HTML document (with <!DOCTYPE>/<html>),
   the code() handler strips the outer wrappers and builds these two
   internal divs. They MUST NOT add any layout / box-model styling — the
   user's pasted CSS owns the look. We only neutralize the wrapper so it
   inherits the visual width/height of the parent embed-code block. */
.embed-code-doc-wrapper {
    width: 100%;
    /* min-width prevents the wrapper from shrinking below its content
       when the parent has fluid width. */
    min-width: 0;
    /* Reset inherited text-align so the user's <body> styles apply
       freshly without leakage from the surrounding builder section. */
    text-align: initial;
}
.embed-code-doc-wrapper .embed-code-body {
    width: 100%;
    min-width: 0;
}