/* ===== Layout & Cards ===== */
/* Top two-column layout (collapses on <=1100px) */
.em-top-layout {
  display: grid;
  grid-template-columns: minmax(560px, 1fr) minmax(400px, .9fr);
  gap: 14px;
  align-items: start;
}

@media (max-width:1100px) {
  .em-top-layout {
    grid-template-columns: 1fr;
  }
}

/* Card styles */
.em-card.big {
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .02);
}

.em-card.em-compact {
  padding: 14px;
}

.em-card .em-card-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
}

.em-divider {
  height: 1px;
  background: #f1f5f9;
  margin: 10px 0;
}

/* ===== Form fields ===== */
/* Inputs/selects base */
.em-form .easymenu-select,
.em-form input[type="text"],
.em-form input[type="number"],
.em-form textarea {
  color: #0f172a;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 9px 10px;
  width: 100%;
}

/* Placeholder color */
.em-form input::placeholder,
.em-form textarea::placeholder {
  color: #64748b;
  opacity: 1;
}

/* Focus ring */
.em-form input:focus,
.em-form textarea:focus,
.em-form select:focus {
  outline: 0;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .15);
}

/* Textarea sizing */
.em-form textarea {
  min-height: 110px;
  resize: vertical;
}

/* Field grids */
.em-fieldgrid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}

.em-fieldgrid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 16px;
  margin-top: 8px;
  margin-bottom: 8px;
}

@media (max-width:1100px) {
  .em-fieldgrid-3 {
    grid-template-columns: 1fr;
  }

  .em-fieldgrid-2 {
    grid-template-columns: 1fr;
  }
}

/* Field wrapper + actions row */
.em-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.em-field>label {
  font-size: 12px;
  color: #6b7280;
}

.em-actions-row {
  margin-top: 18px;
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Buttons */
/* Base + variants */
.em-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
}

.em-btn-green {
  background: #10b981;
  color: #fff;
}

.em-btn-primary {
  background: #3b82f6;
  color: #fff;
}

.em-btn-ghost {
  background: #fff;
  color: #334155;
  border-color: #e5e7eb;
}

.em-btn-sm {
  padding: 5px 9px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  text-decoration: none;
}

.em-blue {
  background: #e0f2fe;
  color: #0ea5e9;
}

.em-red {
  background: #fee2e2;
  color: #ef4444;
}

.em-btn[disabled] {
  opacity: .55;
  cursor: not-allowed;
}

/* ===== Images & Options grid ===== */
/* Split: left content + right options */
.em-io-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 14px;
  align-items: stretch;
}

@media (max-width:1100px) {
  .em-io-grid {
    grid-template-columns: 1fr;
  }
}

/* Left column stack */
.em-io-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Preview area */
.em-io-preview {
  display: flex;
}

/* Upload frame */
.em-io-frame {
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  width: 100%;
  min-height: 180px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafafa;
  position: relative;
  cursor: pointer;
}

/* Image in frame */
.em-io-frame img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 10px;
  transition: transform .25s ease;
}

/* Placeholder text */
.em-io-placeholder {
  color: #94a3b8;
  font-weight: 600;
}

/* Hover zoom */
.em-io-frame:hover img {
  transform: scale(1.02);
}

/* Top-right remove button */
.em-img-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: none;
  background: #ef4444;
  color: #fff;
  font-weight: 700;
  line-height: 28px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

/* Toast */
/* Base toast + show states */
.em-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(20px);
  background: #111827;
  color: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  opacity: 0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
  transition: .25s;
  z-index: 99999;
  font-size: 13px;
}

.em-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.em-toast.ok {
  background: #111827;
}

.em-toast.err {
  background: #991b1b;
}

/* ===== Filter box (standard grid) ===== */
/* Wrapper */
.em-filterbox {
  border: 1px solid #eef2f7;
  background: #fafcff;
  border-radius: 12px;
  padding: 12px 14px;
  margin: 6px 0 12px;
}

.em-filterbox__title {
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 13px;
  color: #334155;
}

/* Default grid: 4 columns */
.em-filterbox__grid {
  display: grid;
  grid-template-columns: 220px 180px 160px minmax(200px, 1fr);
  gap: 12px 14px;
  align-items: center;
}

