/**
 * ShayariWave Code Sharing Box — Frontend Styles
 *
 * Palette below is an initial, editable estimate of ShayariWave's brand
 * feel (a warm rose/pink accent on clean white content, common to the
 * site's romantic-poetry ("Shayari") subject matter). Every color is a
 * CSS custom property so it can be fine-tuned from
 * Settings → ShayariWave Code Sharing without touching this file.
 */

:root {
	--sw-primary: #C6265E;
	--sw-primary-hover: #A81E4E;
	--sw-secondary: #FDF3F6;
	--sw-code-bg: #1E1B2E;
	--sw-code-bg-alt: #262239;
	--sw-border: #F0DCE4;
	--sw-button: #C6265E;
	--sw-text: #2B2230;
	--sw-text-light: #7A6E78;
	--sw-code-text: #EDE9F5;
	--sw-code-text-dim: #9A93B0;
	--sw-radius: 14px;
	--sw-font-size: 14px;
	--sw-code-padding: 20px;
	--sw-font-stack: Inter, Poppins, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--sw-mono-stack: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

/* ==========================================================================
   Code Box Container
   ========================================================================== */

.sw-code-box {
	position: relative;
	margin: 1.75em 0;
	background: #ffffff;
	border: 1px solid var(--sw-border);
	border-radius: var(--sw-radius);
	box-shadow: 0 4px 18px rgba(198, 38, 94, 0.06), 0 1px 3px rgba(43, 34, 48, 0.04);
	overflow: hidden;
	font-family: var(--sw-font-stack);
	max-width: 100%;
	box-sizing: border-box;
}

.sw-code-box * {
	box-sizing: border-box;
}

/* ==========================================================================
   Header
   ========================================================================== */

.sw-code-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 16px;
	background: var(--sw-secondary);
	border-bottom: 1px solid var(--sw-border);
}

.sw-code-language {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--sw-text);
	letter-spacing: 0.01em;
	min-width: 0;
}

.sw-code-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 6px;
	background: rgba(198, 38, 94, 0.1);
	color: var(--sw-primary);
	font-size: 11px;
	font-weight: 700;
	flex-shrink: 0;
}

.sw-code-lang-name {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sw-code-actions {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.sw-code-copy,
.sw-code-share {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 0 14px;
	border: 1px solid var(--sw-border);
	border-radius: calc(var(--sw-radius) - 6px);
	background: #ffffff;
	color: var(--sw-text);
	font-family: var(--sw-font-stack);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.12s ease;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

.sw-code-btn-icon {
	font-size: 13px;
	line-height: 1;
}

.sw-code-copy:hover,
.sw-code-share:hover {
	background: var(--sw-button);
	border-color: var(--sw-button);
	color: #ffffff;
}

.sw-code-copy:active,
.sw-code-share:active {
	transform: scale(0.96);
}

.sw-code-copy:focus-visible,
.sw-code-share:focus-visible {
	outline: 2px solid var(--sw-primary);
	outline-offset: 2px;
}

.sw-code-copy.sw-is-copied {
	background: #1E9E5A;
	border-color: #1E9E5A;
	color: #ffffff;
}

.sw-code-copy.sw-is-copied .sw-code-btn-icon::before {
	content: "\2713";
}

@keyframes sw-pop {
	0% { transform: scale(1); }
	40% { transform: scale(1.08); }
	100% { transform: scale(1); }
}

.sw-code-copy.sw-is-copied {
	animation: sw-pop 0.28s ease;
}

/* ==========================================================================
   Code Body
   ========================================================================== */

.sw-code-body {
	position: relative;
	background: var(--sw-code-bg);
	display: flex;
	align-items: stretch;
}

.sw-code-line-numbers {
	flex-shrink: 0;
	padding: var(--sw-code-padding) 0;
	padding-left: 16px;
	padding-right: 12px;
	color: var(--sw-code-text-dim);
	font-family: var(--sw-mono-stack);
	font-size: var(--sw-font-size);
	line-height: 1.7;
	text-align: right;
	user-select: none;
	border-right: 1px solid rgba(255, 255, 255, 0.08);
	background: var(--sw-code-bg-alt);
}

.sw-code-content {
	margin: 0;
	padding: var(--sw-code-padding);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	flex: 1;
	min-width: 0;
	border-radius: 0 0 var(--sw-radius) var(--sw-radius);
}

.sw-code-body--numbered .sw-code-content {
	border-radius: 0;
}

.sw-code-content code {
	display: block;
	color: var(--sw-code-text);
	font-family: var(--sw-mono-stack);
	font-size: var(--sw-font-size);
	line-height: 1.7;
	white-space: pre;
	background: none;
	padding: 0;
	border: none;
}

/* Hide the raw storage textarea entirely — it exists only so JS can
   read the exact original code for copying, never for display. */
.sw-code-raw {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   Share Menu
   ========================================================================== */

.sw-code-share-menu {
	position: absolute;
	top: 52px;
	right: 16px;
	z-index: 20;
	min-width: 190px;
	background: #ffffff;
	border: 1px solid var(--sw-border);
	border-radius: calc(var(--sw-radius) - 4px);
	box-shadow: 0 12px 32px rgba(43, 34, 48, 0.16);
	padding: 8px;
	opacity: 0;
	transform: translateY(-6px) scale(0.98);
	transform-origin: top right;
	transition: opacity 0.16s ease, transform 0.16s ease;
	pointer-events: none;
}

.sw-code-share-menu.sw-is-open {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

.sw-code-share-menu[hidden] {
	display: none;
}

.sw-share-option {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 40px;
	padding: 8px 10px;
	border: none;
	background: none;
	border-radius: 8px;
	font-family: var(--sw-font-stack);
	font-size: 13px;
	font-weight: 500;
	color: var(--sw-text);
	text-align: left;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.sw-share-option:hover {
	background: var(--sw-secondary);
}

.sw-share-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

.sw-share-dot.sw-whatsapp { background: #25D366; }
.sw-share-dot.sw-facebook { background: #1877F2; }
.sw-share-dot.sw-twitter  { background: #0F1419; }
.sw-share-dot.sw-telegram { background: #29A9EA; }
.sw-share-dot.sw-copylink { background: var(--sw-primary); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 600px) {
	.sw-code-header {
		padding: 8px 12px;
		flex-wrap: nowrap;
	}

	.sw-code-lang-name {
		max-width: 90px;
	}

	.sw-code-actions {
		gap: 6px;
	}

	.sw-code-copy .sw-code-btn-label,
	.sw-code-share .sw-code-btn-label {
		display: none;
	}

	.sw-code-copy,
	.sw-code-share {
		width: 40px;
		height: 40px;
		padding: 0;
		justify-content: center;
	}

	.sw-code-content {
		padding: 16px;
		font-size: calc(var(--sw-font-size) - 1px);
	}

	.sw-code-line-numbers {
		padding-left: 10px;
		padding-right: 8px;
		font-size: calc(var(--sw-font-size) - 1px);
	}

	.sw-code-share-menu {
		right: 8px;
		left: 8px;
		min-width: 0;
	}
}