/* ==========================================================================
   Modals
   ========================================================================== */

.wc-modal-overlay {

	position: fixed;

	inset: 0;

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

	padding: 2rem;

	background: rgba(15, 23, 42, .55);

	backdrop-filter: blur(4px);

	z-index: var(--wc-z-modal);

	opacity: 0;
	visibility: hidden;

	transition: opacity .25s ease, visibility .25s ease;

}

.wc-modal-overlay.is-active {

	opacity: 1;
	visibility: visible;

}

/* ==========================================================================
   Modal
   ========================================================================== */

.wc-modal {

	display: flex;
	flex-direction: column;

	width: 100%;
	max-width: 640px;
	max-height: 90vh;

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

	border-radius: var(--wc-radius-lg);

	box-shadow: var(--wc-shadow-lg);

	overflow: hidden;

	transform: translateY(15px) scale(.98);

	transition: transform .25s ease;

}

.wc-modal-overlay.is-active .wc-modal {

	transform: translateY(0) scale(1);

}

/* ==========================================================================
   Sizes
   ========================================================================== */

.wc-modal--sm {

	max-width: 420px;

}

.wc-modal--md {

	max-width: 640px;

}

.wc-modal--lg {

	max-width: 900px;

}

.wc-modal--xl {

	max-width: 1200px;

}

.wc-modal--fullscreen {

	width: 100%;
	height: 100%;

	max-width: none;
	max-height: none;

	border-radius: 0;

}

/* ==========================================================================
   Header
   ========================================================================== */

.wc-modal__header {

	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 1rem;

	padding: 1.5rem;

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

}

.wc-modal__title {

	margin: 0;

	font-size: 1.25rem;
	font-weight: 700;

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

}

.wc-modal__subtitle {

	margin-top: .35rem;

	font-size: .9rem;

	color: var(--wc-color-text-light);

}

/* ==========================================================================
   Close
   ========================================================================== */

.wc-modal__close {

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

	width: 40px;
	height: 40px;

	border: none;
	border-radius: 50%;

	background: transparent;

	cursor: pointer;

	color: var(--wc-color-text-light);

	transition: var(--wc-transition);

}

.wc-modal__close:hover {

	background: rgba(0,0,0,.06);

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

}

/* ==========================================================================
   Body
   ========================================================================== */

.wc-modal__body {

	padding: 1.5rem;

	overflow-y: auto;

	flex: 1;

}

/* ==========================================================================
   Footer
   ========================================================================== */

.wc-modal__footer {

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

	gap: .75rem;

	padding: 1.25rem 1.5rem;

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

	background: rgba(0,0,0,.015);

}

/* ==========================================================================
   Scrollable
   ========================================================================== */

.wc-modal--scrollable .wc-modal__body {

	max-height: 60vh;

}

/* ==========================================================================
   Loading
   ========================================================================== */

.wc-modal--loading {

	pointer-events: none;

	opacity: .75;

}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width:768px){

	.wc-modal-overlay{

		padding:1rem;

		align-items:flex-end;

	}

	.wc-modal{

		max-width:none;

		width:100%;

		max-height:95vh;

		border-bottom-left-radius:0;
		border-bottom-right-radius:0;

	}

	.wc-modal__header,
	.wc-modal__body,
	.wc-modal__footer{

		padding:1.25rem;

	}

	.wc-modal__footer{

		flex-direction:column-reverse;

	}

	.wc-modal__footer .wc-button{

		width:100%;

	}

}