/*
Theme Name:   ExpertHive Child
Theme URI:    https://juanworks.ph
Description:  A custom child theme for the Juan Works marketplace.
Author:       Aeros Salaga
Author URI:   https://aerossalaga.com
Template:     experthive
Version:      1.0.0
Text Domain:  experthive-child
*/

/* Listing offers – align icon + text and use muted link color. */
.hp-requests .hp-listing__action--offer {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	color: rgba(15, 23, 39, 0.6);
	text-decoration: none;
}

.hp-listing__action--offer .hp-listing__action-label {
	color: rgba(15, 23, 39, 0.6);
}

.hp-listing__action--offer .hp-icon {
	color: rgba(15, 23, 39, 0.6);
}

.hp-listing__action--offer-submitted .hp-listing__action-label {
	font-style: italic;
}

/* JuanWorker account settings – Qualifications/Certificates. */
.juanworks-qualifications__item {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	gap: 1rem;
	align-items: end;
	margin: 0 0 1rem;
}

.juanworks-qualifications__image-actions {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.juanworks-qualifications__add {
	margin-top: 0.5rem;
}

.juanworks-qualifications__image-preview {
	margin-bottom: 0.5rem;
}

/* JuanWorker public profile – Qualifications/Certificates. */
.juanworks-vendor-qualifications__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin-top: 1rem;
}

.juanworks-vendor-qualifications__item {
	display: flex;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
    flex-direction: column;
}

.juanworks-vendor-qualifications__image img {
	border-radius: 4px;
	display: block;
}

/* Request sidebar vendor block – add label to message icon. */
.hp-vendor--view-block .juanworks-vendor-message-action {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.hp-vendor--view-block .juanworks-vendor-message-label {
	font-weight: 500;
}

/* Qualification lightbox. */
.juanworks-qualification__link {
	display: inline-block;
}

.juanworks-qualification__link img {
	cursor: zoom-in;
}

.juanworks-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(0, 0, 0, 0.75);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
}

.juanworks-lightbox__inner {
	position: relative;
	max-width: min(960px, 100%);
	max-height: 100%;
}

.juanworks-lightbox__image {
	max-width: 100%;
	max-height: 85vh;
	display: block;
	border-radius: 4px;
}

/* Homepage hero: full-width background video (if attached). */
.header-hero.juanworks-hero--video {
	position: relative;
	overflow: hidden;
}

.page__text > .header-hero.juanworks-hero--video:first-child {
	--juanworks-homepage-hero-header-offset: 72px;
	width: 100vw;
	max-width: 100vw;
	margin-top: calc(var(--juanworks-homepage-hero-header-offset) * -1);
	margin-right: calc(50% - 50vw);
	margin-left: calc(50% - 50vw);
	padding-top: var(--juanworks-homepage-hero-header-offset);
}

.header-hero.juanworks-hero--video .juanworks-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}

