:root {
  --bg:#0f1724; --card:#0b1220; --txt:white; --accent:#01c38d; --glass:rgba(255,255,255,0.04);
}
body { background:var(--bg); font-family:"Tajawal",sans-serif; margin:0; padding:20px; color:var(--txt);}
.container{max-width:800px;margin:auto;}
.search-box {background:var(--glass);border:1px solid #1e293b;padding:12px;border-radius:10px;margin-bottom:20px;display:flex;gap:10px;}
input {flex:1;background:none;border:none;color:var(--txt);padding:10px;outline:none;}

.results {display:flex;flex-direction:column;gap:10px;}
.card {background:var(--card);padding:8px 12px;border-radius:10px;display:flex;gap:10px;align-items:center;border:1px solid #1f2a3a;cursor:pointer;transition:0.25s;}
.card:hover {border-color:var(--accent);}
.card img {width:60px;height:40px;object-fit:cover;border-radius:6px;flex-shrink:0;}
.card-info {display:flex;flex-direction:column;flex:1;min-width:0;}
.card-info h3 {margin:0;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.card-info p {margin:2px 0 0;font-size:13px;color:#8ef;}
.new-badge {background:#01c38d;color:#012;padding:2px 6px;border-radius:6px;font-size:11px;font-weight:bold;margin-left:6px;}

/* البطاقة المنبثقة */
.overlay{
  position: fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7);
  display:none; z-index:1000;
}
.overlay.show { display:block; }

.card-popup{
  position: fixed; top:50%; left:50%; transform: translate(-50%,-50%);
  background: var(--card); border-radius:16px; width:90%; max-width:400px; padding:15px;
  box-shadow:0 10px 30px rgba(0,0,0,0.4); z-index:1001;
}
.close-btn{position:absolute;top:10px;left:14px;background:none;border:none;color:#fff;font-size:24px;font-weight:bold;cursor:pointer;line-height:1;}
.close-btn:hover{color:var(--accent);}
.popup-img{width:100%;height:auto;max-height:180px;object-fit:cover;border-radius:12px;margin-bottom:12px;}
.popup-info h2{margin:0 0 6px 0;font-size:18px;}
.popup-info p{margin:2px 0;color:#8ef;font-size:13px;}
.popup-actions{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap;}
.popup-actions a{flex:1;justify-content:center;background:var(--accent);color:#012;padding:8px;border-radius:10px;text-decoration:none;display:flex;align-items:center;gap:5px;}

/* الجوال */
@media(max-width:600px){
  .card {flex-direction:row;align-items:center;padding:6px;}
  .card img{width:50px;height:35px;}
  .card-info h3{font-size:14px;}
  .card-info p{font-size:12px;}
  .card-popup{padding:12px;}
  .popup-img{max-height:150px;}
  .popup-info h2{font-size:16px;}
  .popup-info p{font-size:12px;}
  .popup-actions a{font-size:12px;padding:6px;}
}