/**
 * Theme-specific Styles
 *
 * @package Pinpress
 */

/* Pin Modal */
.pin-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-lg);
}

.pin-modal.active {
	display: flex;
}

.modal-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--color-overlay);
	backdrop-filter: blur(4px);
	cursor: pointer;
}

.modal-container {
	position: relative;
	width: 100%;
	max-width: 1200px;
	max-height: 90vh;
	background-color: var(--color-background);
	border-radius: var(--border-radius);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	overflow: hidden;
	display: flex;
	z-index: 1;
	animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
	from {
		opacity: 0;
		transform: scale(0.9);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

.modal-close {
	position: absolute;
	top: var(--spacing-md);
	right: var(--spacing-md);
	z-index: 2;
	padding: var(--spacing-sm);
	background-color: rgba(255, 255, 255, 0.9);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	transition: all var(--transition-speed) ease;
	backdrop-filter: blur(4px);
}

.modal-close:hover {
	background-color: #ffffff;
	transform: scale(1.1);
}

.modal-close svg {
	display: block;
	color: var(--color-text);
}

.modal-content {
	width: 100%;
	overflow-y: auto;
}

/* Single Pin Layout */
.single-pin-article .pin-container {
	display: grid;
	grid-template-columns: 1fr 500px;
	gap: var(--spacing-xl);
	max-height: 90vh;
}

.pin-image-column {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-surface);
	overflow: hidden;
}

.pin-image-wrapper {
	max-width: 100%;
	max-height: 90vh;
}

.pin-image-wrapper .pin-image {
	width: 100%;
	height: auto;
	max-height: 90vh;
	object-fit: contain;
}

.pin-content-column {
	padding: var(--spacing-xl);
	overflow-y: auto;
}

/* Pin Header */
.pin-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--spacing-lg);
	padding-bottom: var(--spacing-lg);
	border-bottom: 1px solid var(--color-border);
}

.pin-save-button {
	min-width: 100px;
}

.pin-source {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-sm);
	font-size: var(--font-size-sm);
	color: var(--color-text-light);
	text-decoration: underline;
}

/* Pin Content */
.pin-content {
	margin-bottom: var(--spacing-lg);
}

.pin-title {
	margin-bottom: var(--spacing-md);
	font-size: 0.9375rem;
	line-height: 1.2;
}

.pin-description {
	color: var(--color-text);
	line-height: 1.6;
}

/* Pin Meta */
.pin-meta {
	margin-bottom: var(--spacing-lg);
	padding-bottom: var(--spacing-lg);
	border-bottom: 1px solid var(--color-border);
}

/* Pin Description in Single Page */
.pin-description {
	color: #211922; /* pin-text */
	line-height: 1.6;
	margin-bottom: 1.5rem;
	word-break: break-word;
	overflow-wrap: break-word;
	font-size: 1rem;
	display: block;
	visibility: visible;
	opacity: 1;
}

.dark .pin-description {
	color: #d1d5db;
}

.pin-description p {
	margin-bottom: 1rem;
	line-height: 1.6;
}

.pin-description strong {
	font-weight: 600;
	color: inherit;
}

.pin-description em {
	font-style: italic;
	color: inherit;
}

