/* ===== Wall View — consolidated, scoped ===== */

/* Modal chrome */
#wv-modal{ position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; z-index:9999; }
#wv-modal.open{ display:block; }
#wv-modal .wv-dialog{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(1000px, 92vw); background:#fff; border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.2); overflow:hidden;
}
#wv-modal .wv-close{
  position:absolute;
  right:14px;
  top:14px;
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.35);
  background:rgba(248,250,252,0.95);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .2s ease, box-shadow .2s ease, border-color .2s ease;
  padding:0;
  z-index:60;
}
#wv-modal .wv-close span{
  position:relative;
  display:block;
  width:16px;
  height:16px;
}
#wv-modal .wv-close span::before,
#wv-modal .wv-close span::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:100%;
  height:2px;
  background:#1f2937;
  border-radius:999px;
  transform-origin:center;
  transform:translate(-50%, -50%) rotate(45deg);
}
#wv-modal .wv-close span::after{
  transform:translate(-50%, -50%) rotate(-45deg);
}
#wv-modal .wv-close:hover,
#wv-modal .wv-close:focus{
  background:#fff;
  border-color:rgba(59,130,246,0.45);
  box-shadow:0 10px 25px rgba(15,23,42,0.15);
  outline:none;
}
/* ===== CONTROL MENU - Clean Structure ===== */

/* Main controls container - always 2 rows */
#wv-modal .wv-controls{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:16px;
  border-bottom:1px solid #eee;
  background:#fff;
  position:relative;
  z-index:20;
  overflow:visible;
}

/* Row 1: Hide/Show button (left) and Close button (right) */
#wv-modal .wv-controls-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  flex:0 0 auto;
}

#wv-modal .wv-controls-header-left{
  display:flex;
  align-items:center;
  gap:12px;
  flex:0 0 auto;
}

#wv-modal .wv-controls-close{
  display:none;
  flex:0 0 auto;
}

#wv-modal .wv-controls-close .wv-close{
  position:static;
  transform:none;
  width:40px;
  height:40px;
}

/* Hide/Show toggle button */
#wv-modal .wv-controls-toggle,
#wv-modal .wv-controls-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 16px;
  border-radius:999px;
  background:#e5e7eb;
  color:#1f2937;
  font-weight:600;
  font-size:14px;
  line-height:1.4;
  transition:background .2s ease, color .2s ease;
  white-space:nowrap;
  flex-shrink:0;
  border:0;
  cursor:pointer;
  min-height:36px;
}

#wv-modal .wv-controls-toggle:hover{
  background:#d1d5db;
}

#wv-modal .wv-controls-toggle:focus{
  outline:2px solid #2563eb;
  outline-offset:2px;
}

#wv-modal .wv-controls-ghost{
  visibility:hidden;
  pointer-events:none;
}

/* Row 2: All control fields */
#wv-modal .wv-controls-content{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:flex-start;
  gap:16px;
  position:relative;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:rgba(148,163,184,0.45) transparent;
  padding-bottom:20px;
  margin:0 -16px;
  padding-left:16px;
  padding-right:16px;
  /* Ensure smooth scrolling and proper snap behavior */
  scroll-behavior:smooth;
  scroll-snap-type:x proximity;
  /* Ensure content doesn't get cut off at edges */
  scroll-padding-left:16px;
  scroll-padding-right:16px;
}

#wv-modal .wv-controls-content::-webkit-scrollbar{
  height:6px;
  background:transparent;
}

#wv-modal .wv-controls-content::-webkit-scrollbar-track{
  background:transparent;
  border:none;
}

#wv-modal .wv-controls-content::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,0.45);
  border-radius:999px;
  border:none;
}

#wv-modal .wv-controls.is-collapsed .wv-controls-content{
  display:none;
}

#wv-modal .wv-controls.is-collapsed{
  padding-bottom:16px;
}

