/*
 * Base: pagination, form fields, notice boxes.
 */

/*
 * Brand colour: light green #c8d212 (rgb 200 210 18). Too light for white text and for text on white
 * (contrast 1.7:1), so surfaces get dark text and text/icons on white use a dark olive of the same hue.
 */
:root {
	--kr-accent: #c8d212;             /* buttons, badges, active states (with --kr-on-accent text) */
	--kr-accent-hover: #b3bc0e;
	--kr-on-accent: #1f2328;          /* text/icons on --kr-accent, contrast 9.6:1 */
	--kr-accent-text: #5f6600;        /* links, text and icons on white, contrast 6.2:1 */
	--kr-accent-text-hover: #474d00;
	--kr-accent-text-strong: #3d4200; /* text on the soft tints */
	--kr-accent-soft: #f5f7dc;        /* light backgrounds (tags, soft buttons) */
	--kr-accent-soft-hover: #eaeeb4;
	--kr-accent-focus: #dfe57a;       /* focus rings */
}

/*
 * Listify colours these with the Customizer "Primary" colour (#c8d212) - as a surface with white text
 * or as text on white. Both are unreadable with the light green: dark text on the surfaces (also on
 * hover/focus, where Listify and Luminex switch to white), the olive for text. Selectors from Listify's
 * customizer CSS (listify-inline-css), only those used here; "body.luminex" outranks their rules.
 */
body.luminex input[type="button"],
body.luminex input[type="button"]:hover,
body.luminex input[type="button"]:focus,
body.luminex input[type="reset"],
body.luminex input[type="reset"]:hover,
body.luminex input[type="reset"]:focus,
body.luminex input[type="submit"],
body.luminex input[type="submit"]:hover,
body.luminex input[type="submit"]:focus,
body.luminex .button,
body.luminex .button:hover,
body.luminex .button:focus,
body.luminex .load_more_jobs,
body.luminex .load_more_jobs:hover,
body.luminex .load_more_jobs:focus,
body.luminex .load_more_jobs strong,
body.luminex .listify-badge,
body.luminex .listify-badge:hover,
body.luminex .listify-badge:focus,
body.luminex .listing-featured-badge,
body.luminex .listing-featured-badge:hover,
body.luminex .listing-featured-badge:focus,
body.luminex .listing-owner,
body.luminex .listing-owner:hover,
body.luminex .listing-owner:focus,
body.luminex .comment-rating,
body.luminex .comment-rating:hover,
body.luminex .comment-rating:focus,
body.luminex .job_listing-rating-average,
body.luminex .job_listing-rating-average:hover,
body.luminex .job_listing-rating-average:focus,
body.luminex .cluster,
body.luminex .cluster:hover,
body.luminex .cluster:focus,
body.luminex .job_listing-recently_viewed_badge.active h4,
body.luminex button.update_results,
body.luminex button.update_results:hover,
body.luminex button.update_results:focus,
body.luminex button.update_results_override,
body.luminex button.update_results_override:hover,
body.luminex button.update_results_override:focus,
body.luminex .select2-container.select2-container--default .select2-results__option--highlighted[aria-selected],
body.luminex .listify_widget_recent_posts .blog-archive .entry-footer a,
body.luminex .listify_widget_recent_posts .blog-archive .entry-footer a:hover,
body.luminex .listify_widget_recent_posts .blog-archive .entry-footer a:focus,
body.luminex .comment_main_content a.comment-reply-link,
body.luminex .comment_main_content a.comment-reply-link:hover,
body.luminex .comment_main_content a.comment-reply-link:focus,
body.luminex .comment_main_content a.comment-edit-link,
body.luminex .comment_main_content a.comment-edit-link:hover,
body.luminex .comment_main_content a.comment-edit-link:focus,
body.luminex .comment_main_content a.comment-edit-link span,
body.luminex .button-secondary,
body.luminex .button-secondary:hover,
body.luminex .button-secondary:focus,
body.luminex .listify_widget_panel_listing_business_hours h2.widget-title,
body.luminex .job-manager-form p input.button,
body.luminex .job-manager-form p input.button:hover,
body.luminex .job-manager-form p input.button:focus {
	color: var(--kr-on-accent);
}

/* Luminex forces white on the comment links (!important). */
body.luminex .comment_main_content a.comment-reply-link,
body.luminex .comment_main_content a.comment-edit-link {
	color: var(--kr-on-accent) !important;
}

/* Secondary buttons hover in the Customizer "Accent" colour (black) - with dark text use the darker green. */
body.luminex .button-secondary:hover,
body.luminex .button-secondary:focus {
	background-color: var(--kr-accent-hover);
}

