/* Amer: the cart's option editor (assets/cart-options.js) in the cart drawer and on the cart page, loaded when one of
 * their switches is on. It takes the colours of where it sits: the drawer's own tokens (--mtc-*, a merchant's dark
 * drawer stays right) inside the drawer, the page's (--amer-*) elsewhere. Sizes follow the product page's picker
 * (product.css «Zid's variant picker») cut down to the panel, as the drawer's stepper is 40px: chips 36px, 4px corners. */
.amer-copt {
  --copt-head: var(--amer-heading);
  --copt-muted: var(--amer-muted);
  --copt-line: var(--amer-line);
  --copt-bg: var(--amer-bg);
  --copt-soft: color-mix(in srgb, var(--amer-heading) 4%, var(--amer-bg));
  display: grid;
  gap: 14px;
  padding: 16px 0 0;
  border-block-start: 1px solid var(--copt-line);
  color: var(--copt-head);
  font-size: 14px;
  line-height: 20px;
  animation: amer-copt-in .25s var(--amer-ease) backwards;
}
/* opacity only: a transform, even a finished one, makes the editor the box a position: fixed list is placed in */
@keyframes amer-copt-in { from { opacity: 0; } }
.mt-cart[data-mt-cart] .amer-copt {
  --copt-head: var(--mtc-head);
  --copt-muted: var(--mtc-muted);
  --copt-line: var(--mtc-line);
  --copt-bg: var(--mtc-bg);
  --copt-soft: var(--mtc-soft);
}
.amer-copt__sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.amer-copt__groups { display: grid; gap: 12px; }
.amer-copt__group { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.amer-copt__legend { display: block; float: none; inline-size: auto; margin: 0 0 8px; padding: 0; font-size: 13px; font-weight: 500; line-height: 18px; color: var(--copt-muted); }

/* chips: «مربعات» (boxes), «كبسولات» (pills), «دواير اختيار» (radio dots) */
.amer-copt__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.amer-copt__chip { position: relative; display: inline-flex; margin: 0; cursor: pointer; }
.amer-copt__chip input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: inherit; }
.amer-copt__chip .amer-copt__value {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-inline-size: 36px; block-size: 36px; padding-inline: 12px;
  border: 1px solid var(--copt-line); border-radius: 4px; background: var(--copt-bg);
  font-size: 14px; font-weight: 500; color: var(--copt-head); unicode-bidi: isolate; white-space: nowrap;
  transition: border-color .3s var(--amer-ease), background-color .3s var(--amer-ease), color .3s var(--amer-ease);
}
.amer-copt__chip:hover .amer-copt__value,
.amer-copt__chip input:focus-visible + .amer-copt__value { border-color: var(--copt-head); }
.amer-copt__chip input:checked + .amer-copt__value { background: var(--copt-head); border-color: var(--copt-head); color: var(--copt-bg); }
.amer-copt[data-style="rounded"] .amer-copt__chip .amer-copt__value { border-radius: 999px; padding-inline: 16px; }
.amer-copt[data-style="radio"] .amer-copt__chip .amer-copt__value { padding-inline: 2px; border: 0; background: none; }
.amer-copt[data-style="radio"] .amer-copt__chip .amer-copt__value::before {
  content: ""; flex: none; inline-size: 16px; block-size: 16px; border-radius: 50%; border: 1px solid var(--copt-line); background: var(--copt-bg);
  transition: border-color .3s var(--amer-ease), background-color .3s var(--amer-ease), box-shadow .3s var(--amer-ease);
}
.amer-copt[data-style="radio"] .amer-copt__chip:hover .amer-copt__value::before,
.amer-copt[data-style="radio"] .amer-copt__chip input:focus-visible + .amer-copt__value::before { border-color: var(--copt-head); }
.amer-copt[data-style="radio"] .amer-copt__chip input:checked + .amer-copt__value { background: none; color: var(--copt-head); }
.amer-copt[data-style="radio"] .amer-copt__chip input:checked + .amer-copt__value::before { border-color: var(--copt-head); background: var(--copt-head); box-shadow: inset 0 0 0 3px var(--copt-bg); }
/* available only with other choices: a dashed line; never available: muted and struck through */
.amer-copt__chip[data-state="moves"] .amer-copt__value { border-style: dashed; }
.amer-copt__chip[data-state="off"] { cursor: not-allowed; }
.amer-copt__chip[data-state="off"] .amer-copt__value { color: var(--copt-muted); text-decoration: line-through; }
.amer-copt__chip[data-state="off"]:hover .amer-copt__value { border-color: var(--copt-line); }

