/* 0.1.339 — Magicians frontend photo uploader presentation only.
   Classes are applied after the uploader DOM has been identified by JS.
   No upload inputs, drop targets, attachment IDs or sortable handlers change. */
#geodirectory-add-post .cnjrly-photo-field {
  margin-bottom: 1.5rem;
}
#geodirectory-add-post .cnjrly-photo-field > label,
#geodirectory-add-post .cnjrly-photo-field > .geodir-field-label,
#geodirectory-add-post .cnjrly-photo-field > .col-form-label {
  color: var(--cj-text-primary, #292a30);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.4;
}
/* Replace the stock oversized dashed drop-zone with a quiet media panel.
   Keep the native drop target itself, rather than placing a new layer over it. */
#geodirectory-add-post .cnjrly-photo-upload-shell {
  box-sizing: border-box;
  width: 100%;
  min-height: 0 !important;
  height: auto !important;
  padding: 16px !important;
  margin-top: 5px;
  border: 1px solid var(--cj-border-light, #e6e7eb) !important;
  border-radius: var(--cj-radius-card, 14px) !important;
  background: var(--cj-surface-subtle, #f7f7f8) !important;
  box-shadow: none !important;
  overflow: visible;
  transition: border-color .15s ease, background-color .15s ease;
}
#geodirectory-add-post .cnjrly-photo-upload-shell:hover {
  border-color: var(--cj-border-medium, #c9cbd1) !important;
}
#geodirectory-add-post .cnjrly-photo-upload-shell:focus-within {
  border-color: var(--cj-indigo, #4c187e) !important;
}
#geodirectory-add-post .cnjrly-photo-upload-shell.cnjrly-photo-has-media {
  background: var(--cj-surface-subtle, #f7f7f8) !important;
}
/* The large empty-state headline becomes understated help text. */
#geodirectory-add-post .cnjrly-photo-upload-shell .cnjrly-photo-drop-prompt {
  margin: 0 0 var(--cj-space-3, 12px) !important;
  color: var(--cj-text-secondary, #62646a) !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
}
#geodirectory-add-post .cnjrly-photo-upload-shell.cnjrly-photo-has-media .cnjrly-photo-drop-prompt,
#geodirectory-add-post .cnjrly-photo-upload-shell .cnjrly-photo-or-prompt {
  display: none !important;
}
/* Preserve the actual Plupload trigger; only improve its styling. */
/* Native Plupload actions adopt the exact UI Core component styling.
   Preserve their original elements, event listeners and upload interactions. */
#geodirectory-add-post .cnjrly-photo-upload-shell .cnjrly-photo-select-button.cj-btn,
#geodirectory-add-post.cnjrly-magician-editor .cnjrly-upload-select-control.cj-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  height: var(--cj-btn-height) !important;
  min-height: var(--cj-btn-height) !important;
  padding: calc(var(--cj-btn-padding-y) + 2 * var(--cj-btn-optical-nudge, 0px)) var(--cj-btn-padding-x) var(--cj-btn-padding-y) !important;
  border: var(--cj-btn-border-width) solid var(--cj-btn-primary-border) !important;
  border-radius: var(--cj-btn-radius) !important;
  background: var(--cj-btn-primary-bg) !important;
  color: var(--cj-btn-primary-color) !important;
  font-family: var(--cj-btn-font-family) !important;
  font-size: var(--cj-btn-font-size) !important;
  font-weight: var(--cj-btn-font-weight) !important;
  line-height: var(--cj-btn-line-height) !important;
  text-decoration: none !important;
  cursor: pointer;
}
#geodirectory-add-post .cnjrly-photo-upload-shell .cnjrly-photo-select-button.cj-btn:hover:not(:disabled),
#geodirectory-add-post.cnjrly-magician-editor .cnjrly-upload-select-control.cj-btn:hover:not(:disabled) {
  background: var(--cj-btn-primary-hover-bg) !important;
  border-color: var(--cj-btn-primary-hover-border) !important;
  color: var(--cj-btn-primary-hover-color) !important;
}
#geodirectory-add-post.cnjrly-magician-editor .cnjrly-upload-select-control.cj-btn:focus-visible {
  outline: var(--cj-focus-ring-width, 2px) solid var(--cj-indigo, #4c187e);
  outline-offset: var(--cj-focus-ring-offset, 2px);
}
/* Thumbnails remain GeoDirectory-managed and sortable. */
#geodirectory-add-post .cnjrly-photo-upload-shell .plupload-thumbs,
#geodirectory-add-post .cnjrly-photo-upload-shell [id$="plupload-thumbs"] {
  margin-top: 12px !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
