/*
 * Core components — DESIGN_SYSTEM_Directory.md §10–§32 + resolved decisions (CLAUDE.md)
 * - Class names: ds-* (BEM), states: is-* (unprefixed).
 * - Tokens only: every value comes from tokens.css.
 * - Logical properties only (RTL first). No physical left/right.
 * - Breakpoints (media queries cannot read custom properties):
 *     tablet  @media (min-width: 640px)
 *     desktop @media (min-width: 1024px)
 * - No JavaScript here. Modal is visual only (wired to Bootstrap modal JS in a later phase).
 */

/* =========================================================================
   Shared helpers
   ========================================================================= */

.ds-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.ds-icon {
  display: inline-block;
  flex-shrink: 0;
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
}

/* =========================================================================
   Button (§10.1 + resolved P1-7)
   <button class="ds-button ds-button--primary">…</button>
   Sizes: --sm / (default md) / --lg. Variants: --primary --secondary --ghost --danger.
   ========================================================================= */

.ds-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--button-gap);
  min-height: var(--button-height-md);
  padding-block: 0;
  padding-inline: var(--button-padding-inline-md);
  border: var(--border-width) solid transparent;
  border-radius: var(--button-radius);
  background-color: transparent;
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--button-font-size-md);
  font-weight: var(--button-font-weight);
  line-height: var(--control-line-height);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--motion-duration-fast) var(--motion-easing),
    border-color var(--motion-duration-fast) var(--motion-easing),
    color var(--motion-duration-fast) var(--motion-easing);
}

.ds-button:hover,
.ds-button:visited {
  text-decoration: none;
}

.ds-button .ds-icon {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

/* Sizes */
.ds-button--sm {
  min-height: var(--button-height-sm);
  padding-inline: var(--button-padding-inline-sm);
  font-size: var(--button-font-size-sm);
}

.ds-button--lg {
  min-height: var(--button-height-lg);
  padding-inline: var(--button-padding-inline-lg);
  font-size: var(--button-font-size-lg);
}

.ds-button--lg .ds-icon {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
}

/* Primary */
.ds-button--primary,
.ds-button--primary:visited {
  background-color: var(--button-primary-bg);
  color: var(--button-primary-text);
}

.ds-button--primary:hover {
  background-color: var(--button-primary-bg-hover);
  color: var(--button-primary-text);
}

.ds-button--primary:active {
  background-color: var(--button-primary-bg-active);
  color: var(--button-primary-text);
}

/* Secondary */
.ds-button--secondary,
.ds-button--secondary:visited {
  background-color: var(--button-secondary-bg);
  border-color: var(--button-secondary-border);
  color: var(--button-secondary-text);
}

.ds-button--secondary:hover {
  background-color: var(--button-secondary-bg-hover);
  color: var(--button-secondary-text);
}

.ds-button--secondary:active {
  background-color: var(--button-secondary-bg-active);
  color: var(--button-secondary-text);
}

/* Ghost */
.ds-button--ghost,
.ds-button--ghost:visited {
  background-color: transparent;
  color: var(--button-ghost-text);
}

.ds-button--ghost:hover {
  background-color: var(--button-ghost-bg-hover);
  color: var(--button-ghost-text);
}

.ds-button--ghost:active {
  background-color: var(--button-ghost-bg-hover);
  color: var(--button-ghost-text-active);
}

/* Danger */
.ds-button--danger,
.ds-button--danger:visited {
  background-color: var(--button-danger-bg);
  color: var(--button-danger-text);
}

.ds-button--danger:hover {
  background-color: var(--button-danger-bg-hover);
  color: var(--button-danger-text);
}

.ds-button--danger:active {
  background-color: var(--button-danger-bg-active);
  color: var(--button-danger-text);
}

/* Icon-only (square). Requires aria-label on the element. */
.ds-button--icon {
  padding-inline: 0;
  width: var(--button-height-md);
}

.ds-button--icon.ds-button--sm {
  width: var(--button-height-sm);
}

.ds-button--icon.ds-button--lg {
  width: var(--button-height-lg);
}

/* Full width */
.ds-button--block {
  display: flex;
  width: 100%;
}

/* Disabled */
.ds-button:disabled,
.ds-button.is-disabled,
.ds-button[aria-disabled="true"] {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

/* Loading: label stays in the DOM (screen readers), is made invisible; width is preserved. */
.ds-button.is-loading {
  color: transparent;
  cursor: progress;
  pointer-events: none;
}

.ds-button.is-loading > * {
  visibility: hidden;
}

.ds-button.is-loading::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: var(--spinner-size);
  height: var(--spinner-size);
  margin-block-start: calc(var(--spinner-size) / -2);
  margin-inline-start: calc(var(--spinner-size) / -2);
  border: var(--spinner-border-width) solid;
  border-color: var(--button-primary-text);
  border-block-start-color: transparent;
  border-radius: var(--radius-pill);
  animation: ds-spin var(--spinner-duration) linear infinite;
}

.ds-button--secondary.is-loading::after,
.ds-button--ghost.is-loading::after {
  border-color: var(--color-primary);
  border-block-start-color: transparent;
}

@keyframes ds-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ds-button.is-loading::after {
    animation: none;
  }
}

