/**
 * VK Wiki — share row, single term page and the Instagram dialog.
 *
 * Scoped to the plugin's own classes so the theme is left alone.
 */

.vk-wiki-single,
.vk-wiki-share,
.vk-wiki-modal {
	--vk-primary: #001f4e;
	--vk-accent: #ceab7a;
	--vk-secondary: #90639a;
	--vk-badge-bg: #67502f;
	--vk-badge-text: #ffffff;
	--vk-card-bg: #ffffff;
	--vk-card-border: #dddddd;
	--vk-text: #2d2d2d;
	--vk-text-light: #4a4a4a;
	--vk-nav-bg: #f5f2ec;
	--vk-radius: 4px;
	--vk-shadow: 0 1px 3px rgba( 0, 0, 0, 0.06 );
}

/* Without this, an <a> button and a <button> of the same declared size end up
   different heights, because only the button defaults to border-box. */
.vk-wiki-share,
.vk-wiki-share *,
.vk-wiki-single,
.vk-wiki-single *,
.vk-wiki-modal,
.vk-wiki-modal * {
	box-sizing: border-box;
}

.vk-wiki-single .vk-wiki-sr-only,
.vk-wiki-share .vk-wiki-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/* Single term ------------------------------------------------------------ */

.vk-wiki-single .vk-wiki-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0 0 1.25rem;
}

.vk-wiki-single .vk-wiki-badge {
	display: inline-block;
	padding: 0.25rem 0.7rem;
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.5;
	color: var( --vk-badge-text );
	text-decoration: none;
	background-color: var( --vk-badge-bg );
	border-radius: 999px;
}

.vk-wiki-single a.vk-wiki-badge:hover,
.vk-wiki-single a.vk-wiki-badge:focus {
	opacity: 0.85;
}

.vk-wiki-single .vk-wiki-single-description {
	font-size: 1.1rem;
	line-height: 1.7;
	color: var( --vk-text );
}

.vk-wiki-single .vk-wiki-single-description blockquote {
	margin: 1rem 0;
	padding: 0.25rem 0 0.25rem 1rem;
	font-style: italic;
	border-left: 3px solid var( --vk-accent );
}

.vk-wiki-single .vk-wiki-single-source {
	margin: 1.5rem 0 0;
	font-size: 0.9rem;
	color: var( --vk-text-light );
}

.vk-wiki-single .vk-wiki-source-link {
	color: var( --vk-secondary );
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.vk-wiki-single .vk-wiki-source-link:hover,
.vk-wiki-single .vk-wiki-source-link:focus {
	border-bottom-color: currentColor;
}

.vk-wiki-single .vk-wiki-external {
	margin-left: 0.2rem;
	font-size: 0.85em;
}

.vk-wiki-single .vk-wiki-source-date::before {
	margin: 0 0.4rem;
	content: "\00b7";
}

.vk-wiki-single .vk-wiki-single-back {
	margin: 1.75rem 0 0;
	font-size: 0.9rem;
}

.vk-wiki-single .vk-wiki-single-back a {
	color: var( --vk-secondary );
	text-decoration: none;
}

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

.vk-wiki-share {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: center;
	margin: 1.75rem 0 0;
}

.vk-wiki-share-label {
	font-size: 0.85rem;
	font-weight: 600;
	color: var( --vk-text-light );
}

.vk-wiki-share-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0;
	margin: 0;
	list-style: none;
}

.vk-wiki-share-list li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vk-wiki-share-list::before,
.vk-wiki-share-list li::before {
	content: none;
}

.vk-wiki-share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.35rem;
	height: 2.35rem;
	padding: 0;
	color: var( --vk-primary );
	cursor: pointer;
	background-color: var( --vk-nav-bg );
	border: 1px solid var( --vk-card-border );
	border-radius: 999px;
	box-shadow: none;
	transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.vk-wiki-share-btn:hover,
.vk-wiki-share-btn:focus {
	color: #fff;
	background-color: var( --vk-primary );
	border-color: var( --vk-primary );
	transform: translateY( -1px );
}

.vk-wiki-share-btn.is-facebook:hover,
.vk-wiki-share-btn.is-facebook:focus {
	background-color: #1877f2;
	border-color: #1877f2;
}

.vk-wiki-share-btn.is-x:hover,
.vk-wiki-share-btn.is-x:focus {
	background-color: #000;
	border-color: #000;
}

.vk-wiki-share-btn.is-whatsapp:hover,
.vk-wiki-share-btn.is-whatsapp:focus {
	background-color: #25d366;
	border-color: #25d366;
}

