/**
 * 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-product-attachments__section[hidden],
.vanam-attachments-box__list[hidden] {
	display: none;
}

/* In the product summary, beside the price and the cart button rather than in
   a tab: a little air above and below, and the heading at body size so it does
   not compete with the product's own title. */
.vanam-product-attachments--summary {
	margin: 1.5em 0;
}

.vanam-product-attachments__title {
	margin: 0 0 0.75em;
	font-size: 1em;
}

/* The block's note in the editor when it has nothing to draw. */
.vanam-block-placeholder {
	margin: 0;
	padding: 12px 16px;
	border: 1px dashed rgba( 128, 128, 128, 0.5 );
	border-radius: 4px;
	font-size: 0.9em;
	opacity: 0.8;
}

/* Sections: "Manuals", "Certificates". A heading at body size over each
   group; folded ones open with a click on it. */
.vanam-product-attachments__section {
	margin: 1.5em 0 0;
}

.vanam-product-attachments > .vanam-product-attachments__section:first-child,
.vanam-product-attachments__title + .vanam-product-attachments__section {
	margin-top: 0;
}

.vanam-product-attachments__section-title {
	margin: 0 0 0.75em;
	font-size: 1em;
	font-weight: 600;
}

summary.vanam-product-attachments__section-title {
	cursor: pointer;
}

details.vanam-product-attachments__section:not([open]) > .vanam-product-attachments__section-title {
	margin-bottom: 0;
}

/* The compact list: one file per line, the button at the end of it. Cards
   suit a few files with descriptions; a list suits many, and fits beside the
   price where a grid of cards would not.

   No display rule anywhere here: the items are hidden and shown by the
   variation script with [hidden], and a display rule would beat it. */
.vanam-product-attachments--list .vanam-attachments-box__list {
	grid-template-columns: 1fr;
	gap: 0;
}

.vanam-product-attachments--list .vanam-attachment-item {
	flex-direction: row;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-width: 0 0 1px;
	border-radius: 0;
}

.vanam-product-attachments--list .vanam-attachment-item__details {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
}

.vanam-product-attachments--list .vanam-attachment-item__description {
	flex-basis: 100%;
}

.vanam-product-attachments--list .vanam-attachment-item__preview img {
	width: 48px;
	max-width: 48px;
	height: 48px;
	object-fit: cover;
}

.vanam-product-attachments--list .vanam-attachment-item__button {
	margin: 0 0 0 auto;
	align-self: center;
	white-space: nowrap;
}

.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;
}

/* Type and size under the name: "PDF · 2.4 MB".

   The one place this file sets a colour, and only on the type: a customer
   scanning a list for "the PDF" finds it by colour before reading. Everything
   else -- the frame, the size -- takes the theme's own text colour, faded, so
   the label sits on a dark theme as well as a light one. */
.vanam-file-meta {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 6px;
	padding: 1px 8px;
	border: 1px solid rgba( 128, 128, 128, 0.35 );
	border-radius: 999px;
	font-size: 0.8em;
	line-height: 1.6;
	white-space: nowrap;
}

.vanam-file-meta__type {
	font-weight: 700;
	letter-spacing: 0.03em;
}

.vanam-file-meta__sep,
.vanam-file-meta__size {
	opacity: 0.75;
}

.vanam-file-meta--pdf .vanam-file-meta__type     { color: #c62828; }
.vanam-file-meta--doc .vanam-file-meta__type     { color: #1e63b5; }
.vanam-file-meta--sheet .vanam-file-meta__type   { color: #1b7a3a; }
.vanam-file-meta--slides .vanam-file-meta__type  { color: #c25b00; }
.vanam-file-meta--image .vanam-file-meta__type   { color: #7b3fb0; }
.vanam-file-meta--audio .vanam-file-meta__type,
.vanam-file-meta--video .vanam-file-meta__type   { color: #00796b; }

/* 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;
}