/* =========================================================================
   Link-styled action — low emphasis (ManagementActions, §30)
   ========================================================================= */

.ds-link-action,
.ds-link-action:visited {
  display: inline-flex;
  align-items: center;
  gap: var(--button-gap);
  padding: 0;
  border: 0;
  background: none;
  color: var(--link-action-color);
  font-family: inherit;
  font-size: var(--link-action-font-size);
  font-weight: var(--link-action-font-weight);
  text-decoration: none;
  cursor: pointer;
}

.ds-link-action:hover {
  color: var(--link-action-color-hover);
  text-decoration: underline;
}

.ds-link-action:disabled,
.ds-link-action.is-disabled,
.ds-link-action[aria-disabled="true"] {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

/* =========================================================================
   Input / Textarea / Select (§11)
   ========================================================================= */

.ds-input,
.ds-textarea,
.ds-select {
  display: block;
  width: 100%;
  min-height: var(--input-height);
  padding-block: 0;
  padding-inline: var(--input-padding-inline);
  border: var(--border-width) solid var(--input-border);
  border-radius: var(--input-radius);
  background-color: var(--input-bg);
  color: var(--input-text);
  font-family: inherit;
  font-size: var(--input-font-size);
  line-height: var(--control-line-height);
  transition:
    border-color var(--motion-duration-fast) var(--motion-easing),
    box-shadow var(--motion-duration-fast) var(--motion-easing);
}

.ds-textarea {
  min-height: var(--textarea-min-height);
  padding-block: var(--textarea-padding-block);
  line-height: var(--line-height-body);
  resize: vertical;
}

/* Native select: keeps the browser's arrow (placed on the inline-end side automatically in RTL). */
.ds-select {
  cursor: pointer;
}

.ds-input::placeholder,
.ds-textarea::placeholder {
  color: var(--input-placeholder);
  opacity: 1;
}

.ds-input:hover,
.ds-textarea:hover,
.ds-select:hover {
  border-color: var(--input-border-hover);
}

.ds-input:focus,
.ds-textarea:focus,
.ds-select:focus {
  outline: none;
  border-color: var(--focus-border-color);
  box-shadow: var(--focus-ring);
}

.ds-input:disabled,
.ds-textarea:disabled,
.ds-select:disabled,
.ds-input.is-disabled,
.ds-textarea.is-disabled,
.ds-select.is-disabled {
  border-color: var(--input-border);
  background-color: var(--input-disabled-bg);
  color: var(--input-disabled-text);
  cursor: not-allowed;
}

.ds-input.is-error,
.ds-textarea.is-error,
.ds-select.is-error,
.ds-form-field .input-validation-error {
  border-color: var(--input-error-border);
}

.ds-input.is-error:focus,
.ds-textarea.is-error:focus,
.ds-select.is-error:focus,
.ds-form-field .input-validation-error:focus {
  border-color: var(--input-error-border);
}

/* =========================================================================
   Checkbox / radio — native controls, accent-color
   <label class="ds-check"><input type="checkbox"> نص</label>
   ========================================================================= */

.ds-check {
  display: inline-flex;
  align-items: center;
  gap: var(--check-gap);
  min-height: var(--button-height-sm);
  color: var(--color-text);
  font-size: var(--font-size-body);
  cursor: pointer;
}

.ds-check input[type="checkbox"],
.ds-check input[type="radio"] {
  flex-shrink: 0;
  width: var(--check-size);
  height: var(--check-size);
  margin: 0;
  accent-color: var(--check-accent);
  cursor: pointer;
}

.ds-check input:disabled {
  cursor: not-allowed;
}

.ds-check.is-disabled,
.ds-check:has(input:disabled) {
  color: var(--input-disabled-text);
  cursor: not-allowed;
}

/* =========================================================================
   FormField (§24) + ASP.NET validation output (no markup changes needed)
   ========================================================================= */

.ds-form-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ds-form-field__label {
  display: block;
  margin-block-end: var(--label-gap);
  color: var(--label-color);
  font-size: var(--label-font-size);
  font-weight: var(--label-font-weight);
  line-height: var(--line-height-h3);
}

.ds-form-field__helper {
  margin-block-start: var(--helper-margin-top);
  color: var(--helper-color);
  font-size: var(--helper-font-size);
  line-height: var(--line-height-body);
}

.ds-form-field__error,
.ds-form-field .field-validation-error {
  display: block;
  margin-block-start: var(--helper-margin-top);
  color: var(--input-error-text);
  font-size: var(--error-text-font-size);
  line-height: var(--line-height-body);
}

.ds-form-field .field-validation-valid {
  display: none;
}

.ds-form-field.is-error .ds-input,
.ds-form-field.is-error .ds-textarea,
.ds-form-field.is-error .ds-select {
  border-color: var(--input-error-border);
}

/* Validation summary (asp-validation-summary) uses the error Alert style */
.ds-form .validation-summary-errors {
  margin-block-end: var(--form-field-gap);
  padding-block: var(--alert-padding-block);
  padding-inline: var(--alert-padding-inline);
  border: var(--border-width) solid var(--color-danger-border);
  border-radius: var(--alert-radius);
  background-color: var(--color-danger-bg);
  color: var(--color-danger-text);
  font-size: var(--alert-font-size);
}

.ds-form .validation-summary-errors ul {
  margin: 0;
  padding-inline-start: var(--space-16);
}

.ds-form .validation-summary-valid {
  display: none;
}

/* =========================================================================
   FormSection (§25)
   <section class="ds-form-section"><h2 class="ds-form-section__title">…</h2>
     <div class="ds-form-section__fields [ds-form-section__fields--2col]">…</div></section>
   ========================================================================= */

.ds-form-section + .ds-form-section {
  margin-block-start: var(--form-section-gap);
}

.ds-form-section__title {
  margin-block: 0 var(--form-field-gap);
  color: var(--color-text);
  font-size: var(--form-section-title-font-size);
  font-weight: var(--form-section-title-font-weight);
  line-height: var(--line-height-h3);
}

.ds-form-section__fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--form-field-gap);
}

