.calculator {
    padding: 33px;
    max-width: 640px;
    border-radius: 38px;
    box-shadow: 0px 0px 22px -13px rgba(34, 60, 80, 0.6);
}

/* КАСТОМНЫЙ SELECT */
.custom-select {
    position: relative;
    width: 100%;
    user-select: none;
}

/* Выбранное значение */
.select-selected {
    width: 100%;
    padding: 16px 16px 16px 16px;
    border: 1px solid #ebedf5;
    border-radius: 36px;
    font-size: 16px;
    background: transparent;
    transition: all 0.3s ease;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.select-selected:hover {
    border-color: #ff511b;
}

.select-selected.select-active {
    border-color: #ff511b;
    border-radius: 8px 8px 0 0;
}

/* Стрелка */
.select-arrow {
    color: rgba(154, 155, 182, 0.53);
    transition: transform 0.3s ease;
}

.select-active .select-arrow {
    transform: rotate(180deg);
    color: #ff511b;
}

/* Выпадающий список */
.select-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ebedf5;
    border-top: none;
    border-radius: 22px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    opacity: 0;
    visibility: hidden;
}

.custom-select.select-active .select-options {
    max-height: 300px;
    overflow-y: auto;
    opacity: 1;
    visibility: visible;
}

/* Опции */
.select-option {
    padding: 12px 16px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 1px solid #ebedf5;
}

.select-option:last-child {
    border-bottom: none;
}

.select-option:hover {
    background-color: rgba(255, 81, 27, 0.1);
}

/*Поле ввода пользовательских значений*/
/* Поле ввода с плавающим плейсхолдером */
.calc-field {
    margin-bottom: 20px;
    position: relative;
}

.input-container {
    position: relative;
    margin-top: 10px;
}

