/* ─────────────────────────────────────────
   Kukie.io WordPress Plugin - Admin Styles
   All scoped under .kukie-wrap
   Brand colour: #0f172b
   ───────────────────────────────────────── */

/* Base */
.kukie-wrap {
	max-width: 960px;
	margin: 20px 0;
	font-size: 14px;
	color: #1e293b;
}

.kukie-wrap *,
.kukie-wrap *::before,
.kukie-wrap *::after {
	box-sizing: border-box;
}

/* Header */
.kukie-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
}

.kukie-header h1 {
	font-size: 24px;
	font-weight: 600;
	color: #0f172a;
	margin: 0;
	padding: 0;
}

/* Cards */
.kukie-card {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 24px;
	margin-bottom: 16px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.kukie-card-title {
	font-size: 16px;
	font-weight: 600;
	color: #0f172a;
	margin: 0 0 4px;
	padding: 0;
}

.kukie-card-description {
	color: #64748b;
	margin: 0 0 16px;
	font-size: 13px;
	line-height: 1.5;
}

.kukie-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.kukie-card-header .kukie-card-title {
	margin-bottom: 0;
}

/* Stats Grid */
.kukie-stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-bottom: 16px;
}

@media (max-width: 782px) {
	.kukie-stats-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.kukie-stat-card {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 20px;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.kukie-stat-icon {
	width: 40px;
	height: 40px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.kukie-stat-icon .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
}

.kukie-stat-icon--banner {
	background: #f1f5f9;
	color: #0f172b;
}

.kukie-stat-icon--consent {
	background: #ecfdf5;
	color: #059669;
}

.kukie-stat-icon--plan {
	background: #fef3c7;
	color: #d97706;
}

.kukie-stat-icon--verify {
	background: #f0fdf4;
	color: #16a34a;
}

.kukie-stat-content {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.kukie-stat-label {
	font-size: 12px;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 500;
}

.kukie-stat-value {
	font-size: 18px;
	font-weight: 600;
	color: #0f172a;
}

.kukie-stat-card--link {
	text-decoration: none;
	cursor: pointer;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.kukie-stat-card--link:hover {
	border-color: #2563eb;
	box-shadow: 0 1px 4px rgba(37, 99, 235, 0.12);
}

.kukie-stat-card--link .kukie-stat-label,
.kukie-stat-card--link .kukie-stat-value {
	color: inherit;
}

/* Card Actions */
.kukie-card-actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* Two Column */
.kukie-two-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 16px;
}

@media (max-width: 782px) {
	.kukie-two-col {
		grid-template-columns: 1fr;
	}
}

/* Consent Overview */
.kukie-consent-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 0;
	border-bottom: 1px solid #f1f5f9;
}

.kukie-consent-row:last-child {
	border-bottom: none;
}

.kukie-consent-label {
	font-weight: 500;
	color: #334155;
}

.kukie-consent-value {
	font-weight: 600;
	color: #0f172a;
}

.kukie-consent-values {
	display: flex;
	gap: 12px;
	font-size: 13px;
}

.kukie-consent-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 500;
}

.kukie-consent-chip--accept {
	background: #ecfdf5;
	color: #059669;
}

.kukie-consent-chip--reject {
	background: #fef2f2;
	color: #dc2626;
}

.kukie-consent-chip--partial {
	background: #fef3c7;
	color: #d97706;
}

/* Scan Info */
.kukie-scan-detail {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 0;
	border-bottom: 1px solid #f1f5f9;
}

.kukie-scan-detail:last-child {
	border-bottom: none;
}

.kukie-scan-label {
	color: #64748b;
	font-size: 13px;
}

.kukie-scan-value {
	font-weight: 500;
	color: #0f172a;
}

/* CTA Card */
.kukie-cta-card {
	text-align: center;
	padding: 32px;
}

.kukie-cta-card p {
	color: #64748b;
	margin: 8px 0 20px;
	max-width: 480px;
	margin-left: auto;
	margin-right: auto;
}

/* Buttons */
.kukie-btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: #0f172b;
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s;
	line-height: 1.4;
}

