/*
 * Order window and the price bar on the dress tiles of the home page.
 * Desktop (mouse): the bar slides in at the bottom of the tile on hover.
 * Phone and tablet (touch): js/order.js shows and hides the bar while scrolling.
 */

/* ---------- Bar on the tile ---------- */
.dmd-tile-bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px 14px;
	padding: 10px 12px;
	background: #fff;
	color: #1c1c1c;
	font-family: Montserrat, sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4em;
	white-space: nowrap;
	transform: translateY(100%);
	visibility: hidden;
	transition: transform .3s ease-in-out, visibility 0s .3s;
	/* A click beside the button goes through to the tile link */
	pointer-events: none;
}
.dmd-tile-bar .dmd-btn { pointer-events: auto; }
.dmd-tile-bar .dmd-btn-text { padding: 10px 22px; }
.dmd-tile-bar.is-visible,
.dmd-tile:focus-within .dmd-tile-bar {
	transform: none;
	visibility: visible;
	transition: transform .3s ease-in-out, visibility 0s;
}
@media (hover: hover) and (pointer: fine) {
	.dmd-tile:hover .dmd-tile-bar { transform: none; visibility: visible; transition: transform .3s ease-in-out, visibility 0s; }
}
@media (max-width: 360px) {
	.dmd-tile-bar { gap: 10px; font-size: 13px; }
	.dmd-tile-bar .dmd-btn-text { padding: 9px 16px; }
}

/* ---------- Order window ---------- */
.dmd-order[hidden] { display: none; }
.dmd-order { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; }
.dmd-order-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); }
.dmd-order-box {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 520px;
	max-height: 100%;
	overflow-y: auto;
	padding: 45px 40px 40px;
	background: #fff;
	text-align: center;
	outline: none;
	animation: dmd-order-in .25s ease-out;
}
@keyframes dmd-order-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.dmd-order-box h3 { margin: 0 0 15px; }
.dmd-order-text { margin: 0 0 25px; }
.dmd-order-close { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; padding: 0; border: 0; background: none; cursor: pointer; }
.dmd-order-close::before, .dmd-order-close::after { content: ""; position: absolute; top: 17px; left: 8px; width: 20px; height: 2px; background: #4b4b55; transition: background-color .15s ease-out; }
.dmd-order-close::before { transform: rotate(45deg); }
.dmd-order-close::after { transform: rotate(-45deg); }
.dmd-order-close:hover::before, .dmd-order-close:hover::after { background: var(--pink); }
html.dmd-order-open { overflow: hidden; }

/* Form (Contact Form 7). Fields get a thin line because the box is white */
.dmd-order-form p { margin: 0; }
.dmd-order-form .dmd-order-row { display: flex; gap: 10px; }
.dmd-order-form .dmd-order-row > * { flex: 1 1 0; min-width: 0; }
.dmd-order-form .wpcf7-form-control-wrap { display: block; margin: 0 0 12px; }
.dmd-order-form .wpcf7-form-control.wpcf7-text { margin: 0; border: 1px solid #ededed; color: #333; }
.dmd-order-form .wpcf7-form-control.wpcf7-text:focus { border-color: #c7c7c9; }
.dmd-order-form .wpcf7-form-control.wpcf7-text[readonly] { background-color: #f6f6f6; color: #4b4b55; }
.dmd-order-form input.wpcf7-form-control.wpcf7-submit { margin: 8px 0 0; }
.dmd-order-form .wpcf7-not-valid-tip { font-size: 12px; text-align: left; margin-top: 4px; }
.dmd-order-form form { position: relative; }
.dmd-order-form .wpcf7-spinner { position: absolute; right: 0; bottom: 10px; margin: 0; }
.dmd-order-form .wpcf7 form .wpcf7-response-output,
.dmd-order .wpcf7 form .wpcf7-response-output { margin: 20px 0 0; }
/* 16 px: smaller text makes phones zoom into the page when a field is focused */
@media (max-width: 768px) { .dmd-order-form .wpcf7-form-control.wpcf7-text { font-size: 16px; } }
@media (max-width: 480px) {
	.dmd-order { padding: 10px; }
	.dmd-order-box { padding: 40px 20px 25px; }
	.dmd-order-form .dmd-order-row { display: block; }
}