.header-hero.juanworks-hero--video .juanworks-hero__video-el {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.header-hero.juanworks-hero--video .juanworks-hero__youtube {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/*
		This sizing ensures the iframe always covers the hero like `object-fit: cover`.
		16:9 video -> use viewport-min trick so it overflows and covers.
	*/
	width: max(100vw, calc(100vh * 1.78));
	height: max(100vh, calc(100vw / 1.78));
	border: 0;
	pointer-events: none;
}

.header-hero.juanworks-hero--video .header-hero__content {
	position: relative;
	z-index: 1;
}

/* Optional: remove the image column on the homepage hero when video is present. */
.header-hero.juanworks-hero--video .header-hero__images,
.header-hero.juanworks-hero--video .header-hero__column:nth-child(2) {
	display: none;
}

.header-hero.juanworks-hero--video .header-hero__column {
	width: 100%;
}

/* Disabled "Job is no longer available" action button. */
.juanworks-offer-unavailable {
	opacity: 0.65;
	cursor: not-allowed;
}

/* Rate worker popup (shown after Job Complete). */
.juanworks-rate-worker .juanworks-lightbox__inner {
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
	padding: 1.25rem 1.25rem 1rem;
	width: min(520px, 100%);
}

.juanworks-rate-worker__content h3 {
	margin: 0 0 0.75rem;
	font-size: 1.125rem;
}

.juanworks-rate-worker__stars {
	display: flex;
	gap: 0.5rem;
	margin: 0 0 0.75rem;
}

.juanworks-rate-worker__stars button {
	border: 0;
	background: transparent;
	cursor: pointer;
	padding: 0;
	line-height: 1;
	font-size: 1.5rem;
	color: #f5b301; /* star color */
}

.juanworks-rate-worker__stars button:focus {
	outline: 2px solid rgba(0, 135, 111, 0.35);
	outline-offset: 2px;
	border-radius: 4px;
}

.juanworks-rate-worker__text {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid rgba(15, 23, 39, 0.2);
	border-radius: 6px;
	padding: 0.75rem;
	margin: 0 0 0.75rem;
}

.juanworks-rate-worker [data-juanworks-submit] {
	width: 100%;
}

/* Worker plan chooser popup (post-registration). */
.juanworks-plan-popup .juanworks-lightbox__inner {
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
	padding: 1.25rem;
	width: min(760px, 100%);
}

.juanworks-plan-popup__content h3 {
	margin: 0 0 0.5rem;
	font-size: 1.125rem;
}

.juanworks-plan-popup__content > p {
	margin: 0 0 1rem;
	color: rgba(15, 23, 39, 0.75);
}

.juanworks-plan-popup__options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.juanworks-plan-popup__card {
	border: 1px solid rgba(15, 23, 39, 0.15);
	border-radius: 8px;
	padding: 1rem;
	background: #fff;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.juanworks-plan-popup__card h4 {
	margin: 0;
	font-size: 1rem;
}

.juanworks-plan-popup__card p {
	margin: 0;
	color: rgba(15, 23, 39, 0.75);
}

.juanworks-plan-popup__card .button {
	margin-top: auto;
}

.juanworks-plan-popup__card.is-active {
	border-color: #00876f;
	box-shadow: 0 0 0 1px rgba(0, 135, 111, 0.2) inset;
}

.juanworks-plan-popup__card.is-disabled {
	opacity: 0.7;
}

/* Job unavailable popup. */
.juanworks-job-unavailable .juanworks-lightbox__inner {
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
	padding: 1.25rem;
	width: min(460px, 100%);
}

.juanworks-job-unavailable__content {
	text-align: center;
}

.juanworks-job-unavailable__message {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	color: rgba(15, 23, 39, 0.92);
}

.juanworks-lightbox__close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	line-height: 1;
	padding: 0;
}

/* Notifications. */
.juanworks-notifications__list {
	list-style: none;
	padding: 0;
	margin: 1rem 0 0;
}

.juanworks-notifications__item {
	border-radius: 4px;
	padding: 0.75rem 0.75rem;
}

.juanworks-notifications__item.is-unread {
	box-shadow: 0 5px 30px rgba(7, 36, 86, 0.075);
	background: #fff;
}

.juanworks-notifications__link {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	text-decoration: none;
	color: inherit;
}

.juanworks-notifications__time {
	white-space: nowrap;
	font-size: 0.8125rem;
	opacity: 0.7;
}

.juanworks-notifications-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.25rem;
	height: 1.25rem;
	padding: 0 0.35rem;
	border-radius: 9999px;
	background: #00876F;
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
}

/* JuanWorker ratings on cards and profile page. */
.juanworks-worker-rating-summary {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.5rem;
	font-size: 0.875rem;
}

.juanworks-worker-rating-summary__score {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-weight: 600;
}

.juanworks-worker-rating-summary__score .hp-icon {
	color: #f5b301;
}

.juanworks-worker-rating-summary__count,
.juanworks-worker-rating-summary__empty {
	color: rgba(15, 23, 39, 0.7);
}

.juanworks-worker-rating-inline {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	margin-left: 0.5rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: rgba(15, 23, 39, 0.85);
}

.juanworks-worker-rating-inline .hp-icon {
	color: #f5b301;
}

.juanworks-worker-rating-inline--under-name {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-left: 0;
	margin-top: 0.35rem;
}

.juanworks-offer-worker-rating {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	margin-left: 0.5rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: rgba(15, 23, 39, 0.85);
}

.juanworks-offer-worker-rating .hp-icon {
	color: #f5b301;
}

.juanworks-offer-worker-rating--under-name {
	display: flex;
	width: 100%;
	margin-left: 0;
	margin-top: 0.35rem;
}

