/* ==========================================================
   SPILLED INK – INTERIØRVISNING V4.1
   Godkjent retning:
   - rent veggfelt, ingen sort bakplate
   - ingen skygge bak kunstverket
   - rammevalg nederst
   - Romskala / Nærmere visning
   - kontrollpanel integrert i romvisningen
   ========================================================== */

.si-interior-modal{
  position:fixed !important;
  z-index:10050 !important;
  inset:0 !important;
  display:none;
  align-items:center !important;
  justify-content:center !important;
  padding:10px !important;
  background:rgba(0,0,0,.96) !important;
  backdrop-filter:blur(10px) !important;
}
.si-interior-modal.open{display:flex !important}

.si-interior-dialog{
  width:min(1540px,calc(100vw - 20px)) !important;
  max-height:97vh !important;
  overflow:auto !important;
  border:1px solid rgba(196,154,85,.22) !important;
  background:#080706 !important;
  box-shadow:none !important;
}

.si-interior-head{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:20px !important;
  padding:18px 28px 14px !important;
  border-bottom:1px solid rgba(196,154,85,.22) !important;
  background:#080706 !important;
}
.si-interior-headcopy{min-width:0}
.si-interior-head h2{
  margin:0 0 5px !important;
  color:var(--paper,#f0eadc) !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:27px !important;
  font-weight:400 !important;
}
.si-interior-breadcrumb{
  margin:0 0 10px !important;
  color:rgba(196,154,85,.78) !important;
  font-size:10px !important;
  letter-spacing:.04em !important;
}
.si-interior-head p{
  margin:0 !important;
  color:rgba(240,234,220,.66) !important;
  font-size:11px !important;
  line-height:1.5 !important;
}
.si-interior-close{
  flex:0 0 auto !important;
  width:38px !important;
  height:38px !important;
  border:1px solid rgba(240,234,220,.16) !important;
  background:transparent !important;
  color:var(--paper,#f0eadc) !important;
  font-size:22px !important;
}

.si-interior-body{
  padding:0 !important;
}

/* CLEAN room asset: old baked-in dark plate has been removed from the image itself. */
.si-photo-room{
  position:relative !important;
  width:100% !important;
  aspect-ratio:1359/765 !important;
  overflow:hidden !important;
  border:0 !important;
  background-image:url("../images/site/interior-room-clean-v41.webp") !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}

/* No artificial wall overlays are needed anymore. */
.si-photo-room::before,
.si-photo-room::after{
  content:none !important;
  display:none !important;
}

/* Artwork hangs directly on the wall. NO drop shadow. */
.si-photo-art{
  position:absolute !important;
  z-index:4 !important;
  left:50% !important;
  top:12.4% !important;
  width:var(--art-width) !important;
  transform:translateX(-50%) !important;
  padding:clamp(2px,.24vw,4px) !important;
  box-shadow:none !important;
  filter:none !important;
  transition:
    width .25s ease,
    background .25s ease,
    padding .25s ease !important;
}

.si-photo-art.frame-black{background:#111 !important}
.si-photo-art.frame-oak{background:#9a7045 !important}
.si-photo-art.frame-white{background:#eee !important}
.si-photo-art.frame-none{
  padding:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

.si-photo-mat{
  padding:6.2% !important;
  background:#eee9df !important;
}
.frame-none .si-photo-mat{
  padding:0 !important;
  background:transparent !important;
}
.si-photo-art img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  box-shadow:none !important;
  filter:none !important;
}

/* Small status text above the bottom control panel. */
.si-photo-scale{
  position:absolute !important;
  z-index:7 !important;
  right:18px !important;
  bottom:132px !important;
  padding:6px 9px !important;
  border:1px solid rgba(240,234,220,.08) !important;
  background:rgba(5,4,3,.64) !important;
  color:rgba(255,255,255,.68) !important;
  font-size:9px !important;
  line-height:1.4 !important;
  backdrop-filter:blur(5px) !important;
}

/* Bottom control strip – matches the approved mockup direction. */
.si-interior-controlbar{
  position:absolute !important;
  z-index:8 !important;
  left:24px !important;
  right:24px !important;
  bottom:18px !important;
  min-height:102px !important;
  display:grid !important;
  grid-template-columns:minmax(430px,1.45fr) minmax(360px,1fr) minmax(260px,.75fr) !important;
  gap:22px !important;
  align-items:center !important;
  padding:13px 18px !important;
  border:1px solid rgba(196,154,85,.26) !important;
  background:rgba(5,4,3,.90) !important;
  box-shadow:none !important;
  backdrop-filter:blur(12px) !important;
}

.si-control-section{min-width:0}
.si-control-title{
  display:block !important;
  margin:0 0 7px !important;
  color:rgba(240,234,220,.62) !important;
  font-size:9px !important;
  font-weight:800 !important;
  letter-spacing:.14em !important;
}

.si-frame-options{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:8px !important;
}
.si-frame-option{
  min-height:70px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  padding:8px !important;
  border:1px solid transparent !important;
  background:transparent !important;
  color:rgba(240,234,220,.78) !important;
  font-size:9px !important;
  letter-spacing:.02em !important;
  text-align:center !important;
}
.si-frame-option:hover,
.si-frame-option.active{
  border-color:rgba(221,180,106,.72) !important;
  color:#e0b86a !important;
  background:rgba(196,154,85,.035) !important;
}

.si-frame-swatch{
  width:58px !important;
  height:34px !important;
  display:grid !important;
  place-items:center !important;
  border:6px solid #111 !important;
  background:#eee9df !important;
}
.si-frame-swatch i{
  display:block !important;
  width:30px !important;
  height:14px !important;
  background:#d4d0c7 !important;
}
.swatch-black{border-color:#111 !important}
.swatch-oak{border-color:#9a7045 !important}
.swatch-white{border-color:#eee !important}
.swatch-none{
  border:1px solid rgba(240,234,220,.18) !important;
  background:#23201b !important;
}
.swatch-none i{
  width:46px !important;
  height:26px !important;
  background:
    radial-gradient(circle at 60% 35%,#777 0,#444 15%,#222 44%,#111 100%) !important;
}

.si-view-options{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:8px !important;
}
.si-view-option{
  min-height:70px !important;
  display:grid !important;
  grid-template-columns:34px 1fr !important;
  align-items:center !important;
  gap:10px !important;
  padding:10px 12px !important;
  border:1px solid rgba(240,234,220,.13) !important;
  background:rgba(255,255,255,.012) !important;
  color:rgba(240,234,220,.82) !important;
  text-align:left !important;
}
.si-view-option:hover,
.si-view-option.active{
  border-color:rgba(221,180,106,.72) !important;
  color:#e0b86a !important;
  background:rgba(196,154,85,.035) !important;
}
.si-view-option strong{
  display:block !important;
  margin:0 0 3px !important;
  color:inherit !important;
  font-size:10px !important;
}
.si-view-option small{
  display:block !important;
  color:rgba(240,234,220,.58) !important;
  font-size:8.5px !important;
  line-height:1.4 !important;
}

.si-view-icon{
  width:30px !important;
  height:30px !important;
  display:grid !important;
  place-items:center !important;
  border:1px solid currentColor !important;
  border-radius:50% !important;
  font-family:Georgia,serif !important;
  font-size:17px !important;
}
.room-icon{
  border-radius:2px !important;
  position:relative !important;
}
.room-icon::before{
  content:"" !important;
  width:15px !important;
  height:10px !important;
  border:1px solid currentColor !important;
}
.room-icon::after{
  content:"" !important;
  position:absolute !important;
  left:5px !important;
  right:5px !important;
  bottom:4px !important;
  height:1px !important;
  background:currentColor !important;
}

.si-interior-disclaimer-wrap{
  display:grid !important;
  grid-template-columns:24px 1fr !important;
  gap:9px !important;
  align-items:center !important;
  min-width:0 !important;
}
.si-info-mark{
  width:22px !important;
  height:22px !important;
  display:grid !important;
  place-items:center !important;
  border:1px solid rgba(196,154,85,.45) !important;
  border-radius:50% !important;
  color:#e0b86a !important;
  font-family:Georgia,serif !important;
  font-style:italic !important;
}
.si-interior-disclaimer{
  margin:0 !important;
  color:rgba(240,234,220,.57) !important;
  font-size:8.7px !important;
  line-height:1.5 !important;
  text-align:left !important;
}

/* Responsive layout */
@media(max-width:1100px){
  .si-interior-controlbar{
    grid-template-columns:1fr 1fr !important;
  }
  .si-interior-disclaimer-wrap{
    grid-column:1/-1 !important;
  }
}

@media(max-width:760px){
  .si-interior-modal{padding:4px !important}
  .si-interior-dialog{width:calc(100vw - 8px) !important}
  .si-interior-head{padding:13px 14px 11px !important}
  .si-interior-head h2{font-size:22px !important}

  .si-photo-room{
    aspect-ratio:4/3 !important;
    background-size:cover !important;
    background-position:center !important;
  }
  .si-photo-art{
    top:12% !important;
  }
  .si-photo-scale{
    right:8px !important;
    bottom:255px !important;
  }
  .si-interior-controlbar{
    left:6px !important;
    right:6px !important;
    bottom:6px !important;
    min-height:0 !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    padding:10px !important;
  }
  .si-frame-options{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }
  .si-frame-swatch{
    width:44px !important;
    height:28px !important;
    border-width:5px !important;
  }
  .si-view-option{
    min-height:58px !important;
  }
  .si-interior-disclaimer-wrap{
    grid-column:auto !important;
  }
}

/* ==========================================================
   SPILLED INK – MOBILE INTERIOR FIX FINAL
   On phones the JS moves .si-interior-controlbar OUTSIDE
   .si-photo-room. These rules then render it below the room.
   Desktop layout remains unchanged.
   ========================================================== */
@media(max-width:760px){

  .si-interior-modal{
    align-items:flex-start !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
  }

  .si-interior-dialog{
    max-height:none !important;
    height:auto !important;
    overflow:visible !important;
    margin:4px auto 20px !important;
  }

  .si-interior-body{
    display:block !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
    padding:0 !important;
  }

  /* Room is now a clean, standalone image area. */
  .si-photo-room{
    position:relative !important;
    width:100% !important;
    aspect-ratio:4/3 !important;
    overflow:hidden !important;
    margin:0 !important;
  }

  /* Status badge belongs inside the room, near its lower edge. */
  .si-photo-scale{
    right:8px !important;
    bottom:8px !important;
  }

  /*
    Critical mobile rule:
    the control bar is no longer an overlay. It is a normal block
    immediately below the room.
  */
  .si-mobile-interior-layout .si-interior-controlbar{
    position:static !important;
    z-index:auto !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    inset:auto !important;
    width:100% !important;
    min-height:0 !important;
    height:auto !important;
    max-height:none !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
    align-items:stretch !important;
    margin:0 !important;
    padding:12px 10px 14px !important;
    border-left:0 !important;
    border-right:0 !important;
    border-bottom:0 !important;
    background:#080706 !important;
    backdrop-filter:none !important;
    transform:none !important;
  }

  .si-mobile-interior-layout .si-frame-options{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }

  .si-mobile-interior-layout .si-view-options{
    grid-template-columns:1fr 1fr !important;
  }

  .si-mobile-interior-layout .si-interior-disclaimer-wrap{
    grid-column:auto !important;
    padding:2px 2px 0 !important;
  }
}