/* FR Frontend Gallery v1.9 */
.frfg-upload-form {
  border: 1px solid #e5e7eb;
  padding: 1rem;
  border-radius: .5rem;
  max-width: 900px;
  background: #fff;
  display: grid;
  gap: .75rem;
}
.frfg-btn {
  background: #111827;
  color: #fff;
  border: 0;
  padding: .5rem .9rem;
  border-radius: .5rem;
  cursor: pointer;
  font-size: .95rem;
}
.frfg-upload-form .frfg-help {
  font-size: .875rem;
  color: #6b7280;
}

/* Drag & drop zone */
.frfg-dropzone {
  position: relative;
  border: 2px dashed #9ca3af;
  border-radius: .5rem;
  padding: 1.25rem;
  text-align: center;
  background: #f9fafb;
  cursor: pointer;
}
.frfg-dropzone.dragover { background: #eef2ff; border-color: #6366f1; }
.frfg-dropzone .frfg-droptext { display: block; color: #4b5563; margin-bottom: .5rem; font-size: .95rem; }
.frfg-dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }

/* Preview grid + per-file caption */
.frfg-preview-wrap { border-top: 1px solid #e5e7eb; padding-top: .5rem; }
.frfg-preview-meta { color: #374151; font-size: .95rem; margin-bottom: .25rem; display:flex; align-items:center; gap:.5rem; }
.frfg-clear { background:#6b7280; }
.frfg-preview-grid { display: grid; gap: .5rem; grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1024px) { .frfg-preview-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px)  { .frfg-preview-grid { grid-template-columns: repeat(3, 1fr); } }
.frfg-preview-item { display:grid; gap:.25rem; }
.frfg-preview-thumb { aspect-ratio: 1/1; overflow: hidden; border-radius: .375rem; background: #f3f4f6; display: grid; place-items: center; }
.frfg-preview-thumb img { width: 100%; height: 100%; object-fit: cover; display:block; }
.frfg-preview-thumb .frfg-nonimg { font-size: .8rem; color: #6b7280; padding: .25rem; text-align:center; word-break: break-word; }
.frfg-file-caption { width: 100%; padding: .35rem .5rem; border: 1px solid #d1d5db; border-radius: .375rem; font-size: .85rem; box-sizing: border-box; }

/* Per-file and overall progress */
.frfg-filebar { height: .4rem; background: #f3f4f6; border-radius: .375rem; overflow: hidden; }
.frfg-filebar-fill { height: 100%; width: 0%; background: #60a5fa; transition: width .2s linear; }
.frfg-file-status { font-size: .8rem; color: #6b7280; }

.frfg-progressbar { height: .75rem; background: #f3f4f6; border-radius: .5rem; overflow: hidden; display: none; }
.frfg-progressbar-fill { height: 100%; width: 0%; background: #10b981; transition: width .2s ease; }
.frfg-progress { margin-top: .25rem; font-size: .95rem; }

.frfg-done { display:none; align-items:center; gap:.75rem; }
.frfg-refresh-btn { background:#2563eb; }

/* Gallery */
.frfg-gallery-wrap { display: grid; gap: .75rem; }
.frfg-manage-toggle { justify-self: end; }
.frfg-gallery { --frfg-ratio: 1 / 1; display: grid; gap: .5rem; }
.frfg-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.frfg-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.frfg-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.frfg-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.frfg-cols-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1024px) { .frfg-cols-6, .frfg-cols-5, .frfg-cols-4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .frfg-cols-6, .frfg-cols-5, .frfg-cols-4, .frfg-cols-3 { grid-template-columns: repeat(2, 1fr); } }

.frfg-item { display: block; position: relative; overflow: hidden; border-radius: .375rem; aspect-ratio: var(--frfg-ratio); }
.frfg-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s ease; }
.frfg-item:hover img { transform: scale(1.02); }
.frfg-card { display:flex; flex-direction:column; gap:.25rem; }
.frfg-caption { font-size: .9rem; color: #374151; }

.frfg-delete-form { display: none; text-align: right; }
body.frfg-manage-on .frfg-delete-form { display: block; }
.frfg-btn-danger { background: #b91c1c; color: #fff; border: 0; padding: .4rem .7rem; border-radius: .375rem; cursor: pointer; }

/* Lightbox */
.frfg-lightbox[aria-hidden="true"] { display: none; }
.frfg-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.9); display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto 1fr auto; align-items: center; justify-items: center; z-index: 9999; padding: 1rem; }
.frfg-lightbox-inner { grid-column: 2; grid-row: 2; max-width: 95vw; max-height: 85vh; display: flex; align-items: center; justify-content: center; }
.frfg-figure { margin: 0; max-width: 95vw; max-height: 85vh; display: grid; gap:.5rem; justify-items: center; }
#frfg-lightbox-img { max-width: 95vw; max-height: 75vh; }
#frfg-lightbox-cap { color: #e5e7eb; font-size: 1rem; text-align: center; }
.frfg-prev, .frfg-next, .frfg-close { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.3); padding: .5rem .75rem; border-radius: .375rem; cursor: pointer; }
.frfg-prev { grid-column: 1; grid-row: 2; }
.frfg-next { grid-column: 3; grid-row: 2; }
.frfg-close { grid-column: 3; grid-row: 1; }