@media (min-width: 1024px) {
  .ds-form-section__fields--2col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--form-section-column-gap);
  }

  .ds-form-section__fields--2col > .ds-form-field--full {
    grid-column: 1 / -1;
  }
}

/* =========================================================================
   SearchInput (§12, §33, resolved P1-9)
   <form class="ds-search [ds-search--compact | ds-search--mobile]" role="search">
     <div class="ds-search__field">
       <input class="ds-search__input" type="search" placeholder="…" aria-label="…">
       <button class="ds-search__clear" type="reset" aria-label="مسح البحث">×</button>
     </div>
     <button class="ds-search__button" type="submit">بحث</button>
   </form>
   ========================================================================= */

.ds-search {
  display: flex;
  align-items: stretch;
  width: 100%;
}

.ds-search__field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.ds-search__input {
  display: block;
  width: 100%;
  height: var(--search-height);
  padding-block: 0;
  padding-inline: var(--input-padding-inline) var(--search-clear-space);
  border: var(--border-width) solid var(--input-border);
  border-inline-end-width: 0;
  border-start-start-radius: var(--search-radius);
  border-end-start-radius: var(--search-radius);
  border-start-end-radius: 0;
  border-end-end-radius: 0;
  background-color: var(--input-bg);
  color: var(--input-text);
  font-family: inherit;
  font-size: var(--search-font-size);
  line-height: var(--control-line-height);
  -webkit-appearance: none;
  appearance: none;
}

