/*
 * mlsimport-admin.css
 * ---------------------------------------------------------------------------
 * Main admin stylesheet for the MLSImport plugin. Styles the wp-admin screens:
 * the import-task metaboxes, plugin settings/tools UI, field-mapping fieldsets,
 * progress bars and log viewer, the 2025 card/tab layout, custom form controls
 * (switches, styled checkboxes, pill buttons), the deactivation exit-survey
 * modal, and the activity-log / import-history banners.
 * Also carries a few per-theme admin tweaks (WpResidence, WpEstate, Houzez,
 * Real Homes) grouped under their own section headers below.
 * CSS custom properties (design tokens) live in the :root block.
 * Shared account notices use the same amber panel and large heading for every
 * login failure, with a high-contrast plans button when a subscription is needed.
 */

/* Base styling */
/* Design tokens: "Sunny Bento" palette shared with the mlsimport.com portal —
   warm near-black primary, orange accent, cream/warm-grey surfaces, pastel
   status colours (mint/butter/soft-red), soft shadows and rounded radii. */
:root {
    --primary-color: #1c1917;
    --primary-hover: #33302b;
    --accent-color: #e85d3c;
    --accent-soft: #fde4d8;
    --success-color: #2faa6a;
    --success-soft: #b8e6cc;
    --success-deep: #1c5c3a;
    --error-color: #c02617;
    --error-soft: #fbe6e3;
    --error-hover: #9a1e12;
    --warning-color: #dd9211;
    --warning-soft: #fae39a;
    --warning-deep: #7a5410;
    --text-primary: #1c1917;
    --text-secondary: #6b6358;
    --text-light: #9a9285;
    --border-color: rgba(28,25,23,0.12);
    --background-light: #faf8f3;
    --background-soft: #f3efe7;
    --background-white: #FFFFFF;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --border-radius: 10px;
    --radius-card: 18px;
    --radius-pill: 999px;
    --transition-speed: 0.2s;
}

/* Cream page canvas on the plugin's own admin screens only (menu/submenu pages
   whose body class contains "_page_mlsimport", plus the Import Tasks CPT list).
   Other wp-admin screens keep the core grey background. */
body.wp-admin[class*="_page_mlsimport"],
body.wp-admin.post-type-mlsimport_item {
    background: var(--background-light);
}




/*Real Homes admin adjusments*/

/* Constrain the thumbnail column image on the Real Homes property list table. */
.post-type-property  .column-property-thumbnail img{
	width: 130px;
	height: auto;
}



/*Plugin CSS*/







/* Field-mapping row title. */
.mlsfield_import_title {
    margin: 0px 0px 10px 0px;
    font-size: 15px;
}

.mandatory_fields_wrapper_exp,
.mls_mandatory_fields{
	margin: 10px 0px 5px 0px;
}

.mls_mandatory_fields{
	color: #6b6358;
	margin-bottom: 10px;
	max-width: 600px;
}
.mandatory_fields_wrapper_exp{
	color: #6b6358;
	max-width: 600px;
}

/* Form field label (note: overridden later by the 2025 .mlsimport-label rule). */
.mlsimport-label{
	font-weight: 600;
	display: inline-block;
	float: left;
	width: 100%;
	line-height: 1.6em;
	font-size: 14px;
}

/* Helper / explanation text under fields. */
.mls_explanations{
	line-height: 1.6em;
}

.mlsimport-fieldset.mlsfield_map_post_meta,
.mlsimport-fieldset.mlsfield_label{
    margin: 0px;
}

.mlsimport-fieldset select.mlsfield_map_post_tax_select{
    max-width: 200px;
    min-width: 200px;
    padding: 0px 12px
}

input.mlsimport_select_import_all,
input.mlsimport_select_import_admin_all{
	margin-top: 5px;
}

.mlsimport-exp{
	margin: 0px;
	font-size: 14px;
	line-height: 1.6em;
	margin-bottom: 5px;
	max-width: 450px;
}


.mlsimport_hidden_field_button{

}

.mlsimport-input-wrapper{
	clear: both;
}


#mlsimport_mls_name_front{
	border-color: rgba(28,25,23,0.18);
	min-width: 450px;
	padding: 5px 12px;
}




/* Styled dropdown used in field mapping/settings: bordered, rounded, subtle shadow. */
.wp-admin select.mlsimport-select{
    max-width: 450px;
    padding: 5px 12px;
    width: 100%;
    box-sizing: border-box;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    isolation: isolate;
    border: 1px solid rgba(28,25,23,0.18);
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    flex: none;
    align-self: stretch;
}
.wp-admin select.mlsimport-select option{
	padding: 3px 0px;
}

/* Grey rounded panel wrapping a group of import parameters. */
.mlsimport_param_wrapper{
	background-color: #f3efe7;
	padding:20px;
	border-radius: 14px;
}

.postbox .inside .mlsimport_param_wrapper  h2{
	font-size: 20px!important;
	font-weight: 600;
	padding-left: 0px!important;
	padding-bottom: 19px!important;
}


/* Field-mapping layout: each item is a vertical column; wrapper lays items in a
   horizontal flex row with spacing. */
.mlsimport-fieldset-item{
	display: flex;
    flex-direction: column;
}
.mlsimport-fieldset-wrapper{
	display: flex;
	gap:30px;
}

.mlsimport-fieldset{
	margin: 20px 0px;
    position: relative;   
}

.mandatory_fields_wrapper fieldset.mlsimport-fieldset{
	padding: 10px 20px;
	margin: 0px;
}

/* Zebra-stripe alternating fieldsets in the mandatory-fields list. */
.mandatory_fields_wrapper .mlsimport-fieldset:nth-child(even){
	background-color: #f3efe7;
}

