/* Field container */
.acf-mif-wrap { border: 1px solid #e2e4e7; border-radius: 10px; background: #fff; }

/* Clickable/Drop zone */
.acf-mif-clickzone {
  position: relative;
  padding: 14px;
  min-height: 180px;
  border: 2px dashed #c9d1d9;
  border-radius: 10px;
  transition: background .2s ease, border-color .2s ease;
  cursor: pointer; /* THE ENTIRE BACKGROUND IS CLICKABLE */
}
.acf-mif-clickzone.is-hover { background: #f7fbff; border-color: #9ec5fe; }
.acf-mif-clickzone.has-items { border-style: solid; }

/* Header for buttons */
.acf-mif-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  position: relative;
  z-index: 3; /* keep header above grid so buttons are always clickable */
}

/* Actions group */
.acf-mif-actions { display: flex; align-items: center; gap: 8px; position: relative; z-index: 3; }

/* Add button */
.acf-mif-add {
  border: 1px solid #e5e7eb; background: #ffffff;
  padding: 6px 12px; border-radius: 6px; font-size: 13px; line-height: 1;
  cursor: pointer;
}

/* Left counter (pill) */
.acf-mif-counter {
  background: #f3f4f6; border: 1px solid #e5e7eb;
  border-radius: 999px; padding: 4px 10px; font-size: 12px; color:#374151;
  z-index: 3; padding-bottom: 2px;
}
.acf-mif-left-label { margin-right: 4px; opacity: .8; }

/* Grid */
.acf-mif-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 10px;
  cursor: pointer; /* gaps/empty areas open the file dialog */
}
.acf-mif-grid:empty { display: none; }

/* Keep drag cursor on items */
.acf-mif-grid .acf-mif-item { cursor: grab; }
.acf-mif-grid .acf-mif-item.dragging { cursor: grabbing; }

