/* =========================================================
   Page Builder Stylesheet
   Sections:
   1. Wrapper & Selection
   2. Toolbar
   3. Forms & Inputs
   4. Popup
   5. Canvas & Empty State
   6. Root Hover UI
   7. Builder Spacing
   8. Empty Box & Empty Button
   9. Icons & Utilities
   10. BEM Aliases (compatibility)
   ========================================================= */

:root {
    --dc-pb-toolbar-bg: #ffffff;
    --dc-pb-divider: #e6e8eb;
    --dc-pb-focus-outline: #409cff;
    --dc-pb-text: #0f172a;      /* default text color */
    --dc-pb-muted: #4a4f55;     /* muted labels/units/icons */
    --dc-pb-input-border: #c6ccd3;
    --success-color: #06c349;
    --error-color: #dd0707;
    --warning-color: #dd6007;


    /**
    DC
     */
    --dcui-body-color: #5f6368;
    --dcui-primary-color: #0097ff;
    --dcui-secondary-color: #0670b9;
    --dcui-line-color: #c8c8c8;
    --dcui-grid-gutter: 15px;
    --dcui-field-radius: 5px;
    --dcui-field-height: 35px;
    --dcui-success-color: #6BA162;
    --dcui-danger-color: #cf4747;
    --dcui-warning-color: #ffa434;
}

.dc-pb-edit-tab {
    position: absolute;
    top: -26px;
    left: -2px;
    background: var(--dc-pb-focus-outline);
    color: #fff;
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 4px 4px 0 0;
    font-weight: 600;
    pointer-events: none;
    white-space: nowrap;
}

/* ===== 1. Wrapper & Selection ===== */
/* Clickable wrapper around any selectable element in the builder */
.dc-pb-wrapper {
    position: relative;
    display: inline-block;
    overflow: visible;

    padding: 4px;
    border-radius: 2px;

    transition: box-shadow .15s ease;
}

/* Selection/focus outlines follow the same visual language */
.dc-pb-wrapper.focused {
    outline: 3px solid var(--dc-pb-focus-outline);
    outline-offset: 2px;
}

.dc-pb-wrapper:hover {
    outline: 3px solid var(--dc-pb-focus-outline);
}

/* Selection outline box that hugs the target element */
.dc-pb-selection-box {
    position: absolute;
    inset: 0;

    box-sizing: border-box;
    border: 4px solid #2684ff;  /* Atlassian blue */
    border-radius: 0;           /* squared corners (classic look) */
    outline: none;

    pointer-events: none;
    z-index: 2000;
}

/* Handles (blue square 18x18 with white inset) */
.dc-pb-handle {
    position: absolute;
    width: 18px;
    height: 18px;

    background: #2684ff;
    border-radius: 2px;         /* subtle rounding to avoid jagged edges */
    box-shadow: none;

    pointer-events: none;       /* set to `auto` if you’ll make them interactive */
    z-index: 2010;
}

/* Inset white square even if markup lacks an .inner element */
.dc-pb-handle::after {
    content: "";
    position: absolute;
    inset: 4px;                 /* white inset margin */

    background: #fff;
    border-radius: 1px;
}

/* If markup DOES include `.inner`, style it to match the classic look */
.dc-pb-handle .inner {
    display: block;
    width: 100%;
    height: 100%;

    box-sizing: border-box;
    margin: 4px;                /* same 4px inset as ::after */

    background: #fff;
    border-radius: 1px;
}

/* Handle positions */
.dc-pb-handle.top-left     { top: -5px; left:  -5px; }
.dc-pb-handle.top-right    { top: -5px; right: -5px; }
.dc-pb-handle.bottom-left  { bottom: -5px; left:  -5px; }
.dc-pb-handle.bottom-right { bottom: -5px; right: -5px; }

/* Hover variant for overlays (softer, dashed alternative could be added) */
.dc-pb-overlay.is-hover .dc-pb-selection-box {
    outline-color: #3b82f6;
}

/* Optional hover label shown above element */
.dc-pb-hover-label {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-100%);

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

    padding: 6px 8px;
    border-radius: 7px 7px 0 0;
    box-shadow: 0 6px 18px rgba(0,0,0,.15);

    background: #3b82f6;
    color: #fff;

    font-size: 12px;
    line-height: 1;

    pointer-events: none;
}

/* =====  Nav Tool Bar ===== */
.dc-pb-navbar-spacer {
    height: 70px; /* Height of the fixed navbar */
}
/* dcPbNavToolBar Component Styles */
.dc-pb-nav-toolbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: #eeeeee;
    border-bottom: 1px solid #e3e3e3;
    z-index: 35;
}

