/*
Theme Name:   ListingHive Child
Theme URI:    https://hivepress.io/themes/listinghive
Description:  Child theme for ListingHive. All custom styles and template overrides go here. Update-safe.
Author:       Site
Author URI:   https://hivepress.io
Template:     listinghive
Version:      1.0.4
Tested up to: 6.9
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  listinghive-child
*/

/* ----------------------------------------------------------------------------
   Custom styles for the classified ads site.
   Add overrides and custom CSS below. Parent theme styles load first.
---------------------------------------------------------------------------- */

/* RTL: WordPress adds .rtl to body when an RTL language (e.g. Arabic) is set
   in Settings > General. Add RTL overrides below if needed. */

/* ----------------------------------------------------------------------------
   Header / navigation – cleaner, Kleinanzeigen-style (spacing, alignment, CTA)
---------------------------------------------------------------------------- */

/* 1) Header bar: compact height, subtle border, no visual clutter */
.site-header .header-navbar {
	padding-top: 0.65rem;
	padding-bottom: 0.65rem;
	min-height: auto;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* 2) Nav row: align logo, menu and actions in one clean row with even spacing */
.site-header .header-navbar__start,
.site-header .header-navbar__end {
	align-items: center;
	gap: 1rem;
}
.site-header .header-navbar__end {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem;
}

/* 3) Logo: tighter spacing, single-line feel */
.site-header .header-logo__name {
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: -0.02em;
}
.site-header .header-logo__description {
	font-size: 0.8rem;
	opacity: 0.85;
	margin-top: 0.15rem;
}

/* 4) Main nav menu: horizontal links, consistent spacing, no heavy underline */
.site-header .header-navbar__menu ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.1rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.site-header .header-navbar__menu ul li {
	margin: 0;
}
.site-header .header-navbar__menu ul li a {
	padding: 0.35em 0;
	font-size: 0.95rem;
	text-decoration: none;
	color: inherit;
	opacity: 0.9;
}
.site-header .header-navbar__menu ul li a:hover,
.site-header .header-navbar__menu ul li.current-menu-item > a {
	opacity: 1;
}
.site-header .header-navbar__menu > ul > li.current-menu-item::before {
	display: none;
}

