/* dialog.modals--main-modal ties width/max-width to max-content, so the override
   needs to match its specificity — a bare .order-cart--modal loses that fight. */
dialog.modals--main-modal.order-cart--modal {
  width: 100%;
  max-width: 78.875rem; /* 1262px, the Figma modal width */
  height: 48.75rem;     /* 780px */
  padding: 0;
  overflow: hidden;
}

/* The modal's own content div wraps our header, body and footer, so it has to
   carry the height for the body's flex sizing to have anything to divide.
   modals.css caps it at `calc(100vh - 16rem)` and spaces its children by
   1.5rem; both have to go, or the footer floats short of the dialog's bottom
   edge with a band of dead space under it. */
.order-cart--modal .modals--content {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
  max-height: none;
  padding: 0;
  overflow: hidden;
}

.order-cart--header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4rem; /* 64px, the Figma header height */
  padding: 0 var(--rem-24);
  border-bottom: 1px solid var(--border-secondary);
  background-color: var(--surface-primary);
}

.order-cart--title {
  font-size: var(--rem-18);
  font-variation-settings: "wght" var(--text-semibold);
  color: var(--text-heading);
}

/* The cart header lays its own actions out in a row, so the shared X drops the
   absolute placement it uses in the plain modal header. */
.order-cart--header-actions {
  display: flex;
  align-items: center;
  gap: var(--rem-8);
}

.order-cart--header-actions .modals--close-button {
  position: static;
  transform: none;
}

.order-cart--body {
  display: grid;
  /* 702px / 560px in Figma, not an even split. */
  grid-template-columns: 43.875rem 1fr;
  flex: 1;
  min-height: 0;
}

.order-cart--left-pane {
  display: flex;
  flex-direction: column;
  gap: var(--rem-16);
  padding: var(--rem-24);
  background-color: var(--surface-page);
  box-shadow: 1px 0 0 var(--border-secondary);
  overflow-y: auto;
}

.order-cart--right-pane {
  padding: var(--rem-24);
  background-color: var(--surface-primary);
  overflow-y: auto;
}

.order-cart--cart {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* One flex item, so the title and its count/empty line never drift apart.
   Only one of the two lines is ever visible; `gap` skips the hidden one,
   where a margin on each child would not. */
.order-cart--cart-heading {
  display: flex;
  flex-direction: column;
  gap: var(--rem-24);
}

/* Empty until the first item lands, so the margin only applies once the
   container actually holds a group. */
.order-cart--cart-groups:not(:empty) {
  margin-top: var(--rem-16);
}

.order-cart--cart-title {
  font-size: var(--rem-16);
  line-height: var(--rem-24);
  font-variation-settings: "wght" var(--text-semibold);
  color: var(--text-heading);
}

.order-cart--cart-count,
.order-cart--cart-empty {
  display: block;
  font-size: var(--rem-14);
  color: var(--text-additional);
}

.order-cart--cart-fields {
  display: flex;
  flex-direction: column;
  gap: var(--rem-6);
  margin-top: var(--rem-24);
  padding-top: var(--rem-24);
  border-top: 1px solid var(--border-secondary);
}

.order-cart--field-label {
  font-size: var(--rem-14);
  color: var(--text-label);
}

.order-cart--field-label:not(:first-child) {
  margin-top: var(--rem-12);
}

/* A field only some items show, spaced like the panel's other fields. */
.order-cart--details-field {
  display: flex;
  flex-direction: column;
  gap: var(--rem-6);
}

.order-cart--details-field[hidden] {
  display: none;
}

/* Hidden at the top of a panel, it leaves the next label at the top. */
.order-cart--details-field[hidden]:first-child + .order-cart--field-label {
  margin-top: 0;
}

.order-cart--textarea {
  height: 3.25rem; /* 52px in Figma */
  padding: var(--rem-12);
  font-size: var(--rem-14);
  color: var(--text-body);
  background-color: var(--surface-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  resize: vertical;
}

.order-cart--textarea::placeholder {
  color: var(--text-placeholder);
}

.order-cart--footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--rem-12);
  height: 4.5rem; /* 72px, the Figma footer height */
  padding: 0 var(--rem-24);
  border-top: 1px solid var(--border-secondary);
  background-color: var(--surface-page);
}

