/* ========= Unified Palettes UI (scoped) ========= */
.fa-unified{
  --pal-text: #111827;
  --pal-border: rgba(0,0,0,.08);
  color: var(--pal-text);
}

/* ========== Grid: 3 دسکتاپ / 2 تبلت / 1 موبایل ========== */
.fa-unified .fa-trends-list,
.fa-unified .fa-palettes,
.fa-unified .fa-colors-grid{
  display: grid;
  gap: 14px;
}

/* موبایل */
@media (max-width: 640px){
  .fa-unified .fa-trends-list,
  .fa-unified .fa-palettes,
  .fa-unified .fa-colors-grid{
    grid-template-columns: 1fr;
  }
}
/* تبلت */
@media (min-width: 641px) and (max-width: 1023px){
  .fa-unified .fa-trends-list,
  .fa-unified .fa-palettes,
  .fa-unified .fa-colors-grid{
    grid-template-columns: repeat(2, minmax(240px, 1fr));
  }
}
/* دسکتاپ */
@media (min-width: 1024px){
  .fa-unified .fa-trends-list,
  .fa-unified .fa-palettes,
  .fa-unified .fa-colors-grid{
    grid-template-columns: repeat(3, minmax(260px, 1fr));
  }
}

/* ========== Card ========== */
.fa-unified .pal-card,
.fa-unified .fa-color-card{
  background: #fff;
  border: 1px solid var(--pal-border);
  border-radius: 14px;
  overflow: hidden;
  transition: transform .15s ease;
}
.fa-unified .pal-card:hover,
.fa-unified .fa-color-card:hover{
  transform: translateY(-1px);
}

/* تیتر زیر ردیف رنگ‌ها—ساده و بدون نوار */
.fa-unified .pal-card__info{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin-top: .4rem;
  padding: .35rem .5rem 0;
  text-align: center;
  color: var(--pal-text) !important;
  font-weight: 600;
}

/* خاموشی اوورلی‌های قدیمی */
.fa-unified .pal-card__overlay{ display:none !important; }
.fa-unified .pal-card__image::after,
.fa-unified .pal-card__info::before,
.fa-unified .pal-card__info::after{
  content: none !important;
  background: transparent !important;
}

/* ========== Swatch row ========== */
/* ارتفاع یکدست؛ اسکرول افقی برای پالت‌های خیلی بلند (اسکرول‌بار مخفی) */
.fa-unified .pal-card__image{
  width:100%;
  height:96px;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width: none;            /* Firefox */
}
.fa-unified .pal-card__image::-webkit-scrollbar{ display:none; } /* WebKit */

.fa-unified .pal-card__colors{
  display:flex;
  height:100%;
  flex-wrap:nowrap;
}

/* خود سواچ‌ها */
.fa-unified .pal-swatch{
  flex:1 0 auto;
  min-width:56px;
  height:100%;
  position:relative;
  background:var(--c,#ccc);
  cursor:pointer;
  transition: transform .18s ease, flex-basis .22s ease, min-width .22s ease;
}

/* برای پالت‌های کم‌تعداد (≤5): موشن قوی‌تر و کش بیشتر */
.fa-unified .pal-card__colors:has(.pal-swatch:nth-child(-n+5)) .pal-swatch:hover{
  transform: translateZ(0) scale(1.12);
  min-width: 160px;
}

/* حالت نرمال برای بقیه: هاور ملایم */
.fa-unified .pal-swatch:hover{
  transform: translateZ(0) scale(1.02);
}

/* ========== Text on swatch (HEX + name) ========== */
/* پیش‌فرض: مخفی — فقط hover/active نمایش */
.fa-unified .pal-code,
.fa-unified .pal-name{
  position:absolute;
  inset-inline:0;
  left:50%;
  transform: translateX(-50%);
  width:max-content;
  max-width:88%;
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
  pointer-events:none;

  background: transparent !important; /* بدون باکس */
  padding: 0 !important;

  /* خوانایی خودکار: سفید + difference => روی زمینه تیره روشن می‌شود و برعکس */
  color:#fff !important;
  mix-blend-mode:difference;
  text-shadow: 0 0 2px rgba(0,0,0,.35);

  opacity:0;                          /* مخفی پیش‌فرض */
  transition: opacity .15s ease;
}
.fa-unified .pal-swatch:hover .pal-code,
.fa-unified .pal-swatch:hover .pal-name,
.fa-unified .pal-swatch.active .pal-code,
.fa-unified .pal-swatch.active .pal-name{
  opacity:1;
}

.fa-unified .pal-code{
  top:50%;
  transform: translate(-50%, -50%);
  font-size:.95rem;
  font-weight:600;
}
.fa-unified .pal-name{
  top: calc(50% + 1.35rem);
  font-size:.72rem;
  font-weight:500;
}

/* ========== Generator quick-info harmonize ========== */
.fa-unified .fa-quick-info{
  background: linear-gradient(to top, rgba(255,255,255,.80), rgba(255,255,255,0) 55%) !important;
  color: #111 !important;
  text-shadow: none !important;
}

/* ========== Generator cards harmonize ========== */
.fa-unified .fa-color-swatch{
  height: 180px;
  background: var(--swatch) !important;
}
.fa-unified .fa-color-caption{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--pal-text) !important;
  font-weight: 600;
  padding: .35rem .5rem .6rem;
}

/* ========== Spacing ========== */
.fa-unified .fa-trends-header h3{
  margin:.25rem 0 1rem;
  font-size:1.1rem;
  font-weight:800;
}