/* ==========================================================================
   DIALOGS & FORMS — owner stylesheet
   - shell of every dialog (BM_DIALOG: forms, editors, confirmations)
   - the form vocabulary used inside them:
       entity forms   .bmFormGrid  .bmField(.full)  .bmFieldLabel  .bmInput  .bmRows/.bmRow  .bmRowRemove  .bmAddRow  .bmCombo
       card editors   .bmDetailsFormGrid  .bmDetailsFormLabel  .bmDetailsFormFull  .bmDetailsFormInput  .bmDetailsFormRows/.bmDetailsFormRow  .bmDetailsSheetBtn
   Desktop: centered card that scales in. Phone (≤640px): bottom sheet sliding up.
   ========================================================================== */

/* ---- Overlay ---- */
.bmDialog{
  position:fixed; inset:0;
  z-index:calc(var(--z-dialog) + var(--dialog-layer, 0) * 2);
  display:grid; place-items:center;
  padding:24px;
  background:rgba(20,19,32,0);
  -webkit-backdrop-filter:blur(0); backdrop-filter:blur(0);
  transition:background var(--dur) var(--ease), backdrop-filter var(--dur) var(--ease);
  overscroll-behavior:contain;
}
.bmDialog.is-open{ background:rgba(20,19,32,.42); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.bmDialog.is-closing{ background:rgba(20,19,32,0); -webkit-backdrop-filter:blur(0); backdrop-filter:blur(0); }

/* ---- Panel ---- */
.bmDialogPanel{
  --dialog-w:620px;
  position:relative;
  width:min(var(--dialog-w), 100%);
  max-height:min(88vh, 900px);
  display:flex; flex-direction:column;
  background:var(--surface);
  color:var(--ink);
  border:1px solid rgba(62,61,86,.08);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xl);
  opacity:0;
  transform:translateY(16px) scale(.97);
  transition:opacity .2s var(--ease), transform .34s var(--ease-spring);
}
.bmDialogPanel.size-sm{ --dialog-w:440px; }
.bmDialogPanel.size-lg{ --dialog-w:820px; }
.bmDialogPanel.size-xl{ --dialog-w:1000px; }
.bmDialog.is-open .bmDialogPanel{ opacity:1; transform:none; }
.bmDialog.is-closing .bmDialogPanel{ opacity:0; transform:translateY(8px) scale(.985); transition-duration:.18s; transition-timing-function:var(--ease); }
.bmDialogPanel.shake{ animation:bmDialogShake .36s var(--ease); }
@keyframes bmDialogShake{ 20%{ transform:translateX(-6px); } 45%{ transform:translateX(5px); } 70%{ transform:translateX(-3px); } }

/* ---- Head ---- */
.bmDialogHead{
  flex:0 0 auto;
  display:flex; align-items:flex-start; gap:12px;
  padding:22px 22px 14px 24px;
}
.bmDialogGrip{ display:none; }
.bmDialogIcon{
  flex:0 0 40px; width:40px; height:40px; display:grid; place-items:center;
  border-radius:var(--radius-sm); background:var(--violet-soft); color:var(--violet-ink);
}
.bmDialogIcon svg{ width:20px; height:20px; }
.bmDialogTitles{ flex:1 1 auto; min-width:0; padding-top:3px; }
.bmDialogTitle{ margin:0; font:800 19px/1.25 var(--font); letter-spacing:-.01em; color:var(--ink); overflow-wrap:anywhere; }
.bmDialogSub{ margin:4px 0 0; font:500 13px/1.4 var(--font); color:var(--muted); }
.bmDialogClose{
  flex:0 0 36px; width:36px; height:36px; padding:0;
  display:grid; place-items:center;
  border:0; border-radius:50%;
  background:var(--surface-soft); color:var(--text-2);
  cursor:pointer;
  transition:background var(--dur-fast) var(--ease), transform var(--dur) var(--ease);
}
.bmDialogClose svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; }
.bmDialogClose:hover{ background:var(--surface-sunken); transform:rotate(90deg); }
.bmDialogClose:focus-visible{ outline:0; box-shadow:var(--focus-ring); }

/* ---- Body ---- */
.bmDialogBody{
  flex:1 1 auto; min-height:0;
  padding:6px 24px 22px;
  overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-width:thin;
}

