/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 */

.wp-block-clientsync-cs-support-frontend {
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

	/* Accessibility styles */
	.screen-reader-text,
	.sr-only {
		border: 0;
		clip: rect(1px, 1px, 1px, 1px);
		clip-path: inset(50%);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
		word-wrap: normal;
	}

	:focus {
		outline: 2px solid rgba(25, 118, 210, 0.5);
		outline-offset: 2px;
	}

	.cs-support-frontend-title {
		margin-top: 0;
		margin-bottom: 20px;
		font-size: 1.5rem;
		font-weight: 600;
		letter-spacing: -0.01em;
	}

	.cs-support-frontend-content {
		max-width: 100%;
		overflow-x: auto;
	}

	.cs-support-tickets-table {
		width: 100%;
		border-collapse: separate;
		border-spacing: 0;
		margin-bottom: 20px;

		th,
 td {
			padding: 12px 16px;
			text-align: left;
			border-bottom: 1px solid rgba(0, 0, 0, 0.08);
		}

		th {
			font-weight: 600;
			position: relative;

			&::after {
				content: "";
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 2px;
				background-color: currentcolor;
				opacity: 0.1;
			}
		}

		// Only apply hover effect if enabled
		.row-hover-enabled & {

			tr:hover {
				background-color: rgba(0, 0, 0, 0.02);
				transition: background-color 0.2s ease;
			}
		}

		.cs-ticket-link {
			text-decoration: none;
			font-weight: 500;
			color: inherit;
			position: relative;
			padding-bottom: 1px;
			transition: all 0.2s ease;

			&::after {
				content: "";
				position: absolute;
				width: 0;
				height: 1px;
				bottom: 0;
				left: 0;
				background-color: currentcolor;
				transition: width 0.3s ease;
			}

			&:hover {

				&::after {
					width: 100%;
				}
			}
		}

		.cs-ticket-status {
			display: inline-flex;
			align-items: center;
			padding: 4px 10px;
			border-radius: 12px;
			font-size: 0.8em;
			font-weight: 600;
			text-align: center;
			white-space: nowrap;
			letter-spacing: 0.01em;

			&::before {
				content: "";
				display: inline-block;
				width: 6px;
				height: 6px;
				border-radius: 50%;
				margin-right: 6px;
			}

			&.status-new {
				background-color: rgba(211, 47, 47, 0.1);
				color: #c62828;

				&::before {
					background-color: #c62828;
				}
			}

			&.status-in-progress {
				background-color: rgba(245, 124, 0, 0.1);
				color: #ef6c00;

				&::before {
					background-color: #ef6c00;
				}
			}

			&.status-resolved {
				background-color: rgba(56, 142, 60, 0.1);
				color: #2e7d32;

				&::before {
					background-color: #2e7d32;
				}
			}
		}
	}

	// Card styles
	&.card-style-default .cs-support-ticket-details {
		padding: 20px;
		background-color: rgba(0, 0, 0, 0.02);
		border-radius: 8px;
		margin-bottom: 20px;
	}

	&.card-style-modern .cs-support-ticket-details {
		padding: 24px;
		background-color: #fff;
		border-radius: 12px;
		margin-bottom: 24px;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
		border: 1px solid rgba(0, 0, 0, 0.05);
	}

	&.card-style-minimal .cs-support-ticket-details {
		padding: 16px 0;
		background-color: transparent;
		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
		margin-bottom: 20px;
	}

	.cs-support-ticket-details {

		h3 {
			margin-top: 0;
			margin-bottom: 16px;
			font-size: 1.3rem;
		}

		.cs-ticket-meta {
			display: flex;
			flex-wrap: wrap;
			gap: 24px;
			margin-bottom: 24px;
			font-size: 0.9em;

			.card-style-modern & {
				padding: 16px;
				background-color: rgba(0, 0, 0, 0.02);
				border-radius: 8px;
				margin-top: 16px;
			}

			.cs-ticket-meta-item {
				display: flex;
				flex-direction: column;

				.card-style-modern & {
					padding: 4px 0;
				}

				.label {
					font-weight: 500;
					color: rgba(0, 0, 0, 0.5);
					font-size: 0.85em;
					margin-bottom: 4px;
					text-transform: uppercase;
					letter-spacing: 0.02em;
				}
			}
		}

		.cs-ticket-description {
			background-color: #fff;
			padding: 16px;
			border-radius: 8px;
			border: 1px solid rgba(0, 0, 0, 0.08);
			margin-bottom: 24px;
			line-height: 1.6;

			.card-style-modern & {
				box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
			}

			.card-style-minimal & {
				padding-left: 0;
				padding-right: 0;
				border-width: 0;
				border-radius: 0;
				background-color: transparent;
			}
		}
	}

	.cs-support-replies {
		margin-top: 32px;

		h3 {
			margin-bottom: 16px;
			font-size: 1.1rem;
			position: relative;

			&::after {
				content: "";
				position: absolute;
				left: 0;
				bottom: -6px;
				width: 40px;
				height: 2px;
				background-color: currentcolor;
				opacity: 0.2;
			}
		}

		.cs-support-reply {
			padding: 16px;
			background-color: #fff;
			border: 1px solid rgba(0, 0, 0, 0.08);
			border-radius: 12px;
			margin-bottom: 16px;
			position: relative;
			transition: transform 0.2s ease, box-shadow 0.2s ease;

			.card-style-modern & {
				box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);

				&:hover {
					transform: translateY(-1px);
					box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
				}
			}

			.card-style-minimal & {
				padding: 12px;
				border-width: 0;
				border-left-width: 3px;
				border-radius: 0;
				background-color: rgba(0, 0, 0, 0.02);
			}

			.cs-reply-header {
				display: flex;
				justify-content: space-between;
				margin-bottom: 12px;
				font-size: 0.9em;
				padding-bottom: 8px;
				border-bottom: 1px solid rgba(0, 0, 0, 0.05);

				.cs-reply-author {
					font-weight: 600;
				}

				.cs-reply-date {
					color: rgba(0, 0, 0, 0.5);
					font-size: 0.9em;
				}
			}

			.cs-reply-content {
				line-height: 1.6;
			}

			&.is-customer {
				background-color: rgba(25, 118, 210, 0.04);
				border-color: rgba(25, 118, 210, 0.2);

				.card-style-minimal & {
					background-color: transparent;
					border-left-color: #1976d2;
				}

				.card-style-modern & {
					background-color: rgba(25, 118, 210, 0.04);
				}
			}
		}
	}

	.cs-support-reply-form {
		margin-top: 32px;

		h3 {
			margin-bottom: 16px;
			font-size: 1.1rem;
			position: relative;

			&::after {
				content: "";
				position: absolute;
				left: 0;
				bottom: -6px;
				width: 40px;
				height: 2px;
				background-color: currentcolor;
				opacity: 0.2;
			}
		}

		textarea {
			width: 100%;
			min-height: 140px;
			padding: 16px;
			border: 1px solid rgba(0, 0, 0, 0.1);
			border-radius: 8px;
			margin-bottom: 16px;
			font-family: inherit;
			font-size: inherit;
			line-height: 1.5;
			transition: border-color 0.2s ease, box-shadow 0.2s ease;

			&:focus {
				outline: none;
				border-color: rgba(25, 118, 210, 0.4);
				box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
			}

			.card-style-modern & {
				box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
			}
		}

		button {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			background-color: #2c3338;
			color: white;
			border: none;
			padding: 12px 20px;
			border-radius: 4px;
			cursor: pointer;
			font-weight: 500;
			font-size: 0.95em;
			transition: all 0.2s ease;
			min-width: 120px;

			&:hover {
				opacity: 0.9;
				transform: translateY(-1px);
				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			}

			&:disabled {
				opacity: 0.6;
				cursor: not-allowed;
				transform: none;
				box-shadow: none;
			}
		}
	}

	.cs-support-no-tickets {
		text-align: center;
		padding: 48px 24px;
		background-color: rgba(0, 0, 0, 0.02);
		border-radius: 12px;

		.card-style-modern & {
			background-color: #fff;
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
			border: 1px solid rgba(0, 0, 0, 0.05);
		}

		.card-style-minimal & {
			background-color: transparent;
			border-top: 1px solid rgba(0, 0, 0, 0.08);
			border-bottom: 1px solid rgba(0, 0, 0, 0.08);
			border-radius: 0;
		}

		p {
			margin-bottom: 24px;
			color: rgba(0, 0, 0, 0.6);
			font-size: 1.1em;
		}

		.cs-support-create-ticket-link {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			background-color: #2c3338;
			color: white;
			text-decoration: none;
			padding: 12px 24px;
			border-radius: 4px;
			font-weight: 500;
			transition: all 0.2s ease;
			min-width: 180px;

			&:hover {
				opacity: 0.9;
				transform: translateY(-1px);
				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			}

			.card-style-minimal & {
				padding: 10px 20px;
				border-width: 0;
			}
		}
	}

	.cs-support-back-link {
		display: inline-flex;
		align-items: center;
		margin-bottom: 24px;
		text-decoration: none;
		color: inherit;
		font-weight: 500;
		padding: 8px 16px;
		border-radius: 30px;
		transition: all 0.2s ease;
		background-color: rgba(0, 0, 0, 0.03);

		svg {
			width: 20px;
			height: 20px;
			margin-right: 8px;
		}

		&:hover {
			background-color: rgba(0, 0, 0, 0.08);
			transform: translateX(-3px);
		}

		.card-style-modern & {
			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
		}
	}

	.cs-support-pagination {
		display: flex;
		justify-content: center;
		margin-top: 24px;
		gap: 6px;

		.cs-pagination-button {
			background-color: transparent;
			border: 1px solid rgba(0, 0, 0, 0.15);
			min-width: 36px;
			height: 36px;
			padding: 0;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			border-radius: 4px;
			font-weight: 500;
			transition: all 0.15s ease;
			cursor: pointer;

			.card-style-modern & {
				box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
			}

			&.active {
				background-color: #2c3338;
				color: white;
				border-color: #2c3338;
			}

			&:hover:not(:disabled):not(.active) {
				background-color: rgba(0, 0, 0, 0.04);
				transform: translateY(-1px);
			}

			&:disabled {
				opacity: 0.5;
				cursor: not-allowed;
			}
		}
	}

	.cs-support-loading {
		text-align: center;
		padding: 40px 20px;
		position: relative;

		&::after {
			content: "";
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 24px;
			height: 24px;
			border: 2px solid rgba(0, 0, 0, 0.1);
			border-top-color: #2c3338;
			border-radius: 50%;
			margin-top: 24px;
			animation: cs-spin 0.8s infinite linear;
		}

		@keyframes cs-spin {

			0% {
				transform: translate(-50%, -50%) rotate(0deg);
			}

			100% {
				transform: translate(-50%, -50%) rotate(360deg);
			}
		}
	}

	.cs-support-error,
	.cs-form-error {
		padding: 16px;
		background-color: rgba(211, 47, 47, 0.05);
		color: #c62828;
		border-radius: 8px;
		margin-bottom: 24px;
		border-left: 3px solid #c62828;

		.card-style-modern & {
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
		}
	}

	.cs-form-error {
		margin-top: 8px;
		padding: 8px 12px;
		font-size: 0.9em;
	}

	/* Enhanced styling options */

	/* Font Size Variants */
	&.font-size-small {
		font-size: 14px;

		.cs-support-frontend-title {
			font-size: 1.3rem;
		}

		.cs-support-tickets-table th,
		.cs-support-tickets-table td {
			padding: 8px 12px;
			font-size: 13px;
		}
	}

	&.font-size-large {
		font-size: 18px;

		.cs-support-frontend-title {
			font-size: 1.8rem;
		}

		.cs-support-tickets-table th,
		.cs-support-tickets-table td {
			padding: 16px 20px;
			font-size: 17px;
		}
	}

	&.font-size-x-large {
		font-size: 20px;

		.cs-support-frontend-title {
			font-size: 2rem;
		}

		.cs-support-tickets-table th,
		.cs-support-tickets-table td {
			padding: 20px 24px;
			font-size: 19px;
		}
	}

	/* Spacing Variants */
	&.spacing-tight {

		.cs-support-frontend-container {
			padding: 12px;
		}

		.cs-support-frontend-title {
			margin-bottom: 12px;
		}

		.cs-support-tickets-table {
			margin-bottom: 12px;
		}

		.cs-support-ticket-details {
			margin-bottom: 12px;
		}
	}

	&.spacing-loose {

		.cs-support-frontend-container {
			padding: 32px;
		}

		.cs-support-frontend-title {
			margin-bottom: 32px;
		}

		.cs-support-tickets-table {
			margin-bottom: 32px;
		}

		.cs-support-ticket-details {
			margin-bottom: 32px;
		}
	}

	/* Compact View */
	&.compact-view {

		.cs-support-tickets-table th,
		.cs-support-tickets-table td {
			padding: 6px 10px;
		}

		.cs-support-frontend-title {
			font-size: 1.2rem;
			margin-bottom: 12px;
		}

		.cs-support-ticket-details {
			padding: 12px;
		}

		.cs-support-reply {
			padding: 10px;
			margin-bottom: 8px;
		}
	}

	/* Table Styling Options */
	&.table-striped {

		.cs-support-tickets-table tbody tr:nth-child(even) {
			background-color: rgba(0, 0, 0, 0.02);
		}

		&.card-style-modern tbody tr:nth-child(even) {
			background-color: rgba(0, 0, 0, 0.01);
		}
	}

	&.table-bordered {

		.cs-support-tickets-table {
			border: 1px solid rgba(0, 0, 0, 0.1);

			th,
 td {
				border: 1px solid rgba(0, 0, 0, 0.08);
			}
		}

		&.card-style-modern .cs-support-tickets-table {
			border-color: rgba(0, 0, 0, 0.05);

			th,
 td {
				border-color: rgba(0, 0, 0, 0.04);
			}
		}
	}

	/* Search and Filter Controls */
	&.has-search,
	&.has-filters {

		.cs-support-controls {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: 12px;
			margin-bottom: 20px;
			padding: 16px;
			background-color: rgba(0, 0, 0, 0.02);
			border-radius: 8px;
			border: 1px solid rgba(0, 0, 0, 0.05);

			.card-style-modern & {
				background-color: #fff;
				box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
			}

			.card-style-minimal & {
				background-color: transparent;
				border-width: 0;
				border-bottom: 1px solid rgba(0, 0, 0, 0.08);
				border-radius: 0;
				padding-left: 0;
				padding-right: 0;
			}
		}

		.cs-support-search {
			flex: 1;
			min-width: 200px;

			input {
				width: 100%;
				padding: 8px 12px;
				border: 1px solid rgba(0, 0, 0, 0.2);
				border-radius: 4px;
				font-size: inherit;

				&:focus {
					outline: none;
					border-color: var(--cs-primary-color, #1976d2);
					box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.1);
				}
			}
		}

		.cs-support-filters {
			display: flex;
			gap: 8px;
			flex-wrap: wrap;

			.filter-button {
				padding: 6px 12px;
				border: 1px solid var(--cs-primary-color, #1976d2);
				background-color: transparent;
				color: var(--cs-primary-color, #1976d2);
				border-radius: 4px;
				cursor: pointer;
				font-size: 0.9em;
				font-weight: 500;
				transition: all 0.2s ease;

				&:hover {
					background-color: var(--cs-primary-color, #1976d2);
					color: white;
				}

				&.active {
					background-color: var(--cs-primary-color, #1976d2);
					color: white;
				}
			}
		}
	}

	/* Sortable Table Headers */
	&.sortable {

		.cs-support-tickets-table th {
			cursor: pointer;
			position: relative;
			transition: background-color 0.2s ease;

			&:hover {
				background-color: rgba(0, 0, 0, 0.1) !important;
			}

			&.sortable-header::after {
				content: "⇅";
				position: absolute;
				right: 8px;
				top: 50%;
				transform: translateY(-50%);
				opacity: 0.5;
				font-size: 0.8em;
			}

			&.sort-asc::after {
				content: "↑";
				opacity: 1;
			}

			&.sort-desc::after {
				content: "↓";
				opacity: 1;
			}
		}
	}

	/* Enhanced Status Colors with CSS Variables */
	.cs-ticket-status {

		&.status-new {
			background-color: rgba(var(--cs-error-color-rgb, 244, 67, 54), 0.1);
			color: var(--cs-error-color, #f44336);

			&::before {
				background-color: var(--cs-error-color, #f44336);
			}
		}

		&.status-in-progress {
			background-color: rgba(var(--cs-warning-color-rgb, 255, 152, 0), 0.1);
			color: var(--cs-warning-color, #ff9800);

			&::before {
				background-color: var(--cs-warning-color, #ff9800);
			}
		}

		&.status-resolved {
			background-color: rgba(var(--cs-success-color-rgb, 76, 175, 80), 0.1);
			color: var(--cs-success-color, #4caf50);

			&::before {
				background-color: var(--cs-success-color, #4caf50);
			}
		}
	}

	/* Enhanced button styles using CSS variables */
	.cs-support-create-ticket-link,
	.cs-support-reply-form button,
	.cs-support-login-link {
		background-color: var(--cs-primary-color, #1976d2);

		&:hover {
			background-color: var(--cs-primary-color-hover, #1565c0);
		}
	}

	/* Responsive Design Enhancements */
	@media (max-width: 768px) {

		&.has-search .cs-support-controls {
			flex-direction: column;
			align-items: stretch;
		}

		&.has-filters .cs-support-filters {
			justify-content: center;
		}

		.cs-support-tickets-table {
			font-size: 0.9em;

			th,
 td {
				padding: 8px 6px;
			}
		}

		&.compact-view .cs-support-tickets-table {

			th,
 td {
				padding: 4px;
				font-size: 0.8em;
			}
		}
	}

	@media (max-width: 480px) {

		.cs-support-tickets-table {

			th,
 td {
				padding: 6px 4px;
				font-size: 0.8em;
			}
		}

		&.spacing-loose {

			.cs-support-frontend-container {
				padding: 16px;
			}
		}
	}
}

.cs-support-login-required {
	text-align: center;
	padding: 48px 24px;
	background-color: #f8f9fa;
	border-radius: 12px;
	color: #333;
	box-shadow: 0 1px 8px rgba(0, 0, 0, 0.05);

	p {
		font-size: 1.1em;
		margin-bottom: 24px;
		color: rgba(0, 0, 0, 0.7);
	}

	.cs-support-login-link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		margin-top: 16px;
		padding: 12px 24px;
		background-color: #2c3338;
		color: white;
		text-decoration: none;
		border-radius: 4px;
		font-weight: 500;
		transition: all 0.2s ease;
		min-width: 120px;

		&:hover {
			opacity: 0.9;
			transform: translateY(-1px);
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		}
	}

	.card-style-modern & {
		border: 1px solid rgba(0, 0, 0, 0.05);
	}

	.card-style-minimal & {
		background-color: transparent;
		box-shadow: none;
		border-top: 1px solid rgba(0, 0, 0, 0.08);
		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
		border-radius: 0;
	}
}