.dc-pb-nav-toolbar__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    height: 56px;
    box-sizing: border-box;
}

.dc-pb-nav-toolbar__left {
    display: flex;
    align-items: center;
}

.dc-pb-nav-toolbar__center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    color: #464646;
    font-size: 14px;
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

.dc-pb-nav-toolbar__right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Exit Button */
.dc-pb-nav-toolbar__exit {
    background: none;
    border: none;
    color: #464646;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

.dc-pb-nav-toolbar__exit:hover {
    background-color: #d8d8d8;
}

.dc-pb-nav-toolbar__exit:active {
    background-color: #d8d8d8;
}

/* Primary Button (Update) */
.dc-pb-nav-toolbar__btn {
    background: none;
    border: 1px solid #555555;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 16px;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    min-width: 80px;
}

.dc-pb-nav-toolbar__btn--primary {
    background: #47A0E7;
    border: 1px solid #47A0E7;
    color: #ffffff;
}

.dc-pb-nav-toolbar__btn--primary:hover:not(:disabled) {
    background: #3185d3;
    border-color: #3185d3;
}

.dc-pb-nav-toolbar__btn--primary:active:not(:disabled) {
    background: #3185d3;
    border-color: #3185d3;
}

.dc-pb-nav-toolbar__btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.dc-pb-nav-toolbar__btn:disabled:hover {
    background: #3185d3;
    border-color: #3185d3;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .dc-pb-nav-toolbar__bar {
        padding: 8px 16px;
    }

    .dc-pb-nav-toolbar__center {
        font-size: 13px;
    }

    .dc-pb-nav-toolbar__exit,
    .dc-pb-nav-toolbar__btn {
        font-size: 13px;
        padding: 6px 12px;
    }
}


/**
 Nav Tool Bar Mode
 **/
.dc-pb-nav-toolbar__modes {
    display: flex;
    align-items: center;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
}


.dc-pb-nav-toolbar_mode_btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 7px 16px;
    border: none;
    border-right: 1px solid #e5e7eb;
    background: transparent;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 50px;
    min-height: 30px;
    gap: 8px;
    font-family: inherit;
}


.dc-pb-nav-toolbar_mode_btn:last-child {
    border-right: none;
}


.dc-pb-nav-toolbar_mode_btn:hover {
    background: #dcdcdc;
}


.dc-pb-nav-toolbar_mode_btn.is-active {
    background: #f3f4f6;
    color: #6b7280;
    cursor: default;
    opacity: 0.7;
}


.dc-pb-nav-toolbar_mode_btn i {
    font-size: 18px;
}


.dc-pb-nav-toolbar__btn-label {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


/* Device Preview */

.dc-pb-device-stage {
    background: #f5f6f8;
    border: 1px solid #e6e8ec;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    padding: 75px 12px 75px 12px;
    overflow: auto;
}

/* EXACT outer size — this is the size you asked for (375×812) */
.dc-pb-device-outer {
    position: relative;
    display: inline-block;
    /* width/height set inline from props */
}

/* Bezel without affecting content size */
.dc-pb-device-frame {
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: content-box;            /* border won't shrink the inner 100% */
    outline: 12px solid #111;           /* use outline for bezel so width/height stay exact */
    border-radius: 24px;
    box-shadow: 0 8px 30px rgba(0,0,0,.15);
    background: #fff;
}

/* Fight theme/admin resets */
.dc-pb-iframe {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    border: 0;
}



/* ===== 2. Toolbar ===== */
/* Floating toolbar container (position/z-index managed by script) */
.dc-pb-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;

    min-width: 250px;
    padding: 6px 8px;
    border-radius: 7px;

    background: var(--dc-pb-toolbar-bg, #fff);
    color: #101010;
    box-shadow: 0 12px 32px rgba(0,0,0,.12);

    font-size: 14px;
    transition: all 0.2s ease;
}

/* Buttons */
.dc-pb-toolbar__btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    position: relative;
    cursor: pointer;

    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    background: none;

    font: inherit;
    font-size: 18px;

    transition: background .15s ease, transform .12s ease;
}

.dc-pb-toolbar__btn:hover {
    background: rgba(0,0,0,0.08);
}

.dc-pb-toolbar__btn:active {
    transform: translateY(0.5px);
}

.dc-pb-toolbar__btn--active {
    background: rgba(0,0,0,0.04);
}