.order-cart--catalog {
  /* .order-cart--left-pane is a column flexbox with overflow-y: auto; without
     flex-shrink: 0 the pane squeezes this card to fit instead of scrolling
     past it, clipping whole groups against the overflow: hidden below. */
  flex-shrink: 0;
  background-color: var(--surface-primary);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-neutral-xs);
  overflow: hidden;
}

.order-cart--group + .order-cart--group {
  border-top: 1px solid var(--border-subtle);
}

.order-cart--group-header,
.order-cart--subgroup-header {
  display: flex;
  align-items: center;
  /* buttons.css sets a global button { justify-content: center }; a group
     with no item count has no auto-margin child to absorb the free space, so
     its chevron, icon and label would render centered instead of left-aligned. */
  justify-content: flex-start;
  gap: var(--rem-10);
  width: 100%;
  padding: var(--rem-12) var(--rem-16);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

.order-cart--group-chevron,
.order-cart--subgroup-chevron {
  display: inline-flex;
  transition: transform 0.15s ease;
}

.order-cart--group[data-collapsed="false"] > .order-cart--group-header .order-cart--group-chevron,
.order-cart--subgroup[data-collapsed="false"] > .order-cart--subgroup-header .order-cart--subgroup-chevron {
  transform: rotate(90deg);
}

.order-cart--group-label {
  font-size: var(--rem-15);
  color: var(--text-body);
}

.order-cart--group-count {
  margin-left: auto;
  font-size: var(--rem-13);
  color: var(--text-additional);
}

.order-cart--group-badge,
.order-cart--subgroup-badge,
.order-cart--cart-group-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--rem-18);
  height: var(--rem-18);
  padding: 0 var(--rem-6);
  font-size: var(--rem-11);
  font-variation-settings: "wght" var(--text-medium);
  color: var(--text-on-action);
  background-color: var(--surface-action);
  border-radius: var(--radius-full);
}

.order-cart--group-badge[data-state="warning"],
.order-cart--cart-group-badge[data-state="warning"] {
  background-color: var(--surface-warning-action);
}

.order-cart--group-body {
  padding: 0 var(--rem-16) var(--rem-12);
}

.order-cart--subgroup-header {
  padding: var(--rem-8) 0;
}

.order-cart--subgroup-label {
  font-size: var(--rem-14);
  color: var(--text-additional);
}

.order-cart--subgroup-body {
  padding-bottom: var(--rem-8);
}

.order-cart--chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rem-8);
  padding: var(--rem-6) 0;
}

/* A group's own search, a pill under its chips. The search component sizes
   itself off its padding, so the pill sets its own. */
.order-cart--catalog-search {
  padding: var(--rem-6) 0;

  .inputs--custom-search {
    width: calc(1.5*13.75rem); /* 220px, the Figma field width */
    padding: var(--rem-4) var(--rem-8) var(--rem-4) 1.875rem;
    border-radius: var(--radius-full);
  }

  .inputs--custom-search-icon .icon {
    width: var(--rem-12);
    min-width: var(--rem-12);

    i {
      font-size: var(--rem-11);
    }
  }

  input[type="search"] {
    font-size: var(--rem-13);
    line-height: var(--rem-21);
    color: var(--text-body);

    &::placeholder {
      color: var(--text-placeholder);
      opacity: 0.56;
    }
  }
}

.order-cart--chip {
  /* buttons.css sets a global button { width: 100% }; a chip must size to its
     label, not stretch to fill the row. */
  width: auto;
  padding: var(--rem-6) var(--rem-12);
  font-size: var(--rem-14);
  color: var(--text-body);
  background-color: var(--surface-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-full);
  cursor: pointer;
}

.order-cart--chip:hover {
  border-color: var(--border-primary-hover);
}

.order-cart--chip[data-selected="true"] {
  color: var(--text-success);
  background-color: var(--surface-success);
  border-color: var(--border-success);
}

.order-cart--cart-group + .order-cart--cart-group {
  margin-top: var(--rem-16);
}

