/* =====================================================================
   ARIAN CABLE - UX polish layer (loaded AFTER style.css; additive only)
   Goals: touch-first product cards, clear primary actions (quote / call),
   calmer support chat, visible keyboard focus, reduced-motion support.
   Brand tokens are reused from style.css (--cat-yellow, --barghsan-red ...).
   ===================================================================== */
:root {
  --ux-focus: #0F172A;
  --ux-focus-ring: #FFCC00;
  --ux-ok: #15803D;
  --ux-ok-bg: #DCFCE7;
  --ux-radius: 12px;
  --ux-space-1: 4px;
  --ux-space-2: 8px;
  --ux-space-3: 12px;
  --ux-space-4: 16px;
  --ux-space-6: 24px;
  --ux-dur: 180ms;
}

html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }

/* ---------- Accessibility ---------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--ux-focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--ux-focus);
  border-radius: 8px;
}
.ux-skip-link {
  position: fixed; top: -60px; inset-inline-start: 12px; z-index: 100000;
  background: var(--ux-focus); color: #fff; padding: 10px 16px; border-radius: 8px;
  font-weight: 800; text-decoration: none; transition: top var(--ux-dur) ease-out;
}
.ux-skip-link:focus { top: 12px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Header call button ---------- */
.ux-header-call {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px; border-radius: var(--ux-radius);
  background: var(--ux-focus); color: #fff !important; text-decoration: none;
  font-weight: 800; font-size: 0.86rem; white-space: nowrap;
  transition: transform var(--ux-dur) ease-out, background var(--ux-dur) ease-out;
}
.ux-header-call:hover { background: #1E293B; }
.ux-header-call:active { transform: scale(0.97); }
.ux-header-call small { display: block; font-size: 0.64rem; font-weight: 700; color: #FCD34D; line-height: 1.1; }
.ux-header-call .ux-phone-num { direction: ltr; unicode-bidi: plaintext; font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) { .ux-header-call small { display: none; } }
@media (max-width: 860px) { .ux-header-call { display: none; } }

/* ---------- Hero: clear primary actions + trust ---------- */
.ux-hero-actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ux-space-3);
  margin: var(--ux-space-6) auto 0; max-width: 760px;
}
.ux-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: var(--ux-radius);
  font-weight: 900; font-size: 0.95rem; text-decoration: none; cursor: pointer;
  border: 2px solid transparent; transition: transform var(--ux-dur) ease-out, box-shadow var(--ux-dur) ease-out, background var(--ux-dur) ease-out;
}
.ux-btn:active { transform: scale(0.97); }
.ux-btn-primary { background: #FFCC00; color: #111; box-shadow: 0 6px 18px rgba(255, 204, 0, 0.35); }
.ux-btn-primary:hover { background: #E6B800; }
.ux-btn-dark { background: #0F172A; color: #fff; }
.ux-btn-dark:hover { background: #1E293B; }
.ux-btn-ghost { background: #fff; color: #0F172A; border-color: #CBD5E1; }
.ux-btn-ghost:hover { border-color: #0F172A; }
.ux-btn .ux-phone-num { direction: ltr; unicode-bidi: plaintext; font-variant-numeric: tabular-nums; }

.ux-trust-strip {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ux-space-3);
  margin: var(--ux-space-6) auto 0; max-width: 980px; padding: 0; list-style: none;
}
.ux-trust-strip li {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  background: #fff; border: 1px solid #E2E8F0; border-radius: var(--ux-radius);
  font-size: 0.82rem; font-weight: 800; color: #0F172A; line-height: 1.45;
}
.ux-trust-strip svg { flex: none; width: 22px; height: 22px; color: #B45309; }
@media (max-width: 860px) { .ux-trust-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) {
  .ux-btn { flex: 1 1 100%; }
  .ux-trust-strip li { padding: 10px; font-size: 0.76rem; }
}

/* ---------- Product cards: info + action always visible (works on touch, no hover needed) ---------- */
.product-card .pc-meta {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--ux-space-3);
}
.pc-chip {
  display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px;
  background: #F1F5F9; color: #334155; font-size: 0.72rem; font-weight: 800; line-height: 1.4;
}
.pc-chip.pc-code { font-family: ui-monospace, 'JetBrains Mono', monospace; direction: ltr; font-variant-numeric: tabular-nums; color: #0369A1; background: #E0F2FE; }
.pc-chip.pc-stock { background: var(--ux-ok-bg); color: var(--ux-ok); }
.pc-chip.pc-stock::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-inline-end: 6px; }
.product-card .pc-add {
  width: 100%; min-height: 44px; margin-top: var(--ux-space-3);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 10px; cursor: pointer;
  background: #0F172A; color: #fff; font-weight: 900; font-size: 0.86rem;
  transition: background var(--ux-dur) ease-out, transform var(--ux-dur) ease-out;
}
.product-card .pc-add:hover { background: #FFCC00; color: #111; }
.product-card .pc-add:active { transform: scale(0.97); }
.product-card .pc-add svg { width: 18px; height: 18px; }
/* the old hover-only drawer repeated the button; keep its specs, drop the duplicate action */
.product-hover-specs-drawer .btn-open-order-tab { display: none !important; }
.product-price-val { font-variant-numeric: tabular-nums; }
@media (hover: none) {
  .product-hover-specs-drawer { display: none !important; }   /* hover-only content is unreachable on touch */
}

/* ---------- Support chat: calmer teaser, never covers content or the bottom bar ---------- */
.support-chat-preview-card { display: none !important; }
.support-chat-preview-card.ux-show { display: flex !important; }
@media (max-width: 1024px) {
  .support-chat-preview-card.ux-show {
    width: min(270px, calc(100vw - 32px)); inset-inline-start: 16px; left: 16px;
    bottom: calc(132px + env(safe-area-inset-bottom, 0px));
  }
  .support-chat-trigger { bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important; }
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Mobile bottom bar: the call action ---------- */
.mob-nav-item.ux-mob-call { color: #B91C1C; }
.mob-nav-item { min-height: 44px; }

/* ---------- Touch target floor on coarse pointers ---------- */
@media (pointer: coarse) {
  .cat-tab-btn, .quick-icon-btn, .search-main-input, .barghsan-btn-red { min-height: 44px; }
}

/* Bottom bar: max 5 items (call added) - the account entry stays reachable from the header user icon */
.mobile-bottom-nav .mob-nav-item[href="auth"] { display: none !important; }

/* Mobile search: never clip the submit button; keep the input shrinkable */
.search-input-container { align-items: center; }
.search-input-container .search-main-input { min-width: 0; text-overflow: ellipsis; }
.search-input-container .barghsan-btn-red { flex: none; min-width: 76px; white-space: nowrap; }

/* Floating buttons: back-to-top sits ABOVE the chat button (no overlap), both clear of the bottom bar */
@media (max-width: 1024px) {
  .floating-scroll-top-btn { bottom: calc(132px + env(safe-area-inset-bottom, 0px)) !important; width: 44px !important; height: 44px !important; }
}
.pc-chip { unicode-bidi: plaintext; }

/* type="search" keeps the field out of the password manager; drop the native search styling */
input[type="search"].search-main-input { -webkit-appearance: none; appearance: none; }
input[type="search"].search-main-input::-webkit-search-decoration { display: none; }

/* ---------- Desktop review fixes (v1.0.4) ---------- */
/* Header: some pages repeat the "ship nationwide" badge inside the nav; keep only the one in header actions */
.nav-links .header-shipping-feature { display: none !important; }
.ux-header-call small { font-size: 0.72rem; }

/* Category tabs: on desktop every category is visible (they wrapped off-screen with no scroll cue) */
@media (min-width: 1025px) {
  .category-tabs { flex-wrap: wrap !important; overflow: visible !important; row-gap: 10px; }
}

/* Product card price: the generic ".product-price-row span" rule greyed out the price digits too */
.product-price-row .product-price-val,
.product-price-row .product-price-val .price-num { color: #0F172A !important; font-size: 1rem !important; font-weight: 900 !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.product-price-row .product-price-val .price-unit { color: #64748B !important; font-size: 0.72rem !important; font-weight: 700 !important; }

/* Price lists: the long "updated" note squeezed into a narrow column and the button overflowed the card */
.pricelist-card-footer { flex-wrap: wrap; gap: 12px; }
.pricelist-card-footer .pricelist-date-tag { flex: 1 1 100%; line-height: 1.6; }
.pricelist-card-footer .view-pricelist-btn { flex: 1 1 100%; justify-content: center; min-height: 44px; }

/* Compare page: the spec header cell was light text on light grey; buttons use the brand colours */
.compare-table thead .spec-header-cell { color: #334155 !important; }
.btn-compare-add-cart { background: #0F172A !important; }
.btn-compare-add-cart:hover { background: #FFCC00 !important; color: #111 !important; }

/* Articles list: meta row wraps cleanly instead of squeezing each item into a word column */
.art-card-meta { flex-wrap: wrap; gap: 6px 12px; }
.art-card-meta span:first-child { white-space: nowrap; }
.art-card-meta span:last-child { min-width: 0; overflow-wrap: anywhere; }
.product-price-row { flex-wrap: wrap; }
.product-price-row > span:first-child { white-space: nowrap; }

/* Auth tabs: keep each label on one line */
.auth-tab-btn { white-space: nowrap; padding-inline: 6px; }

/* Cart: disabled checkout action (empty cart) */
.checkout-action-btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none !important; transform: none !important; }

/* Admin tables: wide tables scroll inside their card instead of cutting off the "actions" column */
.admin-form-card { overflow-x: auto !important; }
.admin-table th { padding: 14px 10px !important; }
.admin-table td { padding: 12px 10px !important; font-size: 0.92rem !important; }
/* the code cell was display:inline-block, which pulled it out of the table row (misaligned badge) */
.admin-table.compact-table td.col-code {
  display: table-cell !important; background: transparent !important; border: 0 !important;
  border-bottom: 1px solid var(--border-subtle, #E2E8F0) !important; border-radius: 0 !important; vertical-align: middle;
}

/* Admin chat: long ids / emails wrap inside the details panel instead of running out of it */
.admin-chat-details-panel { overflow-wrap: anywhere; }
/* The storefront's floating buttons cover admin tables; hide them while the admin workspace is open */
body:has(#adminWorkspace.active) .floating-scroll-top-btn,
body:has(#adminWorkspace.active) .support-chat-trigger,
body:has(#adminWorkspace.active) .support-chat-preview-card { display: none !important; }

/* Desktop chat teaser: a small speech bubble next to the chat button, not a card floating over the product grid */
@media (min-width: 1025px) {
  .support-chat-preview-card.ux-show { width: 250px !important; bottom: 104px !important; left: 88px !important; }
}

/* Trust strip: wider so each promise fits on one or two balanced lines */
.ux-trust-strip { max-width: 1120px; }

/* Deals carousel: same price layout on every card (old price line, new price line, never split "ریال") */
.discount-card-prices { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 2px; }
.discount-card-old-price, .discount-card-new-price { white-space: nowrap; font-variant-numeric: tabular-nums; }