/* ========================================
   MN CSS Framework - Solid Buttons
   ======================================== */
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css");

/* Base Button */
.mn-btn{
    --mn-radius:10px;
    --mn-font-size:15px;
    --mn-padding:12px 24px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    padding:var(--mn-padding);
    border:none;
    border-radius:var(--mn-radius);

    font-size:var(--mn-font-size);
    font-weight:600;
    font-family:inherit;
    line-height:1;

    text-decoration:none;
    cursor:pointer;
    user-select:none;

    transition:all .25s ease;
}

.mn-btn:hover{
    transform:translateY(-2px);
}

.mn-btn:active{
    transform:translateY(0);
}

.mn-btn:focus-visible{
    outline:3px solid rgba(59,130,246,.25);
    outline-offset:3px;
}

.mn-btn:disabled{
    opacity:.6;
    cursor:not-allowed;
    transform:none;
    box-shadow:none;
}

/* ========================================
   Primary
   ======================================== */

.mn-btn-main{
    background:#0d6efd;
    color:#fff;
}

.mn-btn-main:hover{
    background:#0b5ed7;
}

/* ========================================
   Secondary
   ======================================== */

.mn-btn-alt{
    background:#6c757d;
    color:#fff;
}

.mn-btn-alt:hover{
    background:#5c636a;
}

/* ========================================
   Success
   ======================================== */

.mn-btn-success{
    background:#198754;
    color:#fff;
}

.mn-btn-success:hover{
    background:#157347;
}

/* ========================================
   Danger
   ======================================== */

.mn-btn-danger{
    background:#dc3545;
    color:#fff;
}

.mn-btn-danger:hover{
    background:#bb2d3b;
}

/* ========================================
   Warning
   ======================================== */

.mn-btn-warning{
    background:#ffc107;
    color:#212529;
}

.mn-btn-warning:hover{
    background:#ffca2c;
}

/* ========================================
   Info
   ======================================== */

.mn-btn-info{
    background:#0dcaf0;
    color:#000;
}

.mn-btn-info:hover{
    background:#31d2f2;
}

/* ========================================
   Dark
   ======================================== */

.mn-btn-dark{
    background:#212529;
    color:#fff;
}

.mn-btn-dark:hover{
    background:#1c1f23;
}

/* ========================================
   Light
   ======================================== */

.mn-btn-light{
    background:#f8f9fa;
    color:#212529;
    border:1px solid #dee2e6;
}

.mn-btn-light:hover{
    background:#e9ecef;
}

/* ========================================
   Purple
   ======================================== */

.mn-btn-purple{
    background:#6f42c1;
    color:#fff;
}

.mn-btn-purple:hover{
    background:#5d36a4;
}

/* ========================================
   Pink
   ======================================== */

.mn-btn-pink{
    background:#d63384;
    color:#fff;
}

.mn-btn-pink:hover{
    background:#b02a6f;
}

/* ========================================
   Orange
   ======================================== */

.mn-btn-orange{
    background:#fd7e14;
    color:#fff;
}

.mn-btn-orange:hover{
    background:#e96b02;
}

/* ========================================
   Teal
   ======================================== */

.mn-btn-teal{
    background:#20c997;
    color:#fff;
}

.mn-btn-teal:hover{
    background:#1aa179;
}


/* ========================================
   MN CSS Framework - Outline Buttons
   ======================================== */

/* Primary */
.mn-btn-outline-main{
    background:transparent;
    color:#0d6efd;
    border:2px solid #0d6efd;
}

.mn-btn-outline-main:hover{
    background:#0d6efd;
    color:#fff;
}

/* Secondary */
.mn-btn-outline-alt{
    background:transparent;
    color:#6c757d;
    border:2px solid #6c757d;
}

.mn-btn-outline-alt:hover{
    background:#6c757d;
    color:#fff;
}

/* Success */
.mn-btn-outline-success{
    background:transparent;
    color:#198754;
    border:2px solid #198754;
}

.mn-btn-outline-success:hover{
    background:#198754;
    color:#fff;
}

/* Danger */
.mn-btn-outline-danger{
    background:transparent;
    color:#dc3545;
    border:2px solid #dc3545;
}

.mn-btn-outline-danger:hover{
    background:#dc3545;
    color:#fff;
}

/* Warning */
.mn-btn-outline-warning{
    background:transparent;
    color:#ffc107;
    border:2px solid #ffc107;
}

.mn-btn-outline-warning:hover{
    background:#ffc107;
    color:#212529;
}

/* Info */
.mn-btn-outline-info{
    background:transparent;
    color:#0dcaf0;
    border:2px solid #0dcaf0;
}

