/**
 * EXTRUCK — Unified 3D Button System
 * Site · Admin · Dealer · User · PC app · Android WebView
 * Load AFTER app.css / admin.css / pc app.css
 */

:root {
  --ex-btn-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ex-btn-gold-top: #fde68a;
  --ex-btn-gold-mid: #f59e0b;
  --ex-btn-gold-bot: #d97706;
  --ex-btn-gold-edge: #b45309;
  --ex-btn-navy-top: #1e293b;
  --ex-btn-navy-mid: #0f172a;
  --ex-btn-navy-bot: #020617;
  --ex-btn-navy-edge: #020617;
  --ex-btn-ok-top: #34d399;
  --ex-btn-ok-mid: #059669;
  --ex-btn-ok-bot: #047857;
  --ex-btn-ok-edge: #065f46;
  --ex-btn-danger-top: #fb7185;
  --ex-btn-danger-mid: #e11d48;
  --ex-btn-danger-bot: #be123c;
  --ex-btn-danger-edge: #9f1239;
  --ex-btn-sky-top: #7dd3fc;
  --ex-btn-sky-mid: #0ea5e9;
  --ex-btn-sky-bot: #0284c7;
  --ex-btn-sky-edge: #0369a1;
}

/* ── Shared 3D mechanics ── */
.ex-btn-3d,
.btn-b2b-gold,
.btn-b2b-navy,
.btn-b2b-success,
.btn-b2b-danger,
.btn-b2b-ghost,
.btn.btn-primary,
a.btn-primary,
button.btn-primary,
.btn.btn-secondary,
a.btn-secondary,
button.btn-secondary,
.ex-blog-mini-btn,
.ex-cat-card-cta,
.ex-cat-empty-cta,
.ex-apk-btn,
.val-btn-3d {
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.45rem !important;
  min-height: 2.5rem;
  padding: 0.65rem 1.15rem !important;
  border-radius: 0.9rem !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  border: 2px solid rgba(255, 255, 255, 0.55) !important;
  transform: translateY(0);
  transition: transform 0.2s var(--ex-btn-ease), box-shadow 0.2s ease, filter 0.15s ease !important;
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  box-sizing: border-box;
}

.ex-btn-3d:hover,
.btn-b2b-gold:hover,
.btn-b2b-navy:hover,
.btn-b2b-success:hover,
.btn-b2b-danger:hover,
.btn.btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover,
.btn.btn-secondary:hover,
a.btn-secondary:hover,
button.btn-secondary:hover,
.ex-blog-mini-btn:hover,
.ex-cat-card-cta:hover,
.ex-cat-empty-cta:hover,
.ex-apk-btn:hover,
.val-btn-3d:hover {
  transform: translateY(-2px) scale(1.03) !important;
}

.ex-btn-3d:active,
.btn-b2b-gold:active,
.btn-b2b-navy:active,
.btn-b2b-success:active,
.btn-b2b-danger:active,
.btn.btn-primary:active,
a.btn-primary:active,
button.btn-primary:active,
.btn.btn-secondary:active,
a.btn-secondary:active,
button.btn-secondary:active,
.ex-blog-mini-btn:active,
.ex-cat-card-cta:active,
.ex-cat-empty-cta:active,
.ex-apk-btn:active,
.val-btn-3d:active {
  transform: translateY(2px) scale(0.98) !important;
}

.ex-btn-3d:disabled,
.btn-b2b-gold:disabled,
.btn-b2b-navy:disabled,
.btn-b2b-success:disabled,
.btn-b2b-danger:disabled,
.val-btn-3d:disabled,
button:disabled.btn-b2b-gold,
button:disabled.btn-b2b-navy {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) !important;
}

