/* Oman Verified responsive Gutenberg tables.
 * Desktop table presentation is intentionally untouched.
 */
.ov-mobile-table {
	display: none !important;
}

@media (max-width: 767px) {
	/* Hide an original Gutenberg table only after a successful card conversion. */
	.wp-block-table.ov-mobile-table-enabled {
		display: none !important;
	}

	.ov-mobile-table {
		display: block !important;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		margin: 24px 0;
	}

	.ov-mobile-table,
	.ov-mobile-table * {
		box-sizing: border-box;
	}

	.ov-mobile-table-card {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		margin: 0 0 18px;
		background: #F6F3EC;
		border: 1px solid rgba(23, 62, 58, 0.14);
		border-radius: 10px;
		overflow: hidden;
	}

	.ov-mobile-table-card:last-child {
		margin-bottom: 0;
	}

	.ov-mobile-table-card__title {
		width: 100%;
		max-width: 100%;
		padding: 15px 16px;
		background: #173E3A;
		color: #FFFFFF;
		font-size: 17px;
		line-height: 1.4;
		font-weight: 700;
		overflow-wrap: anywhere;
		word-break: normal;
	}

	.ov-mobile-table-card__title a,
	.ov-mobile-table-card__title a:visited {
		color: inherit;
	}

	.ov-mobile-table-card__row {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 20px;
		width: 100%;
		max-width: 100%;
		padding: 13px 16px;
		border-bottom: 1px solid rgba(23, 62, 58, 0.10);
	}

	.ov-mobile-table-card__row:last-child {
		border-bottom: 0;
	}

	.ov-mobile-table-card__label {
		flex: 1 1 52%;
		min-width: 0;
		font-size: 14px;
		line-height: 1.5;
		font-weight: 500;
		color: #5F625F;
		overflow-wrap: anywhere;
	}

	.ov-mobile-table-card__value {
		flex: 1 1 48%;
		min-width: 0;
		font-size: 15px;
		line-height: 1.5;
		font-weight: 700;
		text-align: left;
		color: #173E3A;
		overflow-wrap: anywhere;
	}

	.ov-mobile-table-card__value img,
	.ov-mobile-table-card__value video,
	.ov-mobile-table-card__value svg,
	.ov-mobile-table-card__title img,
	.ov-mobile-table-card__title video,
	.ov-mobile-table-card__title svg {
		max-width: 100%;
		height: auto;
	}

	/* Manual override: keep the Gutenberg table and allow touch scrolling. */
	.wp-block-table.ov-mobile-scroll {
		display: block !important;
		width: 100%;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.wp-block-table.ov-mobile-scroll table {
		min-width: 650px;
	}
}
