/* Visual Picker for ACF Flexible Content — Settings page */

/* Default box-sizing is content-box, which makes max-width cap only the
   content area — an element's padding/border then push its rendered width
   past that cap. border-box makes max-width cap the full visible box, so
   any two elements sharing the same max-width always render at the same
   width regardless of their own padding/border. */
.aibs-fcp-for-acf-settings,
.aibs-fcp-for-acf-settings *,
.aibs-fcp-for-acf-settings *::before,
.aibs-fcp-for-acf-settings *::after {
	box-sizing: border-box;
}

.aibs-fcp-for-acf-settings {
	max-width: 100%;
}

/* Hidden <h1> that acts as a WP notice anchor — keeps notices above our header */
.aibs-fcp-for-acf-settings__notice-anchor {
	display: block;
	height: 0;
	overflow: hidden;
	margin: 0;
	padding: 0;
	font-size: 0;
	line-height: 0;
}

/* Notices injected by WP: strip the default top margin so they sit flush at the
   same level as the left edge, then add space below to separate from the header */
.aibs-fcp-for-acf-settings .notice,
.aibs-fcp-for-acf-settings .updated,
.aibs-fcp-for-acf-settings .error {
	margin-top: 0 !important;
	margin-bottom: 16px !important;
}

.aibs-fcp-for-acf-settings__header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 20px;
}

.aibs-fcp-for-acf-settings__title {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 22px;
	font-weight: 600;
	line-height: 1;
	color: #1d2327;
}

.aibs-fcp-for-acf-settings__version {
	font-size: 12px;
	color: #787c82;
	background: #f0f0f1;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	padding: 2px 8px;
	line-height: 1.4;
	display: inline-flex;
	align-items: center;
}

.aibs-fcp-for-acf-settings__tagline {
	margin: -12px 0 20px;
	font-size: 13px;
	color: #787c82;
}

/* Two equal-width columns: How to Use / Updates / Manage Data on the left,
   Free vs Pro on the right. Both columns shrink together as the viewport
   narrows (grid-template-columns: 1fr 1fr), then stack below 900px. */
.aibs-fcp-for-acf-settings__body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: start;
	gap: 20px;
	max-width: 1200px;
}

