/* ==========================================================================
   MMX / QUICK ORDER WITH MULTIPLE RECIPIENTS
   ========================================================================== */
.mmx-quick-order-multiple-recipients {
	--mmx-quick-order-multiple-recipients-input-height: 50px;
	--mmx-quick-order-multiple-recipients-dialog-close-size: 32px;
}

:focus-visible,
:focus:is(.mmx-quick-order-multiple-recipients__search-result) {
	outline: 2px solid var(--mmx-color-focus);
}

slot[name="title"]::slotted(*) {
	margin: 0 auto 3%;
}


/* Content
  =========================================== */
.mmx-quick-order-multiple-recipients__content {
  display: flex;
  justify-content: space-between;
  gap: 30px;
}

@media screen and (max-width: 39.999em) {
  .mmx-quick-order-multiple-recipients__content {
    display: flex;
    flex-direction: column;
  }
}



/* Summary
  =========================================== */
.mmx-quick-order-multiple-recipients__summary {
  border: 1px solid black;
  padding: 25px 20px;
  height: fit-content;
}

.mmx-quick-order-multiple-recipients__summary-list {
  padding: 0;
  list-style: none;
}

.mmx-quick-order-multiple-recipients__summary-item {
  display: flex;
  justify-content: space-between;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 10px;
}

@media screen and (min-width: 40em) {
  .mmx-quick-order-multiple-recipients__summary-container {
    flex-basis: 30%;
    max-width: 30%;
  }
}

/* Form
  =========================================== */
.mmx-quick-order-multiple-recipients__form {
	display: grid;
	gap: var(--mmx-spacing-m);
	position: relative;
  background-color: #F4F4F4;
  padding: 30px 25px;
  border-radius: 5px;
}

@media screen and (min-width: 40em) {
  .mmx-quick-order-multiple-recipients__form {
    flex-basis: 60%;
    max-width: 60%;
  }
}

.mmx-quick-order-multiple-recipients__add-row {
  padding: 20px 15px;
	justify-self: center;
}

.mmx-quick-order-multiple-recipients__add-parent-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mmx-quick-order-multiple-recipients__add-parent-row-select {
  border: 1px solid var(--mmx-color-grey-02);
  border-radius: var(--mmx-spacing-xs);
  height: 100%;
  width: fit-content;
  padding: 8.5px 24px;
}

.mmx-quick-order-multiple-recipients__add-to-cart {
	justify-self: end;
  width: 100%;
}

/* Actions
  =========================================== */
.mmx-quick-order-multiple-recipients__actions {
	text-align: center;
	display: flex;
	gap: var(--mmx-spacing-m);
	justify-content: center;
}

/* Dialog
  =========================================== */
.mmx-quick-order-multiple-recipients__dialog {
	border-radius: var(--mmx-spacing-s);
	border: 0;
	box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.15);
	outline: 0;
	padding: var(--mmx-spacing-m);
}

@media screen and (min-width: 40em) {
	.mmx-quick-order-multiple-recipients__dialog {
		max-width: 80vw;
		min-width: 50vw;
	}
}

.mmx-quick-order-multiple-recipients__dialog::backdrop {
	background: rgba(0, 0, 0, 0.8);
}

/* Dialogs
  =========================================== */
.mmx-quick-order-multiple-recipients__bulk-container,
.mmx-quick-order-multiple-recipients__csv-container {
	display: grid;
}

.mmx-quick-order-multiple-recipients__load-bulk,
.mmx-quick-order-multiple-recipients__load-csv {
	justify-self: right;
	margin-top: var(--mmx-spacing-m);
}

.mmx-quick-order-multiple-recipients__dialog-close {
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0;
	position: absolute;
	right: var(--mmx-spacing-m);
	top: var(--mmx-spacing-m);
	border-radius: 100%;
	width: var(--mmx-quick-order-multiple-recipients-dialog-close-size);
	height: var(--mmx-quick-order-multiple-recipients-dialog-close-size);
}

.mmx-quick-order-multiple-recipients__dialog-close-icon {
	font-size: var(--mmx-quick-order-multiple-recipients-dialog-close-size);
}

.mmx-quick-order-multiple-recipients__dialog-close:hover,
.mmx-quick-order-multiple-recipients__dialog-close:focus {
	color: var(--mmx-color-grey-05);
}

.mmx-quick-order-multiple-recipients__bulk-textarea {
	margin-top: var(--mmx-spacing-m);
	min-height: 10em;
	resize: vertical;
}

