/* File: assets/css/styles.css */

/* 1. متغيرات الألوان (الهوية السعودية والثيم) */
:root {
    /* الهوية السعودية */
    --color-primary: #006C35; /* أخضر غامق */
    --color-primary-light: #008a44;
    --color-secondary: #D4AF37; /* ذهبي (للمسة فخامة) */

    /* الثيم الفاتح (الافتراضي) */
    --color-bg: #FFFFFF;
    --color-bg-alt: #F8F9FA;
    --color-text: #212529;
    --color-text-muted: #00070c;
    --color-border: #DEE2E6;

    /* ألوان مساعدة */
    --color-success: #198754;
    --color-danger: #DC3545;
    --color-info: #0D6EFD;

    /* الظل */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
}

[data-theme="dark"] {
    --color-bg: #1A1A1A;
    --color-bg-alt: #2C2C2C;
    --color-text: #E0E0E0;
    --color-text-muted: #070000;
    --color-border: #444444;
}

/* 2. إعدادات عامة */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    transition: background-color 0.2s, color 0.2s;
    line-height: 1.7;
    font-size: 16px;
    direction: rtl;
}

/* 3. الحاويات والتنسيق العام */
.container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 15px;
}

.page-container {
    padding-top: 40px;
    padding-bottom: 40px;
}

.text-center {
    text-align: center;
}

/* 4. الأزرار */
.btn {
    display: inline-block;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
}

.btn-primary {
    background-color: var(--color-primary);
    color: #FFFFFF;
}
.btn-primary:hover {
    background-color: var(--color-primary-light);
}

.btn-secondary {
    background-color: var(--color-bg-alt);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}
.btn-secondary:hover {
    background-color: var(--color-border);
}

.btn-success {
    background-color: var(--color-success);
    color: #FFFFFF;
}

.btn-lg {
    padding: 14px 30px;
    font-size: 1.1rem;
}

/* 5. نماذج الإدخال (Forms) */
.form-group {
    margin-bottom: 20px;
}
.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background-color: var(--color-bg);
    color: var(--color-text);
    font-size: 1rem;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 108, 53, 0.2);
}
.form-group .form-text {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-top: 5px;
}
.form-group .error-message {
    color: var(--color-danger);
    font-size: 0.875rem;
    display: none; /* يتم إظهاره عبر JS */
}
.form-group input.is-invalid,
.form-group textarea.is-invalid {
    border-color: var(--color-danger);
}
.form-group input.is-invalid + .error-message,
.form-group textarea.is-invalid + .error-message {
    display: block;
}

/* 6. التنبيهات (Alerts) */
.alert {
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid transparent;
}
.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}
.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}
.alert-info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}


/* 7. الهيدر والنافيجيشن (Header & Nav) */
header.site-header {
    background-color: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow-sm);
}
header.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo img {
    height: 40px;
}
.main-nav .nav-links {
    display: flex;
    list-style: none;
    gap: 25px;
}
.main-nav .nav-links a {
    text-decoration: none;
    color: var(--color-text);
    font-weight: 500;
    padding-bottom: 5px;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}
.main-nav .nav-links a:hover,
.main-nav .nav-links a.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}
.header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}
#theme-toggle-btn, #mobile-menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem; /* حجم الأيقونة */
    color: var(--color-text);
}
/* (ستتم إضافة الأيقونات عبر main.js) */

/* 8. نموذج الشكوى متعدد الخطوات (Form Wizard) */
.form-wizard-container {
    max-width: 800px;
    margin: 0 auto;
    background-color: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    padding: 30px;
    border-radius: 12px;
    box-shadow: var(--shadow-md);
}
.form-steps-indicator {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    border-bottom: 2px solid var(--color-border);
}
.step-indicator {
    padding: 10px 15px;
    color: var(--color-text-muted);
    border-bottom: 3px solid transparent;
    flex-grow: 1;
    text-align: center;
}
.step-indicator.active {
    color: var(--color-primary);
    font-weight: 600;
    border-bottom-color: var(--color-primary);
}
.form-step {
    display: none;
}
.form-step.active {
    display: block;
}
.form-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    border-top: 1px solid var(--color-border);
    padding-top: 20px;
}

