/* ==========================================================================
   NEW BEM ARCHITECTURE - Section Content styles
   ========================================================================== */

/* Base Component */
.cdswerx-section,
.cdswerx-section-widget {
    position: relative;
}

/* Content Container */
.cdswerx-section__content {
    /* Content container styles */
}

/* Elements */
.cdswerx-section__title,
.cdswerx-section-title .cdswerx-section-m-title {
    margin: 0;
    display: block;
}

.cdswerx-section__subtitle,
.cdswerx-section-title .cdswerx-section-m-subtitle {
    display: flex;
    align-items: center;
    margin: 0;
}

.cdswerx-section__icon,
.cdswerx-section-title .cdswerx-section-m-icon-holder {
    display: inline-block;
    line-height: 1em;
    font-size: var(--cds-subtitle-icon-size, 1em);
    flex-shrink: 0;
}

.cdswerx-section__icon svg,
.cdswerx-section-title .cdswerx-section-m-icon-holder svg {
    width: var(--cds-subtitle-icon-size, 1em);
    height: var(--cds-subtitle-icon-size, 1em);
    fill: currentColor;
    stroke: currentColor;
}

.cdswerx-section__description,
.cdswerx-section-description.cdswerx-section-m-description-text {
    margin: 0;
    padding: 0;
}

/* Element Modifiers */
.cdswerx-section__subtitle--above,
.cdswerx-section-subtitle--above {
    margin-bottom: 0.5em;
}

.cdswerx-section__subtitle--below,
.cdswerx-section-subtitle--below {
    margin-top: 0.5em;
}

/* Highlight Elements */
.cdswerx-section__highlight--colored,
.cdswerx-section-e-colored {
    /* Color styles will be controlled by Elementor controls */
}

.cdswerx-section__highlight--decorated,
.cdswerx-section-e-decorated {
    /* Decoration styles */
}

/* Component Modifiers - Icon Positioning */
.cdswerx-section--icon-left .cdswerx-section__subtitle,
.cdswerx-section-subtitle-icon-left.cdswerx-section-widget .cdswerx-section-m-subtitle {
    flex-direction: row;
    justify-content: flex-start;
}

.cdswerx-section--icon-right .cdswerx-section__subtitle,
.cdswerx-section-subtitle-icon-right.cdswerx-section-widget .cdswerx-section-m-subtitle {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

.cdswerx-section--icon-left .cdswerx-section__icon,
.cdswerx-section-subtitle-icon-left .cdswerx-section-m-icon-holder {
    margin-right: 0;
}

.cdswerx-section--icon-right .cdswerx-section__icon,
.cdswerx-section-subtitle-icon-right .cdswerx-section-m-icon-holder {
    margin-left: 0;
}

/* Component Modifiers - Layout */
.cdswerx-section--boxed-subtitle .cdswerx-section__subtitle,
.cdswerx-section-widget.cdswerx-section-subtitle-layout--boxed .cdswerx-section-m-subtitle {
    background-color: #f4f4f4;
    border-radius: 4px;
    padding: 1em;
    display: inline-flex;
    width: auto;
}

.cdswerx-section--outlined-subtitle .cdswerx-section__subtitle,
.cdswerx-section-widget.cdswerx-section-subtitle-layout--outlined .cdswerx-section-m-subtitle {
    border: 2px solid #111;
    border-radius: 4px;
    padding: 1em;
    display: inline-flex;
    width: auto;
}

/* Component Modifiers - Title Decoration */
.cdswerx-section--title-italic .cdswerx-section__highlight--decorated,
.cdswerx-section-title-decoration-italic .cdswerx-section-e-decorated {
    font-style: italic;
}

.cdswerx-section--title-bold .cdswerx-section__highlight--decorated,
.cdswerx-section-title-decoration-bold .cdswerx-section-e-decorated {
    font-weight: 700;
}

.cdswerx-section--title-underline .cdswerx-section__highlight--decorated {
    text-decoration: underline;
}

/* Full Box Link Styles */
.cdswerx-section__box-link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.cdswerx-section__box-link:hover {
    text-decoration: none;
    color: inherit;
}

/* Title Link Styles */
.cdswerx-section__title-link {
    display: inline-block;
    text-decoration: none;
    color: inherit;
    transition: color .25s ease-in-out;
    position: relative;
}

.cdswerx-section__title-link:hover {
    text-decoration: none;
}

/* Title Link Underline — ::after pseudo-element (mirrors CTA Button pattern)
   All modifier classes (--underline, --left, --draw, etc.) are on the SAME <a>
   element, so selectors must be COMPOUND (no space), NOT descendant. */
.cdswerx-section__title-link.cdswerx-section__title-link--underline:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: currentColor;
    transition: background-color .25s ease-in-out, width .36s cubic-bezier(.51, .5, .07, .99);
    backface-visibility: hidden;
}

/* Default hover: shrink to 0 unless draw mode */
.cdswerx-section__title-link.cdswerx-section__title-link--underline:not(.cdswerx-section__title-link--draw):hover:after {
    width: 0;
}

/* Alignment — center */
.cdswerx-section__title-link.cdswerx-section__title-link--center:after {
    left: 50%;
    transform: translateX(-50%);
}

/* Alignment — right */
.cdswerx-section__title-link.cdswerx-section__title-link--right:after {
    left: auto;
    right: 0;
}

/* Draw animation */
.cdswerx-section__title-link.cdswerx-section__title-link--draw {
    overflow: hidden;
}

.cdswerx-section__title-link.cdswerx-section__title-link--draw.cdswerx-section__title-link--left:hover:after {
    animation: cds-animate-underline-from-left .7s cubic-bezier(.45, .29, 0, .82) forwards;
}

.cdswerx-section__title-link.cdswerx-section__title-link--draw.cdswerx-section__title-link--right:hover:after {
    animation: cds-animate-underline-from-right .7s cubic-bezier(.45, .29, 0, .82) forwards;
}

/* Draw animation keyframes (duplicated from button-widget.css — each widget
   loads CSS independently, so keyframes must be self-contained) */
@keyframes cds-animate-underline-from-left {
    0% {
        transform: scaleX(1);
        transform-origin: right;
    }
    37% {
        transform: scaleX(0);
        transform-origin: right;
    }
    38% {
        transform: scaleX(0);
        transform-origin: left;
    }
    100% {
        transform: scaleX(1);
        transform-origin: left;
    }
}

@keyframes cds-animate-underline-from-right {
    0% {
        transform: scaleX(1);
        transform-origin: left;
    }
    37% {
        transform: scaleX(0);
        transform-origin: left;
    }
    38% {
        transform: scaleX(0);
        transform-origin: right;
    }
    100% {
        transform: scaleX(1);
        transform-origin: right;
    }
}

