/* CANTAIMY v7.6.123 — Guide image zoom and CANTAIMY-styled controls
   Mobile zoom is contained inside the guide frame; browser viewport is never modified. */

.guide-image-panel{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}

.guide-art{
  display:none;
  width:100%;
  max-width:100%;
  min-width:0;
  overflow:hidden;
}

html[lang="fi"] .guide-art-fi,
html[lang="en"] .guide-art-en,
html[lang="sv"] .guide-art-sv{
  display:block;
}

.guide-art picture{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
}

.guide-art img{
  display:block;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  height:auto !important;
  border-radius:12px;
}

@media (min-width:821px){
  #legalModal.guide-image-mode{
    padding:10px !important;
    overflow:hidden !important;
  }

  #legalModal.guide-image-mode .legal-modal-card{
    width:min(1540px,98vw) !important;
    height:auto !important;
    max-height:96vh !important;
    overflow:auto !important;
    padding:12px 14px 14px !important;
    transform:none !important;
  }

  #legalModal.guide-image-mode .legal-modal-head{
    position:sticky;
    top:0;
    z-index:5;
    margin:0 0 6px !important;
    padding:2px 0 6px;
    background:#07071d;
  }

  #legalModal.guide-image-mode .legal-tabs{
    position:sticky;
    top:48px;
    z-index:4;
    padding:0 0 7px !important;
    background:#07071d;
  }

  #legalModal.guide-image-mode .guide-image-panel{
    padding:4px 0 0 !important;
  }
}

@media (max-width:820px){
  #legalModal.guide-image-mode{
    width:100vw !important;
    max-width:100vw !important;
    padding:12px !important;
    overflow:hidden !important;
  }

  #legalModal.guide-image-mode .legal-modal-card{
    width:calc(100vw - 24px) !important;
    max-width:calc(100vw - 24px) !important;
    min-width:0 !important;
    padding:16px !important;
    padding-bottom:16px !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    transform:none !important;
  }

  #legalModal.guide-image-mode .guide-image-panel,
  #legalModal.guide-image-mode .guide-art,
  #legalModal.guide-image-mode .guide-art picture,
  #legalModal.guide-image-mode .guide-art img{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  #legalModal.guide-image-mode .guide-art img{
    height:auto !important;
    border-radius:10px;
    touch-action:pan-y;
    -webkit-user-drag:none;
    user-select:none;
  }
}


/* v7.6.123 — mobile guide controls */
.guide-mobile-controls{
  display:none;
}

.guide-scroll-frame{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow:visible;
}

@media (max-width:820px){
  #legalModal.guide-image-mode .guide-mobile-controls{
    display:flex;
    position:sticky;
    top:0;
    z-index:20;
    justify-content:flex-end;
    align-items:center;
    gap:8px;
    padding:2px 0 10px;
    background:linear-gradient(180deg,#07071d 78%,rgba(7,7,29,0));
  }

  #legalModal.guide-image-mode .guide-zoom-btn,
  #legalModal.guide-image-mode .guide-fit-btn{
    appearance:none;
    -webkit-appearance:none;
    min-height:38px;
    border:1px solid rgba(202,78,255,.72);
    border-radius:10px;
    padding:8px 14px 8px 36px;
    position:relative;
    color:#fff;
    font:800 13px/1 Inter,Arial,sans-serif;
    letter-spacing:.01em;
    cursor:pointer;
    box-shadow:0 0 18px rgba(205,55,255,.15), inset 0 0 0 1px rgba(255,255,255,.025);
    transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease,background .15s ease;
  }

  #legalModal.guide-image-mode .guide-zoom-btn{
    background:linear-gradient(135deg,#e83ad4,#7547ff);
  }

  #legalModal.guide-image-mode .guide-fit-btn{
    background:linear-gradient(135deg,rgba(20,15,53,.98),rgba(27,18,69,.98));
    border-color:rgba(0,220,255,.62);
    box-shadow:0 0 18px rgba(0,220,255,.10),inset 0 0 0 1px rgba(255,255,255,.025);
  }

  #legalModal.guide-image-mode .guide-zoom-btn::before,
  #legalModal.guide-image-mode .guide-fit-btn::before{
    position:absolute;
    left:13px;
    top:50%;
    transform:translateY(-50%);
    width:16px;
    text-align:center;
    font:900 18px/1 Arial,sans-serif;
  }

  #legalModal.guide-image-mode .guide-zoom-btn::before{content:"+";}
  #legalModal.guide-image-mode .guide-fit-btn::before{content:"↙";font-size:16px;}

  #legalModal.guide-image-mode .guide-zoom-btn:active,
  #legalModal.guide-image-mode .guide-fit-btn:active{
    transform:translateY(1px);
  }

  #legalModal.guide-image-mode .guide-zoom-btn:focus-visible,
  #legalModal.guide-image-mode .guide-fit-btn:focus-visible{
    outline:2px solid #24dcff;
    outline-offset:2px;
  }

  #legalModal.guide-image-mode .guide-scroll-frame{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow-x:hidden;
    overflow-y:visible;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }

  /* Important: these rules occur after the default 100% image rules. */
  #legalModal.guide-image-mode.guide-zoomed .guide-scroll-frame{
    overflow:auto !important;
    max-height:calc(100dvh - 178px);
    touch-action:pan-x pan-y;
  }

  #legalModal.guide-image-mode.guide-zoomed .guide-art{
    width:180% !important;
    max-width:none !important;
    min-width:180% !important;
    overflow:visible !important;
  }

  #legalModal.guide-image-mode.guide-zoomed .guide-art picture,
  #legalModal.guide-image-mode.guide-zoomed .guide-art img{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    height:auto !important;
    touch-action:pan-x pan-y !important;
  }

  /* Horizontal panning must remain inside the guide frame instead of being
     interpreted as browser navigation. */
  #legalModal.guide-image-mode.guide-zoomed .guide-scroll-frame{
    overflow-x:auto !important;
    overflow-y:auto !important;
    overscroll-behavior-x:contain !important;
    overscroll-behavior-y:contain !important;
    touch-action:pan-x pan-y !important;
  }
}