/**
 * Layout
 */

/* Header */
header {
    padding: 18px 0;
    background: var(--primary);
}

.call-partial__mobile-header {
    display: none;
}

/**
 * Partials
 */

/* Badge */
.call-partial__badge {
    display: flex;
    flex-direction: row;
    align-items: center;

    gap: 0 4px;
    padding: 2px 10px;

    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.25px;
    text-align: center;
    color: var(--light);

    border-radius: 100px;
    background: var(--primary);
}

/* Modals */
.call-modal .modal__overlay {
    z-index: 99999;
}

.call-modal .modal__container {
    width: 100%;
    max-width: 418px;

    padding: 24px;
    border-radius: 16px;
}

.call-modal .modal__header {
    padding: 0;
    margin: 0 0 20px;
    background: none;
}

.call-modal .modal__title {
    font-size: 24px;
    font-weight: 600;
    line-height: 33.6px;
    color: var(--dark);
}

.call-modal .modal__content {
    margin: 0 0 48px;
}

.call-modal .modal__content p {
    margin: 0;

    /*font-size: 20px;*/
    font-weight: 400;
    /*line-height: 28px;*/
    color: var(--dark);
}

.call-modal .modal__footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

/* Forms */
.wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 40px 0;
}

.wpcf7-form label {
    position: relative;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 32px;

    font-size: 16px;
    font-weight: 600;
    line-height: 22.4px;
    text-align: left;
    color: var(--dark);
}

.wpcf7-form label a {
    font-weight: 400;
    color: var(--link);
    text-decoration: none;
}

.wpcf7-form label .wpcf7-form-control-wrap,
.wpcf7-form label .wpcf7-form-control-wrap input,
.wpcf7-form label .wpcf7-form-control-wrap textarea {
    width: 100%;
}

.wpcf7-form label .wpcf7-form-control-wrap input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]),
.wpcf7-form label .wpcf7-form-control-wrap textarea,
.wpcf7-form label .wpcf7-form-control-wrap select {
    padding: 16px;

    border-radius: 4px;
    border: 1px solid var(--gray-1);

    font-family: var(--font), sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.5px;
    text-align: left;
    color: var(--dark);
}

.wpcf7-form label .wpcf7-form-control-wrap select {
    appearance: none;

    background: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_76_17534" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24" fill="%23D9D9D9"/></mask><g mask="url(%23mask0_76_17534)"><path d="M12 15.3751L6 9.3751L7.4 7.9751L12 12.5751L16.6 7.9751L18 9.3751L12 15.3751Z" fill="%23666666"/></g></svg>') center right 16px no-repeat,
                var(--white);
    background-size: 24px;
}

.wpcf7-form label .wpcf7-form-control-wrap input.wpcf7-not-valid:not([type="radio"]):not([type="checkbox"]):not([type="submit"]),
.wpcf7-form label .wpcf7-form-control-wrap select.wpcf7-not-valid {
    color: var(--red-1);
}

/*.wpcf7-form label:not(.wpcf7-not-valid) .wpcf7-not-valid-tip {*/
/*    display: none;*/
/*}*/

.wpcf7-form label .password-reveal,
.wpcf7-form label .clear-input {
    display: none;

    width: 24px;
    height: 24px;

    position: absolute;
    right: 16px;

    padding: 0;
    border: none;

    appearance: none;
    -webkit-appearance: none;

    z-index: 3;
    cursor: pointer;
}

.wpcf7-form label .password-reveal {
    top: calc(30px + 16px);
}

.wpcf7-form label .clear-input {
    bottom: 16px;
}

.wpcf7-form label .password-reveal.password-reveal--visible,
.wpcf7-form label .clear-input.clear-input--visible {
    display: block;
}

