.elementor-widget-nk-fee-calculator {
    .calc-wrapper {
        display: grid;
        gap: var(--nd-space-s, 3rem);

        @media only screen and (min-width: 768px) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    .calc-inputs {
        display: flex;
        flex-flow: column nowrap;
        gap: calc(0.5 * var(--nd-space-xs, 1rem));

        && input,
        select {
            padding: 0.938rem 1rem;
            font-size: var(--e-global-typography-text-font-size);
            font-weight: var(--e-global-typography-text-font-weight);
            line-height: var(--e-global-typography-text-line-height);
        }

        input[type="number"]::-webkit-inner-spin-button,
        input[type="number"]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        input[type="number"] {
            -moz-appearance: textfield;
            appearance: textfield;
        }

        select {
            color: var(--e-global-color-text);
            accent-color: var(--e-global-color-accent);
            background-color: var(--e-global-color-6210a60);
            border-style: solid;
            border-width: 1px;
            border-color: var(--e-global-color-b70b285);
            border-radius: 0.5rem;
        }
    }

    .field-group {
        &[aria-hidden="true"] {
            display: none;
        }

        &:not(.field-group--checkbox) label {
            font-size: var(--e-global-typography-db8e90f-font-size);
            font-weight: var(--e-global-typography-db8e90f-font-weight);
            text-transform: var(--e-global-typography-db8e90f-text-transform);
            line-height: var(--e-global-typography-db8e90f-line-height);
            letter-spacing: var(--e-global-typography-db8e90f-letter-spacing);

            @media only screen and (min-width: 768px) {
                text-align: right;
            }
        }
        &.required:not(.field-group--checkbox) label::after {
            content: "*";
        }

        &.field-group--select {
            .field-group__input-wrapper {
                position: relative;
                display: block;

                &::after {
                    content: "";
                    position: absolute;
                    inset-block-start: 50%;
                    inset-inline-end: 0.75rem;
                    transform: translateY(-50%);
                    width: 1.5rem;
                    aspect-ratio: 1;
                    pointer-events: none;
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
                    background-repeat: no-repeat;
                    background-size: contain;
                }

                select {
                    appearance: none;
                    padding-inline-end: 2.5rem;
                }
            }
        }

        &[data-currency] {
            --_currency: attr(data-currency);

            .field-group__input-wrapper {
                position: relative;
                display: block;

                &::after {
                    content: var(--_currency);
                    position: absolute;
                    inset-block-start: 50%;
                    inset-inline-end: 1rem;
                    transform: translateY(-50%);
                    font-weight: 500;
                    pointer-events: none;
                }

                input {
                    padding-right: 2.5rem;
                }
            }
        }
    }

    .field-group--checkbox {
        .field-group__input-wrapper {
            grid-column: -2;
            display: flex;
            flex-flow: row nowrap;
            align-items: start;
            gap: 0.5rem;
        }

        input {
            margin-block-start: 0.25em;
        }

        label {
            color: var(--e-global-color-text);
            font-family:
                var(--e-global-typography-text-font-family), Helvetica, Verdana,
                Arial, sans-serif;
            font-size: var(--e-global-typography-text-font-size);
            font-weight: var(--e-global-typography-text-font-weight);
            line-height: var(--e-global-typography-text-line-height);
        }
    }

    .field-group:first-child,
    .field-group--intro {
        margin-block-end: var(--nd-space-xs, 1rem);
    }
    .field-group--button {
        margin-block-start: var(--nd-space-xs, 1rem);
    }

    .field-group__field {
        display: grid;
        align-items: center;
        gap: 0.5rem 1rem;

        @media only screen and (min-width: 768px) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    .field-group__message {
        margin-block-start: 0.5rem;
        background: var(--e-global-color-00ffd14, #f9f5e9);
        padding: 0.5rem 1rem;
        border-radius: 0.5rem;
        font-size: var(--e-global-typography-eccf25d-font-size);
        font-weight: var(--e-global-typography-eccf25d-font-weight);
        line-height: var(--e-global-typography-eccf25d-line-height);

        overflow: clip;
        max-height: 10rem;
        opacity: 1;
        transition:
            max-height 0.25s ease,
            opacity 0.2s ease,
            padding 0.25s ease,
            margin 0.25s ease;

        &[aria-hidden="true"] {
            max-height: 0;
            opacity: 0;
            padding: 0;
            margin: 0;
        }
    }

    .calc-button {
        width: 100%;
        padding: 1rem calc(var(--nd-space-s) * 0.8);
        border-style: solid;
        border-width: 2px 2px 2px 2px;
        border-color: var(--e-global-color-0e19370);
        border-radius: 0.25rem 0.25rem 0.25rem 0.25rem;
    }

    .calc-result {
        display: flex;
        flex-flow: column nowrap;
        gap: var(--nd-space-s, 2rem);

        &[hidden] {
            display: none;
        }
    }

    .calc-result__title {
        margin: 0;
        padding: 0;
        font-size: var(--e-global-typography-2315895-font-size);
        font-weight: var(--e-global-typography-2315895-font-weight);
        line-height: var(--e-global-typography-2315895-line-height);
        color: var(--e-global-color-primary);
    }

    .calc-result__list {
        margin: 0;
        display: flex;
        flex-flow: column nowrap;
        gap: 0.5rem;

        div {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 0.5rem;
            padding: calc(var(--nd-space-xs, 1.5rem) / 3 * 2)
                calc(var(--nd-space-xs, 1.5rem) / 3 * 4);
            background: var(--e-global-color-6210a60, #fff);
            border-radius: 0.5rem;

            &:nth-child(even) {
                background: var(--e-global-color-b70b285, #c4d2df);
            }

            &.result-total {
                font-weight: 500;
                color: var(--e-global-color-6210a60, #fff);
                background: var(--e-global-color-0e19370, #001c4d);
            }

            dt::after {
                content: ":";
            }
        }
    }
}