/**
 * ELK Taxi Booking — public stylesheet.
 *
 * Premium, responsive booking UI inspired by modern ride-hailing apps.
 * Colours are driven by CSS custom properties injected from plugin settings
 * (--elk-taxi-primary / --elk-taxi-accent) so the palette is admin-configurable.
 *
 * @package   ELK_Taxi_Booking
 * @author    ELK Consulting LTD <support@elkconsultingltd.com>
 * @copyright Copyright (c) ELK Consulting LTD
 * @link      https://elkconsultingltd.com
 * @license   GPL-2.0-or-later
 * @since     1.0.0
 */

:root {
	--elk-taxi-primary: #0f9d58;
	--elk-taxi-accent: #111827;
	--elk-taxi-bg: #ffffff;
	--elk-taxi-surface: #f8fafc;
	--elk-taxi-border: #e2e8f0;
	--elk-taxi-text: #1e293b;
	--elk-taxi-muted: #64748b;
	--elk-taxi-radius: 14px;
	--elk-taxi-radius-sm: 10px;
	--elk-taxi-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
	--elk-taxi-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
	--elk-taxi-danger: #ef4444;
	--elk-taxi-success: #0f9d58;
}

.elk-taxi-wrap {
	color: var(--elk-taxi-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.5;
	max-width: 920px;
	margin: 0 auto;
}

.elk-taxi-wrap *,
.elk-taxi-wrap *::before,
.elk-taxi-wrap *::after {
	box-sizing: border-box;
}

.elk-taxi-title {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 0 1rem;
	color: var(--elk-taxi-accent);
}

/* ------------------------------------------------------------------ Form */

.elk-taxi-form {
	background: var(--elk-taxi-bg);
	border: 1px solid var(--elk-taxi-border);
	border-radius: var(--elk-taxi-radius);
	box-shadow: var(--elk-taxi-shadow);
	padding: 1.75rem;
}

.elk-taxi-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin-bottom: 1rem;
}

.elk-taxi-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.elk-taxi-col-2 {
	grid-column: 1 / -1;
}

.elk-taxi-field > label,
.elk-taxi-label {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--elk-taxi-muted);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.elk-taxi-input {
	width: 100%;
	padding: 0.7rem 0.85rem;
	font-size: 0.95rem;
	color: var(--elk-taxi-text);
	background: var(--elk-taxi-surface);
	border: 1px solid var(--elk-taxi-border);
	border-radius: var(--elk-taxi-radius-sm);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.elk-taxi-input:focus {
	outline: none;
	border-color: var(--elk-taxi-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--elk-taxi-primary) 18%, transparent);
}

textarea.elk-taxi-input {
	resize: vertical;
	min-height: 64px;
}

/* -------------------------------------------------------------- Vehicles */

.elk-taxi-vehicles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 0.75rem;
}

.elk-taxi-vehicle {
	position: relative;
	cursor: pointer;
	display: block;
}

.elk-taxi-vehicle input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.elk-taxi-vehicle-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	text-align: center;
	padding: 1rem 0.75rem;
	background: var(--elk-taxi-surface);
	border: 2px solid var(--elk-taxi-border);
	border-radius: var(--elk-taxi-radius-sm);
	transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
	height: 100%;
}

.elk-taxi-vehicle:hover .elk-taxi-vehicle-card {
	transform: translateY(-2px);
	box-shadow: var(--elk-taxi-shadow-sm);
}

.elk-taxi-vehicle input:checked + .elk-taxi-vehicle-card {
	border-color: var(--elk-taxi-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--elk-taxi-primary) 16%, transparent);
}

.elk-taxi-vehicle-img {
	width: 100%;
	height: 64px;
	object-fit: cover;
	border-radius: 8px;
}

.elk-taxi-vehicle-icon {
	font-size: 1.85rem;
	line-height: 1;
}

.elk-taxi-vehicle-name {
	font-weight: 600;
	font-size: 0.9rem;
}

