/* =========================================================
   EF Upload UX Enhancer (Formidable Form 9)
   v6.1.0

   Companion CSS for current ff9-upload-ux.js

   Goals:
   - Style outer upload module shells
   - Style only the custom upload UI
   - Keep native Dropzone visually buried but operational
   - Support below-gallery template upload host
   - Give selected template tile a premium active state
========================================================= */

/* -----------------------------
   0) TOKENS
----------------------------- */
:root{
  --ef-u-radius: 18px;
  --ef-u-radius-sm: 14px;

  --ef-u-dash: rgba(255,255,255,.22);
  --ef-u-ink: rgba(255,255,255,.92);
  --ef-u-dim: rgba(255,255,255,.70);

  --ef-u-core: rgba(10,10,12,.58);
  --ef-u-top: rgba(255,255,255,.05);
  --ef-u-bot: rgba(0,0,0,.32);

  --ef-u-gold: rgba(216,189,120,.85);
  --ef-u-gold-mid: rgba(216,189,120,.42);
  --ef-u-gold-dim: rgba(216,189,120,.16);

  --ef-u-tile-size: 150px;
  --ef-u-tile-radius: 14px;
  --ef-u-ease: 220ms ease;
}

/* -----------------------------
   1) OUTER MODULE SHELLS
----------------------------- */
#frm_field_517_container,
#frm_field_574_container{
  padding: 14px;
  border-radius: var(--ef-u-radius);
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(1200px 520px at 16% 0%, rgba(216,189,120,.10), transparent 60%),
    radial-gradient(900px 520px at 86% 18%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.28)),
    rgba(8,8,10,.42);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.55) inset,
    0 18px 54px rgba(0,0,0,.32);
  position: relative;
  overflow: hidden;
}

#frm_field_517_container::before,
#frm_field_574_container::before{
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: calc(var(--ef-u-radius) - 6px);
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 35%, rgba(0,0,0,0) 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, rgba(0,0,0,0) 1px 14px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.016) 0 1px, rgba(0,0,0,0) 1px 18px);
  opacity: .30;
  mix-blend-mode: screen;
}

#frm_field_517_container{
  display: flex !important;
  flex-direction: column !important;
  align-self: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin-left: 0 !important;
}

#frm_field_574_container{
  width: 100%;
  max-width: 100%;
}

#frm_field_517_container > label,
#frm_field_574_container > label{
  display: block;
  margin: 0 0 10px 2px;
  color: rgba(255,255,255,.82);
  font-weight: 850;
  letter-spacing: .25px;
  font-size: 12px;
  position: relative;
  z-index: 2;
}

/* -----------------------------
   2) NATIVE DROPZONE
   Keep functional, bury visually
----------------------------- */
#frm_form_9_container #file517_dropzone,
#frm_form_9_container #file574_dropzone{
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  width: 1px !important;
  min-width: 1px !important;
  max-width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  max-height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

