/*
 * Results page — Views/Home/Results.cshtml
 * Composition (DESIGN_SYSTEM_Directory.md): context (breadcrumb · h1 · count) on the page background, then ONE
 * results sheet — a white surface whose top edge is the toolbar (FilterBar §21 + count + "قائمتي"), followed by
 * active filters, a ranked list of ResultCards (§14, divider-separated, no card grid, no image) and pagination (§22).
 * Desktop ≥1024px: sticky toolbar, filters as popovers, details panel beside the sheet.
 * Mobile/tablet: one "الفلاتر" entry to a Bottom Sheet (§20), active filters stay visible, "3 من 13" pagination.
 * Tokens only (DS palette, spacing, radius; shadows only for popovers/sheets §7), logical properties only.
 * Loaded from @section styles (before the ds files) → selectors are scoped under .ds-results.
 */

.ds-results {
  padding-block-end: var(--space-48);
  background-color: var(--color-background);
  /* The legacy site CSS sets body text-align:left; RTL text starts on the right */
  text-align: start;
}

/* ===================== Context ===================== */

.ds-results .ds-results__context {
  padding-block: var(--space-20) var(--space-16);
}

.ds-results .ds-results__context .ds-breadcrumbs {
  margin: 0 0 var(--space-8);
}

.ds-results .ds-results__heading {
  display: grid;
  gap: var(--space-4);
}

.ds-results .ds-results__title {
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-size-h1-mobile);
  font-weight: var(--font-weight-h1);
  line-height: var(--line-height-h1);
}

.ds-results .ds-results__summary {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
  font-variant-numeric: tabular-nums;
}

.ds-results .ds-results__count {
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}

.ds-results .ds-results__summary-page {
  color: var(--color-text-muted);
}

@media (min-width: 1024px) {
  .ds-results .ds-results__context {
    padding-block: var(--space-24);
  }

  .ds-results .ds-results__title {
    font-size: var(--font-size-h1);
  }
}

/* ===================== Layout: sheet + details panel ===================== */

.ds-results .ds-results__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--space-24);
}

@media (min-width: 1024px) {
  .ds-results .ds-results__layout.is-panel-open {
    grid-template-columns: minmax(0, 1fr) var(--results-panel-width);
  }
}

/* The results sheet */
.ds-results .ds-results__sheet-main {
  min-width: 0;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-card);
  background-color: var(--color-surface);
}

@media (max-width: 639.98px) {
  /* Phones: the sheet runs edge to edge so rows keep their full width */
  .ds-results .ds-results__sheet-main {
    margin-inline: calc(var(--container-padding-mobile) * -1);
    border-inline: 0;
    border-radius: 0;
  }
}

/* ===================== Toolbar (FilterBar §21) ===================== */

.ds-results .ds-results__toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-16);
  border-block-end: var(--border-width) solid var(--color-border);
  border-start-start-radius: var(--radius-card);
  border-start-end-radius: var(--radius-card);
  background-color: var(--color-surface);
}

@media (min-width: 1024px) {
  .ds-results .ds-results__toolbar {
    position: sticky;
    inset-block-start: calc(var(--header-height-desktop) - var(--border-width));
    z-index: calc(var(--z-index-header) - 1);
    min-height: var(--results-filterbar-height);
    box-sizing: border-box;
    padding-inline: var(--space-20);
  }
}

@media (max-width: 639.98px) {
  .ds-results .ds-results__toolbar {
    border-radius: 0;
  }
}

.ds-results .ds-results__filters {
  display: none;
  align-items: center;
  gap: var(--space-8);
  min-width: 0;
}

@media (min-width: 1024px) {
  .ds-results .ds-results__filters {
    display: flex;
  }

  .ds-results .ds-results__toolbar .ds-results__filter-toggle {
    display: none;
  }
}

/* Filter control: 40px, neutral; active = DS active filter colours */
.ds-results .ds-results__filter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  box-sizing: border-box;
  max-width: 100%;
  min-height: var(--filter-height);
  padding-inline: var(--space-12);
  border: var(--border-width) solid var(--color-input-border);
  border-radius: var(--radius-button);
  background-color: var(--color-surface);
  color: var(--color-text-strong-secondary);
  font: inherit;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  line-height: var(--control-line-height);
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
  transition: border-color var(--motion-duration-fast) var(--motion-easing),
              background-color var(--motion-duration-fast) var(--motion-easing);
}

