/* ===== BASE GALLERY ===== */

.tp-gallery{
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 14px;
  overflow: hidden;
  background: #f3f4f6;
  cursor: pointer;
  display: block;
}

/* ===== ARROWS ===== */

.tp-gallery__arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
}

.tp-gallery__arrow:hover{
  background: rgba(0,0,0,0.75);
}

.tp-gallery__arrow--left{
  left: 12px;
}

.tp-gallery__arrow--right{
  right: 12px;
}

/* ===== DOTS ===== */

.tp-gallery__dots{
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}

.tp-gallery__dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
}

.tp-gallery__dot.active{
  background: #fff;
}
/* ===== PLUS SLIDE ===== */

.tp-gallery__plus{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  color:#9ca3af;
  font-weight:600;
  font-size:14px;
}

.tp-gallery__plus-icon{
  font-size:42px;
  line-height:1;
}

/* ===== REMOVE BUTTON ===== */

.tp-gallery__remove{
  position:absolute;
  top:10px;
  right:10px;
  width:28px;
  height:28px;
  border-radius:50%;
  border:none;
  background:rgba(0,0,0,0.65);
  color:#fff;
  font-size:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:6;
}

.tp-gallery__remove:hover{
  background:rgba(0,0,0,0.85);
}
/* ===== TRACK ANIMATION ===== */

.tp-gallery__track{
  display:flex;
  height:100%;
  transition: transform 0.35s ease;
}

.tp-gallery__slide{
  min-width:100%;
  height:100%;
  position:relative;
}

.tp-gallery__slide img,
.tp-gallery__slide video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.tp-gallery__slide video{
  background:#111827;
}

.tp-gallery__video-badge{
  display:none !important;
}

.tp-gallery__counter{
  position:absolute;
  bottom:12px;
  right:12px;

  background:rgba(0,0,0,0.55);
  color:#fff;

  padding:4px 8px;
  border-radius:8px;

  font-size:12px;
  font-weight:700;
}
.tp-gallery{
  touch-action: pan-y;
}

/* ===== Public portfolio watermark ===== */
.tp-media-watermark{
  position:absolute;
  left:16px;
  bottom:14px;
  z-index:4;
  max-width:calc(100% - 32px);
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:#fff;
  font-size:15px;
  font-weight:800;
  letter-spacing:.018em;
  line-height:1;
  text-shadow:0 1px 8px rgba(0,0,0,.55), 0 0 2px rgba(0,0,0,.55);
  pointer-events:none;
  user-select:none;
  opacity:.46;
  mix-blend-mode:normal;
  backdrop-filter:none;
}

.tp-gallery__slide video::-webkit-media-controls{
  display:none !important;
}

.tp-gallery__slide video::-webkit-media-controls-enclosure{
  display:none !important;
}


/* ===== Offer gallery video sound toggle ===== */
.tp-gallery__sound-toggle{
  position:absolute;
  top:12px;
  right:12px;
  z-index:8;
  width:38px;
  height:38px;
  border:0;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(15,23,42,.58);
  color:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,.22);
  backdrop-filter:blur(10px);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.tp-gallery__sound-toggle svg{
  width:21px;
  height:21px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.tp-gallery__sound-toggle svg path:first-child{
  fill:currentColor;
  stroke:none;
}

.tp-gallery__sound-toggle.is-on{
  background:rgba(37,99,235,.72);
}

@media (max-width:640px){
  .tp-gallery__sound-toggle{
    top:10px;
    right:10px;
    width:36px;
    height:36px;
  }
}