.mlsimport_auto_switch{
	margin: 0px;
	padding: 10px;
}

/* "Select all" pill button (pink); darker on hover. */
.mls_import_selec_all_class {
	background-color: var(--primary-color);
	color: #fff;
	display: inline-block;
	padding: 5px;
	margin-right: 10px;
	margin-bottom: 5px;
	cursor: pointer;
	padding: 7px 14px;
	border-radius: var(--radius-pill);
}

.mls_import_selec_all_class:hover {
	background-color: #33302b;
}

/* ===== Import progress bar + transfer controls + live log ===== */

/* Outer progress wrapper (this selector is declared again below). */
#mlsimport_myProgress_wrapper{
	width:800px;
	margin-top: 10px;
/*    display:none;*/
}

/* "Stop transfer" button (red); note a later rule overrides display to none. */
#mlsimport_transfer_stop{
	padding: 7px 16px;
	background: #c02617;
	color: #fff;
	border-radius: var(--radius-pill);
	display: inline-block;
	margin-top: 10px;
	cursor: pointer;
}

/* Progress fill bar — width is animated from 0% via JS as items import. */
#mlsimport_myBar{
	width: 0%;
	height: 20px;
	background-color: #e85d3c;
}

#mlsimport_myProgress_wrapper{
	width:800px;
	margin-top: 10px;
/*    display:none;*/
}

/* Track background for the "monster" (full-width) progress bar. */
#mlsimport_monster_myProgress {
	width: 100%;
	background-color: #efe7dc;
}
/* Hide the stop button by default (JS shows it while a transfer runs). */
#mlsimport_transfer_stop{
	display: none;
}

/* Scrollable live import log panel. */
#log_container{
	width: 750px;
	background: #f3efe7;
	border-radius: var(--border-radius);
	padding: 15px;
	margin-top: 15px;
	max-height: 500px;
	overflow-y: auto;
}


.mlsimport_import_no{
	font-size: 14px;
	max-width: 775px;
	margin-bottom: 10px;
}

#mlsimport_stop_item,
#mlsimport-start_item{
    display: inline-block;
    margin: 0px 10px 30px 0px;
    line-height: normal;
}

.mlsimport_hidden_field_button {
	max-width: 450px;
}
.mlsimport_param_wrapper input{
	max-width: 450px;
}

.cron_job_explainin{
	max-width: 800px;
	margin-top: 5px;
}

/* Tools-tab blocks are defined at the end of this file, so they win ties
   against the later 2025 overrides. */











/*==WpResidence*/
/* Cap uploaded property thumbnail preview size (selector name is misspelled
   "thumb_wrapepr" to match the markup). */
#property_uploaded_thumb_wrapepr img{
	max-width: 200px;
	max-height: 200px;
}

table.media .column-title .media-icon img {
	width:60px;
}
/* Admin message banners (notification / validated / warning). Base is a pink
   box; individual variants below re-colour it. */
.mlsimport_notification,
.mlsimport_validated,
.mlsimport_warning{
	background: var(--error-soft);
	color: var(--error-color);
	padding: 12px 16px;
	margin-bottom: 10px;
	border-radius: var(--border-radius);
}


/* Account login failures share one full-width notice and typography.
   The two-class selector wins over each screen's ordinary warning styles. */
.mlsimport_warning.mlsimport-account-notice {
	box-sizing: border-box;
	width: 100%;
	margin: 20px 0;
	padding: 24px;
	border: 1px solid #d97706;
	border-left: 6px solid #b45309;
	border-radius: 12px;
	background: #fff4d6;
	color: #451a03;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
}

.mlsimport-account-notice .mlsimport-account-notice-title {
	display: block;
	margin: 0 0 8px;
	color: #451a03;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
}

.mlsimport_warning.mlsimport-account-notice p {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
}

/* A dedicated button class keeps both admin surfaces visually consistent. */
.mlsimport-account-subscription a.mlsimport-account-subscription-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 44px;
	margin-top: 16px;
	padding: 10px 22px;
	border: 2px solid #1c1917;
	border-radius: 8px;
	background: #1c1917;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
}

.mlsimport-account-subscription a.mlsimport-account-subscription-action:hover {
	background: #44403c;
	border-color: #44403c;
	color: #fff;
}

.mlsimport-account-subscription a.mlsimport-account-subscription-action:focus-visible {
	outline: 3px solid #92400e;
	outline-offset: 3px;
}

/* Indigo "populate" info banner. */
.mlsimport_populate_warning{
	background: var(--primary-color);
	color: #fff;
	padding: 12px 16px;
	margin-bottom: 10px;
	border-radius: var(--border-radius);
}


/* "Validated" variant: amber-tinted background with a warning left border. */
.mlsimport_validated{
	padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border-radius: var(--border-radius);
    background-color: rgba(250, 227, 154, 0.4);
    border-left: 4px solid var(--warning-color);
    color: var(--text-primary);
}


.mlsimport_notification{
	background: var(--warning-soft);
	color: var(--warning-deep);
}


#mlsimport_item_metaboxes-sectionid .mlsimport_notification{
	background: var(--warning-soft);
	color: var(--warning-deep);
	max-width: 500px;
}


/* Scrollable status/output box inside the import-task metabox. */
#mlsimport_item_status{
	width: auto;
	background-color: #f3efe7;
	overflow-y: scroll;
	padding: 10px;
	border-radius: var(--border-radius);
	margin-bottom: 15px;
}


/* ===== iOS-style on/off toggle switch =====
   Absolutely positioned track; the real checkbox is hidden and a .slider
   pseudo-element renders the knob, translated on :checked. */
label.mlsimport_switch {
	position: absolute;
	display: inline-block;
	width: 53px!important;
	height: 25px;
	top: 7px;
	left: 205px;
}