#frm_form_9_container #file517_dropzone.ef-upload-native-hidden .dz-message,
#frm_form_9_container #file574_dropzone.ef-upload-native-hidden .dz-message,
#frm_form_9_container #file517_dropzone.ef-upload-native-hidden .dz-preview,
#frm_form_9_container #file574_dropzone.ef-upload-native-hidden .dz-preview,
#frm_form_9_container #file517_dropzone.ef-upload-native-hidden .frm_uploaded_files,
#frm_form_9_container #file574_dropzone.ef-upload-native-hidden .frm_uploaded_files,
#frm_form_9_container #file517_dropzone.ef-upload-native-hidden .frm_uploaded_file,
#frm_form_9_container #file574_dropzone.ef-upload-native-hidden .frm_uploaded_file,
#frm_form_9_container #file517_dropzone.ef-upload-native-hidden .dz-progress,
#frm_form_9_container #file574_dropzone.ef-upload-native-hidden .dz-progress,
#frm_form_9_container #file517_dropzone.ef-upload-native-hidden .dz-details,
#frm_form_9_container #file574_dropzone.ef-upload-native-hidden .dz-details,
#frm_form_9_container #file517_dropzone.ef-upload-native-hidden .dz-error-message,
#frm_form_9_container #file574_dropzone.ef-upload-native-hidden .dz-error-message,
#frm_form_9_container #file517_dropzone.ef-upload-native-hidden .dz-success-mark,
#frm_form_9_container #file574_dropzone.ef-upload-native-hidden .dz-success-mark,
#frm_form_9_container #file517_dropzone.ef-upload-native-hidden .dz-error-mark,
#frm_form_9_container #file574_dropzone.ef-upload-native-hidden .dz-error-mark,
#frm_form_9_container #file517_dropzone.ef-upload-native-hidden .dz-remove,
#frm_form_9_container #file574_dropzone.ef-upload-native-hidden .dz-remove,
#frm_form_9_container #file517_dropzone.ef-upload-native-hidden .frm_upload_text,
#frm_form_9_container #file574_dropzone.ef-upload-native-hidden .frm_upload_text,
#frm_form_9_container #file517_dropzone.ef-upload-native-hidden .frm_compact_text,
#frm_form_9_container #file574_dropzone.ef-upload-native-hidden .frm_compact_text,
#frm_form_9_container #file517_dropzone.ef-upload-native-hidden .frm_small_text,
#frm_form_9_container #file574_dropzone.ef-upload-native-hidden .frm_small_text,
#frm_form_9_container #file517_dropzone.ef-upload-native-hidden .frmsvg,
#frm_form_9_container #file574_dropzone.ef-upload-native-hidden .frmsvg,
#frm_form_9_container #file517_dropzone.ef-upload-native-hidden svg,
#frm_form_9_container #file574_dropzone.ef-upload-native-hidden svg{
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* -----------------------------
   3) CUSTOM UI SHELL
----------------------------- */
#frm_form_9_container .ef-upload-ui-shell{
  position: relative;
  z-index: 3;
  width: 100%;
}

#frm_form_9_container .ef-upload-ui-shell *{
  box-sizing: border-box;
}

#frm_form_9_container .ef-upload-drop-active{
  outline: 1px solid rgba(216,189,120,.36);
  box-shadow:
    0 0 0 1px rgba(216,189,120,.18) inset,
    0 0 24px rgba(216,189,120,.16);
}

#frm_form_9_container .ef-upload-btn{
  appearance: none;
  border-radius: 10px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .2px;
  background: rgba(0,0,0,.44);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 0 rgba(0,0,0,.40);
  box-shadow: 0 0 0 1px rgba(0,0,0,.40) inset;
  cursor: pointer;
  transition:
    transform .08s ease,
    background .15s ease,
    border-color .15s ease,
    opacity .15s ease,
    box-shadow .15s ease;
}

#frm_form_9_container .ef-upload-btn:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(216,189,120,.42);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.40) inset,
    0 0 14px rgba(216,189,120,.10);
}

#frm_form_9_container .ef-upload-btn:active{
  transform: translateY(1px);
}

#frm_form_9_container .ef-upload-btn:disabled{
  opacity: .45;
  cursor: not-allowed;
}

/* ---------------------------------
   SECTION 4) SINGLE UI - FORCE EXPANSION
---------------------------------- */

/* This prevents the stage from ever being capped at 433px */
.ef-upload-ui-shell[data-ef-upload="single"] .ef-upload-single-stage {
    height: auto !important;
    min-height: 200px !important;
    max-height: none !important;
    display: block !important;
    overflow: visible !important;
}

/* Ensure the inner media container doesn't have a hidden height */
.ef-upload-single-media {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Ensure the canvas fills the width */
.ef-upload-single-media canvas {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: fill !important;
}


/* -----------------------------
   5) MULTI UI
----------------------------- */
#frm_form_9_container .ef-upload-ui-shell[data-ef-upload="multi"]{
  display: block !important;
  width: 100% !important;
}

