/**
 * CF7 Photo Upload Field — structural styles
 *
 * Minimal layout-only CSS. All visual styling (colors, borders, font sizes,
 * border-radius, thumb dimensions, etc.) is intentionally left to the theme.
 */

/* Hide the native file input — triggered programmatically */
.form-photos__file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Thumbnails row */
.form-photos__preview {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 12px 0 20px;
}

.form-photos__preview:empty {
  display: none;
}

/* Single thumbnail cell */
.form-photos__thumb {
  position: relative;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border: 1px solid #f0f0f0;
  object-fit: cover;
}

.form-photos__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Remove button — positioned top-left of each thumb */
.form-photos__remove {
  position: absolute;
  top: -8px;
  right: -8px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  line-height: 0;
}

.form-photos__remove:hover svg circle {
  fill: #eee;
}

/* Upload trigger button — full-width, flex children centred */
.form-photos__trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  width: 100%;
  cursor: pointer;
}

/* Disabled / maxed state */
.form-photos__trigger[disabled],
.form-photos.is-maxed .form-photos__trigger {
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}

/* .wpcf7-not-valid-tip is rendered by both CF7 (server-side) and our JS
   (client-side). Theme styles it; nothing extra needed here. */