/*
Theme Name: سيارة دوت كوم
Theme URI: https://example.com/sayara-dot-com
Author: Web Iraq Solutions
Author URI: https://example.com
Description: قالب ووردبريس خفيف لسوق السيارات باللغة العربية (RTL) مع نوع منشور مخصص للسيارات وسلايدر سيارات مميزة وفلاتر بسيطة.
Version: 1.0.0
Text Domain: sayara
Requires at least: 5.8
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/
:root{
  --primary:#c24155;
  --text:#1f2937;
  --bg:#ffffff;
  --muted:#f3f4f6;
  --shadow:0 4px 20px rgba(0,0,0,.1);
}



html[dir="rtl"] body{font-family:'Cairo',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);margin:0}
a{color:inherit;text-decoration:none}
.container{width:min(1100px,95%);margin:auto;padding:20px}
header.site-header{background:var(--primary);color:#fff;padding:20px 0;box-shadow:var(--shadow)}
.site-brand{font-weight:800;font-size:1.5rem;text-align:center}
.site-brand small{display:block;font-weight:500;opacity:.9}
/* filter */
.filter{background:#fff;padding:15px;border-radius:12px;box-shadow:var(--shadow);display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:30px}
.filter select,.filter input,.filter button{padding:10px;border-radius:8px;border:1px solid #ddd;font:inherit}
.filter button{background:var(--primary);color:#fff;border:none;cursor:pointer}
/* slider */
.slider{display:flex;overflow:hidden;position:relative;border-radius:16px;box-shadow:var(--shadow);margin-bottom:40px;background:#fff}
.slide-track{display:flex;animation:scroll 25s linear infinite;padding:10px}
.slide{min-width:300px;margin:10px;background:#fff;border-radius:12px;box-shadow:var(--shadow);text-align:center;overflow:hidden;border:1px solid #eee}
.slide img{width:100%;height:200px;object-fit:cover;border-radius:12px 12px 0 0;background:#ddd}
.slide h3{margin:10px 0;font-size:1.05rem}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
/* grid */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:15px}
.card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:var(--shadow);border:1px solid #eee}
.card img{width:100%;height:180px;object-fit:cover;background:#ddd}
.card h3{padding:10px;margin:0;font-size:1.1em}
.card .meta{padding:0 10px 12px;color:#555;font-size:.95rem;display:flex;gap:10px;flex-wrap:wrap}
footer.site-footer{background:#f9fafb;text-align:center;padding:20px;margin-top:50px;border-top:1px solid #ddd;color:#444;font-weight:500}
.notice{background:var(--muted);padding:12px;border-radius:10px;border:1px solid #e5e7eb;margin:10px 0}
/* archive header */
.archive-header{display:flex;align-items:center;justify-content:space-between;margin:10px 0 20px}
.archive-title{font-weight:800}
.badge{display:inline-block;background:#111;color:#fff;padding:.25rem .5rem;border-radius:.5rem;font-size:.8rem}
/* forms */
input[type="number"]{appearance:textfield}
/* basic content */
.entry{padding:20px;background:#fff;border-radius:12px;box-shadow:var(--shadow)}
/* nav */
.main-nav{display:flex;gap:12px;justify-content:center;margin-top:10px}
.main-nav a{background:#ffffff22;border:1px solid #ffffff55;border-radius:999px;padding:8px 14px;color:#fff}
/* responsive */
@media (max-width:480px){
  .slide{min-width:250px}
  .slide img{height:160px}
}



/* تعريف متغيرات الألوان الرئيسية */
:root {
  --primary-color: #d10000;       /* اللون الأساسي للموقع */
  --secondary-color: #f5f5f5;     /* لون ثانوي / خلفيات */
  --header-bg: #ffffff;            /* خلفية الهيدر */
  --header-text: #222222;          /* لون نص الهيدر */
  --nav-link-color: #333333;       /* لون روابط القوائم */
  --nav-link-hover: #d10000;       /* لون روابط القوائم عند المرور */
  --footer-bg: #111111;            /* خلفية الفوتر */
  --footer-text: #ffffff;           /* نص الفوتر */
  --button-bg: #d10000;            /* ألوان الأزرار */
  --button-text: #ffffff;
}

/* مثال على تطبيق المتغيرات */
body {
  background-color: var(--secondary-color);
  color: var(--header-text);
}

.site-header {
  background-color: var(--header-bg);
}

.main-nav .nav-list li a {
  color: var(--nav-link-color);
}

.main-nav .nav-list li a:hover {
  color: var(--nav-link-hover);
}

.btn {
  background-color: var(--button-bg);
  color: var(--button-text);
}

footer {
  background-color: var(--footer-bg);
  color: var(--footer-text);
}
body {
  background-color: var(--secondary-color, #f5f5f5);
  color: var(--header-text);
}

.site-header {
  background-color: var(--header-bg);
}

.main-nav .nav-list li a {
  color: var(--primary-color);
}

.main-nav .nav-list li a:hover {
  color: var(--primary-color);
}

.btn {
  background-color: var(--primary-color);
  color: #fff;
}