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

/* Proofs: files the customer is asked to approve ------------------------
 *
 * Layout and the few colours that carry meaning -- the status, and whose
 * message is whose. Everything else is the theme's. */

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

.vanam-proof-card {
	margin: 0 0 1.5em;
	padding: 1em 1.25em;
	border: 1px solid rgba( 0, 0, 0, 0.12 );
	border-radius: 4px;
}

.vanam-proof-card__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em 1em;
	margin: 0 0 0.75em;
}

.vanam-proof-card__name {
	margin: 0;
	font-size: 1.1em;
}

.vanam-proof-card__status {
	padding: 0.1em 0.6em;
	border-radius: 3px;
	font-size: 0.85em;
	font-weight: 600;
}

.vanam-proof-card__status.is-waiting {
	background: #fcf0d4;
	color: #6b4b00;
}

.vanam-proof-card__status.is-changes {
	background: #f2d7d5;
	color: #7a1c17;
}

.vanam-proof-card__status.is-approved {
	background: #d5e5d5;
	color: #1e4620;
}

.vanam-proof-card__preview img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 0 0.5em;
}

.vanam-proof-card__current {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em 1em;
	margin: 8px 0 0;
}

/* Room between the file and the conversation under it: the button sat right
   on top of the first message. */
.vanam-proof-card__file {
	margin: 0 0 1.5em;
}

.vanam-proof-card__version {
	opacity: 0.75;
}

.vanam-proof-card__auto {
	margin: 0 0 1em;
	font-style: italic;
}

.vanam-proof-card__saved {
	color: #1e4620;
}

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

.vanam-proof-card__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.vanam-proof-card__field textarea {
	width: 100%;
}

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

.vanam-proof-card__upload-error {
	color: #7a1c17;
	font-weight: 600;
}

.vanam-proof-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

/* Three buttons, two weights. Approve is the theme's own button, full;
   Reject is the same button in outline, so the two read as the pair of
   answers they are; Send message is grey, because it answers nothing -- it
   is there for the conversation. Selectors heavier than WooCommerce's
   ".woocommerce button.button", and !important on the colours: themes set the
   text colour of every button with rules no selector here can outweigh, and
   an outline button with white text on a white page is no button at all.
   Reject takes the theme's button colour from the page (proofs.js); this
   dark grey is what it shows until then, or without scripts. Each colour can
   be set on the Proofs settings tab. */
.vanam-proof-card .vanam-proof-card__actions button.vanam-proof-card__changes {
	border: 2px solid var(--vanam-reject, #1d2327) !important;
	background: transparent !important;
	color: var(--vanam-reject, #1d2327) !important;
	transition: background-color 0.2s, color 0.2s, filter 0.2s;
}

/* The outline fills on hover, the way an outline button tells you it is one. */
.vanam-proof-card .vanam-proof-card__actions button.vanam-proof-card__changes:hover,
.vanam-proof-card .vanam-proof-card__actions button.vanam-proof-card__changes:focus-visible {
	background: var(--vanam-reject, #1d2327) !important;
	color: var(--vanam-reject-ink, #fff) !important;
}

.vanam-proof-card .vanam-proof-card__actions button.vanam-proof-card__message {
	border: 2px solid var(--vanam-message, #6b7280) !important;
	background: var(--vanam-message, #6b7280) !important;
	color: var(--vanam-message-ink, #fff) !important;
	transition: filter 0.2s;
}

/* A filled button darkens on hover, whatever its colour. The same for a
   custom Approve colour, which takes the theme's own hover away. */
.vanam-proof-card .vanam-proof-card__actions button.vanam-proof-card__message:hover,
.vanam-proof-card .vanam-proof-card__actions button.vanam-proof-card__message:focus-visible,
.vanam-proof-card .vanam-proof-card__actions.has-custom-approve button.vanam-proof-card__approve:hover,
.vanam-proof-card .vanam-proof-card__actions.has-custom-approve button.vanam-proof-card__approve:focus-visible {
	filter: brightness(0.85);
}

.vanam-thread {
	margin: 1em 0;
	padding: 0;
	list-style: none;
}

.vanam-thread__item {
	margin: 0 0 0.75em;
	padding: 0.6em 0.9em;
	border-left: 3px solid rgba( 0, 0, 0, 0.15 );
	background: rgba( 0, 0, 0, 0.03 );
}

/* The customer's own messages lean the other way, the way every chat does:
   which side a message sits on says who wrote it before anything is read. */
.vanam-thread__item.is-mine {
	margin-left: 2em;
	border-left-color: #2271b1;
}

.vanam-thread__item.is-approved,
.vanam-thread__item.is-auto_approved {
	border-left-color: #00a32a;
}

.vanam-thread__item.is-changes {
	border-left-color: #d63638;
}

.vanam-thread__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin-bottom: 15px;
	font-size: 0.85em;
	font-style: italic;
	opacity: 0.8;
}

/* Themes give every paragraph in the page a bottom margin -- often a large
   one -- and inside a message it pulls each line apart from the next. The
   thread spaces its own lines. Scoped to the thread, so the rest of the page
   keeps the theme's rhythm. */
.vanam-thread p,
.vanam-proof-card__file p {
	margin-bottom: 0;
}

.vanam-thread__author {
	font-weight: 600;
}

.vanam-thread__new {
	padding: 0 0.4em;
	border-radius: 3px;
	background: #2271b1;
	color: #fff;
}

.vanam-thread__event {
	margin: 0;
	font-weight: 600;
}

.vanam-thread__text {
	margin-top: 0.25em;
}

.vanam-thread__text p:last-child {
	margin-bottom: 0;
}

.vanam-thread__files {
	margin: 0.4em 0 0;
	padding: 0;
	list-style: none;
}

.vanam-thread__files li {
	margin: 0;
}

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