/* Kaitech components. Logical properties throughout so every component mirrors under dir="rtl". */
body { margin: 0; font-family: var(--font-sans); font-size: 15px; line-height: 25px; font-weight: 300; background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; }
[lang="ar"], [dir="rtl"] { font-family: var(--font-arabic); }
.hs-logo { display: block; flex: none; }
.hs-icon { display: inline-block; flex: none; vertical-align: middle; }
[dir="rtl"] .hs-icon-flip { transform: scaleX(-1); }

/* Button */
.hs-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font: inherit; font-weight: 500; border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background-color .12s ease, border-color .12s ease; }
.hs-btn-md { height: 40px; padding-inline: var(--space-4); font-size: 15px; }
.hs-btn-sm { height: 32px; padding-inline: var(--space-3); font-size: 14px; }
.hs-btn-lg { height: 48px; padding-inline: var(--space-5); font-size: 16px; }
[dir="rtl"] .hs-btn { font-family: var(--font-arabic); }
.hs-btn-primary { background: var(--action); color: var(--on-action); }
.hs-btn-primary:hover { background: var(--muted); }
.hs-btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.hs-btn-secondary:hover { background: var(--sunken); }
.hs-btn-quiet { background: transparent; color: var(--ink); }
.hs-btn-quiet:hover { background: var(--sunken); }
.hs-btn:focus-visible, .hs-input:focus-visible, .hs-header-link:focus-visible, .hs-header-lang:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.hs-btn:disabled { opacity: .45; cursor: not-allowed; }