/* Swipe hint - positioned at the bottom of Row 2 (controls-content) */
#wv-modal .wv-swipe-hint{
  display:none;
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:2px;
  font-size:12px;
  font-weight:600;
  color:#7885a6;
  letter-spacing:0.05em;
  white-space:nowrap;
  pointer-events:none;
  z-index:10;
  opacity:0;
  transition:opacity .3s ease;
  line-height:1.2;
  text-shadow:0 1px 2px rgba(255,255,255,0.8);
}

#wv-modal .wv-controls.has-overflow .wv-swipe-hint{
  display:block;
}

#wv-modal .wv-controls.has-overflow-right:not(.has-overflow-left) .wv-swipe-hint{
  opacity:0.85;
}

#wv-modal .wv-controls.has-overflow-left.has-overflow-right .wv-swipe-hint{
  opacity:0;
}

/* Wall width hint - positioned below the controls container */
#wv-modal .wv-wall-width-hint{
  display:block;
  position:relative;
  text-align:center;
  font-size:11px;
  font-weight:600;
  color:#7885a6;
  letter-spacing:0.02em;
  white-space:nowrap;
  pointer-events:none;
  padding:0;
  margin:2px 0 0 0;
  line-height:1.2;
  text-shadow:0 1px 2px rgba(255,255,255,0.8);
}

/* Overflow fade indicators - positioned to avoid overlapping buttons */
#wv-modal .wv-controls .wv-controls-content::after,
#wv-modal .wv-controls .wv-controls-content::before{
  content:"";
  position:absolute;
  top:0;
  bottom:20px;
  width:24px;
  pointer-events:none;
  opacity:0;
  transition:opacity .2s ease;
  z-index:1;
}

#wv-modal .wv-controls .wv-controls-content::before{
  left:0;
  background:linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
}

#wv-modal .wv-controls .wv-controls-content::after{
  right:0;
  background:linear-gradient(to left, rgba(255,255,255,0.7), rgba(255,255,255,0));
}

#wv-modal .wv-controls.has-overflow-right .wv-controls-content::after{
  opacity:1;
}

#wv-modal .wv-controls.has-overflow-left .wv-controls-content::before{
  opacity:1;
}

/* Control field - base styles - DYNAMIC: prevents overlap on any device */
#wv-modal .wv-field{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
  flex-shrink:0;
  flex-grow:0;
  min-width:max-content;
  width:max-content;
}

#wv-modal .wv-field label{
  font-weight:600;
  font-size:14px;
  white-space:nowrap;
  flex-shrink:0;
}

/* Field select elements - DYNAMIC: sizes based on content */
#wv-modal .wv-field select{
  min-height:38px;
  padding:6px 32px 6px 10px;
  border:1px solid #d1d5db;
  border-radius:8px;
  background:#fff;
  font-size:14px;
  font-weight:600;
  color:#1f2937;
  cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease;
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237885a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:12px 12px;
  flex-shrink:0;
  min-width:fit-content;
  width:auto;
}

#wv-modal .wv-field select:focus{
  outline:none;
  border-color:#2563eb;
  box-shadow:0 0 0 1px rgba(37,99,235,0.25);
}

/* Color field */
#wv-modal .wv-field.wv-field-colors{
  align-items:center;
  gap:8px;
}

#wv-modal .wv-color-controls{
  position:relative;
  display:flex;
  align-items:center;
  gap:0;
}

#wv-modal .wv-field.wv-field-colors label{
  margin-bottom:0;
}

#wv-modal .wv-color-toggle{
  width:38px;
  height:38px;
  min-height:38px;
  border-radius:8px;
  border:1px solid #d1d5db;
  padding:0;
  background:#ffffff;
  cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.6);
  flex-shrink:0;
}

#wv-modal .wv-color-toggle:focus{
  outline:2px solid #2563eb;
  outline-offset:2px;
}

/* Size field - separate field like others */
#wv-modal .wv-field.wv-field-size{
  align-items:center;
  gap:8px;
}

/* Size controls - visually separate the dropdown and button - DYNAMIC */
#wv-modal .wv-size-controls{
  display:flex;
  align-items:center;
  gap:16px;
  flex:0 0 auto;
  flex-shrink:0;
  min-width:max-content;
  width:max-content;
}

#wv-modal .wv-size-controls select{
  min-width:fit-content;
  width:auto;
}