.ds-results .ds-results__filter::-webkit-details-marker {
  display: none;
}

.ds-results .ds-results__filter > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-results .ds-results__filter:hover {
  border-color: var(--input-border-hover);
  background-color: var(--color-background);
}

.ds-results .ds-results__filter.is-active {
  border-color: var(--filter-active-border);
  background-color: var(--filter-active-bg);
  color: var(--filter-active-text);
}

.ds-results .ds-results__caret {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  transition: transform var(--motion-duration-fast) var(--motion-easing);
}

.ds-results .ds-results__filter.is-active .ds-results__caret {
  color: currentColor;
}

.ds-results .ds-results__drop[open] .ds-results__caret {
  transform: rotate(180deg);
}

.ds-results .ds-results__filter-count {
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  min-width: var(--space-20);
  height: var(--space-20);
  padding-inline: var(--space-4);
  border-radius: var(--radius-pill);
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--font-size-caption);
  font-variant-numeric: tabular-nums;
}

/* Popovers (§20: desktop filters use dropdown/popover) */
.ds-results .ds-results__drop {
  position: relative;
  min-width: 0;
}

.ds-results .ds-results__pop {
  position: absolute;
  inset-block-start: calc(100% + var(--space-4));
  inset-inline-start: 0;
  z-index: var(--z-index-header);
  box-sizing: border-box;
  width: var(--results-dropdown-width);
  max-height: 60vh;
  padding: var(--space-8);
  overflow: auto;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-card);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-dropdown);
}

.ds-results .ds-results__drop--wide .ds-results__pop {
  width: var(--modal-width-md);
  max-width: calc(100vw - var(--space-48));
}

.ds-results .ds-results__pop-title {
  margin: var(--space-4) var(--space-8) var(--space-8);
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
}

.ds-results .ds-results__options {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ds-results .ds-results__options--columns {
  columns: 3;
  column-gap: var(--space-4);
}

.ds-results .ds-results__options li {
  break-inside: avoid;
}

.ds-results .ds-results__options a,
.ds-results .ds-results__options a:visited {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  min-height: var(--button-height-md);
  padding-inline: var(--space-12);
  border-radius: var(--radius-button);
  color: var(--color-text);
  font-size: var(--font-size-small);
  text-decoration: none;
}

.ds-results .ds-results__options a:hover {
  background-color: var(--color-background);
  color: var(--color-primary);
}

.ds-results .ds-results__options a[aria-current="true"] {
  background-color: var(--filter-active-bg);
  color: var(--filter-active-text);
  font-weight: var(--font-weight-semibold);
}

.ds-results .ds-results__options a[aria-current="true"]::after {
  content: "✓";
  font-size: var(--font-size-small);
}

/* Count + "قائمتي" at the toolbar end */
.ds-results .ds-results__toolbar-end {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  margin-inline-start: auto;
}

.ds-results .ds-results__saved-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-height: var(--filter-height); /* same height as the filter controls on this bar */
  padding-inline: var(--space-12);
  border: 0;
  border-radius: var(--radius-button);
  background: transparent;
  color: var(--color-text-strong-secondary);
  font: inherit;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: pointer;
}

.ds-results .ds-results__saved-btn:hover {
  background-color: var(--button-ghost-bg-hover);
  color: var(--color-primary);
}

.ds-results .ds-results__saved-btn[hidden] {
  display: none;
}

/* ===================== Active filters ===================== */

.ds-results .ds-results__active {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-16);
  border-block-end: var(--border-width) solid var(--color-border);
}

@media (min-width: 1024px) {
  .ds-results .ds-results__active {
    padding-inline: var(--space-20);
  }
}

.ds-results .ds-results__active-chip,
.ds-results .ds-results__active-chip:visited {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-height: var(--button-height-sm);
  padding-inline: var(--space-12);
  border: var(--border-width) solid var(--filter-active-border);
  border-radius: var(--radius-button);
  background-color: var(--filter-active-bg);
  color: var(--filter-active-text);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.ds-results .ds-results__active-chip:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-active);
  text-decoration: none;
}