.calc-input {
    width: 100%;
    padding: 16px 16px 16px 16px;
    border: 1px solid #ebedf5;
    border-radius: 36px;
    font-size: 16px;
    background: transparent;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.calc-input:focus {
    outline: none;
    border-color: #ff511b;
}

.floating-label {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    font-size: 16px;
    color: #9a9bb6;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: white;
    padding: 0 4px;
    transform-origin: left center;
}

/* Состояния для плавающего лейбла */
.calc-input:focus + .floating-label,
.calc-input.filled + .floating-label {
    top: 0;
    transform: translateY(-50%) scale(0.85);
    color: #ff511b;
}

/* Гарантированно скрываем любой нативный плейсхолдер */
.calc-input::placeholder {
    color: transparent !important;
    opacity: 0 !important;
}

.calc-input::-webkit-input-placeholder {
    color: transparent !important;
}

.calc-input::-moz-placeholder {
    color: transparent !important;
    opacity: 0 !important;
}

.calc-input:-ms-input-placeholder {
    color: transparent !important;
}

.calc-input:-moz-placeholder {
    color: transparent !important;
    opacity: 0 !important;
}

/* Кнопка очистки */
.clear-button {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    cursor: pointer;
    color: #9a9bb6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease;
    opacity: 0;
    visibility: hidden;
}

.clear-button:hover {
    color: #ff511b;
    background: rgba(255, 81, 27, 0.1);
}

.clear-button:active {
    transform: translateY(-50%) scale(0.9);
}

/*Настройки калькуляторов*/
/*Выбор режима работы*/
.calc-settings, .applicant-type {
    display: flex;
    margin-bottom: 20px;
    align-items: center;
    gap: 20px;
}

.calc-tabs {
    background: #ebedf5;
    padding: 5px;
    border-radius: 50px;
    display: inline-flex;
    position: relative;
    gap: 4px;
    box-sizing: border-box;
    box-shadow: 0px 3px 5px -6px rgba(34, 60, 80, 0.6) inset;
    overflow: hidden;
}

.calc-tabs-bg {
    position: absolute;
    background: #ffffff;
    box-shadow: 0px 5px 3px -4px rgba(34, 60, 80, 0.2);
    border-radius: 39px;
    z-index: 1;
    top: 5px;
    bottom: 5px;
    left: 5px;
    /* Начальные значения для анимации */
    border-right: 0px solid #ffffff;
    border-left: 0px solid #ffffff;
}

.calc-tab {
    cursor: pointer;
    font-size: 14px;
    text-align: center;
    padding: 8px 16px;
    color: #9a9bb6;
    position: relative;
    z-index: 2;
    white-space: nowrap;
    flex-shrink: 0;
}

/*Кнопки ставок НДС*/
.rates-buttons {
    display: flex;
    flex-wrap: nowrap;
    position: relative;
    background: #ebedf5;
    padding: 5px;
    border-radius: 50px;
}

.rates-buttons-bg {
    position: absolute;
    background: #ff511b;
    border-radius: 39px;
    z-index: 1;
    top: 5px;
    bottom: 5px;
    left: 5px;
}

.rate-button {
    cursor: pointer;
    font-size: 14px;
    text-align: center;
    padding: 8px 10px;
    color: #9a9bb6;
    position: relative;
    z-index: 2;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 46px;
    transition: color 0.1s ease 0.1s; /* Цвет меняется с задержкой */
}

.rate-button.active {
    color: #ffffff;
}

/*Результаты вычислений*/
.calc-result {
    margin: 0px 0;
    padding: 22px 35px;
    background: #ebedf5;
    border-radius: 30px;
}

.result-error {
    color: #ff511b;
    font-size: 15px;
    padding: 10px;
}

.result-header-text {
    color: #9a9bb6;
    margin-top: 5px;
}

.result-text {
    transition: all 0.3s ease;
    user-select: none;
    font-size: 20px;
    padding: 7px 0 10px;
    font-weight: 500;
}

.result-text.nds {
    font-size: 22px;
    padding: 3px 0 6px;
    font-weight: 700;
}

.result-text:hover {
    cursor: pointer;
    color: #ff511b;
}

.result-text:active {
    transform: scale(0.98);
}

.formula-text {
    color: #9a9bb6;
    font-size: 14px;
    margin-top: 10px;
    background: #F4F6FC;
    border-radius: 12px;
    padding: 3px 16px 3px 38px;
    display: inline-block;
    max-width: 100%;
    position: relative;
    box-sizing: border-box;
    cursor: pointer; 
    transition: all 0.3s ease;
}

.formula-text:active {
    transform: scale(0.98);
}

.formula-text::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 348 348'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M348 174C348 270.098 270.098 348 174 348C77.9025 348 0 270.098 0 174C0 77.9025 77.9025 0 174 0C270.098 0 348 77.9025 348 174ZM101.548 116.071V147.254H85.1194C76.2169 147.254 69 154.471 69 163.373C69 172.276 76.2169 179.493 85.1194 179.493H101.548V264.326C101.548 274.087 109.461 282 119.222 282C128.983 282 136.895 274.087 136.895 264.326V179.493H154.755C159.561 179.493 164.114 177.342 167.167 173.63C172.017 167.734 172.02 159.202 167.216 153.269C164.146 149.478 159.512 147.254 154.634 147.254H136.895V116.877C136.895 111.638 137.921 107.575 139.973 104.687C142.024 101.731 145.656 100.254 150.868 100.254C152.975 100.254 155.026 100.489 157.023 100.959C159.756 101.585 162.674 99.9443 163.214 97.1927L166.478 80.5464C167.642 74.6087 164.261 68.8202 158.353 67.5112C153.862 66.5037 148.9 66 143.466 66C135.426 66 128.246 67.847 121.925 71.541C115.604 75.2351 110.614 80.7761 106.954 88.1642C103.35 95.5522 101.548 104.854 101.548 116.071ZM205.642 225.562L180.54 200.46C174.487 194.407 174.487 184.593 180.54 178.54C186.593 172.487 196.407 172.487 202.46 178.54L227.562 203.642L251.958 179.247C258.011 173.194 267.825 173.194 273.878 179.247C279.931 185.3 279.931 195.114 273.878 201.167L249.483 225.562L273.878 249.958C279.931 256.011 279.931 265.825 273.878 271.878C267.825 277.931 258.011 277.931 251.958 271.878L227.562 247.483L202.46 272.585C196.407 278.638 186.593 278.638 180.54 272.585C174.487 266.532 174.487 256.718 180.54 250.665L205.642 225.562Z' fill='%239a9bb6'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.8;
}

