/**
 * MatchLayer Public Styles
 * Mobile-first, theme-independent design.
 *
 * @package MatchLayer
 */

/* ================================
   CSS Custom Properties
   ================================ */
.ml-wrapper {
	--ml-primary: #d6526a;
	--ml-primary-hover: #d6526a;
	--ml-success: #16a34a;
	--ml-success-hover: #15803d;
	--ml-danger: #dc2626;
	--ml-danger-hover: #b91c1c;
	--ml-warning: #f59e0b;
	--ml-gray-50: #f9fafb;
	--ml-gray-100: #f3f4f6;
	--ml-gray-200: #e5e7eb;
	--ml-gray-300: #d1d5db;
	--ml-gray-400: #9ca3af;
	--ml-gray-500: #6b7280;
	--ml-gray-600: #4b5563;
	--ml-gray-700: #374151;
	--ml-gray-800: #1f2937;
	--ml-gray-900: #111827;
	--ml-border-radius: 8px;
	--ml-border-radius-sm: 4px;
	--ml-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
	--ml-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
	--ml-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", sans-serif;
}

/* ================================
   Base Wrapper
   ================================ */
.ml-wrapper {
	font-family: var(--ml-font-family);
	color: var(--ml-gray-800);
	line-height: 1.6;
	max-width: 900px;
	margin: 0 auto;
	padding: 16px;
	box-sizing: border-box;
	font-size: 16px;
}

.ml-wrapper *,
.ml-wrapper *::before,
.ml-wrapper *::after {
	box-sizing: border-box;
}

/* Defensively override theme underline styling on plugin UI links.
 * Some themes (e.g. those using `a { text-decoration: underline !important }`
 * or high-specificity rules) cause every clickable label inside the
 * MatchLayer UI — tab labels, list rows, buttons — to be underlined,
 * which makes the UI look broken. The active tab indicator uses
 * border-bottom (not text-decoration), so this !important rule does
 * not affect it. */
.ml-wrapper a,
.ml-wrapper a:hover,
.ml-wrapper a:focus,
.ml-wrapper a:visited,
.ml-header-nav a,
.ml-header-nav a:hover,
.ml-mobile-bottom-nav a,
.ml-mobile-bottom-nav a:hover {
	text-decoration: none !important;
}

/* ================================
   Typography
   ================================ */
.ml-wrapper .ml-page-title {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 0 24px 0;
	padding: 0;
	color: var(--ml-gray-900);
	border: none;
}

.ml-wrapper h3 {
	font-size: 1.125rem;
	font-weight: 600;
	margin: 0 0 16px 0;
	color: var(--ml-gray-800);
}

/* ================================
   Notices
   ================================ */
.ml-notice {
	padding: 12px 16px;
	border-radius: var(--ml-border-radius-sm);
	margin-bottom: 20px;
	font-size: 0.9375rem;
}

.ml-notice p {
	margin: 0;
}

.ml-notice-success {
	background: #ecfdf5;
	border: 1px solid #a7f3d0;
	color: #065f46;
}

.ml-notice-error,
.ml-error {
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #991b1b;
}

.ml-notice-info {
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	color: #1e40af;
}

/* ================================
   Buttons
   ================================ */
.ml-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 20px;
	font-size: 0.9375rem;
	font-weight: 600;
	font-family: var(--ml-font-family);
	line-height: 1.4;
	border: 1px solid transparent;
	border-radius: var(--ml-border-radius-sm);
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
	min-height: 44px;
	min-width: 44px;
}

.ml-btn:focus-visible {
	outline: 2px solid var(--ml-primary);
	outline-offset: 2px;
}

.ml-btn-primary {
	background: var(--ml-primary);
	color: #fff;
}

.ml-btn-primary:hover {
	background: var(--ml-primary-hover);
	color: #fff;
}

.ml-btn-secondary {
	background: var(--ml-gray-100);
	color: var(--ml-gray-700);
	border-color: var(--ml-gray-300);
}

.ml-btn-secondary:hover {
	background: var(--ml-gray-200);
	color: var(--ml-gray-700);
}

.ml-btn-success {
	background: var(--ml-success);
	color: #fff;
}

.ml-btn-success:hover {
	background: var(--ml-success-hover);
	color: #fff;
}

.ml-btn-danger {
	background: transparent;
	color: var(--ml-gray-400);
	border-color: transparent;
	text-decoration: underline;
	text-underline-offset: 2px;
	font-weight: 400;
}

.ml-btn-danger:hover {
	background: transparent;
	color: var(--ml-gray-600);
	border-color: transparent;
}

.ml-btn-text-danger {
	background: none;
	border: none;
	color: var(--ml-gray-500);
	padding: 0;
	font-size: 0.875rem;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
	font-family: inherit;
}

.ml-btn-text-danger:hover {
	background: none;
	color: var(--ml-gray-800);
}

.ml-form-actions-sub {
	display: flex;
	margin-top: 8px;
}

.ml-btn-sm {
	padding: 6px 12px;
	font-size: 0.8125rem;
	min-height: 36px;
}

/* ================================
   Forms
   ================================ */
.ml-form {
	max-width: 560px;
}

.ml-form-field {
	margin-bottom: 20px;
}

.ml-form-field label {
	display: block;
	font-size: 0.9375rem;
	font-weight: 600;
	margin-bottom: 6px;
	color: var(--ml-gray-700);
}

.ml-form-field input[type="text"],
.ml-form-field input[type="email"],
.ml-form-field input[type="password"],
.ml-form-field input[type="number"],
.ml-form-field select,
.ml-form-field textarea {
	width: 100%;
	padding: 10px 12px;
	font-size: 16px;
	font-family: var(--ml-font-family);
	border: 1px solid var(--ml-gray-300);
	border-radius: var(--ml-border-radius-sm);
	background: #fff;
	color: var(--ml-gray-800);
	transition: border-color 0.15s, box-shadow 0.15s;
	line-height: 1.4;
}

.ml-form-field input:focus,
.ml-form-field select:focus,
.ml-form-field textarea:focus {
	border-color: var(--ml-primary);
	box-shadow: 0 0 0 3px rgba(214, 82, 106, 0.15);
	outline: none;
}

.ml-form-field textarea {
	resize: vertical;
	min-height: 120px;
}

.ml-required {
	color: var(--ml-danger);
}

.ml-radio-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ml-radio-group .ml-radio-label,
.ml-form-field .ml-radio-label {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 10px;
	font-weight: 400;
	cursor: pointer;
	margin: 0;
}

.ml-radio-group .ml-radio-label input[type="radio"],
.ml-form-field .ml-radio-label input[type="radio"] {
	margin: 4px 0 0;
	width: 18px;
	height: 18px;
	min-width: 18px;
	flex: 0 0 18px;
}

/* F-163: Two-line radio label (title + help text) */
.ml-radio-label .ml-radio-text-wrap {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1 1 auto;
	min-width: 0;
}

.ml-radio-label .ml-radio-title {
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.4;
}

.ml-radio-label .ml-radio-help {
	font-size: 0.8125rem;
	color: var(--ml-gray-500);
	line-height: 1.3;
}

/* F-037: search-form custom-field groups render checkboxes/radios inline. */
.ml-search-checkbox-group,
.ml-search-radio-group {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 6px 12px;
}

.ml-search-checkbox-group .ml-checkbox-label,
.ml-search-radio-group .ml-radio-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-weight: 400;
	cursor: pointer;
}

.ml-search-checkbox-group .ml-checkbox-label input[type="checkbox"],
.ml-search-radio-group .ml-radio-label input[type="radio"] {
	margin: 0;
	width: 16px;
	height: 16px;
	min-width: 16px;
}

.ml-form-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}

.ml-form-footer {
	margin-top: 20px;
	font-size: 0.9375rem;
	color: var(--ml-gray-600);
}

.ml-form-footer a {
	color: var(--ml-primary);
	text-decoration: none;
}

.ml-form-footer a:hover {
	text-decoration: underline;
}

/* ================================
   Auth screens (login / register)
   Two variants: .ml-auth-card (card layout) or .ml-auth-minimal (slim).
   PHP applies one of them on the wrapper.
   ================================ */
.ml-auth-screen {
	max-width: 460px;
	margin: 48px auto;
}

.ml-auth-screen .ml-form-actions {
	margin-top: 24px;
}

.ml-auth-screen .ml-form-actions .ml-btn-primary {
	width: 100%;
}

.ml-auth-screen .ml-form-footer {
	text-align: center;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--ml-gray-100);
}

/* Variant A: card */
.ml-auth-card {
	padding: 36px 32px 32px;
	background: #fff;
	border: 1px solid var(--ml-gray-200);
	border-top: 3px solid var(--ml-primary);
	border-radius: var(--ml-border-radius);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.04);
}

.ml-auth-card .ml-page-title {
	margin-bottom: 28px;
}

/* Variant B: minimal */
.ml-auth-minimal {
	padding: 24px 16px;
}

.ml-auth-minimal .ml-page-title {
	margin-bottom: 28px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--ml-primary);
	display: inline-block;
}

@media (max-width: 540px) {
	.ml-auth-screen {
		margin: 16px auto;
	}
	.ml-auth-card {
		padding: 28px 20px 24px;
		border-radius: var(--ml-border-radius-sm);
	}
}

/* ================================
   Mypage Layout
   ================================ */
.ml-mypage-header {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 32px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--ml-gray-200);
}

.ml-user-info {
	display: flex;
	align-items: center;
	gap: 16px;
}

.ml-user-details {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ml-user-details .ml-page-title {
	margin-bottom: 0;
}

.ml-avatar {
	border-radius: 50%;
	width: 64px !important;
	height: 64px !important;
	object-fit: cover;
	flex-shrink: 0;
}

.ml-avatar-sm {
	border-radius: 50%;
	width: 24px !important;
	height: 24px !important;
	object-fit: cover;
	flex-shrink: 0;
}

.ml-role-badge {
	display: inline-block;
	font-size: 0.8125rem;
	font-weight: 600;
	padding: 2px 10px;
	border-radius: 12px;
	background: var(--ml-gray-100);
	color: var(--ml-gray-600);
}

.ml-section {
	margin-bottom: 40px;
}

.ml-section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
}

.ml-section-header h3 {
	margin: 0;
}

.ml-empty {
	color: var(--ml-gray-500);
	font-style: italic;
}

/* ================================
   Tables
   ================================ */
.ml-listing-table-wrap,
.ml-matching-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.ml-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.ml-table th {
	text-align: left;
	font-weight: 600;
	padding: 10px 12px;
	border-bottom: 2px solid var(--ml-gray-200);
	color: var(--ml-gray-600);
	white-space: nowrap;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.025em;
}

.ml-table td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--ml-gray-100);
	vertical-align: middle;
}

.ml-table td a {
	color: var(--ml-primary);
	text-decoration: none;
}

.ml-table td a:hover {
	text-decoration: underline;
}

.ml-actions {
	white-space: nowrap;
}

.ml-inline-form {
	display: inline-flex;
	gap: 6px;
	margin: 0;
	padding: 0;
}

/* ================================
   Status Badges
   ================================ */
.ml-status-badge {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 12px;
	text-transform: none;
}

.ml-status-draft {
	background: var(--ml-gray-100);
	color: var(--ml-gray-600);
}

.ml-status-publish {
	background: #ecfdf5;
	color: #065f46;
}

.ml-status-ml_closed {
	background: #fff7ed;
	color: #9a3412;
}

.ml-status-pending {
	background: #fffbeb;
	color: #92400e;
}

.ml-status-ml_pending_review,
.ml-status-pending-review {
	background: #fef9c3;
	color: #854d0e;
}

.ml-status-active {
	background: #ecfdf5;
	color: #065f46;
}

.ml-status-rejected {
	background: #fef2f2;
	color: #991b1b;
}

.ml-status-closed {
	background: #fef2f2;
	color: #991b1b;
}

.ml-status-completed {
	background: #dbeafe;
	color: #1e40af;
}

/* ================================
   Search Form
   ================================ */
.ml-search-form {
	background: var(--ml-gray-50);
	border: 1px solid var(--ml-gray-200);
	border-radius: var(--ml-border-radius);
	padding: 20px;
	margin-bottom: 24px;
	max-width: none;
}

.ml-search-filters {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

.ml-search-filters .ml-form-field {
	margin-bottom: 0;
}

.ml-range-inputs {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ml-range-inputs input {
	flex: 1;
	min-width: 0;
}

.ml-range-separator {
	color: var(--ml-gray-400);
	font-weight: 600;
}

.ml-number-with-unit {
	display: flex;
	align-items: center;
	gap: 6px;
}

.ml-number-with-unit input {
	flex: 1;
	min-width: 0;
}

.ml-number-unit {
	color: var(--ml-gray-600);
	white-space: nowrap;
	font-size: 0.9em;
}

.ml-search-actions {
	display: flex;
	gap: 12px;
	margin-top: 16px;
}

.ml-result-count {
	font-size: 0.9375rem;
	color: var(--ml-gray-600);
	margin-bottom: 16px;
	font-weight: 600;
}

/* ================================
   Listing Cards
   ================================ */
.ml-listing-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

.ml-listing-card {
	background: #fff;
	border: 1px solid var(--ml-gray-200);
	border-radius: var(--ml-border-radius);
	padding: 16px;
	transition: box-shadow 0.15s, border-color 0.15s;
}

.ml-listing-card:hover {
	box-shadow: var(--ml-shadow-md);
	border-color: var(--ml-gray-300);
}

.ml-card-link {
	text-decoration: none;
	color: inherit;
}

.ml-card-title {
	font-size: 1.0625rem;
	font-weight: 600;
	margin: 0 0 8px 0;
	color: var(--ml-gray-900);
}

.ml-card-link:hover .ml-card-title {
	color: var(--ml-primary);
}

.ml-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
}

.ml-category-badge {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 12px;
	background: #eff6ff;
	color: #1e40af;
}

.ml-card-price {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ml-gray-700);
}

