/**
 * ==========================================================
 * MetrYMMO V2
 * Boutons Premium
 * ==========================================================
 */

/* ==========================================================
   Bouton de base
========================================================== */

.btn,
button,
input[type="submit"],
input[type="button"],
.wp-element-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    min-height: 56px;
    padding: 0 2rem;
    border: 2px solid transparent;
    border-radius: var(--radius-full);
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color var(--transition-base),
        color var(--transition-base),
        border-color var(--transition-base),
        transform var(--transition-base),
        box-shadow var(--transition-base);
}

/* ==========================================================
   Bouton principal
========================================================== */

.btn-primary {
    color: var(--text-white);
    background: var(--gradient-primary);
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

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

/* ==========================================================
   Bouton secondaire
========================================================== */

.btn-secondary {
    color: var(--text-heading);
    background: var(--gradient-gold);
    box-shadow: var(--shadow-sm);
}

.btn-secondary:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

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

.btn-outline {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background: transparent;
}

.btn-outline:hover {
    color: var(--text-white);
    background: var(--color-primary);
    transform: translateY(-3px);
}

/* ==========================================================
   Blanc
========================================================== */

.btn-white {
    color: var(--color-primary);
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
}

.btn-white:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

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

.btn-ghost {
    color: var(--text-heading);
    background: transparent;
}

.btn-ghost:hover {
    background: rgba(15, 76, 129, .08);
}

/* ==========================================================
   Boutons sur fond sombre
========================================================== */

.section--dark .btn-outline,
.section--gradient .btn-outline {
    color: var(--text-white);
    border-color: rgba(255, 255, 255, .45);
}

.section--dark .btn-outline:hover,
.section--gradient .btn-outline:hover {
    color: var(--text-heading);
    border-color: var(--color-white);
    background: var(--color-white);
}

/* ==========================================================
   Tailles
========================================================== */

.btn-sm {
    min-height: 44px;
    padding: 0 1.25rem;
    font-size: .9rem;
}

.btn-lg {
    min-height: 64px;
    padding: 0 2.5rem;
    font-size: 1.1rem;
}

.btn-block {
    width: 100%;
}

/* ==========================================================
   Icônes
========================================================== */

.btn svg,
.btn i {
    transition: transform var(--transition-base);
}

.btn:hover svg,
.btn:hover i {
    transform: translateX(4px);
}

/* ==========================================================
   États
========================================================== */

.btn:focus-visible,
button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.btn:disabled,
button:disabled,
input[type="submit"]:disabled,
input[type="button"]:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ==========================================================
   Groupe de boutons
========================================================== */

.btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.btn-group--center {
    justify-content: center;
}

.btn-group--right {
    justify-content: flex-end;
}

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

@media (max-width: 768px) {

    .btn,
    button,
    input[type="submit"],
    input[type="button"],
    .wp-element-button {
        width: 100%;
        min-height: 54px;
    }

    .btn-group {
        flex-direction: column;
    }

    .btn-group .btn {
        width: 100%;
    }
}