/* BB 3D Bed Viewer — premium gallery controls.
   Selectors use ancestor + element + doubled class (high specificity) AND !important,
   so neither WoodMart's normal nor its !important button rules can override them. */

/* ---- badge on the main image (closed state) ---- */
.woocommerce-product-gallery button.bb3d-badge.bb3d-badge,
.wd-product-gallery button.bb3d-badge.bb3d-badge{
  -webkit-appearance:none!important; appearance:none!important;
  position:absolute!important; top:14px!important; left:14px!important; right:auto!important; bottom:auto!important; z-index:7!important;
  display:inline-flex!important; align-items:center!important; gap:8px!important;
  width:auto!important; min-width:0!important; max-width:none!important; height:auto!important; margin:0!important; float:none!important;
  background:linear-gradient(135deg,#123059,#0a1f44)!important; color:#fff!important;
  font-family:inherit!important; font-weight:600!important; font-size:12px!important; line-height:1!important;
  letter-spacing:.08em!important; text-transform:uppercase!important; text-shadow:none!important;
  padding:9px 15px!important; border-radius:999px!important; border:1px solid rgba(245,166,35,.55)!important;
  cursor:pointer!important; box-shadow:0 8px 20px rgba(10,31,68,.28)!important;
  transition:transform .18s, box-shadow .18s!important;
}
.woocommerce-product-gallery button.bb3d-badge.bb3d-badge:hover,
.wd-product-gallery button.bb3d-badge.bb3d-badge:hover{
  transform:translateY(-1px)!important; box-shadow:0 12px 26px rgba(10,31,68,.36)!important; color:#fff!important;
}
.bb3d-badge svg{ width:15px!important; height:15px!important; color:#f5a623!important; flex:none!important; }
.bb3d-badge .bb3d-360{ color:#f5a623!important; font-weight:700!important; }

/* ---- 360 thumbnail in the WoodMart thumb strip ---- */
.bb3d-thumb{ position:relative; cursor:pointer; overflow:hidden; }
.bb3d-thumb img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.bb3d-thumb::after{ content:""; position:absolute; inset:0; border:1.5px solid rgba(245,166,35,.55);
  border-radius:inherit; pointer-events:none; }
.bb3d-thumb .bb3d-chip{
  position:absolute; left:50%; bottom:7px; transform:translateX(-50%);
  background:linear-gradient(135deg,#123059,#0a1f44); color:#fff;
  font-size:10px; font-weight:700; letter-spacing:.05em; line-height:1;
  padding:4px 9px; border-radius:999px; pointer-events:none; white-space:nowrap;
  border:1px solid rgba(245,166,35,.6); box-shadow:0 3px 10px rgba(10,31,68,.3);
}
.bb3d-thumb .bb3d-chip b{ color:#f5a623; font-weight:800; }

/* ---- overlay that fills the main gallery stage ---- */
.bb3d-overlay{
  position:absolute!important; inset:0; z-index:20;
  background:radial-gradient(120% 95% at 50% 6%, #faf5ee 0%, #efe6d9 55%, #e4d8c6 100%);
  display:flex; flex-direction:column; opacity:0; visibility:hidden;
  transition:opacity .25s; overflow:hidden;
}
.bb3d-overlay.open{ opacity:1; visibility:visible; }
.bb3d-overlay::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  box-shadow:inset 0 0 0 1px rgba(245,166,35,.20), inset 0 -70px 90px -50px rgba(10,31,68,.14); }
.bb3d-overlay model-viewer{ width:100%!important; height:100%!important; background:transparent!important;
  --poster-color:transparent; position:relative; z-index:1; }

/* ---- close button ---- */
.bb3d-overlay button.bb3d-close.bb3d-close{
  -webkit-appearance:none!important; appearance:none!important;
  position:absolute!important; top:14px!important; right:14px!important; left:auto!important; bottom:auto!important; z-index:30!important;
  width:42px!important; height:42px!important; min-width:0!important; max-width:none!important; margin:0!important; padding:0!important; float:none!important;
  display:flex!important; align-items:center!important; justify-content:center!important; cursor:pointer!important;
  background:rgba(255,255,255,.78)!important; color:#0a1f44!important;
  border:1px solid rgba(10,31,68,.14)!important; border-radius:50%!important;
  font-family:inherit!important; font-size:24px!important; font-weight:300!important; line-height:1!important; letter-spacing:0!important;
  text-transform:none!important; text-shadow:none!important; box-shadow:0 6px 18px rgba(10,31,68,.18)!important;
  backdrop-filter:blur(8px); transition:background .16s, color .16s, transform .2s!important;
}
.bb3d-overlay button.bb3d-close.bb3d-close:hover{
  background:#0a1f44!important; color:#fff!important; transform:rotate(90deg)!important;
}

/* ---- drag hint ---- */
.bb3d-hint{
  position:absolute; top:16px; left:50%; transform:translateX(-50%); z-index:29;
  display:inline-flex; align-items:center; gap:8px; pointer-events:none;
  background:rgba(10,31,68,.88); color:#fff; font-family:inherit;
  font-weight:600; font-size:12px; line-height:1; letter-spacing:.02em;
  padding:9px 15px; border-radius:999px;
  border:1px solid rgba(245,166,35,.35); box-shadow:0 6px 16px rgba(10,31,68,.25);
  transition:opacity .4s;
}
.bb3d-hint svg{ width:15px; height:15px; color:#f5a623; }
.bb3d-hint.gone{ opacity:0; }

/* ---- auto-spin toggle ---- */
.bb3d-overlay button.bb3d-spin.bb3d-spin{
  -webkit-appearance:none!important; appearance:none!important;
  position:absolute!important; bottom:16px!important; left:50%!important; right:auto!important; top:auto!important; transform:translateX(-50%)!important; z-index:30!important;
  width:auto!important; min-width:0!important; max-width:none!important; height:auto!important; margin:0!important; float:none!important;
  display:inline-flex!important; align-items:center!important; gap:8px!important; cursor:pointer!important;
  padding:10px 18px!important; border-radius:999px!important;
  background:rgba(255,255,255,.88)!important; color:#0a1f44!important;
  border:1px solid rgba(10,31,68,.12)!important;
  font-family:inherit!important; font-weight:600!important; font-size:12.5px!important; line-height:1!important;
  letter-spacing:.07em!important; text-transform:uppercase!important; text-shadow:none!important;
  box-shadow:0 8px 22px rgba(10,31,68,.18)!important; backdrop-filter:blur(8px);
  transition:background .18s, color .18s, box-shadow .18s, transform .18s!important;
}
.bb3d-overlay button.bb3d-spin.bb3d-spin:hover{ transform:translateX(-50%) translateY(-1px)!important; }
.bb3d-overlay button.bb3d-spin.bb3d-spin.on{
  background:linear-gradient(135deg,#f6b63f,#f5a623)!important; color:#0a1f44!important;
  border-color:rgba(245,166,35,.65)!important; box-shadow:0 10px 26px rgba(245,166,35,.42)!important;
}
.bb3d-spin .bb3d-ic{ display:inline-block!important; width:14px!important; height:14px!important; flex:none!important; }
.bb3d-spin.on .bb3d-ic{ animation:bb3dspin 3.6s linear infinite; transform-origin:50% 50%; }
@keyframes bb3dspin{ to{ transform:rotate(360deg); } }

/* ---- loading state ---- */
.bb3d-loader{ position:absolute; inset:0; z-index:25; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px; pointer-events:none;
  transition:opacity .35s, visibility .35s; }
.bb3d-loader.done{ opacity:0; visibility:hidden; }
.bb3d-loader-ring{ width:46px; height:46px; border-radius:50%;
  border:2px solid rgba(10,31,68,.12); border-top-color:#f5a623; animation:bb3dspin .9s linear infinite; }
.bb3d-loader-text{ font-family:inherit; font-size:12px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:#0a1f44; }
.bb3d-loader-bar{ width:160px; height:3px; border-radius:3px; background:rgba(10,31,68,.10); overflow:hidden; }
.bb3d-loader-bar i{ display:block; height:100%; width:0; border-radius:3px;
  background:linear-gradient(90deg,#f6b63f,#f5a623); transition:width .25s ease; }
.bb3d-fail{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:26;
  text-align:center; font-family:inherit; font-size:14px; font-weight:600; color:#0a1f44; line-height:1.5;
  background:rgba(255,255,255,.85); padding:16px 22px; border-radius:14px;
  border:1px solid rgba(10,31,68,.10); box-shadow:0 8px 24px rgba(10,31,68,.12); }
.bb3d-fail small{ font-weight:400; color:#5b6474; }
.bb3d-fail .bb3d-fail-msg{ margin-bottom:12px; }
.bb3d-overlay .bb3d-fail button.bb3d-retry.bb3d-retry{
  -webkit-appearance:none!important; appearance:none!important; display:inline-flex!important;
  width:auto!important; min-width:0!important; margin:0!important; float:none!important;
  padding:10px 20px!important; border-radius:999px!important; cursor:pointer!important;
  background:linear-gradient(135deg,#123059,#0a1f44)!important; color:#fff!important;
  border:1px solid rgba(245,166,35,.55)!important; font-family:inherit!important;
  font-size:12px!important; font-weight:600!important; line-height:1!important;
  letter-spacing:.08em!important; text-transform:uppercase!important;
  box-shadow:0 6px 16px rgba(10,31,68,.25)!important;
}
.bb3d-fail[hidden], .bb3d-overlay button.bb3d-spin.bb3d-spin[hidden]{ display:none!important; }

/* ---- while 3D is open: hide badge, make the 360 thumb the active one ---- */
.bb3d-is-open button.bb3d-badge.bb3d-badge{ opacity:0!important; pointer-events:none!important; }
.bb3d-is-open .wd-gallery-thumb .wd-carousel-item:not(.bb3d-thumb){ opacity:.5; }
.bb3d-is-open .wd-gallery-thumb .wd-carousel-item:not(.bb3d-thumb):hover{ opacity:1; }
.bb3d-thumb.bb3d-thumb-on{ opacity:1!important; }
.bb3d-thumb.bb3d-thumb-on::after{ border:2px solid #f5a623; box-shadow:inset 0 0 0 2px rgba(255,255,255,.6); }
.bb3d-overlay{ cursor:grab; }
.bb3d-overlay:active{ cursor:grabbing; }

@media (prefers-reduced-motion:reduce){
  .bb3d-overlay, .bb3d-badge, .bb3d-close, .bb3d-spin{ transition:none!important; }
  .bb3d-spin.on .bb3d-ic, .bb3d-loader-ring{ animation:none!important; }
}