/* ==========================================================
   BMD Lightbox • Diamond Cut
   - Clean structure
   - Mobile controls fixed
   - Title safe-zone (never overlaps thumbs)
   ========================================================== */

.bmd-lightbox[hidden]{display:none!important}

.bmd-lightbox{
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(0,0,0,.85);
  backdrop-filter: blur(12px);
}

/* Dialog layout */
.bmd-lb-dialog{
  height:100%;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:14px;
  position:relative; /* anchor for absolute title on mobile if needed */
}

/* Top bar */
.bmd-lb-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:rgba(255,255,255,.08);
  border-radius:16px;
  padding:10px 14px;
}

/* Title (desktop/default) */
.bmd-lb-title{
  color:#fff;
  opacity:.92;
  font-size:15px;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0; /* allow ellipsis in flex */
}

/* Tools */
.bmd-lb-tools{
  display:flex;
  gap:10px;
}

.bmd-lb-tools button{
  width:42px;
  height:42px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.12);
  color:#fff;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.bmd-lb-tools button:active{
  transform: scale(.98);
}

/* Stage */
.bmd-lb-stage{
  flex:1;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Images */
.lb-img{
  position:absolute;
  max-width:96vw;
  max-height:70vh;
  opacity:0;
  transition:opacity .22s ease, transform .22s ease;
  border-radius:18px;
  transform: scale(.995);
}
.lb-img.active{
  opacity:1;
  transform: scale(1);
}

/* Nav arrows */
.lb-nav{
  position:fixed;
  top:50%;
  transform:translateY(-50%);
  font-size:38px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  width:56px;
  height:56px;
  color:#fff;
  cursor:pointer;
}
.lb-nav.prev{left:16px}
.lb-nav.next{right:16px}

/* Thumbs strip */
.bmd-lb-thumbs{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.bmd-lb-thumbs::-webkit-scrollbar{display:none}

.bmd-lb-thumbs img{
  height:64px;
  border-radius:12px;
  opacity:.55;
  cursor:pointer;
  border:1px solid rgba(255,255,255,.10);
  transition: opacity .16s ease, transform .16s ease;
}
.bmd-lb-thumbs img.active{
  opacity:1;
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.22);
}

/* Footer */
.bmd-lb-footer{
  display:flex;
  align-items:center;
  gap:12px;
  color:rgba(255,255,255,.75);
  font-size:14px;
}

.lb-progress{
  flex:1;
  height:8px;
  background:rgba(255,255,255,.12);
  border-radius:99px;
  overflow:hidden;
}

#lbBar{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,#ff3355,#ff7799);
}

/* ==========================================================
   Mobile
   ========================================================== */
@media (max-width: 520px){

  /* Top becomes 2-row: title row + tools row */
  .bmd-lb-top{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    padding:10px 12px;
  }

  /* Tools in a clean 4-grid (no 3+1 ugly wrap) */
  .bmd-lb-tools{
    width:100%;
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap:10px;
  }

  .bmd-lb-tools button{
    width:100%;
    height:44px;
    border-radius:14px;
    font-size:18px;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.12);
  }

  /* Close slightly emphasized */
  .bmd-lb-tools [data-lb-close]{
    background: rgba(255,255,255,.16);
    border-color: rgba(255,255,255,.16);
  }

  /* ==========================
     Title "Premium" placement:
     - centered
     - NEVER overlaps thumbs
     - sits above progress/footer area safely
     ========================== */

  .bmd-lb-title{
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 118px; /* safe: above thumbs + progress bar */
    max-width: 88%;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,.90);
    text-shadow: 0 2px 14px rgba(0,0,0,.65);
    pointer-events: none;
    z-index: 5;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(0,0,0,.32);
    backdrop-filter: blur(8px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Make room so stage doesn't feel cramped */
  .bmd-lb-stage{
    padding-top: 6px;
  }

  /* Reduce thumbs size a little (better on Xiaomi/Chrome bars) */
  .bmd-lb-thumbs img{
    height:58px;
    border-radius:12px;
  }

  /* Slightly smaller nav */
  .lb-nav{
    width:50px;
    height:50px;
    border-radius:16px;
    font-size:34px;
  }
}

/* Ultra-narrow phones: 2x2 tools grid */
@media (max-width: 360px){
  .bmd-lb-tools{
    grid-template-columns: repeat(2, 1fr);
  }

  /* Still keep title away from thumbs */
  .bmd-lb-title{
    bottom: 126px;
  }
}