/* ============================================================
   AppModal — reusable, framework-free modal component.
   Prefix: app-modal (BEM-like). Never collides with Bootstrap.
   Sizes:
     xs    220px     sm    300px    md  500px (default)
     lg    800px     xl   1140px    fullscreen  100%
     banner full-width strip, toast floating corner notification
     Custom width/height via `width` / `height` options (CSS values)
   Positions:
     centered (default), top, bottom,
     top-left, top-right, bottom-left, bottom-right,
     left, right  (full-height slide-in panels)
   Responsive: on viewports < 576px every size becomes 100% width
   with small margins, except .app-modal--fullscreen / .app-modal--banner /
   .app-modal--pos-left / .app-modal--pos-right which fill the viewport.
   ============================================================ */

/* ============================================================
   Design tokens — override these to retheme the whole modal.
   ============================================================ */
:root {
	/* Surface */
	--app-modal-bg:           #fff;
	--app-modal-border:       #e9ecef;
	--app-modal-radius:       0.75rem;

	/* Backdrop & shadows */
	--app-modal-backdrop:     rgba(0, 0, 0, 0.6);
	--app-modal-shadow:       0 1rem 3rem rgba(0, 0, 0, 0.35);
	--app-modal-shadow-toast: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25);
	--app-modal-close-hover-bg: rgba(0, 0, 0, 0.06);

	/* Text */
	--app-modal-text:         #393939;
	--app-modal-text-muted:   #6c757d;
	--app-modal-text-inverse: #000;

	/* Brand / accent (used by close hover, countdown fill, etc.) */
	--app-modal-accent:       #ff176d;

	/* Countdown */
	--app-modal-countdown-bg:        rgba(0, 0, 0, 0.025);
	--app-modal-countdown-border:    #e9ecef;
	--app-modal-countdown-text:      #6c757d;
	--app-modal-countdown-bar-bg:    rgba(0, 0, 0, 0.08);
	--app-modal-countdown-bar-fill:  var(--app-modal-accent);

	/* Layout */
	--app-modal-zindex:       200000;
	--app-modal-zindex-dialog: 2;
	--app-modal-zindex-backdrop: 1;
	--app-modal-zindex-close: 3;
	--app-modal-default-max-width: 500px;
}

/* ============================================================
   Root container — fixed full-viewport overlay.
   ============================================================ */
.app-modal-root {
	position: fixed;
	inset: 0;
	z-index: var(--app-modal-zindex);
	display: none;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.app-modal-root.app-modal--open {
	display: flex;
}

/* ============================================================
   Backdrop — solid color/alpha layer that fades in/out.
   ============================================================ */
.app-modal-backdrop {
	position: fixed;
	inset: 0;
	background: var(--app-modal-backdrop);
	opacity: 0;
	transition: opacity 0.2s ease;
	z-index: var(--app-modal-zindex-backdrop);
}

.app-modal-root.app-modal--open .app-modal-backdrop {
	opacity: 1;
}

/* ============================================================
   Dialog — the actual modal box.
   ============================================================ */
.app-modal-dialog {
	position: relative;
	z-index: var(--app-modal-zindex-dialog);
	width: 100%;
	max-width: var(--app-modal-default-max-width);
	margin: 1.75rem auto;
	background: var(--app-modal-bg);
	border-radius: var(--app-modal-radius);
	box-shadow: var(--app-modal-shadow);
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - 3.5rem);
	overflow: hidden;
	transform: translateY(-15px) scale(0.98);
	transition: transform 0.2s ease;
}

.app-modal-root.app-modal--open .app-modal-dialog {
	transform: translateY(0) scale(1);
}

/* === Sizes === */
.app-modal-dialog.app-modal--xs          { max-width: 220px; }
.app-modal-dialog.app-modal--sm          { max-width: 300px; }
.app-modal-dialog.app-modal--md          { max-width: 500px; }
.app-modal-dialog.app-modal--lg          { max-width: 800px; }
.app-modal-dialog.app-modal--xl          { max-width: 1140px; }

.app-modal-dialog.app-modal--fullscreen {
	max-width: none;
	width: 100%;
	height: 100%;
	margin: 0;
	border-radius: 0;
	max-height: 100vh;
}

/* Banner — full-width strip pinned at top or bottom */
.app-modal-dialog.app-modal--banner {
	max-width: none;
	width: 100%;
	max-height: 220px;
	border-radius: 0;
	margin: 0;
}

/* Toast — floating corner notification (paired with pos-bottom-right etc.) */
.app-modal-dialog.app-modal--toast {
	max-width: 360px;
	width: auto;
	box-shadow: var(--app-modal-shadow-toast);
}

/* ============================================================
   Header (rendered only when `title` is set).
   ============================================================ */
.app-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--app-modal-border);
	flex-shrink: 0;
}

.app-modal-title {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--app-modal-text);
	line-height: 1.3;
	flex: 1;
	min-width: 0;
	padding-right: 1rem;
}

/* ============================================================
   Close button — top-right, always visible regardless of header.
   ============================================================ */
.app-modal-close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	width: 2rem;
	height: 2rem;
	border: 0;
	background: transparent;
	border-radius: 50%;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--app-modal-text-muted);
	font-size: 1.5rem;
	line-height: 1;
	padding: 0;
	transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
	z-index: var(--app-modal-zindex-close);
}

.app-modal-close:hover,
.app-modal-close:focus {
	background: var(--app-modal-close-hover-bg);
	color: var(--app-modal-text-inverse);
	outline: none;
	transform: scale(1.05);
}