.kukie-btn-primary:hover,
.kukie-btn-primary:focus {
	background: #2563eb;
	color: #fff;
}

.kukie-btn-primary .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

.kukie-btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: #fff;
	color: #0f172b;
	border: 1px solid #0f172b;
	border-radius: 6px;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	text-decoration: none;
	transition: all 0.15s;
	line-height: 1.4;
}

.kukie-btn-secondary:hover,
.kukie-btn-secondary:focus {
	background: #eff6ff;
	color: #2563eb;
	border-color: #2563eb;
}

.kukie-btn-danger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: #fff;
	color: #dc2626;
	border: 1px solid #dc2626;
	border-radius: 6px;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	text-decoration: none;
	transition: all 0.15s;
}

.kukie-btn-danger:hover,
.kukie-btn-danger:focus {
	background: #fef2f2;
}

.kukie-btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px;
	color: #64748b;
}

.kukie-btn-icon:hover {
	color: #0f172a;
}

.kukie-btn-full {
	width: 100%;
}

.kukie-btn-sm {
	padding: 6px 12px;
	font-size: 12px;
}

.kukie-btn-loading {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* Spinner */
.kukie-spinner {
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: kukie-spin 0.6s linear infinite;
}

@keyframes kukie-spin {
	to { transform: rotate(360deg); }
}

/* Skeleton Loading */
.kukie-skeleton {
	display: inline-block;
	width: 60px;
	height: 16px;
	background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
	background-size: 200% 100%;
	animation: kukie-shimmer 1.5s ease-in-out infinite;
	border-radius: 4px;
}

@keyframes kukie-shimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* Loading */
.kukie-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 40px;
	color: #64748b;
}

/* Inputs */
.kukie-input {
	display: block;
	width: 100%;
	padding: 8px 12px;
	font-size: 14px;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	background: #fff;
	color: #0f172a;
	transition: border-color 0.15s;
	line-height: 1.5;
}

