/* ============================================================
   Mvtools Slider — mvtools_slider.css
   Author: Jey | mv-tools.com.ua
   ============================================================ */

/* ---- VARIABLES ------------------------------------------ */
:root {
  --mvs-font-family:        inherit;
  --mvs-bg:                 #ffffff;
  --mvs-border-radius:      12px;
  --mvs-gap:                16px;

  /* Header row */
  --mvs-header-padding:     0 0 18px 0;
  --mvs-header-title-size:  52px;
  --mvs-header-title-weight:700;
  --mvs-header-title-color: #111111;
  --mvs-header-desc-size:   17px;
  --mvs-header-desc-color:  #111111;

  /* Arrows */
  --mvs-arrow-active:       #111111;
  --mvs-arrow-disabled:     #bbbbbb;
  --mvs-arrow-btn-size:     50px;

  /* Card (image_text / text slide) */
  --mvs-card-bg:            #f5f5f5;
  --mvs-card-border:        1px solid #e8e8e8;
  --mvs-card-radius:        10px;
  --mvs-card-padding:       20px;
  --mvs-card-icon-size:     52px;
  --mvs-card-icon-radius:   8px;
  --mvs-card-icon-bg:       #e0e0e0;
  --mvs-card-title-size:    16px;
  --mvs-card-title-weight:  600;
  --mvs-card-title-color:   #111111;
  --mvs-card-desc-size:     13px;
  --mvs-card-desc-color:    #666666;
  --mvs-card-desc-line:     1.55;

  /* Full-image slide */
  --mvs-img-radius:         10px;
  --mvs-caption-bg:         rgba(0,0,0,0.50);
  --mvs-caption-color:      #ffffff;
  --mvs-caption-title-size: 26px;
  --mvs-caption-desc-size:  15px;

  /* Progress scrubber */
  --mvs-progress-fill:      #111111;
  --mvs-progress-height:    3px;
  --mvs-progress-radius:    2px;
  --mvs-progress-segment:   40%;   /* width of the visible segment */
}

/* ---- WRAPPER -------------------------------------------- */
.mvtools-slider-wrap {
  font-family: var(--mvs-font-family);
  background:  var(--mvs-bg);
  width:       100%;
  box-sizing:  border-box;
}

/* ---- HEADER ROW ----------------------------------------- */
.mvtools-slider-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         var(--mvs-header-padding);
}
.mvtools-slider-header-left {
  display:     flex;
  align-items: center;
  gap:         12px;
  flex-wrap:   wrap;
}
.mvtools-slider-title {
  font-size:   var(--mvs-header-title-size);
  font-weight: var(--mvs-header-title-weight);
  color:       var(--mvs-header-title-color);
  margin:      0;
  line-height: 1.2;
}
/* "Дізнатися більше ›" link */
.mvtools-slider-desc-link {
  display:         inline-flex;
  align-items:     center;
  gap:             4px;
  font-size:       var(--mvs-header-desc-size);
  font-weight:     700;
  color:           var(--mvs-header-desc-color);
  text-decoration: none;
  white-space:     nowrap;
  transition:      color 0.2s;
}
.mvtools-slider-desc-link:hover { color: #111; }
.mvtools-slider-desc-link .mvts-arrow-icon {
  display:    inline-block;
  width:      15px;
  height:     15px;
  flex-shrink:0;
}
.mvtools-slider-desc {
  font-size:  var(--mvs-header-desc-size);
  font-weight: 700;
  color:      var(--mvs-header-desc-color);
  margin:     0;
  white-space: nowrap;
}

/* ---- ARROW NAV (top-right, no border) ------------------- */
.mvtools-slider-nav {
  display:     flex;
  align-items: center;
  gap:         0;
  flex-shrink: 0;
}
.mvtools-nav-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           var(--mvs-arrow-btn-size);
  height:          var(--mvs-arrow-btn-size);
  border:          none;
  background:      transparent;
  cursor:          pointer;
  padding:         0;
  transition:      color 0.2s;
  user-select:     none;
  color:           var(--mvs-arrow-active);
}
.mvtools-nav-btn.mvts-disabled {
  color:  var(--mvs-arrow-disabled);
  cursor: default;
}
.mvtools-nav-btn svg {
  width:          31px;
  height:         31px;
  stroke:         currentColor;
  fill:           none;
  stroke-width:   1;
  stroke-linecap: round;
  stroke-linejoin:round;
}
/* no divider between buttons */
.mvtools-nav-divider {
  display:         block;
  width:           1px;
  height:          20px;
  background:      #cccccc;
  flex-shrink:     0;
  align-self:      center;
  margin:          0 2px;
}

/* ---- SWIPER CONTAINER ----------------------------------- */
.mvtools-swiper {
  width:          100%;
  overflow:       hidden;
  padding-bottom: 24px;
}
.mvtools-swiper .swiper-wrapper { align-items: stretch; }

