/* Remove any outer wrapper border/outline added by Gutenberg/themes.
   Inner field/card borders are still controlled by --wd-dc-border-color. */
.wp-block-wisedigital-diet-calculator,
.editor-styles-wrapper .wp-block-wisedigital-diet-calculator,
.wd-diet-calculator {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.wp-block-wisedigital-diet-calculator::before,
.wp-block-wisedigital-diet-calculator::after,
.editor-styles-wrapper .wp-block-wisedigital-diet-calculator::before,
.editor-styles-wrapper .wp-block-wisedigital-diet-calculator::after,
.wd-diet-calculator::before,
.wd-diet-calculator::after {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.wd-diet-calculator {
    --wd-dc-selected-bg: var(--wp--preset--color--black);
    --wd-dc-selected-color: var(--wp--preset--color--white);
    --wd-dc-option-bg: var(--wp--preset--color--white);
    --wd-dc-option-color: var(--wp--preset--color--black);
    --wd-dc-border-color: var(--wp--preset--color--cyan-bluish-gray);
    --wd-dc-input-bg: var(--wp--preset--color--white);
    --wd-dc-input-color: var(--wp--preset--color--black);
    --wd-dc-label-color: var(--wp--preset--color--black);
    --wd-dc-muted-color: var(--wp--preset--color--cyan-bluish-gray);
    --wd-dc-result-bg: var(--wp--preset--color--white);
    --wd-dc-result-color: var(--wp--preset--color--black);
    --wd-dc-error-color: var(--wp--preset--color--vivid-red);
    --wd-dc-field-padding: 12px;
    --wd-dc-option-padding: var(--wp--preset--spacing--16);
    --wd-dc-card-padding: var(--wp--preset--spacing--16);
    --wd-dc-gap: 8px;
    --wd-dc-section-gap: var(--wp--preset--spacing--32);
    --wd-dc-radius: var(--wp--preset--spacing--16);
    --wd-dc-field-radius: var(--wd-dc-radius);

    width: 100%;
    color: var(--wd-dc-option-color);
    font: inherit;
    background: transparent;
}

.wd-diet-calculator * {
    box-sizing: border-box;
}

.wd-diet-calculator__form {
    display: grid;
    gap: var(--wd-dc-section-gap);
    width: 100%;
    border: 0;
    outline: 0;
    box-shadow: none;
}

.wd-diet-calculator__section,
.wd-diet-calculator__field {
    display: grid;
    gap: var(--wd-dc-gap);
    min-width: 0;
}

.wd-diet-calculator__section-title,
.wd-diet-calculator__label {
    display: block;
    color: var(--wd-dc-label-color);
    font: inherit;
    line-height: 1.3;
}

.wd-diet-calculator__choice-grid,
.wd-diet-calculator__metrics-grid {
    display: grid;
    gap: var(--wd-dc-gap);
    width: 100%;
}

.wd-diet-calculator__choice-grid--gender {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wd-diet-calculator__metrics-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.wd-diet-calculator__choice-grid--job {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wd-diet-calculator__choice-grid--daily {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.wd-diet-calculator__choice-grid--training {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.wd-diet-calculator__choice-grid--method {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wd-diet-calculator__input {
    width: 100%;
    min-width: 0;
    height: 48px;
    min-height: 48px;
    padding: 12px;
    border: 1px solid var(--wd-dc-border-color);
    border-radius: var(--wd-dc-field-radius);
    color: var(--wd-dc-input-color);
    background-color: var(--wd-dc-input-bg);
    font: inherit;
    line-height: inherit;
}

.wd-diet-calculator__input::placeholder {
    color: var(--wd-dc-muted-color);
    opacity: 1;
}

.wd-diet-calculator__option {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
    min-height: var(--wp--custom--button-min-height);
    padding: var(--wp--preset--spacing--16);
    border: 1px solid var(--wd-dc-border-color);
    border-radius: var(--wd-dc-radius);
    color: var(--wd-dc-option-color);
    background: var(--wd-dc-option-bg);
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.wd-diet-calculator__option--simple {
    align-items: center;
}

.wd-diet-calculator__option input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.wd-diet-calculator__option-content {
    display: grid;
    gap: 0.45em;
    min-width: 0;
}

.wd-diet-calculator__option--simple .wd-diet-calculator__option-content {
    display: block;
}

.wd-diet-calculator__option-title {
    display: block;
    color: inherit;
    font-weight: 700;
    line-height: 1.25;
}

.wd-diet-calculator__option-description {
    display: block;
    color: inherit;
    font-size: var(--wp--preset--font-size--base-small);
    line-height: 1.35;
    opacity: 0.92;
}

.wd-diet-calculator__option:has(input:checked) {
    color: var(--wd-dc-selected-color);
    background: var(--wd-dc-selected-bg);
    border-color: var(--wd-dc-selected-bg);
}

.wd-diet-calculator__actions,
.wd-diet-calculator .wp-block-button {
    width: 100%;
    margin: 0;
}

.wd-diet-calculator .wp-block-button__link,
.wd-diet-calculator .wp-element-button,
.wd-diet-calculator__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--wp--custom--button-padding, var(--wp--preset--spacing--30, 0.667em) var(--wp--preset--spacing--50, 1.333em));
    border: 0;
    border-radius: 999px;
    background: var(--wd-dc-selected-bg);
    color: var(--wd-dc-selected-color);
    cursor: pointer;
    text-align: center;
    font: inherit;
    font-weight: 700;
    line-height: inherit;
}

.wd-diet-calculator__error {
    color: var(--wd-dc-error-color);
}

.wd-diet-calculator__error:empty {
    display: none;
}

.wd-diet-calculator__result {
    padding: var(--wd-dc-card-padding);
    border-radius: var(--wd-dc-radius);
    background: var(--wd-dc-result-bg);
    color: var(--wd-dc-result-color);
}

.wd-diet-calculator__result[hidden] {
    display: none;
}

.wd-diet-calculator__result-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--wd-dc-gap);
    margin: 0;
}

.wd-diet-calculator__result-item {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: var(--wd-dc-field-padding);
    border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    border-radius: var(--wd-dc-radius);
}

.wd-diet-calculator__result-item span {
    font-size: var(--wp--preset--font-size--base-small);
    opacity: 0.8;
}

.wd-diet-calculator__result-item strong {
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: inherit;
    line-height: 1.1;
}

.wd-diet-calculator__result-item--highlight strong {
    color: var(--wd-dc-selected-bg);
}

.wd-diet-calculator__macro {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wd-dc-gap);
    margin-top: var(--wd-dc-section-gap);
    color: var(--wd-dc-result-color);
}

.wd-diet-calculator__macro span {
    display: inline-flex;
    align-items: center;
    padding: var(--wp--preset--spacing--16);
    border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    border-radius: var(--wd-dc-radius);
}

@media (max-width: 1100px) {
    .wd-diet-calculator__choice-grid--daily,
    .wd-diet-calculator__choice-grid--training {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wd-diet-calculator__result-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .wd-diet-calculator__choice-grid--job,
    .wd-diet-calculator__choice-grid--method {
        grid-template-columns: 1fr;
    }

    .wd-diet-calculator__choice-grid--daily,
    .wd-diet-calculator__choice-grid--training {
        grid-template-columns: 1fr;
    }

    .wd-diet-calculator__choice-grid--gender,
    .wd-diet-calculator__metrics-grid {
        gap: var(--wd-dc-gap);
    }

    .wd-diet-calculator__option-description {
        font-size: var(--wp--preset--font-size--base-small);
    }
}

@media (max-width: 520px) {
    .wd-diet-calculator__choice-grid--gender {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wd-diet-calculator__metrics-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .wd-diet-calculator__input {
        height: var(--wp--custom--button-min-height);
        min-height: var(--wp--custom--button-min-height);
    }

    .wd-diet-calculator__result-grid {
        grid-template-columns: 1fr;
    }
}