.hp-vendor--view-block .juanworks-verified-badge,
.hp-vendor--view-page .juanworks-verified-badge {
	position: static;
	top: auto;
	right: auto;
	margin: 0;
}

.juanworks-verified-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	color: #1877f2;
	font-size: 0.8125rem;
	font-weight: 600;
}

.juanworks-verified-badge .hp-icon {
	color: #1877f2;
}

.juanworks-verified-badge--inline {
	margin-left: 0;
	vertical-align: top;
	font-size: 0.6875rem;
	line-height: 1;
}

.juanworks-verified-badge--inline .hp-icon {
	font-size: 1.15rem;
}

.juanworks-verified-badge--profile {
	display: inline-flex;
	margin-left: 0;
	margin-top: 0.35rem;
}

.juanworks-vendor-name-wrap {
	position: relative;
	display: inline-block;
	padding-right: 0.9rem;
}

.juanworks-vendor-name-wrap .juanworks-verified-badge--inline {
	position: absolute;
	right: -6px;
}

/* Verified JuanOwner, shown beside their name on a Job Post. */
.hp-listing__vendor .juanworks-verified-badge--inline {
	margin-left: 0.3rem;
	vertical-align: middle;
}

.hp-listing__vendor .juanworks-verified-badge--inline .hp-icon {
	font-size: 0.9375rem;
}

.juanworks-vendor-reviews-sidebar {
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid rgba(15, 23, 39, 0.12);
}

.juanworks-vendor-reviews-sidebar__score {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.95rem;
}

.juanworks-vendor-reviews-sidebar__score .hp-icon {
	color: #f5b301;
}

.juanworks-vendor-reviews-sidebar__count {
	margin-top: 0.35rem;
	margin-bottom: 0.6rem;
	color: rgba(15, 23, 39, 0.7);
	font-size: 0.85rem;
}

.juanworks-vendor-reviews-popup[hidden] {
	display: none;
}

.juanworks-vendor-reviews-popup .juanworks-lightbox__inner {
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
	padding: 1.1rem;
	width: min(760px, 100%);
	max-height: 88vh;
	overflow: auto;
}

.juanworks-vendor-reviews {
	margin-top: 1.5rem;
}

.juanworks-vendor-reviews__title {
	margin: 0 0 0.5rem;
}

.juanworks-vendor-reviews__average {
	margin: 0 0 1rem;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.juanworks-vendor-reviews__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 0.75rem;
}

.juanworks-vendor-reviews__item {
	border: 1px solid rgba(15, 23, 39, 0.15);
	border-radius: 8px;
	padding: 0.75rem;
	background: #fff;
}

.juanworks-vendor-reviews__item-head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0.35rem;
}

.juanworks-vendor-reviews__item-rating {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-weight: 600;
}

.juanworks-vendor-reviews__item-rating .hp-icon {
	color: #f5b301;
}

.juanworks-vendor-reviews__item-owner,
.juanworks-vendor-reviews__item-date {
	color: rgba(15, 23, 39, 0.65);
	font-size: 0.875rem;
}

/* Which Job Post the rating was left for. */
.juanworks-vendor-reviews__item-job {
	color: rgba(15, 23, 39, 0.85);
	font-size: 0.875rem;
	font-style: italic;
}

.juanworks-vendor-reviews__item-text,
.juanworks-vendor-reviews__empty {
	margin: 0;
	color: rgba(15, 23, 39, 0.85);
}

.hp-offer.juanworks-offer--flash {
	background-color: #fff8cf;
	box-shadow: inset 0 0 0 1px rgba(245, 179, 1, 0.35);
	transition: background-color 2.2s ease, box-shadow 2.2s ease;
}

.hp-offer.juanworks-offer--flash.juanworks-offer--flash-active {
	background-color: transparent;
	box-shadow: inset 0 0 0 1px rgba(245, 179, 1, 0);
}

@media (prefers-reduced-motion: reduce) {
	.hp-offer.juanworks-offer--flash {
		transition: none;
	}
}

.juanworks-verification__status,
.juanworks-verification__help {
	margin-bottom: 0.75rem;
}

.juanworks-verification {
	padding: 1rem 1.25rem;
}

.juanworks-referrals {
	padding: 1rem 1.25rem;
}

.juanworks-referrals__link-field {
	margin-bottom: 0.75rem;
}

.juanworks-referrals__link-row {
	display: flex;
	align-items: stretch;
	gap: 0.5rem;
	width: 100%;
}

