.ds-field{display:flex;flex-direction:column;gap:6px;margin:0 0 12px}.ds-field__label{font-size:12.5px;font-weight:600;color:var(--text)}.ds-field__req{color:#e11d48;margin-inline-start:3px}.ds-field__hint{font-size:11.5px;color:var(--text-muted)}
.ds-required-marker,.ds-field__req,.ds-field__required,.rdnf-required,.vf-req,.ar-required,.rp-req,.rb-req,.req{color:#e11d48!important;font-weight:800!important;margin-inline-start:3px}
.ds-field__input{inline-size:100%;min-block-size:42px;padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius-lg,12px);background:var(--surface);color:var(--text);font:inherit;font-size:13.5px;transition:border-color .15s ease,box-shadow .15s ease}.ds-field__input::placeholder{color:var(--text-faint)}.ds-field__input:hover:not(:disabled):not(:focus){border-color:var(--border-strong)}.ds-field__input:focus{outline:0;border-color:var(--brand-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-500) 16%,transparent)}.ds-field__input:disabled{opacity:.58;cursor:not-allowed;background:var(--surface-2)}
.ds-field__control{position:relative;display:flex;align-items:stretch;width:100%;min-width:0}
.ds-field__control .ds-field__input{flex:1;min-width:0}
.ds-field__prefix+.ds-field__input{border-start-start-radius:0;border-end-start-radius:0}
.ds-field__prefix{display:flex;align-items:center;flex-shrink:0;padding-inline:12px;border:1px solid var(--border);border-inline-end:none;border-start-start-radius:12px;border-end-start-radius:12px;background:var(--surface-2);color:var(--text-faint);font-size:12px;font-weight:700;white-space:nowrap}
.ds-field__prefix-btn{cursor:pointer;border:none;font:inherit;transition:background .2s ease,color .2s ease}
.ds-field__prefix-btn:hover{background:color-mix(in srgb,var(--brand-500) 8%,var(--surface-2));color:var(--brand-600)}
.ds-field__prefix-btn:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--brand-400)}
.ds-field__suffix-btn{position:absolute;inset-inline-end:6px;top:50%;transform:translateY(-50%);width:32px;height:32px;display:grid;place-items:center;border:none;border-radius:8px;background:transparent;color:var(--text-faint);cursor:pointer;padding:0;transition:background .2s ease,color .2s ease}
.ds-field__suffix-btn:hover{background:color-mix(in srgb,var(--brand-500) 10%,var(--surface-2));color:var(--brand-600)}
/* Password reveal (catalog «رمز عبور» field): one eye icon at a time; .is-revealed swaps them. Shared so every product surface, including the browser extension side panel, gets the catalog state. */
.ds-field__suffix-btn .ds-eye-icon{display:block}.ds-field__suffix-btn .ds-eye-icon--closed{display:none}.ds-field__suffix-btn.is-revealed .ds-eye-icon--open{display:none}.ds-field__suffix-btn.is-revealed .ds-eye-icon--closed{display:block}
/* Password: room for the eye button so typed dots never run under it (an LTR input in an RTL page keeps the button on its left). */
.ds-field__control--password .ds-field__input{padding-inline-end:44px}
html[dir="rtl"] .ds-field__control--password .ds-field__input[dir="ltr"],html[dir="rtl"] .ds-field__control--password .ds-field__input.ds-input-ltr{padding-inline-end:14px;padding-inline-start:44px}
/* Copy field — mirrors design-system.css «Copy field»; behaviour in ds-form-governance.js [data-ds-copy]. */
.ds-field__control--copy .ds-field__input{padding-inline-end:44px;background:var(--surface-2);cursor:text}
html[dir="rtl"] .ds-field__control--copy .ds-field__input[dir="ltr"],html[dir="rtl"] .ds-field__control--copy .ds-field__input.ds-input-ltr{padding-inline-end:14px;padding-inline-start:44px}
.ds-field__suffix-btn .ds-copy-icon{display:block}.ds-field__suffix-btn .ds-copy-icon--done{display:none}.ds-field__suffix-btn.is-copied{color:var(--brand-600)}.ds-field__suffix-btn.is-copied .ds-copy-icon--idle{display:none}.ds-field__suffix-btn.is-copied .ds-copy-icon--done{display:block}
.ds-field__control:focus-within{border-radius:12px;box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-500) 20%,transparent)}
.ds-field__control:focus-within .ds-field__prefix{border-color:var(--brand-500);background:color-mix(in srgb,var(--brand-500) 6%,var(--surface-2))}
.ds-field__control:focus-within .ds-field__input{box-shadow:none}
.ds-field__control--search{overflow:hidden;border:1px solid var(--border);border-radius:var(--radius-lg,12px);background:var(--surface);transition:border-color .15s ease,box-shadow .15s ease}
.ds-field__control--search:hover{border-color:var(--border-strong)}
.ds-field__control--search:focus-within{border-color:var(--brand-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-500) 20%,transparent)}
.ds-field__control--search .ds-field__input,.ds-field__control--search .ds-field__prefix{border:0;border-radius:0}
.ds-field__control--search .ds-field__input:focus{border-color:transparent;box-shadow:none}
.ds-switch{display:flex;align-items:center;gap:10px;min-height:42px;padding:8px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface);cursor:pointer;transition:border-color .22s ease,background .22s ease}
.ds-switch:hover{border-color:color-mix(in srgb,var(--brand-500) 35%,var(--border));background:color-mix(in srgb,var(--brand-500) 4%,var(--surface))}
.ds-switch input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.ds-switch__track{position:relative;width:40px;height:22px;flex-shrink:0;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);transition:background .25s ease,border-color .25s ease}
.ds-switch__thumb{position:absolute;top:2px;inset-inline-start:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.15);transition:transform .25s cubic-bezier(.3,.8,.3,1)}
.ds-switch input:checked+.ds-switch__track{background:var(--brand-500);border-color:var(--brand-500)}
.ds-switch input:checked+.ds-switch__track .ds-switch__thumb{transform:translateX(-16px)}
[dir="ltr"] .ds-switch input:checked+.ds-switch__track .ds-switch__thumb{transform:translateX(16px)}
.ds-switch input:disabled+.ds-switch__track{opacity:.45}
.ds-switch input:disabled~.ds-switch__label{opacity:.55}
.ds-switch__label{font-size:12.5px;font-weight:600;color:var(--text-muted)}
:where(.rlx-modal,.ds-modal,.ds-governed-dialog) .ds-field__input{background:color-mix(in srgb,var(--surface-2,#f8fafc) 78%,var(--surface,#fff))}
.ds-field__input--area{min-block-size:112px;resize:vertical;line-height:1.8}.ds-field__input--numeric{direction:ltr;text-align:end;font-variant-numeric:tabular-nums}.ds-field--check{display:flex;width:100%;max-width:100%;box-sizing:border-box;align-items:center;justify-self:stretch;gap:8px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-lg,12px);background:var(--surface);direction:rtl}.ds-field--check .ds-field__label,.ds-field--check>span,.ds-field--check>label{flex:1 1 auto;min-width:0;margin:0}.ds-field--check input[type=checkbox]{position:static;order:2;align-self:center;margin:0;transform:none;flex-shrink:0}.ds-form-note{padding:10px 12px;margin-block-end:12px;border-radius:var(--radius-lg,12px);color:var(--text-muted);background:var(--surface-2);font-size:12px;line-height:1.8}.ds-form-actions{display:flex;gap:8px;margin-block-start:14px}.ds-form-actions .btn{flex:1}@media(max-width:520px){.ds-form-actions{flex-direction:column-reverse}.ds-form-actions .btn{inline-size:100%;flex:0 0 auto}}

/* One panel-wide action contract: cancel is physically left, commit is right. */
.ds-modal-actions--standard{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;align-items:center;gap:10px;inline-size:100%;direction:ltr}
.ds-modal-actions--standard>.ds-modal-action--cancel{grid-column:1;justify-self:start;direction:rtl}
.ds-modal-actions--standard>.ds-modal-action--commit{grid-column:3;justify-self:end;direction:rtl}
@media(max-width:520px){.ds-modal-actions--standard{grid-template-columns:1fr!important}.ds-modal-actions--standard>.ds-modal-action--cancel,.ds-modal-actions--standard>.ds-modal-action--commit{grid-column:1;inline-size:100%;justify-self:stretch}.ds-modal-actions--standard>.ds-modal-action--commit{grid-row:1}.ds-modal-actions--standard>.ds-modal-action--cancel{grid-row:2}}

/* Legacy dialogs receive the same visual chassis without forking page CSS. */
.ds-governed-dialog{border:1px solid var(--border)!important;border-radius:var(--radius-xl,18px)!important;background:var(--surface)!important;box-shadow:0 24px 70px color-mix(in srgb,var(--text) 18%,transparent)!important;overflow:hidden}
.ds-governed-dialog__head{border-block-end:1px solid var(--border);background:color-mix(in srgb,var(--pastel-lilac) 22%,var(--surface))}
.ds-governed-dialog__body{background:var(--surface)}
.ds-governed-dialog__foot{border-block-start:1px solid var(--border);background:var(--surface);padding:14px 18px}

/* Modal surface hierarchy: controls stay visibly distinct from the white
   dialog canvas while remaining inside the neutral design-system palette. */
.rlx-modal .rlx-form .ds-field__input,
.rlx-modal .rlx-form .ds-dropdown__trigger,
.rlx-modal .rlx-form .cbx-input,
.rlx-modal .rlx-form .rlx-color-trigger,
.ds-modal .ds-field__input,
.ds-modal .ds-dropdown__trigger,
.ds-modal .cbx-input {
  background: color-mix(in srgb, var(--surface-2, #f1f5f9) 88%, var(--surface, #fff));
  border-color: color-mix(in srgb, var(--border-strong, #cbd5e1) 72%, var(--border, #e2e8f0));
}
.rlx-modal .rlx-form .ds-field__input:hover:not(:disabled):not(:focus),
.rlx-modal .rlx-form .ds-dropdown__trigger:hover,
.rlx-modal .rlx-form .cbx-input:hover:not(:disabled):not(:focus),
.rlx-modal .rlx-form .rlx-color-trigger:hover {
  background: color-mix(in srgb, var(--surface-2, #f1f5f9) 76%, var(--pastel-mint, #d8f3e8));
}
.rlx-modal .ds-form-actions .btn.ghost,
.ds-modal .ds-form-actions .btn.ghost {
  background: color-mix(in srgb, var(--surface-2, #f1f5f9) 90%, var(--border, #e2e8f0));
  border: 1px solid var(--border-strong, #cbd5e1);
  color: var(--text, #0f172a);
}
.rlx-modal .ds-form-actions .btn.ghost:hover,
.ds-modal .ds-form-actions .btn.ghost:hover {
  background: color-mix(in srgb, var(--surface-2, #f1f5f9) 72%, var(--border, #e2e8f0));
  border-color: color-mix(in srgb, var(--brand-500, #2c7873) 28%, var(--border-strong, #cbd5e1));
}

/* Dynamic custom-field long text owns a complete form row. */
.rlx-modal .ds-modal__form-grid,
.ds-modal .ds-modal__form-grid,
.ds-governed-dialog .ds-modal__form-grid {
  align-items: end;
}

.ds-modal__form-grid > .rdnf-field--long-text,
.rlx-form.ds-modal__form-grid > .rdnf-field--long-text {
  grid-column: 1 / -1 !important;
  inline-size: 100%;
  min-inline-size: 0;
  justify-self: stretch;
}
.rdnf-field--long-text .rdnf-long-text {
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  min-height: calc(3 * 1.8em + 22px);
  resize: none;
}

/* A boolean has no separate caption row. Align its control body with the
   neighbouring input instead of the neighbour's caption. */
.ds-modal__form-grid > .rdnf-field--boolean {
  align-self: end;
}
.ds-modal__form-grid > .rdnf-related-pair,
.rlx-form.ds-modal__form-grid > .rdnf-related-pair {
  display: grid;
  gap: 0;
  align-self: start;
  min-inline-size: 0;
}

/* Customer profile editor consumes the governed modal/form contracts. */
.cef-modal { inline-size: min(1120px, calc(100vw - 32px)); }
.cef-modal .ds-modal__body { background: var(--surface); }
.cef-modal .ds-form-section {
  padding: 16px;
  margin-block-end: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl, 18px);
  background: color-mix(in srgb, var(--surface-2) 52%, var(--surface));
}
.cef-modal .ds-form-section__title { margin-block-end: 14px; }
.cef-modal .cef-customer-section { display:grid; grid-template-columns:minmax(190px,.55fr) minmax(360px,1.45fr); align-items:end; gap:20px; }
.cef-modal .cef-customer-section .ds-form-section__title { margin:0; }
.cef-modal .cef-customer-picker { min-inline-size:0; }
.cef-modal .cef-customer-picker .ds-field { margin:0; }
.cef-modal .cef-grid--three { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.cef-modal .cef-span-2 { grid-column:span 2; }
.cef-modal .cef-span-full { grid-column:1 / -1; }
.cef-modal .cef-identity-head { display:flex; align-items:center; gap:10px; }
.cef-modal .cef-identity-copy { min-inline-size:0; }
.cef-modal .cef-legal-toggle { margin-inline-start:auto; display:flex; align-items:center; gap:12px; min-inline-size:210px; padding:9px 12px; border:1px solid color-mix(in srgb,var(--ds-modal-accent-deep,#7c3aed) 24%,var(--border)); border-radius:14px; background:color-mix(in srgb,var(--ds-modal-accent,#ddd6fe) 32%,var(--surface)); cursor:pointer; transition:border-color .2s ease,background .2s ease,box-shadow .2s ease; }
.cef-modal .cef-legal-toggle:hover { border-color:color-mix(in srgb,var(--ds-modal-accent-deep,#7c3aed) 48%,var(--border)); box-shadow:0 6px 16px color-mix(in srgb,var(--ds-modal-accent-deep,#7c3aed) 14%,transparent); }
.cef-modal .cef-legal-toggle__copy { display:grid; gap:1px; flex:1; }
.cef-modal .cef-legal-toggle__copy b { font-size:12px; color:var(--text); }
.cef-modal .cef-legal-toggle__copy small { font-size:10.5px; color:var(--text-muted); }
.cef-modal .cef-legal-toggle > input { position:absolute; inline-size:1px; block-size:1px; opacity:0; }
.cef-modal .cef-switch { direction:ltr; display:flex; align-items:center; inline-size:44px; block-size:24px; padding:3px; border-radius:999px; background:var(--border-strong,#cbd5e1); transition:background .2s ease; }
.cef-modal .cef-switch i { inline-size:18px; block-size:18px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(15,23,42,.22); transform:translateX(0); transition:transform .2s ease; }
.cef-modal .cef-legal-toggle > input:checked + .cef-switch { background:var(--ds-modal-accent-deep,#7c3aed); }
.cef-modal .cef-legal-toggle > input:checked + .cef-switch i { transform:translateX(20px); }
.cef-modal .cef-legal-toggle > input:focus-visible + .cef-switch { outline:3px solid color-mix(in srgb,var(--ds-modal-accent-deep,#7c3aed) 28%,transparent); outline-offset:2px; }
.cef-modal .ds-smart-field > input:not([type="checkbox"]),
.cef-modal .ds-smart-field > textarea { background: var(--surface); }
.cef-modal .ds-modal__feedback:empty { display: none; }
.cef-modal .cef-submit {
  border-color: var(--ds-modal-accent-deep, #7c3aed);
  background: linear-gradient(135deg, #8b5cf6, var(--ds-modal-accent-deep, #7c3aed));
  color: #fff;
  box-shadow: 0 9px 22px color-mix(in srgb, var(--ds-modal-accent-deep, #7c3aed) 28%, transparent);
}
.cef-modal .cef-submit [data-ds-icon],
.cef-modal .cef-submit .ds-icon { color: #fff !important; }
.cef-modal .cef-submit:hover:not(:disabled) {
  border-color: #6d28d9;
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  box-shadow: 0 12px 26px color-mix(in srgb, #7c3aed 36%, transparent);
}
.cef-modal .cef-submit:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ds-modal-accent-deep, #7c3aed) 30%, transparent);
  outline-offset: 3px;
}
.cef-modal .cef-submit:disabled { box-shadow: none; }
/* Identity variants and dynamic fields all participate in one grid. Keeping
   the variant wrappers out of layout prevents nested grids from producing
   half-width fields and unmatched rows. */
.cef-modal [data-cef-individual-fields]:not([hidden]),
.cef-modal [data-cef-company-fields]:not([hidden]),
.cef-modal [data-cef-individual-fields] > .ds-modal__form-grid,
.cef-modal [data-cef-company-fields] > .ds-modal__form-grid { display: contents; }
.cef-modal [data-cef-fields-mount] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cef-modal .ds-smart-field,
.cef-modal [data-cef-fields-mount] > * { min-inline-size: 0; }
.cef-modal [data-cef-fields-mount] > .rdnf-field--boolean {
  align-self: end;
  margin-block-start: var(--space-2, 8px);
}

/* Crm customer identity is one logical pair. Keep name and mobile
   on the same two-column row even when the form also contains hidden cache
   inputs and the browser's auto-placement would otherwise split them.
   The pin applies only while the shared form is two-column (the rlx-form
   mobile rule collapses it at 700px); an explicit `grid-column: 2` on a
   one-column grid creates an implicit track and shrinks every full-width
   field to the narrow explicit column. */
@media (min-width: 701px) {
  .rlx-form.ds-modal__form-grid:has(#rlx-f-customer_name_search) > .rlx-field:has(#rlx-f-customer_name_search),
  .rlx-form.ds-modal__form-grid:has(#rlx-f-customer_phone_search) > .rlx-field:has(#rlx-f-customer_phone_search) {
    grid-row: 1;
  }
  .rlx-form.ds-modal__form-grid:has(#rlx-f-customer_name_search) > .rlx-field:has(#rlx-f-customer_name_search) { grid-column: 1; }
  .rlx-form.ds-modal__form-grid:has(#rlx-f-customer_phone_search) > .rlx-field:has(#rlx-f-customer_phone_search) { grid-column: 2; }
}
.rlx-form .cbx.is-readonly .cbx-input,
.rlx-form .cbx-input.is-readonly { background: color-mix(in srgb, var(--border, #d7dde6) 28%, var(--surface, #fff)); color: var(--text-muted, #7b8494); cursor: not-allowed; }

/* Section headings with a title and explanatory line must not collapse into
   one continuous sentence in RTL modals. */
.ds-form-section__title:has(> div) {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ds-form-section__title > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.ds-form-section__title > div > strong,
.ds-form-section__title > div > small {
  display: block;
  margin: 0;
}
.ds-form-section__title > div > small {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--text-muted, #667085);
}

/* Contact-tag editor: keep the name and color controls on one shared
   baseline instead of letting their different internal markup offset them. */
.rlx-form.ds-modal__form-grid.rlx-contact-tag-form {
  align-items: start;
}
.rlx-contact-tag-form > .rlx-field {
  align-self: start;
}
.rlx-contact-tag-form .ds-field__input,
.rlx-contact-tag-form .rlx-color-trigger {
  min-block-size: 46px;
}

/* Contact-group editor: the identity controls form one right-hand column
   while the narrative field owns the facing left-hand column. */
.rlx-form.ds-modal__form-grid.rlx-contact-group-form {
  align-items: start;
}
.rlx-contact-group-form > .rlx-field:has(#rlx-f-name) {
  grid-column: 1;
  grid-row: 1;
}
.rlx-contact-group-form > .rlx-field:has(#rlx-f-color) {
  grid-column: 1;
  grid-row: 2;
}
.rlx-contact-group-form > .rlx-field:has(#rlx-f-description) {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: stretch;
}
.rlx-contact-group-form > .rlx-field:has(#rlx-f-description) textarea {
  min-block-size: 100%;
  resize: none;
}
@media (max-width: 700px) {
  .rlx-contact-group-form > .rlx-field:has(#rlx-f-name),
  .rlx-contact-group-form > .rlx-field:has(#rlx-f-color),
  .rlx-contact-group-form > .rlx-field:has(#rlx-f-description) {
    grid-column: 1;
    grid-row: auto;
  }
  .rlx-contact-group-form > .rlx-field:has(#rlx-f-description) textarea {
    min-block-size: 132px;
    resize: vertical;
  }
}
.rlx-form .ds-field__label[data-tooltip] { position: relative; cursor: help; }
.rlx-form .ds-field__label[data-tooltip]::after {
  content: attr(data-tooltip); position: absolute; z-index: 20; right: 0;
  bottom: calc(100% + 8px); width: max-content; max-width: min(32rem, 80vw);
  padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--border, #d7dde6) 80%, #2c7873 20%);
  border-radius: 8px; background: var(--surface, #fff); color: var(--text, #172033);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .14); font-size: 11px; font-weight: 500;
  line-height: 1.7; opacity: 0; pointer-events: none; transform: translateY(3px);
  transition: opacity .15s ease, transform .15s ease;
}
.rlx-form .ds-field__label[data-tooltip]:hover::after,
.rlx-form .ds-field__label[data-tooltip]:focus-visible::after { opacity: 1; transform: translateY(0); }
.ds-field__tip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-inline: 3px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  vertical-align: -1px;
}

@media (max-width: 640px) {
  .cef-modal { inline-size: min(100%, calc(100vw - 16px)); max-height: calc(100vh - 16px); }
  .cef-modal .ds-form-section { padding: 12px; }
  .cef-modal [data-cef-fields-mount] { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .cef-modal .cef-customer-section { grid-template-columns:1fr; align-items:stretch; }
  .cef-modal .cef-grid--three { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cef-modal .cef-span-2 { grid-column:1 / -1; }
}

@media (max-width: 640px) {
  .cef-modal .cef-grid--three { grid-template-columns:1fr; }
  .cef-modal .cef-span-2 { grid-column:auto; }
  .cef-modal .cef-identity-head { align-items:flex-start; flex-wrap:wrap; }
  .cef-modal .cef-legal-toggle { margin-inline-start:0; inline-size:100%; box-sizing:border-box; }
}


/* Inline validation for every governed static or dynamically mounted form. */
.ds-field--invalid .ds-field__input,
.ds-field--invalid input:not([type="checkbox"]):not([type="radio"]),
.ds-field--invalid select,
.ds-field--invalid textarea,
.is-invalid.ds-field__input,
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
  border-color: var(--red-500, #e05252) !important;
  background: color-mix(in srgb, var(--red-500, #e05252) 5%, var(--surface, #fff)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--red-500, #e05252) 16%, transparent) !important;
}
.ds-governance-field-error {
  display: block;
  margin-block-start: 5px;
  color: var(--red-600, #bd3349);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.65;
  animation: dsValidationMessageIn .16s ease-out;
}
.ds-field__money-words {
  display: block;
  min-block-size: 1.55em;
  margin-block-start: 3px;
  color: var(--text-muted, #64748b);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.55;
}
.ds-field__money-words[hidden] { display: none; }
@keyframes dsValidationMessageIn {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .ds-governance-field-error { animation: none; }
}

/* Canonical dependent fields: explanatory text occupies a full row; the vehicle
   group and model follow it as one two-column pair. */
.ds-modal__form-grid > .ds-form-note {
  grid-column: 1 / -1 !important;
  inline-size: 100%;
  min-inline-size: 0;
  justify-self: stretch;
}

/* Rating field (data-ds-rating): integer 1..max picked with stars; behaviour
   in ds-form-governance.js. Same rules in design-system.css and ds-form.css. */
.ds-rating { display: inline-flex; align-items: center; gap: 2px; min-block-size: 42px; }
.ds-rating__star { inline-size: 34px; block-size: 34px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--text-faint); cursor: pointer; transition: color .15s ease, transform .15s ease, background .15s ease; }
.ds-rating__star svg, .ds-rating__star [data-ds-icon] { inline-size: 24px; block-size: 24px; color: inherit; }
.ds-rating__star.is-on, .ds-rating__star.is-preview { color: var(--amber-500); }
/* DsIcons gives «star» the amber concept tone with !important; the rating colour follows the button state instead. */
.ds-rating__star .ds-ico[data-tone], .ds-rating__star [data-ds-icon-tone] { color: inherit !important; }
.ds-rating__star:hover { transform: scale(1.12); }
.ds-rating__star:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 20%, transparent); }
.ds-rating__clear { margin-inline-start: 6px; inline-size: 28px; block-size: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--text-faint); cursor: pointer; }
.ds-rating__clear:hover { background: color-mix(in srgb, var(--brand-500) 10%, var(--surface-2)); color: var(--brand-600); }
.ds-rating__clear[hidden] { display: none; }
.ds-rating[aria-disabled="true"] { opacity: .58; pointer-events: none; }

/* Iranian vehicle plate (data-ds-plate): «12-ب-345-67» entered in four
   segments; read order is left to right like the physical plate. */
.ds-plate { display: inline-grid; inline-size: max-content; max-inline-size: 100%; justify-self: start; grid-template-columns: 34px 46px 64px 58px 66px; align-items: stretch; direction: ltr; min-block-size: 42px; border: 1px solid var(--border-strong); border-radius: var(--radius-lg, 12px); background: var(--surface); overflow: hidden; }
.ds-plate:focus-within { border-color: var(--brand-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 16%, transparent); }
.ds-plate__band { display: grid; place-items: center; padding: 2px; background: var(--brand-600); color: #fff; font-size: 8px; font-weight: 700; line-height: 1.15; text-align: center; letter-spacing: .02em; }
.ds-plate__part { inline-size: 100%; min-inline-size: 0; border: 0; border-inline-end: 1px solid var(--border); background: transparent; color: var(--text); font: inherit; font-size: 16px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; outline: 0; }
.ds-plate__letter { display: flex; align-items: stretch; border-inline-end: 1px solid var(--border); }
.ds-plate__letter .ds-dropdown { inline-size: 100%; }
.ds-plate__letter .ds-dropdown__trigger { block-size: 100%; border: 0; border-radius: 0; background: transparent; box-shadow: none; justify-content: center; font-size: 15px; font-weight: 700; padding-inline: 6px; }
.ds-plate__region { display: grid; grid-template-rows: auto 1fr; background: var(--surface-2); }
.ds-plate__region small { padding-block-start: 3px; color: var(--text-muted); font-size: 9px; text-align: center; line-height: 1; }
.ds-plate__region .ds-plate__part { border: 0; font-size: 15px; }
.ds-plate[aria-invalid="true"] { border-color: var(--red-500); }

/* Location field (data-ds-geo): latitude / longitude, «my position» and a
   Neshan map link; behaviour in ds-form-governance.js. Same rules in
   design-system.css and ds-form.css. */
.ds-geo { display: grid; gap: 8px; min-inline-size: 0; }
.ds-geo__inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ds-geo__part { text-align: center; font-variant-numeric: tabular-nums; }
.ds-geo__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.ds-geo__actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.ds-geo__actions .btn svg { inline-size: 16px; block-size: 16px; }
.ds-geo__actions [hidden] { display: none; }
.ds-geo__status { color: var(--text-muted); font-size: 11.5px; line-height: 1.6; }
.ds-geo__status:empty { display: none; }
.ds-geo[aria-invalid="true"] .ds-geo__part { border-color: var(--red-500); }

/* File attachment field (data-ds-attach): uploaded files as the catalog
   upload tile plus «افزودن فایل»; behaviour in ds-form-governance.js. Same
   rules in design-system.css and ds-form.css. */
.ds-attach { display: grid; gap: 8px; justify-items: start; min-inline-size: 0; }
.ds-attach__list { inline-size: 100%; margin: 0; padding: 0; list-style: none; }
.ds-attach__list:empty { display: none; }
.ds-attach .ds-pattern-upload__file button { display: grid; place-items: center; }
.ds-attach .ds-pattern-upload__file button svg { inline-size: 16px; block-size: 16px; }
.ds-attach__add { display: inline-flex; align-items: center; gap: 6px; }
.ds-attach__add svg { inline-size: 16px; block-size: 16px; }
.ds-attach__status { color: var(--text-muted); font-size: 11.5px; line-height: 1.6; }
.ds-attach__status:empty { display: none; }
.ds-attach[aria-disabled="true"] .ds-pattern-upload__file button { display: none; }