/*
 * Matrimonial Profiles - frontend.
 *
 * Deliberately plain. A theme is expected to restyle this; every value comes
 * from a custom property so it can be overridden without fighting specificity.
 */

.mpro-match-theme,
.mpro-match-theme input,
.mpro-match-theme select,
.mpro-match-theme textarea,
.mpro-match-theme button {
	font-family: inherit;
	color: inherit;
}

.mpro-match-theme .mpro-submit {
	/* Prefer the active theme's own button styling; fall back to our default. */
	background: var( --wp--preset--color--primary, var( --mpro-accent ) );
	color: var( --wp--preset--color--background, var( --mpro-accent-text ) );
	border-color: transparent;
}

.mpro-profile,
.mpro-form-wrap,
.mpro-profiles {
	--mpro-gap: 1rem;
	--mpro-radius: 8px;
	--mpro-border: 1px solid rgba( 0, 0, 0, 0.12 );
	--mpro-muted: rgba( 0, 0, 0, 0.6 );
	--mpro-field-bg: transparent;
	--mpro-accent: #ad1457;
	--mpro-accent-text: #ffffff;
	--mpro-accent-hover: #8e1046;
	--mpro-columns: 3;
}

/* Profile details ------------------------------------------------------- */

.mpro-profile {
	margin: calc( var( --mpro-gap ) * 1.5 ) 0;
}

.mpro-profile-fields {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	gap: var( --mpro-gap );
	margin: 0;
}

.mpro-profile-field {
	margin: 0;
}

.mpro-profile-fields dt {
	font-weight: 600;
	margin: 0 0 0.15em;
}

.mpro-profile-fields dd {
	margin: 0;
}

.mpro-profile-gallery {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 150px, 1fr ) );
	gap: var( --mpro-gap );
	margin-top: calc( var( --mpro-gap ) * 1.5 );
}

.mpro-profile-gallery-item {
	margin: 0;
}

.mpro-profile-gallery-image {
	width: 100%;
	height: auto;
	border-radius: var( --mpro-radius );
	display: block;
}

/* Listing --------------------------------------------------------------- */

.mpro-profiles {
	display: grid;
	grid-template-columns: repeat( var( --mpro-columns ), minmax( 0, 1fr ) );
	gap: calc( var( --mpro-gap ) * 1.25 );
}

@media ( max-width: 782px ) {
	.mpro-profiles {
		grid-template-columns: repeat( auto-fit, minmax( 160px, 1fr ) );
	}
}

.mpro-card-link {
	display: block;
	text-decoration: none;
}

.mpro-card-image {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var( --mpro-radius );
}

.mpro-card-name {
	display: block;
	margin-top: 0.5em;
	font-weight: 600;
}

.mpro-card-summary {
	margin: 0.25em 0 0;
	color: var( --mpro-muted );
	font-size: 0.9em;
}

.mpro-pagination {
	margin-top: var( --mpro-gap );
	display: flex;
	gap: 0.5em;
	flex-wrap: wrap;
}

/* Visitor form ---------------------------------------------------------- */

.mpro-form-wrap {
	margin: calc( var( --mpro-gap ) * 2 ) 0;
}

.mpro-form-title {
	margin-bottom: 0.25em;
}

.mpro-form-intro {
	color: var( --mpro-muted );
	margin-top: 0;
}

.mpro-fields {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) );
	gap: var( --mpro-gap );
}

.mpro-field {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.3em;
}

.mpro-field--textarea,
.mpro-field--images {
	grid-column: 1 / -1;
}

.mpro-field label {
	font-weight: 600;
}

.mpro-field input,
.mpro-field select,
.mpro-field textarea {
	width: 100%;
	max-width: 100%;
	padding: 0.55em 0.7em;
	border: var( --mpro-border );
	border-radius: var( --mpro-radius );
	background: var( --mpro-field-bg );
	font: inherit;
	color: inherit;
	box-sizing: border-box;
}

.mpro-field--checkbox input {
	width: auto;
}

.mpro-field textarea {
	resize: vertical;
}

.mpro-help {
	font-size: 0.85em;
	color: var( --mpro-muted );
}

.mpro-required {
	color: #b3261e;
}

.mpro-actions {
	margin-top: var( --mpro-gap );
}

.mpro-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	font: inherit;
	font-weight: 600;
	font-size: 1.02em;
	padding: 0.75em 1.75em;
	border: 2px solid var( --mpro-accent );
	border-radius: 999px;
	cursor: pointer;
	background: var( --mpro-accent );
	color: var( --mpro-accent-text );
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.12 );
	transition: background-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.mpro-submit:hover:not( [disabled] ) {
	background: var( --mpro-accent-hover );
	border-color: var( --mpro-accent-hover );
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.18 );
	transform: translateY( -1px );
}

