/* ======================================================
   SEAN B SOLUTIONS
   BUTTON SYSTEM
   /assets/css/home/buttons.css

   Professional Corporate Button Components

   Includes:
   - Primary Buttons
   - Secondary Buttons
   - Outline Buttons
   - Hero Buttons
   - Icon Buttons
   - Loading Buttons
   - Mobile Responsive
====================================================== */


/* ======================================================
   BASE BUTTON
====================================================== */


.btn{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-height:48px;

    padding:14px 32px;

    border-radius:14px;

    border:none;

    outline:none;

    cursor:pointer;

    font-family:inherit;

    font-size:.95rem;

    font-weight:700;

    letter-spacing:.01em;

    text-decoration:none;

    white-space:nowrap;

    overflow:hidden;

    transition:

    transform .35s ease,
    box-shadow .35s ease,
    background .35s ease,
    color .35s ease,
    border-color .35s ease;

}



/* Remove default button styles */


button.btn{

    appearance:none;

}



/* ======================================================
   PRIMARY BUTTON
   Red Brand CTA
====================================================== */


.btn-primary{

    background:

    linear-gradient(
    135deg,
    var(--secondary,#e60000),
    #b80000
    );

    color:#fff;

    box-shadow:

    0 12px 30px rgba(230,0,0,.25);

}



.btn-primary:hover{

    color:#fff;

    transform:

    translateY(-4px);

    box-shadow:

    0 20px 45px rgba(230,0,0,.35);

}



.btn-primary:active{

    transform:

    translateY(-1px);

}



/* ======================================================
   DARK BUTTON
   Navy Corporate CTA
====================================================== */


.btn-dark{

    background:

    var(--primary,#0b1f3a);

    color:#fff;

    box-shadow:

    0 12px 30px rgba(11,31,58,.25);

}



.btn-dark:hover{

    background:

    #173b68;

    color:#fff;

    transform:

    translateY(-4px);

}



/* ======================================================
   OUTLINE BUTTON
====================================================== */


.btn-outline{

    background:

    transparent;

    color:

    var(--primary,#0b1f3a);

    border:

    2px solid var(--primary,#0b1f3a);

}



.btn-outline:hover{

    background:

    var(--primary,#0b1f3a);

    color:#fff;

    transform:

    translateY(-3px);

}



/* ======================================================
   WHITE BUTTON
   Used on dark backgrounds
====================================================== */


.btn-white{

    background:#fff;

    color:

    var(--primary,#0b1f3a);

    box-shadow:

    0 10px 30px rgba(0,0,0,.15);

}



.btn-white:hover{

    background:

    #f5f7fa;

    color:

    var(--secondary,#e60000);

    transform:

    translateY(-4px);

}



/* ======================================================
   GHOST BUTTON
====================================================== */


.btn-ghost{

    background:

    rgba(255,255,255,.12);

    color:#fff;

    border:

    1px solid rgba(255,255,255,.3);

}



.btn-ghost:hover{

    background:#fff;

    color:

    var(--primary,#0b1f3a);

}



/* ======================================================
   LARGE BUTTON
   Hero / Landing Pages
====================================================== */


.btn-lg{

    padding:

    17px 42px;

    font-size:

    1.05rem;

    border-radius:

    16px;

}



/* ======================================================
   SMALL BUTTON
====================================================== */


.btn-sm{

    padding:

    10px 20px;

    font-size:

    .85rem;

    border-radius:

    10px;

}



/* ======================================================
   BUTTON WITH ICON
====================================================== */


.btn i,
.btn svg{

    font-size:

    1.1rem;

    transition:

    transform .3s ease;

}



.btn:hover i,
.btn:hover svg{

    transform:

    translateX(4px);

}



/* ======================================================
   ICON ONLY BUTTON
====================================================== */


.btn-icon{

    width:48px;

    height:48px;

    padding:0;

    border-radius:50%;

}



.btn-icon:hover{

    transform:

    translateY(-3px);

}



/* ======================================================
   BUTTON GROUP
====================================================== */


.btn-group{

    display:flex;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;

}



/* ======================================================
   BUTTON SHINE EFFECT
====================================================== */


.btn-shine::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:80%;

    height:100%;

    background:

    rgba(255,255,255,.25);

    transform:

    skewX(-25deg);

    transition:.6s ease;

}



.btn-shine:hover::before{

    left:130%;

}



/* ======================================================
   LOADING BUTTON
====================================================== */


.btn-loading{

    pointer-events:none;

    opacity:.75;

}



.btn-loading::after{

    content:"";

    width:16px;

    height:16px;

    border:

    2px solid rgba(255,255,255,.5);

    border-top-color:#fff;

    border-radius:50%;

    animation:

    buttonSpin .7s linear infinite;

}



@keyframes buttonSpin{


    from{

        transform:rotate(0deg);

    }


    to{

        transform:rotate(360deg);

    }


}



/* ======================================================
   DISABLED BUTTON
====================================================== */


.btn:disabled,
.btn.disabled{

    opacity:.5;

    cursor:not-allowed;

    transform:none;

    box-shadow:none;

}



/* ======================================================
   HERO BUTTON STYLE
====================================================== */


.hero .btn{

    min-width:170px;

}



.hero .btn-primary{

    box-shadow:

    0 20px 50px rgba(230,0,0,.35);

}



/* ======================================================
   SERVICE CTA BUTTON
====================================================== */


.service-card .btn{

    margin-top:20px;

}



/* ======================================================
   SHOP BUTTONS
====================================================== */


.product-card .btn{

    width:100%;

}



/* ======================================================
   MOBILE RESPONSIVE
====================================================== */


@media(max-width:768px){


.btn-group{

    width:100%;

}


.btn{

    width:100%;

}


.btn-icon{

    width:45px;

    height:45px;

}


}



@media(max-width:480px){


.btn-lg{

    padding:

    15px 25px;

    font-size:.95rem;

}


}