#wv-modal .wv-unit-toggle{
  border:1px solid #d1d5db;
  background:#f8fafc;
  color:#1f2937;
  font-size:13px;
  font-weight:600;
  padding:0 16px;
  min-height:38px;
  height:38px;
  border-radius:8px;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease, box-shadow .2s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  flex-shrink:0;
  position:relative;
  z-index:5;
}

#wv-modal .wv-unit-toggle:hover{
  background:#e5e7eb;
}

#wv-modal .wv-unit-toggle:focus{
  outline:2px solid #2563eb;
  outline-offset:2px;
  border-color:#2563eb;
  box-shadow:0 0 0 2px rgba(37,99,235,0.12);
}
#wv-modal .wv-color-popover{
  position:fixed; top:50%; left:50%;
  background:#fff; border:1px solid #d1d5db; border-radius:8px;
  box-shadow:0 20px 35px rgba(15,23,42,0.25);
  padding:16px; z-index:200; display:none;
  width:240px; transform:translate(-50%, -50%);
  max-width: min(320px, 90vw);
  max-height:90vh; overflow:auto;
}
#wv-modal .wv-color-popover.open{ display:block; }
#wv-modal .wv-color-popover.mode-hex .wv-color-input-rgb{ display:none; }
#wv-modal .wv-color-popover.mode-rgb .wv-color-input-hex{ display:none; }
#wv-modal .wv-color-popover-inner{ display:flex; flex-direction:column; gap:12px; }
#wv-modal .wv-color-preview-large{
  width:40px; height:40px; border-radius:6px; border:1px solid #cbd5f5;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.6);
}
#wv-modal .wv-color-area-wrapper{ display:flex; flex-direction:column; gap:10px; }
#wv-modal .wv-color-area{
  position:relative;
  width:100%;
  padding-bottom:70%;
  border-radius:6px;
  overflow:hidden;
  cursor:crosshair;
  background:linear-gradient(90deg,#fff,rgba(255,255,255,0));
  touch-action:none;
}
#wv-modal .wv-color-area::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg,#000,rgba(0,0,0,0));
}
#wv-modal .wv-color-area-thumb{
  position:absolute; width:16px; height:16px;
  border-radius:50%; border:2px solid #fff;
  box-shadow:0 0 0 1px rgba(0,0,0,0.2);
  transform:translate(-50%, -50%);
  pointer-events:none;
}
#wv-modal .wv-color-hue{
  position:relative; height:14px; border-radius:999px;
  background:linear-gradient(90deg, red, yellow, lime, cyan, blue, magenta, red);
  cursor:pointer;
  touch-action:none;
}
#wv-modal .wv-color-hue-thumb{
  position:absolute; top:50%; width:16px; height:16px;
  border-radius:50%; border:2px solid #fff;
  box-shadow:0 0 0 1px rgba(0,0,0,0.25);
  transform:translate(-50%, -50%);
  pointer-events:none;
}
#wv-modal .wv-color-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px;
}
#wv-modal .wv-color-mode{
  display:inline-flex; gap:6px; padding:2px;
  background:#f3f4f6; border-radius:999px;
}
#wv-modal .wv-color-mode-btn{
  border:0; background:transparent; padding:4px 10px;
  font-size:12px; font-weight:600; color:#4b5563;
  border-radius:999px; cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
