/* ============================================================================
   inJobAlerts — small design overrides for the microSaaS pages.
   Loaded AFTER style.css so these win. Keeps the Hireo template untouched.
   ========================================================================== */

/* --- Header: vertically center the Log In / Sign Up / Dashboard buttons ----
   .header-widget is height:100% but doesn't center its content, so plain
   buttons floated to the top. Center them next to the notification icons. */
#header-container [data-auth-nav],
#header-container .right-side .header-widget {
	display: inline-flex;
	align-items: center;
	height: 100%;
	border-left: 0;   /* kill the template's stray full-height divider line */
}
#header-container [data-auth-nav] .button,
#header-container .right-side .header-widget .button {
	line-height: 1.4;
	margin-top: 0;
	margin-bottom: 0;
}

/* --- Dashboard headline greeting -------------------------------------------
   ".dashboard-headline span" (subtitle style) also matched the inline name
   span inside the <h3>, breaking "Welcome back, master!" across 3 grey lines.
   Force the name to render as normal inline h3 text. */
.dashboard-headline h3 span[data-user-name] {
	display: inline;
	font-size: inherit;
	color: inherit;
	line-height: inherit;
	margin: 0;
}

/* --- Dashboard headline status badge ("My Alerts  0") ----------------------
   Same subtitle rule turned the small count badge into a full-width green bar.
   Restore it to a compact inline badge. */
.dashboard-headline h3 .dashboard-status-button {
	display: inline-block;
	width: auto;
	font-size: 14px;
	line-height: 21px;
	margin: 0 0 0 8px;
	vertical-align: middle;
}

/* --- Fun-fact "Renews / Ends" date: keep it readable, not oversized -------- */
.fun-fact-text h4[data-sub-ends] {
	font-size: 18px;
	line-height: 1.3;
}

/* ============================================================================
   Alert-creation popup polish  (scoped to #sign-in-dialog so nothing else is
   affected). Makes the "Confirm your settings" step, email field, buttons and
   result cards feel more finished within the Hireo look.
   ========================================================================== */

/* Roomier modal + clearer headings */
#sign-in-dialog .container { padding: 4px 12px 12px; }
#sign-in-dialog .section-headline h3 { font-size: 24px; font-weight: 600; }
#sign-in-dialog .section-headline h5 {
	font-size: 15px; font-weight: 600; color: #333; letter-spacing: .1px;
}

/* Frequency box -> soft highlighted card */
#sign-in-dialog .salary-box {
	background: #f3f6ff;
	border: 1px solid #e4ebff;
	border-radius: 10px;
	padding: 16px 22px;
	margin-top: 8px;
}
#sign-in-dialog .salary-box h3 { margin: 4px 0 0; font-size: 20px; }
#sign-in-dialog .salary-box mark.color { padding: 0 4px; }

/* Option toggles: a little breathing room + hover feedback */
#sign-in-dialog .switches-list { margin-top: 4px; }
#sign-in-dialog .switch-container {
	padding: 7px 8px;
	border-radius: 8px;
	transition: background .15s ease;
}
#sign-in-dialog .switch-container:hover { background: #f7f8fb; }

/* Remote radios: consistent spacing */
#sign-in-dialog .radio { margin-bottom: 6px; }

/* Email field: taller, full width, clear focus ring */
#sign-in-dialog .input-with-icon-left { margin-top: 2px; }
#sign-in-dialog .input-with-icon-left input {
	height: 54px;
	border-radius: 8px;
	font-size: 15px;
}
/* Match the left icon box to the taller input so it isn't left floating. */
#sign-in-dialog .input-with-icon-left i {
	height: 54px;
	line-height: 54px;
	border-radius: 8px 0 0 8px;
}
#sign-in-dialog .input-with-icon-left input:focus {
	border-color: #2a41e8;
	box-shadow: 0 0 0 2px rgba(42,65,232,.12);
}

/* Confirm button: prominent, full width of its column, centered label */
#sign-in-dialog .button-sliding-icon {
	width: 100%;
	text-align: center;
	justify-content: center;
	height: 54px;
	line-height: 54px;
	padding: 0 22px;
	font-size: 15px;
}

