/* ==========================================================================
   INAIVOM - Buttons
   File: app/static/css/buttons.css
   Premium Matrimony Platform
   Theme: Maroon #800020 | Gold #D4AF37 | White
   ========================================================================== */


/* ==========================================================================
   1. BUTTON VARIABLES
   ========================================================================== */

:root {
    --btn-maroon: #800020;
    --btn-maroon-dark: #650019;
    --btn-maroon-darker: #500014;
    --btn-maroon-light: #9b1738;

    --btn-gold: #d4af37;
    --btn-gold-dark: #b89424;
    --btn-gold-light: #e4ca6a;

    --btn-white: #ffffff;
    --btn-text: #262329;
    --btn-muted: #6f6870;

    --btn-success: #198754;
    --btn-danger: #dc3545;
    --btn-warning: #d99a00;
    --btn-info: #0d6efd;

    --btn-border: #ded9dc;
    --btn-disabled: #d8d4d6;

    --btn-radius: 10px;
    --btn-radius-sm: 8px;
    --btn-radius-lg: 12px;
    --btn-radius-pill: 999px;

    --btn-shadow:
        0 4px 12px rgba(28, 17, 22, 0.08);

    --btn-shadow-hover:
        0 8px 22px rgba(28, 17, 22, 0.14);

    --btn-maroon-shadow:
        0 8px 20px rgba(128, 0, 32, 0.20);

    --btn-gold-shadow:
        0 8px 20px rgba(212, 175, 55, 0.24);

    --btn-transition:
        180ms cubic-bezier(0.4, 0, 0.2, 1);
}


/* ==========================================================================
   2. BASE BUTTON
   ========================================================================== */

.btn,
.button {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;

    min-height: 42px;

    padding: 0.625rem 1.15rem;

    border: 1px solid transparent;
    border-radius: var(--btn-radius);

    background: transparent;

    color: var(--btn-text);

    font-family: inherit;
    font-size: 0.925rem;
    font-weight: 600;
    line-height: 1.2;

    text-align: center;
    text-decoration: none;
    white-space: nowrap;

    cursor: pointer;
    user-select: none;

    appearance: none;
    -webkit-appearance: none;

    transition:
        background-color var(--btn-transition),
        border-color var(--btn-transition),
        color var(--btn-transition),
        box-shadow var(--btn-transition),
        transform var(--btn-transition),
        opacity var(--btn-transition);
}

.btn:hover,
.button:hover {
    text-decoration: none;
}

.btn:active:not(:disabled):not(.disabled),
.button:active:not(:disabled):not(.disabled) {
    transform: translateY(1px) scale(0.985);
}

.btn:focus-visible,
.button:focus-visible {
    outline: 3px solid rgba(212, 175, 55, 0.32);
    outline-offset: 2px;
}


/* ==========================================================================
   3. PRIMARY - INAIVOM MAROON
   ========================================================================== */

.btn-primary,
.btn-maroon {
    border-color: var(--btn-maroon);

    background:
        linear-gradient(
            135deg,
            var(--btn-maroon-light) 0%,
            var(--btn-maroon) 55%,
            var(--btn-maroon-dark) 100%
        );

    color: var(--btn-white);

    box-shadow:
        0 4px 12px rgba(128, 0, 32, 0.16);
}

.btn-primary:hover,
.btn-maroon:hover {
    border-color: var(--btn-maroon-dark);

    background:
        linear-gradient(
            135deg,
            var(--btn-maroon) 0%,
            var(--btn-maroon-dark) 100%
        );

    color: var(--btn-white);

    box-shadow: var(--btn-maroon-shadow);

    transform: translateY(-1px);
}

.btn-primary:active,
.btn-maroon:active {
    background: var(--btn-maroon-dark);

    box-shadow:
        0 3px 8px rgba(128, 0, 32, 0.16);
}


/* ==========================================================================
   4. GOLD / PREMIUM BUTTON
   ========================================================================== */

