/* app/lang-chooser.css */

/* ألوان مساعدة (تلتقط من globals) */
:root{
  --accent1: var(--brand-copper);
  --accent2: var(--brand-olive); /* الزيتي #596960 */
}

.lang-root{
  padding-block: clamp(16px, 4dvh, 28px);
}

/* ===== HERO ===== */
.hero .hero-title{
  font-weight: 900;
  letter-spacing: -.01em;
  background: linear-gradient(90deg, hsl(var(--accent1)), hsl(var(--accent2)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.flag-strip{
  margin-top: 10px;
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
}
.flag-dot{
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 999px;
  background: hsl(var(--muted-bg));
  border: 1px solid hsl(var(--border));
  filter: saturate(1.05);
  transition: transform .18s ease, box-shadow .18s ease;
}
.flag-dot:hover{ transform: translateY(-1px); box-shadow: var(--shadow-sm); }

/* ===== GRID ===== */
.lang-grid{
  --min: 240px;
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--min),100%), 1fr));
}
.lang-card{
  display: grid; align-items: center; gap: 12px;
  grid-template-columns: auto 1fr auto;
  padding: 14px;
  border-top: 3px solid hsl(var(--accent1) / .85);
  transition: border-color .2s ease, box-shadow .2s ease, transform .18s ease, background-color .15s ease;
}
.lang-card:hover{
  border-color: hsl(var(--accent1));
}

/* Flag tile */
.flag-tile{
  width: 48px; height: 48px; border-radius: 14px;
  display: grid; place-items: center;
  background: hsl(var(--muted-bg));
  border: 1px solid hsl(var(--border));
  box-shadow: var(--shadow-xs);
  transition: transform .18s ease, border-color .18s ease, background-color .15s ease, box-shadow .18s ease;
}
.group:hover .flag-tile{
  transform: translateY(-1px);
  border-color: color-mix(in hsl, hsl(var(--border)), hsl(var(--accent2)) 35%);
  box-shadow: var(--shadow-sm);
}
.flag-emoji{ font-size: 1.45rem; line-height: 1; }

/* Texts */
.lang-meta{ min-width: 0; }
.lang-title{ display: flex; align-items: center; gap: 8px; }
.lang-native{ font-weight: 800; letter-spacing: .01em; }
.lang-sub{ font-size: .85rem; margin-top: 2px; }
.lang-sub .hint{ margin-inline-start: .35rem; color: hsl(var(--muted-fg)); }

/* Badge/Buttons accents (تربط بألوان النظام) */
.btn-accent1{
  background: hsl(var(--accent1));
  color: #fff;
  border: 1px solid transparent;
}
.btn-accent1:hover{ filter: brightness(.98); }
.badge-accent2{
  background: hsl(var(--accent2) / .14);
  color: hsl(var(--accent2));
  border: 1px solid hsl(var(--accent2) / .38);
}

/* Chevron */
.chev{
  color: hsl(var(--muted-fg));
  transition: transform .18s ease, color .15s ease;
}
.group:hover .chev{ color: hsl(var(--accent1)); transform: translateX(2px); }
[dir="rtl"] .chev svg{ transform: scaleX(-1); } /* يعكس الاتجاه تلقائيًا */

/* Mini note */
.mini-cta{
  margin-top: 10px;
  display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center;
  background: hsl(var(--surface));
  border: 1px dashed hsl(var(--border));
  border-radius: 12px;
  padding: 10px 12px;
}
.mini-dot{
  width: 8px; height: 8px; border-radius: 999px;
  background: hsl(var(--accent1));
}

/* ===== Responsive ===== */
@media (max-width: 640px){
  .lang-root{ padding-block: clamp(10px, 3.5dvh, 18px); }
  .lang-card{ grid-template-columns: auto 1fr auto; padding: 12px; }
  .flag-tile{ width: 44px; height: 44px; border-radius: 12px; }
  .lang-title .badge{ display: none; }           /* نخفف الضوضاء على الموبايل */
}

@media (max-width: 400px){
  .lang-sub .hint{ display: none; }              /* نحذف التلميح في أضيق الشاشات */
  .group:hover .chev{ transform: none; }         /* حركات أبسط */
}