/* Componenti dei pacchetti Club Magellano (cm-connect.php).
   Stessa funzione di quelli di mercatini-natale.com, grafica del sito: colori della
   palette di Blocksy, bordi e angoli dei widget. Classi con prefisso cm- perché il
   sito carica Bootstrap e .row/.col/.card sarebbero già stilizzate. */

:root {
  --cm-accento: var(--theme-palette-color-1, #f70759);
  --cm-testo: var(--theme-palette-color-4, #192a3d);
  --cm-testo-2: var(--theme-palette-color-3, #3a4f66);
  --cm-bordo: var(--theme-palette-color-5, #e1e8ed);
  --cm-fondo: var(--theme-palette-color-6, #f2f5f7);
  --cm-raggio: 6px;
  --cm-ombra: 0 2px 12px rgba(25, 42, 61, 0.08);
}

/* ---------------- elementi comuni ---------------- */

.cm-eyebrow {
  margin: 0 0 4px !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cm-accento);
}

.cm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 20px;
  border: 2px solid var(--cm-accento);
  border-radius: 3px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.cm-btn-primario {
  background: var(--cm-accento);
  color: #fff !important;
}

.cm-btn-primario:hover {
  box-shadow: 0 4px 14px rgba(247, 7, 89, 0.35);
}

.cm-btn-secondario {
  background: #fff;
  color: var(--cm-accento) !important;
}

.cm-btn-secondario:hover {
  background: var(--cm-accento);
  color: #fff !important;
}

.cm-sezione-titolo {
  margin: 0 0 12px !important;
  font-size: 20px !important;
  line-height: 1.3 !important;
  font-weight: 700;
  color: var(--cm-testo);
}

/* elenchi incluso / escluso: il catalogo manda <ul><li>, qui diventano spunte */
.cm-lista ul,
ul.cm-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cm-lista li {
  position: relative;
  margin: 0 0 6px;
  padding-left: 26px;
  font-size: 16px;
  line-height: 1.45;
}

.cm-lista li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

.cm-lista-si li::before {
  content: "\f00c";
  color: var(--cm-accento);
}

.cm-lista-no li::before {
  content: "\f00d";
  color: #9aa8b5;
}

/* ---------------- blocco del viaggio [cm_info] ---------------- */

.cm-viaggio {
  margin: 0 0 2.5rem;
  border: 1px solid var(--cm-bordo);
  border-top: 4px solid var(--cm-accento);
  border-radius: var(--cm-raggio);
  background: #fff;
  box-shadow: var(--cm-ombra);
  color: var(--cm-testo);
}

.cm-viaggio p {
  margin: 0;
}

.cm-viaggio-testa {
  padding: 22px 24px 18px;
}

.cm-viaggio-titolo {
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
}

.cm-fatti {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px 20px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  font-size: 16px;
  line-height: 1.4;
  color: var(--cm-testo-2);
}

.cm-fatti li {
  margin: 0;
}

.cm-fatti .cm-fatti-date {
  grid-column: 1 / -1;
}

.cm-fatti i {
  width: 1.3em;
  color: var(--cm-accento);
}

.cm-fatti strong {
  color: var(--cm-testo);
  font-size: 18px;
}

.cm-tappe {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 14px 24px;
  list-style: none;
  border-top: 1px solid var(--cm-bordo);
  background: var(--cm-fondo);
}

.cm-tappe li {
  margin: 0;
  padding: 4px 12px;
  border: 1px solid var(--cm-bordo);
  border-radius: 999px;
  background: #fff;
  font-size: 14px;
  line-height: 1.4;
  color: var(--cm-testo);
}

.cm-giorni {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 0;
  padding: 20px 24px;
  list-style: none;
  border-top: 1px solid var(--cm-bordo);
}

.cm-giorni > li {
  margin: 0;
}

.cm-giorno {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cm-accento);
}

.cm-giorni ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cm-giorni ul li {
  margin: 0 0 4px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--cm-testo-2);
}

.cm-giorni ul i {
  color: var(--cm-testo-2);
  opacity: 0.7;
}

.cm-viaggio-azioni {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 24px 24px;
}

/* ---------------- finestra del programma ---------------- */

.cm-info-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
  background: rgba(25, 42, 61, 0.6);
}

.cm-info-modal[hidden] {
  display: none;
}

html.cm-modal-aperta {
  overflow: hidden;
}

.cm-modal-content {
  position: relative;
  width: 100%;
  max-width: 1000px;
  max-height: 100%;
  overflow: auto;
  border-radius: var(--cm-raggio);
  background: #fff;
  color: var(--cm-testo);
  scrollbar-width: thin;
}

.cm-modal-content p {
  margin-top: 0;
}

.cm-modal-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 60px 16px 20px;
  border-bottom: 1px solid var(--cm-bordo);
  background: #fff;
}

.cm-modal-header > div {
  flex: 1;
  min-width: 0;
}

