/* V5.5 RC — modal fit, close positioning, Docebo placement and floating-control fixes. */

/* Dialog layer always above the fixed header. The rounded panel itself never owns a scrollbar. */
#solutionModal,
#governanceModal,
#guideModal{
  z-index:5000!important;
  box-sizing:border-box!important;
  align-items:center!important;
  justify-content:center!important;
  padding:18px!important;
  overflow:hidden!important;
}

#solutionModal .modal-panel,
#governanceModal .governance-panel,
#guideModal .guide-panel{
  box-sizing:border-box!important;
  position:relative!important;
  width:min(1120px,calc(100vw - 36px))!important;
  max-width:calc(100vw - 36px)!important;
  max-height:calc(100dvh - 36px)!important;
  margin:0 auto!important;
  overflow:hidden!important;
  border-radius:28px!important;
}

/* Close is always anchored to the top-right corner of the dialog. */
#solutionModal .modal-close,
#governanceModal .modal-close,
#guideModal .modal-close{
  position:absolute!important;
  top:14px!important;
  right:14px!important;
  bottom:auto!important;
  left:auto!important;
  float:none!important;
  margin:0!important;
  z-index:60!important;
}

/* SOLUTIONS — fit a normal desktop viewport without an outer scrollbar. */
#solutionModal .modal-panel{
  height:min(700px,calc(100dvh - 36px))!important;
}
#solutionModal .solution-detail{
  height:100%!important;
  min-height:0!important;
  max-height:100%!important;
  overflow:hidden!important;
  align-items:stretch!important;
}
#solutionModal .solution-visual{
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
  padding:48px 44px 38px!important;
}
#solutionModal .solution-detail-copy{
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  padding:44px 48px 34px!important;
  scrollbar-width:thin;
  scrollbar-color:rgba(34,18,71,.25) transparent;
}
#solutionModal .solution-detail-copy::-webkit-scrollbar{width:7px}
#solutionModal .solution-detail-copy::-webkit-scrollbar-track{background:transparent;margin:22px 0}
#solutionModal .solution-detail-copy::-webkit-scrollbar-thumb{background:rgba(34,18,71,.22);border-radius:999px}

/* Docebo now uses the empty area of the blue Digital Learning column. */
#solutionModal .solution-visual .docebo-reference{
  order:8;
  margin:auto 0 18px!important;
  padding:18px 20px!important;
  border:1px solid rgba(255,255,255,.17)!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.08)!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
#solutionModal .solution-visual .docebo-reference[hidden]{display:none!important}
#solutionModal .solution-visual .docebo-reference .docebo-tag{
  color:#ef92d2!important;
  font-size:10px!important;
  margin-bottom:6px!important;
}
#solutionModal .solution-visual .docebo-reference h5{
  color:#fff!important;
  font-size:16px!important;
  line-height:1.24!important;
  margin:0 0 7px!important;
}
#solutionModal .solution-visual .docebo-reference p{
  color:rgba(255,255,255,.72)!important;
  font-size:12px!important;
  line-height:1.52!important;
  margin:0!important;
}
#solutionModal .solution-visual .docebo-reference a{display:none!important}
#solutionModal .solution-visual .visual-mini{order:9;margin-top:0!important}

/* GOVERNANCE — compact enough for desktop; any necessary scroll stays inside content, not on the rounded edge. */
#governanceModal .governance-panel.governance-v55{
  height:min(636px,calc(100dvh - 36px))!important;
  max-height:calc(100dvh - 36px)!important;
  overflow:hidden!important;
  grid-template-columns:minmax(330px,.78fr) minmax(0,1.22fr)!important;
}
#governanceModal .governance-modal-top{
  height:100%!important;
  min-height:0!important;
  grid-row:1/4!important;
  padding:48px 42px 38px!important;
}
#governanceModal .governance-modal-body{
  min-width:0!important;
  min-height:0!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  padding:42px 54px 8px!important;
  scrollbar-width:thin;
  scrollbar-color:rgba(34,18,71,.25) transparent;
}
#governanceModal .governance-modal-body::-webkit-scrollbar{width:7px}
#governanceModal .governance-modal-body::-webkit-scrollbar-track{background:transparent;margin:22px 0}
#governanceModal .governance-modal-body::-webkit-scrollbar-thumb{background:rgba(34,18,71,.22);border-radius:999px}
#governanceModal .governance-policy-block{padding:16px 0!important}
#governanceModal .gov-modal-action{
  padding:8px 54px 34px!important;
}
#governanceModal .governance-sac-form{
  margin:4px 54px 32px!important;
}

/* Floating controls never compete with dialogs or conversion popup. */
body.modal-open .back-to-top,
body.intent-open .back-to-top{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translateY(12px)!important;
}

/* Intent popup: one clear action only. */
#intent .intent-actions [data-whatsapp="1"]{display:none!important}
#intent .intent-actions{display:flex!important;justify-content:flex-start!important}
#intent #intentContact{margin:0!important}

/* Short desktop windows: preserve rounded shell; content scroll is inset only where unavoidable. */
@media(max-height:680px) and (min-width:821px){
  #solutionModal .modal-panel,
  #governanceModal .governance-panel.governance-v55{
    height:calc(100dvh - 28px)!important;
    max-height:calc(100dvh - 28px)!important;
  }
  #solutionModal .solution-visual{padding:38px 34px 28px!important}
  #solutionModal .solution-detail-copy{padding:36px 42px 28px!important}
  #governanceModal .governance-modal-top{padding:40px 34px 30px!important}
  #governanceModal .governance-modal-body{padding:34px 46px 6px!important}
}

/* Mobile: dialog uses almost the full viewport. Scroll happens in the overlay, never as a square strip over a rounded shell. */
@media(max-width:820px){
  #solutionModal,
  #governanceModal,
  #guideModal{
    padding:10px!important;
    overflow-y:auto!important;
    align-items:flex-start!important;
  }
  #solutionModal .modal-panel,
  #governanceModal .governance-panel,
  #guideModal .guide-panel{
    width:calc(100vw - 20px)!important;
    max-width:calc(100vw - 20px)!important;
    height:auto!important;
    max-height:none!important;
    border-radius:22px!important;
    overflow:hidden!important;
    margin:auto!important;
  }
  #solutionModal .solution-detail,
  #governanceModal .governance-panel.governance-v55{
    display:grid!important;
    grid-template-columns:1fr!important;
    height:auto!important;
    max-height:none!important;
  }
  #solutionModal .solution-visual{
    height:auto!important;
    min-height:300px!important;
    border-radius:22px 22px 0 0!important;
    padding:42px 26px 30px!important;
  }
  #solutionModal .solution-detail-copy{
    height:auto!important;
    overflow:visible!important;
    padding:34px 24px 30px!important;
  }
  #solutionModal .solution-visual .docebo-reference{margin:28px 0 18px!important}
  #governanceModal .governance-modal-top{
    grid-column:1!important;
    grid-row:1!important;
    height:auto!important;
    min-height:270px!important;
    padding:44px 26px 30px!important;
  }
  #governanceModal .governance-modal-body{
    grid-column:1!important;
    grid-row:2!important;
    height:auto!important;
    overflow:visible!important;
    padding:30px 24px 10px!important;
  }
  #governanceModal .gov-modal-action{grid-column:1!important;grid-row:3!important;padding:8px 24px 30px!important}
  #governanceModal .governance-sac-form{grid-column:1!important;grid-row:3!important;margin:6px 24px 30px!important}
}