/* 5) HivePress header block (Add Listing + user menu): align with nav, compact */
.site-header .header-navbar__actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.site-header .hp-menu--site-header.hp-menu--main {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.site-header .hp-menu--site-header .hp-menu__item {
	margin: 0;
}

/* 6) Add Listing button: clear CTA, compact, no gradient noise */
.site-header .hp-menu__item--listing-submit .button,
.site-header .header-navbar__actions .button--secondary {
	padding: 0.45em 1em;
	font-size: 0.9rem;
	font-weight: 600;
	border-radius: var(--sc-radius-sm);
	background-image: none;
	box-shadow: none;
}
.site-header .hp-menu__item--listing-submit .button:hover,
.site-header .header-navbar__actions .button--secondary:hover {
	background-image: none;
	opacity: 0.92;
}

/* 7) Burger (mobile): smaller tap area, aligned with row */
.site-header .header-navbar__burger > a {
	padding: 0.4em 0.5em;
	font-size: 1.1rem;
}
.site-header .header-navbar__burger > ul {
	margin: 0;
	padding: 0.5rem 0;
	list-style: none;
}
.site-header .header-navbar__burger > ul > li.current-menu-item::before {
	display: none;
}
.site-header .header-navbar__burger > ul > li > a {
	padding: 0.4em 0.75em;
	font-size: 0.95rem;
}

/* ----------------------------------------------------------------------------
   Global color system – marketplace palette (Kleinanzeigen / OLX / FB Marketplace)
   Primary, backgrounds, borders, text. Applied via :root variables.
---------------------------------------------------------------------------- */

:root {
	/* ── Colors ──────────────────────────────────────────────────────────
	   IMPORTANT: Never use --sc-primary (#cbed44) as a text color on
	   white/light backgrounds — contrast ratio is only ~1.7:1 (WCAG fail).
	   Use it only as a background with dark text (--sc-text-dark on top).
	   ──────────────────────────────────────────────────────────────────── */
	--sc-primary:      #cbed44;   /* lime — bg only, never as text color   */
	--sc-primary-hover:#b8d63c;   /* intermediate hover (HIG: smooth step) */
	--sc-primary-dark: #305c2a;   /* dark green — hover bg + text/icons    */
	--sc-link:         #1f5b2e;
	--sc-link-hover:   #244620;
	--sc-accent:       #010101;
	--sc-bg-light:     #f9f9f9;
	--sc-border:       #e5e7eb;
	--sc-text-dark:    #121212;
	--sc-text-muted:   #555555;

	/* ── Legacy aliases (kept for backward-compat with marketplace.css) ─ */
	--sc-green:             var(--sc-primary);
	--sc-green-dark:        var(--sc-primary-dark);
	--sc-green-accent:      var(--sc-primary);
	--sc-green-accent-dark: var(--sc-primary-dark);
	--sc-green-hover:       var(--sc-primary-hover);
	--sc-filter-accent:     var(--sc-primary);

	/* ── Elevation (HIG-inspired shadow system) ──────────────────────── */
	--sc-shadow-0: none;
	--sc-shadow-1: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
	--sc-shadow-2: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
	--sc-shadow-3: 0 8px 24px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.06);

	/* ── Typography scale (fluid — HIG Dynamic Type equivalent) ─────── */
	--sc-text-xs:   clamp(0.6875rem, 1vw,   0.75rem);    /* 11–12px badges  */
	--sc-text-sm:   clamp(0.75rem,   1.2vw, 0.8125rem);  /* 12–13px meta    */
	--sc-text-body: clamp(0.875rem,  1.5vw, 0.9375rem);  /* 14–15px body    */
	--sc-text-md:   clamp(0.9375rem, 1.8vw, 1rem);       /* 15–16px labels  */
	--sc-text-lg:   clamp(1rem,      2vw,   1.125rem);   /* 16–18px price   */
	--sc-text-xl:   clamp(1.125rem,  2.5vw, 1.25rem);    /* 18–20px heading */
	--sc-text-2xl:  clamp(1.25rem,   3vw,   1.5rem);     /* 20–24px H1      */

	/* ── Spacing scale ───────────────────────────────────────────────── */
	--sc-space-1: 0.25rem;
	--sc-space-2: 0.5rem;
	--sc-space-3: 0.75rem;
	--sc-space-4: 1rem;
	--sc-space-5: 1.25rem;
	--sc-space-6: 1.5rem;
	--sc-space-8: 2rem;

	/* ── Shape & interaction ─────────────────────────────────────────── */
	--sc-radius:      8px;
	--sc-radius-sm:   6px;
	--sc-radius-lg:   12px;
	--sc-radius-full: 9999px;
	--sc-touch:       44px;
	--sc-transition:       0.2s ease;  /* standard: buttons, inputs, cards    */
	--sc-transition-fast:  0.15s ease; /* fast:     hover color/bg changes    */
	--sc-transition-slow:  0.3s ease;  /* slow:     card elevation, modals    */

	/* ── Elevation: level 4 (modals, drawers) ────────────────────────── */
	--sc-shadow-4: 0 16px 40px rgba(0,0,0,0.14), 0 8px 16px rgba(0,0,0,0.08);

	/* ── Z-index scale ───────────────────────────────────────────────── */
	--sc-z-base:     1;
	--sc-z-sticky:   10;
	--sc-z-dropdown: 100;
	--sc-z-header:   150;
	--sc-z-modal:    200;
	--sc-z-toast:    300;

	/* ── Semantic colour tokens ──────────────────────────────────────── */
	--sc-danger:        #ef4444;
	--sc-danger-hover:  #dc2626;
	--sc-danger-shadow: rgba(220, 38, 38, 0.25);
	--sc-success:       #16a34a;
	--sc-success-light: #4ade80;

	/* ── Button transition (defined here so var() resolves correctly) ── */
	--sc-btn-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out,
	                     transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* Links */
a {
	color: var(--sc-link);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.14em;
}
a:hover {
	color: var(--sc-link-hover);
}

/* ── Unified Button Base ──────────────────────────────────────────────────
   Covers: HivePress / ListingHive + any third-party plugin buttons (CF7,
   Gravity Forms, Elementor, WooCommerce, bbPress, BuddyPress, etc.)
   Constraint: .site-header buttons keep their own subtle -1px lift below.
   ────────────────────────────────────────────────────────────────────────── */
.button,
button[type="submit"],
input[type="submit"],
input[type="button"],
.hp-form__button,
.hp-button,
.wp-block-button__link,
.wpcf7-submit,
.gform_button,
.nf-form-cont input[type="submit"],
.edd-submit,
.bbp-submit-wrapper button,
a.button,
a.sc-listings-section__link,
a.sc-categories-sidebar__show-all {
	background-color: var(--sc-primary);
	border-color: var(--sc-primary);
	color: var(--sc-text-dark);
	transition: var(--sc-btn-transition);
	will-change: transform, box-shadow;
}

/* ── Universal Hover — -2px lift + 10% brightness, 0.2s ease-in-out ─────── */
body:not(.admin-bar) .button:hover,
body button[type="submit"]:hover,
body input[type="submit"]:hover,
body .hp-form__button:hover,
body .hp-button:hover,
body .wp-block-button__link:hover,
body .wpcf7-submit:hover,
body .gform_button:hover,
body .nf-form-cont input[type="submit"]:hover,
body .edd-submit:hover,
body .bbp-submit-wrapper button:hover,
body a.button:hover,
body a.sc-listings-section__link:hover,
body a.sc-categories-sidebar__show-all:hover {
	background-color: var(--sc-primary-hover);
	border-color: var(--sc-primary-hover);
	color: var(--sc-text-dark);
	filter: brightness(1.1);
	box-shadow: 0 4px 16px rgba(203, 237, 68, 0.30), var(--sc-shadow-2);
	transform: translateY(-2px);
}

/* Active: physical press — scale back, remove shadow */
.button:active,
button[type="submit"]:active,
input[type="submit"]:active,
.hp-form__button:active,
.hp-button:active,
.wp-block-button__link:active,
.wpcf7-submit:active,
.gform_button:active,
a.button:active {
	filter: brightness(1);
	transform: translateY(0) scale(0.98);
	box-shadow: none;
	transition-duration: 0.08s; /* instant snap-back on press */
}

/* Header exception: keep subtle -1px lift (header has its own CTA style) */
.site-header .button:hover,
.site-header button[type="submit"]:hover,
.site-header input[type="submit"]:hover,
.site-header a.button:hover {
	transform: translateY(-1px);
	box-shadow: var(--sc-shadow-1);
}

/* Reduced motion: remove lift & shadow animation for accessibility */
@media (prefers-reduced-motion: reduce) {
	.button, button[type="submit"], input[type="submit"],
	.hp-form__button, .hp-button, .wpcf7-submit,
	.gform_button, .wp-block-button__link, a.button {
		transition: background-color 0.15s ease, border-color 0.15s ease;
	}
	.button:hover, button[type="submit"]:hover, input[type="submit"]:hover,
	.hp-form__button:hover, .hp-button:hover, a.button:hover {
		transform: none;
		box-shadow: none;
	}
}

/* HivePress primary / secondary buttons */
.button--primary,
.hp-button--primary {
	background-color: var(--sc-primary);
	border-color: var(--sc-primary);
}
.button--primary:hover,
.hp-button--primary:hover {
	background-color: var(--sc-primary-dark);
	border-color: var(--sc-primary-dark);
	filter: brightness(95%);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(48, 92, 42, 0.2);
}
.button--secondary,
.hp-button--secondary {
	border-color: var(--sc-border);
	color: var(--sc-text-dark);
}
.button--secondary:hover,
.hp-button--secondary:hover {
	border-color: var(--sc-primary);
	color: var(--sc-primary);
	transform: translateY(-1px);
}

/* ── Destructive button (HIG: always provide a clear danger variant) ─────── */
.button--danger,
.hp-button--danger,
.sc-btn-danger {
	background-color: var(--sc-danger);
	border-color:     var(--sc-danger);
	color:            #ffffff;
}
body .button--danger:hover,
body .hp-button--danger:hover,
body .sc-btn-danger:hover {
	background-color: var(--sc-danger-hover);
	border-color:     var(--sc-danger-hover);
	color:            #ffffff;
	box-shadow: 0 4px 12px var(--sc-danger-shadow);
}

/* ── Ghost button variant ─────────────────────────────────────────────────
   Transparent bg, border = primary colour. Used for secondary CTAs.        */
.button--ghost,
.hp-button--ghost,
.sc-btn-ghost {
	background-color: transparent;
	border: 2px solid var(--sc-primary);
	color: var(--sc-primary-dark);
}
body .button--ghost:hover,
body .hp-button--ghost:hover,
body .sc-btn-ghost:hover {
	background-color: var(--sc-primary);
	border-color:     var(--sc-primary);
	color:            var(--sc-text-dark);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(203, 237, 68, 0.3);
}

/* ── Button size variants ─────────────────────────────────────────────────
   Small: tight padding for inline/chip use. Large: prominent page CTA.     */
.button--sm,
.hp-button--sm,
.sc-btn-sm {
	padding: 0.375rem 0.875rem;
	font-size: var(--sc-text-sm);
	min-height: 32px;
	border-radius: var(--sc-radius-sm);
}
.button--lg,
.hp-button--lg,
.sc-btn-lg {
	padding: 0.875rem 2rem;
	font-size: var(--sc-text-lg);
	min-height: 52px;
	border-radius: var(--sc-radius-lg);
}

/* ── Button loading state ─────────────────────────────────────────────────
   Add .button--loading to disable pointer interaction and show spinner.
   The button must have a child <span> wrapping the label text.             */
.button--loading,
.hp-button--loading {
	position: relative;
	pointer-events: none;
	opacity: 0.75;
}
.button--loading > span,
.hp-button--loading > span {
	visibility: hidden;
}
.button--loading::after,
.hp-button--loading::after {
	content: '';
	position: absolute;
	inset: 0;
	margin: auto;
	width:  18px;
	height: 18px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: var(--sc-radius-full);
	animation: sc-spin 0.7s linear infinite;
}
@keyframes sc-spin {
	to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.button--loading::after,
	.hp-button--loading::after { animation-duration: 2s; }
}

/* ── Button disabled state (universal) ───────────────────────────────────── */
.button:disabled,
button[type="submit"]:disabled,
input[type="submit"]:disabled,
input[type="button"]:disabled,
.hp-form__button:disabled,
.hp-button:disabled,
a.button[aria-disabled="true"] {
	opacity: 0.45;
	pointer-events: none;
	transform: none !important;
	box-shadow: none !important;
}

/* ── Input / select hover state ──────────────────────────────────────────── */
.hp-field input:not(:focus):hover,
.hp-field select:not(:focus):hover,
.hp-field textarea:not(:focus):hover,
input:not(:focus):not(:disabled):hover,
select:not(:focus):not(:disabled):hover,
textarea:not(:focus):not(:disabled):hover {
	border-color: var(--sc-primary-dark);
}

/* ── Dropdown component ───────────────────────────────────────────────────
   Usage: <div class="sc-dropdown sc-dropdown--open"> (toggle JS class)
          <button class="sc-dropdown__trigger">…</button>
          <ul class="sc-dropdown__menu">
            <li><a class="sc-dropdown__item" href="…">…</a></li>
          </ul>
   </div>                                                                    */
.sc-dropdown {
	position: relative;
	display: inline-block;
}
.sc-dropdown__menu {
	position: absolute;
	top: calc(100% + var(--sc-space-1));
	inset-inline-end: 0;
	z-index: var(--sc-z-dropdown);
	min-width: 180px;
	margin: 0;
	padding: var(--sc-space-2) 0;
	list-style: none;
	background: #fff;
	border: 1px solid var(--sc-border);
	border-radius: var(--sc-radius);
	box-shadow: var(--sc-shadow-3);
	/* Hidden by default — toggled by .sc-dropdown--open */
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}
.sc-dropdown--open .sc-dropdown__menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 0.15s ease, transform 0.15s ease;
}
.sc-dropdown__item {
	display: block;
	padding: var(--sc-space-2) var(--sc-space-4);
	color: var(--sc-text-dark);
	font-size: var(--sc-text-body);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.12s ease, color 0.12s ease;
}
.sc-dropdown__item:hover,
.sc-dropdown__item:focus-visible {
	background-color: var(--sc-bg-light);
	color: var(--sc-primary-dark);
	outline: none;
}
/* Divider between groups */
.sc-dropdown__divider {
	height: 1px;
	margin: var(--sc-space-2) 0;
	background: var(--sc-border);
}
@media (prefers-reduced-motion: reduce) {
	.sc-dropdown__menu { transition: none; }
}

