/*
|--------------------------------------------------------------------------
| TechPackHub Client Portal v2
| Buttons
|--------------------------------------------------------------------------
*/

/* ==========================================================
   Base Button
========================================================== */

.tph-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:12px 22px;

    border:none;

    border-radius:12px;

    font-size:15px;

    font-weight:600;

    text-decoration:none;

    cursor:pointer;

    transition:all .25s ease;

    line-height:1;

    white-space:nowrap;

    user-select:none;

}

.tph-btn:focus{

    outline:none;

    box-shadow:0 0 0 4px rgba(37,99,235,.18);

}

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

.tph-btn-primary{

    background:var(--tph-primary);

    color:#fff;

}

.tph-btn-primary:hover{

    background:var(--tph-primary-hover);

    transform:translateY(-2px);

    box-shadow:0 10px 24px rgba(37,99,235,.25);

}

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

.tph-btn-secondary{

    background:#f3f4f6;

    color:var(--tph-heading);

    border:1px solid var(--tph-border);

}

.tph-btn-secondary:hover{

    background:#e5e7eb;

}

/* ==========================================================
   Outline
========================================================== */

.tph-btn-outline{

    background:transparent;

    color:var(--tph-primary);

    border:1px solid var(--tph-primary);

}

.tph-btn-outline:hover{

    background:var(--tph-primary);

    color:#fff;

}

/* ==========================================================
   Ghost
========================================================== */

.tph-btn-ghost{

    background:transparent;

    color:var(--tph-heading);

}

.tph-btn-ghost:hover{

    background:#f8fafc;

}

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

.tph-btn-success{

    background:#16a34a;

    color:#fff;

}

.tph-btn-success:hover{

    background:#15803d;

}

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

.tph-btn-danger{

    background:#dc2626;

    color:#fff;

}

.tph-btn-danger:hover{

    background:#b91c1c;

}

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

.tph-btn-warning{

    background:#f59e0b;

    color:#fff;

}

.tph-btn-warning:hover{

    background:#d97706;

}

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

.tph-btn-info{

    background:#0ea5e9;

    color:#fff;

}

.tph-btn-info:hover{

    background:#0284c7;

}

/* ==========================================================
   Small
========================================================== */

.tph-btn-sm{

    padding:8px 16px;

    font-size:13px;

}

/* ==========================================================
   Large
========================================================== */

.tph-btn-lg{

    padding:16px 28px;

    font-size:16px;

}

/* ==========================================================
   Full Width
========================================================== */

.tph-btn-block{

    display:flex;

    width:100%;

}

/* ==========================================================
   Icon Button
========================================================== */

.tph-btn-icon{

    width:46px;

    height:46px;

    padding:0;

    border-radius:12px;

}

.tph-btn svg{

    width:18px;

    height:18px;

}

/* ==========================================================
   Loading
========================================================== */

.tph-btn.loading{

    pointer-events:none;

    opacity:.8;

    position:relative;

}

.tph-btn.loading::after{

    content:"";

    width:16px;

    height:16px;

    border:2px solid rgba(255,255,255,.4);

    border-top-color:#fff;

    border-radius:50%;

    animation:tphSpin .7s linear infinite;

}

/* ==========================================================
   Disabled
========================================================== */

.tph-btn:disabled,

.tph-btn.disabled{

    opacity:.5;

    pointer-events:none;

    cursor:not-allowed;

}

/* ==========================================================
   Button Group
========================================================== */

.tph-btn-group{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}

/* ==========================================================
   Download Button
========================================================== */

.tph-download-btn{

    min-width:150px;

}

/* ==========================================================
   Hover Utility
========================================================== */

.tph-btn:hover{

    text-decoration:none;

}

/* ==========================================================
   Active State
========================================================== */

.tph-btn:active{

    transform:scale(.97);

}

/* ==========================================================
   Spinner Animation
========================================================== */

@keyframes tphSpin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/* ==========================================================
   Responsive
========================================================== */

@media(max-width:768px){

    .tph-btn{

        width:100%;

        justify-content:center;

    }

    .tph-btn-group{

        flex-direction:column;

    }

    .tph-btn-icon{

        width:100%;

        height:48px;

    }

}