/* R1195 — compact private-gallery creation only.
   Header: title | creation fee/capacity/lifetime | close.
   First form row: project title | customer | mobile (one row).
   The new dialog remains above fixed photographer header (R1194). */
html body > .globalModalLayer.modalBack > .modal.pb1112CreateDialog > .modalHead {
  display:grid!important;
  grid-template-columns:max-content minmax(0,1fr) 30px!important;
  grid-template-rows:auto!important;
  align-items:center!important;
  gap:7px!important;
  padding:8px 11px!important;
  min-width:0!important;
  min-height:50px!important;
  direction:rtl!important;
}
html body > .globalModalLayer.modalBack > .modal.pb1112CreateDialog > .modalHead > h2 {
  grid-column:1!important;
  min-width:0!important;
  margin:0!important;
  font-size:16px!important;
  line-height:1.35!important;
  font-weight:850!important;
  white-space:nowrap!important;
}
html body > .globalModalLayer.modalBack > .modal.pb1112CreateDialog > .modalHead > .clientGalleryCreateBilling {
  grid-column:2!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  align-items:center!important;
  min-width:0!important;
  max-width:100%!important;
  gap:3px!important;
  margin:0!important;
  padding:3px 5px!important;
  border:1px solid #e3eaf6!important;
  border-radius:10px!important;
  background:#f6f9ff!important;
  box-sizing:border-box!important;
}
html body > .globalModalLayer.modalBack > .modal.pb1112CreateDialog > .modalHead > .clientGalleryCreateBilling > span {
  display:grid!important;
  justify-items:center!important;
  align-content:center!important;
  gap:1px!important;
  min-width:0!important;
  margin:0!important;
  padding:1px 2px!important;
  text-align:center!important;
}
html body > .globalModalLayer.modalBack > .modal.pb1112CreateDialog > .modalHead > .clientGalleryCreateBilling small {
  display:block!important;
  margin:0!important;
  padding:0!important;
  font-size:9px!important;
  font-weight:700!important;
  line-height:1.3!important;
  color:#64748b!important;
  white-space:nowrap!important;
}
html body > .globalModalLayer.modalBack > .modal.pb1112CreateDialog > .modalHead > .clientGalleryCreateBilling b {
  display:block!important;
  margin:0!important;
  padding:0!important;
  font-size:11px!important;
  font-weight:850!important;
  line-height:1.35!important;
  color:#26385a!important;
  white-space:nowrap!important;
}
html body > .globalModalLayer.modalBack > .modal.pb1112CreateDialog > .modalHead > button {
  grid-column:3!important;
  justify-self:end!important;
  align-self:center!important;
  width:30px!important;
  min-width:30px!important;
  height:30px!important;
  min-height:30px!important;
  padding:0!important;
  margin:0!important;
}

/* Explicitly allocate the first three entry fields to one line.  The old
   mobile CSS forces every .grid2 to one column, so this more specific
   create-form-only selector intentionally overrides that rule. */
html body > .globalModalLayer.modalBack > .modal.pb1112CreateDialog .clientGalleryCreateForm {
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  column-gap:8px!important;
  row-gap:10px!important;
  min-width:0!important;
}
html body > .globalModalLayer.modalBack > .modal.pb1112CreateDialog .clientGalleryCreateForm > * {
  grid-column:1/-1!important;
  min-width:0!important;
}
html body > .globalModalLayer.modalBack > .modal.pb1112CreateDialog .clientGalleryCreateForm > label:first-child {
  grid-column:1!important;
}
html body > .globalModalLayer.modalBack > .modal.pb1112CreateDialog .clientGalleryCreateForm > .grid2:nth-child(2) {
  grid-column:2/-1!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
  min-width:0!important;
}
html body > .globalModalLayer.modalBack > .modal.pb1112CreateDialog .clientGalleryCreateForm > label:first-child,
html body > .globalModalLayer.modalBack > .modal.pb1112CreateDialog .clientGalleryCreateForm > .grid2:nth-child(2) > label {
  display:grid!important;
  grid-template-rows:auto minmax(39px,auto)!important;
  align-items:start!important;
  align-content:start!important;
  gap:5px!important;
  min-width:0!important;
  margin:0!important;
}
html body > .globalModalLayer.modalBack > .modal.pb1112CreateDialog .clientGalleryCreateForm > label:first-child > input,
html body > .globalModalLayer.modalBack > .modal.pb1112CreateDialog .clientGalleryCreateForm > .grid2:nth-child(2) > label > input {
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  padding-inline:7px!important;
}

@media(max-width:820px) {
  html body > .globalModalLayer.modalBack > .modal.pb1112CreateDialog > .modalHead {
    grid-template-columns:max-content minmax(0,1fr) 28px!important;
    gap:4px!important;
    padding:7px 8px!important;
    min-height:46px!important;
  }
  html body > .globalModalLayer.modalBack > .modal.pb1112CreateDialog > .modalHead > h2 {
    font-size:12px!important;
    line-height:1.35!important;
  }
  html body > .globalModalLayer.modalBack > .modal.pb1112CreateDialog > .modalHead > .clientGalleryCreateBilling {
    gap:1px!important;
    padding:3px 2px!important;
  }
  html body > .globalModalLayer.modalBack > .modal.pb1112CreateDialog > .modalHead > .clientGalleryCreateBilling small {
    font-size:7.8px!important;
  }
  html body > .globalModalLayer.modalBack > .modal.pb1112CreateDialog > .modalHead > .clientGalleryCreateBilling b {
    font-size:9px!important;
  }
  html body > .globalModalLayer.modalBack > .modal.pb1112CreateDialog > .modalHead > button {
    width:28px!important;min-width:28px!important;height:28px!important;min-height:28px!important;
  }
  html body > .globalModalLayer.modalBack > .modal.pb1112CreateDialog .clientGalleryCreateForm {
    column-gap:5px!important;
    row-gap:9px!important;
  }
  html body > .globalModalLayer.modalBack > .modal.pb1112CreateDialog .clientGalleryCreateForm > .grid2:nth-child(2) {
    gap:5px!important;
  }
  html body > .globalModalLayer.modalBack > .modal.pb1112CreateDialog .clientGalleryCreateForm > label:first-child,
  html body > .globalModalLayer.modalBack > .modal.pb1112CreateDialog .clientGalleryCreateForm > .grid2:nth-child(2) > label {
    font-size:11px!important;
    line-height:1.3!important;
  }
  html body > .globalModalLayer.modalBack > .modal.pb1112CreateDialog .clientGalleryCreateForm > label:first-child > input,
  html body > .globalModalLayer.modalBack > .modal.pb1112CreateDialog .clientGalleryCreateForm > .grid2:nth-child(2) > label > input {
    font-size:16px!important;
    padding-inline:5px!important;
  }
}
@media(max-width:370px) {
  /* Ultra-narrow phones: keep all metrics IN the header, but on its second
     line so no value or close action is clipped. Inputs remain one row. */
  html body > .globalModalLayer.modalBack > .modal.pb1112CreateDialog > .modalHead {
    grid-template-columns:minmax(0,1fr) 28px!important;
  }
  html body > .globalModalLayer.modalBack > .modal.pb1112CreateDialog > .modalHead > h2 {grid-column:1!important;grid-row:1!important}
  html body > .globalModalLayer.modalBack > .modal.pb1112CreateDialog > .modalHead > button {grid-column:2!important;grid-row:1!important}
  html body > .globalModalLayer.modalBack > .modal.pb1112CreateDialog > .modalHead > .clientGalleryCreateBilling {
    grid-column:1/-1!important;grid-row:2!important;
  }
}