.order-cart--cart-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.order-cart--cart-group-toggle {
  width: auto;
  display: flex;
  align-items: center;
  gap: var(--rem-8);
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.order-cart--cart-group-chevron {
  display: inline-flex;
  transition: transform 0.15s ease;
}

.order-cart--cart-group[data-collapsed="true"] .order-cart--cart-group-chevron {
  transform: rotate(-90deg);
}

.order-cart--cart-group-label {
  font-size: var(--rem-15);
  font-variation-settings: "wght" var(--text-medium);
  color: var(--text-body);
}

.order-cart--cart-group-action,
.order-cart--cart-item-action {
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--rem-6);
  padding: 0;
  font-size: var(--rem-14);
  color: var(--text-action);
  background: none;
  border: none;
  cursor: pointer;
}

/* Both slots hold nothing but hidden inputs. `.order-cart--cart-item` is a
   flex row with a gap, so leaving this as a box would add a trailing gap to
   every item. */
.order-cart--cart-group-inputs,
.order-cart--cart-item-inputs {
  display: contents;
}

.order-cart--cart-group-body {
  padding: var(--rem-8) 0 0 var(--rem-8);
}

.order-cart--cart-item {
  display: flex;
  align-items: center;
  gap: var(--rem-8);
  padding: var(--rem-4) 0;
}

/* Hidden rather than removed, so the row keeps its place when hover shows it. */
.order-cart--cart-item-remove {
  width: auto;
  display: inline-flex;
  visibility: hidden;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.order-cart--cart-item:hover .order-cart--cart-item-remove {
  visibility: visible;
}

.order-cart--cart-item:hover .order-cart--cart-item-action {
  visibility: visible;
}

.order-cart--cart-item-action {
  width: auto;
  margin-left: auto;
  visibility: hidden;
}

.order-cart--cart-item-icon {
  position: relative;
  display: inline-flex;
}

.order-cart--cart-item-dot {
  display: none;
  position: absolute;
  top: calc(var(--rem-2) * -1);
  right: calc(var(--rem-2) * -1);
  width: var(--rem-6);
  height: var(--rem-6);
  background-color: var(--surface-warning-action);
  border-radius: var(--radius-full);
}

.order-cart--cart-item[data-status="needs_info"] .order-cart--cart-item-dot {
  display: block;
}

.order-cart--cart-item-label {
  font-size: var(--rem-14);
  color: var(--text-body);
}

/* A new DME's codes show as the cart item saves them. */
.order-cart--cart-item-codes {
  font-size: var(--rem-14);
  color: var(--text-additional);
  text-transform: uppercase;
}

/* An entry the catalog lacks: its catalog row is made when the cart is saved. */
.order-cart--cart-item-new {
  padding: var(--rem-2) var(--rem-4);
  border-radius: var(--radius-xs);
  background-color: var(--primary-50);
  font-size: var(--rem-12);
  font-variation-settings: 'wght' var(--text-medium);
  line-height: 1.2;
  color: var(--text-action);
}

/* Grows with its fields, so the sticky header has room to stay up all the way down. */
.order-cart--details {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* Stays at the pane's top edge while the details scroll. A sticky top counts
   from inside the pane's padding, hence the negative top. It covers that
   padding, so nothing scrolls into view above or beside it. */
.order-cart--details-header {
  position: sticky;
  top: calc(var(--rem-24) * -1);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--rem-12);
  margin: calc(var(--rem-24) * -1) calc(var(--rem-24) * -1) 0;
  padding: var(--rem-24);
  background-color: var(--surface-primary);
}

.order-cart--details-back {
  width: auto;
  display: inline-flex;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.order-cart--details-title {
  font-size: var(--rem-16);
  font-variation-settings: "wght" var(--text-semibold);
  color: var(--text-heading);
}

.order-cart--details-header .buttons--button {
  margin-left: auto;
}

.order-cart--details-body {
  display: flex;
  flex-direction: column;
  gap: var(--rem-6);
}

/* The pharmacy map in the pane: the search over the filters, and the map
   filling the rest of the pane's height. */
.order-cart--pharmacy-map {
  height: 100%;

  .order-cart--details-body,
  .pharmacies--map,
  .pharmacies--map-container {
    flex: 1;
    min-height: 0;
  }

  .pharmacies--map-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--rem-8);
  }

  .pharmacies--map-search-container {
    width: 100%;
  }

  .pharmacies--map-container {
    height: auto;
  }
}

