/* ===== Az Market — Design Tokens ===== */
:root{
  --bg: #0a0e13;
  --bg-elevated: #101720;
  --bg-card: #131b24;
  --text: #eaf2fa;
  --text-muted: #7e93a8;
  --blue: #2f8eff;
  --blue-soft: rgba(47,142,255,.16);
  --green: #2ed9a3;
  --green-soft: rgba(46,217,163,.16);
  --border: #1c2733;
  --radius: 18px;
  --font-head: 'Cairo', sans-serif;
  --font-body: 'Tajawal', sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;}
}

/* ===== Animated background field ===== */
.bg-field{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.35;will-change:transform;}
.blob-blue{
  width:520px;height:520px;background:var(--blue);
  top:-160px;right:-120px;
  animation:drift1 22s ease-in-out infinite;
}
.blob-green{
  width:420px;height:420px;background:var(--green);
  bottom:-140px;left:-100px;
  animation:drift2 26s ease-in-out infinite;
}
@keyframes drift1{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(-40px,60px) scale(1.15);}
}
@keyframes drift2{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(50px,-40px) scale(1.1);}
}
.grid-overlay{
  position:absolute;inset:0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size:48px 48px;
  opacity:.25;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 90%);
}

/* ===== Hero ===== */
.hero{
  position:relative;z-index:1;
  padding:64px 20px 32px;
  text-align:center;
}
.logo-wrap{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  opacity:0;
  animation:heroIn .9s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes heroIn{
  from{opacity:0;transform:translateY(14px) scale(.96);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
.logo-mark{color:var(--blue);}
.logo-diamond{stroke:var(--blue);animation:spinSlow 16s linear infinite;transform-origin:32px 32px;}
.logo-a{stroke:var(--green);
  stroke-dasharray:120; stroke-dashoffset:120;
  animation:drawA 1.1s .35s ease-out forwards;
}
@keyframes drawA{to{stroke-dashoffset:0;}}
@keyframes spinSlow{to{transform:rotate(360deg);}}

.logo-word{
  font-family:var(--font-head);
  font-weight:900;
  font-size:clamp(2.2rem,7vw,3.4rem);
  margin:4px 0 0;
  letter-spacing:.5px;
}
.logo-word span{
  background:linear-gradient(90deg,var(--blue),var(--green));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.tagline{
  color:var(--text-muted);
  font-size:1.05rem;
  margin-top:6px;
  opacity:0;
  animation:heroIn .9s .25s cubic-bezier(.2,.8,.2,1) forwards;
}

/* ===== Menu grid ===== */
.menu{
  position:relative;z-index:1;
  max-width:920px;
  margin:0 auto;
  padding:24px 20px 60px;
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}
@media(min-width:640px){
  .menu{grid-template-columns:1fr 1fr;}
}
.menu-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:26px 22px;
  display:flex;flex-direction:column;gap:8px;align-items:flex-start;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.menu-card:hover, .menu-card:focus-visible{
  transform:translateY(-4px);
  border-color:var(--blue);
  box-shadow:0 12px 32px -8px var(--blue-soft);
}
.card-icon{font-size:1.8rem;}
.card-title{
  font-family:var(--font-head);
  font-weight:800;
  font-size:1.25rem;
}
.card-sub{color:var(--text-muted);font-size:.92rem;line-height:1.6;}

.card-market:hover{box-shadow:0 12px 32px -8px var(--blue-soft);}
.card-services:hover{box-shadow:0 12px 32px -8px var(--green-soft);border-color:var(--green);}
.card-request:hover{box-shadow:0 12px 32px -8px var(--green-soft);border-color:var(--green);}
.card-sell:hover{box-shadow:0 12px 32px -8px var(--blue-soft);}

/* ===== Footer ===== */
.site-footer{
  position:relative;z-index:1;
  text-align:center;
  padding:24px 20px 40px;
  color:var(--text-muted);
  font-size:.82rem;
}
.footer-admin-link{
  color:var(--text-muted);
  opacity:.8;
}
.footer-admin-link:hover{opacity:1;}

/* ===== Shared page shell (used by other pages) ===== */
.page{
  position:relative;z-index:1;
  max-width:960px;margin:0 auto;
  padding:28px 20px 60px;
}
.page-header{
  display:flex;align-items:center;gap:14px;
  margin-bottom:22px;
}
.back-btn{
  width:40px;height:40px;border-radius:12px;
  background:var(--bg-card);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;flex-shrink:0;
  transition:border-color .2s ease;
}
.back-btn:hover{border-color:var(--blue);}
.page-title{
  font-family:var(--font-head);font-weight:800;
  font-size:1.5rem;margin:0;
}
.page-sub{color:var(--text-muted);margin:2px 0 0;font-size:.92rem;}

.chip-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px;}
.chip{
  padding:8px 16px;border-radius:999px;
  background:var(--bg-card);border:1px solid var(--border);
  font-size:.88rem;color:var(--text-muted);
  cursor:pointer;transition:all .2s ease;
  font-family:var(--font-body);
}
.chip.active, .chip:hover{
  border-color:var(--blue);color:var(--text);
  background:var(--blue-soft);
}

.grid{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
}
@media(min-width:640px){.grid{grid-template-columns:1fr 1fr 1fr;}}

.product-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .2s ease, border-color .2s ease;
}
.product-card:hover{transform:translateY(-3px);border-color:var(--blue);}
.product-img{
  width:100%;aspect-ratio:1/1;object-fit:cover;
  background:var(--bg-elevated);
}
.product-body{padding:12px 14px 16px;display:flex;flex-direction:column;gap:4px;flex:1;}
.product-title{font-weight:700;font-size:.95rem;}
.product-price{
  color:var(--green);font-weight:800;font-family:var(--font-head);
  font-size:1.02rem;margin-top:auto;
}
.empty-state{
  text-align:center;padding:60px 20px;color:var(--text-muted);
}

/* ===== Forms ===== */
.form-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:24px;
  display:flex;flex-direction:column;gap:16px;
  max-width:560px;
}
.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-size:.88rem;color:var(--text-muted);}
.field input, .field textarea, .field select{
  background:var(--bg-elevated);border:1px solid var(--border);
  border-radius:12px;padding:12px 14px;
  color:var(--text);font-family:var(--font-body);font-size:.95rem;
  resize:vertical;
}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none;border-color:var(--blue);
}
.field input[type="file"]{padding:8px;}