.aibs-fcp-for-acf-settings__main {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.aibs-fcp-for-acf-settings__sidebar {
	min-width: 0;
}

@media (max-width: 900px) {
	.aibs-fcp-for-acf-settings__body {
		grid-template-columns: 1fr;
	}
}

.aibs-fcp-for-acf-settings__card {
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 8px;
	overflow: hidden;
}

.aibs-fcp-for-acf-settings__card-header {
	background: #f6f7f7;
	border-bottom: 1px solid #dcdcde;
	padding: 12px 20px;
}

.aibs-fcp-for-acf-settings__card-header h2 {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: #1d2327;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.aibs-fcp-for-acf-settings__card-body {
	padding: 20px;
}

/* Updates */

.aibs-fcp-for-acf-settings__update-text {
	margin: 0 0 16px;
	color: #50575e;
	font-size: 13px;
}

.aibs-fcp-for-acf-settings__update-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

.aibs-fcp-for-acf-settings__support {
	margin: 18px 0 0;
	padding-top: 16px;
	border-top: 1px solid #dcdcde;
	font-size: 13px;
	line-height: 1.6;
	color: #646970;
}

.aibs-fcp-for-acf-settings__support a {
	color: #2271b1;
	font-weight: 600;
	text-decoration: none;
}

.aibs-fcp-for-acf-settings__support a:hover {
	text-decoration: underline;
}

/* How to use */

.aibs-fcp-for-acf-settings__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.aibs-fcp-for-acf-settings__step {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.aibs-fcp-for-acf-settings__step-num {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #2271b1;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 1px;
}

.aibs-fcp-for-acf-settings__step-body {
	flex: 1;
	min-width: 0;
	padding-top: 5px;
}

.aibs-fcp-for-acf-settings__step-body strong {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #1d2327;
	margin-bottom: 4px;
}

.aibs-fcp-for-acf-settings__step-body p {
	margin: 0;
	font-size: 13px;
	color: #50575e;
	line-height: 1.6;
}

/* Notice */

.aibs-fcp-for-acf-settings__notice {
	padding: 10px 14px;
	border-radius: 4px;
	font-size: 13px;
	margin-bottom: 14px;
	border-left: 4px solid transparent;
}

.aibs-fcp-for-acf-settings__notice--success {
	background: #edfaef;
	border-color: #00a32a;
	color: #1a6e2e;
}

.aibs-fcp-for-acf-settings__notice--error {
	background: #fcf0f1;
	border-color: #d63638;
	color: #8a1f1f;
}

.aibs-fcp-for-acf-settings__notice--info {
	background: #f0f6fc;
	border-color: #2271b1;
	color: #1d4468;
}

.aibs-fcp-for-acf-settings__card-body .description {
	margin: 20px 0 0;
	font-size: 15px;
	font-weight: 600;
	color: #1d2327;
	display: flex;
	align-items: center;
	gap: 16px;
}

.aibs-fcp-for-acf-settings__card-body .description a {
	position: relative;
	overflow: hidden;
	display: inline-block;
	flex-shrink: 0;
	margin-top: 0;
	padding: 7px 16px;
	border-radius: 6px;
	background: linear-gradient(135deg, #1d6fba, #2271b1, #1a9fe0);
	background-size: 200% 100%;
	color: #fff !important;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none !important;
	letter-spacing: 0.03em;
	box-shadow: 0 2px 8px rgba(34, 113, 177, 0.45);
	animation: aibs-fcp-for-acf-settings-bg 3s ease infinite, aibs-fcp-for-acf-settings-shine 2.5s ease-in-out infinite;
}

.aibs-fcp-for-acf-settings__card-body .description a::after {
	content: '';
	position: absolute;
	top: 0;
	left: -75%;
	width: 50%;
	height: 100%;
	background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%);
	animation: aibs-fcp-for-acf-settings-shine-sweep 2.5s ease-in-out infinite;
}

.aibs-fcp-for-acf-settings__card-body .description a:hover {
	box-shadow: 0 4px 14px rgba(34, 113, 177, 0.6);
}

@keyframes aibs-fcp-for-acf-settings-bg {
	0%   { background-position: 0% 50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

@keyframes aibs-fcp-for-acf-settings-shine-sweep {
	0%   { left: -75%; }
	60%  { left: 125%; }
	100% { left: 125%; }
}

/* Uninstall card */

.aibs-fcp-for-acf-settings__data-row {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.aibs-fcp-for-acf-settings__toggle-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.aibs-fcp-for-acf-settings__toggle {
	flex-shrink: 0;
	display: inline-block;
	cursor: pointer;
	line-height: 0;
}

.aibs-fcp-for-acf-settings__toggle input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	margin: 0;
}

.aibs-fcp-for-acf-settings__toggle-track {
	display: inline-block;
	position: relative;
	width: 40px;
	height: 22px;
	border-radius: 11px;
	background: #c3c4c7;
	transition: background 0.2s;
}

.aibs-fcp-for-acf-settings__toggle-track::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,0.25);
	transition: transform 0.2s;
}

.aibs-fcp-for-acf-settings__toggle input[type="checkbox"]:checked + .aibs-fcp-for-acf-settings__toggle-track {
	background: #2271b1;
}

.aibs-fcp-for-acf-settings__toggle input[type="checkbox"]:checked + .aibs-fcp-for-acf-settings__toggle-track::after {
	transform: translateX(18px);
}

.aibs-fcp-for-acf-settings__toggle-label {
	font-size: 13px;
	font-weight: 500;
	color: #1d2327;
	cursor: pointer;
	line-height: 1.4;
}

.aibs-fcp-for-acf-settings__data-hint {
	margin: 0 0 0 50px !important;
	font-size: 12px !important;
	color: #787c82;
	line-height: 1.6;
}

.aibs-fcp-for-acf-settings__data-footer {
	display: flex;
	justify-content: flex-end;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid #f0f0f1;
}

/* Buy me a coffee card (sidebar) */

.aibs-fcp-for-acf-settings__coffee-card {
	border-color: #f2d675;
	box-shadow: 0 4px 18px rgba(191, 149, 0, 0.16);
}

.aibs-fcp-for-acf-settings__coffee-card .aibs-fcp-for-acf-settings__card-header {
	background: linear-gradient(135deg, #fff6d1, #ffe694);
	border-bottom-color: #f2d675;
}

.aibs-fcp-for-acf-settings__coffee {
	position: relative;
	overflow: hidden;
	text-align: center;
	background: linear-gradient(180deg, #fffdf3 0%, #fff8e0 100%);
}

/* Soft radial glow behind the cup */
.aibs-fcp-for-acf-settings__coffee::before {
	content: '';
	position: absolute;
	top: -70px;
	left: 50%;
	width: 260px;
	height: 260px;
	transform: translateX(-50%);
	background: radial-gradient(circle, rgba(255, 221, 0, 0.28) 0%, rgba(255, 221, 0, 0) 70%);
	pointer-events: none;
}

.aibs-fcp-for-acf-settings__coffee > * {
	position: relative;
}

.aibs-fcp-for-acf-settings__coffee-art {
	display: block;
	margin: 4px auto 14px;
	width: 96px;
}

.aibs-fcp-for-acf-settings__coffee-steam {
	display: block;
	width: 44px;
	height: 24px;
	margin: 0 auto -4px;
	color: #d9b430;
	opacity: 0.75;
}

.aibs-fcp-for-acf-settings__coffee-steam path {
	stroke-dasharray: 26;
	animation: aibs-fcp-for-acf-settings-steam 2.8s ease-in-out infinite;
}

.aibs-fcp-for-acf-settings__coffee-steam path:nth-child(2) {
	animation-delay: -0.9s;
}

.aibs-fcp-for-acf-settings__coffee-steam path:nth-child(3) {
	animation-delay: -1.8s;
}

.aibs-fcp-for-acf-settings__coffee-cup {
	display: block;
	width: 84px;
	height: 70px;
	margin: 0 auto;
	color: #3d2c00;
	animation: aibs-fcp-for-acf-settings-cup 4s ease-in-out infinite;
}

.aibs-fcp-for-acf-settings__coffee-title {
	margin: 0 0 8px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	color: #1d2327;
}

.aibs-fcp-for-acf-settings__coffee-text {
	margin: 0 0 18px;
	font-size: 13px;
	line-height: 1.6;
	color: #50575e;
}

.aibs-fcp-for-acf-settings__coffee-btn {
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 12px 26px;
	border: 1px solid #e5c200;
	border-radius: 5px;
	background: linear-gradient(135deg, #ffe259, #ffdd00, #ffc400);
	background-size: 200% 100%;
	color: #1d2327 !important;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none !important;
	letter-spacing: 0.01em;
	box-shadow: 0 3px 12px rgba(214, 173, 0, 0.5);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	animation: aibs-fcp-for-acf-settings-bg 4s ease infinite;
}

.aibs-fcp-for-acf-settings__coffee-btn svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

/* Light sweep across the button */
.aibs-fcp-for-acf-settings__coffee-btn::after {
	content: '';
	position: absolute;
	top: 0;
	left: -75%;
	width: 50%;
	height: 100%;
	background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.65) 50%, transparent 100%);
	animation: aibs-fcp-for-acf-settings-shine-sweep 3s ease-in-out infinite;
	pointer-events: none;
}

.aibs-fcp-for-acf-settings__coffee-btn:hover,
.aibs-fcp-for-acf-settings__coffee-btn:focus {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(214, 173, 0, 0.65);
	color: #1d2327 !important;
}

.aibs-fcp-for-acf-settings__coffee-btn:focus {
	outline: 2px solid #2271b1;
	outline-offset: 2px;
}

.aibs-fcp-for-acf-settings__coffee-btn:active {
	transform: translateY(0);
}

@keyframes aibs-fcp-for-acf-settings-steam {
	0%   { opacity: 0;    stroke-dashoffset: 26; }
	35%  { opacity: 0.85; }
	100% { opacity: 0;    stroke-dashoffset: -26; }
}

@keyframes aibs-fcp-for-acf-settings-cup {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-4px); }
}

/* Respect users who ask the OS to reduce motion. */
@media (prefers-reduced-motion: reduce) {
	.aibs-fcp-for-acf-settings__coffee-steam path,
	.aibs-fcp-for-acf-settings__coffee-cup,
	.aibs-fcp-for-acf-settings__coffee-btn,
	.aibs-fcp-for-acf-settings__coffee-btn::after {
		animation: none;
	}

	.aibs-fcp-for-acf-settings__coffee-btn:hover,
	.aibs-fcp-for-acf-settings__coffee-btn:focus {
		transform: none;
	}
}