/* ==========================================================================
   Norel polish layer — design tokens + interaction/loading polish.
   Purely additive: it introduces a consistent scale for new/updated work and
   adds interaction feel, without rewriting the hundreds of existing hardcoded
   values (that mass-migration needs visual QA page by page).
   ========================================================================== */

:root {
  /* Radius scale — replaces the ad-hoc 12/14/16/18/22/24/28px values in use. */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Spacing scale (4px base) — for consistent rhythm in new work. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Elevation — one coherent depth ramp instead of per-component shadows. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .28);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, .32);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, .40);

  /* Motion — one timing language across the UI. */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 320ms;

  /* Stacking order — an explicit ladder to replace ad-hoc 9999/99999 values. */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* --------------------------------------------------------------------------
   Interaction feel: every clickable thing gets a consistent, smooth response
   instead of an instant state flip.
   -------------------------------------------------------------------------- */
button,
a,
[role="button"],
.product-card,
.vault-card,
.mysub-card,
.order-card,
.bot-mgmt-card,
.general-manage-item,
.nl-sc {
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

button:not(:disabled):hover,
[role="button"]:not([aria-disabled="true"]):hover {
  transform: translateY(-1px);
}

button:not(:disabled):active,
[role="button"]:not([aria-disabled="true"]):active {
  transform: translateY(0);
  transition-duration: var(--dur-fast);
}

button:disabled,
[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  transform: none !important;
}

/* Every clickable element should say so. */
button:not(:disabled),
a[href],
[role="button"]:not([aria-disabled="true"]),
label[for],
summary {
  cursor: pointer;
}

/* Keyboard focus must stay visible — never trade accessibility for looks. */
:focus-visible {
  outline: 2px solid #c2b6a1;
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   Loading skeletons — replaces bare "جاري التحميل..." text with a shape that
   matches the content that's about to appear, so the layout doesn't jump.
   Usage: <div class="norel-skeleton" style="height:64px"></div>
   -------------------------------------------------------------------------- */
.norel-skeleton {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: rgba(242, 237, 228, .05);
}

.norel-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(242, 237, 228, .08),
    transparent
  );
  animation: norel-skeleton-sweep 1.4s infinite;
}

[dir="rtl"] .norel-skeleton::after {
  animation-name: norel-skeleton-sweep-rtl;
}

@keyframes norel-skeleton-sweep {
  100% { transform: translateX(100%); }
}

@keyframes norel-skeleton-sweep-rtl {
  100% { transform: translateX(-200%); }
}

.norel-skeleton-text {
  height: 12px;
  margin-block: var(--space-2);
  border-radius: var(--radius-pill);
}

.norel-skeleton-text:last-child {
  width: 60%;
}