/* =============================================================================
   CPB Customer Portal Theme
   Vollständige Kontrolle über den Kundenbereich.
   Kein Abhängigkeit von theme_styles.css für body.customers.
   ============================================================================= */

/* =============================================================================
   CSS VARIABLES (werden per JS aus Settings überschrieben)
   Aliase auf --color-primary und --text-nav-color für Kompatibilität
   mit der cpb_style_render() Funktion die diese Variablen setzt.
   ============================================================================= */
:root {
    /* Defaults — werden von cpb_style_render() überschrieben */
    --color-primary:      #b72974;
    --color-primary-rgb:  183, 41, 116;
    --text-nav-color:     rgba(255,255,255,0.9);

    /* CPB-Aliase → zeigen auf dieselben Werte */
    --cpb-primary:        var(--color-primary);
    --cpb-primary-rgb:    var(--color-primary-rgb);
    --cpb-nav-text:       var(--text-nav-color);

    /* Settings-steuerbare Variablen */
    --cpb-sidebar-bg:          var(--color-primary);
    --cpb-sidebar-bg-rgb:      var(--color-primary-rgb);
    --cpb-nav-hover:           rgba(255,255,255,0.15);
    --cpb-topbar-bg:           #ffffff;
    --cpb-topbar-link-color:   var(--cpb-primary);

    --cpb-sidebar-width:  260px;
    --cpb-content-bg:     #f4f6f9;
    --cpb-font:           Montserrat, sans-serif;
    --cpb-font-light:     Montserrat-Light, Montserrat, sans-serif;
    --cpb-font-medium:    Montserrat-Medium, Montserrat, sans-serif;
    --cpb-font-bold:      Montserrat-Bold, Montserrat, sans-serif;
}

/* =============================================================================
   FONTS (Montserrat aus CPB-Assets)
   ============================================================================= */
@font-face {
    font-family: Montserrat;
    src: url('../fonts/montserrat/Montserrat-Regular.woff2') format('woff2'),
         url('../fonts/montserrat/Montserrat-Regular.woff')  format('woff'),
         url('../fonts/montserrat/Montserrat-Regular.ttf')   format('truetype');
}
@font-face {
    font-family: Montserrat-Light;
    src: url('../fonts/montserrat/Montserrat-Light.woff2') format('woff2'),
         url('../fonts/montserrat/Montserrat-Light.woff')  format('woff'),
         url('../fonts/montserrat/Montserrat-Light.ttf')   format('truetype');
}
@font-face {
    font-family: Montserrat-Medium;
    src: url('../fonts/montserrat/Montserrat-Medium.woff2') format('woff2'),
         url('../fonts/montserrat/Montserrat-Medium.woff')  format('woff'),
         url('../fonts/montserrat/Montserrat-Medium.ttf')   format('truetype');
}
@font-face {
    font-family: Montserrat-Bold;
    src: url('../fonts/montserrat/Montserrat-Bold.woff2') format('woff2'),
         url('../fonts/montserrat/Montserrat-Bold.woff')  format('woff'),
         url('../fonts/montserrat/Montserrat-Bold.ttf')   format('truetype');
}
@font-face {
    font-family: Montserrat-SemiBold;
    src: url('../fonts/montserrat/Montserrat-SemiBold.woff2') format('woff2'),
         url('../fonts/montserrat/Montserrat-SemiBold.woff')  format('woff'),
         url('../fonts/montserrat/Montserrat-SemiBold.ttf')   format('truetype');
}

/* =============================================================================
   BASE: nur body.customers — kein Einfluss auf Admin
   ============================================================================= */
body.customers {
    font-family: var(--cpb-font-light);
    font-size: 13px;
    background: var(--cpb-content-bg);
    min-height: 100vh;
    /* overflow:hidden removed — was clipping footer and page content */
    height: auto;
}