.order-cart--checkbox {
  display: flex;
  align-items: center;
  gap: var(--rem-8);
  margin-top: var(--rem-16);
  font-size: var(--rem-14);
  color: var(--text-body);
  cursor: pointer;
}

.order-cart--input {
  height: var(--rem-36);
  padding: 0 var(--rem-12);
  font-size: var(--rem-14);
  color: var(--text-body);
  background-color: var(--surface-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
}

.order-cart--input::placeholder {
  color: var(--text-placeholder);
}

.order-cart--input:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--shadow-input);
}

.order-cart--inline {
  padding: var(--rem-4) 0 var(--rem-8);
}

/* The label and its rows share one guide line, and the whole block only exists
   once a row does — before that the group is just its add button. */
.order-cart--inline-fields {
  display: none;
  flex-direction: column;
  gap: var(--rem-6);
  padding-left: var(--rem-12);
  margin-bottom: var(--rem-12);
  border-left: 1px solid var(--border-secondary);
}

.order-cart--inline:has(.order-cart--inline-row) .order-cart--inline-fields {
  display: flex;
}

.order-cart--inline-rows {
  display: flex;
  flex-direction: column;
  gap: var(--rem-8);
}

.order-cart--inline-row {
  display: flex;
  align-items: center;
  gap: var(--rem-8);
}

/* Whichever field the row carries — a text input or a search-select — takes the
   Figma width and leaves the remove button beside it. */
.order-cart--inline-row .order-cart--input,
.order-cart--inline-row .search-select {
  flex: 1;
  max-width: 23.75rem; /* 380px, the Figma field width */
}

/* A Medications row: the drug search, Allow generic beside it, and below them
   the message a refused pick shows. */
.order-cart--inline-row:has(.order-cart--inline-error) {
  flex-wrap: wrap;
}

.order-cart--inline-row > .medications--toggle {
  flex-shrink: 0;
  margin-top: 0;
}

.order-cart--inline-error {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--rem-12);
  color: var(--text-error);
}

.order-cart--inline-add {
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--rem-6);
  padding: var(--rem-6) var(--rem-10);
  font-size: var(--rem-13);
  color: var(--text-action-neutral);
  background-color: var(--surface-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.order-cart--inline-remove {
  width: auto;
  display: none;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.order-cart--inline-row:hover .order-cart--inline-remove {
  display: inline-flex;
}

.order-cart--search-group + .order-cart--search-group {
  border-top: 1px solid var(--border-subtle);
}

/* Many catalog names share a long start ("MRI Spine Cervical and…"), so a
   result wraps instead of being cut, and its icon stays by the first line. */
.order-cart--search-group .field-search--item-body {
  align-items: flex-start;
}

.order-cart--search-group .field-search--item-label {
  font-size: var(--rem-13);
  line-height: normal;
  font-variation-settings: 'wght' var(--text-regular);
  color: var(--text-body);
  white-space: normal;
  overflow-wrap: anywhere;
}

.order-cart--search-group .avatar i {
  font-size: var(--rem-9);
}

.order-cart--search-group-label {
  display: block;
  padding: var(--rem-8) var(--rem-12) var(--rem-4);
  font-size: var(--rem-12);
  color: var(--text-additional);
}

.order-cart--search-new-entry {
  font-size: var(--rem-13);
  line-height: normal;
  font-variation-settings: 'wght' var(--text-medium);
  color: var(--text-action);
  white-space: normal;
  overflow-wrap: anywhere;
}

.order-cart--search-empty {
  display: block;
  padding: var(--rem-12);
  font-size: var(--rem-14);
  color: var(--text-additional);
}

/* .order-cart--left-pane is a column flexbox with overflow-y: auto; without
   this the pills block is squeezed instead of scrolled, the same way the
   catalog was. */
.order-cart--order-sets {
  flex-shrink: 0;
}

.order-cart--order-sets-label {
  display: block;
  margin-bottom: var(--rem-8);
  font-size: var(--rem-13);
  color: var(--text-label);
}

.order-cart--order-set-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rem-4);
  padding-bottom: var(--rem-16);
  border-bottom: 1px solid var(--border-secondary);
}