.mlsimport_switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(28,25,23,0.18);
	-webkit-transition: .4s;
	transition: .4s;
}

.slider:before {
	position: absolute;
	content: "";
	height: 18px;
	width: 18px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}

/* Checked state: blue track, and the knob slides right (translateX below). */
.mlsimport_switch  input:checked + .slider {
	background-color: #e85d3c;
}

.mlsimport_switch  input:focus + .slider {
	box-shadow: 0 0 1px #e85d3c;
}

.mlsimport_switch  input:checked + .slider:before {
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
}




/* Rounded (pill) variant of the toggle track and knob. */
.slider.round {
	border-radius: 25px;
}
.slider.round:before {
	border-radius: 50%;
}


#mlsimport-delete-notification{
	margin-bottom: 10px;
}

#mlsimport-delete-prop{
	margin-top: 15px;
}

/* Provider-specific credential fieldsets are shown/hidden per selected MLS by
   PHP at render time (inline display:none in the credentials partials) and by
   mlsimport_token_on_load() on in-page MLS changes. No CSS default-hide here:
   a stylesheet rule would fight the server-rendered visibility. */




.mlsimport_param_wrapper input[type=text]{
	min-width: 450px;
	border-color: rgba(28,25,23,0.18);
	padding: 5px 12px;
}

#mlsimport_item_min_price,
#mlsimport_item_max_price{
	min-width: 210px;
	max-width: 210px;
}


/* Sign-up / account CTA box shown when no account is connected. */
.mlsimport_signup{
	display: inline-block;
	background-color: #f3efe7;
	border-radius: 14px;
	padding: 20px;
	font-size: 15px;
	margin-bottom: 15px;
}
.mlsimport_signup p{
	font-size: 15px;
}
.mlsimport_signup_button{
	float:left;
	clear:left;
}


/*==WpEstate*/

/*==Houzez*/

/* Houzez property list thumbnail column sizing. */
.column-thumbnail img {
	max-width: 100%;
	height: auto;
	min-width:
	102px ;
}

/*==RealHomes*/



/*==2025*/
/* 2025 redesign: tabbed card UI. Tab panels are hidden by default and shown
   when the active class is applied by the tab JS. */

/* Tab content panel — hidden until activated. */
.content-nav-tab{
	display:none;
	padding: 30px 15px;
	background: #fff;
	border: 1px solid rgba(28,25,23,0.18);
	border-top: 0px;
}

/* Active tab panel becomes a visible flex container. */
.content-nav-tab-active{
	display: flex;
}


.content-nav-tab.mlsimport_2025_card{
	width: auto;
}

/* White rounded card with layered shadow (2025 card container). */
.mlsimport_2025_card{
	flex-direction: column;
	align-items: center;
	padding: 0px;

	background: #FFFFFF;
	box-shadow: 0px 0px 0px 1px rgba(28, 25, 23, 0.05), 0px 5px 22px rgba(28, 25, 23, 0.05);
	border-radius: var(--radius-card);
	flex: none;
	order: 0;
	flex-grow: 1;

}

.mlsimport_2025_card_left_oriented{
	flex-direction: column;
    align-content: flex-start;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 30px;
}


/* Tab strip container (overrides WP core nav-tab-wrapper border). */
.nav-tab-wrapper.mlsimport-tab-wrapper{
	border: none;
	padding: 0px 15px;
	margin-top: 50px;
}


.nav-tab-wrapper.mlsimport-tab-wrapper .nav-tab {

    text-transform: uppercase;
    color: var(--text-secondary);
    padding: 15px 25px;
    background: #f3efe7;
    border-top-right-radius: 12px;
    border-top-left-radius: 12px;

    padding: 15px 30px;
    background: #fff;
    border: 1px solid var(--border-color);
    font-weight: 500;
    letter-spacing: 0.04em;
    transition: color var(--transition-speed), background var(--transition-speed);
}

.nav-tab-wrapper.mlsimport-tab-wrapper .nav-tab:hover {
    color: var(--text-primary);
    background: var(--background-soft);
}

/* Active tab: warm near-black background, white text (portal "seg" pattern). */
.nav-tab-wrapper.mlsimport-tab-wrapper .nav-tab.nav-tab-active{
    background-color: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
    font-weight: 600;
}

.content-nav-tab.mlsimport_2025_card form{
	max-width: 500px;
}

.mlsimport_2025_card_admin_options  {
    display: flex;
    flex-direction: row;
}

.mlsimport_2025_card_admin_options:empty{
	display: none;
}
/* ===== Numbered "steps" list =====
   Uses a CSS counter to render circular numbered badges before each <li>
   (see ::before rule) instead of native list markers. */
.mlsimport-steps{
	font-size: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-left: 74px;
}

.mlsimport-steps ol {
   list-style: none;
   counter-reset: step-counter;
   padding: 0;
}

.mlsimport-steps li {
counter-increment: step-counter;
    position: relative;
    padding-left: 44px;
    margin-bottom: 20px;
    line-height: 27px;
}

/* Circular numbered badge rendered from the CSS counter value. */
.mlsimport-steps li::before {
    content: counter(step-counter);
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    background-color: var(--accent-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
}


/*==2025 Inputs*/
/* Shared styling for text/password/select inputs in the 2025 UI:
   bordered, rounded, subtle shadow, inline-flex layout. */

input[type=password].mlsimport-input.mlsimport-2025-input,
input[type=text].mlsimport-input.mlsimport-2025-input,
.mlsimport-input.mlsimport-2025-input{
	padding: 5px 12px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	isolation: isolate;
	background: #FFFFFF;
	border: 1px solid rgba(28,25,23,0.18);
	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08);
	border-radius: 8px;
	flex: none;
	order: 1;
	align-self: stretch;
	flex-grow: 0;
	display: inline-flex;
}
/* 2025 label override (later in the file, so it wins over the earlier
   .mlsimport-label float rule for these screens). */