.elk-taxi-vehicle-meta {
	font-size: 0.78rem;
	color: var(--elk-taxi-muted);
}

/* ---------------------------------------------------------------- Coupon */

.elk-taxi-coupon {
	display: flex;
	gap: 0.5rem;
}

.elk-taxi-coupon .elk-taxi-input {
	flex: 1;
}

.elk-taxi-coupon-msg {
	margin: 0.35rem 0 0;
	font-size: 0.82rem;
	min-height: 1em;
}

.elk-taxi-coupon-msg.is-success {
	color: var(--elk-taxi-success);
}

.elk-taxi-coupon-msg.is-error {
	color: var(--elk-taxi-danger);
}

/* --------------------------------------------------------------- Buttons */

.elk-taxi-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.25rem;
}

.elk-taxi-btn,
.elk-taxi-btn-secondary {
	appearance: none;
	border: none;
	cursor: pointer;
	font-size: 0.95rem;
	font-weight: 600;
	padding: 0.8rem 1.5rem;
	border-radius: var(--elk-taxi-radius-sm);
	transition: transform 0.12s ease, opacity 0.12s ease, background 0.15s ease;
}

.elk-taxi-btn {
	background: var(--elk-taxi-primary);
	color: #fff;
	flex: 1;
	min-width: 150px;
}

.elk-taxi-btn.elk-taxi-submit {
	background: var(--elk-taxi-accent);
}

.elk-taxi-btn:hover {
	transform: translateY(-1px);
	opacity: 0.94;
}

.elk-taxi-btn:disabled,
.elk-taxi-btn.is-loading {
	opacity: 0.6;
	cursor: progress;
	transform: none;
}

.elk-taxi-btn-secondary {
	background: var(--elk-taxi-surface);
	color: var(--elk-taxi-text);
	border: 1px solid var(--elk-taxi-border);
	flex: 0 0 auto;
}

.elk-taxi-btn-secondary:hover {
	border-color: var(--elk-taxi-primary);
	color: var(--elk-taxi-primary);
}

/* -------------------------------------------------------------- Estimate */

.elk-taxi-estimate-box {
	margin-top: 1.25rem;
	padding: 1.1rem 1.25rem;
	background: var(--elk-taxi-surface);
	border: 1px dashed var(--elk-taxi-border);
	border-radius: var(--elk-taxi-radius-sm);
}

.elk-taxi-estimate-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 0.6rem;
}

.elk-taxi-estimate-label {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--elk-taxi-muted);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.elk-taxi-estimate-total {
	font-size: 1.6rem;
	font-weight: 800;
	color: var(--elk-taxi-primary);
}

.elk-taxi-estimate-lines {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--elk-taxi-border);
}

.elk-taxi-estimate-lines li {
	display: flex;
	justify-content: space-between;
	padding: 0.35rem 0;
	font-size: 0.9rem;
	border-bottom: 1px solid var(--elk-taxi-border);
}

.elk-taxi-line-label {
	color: var(--elk-taxi-muted);
}

.elk-taxi-line-amount {
	font-variant-numeric: tabular-nums;
}

.elk-taxi-estimate-trip {
	margin-top: 0.6rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--elk-taxi-accent);
}

/* ---------------------------------------------------------------- Result */

.elk-taxi-result {
	margin-top: 1rem;
	padding: 0.9rem 1.1rem;
	border-radius: var(--elk-taxi-radius-sm);
	font-size: 0.92rem;
}

.elk-taxi-result.is-success {
	background: color-mix(in srgb, var(--elk-taxi-success) 12%, transparent);
	color: var(--elk-taxi-success);
}

.elk-taxi-result.is-error {
	background: color-mix(in srgb, var(--elk-taxi-danger) 12%, transparent);
	color: var(--elk-taxi-danger);
}

.elk-taxi-booking-no {
	font-weight: 800;
	letter-spacing: 0.04em;
}

