/* =========================================================
   SOL — "اصنع تصميمك" (Design-your-own ceramic mug)
   يعتمد على نفس متغيرات الألوان والخطوط الموجودة في style.css
   (--ink, --sand, --sun, --gold, --radius-*, --shadow-*...)
   حتى يندمج بصريًا مع باقي الموقع في الوضعين الليلي والنهاري.
========================================================= */

.design-your-own{
  padding: 4rem 1.2rem 5rem;
  max-width: 1180px;
  margin: 0 auto;
}
.design-section-sub{
  text-align: center;
  opacity: .75;
  max-width: 640px;
  margin: -0.6rem auto 2.2rem;
  font-size: .98rem;
}

.mug-designer{
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 1.8rem;
  align-items: start;
}
@media (max-width: 880px){
  .mug-designer{ grid-template-columns: 1fr; }
}

/* ---------- 3D viewer ---------- */
.mug-3d-stage{
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: var(--radius-l);
  background: radial-gradient(circle at 50% 38%, var(--sand), var(--stone) 88%);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  touch-action: none; /* نمنع تمرير الصفحة أثناء سحب الكوب على الجوال */
  cursor: grab;
}
.mug-3d-stage:active{ cursor: grabbing; }
.mug-3d-stage canvas{
  width: 100%;
  height: 100%;
  display: block;
}
.mug-3d-hint{
  position: absolute;
  bottom: .9rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(28,23,18,0.55);
  color: var(--pale);
  font-size: .78rem;
  padding: .35rem .9rem;
  border-radius: 999px;
  pointer-events: none;
  opacity: .9;
  transition: opacity .4s ease;
  white-space: nowrap;
}
.mug-3d-hint.is-hidden{ opacity: 0; }
.mug-3d-controls{
  position: absolute;
  top: .8rem;
  inset-inline-end: .8rem;
  display: flex;
  gap: .4rem;
}
.mug-3d-controls .icon-btn{
  width: 38px;
  height: 38px;
  background: rgba(251,246,234,0.85);
  backdrop-filter: blur(4px);
}
[data-theme="dark"] .mug-3d-controls .icon-btn{
  background: rgba(23,19,16,0.75);
}
.mug-3d-loading{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:.9rem; color: var(--ink); opacity:.7;
  background: var(--sand);
}

/* ---------- 2D design tools ---------- */
.design-canvas-wrap{
  background: var(--white);
  border: 1px solid var(--stone);
  border-radius: var(--radius-m);
  padding: .7rem;
  box-shadow: var(--shadow-card);
}
.design-canvas-wrap canvas{
  width: 100%;
  height: auto;
  border-radius: 8px;
  touch-action: none;
}
.design-canvas-label{
  text-align:center;
  font-size:.75rem;
  opacity:.6;
  margin:.5rem 0 0;
}

.design-toolbar{
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.design-toolbar-row{
  display:flex;
  align-items:center;
  gap:.5rem;
  width:100%;
  flex-wrap:wrap;
}
.design-upload-btn{
  position:relative;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
}
.design-bg-label{ font-size:.85rem; opacity:.8; }
.design-toolbar select,
.design-toolbar input[type="color"]{
  border:1px solid var(--stone);
  border-radius: var(--radius-s);
  padding:.35rem .5rem;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
}
.design-toolbar input[type="color"]{
  padding:.15rem;
  width:44px; height:36px;
  cursor:pointer;
}
.design-toolbar .icon-btn{
  width:40px; height:40px;
}

.design-price-line{
  margin: 1.1rem 0 .6rem;
  font-size: 1rem;
}
.design-price-line strong{ color: var(--sun); }

.design-hint-note,
.design-toolbar + .field-hint{
  margin-top:.6rem;
  font-size:.8rem;
  opacity:.65;
}

/* ---------- Admin: custom designs tab ---------- */
.admin-design-order{
  display:flex;
  gap:.8rem;
  align-items:flex-start;
  border:1px solid var(--stone);
  border-radius: var(--radius-s);
  padding:.7rem;
  margin-bottom:.7rem;
  background: var(--white);
}
.admin-design-order img{
  width:84px; height:84px;
  object-fit:cover;
  border-radius:8px;
  background:var(--sand);
}
.admin-design-order-body{ flex:1; font-size:.85rem; }
.admin-design-order-body .adr-meta{ opacity:.65; font-size:.75rem; margin:.15rem 0 .4rem; }
.admin-design-order-actions{
  display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.4rem;
}
.admin-design-order-actions a,
.admin-design-order-actions button{
  font-size:.75rem;
  padding:.3rem .6rem;
}
.admin-designs-empty{ opacity:.6; font-size:.85rem; text-align:center; padding:1rem 0; }
.admin-designs-cloud-note{
  font-size:.78rem;
  opacity:.65;
  margin-bottom:.8rem;
}