/* Class Schedule Wrapper */
.class-schedule-wrapper {
	background: #0a0a0a;
	padding: 40px 20px;
	font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	width: 100%;
	box-sizing: border-box;
}

/* Remove any default focus/hover colors */
.class-schedule-wrapper * {
	outline: none;
}

.class-schedule-wrapper *:focus {
	outline: none;
}

.class-schedule-wrapper button:focus,
.class-schedule-wrapper button:hover {
	outline: none;
}

/* Header Styling */
.class-schedule-header {
	text-align: center;
	margin-bottom: 40px;
}

/* Location Picker */
.cs-location-picker {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 32px;
	gap: 24px;
}

.cs-nav-arrow {
	background: transparent;
	border: 2px solid #F27C00;
	color: #F27C00;
	border-radius: 50%;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	font-weight: bold;
	cursor: pointer;
	transition: all 0.3s ease;
}

.cs-nav-arrow:hover {
	border-color: #FBA743;
	color: #FBA743;
	transform: scale(1.1);
	background: rgba(251, 167, 67, 0.1);
}

.cs-location-display {
	min-width: 200px;
	text-align: center;
}

.cs-location-name {
	color: #F5F5F5;
	font-size: 24px;
	font-weight: 800;
	font-family: 'Anton', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
	text-transform: uppercase;
	letter-spacing: 2px;
}

.cs-loading {
	text-align: center;
	color: #94a3b8;
	padding: 40px;
	font-size: 16px;
}

.cs-schedule-wrapper {
	transition: opacity 0.3s ease;
}

.class-schedule-header .subtitle {
	color: #F27C00;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 8px;
}

.class-schedule-header .title {
	color: #F5F5F5;
	text-transform: uppercase;
	font-weight: 900;
	font-family: 'Anton', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
	letter-spacing: 3px;
	font-size: 32px;
	margin: 0;
}

/* Main Grid Container */
.cs-frontend {
	color: #e8e6e3;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	overflow-y: visible;
}

.cs-grid {
	display: grid;
	grid-template-columns: 160px repeat(7, 1fr);
	width: 100%;
	background: #161616;
	border: 1px solid #2D2822;
	border-radius: 6px;
	overflow: hidden;
	/* grid layout: header row + time rows */
	grid-auto-rows: 88px;
}

/* Grid headers */
.cs-header { 
	background: #161616; 
	border-bottom: 1px dashed #2D2822; 
	display: flex; 
	align-items: center; 
	justify-content: center; 
	padding: 8px;
	white-space: nowrap;
	overflow: hidden;
}
.cs-time-header { border-right: 1px dashed #2D2822; }
.cs-day-header { 
	color: #EDE2D0; 
	font-weight: 700; 
	text-transform: uppercase; 
	letter-spacing: 1px; 
	font-size: 14px;
}

/* Time cells */
.cs-time-cell { background:#161616; border-right:1px dashed #2D2822; display:flex; align-items:center; justify-content:center; }
.cs-time-label { color:#B2ACA8; font-weight:700; font-size:12px; }

/* Slots: one per grid cell */
.cs-slot { background:#0a0a0a; border-left:1px dashed #2D2822; border-bottom:1px dashed #2D2822; padding:0; display:flex; align-items:center; justify-content:center; }

/* Friday OFF styling */
.cs-slot-off { background:#1a1a1a; opacity:0.6; align-items:center; }
.cs-off-label { color:#6b7280; font-weight:700; font-size:14px; text-transform:uppercase; letter-spacing:1px; }

/* Remove old column styles */
.cs-col, .cs-times, .cs-time, .cs-col-body { display:none; }

/* Class Tiles */
.cs-tile {
	background: #F27C00;
	color: #ffffff;
	border: none;
	border-radius: 0;
	padding: 12px 8px;
	text-align: center;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.cs-tile-title {
	font-weight: 800;
	font-family: 'Anton', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
	text-transform: uppercase;
	font-size: 13px;
	line-height: 1.2;
	margin-bottom: 4px;
	letter-spacing: 0.5px;
}

.cs-tile-sub {
	font-size: 11px;
	font-weight: 500;
	opacity: 0.9;
	margin-bottom: 2px;
}

.cs-tile-time {
	font-size: 10px;
	opacity: 0.9;
	font-weight: 700;
	color: #ffffff;
	display: none; /* Hide on desktop - time is shown in left column */
}

/* Mobile stacked view */
.cs-mobile { display:none; }
.cs-mobile-day { margin-top:16px; }
.cs-mobile-day-title { color:#EDE2D0; font-weight:800; letter-spacing:1px; text-transform:uppercase; margin:8px 0; font-family: 'Anton', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; }
.cs-mobile-list { display:grid; gap:8px; }
.cs-mobile-empty { color:#B2ACA8; font-size:13px; }

/* Mobile tiles styling */
.cs-mobile .cs-tile {
	background: #F27C00;
	color: #ffffff;
	border: none;
	border-radius: 0;
	padding: 16px;
	text-align: left;
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 4px;
}

.cs-mobile .cs-tile-title {
	font-size: 16px;
	margin-bottom: 6px;
}

.cs-mobile .cs-tile-sub {
	font-size: 14px;
	margin-bottom: 4px;
}

.cs-mobile .cs-tile-time {
	font-size: 12px;
	font-weight: 700;
	opacity: 1;
	display: block; /* Show on mobile */
}

/* Responsive Design */
@media (max-width: 1024px) {
	.cs-grid { 
		grid-auto-rows: 70px; 
		grid-template-columns: 120px repeat(7, 1fr);
	}
	.cs-tile { padding: 8px; }
	.cs-tile-title { font-size: 12px; }
	.cs-day-header { font-size: 12px; }
}

@media (max-width: 768px) {
	.class-schedule-wrapper { padding: 20px 10px; }
	.class-schedule-header .title { font-size: 24px; }
	.cs-grid { display: none; }
	.cs-mobile { display: block; }
}