/**
 * Logs Viewer — Admin Styles (BEM)
 *
 * Full design-system integration with --sp-* tokens.
 * Block: .seopulse-logs
 *
 * @package SEOPulse
 * @since   1.0.0
 */

/* ── Main container ─────────────────────────────────────────── */
.seopulse-logs {
	max-width: 100%;
	box-shadow: var(--sp-shadow-sm);
}

/* ── Statistics grid ────────────────────────────────────────── */
.seopulse-logs__stats {
	background-color: var(--sp-surface-solid);
	border: 1px solid var(--sp-border-strong);
	border-style: none solid none solid;
}

.seopulse-logs__stats .seopulse-stats-grid {
	padding: var(--sp-space-6);
}

.seopulse-logs__stats .seopulse-stat-icon {
	color: var(--sp-accent);
}

.seopulse-logs__stats .seopulse-stat-box--errors .seopulse-stat-icon {
	color: var(--sp-error);
}

.seopulse-logs__stats .seopulse-stat-box--warnings .seopulse-stat-icon {
	color: var(--sp-warning-text);
}

/* ── Body: sidebar + content ────────────────────────────────── */
.seopulse-logs__body {
	display: flex;
	gap: 0;
	min-height: 500px;
	background: var(--sp-surface-solid);
	overflow: visible;
}

/* ── Left column (sidebar) ──────────────────────────────────── */
.seopulse-logs__left {
	display: flex;
	flex-direction: column;
	width: 220px;
	min-width: 220px;
	background: var(--sp-glass-bg);
	backdrop-filter: blur(var(--sp-depth-blur-elevated));
	-webkit-backdrop-filter: blur(var(--sp-depth-blur-elevated));
	border-right: 1px solid var(--sp-border-color);
	border-radius: 0 0 0 var(--sp-radius-xl);
	position: sticky;
	top: 80px;
	align-self: flex-start;
	max-height: calc(100vh - 80px);
}

/* ── Sidebar navigation ─────────────────────────────────────── */
.seopulse-logs__sidebar {
	flex: 1;
	overflow-y: auto;
	padding: var(--sp-space-3) 0;
}

.seopulse-logs__nav-btn {
	display: flex;
	align-items: center;
	gap: var(--sp-space-3);
	width: 100%;
	padding: var(--sp-space-3) var(--sp-space-5);
	margin: 0;
	background: transparent;
	border: none;
	border-left: 3px solid transparent;
	cursor: pointer;
	font-size: var(--sp-text-meta);
	font-weight: var(--sp-weight-semibold);
	font-family: var(--sp-font-family);
	color: var(--sp-text-secondary);
	text-align: left;
	transition: all var(--sp-transition-fast);
}

.seopulse-logs__nav-btn .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
	line-height: 18px;
	opacity: 0.55;
	transition: opacity var(--sp-transition-fast), color var(--sp-transition-fast);
}

.seopulse-logs__nav-btn:hover {
	background: var(--sp-surface-hover);
	color: var(--sp-text-primary);
}

.seopulse-logs__nav-btn:hover .dashicons {
	opacity: 0.85;
}

.seopulse-logs__nav-btn.active {
	background: var(--sp-accent-subtle);
	color: var(--sp-accent);
	border-left-color: var(--sp-accent);
	font-weight: var(--sp-weight-semibold);
}

.seopulse-logs__nav-btn.active .dashicons {
	color: var(--sp-accent);
	opacity: 1;
}

/* ── Sidebar badge counter ──────────────────────────────────── */
.seopulse-logs__nav-badge {
	margin-left: auto;
	font-size: 11px;
	font-weight: var(--sp-weight-bold);
	min-width: 22px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	border-radius: 10px;
	padding: 0 6px;
	background: var(--sp-gray-100);
	color: var(--sp-text-secondary);
}

.seopulse-logs__nav-btn.active .seopulse-logs__nav-badge {
	background: var(--sp-accent);
	color: #fff;
}