.listify_widget_panel_listing_tags .tag.active:before,
.woocommerce-tabs .tabs .active a,
body:not(.facetwp) .locate-me:before,
body:not(.facetwp) .locate-me:hover:before,
.tabbed-listings-tabs a:hover,
.tabbed-listings-tabs a.active,
.archive-job_listing-toggle.active,
.luminex .hero_content h2 span,
.luminex .about-more-section .accordian_top_title h1,
.luminex .main-heading-content .home-widget-title,
.luminex ul.how-it-work-list li.list-item::before,
.luminex .listify_widget_recent_posts .home-widget-section-title h2,
.luminex .recently-viewed-jobs .sub_title h4,
.luminex .popular-listing-section .popular_listing_content h4,
.luminex .listify_widget_tabbed_listings .home-widget-description,
.luminex .listify_widget_taxonomy_image_grid .home-widget-description,
.luminex .nav-menu .menu li:hover a,
.luminex .woocommerce-pagination li:hover a,
.luminex .woocommerce-pagination li:hover span,
.luminex .job-manager-pagination li:hover a,
.luminex .job-manager-pagination li:hover span,
.luminex #listify-login-popup h2,
.luminex .luminex_login_form h2,
.luminex.woocommerce-account .content-box-inner .woocommerce h2,
.luminex .popup .content-box-wrapper .content-box-inner .woocommerce h2 {
	color: var(--kr-accent-text);
}

/*
 * Pagination arrows: Luminex uses Font Awesome 6, which it never loads.
 * Use Ionicons (loaded by Listify) instead.
 */
.woocommerce-pagination ul li:first-child a:before,
.woocommerce-pagination ul li:last-child a:before,
.job-manager-pagination ul li:first-child a:before,
.job-manager-pagination ul li:last-child a:before,
.content-pagination .prev:before,
.content-pagination .next:before {
	font-family: Ionicons;
	font-weight: normal;
	font-size: 18px;
}

.woocommerce-pagination ul li:first-child a:before,
.job-manager-pagination ul li:first-child a:before,
.content-pagination .prev:before {
	content: "\f3cf"; /* ion-ios-arrow-back */
}

.woocommerce-pagination ul li:last-child a:before,
.job-manager-pagination ul li:last-child a:before,
.content-pagination .next:before {
	content: "\f3d1"; /* ion-ios-arrow-forward */
}

/*
 * News pagination (WordPress page numbers, .content-pagination): the same boxes as the listing cards
 * (.job-manager-pagination, styled by Luminex), arrows instead of "« Zurück" / "Weiter »".
 */
.content-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	row-gap: 8px;
}

.content-pagination .page-numbers {
	display: block;
	width: 42px;
	height: 42px;
	margin: 0 8px 0 0;
	padding: 0;
	border: 1px solid #e8e8e8;
	border-radius: 4px;
	background: #fff;
	box-shadow: none;
	color: #0a0a0a;
	font-size: 15px;
	font-weight: 500;
	line-height: 40px;
	text-align: center;
	text-decoration: none;
	transition: 0.3s;
}

.content-pagination a.page-numbers:hover,
.content-pagination a.page-numbers:focus {
	border-color: var(--kr-accent-soft-hover);
	background-color: var(--kr-accent-soft-hover);
	color: #0a0a0a;
}

.content-pagination .prev,
.content-pagination .next {
	font-size: 0;
}

/* Current page: filled in the brand colour (listing cards and news; Luminex showed it like the others). */
.job-manager-pagination li span.current,
.job-manager-pagination li:hover span.current,
.woocommerce-pagination li span.current,
.woocommerce-pagination li:hover span.current,
.content-pagination .page-numbers.current {
	border-color: var(--kr-accent);
	background-color: var(--kr-accent);
	color: var(--kr-on-accent);
}

/*
 * Forms: typed text dark, placeholders grey. Luminex gave inputs and their placeholders the same grey,
 * and the Customizer colors textarea placeholders with the (black) accent color.
 */
.luminex .job-manager-form input,
.luminex .job-manager-form textarea,
.luminex .comment-form textarea {
	color: #000;
}

.luminex .job-manager-form input::placeholder,
.luminex .job-manager-form textarea::placeholder,
.luminex .comment-form textarea::placeholder {
	color: #909090;
	opacity: 1;
}