.ml-card-location {
	font-size: 0.875rem;
	color: var(--ml-gray-500);
}

.ml-card-provider {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.875rem;
	color: var(--ml-gray-600);
}

/* ================================
   Listing Detail
   ================================ */
.ml-listing-detail {
	margin-bottom: 24px;
}

.ml-listing-title {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 0 12px 0;
	color: var(--ml-gray-900);
}

.ml-listing-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
}

.ml-listing-body {
	font-size: 1rem;
	line-height: 1.7;
	margin-bottom: 20px;
	color: var(--ml-gray-700);
}

.ml-listing-body p {
	margin: 0 0 12px 0;
}

.ml-listing-info-row {
	display: flex;
	gap: 8px;
	padding: 10px 0;
	border-bottom: 1px solid var(--ml-gray-100);
	font-size: 0.9375rem;
}

.ml-listing-info-row strong {
	color: var(--ml-gray-600);
	min-width: 60px;
}

.ml-provider-card {
	margin-top: 24px;
	padding: 16px;
	background: var(--ml-gray-50);
	border: 1px solid var(--ml-gray-200);
	border-radius: var(--ml-border-radius);
}

.ml-provider-info {
	display: flex;
	align-items: center;
	gap: 12px;
}

.ml-provider-info strong {
	font-size: 1rem;
	color: var(--ml-gray-800);
}

.ml-apply-section {
	margin-top: 24px;
	padding: 20px;
	background: var(--ml-gray-50);
	border: 1px solid var(--ml-gray-200);
	border-radius: var(--ml-border-radius);
}

.ml-apply-section h3 {
	margin: 0 0 16px 0;
}

.ml-apply-form {
	max-width: 100%;
}

.ml-back-link {
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid var(--ml-gray-200);
}

.ml-back-link a {
	color: var(--ml-primary);
	text-decoration: none;
	font-size: 0.9375rem;
}

.ml-back-link a:hover {
	text-decoration: underline;
}

/* ================================
   Pagination
   ================================ */
.ml-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 24px;
	justify-content: center;
}

.ml-page-link,
.ml-page-current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 8px 14px;
	font-size: 0.9375rem;
	border: 1px solid var(--ml-gray-300);
	border-radius: var(--ml-border-radius-sm);
	text-decoration: none;
}

.ml-page-link {
	color: var(--ml-gray-700);
	background: #fff;
}

.ml-page-link:hover {
	background: var(--ml-gray-100);
	color: var(--ml-gray-700);
}

.ml-page-current {
	background: var(--ml-primary);
	color: #fff;
	border-color: var(--ml-primary);
	font-weight: 600;
}

/* ================================
   Responsive: Tablet (768px+)
   ================================ */
