/* Sperhake Vehicle Tracker — frontend styles */

.sperhake-widget {
	--sperhake-primary: #3a312a;
	--sperhake-accent: #f9b022;
	--sperhake-radius: 18px;
	position: relative;
	max-width: 720px;
	margin: 48px auto;
	padding: 40px;
	background: #fff;
	border: 1px solid #e6e9ee;
	border-radius: var(--sperhake-radius);
	box-shadow: 0 20px 50px -12px rgba(58, 49, 42, 0.18), 0 4px 12px rgba(58, 49, 42, 0.04);
	box-sizing: border-box;
	font-family: inherit;
	color: #1f2937;
	overflow: hidden;
}

/* Accent bar across the top of the card */
.sperhake-widget::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background: linear-gradient(90deg, var(--sperhake-accent) 0%, #ff703c 100%);
}

.sperhake-widget *,
.sperhake-widget *::before,
.sperhake-widget *::after { box-sizing: border-box; }

.sperhake-widget__header { margin-bottom: 28px; }
.sperhake-widget__title {
	margin: 0 0 8px;
	font-size: 1.9rem;
	font-weight: 800;
	line-height: 1.2;
	color: var(--sperhake-primary);
	letter-spacing: -0.01em;
}
.sperhake-widget__subtitle { margin: 0; color: #6b7280; font-size: 1rem; line-height: 1.55; max-width: 46ch; }

.sperhake-search__label {
	display: block;
	font-weight: 700;
	margin-bottom: 10px;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--sperhake-primary);
}
.sperhake-search__row { display: flex; gap: 12px; flex-wrap: wrap; }

.sperhake-search__input {
	flex: 1 1 220px;
	padding: 16px 18px 16px 26px;
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: center;
	color: var(--sperhake-primary);
	background: #fff;
	border: 2px solid #d8dde5;
	border-radius: 10px;
	/* Left accent bar evokes a number-plate strip; inset so focus doesn't shift layout. */
	box-shadow: inset 6px 0 0 var(--sperhake-accent), inset 0 1px 2px rgba(0, 0, 0, 0.05);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
}
.sperhake-search__input::placeholder { color: #b9c0cb; font-weight: 600; letter-spacing: 0.1em; }
.sperhake-search__input:focus {
	outline: none;
	border-color: var(--sperhake-accent);
	box-shadow: inset 6px 0 0 var(--sperhake-accent), 0 0 0 4px rgba(249, 176, 34, 0.22);
	transform: translateY(-1px);
}

.sperhake-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 26px;
	font-size: 1rem;
	font-weight: 700;
	border: 0;
	border-radius: 12px;
	cursor: pointer;
	transition: transform 0.08s ease, background 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
	text-decoration: none;
	white-space: nowrap;
}
.sperhake-btn:active { transform: translateY(1px); }
.sperhake-btn:disabled { opacity: 0.6; cursor: progress; }

/* Theme link colors can bleed into anchor-based buttons (e.g. the receipt
   download link), turning the label the same hue as the button background and
   hiding the text. Keep each button's own text color across all link states. */
