/** Material Calculator — responsive, Elementor-aware component styles. */
.material-calculator {
    --material-primary: var(--e-global-color-primary, #18172b);
    --material-secondary: var(--e-global-color-secondary, #666666);
    --material-text: var(--e-global-color-text, #222222);
    --material-accent: var(--e-global-color-accent, #78935f);
    --material-surface: var(--e-global-color-background, #f4f4f4);
    --material-input-bg: #ffffff;
    --material-border: #bdbdbd;
    width: 100%;
    color: var(--material-text);
    font-family: var(--e-global-typography-text-font-family, inherit);
    line-height: 1.5;
}

.material-calculator *,
.material-calculator *::before,
.material-calculator *::after {
    box-sizing: border-box;
}

.material-calculator__card {
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    padding: 34px 38px;
    border-radius: 26px;
    background: var(--material-surface);
    color: var(--material-text);
}

.material-calculator__title {
    margin: 0 0 10px;
    color: var(--material-primary);
    font-family: var(--e-global-typography-primary-font-family, inherit);
    font-size: clamp(24px, 4vw, 34px);
    font-weight: 700;
    line-height: 1.2;
}

.material-calculator__description {
    margin: 0 0 28px;
    color: var(--material-secondary);
    font-size: 15px;
}

.material-calculator__field {
    margin: 0 0 18px;
}

.material-calculator__dimensions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.material-calculator__label {
    display: block;
    margin: 0 0 7px;
    color: var(--material-text);
    font-size: 14px;
    font-weight: 600;
}

.material-calculator__label span {
    color: var(--material-accent);
}

.material-calculator__input {
    display: block;
    width: 100%;
    min-height: 46px;
    padding: 9px 12px;
    border: 1px solid var(--material-border);
    border-radius: 8px;
    background: var(--material-input-bg);
    color: var(--material-text);
    font: inherit;
    line-height: 1.3;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.material-calculator__input:hover {
    border-color: var(--material-accent);
}

.material-calculator__input:focus,
.material-calculator__input:focus-visible {
    border-color: var(--material-accent);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--material-accent) 25%, transparent);
}

.material-calculator__select {
    cursor: pointer;
}

.material-calculator__output {
    font-size: 22px;
    font-weight: 700;
    cursor: default;
}

.material-calculator__output:hover {
    border-color: var(--material-border);
}

.material-calculator__field-help {
    margin: 7px 0 0;
    color: var(--material-secondary);
    font-size: 12px;
    line-height: 1.4;
}

.material-calculator__field--result {
    margin-top: 8px;
    padding-top: 22px;
    border-top: 1px solid color-mix(in srgb, var(--material-text) 15%, transparent);
}

.material-calculator__disclaimer {
    margin: 24px 0 0;
    padding: 14px 16px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--material-text) 5%, transparent);
    color: var(--material-secondary);
    font-size: 12px;
    line-height: 1.5;
}

@media (max-width: 767px) {
    .material-calculator__card {
        padding: 26px 18px;
        border-radius: 20px;
    }

    .material-calculator__description {
        margin-bottom: 22px;
    }
}

@media (max-width: 480px) {
    .material-calculator__card {
        padding-right: 14px;
        padding-left: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .material-calculator *,
    .material-calculator *::before,
    .material-calculator *::after {
        transition-duration: 0.01ms !important;
    }
}