/* ==========================================================================
   THEMES — تبديل شكل الـ Button مركزيًا من صفحة الأدمن
   --------------------------------------------------------------------------
   كل ثيم مجرد Set من متغيرات. تغيير الثيم = تغيير متغير واحد.
   مثال: <html data-btn-theme="aurora">
   ========================================================================== */

:root,
[data-btn-theme="gold"] {
  /* shape */
  --btn-radius:        10px;
  --btn-radius-hover:  10px;
  /* motion */
  --btn-lift:          -3px;
  --btn-shadow-hover:  0 10px 26px rgba(201, 168, 76, .50);
  --btn-sweep:         none;
  --btn-spin:          none;
  /* color */
  --btn-border:        var(--color-primary);
  --btn-bg:            transparent;
  --btn-fg:            #fff;
  --btn-hover-bg:      linear-gradient(135deg, #C9A84C, #8a6d1f);
  --btn-hover-fg:      #0a0a0a;
}

/* ===== 28: زوايا متبادلة ===== */
[data-btn-theme="zigzag"] {
  --btn-radius:        24px 8px 24px 8px;
  --btn-radius-hover:  8px 24px 8px 24px;
  --btn-lift:          -3px;
  --btn-shadow-hover:  0 10px 26px rgba(201, 168, 76, .50);
  --btn-sweep:         none;
  --btn-spin:          none;
  --btn-border:        var(--color-primary);
  --btn-bg:            transparent;
  --btn-fg:            #fff;
  --btn-hover-bg:      linear-gradient(135deg, #C9A84C, #8a6d1f);
  --btn-hover-fg:      #0a0a0a;
}

/* ===== 29: تموّج ضوئي (Sweep) ===== */
[data-btn-theme="sweep"] {
  --btn-radius:        12px;
  --btn-radius-hover:  12px;
  --btn-lift:          0px;
  --btn-shadow-hover:  0 0 22px rgba(201, 168, 76, .35);
  --btn-sweep:         linear-gradient(115deg, transparent 30%, rgba(201,168,76,.45) 50%, transparent 70%);
  --btn-spin:          none;
  --btn-border:        rgba(201, 168, 76, .5);
  --btn-bg:            #111;
  --btn-fg:            var(--color-primary);
  --btn-hover-bg:      #111;
  --btn-hover-fg:      #fff;
}

/* ===== 28 + 29 مدموجين (Zigzag + Sweep) ===== */
[data-btn-theme="zigzag-sweep"] {
  --btn-radius:        24px 8px 24px 8px;
  --btn-radius-hover:  8px 24px 8px 24px;
  --btn-lift:          0px;
  --btn-shadow-hover:  0 0 26px rgba(201, 168, 76, .40);
  --btn-sweep:         linear-gradient(115deg, transparent 30%, rgba(201,168,76,.45) 50%, transparent 70%);
  --btn-spin:          none;
  --btn-border:        rgba(201, 168, 76, .5);
  --btn-bg:            #111;
  --btn-fg:            var(--color-primary);
  --btn-hover-bg:      #111;
  --btn-hover-fg:      #fff;
}

/* ===== 28 + 29 + 04 (-spinning edge) = الأكثر تأثيراً ===== */
[data-btn-theme="neon-zigzag"] {
  --btn-radius:        24px 8px 24px 8px;
  --btn-radius-hover:  8px 24px 8px 24px;
  --btn-lift:          -2px;
  --btn-shadow-hover:  0 8px 28px rgba(201, 168, 76, .55);
  --btn-sweep:         linear-gradient(115deg, transparent 35%, rgba(232,200,106,.35) 50%, transparent 65%);
  --btn-spin:          conic-gradient(from 0deg, #C9A84C, #E8C86A, #C9A84C, #7a5f14, #C9A84C);
  --btn-border:        transparent;
  --btn-bg:            #141414;
  --btn-fg:            #fff;
  --btn-hover-bg:      linear-gradient(135deg, #C9A84C, #8a6d1f);
  --btn-hover-fg:      #0a0a0a;
}

/* ===== 30: بريميوم فخم ===== */
[data-btn-theme="premium"] {
  --btn-radius:        12px;
  --btn-radius-hover:  12px;
  --btn-lift:          -3px;
  --btn-shadow-hover:  0 14px 40px rgba(201, 168, 76, .60);
  --btn-sweep:         none;
  --btn-spin:          none;
  --btn-border:        var(--color-primary);
  --btn-bg:            linear-gradient(135deg, #1c1c1c, #0d0d0d);
  --btn-fg:            #f0d98a;
  --btn-hover-bg:      linear-gradient(135deg, #C9A84C, #8a6d1f);
  --btn-hover-fg:      #0a0a0a;
}

/* ===== Minimal ===== */
[data-btn-theme="minimal"] {
  --btn-radius:        10px;
  --btn-radius-hover:  10px;
  --btn-lift:          0px;
  --btn-shadow-hover:  none;
  --btn-sweep:         none;
  --btn-spin:          none;
  --btn-border:        rgba(255, 255, 255, .10);
  --btn-bg:            rgba(255, 255, 255, .03);
  --btn-fg:            #bbb;
  --btn-hover-bg:      rgba(201, 168, 76, .12);
  --btn-hover-fg:      var(--color-primary);
}

/* ===== 04: حواف متحركة (spin) ===== */
[data-btn-theme="spinning-edge"] {
  --btn-radius:        14px;
  --btn-radius-hover:  14px;
  --btn-lift:          0px;
  --btn-shadow-hover:  0 0 24px rgba(201, 168, 76, .40);
  --btn-sweep:         none;
  --btn-spin:          conic-gradient(from 0deg, #C9A84C, #E8C86A, #C9A84C, #7a5f14, #C9A84C);
  --btn-border:        transparent;
  --btn-bg:            #141414;
  --btn-fg:            #fff;
  --btn-hover-bg:      #141414;
  --btn-hover-fg:      var(--color-primary);
}

/* ===== Capsule ===== */
[data-btn-theme="capsule"] {
  --btn-radius:        999px;
  --btn-radius-hover:  999px;
  --btn-lift:          -2px;
  --btn-shadow-hover:  0 6px 20px rgba(201, 168, 76, .40);
  --btn-sweep:         none;
  --btn-spin:          none;
  --btn-border:        var(--color-primary);
  --btn-bg:            transparent;
  --btn-fg:            var(--color-primary);
  --btn-hover-bg:      var(--color-primary);
  --btn-hover-fg:      #0a0a0a;
}

/* ===== Solid gold ===== */
[data-btn-theme="solid"] {
  --btn-radius:        10px;
  --btn-radius-hover:  10px;
  --btn-lift:          -3px;
  --btn-shadow-hover:  0 10px 30px rgba(201, 168, 76, .65);
  --btn-sweep:         none;
  --btn-spin:          none;
  --btn-border:        transparent;
  --btn-bg:            linear-gradient(135deg, #E8C86A, #C9A84C 45%, #96731D);
  --btn-fg:            #1a1405;
  --btn-hover-bg:      linear-gradient(135deg, #F0D98A, #C9A84C);
  --btn-hover-fg:      #1a1405;
}


/* ==========================================================================
   APPLY THEME TOKENS TO .btn
   ========================================================================== */
.btn {
  border-radius: var(--btn-radius);
  border-color: var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-fg);
}

.btn:hover:not(:disabled):not(.btn-loading),
.btn:focus-visible:not(:disabled):not(.btn-loading) {
  background: var(--btn-hover-bg);
  color: var(--btn-hover-fg);
  border-radius: var(--btn-radius-hover);
  transform: translateY(var(--btn-lift));
  box-shadow: var(--btn-shadow-hover);
}

/* sweep light */
.btn:is(:hover, :focus-visible)::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--btn-sweep);
}
.btn:is(:hover, :focus-visible)::after {
  transform: translateX(-120%);
  animation: btn-sweep-anim 0.55s ease;
}

/* spinning border */
.btn:is(:hover, :focus-visible)::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  background: var(--btn-spin);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  padding: 2px;
  animation: btn-spin-anim 3s linear infinite;
}

@keyframes btn-sweep-anim {
  to { transform: translateX(120%); }
}
@keyframes btn-spin-anim {
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   RADIUS / SIZE / VARIANT OVERRIDES PER THEME
   ========================================================================== */
[data-btn-theme="zigzag"] .btn-sm,
[data-btn-theme="zigzag-sweep"] .btn-sm,
[data-btn-theme="neon-zigzag"] .btn-sm { border-radius: calc(var(--btn-radius) * 0.7) calc(var(--btn-radius) * 0.24) calc(var(--btn-radius) * 0.7) calc(var(--btn-radius) * 0.24); }

[data-btn-theme="zigzag"] .btn-lg,
[data-btn-theme="zigzag-sweep"] .btn-lg,
[data-btn-theme="neon-zigzag"] .btn-lg { border-radius: calc(var(--btn-radius) * 1.4) calc(var(--btn-radius) * 0.5) calc(var(--btn-radius) * 1.4) calc(var(--btn-radius) * 0.5); }

/* Ghost / Secondary follow theme border subtly */
.btn-ghost { border-color: transparent; background: transparent; }
.btn-secondary { border-color: var(--color-border-light); background: var(--color-surface-3); color: var(--color-text-secondary); }
.btn-secondary:hover:not(:disabled) { background: var(--btn-hover-bg); color: var(--btn-hover-fg); }

/* Icon button keeps circle for capsule theme */
[data-btn-theme="capsule"] .btn-icon { border-radius: var(--radius-full); }

/* In sweep themes, keep dark background on hover */
[data-btn-theme="sweep"] .btn:is(:hover, :focus-visible),
[data-btn-theme="zigzag-sweep"] .btn:is(:hover, :focus-visible) {
  background: var(--color-surface-2);
}