/* Login / Forgot-Password: gradient background, kein Sidebar-Layout */
body.customers_login,
body.forgot_password {
    background: linear-gradient(-50deg, #000 -40%, var(--cpb-primary)) no-repeat !important;
    overflow: auto !important;
    height: auto !important;
}

/* =============================================================================
   ALLES AUSSERhalb der Sidebar AUSBLENDEN (Perfex-Topbar, etc.)
   ============================================================================= */
/* Footer bleibt versteckt, Topbar wird jetzt angezeigt */
body.customers:not(.customers_login):not(.forgot_password) .footer {
    display: none !important;
}

/* Topbar: horizontale Leiste über dem Content */
body.customers:not(.customers_login):not(.forgot_password) .submenu.customer-top-submenu {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    background: var(--cpb-topbar-bg) !important;
    border-bottom: 1px solid rgba(0,0,0,0.07);
    padding: 0 20px;
    margin: 0;
    position: fixed;
    top: 0;
    left: var(--cpb-sidebar-width);
    right: 0;
    z-index: 90;
    min-height: 44px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.05);
}
body.customers:not(.customers_login):not(.forgot_password) .submenu.customer-top-submenu li {
    display: flex;
    align-items: center;
    margin: 0 2px;
}
body.customers:not(.customers_login):not(.forgot_password) .submenu.customer-top-submenu li a {
    color: var(--cpb-topbar-link-color) !important;
    font-size: 12px;
    font-family: var(--cpb-font-medium);
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: 6px;
    transition: background 0.2s;
    white-space: nowrap;
}
body.customers:not(.customers_login):not(.forgot_password) .submenu.customer-top-submenu li a:hover {
    background: rgba(0,0,0,0.06);
}
/* Links die per Setting deaktiviert wurden */
body.customers .submenu.customer-top-submenu li.cpb-topbar-hidden {
    display: none !important;
}

/* =============================================================================
   LAYOUT: Sidebar + Content
   ============================================================================= */
body.customers:not(.customers_login):not(.forgot_password) .navbar {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    width: var(--cpb-sidebar-width);
    background: var(--cpb-sidebar-bg);
    margin: 0; padding: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
}

body.customers:not(.customers_login):not(.forgot_password) .navbar .container {
    width: auto;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Inhalt rechts neben der Sidebar, scrollbar */
body.customers:not(.customers_login):not(.forgot_password) #wrapper {
    margin-left: var(--cpb-sidebar-width);
    margin-top: 44px; /* Platz für die Topbar */
    height: calc(100vh - 44px);
    overflow-y: auto;
    overflow-x: hidden; /* verhindert horizontalen Scroll durch breite Footer/Header-Blöcke */
    background: var(--cpb-content-bg);
}

@media (max-width: 768px) {
    body.customers:not(.customers_login):not(.forgot_password) .navbar {
        width: 100%;
        position: relative;
    }
    body.customers:not(.customers_login):not(.forgot_password) #wrapper {
        margin-left: 0;
    }
}

/* =============================================================================
   SIDEBAR: Logo-Bereich
   ============================================================================= */
body.customers .navbar .navbar-header {
    flex-shrink: 0;
    min-height: 74px;
    display: flex;
    align-items: center;
    padding: 15px;
}

/* Perfex Logo anzeigen (dark/white Version via data-src oder img) */
body.customers .navbar .navbar-header .navbar-brand {
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
}
body.customers .navbar .navbar-header .navbar-brand img {
    max-height: 40px;
    height: auto;
    width: auto;
}

/* =============================================================================
   SIDEBAR: Navigation-Liste
   ============================================================================= */
body.customers .navbar .navbar-collapse {
    padding: 0;
    flex: 1;
    overflow: hidden;
    display: flex !important;
    flex-direction: column;
}

body.customers .navbar .navbar-collapse .navbar-nav {
    flex: 1;
    overflow-y: auto;
    margin: 0;
    padding: 60px 10px 20px;  /* Platz oben für Profil-Pill */
    float: none !important;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Scrollbar der Nav */
body.customers .navbar .navbar-collapse .navbar-nav::-webkit-scrollbar {
    width: 4px;
}
body.customers .navbar .navbar-collapse .navbar-nav::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
    border-radius: 4px;
}

