/**
 * Google Ads Setup Page Styles
 *
 * @package TrueConversion
 */

.tc-gads-wrap {
	max-width: 720px;
}
.tc-gads-subtitle {
	color: #555;
	font-size: 14px;
	margin-bottom: 20px;
}

/* Step Cards */
.tc-gads-step-card {
	background: #fff;
	border: 1px solid #ccd0d4;
	border-radius: 6px;
	margin-bottom: 16px;
	overflow: hidden;
}
.tc-gads-step-card.tc-step-active {
	border-color: #2563eb;
	box-shadow: 0 0 0 1px #2563eb;
}
.tc-gads-step-card.tc-step-done {
	border-color: #16a34a;
}
.tc-gads-step-card.tc-step-locked {
	opacity: 0.5;
}

/* Step Header */
.tc-gads-step-header {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 16px 20px 0;
}
.tc-gads-step-number {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	background: #2563eb;
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 14px;
}
.tc-gads-step-number.tc-step-number-done {
	background: #16a34a;
}
.tc-gads-step-title h2 {
	margin: 0;
	padding: 0;
	font-size: 15px;
	line-height: 32px;
	border: none;
}
.tc-gads-step-title p {
	margin: 2px 0 0;
	color: #555;
	font-size: 13px;
}

/* Step Body */
.tc-gads-step-body {
	padding: 12px 20px 20px 66px;
}
.tc-gads-locked-message {
	padding-bottom: 16px;
}
.tc-gads-locked-message p {
	color: #888;
	font-style: italic;
	margin: 0;
}

/* Status */
.tc-gads-inline-status {
	display: flex;
	align-items: center;
}
.tc-gads-status {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-weight: 600;
	font-size: 14px;
}
.tc-gads-connected {
	color: #16a34a;
}

/* Create Box */
.tc-gads-create-box,
.tc-gads-select-box {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 4px;
	padding: 16px;
}
.tc-gads-create-box h4,
.tc-gads-select-box h4 {
	margin: 0 0 6px;
	font-size: 14px;
}
.tc-gads-create-box p,
.tc-gads-select-box p {
	margin: 0 0 12px;
	color: #555;
	font-size: 13px;
}

/* OR Divider */
.tc-gads-or-divider {
	text-align: center;
	position: relative;
	margin: 16px 0;
}
.tc-gads-or-divider::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 1px;
	background: #ccd0d4;
}
.tc-gads-or-divider span {
	position: relative;
	background: #fff;
	padding: 0 12px;
	color: #888;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
}

/* Instructions Box */
.tc-gads-instructions-box {
	background: #fffbeb;
	border: 1px solid #f59e0b;
	border-radius: 4px;
	padding: 16px 20px;
}
.tc-gads-instructions-box h4 {
	margin: 0 0 10px;
	font-size: 14px;
	color: #92400e;
}
.tc-gads-instructions-box ol {
	margin: 0 0 0 20px;
	padding: 0;
}
.tc-gads-instructions-box li {
	margin-bottom: 6px;
	color: #333;
	line-height: 1.5;
}

/* Done Banner */
.tc-gads-done-banner {
	display: flex;
	gap: 14px;
	align-items: center;
	background: #f0fdf4;
	border: 1px solid #16a34a;
	border-radius: 6px;
	padding: 16px 20px;
	margin-top: 8px;
}
.tc-gads-done-banner .dashicons {
	font-size: 32px;
	width: 32px;
	height: 32px;
	color: #16a34a;
}
.tc-gads-done-banner h3 {
	margin: 0 0 4px;
	color: #16a34a;
}
.tc-gads-done-banner p {
	margin: 0;
	color: #555;
}