/* ===== shared.css - ملف CSS مشترك لكل الصفحات ===== */

body {
  font-family: Tahoma, Arial, sans-serif;
  margin: 0;
  background: #f4f4f4;
  color: #333;
}

body.dark-mode { background: #000; color: #fff; }
body.dark-mode .container { background: #0c0c0c; color: #fff; }
body.dark-mode header { background: #000; }
body.dark-mode footer { background: #272829; color: #fff; }
body.dark-mode .nav-buttons .links-btn { background: #0d6efd; color: #fff; }
body.dark-mode .nav-buttons .links-btn.active { background: #000; color: #fff; }
body.dark-mode .nav-buttons .links-btn:hover { background: #0056b3; color: #fff; }
body.dark-mode .images-box img { border: 2px solid #444; }

header {
  background: #0d6efd;
  padding: 15px;
  position: relative;
}

.nav-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.site-title {
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  margin-left: 20px;
  cursor: pointer;
  text-decoration: none;
}

.links-btn {
  background: #fff;
  color: #0d6efd;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  font-weight: bold;
  transition: 0.2s;
  text-decoration: none;
  display: inline-block;
}

.links-btn:hover { background: #e6e6e6; }
.links-btn.active { background: #000; color: #fff; }

.home-btn {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  display: block;
}

.container-wrapper {
  max-width: 1000px;
  margin: 30px auto;
}

.container {
  padding: 25px;
  background: #fff;
  border-radius: 8px;
}

body.dark-mode .container { background: #0c0c0c; }

.images-box {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 30px;
  flex-wrap: wrap;
}

.images-box img { width: 512px; height: 512px; }

footer {
  background: #222;
  color: #fff;
  padding: 15px;
  margin-top: 30px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.social-icons { display: flex; align-items: center; gap: 12px; }
.social-icons img { width: 24px; height: 24px; object-fit: contain; cursor: pointer; }

.bots-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 15px;
  margin-top: 25px;
  justify-items: center;
}

.bot-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }

.bot-btn {
  min-width: 140px;
  max-width: 180px;
  text-align: center;
  padding: 15px 10px;
  border-radius: 10px;
  background: #fff;
  color: #0d6efd;
  border: 2px solid #0d6efd;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.2s;
}

.bot-btn:hover { background: #0d6efd; color: #fff; }
.bot-btn.active { background: #000; color: #fff; border-color: #000; }

.buy-slot button {
  background: #0d6efd;
  color: #fff;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 14px;
}

.cert-grid { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 20px; }
.cert-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }

.cert-btn {
  min-width: 180px;
  text-align: center;
  padding: 15px 10px;
  border-radius: 10px;
  background: #fff;
  color: #0d6efd;
  border: 2px solid #0d6efd;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.2s;
}

.cert-btn:hover { background: #0d6efd; color: #fff; }
.cert-btn.active { background: #000; color: #fff; border-color: #000; }

.cert-buy-slot button {
  background: #0d6efd;
  color: #fff;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 14px;
}

.cert-video { width: 500px; height: 300px; }

.upload-btn { background: #0d6efd; color: #fff; }
.upload-btn:hover { background: #0056b3; color: #fff; }

@media (max-width: 768px) {
  header { padding-bottom: 10px; }
  .site-title { position: static; transform: none; display: block; text-align: center; margin: 0 0 10px 0; order: -1; }
  .nav-buttons { flex-direction: column; align-items: stretch; }
  .nav-buttons .links-btn { width: 100%; text-align: center; }
  .home-btn { position: static; transform: none; display: block; width: 100%; margin: 0 0 10px 0; }
  .bots-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bot-btn, .cert-btn { width: 100%; }
  footer { flex-direction: column; text-align: center; }
  .cert-header { flex-wrap: wrap !important; justify-content: center !important; }
  .cert-header > div { flex: 1 1 100% !important; text-align: center !important; }
  .cert-header video { width: 100% !important; max-width: 100% !important; height: auto !important; }
}