/* Frontend gallery lightbox for article.php */

.galleryGrid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 180px));
  justify-content:start;
  align-items:start;
  gap:10px;
  margin-top:10px;
}
.galleryThumb{
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(120,200,255,.22);
  border-radius:14px;
  overflow:hidden;
  background: rgba(255,255,255,.05);
  cursor:pointer;
  text-decoration:none;
}
.galleryThumb img{
  display:block;
  width:100%;
  aspect-ratio: 6 / 5;
  height:auto;
  object-fit:cover;
}


@media (max-width: 520px){
  .galleryGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 340px){
  .galleryGrid{
    grid-template-columns: 1fr;
  }
}

/* Lightbox overlay */
.lbx{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.78);
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:99999;
}
.lbx.on{ display:flex; }

.lbxBox{
  width:min(900px, 96vw);color:#eeeeee;
  max-height: 92vh;
  border:1px solid rgba(120,200,255,.25);
  border-radius:18px;
  overflow:hidden;
  background:#0b1024;
  box-shadow:0 24px 70px rgba(0,0,0,.55);
}

.lbxHead{
	
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(0,0,0,.12));
  border-bottom:1px solid rgba(120,200,255,.18);
}
.lbxHead strong{
  font-size:13px;
  letter-spacing:.3px;
}
.lbxHead .btn{
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  padding:6px 10px;
  background:rgba(255,255,255,.08);
  color:#e7f0ff;
  cursor:pointer;
  font-size:12px;
}
.lbxHead .btn:hover{ background:rgba(255,255,255,.12); }

.lbxBody{
  display:grid;
  grid-template-columns: 1fr 340px;
  gap:0;
  max-height: calc(92vh - 46px);
}
@media (max-width: 960px){
  .lbxBody{ grid-template-columns: 1fr; }
}

.lbxImg{
  background:rgba(0,0,0,.32);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:320px;
}
.lbxImg img{
  max-width:100%;
  max-height: calc(92vh - 90px);
  display:block;
  user-select:none;
  -webkit-user-drag:none;
}

.lbxMeta{
  padding:12px;
  border-left:1px solid rgba(120,200,255,.18);
  overflow:auto;
}
.lbxMeta p{
  margin:0 0 10px;
  font-size:12px;
  line-height:1.35;
}
.lbxMeta .lab{ opacity:.82; }
.lbxMeta a{ color:#9ee7ff; }

.lbxNav{
  display:flex;
  gap:8px;
  margin-top:10px;
  flex-wrap:wrap;
}
.lbxNav .btn{ text-decoration:none; display:inline }

/* Theme tweaks */
.theme-day .lbxBox{
  background:#f3f7ff;
  color:#102030;
  border-color: rgba(0,90,160,.25);
}
.theme-day .lbxHead{
  background:linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.02));
  border-bottom-color: rgba(0,90,160,.18);
}
.theme-day .lbxHead .btn{
  color:#f02030;
  background:rgba(10,0,0,.05);
  border-color: rgba(0,90,160,.22);
}
.theme-day .lbxImg{ background:rgba(0,0,0,.06); }
.theme-day .lbxMeta{ border-left-color: rgba(0,90,160,.18); }
.theme-day .lbxMeta a{ color:#005aa0; }

.theme-flash .lbxBox{
  border-color: rgba(160,255,255,.38);
  box-shadow:0 26px 80px rgba(0,0,0,.6), 0 0 26px rgba(60,255,255,.10);
}
.theme-flash .lbxHead{
  background:linear-gradient(180deg, rgba(160,255,255,.14), rgba(0,0,0,.14));
}
.theme-flash .lbxHead strong{
  text-shadow: 0 0 10px rgba(160,255,255,.35);
}



/* --- Thumb pager (gallery thumbs pagination) --- */
.thumbPager{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  margin:12px 0 0;
}
.thumbPager .btn{
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  padding:6px 10px;
  background:rgba(255,255,255,.08);
  color:#e7f0ff;
  cursor:pointer;
  font-size:12px;
}
.thumbPager .btn:hover{ background:rgba(255,255,255,.12); }
.thumbPager .nums{
  display:flex;
  gap:6px;
  align-items:center;
  flex-wrap:wrap;
}
.thumbPager .nums .btn{ min-width:34px; padding:6px 8px; }
.thumbPager .btn.active{
  background:rgba(160,255,255,.14);
  border-color: rgba(160,255,255,.35);
  box-shadow: 0 0 16px rgba(60,255,255,.10);
}
.theme-day .thumbPager .btn{
  color:#f02030;
  background:rgba(10,0,0,.05);
  border-color: rgba(0,90,160,.22);
}
.theme-day .thumbPager .btn.active{
  background:rgba(0,90,160,.10);
  border-color: rgba(0,90,160,.35);
}

/* --- "Send som kort" dialog (e-card) --- */
.cardDlg{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.78);
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:100001;
}
.cardDlg.on{ display:flex; }