#frm_form_9_container .ef-upload-multi-shell{
  position: relative;
  width: 100%;
  min-height: 340px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(1200px 520px at 20% 0%, rgba(216,189,120,.10), transparent 62%),
    radial-gradient(900px 520px at 85% 20%, rgba(255,255,255,.05), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.24)),
    rgba(10,10,12,.28);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.55) inset,
    0 16px 46px rgba(0,0,0,.28);
  cursor: pointer;
}

#frm_form_9_container .ef-upload-multi-topbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px 0 12px;
}

#frm_form_9_container .ef-upload-multi-meta{
  color: rgba(255,255,255,.72);
  font-size: 11px;
  line-height: 1.1;
}

#frm_form_9_container .ef-upload-multi-meta strong{
  display: block;
  color: rgba(255,255,255,.92);
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 4px;
}

#frm_form_9_container .ef-upload-multi-gallery{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 12px;
  align-content: start;
  padding: 12px;
  width: 100%;
}

#frm_form_9_container .ef-upload-multi-gallery.is-single-item{
  grid-template-columns: minmax(0, 50%);
  justify-content: start;
}

#frm_form_9_container .ef-upload-multi-gallery.is-single-item .ef-upload-tile{
  max-width: 100%;
}

#frm_form_9_container .ef-upload-multi-empty{
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  text-align: center;
}

#frm_form_9_container .ef-upload-multi-empty-copy{
  color: rgba(255,255,255,.80);
  font-size: 13px;
  line-height: 1.35;
  max-width: 280px;
}

#frm_form_9_container .ef-upload-multi-empty-copy strong{
  display: block;
  color: rgba(255,255,255,.92);
  font-weight: 900;
  margin-bottom: 6px;
}

#frm_form_9_container .ef-upload-tile{
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.26);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.55) inset,
    0 10px 26px rgba(0,0,0,.22);
  aspect-ratio: 4 / 3;
  cursor: default;
}

#frm_form_9_container .ef-upload-tile-media{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.18);
  overflow: hidden;
}

#frm_form_9_container .ef-upload-tile-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#frm_form_9_container .ef-upload-tile-pdf{
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.92);
  font-weight: 950;
  letter-spacing: .8px;
  background:
    radial-gradient(900px 420px at 20% 0%, rgba(216,189,120,.20), transparent 60%),
    rgba(0,0,0,.28);
}

#frm_form_9_container .ef-upload-tile::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56px;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.62));
  z-index: 4;
  pointer-events: none;
}

#frm_form_9_container .ef-upload-tile-actions{
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 6;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

#frm_form_9_container .ef-upload-tile-actions .ef-upload-btn{
  pointer-events: auto;
}

#frm_form_9_container .ef-upload-tile.is-error{
  border-color: rgba(255,120,120,.35);
}

#frm_form_9_container .ef-upload-tile-error{
  position: absolute;
  inset: auto 10px 10px 10px;
  z-index: 6;
  color: rgba(255,180,180,.95);
  font-size: 11px;
  line-height: 1.2;
  text-align: left;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,120,120,.28);
  border-radius: 10px;
  padding: 6px 8px;
}

#frm_form_9_container .ef-upload-multi-overlay{
  position: absolute;
  inset: 0;
  z-index: 20;
  background: rgba(0,0,0,.30);
  backdrop-filter: blur(1.5px);
  display: none;
  pointer-events: none;
}

#frm_form_9_container .ef-upload-multi-overlay.is-active{
  display: block;
}

#frm_form_9_container .ef-upload-multi-pill{
  position: absolute;
  left: 50%;
  top: 18px;
  transform: translateX(-50%);
  z-index: 21;
  display: none;
  color: rgba(255,255,255,.92);
  font-weight: 900;
  letter-spacing: .2px;
  font-size: 13px;
  padding: 12px 14px 12px 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(900px 240px at 18% 0%, rgba(216,189,120,.12), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.32)),
    rgba(8,8,10,.52);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.55) inset,
    0 16px 46px rgba(0,0,0,.28);
  pointer-events: none;
}

