/* =========================================================================
   Item page (design system §28 ItemHeader, §29 QuickActions, §30 ManagementActions, §39 Item Page)
   Same vocabulary as the approved Results page: page background, one bordered sheet with divided rows,
   40px controls, primary for the one main action, muted meta with "·" separators.
   Scoped under .ds-item because the page "styles" section loads before the ds component CSS.
   ========================================================================= */

.ds-item {
  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;
}

/* ===================== ItemHeader ===================== */

.ds-item .ds-item__head {
  padding-block: var(--space-20) var(--space-24);
}

.ds-item .ds-item__head .ds-breadcrumbs {
  margin: 0 0 var(--space-16);
}

.ds-item .ds-item__identity {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "heading tools";
  column-gap: var(--space-16);
  align-items: start;
}

.ds-item .ds-item__identity--logo {
  grid-template-columns: calc(var(--space-48) + var(--space-8)) minmax(0, 1fr) auto; /* 56px logo (§28) */
  grid-template-areas: "logo heading tools";
}

.ds-item .ds-item__logo {
  grid-area: logo;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  border: var(--border-width) solid var(--item-header-logo-border-color);
  border-radius: var(--item-header-logo-radius);
  background-color: var(--color-surface);
}

.ds-item .ds-item__heading {
  grid-area: heading;
  min-width: 0;
}

.ds-item .ds-item__title {
  margin: 0;
  color: var(--color-text);
  font-size: var(--item-header-title-font-size);
  font-weight: var(--item-header-title-font-weight);
  line-height: var(--line-height-h1);
  overflow-wrap: anywhere;
}

.ds-item .ds-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: var(--space-4) 0 0;
  color: var(--item-header-meta-color);
  font-size: var(--item-header-meta-font-size);
}

.ds-item .ds-item__meta > * + *::before {
  content: "·";
  margin-inline: var(--space-8);
  color: var(--color-placeholder);
}

.ds-item .ds-item__category,
.ds-item .ds-item__category:visited {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

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

.ds-item .ds-item__place .fa-location-dot {
  margin-inline-end: var(--space-4);
  color: var(--color-placeholder);
  font-size: var(--font-size-caption);
}

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

.ds-item .ds-item__star {
  color: var(--color-rating-star);
}

.ds-item .ds-item__reviews-link,
.ds-item .ds-item__reviews-link:visited {
  color: var(--color-text-muted);
  text-decoration: none;
}

.ds-item .ds-item__reviews-link::before {
  content: "·";
  margin-inline: var(--space-4) var(--space-8);
  color: var(--color-placeholder);
}

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

/* Tools at the end of the title line: ManagementActions (§30, one quiet link, desktop only — below 1024px it
   sits at the end of the page) and the "قائمتي" bookmark */
.ds-item .ds-item__tools {
  grid-area: tools;
  display: flex;
  align-items: center;
  gap: var(--space-16);
  /* 40px controls centred on the 26px title line (same approach as the Results rows) */
  margin-block-start: calc((var(--item-header-title-font-size) * var(--line-height-h1) - var(--button-height-md)) / 2);
}

.ds-item .ds-item__manage {
  display: none;
  white-space: nowrap;
}

.ds-item .ds-item__manage .fa-pen,
.ds-item .ds-item__owner .fa-pen {
  font-size: var(--font-size-caption);
}

/* QuickActions (§29) */
.ds-item .ds-item__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
  margin-block-start: var(--space-20);
}

.ds-item .ds-item__actions > .ds-button,
.ds-item .ds-item__phones > summary {
  gap: var(--space-8);
}

.ds-item .ds-item__call {
  justify-content: center;
  min-width: var(--results-action-min-width);
  font-variant-numeric: tabular-nums;
}

.ds-item .ds-item__actions .fa-whatsapp {
  color: var(--color-success);
}

.ds-item .ds-item__actions .ds-button--secondary .fa-solid {
  color: var(--color-primary);
}

.ds-item .ds-item__phones {
  position: relative;
}

.ds-item .ds-item__phones > summary {
  list-style: none;
  cursor: pointer;
}

.ds-item .ds-item__phones > summary::-webkit-details-marker {
  display: none;
}

.ds-item .ds-item__caret {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.ds-item .ds-item__phones[open] .ds-item__caret {
  transform: rotate(180deg);
}

.ds-item .ds-item__phones-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;
  min-width: 100%;
  width: max-content;
  max-width: calc(100vw - var(--space-32));
  margin: 0;
  padding: var(--space-8);
  list-style: none;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-card);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-dropdown);
}

.ds-item .ds-item__phones-pop a,
.ds-item .ds-item__phones-pop a:visited {
  display: flex;
  align-items: center;
  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);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.ds-item .ds-item__phones-pop a:hover {
  background-color: var(--color-primary-soft);
  color: var(--color-primary-hover);
}