#wv-modal .wv-color-mode-btn.is-active{
  background:#2563eb; color:#fff;
  box-shadow:0 2px 6px rgba(37,99,235,0.35);
}
#wv-modal .wv-color-mode-btn:focus{ outline:2px solid #2563eb; outline-offset:1px; }
#wv-modal .wv-color-eyedropper{
  width:32px; height:32px;
  border-radius:6px; border:1px solid #d1d5db;
  background:#f9fafb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.5 1.75l2.75 2.75-6.5 6.5-2.25.5.5-2.25 6.5-6.5z'/%3E%3Cpath d='M4.5 8.5l3 3'/%3E%3Cpath d='M3 13l3.75-.75'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  cursor:pointer;
  transition:box-shadow .15s ease, border-color .15s ease;
}
#wv-modal .wv-color-eyedropper:hover{ box-shadow:0 2px 6px rgba(148,163,184,0.3); }
#wv-modal .wv-color-eyedropper:focus{ outline:2px solid #2563eb; outline-offset:2px; }
#wv-modal .wv-color-eyedropper.is-disabled{
  opacity:0.5; cursor:not-allowed; background-color:#f3f4f6;
  pointer-events:none;
}
#wv-modal .wv-color-inputs{
  display:flex; align-items:flex-end; gap:10px;
  justify-content:space-between;
}
#wv-modal .wv-color-input-hex{
  display:flex; flex-direction:column; gap:4px;
  font-size:11px; font-weight:600; color:#1f2937;
  flex:1;
}
#wv-modal .wv-color-input-hex input{
  width:100%; padding:6px 10px;
  border:1px solid #d1d5db; border-radius:6px;
  font-size:13px; text-transform:uppercase;
  background:#fff;
}
#wv-modal .wv-color-input-hex input.is-invalid{
  border-color:#ef4444; box-shadow:0 0 0 1px rgba(239,68,68,0.3);
}
#wv-modal .wv-color-input-rgb{
  display:flex; gap:8px;
}
#wv-modal .wv-color-input-rgb label{
  display:flex; flex-direction:column; align-items:flex-start;
  font-size:11px; font-weight:600; color:#1f2937;
}
#wv-modal .wv-color-input-rgb input{
  width:60px; margin-top:4px; padding:4px 6px;
  border:1px solid #d1d5db; border-radius:4px;
  font-size:13px; background:#fff;
}
#wv-modal .wv-swatches{ display:flex; flex-wrap:wrap; gap:8px; }
#wv-modal .wv-swatches .wv-swatch{
  width:28px; height:28px; border-radius:4px;
  border:1px solid rgba(0,0,0,0.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.6);
  cursor:pointer;
}
#wv-modal .wv-swatches .wv-swatch.is-active{
  border-color:#2563eb;
  box-shadow:0 0 0 2px rgba(37,99,235,0.25), inset 0 0 0 1px rgba(255,255,255,0.8);
}
#wv-modal .wv-stage{ position:relative; padding:12px 16px 18px; }

/* Stage / containment */
#wv-modal .wv-room-wrap{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#f8fafc;
  overflow:hidden;          /* containment za drag */
  border-radius:10px;
  z-index:1;                /* iznad tinte ako postoji */
}

/* Wall tint (po defaultu ispod room-a; menja boju pozadine zida) */
#wv-modal .wv-wall-color{
  position:absolute; 
  inset: 0;
  width:100%; 
  height:100%;
  z-index:0 !important; 
  pointer-events:none !important;
  mix-blend-mode:normal !important;
}

/* Room image (ispred tinte) */
#wv-modal #wv-room-img{
  position:relative !important;
  z-index:1 !important;
  display:block; width:100%; height:auto;
  object-fit:contain;
  object-position:bottom center; /* anchor room image to bottom to avoid gap */
  pointer-events:none !important;
  -webkit-user-drag:none !important;
  user-select:none !important;
}

/* Art image (draggable, iznad svega) */
#wv-modal #wv-art-img{
  position:absolute !important;
  z-index:2 !important;
  pointer-events:auto !important;
  cursor:grab !important;

  /* bez nativnog 'ghost' drag-a i selekcije teksta */
  -webkit-user-drag:none !important;
  user-select:none !important;

  /* CRITICAL: Transform is set by JS for zoom-proof centering */
  /* transform is controlled by JS: translate(-50%, -50%) for centering */

  /* CRITICAL: Fill calculated dimensions exactly - JS ensures correct aspect ratio */
  object-fit:fill !important;
  
  /* JS controls all sizing - no CSS limits to prevent scaling issues */
  box-shadow:0 8px 30px rgba(0,0,0,.2);
  border:none; border-radius:2px; background:transparent;
}
#wv-modal #wv-art-img.wv-dragging{ cursor:grabbing !important; }