/* Forms: TextField, Select, ChoiceGroup, Checkbox, DateField, FormMessage */
.hs-form { display: flex; flex-direction: column; gap: var(--space-5); max-width: 560px; }
.hs-form-section { display: flex; flex-direction: column; gap: var(--space-5); padding-block-start: var(--space-5); border-block-start: 1px solid var(--line); }
.hs-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.hs-form-note { font-size: 13px; line-height: 20px; color: var(--muted); margin: 0; }
[dir="rtl"] .hs-form-note { font-size: 14px; line-height: 24px; }
.hs-form-note a, .hs-msg a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.hs-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hs-field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
fieldset.hs-group { border: 0; margin: 0; padding: 0; }
fieldset.hs-group.hs-field-error { border-inline-start: 3px solid var(--negative); padding-inline-start: var(--space-3); }
fieldset.hs-group > legend { padding: 0; margin-block-end: var(--space-2); }
.hs-field-label { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink); }
[dir="rtl"] .hs-field-label { font-size: 15px; line-height: 24px; }
.hs-field-opt { font-weight: 400; color: var(--muted); }
.hs-field-hint { font-size: 14px; line-height: 20px; color: var(--muted); margin-block-start: calc(var(--space-1) * -1); }
[dir="rtl"] .hs-field-hint { font-size: 15px; line-height: 24px; }
.hs-field-msg { display: flex; align-items: flex-start; gap: var(--space-1); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--negative); }
.hs-field-msg .hs-icon { margin-block-start: 2px; }
[dir="rtl"] .hs-field-msg { font-size: 15px; line-height: 24px; }
[dir="rtl"] .hs-field-msg .hs-icon { margin-block-start: 4px; }
.hs-field-error { border-inline-start: 3px solid var(--negative); padding-inline-start: var(--space-3); }
.hs-input { font: inherit; font-size: 16px; line-height: 24px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); min-height: 40px; box-sizing: border-box; width: 100%; }
textarea.hs-input { resize: vertical; }
.hs-input::placeholder { color: var(--muted); }
.hs-input[aria-invalid="true"] { border-color: var(--negative); border-width: 2px; padding: calc(var(--space-2) - 1px) calc(var(--space-3) - 1px); }
.hs-input:disabled { background: var(--sunken); color: var(--muted); cursor: not-allowed; }
.hs-w-xs { max-width: 6em; } .hs-w-sm { max-width: 11em; } .hs-w-md { max-width: 20em; } .hs-w-lg { max-width: 30em; }
.hs-w-2 { width: 3.5em; text-align: center; } .hs-w-year { width: 5em; text-align: center; }
.hs-affix { display: flex; align-items: center; width: 100%; box-sizing: border-box; min-height: 40px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-md); }
.hs-affix .hs-input, .hs-affix .hs-input[aria-invalid="true"] { border: 0; background: transparent; min-height: 38px; padding: var(--space-2) var(--space-3); }
.hs-affix .hs-input:focus-visible { box-shadow: none; }
.hs-affix:focus-within { box-shadow: var(--focus-ring); }
.hs-affix-error { border: 2px solid var(--negative); }
.hs-affix-text { padding-inline: var(--space-3); color: var(--muted); font-size: 15px; white-space: nowrap; }
.hs-select-wrap { position: relative; width: 100%; }
.hs-select { appearance: none; -webkit-appearance: none; padding-inline-end: 40px; cursor: pointer; }
.hs-select-icon { position: absolute; inset-inline-end: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.hs-choice-list { display: flex; flex-direction: column; gap: var(--space-1); }
.hs-choice-inline { flex-direction: row; flex-wrap: wrap; gap: var(--space-1) var(--space-5); }
.hs-choice { display: flex; align-items: flex-start; gap: var(--space-3); padding-block: 6px; cursor: pointer; }
.hs-choice-input { appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin: 2px 0 0; background: var(--surface); border: 1px solid var(--line-strong); display: grid; place-content: center; cursor: pointer; }
[dir="rtl"] .hs-choice-input { margin-block-start: 4px; }
.hs-check { border-radius: var(--radius-sm); }
.hs-radio { border-radius: 50%; }
.hs-choice-input:checked { background: var(--action); border-color: var(--action); }
.hs-check:checked::before { content: ""; width: 14px; height: 14px; background: var(--on-action); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.hs-radio:checked { background: var(--surface); border: 6px solid var(--action); }
.hs-choice-input[aria-invalid="true"] { border-color: var(--negative); border-width: 2px; }
.hs-choice-input:checked[aria-invalid="true"] { border-color: var(--action); }
.hs-radio:checked[aria-invalid="true"] { border-width: 6px; }
.hs-choice-input:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.hs-choice-input:disabled, .hs-choice-input:disabled + .hs-choice-text { opacity: .45; cursor: not-allowed; }
.hs-choice-text { display: flex; flex-direction: column; font-size: 16px; line-height: 24px; color: var(--ink); }
[dir="rtl"] .hs-choice-text { font-size: 16px; line-height: 28px; }
.hs-choice-label { font-weight: 400; }
.hs-choice-hint { font-size: 14px; line-height: 20px; color: var(--muted); }
[dir="rtl"] .hs-choice-hint { font-size: 15px; line-height: 24px; }
.hs-date { display: flex; gap: var(--space-3); }
.hs-date-part { display: flex; flex-direction: column; gap: var(--space-1); }
.hs-date-label { font-size: 13px; line-height: 20px; color: var(--muted); }
.hs-msg { display: flex; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); border: 1px solid var(--line); border-inline-start-width: 4px; background: var(--surface); color: var(--ink); outline: none; }
.hs-msg:focus-visible { box-shadow: var(--focus-ring); }
.hs-msg-icon { margin-block-start: 2px; }
[dir="rtl"] .hs-msg-icon { margin-block-start: 5px; }
.hs-msg-error { border-color: var(--negative); background: var(--negative-soft); }
.hs-msg-error .hs-msg-icon { color: var(--negative); }
.hs-msg-success { border-color: var(--positive); background: var(--positive-soft); }
.hs-msg-success .hs-msg-icon { color: var(--positive); }
.hs-msg-info { background: var(--sunken); border-color: transparent; border-inline-start-color: var(--line-strong); }
.hs-msg-body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.hs-msg-title { font-weight: 600; font-size: 16px; line-height: 24px; }
[dir="rtl"] .hs-msg-title { font-size: 17px; line-height: 28px; }
.hs-msg-text { font-size: 15px; line-height: 24px; }
[dir="rtl"] .hs-msg-text { font-size: 16px; line-height: 28px; }
.hs-msg-list { margin: 0; padding-inline-start: var(--space-5); font-size: 15px; line-height: 24px; }
.hs-msg-error .hs-msg-list a { color: var(--negative); font-weight: 500; }
.hs-msg-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-2); }

