/* Counsellors NZ ACC Directory – front-end styles */

.accnz-registration-form .accnz-field,
.accnz-provider-profile p {
	margin-bottom: 1.2em;
}

.accnz-registration-form label,
.accnz-provider-profile label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.35em;
}

.accnz-registration-form input[type="text"],
.accnz-registration-form input[type="email"],
.accnz-registration-form input[type="tel"],
.accnz-registration-form input[type="password"],
.accnz-registration-form textarea,
.accnz-provider-profile input[type="text"],
.accnz-provider-profile textarea {
	width: 100%;
	max-width: 480px;
	padding: 0.5em 0.7em;
	box-sizing: border-box;
}

.accnz-checkbox {
	display: inline-flex !important;
	align-items: center;
	gap: 0.4em;
	font-weight: 400 !important;
	margin: 0 1em 0.5em 0;
}

.accnz-tla-group {
	margin-bottom: 0.75em;
}

.accnz-tla-select-all {
	display: flex !important;
	margin: 0.4em 0 0.8em 0;
	padding: 0.4em 0.6em;
	background: #f6f6f6;
	border-radius: 4px;
}

.accnz-submit-button,
.accnz-directory-filters button {
	padding: 0.6em 1.4em;
	cursor: pointer;
}

/* Intro copy above the directory filters, encouraging a visitor to pick
   their area before browsing — ACC provider approvals are area-based, so
   browsing the full unfiltered list risks landing on someone who doesn't
   actually cover the visitor's location. See render_filter_form(). */
.accnz-directory-intro {
	margin-bottom: 1.2em;
}

.accnz-directory-intro h2 {
	margin: 0 0 0.3em 0;
	font-size: 1.3em;
}

.accnz-directory-intro p {
	margin: 0;
	color: #444;
	max-width: 60em;
}

.accnz-directory-filters {
	display: flex;
	flex-direction: column;
	gap: 1em;
	margin-bottom: 1.5em;
}

.accnz-directory-filters > button {
	align-self: flex-start;
}

/* The Region/TLA pickers are the primary, encouraged way to search —
   visually set apart (a filled card) from the secondary refinements below,
   so they read as step one rather than just two fields among several. */
.accnz-directory-filters-primary {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	align-items: flex-end;
	padding: 1em 1.2em;
	background: #eaf3fb;
	border: 1px solid #cfe3f3;
	border-radius: 6px;
}

.accnz-directory-filters-secondary {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	align-items: flex-end;
}

.accnz-directory-filters-secondary-label {
	width: 100%;
	margin: 0;
	font-size: 0.8em;
	font-weight: 600;
	color: #666;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.accnz-directory-filters label {
	display: flex;
	flex-direction: column;
	font-size: 0.9em;
	font-weight: 600;
}

.accnz-no-results {
	padding: 1em;
	background: #f6f6f6;
	border-radius: 4px;
}

.accnz-notice {
	padding: 0.9em 1.1em;
	border-radius: 4px;
	margin-bottom: 1.2em;
	font-weight: 600;
	border: 1px solid transparent;
}

.accnz-notice-success {
	background: #eafaf0;
	border-color: #b7e6c9;
	color: #1e6b3a;
}

.accnz-notice-error {
	background: #fdecec;
	border-color: #f3b8b8;
	color: #96271b;
}

/* --- Directory listing cards & individual store pages ------------------
   WCFM's own store-list/store-page styles pick up whatever text colour the
   active theme uses for links, which on this site reads too light against
   the card background. Scoped to the pages this plugin actually loads its
   assets on (the ACC directory/map pages and an ACC provider's own store
   page), so the site's regular "Find a Counsellor" listing is untouched. */
.wcfmmp-stores-listing .store-data h2 a,
#wcfmmp-store .wcfm_store_title,
#wcfmmp-store .header_area .wcfm_store_title {
	color: #1b3a2f;
	font-weight: 700;
	text-decoration: none;
}

.wcfmmp-stores-listing .store-data h2 a:hover,
#wcfmmp-store .wcfm_store_title:hover {
	text-decoration: underline;
}

/* ACC providers don't have a "store" to visit in the marketplace sense —
   the whole point of the directory card is to lead straight to sending
   them an enquiry, and the provider's name (styled above) already links
   through to their profile. A separate "Visit Store" button read like a
   shopping affordance that doesn't fit a counsellor listing, so it's
   hidden here (scoped to this plugin's own pages — the site's existing
   "Find a Counsellor" listing is untouched). */
.wcfmmp-stores-listing .wcfmmp-visit-store {
	display: none !important;
}

/* WCFM's star-rating widget shows "0 out of 5" on every card regardless
   of whether anyone's ever left a review — there's no review/rating
   feature in this directory, so it only ever reads as a confusing
   placeholder. Hidden on both the directory card and the provider's own
   store page header. */
.wcfmmp-stores-listing .bd_rating,
#wcfmmp-store .wcfmmp-store-rating {
	display: none !important;
}

