/* MFlashcards basic styles */
.mf-slider{position:relative;max-width:720px;margin:1rem auto;border-radius:16px;padding:1rem;background:var(--mf-bg,#0b0b0b08);}
.mf-toolbar{position:absolute;top:.5rem;right:.5rem;display:flex;gap:.5rem;z-index:3}
.mf-btn{all:unset;cursor:pointer;border-radius:10px;padding:.25rem .5rem;background:#00000010;backdrop-filter:saturate(120%);}
.mf-btn:focus{outline:2px solid #2b8cff;outline-offset:2px}
.mf-stage{min-height:260px;display:flex;align-items:center;justify-content:center;padding:2.5rem 1rem}
.mf-card{position:relative;width:min(92vw,640px);min-width:280px;min-height:180px;perspective:1000px}
.mf-card-inner{position:relative;width:100%;min-height:180px;border-radius:16px;background:white;box-shadow:0 10px 30px rgba(0,0,0,.12);transform-style:preserve-3d;transition:transform .45s ease}
.mf-card.is-back .mf-card-inner{transform:rotateY(180deg)}
.mf-side{position:absolute;inset:0;padding:1.25rem;border-radius:16px;display:flex;flex-direction:column;gap:.75rem;align-items:center;justify-content:center;backface-visibility:hidden}
.mf-front{background:#ffffff}
.mf-back{background:#ffffff;transform:rotateY(180deg)}
.mf-front .mf-text, .mf-back .mf-text{font-size:clamp(1.1rem,3.2vw,2rem);line-height:1.35;text-align:center}
.mf-img{max-width:100%;max-height:240px;border-radius:12px;display:block;margin-top:.25rem}
.mf-bottom{display:flex;align-items:center;justify-content:center;gap:1rem;padding:.5rem 0}
.mf-prev,.mf-next{all:unset;cursor:pointer;border-radius:10px;padding:.25rem .75rem;background:#00000010}
.mf-counter{min-width:5ch;text-align:center}


/* Fullscreen (API or manual) */
.mf-slider.mf-fs{position:fixed;inset:0;background:#EFEFEF;z-index:9999;display:flex;flex-direction:column;justify-content:center}
.mf-slider.mf-fs .mf-stage{padding:0 1rem}
.mf-slider.mf-fs .mf-card-inner{box-shadow:0 10px 30px rgba(0,0,0,.12)}
/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .mf-card-inner{transition:none}
  /* режим повного екрана — для ПК і мобільного */

}

/* toolbar трохи піднятий вгору, але залишається в межах картки */
.mf-toolbar {
  position: absolute;
  top: 20px;           /* відстань від верхнього краю картки */
  right: 16px;
  display: flex;
  gap: 8px;
  background: none;     /* без фону */
  box-shadow: none;     /* без тіні */
  padding: 0;
  z-index: 3;
}

/* щоб картка мала трохи більше “повітря” зверху */
.mf-card {
  padding-top: 30px;    /* збільшуємо простір, щоб тулбар не перекривав текст */
  position: relative;
  overflow: visible;    /* дозволяє тулбару не обрізатись */
}


.mf-slider *:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Основний текст картки */
.mf-text {
  font-size: clamp(16px, 2.8vw, 22px);
  color: #333;
  text-align: center;
  line-height: 1.3;
}