/* ============================================================
   studio-shell.css — mapnow-style two-column layout for the
   Studio "List a creation" form. Layered on top of studio.html's
   inline styles; reorganizes the SAME fields (all IDs preserved)
   into cards with a sticky publish/tips sidebar. Themed to
   mapx (teal #5f8d74, cream, Playfair serif).
   ============================================================ */

/* widen the modal + drop its default padding (head/cols pad themselves) */
.mk-overlay .mk-modal.lst-modal { width: min(1080px, 96vw); max-width: min(1080px, 96vw);
  padding: 0; max-height: 94vh; overflow-y: auto; }

/* sticky header bar with the title + cancel/publish */
.lst-modal .lst-head { position: sticky; top: 0; z-index: 6; display: flex; align-items: center;
  justify-content: space-between; gap: 18px; padding: 15px 24px; background: rgba(255,255,255,.97);
  backdrop-filter: blur(6px); border-bottom: 1px solid #ece6da; }
.lst-modal .lst-head h2 { margin: 0; font-size: 20px; font-family: 'Playfair Display', Georgia, serif; color: #23201a; }
.lst-modal .lst-head .mk-formsub { margin: 2px 0 0; font-size: 12.5px; }
.lst-modal .lst-head-actions { display: flex; gap: 10px; flex: none; }
.lst-modal .lst-head-actions .fbtn { padding: 9px 17px; }

/* two columns: form on the left, sticky sidebar on the right */
.lst-modal .lst-cols { display: grid; grid-template-columns: 1fr 296px; gap: 22px;
  align-items: start; padding: 20px 24px 26px; }
@media (max-width: 860px){ .lst-modal .lst-cols { grid-template-columns: 1fr; } }
.lst-modal .lst-form { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.lst-modal .lst-side { position: sticky; top: 72px; display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 860px){ .lst-modal .lst-side { position: static; } }

/* cards */
.lst-modal .lst-card { background: #fff; border: 1px solid #e7e1d4; border-radius: 13px; padding: 15px 17px; }
.lst-modal .lst-card > h3 { margin: 0 0 3px; font-size: 15px; color: #23201a; font-weight: 700; }
.lst-modal .lst-card > h4 { margin: 0 0 8px; font-size: 14px; color: #23201a; }
.lst-modal .lst-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 2px; }
.lst-modal .lst-card-head h3 { margin: 0; }
.lst-modal .lst-help { margin: 0 0 6px; font-size: 12.5px; color: #8a857a; line-height: 1.5; }
/* first field label in a card shouldn't push away from the heading */
.lst-modal .lst-card > .ctl-label:first-of-type { margin-top: 10px; }

/* prominent location card */
.lst-modal .lst-card-loc { border-color: #cfe2dc; background: linear-gradient(180deg, #f6fbf9, #ffffff); }
.lst-modal #st-map { height: 264px; margin-top: 10px; }

/* price row checks */
.lst-modal .lst-checks { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 13px; }
.lst-modal .lst-checks .ctl-check { margin: 0; }
.lst-modal .lst-varsw { margin: 0; font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; }

/* tidy the variant (option-group) builder so it reads like mapnow's variant cards */
.lst-modal .f-optgroup { border-radius: 11px; border-color: #e2dccd; background: #fbfaf6; padding: 13px 14px; }
.lst-modal .og-head input[type="text"] { background: #fff; }
/* segmented variation-type picker (▾ Dropdown / ✎ Text / ⤴ File) — replaces the old <select> */
.lst-modal .og-typerow { flex-wrap: wrap; }
.lst-modal .og-seg { display: inline-flex; border: 1px solid #d4cfc3; border-radius: 9px; overflow: hidden; background: #faf9f6; }
.lst-modal .og-seg button { appearance: none; border: none; background: none; cursor: pointer; font: inherit;
  font-size: 12.5px; font-weight: 600; color: #6f6a5f; padding: 8px 14px; border-right: 1px solid #e4ded2; white-space: nowrap; }
.lst-modal .og-seg button:last-child { border-right: none; }
.lst-modal .og-seg button:hover { background: #f0ebe0; }
.lst-modal .og-seg button.on { background: #5f8d74; color: #fff; }

/* sidebar */
.lst-modal .lst-pubcard { border-color: #cfe2dc; }
.lst-modal .lst-pubcard .fbtn { width: 100%; margin-top: 4px; }
.lst-modal .lst-tips { margin: 0; padding-left: 17px; font-size: 12.5px; color: #6f6a5f; line-height: 1.65; }
.lst-modal .lst-tips li { margin-bottom: 4px; }
.lst-modal #st-form-msg { margin-top: 8px; }