.mmx-quick-order-multiple-recipients__csv-file {
	margin-top: var(--mmx-spacing-m);
	margin-bottom: var(--mmx-spacing-s);
}

/* Rows
  =========================================== */
.mmx-quick-order-multiple-recipients__row-container {
	display: grid;
	gap: var(--mmx-spacing-m);
}

.mmx-quick-order-multiple-recipients__row {
	align-items: center;
	border-radius: var(--mmx-spacing-xs);
	border: 1px solid var(--mmx-color-grey-02);
	display: grid;
	gap: 0 var(--mmx-spacing-xs);
	grid-template-areas:
		"input quantity remove"
		"results results results"
		"product product product"
		"status status status";
	grid-template-columns: 1fr 60px max-content;
	padding: var(--mmx-spacing-xs);
}

@media screen and (min-width: 40em) {
	.mmx-quick-order-multiple-recipients__row {
		grid-template-areas:
			"input quantity remove"
			"results empty empty"
			"product product product"
			"status status status";
		grid-template-columns: 1fr 100px max-content;
	}
}

.mmx-quick-order-multiple-recipients__search-input {
	grid-area: input;
}

.mmx-quick-order-multiple-recipients__quantity {
	grid-area: quantity;
}

@media screen and (max-width: 39.999em) {
	.mmx-quick-order-multiple-recipients__quantity {
		text-align: center;
		padding-left: var(--mmx-spacing-xs);
		padding-right: var(--mmx-spacing-xs);
	}

	.mmx-quick-order-multiple-recipients__quantity::-webkit-outer-spin-button,
	.mmx-quick-order-multiple-recipients__quantity::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}
}

.mmx-quick-order-multiple-recipients__remove {
	grid-area: remove;
}

.mmx-quick-order-multiple-recipients__remove-icon {
	font-size: 16px;
}

.mmx-quick-order-multiple-recipients__remove::part(button) {
	height: var(--mmx-quick-order-multiple-recipients-input-height);
	width: var(--mmx-quick-order-multiple-recipients-input-height);
	padding: 0;
}

/* Parent Rows
  =========================================== */
.mmx-quick-order-multiple-recipients__parent-row-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.mmx-quick-order-multiple-recipients__parent-row-body {

}

.mmx-quick-order-multiple-recipients__type {
  display: inline-block;
  text-wrap: nowrap;
}

.mmx-quick-order-multiple-recipients__remove-recipient {
  margin-left: auto;
}

.mmx-quick-order-multiple-recipients__recipient-first-name,
.mmx-quick-order-multiple-recipients__recipient-last-name,
.mmx-quick-order-multiple-recipients__recipient-address {
  margin: 0 15px;
}

.mmx-quick-order-multiple-recipients__recipient-address {
  background-color: var(--mmx-color-white);
  border-radius: var(--mmx-spacing-xs);
  border: 1px solid var(--mmx-color-grey-02);
  display: inline-block;
  font-family: inherit;
  font-size: 0.8125rem;
  line-height: 1;
  padding: calc(1.35em - 1px) calc(1.7em - 1px);
  width: 100%;
  height: var(--mmx-quick-order-multiple-recipients-input-height);
}


/* Elements
  =========================================== */
[hidden] {
	display: none;
}

input,
textarea {
	appearance: none;
	background-color: var(--mmx-color-white);
	border-radius: var(--mmx-spacing-xs);
	border: 1px solid var(--mmx-color-grey-02);
	display: inline-block;
	font-family: inherit;
	font-size: 0.8125rem;
	line-height: 1;
	padding: calc(1.35em - 1px) calc(1.7em - 1px);
	width: 100%;
	height: var(--mmx-quick-order-multiple-recipients-input-height);
}

a[target="_blank"]::after {
	content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==");
	margin-left: 0.25em;
}

/* Search Results
  =========================================== */
.mmx-quick-order-multiple-recipients__search-results-container {
	background: white;
	border-radius: var(--mmx-spacing-xs);
	border: 1px solid var(--mmx-color-grey-02);
	box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.15);
	display: grid;
	gap: var(--mmx-spacing-m);
	grid-area: results;
	max-height: 50vh;
	margin-bottom: var(--mmx-spacing-xs);
	overflow-y: auto;
	padding: var(--mmx-spacing-s);
}

.mmx-quick-order-multiple-recipients__search-results-container:empty {
	display: none;
}

.mmx-quick-order-multiple-recipients__search-result {
	background: #ffffff;
	border: none;
	border-radius: var(--mmx-spacing-xs);
	padding: var(--mmx-spacing-s);
	text-align: left;
}

