/* Shared styles for Lookmold interactive tools (/tools/). Pages may add small overrides inline. */
.tool-scope { box-sizing: border-box; color: #333; }
.tool-scope *, .tool-scope *::before, .tool-scope *::after { box-sizing: border-box; }
.tool-scope .container { max-width: 1200px; margin: 0 auto; }
.tool-scope .center { background: #fff; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,.1); padding: 25px; margin-bottom: 30px; }
.tool-scope .intro-section { margin-bottom: 25px; text-align: center; }
.tool-scope .intro-section h2 { color: #2c3e50; margin-bottom: 15px; }
.tool-scope .intro-section p { color: #4a4a4a; max-width: 800px; margin: 0 auto 15px; }
.tool-scope .info-banner { background: #e8f7ef; color: #1e7e34; padding: 12px; border-radius: 6px; margin: 20px auto 0; font-size: .95rem; text-align: center; max-width: 90%; }
.tool-scope .info-banner--warn { background: #fdf2e9; color: #b9481e; }

/* Forms */
.tool-scope .calculator-section { padding: 15px 0; }
.tool-scope .form-row { display: flex; flex-wrap: wrap; margin: 0 -10px; }
.tool-scope .form-group { padding: 0 10px; margin-bottom: 22px; flex: 1; min-width: 250px; }
.tool-scope .form-group.full-width { flex: 0 0 100%; }
.tool-scope label { display: block; margin-bottom: 8px; font-weight: 600; color: #34495e; }
.tool-scope input[type="number"], .tool-scope input[type="text"], .tool-scope input[type="datetime-local"], .tool-scope select {
  width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px; color: #333; background: #fff; }
.tool-scope input:focus, .tool-scope select:focus { border-color: #1e7e34; outline: none; box-shadow: 0 0 0 3px rgba(30,126,52,.15); }
.tool-scope .range-hint { font-size: .8rem; color: #6b7280; margin-top: 4px; }
.tool-scope .checkbox-group { display: grid; gap: 10px; margin-top: 8px; }
.tool-scope .checkbox-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 6px; }
.tool-scope .checkbox-item input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; accent-color: #1e7e34; flex: 0 0 auto; }
.tool-scope .checkbox-item label { margin: 0; font-weight: normal; }
.tool-scope .calc-btn { display: block; width: 100%; max-width: 400px; margin: 24px auto 10px; padding: 15px; background: #1e7e34; color: #fff; border: 0; border-radius: 6px; font-size: 18px; font-weight: 700; cursor: pointer; }
.tool-scope .calc-btn:hover { background: #19692c; }
.tool-scope .field-error { color: #c0392b; font-size: .9rem; margin-top: 6px; }

/* Quiz */
.tool-scope .quiz-progress { height: 8px; background: #e0e0e0; border-radius: 4px; overflow: hidden; margin-bottom: 12px; }
.tool-scope .quiz-progress-bar { height: 100%; width: 0; background: #1e7e34; transition: width .2s ease; }
.tool-scope .quiz-step-label { color: #4a4a4a; font-size: .9rem; margin-bottom: 16px; }
.tool-scope .quiz-question { color: #2c3e50; margin-bottom: 8px; font-size: 1.15rem; }
.tool-scope .quiz-hint { color: #4a4a4a; font-size: .95rem; margin-bottom: 14px; }
.tool-scope .quiz-options { display: grid; gap: 10px; }
.tool-scope .quiz-option { display: block; width: 100%; text-align: left; padding: 14px 16px; border: 1px solid #ddd; border-radius: 6px; background: #fff; color: #2c3e50; font-size: 16px; cursor: pointer; }
.tool-scope .quiz-option:hover, .tool-scope .quiz-option:focus { border-color: #1e7e34; outline: none; box-shadow: 0 0 0 3px rgba(30,126,52,.15); }
.tool-scope .quiz-option.is-selected { border-color: #1e7e34; background: #e8f7ef; font-weight: 600; }
.tool-scope .quiz-nav { margin-top: 16px; }
.tool-scope .quiz-back, .tool-scope .quiz-restart { background: transparent; border: 1px solid #ccc; border-radius: 6px; padding: 10px 16px; cursor: pointer; color: #34495e; font-size: 15px; }
.tool-scope .quiz-restart { display: block; margin: 20px auto 0; }

/* Results */
.tool-scope .result-container h2, .tool-scope .result-container h3 { color: #2c3e50; margin-bottom: 16px; }
.tool-scope .verdict-box { text-align: center; padding: 20px; margin-bottom: 20px; background: #f8f9fa; border-radius: 6px; }
.tool-scope .verdict-label { display: inline-block; font-size: 1.5rem; font-weight: 700; padding: 6px 16px; border-radius: 4px; margin-bottom: 10px; }
.tool-scope .verdict-likely { background: #e8f7ef; color: #1e7e34; }
.tool-scope .verdict-caution { background: #fff4e0; color: #b9481e; }
.tool-scope .verdict-unlikely { background: #fef2f0; color: #c0392b; }
.tool-scope .big-number { font-size: 2.4rem; font-weight: 700; color: #2c3e50; line-height: 1.1; }
.tool-scope .big-number small { font-size: 1rem; font-weight: 600; color: #6b7280; display: block; }
.tool-scope .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 16px 0 20px; }
.tool-scope .stat-card { background: #f8f9fa; border-radius: 6px; padding: 14px; text-align: center; }
.tool-scope .stat-card .stat-value { font-size: 1.4rem; font-weight: 700; color: #2c3e50; }
.tool-scope .stat-card .stat-label { font-size: .85rem; color: #6b7280; }
.tool-scope .why-list ul, .tool-scope .guide-links { padding-left: 1.2rem; color: #4a4a4a; }
.tool-scope .why-list li, .tool-scope .guide-links li { margin-bottom: 10px; line-height: 1.5; }
.tool-scope .result-table { width: 100%; border-collapse: collapse; margin: 12px 0 20px; font-size: .95rem; }
.tool-scope .result-table th, .tool-scope .result-table td { border-bottom: 1px solid #eee; padding: 10px 8px; text-align: left; vertical-align: top; }
.tool-scope .result-table th { color: #2c3e50; background: #f8f9fa; }
.tool-scope .flag-ok { color: #1e7e34; font-weight: 600; }
.tool-scope .flag-warn { color: #b9481e; font-weight: 600; }
.tool-scope .flag-bad { color: #c0392b; font-weight: 600; }
.tool-scope .disclaimer { background: #fdf2e9; padding: 15px; border-radius: 6px; margin: 20px 0; font-size: .9rem; color: #c0392b; }
.tool-scope .cta-specialist { background: #e8f7ef; border-left: 4px solid #1e7e34; padding: 15px; margin: 20px 0; border-radius: 6px; }
.tool-scope .cta-specialist h4 { color: #2c3e50; margin-bottom: 8px; }
.tool-scope .cta-specialist p { color: #4a4a4a; margin-bottom: 12px; }
.tool-scope .phone-cta { display: inline-flex; align-items: center; justify-content: center; background: #1e7e34; color: #fff; padding: 12px 18px; border-radius: 4px; text-decoration: none; font-weight: 700; }
.tool-scope .phone-cta-lg { width: 100%; max-width: 400px; padding: 16px 18px; font-size: 1.15rem; }
.tool-scope .phone-cta:hover { background: #19692c; color: #fff; }
.tool-scope .powered-by { text-align: center; margin-top: 25px; font-size: .8rem; }
.tool-scope .powered-by a { color: #4a4a4a; text-decoration: none; }
.tool-scope .faq-section h2 { text-align: center; margin-bottom: 24px; color: #2c3e50; }
.tool-scope .faq-item { margin-bottom: 22px; border-bottom: 1px solid #eee; padding-bottom: 16px; }
.tool-scope .faq-item:last-child { border-bottom: none; }
.tool-scope .faq-item h3 { color: #2c3e50; margin-bottom: 8px; font-size: 1.05rem; }
.tool-scope .faq-item p { color: #4a4a4a; line-height: 1.6; }
.tool-scope .ref-table { width: 100%; border-collapse: collapse; margin: 10px 0 20px; font-size: .92rem; }
.tool-scope .ref-table th, .tool-scope .ref-table td { border: 1px solid #e5e7eb; padding: 8px; text-align: left; }
.tool-scope .ref-table th { background: #f8f9fa; color: #2c3e50; }
.tool-scope .table-wrap { overflow-x: auto; }
@media (max-width: 768px) {
  .tool-scope .center { padding: 16px; }
  .tool-scope .phone-cta { width: 100%; }
}