.pin-description a {
	color: var(--color-primary, #e60023);
	text-decoration: underline;
}

.pin-description a:hover {
	text-decoration: none;
}

.dark .pin-description a {
	color: #ef4444;
}

/* Prose styling for pin content */
.single-pin-article .prose {
	color: #211922; /* pin-text */
}

.single-pin-article .prose p {
	margin-bottom: 1rem;
	line-height: 1.6;
}

.single-pin-article .prose strong {
	font-weight: 600;
	color: #211922; /* pin-text */
}

.single-pin-article .prose em {
	font-style: italic;
	color: #211922; /* pin-text */
}

.single-pin-article .prose a {
	color: var(--color-primary, #e60023);
	text-decoration: underline;
}

.single-pin-article .prose a:hover {
	text-decoration: none;
}

.dark .single-pin-article .prose {
	color: #d1d5db;
}

.dark .single-pin-article .prose strong {
	color: #f3f4f6;
}

.dark .single-pin-article .prose a {
	color: #ef4444;
}

.pin-author {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	margin-bottom: var(--spacing-md);
}

.author-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
}

.author-info {
	display: flex;
	flex-direction: column;
}

.author-name {
	font-weight: 600;
	color: var(--color-text);
}

.pin-date {
	font-size: var(--font-size-sm);
	color: var(--color-text-light);
}

/* Pin Stats */
.pin-stats {
	display: flex;
	gap: var(--spacing-lg);
	margin-top: var(--spacing-md);
}

.stat-item {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	font-size: var(--font-size-sm);
	color: var(--color-text-light);
}

.stat-icon {
	font-size: 1.25rem;
}

.stat-count {
	font-weight: 600;
	color: var(--color-text);
}

/* Pin Boards & Tags */
.pin-boards,
.pin-tags {
	margin-bottom: var(--spacing-lg);
}

.pin-boards h3,
.pin-tags h3 {
	font-size: 1rem;
	font-weight: 600;
	margin-bottom: var(--spacing-sm);
}

.boards-list,
.tags-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-sm);
}

.board-tag,
.tag-item {
	display: inline-block;
	padding: var(--spacing-sm) var(--spacing-md);
	background-color: var(--color-surface);
	border-radius: 20px;
	font-size: var(--font-size-sm);
	color: var(--color-text);
	transition: all var(--transition-speed) ease;
}

.board-tag:hover,
.tag-item:hover {
	background-color: var(--color-border);
	transform: translateY(-2px);
}

/* Related Pins */
.related-pins {
	margin-top: var(--spacing-xl);
	padding: var(--spacing-xl) var(--spacing-lg);
	background-color: var(--color-surface);
}

.related-pins h2 {
	text-align: center;
	margin-bottom: var(--spacing-lg);
}

/* Comments */
.pin-comments {
	margin-top: var(--spacing-lg);
	padding-top: var(--spacing-lg);
	border-top: 1px solid var(--color-border);
}

/* Responsive Modal */
@media (max-width: 1024px) {
	.single-pin-article .pin-container {
		grid-template-columns: 1fr;
		max-height: none;
	}

	.pin-image-column {
		max-height: 50vh;
	}

	.pin-content-column {
		overflow-y: visible;
	}
}

@media (max-width: 768px) {
	.modal-container {
		max-width: 100%;
		max-height: 100vh;
		border-radius: 0;
	}

	.pin-content-column {
		padding: var(--spacing-lg);
	}

	.pin-title {
		font-size: 0.875rem;
	}
}

/* Full Page Single Pin */
.single-pin-main {
	padding: var(--spacing-xl) 0;
}

.single-pin-main .pin-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 var(--spacing-lg);
}

/* Loading State */
.loading {
	position: relative;
	pointer-events: none;
	opacity: 0.6;
}

.loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40px;
	height: 40px;
	margin: -20px 0 0 -20px;
	border: 4px solid var(--color-border);
	border-top-color: var(--color-primary);
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

/* Initial Page Loading Spinner */
.initial-loading-spinner {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 60px 0;
	width: 100%;
}

