/**
 * Room Capacity Widget Styles
 *
 * @package AlberCAS
 * @since   1.0.0
 */

/* ==========================================
   CONTAINER
========================================== */
.albercas-room-capacity-widget {
	width: 100%;
	max-width: 100%;
}

/* ==========================================
   TITLE
========================================== */
.albercas-room-capacity-title {
	margin: 0 0 20px 0;
	text-align: left;
}

/* ==========================================
   TABLE LAYOUT
========================================== */
.albercas-room-capacity-table {
	background-color: #3d4852;
	border-radius: 8px;
	overflow: hidden;
}

/* ==========================================
   ROW STRUCTURE
========================================== */
.albercas-room-row {
	display: grid;
	grid-template-columns: 200px repeat(auto-fit, minmax(100px, 1fr));
	gap: 0;
	border-bottom: 2px solid #2d3748;
}

.albercas-room-row:last-child {
	border-bottom: none;
}

/* ==========================================
   ROW LABELS (Left Column)
========================================== */
.albercas-room-label {
	display: flex;
	align-items: center;
	padding: 20px;
	background-color: #2d3748;
	font-weight: 600;
}

/* ==========================================
   CELLS (Data Columns)
========================================== */
.albercas-room-cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 20px 15px;
	background-color: #4a5568;
	text-align: center;
	min-height: 100px;
}

.albercas-room-cell:last-child {
	border-right: none;
}

/* ==========================================
   ICON ROW (First Row)
========================================== */
.albercas-room-header .albercas-room-cell {
	padding: 30px 15px;
	min-height: 140px;
}

.albercas-room-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

/* SVG Default Styles */
.albercas-room-icon svg {
	width: 60px;
	height: 60px;
	color: #a0aec0;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	transition: all 0.3s ease;
}

/* Hover Effect - Default */
.albercas-room-icon:hover svg {
	color: #cbd5e0;
}

/* Hover Scale Effect - When enabled */
.albercas-room-icon.hover-scale:hover svg {
	transform: scale(1.1);
}

/* Ensure uploaded SVG files inherit styles */
.albercas-room-icon svg path,
.albercas-room-icon svg circle,
.albercas-room-icon svg rect,
.albercas-room-icon svg line,
.albercas-room-icon svg polyline,
.albercas-room-icon svg polygon {
	stroke: inherit;
	fill: inherit;
	stroke-width: inherit;
	transition: all 0.3s ease;
}

/* ==========================================
   CAPACITY ROW
========================================== */
.albercas-capacity-number {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 4px;
}

.albercas-capacity-label {
	opacity: 0.8;
}

/* ==========================================
   SIZE ROW
========================================== */
.albercas-size-length,
.albercas-size-area {
	line-height: 1.5;
}

.albercas-size-length {
	margin-bottom: 0px;
}

/* ==========================================
   RESPONSIVE DESIGN
========================================== */

/* Tablet - 1024px and below */
@media (max-width: 1024px) {
	.albercas-room-row {
		grid-template-columns: 180px repeat(auto-fit, minmax(90px, 1fr));
	}

	.albercas-room-label {
		padding: 15px;
		font-size: 14px;
	}

	.albercas-room-cell {
		padding: 15px 10px;
		min-height: 90px;
	}

	.albercas-room-header .albercas-room-cell {
		padding: 25px 10px;
		min-height: 120px;
	}

	.albercas-room-icon svg {
		width: 50px;
		height: 50px;
	}

	.albercas-capacity-number {
		font-size: 20px;
	}

	.albercas-capacity-label,
	.albercas-size-length,
	.albercas-size-area {
		font-size: 13px;
	}
}

/* Tablet - 768px and below */
@media (max-width: 768px) {
	.albercas-room-row {
		grid-template-columns: 150px repeat(auto-fit, minmax(80px, 1fr));
		gap: 1px;
	}

	.albercas-room-label {
		padding: 12px;
		font-size: 13px;
	}

	.albercas-room-cell {
		padding: 12px 8px;
		min-height: 80px;
	}

	.albercas-room-header .albercas-room-cell {
		padding: 20px 8px;
		min-height: 100px;
	}

	.albercas-room-icon svg {
		width: 40px;
		height: 40px;
	}

	.albercas-capacity-number {
		font-size: 18px;
	}

	.albercas-capacity-label,
	.albercas-size-length,
	.albercas-size-area {
		font-size: 12px;
	}
}

/* Mobile - 640px and below - Vertical Stack Layout */
@media (max-width: 640px) {
	.albercas-room-capacity-table {
		border-radius: 6px;
	}

	/* Switch to vertical card layout */
	.albercas-room-row {
		display: flex;
		flex-direction: column;
		border-bottom: none;
		margin-bottom: 15px;
		background-color: #2d3748;
		border-radius: 6px;
		overflow: hidden;
	}

	.albercas-room-label {
		width: 100%;
		padding: 12px 15px;
		border-right: none;
		font-size: 14px;
		font-weight: 700;
	}

	.albercas-room-cell {
		width: 100%;
		padding: 15px;
		border-right: none;
		min-height: auto;
		flex-direction: row;
		justify-content: space-between;
	}

	.albercas-room-cell:last-child {
		border-bottom: none;
	}

	/* Icon row on mobile */
	.albercas-room-header {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
		gap: 10px;
		background-color: transparent;
		margin-bottom: 20px;
		padding: 0;
	}

	.albercas-room-header .albercas-room-label {
		display: none; /* Hide label on mobile for icon row */
	}

	.albercas-room-header .albercas-room-cell {
		background-color: #4a5568;
		border-radius: 6px;
		padding: 20px 10px;
		min-height: 100px;
	}

	.albercas-room-icon svg {
		width: 50px;
		height: 50px;
	}

	/* Capacity and Size rows as cards */
	.albercas-capacity-number,
	.albercas-capacity-label {
		display: inline;
		margin: 0;
	}

	.albercas-capacity-number {
		font-size: 16px;
		margin-right: 5px;
	}

	.albercas-capacity-label {
		font-size: 13px;
	}

	.albercas-size-length,
	.albercas-size-area {
		display: inline;
		font-size: 13px;
	}

	.albercas-size-length::after {
		content: " / ";
		margin: 0 5px;
	}
}

/* Mobile - 480px and below */
@media (max-width: 480px) {
	.albercas-room-capacity-title {
		font-size: 20px;
		margin-bottom: 15px;
	}

	.albercas-room-header {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}

	.albercas-room-header .albercas-room-cell {
		padding: 15px 8px;
		min-height: 90px;
	}

	.albercas-room-icon svg {
		width: 40px;
		height: 40px;
	}

	.albercas-room-label {
		padding: 10px 12px;
		font-size: 13px;
	}

	.albercas-room-cell {
		padding: 12px;
	}

	.albercas-capacity-number {
		font-size: 15px;
	}

	.albercas-capacity-label,
	.albercas-size-length,
	.albercas-size-area {
		font-size: 12px;
	}
}

/* ==========================================
   HOVER EFFECTS
========================================== */
.albercas-room-cell:hover {
	background-color: #5a6c7d;
	transition: background-color 0.3s ease;
}

.albercas-room-header .albercas-room-cell:hover {
	transform: translateY(-2px);
	transition: all 0.3s ease;
}

/* ==========================================
   PRINT STYLES
========================================== */
@media print {
	.albercas-room-capacity-table {
		background-color: #ffffff ;
		border: 1px solid #000000;
	}

	.albercas-room-label,
	.albercas-room-cell {
		background-color: #ffffff;
		color: #000000;
	}

	.albercas-room-icon svg {
		color: #000000;
		stroke: #000000;
	}
}