/* Transparent image handling - remove box-shadow and enable auto-crop */
#wv-modal #wv-art-img.wv-transparent{
  box-shadow:none !important;
  /* object-fit and object-position will be controlled by JS for auto-cropping */
}

/* Smooth transition for object-position changes to prevent visible jump */
#wv-modal #wv-art-img{
  transition: object-position 0.1s ease-out;
}

/* Floor je ugašen (ne koristi se) */
#wv-modal .wv-floor{ display:none !important; }

/* (Opciono) dugme za otvaranje iz tema/produkta */
.wv-open.button{ margin-top:8px; }

/* ==== WV Fullscreen Modal Overrides ==== */
/* Fullscreen modal styles (overrides centered modal above) */
#wv-modal {
  position: fixed;
  /* Extend beyond viewport to cover behind status bar and browser UI */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Use both height and min-height for maximum compatibility */
  /* height ensures it fills, min-height ensures it never shrinks below viewport */
  height: 100vh;
  height: 100dvh; /* Dynamic viewport height - adapts to mobile browser UI */
  min-height: 100vh;
  min-height: 100dvh;
  width: 100vw;
  /* Solid background to completely hide website behind */
  background: rgba(0,0,0,.5);
  z-index: 9999;
  /* Prevent any overflow that could show website content */
  overflow: hidden;
  /* Prevent pull-to-refresh and overscroll behaviors */
  overscroll-behavior: none;
  overscroll-behavior-y: none;
  /* Prevent touch gestures that could scroll underlying page */
  touch-action: none;
  /* Ensure it covers everything including behind status bar */
  margin: 0;
  padding: 0;
}

/* dijalog ispunjava viewport i koristi flex kolonu */
#wv-modal .wv-dialog{
  position: absolute;
  inset: 0; /* Use inset: fills parent completely */
  /* Ensure it always fills the modal container */
  height: 100%;
  min-height: 100%;
  width: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  border-radius: 0;
  transform: none;

  display: flex;
  flex-direction: column;

  /* bez senke i sa bezbednim rubovima na mobilnim */
  box-shadow: none;
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0)
           env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
  /* Prevent overflow */
  overflow: hidden;
  /* Allow touch interactions within dialog */
  touch-action: auto;
}


/* scena popunjava SVE preostalo */
#wv-modal .wv-stage{
  position: relative;
  flex: 1 1 auto;
  padding: 0;
  min-height: 0; /* da flex child (.wv-room-wrap) može 100% visine */
}

/* kanvas za sobu je pun ekran (manje paddinga) */
#wv-modal .wv-room-wrap{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 0;
}

/* slika sobe popunjava wrap */
#wv-modal #wv-room-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center; /* ensure image sits on the bottom edge */
}

/* tinta (iza sobe) */
#wv-modal .wv-wall-color{
  position: absolute;
  inset: 0;
  z-index: 0 !important;
  pointer-events: none;
  mix-blend-mode: normal; /* naš novi model */
}

/* art je iznad */
#wv-modal #wv-art-img{
  position: absolute !important;
  z-index: 2 !important;
  cursor: grab !important;
  pointer-events: auto !important;
  -webkit-user-drag: none !important;
  user-select: none !important;
}

/* ===== RESPONSIVE STYLES - Clean Breakpoints ===== */