.initial-loading-spinner .spinner {
	width: 40px;
	height: 40px;
	border: 3px solid #e5e7eb;
	border-top-color: var(--color-primary, #e60023);
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

/* Grid Loading Spinner - for infinite scroll */
.grid-loading-spinner {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px 0;
	width: 100%;
}

.grid-loading-spinner .spinner {
	width: 32px;
	height: 32px;
	border: 3px solid #e5e7eb;
	border-top-color: var(--color-primary, #e60023);
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

/* Per-image Loading Spinner */
.pin-image-spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 5;
}

.pin-image-spinner .spinner {
	width: 24px;
	height: 24px;
	border: 2px solid #d1d5db;
	border-top-color: var(--color-primary, #e60023);
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
	.initial-loading-spinner .spinner,
	.grid-loading-spinner .spinner,
	.pin-image-spinner .spinner {
		border-color: #3a3a3c; /* pin-dark-border */
		border-top-color: var(--color-primary, #e60023);
	}
}

.dark .initial-loading-spinner .spinner,
.dark .grid-loading-spinner .spinner,
.dark .pin-image-spinner .spinner {
	border-color: #3a3a3c; /* pin-dark-border */
	border-top-color: var(--color-primary, #e60023);
}

/* Sticky Positioning Support */
.sticky {
	position: -webkit-sticky;
	position: sticky;
}

/* Flexbox min-height fix */
.min-h-0 {
	min-height: 0;
}

/* Comments Section - Sticky Form */
#comments-section {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

/* Sticky Comment Form Container */
#comments-section > .sticky {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 10;
	background-color: var(--color-background);
	padding-bottom: var(--spacing-md);
	border-bottom: 1px solid var(--color-border);
}

/* Dark mode background for sticky comment form — uses pin-dark-* tokens */
.dark #comments-section > .sticky {
	background-color: #1c1c1e; /* pin-dark-bg */
	border-bottom-color: #3a3a3c; /* pin-dark-border */
}

/* Comments List Scrolling */
#comments-list {
	height: 200px;
	overflow-y: auto;
	scroll-behavior: smooth;
	border-radius: 8px;
}

/* Comments List Spacing */
#comments-list .comment {
	scroll-margin-top: var(--spacing-lg);
}

/* Scrollbar Styling for Comments List */
#comments-list::-webkit-scrollbar {
	width: 8px;
}

#comments-list::-webkit-scrollbar-track {
	background-color: transparent;
}

#comments-list::-webkit-scrollbar-thumb {
	background-color: #d1d5db;
	border-radius: 4px;
	border: 2px solid transparent;
	background-clip: content-box;
}

#comments-list::-webkit-scrollbar-thumb:hover {
	background-color: #CDCDCD; /* pin-border */
}

/* Dark mode scrollbar */
.dark #comments-list::-webkit-scrollbar-thumb {
	background-color: #3a3a3c; /* pin-dark-border */
}

.dark #comments-list::-webkit-scrollbar-thumb:hover {
	background-color: #aeaeb2; /* pin-dark-muted */
}

/* Firefox scrollbar styling */
#comments-list {
	scrollbar-color: #d1d5db transparent;
	scrollbar-width: thin;
}

.dark #comments-list {
	scrollbar-color: #3a3a3c transparent; /* pin-dark-border */
}

/* Single Pin Article with New Layout */
.single-pin-article {
	display: flex;
	flex-direction: column;
}

/* Image Column Sticky on Desktop */
.single-pin-article .pin-image-column {
	position: -webkit-sticky;
	position: sticky;
	top: var(--spacing-md);
	align-self: start;
	z-index: 1;
}

/* Responsive Sticky Behavior - Remove on Mobile */
@media (max-width: 767px) {
	.single-pin-article .pin-image-column {
		position: relative !important;
		top: auto !important;
		align-self: auto !important;
	}

	#comments-section > .sticky {
		position: relative !important;
		top: auto !important;
	}
}

/* Tablet: Full sticky support */
@media (min-width: 768px) and (max-width: 1024px) {
	.single-pin-article {
		display: grid;
		grid-template-columns: 1fr 1.5fr;
		gap: var(--spacing-lg);
	}

	.single-pin-article .pin-image-column {
		position: -webkit-sticky;
		position: sticky;
		top: var(--spacing-md);
		align-self: start;
	}
}

/* Desktop: Full layout with sticky support */
@media (min-width: 1025px) {
	.single-pin-article {
		display: grid;
		grid-template-columns: 40% 60%;
		gap: var(--spacing-xl);
	}

	.single-pin-article .pin-image-column {
		position: -webkit-sticky;
		position: sticky;
		top: var(--spacing-md);
		align-self: start;
	}

	.single-pin-article .pin-content-column {
		display: flex;
		flex-direction: column;
		min-height: 0;
	}
}

