/* ==========================================================================
   Custom styles — yootheme_itspace
   ========================================================================== */


/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

.uk-nav-default > li > a {
    color: white !important;
}

.uk-nav-default > li > a:hover {
    color: var(--primary, #fed65a) !important;
}

.uk-nav-default > li > a:active {
    color: var(--primary, #f8c93a) !important;
}

.uk-navbar-nav {
    align-items: center;
}

.uk-navbar-nav > li > a {
    display: block;
    overflow: hidden;
    height: unset;
}


/* --------------------------------------------------------------------------
   Navbar link hover animation (text swap)
   -------------------------------------------------------------------------- */

/* Хедер прозрачный */
.tm-header-overlay{
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1;
}

.link__default {
    display: block;
    transition: 0.3s;
}

.link__hover-text {
    transform: translateY(-46px);
    position: absolute;
}

.link__default-text {
    transform: translateY(10px);
}

.uk-navbar-nav > li > a:hover .link__hover-text {
    transform: translateY(-14px);
}

.uk-navbar-nav > li > a:hover .link__default-text {
    transform: translateY(46px);
}

/* --------------------------------------------------------------------------
   Button
   -------------------------------------------------------------------------- */

.uk-button-default .uk-icon path{
    fill: #FED65A !important;
}

.uk-button-default{
    padding-right: 32px;
    padding-left: 3px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
}

.uk-button-default [uk-icon*="arrow-up-right"] svg path {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.4s ease;
}
.uk-button-default:hover [uk-icon*="arrow-up-right"] svg path,
.uk-button-default:focus-visible [uk-icon*="arrow-up-right"] svg path {
    transform: rotate(44deg);
}

.rf-button-send:disabled .uk-icon,
.rf-button-send[disabled] .uk-icon,
.rf-button-send:disabled [uk-icon],
.rf-button-send[disabled] [uk-icon] {
    display: none !important;
}

.uk-button-primary {
    padding: 0 30px;
}


/* --------------------------------------------------------------------------
   Animations
   -------------------------------------------------------------------------- */

@keyframes circle-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.rotate-img .el-image {
    animation: circle-spin 40s linear infinite !important;
    transform-origin: center center;
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    14%      { transform: scale(1.18); }
    28%      { transform: scale(1); }
    42%      { transform: scale(1.12); }
    70%      { transform: scale(1); }
}

img.el-image[src*="fi-sr-heart.svg"] {
    animation: heartbeat 1.2s ease-in-out infinite;
    transform-origin: center center;
}

/* --------------------------------------------------------------------------
   Modal
   -------------------------------------------------------------------------- */

#reviews .uk-modal-dialog {
    position: absolute;
    top: 80px !important;
    left: 50%;
    transform: translatex(-50%) !important;
    height: unset;
    justify-content: start;
    background: #F6C428;
}

/* --------------------------------------------------------------------------
   Modal — base dialog
   -------------------------------------------------------------------------- */

.uk-modal-dialog .uk-modal-footer {
    display: none;
}

.uk-modal-dialog .uk-modal-body .uk-modal-footer {
    border: unset;
    display: flex;
    justify-content: center;
    margin-top: -10px;
    background: transparent;
}

#modal .uk-modal-dialog,
.uk-modal-dialog {
    border-radius: 20px;
    border: 1px solid #424345;
    background: #242527;
    width: 100%;
    padding: 40px;
    max-width: 650px !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    height: 808px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#modal .uk-modal-dialog {
    position: relative;
    top: unset;
    left: unset;
    transform: unset !important;
    height: unset;
    display: unset;
}

#modal .uk-h2,
.uk-modal-dialog .uk-h2 {
    font-size: 40px;
    color: white;
    font-weight: 700;
    margin-bottom: 80px !important;
}

.uk-modal [role="alertdialog"] .uk-h2 {
    margin-bottom: 30px !important;
}

.close {
    position: absolute;
    top: 36px;
    right: 36px;
    width: 30px !important;
}

#modal .rf-button-send {
    margin: 0 auto;
    display: flex;
}

.agree-block,
.uk-modal-body {
    color: white;
}


/* --------------------------------------------------------------------------
   Modal — form fields
   -------------------------------------------------------------------------- */

.rf-form input,
.rf-form textarea,
.flex-check,
.other-input input {
    font-size: 17px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0em;
    text-align: left;
    color: white;
    border-bottom: 1px solid rgba(66, 67, 69, 1);
    padding: 0px;
    padding-bottom: 4px;
    margin-bottom: 24px;
    transition: 0.3s;
    background: transparent;
}

.rf-form input:focus,
.rf-form textarea:focus {
    background: transparent;
    color: white;
}


/* --------------------------------------------------------------------------
   Modal — agreement / consent block
   -------------------------------------------------------------------------- */

.agree-block {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    margin: -8px 0 40px;
}

.agree-block p {
    margin: 0;
}

.agree-block img {
    width: 25px;
    opacity: 0.2;
}

.agree-block a {
    color: #FED65A;
}

.check-active {
    opacity: 1 !important;
}