/* =============================================================================
   SIDEBAR: Nav-Items
   ============================================================================= */
body.customers .navbar .navbar-collapse .navbar-nav > li {
    float: none;
    margin: 2px 0;
}

body.customers .navbar .navbar-collapse .navbar-nav > li > a {
    font-family: var(--cpb-font-medium);
    font-size: 13px;
    color: var(--cpb-nav-text) !important;
    text-transform: uppercase;
    line-height: 15px;
    padding: 9px 16px;
    margin: 0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.customers .navbar .navbar-collapse .navbar-nav > li > a:hover,
body.customers .navbar .navbar-collapse .navbar-nav > li.active > a {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
}

/* Icons in Nav-Links */
body.customers .navbar .navbar-collapse .navbar-nav > li > a .cpb-nav-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
body.customers .navbar .navbar-collapse .navbar-nav > li > a .cpb-nav-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}

/* Verstecke ::before pseudo-element aus old theme */
body.customers .navbar .navbar-collapse .navbar-nav > li > a::before {
    display: none !important;
}

/* =============================================================================
   SIDEBAR: Profil-Pill (oben, absolut positioniert)
   ============================================================================= */
body.customers .navbar .navbar-collapse .navbar-nav > li.customers-nav-item-profile {
    position: absolute;
    top: 0;
    left: 10px;
    right: 0;
    border-radius: 30px 0 0 30px;
    background: rgba(255, 255, 255, 0.92) !important;
    margin: 0;
    z-index: 10;
}

body.customers .navbar .navbar-collapse .navbar-nav > li.customers-nav-item-profile a.dropdown-toggle {
    color: var(--cpb-primary, #1a3a5c) !important;
    padding: 6px 25px 6px 7px;
    position: relative;
    border-radius: 30px 0 0 30px;
    display: flex;
    align-items: center;
    min-height: 44px;
}

/* Kein ::before Icon für Profil */
body.customers .navbar .navbar-collapse .navbar-nav > li.customers-nav-item-profile a.dropdown-toggle::before {
    display: none !important;
}

/* Avatar */
body.customers .navbar .navbar-collapse .navbar-nav > li.customers-nav-item-profile .client-profile-image-small {
    flex-shrink: 0;
    border: 3px solid rgba(var(--cpb-primary-rgb), 0.2);
    border-radius: 50%;
    width: 32px;
    height: 32px;
}

/* Profilname (wird per JS gesetzt) */
body.customers .navbar .navbar-collapse .navbar-nav > li.customers-nav-item-profile a.dropdown-toggle .caret {
    position: absolute;
    left: 45px;
    top: 50%;
    transform: translateY(-50%);
    right: 28px;
    height: auto;
    width: auto;
    border: 0 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding: 0;
    margin: 0;
    color: var(--cpb-primary, #1a3a5c) !important;
    font-size: 12px;
    font-family: var(--cpb-font-medium);
    line-height: 1.2;
}

/* Dropdown-Pfeil */
body.customers .navbar .navbar-collapse .navbar-nav > li.customers-nav-item-profile a.dropdown-toggle .caret::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -18px;
    transform: translateY(-50%);
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--cpb-primary);
}

/* Dropdown-Menü des Profils */
body.customers .navbar .navbar-collapse .navbar-nav > li.customers-nav-item-profile .dropdown-menu {
    left: 10px;   /* bündig mit dem weißen Profilstreifen */
    right: 10px;
    top: 100%;
    width: auto;
    min-width: 0;
    border-color: #e6edef;
    box-shadow: 0 6px 24px rgba(0,0,0,0.13);
    border-radius: 0 0 12px 12px;
}

body.customers .navbar .navbar-collapse .navbar-nav > li.customers-nav-item-profile .dropdown-menu > li > a {
    font-family: var(--cpb-font-light);
    color: #333;
    padding: 8px 16px;
    font-size: 13px;
    display: block;
    text-transform: none;
    background: none !important;
    border-radius: 0;
}

body.customers .navbar .navbar-collapse .navbar-nav > li.customers-nav-item-profile .dropdown-menu > li > a:hover {
    background: rgba(var(--cpb-primary-rgb), 0.08) !important;
    color: var(--cpb-primary);
}

