/* =========================================================================
   Resto Menu Maker — Frontend CSS
   Covers: editor UI, dashboard, and the shared card layout styles
   ========================================================================= */

/* ── Reset / base ──────────────────────────────────────────────────────── */
.rmm-wrap *, .rmm-wrap *::before, .rmm-wrap *::after {
	box-sizing: border-box;
}
.rmm-wrap {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
	font-size: 14px;
	color: #333;
	line-height: 1.5;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.rmm-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 8px 16px;
	border: 1px solid #d0d0d0;
	border-radius: 4px;
	background: #fff;
	color: #333;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.rmm-btn:hover { background: #f5f5f5; border-color: #bbb; }
.rmm-btn:focus { outline: 2px solid #4a90e2; outline-offset: 2px; }
.rmm-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.rmm-btn-primary {
	background: #2271b1;
	border-color: #2271b1;
	color: #fff;
}
.rmm-btn-primary:hover { background: #135e96; border-color: #135e96; color: #fff; }

.rmm-btn-danger { border-color: #c0392b; color: #c0392b; }
.rmm-btn-danger:hover { background: #fdf0f0; }

.rmm-btn-locked {
	opacity: 0.45;
	cursor: not-allowed;
	position: relative;
}
.rmm-btn-locked:hover { background: #fff; border-color: #c0392b; }
.rmm-btn-locked::after {
	content: attr(data-tooltip);
	display: none;
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	background: #333;
	color: #fff;
	font-size: 11px;
	line-height: 1.4;
	padding: 5px 9px;
	border-radius: 4px;
	white-space: nowrap;
	pointer-events: none;
	z-index: 200;
	box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.rmm-btn-locked:hover::after { display: block; }

.rmm-btn-outline { background: transparent; border-color: #2271b1; color: #2271b1; }
.rmm-btn-outline:hover { background: #eef5fb; }

.rmm-btn-ghost { background: transparent; border-color: transparent; color: #2271b1; }
.rmm-btn-ghost:hover { background: #eef5fb; border-color: #2271b1; }

.rmm-btn-sm { padding: 5px 11px; font-size: 12px; }

.rmm-btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 3px;
	background: transparent;
	color: #888;
	cursor: pointer;
	font-size: 13px;
	line-height: 1;
	flex-shrink: 0;
}
.rmm-btn-icon:hover { background: #fdf0f0; color: #c0392b; border-color: #e8b8b8; }

/* ── Form controls ─────────────────────────────────────────────────────── */
.rmm-input, .rmm-select {
	display: block;
	width: 100%;
	padding: 7px 10px;
	border: 1px solid #d0d0d0;
	border-radius: 4px;
	font-size: 13px;
	color: #333;
	background: #fff;
	transition: border-color 0.15s, box-shadow 0.15s;
	line-height: 1.4;
}
.rmm-input:focus, .rmm-select:focus {
	outline: none;
	border-color: #4a90e2;
	box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.15);
}
.rmm-input-full { width: 100%; }

.rmm-field-group {
	margin-bottom: 14px;
}
.rmm-field-group label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: #555;
	margin-bottom: 5px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.rmm-divider {
	border: none;
	border-top: 1px solid #ebebeb;
	margin: 18px 0;
}

/* ── Color picker row ──────────────────────────────────────────────────── */
.rmm-color-row {
	display: flex;
	align-items: center;
	gap: 10px;
}
.rmm-color-input {
	-webkit-appearance: none;
	appearance: none;
	width: 40px;
	height: 40px;
	padding: 2px;
	border: 1px solid #d0d0d0;
	border-radius: 6px;
	cursor: pointer;
	background: none;
	flex-shrink: 0;
}
.rmm-color-input::-webkit-color-swatch-wrapper { padding: 0; border-radius: 4px; }
.rmm-color-input::-webkit-color-swatch         { border: none; border-radius: 4px; }
.rmm-color-input::-moz-color-swatch            { border: none; border-radius: 4px; }
.rmm-color-hex {
	font-family: 'Courier New', monospace;
	font-size: 12px;
	color: #555;
	letter-spacing: 0.04em;
}

/* ── Notice ────────────────────────────────────────────────────────────── */
.rmm-notice {
	padding: 12px 16px;
	background: #f0f8ff;
	border-left: 4px solid #4a90e2;
	border-radius: 0 4px 4px 0;
	color: #333;
}
.rmm-notice-error {
	background: #fdf0f0;
	border-left-color: #c0392b;
}
.rmm-notice-login {
	max-width: 480px;
	margin: 40px auto;
	text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════
   DASHBOARD
   ═══════════════════════════════════════════════════════════════════════ */
#rmm-dashboard {
	padding: 0 20px;
}

/* Sticky positioning is OFF by default. editor.js adds .rmm-sticky-on only when
   a card is open in the editor below (see initStickyDashboard) — so on the
   dashboard-only view the dashboard scrolls normally with no pinning. */
#rmm-dashboard.rmm-sticky-on {
	position: sticky;
	/* Sits below DLV Access Control's fixed top bar, if present — that plugin
	   exposes its own measured height as --dlv-ac-bar-height (0px, via the
	   fallback, when the bar isn't active/sticky), so we never hardcode it. */
	top: var(--dlv-ac-bar-height, 0px);
	z-index: 100;
	background: #fff;
}

/* Account for the WP admin bar height when it is showing (WP adds body.admin-bar),
   stacked on top of the DLV AC bar offset above — in practice DLV AC disables the
   native admin bar on the front end, so the two offsets shouldn't both be non-zero
   at once, but combining them is harmless either way.
   The JS IntersectionObserver mirrors these offsets so the pin flips at the stick point. */
.admin-bar #rmm-dashboard.rmm-sticky-on { top: calc( var(--dlv-ac-bar-height, 0px) + 32px ); }
@media screen and ( max-width: 782px ) {
	.admin-bar #rmm-dashboard.rmm-sticky-on { top: calc( var(--dlv-ac-bar-height, 0px) + 46px ); }
}

/* 1px sentinel sitting just above the dashboard; never visible. */
.rmm-dash-sentinel { height: 1px; }

.rmm-dashboard-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}
.rmm-dashboard-title {
	font-size: 20px;
	font-weight: 600;
	margin: 0;
}

.rmm-create-form {
	margin-bottom: 20px;
}
.rmm-create-form-inner {
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 16px;
	background: #f9f9f9;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
}
.rmm-create-form-inner .rmm-input { width: 240px; flex-shrink: 0; }
.rmm-create-form-inner .rmm-select { width: 180px; flex-shrink: 0; }

.rmm-cards-table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	overflow: hidden;
}
.rmm-cards-table th {
	text-align: left;
	padding: 10px 14px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #666;
	background: #f7f7f7;
	border-bottom: 1px solid #e0e0e0;
}
.rmm-cards-table td {
	padding: 12px 14px;
	border-bottom: 1px solid #f0f0f0;
	vertical-align: middle;
}
.rmm-cards-table tr:last-child td { border-bottom: none; }
.rmm-cards-table tr:hover td { background: #fafafa; }

.rmm-cards-table tr.rmm-row-active td {
	background: #eef5fb;
}
.rmm-cards-table tr.rmm-row-active td:first-child {
	border-left: 3px solid #2271b1;
	padding-left: 11px;
}
.rmm-cards-table tr.rmm-row-active:hover td {
	background: #e5f0f9;
}

.rmm-actions { display: flex; gap: 6px; align-items: center; }

/* ════════════════════════════════════════════════════════════════════════
   PINNED DASHBOARD
   Toggled by editor.js adding .is-pinned once the sentinel leaves the viewport.
   Collapses the full table into a compact, horizontally-scrollable strip of
   card names with a hover/focus-revealed Editar button. Pure CSS — the DOM is
   unchanged, so all AJAX row actions stay bound.
   ════════════════════════════════════════════════════════════════════════ */
#rmm-dashboard.is-pinned {
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.12 );
	border-bottom: 1px solid #e0e0e0;
	padding-top: 8px;
	padding-bottom: 8px;
}

/* The header bar (title + "New" button) MUST stay visible in BOTH states — it
   is never part of any hide rule here. display:flex is restated with !important
   so it can't be knocked out by a stale/older stylesheet still on the page or a
   theme override. Only the create-form, thead, and secondary columns collapse. */
#rmm-dashboard.is-pinned .rmm-dashboard-header {
	display: flex !important;
	margin-bottom: 8px;
}
#rmm-dashboard.is-pinned .rmm-create-form { display: none !important; }

/* Hide column headers. */
#rmm-dashboard.is-pinned .rmm-cards-table thead { display: none; }

/* Table → single horizontal scroll strip. */
#rmm-dashboard.is-pinned .rmm-cards-table,
#rmm-dashboard.is-pinned .rmm-cards-table tbody { display: block; }
#rmm-dashboard.is-pinned .rmm-cards-table tbody {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
}

/* Each row → a compact chip with a vertical divider between them. */
#rmm-dashboard.is-pinned .rmm-cards-table tr {
	display: flex;
	align-items: center;
	position: relative;
	flex: 0 0 auto;
	padding: 4px 16px;
	border: 0;
	border-right: 1px solid #e0e0e0;
	white-space: nowrap;
}
#rmm-dashboard.is-pinned .rmm-cards-table tr:hover td { background: transparent; }

/* Show only the name cell; hide Tipo + Creado. */
#rmm-dashboard.is-pinned .rmm-cards-table td { display: none; border: 0; padding: 0; }
#rmm-dashboard.is-pinned .rmm-cards-table td:first-child { display: block; }

/* Editar revealed in the row corner on hover / focus-within (touch + keyboard). */
#rmm-dashboard.is-pinned .rmm-cards-table td.rmm-actions {
	display: block;
	position: absolute;
	top: -2px;
	right: 2px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.12s ease;
}
#rmm-dashboard.is-pinned .rmm-cards-table tr:hover td.rmm-actions,
#rmm-dashboard.is-pinned .rmm-cards-table tr:focus-within td.rmm-actions {
	opacity: 1;
	pointer-events: auto;
}
/* Within the actions cell, only Editar shows while pinned. */
#rmm-dashboard.is-pinned .rmm-cards-table td.rmm-actions > *:not( .rmm-action-edit ) { display: none; }
#rmm-dashboard.is-pinned .rmm-cards-table td.rmm-actions .rmm-action-edit { display: inline-block; }

.rmm-type-badge {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.rmm-type-food    { background: #fef3e2; color: #8B4513; }
.rmm-type-drinks  { background: #eaf0fb; color: #2C3E6B; }
.rmm-type-noon    { background: #eafbf0; color: #1a6b3c; }
.rmm-type-evening { background: #f5eafb; color: #5B2E7C; }

.rmm-no-cards {
	padding: 40px;
	text-align: center;
	color: #999;
	background: #fafafa;
	border: 2px dashed #e0e0e0;
	border-radius: 6px;
}

/* ═══════════════════════════════════════════════════════════════════════
   EDITOR LAYOUT
   ═══════════════════════════════════════════════════════════════════════ */
.rmm-editor-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 16px;
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 4px 4px 0 0;
	margin-bottom: 0;
	gap: 12px;
	/* Stays visible while scrolling through a long card. --rmm-toolbar-top is
	   set by editor.js (initStickyToolbar) to clear whatever is stacked above
	   it: DLV AC's bar, the WP admin bar, and #rmm-dashboard's own sticky
	   header, full-size or pinned-compact. z-index sits below the dashboard's
	   (100) and DLV AC's (99999) so that stacking order holds if they ever
	   briefly overlap during a resize/reflow. */
	position: sticky;
	top: var(--rmm-toolbar-top, 0px);
	z-index: 90;
}
.rmm-toolbar-left, .rmm-toolbar-right {
	display: flex;
	align-items: center;
	gap: 10px;
}
.rmm-back-link {
	font-size: 13px;
	color: #2271b1;
	text-decoration: none;
}
.rmm-back-link:hover { text-decoration: underline; }

#rmm-save-status {
	font-size: 13px;
	min-width: 60px;
}
.rmm-status-ok  { color: #2e7d32; font-weight: 600; }
.rmm-status-err { color: #c0392b; font-weight: 600; }

.rmm-editor-body {
	display: flex;
	gap: 0;
	align-items: flex-start;
	border: 1px solid #e0e0e0;
	border-top: none;
	border-radius: 0 0 4px 4px;
	background: #f9f9f9;
}

/* Form panel */
#rmm-form-panel {
	flex: 0 0 360px;
	min-width: 300px;
	background: #fff;
	border-right: 1px solid #e0e0e0;
	padding: 20px;
}

.rmm-sections-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}
.rmm-sections-header strong { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: #555; }

/* Section blocks */
.rmm-section-block {
	background: #fafafa;
	border: 1px solid #e8e8e8;
	border-radius: 4px;
	margin-bottom: 10px;
	padding: 10px 12px;
}
.rmm-section-block-header {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 8px;
}
.rmm-section-block-header .rmm-input { flex: 1; }
.rmm-drag-handle {
	color: #bbb;
	cursor: grab;
	font-size: 14px;
	user-select: none;
	flex-shrink: 0;
}

/* Item rows */
.rmm-items-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.rmm-item-row {
	display: grid;
	grid-template-columns: 1fr 1fr 80px 26px;
	gap: 5px;
	/* Top-aligned rather than centered: keeps name/price/remove pinned to the
	   top edge when the description textarea grows taller on focus, instead
	   of drifting to the vertical middle of the (now-tall) row. */
	align-items: start;
}
.rmm-item-row .rmm-input { font-size: 12px; padding: 5px 8px; }
.rmm-item-price { text-align: right; }

/* Description field: a <textarea> (see autoGrowDesc in editor.js), styled to
   sit flush with the row at a single line by default and grow in place while
   focused/typing, instead of cramming a long description into one scrolling
   line. Tag-qualified selector (not plain .rmm-item-desc) so this never
   touches the read-only A4-preview description paragraph, which reuses the
   same class name in a completely different context. */
textarea.rmm-item-desc {
	resize: none;
	overflow: hidden;
	font-family: inherit;
	white-space: pre-wrap;
	transition: height 0.15s ease, border-color 0.15s, box-shadow 0.15s;
}
textarea.rmm-item-desc:focus {
	overflow-y: auto; /* in case content exceeds the auto-grow cap */
	position: relative;
	z-index: 2; /* sit above the row below it while expanded */
}

.rmm-add-item { margin-top: 4px; font-size: 12px; }

/* ── Per-item translation tabs ─────────────────────────────────────────── */
.rmm-item-langs {
	grid-column: 1 / -1;   /* span the full item-row grid */
	margin-top: 2px;
}
.rmm-item-lang-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}
.rmm-lang-tab {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 2px 7px;
	font-size: 11px;
	line-height: 1.6;
	cursor: pointer;
	background: #f5f5f5;
	border: 1px solid #d0d0d0;
	border-radius: 3px;
	color: #555;
}
.rmm-lang-tab:hover { background: #ebebeb; }
.rmm-lang-tab--open { border-color: #2271b1; color: #2271b1; background: #eef5fb; }
.rmm-lang-tab-code { font-weight: 600; letter-spacing: 0.02em; }
.rmm-lang-tab-flag { font-size: 10px; }

/* State cues: empty = muted, auto = needs review (✏️), verified = confirmed (✓). */
.rmm-lang-tab--empty { opacity: 0.55; }
.rmm-lang-tab--auto { border-color: #d9a441; color: #8a6100; background: #fdf6e9; }
.rmm-lang-tab--verified { border-color: #3a9d5d; color: #1f7a41; background: #eef8f1; }
.rmm-lang-tab--verified .rmm-lang-tab-flag { color: #1f7a41; }

.rmm-item-lang-editor {
	margin-top: 6px;
	padding: 8px;
	background: #fafafa;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
}
.rmm-lang-editor-title {
	font-size: 11px;
	font-weight: 600;
	color: #777;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 6px;
}
.rmm-tr-label {
	display: block;
	font-size: 11px;
	color: #666;
	margin-bottom: 6px;
}
.rmm-tr-label:last-child { margin-bottom: 0; }
.rmm-tr-input { width: 100%; margin-top: 2px; font-size: 12px; padding: 5px 8px; }

/* Preview panel */
#rmm-preview-panel {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px;
	min-width: 0;
}

#rmm-preview-bar {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 6px 12px;
	background: #f0f0f0;
	border: 1px solid #ddd;
	border-bottom: none;
	border-radius: 4px 4px 0 0;
	font-size: 12px;
}
.rmm-preview-label { color: #999; font-size: 11px; letter-spacing: 0.05em; }
.rmm-overflow-warning {
	color: #c0392b;
	font-weight: 700;
	font-size: 12px;
	animation: rmm-pulse 1.5s ease-in-out infinite;
}
@keyframes rmm-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.6; }
}

/* A4 wrapper — clips the scaled card. Width and height are set by scalePreview() in JS. */
#rmm-a4-wrapper {
	width: 100%;
	overflow: hidden;
	border: 1px solid #ccc;
	border-radius: 0 0 4px 4px;
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
	background: #e8e8e8;
}

/* The actual A4 card — always 794×1123 px internally; scale() is applied by JS. */
#rmm-a4-preview {
	width: 794px;
	min-height: 1123px;
	transform-origin: top left;
	background: #fff;
}
#rmm-a4-preview.rmm-overflow {
	outline: 3px solid #c0392b;
}

/* ═══════════════════════════════════════════════════════════════════════
   CARD LAYOUT (shared between preview, print page, and PHP template)
   ═══════════════════════════════════════════════════════════════════════ */

/* CSS custom properties per card type */
.rmm-card-food    { --rmm-accent: #8B4513; --rmm-accent-light: #fef3e2; }
.rmm-card-drinks  { --rmm-accent: #2C3E6B; --rmm-accent-light: #eaf0fb; }
.rmm-card-noon    { --rmm-accent: #1a6b3c; --rmm-accent-light: #eafbf0; }
.rmm-card-evening { --rmm-accent: #5B2E7C; --rmm-accent-light: #f5eafb; }

.rmm-card {
	width: 794px;
	min-height: 1123px;
	background: #fff;
	color: #1a1a1a;
	font-family: 'Georgia', 'Times New Roman', Times, serif;
	padding: 64px 72px 52px;
	position: relative;
	display: flex;
	flex-direction: column;
}

/* Header */
.rmm-card-header {
	text-align: center;
	margin-bottom: 36px;
}
.rmm-card-logo {
	display: block;
	max-height: 80px;
	max-width: 200px;
	object-fit: contain;
	margin: 0 auto 12px;
}
.rmm-restaurant-name {
	font-size: 10px;
	letter-spacing: 0.35em;
	text-transform: uppercase;
	color: var(--rmm-accent, #8B4513);
	margin-bottom: 10px;
}
.rmm-card-title {
	font-size: 30px;
	font-weight: 400;
	letter-spacing: 0.04em;
	margin: 0 0 6px;
	line-height: 1.2;
}
.rmm-card-type-label {
	font-size: 9px;
	letter-spacing: 0.35em;
	text-transform: uppercase;
	color: #999;
	margin-bottom: 10px;
}
.rmm-card-subtitle {
	font-size: 13px;
	font-style: italic;
	color: #777;
	margin: 8px 0 0;
}
.rmm-header-rule {
	text-align: center;
	margin-top: 18px;
}
.rmm-header-rule span {
	display: inline-block;
	position: relative;
	width: 80px;
	height: 1px;
	background: var(--rmm-accent, #8B4513);
}
.rmm-header-rule span::before,
.rmm-header-rule span::after {
	content: '';
	position: absolute;
	top: -3px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--rmm-accent, #8B4513);
}
.rmm-header-rule span::before { left: -8px; }
.rmm-header-rule span::after  { right: -8px; }

/* ── Fixed-menu: title + price side-by-side ── */
.rmm-title-price-row {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
}
.rmm-card-fixed-price {
	font-size: 18px;
	font-weight: 600;
	color: var(--rmm-accent, #8B4513);
	white-space: nowrap;
}

/* ── Fixed-menu: item rows with tab-spaced 'o' marker ── */
.rmm-item-fixed-row {
	white-space: pre-wrap;   /* preserves \t characters as tab stops */
	tab-size: 8;             /* each tab = 8 character widths        */
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
}

/* Card body */
.rmm-card-body { flex: 1; }

/* Sections */
.rmm-section { margin-bottom: 28px; }
.rmm-section-title {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--rmm-accent, #8B4513);
	border-bottom: 1px solid var(--rmm-accent, #8B4513);
	padding-bottom: 5px;
	margin: 0 0 14px;
}

/* Items */
.rmm-items { display: flex; flex-direction: column; gap: 10px; }
.rmm-item {}
.rmm-item-top {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
}
.rmm-item-name {
	font-size: 14px;
	font-weight: 700;
	flex: 1;
	/* dotted leader line effect */
	background-image: radial-gradient(circle, #ccc 1px, transparent 1px);
	background-size: 5px 1px;
	background-repeat: repeat-x;
	background-position: bottom 4px left;
	padding-bottom: 2px;
}
.rmm-item-price {
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--rmm-accent, #8B4513);
	background: #fff; /* sits on top of the dotted leader */
	padding-left: 6px;
}
.rmm-item-desc {
	font-size: 11.5px;
	color: #777;
	font-style: italic;
	margin: 3px 0 0;
	line-height: 1.4;
}

/* Footer */
.rmm-card-footer { padding-top: 36px; margin-top: auto; }
.rmm-footer-rule { text-align: center; }
.rmm-footer-rule span {
	display: inline-block;
	position: relative;
	width: 80px;
	height: 1px;
	background: var(--rmm-accent, #8B4513);
}
.rmm-footer-rule span::before,
.rmm-footer-rule span::after {
	content: '';
	position: absolute;
	top: -3px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--rmm-accent, #8B4513);
}
.rmm-footer-rule span::before { left: -8px; }
.rmm-footer-rule span::after  { right: -8px; }

/* ═══════════════════════════════════════════════════════════════════════
   PRINT PAGE (screen view)
   ═══════════════════════════════════════════════════════════════════════ */
.rmm-print-body {
	background: #e0e0e0;
	margin: 0;
	padding: 0;
}
.rmm-print-controls {
	position: fixed;
	top: 20px;
	right: 20px;
	display: flex;
	gap: 10px;
	z-index: 100;
	background: rgba(255,255,255,0.95);
	padding: 10px;
	border-radius: 6px;
	box-shadow: 0 2px 12px rgba(0,0,0,0.2);
}
.rmm-print-page {
	max-width: 794px;
	margin: 60px auto 60px;
	background: #fff;
	box-shadow: 0 4px 24px rgba(0,0,0,0.22);
}
.rmm-print-page .rmm-card {
	/* on screen the card fills its natural A4 size */
}

/* ═══════════════════════════════════════════════════════════════════════
   TRANSLATION CONTROLS & FIELD STATES
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Language picker (custom checkbox dropdown) ── */
.rmm-lang-picker {
	position: relative;
	display: inline-block;
}

#rmm-lang-picker-btn {
	white-space: nowrap;
	min-width: 160px;
	padding: 0.5rem 1rem;
	justify-content: space-between;
}

.rmm-lang-panel {
	position: absolute;
	top: calc( 100% + 5px );
	right: 0;
	z-index: 999;
	background: #fff;
	border: 1px solid #d0d0d0;
	border-radius: 6px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.14);
	padding: 8px 0;
	min-width: 160px;
}

.rmm-lang-option {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	cursor: pointer;
	font-size: 13px;
	color: #333;
	transition: background 0.1s;
	user-select: none;
}
.rmm-lang-option:hover { background: #f5f5f5; }
.rmm-lang-option input[type="checkbox"] {
	width: 14px;
	height: 14px;
	cursor: pointer;
	accent-color: #2271b1;
	flex-shrink: 0;
}

/* ── Field busy — shimmer while API call is in flight ── */
.rmm-translating {
	background-image: linear-gradient(90deg, #eef5fb 25%, #d0e8f7 50%, #eef5fb 75%);
	background-size: 200% 100%;
	animation: rmm-shimmer 1s infinite linear;
	color: #888;
	border-color: #4a90e2 !important;
}
@keyframes rmm-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* ── Success / error flash ── */
.rmm-field-ok  { border-color: #2e7d32 !important; background: #f0fbf3 !important; }
.rmm-field-err { border-color: #c0392b !important; background: #fdf0f0 !important; }

/* ── Toolbar error message ── */
.rmm-translate-error {
	font-size: 12px;
	color: #c0392b;
	max-width: 220px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ── Translated sub-lines on the card (preview + print) ──
   Each target language is grouped together (title + description) and sits
   flush left, in line with the master content — no tab indent. The language
   code is only shown once per group, on the title line, and lives in a
   hanging-indent gutter to the LEFT of that shared left edge rather than
   pushing the translated title inward: the badge is given a fixed width
   equal to the gutter, then pulled back by that same amount with a negative
   margin, so the text right after it lands exactly on the same left edge as
   the master title/description and the translated description below it.
   The card's own padding (72px screen / 22mm print) comfortably contains
   the gutter, so this never runs off the page. */
.rmm-item-translation-group {
	margin-top: 5px;
}
.rmm-item-translation {
	display: flex;
	align-items: baseline;
}
.rmm-item-translation-lang {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 8px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--rmm-accent, #8B4513);
	opacity: 0.7;
	flex-shrink: 0;
	box-sizing: border-box;
	width: 26px;
	margin-left: -26px;
	padding-right: 7px;
	text-align: left;
}
.rmm-item-translation-text {
	font-size: 12px;
	font-style: italic;
	color: #555;
	line-height: 1.35;
}
.rmm-item-translation-desc {
	font-size: 10.5px;
	font-style: italic;
	color: #888;
	line-height: 1.4;
	margin: 2px 0 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   CONFIRM DIALOG
   ═══════════════════════════════════════════════════════════════════════ */
.rmm-confirm-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(0, 0, 0, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
}
.rmm-confirm-hidden {
	display: none;
}
.rmm-confirm-box {
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
	padding: 28px 28px 22px;
	min-width: 300px;
	max-width: 420px;
	width: 90%;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
}
.rmm-confirm-message {
	font-size: 14px;
	color: #333;
	line-height: 1.5;
	margin: 0 0 22px;
}
.rmm-confirm-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
}

/* ═══════════════════════════════════════════════════════════════════════
   ADMIN — Categories manager
   ═══════════════════════════════════════════════════════════════════════ */

.rmm-admin {
	padding: 0 20px;
}

.rmm-admin .rmm-admin-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}
.rmm-admin-title {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
}

/* ── Global settings ── */
.rmm-admin-settings {
	margin-bottom: 20px;
}
.rmm-admin-settings-title {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 600;
}
.rmm-setting-row {
	display: flex;
	align-items: center;
	gap: 10px;
}
.rmm-setting-row .rmm-input {
	flex: 1 1 260px;
	max-width: 400px;
}
.rmm-logo-field {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.rmm-logo-preview {
	max-height: 80px;
	max-width: 220px;
	object-fit: contain;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	padding: 4px;
	background: #fafafa;
}
.rmm-logo-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

/* ── Inline form ── */
.rmm-cat-form {
	background: #f9f9f9;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	padding: 16px;
	margin-bottom: 20px;
}
.rmm-cat-form-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 14px;
}
.rmm-cat-form-fields .rmm-field-group {
	flex: 1 1 180px;
}
.rmm-field-group-inline {
	display: flex;
	align-items: flex-end;
}
.rmm-field-group-inline label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	cursor: pointer;
}
.rmm-cat-form-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}
.rmm-cat-status {
	font-size: 13px;
}

/* ── Categories table ── */
.rmm-cat-table .rmm-col-drag {
	width: 32px;
	text-align: center;
}
.rmm-drag-handle {
	cursor: grab;
	color: #aaa;
	font-size: 16px;
	line-height: 1;
}
.rmm-drag-handle:active { cursor: grabbing; }

.rmm-color-swatch {
	display: inline-block;
	width: 20px;
	height: 20px;
	border-radius: 3px;
	border: 1px solid #d0d0d0;
	vertical-align: middle;
}

.rmm-active-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 10px;
	font-size: 12px;
	font-weight: 600;
}
.rmm-active-yes { background: #e8f5e9; color: #2e7d32; }
.rmm-active-no  { background: #fce4e4; color: #c0392b; }

.rmm-sort-placeholder {
	background: #eef5fb;
	border: 1px dashed #4a90e2;
	height: 44px;
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
	.rmm-editor-body { flex-direction: column; }
	#rmm-form-panel  { flex: 1 1 auto; border-right: none; border-bottom: 1px solid #e0e0e0; }
	#rmm-preview-panel { width: 100%; }
	#rmm-a4-wrapper, #rmm-preview-bar { width: 100%; }
}
@media (max-width: 560px) {
	.rmm-create-form-inner { flex-direction: column; align-items: stretch; }
	.rmm-create-form-inner .rmm-input,
	.rmm-create-form-inner .rmm-select { width: 100%; }
	.rmm-item-row { grid-template-columns: 1fr 26px; }
	.rmm-item-row .rmm-item-desc,
	.rmm-item-row .rmm-item-price { display: none; }
}