/**
 * MyGasztro Global Design Layer
 *
 * Ez a fajl tartalmazza a globalis design valtozokat es kozos komponenseket.
 * STABIL KAPASZKODOK - ezek az osztalyok hosszu tavon is megmaradnak.
 *
 * @package MyGasztro
 * @since 2.2.0
 * @layer design
 */

/* ==========================================================================
   CSS VALTOZOK (Design Tokens)

   Ezek az alapertelmezett ertekek. A tema felulirhatja oket.
   ========================================================================== */

:root {
	/* Szinek */
	--myg-primary-color: #ff8630;
	--myg-primary-hover: #e67722;
	--myg-primary-light: #fff3e0;
	--myg-primary-rgb: 255, 134, 48;

	--myg-success-color: #4caf50;
	--myg-success-light: #e8f5e9;
	--myg-warning-color: #ff9800;
	--myg-warning-light: #fff3e0;
	--myg-danger-color: #dc3545;
	--myg-danger-light: #ffebee;
	--myg-info-color: #2271b1;
	--myg-info-light: #e8f4f8;

	/* Szovegek */
	--myg-text-color: #333333;
	--myg-text-muted: #666666;
	--myg-text-light: #999999;

	/* Hatterek */
	--myg-bg-color: #ffffff;
	--myg-bg-muted: #f8f9fa;
	--myg-bg-alt: #f5f5f5;

	/* Keretek */
	--myg-border-color: #dddddd;
	--myg-border-light: #e9ecef;
	--myg-border-radius: 8px;
	--myg-border-radius-sm: 4px;
	--myg-border-radius-lg: 12px;
	--myg-border-radius-xl: 16px;

	/* Arnyekok */
	--myg-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	--myg-box-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
	--myg-box-shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.15);
	--myg-box-shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.2);

	/* Tipografia */
	--myg-font-family: 'Poppins', 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
	--myg-font-size-xs: 11px;
	--myg-font-size-sm: 13px;
	--myg-font-size-base: 14px;
	--myg-font-size-md: 16px;
	--myg-font-size-lg: 18px;
	--myg-font-size-xl: 24px;
	--myg-font-size-2xl: 32px;
	--myg-line-height: 1.6;

	/* Terkoz */
	--myg-spacing-xs: 4px;
	--myg-spacing-sm: 8px;
	--myg-spacing-md: 15px;
	--myg-spacing-lg: 20px;
	--myg-spacing-xl: 30px;
	--myg-spacing-2xl: 40px;

	/* Layout */
	--myg-max-width: 1200px;
	--myg-max-width-narrow: 600px;
	--myg-max-width-wide: 1400px;

	/* Animaciok */
	--myg-transition-fast: 0.15s ease;
	--myg-transition-normal: 0.2s ease;
	--myg-transition-slow: 0.3s ease;

	/* Z-index retegek */
	--myg-z-dropdown: 100;
	--myg-z-sticky: 500;
	--myg-z-modal: 10000;
	--myg-z-toast: 10001;

	/* Ikonok */
	--myg-icon-trash: '🗑️';
	--myg-icon-clipboard: '📋';
	--myg-icon-cart: '🛒';
	--myg-icon-edit: '✏️';
	--myg-icon-close: '✕';
	--myg-icon-chart: '📊';
	--myg-icon-plate: '🍽️';
	--myg-icon-success: '✅';
	--myg-icon-error: '❌';
	--myg-icon-warning: '⚠️';
	--myg-icon-info: 'ℹ️';
	--myg-icon-copy: '📎';
	--myg-icon-save-template: '📋';
	--myg-icon-clock: '🕐';
	--myg-icon-planned: '📋';
	--myg-icon-mic: '🎤';
	--myg-icon-stats: '📈';
	--myg-icon-lightning: '⚡';
	--myg-icon-hourglass: '⏳';
}

/* ==========================================================================
   IKON RENDSZER (STABLE)

   CSS-bol felulirhatoa ikonok. Tema fejlesztok a :root-ban felulirhatjak
   a --myg-icon-* valtozokat, vagy akar SVG data URI-t is hasznalhatnak.
   :where() = 0 specificitás, barmilyen ugyfel CSS felulirja.

   Stabil kapaszkodok: .myg-icon, .myg-icon--{name}
   ========================================================================== */