.wpcf7-form label .clear-input {
    background: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_19_26675" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24" fill="%23D9D9D9"/></mask><g mask="url(%23mask0_19_26675)"><path d="M6.4 19L5 17.6L10.6 12L5 6.4L6.4 5L12 10.6L17.6 5L19 6.4L13.4 12L19 17.6L17.6 19L12 13.4L6.4 19Z" fill="%23666666"/></g></svg>') center center no-repeat;
    background-size: contain;
}

.wpcf7-form .small {
    margin: -32px 0 0;

    font-size: 12px;
    line-height: 16px;
    text-align: left;
    color: var(--gray-2);
}

.wpcf7-form .small ul {
    display: block;
    margin: 3px 0 0;
    padding: 0 0 0 18px;
}

.wpcf7-form .wpcf7-not-valid-tip {
    position: absolute;
    top: calc(100% + 4px);
    padding: 0;

    font-size: 12px;
    line-height: 16px;
    color: var(--red-1);
}

.wpcf7-form .wpcf7-spinner {
    display: none !important;
}

.wpcf7-form:not(.aborted) .wpcf7-response-output {
    display: none !important;
}

.wpcf7-form.aborted .wpcf7-response-output {
    display: block;
    margin: 8px 0 0;
    padding: 0;

    font-size: 12px;
    line-height: 1.25;
    color: var(--red-1);

    border: none;
}

.wpcf7-form.submitting .button[type="submit"] {
    color: transparent !important;

    background-image: url('data:image/svg+xml,<svg width="120" height="30" viewBox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="%23fff"><circle cx="15" cy="15" r="15"><animate attributeName="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcMode="linear" repeatCount="indefinite" /><animate attributeName="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcMode="linear" repeatCount="indefinite" /></circle><circle cx="60" cy="15" r="9" fill-opacity="0.3"><animate attributeName="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcMode="linear" repeatCount="indefinite" /><animate attributeName="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcMode="linear" repeatCount="indefinite" /></circle><circle cx="105" cy="15" r="15"><animate attributeName="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcMode="linear" repeatCount="indefinite" /><animate attributeName="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcMode="linear" repeatCount="indefinite" /></circle></svg>');
    background-position: center center;
    background-repeat: no-repeat;

    opacity: 0.8;
    pointer-events: none !important;
}

.wpcf7-form.submitting .button.button--sm {
    background-size: 38px;
}

.wpcf7-form.submitting .button.button--md {
    background-size: 42px;
}

.wpcf7-form.submitting .button.button--lg {
    background-size: 48px;
}

/* Plan block */
.call-partial__plan-box {
    display: flex;
    flex-direction: column;

    border-radius: 16px;
    border: 1px solid var(--primary);

    background: var(--white);
}

.call-partial__plan-box__head {
    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 24px 20px 20px;
    border-radius: 16px 16px 0 0;
}

.call-partial__plan-box__head strong {
    font-size: 22px;
    font-weight: 700;
    line-height: 30.8px;
    text-align: center;
    color: var(--primary);
}

.call-partial__plan-box__head bdi {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;

    font-size: 40px;
    font-weight: 700;
    line-height: 45px;
    color: var(--primary);
}

.call-partial__plan-box__head bdi small {
    position: relative;
    bottom: 4px;

    font-size: 12px;
    font-weight: 700;
    line-height: 16.8px;
}

.call-partial__plan-box__head span {
    font-size: 14px;
    font-weight: 400;
    line-height: 19.6px;
    text-align: center;
    color: var(--primary);
}

.call-partial__plan-box__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px;

    background: var(--primary-s1);
}

.call-partial__plan-box .call-partial__plan-box__body p {
    margin: 0;

    font-size: 12px;
    font-weight: 400;
    line-height: 16.8px;
    text-align: center;
}

.call-partial__plan-box .call-partial__plan-box__body p:last-of-type {
    margin: 0 0 10px;
}

.call-partial__plan-box__body p strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    line-height: 19.6px;
}