.btn-gold,
.btn-premium {
    border-color: var(--btn-gold);

    background:
        linear-gradient(
            135deg,
            #f1dc8c 0%,
            var(--btn-gold-light) 25%,
            var(--btn-gold) 60%,
            var(--btn-gold-dark) 100%
        );

    color: #3f2c00;

    box-shadow:
        0 4px 14px rgba(212, 175, 55, 0.18);
}

.btn-gold:hover,
.btn-premium:hover {
    border-color: var(--btn-gold-dark);

    background:
        linear-gradient(
            135deg,
            #f5e5a5 0%,
            var(--btn-gold) 55%,
            var(--btn-gold-dark) 100%
        );

    color: #332300;

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

    transform: translateY(-1px);
}

.btn-gold:active,
.btn-premium:active {
    background: var(--btn-gold-dark);

    color: #ffffff;
}


/* ==========================================================================
   5. SECONDARY
   ========================================================================== */

.btn-secondary {
    border-color: #ded9dc;

    background: #f5f3f4;

    color: #50494e;
}

.btn-secondary:hover {
    border-color: #cfc8cc;

    background: #ebe7e9;

    color: #332e31;

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


/* ==========================================================================
   6. LIGHT BUTTON
   ========================================================================== */

.btn-light {
    border-color: #e7e2e5;

    background: #ffffff;

    color: var(--btn-text);

    box-shadow:
        0 2px 8px rgba(20, 15, 18, 0.04);
}

.btn-light:hover {
    border-color: #d8d0d4;

    background: #faf8f9;

    color: var(--btn-maroon);

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


/* ==========================================================================
   7. DARK BUTTON
   ========================================================================== */

.btn-dark {
    border-color: #282429;

    background: #282429;

    color: #ffffff;
}

.btn-dark:hover {
    border-color: #171417;

    background: #171417;

    color: #ffffff;

    box-shadow:
        0 7px 18px rgba(0, 0, 0, 0.18);
}


/* ==========================================================================
   8. SUCCESS
   ========================================================================== */

.btn-success {
    border-color: var(--btn-success);

    background: var(--btn-success);

    color: #ffffff;
}

.btn-success:hover {
    border-color: #146c43;

    background: #157347;

    color: #ffffff;

    box-shadow:
        0 7px 18px rgba(25, 135, 84, 0.20);

    transform: translateY(-1px);
}


/* ==========================================================================
   9. DANGER
   ========================================================================== */

.btn-danger {
    border-color: var(--btn-danger);

    background: var(--btn-danger);

    color: #ffffff;
}

.btn-danger:hover {
    border-color: #b02a37;

    background: #bb2d3b;

    color: #ffffff;

    box-shadow:
        0 7px 18px rgba(220, 53, 69, 0.20);

    transform: translateY(-1px);
}


/* ==========================================================================
   10. WARNING
   ========================================================================== */

.btn-warning {
    border-color: #e4a11b;

    background: #f2b52b;

    color: #362500;
}

.btn-warning:hover {
    border-color: #d6950b;

    background: #dda317;

    color: #2d1e00;

    box-shadow:
        0 7px 18px rgba(217, 154, 0, 0.20);
}


/* ==========================================================================
   11. INFO
   ========================================================================== */

.btn-info {
    border-color: #0aa2c0;

    background: #0dcaf0;

    color: #073843;
}

.btn-info:hover {
    border-color: #087990;

    background: #31d2f2;

    color: #062f37;

    box-shadow:
        0 7px 18px rgba(13, 202, 240, 0.18);
}


/* ==========================================================================
   12. OUTLINE PRIMARY
   ========================================================================== */

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

    background: transparent;

    color: var(--btn-maroon);
}

.btn-outline-primary:hover,
.btn-outline-maroon:hover {
    background: var(--btn-maroon);

    color: #ffffff;

    box-shadow:
        0 6px 16px rgba(128, 0, 32, 0.16);
}


/* ==========================================================================
   13. OUTLINE GOLD
   ========================================================================== */

.btn-outline-gold,
.btn-outline-premium {
    border-color: var(--btn-gold);

    background: transparent;

    color: #92720f;
}

.btn-outline-gold:hover,
.btn-outline-premium:hover {
    background: var(--btn-gold);

    color: #3d2b00;

    box-shadow:
        0 6px 16px rgba(212, 175, 55, 0.20);
}


/* ==========================================================================
   14. OUTLINE SECONDARY
   ========================================================================== */

.btn-outline-secondary {
    border-color: #bcb5b9;

    background: transparent;

    color: #615a5e;
}

.btn-outline-secondary:hover {
    border-color: #6f686c;

    background: #6f686c;

    color: #ffffff;
}


/* ==========================================================================
   15. OUTLINE SUCCESS
   ========================================================================== */

.btn-outline-success {
    border-color: var(--btn-success);

    background: transparent;

    color: var(--btn-success);
}

.btn-outline-success:hover {
    background: var(--btn-success);

    color: #ffffff;
}


/* ==========================================================================
   16. OUTLINE DANGER
   ========================================================================== */

.btn-outline-danger {
    border-color: var(--btn-danger);

    background: transparent;

    color: var(--btn-danger);
}

.btn-outline-danger:hover {
    background: var(--btn-danger);

    color: #ffffff;
}


/* ==========================================================================
   17. GHOST BUTTON
   ========================================================================== */

.btn-ghost {
    border-color: transparent;

    background: transparent;

    color: var(--btn-maroon);
}

.btn-ghost:hover {
    background: rgba(128, 0, 32, 0.065);

    color: var(--btn-maroon-dark);
}


/* ==========================================================================
   18. GHOST GOLD
   ========================================================================== */

.btn-ghost-gold {
    border-color: transparent;

    background: transparent;

    color: #9c7a14;
}

.btn-ghost-gold:hover {
    background: rgba(212, 175, 55, 0.12);

    color: #745a0c;
}


/* ==========================================================================
   19. LINK BUTTON
   ========================================================================== */

.btn-link {
    min-height: auto;

    padding: 0;

    border: 0;

    background: transparent;

    color: var(--btn-maroon);

    box-shadow: none;

    text-decoration: none;
}

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

    text-decoration: underline;

    box-shadow: none;
}