.mlsimport-label {
    display: block;
    margin-bottom: 0px;
    font-weight: 500;
    color: var(--text-primary);
}

select.mlsimport-2025-select{
	    padding: 5px 24px 5px 12px;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	isolation: isolate;
	border: 1px solid rgba(28,25,23,0.18);
	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08);
	border-radius: 8px;
	flex: none;
	align-self: stretch;
	flex-grow: 0;
}

	


/* Default bordered look for fieldset inputs and the import "select all" boxes. */
.mlsimport-fieldset-wrapper input,
input[type=checkbox].mlsimport_select_import_admin_all,
input[type=checkbox].mlsimport_select_import_all {
	border: 1px solid rgba(28,25,23,0.18);
	border-radius: 2px;
	background-color: #fff!important;
}


/* ===== Pill action buttons (Sunny Bento) =====
   Portal button standard: dark solid primary, pastel intents on top of it —
   save_data (mint), secondary (white + border), warning_action (butter) and
   error_action (solid red that darkens on hover). All are full pills. */

/* Primary button: solid warm near-black pill. */
.button.mlsimport_button{
	font-size: 14px;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 9px 24px;
	line-height: 1.5;
	min-height: 0;
	background: var(--primary-color);
	border: 1px solid var(--primary-color);
	border-radius: var(--radius-pill);
	color:#fff;
	flex: none;
	order: 1;
	flex-grow: 0;
	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08);
	transition: background var(--transition-speed), box-shadow var(--transition-speed);
}

.button.mlsimport_button:hover {
	background: var(--primary-hover);
	color:#fff;
	border: 1px solid var(--primary-hover);
	box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.45);
}

/* Save button: mint pill with deep-green text. */
.button.save_data,
.wp-core-ui .button.mlsimport_button.save_data {
    background: var(--success-soft);
    border: 1px solid var(--success-soft);
    color: var(--success-deep);
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.06);
}

.button.save_data:hover,
.wp-core-ui .button.mlsimport_button.save_data:hover {
    background: #a5dfc0;
    border: 1px solid #a5dfc0;
    color: var(--success-deep);
    box-shadow: 0 8px 20px -10px rgba(28, 92, 58, 0.5);
}


/* Secondary button: white surface pill with hairline border. */
.button.secondary,
.wp-core-ui .button.mlsimport_button.secondary {
	background: var(--background-white);
	border: 1px solid var(--border-color);
	/* !important needed: wpresidence-core/css/wpresidence2025.css line 817-818
	   forces white text + inset shadow with !important on .button.secondary. */
	color: var(--text-primary) !important;
	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05) !important;
	border-radius: var(--radius-pill);
 }

 .button.secondary:hover,
 .wp-core-ui .button.mlsimport_button.secondary:hover {
	background: var(--background-soft);
	border: 1px solid var(--border-color);
	color: var(--text-primary) !important;
	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05) !important;
	border-radius: var(--radius-pill);
 }

/* Field-selector bulk bar: only "Select all" stays the dark primary; the
   "Select none" twin (same classes in markup) is demoted to the white
   secondary look via its ID so the toolbar has a single primary action. */
#mlsimport-select-none-import.button.mlsimport_button {
	background: var(--background-white);
	border: 1px solid var(--border-color);
	color: var(--text-primary);
	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
}
#mlsimport-select-none-import.button.mlsimport_button:hover {
	background: var(--background-soft);
	border: 1px solid var(--border-color);
	color: var(--text-primary);
	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
}



 /* Warning button: butter pill with deep-amber text. */
 .button.warning_action,
 .wp-core-ui .button.mlsimport_button.warning_action {
	background: var(--warning-soft);
	border: 1px solid var(--warning-soft);
	color: var(--warning-deep);
	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.06);
 }

 .button.warning_action:hover,
 .wp-core-ui .button.mlsimport_button.warning_action:hover {
	background: #f3d87c;
	border: 1px solid #f3d87c;
	color: var(--warning-deep);
	box-shadow: 0 8px 20px -10px rgba(122, 84, 16, 0.45);
 }


 /* Error/danger button: solid red pill with white text, darkening on hover -
    the same shape as the primary button (solid -> darker + lifted shadow), just
    in the danger colour. It reads as a real action at rest instead of waiting
    for a hover to look like one. */
 .button.error_action,
 .wp-core-ui .button.mlsimport_button.error_action {
	background: var(--error-color);
	border: 1px solid var(--error-color);
	color: #fff;
	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08);
 }

 .button.error_action:hover,
 .wp-core-ui .button.mlsimport_button.error_action:hover {
	background: var(--error-hover);
	border: 1px solid var(--error-hover);
	color: #fff;
	box-shadow: 0 10px 24px -10px rgba(192, 38, 23, 0.55);
 }