.app-modal-close::before {
	content: "\00d7"; /* × */
	font-weight: 300;
}

/* ============================================================
   Body — where your content goes. Scrollable when overflowing.
   ============================================================ */
.app-modal-body {
	position: relative;
	flex: 1 1 auto;
	overflow-y: auto;
	overflow-x: hidden;
}

/* ============================================================
   Footer (rendered only when `actions` array is set).
   ============================================================ */
.app-modal-footer {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0.75rem 1.25rem;
	border-top: 1px solid var(--app-modal-border);
	flex-shrink: 0;
	justify-content: flex-end;
}

.app-modal-footer:empty {
	display: none;
}

/* ============================================================
   Auto-close countdown — animated progress bar pinned to the
   bottom of the dialog; pause on hover/focus/click via .is-paused.
   ============================================================ */
.app-modal-countdown {
	position: relative;
	padding: 0.55rem 1.25rem;
	font-size: 0.78rem;
	color: var(--app-modal-countdown-text);
	background: var(--app-modal-countdown-bg);
	border-top: 1px solid var(--app-modal-countdown-border);
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-shrink: 0;
	font-weight: 500;
}

.app-modal-countdown__text {
	flex: 1;
	min-width: 0;
	line-height: 1.2;
}

.app-modal-countdown__bar {
	flex: 0 0 80px;
	height: 3px;
	border-radius: 2px;
	background: var(--app-modal-countdown-bar-bg);
	overflow: hidden;
	position: relative;
}

.app-modal-countdown__bar::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--app-modal-countdown-bar-fill);
	transform-origin: left center;
	transform: scaleX(1);
	animation: app-modal-countdown-progress var(--countdown-duration, 10s) linear forwards;
}

.app-modal-countdown.is-paused .app-modal-countdown__bar::after,
.app-modal-countdown.is-paused {
	animation-play-state: paused;
}
.app-modal-countdown.is-paused .app-modal-countdown__bar::after {
	animation-play-state: paused;
}

@keyframes app-modal-countdown-progress {
	from { transform: scaleX(1); }
	to   { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
	.app-modal-countdown__bar::after {
		transition: none !important;
		animation: none !important;
	}
}

/* ============================================================
   Positions — fix the dialog to a viewport edge.
   ============================================================ */
.app-modal-root.app-modal--top {
	align-items: flex-start;
}

.app-modal-root.app-modal--pos-top {
	align-items: flex-start;
	padding-top: 2rem;
}

.app-modal-root.app-modal--pos-bottom {
	align-items: flex-end;
	padding-bottom: 2rem;
}

.app-modal-root.app-modal--pos-top-left {
	align-items: flex-start;
	justify-content: flex-start;
	padding: 1rem;
}

.app-modal-root.app-modal--pos-top-right {
	align-items: flex-start;
	justify-content: flex-end;
	padding: 1rem;
}

.app-modal-root.app-modal--pos-bottom-left {
	align-items: flex-end;
	justify-content: flex-start;
	padding: 1rem;
}

.app-modal-root.app-modal--pos-bottom-right {
	align-items: flex-end;
	justify-content: flex-end;
	padding: 1rem;
}

/* Slide-in panels: full height, no scrollbar inside root */
.app-modal-root.app-modal--pos-left,
.app-modal-root.app-modal--pos-right {
	padding: 0;
	align-items: stretch;
}

.app-modal-root.app-modal--pos-left {
	justify-content: flex-start;
}

.app-modal-root.app-modal--pos-right {
	justify-content: flex-end;
}

.app-modal-root.app-modal--pos-left .app-modal-dialog,
.app-modal-root.app-modal--pos-right .app-modal-dialog {
	border-radius: 0;
	height: 100%;
	max-height: 100vh;
	margin: 0;
}

/* Smaller top/bottom padding on mobile for slide-in panels */
@media (max-width: 575.98px) {
	.app-modal-root.app-modal--pos-top-left,
	.app-modal-root.app-modal--pos-top-right,
	.app-modal-root.app-modal--pos-bottom-left,
	.app-modal-root.app-modal--pos-bottom-right {
		padding: 0.5rem;
	}
}

/* ============================================================
   Scroll lock — applied to <html> and <body> while a modal is open.
   ============================================================ */
.app-modal-scroll-lock {
	overflow: hidden !important;
}

/* ============================================================
   Responsive: xs breakpoint — every size becomes full-width with
   margin. Fullscreen / banner / slide-in panels keep their layout.
   ============================================================ */
@media (max-width: 575.98px) {
	.app-modal-root {
		padding: 0.5rem;
	}

	.app-modal-dialog,
	.app-modal-dialog.app-modal--xs,
	.app-modal-dialog.app-modal--sm,
	.app-modal-dialog.app-modal--md,
	.app-modal-dialog.app-modal--lg,
	.app-modal-dialog.app-modal--xl,
	.app-modal-dialog.app-modal--toast {
		max-width: none;
		margin: 0.5rem auto;
		width: calc(100% - 1rem);
	}

	.app-modal-dialog.app-modal--fullscreen,
	.app-modal-dialog.app-modal--banner {
		width: 100%;
		height: 100%;
		margin: 0;
		border-radius: 0;
	}

	/* Slide-in panels stay full-height on mobile too */
	.app-modal-root.app-modal--pos-left .app-modal-dialog,
	.app-modal-root.app-modal--pos-right .app-modal-dialog {
		width: 100%;
		max-width: none;
	}
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.app-modal-backdrop,
	.app-modal-dialog,
	.app-modal-close {
		transition: none !important;
	}
}