.nalog-base {
    margin: 10px 0 17px 0;
}

.non-resident-note, .income-type-note {
    margin: 20px 13px 12px 13px;
    font-size: 14px;
    color: rgba(154, 155, 182, 0.53);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    line-height: 1.4;
}

.non-resident-note svg, .income-type-note svg {
    flex-shrink: 0;
    margin-top: 1px;
    width: 14px;
    height: 14px;
}

/*Уведомление о копировании*/
.copy-hint {
    transition: opacity 0.3s ease;
    margin-left: 7px;
    vertical-align: text-top;
}

.copy-message {
    transition: opacity 0.3s ease;
    font-size: 12px;
    color: #9a9bb6; 
    margin: 10px; 
    text-align: center; 
    opacity: 0; 
    transition: opacity 0.3s;
    text-transform: uppercase;
}

/* Стили для тултипа копирования (общие для всех калькуляторов) */
.copy-tooltip {
    position: absolute;
    background: #fff;
    font-size: 14px;
    text-align: center;
    padding: 8px 16px;
    color: #9a9bb6;
    z-index: 1000;
    box-shadow: 0px 5px 3px -4px rgba(34, 60, 80, 0.2);
    animation: fadeInOut 2s ease-in-out;
    pointer-events: none;
    border-radius: 50px;
    white-space: nowrap;
}

.copy-tooltip.error {
    background: #dc3545;
    color: white;
}

/* Анимация появления/исчезновения тултипа */
@keyframes fadeInOut {
    0% { 
        opacity: 0; 
        transform: translateY(10px); 
    }
    20% { 
        opacity: 1; 
        transform: translateY(0); 
    }
    80% { 
        opacity: 1; 
        transform: translateY(0); 
    }
    100% { 
        opacity: 0; 
        transform: translateY(-10px); 
    }
}

