/* Car Rental Manager — base styling. Customize freely, or override in your theme. */

/* ---------------- Smooth Registration Forms (Vendor / Customer) ---------------- */
.crm-form-wrap {
	max-width: 460px;
	margin: 30px auto;
	background: #fff;
	border-radius: 16px;
	padding: 32px 30px;
	box-shadow: 0 4px 24px rgba(0,0,0,0.07);
	border: 1px solid #f0f0f0;
}

.crm-form-heading {
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 4px;
	color: #111;
}

.crm-form-subheading {
	font-size: 14px;
	color: #888;
	margin: 0 0 24px;
}

.crm-form-wrap .crm-form label {
	font-size: 13px;
	color: #444;
	margin-bottom: 16px;
}

.crm-form-wrap .crm-form input {
	margin-top: 6px;
	padding: 12px 14px;
	border: 1.5px solid #e5e7eb;
	border-radius: 10px;
	font-size: 14px;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.crm-form-wrap .crm-form input:focus {
	outline: none;
	border-color: #1d4ed8;
	box-shadow: 0 0 0 3px rgba(29,78,216,0.12);
}

.crm-form-wrap .crm-btn {
	width: 100%;
	padding: 13px;
	border-radius: 10px;
	font-size: 15px;
	margin-top: 6px;
	transition: background .15s ease, transform .1s ease;
}
.crm-form-wrap .crm-btn:hover { transform: translateY(-1px); }

.crm-form-switch-link {
	text-align: center;
	margin-top: 18px;
	font-size: 13px;
	color: #777;
}
.crm-form-switch-link a { color: #1d4ed8; font-weight: 600; text-decoration: none; }

@media (max-width: 500px) {
	.crm-form-wrap { margin: 16px; padding: 24px 20px; }
}

/* ---------------- General form/dashboard ---------------- */
.crm-dashboard {
	max-width: 700px;
	margin: 20px 0;
}

.crm-form label {
	display: block;
	margin-bottom: 12px;
	font-weight: 600;
}

.crm-form input[type="text"],
.crm-form input[type="email"],
.crm-form input[type="password"],
.crm-form input[type="date"],
.crm-form input[type="number"],
.crm-form input[type="file"],
.crm-form select,
.crm-form textarea {
	width: 100%;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 6px;
	font-weight: 400;
	margin-top: 4px;
	box-sizing: border-box;
}

.crm-grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

@media (max-width: 600px) {
	.crm-grid-2 { grid-template-columns: 1fr; }
}

.crm-btn {
	display: inline-block;
	background: #1d4ed8;
	color: #fff;
	padding: 12px 24px;
	border: none;
	border-radius: 6px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
}

.crm-btn:hover { background: #1e40af; color: #fff; }
.crm-btn-block { display: block; width: 100%; }

.crm-success {
	background: #ecfdf5;
	color: #065f46;
	padding: 10px 14px;
	border-radius: 6px;
	border: 1px solid #6ee7b7;
}

.crm-error {
	background: #fef2f2;
	color: #991b1b;
	padding: 10px 14px;
	border-radius: 6px;
	border: 1px solid #fca5a5;
}

.crm-vendor-table {
	width: 100%;
	border-collapse: collapse;
}
.crm-vendor-table th, .crm-vendor-table td {
	padding: 10px;
	border-bottom: 1px solid #eee;
	text-align: left;
}

.crm-booking-box {
	margin-top: 30px;
	padding: 20px;
	border: 1px solid #eee;
	border-radius: 10px;
	background: #fafafa;
}

.crm-price-line span {
	display: inline-block;
	margin-right: 14px;
	font-weight: 700;
}

/* Fallback Car Grid */
.crm-car-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

@media (max-width: 900px) {
	.crm-car-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.crm-car-grid { grid-template-columns: 1fr; }
}

.crm-car-card {
	border: 1px solid #eee;
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0,0,0,0.06);
	transition: transform .15s ease;
}
.crm-car-card:hover { transform: translateY(-4px); }

.crm-car-card-image img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	display: block;
}

.crm-no-image {
	height: 200px;
	background: #f1f1f1;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #999;
}

.crm-car-card-body {
	padding: 16px;
}

.crm-car-card-body h3 {
	margin: 0 0 6px;
	font-size: 18px;
}
.crm-car-card-body h3 a { color: inherit; text-decoration: none; }

.crm-car-specs {
	color: #666;
	font-size: 13px;
	margin-bottom: 10px;
}

.crm-car-price {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 12px;
}
.crm-car-price span { font-size: 13px; font-weight: 400; color: #666; }

/* ---------------- Invygo-style badge + spec pills on cards ---------------- */
.crm-car-card { position: relative; }

.crm-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	background: #10b981;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 20px;
	z-index: 2;
}
.crm-badge.crm-badge-unavailable { background: #ef4444; }

.crm-car-pills {
	display: flex;
	gap: 6px;
	margin: 10px 0;
	flex-wrap: wrap;
}
.crm-car-pill {
	background: #f3f4f6;
	color: #444;
	font-size: 12px;
	padding: 6px 10px;
	border-radius: 8px;
	text-align: center;
}

/* ---------------- Price Calculator ---------------- */
.crm-calc {
	border: 1px solid #eee;
	border-radius: 14px;
	padding: 20px;
	background: #fff;
	box-shadow: 0 1px 6px rgba(0,0,0,0.05);
	max-width: 420px;
}

.crm-calc-label {
	font-weight: 600;
	font-size: 14px;
	margin: 16px 0 8px;
}
.crm-calc-label:first-child { margin-top: 0; }

.crm-calc-tiers, .crm-calc-insurance {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 8px;
}

.crm-tier-btn, .crm-ins-btn {
	border: 1.5px solid #e5e7eb;
	background: #fff;
	border-radius: 10px;
	padding: 10px 12px;
	cursor: pointer;
	font-size: 13px;
	text-align: left;
	transition: border-color .15s ease;
}
.crm-ins-btn span { display: block; font-size: 11px; color: #888; margin-top: 2px; }

.crm-tier-btn.crm-active, .crm-ins-btn.crm-active {
	border-color: #1d4ed8;
	background: #eff6ff;
	font-weight: 600;
}

.crm-calc-mileage {
	background: #f9fafb;
	border-radius: 10px;
	padding: 10px 12px;
	font-size: 13px;
	color: #444;
}

.crm-calc-total-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid #eee;
}

.crm-calc-total { font-size: 24px; font-weight: 700; }
.crm-calc-unit { font-size: 12px; color: #888; display: block; }

.crm-book-car-btn {
	padding: 12px 28px;
}

/* ---------------- Details Tabs ---------------- */
.crm-tabs-nav {
	display: flex;
	gap: 20px;
	border-bottom: 1px solid #eee;
	margin-bottom: 16px;
}

.crm-tab-btn {
	background: none;
	border: none;
	padding: 10px 0;
	font-size: 14px;
	font-weight: 600;
	color: #888;
	cursor: pointer;
	border-bottom: 2px solid transparent;
}

.crm-tab-btn.crm-active {
	color: #1d4ed8;
	border-bottom-color: #1d4ed8;
}

.crm-tab-panel { display: none; }
.crm-tab-panel.crm-active { display: block; }

.crm-bullets { margin: 0; padding-left: 18px; }
.crm-bullets li { margin-bottom: 8px; font-size: 14px; }

.crm-spec-table { width: 100%; border-collapse: collapse; }
.crm-spec-table th, .crm-spec-table td {
	text-align: left;
	padding: 10px 0;
	border-bottom: 1px solid #f1f1f1;
	font-size: 14px;
}
.crm-spec-table th { color: #888; font-weight: 400; width: 40%; }

/* ---------------- Vendor gallery uploads ---------------- */
.crm-gallery-preview {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 8px;
}
.crm-gallery-preview img {
	width: 70px;
	height: 70px;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid #eee;
}