.custom-form-container { font-family: var(--wp--preset--font-family--system-sans-serif); max-width: 600px; margin: 0 auto; padding: 20px; border: 1px solid #ddd; border-radius: 5px; background-color: #f9f9f9; margin-bottom: 20px; text-align: left; } .custom-form-container h2 { font-size: 24px; font-weight: bold; margin-bottom: 10px; } .custom-form-container h3 { font-size: 16px; font-weight: 500; margin-bottom: 20px; } .custom-form label { display: inline-block; font-size: 14px; font-weight: normal; margin-bottom: 5px; text-align: left; width: 100%; font-family: var(--wp--preset--font-family--system-sans-serif); } .custom-form input[type="text"], .custom-form input[type="email"], .custom-form textarea { width: calc(100% - 20px); padding: 10px; margin-bottom: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px; touch-action: manipulation; font-family: var(--wp--preset--font-family--system-sans-serif); box-sizing: border-box; } .custom-form textarea { width: calc(100% - 20px); height: 100px; } .custom-form input[type="text"]:focus, .custom-form input[type="email"]:focus, .custom-form textarea:focus { border-color: #007cba; } .custom-form button.custom-form-submit { display: inline-block; width: 100%; padding: 15px; font-size: 14px; color: #fff; background-color: var(--wp--preset--color--custom-cor-1, #28a745); border: none; border-radius: 5px; cursor: pointer; text-align: center; transition: opacity 0.3s ease; font-family: var(--wp--preset--font-family--system-sans-serif); position: relative; } .custom-form button.custom-form-submit:hover { background-color: var(--wp--preset--color--custom-cor-2, #218838); } .custom-form button.custom-form-submit[disabled] { opacity: 0.5; cursor: not-allowed; background-color: var(--wp--preset--color--custom-cor-1, #28a745); } .spinner { border: 4px solid rgba(0, 0, 0, 0.1); border-left-color: #fff; border-radius: 50%; width: 20px; height: 20px; animation: spin 1s linear infinite; display: inline-block; position: absolute; left: calc(50% - 10px); top: calc(50% - 10px); } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .custom-checkbox { margin-bottom: 20px; font-family: var(--wp--preset--font-family--system-sans-serif); } .custom-checkbox input { margin-right: 10px; } .custom-checkbox span { font-weight: normal; } .completion-text { font-size: 16px; color: green; text-align: center; margin-top: 20px; font-family: var(--wp--preset--font-family--system-sans-serif); } .disclaimer { font-size: 10px; color: #666; text-align: left; margin-top: 30px; margin-bottom: 20px; font-family: var(--wp--preset--font-family--system-sans-serif); } .skip-recommendation { display: block; text-align: center; margin-top: 15px; font-size: 12px; color: #666; text-decoration: none; font-family: var(--wp--preset--font-family--system-sans-serif); } .skip-recommendation:hover { text-decoration: underline; } .custom-form-container h2, .custom-form-container h3 { text-align: center; } .quiz-container { font-family: var(--wp--preset--font-family--system-sans-serif); max-width: 400px; margin: 0 auto; padding: 20px; border: 1px solid #ddd; border-radius: 5px; background-color: #f9f9f9; margin-bottom: 20px; text-align: center; } .quiz-answer { display: block; width: 100%; padding: 10px; margin-bottom: 10px; font-size: 18px; color: #fff; background-color: var(--wp--preset--color--contrast-2); border: none; border-radius: 5px; cursor: pointer; text-align: center; font-family: var(--wp--preset--font-family--system-sans-serif); transition: background-color 0.3s ease; } .quiz-answer:hover { background-color: var(--wp--preset--color--custom-cor-2, #d4b1a2); }