/* ===========================
    ADMIN ITEM MANAGEMENT
=========================== */
.accordion-item-card {
    margin-bottom: 1rem;
    background: #fff;
    position: relative;
}

/* Add this new rule for custom borders. Without this bootstrap over rides the top and bottom border somehow */
.preview-accordion-item.custom-border {
    border: var(--custom-border-style) !important;
}

.accordion-item-header {
    background: #f8f9fa;
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.accordion-item-body {
    padding: 1rem;
}

.accordion-item-controls {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.drag-handle {
    cursor: move;
    color: #6c757d;
    padding: 0.25rem;
}

.remove-item-btn {
    color: #dc3545;
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
}

    .remove-item-btn:hover {
        color: #b02a37;
    }

/* ===========================
      CONTENT ITEM STYLES
      =========================== */
.content-item-wrapper {
    position: relative;
    background: #fff;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
    min-height: 1.5rem; /* Ensure minimum height for controls */
    display: flex;
    align-items: flex-start; /* Align content to top */
    border-radius: 0;
}

    .content-item-wrapper:hover {
        background: #f8f9fa;
    }

.content-item-text {
    padding-right: 4rem; /* Increase space for the controls */
    flex: 1; /* Take remaining space */
    line-height: 1.5; /* Ensure proper line height */
}

/* General style for links within any content item */
.content-item-wrapper .content-item-text a {
    text-decoration: none !important; /* Ensure no underline */
    display: inline; /* Allow link to flow with text and icons */
    align-items: center;
    color: inherit; /* Inherit color from the parent .content-item-text */
}

    .content-item-wrapper .content-item-text a:hover {
        color: #f58025 !important; /* Ensure hover color applies */
        text-decoration: none !important; /* Explicitly remove underline on hover */
    }
/* ===========================
    PREVIEW & TOOLBAR STYLES
=========================== */
.accordion-preview {
    background: #f8f9fa;
    border-radius: 0.5rem;
    padding: 1.5rem;
    position: relative;
}

.preview-accordion-item {
    position: relative;
    background: #fff;
    transition: all 0.2s ease;
}

/* Base style for ALL edit controls */
.preview-edit-controls {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 0.25rem;
    padding: 0.25rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    display: flex;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 10;
}

/* Smaller controls for content items */
.preview-edit-controls-content {
    top: 0.25rem;
    right: 0.25rem;
    padding: 0.1rem;
    gap: 0.1rem;
}

    /* Smaller buttons within content item controls */
    .preview-edit-controls-content .preview-edit-btn {
        font-size: 0.7rem;
        min-width: 20px;
        min-height: 20px;
        padding: 0.2rem;
    }

/* Show controls on direct hover of a HEADER item */
.preview-accordion-item:hover > .preview-edit-controls {
    opacity: 1;
}

/* Show controls on direct hover of a CONTENT item */
.content-item-wrapper:hover > .preview-edit-controls {
    opacity: 1;
}

/* --- Nesting Fixes --- */

/* HIDE a parent header's controls if a child HEADER is hovered */
.preview-accordion-item:has(.preview-accordion-item:hover):hover > .preview-edit-controls {
    opacity: 0;
}

/* HIDE a parent header's controls if a child CONTENT item is hovered */
.preview-accordion-item:has(.content-item-wrapper:hover):hover > .preview-edit-controls {
    opacity: 0;
}

.preview-edit-btn {
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    border-radius: 0.2rem;
    color: #6c757d;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
}

    .preview-edit-btn:hover {
        background: #f8f9fa;
        color: #495057;
    }

    .preview-edit-btn.edit-btn:hover {
        color: #007bff;
    }

    .preview-edit-btn.delete-btn:hover {
        color: #dc3545;
    }

    .preview-edit-btn.add-btn:hover {
        color: #28a745;
    }

.preview-management-toolbar {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.toolbar-section {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
/* ===========================
    CONTENT ALIGNMENT / PADDING
=========================== */
.content-align-left {
    text-align: left !important;
}

.content-align-center {
    text-align: center !important;
}

.content-align-right {
    text-align: right !important;
}

.pt-small {
    padding-top: 1rem !important;
}

.pb-small {
    padding-bottom: 1rem !important;
}

.pt-medium {
    padding-top: 2rem !important;
}

.pb-medium {
    padding-bottom: 2rem !important;
}

.pt-large {
    padding-top: 4rem !important;
}

.pb-large {
    padding-bottom: 4rem !important;
}
/* ===========================
    ACCORDION LAYOUTS
=========================== */

/* Base styles for all accordion layouts */
.accordion-item {
    background-color: #fff;
    border: 1px solid transparent; /* Set transparent border to reserve space */
    /*margin-bottom: 1rem;*/
    transition: all 0.2s ease;
}

.accordion-button {
    font-weight: 500;
    box-shadow: none !important;
    transition: all 0.2s ease;
}

    .accordion-button:focus {
        outline: none !important;
        box-shadow: none !important;
    }

/* Standard Layout */
.accordion-layout-standard .accordion-item {
    border-radius: 0;
    margin-bottom: 0.5rem;
}

.accordion-layout-standard .content-item-wrapper {
    padding: 0.5rem;
}

/* Split Layout */
.accordion-layout-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 2rem;
}

    .accordion-layout-split .accordion-item {
        padding: 0.5rem;
    }

    .accordion-layout-split .content-item-wrapper {
        padding: 0.5rem;
    }

    .accordion-layout-split .accordion-button {
        font-weight: 600;
    }
/* Minimal Layout */
.accordion-layout-minimal h2.accordion-heading {
    margin-bottom: 1rem;
    font-size: 42px !important;
    font-weight: 300 !important;
}

.accordion-layout-minimal .accordion-item {
    border-radius: 0;
}

.accordion-layout-minimal .content-item-wrapper {
    padding: 0.5rem;
}

.accordion-layout-minimal .accordion-button {
    font-weight: 600;
    font-size: 1.1rem;
    padding-left: 1rem;
    padding-right: 0;
    transition: color 0.2s ease, border-color 0.2s ease; /* Add transition */
}

    .accordion-layout-minimal .accordion-button::after {
        display: none;
    }

.accordion-layout-minimal .accordion-body {
    font-size: 0.95rem;
}
/* Additional Information Layout */
.accordion-layout-additionInfo {
    max-width: 1200px;
    margin: 80px auto;
}

    .accordion-layout-additionInfo h2.accordion-heading {
        font-size: 42px !important;
        font-weight: 300 !important;
    }

    .accordion-layout-additionInfo .accordion-item {
        border-radius: 0;
    }

    .accordion-layout-additionInfo .content-item-wrapper {
        padding: 0.25rem;
    }

    .accordion-layout-additionInfo .accordion-text {
        font-size: 1.5rem !important;
    }

    .accordion-layout-additionInfo .accordion-button {
        padding: 1rem;
        font-size: 1.25rem;
        font-weight: 400;
        padding-left: 1rem;
        margin-right: 10px;
    }

        .accordion-layout-additionInfo .accordion-button:not(.collapsed),
        .accordion-layout-additionInfo .accordion-button:focus {
            background-color: inherit;
        }

    .accordion-layout-additionInfo .accordion-body {
        font-size: 0.95rem;
    }

/* ===========================
    ACCORDION ITEM BORDERS
=========================== */
/* Remove border from last item to avoid double borders */
.accordion-layout-standard .accordion-item:last-child,
.accordion-layout-bordered .accordion-item:last-child,
.accordion-layout-split .accordion-item:last-child,
.accordion-layout-minimal .accordion-item:last-child {
    border-bottom: none;
}

/* Override Bootstrap's default rounded corners on first and last items */
.accordion-header:first-of-type,
.accordion-header:last-of-type {
    border-radius: 0 !important;
}

/* ===========================
    MODALS
=========================== */
.item-type-modal {
    z-index: 2100;
}

.item-type-btn {
    display: block;
    width: 100%;
    margin-bottom: 0.5rem;
    padding: 1rem;
    text-align: left;
    border: 2px solid #dee2e6;
    background: #fff;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
}

    .item-type-btn:hover {
        border-color: #0d6efd;
        background: #f8f9fa;
        transform: translateY(-2px);
    }

    .item-type-btn i {
        width: 20px;
        margin-right: 0.5rem;
    }

/* ======================================================
     ACCORDION ITEM VISUAL CUSTOMIZATION SUPPORT
====================================================== */
/*  Text alignment and typography overrides */
.accordion-item [style*="text-align:center"],
.accordion-item .text-center {
    text-align: center !important;
}

.accordion-item [style*="text-align:right"],
.accordion-item .text-right {
    text-align: right !important;
}

.accordion-item [style*="font-style:italic"],
.accordion-item .font-italic {
    font-style: italic !important;
}

.accordion-item [style*="font-style:uppercase"],
.accordion-item .text-uppercase {
    text-transform: uppercase !important;
}
/*  Accent bar (colored stripe on left edge of headers) */
.accordion-button[style*="border-left-color"] {
    border-left-width: 4px !important;
    border-left-style: solid !important;
}
/*  Borders and dividers */
.accordion-item[style*="border-bottom:none"],
.accordion-item.no-border {
    border-bottom: none !important;
}
/* Optional shadow when background is non-white */
.accordion-item[style*="background-color"]:not([style*="#fff"]) {
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.show-bullets-disc {
    display: list-item !important;
    list-style-type: disc !important;
    margin-left: 1.25rem !important;
}

.show-bullets-circle {
    display: list-item !important;
    list-style-type: circle !important;
    margin-left: 1.25rem !important;
}

.show-bullets-square {
    display: list-item !important;
    list-style-type: square !important;
    margin-left: 1.25rem !important;
}

.show-bullets-none {
    display: list-item !important;
    list-style-type: none !important;
    margin-left: 1.25rem !important;
}

/*  Icon coloring support */
.accordion-button i, .content-item-text i {
    transition: color 0.2s ease;
}
/*  Hover glow for icons (makes color pops subtle) */
.accordion-button:hover i {
    filter: brightness(1.2);
}
/*  Accent for hovered headers if accent color exists */
.accordion-button:hover[style*="border-left-color"] {
    filter: brightness(1.05);
}
/*  Color pickers in modals */
.form-control-color {
    height: 38px !important;
    width: 100% !important;
    padding: 2px !important;
    border: 1px solid #ced4da !important;
    border-radius: 0 !important;
    cursor: pointer;
}
/* Smooth visual transitions for preview */
.accordion-item,
.accordion-button,
.accordion-body {
    transition: all 0.25s ease;
}

    /* place with other helpers */
    .accordion-item.ie-bottom {
        border-bottom: 1px solid var(--ie-border, #dee2e6) !important;
    }

    .accordion-item.ie-no-bottom {
        border-bottom: none !important;
    }

    .accordion-button i {
        flex-shrink: 0;
    }
/* Prevent conflict with Bootstrap chevron (::after) */
.accordion-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* Inner wrapper handles our icon + text alignment only */
.accordion-inner {
    display: flex;
    align-items: center;
    width: 100%;
}

/* Class for if user selects under line header */
.accordion-button.header-bottom-border {
    border-bottom: 2px solid var(--header-bottom-border-color, #f58025) !important;
    border-radius: 0 !important;
}

/* Ensure chevron arrow stays right-aligned */
.accordion-button::after {
    margin-left: auto !important;
}

/* ======================================================
    Sidebar toggle smoothness
====================================================== */
#sidebarAccordionSettings, #sidebarItemEditor {
    transition: opacity .15s ease;
}

    #sidebarItemEditor.d-none {
        opacity: 0;
    }

    #sidebarItemEditor:not(.d-none) {
        opacity: 1;
    }
/* Per-item appearance helpers applied by editor */
[data-item-id].has-bottom-border {
    border-bottom: 1px solid #dee2e6;
}

#sidebarItemEditor [id$="_wrap"] {
    transition: opacity 0.2s ease, height 0.2s ease;
}

#sidebarItemEditor .d-none {
    opacity: 0;
    height: 0;
    overflow: hidden;
}