/* ==========================================================
   PRIMEVAULT DESIGN SYSTEM
   Buttons
========================================================== */

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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:14px 28px;

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

    font-family:"Inter", sans-serif;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:var(--transition);

    white-space:nowrap;

}

/* ==========================================================
   PRIMARY
========================================================== */

.btn-primary{

    background:var(--primary);

    color:var(--text-white);

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

}

.btn-primary:hover{

    transform:translateY(-2px);

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

}

/* ==========================================================
   ACCENT
========================================================== */

.btn-accent{

    background:var(--accent);

    color:var(--primary);

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

}

.btn-accent:hover{

    transform:translateY(-2px);

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

}

/* ==========================================================
   SECONDARY
========================================================== */

.btn-secondary{

    background:var(--background);

    color:var(--text-primary);

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

}

.btn-secondary:hover{

    background:var(--surface);

}

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

.btn-outline{

    background:transparent;

    color:var(--text-primary);

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

}

.btn-outline:hover{

    background:var(--surface);

}

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

.btn-ghost{

    background:transparent;

    color:var(--text-primary);

}

.btn-ghost:hover{

    background:var(--surface);

}

/* ==========================================================
   SUCCESS
========================================================== */

.btn-success{

    background:var(--success);

    color:#fff;

}

/* ==========================================================
   DANGER
========================================================== */

.btn-danger{

    background:var(--danger);

    color:#fff;

}

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

.btn:disabled{

    opacity:.6;

    cursor:not-allowed;

    pointer-events:none;

}

/* ==========================================================
   BUTTON SIZES
========================================================== */

.btn-sm{

    padding:10px 18px;

    font-size:14px;

}

.btn-md{

    padding:14px 28px;

}

.btn-lg{

    padding:18px 36px;

    font-size:16px;

}

/* ==========================================================
   FULL WIDTH
========================================================== */

.btn-block{

    width:100%;

}


/* ==========================================
   SECTION BUTTONS
========================================== */

.section-buttons,
.plans-button,
.testimonial-button,
.faq-button,
.global-button,
.security-button{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-top:50px;

}

.section-buttons .btn,
.plans-button .btn,
.testimonial-button .btn,
.faq-button .btn,
.global-button .btn,
.security-button .btn{

    min-width:240px;

}