/* Mobile Portrait - Base styles (max-width: 768px) */
@media screen and (max-width: 768px) {
  /* Hide dialog close button, show in header */
  #wv-modal .wv-dialog > .wv-close{
    display:none;
  }

  #wv-modal .wv-controls-close{
    display:flex;
    align-items:center;
  }
  
  /* Ensure controls content has proper padding and scroll behavior on mobile */
  #wv-modal .wv-controls-content{
    /* Ensure proper padding to prevent cut-off */
    padding-left:16px;
    padding-right:16px;
    scroll-padding-left:16px;
    scroll-padding-right:16px;
    /* Better touch scrolling */
    -webkit-overflow-scrolling:touch;
    /* Ensure smooth scrolling */
    scroll-behavior:smooth;
  }

  /* Fields stack vertically on mobile - DYNAMIC: no fixed widths */
  #wv-modal .wv-field{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    flex:0 0 auto;
    flex-shrink:0;
    flex-grow:0;
    min-width:max-content;
    width:max-content;
    max-width:none;
    scroll-snap-align:start;
    /* Ensure fields have proper spacing and aren't cut off */
    padding-right:4px;
  }
  
  /* First field (Room) should have left padding to prevent cut-off */
  #wv-modal .wv-field:first-child{
    scroll-snap-align:start;
    padding-left:0;
  }
  
  /* Last field should have right padding to prevent cut-off */
  #wv-modal .wv-field:last-child{
    scroll-snap-align:end;
    padding-right:16px;
  }
  
  /* Ensure size field doesn't overlap - DYNAMIC */
  #wv-modal .wv-field.wv-field-size{
    flex:0 0 auto;
    flex-shrink:0;
    flex-grow:0;
    min-width:max-content;
    width:max-content;
  }

  #wv-modal .wv-field label{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:0.03em;
  }

  /* Select elements on mobile - DYNAMIC: respect content width */
  #wv-modal .wv-field select{
    width:auto;
    min-width:fit-content;
    max-width:100%;
    min-height:38px;
    /* Ensure select elements are fully visible and accessible */
    box-sizing:border-box;
  }
  
  /* Ensure Room field select is fully visible */
  #wv-modal .wv-field:first-child select{
    min-width:120px; /* Minimum width for Room dropdown */
  }

  /* Size field select - DYNAMIC */
  #wv-modal .wv-field.wv-field-size select{
    width:auto;
    min-width:fit-content;
    max-width:none;
  }

  #wv-modal .wv-field.wv-field-colors{
    align-items:flex-start;
  }

  #wv-modal .wv-field.wv-field-colors .wv-color-controls{
    width:100%;
  }

  #wv-modal .wv-field.wv-field-colors .wv-color-toggle{
    width:100%;
    min-height:38px;
  }

  /* Swipe hint positioning - at the bottom of Row 2 */
  #wv-modal .wv-swipe-hint{
    bottom:2px;
    right:16px;
    top:auto;
    transform:none;
    font-size:12px;
  }

  /* Disable fade indicators on mobile */
  #wv-modal .wv-controls .wv-controls-content::before,
  #wv-modal .wv-controls .wv-controls-content::after{
    display:none;
  }
}

/* Mobile Landscape - Small screens */
@media screen and (max-width: 768px) and (orientation: landscape) {
  #wv-modal .wv-controls {
    padding:8px 12px;
    gap:8px;
  }

  #wv-modal .wv-controls-content {
    gap:12px;
    /* Ensure proper padding in landscape mode */
    padding-left:16px;
    padding-right:16px;
    scroll-padding-left:16px;
    scroll-padding-right:16px;
  }

  #wv-modal .wv-field label {
    font-size:11px;
  }

  #wv-modal .wv-field select {
    min-height:36px;
    font-size:13px;
  }
}

/* Tablet (769px - 1024px) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  /* Show dialog close button */
  #wv-modal .wv-dialog > .wv-close{
    display:flex;
  }

  #wv-modal .wv-controls-close{
    display:none;
  }

  /* Keep 2-row structure, but optimize spacing */
  #wv-modal .wv-controls{
    flex-direction:column;
    gap:12px;
  }

  #wv-modal .wv-controls-content{
    justify-content:center;
    overflow-x:auto;
    overflow-y:hidden;
    margin:0;
    padding-left:0;
    padding-right:0;
  }

  /* Fields in single row on tablet - DYNAMIC */
  #wv-modal .wv-field{
    flex-direction:row;
    align-items:center;
    flex:0 0 auto;
    flex-shrink:0;
    flex-grow:0;
    min-width:max-content;
    width:max-content;
  }

  #wv-modal .wv-field label{
    font-size:14px;
    text-transform:none;
  }

  /* Enable swipe hint on tablet - JS will control visibility based on overflow */
  #wv-modal .wv-swipe-hint{
    display:block;
  }
}

