/* Default slot placement (mobile keeps the original image-area position) */
.arf-room-preview-slot{
  display:flex;
  justify-content:flex-end;
  margin: 10px 0 8px;
}

/* Button on product page (use high priority to beat theme styles) */
body.single-product .arf-btn-view-room{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 16px;
  font-size:14px;
  line-height:1.2;
  border-radius: 12px;
  border:1px solid rgba(210,92,0,.28) !important;
  background:linear-gradient(135deg, #ff6a00 0%, #ff8a3d 52%, #ffb347 100%) !important;
  color:#fff !important;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 12px 28px rgba(255,106,0,.24);
  position:relative;
  overflow:hidden;
  text-transform:none !important;
  letter-spacing: normal !important;
}
body.single-product .arf-btn-view-room:hover{
  opacity:1;
  transform:translateY(-1px);
  box-shadow:0 16px 34px rgba(255,106,0,.28);
}

@media (min-width: 861px){
  body.single-product .lbs-options > .arf-room-preview-slot,
  body.single-product .summary .arf-room-preview-slot,
  body.single-product .entry-summary .arf-room-preview-slot{
    justify-content:flex-start;
    margin: 6px 0 14px;
  }
}

/* Visual brackets: [🖼️ View in Your Room] */
.arf-room-btn-text::before{content:"["; margin-right:4px; opacity:.9}
.arf-room-btn-text::after{content:"]"; margin-left:4px; opacity:.9}

/* Make sure the button is not forced full-width by themes */
body.single-product .arf-room-preview-slot .arf-btn-view-room{width:auto !important;}

/* Sweeping light highlight (infinite, ~1s sweep + ~1s pause) */
@media (prefers-reduced-motion: no-preference){
  .arf-btn-view-room.arf-shine::after{
    content:"";
    position:absolute;
    top:-60%;
    left:-40%;
    width:34%;
    height:220%;
    background: linear-gradient(120deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.55) 48%,
      rgba(255,255,255,0) 100%);
    transform: rotate(20deg);
    pointer-events:none;
    animation: arf-room-btn-shine 2s ease-in-out infinite;
  }
}

@keyframes arf-room-btn-shine{
  0%   { transform: translateX(-140%) rotate(20deg); opacity: 0; }
  10%  { opacity: 1; }
  50%  { transform: translateX(520%) rotate(20deg); opacity: 0; }
  100% { transform: translateX(520%) rotate(20deg); opacity: 0; }
}

/* Modal */
#arf-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,15,20,.62);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
  z-index:999999;
}
#arf-overlay.arf-hidden{display:none}
body.arf-modal-open{overflow:hidden}

/* Shell */
.arf-shell{
  width:min(1160px, 100%);
  height:min(92vh, 860px);
  background:#fff;
  border-radius:18px;
  box-shadow:0 18px 60px rgba(0,0,0,.35);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:420px;
}

.arf-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 12px;
  border-bottom:1px solid rgba(0,0,0,.08);
  background:#fff;
}
.arf-topbar-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.arf-toggle{
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  cursor:pointer;
  font-size:16px;
  line-height:1;
}
.arf-toggle:hover{background:rgba(0,0,0,.04)}
.arf-title{
  font-size:14px;
  font-weight:600;
  letter-spacing:.2px;
  color:#111;
}
.arf-close{
  width:36px;
  height:36px;
  border-radius:10px;
  border:none;
  background:transparent;
  font-size:22px;
  line-height:1;
  cursor:pointer;
}
.arf-close:hover{background:rgba(0,0,0,.06)}

