/**
 * Rajgir Parent Theme
 *
 * Component CSS — Modal
 *
 * Canonical path:
 * assets/css/components/modal.css
 *
 * Modal Component Architecture:
 *
 * Trigger
 *    ↓
 * Overlay
 *    ↓
 * Modal
 *    ↓
 * Header
 *    ↓
 * Title
 *    ↓
 * Content
 *    ↓
 * Action
 *    ↓
 * Error / Success
 *
 * Responsibilities:
 * - Modal presentation.
 * - Overlay presentation.
 * - Dialog surface.
 * - Modal header/content/footer.
 * - Close-control presentation.
 * - Modal states.
 * - Accessible focus presentation.
 * - Responsive modal foundation.
 *
 * This file does NOT:
 * - implement JavaScript focus management;
 * - implement focus trapping;
 * - implement Escape-key handling;
 * - perform business validation;
 * - perform authorization;
 * - perform database operations;
 * - perform API requests;
 * - determine business success/failure.
 *
 * @package Rajgir
 */


/* ==========================================================================
   1. MODAL ROOT
   ========================================================================== */

.rg-modal {
	position: fixed;

	inset: 0;

	z-index:
		var(--rajgir-layer-modal);

	display: none;

	width: 100%;
	height: 100%;

	padding:
		var(--rajgir-space-modal-viewport);

	overflow: auto;

	overscroll-behavior: contain;
}


/* ==========================================================================
   2. OPEN MODAL
   ========================================================================== */

.rg-modal.is-open,
.rg-modal[aria-hidden="false"] {
	display: flex;

	align-items: center;
	justify-content: center;
}


/* ==========================================================================
   3. MODAL OVERLAY
   ========================================================================== */

.rg-modal__overlay {
	position: absolute;

	inset: 0;

	background:
		var(--rajgir-color-overlay);

	cursor: default;
}


/* ==========================================================================
   4. MODAL DIALOG
   ========================================================================== */

.rg-modal__dialog {
	position: relative;

	z-index:
		var(--rajgir-layer-modal);

	width: 100%;
	max-width:
		var(--rajgir-modal-max-width);

	max-height:
		var(--rajgir-modal-max-height);

	margin:
		auto;

	overflow:
		auto;

	background:
		var(--rajgir-color-surface);

	color:
		var(--rajgir-color-text);

	border:
		1px solid var(--rajgir-color-border);

	border-radius:
		var(--rajgir-radius-modal);

	box-shadow:
		var(--rajgir-shadow-modal);

	overscroll-behavior: contain;
}


/* ==========================================================================
   5. MODAL HEADER
   ========================================================================== */

.rg-modal__header {
	display: flex;

	align-items: flex-start;
	justify-content: space-between;

	gap:
		var(--rajgir-space-component-gap);

	padding:
		var(--rajgir-space-modal-header);

	border-bottom:
		1px solid var(--rajgir-color-border);
}


/* ==========================================================================
   6. MODAL TITLE AREA
   ========================================================================== */

.rg-modal__heading {
	min-width: 0;

	flex:
		1 1 auto;
}


/* ==========================================================================
   7. MODAL TITLE
   ========================================================================== */

.rg-modal__title {
	margin: 0;

	color:
		var(--rajgir-color-text);

	font-family:
		var(--rajgir-type-heading-font-family);

	font-size:
		var(--rajgir-type-heading-font-size);

	font-weight:
		var(--rajgir-type-heading-font-weight);

	line-height:
		var(--rajgir-type-heading-line-height);

	overflow-wrap:
		break-word;
}


/* ==========================================================================
   8. MODAL DESCRIPTION
   ========================================================================== */

.rg-modal__description {
	margin:
		var(--rajgir-space-modal-title-description-gap)
		0
		0;

	color:
		var(--rajgir-color-text-muted);

	font-family:
		var(--rajgir-font-family-body);

	font-size:
		var(--rajgir-font-size-small);

	line-height:
		var(--rajgir-line-height-small);
}


/* ==========================================================================
   9. MODAL CLOSE BUTTON
   ========================================================================== */

.rg-modal__close {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	flex:
		0 0 auto;

	width:
		var(--rajgir-button-icon-size);

	min-width:
		var(--rajgir-button-icon-size);

	height:
		var(--rajgir-button-icon-size);

	padding: 0;

	border:
		1px solid transparent;

	border-radius:
		var(--rajgir-radius-control);

	background:
		transparent;

	color:
		var(--rajgir-color-text);

	cursor: pointer;
}


/* ==========================================================================
   10. MODAL CLOSE BUTTON — HOVER
   ========================================================================== */

