/* Dezayer 3D Viewer modal + control-panel styles.
 *
 * Loaded only on pages that include partials/viewer-3d-modal.blade.php
 * (currently the product detail page). Zero impact on pages that don't.
 *
 * Layout:
 *   .v3d-modal           — fixed full-viewport overlay, dim backdrop
 *   .v3d-dialog          — the actual panel; flexes column on mobile,
 *                          row on desktop (canvas left, controls right)
 *   .v3d-canvas-wrap     — holds the WebGL canvas + loader overlay
 *   .v3d-controls        — collapsible right sidebar (desktop) /
 *                          bottom drawer (mobile)
 */

.v3d-modal{
  position:fixed; inset:0; z-index:2000;
  display:flex; align-items:stretch; justify-content:center;
  background:rgba(20,16,12,0.78);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.v3d-modal[hidden]{display:none}

.v3d-dialog{
  position:relative;
  flex:1; max-width:1400px; margin:auto;
  display:flex; flex-direction:row;
  background:linear-gradient(145deg,#1a1410 0%,#0d0a07 100%);
  border-radius:14px; overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,.5);
}
@media(min-width:1100px){ .v3d-dialog{ margin:32px; max-height:calc(100vh - 64px); } }

.v3d-canvas-wrap{
  position:relative; flex:1; min-height:60vh;
  background:radial-gradient(ellipse at center, #2a221c 0%, #0d0a07 75%);
  overflow:hidden;
}
.v3d-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  touch-action:none;   /* OrbitControls handles pointer events */
  display:block;
}

/* ─── Header: title + close ─────────────────────────────────────────── */
.v3d-header{
  position:absolute; top:0; left:0; right:0; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
  background:linear-gradient(180deg, rgba(13,10,7,0.8), rgba(13,10,7,0));
  pointer-events:none;
}
.v3d-header > *{ pointer-events:auto; }
.v3d-title{
  font-family:var(--fd, 'Cormorant Garamond', serif);
  font-size:18px; font-weight:500; color:#fff5d8;
  letter-spacing:0.3px;
  max-width:55vw;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.v3d-close{
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,0.10); color:#fff;
  border:1px solid rgba(255,255,255,0.16);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .15s;
}
.v3d-close:hover{ background:rgba(255,255,255,0.18); }
.v3d-close svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }

