/**
 * @package         Feedback
 * @version         1.1.0
 * @author          Sergey Osipov <info@devstratum.ru>
 * @website         https://devstratum.ru
 * @copyright       Copyright (c) 2023 Sergey Osipov. All Rights Reserved
 * @license         GNU General Public License v2.0
 * @report          https://github.com/devstratum/feedback/issues
 */

/*-------------------------------------*/
/* Feedback                            */
/*-------------------------------------*/

.mod-feedback {
    display: block;
    position: relative;
    box-sizing: border-box;
    margin: 0;
    line-height: 1.2;
}

.mod-feedback__form {
    display: block;
    position: relative;
    box-sizing: border-box;
    background: var(--mod-feedback-form-back);
}

.mod-feedback__form p {
    padding: 6px 0;
    margin: 0;
}

.mod-feedback__title {
    display: block;
    position: relative;
    padding: 18px 24px;
    font-size: 140%;
    color: var(--mod-feedback-title-color);
    background: var(--mod-feedback-title-back);
}

.mod-feedback__header {
    display: block;
    position: relative;
    padding: 16px 24px;
    color: var(--mod-feedback-header-color);
    background: var(--mod-feedback-header-back);
}

.mod-feedback__fields {
    display: block;
    position: relative;
    padding: 24px;
}

.mod-feedback__label {
    display: block;
    position: relative;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--mod-feedback-label-color);
}

.mod-feedback__field {
    display: block;
    position: relative;
    margin-top: 16px;
}

.mod-feedback__field.hidden {
    display: none;
}

.mod-feedback__field.required .mod-feedback__input::after {
    display: block;
    position: absolute;
    content: '';
    width: 8px;
    height: 8px;
    top: 0;
    left: 0;
    line-height: 0;
    background: var(--mod-feedback-field-border-error);
    z-index: 9;
}

.mod-feedback__field:first-child {
    margin: 0;
}

.mod-feedback__input {
    display: block;
    position: relative;
}

.mod-feedback__input input,
.mod-feedback__input textarea {
    display: block;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 56px;
    padding: 8px 16px;
    margin: 0;
    border: 1px solid transparent;
    border-radius: 0;
    color: var(--mod-feedback-field-color);
    background: var(--mod-feedback-field-back);
    transition: 0.2s;
    outline: 0;
    outline-offset: 0;
    box-shadow: none;
}

.mod-feedback__input input:focus,
.mod-feedback__input textarea:focus {
    border-color: var(--mod-feedback-field-border-focus);
    box-shadow: 0 2px 8px var(--mod-feedback-shadow-color);
}

.mod-feedback__input textarea {
    height: 128px;
    resize: none;
}

.mod-feedback__input.error input,
.mod-feedback__input.error textarea {
    border-color: var(--mod-feedback-field-border-error);
}

.mod-feedback__error {
    display: block;
    position: relative;
    font-size: 90%;
    color: var(--mod-feedback-alert-back-warning);
}

.mod-feedback__footer {
    display: block;
    position: relative;
    padding: 0 24px 16px;
    color: var(--mod-feedback-footer-color);
}

.mod-feedback__submit {
    display: block;
    position: relative;
    padding: 0 24px 24px;
}

.mod-feedback__submit .button-submit {
    display: flex;
    position: relative;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    max-width: 256px;
    width: 100%;
    height: 56px;
    padding: 8px 16px;
    margin: 0;
    text-align: center;
    text-transform: uppercase;
    border: none;
    color: var(--mod-feedback-submit-color);
    background: var(--mod-feedback-submit-back);
    box-shadow: 0 2px 8px var(--mod-feedback-shadow-color);
    cursor: pointer;
    user-select: none;
    transition: 0.2s;
}

.mod-feedback__submit .button-submit:hover {
    background: var(--mod-feedback-submit-back-hover);
}

.mod-feedback__submit .button-submit.disabled {
    color: var(--mod-feedback-submit-color-disabled);
    background: var(--mod-feedback-submit-back-disabled);
    cursor: default;
}