.rg-modal__close:hover {
	background:
		var(--rajgir-color-surface-hover);

	color:
		var(--rajgir-color-primary);
}


/* ==========================================================================
   11. MODAL CLOSE BUTTON — FOCUS
   ========================================================================== */

.rg-modal__close:focus-visible {
	outline:
		2px solid var(--rajgir-color-focus);

	outline-offset:
		2px;
}


/* ==========================================================================
   12. MODAL CONTENT
   ========================================================================== */

.rg-modal__content {
	padding:
		var(--rajgir-space-modal-content);

	overflow-wrap:
		break-word;
}


/* ==========================================================================
   13. MODAL CONTENT TYPOGRAPHY
   ========================================================================== */

.rg-modal__content > :first-child {
	margin-top: 0;
}

.rg-modal__content > :last-child {
	margin-bottom: 0;
}


/* ==========================================================================
   14. MODAL FOOTER
   ========================================================================== */

.rg-modal__footer {
	display: flex;

	align-items: center;
	justify-content: flex-end;

	flex-wrap: wrap;

	gap:
		var(--rajgir-space-component-gap);

	padding:
		var(--rajgir-space-modal-footer);

	border-top:
		1px solid var(--rajgir-color-border);
}


/* ==========================================================================
   15. MODAL ACTION GROUP
   ========================================================================== */

.rg-modal__actions {
	display: flex;

	align-items: center;

	justify-content: flex-end;

	flex-wrap: wrap;

	gap:
		var(--rajgir-space-component-gap);

	width: 100%;
}


/* ==========================================================================
   16. MODAL ACTION
   ========================================================================== */

.rg-modal__actions .rg-button {
	flex:
		0 0 auto;
}


/* ==========================================================================
   17. DESTRUCTIVE ACTION
   ========================================================================== */

.rg-modal--confirmation
.rg-modal__actions
.rg-button--danger {
	order: 2;
}


/* ==========================================================================
   18. CONFIRMATION MODAL
   ========================================================================== */

.rg-modal--confirmation .rg-modal__content {
	max-width:
		var(--rajgir-modal-content-max-width);
}


/*
 * Destructive actions should clearly communicate consequence.
 *
 * Confirmation logic belongs to the application layer.
 */


/* ==========================================================================
   19. FORM MODAL
   ========================================================================== */

.rg-modal--form
.rg-modal__content {
	padding:
		var(--rajgir-space-modal-content);
}


/* ==========================================================================
   20. FORM MODAL ACTIONS
   ========================================================================== */

.rg-modal--form
.rg-modal__footer {
	justify-content: flex-end;
}


/* ==========================================================================
   21. MODAL FORM FLOW
   ========================================================================== */

/*
 * Modal form presentation follows:
 *
 * Title
 *   ↓
 * Form
 *   ↓
 * Action
 *   ↓
 * Error / Success
 *
 * Actual validation and submission remain outside CSS.
 */


/* ==========================================================================
   22. MODAL ERROR
   ========================================================================== */

.rg-modal__error,
.rg-modal .rg-form-error {
	color:
		var(--rajgir-color-error);
}


/* ==========================================================================
   23. MODAL SUCCESS
   ========================================================================== */

.rg-modal__success,
.rg-modal .rg-form-success {
	color:
		var(--rajgir-color-success);
}


/* ==========================================================================
   24. MODAL STATUS
   ========================================================================== */

.rg-modal__status {
	margin: 0;

	font-size:
		var(--rajgir-font-size-small);

	line-height:
		var(--rajgir-line-height-small);
}


/* ==========================================================================
   25. MODAL LOADING
   ========================================================================== */

.rg-modal.is-loading
.rg-modal__dialog {
	cursor:
		wait;
}


/* ==========================================================================
   26. MODAL LOADING INDICATOR
   ========================================================================== */

.rg-modal.is-loading
.rg-modal__dialog::after {
	content: "";

	display: block;

	width:
		var(--rajgir-size-icon-sm);

	height:
		var(--rajgir-size-icon-sm);

	margin:
		var(--rajgir-space-component-gap)
		auto;

	border:
		2px solid currentColor;

	border-right-color:
		transparent;

	border-radius:
		50%;

	animation:
		rajgir-modal-spin
		var(--rajgir-motion-duration-fast)
		linear
		infinite;
}


/* ==========================================================================
   27. LOADING ANIMATION
   ========================================================================== */

@keyframes rajgir-modal-spin {

	to {
		transform:
			rotate(360deg);
	}

}


/* ==========================================================================
   28. MODAL ACCESSIBILITY
   ========================================================================== */