/* ==========================================================================
   20. BUTTON SIZES
   ========================================================================== */

.btn-xs {
    min-height: 30px;

    padding: 0.35rem 0.65rem;

    border-radius: 7px;

    font-size: 0.76rem;
}

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

    padding: 0.45rem 0.85rem;

    border-radius: var(--btn-radius-sm);

    font-size: 0.84rem;
}

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

    padding: 0.78rem 1.5rem;

    border-radius: var(--btn-radius-lg);

    font-size: 1rem;
}

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

    padding: 0.9rem 1.8rem;

    border-radius: 14px;

    font-size: 1.05rem;
}


/* ==========================================================================
   21. PILL BUTTON
   ========================================================================== */

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


/* ==========================================================================
   22. SQUARE BUTTON
   ========================================================================== */

.btn-square {
    border-radius: 0;
}


/* ==========================================================================
   23. FULL WIDTH
   ========================================================================== */

.btn-block,
.btn-full,
.w-100.btn {
    width: 100%;
}


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

.btn-icon {
    flex: 0 0 auto;

    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;

    padding: 0;

    border-radius: 50%;
}

.btn-icon.btn-sm {
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
}

.btn-icon.btn-lg {
    width: 50px;
    min-width: 50px;
    height: 50px;
    min-height: 50px;
}

.btn-icon svg,
.btn-icon i {
    width: 1em;
    height: 1em;

    font-size: 1rem;
}


/* ==========================================================================
   25. BUTTON ICON ALIGNMENT
   ========================================================================== */

.btn .btn-icon-left,
.button .btn-icon-left {
    margin-right: 0.15rem;
}

.btn .btn-icon-right,
.button .btn-icon-right {
    margin-left: 0.15rem;
}

.btn > svg,
.btn > i,
.button > svg,
.button > i {
    flex-shrink: 0;
}


/* ==========================================================================
   26. MATRIMONY - INTEREST BUTTON
   ========================================================================== */