:where(.myg-icon) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-style: normal;
	line-height: 1;
	vertical-align: middle;
	flex-shrink: 0;
}
:where(.myg-icon)::before {
	content: '';
}
:where(.myg-icon--trash)::before { content: var(--myg-icon-trash); }
:where(.myg-icon--clipboard)::before { content: var(--myg-icon-clipboard); }
:where(.myg-icon--cart)::before { content: var(--myg-icon-cart); }
:where(.myg-icon--edit)::before { content: var(--myg-icon-edit); }
:where(.myg-icon--close)::before { content: var(--myg-icon-close); }
:where(.myg-icon--chart)::before { content: var(--myg-icon-chart); }
:where(.myg-icon--plate)::before { content: var(--myg-icon-plate); }
:where(.myg-icon--success)::before { content: var(--myg-icon-success); }
:where(.myg-icon--error)::before { content: var(--myg-icon-error); }
:where(.myg-icon--warning)::before { content: var(--myg-icon-warning); }
:where(.myg-icon--info)::before { content: var(--myg-icon-info); }
:where(.myg-icon--copy)::before { content: var(--myg-icon-copy); }
:where(.myg-icon--save-template)::before { content: var(--myg-icon-save-template); }
:where(.myg-icon--clock)::before { content: var(--myg-icon-clock); }
:where(.myg-icon--planned)::before { content: var(--myg-icon-planned); }
:where(.myg-icon--mic)::before { content: var(--myg-icon-mic); }
:where(.myg-icon--stats)::before { content: var(--myg-icon-stats); }
:where(.myg-icon--lightning)::before { content: var(--myg-icon-lightning); }
:where(.myg-icon--hourglass)::before { content: var(--myg-icon-hourglass); }

/* Ikon meretek */
:where(.myg-icon--lg) { font-size: 1.5em; }
:where(.myg-icon--xl) { font-size: 2em; }
:where(.myg-icon--2xl) { font-size: 3em; }

/* ==========================================================================
   UTILITY OSZTALYOK
   ========================================================================== */

/* Screen reader only - vizualisan rejtett, de kepernyo-olvasoval elerheto */
.sr-only,
.myg-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Vizualis rejtett, de helyet foglal */
.myg-visually-hidden {
	visibility: hidden;
}

/* ==========================================================================
   KOZOS GOMBOK (STABLE)

   Stabil kapaszkodok: .myg-btn, .myg-btn-primary, .myg-btn-secondary, stb.
   ========================================================================== */

.myg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px 24px;
	border: none;
	border-radius: var(--myg-border-radius);
	cursor: pointer;
	font-weight: 600;
	font-family: inherit;
	font-size: var(--myg-font-size-base);
	line-height: 1.4;
	text-decoration: none;
	transition: background var(--myg-transition-normal),
	            transform var(--myg-transition-fast),
	            box-shadow var(--myg-transition-normal);
}

.myg-btn:focus {
	outline: 2px solid var(--myg-primary-color);
	outline-offset: 2px;
}

.myg-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Primary gomb */
.myg-btn-primary,
.myg-btn--primary {
	background: var(--myg-primary-color);
	color: white;
}

.myg-btn-primary:hover,
.myg-btn--primary:hover {
	background: var(--myg-primary-hover);
}

/* Secondary gomb */
.myg-btn-secondary,
.myg-btn--secondary {
	background: var(--myg-bg-alt);
	color: var(--myg-text-color);
	border: 1px solid var(--myg-border-color);
}

.myg-btn-secondary:hover,
.myg-btn--secondary:hover {
	background: #e8e8e8;
}

