/* =========================================
   Design tokens (light/dark)
========================================= */
:root{
  --ui-bg:#ffffff;
  --ui-elev:#ffffff;
  --ui-text:#0a0a0a;
  --ui-muted:#6b7280;        /* gray-500 */
  --ui-border:#e5e7eb;       /* gray-200 */
  --ui-soft:#f3f4f6;         /* gray-100 */
  --ui-soft-2:#f9fafb;       /* gray-50 */
  --ui-brand:#6d28d9;        /* violet-700 */
  --ui-brand-weak:#ede9fe;   /* violet-50 */
  --ui-ring:rgba(109,40,217,.35);

  --ui-radius:14px;

  --ui-shadow-sm:0 1px 2px rgba(0,0,0,.06);
  --ui-shadow:0 10px 25px rgba(0,0,0,.12);
  --ui-shadow-2:0 20px 45px rgba(0,0,0,.18);

  --ui-t:220ms cubic-bezier(.22,1,.36,1);

  /* Layout */
  --edge-gap:max(1px, env(safe-area-inset-right)); /* space from screen edge */
  --panel-w:288px;   /* panel width */
  --btn-w:48px;      /* gear size */
  --gap:8px;         /* space between panel and button (when attached) */
}

body[data-theme="dark"]{
  --ui-bg:#0b0b0c;
  --ui-elev:#202020;
  --ui-text:#f3f4f6;
  --ui-muted:#9ca3af;
  --ui-border:#26292e;
  --ui-soft:#17181b;
  --ui-soft-2:#0f1012;
  --ui-brand:#8b5cf6;
  --ui-brand-weak:#1f1a37;
  --ui-ring:rgba(139,92,246,.35);

  --ui-shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --ui-shadow:0 10px 25px rgba(0,0,0,.45);
  --ui-shadow-2:0 20px 45px rgba(0,0,0,.55);
}

/* =========================================
   Scoped reset (keeps styles self-contained)
========================================= */
.ui-controls, .ui-controls * { box-sizing:border-box; }

/* =========================================
   Gear Button — fixed at right edge
   (slides left when panel opens)
========================================= */
.ui-toggle{
  position:fixed;
  right:var(--edge-gap);
  top:50%;
  transform:translateY(-50%);                  /* base position (hug right edge) */
  z-index:2147483000;
  width:var(--btn-w); height:var(--btn-w);
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:12px 0 0 12px;
  border:1px solid var(--ui-border);
  background:var(--ui-elev);
  color:var(--ui-muted);
  box-shadow:var(--ui-shadow);
  transition:
    box-shadow var(--ui-t),
    border-color var(--ui-t),
    background var(--ui-t),
    color var(--ui-t),
    transform var(--ui-t);                     /* animate horizontal slide */
}
.ui-toggle:hover{
  box-shadow:var(--ui-shadow-2);
  transform:translateY(-50%) translateX(-1px); /* subtle nudge on hover */
}
.ui-toggle:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--ui-ring), var(--ui-shadow-2);
  border-color:transparent;
}

/* 🔑 When panel is open, shift the gear left by panel width + gap */
#settings-toggle[data-open="true"]{
  transform:translateY(-50%) translateX(calc(-1 * (var(--panel-w) + var(--gap))));
}

/* Icon swap on open */
.ui-icon{ width:22px; height:22px; }
.ui-icon-gear{ opacity:1; transition:opacity var(--ui-t); }
.ui-icon-close{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%); opacity:0; transition:opacity var(--ui-t);
}
#settings-toggle[data-open="true"] .ui-icon-gear{ opacity:0; }
#settings-toggle[data-open="true"] .ui-icon-close{ opacity:1; }

/* Slow spin for gear */
@keyframes ui-spin-slow{ to{ transform:rotate(360deg); } }
.ui-spin-slow{ animation:ui-spin-slow 4s linear infinite; }

/* =========================================
   Slide-out Panel — fully hidden when closed
   (opens flush from the right edge)
========================================= */
.ui-panel{
  position:fixed;
  top:50%;
  right:0;                                      /* anchor to viewport edge */
  transform:translateY(-50%) translateX(100%);  /* fully offscreen when closed */
  z-index:2147482999;                           /* just under the button */
  width:var(--panel-w);
  background:var(--ui-elev);
  border:1px solid var(--ui-border);
  border-right:none;
  border-radius:var(--ui-radius) 0 0 var(--ui-radius);
  box-shadow:var(--ui-shadow-2);
  transition:transform var(--ui-t), background var(--ui-t), border-color var(--ui-t);
}
.ui-panel.open{
  transform:translateY(-50%) translateX(0);     /* slide into view */
}
.ui-panel-body{ padding:18px 20px; }

/* =========================================
   Header
========================================= */
.ui-panel-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px;
}
.ui-title{
  font-size:13px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ui-brand); font-weight:700;
}
.ui-head-close{
  border:0; background:transparent; padding:6px; line-height:0; border-radius:8px;
  color:var(--ui-muted);
  transition:background var(--ui-t), color var(--ui-t);
}
.ui-head-close:hover{ background:var(--ui-soft); color:var(--ui-text); }
.ui-head-close:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--ui-ring); }