.seopulse-logs__nav-btn--error .seopulse-logs__nav-badge {
	background: var(--sp-error-subtle);
	color: var(--sp-error-text);
}

.seopulse-logs__nav-btn--warning .seopulse-logs__nav-badge {
	background: var(--sp-warning-subtle);
	color: var(--sp-warning-text);
}

/* ── Content area ───────────────────────────────────────────── */
.seopulse-logs__content {
	flex: 1;
	min-width: 0;
	padding: 0;
	border-left: 1px solid var(--sp-border-color);
}

/* ── Panel (tab content) ────────────────────────────────────── */
.seopulse-logs__panel {
	display: none;
	padding: var(--sp-space-8);
}

.seopulse-logs__panel.active {
	display: block;
}

/* ── Section header ─────────────────────────────────────────── */
.seopulse-logs__section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--sp-space-5);
	flex-wrap: wrap;
	gap: var(--sp-space-3);
}

.seopulse-logs__section-title {
	display: flex;
	align-items: center;
	gap: var(--sp-space-2);
	margin: 0 0 var(--sp-space-2);
	font-size: var(--sp-text-lg);
	font-weight: var(--sp-weight-semibold);
	color: var(--sp-text-primary);
	letter-spacing: var(--sp-tracking-tight);
}

.seopulse-logs__section-desc {
	margin: 0 0 var(--sp-space-4);
	color: var(--sp-text-secondary);
	font-size: var(--sp-text-meta);
	line-height: var(--sp-leading-relaxed);
}

/* ── Toolbar ────────────────────────────────────────────────── */
.seopulse-logs__toolbar {
	display: flex;
	align-items: center;
	gap: var(--sp-space-3);
	flex-wrap: wrap;
	margin-bottom: var(--sp-space-5);
	padding: var(--sp-space-4);
	background: var(--sp-gray-50);
	border-radius: var(--sp-radius-lg);
	border: 1px solid var(--sp-border-color);
}

.seopulse-logs__toolbar-group {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-space-2);
}

.seopulse-logs__toolbar-separator {
	width: 1px;
	height: 24px;
	background: var(--sp-border-color);
	margin: 0 var(--sp-space-2);
}

.seopulse-logs__file-size {
	font-size: var(--sp-text-sm);
	color: var(--sp-text-secondary);
	font-weight: var(--sp-weight-medium);
}

.seopulse-logs__file-size .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
	line-height: 16px;
	vertical-align: middle;
	margin-right: 4px;
	color: var(--sp-text-tertiary);
}

/* ── Log table ──────────────────────────────────────────────── */
.seopulse-logs__table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--sp-border-color);
	border-radius: var(--sp-radius-lg);
	overflow: hidden;
	font-size: var(--sp-text-sm);
}