@media (min-width: 768px) {
	.ml-wrapper {
		padding: 24px;
	}

	.ml-mypage-header {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.ml-search-filters {
		grid-template-columns: 1fr 1fr;
	}

	.ml-listing-cards {
		grid-template-columns: 1fr 1fr;
	}
}

/* ================================
   Responsive: Desktop (1024px+)
   ================================ */
@media (min-width: 1024px) {
	.ml-wrapper {
		padding: 32px 24px;
	}

	.ml-search-filters {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

/* ================================
   Tabs
   ================================ */
.ml-tabs {
	display: flex;
	gap: 0;
	border-bottom: 2px solid var(--ml-gray-200);
	margin-bottom: 24px;
}

.ml-tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 12px 16px;
	font-size: 14px;
	font-weight: 500;
	color: var(--ml-gray-500);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	white-space: nowrap;
	transition: color 0.2s, border-color 0.2s;
	min-height: 44px;
}

.ml-tab:hover {
	color: var(--ml-gray-700);
	text-decoration: none;
}

.ml-tab-active {
	color: var(--ml-primary);
	border-bottom-color: var(--ml-primary);
	font-weight: 600;
}

.ml-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 10px;
	background-color: var(--ml-danger);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

.ml-tab-content {
	min-height: 200px;
}

/* Mobile: convert horizontal-scroll tab bar into a 3-per-row pill grid
 * (segmented control style). Active tab gets a filled card background
 * instead of the underline used on desktop. */
@media (max-width: 767px) {
	.ml-tabs {
		flex-wrap: wrap;
		gap: 4px;
		padding: 4px;
		background: var(--ml-gray-50, #f5f5f5);
		border-bottom: none;
		border-radius: 8px;
		overflow-x: visible;
		margin-bottom: 16px;
	}

	.ml-tab {
		flex: 1 1 calc(33.333% - 4px);
		min-width: 0;
		justify-content: center;
		padding: 8px 6px;
		font-size: 12px;
		font-weight: 500;
		border-bottom: none;
		border-radius: 6px;
		margin-bottom: 0;
		min-height: 40px;
		gap: 4px;
		text-align: center;
		line-height: 1.2;
		white-space: normal;
	}

	.ml-tab:hover {
		background: rgba(0, 0, 0, 0.04);
	}

	.ml-tab-active,
	.ml-tab-active:hover {
		background: #fff;
		color: var(--ml-primary);
		border-bottom: none;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	}

	.ml-tab .ml-badge {
		min-width: 16px;
		height: 16px;
		font-size: 10px;
		padding: 0 4px;
	}
}

/* ================================
   Profile Tab
   ================================ */
.ml-profile-card {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	padding: 24px;
	background: var(--ml-gray-50);
	border-radius: var(--ml-border-radius);
	border: 1px solid var(--ml-gray-200);
}

.ml-avatar-lg {
	border-radius: 50%;
	width: 96px !important;
	height: 96px !important;
	object-fit: cover;
	flex-shrink: 0;
}

.ml-profile-details h3 {
	margin: 0 0 4px;
	font-size: 20px;
}

.ml-profile-role {
	color: var(--ml-primary);
	font-weight: 500;
	margin: 0 0 8px;
}

.ml-profile-email,
.ml-profile-registered {
	color: var(--ml-gray-500);
	font-size: 14px;
	margin: 0 0 4px;
}

/* ================================
   Filter Bar
   ================================ */
.ml-filter-bar {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.ml-filter-link {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	font-size: 13px;
	color: var(--ml-gray-600);
	background: var(--ml-gray-100);
	border-radius: 20px;
	text-decoration: none;
	transition: background 0.2s, color 0.2s;
	min-height: 36px;
}

.ml-filter-link:hover {
	background: var(--ml-gray-200);
	text-decoration: none;
}

.ml-filter-active {
	background: var(--ml-primary);
	color: #fff;
}

.ml-filter-active:hover {
	background: var(--ml-primary-hover);
	color: #fff;
}

/* ================================
   Matching Cards (List)
   ================================ */
.ml-matching-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* ================================
   Matching Card (取引管理 - S-20 redesign)
   Card is one visual unit:
   - Outer border + subtle shadow
   - Status color bar on the left (4px)
   - Internal rows are separated by light dividers, not by individual borders
   ================================ */
.ml-matching-card-wrap {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--ml-gray-200);
	border-radius: var(--ml-border-radius);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
	overflow: hidden;
	transition: box-shadow 0.2s, transform 0.2s;
}

/* Status color bar on the left edge */
.ml-matching-card-wrap::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: var(--ml-gray-300);
}

.ml-matching-card-wrap[data-status="pending"]::before { background: #f59e0b; }
.ml-matching-card-wrap[data-status="active"]::before { background: #10b981; }
.ml-matching-card-wrap[data-status="completed"]::before { background: #3b82f6; }
.ml-matching-card-wrap[data-status="rejected"]::before,
.ml-matching-card-wrap[data-status="closed"]::before { background: #ef4444; }

.ml-matching-card-wrap[data-href] {
	cursor: pointer;
}

.ml-matching-card-wrap[data-href]:hover {
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
	transform: translateY(-1px);
}

.ml-matching-unread {
	border-color: var(--ml-primary);
	box-shadow: 0 0 0 1px var(--ml-primary), 0 1px 2px rgba(15, 23, 42, 0.04);
}

.ml-matching-unread .ml-matching-card-row1 {
	background: color-mix(in srgb, var(--ml-primary) 6%, #ffffff);
}

/* Individual rows - bordered only between rows (not as standalone boxes) */
.ml-matching-card-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px 10px 20px;
	background: transparent;
	border: none;
	border-top: 1px solid var(--ml-gray-100);
}

.ml-matching-card-row1 {
	border-top: none;
	padding: 14px 16px 12px 20px;
}

/* Row 1: Listing name */
.ml-matching-listing-name {
	flex: 1;
	font-size: 15px;
	font-weight: 700;
	color: var(--ml-gray-800);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Row 2: User info */
.ml-matching-card-row2 {
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
}

.ml-matching-user-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: var(--ml-primary);
	font-size: 0.9rem;
	font-weight: 500;
}

.ml-matching-user-link:hover {
	text-decoration: underline;
	color: var(--ml-primary-hover);
}

.ml-matching-user-deleted {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--ml-gray-400);
	font-size: 0.9rem;
	font-style: italic;
}

.ml-matching-user-name {
	font-weight: 500;
}

.ml-matching-applied-date {
	font-size: 12px;
	color: var(--ml-gray-400);
	margin-left: auto;
	flex-shrink: 0;
}

/* Row 3: Status timeline + action buttons */
.ml-matching-card-row3 {
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 10px;
}

.ml-matching-card-row3-timeline {
	flex: 1;
	min-width: 0;
}

.ml-matching-card-row3-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

/* Reset wrapper-form margins inside row3 actions so all buttons share the same baseline */
.ml-matching-card-row3-actions .ml-inline-form {
	margin: 0;
}

/* Match action button height to timeline circle (32px) so buttons sit flush with the step circles */
.ml-matching-card-row3-actions .ml-btn-sm {
	min-height: 32px;
	padding: 4px 10px;
	line-height: 1.2;
}

/* Row 4: Reserved date */
.ml-matching-card-row4 {
	font-size: 13px;
	color: var(--ml-gray-600);
	gap: 6px;
}

.ml-reserved-label {
	color: var(--ml-gray-500);
}

.ml-reserved-value {
	font-weight: 500;
}

/* Completion info below rows */
.ml-matching-card-wrap .ml-completion-info {
	padding: 10px 16px 10px 20px;
	border: none;
	border-top: 1px solid var(--ml-gray-100);
	background: var(--ml-gray-50);
	border-radius: 0;
}

/* Keep seeker-pending-notice and message-suggest attached below */
.ml-matching-card-wrap .ml-seeker-pending-notice,
.ml-matching-card-wrap .ml-message-suggest {
	margin: 0;
	border: none;
	border-top: 1px solid var(--ml-gray-100);
	border-radius: 0;
	padding: 12px 16px 12px 20px;
}

/* ================================
   Message List (Mypage Tab)
   ================================ */
.ml-message-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ml-message-card {
	display: block;
	padding: 16px;
	background: #fff;
	border: 1px solid var(--ml-gray-200);
	border-radius: var(--ml-border-radius);
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.2s, border-color 0.2s;
}

.ml-message-card:hover {
	box-shadow: var(--ml-shadow-md);
	border-color: var(--ml-gray-300);
	text-decoration: none;
	color: inherit;
}

.ml-message-unread {
	border-left: 3px solid var(--ml-primary);
	background: #f0f5ff;
}

.ml-message-card-header {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ml-message-card-info {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}

.ml-message-card-name {
	font-weight: 600;
	font-size: 15px;
	color: var(--ml-gray-800);
}

.ml-message-card-listing {
	font-size: 13px;
	color: var(--ml-gray-500);
}

.ml-message-card-preview {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin-top: 8px;
}

/* ================================
   Message Thread Page
   ================================ */
.ml-message-wrapper {
	max-width: 700px;
}

.ml-message-header {
	padding-bottom: 16px;
	border-bottom: 1px solid var(--ml-gray-200);
	margin-bottom: 16px;
}

/* S-20: Thread navigation bar (above message header) */
.ml-thread-nav {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 0 10px;
	margin-bottom: 12px;
	border-bottom: 1px solid var(--ml-gray-100);
}

.ml-thread-nav-link {
	display: inline-flex;
	align-items: center;
	font-size: 13px;
	color: var(--ml-gray-500);
	text-decoration: none;
	white-space: nowrap;
	min-height: 32px;
}

.ml-thread-nav-link:hover {
	color: var(--ml-primary);
	text-decoration: none;
}

.ml-thread-nav-sep {
	color: var(--ml-gray-300);
	font-size: 12px;
	user-select: none;
}

/* Legacy single back button (kept for other uses) */
.ml-back-btn {
	display: inline-flex;
	align-items: center;
	color: var(--ml-gray-500);
	text-decoration: none;
	font-size: 14px;
	min-height: 44px;
	min-width: 44px;
}

.ml-back-btn:hover {
	color: var(--ml-primary);
	text-decoration: none;
}

.ml-message-thread-info {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ml-message-thread-user {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ml-message-thread-user-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: inherit;
}

.ml-message-thread-user-link:hover .ml-message-thread-name {
	color: var(--ml-primary);
	text-decoration: underline;
}

.ml-message-thread-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.ml-message-thread-name {
	font-weight: 600;
	font-size: 16px;
	color: var(--ml-gray-800);
}

.ml-message-thread-listing {
	font-size: 15px;
	color: var(--ml-gray-800);
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.ml-message-thread-listing-label {
	font-size: 12px;
	color: var(--ml-gray-500);
	font-weight: 500;
}

.ml-message-thread-listing-link,
.ml-message-thread-listing-name {
	font-weight: 600;
	color: var(--ml-gray-800);
	text-decoration: none;
}

.ml-message-thread-listing-link:hover {
	color: var(--ml-primary);
	text-decoration: underline;
}

.ml-message-thread-reserved {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--ml-gray-100);
	padding: 6px 10px;
	border-radius: var(--ml-border-radius-sm);
	align-self: flex-start;
	font-size: 13px;
}

.ml-message-thread-reserved-label {
	color: var(--ml-gray-500);
	font-weight: 500;
}

.ml-message-thread-reserved-value {
	color: var(--ml-gray-800);
	font-weight: 600;
}

.ml-message-thread {
	max-height: 500px;
	overflow-y: auto;
	padding: 16px 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ml-message-bubble {
	display: flex;
	max-width: 80%;
}

.ml-message-mine {
	align-self: flex-end;
}

.ml-message-theirs {
	align-self: flex-start;
}

.ml-message-bubble-content {
	padding: 10px 14px;
	border-radius: 16px;
	line-height: 1.5;
}

.ml-message-mine .ml-message-bubble-content {
	background-color: color-mix(in srgb, var(--ml-primary) 18%, #ffffff);
	color: var(--ml-gray-800);
	border: 1px solid color-mix(in srgb, var(--ml-primary) 28%, #ffffff);
	border-bottom-right-radius: 4px;
}

.ml-message-theirs .ml-message-bubble-content {
	background-color: var(--ml-gray-100);
	color: var(--ml-gray-800);
	border-bottom-left-radius: 4px;
}

.ml-message-text {
	margin: 0;
	font-size: 15px;
	word-break: break-word;
}

.ml-message-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 4px;
}

.ml-message-time {
	font-size: 11px;
	opacity: 0.7;
}

.ml-mark-unread-btn {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 11px;
	padding: 2px 6px;
	border-radius: var(--ml-border-radius-sm);
	color: var(--ml-gray-500);
	transition: background 0.2s, color 0.2s;
	min-height: 28px;
}

.ml-mark-unread-btn:hover {
	background: var(--ml-gray-200);
	color: var(--ml-gray-700);
}

.ml-message-mine .ml-mark-unread-btn {
	color: var(--ml-gray-500);
}

.ml-message-mine .ml-mark-unread-btn:hover {
	background: color-mix(in srgb, var(--ml-primary) 12%, #ffffff);
	color: var(--ml-gray-700);
}

.ml-mark-unread-btn:disabled {
	opacity: 0.5;
	cursor: default;
}

/* Unread marker */
.ml-message-unread-marker .ml-message-bubble-content {
	position: relative;
}

.ml-message-theirs.ml-message-unread-marker .ml-message-bubble-content {
	background-color: #e8f0fe;
	border: 1px solid var(--ml-primary);
}

/* Message Form */
.ml-message-form-wrap {
	padding-top: 16px;
	border-top: 1px solid var(--ml-gray-200);
}

.ml-message-input-group {
	display: flex;
	gap: 8px;
	align-items: flex-end;
}

.ml-message-input-group textarea {
	flex: 1;
	resize: none;
	padding: 10px 14px;
	border: 1px solid var(--ml-gray-300);
	border-radius: var(--ml-border-radius);
	font-size: 15px;
	font-family: var(--ml-font-family);
	line-height: 1.5;
	min-height: 44px;
}

.ml-message-input-group textarea:focus {
	outline: none;
	border-color: var(--ml-primary);
	box-shadow: 0 0 0 3px rgba(214, 82, 106, 0.1);
}

.ml-send-btn {
	min-height: 44px;
	min-width: 80px;
	white-space: nowrap;
}

.ml-send-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Message Notice */
.ml-message-notice {
	padding: 16px;
	background: var(--ml-gray-50);
	border: 1px solid var(--ml-gray-200);
	border-radius: var(--ml-border-radius);
	text-align: center;
	margin-top: 16px;
}

.ml-message-notice p {
	margin: 0;
	color: var(--ml-gray-500);
	font-size: 14px;
}

/* ================================
   Responsive: Tablet (768px+) - Message
   ================================ */
@media (min-width: 768px) {
	.ml-tab {
		padding: 12px 20px;
		font-size: 15px;
	}

	.ml-profile-card {
		gap: 24px;
	}
}

/* ================================
   Favorite Button
   ================================ */
.ml-favorite-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: none;
	border: 1px solid var(--ml-gray-200);
	border-radius: 20px;
	padding: 4px 10px;
	cursor: pointer;
	font-size: 0.875rem;
	color: var(--ml-gray-500);
	transition: color 0.2s, border-color 0.2s, background 0.2s;
	min-height: 36px;
	font-family: var(--ml-font-family);
	line-height: 1;
}

.ml-favorite-btn:hover {
	border-color: #ef4444;
	color: #ef4444;
	background: none;
}

.ml-favorite-btn.ml-favorite-active {
	color: #ef4444;
	border-color: #fecaca;
	background: #fef2f2;
}

.ml-favorite-icon {
	font-size: 1.125rem;
	line-height: 1;
}

.ml-favorite-icon-filled {
	color: #ef4444;
}

.ml-favorite-icon-empty {
	color: var(--ml-gray-400);
}

.ml-favorite-btn:hover .ml-favorite-icon-empty {
	color: #ef4444;
}

.ml-favorite-count {
	font-size: 0.8125rem;
	font-weight: 600;
}

.ml-favorite-btn-large {
	padding: 8px 16px;
	font-size: 0.9375rem;
	min-height: 44px;
	gap: 6px;
}

.ml-favorite-btn-large .ml-favorite-icon {
	font-size: 1.25rem;
}

.ml-favorite-section {
	margin-top: 16px;
	padding: 12px 0;
	border-top: 1px solid var(--ml-gray-100);
}

.ml-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 8px;
	gap: 8px;
}

/* ================================
   Reviews
   ================================ */
.ml-reviews-section {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--ml-gray-200);
}

.ml-reviews-title {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
}

.ml-reviews-summary {
	font-size: 0.9375rem;
	font-weight: 400;
	color: var(--ml-gray-600);
}

.ml-review-form-wrap {
	background: var(--ml-gray-50);
	border: 1px solid var(--ml-gray-200);
	border-radius: var(--ml-border-radius);
	padding: 20px;
	margin-bottom: 24px;
}

.ml-review-form-wrap h4 {
	margin: 0 0 16px 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--ml-gray-800);
}

.ml-review-form {
	max-width: 100%;
}

.ml-star-rating {
	display: flex;
	gap: 4px;
	direction: ltr;
}

.ml-star-label {
	cursor: pointer;
	font-size: 1.5rem;
	line-height: 1;
	padding: 4px;
}

.ml-star-label input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.ml-star {
	color: var(--ml-gray-300);
	transition: color 0.15s;
}

.ml-star-active,
.ml-star.ml-star-active {
	color: #f59e0b;
}

.ml-star-hover,
.ml-star.ml-star-hover {
	color: #fbbf24;
}

.ml-review-message {
	margin-top: 12px;
}

.ml-review-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ml-review-item {
	padding: 16px;
	background: #fff;
	border: 1px solid var(--ml-gray-200);
	border-radius: var(--ml-border-radius);
}

.ml-review-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
	flex-wrap: wrap;
}

.ml-review-user {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ml-review-username {
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--ml-gray-800);
}

.ml-review-meta {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ml-review-stars {
	color: #f59e0b;
	font-size: 0.9375rem;
}

.ml-review-date {
	font-size: 0.8125rem;
	color: var(--ml-gray-400);
}

.ml-review-comment {
	font-size: 0.9375rem;
	color: var(--ml-gray-700);
	line-height: 1.6;
	margin: 0;
}

.ml-provider-rating {
	display: block;
	font-size: 0.8125rem;
	color: #f59e0b;
	font-weight: 400;
	margin-top: 2px;
}

/* ================================
   Reports
   ================================ */
.ml-report-section {
	margin-top: 16px;
	padding-top: 12px;
	border-top: 1px solid var(--ml-gray-100);
}

.ml-btn-report {
	background: none;
	color: var(--ml-gray-500);
	border: 1px solid var(--ml-gray-300);
}

.ml-btn-report:hover {
	color: var(--ml-danger);
	border-color: var(--ml-danger);
	background: #fef2f2;
}

.ml-report-already {
	font-size: 0.875rem;
	color: var(--ml-gray-500);
	font-style: italic;
	margin: 0;
}

.ml-report-message {
	margin-top: 12px;
}

/* F-167: Message report button (compact inline) */
.ml-message-report-btn {
	background: none;
	border: none;
	color: var(--ml-gray-400);
	font-size: 0.75rem;
	padding: 2px 6px;
	cursor: pointer;
	white-space: nowrap;
	line-height: 1;
}

.ml-message-report-btn:hover {
	color: var(--ml-danger);
}

/* ================================
   F-166: Login Required Notice
   ================================ */
.ml-login-required-notice {
	max-width: 480px;
	margin: 48px auto;
	padding: 32px 24px;
	text-align: center;
	background: var(--ml-gray-50);
	border: 1px solid var(--ml-gray-200);
	border-radius: var(--ml-border-radius);
}

.ml-login-required-text {
	font-size: 1.05rem;
	font-weight: 500;
	margin: 0 0 20px;
	color: var(--ml-gray-700);
}

.ml-login-required-actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}

/* F-169/F-170: Report target preview */
.ml-report-target-preview {
	margin-top: 4px;
	font-size: 0.8125rem;
	color: #6b7280;
	line-height: 1.4;
	word-break: break-all;
}

/* ================================
   Modal
   ================================ */
.ml-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.ml-modal {
	background: #fff;
	border-radius: var(--ml-border-radius);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
	max-width: 480px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
}

/* S-54: Wide modal for the calendar settings dialog. */
.ml-modal.ml-modal-large {
	max-width: 920px;
}

.ml-modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 20px;
	border-bottom: 1px solid var(--ml-gray-200);
}

.ml-modal-header h3 {
	margin: 0;
	font-size: 1.125rem;
}

.ml-modal-close {
	background: none;
	border: none;
	font-size: 1.5rem;
	cursor: pointer;
	color: var(--ml-gray-400);
	min-width: 44px;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	padding: 0;
	border-radius: var(--ml-border-radius-sm);
	transition: background 0.15s, color 0.15s;
}

.ml-modal-close:hover {
	background: var(--ml-gray-100);
	color: var(--ml-gray-700);
}

.ml-modal-body {
	padding: 20px;
}

.ml-modal-body .ml-form {
	max-width: 100%;
}

/* Modal button defensive styles.
 *
 * Some themes (Astra in particular) ship aggressive `button { color:#fff;
 * background-color: var(--ast-global-color-0); padding:15px 30px }` rules.
 * Our `.ml-btn-primary` class wins on specificity for color/background,
 * but Astra's tag-level padding keeps applying because we never set padding
 * with enough specificity here. The result is that the submit button can
 * end up either invisible (background gets washed to a theme color that
 * happens to match the modal background) or visually broken.
 *
 * These rules raise specificity to (0,2,0) so they reliably win over Astra's
 * tag-level button styling, and re-declare padding/color with hardcoded
 * fallbacks so the submit button stays visible regardless of CSS-variable
 * scope or theme overrides. */
.ml-modal-overlay .ml-btn,
.ml-modal .ml-btn {
	padding: 6px 12px;
	border-radius: var(--ml-border-radius-sm, 4px);
	box-shadow: none;
	font-weight: 600;
	line-height: 1.4;
	text-shadow: none;
}

.ml-modal-overlay .ml-btn-primary,
.ml-modal .ml-btn-primary {
	background-color: var(--ml-primary, #d6526a);
	color: #ffffff;
	border: 1px solid var(--ml-primary, #d6526a);
}

.ml-modal-overlay .ml-btn-primary:hover,
.ml-modal-overlay .ml-btn-primary:focus,
.ml-modal .ml-btn-primary:hover,
.ml-modal .ml-btn-primary:focus {
	background-color: var(--ml-primary-hover, #d6526a);
	color: #ffffff;
	border-color: var(--ml-primary-hover, #d6526a);
}

.ml-modal-overlay .ml-btn-secondary,
.ml-modal .ml-btn-secondary {
	background-color: var(--ml-gray-100, #f3f4f6);
	color: var(--ml-gray-700, #374151);
	border: 1px solid var(--ml-gray-300, #d1d5db);
}

.ml-modal-overlay .ml-btn-secondary:hover,
.ml-modal-overlay .ml-btn-secondary:focus,
.ml-modal .ml-btn-secondary:hover,
.ml-modal .ml-btn-secondary:focus {
	background-color: var(--ml-gray-200, #e5e7eb);
	color: var(--ml-gray-700, #374151);
}

/* ================================
   Responsive: Mobile adjustments
   ================================ */
@media (max-width: 767px) {
	.ml-profile-card {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.ml-matching-card-header {
		flex-direction: column;
		gap: 8px;
	}

	.ml-matching-card-meta {
		align-self: flex-start;
	}

	.ml-message-bubble {
		max-width: 90%;
	}
}

/* ================================
   Profile Edit
   ================================ */
.ml-profile-form {
	max-width: 560px;
}

.ml-profile-image-preview {
	margin-bottom: 12px;
}

.ml-profile-image-preview img {
	display: block;
}

.ml-avatar-round {
	border-radius: 50%;
	object-fit: cover;
}

.ml-avatar-lg.ml-avatar-round {
	width: 96px !important;
	height: 96px !important;
}

.ml-field-description {
	font-size: 0.8125rem;
	color: var(--ml-gray-500);
	margin-top: 4px;
}

.ml-profile-bio {
	color: var(--ml-gray-600);
	font-size: 0.9375rem;
	margin: 8px 0;
}

.ml-profile-custom-fields {
	margin-top: 12px;
}

.ml-profile-cf-row {
	font-size: 0.9375rem;
	margin-bottom: 4px;
}

.ml-profile-cf-row strong {
	color: var(--ml-gray-700);
}

.ml-profile-cf-row span {
	color: var(--ml-gray-600);
	margin-left: 4px;
}

/* ================================
   Notifications
   ================================ */
.ml-notification-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ml-notification-item {
	display: flex;
	gap: 12px;
	padding: 12px 16px;
	background: #fff;
	border: 1px solid var(--ml-gray-200);
	border-radius: var(--ml-border-radius-sm);
	transition: background-color 0.15s;
}

.ml-notification-unread {
	background: #eff6ff;
	border-color: #bfdbfe;
}

.ml-notification-icon {
	font-size: 1.25rem;
	flex-shrink: 0;
	padding-top: 2px;
}

.ml-notification-content {
	flex: 1;
	min-width: 0;
}

.ml-notification-title {
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--ml-gray-800);
	margin-bottom: 4px;
}

.ml-notification-message {
	font-size: 0.875rem;
	color: var(--ml-gray-600);
	margin-bottom: 4px;
}

.ml-notification-date {
	font-size: 0.75rem;
	color: var(--ml-gray-400);
}

/* ================================
   Global overflow prevention
   ================================ */
.ml-wrapper {
	width: 100%;
	max-width: 900px;
	overflow-x: hidden;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.ml-wrapper img {
	max-width: 100%;
	height: auto;
}

.ml-wrapper table {
	max-width: 100%;
}

@media (max-width: 767px) {
	.ml-wrapper .ml-form {
		max-width: 100%;
	}

	.ml-wrapper .ml-listing-title {
		font-size: 1.25rem;
	}

	.ml-wrapper .ml-listing-info-row {
		flex-direction: column;
		gap: 2px;
	}

	.ml-wrapper .ml-table {
		font-size: 0.8125rem;
	}

	.ml-wrapper .ml-table th,
	.ml-wrapper .ml-table td {
		padding: 8px 6px;
	}

	.ml-wrapper .ml-section-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.ml-wrapper .ml-apply-section {
		padding: 12px;
	}

	.ml-wrapper .ml-provider-card {
		padding: 12px;
	}

	.ml-wrapper input[type="text"],
	.ml-wrapper input[type="email"],
	.ml-wrapper input[type="password"],
	.ml-wrapper input[type="number"],
	.ml-wrapper input[type="url"],
	.ml-wrapper input[type="tel"],
	.ml-wrapper select,
	.ml-wrapper textarea {
		max-width: 100%;
		font-size: 16px;
	}

	.ml-wrapper .ml-btn {
		max-width: 100%;
		white-space: normal;
		word-wrap: break-word;
	}
}

/* ================================
   S-06: Gallery (F-024)
   ================================ */
.ml-gallery-upload {
	border: 2px dashed var(--ml-gray-300);
	border-radius: var(--ml-border-radius);
	padding: 16px;
	background: var(--ml-gray-50);
}

.ml-gallery-previews {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
}

.ml-gallery-thumb {
	position: relative;
	width: 80px;
	height: 80px;
	border-radius: var(--ml-border-radius-sm);
	overflow: hidden;
	border: 1px solid var(--ml-gray-200);
}

.ml-gallery-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ml-gallery-remove {
	position: absolute;
	top: 2px;
	right: 2px;
	width: 24px;
	height: 24px;
	background: rgba(220, 38, 38, 0.9);
	color: #fff;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.ml-gallery-remove:hover {
	background: var(--ml-danger);
}

/* Gallery detail view */
.ml-gallery {
	margin-bottom: 20px;
}

.ml-gallery-main {
	margin-bottom: 8px;
	border-radius: var(--ml-border-radius);
	overflow: hidden;
	background: var(--ml-gray-100);
}

.ml-gallery-main-img {
	width: 100%;
	max-height: 480px;
	object-fit: contain;
	display: block;
	margin: 0 auto;
}

.ml-gallery-thumbs {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.ml-gallery-thumb-btn {
	width: 64px;
	height: 64px;
	border: 2px solid var(--ml-gray-200);
	border-radius: var(--ml-border-radius-sm);
	overflow: hidden;
	cursor: pointer;
	padding: 0;
	background: none;
	transition: border-color 0.2s;
}

.ml-gallery-thumb-btn:hover,
.ml-gallery-thumb-btn.ml-gallery-thumb-active {
	border-color: var(--ml-primary);
}

.ml-gallery-thumb-btn img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Card thumbnail */
.ml-card-thumb-link {
	display: block;
}

.ml-card-thumbnail {
	width: 100%;
	height: 160px;
	object-fit: cover;
	border-radius: var(--ml-border-radius) var(--ml-border-radius) 0 0;
	display: block;
}

/* ================================
   S-06: Calendar (F-025)
   ================================ */
.ml-calendar-edit,
.ml-calendar-view {
	margin-bottom: 16px;
}

.ml-calendar-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
	max-width: 350px;
}

/* Editor (provider listing form) uses wider grid (400px). */
.ml-calendar-month-view .ml-calendar-nav {
	max-width: 400px;
}

.ml-calendar-month-label {
	font-weight: 600;
	font-size: 16px;
	min-width: 80px;
	text-align: center;
}

.ml-calendar-grid,
.ml-calendar-detail-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
	max-width: 350px;
}

.ml-cal-header {
	text-align: center;
	font-weight: 600;
	font-size: 12px;
	padding: 4px 0;
	color: var(--ml-gray-500);
}

.ml-cal-cell {
	text-align: center;
	padding: 8px 4px;
	font-size: 14px;
	border-radius: var(--ml-border-radius-sm);
	min-height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ml-cal-day {
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}

.ml-cal-day:hover {
	background: var(--ml-gray-100);
}

.ml-cal-past {
	color: var(--ml-gray-300);
	cursor: default;
}

.ml-cal-past:hover {
	background: transparent;
}

.ml-cal-available {
	background: #dcfce7;
	color: var(--ml-success);
	font-weight: 600;
}

.ml-cal-available:hover {
	background: #bbf7d0;
}

.ml-cal-disabled {
	color: var(--ml-gray-300);
	cursor: default;
	background: var(--ml-gray-50);
}

.ml-cal-disabled:hover {
	background: var(--ml-gray-50);
}

.ml-cal-selected {
	background: var(--ml-primary) !important;
	color: #fff !important;
}

.ml-calendar-hint {
	font-size: 13px;
	color: var(--ml-gray-500);
	margin-top: 4px;
}

.ml-selected-date-display {
	display: inline-block;
	padding: 6px 12px;
	background: var(--ml-gray-100);
	border-radius: var(--ml-border-radius-sm);
	font-size: 14px;
	color: var(--ml-gray-500);
}

.ml-selected-date-display.ml-date-chosen {
	background: #dcfce7;
	color: var(--ml-success);
	font-weight: 600;
}

/* Reserved date in matching card */
.ml-matching-reserved-date {
	padding: 4px 12px;
	font-size: 13px;
	color: var(--ml-gray-600);
	background: var(--ml-gray-50);
	border-top: 1px solid var(--ml-gray-200);
}

/* ================================
   S-46: Calendar Viewer (Seeker detail)
   ================================ */
.ml-calendar-viewer {
	margin-bottom: 16px;
}

.ml-viewer-slots-container {
	margin-top: 12px;
	padding: 12px;
	background: var(--ml-gray-50);
	border-radius: var(--ml-border-radius-sm);
}

.ml-viewer-slots-heading {
	font-size: 15px;
	font-weight: 600;
	margin: 0 0 10px 0;
}

.ml-viewer-slot-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ml-viewer-slot-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	background: #fff;
	border: 1px solid var(--ml-gray-200);
	border-radius: var(--ml-border-radius-sm);
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s;
}

.ml-viewer-slot-item:hover {
	border-color: var(--ml-primary);
	background: #f0f7ff;
}

.ml-viewer-slot-item.ml-viewer-slot-full {
	opacity: 0.5;
	cursor: not-allowed;
	background: var(--ml-gray-100);
}

.ml-viewer-slot-item.ml-viewer-slot-full:hover {
	border-color: var(--ml-gray-200);
	background: var(--ml-gray-100);
}

.ml-viewer-slot-radio {
	margin: 0;
	min-width: 18px;
}

.ml-viewer-slot-time {
	flex: 1;
	font-weight: 500;
	font-size: 14px;
}

.ml-viewer-slot-badge {
	font-size: 12px;
	padding: 2px 8px;
	border-radius: 10px;
	background: #dcfce7;
	color: var(--ml-success);
	font-weight: 600;
}

.ml-viewer-slot-badge.ml-badge-full {
	background: #fecaca;
	color: #b91c1c;
}

.ml-viewer-slot-badge.ml-badge-low {
	background: #fef9c3;
	color: #a16207;
}

/* Calendar Editor on front-end (provider form) */
.ml-calendar-editor {
	margin-top: 8px;
}

.ml-calendar-config-panel {
	background: var(--ml-gray-50);
	border: 1px solid var(--ml-gray-200);
	padding: 16px;
	margin-bottom: 16px;
	border-radius: var(--ml-border-radius-sm);
}

.ml-calendar-config-panel h3 {
	margin: 0 0 12px 0;
	font-size: 16px;
}

/* F-164: 2-column grid for paired config fields */
.ml-cal-config-pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 10px;
}

@media (max-width: 600px) {
	.ml-cal-config-pair {
		grid-template-columns: 1fr;
	}
}

.ml-cal-config-row {
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.ml-cal-config-pair .ml-cal-config-row {
	margin-bottom: 0;
}

.ml-cal-config-row label {
	min-width: 80px;
	font-weight: 500;
	font-size: 14px;
}

/* F-164: Time picker (hour + min select) */
.ml-cal-time-picker {
	display: flex;
	align-items: center;
	gap: 4px;
}

.ml-cal-time-picker select {
	min-width: 60px;
	padding: 4px 6px;
	font-size: 14px;
	border: 1px solid var(--ml-gray-300, #d1d5db);
	border-radius: 4px;
}

.ml-cal-time-sep {
	font-weight: 600;
	font-size: 16px;
	color: var(--ml-gray-500, #6b7280);
}

.ml-cal-weekday-checks {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.ml-cal-weekday-label {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: 13px;
	cursor: pointer;
}

.ml-cal-config-status {
	margin-left: 10px;
	font-size: 13px;
}

.ml-cal-config-status.ml-success {
	color: var(--ml-success);
}

.ml-cal-config-status.ml-error {
	color: var(--ml-danger);
}

/* Month View in editor (front-end) */
.ml-calendar-month-view {
	margin-bottom: 16px;
}

.ml-calendar-month-view h3 {
	font-size: 16px;
	margin: 0 0 10px 0;
}

.ml-calendar-editor-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
	max-width: 400px;
	margin-bottom: 8px;
}

.ml-calendar-editor-grid .ml-cal-cell {
	text-align: center;
	padding: 6px 2px;
	font-size: 12px;
	border-radius: var(--ml-border-radius-sm);
	min-height: 44px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border: 1px solid var(--ml-gray-200);
}

.ml-calendar-editor-grid .ml-cal-cell:hover {
	border-color: var(--ml-primary);
}

.ml-calendar-editor-grid .ml-cal-cell.ml-cal-empty {
	cursor: default;
	border-color: transparent;
}

.ml-calendar-editor-grid .ml-cal-day-num {
	font-weight: 600;
	font-size: 13px;
}

.ml-calendar-editor-grid .ml-cal-day-info {
	font-size: 10px;
	margin-top: 1px;
}

.ml-calendar-editor-grid .ml-cal-status-available,
.ml-calendar-editor-grid .ml-cal-day-cell.ml-cal-day-available { background: #dcfce7; }
.ml-calendar-editor-grid .ml-cal-status-low,
.ml-calendar-editor-grid .ml-cal-day-cell.ml-cal-day-low { background: #fef9c3; }
.ml-calendar-editor-grid .ml-cal-status-full,
.ml-calendar-editor-grid .ml-cal-day-cell.ml-cal-day-full { background: #fecaca; }
.ml-calendar-editor-grid .ml-cal-status-closed,
.ml-calendar-editor-grid .ml-cal-day-cell.ml-cal-day-closed { background: var(--ml-gray-100); color: var(--ml-gray-400); }
.ml-calendar-editor-grid .ml-cal-status-noday { background: transparent; color: var(--ml-gray-300); cursor: default; }
.ml-calendar-editor-grid .ml-cal-day-cell.ml-cal-day-selected {
	outline: 2px solid var(--ml-primary);
	outline-offset: -2px;
}

/* S-54: Inline slot panel below the month grid (frontend modal). */
.ml-cal-slot-panel {
	margin-top: 16px;
	padding: 12px 16px;
	border: 1px solid var(--ml-gray-200);
	border-radius: var(--ml-border-radius);
	background: var(--ml-gray-50, #fafafa);
}
.ml-cal-slot-panel-header h4 {
	margin: 0 0 8px 0;
	font-size: 14px;
}
.ml-cal-slot-panel-hint {
	color: var(--ml-gray-500, #777);
	font-size: 13px;
	margin: 0;
}
.ml-cal-slot-panel-body .ml-cal-slot-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px 0;
	border-bottom: 1px dashed var(--ml-gray-200);
	font-size: 13px;
	flex-wrap: wrap;
}
.ml-cal-slot-panel-body .ml-cal-slot-row:last-child {
	border-bottom: none;
}
.ml-cal-slot-panel-body .ml-cal-slot-time {
	min-width: 110px;
	font-weight: 600;
}
.ml-cal-slot-panel-body .ml-cal-slot-cap {
	width: 60px;
}
.ml-cal-slot-panel-actions {
	margin-top: 12px;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.ml-cal-legend {
	display: flex;
	gap: 12px;
	font-size: 11px;
	color: var(--ml-gray-500);
	flex-wrap: wrap;
}

.ml-cal-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.ml-cal-legend-item::before {
	content: '';
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 2px;
}

.ml-cal-legend-available::before { background: #dcfce7; }
.ml-cal-legend-low::before { background: #fef9c3; }
.ml-cal-legend-full::before { background: #fecaca; }
.ml-cal-legend-closed::before { background: var(--ml-gray-100); }

/* Modal (shared editor) */
.ml-cal-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ml-cal-modal-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
}

.ml-cal-modal-content {
	position: relative;
	background: #fff;
	border-radius: 8px;
	padding: 20px;
	max-width: 500px;
	width: 90%;
	max-height: 80vh;
	overflow-y: auto;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.ml-cal-modal-content h4 {
	margin: 0 0 12px 0;
}

.ml-cal-slot-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px solid var(--ml-gray-100);
	flex-wrap: wrap;
}

.ml-cal-slot-time {
	min-width: 90px;
	font-weight: 500;
	font-size: 13px;
}

.ml-cal-slot-capacity {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
}

.ml-cal-slot-capacity input {
	width: 50px;
	padding: 3px 5px;
	border: 1px solid var(--ml-gray-300);
	border-radius: 4px;
}

.ml-cal-slot-closed {
	font-size: 13px;
}

.ml-cal-modal-actions {
	margin-top: 12px;
	display: flex;
	gap: 8px;
}

.ml-loading {
	color: var(--ml-gray-500);
	font-style: italic;
}

.ml-reserved-label {
	font-weight: 600;
}

/* ================================
   S-06: Applied Status (F-022)
   ================================ */
.ml-applied-status .ml-status-badge {
	display: inline-block;
	margin-left: 4px;
}

/* ================================
   S-07: Completion Flow
   ================================ */
.ml-completion-info {
	background: var(--ml-gray-50);
	border: 1px solid var(--ml-gray-200);
	border-radius: var(--ml-border-radius-sm);
	padding: 12px 16px;
	margin-top: 8px;
}

.ml-matching-card-completion {
	border-top: 1px solid var(--ml-gray-200);
	border-radius: 0;
	margin-top: 0;
}

.ml-completion-date,
.ml-completion-deadline {
	font-size: 13px;
	color: var(--ml-gray-500);
	margin-bottom: 4px;
}

.ml-completion-remaining {
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	color: var(--ml-success);
	margin: 4px 0;
}

.ml-completion-urgent {
	color: var(--ml-danger);
	font-weight: 700;
}

.ml-completion-expired {
	display: inline-block;
	font-size: 13px;
	color: var(--ml-gray-400);
	margin: 4px 0;
}

.ml-completion-note {
	font-size: 13px;
	color: var(--ml-gray-500);
	margin: 4px 0 0;
}

.ml-completion-banner {
	margin-bottom: 16px;
}

.ml-btn-warning {
	background: #f59e0b;
	color: #fff;
	border: none;
}

.ml-btn-warning:hover {
	background: #d97706;
	color: #fff;
}

/* Spacing only when revert form sits below other text in the completion banner (thread view) */
.ml-completion-banner .ml-revert-form {
	margin-top: 8px;
}

.ml-complete-form {
	display: inline-block;
}

/* ================================
   F-031: Profile Edit Link
   ================================ */
.ml-profile-edit-link {
	display: inline-block;
	margin-left: 12px;
	color: var(--ml-primary);
	font-size: 0.875rem;
	text-decoration: none;
	white-space: nowrap;
}

.ml-profile-edit-link:hover {
	text-decoration: underline;
	color: var(--ml-primary-hover);
}

/* ================================
   F-032: Completion Banner Enhancement
   ================================ */
.ml-completion-status-text {
	margin: 0 0 4px;
	font-size: 1rem;
}

.ml-completion-rule {
	margin: 0 0 8px;
	font-size: 0.85rem;
	color: var(--ml-gray-600);
}

.ml-completion-provider-note {
	margin: 8px 0 0;
	font-size: 0.875rem;
	color: var(--ml-gray-700);
}

.ml-completion-deadline-date {
	font-size: 0.875rem;
	color: var(--ml-gray-600);
}

/* ================================
   F-033: Gallery Limit Styles
   ================================ */
.ml-gallery-description {
	font-size: 0.85rem;
	color: var(--ml-gray-600);
	margin-bottom: 8px;
}

.ml-gallery-limit-msg {
	margin-top: 8px;
	color: var(--ml-danger);
	font-size: 0.85rem;
}

.ml-btn-disabled,
#ml-gallery-add-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* ================================
   WordPress Media Modal – Frontend Fix
   フロントエンドでメディアモーダルのタブを常時表示する
   ================================ */
.media-modal .media-menu-item {
	color: #3c3c3c !important;
}

.media-modal .media-menu-item.active,
.media-modal .media-menu-item[aria-selected="true"] {
	color: #000 !important;
}

/* ================================
   F-035: User Menu (Avatar + Dropdown)
   ================================ */
.ml-user-menu {
	position: relative;
	display: inline-block;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	line-height: 1.5;
}

.ml-user-menu-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	text-decoration: none;
	border: none;
	background: none;
	padding: 0;
	border-radius: 50%;
}

.ml-user-menu-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	border: 2px solid #e0e0e0;
	transition: border-color 0.2s ease;
}

.ml-user-menu-trigger:hover .ml-user-menu-avatar,
.ml-user-menu-trigger:focus .ml-user-menu-avatar {
	border-color: #0073aa;
}

.ml-user-menu-dropdown {
	position: absolute;
	top: calc(100% + 4px);
	right: 0;
	min-width: 160px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 6px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
	z-index: 9999;
	padding: 4px 0;
}

/* PC hover open */
.ml-user-menu:hover .ml-user-menu-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* JS tap open (mobile) */
.ml-user-menu.ml-user-menu-open .ml-user-menu-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.ml-user-menu-item {
	display: block;
	padding: 10px 16px;
	color: #333;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease;
	min-height: 44px;
	box-sizing: border-box;
	line-height: 24px;
}

.ml-user-menu-item:hover,
.ml-user-menu-item:focus {
	background-color: #f5f5f5;
	color: #0073aa;
	text-decoration: none;
}

.ml-user-menu-item + .ml-user-menu-item {
	border-top: 1px solid #eee;
}

/* Guest login link (outlined, uses brand color from homepage settings) */
.ml-user-menu-login {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	color: var(--ml-primary, #d6526a);
	text-decoration: none;
	font-weight: 500;
	border: 1px solid var(--ml-primary, #d6526a);
	border-radius: 4px;
	transition: background-color 0.2s ease, color 0.2s ease, filter 0.2s ease;
	min-height: 44px;
	box-sizing: border-box;
}

.ml-user-menu-login:hover,
.ml-user-menu-login:focus {
	background-color: var(--ml-primary, #d6526a);
	color: #fff;
	text-decoration: none;
}

/* Guest register link (filled primary, complements outlined login) */
.ml-user-menu-register {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	color: #fff;
	background-color: var(--ml-primary, #d6526a);
	text-decoration: none;
	font-weight: 500;
	border: 1px solid var(--ml-primary, #d6526a);
	border-radius: 4px;
	transition: background-color 0.2s ease, border-color 0.2s ease, filter 0.2s ease;
	min-height: 44px;
	box-sizing: border-box;
}

.ml-user-menu-register:hover,
.ml-user-menu-register:focus {
	filter: brightness(0.9);
	color: #fff;
	text-decoration: none;
}

/* Mobile: ensure tap targets are large enough */
@media (max-width: 767px) {
	.ml-user-menu-item {
		padding: 12px 16px;
		font-size: 16px;
	}

	.ml-user-menu-login,
	.ml-user-menu-register {
		font-size: 16px;
	}
}

/* ================================
   S-12: Header Navigation (.ml-header-nav)
   ================================ */
.ml-header-nav {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	line-height: 1.5;
}

.ml-nav-text-link {
	display: inline-flex;
	align-items: center;
	color: #333;
	text-decoration: none;
	font-weight: 500;
	white-space: nowrap;
	min-height: 44px;
	padding: 4px 8px;
	border-radius: 4px;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.ml-nav-text-link:hover,
.ml-nav-text-link:focus {
	color: #0073aa;
	background-color: rgba(0, 115, 170, 0.06);
	text-decoration: none;
}

.ml-nav-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 44px;
	height: 44px;
	color: #555;
	text-decoration: none;
	border-radius: 50%;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.ml-nav-icon-btn:hover,
.ml-nav-icon-btn:focus {
	color: #0073aa;
	background-color: rgba(0, 115, 170, 0.08);
	text-decoration: none;
}

.ml-nav-icon-btn svg {
	display: block;
	pointer-events: none;
}

.ml-nav-badge {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	background-color: #dc3232;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	border-radius: 9px;
	pointer-events: none;
	box-sizing: border-box;
}

/* Keep avatar dropdown at the right end */
.ml-header-nav .ml-user-menu {
	margin-left: auto;
}

/* Login link inside header-nav for guests */
.ml-header-nav .ml-user-menu-login {
	margin-left: auto;
}

/* Mobile adjustments */
@media (max-width: 767px) {
	.ml-header-nav {
		gap: 4px;
	}

	.ml-nav-text-link {
		font-size: 13px;
		padding: 4px 4px;
	}

	.ml-nav-icon-btn {
		width: 40px;
		height: 40px;
	}

	.ml-nav-icon-btn svg {
		width: 20px;
		height: 20px;
	}
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
	.ml-header-nav {
		gap: 8px;
	}
}

/* ================================
   Profile Page (F-050)
   ================================ */
.ml-profile-page-wrapper {
	max-width: 800px;
	margin: 0 auto;
}

.ml-profile-page-header {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding: 24px;
	background: var(--ml-gray-50);
	border-radius: var(--ml-border-radius);
	margin-bottom: 32px;
}

.ml-profile-page-avatar {
	flex-shrink: 0;
}

.ml-profile-page-avatar img {
	border-radius: 50%;
	width: 96px;
	height: 96px;
	object-fit: cover;
}

.ml-profile-page-info {
	flex: 1;
	min-width: 0;
}

.ml-profile-page-name {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 0 8px;
	color: var(--ml-gray-900);
}

.ml-profile-page-bio {
	color: var(--ml-gray-600);
	line-height: 1.6;
	margin-bottom: 8px;
	white-space: pre-wrap;
	word-break: break-word;
}

.ml-profile-page-rating {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.95rem;
	color: var(--ml-warning);
}

.ml-profile-page-avg {
	font-weight: 600;
	color: var(--ml-gray-800);
}

.ml-profile-page-review-count {
	color: var(--ml-gray-500);
}

.ml-profile-page-section-title {
	font-size: 1.2rem;
	font-weight: 600;
	margin: 0 0 16px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--ml-gray-200);
	color: var(--ml-gray-800);
}

/* F-063: Profile page custom fields */
.ml-profile-page-custom-fields {
	margin-bottom: 40px;
}

.ml-profile-cf-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ml-profile-page-custom-fields .ml-profile-cf-row {
	display: flex;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid var(--ml-gray-100);
}

.ml-profile-cf-label {
	flex: 0 0 auto;
	min-width: 120px;
	color: var(--ml-gray-600);
	font-weight: 600;
}

.ml-profile-cf-value {
	color: var(--ml-gray-800);
	word-break: break-word;
}

@media (max-width: 767px) {
	.ml-profile-page-custom-fields .ml-profile-cf-row {
		flex-direction: column;
		gap: 4px;
	}

	.ml-profile-cf-label {
		min-width: auto;
	}
}

.ml-profile-page-listings {
	margin-bottom: 40px;
}

.ml-profile-page-reviews {
	margin-bottom: 40px;
}

.ml-profile-not-found {
	text-align: center;
	color: var(--ml-gray-500);
	padding: 40px 0;
}

.ml-profile-no-listings,
.ml-profile-no-reviews {
	text-align: center;
	color: var(--ml-gray-500);
	padding: 24px 0;
}

/* Provider profile link in listing detail */
.ml-provider-profile-link {
	color: var(--ml-primary);
	text-decoration: none;
	font-weight: 600;
}

.ml-provider-profile-link:hover {
	text-decoration: underline;
	color: var(--ml-primary-hover);
}

/* ================================
   S-14: Tooltip for header nav icons (F-051)
   ================================ */
.ml-nav-icon-btn {
	position: relative;
}

.ml-nav-icon-btn::after {
	content: attr(aria-label);
	position: absolute;
	bottom: -32px;
	left: 50%;
	transform: translateX(-50%);
	background-color: #1f2937;
	color: #fff;
	font-size: 12px;
	line-height: 1.4;
	white-space: nowrap;
	padding: 4px 8px;
	border-radius: 4px;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease, visibility 0.15s ease;
	z-index: 9999;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.ml-nav-icon-btn:hover::after {
	opacity: 1;
	visibility: visible;
}

/* Hide tooltip on touch devices */
@media (hover: none) {
	.ml-nav-icon-btn::after {
		display: none;
	}
}

/* ================================
   S-14: Auto-generated page title hide (F-054)
   ================================ */
body.matchlayer-auto-page .entry-title,
body.matchlayer-auto-page .page-title,
body.matchlayer-auto-page article > header .entry-title,
body.matchlayer-auto-page .wp-block-post-title,
body.matchlayer-auto-page h1.entry-title,
body.matchlayer-auto-page h1.page-title {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Mobile adjustments for profile page */
@media (max-width: 767px) {
	.ml-profile-page-header {
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 20px 16px;
	}

	.ml-profile-page-name {
		font-size: 1.25rem;
	}

	.ml-profile-page-rating {
		justify-content: center;
	}
}

/* ================================
   S-15: Notification & Review UX (F-056〜F-061)
   ================================ */

/* F-058: Notification link reset */
a.ml-notification-item.ml-notification-link {
	color: inherit;
	text-decoration: none;
	display: flex;
	cursor: pointer;
	transition: background 0.15s;
}

a.ml-notification-item.ml-notification-link:hover {
	background: var(--ml-gray-50, #f9fafb);
}

/* F-059: Pending notice */
.ml-pending-notice {
	margin-top: 8px;
	color: var(--ml-gray-600, #4b5563);
	font-size: 0.875rem;
	line-height: 1.5;
}

/* F-060: Message suggest banner */
.ml-message-suggest {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	margin-bottom: 8px;
	font-size: 0.875rem;
}

.ml-message-suggest .ml-btn {
	white-space: nowrap;
}

/* F-061: Review modal footer */
.ml-modal-footer {
	padding: 12px 20px 16px;
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}

/* F-061: Review warning text */
.ml-review-warning {
	color: #d97706;
	font-size: 0.875rem;
	font-weight: 500;
	margin-bottom: 16px;
	padding: 10px 12px;
	background: #fffbeb;
	border: 1px solid #fde68a;
	border-radius: var(--ml-border-radius-sm, 4px);
}

/* F-061: Modal star rating */
#ml-review-modal-overlay .ml-star-rating {
	margin-bottom: 16px;
}

#ml-review-modal-overlay textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--ml-gray-300, #d1d5db);
	border-radius: var(--ml-border-radius-sm, 4px);
	font-size: 0.9375rem;
	resize: vertical;
	font-family: inherit;
}

#ml-review-modal-overlay textarea:focus {
	outline: none;
	border-color: var(--ml-primary, #d6526a);
	box-shadow: 0 0 0 2px rgba(214, 82, 106, 0.15);
}

/* F-059: Seeker pending notice in matching card */
.ml-seeker-pending-notice {
	font-size: 0.875rem;
	padding: 10px 16px;
	margin-top: 4px;
}

/* F-061: Review button in matching card */
.ml-completion-info .ml-review-btn {
	margin-top: 8px;
}

/* =============================================
   F-065: Status Timeline
   ============================================= */
.ml-status-timeline {
	display: flex;
	align-items: center;
	padding: 12px 0 8px;
	overflow-x: auto;
	gap: 0;
}

.ml-timeline-step {
	flex: 0 0 auto;
	text-align: center;
	min-width: 56px;
}

.ml-step-circle {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 4px;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1;
	transition: background-color 0.2s, color 0.2s;
}

.ml-step-label {
	font-size: 0.6875rem;
	color: var(--ml-gray-500, #6b7280);
	line-height: 1.2;
	white-space: nowrap;
}

.ml-timeline-connector {
	flex: 1 1 auto;
	height: 2px;
	min-width: 16px;
	background: var(--ml-gray-200, #e5e7eb);
	margin-bottom: 20px;
}

.ml-connector-done {
	background: #22c55e;
}

/* Step states */
.ml-step-done .ml-step-circle {
	background: #22c55e;
	color: #fff;
}

.ml-step-current .ml-step-circle {
	background: var(--ml-primary, #d6526a);
	color: #fff;
	box-shadow: 0 0 0 3px rgba(214, 82, 106, 0.2);
}

.ml-step-upcoming .ml-step-circle {
	background: var(--ml-gray-200, #e5e7eb);
	color: var(--ml-gray-400, #9ca3af);
}

.ml-step-rejected .ml-step-circle {
	background: #ef4444;
	color: #fff;
}

/* Timeline inside matching card row (S-20 redesign) */
.ml-matching-card-row3-timeline .ml-status-timeline {
	padding: 0;
}

/* Timeline inside message thread header */
.ml-message-thread-info .ml-status-timeline {
	padding: 8px 0 0;
}

/* =============================================
   F-066: Listing Delete Protection
   ============================================= */
.ml-btn-disabled {
	background: #e5e7eb;
	color: #9ca3af;
	cursor: not-allowed;
	pointer-events: none;
}

.ml-listing-protect-note {
	font-size: 0.75rem;
	color: var(--ml-gray-500, #6b7280);
	margin-left: 4px;
}

/* =============================================
   F-067: Toast Notification
   ============================================= */
.ml-toast {
	position: fixed;
	top: 20px;
	left: 50%;
	transform: translateX(-50%) translateY(-20px);
	z-index: 99999;
	min-width: 280px;
	max-width: 480px;
	padding: 14px 20px;
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
	display: flex;
	align-items: center;
	gap: 10px;
	opacity: 0;
	transition: opacity 0.3s ease, transform 0.3s ease;
	pointer-events: none;
}

.ml-toast.ml-toast-show {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
	pointer-events: auto;
}

.ml-toast-success {
	background: #065f46;
	color: #fff;
}

.ml-toast-error {
	background: #991b1b;
	color: #fff;
}

.ml-toast-message {
	flex: 1;
	font-size: 0.9375rem;
}

.ml-toast-close {
	background: transparent;
	border: none;
	color: inherit;
	opacity: 0.8;
	cursor: pointer;
	font-size: 1.2rem;
	line-height: 1;
	padding: 0;
	min-width: 24px;
	min-height: 24px;
}

.ml-toast-close:hover {
	opacity: 1;
}

/* Responsive: ensure timeline doesn't overflow on small screens */
@media (max-width: 480px) {
	.ml-status-timeline {
		padding: 8px 4px;
	}
	.ml-timeline-step {
		min-width: 48px;
	}
	.ml-step-circle {
		width: 28px;
		height: 28px;
		font-size: 0.75rem;
	}
	.ml-timeline-connector {
		min-width: 10px;
		margin-bottom: 18px;
	}
	.ml-toast {
		min-width: auto;
		max-width: calc(100vw - 32px);
		left: 16px;
		right: 16px;
		transform: translateY(-20px);
	}
	.ml-toast.ml-toast-show {
		transform: translateY(0);
	}
}

/* ================================
   S-19: Profile avatar fix
   ================================ */
.ml-profile-avatar {
	align-self: flex-start;
	flex-shrink: 0;
}

/* ================================
   S-19: System messages
   ================================ */
.ml-message-system {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 12px 0;
	padding: 6px 16px;
	font-size: 0.8125rem;
	color: var(--ml-gray-500);
	text-align: center;
}
.ml-system-icon {
	font-size: 0.875rem;
	flex-shrink: 0;
}
.ml-system-text {
	color: var(--ml-gray-600);
	font-weight: 500;
}
.ml-system-time {
	font-size: 0.75rem;
	color: var(--ml-gray-400);
	white-space: nowrap;
}
.ml-message-system::before,
.ml-message-system::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--ml-gray-200);
}

/* F-088: Form section separators for profile edit */
.ml-form-section {
	margin-bottom: 32px;
	padding-top: 16px;
	border-top: 1px solid var(--ml-gray-200);
}
.ml-form-section-title {
	font-size: 1rem;
	font-weight: 600;
	margin-bottom: 4px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.ml-badge-private {
	font-size: 0.75rem;
	font-weight: 500;
	background: var(--ml-gray-100);
	color: var(--ml-gray-600);
	padding: 2px 8px;
	border-radius: 12px;
}
.ml-badge-public {
	font-size: 0.75rem;
	font-weight: 500;
	background: #dbeafe;
	color: #1e40af;
	padding: 2px 8px;
	border-radius: 12px;
}
.ml-form-section-desc {
	font-size: 0.875rem;
	color: var(--ml-gray-500);
	margin-bottom: 16px;
}

/* S-30: 複数都道府県選択モーダル */
.ml-pref-modal-inner {
	max-width: 640px;
	width: 100%;
}

.ml-pref-bulk-actions {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
}

.ml-pref-region-group {
	margin-bottom: 12px;
	border: 1px solid var(--ml-gray-200);
	border-radius: var(--ml-border-radius-sm);
	overflow: hidden;
}

.ml-pref-region-header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: var(--ml-gray-50);
	border-bottom: 1px solid var(--ml-gray-200);
}

.ml-pref-checkboxes {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
	padding: 10px 12px;
}

.ml-pref-checkbox-label {
	display: flex;
	align-items: center;
	gap: 4px;
	cursor: pointer;
	font-size: 0.875rem;
	white-space: nowrap;
}

.ml-pref-checkbox-label input[type="checkbox"] {
	margin: 0;
	cursor: pointer;
}

.ml-pref-selected-count {
	font-size: 0.875rem;
	color: var(--ml-gray-600);
	margin-right: auto;
}

.ml-pref-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 8px;
}

.ml-pref-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	background: var(--ml-primary);
	color: #fff;
	border-radius: 12px;
	font-size: 0.8125rem;
	line-height: 1.4;
}

.ml-pref-tag-remove {
	background: none;
	border: none;
	color: rgba(255, 255, 255, 0.85);
	cursor: pointer;
	padding: 0;
	font-size: 1rem;
	line-height: 1;
	display: flex;
	align-items: center;
}

.ml-pref-tag-remove:hover {
	color: #fff;
}

.ml-btn-xs {
	padding: 2px 8px;
	font-size: 0.75rem;
	line-height: 1.5;
}

.ml-btn-ghost {
	background: transparent;
	border: 1px solid var(--ml-gray-300);
	color: var(--ml-gray-600);
}

.ml-btn-ghost:hover {
	background: var(--ml-gray-100);
}

/* ================================
 * S-36: V5 Soft Natural Design - Page-level tokens
 * ================================ */
#ml-homepage-template {
	--ml-top-bg: #ffffff;
	--ml-top-border: #ece4d6;
	--ml-top-radius: 20px;
	--ml-top-shadow: 0 12px 30px rgba(120,80,30,0.06);
	background-color: var(--ml-top-bg);
}

/* Section container common max-width */
.ml-top-featured-inner,
.ml-top-categories-inner,
.ml-top-areas-inner,
.ml-top-reviews-inner {
	max-width: 1160px;
	margin: 0 auto;
}

/* Section heading common */
#ml-homepage-template h2 {
	font-size: 32px;
	font-weight: 800;
	letter-spacing: -0.8px;
	line-height: 1.2;
}

/* ================================
 * S-36: Hero Section (.ml-top-hero)
 * ================================ */
.ml-top-hero {
	position: relative;
	min-height: 400px;
	display: flex;
	align-items: center;
	background-color: var(--ml-top-bg);
	color: #1a1a1a;
	text-align: center;
	overflow: hidden;
}

/* Background image override: keep overlay & white text */
.ml-top-hero[style*="background-image"] {
	color: #fff;
	text-align: center;
}

.ml-top-hero-overlay {
	position: relative;
	z-index: 1;
	width: 100%;
	padding: 60px 32px;
}

.ml-top-hero[style*="background-image"] .ml-top-hero-overlay {
	background: rgba(0, 0, 0, 0.3);
}

.ml-top-hero:not([style*="background-image"]) .ml-top-hero-overlay {
	background: transparent;
}

.ml-top-hero-content {
	max-width: 1160px;
	margin: 0 auto;
	padding: 0;
}

.ml-top-hero-heading {
	font-size: 2rem;
	font-weight: 800;
	margin: 0 0 16px;
	color: inherit;
	line-height: 1.3;
	letter-spacing: -1px;
}

.ml-top-hero-subheading {
	font-size: 1rem;
	margin: 0 0 32px;
	color: var(--ml-gray-500, #6b7280);
	line-height: 1.6;
}

.ml-top-hero[style*="background-image"] .ml-top-hero-subheading {
	color: rgba(255, 255, 255, 0.9);
}

.ml-top-hero[style*="background-image"] .ml-top-hero-heading {
	color: #fff;
}

.ml-top-hero-cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.ml-top-hero-btn {
	display: inline-block;
	padding: 14px 32px;
	border-radius: 999px;
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	min-width: 200px;
	text-align: center;
	transition: opacity 0.2s;
	cursor: pointer;
	line-height: 1.4;
}

.ml-top-hero-btn:hover {
	opacity: 0.85;
}

.ml-top-hero-btn-seeker {
	background-color: var(--ml-accent, #f59e0b);
	color: #fff;
	box-shadow: 0 4px 0 rgba(26,26,26,0.1);
}

.ml-top-hero-btn-provider {
	background: #fff;
	border: 1px solid var(--ml-top-border, #ece4d6);
	color: #1a1a1a;
}

/* When hero has bg image, restore white provider button */
.ml-top-hero[style*="background-image"] .ml-top-hero-btn-provider {
	background-color: #fff;
	color: var(--ml-primary, #d6526a);
	border: none;
}

@media (min-width: 768px) {
	.ml-top-hero-cta {
		flex-direction: row;
		justify-content: center;
	}
}

@media (min-width: 1024px) {
	.ml-top-hero {
		min-height: 500px;
	}

	.ml-top-hero-heading {
		font-size: 3.5rem;
	}

	.ml-top-hero-subheading {
		font-size: 1.125rem;
	}
}

/* ================================
 * S-36: Hero Search Bar
 * ================================ */
.ml-top-hero-search {
	margin: 2rem auto 0;
	width: 100%;
}

.ml-top-hero-search-form {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	background: rgba(255,255,255,0.8);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-radius: 999px;
	padding: 0.5rem;
	box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.ml-top-hero:not([style*="background-image"]) .ml-top-hero-search-form {
	background: #fff;
	border: 1px solid var(--ml-top-border, #ece4d6);
	box-shadow: var(--ml-top-shadow);
}

.ml-top-hero-search-keyword,
.ml-top-hero-search-category,
.ml-top-hero-search-prefecture {
	padding: 0.6rem 0.8rem;
	border: none !important;
	outline: none;
	border-radius: var(--ml-top-radius, 20px);
	background: transparent !important;
	box-shadow: none !important;
	color: #333;
	font-size: 0.95rem;
	-webkit-appearance: none;
	appearance: none;
}

.ml-top-hero-search-keyword {
	flex: 1 1 auto;
	min-width: 0;
}

.ml-top-hero-search-category,
.ml-top-hero-search-prefecture {
	flex: 0 0 auto;
	max-width: 180px;
}

.ml-top-hero-search-btn {
	padding: 0.6rem 1.4rem;
	background: var(--ml-accent, #f59e0b);
	color: #fff;
	border: none;
	border-radius: 999px;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	flex-shrink: 0;
}

.ml-top-hero-search-btn:hover {
	opacity: 0.9;
}

@media (max-width: 767px) {
	.ml-top-hero-search-form {
		flex-direction: column;
		align-items: stretch;
		border-radius: var(--ml-top-radius, 20px);
	}

	.ml-top-hero-search-keyword,
	.ml-top-hero-search-category,
	.ml-top-hero-search-prefecture,
	.ml-top-hero-search-btn {
		width: 100%;
		max-width: none;
	}
}

/* ================================
 * S-36: How It Works Section (.ml-top-how-it-works)
 * ================================ */
.ml-top-how-it-works {
	background-color: var(--ml-top-bg);
	padding: 48px 32px;
}

.ml-top-how-it-works-inner {
	max-width: 1160px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.ml-top-step-card {
	background: #fff;
	border: 1px solid var(--ml-top-border);
	border-radius: var(--ml-top-radius);
	padding: 28px;
	text-align: center;
	position: relative;
	overflow: visible;
}

.ml-top-step-number {
	position: absolute;
	top: -16px;
	left: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background-color: var(--ml-accent, #f59e0b);
	color: #fff;
	border-radius: 999px;
	font-weight: 800;
	font-size: 16px;
}

.ml-top-step-icon {
	display: block;
	font-size: 32px;
	width: 32px;
	height: 32px;
	margin: 20px auto 16px;
	color: var(--ml-accent, #f59e0b);
}

.ml-top-step-title {
	font-size: 19px;
	font-weight: 800;
	margin: 0 0 8px;
	color: #1a1a1a;
}

.ml-top-step-desc {
	font-size: 0.9375rem;
	color: #64748b;
	margin: 0;
	line-height: 1.6;
}

@media (min-width: 768px) {
	.ml-top-how-it-works-inner {
		flex-direction: row;
	}

	.ml-top-step-card {
		flex: 1;
	}
}

@media (min-width: 1024px) {
	.ml-top-how-it-works {
		padding: 64px 32px;
	}
}

/* ===========================
 * S-36: Stats Section (.ml-top-stats)
 * =========================== */
.ml-top-stats {
	background: var(--ml-top-bg);
	padding: 0 32px 80px;
}

.ml-top-stats-inner {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	max-width: 1160px;
	margin: 0 auto;
}

.ml-top-stats-item {
	background: #fff;
	border: 1px solid var(--ml-top-border);
	border-radius: var(--ml-top-radius);
	padding: 32px 28px;
	display: flex;
	align-items: center;
	gap: 20px;
	box-shadow: var(--ml-top-shadow);
}

.ml-top-stats-icon-wrap {
	width: 64px;
	height: 64px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 24px;
}

.ml-top-stats-icon-wrap .dashicons {
	font-size: 24px;
	width: 24px;
	height: 24px;
}

.ml-top-stats-icon-wrap--0 {
	background: color-mix(in srgb, var(--ml-accent) 12%, transparent);
	color: var(--ml-accent);
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.ml-top-stats-icon-wrap--0 {
		background: rgba(245,158,11,0.12);
		color: var(--ml-accent);
	}
}

.ml-top-stats-icon-wrap--1 {
	background: rgba(26,26,26,0.08);
	color: #1a1a1a;
}

.ml-top-stats-icon-wrap--2 {
	background: rgba(122,155,118,0.12);
	color: #7a9b76;
}

.ml-top-stats-number {
	font-size: 36px;
	font-weight: 800;
	letter-spacing: -1px;
	line-height: 1;
	display: block;
	color: #1a1a1a;
}

.ml-top-stats-label {
	font-size: 13px;
	color: var(--ml-gray-500, #6b7280);
	margin-top: 4px;
	display: block;
}

@media (max-width: 767px) {
	.ml-top-stats-inner {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.ml-top-stats-inner {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ===========================
 * S-36: Featured Listings Section (.ml-top-featured)
 * =========================== */
.ml-top-featured {
	background: var(--ml-top-bg);
	padding: 0 32px 96px;
}

.ml-top-featured-inner {
	max-width: 1160px;
	margin: 0 auto;
}

.ml-top-featured-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

.ml-top-featured-card {
	display: block;
	text-decoration: none;
	color: inherit;
	background: #fff;
	border-radius: var(--ml-top-radius);
	border: 1px solid var(--ml-top-border);
	overflow: hidden;
	box-shadow: var(--ml-top-shadow);
	transition: box-shadow 0.2s, transform 0.2s;
}

.ml-top-featured-card:hover {
	box-shadow: 0 16px 40px rgba(120,80,30,0.1);
	transform: translateY(-2px);
}

.ml-top-featured-thumb {
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #f1f5f9;
}

.ml-top-featured-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ml-top-featured-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #94a3b8;
	font-size: 2rem;
}

.ml-top-featured-body {
	padding: 16px;
}

.ml-top-featured-title {
	margin: 0 0 8px;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
}

.ml-top-featured-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 0.8125rem;
	color: #64748b;
}

.ml-top-featured-cat {
	background: color-mix(in srgb, var(--ml-accent) 12%, transparent);
	color: var(--ml-accent);
	border-radius: 999px;
	font-weight: 700;
	padding: 3px 10px;
	font-size: 11px;
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.ml-top-featured-cat {
		background: rgba(245,158,11,0.12);
	}
}

.ml-top-featured-pref {
	color: #64748b;
}

@media (min-width: 768px) {
	.ml-top-featured-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.ml-top-featured-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ===========================
 * S-36: Category Nav Section (.ml-top-categories)
 * =========================== */
.ml-top-categories {
	background: var(--ml-top-bg);
	padding: 0 32px 96px;
}

.ml-top-categories-inner {
	max-width: 1160px;
	margin: 0 auto;
}

.ml-top-categories-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ml-top-category-pill {
	padding: 14px 22px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	background: #fff;
	color: #1a1a1a;
	border: 1px solid var(--ml-top-border);
	transition: opacity 0.15s;
}

.ml-top-category-pill:hover {
	opacity: 0.75;
}

.ml-top-category-pill--accent {
	background: color-mix(in srgb, var(--ml-accent) 12%, transparent);
	color: var(--ml-accent);
	border-color: transparent;
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.ml-top-category-pill--accent {
		background: rgba(245,158,11,0.12);
	}
}

/* Legacy grid classes (hidden when pills are used) */
.ml-top-categories-grid {
	display: none;
}

/* ================================
 * S-36: Region Nav Section (.ml-top-areas)
 * ================================ */
.ml-top-areas {
	background: var(--ml-top-bg);
	padding: 0 32px 96px;
}

.ml-top-areas-inner {
	max-width: 1160px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

.ml-top-areas-region {
	background: #fff;
	border: 1px solid var(--ml-top-border);
	border-radius: var(--ml-top-radius);
	padding: 24px;
	box-shadow: var(--ml-top-shadow);
}

.ml-top-areas-region-title {
	font-size: 16px;
	font-weight: 800;
	margin: 0 0 12px;
	padding-bottom: 0;
	border-bottom: none;
	color: #1a1a1a;
}

.ml-top-areas-prefecture-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ml-top-areas-prefecture-link {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	font-size: 12px;
	color: var(--ml-gray-500, #6b7280);
	background: var(--ml-top-bg);
	border: none;
	border-radius: 999px;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s;
	min-height: unset;
}

.ml-top-areas-prefecture-link:hover,
.ml-top-areas-prefecture-link:focus {
	background: var(--ml-top-border);
	color: #1a1a1a;
	text-decoration: none;
}

@media (min-width: 768px) {
	.ml-top-areas-inner {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.ml-top-areas-inner {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ================================
 * S-36: Reviews Section (.ml-top-reviews)
 * ================================ */
.ml-top-reviews {
	background: var(--ml-top-bg);
	padding: 0 32px 96px;
}

.ml-top-reviews-inner {
	max-width: 1160px;
	margin: 0 auto;
}

.ml-top-reviews-empty {
	text-align: center;
	color: var(--ml-gray-500, #6b7280);
	font-size: 0.9375rem;
	padding: 24px 0;
}

.ml-top-reviews-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

.ml-top-review-card {
	background: #fff;
	border: 1px solid var(--ml-top-border);
	border-radius: var(--ml-top-radius);
	padding: 26px;
	box-shadow: var(--ml-top-shadow);
}

.ml-top-review-rating {
	color: var(--ml-accent);
	margin-bottom: 14px;
}

.ml-top-review-star {
	font-size: 1.125rem;
	line-height: 1;
}

.ml-top-review-star--filled {
	color: var(--ml-accent, #f59e0b);
}

.ml-top-review-star--empty {
	color: var(--ml-gray-300, #d1d5db);
}

.ml-top-review-listing {
	font-size: 13px;
	line-height: 1.5;
	color: var(--ml-gray-600, #4b5563);
	margin: 0 0 12px;
}

.ml-top-review-listing-link {
	font-weight: 600;
	color: var(--ml-primary, #d6526a);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.ml-top-review-listing-link:hover,
.ml-top-review-listing-link:focus-visible {
	color: var(--ml-primary, #d6526a);
	border-bottom-color: currentColor;
}

.ml-top-review-listing-name {
	font-weight: 600;
	color: #1a1a1a;
}

.ml-top-review-comment {
	font-size: 14px;
	line-height: 1.8;
	color: var(--ml-gray-700, #374151);
	margin: 0 0 18px;
}

.ml-top-review-footer {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: var(--ml-gray-500, #6b7280);
}

.ml-top-review-avatar {
	width: 32px;
	height: 32px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--ml-accent) 12%, transparent);
	flex-shrink: 0;
	display: inline-block;
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.ml-top-review-avatar {
		background: rgba(245,158,11,0.12);
	}
}

.ml-top-review-name {
	font-weight: 600;
	color: #1a1a1a;
	display: block;
}

.ml-top-review-date {
	font-size: 12px;
	color: var(--ml-gray-400, #9ca3af);
	display: block;
}

/* Legacy header class (hidden in V5) */
.ml-top-review-header {
	display: none;
}

@media (min-width: 768px) {
	.ml-top-reviews-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.ml-top-reviews-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ================================
 * S-36: CTA Banner Section (.ml-top-cta-banner)
 * ================================ */
.ml-top-cta-banner {
	padding: 0 32px 96px;
	background: var(--ml-top-bg);
}

.ml-top-cta-banner-inner {
	max-width: 1160px;
	margin: 0 auto;
	background: var(--ml-accent);
	color: #fff;
	border-radius: calc(var(--ml-top-radius) + 8px);
	padding: 64px 56px;
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 32px;
	align-items: center;
}

.ml-top-cta-banner-deco {
	position: absolute;
	border-radius: 999px;
	background: rgba(255,255,255,0.12);
	pointer-events: none;
}

.ml-top-cta-banner-deco--1 {
	width: 300px;
	height: 300px;
	right: -60px;
	top: -60px;
}

.ml-top-cta-banner-deco--2 {
	width: 200px;
	height: 200px;
	right: 200px;
	bottom: -100px;
}

.ml-top-cta-banner-text-col,
.ml-top-cta-banner-btn-col {
	position: relative;
}

.ml-top-cta-banner-heading {
	font-size: 38px;
	font-weight: 800;
	margin: 0 0 12px;
	line-height: 1.2;
	letter-spacing: -0.8px;
	color: #fff;
}

.ml-top-cta-banner-text {
	font-size: 15px;
	opacity: 0.9;
	margin: 0;
	color: #fff;
}

.ml-top-cta-banner-btn-col {
	display: grid;
	gap: 12px;
}

.ml-top-cta-banner-btn {
	display: block;
	padding: 16px 28px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 15px;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.15s;
	min-height: 44px;
}

.ml-top-cta-banner-btn:hover {
	opacity: 0.85;
	text-decoration: none;
}

.ml-top-cta-banner-btn--primary {
	background: #fff;
	color: var(--ml-accent);
}

.ml-top-cta-banner-btn--ghost {
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255,255,255,0.6);
}

@media (max-width: 767px) {
	.ml-top-cta-banner-inner {
		grid-template-columns: 1fr;
		padding: 40px 28px;
	}

	.ml-top-cta-banner-heading {
		font-size: 26px;
	}
}

/* Section titles */
.ml-top-section-title {
	text-align: center;
	font-size: clamp(1.4rem, 3vw, 1.9rem);
	font-weight: 700;
	margin: 0 0 2rem;
	color: #2c2c2c;
	letter-spacing: 0.02em;
}

@media (max-width: 767px) {
	.ml-top-section-title {
		font-size: 1.35rem;
		margin-bottom: 1.4rem;
	}
}

/* S-38 F-115: Footer Links */
.ml-footer-links {
	text-align: center;
	padding: 16px;
	font-size: 0.85rem;
	color: #666;
}
.ml-footer-links a {
	color: #666;
	text-decoration: none;
	margin: 0 12px;
}
.ml-footer-links a:hover {
	text-decoration: underline;
}

/* S-38 F-114: Agreement checkboxes */
.ml-form-agreements {
	margin-bottom: 1rem;
}
.ml-form-agreements .ml-checkbox-label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 8px;
	font-size: 0.9rem;
	line-height: 1.5;
	cursor: pointer;
}
.ml-form-agreements .ml-checkbox-label input[type="checkbox"] {
	margin-top: 3px;
	flex-shrink: 0;
}
.ml-form-agreements .ml-checkbox-label a {
	color: var(--ml-primary, #d6526a);
	text-decoration: underline;
}

/* S-41: wp_body_open auto-insert menu */
.ml-body-open-menu {
	background: #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,.12);
	padding: 8px 16px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.ml-body-open-menu--fixed {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999;
}
.ml-body-open-menu--integrated {
	position: static;
	width: 100%;
	background: transparent;
	box-shadow: none;
	padding: 4px 8px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.ml-body-open-menu--static {
	position: relative;
}

/* Nav item injection mode */
.matchlayer-menu-item {
	list-style: none;
	display: flex;
	align-items: center;
	padding: 0;
	margin: 0;
}

.matchlayer-menu-item > .ml-wrapper {
	margin: 0;
	padding: 0;
}
body.admin-bar .ml-body-open-menu--fixed {
	top: 32px;
}
body.matchlayer-body-open-menu-offset {
	padding-top: 56px;
}

/* ==============================================
 * S-43: Mobile bottom fixed navigation bar
 * All mobile-specific rules are scoped under
 * body.matchlayer-mobile-bottom-bar-active so that
 * setting OFF = no hamburger suppression / no bar.
 * ============================================== */
.ml-mobile-bottom-nav {
	display: none;
}

/* S-43 breakpoint: 920px / 921px boundary.
 * Themes switch to hamburger mode at varying widths (Astra ~921, Kadence ~800,
 * GeneratePress ~769). Using 920px max-width covers the "dead zone" between
 * the theme's mobile breakpoint and the original 768px so MatchLayer's bottom
 * bar takes over whenever any common theme would otherwise show its hamburger. */
@media (max-width: 920px) {
	/* Hide PC menu elements on mobile (only when setting ON).
	 * .ml-header-nav itself is hidden so that any placement
	 * (block, widget, integrated, fallback, nav_items) is covered.
	 * The mobile bottom bar uses .ml-mobile-bottom-nav (different class)
	 * and is unaffected. */
	body.matchlayer-mobile-bottom-bar-active .ml-body-open-menu--integrated,
	body.matchlayer-mobile-bottom-bar-active .ml-body-open-menu--fixed,
	body.matchlayer-mobile-bottom-bar-active .ml-body-open-menu--static,
	body.matchlayer-mobile-bottom-bar-active .matchlayer-menu-item,
	body.matchlayer-mobile-bottom-bar-active .wp-block-matchlayer-user-menu,
	body.matchlayer-mobile-bottom-bar-active .ml-header-nav {
		display: none !important;
	}

	/* Hide theme hamburger buttons on mobile (only when setting ON) */
	body.matchlayer-mobile-bottom-bar-active .menu-toggle,
	body.matchlayer-mobile-bottom-bar-active .main-header-menu-toggle,
	body.matchlayer-mobile-bottom-bar-active .ast-mobile-menu-buttons,
	body.matchlayer-mobile-bottom-bar-active .gp-icon.icon-menu-bars,
	body.matchlayer-mobile-bottom-bar-active button.menu-toggle,
	body.matchlayer-mobile-bottom-bar-active .drawer-toggle,
	body.matchlayer-mobile-bottom-bar-active .nav-toggle,
	body.matchlayer-mobile-bottom-bar-active .c-drawerBtn,
	body.matchlayer-mobile-bottom-bar-active .l-header__drawerBtn,
	body.matchlayer-mobile-bottom-bar-active .l-header__drawer,
	body.matchlayer-mobile-bottom-bar-active .drawer-nav-action,
	body.matchlayer-mobile-bottom-bar-active .drawer-nav-action--toggle,
	body.matchlayer-mobile-bottom-bar-active .menu-toggle-open,
	body.matchlayer-mobile-bottom-bar-active .kadence-menu-mobile-toggle,
	body.matchlayer-mobile-bottom-bar-active .header-navigation-toggle-wrap,
	body.matchlayer-mobile-bottom-bar-active .wp-block-navigation__responsive-container-open,
	body.matchlayer-mobile-bottom-bar-active .wp-block-navigation__responsive-container.is-menu-open,
	body.matchlayer-mobile-bottom-bar-active .wp-block-navigation__responsive-container,
	body.matchlayer-mobile-bottom-bar-active .wp-block-navigation {
		display: none !important;
	}

	/* Mobile bottom fixed nav bar (only when setting ON) */
	body.matchlayer-mobile-bottom-bar-active .ml-mobile-bottom-nav {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 9999;
		background: #fff;
		box-shadow: 0 -1px 4px rgba(0, 0, 0, .12);
		padding: 6px 4px;
		justify-content: space-around;
		align-items: stretch;
		min-height: 60px;
	}

	.ml-mobile-bottom-item {
		flex: 1 1 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2px;
		padding: 4px 2px;
		text-decoration: none;
		color: #555;
		font-size: 10px;
		line-height: 1.2;
		position: relative;
		min-width: 0;
	}

	.ml-mobile-bottom-item:hover,
	.ml-mobile-bottom-item:focus {
		color: var(--matchlayer-brand-color, #0073aa);
	}

	.ml-mobile-bottom-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 24px;
		height: 24px;
	}

	.ml-mobile-bottom-icon svg {
		width: 22px;
		height: 22px;
	}

	.ml-mobile-bottom-label {
		font-size: 10px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 100%;
	}

	.ml-mobile-bottom-item .ml-nav-badge {
		position: absolute;
		top: 2px;
		right: calc(50% - 16px);
	}

	body.matchlayer-mobile-bottom-bar-active {
		padding-bottom: 64px;
	}
}

/* ==============================================
 * F-136: Cancel Feature Styles
 * ============================================== */

.ml-cancel-banner {
	background: #fff8e1;
	border: 1px solid #ffc107;
	border-radius: 6px;
	padding: 12px 16px;
	margin: 8px 0;
}

.ml-cancel-banner--thread {
	margin: 12px 0;
}

/* スレッドで「キャンセル申請可能」状態は枠なしにして、ボタンだけが控えめに見えるようにする */
.ml-cancel-banner--available {
	background: transparent;
	border: none;
	padding: 0;
	margin: 8px 0;
}

.ml-cancel-banner--available .ml-cancel-banner-actions {
	margin-top: 0;
	justify-content: flex-end;
}

.ml-cancel-banner-content {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 4px;
}

.ml-cancel-banner-icon {
	font-size: 18px;
	line-height: 1;
}

.ml-cancel-banner-text {
	font-weight: 600;
	color: #6d4c00;
	font-size: 14px;
}

.ml-cancel-banner-date {
	font-size: 12px;
	color: #8d6e00;
}

.ml-cancel-banner-reason {
	margin-top: 6px;
	padding: 8px 12px;
	background: rgba(255, 193, 7, 0.1);
	border-radius: 4px;
	font-size: 13px;
}

.ml-cancel-reason-label {
	font-weight: 600;
	color: #5d4e37;
	margin-right: 4px;
}

.ml-cancel-reason-text {
	color: #333;
}

.ml-cancel-banner-actions {
	margin-top: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* キャンセル申請ボタンは「不成立」と同じ控えめなテキストリンク風にする */
.ml-btn-cancel-request {
	background: transparent !important;
	color: var(--ml-gray-400) !important;
	border-color: transparent !important;
	text-decoration: underline;
	text-underline-offset: 2px;
	font-weight: 400;
}

.ml-btn-cancel-request:hover {
	background: transparent !important;
	color: var(--ml-gray-600) !important;
	border-color: transparent !important;
}

/* ================================
   Danger Zone (Account Deletion) F-137~F-145
   ================================ */
.ml-danger-zone {
	margin-top: 48px;
	padding: 24px;
	border: 1px solid #fecaca;
	border-radius: var(--ml-border-radius-sm);
	background: #fef2f2;
}

.ml-danger-zone-title {
	margin: 0 0 16px;
	color: #991b1b;
	font-size: 1.125rem;
	font-weight: 700;
}

.ml-danger-zone-description {
	margin: 0 0 16px;
	color: #7f1d1d;
	font-size: 0.9375rem;
}

.ml-danger-zone-summary {
	margin-bottom: 20px;
	padding: 16px;
	background: #fff;
	border-radius: var(--ml-border-radius-sm);
	border: 1px solid #fecaca;
}

.ml-danger-zone-summary h4 {
	margin: 0 0 12px;
	font-size: 0.9375rem;
	font-weight: 600;
	color: #991b1b;
}

.ml-danger-zone-impact {
	margin: 0;
	padding: 0 0 0 20px;
	list-style: disc;
}

.ml-danger-zone-impact li {
	margin-bottom: 6px;
	font-size: 0.875rem;
	color: #7f1d1d;
}

.ml-danger-zone-active-warning {
	margin-bottom: 16px;
}

.ml-danger-zone-matchings-link {
	font-weight: 600;
	text-decoration: underline;
}

.ml-delete-account-form {
	margin-top: 20px;
}

.ml-delete-account-form .ml-form-field {
	margin-bottom: 16px;
}

.ml-btn-delete-account {
	background: #dc2626;
	color: #fff;
	border: 1px solid #dc2626;
	padding: 10px 24px;
	font-weight: 600;
	border-radius: var(--ml-border-radius-sm);
	cursor: pointer;
	transition: background 0.2s ease, opacity 0.2s ease;
}

.ml-btn-delete-account:hover {
	background: #b91c1c;
	border-color: #b91c1c;
	color: #fff;
}

.ml-btn-delete-account:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.ml-deletion-complete-notice {
	margin-bottom: 16px;
}