.mod-feedback__submit .button-submit.freeze {
    color: var(--mod-feedback-submit-color-freeze);
    background: var(--mod-feedback-submit-back-freeze);
    cursor: default;
}

.mod-feedback__privacy {
    display: flex;
    position: relative;
    justify-content: flex-start;
    align-items: center;
    padding: 0 24px 24px;
}

.mod-feedback__privacy .privacy-checkbox {
    display: block;
    position: relative;
    box-sizing: border-box;
    width: 24px;
    min-width: 24px;
    height: 24px;
    line-height: 0;
    border: 1px solid var(--mod-feedback-checkbox-color);
}

.mod-feedback__privacy .privacy-checkbox.checked::before {
    display: block;
    position: absolute;
    box-sizing: border-box;
    content: '';
    width: 12px;
    height: 8px;
    top: 50%;
    margin-top: -6px;
    left: 50%;
    margin-left: -6px;
    border-left: 2px solid var(--mod-feedback-checkbox-color);
    border-bottom: 2px solid var(--mod-feedback-checkbox-color);
    transform: rotate(-45deg);
}

.mod-feedback__privacy .privacy-link {
    display: inline-block;
    position: relative;
    font-size: 90%;
    color: var(--mod-feedback-link-color);
    text-decoration: underline;
    margin-left: 16px;
    transition: 0.2s;
}

.mod-feedback__privacy .privacy-link:hover {
    color: var(--mod-feedback-link-color-hover);
    text-decoration: none;
}

.mod-feedback__privacy .privacy-text {
    color: var(--mod-feedback-field-color)!important;
    text-decoration: none;
}

.mod-feedback__alert {
    display: block;
    position: relative;
    padding: 0 24px;
}

.mod-feedback__alert .mod-alert {
    display: flex;
    position: relative;
    justify-content: flex-start;
    align-items: center;
    padding: 8px;
    margin: 0 0 24px;
    font-size: 90%;
    color: var(--mod-feedback-alert-color);
    background: var(--mod-feedback-alert-back);
}

.mod-feedback__alert .mod-alert-success {
    background-color: var(--mod-feedback-alert-back-success);
}

.mod-feedback__alert .mod-alert-warning {
    background-color: var(--mod-feedback-alert-back-warning);
}

.mod-feedback__alert .mod-alert-danger {
    background-color: var(--mod-feedback-alert-back-danger);
}

.mod-feedback__alert .mod-alert::before {
    display: block;
    position: relative;
    content: '';
    margin-right: 8px;
    width: 18px;
    min-width: 18px;
    height: 18px;
    min-height: 18px;
    background: no-repeat center;
    background-size: contain;
}

.mod-feedback__alert .mod-alert-success::before {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgRnJlZSA2LjAuMCBieSBAZm9udGF3ZXNvbWUgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbSBMaWNlbnNlIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20vbGljZW5zZS9mcmVlIChJY29uczogQ0MgQlkgNC4wLCBGb250czogU0lMIE9GTCAxLjEsIENvZGU6IE1JVCBMaWNlbnNlKSBDb3B5cmlnaHQgMjAyMiBGb250aWNvbnMsIEluYy4gLS0+PHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTAgMjU2QzAgMTE0LjYgMTE0LjYgMCAyNTYgMEMzOTcuNCAwIDUxMiAxMTQuNiA1MTIgMjU2QzUxMiAzOTcuNCAzOTcuNCA1MTIgMjU2IDUxMkMxMTQuNiA1MTIgMCAzOTcuNCAwIDI1NnpNMzcxLjggMjExLjhDMzgyLjcgMjAwLjkgMzgyLjcgMTgzLjEgMzcxLjggMTcyLjJDMzYwLjkgMTYxLjMgMzQzLjEgMTYxLjMgMzMyLjIgMTcyLjJMMjI0IDI4MC40TDE3OS44IDIzNi4yQzE2OC45IDIyNS4zIDE1MS4xIDIyNS4zIDE0MC4yIDIzNi4yQzEyOS4zIDI0Ny4xIDEyOS4zIDI2NC45IDE0MC4yIDI3NS44TDIwNC4yIDMzOS44QzIxNS4xIDM1MC43IDIzMi45IDM1MC43IDI0My44IDMzOS44TDM3MS44IDIxMS44eiIvPjwvc3ZnPg==);
}

