/* ========================================
   COMPONENTS — V2 THEME
======================================== */


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

.btn {

    display: inline-block;

    padding: 15px 30px;

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

    text-decoration: none;

    font-weight: 700;

    font-size: 16px;

    border: 1px solid transparent;

    cursor: pointer;

    font-family: inherit;

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


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

.btn-primary {

    background: var(--primary);

    color: #ffffff;
}


.btn-primary:hover {

    background: var(--primary-dark);

    color: #ffffff;

    transform: translateY(-2px);

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


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

.btn-secondary {

    background: var(--coral);

    color: #ffffff;
}


.btn-secondary:hover {

    background: var(--coral);

    color: #ffffff;

    transform: translateY(-2px);

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


/* ========================================
   LIGHT
======================================== */

.btn-light {

    background: var(--surface);

    color: var(--heading);

    border-color: var(--border);

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


.btn-light:hover {

    background: var(--surface);

    color: var(--primary);

    transform: translateY(-2px);

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


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

.btn-outline {

    background: transparent;

    color: var(--primary);

    border-color: var(--primary);
}


.btn-outline:hover {

    background: var(--primary);

    color: #ffffff;

    transform: translateY(-2px);

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


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

.btn-sm {

    padding: 10px 20px;

    font-size: 14px;
}


/* ========================================
   LARGE BUTTON
======================================== */

.btn-lg {

    padding: 17px 35px;

    font-size: 17px;
}


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

.btn:disabled {

    opacity: 0.6;

    cursor: not-allowed;

    transform: none;

    box-shadow: none;
}


/* ========================================
   SCREEN READER ONLY
======================================== */

.sr-only {

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}


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

@media (max-width: 768px) {

    .btn {

        padding: 13px 25px;

        font-size: 15px;
    }

}