/* ============================================================
   ParsUptime — Locations Grid Widget  (v1.1.0)
   استایل اسکوپ‌شده. رنگ‌ها از متغیرهای قالب گرفته می‌شوند
   و در صورت نبود قالب، fallback دارند.
   ============================================================ */

.plw-locations{
  --plw-accent: var(--primary-color, #0D6EFD);
  --plw-accent-rgb: var(--primary-color-rgb, 13,110,253);
  --plw-line: var(--border-color, #E2EDFE);
  --plw-card-bg: var(--bg-body, #fff);
  --plw-soft-bg: var(--bg-card, #F9F9FF);
  --plw-ink: var(--secondary-color, #394465);
  --plw-muted: var(--text-muted, #737C99);
  --plw-radius: 14px;
  direction: rtl;
}

/* ───────── Eyebrow (پیل تعداد لوکیشن) ───────── */
.plw-locations .plw-eyebrow-wrap{text-align:center;margin-bottom:18px}
.plw-locations .plw-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;color:var(--plw-accent);
  background:var(--plw-card-bg);border:1px solid var(--plw-line);
  padding:7px 16px;border-radius:100px;
  box-shadow:0 1px 2px rgba(13,40,80,.05);
}
.plw-locations .plw-eyebrow-dot{
  width:8px;height:8px;border-radius:50%;flex:0 0 auto;
  background:var(--success-color,#22c55e);
  animation:plw-pulse 2s ease-in-out infinite;
}
@keyframes plw-pulse{
  0%   {box-shadow:0 0 0 0   rgba(var(--success-color-rgb,34,197,94),.55); opacity:1}
  70%  {box-shadow:0 0 0 7px rgba(var(--success-color-rgb,34,197,94),0);   opacity:.85}
  100% {box-shadow:0 0 0 0   rgba(var(--success-color-rgb,34,197,94),0);   opacity:1}
}

/* ───────── Toolbar (فیلتر + جستجو) ───────── */
.plw-locations .plw-toolbar{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  justify-content:space-between;margin-bottom:18px;
}
.plw-locations .plw-filters{display:flex;flex-wrap:wrap;gap:8px}
.plw-locations .plw-chip{
  font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
  padding:8px 16px;border-radius:100px;line-height:1.6;
  border:1px solid var(--plw-line);
  background:var(--plw-card-bg);color:var(--plw-muted);
  transition:.18s;
}
.plw-locations .plw-chip:hover{color:var(--plw-accent);border-color:rgba(var(--plw-accent-rgb),.35)}
.plw-locations .plw-chip.is-active{
  background:var(--plw-accent);color:#fff;border-color:var(--plw-accent);
  box-shadow:0 8px 18px -8px rgba(var(--plw-accent-rgb),.6);
}
.plw-locations .plw-search{position:relative}
.plw-locations .plw-search svg{
  position:absolute;inset-inline-start:14px;top:50%;transform:translateY(-50%);
  color:var(--plw-muted);pointer-events:none;
}
.plw-locations .plw-search-input{
  font-family:inherit;font-size:14px;width:240px;max-width:48vw;
  padding-block:10px;
  padding-inline-start:42px;  /* سمت آیکون */
  padding-inline-end:16px;
  border-radius:100px;
  border:1px solid var(--plw-line);background:var(--plw-card-bg);
  color:var(--plw-ink);outline:none;transition:.18s;text-align:start;
}
.plw-locations .plw-search-input:focus{
  border-color:var(--plw-accent);
  box-shadow:0 0 0 4px rgba(var(--plw-accent-rgb),.12);
}

/* ───────── Grid ───────── */
.plw-locations .plw-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:13px;list-style:none;margin:0;padding:0;
}

/* ───────── Card (افقی) ───────── */
.plw-locations .plw-card{
  background:var(--plw-card-bg);
  border:1px solid var(--plw-line);
  border-radius:var(--plw-radius);
  overflow:hidden;
  transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,border-color .2s;
}
.plw-locations .plw-card:hover{
  transform:translateY(-3px);
  border-color:rgba(var(--plw-accent-rgb),.35);
  box-shadow:0 18px 40px -16px rgba(var(--plw-accent-rgb),.4);
}
.plw-locations .plw-link{
  display:flex;align-items:center;gap:13px;
  padding:12px 15px;text-decoration:none;color:inherit;
}
.plw-locations .plw-link:hover,
.plw-locations .plw-link:focus{text-decoration:none;color:inherit}

.plw-locations .plw-flag-wrap{flex:0 0 auto;display:inline-flex}
.plw-locations .plw-flag{
  width:46px;height:32px;border-radius:7px;object-fit:cover;display:block;
  box-shadow:0 4px 10px -4px rgba(13,40,80,.35), 0 0 0 1px rgba(15,27,45,.06);
  transition:transform .2s;
}
.plw-locations .plw-card:hover .plw-flag{transform:scale(1.07)}

.plw-locations .plw-body{flex:1 1 auto;min-width:0;text-align:right}
.plw-locations .plw-name{
  display:block;font-weight:700;font-size:15.5px;line-height:1.35;color:var(--plw-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s;
}
.plw-locations .plw-card:hover .plw-name{color:var(--plw-accent)}
.plw-locations .plw-sub{
  display:block;font-size:11px;color:var(--plw-muted);font-weight:500;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.plw-locations .plw-badge{
  flex:0 0 auto;font-size:10px;font-weight:700;line-height:1.6;
  padding:3px 8px;border-radius:100px;white-space:nowrap;
  color:var(--plw-accent);
  background:rgba(var(--plw-accent-rgb),.10);
  border:1px solid rgba(var(--plw-accent-rgb),.20);
}
.plw-locations .plw-badge--custom{
  color:var(--warning-color,#f08124);
  background:rgba(var(--warning-color-rgb,240,129,36),.10);
  border-color:rgba(var(--warning-color-rgb,240,129,36),.25);
}

.plw-locations .plw-arrow{
  flex:0 0 auto;display:inline-flex;color:var(--plw-muted);opacity:.45;transition:.2s;
}
.plw-locations .plw-card:hover .plw-arrow{color:var(--plw-accent);opacity:1;transform:translateX(-3px)}

/* حالت بدون نتیجه / خالی */
.plw-locations .plw-noresult,
.plw-empty{
  text-align:center;color:var(--text-muted,#737C99);
  padding:40px 20px;font-size:15px;
}

/* ───────── ریسپانسیو ───────── */
@media (max-width:1199.98px){
  .plw-locations .plw-grid{grid-template-columns:repeat(3, minmax(0, 1fr));}
}
@media (max-width:767.98px){
  .plw-locations .plw-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .plw-locations .plw-toolbar{flex-direction:column;align-items:stretch}
  .plw-locations .plw-search-input{width:100%;max-width:none}
  .plw-locations .plw-filters{justify-content:center}
}
@media (max-width:479.98px){
  .plw-locations .plw-grid{grid-template-columns:1fr;}
}

/* احترام به ترجیح کاهش حرکت کاربر */
@media (prefers-reduced-motion: reduce){
  .plw-locations .plw-card,
  .plw-locations .plw-flag,
  .plw-locations .plw-arrow{transition:none}
  .plw-locations .plw-card:hover{transform:none}
  .plw-locations .plw-eyebrow-dot{animation:none;box-shadow:0 0 0 4px rgba(var(--success-color-rgb,34,197,94),.18)}
}