/*
 * The modal must be represented by semantic dialog markup where
 * applicable.
 *
 * Recommended semantic relationship:
 *
 * Trigger
 *    ↓
 * aria-controls
 *    ↓
 * Dialog
 *
 * Dialog:
 *
 * role="dialog"
 *
 * and, where appropriate:
 *
 * aria-modal="true"
 *
 * aria-labelledby="..."
 *
 * aria-describedby="..."
 *
 * ARIA supplements semantic HTML; it does not replace it.
 */


/* ==========================================================================
   29. MODAL FOCUS
   ========================================================================== */

/*
 * CSS provides visible focus only.
 *
 * JavaScript/component behavior must handle:
 *
 * Open
 *   ↓
 * Move / Manage Focus
 *   ↓
 * Modal interaction
 *   ↓
 * Close
 *   ↓
 * Restore previous meaningful focus
 *
 * Focus trap is applicable where required by the interaction.
 */


/* ==========================================================================
   30. MODAL FOCUS INDICATOR
   ========================================================================== */

.rg-modal a:focus-visible,
.rg-modal button:focus-visible,
.rg-modal input:focus-visible,
.rg-modal select:focus-visible,
.rg-modal textarea:focus-visible {
	outline:
		2px solid var(--rajgir-color-focus);

	outline-offset:
		2px;
}


/* ==========================================================================
   31. ESCAPE KEY
   ========================================================================== */

/*
 * Escape-key closing is a JavaScript interaction responsibility.
 *
 * This CSS file does not attempt to implement keyboard events.
 */


/* ==========================================================================
   32. OVERLAY INTERACTION
   ========================================================================== */

/*
 * Overlay click-to-close, where approved, belongs to the modal
 * interaction controller.
 *
 * It must never be the only method of closing a modal.
 */


/* ==========================================================================
   33. SCROLL CONTAINMENT
   ========================================================================== */

.rg-modal {
	-webkit-overflow-scrolling: touch;
}


/* ==========================================================================
   34. MODAL CONTENT SCROLL
   ========================================================================== */

.rg-modal__dialog {
	-webkit-overflow-scrolling: touch;
}


/* ==========================================================================
   35. BODY SCROLL LOCK BOUNDARY
   ========================================================================== */

/*
 * Body scroll locking is behavior.
 *
 * JavaScript may manage it when appropriate.
 *
 * This CSS component does not modify:
 *
 * body {
 *     overflow: hidden;
 * }
 *
 * globally.
 */


/* ==========================================================================
   36. BOTTOM SHEET
   ========================================================================== */

.rg-modal--bottom-sheet {
	align-items: flex-end;
}


/* ==========================================================================
   37. BOTTOM SHEET DIALOG
   ========================================================================== */

.rg-modal--bottom-sheet
.rg-modal__dialog {
	max-width:
		var(--rajgir-modal-bottom-sheet-max-width);

	max-height:
		var(--rajgir-modal-bottom-sheet-max-height);

	margin:
		0 auto 0;
}


/* ==========================================================================
   38. BOTTOM SHEET HEADER
   ========================================================================== */

.rg-modal--bottom-sheet
.rg-modal__header {
	padding-top:
		var(--rajgir-space-modal-bottom-sheet-header);
}


/* ==========================================================================
   39. BOTTOM SHEET SAFE AREA
   ========================================================================== */

.rg-modal--bottom-sheet
.rg-modal__footer {
	padding-bottom:
		calc(
			var(--rajgir-space-modal-footer)
			+
			env(
				safe-area-inset-bottom,
				0px
			)
		);
}


/* ==========================================================================
   40. DRAWER-LIKE MODAL
   ========================================================================== */

.rg-modal--drawer {
	align-items: stretch;
	justify-content: flex-end;
}


/* ==========================================================================
   41. DRAWER DIALOG
   ========================================================================== */

.rg-modal--drawer
.rg-modal__dialog {
	width:
		var(--rajgir-modal-drawer-width);

	max-width:
		100%;

	height:
		100%;

	max-height:
		100%;

	margin:
		0;

	border-radius:
		var(--rajgir-radius-drawer);
}


/* ==========================================================================
   42. MODAL RESPONSIVE FOUNDATION
   ========================================================================== */

@media (max-width: 767px) {

	.rg-modal {
		align-items: flex-end;

		padding:
			var(--rajgir-space-modal-mobile-viewport);
	}

	.rg-modal__dialog {
		max-width: 100%;

		max-height:
			var(--rajgir-modal-mobile-max-height);
	}

	.rg-modal__footer {
		justify-content: stretch;
	}

	.rg-modal__actions {
		justify-content: stretch;
	}

	.rg-modal__actions .rg-button {
		flex:
			1 1 auto;
	}

}


