/* Magnitof Service Card v1.1.9 */
.msc-card{
  display:flex;align-items:center;gap:28px;
  background:#fff;border-radius:40px;
  padding:22px 28px;
  box-shadow: 2px 3px 8px rgba(8,23,53,0.08), -1px -1px 3px rgba(8,23,53,0.03);
  min-height:220px;
  transition: box-shadow .3s ease, transform .3s ease;
  will-change: transform, box-shadow;
  margin-bottom:20px; /* default bottom margin; can be overridden via Elementor control */
}
.msc-card:hover{
  transform: translateY(-4px);
  box-shadow: 14px 18px 42px rgba(8,23,53,0.22), -2px -3px 6px rgba(8,23,53,0.05);
}
.msc-card:focus-within{
  box-shadow: 14px 18px 42px rgba(8,23,53,0.24), -2px -3px 6px rgba(8,23,53,0.06);
}

.msc-media{position:relative;flex:0 0 33%;height:200px;border-radius:28px;overflow:hidden}
.msc-media img{width:100%;height:100%;object-fit:cover;display:block;border-radius:28px;position:relative;z-index:1}
.msc-media::before{content:'';position:absolute;inset:0;background:#eef3fb}

/* Bright mirror shine only on image */
.msc-media .msc-shine{
  position:absolute; inset:0; pointer-events:none; z-index:2;
  transform:translateX(-130%) skewX(-18deg);
  background:linear-gradient(120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.35) 35%,
    rgba(255,255,255,1) 50%,
    rgba(255,255,255,0.35) 65%,
    rgba(255,255,255,0) 100%);
  opacity:0;
}
.msc-card:hover .msc-media .msc-shine{ animation: mscMirrorBright 0.95s ease forwards; opacity:1; }
@keyframes mscMirrorBright{
  0%{ transform:translateX(-130%) skewX(-18deg); opacity:1; }
  100%{ transform:translateX(180%)  skewX(-18deg); opacity:0; }
}

.msc-body{flex:1 1 auto;min-width:0}
.msc-title{margin:0 0 8px;font-size:34px;line-height:1.2;color:#1f2a44;font-weight:800}
.msc-subtitle{color:#51617d;font-size:20px;line-height:1.6;max-width:740px}
.msc-actions{display:flex;margin-top:16px;gap:16px;align-items:center;flex-wrap:wrap}

/* Buttons */
.msc-btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; text-decoration:none; cursor:pointer; user-select:none;
  border:0; border-radius:14px; padding:12px 16px;
  background:#ecf2ff; color:#2d8df8;
  transition: background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 2px 6px rgba(45,141,248,0.12);
}
.msc-btn:hover{ transform: translateY(-1px); }
.msc-btn--book{ background:#2fb375; color:#fff; box-shadow: 0 4px 14px rgba(47,179,117,.28); }
.msc-btn--book:hover{ filter: brightness(0.98); }

/* Modal */
.msc-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(15,25,45,.55);z-index:999999;padding:20px}
.msc-modal[hidden]{display:none !important}
.msc-modal__dialog{background:#fff;border-radius:20px;max-width:560px;width:100%;padding:24px;box-shadow:0 20px 60px rgba(0,0,0,.35);position:relative}
.msc-modal__close{position:absolute;right:12px;top:10px;background:transparent;border:0;font-size:22px;cursor:pointer}
.msc-form__fields{display:flex;flex-direction:column;gap:12px;margin-top:10px}
.msc-field label{display:block;margin-bottom:6px;color:#51617d;font-size:13px}
.msc-field input,.msc-field textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid #e3e8f0}
.msc-btn-submit{background:#2fb375;color:#fff;border:0;border-radius:12px;padding:12px 16px;margin-top:8px;cursor:pointer}
body.msc-lock{overflow:hidden}

/* Mobile: date input same height as others */
@media (max-width: 767px){
  .msc-field input[type="date"]{
    height: 48px !important;
    line-height: 48px !important;
    padding: 0 14px !important;
    font-size: 16px !important;
  }
}

/* Responsive */
@media (max-width: 991px){
  .msc-card{flex-direction:column;align-items:stretch;border-radius:28px;padding:16px}
  .msc-media{width:100%;height:auto;aspect-ratio:16/9}
  .msc-title{font-size:28px}
  .msc-subtitle{font-size:18px}
}