/* ---------------------------------------------------------------------------
   Yalla interactive components — router and agenda.
   Loaded only on pages that use a Yalla shortcode.
   Logical properties throughout, so Arabic RTL mirrors automatically.
   --------------------------------------------------------------------------- */

.yalla-btn{
  display:inline-block; font-weight:600; font-size:1rem;
  padding:.75rem 1.35rem; border-radius:5px; text-decoration:none;
  border:2px solid var(--wp--preset--color--clay);
  background: var(--wp--preset--color--clay);
  color: var(--wp--preset--color--base);
}
.yalla-btn:hover{
  background: var(--wp--preset--color--clay-dark);
  border-color: var(--wp--preset--color--clay-dark);
  color: var(--wp--preset--color--base);
}

/* --- Router --------------------------------------------------------------- */

.yalla-router{
  background: var(--wp--preset--color--base);
  border:1px solid var(--yalla-line, #E2DAD4);
  border-radius:10px;
  padding: var(--wp--preset--spacing--40);
  max-width:800px;
}
.yalla-router__steps{
  list-style:none; display:flex; flex-wrap:wrap; gap:.5rem;
  margin:0 0 1.35rem; padding:0;
  font-size:.8rem; color: var(--wp--preset--color--text-soft);
}
.yalla-router__steps li{
  padding:.2rem .6rem; border-radius:20px;
  background: var(--wp--preset--color--surface);
}
.yalla-router__steps li[data-on]{
  background: var(--wp--preset--color--plum);
  color: var(--wp--preset--color--base);
  font-weight:600;
}
.yalla-router__q{ margin:0 0 1rem; }
.yalla-router__opts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.7rem;
}
.yalla-opt{
  text-align:start; cursor:pointer;
  background: var(--wp--preset--color--canvas);
  border:2px solid var(--yalla-line-strong, #CFC4BC);
  border-radius:6px; padding:.9rem 1rem;
  font-family:inherit; font-size:1rem; font-weight:500;
  color: var(--wp--preset--color--contrast);
  transition:border-color .15s, background .15s;
}
.yalla-opt:hover{
  border-color: var(--wp--preset--color--clay);
  background: var(--wp--preset--color--base);
}
.yalla-router__back{
  background:none; border:0; padding:0; margin-block-start:1.2rem;
  font-family:inherit; font-size:.92rem; cursor:pointer;
  color: var(--wp--preset--color--text-soft); text-decoration:underline;
}
.yalla-router__result{
  border-inline-start:4px solid var(--wp--preset--color--clay);
  background: var(--wp--preset--color--canvas);
  padding:1.3rem 1.5rem; border-radius:0 6px 6px 0;
}
.yalla-router__result h3{ color: var(--wp--preset--color--clay); margin:0 0 .5rem; }
.yalla-router__result p{ margin:0 0 1rem; }
.yalla-router__fallback{ margin:0; padding-inline-start:1.1rem; }

/* --- Agenda --------------------------------------------------------------- */

.yalla-agenda__filters{ display:flex; flex-wrap:wrap; gap:.5rem; margin-block-end:1.5rem; }
.yalla-chip{
  cursor:pointer; font-family:inherit; font-size:.92rem; font-weight:500;
  background: var(--wp--preset--color--base);
  border:2px solid var(--yalla-line-strong, #CFC4BC);
  border-radius:20px; padding:.4rem 1rem;
  color: var(--wp--preset--color--contrast);
}
.yalla-chip[aria-pressed="true"]{
  background: var(--wp--preset--color--plum);
  border-color: var(--wp--preset--color--plum);
  color: var(--wp--preset--color--base);
}
.yalla-agenda__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem;
}
.yalla-act{
  background: var(--wp--preset--color--base);
  border:1px solid var(--yalla-line, #E2DAD4);
  border-radius:8px; padding:1.3rem;
}
.yalla-act__when{
  font-size:.8rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color: var(--wp--preset--color--clay); margin:0 0 .45rem;
}
.yalla-act__title{ font-size:1.05rem; margin:0 0 .35rem; }
.yalla-act__title a{ text-decoration:none; }
.yalla-act__title a:hover{ text-decoration:underline; }
.yalla-act__text{ font-size:.94rem; color: var(--wp--preset--color--text-soft); margin:0 0 .7rem; }
.yalla-act__meta{ font-size:.85rem; color: var(--wp--preset--color--plum-mid); margin:0; }
.yalla-act__cta{ margin:.7rem 0 0; font-size:.94rem; font-weight:600; }
.yalla-agenda__empty{ color: var(--wp--preset--color--text-soft); font-style:italic; }

@media (max-width:640px){
  .yalla-router{ padding: var(--wp--preset--spacing--30); }
  .yalla-router__opts{ grid-template-columns:1fr; }
}