.ds-results .ds-results__active-chip .fa-xmark {
  font-size: var(--font-size-caption);
}

.ds-results .ds-results__clear {
  margin-inline-start: var(--space-4);
}

/* ===================== ResultCard (§14) — ranked list rows ===================== */

.ds-results .ds-results__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ds-results .ds-result {
  position: relative;
  display: grid;
  grid-template-columns: var(--space-24) var(--result-logo-size) minmax(0, 1fr) var(--button-height-md);
  grid-template-areas:
    "rank logo body save"
    "actions actions actions actions";
  --result-logo-size: 44px;
  /* Height of the name's line box: rank, save and actions centre on it, so every row lines up
     the same way whatever the amount of metadata below the name */
  --result-name-line: calc(var(--result-card-title-font-size) * var(--line-height-h3));
  column-gap: var(--space-12);
  row-gap: var(--space-12);
  padding: var(--space-16);
  border-block-end: var(--border-width) solid var(--color-border);
  transition: background-color var(--motion-duration-fast) var(--motion-easing);
}

.ds-results .ds-result:last-child {
  border-block-end: 0;
}

/* Selected (details open): primary-soft background + 2px start bar — the one blue accent in the list */
.ds-results .ds-result::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--tabs-indicator-width);
  background-color: transparent;
}

.ds-results .ds-result.is-selected {
  background-color: var(--color-primary-soft);
}

.ds-results .ds-result.is-selected::before {
  background-color: var(--color-primary);
}

@media (hover: hover) {
  .ds-results .ds-result:hover {
    background-color: var(--color-background);
  }

  .ds-results .ds-result.is-selected:hover {
    background-color: var(--color-primary-soft);
  }

  .ds-results .ds-result:hover .ds-result__rank {
    color: var(--color-primary);
  }
}

@media (min-width: 640px) {
  .ds-results .ds-result {
    grid-template-columns: var(--space-32) var(--result-logo-size) minmax(0, 1fr) auto var(--button-height-md);
    grid-template-areas: "rank logo body actions save";
    --result-logo-size: 56px;
    align-items: start;
    column-gap: var(--space-16);
    /* Inline padding matches the toolbar, active-filter row and pager (16 → 20 at 1024) */
    padding: var(--space-20) var(--space-16);
  }
}

@media (min-width: 1024px) {
  .ds-results .ds-result {
    padding-inline: var(--space-20);
  }
}

.ds-results .ds-result__rank {
  grid-area: rank;
  align-self: start;
  color: var(--color-placeholder);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: var(--result-name-line); /* same line box as the name → shared centre line */
  text-align: center;
  transition: color var(--motion-duration-fast) var(--motion-easing);
}

/* Logo (the business's own) or, without one, the first letter of its name — same tile as the details panel */
.ds-results .ds-result__logo {
  grid-area: logo;
  position: relative;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: var(--result-logo-size);
  height: var(--result-logo-size);
  overflow: hidden;
  border-radius: var(--radius-button);
  background-color: var(--color-primary-soft);
}

.ds-results .ds-result__initial {
  color: var(--color-primary-active);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.ds-results .ds-result__logo img {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: var(--border-width) solid var(--color-border);
  border-radius: inherit;
  background-color: var(--color-surface);
}

.ds-results .ds-result__body {
  grid-area: body;
  min-width: 0;
}

.ds-results .ds-result__name {
  margin: 0;
  font-size: var(--result-card-title-font-size);
  font-weight: var(--result-card-title-font-weight);
  line-height: var(--line-height-h3);
}

.ds-results .ds-result__name a,
.ds-results .ds-result__name a:visited {
  color: var(--result-card-title-color);
  text-decoration: none;
}

.ds-results .ds-result__name a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* The whole row opens the result through the name link (actions and save sit above it) */
.ds-results .ds-result__name a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.ds-results .ds-result__name a:focus-visible {
  outline: none;
}

.ds-results .ds-result:has(.ds-result__name a:focus-visible) {
  outline: var(--focus-outline-width) solid var(--focus-outline-color);
  outline-offset: calc(var(--focus-outline-width) * -1);
}

.ds-results .ds-result__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-4);
  margin: var(--space-4) 0 0;
  color: var(--result-card-meta-color);
  font-size: var(--result-card-meta-font-size);
}

