.cou-upload-box {
  --cou-gold: #DDB913;
  --cou-border: #c8d0de;
  --cou-surface2: #edf0f7;
  --cou-success: #10b981;
  --cou-danger: #ef4444;
  --cou-text: #1a2744;
  margin: 1em 0;
  padding: 1em;
  border: 1px solid var(--cou-border);
  border-radius: 6px;
}

@media (prefers-color-scheme: dark) {
  .cou-upload-box {
    --cou-border: #1e2e47;
    --cou-surface2: #0d1525;
    --cou-text: #dde6f0;
  }
}

.cou-upload-description {
  margin: 0 0 0.75em;
  font-size: 0.9em;
  color: inherit;
  opacity: 0.75;
}

.cou-upload-button {
  display: inline-block;
  padding: 0.6em 1.2em;
  background: #333;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}

.cou-upload-button input[type="file"] {
  display: none;
}

.cou-upload-counter {
  margin-top: 0.75em;
  font-weight: bold;
}

.cou-upload-qty-hint {
  margin: 0.25em 0 0;
  font-size: 0.85em;
  opacity: 0.7;
}

/* Quantity field synced from the uploaded-file count — read-only, and the
   theme's own +/- stepper buttons (if any) are disabled alongside it, since
   editing quantity manually would fight the sync. */
.quantity.cou-qty-synced input.qty {
  background: var(--cou-surface2, #edf0f7);
  cursor: not-allowed;
}
.quantity.cou-qty-synced .plus,
.quantity.cou-qty-synced .minus {
  pointer-events: none;
  opacity: 0.4;
}

/* Small square photo tiles — same visual language as the print-shop-orders
   grid redesign (full scrim+spinner while uploading, overlay remove button,
   per-photo "מספר עותקים" stepper), just roughly half the tile size since
   this box lives on the product page, not a full-width order form. */
.cou-file-list {
  list-style: none;
  margin: 0.5em 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: 6px;
  max-height: 300px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.cou-file-item {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--cou-surface2);
  border: 1px solid var(--cou-border);
  border-radius: 8px;
  overflow: hidden;
  isolation: isolate;
}

.cou-file-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--cou-border);
}

.cou-file-thumb--icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

/* File name — hidden by default (tile is small; name is a tooltip via
   title="") and only shown as an error/status message strip. */
.cou-file-name {
  display: none;
  position: absolute;
  inset: auto 0 0 0;
  z-index: 4;
  padding: 4px;
  font-size: 8px;
  line-height: 1.25;
  text-align: center;
  color: #fff;
  background: rgba(0, 0, 0, .72);
  white-space: normal;
}

.cou-file-remove {
  position: absolute;
  top: 3px;
  left: 3px;
  z-index: 5;
  width: 16px;
  height: 16px;
  padding: 0;
  background: rgba(17, 17, 17, .55);
  border: none;
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cou-file-remove:disabled { opacity: .45; cursor: default; }
.cou-file-remove:not(:disabled):hover { background: var(--cou-danger); }

/* Upload-in-progress scrim + spinner over the whole tile */
.cou-file-ring {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 14, 26, .5);
  border-radius: inherit;
}
.cou-file-ring-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .3);
  border-top-color: var(--cou-gold);
  font-size: 0;
  animation: cou-spin .7s linear infinite;
}
@keyframes cou-spin { to { transform: rotate(360deg); } }
.cou-file-item--done .cou-file-ring,
.cou-file-item--error .cou-file-ring { display: none; }

/* Thin upload-percent bar along the bottom, fed by --p (set from xhr progress) */
.cou-file-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  z-index: 4;
  background: var(--cou-gold);
  width: var(--p, 0%);
  transition: width .2s;
}
.cou-file-item--done .cou-file-progress,
.cou-file-item--error .cou-file-progress { display: none; }

/* "מספר עותקים" — only active once the file finished uploading, and only
   shown at all on qty-sync-enabled products (see .cou-file-list--no-qty) */
.cou-file-qty {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 3px;
  background: linear-gradient(to top, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0));
}
.cou-file-item:not(.cou-file-item--done) .cou-file-qty {
  opacity: .35;
  pointer-events: none;
}
.cou-qty-btn {
  width: 15px;
  height: 15px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 10px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cou-qty-value {
  min-width: 12px;
  text-align: center;
  font-size: 10px;
  color: #fff;
}
.cou-file-list--no-qty .cou-file-qty { display: none !important; }

.cou-file-item--error .cou-file-thumb,
.cou-file-item--error .cou-file-qty { display: none; }
.cou-file-item--error .cou-file-name { display: block; }
.cou-file-item--error { border-color: var(--cou-danger); }