/* ===========================================================
   A4 Author Uploads UI V1.9 a4au
   File picker sizing knobs: ::file-selector-button + picked box
   upload prgress bar, thumbs for jpg, jpeg, png, pdf - all tested
   file delete from selected list thumbs
   ============================================================ */

/* Card container (front-end shortcode) */
.a4au-card{
  max-width:560px;  /* container width knob 900 */
  padding:18px;     /* container padding knob 18 */
  border:1px solid #dcdcde;
  background:#fff;
  border-radius:14px;
  font-size:18px;
  line-height:1.4;
  color:#000;
  font-weight:800;
  /*align-items:center;*/
  margin: 0 auto;


  /*--a4au-gutter: clamp(1.5rem, 5vw, 3.5rem);*/
}

.a4au-title{
  font-family: system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin:0 0 10px 0;
  font-size:24px;
  font-weight:600;

  /*outline: 5px solid red;*/
  /*background: rgba(255,0,0,0.15);*/
  /*padding-left: 3.5rem;*/
  padding-left: 1.5rem;
  /*padding-left: calc(var(--a4au-gutter) + 0.0rem);*/
}

.a4au-help{
  margin:0 0 12px 0;
  color:#444;
  font-weight:600;

  /*outline: 5px solid red;*/
  /*background: rgba(255,0,0,0.15);*/
  /*padding-left: 4.0rem;*/
  padding-left: 2.0rem;
  /*padding-left: calc(var(--a4au-gutter) + 0.5rem);*/
}

/* Centered field row blocks */
.a4au-row{
  display:flex;
  justify-content:center;
  margin:0 0 14px 0;
}

.a4au-field{
  min-width:320px;
  max-width:560px;
  width:100%;
}

.a4au-label{
  display:block;
  font-weight:800;
  margin:0 0 6px 0;
}

/* Select */
.a4au-select{
  width:100%;
  font-size:18px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid #c3c4c7;
}

/* =========================
   File input + Choose button
   ========================= */

.a4au-file-input{
  width:100%;
  font-size:18px;      /* filename text size */
  line-height:1.4;
}

/* MAIN SIZE KNOB for the native button */
.a4au-file-input::file-selector-button{
  font-size:18px;
  padding:12px 22px;   /* <— change this for a bigger/smaller button */
  border-radius:12px;
  border:2px solid #0a4fc2;
  background:#0a4fc2;
  color:#fff;
  font-weight:700;
  cursor:pointer;
  margin-right:14px;
}

.a4au-file-input::file-selector-button:hover{
  background:#083c92;
  border-color:#083c92;
}

/* Picked files box */
.a4au-picked{
  margin-top:10px;
  padding:12px;
  border:2px dashed #c3c4c7;
  border-radius:12px;
  background:#fafafa;
  display:none; /* JS toggles this */
}

.a4au-actions{
  margin:0 0 14px 0;
  display:flex;
  justify-content:center;
  gap:14px;
}

.a4au-btn{
  padding:12px 22px;
  border-radius:12px;
  border:5px solid #c3c4c7;
  background:#0a4fc2;
  color:#fff;
  font-weight:700;
  cursor:pointer;
  font-size:18px;
  width:220px;
}

.a4au-btn:hover{
  background:#083c92;
}

/* ============================================================
   Optional thumbnail sizing (if/when you add image previews)
   ============================================================ */
.a4au-thumb{
  width:140px;   /* thumbnail size knob 140 */
  height:140px;   /* thumbnail size knob 140 */
  object-fit:contain;
  border:2px solid #c3c4c7;
  border-radius:12px;
  background:#fff;
}


/* Thumbnail gallery */
.a4au-picked .a4au-thumbs{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap:12px;
  margin-top:12px;
}

/* One thumb card */
.a4au-picked .a4au-thumb-card{
  border:2px solid #c3c4c7;
  border-radius:12px;
  background:#fff;
  padding:10px;
}

/* The thumbnail image */
.a4au-picked img.a4au-thumb{
  width:100%;
  height:140px;         /* thumb height knob 140 */
  object-fit:contain;
  display:block;
}

/* Filename under thumb */
.a4au-picked .a4au-thumb-name{
  margin-top:8px;
  font-size:14px;
  line-height:1.25;
  word-break:break-word;
}

/* pdf gallery view */

/* Gallery grid */
.a4au-picked .a4au-thumbs{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:12px;
}

/* Shared card */
.a4au-picked .a4au-thumb-card{
  width:160px;                 /* card width knob 160 */
  border:2px solid #c3c4c7;
  border-radius:12px;
  background:#fff;
  padding:10px;
  box-sizing:border-box;
}

