@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');

:root {
    font-family: 'DM Sans', sans-serif;
    color: #26332f;
    background: #e9eee9;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    --ink: #26332f;
    --muted: #58655f;
    --line: #c5d0ca;
    --accent: #326054;
    --surface: #f7f8f4;
    --mono: 'DM Mono', monospace
}

* {
    box-sizing: border-box
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden
}

.realtor-demo-page {
    min-width: 320px;
    background: #e9eee9
}

.realtor-loading {
    margin: 20px;
    color: var(--muted);
    font-size: 13px
}

.realtor-toolbar {
    position: relative;
    z-index: 5;
    display: flex;
    min-height: 78px;
    align-items: flex-end;
    gap: 8px 12px;
    padding: 10px 12px 9px;
    background: #26332f;
    color: #f6f5ef;
    box-shadow: 0 5px 18px rgba(20, 30, 26, .15)
}

.realtor-home {
    display: inline-flex;
    width: 77px;
    height: 38px;
    flex: 0 0 77px;
    align-items: center;
    justify-content: center;
    border: 1px solid #77847d;
    color: #fff;
    font-size: 12px;
    text-decoration: none
}

.realtor-control {
    display: flex;
    min-width: 0;
    flex: 1 1 130px;
    flex-direction: column;
    gap: 4px;
    color: #d3dbd4;
    font-size: 11px
}

.realtor-control>span {
    min-height: 14px;
    line-height: 1.1
}

.realtor-control input,
.realtor-control select {
    width: 100%;
    min-width: 0;
    height: 38px;
    min-height: 38px;
    padding: 0 9px;
    border: 1px solid #829087;
    border-radius: 0;
    background: #f7f8f4;
    color: #25332e;
    font: 12px 'DM Sans', sans-serif
}

.realtor-design {
    flex: 1.2 1 180px
}

.realtor-color {
    flex: 0 1 96px
}

.realtor-settings {
    position: relative;
    flex: 0 0 auto
}

.realtor-settings summary {
    display: flex;
    width: 121px;
    height: 38px;
    min-height: 38px;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    padding: 0 11px;
    border: 1px solid #87938c;
    list-style: none;
    color: #fff;
    font-size: 12px;
    cursor: pointer
}

.realtor-settings summary::-webkit-details-marker {
    display: none
}

.realtor-settings summary::after {
    content: '+';
    font: 700 16px/1 'DM Sans', sans-serif
}

.realtor-settings[open] summary::after {
    content: '−'
}

.realtor-settings-panel {
    position: absolute;
    top: calc(100% + 9px);
    right: 0;
    z-index: 9;
    display: grid;
    width: min(780px, calc(100vw - 24px));
    max-width: 100%;
    max-height: 70dvh;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    overflow: auto;
    padding: 16px clamp(12px, 2vw, 28px) 20px;
    border: 1px solid #45534c;
    background: #26332f;
    box-shadow: 0 14px 35px rgba(15, 25, 20, .28);
    box-sizing: border-box
}

.realtor-settings-panel .realtor-control {
    align-self: start
}

.realtor-settings-panel .realtor-control input,
.realtor-settings-panel .realtor-control textarea {
    background: #f7f8f4;
    color: #25332e
}

.realtor-settings-panel .realtor-control textarea {
    height: 94px;
    min-height: 94px;
    padding: 8px;
    resize: vertical;
    font: 11px/1.45 'DM Mono', monospace
}

.realtor-settings-panel .realtor-control-wide {
    grid-column: 1/-1
}

.realtor-settings-note {
    grid-column: 1/-1;
    margin: 0;
    color: #e0e7df;
    text-align: center;
    font-size: 11px;
    line-height: 1.4
}

.realtor-frame-wrap {
    height: calc(100dvh - var(--toolbar-height, 78px));
    min-height: 0;
    background: #fff
}

.realtor-wordpress-preview {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff
}

.realtor-design:focus-visible,
.realtor-settings summary:focus-visible,
.realtor-home:focus-visible,
.realtor-control input:focus-visible,
.realtor-control select:focus-visible,
.realtor-control textarea:focus-visible {
    outline: 2px solid #c3e5be;
    outline-offset: 2px
}

.realtor-toolbar input[type=color] {
    padding: 3px
}

.realtor-control input[type=color]::-webkit-color-swatch-wrapper {
    padding: 0
}

.realtor-control input[type=color]::-webkit-color-swatch {
    border: 0
}

.realtor-demo-error {
    margin: 22px;
    padding: 16px;
    background: #fff;
    color: #622e2b;
    font-size: 13px
}

@media(max-width:900px) {
    .realtor-toolbar {
        min-height: 112px;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 7px 9px;
        padding: 8px 10px 7px
    }

    .realtor-home {
        width: 67px;
        flex-basis: 67px;
        height: 36px
    }

    .realtor-control {
        flex: 1 1 140px;
        font-size: 10px
    }

    .realtor-design {
        flex: 1 1 180px
    }

    .realtor-business,
    .realtor-agent {
        flex: 1 1 135px
    }

    .realtor-phone {
        flex: 1 1 125px
    }

    .realtor-control input,
    .realtor-control select {
        height: 36px;
        min-height: 36px;
        font-size: 11px
    }

    .realtor-settings summary {
        width: 118px;
        height: 36px;
        min-height: 36px;
        font-size: 11px
    }

    .realtor-settings-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: 62dvh;
        padding: 12px
    }
}

@media(max-width:520px) {
    .realtor-toolbar {
        min-height: 160px;
        gap: 6px 8px;
        padding: 7px 8px 8px
    }

    .realtor-home {
        width: 62px;
        flex-basis: 62px;
        height: 34px;
        font-size: 11px
    }

    .realtor-design {
        flex: 1 1 calc(100% - 70px)
    }

    .realtor-color {
        flex: 0 0 78px
    }

    .realtor-business,
    .realtor-agent,
    .realtor-phone {
        flex: 1 1 calc(33.333% - 8px)
    }

    .realtor-control input,
    .realtor-control select {
        height: 34px;
        min-height: 34px;
        padding-inline: 7px;
        font-size: 10px
    }

    .realtor-control>span {
        font-size: 9px
    }

    .realtor-settings summary {
        width: 108px;
        height: 34px;
        min-height: 34px;
        padding-inline: 8px;
        font-size: 10px
    }

    .realtor-settings-panel {
        right: 0;
        width: calc(100vw - 16px);
        max-width: none;
        max-height: 65dvh;
        gap: 9px
    }

    .realtor-settings-panel .realtor-control textarea {
        height: 86px;
        min-height: 86px
    }

    .realtor-settings-note {
        font-size: 10px
    }
}

@media(max-width:360px) {
    .realtor-toolbar {
        min-height: 174px
    }

    .realtor-business,
    .realtor-agent,
    .realtor-phone {
        flex-basis: calc(50% - 8px)
    }

    .realtor-settings summary {
        width: 102px;
        padding-inline: 7px;
        font-size: 9px
    }
}

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

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition: none !important
    }
}