/*
 * SC4 UI Modal (Global)
 *
 * What this file does:
 * - Provides a single, shared modal skin for frontend modals across SC4.
 * - Prevents drift: modules should not re-implement modal base styles.
 *
 * Notes:
 * - Admin modals may have their own scoped CSS. This file targets frontend.
 */

.sc4-modal{
	position:fixed;
	inset:0;
	display:none;
	align-items:center;
	justify-content:center;
	z-index:99999;
	padding:18px;
}

.sc4-modal.is-open{display:flex;}
html.sc4-modal-open, body.sc4-modal-open{overflow:hidden;}

.sc4-modal__backdrop{
	position:absolute;
	inset:0;
	background:rgba(0,0,0,.72);
	backdrop-filter:blur(4px);
}

.sc4-modal__panel{
	position:relative;
	width:min(920px,100%);
	max-height:85vh;
	overflow:hidden;
	border-radius:18px;
	border:1px solid rgba(255,255,255,.14);
	background:rgba(0,0,0,.92);
	box-shadow:0 20px 60px rgba(0,0,0,.6);
	display:flex;
	flex-direction:column;
}

.sc4-modal__head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	padding:14px 14px 10px;
	border-bottom:1px solid rgba(255,255,255,.10);
}

.sc4-modal__title{
	font-size:14px;
	font-weight:800;
	letter-spacing:.02em;
}

.sc4-modal__close{
	border:1px solid rgba(255,255,255,.18);
	background:rgba(0,0,0,.35);
	color:inherit;
	border-radius:12px;
	padding:8px 10px;
	cursor:pointer;
}

.sc4-modal__close:hover{background:rgba(255,255,255,.06);}

.sc4-modal__body{
	padding:12px 14px 14px;
	overflow:auto;
}

.sc4-modal__pager{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	margin-top:12px;
}