/*
 * Styles for components that replace WordPress plugins whose own CSS/JS is not reused
 * (Slider Revolution, Real3D FlipBook, Elfsight YouTube Gallery). Theme CSS is untouched.
 */

/* ---------- Slider Revolution replacement ---------- */
.mfn-rev-slider .rs-module-wrap { display: block; }
.rs-p-wp-fix { display: none !important; margin: 0 !important; height: 0 !important; } /* from rs6.css */
.mfn-rev-slider .rs-layer { max-width: none; pointer-events: none; user-select: none; }

/* ---------- Real3D FlipBook replacement ---------- */
.real3dflipbook { font-family: Arial, Helvetica, sans-serif; user-select: none; overflow: hidden; text-align: left; line-height: normal; }
.real3dflipbook:fullscreen { width: 100vw !important; height: 100vh !important; }
.real3dflipbook .flipbook-currentPageHolder {
  position: absolute; left: 0; top: 0; z-index: 5; padding: 0 10px; height: 26px; line-height: 26px;
  background: rgba(0, 0, 0, .4); color: #fff; font-size: 13px; font-weight: bold;
}
.real3dflipbook .flipbook-nav {
  position: absolute; top: 50%; z-index: 5; width: 40px; height: 40px; margin-top: -20px; padding: 0;
  border: 0; cursor: pointer; background: rgba(0, 0, 0, .4); color: #fff; font-size: 18px;
  display: flex; align-items: center; justify-content: center; transition: background .2s, opacity .2s;
}
.real3dflipbook .flipbook-nav:hover { background: rgba(0, 0, 0, .7); }
.real3dflipbook .flipbook-nav:disabled { opacity: .25; cursor: default; }
.real3dflipbook .flipbook-left-arrow { left: 0; }
.real3dflipbook .flipbook-right-arrow { right: 0; }
.real3dflipbook .flipbook-page-loading {
  width: 100%; height: 100%; background: #c8cbcd;
  background-image: radial-gradient(circle at 50% 35%, rgba(255,255,255,.35), rgba(255,255,255,0) 40%);
}
.real3dflipbook .flipbook-menuBottom {
  display: flex; align-items: center; justify-content: center; gap: 4px; background: #fff;
  box-shadow: 0 0 6px rgba(0, 0, 0, .16); z-index: 6;
}
.real3dflipbook .flipbook-menu-btn {
  width: 36px; height: 36px; padding: 0; margin: 0; border: 0; background: none; cursor: pointer;
  color: #555; font-size: 15px; display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; box-shadow: none; transition: color .2s;
}
.real3dflipbook .flipbook-menu-btn:hover, .real3dflipbook .flipbook-menu-btn.active { color: #000; background: none; }
.real3dflipbook .flipbook-thumbs {
  position: absolute; inset: 0 0 0 0; z-index: 7; overflow: auto; background: rgba(0, 0, 0, .75);
  display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center; gap: 10px; padding: 40px 50px 20px;
}
.real3dflipbook .flipbook-thumbs img { width: 130px; height: auto; cursor: pointer; box-shadow: 0 0 6px rgba(0,0,0,.5); }
.real3dflipbook .flipbook-thumbs img:hover { outline: 2px solid #d2bf8c; }
.real3dflipbook .flipbook-error { color: #fff; padding: 40px; text-align: center; }

/* ---------- Elfsight YouTube Gallery replacement (metrics measured on the original widget) ---------- */
.yottie-widget { color: #111; font-family: "PT Serif", Helvetica, Arial, sans-serif; text-align: left; }
.yottie-widget-inner { border-radius: 10px; overflow: hidden; background: #fff; position: relative; }
.yottie-widget-header { background: rgb(250, 250, 250); padding: 16px 20px; text-align: center; }
.yottie-widget-header-logo { display: block; width: 40px; height: 40px; margin: 0 auto 16px; border-radius: 50%; overflow: hidden; background: #fff; }
.yottie-widget-header-logo img { width: 40px; height: 40px; display: block; }
.yottie-widget-header-channel { height: 50px; }
.yottie-widget-header-channel-title {
  display: block; color: rgb(17, 17, 17) !important; font-size: 20px; line-height: 28px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; text-decoration: none !important;
}
.yottie-widget-header-channel-properties { margin-top: 6px; font-size: 12px; line-height: 16px; color: rgba(17, 17, 17, .7); white-space: nowrap; }
.yottie-widget-header-channel-properties-item-divider { margin: 0 8px; }
/* the plugin's YouTube subscribe-button iframe rendered empty on the original; its slot is kept */
.yottie-widget-header-subscribe { height: 29px; margin-top: 16px; }
.yottie-widget-feed { position: relative; background: #fff; }
.yottie-widget-feed-viewport { overflow: hidden; }
.yottie-widget-feed-track { display: flex; transition: transform .6s ease; }
.yottie-widget-feed-section { display: flex; gap: 20px; align-items: flex-start; padding: 20px 20px 0; box-sizing: border-box; }
.yottie-widget-video { display: block; flex: none; margin-bottom: 20px; overflow: hidden; color: #111 !important; text-decoration: none !important; background: #fff; }
.yottie-widget-video-preview { display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.yottie-widget-video-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yottie-widget-video-preview-play {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0; margin: -9px 0 0 -6px; opacity: 0;
  border-left: 14px solid rgba(255, 255, 255, .8); border-top: 9px solid transparent; border-bottom: 9px solid transparent;
  transition: opacity .2s;
}
.yottie-widget-video:hover .yottie-widget-video-preview-play { opacity: 1; }
.yottie-widget-video-info { display: block; padding: 16px 0 14px; }
.yottie-widget-video-info-title {
  display: block; font-weight: 700; font-size: 14px; line-height: 18px; color: rgb(17, 17, 17);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.yottie-widget-video-info-passed-time { display: block; margin-top: 4px; font-size: 12px; line-height: 16px; color: rgba(17, 17, 17, .7); }
.yottie-widget-video-info-caption {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line;
  margin-top: 8px; font-size: 13px; line-height: 18.2px; height: 36.4px; color: rgb(17, 17, 17);
}
.yottie-widget-video-info-properties { display: block; margin-top: 8px; font-size: 12px; line-height: 14px; color: rgba(17, 17, 17, .7); }
.yottie-widget-feed-section-arrow {
  position: absolute; top: 111px; margin-top: -20px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .8); color: #000; box-shadow: rgba(0, 0, 0, .2) 0 0 6px 0;
  display: flex; align-items: center; justify-content: center; z-index: 2;
}
.yottie-widget-feed-section-arrow:hover { background: #fff; }
.yottie-arrow-prev { left: 2px; }
.yottie-arrow-next { right: 2px; }
.yottie-widget-feed-section-pagination { padding: 20px; height: 64px; box-sizing: border-box; text-align: center; font-size: 0; }
.yottie-widget-feed-section-pagination-bullet {
  display: inline-block; margin: 0 3px; min-width: 20px; height: 21px; padding: 5px 7px; border: 0; border-radius: 2px; cursor: pointer;
  font: 11px/11px "PT Serif", Helvetica, Arial, sans-serif; color: rgb(170, 170, 170); background: rgba(175, 175, 175, .1);
  box-shadow: none;
}
.yottie-widget-feed-section-pagination-bullet:hover { color: rgb(17, 17, 17); background: rgba(175, 175, 175, .1); }
.yottie-widget-feed-section-pagination-bullet.active { color: rgb(17, 17, 17); background: rgb(238, 238, 238); }
.yottie-widget-feed-section-pagination-bullet:disabled { cursor: default; }
.yottie-popup {
  position: fixed; inset: 0; z-index: 100001; background: rgba(0, 0, 0, .7); overflow: auto;
  display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px;
}
.yottie-popup-inner { position: relative; width: 100%; max-width: 960px; background: #fff; color: #111; }
.yottie-popup-close {
  position: absolute; right: -6px; top: -38px; width: 34px; height: 34px; border: 0; background: none; cursor: pointer;
  color: rgb(220, 220, 220); font-size: 34px; line-height: 34px; padding: 0;
}
.yottie-popup-close:hover { color: #fff; }
.yottie-popup-player { position: relative; aspect-ratio: 16 / 9; background: #000; }
.yottie-popup-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yottie-popup-info { padding: 20px 24px 24px; }
.yottie-popup-info h3 { color: #111; font-size: 20px; line-height: 26px; margin-bottom: 8px; }
.yottie-popup-meta { color: rgba(17, 17, 17, .7); font-size: 13px; margin-bottom: 10px; }
.yottie-popup-desc { white-space: pre-line; font-size: 14px; line-height: 21px; margin: 0; }
/* neutralise BeTheme's global button/input styling inside the widget */
.yottie-widget button { border: 0 !important; box-shadow: none !important; outline: none; margin-bottom: 0; text-transform: none; letter-spacing: 0; }
.yottie-widget .yottie-widget-feed-section-arrow { background: rgba(255, 255, 255, .8) !important; color: #000 !important; box-shadow: rgba(0, 0, 0, .2) 0 0 6px 0 !important; }
.yottie-widget .yottie-widget-feed-section-arrow:hover { background: #fff !important; }
.yottie-widget .yottie-widget-feed-section-pagination-bullet { margin: 0 3px !important; color: rgb(170, 170, 170) !important; background: rgba(175, 175, 175, .1) !important; }
.yottie-widget .yottie-widget-feed-section-pagination-bullet.active { color: rgb(17, 17, 17) !important; background: rgb(238, 238, 238) !important; }
.yottie-widget .yottie-widget-header-channel-title { padding: 0 9px; }
.yottie-widget .yottie-widget-video-info-passed-time { margin-top: 8px; }
.yottie-popup button { border: 0 !important; box-shadow: none !important; background: none !important; }
.real3dflipbook button.flipbook-nav, .real3dflipbook .flipbook-nav i { color: #fff !important; border: 0 !important; box-shadow: none !important; }
.real3dflipbook .flipbook-menu-btn, .real3dflipbook .flipbook-menu-btn i { color: #555 !important; border: 0 !important; box-shadow: none !important; background: none !important; }
.real3dflipbook .flipbook-menu-btn:hover i, .real3dflipbook .flipbook-menu-btn.active i { color: #000 !important; }
.yottie-widget .yottie-widget-feed-section-arrow { border-radius: 50% !important; padding: 0 !important; width: 40px !important; height: 40px !important; }

/* theme icon font: same glyphs, WOFF2 first (smaller); this later @font-face takes precedence over be.css */
@font-face { font-family: 'mfn-icons'; src: url(/wp-content/themes/betheme/fonts/mfn/icons.woff2?31690507) format("woff2"), url(/wp-content/themes/betheme/fonts/mfn/icons.woff?31690507) format("woff"); font-weight: 400; font-style: normal; font-display: swap; }

/* RevSlider slide fade (1000ms) and layer entrance, CSS-driven so it starts with the first paint */
.rs-fade-in { animation: rsFadeIn 1000ms ease both; }
@keyframes rsFadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rs-fade-in { animation: none; } }
