/* 99 Names + Duas pages (loads after style.css) */

/* ---------- names grid ---------- */
.names-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:14px; margin-top:6px;
}
.name-card{
  padding:20px 16px; text-align:center; cursor:pointer;
  transition:border-color .15s, transform .15s;
}
.name-card:hover{ border-color:var(--gold); transform:translateY(-2px); }
.name-card .n{
  width:30px; height:30px; margin:0 auto 10px; border-radius:50%;
  background:var(--panel-2); border:1px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; color:var(--gold-hi); font-family:'Marcellus',serif;
}
.name-card .ar{
  font-family:'Amiri Quran', serif; font-size:26px; color:var(--gold-hi);
  margin-bottom:6px;
}
.name-card .translit{
  font-family:'Marcellus',serif; font-size:15px; letter-spacing:.4px;
}
.name-card .meaning-en{ color:var(--muted); font-size:13px; margin-top:4px; }
.name-card .meaning-ur{
  font-family:'Noto Nastaliq Urdu',serif; direction:rtl; font-size:15px;
  margin-top:6px; color:var(--ink);
}

/* modal for a tapped name */
.name-modal{
  position:fixed; inset:0; z-index:90; display:none;
  align-items:center; justify-content:center; padding:20px;
}
.name-modal.open{ display:flex; }
.name-modal .backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); }
.name-modal .box{
  position:relative; max-width:420px; width:100%; padding:32px 26px;
  text-align:center; background:var(--panel); border:1px solid var(--gold);
  border-radius:var(--radius); box-shadow:var(--shadow);
}
.name-modal .close{
  position:absolute; top:10px; right:12px; background:none; border:0;
  color:var(--muted); font-size:20px; cursor:pointer; line-height:1;
}
.name-modal .ar{ font-family:'Amiri Quran',serif; font-size:44px; color:var(--gold-hi); }
.name-modal .translit{ font-family:'Marcellus',serif; font-size:20px; margin-top:8px; }
.name-modal .meaning-en{ color:var(--muted); margin-top:10px; }
.name-modal .meaning-ur{
  font-family:'Noto Nastaliq Urdu',serif; direction:rtl; font-size:19px;
  margin-top:14px; padding-top:14px; border-top:1px solid var(--line);
}

/* ---------- duas list ---------- */
.dua-cats{
  display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px;
}
.dua-cats button{
  border:1px solid var(--line); background:var(--panel); color:var(--muted);
  border-radius:999px; padding:7px 16px; font:inherit; font-size:13px;
  cursor:pointer; transition:border-color .15s, color .15s;
}
.dua-cats button:hover{ border-color:var(--gold); }
.dua-cats button.active{ border-color:var(--gold); color:var(--gold-hi); background:var(--panel-2); }

.dua-card{ padding:22px 20px; margin-bottom:14px; }
.dua-card .title{
  font-family:'Marcellus',serif; font-size:16px; letter-spacing:.3px;
  color:var(--gold-hi); margin-bottom:12px;
  display:flex; justify-content:space-between; align-items:center; gap:10px;
}
.dua-card .copy-btn{
  background:none; border:1px solid var(--line); color:var(--muted);
  border-radius:8px; padding:5px 10px; font-size:12px; cursor:pointer; flex:none;
}
.dua-card .copy-btn:hover{ border-color:var(--gold); color:var(--gold-hi); }
.dua-card .ar{
  font-family:'Amiri Quran',serif; font-size:24px; line-height:2;
  direction:rtl; margin-bottom:14px;
}
.dua-card .ur{
  font-family:'Noto Nastaliq Urdu',serif; direction:rtl; font-size:17px;
  line-height:1.9; color:var(--ink); margin-bottom:8px;
}
.dua-card .en{ color:var(--muted); font-size:14.5px; line-height:1.7; font-style:italic; }
.dua-card .ref{ color:var(--muted); font-size:12px; margin-top:10px; }