/* ── Gold / Primary CTA ── */
.btn-b2b-gold,
.btn.btn-primary,
a.btn-primary,
button.btn-primary,
.ex-btn-3d--rfq,
.ex-btn-3d--gold,
.ex-blog-mini-btn.is-gold,
.ex-apk-btn,
.val-btn-vip,
.val-btn-free {
  color: #1c1917 !important;
  background: linear-gradient(145deg, var(--ex-btn-gold-top) 0%, var(--ex-btn-gold-mid) 48%, var(--ex-btn-gold-bot) 100%) !important;
  box-shadow:
    0 4px 0 var(--ex-btn-gold-edge),
    0 8px 18px rgba(217, 119, 6, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

.btn-b2b-gold:hover,
.btn.btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover,
.ex-btn-3d--rfq:hover,
.ex-btn-3d--gold:hover,
.ex-blog-mini-btn.is-gold:hover,
.ex-apk-btn:hover,
.val-btn-vip:hover,
.val-btn-free:hover {
  box-shadow:
    0 6px 0 var(--ex-btn-gold-edge),
    0 12px 24px rgba(217, 119, 6, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

.btn-b2b-gold:active,
.btn.btn-primary:active,
.ex-btn-3d--rfq:active,
.ex-apk-btn:active {
  box-shadow: 0 2px 0 var(--ex-btn-gold-edge), 0 4px 10px rgba(217, 119, 6, 0.28) !important;
}

/* ── Navy / Secondary ── */
.btn-b2b-navy,
.btn.btn-secondary,
a.btn-secondary,
button.btn-secondary,
.ex-btn-3d--view,
.ex-btn-3d--navy,
.ex-blog-mini-btn:not(.is-gold),
.ex-cat-card-cta,
.ex-cat-empty-cta,
.val-btn-navy {
  color: #fde68a !important;
  background: linear-gradient(145deg, var(--ex-btn-navy-top) 0%, var(--ex-btn-navy-mid) 55%, var(--ex-btn-navy-bot) 100%) !important;
  box-shadow:
    0 4px 0 var(--ex-btn-navy-edge),
    0 8px 18px rgba(15, 23, 42, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

.btn-b2b-navy:hover,
.btn.btn-secondary:hover,
a.btn-secondary:hover,
button.btn-secondary:hover,
.ex-btn-3d--view:hover,
.ex-btn-3d--navy:hover,
.ex-blog-mini-btn:not(.is-gold):hover,
.ex-cat-card-cta:hover,
.ex-cat-empty-cta:hover,
.val-btn-navy:hover {
  color: #fff !important;
  box-shadow:
    0 6px 0 var(--ex-btn-navy-edge),
    0 12px 24px rgba(15, 23, 42, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

.btn-b2b-navy:active,
.ex-btn-3d--view:active,
.ex-cat-card-cta:active {
  box-shadow: 0 2px 0 var(--ex-btn-navy-edge), 0 4px 10px rgba(15, 23, 42, 0.3) !important;
}

/* ── Success / Emerald (prices, track) ── */
.btn-b2b-success,
.ex-btn-3d--ok,
.ex-btn-3d--prices,
.val-btn-track {
  color: #fff !important;
  background: linear-gradient(145deg, var(--ex-btn-ok-top) 0%, var(--ex-btn-ok-mid) 48%, var(--ex-btn-ok-bot) 100%) !important;
  box-shadow:
    0 4px 0 var(--ex-btn-ok-edge),
    0 8px 18px rgba(5, 150, 105, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

.btn-b2b-success:hover,
.ex-btn-3d--ok:hover,
.val-btn-track:hover {
  box-shadow:
    0 6px 0 var(--ex-btn-ok-edge),
    0 12px 24px rgba(5, 150, 105, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

/* ── Danger ── */
.btn-b2b-danger,
.ex-btn-3d--danger {
  color: #fff !important;
  background: linear-gradient(145deg, var(--ex-btn-danger-top) 0%, var(--ex-btn-danger-mid) 48%, var(--ex-btn-danger-bot) 100%) !important;
  box-shadow:
    0 4px 0 var(--ex-btn-danger-edge),
    0 8px 18px rgba(225, 29, 72, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.btn-b2b-danger:hover,
.ex-btn-3d--danger:hover {
  box-shadow:
    0 6px 0 var(--ex-btn-danger-edge),
    0 12px 24px rgba(225, 29, 72, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

/* ── Sky / Info (Zarinpal etc.) ── */
.ex-btn-3d--sky,
.val-btn-zarin {
  color: #0c4a6e !important;
  background: linear-gradient(145deg, var(--ex-btn-sky-top) 0%, var(--ex-btn-sky-mid) 48%, var(--ex-btn-sky-bot) 100%) !important;
  box-shadow:
    0 4px 0 var(--ex-btn-sky-edge),
    0 8px 18px rgba(14, 165, 233, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

/* ── Ghost ── */
.btn-b2b-ghost,
.ex-btn-3d--ghost {
  color: #0f172a !important;
  background: linear-gradient(160deg, #f8fafc, #e2e8f0) !important;
  border: 2px solid #cbd5e1 !important;
  box-shadow:
    0 3px 0 #94a3b8,
    0 6px 14px rgba(15, 23, 42, 0.1),
    inset 0 1px 0 #fff !important;
}

.btn-b2b-ghost:hover,
.ex-btn-3d--ghost:hover {
  color: #b45309 !important;
  border-color: #f59e0b !important;
  box-shadow:
    0 5px 0 #64748b,
    0 10px 18px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 #fff !important;
}

/* Compact helpers */
.ex-btn-3d--sm,
.btn-b2b-gold.text-xs,
.btn-b2b-navy.text-xs {
  min-height: 2.15rem;
  padding: 0.45rem 0.85rem !important;
  font-size: 0.72rem !important;
  border-radius: 0.8rem !important;
}

.ex-btn-3d--block,
.val-btn-block {
  width: 100%;
}

.ex-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.45rem;
  flex-shrink: 0;
}

/* Price category chips (already 3D) — keep mechanics */
.ex-price-filters {
  background: #fff;
  padding: 0.85rem;
  border-radius: 1.35rem;
  border: 2px solid #e2e8f0;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}
.ex-price-filters-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  width: 100%;
}
@media (min-width: 640px) {
  .ex-price-filters-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .ex-price-filters-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}
.ex-price-chip {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
  min-height: 3.35rem;
  padding: 0.65rem 0.45rem;
  border-radius: 0.95rem;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.35);
  color: #e2e8f0;
  background: linear-gradient(145deg, #1e293b 0%, #0f172a 55%, #020617 100%);
  box-shadow: 0 4px 0 #020617, 0 8px 16px rgba(15, 23, 42, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transform: translateY(0);
  transition: transform 0.2s var(--ex-btn-ease), box-shadow 0.2s, color 0.15s;
  font-family: inherit;
  appearance: none;
}
@media (min-width: 640px) {
  .ex-price-chip {
    flex-direction: row;
    gap: 0.4rem;
    font-size: 0.72rem;
    min-height: 2.85rem;
    padding: 0.55rem 0.5rem;
  }
}
.ex-price-chip i { font-size: 0.85rem; color: #34d399; flex-shrink: 0; }
.ex-price-chip span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 100%;
}
.ex-price-chip:hover {
  transform: translateY(-2px) scale(1.02);
  color: #fff;
  box-shadow: 0 6px 0 #020617, 0 12px 22px rgba(15, 23, 42, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.ex-price-chip:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #020617, 0 4px 10px rgba(15, 23, 42, 0.25);
}
.ex-price-chip.is-active {
  color: #1c1917;
  font-weight: 900;
  background: linear-gradient(145deg, #fde68a 0%, #f59e0b 48%, #d97706 100%);
  border-color: rgba(255, 255, 255, 0.65);
  box-shadow: 0 4px 0 #b45309, 0 10px 22px rgba(217, 119, 6, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.ex-price-chip.is-active i { color: #78350f; }
.ex-price-chip.is-active:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 0 #b45309, 0 14px 26px rgba(217, 119, 6, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

@media (prefers-reduced-motion: reduce) {
  .ex-btn-3d,
  .btn-b2b-gold,
  .btn-b2b-navy,
  .btn-b2b-success,
  .btn-b2b-danger,
  .btn.btn-primary,
  .btn.btn-secondary,
  .ex-blog-mini-btn,
  .ex-cat-card-cta,
  .ex-apk-btn,
  .val-btn-3d,
  .ex-price-chip {
    transition: none !important;
  }
}