/* 9. الصفحة الرئيسية (Layout & Sections) */
.scroll-container {
    /* السماح بالتمرير الطبيعي */
    height: auto;
    overflow: visible;
}
.scroll-section {
    scroll-snap-align: none;
    display: block;
    text-align: start;
    padding: 60px 0;
}
.scroll-section:nth-child(even) {
    background-color: var(--color-bg-alt);
}
.hero-section .container {text-align: center;}
.hero-section h1 {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1.3;
}
.hero-section p {
    font-size: 1.1rem;
    margin: 16px 0 24px;
    color: var(--color-text);
}
.hero-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* شبكات الأقسام */
.features-grid,
.testimonials-grid,
.stats-grid {
    display: grid;
    gap: 20px;
}
.features-grid { grid-template-columns: repeat(4, 1fr); }
.testimonials-grid { grid-template-columns: repeat(3, 1fr); }
.stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.feature-item,
.testimonial,
.stat-item {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 18px;
    box-shadow: var(--shadow-sm);
}
.feature-item h3 { margin-bottom: 8px; font-size: 1.1rem; }
.testimonial p { margin-bottom: 10px; }
.stat-item strong { display:block; font-size:1.4rem; color: var(--color-primary); }
.stat-item span { color: var(--color-text-muted); font-size: .95rem; }

/* قوائم الخطوات */
.steps { counter-reset: step; list-style: none; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(4, 1fr); }
.steps li { background: var(--color-bg); border:1px solid var(--color-border); border-radius:12px; padding:16px; box-shadow: var(--shadow-sm); }
.steps li h3 { margin-bottom:6px; font-size:1.05rem; }

