/* Общие стили */
.uf-wrapper {
    margin: 10px auto;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
    max-width: 100%;
    width: 95%;
    position: relative;
}

input.uf-input,
textarea.uf-input {
    height: 40px;
    width: 100%;
    font: normal 14px Arial, sans-serif;
    padding: 8px 10px;
    font-size: 14px;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input.uf-input:focus,
textarea.uf-input:focus {
    border-color: #4b9fc5;
}

textarea.uf-input {
    height: auto;
    line-height: 20px;
}

.uf-btn {
    display: block;
    width: 100%;
    color: #fff;
    font: normal 14px Arial, sans-serif;
    text-align: center;
    background: #4b9fc5;
    border: none;
    padding: 10px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.uf-btn:hover {
    background: #3a7b99;
}

.uf-header {
    font: normal 18px Arial, sans-serif;
    background: #4b9fc5;
    color: #fff;
    padding: 10px;
    border-radius: 4px 4px 0 0;
    text-align: center;
}

.uf-content {
    padding: 15px;
    font-size: 14px;
}

/* Ошибки и уведомления */
.uf-alert {
    padding: 10px;
    font-size: 14px;
    border-radius: 4px;
    text-align: center;
}

.uf-alert-success {
    background: #45d2b1;
    color: #fff;
}

.uf-alert-error {
    background: #e95241;
    color: #fff;
}

.uf-alert-info {
    background: #ffecb3;
    color: #424242;
}

.uf-error-text {
    color: #e95241;
}

/* Поля формы */
.uf-field {
    margin-bottom: 15px;
}

.uf-label {
    font-size: 14px;
    display: block;
    margin-bottom: 5px;
}

.uf-inline-loading {
    height: 200px;
    margin: 20px auto;
    font-size: 10px;
    position: relative;
    border-top: 1.1em solid rgba(155, 207, 230, .3);
    border-right: 1.1em solid rgba(155, 207, 230, .3);
    border-bottom: 1.1em solid rgba(155, 207, 230, .3);
    border-left: 1.1em solid #4b9fc5;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: ufLoading 1.1s infinite linear;
}

@keyframes ufLoading {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Медиа-запросы для мобильных устройств */
@media screen and (max-width: 768px) {
    .uf-header {
        font-size: 16px;
        padding: 8px;
    }

    input.uf-input,
    textarea.uf-input {
        font-size: 13px;
        padding: 6px 8px;
    }

    .uf-btn {
        padding: 8px;
        font-size: 14px;
    }

    .uf-alert {
        font-size: 13px;
        padding: 8px;
    }
}

@media screen and (max-width: 480px) {
    .uf-header {
        font-size: 14px;
        padding: 6px;
    }

    input.uf-input,
    textarea.uf-input {
        font-size: 12px;
        padding: 5px 6px;
    }

    .uf-btn {
        padding: 6px;
        font-size: 13px;
    }

    .uf-alert {
        font-size: 12px;
        padding: 6px;
    }
}