/**
 * Redesign of the header "Log In" / "Sign Up" popups (#login-dialog,
 * #signup-dialog in workscout/header.php) and the "Log In" / "Register"
 * trigger links that open them (.login-btn / .register-btn, same file).
 * Markup and behavior stay workscout-core's/workscout's - this file only
 * restyles it, scoped to .workscout-signup-popup (the class unique to
 * the two dialogs) and .login-btn/.register-btn so nothing else using
 * .small-dialog or plain header links elsewhere on the site is affected.
 *
 * Loaded after parent-style/child-style (see workscout_enqueue_styles()
 * in functions.php), so equal-specificity selectors here already win on
 * source order. A couple of parent rules use a .mfp-content ancestor and
 * need matching specificity - those are called out inline below.
 *
 * #26368d below is the site's actual existing brand navy (sampled from
 * the homepage's Elementor "Start Hiring Locally" CTA button), used here
 * instead of the .workscout-signup-popup modal's own #2c9cdb accent so
 * these header buttons stay visually consistent with the rest of the
 * site rather than introducing a third color.
 */

/* Modal shell */
.workscout-signup-popup.small-dialog {
	max-width: 440px;
	width: 92%;
	padding: 0;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid #eef0f3;
	box-shadow: 0 24px 60px -12px rgba(15, 23, 42, .35), 0 4px 16px rgba(15, 23, 42, .08);
}

/* Header band */
.workscout-signup-popup .small-dialog-headline {
	background: #f7f8fa;
	border-bottom: 1px solid #eceef1;
	padding: 22px 28px;
	border-radius: 0;
}

.workscout-signup-popup .small-dialog-headline h2 {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	color: #15181c;
}

/* Close button - scoped by ID since Magnific Popup nests it inside the
   dialog element itself (closeBtnInside), keeping other popups (apply,
   resume upload, etc.) untouched. */
#login-dialog .mfp-close,
#signup-dialog .mfp-close {
	top: 18px;
	right: 20px;
	border-radius: 8px;
	background: #1c1f23;
}

#login-dialog .mfp-close,
#signup-dialog .mfp-close {
	transition: background-color .15s ease, transform .1s ease;
}

#login-dialog .mfp-close:hover,
#signup-dialog .mfp-close:hover {
	background: #2c9cdb;
	transform: scale(1.06);
}

#login-dialog .mfp-close:active,
#signup-dialog .mfp-close:active {
	transform: scale(0.96);
}

/* The theme has a site-wide bug where .mfp-content .mfp-close:before
   {display:none} silently hides the FontAwesome "x" glyph on every
   inline popup (apply, resume upload, these dialogs, ...) - it falls
   back to an empty button with no visible icon at all. Re-enabled here,
   scoped to just these two dialogs rather than fixing it globally. */
#login-dialog .mfp-close:before,
#signup-dialog .mfp-close:before {
	display: block;
	content: "\f00d";
	font-family: "FontAwesome";
	font-size: 14px;
	line-height: 42px;
	text-align: center;
}

/* Body */
.workscout-signup-popup .small-dialog-content {
	padding: 28px;
}

/* Text/email/password fields. workscout_form's own markup wraps an <i>
   icon inside the label alongside the input - hidden below (per-request,
   plain fields with no icon), input padding brought back to a normal
   uniform 16px now nothing needs to sit to its left. */
.workscout-signup-popup .workscout_form label input {
	width: 100%;
	height: 48px;
	margin-top: 0;
	padding: 0 16px;
	background: #f5f6f8;
	border: 1px solid #eceef1;
	border-radius: 10px;
	font-size: 15px;
	color: #15181c;
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.workscout-signup-popup .workscout_form label input::placeholder {
	color: #9aa1ab;
}

.workscout-signup-popup .workscout_form label input:focus {
	outline: none;
	background: #fff;
	border-color: #2c9cdb;
	box-shadow: 0 0 0 3px rgba(44, 156, 219, .15);
}

/* Hidden without !important - the more specific (and !important)
   .account-type label i rule further below re-enables the Candidate/
   Employer icons specifically, so this only removes the input-field
   ones. */
.workscout-signup-popup .workscout_form label i {
	display: none;
}

/* Remember me */
.workscout-signup-popup .checkboxes {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 4px 0 18px;
}

.workscout-signup-popup .checkboxes input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: #2c9cdb;
	cursor: pointer;
}

