/**
 * TP Copy Code widget (Pure Core)
 *
 * Loaded by Elementor only when the "Copy Code" widget is on the page (see
 * get_style_depends() in widgets/copy-code.php).
 *
 * 1. Shared structure          [ code | divider | button ]
 * 2. Layout 1 - Minimal (SaaS)  .tp-copy-code-widget--minimal   (default)
 * 3. Layout 2 - Dark Coupon     .tp-copy-code-widget--dark
 *
 * Each layout is scoped under its modifier class. Every value here is a
 * default that the widget's Style controls override.
 *
 * The code and the button carry their own padding (not the box), so the
 * divider runs the full height of the box.
 */

/* ---------------------------------------------------------------------------
 * 1. Shared structure
 * ------------------------------------------------------------------------ */

.tp-copy-code-widget {
	box-sizing: border-box;
	display: flex;
	justify-content: center; /* "Alignment" control */
}

.tp-copy-code {
	box-sizing: border-box;
	position: relative;
	display: inline-flex;
	align-items: stretch;
	max-width: 100%;
	overflow: hidden;
}

.tp-copy-code-text {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	line-height: 1.2;
	word-break: break-all;
}

.tp-copy-code-divider {
	flex: 0 0 auto;
	align-self: stretch;
	width: 0;
}

.tp-copy-code-btn {
	box-sizing: border-box;
	display: inline-grid; /* both states share one cell, so the width never jumps */
	align-items: center;
	margin: 0;
	font: inherit;
	line-height: 1.2;
	text-align: center;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.tp-copy-code-btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -4px;
}

.tp-copy-code-state {
	grid-area: 1 / 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.tp-copy-code-icon {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

.tp-copy-code-icon svg {
	fill: currentColor;
}

/* "Copied" state: hidden until the wrapper gets .is-copied. */
.tp-copy-code-state-copied {
	visibility: hidden;
}

.tp-copy-code.is-copied .tp-copy-code-state-default {
	visibility: hidden;
}

.tp-copy-code.is-copied .tp-copy-code-state-copied {
	visibility: visible;
}

/* Screen-reader announcement ("Copied!"). */
.tp-copy-code-status {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------------------
 * 2. Layout 1 - Minimal (SaaS)
 *    Light input-group look: a monospace code on a faint grey field, a hairline
 *    divider and a quiet neutral button. Green only appears on success.
 * ------------------------------------------------------------------------ */

.tp-copy-code-widget--minimal .tp-copy-code {
	background-color: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.04);
}

.tp-copy-code-widget--minimal .tp-copy-code-text {
	padding: 10px 14px;
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: #0f172a;
	background-color: #f8fafc;
}

.tp-copy-code-widget--minimal .tp-copy-code-divider {
	border-left: 1px solid #e2e8f0;
}

.tp-copy-code-widget--minimal .tp-copy-code-btn {
	padding: 10px 14px;
	font-size: 14px;
	font-weight: 500;
	color: #334155;
}

.tp-copy-code-widget--minimal .tp-copy-code-btn:hover {
	color: #0f172a;
	background-color: #f1f5f9;
}

.tp-copy-code-widget--minimal .tp-copy-code-state {
	gap: 6px;
}

.tp-copy-code-widget--minimal .tp-copy-code-icon,
.tp-copy-code-widget--minimal .tp-copy-code-icon i {
	font-size: 15px;
}

.tp-copy-code-widget--minimal .tp-copy-code-icon svg {
	width: 15px;
	height: 15px;
}

.tp-copy-code-widget--minimal .tp-copy-code-state-copied {
	color: #15803d;
}

.tp-copy-code-widget--minimal .tp-copy-code.is-copied .tp-copy-code-btn {
	background-color: #f0fdf4;
}

/* ---------------------------------------------------------------------------
 * 3. Layout 2 - Dark Coupon
 *    Dashed amber coupon on an indigo band.
 * ------------------------------------------------------------------------ */

.tp-copy-code-widget--dark {
	padding: 28px 20px;
	background-color: #1a0b86;
}

.tp-copy-code-widget--dark .tp-copy-code {
	background-color: rgba(255, 255, 255, 0.08);
	border: 1px dashed rgba(245, 166, 35, 0.5);
	border-radius: 10px;
}

.tp-copy-code-widget--dark .tp-copy-code-text {
	padding: 14px 20px;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: #fff;
}

.tp-copy-code-widget--dark .tp-copy-code-divider {
	border-left: 1px dashed rgba(245, 166, 35, 0.5);
}

.tp-copy-code-widget--dark .tp-copy-code-btn {
	padding: 14px 20px;
	font-size: 18px;
	font-weight: 700;
	color: #f5a623;
}

.tp-copy-code-widget--dark .tp-copy-code-btn:hover {
	color: #ffc266;
	background-color: rgba(255, 255, 255, 0.06);
}

.tp-copy-code-widget--dark .tp-copy-code-state {
	gap: 8px;
}

.tp-copy-code-widget--dark .tp-copy-code-icon,
.tp-copy-code-widget--dark .tp-copy-code-icon i {
	font-size: 18px;
}

.tp-copy-code-widget--dark .tp-copy-code-icon svg {
	width: 18px;
	height: 18px;
}

.tp-copy-code-widget--dark .tp-copy-code-state-copied {
	color: #4ade80;
}