.call-partial__plan-box__body .button {
    width: 100%;
    max-width: 170px;
    margin: 0 auto;
}

.call-partial__plan-box__footer {
    padding: 24px 16px;
    border-radius: 0 0 16px 16px;
}

.call-partial__plan-box__footer ul {
    display: flex;
    flex-direction: column;
    gap: 12px 0;

    padding: 0;
    margin: 0;

    list-style-type: none;
}

.call-partial__plan-box__footer li {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0 10px;

    font-size: 12px;
    font-weight: 400;
    line-height: 16.8px;
    color: var(--gray-2);
}

.call-partial__plan-box__footer li svg {
    flex-shrink: 0;
}

.call-partial__context-menu.is-hidden .call-partial__context-menu_items,
.call-partial__context-menu.is-hidden + .call-partial__context-menu_overlay {
    display: none;
}

.call-partial__context-menu_trigger {
    display: block;
    padding: 0;

    border: none;
    border-radius: 0;
    background: none;

    appearance: none;
    cursor: pointer;
}

.call-partial__context-menu_items {
    display: flex;
    flex-direction: column;
    gap: 8px 0;

    padding: 10px 8px;
    margin: 0;

    border-radius: 12px;
    background: var(--purple-1);
    box-shadow: var(--shadow-context-menu);

    list-style-type: none;
}

.call-partial__context-menu_item > span,
.call-partial__context-menu_item > a {
    min-width: 180px;

    display: flex;
    flex-direction: row;
    align-items: center;

    gap: 0 6px;
    padding: 0;

    appearance: none;
    border: none;

    cursor: pointer;
}

.call-partial__context-menu_item a {
    text-decoration: none;
}

.call-partial__context-menu_item span span,
.call-partial__context-menu_item a span {
    font-family: var(--font), sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.25px;
    color: var(--dark);
}

.call-partial__context-menu_overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    background: var(--context-overlay-bg);
}

@media only screen and (max-width: 1024px) {

    .wpcf7-form {
        gap: 36px 0;
    }

    .wpcf7-form label {
        font-size: 14px;
        font-weight: 600;
        line-height: 19.6px;
    }

    .wpcf7-form label .wpcf7-form-control-wrap input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]),
    .wpcf7-form label .wpcf7-form-control-wrap textarea, .wpcf7-form label .wpcf7-form-control-wrap select {
        padding: 10px 8px;

        font-size: 14px;
        font-weight: 400;
        line-height: 18px;
        letter-spacing: 0.4px;
    }

    .wpcf7-form label .password-reveal,
    .wpcf7-form label .clear-input {
        width: 20px;
        height: 20px;

        top: calc(28px + 10px);
        right: 10px;
    }

    .wpcf7-form.submitting .button.button--lg {
        background-size: 40px;
    }

    .call-modal .modal__container {
        width: calc(100% - 32px);
        max-width: 328px;

        margin: 0 auto;
        padding: 24px 16px;
    }

    .call-modal .modal__header {
        margin: 0 0 16px;
    }

    .call-modal .modal__title {
        font-size: 20px;
        font-weight: 600;
        line-height: 28px;
    }

    .call-modal .modal__content {
        margin: 0 0 28px;
    }

    .call-modal .modal__content p {
        /*font-size: 16px;*/
        font-weight: 400;
        /*line-height: 22px;*/
    }

    .call-modal .modal__footer {
        gap: 0 30px;
        justify-content: flex-end;
    }

    .call-partial__header {
        display: none;
    }

    .call-partial__mobile-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0;

        position: fixed;
        top: 0;
        left: 0;
        right: 0;

        z-index: 999;
    }

    .admin-bar .call-partial__mobile-header {
        top: 32px;
    }

    .call-partial__mobile-header a img {
        width: auto;
        max-height: 30px;
    }
}

@media only screen and (max-width: 782px) {

    .admin-bar .call-partial__mobile-header {
        top: 46px;
    }
}