@media (max-width:1200px) {
  .em-filterbox__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Toggle/text helpers */
.em-togglewrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.em-togtxt {
  font-size: 12px;
  color: #334155;
}

/* Smaller search field */
.em-field.search .em-search {
  max-width: 320px;
}

/* smaller than before */

/* ===== Table (centered) ===== */
/* Fixed layout + sticky header */
.em-table {
  table-layout: fixed;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.em-table thead th {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 2;
  border-bottom: 1px solid #eef2f7;
}

/* Column widths */
.em-table th:first-child {
  width: 28px;
}

/* drag */
.em-table th:nth-child(2) {
  width: 56px;
}

/* ID */
.em-table th:last-child {
  width: 140px;
}

/* actions */
/* Cell padding + hover */
#emItemsTable td,
#emItemsTable th {
  padding: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

#emItemsTable tbody tr {
  border-top: 1px solid #f3f4f6;
}

#emItemsTable tbody tr:hover {
  background: #fcfcff;
}

/* Drag handle visuals */
.drag-handle {
  cursor: move;
  opacity: .5;
  font-weight: 700;
}

#sortable_items tr:hover .drag-handle {
  opacity: .95;
}

/* Switch */
/* Base switch + knob */
.switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 24px;
  vertical-align: middle;
  transform: translateY(1px);
}

.switch input {
  display: none;
}

.switch .slider {
  position: absolute;
  inset: 0;
  background: #cbd5e1;
  border-radius: 999px;
  transition: .25s;
}

.switch .slider:before {
  content: "";
  position: absolute;
  left: 3px;
  bottom: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: .25s;
}

/* Checked state */
.switch input:checked+.slider {
  background: #22c55e;
}

.switch input:checked+.slider:before {
  transform: translateX(22px);
}

/* Small size */
.switch.small {
  width: 38px;
  height: 20px;
}

.switch.small .slider:before {
  width: 14px;
  height: 14px;
  bottom: 3px;
  left: 3px;
}

.switch.small input:checked+.slider:before {
  transform: translateX(18px);
}

/* ===== Modal (add groups) ===== */
/* Overlay + modal */
.ezm-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .45);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.ezm-modal {
  width: min(720px, 92vw);
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
}

/* Header/footer/body */
.ezm-modal__header,
.ezm-modal__footer {
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ezm-modal__header {
  border-bottom: 1px solid #eef2f7;
  justify-content: space-between;
}

.ezm-modal__title {
  font-weight: 600;
  font-size: 15px;
}

.ezm-modal__close {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #fff;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.ezm-modal__body {
  padding: 12px 14px;
  max-height: 60vh;
  overflow: auto;
}

/* Row + chips */
.ezm-modal__row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  margin: 8px 0;
  border: 1px solid #eef2f7;
  border-radius: 10px;
  background: #fbfcff;
}

.ezm-modal__row>input {
  transform: scale(1.05);
  margin-bottom: 6px;
}

.ezm-langrow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ezm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ezm-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #eef2ff;
  border: 1px solid #dbeafe;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
}

.ezm-chip .chip-x {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}

/* ===== Groups button + badge + popover ===== */
/* Groups pill */
.em-gpill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  position: relative;
}

.em-gpill .dashicons {
  font-size: 16px;
  width: 16px;
  height: 16px;
  line-height: 16px;
}

.em-folder {
  color: #1d4ed8;
}

/* Count badge */
.em-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  padding: 0 6px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: #2563eb;
}

.em-badge.em-badge-red {
  background: #ef4444;
}

/* Popover list */
.em-pop {
  position: absolute;
  z-index: 9999;
  min-width: 260px;
  max-width: 360px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .18);
  padding: 10px 12px;
  display: none;
}

.em-pop__title {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 6px;
  color: #334155;
}

.em-pop .em-lchips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.em-lchip {
  background: #f1f5f9;
  border: 1px solid #e5e7eb;
  color: #0f172a;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12px;
}

.em-pop ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.em-pop li {
  padding: 6px 0;
  border-bottom: 1px dashed #e5e7eb;
}

.em-pop li:last-child {
  border-bottom: none;
}

/* ===== Image frame hover overlay ===== */
/* Show helper on hover */
.em-io-hover {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #334155;
  background: rgba(255, 255, 255, .6);
  border-radius: 12px;
  text-align: center;
  padding: 6px 10px;
}

