/* css/style.css - modern, mobile-friendly styling */

:root{
  --itpc-bg: #ffffff;
  --itpc-accent: #0b5fff;
  --itpc-muted: #6b7280;
  --itpc-card-shadow: 0 10px 30px rgba(11, 35, 77, 0.06);
  --itpc-radius: 12px;
}

.itpc-wrapper {
  max-width: 900px;
  margin: 1.75rem auto;
  padding: 0 1rem;
  box-sizing: border-box;
}

.itpc-card{
  background: var(--itpc-bg);
  border-radius: var(--itpc-radius);
  padding: 1.25rem;
  box-shadow: var(--itpc-card-shadow);
  border: 1px solid rgba(16,24,40,0.03);
}

.itpc-title{
  display:flex;
  align-items:center;
  gap:0.6rem;
  font-size:1.15rem;
  margin:0 0 0.35rem 0;
  color:#0f172a;
}

.itpc-desc{
  margin:0 0 1rem 0;
  color:var(--itpc-muted);
  font-size:0.95rem;
}

.itpc-file-input{
  display:block;
  margin-bottom:0.8rem;
  position:relative;
}

.itpc-file-input input[type="file"]{
  display:none;
}

.itpc-file-btn{
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  padding:0.6rem 0.9rem;
  background:var(--itpc-accent);
  color:#fff;
  border-radius:10px;
  cursor:pointer;
  font-weight:600;
  box-shadow: 0 6px 18px rgba(11, 92, 255, 0.12);
}

.itpc-preview{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap:0.6rem;
  margin:0.8rem 0;
}

.itpc-thumb{
  background: #f8fafc;
  border-radius: 10px;
  padding: 0.45rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  box-shadow: 0 1px 2px rgba(16,24,40,0.04);
  border: 1px solid rgba(16,24,40,0.03);
}

.itpc-thumb img{
  max-width:100%;
  max-height:84px;
  object-fit:cover;
  border-radius:6px;
  display:block;
}

.itpc-thumb-name{
  font-size:0.75rem;
  color:var(--itpc-muted);
  margin-top:0.35rem;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  width:100%;
}

.itpc-actions{
  display:flex;
  gap:0.6rem;
  margin-top:0.6rem;
  align-items:center;
}

.itpc-btn{
  border: none;
  padding: 0.55rem 0.85rem;
  border-radius: 8px;
  font-weight: 600;
  cursor:pointer;
  display:inline-flex;
  gap:0.5rem;
  align-items:center;
}

.itpc-btn-primary{
  background:var(--itpc-accent);
  color:#fff;
  box-shadow: 0 8px 18px rgba(11, 92, 255, 0.12);
}

.itpc-btn-ghost{
  background: transparent;
  color: #0f172a;
  border: 1px solid #e6eefc;
}

.itpc-result{
  margin-top:1rem;
  display:flex;
  flex-direction:column;
  gap:0.6rem;
}

.itpc-download{
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  text-decoration:none;
  padding:0.55rem 0.85rem;
  border-radius:9px;
  border: 1px solid rgba(11,92,255,0.12);
  color:var(--itpc-accent);
  background: rgba(11,92,255,0.03);
  width:fit-content;
  font-weight:600;
}

.itpc-iframe{
  width:100%;
  height:600px;
  border: 1px solid rgba(16,24,40,0.06);
  border-radius:8px;
  margin-top:0.25rem;
}

/* small screen adjustments */
@media (max-width:600px){
  .itpc-iframe{
    height:320px;
  }
  .itpc-preview{
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  }
  .itpc-file-btn{
    padding:0.5rem 0.7rem;
  }
}