/* ==========================================================================
   LEGACY ARCHITECTURE - Section Content styles (Maintain compatibility)
   ========================================================================== */
.cdswerx-section-widget {
    position: relative
}

/* Enhanced spacing controls support */
.cdswerx-section-description.cdswerx-section-m-description-text {
    margin: 0; /* Reset to allow spacing controls to work */
    padding: 0;
}

.cdswerx-section-widget h1 a,
.cdswerx-section-widget h2 a,
.cdswerx-section-widget h3 a,
.cdswerx-section-widget h4 a,
.cdswerx-section-widget h5 a,
.cdswerx-section-widget h6 a{
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    font-style: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;  
}



.cdswerx-section-title .cdswerx-section-m-title {
    margin: 0;
    display: block;
}

.cdswerx-section-title .cdswerx-section-m-subtitle {
    display: flex;
    align-items: center;
    margin: 0;
}

/* Spacing for subtitle above title */
.cdswerx-section-subtitle--above {
    margin-bottom: 0.5em;
}

/* Spacing for subtitle below title */  
.cdswerx-section-subtitle--below {
    margin-top: 0.5em;
}

.cdswerx-section-subtitle-icon-left.cdswerx-section-widget .cdswerx-section-m-subtitle {
    flex-direction: row;
    justify-content: flex-start;
}

.cdswerx-section-subtitle-icon-right.cdswerx-section-widget .cdswerx-section-m-subtitle {
    flex-direction: row-reverse;
    justify-content: flex-start;
}



.cdswerx-section-title .cdswerx-section-m-icon-holder {
    display: inline-block;
    line-height: 1em;
    font-size: var(--cds-subtitle-icon-size, 1em); /* Use CSS variable with fallback */
    flex-shrink: 0; /* Ensure icons respect margin spacing */
}

.cdswerx-section-title .cdswerx-section-m-icon-holder svg {
    width: var(--cds-subtitle-icon-size, 1em); /* Use CSS variable with fallback */
    height: var(--cds-subtitle-icon-size, 1em); /* Use CSS variable with fallback */
    fill: currentColor;
    stroke: currentColor
}

/* Enhanced support for subtitle icon spacing controls */
.cdswerx-section-subtitle-icon-left .cdswerx-section-m-icon-holder {
    margin-right: 0; /* Will be overridden by spacing control */
}

.cdswerx-section-subtitle-icon-right .cdswerx-section-m-icon-holder {
    margin-left: 0; /* Will be overridden by spacing control */
}

.cdswerx-section-title>.cdswerx-section-m-text {
    margin: .5em 0 0;
    padding: 0;
}

.cdswerx-section-button {
    margin-top: .65em
}

.cdswerx-section-title.cdswerx-section-decoration--underline .cdswerx-section-e-decorated {
    text-decoration: underline
}

.cdswerx-section-title.cdswerx-section-decoration--italic .cdswerx-section-e-decorated {
    font-style: italic
}

.cdswerx-section-title.cdswerx-section-decoration--bold .cdswerx-section-e-decorated {
    font-weight: 700
}

.cdswerx-section-title.cdswerx-section-link--underline-draw .cdswerx-section-e-link {
    position: relative;
    text-decoration: none;
    width: 100%;
    background-repeat: no-repeat;
    background-image: linear-gradient(transparent calc(100% - .07em), currentColor .07em);
    background-size: 100% 87%
}

.cdswerx-section-title.cdswerx-section-link--underline-draw .cdswerx-section-e-link:hover {
    color: currentColor;
    text-decoration: none;
    animation: cdswerx-section-animate-underline-multiline 1.1s cubic-bezier(.32, .32, .15, 1.17) forwards
}

.cdswerx-section-title.cdswerx-section-link--underline-draw .cdswerx-section-e-link:focus {
    color: currentColor
}

.cdswerx-section-title.cdswerx-section-text-link--underline>.cdswerx-section-m-text a {
    width: 100%;
    background-repeat: no-repeat;
    background-image: linear-gradient(transparent calc(100% - 1px), currentColor 1px);
    transition: .9s cubic-bezier(.32, .32, .15, 1.17);
    background-size: 0 100%
}

.cdswerx-section-title.cdswerx-section-text-link--underline>.cdswerx-section-m-text a:hover {
    text-decoration: none;
    background-size: 100% 100%
}

.cdswerx-section-title.cdswerx-section-text-link--underline-thick>.cdswerx-section-m-text a {
    width: 100%;
    background-repeat: no-repeat;
    background-image: linear-gradient(transparent calc(100% - 2px), currentColor 2px);
    transition: .9s cubic-bezier(.32, .32, .15, 1.17);
    background-size: 0 100%
}

.cdswerx-section-title.cdswerx-section-text-link--underline-thick>.cdswerx-section-m-text a:hover {
    text-decoration: none;
    background-size: 100% 100%
}

@keyframes cdswerx-section-animate-underline-multiline-thick {
    0% {
        background-size: 100% 93%;
        background-position-x: right
    }

    38% {
        background-size: 0 93%;
        background-position-x: right
    }

    39% {
        background-size: 0 93%;
        background-position-x: left
    }

    100% {
        background-size: 100% 93%;
        background-position-x: left
    }
}

.cdswerx-section-title.cdswerx-section-text-link--underline-initial>.cdswerx-section-m-text a {
    background-repeat: no-repeat;
    background-image: linear-gradient(transparent calc(100% - .07em), currentColor .07em);
    background-size: 100% 93%
}

.cdswerx-section-title.cdswerx-section-text-link--underline-initial>.cdswerx-section-m-text a:hover {
    text-decoration: none;
    animation: cdswerx-section-animate-underline-multiline-thick 1.1s cubic-bezier(.32, .32, .15, 1.17) forwards
}

@media only screen and (max-width:1024px) {
    .cdswerx-section-title.cdswerx-section-title-break--disabled .cdswerx-section-m-title br {
        display: none
    }
    /* Add support for the new disable breaks class */
    .cdswerx-section-disable-title-breaks .cdswerx-section-m-title br {
        display: none
    }
}

/* ─── Responsive line-break spans ────────────────────────────────────────────
 * Each <span class="cdswerx-title-br cdswerx-title-br--{desktop|tablet|mobile}">
 * is hidden by default and revealed only at its own breakpoint.
 * This lets the three position fields operate independently per breakpoint.
 * ─────────────────────────────────────────────────────────────────────────── */
.cdswerx-title-br--desktop,
.cdswerx-title-br--tablet,
.cdswerx-title-br--mobile {
    display: none;
}

@media (min-width: 1025px) {
    .cdswerx-title-br--desktop { display: inline; }
}

@media (max-width: 1024px) and (min-width: 768px) {
    .cdswerx-title-br--tablet { display: inline; }
}

