/* UVs Image to PDF — micp-style theme */
.uvs-itp{
  --text:#0f172a;
  --muted:#475569;
  --card:#ffffff;
  --stroke:#e2e8f0;
  --shadow:0 14px 34px rgba(15,23,42,.12);

  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial !important;
  color:var(--text) !important;

  max-width:980px;
  margin:22px auto;
  padding:18px;

  background:
    radial-gradient(900px 400px at 10% 0%, rgba(37,99,235,.10) 0%, transparent 60%),
    radial-gradient(900px 400px at 90% 10%, rgba(124,58,237,.10) 0%, transparent 55%),
    #f8fafc;

  border:1px solid var(--stroke);
  border-radius:22px;
  overflow:visible !important;
}
.uvs-itp *{box-sizing:border-box}

/* HERO */
.uvs-itp-hero{
  display:flex;gap:16px;justify-content:space-between;align-items:flex-start;
  background:linear-gradient(135deg,#0b1220,#1b2a4a);
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  padding:18px;
  box-shadow:var(--shadow);
  color:#fff;
}
.uvs-itp-kicker{font-size:12px;color:rgba(255,255,255,.75);letter-spacing:.12em;text-transform:uppercase}
.uvs-itp-title{margin:8px 0 6px;font-size:28px;line-height:1.15;color:#fff;font-weight:900}
.uvs-itp-title span{
  background:linear-gradient(90deg,var(--brand),var(--brand2));
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.uvs-itp-sub{margin:0;color:rgba(255,255,255,.75);font-size:14px}
.uvs-itp-badges{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.uvs-itp-badge{
  padding:7px 10px;border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  font-size:12px;color:#fff;
}

/* GRID */
.uvs-itp-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
@media(max-width:860px){.uvs-itp-grid{grid-template-columns:1fr}.uvs-itp-title{font-size:24px}}

/* CARDS */
.uvs-itp-card{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:18px;
  padding:14px;
  box-shadow:var(--shadow);
  overflow:visible !important;
}
.uvs-itp-card-title{font-size:12px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px}

/* FIELDS */
.uvs-itp-field{margin-top:12px}
.uvs-itp-field label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px;font-weight:700}

/* ✅ Your same “select clipped text” fix */
.uvs-itp select{
  width:100% !important;
  height:58px !important;
  min-height:58px !important;
  padding:0 48px 0 18px !important;
  margin:0 !important;

  border-radius:14px !important;
  border:1px solid var(--stroke) !important;

  background:#fff !important;
  color:var(--text) !important;

  font-size:16px !important;
  font-weight:600 !important;

  line-height:58px !important;
  vertical-align:middle !important;

  box-shadow:0 10px 24px rgba(15,23,42,.08) !important;
  outline:none !important;
  text-indent:0 !important;
}
.uvs-itp select:focus{
  border-color: rgba(37,99,235,.45) !important;
  box-shadow:0 0 0 4px rgba(37,99,235,.15), 0 10px 24px rgba(15,23,42,.08) !important;
}

/* Color input */
.uvs-itp input[type="color"]{
  width:100%;
  height:58px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:#fff;
  box-shadow:0 10px 24px rgba(15,23,42,.08);
  padding:10px;
}

/* HELP / NOTE */
.uvs-itp-help{margin-top:8px;color:var(--muted);font-size:12px}
.uvs-itp-note{margin-top:10px;color:var(--muted);font-size:12px}

/* DROP */
.uvs-itp-drop{
  margin-top:10px;
  background:linear-gradient(135deg, rgba(37,99,235,.10), rgba(124,58,237,.10), rgba(34,197,94,.10));
  border:2px dashed #cbd5e1;
  border-radius:18px;
  padding:14px;
  cursor:pointer;
  transition:.15s;
  box-shadow:var(--shadow);
}
.uvs-itp-drop:hover{transform:translateY(-1px)}
.uvs-itp-drop.is-drag{background:linear-gradient(135deg, rgba(37,99,235,.16), rgba(124,58,237,.16), rgba(34,197,94,.14))}
.uvs-itp-drop-inner{display:flex;align-items:center;gap:12px}
.uvs-itp-icon{
  width:42px;height:42px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.75);
  border:1px solid var(--stroke);
  font-size:18px
}
.uvs-itp-drop-title{font-weight:900;color:var(--text)}
.uvs-itp-drop-sub{color:var(--muted);font-size:13px}

/* BUTTON */
.uvs-itp-btn{
  width:100%;
  margin-top:14px;
  border:0;border-radius:14px;padding:14px 14px;
  cursor:pointer;font-weight:900;font-size:16px;
}
.uvs-itp-btn-primary{
  background:linear-gradient(90deg,var(--brand),var(--brand2));
  color:#fff;
  box-shadow:0 10px 22px rgba(37,99,235,.20);
}
.uvs-itp-btn-primary:disabled{opacity:.55;cursor:not-allowed}

/* LIST (selected files) */
.uvs-itp-list{
  margin-top:14px;
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.uvs-itp-empty{color:var(--muted);padding:12px 14px}
.uvs-itp-grid-files{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px}
@media(max-width:520px){.uvs-itp-grid-files{grid-template-columns:1fr}}
.uvs-itp-item{
  border:1px solid var(--stroke);
  border-radius:16px;
  padding:10px;
  background:#fff;
}
.uvs-itp-thumb{border-radius:14px;overflow:hidden;height:120px;background:#f3f4f6}
.uvs-itp-thumb img{width:100%;height:100%;object-fit:cover}
.uvs-itp-name{margin-top:8px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uvs-itp-meta{margin-top:4px;color:var(--muted);font-size:13px}
.uvs-itp-actions{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.uvs-itp-mini{border:1px solid var(--stroke);background:#fff;border-radius:10px;padding:6px 10px;cursor:pointer;font-weight:800}
.uvs-itp-mini.danger{border-color:rgba(220,38,38,.25);color:#b91c1c}

/* PREVIEW */
.uvs-itp-preview{
  border:1px solid var(--stroke);
  border-radius:18px;
  background:
    linear-gradient(0deg, rgba(255,255,255,.8), rgba(255,255,255,.8)),
    repeating-conic-gradient(#eef2f7 0% 25%, #ffffff 0% 50%) 50%/22px 22px;
  height:340px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.uvs-itp-preview-inner{color:rgba(15,23,42,.55);font-weight:800}

/* RESULT */
.uvs-itp-result{margin-top:14px}
.uvs-itp-msg{padding:12px;border-radius:14px;border:1px solid var(--stroke);margin-bottom:10px}
.uvs-itp-msg.ok{background:rgba(16,185,129,.07)}
.uvs-itp-msg.bad{background:rgba(239,68,68,.07)}
.uvs-itp-dl{
  display:inline-block;
  text-decoration:none;
  font-weight:900;
  border-radius:14px;
  padding:12px 14px;
  background:linear-gradient(90deg,var(--brand),var(--brand2));
  color:#fff;
  box-shadow:0 10px 22px rgba(37,99,235,.18);
}
.uvs-itp-warn{margin-top:10px;color:var(--muted);font-size:13px;line-height:1.5}
/* ===========================
   FIX: Keep all content inside the frame
   (prevents grid spilling / preview hidden)
   =========================== */

/* Always keep hero + grid centered and constrained */
.uvs-itp,
.uvs-itp-hero,
.uvs-itp-grid{
  width: 100% !important;
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* If the theme adds weird margins, this protects layout */
.uvs-itp-grid{
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-top: 14px !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
  gap: 14px !important;
}

/* Very important: allow cards to shrink inside grid */
.uvs-itp-card{
  min-width: 0 !important;
}
.uvs-itp-grid > .uvs-itp-card{
  min-width: 0 !important;
}

/* Make sure preview box never overflows */
.uvs-itp-preview{
  width: 100% !important;
}

/* If screen is not wide enough, stack the columns */
@media (max-width: 1024px){
  .uvs-itp-grid{
    grid-template-columns: 1fr !important;
  }
}