.ds-item .ds-item__phones-pop .fa-phone {
  color: var(--color-primary);
  font-size: var(--font-size-caption);
}

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

.ds-item .ds-item__save[hidden] {
  display: none;
}

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

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

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

@media (max-width: 639.98px) {
  /* Primary action spans the width; the others pair up in two equal columns (a lone last one spans) */
  .ds-item .ds-item__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ds-item .ds-item__actions > :first-child,
  .ds-item .ds-item__actions > :nth-child(even):last-child {
    grid-column: 1 / -1;
  }

  .ds-item .ds-item__phones > summary {
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
  }

  /* Copy buttons line up in one column at the row end */
  .ds-item .ds-item__copy {
    margin-inline-start: auto;
  }
}

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

  .ds-item .ds-item__identity--logo {
    grid-template-columns: calc(var(--space-64) + var(--space-8)) minmax(0, 1fr) auto; /* 72px logo (§28) */
    column-gap: var(--space-20);
  }

  .ds-item .ds-item__manage {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
  }

  .ds-item .ds-item__actions {
    margin-block-start: var(--space-24);
  }
}

/* ===================== Layout: document + supporting column ===================== */

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

@media (min-width: 1024px) {
  .ds-item .ds-item__layout {
    grid-template-columns: minmax(0, 1fr) var(--results-panel-width);
    gap: var(--space-24);
  }
}

.ds-item .ds-item__main,
.ds-item .ds-item__aside {
  display: grid;
  gap: var(--space-16);
  min-width: 0;
}

/* One bordered surface with divided sections — the same "sheet" as the Results list */
.ds-item .ds-item__sheet {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-card);
  background-color: var(--color-surface);
}

@media (max-width: 639.98px) {
  .ds-item .ds-item__sheet {
    margin-inline: calc(var(--container-padding-mobile) * -1);
    border-inline: 0;
    border-radius: 0;
  }
}

.ds-item .ds-item__section {
  padding: var(--space-20) var(--space-16);
}

.ds-item .ds-item__section + .ds-item__section {
  border-block-start: var(--border-width) solid var(--color-border);
}

@media (min-width: 1024px) {
  .ds-item .ds-item__section {
    padding: var(--space-24) var(--space-20);
  }
}

.ds-item .ds-item__section-title {
  margin: 0 0 var(--space-12);
  color: var(--color-text);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-h4);
  line-height: var(--line-height-h3);
}

.ds-item .ds-item__section-title a,
.ds-item .ds-item__section-title a:visited {
  color: inherit;
  text-decoration: none;
}

.ds-item .ds-item__section-title a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

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

.ds-item .ds-item__section-head .ds-item__section-title {
  margin: 0;
}

/* ===================== Facts (contact / location rows) ===================== */

.ds-item .ds-item__facts {
  margin: 0;
}

.ds-item .ds-item__fact {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  padding-block: var(--space-12);
  border-block-start: var(--border-width) solid var(--color-border);
}

.ds-item .ds-item__fact:first-child {
  padding-block-start: 0;
  border-block-start: 0;
}

.ds-item .ds-item__fact:last-child {
  padding-block-end: 0;
}

.ds-item .ds-item__fact > dt {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
}

.ds-item .ds-item__fact > dd {
  margin: 0;
}

.ds-item .ds-item__value {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-height: var(--button-height-sm);
  color: var(--color-text);
  font-size: var(--font-size-body);
  overflow-wrap: anywhere;
}

.ds-item .ds-item__value a,
.ds-item .ds-item__value a:visited {
  color: var(--color-primary);
  text-decoration: none;
}

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

.ds-item .ds-item__value a.ds-item__tel,
.ds-item .ds-item__value a.ds-item__tel:visited {
  /* Fixed number column so copy buttons line up whatever the number length (numbers are dir="ltr": end = beside the label) */
  min-width: calc(var(--space-64) * 2 + var(--space-16));
  text-align: end;
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.ds-item .ds-item__value a.ds-item__tel:hover {
  color: var(--color-primary);
}

.ds-item .ds-item__address {
  margin: 0;
  font-style: normal;
}

.ds-item .ds-item__copy {
  flex: 0 0 auto;
  color: var(--color-text-muted);
}

.ds-item .ds-item__copy:hover {
  color: var(--color-primary);
}

@media (min-width: 640px) {
  /* Label column + value column: one invisible grid shared by every row of every section */
  .ds-item .ds-item__fact {
    grid-template-columns: calc(var(--space-64) * 2) minmax(0, 1fr);
    gap: var(--space-16);
    align-items: center;
  }

  .ds-item .ds-item__fact > dt {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-regular);
  }
}