.mn-btn-outline-info:hover{
    background:#0dcaf0;
    color:#000;
}

/* Dark */
.mn-btn-outline-dark{
    background:transparent;
    color:#212529;
    border:2px solid #212529;
}

.mn-btn-outline-dark:hover{
    background:#212529;
    color:#fff;
}

/* Light */
.mn-btn-outline-light{
    background:transparent;
    color:#6c757d;
    border:2px solid #dee2e6;
}

.mn-btn-outline-light:hover{
    background:#f8f9fa;
    color:#212529;
    border-color:#f8f9fa;
}

/* Purple */
.mn-btn-outline-purple{
    background:transparent;
    color:#6f42c1;
    border:2px solid #6f42c1;
}

.mn-btn-outline-purple:hover{
    background:#6f42c1;
    color:#fff;
}

/* Pink */
.mn-btn-outline-pink{
    background:transparent;
    color:#d63384;
    border:2px solid #d63384;
}

.mn-btn-outline-pink:hover{
    background:#d63384;
    color:#fff;
}

/* Orange */
.mn-btn-outline-orange{
    background:transparent;
    color:#fd7e14;
    border:2px solid #fd7e14;
}

.mn-btn-outline-orange:hover{
    background:#fd7e14;
    color:#fff;
}

/* Teal */
.mn-btn-outline-teal{
    background:transparent;
    color:#20c997;
    border:2px solid #20c997;
}

.mn-btn-outline-teal:hover{
    background:#20c997;
    color:#fff;
}


/* ========================================
   MN CSS Framework - Soft Buttons
   ======================================== */

/* Primary */
.mn-btn-soft-main{
    background:#dbeafe;
    color:#2563eb;
    border:1px solid #bfdbfe;
}

.mn-btn-soft-main:hover{
    background:#bfdbfe;
    color:#1d4ed8;
}

/* Secondary */
.mn-btn-soft-alt{
    background:#f1f3f5;
    color:#6c757d;
    border:1px solid #dee2e6;
}

.mn-btn-soft-alt:hover{
    background:#e9ecef;
    color:#495057;
}

/* Success */
.mn-btn-soft-success{
    background:#d1fae5;
    color:#198754;
    border:1px solid #a7f3d0;
}

.mn-btn-soft-success:hover{
    background:#a7f3d0;
    color:#146c43;
}

/* Danger */
.mn-btn-soft-danger{
    background:#fde2e4;
    color:#dc3545;
    border:1px solid #f8b4bc;
}

.mn-btn-soft-danger:hover{
    background:#f8b4bc;
    color:#b02a37;
}

/* Warning */
.mn-btn-soft-warning{
    background:#fff3cd;
    color:#b58105;
    border:1px solid #ffe69c;
}

.mn-btn-soft-warning:hover{
    background:#ffe69c;
    color:#997404;
}

/* Info */
.mn-btn-soft-info{
    background:#cff4fc;
    color:#0c8599;
    border:1px solid #9eeaf9;
}

.mn-btn-soft-info:hover{
    background:#9eeaf9;
    color:#087990;
}

/* Dark */
.mn-btn-soft-dark{
    background:#e9ecef;
    color:#212529;
    border:1px solid #ced4da;
}

.mn-btn-soft-dark:hover{
    background:#ced4da;
    color:#000;
}

/* Light */
.mn-btn-soft-light{
    background:#ffffff;
    color:#6c757d;
    border:1px solid #dee2e6;
}

.mn-btn-soft-light:hover{
    background:#f8f9fa;
}

/* Purple */
.mn-btn-soft-purple{
    background:#ede9fe;
    color:#6f42c1;
    border:1px solid #ddd6fe;
}

.mn-btn-soft-purple:hover{
    background:#ddd6fe;
}

/* Pink */
.mn-btn-soft-pink{
    background:#fce7f3;
    color:#d63384;
    border:1px solid #fbcfe8;
}

.mn-btn-soft-pink:hover{
    background:#fbcfe8;
}

/* Orange */
.mn-btn-soft-orange{
    background:#ffedd5;
    color:#fd7e14;
    border:1px solid #fed7aa;
}

.mn-btn-soft-orange:hover{
    background:#fed7aa;
}

/* Teal */
.mn-btn-soft-teal{
    background:#ccfbf1;
    color:#0f766e;
    border:1px solid #99f6e4;
}

.mn-btn-soft-teal:hover{
    background:#99f6e4;
}

/* ========================================
   MN CSS Framework - Ghost Buttons
   ======================================== */

/* Primary */
.mn-btn-ghost-main{
    background:transparent;
    color:#0d6efd;
    border:none;
}