/* =============================================================================
   CONTENT-BEREICH
   ============================================================================= */
body.customers:not(.customers_login):not(.forgot_password) #wrapper #content > .container {
    min-height: 0; /* war 100vh — hat unnötigen Leerraum vor dem Footer erzeugt */
    width: auto;
    padding: 25px 35px;
}

/* Erste Container (Perfex-Topbar-Container) verstecken */
body.customers:not(.customers_login):not(.forgot_password) #wrapper #content > .container:first-child {
    display: none !important;
}

/* =============================================================================
   CONTENT: Typographie & Elemente
   ============================================================================= */
body.customers a {
    color: var(--cpb-primary);
    transition: color 0.2s ease;
}
body.customers a:hover,
body.customers a:focus {
    color: rgba(var(--cpb-primary-rgb), 0.75);
    outline: 0;
}

body.customers .text-info {
    color: var(--cpb-primary);
}

body.customers .badge {
    background-color: var(--cpb-primary);
    color: #fff;
}

body.customers .btn.btn-info,
body.customers .btn.btn-primary {
    background-color: var(--cpb-primary);
    border-color: var(--cpb-primary);
}

body.customers .btn.btn-info:hover,
body.customers .btn.btn-primary:hover {
    background-color: #fff !important;
    color: var(--cpb-primary);
    border-color: var(--cpb-primary);
}

body.customers .progress-bar {
    background-color: var(--cpb-primary);
}

body.customers .panel_s > .panel-footer {
    background-color: #f9f9f9;
    border-color: rgba(var(--cpb-primary-rgb), 0.1);
}

body.customers .alert-info {
    background: rgba(var(--cpb-primary-rgb), 0.08);
    color: var(--cpb-primary);
    border-color: rgba(var(--cpb-primary-rgb), 0.2);
}

/* =============================================================================
   CONTENT: Tabellen
   ============================================================================= */
body.customers table.dataTable thead > tr > th {
    font-family: var(--cpb-font);
    font-size: 12px;
    background: #f9f9f9;
    color: #3c3939 !important;
    border: 0 !important;
}

body.customers .pagination > li > a {
    color: var(--cpb-primary);
    border-color: rgba(var(--cpb-primary-rgb), 0.3);
}

body.customers .pagination > li > a:hover {
    background: var(--cpb-primary);
    color: #fff;
    border-color: var(--cpb-primary);
}

body.customers .pagination > li.active > a {
    background: var(--cpb-primary);
    border-color: var(--cpb-primary);
}

/* =============================================================================
   CONTENT: Formulare
   ============================================================================= */
body.customers input[type=text],
body.customers input[type=email],
body.customers input[type=password],
body.customers input[type=number],
body.customers textarea.form-control,
body.customers select.form-control {
    font-family: var(--cpb-font-light) !important;
    font-size: 13px;
    border-color: rgba(var(--cpb-primary-rgb), 0.4) !important;
}

body.customers input[type=text]:focus,
body.customers input[type=email]:focus,
body.customers input[type=password]:focus,
body.customers textarea.form-control:focus,
body.customers select.form-control:focus {
    border-color: var(--cpb-primary) !important;
    box-shadow: none !important;
    outline: 0 !important;
}

body.customers .checkbox input[type=checkbox]:checked + label:before {
    background-color: var(--cpb-primary) !important;
    border-color: var(--cpb-primary) !important;
}

body.customers .control-label,
body.customers label {
    font-family: var(--cpb-font);
}

/* =============================================================================
   LOGIN-SEITE
   ============================================================================= */
body.customers_login .container,
body.forgot_password .container {
    width: auto;
    padding: 0; margin: 0;
}

