form {
background: #ffffff;
border-radius: 16px;  width: 850px; }
#form-catalogue {
width: 100%;
}
label {
font-weight: 500;
margin-top: 18px;
display: block;
}
#form-catalogue label {
font-weight: 400;
margin-top: 10px;
display: block;
}
.form-grid .consent label {
font-size: 14px;
font-weight: 400;
display: flex;
flex: 1 1 0;
min-width: 0;
align-items: center;
margin: 8px 0 8px 0;
}
.consent {
display: flex;
flex-wrap: wrap;
}
.consent input[type="checkbox"] {
margin-right: 12px;
width: 20px;
}
.consent .error-message {
flex-basis: 100%;
margin: 4px 0 8px 32px;
}
.captcha-area {
margin-top: 15px;
}
input,
textarea,
select {
width: 100%;
padding: 12px;
margin-top: 6px;
border-radius: 8px;
border: 1px solid #ccc;
font-size: 15px;
}
#submitBtn {
background-color: #f5a623;
color: white;
font-weight: bold;
cursor: pointer;
margin-top: 25px;
font-size: 18px;
border: none;
padding: 14px;
border-radius: 8px;
transition: .3s;
}
#submitBtn:hover {
background-color: #d87c15;
transition: .3s;
}
.demand-buttons {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 16px;
}
.demand-buttons button {
display: flex;
font-family: 'Poppins';
justify-content: center;
align-items: center;
padding: 16px;
font-size: 18px;
background-color: #f9f9f9;
border: 2px solid #ddd;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s;
}
.demand-buttons button:hover {
background-color: #f0f0f0;
border-color: #f5a623;
color: #131523;
}
.demand-buttons button.selected {
background-color: #f5a623;
color: white;
border-color: #f5a623;
}
.consent a {
text-decoration: underline #131523;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
}
.hidden {
display: none;
}
.error-message {
color: #f74f4f;
font-size: 0.7em;
margin-top: 6px;
display: block;
height: auto; }
.error-message:empty {
display: none; 
}
.input-error {
border-color: #f74f4f;
}
input[type="checkbox"] {
width: auto;
} .animated-toggle {
transition: opacity 0.3s;
opacity: 1;
}
.animated-toggle.hide {
opacity: 0;
}
.animated-toggle.gone {
display: none;
}
@keyframes shake {
0% {
transform: translateX(0);
}
20% {
transform: translateX(-8px);
}
40% {
transform: translateX(8px);
}
60% {
transform: translateX(-6px);
}
80% {
transform: translateX(6px);
}
100% {
transform: translateX(0);
}
}
.input-error.shake,
.error-message.shake {
animation: shake 0.35s;
will-change: transform;
}
.error-message.shake {
animation: shake 0.35s;
will-change: transform;
}
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0px 20px; }
.d-flex {
display: flex;
} .form-grid .full-width {
grid-column: 1 / 3;
} .alert {
opacity: 0;
transform: translateY(-6px);
max-height: 0;
overflow: hidden;
pointer-events: none;
font-size: 17px;
margin-top:24px;
transition:
opacity .35s ease,
transform .35s ease,
max-height .35s ease;
} .alert-show {
opacity: 1;
transform: translateY(0);
max-height: 160px; pointer-events: auto;
} .alert-success { background:#e6ffed; border:1px solid #b7f5c9; padding:12px; border-radius:8px; color:#007721; text-align: center;}
.alert-error   { background:#ffecec; border:1px solid #ffd0d0; padding:12px; border-radius:8px; }
button[disabled],
.btn-locked {
opacity: .5;
cursor: not-allowed !important;
} @keyframes shake {
10%, 90% { transform: translateX(-1px); }
20%, 80% { transform: translateX(2px); }
30%, 50%, 70% { transform: translateX(-4px); }
40%, 60% { transform: translateX(4px); }
}
.shake { animation: shake .35s; } @media (prefers-reduced-motion: reduce) {
.alert { transition: none; transform: none; }
.shake { animation: none; }
} @media (max-width: 700px) {
.form-grid {
grid-template-columns: 1fr;
gap: 18px 0;
}
.form-grid .full-width {
grid-column: 1;
}
} .form-grid label,
.form-grid input,
.form-grid select,
.form-grid textarea {
width: 100%;
box-sizing: border-box;
font-size: 16px;
font-family: 'Poppins';
}