/*
 * ImageVault Pro — pieces shared by the public image page and the public album:
 * the share row, copy buttons that swap to a check, the password card and the
 * "hosted on" credit. Banner slots live in components.css.
 */

/* Share row ---------------------------------------------------------------- */

.ivp-app .ivp-share-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ivp-sp-2);
}

.ivp-app .ivp-share-row__btn {
	--ivp-share-fill: var(--ivp-grad-primary);
	display: inline-grid;
	place-items: center;
	width: var(--ivp-tap);
	height: var(--ivp-tap);
	padding: 0;
	border: 1px solid var(--ivp-border);
	border-radius: var(--ivp-r-full);
	color: var(--ivp-text-muted);
	background: var(--ivp-surface);
	cursor: pointer;
	text-decoration: none;
}

.ivp-app .ivp-share-row__btn .ivp-icon {
	width: 1.125rem;
	height: 1.125rem;
}

.ivp-app .ivp-share-row__btn:hover,
.ivp-app .ivp-share-row__btn:focus-visible {
	border-color: transparent;
	color: var(--ivp-on-primary);
	background: var(--ivp-share-fill);
}

.ivp-app .ivp-share-row__btn--facebook { --ivp-share-fill: var(--ivp-grad-ocean); }
.ivp-app .ivp-share-row__btn--reddit { --ivp-share-fill: var(--ivp-grad-sunset); }
.ivp-app .ivp-share-row__btn--pinterest { --ivp-share-fill: var(--ivp-grad-candy); }
.ivp-app .ivp-share-row__btn--whatsapp { --ivp-share-fill: var(--ivp-grad-forest); }
.ivp-app .ivp-share-row__btn--email,
.ivp-app .ivp-share-row__btn--native { --ivp-share-fill: var(--ivp-grad-aurora); }

/* Copy buttons: the copy icon gives way to a check while .ivp-done is set (ui.js). */

.ivp-app .ivp-copy-done {
	display: none;
}

.ivp-app .ivp-done .ivp-copy-icon {
	display: none;
}

.ivp-app .ivp-done .ivp-copy-done {
	display: inline-block;
	color: var(--ivp-success);
}

.ivp-app .ivp-btn--primary.ivp-done .ivp-copy-done,
.ivp-app .ivp-share-row__btn.ivp-done:hover .ivp-copy-done {
	color: currentColor;
}

/* Password card ------------------------------------------------------------ */

.ivp-app .ivp-lock {
	position: relative;
	z-index: 1;
	width: min(100%, 26rem);
	margin: var(--ivp-sp-8) auto;
	padding: var(--ivp-sp-8) var(--ivp-sp-5);
	text-align: center;
}

.ivp-app .ivp-lock__art {
	width: min(100%, 13rem);
	margin: 0 auto var(--ivp-sp-4);
}

.ivp-app .ivp-lock__art svg {
	display: block;
	width: 100%;
	height: auto;
}

.ivp-app .ivp-lock__title {
	margin: 0;
	font-size: var(--ivp-fs-2xl);
	line-height: var(--ivp-lh-tight);
	letter-spacing: var(--ivp-ls-tight);
}

.ivp-app .ivp-lock__text {
	margin: var(--ivp-sp-2) 0 var(--ivp-sp-6);
}

.ivp-app .ivp-lock__form {
	display: grid;
	gap: var(--ivp-sp-4);
	text-align: start;
}

/* Credit ------------------------------------------------------------------- */

.ivp-app .ivp-credits {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ivp-sp-3) var(--ivp-sp-4);
	margin-top: var(--ivp-sp-6);
	padding: var(--ivp-sp-4) var(--ivp-sp-5);
	border: 1px dashed var(--ivp-border-strong);
	border-radius: var(--ivp-r-xl);
	background: var(--ivp-surface-2);
}

.ivp-app .ivp-credits__text {
	flex: 1 1 14rem;
	margin: 0;
	font-size: var(--ivp-fs-sm);
	color: var(--ivp-text-muted);
}

@media (prefers-reduced-motion: no-preference) {
	.ivp-app .ivp-share-row__btn {
		transition: transform var(--ivp-dur-fast) var(--ivp-ease-spring), background var(--ivp-dur-fast) var(--ivp-ease), color var(--ivp-dur-fast) var(--ivp-ease);
	}

	.ivp-app .ivp-share-row__btn:hover {
		transform: translateY(-2px) scale(1.06);
	}

	.ivp-app .ivp-lock__art {
		animation: ivp-float 6s var(--ivp-ease-in-out) infinite;
	}
}