/**
 * MLS Genie™ — Auth Modal chrome
 * Field/input/button/error styling is inherited from unified-login.css
 * (enqueued as a dependency — see class-mlsg-auth-modal.php). This file is
 * only the modal shell itself: backdrop, dialog box, tabs, close button.
 */

.mlsg-modal{
	position:fixed;
	inset:0;
	z-index:100000;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:24px 16px;
}
/* .mlsg-modal sets display:flex above, at the same specificity as the
   browser's built-in [hidden]{display:none} — author styles win a tie, so
   without this the modal would stay visible even while [hidden] is set. */
.mlsg-modal[hidden]{display:none;}

.mlsg-modal__backdrop{
	position:absolute;
	inset:0;
	background:rgba(15,23,42,.55);
}

.mlsg-modal__dialog{
	position:relative;
	width:100%;
	max-width:400px;
	max-height:calc(100vh - 48px);
	overflow-y:auto;
	background:#fff;
	border-radius:16px;
	box-shadow:0 20px 60px rgba(0,0,0,.25);
	padding:32px 28px 28px;
	display:flex;
	flex-direction:column;
	gap:16px;
}

.mlsg-modal__close{
	position:absolute;
	top:14px;
	right:14px;
	width:32px;
	height:32px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:transparent;
	border:none;
	border-radius:8px;
	font-size:16px;
	color:var(--ul-muted, #64748b);
	cursor:pointer;
}
.mlsg-modal__close:hover{background:#f1f5f9;}

.mlsg-modal__tabs{
	display:flex;
	gap:4px;
	background:#f1f5f9;
	border-radius:10px;
	padding:4px;
}
.mlsg-modal__tab{
	flex:1;
	height:36px;
	background:transparent;
	border:none;
	border-radius:7px;
	font-size:14px;
	font-weight:600;
	font-family:inherit;
	color:var(--ul-muted, #64748b);
	cursor:pointer;
	transition:background .15s,color .15s;
}
.mlsg-modal__tab.is-active{
	background:#fff;
	color:var(--ul-text, #0f172a);
	box-shadow:0 1px 3px rgba(0,0,0,.1);
}

.mlsg-modal__panel{
	display:flex;
	flex-direction:column;
	gap:16px;
}
.mlsg-modal__panel[hidden]{display:none;}

/* Body scroll lock while the modal is open */
body.mlsg-modal-open{overflow:hidden;}

@media(max-width:440px){
	.mlsg-modal__dialog{padding:28px 20px 24px;border-radius:16px;}
}