/* متغيرات عامة */
:root {
    --primary-color: #FFA500;
    --secondary-color: #FF8C00;
    --accent-color: #FFC107;
    --text-color: #333;
    --light-text: #777;
    --bg-color: #f9f9f9;
    --card-bg: #fff;
    --border-color: #e0e0e0;
    --success-color: #4CAF50;
    --danger-color: #F44336;
    --warning-color: #FF9800;
    --info-color: #2196F3;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    --radius: 8px;
    --transition: all 0.3s ease;
    --main-font: 'Tajawal', sans-serif;
}

/* إعادة ضبط عامة */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    font-family: var(--main-font);
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
    direction: rtl;
}

a {
    text-decoration: none;
    color: var(--primary-color);
    cursor: pointer;
}

button {
    cursor: pointer;
    border: none;
    outline: none;
    background: none;
    font-family: var(--main-font);
}

input, select, textarea {
    font-family: var(--main-font);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 10px;
    outline: none;
    width: 100%;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
}

/* الشريط العلوي */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background-color: var(--card-bg);
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 10;
}

.site-title {
    font-size: 1.2rem;
    color: var(--primary-color);
    flex-grow: 1;
    text-align: center;
}

.notification-btn, .cart-icon {
    position: relative;
    font-size: 1.2rem;
    color: var(--text-color);
    padding: 5px;
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
}

.notification-badge, .cart-badge {
    position: absolute;
    top: -5px;
    left: -5px;
    background-color: var(--danger-color);
    color: white;
    font-size: 0.7rem;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.notifications-dropdown {
    position: relative;
}

.dropdown-content {
    position: absolute;
    top: 100%;
    right: 0;
    width: 300px;
    max-height: 400px;
    overflow-y: auto;
    background-color: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    z-index: 20;
}

.notification-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
}

.notification-tabs button {
    flex: 1;
    padding: 10px;
    text-align: center;
    background: none;
    border: none;
    color: var(--light-text);
    outline: none;
}

.notification-tabs button.active {
    color: var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
}

.notification-list, .message-list {
    padding: 10px;
}

.notification-item, .message-item {
    display: flex;
    padding: 10px;
    border-bottom: 1px solid var(--border-color);
    gap: 10px;
}

.notification-item i {
    color: var(--primary-color);
    font-size: 1.2rem;
    margin-top: 3px;
}

.notification-content, .message-content {
    flex-grow: 1;
}

.notification-content p, .message-content p {
    margin-bottom: 5px;
    font-size: 0.9rem;
}

.notification-content small, .message-content small {
    color: var(--light-text);
    font-size: 0.8rem;
}

.message-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}

.empty-state {
    padding: 20px;
    text-align: center;
    color: var(--light-text);
}

/* الشريط السفلي */
.bottom-nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--card-bg);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    padding: 10px 0;
    z-index: 10;
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px 0;
    flex: 1;
    color: var(--light-text);
    transition: var(--transition);
}

.nav-item i {
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.nav-item span {
    font-size: 0.7rem;
}

.nav-item.active {
    color: var(--primary-color);
}

.main-nav-item {
    position: relative;
}

.main-nav-circle {
    background-color: var(--primary-color);
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    position: absolute;
    bottom: 5px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
}

.main-nav-circle i {
    color: white;
    font-size: 1.5rem;
    margin: 0;
}

.main-nav-item.active .main-nav-circle {
    background-color: var(--secondary-color);
}

/* محتوى الصفحة الرئيسية */
.main-content {
    padding: 20px 15px 70px;
}

.welcome-message {
    margin-bottom: 20px;
    text-align: center;
}

.welcome-message h2 {
    color: var(--primary-color);
    font-size: 1.3rem;
}

.search-container {
    display: flex;
    margin-bottom: 20px;
    position: relative;
}

.search-container input {
    flex-grow: 1;
    padding: 12px 15px;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    padding-left: 40px;
}

.search-btn {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--light-text);
    background: none;
    border: none;
    font-size: 1.2rem;
}

.categories-scroll {
    display: flex;
    overflow-x: auto;
    margin-bottom: 20px;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
}

.categories-scroll::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
}

.category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
    padding: 10px;
    margin-left: 10px;
    background-color: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.category-item i {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-bottom: 5px;
}

.category-item span {
    font-size: 0.8rem;
    text-align: center;
}

