/* Formidable Offline Submissions - Frontend Styles */

.frmoff-sync-badge {
	position: fixed;
	z-index: 99999;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	background: #1d2327;
	color: #f0f0f1;
	border-radius: 6px;
	font-size: 13px;
	line-height: 1.4;
	box-shadow: 0 2px 8px rgba(0,0,0,.3);
	transition: opacity .2s ease;
}

.frmoff-pos-bottom-right { bottom: 20px; right: 20px; }
.frmoff-pos-bottom-left  { bottom: 20px; left: 20px; }
.frmoff-pos-top-right    { top: 20px; right: 20px; }
.frmoff-pos-top-left     { top: 20px; left: 20px; }

.frmoff-style-badge { border-radius: 20px; padding: 6px 12px; font-size: 12px; }

.frmoff-style-badge .frmoff-badge-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #2271b1;
	color: #fff;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	font-size: 11px;
	font-weight: 600;
	flex-shrink: 0;
}

.frmoff-style-bar { left: 0; right: 0; width: 100%; border-radius: 0; justify-content: center; gap: 10px; }
.frmoff-style-bar.frmoff-pos-bottom-right,
.frmoff-style-bar.frmoff-pos-bottom-left { bottom: 0; left: 0; right: 0; }
.frmoff-style-bar.frmoff-pos-top-right,
.frmoff-style-bar.frmoff-pos-top-left   { top: 0; left: 0; right: 0; }

.frmoff-badge-retry {
	margin-left: 6px;
	padding: 2px 8px;
	background: rgba(255,255,255,.15);
	border: 1px solid rgba(255,255,255,.3);
	border-radius: 4px;
	color: inherit;
	font-size: 11px;
	cursor: pointer;
}
.frmoff-badge-retry:hover { background: rgba(255,255,255,.25); }

.frmoff-syncing { opacity: .7; }

.frmoff-sync-badge[hidden],
.frmoff-badge-retry[hidden] { display: none; }

/* Queued / error banner */

.frmoff-banner {
	display:       flex;
	align-items:   flex-start;
	gap:           10px;
	padding:       12px 16px;
	margin-bottom: 16px;
	border-radius: 4px;
	font-size:     14px;
	line-height:   1.5;
}

.frmoff-banner--success {
	background:  #eaf3e0;
	border-left: 4px solid #4caf50;
	color:       #2d5a1b;
}

.frmoff-banner--error {
	background:  #fcf0d5;
	border-left: 4px solid #dba617;
	color:       #5c4000;
}

.frmoff-banner__text { flex: 1; }

.frmoff-banner__close {
	flex-shrink:  0;
	background:   none;
	border:       none;
	cursor:       pointer;
	font-size:    18px;
	line-height:  1;
	padding:      0 0 0 8px;
	color:        inherit;
	opacity:      0.6;
}

.frmoff-banner__close:hover { opacity: 1; }