.ds-search__input::placeholder {
  color: var(--input-placeholder);
  opacity: 1;
}

/* Hide the browser's own clear control; the component provides one. */
.ds-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.ds-search__input:hover {
  border-color: var(--input-border-hover);
}

.ds-search__input:focus {
  outline: none;
  border-color: var(--focus-border-color);
  box-shadow: var(--focus-ring);
}

.ds-search__clear {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: var(--space-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--search-clear-size);
  height: var(--search-clear-size);
  margin-block-start: calc(var(--search-clear-size) / -2);
  padding: 0;
  border: 0;
  border-radius: var(--button-radius);
  background: transparent;
  color: var(--color-text-muted);
  font-family: inherit;
  font-size: var(--font-size-h3);
  line-height: 1;
  cursor: pointer;
}

.ds-search__clear:hover {
  background-color: var(--button-ghost-bg-hover);
  color: var(--color-text);
}

/* CSS-only: hidden while the input is empty (requires a placeholder attribute). */
.ds-search__input:placeholder-shown + .ds-search__clear {
  display: none;
}

.ds-search__button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: var(--button-gap);
  min-width: var(--search-button-min-width);
  height: var(--search-height);
  padding-inline: var(--button-padding-inline-md);
  border: var(--border-width) solid var(--button-primary-bg);
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  border-start-end-radius: var(--search-radius);
  border-end-end-radius: var(--search-radius);
  background-color: var(--button-primary-bg);
  color: var(--button-primary-text);
  font-family: inherit;
  font-size: var(--font-size-body);
  font-weight: var(--button-font-weight);
  line-height: var(--control-line-height);
  cursor: pointer;
  transition: background-color var(--motion-duration-fast) var(--motion-easing);
}

.ds-search__button:hover {
  border-color: var(--button-primary-bg-hover);
  background-color: var(--button-primary-bg-hover);
}

.ds-search__button:active {
  border-color: var(--button-primary-bg-active);
  background-color: var(--button-primary-bg-active);
}

.ds-search__button .ds-icon {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
}

/* Loading keeps the button width */
.ds-search__button.is-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.ds-search__button.is-loading > * {
  visibility: hidden;
}

.ds-search__button.is-loading::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: var(--spinner-size);
  height: var(--spinner-size);
  margin-block-start: calc(var(--spinner-size) / -2);
  margin-inline-start: calc(var(--spinner-size) / -2);
  border: var(--spinner-border-width) solid var(--button-primary-text);
  border-block-start-color: transparent;
  border-radius: var(--radius-pill);
  animation: ds-spin var(--spinner-duration) linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ds-search__button.is-loading::after {
    animation: none;
  }
}