.ds-results .ds-result__meta > span + span::before {
  content: "·";
  margin-inline: var(--space-8);
  color: var(--color-placeholder);
}

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

.ds-results .ds-result__meta-icon {
  color: var(--color-placeholder);
  font-size: var(--font-size-caption);
}

.ds-results .ds-result__rating {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  margin: var(--space-4) 0 0;
  color: var(--color-text);
  font-size: var(--font-size-small);
  font-variant-numeric: tabular-nums;
}

.ds-results .ds-result__star {
  color: var(--color-rating-star);
}

.ds-results .ds-result__reviews {
  color: var(--color-text-muted);
}

/* Keywords: a tag icon + small outlined tags, so they read as labels and not as part of the location line */
.ds-results .ds-result__keywords {
  display: flex;
  flex-wrap: wrap; /* at most 3 tags: wrap on narrow rows rather than truncating every tag */
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-8) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  line-height: 1.4;
}

.ds-results .ds-result__keywords-icon {
  flex: 0 0 auto;
  margin-inline-end: var(--space-4);
  color: var(--color-primary);
  font-size: var(--font-size-caption);
}

.ds-results .ds-result__tag {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  padding: 2px var(--space-8);
  border: var(--border-width) solid var(--color-primary-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface);
  color: var(--color-primary-hover);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Actions: secondary call with the number, text-style details (restrained blue) */
.ds-results .ds-result__actions {
  position: relative;
  z-index: 1;
  grid-area: actions;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-8);
}

@media (min-width: 640px) {
  /* Phone on top, "details" underneath it (same width, centred) */
  .ds-results .ds-result__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
    min-width: var(--results-action-min-width); /* same column width with or without a phone */
    align-self: stretch; /* the column runs the full height of the row … */
    /* Anchored to the name line (40px controls centred on it), not to the row's variable height */
    margin-block-start: calc((var(--result-name-line) - var(--button-height-md)) / 2);
  }
}

/* No phone: the details link keeps its own column, so it sits where it does in every other row */
.ds-results .ds-result__actions > .ds-result__details:only-child {
  grid-column: 2;
}

.ds-results .ds-result__call {
  gap: var(--space-8);
  min-width: 0;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 640px) {
  /* Equal-width call buttons keep the action column aligned from row to row */
  .ds-results .ds-result__call {
    justify-content: center; /* number centred inside the button */
    min-width: var(--results-action-min-width);
  }
}

.ds-results .ds-result__call .fa-phone {
  color: var(--color-primary);
  font-size: var(--icon-size-sm);
}

.ds-results .ds-result__details,
.ds-results .ds-result__details:visited {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--button-height-md);
  padding-inline: var(--space-4);
  color: var(--color-primary);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  white-space: nowrap;
}

@media (min-width: 640px) {
  .ds-results .ds-result__actions .ds-result__details {
    justify-content: center;
    min-height: var(--space-32);
    margin-block-start: auto; /* … so "details" sits at the very bottom, under the phone */
  }
}

.ds-results .ds-result__details:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

.ds-results .ds-result__chevron {
  font-size: var(--font-size-caption);
}

[dir="ltr"] .ds-results .ds-result__chevron {
  transform: scaleX(-1);
}

.ds-results .ds-result__save {
  position: relative;
  z-index: 1;
  grid-area: save;
  align-self: start;
  margin-block-start: calc((var(--result-name-line) - var(--button-height-md)) / 2);
  color: var(--color-text-muted);
}

.ds-results .ds-result__save[hidden] {
  display: none;
}

.ds-results .ds-result__save-on,
.ds-results .ds-result__save[aria-pressed="true"] .ds-result__save-off {
  display: none;
}

.ds-results .ds-result__save[aria-pressed="true"] .ds-result__save-on {
  display: inline;
}

.ds-results .ds-result__save[aria-pressed="true"] {
  color: var(--color-primary);
}

/* ===================== Pagination (§22) ===================== */

