/**
 * MyGasztro Dialog - központi megerősítő / értesítő / bekérő ablak stílus
 *
 * Natív browser alert/confirm/prompt helyett használjuk ezeket az osztályokat.
 * Teljesen design-token alapú, így témák és testreszabás egyszerű.
 *
 * Fő osztályok (STABIL KAPASZKODÓK):
 *   .myg-dialog                       - gyökér overlay (fixed, centered)
 *   .myg-dialog__backdrop             - sötét hátér
 *   .myg-dialog__panel                - középen lebegő kártya
 *   .myg-dialog__header               - címsor
 *   .myg-dialog__title                - h2 cím
 *   .myg-dialog__body                 - üzenet / input terület
 *   .myg-dialog__message              - szöveges üzenet
 *   .myg-dialog__input                - prompt input mező
 *   .myg-dialog__actions              - gomb sor
 *   .myg-dialog__btn                  - gomb alap
 *   .myg-dialog__btn--primary         - elsődleges (orange)
 *   .myg-dialog__btn--secondary       - másodlagos (semleges)
 *   .myg-dialog__btn--danger          - veszély (piros)
 *
 * Típus modifikátorok (accent szín):
 *   .myg-dialog--default | --danger | --warning | --success | --error | --info
 *
 * @package MyGasztro
 * @since 3.2.0
 */

/* ==========================================================================
   Testreszabható dialog tokenek

   Felülírhatók témában vagy oldal-specifikus CSS-ben a :root szinten.
   ========================================================================== */