/* Dropdown/palette popovers anchored to a button */
.dc-pb-toolbar__dropdown,
.dc-pb-toolbar__palette {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;

    min-width: 140px;
    overflow: hidden;

    background: #fff;
    border-radius: 8px;
    box-shadow: 0 24px 48px rgba(0,0,0,.15);

    /* higher than selection overlay (which is usually ~2000) */
    z-index: 2001;
}

/* Dropdown list items */
.dc-pb-toolbar__item {
    padding: 8px 12px;

    white-space: nowrap;
    cursor: pointer;
}

.dc-pb-toolbar__item:hover {
    background: rgba(0,0,0,0.04);
}

/* Color palette */
.dc-pb-toolbar__color-swatch {
    display: inline-block;
    width: 24px;
    height: 24px;

    margin: 4px;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 4px;

    cursor: pointer;
    transition: transform .12s ease;
}

.dc-pb-toolbar__color-swatch:hover {
    transform: scale(1.1);
}

/* Small helpers used by the component */
.dc-pb-toolbar__dropdown-arrow {
    margin-left: 2px;

    font-size: 11px;
    line-height: 1;
    opacity: .75;
}

.dc-pb-toolbar__color-indicator {
    display: inline-block;
    width: 16px;
    height: 16px;

    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 4px;
}

/* ===== 3. Forms & Inputs ===== */
/* Layout for settings forms */
.dc-pb-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px 14px;
}

/* 1 column (basically same as base) */
.dc-pb-form-grid--cols-1 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px 18px;
}

/* 2 columns */
.dc-pb-form-grid--cols-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 14px 18px;
}

/* 3 columns */
.dc-pb-form-grid--cols-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 14px 18px;
}

/* Responsive collapse */
@media (max-width: 920px) {
    .dc-pb-form-grid--cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .dc-pb-form-grid--cols-3,
    .dc-pb-form-grid--cols-2 { grid-template-columns: 1fr; }
}

.dc-pb-section{
    padding-bottom: 20px;
}

.dc-pb-section-title-container{
    margin: 0 0 14px  0;
}

.dc-pb-section-title {
    margin: 2px 0 6px;
    font-weight: 700;
    font-size: 17px;
}

.dc-pb-section-description{
    font-size: 13px;
    color: var(--dc-pb-muted);
    line-height: 1.3;
}

.dc-pb-label {
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 15px;
}

.dc-pb-help {
    margin: 2px 0 8px;
    font-size: 13px;
    color: var(--dc-pb-muted);
    line-height: 1.3;
}


.dc-pb-label-sm {
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 15px;
}

/* Responsive 3-col → 1-col at small screens */
.dc-pb-responsive-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    align-items: end;
}

@media (max-width: 680px) {
    .dc-pb-responsive-grid { grid-template-columns: 1fr; }
}

/* Inputs */
.dc-pb-input,
.dc-pb-textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--dc-pb-input-border) !important;
    border-radius: 8px;
    outline: none;

    color: var(--dc-pb-text);
    background: #fff;
}


.dc-pb-input::placeholder,
.dc-pb-textarea::placeholder {
    color: color-mix(in srgb, var(--dc-pb-text) 45%, #ffffff);  /* subtle placeholder */
}

.dc-pb-input-with-unit {
    display: flex;
    align-items: stretch;
}

.dc-pb-input-with-unit .dc-pb-input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.dc-pb-input-with-unit .dc-pb-unit {
    border: 1px solid var(--dc-pb-input-border);
    border-left: 0;
}

.dc-pb-unit {
    display: inline-flex;
    align-items: center;

    padding: 0 10px;

    border: 1px solid #c6ccd3;
    border-left: 0;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;

    background: #f7f9fb;
    color: var(--dc-pb-muted);
    font-size: 12px;
}

.dc-pb-divider {
    height: 1px;
    background-color: var(--dc-pb-divider);
    margin: 16px 0 6px;
    border: 0;
}

/* Select wrapper */
.dc-pb-select-wrap {
    position: relative;
    display: inline-block;
    width: 100%;
}

/* Match input styling */
.dc-pb-select-wrap .dc-pb-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    width: 100%;
    padding: 8px 36px 8px 10px; /* leave space for chevron */
    border: 1px solid #c6ccd3;
    border-radius: 8px;
    background-color: #fff;

    font-size: 14px;
    color: var(--dc-pb-text);
    cursor: pointer;
    outline: none;

}

/* Chevron icon */
.dc-pb-select-wrap .dc-pb-select-icon {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--dc-pb-muted);
    font-size: 12px;
}

