/* Colori in un punto solo: per passare al rosso del sito basta cambiare --cm-accent. */
.cm-banner,
.cm-banner *,
.cm-page,
.cm-page * {
  box-sizing: border-box;
}
.cm-banner,
.cm-page {
  --cm-accent: #f47920;
  --cm-accent-dark: #d9650f;
  --cm-dark: #1f1f1f;
  --cm-border: #e3e3e3;
  --cm-muted: #6b6b6b;
}

/* ── Banner (hook displayCentriMontaggio) ─────────────────────────────── */
.cm-banner {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 26px 36px;
  border-radius: 6px;
  background: linear-gradient(100deg, #1b1b1b 0%, #262626 55%, #333 100%);
  color: #fff;
}
.cm-banner__icon {
  flex: 0 0 auto;
  color: var(--cm-accent);
  line-height: 0;
}
.cm-banner__text {
  flex: 1 1 auto;
  min-width: 0;
}
.cm-banner__title {
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}
.cm-banner__sub {
  margin: 0;
  max-width: 420px;
  font-size: 15px;
  line-height: 1.5;
  color: #e6e6e6;
}
.cm-banner__btn {
  flex: 0 0 auto;
  padding: 12px 26px;
  border-radius: 3px;
  background: var(--cm-accent);
  color: #fff !important;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background .15s;
}
.cm-banner__btn:hover,
.cm-banner__btn:focus {
  background: var(--cm-accent-dark);
}
@media (max-width: 767px) {
  .cm-banner {
    flex-wrap: wrap;
    gap: 16px;
    padding: 22px 20px;
  }
  .cm-banner__icon svg {
    width: 44px;
    height: 55px;
  }
  .cm-banner__text {
    flex-basis: calc(100% - 64px);
  }
  .cm-banner__title {
    font-size: 19px;
  }
  .cm-banner__btn {
    width: 100%;
    text-align: center;
  }
}

/* ── Pagina /centri-montaggio ─────────────────────────────────────────── */
.cm-page {
  max-width: 1100px;
  margin: 0 auto 40px;
}
.cm-search {
  padding: 26px 30px;
  border-radius: 6px;
  background: var(--cm-dark);
  color: #fff;
}
.cm-search__title {
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
}
.cm-search__sub {
  margin: 0 0 18px;
  color: #ddd;
}
.cm-search__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
}
.cm-field {
  display: flex;
  flex-direction: column;
  flex: 0 1 190px;
}
.cm-field--cap {
  flex-basis: 160px;
}
.cm-field label {
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
}
.cm-field input,
.cm-field select {
  height: 44px;
  padding: 0 12px;
  border: 2px solid var(--cm-accent);
  border-radius: 3px;
  background: #fff;
  color: #222;
  font-size: 16px;
}
.cm-btn {
  display: inline-block;
  height: 44px;
  padding: 0 34px;
  border: 0;
  border-radius: 3px;
  background: var(--cm-accent);
  color: #fff !important;
  font-weight: 700;
  font-size: 16px;
  line-height: 44px;
  text-decoration: none !important;
  cursor: pointer;
}
.cm-btn:hover {
  background: var(--cm-accent-dark);
}
.cm-btn--outline {
  background: transparent;
  border: 2px solid var(--cm-accent);
  color: var(--cm-accent) !important;
  line-height: 40px;
}
.cm-btn--outline:hover {
  background: var(--cm-accent);
  color: #fff !important;
}

.cm-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 24px 0;
  color: var(--cm-muted);
}
.cm-loading[hidden],
.cm-msg[hidden],
.cm-results-head[hidden] {
  display: none;
}
.cm-spinner {
  width: 22px;
  height: 22px;
  border: 3px solid var(--cm-border);
  border-top-color: var(--cm-accent);
  border-radius: 50%;
  animation: cm-spin .8s linear infinite;
}
@keyframes cm-spin {
  to { transform: rotate(360deg); }
}
.cm-msg {
  margin: 20px 0;
  padding: 12px 16px;
  border-radius: 4px;
  background: #f5f5f5;
  color: #333;
}
.cm-msg--error {
  background: #fdecea;
  color: #a12a1e;
}
.cm-search .cm-msg {
  margin: 0;
}
.cm-results-head {
  margin: 24px 0 12px;
  font-size: 17px;
}

.cm-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.cm-card {
  display: flex;
  flex-direction: column;
  padding: 18px 20px;
  border: 1px solid var(--cm-border);
  border-radius: 6px;
  background: #fff;
}
.cm-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.cm-card__name {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 700;
  color: #222;
}
.cm-card__km {
  flex: 0 0 auto;
  padding: 3px 10px;
  border-radius: 14px;
  background: var(--cm-accent);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}
.cm-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
}
.cm-badge--open {
  background: #e3f4e5;
  color: #1e7b34;
}
.cm-badge--closed {
  background: #f1f1f1;
  color: #777;
}
.cm-card__addr,
.cm-card__tel {
  margin: 8px 0 0;
  color: var(--cm-muted);
}
.cm-card__tel a {
  color: inherit;
}
.cm-card__prices {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--cm-border);
}
.cm-card__prices-title {
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--cm-muted);
}
.cm-price {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
}
.cm-price strong {
  color: #222;
}
.cm-price small {
  font-weight: 400;
  color: var(--cm-muted);
}
.cm-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-top: auto;
  padding-top: 12px;
}
.cm-card__hours summary {
  cursor: pointer;
  color: #333;
  font-size: 14px;
}
.cm-card__hours table {
  margin-top: 6px;
  font-size: 13px;
}
.cm-card__hours th {
  padding-right: 10px;
  font-weight: 700;
}
.cm-card__map {
  flex: 0 0 auto;
  color: var(--cm-accent) !important;
  font-weight: 700;
  font-size: 14px;
}

.cm-how {
  margin-top: 36px;
  padding: 26px 30px;
  border-radius: 6px;
  background: #f6f6f6;
  text-align: center;
}
.cm-how h3 {
  margin: 0 0 18px;
  font-size: 20px;
}
.cm-how__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 22px;
  text-align: left;
}
.cm-how__step {
  display: flex;
  gap: 12px;
}
.cm-how__step > span {
  flex: 0 0 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--cm-accent);
  color: #fff;
  font-weight: 700;
  line-height: 32px;
  text-align: center;
}
.cm-how__step p {
  margin: 4px 0 0;
  color: var(--cm-muted);
  font-size: 14px;
}

@media (max-width: 767px) {
  .cm-search,
  .cm-how {
    padding: 20px 16px;
  }
  .cm-field,
  .cm-field--cap {
    flex: 1 1 100%;
  }
  .cm-search__form .cm-btn {
    width: 100%;
  }
  .cm-results {
    grid-template-columns: 1fr;
  }
  .cm-how__steps {
    grid-template-columns: 1fr;
  }
}