/* ==========================================================================
   43. MODAL LARGE SCREEN
   ========================================================================== */

@media (min-width: 1024px) {

	.rg-modal__dialog {
		max-width:
			var(--rajgir-modal-desktop-max-width);
	}

}


/* ==========================================================================
   44. MODAL MOTION
   ========================================================================== */

.rg-modal__dialog {
	transition:
		var(--rajgir-motion-transition-fast);
}


/* ==========================================================================
   45. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	.rg-modal__dialog {
		transition: none;
	}

	.rg-modal.is-loading
	.rg-modal__dialog::after {
		animation: none;
	}

}


/* ==========================================================================
   46. MODAL VISUAL STATES
   ========================================================================== */

.rg-modal--information
.rg-modal__dialog {
}


.rg-modal--quick-action
.rg-modal__dialog {
}


.rg-modal--confirmation
.rg-modal__dialog {
}


/*
 * These modifiers communicate presentation purpose.
 *
 * They do not determine business authority.
 */


/* ==========================================================================
   47. MODAL CLOSE SAFETY
   ========================================================================== */

/*
 * A modal must provide an understandable close mechanism where
 * closing is applicable.
 *
 * Close behavior must not depend exclusively on:
 *
 * - overlay click;
 * - hover;
 * - mouse interaction.
 */


/* ==========================================================================
   48. MODAL CONTENT VISIBILITY
   ========================================================================== */

.rg-modal__content,
.rg-modal__title,
.rg-modal__description {
	overflow-wrap:
		break-word;
}


/* ==========================================================================
   49. MODAL Z-INDEX CONTRACT
   ========================================================================== */

/*
 * Modal uses the centralized:
 *
 *     --rajgir-layer-modal
 *
 * token.
 *
 * Never introduce:
 *
 *     z-index: 9999;
 *     z-index: 99999;
 *     z-index: 999999;
 *
 * The centralized z-index system remains authoritative.
 */


/* ==========================================================================
   50. MODAL + BOTTOM NAVIGATION
   ========================================================================== */

/*
 * When a modal/bottom sheet is open:
 *
 * Modal Layer
 *     ↓
 * Bottom Navigation
 *
 * Modal interaction must not be blocked by lower-priority navigation.
 *
 * Exact numeric layering comes from the centralized token system.
 */


/* ==========================================================================
   51. MODAL + FORM COMPONENT
   ========================================================================== */

/*
 * Modal
 *   +
 * Form
 *
 * must compose existing reusable components.
 *
 * A modal must not create a second form design system.
 */


/* ==========================================================================
   52. MODAL + BUTTON COMPONENT
   ========================================================================== */

/*
 * Modal actions consume the shared:
 *
 *     .rg-button
 *
 * system.
 *
 * Do not create:
 *
 *     .modal-button
 *     .confirmation-button
 *     .tourism-modal-button
 *
 * when the common Button Component is sufficient.
 */


/* ==========================================================================
   53. MODAL COMPONENT BOUNDARY
   ========================================================================== */

/*
 * Modal CSS:
 *     presentation
 *
 * Modal JavaScript:
 *     open/close state
 *     focus management
 *     Escape handling
 *     focus restoration
 *
 * Application:
 *     action handling
 *     validation
 *     API communication
 *
 * Backend:
 *     authorization
 *     business authority
 *     data mutation
 */


/* ==========================================================================
   54. NO BUSINESS AUTHORITY
   ========================================================================== */

/*
 * A modal labelled:
 *
 * "Delete"
 *
 * does NOT itself delete anything.
 *
 * A confirmation UI:
 *
 * User Intent
 *     ↓
 * Confirmation
 *     ↓
 * Approved Action
 *     ↓
 * Backend Authority
 *
 * remains the authoritative architecture.
 */


/* ==========================================================================
   55. NO GIANT MODAL SYSTEM
   ========================================================================== */

/*
 * Modal
 * Drawer
 * Dialog
 * Bottom Sheet
 *
 * may share this component foundation where the presentation contract
 * allows it.
 *
 * Separate domain-specific modal systems should not be created merely
 * because the modal appears in a different portal.
 */


/* ==========================================================================
   56. COMPONENT GOLDEN RULE
   ========================================================================== */

/*
 * SIMPLE
 * +
 * CLEAR
 * +
 * ACCESSIBLE
 * +
 * RESPONSIVE
 * +
 * PREDICTABLE
 * +
 * REUSABLE
 *
 * Modal remains a presentation component, not a business engine.
 */