/*! Grant Brothers Tree Tools: Shared widget styles. Copyright (c) 2026 Grant Brothers VA, LLC (Grant Brothers Tree Service). All rights reserved. Proprietary and confidential. This code, its data tables and its text are not licensed for copying, modification, redistribution or use in other products. The only permitted use is embedding the hosted tool with the official snippet under the Grant Brothers Tree Tools terms of use. Terms: https://tools.virginiatreecare.com/terms/ */
/* Grant Brothers Tree Tools: shared widget shell.
   Mobile first. Works from 320 px to 1920 px wide. No logo inside the widget. */

/* Proprietary: Grant Brothers VA, LLC. Not licensed for reuse. */
:root {
  --gb-red: #C50100;
  --gb-btn: #C70000;
  --gb-btn-hover: #A30000;
  --gb-bright: #FC3A3A;
  --gb-ink: #343434;
  --gb-muted: #5f5f5f;
  --gb-gray: #F0F0F0;
  --gb-line: #DCDCDC;
  --gb-pink: #F8E1E1;
  --gb-blue: #006595;
  --gb-white: #FFFFFF;
  --gb-radius: 10px;
  --gb-font: "Lato", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* When embed.js is on the parent page, the frame is sized to fit. No inner scroll bar. */
html.gb-embedded, html.gb-embedded body { overflow: hidden; }

body {
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--gb-ink);
  font-family: var(--gb-font);
  font-size: 16px;
  line-height: 1.5;
}

/* Outer wrapper. tool.js measures this. */
.gbt {
  max-width: 820px;
  margin: 0 auto;
  padding: 4px;
}

.gbt-card {
  background: var(--gb-white);
  border: 1px solid var(--gb-line);
  border-top: 5px solid var(--gb-red);
  border-radius: var(--gb-radius);
  padding: 18px 16px 16px;
}

@media (min-width: 560px) {
  .gbt-card { padding: 26px 28px 20px; }
}

.gbt h1, .gbt h2, .gbt h3 {
  font-family: var(--gb-font);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.15;
  margin: 0 0 8px;
  color: var(--gb-ink);
}
.gbt h1 { font-size: 22px; }
.gbt h2 { font-size: 18px; }
.gbt h3 { font-size: 15px; }
@media (min-width: 560px) {
  .gbt h1 { font-size: 27px; }
  .gbt h2 { font-size: 20px; }
}
.gbt h1 .gbt-accent { color: var(--gb-red); }

.gbt-lead { margin: 0 0 18px; color: var(--gb-muted); font-size: 15px; }
.gbt p { margin: 0 0 12px; }

/* Form parts */
.gbt-field { margin: 0 0 16px; border: 0; padding: 0; min-width: 0; }
.gbt-label, .gbt-field > legend {
  display: block;
  font-weight: 700;
  font-size: 15px;
  margin: 0 0 6px;
  padding: 0;
  color: var(--gb-ink);
}
.gbt-hint { display: block; font-size: 13px; color: var(--gb-muted); margin: -2px 0 6px; font-weight: 400; }

.gbt select,
.gbt input[type="number"],
.gbt input[type="text"],
.gbt input[type="url"] {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  font: inherit;
  font-size: 16px; /* 16 px stops phone zoom on focus */
  color: var(--gb-ink);
  background: var(--gb-white);
  border: 2px solid var(--gb-line);
  border-radius: 8px;
  appearance: auto;
}
.gbt select:focus,
.gbt input:focus {
  outline: none;
  border-color: var(--gb-blue);
  box-shadow: 0 0 0 3px rgba(0, 101, 149, 0.2);
}

.gbt-row { display: flex; gap: 10px; }
.gbt-row > .gbt-grow { flex: 1 1 auto; min-width: 0; }
.gbt-row > .gbt-unit { flex: 0 0 120px; }
@media (max-width: 359px) { .gbt-row > .gbt-unit { flex-basis: 96px; } }

/* Segmented choice (radio buttons that look like buttons) */
.gbt-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.gbt-seg label,
.gbt-choice label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 12px;
  border: 2px solid var(--gb-line);
  border-radius: 8px;
  background: var(--gb-white);
  cursor: pointer;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.25;
}
.gbt-seg label { flex: 1 1 140px; justify-content: center; text-align: center; }
.gbt-seg input,
.gbt-choice input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.gbt-seg label:has(input:checked),
.gbt-choice label:has(input:checked) {
  border-color: var(--gb-red);
  background: var(--gb-pink);
}
.gbt-seg label:has(input:focus-visible),
.gbt-choice label:has(input:focus-visible) {
  outline: 3px solid var(--gb-blue);
  outline-offset: 2px;
}
/* Fallback for browsers without :has() */
.gbt-seg label.is-on,
.gbt-choice label.is-on { border-color: var(--gb-red); background: var(--gb-pink); }