@media (max-width: 767px) {
    .cdswerx-title-br--mobile { display: inline; }
}

/* Disable Title Line Break — responsive classes.
 * Each --no-breaks-{d|t|m} modifier suppresses only its own breakpoint's spans.
 * The legacy --no-title-breaks class hides tablet + mobile spans for backward compat. */
@media (min-width: 1025px) {
    .cdswerx-section--no-breaks-d .cdswerx-title-br--desktop { display: none !important; }
}

@media (max-width: 1024px) and (min-width: 768px) {
    .cdswerx-section--no-breaks-t .cdswerx-title-br--tablet { display: none !important; }
    .cdswerx-section--no-title-breaks .cdswerx-title-br--tablet { display: none !important; }
}

@media (max-width: 767px) {
    .cdswerx-section--no-breaks-m .cdswerx-title-br--mobile { display: none !important; }
    .cdswerx-section--no-title-breaks .cdswerx-title-br--mobile { display: none !important; }
}

/* ─── Responsive decoration / color scope classes ────────────────────────────
 * When a decorated or colored word is only active on certain breakpoints, PHP
 * appends a .cdswerx-highlight--{scope} class (d, t, m, dt, dm, tm).
 * The rules below reset the visual treatment at breakpoints where it is inactive.
 *
 * Reset for --decorated spans must cover: italic, bold, underline + any
 * Elementor-generated color override targeting .cdswerx-section__highlight--decorated.
 * Reset for --colored spans must override color only.
 * ─────────────────────────────────────────────────────────────────────────── */

/* Shared reset shorthand */
.cdswerx-section__highlight--decorated.cdswerx-highlight--reset {
    font-style: inherit !important;
    font-weight: inherit !important;
    text-decoration: none !important;
    color: inherit !important;
    border-bottom: none !important;
}
.cdswerx-section__highlight--colored.cdswerx-highlight--reset {
    color: inherit !important;
}

/* d — desktop only: reset on tablet + mobile */
@media (max-width: 1024px) {
    .cdswerx-section__highlight--decorated.cdswerx-highlight--d {
        font-style: inherit !important;
        font-weight: inherit !important;
        text-decoration: none !important;
        color: inherit !important;
        border-bottom: none !important;
    }
    .cdswerx-section__highlight--colored.cdswerx-highlight--d { color: inherit !important; }
}

/* t — tablet only: reset on desktop */
@media (min-width: 1025px) {
    .cdswerx-section__highlight--decorated.cdswerx-highlight--t {
        font-style: inherit !important;
        font-weight: inherit !important;
        text-decoration: none !important;
        color: inherit !important;
        border-bottom: none !important;
    }
    .cdswerx-section__highlight--colored.cdswerx-highlight--t { color: inherit !important; }
}
/* t — tablet only: also reset on mobile */
@media (max-width: 767px) {
    .cdswerx-section__highlight--decorated.cdswerx-highlight--t {
        font-style: inherit !important;
        font-weight: inherit !important;
        text-decoration: none !important;
        color: inherit !important;
        border-bottom: none !important;
    }
    .cdswerx-section__highlight--colored.cdswerx-highlight--t { color: inherit !important; }
}

/* m — mobile only: reset on desktop + tablet */
@media (min-width: 768px) {
    .cdswerx-section__highlight--decorated.cdswerx-highlight--m {
        font-style: inherit !important;
        font-weight: inherit !important;
        text-decoration: none !important;
        color: inherit !important;
        border-bottom: none !important;
    }
    .cdswerx-section__highlight--colored.cdswerx-highlight--m { color: inherit !important; }
}

/* dt — desktop + tablet (not mobile): reset on mobile */
@media (max-width: 767px) {
    .cdswerx-section__highlight--decorated.cdswerx-highlight--dt {
        font-style: inherit !important;
        font-weight: inherit !important;
        text-decoration: none !important;
        color: inherit !important;
        border-bottom: none !important;
    }
    .cdswerx-section__highlight--colored.cdswerx-highlight--dt { color: inherit !important; }
}

/* dm — desktop + mobile (not tablet): reset on tablet */
@media (max-width: 1024px) and (min-width: 768px) {
    .cdswerx-section__highlight--decorated.cdswerx-highlight--dm {
        font-style: inherit !important;
        font-weight: inherit !important;
        text-decoration: none !important;
        color: inherit !important;
        border-bottom: none !important;
    }
    .cdswerx-section__highlight--colored.cdswerx-highlight--dm { color: inherit !important; }
}

/* tm — tablet + mobile (not desktop): reset on desktop */
@media (min-width: 1025px) {
    .cdswerx-section__highlight--decorated.cdswerx-highlight--tm {
        font-style: inherit !important;
        font-weight: inherit !important;
        text-decoration: none !important;
        color: inherit !important;
        border-bottom: none !important;
    }
    .cdswerx-section__highlight--colored.cdswerx-highlight--tm { color: inherit !important; }
}

/* Title decoration styles */
.cdswerx-section-title-decoration-underline .cdswerx-section-e-decorated {
    text-decoration: underline;
}

.cdswerx-section-title-decoration-italic .cdswerx-section-e-decorated {
    font-style: italic;
}

.cdswerx-section-title-decoration-bold .cdswerx-section-e-decorated {
    font-weight: 700;
}

/* Title link underline draw styles */
.cdswerx-section-title-link-underline-draw .cdswerx-section-e-link {
    position: relative;
    text-decoration: none;
    background-repeat: no-repeat;
    background-image: linear-gradient(transparent calc(100% - .07em), currentColor .07em);
    background-size: 100% 87%;
}

.cdswerx-section-title-link-underline-draw .cdswerx-section-e-link:hover {
    color: currentColor;
    text-decoration: none;
    animation: cdswerx-section-animate-underline-multiline 1.1s cubic-bezier(.32, .32, .15, 1.17) forwards;
}

.cdswerx-section-title-link-underline-draw .cdswerx-section-e-link:focus {
    color: currentColor;
}

/* Text link underline styles */
.cdswerx-section-text-link-underline .cdswerx-section-description a {
    background-repeat: no-repeat;
    background-image: linear-gradient(transparent calc(100% - 1px), currentColor 1px);
    transition: .9s cubic-bezier(.32, .32, .15, 1.17);
    background-size: 0 100%;
    text-decoration: none;
}

.cdswerx-section-text-link-underline .cdswerx-section-description a:hover {
    background-size: 100% 100%;
}

.cdswerx-section-text-link-underline-thick .cdswerx-section-description a {
    background-repeat: no-repeat;
    background-image: linear-gradient(transparent calc(100% - 2px), currentColor 2px);
    transition: .9s cubic-bezier(.32, .32, .15, 1.17);
    background-size: 0 100%;
    text-decoration: none;
}