/* Compact (header on Results / Item): 40px, square icon button */
.ds-search--compact .ds-search__input {
  height: var(--search-compact-height);
  border-start-start-radius: var(--input-radius);
  border-end-start-radius: var(--input-radius);
  font-size: var(--input-font-size);
}

.ds-search--compact .ds-search__button {
  min-width: var(--search-compact-button-size);
  width: var(--search-compact-button-size);
  height: var(--search-compact-height);
  padding-inline: 0;
  border-start-end-radius: var(--input-radius);
  border-end-end-radius: var(--input-radius);
}

/* Mobile: 48px, full-width input, square icon-only 48px button (aria-label "بحث") */
.ds-search--mobile .ds-search__input {
  height: var(--search-mobile-height);
}

.ds-search--mobile .ds-search__button {
  min-width: var(--search-mobile-button-size);
  width: var(--search-mobile-button-size);
  height: var(--search-mobile-height);
  padding-inline: 0;
}

/* =========================================================================
   Card (§13, resolved P1-8)
   ========================================================================= */

.ds-card {
  display: block;
  padding: var(--card-padding);
  border: var(--border-width) solid var(--card-border-color);
  border-radius: var(--card-radius);
  background-color: var(--card-bg);
  color: var(--color-text);
}

@media (min-width: 640px) {
  .ds-card {
    padding: var(--card-padding-lg);
  }
}

/* Clickable card: border changes on hover, no shadow */
.ds-card--clickable {
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--motion-duration-fast) var(--motion-easing);
}

.ds-card--clickable,
.ds-card--clickable:visited,
.ds-card--clickable:hover {
  color: var(--color-text);
  text-decoration: none;
}

.ds-card--clickable:hover,
.ds-card--clickable:focus-within {
  border-color: var(--card-border-color-hover);
}

/* =========================================================================
   Badge (§17, resolved P1-11) — states only
   ========================================================================= */

.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  height: var(--badge-height);
  padding-inline: var(--badge-padding-inline);
  border-radius: var(--badge-radius);
  font-size: var(--badge-font-size);
  font-weight: var(--badge-font-weight);
  line-height: 1;
  white-space: nowrap;
  background-color: var(--badge-neutral-bg);
  color: var(--badge-neutral-text);
}

.ds-badge--success {
  background-color: var(--color-success-bg);
  color: var(--color-success-text);
}

.ds-badge--warning {
  background-color: var(--color-warning-bg);
  color: var(--color-warning-text);
}

.ds-badge--danger {
  background-color: var(--color-danger-bg);
  color: var(--color-danger-text);
}

.ds-badge--info {
  background-color: var(--color-info-bg);
  color: var(--color-info-text);
}

.ds-badge--neutral {
  background-color: var(--badge-neutral-bg);
  color: var(--badge-neutral-text);
}

/* =========================================================================
   Tag (§17, resolved P1-11) — properties / categories
   ========================================================================= */

.ds-tag,
a.ds-tag:visited {
  display: inline-flex;
  align-items: center;
  height: var(--tag-height);
  padding-inline: var(--tag-padding-inline);
  border: var(--border-width) solid var(--tag-border-color);
  border-radius: var(--tag-radius);
  background-color: var(--tag-bg);
  color: var(--tag-text);
  font-size: var(--tag-font-size);
  font-weight: var(--tag-font-weight);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}

a.ds-tag:hover {
  border-color: var(--input-border);
  color: var(--color-text);
  text-decoration: none;
}

.ds-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* =========================================================================
   Breadcrumbs (§16)
   <nav aria-label="مسار التنقل"><ol class="ds-breadcrumbs">
     <li class="ds-breadcrumbs__item"><a href="/">الرئيسية</a></li>
     <li class="ds-breadcrumbs__item" aria-current="page">مطاعم</li></ol></nav>
   ========================================================================= */

.ds-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 var(--breadcrumb-margin-bottom);
  padding: 0;
  list-style: none;
  font-size: var(--breadcrumb-font-size);
  line-height: var(--line-height-body);
}

