/* Trade license order form (order_form_trade_license.html); uses czforms.css for the fields */
.tlo { --ink: #081E5B; --soft: #34405E; --muted: #4D5A78; --line: #E1E7F0; --ctrl: #CBD5E1; --tint: #F2F5F8; --brand: #0C2E8A; --accent: #0E7A5A; --focus: #1D4ED8; margin: 28px 0 8px; }
.tlo [hidden] { display: none !important; }
.tlo-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.tlo-step { border: 1px solid var(--line); border-radius: 18px; padding: 22px 22px 24px; margin: 0 0 18px; min-width: 0; }
.tlo-step legend { padding: 0 8px; margin-left: -8px; font: 700 21px/1.2 "Space Grotesk", Inter, sans-serif; color: var(--ink); display: flex; align-items: center; gap: 10px; }
.tlo-num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 15px; }
.tlo-help { font-size: 15px; color: var(--soft); margin: 4px 0 14px; }
.tlo-label { display: block; font-weight: 600; color: var(--ink); margin: 6px 0 8px; font-size: 15px; }
.tlo-label small, .tlo-more summary small { font-weight: 400; color: var(--muted); margin-left: 6px; }

.tlo-cards { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .tlo-cards { grid-template-columns: 1fr 1fr; } }
.tlo-card { display: flex; flex-direction: column; gap: 4px; text-align: left; border: 1px solid var(--ctrl); border-radius: 14px; padding: 14px 16px; background: #fff; cursor: pointer; font: inherit; color: var(--ink); }
.tlo-card:hover { border-color: var(--ink); }
.tlo-card[aria-pressed="true"] { border: 2px solid var(--brand); padding: 13px 15px; background: #F5F8FF; }
.tlo-card-t { font-weight: 700; }
.tlo-card-s { font-size: 14px; color: var(--muted); }
.tlo-card-p { font: 700 18px/1.2 "Space Grotesk", Inter, sans-serif; color: var(--brand); margin-top: 4px; }

.tlo-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.tlo-chip { border: 1px solid var(--ctrl); border-radius: 999px; padding: 8px 14px; background: #fff; font: inherit; font-size: 15px; color: var(--ink); cursor: pointer; }
.tlo-chip:hover { border-color: var(--ink); }
.tlo-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.tlo-card:focus-visible, .tlo-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.tlo-radios { display: flex; flex-direction: column; gap: 10px; }
.tlo-radios > label, .tlo-checks > label { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; cursor: pointer; font-size: 15px; }
.tlo-radios > label:has(input:checked), .tlo-checks > label:has(input:checked) { border-color: var(--brand); background: #F5F8FF; }
.tlo-radios input, .tlo-checks input { margin-top: 4px; accent-color: var(--brand); width: 18px; height: 18px; flex: 0 0 auto; }
.tlo-radios > label > span, .tlo-checks > label > span { display: block; }
.tlo-radios > label > span > small, .tlo-checks > label > span > small { display: block; margin-top: 2px; }
.tlo-checks > label > .tlo-pages { display: flex; flex-direction: column; }
.tlo-radios small, .tlo-checks small { color: var(--muted); font-size: 14px; }
.tlo-radios.tight > label { padding: 9px 12px; }
.tlo-radios.row { flex-direction: row; flex-wrap: wrap; }
.tlo-radios.row > label { flex: 0 1 auto; }
.tlo-plus { font-style: normal; font-weight: 600; color: var(--accent); white-space: nowrap; margin-left: 6px; }
.tlo-checks { display: flex; flex-direction: column; gap: 10px; }
.tlo-checks > label:has(select) { flex-direction: column; gap: 8px; cursor: default; }
.tlo-checks > label > span { flex: 1; min-width: 0; }
.tlo-inline { display: block !important; }
.tlo-pages { gap: 6px !important; width: 100%; }
.tlo-pages select { align-self: flex-start; }
.tlo-pages select, .tlo select { border: 1px solid var(--ctrl); border-radius: 10px; padding: 8px 10px; font: inherit; background: #fff; max-width: 100%; }
.tlo textarea { border: 1px solid var(--ctrl); border-radius: 10px; padding: 9px 12px; font: inherit; background: #fff; resize: vertical; }
.tlo textarea:focus, .tlo select:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.tlo-sub { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line); }
.tlo-note { margin-top: 14px; background: var(--tint); border-radius: 12px; padding: 12px 14px; font-size: 15px; color: var(--soft); }
.tlo-note a, .tlo-help a, .tlo-radios a, .tlo .czf-field label a { color: var(--brand); text-decoration: underline; }
.tlo-wide { grid-column: 1 / -1; margin: -6px 0 0; }

.tlo-more { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.tlo-more summary { cursor: pointer; font-weight: 600; color: var(--ink); margin-bottom: 12px; }

.tlo-files { display: flex; flex-direction: column; gap: 10px; }
.tlo-file { display: flex; flex-direction: column; gap: 8px; border: 1px dashed var(--ctrl); border-radius: 12px; padding: 12px 14px; font-size: 15px; }
.tlo-file small { color: var(--muted); }
.tlo-file input { font-size: 14px; }

.tlo-sum { margin: 20px 0 16px; background: var(--tint); border-radius: 16px; padding: 18px 20px; }
.tlo-sum-t { font: 700 18px/1.2 "Space Grotesk", Inter, sans-serif; margin: 0 0 8px; color: var(--ink); }
.tlo-sum table { width: 100%; border-collapse: collapse; font-size: 15px; }
.tlo-sum td { padding: 6px 0; border-top: 1px solid var(--line); vertical-align: top; color: var(--soft); }
.tlo-sum td:last-child { text-align: right; white-space: nowrap; padding-left: 14px; color: var(--ink); }
.tlo-total { display: flex; justify-content: space-between; margin: 10px 0 0; padding-top: 10px; border-top: 2px solid var(--ink); font: 700 20px/1.2 "Space Grotesk", Inter, sans-serif; color: var(--ink); }
.tlo-total-eur { margin: 4px 0 0; font-size: 14px; color: var(--muted); text-align: right; }
.tlo-err { color: #B42318 !important; font-weight: 600; }
#tlo-send:disabled { opacity: .6; cursor: default; }

.tlo-bar { position: fixed; left: 50%; bottom: 16px; transform: translate(-50%, 140%); z-index: 50; background: var(--ink); color: #fff; border-radius: 999px; padding: 10px 20px; box-shadow: 0 10px 28px rgba(8,30,91,.25); font-size: 15px; transition: transform .25s; white-space: nowrap; }
.tlo-bar.on { transform: translate(-50%, 0); }
.tlo-bar strong { font: 700 18px "Space Grotesk", Inter, sans-serif; margin: 0 6px; }
.tlo-bar-eur { color: #C9D3EA; }
@media (prefers-reduced-motion: reduce) { .tlo-bar { transition: none; } }
@media (max-width: 480px) { .tlo-step { padding: 18px 14px 20px; } .tlo-bar { bottom: 10px; } }

/* Yes / no questions (registrations) and trades */
.tlo-regs { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 4px; }
.tlo-regs .czf-note { margin: 4px 0 10px; }
.tlo-yn { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.tlo-yn-q { font-weight: 600; color: var(--ink); display: flex; flex-direction: column; }
.tlo-yn-q small { font-weight: 400; color: var(--muted); }
.tlo-yn-a { display: flex; gap: 6px; }
.tlo-yn-a label { display: flex; align-items: center; gap: 6px; border: 1px solid var(--ctrl); border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.tlo-yn-a label:has(input:checked) { border-color: var(--ink); background: var(--ink); color: #fff; }
.tlo-yn-a input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tlo-yn-a label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.tlo-yn-more { padding: 12px 0 4px; }
.tlo-trade[aria-pressed="true"], .tlo-tradeitem[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.tlo-alltrades { margin-top: 10px; }
.tlo-alltrades summary { cursor: pointer; font-weight: 600; color: var(--brand); font-size: 15px; }
.tlo-tradelist { display: flex; flex-direction: column; gap: 4px; max-height: 340px; overflow-y: auto; margin-top: 8px; border: 1px solid var(--line); border-radius: 12px; padding: 6px; }
.tlo-tradeitem { text-align: left; border: 1px solid transparent; border-radius: 8px; padding: 6px 10px; background: #fff; font: inherit; font-size: 14px; color: var(--soft); cursor: pointer; }
.tlo-tradeitem:hover { border-color: var(--ctrl); }
.tlo-tradeitem.pop { font-weight: 600; color: var(--ink); }
.tlo-disclaimer { display: block; margin-top: 8px; font-size: 13.5px; color: var(--muted); }

/* Živnobot picks the services (changes form) */
.tlo-zb { background: var(--tint); border-radius: 14px; padding: 14px 16px; margin: 0 0 18px; }
.tlo-zb-q { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; color: var(--ink); font-size: 15px; }
.tlo-zb-q img { border-radius: 50%; flex: 0 0 auto; }
.tlo-zb-q small { display: block; color: var(--muted); font-size: 14px; }
.tlo-zb textarea { width: 100%; }
.tlo-zb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.tlo-zb-note { margin-top: 10px; padding: 10px 12px; background: #fff; border-radius: 10px; font-size: 15px; color: var(--soft); }
.tlo-zb-alt { background: #fff !important; color: var(--ink) !important; border: 1px solid var(--ctrl) !important; }
.tlo-zb-note .tlo-zb-row { margin-top: 10px; }
.tlo-picked { animation: tlo-flash 1.6s ease-out; }
@keyframes tlo-flash { from { background: #E3F4EC; } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .tlo-picked { animation: none; } }

/* Accordion sections (changes form) */
.tlo-acc { border: 1px solid var(--line); border-radius: 14px; margin: 0 0 10px; }
.tlo-acc > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; font-weight: 700; color: var(--ink); font-size: 16px; }
.tlo-acc > summary::-webkit-details-marker { display: none; }
.tlo-acc > summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); margin: -4px 4px 0 auto; transition: transform .2s; flex: 0 0 auto; }
.tlo-acc[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.tlo-acc > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 14px; }
.tlo-acc-n { font-size: 13px; font-weight: 600; color: #fff; background: var(--accent); border-radius: 999px; padding: 2px 10px; }
.tlo-acc-n:empty { display: none; }
.tlo-acc > .tlo-checks { padding: 0 12px 14px; }
@media (prefers-reduced-motion: reduce) { .tlo-acc > summary::after { transition: none; } }

/* Tax return order: one income block per year, returning clients */
.tr-year { border-top: 1px dashed var(--line); padding-top: 16px; margin-top: 16px; }
.tr-year:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.tr-year-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.tr-copy { border: 1px solid var(--ctrl); border-radius: 999px; background: #fff; padding: 6px 14px; font: inherit; font-size: 14px; color: var(--brand); cursor: pointer; }
.tr-copy:hover { border-color: var(--brand); }
.tr-hint { display: block; color: var(--accent) !important; font-weight: 600 !important; }
.tr-hint:empty { display: none; }
.tlo-zb input { border: 1px solid var(--ctrl); border-radius: 10px; padding: 9px 12px; font: inherit; background: #fff; }
.tlo-zb input:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.tr-need { outline: 2px solid #B42318; outline-offset: 4px; border-radius: 8px; }
.tr-req { font-style: normal; font-weight: 500; font-size: 12px; color: #B42318; margin-left: 4px; }
.tr-par { margin-top: 18px !important; }
.tr-par > .tlo-yn-q, p.tr-par { font-weight: 700; }