/* кнопки, карточки, формы */

/* Кнопки */


.slide-btn {

    background: rgba(255, 255, 255, 0.3);
    border: none;
    height: 24px;
    width: 24px;
    padding: var(--space-2);
    border-radius: 50%;
    cursor: pointer;
    backdrop-filter: blur(6px);
    font-size: 24px;
    line-height: 1;
    user-select: none;
}

.slide-btn--prev {
    left: var(--space-2);
}

.slide-btn--next {
    right: var(--space-2);
}

.slide-btn:hover {
    background: rgba(255, 255, 255, 0.5);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);

    padding-block: var(--space-2);
    padding-inline: var(--space-4);

    border-radius: 8px;
    border: 1px solid transparent;

    font-family: var(--font-family-regular);
    font-size: var(--fs-4);
    line-height: 1;
    cursor: pointer;

    text-decoration: none;
    background-color: transparent;
    color: var(--black);


    transition:
        background-color 0.15s ease-out,
        color 0.15s ease-out,
        border-color 0.15s ease-out,
        box-shadow 0.15s ease-out,
        transform 0.08s ease-out;

    /* Чтобы иконка не прыгала */
    white-space: nowrap;
}

.btn:focus-visible {
    outline: 1px solid var(--blue-400);
    outline-offset: 1px;
}

.btn:active {
    transform: translateY(0px) scale(0.96);
}


.btn--primary {
    background-color: var(--blue-500);
    color: #FFFFFF;
}

.btn--primary:hover {
    background-color: var(--blue-400);
}

.btn--secondary {
    background-color: var(--white-100);
    color: #252525;
}

.btn--secondary:hover {
    background-color: var(--white-200);
}

.btn--invis {
    background-color: transparent;
    color: var(--black);
    padding-block: var(--space-1);
    padding-inline: var(--space-2);
}

.btn--invis:hover {
    border: var(--white-200) 1px solid;
    background-color: var(--white-100);
}

.btn--text {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
}



.btn--text:hover {
    color: var(--white-400);

}

.btn--disabled {
    background-color: var(--white-200);
    color: var(--white-400);
    cursor: not-allowed;
    pointer-events: none;
}

.btn--icon {
    padding: var(--space-2);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--white-100);

    width: auto;
    height: auto;
}

.text-link:hover {
    color: var(--orange-500);
}

.btn--icon img {
    width: 100%;
    height: 100%;
    display: block;
    flex-shrink: 0;
}

.btn--icon:hover {
    background-color: var(--white-200);
}

/* Бейджи */

.badge {
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);

    padding-block: var(--space-1);
    padding-inline: var(--space-3);

    border-radius: 80px;
    border: 1px solid transparent;

    font-family: var(--font-family-regular);
    font-size: var(--fs-5);
    line-height: 1;

    text-decoration: none;
    background-color: var(--white-100);
    color: var(--black);
    white-space: nowrap;
}



.badge img {
    height: 20px;
    width: fit-content;
}

.badge--primary {
    background-color: var(--blue-100);
    border: 1px solid var(--blue-500);
    color: var(--blue-500);
    font-weight: 400;
}

.badge--secondary {
    background-color: var(--orange-100);
    border: 1px solid var(--orange-500);
    color: var(--orange-500);
    font-weight: 500;
}

.badge--invis {
    background-color: transparent;
    color: var(--white-500);
    border: 1px solid var(--white-400);
    font-weight: 500;
}

/* Инпуты */


.input {
    width: 100%;
    padding-block: var(--space-2);
    padding-inline: var(--space-3);
    box-sizing: border-box;

    border-radius: var(--space-2);
    border: 1px solid var(--white-300);
    background-color: var(--white-50);
    color: var(--black);

    font-family: var(--font-family-regular);
    font-size: var(--fs-4);
    line-height: 1.4;

    outline: none;
    transition:
        border-color 0.15s ease-out,
        box-shadow 0.15s ease-out,
        background-color 0.15s ease-out;
}

.input::placeholder {
    color: var(--white-400);
}

/* Hover / focus */

.input:hover {
    border-color: var(--white-400);
}

.input:focus {
    border-color: var(--blue-400);
    box-shadow: 0 0 0 1px var(--blue-400);
}

/* Ошибка — это состояние, а не новый тип инпута */

.input--error {
    border-color: var(--orange-500);
    background-color: var(--orange-50);
}