/* ==========================================================================
   Cleverciti Parking Occupancy – Frontend Styles
   ========================================================================== */

/* Widget container */
.cleverciti-parking {
	display: inline-flex;
	align-items: flex-end;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.2em 0.5em;
	padding: 0.3em 0.6em;
	/* border-radius: .5rem; */
	border-radius: 0;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1;
	background: #f5f5f5;
	border: 2px solid hsl(0, 0%, 100%);
	box-shadow: .1rem .1rem .2rem hsla(0, 0%, 0%, 0.1);
	transition: background 0.2s ease, border-color 0.2s ease;
	vertical-align: middle;
	margin-block-start: 0;
	height: auto;
}

.cleverciti-parking--detail {
	flex-direction: row;
	align-items: flex-start;
	gap: .2em 0;
	flex-wrap: wrap;
	font-size: .9em;
}

.cleverciti-detail__free {
	font-weight: 700;
}

.cleverciti-status {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}

/* -----------------------------------------------------------------------
   Colour variants
   ----------------------------------------------------------------------- */

/* Green – unter threshold_yellow */
.cleverciti-parking--green {
	background: #edf7ed;
	border-color: #4caf50;
	color: #1b5e20;
}

/* Yellow – zwischen threshold_yellow und threshold_red */
.cleverciti-parking--yellow {
	background: #fffde7;
	border-color: #ffc107;
	color: #7c5700;
}

/* Red – über threshold_red */
.cleverciti-parking--red {
	background: #fdecea;
	border-color: #f44336;
	color: #7f0000;
}

/* Unavailable / error */
.cleverciti-parking--unavailable {
	background: #f5f5f5;
	border-color: #bdbdbd;
	color: #757575;
	font-style: italic;
}

/* Placeholder in editor */
.cleverciti-parking--placeholder {
	background: #f9f9f9;
	border: 2px dashed #c3c4c7;
	color: #646970;
	font-style: italic;
	padding: 1em 1.2em;
}

/* -----------------------------------------------------------------------
   Indicator dot
   ----------------------------------------------------------------------- */
.cleverciti-indicator {
	display: inline-block;
	width: .6rem;
	height: .6rem;
	border-radius: 50%;
	flex-shrink: 0;
}

.cleverciti-indicator--green {
	background: #4caf50;
	box-shadow: 0 0 0 3px rgba(76, 175, 80, .25);
}

.cleverciti-indicator--yellow {
	background: #ffc107;
	box-shadow: 0 0 0 3px rgba(255, 193, 7, .25);
}

.cleverciti-indicator--red {
	background: #f44336;
	box-shadow: 0 0 0 3px rgba(244, 67, 54, .25);
}

/* -----------------------------------------------------------------------
   Traffic light (Ampel) variant
   ----------------------------------------------------------------------- */
.cleverciti-traffic-light {
	align-items: center;
}

.cleverciti-traffic-light__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.4em;
	height: 1.4em;
	border-radius: 50%;
	flex-shrink: 0;
}

.cleverciti-traffic-light__icon svg {
	width: 0.85em;
	height: 0.85em;
}

.cleverciti-traffic-light__icon--green {
	background: #4caf50;
	color: #fff;
}

.cleverciti-traffic-light__icon--yellow {
	background: #ffc107;
	color: #7c5700;
}

.cleverciti-traffic-light__icon--red {
	background: #f44336;
	color: #fff;
}

.cleverciti-traffic-light__count {
	font-weight: 700;
}

/* -----------------------------------------------------------------------
   Text elements
   ----------------------------------------------------------------------- */

/* "43 / 46" */
.cleverciti-occupancy {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

.cleverciti-occupancy .of {
	font-weight: 500;
	line-height: 1;
}

/* "gut verfügbar" etc. */
.cleverciti-label {
	font-size: 0.85em;
}

/* "Geschlossen" badge */
.cleverciti-closed {
	font-size: 0.8em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.15em 0.4em;
	border-radius: 3px;
	background: rgba(0, 0, 0, .12);
}

/* -----------------------------------------------------------------------
   Block editor specific (works both in iframed & classic editor)
   ----------------------------------------------------------------------- */
.wp-block[data-type="cleverciti/parking-occupancy"] .cleverciti-parking {
	pointer-events: none;
	/* prevent accidental clicks in editor */
}