/* ── Form field validation states (HIG: immediate, clear, inline feedback) ──
   Custom classes: .sc-field--error / .sc-field--success on wrapper
   HivePress native: .hp-form__field--errors on wrapper
   Native CSS:       :user-invalid pseudo-class (no-JS fallback)             */

/* Transition on the input itself so the border change is smooth */
.hp-field input,
.hp-field select,
.hp-field textarea,
.sc-field--error  input,
.sc-field--success input {
	transition: border-color var(--sc-transition), box-shadow var(--sc-transition);
}

/* Error state */
.sc-field--error  .hp-form__field-input,
.sc-field--error  input,
.sc-field--error  select,
.sc-field--error  textarea,
.hp-form__field--errors input,
.hp-form__field--errors select,
.hp-form__field--errors textarea,
input:user-invalid,
select:user-invalid,
textarea:user-invalid {
	border-color: var(--sc-danger);
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

/* Success state */
.sc-field--success .hp-form__field-input,
.sc-field--success input,
.sc-field--success select,
.sc-field--success textarea {
	border-color: var(--sc-success-light);
	box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.15);
}

/* Message text below the field */
.sc-field__message,
.hp-form__field-error {
	display: block;
	margin-top: 0.375rem;
	font-size: var(--sc-text-sm);
	font-weight: 500;
	/* Slide in from above */
	animation: sc-field-msg-in 0.18s ease forwards;
}
@keyframes sc-field-msg-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.sc-field__message,
	.hp-form__field-error { animation: none; }
}

.sc-field--error  .sc-field__message,
.hp-form__field--errors .hp-form__field-error { color: var(--sc-danger-hover); }
.sc-field--success .sc-field__message { color: var(--sc-success); }

/* Field label turns red on error (HIG: visual grouping) */
.hp-form__field--errors .hp-form__field-label { color: var(--sc-danger-hover); }

/* Listing cards – borders and background */
.hp-listing--view-block,
.hp-listing-category--view-block {
	border-color: var(--sc-border);
	background-color: #fff;
}
.hp-listing--view-block:hover,
.hp-listing-category--view-block:hover {
	border-color: var(--sc-border);
}
.hp-listing__title a,
.hp-listing-category__name a {
	color: var(--sc-text-dark);
}
.hp-listing__title a:hover,
.hp-listing-category__name a:hover {
	color: var(--sc-primary);
}

/* Section backgrounds */
.site-content,
.hp-container {
	background-color: var(--sc-bg-light);
}
.widget,
.hp-block,
.hp-form {
	background-color: #fff;
	border-color: var(--sc-border);
}

/* Global borders */
hr,
.hp-divider,
.hp-form__field,
.hp-listing__content > *,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="search"],
select,
textarea {
	border-color: var(--sc-border);
}

/* Text – main content dark */
body,
.site-content,
.hp-block,
.hp-form__label {
	color: var(--sc-text-dark);
}

/* ----------------------------------------------------------------------------
   Modern UI best practices – classifieds / marketplace
   Spacing, typography, touch targets, cards, focus, containers, transitions
---------------------------------------------------------------------------- */

/* Base: readable body text and line-height */
body {
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* ── Sticky Footer ────────────────────────────────────────────────────────
   Parent theme sets html,body { height:100%; display:flex; } which causes
   stray wp_footer() output (modals, nav) to become flex children, creating
   blank space. Override to block layout on body; flex only on .site-container.
   ─────────────────────────────────────────────────────────────────────── */
html {
	height: auto !important;
	margin: 0;
	padding: 0;
}
body {
	height: auto !important;
	display: block !important;
	margin: 0;
	padding: 0;
}
.site-container,
#page,
.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
.site-content,
#content,
.content-area {
	flex: 1 0 auto;
	padding-top: var(--sc-space-6);
	padding-bottom: var(--sc-space-8);
}
.site-footer,
#colophon,
footer.site-footer {
	flex-shrink: 0;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-bottom: 0;
}

/* Container: max-width and horizontal padding for readability */
.site-content .container,
.hp-container .container {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--sc-space-4);
	padding-right: var(--sc-space-4);
}
@media (min-width: 768px) {
	.site-content .container,
	.hp-container .container {
		padding-left: var(--sc-space-6);
		padding-right: var(--sc-space-6);
	}
}

/* Typography: heading scale and spacing */
.site-content h1,
.hp-block h1 {
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.3;
	margin-top: 0;
	margin-bottom: var(--sc-space-4);
}
.site-content h2,
.hp-block h2 {
	font-size: 1.25rem;
	font-weight: 600;
	margin-bottom: var(--sc-space-3);
}
.site-content h3,
.hp-block h3 {
	font-size: 1.1rem;
	font-weight: 600;
	margin-bottom: var(--sc-space-2);
}

/* Touch-friendly interactive elements (min 44px height where possible) */
.site-header .header-navbar__menu ul li a,
.site-header .hp-menu__item a,
.site-header .hp-menu__item .button {
	min-height: var(--sc-touch);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}
.button,
button[type="submit"],
input[type="submit"],
.hp-button {
	min-height: var(--sc-touch);
	padding: var(--sc-space-2) var(--sc-space-4);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--sc-radius-sm);
	transition: background-color var(--sc-transition), border-color var(--sc-transition), opacity var(--sc-transition);
}

/* Cards: consistent radius, subtle shadow, hover */
.hp-listing--view-block,
.hp-listing-category--view-block,
.widget,
.hp-block,
.hp-form {
	border-radius: var(--sc-radius);
	border-width: 1px;
	border-style: solid;
	transition: box-shadow var(--sc-transition), border-color var(--sc-transition);
}
.hp-listing--view-block:hover,
.hp-listing-category--view-block:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* Keep HivePress native listing layout on internal pages.
   Custom front page grid is handled by .sc-listings-grid in marketplace.css. */

