/* Kolabori V6.2 — mobile geometry, accessible overlays and production WhatsApp. */

/* Footer refinements requested for the production layout. */
.footer{padding-top:24px}
.footer-logo{display:block;margin:0 auto 8px!important}
.footer-grid-v54>div:first-child>p{
  margin-top:0!important;
  font-size:15px!important;
  line-height:1.55;
}
.footer-social-links{margin-top:0}
.footer-social-links a{width:max-content}

/* The dashboard must wrap labels, never split words letter by letter. */
.dash-card strong{
  overflow-wrap:normal!important;
  word-break:normal!important;
  hyphens:none!important;
}
.dash-card strong.is-text{
  font-size:clamp(14px,1.35vw,17px)!important;
  line-height:1.18!important;
  letter-spacing:-.02em;
}

/* Every dialog close control keeps the recommended 44px pointer target. */
#solutionModal .modal-close,
#governanceModal .modal-close,
#guideModal .modal-close{
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  min-height:44px!important;
}

/* Keep the automatic contact card clear of the 64px WhatsApp control. */
#intent{bottom:116px}

/* WhatsApp widget — geometry and interaction match the current public site. */
.whatsclub-widget{
  position:fixed;
  right:40px;
  bottom:40px;
  z-index:1200;
  font-family:inherit;
}
.whatsclub-toggle{
  position:relative;
  width:64px;
  height:64px;
  padding:0;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:#25d366;
  color:#fff;
  cursor:pointer;
  box-shadow:0 12px 18px rgba(37,211,102,.24);
  transition:transform .4s ease,box-shadow .4s ease,background-color .25s ease,color .25s ease;
}
.whatsclub-toggle:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 24px rgba(37,211,102,.72);
}
.whatsclub-toggle svg{display:block;width:31px;height:31px;fill:currentColor}
.whatsclub-toggle .whatsclub-close-icon{
  position:absolute;
  width:24px;
  height:24px;
  opacity:0;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
}
.whatsclub-widget.is-open .whatsclub-toggle{
  background:#fff;
  color:#18bd62;
  box-shadow:0 12px 24px rgba(37,211,102,.45);
}
.whatsclub-widget.is-open .whatsclub-toggle:hover{transform:translateY(-3px)}
.whatsclub-widget.is-open .whatsclub-wa-icon{opacity:0}
.whatsclub-widget.is-open .whatsclub-close-icon{opacity:1}
.whatsclub-popup{
  position:absolute;
  right:calc(100% + 12px);
  bottom:10px;
  width:266px;
  overflow:hidden;
  border:1px solid rgba(25,40,34,.07);
  border-radius:12px;
  background:#fff;
  color:#1d2522;
  box-shadow:0 14px 34px rgba(15,35,28,.22);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(12px) scale(.98);
  transform-origin:bottom right;
  transition:opacity .24s ease,transform .24s ease,visibility .24s;
}
.whatsclub-widget.is-open .whatsclub-popup{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:none;
}
.whatsclub-title{
  margin:0;
  padding:13px 15px;
  background:#25d366;
  color:#fff;
  font-size:16px;
  font-weight:700;
  line-height:1.25;
}
.whatsclub-body{padding:13px}
.whatsclub-copy{margin:0 0 16px;font-size:13px;line-height:1.45;color:#27342f}
.whatsclub-card{
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  gap:10px;
  align-items:center;
  padding:12px;
  background:#fff;
  box-shadow:0 2px 12px rgba(20,44,35,.12);
}
.whatsclub-avatar{
  position:relative;
  display:block;
  width:42px;
  height:42px;
  overflow:hidden;
}
.whatsclub-avatar img{
  position:absolute;
  top:0;
  right:auto;
  left:0;
  width:100%;
  max-width:none;
  height:100%;
  object-fit:cover;
  object-position:right center;
}
.whatsclub-user{min-width:0}
.whatsclub-user b{display:block;font-size:13px;line-height:1.25;color:#6b6568}
.whatsclub-user small{display:block;margin-top:3px;font-size:10px;color:#52605a}
.whatsclub-start{
  grid-column:2;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:31px;
  margin-top:0;
  border-radius:4px;
  background:#087566;
  color:#fff;
  font-size:12px;
  font-weight:700;
  text-decoration:none;
}
.whatsclub-start:hover{background:#075f54}
body.modal-open .whatsclub-widget{display:none!important}
body.whatsapp-open .back-to-top{opacity:0!important;visibility:hidden!important;pointer-events:none!important}

@media(max-width:1320px){
  .header-v54{z-index:1400!important}
  /* One authoritative menu geometry replaces the competing legacy rules. */
  .header-v54 .nav-v54{position:relative}
  .header-v54 .navlinks-v54.mobile-open{
    display:flex!important;
    position:absolute!important;
    top:calc(100% + 6px)!important;
    left:0!important;
    right:0!important;
    width:auto!important;
    max-width:100%!important;
    max-height:calc(100dvh - 96px)!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    margin:0!important;
    padding:10px!important;
    z-index:1250!important;
    box-sizing:border-box!important;
  }
}

@media(max-width:980px){
  :root{--v543-header-h:74px}
  html{scroll-padding-top:calc(var(--v543-header-h) + 12px)}
  body{padding-top:0!important}
  main section[id]{scroll-margin-top:calc(var(--v543-header-h) + 12px)}

  /* Horizontal entrance motion extended the page beyond narrow viewports. */
  .reveal.from-left,
  .reveal.from-right{transform:translateY(22px)}
  .reveal.visible{transform:none}

  /* Sticky follows the mobile visual viewport when the browser toolbar changes. */
  .header-v54{
    position:sticky!important;
    top:0!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;
    width:100%!important;
    padding:0!important;
    transform:none!important;
    backface-visibility:visible!important;
    z-index:1400!important;
  }
  .header-v54 .nav-v54{
    width:calc(100% - 20px)!important;
    max-width:100%!important;
    min-height:74px!important;
    margin:0 auto!important;
    padding:0!important;
    gap:6px!important;
    box-sizing:border-box!important;
  }
  .header-v54 .brand-v54{
    flex:1 1 0!important;
    min-width:0!important;
    height:58px!important;
    overflow:hidden;
  }
  .header-v54 .brand-v54 img{
    width:clamp(104px,31vw,132px)!important;
    max-width:100%!important;
    height:auto!important;
  }
  .header-v54 .navtools-v54{
    flex:0 0 auto!important;
    min-width:0!important;
    gap:6px!important;
  }
  .header-v54 #menuBtn{order:1;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important}
  .header-v54 .lang-picker{order:2;width:54px!important;height:44px!important;flex:0 0 54px!important}
  .header-v54 .lang-trigger-v54{
    width:54px!important;
    min-width:54px!important;
    height:44px!important;
    padding:0 7px!important;
    gap:4px!important;
  }
  .header-v54 #themeToggle{order:3;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important}
  .header-v54 .cta-v54{display:none!important}
  .header-v54 .lang-menu{
    right:0!important;
    left:auto!important;
    top:calc(100% + 7px)!important;
    width:min(190px,calc(100vw - 24px))!important;
    max-width:calc(100vw - 24px)!important;
    max-height:calc(100dvh - 92px)!important;
    overflow-y:auto!important;
    z-index:1300!important;
    box-sizing:border-box!important;
  }

  /* Modals fit the visual viewport; the shell starts below the safe area. */
  #solutionModal,#governanceModal,#guideModal{
    width:100%!important;
    height:100dvh!important;
    max-height:100dvh!important;
    padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom))!important;
    align-items:flex-start!important;
    justify-content:center!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    box-sizing:border-box!important;
  }
  #solutionModal .modal-panel,
  #governanceModal .governance-panel,
  #guideModal .guide-panel{
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    max-height:none!important;
    margin:0 auto!important;
    border-radius:22px!important;
    box-sizing:border-box!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;
    padding:42px 26px 30px!important;
  }
  #solutionModal .solution-detail-copy{
    height:auto!important;
    overflow:visible!important;
    padding:34px 24px 30px!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}
  #solutionModal .modal-close,
  #governanceModal .modal-close,
  #guideModal .modal-close{
    position:absolute!important;
    top:12px!important;
    right:12px!important;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
    margin:0!important;
    z-index:90!important;
  }
  #guideModal .guide-top{padding-right:72px!important}

  .dash-card strong{font-size:18px!important;line-height:1.18!important}

  /* On mobile the automatic callout covered essential content in the recording. */
  #intent{display:none!important}

  /* In mobile, back-to-top belongs to the footer and cannot cover page content. */
  .footer .back-to-top,
  .footer .back-to-top.show{
    position:static!important;
    width:max-content!important;
    min-width:44px!important;
    height:44px!important;
    margin:24px auto 0 0!important;
    padding:0 14px!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:none!important;
  }
  .footer .back-to-top span{display:inline!important}

  .footer{padding-top:28px}
  .footer-logo{margin-bottom:8px!important}
  .footer-grid-v54>div:first-child>p{font-size:15px!important}

  .whatsclub-widget{
    right:20px;
    bottom:calc(20px + env(safe-area-inset-bottom,0px));
  }
  .whatsclub-popup{
    right:calc(100% + 10px);
    bottom:9px;
    width:min(266px,calc(100vw - 96px));
    max-height:calc(100dvh - 116px);
    overflow-y:auto;
  }
}

