/* =========================================
   UTZone TOOL UI MASTER CSS (tool-ui.css)
   Includes:
   - Tool Page Layout
   - Tool Header
   - Tool Card
   - Tool Sidebar (Tool Info)
   - Tool Navigation
   - Responsive
========================================= */

/* ===== BASE ===== */
*{ box-sizing:border-box; }

/* =========================================
   TOOL PAGE LAYOUT
========================================= */
.tool-page{
  max-width:1100px;
  margin:auto;
  padding:20px;
}

.tool-layout{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:20px;
  margin-bottom:40px;
}

/* =========================================
   TOOL HEADER
========================================= */
.tool-header{
  text-align:center;
  margin-bottom:30px;
}

.tool-title{
  font-size:2.2rem;
  color:#f8fafc;
  margin:0 0 10px;
  font-weight:800;
  letter-spacing:.2px;
}

.tool-subtitle{
  color:#94a3b8;
  font-size:1.1rem;
  margin:0;
  line-height:1.6;
}

/* =========================================
   TOOL CARD (MAIN TOOL AREA)
========================================= */
.tool-card{
  background:#111827;
  border:1px solid #1e293b;
  border-radius:16px;
  padding:28px;
  box-shadow:0 20px 40px rgba(0,0,0,.35);
}

.tool-card-title{
  margin-bottom:15px;
  color:#f8fafc;
  font-size:1.35rem;
  font-weight:800;
}

.tool-control{
  margin-bottom:20px;
  color:#cbd5f5;
  font-size:1rem;
}

/* inputs inside tool card */
.tool-card input[type="text"],
.tool-card input[type="number"],
.tool-card input[type="url"],
.tool-card input[type="email"]{
  border-radius:8px;
  border:1px solid #94a3b8;
  background:#111827;
  color:#f8fafc;
  padding:10px 12px;
  text-align:center;
  width:180px;
  max-width:100%;
  outline:none;
}

.tool-card input:focus{
  border-color:#38bdf8;
  box-shadow:0 0 0 3px rgba(56,189,248,.15);
}

/* range */
.tool-card input[type="range"]{
  width:100%;
  margin:10px 0 0;
}

