```css
/* ============================================================
   RAEES IMPORT & EXPORT
   ULTRA PREMIUM BUTTON SYSTEM
   ------------------------------------------------------------
   File: /assets/css/components/buttons.css
   Full Path:
   /public_html/assets/css/components/buttons.css

   Version: 1.0

   Purpose:
   - Global Button System
   - Primary / Secondary Buttons
   - Gold Buttons
   - Outline Buttons
   - Ghost Buttons
   - Dark Buttons
   - Icon Buttons
   - WhatsApp / Call Buttons
   - Loading / Disabled States
   - Responsive Button Utilities

   Depends On:
   - variables.css
   - reset.css
   - typography.css
   - global.css
   ============================================================ */


/* ============================================================
   01. BASE BUTTON
   ============================================================ */

.btn {
    position: relative;

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

    gap: var(--space-3);

    min-height: 52px;

    padding:
        0
        var(--space-6);

    border:
        1px solid transparent;

    border-radius:
        var(--radius-pill);

    outline: none;

    font-family:
        var(--font-ui);

    font-size:
        0.72rem;

    font-weight:
        var(--font-bold);

    line-height:
        1;

    letter-spacing:
        0.01em;

    text-align:
        center;

    text-decoration:
        none;

    white-space:
        nowrap;

    cursor:
        pointer;

    user-select:
        none;

    -webkit-user-select:
        none;

    transition:
        color var(--transition),
        background-color var(--transition),
        border-color var(--transition),
        box-shadow var(--transition),
        transform var(--transition-premium);

    isolation:
        isolate;
}


/* ============================================================
   02. BUTTON TEXT
   ============================================================ */

.btn-text {
    position: relative;

    z-index: 2;

    display: inline-flex;

    align-items: center;

    line-height: 1;
}


/* ============================================================
   03. STANDARD BUTTON ICON
   ============================================================ */

.btn > i,
.btn-icon-inline {
    position: relative;

    z-index: 2;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 auto;

    font-size: 0.72rem;

    line-height: 1;

    transition:
        transform var(--transition-premium);
}


/* ============================================================
   04. PRIMARY BUTTON
   ============================================================ */

.btn-primary {
    color:
        var(--text-white);

    border-color:
        var(--color-primary);

    background:
        var(--color-primary);

    box-shadow:
        0 14px 34px rgba(11, 43, 32, 0.15);
}

.btn-primary:hover {
    color:
        var(--text-white);

    border-color:
        var(--color-primary-light);

    background:
        var(--color-primary-light);

    box-shadow:
        0 20px 46px rgba(11, 43, 32, 0.21);

    transform:
        translateY(-3px);
}

.btn-primary:active {
    transform:
        translateY(-1px);

    box-shadow:
        0 10px 24px rgba(11, 43, 32, 0.16);
}


/* ============================================================
   05. GOLD BUTTON
   ============================================================ */

.btn-gold {
    color:
        var(--color-primary-deep);

    border-color:
        rgba(183, 138, 61, 0.40);

    background:
        var(--gradient-gold);

    box-shadow:
        var(--shadow-gold);
}

.btn-gold:hover {
    color:
        var(--color-primary-deep);

    border-color:
        rgba(183, 138, 61, 0.60);

    box-shadow:
        0 18px 44px rgba(183, 138, 61, 0.28);

    transform:
        translateY(-3px);
}

.btn-gold:active {
    transform:
        translateY(-1px);

    box-shadow:
        0 10px 26px rgba(183, 138, 61, 0.22);
}


/* ============================================================
   06. SECONDARY BUTTON
   ============================================================ */

.btn-secondary {
    color:
        var(--color-primary-deep);

    border-color:
        var(--border-gold);

    background:
        var(--bg-gold-soft);

    box-shadow:
        0 10px 28px rgba(183, 138, 61, 0.08);
}

.btn-secondary:hover {
    color:
        var(--color-primary-deep);

    border-color:
        rgba(183, 138, 61, 0.45);

    background:
        var(--gradient-gold);

    box-shadow:
        var(--shadow-gold);

    transform:
        translateY(-3px);
}


/* ============================================================
   07. OUTLINE PRIMARY BUTTON
   ============================================================ */

.btn-outline-primary {
    color:
        var(--color-primary);

    border-color:
        rgba(11, 43, 32, 0.25);

    background:
        transparent;
}

.btn-outline-primary:hover {
    color:
        var(--text-white);

    border-color:
        var(--color-primary);

    background:
        var(--color-primary);

    box-shadow:
        0 16px 36px rgba(11, 43, 32, 0.16);

    transform:
        translateY(-3px);
}


/* ============================================================
   08. OUTLINE GOLD BUTTON
   ============================================================ */

.btn-outline-gold {
    color:
        var(--color-secondary-dark);

    border-color:
        var(--border-gold);

    background:
        transparent;
}

.btn-outline-gold:hover {
    color:
        var(--color-primary-deep);

    border-color:
        rgba(183, 138, 61, 0.50);

    background:
        var(--gradient-gold);

    box-shadow:
        var(--shadow-gold);

    transform:
        translateY(-3px);
}


/* ============================================================
   09. WHITE BUTTON
   ============================================================ */

.btn-white {
    color:
        var(--color-primary-deep);

    border-color:
        rgba(255, 255, 255, 0.65);

    background:
        #ffffff;

    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.10);
}

.btn-white:hover {
    color:
        var(--color-secondary-dark);

    border-color:
        #ffffff;

    background:
        #ffffff;

    box-shadow:
        0 20px 44px rgba(0, 0, 0, 0.16);

    transform:
        translateY(-3px);
}


/* ============================================================
   10. WHITE OUTLINE BUTTON
   ============================================================ */

.btn-outline-white {
    color:
        #ffffff;

    border-color:
        rgba(255, 255, 255, 0.25);

    background:
        rgba(255, 255, 255, 0.04);

    -webkit-backdrop-filter:
        blur(10px);

    backdrop-filter:
        blur(10px);
}

.btn-outline-white:hover {
    color:
        var(--color-primary-deep);

    border-color:
        rgba(255, 255, 255, 0.85);

    background:
        #ffffff;

    box-shadow:
        0 16px 38px rgba(0, 0, 0, 0.15);

    transform:
        translateY(-3px);
}


/* ============================================================
   11. DARK BUTTON
   ============================================================ */

.btn-dark {
    color:
        var(--text-white);

    border-color:
        var(--color-primary-deep);

    background:
        var(--color-primary-deep);

    box-shadow:
        0 14px 34px rgba(4, 19, 14, 0.18);
}

.btn-dark:hover {
    color:
        var(--text-white);

    border-color:
        var(--color-primary);

    background:
        var(--color-primary);

    box-shadow:
        0 20px 46px rgba(4, 19, 14, 0.22);

    transform:
        translateY(-3px);
}


/* ============================================================
   12. GHOST BUTTON
   ============================================================ */

.btn-ghost {
    color:
        var(--color-primary);

    border-color:
        transparent;

    background:
        transparent;

    box-shadow:
        none;
}

.btn-ghost:hover {
    color:
        var(--color-secondary-dark);

    background:
        var(--bg-gold-soft);

    transform:
        translateY(-2px);
}


/* ============================================================
   13. SOFT BUTTON
   ============================================================ */

.btn-soft {
    color:
        var(--color-primary-deep);

    border-color:
        var(--border-light);

    background:
        rgba(255, 255, 255, 0.72);

    box-shadow:
        var(--shadow-sm);

    -webkit-backdrop-filter:
        blur(10px);

    backdrop-filter:
        blur(10px);
}

.btn-soft:hover {
    color:
        var(--color-secondary-dark);

    border-color:
        var(--border-gold);

    background:
        var(--bg-white);

    box-shadow:
        var(--shadow-md);

    transform:
        translateY(-3px);
}


/* ============================================================
   14. PREMIUM BUTTON
   ============================================================ */

.btn-premium {
    min-height:
        56px;

    padding:
        6px
        7px
        6px
        var(--space-6);

    color:
        var(--text-white);

    border-color:
        var(--color-primary);

    background:
        var(--color-primary);

    box-shadow:
        0 16px 40px rgba(11, 43, 32, 0.17);
}

.btn-premium:hover {
    color:
        var(--text-white);

    border-color:
        var(--color-primary-light);

    background:
        var(--color-primary-light);

    box-shadow:
        0 22px 50px rgba(11, 43, 32, 0.22);

    transform:
        translateY(-3px);
}


/* ============================================================
   15. PREMIUM BUTTON CIRCLE ICON
   ============================================================ */

.btn-premium-icon {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    width:
        42px;

    height:
        42px;

    flex:
        0 0 42px;

    border-radius:
        var(--radius-circle);

    color:
        var(--color-primary-deep);

    background:
        var(--gradient-gold);

    box-shadow:
        0 8px 20px rgba(183, 138, 61, 0.18);

    font-size:
        0.7rem;

    transition:
        transform var(--transition-premium);
}

.btn-premium:hover
.btn-premium-icon {
    transform:
        rotate(45deg);
}


/* ============================================================
   16. PREMIUM GOLD BUTTON
   ============================================================ */

.btn-premium-gold {
    min-height:
        56px;

    padding:
        6px
        7px
        6px
        var(--space-6);

    color:
        var(--color-primary-deep);

    border-color:
        rgba(183, 138, 61, 0.40);

    background:
        var(--gradient-gold);

    box-shadow:
        var(--shadow-gold);
}

.btn-premium-gold:hover {
    color:
        var(--color-primary-deep);

    box-shadow:
        0 20px 48px rgba(183, 138, 61, 0.30);

    transform:
        translateY(-3px);
}


/* ============================================================
   17. PREMIUM GOLD DARK ICON
   ============================================================ */

.btn-premium-gold
.btn-premium-icon {
    color:
        #ffffff;

    background:
        var(--color-primary-deep);

    box-shadow:
        0 8px 20px rgba(4, 19, 14, 0.18);
}


/* ============================================================
   18. ARROW BUTTON
   ============================================================ */

.btn-arrow:hover > i:last-child,
.btn-arrow:hover .btn-arrow-icon {
    transform:
        translateX(4px);
}


/* ============================================================
   19. DIAGONAL ARROW BUTTON
   ============================================================ */

.btn-diagonal:hover > i:last-child,
.btn-diagonal:hover .btn-arrow-icon {
    transform:
        translate(2px, -2px);
}


/* ============================================================
   20. ICON LEFT
   ============================================================ */

.btn-icon-left > i,
.btn-icon-left .btn-icon-inline {
    order:
        -1;
}


/* ============================================================
   21. BUTTON ICON CIRCLE
   ============================================================ */

.btn-icon-circle {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    width:
        34px;

    height:
        34px;

    flex:
        0 0 34px;

    margin-left:
        var(--space-1);

    border-radius:
        var(--radius-circle);

    background:
        rgba(255, 255, 255, 0.10);

    transition:
        color var(--transition),
        background-color var(--transition),
        transform var(--transition-premium);
}


/* ============================================================
   22. GOLD CIRCLE ICON
   ============================================================ */

.btn-icon-circle-gold {
    color:
        var(--color-primary-deep);

    background:
        var(--gradient-gold);
}


/* ============================================================
   23. DARK CIRCLE ICON
   ============================================================ */

.btn-icon-circle-dark {
    color:
        #ffffff;

    background:
        var(--color-primary-deep);
}


/* ============================================================
   24. ICON ONLY BUTTON
   ============================================================ */

.btn-icon-only {
    width:
        50px;

    height:
        50px;

    min-width:
        50px;

    min-height:
        50px;

    padding:
        0;

    border-radius:
        var(--radius-circle);
}


/* ============================================================
   25. ICON ONLY SMALL
   ============================================================ */

.btn-icon-only.btn-sm {
    width:
        42px;

    height:
        42px;

    min-width:
        42px;

    min-height:
        42px;

    padding:
        0;
}


/* ============================================================
   26. ICON ONLY LARGE
   ============================================================ */

.btn-icon-only.btn-lg {
    width:
        58px;

    height:
        58px;

    min-width:
        58px;

    min-height:
        58px;

    padding:
        0;
}


/* ============================================================
   27. SMALL BUTTON
   ============================================================ */

.btn-sm {
    min-height:
        42px;

    padding:
        0
        var(--space-5);

    gap:
        var(--space-2);

    font-size:
        0.64rem;
}


/* ============================================================
   28. MEDIUM BUTTON
   ============================================================ */

.btn-md {
    min-height:
        52px;

    padding:
        0
        var(--space-6);
}


/* ============================================================
   29. LARGE BUTTON
   ============================================================ */

.btn-lg {
    min-height:
        60px;

    padding:
        0
        var(--space-7);

    font-size:
        0.76rem;
}


/* ============================================================
   30. EXTRA LARGE BUTTON
   ============================================================ */

.btn-xl {
    min-height:
        66px;

    padding:
        0
        var(--space-8);

    font-size:
        0.8rem;
}


/* ============================================================
   31. SQUARE BUTTON
   ============================================================ */

.btn-square {
    border-radius:
        var(--radius-md);
}


/* ============================================================
   32. ROUNDED BUTTON
   ============================================================ */

.btn-rounded {
    border-radius:
        var(--radius-lg);
}


/* ============================================================
   33. PILL BUTTON
   ============================================================ */

.btn-pill {
    border-radius:
        var(--radius-pill);
}


/* ============================================================
   34. FULL WIDTH BUTTON
   ============================================================ */

.btn-block {
    width:
        100%;
}


/* ============================================================
   35. BUTTON GROUP
   ============================================================ */

.btn-group {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap:
        var(--space-3);
}


/* ============================================================
   36. CENTER BUTTON GROUP
   ============================================================ */

.btn-group-center {
    justify-content:
        center;
}


/* ============================================================
   37. RIGHT BUTTON GROUP
   ============================================================ */

.btn-group-end {
    justify-content:
        flex-end;
}


/* ============================================================
   38. WHATSAPP BUTTON
   ============================================================ */

.btn-whatsapp {
    color:
        #ffffff;

    border-color:
        #25d366;

    background:
        #25d366;

    box-shadow:
        0 14px 34px rgba(37, 211, 102, 0.18);
}

.btn-whatsapp:hover {
    color:
        #ffffff;

    border-color:
        #20bd5a;

    background:
        #20bd5a;

    box-shadow:
        0 20px 44px rgba(37, 211, 102, 0.25);

    transform:
        translateY(-3px);
}


/* ============================================================
   39. WHATSAPP OUTLINE
   ============================================================ */

.btn-outline-whatsapp {
    color:
        #1cab52;

    border-color:
        rgba(37, 211, 102, 0.35);

    background:
        transparent;
}

.btn-outline-whatsapp:hover {
    color:
        #ffffff;

    border-color:
        #25d366;

    background:
        #25d366;

    box-shadow:
        0 16px 38px rgba(37, 211, 102, 0.20);

    transform:
        translateY(-3px);
}


/* ============================================================
   40. CALL BUTTON
   ============================================================ */

.btn-call {
    color:
        #ffffff;

    border-color:
        var(--color-primary);

    background:
        var(--color-primary);

    box-shadow:
        0 14px 34px rgba(11, 43, 32, 0.15);
}

.btn-call:hover {
    color:
        var(--color-primary-deep);

    border-color:
        var(--color-secondary);

    background:
        var(--gradient-gold);

    box-shadow:
        var(--shadow-gold);

    transform:
        translateY(-3px);
}


/* ============================================================
   41. EMAIL BUTTON
   ============================================================ */

.btn-email {
    color:
        var(--color-primary-deep);

    border-color:
        var(--border-gold);

    background:
        var(--bg-gold-soft);
}

.btn-email:hover {
    color:
        var(--text-white);

    border-color:
        var(--color-primary);

    background:
        var(--color-primary);

    box-shadow:
        0 16px 38px rgba(11, 43, 32, 0.16);

    transform:
        translateY(-3px);
}


/* ============================================================
   42. SHINE BUTTON
   ============================================================ */

.btn-shine {
    overflow:
        hidden;
}

.btn-shine::before {
    content: "";

    position:
        absolute;

    top:
        -50%;

    left:
        -75%;

    z-index:
        1;

    width:
        45%;

    height:
        200%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.22),
            transparent
        );

    transform:
        rotate(18deg);

    transition:
        left 0.7s ease;

    pointer-events:
        none;
}

.btn-shine:hover::before {
    left:
        135%;
}


/* ============================================================
   43. GOLD SHINE
   ============================================================ */

.btn-gold.btn-shine::before,
.btn-premium-gold.btn-shine::before {
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.38),
            transparent
        );
}


/* ============================================================
   44. BUTTON WITH BADGE
   ============================================================ */

.btn-badge-wrap {
    position:
        relative;
}


/* ============================================================
   45. BUTTON BADGE
   ============================================================ */

.btn-badge {
    position:
        absolute;

    top:
        -7px;

    right:
        -7px;

    z-index:
        5;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        20px;

    height:
        20px;

    padding:
        0 5px;

    border:
        2px solid #ffffff;

    border-radius:
        var(--radius-pill);

    color:
        #ffffff;

    background:
        var(--color-secondary-dark);

    font-family:
        var(--font-ui);

    font-size:
        0.48rem;

    font-weight:
        var(--font-bold);

    line-height:
        1;
}


/* ============================================================
   46. LOADING BUTTON
   ============================================================ */

.btn.is-loading {
    pointer-events:
        none;

    cursor:
        wait;
}


/* ============================================================
   47. LOADING TEXT
   ============================================================ */

.btn.is-loading
.btn-text {
    opacity:
        0.55;
}


/* ============================================================
   48. LOADING SPINNER
   ============================================================ */

.btn-spinner {
    display:
        none;

    width:
        16px;

    height:
        16px;

    flex:
        0 0 16px;

    border:
        2px solid currentColor;

    border-right-color:
        transparent;

    border-radius:
        var(--radius-circle);

    animation:
        btnSpin 0.7s linear infinite;
}

.btn.is-loading
.btn-spinner {
    display:
        inline-block;
}


/* ============================================================
   49. SPINNER ANIMATION
   ============================================================ */

@keyframes btnSpin {

    to {
        transform:
            rotate(360deg);
    }

}


/* ============================================================
   50. DISABLED BUTTON
   ============================================================ */

.btn:disabled,
.btn.disabled,
.btn[aria-disabled="true"] {
    opacity:
        0.52;

    cursor:
        not-allowed;

    pointer-events:
        none;

    box-shadow:
        none;

    transform:
        none;
}


/* ============================================================
   51. BUTTON FOCUS
   ============================================================ */

.btn:focus-visible {
    outline:
        2px solid var(--color-secondary);

    outline-offset:
        4px;
}


/* ============================================================
   52. PRIMARY FOCUS
   ============================================================ */

.btn-primary:focus-visible,
.btn-dark:focus-visible,
.btn-call:focus-visible,
.btn-premium:focus-visible {
    outline-color:
        var(--color-secondary-light);
}


/* ============================================================
   53. DARK BACKGROUND BUTTON FIX
   ============================================================ */

.dark-section
.btn-outline-white,
.bg-dark
.btn-outline-white {
    border-color:
        rgba(255, 255, 255, 0.20);
}


/* ============================================================
   54. LINK BUTTON
   ============================================================ */

.btn-link {
    min-height:
        auto;

    padding:
        0;

    border:
        0;

    border-radius:
        0;

    color:
        var(--color-primary);

    background:
        transparent;

    box-shadow:
        none;

    font-size:
        0.7rem;
}

.btn-link:hover {
    color:
        var(--color-secondary-dark);

    background:
        transparent;

    box-shadow:
        none;

    transform:
        none;
}


/* ============================================================
   55. LINK UNDERLINE
   ============================================================ */

.btn-link-underline {
    position:
        relative;

    padding-bottom:
        5px;
}

.btn-link-underline::after {
    content:
        "";

    position:
        absolute;

    right:
        0;

    bottom:
        0;

    left:
        0;

    height:
        1px;

    background:
        currentColor;

    transform:
        scaleX(0);

    transform-origin:
        right;

    transition:
        transform var(--transition-premium);
}

.btn-link-underline:hover::after {
    transform:
        scaleX(1);

    transform-origin:
        left;
}


/* ============================================================
   56. BUTTON HOVER ICON ROTATION
   ============================================================ */

.btn-icon-rotate:hover > i:last-child,
.btn-icon-rotate:hover .btn-icon-inline:last-child {
    transform:
        rotate(45deg);
}


/* ============================================================
   57. BUTTON HOVER ICON LIFT
   ============================================================ */

.btn-icon-lift:hover > i,
.btn-icon-lift:hover .btn-icon-inline {
    transform:
        translateY(-2px);
}


/* ============================================================
   58. BUTTON HOVER ICON SCALE
   ============================================================ */

.btn-icon-scale:hover > i,
.btn-icon-scale:hover .btn-icon-inline {
    transform:
        scale(1.12);
}


/* ============================================================
   59. BUTTON GLASS
   ============================================================ */

.btn-glass {
    color:
        var(--color-primary-deep);

    border-color:
        rgba(255, 255, 255, 0.55);

    background:
        rgba(255, 255, 255, 0.55);

    box-shadow:
        0 12px 30px rgba(11, 43, 32, 0.08);

    -webkit-backdrop-filter:
        blur(14px);

    backdrop-filter:
        blur(14px);
}

.btn-glass:hover {
    color:
        var(--color-secondary-dark);

    border-color:
        var(--border-gold);

    background:
        rgba(255, 255, 255, 0.88);

    box-shadow:
        0 18px 40px rgba(11, 43, 32, 0.12);

    transform:
        translateY(-3px);
}


/* ============================================================
   60. DARK GLASS BUTTON
   ============================================================ */

.btn-glass-dark {
    color:
        #ffffff;

    border-color:
        rgba(255, 255, 255, 0.12);

    background:
        rgba(4, 19, 14, 0.48);

    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.12);

    -webkit-backdrop-filter:
        blur(14px);

    backdrop-filter:
        blur(14px);
}

.btn-glass-dark:hover {
    color:
        var(--color-primary-deep);

    border-color:
        rgba(212, 175, 104, 0.35);

    background:
        var(--gradient-gold);

    box-shadow:
        var(--shadow-gold);

    transform:
        translateY(-3px);
}


/* ============================================================
   61. BUTTON WIDTH AUTO
   ============================================================ */

.btn-auto {
    width:
        auto;
}


/* ============================================================
   62. BUTTON MIN WIDTH
   ============================================================ */

.btn-min {
    min-width:
        150px;
}


/* ============================================================
   63. BUTTON MIN WIDTH LARGE
   ============================================================ */

.btn-min-lg {
    min-width:
        190px;
}


/* ============================================================
   64. MOBILE
   ============================================================ */

@media (max-width: 767.98px) {

    .btn {
        min-height:
            50px;

        padding:
            0
            var(--space-5);
    }

    .btn-lg {
        min-height:
            56px;

        padding:
            0
            var(--space-6);
    }

    .btn-xl {
        min-height:
            60px;

        padding:
            0
            var(--space-7);
    }

    .btn-premium,
    .btn-premium-gold {
        min-height:
            54px;

        padding:
            6px
            7px
            6px
            var(--space-5);
    }

    .btn-premium-icon {
        width:
            40px;

        height:
            40px;

        flex-basis:
            40px;
    }

}


/* ============================================================
   65. SMALL MOBILE
   ============================================================ */

@media (max-width: 479.98px) {

    .btn-group {
        width:
            100%;
    }

    .btn-group-mobile-stack {
        flex-direction:
            column;

        align-items:
            stretch;
    }

    .btn-group-mobile-stack
    .btn {
        width:
            100%;
    }

    .btn-mobile-block {
        width:
            100%;
    }

    .btn-premium.btn-mobile-block,
    .btn-premium-gold.btn-mobile-block {
        justify-content:
            space-between;
    }

}


/* ============================================================
   66. TOUCH DEVICE
   ============================================================ */

@media (hover: none) {

    .btn:hover {
        transform:
            none;
    }

}


/* ============================================================
   67. REDUCED MOTION
   ============================================================ */

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

    .btn,
    .btn > i,
    .btn-icon-inline,
    .btn-premium-icon,
    .btn-icon-circle,
    .btn-link-underline::after,
    .btn-shine::before {
        transition:
            none;
    }

    .btn:hover,
    .btn-primary:hover,
    .btn-gold:hover,
    .btn-secondary:hover,
    .btn-outline-primary:hover,
    .btn-outline-gold:hover,
    .btn-white:hover,
    .btn-outline-white:hover,
    .btn-dark:hover,
    .btn-soft:hover,
    .btn-premium:hover,
    .btn-premium-gold:hover,
    .btn-whatsapp:hover,
    .btn-outline-whatsapp:hover,
    .btn-call:hover,
    .btn-email:hover,
    .btn-glass:hover,
    .btn-glass-dark:hover {
        transform:
            none;
    }

    .btn-premium:hover
    .btn-premium-icon,
    .btn-arrow:hover > i:last-child,
    .btn-arrow:hover
    .btn-arrow-icon,
    .btn-diagonal:hover > i:last-child,
    .btn-icon-rotate:hover > i:last-child {
        transform:
            none;
    }

    .btn-spinner {
        animation-duration:
            1.4s;
    }

}


/* ============================================================
   END OF BUTTON SYSTEM
   ============================================================ */
```