.seopulse-logs__table thead th {
	background: var(--sp-gray-50);
	color: var(--sp-text-secondary);
	font-weight: var(--sp-weight-semibold);
	font-size: var(--sp-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: var(--sp-space-3) var(--sp-space-4);
	text-align: left;
	border-bottom: 2px solid var(--sp-border-color);
	white-space: nowrap;
}

.seopulse-logs__table tbody tr {
	border-bottom: 1px solid var(--sp-border-subtle);
	transition: background var(--sp-transition-fast);
}

.seopulse-logs__table tbody tr:hover {
	background: var(--sp-surface-hover);
}

.seopulse-logs__table tbody tr:last-child {
	border-bottom: none;
}

.seopulse-logs__table tbody td {
	padding: var(--sp-space-3) var(--sp-space-4);
	vertical-align: top;
}

.seopulse-logs__table .seopulse-logs__col-timestamp {
	width: 170px;
	white-space: nowrap;
	font-family: var(--sp-font-mono, monospace);
	font-size: 12px;
	color: var(--sp-text-secondary);
}

.seopulse-logs__table .seopulse-logs__col-level {
	width: 90px;
}

.seopulse-logs__table .seopulse-logs__col-context {
	width: 30%;
}

/* ── Level badges ───────────────────────────────────────────── */
.seopulse-log-level {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 10px;
	border-radius: var(--sp-radius-full);
	font-size: 11px;
	font-weight: var(--sp-weight-bold);
	letter-spacing: 0.3px;
	text-transform: uppercase;
	line-height: 1.6;
}

.seopulse-log-level--error {
	background: var(--sp-error-subtle);
	color: var(--sp-error-text);
}

.seopulse-log-level--warning {
	background: var(--sp-warning-subtle);
	color: var(--sp-warning-text);
}

.seopulse-log-level--info {
	background: var(--sp-info-subtle);
	color: var(--sp-info-text);
}

.seopulse-log-level--debug {
	background: var(--sp-gray-100);
	color: var(--sp-text-secondary);
}

/* ── Context cell ───────────────────────────────────────────── */
.seopulse-logs__context {
	font-family: var(--sp-font-mono, monospace);
	font-size: 12px;
	word-break: break-all;
	color: var(--sp-text-secondary);
	background: var(--sp-gray-50);
	padding: 4px 8px;
	border-radius: var(--sp-radius-sm);
	max-height: 80px;
	overflow-y: auto;
	display: block;
}

/* ── Footer info ────────────────────────────────────────────── */
.seopulse-logs__footer {
	margin-top: var(--sp-space-4);
	padding-top: var(--sp-space-3);
	border-top: 1px solid var(--sp-border-subtle);
	color: var(--sp-text-tertiary);
	font-size: var(--sp-text-sm);
}

/* ── Empty State ────────────────────────────────────────────── */
.seopulse-logs .seopulse-empty-state {
	text-align: center;
	padding: var(--sp-space-12) var(--sp-space-6);
	color: var(--sp-text-tertiary);
	background: var(--sp-gray-50);
	border-radius: var(--sp-radius-xl);
	border: 1px dashed var(--sp-border-color);
}

.seopulse-logs .seopulse-empty-state .dashicons {
	font-size: 48px;
	width: 48px;
	height: 48px;
	margin-bottom: var(--sp-space-4);
	color: var(--sp-accent);
	opacity: 0.35;
}

.seopulse-logs .seopulse-empty-state p {
	margin: 0;
	font-size: var(--sp-text-base);
}

/* ── Success notice ─────────────────────────────────────────── */
.seopulse-logs__notice {
	display: flex;
	align-items: center;
	gap: var(--sp-space-3);
	padding: var(--sp-space-3) var(--sp-space-4);
	margin-bottom: var(--sp-space-4);
	border-radius: var(--sp-radius-md);
	font-size: var(--sp-text-sm);
	font-weight: var(--sp-weight-medium);
}

.seopulse-logs__notice--success {
	background: var(--sp-success-subtle);
	color: var(--sp-success-text);
	border: 1px solid var(--sp-success);
}

.seopulse-logs__notice .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media screen and (max-width: 782px) {

	.seopulse-logs__body {
		flex-direction: column;
		min-height: auto;
	}

	.seopulse-logs__left {
		flex-direction: row;
		flex-wrap: nowrap;
		width: 100%;
		min-width: 0;
		border-right: none;
		border-bottom: 1px solid var(--sp-border-color);
		position: static;
		max-height: none;
		align-self: auto;
		border-radius: 0;
	}

	.seopulse-logs__sidebar {
		display: flex;
		flex-direction: row;
		overflow-x: auto;
		overflow-y: visible;
		padding: 0;
	}

	.seopulse-logs__nav-btn {
		flex: 0 0 auto;
		border-left: none;
		border-bottom: 3px solid transparent;
		padding: var(--sp-space-3) var(--sp-space-4);
		white-space: nowrap;
	}

	.seopulse-logs__nav-btn.active {
		border-left-color: transparent;
		border-bottom-color: var(--sp-accent);
	}

	.seopulse-logs__content {
		border-left: none;
	}

	.seopulse-logs__panel {
		padding: var(--sp-space-4);
	}

	.seopulse-logs__toolbar {
		flex-direction: column;
		align-items: stretch;
	}

	.seopulse-logs__toolbar-separator {
		display: none;
	}

	.seopulse-logs__table {
		font-size: 12px;
	}

	.seopulse-logs__table .seopulse-logs__col-context {
		display: none;
	}
}

/* ══════════════════════════════════════════════════════════════
   ENHANCED FEATURES
   ══════════════════════════════════════════════════════════════ */

/* ── Search input ───────────────────────────────────────────── */
.seopulse-logs__search-input {
	width: 220px;
	padding: 6px 10px 6px 30px;
	border: 1px solid var(--sp-border-color);
	border-radius: var(--sp-radius-md);
	font-size: var(--sp-text-sm);
	font-family: var(--sp-font-family);
	background: #fff url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%239ca3af" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>') no-repeat 8px center;
	transition: border-color var(--sp-transition-fast), box-shadow var(--sp-transition-fast);
}

.seopulse-logs__search-input:focus {
	outline: none;
	border-color: var(--sp-accent);
	box-shadow: 0 0 0 2px var(--sp-accent-subtle);
}

/* ── Date inputs ────────────────────────────────────────────── */
.seopulse-logs__date-input {
	padding: 5px 8px;
	border: 1px solid var(--sp-border-color);
	border-radius: var(--sp-radius-md);
	font-size: var(--sp-text-sm);
	font-family: var(--sp-font-family);
	color: var(--sp-text-primary);
	background: #fff;
	transition: border-color var(--sp-transition-fast);
}

.seopulse-logs__date-input:focus {
	outline: none;
	border-color: var(--sp-accent);
	box-shadow: 0 0 0 2px var(--sp-accent-subtle);
}

/* ── Source select ──────────────────────────────────────────── */
.seopulse-logs__source-select {
	padding: 5px 28px 5px 10px;
	border: 1px solid var(--sp-border-color);
	border-radius: var(--sp-radius-md);
	font-size: var(--sp-text-sm);
	font-family: var(--sp-font-family);
	color: var(--sp-text-primary);
	background: #fff;
	appearance: auto;
	transition: border-color var(--sp-transition-fast);
}

.seopulse-logs__source-select:focus {
	outline: none;
	border-color: var(--sp-accent);
	box-shadow: 0 0 0 2px var(--sp-accent-subtle);
}

/* ── Sparkline in stats ─────────────────────────────────────── */
.seopulse-logs__sparkline {
	display: inline-block;
	width: 120px;
	height: 30px;
	margin-top: var(--sp-space-1);
	vertical-align: middle;
}

.seopulse-logs__sparkline svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* ── Stat sub-text ──────────────────────────────────────────── */
.seopulse-logs__stat-sub {
	display: block;
	font-size: var(--sp-text-xs);
	color: var(--sp-text-tertiary);
	font-weight: var(--sp-weight-regular);
	margin-top: 2px;
}

/* ── Checkbox column ────────────────────────────────────────── */
.seopulse-logs__col-check {
	width: 36px;
	text-align: center;
	padding: var(--sp-space-3) var(--sp-space-2) !important;
}

.seopulse-logs__col-check input[type="checkbox"] {
	margin: 0;
	cursor: pointer;
}

/* ── Actions column ─────────────────────────────────────────── */
.seopulse-logs__col-actions {
	width: 44px;
	text-align: center;
	padding: var(--sp-space-2) !important;
}

/* ── Copy button ────────────────────────────────────────────── */
.seopulse-logs__copy-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: none;
	border-radius: var(--sp-radius-sm);
	background: transparent;
	color: var(--sp-text-tertiary);
	cursor: pointer;
	transition: background var(--sp-transition-fast), color var(--sp-transition-fast);
}

