/* ===============================
   Muawiyah Court – Green/Gold
   Standalone stylesheet
   =============================== */
:root{
  --g:#0b4f40;
  --g2:#0f6b57;
  --gold:#b08d2a;
  --paper:#fbf7ef;
  --card:#fffdf8;
  --ink:#1e1e1e;
  --muted:#5a5a5a;
  --line: rgba(11,79,64,.18);
  --shadow: 0 16px 44px rgba(0,0,0,.08);
  --r: 18px;
}

.mu-court{
  direction: rtl;
  text-align: right;
  font-family: "Amiri","Noto Naskh Arabic","Cairo",serif;
  background: var(--paper);
  color: var(--ink);
  max-width: 1100px;
  margin: 0 auto;
  padding: 34px 18px 60px;
}

.mu-court .hero{
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(11,79,64,.05), rgba(176,141,42,.05));
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
}
.mu-court .hero:before{
  content:"";
  position:absolute;
  inset: -140px -140px auto auto;
  width: 360px; height: 360px;
  background: radial-gradient(circle at 30% 30%, rgba(176,141,42,.25), rgba(11,79,64,.10), transparent 60%);
  transform: rotate(18deg);
  pointer-events:none;
}
.mu-court .hero-inner{ padding: 34px 28px 28px; position: relative; }
.mu-court .kicker{
  display:inline-block;
  border: 1px solid rgba(176,141,42,.35);
  color: var(--g);
  background: rgba(255,255,255,.55);
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .2px;
  margin-bottom: 12px;
}
.mu-court h1{
  margin: 6px 0 10px;
  color: var(--g);
  font-size: 42px;
  line-height: 1.1;
  font-weight: 900;
}
.mu-court .intro{
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  line-height: 2.05;
  max-width: 920px;
}
.mu-court .rules{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.mu-court .rule{
  border: 1px solid var(--line);
  background: rgba(255,255,255,.65);
  border-radius: var(--r);
  padding: 14px 14px 12px;
}
.mu-court .rule-title{ color: var(--gold); font-weight: 900; margin-bottom: 6px; }
.mu-court .rule-text{ color: var(--muted); line-height: 1.9; }

.mu-court .controls{
  margin-top: 18px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.6);
  border-radius: 22px;
  padding: 14px 14px 10px;
  display: grid;
  grid-template-columns: 1.2fr .7fr .7fr 1.4fr .7fr auto;
  gap: 12px;
  align-items: end;
}
.mu-court .control label{ display:block; font-weight: 900; color: var(--g); margin: 0 2px 6px; }
.mu-court input[type="search"],
.mu-court select{
  width: 100%;
  border: 1px solid rgba(11,79,64,.24);
  border-radius: 14px;
  padding: 12px 12px;
  background: rgba(255,255,255,.85);
  outline: none;
  font-size: 15px;
}
.mu-court input[type="search"]:focus,
.mu-court select:focus{
  border-color: rgba(176,141,42,.6);
  box-shadow: 0 0 0 4px rgba(176,141,42,.14);
}
.mu-court .chips{ display:flex; flex-wrap: wrap; gap: 8px; padding: 6px 2px 0; }
.mu-court .chip{
  border: 1px solid rgba(176,141,42,.35);
  background: rgba(251,247,239,.9);
  color: var(--g);
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 900;
  cursor: pointer;
  user-select:none;
  font-size: 13px;
}
.mu-court .chip.active{ background: rgba(11,79,64,.10); border-color: rgba(11,79,64,.35); }
.mu-court .meta{ color: var(--muted); font-weight: 900; padding: 0 6px 8px 0; white-space: nowrap; }

