/*
 * Ridni Core — button design system.
 *
 * Ported verbatim from the site's Additional CSS so that markup already written
 * by hand keeps rendering identically. Every dimension goes through a custom
 * property: that is what lets the Elementor widget resize one button without
 * redefining the variant, and what keeps the mobile step in one place.
 */

/* ============================================================
   1. Tokens
   ============================================================ */

:root {
    --btn-font-size: 18px;
    --btn-font-weight: 500;
    --btn-padding-y: 15px;
    --btn-padding-x: 30px;
    --btn-padding-x-icon: 58px; /* right padding that reserves room for the icon */
    --btn-border-width: 2px;
    --btn-border-radius: 30px;
    --btn-icon-size: 20px;
    --btn-icon-pos: 30px;
    --btn-icon-pos-hover: 21px;
}

@media (max-width: 767px) {
    :root {
        --btn-font-size: 16px;
        --btn-padding-y: 12px;
        --btn-padding-x: 24px;
        --btn-padding-x-icon: 46px;
        --btn-border-width: 2px;
        --btn-border-radius: 25px;
        --btn-icon-size: 18px;
        --btn-icon-pos: 20px;
        --btn-icon-pos-hover: 15px;
    }
}

/* ============================================================
   2. Base
   ============================================================ */

.btn-new {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
    width: 100%; /* Elementor containers give the button its own column. */
    padding: var(--btn-padding-y) var(--btn-padding-x);
    padding-right: var(--btn-padding-x-icon);
    border-radius: var(--btn-border-radius);
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    border: var(--btn-border-width) solid transparent;
    transition: all 0.35s ease;
    z-index: 1;
}

/* Line Awesome arrow. Hand-written markup relies on the icon font already on
   the site; the Elementor widget ships its own inline SVG instead. */
.btn-new::after {
    content: '\f061';
    font-family: "Line Awesome Free";
    font-weight: 900;
    font-size: var(--btn-icon-size);
    position: absolute;
    right: var(--btn-icon-pos);
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.35s ease;
}

.btn-new:hover::after {
    right: var(--btn-icon-pos-hover);
}

.btn-new--no-icon {
    padding-right: var(--btn-padding-x) !important;
}

.btn-new--no-icon::after {
    display: none !important;
}

.btn-new:disabled {
    cursor: not-allowed;
    opacity: 0.6;
    box-shadow: none !important;
}

.btn-new:active {
    transform: scale(0.96);
    box-shadow: none;
}

/* ============================================================
   3. Variants
   ============================================================ */

/* 1. Primary */
.btn-new--purple { background-color: #603790; color: #FFFFFF; }
.btn-new--purple:hover { box-shadow: 4px 8px 26.1px rgba(115, 67, 172, 0.39); color: #fff; }
.btn-new--purple:disabled { background-color: #E5D7F6; }

/* 2. Outline purple */
.btn-new--outline-purple { background: #FFFFFF; border-color: #603790; color: #603790; }
.btn-new--outline-purple:hover { box-shadow: 4px 8px 26.1px rgba(115, 67, 172, 0.2); background: #F9F4FF; color: #603790; }

/* 3. Outline white */
.btn-new--outline-white { background: #FFFFFF; border-color: #FFFFFF; color: #603790; }
.btn-new--outline-white:hover { box-shadow: 4px 8px 26.1px rgba(115, 67, 172, 0.2); background: #F9F4FF; color: #603790; }

/* 4. Thin outline purple */
.btn-new--outline-thin { background: transparent; border-color: #E5D7F6; color: #603790; }
.btn-new--outline-thin:hover { border-color: #603790; color: #603790; }

/* 5. Text link */
.btn-new--text {
    --btn-icon-pos: 15px;
    --btn-icon-pos-hover: 5px;
    padding: var(--btn-padding-y) var(--btn-padding-x-icon) var(--btn-padding-y) 0;
    background: transparent;
    color: #603790;
    border-radius: 0;
    width: auto;
}
.btn-new--text:hover { color: #603790; }

/* 6. Accent yellow */
.btn-new--yellow { background-color: #FEBE41; color: #603790; }
.btn-new--yellow:hover { box-shadow: 4px 8px 26.1px rgba(254, 190, 65, 0.5); color: #603790; }

/* 7. White outline on dark */
.btn-new--white-border { background: transparent; border-color: #FFFFFF; color: #FFFFFF; }
.btn-new--white-border:hover { background: rgba(255, 255, 255, 0.1); box-shadow: 4px 8px 26.1px rgba(40, 15, 70, 0.43); color: #fff; }

/* 8. Purple border on dark */
.btn-new--purple-border-dark { background: transparent; border-color: #603790; color: #FFFFFF; }
.btn-new--purple-border-dark:hover { background: #603790; color: #fff; }

/* ============================================================
   4. Elementor widget
   Only what the widget adds on top of the system: a real icon element instead
   of the pseudo-element, and widths the editor can control.
   ============================================================ */

.ridni-btn-wrap { display: flex; }
.ridni-btn-wrap--left { justify-content: flex-start; }
.ridni-btn-wrap--center { justify-content: center; }
.ridni-btn-wrap--right { justify-content: flex-end; }
.ridni-btn-wrap--stretch { justify-content: stretch; }

.ridni-btn.btn-new { width: auto; max-width: 100%; text-align: center; }
.ridni-btn-wrap--stretch .ridni-btn.btn-new { width: 100%; }

/* The widget draws its own icon, so the font arrow must not double up. */
.ridni-btn.btn-new::after { content: none; }

.ridni-btn__icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--btn-icon-size);
    line-height: 1;
    transition: right 0.35s ease, left 0.35s ease;
}
.ridni-btn__icon svg { width: 1em; height: 1em; display: block; fill: currentColor; }
.ridni-btn__icon i, .ridni-btn__icon svg { color: inherit; }

.ridni-btn--icon-end .ridni-btn__icon { right: var(--btn-icon-pos); }
.ridni-btn--icon-end:hover .ridni-btn__icon { right: var(--btn-icon-pos-hover); }
.ridni-btn--icon-start { padding-left: var(--btn-padding-x-icon); padding-right: var(--btn-padding-x); }
.ridni-btn--icon-start .ridni-btn__icon { left: var(--btn-icon-pos); }
.ridni-btn--icon-start:hover .ridni-btn__icon { left: var(--btn-icon-pos-hover); }
.ridni-btn--icon-none { padding-right: var(--btn-padding-x); }
.ridni-btn--icon-none.btn-new--text { padding-right: 0; }

/* A blank canvas for "build your own": visible by default, every declaration
   beatable by the widget's own instance selectors. */
.ridni-btn--custom { background-color: #603790; color: #FFFFFF; border-color: transparent; }

.ridni-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }