/* ============================================================
   GET A ROOF QUOTE TODAY  -  images/quote-bar.jpg, 2160x380
   The plate carries the headline, the four white field panels with
   their icons, the gold 60 SECOND INSTANT QUOTE button, the trust
   badges and the "Built for Southern California" brush, so the live
   form draws no background of its own - only the typed text, the
   caret and the hit areas sit on top. Painted positions (px on the
   2160 plate, y measured from the top of the plate):
     field panels  y160-234  x508-753 / 760-1020 / 1030-1292 / 1299-1586
     text starts   x570 / 822 / 1092 / 1361
     gold button   x1610-2115  y116-258   (submits the form)
   Mobile (<=1000px) gets the cropped plate and a real white card,
   because the painted panels are not on that crop.
   ============================================================ */
.aa-qbar{background:#fff;}

@media (min-width:1001px){
  /* copy that the plate already shows, kept for search and screen readers */
  .aa-qbar .q-head,
  .aa-qbar .q-trust,
  .aa-qbar .q-built{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }

  .aa-qbar .q-form{position:absolute;inset:0;margin:0;}
  .aa-qbar .q-fld{position:absolute;top:42.10%;height:19.47%;}
  .aa-qbar .q-ic{display:none;}            /* icon is painted on the plate */
  .aa-qbar .q-f1{left:26.39%;width:7.92%;} /* Your Name        */
  .aa-qbar .q-f2{left:38.06%;width:8.61%;} /* Phone Number     */
  .aa-qbar .q-f3{left:50.56%;width:8.70%;} /* Property Address */
  .aa-qbar .q-f4{left:63.01%;width:8.75%;} /* Roof Type        */

  .aa-qbar .q-fld input,
  .aa-qbar .q-fld select{
    width:100%;height:100%;margin:0;padding:0;
    background:none;border:0;border-radius:0;box-shadow:none;outline:none;
    font-family:var(--ui);font-weight:400;font-size:1.02cqw;line-height:1;
    color:var(--navy);
    -webkit-appearance:none;appearance:none;
  }
  .aa-qbar .q-fld input::placeholder{color:#5d6b7d;opacity:1;}
  .aa-qbar .q-fld select{color:var(--navy);}
  .aa-qbar .q-fld select:invalid{color:#5d6b7d;}
  .aa-qbar .q-caret{display:none;}         /* arrow is painted on the plate */

  /* the whole painted panel stays clickable, not just the typing strip */
  .aa-qbar .q-fld::before{
    content:"";position:absolute;top:0;bottom:0;left:-3.2cqw;right:-.8cqw;
  }
  .aa-qbar .q-f1::before{left:-3.15cqw;right:-.75cqw;}
  .aa-qbar .q-f2::before{left:-3.10cqw;right:-.75cqw;}
  .aa-qbar .q-f3::before{left:-2.90cqw;right:-.75cqw;}
  .aa-qbar .q-f4::before{left:-3.27cqw;right:-1.55cqw;}
  /* focus ring drawn around the painted panel, not the typing strip */
  .aa-qbar .q-fld::before{border-radius:.42cqw;}
  .aa-qbar .q-fld:focus-within::before{box-shadow:0 0 0 .16cqw var(--red);}
  .aa-qbar .q-fld input,
  .aa-qbar .q-fld select{position:relative;z-index:2;}

  .aa-qbar .q-send{
    position:absolute;left:74.54%;top:30.53%;width:23.38%;height:37.37%;
    margin:0;padding:0;border:0;border-radius:.35cqw;background:none;
    font:inherit;color:transparent;cursor:pointer;
  }
  .aa-qbar .q-send svg{display:none;}
  .aa-qbar .q-send:hover{background:rgba(0,0,0,.08);}
  .aa-qbar .q-send{border-radius:.9cqw;}
  .aa-qbar .q-send:focus-visible{outline:.16cqw solid #fff;outline-offset:.12cqw;}
}

/* ---------- phones and small tablets ---------- */
@media (max-width:1000px){
  .aa-qbar{background:#f4f7fb;}
  .aa-qbar .layer{position:static;padding:0 16px 22px;}
  .aa-qbar .q-head{margin:18px 0 14px;text-align:center;}
  .aa-qbar .q-h2{
    margin:0;font-family:var(--display);font-style:italic;font-weight:700;
    font-size:1.85rem;line-height:1.05;letter-spacing:-.01em;color:var(--navy);
  }
  .aa-qbar .q-h2 span{color:var(--red);}
  .aa-qbar .q-sub{
    margin:8px 0 0;font-family:var(--ui);font-weight:800;font-size:.72rem;
    letter-spacing:.08em;color:var(--navy);
  }

  .aa-qbar .q-form{display:grid;gap:10px;margin:0;}
  .aa-qbar .q-fld{position:relative;}
  .aa-qbar .q-ic{
    position:absolute;left:12px;top:50%;transform:translateY(-50%);
    width:22px;height:22px;line-height:0;
  }
  .aa-qbar .q-ic svg{width:100%;height:100%;fill:var(--navy);}
  .aa-qbar .q-fld input,
  .aa-qbar .q-fld select{
    width:100%;height:50px;box-sizing:border-box;padding:0 14px 0 44px;
    background:#fff;border:1px solid #d8e0ea;border-radius:8px;
    font-family:var(--ui);font-size:1rem;color:var(--navy);
    -webkit-appearance:none;appearance:none;
  }
  .aa-qbar .q-fld input::placeholder{color:#5d6b7d;opacity:1;}
  .aa-qbar .q-fld select:invalid{color:#5d6b7d;}
  .aa-qbar .q-caret{
    position:absolute;right:16px;top:50%;width:0;height:0;margin-top:-3px;
    border-left:6px solid transparent;border-right:6px solid transparent;
    border-top:7px solid #5d6b7d;pointer-events:none;
  }
  .aa-qbar .q-send{
    display:flex;align-items:center;justify-content:center;gap:8px;
    width:100%;height:52px;border:0;border-radius:8px;background:var(--red);
    font-family:var(--ui);font-weight:900;font-size:1.05rem;letter-spacing:.04em;
    color:#fff;cursor:pointer;
  }
  .aa-qbar .q-send svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}
  .aa-qbar .q-send:hover{background:var(--red-dark);}

  .aa-qbar .q-trust{
    display:grid;grid-template-columns:repeat(2,1fr);gap:16px;
    margin:18px 0 0;padding:0;list-style:none;text-align:center;
  }
  .aa-qbar .q-tic{
    display:grid;place-items:center;width:46px;height:46px;margin:0 auto 7px;
    border-radius:50%;background:#e6edf7;
  }
  .aa-qbar .q-tic svg{width:58%;height:58%;fill:var(--navy);}
  .aa-qbar .q-trust b{
    display:block;font-family:var(--ui);font-weight:900;font-size:.72rem;
    line-height:1.15;letter-spacing:.02em;color:var(--navy);
  }
  .aa-qbar .q-built{margin:16px 0 0;text-align:center;line-height:1.1;}
  .aa-qbar .q-built span{
    display:block;font-family:var(--display);font-style:italic;font-weight:700;
    font-size:.95rem;letter-spacing:.04em;color:var(--navy);
  }
  .aa-qbar .q-built em{
    display:block;font-family:var(--script,"Priestacy",cursive);font-style:normal;
    font-size:1.65rem;color:var(--red);
  }
}

/* The gold 60 SECOND INSTANT QUOTE button on the plate opens the
   estimate tool, so the live hit area over it is a link. Mobile draws
   its own card with no painted button, so it keeps a real submit. */
.aa-qbar .q-send-m{display:none;}
@media (max-width:1000px){
  .aa-qbar .q-send{display:none !important;}
  .aa-qbar .q-send-m{
    display:flex;align-items:center;justify-content:center;gap:8px;
    width:100%;min-height:54px;margin-top:10px;border:0;border-radius:8px;cursor:pointer;
    background:linear-gradient(180deg,#e8171a,#c8102e);color:#fff;
    font-family:var(--ui);font-weight:800;font-size:1.05rem;letter-spacing:.04em;
  }
  .aa-qbar .q-send-m svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}
  .aa-qbar .q-send-m:hover{background:var(--red-dark);}
}