/* Image thumbs */
.a4au-picked img.a4au-thumb{
  width:100%;
  height:140px;                /* thumb height knob 140 */
  object-fit:contain;
  display:block;
}

/* PDF “thumbnail” block */
.a4au-picked .a4au-pdf-thumb{
  width:100%;
  height:140px;             /* height knob 140 */
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:#f6f7f7;
  border:1px solid #dcdcde;
  font-size:48px;              /* icon size knob */
  line-height:1;
}

/* Filename under card */
.a4au-picked .a4au-thumb-name{
  margin-top:8px;
  font-size:14px;
  line-height:1.25;
  word-break:break-word;
}

.a4au-filepick{
  display:flex;
  align-items:center;   /* vertical alignment */
  gap:14px;
}

/* Keep hint aligned and not wrapping weirdly */
.a4au-choose-hint{
  font-size:16px;
  color:#555;
  font-weight:600;
  line-height:1.2;
}

/* Hide the native UI (kills the browser’s single preview/icon) */
.a4au-file-input{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}

/* Your A4-style choose button */
/* Choose files button — match Upload/Clear */
.a4au-choose-btn{
  padding:12px 22px;
  border-radius:12px;
  border:5px solid #c3c4c7;   /* match */
  background:#0a4fc2;
  color:#fff;
  font-weight:700;
  cursor:pointer;
  font-size:18px;
  width:220px;                /* match */
  box-sizing:border-box;
}

.a4au-choose-btn:hover{
  background:#083c92;
}

/* “No files selected” / file count hint */
.a4au-choose-hint{
  font-size:16px;
  color:#555;
  font-weight:600;
}

/* Shared two-column rail for chooser + actions */
.a4au-rail{
  display:grid;
  grid-template-columns: 220px 220px; /* button width */
  column-gap:28px;
  row-gap:14px;

  width: calc(220px * 2 + 28px); /* exact rail width */
  margin: 0 auto;               /* center on page */
  align-items:center;
}

/* Row 1: choose + count */
.a4au-filepick{
  grid-column: 1 / -1; /* allow wrapping content if needed */
  display: contents;  /* children participate in grid */
}

/* Choose button already styled */
.a4au-choose-btn{
  width:220px;
}

/* File count box */
.a4au-choose-hint{
  width:220px;
  font-size:16px;
  color:#555;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center; /* centered text looks best here */
  white-space:nowrap;
}

/* Row 2: action buttons */
.a4au-actions{
  display: contents; /* buttons drop into same grid columns */
}

/* Progress Bar */
.a4au-progress-bar{
  width:100%;
  height:16px;
  border-radius:999px;
  border:2px solid #c3c4c7;
  background:#f6f7f7;
  overflow:hidden;
}
#a4au-progress-fill{
  height:100%;
  width:0%;
  background:#0a4fc2;
  transition: width 120ms linear;
}
/* Progress Bar */

/* PDF thumbnail view */
.a4au-pdf-embed{
  width:100%;
  height:140px;        /* matches your card thumb height */
  display:block;
  border-radius:8px;
  border:1px solid #dcdcde;
  background:#f6f7f7;
}
/* PDF thumbnail view */

/* Badge view */
.a4au-thumb-card{
  position: relative;
}

.a4au-badge{
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.85em;
  font-weight: 700;
  background: #ffffff;
  border: 1px solid #c3c4c7;
  color: #111;
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
  pointer-events: none;
}

/*option 2*/

.a4au-remove{
	position:absolute;
	top:8px;
	right:8px;
	width:28px;
	height:28px;
	border-radius:999px;
	border:1px solid #d63638;
	background:#fff5f5;
	color:#a00;
	font-weight:800;
	font-size:16px;
	line-height:26px;
	text-align:center;
	cursor:pointer;
	box-shadow:0 1px 3px rgba(0,0,0,.15);
}

.a4au-remove:hover{
	background:#ffecec;
}

/* flash removal - file delete fade*/
.a4au-thumb-card{
	transition: opacity .15s ease, transform .15s ease;
}

.a4au-thumb-card.removing{
	opacity: 0;
	transform: scale(0.96);
}
/* flash removal - file delete fade*/

/* flash removal - thumb screen repaint */
.a4au-thumb-card:not(.a4au-no-fadein){
	animation: a4auFadeIn 0.18s ease-out;
}

@keyframes a4auFadeIn{
	from{
		opacity: 0;
		transform: scale(0.90);
	}
	to{
		opacity: 1;
		transform: scale(1);
	}
}
/* flash removal - thumb screen repaint */