/* OysKasir file upload controls. */
.file-upload-field { display:block; min-width:0; }
.file-upload-title { display:block; margin-bottom:7px; color:#465366; font-size:13px; font-weight:600; }
.file-upload-control {
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) 24px;
  align-items:center;
  min-height:52px;
  padding:6px 10px 6px 6px;
  overflow:hidden;
  border:1px solid rgba(99,102,241,.13);
  border-radius:15px;
  color:#778197;
  background:rgba(255,255,255,.67);
  box-shadow:0 8px 24px rgba(48,51,89,.055),inset 0 1px 0 rgba(255,255,255,.92);
  transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease;
}
.file-upload-input { position:absolute; z-index:3; inset:0; width:100%; height:100%; min-height:0; padding:0; cursor:pointer; opacity:0; }
.file-upload-button {
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:40px;
  padding:9px 13px;
  border:1px solid rgba(255,255,255,.85);
  border-radius:11px;
  color:#fff;
  background:linear-gradient(135deg,#6366f1,#8b5cf6);
  box-shadow:0 7px 17px rgba(99,102,241,.24);
  font-size:11px;
  white-space:nowrap;
}
.file-upload-button .icon { width:17px; height:17px; }
.file-upload-name { min-width:0; padding-inline:12px; overflow:hidden; font-size:11px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.file-upload-state { display:grid; place-items:center; width:24px; height:24px; color:#10a77e; opacity:0; transform:scale(.72); transition:opacity .2s ease,transform .2s ease; }
.file-upload-state .icon { width:16px; height:16px; }
.file-upload-help { display:flex!important; align-items:center; gap:6px; margin-top:7px!important; color:#929caf!important; font-size:10px!important; }
.file-upload-help::before { content:''; width:5px; height:5px; flex:0 0 5px; border-radius:50%; background:#8b5cf6; box-shadow:0 0 0 3px rgba(139,92,246,.10); }
.file-upload-preview { display:none; align-items:center; gap:11px; width:100%; margin-top:10px; padding:9px; border:1px solid rgba(99,102,241,.12); border-radius:13px; background:rgba(249,248,255,.72); }
.file-upload-preview.has-image { display:flex; }
.file-upload-preview img { width:58px; height:58px; flex:0 0 58px; object-fit:cover; border-radius:10px; background:#f2f2f7; box-shadow:0 5px 14px rgba(59,52,116,.11); }
.file-upload-preview span { min-width:0; }
.file-upload-preview b { display:block; color:#4f5366; font-size:11px; }
.file-upload-preview small { margin-top:4px!important; color:#8f94a4!important; font-size:9px!important; line-height:1.5; }
.file-upload-control:hover { border-color:rgba(99,102,241,.30); background:rgba(255,255,255,.86); box-shadow:0 11px 28px rgba(67,61,139,.09),inset 0 1px 0 #fff; }
.file-upload-control:has(.file-upload-input:focus-visible) { border-color:rgba(99,102,241,.58); box-shadow:0 0 0 4px rgba(99,102,241,.11),0 11px 28px rgba(67,61,139,.09); }
.file-upload-control.has-file .file-upload-name { color:#4e5980; }
.file-upload-control.is-complete .file-upload-state { opacity:1; transform:scale(1); }
.file-upload-control.is-loading .file-upload-state { opacity:1; transform:scale(1); animation:file-upload-spin .8s linear infinite; }
.file-upload-control.is-error { border-color:rgba(239,68,68,.40); }
.file-upload-control.is-error .file-upload-name { color:#c44747; }
input[type=file]:not(.file-upload-input) { padding:6px; border-color:rgba(99,102,241,.13); background:rgba(255,255,255,.67); }
input[type=file]:not(.file-upload-input)::file-selector-button { margin-right:12px; padding:9px 13px; border:0; border-radius:10px; color:#fff; background:linear-gradient(135deg,#6366f1,#8b5cf6); box-shadow:0 6px 15px rgba(99,102,241,.22); font:700 11px "Plus Jakarta Sans",sans-serif; cursor:pointer; }
@keyframes file-upload-spin { to { transform:rotate(360deg); } }
@media (max-width:430px) {
  .file-upload-control { grid-template-columns:auto minmax(0,1fr) 20px; padding-right:7px; }
  .file-upload-button { padding-inline:10px; }
  .file-upload-button b { display:none; }
  .file-upload-name { padding-inline:9px; }
}
@media (prefers-reduced-motion:reduce) {
  .file-upload-control,.file-upload-state { transition:none; }
  .file-upload-control.is-loading .file-upload-state { animation:none; }
}