/* ============================================
   Kentico Xperience by Kentico - Page Builder Edit Mode CSS
   ============================================ */

/* ===========================================
   CRITICAL: Froala Rich Text Editor Protection
   Prevent Bootstrap and site CSS from breaking the Froala editor UI
   =========================================== */

/* Reset ALL elements inside Froala to prevent Bootstrap interference */
.fr-box *,
.fr-toolbar *,
.fr-popup *,
.fr-modal * {
    box-sizing: content-box;
}

.fr-box,
.fr-toolbar,
.fr-popup,
.fr-modal {
    box-sizing: border-box;
}

/* Reset Froala toolbar lists to proper styling */
.fr-toolbar ul,
.fr-toolbar ol,
.fr-popup ul,
.fr-popup ol,
.fr-box ul,
.fr-box ol,
.fr-dropdown-menu ul,
.fr-dropdown-content ul {
    list-style: none !important;
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Toolbar buttons container */
.fr-toolbar .fr-btn-grp {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
}

.fr-toolbar li,
.fr-popup li,
.fr-box li {
    list-style: none !important;
    list-style-type: none !important;
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Froala dropdown menus need vertical layout */
.fr-dropdown-menu,
.fr-dropdown-content,
.fr-dropdown-wrapper {
    display: block !important;
}

.fr-dropdown-menu ul {
    display: block !important;
}

.fr-dropdown-menu li,
.fr-dropdown-content li {
    display: block !important;
    width: 100% !important;
}

.fr-dropdown-menu li::before,
.fr-dropdown-content li::before,
.fr-toolbar li::before,
.fr-popup li::before {
    content: none !important;
    display: none !important;
}

/* Ensure Froala buttons display correctly - override Bootstrap .btn styles */
.fr-toolbar .fr-command,
.fr-toolbar button,
.fr-popup .fr-command,
.fr-popup button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 4px !important;
    border: none !important;
    background: transparent !important;
    min-width: auto !important;
    height: auto !important;
    line-height: normal !important;
    font-size: inherit !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.fr-toolbar .fr-command:hover,
.fr-toolbar button:hover {
    background: rgba(0,0,0,0.1) !important;
}

/* Froala SVG icons */
.fr-toolbar svg,
.fr-popup svg {
    width: 20px !important;
    height: 20px !important;
}

/* Froala icon font protection */
.fr-toolbar i,
.fr-popup i,
.fr-box i,
.fr-icon,
i.fr-deletable {
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif !important;
    font-style: normal !important;
    display: inline-block !important;
}

/* Ensure Froala wrapper has proper positioning */
.fr-wrapper,
.fr-box,
.fr-toolbar {
    position: relative !important;
}

/* Fix Froala toolbar separator */
.fr-toolbar .fr-separator {
    display: inline-block !important;
    width: 1px !important;
    height: 24px !important;
    margin: 0 8px !important;
    background: #ccc !important;
}

/* ===========================================
   Page Builder UI Fixes
   =========================================== */

/* Fix for Page Builder widget/section selector popups appearing at wrong position */
html.ktc-edit-mode,
body.ktc-edit-mode {
    overflow-x: visible !important;
    overflow-y: visible !important;
}

/* Fix navbar z-index in Edit mode to not overlap Page Builder UI */
.ktc-edit-mode .navbar.fixed-top {
    z-index: 100 !important;
}

/* Ensure Page Builder popups/modals have proper positioning context */
.ktc-edit-mode .ktc-widget-zone,
.ktc-edit-mode [class*="ktc-"],
.ktc-edit-mode [class*="xp-"] {
    position: relative;
}

/* Widget icons protection */
[class*="xp-icon"],
[class*="ktc-icon"],
.ktc-widget-icon,
.xp-widget-icon {
    font-family: inherit !important;
}

/* ===========================================
   Widget-specific Edit Mode Fixes
   =========================================== */

/* Accordion fix for Edit mode */
.ktc-edit-mode .accordion .accordion-collapse.collapse {
    display: block;
}

/* Rich text editor color fix */
.text-white .fr-element.fr-view *, 
.text-white .CodeMirror-code * {
    color: #414141 !important;
}

/* Image uploader positioning */
.image-uploader-editor {
    position: relative;
}

/* ===========================================
   Kentico Admin Icon Font Fixes
   CRITICAL: The icon fonts are loading but the font-family 
   might not be applied due to CSS inheritance issues
   =========================================== */

/* Force icon font-family for ALL Kentico icon classes */
[class*="icon-"]::before,
[class*="xp-"]::before,
.xp-icon::before,
i[class*="icon-"]::before {
    font-family: "xp-icons", "Kentico Icons", sans-serif !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    display: inline-block !important;
    speak: none !important;
}

/* Ensure icon elements are visible and properly sized */
[class*="icon-"],
[class*="xp-"],
.xp-icon,
i[class*="icon-"] {
    display: inline-block !important;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

/* ===========================================
   CRITICAL: Page Builder Popup/Dropdown Positioning Fix
   The section/widget picker dialogs appear at wrong position
   due to CSS overflow or transform rules from site CSS
   =========================================== */

/* Remove any transforms or overflow that could affect popup positioning */
.ktc-edit-mode,
.ktc-edit-mode body,
.ktc-edit-mode html {
    transform: none !important;
    overflow: visible !important;
}

/* Ensure Kentico popups/dropdowns have correct positioning context */
[class*="ktc-popup"],
[class*="ktc-dialog"],
[class*="ktc-dropdown"],
[class*="ktc-menu"],
[class*="ktc-modal"],
.ktc-section-dialog,
.ktc-widget-dialog,
.ktc-component-dialog {
    position: fixed !important;
    z-index: 100000 !important;
}

/* Fix for dialogs appearing at bottom - reset any inherited positioning */
body.ktc-edit-mode [class*="dialog"],
body.ktc-edit-mode [class*="popup"],
body.ktc-edit-mode [class*="menu"] {
    position: fixed !important;
}

/* Ensure the main content doesn't create a new stacking context that breaks popups */
.ktc-edit-mode main,
.ktc-edit-mode .container,
.ktc-edit-mode .container-fluid,
.ktc-edit-mode section {
    transform: none !important;
    perspective: none !important;
    filter: none !important;
}

/* ===========================================
   Kentico Admin SVG Icon Fixes
   CRITICAL: Protect admin icons from site CSS interference
   =========================================== */

/* Ensure Kentico admin SVGs are visible */
[class*="xp-"] svg,
[class*="ktc-"] svg,
.kentico-admin svg,
[data-ktc-component-type] svg {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
    fill: currentColor !important;
}

/* Page Builder action buttons/icons */
[class*="ktc-btn"] svg,
[class*="ktc-action"] svg,
.ktc-widget-header svg,
.ktc-section-header svg {
    width: 16px !important;
    height: 16px !important;
}

/* Editable area add button icons */
.ktc-add-component svg,
.ktc-add-widget svg,
.ktc-add-section svg {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
}

/* Protect inline SVGs from Bootstrap/site resets */
svg:not(.fa-svg):not([class*="fa-"]) {
    max-width: none;
    overflow: visible;
}