/* a long option (more than 6 values): a field like the product page's dropdown, its list floating over everything
   (cart-options.js places it with position: fixed from the field's box), so nothing grows or moves when it opens */
.amer-copt__field { position: relative; }
.amer-copt__toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  inline-size: 100%; block-size: 40px; padding: 0 14px;
  border: 1px solid var(--copt-line); border-radius: var(--amer-radius-field); background: var(--copt-bg);
  font: inherit; font-size: 14px; font-weight: 500; color: var(--copt-head); cursor: pointer;
  transition: border-color .3s var(--amer-ease);
}
.amer-copt__toggle:hover, .amer-copt__toggle:focus-visible, .amer-copt__toggle[aria-expanded="true"] { border-color: var(--copt-head); }
.amer-copt__toggle span { unicode-bidi: isolate; }
.amer-copt__toggle .ai { flex: none; font-size: 12px; line-height: 1; color: var(--copt-muted); transition: transform .25s var(--amer-ease); }
.amer-copt__toggle[aria-expanded="true"] .ai { transform: rotate(180deg); }
.amer-copt__list {
  position: fixed; z-index: 1000; display: grid; max-block-size: 260px; overflow-y: auto; margin: 0; padding: 6px 0;
  border: 1px solid var(--copt-line); border-radius: 8px; background: var(--copt-bg); box-shadow: 0 12px 30px rgb(16 16 16 / .14);
  overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--copt-line) transparent;
  animation: amer-copt-in .18s var(--amer-ease) backwards;
}
.amer-copt__list[data-up="true"] { box-shadow: 0 -12px 30px rgb(16 16 16 / .14); }
.amer-copt__list[hidden] { display: none; }
.amer-copt__row { position: relative; display: flex; align-items: center; margin: 0; padding: 9px 14px; color: var(--copt-head); cursor: pointer; transition: background-color .2s ease; }
.amer-copt__row input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: inherit; }
.amer-copt__row .amer-copt__value { unicode-bidi: isolate; }
.amer-copt__row:hover, .amer-copt__row:has(input:focus-visible), .amer-copt__row:has(input:checked) { background: var(--copt-soft); }
.amer-copt__row:has(input:checked) { font-weight: 600; }
.amer-copt__row[data-state="moves"] .amer-copt__value { text-decoration: underline dashed; text-decoration-color: var(--copt-muted); text-underline-offset: 4px; }
.amer-copt__row[data-state="off"] { color: var(--copt-muted); cursor: not-allowed; }
.amer-copt__row[data-state="off"] .amer-copt__value { text-decoration: line-through; }

.amer-copt__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 0; color: var(--copt-muted); }
.amer-copt__price strong { font-weight: 600; color: var(--copt-head); unicode-bidi: isolate; }
.amer-copt__price[hidden], .amer-copt__note[hidden], .amer-copt__error[hidden] { display: none; }
.amer-copt__note { margin: 0; font-size: 13px; color: var(--copt-muted); }
.amer-copt__error { margin: 0; font-weight: 500; color: var(--amer-sale); }
.amer-copt__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.amer-copt .amer-copt__save { min-inline-size: 120px; block-size: 40px; padding-inline: 24px; font-size: 14px; }
.amer-copt__save[hidden] { display: none !important; }
.amer-copt__cancel {
  position: relative; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; line-height: 22px;
  color: var(--copt-head); cursor: pointer;
}
.amer-copt__cancel::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 1px; background: currentColor; }
.amer-copt__cancel:hover::after, .amer-copt__cancel:focus-visible::after { animation: amer-copt-line .45s var(--amer-ease); }
@keyframes amer-copt-line { 0% { transform: scaleX(1); } 45% { transform: scaleX(0); } 100% { transform: scaleX(1); } }

/* loading the product: two rows of soft pills */
.amer-copt__skeleton { display: flex; flex-wrap: wrap; gap: 8px; }
.amer-copt__skeleton span { inline-size: 64px; block-size: 36px; border-radius: 4px; background: color-mix(in srgb, var(--copt-head) 8%, var(--copt-bg)); animation: amer-copt-pulse 1.4s ease-in-out infinite; }
@keyframes amer-copt-pulse { 50% { opacity: .45; } }