.cdswerx-section-text-link-underline-thick .cdswerx-section-description a:hover {
    background-size: 100% 100%;
}

.cdswerx-section-text-link-underline-initial .cdswerx-section-description a {
    background-repeat: no-repeat;
    background-image: linear-gradient(transparent calc(100% - .07em), currentColor .07em);
    background-size: 100% 93%;
    text-decoration: none;
}

.cdswerx-section-text-link-underline-initial .cdswerx-section-description a:hover {
    animation: cdswerx-section-animate-underline-multiline-thick 1.1s cubic-bezier(.32, .32, .15, 1.17) forwards;
}

/* ==========================================================================
   Section Title Link Styles (Based on Button Widget Patterns)
   ========================================================================== */

/* Title link base styles */
.cdswerx-section-title-link {
    display: inline-block;
    text-decoration: none;
    color: inherit;
    transition: color .25s ease-in-out;
}

.cdswerx-section-title-link:hover {
    text-decoration: none;
}

/* Title link underline styles */
.cdswerx-section-title-link.cdswerx-section-text-underline .cdswerx-section-m-title {
    position: relative;
}

.cdswerx-section-title-link.cdswerx-section-text-underline .cdswerx-section-m-title:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: currentColor;
    transition: background-color .25s ease-in-out, width .36s cubic-bezier(.51, .5, .07, .99);
    backface-visibility: hidden;
}

/* Hover effect - shrink underline by default */
.cdswerx-section-title-link.cdswerx-section-text-underline:not(.cdswerx-section-title-link-underline-draw):hover .cdswerx-section-m-title:after {
    width: 0;
}

/* Underline position alignment */
.cdswerx-section-title-link.cdswerx-section-text-underline.cdswerx-section-underline--center .cdswerx-section-m-title:after {
    left: 50%;
    transform: translateX(-50%);
}

.cdswerx-section-title-link.cdswerx-section-text-underline.cdswerx-section-underline--right .cdswerx-section-m-title:after {
    left: auto;
    right: 0;
}

/* Draw animation styles */
.cdswerx-section-title-link.cdswerx-section-title-link-underline-draw .cdswerx-section-m-title {
    overflow: hidden;
}

.cdswerx-section-title-link.cdswerx-section-title-link-underline-draw.cdswerx-section-underline--left:hover .cdswerx-section-m-title:after {
    animation: cdswerx-section-animate-underline-from-left .7s cubic-bezier(.45, .29, 0, .82) forwards;
}

.cdswerx-section-title-link.cdswerx-section-title-link-underline-draw.cdswerx-section-underline--right:hover .cdswerx-section-m-title:after {
    animation: cdswerx-section-animate-underline-from-right .7s cubic-bezier(.45, .29, 0, .82) forwards;
}

.cdswerx-section-title-link.cdswerx-section-title-link-underline-draw.cdswerx-section-underline--center:hover .cdswerx-section-m-title:after {
    animation: cdswerx-section-animate-underline-from-left .7s cubic-bezier(.45, .29, 0, .82) forwards;
}

/* ==========================================================================
   Animation Keyframes
   ========================================================================== */
@keyframes cdswerx-section-animate-underline-from-left {
    0% {
        transform: scaleX(1);
        transform-origin: right;
    }
    37% {
        transform: scaleX(0);
        transform-origin: right;
    }
    38% {
        transform: scaleX(0);
        transform-origin: left;
    }
    100% {
        transform: scaleX(1);
        transform-origin: left;
    }
}

@keyframes cdswerx-section-animate-underline-from-right {
    0% {
        transform: scaleX(1);
        transform-origin: left;
    }
    37% {
        transform: scaleX(0);
        transform-origin: left;
    }
    38% {
        transform: scaleX(0);
        transform-origin: right;
    }
    100% {
        transform: scaleX(1);
        transform-origin: right;
    }
}

/* ==========================================================================
   Legacy Styles (Keep for backward compatibility)
   ========================================================================== */

/* Animation keyframes */
@keyframes cdswerx-section-animate-underline-multiline {
    0% {
        background-size: 100% 87%;
        background-position-x: right;
    }
    38% {
        background-size: 0 87%;
        background-position-x: right;
    }
    39% {
        background-size: 0 87%;
        background-position-x: left;
    }
    100% {
        background-size: 100% 87%;
        background-position-x: left;
    }
}

/* ==========================================================================
   Section Widget Styles
   ========================================================================== */

/* Layout-specific Background and Border Styles with Default Padding */
.cdswerx-section-widget.cdswerx-section-subtitle-layout--boxed .cdswerx-section-m-subtitle {
    background-color: #f4f4f4;
    border-radius: 4px;
    padding: 1em; /* Default padding for boxed layout */
    display: inline-flex; /* Only take up content width */
    width: auto; /* Ensure width is not forced to 100% */
}

.cdswerx-section-widget.cdswerx-section-subtitle-layout--outlined .cdswerx-section-m-subtitle {
    border: 2px solid #111;
    border-radius: 4px;
    padding: 1em; /* Default padding for outlined layout */
    display: inline-flex; /* Only take up content width */
    width: auto; /* Ensure width is not forced to 100% */
}

/* Icon Spacing Controls - Target the container with icon position classes */
.cdswerx-section-widget.cdswerx-section-subtitle-icon-left .cdswerx-section-m-icon-holder {
    margin-right: 0; /* Will be overridden by spacing control */
}

.cdswerx-section-widget.cdswerx-section-subtitle-icon-right .cdswerx-section-m-icon-holder {
    margin-left: 0; /* Will be overridden by spacing control */
}

/* Left icon positioning */
.cdswerx-section-widget.cdswerx-section-subtitle-icon-left .cdswerx-section-m-subtitle {
    flex-direction: row;
    justify-content: flex-start;
}

/* Right icon positioning - keep subtitle left-aligned */
.cdswerx-section-widget.cdswerx-section-subtitle-icon-right .cdswerx-section-m-subtitle {
    flex-direction: row;
    justify-content: flex-start;
}

/* ==========================================================================
   Description List Marker Modes
   Applied via list_marker_view control (Default / None / Numbers / Bullets / Icon).
   Bullets mode uses native CSS list-style-type (value set by Elementor selector).
   Icon mode removes native markers and injects a PHP span instead.
   ========================================================================== */

/* Base list defaults — outside position with left indent so wrapped text aligns
   flush with the first line, not under the bullet. Resets browser margin.
   Users can override via the List Margin / List Padding Elementor controls. */
.cdswerx-section__description ul,
.cdswerx-section__description ol {
    margin: 0;
    padding: 0 0 0 1.5em;
    list-style-position: outside;
}