#geodirectory-add-post .cnjrly-photo-upload-shell .plupload-thumbs .thumb {
  border: 1px solid var(--cj-border-light, #e6e7eb);
  border-radius: var(--cj-radius-input, 10px) !important;
  overflow: hidden;
  background: #fff;
}
#geodirectory-add-post .cnjrly-photo-upload-shell .plupload-thumbs .thumb img {
  border-radius: inherit;
}
/* Native file-format help is useful, but should not dominate the gallery. */
#geodirectory-add-post .cnjrly-photo-upload-shell .cnjrly-photo-file-hint {
  color: var(--cj-text-secondary, #62646a) !important;
  font-size: .75rem !important;
  line-height: 1.4 !important;
}
@media (max-width: 767px) {
  #geodirectory-add-post .cnjrly-photo-upload-shell {
    padding: 12px !important;
  }
}

/* 0.1.355 — Shared uploader prompt/action spacing, independent of GD shell
   detection. This targets actual marked nodes only; no uploader DOM is moved.
   Uses the Conjurly spacing scale (12px = 3 × 4px). */
#geodirectory-add-post.cnjrly-magician-editor .cnjrly-upload-drop-text {
  display: block;
  margin: 0 0 var(--cj-space-3, 12px) !important;
  padding: 0 !important;
}
#geodirectory-add-post.cnjrly-magician-editor .cnjrly-upload-select-control {
  margin-top: 0 !important;
  vertical-align: middle;
}

/* 0.1.356 — Mobile Magicians media previews.
   Native GD thumbnail columns retain their original markup, event handlers,
   drag handles, and upload IDs. Only the visual grid/card dimensions change. */
@media (max-width: 767px) {
  form#geodirectory-add-post.cnjrly-magician-editor {
    --cnjrly-upload-thumb-single-max: 280px;
    --cnjrly-upload-thumb-gap: var(--cj-space-3, 12px);
  }
  /* Cover the ordinary GeoDirectory image rows and the description-image
     gallery; avoid changing logo registry chips or unrelated media blocks. */
  form#geodirectory-add-post.cnjrly-magician-editor :is(
    .cnjrly-photo-upload-shell,
    #description_images_row
  ) :is(.plupload-thumbs, [id$="plupload-thumbs"]) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start;
    gap: var(--cnjrly-upload-thumb-gap) !important;
    width: 100% !important;
    max-width: 100%;
  }
  form#geodirectory-add-post.cnjrly-magician-editor :is(
    .cnjrly-photo-upload-shell,
    #description_images_row
  ) :is(.plupload-thumbs, [id$="plupload-thumbs"]) > .col {
    flex: 0 0 calc((100% - var(--cnjrly-upload-thumb-gap)) / 2) !important;
    width: calc((100% - var(--cnjrly-upload-thumb-gap)) / 2) !important;
    max-width: calc((100% - var(--cnjrly-upload-thumb-gap)) / 2) !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0;
  }
  /* Single-upload fields deserve a readable preview, not a tiny grid tile. */
  form#geodirectory-add-post.cnjrly-magician-editor .cnjrly-photo-upload-shell :is(
    .plupload-thumbs, [id$="plupload-thumbs"]
  ) > .col:only-child {
    flex-basis: min(100%, var(--cnjrly-upload-thumb-single-max)) !important;
    width: min(100%, var(--cnjrly-upload-thumb-single-max)) !important;
    max-width: 100% !important;
  }
  form#geodirectory-add-post.cnjrly-magician-editor :is(
    .cnjrly-photo-upload-shell,
    #description_images_row
  ) :is(.plupload-thumbs, [id$="plupload-thumbs"]) .thumb {
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 110px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    box-sizing: border-box;
    border-radius: var(--cj-radius-input, 10px) !important;
    background: var(--cj-surface, #fff);
  }
  form#geodirectory-add-post.cnjrly-magician-editor :is(
    .cnjrly-photo-upload-shell,
    #description_images_row
  ) :is(.plupload-thumbs, [id$="plupload-thumbs"]) .thumb > img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    object-fit: contain !important;
  }
  /* Keep existing preview/edit/delete actions over the image, rather than
     clipping them or shrinking them with the legacy small thumbnail. */
  form#geodirectory-add-post.cnjrly-magician-editor :is(
    .cnjrly-photo-upload-shell,
    #description_images_row
  ) .gd-thumb-actions {
    width: 100% !important;
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    gap: var(--cj-space-2, 8px);
    justify-content: space-around;
  }
  form#geodirectory-add-post.cnjrly-magician-editor :is(
    .cnjrly-photo-upload-shell,
    #description_images_row
  ) .gd-thumb-actions > :is(a, span, button) {
    min-width: 36px;
    min-height: 36px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }
}