/* Featured gomb (kiemelt) */
.myg-btn-featured,
.myg-btn--featured {
	background: linear-gradient(135deg, #ff8630, #ff6b1a);
	color: white;
	font-size: var(--myg-font-size-md);
}

.myg-btn-featured:hover,
.myg-btn--featured:hover {
	background: linear-gradient(135deg, #e67722, #e65a10);
}

/* Danger gomb */
.myg-btn-danger,
.myg-btn--danger {
	background: var(--myg-danger-color);
	color: white;
}

.myg-btn-danger:hover,
.myg-btn--danger:hover {
	background: #c82333;
}

/* Text gomb (hatter nelkul) */
.myg-btn--text {
	background: transparent;
	color: var(--myg-text-color);
	padding: 8px 12px;
}

.myg-btn--text:hover {
	background: var(--myg-bg-alt);
}

/* Gomb meretek */
.myg-btn--small {
	padding: 6px 12px;
	font-size: var(--myg-font-size-sm);
}

.myg-btn--large {
	padding: 14px 28px;
	font-size: var(--myg-font-size-md);
}

/* ==========================================================================
   KOZOS INPUT MEZOK (STABLE)

   Stabil kapaszkodok: .myg-input, .myg-select, .myg-textarea
   ========================================================================== */

.myg-input,
.myg-select,
.myg-textarea {
	padding: 10px 15px;
	border: 1px solid var(--myg-border-color);
	border-radius: var(--myg-border-radius);
	font-size: var(--myg-font-size-base);
	font-family: inherit;
	width: 100%;
	box-sizing: border-box;
	background-color: var(--myg-bg-color);
	color: var(--myg-text-color);
	transition: border-color var(--myg-transition-normal),
	            box-shadow var(--myg-transition-normal);
}

.myg-input:focus,
.myg-select:focus,
.myg-textarea:focus {
	outline: none;
	border-color: var(--myg-primary-color);
	box-shadow: 0 0 0 3px rgba(var(--myg-primary-rgb), 0.1);
}

.myg-input::placeholder,
.myg-textarea::placeholder {
	color: var(--myg-text-light);
}

.myg-textarea {
	min-height: 80px;
	resize: vertical;
	line-height: var(--myg-line-height);
}

/* Input meretek */
.myg-input--small {
	padding: 8px 12px;
	font-size: var(--myg-font-size-sm);
}

/* ==========================================================================
   FORM ELEMEK (STABLE)

   Stabil kapaszkodok: .myg-form-section, .myg-form-group, .myg-form-grid
   ========================================================================== */

.myg-form-section {
	margin-bottom: var(--myg-spacing-xl);
}

.myg-form-section h2 {
	color: var(--myg-text-color);
	margin-bottom: var(--myg-spacing-lg);
	padding-bottom: 10px;
	border-bottom: 2px solid var(--myg-primary-color);
}

/* Form grid - :where() wrapper = 0 specificitás, bármilyen ügyfél CSS felulirja */
:where(.myg-form-grid) {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--myg-spacing-lg);
}

.myg-form-group {
	display: flex;
	flex-direction: column;
}

.myg-form-group.myg-full-width {
	grid-column: 1 / -1;
}

.myg-form-group label {
	color: var(--myg-text-color);
	font-weight: 600;
	margin-bottom: var(--myg-spacing-sm);
	display: block;
}

.myg-form-help {
	display: block;
	font-size: var(--myg-font-size-xs);
	color: var(--myg-text-muted);
	margin-top: var(--myg-spacing-xs);
}

.myg-required {
	color: var(--myg-danger-color);
	font-weight: 600;
}

.myg-optional {
	color: var(--myg-text-muted);
	font-weight: 400;
	font-size: 0.9em;
}

/* ==========================================================================
   UZENETEK / TOAST NOTIFICATIONS (STABLE)

   Stabil kapaszkodok: .myg-message, .myg-message-success, stb.
   ========================================================================== */

.myg-message {
	position: fixed;
	top: 20px;
	right: 20px;
	padding: 15px 25px;
	border-radius: var(--myg-border-radius);
	z-index: var(--myg-z-toast);
	max-width: 400px;
	box-shadow: var(--myg-box-shadow-lg);
	animation: myg-slide-in 0.3s ease;
}

.myg-message-success {
	background: var(--myg-success-color);
	color: white;
}

.myg-message-error {
	background: var(--myg-danger-color);
	color: white;
}

.myg-message-warning {
	background: var(--myg-warning-color);
	color: white;
}

.myg-message-info {
	background: var(--myg-info-color);
	color: white;
}

@keyframes myg-slide-in {
	from {
		transform: translateX(100%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

/* Notification (also szelen) */
.myg-notification {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	background: #333;
	color: white;
	padding: 12px 24px;
	border-radius: var(--myg-border-radius);
	box-shadow: var(--myg-box-shadow-lg);
	z-index: var(--myg-z-toast);
	animation: myg-notification-in 0.3s ease;
}

@keyframes myg-notification-in {
	from {
		opacity: 0;
		transform: translateX(-50%) translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}
}

/* ==========================================================================
   MODAL / DIALOGUS ABLAK (STABLE)

   Stabil kapaszkodok: .myg-modal, .myg-modal-content, .myg-modal-close
   ========================================================================== */

.myg-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: var(--myg-z-modal);
	display: flex;
	align-items: center;
	justify-content: center;
}

.myg-modal-backdrop,
.myg-modal-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
}

.myg-modal-content {
	position: relative;
	background: var(--myg-bg-color);
	border-radius: var(--myg-border-radius-xl);
	padding: var(--myg-spacing-xl);
	max-width: 500px;
	width: 90%;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: var(--myg-box-shadow-lg);
	animation: myg-modal-slide-in 0.3s ease;
}

@keyframes myg-modal-slide-in {
	from {
		transform: translateY(-30px);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

.myg-modal-close {
	position: absolute;
	top: 15px;
	right: 15px;
	background: none;
	border: none;
	font-size: 28px;
	cursor: pointer;
	color: var(--myg-text-muted);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--myg-transition-normal);
}

.myg-modal-close:hover {
	background: var(--myg-bg-muted);
	color: var(--myg-text-color);
}

.myg-modal-title,
.myg-modal-content h2 {
	margin: 0 0 10px 0;
	color: var(--myg-text-color);
	font-size: 1.5em;
}

.myg-modal-description {
	color: var(--myg-text-muted);
	margin-bottom: 25px;
	font-size: var(--myg-font-size-base);
	line-height: var(--myg-line-height);
}

.myg-modal-body {
	margin-bottom: var(--myg-spacing-lg);
}

.myg-modal-body label {
	display: block;
	margin-bottom: var(--myg-spacing-sm);
	font-weight: 600;
	color: var(--myg-text-color);
}

.myg-modal-actions,
.myg-modal-footer {
	display: flex;
	gap: 15px;
	justify-content: flex-end;
	margin-top: 25px;
	padding-top: var(--myg-spacing-lg);
	border-top: 1px solid var(--myg-border-light);
}

.myg-modal-footer--stacked {
	flex-direction: column;
}

.myg-modal-footer--stacked .myg-btn {
	width: 100%;
}

/* Modal form elemek */
.myg-modal-form-group {
	margin-bottom: var(--myg-spacing-lg);
}

.myg-modal-form-group label {
	display: block;
	margin-bottom: var(--myg-spacing-sm);
	font-weight: 600;
	color: var(--myg-text-color);
}

.myg-modal-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--myg-spacing-md);
}

/* ==========================================================================
   LOADING ALLAPOTOK (STABLE)

   Stabil kapaszkodok: .myg-loading, .myg-spinner
   ========================================================================== */

.myg-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--myg-spacing-2xl);
	color: var(--myg-text-muted);
}