:root {
	--myg-dialog-bg: var(--myg-bg-color, #fff);
	--myg-dialog-backdrop: rgba(0, 0, 0, 0.55);
	--myg-dialog-radius: var(--myg-border-radius-xl, 16px);
	--myg-dialog-shadow: var(--myg-box-shadow-lg, 0 10px 40px rgba(0, 0, 0, 0.2));
	--myg-dialog-padding: var(--myg-spacing-xl, 30px);
	--myg-dialog-max-width: 460px;
	--myg-dialog-accent: var(--myg-primary-color, #ff8630);
	--myg-dialog-z: var(--myg-z-modal, 10000);
	--myg-dialog-title-color: var(--myg-text-color, #333);
	--myg-dialog-body-color: var(--myg-text-muted, #666);
	--myg-dialog-border-color: var(--myg-border-light, #e9ecef);
}

/* ==========================================================================
   Gyökér overlay - fixed, teljes képernyő, mindig középen
   ========================================================================== */

.myg-dialog {
	position: fixed;
	inset: 0;
	z-index: var(--myg-dialog-z);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--myg-spacing-md, 15px);
	font-family: var(--myg-font-family, 'Poppins', sans-serif);
	color: var(--myg-dialog-title-color);
}

.myg-dialog__backdrop {
	position: absolute;
	inset: 0;
	background: var(--myg-dialog-backdrop);
	opacity: 0;
	transition: opacity 0.18s ease;
}

.myg-dialog--open .myg-dialog__backdrop,
.myg-dialog--closing .myg-dialog__backdrop {
	opacity: 1;
}

.myg-dialog--closing .myg-dialog__backdrop {
	opacity: 0;
}

/* ==========================================================================
   Központi panel
   ========================================================================== */

.myg-dialog__panel {
	position: relative;
	background: var(--myg-dialog-bg);
	border-radius: var(--myg-dialog-radius);
	box-shadow: var(--myg-dialog-shadow);
	padding: var(--myg-dialog-padding);
	width: 100%;
	max-width: var(--myg-dialog-max-width);
	max-height: calc(100vh - 2 * var(--myg-spacing-md, 15px));
	overflow: auto;
	transform: translateY(-16px) scale(0.97);
	opacity: 0;
	transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.18s ease;
	border-top: 4px solid var(--myg-dialog-accent);
}

.myg-dialog--open .myg-dialog__panel {
	transform: translateY(0) scale(1);
	opacity: 1;
}

.myg-dialog--closing .myg-dialog__panel {
	transform: translateY(-8px) scale(0.98);
	opacity: 0;
}

/* ==========================================================================
   Típus akcent színek
   ========================================================================== */

.myg-dialog--default .myg-dialog__panel { border-top-color: var(--myg-primary-color, #ff8630); }
.myg-dialog--danger  .myg-dialog__panel { border-top-color: var(--myg-danger-color, #dc3545); }
.myg-dialog--warning .myg-dialog__panel { border-top-color: var(--myg-warning-color, #ff9800); }
.myg-dialog--success .myg-dialog__panel { border-top-color: var(--myg-success-color, #4caf50); }
.myg-dialog--error   .myg-dialog__panel { border-top-color: var(--myg-danger-color, #dc3545); }
.myg-dialog--info    .myg-dialog__panel { border-top-color: var(--myg-info-color, #2271b1); }

/* ==========================================================================
   Fejléc + szöveges tartalom
   ========================================================================== */

.myg-dialog__header {
	margin: 0 0 var(--myg-spacing-md, 15px);
}

.myg-dialog__title {
	margin: 0;
	font-size: var(--myg-font-size-lg, 18px);
	font-weight: 600;
	color: var(--myg-dialog-title-color);
	line-height: 1.3;
}

.myg-dialog__body {
	margin: 0 0 var(--myg-spacing-lg, 20px);
}

.myg-dialog__message {
	margin: 0;
	font-size: var(--myg-font-size-base, 14px);
	line-height: var(--myg-line-height, 1.6);
	color: var(--myg-dialog-body-color);
	white-space: pre-wrap;
	word-wrap: break-word;
}

.myg-dialog__message + .myg-dialog__input {
	margin-top: var(--myg-spacing-md, 15px);
}

/* ==========================================================================
   Prompt input
   ========================================================================== */

.myg-dialog__input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	font-family: inherit;
	font-size: var(--myg-font-size-base, 14px);
	color: var(--myg-text-color, #333);
	background: var(--myg-bg-color, #fff);
	border: 1px solid var(--myg-dialog-border-color);
	border-radius: var(--myg-border-radius, 8px);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.myg-dialog__input:focus {
	outline: none;
	border-color: var(--myg-dialog-accent);
	box-shadow: 0 0 0 3px rgba(var(--myg-primary-rgb, 255, 134, 48), 0.2);
}

/* ==========================================================================
   Akció gombok
   ========================================================================== */

.myg-dialog__actions {
	display: flex;
	gap: var(--myg-spacing-sm, 8px);
	justify-content: flex-end;
	flex-wrap: wrap;
}

.myg-dialog__btn {
	appearance: none;
	-webkit-appearance: none;
	font-family: inherit;
	font-size: var(--myg-font-size-base, 14px);
	font-weight: 600;
	line-height: 1.2;
	padding: 10px 18px;
	border-radius: var(--myg-border-radius, 8px);
	border: 1px solid transparent;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
	min-width: 90px;
}

.myg-dialog__btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(var(--myg-primary-rgb, 255, 134, 48), 0.35);
}

.myg-dialog__btn:active {
	transform: translateY(1px);
}

.myg-dialog__btn--primary {
	background: var(--myg-primary-color, #ff8630);
	color: #fff;
}

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

.myg-dialog__btn--secondary {
	background: var(--myg-bg-muted, #f8f9fa);
	color: var(--myg-text-color, #333);
	border-color: var(--myg-border-color, #ddd);
}

.myg-dialog__btn--secondary:hover {
	background: var(--myg-bg-alt, #f5f5f5);
	border-color: var(--myg-text-light, #999);
}

.myg-dialog__btn--danger {
	background: var(--myg-danger-color, #dc3545);
	color: #fff;
}

.myg-dialog__btn--danger:hover {
	background: #b52a37;
}

/* ==========================================================================
   Mobil
   ========================================================================== */

@media (max-width: 480px) {
	.myg-dialog__panel {
		padding: var(--myg-spacing-lg, 20px);
	}

	.myg-dialog__actions {
		flex-direction: column-reverse;
	}

	.myg-dialog__btn {
		width: 100%;
	}
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.myg-dialog__backdrop,
	.myg-dialog__panel {
		transition: none;
	}
}