.cm-modal-titolo {
  margin: 0 !important;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 700;
}

/* su smartphone il pulsante va a capo, a tutta larghezza sotto il titolo */
.cm-modal-header {
  flex-wrap: wrap;
}

.cm-modal-header .cm-btn {
  order: 3;
  width: 100%;
  min-height: 40px;
  flex-shrink: 0;
}

.cm-close {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  min-height: 0;
  padding: 0 8px;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--cm-testo) !important;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
}

.cm-modal-indice {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 20px;
  border-bottom: 1px solid var(--cm-bordo);
  background: var(--cm-fondo);
}

.cm-modal-indice a {
  flex-shrink: 0;
  padding: 4px 12px;
  border: 1px solid var(--cm-bordo);
  border-radius: 999px;
  background: #fff;
  font-size: 14px;
  color: var(--cm-testo) !important;
  text-decoration: none !important;
}

.cm-modal-indice a:hover {
  border-color: var(--cm-accento);
  color: var(--cm-accento) !important;
}

.cm-modal-body {
  padding: 24px 20px;
}

.cm-modal-body section + section {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--cm-bordo);
}

.cm-incluso-escluso {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

.cm-nota {
  margin: -6px 0 14px !important;
  font-size: 14px;
  color: var(--cm-testo-2);
}

/* HTML del programma che arriva dal catalogo: il suo stile in linea viene ridimensionato */
.cm-programma h3 {
  margin: 1.4em 0 0.6em;
  font-size: 18px;
  line-height: 1.35;
  color: var(--cm-accento);
}

.cm-programma h3:first-child {
  margin-top: 0;
}

.cm-programma h3 i {
  display: none;
}

.cm-programma ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cm-programma ul li {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--cm-testo-2);
}

.cm-programma ul li p {
  margin: 0 0 2px !important;
  font-size: 15px !important;
  color: var(--cm-testo);
}

.cm-programma ul li p i {
  color: var(--cm-accento);
}

/* città di partenza */
.cm-citta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.cm-citta-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  padding: 12px 14px;
  border: 1px solid var(--cm-bordo);
  border-radius: var(--cm-raggio);
  color: var(--cm-testo) !important;
  text-decoration: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cm-citta-card:hover {
  border-color: var(--cm-accento);
  box-shadow: var(--cm-ombra);
}

.cm-citta-nome {
  font-size: 17px;
  font-weight: 700;
}

.cm-citta-prezzo {
  font-size: 17px;
  font-weight: 700;
  color: var(--cm-accento);
  white-space: nowrap;
}

.cm-citta-dove {
  grid-column: 1 / -1;
  font-size: 13px;
  line-height: 1.4;
  color: var(--cm-testo-2);
}

/* ---------------- card di prenotazione [cm_mini_form] ---------------- */

.cm-mini-form {
  margin: 0 0 20px;
  border: 1px solid var(--cm-bordo);
  border-top: 4px solid var(--cm-accento);
  border-radius: var(--cm-raggio);
  background: #fff;
  box-shadow: var(--cm-ombra);
  color: var(--cm-testo);
  font-size: 15px;
  line-height: 1.4;
}

/* compatta: in barra laterale resta ferma e deve entrare tutta nello schermo.
   Il tema dà ai paragrafi un'interlinea da testo lungo (32px): qui si riporta a quella della card */
.cm-mini-form p,
.cm-mini-form label {
  margin: 0;
  line-height: 1.35 !important;
}

/* il titolo e il prezzo bastano a dire cos'è: niente sopratitolo nella card */
.cm-mini-form .cm-eyebrow {
  display: none;
}

.cm-mf-testa {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--cm-bordo);
}

.cm-mf-titolo {
  font-size: 17px;
  font-weight: 700;
}

.cm-mf-prezzo {
  margin-top: 6px !important;
  color: var(--cm-testo-2);
}

.cm-mf-prezzo strong {
  font-size: 24px;
  line-height: 1.1;
  color: var(--cm-accento);
}

.cm-mf-corpo {
  padding: 12px 16px 14px;
}

/* date di partenza: etichette in ordine cronologico, mai spezzate a metà */
.cm-mf-date {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}

.cm-mf-date li {
  margin: 0;
  padding: 3px 9px;
  border: 1px solid var(--cm-bordo);
  border-radius: 3px;
  background: var(--cm-fondo);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--cm-testo);
}

.cm-mf-ritrovo i {
  color: var(--cm-accento);
}

.cm-mf-nota {
  margin-top: 6px !important;
  font-size: 12px;
  color: var(--cm-testo-2);
}

.cm-etichetta {
  display: block;
  margin: 0 0 4px !important;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
  color: var(--cm-testo);
}

.cm-etichetta small {
  font-weight: 400;
  color: var(--cm-testo-2);
}