/* file picker */
.tool-card .file-picker{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.tool-card .file-label{
  display:inline-block;
  padding:12px 18px;
  border:2px dashed #38bdf8;
  border-radius:12px;
  cursor:pointer;
  color:#38bdf8;
  background:rgba(56,189,248,.06);
  font-weight:700;
  transition:.2s;
}

.tool-card .file-label:hover{
  background:rgba(56,189,248,.12);
}

.tool-card .file-label.dragover{
  background:rgba(56,189,248,.2);
  border-color:#0ea5e9;
}

.tool-card .file-name{
  font-size:.95rem;
  color:#94a3b8;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:260px;
}

/* tool buttons wrapper */
.tool-card .tool-buttons{
  display:flex;
  gap:10px;
  margin-bottom:20px;
  flex-wrap:wrap;
}

/* buttons */
.tool-card button{
  padding:11px 18px;
  border-radius:10px;
  border:none;
  cursor:pointer;
  font-weight:800;
  transition:.2s;
}

/* disabled */
.tool-card button:disabled{
  opacity:.5;
  cursor:not-allowed;
}

/* hover glow */
.tool-card button:enabled:hover{
  box-shadow:0 0 12px rgba(56,189,248,.7);
}

/* processing */
.tool-card button.processing{
  background:#facc15 !important;
  color:#000 !important;
  box-shadow:0 0 10px #facc15 !important;
}

/* button variants */
.tool-card .btn-primary{
  background:#38bdf8;
  color:#020617;
}
.tool-card .btn-primary:hover{ background:#0ea5e9; }

.tool-card .btn-secondary{
  background:transparent;
  color:#94a3b8;
  border:1px solid #1e293b;
}

.tool-card .btn-success{
  background:#22c55e;
  color:#022c22;
}

/* preview */
.tool-card .tool-preview{
  margin-top:10px;
  text-align:center;
}

/* output */
.tool-card .tool-output{
  margin-top:15px;
}

.tool-card .tool-output h3{
  color:#f8fafc;
  margin:10px 0;
  font-size:1.15rem;
  font-weight:800;
}

.tool-card .tool-output pre{
  color:#94a3b8;
  white-space:pre-wrap;
  background:#0b1220;
  border:1px solid #1e293b;
  padding:12px;
  border-radius:12px;
}

.tool-card .tool-output img{
  max-width:100%;
  margin-top:12px;
  border-radius:10px;
  border:1px solid #1e293b;
}

.tool-card #compressionInfo{
  color:#94a3b8;
  margin-top:8px;
}

/* =========================================
   TOOL INFO (SIDEBAR)
========================================= */
.tool-info{
  background:#020617;
  border:1px solid #1e293b;
  padding:22px;
  border-radius:16px;
  box-shadow:0 18px 35px rgba(0,0,0,.30);
}

.tool-info h2,
.tool-info h3{
  color:#f8fafc;
  margin:0 0 14px;
  font-size:1.2rem;
  font-weight:800;
}

.tool-info ul{
  padding-left:0;
  margin:0;
  list-style:none;
}

.tool-info li{
  margin-bottom:12px;
  color:#94a3b8;
  line-height:1.6;
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.tool-info li::before{
  content:"✔";
  color:#38bdf8;
  font-weight:900;
  margin-top:1px;
}

.tool-info a{
  color:#38bdf8;
  text-decoration:none;
  font-weight:700;
}

.tool-info a:hover{
  text-decoration:underline;
}

/* =========================
   TOOL CONTENT (SEO SECTION)
========================= */

.tool-content{
  margin-bottom:10px;
}

.tool-content h2{
  margin-top:35px;
  font-size:1.5rem;
  color:#f8fafc;
  font-weight:800;
}

.tool-content p,
.tool-content li{
  color:#94a3b8;
  line-height:1.7;
}

/* ordered list */
.tool-content ol{
  padding-left:20px;
}

/* ul inside ol */
.tool-content ol ul{
  padding-left:18px;
  margin-top:6px;
}

/* spacing */
.tool-content ol li,
.tool-content ul li{
  margin-bottom:8px;
}

/* =========================================
   TOOL NAVIGATION (NEXT/PREV)
========================================= */
.tool-navigation{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:25px;
}

.tool-navigation a{
  display:inline-block;
  padding:12px 25px;
  font-size:14px;
  font-weight:800;
  text-decoration:none;
  border-radius:10px;
  background:#1b2a45;
  color:#ffffff;
  border:1px solid #1e293b;
  min-width:140px;
  text-align:center;
  transition:all .2s ease-in-out;
}

.tool-navigation a:hover{
  background:#2a3b5a;
  transform:translateY(-2px);
}

.tool-navigation span{
  min-width:140px;
}

/* =========================================
   RESPONSIVE
========================================= */
@media(max-width:1024px){
  .tool-layout{
    grid-template-columns:1.5fr 1fr;
    gap:18px;
  }
  .tool-title{ font-size:2rem; }
}

@media(max-width:768px){
  .tool-layout{ grid-template-columns:1fr; }
  .tool-header{ text-align:left; }
  .tool-title{ font-size:1.8rem; }
  .tool-subtitle{ font-size:1rem; }

  .tool-card,
  .tool-info{ padding:22px; }

  .tool-info{ order:-1; }

  .tool-card .tool-buttons button{ width:100%; }
  .tool-card .file-name{ max-width:100%; }

  .tool-navigation{
    flex-direction:column;
    align-items:stretch;
  }
  .tool-navigation a,
  .tool-navigation span{
    min-width:100%;
    text-align:center;
  }
}

@media(max-width:480px){
  .tool-title{ font-size:1.6rem; }
  .tool-subtitle{ font-size:.95rem; }
}