/**
 * 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. Type and text colour are the theme's.
 *
 * What a theme may want to change is a variable on .vanam-proofs-box:
 *
 *   --vanam-accent        links and focus; the theme's own by default
 *   --vanam-radius        corners of the cards and bubbles
 *   --vanam-line          the hairlines
 *   --vanam-wait / --vanam-wait-bg     waiting for an answer
 *   --vanam-ok / --vanam-ok-bg         approved
 *   --vanam-no / --vanam-no-bg         rejected
 *
 * The three buttons have their own, set from Settings -> Proofs:
 * --vanam-reject, --vanam-reject-ink, --vanam-message, --vanam-message-ink. */

.vanam-proofs-box,
.vanam-account-proofs {
	--vanam-accent: currentColor;
	--vanam-radius: 6px;
	--vanam-line: rgba( 0, 0, 0, 0.12 );
	--vanam-wait: #6b4b00;
	--vanam-wait-bg: #fcf0d4;
	--vanam-ok: #1e4620;
	--vanam-ok-bg: #dcebdc;
	--vanam-no: #7a1c17;
	--vanam-no-bg: #f6dedc;
}

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

.vanam-proofs-box__summary {
	margin: -0.5em 0 1em;
	opacity: 0.85;
}

.vanam-proof-card {
	margin: 0 0 1em;
	border: 1px solid var( --vanam-line );
	border-radius: var( --vanam-radius );
}

/* Themes size buttons and fields in every way there is. Measured to their
   border, a full-width one is as wide as its column and no wider. */
.vanam-proof-card button,
.vanam-proof-card textarea,
.vanam-proof-card input[type="file"] {
	box-sizing: border-box;
	max-width: 100%;
}

/* Closed, a card is this one line; open, it is the heading of what follows. */
.vanam-proof-card__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4em 0.9em;
	padding: 0.9em 1.1em;
	cursor: pointer;
	list-style: none;
}

.vanam-proof-card__head::-webkit-details-marker {
	display: none;
}

.vanam-proof-card[open] > .vanam-proof-card__head {
	border-bottom: 1px solid var( --vanam-line );
}

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

.vanam-proof-card__status {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.1em 0.7em;
	border-radius: 999px;
	font-size: 0.85em;
	font-weight: 600;
	white-space: nowrap;
}

.vanam-proof-card__status::before {
	content: "";
	width: 0.45em;
	height: 0.45em;
	border-radius: 50%;
	background: currentColor;
}

.vanam-proof-card__status.is-waiting {
	background: var( --vanam-wait-bg );
	color: var( --vanam-wait );
}

.vanam-proof-card__status.is-changes {
	background: var( --vanam-no-bg );
	color: var( --vanam-no );
}

.vanam-proof-card__status.is-approved {
	background: var( --vanam-ok-bg );
	color: var( --vanam-ok );
}

.vanam-proof-card__version {
	font-size: 0.9em;
	opacity: 0.75;
}

/* The round button at the end of the line that says "this opens". */
.vanam-proof-card__chevron {
	display: grid;
	place-items: center;
	width: 1.9em;
	height: 1.9em;
	margin-left: auto;
	border: 1px solid var( --vanam-line );
	border-radius: 50%;
}

.vanam-proof-card__chevron::before {
	content: "";
	width: 0.45em;
	height: 0.45em;
	margin-top: -0.2em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate( 45deg );
}

.vanam-proof-card[open] > .vanam-proof-card__head .vanam-proof-card__chevron::before {
	margin-top: 0.2em;
	transform: rotate( -135deg );
}