.ds-breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.ds-breadcrumbs__item + .ds-breadcrumbs__item::before {
  content: var(--breadcrumb-separator);
  margin-inline: var(--breadcrumb-gap);
  color: var(--breadcrumb-separator-color);
}

.ds-breadcrumbs__item a,
.ds-breadcrumbs__item a:visited {
  color: var(--breadcrumb-link-color);
  text-decoration: none;
}

.ds-breadcrumbs__item a:hover {
  color: var(--breadcrumb-link-hover-color);
  text-decoration: underline;
}

.ds-breadcrumbs__item[aria-current="page"] {
  color: var(--breadcrumb-current-color);
}

/* =========================================================================
   Alert (§31)
   <div class="ds-alert ds-alert--info" role="status">
     <svg class="ds-alert__icon" aria-hidden="true">…</svg>
     <div class="ds-alert__body"><p class="ds-alert__title">…</p><p class="ds-alert__text">…</p></div></div>
   ========================================================================= */

.ds-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--alert-gap);
  padding-block: var(--alert-padding-block);
  padding-inline: var(--alert-padding-inline);
  border: var(--border-width) solid var(--color-info-border);
  border-radius: var(--alert-radius);
  background-color: var(--color-info-bg);
  color: var(--color-info-text);
  font-size: var(--alert-font-size);
  line-height: var(--line-height-body);
}

.ds-alert__icon {
  flex-shrink: 0;
  width: var(--alert-icon-size);
  height: var(--alert-icon-size);
  margin-block-start: calc((var(--alert-font-size) * var(--line-height-body) - var(--alert-icon-size)) / 2);
  fill: none;
  stroke: currentColor;
}

.ds-alert__body {
  min-width: 0;
}

.ds-alert__title {
  margin: 0;
  font-weight: var(--alert-title-font-weight);
}

.ds-alert__text {
  margin: 0;
}

.ds-alert--info {
  border-color: var(--color-info-border);
  background-color: var(--color-info-bg);
  color: var(--color-info-text);
}

.ds-alert--success {
  border-color: var(--color-success-border);
  background-color: var(--color-success-bg);
  color: var(--color-success-text);
}

.ds-alert--warning {
  border-color: var(--color-warning-border);
  background-color: var(--color-warning-bg);
  color: var(--color-warning-text);
}

.ds-alert--error {
  border-color: var(--color-danger-border);
  background-color: var(--color-danger-bg);
  color: var(--color-danger-text);
}

/* =========================================================================
   Tabs (§18) — horizontal scroll on narrow screens, never wraps
   <div class="ds-tabs" role="tablist" aria-label="…">
     <button class="ds-tabs__tab is-active" role="tab" aria-selected="true">…</button> …</div>
   ========================================================================= */

.ds-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--tabs-gap);
  overflow-x: auto;
  overflow-y: hidden;
  border-block-end: var(--border-width) solid var(--tabs-border-color);
  /* Scrollbar hidden: the cut-off last tab signals more content; still scrollable by touch, wheel and keyboard focus */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.ds-tabs::-webkit-scrollbar {
  display: none;
}

.ds-tabs__tab,
.ds-tabs__tab:visited {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  height: var(--tabs-height);
  padding: 0;
  border: 0;
  border-block-end: var(--tabs-indicator-width) solid transparent;
  background: none;
  color: var(--tabs-color);
  font-family: inherit;
  font-size: var(--tabs-font-size);
  font-weight: var(--tabs-font-weight);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}

.ds-tabs__tab:hover {
  color: var(--color-text);
  text-decoration: none;
}

.ds-tabs__tab.is-active,
.ds-tabs__tab[aria-selected="true"] {
  border-block-end-color: var(--tabs-active-color);
  color: var(--tabs-active-color);
}

/* Outline is drawn inside so it isn't clipped by the scroll container */
.ds-tabs__tab:focus-visible {
  outline-offset: calc(var(--focus-outline-width) * -1);
}