/* Desktop (1025px+) */
@media screen and (min-width: 1025px) {
  /* Show dialog close button */
  #wv-modal .wv-dialog > .wv-close{
    display:flex;
    right:14px;
    top:14px;
  }

  #wv-modal .wv-controls-close{
    display:none;
  }

  /* Single row layout on desktop - Hide/Show button + all fields in one row */
  #wv-modal .wv-controls{
    flex-direction:row;
    align-items:center;
    gap:16px;
  }

  /* Hide/Show button in the same row */
  #wv-modal .wv-controls-header{
    flex:0 0 auto;
    width:auto;
    justify-content:flex-start;
  }

  /* Hide the close button in header (dialog close button is shown instead) */
  #wv-modal .wv-controls-header .wv-controls-close{
    display:none;
  }

  /* All control fields in the same row */
  #wv-modal .wv-controls-content{
    flex:1 1 auto;
    justify-content:center;
    flex-wrap:wrap;
    overflow:visible;
    margin:0;
    padding:0;
  }

  /* Fields in single row on desktop - DYNAMIC */
  #wv-modal .wv-field{
    flex-direction:row;
    align-items:center;
    flex:0 0 auto;
    flex-shrink:0;
    flex-grow:0;
    min-width:max-content;
    width:max-content;
  }

  #wv-modal .wv-field label{
    font-size:14px;
    text-transform:none;
  }

  #wv-modal .wv-swipe-hint{
    display:none !important;
  }

  /* Disable fade indicators on desktop */
  #wv-modal .wv-controls .wv-controls-content::before,
  #wv-modal .wv-controls .wv-controls-content::after{
    display:none;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  #wv-modal .wv-field select {
    min-height:44px;
  }

  #wv-modal .wv-controls-toggle {
    min-height:44px;
  }

  #wv-modal .wv-unit-toggle {
    min-height:44px;
  }

  #wv-modal .wv-color-toggle {
    min-width:44px;
    min-height:44px;
  }

  #wv-modal .wv-controls-close .wv-close {
    min-width:44px;
    min-height:44px;
  }
  
  /* Ensure controls content is properly scrollable on touch devices */
  #wv-modal .wv-controls-content {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
}

/* Very small screens - ensure Room field is always visible */
@media screen and (max-width: 400px) {
  #wv-modal .wv-controls-content {
    padding-left:12px;
    padding-right:12px;
    scroll-padding-left:12px;
    scroll-padding-right:12px;
    gap:12px;
  }
  
  #wv-modal .wv-field {
    gap:4px;
  }
  
  /* Ensure Room field has minimum width even on very small screens */
  #wv-modal .wv-field:first-child select {
    min-width:100px;
  }
}

/* Mobile-specific utility class */
#wv-modal.wv-mobile .wv-controls {
  touch-action:manipulation;
}

#wv-modal.wv-mobile #wv-art-img {
  touch-action:none;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

/* Poboljšaj performanse na mobilnim uređajima */
@media (max-width: 768px) {
  #wv-modal #wv-art-img {
    /* Transform is controlled by JS for centering - don't override */
    will-change: transform;
    /* Fill exact dimensions calculated by JS */
    object-fit: fill !important;
  }
  
  #wv-modal .wv-room-wrap {
    will-change: transform;
    transform: translateZ(0);
  }
}

/* Force proper rendering across all viewports and zoom levels */
@media screen {
  #wv-modal #wv-art-img {
    /* Fill the calculated container - JS maintains aspect ratio */
    object-fit: fill !important;
    image-rendering: auto;
    image-rendering: -webkit-optimize-contrast;
  }
}

/* blokiraj scroll pozadine dok je modal otvoren */
html.wv-lock, body.wv-lock { 
  overflow: hidden !important; 
  /* Prevent body scroll while modal is open */
  height: 100%;
  position: relative;
  /* Prevent pull-to-refresh gesture */
  overscroll-behavior: none !important;
  overscroll-behavior-y: none !important;
  /* Prevent touch gestures on body */
  touch-action: none !important;
  /* Prevent any scrolling or rubber-banding */
  overscroll-behavior-x: none !important;
}