/* PWD Lead Marketplace - Front-end styles
   Loaded only on pages that contain a marketplace shortcode.
   ------------------------------------------------------------------ */

/* ---- CSS variable defaults (overridden per-section via inline style) ----
   --pwd-lm-text and --pwd-lm-bg are intentionally left undefined here so
   that, by default (Appearance mode = "Inherit from Theme"), every text
   element below falls through to `inherit`/`currentColor` and renders
   using the active theme's own typography and colours. When Appearance
   mode is "Global" or "Individual", PWD_LM_Assets/PWD_LM_Frontend inject
   --pwd-lm-text / --pwd-lm-bg overrides inline, which the rules below
   then pick up automatically. */
.pwd-lm-section {
	--pwd-lm-primary:   #2563eb;
	--pwd-lm-secondary: #0f172a;
	--pwd-lm-accent:    #f97316;
	--pwd-lm-radius:    10px;
	--pwd-lm-font:          inherit;
	--pwd-lm-heading-font:  inherit;
	--pwd-lm-font-size: 16px;
	--pwd-lm-padding:   24px;
	--pwd-lm-margin:    0px;
	--pwd-lm-muted:     currentColor;
	font-family: var(--pwd-lm-font);
	font-size: var(--pwd-lm-font-size);
	padding: var(--pwd-lm-padding) 0;
	margin: var(--pwd-lm-margin) 0;
	color: inherit;
	box-sizing: border-box;
}
.pwd-lm-section * {
	box-sizing: border-box;
	font-family: inherit;
}

/* Reset WordPress theme / Elementor global "input" styling from leaking a
   second border, background or box-shadow onto our own form controls.
   Many themes and Elementor's "Global Settings" apply a default border +
   radius to every <input>/<select>/<textarea> on the site; without this
   reset those rules can visually double up with ours (e.g. a square
   border appearing inside our pill-shaped search box). We deliberately
   reset only box-model properties here, never color/font, so theme
   typography still comes through. */