/*
 * Notice boxes: one style for all plugins
 * - WP Job Manager (submit form, dashboard):  .job-manager-info / -message / -error
 * - WooCommerce (account, login, register):   .woocommerce-info / -message / -error (a <ul>, one <li> per error)
 * - Contact Form 7:                           .wpcf7-response-output (state as class on the form)
 * - Merkliste (saved listings page):          .kr-notice / --success / --error
 * Each variant only sets the colour variables; "body" beats Listify's, WPJM's and the plugins' own rules.
 */
body .job-manager-info,
body .job-manager-message,
body .job-manager-error,
body .woocommerce-info,
body .woocommerce-message,
body .woocommerce-error,
body .wpcf7 form .wpcf7-response-output,
body .kr-notice {
	--kr-notice-bg: #eff6ff;
	--kr-notice-border: #c7dcf7;
	--kr-notice-text: #1e3a5f;
	--kr-notice-icon: #2563eb;
	--kr-notice-glyph: "\f149"; /* ion-information-circled */
	position: relative;
	display: block;
	box-sizing: border-box;
	width: auto;
	margin: 0 0 20px;
	padding: 14px 18px 14px 50px;
	border: 1px solid var(--kr-notice-border);
	border-radius: 12px;
	background: var(--kr-notice-bg);
	box-shadow: none;
	color: var(--kr-notice-text);
	font-size: 15px;
	line-height: 1.5;
	text-align: left;
	text-shadow: none;
	list-style: none;
}

body .job-manager-info::before,
body .job-manager-message::before,
body .job-manager-error::before,
body .woocommerce-info::before,
body .woocommerce-message::before,
body .woocommerce-error::before,
body .wpcf7 form .wpcf7-response-output::before,
body .kr-notice::before {
	content: var(--kr-notice-glyph);
	position: absolute;
	top: 13px;
	left: 17px;
	display: block;
	margin: 0;
	color: var(--kr-notice-icon);
	font-family: Ionicons;
	font-size: 22px;
	font-style: normal;
	font-weight: 400;
	line-height: 1;
}

/* Success */
body .job-manager-message,
body .woocommerce-message,
body .wpcf7 form.sent .wpcf7-response-output,
body .kr-notice--success {
	--kr-notice-bg: var(--kr-accent-soft);
	--kr-notice-border: var(--kr-accent-soft-hover);
	--kr-notice-text: var(--kr-accent-text-strong);
	--kr-notice-icon: var(--kr-accent-text);
	--kr-notice-glyph: "\f120"; /* ion-checkmark-circled */
}

/* Error */
body .job-manager-error,
body .woocommerce-error,
body .wpcf7 form.failed .wpcf7-response-output,
body .wpcf7 form.aborted .wpcf7-response-output,
body .kr-notice--error {
	--kr-notice-bg: #fef3f2;
	--kr-notice-border: #f6c7c3;
	--kr-notice-text: #7a1f17;
	--kr-notice-icon: #b42318;
	--kr-notice-glyph: "\f100"; /* ion-alert-circled */
}

/* Warning: missing/invalid fields, spam suspicion (Contact Form 7) */
body .wpcf7 form.invalid .wpcf7-response-output,
body .wpcf7 form.unaccepted .wpcf7-response-output,
body .wpcf7 form.payment-required .wpcf7-response-output,
body .wpcf7 form.spam .wpcf7-response-output {
	--kr-notice-bg: #fffaeb;
	--kr-notice-border: #f5dc9a;
	--kr-notice-text: #6b4a00;
	--kr-notice-icon: #b54708;
	--kr-notice-glyph: "\f35b"; /* ion-android-alert */
}

/* Contact Form 7: the box sits below the submit button */
body .wpcf7 form .wpcf7-response-output {
	margin-top: 20px;
}

/* Contact Form 7 hides the box until something happened */
body .wpcf7 form.init .wpcf7-response-output,
body .wpcf7 form.resetting .wpcf7-response-output,
body .wpcf7 form.submitting .wpcf7-response-output {
	display: none;
}

/* WooCommerce lists errors as <li>; Listify turned every <li> into its own box. */
body .woocommerce-error li,
body .job-manager-error li,
body .job-manager-message li,
body .job-manager-info li {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	list-style: none;
}

body .woocommerce-error li + li,
body .job-manager-error li + li {
	margin-top: 4px;
}

/* Links inside a notice: same colour as the text, underlined */
body .job-manager-info a:not(.button),
body .job-manager-message a:not(.button),
body .job-manager-error a:not(.button),
body .woocommerce-info a:not(.button),
body .woocommerce-message a:not(.button),
body .woocommerce-error a:not(.button),
body .kr-notice a {
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
}
}