/**
 * Live System V2 - Styles
 * Tab system and responsive card layout
 * 
 * @package Noxora
 */

/* Tab System */
[data-live-tab] {
	padding: 12px 24px;
	border: none;
	background: transparent;
	color: rgba(255, 255, 255, 0.6);
	cursor: pointer;
	transition: all 0.2s ease;
	position: relative;
	font-size: 16px;
	font-weight: 500;
}

[data-live-tab].is-active {
	color: white;
}

[data-live-tab].is-active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, #ff6b6b, #feca57);
}

[data-live-tab]:hover {
	color: rgba(255, 255, 255, 0.9);
}

[data-live-pane] {
	display: none;
	padding: 24px;
	animation: fadeIn 0.3s ease;
}

[data-live-pane].is-active {
	display: block;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Card Layout */
[data-live-card] {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	transition: all 0.2s ease;
}

[data-live-card]:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.15);
}

[data-live-card-buttons] {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

[data-live-card-buttons] button,
[data-live-card-buttons] a {
	flex: 1;
	min-width: 0;
	padding: 8px 12px;
	border-radius: 8px;
	font-size: 14px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background: rgba(255, 255, 255, 0.1);
	color: white;
	border: none;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
	transition: all 0.2s ease;
}

[data-live-card-buttons] button:hover,
[data-live-card-buttons] a:hover {
	background: rgba(255, 255, 255, 0.2);
}

@media (max-width: 768px) {
	[data-live-card-buttons] {
		flex-direction: column;
	}

	[data-live-card-buttons] button,
	[data-live-card-buttons] a {
		width: 100%;
		white-space: normal;
	}

	[data-live-tab] {
		padding: 10px 16px;
		font-size: 14px;
	}

	[data-live-pane] {
		padding: 16px;
	}
}

/* Appointment Form */
[data-appointment-form] {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

[data-appointment-form] input,
[data-appointment-form] textarea,
[data-appointment-form] select {
	width: 100%;
	padding: 12px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.05);
	color: white;
	font-size: 14px;
}

[data-appointment-form] input:focus,
[data-appointment-form] textarea:focus,
[data-appointment-form] select:focus {
	outline: none;
	border-color: #ff6b6b;
}

[data-appointment-form] button[type="submit"] {
	padding: 12px 24px;
	background: linear-gradient(90deg, #ff6b6b, #feca57);
	color: white;
	border: none;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
}

[data-appointment-form] button[type="submit"]:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
}

[data-time-slot] {
	padding: 12px 16px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.05);
	color: white;
	cursor: pointer;
	transition: all 0.2s ease;
}

[data-time-slot].is-selected {
	background: #ff6b6b;
	border-color: #ff6b6b;
}

[data-time-slot]:hover {
	background: rgba(255, 255, 255, 0.1);
}

[data-appointment-alert] {
	padding: 12px 16px;
	border-radius: 8px;
	margin-bottom: 16px;
	display: none;
}

.ns-alert--success {
	background: rgba(29, 209, 161, 0.2);
	color: #1dd1a1;
	border: 1px solid #1dd1a1;
}

.ns-alert--error {
	background: rgba(255, 71, 87, 0.2);
	color: #ff4757;
	border: 1px solid #ff4757;
}