/* Image Aspect Ratio Fix */
.single-pin-article .pin-image-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-surface);
	border-radius: var(--border-radius, 16px);
	overflow: hidden;
	max-height: min(600px, 80vh);
}

.single-pin-article .pin-image {
	width: 100%;
	height: auto;
	object-fit: contain;
	max-height: min(600px, 80vh);
	display: block;
}

/* Dark mode support for pin image container */
.dark .single-pin-article .pin-image-wrapper {
	background-color: #2c2c2e; /* pin-dark-surface */
}

/* Comments Section Flex Container */
.single-pin-article .pin-comments {
	display: flex;
	flex-direction: column;
	min-height: 0;
	flex-grow: 1;
	border-top: 1px solid var(--color-border);
	padding-top: var(--spacing-lg);
	margin-top: var(--spacing-lg);
}

.dark .single-pin-article .pin-comments {
	border-top-color: #3a3a3c; /* pin-dark-border */
}

/* Comment Form Expand/Collapse Animation */
#expanded-comment-form {
	transition: max-height 0.3s ease-out;
	overflow: hidden;
}

#expanded-comment-form.hidden {
	display: none;
}

/* Compact Comment Form Styles */
#comment-trigger {
	transition: all 0.3s ease;
	cursor: text;
}

#comment-trigger:focus {
	outline: none;
	border-color: var(--color-primary, #e60023);
}

.dark #comment-trigger {
	background-color: #2c2c2e; /* pin-dark-surface */
	color: #f2f2f7; /* pin-dark-text */
}

/* Comment Message Animation */
#comment-message {
	animation: slideDown 0.3s ease-out;
}

#comment-message.hidden {
	animation: slideUp 0.3s ease-out;
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slideUp {
	from {
		opacity: 1;
		transform: translateY(0);
	}
	to {
		opacity: 0;
		transform: translateY(-10px);
	}
}

/* Comment Count Badge */
#comment-count {
	font-weight: 600;
}

/* Load More Button Styles */
#load-more-comments-btn {
	transition: all 0.2s ease;
}

#load-more-comments-btn:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

#load-more-comments-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.dark #load-more-comments-btn:hover:not(:disabled) {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Submit Button Styles */
#submit-comment-btn {
	transition: all 0.2s ease;
}

#submit-comment-btn:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(230, 0, 35, 0.3);
}

#submit-comment-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Lazy Load Placeholder */
img[data-src] {
	opacity: 0;
	transition: opacity 0.3s ease;
}

img[data-src].loaded {
	opacity: 1;
}

/* ---------------------------------------------------------------------------
   Bulk uploader
   --------------------------------------------------------------------------- */