/* Combobox */
.hs-combo { position: relative; width: 100%; }
.hs-combo-input { padding-inline-start: 38px; padding-inline-end: 40px; }
.hs-combo-input[aria-invalid="true"] { padding-inline-start: 37px; padding-inline-end: 39px; }
.hs-combo-search { position: absolute; inset-inline-start: 12px; top: 11px; color: var(--muted); pointer-events: none; }
.hs-combo-list { position: absolute; z-index: 20; inset-inline: 0; top: calc(100% + 4px); margin: 0; padding: var(--space-1); list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-md); max-height: 264px; overflow-y: auto; }
.hs-combo-option { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: 16px; line-height: 24px; cursor: pointer; }
.hs-combo-option.is-active { background: var(--sunken); }
.hs-combo-option.is-selected { font-weight: 500; }
.hs-combo-empty { padding: var(--space-3); font-size: 14px; line-height: 22px; color: var(--muted); }
[dir="rtl"] .hs-combo-empty { font-size: 15px; line-height: 24px; }

/* FileField */
.hs-drop { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-4) var(--space-5); border: 1px dashed var(--line-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--muted); position: relative; }
.hs-drop.is-drag { border-style: solid; border-color: var(--ink); background: var(--sunken); }
.hs-drop-error { border: 2px dashed var(--negative); }
.hs-drop-text { font-size: 15px; line-height: 24px; }
.hs-drop .hs-btn { color: var(--ink); }
.hs-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.hs-file-input:focus-visible + * , .hs-drop:focus-within label.hs-btn { box-shadow: var(--focus-ring); }
.hs-file-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.hs-file { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.hs-file.is-error { border-color: var(--negative); background: var(--negative-soft); }
.hs-file-icon { color: var(--muted); }
.hs-file.is-error .hs-file-icon, .hs-file.is-error .hs-file-meta { color: var(--negative); }
.hs-file-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hs-file-name { font-size: 15px; line-height: 22px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-file-meta { font-size: 13px; line-height: 20px; color: var(--muted); }
[dir="rtl"] .hs-file-meta { font-size: 14px; line-height: 22px; }
.hs-file-progress { height: 4px; border-radius: 2px; background: var(--sunken); overflow: hidden; }
.hs-file-progress span { display: block; height: 100%; background: var(--ink); }
.hs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Riyal and Amount: U+20C1, drawn by the font stack ("Kaitech Riyal" until Readex Pro carries it). Always to the left of the number. */
.hs-riyal { font-style: normal; }
.hs-amount { white-space: nowrap; font-variant-numeric: tabular-nums; }
[dir="rtl"] .hs-affix-currency { flex-direction: row-reverse; }
[dir="rtl"] .hs-affix-currency .hs-input { direction: ltr; text-align: left; padding-inline-start: 0; }
.hs-affix-currency .hs-input { padding-inline-start: 0; }

/* Card */
.hs-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); box-sizing: border-box; }
.hs-card-sunken { background: var(--sunken); border-color: transparent; }
.hs-card-eyebrow { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .01em; color: var(--muted); }
.hs-card-title { margin: 0; font-family: var(--font-sans); font-size: 19px; line-height: 26px; font-weight: 600; letter-spacing: -0.005em; }
[dir="rtl"] .hs-card-title { font-family: var(--font-arabic); font-size: 20px; line-height: 32px; letter-spacing: 0; }
[dir="rtl"] .hs-card-eyebrow { font-size: 13px; line-height: 20px; letter-spacing: 0; }
.hs-card-body { color: var(--muted); font-size: 15px; line-height: 24px; }
[dir="rtl"] .hs-card-body { font-size: 16px; line-height: 28px; }
.hs-card-footer { margin-block-start: var(--space-3); padding-block-start: var(--space-3); border-block-start: 1px solid var(--line); display: flex; gap: var(--space-2); align-items: center; }

/* Tag */
.hs-tag { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 13px; line-height: 20px; font-weight: 500; padding-inline: var(--space-2); border-radius: var(--radius-sm); background: var(--sunken); color: var(--ink); white-space: nowrap; }
.hs-tag-saffron { background: var(--saffron-soft); color: var(--saffron-text); }
.hs-tag-positive { background: var(--positive-soft); color: var(--positive); }
.hs-tag-negative { background: var(--negative-soft); color: var(--negative); }

