/**
 * Contact request page and account inbox styles.
 *
 * @package Astra Child
 */

.indydtf-contact-form-page,
.indydtf-contact-requests-account,
.indydtf-contact-requests-admin {
	color: var( --indy-color-ink, #0a0d12 );
}

.indydtf-contact-layout {
	display: grid;
	grid-template-columns: minmax( 240px, 0.75fr ) minmax( 320px, 1.25fr );
	gap: 24px;
	align-items: start;
}

.indydtf-contact-intro {
	display: grid;
	gap: 10px;
	padding-top: 10px;
}

.indydtf-contact-location {
	display: grid;
	gap: 14px;
	margin-top: 16px;
	padding: 16px;
	border: 1px solid var( --indy-color-border, #d7e6f2 );
	border-radius: var( --indy-radius-md, 8px );
	background: var( --indy-color-surface, #fff );
	box-shadow: 0 14px 36px rgba( 15, 23, 42, 0.08 );
	min-width: 0;
}

.indydtf-contact-location__details {
	display: grid;
	gap: 12px;
	min-width: 0;
}

.indydtf-contact-location__eyebrow {
	margin: 0;
	color: var( --color-primary, #0b8fef );
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.indydtf-contact-location address {
	display: grid;
	gap: 3px;
	margin: 0;
	color: var( --indy-color-muted, #556070 );
	font-style: normal;
	line-height: 1.45;
}

.indydtf-contact-location address strong {
	color: var( --indy-color-ink, #0a0d12 );
	font-size: 17px;
}

.indydtf-contact-location__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	min-width: 0;
}

.indydtf-contact-location__actions .indy-button {
	min-height: 42px;
	padding: 10px 14px;
	font-size: 14px;
	white-space: normal;
}

.indydtf-contact-map {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	min-height: 240px;
	overflow: hidden;
	border: 1px solid var( --indy-color-border, #d7e6f2 );
	border-radius: var( --indy-radius-sm, 4px );
	background: var( --indy-color-surface-soft, #f7fbff );
}

.indydtf-contact-map iframe {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.indydtf-contact-form select,
.indydtf-contact-requests__filters select {
	display: block;
	width: 100%;
	min-height: 44px;
}

.indydtf-contact-form__status {
	border: 1px solid var( --indy-color-border, #d7e6f2 );
	border-radius: var( --indy-radius-sm, 4px );
	padding: 12px 14px;
	background: var( --indy-color-surface-soft, #f7fbff );
	color: var( --indy-color-ink, #0a0d12 );
}

.indydtf-contact-form__status[data-status="success"] {
	border-color: #15803d;
	background: #f0fdf4;
	color: #14532d;
}

.indydtf-contact-form__status[data-status="error"] {
	border-color: #dc2626;
	background: #fef2f2;
	color: #7f1d1d;
}

.indydtf-contact-requests-account {
	display: grid;
	gap: 20px;
}

.indydtf-contact-requests-admin {
	display: grid;
	gap: 16px;
	max-width: 1200px;
}

.indydtf-contact-requests-admin .indydtf-contact-requests__hero,
.indydtf-contact-requests-admin .indydtf-contact-request-detail,
.indydtf-contact-requests-admin .indydtf-contact-requests__filters,
.indydtf-contact-requests-admin .indydtf-contact-request-row,
.indydtf-contact-requests-admin .indydtf-contact-requests__empty {
	box-shadow: 0 1px 2px rgba( 15, 23, 42, 0.06 );
}

.indydtf-contact-requests__hero,
.indydtf-contact-request-detail {
	background: var( --indy-color-surface, #fff );
	border: 1px solid var( --indy-color-border, #d7e6f2 );
	border-radius: var( --indy-radius-md, 8px );
	padding: 22px 24px;
}

.indydtf-contact-requests__hero {
	background: var( --indy-color-surface-soft, #f7fbff );
}

.indydtf-contact-requests__eyebrow {
	margin: 0 0 6px;
	color: var( --color-primary, #0b8fef );
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.indydtf-contact-requests__hero h2,
.indydtf-contact-request-detail h2 {
	margin: 0 0 6px;
	font-size: 26px;
	line-height: 1.2;
	color: var( --indy-color-ink, #0a0d12 );
}

.indydtf-contact-requests__hero p,
.indydtf-contact-request-detail p {
	margin: 0;
	color: var( --indy-color-muted, #556070 );
	line-height: 1.55;
}

.indydtf-contact-requests__filters {
	display: grid;
	grid-template-columns: minmax( 150px, 190px ) minmax( 170px, 220px ) minmax( 200px, 1fr ) auto;
	gap: 14px;
	align-items: end;
	background: var( --indy-color-surface, #fff );
	border: 1px solid var( --indy-color-border, #d7e6f2 );
	border-radius: var( --indy-radius-md, 8px );
	padding: 16px 20px;
}

body.woocommerce-account .woocommerce-MyAccount-content .indydtf-contact-requests__filters,
.indydtf-contact-requests-admin .indydtf-contact-requests__filters {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 12px;
	align-items: end;
	background: #fff;
	color: var( --indy-color-ink, #0a0d12 );
}

.indydtf-contact-requests__filters label {
	display: grid;
	gap: 6px;
	font-size: 13px;
	color: var( --indy-color-muted, #556070 );
	min-width: 0;
}

body.woocommerce-account .woocommerce-MyAccount-content .indydtf-contact-requests__filters label,
.indydtf-contact-requests-admin .indydtf-contact-requests__filters label {
	display: grid;
	width: auto;
	margin: 0;
	float: none;
	clear: none;
	color: var( --indy-color-ink, #0a0d12 );
	font-weight: 700;
}

.indydtf-contact-requests__filters select,
.indydtf-contact-requests__filters input[type="search"] {
	border: 1px solid var( --indy-color-border, #d7e6f2 );
	border-radius: var( --indy-radius-sm, 4px );
	padding: 9px 12px;
	font-size: 14px;
	width: 100%;
	min-width: 0;
}

body.woocommerce-account .woocommerce-MyAccount-content .indydtf-contact-requests__filters select,
body.woocommerce-account .woocommerce-MyAccount-content .indydtf-contact-requests__filters input[type="search"],
.indydtf-contact-requests-admin .indydtf-contact-requests__filters select,
.indydtf-contact-requests-admin .indydtf-contact-requests__filters input[type="search"] {
	width: 100%;
	max-width: 100%;
	min-height: 44px;
	margin: 0;
	border: 1px solid var( --indy-color-border, #d7e6f2 );
	border-radius: var( --indy-radius-sm, 4px );
	background-color: #fff;
	color: var( --indy-color-ink, #0a0d12 );
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

body.woocommerce-account .woocommerce-MyAccount-content .indydtf-contact-requests__filters select,
.indydtf-contact-requests-admin .indydtf-contact-requests__filters select {
	padding-right: 36px;
	background-image:
		linear-gradient( 45deg, transparent 50%, var( --indy-color-ink, #0a0d12 ) 50% ),
		linear-gradient( 135deg, var( --indy-color-ink, #0a0d12 ) 50%, transparent 50% );
	background-position:
		calc( 100% - 17px ) 50%,
		calc( 100% - 11px ) 50%;
	background-repeat: no-repeat;
	background-size: 6px 6px, 6px 6px;
}

body.woocommerce-account .woocommerce-MyAccount-content .indydtf-contact-requests__filters input::placeholder,
.indydtf-contact-requests-admin .indydtf-contact-requests__filters input::placeholder {
	color: #8a94a6;
	opacity: 1;
}

.indydtf-contact-requests__filters button {
	background: var( --color-primary, #0b8fef );
	color: #fff;
	border: 0;
	border-radius: var( --indy-radius-sm, 4px );
	padding: 10px 18px;
	font-weight: 700;
	cursor: pointer;
}

body.woocommerce-account .woocommerce-MyAccount-content .indydtf-contact-requests__filters button,
.indydtf-contact-requests-admin .indydtf-contact-requests__filters button {
	grid-column: 1;
	justify-self: start;
	min-height: 44px;
}

@media ( min-width: 922px ) {
	body.woocommerce-account .woocommerce-MyAccount-content .indydtf-contact-requests__filters,
	.indydtf-contact-requests-admin .indydtf-contact-requests__filters {
		display: grid !important;
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) ) !important;
		background: #fff !important;
		color: #0a0d12 !important;
	}

	body.woocommerce-account .woocommerce-MyAccount-content .indydtf-contact-requests__filters label,
	.indydtf-contact-requests-admin .indydtf-contact-requests__filters label {
		grid-column: auto !important;
		color: #0a0d12 !important;
		font-weight: 700 !important;
	}

	body.woocommerce-account .woocommerce-MyAccount-content .indydtf-contact-requests__filters select,
	body.woocommerce-account .woocommerce-MyAccount-content .indydtf-contact-requests__filters input[type="search"],
	.indydtf-contact-requests-admin .indydtf-contact-requests__filters select,
	.indydtf-contact-requests-admin .indydtf-contact-requests__filters input[type="search"] {
		border: 1px solid #d7e6f2 !important;
		border-radius: 4px !important;
		background-color: #fff !important;
		color: #0a0d12 !important;
		box-shadow: none !important;
	}

	body.woocommerce-account .woocommerce-MyAccount-content .indydtf-contact-requests__filters button,
	.indydtf-contact-requests-admin .indydtf-contact-requests__filters button {
		grid-column: 1 !important;
	}
}

.indydtf-contact-requests__empty {
	background: var( --indy-color-surface, #fff );
	border: 1px dashed var( --indy-color-border, #d7e6f2 );
	border-radius: var( --indy-radius-md, 8px );
	padding: 32px;
	text-align: center;
	color: var( --indy-color-muted, #556070 );
}

.indydtf-contact-request-rows {
	display: grid;
	gap: 10px;
}

.indydtf-contact-request-row {
	display: grid;
	grid-template-columns: 72px minmax( 180px, 1fr ) minmax( 160px, 220px ) 120px 110px;
	gap: 14px;
	align-items: center;
	background: var( --indy-color-surface, #fff );
	border: 1px solid var( --indy-color-border, #d7e6f2 );
	border-radius: var( --indy-radius-md, 8px );
	padding: 14px 16px;
	color: inherit;
	text-decoration: none;
}

.indydtf-contact-request-row:hover {
	border-color: var( --color-primary, #0b8fef );
}

.indydtf-contact-request-row__id,
.indydtf-contact-request-row__reason,
.indydtf-contact-request-row__date {
	font-weight: 700;
}

.indydtf-contact-request-row__person {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.indydtf-contact-request-row__person strong,
.indydtf-contact-request-row__person em {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.indydtf-contact-request-row__person em,
.indydtf-contact-request-row__date {
	color: var( --indy-color-muted, #556070 );
	font-size: 13px;
	font-style: normal;
}

.indydtf-contact-request-status {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	padding: 5px 10px;
	background: #eef6ff;
	color: #075985;
	font-size: 12px;
	font-weight: 800;
	white-space: nowrap;
}

.indydtf-contact-request-status--new { background: #e0f2fe; color: #075985; }
.indydtf-contact-request-status--in_review { background: #fef3c7; color: #92400e; }
.indydtf-contact-request-status--waiting { background: #fee2e2; color: #991b1b; }
.indydtf-contact-request-status--resolved { background: #dcfce7; color: #166534; }
.indydtf-contact-request-status--closed { background: #f1f5f9; color: #334155; }

.indydtf-contact-requests__back {
	color: var( --color-primary, #0b8fef );
	font-weight: 700;
	text-decoration: none;
}

.indydtf-contact-request-detail {
	display: grid;
	gap: 22px;
}

.indydtf-contact-request-detail__head {
	display: flex;
	justify-content: space-between;
	gap: 18px;
	align-items: start;
}

.indydtf-contact-request-detail__grid {
	display: grid;
	grid-template-columns: minmax( 220px, 0.7fr ) minmax( 260px, 1.3fr );
	gap: 20px;
}

.indydtf-contact-request-detail h3 {
	margin: 0 0 10px;
	font-size: 16px;
}

.indydtf-contact-request-detail dl {
	display: grid;
	grid-template-columns: 90px minmax( 0, 1fr );
	gap: 8px 12px;
	margin: 0;
}

.indydtf-contact-request-detail dt {
	color: var( --indy-color-muted, #556070 );
	font-weight: 700;
}

.indydtf-contact-request-detail dd {
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
}

.indydtf-contact-request-detail__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	align-items: center;
	border-top: 1px solid var( --indy-color-border, #d7e6f2 );
	padding-top: 18px;
}

.indydtf-contact-request-detail__actions form {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.indydtf-contact-request-delete {
	background: #dc2626;
	color: #fff;
}

@media ( max-width: 900px ) {
	.indydtf-contact-layout,
	.indydtf-contact-request-detail__grid {
		grid-template-columns: 1fr;
	}

	.indydtf-contact-requests__filters,
	.indydtf-contact-request-row {
		grid-template-columns: 1fr;
	}

	body.woocommerce-account .woocommerce-MyAccount-content .indydtf-contact-requests__filters,
	.indydtf-contact-requests-admin .indydtf-contact-requests__filters {
		grid-template-columns: 1fr;
	}
}

@media ( max-width: 543px ) {
	.indydtf-contact-location {
		padding: 14px;
	}

	.indydtf-contact-location__actions .indy-button {
		width: 100%;
		justify-content: center;
	}

	.indydtf-contact-map {
		min-height: 220px;
	}
}