@media(max-width:400px){
  .whatsclub-widget{right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  .whatsclub-toggle{width:54px;height:54px}
  .whatsclub-toggle svg{width:27px;height:27px}
  .whatsclub-popup{right:calc(100% + 8px);bottom:8px;width:min(266px,calc(100vw - 82px))}
}

@media(max-width:380px){
  .header-v54 .nav-v54{width:calc(100% - 16px)!important;gap:4px!important}
  .header-v54 .brand-v54 img{width:100px!important}
  .header-v54 .navtools-v54{gap:4px!important}
  .header-v54 #menuBtn,.header-v54 #themeToggle{
    width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important
  }
  .header-v54 .lang-picker{width:50px!important;height:44px!important;flex-basis:50px!important}
  .header-v54 .lang-trigger-v54{width:50px!important;min-width:50px!important;height:44px!important;padding:0 5px!important}
  .dash-cards{grid-template-columns:1fr!important}
  .dash-card:last-child{grid-column:auto!important}
}

@media(max-width:330px){
  .header-v54 .brand-v54 img{width:90px!important}
  .header-v54 .navtools-v54{gap:3px!important}
}

@media(prefers-reduced-motion:reduce){
  .whatsclub-toggle,.whatsclub-popup{transition:none!important}
}

/* V6.2.2 — restore the compact floating back-to-top control. */
.footer .back-to-top,
.footer .back-to-top.show{
  position:fixed!important;
  top:auto!important;
  right:40px!important;
  bottom:116px!important;
  width:46px!important;
  min-width:46px!important;
  height:46px!important;
  padding:0!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:50%!important;
  transform:translateY(12px)!important;
}
.footer .back-to-top.show{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:translateY(0)!important;
}
.footer .back-to-top:not(.show){
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
.footer .back-to-top span{display:none!important}
.footer .back-to-top svg{width:20px;height:20px}

@media(max-width:980px){
  .footer .back-to-top,
  .footer .back-to-top.show{
    right:20px!important;
    bottom:96px!important;
    width:44px!important;
    min-width:44px!important;
    height:44px!important;
  }
}

@media(max-width:400px){
  .footer .back-to-top,
  .footer .back-to-top.show{
    right:16px!important;
    bottom:calc(82px + env(safe-area-inset-bottom,0px))!important;
  }
}

/* V6.2.3 — explicit WhatsApp service selector, centered and viewport-safe. */
#intent{display:none!important}
.whatsclub-toggle .whatsclub-wa-icon{
  width:32px!important;
  height:32px!important;
  min-width:32px!important;
  min-height:32px!important;
  overflow:visible;
  flex:none;
}
.whatsclub-popup{
  position:fixed!important;
  top:50%!important;
  left:50%!important;
  right:auto!important;
  bottom:auto!important;
  width:min(440px,calc(100vw - 32px))!important;
  max-width:calc(100vw - 32px)!important;
  max-height:calc(100dvh - 32px)!important;
  overflow-y:auto!important;
  box-sizing:border-box!important;
  border-radius:18px!important;
  transform:translate(-50%,-46%) scale(.98)!important;
  transform-origin:center!important;
}
.whatsclub-widget.is-open .whatsclub-popup{
  transform:translate(-50%,-50%) scale(1)!important;
}
.whatsclub-dismiss{
  position:absolute;
  top:8px;
  right:8px;
  width:40px;
  height:40px;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:rgba(255,255,255,.95);
  font-size:28px;
  line-height:1;
  cursor:pointer;
}
.whatsclub-dismiss:hover{background:rgba(0,0,0,.12)}
.whatsclub-title{padding-right:52px!important}
.whatsclub-options{display:grid;gap:8px;margin:0 0 14px}
.whatsclub-option{
  width:100%;
  min-height:42px;
  padding:9px 12px;
  border:1px solid #d9e8e2;
  border-radius:8px;
  background:#fff;
  color:#123d35;
  font:600 12px/1.25 inherit;
  text-align:left;
  cursor:pointer;
  transition:border-color .2s ease,background-color .2s ease,color .2s ease;
}
.whatsclub-option:hover,.whatsclub-option:focus-visible{border-color:#18bd62;background:#effcf4}
.whatsclub-option.is-selected{border-color:#087566;background:#e4f7ee;color:#075f54;box-shadow:inset 0 0 0 1px #087566}
.whatsclub-start[aria-disabled="true"]{opacity:.48;pointer-events:none}
.whatsclub-start:not([aria-disabled="true"]){box-shadow:0 7px 14px rgba(8,117,102,.18)}

@media(max-width:680px){
  .whatsclub-popup{width:calc(100vw - 32px)!important;max-width:calc(100vw - 32px)!important;max-height:calc(100dvh - 24px)!important}
  .whatsclub-body{padding:14px!important}
}

@media(max-width:400px){
  .whatsclub-toggle .whatsclub-wa-icon{width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important}
  .whatsclub-popup{width:calc(100vw - 24px)!important;max-width:calc(100vw - 24px)!important}
}