/* أزرار إضافية */
.btn-outline { background: transparent; color: var(--color-primary); border:1px solid var(--color-primary); }
.btn-outline:hover { background: var(--color-primary); color: #fff; }
.btn-link { background: transparent; color: var(--color-primary); text-decoration: underline; padding: 0; }

/* تأثيرات الظهور */
.fade-in { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
.fade-in.is-visible { opacity: 1; transform: translateY(0); }

/* إمكانية الوصول */
.sr-only { position: absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* شعار نصي كعلامة (Logo Text) */
.logo-text { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--color-primary); font-weight: 800; font-size: 1.1rem; letter-spacing: .3px; }
.logo-text span { padding: 6px 12px; border: 2px solid var(--color-primary); border-radius: 999px; background: linear-gradient(180deg, rgba(0,108,53,0.08), rgba(0,108,53,0)); }
[data-theme="dark"] .logo-text span { background: rgba(0,108,53,0.12); }

/* استجابات (Responsive) */
@media (max-width: 992px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .hero-section h1 { font-size: 1.8rem; }
  .container { padding: 0 12px; }
}
@media (max-width: 576px) {
  .features-grid,
  .testimonials-grid,
  .stats-grid,
  .steps { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .btn-lg { width: 100%; }
  header.site-header .container { flex-wrap: wrap; gap: 10px; }
  .main-nav .nav-links { gap: 12px; }
}

/* أيقونات دائرية جذابة */
.icon-circle { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background: var(--color-bg-alt); border:1px solid var(--color-border); color: var(--color-primary); box-shadow: var(--shadow-sm); }
.icon-circle svg { width:22px; height:22px; }
.icon-green { color: var(--color-primary); }
.icon-gold { color: var(--color-secondary); }
.icon-blue { color: var(--color-info); }
.icon-success { color: var(--color-success); }

/* ترويسات البطاقات مع الأيقونة */
.card-title { display:flex; align-items:center; gap:10px; }
.testimonial .card-title { margin-bottom: 8px; }
.stat-item .icon-circle { margin-bottom: 8px; }

/* سلايدر شرائح على الجوال */
@media (max-width: 768px) {
  .slides { display: grid; grid-template-columns: 1fr; gap:14px; overflow: visible; padding-bottom: 0; }
  .slides::-webkit-scrollbar { display: none; }
  .slides::-webkit-scrollbar-thumb { background: transparent; }
  .slides > * { min-width: auto; flex: 0 0 auto; scroll-snap-align: none; }
  .slide { min-width: auto; flex: 0 0 auto; scroll-snap-align: none; }
  .slide.compact { min-width: auto; }
}

/* 10. صفحة الشكر (Thank You) */
.thank-you-box {
    background-color: var(--color-bg-alt);
    padding: 40px;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    max-width: 600px;
    margin: 20px auto;
}
.tracking-code-box {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-primary);
    background-color: var(--color-bg);
    border: 2px dashed var(--color-primary);
    padding: 20px;
    border-radius: 8px;
    margin: 20px 0;
    letter-spacing: 2px;
}
.thank-you-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}
/* أيقونة نجاح SVG */
.success-icon { width: 80px; height: 80px; margin: 0 auto 20px; }
.success-icon-circle { stroke-width: 2; stroke: var(--color-success); fill: none; }
.success-icon-check { stroke-width: 3; stroke: var(--color-success); stroke-linecap: round; fill: none; }

/* 11. صفحة عرض الحالة (View Status) */
.status-card {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 30px;
}
.status-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid var(--color-border);
}
.status-item:last-child { border-bottom: none; }
.status-item.full-width { flex-direction: column; align-items: flex-start; }
.status-item strong { color: var(--color-text); }
.status-item span { color: var(--color-text-muted); }
.status-badge {
    padding: 5px 12px;
    border-radius: 20px;
    font-weight: 600;
    color: #fff;
}
.status-submitted { background-color: #0D6EFD; }
.status-in_progress { background-color: #FFC107; color: #000; }
.status-resolved { background-color: var(--color-success); }
.status-closed { background-color: var(--color-text-muted); }

/* 12. الفوتر (Footer) */
footer.site-footer {
    background-color: var(--color-bg-alt);
    border-top: 1px solid var(--color-border);
    padding-top: 40px;
    margin-top: 40px;
    color: var(--color-text-muted);
}
.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}
.footer-col h4 {
    color: var(--color-text);
    margin-bottom: 15px;
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a { color: var(--color-text-muted); text-decoration: none; }
.footer-col ul li a:hover { color: var(--color-primary); }
.footer-bottom {
    text-align: center;
    padding: 20px 0;
    margin-top: 30px;
    border-top: 1px solid var(--color-border);
}

/* 13. الاستجابة للجوال (Responsive) */
@media (max-width: 768px) {
    .main-nav {
        /* (تحتاج لإضافة JS لإدارة القائمة المنسدلة) */
        display: none;
    }
    #mobile-menu-toggle {
        display: block; /* إظهار زر القائمة */
    }
    .header-actions .btn {
        display: none; /* إخفاء زر "تقديم شكوى" في الهيدر */
    }
    .hero-section h1 { font-size: 2.2rem; }
    .hero-actions { flex-direction: column; gap: 10px; }
}

/* 14. قائمة جانبية للجوال (Mobile Drawer) */
#mobile-menu-toggle { display: none; }
.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease;
    z-index: 1090; /* أعلى من الهيدر وتحت الدرج */
}
.mobile-drawer {
    position: fixed;
    top: 0; bottom: 0;
    right: 0; /* RTL: من اليمين */
    width: 80%;
    max-width: 320px;
    background: var(--color-bg);
    border-left: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    transform: translateX(100%);
    transition: transform .25s ease;
    z-index: 1100; /* أعلى من الـ overlay */
    display: flex;
    flex-direction: column;
}
.mobile-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-border);
}
.drawer-close-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    color: var(--color-text);
}
.mobile-drawer-nav { padding: 10px 8px 20px; overflow-y: auto; }
.mobile-drawer-nav ul { list-style: none; }
.mobile-drawer-nav li { border-bottom: 1px solid var(--color-border); }
.mobile-drawer-nav li a {
    display: block;
    padding: 14px 16px;
    text-decoration: none;
    color: var(--color-text);
    font-weight: 500;
}
.mobile-drawer-nav li a.active { color: var(--color-primary); }
.mobile-drawer-nav .drawer-cta { border: none; padding: 12px 16px; }

/* حالة الفتح */
body.drawer-open { overflow: hidden; }
body.drawer-open .mobile-drawer { transform: translateX(0); }
body.drawer-open .drawer-overlay { opacity: 1; visibility: visible; }

/* إظهار زر الهامبرجر فقط على الشاشات الصغيرة */
@media (max-width: 768px) {
  #mobile-menu-toggle { display: inline-flex; align-items:center; justify-content:center; }
}