/*
 * USO quote / call CTAs (wp-content/mu-plugins/uso-leads/cta.css)
 * Loaded by uso-leads.php on product pages (/products/<handle>) and collection pages (/collections/<handle>).
 * Ported from the live Shopify theme (paste 1 and paste 3, 2026-10-14/15):
 *   - phones (<750px): a bar fixed to the bottom of the screen with REQUEST QUOTE and CALL;
 *   - product pages: REQUEST QUOTE under the title (750px and wider also "or call toll-free (888) 881-1122"),
 *     with the financing line.
 * GTM: quote buttons have the literal text "REQUEST QUOTE" and class uso-cta-quote; call links have
 * href tel:+18888811122 and class uso-cta-call; data-uso-cta says where the click came from.
 */

.uso-qbar { display: none; }
.uso-dcta[hidden] { display: none !important; }
.uso-dcta { display: none; }
.uso-cta-quote { text-decoration: none !important; }

.uso-dcta.is-placed {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  margin: 16px 0 20px;
}
.uso-dcta .uso-cta-quote {
  display: inline-block; margin: 0; padding: 14px 28px; border-radius: 999px;
  background: var(--geral---primary-default, #41489f); color: #fff !important;
  font-size: 16px; font-weight: 700; letter-spacing: .04em; line-height: 1.3;
}
.uso-dcta .uso-cta-quote:hover, .uso-dcta .uso-cta-quote:focus { background: var(--geral---primary-darker, #070d3f); }
.uso-dcta .uso-cta-call {
  font-size: 15px; font-weight: 600; letter-spacing: 0; line-height: 1.3;
  color: var(--geral---primary-default, #41489f); text-decoration: underline;
}
.uso-dcta .uso-fin { display: block; flex-basis: 100%; margin: 0; font-size: 14px; line-height: 1.4; color: #333; }

@media (max-width: 749px) {
  /* Phones: REQUEST QUOTE under the title as well as in the bottom bar (old site: quote button under the title on
     phones too). The call link stays in the bottom bar only. */
  .uso-dcta.is-placed { margin: 4px 0 16px; gap: 8px; }
  .uso-dcta .uso-cta-quote { padding: 12px 24px; font-size: 15px; }
  .uso-dcta .uso-cta-call { display: none; }
  .uso-dcta .uso-fin { font-size: 13px; }

  .uso-qbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: #fff; box-shadow: 0 -2px 12px rgba(0, 0, 0, .15);
    box-sizing: border-box;
  }
  .uso-qbar a {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 48px; min-width: 0; padding: 0 8px; box-sizing: border-box;
    border: 2px solid var(--geral---primary-default, #41489f); border-radius: 999px;
    font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: 1px; line-height: 1.2;
    text-decoration: none !important; white-space: nowrap;
  }
  .uso-qbar .uso-cta-quote { flex: 1.7 1 0; background: var(--geral---primary-default, #41489f); color: #fff !important; }
  .uso-qbar .uso-cta-call { flex: 1 1 0; background: #fff; color: var(--geral---primary-default, #41489f) !important; }
  .uso-qbar svg { width: 18px; height: 18px; fill: currentColor; flex: 0 0 auto; }

  /* Nothing on the page may hide behind the bar. */
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)) !important; }
  /* Zoho chat bubble sits above the bar (same rule as the old site). */
  .zsiq_floatmain { bottom: calc(78px + env(safe-area-inset-bottom)) !important; }
}