.mod-feedback__alert .mod-alert-warning::before {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgRnJlZSA2LjAuMCBieSBAZm9udGF3ZXNvbWUgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbSBMaWNlbnNlIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20vbGljZW5zZS9mcmVlIChJY29uczogQ0MgQlkgNC4wLCBGb250czogU0lMIE9GTCAxLjEsIENvZGU6IE1JVCBMaWNlbnNlKSBDb3B5cmlnaHQgMjAyMiBGb250aWNvbnMsIEluYy4gLS0+PHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTUwNi4zIDQxN2wtMjEzLjMtMzY0Yy0xNi4zMy0yOC01Ny41NC0yOC03My45OCAwbC0yMTMuMiAzNjRDLTEwLjU5IDQ0NC45IDkuODQ5IDQ4MCA0Mi43NCA0ODBoNDI2LjZDNTAyLjEgNDgwIDUyMi42IDQ0NSA1MDYuMyA0MTd6TTIzMiAxNjhjMC0xMy4yNSAxMC43NS0yNCAyNC0yNFMyODAgMTU0LjggMjgwIDE2OHYxMjhjMCAxMy4yNS0xMC43NSAyNC0yMy4xIDI0UzIzMiAzMDkuMyAyMzIgMjk2VjE2OHpNMjU2IDQxNmMtMTcuMzYgMC0zMS40NC0xNC4wOC0zMS40NC0zMS40NGMwLTE3LjM2IDE0LjA3LTMxLjQ0IDMxLjQ0LTMxLjQ0czMxLjQ0IDE0LjA4IDMxLjQ0IDMxLjQ0QzI4Ny40IDQwMS45IDI3My40IDQxNiAyNTYgNDE2eiIvPjwvc3ZnPg==);
}

.mod-feedback__alert .mod-alert-danger::before {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgRnJlZSA2LjAuMCBieSBAZm9udGF3ZXNvbWUgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbSBMaWNlbnNlIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20vbGljZW5zZS9mcmVlIChJY29uczogQ0MgQlkgNC4wLCBGb250czogU0lMIE9GTCAxLjEsIENvZGU6IE1JVCBMaWNlbnNlKSBDb3B5cmlnaHQgMjAyMiBGb250aWNvbnMsIEluYy4gLS0+PHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTI1NiAwQzExNC42IDAgMCAxMTQuNiAwIDI1NnMxMTQuNiAyNTYgMjU2IDI1NnMyNTYtMTE0LjYgMjU2LTI1NlMzOTcuNCAwIDI1NiAwek0yMzIgMTUyQzIzMiAxMzguOCAyNDIuOCAxMjggMjU2IDEyOHMyNCAxMC43NSAyNCAyNHYxMjhjMCAxMy4yNS0xMC43NSAyNC0yNCAyNFMyMzIgMjkzLjMgMjMyIDI4MFYxNTJ6TTI1NiA0MDBjLTE3LjM2IDAtMzEuNDQtMTQuMDgtMzEuNDQtMzEuNDRjMC0xNy4zNiAxNC4wNy0zMS40NCAzMS40NC0zMS40NHMzMS40NCAxNC4wOCAzMS40NCAzMS40NEMyODcuNCAzODUuOSAyNzMuNCA0MDAgMjU2IDQwMHoiLz48L3N2Zz4=);
}