.elk-taxi-wa-link {
	display: inline-block;
	margin-top: 0.4rem;
	font-weight: 600;
	color: #25d366;
}

/* -------------------------------------------------------------- Honeypot */

.elk-taxi-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ------------------------------------------------------ Dashboard / table */

.elk-taxi-table-scroll {
	overflow-x: auto;
}

.elk-taxi-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}

.elk-taxi-table th,
.elk-taxi-table td {
	text-align: left;
	padding: 0.7rem 0.85rem;
	border-bottom: 1px solid var(--elk-taxi-border);
}

.elk-taxi-table th {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--elk-taxi-muted);
}

.elk-taxi-badge {
	display: inline-block;
	padding: 0.2rem 0.6rem;
	font-size: 0.74rem;
	font-weight: 700;
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.elk-taxi-badge-pending      { background: #fef3c7; color: #92400e; }
.elk-taxi-badge-confirmed    { background: #dbeafe; color: #1e40af; }
.elk-taxi-badge-assigned     { background: #e0e7ff; color: #3730a3; }
.elk-taxi-badge-on_the_way   { background: #cffafe; color: #155e75; }
.elk-taxi-badge-picked_up    { background: #ede9fe; color: #5b21b6; }
.elk-taxi-badge-completed    { background: #dcfce7; color: #166534; }
.elk-taxi-badge-cancelled    { background: #fee2e2; color: #991b1b; }

.elk-taxi-link {
	color: var(--elk-taxi-primary);
	font-weight: 600;
	text-decoration: none;
}

.elk-taxi-link:hover {
	text-decoration: underline;
}

.elk-taxi-empty {
	padding: 2rem;
	text-align: center;
	color: var(--elk-taxi-muted);
}

.elk-taxi-trip {
	font-size: 0.85rem;
	color: var(--elk-taxi-muted);
}

/* ---------------------------------------------------------------- Credit */

.elk-taxi-credit {
	margin-top: 1rem;
	text-align: center;
	font-size: 0.78rem;
	color: var(--elk-taxi-muted);
}

.elk-taxi-credit a {
	color: var(--elk-taxi-primary);
	text-decoration: none;
}

/* ------------------------------------------------------------ Responsive */

@media (max-width: 640px) {
	.elk-taxi-grid {
		grid-template-columns: 1fr;
	}

	.elk-taxi-form {
		padding: 1.25rem;
	}

	.elk-taxi-actions {
		flex-direction: column;
	}

	.elk-taxi-btn {
		width: 100%;
	}
}

/* -------------------------------------------------------------- Dark mode */

@media (prefers-color-scheme: dark) {
	:root {
		--elk-taxi-bg: #0f172a;
		--elk-taxi-surface: #1e293b;
		--elk-taxi-border: #334155;
		--elk-taxi-text: #e2e8f0;
		--elk-taxi-muted: #94a3b8;
		--elk-taxi-accent: #f8fafc;
		--elk-taxi-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
		--elk-taxi-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
	}

	.elk-taxi-badge-pending      { background: #78350f; color: #fde68a; }
	.elk-taxi-badge-confirmed    { background: #1e3a8a; color: #bfdbfe; }
	.elk-taxi-badge-assigned     { background: #312e81; color: #c7d2fe; }
	.elk-taxi-badge-on_the_way   { background: #164e63; color: #a5f3fc; }
	.elk-taxi-badge-picked_up    { background: #4c1d95; color: #ddd6fe; }
	.elk-taxi-badge-completed    { background: #14532d; color: #bbf7d0; }
	.elk-taxi-badge-cancelled    { background: #7f1d1d; color: #fecaca; }
}

.elk-taxi-wrap.is-dark {
	--elk-taxi-bg: #0f172a;
	--elk-taxi-surface: #1e293b;
	--elk-taxi-border: #334155;
	--elk-taxi-text: #e2e8f0;
	--elk-taxi-muted: #94a3b8;
	--elk-taxi-accent: #f8fafc;
}