/* P Builder front base: values are supplied by data/p_builder/cache/p_builder.css */
:root {
    --pb-primary: #4f46e5;
    --pb-secondary: #111827;
    --pb-bg: #f8fafc;
    --pb-surface: #ffffff;
    --pb-text: #1f2937;
    --pb-muted: #64748b;
    --pb-container: 1280px;
    --pb-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
}

.pb-container {
    width: min(calc(100% - 40px), var(--pb-container));
    margin: 0 auto;
}

.pb-surface {
    background: var(--pb-surface);
    color: var(--pb-text);
}

.pb-text-muted {
    color: var(--pb-muted);
}

.pb-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 16px;
    border: 0;
    border-radius: 8px;
    background: var(--pb-primary);
    color: #fff;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

.pb-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 16px;
    border: 1px solid color-mix(in srgb, var(--pb-secondary) 20%, transparent);
    border-radius: 8px;
    background: transparent;
    color: var(--pb-secondary);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

@media (max-width: 640px) {
    .pb-container {
        width: min(calc(100% - 28px), var(--pb-container));
    }
}


/* P Builder popup manager */
.pb-popup-layer-wrap {
    position: relative;
    z-index: 10050
}

.pb-popup {
    position: fixed;
    inset: 0;
    z-index: 10060
}

.pb-popup[hidden] {
    display: none !important
}

.pb-popup-layer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    background: rgba(15, 23, 42, .52)
}

.pb-popup-box {
    overflow: hidden;
    background: var(--pb-surface);
    color: var(--pb-text);
    box-shadow: 0 25px 70px rgba(2, 6, 23, .35)
}

.pb-popup-layer .pb-popup-box {
    width: min(var(--pb-popup-width), calc(100vw - 32px));
    max-height: min(var(--pb-popup-height), calc(100vh - 32px));
    border-radius: 14px
}

.pb-popup-content {
    max-height: calc(100vh - 96px);
    overflow: auto
}

.pb-popup-content img {
    display: block;
    max-width: 100%;
    width: 100%;
    height: auto
}

.pb-popup-image-link {
    display: block
}

.pb-popup-text {
    padding: 22px;
    line-height: 1.7;
    word-break: break-word
}

.pb-popup-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 15px;
    border-top: 1px solid rgba(100, 116, 139, .2);
    background: var(--pb-surface);
    font-size: 13px
}

.pb-popup-actions label {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--pb-muted);
    cursor: pointer
}

.pb-popup-actions button {
    border: 0;
    background: transparent;
    color: var(--pb-text);
    font: inherit;
    font-weight: 800;
    cursor: pointer
}

.pb-popup-bottom_bar {
    inset: auto 0 0
}

.pb-popup-bottom_bar .pb-popup-box {
    width: min(100%, var(--pb-container));
    margin: 0 auto;
    border-radius: 14px 14px 0 0;
    border: 1px solid rgba(100, 116, 139, .22);
    border-bottom: 0
}

.pb-popup-bottom_bar .pb-popup-content {
    display: flex;
    align-items: center;
    gap: 18px;
    max-height: 240px
}

.pb-popup-bottom_bar .pb-popup-content>img,
.pb-popup-bottom_bar .pb-popup-content>a {
    flex: 0 0 auto;
    max-width: 180px
}

.pb-popup-bottom_bar .pb-popup-text {
    padding: 16px 20px
}

@media(max-width:640px) {
    .pb-popup-layer {
        padding: 14px
    }

    .pb-popup-layer .pb-popup-box {
        width: calc(100vw - 28px);
        max-height: calc(100vh - 28px)
    }

    .pb-popup-bottom_bar .pb-popup-box {
        width: 100%;
        border-radius: 12px 12px 0 0
    }

    .pb-popup-bottom_bar .pb-popup-content {
        display: block;
        max-height: 52vh
    }

    .pb-popup-bottom_bar .pb-popup-content>img,
    .pb-popup-bottom_bar .pb-popup-content>a {
        display: block;
        max-width: none
    }

    .pb-popup-text {
        padding: 17px
    }

    .pb-popup-actions {
        padding: 11px 14px
    }
}