.forma {max-width:620px; z-index:1; margin: 20px auto; padding: 15px; border: #00BEED 2px solid; background: #FFFFFF}
.forma p {font-family:"Roboto Condensed",sans-serif; font-size:18px;}


/*Для левый-правый SN*/
.forma-container {width: 438px; display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start; flex-direction: row}
.forma-item {width: 190px; border: 0}
.input50 {width: 140px; }

input:hover, input:focus {border-color:#555;}


.selectt,
input[type="text"], 
input[type="tel"], 
input[type="email"], 
input[type="date"], 
input[type="number"],
textarea {
    margin: 0px; 
    padding: 4px; font-size:20px; 
    font-family:"Roboto Condensed",sans-serif; 
    color: #111; 
    font-weight:300; 
    border:#999 2px solid; 
    border-radius: 5px; 
    background: #fff;
}

textarea {
    width: calc(100% - 12px);
    margin: 0px auto; 
}


.selectt {
    width: 80%;
}

input[type="text"], 
input[type="tel"], 
input[type="email"] {
    width: calc(80% - 12px);
    height: 38px;
    box-sizing: border-box;
} 

input[type="date"], 
input[type="number"] {
    appearance: none;
    width: 160px;
    height: 38px;
    box-sizing: border-box;
} 

input[type="text"]:disabled, 
input[type="date"]:disabled,
input[type="number"]:disabled{
    background-color: #eee; /* Серый фон */
    color: #aaa; /* Цвет текста */
}

/* СТИЛИЗАЦИЯ RADIO Убираем стандартное оформление */
input[type='radio'] {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    appearance: none; 
    border: 2px solid #999;
    border-radius: 5px;
    outline: none;
    cursor: pointer;
    position: relative;
    background-color: #fff;
    transition: all 0.3s ease-in-out;
}

input[type='radio']:checked {  /* Добавляем внутреннюю точку при выборе */
    background-color: #fff;
    border: 2px solid #00BEED;
}

input[type='radio']::before {
    content: '';
    width: 12px;
    height: 12px;
    background-color: #00BEED;
    border-radius: 3px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.2s ease-in-out;
}

input[type='radio']:checked::before {   /* Внутренний кружок появляется при выборе */
    transform: translate(-50%, -50%) scale(1);
}


.for-checkbox, .for-unknow {
    display: flex; 
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    margin-top: 8px;
}

.for-checkbox p {text-indent: 0; margin: 0 0 0 16px}

.for-unknow span {text-indent: 0; margin: 0 0 0 16px}



/* Скрываем стандартный чекбокс */
.custom-checkbox input[type="checkbox"] {
    display: none;
}

/* Стили для кастомного чекбокса */
.custom-checkbox span {
    width: 22px;
    height: 22px;
    display: inline-block;
    border: 2px solid #999;
    border-radius: 5px; 
    position: relative;
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease;
}

/* Цвет фона и рамки при наведении */
.custom-checkbox span:hover {
    border-color: #0cf;
}

/* Активное состояние чекбокса */
.custom-checkbox input[type="checkbox"]:checked + span {
    background: #0cf;
    border-color: #0cf;
}

/* "Птичка" внутри чекбокса */
.custom-checkbox span::after {
    content: '';
    width: 6px;
    height: 12px;
    border: solid #fff;
    border-width: 0 2px 3px 0;
    position: absolute;
    top: 2px;
    left: 7px;
    transform: rotate(45deg) scale(0); /* Изначально скрыта */
    transition: transform 0.2s ease; /* Анимация появления */
}

/* Показываем "птичку" при включённом чекбоксе */
.custom-checkbox input[type="checkbox"]:checked + span::after {
    transform: rotate(45deg) scale(1); /* Появление птички */
}


/* блоки кнопок */
.radio-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 20px auto;
}

.radio-item {
    display: flex;
    align-items: center; /* Центрирование */
    gap: 10px; /* Отступ между кнопкой и текстом */
}


.radio-item label {
    flex: 1; /* Позволяет тексту занимать доступное пространство */
}


/* двухкнопочный переключатель */
.toggle-group {
    display: flex;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid #999;
    width: 160px;
}

.toggle-group input {
    display: none; /* Скрываем стандартные radio */
}

.toggle-label {
    flex: 1;
    text-align: center;
    padding: 10px;
    cursor: pointer;
    font-size: 18px;
    background: #ffffff;
    color: #00BEED;
    transition: all 0.3s ease-in-out;
}

/* Стили для активной кнопки */
.toggle-group input:checked + .toggle-label {
    background: #00BEED;
    color: #fff;
}

/* Эффект при наведении */
.toggle-label:hover {
    background: #DDE0E0;
}


/* ======================================================= */

@media only screen and (max-width:720px), only screen and (max-device-width:720px) {
    .input50 {width: 75%; }
}


@media only screen and (max-width:600px), only screen and (max-device-width:600px) {
.forma-container {width:100%; flex-direction: column}
.forma-item {width: 80%;}
	
    
}