/**
 * ═══════════════════════════════════════════════════════════════════════
 * تكامل التصميم المسطح مع الموقع
 * ═══════════════════════════════════════════════════════════════════════
 * هذا الملف يطبق التصميم المسطح على جميع صفحات الموقع
 */

/* ═══════════════════════════════════════════════════════════════════════
   تطبيق نظام الألوان على العناصر الموجودة
   ═══════════════════════════════════════════════════════════════════════ */

/* تطبيق الألوان على البطاقات الموجودة */
.card-modern,
.listing-card,
.category-card,
.user-card {
    background-color: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    transition: all var(--transition-normal) var(--ease) !important;
}

.card-modern:hover,
.listing-card:hover,
.category-card:hover {
    border-color: var(--border-hover) !important;
    box-shadow: var(--shadow-lg) !important;
    transform: translateY(-4px) !important;
}

/* تطبيق على الأزرار الموجودة */
.btn,
button[type="submit"],
button[type="button"],
.button,
a.button {
    background-color: var(--primary) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    padding: var(--space-sm) var(--space-lg) !important;
    font-weight: 600 !important;
    transition: all var(--transition-normal) var(--ease) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
}

.btn:hover,
button[type="submit"]:hover,
button[type="button"]:hover {
    background-color: var(--primary-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-md) !important;
}

.btn-secondary,
.button-secondary {
    background-color: var(--secondary) !important;
}

.btn-secondary:hover {
    background-color: var(--secondary-hover) !important;
}

.btn-outline,
.button-outline {
    background-color: transparent !important;
    color: var(--primary) !important;
    border: 2px solid var(--primary) !important;
}

.btn-outline:hover {
    background-color: var(--primary) !important;
    color: #ffffff !important;
}

/* أزرار صغيرة */
.btn-sm,
.button-sm {
    padding: var(--space-xs) var(--space-md) !important;
    border-radius: var(--radius-full) !important;
    font-size: 0.875rem !important;
}

/* أزرار كبيرة */
.btn-lg,
.button-lg {
    padding: var(--space-md) var(--space-xl) !important;
    border-radius: var(--radius-lg) !important;
    font-size: 1.125rem !important;
    min-width: 200px !important;
}

/* تطبيق على حقول الإدخال */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
textarea,
select {
    width: 100% !important;
    padding: var(--space-md) !important;
    border: 2px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    background-color: var(--surface) !important;
    color: var(--text-primary) !important;
    font-size: 1rem !important;
    font-family: inherit !important;
    transition: all var(--transition-fast) var(--ease) !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 4px var(--primary-lighter) !important;
    outline: none !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-muted) !important;
}

/* تطبيق على التنبيهات */
.alert,
.message,
.notification {
    padding: var(--space-lg) !important;
    border-radius: var(--radius-lg) !important;
    margin-bottom: var(--space-lg) !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: var(--space-md) !important;
}

.alert-success,
.message-success,
.success {
    background-color: var(--success-bg) !important;
    border: 2px solid var(--success) !important;
    color: var(--success) !important;
}

.alert-warning,
.message-warning,
.warning {
    background-color: var(--warning-bg) !important;
    border: 2px solid var(--warning) !important;
    color: var(--warning) !important;
}

.alert-error,
.message-error,
.error {
    background-color: var(--error-bg) !important;
    border: 2px solid var(--error) !important;
    color: var(--error) !important;
}

.alert-info,
.message-info,
.info {
    background-color: var(--info-bg) !important;
    border: 2px solid var(--info) !important;
    color: var(--info) !important;
}

/* تطبيق على الجداول */
table {
    width: 100% !important;
    border-collapse: collapse !important;
    background-color: var(--surface) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
}

th {
    background-color: var(--primary-lighter) !important;
    color: var(--primary) !important;
    font-weight: 600 !important;
    padding: var(--space-md) !important;
    text-align: right !important;
}

td {
    padding: var(--space-md) !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
}

tr:hover {
    background-color: var(--background-alt) !important;
}

/* تطبيق على القوائم */
ul:not([class]),
ol:not([class]) {
    padding-right: var(--space-lg) !important;
    color: var(--text-primary) !important;
}

/* تطبيق على الروابط */
a {
    color: var(--primary) !important;
    text-decoration: none !important;
    transition: color var(--transition-fast) var(--ease) !important;
}

a:hover {
    color: var(--primary-hover) !important;
    text-decoration: underline !important;
}

/* تطبيق على العناوين */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary) !important;
    font-weight: 700 !important;
    margin-bottom: var(--space-md) !important;
}