.dc-pb-select-wrap .dc-pb-input {
    border: 1px solid var(--dc-pb-input-border);
}

/* Hover and focus states */
.dc-pb-select-wrap .dc-pb-input:hover {
    border-color: #999;
}

.dc-pb-select-wrap .dc-pb-input:focus {
    border-color: #2684ff;
    box-shadow: 0 0 0 2px rgba(38,132,255,0.15);
}

/* ===== 4. Popup ===== */
/* Dialog overlay + container used for settings, add block, etc. */
.dc-pb-popup__overlay {
    position: fixed;
    inset: 0;

    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px;

    background: rgba(0, 0, 0, 0.4);

    z-index: 1000;
}

.dc-pb-popup__container {
    display: flex;
    flex-direction: column;

    width: 100%;
    max-width: 760px;
    max-height: 90vh;
    overflow: hidden;

    padding: 0; /* ensure header spacing controls vertical rhythm */
    border-radius: 12px;

    background: #fff;
    color: #000000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.dc-pb-popup__header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 30px 30px;

    background: #47A0E7;
    color: #fff;
}

.dc-pb-popup__title {
    margin: 0;
    font-size: 2.25rem;
    font-weight: 600;
}

.dc-pb-popup__close {
    background: none;
    border: none;

    color: #fff;
    font-size: 1.25rem;
    cursor: pointer;
}

/* Tabs container */
.dc-pb-popup__tabs {
    display: flex;
    align-items: center;
    gap: 6px;

    margin: 0;
    padding:0 12px;          /* tighter bar */
    list-style: none;

    background: #47A0E7;         /* header blue */
    color: #fff;

    /* when many tabs, allow horizontal scroll without ugly scrollbar */
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;        /* Firefox */
}

.dc-pb-popup__tabs::-webkit-scrollbar { display: none; } /* Chromium */

/* Base tab chip */
.dc-pb-popup__tab {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 6px 6px 0 0;
    font-weight: 600;
    font-size: 18px;
    background: transparent;                 /* important */
    color: rgba(255,255,255,0.9);
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease, transform .1s ease;
}

.dc-pb-popup__body {
    --dc-pb-input-border: #b6c2cf;
    color: var(--dc-pb-text);
    flex: 0 0 auto;              /* don't stretch */
    height: 50vh;             /* choose a comfortable fixed height */
    overflow-y: auto;
    padding: 35px 24px 24px;
}

.dc-pb-popup__footer {
    display: flex;
    justify-content: flex-end;
    gap: 1.5rem;

    padding: 1rem;
    border-top: 1px solid #eee;
}

.dc-pb-btn-cancel {
    padding: 1rem 3rem;

    background: #eee;
    color: #000000;

    border: none;
    border-radius: 4px;

    cursor: pointer;
}

.dc-pb-btn-cancel:hover { background: #e5e7eb; }

.dc-pb-btn-save {
    padding: 1rem 3rem;

    background: #47A0E7;
    color: #fff;

    border: none;
    border-radius: 4px;

    cursor: pointer;
}

.dc-pb-btn-save:hover   { filter: brightness(1.05); }


.dc-pb-popup__tabs::-webkit-scrollbar { display: none; }/* Chromium */

.dc-pb-popup__tab:hover {
    background: rgba(255,255,255,0.12);
}

/* Hover only for inactive tabs (prevents active turning blue) */
.dc-pb-popup__tab:not(.dc-pb-popup__tab--active):hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
}

/* Active tab “card” that sits on top of the white body */
.dc-pb-popup__tab.dc-pb-popup__tab--active,
.dc-pb-popup__tab.dc-pb-popup__tab--active:hover {
    background: #fff !important;
    color: #0f172a !important;
    border: 1px solid #ddd;
    border-bottom: none;
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
}


/*!* Settings popup *!*/
/*.dc-pb-add-element-container{*/
/*    display: grid;*/
/*    grid-template-columns: 220px 1fr;*/
/*    gap: 16px;*/
/*    min-height: 360px;*/
/*    height: 64vh;*/
/*    overflow: hidden;*/
/*    padding: 14px 16px 18px;*/
/*}*/

/*.dc-pb-add__rail{*/
/*    display: grid;*/
/*    grid-template-columns: 220px 1fr;*/
/*    gap: 16px;*/
/*    min-height: 360px;*/
/*    height: 64vh;*/
/*    overflow: hidden;*/
/*    padding: 14px 16px 18px;*/
/*}*/