/* --------------------------------------------------------------------------
   Form — checkboxes & options
   -------------------------------------------------------------------------- */

.flex-check {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 15px;
}

.flex-option {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: flex-end;
    margin-left: 2px;
}

.flex-option input {
    width: 20px !important;
    height: 20px !important;
}

.flex-option * {
    margin: 0 !important;
}

.flex-option a {
    text-decoration: unset;
}

input[type="checkbox"] {
    border: 1px solid #ededed;
    background-color: transparent;
    border-color: #573254;
}

input[type="checkbox"]:hover,
input[type="checkbox"]:active {
    opacity: 0.7;
}

input[type="checkbox"]:focus {
    border-color: #FED65A !important;
}

.form-check-input[type="checkbox"]:checked,
.form-check-input[type="checkbox"]:indeterminate,
.form-check-input[type="radio"]:checked,
.uk-checkbox:checked,
.uk-checkbox:indeterminate,
.uk-radio:checked,
.rf-checkbox:checked {
    background-color: #FED65A !important;
    border-color: #FED65A !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpolygon%20fill%3D%22%230e0e0e%22%20points%3D%2213%203.5%206%2010%203%207.5%202%208%206%2012.5%2014%204%2013%203.5%22%20%2F%3E%3C%2Fsvg%3E") !important;
    background-repeat: no-repeat;
    background-position: center;
}

.agree-block .uk-checkbox,
.agree-block .rf-checkbox {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 0;
    border-color: #FED65A;
}


/* --------------------------------------------------------------------------
   Form — «other» input & optional values
   -------------------------------------------------------------------------- */

.other-input input {
    width: 100% !important;
    height: 40px !important;
    margin-bottom: -16px !important;
    z-index: 3;
    position: relative;
}

.other-input input:disabled {
    background: transparent;
    opacity: 0.5;
    height: 0px !important;
    padding: 0;
    border: none;
    margin-bottom: 0px !important;
}

.no-border {
    border-bottom: 1px solid transparent;
}

.optional-values {
    display: flex;
    flex-direction: column;
    padding-left: 20px;
    transition: 0.3s;
    width: 100%;
}

.optional-values .other-input input {
    margin-bottom: 5px !important;
}

.optional-chek {
    flex-direction: column;
    align-items: flex-start;
}

.optional-chek div:first-child {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 10px;
}

.view_optional {
    height: 0px;
    visibility: hidden;
    margin-top: -10px !important;
    opacity: 0;
}


/* --------------------------------------------------------------------------
   Form — radio buttons
   -------------------------------------------------------------------------- */

.rf-radio .uk-form-label,
.uk-margin-small-left {
    color: #ffffff9e;
    text-transform: unset;
    letter-spacing: 0px;
    text-align: left;
    margin-right: auto;
    display: block;
    margin: 10px 0;
    font-size: 16px;
    font-weight: 300;
}

.uk-radio {
    margin: 0 !important;
    padding: 0 !important;
    border-color: #FED65A !important;
}

.uk-radio:checked {
    background-color: #FED65A !important;
    background-image: unset !important;
}

.rf-radio-block {
    margin: -14px 0 10px;
    margin-top: 10px;
}

.rf-radio label {
    padding-left: 0;
    padding-right: 10px;
}

.rf-radio-block .uk-margin-small-left {
    margin-top: 0 !important;
    color: white;
}

/* --------------------------------------------------------------------------
   Other
   -------------------------------------------------------------------------- */

/* Дивайдер в гриде в hero */
.uk-grid-divider>:not(.uk-first-column)::before {
    top: 50%;
    transform: translatey(-50%);
    height: 40px;
}

/* --------------------------------------------------------------------------
   Responsive — ≤ 960px
   -------------------------------------------------------------------------- */

@media (max-width: 960px) {
    html {
        font-size: 15px;
        font-style: normal;
        font-weight: 400;
        line-height: 140%;
    }

    .uk-button {
        height: unset;
        /*line-height: 41px;*/
        font-size: 12px;
        letter-spacing: 0.24px;
        max-width: 225px;
        width: 100%;
    }

    .optional-values {
        gap: 10px;
    }

    #modal .uk-h2,
    .uk-modal-dialog .uk-h2 {
        font-size: 32.04px;
        padding: 0px 44px;
        margin-bottom: 50px !important;
        line-height: 130%;
        letter-spacing: 0.22px;
    }

    .close {
        top: 7px;
        right: 19px;
    }

    .agree-block img {
        min-width: 24px;
    }

    #modal .uk-modal-dialog,
    .uk-modal-dialog {
        padding: 40px 20px;
    }

    #modal .rf-form textarea,
    #modal .rf-form input,
    .flex-check {
        font-size: 15px !important;
        line-height: 140% !important;
    }

    #modal .rf-button-send,
    .uk-modal-dialog button {
        font-size: 12px;
        line-height: 140%;
        letter-spacing: 0.24px;
        max-width: 320px;
        width: 100%;
    }

    .uk-modal [role="alertdialog"] .uk-h2 {
        margin-bottom: 20px !important;
    }
}