/**
 * Styling for the `bp3d-select-file` Elementor control.
 *
 * Uses Elementor's own panel custom properties so the control follows the
 * editor's light/dark theme instead of hardcoding colours. Every property has
 * a fallback for older Elementor versions that do not define them.
 */

.bp3d-file-control .elementor-control-input-wrapper .bp3d-file {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---- preview ---------------------------------------------------------- */

.bp3d-file__preview {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 8px;
  border: 1px solid var(--e-a-border-color, #3f444b);
  border-radius: 3px;
  background: var(--e-a-bg-default, #26292c);
  overflow: hidden;
}

.bp3d-file.is-empty .bp3d-file__preview {
  border-style: dashed;
  justify-content: center;
}

/* Empty state shows only the "No file selected" note. */
.bp3d-file.is-empty .bp3d-file__thumb,
.bp3d-file.is-empty .bp3d-file__meta,
.bp3d-file:not(.is-empty) .bp3d-file__empty {
  display: none;
}

.bp3d-file__thumb {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 38px;
  border-radius: 2px;
  background-color: var(--e-a-bg-hover, #1f2124);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--e-a-color-txt, #b0b5bd);
  font-size: 18px;
}

/* A real thumbnail replaces the placeholder glyph. */
.bp3d-file__thumb.has-image i {
  display: none;
}

/* Text can overflow its flex item unless min-width is cleared. */
.bp3d-file__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.bp3d-file__name {
  overflow: hidden;
  color: var(--e-a-color-txt-accent, #fff);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bp3d-file__host,
.bp3d-file__empty {
  overflow: hidden;
  color: var(--e-a-color-txt-muted, #9a9ea3);
  font-size: 11px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ---- actions ---------------------------------------------------------- */

.bp3d-file__actions {
  display: flex;
  align-items: stretch;
  gap: 6px;
}

.bp3d-file__choose {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--e-a-border-color-bold, #4e5561);
  border-radius: 3px;
  background: var(--e-a-bg-hover, #34383c);
  color: var(--e-a-color-txt-accent, #fff);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.bp3d-file__choose:hover,
.bp3d-file__choose:focus-visible {
  border-color: var(--e-a-color-primary, #515962);
  background: var(--e-a-bg-active, #3f444b);
  outline: none;
}

.bp3d-file__clear {
  flex: 0 0 auto;
  width: 30px;
  border: 1px solid var(--e-a-border-color-bold, #4e5561);
  border-radius: 3px;
  background: transparent;
  color: var(--e-a-color-txt-muted, #9a9ea3);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.bp3d-file.is-empty .bp3d-file__clear {
  display: none;
}

.bp3d-file__clear:hover,
.bp3d-file__clear:focus-visible {
  border-color: #d63638;
  color: #d63638;
  outline: none;
}

/* ---- url field -------------------------------------------------------- */

.bp3d-file-control .bp3d-file__url {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--e-a-border-color, #3f444b);
  border-radius: 3px;
  background: var(--e-a-bg-default, #26292c);
  color: var(--e-a-color-txt, #b0b5bd);
  font-size: 11px;
}

.bp3d-file-control .bp3d-file__url:focus {
  border-color: var(--e-a-border-color-focus, #5d616a);
  outline: none;
}

/* Repeater rows are narrow — drop the thumbnail so the name keeps its room. */
.elementor-repeater-fields .bp3d-file__thumb {
  display: none;
}