/* 2nd, 3rd … phone rows belong to the first one: no divider, no repeated label */
.ds-item .ds-item__fact.is-continued {
  padding-block-start: 0;
  border-block-start: 0;
}

/* ===================== Map (loads on request) ===================== */

.ds-item .ds-item__map {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8) var(--space-16);
  margin-block-start: var(--space-16);
}

.ds-item .ds-item__map .fa-map {
  color: var(--color-primary);
}

@media (min-width: 640px) {
  .ds-item .ds-item__map {
    margin-inline-start: calc(var(--space-64) * 2 + var(--space-16));
  }
}

.ds-item .ds-item__map.is-loaded {
  display: grid;
  gap: var(--space-12);
  justify-items: start;
}

.ds-item .ds-item__map-frame {
  display: block;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: calc(var(--space-64) * 5);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-card);
}

/* ===================== Tags ===================== */

.ds-item .ds-item__tags .ds-tag a,
.ds-item .ds-item__tags .ds-tag a:visited {
  color: inherit;
  text-decoration: none;
}

.ds-item .ds-item__tags .ds-tag:has(a):hover {
  border-color: var(--color-primary-border);
  background-color: var(--color-primary-soft);
  color: var(--color-primary-hover);
}

/* ===================== Reviews ===================== */

.ds-item .ds-item__review-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-16) var(--space-32);
}

.ds-item .ds-item__review-summary:empty {
  display: none;
}

.ds-item .ds-item__score {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas: "value stars" "value count";
  align-items: center;
  column-gap: var(--space-12);
}

