/* Tutorial steps modal – matches existing monochrome aesthetic (uses vars from styles.css) */

.tut-modal{ position:fixed; inset:0; z-index:60; display:none; }
.tut-modal.show{ display:block; }

.tut-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.65); }

.tut-shell{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  width: min(1100px, calc(100vw - 16px));
  max-height: calc(100vh - 16px);
  background:#fff;
  border: var(--border);

  padding: 10px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.tut-close{
  position:absolute;
  right: 10px;
  top: 10px;
  width: 40px;
  height: 40px;
  border: var(--border);
  background:#fff;
  color:#000;
  font-size: 24px;
  line-height: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;

  z-index: 20; /* ΠΑΝΩ ΑΠΟ ΟΛΑ */

  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: -2px 2px 0 var(--shadow-pink, #ff4fd8), -4px 4px 0 var(--shadow-yellow, #ffd166);
}
.tut-close:hover{
  transform: translate(-1px,-1px);
  box-shadow: -3px 3px 0 var(--shadow-pink, #ff4fd8), -6px 6px 0 var(--shadow-yellow, #ffd166);
}
.tut-close:active{
  transform: translate(0,0);
  box-shadow: 0 0 0 var(--shadow-pink), 0 0 0 var(--shadow-yellow);
}

.tut-stage{
  position: relative;
  border: var(--border);

  background-image: url('tutbg.png');
  background-repeat: repeat;     /* no tiling */
  background-position: center;      /* center */
  background-size: contain;         /* or cover */

  overflow: hidden;
}


/* stable stage size */
.tut-stage::before{
  content:"";
  display:block;
  aspect-ratio: 9 / 16;
}
@media (min-width: 720px){
  .tut-stage::before{ aspect-ratio: 16 / 9; }
}

.tut-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: contain;
}

.tut-nav{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: var(--border);
  background:#fff;
  color:#000;
  font-size: 18px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;

  z-index: 10;

  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: -2px 2px 0 var(--shadow-pink, #ff4fd8), -4px 4px 0 var(--shadow-yellow, #ffd166);
}
.tut-nav:hover{
  transform: translate(-1px,-1px) translateY(-50%);
  box-shadow: -3px 3px 0 var(--shadow-pink, #ff4fd8), -6px 6px 0 var(--shadow-yellow, #ffd166);
}
.tut-nav:active{
  transform: translate(0,0) translateY(-50%);
  box-shadow: 0 0 0 var(--shadow-pink), 0 0 0 var(--shadow-yellow);
}


.tut-prev{ left: 10px; }
.tut-next{ right: 10px; }

.tut-nav[disabled]{ opacity:.35; cursor:not-allowed; }

.tut-meta{
  z-index: 5;
  position:absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  pointer-events:none;
}

.tut-counter{
  pointer-events:auto;
  border: var(--border);
  background: rgba(255,255,255,.95);
  color:#000;
  padding: 6px 10px;
  font-size: 12px;

}
.tut-thumbs{
  display:flex;
  gap: 10px;
  align-items:center;
  overflow:auto;
  padding: 6px 2px 2px 2px;
  scrollbar-width: thin;
}

/* το ίδιο “κουμπίσιο” στυλ */
.tut-thumb{
  width: 56px;
  height: 56px;
  border: var(--border);
  background:#fff;
  overflow:hidden;
  cursor:pointer;
  flex: 0 0 auto;
  position:relative;

  box-shadow:
    -2px 2px 0 var(--shadow-pink, #ff4fd8),
    -4px 4px 0 var(--shadow-yellow, #ffd166);

  transition: transform .15s ease, box-shadow .15s ease;
}

.tut-thumb:hover{
  transform: translate(-1px,-1px);
  box-shadow:
    -3px 3px 0 var(--shadow-pink, #ff4fd8),
    -6px 6px 0 var(--shadow-yellow, #ffd166);
}

.tut-thumb:active{
  transform: translate(0,0);
  box-shadow:
    0 0 0 var(--shadow-pink),
    0 0 0 var(--shadow-yellow);
}



/* STAYS visible for selected step */
.tut-thumb[aria-current="true"],
.tut-thumb.is-active{
  box-shadow:
    inset 0 0 0 6px var(--shadow-pink), /* persistent pink outline */
    -2px 2px 0 var(--shadow-pink),
    -4px 4px 0 var(--shadow-yellow);
}

/* η εικόνα μέσα */
.tut-thumb img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}


/* reduce chrome on small screens so image is bigger */
@media (max-width: 420px){
  .tut-shell{ padding: 8px; gap: 8px; }
  .tut-close{ width: 36px; height: 36px; font-size: 22px; }
  .tut-nav{ width: 40px; height: 40px; }
  .tut-thumb{ width: 52px; height: 52px; }
}