#mlsimport_item_how_many{
	max-width: 450px;
}






 /* ===== Custom SVG checkboxes =====
    Native appearance is removed; a :before pseudo-element paints an inline
    SVG (unchecked = grey outline, checked = filled indigo box with a tick),
    both embedded as data: URIs below. */
 input[type=checkbox].mlsimport-import-checkbox,
 input[type=checkbox].mlsimport-admin-checkbox {
	 appearance: none;
	 -webkit-appearance: none;
	 background: transparent;
	 border: none;
	 box-shadow: none;
	 width: 24px;
	 height: 24px;
	 position: relative;
	 display: inline-block;
	 vertical-align: middle;
 }
 
 input[type=checkbox].mlsimport-import-checkbox:before,
 input[type=checkbox].mlsimport-admin-checkbox:before {
	 content: "";
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 24px;
	 height: 24px;
	 background-image: url("data:image/svg+xml;utf8,<svg fill='none' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path clip-rule='evenodd' d='M8 2C4.68629 2 2 4.68629 2 8V16C2 19.3137 4.68629 22 8 22H16C19.3137 22 22 19.3137 22 16V8C22 4.68629 19.3137 2 16 2H8ZM8 4C5.79086 4 4 5.79086 4 8V16C4 18.2091 5.79086 20 8 20H16C18.2091 20 20 18.2091 20 16V8C20 5.79086 18.2091 4 16 4H8Z' fill='%23D8D2C6' fill-rule='evenodd'></path></svg>");
	 background-size: 24px 24px;
	 background-position: center;
	 background-repeat: no-repeat;
	 margin: 0px;
 }
 
 /* Checked state swaps in the filled indigo box + white tick SVG. */
 input[type=checkbox].mlsimport-import-checkbox:checked:before,
 input[type=checkbox].mlsimport-admin-checkbox:checked:before {
	 background-image: url("data:image/svg+xml;utf8,<svg fill='none' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><rect fill='%23e85d3c' height='20' rx='6' width='20' x='2' y='2'></rect><path d='M7.55566 11.7222L10.5186 14.7778L16.4446 8.66669' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'></path></svg>");
 }



/* Initial save progress overlay */
/* Fixed, viewport-centered modal card (translate(-50%,-50%) trick); high
   z-index keeps it above the admin UI while the initial save runs. */
.mlsimport-save-progress {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    background: #fff;
    padding: 40px;
    border-radius: var(--radius-card);
    /* border: 1px solid #ddd; */
    box-shadow: 0 7px 54px rgba(0, 0, 0, 0.15);
    width: 500px;
    min-height: 200px;
    text-align: center;
    font-size: 17px;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    line-height: 1.8em;
}

.mlsimport-save-progress-text {
        margin-bottom: 10px;
}

.mlsimport-save-progress-bar {
        height: 10px;
        background: #f3efe7;
        margin-top: 5px;
        border-radius: 5px;
        overflow: hidden;
}

/* Animated fill inside the save progress bar (width driven by JS). */
.mlsimport-save-progress-bar .progress-fill {
        width: 0%;
        height: 100%;
        background: var(--accent-color);
        border-radius: 5px;
        transition: width 0.3s;
}

/* Deactivation exit survey modal */
/* Full-screen overlay (inset:0) centering the survey card; very high z-index
   sits above the plugins-list deactivate flow. .mlsimport-es-hidden toggles it. */