/* DataTable */
.hs-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.hs-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
[dir="rtl"] .hs-table { font-size: 15px; line-height: 24px; }
.hs-table caption { text-align: start; padding: var(--space-3) var(--space-4); font-weight: 500; color: var(--muted); caption-side: top; }
.hs-table th { text-align: start; font-weight: 500; color: var(--muted); background: var(--sunken); padding: var(--space-2) var(--space-4); border-block-end: 1px solid var(--line); }
.hs-table td { padding: var(--space-3) var(--space-4); border-block-end: 1px solid var(--line); color: var(--ink); }
.hs-table tr:last-child td { border-block-end: 0; }
.hs-table .hs-num { text-align: end; font-variant-numeric: tabular-nums; }
.hs-row-highlight td { background: var(--saffron-soft); }

/* BarChart */
.hs-chart { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.hs-chart-title { font-size: 14px; font-weight: 500; color: var(--muted); }
.hs-chart-plot { display: flex; align-items: flex-end; gap: var(--space-3); border-block-end: 1px solid var(--line-strong); }
.hs-chart-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; min-width: 0; }
.hs-chart-bar { background: var(--chart-1); border-start-start-radius: var(--radius-sm); border-start-end-radius: var(--radius-sm); min-height: 2px; }
.hs-chart-bar-2 { background: var(--chart-2); }
.hs-chart-bar-hl { background: var(--chart-highlight); }
.hs-chart-value { font-size: 12px; line-height: 16px; color: var(--muted); text-align: center; margin-block-end: var(--space-1); font-variant-numeric: tabular-nums; }
.hs-chart-value-hl { color: var(--ink); font-weight: 600; }
.hs-chart-axis { display: flex; gap: var(--space-3); }
.hs-chart-label { flex: 1; text-align: center; font-size: 12px; line-height: 16px; color: var(--muted); min-width: 0; }
[dir="rtl"] .hs-chart-label, [dir="rtl"] .hs-chart-value { font-size: 13px; line-height: 20px; }

/* OfferingLockup */
.hs-lockup { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--ink); }
.hs-lockup-endorsed { gap: var(--space-3); }
.hs-lockup-partner { font-weight: 600; font-size: 20px; padding-inline-end: var(--space-3); border-inline-end: 1px solid var(--line-strong); }
.hs-lockup-offering { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.hs-lockup-name { font-family: var(--font-sans); font-weight: 600; font-size: var(--hs-lockup-size, 28px); line-height: 1.15; letter-spacing: -0.015em; }
[dir="rtl"] .hs-lockup-name { font-family: var(--font-arabic); letter-spacing: 0; line-height: 1.5; }
.hs-lockup-endorse { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 13px; line-height: 16px; color: var(--muted); font-weight: 500; }
[dir="rtl"] .hs-lockup-endorse { font-size: 14px; line-height: 20px; }
.hs-tag-clay { background: var(--clay-soft); color: var(--clay-text); }
.hs-tag-olive { background: var(--olive-soft); color: var(--olive-text); }
.hs-tag-teal { background: var(--teal-soft); color: var(--teal-text); }

/* SiteHeader */
.hs-header { display: flex; align-items: center; gap: var(--space-6); height: 72px; padding-inline: var(--space-6); background: var(--paper); border-block-end: 1px solid var(--line); box-sizing: border-box; }
.hs-header-brand { display: flex; align-items: center; color: inherit; }
.hs-header-nav { display: flex; gap: var(--space-5); flex: 1; }
.hs-header-link { color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 500; padding-block: var(--space-1); border-block-end: 2px solid transparent; }
.hs-header-link:hover { color: var(--ink); }
.hs-header-link.is-active { color: var(--ink); border-block-end-color: var(--ink); }
.hs-header-actions { display: flex; align-items: center; gap: var(--space-4); }
.hs-header-lang { color: var(--ink); font-size: 14px; text-decoration: none; }
.hs-header-lang[lang="ar"] { font-family: var(--font-arabic); }
.hs-header-lang[lang="en"] { font-family: var(--font-sans); }
@media (max-width: 720px) { .hs-header-nav { display: none; } .hs-header { padding-inline: var(--space-4); height: 56px; gap: var(--space-3); justify-content: space-between; } }

/* Preview scaffolding shared by the cards */
.hs-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; padding: var(--space-5); }
.hs-stack { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); }
.hs-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); padding: var(--space-5); align-items: start; }
@media (max-width: 640px) { .hs-pair { grid-template-columns: 1fr; } }