/* ================================
   Best Medicine – Trial Videos (New Flow)
   Full CSS file
   ================================ */

/* --- Wrap & List --- */
.bm-trial-wrap { max-width: 1100px; margin: 0 auto; padding: 24px; }
.bm-trial-above { margin-bottom: 24px; }
.bm-trial-list { display: grid; gap: 28px; }

/* --- Item layout: 2 columns with alternating direction --- */
.bm-trial-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: center;
}
.bm-trial-item.alt { direction: rtl; }
.bm-trial-item.alt .bm-trial-side { direction: ltr; }

/* --- Media thumb --- */
.bm-trial-media .bm-thumb {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  background: #f8fafc;
  min-height: 240px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.bm-trial-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}
.bm-thumb-fallback {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-size: 64px; opacity:.3;
}

/* --- Centered Play button (SVG) --- */
.bm-trial-media .bm-play{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:82px; height:82px;
  border:none; background:transparent;
  padding:0; margin:0;
  cursor:pointer;
  z-index: 2;
}
.bm-trial-media .bm-play svg{
  display:block;
  width:100%; height:100%;
}

/* --- Side content – inherit theme typography --- */
.bm-trial-side { }
.bm-trial-side h3 { margin: 0 0 8px; }

/* ================================
   Modal / Popup
   ================================ */
.bm-modal[hidden] { display:none; }
.bm-modal {
  position: fixed; inset: 0;
  background: rgba(17,24,39,0.45);
  display:flex; align-items:center; justify-content:center;
  z-index: 9999; padding: 18px;
  backdrop-filter: blur(2px);
}
.bm-modal-card {
  position: relative;
  width: 100%; max-width: 640px;
  background:#fff;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
}
.bm-modal-card h3{
  margin: 0 0 10px;
  line-height: 1.1;
  font-weight: 700;
  font-size: clamp(28px, 4.2vw, 40px);
  letter-spacing: -.02em;
}
.bm-modal-card p{ margin: 0 0 14px; }

/* Close */
.bm-modal-card .bm-close{
  position:absolute; right:20px; top:18px;
  font-size: 26px; line-height: 1;
  border:none; background:transparent; cursor:pointer;
  color:#111827; opacity:.5; transition: opacity .15s ease-in-out;
}
.bm-modal-card .bm-close:hover{ opacity:.9; }

/* Form – grid like checkout spacing */
.bm-email-form{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  margin: 10px 0 8px;
}
.bm-email-form input[type=email]{
  height: 52px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1.5px solid #D1D5DB;
  font-size: 16px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.bm-email-form input[type=email]::placeholder{ color:#9CA3AF; }
.bm-email-form input[type=email]:focus{
  border-color:#111827;
  box-shadow: 0 0 0 3px rgba(17,24,39,.12);
}

/* CTA – match checkout button look */
.bm-email-form .bm-submit{
  height: 52px;
  padding: 0 22px;
  border: none;
  border-radius: 9999px;
  background:#FF3BAC;
  color:#fff;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: transform .08s ease, background .15s ease, box-shadow .15s ease;
  box-shadow: 0 2px 0 rgba(0,0,0,.18);
}
.bm-email-form .bm-submit:hover    { background:#0b1220; }
.bm-email-form .bm-submit:active   { transform: translateY(1px); box-shadow:none; }
.bm-email-form .bm-submit:disabled { opacity:.55; cursor: not-allowed; }

.bm-msg { margin-top: 8px; font-weight:600; }
.bm-modal-card .bm-footnote{ margin-top: 6px; color:#4B5563; font-size: 14px; }

/* Prevent background scroll when modal is open (toggle via JS) */
.bm-modal-open { overflow:hidden; }

/* ================================
   Watch page
   ================================ */
.bm-watch-wrap { max-width: 1000px; margin: 0 auto; padding: 24px; }
.bm-watch-intro { margin-bottom: 16px; }
.bm-responsive-16x9 {
  position: relative; width: 100%; padding-top: 56.25%;
  border-radius: 14px; overflow:hidden;
}
.bm-responsive-16x9 iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

/* ================================
   Mobile
   ================================ */
@media (max-width: 780px){
  .bm-trial-item { grid-template-columns: 1fr; }
  .bm-trial-item.alt { direction: ltr; }
  .bm-modal-card{ padding: 22px; border-radius: 16px; }
  .bm-email-form{ grid-template-columns: 1fr; }
  .bm-email-form .bm-submit{ width:100%; }
}

.bm-watch-wrap {
  text-align: center;
}

.bm-watch-title {
  margin-bottom: 40px !important;
}