{} *{} #IE-warning { display: none; position: fixed; width: 100%; height: 100%; z-index: 9999; background: white; } .IE-warning-message { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; } :root { --brand-primary: #F26430; --brand-white: #FFFFFF; --brand-deep-orange: #E8571C; --brand-light-orange: #FF7F50; } .brand-primary { background-color: var(--brand-primary); } .brand-primary-text { color: var(--brand-primary); } .brand-primary-border { border-color: var(--brand-primary); } .brand-primary-hover:hover { background-color: var(--brand-deep-orange); } .progress-fill { background: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-light-orange) 100%); transition: width 0.3s ease; } .quiz-card { animation: slideIn 0.4s ease; } @keyframes slideIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .option-btn { transition: all 0.3s ease; border: 2px solid #e5e7eb; } .option-btn:hover { border-color: var(--brand-primary); background-color: #fff5f0; } .option-btn.selected { background-color: var(--brand-primary); color: white; border-color: var(--brand-primary); } .multi-select-btn { transition: all 0.3s ease; border: 2px solid #e5e7eb; padding: 0.75rem 1rem; border-radius: 0.5rem; cursor: pointer; } .multi-select-btn:hover { border-color: var(--brand-primary); background-color: #fff5f0; } .multi-select-btn.selected { background-color: var(--brand-primary); color: white; border-color: var(--brand-primary); } .checkbox-custom { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border: 2px solid #d1d5db; border-radius: 4px; cursor: pointer; display: inline-block; position: relative; background-color: white; } .checkbox-custom:checked { background-color: var(--brand-primary); border-color: var(--brand-primary); } .checkbox-custom:checked::after { content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-weight: bold; font-size: 14px; } .result-badge { background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-deep-orange) 100%); padding: 2rem; border-radius: 1rem; color: white; text-align: center; } .cta-primary { background-color: var(--brand-primary); color: white; transition: all 0.3s ease; } .cta-primary:hover { background-color: var(--brand-deep-orange); transform: translateY(-2px); box-shadow: 0 10px 25px rgba(242, 100, 48, 0.3); } .cta-secondary { border: 2px solid var(--brand-primary); color: var(--brand-primary); background-color: transparent; transition: all 0.3s ease; } .cta-secondary:hover { background-color: var(--brand-primary); color: white; }