/**
 * Add-to-cart quick modal — clean, professional redesign.
 *
 * Targets the live DOM rendered by numart-cart-quick-modal.html.twig:
 *   .cart-modal
 *     .cart-modal-loading > .spinner
 *     .cart-modal-ajax-content
 *       .nm-modal-body-wrapper.numart-cart-quick-modal-content
 *         .nm-modal-content-section
 *           .quick-modal-close
 *           .quick-modal-body
 *             .quick-modal-gallery
 *               .gallery-main > img.modal-product-image
 *               .modal-actions-area
 *                 .form-item-quantity-0-value (or .nm-qty-select)
 *                 .modal-stock-badge
 *                 .form-actions > input.button--add-to-cart
 *             .quick-modal-details
 *               .detail-tags > .tag-brand, .tag-category
 *               .detail-title (h2)
 *               .detail-description
 *               .detail-price > .price-number, .original-price
 *               .detail-variations  (form + JS-built .nm-attr-select dropdowns)
 *
 * The JS appends .nm-attr-select dropdowns after each attribute fieldset and
 * .nm-qty-select around the quantity input. We hide the raw radio fieldsets
 * and the raw quantity number input so only those polished controls render.
 */

/* ---------- design tokens (scoped to .cart-modal) ---------- */
.cart-modal {
  --nmm-radius: 14px;
  --nmm-radius-sm: 10px;
  --nmm-border: #e6e8ec;
  --nmm-border-strong: #c7cad1;
  --nmm-bg: #ffffff;
  --nmm-bg-soft: #f6f7f9;
  --nmm-text: #111418;
  --nmm-muted: #6b7280;
  --nmm-accent: #111418;
  --nmm-accent-on: #ffffff;
  --nmm-success: #16a34a;
  --nmm-danger: #dc2626;
  --nmm-shadow: 0 24px 64px rgba(15, 23, 42, .22), 0 2px 8px rgba(15, 23, 42, .08);
}

/* ---------- overlay (created by JS) ---------- */
.cart-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 99990;
  opacity: 0;
  animation: nmmOverlayIn .22s ease-out forwards;
}
@keyframes nmmOverlayIn { to { opacity: 1; } }

/* ---------- modal shell ---------- */
.cart-modal {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(.96) !important;
  width: min(880px, calc(100vw - 32px));
  max-height: min(86vh, 720px);
  background: var(--nmm-bg);
  border-radius: var(--nmm-radius);
  box-shadow: var(--nmm-shadow);
  z-index: 99991;
  opacity: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--nm-font, 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif);
  color: var(--nmm-text);
}
.cart-modal.modal-animate-in {
  animation: nmmModalIn .28s cubic-bezier(.2,.9,.25,1.15) forwards;
}
@keyframes nmmModalIn {
  to { opacity: 1; transform: translate(-50%, -50%) scale(1) !important; }
}

/* loading spinner overlay (inside the modal) */
.cart-modal-loading {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .82);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cart-modal-loading .spinner {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid var(--nmm-border);
  border-top-color: var(--nmm-accent);
  animation: nmmSpin .8s linear infinite;
}
@keyframes nmmSpin { to { transform: rotate(360deg); } }