.juanworks-referrals__link-input {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
}

.juanworks-referrals__copy-button {
	flex: 0 0 auto;
	min-width: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.juanworks-referrals__copy-status {
	display: block;
	margin-top: 0.35rem;
	color: rgba(15, 23, 39, 0.75);
}

.juanworks-verification__form .hp-field {
	margin-bottom: 0.75rem;
}

.juanworks-verification__files {
	margin: 0 0 0.75rem;
	font-size: 0.9rem;
	color: rgba(15, 23, 39, 0.75);
}

@media (max-width: 767px) {
	.juanworks-qualifications__item {
		grid-template-columns: 1fr;
	}

	.juanworks-plan-popup__options {
		grid-template-columns: 1fr;
	}

	.hp-listing--view-block .hp-listing__footer {
        flex-wrap: wrap;
    }

	.juanworks-verification {
		padding: 0.875rem 1rem;
	}

	.juanworks-referrals {
		padding: 0.875rem 1rem;
	}
}

/* Account login – activation feedback notice. */
.juanworks-activation-notice {
	margin: 0 0 1.25rem;
	padding: 0.875rem 1rem;
	border-radius: 6px;
	border: 1px solid transparent;
}

.juanworks-activation-notice p {
	margin: 0;
}

.juanworks-activation-notice--success {
	background: #ecfdf3;
	border-color: #a7f3d0;
	color: #065f46;
}

.juanworks-activation-notice--error {
	background: #fef2f2;
	border-color: #fecaca;
	color: #991b1b;
}



/* ---------------------------------------------------------------------------
   Listing / job sidebar polish
   HivePress renders some wrappers unconditionally and ships its sidebar widget
   cards without padding, which leaves empty bordered strips and content sitting
   flush against the grey edge.
   --------------------------------------------------------------------------- */

/* Attribute containers are output even when the listing/vendor has nothing to
   show in them, rendering as a bare bordered strip. */
.hp-listing__attributes--primary:empty,
.hp-listing__attributes--secondary:empty,
.hp-vendor__attributes--primary:empty,
.hp-vendor__attributes--secondary:empty {
	display: none;
}

/* Those containers are all a card footer holds, so once they are hidden the
   footer itself is an empty strip. Hide it only when every child is empty, so
   footers that do carry content (e.g. price) are untouched. */
.hp-vendor__footer:not(:has(> :not(:empty))),
.hp-listing__footer:not(:has(> :not(:empty))) {
	display: none;
}

/* Sidebar widget cards have a background but no padding. */
.hp-widget--listing-filter,
.hp-listing__actions--primary.hp-widget {
	padding: 1.25rem;
}

/* ---------------------------------------------------------------------------
   Job Post edit modal width
   HivePress opens modals through fancybox as inline content, so the modal
   element itself becomes `.fancybox-content` — which is `display:inline-block`
   with no width and therefore shrink-wraps around its contents (~380px in
   practice). That is fine for a one-field dialog but far too cramped for the
   Job Post edit form, which carries title, description, images and attributes.
   --------------------------------------------------------------------------- */
#juanworks_request_edit_modal.fancybox-content,
.fancybox-slide > #juanworks_request_edit_modal {
	width: 720px;
	max-width: 100%;
}

/* ---------------------------------------------------------------------------
   Cancel-hire modal width
   Same fancybox shrink-wrap problem as the Job Post edit modal above, but
   this modal's ID is per-offer (juanworks_cancel_hire_modal_<offer_id> — see
   CLAUDE.md: a shared ID would make every card open the first modal), so an
   ID selector can't target it. A shared class does instead.
   --------------------------------------------------------------------------- */
.juanworks-cancel-hire-modal.fancybox-content,
.fancybox-slide > .juanworks-cancel-hire-modal {
	width: 480px;
	max-width: 100%;
}

/* ---------------------------------------------------------------------------
   Completed jobs / work history
   Shared by the private account page and the public profile section.
   --------------------------------------------------------------------------- */
