/* ==========================================================
   WP24 — BUTTON SYSTEM V7.6
   PRIMARY + SECONDARY
   Smooth Circular Reveal — 750ms
   Elementor V4 / DUP Compatible
   SVG original size preserved
========================================================== */


/* ==========================================================
   01. BASE COMMUNE
========================================================== */

:is(.wp24-btn, .DUP_wp24-btn) {

    --wp24-navy: #041D2C;
    --wp24-blue: #7DB3FF;
    --wp24-white: #FFFFFF;

    --wp24-duration: 750ms;
    --wp24-ease: cubic-bezier(0.22, 1, 0.36, 1);

    --wp24-bg: transparent;
    --wp24-border: transparent;
    --wp24-text: #041D2C;

    --wp24-fill: #041D2C;
    --wp24-hover-text: #FFFFFF;

    --wp24-icon-bg: transparent;
    --wp24-icon-color: #041D2C;

    --wp24-icon-hover-bg: #FFFFFF;
    --wp24-icon-hover-color: #041D2C;

    position: relative !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 18px !important;

    width: fit-content;
    max-width: 100%;

    padding: 5px 6px 5px 18px !important;

    background: var(--wp24-bg) !important;
    border: 1px solid var(--wp24-border) !important;
    border-radius: 100px !important;

    color: var(--wp24-text) !important;

    overflow: hidden !important;
    isolation: isolate;

    box-sizing: border-box;
    cursor: pointer;

    text-decoration: none !important;

    transition:
        color var(--wp24-duration) var(--wp24-ease),
        border-color var(--wp24-duration) var(--wp24-ease);
}


/* ==========================================================
   02. CIRCULAR FILL EFFECT
========================================================== */

:is(.wp24-btn, .DUP_wp24-btn)::before {

    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    background: var(--wp24-fill);

    clip-path: circle(
        0% at calc(100% - 23px) 50%
    );

    pointer-events: none;

    transition:
        clip-path var(--wp24-duration) var(--wp24-ease);
}


/* ==========================================================
   03. TEXT
========================================================== */

:is(.wp24-btn, .DUP_wp24-btn)
:is(.e-paragraph-base, .wp24-btn-text) {

    position: relative;
    z-index: 2;

    margin: 0 !important;
    padding: 0 !important;

    color: inherit !important;

    transition:
        color var(--wp24-duration) var(--wp24-ease);
}

:is(.wp24-btn, .DUP_wp24-btn)
:is(p, span, strong, b) {

    color: inherit !important;
}


/* ==========================================================
   04. ICON CONTAINER
   SVG dimensions untouched
========================================================== */

:is(.wp24-btn, .DUP_wp24-btn)
:is(
    .e-svg-base,
    .elementor-icon,
    .wp24-btn-icon
) {

    position: relative;
    z-index: 2;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex-shrink: 0;

    padding: 8px !important;
    margin: 0 !important;

    background: var(--wp24-icon-bg) !important;
    color: var(--wp24-icon-color) !important;

    border-radius: 50% !important;

    transition:
        background-color var(--wp24-duration) var(--wp24-ease),
        color var(--wp24-duration) var(--wp24-ease);
}


/* ==========================================================
   05. SVG
   KEEP ORIGINAL WIDTH AND HEIGHT
========================================================== */

:is(.wp24-btn, .DUP_wp24-btn) svg {

    display: block;
    flex-shrink: 0;

    color: inherit !important;

    transition:
        transform var(--wp24-duration) var(--wp24-ease);
}

:is(.wp24-btn, .DUP_wp24-btn)
svg :is(path, line, polyline)[stroke]:not([stroke="none"]) {

    stroke: currentColor !important;
}

:is(.wp24-btn, .DUP_wp24-btn)
svg [fill]:not([fill="none"]) {

    fill: currentColor !important;
}


/* ==========================================================
   06. PRIMARY
   Normal : Blue
   Hover  : Night Blue
========================================================== */

:is(.wp24-btn-primary, .DUP_wp24-btn-primary) {

    --wp24-bg: #7DB3FF;
    --wp24-border: #7DB3FF;
    --wp24-text: #041D2C;

    --wp24-fill: #041D2C;
    --wp24-hover-text: #FFFFFF;

    --wp24-icon-bg: #041D2C;
    --wp24-icon-color: #FFFFFF;

    --wp24-icon-hover-bg: #FFFFFF;
    --wp24-icon-hover-color: #041D2C;
}


/* ==========================================================
   07. SECONDARY
   Normal : Night Blue
   Hover  : White
========================================================== */

:is(.wp24-btn-secondary, .DUP_wp24-btn-secondary) {

    --wp24-bg: #041D2C;
    --wp24-border: #041D2C;
    --wp24-text: #FFFFFF;

    --wp24-fill: #FFFFFF;
    --wp24-hover-text: #041D2C;

    --wp24-icon-bg: #FFFFFF;
    --wp24-icon-color: #041D2C;

    --wp24-icon-hover-bg: transparent;
    --wp24-icon-hover-color: #041D2C;
}


/* ==========================================================
   08. HOVER ANIMATIONS
========================================================== */

@media (hover: hover) {

    /* Circular reveal */

    :is(.wp24-btn, .DUP_wp24-btn):hover::before {

        clip-path: circle(
            150% at calc(100% - 23px) 50%
        );
    }

    /* Text transition */

    :is(.wp24-btn, .DUP_wp24-btn):hover {

        color: var(--wp24-hover-text) !important;
    }

    /* Icon circle transition */

    :is(.wp24-btn, .DUP_wp24-btn):hover
    :is(
        .e-svg-base,
        .elementor-icon,
        .wp24-btn-icon
    ) {

        background: var(--wp24-icon-hover-bg) !important;

        color: var(--wp24-icon-hover-color) !important;
    }

    /* Arrow subtle movement */

    :is(.wp24-btn, .DUP_wp24-btn):hover svg {

        transform: translateX(2px);
    }
}


/* ==========================================================
   09. FOCUS
========================================================== */

:is(.wp24-btn, .DUP_wp24-btn):focus-visible {

    outline: 2px solid #154A8E;
    outline-offset: 4px;
}


/* ==========================================================
   10. MOBILE
========================================================== */

@media (max-width: 767px) {

    :is(.wp24-btn, .DUP_wp24-btn) {

        gap: 12px !important;
        padding: 5px 6px 5px 16px !important;
    }
}


/* ==========================================================
   11. REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    :is(.wp24-btn, .DUP_wp24-btn),
    :is(.wp24-btn, .DUP_wp24-btn)::before,
    :is(.wp24-btn, .DUP_wp24-btn) * {

        transition-duration: 0.01ms !important;
        animation: none !important;
    }
}


/* ==========================================================
   WP24 — PRIMARY BUTTON
   WHITE BORDER ON HOVER
========================================================== */

@media (hover: hover) {
    :is(
        .wp24-btn-primary,
        .DUP_wp24-btn-primary
    ):hover {
        border-color: #FFFFFF !important;
    }
}