/* Основний контейнер */
.lime-calc {
    font-family: 'Inter', sans-serif;
    max-width: 980px;
    margin: 0 auto;
    color: #1a1a1a;
}

.calc-row {
    display: flex;
    align-items: start;
    gap: 48px;
}

@media (max-width: 689px) {
    .calc-row {
        flex-direction: column;
        gap: 0;
    }
}

.calc-row-metal-mark {
    margin-bottom: 90px;
}

@media (max-width: 689px) {
    .calc-row-metal-mark {
        margin-bottom: 30px;
    }
}

.calc-row-inputs {
    margin-top: 55px;
}

@media (max-width: 689px) {
    .calc-row-inputs {
        gap: 30px;
    }
}

.calc-section {
    margin-bottom: 25px;
}

.calc-label {
    font-family: 'Oswald', sans-serif !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    line-height: 100% !important;
    letter-spacing: 0.01em !important;
    color: #000000;
    text-transform: uppercase;
    margin-bottom: 10px !important;
}

/* Стилізація кнопок (Марки та Типи) */
.calc-buttons-grid,
.calc-types-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* .calc-types-grid > * {
    flex: 1;
} */

.calc-btn {
    border: none;
    background: #DBE3E9;
    /* Світло-сірий як на макеті */
    color: #1a1a1a;
    padding: 7px 30px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    /* min-width: 100px; */
}

/* Активний стан кнопок - ТЕМНИЙ */
.calc-btn.active {
    background: #434649;
    /* Темно-сірий як на макеті */
    color: #ffffff;
}

.calc-btn:hover:not(.active) {
    background: #cbd5e1;
}

.calc-mark-btn {
    /* font-family: 'Inter', sans-serif; */
    font-size: 14px;
    font-weight: 500;
}

.calc-type-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    font-family: 'Oswald', sans-serif !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    line-height: 100% !important;
    letter-spacing: 0.01em !important;
    text-transform: uppercase;
    padding: 18px 30px;
}

/* Стилізація Селекта (Метал) */
/* Базовий стан селекта */
.calc-select {
    appearance: none;
    -webkit-appearance: none;
    /* для Safari */
    background: #434649 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E") no-repeat right 25px center !important;
    background-size: 16px !important;
    padding: 15px 45px 15px 28px !important;
    border-radius: 6px;
    border: none;
    font-family: 'Oswald', sans-serif !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    line-height: 100% !important;
    letter-spacing: 0.01em !important;
    color: #DBE3E9 !important;
    text-transform: uppercase;
    cursor: pointer;
    min-width: 250px;
    min-height: 60px;
    outline: none;
    transition: background-color 0.2s ease;
}

/* Стан при виборі та фокусі - щоб стилі не "злітали" */
.calc-select:focus,
.calc-select:active,
.calc-select:hover {
    background-color: #434649 !important;
    color: white !important;
}

/* Стилізація випадаючого списку (опцій всередині) */
.calc-select option {
    background-color: #ffffff;
    color: #1a1a1a;
    text-transform: none;
    padding: 10px;
}

/* Сітка для інпутів */
.calc-inputs-row {
    /* display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); */
    display: flex;
    gap: 30px;
    /* margin-top: 30px; */
    width: 100%;
}

@media (max-width: 689px) {
    .calc-inputs-row {
        flex-direction: column;
    }
}

.input-field-group {
    flex: 1;
}

.input-field-group label {
    display: block;
    font-family: 'Oswald', sans-serif !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    line-height: 100% !important;
    letter-spacing: 0.01em !important;
    color: #000000;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.input-with-unit {
    display: flex;
    align-items: center;
    gap: 10px;
}

.input-with-unit input {
    width: 100%;
    padding: 15px;
    min-height: 80px;
    border: 1px solid #434649 !important;
    border-radius: 6px !important;
    font-family: 'Oswald', sans-serif !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    line-height: 100% !important;
    letter-spacing: 0.01em !important;
    color: #000000;
}

.unit-label {
    font-weight: 700;
    text-transform: uppercase;
    color: #1a1a1a;
}

/* ТАБЛО РЕЗУЛЬТАТУ */

@media (max-width: 689px) {
    .calc-result-container {
        min-width: 100%;
    }
}

.calc-result-display {
    padding: 30px;
    display: flex;
    justify-content: center;
    align-items: baseline;
    background:
        linear-gradient(90deg, #23272B 12%, #98928B 47%, #23272B 81%) padding-box,
        linear-gradient(180deg, #98A5AE 11%, #F2EADD 41%, #EBEBEB 62%, #939EA8 89%) border-box !important;
    border: 2px solid transparent !important;
    border-radius: 8px !important;
    box-shadow: 0px 4px 6px 1px rgba(0, 0, 0, 0.5) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative;
    overflow: hidden;
}

@media (min-width: 1000px) {
    .calc-result-display {
        min-width: 370px;
    }
}

.calc-result-displa::before,
.calc-result-displa::after {
    display: none !important;
}

.result-value {
    font-family: 'Oswald', sans-serif !important;
    font-weight: 500 !important;
    font-size: 48px !important;
    line-height: 100% !important;
    letter-spacing: 0.01em !important;
    color: #DBE3E9;
    margin-right: 15px;
}

.result-unit {
    font-family: 'Oswald', sans-serif !important;
    font-weight: 500 !important;
    font-size: 48px !important;
    line-height: 100% !important;
    letter-spacing: 0.01em !important;
    color: #DBE3E9;
}