.myg-spinner {
	width: 40px;
	height: 40px;
	border: 3px solid var(--myg-bg-muted);
	border-top-color: var(--myg-primary-color);
	border-radius: 50%;
	animation: myg-spin 1s linear infinite;
}

@keyframes myg-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Alias a legacy inline JS kompatibilitashoz */
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* ==========================================================================
   URES ALLAPOT (STABLE)

   Stabil kapaszkodok: .myg-empty, .myg-empty-message
   ========================================================================== */

.myg-empty {
	text-align: center;
	padding: var(--myg-spacing-2xl) var(--myg-spacing-lg);
	color: var(--myg-text-muted);
}

.myg-empty-message {
	color: var(--myg-text-light);
	text-align: center;
	margin: 0;
	font-style: italic;
}

/* ==========================================================================
   RESPONSIVE ALAPOK
   ========================================================================== */

@media (max-width: 768px) {
	:root {
		--myg-spacing-lg: 15px;
		--myg-spacing-xl: 20px;
		--myg-spacing-2xl: 30px;
	}

	.myg-form-grid {
		grid-template-columns: 1fr;
	}

	.myg-modal-form-row {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   KERESESI KARTYA (myg-search-card) — SHARED COMPONENT
   Minden modul (naplo, etrendkeszito, receptfeltolto) hasznalja.
   ========================================================================== */

/* "Nem talalod?" CTA */
.myg-search-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	background: linear-gradient(135deg, #fff8f0 0%, var(--myg-primary-light) 100%);
	border-bottom: 1px solid #ffe0b2;
	cursor: pointer;
	text-decoration: none;
	transition: background var(--myg-transition-normal);
}

.myg-search-cta:hover {
	background: linear-gradient(135deg, var(--myg-primary-light) 0%, #ffe0b2 100%);
}

.myg-search-cta__text {
	color: #e65100;
	font-size: var(--myg-font-size-base);
	font-weight: 500;
}

.myg-search-cta__icon {
	width: 28px;
	height: 28px;
	object-fit: contain;
	flex-shrink: 0;
}

/* Keresesi eredmeny kartya */
.myg-search-card {
	display: flex;
	align-items: center;
	padding: 12px 16px;
	border-bottom: 1px solid #f0f0f0;
	cursor: pointer;
	transition: background var(--myg-transition-normal);
	gap: 12px;
}

.myg-search-card:hover {
	background: var(--myg-bg-muted);
}

.myg-search-card--active {
	background: var(--myg-info-light);
	outline: 2px solid var(--myg-info-color);
	outline-offset: -2px;
}

.myg-search-card:last-child {
	border-bottom: none;
}

.myg-search-card__content {
	flex: 1;
	min-width: 0;
	cursor: pointer;
}

.myg-search-card__name {
	font-weight: 600;
	color: var(--myg-text-color);
	font-size: var(--myg-font-size-base);
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: 4px;
}

/* Brand sor */
.myg-search-card__brand {
	font-size: 0.8em;
	color: var(--myg-text-muted);
	margin-bottom: 2px;
}
.myg-search-card__brand:empty { display: none; }

.myg-search-card__quantity {
	font-size: var(--myg-font-size-xs);
	color: var(--myg-text-muted);
	margin-bottom: 4px;
}

.myg-search-card__macros {
	font-size: var(--myg-font-size-xs);
	color: var(--myg-text-light);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Correction ikon */
.myg-search-card__correction {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 14px;
	color: var(--myg-text-muted);
	border-radius: 50%;
	transition: all 0.2s;
}

.myg-search-card__correction:hover {
	background: var(--myg-primary-light);
	color: var(--myg-primary-color);
}

.myg-search-card__add {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform var(--myg-transition-normal);
}

.myg-search-card__add:hover {
	transform: scale(1.15);
}

.myg-search-card__add img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Nincs talalat */
.myg-search-empty {
	padding: var(--myg-spacing-lg) 16px;
	text-align: center;
	color: var(--myg-text-muted);
	font-size: var(--myg-font-size-base);
}

.myg-search-empty--error {
	color: var(--myg-danger-color);
}

@media (max-width: 480px) {
	.myg-search-card {
		padding: 10px 12px;
	}

	.myg-search-card__name {
		font-size: var(--myg-font-size-sm);
	}

	.myg-search-card__macros {
		font-size: var(--myg-font-size-xs);
	}

	.myg-search-card__add {
		width: 32px;
		height: 32px;
	}

	.myg-search-cta {
		padding: 10px 12px;
	}

	.myg-search-cta__text {
		font-size: var(--myg-font-size-sm);
	}

	.myg-search-cta__icon {
		width: 24px;
		height: 24px;
	}
}

/* ═══════════════════════════════════════════════════════
   Correction Modal (shared by diary, mealplan, recipe)
   ═══════════════════════════════════════════════════════ */

.myg-correction-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10002;
	display: flex;
	align-items: center;
	justify-content: center;
}

.myg-correction-modal__backdrop {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
}

.myg-correction-modal__content {
	position: relative;
	width: 90%;
	max-width: 400px;
	max-height: 85vh;
	overflow-y: auto;
	padding: 24px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.myg-correction-modal__title {
	font-size: 17px;
	font-weight: 600;
	margin: 0 0 4px;
}

.myg-correction-modal__subtitle {
	font-size: 13px;
	color: #888;
	margin: 0 0 16px;
}

.myg-correction-modal__original {
	background: #f8f8f8;
	border-radius: 6px;
	padding: 10px 12px;
	margin-bottom: 16px;
	font-size: 13px;
	color: #666;
}

.myg-correction-modal__original p {
	margin: 0 0 4px;
}

.myg-correction-modal__original p:last-child {
	margin-bottom: 0;
}

.myg-correction-modal__field {
	margin-bottom: 12px;
}

.myg-correction-modal__field label {
	display: block;
	font-size: 12px;
	color: #666;
	margin-bottom: 4px;
}

.myg-correction-modal__input,
.myg-correction-modal__textarea {
	width: 100%;
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 6px;
	font-size: 14px;
	box-sizing: border-box;
}

.myg-correction-modal__input:focus,
.myg-correction-modal__textarea:focus {
	outline: none;
	border-color: var(--myg-primary, #e67e22);
}

.myg-correction-modal__actions {
	display: flex;
	gap: 8px;
	margin-top: 16px;
}

.myg-correction-modal__btn {
	flex: 1;
	padding: 10px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	border: none;
}

.myg-correction-modal__btn--cancel {
	background: #f0f0f0;
	color: #666;
}

.myg-correction-modal__btn--submit {
	background: var(--myg-primary, #e67e22);
	color: #fff;
}

.myg-correction-modal__btn--submit:hover {
	background: #cf6d17;
}

.myg-correction-modal__btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.myg-correction-modal__section-divider {
	height: 1px;
	background: #e0e0e0;
	margin: 20px 0 16px;
}

.myg-correction-modal__section-label {
	font-size: 13px;
	font-weight: 600;
	color: #666;
	margin: 0 0 12px;
}

/* ==========================================================================
   TERMEK RESZLET DIALOG (myg-product-detail) — SHARED COMPONENT
   Nativ <dialog> elem, JS-bol renderelve (MygProductDetail modul).
   Mindket modul (naplo, receptfeltolto) hasznalja.
   ========================================================================== */

dialog.myg-product-detail {
	border: none;
	border-radius: var(--myg-border-radius-xl, 16px);
	padding: var(--myg-spacing-xl, 24px);
	max-width: 500px;
	width: calc(100% - 32px);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	background: var(--myg-bg-color, #fff);
	max-height: 85vh;
	max-height: 85dvh;
	overflow-y: auto;
}

dialog.myg-product-detail::backdrop {
	background: rgba(0, 0, 0, 0.5);
}

.myg-product-detail__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 4px;
}


.myg-product-detail__fav-btn {
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px;
	flex-shrink: 0;
	color: var(--myg-text-muted, #999);
	border-radius: var(--myg-border-radius-sm, 4px);
	transition: color 0.2s, transform 0.2s;
}

.myg-product-detail__heart-icon {
	display: block;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	transition: fill 0.2s, stroke 0.2s;
}

.myg-product-detail__fav-btn--active {
	color: #e53935;
}

.myg-product-detail__fav-btn--active .myg-product-detail__heart-icon {
	fill: #e53935;
	stroke: #e53935;
}

.myg-product-detail__fav-btn--pulse {
	animation: myg-heart-pulse 0.4s ease;
}

@keyframes myg-heart-pulse {
	0% { transform: scale(1); }
	50% { transform: scale(1.3); }
	100% { transform: scale(1); }
}

.myg-product-detail__fav-btn:focus-visible {
	outline: 2px solid var(--myg-primary-color);
	outline-offset: 2px;
}

.myg-product-detail__name {
	font-size: 20px;
	font-weight: 600;
	margin: 0;
	line-height: 1.3;
	color: var(--myg-text-color);
}

.myg-product-detail__brand {
	display: block;
	font-size: 13px;
	color: var(--myg-text-muted);
	margin-bottom: 12px;
}

.myg-product-detail__brand:empty {
	display: none;
}

.myg-product-detail__macros {
	font-size: 15px;
	font-weight: 500;
	color: #555;
	line-height: 1.5;
	margin-bottom: 24px;
}

.myg-product-detail__quantity {
	display: flex;
	gap: 12px;
	margin-bottom: 24px;
}

.myg-product-detail__quantity-field {
	flex: 1;
}

.myg-product-detail__unit-field {
	flex: 1;
}

.myg-product-detail__quantity-field label,
.myg-product-detail__unit-field label {
	display: block;
	font-size: 12px;
	color: var(--myg-text-muted);
	margin-bottom: 4px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.myg-product-detail__qty-input {
	width: 100%;
	padding: 12px;
	border: 1px solid var(--myg-border-color);
	border-radius: 8px;
	font-size: 16px;
	background: var(--myg-bg-color);
	box-sizing: border-box;
}

.myg-product-detail__qty-input:focus {
	outline: none;
	border-color: var(--myg-primary-color);
}

.myg-product-detail__unit-select {
	width: 100%;
	padding: 12px;
	border: 1px solid var(--myg-border-color);
	border-radius: 8px;
	font-size: 16px;
	background: var(--myg-bg-color);
	appearance: auto;
	box-sizing: border-box;
}

.myg-product-detail__unit-select:focus {
	outline: none;
	border-color: var(--myg-primary-color);
}

.myg-product-detail__correction {
	border-top: 1px solid var(--myg-border-light);
	padding-top: 16px;
	margin-bottom: 24px;
	text-align: center;
}

.myg-product-detail__correction-hint {
	font-size: 13px;
	color: var(--myg-text-muted);
	margin: 0 0 8px;
}

.myg-product-detail__correction-btn {
	background: transparent;
	border: 2px solid var(--myg-primary-color);
	color: var(--myg-primary-color);
	padding: 8px 24px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}

.myg-product-detail__correction-btn:hover {
	background: var(--myg-primary-color);
	color: #fff;
}

.myg-product-detail__correction-note {
	font-size: 11px;
	color: #aaa;
	margin: 8px 0 0;
}

.myg-product-detail__actions {
	display: flex;
	gap: 10px;
}

.myg-product-detail__add-btn {
	flex: 1;
	padding: 14px;
	background: var(--myg-primary-color, #ff8630);
	color: #fff;
	border: none;
	border-radius: 12px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	text-align: center;
	transition: background 0.2s;
}

.myg-product-detail__add-btn:hover {
	background: var(--myg-primary-hover, #e67722);
}

.myg-product-detail__add-btn:active {
	transform: scale(0.98);
}

.myg-product-detail__cancel-btn {
	padding: 14px 20px;
	background: var(--myg-bg-light, #f5f5f5);
	color: var(--myg-text-secondary, #666);
	border: 1px solid var(--myg-border-light, #ddd);
	border-radius: 12px;
	font-size: 16px;
	cursor: pointer;
	text-align: center;
	transition: background 0.2s;
}

.myg-product-detail__cancel-btn:hover {
	background: var(--myg-border-light, #ddd);
}

/* ==========================================================================
   MEGOSZTASI PANEL (STABLE) — SHARED COMPONENT
   Bevásárlólista, recept, étrendkészítő is használja.

   Stabil kapaszkodok: .myg-share-panel, .myg-share-link-row, .myg-share-btn
   ========================================================================== */

.myg-share-panel {
	background: var(--myg-info-light);
	padding: var(--myg-spacing-md);
	border-radius: var(--myg-border-radius);
	margin-bottom: var(--myg-spacing-lg);
}

.myg-share-link-row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.myg-share-label {
	font-weight: 600;
	color: var(--myg-text-color);
}

.myg-share-url-input {
	flex: 1;
	min-width: 200px;
	padding: 8px 12px;
	border: 1px solid #b8d4e3;
	border-radius: var(--myg-border-radius);
	background: var(--myg-bg-color);
	font-size: var(--myg-font-size-sm);
}

.myg-share-buttons {
	display: flex;
	align-items: center;
	gap: var(--myg-spacing-sm);
	flex-wrap: wrap;
	padding-top: 12px;
	border-top: 1px solid #b8d4e3;
}

.myg-share-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: 20px;
	font-size: var(--myg-font-size-sm);
	font-weight: 500;
	text-decoration: none;
	color: white;
	transition: transform var(--myg-transition-normal),
	            box-shadow var(--myg-transition-normal);
}

.myg-share-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	color: white;
}

.myg-share-btn svg {
	flex-shrink: 0;
}

.myg-share-btn--whatsapp {
	background: #25D366;
}

.myg-share-btn--messenger {
	background: #0084FF;
}

.myg-share-btn--viber {
	background: #7360F2;
}

.myg-share-btn--email {
	background: #666;
}

@media (max-width: 480px) {
	.myg-share-link-row {
		flex-direction: column;
		align-items: stretch;
	}

	.myg-share-url-input {
		min-width: 0;
		width: 100%;
	}
}

/* ==========================================================================
   TERMEK RESZLET DIALOG - RESZPONZIV
   ========================================================================== */

@media (max-width: 480px) {
	dialog.myg-product-detail {
		padding: 16px;
		max-height: 80vh;
		max-height: 80dvh;
	}

	.myg-product-detail__name {
		font-size: 18px;
	}

	.myg-product-detail__qty-input,
	.myg-product-detail__unit-select {
		padding: 10px;
		font-size: 15px;
	}
}