.mod-feedback__progress {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: no-repeat center;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjAiIHdpZHRoPSIxNjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMTI4IDE2IiB4bWw6c3BhY2U9InByZXNlcnZlIj48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNNi40LDQuOEEzLjIsMy4yLDAsMSwxLDMuMiw4LDMuMiwzLjIsMCwwLDEsNi40LDQuOFptMTIuOCwwQTMuMiwzLjIsMCwxLDEsMTYsOCwzLjIsMy4yLDAsMCwxLDE5LjIsNC44Wk0zMiw0LjhBMy4yLDMuMiwwLDEsMSwyOC44LDgsMy4yLDMuMiwwLDAsMSwzMiw0LjhabTEyLjgsMEEzLjIsMy4yLDAsMSwxLDQxLjYsOCwzLjIsMy4yLDAsMCwxLDQ0LjgsNC44Wm0xMi44LDBBMy4yLDMuMiwwLDEsMSw1NC40LDgsMy4yLDMuMiwwLDAsMSw1Ny42LDQuOFptMTIuOCwwQTMuMiwzLjIsMCwxLDEsNjcuMiw4LDMuMiwzLjIsMCwwLDEsNzAuNCw0LjhabTEyLjgsMEEzLjIsMy4yLDAsMSwxLDgwLDgsMy4yLDMuMiwwLDAsMSw4My4yLDQuOFpNOTYsNC44QTMuMiwzLjIsMCwxLDEsOTIuOCw4LDMuMiwzLjIsMCwwLDEsOTYsNC44Wm0xMi44LDBBMy4yLDMuMiwwLDEsMSwxMDUuNiw4LDMuMiwzLjIsMCwwLDEsMTA4LjgsNC44Wm0xMi44LDBBMy4yLDMuMiwwLDEsMSwxMTguNCw4LDMuMiwzLjIsMCwwLDEsMTIxLjYsNC44WiIvPjxnPjxwYXRoIGZpbGw9IiNmZmZmZmYiIGQ9Ik0tNDIuNywzLjg0QTQuMTYsNC4xNiwwLDAsMS0zOC41NCw4YTQuMTYsNC4xNiwwLDAsMS00LjE2LDQuMTZBNC4xNiw0LjE2LDAsMCwxLTQ2Ljg2LDgsNC4xNiw0LjE2LDAsMCwxLTQyLjcsMy44NFptMTIuOC0uNjRBNC44LDQuOCwwLDAsMS0yNS4xLDhhNC44LDQuOCwwLDAsMS00LjgsNC44QTQuOCw0LjgsMCwwLDEtMzQuNyw4LDQuOCw0LjgsMCwwLDEtMjkuOSwzLjJabTEyLjgtLjY0QTUuNDQsNS40NCwwLDAsMS0xMS42Niw4YTUuNDQsNS40NCwwLDAsMS01LjQ0LDUuNDRBNS40NCw1LjQ0LDAsMCwxLTIyLjU0LDgsNS40NCw1LjQ0LDAsMCwxLTE3LjEsMi41NloiLz48YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InRyYW5zbGF0ZSIgdmFsdWVzPSIyMyAwOzM2IDA7NDkgMDs2MiAwOzc0LjUgMDs4Ny41IDA7MTAwIDA7MTEzIDA7MTI1LjUgMDsxMzguNSAwOzE1MS41IDA7MTY0LjUgMDsxNzggMCIgY2FsY01vZGU9ImRpc2NyZXRlIiBkdXI9IjkxMG1zIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPjwvZz48L3N2Zz4K);
    z-index: 9;
}

.mod-feedback__progress.active {
    display: block;
}

@media (max-width: 559px) {
    .mod-feedback__title {
        font-size: 120%;
        padding: 16px;
    }

    .mod-feedback__header {
        padding: 16px;
    }

    .mod-feedback__fields {
        padding: 16px;
    }

    .mod-feedback__footer {
        padding: 0 16px 16px;
    }

    .mod-feedback__submit {
        padding: 0 16px 16px;
    }

    .mod-feedback__submit .button-submit {
        max-width: 100%;
    }

    .mod-feedback__privacy {
        padding: 0 16px 16px;
    }

    .mod-feedback__alert {
        padding: 0 16px;
    }
}