.btn{
  border:none;border-radius:12px;padding:13px 20px;
  font-family:var(--font-head);font-weight:800;font-size:.98rem;
  cursor:pointer;
  background:linear-gradient(90deg,var(--blue),var(--green));
  color:#04121d;
  transition:transform .15s ease, filter .15s ease;
}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
.btn:disabled{opacity:.6;cursor:default;transform:none;}
.btn-secondary{
  background:var(--bg-elevated);color:var(--text);border:1px solid var(--border);
}

.status-msg{
  padding:12px 14px;border-radius:12px;font-size:.9rem;display:none;
}
.status-msg.show{display:block;}
.status-msg.ok{background:var(--green-soft);color:var(--green);}
.status-msg.err{background:rgba(255,90,90,.15);color:#ff8080;}

/* ===== Product detail / modal ===== */
.detail-gallery{
  display:flex;gap:10px;overflow-x:auto;margin-bottom:16px;
  scroll-snap-type:x mandatory;
}
.detail-gallery img{
  width:80%;flex-shrink:0;border-radius:var(--radius);
  scroll-snap-align:start;aspect-ratio:1/1;object-fit:cover;
  background:var(--bg-elevated);
}
.detail-price{
  font-family:var(--font-head);font-weight:900;color:var(--green);
  font-size:1.6rem;
}
.detail-desc{color:var(--text-muted);line-height:1.8;white-space:pre-wrap;}