.seopulse-logs__copy-btn:hover {
	background: var(--sp-gray-100);
	color: var(--sp-accent);
}

.seopulse-logs__copy-btn .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
	line-height: 16px;
}

/* ── Expandable context ─────────────────────────────────────── */
.seopulse-logs__context-toggle {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	max-width: 100%;
	padding: 2px 4px;
	border: none;
	border-radius: var(--sp-radius-sm);
	background: transparent;
	color: var(--sp-text-secondary);
	cursor: pointer;
	font-family: var(--sp-font-mono, monospace);
	font-size: 12px;
	text-align: left;
	transition: background var(--sp-transition-fast);
}

.seopulse-logs__context-toggle:hover {
	background: var(--sp-gray-100);
}

.seopulse-logs__context-toggle .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
	line-height: 14px;
	flex-shrink: 0;
	transition: transform var(--sp-transition-fast);
}

.seopulse-logs__context-preview {
	display: inline-block;
	max-width: 260px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--sp-text-tertiary);
}

.seopulse-logs__context-full {
	display: none;
	margin-top: var(--sp-space-2);
	background: var(--sp-gray-50);
	border: 1px solid var(--sp-border-subtle);
	border-radius: var(--sp-radius-md);
	font-family: var(--sp-font-mono, monospace);
	font-size: 12px;
	color: var(--sp-text-secondary);
	white-space: pre-wrap;
	word-break: break-word;
	max-height: 300px;
	overflow-y: auto;
}