/* Final step: alert summary + result cards */
#sign-in-dialog .task-listing { border-radius: 10px; }
#sign-in-dialog .task-tags span {
	background: #eef1ff; color: #2a41e8; border: none;
}
#sign-in-dialog .job-listing { border-radius: 10px; transition: box-shadow .2s ease, transform .2s ease; }
#sign-in-dialog .job-listing:hover { box-shadow: 0 8px 24px rgba(0,0,0,.08); transform: translateY(-2px); }

/* Pricing modal cards inside the popup */
#sign-in-dialog .pricing-plan { border-radius: 12px; }
#sign-in-dialog .pricing-plan.recommended { box-shadow: 0 12px 30px rgba(42,65,232,.15); }

/* Progress ("Collecting the data") heading spacing */
#sign-in-dialog .blog-post-content h3.margin-bottom-0 { margin-bottom: 14px; }

/* ============================================================================
   Site-wide polish  (loaded after style.css, so these refine the Hireo theme).
   Subtle, cohesive: softer corners, gentle shadows, clearer focus, nicer hovers.
   Accent color: #2a41e8.
   ========================================================================== */

/* --- Buttons: softer corners + a gentle lift on hover --------------------- */
.button {
	border-radius: 8px;
	transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease, color .2s ease;
}
.button:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.button.border { border-radius: 8px; }

/* --- Inputs: consistent rounding + a clear focus ring --------------------- */
input.with-border, .with-border input, textarea.with-border, .input-text.with-border,
.input-with-icon-left input {
	border-radius: 8px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
input.with-border:focus, .input-text.with-border:focus, textarea.with-border:focus,
.input-with-icon-left input:focus {
	border-color: #2a41e8;
	box-shadow: 0 0 0 3px rgba(42,65,232,.12);
}

/* --- Notifications: rounder, softer -------------------------------------- */
.notification { border-radius: 10px; }

/* --- Login / Register: turn the form into a clean centered card ---------- */
.login-register-page {
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 14px;
	padding: 40px 36px;
	box-shadow: 0 14px 40px rgba(0,0,0,.06);
}
.login-register-page .welcome-text { margin-bottom: 26px; }
.social-login-buttons button { border-radius: 8px; }

/* --- Dashboard: refine boxes, fun-facts, list rows ----------------------- */
.dashboard-box {
	border-radius: 12px;
	border: 1px solid #ececec;
	box-shadow: 0 6px 20px rgba(0,0,0,.04);
}
.dashboard-box .headline { border-radius: 12px 12px 0 0; }

.fun-fact {
	border-radius: 12px;
	box-shadow: 0 6px 20px rgba(0,0,0,.05);
	transition: transform .15s ease, box-shadow .15s ease;
}
.fun-fact:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.09); }

/* Alert cards in the dashboard list */
.dashboard-content .task-listing {
	border-radius: 12px;
	border: 1px solid #ececec;
	box-shadow: 0 4px 14px rgba(0,0,0,.04);
	transition: box-shadow .18s ease, transform .18s ease;
	margin-bottom: 16px;
}
.dashboard-content .task-listing:hover { box-shadow: 0 10px 26px rgba(0,0,0,.08); transform: translateY(-2px); }

/* The Hireo template reserves a fixed 240px grey "bid" column (meant for a job
   price) on the right of each listing. Our alert cards only carry a couple of
   action buttons there, which left a big empty grey block. Let that column
   shrink to its buttons and drop the grey panel. */
#alerts-list .task-listing-bid {
	flex: 0 0 auto;
	background: transparent;
}
#alerts-list .task-listing-bid-inner {
	width: auto;
	padding: 16px 18px;
	white-space: nowrap;
}
#alerts-list .task-listing-bid-inner .button {
	display: inline-block;
	width: auto;
	box-shadow: none;
}

/* Status badges: pill shape */
.dashboard-status-button { border-radius: 999px; padding: 3px 12px; font-weight: 600; }