.pwd-lm-section input,
.pwd-lm-section select,
.pwd-lm-section textarea,
.pwd-lm-section button {
	font-family: inherit;
	border-radius: 0;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

/* Headings and paragraphs inherit the theme's text colour by default;
   --pwd-lm-text (set only in Global/Individual Appearance mode) overrides
   it. Components needing the brand secondary colour explicitly opt in via
   var(--pwd-lm-secondary) rather than this base rule. */
.pwd-lm-section h1,
.pwd-lm-section h2,
.pwd-lm-section h3,
.pwd-lm-section h4,
.pwd-lm-section h5,
.pwd-lm-section h6 {
	color: var(--pwd-lm-text, inherit);
	font-family: var(--pwd-lm-heading-font, var(--pwd-lm-font));
}
.pwd-lm-section p,
.pwd-lm-section label,
.pwd-lm-section span,
.pwd-lm-section div {
	color: var(--pwd-lm-text, inherit);
}

.pwd-lm-section { background-color: var(--pwd-lm-bg, transparent); }

/* ---- Utility buttons ---- */
.pwd-lm-btn {
	display: inline-flex; align-items: center; justify-content: center;
	gap: 6px; border: none;
	border-radius: var(--pwd-btn-radius, var(--pwd-lm-radius));
	padding: 11px 24px; font-weight: 600; font-size: 0.94em;
	cursor: pointer; text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease, transform 0.1s ease;
	font-family: inherit;
}
.pwd-lm-btn:active { transform: scale(0.98); }
.pwd-lm-btn-primary {
	background: var(--pwd-btn-bg, var(--pwd-lm-primary));
	color: var(--pwd-btn-color, #fff);
}
.pwd-lm-btn-primary:hover,
.pwd-lm-btn-primary:focus-visible {
	background: var(--pwd-btn-hover-bg, var(--pwd-lm-secondary));
	color: var(--pwd-btn-hover-color, #fff);
	opacity: 1;
}
.pwd-lm-btn-accent { background: var(--pwd-lm-accent); color: #fff; }
.pwd-lm-btn-outline {
	background: transparent;
	border: 2px solid var(--pwd-btn-bg, var(--pwd-lm-primary));
	color: var(--pwd-btn-bg, var(--pwd-lm-primary));
}
.pwd-lm-btn-outline:hover {
	background: var(--pwd-btn-bg, var(--pwd-lm-primary));
	color: var(--pwd-btn-color, #fff);
	opacity: 1;
}
.pwd-lm-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ===================================================================
   POST REQUEST HERO
   =================================================================== */
.pwd-pr-hero {
	text-align: center;
	padding: 60px 20px 48px;
}
.pwd-pr-title {
	font-size: clamp(1.625em, 4vw, 2.625em);
	font-weight: 700;
	color: var(--pwd-lm-text, var(--pwd-lm-secondary));
	margin: 0 0 12px;
}
.pwd-pr-subtitle {
	font-size: 1em;
	color: var(--pwd-lm-text, inherit);
	opacity: 0.75;
	margin: 0 0 32px;
}

/* Search bar */
.pwd-pr-search-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	max-width: 560px;
	margin: 0 auto;
	position: relative;
}
.pwd-pr-search-box {
	display: flex;
	align-items: center;
	width: 100%;
	background: #fff;
	border: 2px solid #e2e8f0;
	border-radius: 999px;
	padding: 0 18px;
	box-shadow: 0 2px 12px rgba(15,23,42,0.07);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.pwd-pr-search-box:focus-within {
	border-color: var(--pwd-lm-primary);
	box-shadow: 0 2px 16px rgba(37,99,235,0.13);
}
.pwd-pr-search-icon {
	color: var(--pwd-lm-text, #94a3b8); opacity: 0.55;
	display: flex;
	align-items: center;
	flex-shrink: 0;
}
.pwd-pr-search-input.pwd-pr-search-input {
	flex: 1;
	width: auto;
	min-width: 0;
	border: none !important;
	outline: none;
	font-size: 1em;
	padding: 14px 12px;
	margin: 0;
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	color: var(--pwd-lm-text, inherit);
	border-radius: 0 !important;
}
.pwd-pr-search-input::placeholder { color: var(--pwd-lm-text, #94a3b8); opacity: 0.55; }

/* Suggestions dropdown */
.pwd-pr-suggestions {
	position: absolute;
	top: calc(100% - 12px);
	left: 0; right: 0;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-top: none;
	border-radius: 0 0 16px 16px;
	box-shadow: 0 8px 24px rgba(15,23,42,0.10);
	z-index: 999;
	overflow: hidden;
	padding-top: 8px;
}
.pwd-pr-suggestion {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 20px;
	cursor: pointer;
	font-size: 0.94em;
	color: var(--pwd-lm-text, inherit);
	transition: background 0.12s ease;
}
.pwd-pr-suggestion:hover,
.pwd-pr-suggestion.is-active {
	background: #f1f5f9;
}
.pwd-pr-suggestion-icon {
	width: 32px; height: 32px;
	background: var(--pwd-lm-primary);
	color: #fff;
	border-radius: 8px;
	display: flex; align-items: center; justify-content: center;
	font-size: 0.81em; font-weight: 700; flex-shrink: 0;
}
.pwd-pr-no-match {
	padding: 12px 20px;
	font-size: 0.875em;
	color: var(--pwd-lm-text, #64748b); opacity: 0.7;
}

.pwd-pr-start-btn {
	border-radius: 999px;
	padding: 13px 36px;
	font-size: 1em;
}

/* ===================================================================
   POPUP OVERLAY
   =================================================================== */
.pwd-lm-popup {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}
.pwd-lm-popup-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15,23,42,0.55);
	backdrop-filter: blur(3px);
}
.pwd-lm-popup-box {
	position: relative;
	background: #fff;
	border-radius: 18px;
	width: 100%;
	max-width: 560px;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	box-shadow: 0 24px 64px rgba(15,23,42,0.18);
	overflow: hidden;
	/* Anchor text color inside the popup to dark-on-white regardless
	   of what Appearance color is set on the parent section. */
	color: #0f172a;
}

/* -- Popup header -- */
.pwd-lm-popup-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px 16px;
	border-bottom: 1px solid #f1f5f9;
	flex-shrink: 0;
}
.pwd-lm-popup-cat-label { display: flex; align-items: center; gap: 8px; }
.pwd-lm-popup-cat-name  { font-size: 0.94em; font-weight: 600; color: var(--pwd-lm-secondary, #0f172a); }
.pwd-lm-popup-close {
	background: none; border: none; cursor: pointer;
	color: var(--pwd-lm-text, #94a3b8); opacity: 0.55; width: 32px; height: 32px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 8px; transition: background 0.12s ease;
}
.pwd-lm-popup-close:hover { background: #f1f5f9; color: var(--pwd-lm-text, inherit); }

/* -- Step progress -- */
.pwd-lm-stepper {
	padding: 0 24px;
	flex-shrink: 0;
}
.pwd-lm-stepper-track {
	display: flex;
	gap: 6px;
	padding: 14px 0 10px;
}
.pwd-lm-step-dot {
	flex: 1;
	height: 4px;
	border-radius: 999px;
	background: #e2e8f0;
	transition: background 0.25s ease;
}
.pwd-lm-step-dot.is-done    { background: var(--pwd-lm-primary); }
.pwd-lm-step-dot.is-current { background: var(--pwd-lm-primary); opacity: 0.4; }

/* -- Popup body -- */
.pwd-lm-popup-body {
	flex: 1;
	overflow-y: auto;
	padding: 20px 24px;
}

/* Loading spinner */
.pwd-lm-popup-loading {
	text-align: center;
	padding: 32px 0;
	color: var(--pwd-lm-text, #64748b); opacity: 0.7;
}
.pwd-lm-spinner {
	width: 36px; height: 36px;
	border: 3px solid #e2e8f0;
	border-top-color: var(--pwd-lm-primary);
	border-radius: 50%;
	animation: pwd-spin 0.7s linear infinite;
	margin: 0 auto 12px;
}
@keyframes pwd-spin { to { transform: rotate(360deg); } }

/* -- Step panels -- */
.pwd-lm-step-panel { display: none; }
.pwd-lm-step-panel.is-active { display: block; animation: pwd-fadeup 0.2s ease; }
@keyframes pwd-fadeup {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}
.pwd-lm-step-title {
	font-size: 1.06em; font-weight: 700;
	color: var(--pwd-lm-secondary, #0f172a);
	margin: 0 0 18px;
}

/* -- Form fields -- */
.pwd-lm-field-group { margin-bottom: 18px; }
.pwd-lm-field-group label {
	display: block; font-size: 0.875em; font-weight: 600;
	color: var(--pwd-lm-text, inherit); margin-bottom: 6px;
}
.pwd-lm-field-group .pwd-lm-required-star { color: var(--pwd-lm-accent); margin-left: 2px; }
.pwd-lm-field-group input[type="text"],
.pwd-lm-field-group input[type="number"],
.pwd-lm-field-group input[type="email"],
.pwd-lm-field-group input[type="tel"],
.pwd-lm-field-group input[type="date"],
.pwd-lm-field-group input[type="url"],
.pwd-lm-field-group input[type="password"],
.pwd-lm-field-group select,
.pwd-lm-field-group textarea {
	width: 100% !important;
	padding: 11px 14px !important;
	border: 1.5px solid #e2e8f0 !important;
	border-radius: var(--pwd-lm-radius) !important;
	font-size: 0.94em;
	line-height: 1.5;
	color: var(--pwd-lm-text, inherit);
	background: #fff !important;
	box-shadow: none !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	outline: none;
	margin: 0;
}
/* Select needs explicit height so -webkit-appearance:none doesn't collapse it */
.pwd-lm-field-group select {
	height: auto !important;
	min-height: 44px;
}
.pwd-lm-field-group input:focus,
.pwd-lm-field-group select:focus,
.pwd-lm-field-group textarea:focus {
	border-color: var(--pwd-lm-primary) !important;
	box-shadow: 0 0 0 3px rgba(37,99,235,0.10) !important;
}
.pwd-lm-field-group textarea { min-height: 90px; resize: vertical; }
.pwd-lm-field-group.has-error input,
.pwd-lm-field-group.has-error select,
.pwd-lm-field-group.has-error textarea { border-color: #ef4444 !important; }
.pwd-lm-field-error { font-size: 0.75em; color: #ef4444; margin-top: 4px; }

/* Radio / checkbox options */
.pwd-lm-options-list { display: flex; flex-direction: column; gap: 8px; }
.pwd-lm-option-item {
	display: flex; align-items: center; gap: 10px;
	padding: 11px 14px;
	border: 1.5px solid #e2e8f0;
	border-radius: var(--pwd-lm-radius);
	cursor: pointer;
	font-size: 0.875em; color: var(--pwd-lm-text, inherit);
	transition: border-color 0.15s ease, background 0.12s ease;
}
.pwd-lm-option-item:hover { background: #f8fafc; border-color: #cbd5e1; }

/* The native radio/checkbox input is hidden — the entire label row is
   the clickable target. A custom indicator dot/tick is shown instead. */
.pwd-lm-option-item input[type="radio"],
.pwd-lm-option-item input[type="checkbox"] {
	position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}

/* Custom indicator — small dot/tick that appears on selection */
.pwd-lm-option-item::before {
	content: '';
	display: inline-block; flex-shrink: 0;
	width: 16px; height: 16px;
	border: 2px solid #cbd5e1; border-radius: 50%;
	background: #fff;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.pwd-lm-option-item.is-selected::before {
	border-color: var(--pwd-lm-primary);
	background: var(--pwd-lm-primary);
	box-shadow: inset 0 0 0 3px #fff;
}
.pwd-lm-option-item.is-selected { border-color: var(--pwd-lm-primary); background: color-mix(in srgb, var(--pwd-lm-primary) 8%, transparent); }

/* Checkbox variant — square corners on the indicator */
.pwd-lm-option-item:has(input[type="checkbox"])::before { border-radius: 4px; }
.pwd-lm-option-item:has(input[type="checkbox"]).is-selected::before {
	background: var(--pwd-lm-primary);
	border-color: var(--pwd-lm-primary);
	/* Checkmark via clip-path */
	clip-path: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8l3.5 3.5L13 5' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-size: contain; background-repeat: no-repeat;
	box-shadow: none;
}

.pwd-signup-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* Prevent text clipping inside the half-width grid cells.
   overflow:hidden must NOT be set on <select> — it clips descenders. */
.pwd-signup-row .pwd-lm-field-group { min-width: 0; overflow: hidden; }
.pwd-signup-row select { width: 100%; min-width: 0; text-overflow: ellipsis; line-height: 1.5; }
.pwd-lm-contact-step .pwd-lm-contact-note {
	background: #f0fdf4; border: 1px solid #bbf7d0;
	border-radius: 8px; padding: 10px 14px;
	font-size: 0.81em; color: #166534; margin-bottom: 18px;
}

/* -- Popup footer -- */
.pwd-lm-popup-footer {
	display: flex; align-items: center; justify-content: space-between;
	padding: 14px 24px 18px;
	border-top: 1px solid #f1f5f9;
	flex-shrink: 0;
	gap: 12px;
}
.pwd-lm-popup-step-counter { font-size: 0.81em; color: var(--pwd-lm-text, #64748b); opacity: 0.7; flex: 1; text-align: center; }

/* Success screen */
.pwd-lm-success-screen {
	text-align: center; padding: 32px 8px;
}
.pwd-lm-success-icon {
	width: 64px; height: 64px;
	background: #dcfce7; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	margin: 0 auto 20px;
	color: #16a34a;
}
.pwd-lm-success-screen h3 { font-size: 1.375em; font-weight: 700; color: var(--pwd-lm-text, var(--pwd-lm-secondary)); margin: 0 0 10px; }
.pwd-lm-success-screen p  { font-size: 0.94em; color: var(--pwd-lm-text, #64748b); opacity: 0.7; margin: 0; }

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 600px) {
	.pwd-lm-popup-box { border-radius: 14px; }
	.pwd-pr-hero      { padding: 40px 16px 32px; }
	.pwd-lm-popup-footer { flex-wrap: wrap; }
}

/* ===================================================================
   NOTICES
   =================================================================== */
.pwd-lm-notice {
	border-radius: var(--pwd-lm-radius);
	padding: 14px 18px;
	font-size: 0.875em;
	margin: 16px 0;
}
.pwd-lm-notice p { margin: 0 0 10px; }
.pwd-lm-notice p:last-child { margin-bottom: 0; }
.pwd-lm-notice--info {
	background: color-mix(in srgb, var(--pwd-lm-primary) 8%, #fff); color: var(--pwd-lm-primary); border: 1px solid color-mix(in srgb, var(--pwd-lm-primary) 25%, #fff);
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
}
.pwd-lm-notice--warn {
	background: #fffbeb; color: #92400e; border: 1px solid #fde68a;
}
.pwd-lm-notice--error {
	background: #fef2f2; color: #991b1b; border: 1px solid #fecaca;
}
.pwd-lm-notice--success {
	background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0;
}
.pwd-lm-notice a { color: var(--pwd-lm-notice-link-color, inherit); text-decoration: none; font-weight: 600; }

/* ===================================================================
   PRO SIGNUP
   =================================================================== */
.pwd-signup-wrap {
	max-width: 760px;
	margin: 0 auto;
	padding: 40px 16px 60px;
}
.pwd-signup-header { text-align: center; margin-bottom: 32px; }
.pwd-signup-header h2 { font-size: clamp(1.5em,3.5vw,2.25em); font-weight: 700; color: var(--pwd-lm-secondary); margin: 0 0 8px; }
.pwd-signup-header p { color: var(--pwd-lm-text, #64748b); opacity: 0.7; font-size: 1em; margin: 0; }

.pwd-signup-benefits {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
	margin-bottom: 32px;
}
.pwd-signup-benefit {
	display: flex; gap: 12px; align-items: flex-start;
	background: #f8fafc; border-radius: var(--pwd-lm-radius); padding: 16px;
}
.pwd-signup-benefit-icon { font-size: 1.625em; line-height: 1; }
.pwd-signup-benefit strong { display: block; margin-bottom: 4px; color: var(--pwd-lm-secondary); font-size: 0.94em; }
.pwd-signup-benefit p { margin: 0; font-size: 0.81em; color: var(--pwd-lm-text, #64748b); opacity: 0.7; }

.pwd-signup-form-card { padding: 28px; }
.pwd-signup-form-card h3 { margin: 0 0 18px; font-size: 1.25em; color: var(--pwd-lm-secondary); }
.pwd-signup-login-link { text-align: center; font-size: 0.875em; color: var(--pwd-lm-text, #64748b); opacity: 0.7; margin: 14px 0 0; }
.pwd-signup-login-link a { color: var(--pwd-lm-primary); text-decoration: none; font-weight: 600; }

/* ===================================================================
   BROWSE REQUESTS
   =================================================================== */
.pwd-lm-section--browse_requests { padding: 24px 0 60px; }

.pwd-browse-gate { margin-top: 0; }

.pwd-browse-toolbar {
	display: flex; align-items: center; justify-content: space-between;
	flex-wrap: wrap; gap: 12px; margin-bottom: 20px;
}
.pwd-browse-title { font-size: 1.25em; font-weight: 600; color: var(--pwd-lm-secondary); margin: 0; }
.pwd-browse-filters select {
	padding: 9px 14px; height: 42px; line-height: 1.4; box-sizing: border-box;
	border: 1.5px solid #e2e8f0; border-radius: var(--pwd-lm-radius);
	font-size: 0.875em; font-family: var(--pwd-lm-font);
	background: #fff; color: var(--pwd-lm-text, inherit); min-width: 200px;
	appearance: auto; -webkit-appearance: auto;
}

.pwd-browse-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
}
.pwd-browse-card {
	background: #fff; border: 1px solid #e2e8f0; border-radius: var(--pwd-lm-radius);
	padding: 18px; display: flex; flex-direction: column; gap: 10px;
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.pwd-browse-card:hover { box-shadow: 0 4px 16px rgba(15,23,42,0.08); border-color: #cbd5e1; }
.pwd-browse-card.is-purchased { border-color: var(--pwd-lm-primary); background: #f8fbff; }

.pwd-browse-card-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pwd-browse-cat-badge {
	display: inline-block; background: var(--pwd-lm-primary);
	color: var(--pwd-lm-badge-text, var(--pwd-lm-primary-contrast, #fff)) !important;
	font-size: 0.75em; font-weight: 600; padding: 4px 10px; border-radius: 999px;
}
.pwd-browse-badge--unlocked {
	font-size: 0.69em; font-weight: 700; color: #16a34a; background: #dcfce7;
	padding: 3px 9px; border-radius: 999px;
}
.pwd-browse-card-title { font-size: 1em; font-weight: 700; color: var(--pwd-lm-text, var(--pwd-lm-secondary)); margin: 0; line-height: 1.35; }
.pwd-browse-card-location {
	display: flex; align-items: center; gap: 6px; font-size: 0.81em; color: var(--pwd-lm-text, #64748b); opacity: 0.7; margin: 0;
}
.pwd-browse-card-snippets { display: flex; flex-direction: column; gap: 4px; }
.pwd-browse-snippet { font-size: 0.81em; color: var(--pwd-lm-text, inherit); }
.pwd-browse-snippet-label { font-weight: 600; color: var(--pwd-lm-text, inherit); }
.pwd-browse-card-footer {
	display: flex; align-items: center; justify-content: space-between;
	margin-top: auto; padding-top: 10px; border-top: 1px solid #f1f5f9;
}
.pwd-browse-date { font-size: 0.75em; color: var(--pwd-lm-text, #94a3b8); opacity: 0.55; }
.pwd-browse-view-btn { padding: 8px 18px; font-size: 0.81em; }

.pwd-browse-empty { text-align: center; padding: 60px 20px; color: var(--pwd-lm-text, #94a3b8); opacity: 0.55; }

.pwd-browse-pagination { display: flex; justify-content: center; gap: 6px; margin-top: 28px; }
.pwd-page-btn {
	display: flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; border-radius: 8px; text-decoration: none;
	color: var(--pwd-lm-text, inherit); background: #fff; border: 1px solid #e2e8f0; font-size: 0.875em; font-weight: 600;
}
.pwd-page-btn.is-current { background: var(--pwd-lm-primary); color: #fff; border-color: var(--pwd-lm-primary); }

/* ===================================================================
   REQUEST DETAIL MODAL
   =================================================================== */
/* The detail modal always renders on a white (#fff) background card.
   We anchor its text colors to explicit dark defaults here so they are
   always readable regardless of what Appearance settings the user has
   configured for the browse_requests or any other section. Individual
   elements that need brand color (accent, primary) still use vars. */
.pwd-detail-box { max-width: 620px; }
.pwd-detail-modal-title { font-size: 1.06em; font-weight: 700; color: var(--pwd-lm-secondary, #0f172a); margin: 0; }
.pwd-detail-meta-row {
	display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px;
}
.pwd-detail-section { margin-bottom: 18px; }
.pwd-detail-section h4 {
	font-size: 0.81em; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
	color: #94a3b8; opacity: 0.8; margin: 0 0 10px;
}
.pwd-detail-field { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid #f1f5f9; font-size: 0.875em; }
.pwd-detail-field:last-child { border-bottom: none; }
/* Explicit colors — not inheriting from section — so they always read on white */
.pwd-detail-field-label { color: #64748b; flex-shrink: 0; }
.pwd-detail-field-value { color: #0f172a; font-weight: 600; text-align: right; }

.pwd-detail-contact-card {
	background: #f8fafc; border: 1px solid #e2e8f0; border-radius: var(--pwd-lm-radius);
	padding: 14px 16px;
}
.pwd-detail-contact-row { display: flex; align-items: center; gap: 10px; font-size: 0.875em; padding: 5px 0; color: #0f172a; }
.pwd-detail-contact-row.is-locked { color: #94a3b8; }
.pwd-detail-contact-icon { width: 18px; text-align: center; }

.pwd-detail-cost-info { font-size: 0.875em; color: #0f172a; flex: 1; }
.pwd-detail-cost-info strong { color: var(--pwd-lm-accent); }

.pwd-detail-unlock-banner {
	display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
	background: var(--pwd-lm-banner-bg, var(--pwd-lm-secondary, #0f172a));
	color: var(--pwd-lm-banner-text, #fff);
	border-radius: var(--pwd-lm-radius); padding: 14px 18px; margin-bottom: 16px;
}
.pwd-detail-unlock-banner p { margin: 0; font-size: 0.875em; color: var(--pwd-lm-banner-text, #fff); }
.pwd-detail-unlock-banner strong { color: var(--pwd-lm-accent); }
/* The "Unlock Now" button inside the banner always uses white bg + secondary text
   for maximum contrast regardless of the banner gradient. */
.pwd-detail-unlock-banner .pwd-lm-btn {
	background: #fff; color: var(--pwd-lm-secondary);
	flex-shrink: 0;
}

/* ===================================================================
   PRO DASHBOARD
   =================================================================== */
.pwd-lm-section--pro_dashboard { padding: 24px 0 60px; max-width: 920px; margin: 0 auto; }

.pwd-dash-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.pwd-dash-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(15,23,42,0.1); }
.pwd-dash-identity h2 { margin: 0; font-size: 1.375em; color: var(--pwd-lm-secondary); }
.pwd-dash-tagline { margin: 2px 0 6px; color: var(--pwd-lm-text, #64748b); opacity: 0.7; font-size: 0.875em; }
.pwd-dash-rating { display: flex; align-items: center; gap: 6px; font-size: 0.81em; color: var(--pwd-lm-text, #64748b); opacity: 0.7; }

.pwd-stars { color: #e2e8f0; font-size: 0.94em; letter-spacing: 1px; }
.pwd-stars .filled { color: #fbbf24; }

.pwd-dash-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.pwd-dash-stat {
	background: #fff; border: 1px solid #e2e8f0; border-radius: var(--pwd-lm-radius);
	padding: 16px; text-align: center; display: flex; flex-direction: column; gap: 4px;
}
.pwd-dash-stat-val { font-size: 1.625em; font-weight: 800; color: var(--pwd-lm-secondary); }
.pwd-dash-stat-label { font-size: 0.75em; color: var(--pwd-lm-text, #94a3b8); opacity: 0.55; text-transform: uppercase; letter-spacing: .5px; }
.pwd-dash-stat-action { font-size: 0.75em; color: var(--pwd-lm-primary); font-weight: 600; text-decoration: none; margin-top: 4px; }

.pwd-dash-completeness { margin-bottom: 20px; }
.pwd-dash-completeness-header { display: flex; justify-content: space-between; font-size: 0.875em; font-weight: 600; color: var(--pwd-lm-secondary); margin-bottom: 8px; }
.pwd-progress-bar { height: 8px; background: #f1f5f9; border-radius: 999px; overflow: hidden; }
.pwd-progress-fill { height: 100%; background: var(--pwd-lm-primary); border-radius: 999px; transition: width 0.4s ease; }
.pwd-dash-nudge { margin: 10px 0 0; font-size: 0.81em; color: var(--pwd-lm-text, #64748b); opacity: 0.7; }

.pwd-dash-tabs { display: flex; gap: 4px; border-bottom: 2px solid #f1f5f9; margin-bottom: 20px; }
.pwd-dash-tab {
	background: none; border: none; cursor: pointer; padding: 10px 18px;
	font-size: 0.875em; font-weight: 600; color: var(--pwd-lm-text, #94a3b8); opacity: 0.55; border-bottom: 2px solid transparent;
	margin-bottom: -2px; transition: color 0.15s ease, border-color 0.15s ease;
}
.pwd-dash-tab.is-active { color: var(--pwd-lm-primary); border-color: var(--pwd-lm-primary); }

.pwd-dash-panel { display: none; }
.pwd-dash-panel.is-active { display: block; animation: pwd-fadeup 0.2s ease; }
.pwd-dash-panel-actions { margin-bottom: 16px; }
.pwd-dash-empty { text-align: center; padding: 40px 0; color: var(--pwd-lm-text, #94a3b8); opacity: 0.55; }

.pwd-dash-request-list { display: flex; flex-direction: column; gap: 12px; }
.pwd-dash-request-row {
	background: #fff; border: 1px solid #e2e8f0; border-radius: var(--pwd-lm-radius); padding: 16px;
}
.pwd-dash-req-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pwd-dash-request-row h4 { margin: 0 0 4px; font-size: 1em; color: var(--pwd-lm-text, var(--pwd-lm-secondary)); }
.pwd-dash-req-contact { display: flex; flex-wrap: wrap; gap: 12px; font-size: 0.81em; color: var(--pwd-lm-text, inherit); margin: 8px 0; }
.pwd-dash-req-actions { display: flex; gap: 10px; margin-top: 10px; }

/* Profile editor */
.pwd-profile-editor { max-width: 640px; }
.pwd-prof-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.pwd-prof-cats .pwd-lm-option-item { padding: 7px 14px; font-size: 0.81em; }

/* Wallet */
.pwd-wallet-balance-card {
	display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
	margin-bottom: 20px;
}
.pwd-wallet-balance { font-size: 1.375em; color: var(--pwd-lm-secondary); }
.pwd-wallet-table { width: 100%; border-collapse: collapse; font-size: 0.81em; }
.pwd-wallet-table th, .pwd-wallet-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #f1f5f9; }
.pwd-wallet-table th { color: var(--pwd-lm-text, #94a3b8); opacity: 0.55; text-transform: uppercase; font-size: 0.69em; letter-spacing: .5px; }
.pwd-txn-positive { color: #16a34a; font-weight: 700; }
.pwd-txn-negative { color: #ef4444; font-weight: 700; }
.pwd-txn-type {
	font-size: 0.69em; font-weight: 700; padding: 3px 8px; border-radius: 999px;
	background: #f1f5f9; color: var(--pwd-lm-text, inherit); text-transform: capitalize;
}

@media (max-width: 640px) {
	.pwd-dash-stats { grid-template-columns: 1fr; }
	.pwd-dash-header { flex-direction: column; text-align: center; }
}

/* ===================================================================
   WALLET - CREDIT PACKAGES (Buy Credits)
   =================================================================== */
.pwd-wallet-packages-title,
.pwd-wallet-history-title {
	font-size: 1em; font-weight: 700; color: var(--pwd-lm-secondary);
	margin: 24px 0 14px;
}
.pwd-wallet-packages {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
}
.pwd-wallet-package {
	position: relative;
	background: #fff; border: 1.5px solid #e2e8f0; border-radius: var(--pwd-lm-radius);
	padding: 20px 16px; text-align: center;
	display: flex; flex-direction: column; gap: 6px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pwd-wallet-package:hover { border-color: var(--pwd-lm-primary); box-shadow: 0 4px 16px rgba(15,23,42,0.07); }
.pwd-wallet-package.is-featured {
	border-color: var(--pwd-lm-primary); border-width: 2px;
	box-shadow: 0 6px 20px rgba(37,99,235,0.12);
}
.pwd-wallet-package-tag {
	position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
	background: var(--pwd-lm-accent); color: #fff; font-size: 0.69em; font-weight: 700;
	padding: 3px 12px; border-radius: 999px; white-space: nowrap;
}
.pwd-wallet-package h4 { margin: 6px 0 0; font-size: 0.94em; color: var(--pwd-lm-secondary); }
.pwd-wallet-package-credits { font-size: 1.625em; font-weight: 800; color: var(--pwd-lm-primary); }
.pwd-wallet-package-credits span { font-size: 0.81em; font-weight: 600; color: var(--pwd-lm-text, #94a3b8); opacity: 0.55; }
.pwd-wallet-package-price { font-size: 1.13em; font-weight: 700; color: var(--pwd-lm-text, var(--pwd-lm-secondary)); }
.pwd-wallet-package-per { font-size: 0.75em; color: var(--pwd-lm-text, #94a3b8); opacity: 0.55; margin-bottom: 6px; }
.pwd-wallet-package .pwd-lm-btn { width: 100%; }
.pwd-wallet-checkout-note { font-size: 0.75em; color: var(--pwd-lm-text, #94a3b8); opacity: 0.55; text-align: center; margin: 12px 0 0; }

@media (max-width: 480px) {
	.pwd-wallet-packages { grid-template-columns: 1fr 1fr; }
}

/* ===================================================================
   QUOTATION BUILDER (3-step: Build / Review / Send)
   =================================================================== */
.pwd-quote-box { max-width: 680px; }

.pwd-quote-steps {
	display: flex; gap: 8px; padding: 14px 24px 0;
}
.pwd-quote-step {
	flex: 1; display: flex; align-items: center; gap: 8px;
	font-size: 0.81em; font-weight: 600; color: var(--pwd-lm-text, #94a3b8); opacity: 0.55;
	padding-bottom: 12px; border-bottom: 3px solid #e2e8f0;
}
.pwd-quote-step-num {
	display: flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; border-radius: 50%; background: #e2e8f0; color: #fff;
	font-size: 0.75em; flex-shrink: 0;
}
.pwd-quote-step.is-active,
.pwd-quote-step.is-done { color: var(--pwd-lm-secondary); border-color: var(--pwd-lm-primary); }
.pwd-quote-step.is-active .pwd-quote-step-num,
.pwd-quote-step.is-done .pwd-quote-step-num { background: var(--pwd-lm-primary); }

.pwd-quote-panel { display: none; }
.pwd-quote-panel.is-active { display: block; animation: pwd-fadeup 0.2s ease; }

.pwd-quote-request-banner {
	background: #f8fafc; border: 1px solid #e2e8f0; border-radius: var(--pwd-lm-radius);
	padding: 12px 16px; margin-bottom: 18px; font-size: 0.81em; color: var(--pwd-lm-text, inherit);
	display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}

/* Line items table */
.pwd-quote-items { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.pwd-quote-item-row {
	display: grid;
	grid-template-columns: 1fr 60px 90px 80px 90px 32px;
	gap: 8px; align-items: center;
}
.pwd-quote-item-row input {
	width: 100%; padding: 8px 10px; border: 1.5px solid #e2e8f0; border-radius: 8px;
	font-size: 0.81em; color: var(--pwd-lm-text, inherit);
}
.pwd-quote-item-row input:focus { border-color: var(--pwd-lm-primary); outline: none; }
.pwd-quote-item-amount {
	font-weight: 700; color: var(--pwd-lm-secondary); text-align: right; font-size: 0.81em;
	padding-right: 4px;
}
.pwd-quote-item-remove {
	background: none; border: none; cursor: pointer; color: #ef4444; padding: 4px;
	display: flex; align-items: center; justify-content: center;
}
.pwd-quote-items-head {
	display: grid; grid-template-columns: 1fr 60px 90px 80px 90px 32px; gap: 8px;
	font-size: 0.69em; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
	color: var(--pwd-lm-text, #94a3b8); opacity: 0.55; padding: 0 0 2px;
}
.pwd-quote-add-item {
	background: none; border: 1.5px dashed #cbd5e1; border-radius: 8px;
	padding: 9px; color: var(--pwd-lm-text, #64748b); opacity: 0.7; font-size: 0.81em; font-weight: 600; cursor: pointer;
	text-align: center; transition: border-color 0.15s ease, color 0.15s ease;
}
.pwd-quote-add-item:hover { border-color: var(--pwd-lm-primary); color: var(--pwd-lm-primary); }

/* Totals */
.pwd-quote-totals { border-top: 1px solid #f1f5f9; padding-top: 12px; margin-top: 4px; }
.pwd-quote-total-row { display: flex; justify-content: space-between; font-size: 0.875em; padding: 4px 0; color: var(--pwd-lm-text, inherit); }
.pwd-quote-total-row.grand { font-size: 1.13em; font-weight: 800; color: var(--pwd-lm-secondary); border-top: 1px solid #f1f5f9; margin-top: 6px; padding-top: 10px; }

/* Review */
.pwd-quote-review-section { margin-bottom: 18px; }
.pwd-quote-review-section h4 { font-size: 0.81em; text-transform: uppercase; letter-spacing: .5px; color: var(--pwd-lm-text, #94a3b8); opacity: 0.55; margin: 0 0 10px; }
.pwd-quote-review-item {
	display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid #f1f5f9; font-size: 0.875em;
}
.pwd-quote-review-item:last-child { border-bottom: none; }
.pwd-quote-review-meta { font-size: 0.81em; color: var(--pwd-lm-text, #64748b); opacity: 0.7; }

/* Send confirmation */
.pwd-quote-send-summary {
	background: #f8fafc; border: 1px solid #e2e8f0; border-radius: var(--pwd-lm-radius);
	padding: 16px; text-align: center; margin-bottom: 16px;
}
.pwd-quote-send-summary .pwd-quote-send-total { font-size: 1.75em; font-weight: 800; color: var(--pwd-lm-primary); }

/* ===================================================================
   CUSTOMER DASHBOARD
   =================================================================== */
.pwd-lm-section--customer_dashboard { padding: 24px 0 60px; max-width: 880px; margin: 0 auto; }
.pwd-cust-header { margin-bottom: 20px; }
.pwd-cust-header h2 { font-size: 1.5em; font-weight: 700; color: var(--pwd-lm-secondary); margin: 0 0 6px; }
.pwd-cust-header p { font-size: 1em; color: var(--pwd-lm-text, #64748b); opacity: 0.7; margin: 0; }

.pwd-cust-list { display: flex; flex-direction: column; gap: 16px; }
.pwd-cust-request-card {
	background: #fff; border: 1px solid #e2e8f0; border-radius: var(--pwd-lm-radius); padding: 18px;
}
.pwd-cust-request-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.pwd-cust-request-head h3 { margin: 0; font-size: 1em; color: var(--pwd-lm-text, var(--pwd-lm-secondary)); }
.pwd-cust-status {
	font-size: 0.69em; font-weight: 700; padding: 3px 10px; border-radius: 999px; text-transform: capitalize;
}
.pwd-cust-status.open    { background: color-mix(in srgb, var(--pwd-lm-primary) 8%, #fff); color: var(--pwd-lm-primary); }
.pwd-cust-status.hired   { background: #dcfce7; color: #16a34a; }
.pwd-cust-status.closed  { background: #f1f5f9; color: #64748b; }

.pwd-cust-quotes { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.pwd-cust-quote-row {
	display: flex; align-items: center; gap: 12px; padding: 10px 12px;
	background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; flex-wrap: wrap;
}
.pwd-cust-quote-pro { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 160px; }
.pwd-cust-quote-pro img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.pwd-cust-quote-pro-name { font-weight: 600; font-size: 0.81em; color: var(--pwd-lm-text, inherit); }
.pwd-cust-quote-total { font-weight: 700; font-size: 0.875em; color: var(--pwd-lm-secondary); }
.pwd-cust-quote-status {
	font-size: 0.69em; font-weight: 700; padding: 3px 10px; border-radius: 999px; text-transform: capitalize;
}
.pwd-cust-quote-status.sent     { background: #fef9c3; color: #854d0e; }
.pwd-cust-quote-status.accepted { background: #dcfce7; color: #16a34a; }
.pwd-cust-quote-status.declined { background: #fee2e2; color: #dc2626; }
.pwd-cust-quote-status.expired  { background: #f1f5f9; color: #94a3b8; }

.pwd-cust-no-quotes { font-size: 0.81em; color: var(--pwd-lm-text, #94a3b8); opacity: 0.55; margin: 8px 0 0; }

/* ===================================================================
   QUOTE VIEW (standalone page + modal)
   =================================================================== */
.pwd-quote-page-card {
	max-width: 620px; margin: 0 auto; background: #fff; border: 1px solid #e2e8f0;
	border-radius: var(--pwd-lm-radius); padding: 28px; box-shadow: 0 2px 12px rgba(15,23,42,0.05);
}
.pwd-quote-view-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.pwd-quote-view-header img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.pwd-quote-view-header h3 { margin: 0; font-size: 1.13em; color: var(--pwd-lm-secondary); }
.pwd-quote-view-header p { margin: 2px 0 0; font-size: 0.81em; color: var(--pwd-lm-text, #64748b); opacity: 0.7; }

.pwd-quote-view-status-banner {
	border-radius: var(--pwd-lm-radius); padding: 12px 16px; margin-bottom: 16px; font-size: 0.875em; text-align: center; font-weight: 600;
}
.pwd-quote-view-status-banner.sent     { background: color-mix(in srgb, var(--pwd-lm-primary) 8%, #fff); color: var(--pwd-lm-primary); }
.pwd-quote-view-status-banner.accepted { background: #dcfce7; color: #16a34a; }
.pwd-quote-view-status-banner.declined { background: #fee2e2; color: #dc2626; }
.pwd-quote-view-status-banner.expired  { background: #f1f5f9; color: #64748b; }

.pwd-quote-view-actions { display: flex; gap: 10px; margin-top: 20px; }
.pwd-quote-view-actions .pwd-lm-btn { flex: 1; }
.pwd-quote-decline-btn { background: #fff; border: 2px solid #ef4444; color: #ef4444; }

@media (max-width: 600px) {
	.pwd-quote-item-row { grid-template-columns: 1fr 1fr; }
	.pwd-quote-items-head { display: none; }
	.pwd-quote-item-row input { font-size: 0.875em; }
}

/* ===================================================================
   REVIEW MODAL
   =================================================================== */
.pwd-review-box { max-width: 480px; }
.pwd-review-pro-name { font-size: 0.94em; font-weight: 600; color: var(--pwd-lm-secondary); margin: 0 0 14px; text-align: center; }
.pwd-review-stars { display: flex; justify-content: center; gap: 6px; margin-bottom: 18px; }
.pwd-review-star {
	background: none; border: none; cursor: pointer; font-size: 2em; line-height: 1;
	color: #e2e8f0; transition: color 0.12s ease, transform 0.1s ease; padding: 0;
}
.pwd-review-star:hover { transform: scale(1.1); }
.pwd-review-star.is-filled { color: #fbbf24; }

.pwd-cust-review-cta {
	display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
	margin-top: 12px; padding: 10px 12px; background: #fff7ed; border: 1px solid #fed7aa;
	border-radius: 8px; font-size: 0.81em; color: #9a3412;
}

/* ===================================================================
   PRO PROFILE PAGE
   =================================================================== */
.pwd-lm-section--pro_profile { padding: 24px 0 60px; max-width: 760px; margin: 0 auto; }

.pwd-profile-header { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 16px; }
.pwd-profile-avatar { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 2px 10px rgba(15,23,42,0.08); flex-shrink: 0; }
.pwd-profile-headline h2 { margin: 0; font-size: 1.5em; color: var(--pwd-lm-secondary); }
.pwd-profile-tagline { margin: 4px 0; color: var(--pwd-lm-text, #64748b); opacity: 0.7; font-size: 0.875em; }
.pwd-profile-rating { display: flex; align-items: center; gap: 8px; font-size: 0.81em; color: var(--pwd-lm-text, #64748b); opacity: 0.7; margin: 4px 0; }
.pwd-profile-location { font-size: 0.81em; color: var(--pwd-lm-text, #94a3b8); opacity: 0.55; margin: 4px 0 0; }

.pwd-profile-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }

.pwd-profile-section { margin-bottom: 22px; }
.pwd-profile-section h3 { font-size: 0.875em; text-transform: uppercase; letter-spacing: .5px; color: var(--pwd-lm-text, #94a3b8); opacity: 0.55; margin: 0 0 10px; }
.pwd-profile-section p { font-size: 0.875em; color: var(--pwd-lm-text, inherit); line-height: 1.6; margin: 0; }

.pwd-profile-portfolio { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.pwd-profile-portfolio img { width: 100%; height: 110px; object-fit: cover; border-radius: var(--pwd-lm-radius); }

.pwd-profile-reviews { display: flex; flex-direction: column; gap: 14px; }
.pwd-profile-review { border: 1px solid #f1f5f9; border-radius: var(--pwd-lm-radius); padding: 14px 16px; }
.pwd-profile-review-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.pwd-profile-review-name { font-weight: 600; font-size: 0.81em; color: var(--pwd-lm-text, inherit); }
.pwd-profile-review-verified { font-size: 0.69em; font-weight: 700; color: #16a34a; background: #dcfce7; padding: 2px 8px; border-radius: 999px; }
.pwd-profile-review-date { font-size: 0.75em; color: var(--pwd-lm-text, #94a3b8); opacity: 0.55; margin-left: auto; }
.pwd-profile-review-comment { font-size: 0.875em; color: var(--pwd-lm-text, inherit); margin: 0; line-height: 1.5; }
.pwd-profile-review-reply {
	margin-top: 10px; padding: 10px 12px; background: #f8fafc; border-radius: 8px; font-size: 0.81em; color: var(--pwd-lm-text, inherit);
}
.pwd-profile-review-reply strong { display: block; margin-bottom: 4px; color: var(--pwd-lm-secondary); font-size: 0.75em; }
.pwd-profile-review-reply p { margin: 0; font-size: 0.81em; }

/* Pro dashboard reviews tab */
.pwd-pro-review-row { border: 1px solid #e2e8f0; border-radius: var(--pwd-lm-radius); padding: 14px 16px; margin-bottom: 12px; }
.pwd-pro-review-reply-form { margin-top: 10px; display: flex; gap: 8px; }
.pwd-pro-review-reply-form textarea { flex: 1; min-height: 60px; }

@media (max-width: 540px) {
	.pwd-profile-header { flex-direction: column; align-items: center; text-align: center; }
}

/* ===================================================================
   VERIFIED BADGE & VERIFICATION BANNER
   =================================================================== */
.pwd-verified-badge {
	display: inline-flex; align-items: center; gap: 4px;
	font-size: 0.75em; font-weight: 700; color: #16a34a; background: #dcfce7;
	padding: 2px 10px; border-radius: 999px; vertical-align: middle;
}

.pwd-verify-banner {
	display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
	margin-bottom: 20px; background: linear-gradient(135deg, #fff7ed, #fef3c7);
	border: 1px solid #fde68a;
}
.pwd-verify-banner-icon { font-size: 2em; flex-shrink: 0; }
.pwd-verify-banner-content { flex: 1; min-width: 200px; }
.pwd-verify-banner-content strong { display: block; color: #92400e; font-size: 0.94em; margin-bottom: 2px; }
.pwd-verify-banner-content p { margin: 0; font-size: 0.81em; color: #b45309; }
.pwd-verify-pending {
	font-size: 0.75em; font-weight: 700; color: #92400e; background: #fef3c7;
	border: 1px solid #fde68a; padding: 6px 14px; border-radius: 999px; flex-shrink: 0;
}

/* ===================================================================
   AVATAR UPLOAD
   =================================================================== */
.pwd-avatar-upload { display: flex; align-items: center; gap: 16px; }
.pwd-avatar-preview {
	width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
	border: 2px solid #e2e8f0; flex-shrink: 0;
}
.pwd-upload-btn { display: inline-flex; cursor: pointer; padding: 8px 16px; font-size: 0.81em; }

/* ===================================================================
   PORTFOLIO UPLOAD
   =================================================================== */
.pwd-portfolio-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-bottom: 8px;
}
.pwd-portfolio-item {
	position: relative; border-radius: var(--pwd-lm-radius); overflow: hidden; aspect-ratio: 1;
}
.pwd-portfolio-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pwd-portfolio-remove {
	position: absolute; top: 4px; right: 4px; width: 22px; height: 22px;
	border-radius: 50%; border: none; background: rgba(15,23,42,0.6); color: #fff;
	font-size: 1em; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.pwd-portfolio-remove:hover { background: #ef4444; }
.pwd-portfolio-add {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
	aspect-ratio: 1; border: 1.5px dashed #cbd5e1; border-radius: var(--pwd-lm-radius);
	cursor: pointer; color: var(--pwd-lm-text, #94a3b8); opacity: 0.55; font-size: 0.75em; font-weight: 600; text-align: center;
	transition: border-color 0.15s ease, color 0.15s ease;
}
.pwd-portfolio-add span { font-size: 1.5em; line-height: 1; }
.pwd-portfolio-add:hover { border-color: var(--pwd-lm-primary); color: var(--pwd-lm-primary); }

/* ===================================================================
   VERIFICATION APPLICATION PAGE
   =================================================================== */
.pwd-verification-page { max-width: 640px; margin: 0 auto; }
.pwd-verify-header { text-align: center; margin-bottom: 24px; }
.pwd-verify-header h2 { font-size: 1.625em; font-weight: 700; color: var(--pwd-lm-secondary); margin: 0 0 8px; }
.pwd-verify-header p { font-size: 1em; color: var(--pwd-lm-text, #64748b); opacity: 0.7; margin: 0; }

.pwd-honeypot-widget { max-width: 200px; }
.pwd-honeypot-answer { width: 100%; }

/* ===================================================================
   SPAM WIDGET (shared across popup form, signup, verification)
   =================================================================== */
.pwd-spam-widget { margin: 14px 0; }
.pwd-honeypot-widget { max-width: 220px; margin: 14px 0; }
.pwd-honeypot-label { display: flex; align-items: center; gap: 4px; }

/* ===================================================================
   VERIFIED BADGE IMAGE (front-end)
   =================================================================== */
.pwd-verified-badge-img {
	height: 18px; width: auto; vertical-align: middle; display: inline-block; margin-left: 2px;
}

/* ===================================================================
   PRO SEARCH PAGE
   =================================================================== */
.pwd-pro-search-section { max-width: 1000px; margin: 0 auto; padding: 24px 16px 60px; }
.pwd-pro-search-header { text-align: center; margin-bottom: 24px; }
.pwd-pro-search-header h2 { font-size: 1.75em; font-weight: 700; color: var(--pwd-lm-secondary); margin: 0 0 8px; }
.pwd-pro-search-header p { font-size: 1em; color: var(--pwd-lm-text, #64748b); opacity: 0.7; margin: 0; }

.pwd-pro-search-filters {
	display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end;
	background: color-mix(in srgb, var(--pwd-lm-primary) 4%, #fff);
	border: 1px solid color-mix(in srgb, var(--pwd-lm-primary) 12%, #fff);
	border-radius: var(--pwd-lm-radius); padding: 18px; margin-bottom: 24px;
}
.pwd-pro-search-filters .pwd-lm-field-group { flex: 1; min-width: 160px; margin-bottom: 0; }
.pwd-pro-search-filters label {
	display: block; font-size: 0.81em; font-weight: 600;
	color: var(--pwd-lm-text, var(--pwd-lm-secondary)); margin-bottom: 6px;
}
.pwd-pro-search-filters select {
	width: 100%; padding: 10px 12px;
	height: 42px; line-height: 1.4; box-sizing: border-box;
	border: 1.5px solid color-mix(in srgb, var(--pwd-lm-primary) 20%, #e2e8f0);
	border-radius: var(--pwd-lm-radius);
	font-size: 0.875em; font-family: var(--pwd-lm-font);
	background: #fff; color: var(--pwd-lm-text, inherit);
	appearance: auto; -webkit-appearance: auto;
	transition: border-color 0.15s ease;
}
.pwd-pro-search-filters select:focus {
	outline: none;
	border-color: var(--pwd-lm-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--pwd-lm-primary) 12%, transparent);
}
.pwd-pro-search-filters .pwd-lm-btn { flex-shrink: 0; }

.pwd-pro-search-count { font-size: 0.875em; color: var(--pwd-lm-text, #64748b); opacity: 0.7; margin-bottom: 14px; }

.pwd-pro-search-grid {
	display: grid;
	grid-template-columns: repeat(var(--pwd-search-columns, 3), 1fr);
	gap: 16px;
}
@media (max-width: 900px) { .pwd-pro-search-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 540px) { .pwd-pro-search-grid { grid-template-columns: 1fr !important; } }
.pwd-pro-search-card {
	display: flex; flex-direction: column; align-items: center;
	background: #fff; border: 1px solid #e2e8f0; border-radius: var(--pwd-lm-radius);
	padding: 20px; text-align: center; color: inherit;
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.pwd-pro-search-card:hover { box-shadow: 0 4px 16px rgba(15,23,42,0.08); border-color: var(--pwd-lm-primary); }
.pwd-pro-search-card-link {
	display: flex; flex-direction: column; align-items: center; width: 100%;
	text-decoration: none; color: inherit;
}
.pwd-pro-search-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; margin-bottom: 10px; }
.pwd-pro-search-name { font-size: 0.94em; font-weight: 700; color: var(--pwd-lm-text, var(--pwd-lm-secondary)); }
.pwd-pro-search-tagline { font-size: 0.81em; color: var(--pwd-lm-text, #64748b); opacity: 0.7; margin: 4px 0 8px; }
.pwd-pro-search-grid .pwd-dash-rating { justify-content: center; margin-bottom: 8px; }
.pwd-pro-search-grid .pwd-profile-tags { justify-content: center; margin-bottom: 4px; }

@media (max-width: 640px) {
	.pwd-pro-search-filters { flex-direction: column; align-items: stretch; }
}

/* ===================================================================
   GALLERY (filterable grid/card gallery - multi-instance)
   =================================================================== */
.pwd-lm-gallery-wrap { padding: 0; }

.pwd-lm-gallery-filters {
	display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 20px;
}
.pwd-lm-gallery-filter {
	border: 1.5px solid var(--pwd-gallery-border, #e2e8f0);
	background: transparent; color: var(--pwd-lm-text, inherit);
	padding: 8px 16px; border-radius: 999px; font-size: 0.81em; font-weight: 600;
	cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pwd-lm-gallery-filter:hover { border-color: var(--pwd-gallery-filter-bg, var(--pwd-lm-primary)); }
.pwd-lm-gallery-filter.is-active {
	background: var(--pwd-gallery-filter-bg, var(--pwd-lm-primary));
	color: var(--pwd-gallery-filter-text, #fff);
	border-color: var(--pwd-gallery-filter-bg, var(--pwd-lm-primary));
}

.pwd-lm-gallery {
	display: grid;
	grid-template-columns: repeat(var(--pwd-gallery-columns, 4), 1fr);
	gap: var(--pwd-gallery-gap, 16px);
	transition: opacity 0.2s ease;
}
.pwd-lm-gallery.is-loading { pointer-events: none; }

.pwd-lm-gallery-empty {
	grid-column: 1 / -1; text-align: center; padding: 50px 20px;
	color: var(--pwd-lm-text, #94a3b8); opacity: 0.7;
}

.pwd-lm-gallery-card {
	display: flex; flex-direction: column; align-items: center; text-align: center;
	gap: 6px; text-decoration: none; color: var(--pwd-gallery-text, var(--pwd-lm-text, inherit));
	background: var(--pwd-gallery-bg, #fff);
	border: 1px solid var(--pwd-gallery-border, #e2e8f0);
	border-radius: var(--pwd-gallery-radius, 12px);
	padding: var(--pwd-gallery-padding, 20px);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

/* Card mode (pros): the name/photo/details area is its own link, separate
   from the "View Profile" button below it - an <a> can't be nested inside
   another <a>, so the card wrapper itself is a <div>, not a link. Grid mode
   (service categories) has no separate button, so .pwd-lm-gallery-card is
   still the link there. */
.pwd-lm-gallery-card-link {
	display: flex; flex-direction: column; align-items: center; text-align: center;
	gap: 6px; width: 100%; text-decoration: none; color: inherit;
}

/* Hover effects - toggled via a class on the gallery container, set from
   the Styling settings (default: lift). */
.pwd-lm-gallery--hover-lift .pwd-lm-gallery-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(15,23,42,0.08); }
.pwd-lm-gallery--hover-shadow .pwd-lm-gallery-card:hover { box-shadow: 0 6px 20px rgba(15,23,42,0.12); }
.pwd-lm-gallery--hover-zoom .pwd-lm-gallery-card:hover .pwd-lm-gallery-avatar,
.pwd-lm-gallery--hover-zoom .pwd-lm-gallery-card:hover .pwd-lm-gallery-icon { transform: scale(1.08); }
.pwd-lm-gallery-card:hover { border-color: var(--pwd-lm-primary); }

/* Grid mode (service categories) */
.pwd-lm-gallery-card--grid { padding-top: 28px; padding-bottom: 24px; }
.pwd-lm-gallery-icon {
	width: 52px; height: 52px; border-radius: 50%;
	background: var(--pwd-lm-primary); color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-size: 1.25em; font-weight: 700; margin-bottom: 8px;
	transition: transform 0.18s ease;
}
.pwd-lm-gallery-name { font-size: 0.94em; font-weight: 700; color: inherit; }
.pwd-lm-gallery-count { font-size: 0.75em; opacity: 0.65; }

/* Card mode (pros) */
.pwd-lm-gallery-avatar {
	width: 64px; height: 64px; border-radius: 50%; object-fit: cover; margin-bottom: 6px;
	transition: transform 0.18s ease;
}
.pwd-lm-gallery-pro-name { font-size: 0.94em; font-weight: 700; }
.pwd-lm-gallery-tagline { font-size: 0.81em; opacity: 0.7; }
.pwd-lm-gallery-rating { display: flex; align-items: center; gap: 6px; font-size: 0.81em; opacity: 0.85; }
.pwd-lm-gallery-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 4px; }
.pwd-lm-gallery-tag {
	font-size: 0.69em; font-weight: 600; padding: 3px 10px; border-radius: 999px;
	background: rgba(15,23,42,0.06);
	color: var(--pwd-gallery-text, inherit);
	border: 1px solid var(--pwd-gallery-border, #e2e8f0);
	opacity: 0.9;
}

/* "View Profile" CTA button - a real, separate <a>, not just styled text.
   This is what the Styling tab's Card Button colour fields control. */
.pwd-lm-gallery-cta {
	display: inline-block;
	font-size: 0.81em; font-weight: 700; line-height: 1; text-decoration: none;
	padding: 9px 18px; border-radius: 999px; cursor: pointer;
	background: var(--pwd-gallery-btn-bg, var(--pwd-btn-bg, var(--pwd-lm-primary, #0f172a)));
	color: var(--pwd-gallery-btn-text, var(--pwd-btn-color, #fff));
	transition: background 0.15s ease, color 0.15s ease;
}
.pwd-lm-gallery-cta:hover,
.pwd-lm-gallery-cta:focus-visible {
	background: var(--pwd-gallery-btn-hover-bg, var(--pwd-btn-hover-bg, var(--pwd-lm-secondary, #0f172a)));
	color: var(--pwd-gallery-btn-hover-text, var(--pwd-btn-hover-color, #fff));
}

/* Category image icon variant */
.pwd-lm-gallery-icon--img {
	background: transparent;
	width: 64px; height: 64px; border-radius: 50%;
	overflow: hidden; padding: 0;
}
.pwd-lm-gallery-icon--img img {
	width: 100%; height: 100%; object-fit: cover; display: block;
}

@media (max-width: 900px) {
	.pwd-lm-gallery { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 540px) {
	.pwd-lm-gallery { grid-template-columns: 1fr !important; }
}

/* ===================================================================
   [pwd_lm_reviews] SHORTCODE WIDGET
   =================================================================== */
.pwd-reviews-widget { max-width: 780px; }
.pwd-reviews-heading { font-size: 1.15em; font-weight: 700; margin: 0 0 18px; }
.pwd-reviews-heading .pwd-reviews-count { color: var(--pwd-lm-primary); }
.pwd-reviews-notice { color: #64748b; font-style: italic; }

.pwd-reviews-list { display: flex; flex-direction: column; gap: 16px; }
.pwd-reviews-widget--grid .pwd-reviews-list {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px;
}

.pwd-review-item {
	background: #fff; border: 1px solid #e2e8f0;
	border-radius: var(--pwd-lm-radius, 10px); padding: 18px 20px;
}
.pwd-review-header {
	display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px;
}
.pwd-review-stars { display: flex; gap: 2px; }
.pwd-review-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 0.88em; }
.pwd-review-meta strong { color: var(--pwd-lm-secondary, #0f172a); }
.pwd-review-date { color: #94a3b8; }
.pwd-review-verified {
	font-size: 0.75em; font-weight: 600; color: #15803d;
	background: #dcfce7; border-radius: 999px; padding: 2px 8px;
}
.pwd-review-body { font-size: 0.9em; line-height: 1.6; color: #374151; margin: 0; }
.pwd-review-reply {
	margin-top: 12px; padding: 10px 14px;
	background: #f8fafc; border-left: 3px solid var(--pwd-lm-primary, #2563eb);
	border-radius: 0 6px 6px 0; font-size: 0.86em;
}
.pwd-review-reply-label { font-weight: 600; display: block; margin-bottom: 4px; color: var(--pwd-lm-secondary, #0f172a); }
.pwd-review-reply p { margin: 0; color: #374151; line-height: 1.5; }

.pwd-reviews-pagination {
	display: flex; gap: 6px; flex-wrap: wrap; margin-top: 20px;
}
.pwd-reviews-page-link {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 36px; height: 36px; padding: 0 10px;
	border-radius: var(--pwd-btn-radius, var(--pwd-lm-radius, 8px));
	border: 1px solid #e2e8f0; font-size: 0.88em; font-weight: 600;
	text-decoration: none; color: var(--pwd-lm-secondary, #0f172a);
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pwd-reviews-page-link:hover { border-color: var(--pwd-btn-bg, var(--pwd-lm-primary)); color: var(--pwd-btn-bg, var(--pwd-lm-primary)); }
.pwd-reviews-page-link.is-active {
	background: var(--pwd-btn-bg, var(--pwd-lm-primary));
	color: var(--pwd-btn-color, #fff); border-color: transparent;
}

/* ===================================================================
   FILE DROP-ZONE (verification form file fields)
   =================================================================== */
.pwd-file-drop-zone {
	position: relative;
	border: 2px dashed #cbd5e1;
	border-radius: var(--pwd-lm-radius, 10px);
	background: #f8fafc;
	transition: border-color 0.15s ease, background 0.15s ease;
	overflow: hidden;
}
.pwd-file-drop-zone.is-dragging {
	border-color: var(--pwd-btn-bg, var(--pwd-lm-primary, #2563eb));
	background: #eff6ff;
}
.pwd-file-drop-zone.is-error {
	border-color: #f87171;
	background: #fff1f2;
}
.pwd-file-drop-zone.has-file {
	border-style: solid;
	border-color: #86efac;
	background: #f0fdf4;
}

/* The real <input type=file> is visually hidden but still functional */
.pwd-file-drop-input {
	position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; z-index: 2;
}
/* Prevent the input from covering the clear button */
.pwd-file-drop-zone.has-file .pwd-file-drop-input { pointer-events: none; }

.pwd-file-drop-ui {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 6px; padding: 28px 20px; cursor: pointer; text-align: center;
}
.pwd-file-drop-icon {
	color: #94a3b8;
	transition: color 0.15s ease;
}
.pwd-file-drop-zone.is-dragging .pwd-file-drop-icon,
.pwd-file-drop-zone:hover .pwd-file-drop-icon {
	color: var(--pwd-btn-bg, var(--pwd-lm-primary, #2563eb));
}
.pwd-file-drop-label { font-size: 0.9em; color: #475569; font-weight: 500; }
.pwd-file-drop-browse {
	color: var(--pwd-btn-bg, var(--pwd-lm-primary, #2563eb));
	text-decoration: underline; cursor: pointer;
}
.pwd-file-drop-hint { font-size: 0.78em; color: #94a3b8; }

.pwd-file-drop-preview {
	display: flex; align-items: center; justify-content: space-between;
	padding: 12px 16px; gap: 10px;
}
.pwd-file-drop-name {
	font-size: 0.88em; font-weight: 600; color: #15803d; word-break: break-all;
}
.pwd-file-drop-clear {
	flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
	border: none; background: #fee2e2; color: #b91c1c;
	font-size: 0.75em; cursor: pointer; line-height: 1;
	display: flex; align-items: center; justify-content: center;
	z-index: 3; position: relative;
}
.pwd-file-drop-clear:hover { background: #fca5a5; }

.pwd-file-drop-error {
	padding: 6px 16px 10px;
	font-size: 0.82em; color: #b91c1c; font-weight: 500;
}

/* Honeypot spam widget in verification form */
.pwd-honeypot-widget { display: flex; flex-direction: column; gap: 6px; }
.pwd-honeypot-question { font-weight: 700; }
.pwd-honeypot-answer { width: 80px !important; }

/* ==================================================================
   Notifications Panel
   ================================================================== */
.pwd-notifications-panel { display: flex; flex-direction: column; gap: 20px; }

/* Toggle card */
.pwd-notify-toggle-card { padding: 20px 24px; }
.pwd-notify-toggle-wrap {
	display: flex; align-items: center;
	justify-content: space-between; gap: 16px;
}
.pwd-notify-toggle-wrap > div > p { margin: 4px 0 0; }

/* Toggle switch */
.pwd-toggle-switch { position: relative; display: inline-block; width: 48px; height: 26px; flex-shrink: 0; }
.pwd-toggle-switch input { opacity: 0; width: 0; height: 0; }
.pwd-toggle-slider {
	position: absolute; inset: 0; cursor: pointer;
	background: #d1d5db; border-radius: 26px;
	transition: background 0.2s;
}
.pwd-toggle-slider::before {
	content: '';
	position: absolute; left: 3px; top: 3px;
	width: 20px; height: 20px;
	background: #fff; border-radius: 50%;
	transition: transform 0.2s;
	box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.pwd-toggle-switch input:checked + .pwd-toggle-slider { background: var(--pwd-lm-primary, #2563eb); }
.pwd-toggle-switch input:checked + .pwd-toggle-slider::before { transform: translateX(22px); }

/* Locations card */
.pwd-notify-locations-card { padding: 20px 24px; transition: opacity 0.2s; }
.pwd-notify-locations-card h4 { margin: 0 0 6px; font-size: 1em; }
.pwd-notify-scope { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0; }

/* Province / City picker */
#pwd-notify-location-picker {
	margin-top: 16px;
	display: flex; flex-direction: column; gap: 16px;
	max-height: 420px; overflow-y: auto;
	padding-right: 4px;
}
.pwd-notify-province { }
.pwd-notify-province-label {
	display: flex; align-items: center; gap: 8px;
	padding: 8px 0; cursor: pointer; font-size: 0.92em;
	border-bottom: 1px solid var(--pwd-lm-border, #e5e7eb);
	margin-bottom: 8px;
}
.pwd-notify-province-label input[type="checkbox"] { cursor: pointer; }
.pwd-notify-cities { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 4px; }
.pwd-notify-cities .pwd-lm-option-item { font-size: 0.85em; padding: 5px 12px; }