.em-io-frame:hover .em-io-hover {
  display: flex;
}

.em-io-frame:hover .em-io-placeholder {
  opacity: 0;
}

/* ===== Card actions ===== */
/* Right-aligned actions */
.em-card-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}

/* ===== Clean confirm modal ===== */
/* Delete-confirm overlay + modal */
.em-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .45);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.em-confirm {
  width: min(420px, 92vw);
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: 14px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .25);
  padding: 14px;
}

.em-confirm__title {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 6px;
}

.em-confirm__text {
  color: #475569;
  margin-bottom: 12px;
}

.em-confirm__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.em-btn-red {
  background: #ef4444;
  color: #fff;
  border: 1px solid #ef4444;
}

/* ===== Filters inline: one clean row ===== */
/* First inline layout variant (equal four columns) */
.em-filterbox__grid.em-filters-inline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* four equal columns */
  gap: 12px 14px;
  align-items: center;
}

/* Inline field wrapper */
.em-inline-field {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  /* allow proper shrinking inside grid */
}

/* Inline label look */
.em-inline-field .em-lbl {
  font-weight: 700;
  font-size: 12.5px;
  color: #0ea5e9;
  /* accent label color */
  letter-spacing: .1px;
  white-space: nowrap;
}

/* Inputs grow to fill */
.em-inline-field .easymenu-select,
.em-inline-field input[type="text"] {
  flex: 1;
  /* controls take remaining space */
  min-width: 120px;
}

/* Keep switches inline */
.em-inline-field .switch {
  flex: 0 0 auto;
}

/* Collapse to two columns on small screens */
@media (max-width:1200px) {
  .em-filterbox__grid.em-filters-inline {
    grid-template-columns: 1fr 1fr;
  }
}

/* ===== Filters inline: one compact row ===== */
/* Second inline layout variant (compact). Note: overrides previous grid when both apply */
.em-filterbox__grid.em-filters-inline {
  display: grid;
  /* Wider select/search, autos for toggles */
  grid-template-columns: minmax(220px, 300px) auto auto minmax(220px, 320px);
  align-items: center;
  gap: 8px 10px;
  /* tighter gaps */
}

/* Compact inline field */
.em-inline-field {
  display: flex;
  align-items: center;
  gap: 8px;
  /* smaller inner gap */
  min-width: 0;
}

/* Control sizing */
.em-inline-field .easymenu-select,
.em-inline-field input[type="text"] {
  flex: 1;
  min-height: 36px;
  min-width: 120px;
}

/* Text near switches */
.em-switchtext {
  margin-left: 6px;
  font-size: 12.5px;
  color: #6b7280;
  /* soft gray */
  font-weight: 600;
  white-space: nowrap;
}

/* Hide label if needed */
.em-inline-field.em-no-label .em-lbl {
  display: none;
}

/* Two columns on small screens (compact variant) */
@media (max-width:1200px) {
  .em-filterbox__grid.em-filters-inline {
    grid-template-columns: 1fr 1fr;
  }
}

/* Slightly tighter filter box padding */
.em-filterbox {
  padding: 10px 12px;
}

/* Blur background when delete modal is open */
/* Confirm overlay blur */
#em-confirm-overlay.em-modal-overlay {
  background: rgba(15, 23, 42, .35);
  /* slightly lighter to reveal blur */
  backdrop-filter: blur(6px);
  /* main blur */
  -webkit-backdrop-filter: blur(6px);
  /* Safari/iOS */
  transition: backdrop-filter .15s ease, background .15s ease;
}

/* Generic modal overlay blur */
.em-modal-overlay {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* keep overlay from blocking clicks on the × button */
.em-io-hover {
  z-index: 1;
  pointer-events: none;
}

/* put the × button above everything */
.em-img-remove {
  z-index: 2;
}

/* make the Add New Item CTA bold */
#em-add-item.em-btn.em-btn-primary {
  font-weight: 700;
}

/* (optional) chips for choice groups */
.ezm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ezm-chip {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  padding: 4px 8px;
  border-radius: 14px;
  font-size: 12px;
  position: relative;
}

.ezm-chip .ezm-chip-x {
  margin-left: 6px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-weight: 700;
  line-height: 1;
}