/* «تعديل» with the theme's pencil, beside «إزالة» and in its style (small, 600, a line that redraws on hover), in the
   heading colour instead of the red */
.amer-copt-open {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  margin: 0; padding: 0; border: 0; background: none;
  font: inherit; font-size: 14px; font-weight: 600; line-height: 22px; color: var(--amer-heading); cursor: pointer;
}
.mt-cart[data-mt-cart] .amer-copt-open { color: var(--mtc-head); }
.amer-copt-open span { position: relative; }
.amer-copt-open span::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 1px; background: currentColor; }
.amer-copt-open:hover span::after, .amer-copt-open:focus-visible span::after { animation: amer-copt-line .45s var(--amer-ease); }
.amer-copt-open__icon { flex: none; display: block; }
.amer-copt-open:disabled { opacity: .5; cursor: not-allowed; }

/* base.css gives every button in the drawer's body `font: inherit; color: inherit` (.mt-cart [data-cart-body] button,
   0,2,1), which painted «حفظ» in the heading colour on the heading-coloured button: the editor's buttons say theirs again
   here, and the 40px height wins over .amer-btn's 58px from 1200px. */
.mt-cart[data-mt-cart] .amer-copt button.amer-copt__save,
.amer-copt .amer-btn.amer-copt__save { min-block-size: 40px; block-size: 40px; padding-inline: 24px; background: var(--amer-primary); color: var(--amer-on-primary); font-size: 14px; font-weight: 600; line-height: 20px; }
.mt-cart[data-mt-cart] .amer-copt button.amer-copt__save:hover,
.mt-cart[data-mt-cart] .amer-copt button.amer-copt__save:focus-visible { background: var(--amer-primary-hover); color: var(--amer-on-primary); }
.mt-cart[data-mt-cart] .amer-copt button.amer-copt__cancel { font-size: 14px; font-weight: 600; line-height: 22px; color: var(--copt-head); }
.mt-cart[data-mt-cart] .amer-copt button.amer-copt__toggle { font-size: 14px; font-weight: 500; color: var(--copt-head); }
.mt-cart[data-mt-cart] [data-cart-body] button.amer-copt-open { font-size: 14px; font-weight: 600; line-height: 22px; color: var(--mtc-head); }

/* the drawer: «تعديل» and «إزالة» together at the end of the tools row; the editor under them, in the line's own column;
   a line just changed is marked for a moment */
.mt-cart[data-mt-cart] .mt-cart__tools .amer-copt-open { margin-inline-start: auto; }
.mt-cart[data-mt-cart] .mt-cart__options { margin-block-start: 14px; }
.mt-cart[data-mt-cart] .mt-cart__options[hidden] { display: none; }
.mt-cart[data-mt-cart] .mt-cart__line.is-updated { background: var(--mtc-soft); transition: background-color .6s ease; }

/* the cart page: «تعديل» beside Zid's «إزالة»; the editor under the line, in the product's column (indented by the
   picture column and its gap), as wide as a column of words */
.template_for_cart_products_list .cart-product-delete.has-copt { display: flex; align-items: center; gap: 20px; }
.amer-cart-options { margin: 0 0 20px; margin-inline-start: 124px; max-inline-size: 400px; }
.amer-cart-options[hidden] { display: none; }
@media (max-width: 767px) { .amer-cart-options { margin-inline-start: 94px; } }
.cart-product-row-wrapper[aria-busy="true"] { opacity: .55; transition: opacity .2s ease; }
.cart-product-row-wrapper.is-updated { background: color-mix(in srgb, var(--amer-heading) 4%, var(--amer-bg)); transition: background-color .6s ease; }
.cart-product-row-wrapper[aria-busy="true"] .cart-products-action,
.cart-product-row-wrapper[aria-busy="true"] .cart-product-delete { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .amer-copt, .amer-copt__list, .amer-copt__skeleton span { animation: none; }
  .amer-copt-open:hover span::after, .amer-copt-open:focus-visible span::after,
  .amer-copt__cancel:hover::after, .amer-copt__cancel:focus-visible::after { animation: none; }
}