/* ═══════════════════════════════════════════════
   DALFAST TOOLS — shared styles for the tools hub & tool pages
   Built on the main DALFAST design tokens (style.css)
═══════════════════════════════════════════════ */

/* ── HUB HERO ── */
.tools-hero {
  padding: 120px 5vw 70px;
  background: radial-gradient(ellipse 80% 60% at 60% 30%, rgba(77,207,224,0.1) 0%, transparent 70%), #fff;
  text-align: center;
}
.tools-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 800; letter-spacing: -0.03em; line-height: 1.1;
  color: var(--ink); margin: 0.75rem 0 1.25rem;
}
.tools-hero p { font-size: 1.125rem; color: var(--ink-soft); max-width: 620px; margin: 0 auto 2rem; line-height: 1.7; }

/* ── CATEGORY TABS ── */
.tools-cats { display: flex; align-items: center; justify-content: center; gap: 0.625rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tools-cat-btn {
  padding: 0.5rem 1.1rem; border-radius: 100px; border: 1.5px solid var(--border);
  background: white; font-size: 0.85rem; font-weight: 600; color: var(--ink-muted);
  cursor: pointer; transition: all var(--t); font-family: inherit; white-space: nowrap;
}
.tools-cat-btn:hover, .tools-cat-btn.active { background: var(--teal); color: white; border-color: var(--teal); }

/* ── TOOL GRID ── */
.tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; }
.tool-card {
  background: white; border: 1.5px solid var(--border); border-radius: var(--r-lg);
  padding: 1.5rem; cursor: pointer; transition: all var(--t) var(--ease);
  display: flex; flex-direction: column; text-decoration: none; position: relative; overflow: hidden;
}
.tool-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(11,126,168,0.14); border-color: var(--border-md); }
.tool-card-icon {
  width: 52px; height: 52px; border-radius: var(--r-md); display: flex; align-items: center;
  justify-content: center; font-size: 1.6rem; margin-bottom: 1rem; flex-shrink: 0;
}
.tool-card-title { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; color: var(--ink); margin-bottom: 0.4rem; }
.tool-card-desc { font-size: 0.85rem; color: var(--ink-soft); line-height: 1.55; flex: 1; margin-bottom: 0.875rem; }
.tool-card-foot { display: flex; align-items: center; justify-content: space-between; }
.tool-badge { font-size: 0.66rem; font-weight: 800; padding: 0.2rem 0.6rem; border-radius: 100px; text-transform: uppercase; letter-spacing: 0.04em; }
.tb-free { background: rgba(43,217,160,0.15); color: #14916B; }
.tool-cat-icons { /* gradient backgrounds per category */ }
.ic-file { background: linear-gradient(135deg,#4DCFE0,#0B7EA8); color: white; }
.ic-ai { background: linear-gradient(135deg,#7C5CFC,#4DCFE0); color: white; }
.ic-prod { background: linear-gradient(135deg,#2BD9A0,#4DCFE0); color: white; }
.ic-biz { background: linear-gradient(135deg,#FF9F45,#FF6B9D); color: white; }
.tool-arrow { color: var(--teal); font-weight: 700; font-size: 0.9rem; }

/* ── TOOL PAGE LAYOUT ── */
.tool-page { padding: 100px 5vw 60px; min-height: 70vh; }
.tool-page-head { max-width: 820px; margin: 0 auto 2rem; text-align: center; }
.tool-page-head .tool-page-icon { width: 64px; height: 64px; border-radius: var(--r-lg); display: inline-flex; align-items: center; justify-content: center; font-size: 2rem; margin-bottom: 1rem; }
.tool-page-head h1 { font-family: var(--font-display); font-size: clamp(1.75rem,4vw,2.5rem); font-weight: 800; color: var(--ink); margin-bottom: 0.625rem; letter-spacing: -0.02em; }
.tool-page-head p { font-size: 1rem; color: var(--ink-soft); line-height: 1.65; max-width: 600px; margin: 0 auto; }
.tool-workspace { max-width: 820px; margin: 0 auto; background: white; border: 1.5px solid var(--border); border-radius: var(--r-lg); padding: 2rem; box-shadow: var(--sh-sm); }
.tool-workspace-wide { max-width: 1100px; }

/* Form controls */
.tf-group { margin-bottom: 1.125rem; }
.tf-label { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--ink); margin-bottom: 0.4rem; }
.tf-input, .tf-textarea, .tf-select {
  width: 100%; padding: 0.75rem 0.95rem; border: 1.5px solid var(--border-str); border-radius: var(--r-sm);
  font-family: inherit; font-size: 0.9375rem; color: var(--ink); outline: none; transition: border-color var(--t); background: white;
}
.tf-input:focus, .tf-textarea:focus, .tf-select:focus { border-color: var(--teal); }
.tf-textarea { resize: vertical; line-height: 1.6; min-height: 90px; }
.tf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.tf-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }

/* Buttons */
.tool-btn { padding: 0.8rem 1.5rem; border-radius: var(--r-md); background: var(--teal); color: white; font-weight: 700; font-family: inherit; font-size: 0.9375rem; cursor: pointer; border: none; transition: all var(--t); display: inline-flex; align-items: center; gap: 0.5rem; }
.tool-btn:hover { background: var(--teal-dark); transform: translateY(-1px); }
.tool-btn-lg { padding: 1rem 2rem; font-size: 1rem; width: 100%; justify-content: center; }
.tool-btn-outline { background: white; border: 1.5px solid var(--border-str); color: var(--ink); }
.tool-btn-outline:hover { border-color: var(--teal); color: var(--teal); background: white; }

/* Drop zone */
.dropzone {
  border: 2px dashed var(--border-str); border-radius: var(--r-lg); padding: 3rem 2rem; text-align: center;
  cursor: pointer; transition: all var(--t); background: var(--surface-2);
}
.dropzone:hover, .dropzone.drag { border-color: var(--teal); background: var(--cyan-glow); }
.dropzone-icon { font-size: 3rem; margin-bottom: 1rem; }
.dropzone-text { font-size: 1rem; font-weight: 600; color: var(--ink); margin-bottom: 0.3rem; }
.dropzone-sub { font-size: 0.85rem; color: var(--ink-muted); }

/* Result / preview area */
.tool-result { margin-top: 1.5rem; padding: 1.5rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); }
.tool-preview-doc { background: white; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 2rem; font-size: 0.875rem; line-height: 1.6; color: var(--ink); }

/* Privacy note */
.tool-privacy { display: flex; align-items: center; gap: 0.5rem; justify-content: center; font-size: 0.8rem; color: var(--ink-muted); margin-top: 1.25rem; }
.tool-privacy svg { color: var(--green); }

/* File list */
.file-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: white; border: 1px solid var(--border); border-radius: var(--r-sm); margin-bottom: 0.5rem; }
.file-item-icon { font-size: 1.25rem; }
.file-item-name { flex: 1; font-size: 0.875rem; color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-item-size { font-size: 0.78rem; color: var(--ink-muted); }
.file-item-remove { cursor: pointer; color: var(--ink-muted); font-size: 1.1rem; }
.file-item-remove:hover { color: #E5484D; }

@media(max-width:680px) {
  .tf-row, .tf-row-3 { grid-template-columns: 1fr; }
  .tool-workspace { padding: 1.5rem; }
}