/* portal.css — the request form and the shopper's account.
   Customer-facing, so it borrows the shop's chrome rather than the CMS's. */

.pflash{padding:12px 16px;font-size:14px;font-weight:500;margin:0 0 20px;border:1px solid}
.pflash.ok{background:#EAF6EC;border-color:#BBDFC2;color:#1F5B2C}
.pflash.err{background:#FBECEA;border-color:#EFC6C0;color:#8E3B32}

.pcard{background:#fff;border:1px solid var(--line);padding:clamp(18px,2.6vw,28px);margin:0 0 18px}
.pcard.pempty{text-align:center;color:var(--ink-60)}
.pcard.pdone h3{font-family:var(--serif);font-size:25px;margin:0 0 12px}

.phead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;
       margin:0 0 26px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.phead h2{font-family:var(--serif);font-size:clamp(26px,3.4vw,38px);font-weight:400}
.phead p{margin:5px 0 0;font-size:14px;color:var(--ink-60)}
.phead-act{display:flex;gap:9px;flex-wrap:wrap;align-items:center}

.psub{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.2em;
      text-transform:uppercase;color:var(--ink-40);margin:30px 0 12px}

.pleg{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.2em;
      text-transform:uppercase;color:var(--ink-40);margin:4px 0 14px}
.pleg + .pgrid{margin-bottom:4px}

.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:16px}
.pf{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;letter-spacing:.09em;
    text-transform:uppercase;color:var(--ink-60);margin-bottom:16px}
.pf .opt{font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink-40)}
.pf input,.pf textarea,.pf select{font:inherit;font-size:15px;font-weight:400;letter-spacing:0;
  text-transform:none;color:var(--ink);background:#fff;border:1px solid var(--line);
  padding:11px 13px;width:100%;border-radius:0}
.pf input:focus,.pf textarea:focus{outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(185,154,91,.13)}
.pf textarea{resize:vertical;min-height:92px}
.pf input[type=file]{padding:9px;font-size:13.5px;background:#FBF9F6}
.pbad{font-size:12.5px;font-weight:500;letter-spacing:0;text-transform:none;color:#9A4A42;font-style:normal}
.phint{font-size:12.5px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink-40);
       line-height:1.65;margin:10px 0 0}

/* the honeypot: off-screen, not display:none, so a bot still fills it */
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

.prow{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.prow b{display:block;font-family:var(--serif);font-size:18px;line-height:1.3;margin:4px 0 0}
.pref{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
      font-size:11.5px;letter-spacing:.08em;background:#F1EDE7;padding:3px 8px}
.pmeta{display:block;font-size:12.5px;color:var(--ink-40);margin-top:5px}
.pdetail{margin:14px 0 0;font-size:14.5px;line-height:1.75;color:#3C3B37}

.pstatus{flex:none;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
         padding:5px 10px;background:#EDE8E0;color:#5A5A54;white-space:nowrap}
.pstatus.s-new{background:#E6EFFA;color:#2D5684}
.pstatus.s-looking{background:#FBF1DC;color:#7A5A12}
.pstatus.s-found{background:#E4F1E4;color:#2F6B3A}
.pstatus.s-closed{background:#F1EDE7;color:#8C8A84}
.pstatus.s-paid{background:#E4F1E4;color:#2F6B3A}
.pstatus.s-sent{background:#FBF1DC;color:#7A5A12}
.pstatus.s-void{background:#F1EDE7;color:#8C8A84;text-decoration:line-through}

.pshots{display:flex;gap:9px;flex-wrap:wrap;margin:16px 0 0}
.pshots img{width:92px;height:92px;object-fit:cover;border:1px solid var(--line)}

.pthread{margin:18px 0 0;border-top:1px solid var(--line);padding-top:16px;
         display:flex;flex-direction:column;gap:12px}
.pmsg{max-width:84%;padding:11px 14px;font-size:14.5px;line-height:1.65}
.pmsg p{margin:4px 0 0}
.pwho{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-40)}
.pmsg.from-you{align-self:flex-end;background:var(--cream)}
.pmsg.from-shop{align-self:flex-start;background:var(--mint-soft)}

.preply{display:flex;gap:9px;align-items:flex-end;margin:16px 0 0}
.preply textarea{flex:1;font:inherit;font-size:14.5px;border:1px solid var(--line);
  padding:10px 12px;resize:vertical;min-height:44px}
.preply textarea:focus{outline:none;border-color:var(--gold)}

.btn-sm{font-size:11px;padding:7px 12px}

@media(max-width:620px){
  .pmsg{max-width:100%}
  .preply{flex-direction:column;align-items:stretch}
  .phead{flex-direction:column;align-items:flex-start}
}