.gbt-choice { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 560px) { .gbt-choice.gbt-two { grid-template-columns: 1fr 1fr; } }
.gbt-choice small { display: block; font-weight: 400; color: var(--gb-muted); font-size: 13px; }
.gbt-choice input[type="checkbox"] {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--gb-red);
}

/* Buttons */
.gbt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 12px 22px;
  border: 2px solid var(--gb-btn);
  border-radius: 8px;
  background: var(--gb-btn);
  color: #fff;
  font: inherit;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.gbt-btn:hover { background: var(--gb-btn-hover); border-color: var(--gb-btn-hover); }
.gbt-btn:focus-visible { outline: 3px solid var(--gb-blue); outline-offset: 2px; }
.gbt-btn-block { width: 100%; }
.gbt-btn-ghost { background: var(--gb-white); color: var(--gb-btn); }
.gbt-btn-ghost:hover { background: var(--gb-gray); color: var(--gb-btn-hover); }
.gbt-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.gbt-actions .gbt-btn { flex: 1 1 140px; }

.gbt-error {
  display: none;
  margin: 8px 0 0;
  padding: 8px 12px;
  border-left: 4px solid var(--gb-red);
  background: var(--gb-pink);
  font-size: 14px;
  font-weight: 700;
}
.gbt-error.is-on { display: block; }

/* Result panel */
.gbt-result {
  margin: 18px 0 4px;
  padding: 16px;
  border-radius: 8px;
  background: var(--gb-gray);
  border-left: 6px solid var(--gb-red);
}
.gbt-result[hidden] { display: none; }
.gbt-result:focus { outline: none; }
.gbt-big {
  display: block;
  font-weight: 900;
  font-size: 30px;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--gb-red);
  margin: 2px 0 8px;
}
@media (min-width: 560px) { .gbt-big { font-size: 36px; } }
.gbt-small { font-size: 14px; color: var(--gb-muted); }

.gbt-cta { margin: 14px 0 0; display: flex; flex-direction: column; gap: 8px; }
.gbt-cta a { font-weight: 700; color: var(--gb-btn); }
.gbt-cta a:hover { color: var(--gb-btn-hover); }
.gbt-cta .gbt-pro { /* partner "Talk to a pro" link: small, plain */
  font-size: 15px;
  color: var(--gb-blue);
}

.gbt-note {
  margin: 12px 0 0;
  padding: 10px 12px;
  background: var(--gb-white);
  border: 1px solid var(--gb-line);
  border-radius: 8px;
  font-size: 14px;
}
.gbt-warn {
  margin: 12px 0 0;
  padding: 12px;
  background: #FFF4CC;
  border: 2px solid #B26A00;
  border-radius: 8px;
  font-weight: 900;
}

.gbt details { margin: 12px 0 0; font-size: 14px; }
.gbt summary { cursor: pointer; font-weight: 700; color: var(--gb-blue); min-height: 32px; }

/* Data loading state */
.gbt-loading { margin: 8px 0 16px; padding: 14px; background: var(--gb-gray); border-radius: 8px; color: var(--gb-muted); font-weight: 700; }
.gbt-loading[hidden], .gbt-loadfail[hidden] { display: none; }
.gbt-loadfail { margin: 8px 0 16px; padding: 14px; background: var(--gb-pink); border-radius: 8px; font-weight: 700; }
.gbt-loadfail p { margin: 0 0 10px; }

/* Plain-text credit inside the frame (no logo, no link) */
.gbt-foot {
  margin: 14px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--gb-gray);
  font-size: 12px;
  color: var(--gb-muted);
  text-align: center;
}

.gbt-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
  .gbt-result:not([hidden]) { animation: gbt-in 0.2s ease-out; }
  @keyframes gbt-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}

/* Honeypot field for bots. Off-screen and hidden from screen readers (aria-hidden, tabindex -1).
   Not display:none (many bots skip those). It holds no visible text. */
