// recipe submission

.dr-guest-recipe-submission {

    input[type="text"],
    input[type="url"],
    input[type="email"],
    input[type="number"],
    input[type="password"],
    input[type="date"],
    input[type="search"],
    select,
    textarea,
    input:not([type="checkbox"],
        [type="submit"],
        [type="search"],
        [type="radio"],
        #dr-recipe-timer,
        [type="file"],
        .wc-block-price-filter__range-input) {
        font-size: 14px !important;
        line-height: 1.429;
        font-weight: 500;
        padding: 14px 14px !important;
        width: 100%;
        border: 1px solid rgba(var(--font-color-rgb), 0.1);
        border-radius: 4px;
        background: none;
        vertical-align: middle;
        background-color: #fff;
        margin: 0 !important;
        height: unset !important;
    }

    .dr-button-group {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 16px;
    }

    .dr-btn,
    input[type="submit"].dr-btn,
    button.dr-btn,
    .user-dashboard input.search-submit {
        border: none;
        cursor: pointer;
        font-size: 15px;
        line-height: 1.35;
        padding: 15px 30px;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
        background-color: var(--primary-color);
        color: var(--white-color);

        &:hover {
            background-color: var(--secondary-color);
        }

    }

    // Mixins
    @mixin flex-center-between {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    @mixin clearfix {

        &:before,
        &:after {
            display: table;
            clear: both;
            content: "";
        }
    }

    .dr-nutrition-facts {
        .dr-title-wrap {
            @include flex-center-between;
            background: var(--primary-color);
            color: var(--white-color);
            padding: 12px 30px;

            .dr-title {
                b {
                    margin-right: 10px;
                }

                span {
                    font-weight: 400;
                    letter-spacing: 0.2px;
                }
            }

            .dr-daily-value {
                font-size: 0.8889em;
                font-weight: 400;
            }
        }

        .dr-nutrition-list {
            display: block;
            background: var(--white-color);
            border: solid 1px rgba(135, 171, 162, 0.16);
            padding: 6px 30px 15px;

            ul {
                margin: 0;
                display: flex;
                justify-content: flex-start;
                flex-wrap: wrap;
                position: relative;

                &:before {
                    content: "";
                    position: absolute;
                    top: 6px;
                    left: 50%;
                    margin-left: -1px;
                    width: 1px;
                    height: calc(100% - 12px);
                    background: rgba(var(--primary-color-rgb), 0.1);
                    z-index: 1;
                }

                li {
                    display: inline-block;
                    width: 50%;
                    padding-right: 50px;
                    font-size: 0.888889em;
                    line-height: 1.9375;
                    margin-bottom: 0.75em;
                    margin-top: 1em;
                    font-weight: 400;
                    color: #232323;
                    @include clearfix;

                    b {
                        float: right;
                        font-size: 15px;
                        color: var(--font-color);
                    }

                    &:nth-child(2n) {
                        padding-right: 0;
                        padding-left: 50px;
                    }

                    &:before {
                        display: none;
                    }
                }
            }
        }
    }

    .dr-nutrition-label {
        background: var(--white-color);
        font-size: 1.1rem;
        border-radius: 3px;

        .dr-nutrition-title {
            font-size: 2rem;
            line-height: 1;
            letter-spacing: 0;
            font-weight: 800;
            padding: 0;
            margin: 0 0 0.4rem;
            color: #333;
        }

        &.dr-float-right {
            max-width: 45%;
            margin: 0 0 3rem 3rem;
            float: right;
        }

        &.dr-float-left {
            max-width: 45%;
            margin: 0 3rem 3rem 0;
            float: left;
        }

        p {
            margin: 0 !important;
            padding: 0 !important;

            &.dr-daily-value-text {
                padding: 0.75rem 0 0.15rem !important;
                margin: 0 !important;
                font-size: 0.9rem;
                line-height: 1.3rem !important;
            }
        }

        dl {
            margin: 0 !important;
            padding: 0 !important;
        }

        dt {
            position: relative;
            margin: 0;
            padding: 2px 0;
            border-top: 1px solid #aaa;
            @include clearfix;

            dt {
                padding: 2px 0 0;
                margin: 2px 0 0;
            }

            &.dr-nut-spacer {
                border: none;
                height: 0.5rem;
                padding: 0;
                background: var(--primary-color);
            }

            &.dr-nut-no-border {
                border: none;
            }

            dl {
                margin: 0 0 0 1.5rem !important;
            }
        }

        .dr-nut-hr {
            margin: 1rem 0 0;
            padding: 0;
            border: none;
            border-radius: 0;
            width: 100%;
            height: auto;
            background: none;
            border-top: 1rem solid var(--primary-color);
        }

        strong {
            font-weight: 700;

            &.dr-nut-heading {
                font-size: 0.75rem;
            }
        }

        span.dr-calories-fat,
        strong.dr-nut-label {
            font-weight: 400;
        }

        .dr-nut-right {
            float: right;
        }

        dl.dr-nut-bottom {
            dt {
                border-top: none;
                border-bottom: 1px solid #aaa;
                float: left;
                width: 50%;
                box-sizing: border-box;

                strong {
                    font-weight: 400;
                }

                &:last-child,
                &:nth-last-child(2) {
                    border: none;
                }

                &:nth-last-child(2):nth-child(even) {
                    border-bottom: 1px solid #aaa;
                }
            }
        }
    }

    .widget .dr-nutrition-label {
        margin: 0;
    }

    .dr-nut-no-border.text-large {
        font-size: 1.5em;

        .dr-nut-right {
            font-size: 1.2em;
        }
    }

    .dr-clearfix:not(:has(.text-large)) {
        line-height: 1.45;
    }

    @media screen and (max-width: 767px) {
        .dr-nutrition-facts {

            .dr-title-wrap,
            .dr-nutrition-list {
                padding-left: 20px;
                padding-right: 20px;
            }
        }
    }

    // Pro feature
    .dr-nutrition-output-area {
        .dr-nutrition-facts {
            position: sticky;
            top: 50px;
        }
    }

    // todo need to check
    .dr-nutrition-facts {
        .dr-title {
            margin: 0 !important;
            color: inherit;
            font-size: 1.1111em !important;
        }

        .dr-nutrition-label {
            .dr-nut-bottom {
                display: flex;
                flex-wrap: wrap;

                dt {
                    &:first-child {
                        border-bottom: 1px solid #aaa;
                    }
                }
            }
        }

        &.chart-layout-flat {
            .dr-nutrition-servings {
                color: #232323;
                font-size: 18px;
                font-weight: 400;
                line-height: 1.7;
                padding-top: 20px;
                margin-bottom: 0.8em;
            }

            .dr-nutrition-fact-lists {
                line-height: 1.7;

                span {
                    color: rgba(35, 35, 35, 0.60);
                    font-size: 16px;
                    font-weight: 400;
                    display: inline-flex;
                    gap: 4px;

                    span {
                        color: #232323;
                        font-weight: 500;
                    }

                    &:last-child {
                        margin-right: 12px;
                    }
                }
            }
        }
    }
}