form.classic-form {background-color:#fff;padding:2em;border:3px solid #f00;margin-block:2em;font-size:30px;position:relative;z-index:0;}
form.classic-form.load::after {content:'';position:absolute;inset:0;background-color:transparent;}
form.classic-form fieldset {border:none;container:fields /inline-size;}
form.classic-form fieldset+fieldset {margin-top:3.5em;}
form.classic-form fieldset>legend {border-bottom:3px solid red;margin-bottom:2rem;font-weight:bold;padding-bottom:.5rem;}
form.classic-form input,
form.classic-form textarea,
form.classic-form select,
form.classic-form button {font:normal 100% "Roboto", sans-serif;}
form.classic-form input[type="text"],
form.classic-form input[type="email"],
form.classic-form input[type="tel"],
form.classic-form input[type="password"],
textarea {border:1px solid #707070;padding:15px 30px;outline:none;box-sizing:border-box;width:100%;}
textarea {resize:vertical;height:150px;}
label.field {border:1px solid #707070;background-color:#fff;}
label.field>input,
label.field>textarea {border:none;}
label.field:focus-within {border-color:#000;}
label.field:focus-within>input,
label.field:focus-within>textarea {box-shadow:0 0 0 2px rgba(0, 0, 0, 0.07) inset}

form.classic-form div.fields {display:grid;gap:2rem;grid-template-columns:repeat(2, 1fr);}
form.classic-form div.fields.items1 {grid-template-columns:auto}
form.classic-form div.fields.items4 {grid-template-columns:repeat(4, 1fr)}

form.classic-form div.entries {display:flex;gap:2rem;align-items:center;flex-wrap:wrap;}
form.classic-form div.entries>* {flex:0 0 auto;}
form.classic-form div+div {margin-top:1em;}
form.classic-form div.upload {display:flex;gap:1em;}
form.classic-form div.upload>.input {max-width:600px;flex:1 1 auto;display:grid;grid-template-columns:1fr auto;gap:5px;border:1px solid #707070;align-items:center;;padding:5px;}
form.classic-form div.upload>.input button {cursor:pointer;color:red;border:none;width:50px;aspect-ratio:1;background-color:transparent}
form.classic-form div.upload>.input button:not(.show) {visibility:hidden;}
form.classic-form div.upload>.input button:active {color:#930000}
form.classic-form div.upload input[type="text"] {cursor:default;border:none;padding-right:0;}
form.classic-form label.upload {position:relative;z-index:0;cursor:pointer;display:grid;align-items:center;font-weight:bold;font-size:49px;color:#fff;background-color:#606060;padding:2px .5em;text-transform:uppercase;overflow:hidden;transition:background-color .1s;}
form.classic-form label.upload:focus-within {background-color:#000;}
form.classic-form label.upload input[type="file"] {opacity:0;position:absolute;left:100%;right:100%;}

form.classic-form .submit {margin-top:3.5em;}
form.classic-form button[type="submit"] {padding:.3em .5em;cursor:pointer;outline:none;background-color:#f00;border:2px solid #f00;color:#fff;font-size:49px;font-weight:bold;text-transform:uppercase;position:relative;z-index:0;}
form.classic-form button[type="submit"] svg {animation:rotate 1.5s linear infinite;width:50px;aspect-ratio:1;margin:auto;position:absolute;inset:0;}
form.classic-form button[type="submit"] svg  .path {stroke:#fff;stroke-linecap: round;-webkit-animation: dash 1.2s ease-in-out infinite;animation: dash 1.2s ease-in-out infinite;}
form.classic-form.load button[type="submit"]:has(svg) {color:transparent;}
form.classic-form:not(.load) button[type="submit"] svg {display:none;}
@keyframes rotate { 100% {transform: rotate(360deg);} }
@keyframes dash { 0% {stroke-dasharray: 1, 150;stroke-dashoffset: 0;} 50% {stroke-dasharray: 90, 150;stroke-dashoffset: -35;} 100% {stroke-dasharray: 90, 150;stroke-dashoffset: -124;} }
label.checkbox,
label.radio {display:flex;gap:5px;align-items:center;line-height:1;cursor:pointer;}
label.checkbox>[type="checkbox"],
label.radio>[type="radio"] {appearance:none;cursor:pointer;display:inline-block;position:relative;z-index:0;box-sizing:border-box;vertical-align:middle;border:1px solid #707070;width:30px;aspect-ratio:1;background-color: #fff;}
label.checkbox>[type="checkbox"]:checked,
label.radio>[type="radio"]:checked {background-color:#f00;border-color:#930000;}
label.checkbox>[type="checkbox"]:checked::before {content:'';position:absolute;inset:0;background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik0zODItMjA4IDEyMi00NjhsOTAtOTAgMTcwIDE3MCAzNjYtMzY2IDkwIDkwLTQ1NiA0NTZaIiBmaWxsPSIjZmZmIi8+PC9zdmc+') no-repeat center/cover;}
label.radio>[type="radio"]:checked::before {content:'';position:absolute;inset:0;width:50%;aspect-ratio:1;margin:auto;background-color:#fff;}


.field[data-placeholder] {display:block;position:relative;z-index:11;transition:border-color 0.3s;box-sizing:border-box;}
.field[data-placeholder].err {border-color:#ee0909;}
.field[data-placeholder] input,
.field[data-placeholder] textarea {padding:25px 30px 10px !important;color:#606060;}
.field[data-placeholder] input:disabled,
.field[data-placeholder] textarea:disabled {background-color:#f2f2f2;color:#d4d4d4;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;}
.field[data-placeholder] ::placeholder {opacity:0;}
.field[data-placeholder]::after {transition:all .1s;content:attr(data-placeholder);position:absolute;top:0;left:30px;bottom:0;margin:auto 0;color:#959595;pointer-events:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;height:max-content}
.field[data-placeholder].required::after {content:attr(data-placeholder)" *"}
.field[data-placeholder]:has(textarea)::after {height:auto;margin-top:0;top:28px;}
.field[data-placeholder].on {z-index:11;}
.field[data-placeholder].on::after {transform:translateY(-21px);font-size:14px;color:#2f2f2f;}
.field[data-placeholder].on.err::after {color:#ee0909;}
.field[data-placeholder].disabled::after {color:#cfcfcf;}
.field[data-placeholder].disabled:not(.on)::after {background-color:transparent;}

@container fields (width < 1150px) {
    form.classic-form div.fields.items4 {grid-template-columns:repeat(2, 1fr);}
}
@container fields (width < 900px) {
    form.classic-form div.fields {grid-template-columns:auto;}
}

@container fields (width < 768px) {
    form.classic-form div.fields,
    form.classic-form div.fields.items4 {grid-template-columns:auto;gap:1rem;}
}

@media screen and (max-width:1024px){
    form.classic-form {padding:1em;}
}
@media screen and (max-width:768px){
    form.classic-form {padding:2em 20px;margin-inline:-10px;font-size:20px;border-inline-width:0;}
    form.classic-form fieldset>legend {margin-bottom:1.5rem;}
    form.classic-form div.upload>.input button {width:auto;}
    form.classic-form label.upload {font-size:25px;}
    form.classic-form div.upload {gap:0;}
    form.classic-form button[type="submit"] {width:100%;border-radius:4px;}
}