.gbt-hp {
  position: absolute;
  left: -10000px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Privacy line in the in-frame footer */
.gbt-privacy { display: block; margin-top: 4px; }

/* Fun fact line (tree age, tree symptoms) */
.gbt-fun { font-weight: 700; color: var(--gb-ink); }

/* Share your result (tree age and tree symptoms only) */
.gbt-share { margin: 14px 0 0; }
.gbt-share-panel { margin: 10px 0 0; padding: 12px; background: var(--gb-white); border: 1px solid var(--gb-line); border-radius: 8px; }
.gbt-share-panel[hidden] { display: none; }
.gbt-share-text { font-size: 15px; margin: 0 0 10px; }
.gbt .gbt-share-link { font-size: 14px; min-height: 44px; }
.gbt-share-status { display: block; min-height: 1.5em; margin-top: 6px; font-size: 14px; font-weight: 700; color: #2E7D32; }

/* Wave 3 (10/12): mode tabs, number grids, stat tiles, tables, result cards. Shared by the wood and log,
   tree picker, fuel mix and tree height tools. Phone first: 2 columns at 320 px. */
.gbt-seg.gbt-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.gbt-seg.gbt-tabs label { font-size: 14px; padding: 8px 6px; }
@media (min-width: 560px) { .gbt-seg.gbt-tabs.gbt-tabs-4 { grid-template-columns: repeat(4, 1fr); } }
.gbt-seg.gbt-seg-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gbt-seg.gbt-seg-3 label, .gbt-seg.gbt-seg-2 label { font-size: 14px; padding: 8px 6px; }
.gbt-seg.gbt-seg-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gbt-panel[hidden] { display: none; }
.gbt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; align-items: end; }
@media (min-width: 560px) { .gbt-grid.gbt-grid-4 { grid-template-columns: repeat(4, 1fr); } .gbt-grid.gbt-grid-3 { grid-template-columns: repeat(3, 1fr); } }
.gbt-grid > .gbt-field { min-width: 0; }
.gbt-grid .gbt-label { font-size: 14px; }
.gbt-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 10px; }
.gbt-stats.gbt-stats-2 { grid-template-columns: 1fr 1fr; }
.gbt-stat { background: var(--gb-white); border: 1px solid var(--gb-line); border-radius: 8px; padding: 8px 6px; text-align: center; min-width: 0; }
.gbt-stat b { display: block; font-weight: 900; font-size: 22px; line-height: 1.1; color: var(--gb-red); overflow-wrap: anywhere; }
.gbt-stat span { display: block; font-size: 12px; font-weight: 700; color: var(--gb-muted); line-height: 1.25; margin-top: 2px; }
.gbt-math { font-size: 14px; color: var(--gb-ink); }
.gbt-box { margin: 12px 0 0; padding: 12px; background: var(--gb-white); border: 1px solid var(--gb-line); border-radius: 8px; font-size: 15px; }
.gbt-box h3 { margin: 0 0 6px; font-size: 15px; }
.gbt-box ul, .gbt-box ol { margin: 0; padding-left: 20px; }
.gbt-box li { margin: 0 0 5px; }
.gbt-box p { margin: 0 0 6px; }
.gbt-box p:last-child { margin-bottom: 0; }
.gbt-box[hidden] { display: none; }
.gbt-table { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--gb-white); }
.gbt-table th, .gbt-table td { padding: 6px 6px; border-bottom: 1px solid var(--gb-line); text-align: left; vertical-align: top; }
.gbt-table th { font-weight: 900; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--gb-muted); }
.gbt-table td.n, .gbt-table th.n { text-align: right; white-space: nowrap; }
.gbt-table th.n { white-space: normal; }
.gbt-table tr.is-pick td, .gbt-table td.is-pick, .gbt-table th.is-pick { background: var(--gb-pink); font-weight: 700; }
.gbt-src { font-size: 12px; color: var(--gb-muted); margin: 10px 0 0; }
.gbt-howto { margin: 0 0 16px; }
.gbt-howto svg { display: block; width: 100%; height: auto; max-width: 520px; margin: 0 auto 8px; }
.gbt-howto ol { margin: 0; padding-left: 20px; font-size: 15px; }
.gbt-howto li { margin: 0 0 4px; }
.gbt-tag { display: inline-block; margin: 0 4px 4px 0; padding: 2px 8px; border-radius: 4px; background: var(--gb-gray); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.03em; color: var(--gb-ink); }
.gbt-tag.t-good { background: #E3F1E4; color: #1B5E20; }
.gbt-tag.t-warn { background: #FFF4CC; color: #7A4A00; }
.gbt-tag.t-bad { background: var(--gb-pink); color: var(--gb-red); }