/* Form inputs: consistent height, padding, radius */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="url"],
select,
textarea,
.hp-field input,
.hp-field select,
.hp-field textarea {
	min-height: var(--sc-touch);
	padding: var(--sc-space-2) var(--sc-space-3);
	border-radius: var(--sc-radius-sm);
	border-width: 1px;
	border-style: solid;
	transition: border-color var(--sc-transition), box-shadow var(--sc-transition);
}
textarea,
.hp-field textarea {
	min-height: 100px;
	padding: var(--sc-space-3);
}

/* Focus states: visible outline for accessibility (keyboard/screen readers) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.button:focus-visible,
.hp-button:focus-visible {
	outline: 2px solid var(--sc-primary);
	outline-offset: 2px;
}
.hp-listing--view-block:focus-within,
.hp-listing-category--view-block:focus-within {
	box-shadow: 0 0 0 2px var(--sc-primary);
}

/* ----------------------------------------------------------------------------
   Skip link (HIG: Accessibility — keyboard & screen-reader first navigation)
---------------------------------------------------------------------------- */
.sc-skip-link {
	position: absolute;
	inset-inline-start: 1rem;
	top: -100%;
	z-index: var(--sc-z-toast);
	padding: 0.6rem 1.25rem;
	background: var(--sc-primary-dark);
	color: #ffffff;
	font-weight: 600;
	font-size: var(--sc-text-md);
	border-radius: var(--sc-radius-sm);
	text-decoration: none;
	transition: top 0.15s ease;
}
.sc-skip-link:focus {
	top: 1rem;
}

/* ----------------------------------------------------------------------------
   Skeleton loader (HIG: Patterns — immediate perceived-performance feedback)
---------------------------------------------------------------------------- */
@keyframes sc-shimmer {
	0%   { background-position: -400px 0; }
	100% { background-position:  400px 0; }
}
.sc-skeleton {
	background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 37%, #f0f0f0 63%);
	background-size: 800px 100%;
	animation: sc-shimmer 1.4s ease infinite;
	border-radius: var(--sc-radius-sm);
}
/* Skeleton card layout mirrors real listing card */
.sc-skeleton-card {
	border: 1px solid var(--sc-border);
	border-radius: var(--sc-radius);
	overflow: hidden;
}
.sc-skeleton-card__image {
	aspect-ratio: 4/3;
	width: 100%;
}
.sc-skeleton-card__body {
	padding: 12px 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.sc-skeleton-card__title  { height: 14px; width: 80%; }
.sc-skeleton-card__price  { height: 18px; width: 40%; }
.sc-skeleton-card__meta   { height: 12px; width: 60%; }
@media (prefers-reduced-motion: reduce) {
	.sc-skeleton { animation: none; background: #f0f0f0; }
}

/* ----------------------------------------------------------------------------
   Mobile Tab Bar (HIG: Navigation — Tab Bar for 3–5 top-level destinations)
   Shown only on screens < 768px. Covers safe area on notched phones (iOS).
---------------------------------------------------------------------------- */
.sc-tab-bar {
	display: none; /* JS activates on mobile */
}
@media (max-width: 767px) {
	.sc-tab-bar {
		display: flex;
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		z-index: var(--sc-z-header);
		background: #ffffff;
		border-top: 1px solid var(--sc-border);
		box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
		padding-bottom: env(safe-area-inset-bottom, 0); /* iPhone notch */
	}
	.sc-tab-bar__item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		padding: 0.5rem 0.25rem;
		min-height: var(--sc-touch);
		color: var(--sc-text-muted);
		text-decoration: none;
		font-size: var(--sc-text-xs);
		font-weight: 500;
		transition: color 0.15s ease;
		border: none;
		background: none;
		cursor: pointer;
	}
	.sc-tab-bar__item svg {
		width: 22px;
		height: 22px;
		flex-shrink: 0;
		transition: transform 0.15s ease;
	}
	.sc-tab-bar__item:hover,
	.sc-tab-bar__item:focus-visible {
		color: var(--sc-primary-dark);
		outline: none;
	}
	.sc-tab-bar__item--active {
		color: var(--sc-primary-dark);
		font-weight: 600;
	}
	/* CTA item (post ad) — highlighted */
	.sc-tab-bar__item--cta {
		color: var(--sc-primary-dark);
	}
	.sc-tab-bar__item--cta svg {
		background: var(--sc-primary);
		border-radius: 50%;
		padding: 5px;
		width: 34px;
		height: 34px;
		box-shadow: 0 2px 8px rgba(203, 237, 68, 0.4);
	}
	/* Push page content above the tab bar */
	body.sc-has-tab-bar .site-content,
	body.sc-has-tab-bar .hp-page {
		padding-bottom: calc(60px + env(safe-area-inset-bottom, 0));
	}
	@media (prefers-reduced-motion: reduce) {
		.sc-tab-bar__item,
		.sc-tab-bar__item svg { transition: none; }
	}
}

/* ----------------------------------------------------------------------------
   AJAX Loading State (HIG: Patterns — loading feedback during filter updates)
   .sc-listings--loading is toggled by JS on hp_listings_before/after_update
---------------------------------------------------------------------------- */
@keyframes sc-spin {
	to { transform: translate(-50%, -50%) rotate(360deg); }
}
.sc-listings--loading {
	position: relative;
	pointer-events: none;
	min-height: 200px;
}
.sc-listings--loading::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.72);
	border-radius: var(--sc-radius);
	z-index: 8;
}
.sc-listings--loading::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 36px;
	height: 36px;
	border: 3px solid var(--sc-border);
	border-top-color: var(--sc-primary-dark);
	border-radius: 50%;
	animation: sc-spin 0.75s linear infinite;
	z-index: 9;
}
@media (prefers-reduced-motion: reduce) {
	.sc-listings--loading::before {
		animation: none;
		border-top-color: var(--sc-primary);
	}
}

/* ----------------------------------------------------------------------------
   Hero CTA (HIG: Hierarchy — primary action should be unmissable)
---------------------------------------------------------------------------- */
.sc-hero-cta {
	font-size: var(--sc-text-lg);
	padding: 0.875rem 2.5rem;
	border-radius: var(--sc-radius);
	box-shadow: 0 4px 20px rgba(203, 237, 68, 0.45);
	letter-spacing: 0.01em;
}
.sc-hero-cta:hover {
	box-shadow: 0 6px 24px rgba(203, 237, 68, 0.55);
}

