/* ============================================================
   Zoalk — components/btn.css
   الأزرار — القاعدة الدلالية:
   زمرد = فعل رئيسي · ذهب = قيمة/ترقية · ghost = ثانوي
   ============================================================ */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-2);
  font-family:var(--font-body);
  font-weight:700;
  font-size:var(--fs-sm);
  line-height:1;
  padding:.75rem 1.4rem;
  border-radius:var(--r-md);
  border:1px solid transparent;
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
  transition:background var(--dur-fast) var(--ease-in-out),
             border-color var(--dur-fast) var(--ease-in-out),
             color var(--dur-fast) var(--ease-in-out),
             transform var(--dur-fast) var(--ease-in-out);
}
.btn:active{transform:scale(.97);}
.btn:disabled,.btn[aria-disabled="true"]{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
}
.btn svg{width:1.1em;height:1.1em;}

/* -------- الأنواع -------- */
.btn--primary{
  background:var(--primary);
  color:var(--on-primary);
}
.btn--primary:hover{background:var(--primary-strong);}

.btn--accent{
  background:var(--accent);
  color:var(--on-accent);
}
.btn--accent:hover{background:var(--accent-strong);}

.btn--outline{
  background:transparent;
  border-color:var(--border-strong);
  color:var(--text);
}
.btn--outline:hover{
  border-color:var(--primary);
  color:var(--primary);
  background:var(--primary-tint);
}

.btn--ghost{
  background:transparent;
  color:var(--text-muted);
}
.btn--ghost:hover{
  background:var(--primary-tint);
  color:var(--primary);
}

.btn--danger{
  background:transparent;
  border-color:var(--danger);
  color:var(--danger);
}
.btn--danger:hover{background:var(--danger-bg);}

/* -------- الأحجام -------- */
.btn--sm{padding:.5rem .9rem;font-size:var(--fs-xs);border-radius:var(--r-sm);}
.btn--lg{padding:.95rem 1.9rem;font-size:var(--fs-body);border-radius:var(--r-lg);}
.btn--block{display:flex;width:100%;}

/* زر أيقونة فقط (تبديل الوضع، إغلاق...) */
.btn--icon{
  padding:0;
  width:2.5rem;
  height:2.5rem;
  border-radius:var(--r-pill);
  border:1px solid var(--border);
  background:var(--bg-elevated);
  color:var(--text);
}
.btn--icon:hover{border-color:var(--primary);color:var(--primary);}

/* -------- حالة التحميل --------
   <button class="btn btn--primary is-loading" disabled>…</button> */
.btn.is-loading{
  pointer-events:none;
  position:relative;
  color:transparent;
}
.btn.is-loading::after{
  content:"";
  position:absolute;
  width:1.1em;height:1.1em;
  border:2px solid currentColor;
  border-inline-start-color:transparent;
  border-radius:50%;
  color:var(--on-primary);
  animation:btn-spin .7s linear infinite;
}
.btn--outline.is-loading::after,
.btn--ghost.is-loading::after{color:var(--primary);}
@keyframes btn-spin{to{transform:rotate(360deg);}}