/**
 * FlowRead – Dynamic Word Counter Styles
 *
 * Used by both the admin editor and the frontend.
 * Base colours/sizes are overridden by inline CSS generated from settings.
 */

/* ── Base wrap ─────────────────────────────────────────────────────────────── */
.flowread-dwc-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	padding: 8px 12px;
	border: 1px solid #ddd;
	border-radius: 6px;
	background-color: #fff;
	color: #333;
	font-size: 13px;
	line-height: 1.5;
	box-sizing: border-box;
	transition: border-color 0.25s ease, background-color 0.25s ease;
}

/* ── Row helpers ───────────────────────────────────────────────────────────── */
.flowread-dwc-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	width: 100%;
}

/* ── Inline mode ───────────────────────────────────────────────────────────── */
.flowread-dwc-inline {
	margin-top: 8px;
	margin-bottom: 8px;
	width: 100%;
	max-width: 100%;
}

/* ── Floating mode ─────────────────────────────────────────────────────────── */
.flowread-dwc-floating {
	position: fixed;       /* default: viewport-fixed (admin editor) */
	z-index: 99999;
	min-width: 190px;
	max-width: 260px;
	flex-direction: column;
	align-items: flex-start;
	box-shadow: 0 4px 18px rgba( 0, 0, 0, 0.18 );
	border-radius: 8px;
}

.flowread-dwc-pos-bottom-right { bottom: 24px; right: 24px; top: auto;  left: auto;  }
.flowread-dwc-pos-bottom-left  { bottom: 24px; left:  24px; top: auto;  right: auto; }
.flowread-dwc-pos-top-right    { top:    80px; right: 24px; bottom: auto; left: auto;  }
.flowread-dwc-pos-top-left     { top:    80px; left:  24px; bottom: auto; right: auto; }

/* ── Frontend: wrapper that anchors the badge to the textarea ──────────────── */
.flowread-dwc-field-wrapper {
	position: relative;
	display: block;
	width: 100%;
}

.flowread-dwc-field-wrapper > textarea,
.flowread-dwc-field-wrapper > input {
	width: 100%;
	box-sizing: border-box;
}

/*
 * Override position:fixed → position:absolute so the badge is anchored
 * to the field wrapper corner rather than the viewport.
 * Offsets are kept small so the badge sits inside the textarea area.
 */
.flowread-dwc-field-wrapper .flowread-dwc-floating {
	position: absolute;
}

.flowread-dwc-field-wrapper .flowread-dwc-pos-bottom-right { bottom: 8px;  right: 8px;  top: auto;   left: auto;  }
.flowread-dwc-field-wrapper .flowread-dwc-pos-bottom-left  { bottom: 8px;  left:  8px;  top: auto;   right: auto; }
.flowread-dwc-field-wrapper .flowread-dwc-pos-top-right    { top:    8px;  right: 8px;  bottom: auto; left: auto;  }
.flowread-dwc-field-wrapper .flowread-dwc-pos-top-left     { top:    8px;  left:  8px;  bottom: auto; right: auto; }

/* ── Count value ───────────────────────────────────────────────────────────── */
.flowread-dwc-count {
	font-weight: 700;
	font-size: 1.15em;
}

/* ── Limits (min / max labels) ─────────────────────────────────────────────── */
.flowread-dwc-limits {
	display: flex;
	gap: 8px;
	font-size: 0.85em;
	color: #666;
	margin-left: 4px;
}

.flowread-dwc-min,
.flowread-dwc-max {
	background: #f0f0f0;
	border-radius: 3px;
	padding: 1px 5px;
}

/* ── Status badge ──────────────────────────────────────────────────────────── */
.flowread-dwc-status {
	font-size: 0.82em;
	padding: 2px 8px;
	border-radius: 4px;
	font-weight: 600;
	margin-left: auto;
}

/* ── State: within range ───────────────────────────────────────────────────── */
.flowread-dwc-ok {
	border-color: #4caf50;
}

.flowread-dwc-ok .flowread-dwc-status {
	background: #e8f5e9;
	color: #2e7d32;
}

/* ── State: too short ──────────────────────────────────────────────────────── */
.flowread-dwc-too-short {
	border-color: #f44336;
}

.flowread-dwc-too-short .flowread-dwc-status {
	background: #ffebee;
	color: #c62828;
}

/* ── State: too long ───────────────────────────────────────────────────────── */
.flowread-dwc-too-long {
	border-color: #f44336;
}

.flowread-dwc-too-long .flowread-dwc-status {
	background: #ffebee;
	color: #c62828;
}

/* ── Progress bar ──────────────────────────────────────────────────────────── */
.flowread-dwc-row-progress {
	padding-top: 2px;
}

.flowread-dwc-progress-bar-track {
	width: 100%;
	height: 6px;
	border-radius: 3px;
	background-color: #e0e0e0;
	overflow: hidden;
	flex: 1 1 100%;
}

.flowread-dwc-progress-bar-inner {
	height: 100%;
	width: 0%;
	border-radius: 3px;
	background-color: #007cba;
	transition: width 0.3s ease;
}

/* ── Admin editor: inline position adjustments ─────────────────────────────── */
.block-editor .flowread-dwc-inline,
#post-body .flowread-dwc-inline {
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
}

/* ── Responsive (mobile) ───────────────────────────────────────────────────── */
@media ( max-width: 600px ) {
	.flowread-dwc-floating {
		min-width: 150px;
		max-width: 90vw;
	}

	.flowread-dwc-pos-bottom-right,
	.flowread-dwc-pos-bottom-left {
		bottom: 12px;
	}

	.flowread-dwc-pos-bottom-right,
	.flowread-dwc-pos-top-right {
		right: 12px;
	}

	.flowread-dwc-pos-bottom-left,
	.flowread-dwc-pos-top-left {
		left: 12px;
	}
}