:root{
  --mv-bg:#f5f7fa;
  --mv-card:#ffffff;
  --mv-brand:#0057b8;
  --mv-text:#111827;
  --mv-muted:#6b7280;
  --mv-border:#eaeef2;

  /* Override Bootstrap "success" (green) to brand blue */
  --bs-success: var(--mv-brand);
  --bs-success-rgb: 0,87,184;

  /* Project custom green variable -> brand blue (removes teal/green accents globally) */
  --color-green: var(--mv-brand);
}

/* Use the same background as .hero-gradient for all "light-green" info boxes */
.bg-light-green{
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
  color: var(--mv-text) !important;
}

/* Ensure checkmarks/accents stay visible inside these boxes (even when background is overridden to blue) */
.bg-light-green .text-success{
  color: currentColor !important;
}

/* Page background + base text */
body{background:var(--mv-bg)!important;color:var(--mv-text)}

/* Keep navbar clean */
.main-nav{background:#fff!important}

/* Primary actions: map "btn-success" to brand blue for this theme */
.btn.btn-success{
  background-color:var(--mv-brand)!important;
  border-color:var(--mv-brand)!important;
}
.btn.btn-success:focus,
.btn.btn-success:focus-visible{
  /* remove the default green focus glow */
  outline: none!important;
  box-shadow: 0 0 0 .25rem rgba(0,87,184,.25)!important;
}
.btn.btn-success:hover,
.btn.btn-success:focus,
.btn.btn-success:active,
.btn.btn-success.active{
  background-color:var(--mv-brand)!important;
  border-color:var(--mv-brand)!important;
  filter:brightness(.92);
}

/* Many buttons use text-black; ensure readability on blue */
.btn.btn-success.text-black{color:#fff!important}
.btn.btn-success.text-black:hover,
.btn.btn-success.text-black:focus,
.btn.btn-success.text-black:active{color:#fff!important}

/* Hero submit button had its own green background/shadow */
.hero-form-card .hero-submit{
  background-color:var(--mv-brand)!important;
  /* no glow by default */
  box-shadow:none!important;
}
/* Offer form (motorrad-verkaufen / sprzedaj-motocykl): responsive width */
body.mv-offer-form .hero-form-card.w-100{
  width:100%!important;
  max-width: 960px !important;
  margin-left:auto!important;
  margin-right:auto!important;
}
@media (min-width: 1200px){
  body.mv-offer-form .hero-form-card.w-100{
    max-width: 1100px !important;
  }
}

/* Offer form header elements (match reference layout) */
body.mv-offer-form .mv-back-link{
  color: var(--mv-text) !important;
  text-decoration: none !important;
  font-weight: 600;
}
body.mv-offer-form .mv-back-link:hover{filter:brightness(.92)}
body.mv-offer-form .mv-step-list{
  padding-left: 1.25rem;
  margin: 0;
}
body.mv-offer-form .mv-step-list a{
  color: var(--mv-text) !important;
  text-decoration: none !important;
}
body.mv-offer-form .mv-step-list a:hover{
  color: var(--mv-brand) !important;
  text-decoration: underline !important;
}

/* Offer form title: no top margin */
body.mv-offer-form h1.text-grey.fs-32.fw-600.py-2.mb-2{
  margin-top: 0 !important;
}

/* Offer form nav row: make "Zurück" column much smaller (desktop) */
@media (min-width: 768px){
  body.mv-offer-form #mv-form .row.align-items-center > .col-md-6.col-12:first-child{
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 180px;
  }
  body.mv-offer-form #mv-form .row.align-items-center > .col-md-6.col-12:last-child{
    flex: 1 1 auto !important;
    width: auto !important;
  }
  body.mv-offer-form #mv-form .row.align-items-center > .col-md-6.col-12:first-child [data-mv-prev]{
    width: auto !important; /* overrides w-100 */
    min-width: 140px;
  }
}

/* Offer form: keep required note in one line */
body.mv-offer-form .mv-required-note{
  white-space: nowrap;
}

/* Offer form step 1: add top padding like pt-5 */
body.mv-offer-form #mv-form [data-mv-step="1"] > .row.g-4{
  padding-top: 3rem; /* Bootstrap pt-5 */
}