/* None mode — hide markers, keep ul/li tags */
.cdswerx-section__description--marker-none ul,
.cdswerx-section__description--marker-none ol {
    list-style: none;
}

/* Numbers mode — force decimal counters on both ul and ol */
.cdswerx-section__description--marker-numbers ul,
.cdswerx-section__description--marker-numbers ol {
    list-style-type: decimal;
    padding-left: 1.5em;
}

/* Bullets mode — uses native CSS list-style-type (value set by Elementor selector) */
.cdswerx-section__description--marker-bullets ul,
.cdswerx-section__description--marker-bullets ol {
    padding-left: 1.5em;
}

/* Icon mode — remove native markers, inject span */
.cdswerx-section__description--icon-marker ul,
.cdswerx-section__description--icon-marker ol {
    list-style: none;
    padding-left: 0;
}

.cdswerx-section__description--icon-marker li {
    display: flex;
    align-items: baseline;
}

/* Injected marker span (icon mode) */
.cdswerx-section__list-marker {
    flex-shrink: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

.cdswerx-section__list-marker svg {
    fill: currentColor;
    width: 1em;
    height: 1em;
}

/* List Style Position — Inside: bullets/markers flush-left with surrounding text */
.cdswerx-section__description--list-inside ul,
.cdswerx-section__description--list-inside ol {
    list-style-position: inside;
    padding-left: 0;
}

/* List Hover Underline — animated underline on li a hover */
.cdswerx-section__description--list-underline li a {
    background-image: linear-gradient(transparent calc(100% - 1px), currentColor 1px);
    background-size: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.55s cubic-bezier(0.32, 0.32, 0.15, 1.17);
    text-decoration: none;
}

.cdswerx-section__description--list-underline li a:hover {
    background-size: 100% 100%;
}

/* ==========================================================================
   Inner Border (Section widget)
   4-strip + 4-corner-arc technique mirroring Qi Addons. Strips animate via
   scaleX/scaleY (matching Qi exactly). Corner arc <span>s are sized by the
   Radius control and animate in sync with adjacent strips, so the rounded
   outline traces correctly in every hover mode. When Radius = 0 the corners
   collapse to 0×0 and rendering degrades to Qi-identical square output.

   All durations read --cds-ib-anim (default 0.36s) so the Duration control
   retimes every mode from one place. The 0.778× factor (0.28s ÷ 0.36s)
   preserves the relative timing of the 2-phase modes (one-point variants).
   Scoped to .cdswerx-section to avoid colliding with the 4-strip rules in
   button-widget.css that serve the trait widgets.
   ========================================================================== */

/* --- Base wrapper + strips (mirrors button-widget.css:589-644) --- */

.cdswerx-section .cdswerx-button-widget.cdswerx-button-type--inner-border .cdswerx-button-inner-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #111;
    font-size: 4px;
    pointer-events: none;
    transition: color var(--cds-ib-anim, 0.36s) ease-in-out;
}

.cdswerx-section .cdswerx-button-widget.cdswerx-button-type--inner-border .cdswerx-button-border-top,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-type--inner-border .cdswerx-button-border-right,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-type--inner-border .cdswerx-button-border-bottom,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-type--inner-border .cdswerx-button-border-left {
    position: absolute;
    background-color: currentColor;
    transition: background-color var(--cds-ib-anim, 0.36s) ease-in-out;
}

/* Strip default position/size (overridden by Offset + Width controls) */
.cdswerx-section .cdswerx-button-widget.cdswerx-button-type--inner-border .cdswerx-button-border-top    { top: 1em;    left: 1em;  height: 2px; width: calc(100% - 2em); }
.cdswerx-section .cdswerx-button-widget.cdswerx-button-type--inner-border .cdswerx-button-border-right  { top: 1em;    right: 1em; width: 2px;  height: calc(100% - 2em); }
.cdswerx-section .cdswerx-button-widget.cdswerx-button-type--inner-border .cdswerx-button-border-bottom { bottom: 1em; right: 1em; height: 2px; width: calc(100% - 2em); }
.cdswerx-section .cdswerx-button-widget.cdswerx-button-type--inner-border .cdswerx-button-border-left   { bottom: 1em; left: 1em;  width: 2px;  height: calc(100% - 2em); }

/* --- Per-mode STRIP animations (mirrors Qi main.css:3653-3852) --- */

/* All Draw modes — copy-wrapper strips collapsed at rest, scale to full on hover */
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--draw-from-center .cdswerx-button-inner-border-copy .cdswerx-button-border-top,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--draw-from-center .cdswerx-button-inner-border-copy .cdswerx-button-border-right,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--draw-from-center .cdswerx-button-inner-border-copy .cdswerx-button-border-bottom,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--draw-from-center .cdswerx-button-inner-border-copy .cdswerx-button-border-left,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--draw-from-one-point .cdswerx-button-inner-border-copy .cdswerx-button-border-top,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--draw-from-one-point .cdswerx-button-inner-border-copy .cdswerx-button-border-right,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--draw-from-one-point .cdswerx-button-inner-border-copy .cdswerx-button-border-bottom,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--draw-from-one-point .cdswerx-button-inner-border-copy .cdswerx-button-border-left,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--draw-from-two-points .cdswerx-button-inner-border-copy .cdswerx-button-border-top,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--draw-from-two-points .cdswerx-button-inner-border-copy .cdswerx-button-border-right,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--draw-from-two-points .cdswerx-button-inner-border-copy .cdswerx-button-border-bottom,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--draw-from-two-points .cdswerx-button-inner-border-copy .cdswerx-button-border-left {
    transition: transform var(--cds-ib-anim, 0.36s) ease-out;
}

.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--draw-from-center .cdswerx-button-inner-border-copy .cdswerx-button-border-top,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--draw-from-center .cdswerx-button-inner-border-copy .cdswerx-button-border-bottom,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--draw-from-one-point .cdswerx-button-inner-border-copy .cdswerx-button-border-top,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--draw-from-one-point .cdswerx-button-inner-border-copy .cdswerx-button-border-bottom,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--draw-from-two-points .cdswerx-button-inner-border-copy .cdswerx-button-border-top,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--draw-from-two-points .cdswerx-button-inner-border-copy .cdswerx-button-border-bottom {
    transform: scaleX(0);
}

.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--draw-from-center .cdswerx-button-inner-border-copy .cdswerx-button-border-left,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--draw-from-center .cdswerx-button-inner-border-copy .cdswerx-button-border-right,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--draw-from-one-point .cdswerx-button-inner-border-copy .cdswerx-button-border-left,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--draw-from-one-point .cdswerx-button-inner-border-copy .cdswerx-button-border-right,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--draw-from-two-points .cdswerx-button-inner-border-copy .cdswerx-button-border-left,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--draw-from-two-points .cdswerx-button-inner-border-copy .cdswerx-button-border-right {
    transform: scaleY(0);
}

