/* ==========================================================================
   /online/assets/online.css
   Styles for the online legal service wizard. Self contained (so the pages also
   look right without the main stylesheet) and following the site palette:
   navy #0b4a78 / #0f172a, gold #d4af37, green #15803d.

   NOTE: this file is loaded after the site's /style.css, which contains global
   rules (a * reset, p { text-align: justify }, .container, ...). The rules below
   therefore re-establish the typography inside .on-wrap so the wizard always
   looks the same.
   ========================================================================== */

body { background: #f4f7f9; }

.on-wrap { max-width: 900px; margin: 26px auto 60px; padding: 0 16px; box-sizing: border-box; }
.on-wrap * { box-sizing: border-box; }

/* neutralise the site's global typography inside the wizard */
.on-wrap p, .on-wrap .on-card p { text-align: left; margin: 0 0 12px; line-height: 1.6; font-size: .95rem; }
.on-wrap[dir="rtl"] p, .on-wrap[dir="rtl"] .on-card p { text-align: right; }
.on-wrap h1, .on-wrap h2, .on-wrap h3, .on-wrap h4 { margin-top: 0; line-height: 1.3; }
.on-wrap ul, .on-wrap ol { margin: 0 0 14px; padding-left: 22px; }
.on-wrap[dir="rtl"] ul, .on-wrap[dir="rtl"] ol { padding-left: 0; padding-right: 22px; }
.on-wrap li { line-height: 1.6; }
.on-wrap table { border-collapse: collapse; width: 100%; }
.on-wrap a { text-decoration: none; }

.on-card { background: #fff; border-radius: 14px; padding: 26px 28px; box-shadow: 0 8px 26px rgba(15,23,42,.07); border-top: 5px solid #d4af37; margin-bottom: 20px; }
.on-card h1 { color: #0b4a78; font-size: 1.5rem; margin: 0 0 6px; line-height: 1.25; }
.on-card h2 { color: #0b4a78; font-size: 1.2rem; margin: 0 0 10px; }
.on-card h3 { color: #0f172a; font-size: 1.02rem; margin: 22px 0 8px; }
.on-card p.sub { color: #64748b; font-size: .93rem; margin: 0 0 18px; }
.on-muted { color: #64748b; font-size: .85rem; }

/* ---- steps ---- */
.on-steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; }
.on-steps li { font-size: .78rem; color: #64748b; background: #f1f5f9; border-radius: 20px; padding: 6px 13px; }
.on-steps li.active { background: #0b4a78; color: #fff; font-weight: bold; }
.on-steps li.done { background: #dcfce7; color: #166534; }
/* the optional services (the lawyer review of a Finnish draft) - another colour */
.on-steps li.optional { background: #f5f3ff; color: #6d28d9; border: 1px dashed #a78bfa; font-weight: bold; }

/* ---- the page title bar at the top of every online page ----
   Only the title of the service: "Verkkopalvelu / Onlinetjänst / Online Service" */
.on-hero { background: linear-gradient(135deg, #0b4a78, #123f61); color: #fff; border-radius: 14px; padding: 16px 20px; margin: 0 0 16px; box-shadow: 0 6px 18px rgba(11,74,120,.18); text-align: center; }
.on-hero-multi { margin: 0; font-size: 1.3rem; line-height: 1.35; font-weight: bold; color: #fff; letter-spacing: .2px; }
@media (max-width: 520px) { .on-hero-multi { font-size: 1.08rem; } }

/* ---- the document language question (the first question of the wizard) ---- */
.on-ask-box .on-label { color: #0b4a78; font-size: .95rem; }
.on-ask-box h3 { margin-top: 0; }

/* ---- the three service group buttons (Finnish / Swedish / foreign) ---- */
.on-groups { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0 0 18px; }
@media (min-width: 720px) { .on-groups { grid-template-columns: repeat(3, 1fr); } }
.on-group-btn { display: flex; gap: 10px; align-items: center; text-decoration: none; color: #0f172a; background: #f8fafc; border: 2px solid #e2e8f0; border-radius: 12px; padding: 11px 14px; transition: all .18s ease; }
.on-group-btn:hover { border-color: #0b4a78; background: #eff6ff; transform: translateY(-1px); }
.on-group-btn .flag { font-size: 1.5rem; line-height: 1; }
.on-group-btn .txt { display: flex; flex-direction: column; }
.on-group-btn .txt strong { font-size: .95rem; }
.on-group-btn .txt small { color: #64748b; font-size: .76rem; }
.on-group-btn.active { border-color: #15803d; background: #f0fdf4; box-shadow: inset 0 0 0 2px rgba(21,128,61,.15); }
.on-group-btn.active .txt strong { color: #166534; }

/* ---- service chooser ---- */
.on-service-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 18px 0 6px; }
@media (min-width: 760px) { .on-service-grid { grid-template-columns: 1fr 1fr; } }
.on-service { display: block; text-decoration: none; color: inherit; border: 2px solid #e2e8f0; border-radius: 12px; padding: 16px 18px; transition: all .18s ease; background: #fff; position: relative; }
/* The cards are links: without this a drag would start dragging the link and the
   client could not select and copy the text of the box. */
.on-service, .on-service * { -webkit-user-drag: none; user-drag: none; user-select: text; -webkit-user-select: text; }
.on-service:hover { border-color: #0b4a78; box-shadow: 0 8px 20px rgba(11,74,120,.12); transform: translateY(-2px); }
.on-service.selected { border-color: #15803d; background: #f0fdf4; }
.on-service .srv-title { font-weight: bold; color: #0f172a; font-size: 1rem; display: block; margin-bottom: 6px; padding-right: 78px; }
.on-service .srv-desc { color: #475569; font-size: .88rem; line-height: 1.5; }
/* the bold services line under the title (what the box covers, comma-separated) */
.on-service .srv-sub { display: block; font-weight: 700; color: #0f172a; font-size: .82rem; line-height: 1.45; margin: 0 0 7px; }
/* the short note under the description: who delivers the result */
.on-service .srv-note { display: block; color: #64748b; font-size: .8rem; font-style: italic; line-height: 1.45; margin: 5px 0 0; }
/* the mark of the box: system review / lawyer review */
.on-service .srv-mode { display: inline-block; margin-top: 10px; font-size: .7rem; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; border-radius: 20px; padding: 3px 10px; }
.on-service .srv-mode i { margin-right: 4px; }
.on-service .srv-mode-system { background: #eef2ff; color: #3730a3; border: 1px solid #c7d2fe; }
.on-service .srv-mode-lawyer { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.on-service .srv-fee { position: absolute; top: 14px; right: 14px; background: #0b4a78; color: #fff; border-radius: 20px; padding: 4px 12px; font-size: .85rem; font-weight: bold; }
/* a free service: a light green card and the dark green FREE pill instead of a price */
.on-service .srv-fee.srv-free { background: #14532d; color: #fff; letter-spacing: .6px; text-transform: uppercase; padding: 5px 14px; box-shadow: 0 3px 10px rgba(20,83,45,.35); }
.on-service.is-free { background: #f0fdf4; border-color: #86efac; }
/* box 1: the document assessment box - light red */
.on-service.is-assessment { background: #fef2f2; border-color: #fca5a5; }
.on-service.is-assessment:hover { background: #fee2e2; border-color: #b91c1c; }
.on-service.is-assessment .srv-title { color: #7f1d1d; }
.on-service.is-assessment .srv-fee { background: #b91c1c; }
/* box 2: the appeal draft box - light green */
.on-service.is-appeal { background: #f0fdf4; border-color: #86efac; }
.on-service.is-appeal:hover { background: #dcfce7; border-color: #15803d; }
.on-service.is-appeal .srv-title { color: #14532d; }
.on-service.is-appeal .srv-fee { background: #15803d; }
/* box 2: the legal summary of a Migri decision - light orange */
.on-service.is-migri-summary { background: #fff7ed; border-color: #fdba74; }
.on-service.is-migri-summary:hover { background: #ffedd5; border-color: #ea580c; }
.on-service.is-migri-summary .srv-title { color: #7c2d12; }
.on-service.is-migri-summary .srv-fee { background: #ea580c; }
/* box 3 of every group: the handover to the lawyer - light blue */
.on-service.is-handover { background: #eff6ff; border-color: #93c5fd; }
.on-service.is-handover:hover { background: #dbeafe; border-color: #1d4ed8; }
.on-service.is-handover .srv-title { color: #1e3a8a; }
.on-service.is-handover .srv-fee { background: #1d4ed8; }
.on-service.is-handover .srv-num { color: #1e3a8a; }
/* box 4 of every group: the appeal draft the lawyer writes - light yellow */
.on-service.is-appeal-draft { background: #fefce8; border-color: #fde047; }
.on-service.is-appeal-draft:hover { background: #fef9c3; border-color: #ca8a04; }
.on-service.is-appeal-draft .srv-title { color: #713f12; }
.on-service.is-appeal-draft .srv-fee { background: #ca8a04; }
.on-service.is-appeal-draft .srv-num { color: #713f12; }
/* the drafting boxes 5-10: one light colour each, a little darker on hover */
/* box 5 - family matters: light rose */
.on-service.is-box5 { background: #fff1f2; border-color: #fecdd3; }
.on-service.is-box5:hover { background: #ffe4e6; border-color: #e11d48; }
.on-service.is-box5 .srv-title { color: #881337; }
.on-service.is-box5 .srv-fee { background: #be123c; }
.on-service.is-box5 .srv-num { color: #881337; }
/* box 6 - business documents: light teal */
.on-service.is-box6 { background: #f0fdfa; border-color: #99f6e4; }
.on-service.is-box6:hover { background: #ccfbf1; border-color: #0d9488; }
.on-service.is-box6 .srv-title { color: #134e4a; }
.on-service.is-box6 .srv-fee { background: #0f766e; }
.on-service.is-box6 .srv-num { color: #134e4a; }
/* box 7 - jobs and service: light violet */
.on-service.is-box7 { background: #f5f3ff; border-color: #ddd6fe; }
.on-service.is-box7:hover { background: #ede9fe; border-color: #6d28d9; }
.on-service.is-box7 .srv-title { color: #4c1d95; }
.on-service.is-box7 .srv-fee { background: #6d28d9; }
.on-service.is-box7 .srv-num { color: #4c1d95; }
/* box 8 - immigration documents: light cyan */
.on-service.is-box8 { background: #ecfeff; border-color: #a5f3fc; }
.on-service.is-box8:hover { background: #cffafe; border-color: #0e7490; }
.on-service.is-box8 .srv-title { color: #164e63; }
.on-service.is-box8 .srv-fee { background: #0e7490; }
.on-service.is-box8 .srv-num { color: #164e63; }
/* box 9 - property and housing: light lime */
.on-service.is-box9 { background: #f7fee7; border-color: #d9f99d; }
.on-service.is-box9:hover { background: #ecfccb; border-color: #65a30d; }
.on-service.is-box9 .srv-title { color: #3f6212; }
.on-service.is-box9 .srv-fee { background: #4d7c0f; }
.on-service.is-box9 .srv-num { color: #3f6212; }
/* box 10 - finance and debt: light fuchsia */
.on-service.is-box10 { background: #fdf4ff; border-color: #f5d0fe; }
.on-service.is-box10:hover { background: #fae8ff; border-color: #a21caf; }
.on-service.is-box10 .srv-title { color: #701a75; }
.on-service.is-box10 .srv-fee { background: #a21caf; }
.on-service.is-box10 .srv-num { color: #701a75; }
/* box 11 - the legal document review: light indigo */
.on-service.is-box11 { background: #eef2ff; border-color: #c7d2fe; }
.on-service.is-box11:hover { background: #e0e7ff; border-color: #4338ca; }
.on-service.is-box11 .srv-title { color: #3730a3; }
.on-service.is-box11 .srv-fee { background: #4338ca; }
.on-service.is-box11 .srv-num { color: #3730a3; }
/* box 12 - the PR / citizenship eligibility check: light emerald */
.on-service.is-box12 { background: #ecfdf5; border-color: #a7f3d0; }
.on-service.is-box12:hover { background: #d1fae5; border-color: #047857; }
.on-service.is-box12 .srv-title { color: #065f46; }
.on-service.is-box12 .srv-fee { background: #047857; }
.on-service.is-box12 .srv-num { color: #065f46; }
.on-service.is-free:hover { background: #dcfce7; border-color: #15803d; }
.on-service .srv-icon { color: #d4af37; margin-right: 7px; }
.on-service .srv-num { display: inline-block; min-width: 22px; color: #0b4a78; font-weight: bold; }
.on-service.is-free .srv-num { color: #14532d; }

/* ---- service group tabs (foreign clients / Finnish clients) ---- */
.on-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 18px; }
.on-tab { background: #f1f5f9; border: 0; border-bottom: 3px solid transparent; color: #334155; cursor: pointer;
    font-size: .95rem; font-weight: 700; padding: 12px 20px; border-radius: 10px 10px 0 0; font-family: inherit; }
.on-tab i { margin-right: 7px; color: #0b4a78; }
.on-tab:hover { background: #e2e8f0; }
.on-tab.active { background: #ffffff; border-bottom-color: #d4af37; color: #0b4a78; box-shadow: 0 -3px 10px rgba(15,23,42,.06); }
/* ---- Migri application helper ---- */
.on-ask-box { border: 2px solid #0b4a78; border-radius: 12px; padding: 16px 16px 8px; margin: 6px 0 18px; background: #f8fafc; }
.on-ask-box h3 { margin-top: 0; }
.on-card-inner { border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px; margin: 8px 0 18px; background: #fff; }
.on-answer { border: 1px solid #cbd5e1; border-left: 4px solid #0b4a78; border-radius: 10px; padding: 14px 14px 10px; margin: 0 0 16px; background: #fff; }
.on-answer-field { font-weight: 700; color: #0b4a78; font-size: .92rem; margin-bottom: 4px; }
.on-answer-q { color: #475569; font-size: .86rem; margin-bottom: 8px; }
.on-answer-text { font-family: 'Times New Roman', Georgia, serif !important; font-size: 15px !important; line-height: 1.6 !important; width: 100%; }
.on-answer-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0 6px; }
.on-answer-note { font-size: .86rem; color: #334155; background: #f8fafc; border-radius: 8px; padding: 8px 10px; margin-top: 8px; line-height: 1.5; }
.on-answer-missing { background: #fffbeb; border: 1px solid #fde68a; }
.on-answer-missing ul { margin: 6px 0 0; padding-left: 20px; }

.on-choice-card { align-items: flex-start; border: 2px solid #e2e8f0; border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; cursor: pointer; display: flex; gap: 10px; }
.on-choice-card:hover { border-color: #cbd5e1; background: #f8fafc; }
.on-choice-card input { margin-top: 4px; }
.on-choice-card .price { color: #0b4a78; font-weight: 700; }
.ai-lock { border: 2px solid #d4af37; border-radius: 12px; padding: 12px 14px; background: #fffdf5; margin-bottom: 16px; font-size: .9rem; }
.ai-lock strong { color: #92400e; }
.on-review-offer { border: 2px solid #15803d; border-radius: 12px; background: #f0fdf4; padding: 16px 16px 10px; margin: 18px 0; }
.on-review-offer h3 { margin-top: 0; color: #15803d; }

@media print {
    header, .nav-wrapper, footer, .on-steps, .on-actions, .on-ask-box, .on-progress,
    .on-noprint, .on-help, .on-fee-note, .on-box-note { display: none !important; }
    .on-wrap { padding: 0 !important; margin: 0 !important; }
    .on-card, .on-answer, .on-card-inner { border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 0 12px !important; }
    .on-answer-text { border: 0 !important; background: #fff !important; resize: none !important; height: auto !important; }
    .on-answer-note { background: #fff !important; border: 1px solid #cbd5e1 !important; }
}

/* ---- the two entrance boxes (Finnish clients / foreign clients) ---- */
.on-two-boxes { display: grid; grid-template-columns: 1fr; gap: 18px; margin: 6px 0 10px; }
@media (min-width: 820px) { .on-two-boxes { grid-template-columns: 1fr 1fr; align-items: start; } }
.on-box { border: 2px solid #e2e8f0; border-radius: 14px; padding: 20px 20px 18px; background: #fff; display: flex; flex-direction: column; }
.on-box-fi { border-color: #0b4a78; background: linear-gradient(180deg, #f7fbff 0%, #ffffff 60%); }
.on-box-int { border-color: #d4af37; background: linear-gradient(180deg, #fffdf5 0%, #ffffff 60%); }
.on-box-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.on-box-head h2 { margin: 0; font-size: 1.2rem; color: #0b4a78; }
.on-box-int .on-box-head h2 { color: #92400e; }
.on-box-flag { font-size: 1.5rem; line-height: 1; }
.on-box-lead { font-size: .9rem !important; color: #475569 !important; margin-bottom: 14px !important; }
.on-box-list { list-style: none; padding: 0 !important; margin: 0 0 16px !important; }
.on-box-list li { border-top: 1px dashed #e2e8f0; padding: 10px 0 10px; position: relative; }
.on-box-list li:first-child { border-top: 0; padding-top: 2px; }
.on-box-title { display: block; font-weight: 700; color: #0f172a; font-size: .93rem; padding-right: 70px; }
.on-box-fee { position: absolute; top: 10px; right: 0; background: #0b4a78; color: #fff; border-radius: 16px;
    padding: 2px 10px; font-size: .78rem; font-weight: 700; }
.on-box-int .on-box-fee { background: #92400e; }
.on-box-desc { display: block; color: #475569; font-size: .84rem; line-height: 1.5; margin-top: 3px; }
.on-box-actions { margin-top: auto; padding-top: 6px; }
.on-box-actions .on-help { text-align: center; margin-top: 8px; }
.on-box-note { font-size: .8rem !important; color: #64748b !important; border-left: 3px solid #cbd5e1;
    padding-left: 10px; margin: 0 0 14px !important; line-height: 1.5; }
.on-wrap[dir="rtl"] .on-box-title { padding-right: 0; padding-left: 70px; }
.on-wrap[dir="rtl"] .on-box-fee { right: auto; left: 0; }

.on-group-title { color: #0b4a78; font-size: 1.15rem; margin: 0 0 6px; }
.on-group-desc { color: #475569; font-size: .9rem; margin: 0 0 16px; }
.on-group-panel { display: block; margin-bottom: 8px; }
.on-wrap[dir="rtl"] .on-tab i { margin-right: 0; margin-left: 7px; }

/* ---- forms ---- */
.on-field { margin-bottom: 16px; }
.on-label { display: block; font-size: .84rem; font-weight: bold; color: #334155; margin-bottom: 6px; }
.on-input, .on-select, .on-textarea { width: 100%; padding: 12px 13px; border: 1px solid #cbd5e1; border-radius: 9px; font-size: .97rem; color: #1f2937; background: #fff; font-family: inherit; }
.on-textarea { min-height: 92px; resize: vertical; }
.on-input:focus, .on-select:focus, .on-textarea:focus { outline: none; border-color: #0b4a78; box-shadow: 0 0 0 3px rgba(11,74,120,.12); }
.on-help { font-size: .8rem; color: #64748b; margin-top: 5px; }
.on-row { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 700px) { .on-row.two { grid-template-columns: 1fr 1fr; } }

/* ---- buttons ---- */
.on-btn { display: inline-block; border: 0; border-radius: 9px; padding: 13px 22px; font-size: .98rem; font-weight: bold; cursor: pointer; text-decoration: none; text-align: center; }
.on-btn-primary { background: #0b4a78; color: #fff; }
.on-btn-primary:hover { background: #0f172a; color: #fff; }
.on-btn-green { background: #15803d; color: #fff; }
.on-btn-green:hover { background: #166534; color: #fff; }
.on-btn-gold { background: #d4af37; color: #3f2f04; }
.on-btn-ghost { background: #f1f5f9; color: #334155; }
.on-btn-ghost:hover { background: #e2e8f0; }
.on-btn-block { width: 100%; }
.on-btn:disabled { opacity: .6; cursor: not-allowed; }
.on-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 22px; }
.on-actions.end { justify-content: flex-end; }

/* ---- choice cards / radio ---- */
.on-choice { display: block; border: 2px solid #e2e8f0; border-radius: 11px; padding: 14px 16px; margin-bottom: 11px; cursor: pointer; }
.on-choice input { margin-right: 9px; }
.on-choice:hover { border-color: #94a3b8; }
.on-choice.on { border-color: #15803d; background: #f0fdf4; }
.on-choice span.price { color: #0b4a78; font-weight: bold; }

/* ---- alerts / notices ---- */
.on-alert { border-radius: 9px; padding: 13px 16px; font-size: .9rem; margin-bottom: 16px; line-height: 1.5; }
.on-alert-error { background: #fef2f2; border-left: 4px solid #dc2626; color: #991b1b; }
.on-alert-ok { background: #f0fdf4; border-left: 4px solid #16a34a; color: #166534; }
.on-alert-info { background: #eff6ff; border-left: 4px solid #2563eb; color: #1e40af; }
.on-alert-warn { background: #fffbeb; border-left: 4px solid #d4af37; color: #92400e; }
.on-note { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px 16px; font-size: .89rem; color: #334155; line-height: 1.55; }
.on-fee-note { font-size: .82rem; color: #64748b; margin-top: 10px; line-height: 1.5; }

/* ---- summary / payment ---- */
.on-summary { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 11px; padding: 16px 18px; margin-bottom: 18px; }
.on-summary .row { display: flex; justify-content: space-between; gap: 12px; font-size: .9rem; padding: 5px 0; border-bottom: 1px dashed #e2e8f0; }
.on-summary .row:last-child { border-bottom: 0; }
.on-summary .row strong { color: #0f172a; }
.on-summary .total { font-size: 1.05rem; }
.on-summary .total strong { color: #0b4a78; }
.on-bank { background: #0f172a; color: #fff; border-radius: 11px; padding: 18px 20px; margin-bottom: 18px; }
.on-bank div.k { color: #cbd5e1; font-size: .78rem; text-transform: uppercase; letter-spacing: .4px; }
.on-bank div.v { font-size: 1.02rem; font-weight: bold; margin-bottom: 12px; word-break: break-word; }
.on-bank .ref { background: #d4af37; color: #3f2f04; display: inline-block; padding: 7px 14px; border-radius: 7px; font-size: 1.1rem; font-weight: bold; letter-spacing: 1px; }

/* ---- progress ---- */
.on-progress { display: none; margin: 18px 0; }
.on-progress.on { display: block; }
.on-bar { height: 9px; background: #e2e8f0; border-radius: 6px; overflow: hidden; }
.on-bar span { display: block; height: 100%; width: 12%; background: linear-gradient(90deg, #0b4a78, #d4af37); border-radius: 6px; transition: width .5s ease; }
.on-progress-text { font-size: .87rem; color: #475569; margin-top: 9px; }
.on-spinner { display: inline-block; width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: on-spin .8s linear infinite; vertical-align: -2px; margin-right: 8px; }
@keyframes on-spin { to { transform: rotate(360deg); } }

/* ---- questions / answers ---- */
.on-question { border: 1px solid #e2e8f0; border-radius: 11px; padding: 15px 17px; margin-bottom: 14px; background: #fff; }
.on-question .q { font-weight: bold; color: #0f172a; font-size: .95rem; margin-bottom: 4px; }
.on-question .why { font-size: .8rem; color: #64748b; margin-bottom: 9px; }
.on-qa { font-size: .9rem; margin-bottom: 12px; }
.on-qa .q { font-weight: bold; color: #334155; }
.on-qa .a { color: #0f172a; }

/* ---- misc ---- */
.on-badge { display: inline-block; border-radius: 20px; padding: 3px 10px; font-size: .74rem; font-weight: bold; }
.on-badge-grey { background: #f1f5f9; color: #475569; }
.on-badge-blue { background: #dbeafe; color: #1e40af; }
.on-badge-amber { background: #fef3c7; color: #92400e; }
.on-badge-green { background: #dcfce7; color: #166534; }
.on-badge-violet { background: #ede9fe; color: #5b21b6; }
.on-badge-red { background: #fee2e2; color: #991b1b; }
.on-file-list { list-style: none; padding: 0; margin: 10px 0 0; font-size: .87rem; }
.on-file-list li { padding: 7px 11px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; margin-bottom: 7px; }
.on-deadline { background: #fef3c7; border-left: 4px solid #d4af37; padding: 10px 14px; border-radius: 8px; font-size: .88rem; color: #78350f; margin-bottom: 16px; }
.on-center { text-align: center; }
.on-hr { border: 0; border-top: 1px solid #e2e8f0; margin: 22px 0; }
.on-check { display: flex; gap: 10px; align-items: flex-start; font-size: .87rem; color: #334155; line-height: 1.5; margin-bottom: 16px; }
.on-check input { margin-top: 3px; transform: scale(1.15); }
.on-captcha { background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 9px; padding: 13px 15px; font-size: .9rem; }

/* ---- right to left languages ---- */
.on-wrap[dir="rtl"] { direction: rtl; text-align: right; }
.on-wrap[dir="rtl"] .on-actions { flex-direction: row-reverse; }
.on-wrap[dir="rtl"] .on-service .srv-fee { right: auto; left: 14px; }
.on-wrap[dir="rtl"] .on-service .srv-title { padding-right: 0; padding-left: 78px; }
.on-wrap[dir="rtl"] .on-summary .row { flex-direction: row-reverse; }

@media (max-width: 640px) {
    .on-wrap { padding: 0 12px; margin-top: 16px; }
    .on-card { padding: 20px 17px; }
    .on-card h1 { font-size: 1.28rem; }
    .on-btn { width: 100%; }
    .on-actions { flex-direction: column; align-items: stretch; }
}

/* --------------------------------------------------------------------------
   Keep the wizard's own lists exactly as designed (they are defined above) and
   leave room for the site's fixed bottom navigation on phones/tablets.
   -------------------------------------------------------------------------- */
.on-wrap ul.on-steps { padding-left: 0; padding-right: 0; margin: 0 0 20px; }
.on-wrap ul.on-file-list { padding-left: 0; padding-right: 0; margin: 10px 0 0; }
.on-wrap ul.on-file-list li { margin-bottom: 7px; }

@media (max-width: 1024px) {
    .on-wrap { padding-bottom: 104px; }   /* space for the fixed bottom menu */
}