/**
 * The attachments box on the customer's order page.
 *
 * Kept to layout only. Colours, fonts and button styling come from the theme,
 * so the box looks like the rest of the shop instead of like a plugin.
 */

.vanam-attachments-box {
	margin: 2em 0;
}

.vanam-attachments-box__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 260px, 1fr ) );
	gap: 16px;
}

/* The fourth time this plugin has been caught by it, so it is written down
   here: [hidden] is only a rule in the browser's own stylesheet, and ANY author
   rule that sets display beats it. The rule right below sets display: flex on
   the item, which quietly cancelled every "hidden" the template and the script
   put on one.

   What it looked like: on a variable product the attachments appeared for an
   instant and then vanished. The server had marked the variation-specific ones
   hidden and they showed anyway -- that was the flash -- and then the script,
   counting nothing as visible, hid their container, which has no display rule
   of its own and so obeyed. Worse and quieter: once a variation was chosen, the
   attachments belonging to the OTHER variations stayed on screen too.

   Higher specificity than the class on its own, so no !important needed. */
.vanam-attachment-item[hidden],
.vanam-product-attachments[hidden],
.vanam-attachments-box__list[hidden] {
	display: none;
}

.vanam-attachment-item {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px;
	border: 1px solid currentColor;
	border-color: rgba( 128, 128, 128, 0.25 );
	border-radius: 4px;
}

.vanam-attachment-item__preview img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 3px;
}

.vanam-attachment-item__details {
	display: flex;
	flex-direction: column;
	gap: 8px;
	/* Pushes the button to the bottom so a row of cards lines up regardless of
	   how long each description is. */
	flex: 1;
}

.vanam-attachment-item__name {
	font-weight: 600;
	overflow-wrap: anywhere;
}

/* The description now carries formatting, so it is a container rather than a
   single paragraph: the spacing has to be tamed on whatever ends up inside it. */
.vanam-attachment-item__description {
	font-size: 0.9em;
}

.vanam-attachment-item__description > :first-child {
	margin-top: 0;
}

.vanam-attachment-item__description > :last-child {
	margin-bottom: 0;
}

.vanam-attachment-item__description ul,
.vanam-attachment-item__description ol {
	margin: 0.5em 0 0.5em 1.2em;
	padding: 0;
}

.vanam-attachment-item__button {
	margin-top: auto;
	align-self: flex-start;
}

/* Customer approval ----------------------------------------------------- */

.vanam-approval {
	margin: 10px 0;
}

.vanam-approval__saved {
	color: #1e4620;
}

.vanam-approval__error {
	color: #7a1c17;
	font-weight: 600;
}

.vanam-approval__choices {
	margin: 0 0 8px;
	padding: 0;
	border: 0;
}

.vanam-approval__choices legend {
	padding: 0;
	font-weight: 600;
}

.vanam-approval__choice {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-right: 12px;
}

.vanam-approval__feedback {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0 0 8px;
}

.vanam-approval__feedback textarea {
	width: 100%;
	max-width: 420px;
}

.vanam-approval__hint {
	font-size: 0.9em;
	opacity: 0.8;
}

.vanam-approval__answer-value.is-yes {
	color: #1e4620;
}

.vanam-approval__answer-value.is-no {
	color: #7a1c17;
}

/* The customer's own comment, played back to them. Pre-wrap because they
   typed it into a textarea and their line breaks were meant. */
.vanam-approval__feedback-given {
	white-space: pre-wrap;
	font-style: italic;
}

/* Extras: terms, limits and the copy button ------------------------------ */

.vanam-extras {
	margin: 8px 0;
}

.vanam-extras__terms {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin-bottom: 6px;
}

.vanam-extras__left {
	margin: 4px 0;
	font-size: 0.9em;
	opacity: 0.8;
}

.vanam-extras__left.is-spent {
	color: #7a1c17;
	font-weight: 600;
	opacity: 1;
}