.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--draw-from-center:hover .cdswerx-button-inner-border-copy .cdswerx-button-border-top,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--draw-from-center:hover .cdswerx-button-inner-border-copy .cdswerx-button-border-right,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--draw-from-center:hover .cdswerx-button-inner-border-copy .cdswerx-button-border-bottom,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--draw-from-center:hover .cdswerx-button-inner-border-copy .cdswerx-button-border-left,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--draw-from-one-point:hover .cdswerx-button-inner-border-copy .cdswerx-button-border-top,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--draw-from-one-point:hover .cdswerx-button-inner-border-copy .cdswerx-button-border-right,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--draw-from-one-point:hover .cdswerx-button-inner-border-copy .cdswerx-button-border-bottom,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--draw-from-one-point:hover .cdswerx-button-inner-border-copy .cdswerx-button-border-left,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--draw-from-two-points:hover .cdswerx-button-inner-border-copy .cdswerx-button-border-top,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--draw-from-two-points:hover .cdswerx-button-inner-border-copy .cdswerx-button-border-right,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--draw-from-two-points:hover .cdswerx-button-inner-border-copy .cdswerx-button-border-bottom,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--draw-from-two-points:hover .cdswerx-button-inner-border-copy .cdswerx-button-border-left {
    transform: scaleX(1) scaleY(1);
}

/* Draw From One Point — faster (0.778× anim) + 2-phase delays anchored at top-left */
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--draw-from-one-point .cdswerx-button-inner-border-copy .cdswerx-button-border-top,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--draw-from-one-point .cdswerx-button-inner-border-copy .cdswerx-button-border-right,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--draw-from-one-point .cdswerx-button-inner-border-copy .cdswerx-button-border-bottom,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--draw-from-one-point .cdswerx-button-inner-border-copy .cdswerx-button-border-left {
    transition-duration: calc(var(--cds-ib-anim, 0.36s) * 0.778);
}
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--draw-from-one-point .cdswerx-button-inner-border-copy .cdswerx-button-border-top,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--draw-from-one-point .cdswerx-button-inner-border-copy .cdswerx-button-border-bottom {
    transform-origin: left;
}
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--draw-from-one-point .cdswerx-button-inner-border-copy .cdswerx-button-border-left,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--draw-from-one-point .cdswerx-button-inner-border-copy .cdswerx-button-border-right {
    transform-origin: top;
}
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--draw-from-one-point .cdswerx-button-inner-border-copy .cdswerx-button-border-top,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--draw-from-one-point .cdswerx-button-inner-border-copy .cdswerx-button-border-left {
    transition-delay: calc(var(--cds-ib-anim, 0.36s) * 0.778);
}
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--draw-from-one-point .cdswerx-button-inner-border-copy .cdswerx-button-border-bottom,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--draw-from-one-point .cdswerx-button-inner-border-copy .cdswerx-button-border-right {
    transition-delay: 0s;
}
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--draw-from-one-point:hover .cdswerx-button-inner-border-copy .cdswerx-button-border-top,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--draw-from-one-point:hover .cdswerx-button-inner-border-copy .cdswerx-button-border-left {
    transition-delay: 0s;
}
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--draw-from-one-point:hover .cdswerx-button-inner-border-copy .cdswerx-button-border-bottom,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--draw-from-one-point:hover .cdswerx-button-inner-border-copy .cdswerx-button-border-right {
    transition-delay: calc(var(--cds-ib-anim, 0.36s) * 0.778);
}

/* Draw From Two Points — diagonal anchors (top-left + bottom-right) */
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--draw-from-two-points .cdswerx-button-inner-border-copy .cdswerx-button-border-top    { transform-origin: left; }
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--draw-from-two-points .cdswerx-button-inner-border-copy .cdswerx-button-border-bottom { transform-origin: right; }
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--draw-from-two-points .cdswerx-button-inner-border-copy .cdswerx-button-border-left  { transform-origin: top; }
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--draw-from-two-points .cdswerx-button-inner-border-copy .cdswerx-button-border-right { transform-origin: bottom; }

/* All Remove modes — primary-wrapper strips visible at rest, collapse on hover */
.cdswerx-section .cdswerx-button-widget.cdswerx-button-type--inner-border.cdswerx-button-inner-border-hover--remove-to-center .cdswerx-button-inner-border .cdswerx-button-border-top,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-type--inner-border.cdswerx-button-inner-border-hover--remove-to-center .cdswerx-button-inner-border .cdswerx-button-border-right,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-type--inner-border.cdswerx-button-inner-border-hover--remove-to-center .cdswerx-button-inner-border .cdswerx-button-border-bottom,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-type--inner-border.cdswerx-button-inner-border-hover--remove-to-center .cdswerx-button-inner-border .cdswerx-button-border-left,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-type--inner-border.cdswerx-button-inner-border-hover--remove-to-one-point .cdswerx-button-inner-border .cdswerx-button-border-top,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-type--inner-border.cdswerx-button-inner-border-hover--remove-to-one-point .cdswerx-button-inner-border .cdswerx-button-border-right,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-type--inner-border.cdswerx-button-inner-border-hover--remove-to-one-point .cdswerx-button-inner-border .cdswerx-button-border-bottom,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-type--inner-border.cdswerx-button-inner-border-hover--remove-to-one-point .cdswerx-button-inner-border .cdswerx-button-border-left,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-type--inner-border.cdswerx-button-inner-border-hover--remove-to-two-points .cdswerx-button-inner-border .cdswerx-button-border-top,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-type--inner-border.cdswerx-button-inner-border-hover--remove-to-two-points .cdswerx-button-inner-border .cdswerx-button-border-right,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-type--inner-border.cdswerx-button-inner-border-hover--remove-to-two-points .cdswerx-button-inner-border .cdswerx-button-border-bottom,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-type--inner-border.cdswerx-button-inner-border-hover--remove-to-two-points .cdswerx-button-inner-border .cdswerx-button-border-left {
    transition: background-color var(--cds-ib-anim, 0.36s) ease-in-out, transform var(--cds-ib-anim, 0.36s) ease-out;
    transform: scaleX(1) scaleY(1);
}
.cdswerx-section .cdswerx-button-widget.cdswerx-button-type--inner-border.cdswerx-button-inner-border-hover--remove-to-center:hover .cdswerx-button-inner-border .cdswerx-button-border-top,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-type--inner-border.cdswerx-button-inner-border-hover--remove-to-center:hover .cdswerx-button-inner-border .cdswerx-button-border-bottom,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-type--inner-border.cdswerx-button-inner-border-hover--remove-to-one-point:hover .cdswerx-button-inner-border .cdswerx-button-border-top,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-type--inner-border.cdswerx-button-inner-border-hover--remove-to-one-point:hover .cdswerx-button-inner-border .cdswerx-button-border-bottom,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-type--inner-border.cdswerx-button-inner-border-hover--remove-to-two-points:hover .cdswerx-button-inner-border .cdswerx-button-border-top,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-type--inner-border.cdswerx-button-inner-border-hover--remove-to-two-points:hover .cdswerx-button-inner-border .cdswerx-button-border-bottom {
    transform: scaleX(0);
}
.cdswerx-section .cdswerx-button-widget.cdswerx-button-type--inner-border.cdswerx-button-inner-border-hover--remove-to-center:hover .cdswerx-button-inner-border .cdswerx-button-border-left,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-type--inner-border.cdswerx-button-inner-border-hover--remove-to-center:hover .cdswerx-button-inner-border .cdswerx-button-border-right,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-type--inner-border.cdswerx-button-inner-border-hover--remove-to-one-point:hover .cdswerx-button-inner-border .cdswerx-button-border-left,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-type--inner-border.cdswerx-button-inner-border-hover--remove-to-one-point:hover .cdswerx-button-inner-border .cdswerx-button-border-right,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-type--inner-border.cdswerx-button-inner-border-hover--remove-to-two-points:hover .cdswerx-button-inner-border .cdswerx-button-border-left,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-type--inner-border.cdswerx-button-inner-border-hover--remove-to-two-points:hover .cdswerx-button-inner-border .cdswerx-button-border-right {
    transform: scaleY(0);
}

