/**
 * Vault & Victory — Inquiry & Offers: STRUCTURAL CSS ONLY.
 *
 * This file exists to make the modal function — positioning, stacking, scroll locking and
 * show/hide. It deliberately makes almost no visual decisions.
 *
 * The brand look (cobalt/orange/gold, 3px black rules, zero radius, Big Shoulders display
 * type) belongs in the THEME stylesheet, where the rest of the design system already lives,
 * and is owned by the styling agent. Keeping it out of here means the plugin can be restyled
 * per-site without editing plugin code, and a theme update never fights a plugin update.
 */

/* Modal shell ------------------------------------------------------------ */

.vv-inq-modal[hidden] {
	display: none;
}

.vv-inq-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	overflow-y: auto;
	padding: 24px 16px;
}

.vv-inq-modal__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(15, 47, 107, 0.86);
	border: 0;
	cursor: pointer;
}

.vv-inq-modal__dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 560px;
	margin: auto;
	background: #fff;
}

.vv-inq-modal[data-vv-inq-modal="offer"] .vv-inq-modal__dialog {
	max-width: 600px;
}

.vv-inq-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.vv-inq-modal__title {
	margin: 0;
}

.vv-inq-modal__close {
	background: none;
	border: 0;
	cursor: pointer;
	line-height: 1;
}

/* Stop the page behind the modal scrolling under it. */
body.vv-inq-modal-open {
	overflow: hidden;
}

/* Modal contents --------------------------------------------------------- */

.vv-inq-card {
	display: flex;
	align-items: center;
	gap: 14px;
}

.vv-inq-card__media {
	flex: 0 0 52px;
	width: 52px;
}

.vv-inq-card__media img {
	display: block;
	width: 100%;
	height: auto;
}

.vv-inq-card__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.vv-inq-picks {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.vv-inq-pick {
	cursor: pointer;
	background: none;
}

/* Actions ---------------------------------------------------------------- */

.vv-inq-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.vv-inq-btn {
	flex: 1 1 auto;
	cursor: pointer;
	border: 0;
	/* A long product name must never push the button off a 375px screen. */
	min-width: 0;
}

/* Fluent Forms sits inside the modal; let it fill the width it is given. */
.vv-inq-form .frm-fluent-form,
.vv-inq-form .fluentform {
	width: 100%;
}

/* Success state ---------------------------------------------------------- */

.vv-inq-modal[data-vv-inq-state="sent"] .vv-inq-picks,
.vv-inq-modal[data-vv-inq-state="sent"] .vv-inq-hint,
.vv-inq-modal[data-vv-inq-state="sent"] .vv-inq-smallprint {
	display: none;
}