// UTM Builder Component Styles
// ============================================================================

// Import the new consolidated UTM Builder Global Settings styles
@import './utm_builder_style';

// ==========================================================================
// Backward-compatibility: Pro v2.8.0 UTM Builder modal
// --------------------------------------------------------------------------
// The redesigned Free plugin renders the per-link UTM builder with the new
// `.bl-utm` card (_utm-builder-redesign.scss). Pro v2.8.0, however, still ships
// the old `.btl-modal-utm-builder` markup and injects it through the
// `linksUTMBuilderField` filter — so on "new Free + old Pro" it fell back to a
// dated two-column modal with the default react-modal chrome, looking broken
// next to the rest of the redesign.
//
// These rules re-skin that legacy markup to match the `.bl-utm` card. They read
// the shared `--bl-m-*` tokens (the class is registered in _bl-modal-tokens.scss
// so light/dark just work) and use `!important` deliberately to out-rank the
// old styles Pro v2.8.0 still ships in its own betterlinks-pro.css.
// ==========================================================================
$utmc-blu: var(--bl-m-accent, #2f6bff);
$utmc-blu-dark: var(--bl-m-accent-hover, #1f57e6);
$utmc-brd: var(--bl-m-border, #e6e8ee);
$utmc-ttl: var(--bl-m-text, #1a2233);
$utmc-mut: var(--bl-m-muted, #6b7280);
$utmc-surface: var(--bl-m-surface, #ffffff);
$utmc-surface-2: var(--bl-m-surface-2, #f7f8fa);
$utmc-input-bg: var(--bl-m-input-bg, #ffffff);
$utmc-err: var(--bl-m-danger, #ef4444);

// Strip react-modal's default chrome for the instance that hosts the legacy
// card (the `:has(.bl-utm)` rule in the redesign only covers new markup), and
// turn the shell into the same rounded card.
.ReactModal__Content:has(.btl-modal-utm-builder) {
	padding: 0 !important;
	border: none !important;
	border-radius: 16px !important;
	overflow: visible !important;
	background: $utmc-surface !important;
	width: 520px !important;
	max-width: calc(100vw - 40px) !important;

	// The shell's close button (Pro's markup has no header close of its own).
	> .btl-close-modal {
		position: absolute;
		top: 16px;
		right: 18px;
		z-index: 3;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 34px;
		margin: 0;
		border: 1px solid $utmc-brd;
		border-radius: 9px;
		background: $utmc-input-bg;
		color: $utmc-mut;
		cursor: pointer;
		transition: all 0.15s ease;

		&:hover {
			color: $utmc-ttl;
			background: $utmc-surface-2;
		}
		.btl {
			font-size: 15px;
			line-height: 1;
		}
	}
}

.btl-modal-utm-builder {
	box-sizing: border-box;
	display: block !important;
	max-height: calc(100vh - 80px);
	overflow-y: auto;
	padding: 22px !important;
	color: $utmc-ttl !important;
	text-align: left !important;

	* {
		box-sizing: border-box;
	}

	// ---- Title ----------------------------------------------------------
	&__title {
		display: flex !important;
		align-items: center;
		gap: 8px;
		margin: 0 0 20px !important;
		padding-right: 44px; // clear the absolute close button
		font-size: 20px !important;
		font-weight: 700 !important;
		line-height: 1.2 !important;
		color: $utmc-ttl !important;

		.btl-tooltip {
			display: inline-flex;
			align-items: center;
			margin: 0;
			color: $utmc-mut;
		}
		.dashicons-info-outline {
			font-size: 17px;
			width: 17px;
			height: 17px;
		}
	}

	// ---- Body ------------------------------------------------------------
	&__body {
		display: flex !important;
		flex-direction: column;
		gap: 16px;
	}

	// Each field: label stacked over the control (matches .bl-utm__field).
	&__form-group {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 8px;
		margin: 0 !important;

		> label {
			width: auto !important;
			min-height: 0 !important;
			padding: 0 !important;
			margin: 0 !important;
			font-size: 14px !important;
			font-weight: 700 !important;
			color: $utmc-ttl !important;
		}

		> div {
			width: 100% !important;
			flex: none !important;
		}

		input[type='text'],
		select,
		textarea {
			width: 100% !important;
			height: 46px !important;
			margin: 0 !important;
			padding: 0 14px !important;
			border: 1px solid $utmc-brd !important;
			border-radius: 10px !important;
			background: $utmc-input-bg !important;
			font-size: 14px !important;
			font-weight: 500 !important;
			color: $utmc-ttl !important;
			box-shadow: none !important;
			outline: none !important;

			&:focus {
				border-color: $utmc-blu !important;
				box-shadow: 0 0 0 3px var(--bl-m-accent-ring, rgba(47, 107, 255, 0.12)) !important;
			}
			&::placeholder {
				color: var(--bl-m-placeholder, #9aa1ad);
				font-weight: 400;
			}
		}

		textarea {
			height: auto !important;
			min-height: 90px !important;
			padding: 12px 14px !important;
		}
	}

	// ---- Template picker row --------------------------------------------
	.btl-modal-utm-templates {
		margin-bottom: 0 !important;

		.btl-utm-template-wrapper {
			display: flex !important;
			align-items: center;
			gap: 8px;
		}
		select#savedtemplate,
		select {
			flex: 1 1 auto;
			cursor: pointer;
		}
		.btl-utm-action-btns {
			flex: none;
			display: inline-flex;
			align-items: center;
		}
	}

	// ---- Action row (Save / Save New Template …) ------------------------
	// The only form-group that holds buttons directly; render it like a footer.
	// Everything is pinned with !important + explicit width/flex so Pro v2.8.0's
	// own button widths can't stretch these or force them onto separate lines.
	&__form-group:has(> button[type='button']) {
		display: flex !important;
		flex-flow: row wrap !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 12px !important;
		margin-top: 4px !important;
		padding-top: 18px !important;
		border-top: 1px solid $utmc-brd;

		button[type='button'] {
			flex: 0 0 auto !important;
			width: auto !important;
			height: 46px !important;
			min-height: 46px !important;
			margin: 0 !important;
			padding: 0 20px !important;
			border-radius: 10px !important;
			font-size: 14px !important;
			font-weight: 600 !important;
			border: 1px solid $utmc-blu !important;
			background: $utmc-blu !important;
			color: #fff !important;
			box-shadow: 0 6px 16px var(--bl-m-accent-shadow, rgba(47, 107, 255, 0.28)) !important;
			cursor: pointer;
			transition: all 0.15s ease;

			&:hover {
				background: $utmc-blu-dark !important;
				border-color: $utmc-blu-dark !important;
				box-shadow: none !important;
			}
		}

		// Secondary actions (Save New Template / Update / Save As New) → ghost.
		.template-save-button-wrapper {
			display: inline-flex !important;
			flex: 0 0 auto !important;
			width: auto !important;
			align-items: center !important;
			flex-wrap: wrap;
			gap: 10px !important;
			margin: 0 !important;

			button[type='button'] {
				flex: 0 0 auto !important;
				width: auto !important;
				background: $utmc-input-bg !important;
				border-color: $utmc-brd !important;
				color: $utmc-ttl !important;
				box-shadow: none !important;

				&:hover {
					color: $utmc-blu !important;
					border-color: var(--bl-m-accent-border, rgba(47, 107, 255, 0.5)) !important;
					background: $utmc-input-bg !important;
				}
			}
		}

		.template-save-input-wrapper {
			display: inline-flex !important;
			align-items: center;
			gap: 8px;

			input[type='text'] {
				width: auto !important;
				min-width: 180px;
			}
		}

		.error-log {
			flex: 1 1 100%;
			margin: 0;
			color: $utmc-err;
			font-size: 12px;
			font-weight: 500;

			&:empty {
				display: none;
			}
		}
	}
}

// ==========================================================================
// Social Share modal (Pro v2.8.0 `BuiltInUTMBuilder`) — same `.btl-modal-utm-builder`
// shell, plus a `#socialmedia` platform picker and per-platform field blocks.
// These re-skin those extra bits to match the redesigned card above.
// ==========================================================================
.btl-modal-utm-builder {
	// Platform picker (Facebook / Twitter / … radios) → selectable chip grid.
	#socialmedia {
		display: grid !important;
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
		width: 100% !important;

		@media screen and (max-width: 480px) {
			grid-template-columns: repeat(2, 1fr);
		}

		> label {
			position: relative;
			display: flex !important;
			align-items: center;
			gap: 8px;
			margin: 0 !important;
			padding: 11px 12px !important;
			border: 1.5px solid $utmc-brd;
			border-radius: 10px;
			background: $utmc-input-bg;
			color: $utmc-ttl !important;
			font-size: 13px !important;
			font-weight: 600 !important;
			cursor: pointer;
			transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;

			> input[type='radio'] {
				position: absolute !important;
				opacity: 0 !important;
				width: 0 !important;
				height: 0 !important;
				margin: 0 !important;
			}
			> img {
				width: 18px !important;
				height: 18px !important;
				margin: 0 !important;
				flex: none;
			}
			&:hover {
				border-color: var(--bl-m-accent-border, rgba(47, 107, 255, 0.5));
			}
			// Active chip — the radio inside is checked.
			&:has(> input:checked) {
				border-color: $utmc-blu;
				background: var(--bl-m-accent-soft, rgba(47, 107, 255, 0.1));
				color: $utmc-blu !important;
			}
		}
	}

	// Per-platform field block (Twitter / LinkedIn / Email / Reddit / Pinterest).
	&__form-group-facebook,
	&__form-group-twitter,
	&__form-group-linkedin,
	&__form-group-reddit,
	&__form-group-pinterest {
		display: flex;
		flex-direction: column;
		gap: 14px;
		margin: 0 !important;
		padding: 16px;
		border: 1px solid $utmc-brd;
		border-radius: 12px;
		background: $utmc-surface-2;

		h4 {
			margin: 0 !important;
			font-size: 14px !important;
			font-weight: 700 !important;
			color: $utmc-ttl !important;
		}
		p {
			margin: 0 !important;
			font-size: 12px !important;
			line-height: 1.5 !important;
			color: $utmc-mut !important;
		}

		// "Generate URL" row inside a platform block → full-width ghost button,
		// no footer divider (that belongs to the modal's real action row).
		.btl-modal-utm-builder__form-group:has(> button[type='button']) {
			margin-top: 0 !important;
			padding-top: 0 !important;
			border-top: none !important;

			> button[type='button'] {
				width: 100% !important;
				background: $utmc-input-bg !important;
				border-color: $utmc-brd !important;
				color: $utmc-ttl !important;
				box-shadow: none !important;

				&:hover {
					color: $utmc-blu !important;
					border-color: var(--bl-m-accent-border, rgba(47, 107, 255, 0.5)) !important;
					background: $utmc-input-bg !important;
				}
			}
		}
	}
}