#frm_form_9_container .ef-upload-multi-pill.is-active{
  display: block;
}

#frm_form_9_container .ef-upload-multi-pill::before{
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.18);
  border-top-color: rgba(216,189,120,.85);
  animation: efUploadSpin .85s linear infinite;
  filter: drop-shadow(0 0 12px rgba(216,189,120,.22));
}

@keyframes efUploadSpin{
  to{ transform: translateY(-50%) rotate(360deg); }
}

/* -----------------------------
   6) MODAL
----------------------------- */
.ef-upload-modal{
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(0,0,0,.62);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.ef-upload-modal.is-open{
  display: flex;
}

.ef-upload-modal .ef-upload-modal-card{
  width: min(1100px, 96vw);
  height: min(90vh, 900px);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(12,12,14,.92);
  box-shadow: 0 20px 90px rgba(0,0,0,.6);
  position: relative;
}

.ef-upload-modal .ef-upload-modal-close{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
}

.ef-upload-modal .ef-upload-modal-body{
  width: 100%;
  height: 100%;
}

.ef-upload-modal .ef-upload-modal-body img,
.ef-upload-modal .ef-upload-modal-body iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: contain;
}

/* -----------------------------
   7) TEMPLATE GALLERY HERO STATE
----------------------------- */
#ff9-templates-root .ef-ff9-grid{
  --ef-u-grid-gap: 12px;
  gap: var(--ef-u-grid-gap);
}

#ff9-templates-root .ef-ff9-tile{
  position: relative;
  width: var(--ef-u-tile-size);
  min-width: var(--ef-u-tile-size);
  max-width: var(--ef-u-tile-size);
  border-radius: var(--ef-u-tile-radius);
  transition:
    transform var(--ef-u-ease),
    opacity var(--ef-u-ease),
    filter var(--ef-u-ease),
    box-shadow var(--ef-u-ease),
    border-color var(--ef-u-ease);
  transform-origin: center center;
  will-change: transform, opacity, filter;
}

#ff9-templates-root .ef-ff9-tile:hover{
  transform: scale(1.03);
  z-index: 2;
}

#ff9-templates-root .ef-ff9-tile.is-selected{
  flex-shrink: 0 !important;
  width: var(--ef-u-tile-size) !important;
  min-width: var(--ef-u-tile-size) !important;
  max-width: var(--ef-u-tile-size) !important;

  transform: scale(1.08);
  z-index: 6;

  border-color: rgba(216,189,120,.60);
  box-shadow:
    0 10px 30px rgba(0,0,0,.60),
    0 0 0 1px rgba(216,189,120,.35),
    0 0 18px rgba(216,189,120,.25);

  filter: saturate(1.06);
}

#ff9-templates-root .ef-ff9-tile.is-selected:hover{
  transform: scale(1.10);
}

#ff9-templates-root .ef-ff9-grid:has(.ef-ff9-tile.is-selected) .ef-ff9-tile:not(.is-selected){
  opacity: .65;
  transform: scale(.96);
  filter: saturate(.85);
}

#ff9-templates-root .ef-ff9-tile.is-selected::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    120deg,
    transparent 28%,
    rgba(216,189,120,.22) 50%,
    transparent 72%
  );
  opacity: 0;
  animation: efTileShimmer 1.2s ease forwards;
}

@keyframes efTileShimmer{
  0%{
    opacity: 0;
    transform: translateX(-42%);
  }
  35%{
    opacity: 1;
  }
  100%{
    opacity: 0;
    transform: translateX(42%);
  }
}
/* ---------------------------------
   7B) SELECTED TILE COMPACT MODE
---------------------------------- */
#ff9-templates-root .ef-ff9-tile.is-selected{
  height: auto !important;
  min-height: 0 !important;
  align-self: start !important;
}

#ff9-templates-root .ef-ff9-tile.is-selected .ef-ff9-thumb,
#ff9-templates-root .ef-ff9-tile.is-selected .ef-ff9-thumb img{
  display: block;
}

