/**
 * bt-comment-gate.css
 *
 * Modal styles for the BecomingTile Comment Gate plugin.
 * All selectors are scoped under #bt-cg-modal or .bt-cg-* to avoid
 * collisions with theme or other plugin styles.
 *
 * Intentionally matches the visual style of bt-access-control.css so both
 * modals feel cohesive if active at the same time.
 */

/* =========================================================================
   Modal container — flex overlay wrapper
   Hidden by default; JS sets display:flex to show.
   ========================================================================= */

#bt-cg-modal {
	display:         none;
	position:        fixed;
	inset:           0;          /* top/right/bottom/left: 0 */
	z-index:         999999;
	align-items:     center;
	justify-content: center;
	/* Establishes a stacking context containing the overlay and dialog box. */
}

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

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

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

.bt-cg-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:      36px 36px 28px;
	max-width:    460px;
	width:        calc( 100% - 32px );
	box-sizing:   border-box;
	text-align:   center;
}

/* =========================================================================
   Close × button (top-right corner)
   ========================================================================= */

.bt-cg-close {
	position:        absolute;
	top:             12px;
	right:           14px;
	background:      none;
	border:          none;
	padding:         4px 8px;
	cursor:          pointer;
	font-size:       22px;
	line-height:     1;
	color:           #888;
	border-radius:   4px;
	transition:      color 0.15s ease, background-color 0.15s ease;
}

.bt-cg-close:hover,
.bt-cg-close:focus {
	color:      #1a1a2e;
	background: rgba( 0, 0, 0, 0.07 );
	outline:    none;
}

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

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

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

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

/* =========================================================================
   Action row — two buttons side by side (stacks on narrow screens)
   ========================================================================= */

.bt-cg-actions {
	display:         flex;
	justify-content: center;
	gap:             10px;
	flex-wrap:       wrap;
}

/* =========================================================================
   Shared button base
   ========================================================================= */

.bt-cg-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,
	                 border-color 0.15s ease;
	white-space:     nowrap;
}

/* Primary button — "Log In" (dark, filled) */

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

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

/* Secondary button — "Close" (outlined, light) */

.bt-cg-btn-secondary {
	background:   transparent;
	color:        #555;
	border:       2px solid #ccc;
	padding:      9px 26px; /* 2px less to compensate for border */
}

.bt-cg-btn-secondary:hover,
.bt-cg-btn-secondary:focus {
	border-color: #999;
	color:        #1a1a2e;
	box-shadow:   0 0 0 3px rgba( 0, 0, 0, 0.08 );
	outline:      none;
}

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

@media ( max-width: 480px ) {

	.bt-cg-box {
		padding: 32px 20px 22px;
	}

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

	.bt-cg-btn {
		width: 100%;         /* stack buttons full-width on mobile */
		text-align: center;
	}
}