#mlsimport-exit-survey-modal {
        position: fixed;
        inset: 0;
        z-index: 100000;
        display: flex;
        align-items: center;
        justify-content: center;
}
#mlsimport-exit-survey-modal.mlsimport-es-hidden {
        display: none;
}
/* Semi-transparent dim layer behind the survey card. */
.mlsimport-es-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
}
.mlsimport-es-card {
        position: relative;
        background: #fff;
        border-radius: var(--radius-card);
        padding: 26px 28px;
        width: 460px;
        max-width: 92vw;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
.mlsimport-es-title {
        margin: 0 0 6px;
        font-size: 18px;
}
.mlsimport-es-intro {
        margin: 0 0 16px;
        color: #6b6358;
}
/* Selectable reason row in the exit survey. */
.mlsimport-es-option {
        display: block;
        padding: 8px 10px;
        margin: 4px 0;
        border: 1px solid rgba(28,25,23,0.18);
        border-radius: var(--border-radius);
        cursor: pointer;
}
.mlsimport-es-option:hover {
        background: #f3efe7;
}
.mlsimport-es-other {
        width: 100%;
        margin-top: 10px;
        box-sizing: border-box;
}
.mlsimport-es-actions {
        margin-top: 18px;
        display: flex;
        align-items: center;
        gap: 16px;
}
.mlsimport-es-skip {
        color: #9a9285;
        text-decoration: underline;
}
.mlsimport-es-hidden {
        display: none;
}

/* -------------------------------------------------------
   Activity log — sync-status banner (Task 02 / Build 2)
   ------------------------------------------------------- */

.mlsimport-activity-banner {
        padding: 12px 14px;
        /* Re-chrome the core .notice.notice-info wrapper to Sunny Bento: warm
           hairline border, accent-orange status edge, rounded corners. */
        border: 1px solid var(--border-color);
        border-left: 4px solid var(--accent-color);
        border-radius: var(--border-radius);
}

.mlsimport-activity-banner__counts {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 14px;
        margin: 0 0 10px;
}

.mlsimport-activity-banner__title {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-size: 14px;
        font-weight: 700;
        color: #1c1917;
}

.mlsimport-activity-banner__title::before {
        content: "";
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: #1c1917;
}

.mlsimport-activity-banner__period {
        font-weight: 500;
        font-size: 11px;
        color: #9a9285;
        text-transform: uppercase;
        letter-spacing: .05em;
}

.mlsimport-activity-banner__totals {
        display: inline-flex;
        flex-wrap: wrap;
        gap: 6px;
}

.mlsimport-activity-stat {
        display: inline-flex;
        align-items: baseline;
        gap: 4px;
        padding: 3px 11px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.5;
}

.mlsimport-activity-stat strong {
        font-size: 13px;
        font-weight: 700;
}

/* Per-action tinted stat pills: added (green), edited (amber), deleted (red). */
.mlsimport-activity-stat--added   { background: #b8e6cc; color: #1c5c3a; }
.mlsimport-activity-stat--edited  { background: #fae39a; color: #7a5410; }
.mlsimport-activity-stat--deleted { background: #fbe6e3; color: #c02617; }

.mlsimport-activity-banner__breakdown {
        margin: 0 0 10px;
        padding: 0;
        list-style: none;
        max-width: 900px;
        border: 1px solid rgba(28,25,23,0.12);
        border-radius: var(--border-radius);
        overflow: hidden;
}

.mlsimport-activity-banner__breakdown li {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin: 0;
        padding: 7px 12px;
        font-size: 13px;
        background: #fff;
}

.mlsimport-activity-banner__breakdown li:nth-child(even) {
        background: #f3efe7;
}

/* Per-task name cell: grows to fill, truncates with an ellipsis when long
   (min-width:0 lets the flex item shrink below its content width). */
.mlsimport-activity-banner__task {
        flex: 1 1 auto;
        min-width: 0;
        font-weight: 600;
        color: #1c1917;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
}

.mlsimport-activity-banner__chips {
        display: inline-flex;
        flex: 0 0 auto;
        flex-wrap: nowrap;
        gap: 5px;
}

.mlsimport-activity-chip {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.6;
        white-space: nowrap;
        color: #ffffff;
        border-radius: var(--radius-pill);
}

/* Pastel per-action count chips: added/edited/deleted colours. */
.mlsimport-activity-chip--added   { background: var(--success-soft); color: var(--success-deep); }
.mlsimport-activity-chip--edited  { background: var(--warning-soft); color: var(--warning-deep); }
.mlsimport-activity-chip--deleted { background: var(--error-soft); color: var(--error-color); }

/* Muted styling for a zero-count chip. */
.mlsimport-activity-chip.is-zero {
        background: #f3efe7;
        color: #9a9285;
}

.mlsimport-activity-banner__actions {
        margin: 0;
}

.mlsimport-activity-banner__link {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 5px 15px;
        background: #1c1917;
        color: #ffffff !important;
        text-decoration: none !important;
        font-size: 13px;
        font-weight: 600;
        border-radius: var(--radius-pill);
}

.mlsimport-activity-banner__link:hover,
.mlsimport-activity-banner__link:focus {
        background: #33302b;
        color: #ffffff !important;
}

/* -------------------------------------------------------
   Import History — filter form (styled like the activity banner)
   Uses core .notice .notice-info for the card chrome (white box,
   blue left border); the rules below handle layout + controls.
   ------------------------------------------------------- */

.mlsimport-history-filters {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 12px;
        padding: 12px 14px;
        margin: 16px 0;
        /* Same Sunny Bento re-chrome as the activity banner (core .notice). */
        border: 1px solid var(--border-color);
        border-left: 4px solid var(--accent-color);
        border-radius: var(--border-radius);
}

.mlsimport-history-filters label {
        font-size: 13px;
        font-weight: 600;
        color: #1c1917;
}

.mlsimport-history-filters input[type="search"],
.mlsimport-history-filters select {
        height: 32px;
        border-radius: 8px;
        border-color: rgba(28,25,23,0.12);
}

.mlsimport-history-filters .button {
        background: #1c1917;
        border-color: #1c1917;
        color: #ffffff;
        border-radius: var(--radius-pill);
        height: 32px;
        padding: 0 14px;
        font-weight: 600;
}

.mlsimport-history-filters .button:hover,
.mlsimport-history-filters .button:focus {
        background: #33302b;
        border-color: #33302b;
        color: #ffffff;
}

/* -------------------------------------------------------
   Activity log — action column badges (Task 02 / Build 2)
   ------------------------------------------------------- */

.mlsimport-activity-action {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.6;
        text-transform: capitalize;
        white-space: nowrap;
}

/* Added-action badge (mint). */
.mlsimport-activity-action--added {
        background-color: var(--success-soft);
        color: var(--success-deep);
}

.mlsimport-activity-action--edited {
        background-color: var(--warning-soft);
        color: var(--warning-deep);
}

.mlsimport-activity-action--deleted {
        background-color: var(--error-soft);
        color: var(--error-color);
}

/* Searchable City/County multi-select — filter input above the native list. */
.mlsimport-2025-select.mlsimport-searchable-select,
.mlsimport-select-search {
        max-width: 450px;
}
.mlsimport-select-search {
        display: block;
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 6px;
        padding: 6px 12px;
        border: 1px solid rgba(28,25,23,0.18);
        border-radius: 8px;
        box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08);
}
/* Chip tray showing currently selected City/County values. */
.mlsimport-selected-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        max-width: 450px;
        margin: 6px 0;
}
/* Collapse the tray when nothing is selected. */
.mlsimport-selected-chips:empty {
        display: none;
}
.mlsimport-chip {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 2px 4px 2px 10px;
        background: #1c1917;
        color: #ffffff;
        border-radius: 12px;
        font-size: 12px;
        line-height: 1.8;
}
/* Round "x" remove button inside a selected chip. */
.mlsimport-chip-remove {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.25);
        color: #ffffff;
        font-size: 14px;
        line-height: 1;
        cursor: pointer;
}
.mlsimport-chip-remove:hover {
        background: rgba(255, 255, 255, 0.45);
}

/* ============================================================
   Import Tasks list — Status column health badge (issue #200)
   Pill badge showing the task's run health: green = healthy,
   amber = sync overdue, red = failed/stuck, gray = neutral.
   ============================================================ */
.mlsimport-task-health {
        display: inline-block;
        padding: 3px 12px;
        border-radius: var(--radius-pill);
        font-size: 12px;
        font-weight: 600;
        line-height: 1.6;
        color: var(--text-secondary);
        background: var(--background-soft);
}
.mlsimport-task-health--ok {
        background: var(--success-soft);
        color: var(--success-deep);
}
.mlsimport-task-health--warning {
        background: var(--warning-soft);
        color: var(--warning-deep);
}
.mlsimport-task-health--error {
        background: var(--error-soft);
        color: var(--error-color);
}
/* Explanation line under the badge (progress, error, or last sync time). */
.mlsimport-task-health__message {
        margin: 6px 0 0;
        font-size: 12px;
        color: #9a9285;
}


/* ===== Tools tab (Sunny Bento) =====
   admin.php?page=mlsimport_plugin_options&tab=administrative_options

   This tab predates the restyle: three of its six blocks carried hardcoded inline
   styles (#eee / padding 10px / radius 5px) and the other three carried none, so
   half the tab rendered as a grey card and half as bare text. Spacing lived in
   per-element margins and <br> tags and drifted out of step.

   Two classes:
     .mlsimport_tool_block  every block - shared width and vertical rhythm
     .mlsimport_tool_card   adds the card surface, for ACTION tools only

   The two settings behind the single Save Changes button (logs, history) and the
   Cron Jobs guidance stay plain, so a card always means "this block acts on its
   own".

   Three gaps, by role - the same everywhere on the tab:
     TIGHT    8px  a control under its own label, a hint under its control
     NORMAL  16px  ordinary siblings
     HEADING 20px  anything directly under a heading */
.mlsimport_tool_block{
	margin: 0 0 20px 0;
	max-width: 800px;
	box-sizing: border-box;
}

/* Reset every child, then space them with one top margin, so a single rule owns
   the rhythm and no child can drift on its own. */
.mlsimport_tool_block > *{
	margin: 0;
}
.mlsimport_tool_block > * + *{
	margin-top: 16px;
}
.mlsimport_tool_block > h3 + *,
.mlsimport_tool_block > h4 + *{
	margin-top: 20px;
}
/* Buttons need the .wp-core-ui prefix to outrank core's `.wp-core-ui .button
   { margin: 0 }` (0,2,0), which otherwise flattens the gap under a heading. */
.wp-core-ui .mlsimport_tool_block > h3 + .button,
.wp-core-ui .mlsimport_tool_block > h4 + .button,
.wp-core-ui .mlsimport_tool_block > h3 + input[type="button"],
.wp-core-ui .mlsimport_tool_block > h4 + input[type="button"]{
	margin-top: 20px;
}
/* Same reason for the ordinary 16px step and the side-by-side button gap. */
.wp-core-ui .mlsimport_tool_block > * + .button,
.wp-core-ui .mlsimport_tool_block > * + input[type="button"]{
	margin-top: 16px;
}
.wp-core-ui .mlsimport_tool_block input[type="button"] + input[type="button"]{
	margin-top: 16px;
	margin-left: 10px;
}
.mlsimport_tool_block > .mlsimport-label + select,
.mlsimport_tool_block > select + .mlsimport-exp{
	margin-top: 8px;
}

/* Card surface - action tools only. */
.mlsimport_tool_card{
	background-color: var(--background-soft);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	padding: 20px;
}

.mlsimport_tool_block h3,
.mlsimport_tool_block h4{
	font-weight: 600;
	color: var(--text-primary);
	line-height: 1.3;
}

.mlsimport_tool_block .mlsimport-label{
	font-weight: 500;
	color: var(--text-primary);
}

.mlsimport_tool_block .mlsimport-exp{
	color: var(--text-secondary);
}

/* One width for every field on this tab. Select Terms used to be capped at
   max-width:400px inline while Select Taxonomy above it inherited
   width:100%/max-width:100% and ran the full width of its container. */
.mlsimport_tool_block select.mlsimport-2025-select{
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}
.mlsimport_tool_block select[multiple]{
	min-height: 120px;
}

/* Action buttons keep their content width and sit on one row. */
.mlsimport_tool_block input[type="button"] + input[type="button"]{
	margin-left: 10px;
}

/* Delete progress bar, on the palette instead of wp-admin blue (#0073aa).
   The bar's own width stays inline: mlsimport-admin.js animates it. */
.mlsimport-delete-progress-track{
	background: var(--background-white);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-pill);
	overflow: hidden;
	height: 20px;
	margin-bottom: 8px;
}
#mlsimport-delete-progress-bar{
	background: var(--accent-color);
	height: 100%;
	transition: width var(--transition-speed) ease;
}