#ff9-templates-root .ef-ff9-tile.is-selected .ef-ff9-meta{
  padding-bottom: 6px !important;
  margin-bottom: 0 !important;
  min-height: 0 !important;
}

#ff9-templates-root .ef-ff9-tile.is-selected .ef-ff9-actions{
  margin-top: 8px !important;
  padding-top: 0 !important;
}

#ff9-templates-root .ef-ff9-tile.is-selected > *{
  min-height: 0 !important;
}
/* -----------------------------
   8) BELOW-GALLERY TEMPLATE HOST
----------------------------- */
#ff9-template-upload-root,
.ef-template-upload-host{
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin-top: 16px;
}

#ff9-template-upload-root .ef-upload-ui-shell[data-ef-upload="multi"]{
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

#ff9-template-upload-root .ef-upload-multi-shell{
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 190px;
}

#ff9-template-upload-root .ef-upload-multi-gallery{
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 12px;
}

#ff9-template-upload-root .ef-upload-tile{
  aspect-ratio: 4 / 3;
  min-height: 88px;
}

#ff9-template-upload-root .ef-upload-multi-topbar{
  padding-top: 10px;
}

#ff9-template-upload-root .ef-upload-multi-meta{
  font-size: 10px;
}

#ff9-template-upload-root .ef-upload-multi-meta strong{
  font-size: 11px;
  margin-bottom: 3px;
}

#ff9-template-upload-root .ef-upload-tile-actions{
  left: 6px;
  right: 6px;
  bottom: 6px;
  gap: 4px;
}

#ff9-template-upload-root .ef-upload-tile-actions .ef-upload-btn{
  padding: 5px 6px;
  font-size: 9px;
  line-height: 1.1;
  min-width: 0;
}

#ff9-template-upload-root .ef-upload-multi-empty{
  min-height: 160px;
  justify-content: flex-start;
  align-items: center;
  text-align: left;
  padding: 16px 18px;
}

#ff9-template-upload-root .ef-upload-multi-empty-copy{
  max-width: 320px;
}

/* -----------------------------
   9) RESPONSIVE
----------------------------- */
@media (max-width: 980px){
  #frm_field_517_container{
    margin-left: 0 !important;
    width: 100% !important;
  }

  #frm_form_9_container .ef-upload-ui-shell[data-ef-upload="single"]{
    width: 100% !important;
  }
}

@media (max-width: 760px){
  #ff9-templates-root .ef-ff9-tile.is-selected{
    transform: scale(1.04);
  }

  #ff9-templates-root .ef-ff9-tile.is-selected:hover{
    transform: scale(1.06);
  }

  #ff9-template-upload-root .ef-upload-multi-gallery{
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  }
}

@media (max-width: 560px){
  #frm_form_9_container .ef-upload-multi-gallery{
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  }

  #frm_form_9_container .ef-upload-multi-gallery.is-single-item{
    grid-template-columns: minmax(0, 100%);
  }

  #ff9-templates-root .ef-ff9-grid:has(.ef-ff9-tile.is-selected) .ef-ff9-tile:not(.is-selected){
    opacity: .82;
    transform: scale(.98);
  }

  #ff9-template-upload-root .ef-upload-multi-gallery{
    grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
    gap: 8px;
  }
}

/* Force PDF.js Canvas to the edges */
#frm_form_9_container .ef-upload-single-media canvas {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    display: block !important;
    margin: 0 !important; 
}

/* Ensure the stage doesn't have a hidden height cap */
#frm_form_9_container .ef-upload-single-stage {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Force the specific single upload container to ignore inline heights */
[data-ef-upload="single"] .ef-upload-single-stage {
    height: auto !important;
    max-height: none !important;
    display: block !important;
    overflow: visible !important;
}

/* Specifically target the media wrapper as well */
.ef-upload-single-media {
    height: auto !important;
    max-height: none !important;
}