/**
 * Panel loading skeleton + shimmer (shared across my-account / WooCommerce panel).
 * Dimension tokens below keep skeleton ↔ real content heights in sync (CLS).
 */

:root {
  /* Bank card — also used by .bank-card-item-ws (wallet.css) */
  --ayarfar-bank-card-slot-min-h: 68px;
  --ayarfar-bank-card-icon-size: 40px;
  /* Order book row — also used by .trades-ob-row (trades.css) */
  --ayarfar-ob-row-min-h: 34px;
  /* Dashboard open-orders tile */
  --ayarfar-open-orders-item-min-h: 52px;
  /* Wallet overview mobile card-row */
  --ayarfar-wallet-overview-row-min-h: 134px;
  /* Credit apply / media asset rows */
  --ayarfar-credit-asset-row-min-h: 36px;
  --ayarfar-credit-media-row-min-h: 42px;
  /* Notifications list item */
  --ayarfar-notif-item-min-h: 88px;
  /* Mobile tx / support ticket cards */
  --ayarfar-tx-card-min-h: 86px;
}

 .ayarfar-skeleton-card {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: #e6e6e6;
  padding: 10px;
  margin: 2px 8px;
}

/* Order-book placeholders: same 3-col grid as .trades-ob-row */
.trades-ob-body > .trades-ob-row--skeleton,
.trades-ob-history-body > .trades-ob-row--skeleton {
  min-height: var(--ayarfar-ob-row-min-h);
  box-sizing: border-box;
  padding: 7px var(--spacing-md, 12px);
  margin: 0;
  border-radius: 0;
  background: transparent;
  pointer-events: none;
  cursor: default;
  transform: none;
}

.trades-ob-body > .trades-ob-row--skeleton::before,
.trades-ob-history-body > .trades-ob-row--skeleton::before {
  display: none;
}

.trades-ob-body > .trades-ob-row--skeleton:hover,
.trades-ob-history-body > .trades-ob-row--skeleton:hover,
.trades-ob-body > .trades-ob-row--skeleton:active,
.trades-ob-history-body > .trades-ob-row--skeleton:active {
  background: transparent;
  transform: none;
}

.trades-ob-row--skeleton .ayarfar-skeleton-line {
  display: block;
  height: 12px;
  margin: 0 auto;
  margin-bottom: 0;
  width: 72%;
  max-width: 100%;
  border-radius: 6px;
}

.trades-ob-row--skeleton .trades-ob-cell:nth-child(1) .ayarfar-skeleton-line {
  width: 78%;
}
.trades-ob-row--skeleton .trades-ob-cell:nth-child(2) .ayarfar-skeleton-line {
  width: 52%;
}
.trades-ob-row--skeleton .trades-ob-cell:nth-child(3) .ayarfar-skeleton-line {
  width: 70%;
}

#tradesSellOrderRows > .trades-ob-row--skeleton:nth-child(1),
#tradesBuyOrderRows > .trades-ob-row--skeleton:nth-child(1),
.trades-ob-history-body > .trades-ob-row--skeleton:nth-child(1) {
  margin-top: 0 !important;
}
#tradesSellOrderRows > .trades-ob-row--skeleton:nth-child(8),
#tradesBuyOrderRows > .trades-ob-row--skeleton:nth-child(8),
.trades-ob-history-body > .trades-ob-row--skeleton:nth-child(8) {
  margin-bottom: 0 !important;
}

.ayarfar-skeleton-line {
  height: 13px;
  border-radius: 8px;
  background: #dcdcdc;
  margin-bottom: 10px;
  width: 85%;
}

.ayarfar-skeleton-line:last-child {
  margin-bottom: 0;
}

.ayarfar-skeleton-line--lg {
  width: 95%;
  height: 14px;
  margin-right: 2.5%;
}

.ayarfar-skeleton-line--sm {
  width: 60%;
}

.ayarfar-skeleton-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 150%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: ayarfarSkeletonShimmer 1.25s linear infinite;
}

@keyframes ayarfarSkeletonShimmer {
  0% {
    left: -150%;
  }
  100% {
    left: 100%;
  }
}

/* Inline value placeholders (price, balance, codes) — narrow, no full-card overlay */
.ayarfar-skeleton-inline {
  display: inline-block;
  vertical-align: middle;
  min-width: 3.25em;
  height: 1.15em;
  border-radius: 6px;
  background: #efefef;
  position: relative;
  overflow: hidden;
}

.ayarfar-skeleton-inline--wide {
  min-width: 4em;
}

.ayarfar-skeleton-inline--xl {
  min-width: 7.5em;
  height: 1.15em;
}

.ayarfar-skeleton-inline--code {
  min-width: 6.5em;
  height: 1.2em;
}

/* ارزش کل دارایی (داشبورد) — نوار بلندتر، شاین کندتر */
.ayarfar-skeleton-inline--total-asset {
  min-width: 10.5em;
  height: 1.4em;
  border-radius: 10px;
  background: #e4e4e4;
}

.ayarfar-skeleton-inline--total-asset::after {
  animation-duration: 1.55s;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.42) 50%,
    rgba(255, 255, 255, 0) 100%
  );
}