.kukie-input:focus {
	outline: none;
	border-color: #2563eb;
	box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.kukie-input::placeholder {
	color: #94a3b8;
}

.kukie-input-with-toggle {
	position: relative;
	display: flex;
	align-items: center;
}

.kukie-input-with-toggle .kukie-input {
	padding-right: 40px;
}

.kukie-input-with-toggle .kukie-btn-icon {
	position: absolute;
	right: 8px;
}

.kukie-select {
	display: block;
	width: 100%;
	padding: 8px 32px 8px 12px;
	font-size: 14px;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
	color: #0f172a;
	appearance: none;
	transition: border-color 0.15s;
}

.kukie-select:focus {
	outline: none;
	border-color: #2563eb;
	box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

/* Form Groups */
.kukie-form-group {
	margin-bottom: 16px;
}

.kukie-form-group label {
	display: block;
	font-weight: 500;
	color: #334155;
	margin-bottom: 6px;
	font-size: 13px;
}

.kukie-form-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 0;
	border-bottom: 1px solid #f1f5f9;
}

.kukie-form-row:last-child {
	border-bottom: none;
}

.kukie-form-row-label {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.kukie-form-row-label > span:first-child {
	font-weight: 500;
	color: #0f172a;
}

.kukie-form-row-hint {
	font-size: 12px;
	color: #64748b;
}

.kukie-form-actions {
	margin-top: 8px;
	margin-bottom: 24px;
}

/* Help Text */
.kukie-help-text {
	font-size: 12px;
	color: #64748b;
	margin: 6px 0 0;
	line-height: 1.4;
}

.kukie-help-text a {
	color: #0f172b;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.kukie-help-text a:hover {
	text-decoration: underline;
}

/* Toggle Switch */
.kukie-toggle {
	position: relative;
	display: inline-block;
	width: 44px;
	height: 24px;
	flex-shrink: 0;
	cursor: pointer;
}

.kukie-toggle input {
	opacity: 0;
	width: 0;
	height: 0;
	position: absolute;
}

.kukie-toggle-slider {
	position: absolute;
	inset: 0;
	background: #cbd5e1;
	border-radius: 24px;
	transition: background 0.2s;
}

.kukie-toggle-slider::before {
	content: '';
	position: absolute;
	width: 18px;
	height: 18px;
	left: 3px;
	bottom: 3px;
	background: #fff;
	border-radius: 50%;
	transition: transform 0.2s;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.kukie-toggle input:checked + .kukie-toggle-slider {
	background: #2563eb;
}

.kukie-toggle input:checked + .kukie-toggle-slider::before {
	transform: translateX(20px);
}

.kukie-toggle input:focus-visible + .kukie-toggle-slider {
	box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
}

/* Radio Group */
.kukie-radio-group {
	display: flex;
	gap: 8px;
}

@media (max-width: 782px) {
	.kukie-radio-group {
		flex-direction: column;
	}
}

.kukie-radio {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
	flex: 1;
}

.kukie-radio:hover {
	border-color: #cbd5e1;
}

.kukie-radio:has(input:checked) {
	border-color: #2563eb;
	background: #eff6ff;
}

.kukie-radio input[type="radio"] {
	accent-color: #2563eb;
	margin: 0;
}

.kukie-radio-label {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.kukie-radio-label strong {
	font-weight: 500;
	color: #0f172a;
	font-size: 13px;
}

.kukie-radio-hint {
	font-size: 11px;
	color: #64748b;
	line-height: 1.3;
}

/* Checkbox Grid (Languages) */
.kukie-checkbox-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 4px;
	margin-top: 8px;
}

@media (max-width: 782px) {
	.kukie-checkbox-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.kukie-checkbox-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border: none;
	border-radius: 4px;
	font-size: 13px;
	cursor: pointer;
	transition: background 0.15s;
	background: transparent;
}

.kukie-checkbox-item:hover {
	background: #f1f5f9;
}

.kukie-checkbox-item:has(input:checked) {
	background: #eff6ff;
}

.kukie-checkbox-item input[type="checkbox"] {
	accent-color: #2563eb;
	margin: 0;
	width: 16px;
	height: 16px;
}

.kukie-checkbox-item span {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #334155;
}

/* CTA Banner */
.kukie-cta-banner {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	border-radius: 8px;
	margin-top: 16px;
}

.kukie-cta-banner .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
	color: #2563eb;
	flex-shrink: 0;
}

.kukie-cta-banner p {
	margin: 0;
	font-size: 13px;
	color: #1e293b;
	line-height: 1.5;
}

.kukie-cta-banner a {
	color: #2563eb;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.kukie-cta-banner a:hover {
	color: #1d4ed8;
}

/* Notices */
.kukie-notice {
	padding: 12px 16px;
	border-radius: 6px;
	margin-bottom: 16px;
	font-size: 13px;
	line-height: 1.5;
}

.kukie-notice-error {
	background: #fef2f2;
	color: #dc2626;
	border: 1px solid #fecaca;
}

.kukie-notice-success {
	background: #ecfdf5;
	color: #059669;
	border: 1px solid #a7f3d0;
}

/* Toast */
.kukie-toast {
	position: fixed;
	top: 40px;
	right: 20px;
	z-index: 100001;
	padding: 12px 20px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 500;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	animation: kukie-toast-in 0.3s ease-out;
	max-width: 360px;
}

.kukie-toast--success {
	background: #059669;
	color: #fff;
}

.kukie-toast--error {
	background: #dc2626;
	color: #fff;
}

.kukie-toast--removing {
	animation: kukie-toast-out 0.3s ease-in forwards;
}

@keyframes kukie-toast-in {
	from { opacity: 0; transform: translateY(-10px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes kukie-toast-out {
	from { opacity: 1; transform: translateY(0); }
	to { opacity: 0; transform: translateY(-10px); }
}

/* Consent Table (GCM) */
.kukie-consent-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 8px;
}

.kukie-consent-table th,
.kukie-consent-table td {
	padding: 10px 12px;
	text-align: left;
	border-bottom: 1px solid #f1f5f9;
	font-size: 13px;
}

.kukie-consent-table th {
	font-weight: 600;
	color: #64748b;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.kukie-consent-table td {
	color: #334155;
}

/* Badges */
.kukie-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 10px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 500;
}

.kukie-badge--denied {
	background: #fef2f2;
	color: #dc2626;
}

.kukie-badge--granted {
	background: #ecfdf5;
	color: #059669;
}

.kukie-badge--active {
	background: #ecfdf5;
	color: #059669;
}

.kukie-badge--inactive {
	background: #f1f5f9;
	color: #64748b;
}

.kukie-badge--running {
	background: #f1f5f9;
	color: #0f172b;
}

.kukie-badge--failed {
	background: #fef2f2;
	color: #dc2626;
}

/* Connect Box */
.kukie-connect-box {
	max-width: 480px;
	margin: 60px auto;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 40px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04);
	text-align: center;
}

.kukie-connect-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-bottom: 16px;
}

.kukie-connect-logo h1 {
	font-size: 28px;
	font-weight: 700;
	color: #0f172b;
	margin: 0;
	padding: 0;
}

.kukie-connect-logo img {
	width: 200px;
	height: auto;
}

.kukie-connect-description {
	color: #64748b;
	margin: 0 0 24px;
	font-size: 14px;
	line-height: 1.6;
}

.kukie-connect-footer {
	margin-top: 24px;
	font-size: 13px;
	color: #64748b;
}

.kukie-connect-footer a {
	color: #0f172b;
	text-decoration: underline;
	text-underline-offset: 2px;
	font-weight: 500;
}

.kukie-connect-footer a:hover {
	text-decoration: underline;
}

/* Connect Success State */
.kukie-success-icon {
	margin-bottom: 12px;
}

.kukie-success-icon .dashicons {
	font-size: 48px;
	width: 48px;
	height: 48px;
	color: #059669;
}

#kukie-connect-success h2 {
	margin: 0 0 20px;
	color: #059669;
	font-size: 22px;
}