.btn-interest,
.btn-send-interest {
    border-color: var(--btn-maroon);

    background:
        linear-gradient(
            135deg,
            var(--btn-maroon-light),
            var(--btn-maroon)
        );

    color: #ffffff;

    box-shadow:
        0 5px 14px rgba(128, 0, 32, 0.16);
}

.btn-interest:hover,
.btn-send-interest:hover {
    border-color: var(--btn-maroon-dark);

    background:
        linear-gradient(
            135deg,
            var(--btn-maroon),
            var(--btn-maroon-dark)
        );

    color: #ffffff;

    box-shadow: var(--btn-maroon-shadow);

    transform: translateY(-1px);
}

.btn-interest.sent,
.btn-send-interest.sent {
    border-color: #d8d2d5;

    background: #f1eef0;

    color: #746c71;

    box-shadow: none;
}


/* ==========================================================================
   27. MATRIMONY - SHORTLIST BUTTON
   ========================================================================== */

.btn-shortlist {
    border-color: #e1dadd;

    background: #ffffff;

    color: #5f575c;
}

.btn-shortlist:hover {
    border-color: var(--btn-gold);

    background: #fffaf0;

    color: #8b6a08;
}

.btn-shortlist.active,
.btn-shortlist.shortlisted {
    border-color: var(--btn-gold);

    background: rgba(212, 175, 55, 0.13);

    color: #8b6a08;
}


/* ==========================================================================
   28. MATRIMONY - FAVOURITE BUTTON
   ========================================================================== */

.btn-favourite,
.btn-favorite {
    border-color: #eadde1;

    background: #ffffff;

    color: #81757a;
}

.btn-favourite:hover,
.btn-favorite:hover {
    border-color: #c44d6c;

    background: #fff5f7;

    color: #a3143a;
}

.btn-favourite.active,
.btn-favorite.active {
    border-color: #a3143a;

    background: #a3143a;

    color: #ffffff;
}


/* ==========================================================================
   29. MATRIMONY - MESSAGE BUTTON
   ========================================================================== */

.btn-message,
.btn-chat {
    border-color: var(--btn-gold);

    background: #ffffff;

    color: #87670b;
}

.btn-message:hover,
.btn-chat:hover {
    background: var(--btn-gold);

    color: #392800;

    box-shadow:
        0 6px 16px rgba(212, 175, 55, 0.18);
}


/* ==========================================================================
   30. MATRIMONY - VIEW PROFILE
   ========================================================================== */

.btn-view-profile {
    border-color: rgba(128, 0, 32, 0.18);

    background: rgba(128, 0, 32, 0.055);

    color: var(--btn-maroon);
}

.btn-view-profile:hover {
    border-color: var(--btn-maroon);

    background: var(--btn-maroon);

    color: #ffffff;
}


/* ==========================================================================
   31. VERIFIED BUTTON
   ========================================================================== */

.btn-verified {
    border-color: rgba(25, 135, 84, 0.28);

    background: rgba(25, 135, 84, 0.08);

    color: #146c43;
}

.btn-verified:hover {
    border-color: #198754;

    background: rgba(25, 135, 84, 0.13);

    color: #0f5132;
}


/* ==========================================================================
   32. MEMBERSHIP / UPGRADE BUTTON
   ========================================================================== */

.btn-upgrade {
    overflow: hidden;

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

    background:
        linear-gradient(
            120deg,
            #f4e4a2 0%,
            #d4af37 42%,
            #f1d675 60%,
            #b89424 100%
        );

    background-size: 200% 100%;

    color: #382600;

    box-shadow:
        0 7px 20px rgba(212, 175, 55, 0.22);
}

.btn-upgrade:hover {
    background-position: 100% 0;

    color: #2d1f00;

    box-shadow:
        0 10px 26px rgba(212, 175, 55, 0.30);

    transform: translateY(-1px);
}


/* ==========================================================================
   33. LOGIN / REGISTER CTA
   ========================================================================== */

.btn-login {
    border-color: var(--btn-maroon);

    background: var(--btn-maroon);

    color: #ffffff;
}