/* ---- Foot ---- */
.bmDialogFoot{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:flex-end; gap:10px;
  padding:14px 24px 20px;
  border-top:1px solid rgba(62,61,86,.07);
}
.bmDialogError{
  flex:1 1 auto; min-width:0; margin:0 auto 0 0;
  font:600 12.5px/1.4 var(--font); color:var(--danger);
  animation:bmDialogFadeIn var(--dur) var(--ease-out);
}
@keyframes bmDialogFadeIn{ from{ opacity:0; transform:translateY(3px); } to{ opacity:1; transform:none; } }
.bmDialogBtn{
  flex:0 0 auto;
  position:relative;
  height:42px; padding:0 18px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid rgba(62,61,86,.14); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--ink);
  font:700 13.5px/1 var(--font); white-space:nowrap; cursor:pointer;
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.bmDialogBtn:hover:not(:disabled){ background:var(--surface-soft); }
.bmDialogBtn:active:not(:disabled){ transform:scale(.98); }
.bmDialogBtn:focus-visible{ outline:0; box-shadow:var(--focus-ring); }
.bmDialogBtn.primary{ border-color:transparent; background:var(--violet); color:#fff; box-shadow:0 6px 16px rgba(93,83,180,.24); }
.bmDialogBtn.primary:hover:not(:disabled){ background:var(--violet-ink); }
.bmDialogBtn.danger{ border-color:transparent; background:#C0434F; color:#fff; box-shadow:0 6px 16px rgba(168,62,72,.22); }
.bmDialogBtn.danger:hover:not(:disabled){ background:var(--danger); }
.bmDialogBtn:disabled{ opacity:.6; cursor:default; }
.bmDialogBtn.is-busy{ padding-left:40px; }
.bmDialogBtn.is-busy::before{
  content:""; position:absolute; left:16px; top:50%; width:14px; height:14px; margin-top:-7px;
  border-radius:50%; border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
  animation:bmDialogSpin .7s linear infinite;
}
.bmDialogBtn:not(.primary):not(.danger).is-busy::before{ border-color:rgba(62,61,86,.2); border-top-color:var(--ink); }
@keyframes bmDialogSpin{ to{ transform:rotate(360deg); } }

/* ---- Confirmation content ---- */
.bmDialogText, .bmConfirmText, .bmDetailsConfirmText{ margin:0; font:500 14px/1.55 var(--font); color:var(--text-2); }
.bmDialogSubject, .bmDetailsConfirmName{
  margin-top:12px; padding:12px 14px;
  border-radius:var(--radius-sm); background:var(--surface-soft);
  font:700 14px/1.4 var(--font); color:var(--ink); overflow-wrap:anywhere;
}

/* ==========================================================================
   Form vocabulary
   ========================================================================== */
.bmFormGrid, .bmDetailsFormGrid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px 14px;
}
.bmField, .bmDetailsFormLabel{
  display:flex; flex-direction:column; gap:7px; min-width:0;
}
.bmField.full, .bmDetailsFormFull{ grid-column:1 / -1; }
.bmFieldLabel, .bmDetailsFormLabel{
  font:700 11.5px/1.2 var(--font); letter-spacing:.05em; text-transform:uppercase; color:var(--muted);
}
.bmFieldLabel{ display:flex; align-items:center; gap:7px; }
.bmFieldOpt{ font-style:normal; font-weight:600; letter-spacing:0; text-transform:none; color:var(--muted2); }
.bmDetailsFormHint{ margin-top:6px; font:500 12px/1.45 var(--font); color:var(--muted2); }

/* inputs: one look for every text field, select and textarea in a dialog */
.bmInput, .bmDetailsFormInput{
  width:100%; min-width:0; min-height:44px;
  padding:10px 13px;
  border:1px solid rgba(62,61,86,.14); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--ink);
  font:500 14px/1.35 var(--font); letter-spacing:0; text-transform:none;
  transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.bmInput::placeholder, .bmDetailsFormInput::placeholder{ color:var(--muted2); opacity:.8; }
.bmInput:hover, .bmDetailsFormInput:hover{ border-color:rgba(62,61,86,.24); }
.bmInput:focus, .bmDetailsFormInput:focus{ outline:0; border-color:var(--violet); box-shadow:var(--focus-ring); }
.bmInput[aria-invalid="true"], .bmDetailsFormInput[aria-invalid="true"]{ border-color:var(--danger); box-shadow:0 0 0 3px rgba(168,62,72,.12); }
.bmInput:disabled, .bmDetailsFormInput:disabled{ background:var(--surface-soft); color:var(--muted); cursor:not-allowed; }
textarea.bmInput, .bmTextarea, textarea.bmDetailsFormInput{ min-height:100px; resize:vertical; line-height:1.5; }
select.bmInput, select.bmDetailsFormInput{
  appearance:none; -webkit-appearance:none; padding-right:40px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237A7888' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center;
}

/* repeatable rows (mark-up, tiers, links …) */
.bmRows, .bmDetailsFormRows{ display:flex; flex-direction:column; gap:8px; }
.bmRow, .bmDetailsFormRow{ display:grid; gap:8px; align-items:center; animation:bmRowIn var(--dur) var(--ease-out); }
@keyframes bmRowIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
.bmRow.two{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) 36px; }
.bmRow.tier{ grid-template-columns:1fr 1fr minmax(76px,.8fr) 86px 74px 36px; }
.bmDetailsFormRow{ grid-template-columns:150px minmax(0,1fr) 36px; }
.bmDetailsFormRow.three{ grid-template-columns:1fr 1fr minmax(90px,.7fr) 94px 82px 36px; }
.bmDetailsMediaList .bmDetailsFormRow{ grid-template-columns:22px minmax(0,1fr) minmax(0,1.7fr) 36px; }