.kukie-connect-details {
	text-align: left;
	background: #f8fafc;
	border-radius: 8px;
	padding: 16px;
	margin-bottom: 24px;
}

.kukie-detail-row {
	display: flex;
	justify-content: space-between;
	padding: 8px 0;
	border-bottom: 1px solid #e2e8f0;
}

.kukie-detail-row:last-child {
	border-bottom: none;
}

.kukie-detail-label {
	color: #64748b;
	font-size: 13px;
}

.kukie-detail-value {
	font-weight: 600;
	color: #0f172a;
	font-size: 13px;
}

/* Info Grid (Settings) */
.kukie-info-grid {
	margin-bottom: 16px;
}

.kukie-info-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 0;
	border-bottom: 1px solid #f1f5f9;
}

.kukie-info-row:last-child {
	border-bottom: none;
}

.kukie-info-label {
	color: #64748b;
	font-size: 13px;
}

.kukie-info-value {
	font-weight: 500;
	color: #0f172a;
	font-size: 13px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.kukie-info-value code {
	background: #f1f5f9;
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 12px;
}

/* Status Dot */
.kukie-status-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

.kukie-status-dot--connected {
	background: #22c55e;
}

.kukie-status-dot--disconnected {
	background: #ef4444;
}

/* Disconnect Section */
.kukie-disconnect-section {
	padding-top: 16px;
	border-top: 1px solid #f1f5f9;
}

/* Embed Code */
.kukie-embed-code {
	margin: 12px 0;
}

.kukie-embed-code label {
	display: block;
	font-weight: 500;
	color: #334155;
	margin-bottom: 6px;
	font-size: 13px;
}

.kukie-embed-code code {
	display: block;
	background: #1e293b;
	color: #e2e8f0;
	padding: 14px 16px;
	border-radius: 6px;
	font-size: 12px;
	line-height: 1.6;
	overflow-x: auto;
	white-space: pre-wrap;
	word-break: break-all;
}

/* External Link */
.kukie-external-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #0f172b;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
}

.kukie-external-link:hover {
	text-decoration: underline;
}