/* ----------------------------------------------------------------------------
   Toast notifications (HIG: Feedback — every action needs clear response)
---------------------------------------------------------------------------- */
#sc-toast-region {
	position: fixed;
	inset-block-end: 1.5rem;
	inset-inline-end: 1.5rem;
	z-index: var(--sc-z-toast);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	pointer-events: none;
}
.sc-toast {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.75rem 1rem;
	background: var(--sc-text-dark);
	color: #ffffff;
	border-radius: var(--sc-radius);
	font-size: var(--sc-text-body);
	font-weight: 500;
	box-shadow: var(--sc-shadow-3);
	pointer-events: auto;
	max-width: min(320px, calc(100vw - 3rem));
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.22s ease, transform 0.22s ease;
}
.sc-toast--visible {
	opacity: 1;
	transform: translateY(0);
}
.sc-toast--success { border-inline-start: 3px solid #4ade80; }
.sc-toast--error   { border-inline-start: 3px solid #f87171; }
.sc-toast--info    { border-inline-start: 3px solid var(--sc-primary); }
@media (prefers-reduced-motion: reduce) {
	.sc-toast { transition: none; }
}

/* Respect reduced-motion user setting across the entire site */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Sections: vertical rhythm */
.hp-block + .hp-block,
.widget + .widget,
.hp-form + .hp-block {
	margin-top: var(--sc-space-6);
}

/* Dividers and spacing inside blocks */
.hp-divider {
	margin: var(--sc-space-4) 0;
	border-width: 0 0 1px 0;
}
.hp-form__field {
	margin-bottom: var(--sc-space-4);
}
.hp-listing__content > * + *,
.hp-listing-category__content > * + * {
	margin-top: var(--sc-space-2);
}

/* ----------------------------------------------------------------------------
   RTL – قلب الواجهة (هيدر، قوائم، بطاقات، فلاتر)
   يطبّق عندما لغة الموقع عربية (WordPress يضيف .rtl للـ body)
---------------------------------------------------------------------------- */

body.rtl {
	direction: rtl;
	text-align: right;
}

/* الهيدر: الشعار يمين، القائمة والأزرار يسار */
body.rtl .site-header .header-navbar {
	flex-direction: row-reverse;
}
body.rtl .site-header .header-navbar__start {
	text-align: right;
}
body.rtl .site-header .header-navbar__end {
	flex-direction: row-reverse;
}

/* قائمة التنقل: ترتيب من اليمين لليسار */
body.rtl .site-header .header-navbar__menu ul {
	flex-direction: row-reverse;
}
body.rtl .site-header .header-navbar__actions,
body.rtl .site-header .hp-menu--site-header.hp-menu--main {
	flex-direction: row-reverse;
}

/* البرجر (موبايل): القائمة من اليمين */
body.rtl .site-header .header-navbar__burger > ul {
	text-align: right;
}

/* منطقة البحث والفلاتر: الحقول من اليمين لليسار */
body.rtl .hp-search-form,
body.rtl .hp-filter {
	direction: rtl;
	text-align: right;
}
body.rtl .hp-search-form .hp-form__fields,
body.rtl .hp-filter .hp-form__fields {
	flex-direction: row-reverse;
}
body.rtl .hp-form__field {
	text-align: right;
}
body.rtl input[type="text"],
body.rtl input[type="search"],
body.rtl input[type="email"],
body.rtl input[type="number"],
body.rtl select,
body.rtl textarea,
body.rtl .hp-field input,
body.rtl .hp-field select,
body.rtl .hp-field textarea {
	text-align: right;
	direction: rtl;
}

/* بطاقات التصنيفات والقوائم: تدفق RTL */
body.rtl .hp-listings,
body.rtl .hp-listing-categories {
	direction: rtl;
}
body.rtl .hp-listing--view-block,
body.rtl .hp-listing-category--view-block {
	text-align: right;
}

/* الويدجات والبلوكات: محاذاة النص */
body.rtl .widget,
body.rtl .hp-block,
body.rtl .hp-form {
	text-align: right;
}
body.rtl .widget ul,
body.rtl .hp-menu ul {
	padding-right: 0;
	padding-left: 0;
}

/* الحاويات: هوامش منطقية لـ RTL */
body.rtl .site-content .container,
body.rtl .hp-container .container {
	margin-right: auto;
	margin-left: auto;
}

/* ── Arabic Typography: Cairo (headings) + Tajawal (body) font pair ─────────
   Cairo is geometric, wide, great for titles at large sizes.
   Tajawal is compact, readable, perfect for body/UI text.
   Applied globally when locale is Arabic (body.rtl / body.listinghive-child-rtl-font).
   ─────────────────────────────────────────────────────────────────────────── */

/* Body copy, inputs, buttons — Tajawal */
body.listinghive-child-rtl-font,
body.rtl,
body.rtl input,
body.rtl button,
body.rtl select,
body.rtl textarea,
body.rtl .site-footer,
body.rtl .button,
body.rtl .hp-menu__item,
body.rtl p,
body.rtl li,
body.rtl span,
body.rtl label {
	font-family: 'Tajawal', 'Segoe UI', Tahoma, sans-serif !important;
}

/* Headings — Cairo (stronger visual hierarchy) */
body.rtl h1,
body.rtl h2,
body.rtl h3,
body.rtl h4,
body.rtl h5,
body.rtl h6,
body.rtl .hp-listing__title,
body.rtl .sc-listing-card__title,
body.rtl .sc-hero-intro__title,
body.rtl .sc-latest-listings__heading,
body.rtl .sc-how-it-works__title,
body.rtl .widget-title,
body.rtl .entry-title {
	font-family: 'Cairo', 'Tajawal', 'Segoe UI', Tahoma, sans-serif !important;
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* Large display headings: heavier weight for impact */
body.rtl h1,
body.rtl .sc-hero-intro__title {
	font-weight: 900;
}

/* ==========================================================================
   Homepage Sidebar Categories Override
   ========================================================================== */

.home .hp-widget {
	background: #ffffff;
	border: 1px solid #d1d1d1;
	border-radius: 8px;
	padding: 16px 20px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.home .hp-form--listing-filter input[type="checkbox"], 
.home .hp-form--listing-filter input[type="radio"] { 
	display: none !important; 
}

body.rtl .home .hp-form--listing-filter label { 
	display: flex; 
	align-items: center; 
	width: 100%; 
	cursor: pointer; 
	margin: 0; 
	padding: 12px 0; 
	border-bottom: 1px solid #f2f2f2; 
	color: var(--sc-text-dark); 
	font-size: var(--sc-text-body); 
	font-weight: 500; 
	transition: all 0.2s ease; 
}

body.rtl .home .hp-form--listing-filter li:last-child label { 
	border-bottom: none; 
}

body.rtl .home .hp-form--listing-filter label:hover { 
	color: var(--sc-primary-dark); 
	padding-right: 5px; 
	background-color: transparent; 
}

body.rtl .home .hp-form--listing-filter label::after { 
	content: '\2039'; /* Left Chevron */ 
	margin-right: auto; /* Pushes arrow to the left in RTL */ 
	color: #a1a1a1; 
	font-size: var(--sc-text-xl); 
	font-weight: bold; 
	line-height: 1; 
	transition: color 0.2s ease; 
}

body.rtl .home .hp-form--listing-filter label:hover::after { 
	color: var(--sc-primary-dark); 
}

/* Subcategories styling */
body.rtl .home .hp-form--listing-filter ul ul label {
	font-size: var(--sc-text-body);
	color: var(--sc-text-muted);
}

/* Show All / More text styling */
body.rtl .home .hp-form--listing-filter a.hp-filter__more,
body.rtl .home .hp-form--listing-filter a.hp-more,
body.rtl .home .hp-form--listing-filter a {
	color: var(--sc-primary-dark);
	font-size: var(--sc-text-sm);
	font-weight: 600;
	padding: 8px 0;
	display: inline-block;
	text-decoration: none;
}

body.rtl .home .hp-form--listing-filter a::after {
	display: none !important; /* Ensure no chevron on generic links */
}

/* ==========================================================================
   Homepage Listing Cards Override (Kleinanzeigen Style)
   ========================================================================== */

/* 1. Card Container (The Wrapper) */
.home .hp-listing {
	background-color: #ffffff;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	display: flex;
	flex-direction: column;
	height: 100%;
	box-shadow: none !important;
}

/* HIG: shadow-only hover avoids layout reflow; translateY is additive via motion query */
.home .hp-listing:hover {
	box-shadow: var(--sc-shadow-3) !important;
	border-color: #d1d1d1;
}
@media (prefers-reduced-motion: no-preference) {
	.home .hp-listing:hover {
		transform: translateY(-3px);
	}
}

/* 2. Listing Image Section */
.home .hp-listing__header,
.home .hp-listing__image {
	margin: 0;
	padding: 0;
	width: 100%;
	aspect-ratio: 4/3;
	position: relative;
	border-bottom: 1px solid #f2f2f2;
}

.home .hp-listing__header img,
.home .hp-listing__image img {
	width: 100%;
	height: 100%;
	object-fit: cover !important;
	border-radius: 8px 8px 0 0;
}

.home .hp-listing__header a,
.home .hp-listing__image a {
	display: block;
	height: 100%;
}

/* 3. Listing Content Area (Text & Details) */
.home .hp-listing__content,
.home .hp-listing__details {
	padding: 12px 16px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: 8px;
}

/* 4. Listing Title */
.home .hp-listing__title {
	font-size: var(--sc-text-body);
	font-weight: 500;
	color: var(--sc-text-dark);
	margin: 0;
	line-height: 1.4;
}

.home .hp-listing__title a {
	color: inherit;
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color 0.2s;
}

.home .hp-listing__title a:hover {
	color: var(--sc-primary-dark);
}

/* 5. Listing Price (The Focal Point) */
.home .hp-listing__attribute--price,
.home .hp-listing__price,
.home .hp-listing__attributes--primary .hp-listing__attribute:last-child {
	font-size: var(--sc-text-lg) !important;
	font-weight: 700 !important;
	color: var(--sc-primary-dark) !important;
	margin-top: auto;
	padding-top: 6px;
	display: block;
}

/* Remove default bullet points or weird styling from lists */
.home .hp-listing__attributes {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* 6. Meta Details (Location, Category, Vendor) */
.home .hp-listing__categories,
.home .hp-listing__location,
.home .hp-listing__vendor,
.home .hp-listing__attributes--secondary {
	font-size: var(--sc-text-sm);
	color: var(--sc-text-muted, #555555);
	display: flex;
	align-items: center;
	gap: 5px;
	flex-wrap: wrap;
	margin-bottom: 0;
	line-height: 1.5;
}

/* 7. Actions (Favorite / Heart Icon) */
.home .hp-listing__action--favorite,
.home .sc-listing-card__favorite {
	position: absolute;
	top: 8px;
	right: 8px;
	left: auto;
	background: rgba(255,255,255,0.9);
	border-radius: 50%;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 4px rgba(0,0,0,0.12);
	color: #444;
	z-index: 2;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
	border: none;
	padding: 0;
	cursor: pointer;
}

body.home.rtl .hp-listing__action--favorite,
body.home.rtl .sc-listing-card__favorite {
	left: 8px;
	right: auto;
}

.home .hp-listing__action--favorite:hover,
.home .sc-listing-card__favorite:hover {
	background: #ffffff;
	color: #e53935;
	transform: scale(1.08);
}

/* ============================================================================
   Task B.2 — HivePress Messages: near-real-time UX enhancements
   ============================================================================ */

/* Unread message count badge — pulsing green dot */
.hp-menu__item--user-messages .hp-menu__item-badge,
.sc-messages-badge {
	background: var(--sc-primary) !important;
	color: var(--sc-text-dark) !important;
	animation: sc-badge-pulse 2s ease-in-out infinite;
}
@keyframes sc-badge-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(203, 237, 68, 0.6); }
	50%       { box-shadow: 0 0 0 6px rgba(203, 237, 68, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.hp-menu__item--user-messages .hp-menu__item-badge { animation: none; }
}

/* Message thread: tighter, chat-bubble feel */
.hp-messages__thread {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
}
.hp-message {
	max-width: 78%;
	padding: 10px 14px;
	border-radius: 16px;
	font-size: var(--sc-text-body);
	line-height: 1.5;
	word-break: break-word;
}
/* Messages sent by current user — right-aligned lime bubble */
.hp-message--outgoing,
.hp-message--sent {
	align-self: flex-end;
	background: var(--sc-primary);
	color: var(--sc-text-dark);
	border-bottom-right-radius: 4px;
}
/* Messages received — left-aligned grey bubble */
.hp-message--incoming,
.hp-message--received {
	align-self: flex-start;
	background: #f1f5f9;
	color: #1e293b;
	border-bottom-left-radius: 4px;
}
body.rtl .hp-message--outgoing,
body.rtl .hp-message--sent {
	align-self: flex-start;
	border-bottom-right-radius: 16px;
	border-bottom-left-radius: 4px;
}
body.rtl .hp-message--incoming,
body.rtl .hp-message--received {
	align-self: flex-end;
	border-bottom-left-radius: 16px;
	border-bottom-right-radius: 4px;
}
/* Timestamp under each bubble */
.hp-message__time {
	font-size: var(--sc-text-xs);
	color: #94a3b8;
	margin-top: 4px;
	display: block;
}
/* Send input bar: sticky at bottom */
.hp-messages__form {
	position: sticky;
	bottom: 0;
	background: #fff;
	border-top: 1px solid var(--sc-border);
	padding: 12px 16px;
	z-index: var(--z-sticky, 10);
}

/* ============================================================================
   Task B.3 — HivePress Reviews: trust signals styling
   ============================================================================ */

/* Star rating display */
.hp-listing__rating,
.hp-vendor__rating {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-weight: 700;
	color: var(--sc-primary-dark);
}
.hp-listing__rating-stars,
.hp-vendor__rating-stars {
	color: #f59e0b; /* amber stars */
}
.hp-listing__reviews-count,
.hp-vendor__reviews-count {
	font-size: var(--sc-text-sm);
	color: var(--sc-text-muted);
}
/* Response time badge (custom — see PHP below) */
.sc-response-time {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--sc-text-sm);
	font-weight: 600;
	color: #0369a1;
	background: #e0f2fe;
	padding: 3px 10px;
	border-radius: 99px;
}
.sc-response-time svg { flex-shrink: 0; }

/* ============================================================================
   MICRO-INTERACTIONS (Kleinanzeigen / HIG standard)
   Every interaction should feel physical, instant, and purposeful.
   ============================================================================ */

/* ── 1. Search bar focus glow ─────────────────────────────────────────────
   Expands 2px, shows primary-colour ring, matches iOS keyboard raise.       */
.sc-mkp-header__pill-input,
input[type="search"].hp-search__field,
.hp-form--listing-search input[type="text"] {
	transition: box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out,
	            width 0.25s ease-in-out;
}
.sc-mkp-header__pill-input:focus,
input[type="search"].hp-search__field:focus,
.hp-form--listing-search input[type="text"]:focus {
	outline: none;
	border-color: var(--sc-primary-dark);
	box-shadow: 0 0 0 3px rgba(203, 237, 68, 0.35), var(--sc-shadow-1);
}

/* ── 2. Listing card — subtle lift on hover (Kleinanzeigen feel) ─────────── */
.hp-listing--view-block {
	transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out,
	            border-color 0.2s ease-in-out;
}
.hp-listing--view-block:hover {
	transform: translateY(-3px);
	box-shadow: var(--sc-shadow-3);
	border-color: transparent;
}
.hp-listing--view-block:active {
	transform: translateY(-1px);
	box-shadow: var(--sc-shadow-2);
}
@media (prefers-reduced-motion: reduce) {
	.hp-listing--view-block { transition: box-shadow 0.15s ease, border-color 0.15s ease; }
	.hp-listing--view-block:hover { transform: none; }
}

/* ── 3. Heart / favourite icon animation ──────────────────────────────────
   Works with HivePress .hp-toggle-link and our custom .sc-favourite-btn.
   JS should add .is-active to trigger the pop.                             */
.hp-toggle-link,
.sc-favourite-btn {
	transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
}
.hp-toggle-link:hover,
.sc-favourite-btn:hover {
	transform: scale(1.15);
}
.hp-toggle-link.is-active,
.sc-favourite-btn.is-active {
	color: #ef4444;
}
@keyframes sc-heart-pop {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.35); }
	70%  { transform: scale(0.9); }
	100% { transform: scale(1); }
}
.hp-toggle-link.sc-heart-animate,
.sc-favourite-btn.sc-heart-animate {
	animation: sc-heart-pop 0.4s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
	.hp-toggle-link, .sc-favourite-btn { transition: color 0.15s ease; }
	.hp-toggle-link.sc-heart-animate,
	.sc-favourite-btn.sc-heart-animate { animation: none; }
}

/* ── 4. Category grid item — icon bounce on hover ────────────────────────── */
.sc-listing-category-card,
.hp-listing-category--view-block {
	transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.sc-listing-category-card:hover,
.hp-listing-category--view-block:hover {
	transform: translateY(-4px);
	box-shadow: var(--sc-shadow-2);
}
.sc-listing-category-card:hover .sc-cat-icon svg,
.hp-listing-category--view-block:hover .hp-listing-category__image {
	animation: sc-icon-bounce 0.35s ease-in-out;
}
@keyframes sc-icon-bounce {
	0%, 100% { transform: translateY(0); }
	50%       { transform: translateY(-5px); }
}

/* ── 5. Filter chips — pop in when added ─────────────────────────────────── */
@keyframes sc-chip-pop-in {
	from { opacity: 0; transform: scale(0.85); }
	to   { opacity: 1; transform: scale(1); }
}
.sc-active-filters__chip {
	animation: sc-chip-pop-in 0.18s ease-in-out;
}

/* ── 6. Image uploader dropzone — pulse ring when dragging ───────────────── */
@keyframes sc-drop-pulse {
	0%, 100% { box-shadow: 0 0 0 0   rgba(203, 237, 68, 0.5); }
	50%      { box-shadow: 0 0 0 8px rgba(203, 237, 68, 0);   }
}
.sc-upload-dropzone.sc-drag-over {
	border-color: var(--sc-primary-dark);
	animation: sc-drop-pulse 1.2s ease-in-out infinite;
}

/* ── 7. Page-transition fade (SPA-feel within same domain) ───────────────── */
@keyframes sc-page-fade-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}
.site-content,
.hp-page__content,
.hp-block {
	animation: sc-page-fade-in 0.25s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
	.site-content, .hp-page__content, .hp-block { animation: none; }
}

/* ── 8. Tab bar CTA button — attention pulse (mobile only) ───────────────── */
@keyframes sc-cta-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(203, 237, 68, 0.5); }
	60%      { box-shadow: 0 0 0 8px rgba(203, 237, 68, 0);  }
}
@media (max-width: 767px) {
	.sc-tab-bar__item--cta:not(:hover) {
		animation: sc-cta-pulse 2.5s ease-in-out infinite;
	}
	@media (prefers-reduced-motion: reduce) {
		.sc-tab-bar__item--cta { animation: none; }
	}
}

/* ── 9. Number badge roll-up (for unread message counts) ─────────────────── */
@keyframes sc-badge-roll {
	from { transform: translateY(100%); opacity: 0; }
	to   { transform: translateY(0);    opacity: 1; }
}
.sc-badge--new {
	animation: sc-badge-roll 0.25s ease-in-out;
}


/* ==========================================================================
   Global Button Style Lock (Requested)
   Unifies all website buttons to the dark pill style.
   ========================================================================== */

:root {
	/* Button Presets (saved permanently)
	   Style 1: base dark/white -> interaction light/black
	   Style 2: base light/black -> interaction dark/white
	   Style 3: base light with green border/text -> interaction dark/white */
	--sc-btn-style1-bg: #305c2a;
	--sc-btn-style1-border: #305c2a;
	--sc-btn-style1-text: #ffffff;
	--sc-btn-style1-state-bg: #cbed44;
	--sc-btn-style1-state-border: #cbed44;
	--sc-btn-style1-state-text: #121212;
	--sc-btn-style1-state-shadow: 0 8px 16px rgba(203, 237, 68, 0.35);

	--sc-btn-style2-bg: #cbed44;
	--sc-btn-style2-border: #cbed44;
	--sc-btn-style2-text: #121212;
	--sc-btn-style2-state-bg: #305c2a;
	--sc-btn-style2-state-border: #305c2a;
	--sc-btn-style2-state-text: #ffffff;
	--sc-btn-style2-state-shadow: 0 8px 16px rgba(36, 70, 32, 0.24);

	--sc-btn-style3-bg: #ffffff;
	--sc-btn-style3-border: #305c2a;
	--sc-btn-style3-text: #305c2a;
	--sc-btn-style3-state-bg: #305c2a;
	--sc-btn-style3-state-border: #305c2a;
	--sc-btn-style3-state-text: #ffffff;
	--sc-btn-style3-state-shadow: 0 8px 16px rgba(36, 70, 32, 0.24);

	/* Active preset: Style 1 (default) */
	--sc-btn-unified-bg: var(--sc-btn-style1-bg);
	--sc-btn-unified-border: var(--sc-btn-style1-border);
	--sc-btn-unified-text: var(--sc-btn-style1-text);
	--sc-btn-unified-hover: var(--sc-btn-style1-state-bg);
	--sc-btn-unified-hover-border: var(--sc-btn-style1-state-border);
	--sc-btn-unified-hover-text: var(--sc-btn-style1-state-text);
	--sc-btn-unified-hover-shadow: var(--sc-btn-style1-state-shadow);
}

/* Runtime switch helpers:
   - Add .sc-button-style-1 to body for Style 1
   - Add .sc-button-style-2 to body for Style 2
   - Add .sc-button-style-3 to body for Style 3 */
body.sc-button-style-1 {
	--sc-btn-unified-bg: var(--sc-btn-style1-bg);
	--sc-btn-unified-border: var(--sc-btn-style1-border);
	--sc-btn-unified-text: var(--sc-btn-style1-text);
	--sc-btn-unified-hover: var(--sc-btn-style1-state-bg);
	--sc-btn-unified-hover-border: var(--sc-btn-style1-state-border);
	--sc-btn-unified-hover-text: var(--sc-btn-style1-state-text);
	--sc-btn-unified-hover-shadow: var(--sc-btn-style1-state-shadow);
}

body.sc-button-style-2 {
	--sc-btn-unified-bg: var(--sc-btn-style2-bg);
	--sc-btn-unified-border: var(--sc-btn-style2-border);
	--sc-btn-unified-text: var(--sc-btn-style2-text);
	--sc-btn-unified-hover: var(--sc-btn-style2-state-bg);
	--sc-btn-unified-hover-border: var(--sc-btn-style2-state-border);
	--sc-btn-unified-hover-text: var(--sc-btn-style2-state-text);
	--sc-btn-unified-hover-shadow: var(--sc-btn-style2-state-shadow);
}

body.sc-button-style-3 {
	--sc-btn-unified-bg: var(--sc-btn-style3-bg);
	--sc-btn-unified-border: var(--sc-btn-style3-border);
	--sc-btn-unified-text: var(--sc-btn-style3-text);
	--sc-btn-unified-hover: var(--sc-btn-style3-state-bg);
	--sc-btn-unified-hover-border: var(--sc-btn-style3-state-border);
	--sc-btn-unified-hover-text: var(--sc-btn-style3-state-text);
	--sc-btn-unified-hover-shadow: var(--sc-btn-style3-state-shadow);
}

.button,
button[type="submit"],
input[type="submit"],
input[type="button"],
.hp-form__button,
.hp-button,
.wp-block-button__link,
.wpcf7-submit,
.gform_button,
.nf-form-cont input[type="submit"],
.edd-submit,
.bbp-submit-wrapper button,
a.button,
.button--primary,
.hp-button--primary,
.button--secondary,
.hp-button--secondary,
.button--ghost,
.hp-button--ghost,
.button--danger,
.hp-button--danger {
	background-color: var(--sc-btn-unified-bg) !important;
	border-color: var(--sc-btn-unified-border) !important;
	color: var(--sc-btn-unified-text) !important;
	border-radius: var(--sc-radius-full) !important;
	min-height: 44px;
	padding: 0.65rem 1.35rem;
	font-weight: 700;
	box-shadow: none !important;
}

body .button:hover,
body button[type="submit"]:hover,
body input[type="submit"]:hover,
body input[type="button"]:hover,
body .hp-form__button:hover,
body .hp-button:hover,
body .wp-block-button__link:hover,
body .wpcf7-submit:hover,
body .gform_button:hover,
body .nf-form-cont input[type="submit"]:hover,
body .edd-submit:hover,
body .bbp-submit-wrapper button:hover,
body a.button:hover,
body .button--primary:hover,
body .hp-button--primary:hover,
body .button--secondary:hover,
body .hp-button--secondary:hover,
body .button--ghost:hover,
body .hp-button--ghost:hover,
body .button--danger:hover,
body .hp-button--danger:hover {
	background-color: var(--sc-btn-unified-hover) !important;
	border-color: var(--sc-btn-unified-hover-border) !important;
	color: var(--sc-btn-unified-hover-text) !important;
	filter: none !important;
	transform: translateY(-1px) scale(1.03);
	box-shadow: var(--sc-btn-unified-hover-shadow) !important;
}

/* Base text follows unified base token */
.button,
button[type="submit"],
input[type="submit"],
input[type="button"],
.hp-form__button,
.hp-button,
.wp-block-button__link,
.wpcf7-submit,
.gform_button,
.nf-form-cont input[type="submit"],
.edd-submit,
.bbp-submit-wrapper button,
a.button,
.button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.hp-form__button:hover,
.hp-button:hover,
.wp-block-button__link:hover,
a.button:hover,
.button:focus,
button[type="submit"]:focus,
input[type="submit"]:focus,
.hp-button:focus,
.button:active,
button[type="submit"]:active,
input[type="submit"]:active,
.hp-button:active,
a.button:visited,
.button:visited {
	color: var(--sc-btn-unified-text) !important;
}

/* Hover text follows unified hover token */
.button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.hp-form__button:hover,
.hp-button:hover,
.wp-block-button__link:hover,
.wpcf7-submit:hover,
.gform_button:hover,
.nf-form-cont input[type="submit"]:hover,
.edd-submit:hover,
.bbp-submit-wrapper button:hover,
a.button:hover {
	color: var(--sc-btn-unified-hover-text) !important;
}

/* Focus/active must match hover style */
body .button:focus,
body .button:focus-visible,
body button[type="submit"]:focus,
body button[type="submit"]:focus-visible,
body input[type="submit"]:focus,
body input[type="submit"]:focus-visible,
body input[type="button"]:focus,
body input[type="button"]:focus-visible,
body .hp-form__button:focus,
body .hp-form__button:focus-visible,
body .hp-button:focus,
body .hp-button:focus-visible,
body .wp-block-button__link:focus,
body .wp-block-button__link:focus-visible,
body .wpcf7-submit:focus,
body .wpcf7-submit:focus-visible,
body .gform_button:focus,
body .gform_button:focus-visible,
body .nf-form-cont input[type="submit"]:focus,
body .nf-form-cont input[type="submit"]:focus-visible,
body .edd-submit:focus,
body .edd-submit:focus-visible,
body .bbp-submit-wrapper button:focus,
body .bbp-submit-wrapper button:focus-visible,
body a.button:focus,
body a.button:focus-visible,
body .button:active,
body button[type="submit"]:active,
body input[type="submit"]:active,
body input[type="button"]:active,
body .hp-form__button:active,
body .hp-button:active,
body .wp-block-button__link:active,
body .wpcf7-submit:active,
body .gform_button:active,
body .nf-form-cont input[type="submit"]:active,
body .edd-submit:active,
body .bbp-submit-wrapper button:active,
body a.button:active {
	background-color: var(--sc-btn-unified-hover) !important;
	border-color: var(--sc-btn-unified-hover-border) !important;
	color: var(--sc-btn-unified-hover-text) !important;
	transform: translateY(-1px) scale(1.03) !important;
	box-shadow: var(--sc-btn-unified-hover-shadow) !important;
	outline: none !important;
}

/* Hard lock: Style 1 across all button variants */
body.sc-button-style-1 :is(
	button,
	input[type="submit"],
	input[type="button"],
	.button,
	.hp-button,
	.hp-form__button,
	.wp-block-button__link,
	a.button,
	.sc-hero-cta,
	.sc-listings-section__link,
	.sc-categories-sidebar__show-all,
	.sc-footer-mkp__scroll-top,
	.sc-login-social__btn,
	.sc-login-cta-register,
	.sc-mkp-header__btn,
	.sc-mkp-header__search-btn,
	.sc-mkp-header__action--post-ad,
	.sc-post-ad-btn,
	.sc-empty-state__btn
) {
	background: var(--sc-btn-style1-bg) !important;
	border: 1px solid var(--sc-btn-style1-border) !important;
	color: var(--sc-btn-style1-text) !important;
	border-radius: 9999px !important;
}

body.sc-button-style-1 :is(
	button,
	input[type="submit"],
	input[type="button"],
	.button,
	.hp-button,
	.hp-form__button,
	.wp-block-button__link,
	a.button,
	.sc-hero-cta,
	.sc-listings-section__link,
	.sc-categories-sidebar__show-all,
	.sc-footer-mkp__scroll-top,
	.sc-login-social__btn,
	.sc-login-cta-register,
	.sc-mkp-header__btn,
	.sc-mkp-header__search-btn,
	.sc-mkp-header__action--post-ad,
	.sc-post-ad-btn,
	.sc-empty-state__btn
):is(:hover, :focus, :focus-visible, :active) {
	background: var(--sc-btn-style1-state-bg) !important;
	border-color: var(--sc-btn-style1-state-border) !important;
	color: var(--sc-btn-style1-state-text) !important;
	transform: translateY(-1px) scale(1.03) !important;
	box-shadow: var(--sc-btn-style1-state-shadow) !important;
	outline: none !important;
}

/* Icons inside buttons always match text color */
:is(
	button,
	.button,
	.hp-button,
	.hp-form__button,
	.wp-block-button__link,
	a.button,
	.sc-hero-cta,
	.sc-listings-section__link,
	.sc-categories-sidebar__show-all,
	.sc-footer-mkp__scroll-top,
	.sc-login-social__btn,
	.sc-login-cta-register,
	.sc-mkp-header__btn,
	.sc-mkp-header__search-btn,
	.sc-mkp-header__action--post-ad,
	.sc-post-ad-btn,
	.sc-empty-state__btn
) :is(i, svg, path, circle, rect, polygon, use) {
	color: currentColor !important;
	fill: currentColor !important;
	stroke: currentColor !important;
}