.cardDlgBox{
  width:min(980px, 96vw);
  max-height:92vh;
  border:1px solid rgba(120,200,255,.25);
  border-radius:18px;
  overflow:hidden;
  background:#0b1024;
  color:#eeeeee;
  box-shadow:0 24px 70px rgba(0,0,0,.55);
}
.cardDlgHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(0,0,0,.12));
  border-bottom:1px solid rgba(120,200,255,.18);
}
.cardDlgHead strong{ font-size:13px; letter-spacing:.3px; }
.cardDlg .btn{
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  padding:6px 10px;
  background:rgba(255,255,255,.08);
  color:#e7f0ff;
  cursor:pointer;
  font-size:12px;
  text-decoration:none;
  display:inline-block;
}
.cardDlg .btn:hover{ background:rgba(255,255,255,.12); }
.cardDlg .btn.disabled{
  opacity:.55;
  pointer-events:none;
}

.cardDlgBody{
  display:grid;
  grid-template-columns: 1fr 360px;
  gap:0;
  max-height: calc(92vh - 46px);
}
@media (max-width: 960px){
  .cardDlgBody{ grid-template-columns: 1fr; }
}

.cardPreview{
  padding:12px;
  background:rgba(0,0,0,.28);
  border-right:1px solid rgba(120,200,255,.18);
}
@media (max-width: 960px){
  .cardPreview{ border-right:0; border-bottom:1px solid rgba(120,200,255,.18); }
}

.cardFlip{
  width:100%;
  aspect-ratio: 16 / 10;
  max-height: 58vh;
  transform-style:preserve-3d;
  transition: transform .55s ease;
  perspective:1200px;
  position:relative;
}
.cardFlip.flipped{ transform: rotateY(180deg); }

.cardFace{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(120,200,255,.18);
  background:rgba(0,0,0,.25);
}
.cardFront img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
}
.cardBack{
  transform: rotateY(180deg);
  background:linear-gradient(180deg, rgba(120,10,0,.40), rgba(20,0,0,.75));
  color:#fff;
}
.cardBackInner{
  height:100%;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.cardBackTitle{
  font-weight:700;
  font-size:16px;
  text-shadow: 0 0 10px rgba(0,0,0,.35);
}
.cardBackMsg{
  flex:1;
  white-space:pre-wrap;
  line-height:1.35;
  opacity:.98;
}
.cardBackFrom{
  font-style:italic;
  opacity:.9;
}

.cardPreviewNav{
  margin-top:12px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.cardForm{
  padding:12px;
  overflow:auto;
}
.cardForm .row{ margin-bottom:10px; }
.cardForm label{
  display:block;
  font-size:12px;
  opacity:.85;
  margin-bottom:4px;
}
.cardForm input, .cardForm textarea{
  width:100%;
  border:1px solid rgba(120,200,255,.22);
  border-radius:12px;
  padding:8px 10px;
  background:rgba(255,255,255,.06);
  color:inherit;
  outline:none;
}
.cardForm textarea{ resize:vertical; min-height:110px; }
.cardForm .hp{ display:none; }

.cardActions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:8px;
}
.cardStatus{
  margin-top:10px;
  font-size:12px;
  opacity:.9;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
}
.cardStatus.ok{ border-color: rgba(80,255,160,.25); background:rgba(80,255,160,.10); }
.cardStatus.err{ border-color: rgba(255,80,120,.25); background:rgba(255,80,120,.10); }
.cardHint{ font-size:12px; opacity:.72; margin-top:10px; }

.theme-day .cardDlgBox{
  background:#f3f7ff;
  color:#102030;
  border-color: rgba(0,90,160,.25);
}
.theme-day .cardDlgHead{
  background:linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.02));
  border-bottom-color: rgba(0,90,160,.18);
}
.theme-day .cardDlg .btn{
  color:#f02030;
  background:rgba(10,0,0,.05);
  border-color: rgba(0,90,160,.22);
}
.theme-day .cardForm input, .theme-day .cardForm textarea{
  background:rgba(0,0,0,.03);
  border-color: rgba(0,90,160,.20);
}
.theme-day .cardBack{
  background:linear-gradient(180deg, rgba(160,50,40,.22), rgba(10,0,0,.10));
  color:#102030;
}

.theme-flash .cardDlgBox{
  border-color: rgba(160,255,255,.38);
  box-shadow:0 26px 80px rgba(0,0,0,.6), 0 0 26px rgba(60,255,255,.10);
}


/* Disabled state for buttons inside lightbox meta actions */
.lbxNav button.btn:disabled,
.lbxNav .btn.disabled{
  opacity:.55;
  cursor:not-allowed;
}