/* Mantrailing Manager Pro Front-End Styles
 * Version 0.8.1
 */

/* ─── Base form containers ───────────────────────────────────────────────── */
.mp-richiesta-gara-form,
.mp-valuta-gara-form,
.mp-lista-gare-form {
  display: block;               /* non più grid */
  max-width: 800px;
  margin: 0 auto 2rem;
  padding: 1rem;
  background: #;
  border: 0px solid #ddd;
  border-radius: 20px;
  font-family: 'Onest', sans-serif;
  color: #1d1d1b;
}

/* ─── Sezioni a doppia colonna ─────────────────────────────────────────────── */
.mp-richiesta-gara-form .mp-section,
.mp-valuta-gara-form .mp-section,
.mp-lista-gare-form .mp-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  margin-bottom: 2rem;
}

/* BOX 1: full-width + doppia colonna interna */
.mp-valuta-gara-form .mp-section--wide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  margin-bottom: 2rem;
}

/* Colonne interne: vertical stack per ciascuna */
.mp-valuta-gara-form .mp-section--wide .mp-colonna {
  display: flex;
  flex-direction: column;
}

/* ─── Heading e label ────────────────────────────────────────────────────── */
.mp-valuta-gara-form h2,
.mp-valuta-gara-form legend {
  grid-column: 1 / -1;
  font-family: 'Staatliches', cursive;
  color: #312783;
  margin-bottom: .5rem;
}

.mp-richiesta-gara-form label,
.mp-valuta-gara-form label,
.mp-lista-gare-form label {
  display: block;
  font-weight: bold;
  margin-bottom: .25rem;
}