/* Sidebar active item: accent bar for clarity */
.dashboard-nav ul li a.active,
.dashboard-nav ul li.active > a { font-weight: 600; }

/* Dashboard: the fun-facts row uses margin-bottom:-30px, which leaves the
   "Your Job Alerts" box directly touching it. Add breathing room. */
.dashboard-content-inner .fun-facts-container + .row { margin-top: 34px; }

/* Billing & Plan: the template's pricing plans expect the flex
   .pricing-plans-container wrapper. Keep them a sensible width (not stretched
   across the whole dashboard) and centered, and make sure the "Best Value"
   badge (which sits -45px above the card) clears the notice above it. */
.dashboard-content-inner .pricing-plans-container {
	max-width: 820px;
	margin-left: auto;
	margin-right: auto;
}

/* --- Titlebar gradient: a touch richer ----------------------------------- */
#titlebar.gradient {
	background: linear-gradient(60deg, #2a41e8 0%, #4d5ff0 100%);
}
/* The template assumes a light titlebar, so it never sets a heading colour.
   On our blue gradient the default dark text is unreadable — force white. */
#titlebar.gradient h1,
#titlebar.gradient h2 { color: #fff; }
#titlebar.gradient > .container > .row > div > span,
#titlebar.gradient span { color: rgba(255,255,255,.85); }

/* --- Pricing plans: rounder cards, clearer "recommended" ------------------ */
.pricing-plan {
	border-radius: 14px;
	transition: transform .18s ease, box-shadow .18s ease;
}
.pricing-plan:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,.08); }
.pricing-plan.recommended { box-shadow: 0 18px 44px rgba(42,65,232,.16); }
.recommended-badge { border-radius: 0 14px 0 14px; }

/* --- Homepage hero: crisper headline + standout search --------------------- */
.intro-banner .banner-headline h1 { letter-spacing: -.3px; }
.intro-banner .banner-headline h1,
.intro-banner .banner-headline h2 { text-shadow: 0 2px 12px rgba(0,0,0,.28); }

/* Hero search inputs: white, rounded, subtle shadow */
.intro-banner .keyword-input,
.intro-banner .keyword-input-container input {
	border-radius: 8px;
}
.intro-banner .keyword-input-container {
	box-shadow: 0 6px 20px rgba(0,0,0,.10);
	border-radius: 10px;
}
.intro-banner .keyword-input-button { border-radius: 0 10px 10px 0; }

/* The main "Create Alert" call-to-action on the hero */
.intro-banner .open-modal {
	height: 54px; line-height: 54px; padding: 0 26px !important;
	font-size: 15px; box-shadow: 0 8px 24px rgba(42,65,232,.28);
}

/* --- Footer: a hair more polish ------------------------------------------ */
.footer-social-links li a { border-radius: 8px; transition: transform .15s ease; }
.footer-social-links li a:hover { transform: translateY(-2px); }

/* ============================================================================
   Mobile polish (homepage header + footer)
   ========================================================================== */

/* My header-widget centering rule (top of this file) has higher specificity
   than the template's `.hide-on-mobile`, so it was forcing the desktop
   Log In / Sign Up widget to show on phones. Re-hide it on small screens. */
@media (max-width: 480px) {
	#header-container .right-side .header-widget.hide-on-mobile { display: none !important; }
}

/* Log In / Sign Up live in the slide-out mobile menu (mmenu clones #navigation).
   Hide them from the DESKTOP horizontal nav — the clone has no #navigation
   ancestor, so it still shows them inside the mobile menu. */
#navigation li.only-mobile-nav { display: none; }

/* Footer top: on phones, stack + center the logo and social icons neatly
   instead of leaving them floated hard-left. */
@media (max-width: 767px) {
	.footer-top-section .footer-rows-container,
	.footer-top-section .footer-rows-left,
	.footer-top-section .footer-rows-right { text-align: center; }
	.footer-top-section .footer-logo img { display: inline-block; }
	.footer-top-section .footer-social-links { display: inline-flex; float: none; gap: 6px; }
	.footer-top-section .footer-social-links li { float: none; }
}