a.sperhake-btn--primary,
a.sperhake-btn--primary:link,
a.sperhake-btn--primary:visited,
a.sperhake-btn--primary:hover,
a.sperhake-btn--primary:focus,
a.sperhake-btn--primary:active { color: #3a312a !important; }
a.sperhake-btn--map,
a.sperhake-btn--map:link,
a.sperhake-btn--map:visited,
a.sperhake-btn--map:hover,
a.sperhake-btn--map:focus,
a.sperhake-btn--map:active { color: #fff !important; }

.sperhake-btn--primary {
	background: var(--sperhake-accent, #f9b022);
	color: #3a312a;
	box-shadow: 0 6px 16px -4px rgba(249, 176, 34, 0.5);
}
.sperhake-btn--primary:hover { background: #e89a10; box-shadow: 0 8px 20px -4px rgba(249, 176, 34, 0.55); }
.sperhake-btn--pay { background: #16a34a; color: #fff; width: 100%; font-size: 1.1rem; padding: 16px; }
.sperhake-btn--pay:hover { background: #128a3e; }

.sperhake-search__hint { margin: 8px 0 0; font-size: 0.82rem; color: #6b7280; }
.sperhake-recaptcha { margin-top: 16px; }
.sperhake-search__actions { margin-top: 16px; }

.sperhake-search__error {
	margin: 12px 0 0;
	padding: 10px 14px;
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #b91c1c;
	border-radius: 8px;
	font-size: 0.9rem;
}

/* Result card */
.sperhake-results { margin-top: 22px; }

.sperhake-vehicle {
	border: 1px solid #e6e9ee;
	border-radius: 12px;
	overflow: hidden;
	animation: sperhake-fade 0.25s ease;
}
@keyframes sperhake-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.sperhake-vehicle__head {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding: 18px 20px;
	background: var(--sperhake-primary);
	color: #fff;
}
.sperhake-vehicle__found { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.85; }
.sperhake-vehicle__plate {
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	padding: 4px 12px;
	background: rgba(255, 255, 255, 0.14);
	border-radius: 6px;
}

.sperhake-vehicle__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2px;
	background: #eef1f5;
}
.sperhake-detail { display: flex; flex-direction: column; gap: 2px; padding: 12px 18px; background: #fff; }
.sperhake-detail__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: #9aa3b2; }
.sperhake-detail__value { font-size: 0.98rem; font-weight: 600; color: #1f2937; }

.sperhake-vehicle__instructions { padding: 16px 20px; background: #fffbeb; border-top: 1px solid #fde68a; }
.sperhake-vehicle__instructions h4 { margin: 0 0 6px; color: #92400e; }
.sperhake-vehicle__instructions p { margin: 0; color: #78350f; }

.sperhake-penalty { padding: 22px 20px; border-top: 1px solid #e6e9ee; }
.sperhake-penalty.is-due { background: #fff7f6; }
.sperhake-penalty__amount { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.sperhake-penalty__label { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; }
.sperhake-penalty__value { font-size: 2rem; font-weight: 800; color: #b91c1c; }
.sperhake-penalty__note { margin: 12px 0 0; font-size: 0.8rem; color: #9aa3b2; text-align: center; }
.sperhake-penalty__clear { text-align: center; font-weight: 700; color: #16a34a; font-size: 1.1rem; }
.sperhake-penalty.is-paid { background: #f0fdf4; }

/* Relocation destination (paid cases) */
.sperhake-vehicle__destination {
	padding: 20px;
	background: linear-gradient(180deg, #fffaf0 0%, #fff4dd 100%);
	border-top: 1px solid #fbe3b3;
}
.sperhake-vehicle__destination h4,
.sperhake-route__title {
	margin: 0 0 14px;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #6b7280;
}
.sperhake-destination__address {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--sperhake-primary, #3a312a);
}

/* Route shown as a vertical "journey" timeline with map-pin markers */
.sperhake-route {
	list-style: none;
	margin: 0;
	padding: 0;
}
.sperhake-route__leg {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 0 0 22px 30px;
}
.sperhake-route__leg:last-child { padding-bottom: 0; }
/* The dotted line that connects the two pins */
.sperhake-route__leg:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 8px;
	top: 18px;
	bottom: -4px;
	width: 2px;
	background: repeating-linear-gradient(180deg, #e8c074 0 5px, transparent 5px 10px);
}
.sperhake-route__dot {
	position: absolute;
	left: 0;
	top: 2px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.15);
	border: 4px solid #16a34a;
}
.sperhake-route__leg--to .sperhake-route__dot {
	border-color: #dc2626;
	box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.15);
}
.sperhake-route__label {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #6b7280;
}
.sperhake-route__address {
	font-size: 1.02rem;
	font-weight: 600;
	color: var(--sperhake-primary, #3a312a);
	line-height: 1.4;
}

.sperhake-destination__actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	padding: 16px 20px 4px;
}
.sperhake-destination__actions .sperhake-btn { flex: 1 1 160px; gap: 8px; }
.sperhake-btn__icon { flex: none; }

.sperhake-btn--map {
	background: var(--sperhake-primary, #3a312a);
	color: #fff;
	box-shadow: 0 6px 16px -6px rgba(58, 49, 42, 0.5);
}
.sperhake-btn--map:hover { background: #2a231e; box-shadow: 0 8px 20px -6px rgba(58, 49, 42, 0.55); }
.sperhake-btn--invoice { background: #f6f2ec; color: var(--sperhake-primary, #3a312a); border: 1px solid #e3dccf; }
.sperhake-btn--invoice:hover { background: #ece5da; }

/* Invoice request */
.sperhake-invoice { padding: 10px 20px 20px; }
.sperhake-invoice[hidden] { display: none; }
.sperhake-invoice__title {
	margin: 6px 0 4px;
	font-size: 1.02rem;
	color: var(--sperhake-primary, #3a312a);
}
.sperhake-invoice__intro {
	margin: 0 0 14px;
	font-size: 0.88rem;
	color: #6b7280;
	line-height: 1.45;
}
.sperhake-invoice__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}
.sperhake-invoice__field {
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.sperhake-invoice__field--full { grid-column: 1 / -1; }
.sperhake-invoice__hint { font-size: 0.78rem; color: #6b7280; }
.sperhake-invoice__field-label {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--sperhake-primary, #3a312a);
}
.sperhake-invoice__input {
	width: 100%;
	padding: 12px 14px;
	font-size: 0.95rem;
	border: 2px solid #d7dde6;
	border-radius: 10px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sperhake-invoice__input:focus {
	outline: none;
	border-color: var(--sperhake-accent, #f9b022);
	box-shadow: 0 0 0 3px rgba(249, 176, 34, 0.22);
}
.sperhake-invoice__submit {
	margin-top: 16px;
	width: 100%;
}
.sperhake-invoice__msg {
	margin: 10px 0 0;
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 0.88rem;
}
.sperhake-invoice__msg.is-ok { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.sperhake-invoice__msg.is-error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }

@media (max-width: 480px) {
	.sperhake-invoice__grid { grid-template-columns: 1fr; }
}

/* Badges */
.sperhake-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	background: #e5e7eb;
	color: #374151;
}
.sperhake-badge--status { background: rgba(255, 255, 255, 0.18); color: #fff; }
.sperhake-badge--paid { background: #dcfce7; color: #166534; }

/* Success panel — mirrors the .sperhake-widget design language */
.sperhake-success {
	/* Theme tokens are scoped to .sperhake-widget; the success panel renders as
	   its own sibling, so redeclare them here to keep button colours visible. */
	--sperhake-primary: #3a312a;
	--sperhake-accent: #f9b022;
	--sperhake-radius: 18px;
	position: relative;
	max-width: 720px;
	margin: 48px auto 24px;
	padding: 40px;
	text-align: center;
	background: #fff;
	border: 1px solid #e6e9ee;
	border-radius: var(--sperhake-radius);
	box-shadow: 0 20px 50px -12px rgba(58, 49, 42, 0.18), 0 4px 12px rgba(58, 49, 42, 0.04);
	box-sizing: border-box;
	overflow: hidden;
}
/* Matching accent bar across the top of the card */
.sperhake-success::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 5px;
	background: linear-gradient(90deg, #16a34a 0%, #15803d 100%);
}
.sperhake-success__icon {
	width: 72px; height: 72px; line-height: 72px;
	margin: 8px auto 18px;
	border-radius: 50%;
	background: #16a34a; color: #fff;
	font-size: 38px; font-weight: 700;
	box-shadow: 0 0 0 8px rgba(22, 163, 74, 0.12);
}
.sperhake-success__title {
	margin: 0 0 26px;
	font-size: 1.9rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--sperhake-primary, #3a312a);
}
.sperhake-success__details {
	text-align: left;
	margin: 0 auto 26px;
	max-width: 460px;
}
.sperhake-success .sperhake-detail {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	border-bottom: 1px solid #eef0f3;
	padding: 13px 0;
}
.sperhake-success .sperhake-detail:last-child { border-bottom: 0; }
.sperhake-success .sperhake-detail__value { text-align: right; }
.sperhake-success .sperhake-btn--primary { min-width: 240px; }
.sperhake-success__pending { color: #6b7280; font-size: 0.92rem; margin: 0; }

/* Post-payment vehicle card auto-rendered above the search form: it lives
   outside .sperhake-widget, so it needs its own copy of the theme tokens. */
.sperhake-results--post-payment {
	--sperhake-primary: #3a312a;
	--sperhake-accent: #f9b022;
	max-width: 720px;
	margin: 0 auto 24px;
}

@media (max-width: 560px) {
	.sperhake-widget { margin: 24px auto; padding: 26px 20px; }
	.sperhake-widget__title { font-size: 1.55rem; }
	.sperhake-vehicle__grid { grid-template-columns: 1fr; }
	.sperhake-search__row { flex-direction: column; }
	.sperhake-btn--primary { width: 100%; }
}