/**
 * @title VTA Print Preview - Styles
 * @description Front-end styles for the business card proof preview page.
 */

.bc-preview-image {
	display: block;
	margin: 0 auto 1rem;
	max-width: 100%;
}

.bc-preview-button-container {
	display: flex;
	justify-content: center;
	margin-top: 1.5rem;
	gap: 1rem;
}

.bc-preview-back {
	padding: 0.5rem 1.5rem;
}

.bc-preview-unauthorized-header,
.bc-preview-unauthorized-content {
	text-align: center;
}

/**
Business Card Preview Modal Wrapper
-  container to make Preview modal position relative to this container.
*/
div.vta-preview-img-wrapper {
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.4);
	z-index: 99999;
	animation: fadeIn 0.5s;
}

/**
Business Card Preview Modal
- z-index should be above all elements
- darken background
- Fix the position of the element
 */
div.vta-preview-img {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 1rem;
	left: 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: scroll;
	display: flex;
	padding-top: 14rem;
}

/**
Business Card Preview Image
- add drop shadow and margin
 */
img.bc-preview-image {
	margin: 1rem;
	box-shadow: var(--medium-box-shadow) !important;
	max-width: 768px !important;
	width: 85%;
}

/**
Business Card Preview Modal Button Container
 */
div.bc-preview-button-container {
	max-width: 768px;
	width: 85%;
	display: flex;
	justify-content: flex-end;
	margin-bottom: 5rem;
}