/* Remove To One Point — faster (0.778× anim) + 2-phase delays anchored at top-left */
.cdswerx-section .cdswerx-button-widget.cdswerx-button-type--inner-border.cdswerx-button-inner-border-hover--remove-to-one-point .cdswerx-button-inner-border .cdswerx-button-border-top,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-type--inner-border.cdswerx-button-inner-border-hover--remove-to-one-point .cdswerx-button-inner-border .cdswerx-button-border-right,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-type--inner-border.cdswerx-button-inner-border-hover--remove-to-one-point .cdswerx-button-inner-border .cdswerx-button-border-bottom,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-type--inner-border.cdswerx-button-inner-border-hover--remove-to-one-point .cdswerx-button-inner-border .cdswerx-button-border-left {
    transition: background-color var(--cds-ib-anim, 0.36s) ease-in-out, transform calc(var(--cds-ib-anim, 0.36s) * 0.778) ease-out;
}
.cdswerx-section .cdswerx-button-widget.cdswerx-button-type--inner-border.cdswerx-button-inner-border-hover--remove-to-one-point .cdswerx-button-inner-border .cdswerx-button-border-top,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-type--inner-border.cdswerx-button-inner-border-hover--remove-to-one-point .cdswerx-button-inner-border .cdswerx-button-border-bottom {
    transform-origin: left;
}
.cdswerx-section .cdswerx-button-widget.cdswerx-button-type--inner-border.cdswerx-button-inner-border-hover--remove-to-one-point .cdswerx-button-inner-border .cdswerx-button-border-left,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-type--inner-border.cdswerx-button-inner-border-hover--remove-to-one-point .cdswerx-button-inner-border .cdswerx-button-border-right {
    transform-origin: top;
}
.cdswerx-section .cdswerx-button-widget.cdswerx-button-type--inner-border.cdswerx-button-inner-border-hover--remove-to-one-point .cdswerx-button-inner-border .cdswerx-button-border-top,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-type--inner-border.cdswerx-button-inner-border-hover--remove-to-one-point .cdswerx-button-inner-border .cdswerx-button-border-left {
    transition-delay: 0s, 0s;
}
.cdswerx-section .cdswerx-button-widget.cdswerx-button-type--inner-border.cdswerx-button-inner-border-hover--remove-to-one-point .cdswerx-button-inner-border .cdswerx-button-border-bottom,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-type--inner-border.cdswerx-button-inner-border-hover--remove-to-one-point .cdswerx-button-inner-border .cdswerx-button-border-right {
    transition-delay: 0s, calc(var(--cds-ib-anim, 0.36s) * 0.778);
}
.cdswerx-section .cdswerx-button-widget.cdswerx-button-type--inner-border.cdswerx-button-inner-border-hover--remove-to-one-point:hover .cdswerx-button-inner-border .cdswerx-button-border-top,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-type--inner-border.cdswerx-button-inner-border-hover--remove-to-one-point:hover .cdswerx-button-inner-border .cdswerx-button-border-left {
    transition-delay: 0s, calc(var(--cds-ib-anim, 0.36s) * 0.778);
}
.cdswerx-section .cdswerx-button-widget.cdswerx-button-type--inner-border.cdswerx-button-inner-border-hover--remove-to-one-point:hover .cdswerx-button-inner-border .cdswerx-button-border-bottom,
.cdswerx-section .cdswerx-button-widget.cdswerx-button-type--inner-border.cdswerx-button-inner-border-hover--remove-to-one-point:hover .cdswerx-button-inner-border .cdswerx-button-border-right {
    transition-delay: 0s, 0s;
}

/* Remove To Two Points — diagonal anchors */
.cdswerx-section .cdswerx-button-widget.cdswerx-button-type--inner-border.cdswerx-button-inner-border-hover--remove-to-two-points .cdswerx-button-border-top    { transform-origin: left; }
.cdswerx-section .cdswerx-button-widget.cdswerx-button-type--inner-border.cdswerx-button-inner-border-hover--remove-to-two-points .cdswerx-button-border-bottom { transform-origin: right; }
.cdswerx-section .cdswerx-button-widget.cdswerx-button-type--inner-border.cdswerx-button-inner-border-hover--remove-to-two-points .cdswerx-button-border-left  { transform-origin: top; }
.cdswerx-section .cdswerx-button-widget.cdswerx-button-type--inner-border.cdswerx-button-inner-border-hover--remove-to-two-points .cdswerx-button-border-right { transform-origin: bottom; }

/* --- Move To Outer Edge — single bordered container slides outward --- */
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--move-to-outer-edge {
    overflow: visible;
}
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--move-to-outer-edge .cdswerx-button-inner-border {
    top: 1em;
    left: 1em;
    width: calc(100% - 2em);
    height: calc(100% - 2em);
    border: 1px solid currentColor;
    transition: all var(--cds-ib-anim, 0.3s) cubic-bezier(0.46, 0.03, 0.52, 0.96);
}
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-hover--move-to-outer-edge:hover .cdswerx-button-inner-border {
    top: -1em;
    left: -1em;
    width: calc(100% + 2em);
    height: calc(100% + 2em);
}

