/**
 * MWS Responsive Tables - Styles
 */

/* Base Table Styles */
.mws-responsive-table {
	width: 100%;
	border-collapse: collapse;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	border: 1px solid #dee2e6;
	table-layout: fixed;
}

/* Override theme reset styles */
table.mws-responsive-table td,
table.mws-responsive-table th {
	border: none;
	padding: inherit;
	line-height: inherit;
}

/* Header Styles */
.mws-table-header th {
	text-align: left;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	font-size: 0.85em;
	border: none;
}

/* Body Styles */
.mws-table-body td {
	border: none;
	border-bottom: 1px solid #dee2e6;
	vertical-align: middle;
}

.mws-table-body tr:last-child td {
	border-bottom: none;
}

/* Striped Rows */
.mws-table--striped .mws-table-body tr:nth-child(even) {
	background-color: #f8f9fa;
}

/* Hover Effect - only when enabled */
.mws-table--hover .mws-table-body tr {
	transition: background-color 0.2s ease;
}

.mws-table--hover .mws-table-body tr:hover {
	background-color: #e9ecef;
}

/* No hover - disable all hover effects */
.mws-responsive-table:not(.mws-table--hover) .mws-table-body tr:hover {
	background-color: inherit !important;
}

/* Mobile Card Variables (set via Elementor controls) */
.mws-responsive-table {
	--mws-card-spacing: 15px;
	--mws-card-radius: 8px;
	--mws-card-bg: #ffffff;
}

/* Animation for smooth transitions - only when hover enabled */
.mws-table--hover .mws-table-body tr,
.mws-table--hover .mws-table-body td {
	transition: all 0.2s ease;
}

/* Ensure content wraps nicely */
.mws-table-body td {
	word-wrap: break-word;
	overflow-wrap: break-word;
}

/* Cell content with icon */
.mws-cell-content {
	display: inline-flex;
	align-items: center;
}

/* Icon styles */
.mws-cell-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.mws-cell-icon svg {
	display: block;
}

/* No borders variant */
.mws-table--no-borders,
.mws-table--no-borders tr,
.mws-table--no-borders td,
.mws-table--no-borders th,
.mws-table--no-borders .mws-table-header th,
.mws-table--no-borders .mws-table-body tr,
.mws-table--no-borders .mws-table-body td,
table.mws-table--no-borders td,
table.mws-table--no-borders th {
	border: none !important;
	box-shadow: none !important;
}

/* Mobile card enhancements - applied via inline styles per breakpoint */
/* These are fallback styles for common mobile sizes */
@media (max-width: 768px) {
	.mws-responsive-table {
		box-shadow: none;
		border: none;
		background: transparent;
	}
}