/*ВЫЧЕТЫ НА ДЕТЕЙ*/
.children-deductions-settings {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

.children-counter {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 16px 5px 6px;
    background: #ebedf5;
    border-radius: 50px;
    min-width: 200px;
    box-shadow: 0px 3px 5px -6px rgba(34, 60, 80, 0.6) inset;
}

.children-counter button {
    width: 34px;
    height: 34px;
    border: none;
    background: white;
    color: #9a9bb6;
    border-radius: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0px 5px 3px -4px rgba(34, 60, 80, 0.2);
}

.children-counter button:active {
    transform: scale(0.95);
}

.children-count {
    min-width: 24px;
    color: #9a9bb6;
    text-align: center;
    font-size: 14px;
}

.counter-label {
    font-size: 14px;
    color: #9a9bb6;
    white-space: nowrap;
}

/* Контейнер для списка детей - на новой строке */
.children-list-container {
    width: 100%;
    margin-bottom: 20px;
}

.children-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.child-item {
    padding: 16px;
    background: #ebedf5;
    border-radius: 30px;
    transition: all 0.3s ease;
}

.child-number {
    font-size: 14px;
    font-weight: 500;
    color: #9a9bb6;
    padding: 4px 12px 12px 12px;
}

.child-options {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 30px;
    transition: all 0.2s ease;
    user-select: none;
}

.checkbox-label:hover {
    background: #F4F6FC;
}

.child-checkbox {
    display: none;
}

.checkbox-custom {
    width: 16px;
    height: 16px;
    border: 1.5px solid #9a9bb6;
    border-radius: 10px;
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.checkbox-label:active {
    transform: scale(0.95);
}

.checkbox-custom::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 8px;
    height: 8px;
    background: #ff511b;
    border-radius: 10px;
    transition: transform 0.2s ease;
}

.child-checkbox:checked + .checkbox-custom {
    border-color: #ff511b;
    background: rgba(255, 81, 27, 0.1);
}

.child-checkbox:checked + .checkbox-custom::after {
    transform: translate(-50%, -50%) scale(1);
}

.checkbox-text {
    font-size: 14px;
    color: #9a9bb6;
}

.checkbox-label.checked {
    /*background: #F4F6FC;*/
    background: #ffffff;
    box-shadow: 0px 5px 3px -4px rgba(34, 60, 80, 0.2);
}

/* Особые стили для опции одинокого родителя */
.single-parent-option {
    margin-top: 8px;
    padding: 5px;
    background: #ebedf5;
    border-radius: 30px;
    display: inline-flex;
    align-self: flex-start;
}

.single-parent-option .checkbox-label {
    padding: 8px 12px;
    margin: 0;
}

.single-parent-option .checkbox-text {
    font-size: 14px;
}

.single-parent-option .child-checkbox:checked + .checkbox-custom {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.single-parent-option .child-checkbox:checked + .checkbox-custom::after {
    background: #ef4444;
}

/* Адаптивность */
@media (max-width: 768px) {
    .calc-settings {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    .children-counter {
        min-width: auto;
        justify-content: center;
    }
    
    .child-options {
        flex-direction: column;
        gap: 10px;
    }
    
    .child-item {
        padding: 12px;
    }
    
    .checkbox-label {
        padding: 4px 6px;
    }
}

/* Анимации */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.child-item {
    animation: fadeIn 0.3s ease-out;
}

/* Индикатор активности */
.child-item:has(.child-checkbox:checked) {
    background: #ebedf5;
}

/*Генерация платежного поручения*/
/* Стили для кнопок действий */

.duty-payment {
    margin-top: 20px;
    display: flex;
    width: 100%;
    gap: 15px;
}
.calc-actions {
    flex-shrink: 0;
}

.action-btn {
    padding: 18px;
    border: none;
    border-radius: 50px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.download-btn {
    background: #ff511b;
    color: white;
}

.download-btn:active {
    transform: scale(0.98);
}

.pay-btn {
    background: #28a745;
    color: white;
    text-decoration: none; /* Убираем подчеркивание */
    display: inline-block; /* Для правильного отображения кнопки */
    text-align: center;
    box-sizing: border-box;
}
.pay-btn:hover {
    background: #218838;
    transform: translateY(-2px);
    color: white; /* Сохраняем цвет текста */
    text-decoration: none; /* Убираем подчеркивание при hover */
}
.spinner {
    border: 3px solid #f3f3f3;
    border-top: 3px solid #ff511b;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Добавьте в ваш CSS файл */
.court-fee-calculator .download-btn.disabled {
    font-weight: 300;
    cursor: not-allowed;
    background-color: #ebedf5;
    color: #9a9bb6;
    box-shadow: 0px 3px 5px -6px rgba(34, 60, 80, 0.6) inset;
}

.court-fee-calculator .download-btn.disabled:hover {
    transform: none;
}

.court-select-field {
    transition: all 0.3s ease;
    flex:1;
    min-width: 0;
}
/* Стили для поиска судов */
.court-search-container {
    position: relative;
    padding: 8px;
    border-bottom: 1px solid #ebedf5;
}

.court-search-input {
    width: 100%;
    padding: 8px 30px 8px 12px;
    border: 1px solid #ebedf5;
    border-radius: 23px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}

.court-search-input:focus {
    border-color: #ff511b;
}

.search-icon {
    position: absolute;
    right: 23px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(154, 155, 182, 0.53);
    pointer-events: none;
}
.court-options-list {
    max-height: 200px;
    overflow-y: auto;
}
.court-options-list .select-option:last-child {
    border-bottom: none;
}
.highlight {
    background-color: rgba(255, 81, 27, 0.1);
    padding: 2px 1px;
    border-radius: 2px;
}
.keyboard-selected {
    background-color: rgba(255, 81, 27, 0.1) !important;
}