.ds-results .ds-results__pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-16);
  border-block-start: var(--border-width) solid var(--color-border);
}

@media (min-width: 1024px) {
  .ds-results .ds-results__pager {
    justify-content: center;
    padding-inline: var(--space-20);
  }
}

.ds-results .ds-results__page-step,
.ds-results .ds-results__page-step:visited {
  display: inline-flex;
  align-items: center;
  min-height: var(--button-height-md);
  padding-inline: var(--space-12);
  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(--font-size-small);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  white-space: nowrap;
}

.ds-results a.ds-results__page-step:hover {
  background-color: var(--button-secondary-bg-hover);
  text-decoration: none;
}

.ds-results .ds-results__page-step.is-disabled {
  opacity: var(--opacity-disabled);
}

.ds-results .ds-results__pages {
  display: none;
  align-items: center;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ds-results .ds-results__page,
.ds-results .ds-results__page:visited {
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  min-width: var(--button-height-md);
  height: var(--button-height-md);
  padding-inline: var(--space-8);
  border-radius: var(--pagination-radius);
  color: var(--color-text-strong-secondary);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.ds-results a.ds-results__page:hover {
  background-color: var(--color-background);
  color: var(--color-primary);
  text-decoration: none;
}

.ds-results .ds-results__page.is-current {
  background-color: var(--pagination-current-bg);
  color: var(--pagination-current-text);
}

.ds-results .ds-results__page-gap {
  min-width: var(--space-24);
  color: var(--color-text-muted);
  text-align: center;
}

.ds-results .ds-results__page-of {
  color: var(--pagination-info-color);
  font-size: var(--pagination-info-font-size);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 1024px) {
  .ds-results .ds-results__pages {
    display: flex;
    margin-inline: var(--space-12);
  }

  .ds-results .ds-results__page-of {
    display: none;
  }
}

/* ===================== Empty state (§32) ===================== */

.ds-results .ds-results__state {
  padding-inline: var(--space-16);
}

/* ===================== Details panel ===================== */

.ds-results .ds-results__details-panel {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border: var(--border-width) solid var(--color-border);
  background-color: var(--color-surface);
}

.ds-results .ds-results__details-panel[hidden],
.ds-results .ds-results__details-scrim[hidden] {
  display: none;
}

@media (min-width: 1024px) {
  .ds-results .ds-results__details-panel {
    position: sticky;
    inset-block-start: calc(var(--header-height-desktop) + var(--space-16));
    max-height: calc(100vh - var(--header-height-desktop) - var(--space-32));
    overflow: hidden;
    border-radius: var(--radius-card);
  }

  .ds-results .ds-results__details-scrim {
    display: none;
  }
}

@media (max-width: 1023.98px) {
  .ds-results .ds-results__details-panel {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: var(--z-index-modal);
    max-height: 88vh;
    border-radius: var(--modal-radius) var(--modal-radius) 0 0;
    box-shadow: var(--shadow-modal);
  }

  .ds-results .ds-results__details-scrim {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-index-modal) - 1);
    background-color: var(--modal-overlay);
  }
}

.ds-results .ds-results__dp-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-12);
  padding: var(--space-16) var(--space-20);
  border-block-end: var(--border-width) solid var(--color-border);
}

.ds-results .ds-results__avatar {
  display: grid;
  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-active);
  font-weight: var(--font-weight-bold);
}

.ds-results .ds-results__logo {
  width: var(--space-40);
  height: var(--space-40);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-button);
  object-fit: contain;
}

.ds-results .ds-results__dp-title {
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-size-h3-mobile);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-h3);
}

.ds-results .ds-results__dp-title:focus {
  outline: none;
}

.ds-results .ds-results__dp-title:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-outline-color);
  outline-offset: var(--focus-outline-offset);
}