.mmx-quick-order-multiple-recipients__search-result.has-image {
	grid-template-columns: min(35%, var(--mmx-quick-order-multiple-recipients__image-width)) 1fr;
	display: grid;
	gap: 0 var(--mmx-spacing-s);
}

.mmx-quick-order-multiple-recipients__search-result-image {
	width: 100%;
	height: auto;
	justify-self: center;
	aspect-ratio: var(--mmx-quick-order-multiple-recipients__image-aspect-ratio);
	object-fit: var(--mmx-quick-order-multiple-recipients__image-fit);
	object-position: top;
}

.mmx-quick-order-multiple-recipients__search-results-container .mmx-quick-order-multiple-recipients__search-result {
	cursor: pointer;
}

.mmx-quick-order-multiple-recipients__search-results-container .mmx-quick-order-multiple-recipients__search-result:is(:hover, :active) {
	background: var(--mmx-color-grey-01);
}

[class*="mmx-quick-order-multiple-recipients__search-result-inv-level"] {
	color: var(--mmx-color-success-text);
}

.mmx-quick-order-multiple-recipients__search-result-inv-level--low {
	color: var(--mmx-color-warning-text);
}

.mmx-quick-order-multiple-recipients__search-result-inv-level--out {
	color: var(--mmx-color-error-text);
}

/* Selected Product
  =========================================== */
.mmx-quick-order-multiple-recipients__selected-product {
	grid-area: product;
}

mmx-featured-product {
	padding: var(--mmx-spacing-s);
}

mmx-featured-product::part(wrapper) {
	gap: var(--mmx-spacing-s);
	flex-direction: row;
}

mmx-featured-product::part(product-content) {
	flex-basis: 100%;
}

mmx-featured-product::part(image-slider),
mmx-featured-product::part(product-content) {
	margin: 0;
}

mmx-featured-product::part(image-slider) {
	flex-basis: calc(var(--mmx-spacing-s) + var(--mmx-quick-order-multiple-recipients__image-width));
}

mmx-featured-product::part(product-name) {
	--mmx-text__inner--max-width: auto;

	margin-bottom: var(--mmx-spacing-xs);
}

mmx-featured-product::part(pricing-discounts) {
	margin-bottom: var(--mmx-spacing-xs);
}

mmx-featured-product::part(inventory-message) {
	background: none;
	border: 0;
	font-size: var(--mmx-product-price-size);
	margin-bottom: var(--mmx-spacing-xs);
	max-width: none;
	padding: 0;
}

mmx-featured-product::part(current-price),
mmx-featured-product::part(original-price) {
	font-size: var(--mmx-product-price-size);
}

mmx-featured-product::part(discounts) {
	margin-top: var(--mmx-spacing-xs);
}

mmx-featured-product::part(product-attributes) {
	margin-top: var(--mmx-spacing-m);
	margin-bottom: 0;
}

mmx-featured-product::part(product-attribute) {
	margin-bottom: var(--mmx-spacing-xs);
}

mmx-featured-product::part(product-add-to-cart) {
	display: none;
}

/* Status Message
  =========================================== */
.mmx-quick-order-multiple-recipients__status-message:empty {
	display: none;
}

.mmx-quick-order-multiple-recipients__status-message {
	grid-area: status;
}

.mmx-quick-order-multiple-recipients__status-message mmx-icon {
	height: 20px;
}

.mmx-quick-order-multiple-recipients__row[data-status="success"] {
	border-color: var(--mmx-color-success-border);
}

.mmx-quick-order-multiple-recipients__row[data-status="info"] {
	border-color: var(--mmx-color-grey-03);
}

.mmx-quick-order-multiple-recipients__row[data-status="warning"] {
	border-color: var(--mmx-color-warning-border);
}

.mmx-quick-order-multiple-recipients__row[data-status="error"] {
	border-color: var(--mmx-color-error-border);
}

.mmx-quick-order-multiple-recipients__row[data-status="success"] .mmx-quick-order-multiple-recipients__status-message {
	color: var(--mmx-color-success-text);
}

.mmx-quick-order-multiple-recipients__row[data-status="info"] .mmx-quick-order-multiple-recipients__status-message {
	color: var(--mmx-color-grey-05);
}

.mmx-quick-order-multiple-recipients__row[data-status="warning"] .mmx-quick-order-multiple-recipients__status-message {
	color: var(--mmx-color-warning-text);
}

.mmx-quick-order-multiple-recipients__row[data-status="error"] .mmx-quick-order-multiple-recipients__status-message {
	color: var(--mmx-color-error-text);
}