/* =============================================================================
   WindMar Comercial — brand.css (wizard reskin companion)
   -----------------------------------------------------------------------------
   The active wizard styles everything with inline JS style objects, so it needs
   almost no global CSS. The only globals we need are:

     - Montserrat (the brand face) — loaded via the Google Fonts <link> that
       build.js writes into the HTML <head>. No @font-face block here; that
       avoids the 404 noise of pointing at /fonts/*.ttf files we don't ship.
     - The subtle brand dot-grid behind the app (replaces the flat #EBF1FF fill).

   Import once at app root (build.js writes the <link> tag).
   ============================================================================ */

/* ----- Brand dot-grid background ---------------------------------------------
   The live wizard paints each screen's outer container with a flat #EBF1FF.
   Replace that with WHITE on the style object (WM.appBg) and add this class to
   the same element. The ::before paints the brand's 5%-opacity blue dot-grid —
   matches the approved prototype.

     // before:  page: { backgroundColor: "#EBF1FF", … }
     // after:   page: { backgroundColor: "#ffffff", … }   + className="wm-bg"
     <div style={S.page} className="wm-bg"> … </div>
*/
.wm-bg { position: relative; isolation: isolate; }
.wm-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(#1D429B 1px, transparent 1.4px);
  background-size: 26px 26px;
  opacity: 0.05;
  pointer-events: none;
}

/* Tactile press feedback — fires on touch (mobile) and click (desktop).
   Applies to every <button> globally plus any element opting in with
   className="wm-tap" (used on the RoofScreen / ServiceTypeScreen option
   cards which are <div onClick>, not buttons). */
button:not(:disabled):active,
.wm-tap:active {
  transform: scale(0.99);
  transition: transform 0.05s ease-out;
}