:root { --primary:#3182ce; --text:#2d3748; }

body { margin:0; font-family: 'Playpen Sans Arabic', cursive ; background:#f9fafb;color:var(--text); }
a    { color:var(--primary);text-decoration:none; }

.topbar { background:var(--primary);color:#fff;padding:12px;text-align:center; }
.topbar a{ color:#fff;text-decoration:none; }

main { padding:16px;max-width:960px;margin:auto; }

.grid{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
}
/* --- بطاقات شبكة الإعلانات --- */
.card          { background:#fff;border:1px solid #e2e8f0;border-radius:6px;overflow:hidden;text-align:center; }
.card img{
  width:100%;
  height:150px;          /* غيّر الارتفاع كما يلائمك */
  object-fit:contain;    /* لا قصّ للصورة */
  background:#f9f9f9;    /* لون فراغ بسيط حول الصورة */
  display:block;
}


/* تأثير زوم اختياري عند مرور الماوس */
.card:hover img{ transform:scale(1.08); }



h1,h2,h3{
  font-family: 'Playpen Sans Arabic', cursive;
}


.btn,button { font-family: 'Playpen Sans Arabic', cursive ;padding:8px 12px;border:none;border-radius:4px;background:var(--primary);color:#fff;cursor:pointer;text-decoration:none;display:inline-block; }

/* زر كبير */
.btn-lg{
  padding: 14px 26px;
  font-size: 1.15rem;
  border-radius: 8px;
}

/* في styles.css */
.rating span { cursor:pointer;font-size:36px;color:#bbb;transition:.2s }
.rating span.selected,
.rating span.hover  { color:#ffcc00; }   /* ذهبي */


input,select,textarea { width:100%;padding:8px;border:1px solid #cbd5e0;border-radius:4px;margin-bottom:10px;font-family:inherit; }

form     { background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:16px;box-shadow:0 2px 4px #0001; }
label    { font-weight:600;margin-top:6px;display:block; }
.btn      { background:var(--primary);transition:.2s; }
.btn:hover{ opacity:.9; }
.alert-success{background:#c6f6d5;padding:12px;border-radius:6px;margin-bottom:12px;text-align:center;}
.alert-danger {background:#fed7d7;padding:12px;border-radius:6px;margin-bottom:12px;text-align:center;}
/* إخفاء حقول "أخرى" مبدئيًا وستظهر بالـ JS */
.hidden { display:none; }

.social-icons   { display:flex;justify-content:center;gap:12px;margin:12px 0; }
.social-icons a img{ width:38px;height:38px;display:block;transition:.2s transform }
.social-icons a:hover img{ transform:scale(1.1); }