h1 {
    font-size: 2.5rem !important;
}

h2 {
    font-size: 2rem !important;
}

h3 {
    font-size: 1.5rem !important;
}

/* تطبيق على الفقرات */
p {
    color: var(--text-primary) !important;
    line-height: 1.6 !important;
    margin-bottom: var(--space-md) !important;
}

/* تطبيق على صور المنتجات */
.listing-image,
.product-image,
.category-image {
    border-radius: var(--radius-md) !important;
    overflow: hidden !important;
}

/* تطبيق على شارات الحالة */
.badge,
.status-badge,
.tag {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: var(--space-xs) var(--space-sm) !important;
    border-radius: var(--radius-full) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
}

.badge-primary {
    background-color: var(--primary-lighter) !important;
    color: var(--primary) !important;
}

.badge-success {
    background-color: var(--success-bg) !important;
    color: var(--success) !important;
}

.badge-warning {
    background-color: var(--warning-bg) !important;
    color: var(--warning) !important;
}

.badge-error {
    background-color: var(--error-bg) !important;
    color: var(--error) !important;
}

/* تطبيق على النوافذ المنبثقة */
.modal,
.popup,
.dialog {
    background-color: var(--surface) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-xl) !important;
    border: 1px solid var(--border) !important;
}

.modal-header,
.popup-header {
    padding: var(--space-xl) !important;
    border-bottom: 1px solid var(--border) !important;
}

.modal-body,
.popup-body {
    padding: var(--space-xl) !important;
}

.modal-footer,
.popup-footer {
    padding: var(--space-xl) !important;
    border-top: 1px solid var(--border) !important;
}

/* تطبيق على التبويبات */
.tabs,
.tab-list {
    display: flex !important;
    gap: var(--space-xs) !important;
    border-bottom: 2px solid var(--border) !important;
    margin-bottom: var(--space-xl) !important;
}

.tab,
.tab-item {
    padding: var(--space-md) var(--space-lg) !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    color: var(--text-secondary) !important;
    cursor: pointer !important;
    transition: all var(--transition-fast) var(--ease) !important;
    position: relative !important;
    bottom: -2px !important;
}

.tab:hover,
.tab-item:hover {
    color: var(--primary) !important;
    background-color: var(--background-alt) !important;
}

.tab.active,
.tab-item.active {
    color: var(--primary) !important;
    border-bottom-color: var(--primary) !important;
    font-weight: 600 !important;
}

/* تطبيق على صفحة التحميل */
.loader,
.spinner,
.loading {
    border: 4px solid var(--border) !important;
    border-top-color: var(--primary) !important;
    border-radius: var(--radius-full) !important;
}

/* تطبيق على القوائم المنسدلة */
.dropdown-menu,
.select-menu {
    background-color: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-xl) !important;
    padding: var(--space-xs) !important;
}

.dropdown-item,
.select-item {
    padding: var(--space-sm) var(--space-md) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-md) !important;
    transition: all var(--transition-fast) var(--ease) !important;
}

.dropdown-item:hover,
.select-item:hover {
    background-color: var(--background-alt) !important;
    color: var(--primary) !important;
}

/* تطبيق على فواصل الأقسام */
hr {
    border: none !important;
    height: 1px !important;
    background-color: var(--border) !important;
    margin: var(--space-xl) 0 !important;
}

/* تطبيق على الصور الرمزية */
.avatar,
.user-avatar {
    border-radius: var(--radius-full) !important;
    border: 2px solid var(--border) !important;
}

/* تطبيق على نماذج البحث */
.search-form,
.search-box {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    background-color: var(--background-alt) !important;
    border: 2px solid var(--border) !important;
    border-radius: var(--radius-full) !important;
    overflow: hidden !important;
}

.search-form input,
.search-box input {
    flex: 1 !important;
    border: none !important;
    background: transparent !important;
    padding: var(--space-md) var(--space-lg) !important;
}

.search-form button,
.search-box button {
    padding: var(--space-md) var(--space-xl) !important;
    background-color: var(--primary) !important;
    border: none !important;
    border-radius: 0 !important;
}

/* تطبيق على شبكة المنتجات */
.products-grid,
.items-grid,
.listings-grid {
    display: grid !important;
    gap: var(--space-lg) !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
}

/* تطبيق على بطاقة المنتج */
.product-card,
.item-card,
.listing-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  background: var(--surface) !important;
  background-image: none !important;
}

.product-card img,
.item-card img,
.listing-card img {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: var(--radius-md) !important;
}

