/* ============================================================
   PREMIUM DECOR SD — VISIT REQUEST FORM
   Shared by /appointment and /custom. Replaced the Calendly embed on both.
   Markup is rendered by assets/visit-request.js into [data-visit-request].

   Relies on the host page's CSS custom properties (--ink, --gold, --border,
   --muted, --white, --sans, --serif), which both pages already define.
   ============================================================ */

.request-wrap{background:var(--white);border:1px solid var(--border);overflow:hidden}
.request-label{display:flex;align-items:center;gap:12px;padding:18px 24px;border-bottom:1px solid var(--border);background:#fafaf8}
.request-label svg{width:16px;height:16px;stroke:var(--gold);fill:none;stroke-width:1.8;flex-shrink:0}
.request-label-text{display:flex;flex-direction:column;gap:1px}
.request-label-title{font-family:var(--serif);font-size:18px;color:var(--ink);letter-spacing:-0.01em;line-height:1.2}
.request-label-sub{font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);font-weight:500}
.request-body{padding:24px}
.request-foot{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-top:1px solid var(--border);background:#fafaf8;font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);font-weight:500}
.request-foot strong{font-family:var(--serif);font-size:13px;letter-spacing:0;text-transform:none;color:var(--ink);font-weight:400}

.rq-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rq-row.rq-row-3{grid-template-columns:1fr 1fr 90px}
.rq-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;min-width:0}
.rq-field label{font-size:11px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted)}
.rq-req{color:var(--gold)}
.rq-optional{text-transform:none;letter-spacing:0;font-size:10px;color:var(--muted);opacity:0.7}

.rq-field input,.rq-field select,.rq-field textarea{
  width:100%;padding:11px 13px;border:1px solid var(--border);background:var(--white);
  font-family:var(--sans);font-size:14px;color:var(--ink);border-radius:0;
  transition:border-color 0.15s;-webkit-appearance:none;appearance:none}
.rq-field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888680' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:12px;padding-right:34px}
.rq-field textarea{resize:vertical;min-height:76px}
.rq-field input:focus,.rq-field select:focus,.rq-field textarea:focus{outline:none;border-color:var(--gold)}
/* :user-invalid (not :invalid) so a field isn't marked red before it's touched. */
.rq-field input:user-invalid{border-color:#b4453c}

.rq-note{font-size:12px;line-height:1.6;color:var(--muted);margin:4px 0 18px}
.rq-submit{width:100%;background:var(--ink);color:#fff;border:none;padding:16px 22px;
  font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;
  cursor:pointer;transition:background 0.2s}
.rq-submit:hover:not(:disabled){background:var(--gold)}
.rq-submit:disabled{opacity:0.55;cursor:default}
.rq-status{font-size:13px;margin-top:10px;min-height:18px;color:#b4453c}

.rq-success{text-align:center;padding:34px 20px}
.rq-success svg{width:42px;height:42px;stroke:var(--gold);fill:none;stroke-width:1.6;margin-bottom:14px}
.rq-success h3{font-family:var(--serif);font-size:24px;font-weight:400;color:var(--ink);margin-bottom:8px}
.rq-success p{font-size:14px;line-height:1.6;color:var(--muted);max-width:380px;margin:0 auto}
.rq-success a{color:var(--ink);font-weight:500}

@media (max-width:560px){
  .rq-row,.rq-row.rq-row-3{grid-template-columns:1fr}
  .request-body{padding:20px 16px}
}