/* ===== Field height parity (2025 controls) =====
   A dropdown must be exactly as tall as a text input beside it. wp-admin core
   (load-styles.php) sets `select { line-height: 2.71429; min-height: 40px }`,
   which at 14px is a 38px line box; with our 5px padding and 1px border that
   rendered every .mlsimport-2025-select at 50px next to a 40px
   .mlsimport-2025-input. 40px is wp-admin's own control height, so the select
   is the one corrected. Multi-selects are excluded - they size to their rows. */
select.mlsimport-2025-select:not([multiple]){
	height: 40px;
	min-height: 40px;
	padding-top: 0;
	padding-bottom: 0;
}


/* Save Changes on the Tools tab belongs to the two dropdowns above it, so it gets
   no gap of its own on top; the space goes underneath, before the next block.
   wp-admin's default .submit padding (1.5em 0) put air on both sides. */
form[name="cleanup_options"] p.submit{
	margin: 0 0 20px 0;
	padding: 0;
}


/* Focus ring on the palette. wp-admin core (forms.css) focuses controls with
   admin blue - `select:focus { border-color: #2271b1; box-shadow: 0 0 0 1px
   #2271b1 }` - which clashes with the warm neutrals. Same visual weight as
   core's (1px border + 1px ring), so the focus affordance stays as obvious as
   it was; only the hue changes. */
/* The selectors below repeat the full base-rule specificity plus :focus. The
   base rule is `input[type=text].mlsimport-input.mlsimport-2025-input` (0,3,1),
   which outranks core's `input:focus` (0,1,1) - so until now a focused text
   field kept its resting border and showed NO focus state at all, core's
   included. A field being typed into has to look different from one that is
   not. */
