/* ============================================
   MENOKIND – BOOKING (EasyPractice)
   Kun booking-sider (enqueued via inc/menokind-booking.php)

============================================ */

/* ---------- 1) Booking container ---------- */

.mk-ep-booking{
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  position: relative;
  scroll-margin-top: calc(var(--mk-header-h, 70px);
}

.mk-ep-booking .mk-booking-inner{
  max-width: 700px;
  margin: 0 auto;
}

/* ---------- 2) EasyPractice embed responsiv ---------- */

.mk-ep-booking iframe,
.mk-ep-booking embed,
.mk-ep-booking object{
  max-width: 100% !important;
}

.mk-ep-booking iframe{
  width: 100% !important;
  border: 0;
  display: block;
}

/* ---------- 3) Fallback-knap (kun jeres explicit class/attribute) ---------- */


.mk-ep-fallback-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  min-height: 44px;
  padding: 14px 18px;

  border: 1px solid #112B26;
  background: #112B26;
  color: #FFFFFB;
  text-decoration: none;

  font-family: "Montserrat", Sans-serif;
  font-size: 11.6px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;

  transition: 0.2s ease-in-out;
  -webkit-tap-highlight-color: transparent;
}

.mk-ep-fallback-btn:hover{
  background: transparent;
  color: #112B26;
}

/* Ingen ring ved klik */
.mk-ep-fallback-btn:focus{
  outline: none;
  box-shadow: none;
}

/* Ring kun ved tastatur (styres af Menokind-site.js) */
body.mk-using-keyboard .mk-ep-fallback-btn:focus,
.mk-ep-fallback-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px var(--e-global-color-7c812e6);
}

/* Mobil: knappen fylder hele bredden */
@media (max-width: 767px){
  .mk-ep-fallback-btn{
    width: 100%;
  }
}

/* ---------- 4) Modal/backdrop (kun hvis I faktisk har terap-modal DOM) ---------- */

#popupterapeutbooking{
  z-index: 9999;
}
#popupterapeutbooking{
	width:90%;
	padding:20px!important;
}

/* Backdrop (hvis den indsættes via JS) */
.terap-modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
}

/* Bootstrap-lignende modal struktur (hvis den findes) */
#popupterapeutbooking .modal-dialog{
  margin: 6vh auto;
  width: 920px;
  width: calc(100% - 32px);
}

#popupterapeutbooking .modal-content{
  border-radius: 16px;
  overflow: hidden;
}

#popupterapeutbooking .modal-body{
  max-height: 78vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

#popupterapeutbooking .close,
#popupterapeutbooking [data-dismiss="modal"]{
  cursor: pointer;
}

/* ============================================
   MENOKIND – EasyPractice modal sizing
   Gør modal bred + undgår dobbelt scroll
============================================ */

#popupterapeutbooking{
  z-index: 999999; /* over header */
}


/* VIGTIGT: ingen outer-scroll */
#popupterapeutbooking .terap-modal-content{
  height: min(820px, calc(100vh - 128px)); 
  overflow: hidden;
  background: #fff;
}

/* Iframe fylder hele rammen */
#popupterapeutbooking iframe#easypractice-online-booking-iframe{
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

/* Mobil: full-screen modal */
@media (max-width: 767px){
  #popupterapeutbooking .terap-modal-dialog{
    width: 100vw;
    height: 100vh;
    margin: 0;
  }

  #popupterapeutbooking .terap-modal-content{
    height: 100vh;
    border-radius: 0;
  }
}
#popupterapeutbooking.terap-modal,
iframe[src*="easypractice.net"],
.terap-modal{
	 padding: 1%!important;
    background: var(--mk-gf-card)!important;
    margin-top: 12%!important;
    width: 85%!important;
    left: 23%!important;
    border-radius: 0!important;
}


/* Hvis jeres modal-plugin/Bootstrap sætter body class når åben */
body.modal-open{
  overflow: hidden;
}