.category-item.active {
   !important;
    background-color: var(--primary-color);
}

.category-item.active i, 
.category-item.active span {
    color: white;
}

.product-section {
    margin-bottom: 30px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.section-header h3 {
    font-size: 1.1rem;
    color: var(--text-color);
}

.view-more {
    color: var(--primary-color);
    font-size: 0.9rem;
}

.products-scroll {
    display: flex;
    overflow-x: auto;
    gap: 15px;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.products-scroll::-webkit-scrollbar {
    display: none;
}

.product-card {
    min-width: 160px;
    background-color: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: var(--transition);
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.product-image {
    position: relative;
    height: 150px;
    overflow: hidden;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.discount-badge, .new-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: var(--danger-color);
    color: white;
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: 10px;
}

.new-badge {
    background-color: var(--success-color);
}

.product-info {
    padding: 10px;
}

.product-info h4 {
    font-size: 0.9rem;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.price-container {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 10px;
}

.current-price {
    font-weight: bold;
    color: var(--primary-color);
    font-size: 0.9rem;
}

.old-price {
    color: var(--light-text);
    text-decoration: line-through;
    font-size: 0.8rem;
}

.product-actions {
    display: flex;
    justify-content: space-between;
}

.add-to-cart-btn, .view-product-btn, .favorite-btn {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: var(--transition);
}

.add-to-cart-btn:hover {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.view-product-btn:hover {
    background-color: var(--info-color);
    color: white;
    border-color: var(--info-color);
}

.favorite-btn:hover, .favorite-btn.is-favorite {
    background-color: var(--danger-color);
    color: white;
    border-color: var(--danger-color);
}

/* صفحة المنتجات */
.products-page {
    padding: 20px 15px 70px;
}

.page-header {
    margin-bottom: 20px;
}

.page-header h2 {
    font-size: 1.3rem;
    color: var(--text-color);
}

.filter-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.filter-options select {
    padding: 8px 10px;
    font-size: 0.9rem;
    border-radius: var(--radius);
}

.view-mode-btn {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    width: 35px;
    height: 35px;
    border-radius: var(--radius);
    display: flex;
    justify-content: center;
    align-items: center;
}

.categories-filter {
    display: flex;
    overflow-x: auto;
    margin-bottom: 20px;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.categories-filter::-webkit-scrollbar {
    display: none;
}

.category-filter-btn {
    min-width: max-content;
    padding: 8px 15px;
    margin-left: 10px;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    font-size: 0.9rem;
    color: var(--text-color);
    transition: var(--transition);
}

.category-filter-btn.active {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

.products-list .product-item {
    display: flex;
    margin-bottom: 15px;
}

.product-item {
    background-color: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.product-item.list-view .product-image {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}

.product-item.list-view .product-details {
    padding: 10px;
    flex-grow: 1;
}

.product-details h4 {
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.product-rating {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.product-rating i {
    color: var(--warning-color);
    font-size: 0.8rem;
}

.product-rating span {
    color: var(--light-text);
    font-size: 0.8rem;
    margin-right: 5px;
}

.product-description {
    font-size: 0.8rem;
    color: var(--light-text);
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pagination {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.page-btn {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--radius);
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    font-size: 0.9rem;
}

.page-btn.active {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* صفحة الطلبيات */
.orders-page {
    padding: 20px 15px 70px;
}

.orders-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.order-card {
    background-color: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
}

.order-header h4 {
    font-size: 1rem;
    margin-bottom: 5px;
}

.order-date {
    font-size: 0.8rem;
    color: var(--light-text);
}

.order-status {
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    color: white;
}

.order-status.pending {
    background-color: var(--warning-color);
}

.order-status.processing {
    background-color: var(--info-color);
}

.order-status.shipped {
    background-color: var(--primary-color);
}

.order-status.delivered {
    background-color: var(--success-color);
}

.order-status.cancelled {
    background-color: var(--danger-color);
}

.order-items {
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
}

.order-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    gap: 15px;
}

.order-item img {
    width: 50px;
    height: 50px;
    border-radius: var(--radius);
    object-fit: cover;
}

.item-details h5 {
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.item-details p {
    font-size: 0.8rem;
    color: var(--light-text);
}

.more-items {
    text-align: center;
    font-size: 0.8rem;
    color: var(--primary-color);
    margin-top: 10px;
}

.order-summary {
    padding: 15px;
    background-color: #f8f8f8;
    border-bottom: 1px solid var(--border-color);
}

.order-total, .shipping-info, .packaging-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    font-size: 0.9rem;
}

.order-actions {
    display: flex;
    justify-content: space-between;
    padding: 15px;
}

.view-order-btn, .cancel-order-btn {
    padding: 8px 15px;
    border-radius: var(--radius);
    font-size: 0.9rem;
    transition: var(--transition);
}

.view-order-btn {
    background-color: var(--primary-color);
    color: white;
}

.cancel-order-btn {
    background-color: transparent;
    border: 1px solid var(--danger-color);
    color: var(--danger-color);
}

.cancel-order-btn:hover {
    background-color: var(--danger-color);
    color: white;
}

.empty-orders {
    text-align: center;
    padding: 40px 20px;
    background-color: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.empty-orders i {
    font-size: 3rem;
    color: var(--light-text);
    margin-bottom: 15px;
}

.empty-orders p {
    font-size: 1rem;
    margin-bottom: 20px;
    color: var(--light-text);
}

.shop-now-btn {
    padding: 10px 20px;
    background-color: var(--primary-color);
    color: white;
    border-radius: var(--radius);
    font-size: 0.9rem;
    transition: var(--transition);
}

/* صفحة الحساب */
.account-page {
    padding: 20px 15px 70px;
}

.account-info {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    background-color: var(--card-bg);
    padding: 15px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.user-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    font-weight: bold;
}

.user-details h3 {
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.user-details p {
    font-size: 0.9rem;
    color: var(--light-text);
}

.account-overview {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

.account-card {
    background-color: var(--card-bg);
    border-radius: var(--radius);
    padding: 15px;
    box-shadow: var(--shadow);
    text-align: center;
}

.card-icon {
    margin: 0 auto 10px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 1rem;
}

.card-icon.blue {
    background-color: var(--info-color);
}

.card-icon.green {
    background-color: var(--success-color);
}

.card-icon.orange {
    background-color: var(--primary-color);
}

.card-content h4 {
    font-size: 0.8rem;
    margin-bottom: 5px;
    color: var(--light-text);
}

.card-value {
    font-size: 1rem;
    font-weight: bold;
}

.account-section {
    background-color: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 20px;
    overflow: hidden;
}

.account-section h3 {
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
    font-size: 1rem;
}

.payment-info {
    padding: 15px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    font-size: 0.9rem;
}

.request-payment-btn {
    width: 100%;
    padding: 10px;
    background-color: var(--primary-color);
    color: white;
    border-radius: var(--radius);
    font-size: 0.9rem;
    transition: var(--transition);
}

.sales-report {
    padding: 15px;
}

.report-filters {
    margin-bottom: 15px;
}

.report-filters select {
    width: 100%;
    padding: 10px;
    border-radius: var(--radius);
}

.chart-placeholder {
    background-color: #f8f8f8;
    border-radius: var(--radius);
    padding: 15px;
    height: 150px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
}

.compose-btn {
    padding: 5px 10px;
    background-color: var(--primary-color);
    color: white;
    border-radius: var(--radius);
    font-size: 0.8rem;
}

.messages-list {
    padding: 15px;
}

.message-item {
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 15px;
}

.message-sender {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.sender-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8rem;
    font-weight: bold;
}

.message-sender strong {
    font-size: 0.9rem;
    display: block;
}

.message-sender small {
    font-size: 0.8rem;
    color: var(--light-text);
}

.message-text {
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.message-actions {
    display: flex;
    justify-content: flex-end;
}

.reply-btn {
    padding: 5px 10px;
    background-color: var(--info-color);
    color: white;
    border-radius: var(--radius);
    font-size: 0.8rem;
}

.empty-messages {
    text-align: center;
    padding: 20px;
    color: var(--light-text);
}

.login-prompt {
    text-align: center;
    padding: 30px 20px;
    background-color: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.login-prompt i {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.login-prompt h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.login-prompt p {
    font-size: 0.9rem;
    color: var(--light-text);
    margin-bottom: 20px;
}

.login-form {
    max-width: 300px;
    margin: 0 auto;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-size: 0.9rem;
}

.login-btn {
    width: 100%;
    padding: 10px;
    background-color: var(--primary-color);
    color: white;
    border-radius: var(--radius);
    font-size: 0.9rem;
    transition: var(--transition);
}

.register-link {
    margin-top: 15px;
    font-size: 0.9rem;
}

/* صفحة الإعدادات */
.settings-page {
    padding: 20px 15px 70px;
}

.settings-section {
    background-color: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 20px;
    overflow: hidden;
}

.settings-section h3 {
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
    font-size: 1rem;
}

.settings-form {
    padding: 15px;
}

.settings-form .form-group {
    margin-bottom: 15px;
}

.settings-form label {
    display: block;
    margin-bottom: 5px;
    font-size: 0.9rem;
}

.settings-form input,
.settings-form select,
.settings-form textarea {
    width: 100%;
    padding: 10px;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    font-size: 0.9rem;
}

.settings-form textarea {
    min-height: 100px;
}

.save-btn {
    width: 100%;
    padding: 10px;
    background-color: var(--primary-color);
    color: white;
    border-radius: var(--radius);
    font-size: 0.9rem;
    transition: var(--transition);
}

.settings-actions {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.logout-btn {
    padding: 10px 20px;
    background-color: var(--danger-color);
    color: white;
    border-radius: var(--radius);
    font-size: 0.9rem;
    transition: var(--transition);
}

.register-section {
    background-color: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px;
}

.register-section h3 {
    margin-bottom: 20px;
    font-size: 1.2rem;
    text-align: center;
}

.register-form {
    max-width: 500px;
    margin: 0 auto;
}

.register-btn {
    width: 100%;
    padding: 10px;
    background-color: var(--primary-color);
    color: white;
    border-radius: var(--radius);
    font-size: 0.9rem;
    transition: var(--transition);
}

.login-link {
    text-align: center;
    margin-top: 15px;
    font-size: 0.9rem;
}

.login-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

.login-modal-content {
    width: 90%;
    max-width: 400px;
    background-color: var(--card-bg);
    border-radius: var(--radius);
    padding: 20px;
    position: relative;
}

.close-modal {
    position: absolute;
    top: 10px;
    left: 10px;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--light-text);
}

/* لوحة تحكم الأدمن */
.admin-dashboard {
    padding: 20px 15px 70px;
}

.admin-tabs {
    display: flex;
    overflow-x: auto;
    margin-bottom: 20px;
    background-color: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    scrollbar-width: none;
}

.admin-tabs::-webkit-scrollbar {
    display: none;
}

.admin-tab-btn {
    min-width: 100px;
    padding: 15px 10px;
    text-align: center;
    background: none;
    border: none;
    color: var(--light-text);
    font-size: 0.9rem;
    outline: none;
    position: relative;
}

.admin-tab-btn i {
    font-size: 1.2rem;
    margin-bottom: 5px;
    display: block;
}

.admin-tab-btn.active {
    color: var(--primary-color);
}

.admin-tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-color: var(--primary-color);
}

.admin-section {
    background-color: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 20px;
    overflow: hidden;
}

.admin-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
}

.admin-section .section-header h3 {
    font-size: 1rem;
}

.filters select {
    padding: 8px;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    font-size: 0.9rem;
}

.new-btn {
    padding: 8px 15px;
    background-color: var(--primary-color);
    color: white;
    border-radius: var(--radius);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 5px;
}

.admin-table {
    padding: 15px;
    overflow-x: auto;
}

.admin-table table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table th {
    background-color: #f8f8f8;
    padding: 10px;
    text-align: right;
    font-size: 0.9rem;
}

.admin-table td {
    padding: 10px;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9rem;
}

.admin-table .product-thumbnail {
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    object-fit: cover;
}

.status-badge {
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 0.8rem;
    display: inline-block;
    text-align: center;
    color: white;
}

.status-badge.active, .status-badge.delivered {
    background-color: var(--success-color);
}

.status-badge.inactive, .status-badge.cancelled {
    background-color: var(--danger-color);
}

.status-badge.pending {
    background-color: var(--warning-color);
}

.status-badge.processing {
    background-color: var(--info-color);
}

.status-badge.featured, .status-badge.shipped {
    background-color: var(--primary-color);
}

.action-buttons {
    display: flex;
    gap: 5px;
    justify-content: center;
}

.view-btn, .edit-btn, .delete-btn, .print-btn, .payment-btn {
    width: 30px;
    height: 30px;
    border-radius: var(--radius);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 0.8rem;
}

.view-btn {
    background-color: var(--info-color);
}

.edit-btn {
    background-color: var(--warning-color);
}

.delete-btn {
    background-color: var(--danger-color);
}

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

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

.payment-btn:disabled {
    background-color: var(--light-text);
    cursor: not-allowed;
}

.messages-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
}

.tab-btn {
    flex: 1;
    padding: 10px;
    text-align: center;
    background: none;
    border: none;
    color: var(--light-text);
    font-size: 0.9rem;
}

.tab-btn.active {
    color: var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
}

.admin-message-card, .complaint-card {
    margin: 15px;
    padding: 15px;
    background-color: #f8f8f8;
    border-radius: var(--radius);
}

.message-header, .complaint-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.message-status, .complaint-status {
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 0.8rem;
    color: white;
}

.message-status.new, .complaint-status.new {
    background-color: var(--warning-color);
}

.message-status.read, .complaint-status.processing {
    background-color: var(--info-color);
}

.message-status.replied, .complaint-status.resolved {
    background-color: var(--success-color);
}

.message-body, .complaint-body {
    margin-bottom: 15px;
    font-size: 0.9rem;
}

.complaint-subject {
    margin-bottom: 10px;
    font-size: 0.9rem;
}

.message-actions, .complaint-actions {
    display: flex;
    gap: 10px;
}

.process-btn, .resolve-btn, .reply-btn, .mark-btn {
    padding: 5px 10px;
    border-radius: var(--radius);
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 5px;
    color: white;
}

.process-btn {
    background-color: var(--info-color);
}

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

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

.mark-btn {
    background-color: var(--warning-color);
}

.contact-item {
    margin-bottom: 10px;
}

.contact-item label {
    display: block;
    margin-bottom: 5px;
    font-size: 0.9rem;
}

.affiliate-payments, .website-accounts, .expenses-section {
    margin-bottom: 20px;
}

.affiliate-payments h4, .website-accounts h4, .expenses-section h4 {
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
    font-size: 1rem;
}

.badge {
    background-color: var(--danger-color);
    color: white;
    font-size: 0.8rem;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.add-expense-btn {
    padding: 5px 10px;
    background-color: var(--primary-color);
    color: white;
    border-radius: var(--radius);
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* نافذة سلة المنتجات */
.cart-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

.cart-content {
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
    background-color: var(--card-bg);
    border-radius: var(--radius);
    position: relative;
}

.cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    background-color: var(--card-bg);
    z-index: 5;
}

.cart-header h3 {
    font-size: 1.2rem;
}

.close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--light-text);
}

.cart-items {
    padding: 15px;
}

.cart-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
    position: relative;
}

.item-image {
    width: 60px;
    height: 60px;
    border-radius: var(--radius);
    overflow: hidden;
    margin-left: 10px;
}

.item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.item-details {
    flex-grow: 1;
}

.item-details h4 {
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.price {
    font-weight: bold;
    color: var(--primary-color);
    font-size: 0.9rem;
}

.item-quantity {
    display: flex;
    align-items: center;
    margin: 0 15px;
}

.quantity-btn {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
}

.quantity {
    margin: 0 10px;
    font-size: 0.9rem;
}

.item-total {
    font-weight: bold;
    font-size: 0.9rem;
    min-width: 60px;
    text-align: left;
}

.remove-btn {
    color: var(--danger-color);
    background: none;
    border: none;
    font-size: 1rem;
    margin-right: 5px;
}

.empty-cart {
    text-align: center;
    padding: 40px 20px;
}

.empty-cart i {
    font-size: 3rem;
    color: var(--light-text);
    margin-bottom: 15px;
}

.empty-cart p {
    font-size: 1rem;
    margin-bottom: 20px;
    color: var(--light-text);
}

.cart-summary {
    padding: 15px;
    background-color: #f8f8f8;
    border-top: 1px solid var(--border-color);
}

.summary-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 0.9rem;
}

.summary-item.total {
    font-weight: bold;
    font-size: 1rem;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
}

.shipping-options {
    margin: 15px 0;
    padding: 15px;
    background-color: var(--card-bg);
    border-radius: var(--radius);
}

.shipping-options h4 {
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.checkout-form, .checkout-confirm, .order-success {
    padding: 15px;
}

.checkout-form h4, .checkout-confirm h4, .order-success h4 {
    margin-bottom: 15px;
    font-size: 1rem;
}

.proceed-btn {
    width: 100%;
    padding: 10px;
    background-color: var(--primary-color);
    color: white;
    border-radius: var(--radius);
    font-size: 0.9rem;
    transition: var(--transition);
}

.confirm-details {
    background-color: #f8f8f8;
    border-radius: var(--radius);
    padding: 15px;
    margin-bottom: 20px;
}

.detail-group {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 0.9rem;
}

.detail-group.total {
    font-weight: bold;
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid var(--border-color);
}

.confirm-actions {
    display: flex;
    gap: 10px;
}

.back-btn, .complete-btn {
    flex: 1;
    padding: 10px;
    border-radius: var(--radius);
    font-size: 0.9rem;
    transition: var(--transition);
}

.back-btn {
    background-color: #f0f0f0;
    color: var(--text-color);
}

.complete-btn {
    background-color: var(--primary-color);
    color: white;
}

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

.success-icon {
    font-size: 3rem;
    color: var(--success-color);
    margin-bottom: 15px;
}

.order-success p {
    margin-bottom: 10px;
    font-size: 0.9rem;
}

.success-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.continue-shopping-btn, .view-order-btn {
    flex: 1;
    padding: 10px;
    border-radius: var(--radius);
    font-size: 0.9rem;
    transition: var(--transition);
}

.continue-shopping-btn {
    background-color: #f0f0f0;
    color: var(--text-color);
}

.view-order-btn {
    background-color: var(--primary-color);
    color: white;
}

/* نافذة المنتج */
.product-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

.product-modal-content {
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    background-color: var(--card-bg);
    border-radius: var(--radius);
    position: relative;
}

.product-modal-header {
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    background-color: var(--card-bg);
    z-index: 5;
}

.product-modal-header h3 {
    font-size: 1.2rem;
    text-align: center;
    padding-left: 30px;
}

.close-btn {
    position: absolute;
    left: 15px;
    top: 15px;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--light-text);
    z-index: 10;
}

.product-gallery {
    position: relative;
}

.gallery-main {
    height: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f8f8f8;
}

.gallery-main img {
    max-height: 100%;
    object-fit: contain;
}

.gallery-dots {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 10px;
}

.gallery-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--border-color);
    cursor: pointer;
}

.gallery-dot.active {
    background-color: var(--primary-color);
}

.product-modal-info {
    padding: 15px;
}

.product-code {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.product-description {
    margin-bottom: 15px;
    font-size: 0.9rem;
    line-height: 1.5;
}

.product-pricing {
    background-color: #f8f8f8;
    border-radius: var(--radius);
    padding: 15px;
    margin-bottom: 15px;
}

.price-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 0.9rem;
}

.product-benefit, .product-min-quantity {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    font-size: 0.9rem;
}

.product-quantity {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.quantity-input {
    display: flex;
    align-items: center;
}

.quantity-input input {
    width: 50px;
    text-align: center;
    margin: 0 10px;
}

.product-total {
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
}

.product-modal-actions {
    display: flex;
    gap: 10px;
    padding: 0 15px 15px;
}

.add-to-cart-btn, .share-btn {
    flex: 1;
    padding: 10px;
    border-radius: var(--radius);
    font-size: 0.9rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    transition: var(--transition);
}

.add-to-cart-btn {
    background-color: var(--primary-color);
    color: white;
}

.share-btn {
    background-color: var(--info-color);
    color: white;
}

.product-reviews {
    padding: 15px;
    border-top: 1px solid var(--border-color);
}

.product-reviews h4 {
    margin-bottom: 15px;
    font-size: 1rem;
}

.rating-summary {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.average-rating {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.average-rating strong {
    font-size: 1.5rem;
    margin-bottom: 5px;
}

.rating-stars {
    color: var(--warning-color);
}

.reviews-list {
    margin-bottom: 20px;
}

.review-item {
    background-color: #f8f8f8;
    border-radius: var(--radius);
    padding: 15px;
    margin-bottom: 15px;
}

.review-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.reviewer-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.reviewer-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}

.review-rating {
    color: var(--warning-color);
}

.review-content p {
    font-size: 0.9rem;
}

.no-reviews {
    text-align: center;
    padding: 20px;
    color: var(--light-text);
}

.add-review {
    background-color: #f8f8f8;
    border-radius: var(--radius);
    padding: 15px;
}

.add-review h5 {
    margin-bottom: 15px;
    font-size: 0.9rem;
}

.rating-input {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.star-rating {
    display: flex;
    gap: 5px;
    color: var(--light-text);
    font-size: 1.2rem;
}

.star-rating i {
    cursor: pointer;
}

.star-rating i.fas {
    color: var(--warning-color);
}

.submit-review-btn {
    width: 100%;
    padding: 10px;
    background-color: var(--primary-color);
    color: white;
    border-radius: var(--radius);
    font-size: 0.9rem;
    transition: var(--transition);
}

/* نموذج الأدمن */
.admin-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

.admin-modal-content {
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    background-color: var(--card-bg);
    border-radius: var(--radius);
    position: relative;
}

.admin-modal-header {
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    background-color: var(--card-bg);
    z-index: 5;
}

.admin-modal-header h3 {
    font-size: 1.2rem;
    text-align: center;
    padding-left: 30px;
}

.admin-form {
    padding: 15px;
}

.form-row {
    display: flex;
    gap: 15px;
}

.form-group.half {
    flex: 1;
}

.product-features {
    margin-top: 10px;
}

.feature-item {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.remove-feature-btn {
    color: var(--danger-color);
    background: none;
    border: none;
    font-size: 1rem;
}

.add-feature-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--primary-color);
    margin-top: 10px;
    font-size: 0.9rem;
    background: none;
    border: none;
}

.product-images {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.upload-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.image-preview {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: var(--radius);
    overflow: hidden;
}

.image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.remove-image-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8rem;
}

.upload-placeholder {
    width: 100px;
    height: 100px;
    border: 2px dashed var(--border-color);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.upload-placeholder i {
    font-size: 1.5rem;
    color: var(--light-text);
    margin-bottom: 5px;
}

.upload-placeholder span {
    font-size: 0.8rem;
    color: var(--primary-color);
}

.upload-placeholder small {
    font-size: 0.7rem;
    color: var(--light-text);
}

.form-actions {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.cancel-btn, .save-btn {
    flex: 1;
    padding: 10px;
    border-radius: var(--radius);
    font-size: 0.9rem;
    transition: var(--transition);
}

.cancel-btn {
    background-color: #f0f0f0;
    color: var(--text-color);
}

.save-btn {
    background-color: var(--primary-color);
    color: white;
}

/* نافذة تفاصيل الطلبية للأدمن */
.order-details-content {
    padding: 15px;
}

.order-sections-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
}

.order-section {
    background-color: #f8f8f8;
    border-radius: var(--radius);
    padding: 15px;
    margin-bottom: 20px;
    flex: 1;
    min-width: 300px;
}

.order-section h4 {
    margin-bottom: 15px;
    color: var(--primary-color);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}

.info-block {
    font-size: 0.9rem;
}

.info-block p {
    margin-bottom: 8px;
}

.empty-info {
    color: var(--light-text);
    font-style: italic;
}

.order-products-table {
    overflow-x: auto;
}

.order-products-table table {
    width: 100%;
    border-collapse: collapse;
}

.order-products-table th {
    background-color: #f0f0f0;
    padding: 10px;
    text-align: right;
    font-size: 0.9rem;
}

.order-products-table td {
    padding: 10px;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9rem;
}

.product-cell {
    min-width: 200px;
}

.product-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.product-info img {
    width: 50px;
    height: 50px;
    border-radius: var(--radius);
    object-fit: cover;
}

.costs-summary {
    font-size: 0.9rem;
}

.cost-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.cost-row.total {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
    font-size: 1.1rem;
}

.additional-costs-input {
    width: 100px;
    padding: 5px;
    text-align: left;
    direction: ltr;
}

.status-section {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.order-notes {
    width: 100%;
    min-height: 100px;
    padding: 10px;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
}

.order-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.save-btn, .print-btn, .invoice-btn {
    padding: 10px 15px;
    border-radius: var(--radius);
    font-size: 0.9rem;
    color: white;
}

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

.print-btn {
    background-color: var(--info-color);
}

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

.order-product-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 15px;
}

.add-product-btn {
    padding: 8px 15px;
    background-color: var(--primary-color);
    color: white;
    border-radius: var(--radius);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 5px;
}

.product-selector-content {
    padding: 15px;
}

.product-select-item {
    position: relative;
    background-color: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    margin-bottom: 15px;
}

.product-select-image {
    position: relative;
    height: 120px;
    overflow: hidden;
}

.product-select-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-select-image input[type="checkbox"] {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
}

.product-select-details {
    padding: 10px;
}

.product-select-details h4 {
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.product-selector-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.cancel-btn, .confirm-btn {
    flex: 1;
    padding: 10px;
    border-radius: var(--radius);
    font-size: 0.9rem;
}

.cancel-btn {
    background-color: #f0f0f0;
    color: var(--text-color);
}

.confirm-btn {
    background-color: var(--primary-color);
    color: white;
}

/* User Details */
.user-details-content {
    padding: 15px;
}

.user-info-section, .user-balance-section, .user-orders-section {
    background-color: #f8f8f8;
    border-radius: var(--radius);
    padding: 15px;
    margin-bottom: 20px;
}

.user-info-section h4, .user-balance-section h4, .user-orders-section h4 {
    margin-bottom: 15px;
    color: var(--primary-color);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}

.user-info-form {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
}

.user-info-form .form-group:nth-child(5),
.user-info-form .form-group:nth-child(9) {
    grid-column: 1 / -1;
}

.balance-details {
    margin-bottom: 20px;
}

.balance-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 10px;
    background-color: white;
    border-radius: var(--radius);
}

.payment-form {
    background-color: white;
    border-radius: var(--radius);
    padding: 15px;
    margin-bottom: 20px;
}

.payment-form h5 {
    margin-bottom: 15px;
    font-size: 1rem;
}

.add-payment-btn {
    background-color: var(--success-color);
    color: white;
    padding: 8px 15px;
    border-radius: var(--radius);
    margin-top: 10px;
}

.payments-history h5 {
    margin-bottom: 15px;
    font-size: 1rem;
}

.payments-history table {
    width: 100%;
    border-collapse: collapse;
}

.payments-history th, .payments-history td,
.user-orders-section th, .user-orders-section td {
    padding: 10px;
    text-align: right;
    border: 1px solid var(--border-color);
}

.payments-history th, .user-orders-section th {
    background-color: #f0f0f0;
    font-weight: bold;
}

.empty-payments, .empty-orders {
    text-align: center;
    padding: 20px;
    color: var(--light-text);
    background-color: white;
    border-radius: var(--radius);
}

.modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.edit-user-btn, .invoice-btn {
    padding: 10px 15px;
    border-radius: var(--radius);
    color: white;
    display: flex;
    align-items: center;
    gap: 8px;
}

.edit-user-btn {
    background-color: var(--warning-color);
}

.invoice-btn {
    background-color: var(--info-color);
}

.new-user-content {
    padding: 15px;
}

.new-user-form {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
}

.new-user-form .form-group:nth-child(5),
.new-user-form .form-group:nth-child(12) {
    grid-column: 1 / -1;
}

.form-actions {
    grid-column: 1 / -1;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.disable-btn {
    background-color: var(--danger-color);
}

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

.tracking-info {
    margin-top: 15px;
    background-color: #f8f8f8;
    padding: 15px;
    border-radius: var(--radius);
}

.cancel-btn {
    background-color: #f0f0f0;
    color: var(--text-color);
}

/* تجاوبية التصميم */
@media (min-width: 576px) {
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 768px) {
    .products-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .account-overview {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 992px) {
    .main-content, .products-page, .orders-page, .account-page, .settings-page, .admin-dashboard {
        max-width: 1200px;
        margin: 0 auto;
        padding-top: 30px;
    }
    
    .cart-content, .product-modal-content, .admin-modal-content {
        max-width: 700px;
    }
}

@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/tajawal/v9/Iura6YBj_oCad4k1nzSBC45I.woff2) format('woff2');
    unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC;
}

@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/tajawal/v9/Iura6YBj_oCad4k1nzGBCw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 700;
    src: url(https://fonts.gstatic.com/s/tajawal/v9/Iurf6YBj_oCad4k1l4qkHrRpiYlJ.woff2) format('woff2');
    unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC;
}

@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 700;
    src: url(https://fonts.gstatic.com/s/tajawal/v9/Iurf6YBj_oCad4k1l4qkHrFpiQ.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}