/* =========================================================
   STORYBOARDART - Clean Use-your-Drive uploader UI
   ========================================================= */

/* Main wrapper */
.wpcp-container .fileupload-box {
  background: #f5fbff !important;
  border: 2px solid #13AFDF !important;
  border-left: 0 !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 14px rgba(18, 85, 189, 0.08) !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Remove plugin left required/error accent */
.wpcp-container .fileupload-box:before,
.wpcp-container .fileupload-box:after,
.wpcp-container .fileupload-header:before,
.wpcp-container .fileupload-header:after {
  display: none !important;
  content: none !important;
}

/* Also kill any red border/background coming from plugin states */
.wpcp-container .fileupload-box.-is-required,
.wpcp-container .fileupload-box.-is-formfield,
.wpcp-container .fileupload-box.-need-files {
  border-left: 0 !important;
  box-shadow: 0 4px 14px rgba(18, 85, 189, 0.08) !important;
}

/* Header */
.wpcp-container .fileupload-header {
  background: #f5fbff !important;
  padding: 22px 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  border: 0 !important;
  min-height: 92px !important;
}

/* Title */
.wpcp-container .fileupload-header-title {
  flex: 1 !important;
  min-width: 0 !important;
}

.wpcp-container .fileupload-header-text-title {
  color: #1255BD !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

.wpcp-container .fileupload-header-text-subtitle,
.wpcp-container .fileupload-items-size {
  color: #6b7d96 !important;
  font-size: 13px !important;
}

/* Header buttons */
.wpcp-container .button-round-icon {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 999px !important;
  border: none !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08) !important;
}

/* Requirements/list button */
.wpcp-container .fileupload-requirements-button {
  background: #eef5fb !important;
  color: #343879 !important;
}

.wpcp-container .fileupload-requirements-button:hover {
  background: #e2eef9 !important;
  color: #1255BD !important;
}

/* Plus button */
.wpcp-container .fileupload-add-button {
  background: #1255BD !important;
  color: #fff !important;
}

.wpcp-container .fileupload-add-button:hover {
  background: #343879 !important;
  color: #fff !important;
}

/* Thin progress line */
.wpcp-container .fileupload-global-progress {
  height: 3px !important;
  background: #eaf4fd !important;
  margin: 0 !important;
}

.wpcp-container .fileupload-global-progress-bar {
  background: linear-gradient(90deg, #13AFDF 0%, #1255BD 100%) !important;
}

/* IMPORTANT: hide file list when empty */
.wpcp-container .fileupload-list:empty {
  display: none !important;
}

/* Hide empty list area before files are added */
.wpcp-container .fileupload-box .fileupload-list {
  background: #ffffff !important;
  border-top: 1px solid #e8f1f8 !important;
}

/* If there are no uploaded rows yet, remove the empty white space */
.wpcp-container .fileupload-box .fileupload-list .fileupload-table-body:empty,
.wpcp-container .fileupload-box .fileupload-list .fileupload-table:has(.fileupload-table-row-template:only-child) {
  display: none !important;
}

/* More reliable fix for empty state: hide list until not-empty state is active */
.wpcp-container .fileupload-box .fileupload-not-empty:not([style*="display: none"]) ~ .fileupload-list {
  display: block !important;
}

/* Default empty-state: hide file list */
.wpcp-container .fileupload-box .fileupload-list {
  display: none !important;
}

/* When files exist, show list */
.wpcp-container .fileupload-box.has-files .fileupload-list,
.wpcp-container .fileupload-box.is-filled .fileupload-list,
.wpcp-container .fileupload-box.-has-files .fileupload-list {
  display: block !important;
}

/* Table rows */
.wpcp-container .fileupload-table-row {
  border-bottom: 1px solid #edf3f8 !important;
  background: #fff !important;
}

.wpcp-container .fileupload-table-cell {
  padding: 14px 16px !important;
}

.wpcp-container .fileupload-table-cell-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 10px !important;
  background: #eef8fd !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: 12px !important;
  overflow: hidden !important;
}

.wpcp-container .fileupload-table-text-title {
  color: #1f2d3d !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

.wpcp-container .fileupload-table-text-subtitle {
  color: #6d7f96 !important;
  font-size: 12px !important;
}

/* Footer hidden until files are present */
.wpcp-container .fileupload-footer {
  display: none !important;
  padding: 16px 18px 18px !important;
  background: #fff !important;
  border-top: 1px solid #edf3f8 !important;
}

/* Show footer when files exist */
.wpcp-container .fileupload-box.has-files .fileupload-footer,
.wpcp-container .fileupload-box.is-filled .fileupload-footer,
.wpcp-container .fileupload-box.-has-files .fileupload-footer {
  display: block !important;
}

.wpcp-container .fileupload-footer-content {
  display: flex !important;
  justify-content: flex-end !important;
}

/* Start upload button */
.wpcp-container .fileupload-start-button.button {
  background: #1255BD !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 12px 18px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  box-shadow: 0 4px 12px rgba(18, 85, 189, 0.16) !important;
}

.wpcp-container .fileupload-start-button.button:hover {
  background: #343879 !important;
  color: #fff !important;
}

/* Drag/drop state */
.wpcp-container .fileupload-box.-dragover,
.wpcp-container .fileupload-box.dragover {
  background: #AFDAF9 !important;
  border-color: #1255BD !important;
}

/* Mobile */
@media (max-width: 767px) {
  .wpcp-container .fileupload-header {
    padding: 16px 14px !important;
    min-height: 80px !important;
  }

  .wpcp-container .fileupload-header-text-title {
    font-size: 16px !important;
  }

  .wpcp-container .button-round-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
  }
}
/* StoryboardArt left accent fix */
.wpcp-container .fileupload-box {
  position: relative !important;
  padding-left: 0 !important;
}

/* Add branded left accent */
.wpcp-container .fileupload-box::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: #13AFDF; /* StoryboardArt primary blue */
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
}