#form-newsletter{--loungeup-bg:transparent;--loungeup-text:#111;--loungeup-border:#ddd;--loungeup-primary:#000;--loungeup-primary-dark:#000;background:var(--loungeup-bg);border:1px solid var(--loungeup-border);width:clamp(310px,35vw,680px);font-family:var(--first-font,system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji");border-radius:0;margin:24px auto;padding:20px 20px 24px;& input,& button{font-family:inherit}& form{grid-template-columns:1fr;gap:12px;display:grid}& #form-header-title{color:var(--loungeup-text);margin:0 0 8px;font-size:1.35rem;font-weight:600}& label{color:var(--loungeup-text);font-weight:500}& span{flex-direction:row;align-items:center;gap:8px;display:flex;& #form-mandatory{color:#d32f2f;font-size:.95rem;font-weight:700}}& input[sb-form-input]:not([type=radio]){border:1px solid var(--loungeup-border);width:100%;color:var(--loungeup-text);background-color:#fff;border-radius:10px;outline:none;padding:10px 12px;font-size:1rem;transition:border-color .16s,box-shadow .16s;&:focus{border-color:var(--loungeup-primary);box-shadow:0 0 0 3px #1976d226}}& #div-CIVILITY_ID{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid;& .input-container{align-items:center;gap:8px;display:inline-flex}& .control--radio{cursor:pointer;align-items:center;gap:8px;display:inline-flex;& input[type=radio]{opacity:0;white-space:nowrap;z-index:10;border:0;width:20px;height:20px;margin:-1px;padding:0;position:absolute;overflow:hidden}& .control__indicator{border:2px solid var(--loungeup-primary);background:#fff;border-radius:50%;justify-content:center;align-items:center;width:18px;height:18px;transition:border-color .16s;display:inline-flex;position:relative;&:after{content:"";background:var(--loungeup-primary);border-radius:50%;width:10px;height:10px;transition:transform .12s;display:block;transform:scale(0)}}& input[type=radio]:checked+.control__indicator:after{transform:scale(1)}}}& .date{align-items:center;gap:8px;display:inline-flex;& input[type=number]{text-align:center;padding:10px 8px}& input[name=day],& input[name=month]{width:64px}& input[name=year]{width:96px}}& #div-submitInput{align-items:center;gap:12px;margin-top:8px;display:flex;& button{appearance:none;background:var(--loungeup-primary);color:#fff;text-align:center;cursor:pointer;border:none;border-radius:10px;padding:10px 18px;font-size:1rem;font-weight:600;transition:background .16s,transform 80ms;&:hover{background:var(--loungeup-primary-dark)}&:active{transform:translateY(1px)}&.mobile-full-width{width:min(150px,100%)}}& .loader{border:3px solid #90caf9;border-top-color:#0d47a1;border-radius:50%;width:20px;height:20px;animation:.9s linear infinite spin;display:none}}& .message-submit{background:#f6f8fa;border:1px solid #eaeef2;border-radius:10px;margin-top:12px;padding:12px 14px;&.success{background:#e8f5e9;border-color:#81c784}&.fail{background:#ffebee;border-color:#e57373}&.exists{background:#fff8e1;border-color:#ffb74d}& h3{color:var(--loungeup-text);margin:0;font-size:1rem}}}#form-newsletter .control--radio input[type=radio]:checked+.control__indicator:after{transform:scale(1)}@keyframes spin{to{transform:rotate(1turn)}}