/* ─── Inputs / selects / textarea ─────────────────────────────────────────── */
/* qui gestiamo solo select e textarea, gli input verranno gestiti più in basso */
.mp-richiesta-gara-form select,
.mp-valuta-gara-form select,
.mp-lista-gare-form select,
.mp-richiesta-gara-form textarea,
.mp-valuta-gara-form textarea {
  padding: .5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

/* ─── Inputs full-width, ESCLUDENDO i checkbox ───────────────────────────── */
.mp-valuta-gara-form input:not([type="checkbox"]),
.mp-valuta-gara-form select,
.mp-valuta-gara-form textarea {
  width: 100%;
  padding: .5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

/* Checkbox a larghezza automatica ─────────────────────────────────────── */
.mp-valuta-gara-form input[type="checkbox"] {
  width: auto !important;
  margin-right: .5rem;
  vertical-align: middle;
}

/* spanning textarea e button full width */
.mp-richiesta-gara-form textarea,
.mp-valuta-gara-form textarea,
.mp-richiesta-gara-form input[type="submit"],
.mp-valuta-gara-form input[type="submit"],
.mp-lista-gare-form button {
  grid-column: 1 / -1;
}

/* ─── Submit button ───────────────────────────────────────────────────────── */
.mp-richiesta-gara-form input[type="submit"],
.mp-valuta-gara-form input[type="submit"],
.mp-lista-gare-form button {
  padding: .75rem 1.25rem;
  background: #6287ef;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.mp-richiesta-gara-form input[type="submit"]:hover,
.mp-valuta-gara-form input[type="submit"]:hover,
.mp-lista-gare-form button:hover {
  background: #cdbe7d;
}

/* ─── Results table ───────────────────────────────────────────────────────── */
.mp-gare-table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  font-family: 'Onest', sans-serif;
  color: #1d1d1b;
}
.mp-gare-table th,
.mp-gare-table td {
  border: 1px solid #ddd;
  padding: 0.75rem;
  text-align: left;
}
.mp-gare-table th {
  background: #e5edfc;
  color: #1d1d1b;
}
.mp-gare-table tr:nth-child(even) {
  background: #f7f8fa;
}

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .mp-richiesta-gara-form .mp-section,
  .mp-valuta-gara-form .mp-section,
  .mp-lista-gare-form .mp-section,
  .mp-valuta-gara-form .mp-section--wide {
    grid-template-columns: 1fr;
  }
  /* Allarga le intestazioni dei box su entrambe le colonne */
  .mp-valuta-gara-form .mp-section h3,
  .mp-valuta-gara-form .mp-section--wide h2 {
    grid-column: 1 / -1;
  }
}

/* ─── single-gara styles ──────────────────────────────────────────────────── */
.mp-single-gara {
  max-width: 800px;
  margin: 2rem auto;
  padding: 1rem;
  background: #f;
  border: 10x solid #ddd;
  border-radius: 4px;
  font-family: 'Onest', sans-serif;
  color: #1d1d1b;
}

.mp-single-gara h1 {
  font-family: 'Staatliches', cursive;
  color: #312783;
  font-size: 2rem;
  margin-bottom: 1rem;
}

.mp-single-gara p {
  margin-bottom: 0.75rem;
}

.mp-gara-desc {
  padding: 1rem;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.5;
}

.mp-single-gara article {
  background: #f7f8fa;
  border: 1px solid #ddd;
  border-radius: 20px;
  padding: 1rem;
}
/* ----------------------------------------------------------------------------
   Nascondi i bottoni di “AddToAny” (Email / WhatsApp / Facebook / LinkedIn ecc.)
   ---------------------------------------------------------------------------- */
.addtoany_share_save_container,
.addtoany_content,
.addtoany_content_bottom {
  display: none !important;
}
/* -----------------------------------------------------
   1) Contenitore del form: sfondo chiaro, padding e bordo
------------------------------------------------------ */
.mp-box.mp-box--light {
  background-color: #f5f7fa; /* un grigio molto leggero */
  padding: 1.5rem;
  border-radius: 20px;
  border: 1px solid #e0e0e0;
  max-width: 600px;
  margin: 0 auto; /* per centrare il blocco */
}

/* -----------------------------------------------------
   2) Ogni riga di “label + campo” (due colonne)
------------------------------------------------------ */
.mp-form-row {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

/* Label occupa sempre il 30%, campo il 70% */
.mp-form-row > label {
  flex: 0 0 30%;
  font-family: 'Staatliches', sans-serif; /* o quello che preferisci per i titoli */
  font-size: 1.1rem;
  color: #312783; /* blu scuro per coerenza col tuo schema colore */
}

/* Input, select o textarea occupano il 70% */
.mp-form-row > input[type="text"],
.mp-form-row > input[type="date"],
.mp-form-row > select,
.mp-form-row > textarea {
  flex: 1;
  font-family: 'Onest', sans-serif; /* il tuo font principale */
  font-size: 1rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid #ced4da;
  border-radius: 4px;
  background-color: #fff;
  color: #333;
  transition: border-color 0.2s;
}

/* Focus styling */
.mp-form-row > input:focus,
.mp-form-row > select:focus,
.mp-form-row > textarea:focus {
  outline: none;
  border-color: #0089f7; /* celeste accento */
}

/* Se vuoi che la textarea sia un po’ più alta */
.mp-form-row > textarea {
  min-height: 100px;
  resize: vertical;
}

/* Rende il dropdown “Regione/Team” con un minimo di larghezza */
.mp-form-row > select {
  min-width: 150px;
}

/* Il pulsante in fondo: lo facciamo occupare solo lo spazio necessario e centrato */
.mp-form-row.mp-form-row--full {
  justify-content: right;
}

.mp-form-row.mp-form-row--full > .button-primary {
  background-color: #0089f7; /* celeste */
  border-color: #0089f7;
  font-family: 'Onest', sans-serif;
  font-size: 1rem;
  padding: 0.65rem 1.25rem;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
}
/* ===================================================================
   1) Contenitore generale per entrambi i form (“box grigio-chiaro”)
   =================================================================== */

.mp-form-box {
  background-color: #;;    /* celeste chiarissimo */
  padding: 24px;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  margin-bottom: 30px;
}

/* =================================================================================
   2) Ogni “riga” di form: label a sinistra (larghezza fissa) + campo a destra (flex)
   ================================================================================= */

.mp-form-row {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.mp-form-row label {
  /* Carattere per le label (Staatliches, colore blu scuro) */
  font-family: 'Staatliches', sans-serif;
  font-size: 1.1rem;
  color: #312783; /* blu scuro */
  width: 150px;   /* larghezza fissa per le label */
  margin: 0;
}

.mp-form-row input[type="text"],
.mp-form-row input[type="date"],
.mp-form-row select,
.mp-form-row textarea {
  /* Stesso font Onest (o sans-serif), bordo arrotondato, background bianco */
  font-family: 'Onest', sans-serif;
  font-size: 1rem;
  color: #333;
  background-color: #fff;
  border: 1px solid #c0c4cc;
  border-radius: 6px;
  padding: 8px 12px;
  flex: 1;                 /* occuperà lo spazio rimanente */
  box-sizing: border-box;
}

.mp-form-row select.mp-form-select {
  /* Solo per i dropdown generati da wp_dropdown_categories */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='%23333' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
}

/* Testo multi-linea (textarea) */
.mp-form-row textarea {
  min-height: 100px;
  resize: vertical;
}

/* ===================================================================
   3) Pulsante stile “primary” (blu con testo bianco) per tutti i form
   =================================================================== */

.mp-button {
  font-family: 'Onest', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
  background-color: #0089f7; /* celeste “vivo” */
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.mp-button:hover,
.mp-button:focus {
  background-color: #006fcc; /* tonalità leggermente più scura di hover */
}

/* Fissa la larghezza minima del pulsante, per uniformità “Invia Richiesta” / “Filtra” */
.mp-button-primary {
  min-width: 130px;
}

/* ===================================================================
   4) Footer del form: allinea il pulsante alla destra del container
   =================================================================== */

.mp-form-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

/* ===================================================================
   5) Responsive: in schermi piccoli, label sopra il campo (stacked)
   =================================================================== */

@media (max-width: 600px) {
  .mp-form-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .mp-form-row label {
    width: 100%;
    margin-bottom: 6px;
  }
  .mp-form-footer {
    justify-content: center;
  }
}
/* Contenitore grigio per il form */
.mp-form-box {
  background: #f5f7fa;
  border-radius:20px;
  padding: 24px;
  margin-bottom: 32px;
}

/* Riga di form: label + campo */
.mp-form-row {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.mp-form-row label {
  flex: 0 0 180px;        /* larghezza fissa etichetta */
  font-family: 'Staatliches', sans-serif;
  font-size: 1.1rem;
  color: #312783;
}
.mp-form-field {
  flex: 1;
}

/* Stile generico per input/select */
.mp-form-input,
.mp-form-select {
  width: 100%;
  max-width: 300px;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: 'Onest', sans-serif;
  font-size: 1rem;
}

/* Allineamento pulsante */
.mp-form-footer {
  text-align: left;  /* se vuoi il pulsante a sinistra */
  margin-top: 24px;
}
.mp-button {
  background-color: #0089f7;
  color: #fff;
  border: none;
  padding: 10px 24px;
  border-radius: 4px;
  font-size: 1rem;
  font-family: 'Onest', sans-serif;
  cursor: pointer;
}
.mp-button:hover {
  background-color: #0075d9;
}

/* Titoli filtro / risultati */
.mp-filter-heading {
  margin-top: 32px;
  font-family: 'Staatliches', sans-serif;
  font-size: 1.25rem;
  color: #312783;
}
.mp-results-title {
  margin-top: 32px;
  font-family: 'Staatliches', sans-serif;
  font-size: 1.5rem;
  color: #312783;
}

/* Contenitore tabella risultati */
.mp-results-box {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  margin-top: 16px;
}

/* Tabella (stile base: lo stesso mp-gare-table che già usi) */
.mp-gare-table {
  width: 100%;
  border-collapse: collapse;
}
.mp-gare-table th,
.mp-gare-table td {
  padding: 12px;
  border: 1px solid #ddd;
  font-family: 'Onest', sans-serif;
  font-size: 0.95rem;
}
.mp-gare-table th {
  background-color: #e5edfc;
  color: #312783;
  text-align: left;
}

/* Messaggio “nessun risultato” */
.mp-no-results {
  margin-top: 24px;
  font-family: 'Onest', sans-serif;
  font-size: 1rem;
  color: #312783;
}
.mp-role-heading {
  margin-top: 2em;
  font-size: 1.5em;
  color: #312783; /* blu titolo */
}
.mp-subgroup-header h3 {
  margin: 1.5em 0 0.5em;
  font-size: 1.2em;
  color: #0089f7; /* celeste */
}
.mp-subgroup-divider {
  border: none;
  border-top: 1px solid #e5edfc; /* celeste pallido */
  margin: 1em 0;
}
/* ------------------------------------------------------------ */
/* 1) Contenitore del form di filtro (sfondo, padding, ecc.)    */
/* ------------------------------------------------------------ */
.mp-form-box {
  background-color: #ffffff;    /* sfondo chiaro */
  border: 1px solid #ddd;
  padding: 1.5rem;
  border-radius: 20px;
  margin-bottom: 2rem;
}

/* ------------------------------------------------------------ */
/* 2) Righe del form (label + campo)                           */
/* ------------------------------------------------------------ */
.mp-form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 1rem;
}

/* Etichette “normali” (tutte tranne la prima): Onest */
.mp-form-row > label {
  flex: 0 0 180px;              /* larghezza fissa per le label */
  font-family: 'Staatliches', sans-serif;
  font-size: 1.1rem;
  color: #312783;
}

/* Il primo label (quello di “Visualizza classifica:”): Staatliches */
.mp-form-row:first-child > label {
  font-family: 'Onest', sans-serif;
  font-size: 1.4rem;
  color: #312783;
  margin-right: 1rem;
}

.mp-form-field {
  flex: 1;
}
/* =======================================================
   1) BOX FORM VALUTAZIONE
   ======================================================= */
.mp-form-box {
  background-color: #f7f8fa;  /* celeste chiarissimo come sfondo */
  border: 1px solid #e0e0e0;  /* bordo grigio tenue */
  padding: 1.5rem;
  border-radius: 20px;
  margin-bottom: 2rem;
}

.mp-form-box-title {
  font-family: 'Staatliches', sans-serif;
  color: #312783; /* blu scuro */
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

/* =======================================================
   2) BOX CLASSIFICA GARA
   ======================================================= */
.mp-results-box {
  background-color: #ffffff;
  border: 1px solid #ddd;
  padding: 1.5rem;
  border-radius: 12px;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.mp-results-title {
  font-family: 'Staatliches', sans-serif;
  color: #312783;
  font-size: 1.5rem;
  margin-bottom: 0.4rem !important;
}

.mp-gare-table {
  width: 100%;
  border-collapse: collapse;
}

.mp-gare-table th,
.mp-gare-table td {
  border: 1px solid #ddd;
  padding: 0.75rem;
  font-family: 'Onest', sans-serif;
  font-size: 0.95rem;
}

.mp-gare-table th {
  background-color: #e5edfc; /* celeste pallido */
  color: #312783;            /* blu scuro */
  text-align: left;
}

.mp-gare-table tr:nth-child(even) {
  background-color: #f7f8fa;
}

.mp-role-heading {
  margin-top: 2rem;
  font-family: 'Staatliches', sans-serif;
  font-size: 1.4rem;
  margin-bottom: 0.4rem !important;
  color: #312783;
}

.mp-subgroup-header h3 {
  margin: 1rem 0 0.5rem;
  font-family: 'Staatliches', sans-serif;
  font-size: 1.2rem;
  margin-bottom: 0.4rem !important;
  color: #0089f7; /* celeste vivo */
}

.mp-subgroup-divider {
  border: none;
  border-top: 1px solid #e5edfc;
  margin: 1rem 0;
}