/* Layout */
.arf-body{
  flex:1;
  display:grid;
  grid-template-columns:280px 1fr;
  min-height:0;
  position:relative;
}
.arf-side{
  width:auto;
  background:#fafafa;
  border-right:1px solid rgba(0,0,0,.08);
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:hidden;
}
.arf-shell.arf-panel-collapsed .arf-body{grid-template-columns:0 1fr}
.arf-shell.arf-panel-collapsed .arf-side{border-right:none}
.arf-shell.arf-panel-collapsed .arf-side > *{opacity:0; pointer-events:none}
.arf-shell.arf-panel-collapsed .arf-side{background:transparent}
.arf-side-controls{
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.arf-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:12px;
  color:#333;
}
.arf-field-row{
  display:flex;
  align-items:center;
  gap:10px;
}
.arf-field-label{
  flex:0 0 auto;
  min-width:72px;
  font-size:12px;
  color:#333;
}
.arf-field-row select,
.arf-field-row input[type=range]{
  flex:1 1 auto;
  min-width:0;
}
.arf-field select{
  height:34px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.18);
  padding:6px 10px;
  background:#fff;
}
.arf-side-actions{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.arf-action{
  width:100%;
  height:34px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.12);
  background:#111;
  color:#fff;
  font-weight:600;
  cursor:pointer;
}
.arf-action:hover{opacity:.92}