/* إزالة أي خلفيات متدرجة */
.product-card > div,
.item-card > div,
.listing-card > div {
  background: transparent !important;
  background-image: none !important;
}/* تطبيق على أسعار المنتجات */
.price,
.product-price,
.listing-price {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--primary) !important;
}

/* تطبيق على نماذج التواصل */
.contact-form,
.message-form {
    background-color: var(--surface) !important;
    padding: var(--space-xl) !important;
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--border) !important;
}

/* تطبيق على تقييمات النجوم */
.rating,
.stars {
    color: #fbbf24 !important;
}

/* تطبيق على عداد العناصر */
.counter,
.count-badge {
    background-color: var(--error) !important;
    color: #ffffff !important;
    border-radius: var(--radius-full) !important;
    padding: 2px 8px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
}

/* تطبيق على البطاقات المميزة */
.featured-card,
.premium-card {
    border: 2px solid var(--primary) !important;
    box-shadow: 0 0 20px var(--primary-lighter) !important;
}

/* تطبيق على تبديل الوضع */
.theme-switcher,
.dark-mode-toggle {
    width: 40px !important;
    height: 40px !important;
    border-radius: var(--radius-md) !important;
    background-color: var(--background-alt) !important;
    border: 1px solid var(--border) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all var(--transition-fast) var(--ease) !important;
}

.theme-switcher:hover,
.dark-mode-toggle:hover {
    background-color: var(--border) !important;
}

/* تطبيق على شريط التقدم */
.progress,
.progress-bar {
    background-color: var(--border) !important;
    border-radius: var(--radius-full) !important;
    overflow: hidden !important;
    height: 8px !important;
}

.progress-bar-fill,
.progress-fill {
    background-color: var(--primary) !important;
    height: 100% !important;
    transition: width var(--transition-slow) var(--ease) !important;
}

/* تطبيق على توست المنبثق */
.toast,
.snackbar {
    background-color: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-xl) !important;
    padding: var(--space-md) var(--space-lg) !important;
}

/* تطبيق على أزرار الإجراءات العائمة */
.fab,
.floating-action-button {
    width: 56px !important;
    height: 56px !important;
    border-radius: var(--radius-full) !important;
    background-color: var(--primary) !important;
    color: #ffffff !important;
    box-shadow: var(--shadow-lg) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: fixed !important;
    bottom: 80px !important;
    left: 20px !important;
    z-index: 999 !important;
}

/* تطبيق على الخطوات */
.steps,
.stepper {
    display: flex !important;
    gap: var(--space-md) !important;
    align-items: center !important;
}

.step,
.step-item {
    flex: 1 !important;
    text-align: center !important;
    position: relative !important;
}

.step-indicator {
    width: 40px !important;
    height: 40px !important;
    border-radius: var(--radius-full) !important;
    background-color: var(--border) !important;
    color: var(--text-secondary) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto var(--space-sm) !important;
    font-weight: 700 !important;
}

.step.active .step-indicator {
    background-color: var(--primary) !important;
    color: #ffffff !important;
}

.step.completed .step-indicator {
    background-color: var(--success) !important;
    color: #ffffff !important;
}

/* تطبيق على صندوق المعلومات */
.info-box,
.callout {
    padding: var(--space-lg) !important;
    border-radius: var(--radius-lg) !important;
    border-right: 4px solid var(--primary) !important;
    background-color: var(--primary-lighter) !important;
    margin-bottom: var(--space-lg) !important;
}

/* تطبيق على تنبيه الكوكيز */
.cookie-notice,
.cookie-banner {
    background-color: var(--surface) !important;
    border-top: 1px solid var(--border) !important;
    padding: var(--space-lg) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   تحسينات إضافية للاستجابة
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .products-grid,
    .items-grid,
    .listings-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    }
    
    h1 {
        font-size: 2rem !important;
    }
    
    h2 {
        font-size: 1.5rem !important;
    }
    
    h3 {
        font-size: 1.25rem !important;
    }
    
    .btn-lg,
    .button-lg {
        min-width: 160px !important;
        padding: var(--space-sm) var(--space-lg) !important;
    }
}

@media (max-width: 480px) {
    .products-grid,
    .items-grid,
    .listings-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   تحسينات للطباعة
   ═══════════════════════════════════════════════════════════════════════ */

@media print {
    .header-modern,
    .footer-modern,
    .bottom-nav-neo,
    .fab,
    button:not(.print-visible) {
        display: none !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
    
    .card-modern,
    .listing-card {
        border: 1px solid #ccc !important;
        box-shadow: none !important;
    }
}