:root { --primary-color: #ea580c; --secondary-color: #ee6e01; --background-color: #fff7ed; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, sans-serif; } body { font-family: Arial, sans-serif; margin: 0 auto; padding: 20px; line-height: 1.6; background-color: var(--background-color); flex: 1; margin-bottom: 20px; } html, body { padding-top: 60px; /* Matches header height */ height: 100%; margin: 0; display: flex; flex-direction: column; } h2 { text-align: center; color: var(--primary-color); } .service-section { border: 2px solid #ddd; border-radius: 8px; padding: 15px; margin-bottom: 15px; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; background-color: white; } .service-section:hover { background-color: #f5f5f5; } .service-section.selected { border-color: var(--primary-color); background-color: #fde68a; } .selection-point { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #ddd; margin-right: 15px; display: flex; justify-content: center; align-items: center; flex-shrink: 0; } .service-section.selected .selection-point { background-color: var(--primary-color); border-color: var(--primary-color); position: relative; box-shadow: 0 0 0 2px white inset; } #continue-button { display: none; width: 100%; padding: 10px; background-color: var(--secondary-color); color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; } #continue-button:hover { background-color: var(--primary-color); } #continue-button:disabled { background-color: #6c757d; cursor: not-allowed; } footer { width: 100%; }