<label class="if-file">
  <input type="file" name="upload" accept="image/*,.pdf" />
  <span class="if-file-icon" aria-hidden="true">
    <svg
      viewBox="0 0 24 24"
      width="22"
      height="22"
      fill="none"
      stroke="currentColor"
      stroke-width="1.6"
      stroke-linecap="round"
      stroke-linejoin="round"
    >
      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
      <polyline points="17 8 12 3 7 8" />
      <line x1="12" y1="3" x2="12" y2="15" />
    </svg>
  </span>
  <span class="if-file-text">
    <strong>Click to upload</strong> or drag &amp; drop
    <span class="if-file-types">PNG, JPG, or PDF · max 10 MB</span>
  </span>
</label>

.if-file {
  position: relative;
  display: block;
  width: 100%;
  max-width: 320px;
  cursor: pointer;
  border: 1.5px dashed rgba(99, 102, 241, 0.5);
  border-radius: 12px;
  padding: 22px 18px;
  background: rgba(99, 102, 241, 0.05);
  text-align: center;
  transition:
    border-color 0.2s,
    background 0.2s,
    transform 0.15s;
}

.if-file:hover {
  border-color: #818cf8;
  background: rgba(99, 102, 241, 0.1);
}

.if-file:focus-within {
  border-color: #818cf8;
  background: rgba(99, 102, 241, 0.12);
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.18);
}

.if-file input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.if-file-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 0 auto 8px;
  border-radius: 10px;
  background: rgba(99, 102, 241, 0.18);
  color: #a5b4fc;
}

.if-file-text {
  display: block;
  font-size: 13px;
  color: #c8c0ff;
}

.if-file-text strong {
  color: #a5b4fc;
  font-weight: 600;
}

.if-file-types {
  display: block;
  font-size: 11px;
  color: #b8b6d4;
  margin-top: 4px;
}