/* Items */
.acf-mif-item {
  position: relative; border: 1px solid #e5e7eb; border-radius: 8px;
  background:#fafafa; overflow: hidden;
  cursor: grab; user-select: none;
}
.acf-mif-item.dragging { opacity: .6; cursor: grabbing; }
.acf-mif-item .acf-mif-thumb { width: 100%; height: 90px; background:#f1f5f9; display:flex; align-items:center; justify-content:center; }
.acf-mif-item .acf-mif-thumb img { display:block; width:100%; height:100%; object-fit: cover; pointer-events: none; }
.acf-mif-item .acf-mif-thumb.skeleton {
  background: linear-gradient(90deg, #f1f5f9 25%, #e5e7eb 37%, #f1f5f9 63%);
  background-size: 400% 100%; animation: mifShimmer 1.2s ease-in-out infinite;
}
@keyframes mifShimmer { 0%{background-position: 100% 0} 100%{background-position: 0 0} }



/* Drag handle */
.acf-mif-handle { height: 18px; display:flex; align-items:center; justify-content:center; border-top: 1px solid #e5e7eb; background:#fff; }
.acf-mif-handle::before { content: "⋮⋮"; line-height: 1; color:#9ca3af; font-size: 16px; }

/* Progress bar */
.acf-mif-progress { position: absolute; left: 8px; right: 8px; bottom: 28px; background: #fff; border: 1px solid #e5e7eb; border-radius: 999px; height: 6px; overflow: hidden; display:flex; align-items:center; }
.acf-mif-progress .bar { height: 100%; width: 0%; background: #60a5fa; transition: width .15s linear; }
.acf-mif-progress .pct { position:absolute; top:-18px; right:0; font-size:11px; color:#374151; }

/* Shake on max */
.acf-mif-clickzone.mif-shake { animation: mifShake .4s ease; }
@keyframes mifShake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } }

/* Focus */
.acf-mif-clickzone:focus { outline: 2px solid #93c5fd; outline-offset: 2px; }

/* Form Blocker */
.acf-mif-form-blocker { position: relative; margin-top: 10px; padding: 10px 12px; background: #fff7ed; border: 1px solid #fdba74; border-radius: 8px; color: #9a3412; font-size: 13px; }
.acf-mif-submit-disabled { opacity:.7; pointer-events:none; }

/* Force hand cursor in the gaps/background, keep drag on tiles */
.acf-mif-wrap .acf-mif-clickzone .acf-mif-grid { cursor: pointer !important; }
.acf-mif-wrap .acf-mif-grid .acf-mif-item,
.acf-mif-wrap .acf-mif-grid .acf-mif-item { cursor: grab !important; }
.acf-mif-wrap .acf-mif-grid .acf-mif-item.dragging,
.acf-mif-wrap .acf-mif-grid .acf-mif-item.dragging * { cursor: grabbing !important; }

/* Remove-all button (header) */
.acf-mif-remove-all,
.acf-mif-remove-all.is-disabled,
.acf-mif-remove-all:disabled {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}
.acf-mif-remove-all.is-disabled,
.acf-mif-remove-all:disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}
/* Hide "Remove all" when there are no items (JS toggles .has-items on the zone) */
.acf-mif-clickzone:not(.has-items) .acf-mif-remove-all {
  visibility: hidden;
  pointer-events: none;
}

/* === HINT: always centered and large === */
/* Base look */
.acf-mif-empty-hint {
  display: block;
  text-align: center;
  padding: 28px 6px;
  font-size: 13px;
  color: #6b7280;
}
/* When items exist, keep same centered look; just place it under the grid */
.acf-mif-clickzone.has-items .acf-mif-empty-hint {
  margin-top: 8px;    /* sits under the grid */
  text-align: center; /* stays centered */
  padding: 28px 6px;  /* keep “large” spacing */
  font-size: 13px;    /* keep “large” size */
}

.acf-mif-add{
display: none;
}
/* Remove button on tiles */
.acf-mif-remove {
  position: absolute; top: 4px; right: 4px; border: 0; background: #ef4444;
  color: #fff; width: 22px; height: 22px; border-radius: 50%;
  line-height: 20px; text-align: center; cursor: pointer; z-index: 5; padding: 3px !important; cursor: pointer !important; 
}

/* === Full (at max) state === */
.acf-mif-clickzone.mif-full .acf-mif-empty-hint {
  display: none !important; /* hide the lower text when 8 reached */
}

.acf-mif-clickzone.mif-full {
  cursor: default; /* background/gaps stop inviting clicks */
}

/* keep drag on tiles even when full */
.acf-mif-clickzone.mif-full .acf-mif-grid { cursor: default !important; }
.acf-mif-grid .acf-mif-item,
.acf-mif-grid .acf-mif-item { cursor: grab !important; }

/* Hide "Remove all" until there are two or more images */
.acf-mif-clickzone:not(.mif-two-plus) .acf-mif-remove-all {
  display: none !important;
}

/* Only if the class attribute is exactly this string, in this order */
[class="acf-field acf-field-group acf-field-65a284a8c400c group-images"] {
  display: none;
}

/* Only if the class attribute is exactly this string, in this order */
[class="acf-field acf-field-group acf-field-65d131753661d group-images"] {
  display: none;
}

/* Make touch reordering smooth */
.acf-mif-grid,
.acf-mif-grid .acf-mif-item {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: manipulation; /* normal taps/scrolls OK */
}

/* While touch-dragging, lock scrolling so the grid doesn't fight the page */
.acf-mif-grid.is-touch-dragging {
  touch-action: none;
}


/* Let the grid receive real pointermove on touch (Safari needs this set up-front) */
.acf-mif-grid .acf-mif-item {
  touch-action: none;            /* important for iOS Safari */
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;   /* no long-press callout */
}

/* While touch-dragging, let hits pass through the dragged tile to what's underneath */
.acf-mif-grid.is-touch-dragging .acf-mif-item.dragging {
  pointer-events: none;
}

/* Optional: lock page scroll only during a drag gesture */
.acf-mif-grid.is-touch-dragging { touch-action: none; }

/* MUST be on the touched element *before* pointerdown */
.acf-mif-grid .acf-mif-item {
  touch-action: none;            /* ← was 'manipulation' — change to 'none' */
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

/* During touch-drag, let hits pass through the dragged tile so elementFromPoint()
   can see neighbors under your finger. */
.acf-mif-grid.is-touch-dragging .acf-mif-item.dragging {
  pointer-events: none;
}

/* Optional: also lock scroll only while dragging */
.acf-mif-grid.is-touch-dragging { touch-action: none; }