/* =========================================================================
   Pagination (§22, resolved D8) — Previous / Next + optional "صفحة N"
   <nav class="ds-pagination" aria-label="التنقل بين الصفحات">
     <a class="ds-pagination__link" href="…" rel="prev">‹ السابق</a>
     <span class="ds-pagination__info">صفحة 3</span>
     <span class="ds-pagination__link is-disabled" aria-disabled="true">التالي ›</span></nav>
   ========================================================================= */

.ds-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pagination-gap);
}

.ds-pagination__link,
.ds-pagination__link:visited {
  display: inline-flex;
  align-items: center;
  gap: var(--button-gap);
  min-height: var(--button-height-md);
  padding-inline: var(--button-padding-inline-md);
  border: var(--border-width) solid var(--button-secondary-border);
  border-radius: var(--pagination-radius);
  background-color: var(--button-secondary-bg);
  color: var(--button-secondary-text);
  font-size: var(--button-font-size-md);
  font-weight: var(--button-font-weight);
  white-space: nowrap;
  text-decoration: none;
}

.ds-pagination__link:hover {
  background-color: var(--button-secondary-bg-hover);
  color: var(--button-secondary-text);
  text-decoration: none;
}

.ds-pagination__link.is-disabled,
.ds-pagination__link[aria-disabled="true"] {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

.ds-pagination__info {
  color: var(--pagination-info-color);
  font-size: var(--pagination-info-font-size);
  white-space: nowrap;
}

/* Current page chip (§22) — for numbered pagination if the data ever supports it */
.ds-pagination__current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--button-height-md);
  min-height: var(--button-height-md);
  padding-inline: var(--space-8);
  border-radius: var(--pagination-radius);
  background-color: var(--pagination-current-bg);
  color: var(--pagination-current-text);
  font-size: var(--button-font-size-md);
  font-weight: var(--button-font-weight);
}

/* =========================================================================
   PageHeader (§23)
   ========================================================================= */

.ds-page-header {
  display: flex;
  flex-direction: column;
  gap: var(--page-header-gap);
  padding-block: var(--page-header-padding-block);
}

.ds-page-header__title {
  margin: 0;
}

.ds-page-header__description {
  margin: 0;
  color: var(--page-header-description-color);
  font-size: var(--font-size-body);
}

.ds-page-header__meta {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

/* =========================================================================
   EmptyState / ErrorState (§32)
   Default: no border or background, centered (§2: no large decorative cards).
   Optional ds-state--boxed: bordered surface, for use inside a page section.
   ========================================================================= */

.ds-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--state-gap);
  max-width: var(--state-max-width);
  margin-inline: auto;
  padding-block: var(--state-padding-block);
  text-align: center;
}

.ds-state__icon {
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
  color: var(--state-icon-color);
  fill: none;
  stroke: currentColor;
}

.ds-state__title {
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-h3);
  line-height: var(--line-height-h3);
}

.ds-state__text {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
}

.ds-state__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--button-gap);
  margin-block-start: var(--space-4);
}

.ds-state--error .ds-state__icon {
  color: var(--state-error-icon-color);
}

.ds-state--boxed {
  max-width: none;
  padding-inline: var(--card-padding);
  border: var(--border-width) solid var(--card-border-color);
  border-radius: var(--card-radius);
  background-color: var(--card-bg);
}

@media (min-width: 640px) {
  .ds-state--boxed {
    padding-inline: var(--card-padding-lg);
  }
}

/* =========================================================================
   Modal (§19) — visual only
   <div class="ds-modal" role="dialog" aria-modal="true" aria-labelledby="…">
     <div class="ds-modal__panel [ds-modal__panel--sm|--lg]">
       <div class="ds-modal__header"><h2 class="ds-modal__title">…</h2>
         <button class="ds-button ds-button--ghost ds-button--icon ds-button--sm ds-modal__close" aria-label="إغلاق">×</button></div>
       <div class="ds-modal__body">…</div>
       <div class="ds-modal__footer">…</div></div></div>
   ========================================================================= */