/*.dc-pb-add__group{*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: space-between;*/
/*    gap: 8px;*/
/*    width: 100%;*/
/*    padding: 8px 10px;*/
/*    border-radius: 8px;*/
/*    background: transparent;*/
/*    border: 0;*/
/*    cursor: pointer;*/
/*    text-align: left;*/
/*}*/

/*.dc-pb-add__group-label { color: #0f172a; }*/
/*.dc-pb-add__group-count { opacity: .6; }*/

/*!* right pane *!*/
/*.dc-pb-add__content {*/
/*    min-width: 0;               !* allow grid child to shrink properly *!*/
/*    height: 100%;*/
/*    overflow-y: auto;           !* scroll only here *!*/
/*    -webkit-overflow-scrolling: touch;*/
/*}*/
/*.dc-pb-add__head {*/
/*    display: flex; align-items: center; gap: 12px;*/
/*    margin-bottom: 12px;*/
/*}*/
/*.dc-pb-add__title { font-weight: 700; font-size: 16px; }*/
/*.dc-pb-add__search { margin-left: auto; width: 300px; max-width: 50%; }*/
/*.dc-pb-add__search .dc-pb-input {*/
/*    height: 36px;*/
/*}*/

/*!* grid + card *!*/
/*.dc-pb-add__grid {*/
/*    display: grid;*/
/*    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));*/
/*    gap: 12px;*/
/*}*/
/*.dc-pb-card {*/
/*    text-align: left;*/
/*    padding: 12px;*/
/*    border: 1px solid #e3e6ea;*/
/*    border-radius: 10px;*/
/*    background: #fff;*/
/*    box-shadow: 0 1px 2px rgba(0,0,0,.04);*/
/*    cursor: pointer;*/
/*    transition: box-shadow .15s ease, transform .06s ease, border-color .15s ease;*/
/*}*/
/*.dc-pb-card:hover { box-shadow: 0 8px 18px rgba(0,0,0,.12); transform: translateY(-1px); }*/
/*.dc-pb-card.is-selected {*/
/*    border-color: #1e88e5;*/
/*    box-shadow: 0 0 0 3px rgba(30,136,229,.15);*/
/*}*/

/*.dc-pb-card__preview {*/
/*    height: 110px;*/
/*    display: grid; place-items: center;*/
/*    border: 1px dashed #d7dbe0;*/
/*    border-radius: 8px;*/
/*    margin-bottom: 8px;*/
/*    color: #b8bec6;*/
/*}*/
/*.dc-pb-card__preview img { max-height: 90px; max-width: 100%; }*/
/*.dc-pb-card__plus { font-size: 28px; opacity: .5; }*/

/*.dc-pb-card__title { font-weight: 700; margin-bottom: 2px; color: #1d2430; }*/
/*.dc-pb-card__slug  { font-size: 12px; color: #667; }*/

/*!* responsive *!*/
/*@media (max-width: 920px) {*/
/*    .dc-pb-add { grid-template-columns: 200px 1fr; }*/
/*}*/
/*@media (max-width: 640px) {*/
/*    .dc-pb-add { grid-template-columns: 1fr; }*/
/*    .dc-pb-add__rail { display: none; }*/
/*    .dc-pb-add__search { width: 100%; max-width: 100%; }*/
/*}*/

/* -------- Add Element layout -------- */
.dc-pb-popup--add.dc-pb-popup__container { max-width: 1200px; }
.dc-pb-popup--add .dc-pb-popup__body { padding: 0; overflow: hidden; height: 50vh; }

/* two‑pane layout */
.dc-pb-add-element-container {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 16px;
    min-height: 360px;
    height: 64vh;
    overflow: hidden;
    padding: 14px 16px 18px;
}