.order-cart--order-set {
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--rem-8);
  height: 1.8125rem; /* 29px in Figma, border included */
  padding: 0 var(--rem-8) 0 var(--rem-12);
  font-size: var(--rem-13);
  line-height: var(--rem-21);
  color: var(--text-action-neutral-secondary);
  background-color: var(--surface-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-full);
  cursor: pointer;
}

.order-cart--order-set[data-selected="true"] {
  color: var(--text-success);
  background-color: var(--surface-success);
  border-color: var(--border-success);
}

/* A global `* { font-variation-settings: "wght" 400 }` resets every element, so
   a weight only takes effect when declared on the element holding the text —
   never on an ancestor. */
.order-cart--order-set-name {
  font-variation-settings: "wght" var(--text-medium);
  white-space: nowrap;
}

.order-cart--order-set-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0.9375rem; /* 15px in Figma */
  padding: var(--rem-2) var(--rem-4);
  font-size: 0.5625rem; /* 9px in Figma */
  line-height: normal;
  font-variation-settings: "wght" var(--text-semibold);
  color: var(--text-additional);
  background-color: var(--surface-tertiary);
  border-radius: var(--radius-full);
}

.order-cart--order-set[data-selected="true"] .order-cart--order-set-count {
  color: var(--text-on-action);
  background-color: var(--surface-action);
}

/* Sits between the cart heading and the first group, so a rejected save lands
   where the user is already looking. */
.order-cart--errors {
  display: flex;
  flex-direction: column;
  gap: var(--rem-4);
  padding: var(--rem-12);
  margin-bottom: var(--rem-12);
  background-color: var(--surface-error);
  border: 1px solid var(--border-error);
  border-radius: var(--radius-sm);
}

.order-cart--errors-title {
  font-size: var(--rem-13);
  color: var(--text-error);
  font-variation-settings: "wght" var(--text-medium);
}

.order-cart--errors-list {
  margin: 0;
  padding-left: var(--rem-16);
  font-size: var(--rem-13);
  color: var(--text-error);
}

.order-cart--order-set-inputs {
  display: contents;
}

#order-cart-discard-form {
  display: contents;
}

/* Document mode: the order sheet and the catalog share the cart's left column,
   switched from a rail. 48px rail + pane = the same 702px column as the catalog
   alone, so the modal keeps its size. */
.order-cart--document-side {
  display: flex;
  min-height: 0;
  box-shadow: 1px 0 0 var(--border-secondary);
}

/* The panes set their own display, which would beat the browser's [hidden]. */
.order-cart--document-side > [hidden] {
  display: none;
}

.order-cart--rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rem-2);
  flex-shrink: 0;
  width: var(--rem-48);
  padding: var(--rem-16) var(--rem-8);
  background-color: var(--surface-page);
  border-right: 1px solid var(--border-secondary);
}

.order-cart--rail-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--rem-32);
  height: var(--rem-32);
  padding: 0;
  border: none;
  border-radius: var(--radius-md);
  background-color: transparent;
  cursor: pointer;

  &:hover {
    background-color: var(--surface-secondary);
  }

  &[aria-pressed="true"] {
    background-color: var(--surface-highlighted);
  }
}

.order-cart--document-pane {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
}

.order-cart--document-pane > .document-reviews--pdf-section {
  flex: 1;
  min-height: 0;
  border: none;
  border-radius: 0;
}

.order-cart--document-side > .order-cart--left-pane {
  flex: 1;
  min-width: 0;
  box-shadow: none;
}

.order-cart--sheet-notices {
  display: flex;
  flex-direction: column;
  gap: var(--rem-4);
  margin-bottom: var(--rem-12);
}

.order-cart--sheet-notice {
  display: flex;
  align-items: center;
  gap: var(--rem-8);
  padding: var(--rem-8) var(--rem-12);
  background-color: var(--surface-warning);
  border: 1px solid var(--border-warning);
  border-radius: var(--radius-sm);
  font-size: var(--rem-13);
  color: var(--text-body);
}