/* ════════════════════════════════════════════
   TOOLS TEMPLATE CSS — sibling to service-template.css. Adds widget-specific
   components for AI Tools / Calculators / Prompts / Templates / Directory
   pages only. Same brand tokens: primary #085e9d, gold accent #dcac1c.
   Link this ALONGSIDE service-template.css (which supplies hero/section/
   FAQ/CTA/related-grid chrome) — this file only adds what that one lacks.
════════════════════════════════════════════ */

/* Tool interface panel (input + output) */
.tool-panel { background:#fff; border:1px solid rgba(9,9,25,0.08); border-radius:18px; padding:32px; box-shadow:0 10px 30px rgba(8,94,157,0.08); }
.tool-input-group { margin-bottom:18px; }
.tool-input-group label { display:block; font-size:0.85rem; font-weight:600; color:#090919; margin-bottom:8px; }
.tool-input-group input, .tool-input-group textarea, .tool-input-group select {
    width:100%; border:1px solid rgba(9,9,25,0.15); border-radius:10px; padding:12px 14px;
    font-family:'Poppins',sans-serif; font-size:0.92rem; color:#1a1a2e; transition:border-color .2s;
}
.tool-input-group input:focus, .tool-input-group textarea:focus, .tool-input-group select:focus { outline:none; border-color:#085e9d; }
.tool-input-group textarea { resize:vertical; min-height:100px; }
.tool-btn-generate { background:#085e9d; color:#fff; border:none; padding:14px 30px; border-radius:0 14px; font-weight:600; font-size:0.95rem; cursor:pointer; transition:background .25s; display:inline-flex; align-items:center; gap:8px; }
.tool-btn-generate:hover { background:#0a72be; }
.tool-btn-generate:disabled { opacity:0.6; cursor:not-allowed; }
.tool-output-box { background:#f7f9fc; border:1px dashed rgba(9,9,25,0.15); border-radius:14px; padding:24px; margin-top:24px; min-height:100px; font-size:0.92rem; color:#333; line-height:1.7; }
.tool-output-box.tool-output-empty { display:flex; align-items:center; justify-content:center; color:#94a3b8; font-style:italic; text-align:center; }
.tool-output-actions { display:flex; gap:10px; margin-top:14px; }
.tool-btn-copy, .tool-btn-reset { background:#fff; border:1px solid rgba(9,9,25,0.15); color:#333; padding:9px 18px; border-radius:8px; font-size:0.85rem; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:all .2s; }
.tool-btn-copy:hover, .tool-btn-reset:hover { border-color:#085e9d; color:#085e9d; }
.tool-btn-copy.copied { background:#085e9d; color:#fff; border-color:#085e9d; }
.tool-launching-note { background:#fff8e6; border:1px solid #f0d78c; border-radius:10px; padding:14px 18px; margin-top:14px; font-size:0.85rem; color:#7a5c00; display:flex; gap:10px; align-items:flex-start; }
.tool-launching-note i { color:#dcac1c; margin-top:2px; }

/* Calculators */
.calc-form { background:#fff; border:1px solid rgba(9,9,25,0.08); border-radius:18px; padding:32px; box-shadow:0 10px 30px rgba(8,94,157,0.08); }
.calc-result-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:28px; }
.calc-result-card { background:linear-gradient(135deg,#0a3d6b 0%,#085e9d 100%); border-radius:14px; padding:20px; text-align:center; color:#fff; }
.calc-result-card .calc-result-num { font-size:1.6rem; font-weight:800; display:block; margin-bottom:4px; }
.calc-result-card .calc-result-lbl { font-size:0.72rem; text-transform:uppercase; letter-spacing:0.05em; color:rgba(255,255,255,0.75); }
.calc-result-card.calc-highlight { background:linear-gradient(135deg,#dcac1c 0%,#f0c23a 100%); color:#06193c; }
.calc-result-card.calc-highlight .calc-result-lbl { color:rgba(6,25,60,0.7); }
.calc-assumptions { font-size:0.78rem; color:#888; margin-top:16px; line-height:1.6; }

/* Prompt / template / directory cards */
.prompt-card, .template-card { background:#fff; border:1px solid rgba(9,9,25,0.08); border-radius:14px; padding:24px; margin-bottom:16px; }
.prompt-card h3, .template-card h3 { font-size:1rem; margin-bottom:10px; }
.prompt-card pre, .template-card pre { background:#f7f9fc; border-radius:10px; padding:16px; font-family:'Poppins',sans-serif; font-size:0.85rem; color:#333; white-space:pre-wrap; word-wrap:break-word; margin:0 0 12px; line-height:1.6; }
.prompt-card .prompt-meta, .template-card .template-meta { font-size:0.8rem; color:#666; margin-bottom:12px; }
.prompt-card .prompt-tip { font-size:0.82rem; color:#085e9d; background:#e8f1fb; border-radius:8px; padding:10px 14px; margin-top:12px; }

.directory-card { background:#fff; border:1px solid rgba(9,9,25,0.08); border-radius:14px; padding:24px; height:100%; }
.directory-card h3 { font-size:1.02rem; margin-bottom:6px; }
.directory-card .directory-pricing { display:inline-block; background:#e8f1fb; color:#085e9d; font-size:0.72rem; font-weight:600; padding:3px 10px; border-radius:20px; margin-bottom:12px; }
.directory-card p { font-size:0.88rem; color:#555; line-height:1.6; margin:0 0 10px; }
.directory-card .directory-best-for { font-size:0.8rem; color:#333; margin-bottom:8px; }
.directory-card .directory-best-for b { color:#090919; }
.directory-card a.directory-visit { color:#085e9d; font-weight:600; font-size:0.85rem; text-decoration:none; }
.directory-card a.directory-visit:hover { color:#dcac1c; }

/* NOTE: .tools-copy-toast styling lives inline in inc/footer.php (not here) —
   the toast <div> itself is in footer.php, which loads on every page site-
   wide, so its hide/show CSS must always be present regardless of whether
   this stylesheet is linked, or it would render as stray visible text on
   every existing page that doesn't load this file. */

/* Responsive */
@media (max-width: 991px) {
    .calc-result-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 767px) {
    .tool-panel, .calc-form { padding:22px; }
    .calc-result-grid { grid-template-columns:1fr 1fr; gap:10px; }
    .tool-output-actions { flex-wrap:wrap; }
}