/* CSBS public styles */
/* 
 * Public-facing CSS for Cleaning Service Booking System
 * Version: 1.0.0
 */

/* General Styles */
.csbs-container {
    padding: 20px 0;
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
}

.csbs-agency-directory h2 {
	margin-bottom: 20px;
	font-size: 28px;
	color: #333;
}

.csbs-search-box {
	display: flex;
	gap: 10px;
	margin-bottom: 30px;
	flex-wrap: wrap;
}

.csbs-search-input {
	flex: 1;
	min-width: 250px;
	padding: 10px 15px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 16px;
}

.csbs-btn {
	padding: 10px 20px;
	background-color: #0073aa;
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 16px;
	transition: background-color 0.3s;
}

.csbs-btn:hover {
	background-color: #005a87;
}

.csbs-agencies-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 20px;
	margin-bottom: 30px;
}

.csbs-agency-card {
	border: 1px solid #e0e0e0;
	padding: 20px;
	border-radius: 8px;
	background-color: #fff;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	transition: box-shadow 0.3s, transform 0.3s;
}

.csbs-agency-card:hover {
	box-shadow: 0 4px 8px rgba(0,0,0,0.15);
	transform: translateY(-2px);
}

.csbs-agency-name {
	font-size: 20px;
	margin: 0 0 10px 0;
	color: #333;
}

.csbs-agency-meta,
.csbs-agency-areas,
.csbs-agency-radius {
	margin: 8px 0;
	font-size: 14px;
	color: #666;
}

.csbs-agency-meta strong,
.csbs-agency-areas strong,
.csbs-agency-radius strong {
	color: #333;
}

.csbs-book-btn {
	display: inline-block;
	margin-top: 15px;
	padding: 8px 16px;
	background-color: #28a745;
	color: white;
	text-decoration: none;
	border-radius: 4px;
	transition: background-color 0.3s;
}

.csbs-book-btn:hover {
	background-color: #218838;
	color: white;
	text-decoration: none;
}

.csbs-no-results {
	text-align: center;
	padding: 40px;
	color: #999;
	font-size: 16px;
}

.csbs-app { max-width: 1200px; margin: 0 auto; padding: 20px; }
.csbs-app-nav { display:flex; gap:12px; align-items:center; padding:12px 0; }
.csbs-app-brand { font-weight:700; color:#111; }
.csbs-app-tabs { margin-left:auto; display:flex; gap:8px; }
.csbs-tab-btn { padding:8px 12px; border:1px solid #e5e7eb; background:#fff; border-radius:6px; cursor:pointer; }
.csbs-tab-btn.is-active { background:#f3f4f6; }
.csbs-tab { display:none; }
.csbs-tab.is-active { display:block; }

.csbs-card { background:#fff; border:1px solid #e5e7eb; border-radius:8px; padding:16px; box-shadow:0 1px 2px rgba(0,0,0,0.04); }
.csbs-row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.csbs-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap:16px; margin-top:12px; }
.csbs-grid-2 { display:grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap:16px; }
.csbs-grid-3 { display:grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap:16px; }
.csbs-grid-form { grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); }
.csbs-col-span-2 { grid-column: span 2; }
.csbs-field { display:flex; flex-direction:column; gap:6px; flex:1; min-width:220px; }
.csbs-input { padding:8px 10px; border:1px solid #d1d5db; border-radius:6px; font-size:14px; }
.csbs-btn { padding:8px 14px; border:1px solid #d1d5db; background:#f9fafb; border-radius:6px; cursor:pointer; }
.csbs-btn-primary { background:#2563eb; color:#fff; border-color:#1d4ed8; }
.csbs-btn[disabled] { opacity:0.6; cursor:not-allowed; }
.csbs-muted { color:#6b7280; font-size:14px; }
.csbs-alert { border-radius:6px; padding:10px 12px; border:1px solid; }
.csbs-alert-warn { background:#fff7ed; border-color:#fed7aa; color:#b45309; }
.csbs-kpi-label { color:#6b7280; font-size:12px; }
.csbs-kpi-value { font-size:24px; font-weight:700; color:#111827; }
.csbs-agency-card { border:1px solid #e5e7eb; border-radius:8px; padding:14px; background:#fff; cursor:pointer; transition: box-shadow .2s, transform .2s; }
.csbs-agency-card:hover { box-shadow:0 2px 6px rgba(0,0,0,0.08); transform: translateY(-1px); }
.csbs-agency-title { font-weight:600; color:#111; margin:0 0 6px 0; }
.csbs-agency-meta { color:#6b7280; font-size:13px; margin:4px 0; }
.csbs-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

@media (max-width: 768px) {
	.csbs-grid-3 { grid-template-columns: 1fr 1fr; }
	.csbs-grid-2 { grid-template-columns: 1fr; }
}

.csbs-selected-agency {
	background-color: #e7f5e7;
	border: 2px solid #28a745;
	padding: 15px;
	border-radius: 6px;
	margin-bottom: 20px;
}

.csbs-selected-agency p {
	margin: 0;
	font-size: 16px;
	color: #155724;
}

.csbs-pagination {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 30px;
}

/* Responsive Design */
@media (max-width: 768px) {
	.csbs-agencies-grid {
		grid-template-columns: 1fr;
	}
	
	.csbs-search-box {
		flex-direction: column;
	}
	
	.csbs-search-input {
		width: 100%;
	}
}