/* Themed prompt / confirm / alert, replacing Safari's translucent native sheet.
   Solid white card, brand-red header, nothing see-through but the backdrop.
   Deliberately not scoped under .fh: the dialog is appended to document.body,
   because .fh is position:fixed with overflow:hidden and would clip it. */

.mmd-dlg-back{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(20,10,12,.55);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.mmd-dlg{
  width:100%;max-width:460px;
  background:#fff;                      /* opaque: the whole point of this file */
  border-radius:10px;overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.4);
  font-family:Inter,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:#241416;text-align:left;
}
.mmd-dlg-head{background:#b3122b;padding:14px 20px}
.mmd-dlg-head h2{
  margin:0;font-size:16px;font-weight:600;line-height:1.3;color:#fff;
}
/* Long messages (a drafted email, an order to approve) scroll inside the card
   rather than pushing the buttons off the screen. */
.mmd-dlg-body{padding:20px;max-height:60vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.mmd-dlg-body p{
  margin:0 0 14px;font-size:15px;line-height:1.5;color:#241416;
  /* These messages were written for window.alert and use \n for their line
     breaks — the item list in an Amazon order approval is one string. pre-wrap
     keeps those breaks without letting any HTML through. */
  white-space:pre-wrap;overflow-wrap:break-word;
}
.mmd-dlg-body p:last-child{margin-bottom:0}
.mmd-dlg-input{
  display:block;width:100%;box-sizing:border-box;
  border:1px solid #c9c0c2;border-radius:6px;
  padding:11px 12px;
  font:inherit;font-size:16px;      /* 16px or iOS zooms the page on focus */
  color:#241416;background:#fff;
}
.mmd-dlg-input:focus{outline:0;border-color:#b3122b;box-shadow:0 0 0 3px rgba(179,18,43,.18)}
.mmd-dlg-foot{
  display:flex;justify-content:flex-end;gap:10px;
  padding:14px 20px;background:#f7f5f5;border-top:1px solid #e2dcdd;
}
.mmd-dlg-btn{
  border:1px solid #c9c0c2;background:#fff;color:#241416;
  font:inherit;font-size:15px;font-weight:500;
  padding:10px 20px;border-radius:6px;cursor:pointer;
}
.mmd-dlg-btn:hover{background:#f0eaeb}
.mmd-dlg-ok{background:#b3122b;border-color:#b3122b;color:#fff}
.mmd-dlg-ok:hover{background:#8a0d21;border-color:#8a0d21}
.mmd-dlg-btn:focus-visible{outline:2px solid #241416;outline-offset:2px}

@media (max-width:560px){
  .mmd-dlg-foot{flex-direction:column-reverse}
  .mmd-dlg-btn{width:100%}
}

/* ---- onboard a Producer, inside the standard dialog card ------------------ */
/* Fields sized to what they hold. A two-letter state does not need the width
   of the card, and a stack of full-width boxes reads as a form nobody
   finished designing. */
.lic-new{max-width:520px}
.lic-intro{font-size:14px;color:#6b5f61;margin:0 0 16px}
.lic-frow{display:flex;gap:14px;flex-wrap:wrap}
.lic-f{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.lic-f>span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8a7c7e;font-weight:600}
.lic-f input,.lic-f select{
  box-sizing:border-box;width:100%;border:1px solid #c9c0c2;border-radius:6px;
  padding:10px 11px;font:inherit;font-size:16px;color:#241416;background:#fff;
}
.lic-f input:focus,.lic-f select:focus{outline:0;border-color:#ff0000;box-shadow:0 0 0 3px rgba(255,0,0,.16)}
.lic-f-wide{width:100%}
.lic-f-name{width:13rem}.lic-f-email{width:15rem}
.lic-f-phone{width:11rem}.lic-f-city{width:11rem}.lic-f-state{width:5.5rem}
.lic-f-stage{width:15rem}
.lic-err{color:#c00;font-size:14px;margin:0 0 4px}
@media (max-width:520px){
  .lic-f-name,.lic-f-email,.lic-f-phone,.lic-f-city,.lic-f-stage{width:100%}
  .lic-f-state{width:6.5rem}
}