@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&display=swap');

* { box-sizing: border-box; }
body {
  font-family: 'Cairo', Tahoma, Arial, sans-serif;
  background: #f4f3f0;
  margin: 0;
  color: #2b2925;
  font-size: 15px;
}
a { color: #8a5a2b; text-decoration: none; }

.topbar {
  background: linear-gradient(135deg, #2b2925, #3c3428);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 26px;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.topbar .brand { font-weight: 700; font-size: 1.15em; letter-spacing: .3px; }
.topbar .user { font-size: 13px; display: flex; align-items: center; gap: 14px; }
.topbar .user a {
  color: #f0e4d6;
  background: rgba(255,255,255,.08);
  padding: 6px 14px;
  border-radius: 20px;
  transition: background .15s;
}
.topbar .user a:hover { background: rgba(255,255,255,.18); }

.nav {
  background: #3c3428;
  display: flex;
  flex-wrap: wrap;
  padding: 0 20px;
  border-bottom: 3px solid #8a5a2b;
}
.nav a {
  color: #e8e2d6;
  padding: 12px 16px;
  font-size: 13.5px;
  font-weight: 500;
  transition: background .15s, color .15s;
}
.nav a:hover { background: rgba(255,255,255,.08); }
.nav a.active { background: #8a5a2b; color: #fff; }

.container { max-width: 1150px; margin: 26px auto; padding: 0 18px; }

.card {
  background: #fff;
  border: 1px solid #e9e3d6;
  border-radius: 14px;
  padding: 22px 24px;
  margin-bottom: 22px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

h1 { font-size: 1.5em; color: #8a5a2b; font-weight: 700; margin: 0 0 18px; }
h2 { font-size: 1.1em; margin-top: 0; font-weight: 600; color: #3c3428; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: right; padding: 11px 12px; border-bottom: 1px solid #f0ece2; }
th { background: #f7f1e6; color: #8a5a2b; font-weight: 600; font-size: 13px; }
tr:hover td { background: #fbf9f5; }

input, select, textarea {
  padding: 9px 12px;
  border: 1px solid #ddd6c8;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  background: #fff;
  transition: border-color .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: #8a5a2b;
}
label { font-size: 12.5px; color: #8b8275; display: block; margin-bottom: 5px; font-weight: 500; }
.field { margin-bottom: 16px; }

.btn {
  display: inline-block;
  padding: 9px 18px;
  background: #8a5a2b;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  transition: background .15s, transform .1s;
}
.btn:hover { background: #714a22; }
.btn:active { transform: scale(.98); }
.btn.secondary { background: #f0ece2; color: #3c3428; }
.btn.secondary:hover { background: #e5ded0; }
.btn.danger { background: #c0392b; }
.btn.danger:hover { background: #a3301f; }
.btn.small { padding: 5px 12px; font-size: 12px; border-radius: 6px; }

.badge { display: inline-block; background: #f0e4d6; color: #8a5a2b; padding: 3px 12px; border-radius: 14px; font-size: 12px; font-weight: 600; }
.badge.status-pending { background: #fdf1d6; color: #a1710b; }
.badge.status-approved, .badge.status-received, .badge.status-completed { background: #e3f3e3; color: #2c7a2c; }
.badge.status-rejected, .badge.status-cancelled { background: #fbe3e3; color: #c0392b; }

.error { color: #c0392b; background: #fbe3e3; padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; border-right: 4px solid #c0392b; }
.success { color: #2c7a2c; background: #e3f3e3; padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; border-right: 4px solid #2c7a2c; }

.flex { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.top-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }

@media (max-width: 700px) {
  .grid2 { grid-template-columns: 1fr; }
  .top-actions { flex-direction: column; align-items: stretch; gap: 12px; }
}

@media print {
  .topbar, .nav, .no-print { display: none !important; }
  .container { max-width: 100%; margin: 0; }
  .card { border: none; box-shadow: none; }
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
.price-card {
  background: #fff;
  border: 1px solid #070303;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 5px 10px rgba(0,0,0,.1);
  transition: transform .3s ease;
}
.price-card:hover { transform: translateY(-5px); }
.price-card-img {
  position: relative;
  width: 100%;
  height: 170px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  padding: 8px 8px 0;
}
.price-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  transition: opacity .3s ease;
}
.price-card-img:hover img { opacity: .8; }
.price-card-img .no-img { color: #b7ae9c; font-size: 13px; }
.price-card-body { padding: 10px 14px 14px; text-align: center; }
.price-card-name { font-weight: bold; margin: 5px 0; font-size: 16px; color: #000; line-height: 1.4; text-align: center; }
.price-card-desc { font-size: 12.5px; color: #8b8275; margin: 0 0 10px; text-align: center; }
.price-card-price {
  display: flex; justify-content: center; gap: 6px; align-items: baseline;
  border-top: none; padding-top: 6px; font-size: 13px; color: #333;
}
.price-card-price b { font-size: 18px; color: red; }

.autocomplete-wrap { position: relative; }
.autocomplete-results {
  display: none;
  position: absolute;
  top: 100%; right: 0; left: 0;
  background: #fff;
  border: 1px solid #e4ddd0;
  border-radius: 10px;
  margin-top: 4px;
  max-height: 220px;
  overflow-y: auto;
  z-index: 20;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.ac-item { padding: 9px 14px; cursor: pointer; font-size: 14px; border-bottom: 1px solid #f4f1ea; }
.ac-item:last-child { border-bottom: none; }
.ac-item:hover { background: #f7f1e6; }
.ac-item.ac-empty { color: #8b8275; cursor: default; }
.ac-item.ac-empty:hover { background: none; }

.stock-badge {
  position: absolute; top: 15px; right: 15px; z-index: 2;
  background: rgba(255,0,0,.85); color: #fff; font-size: 13px; font-weight: bold;
  padding: 5px 10px; border-radius: 5px; transform: rotate(25deg);
}
html[dir="ltr"] .stock-badge { right: auto; left: 15px; transform: rotate(-25deg); }

.ac-item.ac-active { background: #f0e4d6; }

.gallery-strip { display: flex; gap: 6px; margin: 6px 0 10px; }
.gallery-strip img { width: 32px; height: 32px; object-fit: cover; border-radius: 6px; border: 1px solid #e9e3d6; }

/* ==== توافق كامل مع الهاتف ==== */
@media (max-width: 700px) {
  .topbar, .store-hero-inner, .cust-topbar { padding:10px 14px; flex-direction:column; align-items:flex-start; gap:8px; }
  .whatsapp-float { bottom:16px; left:16px; width:48px; height:48px; font-size:22px; }
  .nav, .cust-nav { flex-wrap:nowrap; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; }
  .nav a, .cust-nav a { padding:10px 12px; font-size:13px; }
  .container { padding:0 10px; margin:14px auto; }
  .card { padding:14px; }
  h1 { font-size:1.2em; }
  table { display:block; overflow-x:auto; white-space:nowrap; }
  input, select, textarea, .btn { font-size:16px; }
  .pricing-grid { grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:10px; }
  .price-card-img { height:130px; }
  .flex { flex-direction:column; align-items:stretch; }
  .flex input, .flex select, .flex button { width:100%; }
  .autocomplete-results { max-height:180px; }
}

.store-footer-full { background:#4a4a4a; color:#f0f0f0; margin-top:36px; padding:30px 20px 16px; border-top:none; }
.store-footer-full-inner { max-width:1150px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:24px; }
.footer-box h3 { font-size:14px; margin:0 0 10px; color:#fff; }
.footer-box p { font-size:13px; margin:4px 0; color:#cfcfcf; }
.footer-box a { color:#9fc4f5; }
.footer-copyright { text-align:center; font-size:12px; color:#b0b0b0; margin:24px 0 0; border-top:1px solid rgba(255,255,255,.1); padding-top:14px; }

.tag-badge { position:absolute; top:8px; right:8px; z-index:3; font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:12px; }
.tag-best { background:#fdf1d6; color:#a1710b; }
.tag-new { background:#e3f3e3; color:#2c7a2c; }

.orders-list-table .items-cell div { padding: 2px 0; }
.orders-list-table td { vertical-align: top; }

.featured-section {
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 22px;
}
.featured-section h2 { border: none; margin-bottom: 14px; font-size: 1.15em; }
.featured-best { background: linear-gradient(135deg, #fdf1d6, #fbe8c0); border: 1px solid #f0d999; }
.featured-best h2 { color: #a1710b; }
.featured-new { background: linear-gradient(135deg, #e3f3e3, #d3ecd3); border: 1px solid #b8ddb8; }
.featured-new h2 { color: #2c7a2c; }

/* ==== دعم الاتجاه المعاكس (LTR) للغة الإنجليزية بالمتجر ==== */
html[dir="ltr"] body { font-family: 'Cairo', Tahoma, Arial, sans-serif; }
html[dir="ltr"] th, html[dir="ltr"] td { text-align: left; }
html[dir="ltr"] .price-card-price { text-align: left; }
html[dir="ltr"] .total { text-align: right; }
html[dir="ltr"] .store-footer-inner { direction: ltr; }
html[dir="ltr"] .whatsapp-float { left: auto; right: 22px; }
@media (max-width: 700px) {
  html[dir="ltr"] .whatsapp-float { left: auto; right: 16px; }
}

/* ==== صناديق الأقسام بالصفحة الرئيسية للمتجر ==== */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
.category-box {
  display: block;
  background: #fff;
  border: 1px solid #e9e3d6;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: #2b2925;
  transition: transform .15s, box-shadow .15s;
}
.category-box:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.08); }
.category-box-img { width: 100%; height: 110px; background: #f7f1e6; display: flex; align-items: center; justify-content: center; }
.category-box-img img { width: 100%; height: 100%; object-fit: cover; }
.category-box-img .no-img { font-size: 2em; }
.category-box-name { padding: 10px 12px 2px; font-weight: 600; font-size: 14px; }
.category-box-count { padding: 0 12px 12px; font-size: 12px; color: #8b8275; }

.recent-strip { display: flex; gap: 14px; overflow-x: auto; padding: 6px 2px; }
.recent-circle {
  flex-shrink: 0; width: 64px; height: 64px; border-radius: 50%; overflow: hidden;
  border: 2px solid #f0e4d6; display: flex; align-items: center; justify-content: center;
  font-size: 24px; background: #f7f1e6;
}
.recent-circle img { width: 100%; height: 100%; object-fit: cover; }

.category-pill {
  display: inline-block; background: #cceeee; color: #111;
  border: 2px solid #ccc; box-shadow: 0 0 10px rgba(0,0,0,.15);
  font-size: 12.5px; font-weight: bold; padding: 2px 14px; border-radius: 4px; margin-bottom: 8px;
}

.slider-row {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 4px 2px 10px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.slider-row .price-card {
  flex: 0 0 230px;
  scroll-snap-align: start;
}
.slider-row::-webkit-scrollbar { height: 6px; }
.slider-row::-webkit-scrollbar-thumb { background: #ddd6c8; border-radius: 6px; }
@media (max-width: 700px) {
  .slider-row .price-card { flex-basis: 160px; }
}

.product-details-toggle { display: block; font-size: 14.5px; font-weight: bold; color: #000; margin: 6px 0; text-decoration: none; text-align: center; }
.product-details-toggle:hover { text-decoration: underline; }

.quick-jump-list {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; padding-bottom: 14px;
  border-bottom: 1px solid #f0ece2;
}
.quick-jump-list a {
  font-size: 12.5px; background: #f7f6f3; padding: 5px 12px; border-radius: 14px;
  color: #3c3428; text-decoration: none; transition: background .15s;
}
.quick-jump-list a:hover { background: #e9e3d6; }

.full-index { max-height: 320px; overflow-y: auto; padding-top: 10px; border-top: 1px solid #f0ece2; margin-top: 10px; }
.full-index.open { display: block; }
.full-index-group { margin-bottom: 12px; }
.full-index-group b { display: block; font-size: 13px; margin-bottom: 6px; }
.full-index-links { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.full-index-links a { font-size: 13px; color: #3c3428; text-decoration: none; }
.full-index-links a:hover { text-decoration: underline; }

.product-detail-card { max-width: 1000px; margin: 0 auto; padding: 30px; }
.product-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
.product-detail-main-img { width: 100%; height: 380px; background: #f7f1e6; border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.product-detail-main-img img { width: 100%; height: 100%; object-fit: contain; }
.product-detail-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.product-detail-thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; cursor: pointer; border: 2px solid transparent; }
.product-detail-thumbs img:hover { border-color: #1a73e8; }
@media (max-width: 700px) {
  .product-detail-grid { grid-template-columns: 1fr; }
  .product-detail-main-img { height: 260px; }
}

.statement-card { max-width: 900px; margin: 0 auto; }
.statement-table th { background: #2b2925; color: #fff; text-align: left; }
.statement-table td, .statement-table th { text-align: left; padding: 12px 14px; }
.statement-total { text-align: left; font-size: 1.2em; margin-top: 14px; padding-top: 14px; border-top: 2px solid #2b2925; }