/* Offer form step 2: add top padding like pt-5 */
body.mv-offer-form #mv-form [data-mv-step="2"] > .row.g-4{
  padding-top: 3rem; /* Bootstrap pt-5 */
}

/* Offer form step 3: add top padding like pt-5 */
body.mv-offer-form #mv-form [data-mv-step="3"] > .row.g-4{
  padding-top: 3rem; /* Bootstrap pt-5 */
}

/* Offer form step 5: add top padding like pt-5 */
body.mv-offer-form #mv-form [data-mv-step="5"] > .row.g-4{
  padding-top: 3rem; /* Bootstrap pt-5 */
}

/* Offer form step 3: make damage/road textareas full width */
@media (min-width: 768px){
  body.mv-offer-form #mv-form #damage-description .col-md-6.col-12,
  body.mv-offer-form #mv-form #road-unreadiness-reason .col-md-6.col-12{
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* Offer form step 4 dropzone: remove orange border, use brand blue like "Weiter" */
body.mv-offer-form #image-collector.mv-dropzone{
  border-color: var(--mv-brand) !important;
}
body.mv-offer-form #image-collector.mv-dropzone.border-warning{
  border-color: var(--mv-brand) !important;
}

/* Make the progress steps bar a bit narrower on desktop */
@media (min-width: 768px){
  body.mv-offer-form .progress-container{
    max-width: 860px;
    /* progress-container has Bootstrap m-0 (margin:0!important) -> override only left/right */
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
.hero-form-card .hero-submit:hover,
.hero-form-card .hero-submit:focus,
.hero-form-card .hero-submit:focus-visible{
  background-color:var(--mv-brand)!important;
  box-shadow:0 22px 48px rgba(0,87,184,.32)!important;
}

/* Outline success buttons should be blue too */
.btn.btn-outline-success{
  color:var(--mv-brand)!important;
  border-color:var(--mv-brand)!important;
}
.btn.btn-outline-success:hover,
.btn.btn-outline-success:focus{
  background-color:var(--mv-brand)!important;
  border-color:var(--mv-brand)!important;
  color:#fff!important;
}

/* Utility classes */
.text-success{color:var(--mv-brand)!important}
.border-success{border-color:var(--mv-brand)!important}
.link-success{color:var(--mv-brand)!important}
.link-success:hover{color:var(--mv-brand)!important;filter:brightness(.92)}
.bg-success{background-color:var(--mv-brand)!important}
.bg-success.text-black{color:#fff!important}

/* Recolor homepage feature icons to match the blue theme */
img[src*="/assets/home/images/lockicon"],
img[src*="/assets/home/images/euroicon"],
img[src*="/assets/home/images/secureicon"],
img[src*="/assets/home/images/speedicon"]{
  /* Teal/green -> brand blue */
  filter:hue-rotate(45deg) saturate(1.35) brightness(.95);
}

/* Blue dots should match brand blue */
.blue-dot{background-color:transparent!important}
.blue-dot::before{background-color:var(--mv-brand)!important}

/* FAQ: remove yellow/orange accent (open state arrow/circle) */
.faq-question::after,
.faq-question::before{
  border-color:var(--mv-brand)!important;
}
.faq-question:not(.collapsed)::after,
.faq-question:not(.collapsed)::before{
  border-color:var(--mv-brand)!important;
}

/* About-us image: remove baked orange border via crop + add blue frame */
.mv-photo-frame{
  display:inline-block;
  background:var(--mv-brand);
  padding:3px;
  border-radius:18px;
  overflow:hidden;
  box-sizing:border-box;
}
.mv-photo-frame > img{
  display:block;
  border-radius:15px;
  /* crop a few pixels off the edges (removes orange border inside the bitmap) */
  transform: scale(1.04);
  transform-origin: center;
}

/* Links */
a{color:var(--mv-brand)}
a:hover{color:var(--mv-brand);filter:brightness(.92)}

/* Card-ish containers often rely on white; keep consistent */
.card,.hero-form-card,.offer-card{
  background:var(--mv-card);
  border-color:var(--mv-border);
}