body.customers_login .container > .row,
body.forgot_password .container > .row {
    margin: 0;
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

body.customers_login .authentication-form,
body.customers_login .login-form,
body.forgot_password .authentication-form,
body.forgot_password .login-form {
    background: rgba(255,255,255,0.12);
    box-shadow: 0 1px 15px 1px rgba(0,0,0,0.08);
    border: 0;
    margin: 0;
    min-width: 380px;
    max-width: 420px;
    padding: 30px;
    border-radius: 12px;
}

body.customers_login .authentication-form .panel_s,
body.customers_login .login-form .panel_s,
body.forgot_password .authentication-form .panel_s,
body.forgot_password .login-form .panel_s {
    box-shadow: none;
    background: transparent;
    border: 0;
}

body.customers_login .login-heading,
body.forgot_password .forgot-password-heading h1 {
    color: #fff;
    font-size: 20px;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 20px;
}

body.customers_login .form-group > label,
body.forgot_password .form-group > label {
    color: #fff;
    font-size: 13px;
}

body.customers_login .form-group > .form-control,
body.forgot_password .form-group > .form-control {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3) !important;
    color: #fff;
    border-radius: 6px;
}

body.customers_login .form-group > .form-control::placeholder,
body.forgot_password .form-group > .form-control::placeholder {
    color: rgba(255,255,255,0.6) !important;
}

body.customers_login .btn-success,
body.forgot_password .btn-success {
    background: var(--cpb-primary);
    border-color: var(--cpb-primary);
    color: #fff;
    width: 100%;
    padding: 10px;
    text-transform: uppercase;
    font-family: var(--cpb-font);
    border-radius: 6px;
    margin-top: 10px;
}

body.customers_login a,
body.forgot_password a {
    color: rgba(255,255,255,0.85);
    text-decoration: underline;
}

/* =============================================================================
   KNOWLEDGE BASE
   ============================================================================= */
body.customers #wrapper #content .kb-search-jumbotron .kb-search button[type=submit] {
    background: var(--cpb-primary);
    outline: 0;
    box-shadow: none !important;
}

body.customers #wrapper #content .kb-search-jumbotron .kb-search button[type=submit]:hover {
    background: rgba(var(--cpb-primary-rgb), 0.8);
}

body.customers #wrapper #content .kb-search-jumbotron .kb-search .kb-search-icon {
    color: var(--cpb-primary);
}

/* =============================================================================
   INVOICE / CONTRACT / ESTIMATE PREVIEW (keine Sidebar)
   ============================================================================= */
body.viewinvoice #wrapper,
body.viewestimate #wrapper,
body.contract-view #wrapper,
body.proposal-view #wrapper {
    margin: 0 !important;
}

/* =============================================================================
   CPB IFRAME OVERLAY
   ============================================================================= */
#cpb-iframe-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 9999;
    background: #fff;
    flex-direction: column;
}
#cpb-iframe-overlay.cpb-open {
    display: flex !important;
}

/* =============================================================================
   CPB CMS SEITEN
   ============================================================================= */
#cpb-cms-page {
    position: fixed;
    top: 0; bottom: 0;
    left: var(--cpb-sidebar-width); right: 0;
    z-index: 200;
    overflow-y: auto;
    background: #fff;
}

@media (max-width: 768px) {
    #cpb-cms-page { left: 0; }
}

.cpb-cms-page {
    width: 100%;
    padding: 30px 40px;
    font-size: 15px;
    color: #333;
    line-height: 1.7;
    box-sizing: border-box;
}

/* Header/Footer Blöcke: volle Breite, kein Padding */
.cpb-cms-page > header,
.cpb-cms-page > footer,
#cpb-header,
#cpb-footer {
    margin-left:  -40px !important;
    margin-right: -40px !important;
    width: calc(100% + 80px) !important;
    box-sizing: border-box !important;
}
#cpb-footer {
    margin-bottom: -30px !important; /* Hebt das padding-bottom der .cpb-cms-page auf */
    padding-bottom: 30px !important;  /* Eigenes Padding damit der Inhalt nicht klebt */
}
#cpb-header {
    margin-top: -30px !important;
}

.cpb-cms-page h1, .cpb-cms-page h2,
.cpb-cms-page h3, .cpb-cms-page h4 {
    margin-top: 1.2em;
    margin-bottom: 0.5em;
    font-weight: 600;
    color: #222;
}