/*-------------------------------------*/
/* Feedback Color Scheme               */
/*-------------------------------------*/

.mod-feedback-light {
    --mod-feedback-form-back: #eceff1;

    --mod-feedback-title-color: #ffffff;
    --mod-feedback-title-back: #78909c;

    --mod-feedback-header-color: #37474f;
    --mod-feedback-header-back: #cfd8dc;

    --mod-feedback-footer-color: #546e7a;

    --mod-feedback-label-color: #455a64;

    --mod-feedback-field-color: #37474f;
    --mod-feedback-field-back: #fafafa;
    --mod-feedback-field-border-focus: #b0bec5;
    --mod-feedback-field-border-error: #ef6c00;

    --mod-feedback-placeholder-color: #78909c;

    --mod-feedback-submit-color: #ffffff;
    --mod-feedback-submit-back: #4caf50;
    --mod-feedback-submit-back-hover: #388e3c;
    --mod-feedback-submit-color-disabled: #eceff1;
    --mod-feedback-submit-back-disabled: #b0bec5;
    --mod-feedback-submit-color-freeze: #b0bec5;
    --mod-feedback-submit-back-freeze: #b0bec5;

    --mod-feedback-checkbox-color: #546e7a;

    --mod-feedback-link-color: #546e7a;
    --mod-feedback-link-color-hover: #388e3c;

    --mod-feedback-alert-color: #ffffff;
    --mod-feedback-alert-back: #37474f;

    --mod-feedback-alert-back-success: #388e3c;
    --mod-feedback-alert-back-warning: #ef6c00;
    --mod-feedback-alert-back-danger: #b71c1c;

    --mod-feedback-shadow-color: #b0bec5;
}

.mod-feedback-dark {
    --mod-feedback-form-back: #455a64;

    --mod-feedback-title-color: #ffffff;
    --mod-feedback-title-back: #263238;

    --mod-feedback-header-color: #cfd8dc;
    --mod-feedback-header-back: #37474f;

    --mod-feedback-footer-color: #b0bec5;

    --mod-feedback-label-color: #eceff1;

    --mod-feedback-field-color: #eceff1;
    --mod-feedback-field-back: #37474f;
    --mod-feedback-field-border-focus: #78909c;
    --mod-feedback-field-border-error: #ef6c00;

    --mod-feedback-placeholder-color: #b0bec5;

    --mod-feedback-submit-color: #ffffff;
    --mod-feedback-submit-back: #4caf50;
    --mod-feedback-submit-back-hover: #388e3c;
    --mod-feedback-submit-color-disabled: #78909c;
    --mod-feedback-submit-back-disabled: #546e7a;
    --mod-feedback-submit-color-freeze: #546e7a;
    --mod-feedback-submit-back-freeze: #546e7a;

    --mod-feedback-checkbox-color: #b0bec5;

    --mod-feedback-link-color: #b0bec5;
    --mod-feedback-link-color-hover: #eceff1;

    --mod-feedback-alert-color: #ffffff;
    --mod-feedback-alert-back: #37474f;

    --mod-feedback-alert-back-success: #388e3c;
    --mod-feedback-alert-back-warning: #ef6c00;
    --mod-feedback-alert-back-danger: #b71c1c;

    --mod-feedback-shadow-color: #263238;
}

.mod-feedback__field input::-webkit-input-placeholder {
    color: var(--mod-feedback-placeholder-color);
}

.mod-feedback__field input:-ms-input-placeholder {
    color: var(--mod-feedback-placeholder-color);
}

.mod-feedback__field input::-moz-placeholder {
    color: var(--mod-feedback-placeholder-color);
    opacity: 1;
}

.mod-feedback__field textarea::-webkit-input-placeholder {
    color: var(--mod-feedback-placeholder-color);
}

.mod-feedback__field textarea:-ms-input-placeholder {
    color: var(--mod-feedback-placeholder-color);
}

.mod-feedback__field textarea::-moz-placeholder {
    color: var(--mod-feedback-placeholder-color);
    opacity: 1;
}