/* Warm primary action (Add to cart) */
.arf-action-primary{
  border:none;
  background:linear-gradient(135deg, #ff7a18, #ffb100);
  color:#fff;
  box-shadow:0 8px 18px rgba(255, 122, 24, .22);
}
.arf-action-primary:hover{opacity:1; filter:saturate(1.05) brightness(1.02)}
.arf-action-primary:disabled{
  box-shadow:none;
  background:rgba(0,0,0,.18);
  color:rgba(255,255,255,.9);
  cursor:not-allowed;
}

.arf-action-secondary{
  background:#fff;
  color:#111;
  border:1px solid rgba(0,0,0,.18);
}

.arf-cart-msg{
  min-height:16px;
  font-size:12px;
  color:#555;
  margin-top:-2px;
}
.arf-cart-msg.is-error{color:#b00020}
.arf-cart-msg.is-ok{color:#0b5}

.arf-upload{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:12px;
  color:#333;
}
.arf-upload input[type=file]{display:none}
.arf-upload-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:34px;
  border-radius:10px;
  border:1px dashed rgba(0,0,0,.24);
  background:#fff;
  cursor:pointer;
  padding:0 10px;
  text-align:center;
}
.arf-upload-btn:hover{background:rgba(0,0,0,.03)}

#arf-scale{width:100%}

/* Thumbnails */
.arf-thumbs{
  padding:0 12px 12px;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:10px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  flex:1;
  min-height:0;
}
.arf-thumb{
  border:none;
  padding:0;
  background:transparent;
  border-radius: 10px;
  overflow:hidden;
  cursor:pointer;
  outline:none;
}
.arf-thumb img{
  width:100%;
  height:78px;
  object-fit:cover;
  display:block;
}
.arf-thumb.is-active{box-shadow:0 0 0 3px rgba(17,17,17,.92)}
.arf-empty{
  grid-column:1 / -1;
  padding:10px;
  font-size:12px;
  color:#666;
  line-height:1.4;
}

/* Main preview */
.arf-main{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
  background:#fff;
  position:relative;
  min-width:0;
}
.arf-canvas{
  position:relative;
  flex:1;
  overflow:hidden;
  background:#f3f3f3;
  touch-action:none;
  cursor:grab;
}
.arf-canvas:active{cursor:grabbing}
.arf-room-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.arf-art-wrap{
  position:absolute;
  top:0;
  left:0;
  transform-origin:top left;
  cursor:grab;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-user-drag:none;
  will-change:transform;
  z-index:4;
}
.arf-art-wrap:active{cursor:grabbing}
.arf-art{
  display:block;
  width:320px;
  height:auto;
  max-width:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
  background:#e9e9e9;
}

/* Navigation */
.arf-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:38px;
  height:38px;
  border-radius: 10px;
  border:none;
  background:rgba(255,255,255,.92);
  box-shadow:0 2px 8px rgba(0,0,0,.18);
  cursor:pointer;
  z-index:6;
  font-size:22px;
  line-height:1;
}
.arf-nav:hover{background:#fff}
.arf-nav:disabled{opacity:.35;cursor:default}
.arf-prev{left:12px}
.arf-next{right:12px}

/* Footer hint */
.arf-hint{
  position:absolute;
  left:12px;
  right:12px;
  bottom:12px;
  padding:7px 10px;
  font-size:12px;
  color:#333;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  backdrop-filter:saturate(1.2) blur(8px);
  z-index:7;
}

/* Mobile */
@media (max-width: 860px){
  #arf-overlay{padding:0}
  /* iOS Safari viewport fix: JS writes --arf-vh using visualViewport/innerHeight */
  .arf-shell{
    /*
      IMPORTANT: keep the var-based height LAST so it wins over 100vh/100dvh on iOS Safari.
      This prevents the bottom thumbnails from being clipped behind the browser UI.
    */
    height:100vh;
    height:100dvh;
    height:calc(var(--arf-vh, 1vh) * 100);
    width:100vw;
    border-radius:0;
    min-height:0;
  }

  /* Make the header more compact on mobile to free vertical space */
  .arf-topbar{padding:0 10px; height:44px;}
  .arf-topbar-left{gap:8px;}
  .arf-title{font-size:13px}
  .arf-toggle{width:30px;height:30px;border-radius:10px;}
  .arf-close{width:32px;height:32px;border-radius:10px; font-size:20px;}

  /* Stacked layout: preview on top, room panel below */
  /* Put preview first, controls underneath */
  .arf-body{grid-template-columns:1fr; display:flex; flex-direction:column-reverse;}
  /*
    Mobile sizing strategy:
    - Keep the bottom panel only as tall as its content (no filler blank space).
    - Let the preview take the remaining height.
    This avoids the "preview too compressed" issue while still keeping
    the bottom thumbnails fully visible without vertical scrolling.
  */
  .arf-main{flex:1 1 auto; min-height:0;}

  /* Room panel: compact, always visible (expanded by default) */
  .arf-side{
    position:relative;
    display:flex;
    flex-direction:column;
    min-height:0;
    border-right:none;
    border-top:1px solid rgba(0,0,0,.10);
    box-shadow:0 -10px 26px rgba(0,0,0,.12);
    border-top-left-radius:16px;
    border-top-right-radius:16px;
    background:#fff;
    /* Keep content above the iOS home indicator / bottom bar */
    padding-bottom:calc(10px + env(safe-area-inset-bottom));
    box-sizing:border-box;
    overflow:hidden;
    flex:0 0 auto;
  }
  /* Collapsing the panel on mobile can re-introduce clipping; keep it visible. */
  .arf-shell.arf-panel-collapsed .arf-side{max-height:none}

  .arf-side-controls{
    padding:6px 10px 6px;
    display:flex;
    flex-direction:column;
    gap:6px;
    flex:0 0 auto;
    min-height:0;
  }

  .arf-field-label{min-width:58px}
  .arf-field select{height:30px; border-radius:12px; font-size:13px}

  .arf-side-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .arf-action{height:32px; border-radius:12px; font-size:13px}

  #arf-upload-wrap{order:4}
  .arf-upload-btn{height:30px; border-radius:12px; border-style:solid; border-color:rgba(0,0,0,.14); font-size:12px; padding:0 8px}

  /* Scale: inline label + slider */
  .arf-field-scale .arf-field-row{gap:10px}
  #arf-scale{margin:0}

  /* Thumbnails: compact horizontal strip */
  .arf-thumbs{
    display:flex;
    flex-direction:row;
    gap:8px;
    padding:0 12px 10px;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    flex:0 0 auto;
  }
  .arf-thumb{flex:0 0 auto; width:68px; scroll-snap-align:start; border-radius:12px}
  .arf-thumb img{height:48px}

  .arf-nav{width:34px;height:34px;border-radius:12px}
  .arf-hint{display:none}
}

/* Remove dead space on mobile when cart message is empty */
@media (max-width: 860px){
  #arf-cart-msg:empty{display:none}
}

/* Avoid showing broken-image icon/alt text while AJAX/fallback is preparing images. */
#arf-room-bg:not([src]),
#arf-room-bg[src=""],
#arf-art:not([src]),
#arf-art[src=""]{
  visibility:hidden;
}