.juanworks-completed-jobs { padding: 1rem 1.25rem; }
.juanworks-completed-jobs__count,
.juanworks-work-history__count { margin: 0 0 1rem; color: #6b7280; font-size: 0.875rem; }
.juanworks-completed-jobs__empty { margin: 0; color: #6b7280; }

.juanworks-work-history { margin: 2rem 0 0; }
.juanworks-work-history__title { margin: 0 0 0.25rem; }

.juanworks-cjobs { display: flex; flex-direction: column; gap: 1rem; }

.juanworks-cjob {
	padding: 1.25rem 1.5rem;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	background: #fff;
}
.juanworks-cjob__title { margin: 0 0 0.35rem; font-size: 1.0625rem; font-weight: 700; }
.juanworks-cjob__meta { margin: 0 0 0.6rem; color: #6b7280; font-size: 0.8125rem; }
.juanworks-cjob__excerpt { margin: 0 0 0.75rem; color: #374151; font-size: 0.9375rem; line-height: 1.55; }
.juanworks-cjob__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.juanworks-cjob__chip {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	background: #f1f5f9;
	color: #334155;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.juanworks-cjob__chip--budget { background: #ecfdf5; color: #047857; text-transform: none; letter-spacing: 0; }

.juanworks-cjob__rating { margin: 0.85rem 0 0; }
.juanworks-stars { color: #f59e0b; letter-spacing: 0.08em; }
.juanworks-stars__off { color: #e5e7eb; }
.juanworks-cjob__review {
	margin: 0.5rem 0 0;
	padding: 0 0 0 0.85rem;
	border-left: 3px solid #e5e7eb;
	color: #4b5563;
	font-size: 0.9375rem;
	font-style: italic;
}

@media (max-width: 767px) {
	.juanworks-completed-jobs { padding: 1rem; }
	.juanworks-cjob { padding: 1rem; }
}

/* Decline button on interest cards — secondary to Accept, but clearly an
   opt-out rather than a neutral action. */
.juanworks-offer-decline {
	background: #fff;
	border: 1px solid #e5e7eb;
	color: #b91c1c;
}
.juanworks-offer-decline:hover,
.juanworks-offer-decline:focus {
	background: #fef2f2;
	border-color: #fecaca;
	color: #991b1b;
}

/* ── Per-image captions ───────────────────────────────────────────────── */

/* Editing: a textarea under each uploaded thumbnail. */
.juanworks-image-caption-field {
	margin-top: 0.35rem;
}

textarea.juanworks-image-caption {
	width: 100%;
	min-height: 3.25rem;
	padding: 0.4rem 0.5rem;
	font-size: 0.8125rem;
	line-height: 1.35;
	border: 1px solid rgba(15, 23, 39, 0.2);
	border-radius: 6px;
	resize: vertical;
}

.juanworks-image-caption__status {
	display: block;
	min-height: 1rem;
	font-size: 0.75rem;
	color: rgba(15, 23, 39, 0.55);
}

.juanworks-image-caption__status.is-saved {
	color: #15803d;
}

.juanworks-image-caption__status.is-error {
	color: #b91c1c;
}

/* Display: caption strip under the image in the gallery. */
.juanworks-image-caption-display {
	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
	line-height: 1.4;
	color: rgba(15, 23, 39, 0.85);
	background: rgba(15, 23, 39, 0.04);
	border-radius: 0 0 6px 6px;
}

/* Job Post has reached its interest limit. */
.juanworks-offer-full-notice {
	margin: 0.5rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: rgba(15, 23, 39, 0.6);
}

/* Owner-only summary of interest slots on a Job Post. */
.juanworks-offer-slots {
	margin: 0 0 1rem;
	font-size: 0.875rem;
	color: rgba(15, 23, 39, 0.7);
}

.juanworks-offer-slots--full {
	color: rgba(15, 23, 39, 0.85);
}

.juanworks-offer-slots__notice {
	color: #b45309;
}

/* ---------------------------------------------------------------------------
   Contact Us form
   --------------------------------------------------------------------------- */

.juanworks-contact {
	max-width: 1100px;
}

/* Form and copy side by side, so the page doesn't read as an empty column. */
.juanworks-contact__columns {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: 3rem;
	align-items: start;
}

@media (max-width: 900px) {
	.juanworks-contact__columns {
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
	}

	/* Stacked, the copy leads: it sets expectations before someone commits to
	   typing, and a long form pushes it off the screen entirely otherwise.
	   Done with `order` so the form still comes first in the markup and in
	   the tab order for anyone navigating by keyboard or screen reader. */
	.juanworks-contact__aside {
		order: -1;
	}
}

/* Once the message is away there is no form to sit beside, so the two-column
   split would leave an empty half. Collapse to a single readable column. */
.juanworks-contact--sent {
	max-width: 640px;
}

.juanworks-contact--sent .juanworks-contact__columns {
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
}

.juanworks-contact--sent .juanworks-contact__main {
	display: none;
}

.juanworks-contact__aside {
	padding: 1.75rem;
	border-radius: 8px;
	background: #f7f8fa;
}

.juanworks-contact__aside > *:first-child {
	margin-top: 0;
}

.juanworks-contact__aside > *:last-child {
	margin-bottom: 0;
}

.juanworks-contact__aside h2 {
	font-size: 1.375rem;
	margin-bottom: 0.75rem;
}

.juanworks-contact__aside p,
.juanworks-contact__aside li {
	font-size: 0.9375rem;
	line-height: 1.6;
}

.juanworks-contact__aside ul {
	margin: 0 0 1rem;
	padding-left: 1.1rem;
}

.juanworks-contact__aside li {
	margin-bottom: 0.5rem;
}

.juanworks-contact__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin-bottom: 1.25rem;
}

.juanworks-contact__field label {
	font-weight: 600;
	font-size: 0.9375rem;
}

.juanworks-contact__field input[type="text"],
.juanworks-contact__field input[type="email"],
.juanworks-contact__field textarea {
	width: 100%;
	padding: 0.75rem 0.9rem;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	font: inherit;
}

.juanworks-contact__field textarea {
	resize: vertical;
	min-height: 10rem;
}

.juanworks-contact__field input[readonly] {
	background: #f6f7f7;
	cursor: not-allowed;
}

/* The honeypot must be reachable by a bot parsing the markup but invisible
   and unfocusable for anyone actually filling the form in. */
.juanworks-contact__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.juanworks-contact__notice {
	margin-bottom: 1.5rem;
	padding: 0.9rem 1.1rem;
	border-radius: 4px;
	border-left: 4px solid #1877f2;
	background: #f0f6ff;
}

.juanworks-contact__notice--success {
	border-left-color: #1a7f37;
	background: #eef7f0;
}

.juanworks-contact__notice--error {
	border-left-color: #d63638;
	background: #fcf0f1;
}

.juanworks-contact-status--unread {
	color: #d63638;
}

/* ---------------------------------------------------------------------------
   Report a JuanWorker / JuanOwner
   --------------------------------------------------------------------------- */

#juanworks_report_modal,
[id^="juanworks_report_modal_"] {
	width: 520px;
	max-width: 100%;
}

.juanworks-report__intro {
	margin: 0 0 1.25rem;
	font-size: 0.875rem;
	color: #4b5563;
}

.juanworks-report__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin-bottom: 1.25rem;
}

.juanworks-report__field label {
	font-weight: 600;
	font-size: 0.9375rem;
}

.juanworks-report__field select,
.juanworks-report__field textarea {
	width: 100%;
	padding: 0.7rem 0.85rem;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	font: inherit;
}

.juanworks-report__field textarea {
	resize: vertical;
	min-height: 8rem;
}

.juanworks-report__hint {
	font-size: 0.8125rem;
	color: #6b7280;
}

.juanworks-report__message {
	margin-bottom: 1rem;
	padding: 0.8rem 1rem;
	border-radius: 4px;
	font-size: 0.9375rem;
}

.juanworks-report__message--success {
	border-left: 4px solid #1a7f37;
	background: #eef7f0;
}

.juanworks-report__message--error {
	border-left: 4px solid #d63638;
	background: #fcf0f1;
}

/* ---------------------------------------------------------------------------
   Pre-launch: For Owners waitlist + Available Jobs empty state
   --------------------------------------------------------------------------- */

.juanworks-waitlist {
	max-width: 640px;
}

.juanworks-waitlist__intro {
	margin-bottom: 1.5rem;
}

.juanworks-prelaunch-empty__steps {
	margin: 1.25rem 0 0;
	padding-left: 1.25rem;
}

.juanworks-prelaunch-empty__steps li {
	margin-bottom: 0.9rem;
	line-height: 1.5;
}

.juanworks-prelaunch-empty__steps li span {
	color: #6b7280;
	font-size: 0.9375rem;
}

.juanworks-prelaunch-empty__done {
	color: #1a7f37 !important;
	font-weight: 600;
}