/* Site fixes layered over the Carrot theme. */

/* "Get my cash offer" button that jumps to the form, styled like the form's submit. */
.cta-offer { text-align: center; margin: 8px 0 24px; }
.cta-offer a {
  display: inline-block; padding: 14px 28px; border-radius: 5px;
  background: #fc9426; color: #1d1d1d; font-size: 20px; font-weight: 700; text-decoration: none;
}
.cta-offer a:hover, .cta-offer a:focus { background: #e9801a; color: #1d1d1d; text-decoration: none; }

@media (max-width: 767px) {
  /* Compact header: logo beside the name, no tagline, smaller BBB badge. */
  .brand { flex-direction: row; align-items: center; justify-content: center; gap: 10px; }
  .brand-logo { width: 40px; height: 40px; }
  .brand-text { width: auto; }
  /* The theme sizes these with more specific selectors, so these must win outright. */
  .brand-tagline { display: none !important; }
  /* The BBB image is a 300x68 sprite whose left half is the badge; scale it to 40px tall and
     crop to that half. Explicit sizes, because a lazy image at width:auto never loads. */
  .bbb-seal__badge { width: 88px !important; height: 40px !important; overflow: hidden; }
  .bbb-seal__badge img { width: 176px !important; height: 40px !important; max-width: none; }

  /* Tap targets of at least 44px. */
  .navbar-toggler { min-height: 44px; min-width: 88px; }
  .gform_wrapper input[type="text"], .gform_wrapper input[type="email"], .gform_wrapper input[type="tel"],
  form input[type="text"], form input[type="email"], form input[type="tel"] { min-height: 44px; }
}

/* Click-to-play YouTube thumbnail: the player loads only when someone presses play. */
.video-lite { position: relative; max-width: 640px; aspect-ratio: 4 / 3; margin: 0 0 20px; background: #000; }
.video-lite a, .video-lite img, .video-lite iframe { display: block; width: 100%; height: 100%; border: 0; object-fit: cover; }
.video-lite__play {
  position: absolute; top: 50%; left: 50%; width: 72px; height: 50px; margin: -25px 0 0 -36px;
  border-radius: 12px; background: rgba(204, 0, 0, .9);
}
.video-lite__play::after {
  content: ""; position: absolute; top: 15px; left: 29px;
  border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff;
}

/* "Related guides" lists added to each page's main content. */
.related-guides { margin: 32px 0 24px; padding: 16px 20px; background: #f3f6fa; border-left: 4px solid #166dab; }
.related-guides h2 { margin-top: 0; font-size: 22px; }
.related-guides ul { margin-bottom: 0; }

/* Compare table: on phones each row becomes a card, each cell labelled with its column. */
@media (max-width: 600px) {
  .compare-table thead { display: none; }
  .compare-table, .compare-table tbody, .compare-table tr, .compare-table th, .compare-table td { display: block; width: 100%; }
  .compare-table tr { margin-bottom: 16px; border: 1px solid #dfe5ec; border-radius: 6px; padding: 8px 12px; }
  .compare-table th { font-size: 18px; padding: 4px 0 8px; border: 0; }
  .compare-table td { border: 0; padding: 4px 0; }
  .compare-table td:not([data-label]) { font-size: 18px; font-weight: 700; padding-bottom: 8px; }
  .compare-table td[data-label]::before { content: attr(data-label) ": "; font-weight: 700; }
}

/* Call-out box near the top of a guide, and its "last reviewed" line. */
.callout { margin: 20px 0 28px; padding: 14px 18px; background: #fff7ec; border-left: 4px solid #fc9426; }
.callout p { margin: 0; }
.guide-updated { color: #666; font-size: 15px; margin-top: -6px; }