/* MekanAuto Biludlejning – arver temaets skrift. Tilpas farver via variablerne herunder. */
:root {
	--mar-ink: #1e252b;
	--mar-muted: #5b6670;
	--mar-line: #d9dee2;
	--mar-bg-soft: #f3f5f6;
	--mar-accent: #1c5aa0;
	--mar-accent-ink: #ffffff;
	--mar-ok: #1f7a3f;
	--mar-warn: #9a6200;
	--mar-off: #6b7278;
	--mar-radius: 6px;
}

.mar-hero, .mar-steps, .mar-cta, .mar-home, .mar-grid, .mar-form, .mar-single, .mar-terms, .mar-empty { color: var(--mar-ink); }

/* Knapper */
.mar-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.mar-btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: .6rem 1rem; border: 2px solid var(--mar-accent); border-radius: var(--mar-radius);
	background: var(--mar-accent); color: var(--mar-accent-ink) !important;
	font-weight: 600; line-height: 1.2; text-decoration: none !important; cursor: pointer;
}
.mar-btn:hover { filter: brightness(1.1); }
.mar-btn:focus-visible, .mar-form :focus-visible { outline: 3px solid var(--mar-accent); outline-offset: 2px; }
.mar-btn--ghost { background: transparent; color: var(--mar-accent) !important; }
.mar-btn--lg { padding: .8rem 1.3rem; font-size: 1.05rem; }

/* Hero */
.mar-hero { padding: clamp(1.5rem, 4vw, 3rem) 0; max-width: 46rem; }
.mar-hero h1 { margin: 0 0 .75rem; line-height: 1.1; }
.mar-hero__lead { font-size: 1.15rem; color: var(--mar-muted); margin: 0 0 1.25rem; }

/* Biloversigt */
.mar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; margin: 1rem 0 2rem; }
.mar-card { display: flex; flex-direction: column; border: 1px solid var(--mar-line); border-radius: var(--mar-radius); overflow: hidden; background: #fff; }
.mar-card__img { display: block; aspect-ratio: 4 / 3; background: var(--mar-bg-soft); }
.mar-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mar-card__noimg { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 160px; color: var(--mar-muted); background: var(--mar-bg-soft); }
.mar-card__body { padding: 1rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.mar-card__title { margin: 0; font-size: 1.2rem; }
.mar-card__title a { color: inherit; text-decoration: none; }
.mar-card__price { margin: auto 0 .25rem; font-size: 1.15rem; font-weight: 700; }
.mar-card--udlejet .mar-card__img { opacity: .6; }

.mar-specs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem .9rem; color: var(--mar-muted); }

/* Status */
.mar-badge { align-self: flex-start; display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .85rem; font-weight: 600; color: #fff; }
.mar-badge--ledig { background: var(--mar-ok); }
.mar-badge--reserveret { background: var(--mar-warn); }
.mar-badge--udlejet { background: var(--mar-off); }

/* Trin */
.mar-steps ol { padding-left: 1.3rem; margin: .5rem 0 1rem; }
.mar-steps li { margin-bottom: .5rem; }

/* Værksteds-CTA og forside */
.mar-cta { border-left: 4px solid var(--mar-accent); background: var(--mar-bg-soft); padding: 1.25rem 1.5rem; margin: 2rem 0; border-radius: 0 var(--mar-radius) var(--mar-radius) 0; }
.mar-cta h3 { margin: 0 0 .4rem; }
.mar-cta p { margin: 0 0 .75rem; }
.mar-home { padding: 2rem 0; }
.mar-home__text { max-width: 40rem; margin-bottom: 1rem; }
.mar-home__text h2 { margin: 0 0 .4rem; }

.mar-small { font-size: .9rem; color: var(--mar-muted); }
.mar-empty { padding: 1.5rem; background: var(--mar-bg-soft); border-radius: var(--mar-radius); margin: 1rem 0 2rem; }

/* Formular */
.mar-form { max-width: 44rem; }
.mar-form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 1rem; }
.mar-form label { display: block; font-weight: 600; margin-bottom: .3rem; }
.mar-form input[type=text], .mar-form input[type=tel], .mar-form input[type=email], .mar-form input[type=date], .mar-form select, .mar-form textarea {
	width: 100%; padding: .6rem .7rem; border: 1px solid #aeb6bd; border-radius: var(--mar-radius); font: inherit; background: #fff; color: var(--mar-ink); box-sizing: border-box;
}
.mar-consent label { font-weight: 400; display: flex; gap: .5rem; align-items: flex-start; }
.mar-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mar-notice { padding: 1rem 1.2rem; border-radius: var(--mar-radius); margin: 0 0 1rem; }
.mar-notice ul { margin: .4rem 0 0 1.1rem; }
.mar-notice--ok { background: #e7f4ec; border: 1px solid #b5dcc3; }
.mar-notice--error { background: #fbeaea; border: 1px solid #e6b7b7; }

/* Enkelt bil */
.mar-single { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 2rem; margin-bottom: 2rem; }
.mar-single__main img { width: 100%; height: auto; border-radius: var(--mar-radius); display: block; }
.mar-thumbs { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.mar-thumbs img { width: 72px; height: 54px; object-fit: cover; border-radius: 4px; display: block; }
.mar-single__info { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.mar-pricebox { width: 100%; padding: 1rem; background: var(--mar-bg-soft); border-radius: var(--mar-radius); }
.mar-dl { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; margin: 0; width: 100%; }
.mar-dl dt { color: var(--mar-muted); }
.mar-dl dd { margin: 0; font-weight: 600; }
.mar-single__desc { margin-bottom: 2rem; max-width: 46rem; }

/* Vilkår */
.mar-term { margin-bottom: 1.5rem; max-width: 46rem; }
.mar-term h2 { font-size: 1.2rem; margin: 0 0 .3rem; }
.mar-term--missing { border: 2px dashed var(--mar-warn); padding: .75rem 1rem; border-radius: var(--mar-radius); color: var(--mar-warn); }

@media (max-width: 760px) {
	.mar-single { grid-template-columns: 1fr; }
}