/* ---- CARD SLIDE (image_text / text) --------------------- */
.mvtools-slide-card {
  display:       flex;
  align-items:   flex-start;
  gap:           14px;
  background:    var(--mvs-card-bg);
  border:        var(--mvs-card-border);
  border-radius: var(--mvs-card-radius);
  padding:       var(--mvs-card-padding);
  height:        100%;
  box-sizing:    border-box;
}
.mvtools-slide-icon {
  flex-shrink:     0;
  width:           var(--mvs-card-icon-size);
  height:          var(--mvs-card-icon-size);
  border-radius:   var(--mvs-card-icon-radius);
  background:      var(--mvs-card-icon-bg);
  overflow:        hidden;
  display:         flex;
  align-items:     center;
  justify-content: center;
}
.mvtools-slide-icon img { width:100%; height:100%; object-fit:cover; display:block; }
.mvtools-slide-body { flex:1; min-width:0; }
.mvtools-slide-card-title {
  font-size:   var(--mvs-card-title-size);
  font-weight: var(--mvs-card-title-weight);
  color:       var(--mvs-card-title-color);
  margin:      0 0 6px;
  line-height: 1.35;
}
.mvtools-slide-card-desc {
  font-size:   var(--mvs-card-desc-size);
  color:       var(--mvs-card-desc-color);
  line-height: var(--mvs-card-desc-line);
  margin:      0 0 10px;
}
.mvtools-slide-btn { display:inline-block; margin-top:4px; }

/* ---- FULL IMAGE SLIDE ----------------------------------- */
.mvtools-slide-image-wrap {
  position:      relative;
  border-radius: var(--mvs-img-radius);
  overflow:      hidden;
  line-height:   0;
  height:        100%;
}
.mvtools-slide-image-wrap img { width:100%; height:100%; object-fit:cover; display:block; }
.mvtools-caption-overlay {
  position:   absolute;
  bottom:0; left:0; right:0;
  background: var(--mvs-caption-bg);
  color:      var(--mvs-caption-color);
  padding:    18px 24px;
}
.mvtools-caption-overlay .mvtools-slide-card-title { color:var(--mvs-caption-color); font-size:var(--mvs-caption-title-size); }
.mvtools-caption-overlay .mvtools-slide-card-desc  { color:var(--mvs-caption-color); font-size:var(--mvs-caption-desc-size); }

/* ---- TEXT-ONLY SLIDE ------------------------------------ */
.mvtools-slide-text-only {
  background:    var(--mvs-card-bg);
  border:        var(--mvs-card-border);
  border-radius: var(--mvs-card-radius);
  padding:       var(--mvs-card-padding) 24px;
  height:        100%;
  box-sizing:    border-box;
}

/* ---- PROGRESS SCRUBBER — segment line, no track bg ----- */
.mvtools-progress-wrap {
  position:   relative;
  height:     var(--mvs-progress-height);
  margin-top: 14px;
  cursor:     pointer;
  /* wider hit-area */
  padding:    8px 0;
  margin-top: 6px;
  box-sizing: content-box;
  /* no background — transparent track */
  background: transparent;
}
/* The moving segment — absolute bar that slides across */
.mvtools-progress-fill {
  position:      absolute;
  top:           50%;
  transform:     translateY(-50%);
  height:        var(--mvs-progress-height);
  /* segment width controlled via JS with --seg-w custom prop */
  width:         var(--mvs-progress-segment);
  background:    var(--mvs-progress-fill);
  border-radius: var(--mvs-progress-radius);
  /* left: set via JS */
  left:          0;
  transition:    left 0.35s ease;
  pointer-events:none;
}
.mvtools-progress-wrap.dragging .mvtools-progress-fill {
  transition: none;
}

/* ---- RESPONSIVE ----------------------------------------- */
@media (max-width: 991px) { .mvtools-slider-title { font-size: 20px; } }
@media (max-width: 767px) {
  .mvtools-slider-title    { font-size: 18px; }
  .mvtools-slider-desc     { display: none; }
  .mvtools-slider-desc-link{ display: none; }
  .mvtools-slide-card      { flex-direction: column; }
  .mvtools-slide-icon      { width: 40px; height: 40px; }
}

/* ---- EQUAL HEIGHT slides -------------------------------- */
.mvtools-equal-height  { align-items: stretch !important; }
.mvtools-slide-outer   { height:auto !important; display:flex !important; flex-direction:column; }
.mvtools-slide-outer > *{ flex:1; height:100%; }
.mvtools-card-link {
  text-decoration: none;
  display:         flex;
  flex-direction:  column;
  height:          100%;
}
.mvtools-card-link .mvtools-slide-card,
.mvtools-card-link .mvtools-slide-text-only { flex: 1; }