.kukie-external-link .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
}

/* Disabled state */
.kukie-btn-primary:disabled,
.kukie-btn-secondary:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* ═══════════════════════════════════════
   BANNER DESIGN PAGE
   ═══════════════════════════════════════ */

/* Wide layout */
.kukie-wrap--wide {
	max-width: 1100px;
}

/* Two-column grid */
.kukie-design-layout {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 20px;
	align-items: start;
}

@media (max-width: 960px) {
	.kukie-design-layout {
		grid-template-columns: 1fr;
	}
}

.kukie-design-preview {
	position: sticky;
	top: 48px;
}

@media (max-width: 960px) {
	.kukie-design-preview {
		position: static;
	}
}

/* Layout option cards */
.kukie-layout-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

@media (max-width: 480px) {
	.kukie-layout-grid {
		grid-template-columns: 1fr;
	}
}

.kukie-layout-option {
	display: block;
	position: relative;
	border: 1.5px solid #e2e8f0;
	border-radius: 8px;
	padding: 16px;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
	background: #fff;
}

.kukie-layout-option:hover {
	border-color: #cbd5e1;
	background: #f8fafc;
}

.kukie-layout-option:has(input:checked) {
	border-color: #2563eb;
	background: #eff6ff;
	box-shadow: 0 0 0 1px #2563eb;
}

.kukie-layout-option input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.kukie-layout-option-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.kukie-layout-option-body strong {
	font-size: 13px;
	font-weight: 600;
	color: #0f172a;
}

.kukie-layout-option-body span {
	font-size: 12px;
	color: #64748b;
}

/* Position pills */
.kukie-position-group {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.kukie-position-pill {
	display: block;
	cursor: pointer;
	position: relative;
}

.kukie-position-pill input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.kukie-position-pill span {
	display: inline-block;
	padding: 7px 16px;
	border: 1.5px solid #e2e8f0;
	border-radius: 20px;
	font-size: 13px;
	font-weight: 500;
	color: #334155;
	transition: all 0.15s;
	background: #fff;
}

.kukie-position-pill:hover span {
	border-color: #cbd5e1;
	background: #f8fafc;
}

.kukie-position-pill:has(input:checked) span {
	background: #2563eb;
	border-color: #2563eb;
	color: #fff;
}

/* Preview card */
.kukie-preview-card {
	padding: 0;
	overflow: hidden;
}

.kukie-preview-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid #f1f5f9;
}

.kukie-preview-header .kukie-card-title {
	margin: 0;
}

/* Browser mock wrap */
.kukie-preview-browser-wrap {
	padding: 16px;
	display: flex;
	justify-content: center;
}

/* Browser mock */
.kukie-preview-browser {
	width: 100%;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	transition: width 0.3s ease;
}

/* Browser chrome bar */
.kukie-preview-chrome {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	background: #f8fafc;
	border-bottom: 1px solid #e2e8f0;
}

.kukie-preview-dots {
	display: flex;
	gap: 4px;
}