.ds-results .ds-results__dp-meta {
  margin: var(--space-4) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

.ds-results .ds-results__dp-body {
  flex: 1;
  padding: 0 var(--space-20);
  overflow: auto;
}

.ds-results .ds-results__dp-section {
  padding-block: var(--space-16);
}

.ds-results .ds-results__dp-section + .ds-results__dp-section {
  border-block-start: var(--border-width) solid var(--color-border);
}

.ds-results .ds-results__dp-label {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin: 0 0 var(--space-8);
  color: var(--label-color);
  font-size: var(--label-font-size);
  font-weight: var(--label-font-weight);
}

.ds-results .ds-results__dp-label .fa-solid {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.ds-results .ds-results__dp-copyrow {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.ds-results .ds-results__dp-copyrow + .ds-results__dp-copyrow {
  margin-block-start: var(--space-8);
}

.ds-results .ds-results__dp-phone,
.ds-results .ds-results__dp-phone:visited {
  display: inline-flex;
  flex: 1;
  align-items: center;
  min-height: var(--button-height-md);
  padding-inline: var(--space-12);
  border: var(--border-width) solid var(--button-secondary-border);
  border-radius: var(--radius-button);
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.ds-results .ds-results__dp-phone:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  text-decoration: none;
}

.ds-results .ds-results__dp-text {
  flex: 1;
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-size-small);
  line-height: var(--line-height-body);
}

.ds-results .ds-results__dp-copy {
  display: inline-grid;
  flex-shrink: 0;
  place-items: center;
  width: var(--button-height-md);
  height: var(--button-height-md);
  padding: 0;
  border: 0;
  border-radius: var(--radius-button);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}

.ds-results .ds-results__dp-copy:hover {
  background-color: var(--button-ghost-bg-hover);
  color: var(--color-primary);
}

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

.ds-results .ds-results__tags li {
  display: inline-flex;
  align-items: center;
  min-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);
}

.ds-results .ds-results__dp-foot {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-8);
  padding: var(--space-16) var(--space-20);
  padding-block-end: calc(var(--space-16) + env(safe-area-inset-bottom, 0px));
  border-block-start: var(--border-width) solid var(--color-border);
}

.ds-results .ds-results__dp-save {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-height: var(--button-height-md);
  padding-inline: var(--space-12);
  border: var(--border-width) solid var(--button-secondary-border);
  border-radius: var(--radius-button);
  background-color: var(--button-secondary-bg);
  color: var(--button-secondary-text);
  font: inherit;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

.ds-results .ds-results__dp-save[aria-pressed="true"] {
  border-color: var(--filter-active-border);
  background-color: var(--filter-active-bg);
  color: var(--filter-active-text);
}

.ds-results .ds-results__dp-full,
.ds-results .ds-results__dp-full:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: var(--button-height-md);
  padding-inline: var(--space-16);
  border-radius: var(--radius-button);
  background-color: var(--button-primary-bg);
  color: var(--button-primary-text);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.ds-results .ds-results__dp-full:hover {
  background-color: var(--button-primary-bg-hover);
  color: var(--button-primary-text);
  text-decoration: none;
}

[dir="ltr"] .ds-results .ds-results__dp-full .fa-arrow-left {
  transform: scaleX(-1);
}

/* ===================== Bottom Sheet (filters) + "قائمتي" drawer ===================== */

.ds-results .ds-results__sheet,
.ds-results .ds-results__drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-index-modal);
}

.ds-results .ds-results__sheet[hidden],
.ds-results .ds-results__drawer[hidden] {
  display: none;
}

.ds-results .ds-results__scrim {
  position: absolute;
  inset: 0;
  background-color: var(--modal-overlay);
}

.ds-results .ds-results__sheet-panel,
.ds-results .ds-results__drawer-panel {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  display: flex;
  flex-direction: column;
  max-height: 85vh;
  border-radius: var(--modal-radius) var(--modal-radius) 0 0;
  background-color: var(--modal-bg);
  box-shadow: var(--modal-shadow);
}

@media (min-width: 1024px) {
  .ds-results .ds-results__sheet {
    display: none;
  }

  .ds-results .ds-results__drawer-panel {
    inset-block: 0;
    inset-inline-start: auto;
    inset-inline-end: 0;
    width: var(--results-drawer-width);
    max-height: none;
    border-radius: 0;
  }
}

.ds-results .ds-results__sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--modal-header-gap);
  padding: var(--space-12) var(--space-16);
  border-block-end: var(--border-width) solid var(--modal-border-color);
}

