/* VEVIOZ - FB Style Pro Link Modal (isolated in /layout/pro/) */
#vev-pro-fbmodal { z-index: 9999999; }
#vev-pro-fbmodal .modal-dialog { max-width: 520px; width: 92%; margin: 10vh auto; }
#vev-pro-fbmodal .modal-content { border-radius: 3px; overflow: hidden; border: 1px solid #b0b0b0; box-shadow: 0 12px 40px rgba(0,0,0,.35); background: #fff; }

.vev-pro-fbmodal-titlebar{
  background: #3b5998;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,.15);
}
.vev-pro-fbmodal-title{
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .2px;
}

.vev-pro-fbmodal-body{
  padding: 14px 14px 12px;
  background: #fff;
}
.vev-pro-fbmodal-heading{
  font-size: 13px;
  font-weight: 700;
  color: #1d2129;
  margin-bottom: 6px;
}
.vev-pro-fbmodal-text{
  font-size: 13px;
  color: #4b4f56;
  line-height: 1.5;
  margin-bottom: 10px;
}
.vev-pro-fbmodal-close-link{
  display: inline-block;
  font-size: 13px;
  color: #385898;
  text-decoration: none;
}
.vev-pro-fbmodal-close-link:hover{ text-decoration: underline; }

.vev-pro-fbmodal-footer{
  background: #f5f6f7;
  border-top: 1px solid #dddfe2;
  padding: 8px 10px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.vev-pro-fbmodal-btn{
  appearance: none;
  border: 1px solid #ccd0d5;
  border-radius: 2px;
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  cursor: pointer;
  background: #f5f6f7;
  color: #4b4f56;
}
.vev-pro-fbmodal-btn:hover{ background: #ebedf0; }
.vev-pro-fbmodal-btn:active{ background: #dddfe2; }

.vev-pro-fbmodal-btn-ok{
  background: #4267b2;
  border-color: #4267b2;
  color: #fff;
}
.vev-pro-fbmodal-btn-ok:hover{ background: #365899; }
.vev-pro-fbmodal-btn-ok:active{ background: #29487d; }

/* Make bootstrap modal backdrop closer to FB */
.modal-backdrop.in, .modal-backdrop.show { opacity: .6; }

/* ===== Dark Mode (Vevioz/Facebook dark) =====
   Enabled by JS adding: #vev-pro-fbmodal.vev-pro-dark
*/
#vev-pro-fbmodal.vev-pro-dark .modal-content{
  background: #242526;
  border-color: #3E4042;
  box-shadow: 0 12px 40px rgba(0,0,0,.55);
}
#vev-pro-fbmodal.vev-pro-dark .vev-pro-fbmodal-body{
  background: #242526;
}
#vev-pro-fbmodal.vev-pro-dark .vev-pro-fbmodal-heading{
  color: #E4E6EB;
}
#vev-pro-fbmodal.vev-pro-dark .vev-pro-fbmodal-text{
  color: #B0B3B8;
}
#vev-pro-fbmodal.vev-pro-dark .vev-pro-fbmodal-close-link{
  color: #2D88FF;
}
#vev-pro-fbmodal.vev-pro-dark .vev-pro-fbmodal-footer{
  background: #242526;
  border-top: 1px solid #3E4042;
}
#vev-pro-fbmodal.vev-pro-dark .vev-pro-fbmodal-btn{
  background: #3A3B3C;
  border-color: #3E4042;
  color: #E4E6EB;
}
#vev-pro-fbmodal.vev-pro-dark .vev-pro-fbmodal-btn:hover{ background: #4E4F50; }
#vev-pro-fbmodal.vev-pro-dark .vev-pro-fbmodal-btn:active{ background: #5C5D5E; }

#vev-pro-fbmodal.vev-pro-dark .vev-pro-fbmodal-btn-ok{
  background: #1877F2;
  border-color: #1877F2;
  color: #fff;
}
#vev-pro-fbmodal.vev-pro-dark .vev-pro-fbmodal-btn-ok:hover{ background: #166FE5; }
#vev-pro-fbmodal.vev-pro-dark .vev-pro-fbmodal-btn-ok:active{ background: #1464D2; }