/* remove-row buttons */
.bmRowRemove, .bmTransferRowRemove, .bmDetailsFormRow > button:not(.bmDetailsMediaDrag):last-child{
  width:36px; height:36px; padding:0;
  display:grid; place-items:center;
  border:1px solid transparent; border-radius:var(--radius-xs);
  background:transparent; color:var(--muted);
  font:700 15px/1 var(--font); cursor:pointer;
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.bmRowRemove:hover, .bmTransferRowRemove:hover, .bmDetailsFormRow > button:not(.bmDetailsMediaDrag):last-child:hover{ background:var(--danger-soft); color:var(--danger); }

/* "+ add row" buttons */
.bmAddRow, .bmDetailsSheetBtn{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:6px;
  height:34px; margin-top:4px; padding:0 13px;
  border:1px dashed rgba(93,83,180,.35); border-radius:var(--radius-pill);
  background:transparent; color:var(--violet-ink);
  font:700 12.5px/1 var(--font); cursor:pointer;
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.bmAddRow:hover, .bmDetailsSheetBtn:hover{ background:var(--violet-soft); border-style:solid; border-color:transparent; }

/* hotel combo: the list opens in the flow of the form, so a dialog never clips it */
.bmCombo{ position:relative; display:flex; flex-direction:column; gap:6px; }
.bmComboList{
  max-height:248px; overflow-y:auto; overscroll-behavior:contain;
  padding:4px;
  border:1px solid rgba(62,61,86,.10); border-radius:var(--radius-sm);
  background:var(--surface);
  box-shadow:var(--shadow-sm);
}
.bmComboList:not(.open):not(.is-static){ display:none; }
.bmComboList.open{ animation:bmRowIn var(--dur) var(--ease-out); }
.bmComboList.is-static{ box-shadow:none; max-height:300px; }
.bmComboRow{
  width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  padding:9px 11px; border:0; border-radius:var(--radius-xs);
  background:transparent; text-align:left; cursor:pointer;
  transition:background var(--dur-fast) var(--ease);
}
.bmComboRow:hover{ background:var(--surface-soft); }
.bmComboRow.active{ background:var(--violet-soft); }
.bmComboRow.active b{ color:var(--violet-ink); }
.bmComboRow b{ font:700 13.5px/1.3 var(--font); color:var(--ink); }
.bmComboRow em{ font:500 11.5px/1.3 var(--font); font-style:normal; color:var(--muted); }
.bmComboEmpty{ padding:14px 12px; font:500 13px/1.4 var(--font); color:var(--muted); }

/* ==========================================================================
   Phone: bottom sheet
   ========================================================================== */
@media (max-width:640px){
  .bmDialog{ place-items:end stretch; padding:0; }
  .bmDialogPanel{
    width:100%; max-height:calc(var(--bm-mobile-vh, 100dvh) - 24px);
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom:0;
    transform:translateY(100%);
    transition:opacity .2s var(--ease), transform .36s var(--ease-out);
  }
  .bmDialog.is-closing .bmDialogPanel{ transform:translateY(100%); opacity:1; transition-duration:.22s; }
  .bmDialogHead{ padding:22px 16px 12px 18px; }
  .bmDialogGrip{
    display:block; position:absolute; left:50%; top:8px;
    width:40px; height:4px; margin-left:-20px; border-radius:2px; background:rgba(62,61,86,.18);
  }
  .bmDialogTitle{ font-size:18px; }
  .bmDialogBody{ padding:4px 18px 18px; }
  .bmDialogFoot{ flex-wrap:wrap; padding:12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); }
  .bmDialogError{ flex-basis:100%; margin:0 0 4px; }
  .bmDialogFoot .bmDialogBtn{ flex:1 1 0; }
  .bmFormGrid, .bmDetailsFormGrid{ grid-template-columns:minmax(0,1fr); gap:14px; }
  .bmField.full, .bmDetailsFormFull{ grid-column:auto; }
  .bmRow.two{ grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) 36px; }
  .bmRow.tier, .bmDetailsFormRow.three{ grid-template-columns:1fr 1fr; }
  .bmDetailsFormRow{ grid-template-columns:minmax(0,1fr) 36px; }
  .bmDetailsMediaList .bmDetailsFormRow{ grid-template-columns:22px minmax(0,1fr) 36px; }
  .bmDetailsMediaList .bmDetailsFormRow [data-a], .bmDetailsMediaList .bmDetailsFormRow [data-b]{ grid-column:2; }
  .bmDetailsMediaList .bmDetailsFormRow > .bmDetailsMediaDrag{ grid-column:1; grid-row:1 / span 2; }
  .bmDetailsMediaList .bmDetailsFormRow > button:not(.bmDetailsMediaDrag):last-child{ grid-column:3; grid-row:1 / span 2; }
  .bmInput, .bmDetailsFormInput{ font-size:16px; }   /* no iOS zoom on focus */
}

@media (prefers-reduced-motion: reduce){
  .bmDialog, .bmDialogPanel{ transition:none; }
  .bmComboList.open{ animation:none; }
  .bmRow, .bmDetailsFormRow, .bmDialogError{ animation:none; }
}