.newsletter-widget{background:rgba(0,20,0,0.9);border:1px solid var(--matrix-green,#00ff00);border-radius:4px;padding:1.5rem;margin-bottom:2rem;box-shadow:0 0 10px rgba(0,255,0,0.3);position:relative;overflow:hidden;transition:all var(--transition-duration,0.4s) var(--transition-timing,cubic-bezier(0.4,0,0.2,1));transform:translateZ(0);will-change:transform,opacity} .newsletter-widget .widget-title{color:#00ff00;font-family:'VT323',monospace;font-size:1.4rem;margin-bottom:0.5rem;text-transform:uppercase;letter-spacing:2px} .newsletter-description{color:#00cc00;font-size:0.9rem;margin-bottom:1.5rem;line-height:1.4} .newsletter-form{transition:all var(--transition-duration,0.4s) var(--transition-timing,cubic-bezier(0.4,0,0.2,1));position:relative} .newsletter-form.loading{opacity:0.7;pointer-events:none} .newsletter-form.loading::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.3);display:flex;align-items:center;justify-content:center;z-index:10} .form-group.loading .form-input,.form-group.loading .form-select{background:rgba(0,50,0,0.8);animation:pulse-loading 1.5s infinite} @keyframes pulse-loading{0%,100%{border-color:var(--dark-green,#008F11);box-shadow:0 0 5px rgba(0,143,17,0.3)} 50%{border-color:var(--matrix-green,#00ff00);box-shadow:0 0 10px rgba(0,255,0,0.5)} } .form-group{margin-bottom:1rem} .form-label{display:block;color:#00ff00;font-family:'VT323',monospace;font-size:1rem;margin-bottom:0.3rem;text-transform:uppercase;letter-spacing:1px} .form-input,.form-select{width:100%;padding:0.5rem;background:rgba(0,0,0,0.8);border:1px solid #00aa00;border-radius:2px;color:#00ff00;font-family:'VT323',monospace;font-size:1rem;transition:border-color 0.3s ease,box-shadow 0.3s ease} .form-input:focus,.form-select:focus{outline:none;border-color:#00ff00;box-shadow:0 0 5px rgba(0,255,0,0.5)} .form-input::placeholder{color:#006600;opacity:1} .form-select option{background:#000;color:#00ff00} .checkbox-group{display:flex;flex-direction:column;gap:0.5rem} .checkbox-label{display:flex;align-items:center;color:#00cc00;font-size:0.9rem;cursor:pointer;transition:color 0.3s ease} .checkbox-label:hover{color:#00ff00} .checkbox-label input[type="checkbox"]{margin-right:0.5rem;accent-color:#00ff00;transform:scale(1.1)} .consent-checkbox{margin-top:0.5rem;padding:0.5rem;background:rgba(0,50,0,0.3);border-radius:2px;border:1px solid #004400} .consent-checkbox input[type="checkbox"]{margin-right:0.8rem} .newsletter-submit{width:100%;padding:0.8rem;background:linear-gradient(45deg,#003300,#006600);border:1px solid #00ff00;border-radius:2px;color:#00ff00;font-family:'VT323',monospace;font-size:1.1rem;text-transform:uppercase;letter-spacing:2px;cursor:pointer;transition:all 0.3s ease;position:relative;overflow:hidden} .newsletter-submit:hover:not(:disabled){background:linear-gradient(45deg,#004400,#008800);box-shadow:0 0 15px rgba(0,255,0,0.4);transform:translateY(-1px)} .newsletter-submit:active{transform:translateY(0)} .newsletter-submit:disabled{opacity:0.6;cursor:not-allowed} .submit-loading{display:inline-block;animation:pulse 1.5s infinite} @keyframes pulse{0%,100%{opacity:1} 50%{opacity:0.5} } .newsletter-message{margin-top:1rem;padding:0.8rem;border-radius:2px;display:none;position:relative;overflow:hidden} .newsletter-message.show{display:block;animation:slideInMessage 0.4s var(--transition-timing,cubic-bezier(0.4,0,0.2,1))} .error-message{background:rgba(255,0,0,0.1);border:1px solid #ff0000;color:#ff6666;font-family:var(--font-family,'VT323',monospace);position:relative} .error-message::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#ff0000,transparent);animation:errorScan 2s linear infinite} .success-message{background:rgba(0,255,0,0.1);border:1px solid var(--matrix-green,#00ff00);color:var(--matrix-green,#00ff00);font-family:var(--font-family,'VT323',monospace)} .form-error{color:#ff6666;font-size:0.8rem;margin-top:0.3rem;display:none;font-family:var(--font-family,'VT323',monospace);animation:fadeInError 0.3s ease-in-out} .form-error.show{display:block} .form-group.has-error .form-input,.form-group.has-error .form-select{border-color:#ff0000;box-shadow:0 0 5px rgba(255,0,0,0.3);animation:shakeError 0.5s ease-in-out} @keyframes slideInMessage{from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} } @keyframes errorScan{0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} } @keyframes fadeInError{from{opacity:0;transform:translateY(-5px)} to{opacity:1;transform:translateY(0)} } @keyframes shakeError{0%,100%{transform:translateX(0)} 25%{transform:translateX(-3px)} 75%{transform:translateX(3px)} } .newsletter-success{background:rgba(0,100,0,0.2);border:1px solid var(--matrix-green,#00ff00);border-radius:4px;padding:1.5rem;text-align:center;position:relative;overflow:hidden;animation:slideInSuccess 0.6s var(--transition-timing,cubic-bezier(0.4,0,0.2,1));transform:translateZ(0)} .newsletter-success::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(0,255,0,0.2),transparent);animation:successSweep 2s ease-in-out} .newsletter-success h4{color:var(--matrix-green,#00ff00);font-family:var(--font-family,'VT323',monospace);font-size:1.3rem;margin-bottom:0.5rem;text-transform:uppercase;letter-spacing:2px;animation:successPulse 2s ease-in-out infinite} .newsletter-success p{color:var(--dark-green,#00cc00);font-size:0.9rem;line-height:1.4;margin:0;animation:fadeInUp 0.8s 0.3s both} @keyframes slideInSuccess{from{opacity:0;transform:translateY(20px) scale(0.95)} to{opacity:1;transform:translateY(0) scale(1)} } @keyframes successSweep{0%{left:-100%} 50%{left:100%} 100%{left:100%} } @keyframes successPulse{0%,100%{text-shadow:0 0 5px var(--matrix-green,#00ff00)} 50%{text-shadow:0 0 15px var(--matrix-green,#00ff00),0 0 25px var(--matrix-green,#00ff00)} } @keyframes fadeInUp{from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} } @media (max-width:1200px){.newsletter-widget{padding:1.25rem} .checkbox-group{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem} } @media (max-width:768px){.newsletter-widget{padding:1rem;margin-bottom:1.5rem} .newsletter-widget .widget-title{font-size:1.2rem} .form-input,.form-select,.newsletter-submit{font-size:0.9rem;padding:0.6rem} .checkbox-group{display:flex;flex-direction:column;gap:0.4rem} .checkbox-label{font-size:0.85rem} .consent-checkbox{padding:0.6rem} } @media (max-width:480px){.newsletter-widget{padding:0.75rem;margin-bottom:1rem} .newsletter-widget .widget-title{font-size:1.1rem;letter-spacing:1px} .newsletter-description{font-size:0.85rem;margin-bottom:1rem} .form-input,.form-select,.newsletter-submit{font-size:0.85rem;padding:0.7rem} .checkbox-label{font-size:0.8rem} .consent-checkbox{padding:0.5rem;font-size:0.75rem} } @media (orientation:landscape) and (max-height:600px){.newsletter-widget{padding:1rem;margin-bottom:1rem} .checkbox-group{display:grid;grid-template-columns:1fr 1fr;gap:0.3rem} .newsletter-description{margin-bottom:1rem} } @media (min-width:1600px){.newsletter-widget{max-width:400px;padding:2rem} .checkbox-group{display:grid;grid-template-columns:1fr 1fr;gap:0.6rem} } .newsletter-widget::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#00ff00,transparent);animation:scan 3s linear infinite} @keyframes scan{0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} } .newsletter-widget{position:relative;overflow:hidden} .form-group.has-error .form-label{animation:glitch 0.3s ease-in-out} @keyframes glitch{0%,100%{transform:translateX(0)} 20%{transform:translateX(-2px)} 40%{transform:translateX(2px)} 60%{transform:translateX(-1px)} 80%{transform:translateX(1px)} } .form-input:focus,.form-select:focus,.newsletter-submit:focus,.checkbox-label input:focus{outline:2px solid var(--matrix-green,#00ff00);outline-offset:2px} @media (prefers-contrast:high){.newsletter-widget{border-width:2px;background:rgba(0,0,0,0.95)} .form-input,.form-select{border-width:2px;background:rgba(0,0,0,0.9)} .newsletter-widget .widget-title,.form-label{text-shadow:none;font-weight:bold} } @media (prefers-reduced-motion:reduce){.newsletter-widget,.newsletter-form,.form-input,.form-select,.newsletter-submit,.newsletter-message,.newsletter-success{transition:none;animation:none} .newsletter-widget::before,.newsletter-success::before,.error-message::before{animation:none} .form-group.has-error .form-input,.form-group.has-error .form-select{animation:none} } .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} @media (pointer:coarse){.form-input,.form-select,.newsletter-submit,.checkbox-label{min-height:44px;min-width:44px} .checkbox-label input[type="checkbox"]{transform:scale(1.3);margin-right:1rem} } .form-group.has-error .form-input,.form-group.has-error .form-select{border-style:dashed} .error-message::after{content:'⚠️';margin-right:0.5rem} .newsletter-success h4::before{content:'✅';margin-right:0.5rem} .newsletter-submit:focus-visible{box-shadow:0 0 0 3px rgba(0,255,0,0.3),0 0 15px var(--matrix-green,#00ff00)} .checkbox-label:focus-within{background:rgba(0,255,0,0.1);border-radius:2px} @media print{.newsletter-widget{background:white;color:black;border:1px solid black;box-shadow:none} .newsletter-widget::before,.newsletter-success::before,.error-message::before{display:none} .form-input,.form-select{background:white;color:black;border:1px solid black} } @media (prefers-color-scheme:dark){.newsletter-widget{background:rgba(0,20,0,0.95)} } @media (prefers-color-scheme:light){.newsletter-widget{background:rgba(240,255,240,0.95);color:#003300;border-color:#006600} .form-input,.form-select{background:rgba(255,255,255,0.9);color:#003300;border-color:#006600} .newsletter-widget .widget-title,.form-label{color:#003300} .newsletter-description{color:#004400} }