/* "Want a page made for you?" box in the price section (js: bt-page-request.js).
   Base box styles come from .share in bt-c02-landing.css / -landing-color.css. */

.share.pr{position:relative;isolation:isolate;overflow:hidden;flex-wrap:wrap;transition:box-shadow .4s var(--ez),border-color .4s var(--ez)}
.share.pr [hidden]{display:none!important}
.share.pr .pr-ask{flex:1 1 220px;margin:0}
.share.pr .btn{flex:0 0 auto;white-space:nowrap}

/* The shine: a faint coral sheen that sweeps left to right every few seconds.
   Sits under the content, never takes clicks, and rests while the form is open. */
.share.pr::after{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:0;width:60%;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,119,89,0) 0%,rgba(255,119,89,.1) 32%,rgba(255,119,89,.3) 50%,rgba(255,119,89,.1) 68%,rgba(255,119,89,0) 100%);
  transform:translateX(-110%) skewX(-12deg);animation:pr-shine 5.5s cubic-bezier(.45,0,.25,1) 1.2s infinite}
@keyframes pr-shine{0%{transform:translateX(-110%) skewX(-12deg)}38%,100%{transform:translateX(280%) skewX(-12deg)}}
.share.pr.open::after,.share.pr.ready::after{animation:none;opacity:0}
.share.pr:hover{border-color:rgba(255,119,89,.6);box-shadow:0 10px 30px -18px rgba(255,119,89,.55)}
@media (prefers-reduced-motion:reduce){.share.pr::after{animation:none;opacity:0}}

/* Form */
.share.pr.open{border-color:rgba(255,119,89,.55);box-shadow:0 16px 40px -24px rgba(255,119,89,.6)}
.pr-form{flex:1 1 100%;display:grid;grid-template-columns:1fr 1fr;gap:12px 12px;margin-top:4px}
.pr-f{display:flex;flex-direction:column;gap:6px;min-width:0}
.pr-full{grid-column:1/-1}
.pr-f label{font:500 12px/1.2 var(--font-body);letter-spacing:.02em;color:var(--bt-concrete-700)}
.pr-f input,.pr-in{height:46px;width:100%;border-radius:12px;border:1px solid var(--bt-concrete-200);background:var(--bt-white);font:400 15px/1 var(--font-body);color:var(--bt-ink);transition:border-color .2s,box-shadow .2s}
.pr-f input{padding:0 14px;outline:0;box-sizing:border-box}
.pr-f input::placeholder{color:var(--bt-concrete-500)}
.pr-in{display:flex;align-items:center;overflow:hidden;box-sizing:border-box}
.pr-in input{height:100%;border:0;border-radius:0;padding-left:8px;background:transparent;box-shadow:none!important}
.pr-cc{padding-left:14px;font:500 15px/1 var(--font-body);color:var(--bt-concrete-700)}
.pr-f>input:focus,.pr-in:focus-within{border-color:#FF7759;box-shadow:0 0 0 3px rgba(255,119,89,.18)}
.pr-f.bad>input,.pr-f.bad .pr-in{border-color:#D9432B;box-shadow:0 0 0 3px rgba(217,67,43,.12)}
.share .pr-err{margin:0;min-height:0;font-size:12.5px;line-height:1.4;color:#B3341F}
.share .pr-err:empty{display:none}
.pr-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.share .pr-note{grid-column:1/-1;margin:0;padding:10px 12px;border-radius:10px;background:#FFF1EC;border:1px solid rgba(217,67,43,.25);font-size:13.5px;line-height:1.45;color:#8F2A18}
.pr-note a{color:inherit;text-decoration:underline}
.pr-act{grid-column:1/-1;display:flex;align-items:center;gap:16px;margin-top:2px}
.pr-go[disabled]{opacity:.6;cursor:progress}
.pr-link{background:none;border:0;padding:0;font:500 13.5px/1.3 var(--font-body);color:var(--bt-concrete-700);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pr-link:hover{color:var(--bt-ink)}
.share .pr-fine{grid-column:1/-1;margin:0;font-size:12.5px;line-height:1.45;color:var(--bt-concrete-600,#6b6b73)}

/* Done */
.share.pr.ready .pr-ask{display:none}
.pr-done{flex:1 1 100%}
.share .pr-done-h{display:flex;align-items:center;gap:10px;margin:0;font:600 17px/1.3 var(--font-body);color:var(--bt-ink)}
.pr-tick{width:22px;height:22px;flex:none;border-radius:50%;background:#FF7759;position:relative}
.pr-tick::after{content:"";position:absolute;left:7px;top:4px;width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.share .pr-done-s{margin:6px 0 14px 32px;font-size:14px;color:var(--bt-concrete-700)}
.pr-done-a{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-left:32px}

@media (max-width:760px){
  .pr-form{grid-template-columns:1fr}
  .pr-f input,.pr-in{height:50px;font-size:16px} /* 16px stops iOS zooming into the field */
  .share.pr .pr-ask{flex:none}
  .pr-act .btn{flex:1}
  .share .pr-done-s,.pr-done-a{margin-left:0}
}