.form-field { margin-bottom: var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); max-width: 480px; }
.form-field label { font-weight: 500; font-size: 12px; color: var(--muted); }
.form-field input, .form-field select, .form-field textarea {
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-family: inherit;
  background-color: var(--panel);
  color: var(--text);
}
.form-field textarea { min-height: 90px; resize: vertical; }
/* Colour swatches are shown larger so the chosen colour reads clearly. */
.form-field input[type="color"] { width: 72px; height: 44px; padding: 3px; cursor: pointer; }
.form-field-error input, .form-field-error select, .form-field-error textarea {
  border-color: var(--danger);
}
.field-error { color: var(--danger-text); font-size: 0.85rem; }
.field-hint, .hint { color: var(--muted-2); font-size: 11px; }

/* Read-only detail pairs (e.g. admin-managed info shown for viewing) laid out
   in a responsive two-column grid - the label/value equivalent of a form. */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-4); margin: var(--space-3) 0; }
@media (max-width: 640px) { .detail-grid { grid-template-columns: 1fr; } }
.detail-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.detail-item.detail-wide { grid-column: 1 / -1; }
.detail-label { font-size: 12px; font-weight: 500; color: var(--muted); }
.detail-value { font-size: 14px; color: var(--text); word-break: break-word; }
.detail-value.empty { color: var(--muted-2); }

.code-generate-row { display: flex; gap: var(--space-2); }
.code-generate-row input { flex: 1; }
.code-generate-row button { width: auto; flex-shrink: 0; }

details.voucher-restrictions { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3); margin-bottom: var(--space-3); background: var(--panel); }
details.voucher-restrictions summary { font-weight: 600; cursor: pointer; }
details.voucher-restrictions[open] summary { margin-bottom: var(--space-3); }

.form-actions { display: flex; gap: var(--space-2); margin-top: var(--space-4); justify-content: flex-end; align-items: center; }
/* Delete is pulled to the opposite (left) edge: reordered first, then its
   own right margin absorbs all free space, pushing save/cancel to the
   right regardless of the container's justify-content. */
.form-actions .delete-action { order: -1; margin-right: auto; }

.filter-form { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; gap: var(--space-3); margin-bottom: var(--space-4); }
.filter-form .form-field { margin-bottom: 0; max-width: 200px; }
.filter-form .form-actions { margin-top: 0; }

fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3); margin-bottom: var(--space-3); background: var(--panel); }
legend { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; padding: 0 var(--space-1); }

.checkbox-row, .radio-row { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.checkbox-row input, .radio-row input { width: auto; }
.checkbox-row label, .radio-row label { font-weight: 500; font-size: 13px; color: var(--text); }

.predefined-values-editor { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-2); }
.predefined-value-row { display: flex; gap: var(--space-2); align-items: center; }
.predefined-value-row.dragging { opacity: 0.4; }
.predefined-value-row .drag-handle { width: 1.5em; flex-shrink: 0; text-align: center; color: var(--muted); cursor: grab; }
.predefined-value-row input {
  flex: 1;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-family: inherit;
  background-color: var(--panel);
  color: var(--text);
}
.predefined-values-actions { display: flex; gap: var(--space-2); }

/* .newsletter-body-field/.about-page-body-field/.contact-page-body-field/
   .terms-page-body-field override the default .form-field max-width - the
   GrapesJS block editor (see newsletter_editor.js/about_page.js/
   contact_page.js/terms_page.js) needs the block panel + canvas to
   actually have room, unlike a normal single-column input. */
.newsletter-body-field, .about-page-body-field, .contact-page-body-field, .terms-page-body-field { max-width: none; }
.gjs-mount { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.gjs-preview-frame { display: block; width: 100%; height: 650px; border: 0; }

/* .gjs-field overrides .form-field's normal 480px cap (see forms.css above)
   for the Home Page "Fri Page" block's editor field - a page-builder canvas
   needs real width, unlike a plain input. .gjs-mount-wrap/.gjs-mount-expand/
   .gjs-mount--fullpage back that field's own "Full page editor" toggle (see
   home_page_blocks.js): expanding swaps the mount from its normal inline
   box to a fixed full-viewport overlay, then a window "resize" event tells
   GrapesJS to recalculate its internal iframe/canvas size for the new
   dimensions (it only reacts to the window resizing, not an arbitrary
   ancestor). !important is needed only on the two size properties, to win
   over the inline height GrapesJS itself sets on this same element at init
   (see grapesjs.init's `height` option). */
.gjs-field { max-width: none; }
.gjs-mount-wrap { position: relative; }
.gjs-mount-expand { margin-bottom: var(--space-2); }
.gjs-mount--fullpage {
  position: fixed; inset: 0; z-index: 1000; border-radius: 0;
  height: 100vh !important; width: 100vw !important;
}
/* Keeps the toggle button clickable (pinned to a visible spot) once the
   mount below it becomes a fixed full-viewport overlay - otherwise it stays
   in normal document flow, covered by the overlay's higher z-index. Centered
   at the top rather than in a corner - GrapesJS's own default panel already
   puts its layer/style/settings toggle icons in the top-right corner, which
   a corner-pinned button here would sit on top of and block. */
.gjs-mount-wrap--fullpage .gjs-mount-expand { position: fixed; top: var(--space-2); left: 50%; transform: translateX(-50%); z-index: 1001; }
body.gjs-fullpage-lock { overflow: hidden; }

.newsletter-template-picker { margin-bottom: var(--space-3); }
.newsletter-template-cards { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.newsletter-template-card {
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background-color: var(--panel);
  color: var(--text);
  font-size: 13.5px;
  font-family: inherit;
  cursor: pointer;
}
.newsletter-template-card:hover { border-color: var(--accent); color: var(--accent); }

/* .checkbox-checklist is a scrollable, bordered box of .checkbox-row
   entries (see promotion/new.html's department/product pickers) - a plain
   flat list of every category/product would otherwise run the page long,
   unlike a normal .form-field's few options. Its own .checkbox-row rules
   drop the shared 480px .form-field cap (the containing .form-field still
   gets it, which is fine - the checklist itself scrolls internally) and
   tighten the row spacing, since these lists can run to dozens of entries. */
.checkbox-checklist {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  background-color: var(--panel);
}
.checkbox-checklist .checkbox-row { margin-bottom: var(--space-1); }
.checklist-group-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); margin: var(--space-2) 0 var(--space-1);
}
.checklist-group-label:first-child { margin-top: 0; }
.checklist-search { margin-bottom: var(--space-2); }