/* ─── Loader overlay ─────────────────────────────────────────────────── */
.v3d-loader{
  position:absolute; inset:0; z-index:3;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px;
  background:radial-gradient(ellipse at center, rgba(13,10,7,0.5), rgba(13,10,7,0.92));
  color:#fff5d8;
}
.v3d-loader[hidden]{ display:none; }
.v3d-spinner{
  width:48px; height:48px; border-radius:50%;
  border:3px solid rgba(200,166,104,0.25);
  border-top-color:#C8A24E;
  animation:v3d-spin 0.9s linear infinite;
}
@keyframes v3d-spin{ to { transform:rotate(360deg); } }
.v3d-loader-text{
  font-family:var(--fb, 'Inter', sans-serif);
  font-size:13px; color:rgba(255,245,216,0.8); letter-spacing:0.4px;
}
.v3d-loader-progress{
  width:200px; height:5px; background:rgba(255,255,255,0.08); border-radius:3px; overflow:hidden;
}
.v3d-loader-bar{
  height:100%; width:0%;
  background:linear-gradient(90deg,#C8A24E,#9E7E37);
  transition:width .2s linear;
}
.v3d-error{
  position:absolute; inset:0; z-index:3;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; padding:30px;
  background:rgba(13,10,7,0.92); color:#ffeede; text-align:center;
}
.v3d-error[hidden]{ display:none; }
.v3d-error svg{ width:32px; height:32px; color:#e8a55a; stroke:currentColor; fill:none; stroke-width:1.6; }

/* ─── Control panel ──────────────────────────────────────────────────── */
.v3d-controls{
  width:280px; flex:0 0 280px;
  background:rgba(255,250,238,0.96);
  display:flex; flex-direction:column;
  border-left:1px solid rgba(200,166,104,0.18);
}
.v3d-section{
  padding:16px 18px;
  border-bottom:1px solid rgba(0,0,0,0.06);
}
.v3d-section-h{
  font-family:var(--fb, 'Inter', sans-serif);
  font-size:11px; font-weight:600; letter-spacing:1.4px;
  text-transform:uppercase; color:#7a6a3f;
  margin:0 0 10px;
}

.v3d-btn-row{
  display:flex; flex-wrap:wrap; gap:6px;
}
.v3d-pill{
  appearance:none; border:1px solid rgba(0,0,0,0.10);
  background:#fff; color:#2a221c;
  padding:7px 11px; border-radius:24px;
  font-family:var(--fb, sans-serif); font-size:12px; font-weight:500;
  cursor:pointer; transition:all .15s;
  display:inline-flex; align-items:center; gap:6px;
}
.v3d-pill:hover{ border-color:#C8A24E; color:#9E7E37; }
.v3d-pill.is-active{
  background:linear-gradient(135deg,#C8A24E,#9E7E37);
  border-color:#9E7E37; color:#fff;
}
.v3d-pill[aria-pressed="true"]{
  background:linear-gradient(135deg,#C8A24E,#9E7E37);
  border-color:#9E7E37; color:#fff;
}

/* Background swatch buttons */
.v3d-swatch{
  width:30px; height:30px; border-radius:50%;
  border:2px solid rgba(0,0,0,0.10); cursor:pointer;
  padding:0; transition:transform .12s, border-color .15s;
}
.v3d-swatch:hover{ transform:scale(1.10); border-color:#C8A24E; }
.v3d-swatch.is-active{ border-color:#9E7E37; transform:scale(1.12); }
.v3d-swatch.is-checker{
  background:
    conic-gradient(#eee 0% 25%, #ccc 0% 50%, #eee 0% 75%, #ccc 0% 100%);
  background-size:16px 16px;
}

/* Footer toolbar — reset / fullscreen / screenshot */
.v3d-toolbar{
  padding:14px 18px;
  display:flex; gap:8px; flex-wrap:wrap;
  border-top:1px solid rgba(0,0,0,0.06);
  margin-top:auto;
  background:#fff;
}
.v3d-tool{
  flex:1; min-width:80px;
  padding:10px 8px; border-radius:8px;
  background:#fff; border:1px solid rgba(0,0,0,0.10);
  color:#2a221c; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  font-family:var(--fb, sans-serif); font-size:10.5px; font-weight:600;
  letter-spacing:0.6px; text-transform:uppercase;
  transition:all .15s;
}
.v3d-tool:hover{ border-color:#C8A24E; color:#9E7E37; }
.v3d-tool[aria-pressed="true"]{ background:#FBF5E8; border-color:#C8A24E; color:#9E7E37; }
.v3d-tool svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }

/* ─── Mobile layout ──────────────────────────────────────────────────── */
@media(max-width:900px){
  .v3d-dialog{ flex-direction:column; border-radius:0; margin:0; max-height:none; height:100dvh; }
  .v3d-canvas-wrap{ flex:1; min-height:0; }
  .v3d-controls{
    width:100%; flex:0 0 auto; max-height:42dvh; overflow-y:auto;
    border-left:none; border-top:1px solid rgba(200,166,104,0.18);
  }
  .v3d-toolbar{ position:sticky; bottom:0; }
  .v3d-title{ max-width:60vw; font-size:16px; }
}

/* The product page CTA — premium gold gradient */
.v3d-cta-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 22px;
  background:linear-gradient(135deg,#C8A24E,#9E7E37);
  color:#1a1410;
  border:none; border-radius:50px;
  font-family:var(--fb, sans-serif); font-size:13.5px; font-weight:600;
  letter-spacing:0.9px; text-transform:uppercase;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(200,166,104,0.32);
  transition:transform .15s, box-shadow .15s;
}
.v3d-cta-btn:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(200,166,104,0.45); }
.v3d-cta-btn:active{ transform:translateY(0); }
.v3d-cta-btn svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; }