.ds-results .ds-results__sheet-head h2 {
  margin: 0;
  color: var(--color-text);
  font-size: var(--modal-title-font-size);
  font-weight: var(--font-weight-semibold);
}

.ds-results .ds-results__sheet-body,
.ds-results .ds-results__drawer-body {
  padding: var(--space-16);
  overflow: auto;
}

.ds-results .ds-results__sheet-foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--modal-footer-gap);
  padding: var(--space-12) var(--space-16);
  padding-block-end: calc(var(--space-12) + env(safe-area-inset-bottom, 0px));
  border-block-start: var(--border-width) solid var(--modal-border-color);
}

.ds-results .ds-results__facet + .ds-results__facet {
  margin-block-start: var(--space-16);
  padding-block-start: var(--space-16);
  border-block-start: var(--border-width) solid var(--color-border);
}

.ds-results .ds-results__facet h3 {
  margin: 0 0 var(--space-8);
  color: var(--label-color);
  font-size: var(--label-font-size);
  font-weight: var(--label-font-weight);
}

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

.ds-results .ds-results__option-chip,
.ds-results .ds-results__option-chip:visited {
  display: inline-flex;
  align-items: center;
  min-height: var(--filter-height);
  padding-inline: var(--space-12);
  border: var(--border-width) solid var(--color-input-border);
  border-radius: var(--radius-button);
  color: var(--color-text-strong-secondary);
  font-size: var(--font-size-small);
  text-decoration: none;
}

.ds-results .ds-results__option-chip[aria-current="true"] {
  border-color: var(--filter-active-border);
  background-color: var(--filter-active-bg);
  color: var(--filter-active-text);
  font-weight: var(--font-weight-semibold);
}

/* Saved list */
.ds-results .ds-results__saved-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ds-results .ds-results__saved-item {
  display: grid;
  gap: var(--space-8);
  padding-block: var(--space-12);
  border-block-end: var(--border-width) solid var(--color-border);
}

.ds-results .ds-results__saved-name,
.ds-results .ds-results__saved-name:visited {
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.ds-results .ds-results__saved-name:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.ds-results .ds-results__saved-area {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

.ds-results .ds-results__saved-actions {
  display: flex;
  gap: var(--space-8);
}

.ds-results .ds-results__saved-call,
.ds-results .ds-results__saved-call:visited {
  display: inline-flex;
  flex: 1;
  align-items: center;
  gap: var(--space-8);
  min-height: var(--button-height-md);
  padding-inline: var(--space-12);
  border: var(--border-width) solid var(--button-secondary-border);
  border-radius: var(--radius-button);
  color: var(--color-text);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.ds-results .ds-results__saved-call .fa-phone {
  color: var(--color-primary);
}

.ds-results .ds-results__saved-remove {
  display: inline-grid;
  place-items: center;
  width: var(--button-height-md);
  height: var(--button-height-md);
  padding: 0;
  border: var(--border-width) solid var(--button-secondary-border);
  border-radius: var(--radius-button);
  background-color: var(--color-surface);
  color: var(--color-danger);
  cursor: pointer;
}

.ds-results .ds-results__saved-remove:hover {
  background-color: var(--color-danger-bg);
}

.ds-results .ds-results__saved-empty {
  margin: 0;
  padding: var(--space-24) var(--space-8);
  color: var(--color-text-secondary);
  text-align: center;
}

.ds-results .ds-results__saved-empty[hidden] {
  display: none;
}

/* Toast (status messages from copy / save) */
.ds-results .ds-results__toast {
  position: fixed;
  inset-inline: 0;
  inset-block-end: var(--space-24);
  z-index: calc(var(--z-index-modal) + 1);
  width: max-content;
  max-width: calc(100% - var(--space-32));
  margin-inline: auto;
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-button);
  background-color: var(--color-text);
  color: var(--color-surface);
  font-size: var(--font-size-small);
  opacity: 0;
  pointer-events: none;
}

.ds-results .ds-results__toast.is-shown {
  opacity: 1;
}

.ds-results .ds-results__toast:empty {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .ds-results .ds-result,
  .ds-results .ds-result__rank,
  .ds-results .ds-results__filter,
  .ds-results .ds-results__caret {
    transition: none;
  }
}