/* 0.1.370 — Compact only when uploaders have no media. Once thumbnails
   appear the existing natural-height layout and mobile grid remain intact.
   Do not move or replace GeoDirectory's drop targets or Plupload controls. */
form#geodirectory-add-post.cnjrly-magician-editor .cnjrly-photo-upload-shell:not(.cnjrly-photo-has-media),
form#geodirectory-add-post.cnjrly-magician-editor #description_images_row .cnjrly-description-upload-shell:not(.cnjrly-description-has-media) {
  min-height: 0 !important;
  height: auto !important;
  padding-block: var(--cj-space-3, 12px) !important;
}
form#geodirectory-add-post.cnjrly-magician-editor .cnjrly-photo-upload-shell:not(.cnjrly-photo-has-media) :is(.plupload-thumbs, [id$="plupload-thumbs"]),
form#geodirectory-add-post.cnjrly-magician-editor #description_images_row .cnjrly-description-upload-shell:not(.cnjrly-description-has-media) :is(.plupload-thumbs, [id$="plupload-thumbs"]) {
  min-height: 0 !important;
  margin-block: 0 !important;
  padding-block: 0 !important;
}

/* 0.1.371 — Correct the INNER GeoDirectory dropbox, not just the outer
   dashed upload panel. Native GD gives .geodir-files-dropbox a 100px
   min-height and keeps an empty .plupload-thumbs.mt-3 row in the DOM.
   Compact only empty uploaders; let populated ones keep natural sizing. */
.geodir-add-listing.bsui form#geodirectory-add-post.cnjrly-magician-editor
  .cnjrly-photo-upload-shell:not(.cnjrly-photo-has-media) > .geodir-files-dropbox,
.geodir-add-listing.bsui form#geodirectory-add-post.cnjrly-magician-editor
  #description_images_row .cnjrly-description-upload-shell:not(.cnjrly-description-has-media) > .geodir-files-dropbox {
  min-height: 0 !important;
  height: auto !important;
  padding-block: var(--cj-space-2, 8px) !important;
}
/* An empty thumbnails row should not reserve height, padding, or a rule. */
form#geodirectory-add-post.cnjrly-magician-editor
  :is(.cnjrly-photo-upload-shell:not(.cnjrly-photo-has-media),
      #description_images_row .cnjrly-description-upload-shell:not(.cnjrly-description-has-media))
  :is(.plupload-thumbs, [id$="plupload-thumbs"]):empty {
  display: none !important;
}
/* Reordering guidance is only useful once thumbnails actually exist. */
form#geodirectory-add-post.cnjrly-magician-editor
  :is(.cnjrly-photo-upload-shell:not(.cnjrly-photo-has-media),
      #description_images_row .cnjrly-description-upload-shell:not(.cnjrly-description-has-media))
  #upload-msg {
  display: none !important;
}