.cart-modal-ajax-content { display: contents; }
.nm-modal-body-wrapper,
.numart-cart-quick-modal-content,
.nm-modal-content-section {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* ---------- close button ---------- */
.quick-modal-close {
  position: absolute;
  top: 14px;
  inset-inline-start: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--nmm-border);
  background: #fff;
  color: var(--nmm-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 4;
  transition: background .15s ease, transform .15s ease, border-color .15s ease;
}
.quick-modal-close:hover {
  background: var(--nmm-bg-soft);
  border-color: var(--nmm-border-strong);
}
.quick-modal-close:active { transform: scale(.96); }
.quick-modal-close svg { width: 18px; height: 18px; }

/* ---------- two-column body ---------- */
.quick-modal-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/* gallery / actions column */
.quick-modal-gallery {
  background: #fff;
  padding: 36px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  border-inline-end: 1px solid var(--nmm-border);
}
.gallery-main {
  background: #fff;
  border-radius: var(--nmm-radius-sm);
  border: 1px solid var(--nmm-border);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
}
.modal-product-image {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* details column */
.quick-modal-details {
  padding: 36px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background: #fff;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* ---------- tags row — SKU-style muted line under title ---------- */
.detail-tags {
  order: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: -6px 0 0;
  font-size: 12px;
  color: var(--nmm-muted);
}
.detail-tags .tag {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 0;
  padding: 0;
  height: auto;
  border-radius: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--nmm-muted);
  text-transform: none;
}
.detail-tags .tag a { color: inherit; text-decoration: none; }
.detail-tags .tag a:hover { color: var(--nmm-text); text-decoration: underline; }
.detail-tags .tag-brand::before { content: "Brand: "; color: var(--nmm-muted); }
.detail-tags .tag-category::before { content: "Category: "; color: var(--nmm-muted); }
[dir="rtl"] .detail-tags .tag-brand::before { content: "العلامة: "; }
[dir="rtl"] .detail-tags .tag-category::before { content: "الفئة: "; }

/* ---------- title / description / price ---------- */
.detail-title {
  order: 1;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
  color: var(--nmm-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.detail-description {
  font-size: 14px;
  color: var(--nmm-muted);
  line-height: 1.55;
  overflow: auto;
}
.detail-description:empty { display: none; }

.detail-price {
  order: 3;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 4px 0 6px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--nmm-border);
}
.detail-price .price-number {
  font-size: 24px;
  font-weight: 800;
  color: var(--nmm-text);
  letter-spacing: -.02em;
}
.detail-price .original-price {
  font-size: 13px;
  color: var(--nmm-muted);
  text-decoration: line-through;
}

/* ---------- variations area ---------- */
.detail-variations {
  order: 4;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 0;
}
.detail-variations form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  max-width: 100%;
}
.detail-variations,
.detail-variations * {
  max-width: 100%;
  box-sizing: border-box;
}
/* The cart modal carries the `.nm-pdp` class so it inherits the full
   PDP variation styling (custom .nm-attr-select dropdowns, .nm-qty-select,
   add-to-cart CTA). This file only adds the modal *shell* + small layout
   tweaks specific to the modal. */

/* Modal-only layout for the variations area. */
.detail-variations .layout--onecol,
.detail-variations .layout__region,
.detail-variations .field--name-purchased-entity,
.detail-variations .attribute-widgets {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
}

/* ---------- actions area (qty + add to cart) ---------- */
.modal-actions-area {
  order: 5;
  margin-top: auto;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--nmm-border);
}
/* Hide the redundant "✓ متوفر" badge in the modal. */
.modal-actions-area .modal-stock-badge { display: none !important; }

/* Hide the "الكمية" label in the modal. */
.modal-actions-area .form-item-quantity-0-value {
  display: flex;
  align-items: center;
  margin: 0;
}
.modal-actions-area .form-item-quantity-0-value > label { display: none; }
.modal-actions-area .form-actions { margin: 0; padding: 0; }
.modal-actions-area .field--name-quantity { display: none; }

/* hide unused commerce wrappers but keep layout clean */
.detail-variations .field--name-quantity { display: none; }

/* ---------- attribute swatches/pills (modal only) ----------
   The PDP enhances attribute fieldsets into a custom .nm-attr-select
   dropdown, but inside the cart modal we want native swatches/pills.
   We override the PDP `display:none` rules and the visually-hidden
   radio rule, then style the labels as colored swatches / size chips. */

/* Make sure no .nm-attr-select dropdown leaks into the modal. */
.cart-modal.nm-pdp .nm-attr-select { display: none !important; }

/* Re-show the legend label ("اللون" / "القياس") above swatches. */
.cart-modal.nm-pdp .product--rendered-attribute > legend,
.cart-modal.nm-pdp .product--rendered-attribute .fieldset-legend {
  display: block !important;
  font-size: 13px;
  font-weight: 600;
  color: var(--nmm-muted);
  margin: 0 0 8px;
  padding: 0;
  border: 0;
}

/* Show the radio container as a horizontal wrap row. */
.cart-modal.nm-pdp .product--rendered-attribute .form-radios,
.cart-modal.nm-pdp .product--rendered-attribute .fieldset-wrapper > .form-radios,
.cart-modal.nm-pdp .product--rendered-attribute .fieldset-wrapper {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}
.cart-modal.nm-pdp .product--rendered-attribute .form-check,
.cart-modal.nm-pdp .product--rendered-attribute .form-item,
.cart-modal.nm-pdp .product--rendered-attribute .js-form-type-radio,
.cart-modal.nm-pdp .product--rendered-attribute .form-check.js-form-type-radio,
.cart-modal.nm-pdp .product--rendered-attribute .fieldset-wrapper > .js-form-item {
  display: inline-flex !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  clip: auto !important;
  overflow: visible !important;
  white-space: normal !important;
  background: none !important;
  border: 0 !important;
}

/* Keep the actual <input type="radio"> visually hidden but clickable
   (Drupal AJAX needs it). Clicks travel to it through the styled label. */
.cart-modal.nm-pdp .product--rendered-attribute input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
}