.btn-login:hover {
    border-color: var(--btn-maroon-dark);

    background: var(--btn-maroon-dark);

    color: #ffffff;

    box-shadow: var(--btn-maroon-shadow);
}

.btn-register {
    border-color: var(--btn-gold);

    background: var(--btn-gold);

    color: #382700;
}

.btn-register:hover {
    border-color: var(--btn-gold-dark);

    background: var(--btn-gold-dark);

    color: #ffffff;

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


/* ==========================================================================
   34. SOCIAL LOGIN BUTTON
   ========================================================================== */

.btn-social {
    width: 100%;

    border-color: #ded9dc;

    background: #ffffff;

    color: #393438;

    box-shadow:
        0 2px 7px rgba(25, 18, 21, 0.04);
}

.btn-social:hover {
    border-color: #cfc7cb;

    background: #faf9f9;

    color: #211e20;

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


/* ==========================================================================
   35. PROFILE ACTION GROUP
   ========================================================================== */

.profile-actions,
.btn-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 0.625rem;
}


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

.btn-group {
    position: relative;

    display: inline-flex;
    vertical-align: middle;
}

.btn-group > .btn {
    position: relative;

    flex: 1 1 auto;

    border-radius: 0;
}

.btn-group > .btn:first-child {
    border-top-left-radius: var(--btn-radius);
    border-bottom-left-radius: var(--btn-radius);
}

.btn-group > .btn:last-child {
    border-top-right-radius: var(--btn-radius);
    border-bottom-right-radius: var(--btn-radius);
}

.btn-group > .btn:not(:first-child) {
    margin-left: -1px;
}

.btn-group > .btn:hover,
.btn-group > .btn:focus-visible {
    z-index: 1;
}


/* ==========================================================================
   37. LOADING BUTTON
   ========================================================================== */

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

    cursor: wait;

    opacity: 0.82;
}

.btn-loading .btn-text,
.btn.is-loading .btn-text {
    opacity: 0.75;
}

.btn-spinner {
    display: inline-block;

    width: 1rem;
    height: 1rem;

    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;

    animation: btnSpinner 0.7s linear infinite;
}

@keyframes btnSpinner {
    to {
        transform: rotate(360deg);
    }
}


/* ==========================================================================
   38. DISABLED BUTTONS
   ========================================================================== */

.btn:disabled,
.btn.disabled,
.button:disabled,
.button.disabled {
    border-color: #d8d4d6;

    background: #e9e6e8;

    color: #999195;

    box-shadow: none;

    cursor: not-allowed;

    opacity: 0.7;

    pointer-events: none;
}

.btn-outline-primary:disabled,
.btn-outline-maroon:disabled,
.btn-outline-gold:disabled,
.btn-outline-secondary:disabled,
.btn-outline-success:disabled,
.btn-outline-danger:disabled {
    background: transparent;

    color: #aaa3a7;
}


/* ==========================================================================
   39. FLOATING ACTION BUTTON
   ========================================================================== */

.btn-floating,
.fab {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 1000;

    width: 54px;
    min-width: 54px;
    height: 54px;
    min-height: 54px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--btn-maroon-light),
            var(--btn-maroon)
        );

    color: #ffffff;

    box-shadow:
        0 10px 28px rgba(128, 0, 32, 0.28);
}

.btn-floating:hover,
.fab:hover {
    background:
        linear-gradient(
            135deg,
            var(--btn-maroon),
            var(--btn-maroon-dark)
        );

    color: #ffffff;

    box-shadow:
        0 14px 34px rgba(128, 0, 32, 0.34);

    transform: translateY(-2px);
}


/* ==========================================================================
   40. CLOSE BUTTON
   ========================================================================== */

.btn-close-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: transparent;

    color: #71686d;

    cursor: pointer;

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

.btn-close-custom:hover {
    background: rgba(128, 0, 32, 0.07);

    color: var(--btn-maroon);

    transform: rotate(4deg);
}


/* ==========================================================================
   41. ADMIN ACTION BUTTONS
   ========================================================================== */