.mpro-submit:active:not( [disabled] ) {
	transform: translateY( 0 );
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.14 );
}

.mpro-submit[disabled] {
	opacity: 0.65;
	cursor: progress;
	transform: none;
}

.mpro-submit:focus-visible,
.mpro-field input:focus-visible,
.mpro-field select:focus-visible,
.mpro-field textarea:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.mpro-status:empty {
	display: none;
}

.mpro-status--error {
	color: #b3261e;
}

/* Honeypot: hidden from people, reachable by bots. */
.mpro-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Confirmation ---------------------------------------------------------- */

.mpro-modal {
	position: fixed;
	inset: 0;
	background: rgba( 0, 0, 0, 0.55 );
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	z-index: 99999;
}

.mpro-modal-box {
	background: #fff;
	color: #111;
	border-radius: 12px;
	padding: 1.75rem;
	max-width: 30rem;
	width: 100%;
	text-align: center;
	box-shadow: 0 10px 40px rgba( 0, 0, 0, 0.25 );
	animation: mpro-pop 160ms ease-out;
}

.mpro-modal-message {
	margin: 0 0 1.25rem;
	font-size: 1.05rem;
	line-height: 1.6;
}

.mpro-modal-close {
	font: inherit;
	padding: 0.55em 1.6em;
	border: 1px solid rgba( 0, 0, 0, 0.2 );
	border-radius: 999px;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

@keyframes mpro-pop {
	from {
		transform: scale( 0.96 );
		opacity: 0;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.mpro-modal-box {
		animation: none;
	}
}


/* Photo previews --------------------------------------------------------- */

.mpro-previews {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 0.6rem;
}

.mpro-previews:empty {
	display: none;
}

.mpro-preview {
	position: relative;
	margin: 0;
	width: 92px;
	height: 92px;
	border-radius: var( --mpro-radius );
	overflow: hidden;
	border: var( --mpro-border );
	animation: mpro-fade-in 200ms ease-out;
}

.mpro-preview-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mpro-preview-remove {
	position: absolute;
	top: 4px;
	inset-inline-end: 4px;
	width: 22px;
	height: 22px;
	border: 0;
	border-radius: 50%;
	background: rgba( 0, 0, 0, 0.6 );
	color: #fff;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}

@keyframes mpro-fade-in {
	from { opacity: 0; transform: scale( 0.9 ); }
}

/* Confirmation popup effect ---------------------------------------------- */

.mpro-modal {
	opacity: 0;
	transition: opacity 200ms ease;
}

.mpro-modal.is-open {
	opacity: 1;
}

.mpro-modal-box {
	transform: translateY( 14px ) scale( 0.96 );
	transition: transform 240ms cubic-bezier( 0.2, 0.9, 0.3, 1.2 );
	animation: none;
}

.mpro-modal.is-open .mpro-modal-box {
	transform: none;
}

.mpro-modal-mark svg {
	width: 62px;
	height: 62px;
	display: block;
	margin: 0 auto 0.9rem;
}

.mpro-mark-circle {
	stroke: currentColor;
	stroke-width: 2;
	opacity: 0.25;
	stroke-dasharray: 160;
	stroke-dashoffset: 160;
	animation: mpro-draw 600ms ease-out forwards;
}

.mpro-mark-check {
	stroke: currentColor;
	stroke-width: 3.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 48;
	stroke-dashoffset: 48;
	animation: mpro-draw 380ms 260ms ease-out forwards;
}

@keyframes mpro-draw {
	to { stroke-dashoffset: 0; }
}

/* Nastaliq languages need more line height and a larger size to stay legible. */
.mpro-nastaliq .mpro-form-title,
.mpro-nastaliq label,
.mpro-nastaliq input,
.mpro-nastaliq textarea,
.mpro-nastaliq .mpro-submit,
.mpro-modal--nastaliq .mpro-modal-message {
	font-size: 1.08em;
	line-height: 2.2;
}

.mpro-rtl .mpro-preview-remove {
	inset-inline-end: 4px;
}

@media ( prefers-reduced-motion: reduce ) {
	.mpro-modal,
	.mpro-modal-box,
	.mpro-preview {
		transition: none;
		animation: none;
	}
	.mpro-mark-circle,
	.mpro-mark-check {
		animation: none;
		stroke-dashoffset: 0;
	}
}