.workscout-signup-popup .checkboxes label {
	margin: 0;
	font-size: 14px;
	color: #4b5563;
	cursor: pointer;
}

/* Submit button - the parent's margin-top rule is scoped with a
   .mfp-content ancestor, so this needs the same ancestor to win on
   specificity rather than just source order. */
.mfp-content .workscout-signup-popup input[type="submit"] {
	width: 100%;
	height: 48px;
	margin: 6px 0 18px;
	border: none;
	border-radius: 10px;
	background: #2c9cdb;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .2px;
	cursor: pointer;
	transition: background-color .15s ease;
}

.mfp-content .workscout-signup-popup input[type="submit"]:hover {
	background: #1c87c4;
}

/* Links */
.workscout-signup-popup .small-dialog-content a {
	color: #2c9cdb;
}

.workscout-signup-popup .small-dialog-content a:hover {
	color: #1c87c4;
}

/* Candidate / Employer toggle - recolored from the theme default green
   to the brand blue used everywhere else in this modal. */
.workscout-signup-popup .account-type input.account-type-radio ~ label:hover {
	color: #2c9cdb;
	background-color: rgba(44, 156, 219, .1);
}

.workscout-signup-popup .account-type input.account-type-radio:checked ~ label {
	color: #fff;
	background-color: #2c9cdb;
}

/* The theme's own <i class="sl sl-icon-user"> / "sl-icon-briefcase">
   icons depend on a simple-line-icons @font-face the theme references
   but never actually ships, normally papered over by a FontAwesome
   :before fallback - except Elementor's frontend.min.css also loads on
   this page (it has Elementor content) and resets every <i> tag's
   font-family/line-height site-wide, which clobbers that fallback too
   and was causing the icon to render oversized and overlap the label
   text. Rather than keep fighting that reset, the original icon is
   hidden and replaced with a small self-contained SVG (via mask, so its
   color still follows the existing hover/:checked color rules above)
   laid out as a flex sibling of the label text - icon and text can
   never overlap since flex items don't overlap by default, regardless
   of what any other stylesheet on the page does to font icons. */
.workscout-signup-popup .account-type label i {
	display: none !important;
}

.workscout-signup-popup .account-type input.account-type-radio:empty ~ label {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

/* .account-type already has its own label:before rule for a decorative
   ripple-overlay effect (position:absolute, width/height:100%, opacity:0)
   at higher specificity than a same-tier override here can beat, so it
   silently wins on every property it sets unless matched. !important on
   all of them (including ones just resetting it back to normal flow) is
   deliberate, not decorative - this fought that exact rule once already
   via specificity and lost. */
.workscout-signup-popup .account-type label:before {
	position: static !important;
	top: auto !important;
	bottom: auto !important;
	left: auto !important;
	opacity: 1 !important;
	z-index: auto !important;
	content: "" !important;
	flex: 0 0 auto !important;
	width: 16px !important;
	height: 16px !important;
	background-color: #888 !important;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: background-color .15s ease;
}

.workscout-signup-popup .account-type label[for="freelancer-radio"]:before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

.workscout-signup-popup .account-type label[for="employer-radio"]:before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2' ry='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2' ry='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E");
}

.workscout-signup-popup .account-type input.account-type-radio ~ label:hover:before {
	background-color: #2c9cdb !important;
}

.workscout-signup-popup .account-type input.account-type-radio:checked ~ label:before {
	background-color: #fff !important;
}

/* "or" divider + Google placeholder button (see functions.php -
   jobsfor_render_google_auth_button(), hooked onto the same
   workscout_login_form / workscout_registration_form actions
   workscout-core uses, so it always lands after the real form). */
.workscout-signup-popup .auth-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 4px 0 16px;
	color: #9aa1ab;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.workscout-signup-popup .auth-divider::before,
.workscout-signup-popup .auth-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #eceef1;
}

.workscout-signup-popup .auth-google-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 46px;
	border: 1px solid #dde1e6;
	border-radius: 10px;
	background: #fff;
	color: #1f2328;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}

.workscout-signup-popup .auth-google-btn:hover {
	background: #f7f8fa;
	border-color: #c9ced6;
}

.workscout-signup-popup .auth-google-btn svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.workscout-signup-popup .auth-google-note {
	display: none;
	margin-top: 10px;
	font-size: 12.5px;
	color: #8b95a1;
	text-align: center;
}

.workscout-signup-popup .auth-google-note.is-visible {
	display: block;
}