.pinpress-bulk-dropzone.is-dragging {
	border-color: var(--color-primary, #cc0000);
	background: rgba(204, 0, 0, 0.04);
}

.pinpress-bulk-summary[data-tone="warn"] { color: #96450f; }
.pinpress-bulk-summary[data-tone="ok"]   { color: #12655f; }

.pinpress-bulk-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1px;
	max-height: 22rem;
	overflow-y: auto;
}

.pinpress-bulk-item {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 8px 4px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	font-size: 14px;
}

.pinpress-bulk-thumb {
	width: 40px;
	height: 40px;
	border-radius: 8px;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.06);
	display: block;
}

.pinpress-bulk-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pinpress-bulk-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pinpress-bulk-state {
	font-size: 12px;
	white-space: nowrap;
	color: #767676;
}

.pinpress-bulk-item[data-status="done"] .pinpress-bulk-state     { color: #12655f; }
.pinpress-bulk-item[data-status="failed"] .pinpress-bulk-state,
.pinpress-bulk-item[data-status="rejected"] .pinpress-bulk-state { color: #b4152c; }

.pinpress-bulk-item[data-status="uploading"] .pinpress-bulk-thumb {
	animation: pinpress-bulk-pulse 1.2s ease-in-out infinite;
}

.pinpress-bulk-action {
	background: none;
	border: 0;
	padding: 4px 8px;
	font-size: 12px;
	font-weight: 600;
	color: var(--color-primary, #cc0000);
	cursor: pointer;
	border-radius: 4px;
}

.pinpress-bulk-action:hover { background: rgba(0, 0, 0, 0.05); }

@keyframes pinpress-bulk-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
	.pinpress-bulk-item[data-status="uploading"] .pinpress-bulk-thumb { animation: none; }
}

.dark .pinpress-bulk-item { border-bottom-color: rgba(255, 255, 255, 0.08); }
.dark .pinpress-bulk-thumb { background: rgba(255, 255, 255, 0.08); }
.dark .pinpress-bulk-action:hover { background: rgba(255, 255, 255, 0.08); }

/* ---------------------------------------------------------------------------
   Pin reactions
   --------------------------------------------------------------------------- */

.pinpress-reactions {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.pinpress-reactions-trigger {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 10px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	font-size: 15px;
	font-weight: 600;
	color: inherit;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.pinpress-reactions-trigger:hover { background: rgba(0, 0, 0, 0.06); }
.pinpress-reactions-trigger.is-mine { font-size: 20px; }

.pinpress-reactions-picker {
	position: absolute;
	/*
	 * Open downward. The action bar it lives in is a `sticky top-0 z-30`
	 * stacking context, so a picker opening upward slides under the sticky
	 * site header (z-40) and is covered by it - no z-index on the picker can
	 * escape the parent context. Opening below the trigger keeps the picker
	 * over the pin content, where nothing occludes it.
	 */
	top: calc(100% + 8px);
	left: 0;
	z-index: 40;
	display: flex;
	gap: 2px;
	padding: 6px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
	border: 1px solid rgba(0, 0, 0, 0.08);
}

/*
 * The picker is toggled via the `hidden` attribute (reactions.js). Because the
 * rule above sets `display: flex` with the same specificity as Tailwind's
 * `[hidden] { display: none }`, the later theme.css rule would win and leave the
 * picker permanently visible (the stray "empty box" beside the React button).
 * This higher-specificity guard restores the hidden state.
 */
.pinpress-reactions-picker[hidden] {
	display: none;
}

.pinpress-reaction {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 999px;
	background: transparent;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: transform 0.12s ease, background-color 0.12s ease;
}

.pinpress-reaction:hover  { transform: scale(1.25); }
.pinpress-reaction.is-mine { background: rgba(0, 0, 0, 0.08); }

.pinpress-reactions-faces {
	display: inline-flex;
	align-items: center;
}

.pinpress-reactions-face {
	font-size: 14px;
	margin-left: -4px;
	line-height: 1;
}

.pinpress-reactions-face:first-child { margin-left: 0; }

.pinpress-reactions-total {
	font-size: 14px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.pinpress-reactions-error {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	margin: 0;
	font-size: 12px;
	color: #b4152c;
	white-space: nowrap;
}

.dark .pinpress-reactions-trigger:hover { background: rgba(255, 255, 255, 0.1); }
.dark .pinpress-reactions-picker {
	background: #211922;
	border-color: rgba(255, 255, 255, 0.12);
}
.dark .pinpress-reaction.is-mine { background: rgba(255, 255, 255, 0.14); }

@media (prefers-reduced-motion: reduce) {
	.pinpress-reaction:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   Messenger
   --------------------------------------------------------------------------- */

.pinpress-messenger {
	display: grid;
	gap: 1px;
	background: rgba(0, 0, 0, 0.08);
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 24px;
	overflow: hidden;
	min-height: 60vh;
}

@media (min-width: 820px) {
	.pinpress-messenger { grid-template-columns: 320px minmax(0, 1fr); }
}

.pinpress-messenger-list,
.pinpress-messenger-thread {
	background: #fff;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.pinpress-messenger-title {
	margin: 0;
	padding: 20px 20px 12px;
	font-size: 20px;
	font-weight: 700;
}

.pinpress-conversations {
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	flex: 1;
}

.pinpress-conversation-button {
	width: 100%;
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	align-items: center;
	gap: 12px;
	padding: 12px 20px;
	border: 0;
	background: transparent;
	text-align: left;
	cursor: pointer;
}

.pinpress-conversation-button:hover { background: rgba(0, 0, 0, 0.04); }
.pinpress-conversation.is-active .pinpress-conversation-button { background: rgba(0, 0, 0, 0.06); }

.pinpress-conversation-avatar { border-radius: 999px; display: block; }

.pinpress-conversation-text { display: grid; gap: 2px; min-width: 0; }

.pinpress-conversation-name {
	font-weight: 600;
	font-size: 14px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pinpress-conversation-preview {
	font-size: 13px;
	color: #767676;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pinpress-conversation.is-unread .pinpress-conversation-name,
.pinpress-conversation.is-unread .pinpress-conversation-preview {
	color: #211922;
	font-weight: 700;
}

.pinpress-thread-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 20px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.pinpress-thread-avatar { border-radius: 999px; }
.pinpress-thread-name { font-weight: 700; text-decoration: none; color: inherit; }
.pinpress-thread-action {
	margin-left: auto;
	border: 0;
	background: none;
	font-size: 13px;
	font-weight: 600;
	color: #b4152c;
	cursor: pointer;
	padding: 6px 10px;
	border-radius: 999px;
}
.pinpress-thread-action:hover { background: rgba(0, 0, 0, 0.05); }

.pinpress-thread-messages {
	flex: 1;
	overflow-y: auto;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-height: 240px;
}

.pinpress-message {
	max-width: min(70%, 32rem);
	padding: 10px 14px;
	border-radius: 18px;
	background: #efefef;
	align-self: flex-start;
}

.pinpress-message[data-mine="true"] {
	align-self: flex-end;
	background: #cc0000;
	color: #fff;
}

.pinpress-message-body { margin: 0; font-size: 14.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }

.pinpress-message-time {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	opacity: 0.7;
	font-variant-numeric: tabular-nums;
}

.pinpress-message-pin {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
	color: inherit;
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
}

.pinpress-message-pin img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; }

.pinpress-thread-form {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	padding: 14px 20px;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.pinpress-thread-input {
	flex: 1;
	resize: none;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 20px;
	padding: 10px 14px;
	font: inherit;
	font-size: 14.5px;
	line-height: 1.4;
	max-height: 160px;
	background: #fff;
	color: inherit;
}

.pinpress-thread-send {
	border: 0;
	border-radius: 999px;
	padding: 10px 20px;
	background: #cc0000;
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
}

.pinpress-thread-send:hover { background: #a30000; }

.pinpress-messenger-empty {
	margin: auto;
	padding: 40px 20px;
	text-align: center;
	color: #767676;
	font-size: 14px;
}

.pinpress-thread-error {
	margin: 0;
	padding: 0 20px 14px;
	font-size: 13px;
	color: #b4152c;
}

.dark .pinpress-messenger { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.1); }
.dark .pinpress-messenger-list,
.dark .pinpress-messenger-thread { background: #211922; }
.dark .pinpress-conversation-button:hover { background: rgba(255, 255, 255, 0.06); }
.dark .pinpress-conversation.is-active .pinpress-conversation-button { background: rgba(255, 255, 255, 0.1); }
.dark .pinpress-conversation.is-unread .pinpress-conversation-name,
.dark .pinpress-conversation.is-unread .pinpress-conversation-preview { color: #f3ebe9; }
.dark .pinpress-thread-header,
.dark .pinpress-thread-form { border-color: rgba(255, 255, 255, 0.1); }
.dark .pinpress-message { background: rgba(255, 255, 255, 0.1); }
.dark .pinpress-thread-input { background: #171114; border-color: rgba(255, 255, 255, 0.15); }

/* ---------------------------------------------------------------------------
   Shoppable pins and ad slots
   --------------------------------------------------------------------------- */

.pinpress-shop-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 10;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.94);
	color: #211922;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
	pointer-events: none;
}

.pinpress-shop-badge.is-on-sale { background: #cc0000; color: #fff; }

/* WooCommerce renders a struck-through original beside the sale price. */
.pinpress-shop-badge del { opacity: 0.6; font-weight: 500; margin-right: 4px; }
.pinpress-shop-badge ins { text-decoration: none; }

.pinpress-ad {
	position: relative;
	overflow: hidden;
	border-radius: 16px;
	background: rgba(0, 0, 0, 0.03);
	padding: 12px;
	min-height: 120px;
}

.pinpress-ad-label {
	display: block;
	margin-bottom: 6px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #767676;
}

.pinpress-ad-pin { margin: 0 0 16px; }

.dark .pinpress-shop-badge { background: rgba(33, 25, 34, 0.94); color: #f3ebe9; }
.dark .pinpress-ad { background: rgba(255, 255, 255, 0.05); }

/* ---------------------------------------------------------------------------
   Room for the WordPress admin bar.

   The bar is fixed to the viewport, and so are the two things that sit at the
   top of this theme: the header is `position: sticky; top: 0` and the sidebar
   is `position: fixed; top: 0`. WordPress makes room for the bar by putting
   `margin-top: 32px` on <html>, which moves the document - and moves neither
   of these, because both are positioned against the viewport rather than the
   document. So the bar lands on top of them.

   Below 783px WordPress switches the bar to `position: absolute`, so it
   scrolls away with the page and there is nothing to make room for. Offsetting
   there would leave a 46px gap above the header the moment somebody scrolled,
   which is why the rules below stop at that breakpoint instead of swapping
   32px for 46px.
   --------------------------------------------------------------------------- */

@media screen and (min-width: 783px) {
	body.admin-bar .site-header {
		top: 32px;
	}

	body.admin-bar .sidebar-drawer {
		top: 32px;
	}
}

/*
 * The customiser preview and the block editor render the front end without
 * the bar, and `.admin-bar` is absent there, so neither rule applies and both
 * elements sit at zero. Nothing to special-case.
 */

/* ---------------------------------------------------------------------------
   The page ground.

   On a page built around one centred panel - create a pin, settings, sign in -
   everything was white on white, so the card had no edge and floated in a
   void. One step off white is enough; it needs no border or shadow once the
   ground behind it is a different colour.

   NOT on the feed. There the pins are the content and the page behind them
   should stay white: tinting it put a large flat grey field behind an empty
   grid, which reads as a mistake rather than as depth. The tint belongs to
   those templates, not to the site.

   Deliberately a token rather than a literal, because three different things
   want to agree on it: this rule, any panel that needs to sink INTO the page
   rather than sit on it, and a child theme that wants to move it.
   --------------------------------------------------------------------------- */

:root {
	--pinpress-page: #f7f7f7;
}

/*
 * The page stays white and the fields carry the tint instead.
 *
 * Tinting the page put the card in relief but left the form inconsistent
 * with itself: the dropzone and one or two inputs were already filled grey
 * while the rest were white with a border, so the panel read as two designs
 * sharing a page. Pinterest does the opposite of what I did first - white
 * ground, filled fields - and it is the better answer here for the same
 * reason: the thing you are about to type into is the thing that should
 * stand out, not the sheet it sits on.
 */
html:not(.dark) body.pinpress-panel-page :is(
	input[type="text"],
	input[type="url"],
	input[type="search"],
	input[type="email"],
	textarea
) {
	background-color: var(--pinpress-page);
	border-color: transparent;
}

html:not(.dark) body.pinpress-panel-page :is(
	input[type="text"],
	input[type="url"],
	input[type="search"],
	input[type="email"],
	textarea
):focus {
	background-color: #fff;
	border-color: var(--color-primary, #cc0000);
}

/*
 * The chrome stays white so it reads as a surface above the page. These carry
 * Tailwind's bg-white already; this only states the intent in one place, and
 * keeps the dark-mode utilities winning where they should.
 */
.site-header,
.sidebar-drawer {
	background-color: #fff;
}

.dark .site-header,
.dark .sidebar-drawer {
	background-color: inherit;
}

/*
 * Room for the admin bar in a viewport-height calculation.
 *
 * Anything sized against 100vh has the same problem the sticky header had:
 * the bar is fixed over the viewport and takes no space in it, so a height
 * of 100vh minus the header alone overflows by exactly the bar's 32px.
 */
@media screen and (min-width: 783px) {
	body.admin-bar .pinpress-scroll-area {
		height: calc(100vh - 80px - 32px);
	}
}

/*
 * Social login buttons (Nextend) in the auth modal and on the login and
 * register pages.
 *
 * Nextend ships its buttons at a fixed width, left-aligned inside the
 * container, which leaves them narrower than and out of line with the
 * theme's own Log in button. Stretch them to the full card width, give them
 * the same pill shape, and centre the label so the row reads as one set.
 */
.social-login-buttons .nsl-container,
.social-login-buttons .nsl-container .nsl-container-buttons {
	width: 100% !important;
	max-width: 100% !important;
	text-align: center;
}

.social-login-buttons .nsl-container .nsl-container-buttons {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	gap: 10px !important;
}

.social-login-buttons .nsl-container .nsl-container-buttons .nsl-button {
	width: 100% !important;
	max-width: 100% !important;
	border-radius: 9999px !important;
}

.social-login-buttons .nsl-container .nsl-button .nsl-button-label-container {
	flex: 1 1 auto !important;
	text-align: center !important;
}

/*
 * Auth cards (login/register modal and pages): a gentle type bump.
 *
 * The base UI runs at 14px, which reads a touch small in the roomy auth
 * card. Nudge the body text and inputs up one step without touching the
 * headings, so the modal matches the weight of the sales page.
 */
.pinpress-auth-card {
	font-size: 15px;
}

.pinpress-auth-card .text-sm {
	font-size: 0.95rem;
}

.pinpress-auth-card input:not([type="checkbox"]) {
	font-size: 15px;
}

/* ---------------------------------------------------------------------------
   Carousel (multi-image pin) — single-pin close-up
   Swipe is native via scroll-snap; carousel.js drives arrows, dots and count.
   --------------------------------------------------------------------------- */
.pinpress-carousel {
	position: relative;
	width: 100%;
}
.pinpress-carousel-track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	overscroll-behavior-x: contain;
}
.pinpress-carousel-track::-webkit-scrollbar { display: none; }
.pinpress-carousel-slide {
	flex: 0 0 100%;
	width: 100%;
	scroll-snap-align: center;
	scroll-snap-stop: always;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--pin-surface, rgba(0,0,0,0.03));
}
.pinpress-carousel-img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 70vh;
	object-fit: contain;
}
.pinpress-carousel-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	color: #211922;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
	cursor: pointer;
	z-index: 3;
	transition: background 0.15s ease, transform 0.1s ease, opacity 0.15s ease;
}
.pinpress-carousel-btn:hover { background: #fff; }
.pinpress-carousel-btn:active { transform: translateY(-50%) scale(0.94); }
.pinpress-carousel-prev { left: 12px; }
.pinpress-carousel-next { right: 12px; }
.pinpress-carousel-count {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	background: rgba(0, 0, 0, 0.65);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	padding: 5px 9px;
	border-radius: 999px;
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}
.pinpress-carousel-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 12px;
	z-index: 3;
	display: flex;
	gap: 6px;
	align-items: center;
	justify-content: center;
	pointer-events: auto;
}
.pinpress-carousel-dot {
	width: 7px;
	height: 7px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.55);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
	cursor: pointer;
	transition: width 0.18s ease, background 0.18s ease;
}
.pinpress-carousel-dot.is-active {
	width: 20px;
	background: #fff;
}
.pinpress-carousel-btn:focus-visible,
.pinpress-carousel-dot:focus-visible {
	outline: 2px solid var(--pin-focus, #0a66ff);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	.pinpress-carousel-track { scroll-behavior: auto; }
}

/* Card badge marking a pin as a multi-image carousel. */
.pin-carousel-badge {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	pointer-events: none;
}
.pin-carousel-badge svg { width: 15px; height: 15px; }