/* --- Rounded Change Color — bordered <div> with CSS border-radius clamp semantics.
   Geometry consumes --cds-ib-offset; border-width consumes --cds-ib-border-width. --- */
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-mode--rounded:not([class*="cdswerx-button-inner-border-hover--"]) .cdswerx-button-inner-border {
    top: var(--cds-ib-offset, 4px);
    left: var(--cds-ib-offset, 4px);
    width: calc(100% - 2 * var(--cds-ib-offset, 4px));
    height: calc(100% - 2 * var(--cds-ib-offset, 4px));
    border: var(--cds-ib-border-width, 2px) solid currentColor;
}

/* ==========================================================================
   Inner Border — Rounded mode (Section widget)
   Renders an SVG <rect rx> outline. stroke-dasharray + stroke-dashoffset
   animate the perimeter draw/remove. The rect uses pathLength="100" so the
   dasharray range is always 0–100 regardless of button dimensions — no JS.
   Right-anchored variants are achieved by mirroring the SVG horizontally
   (transform: scaleX(-1)), since SVG <rect>s start at top-left and go
   clockwise.
   ========================================================================== */

/* SVG container — sized + positioned via --cds-ib-offset (set by Offset control on wrapper).
   Geometry lives here in the stylesheet so it cannot collide with :hover rules. */
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-mode--rounded .cdswerx-button-inner-border-svg {
    position: absolute;
    pointer-events: none;
    overflow: visible;
    display: block;
    top: var(--cds-ib-offset, 4px);
    left: var(--cds-ib-offset, 4px);
    width: calc(100% - 2 * var(--cds-ib-offset, 4px));
    height: calc(100% - 2 * var(--cds-ib-offset, 4px));
    color: #111;
    transition: color var(--cds-ib-anim, 0.36s) ease-in-out;
}

/* Default rect state — full perimeter visible, stroke transitions.
   stroke-width consumes --cds-ib-border-width emitted by Width control. */
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-mode--rounded .cdswerx-button-inner-border-rect {
    stroke: currentColor;
    stroke-width: var(--cds-ib-border-width, 2px);
    stroke-dasharray: 100;
    stroke-dashoffset: 0;
    transition:
        stroke var(--cds-ib-anim, 0.36s) ease-in-out,
        stroke-dashoffset var(--cds-ib-anim, 0.36s) ease-out;
}

/* --- Draw From Left Point — clockwise stroke from top-left --- */
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-mode--rounded.cdswerx-button-inner-border-hover--draw-from-left-point .cdswerx-button-inner-border-rect {
    stroke-dashoffset: 100;
}
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-mode--rounded.cdswerx-button-inner-border-hover--draw-from-left-point:hover .cdswerx-button-inner-border-rect {
    stroke-dashoffset: 0;
}

/* --- Draw From Right Point — mirror SVG horizontally; same animation visually goes counterclockwise from top-right --- */
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-mode--rounded.cdswerx-button-inner-border-hover--draw-from-right-point .cdswerx-button-inner-border-svg {
    transform: scaleX(-1);
}
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-mode--rounded.cdswerx-button-inner-border-hover--draw-from-right-point .cdswerx-button-inner-border-rect {
    stroke-dashoffset: 100;
}
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-mode--rounded.cdswerx-button-inner-border-hover--draw-from-right-point:hover .cdswerx-button-inner-border-rect {
    stroke-dashoffset: 0;
}

/* --- Remove From Left Point — eaten clockwise starting at top-left --- */
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-mode--rounded.cdswerx-button-inner-border-hover--remove-from-left-point .cdswerx-button-inner-border-rect {
    stroke-dashoffset: 0;
}
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-mode--rounded.cdswerx-button-inner-border-hover--remove-from-left-point:hover .cdswerx-button-inner-border-rect {
    stroke-dashoffset: -100;
}

/* --- Remove From Right Point — mirror; visually erases counterclockwise from top-right --- */
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-mode--rounded.cdswerx-button-inner-border-hover--remove-from-right-point .cdswerx-button-inner-border-svg {
    transform: scaleX(-1);
}
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-mode--rounded.cdswerx-button-inner-border-hover--remove-from-right-point .cdswerx-button-inner-border-rect {
    stroke-dashoffset: 0;
}
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-mode--rounded.cdswerx-button-inner-border-hover--remove-from-right-point:hover .cdswerx-button-inner-border-rect {
    stroke-dashoffset: -100;
}

/* --- Remove To Center (rounded) — single bordered <div> contracts inward to its center.
   Inverse of Move-To-Outer-Edge. Rest geometry consumes --cds-ib-offset; on hover those
   values shrink toward 50%/50%/0/0. */
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-mode--rounded.cdswerx-button-inner-border-hover--remove-to-center .cdswerx-button-inner-border {
    top: var(--cds-ib-offset, 4px);
    left: var(--cds-ib-offset, 4px);
    width: calc(100% - 2 * var(--cds-ib-offset, 4px));
    height: calc(100% - 2 * var(--cds-ib-offset, 4px));
    border: var(--cds-ib-border-width, 2px) solid currentColor;
    transition: all var(--cds-ib-anim, 0.3s) cubic-bezier(0.46, 0.03, 0.52, 0.96);
}
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-mode--rounded.cdswerx-button-inner-border-hover--remove-to-center:hover .cdswerx-button-inner-border {
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    opacity: 0;
}

/* --- Move To Outer Edge (rounded) — single bordered <div> expands outward.
   Overrides the generic .move-to-outer-edge rules above to consume --cds-ib-offset so the
   offset value the user sets actually drives the expansion distance. Rest + hover both live
   here in the stylesheet so there is no Elementor specificity competitor for these properties. */
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-mode--rounded.cdswerx-button-inner-border-hover--move-to-outer-edge .cdswerx-button-inner-border {
    top: var(--cds-ib-offset, 4px);
    left: var(--cds-ib-offset, 4px);
    width: calc(100% - 2 * var(--cds-ib-offset, 4px));
    height: calc(100% - 2 * var(--cds-ib-offset, 4px));
    border: var(--cds-ib-border-width, 2px) solid currentColor;
    transition: all var(--cds-ib-anim, 0.3s) cubic-bezier(0.46, 0.03, 0.52, 0.96);
}
.cdswerx-section .cdswerx-button-widget.cdswerx-button-inner-border-mode--rounded.cdswerx-button-inner-border-hover--move-to-outer-edge:hover .cdswerx-button-inner-border {
    top: calc(-1 * var(--cds-ib-offset, 4px));
    left: calc(-1 * var(--cds-ib-offset, 4px));
    width: calc(100% + 2 * var(--cds-ib-offset, 4px));
    height: calc(100% + 2 * var(--cds-ib-offset, 4px));
}