.seopulse-logs__context-empty {
	color: var(--sp-text-tertiary);
	font-style: italic;
}

/* ── Bulk actions bar ───────────────────────────────────────── */
.seopulse-logs__bulk-actions {
	display: none;
	align-items: center;
	gap: var(--sp-space-3);
	padding: var(--sp-space-3) var(--sp-space-4);
	margin-bottom: var(--sp-space-4);
	background: var(--sp-accent-subtle);
	border: 1px solid var(--sp-accent);
	border-radius: var(--sp-radius-md);
	font-size: var(--sp-text-sm);
	color: var(--sp-accent);
}

.seopulse-logs__bulk-actions .seopulse-logs__selected-count {
	font-weight: var(--sp-weight-semibold);
}

.seopulse-logs__bulk-delete {
	padding: 4px 12px;
	border: 1px solid var(--sp-error);
	border-radius: var(--sp-radius-md);
	background: var(--sp-error-subtle);
	color: var(--sp-error-text);
	font-size: var(--sp-text-sm);
	font-weight: var(--sp-weight-medium);
	cursor: pointer;
	transition: background var(--sp-transition-fast);
}

.seopulse-logs__bulk-delete:hover {
	background: var(--sp-error);
	color: #fff;
}

/* ── Auto-refresh ───────────────────────────────────────────── */
.seopulse-logs__autorefresh {
	padding: 5px 12px;
	border: 1px solid var(--sp-border-color);
	border-radius: var(--sp-radius-md);
	background: #fff;
	color: var(--sp-text-secondary);
	font-size: var(--sp-text-sm);
	cursor: pointer;
	transition: all var(--sp-transition-fast);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.seopulse-logs__autorefresh:hover {
	border-color: var(--sp-accent);
	color: var(--sp-accent);
}

.seopulse-logs__autorefresh--active {
	background: var(--sp-accent-subtle);
	border-color: var(--sp-accent);
	color: var(--sp-accent);
}

.seopulse-logs__autorefresh .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
	line-height: 16px;
}

.seopulse-logs__autorefresh--active .dashicons {
	animation: seopulse-spin 2s linear infinite;
}

.seopulse-logs__refresh-indicator {
	display: none;
	align-items: center;
	gap: 4px;
	font-size: var(--sp-text-xs);
	color: var(--sp-accent);
}