.cm-mini-form select {
  display: block;
  width: 100%;
  height: 38px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid var(--cm-bordo);
  border-radius: 3px;
  background-color: #fff;
  font-size: 15px;
  color: var(--cm-testo);
}

.cm-mini-form select:focus {
  border-color: var(--cm-accento);
  outline: none;
}

.cm-mf-ritrovo {
  margin: 4px 0 10px !important;
  font-size: 13px;
  line-height: 1.4;
  color: var(--cm-testo-2);
}

.cm-select-people {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: end;
}

.cm-mf-totale {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--cm-bordo);
  font-weight: 700;
}

.cm-mf-totale strong {
  font-size: 22px;
  white-space: nowrap;
}

.cm-mf-dettaglio {
  min-height: 1.4em;
  font-size: 13px;
  color: var(--cm-testo-2);
}

.cm-btn-acquista {
  display: flex;
  width: 100%;
  margin-top: 10px;
  text-transform: uppercase;
}

.cm-mf-acconto {
  margin-top: 6px !important;
  font-size: 13px;
  text-align: center;
  color: var(--cm-testo-2);
}

.cm-mf-programma {
  display: inline-block;
  min-height: 0;
  margin: 8px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none !important;
  box-shadow: none !important;
  font-size: 14px;
  font-weight: 700;
  color: var(--cm-accento);
  cursor: pointer;
}

.cm-mf-programma:hover {
  text-decoration: underline;
}

/* pulsanti PRENOTA nel testo (blocco Pulsante di WordPress che porta al checkout):
   larghi e in grassetto, come il pulsante della card */
.entry-content .wp-block-button__link[href*="clubmagellano.it/inizia-checkout"] {
  box-sizing: border-box;
  min-width: 320px;
  max-width: calc(100vw - 48px);
  padding: 14px 40px;
  border-radius: 3px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------------- [cm_incluso] ---------------- */

.cm-incluso {
  margin: 1.5rem 0;
  padding: 22px 24px;
  border: 1px solid var(--cm-bordo);
  border-radius: var(--cm-raggio);
  background: #fff;
  color: var(--cm-testo);
}

.cm-due-colonne {
  column-gap: 32px;
}

/* ---------------- ampiezze ---------------- */

@media (min-width: 768px) {
  .cm-fatti {
    grid-template-columns: 1fr 1fr;
  }

  .cm-giorni {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }

  .cm-viaggio-azioni {
    flex-direction: row;
  }

  .cm-viaggio-azioni .cm-btn {
    flex: 1;
  }

  .cm-incluso-escluso {
    grid-template-columns: 3fr 2fr;
  }

  .cm-citta {
    grid-template-columns: 1fr 1fr;
  }

  .cm-due-colonne {
    columns: 2;
  }

  .cm-due-colonne li {
    break-inside: avoid;
  }

  .cm-modal-header {
    flex-wrap: nowrap;
  }

  .cm-modal-header .cm-btn {
    order: 0;
    width: auto;
  }

  .cm-modal-body {
    padding: 28px 32px;
  }
}

@media (min-width: 1000px) {
  /* nel testo solo dove la barra laterale è nascosta (Blocksy la nasconde sotto i 1000px) */
  .cm-solo-mobile {
    display: none;
  }

  /* money page: la card resta in vista durante lo scorrimento. La barra laterale
     viene allungata fino in fondo alla colonna, così la card ha spazio per restare ferma. */
  .cm-money-page #sidebar .ct-sidebar {
    height: 100%;
  }

  .cm-money-page:not(.cm-card-non-fissa) #sidebar .ct-widget:has(> .cm-mini-form) {
    position: sticky;
    /* il valore esatto lo imposta cm-connect.js: altezza della barra di navigazione + 16px */
    top: var(--cm-sticky-top, 136px);
    transition: top 0.2s ease;
    z-index: 5;
  }

  .cm-citta {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------------- scheda della tappa (money page Strada Romantica) ----------------
   Stessa veste delle schede dei mercatini (style.css, .mdb-mercatino): la sezione
   della città è un riquadro e il blocco "Informazioni" (mappa, sito, come arrivare)
   ne è la parte grigia in fondo. Sono gruppi di blocchi normali, modificabili. */

.mdb-mercatino > .mdb-info {
  margin: 1.5rem 0 0;
  padding: 16px 24px 20px;
  border-top: 1px solid var(--cm-bordo);
  background: var(--cm-fondo);
  font-size: 16px;
  line-height: 1.5;
}

.mdb-info > h3 {
  margin: 0 0 10px !important;
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cm-testo-2);
}

.mdb-info > p {
  margin: 0 0 6px !important;
  font-size: 16px;
  line-height: 1.5 !important;
}

.mdb-info > ul {
  margin: 4px 0 0 !important;
  padding-left: 1.2em;
}

.mdb-info li {
  margin: 0 0 4px;
  font-size: 15px;
  line-height: 1.5;
}