.ds-item .ds-item__score-value {
  grid-area: value;
  color: var(--color-text);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.ds-item .ds-item__score-stars {
  grid-area: stars;
  color: var(--color-border);
  font-size: var(--font-size-body);
  letter-spacing: var(--space-4);
  line-height: 1;
}

.ds-item .ds-item__score-stars .is-on {
  color: var(--color-rating-star);
}

.ds-item .ds-item__score-count {
  grid-area: count;
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.ds-item .ds-item__bars {
  display: grid;
  flex: 1 1 calc(var(--space-64) * 4);
  gap: var(--space-4);
  max-width: calc(var(--space-64) * 6);
}

.ds-item .ds-item__bars[hidden] {
  display: none;
}

.ds-item .ds-item__bar {
  display: grid;
  grid-template-columns: var(--space-64) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-8);
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.ds-item .ds-item__bar-track {
  height: var(--space-8);
  overflow: hidden;
  border-radius: var(--radius-pill);
  background-color: var(--color-border);
}

.ds-item .ds-item__bar-fill {
  height: 100%;
  border-radius: inherit;
  background-color: var(--color-rating-star);
}

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

.ds-item .ds-item__empty strong {
  color: var(--color-text-strong-secondary);
  font-weight: var(--font-weight-semibold);
}

.ds-item .ds-item__empty[hidden] {
  display: none;
}

/* Visitor reviews — markup comes from wwwroot/PreviousCommentsList.txt via js/commentslist.js */
.ds-item .ds-item__review-list:empty {
  display: none;
}

.ds-item .ds-item__review-list {
  margin-block-start: var(--space-16);
}

.ds-item .ds-item__review-list .review {
  padding-block: var(--space-16);
  border-block-start: var(--border-width) solid var(--color-border);
}

.ds-item .ds-item__review-list .review:last-child {
  padding-block-end: 0;
}

.ds-item .ds-item__review-list .comment {
  display: grid;
  gap: var(--space-4);
}

.ds-item .ds-item__review-list .head {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.ds-item .ds-item__review-list .ReviewerPhoto {
  width: var(--space-32);
  height: var(--space-32);
  border-radius: var(--radius-pill);
  object-fit: cover;
}

.ds-item .ds-item__review-list .ReviewerName {
  color: var(--color-text);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
}

.ds-item .ds-item__review-list .rating0 {
  color: var(--color-border);
  font-size: var(--font-size-small);
  letter-spacing: var(--space-4);
}

.ds-item .ds-item__review-list .body .title0 {
  color: var(--color-text);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
}

.ds-item .ds-item__review-list .subject {
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
  line-height: var(--line-height-body);
  overflow-wrap: anywhere;
}

.ds-item .ds-item__review-list .footer {
  display: flex;
  gap: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

/* ===================== Supporting column ===================== */

.ds-item .ds-item__related .ds-item__section-title {
  margin: 0;
  padding: var(--space-20) var(--space-16) var(--space-12);
}

.ds-item .ds-item__related-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ds-item .ds-item__related-list li + li {
  border-block-start: var(--border-width) solid var(--color-border);
}

.ds-item .ds-item__related-list a,
.ds-item .ds-item__related-list a:visited {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  min-height: var(--button-height-lg);
  padding: var(--space-12) var(--space-16);
  color: var(--color-text);
  text-decoration: none;
}

.ds-item .ds-item__related-list li:last-child a {
  border-end-start-radius: var(--radius-card);
  border-end-end-radius: var(--radius-card);
}

@media (hover: hover) {
  .ds-item .ds-item__related-list a:hover {
    background-color: var(--color-background);
  }

  .ds-item .ds-item__related-list a:hover .ds-item__related-name {
    color: var(--color-primary);
  }
}

.ds-item .ds-item__related-body {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

.ds-item .ds-item__related-name {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  overflow-wrap: anywhere;
}

.ds-item .ds-item__related-place {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.ds-item .ds-item__chevron {
  flex: 0 0 auto;
  color: var(--color-placeholder);
  font-size: var(--font-size-caption);
}

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

@media (min-width: 1024px) {
  .ds-item .ds-item__related .ds-item__section-title {
    padding: var(--space-24) var(--space-20) var(--space-12);
  }

  .ds-item .ds-item__related-list a {
    padding-inline: var(--space-20);
  }
}

/* Ownership (mobile/tablet end of page; on desktop the link sits in the header) */
.ds-item .ds-item__owner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-12);
  padding-block: var(--space-8);
}

.ds-item .ds-item__owner-title {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-regular);
}

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

/* ===================== Mobile call bar (approved exception 1) ===================== */

.ds-item .ds-item__callbar {
  display: none;
}

@media (max-width: 639.98px) {
  /* Keep the end of the page (the footer's bottom bar) clear of the fixed call bar */
  body:has(.ds-item__callbar) .ds-footer {
    padding-block-end: calc(var(--space-16) + var(--button-height-md) + var(--space-16));
  }

  .ds-item .ds-item__callbar {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: var(--z-index-header);
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: var(--space-8);
    padding: var(--space-8) var(--container-padding-mobile) calc(var(--space-8) + env(safe-area-inset-bottom, 0px));
    border-block-start: var(--border-width) solid var(--color-border);
    background-color: var(--color-surface);
  }

  .ds-item .ds-item__callbar .ds-item__call {
    min-width: 0;
  }

  .ds-item .ds-item__callbar .ds-button {
    gap: var(--space-8);
  }

  .ds-item .ds-item__callbar .fa-whatsapp {
    color: var(--color-success);
  }

  .ds-item .ds-item__callbar .ds-button--secondary .fa-solid {
    color: var(--color-primary);
  }
}

/* ===================== Review modal (Bootstrap shell, ds content) ===================== */

.ds-item .ds-item-modal .modal-dialog {
  max-width: var(--modal-width-md);
  margin-inline: auto;
  padding-inline: var(--modal-viewport-margin);
}

.ds-item .ds-item-modal__panel {
  overflow: hidden;
  border: var(--border-width) solid var(--modal-border-color);
  border-radius: var(--modal-radius);
  background-color: var(--modal-bg);
  box-shadow: var(--modal-shadow);
  text-align: start;
}

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

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

.ds-item .ds-item-modal__body {
  display: grid;
  gap: var(--form-field-gap);
  padding: var(--space-8) var(--modal-padding) var(--modal-padding);
}

.ds-item .ds-item-modal__stars {
  display: flex;
  gap: var(--space-4);
  line-height: 1;
}

.ds-item .ds-item-modal__stars .star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--button-height-md);
  height: var(--button-height-md);
  border-radius: var(--radius-button);
  color: var(--color-border);
  font-size: var(--font-size-h1);
  cursor: pointer;
}

.ds-item .ds-item-modal__stars .star:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-outline-color);
  outline-offset: 0;
}

.ds-item .ds-item-modal label.error {
  display: block;
  margin-block-start: var(--helper-margin-top);
  color: var(--color-danger);
  font-size: var(--error-text-font-size);
}

.ds-item .ds-item-modal .ds-visually-hidden + label.error {
  margin-block-start: 0;
}

.ds-item .ds-item-modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--modal-footer-gap);
  padding: var(--space-16) var(--modal-padding);
  border-block-start: var(--border-width) solid var(--color-border);
}

/* ===================== Toast ===================== */

.ds-item .ds-item__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;
  transition: opacity var(--motion-duration-fast) var(--motion-easing);
}

.ds-item .ds-item__toast.is-shown {
  opacity: 1;
}

.ds-item .ds-item__toast:empty {
  display: none;
}

@media (max-width: 639.98px) {
  .ds-item:has(.ds-item__callbar) .ds-item__toast {
    inset-block-end: calc(var(--button-height-md) + var(--space-32));
  }
}

@media (prefers-reduced-motion: reduce) {
  .ds-item .ds-item__toast {
    transition: none;
  }
}