/* The file's kind, where there is no picture of it to show. */
.vanam-proof-card__type {
	display: inline-grid;
	place-items: center;
	min-width: 2.6em;
	height: 2.6em;
	padding: 0 0.3em;
	border-radius: 4px;
	background: rgba( 0, 0, 0, 0.06 );
	font-size: 0.7em;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.vanam-proof-card__type:empty {
	display: none;
}

.vanam-proof-card__type--lg {
	min-width: 4em;
	height: 4em;
	font-size: 1em;
}

.vanam-proof-card__body {
	padding: 1.1em;
}

.vanam-proof-card__saved,
.vanam-proof-card__error {
	margin: 0 0 1em;
	padding: 0.6em 0.9em;
	border-radius: var( --vanam-radius );
	font-weight: 600;
}

.vanam-proof-card__saved {
	background: var( --vanam-ok-bg );
	color: var( --vanam-ok );
}

.vanam-proof-card__error {
	background: var( --vanam-no-bg );
	color: var( --vanam-no );
}

/* The file on one side, the answer on the other; one under the other when
   there is no room for both. */
.vanam-proof-card__top {
	display: grid;
	grid-template-columns: minmax( 0, 1.25fr ) minmax( 0, 1fr );
	gap: 1.5em;
	align-items: start;
}

@media ( max-width: 720px ) {
	.vanam-proof-card__top {
		grid-template-columns: minmax( 0, 1fr );
	}
}

.vanam-proof-card__preview {
	position: relative;
	display: block;
	overflow: hidden;
	border: 1px solid var( --vanam-line );
	border-radius: var( --vanam-radius );
	cursor: zoom-in;
}

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

.vanam-proof-card__preview--file {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6em;
	padding: 2em 1em;
	text-decoration: none;
	cursor: pointer;
}

.vanam-proof-card__preview-name {
	overflow-wrap: anywhere;
	text-align: center;
}

.vanam-proof-card__zoom {
	position: absolute;
	right: 0.6em;
	bottom: 0.6em;
	padding: 0.15em 0.7em;
	border-radius: 999px;
	background: rgba( 0, 0, 0, 0.7 );
	color: #fff;
	font-size: 0.8em;
}

.vanam-proof-card__current {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.3em 1em;
	margin: 0.6em 0 0;
	font-size: 0.9em;
}

.vanam-proof-card__file-line {
	min-width: 0;
	overflow-wrap: anywhere;
	opacity: 0.75;
}

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

.vanam-proof-card__intro {
	margin: 0 0 1em;
	opacity: 0.8;
}

.vanam-proof-card__banner {
	display: flex;
	flex-direction: column;
	gap: 0.15em;
	margin: 0 0 1em;
	padding: 0.8em 1em;
	border-radius: var( --vanam-radius );
}

.vanam-proof-card__banner.is-approved {
	background: var( --vanam-ok-bg );
	color: var( --vanam-ok );
}

.vanam-proof-card__banner.is-changes {
	background: var( --vanam-no-bg );
	color: var( --vanam-no );
}

/* What the shop last said, repeated where the answer is given. */
.vanam-proof-card__note {
	margin: 0 0 1em;
	padding: 0.7em 0.9em;
	border-radius: var( --vanam-radius );
	background: rgba( 0, 0, 0, 0.04 );
}

.vanam-proof-card__note-meta {
	display: block;
	margin-bottom: 0.2em;
	font-size: 0.85em;
	opacity: 0.7;
}

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

.vanam-proof-card__older {
	margin: 1em 0 0;
	font-size: 0.9em;
	opacity: 0.85;
}

.vanam-proof-card__form {
	margin: 0;
}

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

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

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

.vanam-proof-card__upload-error {
	color: var( --vanam-no );
	font-weight: 600;
}

.vanam-proof-card__upload-error:empty {
	display: none;
}

/* The customer's own files. The browser's file field is the plainest thing on
   any page and takes no styling; a label opens it just as well, and a label
   can look like the page's other buttons. Only with the script, which is what
   lists the files chosen -- without it the field itself is the list. */
.vanam-proofs-box.has-js .vanam-proof-card__file-input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	clip: rect( 0, 0, 0, 0 );
}

.vanam-proofs-box:not( .has-js ) .vanam-proof-card__pick {
	display: none;
}

.vanam-proof-card__upload {
	position: relative;
	align-items: flex-start;
}

