/* CMS Pro compatibility for the UX Modern client structure.
 * Every selector is route-scoped so normal client forms and dashboards keep
 * their configured workspace width and native Bootstrap behavior. */

/* Let CMS page backgrounds and sections reach the viewport edges. Each CMS
 * page keeps control of its own inner Bootstrap container width so the live
 * layout stays faithful to the original authored template. */
body.ux-cmspro-page {
    --ux-workspace-rail: 0px !important;
    padding-top: 0 !important;
}

/* The branded website header remains the only navigation on CMS Pro pages.
 * Reserve exactly its height without retaining space for the client menu. */
body.ux-branded-header.ux-layout-topbar.ux-cmspro-page,
body.ux-branded-header.ux-layout-sidebar.ux-cmspro-page {
    padding-top: var(--ux-brand-header-height) !important;
}

body[class*="plugin-cmspro"] .ux-cmspro-content,
body[class*="plugin-cmspro"] .ux-page-title + .container-md {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    /* CMS sections already provide their own vertical rhythm, so the portal
     * workspace must meet the navigation and footer without blank bands. */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

body[class*="plugin-cmspro"] .ux-cmspro-content > .row,
body[class*="plugin-cmspro"] .ux-page-title + .container-md > .row {
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

body[class*="plugin-cmspro"] .ux-cmspro-content > .row > :not(link):not(style):not(script),
body[class*="plugin-cmspro"] .ux-page-title + .container-md > .row > :not(link):not(style):not(script) {
    width: 100% !important;
    max-width: none !important;
}

/* CMS FAQs use Bootstrap 5's accordion-button markup. Supply the structural
 * rules missing from Bootstrap 4 and use the homepage FAQ card design on
 * product pages so every public accordion feels like the same website. */
body[class*="plugin-cmspro"] .custom-accordion .accordion-button,
body[class*="plugin-cmspro"] .product-faq .accordion-button,
body[class*="plugin-cmspro"] .faq-section .accordion-button {
    position: relative;
    display: flex !important;
    width: 100% !important;
    align-items: center;
    text-align: left;
    border: 0 !important;
}

body[class*="plugin-cmspro"] .custom-accordion .accordion-button::after,
body[class*="plugin-cmspro"] .product-faq .accordion-button::after,
body[class*="plugin-cmspro"] .faq-section .accordion-button::after {
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
    margin-left: auto;
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%230f172a' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 1rem;
    transition: transform .2s ease-in-out;
}

body[class*="plugin-cmspro"] .custom-accordion .accordion-button.collapsed::after,
body[class*="plugin-cmspro"] .product-faq .accordion-button.collapsed::after,
body[class*="plugin-cmspro"] .faq-section .accordion-button.collapsed::after {
    transform: rotate(0deg);
}

body[class*="plugin-cmspro"] .custom-accordion .accordion-button:not(.collapsed)::after,
body[class*="plugin-cmspro"] .product-faq .accordion-button:not(.collapsed)::after,
body[class*="plugin-cmspro"] .faq-section .accordion-button:not(.collapsed)::after {
    transform: rotate(180deg);
}

/* Keep the expanded question and answer visually connected. Some CMS page
 * styles add space below the heading, which otherwise creates a white stripe. */
body[class*="plugin-cmspro"] .custom-accordion .accordion-header,
body[class*="plugin-cmspro"] .product-faq .accordion-header,
body[class*="plugin-cmspro"] .faq-section .accordion-header {
    margin-bottom: 0 !important;
}

body[class*="plugin-cmspro"] .product-faq .accordion,
body[class*="plugin-cmspro"] .faq-section .accordion {
    display: grid !important;
    gap: .75rem !important;
}

body[class*="plugin-cmspro"] .product-faq .accordion-item,
body[class*="plugin-cmspro"] .faq-section .accordion-item {
    overflow: hidden;
    margin: 0 !important;
    border: 1px solid #d8dfe4 !important;
    border-radius: 14px !important;
    background: #fff;
    box-shadow: 0 5px 16px rgba(20, 35, 48, .035);
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

body[class*="plugin-cmspro"] .product-faq .accordion-item:hover,
body[class*="plugin-cmspro"] .faq-section .accordion-item:hover {
    border-color: #9cabb5 !important;
    box-shadow: 0 11px 24px rgba(20, 35, 48, .07);
    transform: translateY(-2px);
}

body[class*="plugin-cmspro"] .product-faq .accordion-button,
body[class*="plugin-cmspro"] .faq-section .accordion-button {
    padding: 1.35rem 1.5rem !important;
    background: transparent !important;
    color: #152433 !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

/* Open FAQs use a calm navy hierarchy with cyan reserved for a small brand
 * accent. The white answer surface keeps longer text clear and comfortable. */
body[class*="plugin-cmspro"] .custom-accordion .accordion-button:not(.collapsed),
body[class*="plugin-cmspro"] .product-faq .accordion-button:not(.collapsed),
body[class*="plugin-cmspro"] .faq-section .accordion-button:not(.collapsed) {
    background: #f6f8fa !important;
    color: #17364b !important;
    box-shadow: inset 3px 0 0 #1487ad !important;
}

body[class*="plugin-cmspro"] .product-faq .accordion-button:focus-visible,
body[class*="plugin-cmspro"] .faq-section .accordion-button:focus-visible {
    outline: 3px solid rgba(56, 189, 248, .28);
    outline-offset: -3px;
}

body[class*="plugin-cmspro"] .custom-accordion .accordion-collapse.show,
body[class*="plugin-cmspro"] .product-faq .accordion-collapse.show,
body[class*="plugin-cmspro"] .faq-section .accordion-collapse.show {
    background: #fff !important;
}

body[class*="plugin-cmspro"] .custom-accordion .accordion-body,
body[class*="plugin-cmspro"] .product-faq .accordion-body,
body[class*="plugin-cmspro"] .faq-section .accordion-body {
    padding: 1.05rem 1.5rem 1.4rem !important;
    border-top: 1px solid #e3e9ed;
    background: #fff !important;
    color: #506373 !important;
    font-size: .92rem !important;
    font-weight: 500 !important;
    line-height: 1.75 !important;
}

@media (max-width: 575.98px) {
    body[class*="plugin-cmspro"] .product-faq .accordion-button,
    body[class*="plugin-cmspro"] .faq-section .accordion-button {
        padding: 1.15rem !important;
        font-size: .94rem !important;
    }

    body[class*="plugin-cmspro"] .custom-accordion .accordion-body,
    body[class*="plugin-cmspro"] .product-faq .accordion-body,
    body[class*="plugin-cmspro"] .faq-section .accordion-body {
        padding: .95rem 1.15rem 1.15rem !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[class*="plugin-cmspro"] .custom-accordion .accordion-button::after,
    body[class*="plugin-cmspro"] .product-faq .accordion-button::after,
    body[class*="plugin-cmspro"] .faq-section .accordion-button::after {
        transition: none;
    }

    body[class*="plugin-cmspro"] .product-faq .accordion-item,
    body[class*="plugin-cmspro"] .faq-section .accordion-item {
        transition: none;
    }

    body[class*="plugin-cmspro"] .product-faq .accordion-item:hover,
    body[class*="plugin-cmspro"] .faq-section .accordion-item:hover {
        transform: none;
    }
}