/* WCFM stretches every uploaded profile photo to exactly fill its circular
   avatar frame (`width:100%; height:100%` with no `object-fit` at all, on
   both surfaces below) — any photo that isn't already a perfect square
   gets visibly squeezed/distorted instead of being cropped to fit. This
   makes the browser crop-to-fill instead, so a portrait, landscape or
   square upload all display correctly regardless of their original shape. */
#wcfmmp-stores-wrap .store-avatar img,
#wcfmmp-store .logo_area a img {
	object-fit: cover;
	object-position: center;
}

/* A small badge showing a provider's current availability status (see
   accnz_availability_statuses()) — most useful on providers with no map
   pin (they left their specific practice location blank, so there's
   nothing genuine to plot), so visitors understand why, but shown for
   every provider since waitlisting/unavailable is exactly the kind of
   thing a visitor needs to see before sending an enquiry. Colour follows
   the same pale-tint-background + dark-text formula already used above
   for .accnz-notice-success / .accnz-notice-error. */
.accnz-availability-badge {
	display: inline-block;
	margin: 0.3em 0;
	padding: 0.2em 0.7em;
	border-radius: 3px;
	font-size: 0.85em;
	font-weight: 600;
}

.accnz-availability-badge-header {
	margin-left: 0;
}

.accnz-availability-badge--online,
.accnz-availability-badge--in-person-online {
	background: #eaf3fb;
	color: #1a5a8a;
}

.accnz-availability-badge--in-person {
	background: #eafaf0;
	color: #1e6b3a;
}

.accnz-availability-badge--waitlisting {
	background: #fdf3e0;
	color: #8a5a1a;
}

.accnz-availability-badge--unavailable {
	background: #f0f0f0;
	color: #555;
}

/* The compact card list WCFM shows beside/under the ACC Provider Map
   (as opposed to the roomier plain directory listing, which never hits
   this) absolutely-positions the name/badge/enquiry block over the cover
   photo inside a container that also clips its own overflow — sized only
   for the pre-1.0.16 content. The extra availability-badge line is enough
   to push the enquiry button below that clipped box, hiding it entirely
   even though the outer card has room to show it. This container is
   already absolutely positioned (out of the normal flow), so letting it
   paint its own overflow can't affect any other card's height/alignment
   in the grid. */
.wcfmmp-stores-listing .store-data-container {
	overflow: visible !important;
}

/* WCFM's own dashboard CSS strips native rendering from every checkbox
   inside its #wcfm-main-contentainer wrapper, and only ever draws a
   checkmark back in for checkboxes carrying WCFM's own "wcfm-checkbox"
   class — which also carries box/layout rules (fixed display, line-height,
   vertical-align) that clash with this plugin's own label/fieldset layout
   when added. Rather than adopt that class, draw the checkmark ourselves
   on this screen only, so a checked box here is never mistaken for an
   empty one. */
.accnz-provider-profile input[type="checkbox"]:checked {
	position: relative;
}

.accnz-provider-profile input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 2px;
	width: 5px;
	height: 10px;
	border: solid #1b7a4d;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* The "Send an enquiry" action on a provider's own store page is the one
   thing a visitor actually needs to act on — give it real button styling
   instead of a small icon + text link easy to miss. */
#wcfmmp-store .wcfm_store_enquiry {
	display: inline-flex !important;
	align-items: center;
	gap: 0.4em;
	padding: 0.65em 1.3em;
	background: #1b7a4d;
	color: #fff !important;
	border-radius: 4px;
	font-weight: 700;
	font-size: 1.05em;
	text-decoration: none !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

#wcfmmp-store .wcfm_store_enquiry:hover {
	background: #145c3a;
}

#wcfmmp-store .wcfm_store_enquiry i {
	font-size: 1.1em;
}

/* The directory listing card ("store box") has its own separate enquiry
   link — WCFM's `wcfm_catalog_enquiry`, not the `wcfm_store_enquiry` styled
   above — and it has the same problem the store page's link had: a small
   icon + text, easy to miss as the card's one actual call to action. Give
   it the same real button treatment. */
.wcfmmp-stores-listing .store-enquiry {
	margin: 0.6em 0 0;
}

.wcfmmp-stores-listing .store-enquiry a.wcfm_catalog_enquiry {
	display: inline-flex !important;
	align-items: center;
	gap: 0.4em;
	padding: 0.5em 1.1em;
	background: #1b7a4d;
	color: #fff !important;
	border-radius: 4px;
	font-weight: 700;
	font-size: 0.95em;
	text-decoration: none !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.wcfmmp-stores-listing .store-enquiry a.wcfm_catalog_enquiry:hover {
	background: #145c3a;
}

@media (max-width: 600px) {
	.accnz-registration-form input,
	.accnz-registration-form textarea,
	.accnz-provider-profile input,
	.accnz-provider-profile textarea {
		max-width: 100%;
	}

	.accnz-directory-filters-primary,
	.accnz-directory-filters-secondary {
		flex-direction: column;
		align-items: stretch;
	}
}