@media (max-width: 480px) {
	.workscout-signup-popup .small-dialog-headline {
		padding: 18px 20px;
	}

	.workscout-signup-popup .small-dialog-content {
		padding: 20px;
	}
}

/**
 * Header "Log In" / "Register" trigger links -> full pill buttons, icon
 * removed entirely. Kept as a separate rule per class (rather than one
 * shared .login-btn, .register-btn block) since they need different
 * colors, and matched against the .transparent-header variant too since
 * the base theme gives that variant its own color rule elsewhere.
 */
.login-register-buttons a.login-btn,
.login-register-buttons a.register-btn,
.transparent-header .login-register-buttons a.login-btn,
.transparent-header .login-register-buttons a.register-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 22px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.login-register-buttons a.login-btn i,
.login-register-buttons a.register-btn i {
	display: none;
}

.login-register-buttons a.login-btn,
.transparent-header .login-register-buttons a.login-btn {
	background: #fff;
	border: 1.5px solid #dde1e6;
	color: #15181c;
}

.login-register-buttons a.register-btn,
.transparent-header .login-register-buttons a.register-btn {
	background: #26368d;
	border: 1.5px solid #26368d;
	color: #fff;
}

/* Both buttons get the same obvious lighter-blue fill on hover (rather
   than login-btn only changing its border/text, or register-btn just
   darkening slightly, either of which reads as barely-there) - #2c9cdb
   is the accent already used in the .workscout-signup-popup modal these
   buttons open, so the hover state doubles as a preview of that. */
.login-register-buttons a.login-btn:hover,
.transparent-header .login-register-buttons a.login-btn:hover,
.login-register-buttons a.register-btn:hover,
.transparent-header .login-register-buttons a.register-btn:hover {
	background: #2c9cdb;
	border-color: #2c9cdb;
	color: #fff;
}

/* A fixed max-width breakpoint kept missing real cases - the theme's
   .header-widget container width doesn't map cleanly to viewport width
   (it shrinks at more than one point depending on the rest of the
   header), so 480px "fixed" 320px but not the 504px/622px range where
   it was breaking too. Flex-wrap with a gap sidesteps the guessing
   entirely: the two pills sit side by side whenever there's room and
   wrap onto their own line, with real spacing, the moment there isn't -
   correct at every width, not just the ones tested. */
.login-register-buttons {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 8px;
}

.login-register-buttons a.login-btn,
.login-register-buttons a.register-btn {
	margin: 0 !important;
}

@media (max-width: 360px) {
	.login-register-buttons a.login-btn,
	.login-register-buttons a.register-btn,
	.transparent-header .login-register-buttons a.login-btn,
	.transparent-header .login-register-buttons a.register-btn {
		padding: 9px 18px;
		font-size: 13px;
	}
}

/* Below 1099px the theme switches #navigation for .mmenu-trigger (the
   hamburger) - .right-side is position:absolute/width:auto and
   .mmenu-trigger is float:right + position:relative;top:15px, a layout
   model where the hamburger drops onto its own row the moment
   .header-widget's content needs more height than one line (exactly
   what happens once the Log In/Register pills wrap). Replaced with an
   actual flex row so the hamburger always stays beside the buttons
   instead of falling below them, regardless of how many lines the
   pills wrap onto. #header .right-side .header-widget already has
   flex:1 from the theme's own CSS (inert until now, since .right-side
   was never a flex container) - it picks up automatically and gives
   the pills the remaining space to align against. */
@media (max-width: 1099px) {
	#header .right-side {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
	}

	.mmenu-trigger {
		float: none !important;
		position: static !important;
		top: auto !important;
		flex: 0 0 auto;
	}
}

@media (max-width: 640px) {
	.new-header .header-widget {
		padding: 0 15px !important;
	}
}

@media (max-width: 600px) {
	.login-register-buttons a.login-btn,
	.login-register-buttons a.register-btn,
	.transparent-header .login-register-buttons a.login-btn,
	.transparent-header .login-register-buttons a.register-btn {
		font-size: 13px;
		font-weight: 400;
	}

	.new-header #header {
		height: auto !important;
	}

	.new-header #header-container {
		height: auto !important;
	}

	.new-header #header .container,
	.new-header #header .right-side,
	.new-header #header .left-side {
		height: auto;
	}

	.login-register-buttons {
		flex-direction: column;
	}

	#header .right-side .header-widget {
		padding-block: 12px !important;
	}
}