/* ----- Color attribute → swatches ----- */
.cart-modal.nm-pdp .product--rendered-attribute[id*="attribute-color"] .form-check-label,
.cart-modal.nm-pdp .product--rendered-attribute[id*="attribute-color"] label.option {
  cursor: pointer;
  margin: 0;
  padding: 0;
  display: inline-flex !important;
  border-radius: 8px;
  background: none !important;
  border: 0 !important;
  height: auto !important;
  min-width: 0 !important;
  transition: transform .12s ease;
}
.cart-modal.nm-pdp .product--rendered-attribute[id*="attribute-color"] .form-check-label .name {
  display: none;
}
.cart-modal.nm-pdp .product--rendered-attribute[id*="attribute-color"] .color_field__swatch {
  width: 36px !important;
  height: 36px !important;
  border-radius: 6px !important;
  border: 1px solid var(--nmm-border) !important;
  box-shadow: none;
  transition: box-shadow .15s ease, transform .12s ease;
}
.cart-modal.nm-pdp .product--rendered-attribute[id*="attribute-color"] .form-check-label:hover .color_field__swatch {
  box-shadow: 0 0 0 1px var(--nmm-border-strong);
}
.cart-modal.nm-pdp .product--rendered-attribute[id*="attribute-color"] input[type="radio"]:checked + .form-check-label .color_field__swatch,
.cart-modal.nm-pdp .product--rendered-attribute[id*="attribute-color"] input[type="radio"]:checked + label.option .color_field__swatch {
  box-shadow: 0 0 0 2px var(--nmm-text);
  border-color: transparent !important;
}

/* ----- Size (and other text) attributes → square pills ----- */
.cart-modal.nm-pdp .product--rendered-attribute:not([id*="attribute-color"]) .form-check-label,
.cart-modal.nm-pdp .product--rendered-attribute:not([id*="attribute-color"]) label.option {
  cursor: pointer;
  margin: 0;
  height: 36px;
  min-width: 36px;
  padding: 0 12px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--nmm-border);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--nmm-text);
  transition: border-color .12s ease, background .12s ease, color .12s ease, box-shadow .15s ease;
  text-align: center;
  white-space: nowrap;
  width: auto;
}
.cart-modal.nm-pdp .product--rendered-attribute:not([id*="attribute-color"]) .form-check-label:hover,
.cart-modal.nm-pdp .product--rendered-attribute:not([id*="attribute-color"]) label.option:hover {
  border-color: var(--nmm-border-strong);
}
.cart-modal.nm-pdp .product--rendered-attribute:not([id*="attribute-color"]) input[type="radio"]:checked + .form-check-label,
.cart-modal.nm-pdp .product--rendered-attribute:not([id*="attribute-color"]) input[type="radio"]:checked + label.option {
  background: #fff;
  border-color: transparent;
  color: var(--nmm-text);
  box-shadow: 0 0 0 2px var(--nmm-text);
}

/* Disabled / unavailable variant. */
.cart-modal.nm-pdp .product--rendered-attribute .form-item--disabled,
.cart-modal.nm-pdp .product--rendered-attribute .form-check.is-disabled {
  opacity: .35;
  pointer-events: none;
}
.cart-modal.nm-pdp .product--rendered-attribute .form-item--disabled label {
  text-decoration: line-through;
}

/* ---------- responsive ---------- */
@media (max-width: 820px) {
  .cart-modal {
    width: 100vw;
    max-width: 100vw;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
  }
  .quick-modal-body {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    overflow-y: auto;
  }
  .quick-modal-gallery {
    padding: 56px 16px 16px;
  }
  .gallery-main {
    aspect-ratio: 4 / 3;
    max-height: 38vh;
  }
  .quick-modal-details {
    padding: 16px;
  }
  .modal-actions-area {
    position: sticky;
    bottom: 0;
    background: #fff;
    padding: 12px 0 4px;
  }
}

@media (max-width: 480px) {
  .detail-title { font-size: 17px; }
  .detail-price .price-number { font-size: 22px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .cart-modal.modal-animate-in,
  .cart-modal-overlay { animation: none !important; opacity: 1 !important; transform: translate(-50%, -50%) !important; }
  .cart-modal-loading .spinner { animation: none; }
}