.mn-btn-ghost-main:hover{
    background:rgba(13,110,253,.12);
    color:#0b5ed7;
}

/* Secondary */
.mn-btn-ghost-alt{
    background:transparent;
    color:#6c757d;
    border:none;
}

.mn-btn-ghost-alt:hover{
    background:rgba(108,117,125,.12);
    color:#495057;
}

/* Success */
.mn-btn-ghost-success{
    background:transparent;
    color:#198754;
    border:none;
}

.mn-btn-ghost-success:hover{
    background:rgba(25,135,84,.12);
    color:#157347;
}

/* Danger */
.mn-btn-ghost-danger{
    background:transparent;
    color:#dc3545;
    border:none;
}

.mn-btn-ghost-danger:hover{
    background:rgba(220,53,69,.12);
    color:#bb2d3b;
}

/* Warning */
.mn-btn-ghost-warning{
    background:transparent;
    color:#ffc107;
    border:none;
}

.mn-btn-ghost-warning:hover{
    background:rgba(255,193,7,.15);
    color:#b8860b;
}

/* Info */
.mn-btn-ghost-info{
    background:transparent;
    color:#0dcaf0;
    border:none;
}

.mn-btn-ghost-info:hover{
    background:rgba(13,202,240,.15);
    color:#0aa2c0;
}

/* Dark */
.mn-btn-ghost-dark{
    background:transparent;
    color:#212529;
    border:none;
}

.mn-btn-ghost-dark:hover{
    background:rgba(33,37,41,.10);
    color:#000;
}

/* Light */
.mn-btn-ghost-light{
    background:transparent;
    color:#6c757d;
    border:none;
}

.mn-btn-ghost-light:hover{
    background:#f8f9fa;
    color:#212529;
}

/* Purple */
.mn-btn-ghost-purple{
    background:transparent;
    color:#6f42c1;
    border:none;
}

.mn-btn-ghost-purple:hover{
    background:rgba(111,66,193,.12);
    color:#5a32a3;
}

/* Pink */
.mn-btn-ghost-pink{
    background:transparent;
    color:#d63384;
    border:none;
}

.mn-btn-ghost-pink:hover{
    background:rgba(214,51,132,.12);
    color:#b02a6f;
}

/* Orange */
.mn-btn-ghost-orange{
    background:transparent;
    color:#fd7e14;
    border:none;
}

.mn-btn-ghost-orange:hover{
    background:rgba(253,126,20,.12);
    color:#dc6a00;
}

/* Teal */
.mn-btn-ghost-teal{
    background:transparent;
    color:#20c997;
    border:none;
}

.mn-btn-ghost-teal:hover{
    background:rgba(32,201,151,.12);
    color:#199d78;
}



/* ========================================
   MN CSS Framework - Gradient Buttons
   ======================================== */

