/**
 * Стили для Dead Table Checklist
 * 
 * Интерактивная таблица с чекбоксами для выбора наборов
 * 
 * @package WordPress
 * @subpackage YourTheme
 * @since 1.0.0
 */

/* ========================================
   Основной контейнер
   ======================================== */

.dead-table-wrapper {
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 20px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ========================================
   Заголовок
   ======================================== */

.dead-table-title {
	font-size: 32px;
	font-weight: 700;
	text-align: center;
	margin-bottom: 40px;
	color: #1a1a1a;
	line-height: 1.3;
}

/* ========================================
   Контейнер таблицы
   ======================================== */

.dead-table-container {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-bottom: 30px;
	border-radius: 12px;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	-webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	-moz-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* ========================================
   Таблица
   ======================================== */

.dead-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background-color: #ffffff;
	border-radius: 12px;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	overflow: hidden;
}

/* ========================================
   Заголовок таблицы
   ======================================== */

.dead-table thead {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	background: -webkit-linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	background: -moz-linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.dead-table-header {
	padding: 20px 24px;
	font-size: 16px;
	font-weight: 600;
	text-align: left;
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.dead-table-header:first-child {
	width: 120px;
	text-align: center;
}

/* ========================================
   Строки таблицы
   ======================================== */

.dead-table-row {
	border-bottom: 1px solid #e5e7eb;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	cursor: pointer;
}

.dead-table-row:last-child {
	border-bottom: none;
}

.dead-table-row:hover {
	background-color: #f9fafb;
	transform: translateY(-2px);
	-webkit-transform: translateY(-2px);
	-moz-transform: translateY(-2px);
	-ms-transform: translateY(-2px);
	-o-transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	-webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	-moz-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.dead-table-row.dead-table-row-selected {
	background-color: #eff6ff;
	border-left: 4px solid #3b82f6;
}

/* ========================================
   Ячейки таблицы
   ======================================== */

.dead-table-cell {
	padding: 24px;
	font-size: 15px;
	line-height: 1.6;
	color: #374151;
	vertical-align: middle;
}

.dead-table-cell-checkbox {
	text-align: center;
	padding: 20px;
}

.dead-table-cell-description {
	padding-right: 32px;
}

/* ========================================
   Чекбокс
   ======================================== */

.dead-table-checkbox-wrapper {
	display: inline-block;
	position: relative;
}

.dead-table-checkbox {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

.dead-table-checkbox-label {
	display: flex;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flexbox;
	align-items: center;
	-webkit-align-items: center;
	-moz-align-items: center;
	-ms-flex-align: center;
	justify-content: center;
	-webkit-justify-content: center;
	-moz-justify-content: center;
	-ms-flex-pack: center;
	width: 64px;
	height: 64px;
	border: 3px solid #d1d5db;
	border-radius: 12px;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	cursor: pointer;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	background-color: #ffffff;
	position: relative;
	overflow: hidden;
}

.dead-table-checkbox-label:hover {
	border-color: #3b82f6;
	transform: scale(1.05);
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	-ms-transform: scale(1.05);
	-o-transform: scale(1.05);
	box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
	-webkit-box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
	-moz-box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.dead-table-checkbox:checked + .dead-table-checkbox-label {
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	background: -webkit-linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	background: -moz-linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	border-color: #2563eb;
	transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
}

.dead-table-checkbox:checked + .dead-table-checkbox-label .dead-table-number {
	color: #ffffff;
	font-weight: 700;
}

.dead-table-number {
	font-size: 24px;
	font-weight: 600;
	color: #6b7280;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	z-index: 2;
	position: relative;
}

/* Анимация ripple эффекта */
.dead-table-checkbox-label::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.5);
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transition: width 0.6s ease, height 0.6s ease;
	-webkit-transition: width 0.6s ease, height 0.6s ease;
	-moz-transition: width 0.6s ease, height 0.6s ease;
	-o-transition: width 0.6s ease, height 0.6s ease;
}

.dead-table-checkbox:checked + .dead-table-checkbox-label::before {
	width: 100px;
	height: 100px;
}

/* ========================================
   Описание
   ======================================== */

.dead-table-description {
	margin: 0;
	font-size: 15px;
	line-height: 1.7;
	color: #4b5563;
}

/* ========================================
   Кнопка заказа
   ======================================== */

.dead-table-footer {
	text-align: center;
	margin-top: 40px;
}

.dead-table-button {
	display: inline-block;
	padding: 16px 48px;
	font-size: 18px;
	font-weight: 600;
	color: #ffffff;
	background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
	background: -webkit-linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
	background: -moz-linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
	border: none;
	border-radius: 12px;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	cursor: pointer;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3);
	-webkit-box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3);
	-moz-box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.dead-table-button:hover {
	background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
	background: -webkit-linear-gradient(135deg, #d97706 0%, #b45309 100%);
	background: -moz-linear-gradient(135deg, #d97706 0%, #b45309 100%);
	transform: translateY(-2px);
	-webkit-transform: translateY(-2px);
	-moz-transform: translateY(-2px);
	-ms-transform: translateY(-2px);
	-o-transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
	-webkit-box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
	-moz-box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
}

.dead-table-button:active {
	transform: translateY(0);
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
	-webkit-box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
	-moz-box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.dead-table-button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	background: #9ca3af;
	box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
}

.dead-table-button:disabled:hover {
	transform: none;
	-webkit-transform: none;
	-moz-transform: none;
	-ms-transform: none;
	-o-transform: none;
}

/* ========================================
   Адаптивность для планшетов
   ======================================== */

@media screen and (max-width: 768px) {
	.dead-table-wrapper {
		padding: 30px 16px;
	}

	.dead-table-title {
		font-size: 26px;
		margin-bottom: 30px;
	}

	.dead-table-header {
		padding: 16px 20px;
		font-size: 14px;
	}

	.dead-table-cell {
		padding: 20px 16px;
		font-size: 14px;
	}

	.dead-table-cell-description {
		padding-right: 20px;
	}

	.dead-table-checkbox-label {
		width: 56px;
		height: 56px;
	}

	.dead-table-number {
		font-size: 20px;
	}

	.dead-table-button {
		padding: 14px 36px;
		font-size: 16px;
	}
}

/* ========================================
   Адаптивность для мобильных устройств
   ======================================== */

@media screen and (max-width: 480px) {
	.dead-table-wrapper {
		padding: 20px 12px;
	}

	.dead-table-title {
		font-size: 22px;
		margin-bottom: 24px;
	}

	.dead-table-container {
		border-radius: 8px;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
	}

	.dead-table {
		border-radius: 8px;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
	}

	.dead-table-header {
		padding: 12px 16px;
		font-size: 12px;
	}

	.dead-table-header:first-child {
		width: 80px;
	}

	.dead-table-cell {
		padding: 16px 12px;
		font-size: 13px;
	}

	.dead-table-cell-checkbox {
		padding: 16px 8px;
	}

	.dead-table-cell-description {
		padding-right: 16px;
	}

	.dead-table-checkbox-label {
		width: 48px;
		height: 48px;
		border-width: 2px;
		border-radius: 8px;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
	}

	.dead-table-number {
		font-size: 18px;
	}

	.dead-table-description {
		font-size: 13px;
		line-height: 1.6;
	}

	.dead-table-footer {
		margin-top: 30px;
	}

	.dead-table-button {
		width: 100%;
		padding: 14px 24px;
		font-size: 15px;
		border-radius: 8px;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
	}
}

/* ========================================
   Доступность
   ======================================== */

.dead-table-checkbox:focus + .dead-table-checkbox-label {
	outline: 2px solid #3b82f6;
	outline-offset: 2px;
}

.dead-table-button:focus {
	outline: 2px solid #f59e0b;
	outline-offset: 2px;
}

/* Убираем outline для мышиных взаимодействий */
.dead-table-checkbox:focus:not(:focus-visible) + .dead-table-checkbox-label {
	outline: none;
}

.dead-table-button:focus:not(:focus-visible) {
	outline: none;
}

/* ========================================
   Анимации
   ======================================== */

@-webkit-keyframes dead-table-fade-in {
	from {
		opacity: 0;
		-webkit-transform: translateY(20px);
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}

@-moz-keyframes dead-table-fade-in {
	from {
		opacity: 0;
		-moz-transform: translateY(20px);
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		-moz-transform: translateY(0);
		transform: translateY(0);
	}
}

@keyframes dead-table-fade-in {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.dead-table-wrapper {
	-webkit-animation: dead-table-fade-in 0.6s ease;
	-moz-animation: dead-table-fade-in 0.6s ease;
	animation: dead-table-fade-in 0.6s ease;
}



.border-red {
	border: solid 2px red;
}