.kukie-preview-dots span {
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

.kukie-preview-url-bar {
	flex: 1;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 4px;
	padding: 3px 10px;
}

.kukie-preview-url {
	font-size: 10px;
	color: #64748b;
}

/* Page content area */
.kukie-preview-page {
	position: relative;
	height: 340px;
	overflow: hidden;
	background: #f8fafc;
}

/* Mock page blocks */
.kukie-preview-page-content {
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.kukie-mock-block {
	border-radius: 4px;
	background: #e2e8f0;
}

.kukie-mock-nav {
	height: 14px;
	width: 100%;
	background: #fff;
	border: 1px solid #e2e8f0;
}

.kukie-mock-hero {
	height: 56px;
	width: 100%;
	background: #dbeafe;
	opacity: 0.6;
}

.kukie-mock-row {
	display: flex;
	gap: 8px;
}

.kukie-mock-card {
	height: 46px;
	flex: 1;
	background: #fff;
	border: 1px solid #e2e8f0;
}

.kukie-mock-text {
	height: 8px;
	width: 80%;
}

.kukie-mock-text--short {
	width: 50%;
}

/* Preview overlay (for popup) */
.kukie-preview-overlay {
	display: none;
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.25);
	z-index: 1;
}

/* Preview banner mock */
.kukie-preview-banner {
	position: absolute;
	z-index: 2;
	background: #fff;
	border-radius: 6px;
	padding: 10px 12px 8px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	width: 65%;
	top: auto;
	left: auto;
	right: auto;
	bottom: auto;
	transform: none;
	transition: all 0.25s ease;
}

.kukie-pbanner-head {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-bottom: 4px;
}

.kukie-pbanner-head strong {
	font-size: 8px;
	font-weight: 600;
	color: #0f172a;
}

.kukie-pbanner-text {
	font-size: 6px;
	color: #64748b;
	margin: 0 0 6px;
	line-height: 1.4;
}

.kukie-pbanner-btns {
	display: flex;
	gap: 3px;
	margin-bottom: 4px;
}

.kukie-pbanner-btn {
	display: inline-block;
	padding: 2px 6px;
	border: 1px solid #e2e8f0;
	border-radius: 3px;
	font-size: 5px;
	font-weight: 500;
	color: #334155;
	background: #fff;
}

.kukie-pbanner-btn--primary {
	background: #2563eb;
	border-color: #2563eb;
	color: #fff;
}

.kukie-pbanner-powered {
	display: block;
	text-align: center;
	font-size: 4px;
	color: #94a3b8;
}

/* ── Banner positioning by layout ── */

/* Popup: centered with overlay */
.kukie-preview-page[data-layout="popup"] .kukie-preview-overlay {
	display: block;
}

.kukie-preview-page[data-layout="popup"] .kukie-preview-banner {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 70%;
}

/* Bottom bar: full-width at bottom */
.kukie-preview-page[data-layout="bar-bottom"] .kukie-preview-banner {
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	border-radius: 0;
	box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
}

/* Top bar: full-width at top */
.kukie-preview-page[data-layout="bar-top"] .kukie-preview-banner {
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	border-radius: 0;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* Floating: smaller card */
.kukie-preview-page[data-layout="floating"] .kukie-preview-banner {
	width: 55%;
}

.kukie-preview-page[data-layout="floating"][data-position="center"] .kukie-preview-banner {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.kukie-preview-page[data-layout="floating"][data-position="bottom-left"] .kukie-preview-banner {
	bottom: 8px;
	left: 8px;
}

.kukie-preview-page[data-layout="floating"][data-position="bottom-center"] .kukie-preview-banner {
	bottom: 8px;
	left: 50%;
	transform: translateX(-50%);
}

.kukie-preview-page[data-layout="floating"][data-position="bottom-right"] .kukie-preview-banner {
	bottom: 8px;
	right: 8px;
}

/* Form grid (2 col) */
.kukie-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

@media (max-width: 480px) {
	.kukie-form-grid {
		grid-template-columns: 1fr;
	}
}

/* Color field (picker + text) */
.kukie-color-field {
	display: flex;
	align-items: center;
	gap: 8px;
}

.kukie-color-field input[type="color"] {
	width: 36px;
	height: 36px;
	padding: 2px;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	cursor: pointer;
	background: #fff;
	flex-shrink: 0;
}

.kukie-color-field .kukie-input {
	flex: 1;
}

/* Checkbox label inline */
.kukie-checkbox-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #475569;
	cursor: pointer;
	white-space: nowrap;
}

/* Color input group (picker + text side by side) */
.kukie-color-input-group {
	display: flex;
	align-items: center;
	gap: 8px;
}

.kukie-color-input-group input[type="color"] {
	width: 36px;
	height: 36px;
	padding: 2px;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	cursor: pointer;
	background: #fff;
	flex-shrink: 0;
}

.kukie-color-input-group .kukie-input {
	width: 100px;
}

/* Preview note */
.kukie-preview-note {
	text-align: center;
	font-size: 11px;
	color: #94a3b8;
	margin: 0;
	padding: 0 16px 14px;
}