/* =========================================
   Tabs
========================================= */
.ui-tabs{
  display:grid; grid-template-columns:1fr 1fr; gap:6px;
  background:var(--ui-soft);
  padding:6px;
  border-radius:14px;
  margin-bottom:16px;
}
.tab-btn{
  appearance:none; border:0; background:transparent;
  padding:8px 10px; border-radius:10px;
  font-size:13px; font-weight:600; color:var(--ui-muted);
  cursor:pointer;
  transition:background var(--ui-t), color var(--ui-t), box-shadow var(--ui-t);
}
.tab-btn:hover{ color:var(--ui-text); }
.tab-btn[data-active="true"]{
  background:var(--ui-elev); color:var(--ui-text); box-shadow:var(--ui-shadow-sm);
}
.ui-tabpanel{ display:block; }
.ui-tabpanel-hidden{ display:none; }

/* =========================================
   Section & Theme Switch
========================================= */
.ui-section{ margin-bottom:18px; }
.ui-section-title{ font-size:13px; font-weight:700; color:var(--ui-text); margin:0 0 10px; }

.ui-switch{
  position:relative; display:inline-flex; align-items:center;
  width:176px; height:34px;
  background:var(--ui-soft); border-radius:999px; padding:4px;
  user-select:none; cursor:pointer;
  transition:background var(--ui-t), box-shadow var(--ui-t);
}
.ui-switch:hover{ box-shadow:var(--ui-shadow-sm); }
.ui-switch-input{ position:absolute; pointer-events:none; opacity:0; }
.ui-switch-label{
  position:relative; z-index:1; width:calc(50% - 2px);
  text-align:center; font-size:12px; font-weight:600; color:var(--ui-muted);
  transition:color var(--ui-t);
}
.ui-switch-left{ order:1; }
.ui-switch-right{ order:3; }
.ui-switch-slider{
  position:absolute; inset:4px auto 4px 4px;
  width:calc(50% - 4px); height:calc(100% - 8px);
  background:var(--ui-elev); border-radius:999px; box-shadow:var(--ui-shadow);
  transition:transform var(--ui-t), background var(--ui-t); will-change:transform;
}
.ui-switch-input:checked ~ .ui-switch-slider{ transform:translateX(100%); }
.ui-switch-input:checked ~ .ui-switch-right{ color:var(--ui-text); }
.ui-switch-input:not(:checked) ~ .ui-switch-left{ color:var(--ui-text); }
.ui-switch-input:focus-visible ~ .ui-switch-slider,
.ui-switch:focus-within{ box-shadow:0 0 0 3px var(--ui-ring), var(--ui-shadow-sm); }

/* =========================================
   Language list
========================================= */
.lang-item{
  display:flex; align-items:center; gap:10px;
  width:100%;
  background:var(--ui-soft);
  border:1px solid transparent;
  color:var(--ui-text);
  border-radius:12px;
  padding:10px 12px;
  font-size:14px; text-align:left; cursor:pointer;
  transition:background var(--ui-t), color var(--ui-t), border-color var(--ui-t), transform var(--ui-t), box-shadow var(--ui-t);
}
.lang-item:hover{
  background:var(--ui-brand-weak);
  border-color:rgba(109,40,217,.25);
  box-shadow:var(--ui-shadow-sm);
}
.lang-item:active{ transform:translateY(1px); }
.lang-flag{ display:inline-flex; width:22px; height:22px; align-items:center; justify-content:center; font-size:16px; }
.lang-label{ line-height:1.2; }
.lang-item.is-active{ border-color:var(--ui-brand); background:var(--ui-brand-weak); }

/* =========================================
   Short viewport fallback (bottom-right dock)
========================================= */
@media (max-height:520px){
  .ui-toggle{
    top:auto; bottom:16px;
    transform:none;                                /* reset Y centering */
  }
  .ui-toggle:hover{ transform:translateX(-1px); }

  /* When panel open on short viewports, slide the gear left equally */
  #settings-toggle[data-open="true"]{
    transform:translateX(calc(-1 * (var(--panel-w) + var(--gap))));
  }

  .ui-panel{
    top:auto; bottom:16px;
    transform:translateX(100%);                    /* fully hidden to the right */
  }
  .ui-panel.open{ transform:translateX(0); }
}

/* =========================================
   Reduced motion
========================================= */
@media (prefers-reduced-motion:reduce){
  .ui-spin-slow{ animation:none!important; }
  .ui-panel,.ui-toggle,.tab-btn,.ui-switch,.lang-item,.ui-switch-slider{
    transition:none!important;
  }
}



.ui-switch-label {
  font-family: 'Tajawal', sans-serif;
  font-weight: 600; /* or 400 if you want lighter text */
  letter-spacing: 0.5px;
  transition: color 0.3s ease;
}

.lang-label {
  font-family: 'Tajawal', sans-serif;
  font-weight: 600; /* or 400 if you want lighter text */
  letter-spacing: 0.5px;
  transition: color 0.3s ease;
}