/* Default Gradient */
.mn-btn-gradient{
    background:linear-gradient(135deg,#6366f1,#8b5cf6);
    color:#fff;
    border:none;
}

.mn-btn-gradient:hover{
    background:linear-gradient(135deg,#4f46e5,#7c3aed);
}

/* Blue Gradient */
.mn-btn-gradient-blue{
    background:linear-gradient(135deg,#3b82f6,#06b6d4);
    color:#fff;
    border:none;
}

.mn-btn-gradient-blue:hover{
    background:linear-gradient(135deg,#2563eb,#0891b2);
}

/* Purple Gradient */
.mn-btn-gradient-purple{
    background:linear-gradient(135deg,#8b5cf6,#d946ef);
    color:#fff;
    border:none;
}

.mn-btn-gradient-purple:hover{
    background:linear-gradient(135deg,#7c3aed,#c026d3);
}

/* Red Gradient */
.mn-btn-gradient-red{
    background:linear-gradient(135deg,#ef4444,#f97316);
    color:#fff;
    border:none;
}

.mn-btn-gradient-red:hover{
    background:linear-gradient(135deg,#dc2626,#ea580c);
}

/* Green Gradient */
.mn-btn-gradient-green{
    background:linear-gradient(135deg,#22c55e,#14b8a6);
    color:#fff;
    border:none;
}

.mn-btn-gradient-green:hover{
    background:linear-gradient(135deg,#16a34a,#0d9488);
}

/* Pink Gradient */
.mn-btn-gradient-pink{
    background:linear-gradient(135deg,#ec4899,#f43f5e);
    color:#fff;
    border:none;
}

.mn-btn-gradient-pink:hover{
    background:linear-gradient(135deg,#db2777,#e11d48);
}

/* Orange Gradient */
.mn-btn-gradient-orange{
    background:linear-gradient(135deg,#f59e0b,#f97316);
    color:#fff;
    border:none;
}

.mn-btn-gradient-orange:hover{
    background:linear-gradient(135deg,#d97706,#ea580c);
}

/* Dark Gradient */
.mn-btn-gradient-dark{
    background:linear-gradient(135deg,#1f2937,#111827);
    color:#fff;
    border:none;
}

.mn-btn-gradient-dark:hover{
    background:linear-gradient(135deg,#111827,#000000);
}

/* Rainbow Gradient */
.mn-btn-gradient-rainbow{
    background:linear-gradient(
        135deg,
        #ff0080,
        #ff8c00,
        #ffd500,
        #00c853,
        #00b0ff,
        #7c4dff
    );
    background-size:300% 300%;
    color:#fff;
    border:none;
    animation:mn-gradient-flow 6s ease infinite;
}

.mn-btn-gradient-rainbow:hover{
    filter:brightness(1.05);
}

/* Animated Gradient */
.mn-btn-gradient-animated{
    background:linear-gradient(
        270deg,
        #3b82f6,
        #8b5cf6,
        #ec4899,
        #06b6d4
    );
    background-size:600% 600%;
    color:#fff;
    border:none;
    animation:mn-gradient-flow 8s ease infinite;
}

.mn-btn-gradient-animated:hover{
    filter:brightness(1.08);
}

/* Gradient Animation */
@keyframes mn-gradient-flow{
    0%{
        background-position:0% 50%;
    }
    50%{
        background-position:100% 50%;
    }
    100%{
        background-position:0% 50%;
    }
}


/* ========================================
   MN CSS Framework - Glass Buttons
   ======================================== */

/* Light Glass */
.mn-btn-glass{
    background:rgba(255,255,255,.18);
    color:#5d5a5a;
    border:1px solid rgba(255, 255, 255, 0.513);

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

    box-shadow:
        0 8px 20px rgba(0,0,0,.15),
        inset 0 1px 1px rgba(255,255,255,.25);
}

.mn-btn-glass:hover{
    background:rgba(255,255,255,.28);
    border-color:rgba(255,255,255,.5);

    box-shadow:
        0 12px 28px rgba(0,0,0,.22),
        inset 0 1px 2px rgba(255,255,255,.35);
}

/* Dark Glass */
.mn-btn-glass-dark{
    background:rgba(30,41,59,.35);
    color:#ffffff;
    border:1px solid rgba(255,255,255,.12);

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

    box-shadow:
        0 8px 20px rgba(0,0,0,.35),
        inset 0 1px 1px rgba(255,255,255,.08);
}

.mn-btn-glass-dark:hover{
    background:rgba(30,41,59,.5);
    border-color:rgba(255,255,255,.18);

    box-shadow:
        0 12px 28px rgba(0,0,0,.45),
        inset 0 1px 2px rgba(255,255,255,.12);
}

/* Active State */
.mn-btn-glass:active,
.mn-btn-glass-dark:active{
    transform:scale(.97);
}

/* Optional Shine Effect */
.mn-btn-glass,
.mn-btn-glass-dark{
    position:relative;
    overflow:hidden;
}

.mn-btn-glass::before,
.mn-btn-glass-dark::before{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:60%;
    height:100%;
    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );
    transition:left .6s ease;
}

.mn-btn-glass:hover::before,
.mn-btn-glass-dark:hover::before{
    left:150%;
}

/* ========================================
   MN CSS Framework - Link Buttons
   ======================================== */

.mn-btn-link,
.mn-btn-link-main,
.mn-btn-link-success,
.mn-btn-link-danger,
.mn-btn-link-warning,
.mn-btn-link-info,
.mn-btn-link-dark,
.mn-btn-link-light,
.mn-btn-link-purple,
.mn-btn-link-pink,
.mn-btn-link-orange,
.mn-btn-link-teal{
    background:transparent;
    border:none;
    padding:0;
    font-weight:600;
    text-decoration:none;
    box-shadow:none;
    transition:all .25s ease;
}

/* Primary */
.mn-btn-link,
.mn-btn-link-main{
    color:#0d6efd;
}

.mn-btn-link:hover,
.mn-btn-link-main:hover{
    color:#0b5ed7;
    text-decoration:underline;
}

/* Success */
.mn-btn-link-success{
    color:#198754;
}

.mn-btn-link-success:hover{
    color:#146c43;
    text-decoration:underline;
}

/* Danger */
.mn-btn-link-danger{
    color:#dc3545;
}

.mn-btn-link-danger:hover{
    color:#b02a37;
    text-decoration:underline;
}

/* Warning */
.mn-btn-link-warning{
    color:#b58105;
}

.mn-btn-link-warning:hover{
    color:#8a6d03;
    text-decoration:underline;
}

/* Info */
.mn-btn-link-info{
    color:#0dcaf0;
}

.mn-btn-link-info:hover{
    color:#0aa2c0;
    text-decoration:underline;
}

/* Dark */
.mn-btn-link-dark{
    color:#212529;
}

.mn-btn-link-dark:hover{
    color:#000;
    text-decoration:underline;
}

/* Light */
.mn-btn-link-light{
    color:#6c757d;
}

.mn-btn-link-light:hover{
    color:#495057;
    text-decoration:underline;
}

/* Purple */
.mn-btn-link-purple{
    color:#6f42c1;
}

.mn-btn-link-purple:hover{
    color:#5a32a3;
    text-decoration:underline;
}

/* Pink */
.mn-btn-link-pink{
    color:#d63384;
}

.mn-btn-link-pink:hover{
    color:#b02a6f;
    text-decoration:underline;
}

/* Orange */
.mn-btn-link-orange{
    color:#fd7e14;
}

.mn-btn-link-orange:hover{
    color:#dc6a00;
    text-decoration:underline;
}

/* Teal */
.mn-btn-link-teal{
    color:#20c997;
}

.mn-btn-link-teal:hover{
    color:#199d78;
    text-decoration:underline;
}

/* Focus */
.mn-btn-link:focus-visible,
.mn-btn-link-main:focus-visible,
.mn-btn-link-success:focus-visible,
.mn-btn-link-danger:focus-visible,
.mn-btn-link-warning:focus-visible,
.mn-btn-link-info:focus-visible,
.mn-btn-link-dark:focus-visible,
.mn-btn-link-light:focus-visible,
.mn-btn-link-purple:focus-visible,
.mn-btn-link-pink:focus-visible,
.mn-btn-link-orange:focus-visible,
.mn-btn-link-teal:focus-visible{
    outline:none;
    text-decoration:underline;
}

/* Disabled */
.mn-btn-link:disabled,
.mn-btn-link-main:disabled,
.mn-btn-link-success:disabled,
.mn-btn-link-danger:disabled,
.mn-btn-link-warning:disabled,
.mn-btn-link-info:disabled,
.mn-btn-link-dark:disabled,
.mn-btn-link-light:disabled,
.mn-btn-link-purple:disabled,
.mn-btn-link-pink:disabled,
.mn-btn-link-orange:disabled,
.mn-btn-link-teal:disabled{
    color:#adb5bd;
    pointer-events:none;
    cursor:not-allowed;
    text-decoration:none;
}


/* ========================================
   MN CSS Framework - Button Shapes
   ======================================== */

/* Pill Button */
.mn-btn-pill{
    border-radius:9999px !important;
}

/* Rounded Button */
.mn-btn-round{
    border-radius: var(--mn-radius) !important;
}

/* Square Button */
.mn-btn-square{
    border-radius:0 !important;
}

/* Circle Button */
.mn-btn-circle{
    width:48px;
    height:48px;

    min-width:48px;
    max-width:48px;

    min-height:48px;
    max-height:48px;

    padding:0;

    border-radius:50% !important;

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

    flex:0 0 48px;

    overflow:hidden;
}



/* Floating Circle */
.mn-btn-circle-lg{
    width:60px;
    height:60px;
    border-radius:50% !important;
    padding:0;

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

    font-size:22px;
}

/* Small Circle */
.mn-btn-circle-sm{
    width:36px;
    height:36px;
    border-radius:50%;
    padding:0;

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

    font-size:14px;
} 
.mn-btn-circle,
.mn-btn-circle-sm,
.mn-btn-circle-lg{
    flex:0 0 auto;
}
/* ========================================
   MN CSS Framework - Shadow Buttons
   ======================================== */

/* Small Shadow */
.mn-btn-shadow{
    box-shadow:
        0 4px 12px rgba(0,0,0,.15);
}

.mn-btn-shadow:hover{
    box-shadow:
        0 8px 20px rgba(0,0,0,.22);
}

/* Medium Shadow */
.mn-btn-shadow-md{
    box-shadow:
        0 6px 16px rgba(0,0,0,.18);
}

.mn-btn-shadow-md:hover{
    box-shadow:
        0 12px 24px rgba(0,0,0,.26);
}

/* Large Shadow */
.mn-btn-shadow-lg{
    box-shadow:
        0 10px 30px rgba(0,0,0,.25);
}

.mn-btn-shadow-lg:hover{
    box-shadow:
        0 16px 40px rgba(0,0,0,.35);
}

/* Extra Large Shadow */
.mn-btn-shadow-xl{
    box-shadow:
        0 16px 50px rgba(0,0,0,.30);
}

.mn-btn-shadow-xl:hover{
    box-shadow:
        0 22px 60px rgba(0,0,0,.40);
}

/* Colored Shadow Variants */
.mn-btn-main.mn-btn-shadow{
    box-shadow:0 6px 18px rgba(13,110,253,.35);
}

.mn-btn-main.mn-btn-shadow:hover{
    box-shadow:0 10px 28px rgba(13,110,253,.50);
}

.mn-btn-success.mn-btn-shadow{
    box-shadow:0 6px 18px rgba(25,135,84,.35);
}

.mn-btn-success.mn-btn-shadow:hover{
    box-shadow:0 10px 28px rgba(25,135,84,.50);
}

.mn-btn-danger.mn-btn-shadow{
    box-shadow:0 6px 18px rgba(220,53,69,.35);
}

.mn-btn-danger.mn-btn-shadow:hover{
    box-shadow:0 10px 28px rgba(220,53,69,.50);
}

.mn-btn-warning.mn-btn-shadow{
    box-shadow:0 6px 18px rgba(255,193,7,.35);
}

.mn-btn-warning.mn-btn-shadow:hover{
    box-shadow:0 10px 28px rgba(255,193,7,.50);
}

.mn-btn-info.mn-btn-shadow{
    box-shadow:0 6px 18px rgba(13,202,240,.35);
}

.mn-btn-info.mn-btn-shadow:hover{
    box-shadow:0 10px 28px rgba(13,202,240,.50);
}

.mn-btn-dark.mn-btn-shadow{
    box-shadow:0 6px 18px rgba(33,37,41,.40);
}

.mn-btn-dark.mn-btn-shadow:hover{
    box-shadow:0 10px 28px rgba(33,37,41,.55);
}

/* ========================================
   MN CSS Framework - Glow Buttons
   ======================================== */

/* Base Glow */
.mn-btn-glow{
    transition:all .3s ease;
}

/* Hover Animation */
.mn-btn-glow:hover{
    transform:translateY(-2px);
}

/* Primary */
.mn-btn-main.mn-btn-glow{
    box-shadow:
        0 0 10px rgba(13,110,253,.35),
        0 0 20px rgba(13,110,253,.30),
        0 0 35px rgba(13,110,253,.20);
}

.mn-btn-main.mn-btn-glow:hover{
    box-shadow:
        0 0 15px rgba(13,110,253,.45),
        0 0 30px rgba(13,110,253,.40),
        0 0 50px rgba(13,110,253,.30);
}

/* Success */
.mn-btn-success.mn-btn-glow{
    box-shadow:
        0 0 10px rgba(25,135,84,.35),
        0 0 20px rgba(25,135,84,.30),
        0 0 35px rgba(25,135,84,.20);
}

.mn-btn-success.mn-btn-glow:hover{
    box-shadow:
        0 0 15px rgba(25,135,84,.45),
        0 0 30px rgba(25,135,84,.40),
        0 0 50px rgba(25,135,84,.30);
}

/* Danger */
.mn-btn-danger.mn-btn-glow{
    box-shadow:
        0 0 10px rgba(220,53,69,.35),
        0 0 20px rgba(220,53,69,.30),
        0 0 35px rgba(220,53,69,.20);
}

.mn-btn-danger.mn-btn-glow:hover{
    box-shadow:
        0 0 15px rgba(220,53,69,.45),
        0 0 30px rgba(220,53,69,.40),
        0 0 50px rgba(220,53,69,.30);
}

/* Warning */
.mn-btn-warning.mn-btn-glow{
    box-shadow:
        0 0 10px rgba(255,193,7,.35),
        0 0 20px rgba(255,193,7,.30),
        0 0 35px rgba(255,193,7,.20);
}

.mn-btn-warning.mn-btn-glow:hover{
    box-shadow:
        0 0 15px rgba(255,193,7,.45),
        0 0 30px rgba(255,193,7,.40),
        0 0 50px rgba(255,193,7,.30);
}

/* Info */
.mn-btn-info.mn-btn-glow{
    box-shadow:
        0 0 10px rgba(13,202,240,.35),
        0 0 20px rgba(13,202,240,.30),
        0 0 35px rgba(13,202,240,.20);
}

.mn-btn-info.mn-btn-glow:hover{
    box-shadow:
        0 0 15px rgba(13,202,240,.45),
        0 0 30px rgba(13,202,240,.40),
        0 0 50px rgba(13,202,240,.30);
}

/* Dark */
.mn-btn-dark.mn-btn-glow{
    box-shadow:
        0 0 10px rgba(33,37,41,.35),
        0 0 20px rgba(33,37,41,.30),
        0 0 35px rgba(33,37,41,.20);
}

.mn-btn-dark.mn-btn-glow:hover{
    box-shadow:
        0 0 15px rgba(33,37,41,.45),
        0 0 30px rgba(33,37,41,.40),
        0 0 50px rgba(33,37,41,.30);
}

/* Purple */
.mn-btn-purple.mn-btn-glow{
    box-shadow:
        0 0 10px rgba(111,66,193,.35),
        0 0 20px rgba(111,66,193,.30),
        0 0 35px rgba(111,66,193,.20);
}

.mn-btn-purple.mn-btn-glow:hover{
    box-shadow:
        0 0 15px rgba(111,66,193,.45),
        0 0 30px rgba(111,66,193,.40),
        0 0 50px rgba(111,66,193,.30);
}


/* ========================================
   MN CSS Framework - Hover Effects
   ======================================== */

/* Base Transition */
.mn-btn-hover-scale,
.mn-btn-hover-rise,
.mn-btn-hover-slide,
.mn-btn-hover-rotate,
.mn-btn-hover-skew,
.mn-btn-hover-glow{
    transition:all .3s ease;
}

/* ==========================
   Scale
   ========================== */

.mn-btn-hover-scale:hover{
    transform:scale(1.08);
}

/* ==========================
   Rise
   ========================== */

.mn-btn-hover-rise:hover{
    transform:translateY(-6px);
    box-shadow:0 12px 25px rgba(0,0,0,.18);
}

/* ==========================
   Slide Right
   ========================== */

.mn-btn-hover-slide{
    position:relative;
    overflow:hidden;
}

.mn-btn-hover-slide::before{
    content:"";
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:rgba(255,255,255,.15);
    transition:left .35s ease;
}

.mn-btn-hover-slide:hover::before{
    left:100%;
}

/* ==========================
   Rotate
   ========================== */

.mn-btn-hover-rotate:hover{
    transform:rotate(-3deg) scale(1.05);
}

/* ==========================
   Skew
   ========================== */

.mn-btn-hover-skew:hover{
    transform:skewX(-8deg);
}

/* ==========================
   Glow Hover
   ========================== */

.mn-btn-hover-glow:hover{
    box-shadow:
        0 0 15px rgba(13, 109, 253, 0.784),
        0 0 30px rgba(13, 109, 253, 0.648);
}

/* ==========================
   Press Effect
   ========================== */

.mn-btn-hover-scale:active,
.mn-btn-hover-rise:active,
.mn-btn-hover-slide:active,
.mn-btn-hover-rotate:active,
.mn-btn-hover-skew:active,
.mn-btn-hover-glow:active{
    transform:scale(.96);
}


/* ========================================
   MN CSS Framework - Loading & Disabled
   ======================================== */

/* Disabled Button */
.mn-btn:disabled,
.mn-btn-disabled{
    opacity:.65;
    cursor:not-allowed;
    pointer-events:none;
    filter:grayscale(15%);
    box-shadow:none !important;
    transform:none !important;
}

/* Loading Button */
.mn-btn-loading{
    position:relative;
    pointer-events:none;
    cursor:wait;
    opacity:.9;
}

/* Hide Button Text */
.mn-btn-loading{
    color:transparent !important;
}

/* Spinner */
.mn-btn-loading::after{
    content:"";
    position:absolute;
    width:18px;
    height:18px;

    border:2px solid rgba(255,255,255,.35);
    border-top-color:#fff;

    border-radius:50%;

    animation:mn-btn-spin .7s linear infinite;
}

/* Dark & Light Button Spinner */
.mn-btn-light.mn-btn-loading::after,
.mn-btn-warning.mn-btn-loading::after,
.mn-btn-info.mn-btn-loading::after{
    border:2px solid rgba(0,0,0,.2);
    border-top-color:#000;
}

/* Spinner Animation */
@keyframes mn-btn-spin{
    to{
        transform:rotate(360deg);
    }
}

/* ========================================
   MN CSS Framework - Button Sizes
   ======================================== */

/* Base Button (Medium by Default) */
.mn-btn{
    padding:12px 24px;
    font-size:16px;
    font-weight:600;
    border-radius:10px;
    line-height:1;
}

/* Extra Small */
.mn-btn-xs{
    padding:4px 10px;
    font-size:12px;
    font-weight:500;
    border-radius:6px;
}

/* Small */
.mn-btn-sm{
    padding:8px 16px;
    font-size:14px;
    font-weight:500;
    border-radius:8px;
}

/* Large */
.mn-btn-lg{
    padding:15px 30px;
    font-size:18px;
    font-weight:600;
    border-radius:12px;
}

/* Extra Large */
.mn-btn-xl{
    padding:18px 38px;
    font-size:20px;
    font-weight:700;
    border-radius:14px;
}

/* ========================================
   MN CSS Framework - Block Button
   ======================================== */

/* Full Width Button */
.mn-btn-block{
    display:flex;
    width:100%;
    justify-content:center;
    align-items:center;
}

/* Optional: Full Width on Small Screens Only */
@media (max-width:768px){
    .mn-btn-block-sm{
        display:flex;
        width:100%;
        justify-content:center;
        align-items:center;
    }
}

/* Optional: Responsive Block Button */
@media (max-width:992px){
    .mn-btn-block-md{
        display:flex;
        width:100%;
        justify-content:center;
        align-items:center;
    }
}

@media (max-width:1200px){
    .mn-btn-block-lg{
        display:flex;
        width:100%;
        justify-content:center;
        align-items:center;
    }
}

/* ========================================
   MN CSS Framework - Icon Buttons
   ======================================== */

/* Default Icon */
.mn-btn i{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:1rem;
    line-height:1;
}

/* Icon Left */
.mn-btn-icon-left{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.55rem;
}

/* Icon Right */
.mn-btn-icon-right{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-direction:row-reverse;
    gap:.55rem;
}

/* Icon Only */
.mn-btn-icon{
    width:46px;
    height:46px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
}

.mn-btn-icon i{
    font-size:18px;
    margin:0;
}

/* Small */
.mn-btn-icon-sm{
    width:36px;
    height:36px;
}

.mn-btn-icon-sm i{
    font-size:14px;
}

/* Large */
.mn-btn-icon-lg{
    width:56px;
    height:56px;
}

.mn-btn-icon-lg i{
    font-size:22px;
}

/* Circle */
.mn-btn-icon-circle{
    border-radius:50%;
}

/* Hover Animation */
.mn-btn-icon:hover{
    transform:translateY(-2px);
}

.mn-btn-icon:active{
    transform:scale(.95);
}

/* ========================================
   MN CSS Framework - Animated Buttons
   ======================================== */

/* Required */
.mn-btn-ripple,
.mn-btn-bounce,
.mn-btn-pulse{
    position:relative;
    overflow:hidden;
}

/* ========================================
   Ripple
   ======================================== */

.mn-btn-ripple::before{
    content:"";
    position:absolute;
    top:50%;
    left:50%;

    width:0;
    height:0;

    background:rgba(255,255,255,.35);
    border-radius:50%;

    transform:translate(-50%,-50%);
    transition:width .5s ease,height .5s ease;
}

.mn-btn-ripple:active::before{
    width:250px;
    height:250px;
}

/* ========================================
   Bounce
   ======================================== */

.mn-btn-bounce:hover{
    animation:mn-btn-bounce .6s ease;
}

@keyframes mn-btn-bounce{

    0%{
        transform:translateY(0);
    }

    30%{
        transform:translateY(-10px);
    }

    60%{
        transform:translateY(4px);
    }

    100%{
        transform:translateY(0);
    }

}

/* ========================================
   Pulse
   ======================================== */

.mn-btn-pulse:hover{
    animation:mn-btn-pulse 1s infinite;
}

@keyframes mn-btn-pulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.08);
    }

    100%{
        transform:scale(1);
    }

}


/* ========================================
   MN CSS Framework - Floating Action Button
   ======================================== */

.mn-btn-fab{
    position:fixed;
    right:24px;
    bottom:24px;

    width:60px;
    height:60px;

    padding:0;

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

    border-radius:50%;

    font-size:24px;
    font-weight:600;

    box-shadow:
        0 10px 25px rgba(0,0,0,.25);

    z-index:999;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

/* Hover */
.mn-btn-fab:hover{
    transform:translateY(-4px) scale(1.05);

    box-shadow:
        0 18px 35px rgba(0,0,0,.35);
}

/* Active */
.mn-btn-fab:active{
    transform:scale(.95);
}

/* Small FAB */
.mn-btn-fab-sm{
    width:48px;
    height:48px;
    font-size:18px;
}

/* Large FAB */
.mn-btn-fab-lg{
    width:72px;
    height:72px;
    font-size:30px;
}

/* Position Utilities */
.mn-fab-left{
    left:24px;
    right:auto;
}

.mn-fab-top{
    top:24px;
    bottom:auto;
}

.mn-fab-center{
    left:50%;
    right:auto;
    transform:translateX(-50%);
}

.mn-fab-center:hover{
    transform:translateX(-50%) translateY(-4px) scale(1.05);
}