@keyframes seopulse-spin {

	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

/* ── Pagination ─────────────────────────────────────────────── */
.seopulse-logs__pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: var(--sp-space-5);
	padding-top: var(--sp-space-4);
	border-top: 1px solid var(--sp-border-subtle);
	flex-wrap: wrap;
	gap: var(--sp-space-3);
}

.seopulse-logs__pagination-info {
	font-size: var(--sp-text-sm);
	color: var(--sp-text-secondary);
}

.seopulse-logs__pagination-nav {
	display: flex;
	align-items: center;
	gap: 4px;
}

.seopulse-logs__page-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 8px;
	border: 1px solid var(--sp-border-color);
	border-radius: var(--sp-radius-md);
	background: #fff;
	color: var(--sp-text-secondary);
	font-size: var(--sp-text-sm);
	text-decoration: none;
	transition: all var(--sp-transition-fast);
	cursor: pointer;
}

.seopulse-logs__page-btn:hover {
	border-color: var(--sp-accent);
	color: var(--sp-accent);
	text-decoration: none;
}

.seopulse-logs__page-btn--current {
	background: var(--sp-accent);
	border-color: var(--sp-accent);
	color: #fff;
	font-weight: var(--sp-weight-semibold);
	pointer-events: none;
}

.seopulse-logs__page-btn--disabled {
	opacity: 0.4;
	pointer-events: none;
}

.seopulse-logs__page-ellipsis {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	color: var(--sp-text-tertiary);
	font-size: var(--sp-text-sm);
}

/* ── Sidebar separator ──────────────────────────────────────── */
.seopulse-logs__nav-separator {
	height: 1px;
	margin: var(--sp-space-3) var(--sp-space-4);
	background: var(--sp-border-subtle);
}

/* ── Settings panel ─────────────────────────────────────────── */
.seopulse-logs__settings-form {
	max-width: 520px;
}

.seopulse-logs__setting-row {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-space-4);
	padding: var(--sp-space-4) 0;
	border-bottom: 1px solid var(--sp-border-subtle);
}

.seopulse-logs__setting-row:last-of-type {
	border-bottom: none;
}

.seopulse-logs__setting-row label {
	display: block;
	min-width: 150px;
	font-weight: var(--sp-weight-semibold);
	font-size: var(--sp-text-sm);
	color: var(--sp-text-primary);
	padding-top: 6px;
}

.seopulse-logs__setting-row select {
	padding: 6px 28px 6px 10px;
	border: 1px solid var(--sp-border-color);
	border-radius: var(--sp-radius-md);
	font-size: var(--sp-text-sm);
	font-family: var(--sp-font-family);
	background: #fff;
}

.seopulse-logs__setting-help {
	display: block;
	margin-top: 4px;
	font-size: var(--sp-text-xs);
	color: var(--sp-text-tertiary);
}

.seopulse-logs__settings-actions {
	margin-top: var(--sp-space-5);
	padding-top: var(--sp-space-4);
	border-top: 1px solid var(--sp-border-subtle);
}

/* ── Toast notification ─────────────────────────────────────── */
.seopulse-logs__toast {
	display: none;
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 100000;
	padding: var(--sp-space-3) var(--sp-space-5);
	background: var(--sp-surface-solid);
	border: 1px solid var(--sp-border-strong);
	border-radius: var(--sp-radius-lg);
	box-shadow: var(--sp-shadow-card);
	font-size: var(--sp-text-sm);
	font-weight: var(--sp-weight-medium);
	color: var(--sp-text-primary);
}

/* ── Responsive additions ───────────────────────────────────── */
@media screen and (max-width: 782px) {

	.seopulse-logs__search-input {
		width: 100%;
	}

	.seopulse-logs__pagination {
		flex-direction: column;
		align-items: flex-start;
	}

	.seopulse-logs__col-check,
	.seopulse-logs__col-actions {
		display: none;
	}

	.seopulse-logs__setting-row {
		flex-direction: column;
		gap: var(--sp-space-2);
	}

	.seopulse-logs__bulk-actions {
		flex-wrap: wrap;
	}
}