/* Field Wrapper */
.agenticwp-field-wrapper {
	/* No positioning needed - tooltip positions relative to header */
	position: relative;
}

/* Field Header (contains label and tooltip trigger) */
.agenticwp-field-header {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: var(--agenticwp-space-sm);
}

.agenticwp-field-header p,
.agenticwp-field-header label {
	margin: 0;
	flex: 1;
}

/* Field Content */
.agenticwp-field-content {
	/* Content takes full width, styled by individual field CSS */
}

/* Tooltip Trigger Button */
.agenticwp-tooltip-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
	color: var(--agenticwp-text-secondary);
	transition: var(--agenticwp-transition);
	vertical-align: middle;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.agenticwp-tooltip-trigger:hover,
.agenticwp-tooltip-trigger:focus {
	color: var(--agenticwp-primary);
	outline: none;
}

.agenticwp-tooltip-trigger .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

/* Legacy support for existing mockup implementation */
.agenticwp-field-with-tooltip {
	position: relative;
	display: inline-block;
}

/* Tooltip Container */
.agenticwp-tooltip {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	max-width: 350px;
	padding: var(--agenticwp-space-lg);
	background: var(--agenticwp-bg-white);
	border: 1px solid var(--agenticwp-border);
	border-radius: var(--agenticwp-radius-lg);
	box-shadow: var(--agenticwp-shadow);
	z-index: 1000;
	font-size: 13px;
	line-height: 1.5;
	color: var(--agenticwp-text-primary);
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
	pointer-events: none;
}

.agenticwp-tooltip[hidden] {
	display: none;
}

.agenticwp-tooltip-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* Tooltip Arrow */
.agenticwp-tooltip::before {
	content: '';
	position: absolute;
	bottom: 100%;
	right: 12px;
	border: 6px solid transparent;
	border-bottom-color: var(--agenticwp-border);
}

.agenticwp-tooltip::after {
	content: '';
	position: absolute;
	bottom: 100%;
	right: 13px;
	border: 5px solid transparent;
	border-bottom-color: var(--agenticwp-bg-white);
}

/* Tooltip Content */
.agenticwp-tooltip p {
	margin: 0 0 var(--agenticwp-space-sm) 0;
}

.agenticwp-tooltip p:last-child {
	margin-bottom: 0;
}

.agenticwp-tooltip ul {
	margin: 0 0 var(--agenticwp-space-sm) 0;
	padding-left: 20px;
}

.agenticwp-tooltip ul:last-child {
	margin-bottom: 0;
}

.agenticwp-tooltip li {
	margin-bottom: var(--agenticwp-space-xs);
}

.agenticwp-tooltip li:last-child {
	margin-bottom: 0;
}

.agenticwp-tooltip a {
	color: var(--agenticwp-primary);
	text-decoration: none;
}

.agenticwp-tooltip a:hover {
	color: var(--agenticwp-primary-hover);
	text-decoration: underline;
}

/* Mobile Responsive */
@media screen and (max-width: 782px) {
	.agenticwp-tooltip {
		max-width: calc(100vw - 40px);
		left: 50%;
		transform: translateX(-50%) translateY(4px);
	}

	.agenticwp-tooltip-visible {
		transform: translateX(-50%) translateY(0);
	}

	.agenticwp-tooltip::before,
	.agenticwp-tooltip::after {
		left: 50%;
		transform: translateX(-50%);
	}
}