/* left rail */
.dc-pb-add__rail {
    border-right: 1px solid #e9eef3;
    padding-right: 12px;
    overflow: auto;
}
.dc-pb-add__group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    margin-bottom: 5px;
}
.dc-pb-add__group:hover { background: #eef5ff; }
.dc-pb-add__group.is-active { background: #e6f0ff; font-weight: 700; }
.dc-pb-add__group-label { color: #0f172a; }
.dc-pb-add__group-count { opacity: .6; }

/* right pane */
.dc-pb-add__content { overflow: auto; }
.dc-pb-add__head {
    display: flex; align-items: center; gap: 12px;
    margin: 10px 0 20px;
}
.dc-pb-add__title { font-weight: 700; font-size: 16px; }
.dc-pb-add__search { margin-left: auto; width: 300px; max-width: 50%; }
.dc-pb-add__search .dc-pb-input {
    height: 36px;
}

/* grid + card */
.dc-pb-add__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 15px;
}
.dc-pb-card {
    text-align: left;
    padding: 12px;
    border: 1px solid #e3e6ea;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    cursor: pointer;
    transition: box-shadow .15s ease, transform .06s ease, border-color .15s ease;
}
.dc-pb-card:hover { box-shadow: 0 8px 18px rgba(0,0,0,.12); transform: translateY(-1px); }
.dc-pb-card.is-selected {
    border-color: #1e88e5;
    box-shadow: 0 0 0 3px rgba(30,136,229,.15);
}

.dc-pb-card__preview {
    height: 110px;
    display: grid; place-items: center;
    border: 1px dashed #d7dbe0;
    border-radius: 8px;
    margin-bottom: 8px;
    color: #b8bec6;
}
.dc-pb-card__preview img { max-height: 90px; max-width: 100%; }
.dc-pb-card__plus { font-size: 28px; opacity: .5; }

.dc-pb-card__title { font-weight: 700; margin-bottom: 2px; color: #1d2430; }
.dc-pb-card__slug  { font-size: 12px; color: #667; }

/* responsive */
@media (max-width: 920px) {
    .dc-pb-add { grid-template-columns: 200px 1fr; }
}
@media (max-width: 640px) {
    .dc-pb-add { grid-template-columns: 1fr; }
    .dc-pb-add__rail { display: none; }
    .dc-pb-add__search { width: 100%; max-width: 100%; }
}



/* Optional: micro “press” feedback */
.dc-pb-popup__tab:active { transform: translateY(0.5px); }

/* ===== 5. Canvas & Empty State ===== */
/* Canvas sizing & padding vars */
.dc-pb-canvas {
    --pb-canvas-pad-x: 12px;
    --pb-canvas-pad-y: 12px;
    --pb-btn-h: 40px;
    --pb-outline-width: 2px;
    --pb-rail-overhang: 10px;

    position: relative;
    overflow: visible;

    /* room for hover pills (only matters in non-empty) */
    padding-top: calc(var(--pb-canvas-pad-y) + var(--pb-btn-h) / 2 + var(--pb-rail-overhang));
    padding-bottom: calc(var(--pb-canvas-pad-y) + var(--pb-btn-h) / 2 + var(--pb-rail-overhang));
    padding-left: var(--pb-canvas-pad-x);
    padding-right: var(--pb-canvas-pad-x);
}

.dc-pb-page-guard{
    overflow: hidden;
}

/* ===== EMPTY STATE ===== */
.dc-pb-canvas.is-empty {
    /* remove extra space reserved for pills */
    padding: 0;
}

.dc-pb-empty {
    min-height: 320px;                   /* adjust to taste */
    border: 2px dashed #5aa1d6;
    border-radius: 10px;
    display: grid;
    place-items: center;                 /* center the button */
    background: transparent;
}

.dc-pb-empty-btn {
    height: var(--pb-btn-h);
    line-height: calc(var(--pb-btn-h) - 2px);
    padding: 0 16px;
    font-weight: 700;
    font-size: 13px;
    border-radius: 4px;
    border: 1px solid #2f7ec5;
    background: #4aa3ff;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
    cursor: pointer;
    transition: filter .15s ease, transform .06s ease;
}
.dc-pb-empty-btn:hover { filter: brightness(1.06); }
.dc-pb-empty-btn:active { transform: scale(.98); }

/* ===== 6. Root Hover UI ===== */
/* NON-EMPTY (hover outline + pills) */
.dc-pb-root-ui {
    --pb-outline-color: #5aa1d6;
    --pb-outline-radius: 10px;

    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
    z-index: 30;
}
.dc-pb-canvas:hover > .dc-pb-root-ui { opacity: 1; }

.dc-pb-root-outline {
    position: absolute;
    inset: 0;
    border: var(--pb-outline-width) dashed var(--pb-outline-color);
    border-radius: var(--pb-outline-radius);
    box-sizing: border-box;
    opacity: .9;
}

/* Pills on top/bottom edges */
.dc-pb-root-btn {
    position: absolute;
    left: 50%;
    pointer-events: auto;
    height: var(--pb-btn-h);
    line-height: calc(var(--pb-btn-h) - 2px);
    padding: 0 14px;
    font-weight: 700;
    font-size: 13px;
    border-radius: 4px;
    border: 1px solid #2f7ec5;
    background: #4aa3ff;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
    cursor: pointer;
    transition: filter .15s ease, transform .06s ease;
    transform: translateX(-50%);
    z-index: 1;
}
.dc-pb-root-btn--top    { top: 0;    transform: translate(-50%, calc(-50% - var(--pb-outline-width)/2)); }
.dc-pb-root-btn--bottom { bottom: 0; transform: translate(-50%, calc( 50% + var(--pb-outline-width)/2)); }
.dc-pb-root-btn:hover { filter: brightness(1.06); }
.dc-pb-root-btn--top:active    { transform: translate(-50%, calc(-50% - var(--pb-outline-width)/2)) scale(.98); }
.dc-pb-root-btn--bottom:active { transform: translate(-50%, calc( 50% + var(--pb-outline-width)/2)) scale(.98); }

/* Optional: hide hover UI whenever a block is hovered/selected (from earlier) */
.dc-pb-canvas:has([data-node-id]:hover) > .dc-pb-root-ui,
.dc-pb-canvas:has(.dc-pb-selection-overlay--active) > .dc-pb-root-ui { opacity: 0 !important; }

/* Hover bands that own the reveal */
.dc-pb-root-zone {
    position: absolute;
    left: 0; right: 0;
    height: 40px;            /* sensitivity band; adjust to taste */
    pointer-events: auto;    /* so the band can receive hover/click */
}

.dc-pb-root-zone--top    { top: 0; }
.dc-pb-root-zone--bottom { bottom: 0; }

/* Hide buttons by default; only the hovered zone shows its button */
.dc-pb-root-zone .dc-pb-root-btn {
    left: 50%;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease, visibility 0s linear .15s;
}

.dc-pb-root-zone:hover .dc-pb-root-btn {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

/* Center on the dashed line (midline = border-width/2) */
.dc-pb-root-zone--top .dc-pb-root-btn {
    top: calc(var(--pb-outline-width) / 2);
    transform: translate(-50%, -50%);   /* center vertically on the border */
}

.dc-pb-root-zone--bottom .dc-pb-root-btn {
    bottom: calc(var(--pb-outline-width) / 2);
    transform: translate(-50%, 50%);    /* center vertically on the border */
}

/* ===== 7. Builder Spacing ===== */
.dc-pb-builder{
    padding-bottom: 50px;
}

/* ===== 8. Empty Box & Empty Button ===== */
/* Base empty box */
.dc-pb-empty-box {
    margin: 24px;
    padding: 40px;
    border: 2px dashed rgba(120, 130, 140, 0.5);
    border-radius: 4px;
    background: rgba(120, 130, 140, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Layout flavor (rows/columns) → blue */
.dc-pb-empty-box--layout {
    border-color: rgba(30, 136, 229, 0.7);
    background: rgba(30, 136, 229, 0.06);
}

/* Optional hover affordance */
.dc-pb-empty-box:hover {
    filter: brightness(1.02);
}

/* Button look aligns with your existing .dc-pb-btn */
.dc-pb-empty-box .dc-pb-btn {
    font-weight: 600;
    cursor: pointer;
    background: #47A0E7;
    color: #fff;
    border: none;
    padding: 1rem 3rem;
    border-radius: 4px;
}

/* ===== Data Loader ===== */

.data-loader {
    display: inline-block;
    height: 9px;
    width: 54px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);

}

.data-loader div {
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
    background: var(--dcui-primary-color);
    border-radius: 50%;
    height: 8px;
    position: absolute;
    top: 0;
    width: 8px;
}

.data-loader-wrap.data-loader-transparent.data-loader {
    background: transparent;
}

.data-loader div:nth-child(1) {
    animation: data-loader1 0.6s infinite;
    left: 5px;
}

.data-loader div:nth-child(2) {
    animation: data-loader2 0.6s infinite;
    left: 5px;
}

.data-loader div:nth-child(3) {
    animation: data-loader2 0.6s infinite;
    left: 23px;
}

.data-loader div:nth-child(4) {
    animation: data-loader3 0.6s infinite;
    left: 41px;
}

.data-loader-wrap {
    border-radius: 5px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: rgb(255, 255, 255);

}

@keyframes data-loader1 {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes data-loader3 {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

@keyframes data-loader2 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(18px, 0);
    }
}

/* ===== Notifier ===== */

.dcui-response-notice {
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 99999;
    background-color: #fff;
    border-radius: var(--dcui-field-radius);
    text-align: left;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.10);
    padding: 15px 15px 13px;
    width: 320px;
    max-width: 320px;
    border-left: 15px solid var(--dcui-body-color);
    cursor: default;
}
.dcui-response-notice .dcui-rn-message {
    padding-right: 30px;
    font-weight: 500;
    font-size: inherit;
    line-height: 1.3;
}
.dcui-response-notice .dcui-rn-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    text-align: center;
}
.dcui-response-notice svg.dcui-rn-timer {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    transform: rotateY(-180deg) rotateZ(-90deg);
}
.dcui-response-notice svg.dcui-rn-timer circle {
    stroke-dasharray: 90px;
    stroke-dashoffset: 0px;
    stroke-linecap: square;
    stroke-width: 3px;
    stroke: var(--dcui-body-color);
    fill: none;
    animation: dcui-timer-countdown-spin 5s linear 1 forwards;
}
.dcui-response-notice .dcui-rn-actions .dcui-rn-dismisser{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 23px;
    height: 23px;
    line-height: 23px;
    background-color: #ddd;
    border-radius: 100%;
    text-align: center;
    cursor: pointer;
    transform: translate(-50%, -50%);
}
.dcui-response-notice .dcui-rn-actions .dcui-rn-dismisser:hover{
    background-color: #d5d5d5;
}

.dcui-response-notice.success {
    border-left-color: var(--dcui-success-color);
}
.dcui-response-notice.error {
    border-left-color: var(--dcui-danger-color);
}
.dcui-response-notice.warning {
    border-left-color: var(--dcui-warning-color);
}

@keyframes dcui-timer-countdown-spin {
    from { stroke-dashoffset: 0px; }
    to { stroke-dashoffset: 90px; }
}

/* ===== 9. Icons & Utilities ===== */
.dc-fa::before{
    font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free"; /* both, for safety */
    font-weight: 300; /* light */
    content: attr(data-fa);   /* read the actual character from the attribute */
    display: inline-block;
    width: 1.1em;
    text-align: center;
    line-height: 1;
}
.dc-fa[data-style="light"]::before   { --fa-weight:300; }
.dc-fa[data-style="regular"]::before { --fa-weight:400; }
.dc-fa[data-style="solid"]::before   { --fa-weight:900; }

/* ===== 10. BEM Aliases (compatibility) ===== */
/* These aliases mirror existing rules to encourage BEM usage without breaking current selectors. */

/* Wrapper focus state */
.dc-pb-wrapper--focused {
    outline: 3px solid var(--dc-pb-focus-outline);
    outline-offset: 2px;
}

/* Overlay hover state */
.dc-pb-overlay--hover .dc-pb-selection-box { outline-color: #3b82f6; }

/* Canvas empty state */
.dc-pb-canvas--empty { padding: 0; }

/* Handle element alias (equivalent to .dc-pb-handle .inner) */
.dc-pb-handle__inner {
    display: block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: #fff;
    margin: 4px;
    border-radius: 1px;
}

/* Handle position modifiers (equivalent to .dc-pb-handle.top-left, etc.) */
.dc-pb-handle--top-left     { top: -5px; left:  -5px; }
.dc-pb-handle--top-right    { top: -5px; right: -5px; }
.dc-pb-handle--bottom-left  { bottom: -5px; left:  -5px; }
.dc-pb-handle--bottom-right { bottom: -5px; right: -5px; }


/* ===== Drag & Reorder – Clean CSS ===== */

:root {
    --pb-accent: #700b58; /* tweak globally if needed */
}

/* Ghost preview of the dragged block */
[data-pb-ghost] {
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
    border-radius: 8px;
}

/* Global cursor + selection lock while dragging */
body.pb-dragging {
    cursor: grabbing !important;
    user-select: none !important;
}

/* Destination highlight (the block next to the placeholder) */
.pb-slot-highlight {
    outline: 2px solid #dddddd;
    outline-offset: 2px;
    border-radius: 8px;
}

.pb-drop-placeholder{
    display:block;
    width:100%;
    background:#e5e7eb;          /* light grey gap */
    border:none;
    border-radius:8px;
    pointer-events:none;
}
.pb-origin-dim{
    background:#e5e7eb !important;
    color:transparent !important;
}
.pb-move-handle{ touch-action:none; } /* prevents touch scroll during drag */

/* ===== Optional: Drop line & label (only if you enable them) ===== */
/* .pb-drop-line {
  position: fixed;
  height: 3px;
  background: var(--pb-accent);
  z-index: 1000000;
  box-shadow: 0 0 0 2px rgba(0,0,0,.05);
}
.pb-drop-label {
  position: fixed;
  padding: 2px 6px;
  font: 12px/1.4 system-ui;
  background: var(--pb-accent);
  color: #fff;
  border-radius: 6px;
  z-index: 1000001;
  transform: translateY(-150%);
} */