/*
Theme Name:   Mizain
Theme URI:    https://mizain.ae
Description:  Child theme of Sydney for the Mizain website.
Author:       Mizain
Template:     sydney
Version:      1.1.1
Text Domain:  mizain-child
*/

/* ------------------------------------------------------------------
   This file carries only what the gated demo page needs: the password
   gate. Every other rule lives in css/mizain-templates.css, which is
   loaded on Mizain page templates only.

   The gate runs before css/mizain-tokens.css is enqueued, so it uses
   var() with a literal fallback and never depends on the token sheet.
   ------------------------------------------------------------------ */

.mz-gate {
	min-height: 60vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px 20px;
	background: var(--mz-ink, #16121C);
}

.mz-gate__card {
	background: var(--mz-card, #FFFFFF);
	border: 1px solid var(--mz-border, #E4DEEA);
	border-radius: var(--mz-radius, 14px);
	padding: 40px 36px;
	max-width: 420px;
	width: 100%;
	text-align: center;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.mz-gate__card h1 {
	font-size: 26px;
	margin-bottom: 8px;
	color: var(--mz-plum-deep, #3B1E52);
}

.mz-gate__card p {
	color: var(--mz-muted, #5A5262);
	margin-bottom: 24px;
	font-size: 15px;
}

.mz-gate__card .post-password-form label {
	display: block;
	text-align: left;
	font-weight: 600;
	margin-bottom: 6px;
	color: var(--mz-body, #2A2430);
}

.mz-gate__card .post-password-form input[type="password"] {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	border: 2px solid var(--mz-border, #E4DEEA);
	border-radius: 10px;
	font-size: 16px;
	margin-bottom: 16px;
	background: #FFFFFF;
	color: var(--mz-body, #2A2430);
}

.mz-gate__card .post-password-form input[type="password"]:focus-visible {
	outline: 3px solid var(--mz-plum, #6B2F91);
	outline-offset: 2px;
	border-color: var(--mz-plum, #6B2F91);
}

.mz-gate__card .post-password-form input[type="submit"] {
	width: 100%;
	min-height: 48px;
	padding: 13px 16px;
	background: var(--mz-plum, #6B2F91);
	color: #FFFFFF;
	border: 2px solid transparent;
	border-radius: 10px;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}

.mz-gate__card .post-password-form input[type="submit"]:hover {
	background: var(--mz-plum-deep, #3B1E52);
}

.mz-gate__card .post-password-form input[type="submit"]:focus-visible {
	outline: 3px solid var(--mz-lilac, #C9A9E0);
	outline-offset: 2px;
}