/* موجودی کنار دراپ‌دارن فیزیکی — کپسول کوتاه‌تر، شاین تندتر */
.ayarfar-skeleton-inline--asset-dropdown {
  min-width: 4.25em;
  height: 1.05em;
  border-radius: 999px;
  background: #eaeaea;
}

.ayarfar-skeleton-inline--asset-dropdown::after {
  animation-duration: 0.95s;
}

/* ردیف اطلاعات حساب / مینی‌کلکولاتور داشبورد */
.ayarfar-skeleton-inline--account {
  min-width: 6.5em;
  height: 1.05em;
}

.ayarfar-skeleton-inline--account-phone {
  min-width: 8em;
  height: 1.05em;
}

/* موجودی آزاد داخل info-box ها (مینی‌کلکولاتور داشبورد، ابزار خرید/فروش، معاملات) */
.ayarfar-skeleton-inline--balance {
  min-width: 5.5em;
  height: 1.1em;
  border-radius: 6px;
  background: #eaeaea;
}

/* قیمت لحظه‌ای هنگام رفرش نمودار */
.ayarfar-skeleton-inline--live-price::after {
  animation-duration: 1.05s;
}

.ayarfar-skeleton-inline::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 120%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: ayarfarSkeletonShimmer 1.25s linear infinite;
}

/* Physical delivery: address block while REST pending */
.pd-address-skeleton-host {
  position: relative;
  overflow: hidden;
  padding: 10px 0 14px;
  min-height: 72px;
}

/* شاین روی بلوک آدرس (نه .address-info که محتوای واقعی پس از بارگذاری است) */
.pd-address-skeleton-host::after {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 150%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: ayarfarSkeletonShimmer 1.25s linear infinite;
}

.pd-address-skeleton-host .ayarfar-skeleton-line {
  position: relative;
  z-index: 0;
  margin-bottom: 15px;
}

.pd-address-skeleton-host .ayarfar-skeleton-line:last-child {
  margin-bottom: 0;
}

/* Table body placeholder rows */
.ayarfar-skeleton-table-row td {
  padding: 10px 12px;
  vertical-align: middle;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.ayarfar-skeleton-table-row .ayarfar-skeleton-line {
  margin-bottom: 0;
}

.ayarfar-skeleton-table-row td .ayarfar-skeleton-line + .ayarfar-skeleton-line {
  margin-top: 8px;
}

/* Bank card list placeholders (same box as .bank-card-item-ws) */
.ayarfar-skeleton-bank-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card, 6px);
  background: #ececec;
  min-height: var(--ayarfar-bank-card-slot-min-h);
  box-sizing: border-box;
}

.ayarfar-skeleton-bank-card:last-child {
  margin-bottom: 0;
}

.ayarfar-skeleton-bank-card__inner {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-md, 12px);
  padding: var(--spacing-md, 12px);
  min-height: var(--ayarfar-bank-card-slot-min-h);
  box-sizing: border-box;
}

.ayarfar-skeleton-bank-card__avatar {
  flex: 0 0 var(--ayarfar-bank-card-icon-size);
  width: var(--ayarfar-bank-card-icon-size);
  height: var(--ayarfar-bank-card-icon-size);
  border-radius: var(--radius-default, 8px);
  background: #dcdcdc;
}

.ayarfar-skeleton-bank-card__lines {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
}

.ayarfar-skeleton-bank-card__line {
  display: block;
  height: 14px;
  border-radius: 8px;
  background: #d4d4d4;
  width: 72%;
  max-width: 100%;
}

.ayarfar-skeleton-bank-card__line--short {
  width: 48%;
  height: 12px;
}

.ayarfar-skeleton-bank-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 150%;
  height: 100%;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: ayarfarSkeletonShimmer 1.25s linear infinite;
  pointer-events: none;
}

/* Full-region overlay (dashboard, calculator column, etc.) */
.ayarfar-skeleton-overlay-host {
  position: relative;
}

.ayarfar-skeleton-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.82);
  overflow: hidden;
  pointer-events: none;
}

.ayarfar-skeleton-overlay::after {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 80%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.75) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: ayarfarSkeletonShimmer 1.25s linear infinite;
}

/* هنگام رفرش نمودار: جایگزین موقت برای نقطهٔ زنده تا داده بیاید */
.woocommerce-MyAccount-content .status-indicator.ayarfar-live-price-loading {
  overflow: visible;
}

.woocommerce-MyAccount-content .status-indicator.ayarfar-live-price-loading .pulse-animation,
.woocommerce-MyAccount-content .status-indicator.ayarfar-live-price-loading .dot-animation {
  opacity: 0.12;
  animation-play-state: paused;
}

.woocommerce-MyAccount-content .status-indicator.ayarfar-live-price-loading::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 12px;
  border-radius: 6px;
  background: #dedede;
  z-index: 4;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.woocommerce-MyAccount-content .status-indicator.ayarfar-live-price-loading::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 36px;
  height: 12px;
  margin-left: -18px;
  margin-top: -6px;
  z-index: 5;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: ayarfarSkeletonShimmer 1.1s linear infinite;
  pointer-events: none;
}