.vk-wiki-share-btn.is-instagram:hover,
.vk-wiki-share-btn.is-instagram:focus {
	background: linear-gradient( 45deg, #f09433, #dc2743 45%, #bc1888 );
	border-color: #dc2743;
}

.vk-wiki-share-btn:focus-visible {
	outline: 2px solid var( --vk-accent );
	outline-offset: 2px;
}

.vk-wiki-share-icon {
	display: block;
	pointer-events: none;
}

.vk-wiki-share-feedback {
	font-size: 0.82rem;
	color: var( --vk-text-light );
}

/* Share row inside the glossary list ------------------------------------- */

.vk-wiki-glossary .vk-wiki-share-list {
	gap: 0.35rem;
}

.vk-wiki-glossary .vk-wiki-share {
	margin-top: 0.9rem;
}

.vk-wiki-glossary .vk-wiki-share-btn {
	width: 2rem;
	height: 2rem;
}

.vk-wiki-glossary .vk-wiki-share-icon {
	width: 16px;
	height: 16px;
}

/* Instagram dialog ------------------------------------------------------- */

.vk-wiki-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.vk-wiki-modal[hidden] {
	display: none;
}

.vk-wiki-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, 0.6 );
}

.vk-wiki-modal-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	width: min( 30rem, 100% );
	max-height: 92vh;
	padding: 1.5rem;
	overflow-y: auto;
	color: var( --vk-text );
	background: var( --vk-card-bg );
	border-radius: calc( var( --vk-radius ) * 2 );
	box-shadow: 0 12px 40px rgba( 0, 0, 0, 0.25 );
}

.vk-wiki-modal-title {
	margin: 0 2rem 0 0;
	font-size: 1.15rem;
	line-height: 1.3;
	color: var( --vk-primary );
}

.vk-wiki-modal .vk-wiki-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/* Capped so the caption and the actions stay in view without scrolling. */
.vk-wiki-modal-image {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: min( 38vh, 20rem );
	height: auto;
	margin: 0 auto;
	background: var( --vk-nav-bg );
	border: 1px solid var( --vk-card-border );
	border-radius: var( --vk-radius );
}

.vk-wiki-modal-caption {
	width: 100%;
	min-height: 5.5rem;
	padding: 0.6rem;
	font-family: inherit;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var( --vk-text );
	resize: vertical;
	background: #fff;
	border: 1px solid var( --vk-card-border );
	border-radius: var( --vk-radius );
}

/* One row of icon buttons: they never wrap onto a second line. */
.vk-wiki-modal-actions {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	justify-content: flex-start;
}

.vk-wiki-modal-btn {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 2.6rem;
	height: 2.6rem;
	padding: 0;
	font-family: inherit;
	color: var( --vk-primary );
	text-decoration: none;
	cursor: pointer;
	background: var( --vk-nav-bg );
	border: 1px solid var( --vk-card-border );
	border-radius: var( --vk-radius );
	transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.vk-wiki-modal-btn svg {
	display: block;
	width: 20px;
	height: 20px;
	pointer-events: none;
}

.vk-wiki-modal-btn.is-primary {
	color: #fff;
	background: var( --vk-primary );
	border-color: var( --vk-primary );
}

.vk-wiki-modal-btn.is-instagram:hover,
.vk-wiki-modal-btn.is-instagram:focus {
	color: #fff;
	background: linear-gradient( 45deg, #f09433, #dc2743 45%, #bc1888 );
	border-color: #dc2743;
}

.vk-wiki-modal-btn:hover,
.vk-wiki-modal-btn:focus {
	border-color: var( --vk-accent );
}

.vk-wiki-modal-btn[hidden] {
	display: none;
}

.vk-wiki-modal-btn:focus-visible,
.vk-wiki-modal-close:focus-visible {
	outline: 2px solid var( --vk-accent );
	outline-offset: 2px;
}

.vk-wiki-modal-close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	color: var( --vk-text-light );
	cursor: pointer;
	background: transparent;
	border: 0;
	border-radius: 50%;
}

.vk-wiki-modal-close svg {
	display: block;
	width: 16px;
	height: 16px;
	pointer-events: none;
}

.vk-wiki-modal-close:hover,
.vk-wiki-modal-close:focus {
	background: rgba( 0, 0, 0, 0.06 );
}

.vk-wiki-modal-status {
	margin: 0;
	font-size: 0.82rem;
	color: var( --vk-text-light );
}

@media ( prefers-reduced-motion: reduce ) {
	.vk-wiki-share-btn {
		transition: none;
	}
}