.btn-admin-action {
    min-height: 34px;

    padding: 0.4rem 0.7rem;

    border-color: #ddd7da;

    background: #ffffff;

    color: #50494d;

    font-size: 0.82rem;
}

.btn-admin-action:hover {
    border-color: var(--btn-maroon);

    color: var(--btn-maroon);

    box-shadow:
        0 4px 10px rgba(128, 0, 32, 0.08);
}

.btn-admin-edit:hover {
    border-color: #d4af37;

    background: rgba(212, 175, 55, 0.09);

    color: #80620a;
}

.btn-admin-delete:hover {
    border-color: #dc3545;

    background: rgba(220, 53, 69, 0.07);

    color: #b02a37;
}


/* ==========================================================================
   42. TABLE ACTION BUTTON
   ========================================================================== */

.table-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 0.35rem;
}

.table-actions .btn {
    min-height: 32px;

    padding: 0.35rem 0.6rem;

    font-size: 0.78rem;
}


/* ==========================================================================
   43. PREMIUM BUTTON SHINE
   ========================================================================== */

.btn-shine {
    overflow: hidden;
}

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

    position: absolute;
    top: -50%;
    left: -70%;

    width: 40%;
    height: 200%;

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

    transform: rotate(20deg);

    transition: left 600ms ease;
}

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


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

.btn-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 18px;
    height: 18px;

    padding: 0 5px;

    border-radius: 999px;

    background: #ffffff;

    color: var(--btn-maroon);

    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
}

.btn-outline-primary .btn-badge {
    background: var(--btn-maroon);

    color: #ffffff;
}

.btn-outline-primary:hover .btn-badge {
    background: #ffffff;

    color: var(--btn-maroon);
}


/* ==========================================================================
   45. ACTIVE STATE
   ========================================================================== */

.btn.active,
.btn[aria-pressed="true"] {
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.10);
}


/* ==========================================================================
   46. BUTTON WITH COUNTER
   ========================================================================== */

.btn-counter {
    position: absolute;
    top: -7px;
    right: -7px;

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

    min-width: 20px;
    height: 20px;

    padding: 0 5px;

    border: 2px solid #ffffff;
    border-radius: 999px;

    background: var(--btn-maroon);

    color: #ffffff;

    font-size: 0.65rem;
    font-weight: 700;
}


/* ==========================================================================
   47. RESPONSIVE
   ========================================================================== */

@media (max-width: 767.98px) {

    .btn-responsive {
        width: 100%;
    }

    .profile-actions,
    .btn-actions {
        gap: 0.5rem;
    }

    .profile-actions .btn {
        flex: 1 1 auto;
    }

    .btn-floating,
    .fab {
        right: 1rem;
        bottom: 1rem;

        width: 50px;
        min-width: 50px;
        height: 50px;
        min-height: 50px;
    }
}

@media (max-width: 575.98px) {

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

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

        padding-right: 1.2rem;
        padding-left: 1.2rem;
    }

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

        padding-right: 1.35rem;
        padding-left: 1.35rem;
    }

    .profile-actions.mobile-stack {
        flex-direction: column;
    }

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


/* ==========================================================================
   48. TOUCH DEVICES
   ========================================================================== */

@media (hover: none) and (pointer: coarse) {

    .btn,
    .button {
        min-height: 44px;
    }

    .btn-sm {
        min-height: 38px;
    }

    .btn:hover,
    .button:hover {
        transform: none;
    }
}


/* ==========================================================================
   49. REDUCED MOTION
   ========================================================================== */

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

    .btn,
    .button,
    .btn-close-custom,
    .btn-floating,
    .fab {
        transition: none !important;
    }

    .btn:hover,
    .button:hover,
    .btn-floating:hover,
    .fab:hover,
    .btn:active,
    .button:active {
        transform: none !important;
    }

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

    .btn-shine::before {
        display: none;
    }
}


/* ==========================================================================
   50. PRINT
   ========================================================================== */

@media print {

    .btn,
    .button,
    .btn-floating,
    .fab {
        box-shadow: none !important;
    }

    .btn-floating,
    .fab {
        display: none !important;
    }
}