.ds-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-index-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--modal-viewport-margin);
  background-color: var(--modal-overlay);
  overflow-y: auto;
}

.ds-modal__panel {
  display: flex;
  flex-direction: column;
  gap: var(--modal-header-gap);
  width: 100%;
  max-width: var(--modal-width-md);
  max-height: 100%;
  padding: var(--modal-padding);
  border: var(--border-width) solid var(--modal-border-color);
  border-radius: var(--modal-radius);
  background-color: var(--modal-bg);
  box-shadow: var(--modal-shadow);
  overflow-y: auto;
}

.ds-modal__panel--sm {
  max-width: var(--modal-width-sm);
}

.ds-modal__panel--lg {
  max-width: var(--modal-width-lg);
}

.ds-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--modal-header-gap);
}

.ds-modal__title {
  margin: 0;
  font-size: var(--modal-title-font-size);
  font-weight: var(--font-weight-h3);
  line-height: var(--line-height-h3);
}

.ds-modal__close {
  flex-shrink: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-h3);
  line-height: 1;
}

.ds-modal__body {
  color: var(--color-text-secondary);
}

.ds-modal__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--modal-footer-gap);
}


/* =========================================================================
   SectionHead — section title + optional low-emphasis link (Home, Item)
   <div class="ds-section-head"><h2 class="ds-section-head__title">…</h2><a class="ds-link-action" href="…">…</a></div>
   ========================================================================= */

.ds-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-8) var(--space-16);
  margin-block-end: var(--space-16);
}

.ds-section-head .ds-section-head__title {
  margin: 0;
  font-size: var(--font-size-h2-mobile);
  line-height: var(--line-height-h2);
}

@media (min-width: 640px) {
  .ds-section-head .ds-section-head__title {
    font-size: var(--font-size-h2);
  }
}

/* =========================================================================
   CategoryItem (§15) — letter badge + name + chevron. Data-driven: the badge is the
   first letter of the category name (Arabic or Latin), no per-category icons.
   <ul class="ds-category-grid"><li><a class="ds-category-item" href="…">
     <span class="ds-letter-badge" aria-hidden="true">م</span><span class="ds-category-item__name">مطاعم</span>
     <i class="fa-solid fa-chevron-left ds-category-item__chevron" aria-hidden="true"></i></a></li></ul>
   ========================================================================= */

.ds-category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .ds-category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-12);
  }
}

@media (min-width: 1024px) {
  .ds-category-grid {
    grid-template-columns: repeat(auto-fill, minmax(var(--category-item-min-width), 1fr));
  }
}

.ds-category-item,
.ds-category-item:visited {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  box-sizing: border-box;
  min-height: var(--space-64);
  padding-inline: var(--space-12);
  border: var(--border-width) solid var(--card-border-color);
  border-radius: var(--radius-card);
  background-color: var(--card-bg);
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.ds-category-item:hover {
  border-color: var(--card-border-color-hover);
  color: var(--color-primary);
  text-decoration: none;
}

.ds-category-item__name {
  flex: 1;
  min-width: 0;
  line-height: var(--line-height-h3);
  overflow-wrap: anywhere;
}

.ds-category-item__chevron {
  flex-shrink: 0;
  color: var(--color-placeholder);
  font-size: var(--icon-size-sm);
}

/* The chevron points to the inline end: left in RTL (fa-chevron-left), mirrored on LTR sites */
[dir="ltr"] .ds-category-item__chevron {
  transform: scaleX(-1);
}

.ds-letter-badge {
  display: inline-grid;
  flex-shrink: 0;
  place-items: center;
  width: var(--space-40);
  height: var(--space-40);
  border-radius: var(--radius-button);
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
}