.vanam-proof-card__pick {
	display: inline-block;
	padding: 0.55em 1.1em;
	border-radius: 3px;
	background: var( --vanam-message, #e2e4e7 );
	color: var( --vanam-message-ink, #1d2327 );
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
}

.vanam-proof-card__pick:hover {
	filter: brightness( 0.92 );
}

.vanam-proof-card__file-input:focus-visible + .vanam-proof-card__pick {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.vanam-proof-card__picked {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3em 0.8em;
	font-size: 0.9em;
}

.vanam-proof-card__picked:empty {
	display: none;
}

.vanam-proof-card__picked-item {
	overflow-wrap: anywhere;
}

.vanam-proof-card__unpick {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

/* How far the files have got. */
.vanam-proof-card__progress {
	margin: 0 0 0.8em;
}

.vanam-proof-card__progress-bar {
	display: block;
	height: 6px;
	overflow: hidden;
	border-radius: 999px;
	background: var( --vanam-line );
}

.vanam-proof-card__progress-bar > span {
	display: block;
	width: 0;
	height: 100%;
	background: currentColor;
	transition: width 0.15s linear;
}

.vanam-proof-card__progress-text {
	display: block;
	margin-top: 0.3em;
	font-size: 0.9em;
}

/* While files go up nothing else on the cards can be pressed. */
.vanam-proofs-box.is-busy .vanam-proof-card__pick,
.vanam-proofs-box.is-busy button {
	opacity: 0.55;
	pointer-events: none;
}

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

/* The two answers, one under the other and as wide as their column: they are
   the reason the card is there. */
.vanam-decide__choose {
	flex-direction: column;
	align-items: stretch;
}

.vanam-decide__choose button {
	width: 100%;
}

/* The second step of an answer. Without scripting it is simply shown, under
   the two buttons, and they submit it; the confirmation and its own buttons
   are the script's, and wait for it. */
.vanam-decide:not( .is-enhanced ) .vanam-decide__confirm,
.vanam-decide:not( .is-enhanced ) .vanam-decide__go,
.vanam-decide.is-enhanced:not( .is-step ) .vanam-decide__step,
.vanam-decide.is-step .vanam-decide__choose,
.vanam-decide.is-step[data-step="changes"] .vanam-decide__confirm {
	display: none;
}

.vanam-decide:not( .is-enhanced ) .vanam-decide__step {
	margin-top: 1em;
}

.vanam-decide__confirm {
	margin: 0 0 0.8em;
}

.vanam-decide__confirm label {
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
	cursor: pointer;
}

.vanam-decide__confirm input {
	flex: none;
	margin-top: 0.3em;
}

.vanam-decide__cancel {
	padding: 0.3em 0.5em;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

/* The conversation, under a rule: a different thing from the answer. */
.vanam-proof-card__talk {
	margin-top: 1.4em;
	padding-top: 1.2em;
	border-top: 1px solid var( --vanam-line );
}

.vanam-proof-card__talk-title {
	margin: 0 0 0.8em;
	font-size: 1em;
}

.vanam-proof-card__write {
	margin-top: 1em;
}

/* 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 because themes force white
   text on every button: an outline button would otherwise be invisible. */
.vanam-proof-card .vanam-proof-card__actions button.vanam-proof-card__changes {
	border: 2px solid var( --vanam-reject, currentColor ) !important;
	background: transparent !important;
	color: var( --vanam-reject, inherit ) !important;
}

/* 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, currentColor ) !important;
	color: var( --vanam-reject-ink, #fff ) !important;
}

.vanam-proof-card .vanam-proof-card__actions button.vanam-proof-card__message {
	border-color: var( --vanam-message, #e2e4e7 ) !important;
	background: var( --vanam-message, #e2e4e7 ) !important;
	color: var( --vanam-message-ink, #1d2327 ) !important;
}

/* A filled button darkens on hover, whatever its colour. The same for a
   custom Approve, which no longer has the theme's own hover to fall back on. */
.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.92 );
}

/* The conversation -------------------------------------------------------
 *
 * What happened is a small centred line. What was said is a bubble: the
 * customer's own on the right, the shop's on the left. */

.vanam-thread {
	display: flex;
	flex-direction: column;
	gap: 0.7em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vanam-thread > li {
	margin: 0;
}

/* Themes give every paragraph in the page a bottom margin -- often a large
   one -- and inside a bubble the last of them would hold the bubble open. */
.vanam-thread p,
.vanam-proof-card__note-text p {
	margin: 0 0 0.4em;
}

.vanam-thread p:last-child,
.vanam-proof-card__note-text p:last-child {
	margin-bottom: 0;
}

.vanam-thread__event {
	align-self: center;
	font-size: 0.85em;
	text-align: center;
	opacity: 0.75;
}

.vanam-thread__event strong {
	font-weight: 600;
}

.vanam-thread__event.is-approved,
.vanam-thread__event.is-auto_approved {
	color: var( --vanam-ok );
	opacity: 1;
}

.vanam-thread__event.is-changes {
	color: var( --vanam-no );
	opacity: 1;
}

.vanam-thread__sep {
	margin: 0 0.25em;
	opacity: 0.5;
}

.vanam-thread__msg {
	max-width: 85%;
}

.vanam-thread__msg.is-mine {
	align-self: flex-end;
}

/* No avatars here: there are only two parties and each has a side. */
.vanam-thread__avatar {
	display: none;
}

.vanam-thread__bubble {
	padding: 0.6em 0.9em;
	border-radius: var( --vanam-radius, 6px );
	background: rgba( 0, 0, 0, 0.05 );
}

.vanam-thread__msg.is-mine .vanam-thread__bubble {
	background: #1d2327;
	color: #fff;
}

.vanam-thread__msg.is-mine .vanam-thread__bubble a {
	color: inherit;
}

.vanam-thread__msg.is-new .vanam-thread__bubble {
	box-shadow: 0 0 0 2px var( --vanam-wait-bg, #fcf0d4 );
}

.vanam-thread__meta {
	margin-bottom: 0.2em;
	font-size: 0.85em;
	opacity: 0.75;
}

.vanam-thread__meta .vanam-thread__author {
	font-weight: 700;
}

.vanam-thread__text {
	overflow-wrap: anywhere;
}

.vanam-thread__files {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
	margin: 0.5em 0 0;
	padding: 0;
	list-style: none;
}

.vanam-thread__bubble > .vanam-thread__files:first-child {
	margin-top: 0;
}

.vanam-thread__files li {
	margin: 0;
}

.vanam-thread__file {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4em;
	padding: 0.15em 0.6em;
	border: 1px solid var( --vanam-line, rgba( 0, 0, 0, 0.12 ) );
	border-radius: 4px;
	background: #fff;
	color: #1d2327;
	font-size: 0.9em;
	text-decoration: none;
}

.vanam-thread__file .vanam-thread__file-name {
	text-decoration: underline;
}

/* Heavier than a theme's rule for links in the page's content, which would
   underline the type and the size along with the name. */
.vanam-thread .vanam-thread__files a.vanam-thread__file {
	text-decoration: none;
}

.vanam-thread__file .vanam-file-meta {
	color: #50575e;
}

.vanam-thread__msg.is-mine .vanam-thread__bubble a.vanam-thread__file {
	color: #1d2327;
}

.vanam-thread__removed {
	font-size: 0.85em;
	font-style: italic;
	opacity: 0.8;
}

.vanam-thread__divider {
	display: flex;
	align-items: center;
	gap: 0.6em;
	font-size: 0.75em;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	opacity: 0.7;
}

.vanam-thread__divider::before,
.vanam-thread__divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var( --vanam-line, rgba( 0, 0, 0, 0.12 ) );
}

/* A picture opened over the page. */
.vanam-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: grid;
	place-items: center;
	padding: 4vmin;
	background: rgba( 0, 0, 0, 0.82 );
	cursor: zoom-out;
}

.vanam-lightbox img {
	max-width: 100%;
	max-height: 100%;
	background: #fff;
	box-shadow: 0 4px 30px rgba( 0, 0, 0, 0.5 );
}

.vanam-lightbox__close {
	position: absolute;
	top: 0.4em;
	right: 0.6em;
	padding: 0.1em 0.4em;
	border: 0;
	background: none;
	color: #fff;
	font-size: 2em;
	line-height: 1;
	cursor: pointer;
}

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