/**
 * bt-access-control.css
 *
 * Modal styles for the BecomingTile access-control gate.
 * Minimal, accessible, responsive. No framework dependencies.
 * All selectors are scoped under #bt-access-modal to avoid theme collisions.
 */

/* =========================================================================
   Modal container (flex overlay wrapper)
   ========================================================================= */

#bt-access-modal {
	/* Hidden by default; JS sets display:flex to show. */
	display:          none;
	position:         fixed;
	inset:            0;               /* top/right/bottom/left: 0 */
	z-index:          999999;
	align-items:      center;
	justify-content:  center;
	/* Stacking context for the overlay + dialog box. */
}

/* =========================================================================
   Semi-transparent backdrop
   ========================================================================= */

.bt-modal-overlay {
	position:         fixed;
	inset:            0;
	background:       rgba(0, 0, 0, 0.55);
	/* Sits behind .bt-modal-box; clicking it calls closeModal(). */
}

/* =========================================================================
   Dialog box
   ========================================================================= */

.bt-modal-box {
	position:         relative;
	z-index:          1;               /* above the overlay */
	background:       #ffffff;
	border-radius:    8px;
	box-shadow:       0 8px 32px rgba(0, 0, 0, 0.22);
	padding:          32px 36px 28px;
	max-width:        460px;
	width:            calc(100% - 32px);
	box-sizing:       border-box;
	text-align:       center;
}

/* =========================================================================
   Title
   ========================================================================= */

.bt-modal-title {
	margin:           0 0 14px;
	font-size:        20px;
	font-weight:      700;
	line-height:      1.3;
	color:            #1a1a2e;
}

/* =========================================================================
   Message
   ========================================================================= */

.bt-modal-message {
	margin:           0 0 24px;
	font-size:        15px;
	line-height:      1.6;
	color:            #444;
}

/* =========================================================================
   Action area
   ========================================================================= */

.bt-modal-actions {
	display:          flex;
	justify-content:  center;
}

/* =========================================================================
   Primary button (OK / register link)
   ========================================================================= */

.bt-modal-btn {
	display:          inline-block;
	text-decoration:  none;
	cursor:           pointer;
	border:           none;
	border-radius:    5px;
	font-size:        15px;
	font-weight:      600;
	padding:          11px 28px;
	transition:       background-color 0.15s ease, box-shadow 0.15s ease;
}

.bt-modal-btn-primary {
	background:       #1a1a2e;
	color:            #ffffff;
}

.bt-modal-btn-primary:hover,
.bt-modal-btn-primary:focus {
	background:       #2e2e55;
	color:            #ffffff;
	box-shadow:       0 0 0 3px rgba(26, 26, 46, 0.25);
	outline:          none;
}

/* =========================================================================
   Responsive: smaller padding on narrow viewports
   ========================================================================= */

@media (max-width: 480px) {
	.bt-modal-box {
		padding: 24px 20px 20px;
	}

	.bt-modal-title {
		font-size: 18px;
	}
}