/* ---- Theme ---- */ :root { --soft-rose: #F2D4DC; --wine-red: #A02D4E; --charcoal-gray: #2E2E2E; --ivory-white: #FDFBF9; --card-white: #FFFDFC; --border: #EED9DE; --focus: #8A1F3D; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } html, body { height: 100%; } body { margin: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); background: var(--ivory-white); color: var(--charcoal-gray); font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; line-height: 1.6; } /* ---- Container ---- */ .start-container { max-width: 760px; padding: 24px clamp(16px, 4vw, 28px); margin: 16px auto; background: var(--ivory-white); border: 1px solid var(--soft-rose); border-radius: 12px; box-shadow: 0 4px 12px rgba(160,45,78,0.04); } /* RTL-friendly alignment (works if ) */ body.rtl .start-container { direction: rtl; text-align: right; } /* ---- Top Nav ---- */ .top-nav { margin-bottom: 8px; text-align: left; } body.rtl .top-nav { text-align: right; } .back-link { text-decoration: none; font-size: 0.95rem; color: var(--wine-red); } .back-link:hover { text-decoration: underline; } /* ---- Heading / lead ---- */ .page-head { text-align: center; margin: 8px 0 18px; } .page-head h1 { color: var(--wine-red); font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.8rem); margin: 0 0 8px; } .lead { font-size: clamp(0.98rem, 0.92rem + .4vw, 1.08rem); margin: 0 auto 6px; max-width: 65ch; color: #333; } /* ---- Info card ---- */ .info-card { background: var(--card-white); border: 1px solid var(--border); border-radius: 10px; padding: clamp(16px, 3.6vw, 24px); margin-bottom: 24px; } .info-card h2 { margin: 0 0 12px 0; color: var(--wine-red); font-size: clamp(1.1rem, 0.95rem + .8vw, 1.4rem); text-align: left; } body.rtl .info-card h2 { text-align: right; } .info-card p, .info-card li { text-align: left; } body.rtl .info-card p, body.rtl .info-card li { text-align: right; } .info-card p { margin: 0 0 12px; } .eai-list { padding-left: 18px; margin: 0 0 14px 0; } body.rtl .eai-list { padding-left: 0; padding-right: 18px; } .eai-note { border-left: 4px solid var(--wine-red); padding-left: 12px; margin-top: 14px; text-align: left; } body.rtl .eai-note { border-left: none; border-right: 4px solid var(--wine-red); padding-left: 0; padding-right: 12px; text-align: right; } /* ---- Form ---- */ .start-form { display: grid; gap: 16px; } .form-group { display: grid; gap: 8px; } label, .legend, .label { font-weight: 700; font-size: 0.98rem; } label { display: inline-block; } input[type="number"], select { width: 100%; padding: 12px 12px; font-size: 1rem; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--charcoal-gray); } /* Better focus styles */ input[type="number"]:focus, select:focus, .start-btn:focus, .back-link:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px rgba(160,45,78,0.18); } /* Radios */ fieldset.form-group { border: 0; padding: 0; margin: 0; } .legend, .label { display: block; margin-bottom: 8px; } .radio-group { display: grid; gap: 8px; } .radio-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: #fff; } .radio-row input[type="radio"] { width: 22px; height: 22px; accent-color: var(--wine-red); } /* Button */ .start-btn { display: inline-block; width: 100%; padding: 14px 16px; background: var(--wine-red); color: #fff; border: none; font-size: 1.05rem; font-weight: 700; border-radius: 10px; cursor: pointer; transition: background .2s ease; } .start-btn:hover { background: #842240; } /* Error box */ .error-box { background: #fff; border: 1px solid var(--soft-rose); color: var(--charcoal-gray); padding: 12px 14px; border-radius: 8px; margin: 6px 0 18px; } /* ---- Responsive tweaks ---- */ @media (min-width: 700px) { /* Put interest radios in a row on wider screens */ .radio-group { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 520px) { .start-container { margin: 8px auto; padding: 18px clamp(12px, 4vw, 18px); border-radius: 10px; } .radio-row { padding: 12px; } .radio-row input[type="radio"] { width: 24px; height: 24px; } .start-btn { padding: 16px; border-radius: 12px; } } /* RTL */ body.rtl .radio-row { flex-direction: row-reverse; justify-content: flex-start; } body.rtl .back-link { unicode-bidi: plaintext; }