.cpb-cms-page h1 { font-size: 2em; }
.cpb-cms-page h2 { font-size: 1.6em; }
.cpb-cms-page h3 { font-size: 1.3em; }

.cpb-cms-page p { margin-bottom: 0.9em; }

.cpb-cms-page ul, .cpb-cms-page ol {
    padding-left: 1.5em;
    margin-bottom: 0.9em;
}

.cpb-cms-page li { margin-bottom: 0.3em; }

.cpb-cms-page blockquote {
    border-left: 4px solid var(--cpb-primary);
    margin: 1em 0;
    padding: 0.5em 1em;
    color: #555;
    background: #f9f9f9;
    border-radius: 0 4px 4px 0;
}

.cpb-cms-page table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1em;
}
.cpb-cms-page th, .cpb-cms-page td {
    border: 1px solid #ddd;
    padding: 8px 12px;
    text-align: left;
}
.cpb-cms-page th {
    background: #f5f5f5;
    font-weight: 600;
}

.cpb-cms-page img {
    max-width: 100%;
    border-radius: 4px;
    margin: 0.5em 0;
    display: block;
}

.cpb-cms-page hr {
    border: none;
    border-top: 2px solid #eee;
    margin: 1.5em 0;
}

.cpb-cms-page .cpb-btn {
    display: inline-block;
    padding: 9px 22px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    background: var(--cpb-primary);
    color: #fff;
    margin: 0.3em 0;
}

.cpb-cms-page .cpb-btn-outline {
    background: transparent;
    border: 2px solid var(--cpb-primary);
    color: var(--cpb-primary);
}

.cpb-cms-page .cpb-columns {
    display: flex;
    gap: 20px;
    margin-bottom: 1em;
}

.cpb-cms-page .cpb-columns > div { flex: 1; }

.cpb-cms-page .cpb-alert {
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 1em;
    border-left: 4px solid;
    font-size: 14px;
}

.cpb-cms-page .cpb-alert-info    { background: #e8f4f8; border-color: #5bc0de; color: #2a6496; }
.cpb-cms-page .cpb-alert-success { background: #dff0d8; border-color: #5cb85c; color: #3c763d; }
.cpb-cms-page .cpb-alert-warning { background: #fcf8e3; border-color: #f0ad4e; color: #8a6d3b; }
.cpb-cms-page .cpb-alert-danger  { background: #f2dede; border-color: #d9534f; color: #a94442; }

/* =============================================================================
   NAV ICON ALIGNMENT (CPB-spezifisch)
   ============================================================================= */
.navbar-nav > li > a .cpb-nav-icon {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-right: 7px;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.navbar-nav > li > a .cpb-nav-icon svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

/* =============================================================================
   CPB IFRAME SEITEN
   ============================================================================= */
#cpb-iframe-page {
    position: fixed;
    top: 0; bottom: 0;
    left: var(--cpb-sidebar-width); right: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    background: #fff;
}

@media (max-width: 768px) {
    #cpb-iframe-page { left: 0; }
}

#cpb-iframe-page .cpb-iframe-topbar {
    display: flex;
    align-items: center;
    padding: 0 16px;
    background: var(--color-primary, #b72974);
    color: #fff;
    height: 44px;
    flex-shrink: 0;
}

#cpb-iframe-page .cpb-iframe-topbar-title {
    flex: 1;
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 12px;
}

#cpb-iframe-page .cpb-iframe-topbar-back {
    background: rgba(255,255,255,0.2);
    border: none;
    color: #fff !important;
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    flex-shrink: 0;
    transition: background 0.2s ease;
}

#cpb-iframe-page .cpb-iframe-topbar-back:hover {
    background: rgba(255,255,255,0.35);
    color: #fff !important;
}

#cpb-iframe-page .cpb-iframe-frame {
    flex: 1;
    border: none;
    width: 100%;
    min-height: 0;
    display: block;
}

/* =============================================================================
   CPB WIDGET LOADING ANIMATION
   ============================================================================= */
@keyframes cpb-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}