.mu-court .grid{
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.mu-court .card{
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 22px;
  box-shadow: 0 10px 34px rgba(0,0,0,.06);
  padding: 16px 16px 14px;
  position: relative;
  overflow: hidden;
}
.mu-court .card:before{
  content:"";
  position:absolute;
  inset: auto -80px -120px auto;
  width: 220px; height: 220px;
  background: radial-gradient(circle at 30% 30%, rgba(11,79,64,.12), rgba(176,141,42,.10), transparent 65%);
  transform: rotate(-10deg);
}
.mu-court .card h3{ margin: 0 0 6px; color: var(--g); font-size: 22px; font-weight: 900; position: relative; }
.mu-court .small{ position: relative; color: var(--muted); line-height: 1.9; margin: 0 0 10px; }
.mu-court .row{ display:flex; flex-wrap: wrap; gap: 8px; position: relative; margin-top: 10px; }
.mu-court .pill{
  border: 1px solid rgba(11,79,64,.18);
  background: rgba(255,255,255,.85);
  color: var(--g);
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
}
.mu-court .pill.score{ border-color: rgba(176,141,42,.35); color: var(--gold); background: rgba(176,141,42,.08); }
.mu-court .btn{
  margin-top: 12px;
  width: 100%;
  border: 1px solid rgba(176,141,42,.45);
  background: rgba(11,79,64,.08);
  color: var(--g);
  padding: 11px 12px;
  border-radius: 16px;
  font-weight: 900;
  cursor: pointer;
  position: relative;
}
.mu-court .btn:hover{ background: rgba(11,79,64,.12); }

/* Drawer */
.mu-court .drawer{ position: fixed; inset: 0; display:none; z-index: 9999; }
.mu-court .drawer.show{ display:block; }
.mu-court .drawer-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.45); }
.mu-court .drawer-panel{
  position:absolute; top: 0; bottom: 0;
  right: 0;
  width: min(720px, 94vw);
  background: var(--paper);
  border-left: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 30px 90px rgba(0,0,0,.25);
  overflow: auto;
}
.mu-court .drawer-head{
  position: sticky;
  top: 0;
  background: rgba(251,247,239,.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
  padding: 16px 16px 12px;
  display:flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}
.mu-court .drawer-kicker{ color: var(--gold); font-weight: 900; margin-bottom: 6px; }
.mu-court .drawer-head h2{ margin: 0; color: var(--g); font-size: 28px; font-weight: 900; line-height: 1.2; }
.mu-court .drawer-sub{ color: var(--muted); margin-top: 6px; line-height: 1.8; }
.mu-court .x{
  border: 1px solid rgba(11,79,64,.2);
  background: rgba(255,255,255,.7);
  width: 42px; height: 42px;
  border-radius: 14px;
  font-size: 22px;
  cursor: pointer;
  color: var(--g);
  font-weight: 900;
}
.mu-court .drawer-body{ padding: 14px 16px 28px; }
.mu-court .pillrow{ display:flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }

.mu-court .block{
  border: 1px solid var(--line);
  background: rgba(255,255,255,.7);
  border-radius: 18px;
  padding: 14px;
  margin: 12px 0;
}
.mu-court .block h3{ margin: 0 0 10px; color: var(--g); font-weight: 900; }
.mu-court .cols{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mu-court ul{ margin: 0; padding: 0 18px 0 0; }
.mu-court li{ margin: 6px 0; line-height: 1.9; color: var(--ink); }

.mu-court .evidence{ display:grid; gap: 10px; }
.mu-court .ev{ border: 1px dashed rgba(176,141,42,.45); background: rgba(176,141,42,.07); border-radius: 16px; padding: 10px 12px; }
.mu-court .ev b{ color: var(--gold); }

.mu-court .verdict{ border-color: rgba(176,141,42,.35); background: linear-gradient(180deg, rgba(176,141,42,.08), rgba(11,79,64,.06)); }
.mu-court .verdict-row{ display:flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-weight: 900; }
.mu-court .verdict-status{ color: var(--g); }
.mu-court .verdict-score{ color: var(--gold); }

.mu-court .parts{ display:grid; gap: 10px; }
.mu-court .part{ border: 1px solid rgba(11,79,64,.18); background: rgba(255,255,255,.72); border-radius: 16px; padding: 10px 12px; }
.mu-court .part .t{ color: var(--gold); font-weight: 900; margin-bottom: 6px; }
.mu-court .sources .src{ border-top: 1px solid rgba(11,79,64,.12); padding-top: 10px; margin-top: 10px; color: var(--muted); line-height: 1.9; }

@media (max-width: 980px){
  .mu-court .rules{ grid-template-columns: 1fr; }
  .mu-court .controls{ grid-template-columns: 1fr; }
  .mu-court .grid{ grid-template-columns: 1fr; }
  .mu-court .cols{ grid-template-columns: 1fr; }
}

.mu-court .conditions{ margin-top: 10px; }
.mu-court .conditions .cond-title{ color: var(--gold); font-weight: 900; margin-bottom: 6px; }
.mu-court .mu-court-error{
  border: 1px solid rgba(176,141,42,.45);
  background: rgba(176,141,42,.08);
  border-radius: 18px;
  padding: 14px;
  color: var(--ink);
  line-height: 1.9;
}