input[type=text].mlsimport-input.mlsimport-2025-input:focus,
input[type=password].mlsimport-input.mlsimport-2025-input:focus,
.mlsimport-input.mlsimport-2025-input:focus,
select.mlsimport-2025-select:focus,
/* #mlsimport_mls_name_front sets border-color from an ID (1,0,0), which outranks
   the class selectors above (0,4,1). Without naming the ID here the MLS search
   box keeps its resting border and shows no focus state at all. */
#mlsimport_mls_name_front:focus{
	border-color: var(--primary-color);
	/* An actual border, not a glow. Width stays 1px so the padding box does not
	   shrink on focus and the text never jiggles; the contrast jump from the
	   rgba(28,25,23,0.18) hairline to solid near-black carries the state on its
	   own. Both controls are border-box, so the 40px height is unaffected. */
	box-shadow: none;
	outline: none;
}


/* ===== One accent for every active state =====
   The plugin screens were showing three different "active" colours at once: the
   dark resting hairline, the accent focus ring, and wp-admin/browser blue on the
   open dropdown's highlighted row. Everything that signals focus or selection
   now uses --accent-color; the neutral hairline stays neutral, because a resting
   border is not a state.

   Focus and selection are BLACK (--primary-color), matching hover, so a control
   never shows two different "active" colours. accent-color still fills checked
   checkboxes and radios - that is a checked state, not a focus state.

   The open <select> popup is NOT styled here. It used to carry

       .mlsimport-2025-select option:checked { background: linear-gradient(...);
                                               color: #fff }

   on the belief that the gradient was the one declaration Chrome honours inside
   a native popup. It is not: Chrome applies the colour and drops the gradient,
   so the already-selected row rendered white-on-white and read as a blank line
   in the list - e.g. "logs enabled" vanishing from the Tools dropdown. A
   stylesheet cannot guarantee the pair, and half the pair is worse than none,
   so the popup keeps the browser's own highlight. That is the one place on
   these screens where a native blue row can still appear; it is legible, which
   the override was not. */
body.wp-admin[class*="_page_mlsimport"],
body.wp-admin.post-type-mlsimport_item{
	accent-color: var(--accent-color);
}


/* No wp-admin blue anywhere on the plugin's own screens. Core links are
   #2271b1; on this warm palette they were the last blue left once the focus
   ring and the dropdown highlight moved to the accent.

   Scoped to #wpbody-content on purpose: that is the plugin's content area only.
   Body-level scoping would repaint the admin sidebar and the footer too, which
   belong to WordPress, not to us. */
/* Body text links only. Tabs and buttons are EXCLUDED - they carry their own
   colour scheme (dark tab = white label), and recolouring them turned every tab
   label red. */
body.wp-admin[class*="_page_mlsimport"] #wpbody-content a:not(.nav-tab):not(.button):not(.button-primary):not(.button-secondary),
body.wp-admin.post-type-mlsimport_item #wpbody-content a:not(.nav-tab):not(.button):not(.button-primary):not(.button-secondary){
	color: var(--primary-color);
}
body.wp-admin[class*="_page_mlsimport"] #wpbody-content a:not(.nav-tab):not(.button):not(.button-primary):not(.button-secondary):hover,
body.wp-admin.post-type-mlsimport_item #wpbody-content a:not(.nav-tab):not(.button):not(.button-primary):not(.button-secondary):hover{
	color: var(--primary-hover);
}

/* Keyboard/click focus ring on links, tabs and buttons. wp-admin core focuses
   these with `box-shadow: 0 0 0 1px #2271b1` plus a blue outline - that is the
   blue box that appears around a tab after clicking it. Same weight, accent
   hue, and the label colour is left alone so a dark tab keeps its white text. */
body.wp-admin[class*="_page_mlsimport"] #wpbody-content a:focus,
body.wp-admin[class*="_page_mlsimport"] #wpbody-content .nav-tab:focus,
body.wp-admin[class*="_page_mlsimport"] #wpbody-content .button:focus,
body.wp-admin.post-type-mlsimport_item #wpbody-content a:focus,
body.wp-admin.post-type-mlsimport_item #wpbody-content .button:focus{
	box-shadow: 0 0 0 2px rgba(28,25,23,0.15);
	border-color: var(--primary-color);
	outline: 2px solid transparent; /* stays visible in forced-colours mode */
	outline-offset: 0;
}

/* ...but not on the pastel intent pills. Each of those borders in its own
   colour, so the near-black border-color above drew a stray black outline
   around the mint Save Changes and the red delete the moment they were
   clicked - the one thing the near-black was introduced to stop happening in
   admin blue. They keep their own border and take the focus halo in their own
   hue, so the affordance is as obvious as before without a foreign line. */
body.wp-admin[class*="_page_mlsimport"] #wpbody-content .button.save_data:focus,
body.wp-admin.post-type-mlsimport_item #wpbody-content .button.save_data:focus{
	border-color: var(--success-soft);
	box-shadow: 0 0 0 2px rgba(28, 92, 58, 0.28);
}

body.wp-admin[class*="_page_mlsimport"] #wpbody-content .button.warning_action:focus,
body.wp-admin.post-type-mlsimport_item #wpbody-content .button.warning_action:focus{
	border-color: var(--warning-soft);
	box-shadow: 0 0 0 2px rgba(122, 84, 16, 0.28);
}

body.wp-admin[class*="_page_mlsimport"] #wpbody-content .button.error_action:focus,
body.wp-admin.post-type-mlsimport_item #wpbody-content .button.error_action:focus{
	border-color: var(--error-color);
	box-shadow: 0 0 0 2px rgba(192, 38, 23, 0.30);
}