/*──────────────────────────────────────────────────────────────────────────────
  PALETTE & VALORI DI BASE
  ---------------------------------------------------------------------------
  Cambia i colori di brand o le dimensioni globali modificando le variabili
  qui sotto: ogni componente eredit- erà automaticamente i nuovi valori.
──────────────────────────────────────────────────────────────────────────────*/
:root {
  /* colori brand */
  --pri:       #00bcd4;   /* cyan principale  */
  --pri-dark:  #0097a7;   /* variante più scura: hover / nav */
  --bg:        #f0f8f9;   /* sfondo pagine    */
  --fg:        #333;      /* testo principale */

  /* layout / spacing */
  --rad:       10px;      /* raggio arrotondamento generale         */
  --shadow:    0 4px 12px rgba(0,0,0,.10);
  --maxw:      900px;     /* larghezza massima del <main>            */
  --gap:       20px;      /* spaziatura orizzontale fra campi/colonne*/

  /* tipografia di servizio */
  --fs-small:  .85rem;
}

*{box-sizing:border-box;margin:0;padding:0}

html,body{
  font-family: Arial, Helvetica, sans-serif;
  background: var(--bg);
  color:      var(--fg);
  min-height: 100vh;
  display:    flex;
  flex-direction: column;
}

/*──────────────────────────────────────────────────────────────────────────────
  LAYOUT PRINCIPALE (header, nav, main, footer)
──────────────────────────────────────────────────────────────────────────────*/
header{
  background: var(--pri);
  color:#fff;
  text-align:center;
  padding:24px 16px;
}
header h1{margin:0;font-size:28px}
header p {margin-top:6px;font-size:14px}

nav{
  background: var(--pri-dark);
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--gap);
  padding:12px 16px;
}
nav a{
  color:#fff;
  font-weight:bold;
  position:relative;
  padding:4px 0;
  text-decoration:none;
}
nav a:hover::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-2px;
  height:2px; background:#fff; border-radius:1px;
}

main{
  flex:1 0 auto;
  width:100%;
  max-width:var(--maxw);
  margin:32px auto;
  padding:0 16px;
}

footer{
  text-align:center;
  font-size:var(--fs-small);
  color:#666;
  margin:40px auto 24px;
}

/*──────────────────────────────────────────────────────────────────────────────
  COMPONENTI GENERICI RIUTILIZZABILI
──────────────────────────────────────────────────────────────────────────────*/

/* contenitore card */
.box{
  background:#fff;
  padding:1.6rem;
  border-radius:var(--rad);
  box-shadow:var(--shadow);
}
.box--shadow{ box-shadow:var(--shadow); }    /* alias esplicito */

/* titoli ricorrenti */
.page-title{ color:var(--pri); margin-top:0; }

/* liste “pallino turchese” */
.list{ padding-left:20px; margin:0 0 1rem; }
.list--dot li{ margin-bottom:8px; line-height:1.5; list-style:disc; }

/* bottoni & link brand */
.btn,
button{
  background:var(--pri);
  color:#fff;
  border:none;
  border-radius:var(--rad);
  padding:.7rem 1.2rem;
  font-weight:bold;
  cursor:pointer;
  text-decoration:none;
  display:inline-block;
}
.btn:hover,
button:hover{ background:var(--pri-dark); }

.btn--primary{ background:var(--pri); }
.btn--danger { background:#ff5252; }
.btn--primary:hover{ background:var(--pri-dark); }
.btn--danger:hover { background:#e04848; }

.link{
  color:var(--pri);
  text-decoration:none;
}
.link:hover{ text-decoration:underline; }

/* utilità misc. */
.hidden{ display:none !important; }
.error { color:#c00; font-size:.9rem; }

/*──────────────────────────────────────────────────────────────────────────────
  FORM
──────────────────────────────────────────────────────────────────────────────*/
form{ display:flex; flex-direction:column; gap:1rem; }
fieldset{ border:none; padding:0; display:flex; flex-direction:column; gap:.5rem; }
input,select,textarea{
  width:100%;
  padding:.8rem 1rem;
  border:1px solid #bbb;
  border-radius:var(--rad);
  font-size:1rem;
}

/* layout 2-colonne su viewport medio+  → aggiungi class="two-col" sul <form> */
@media (min-width:600px){
  form.two-col{
    flex-direction:row;
    flex-wrap:wrap;
    gap:var(--gap);
  }
  form.two-col fieldset{
    flex:1 1 calc(50% - var(--gap));
  }
}

/*──────────────────────────────────────────────────────────────────────────────
  TABELLE
──────────────────────────────────────────────────────────────────────────────*/
table{ width:100%; border-collapse:collapse; margin-top:1rem; }
th,td{ padding:.6rem .4rem; text-align:left; }
thead tr{ background:#e0f7fa; }
.dog__table th{ color:#000; }
tbody tr:not(:last-child){ border-bottom:1px solid #ddd; }

/*──────────────────────────────────────────────────────────────────────────────
  WIDGET “ALLERGIES DROPDOWN”
──────────────────────────────────────────────────────────────────────────────*/

/*──────────────────────────────────────────────────────────────────────────────
  CALCOLATORE PREMIUM – Intolleranze: righe allineate e divisori
──────────────────────────────────────────────────────────────────────────────*/

/* Contenitore verticale delle opzioni */
.dropdown__menu {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Ogni voce (label) diventa un blocco con padding extra a destra,
   così da lasciare spazio all’input posizionato assolutamente */
.dropdown__menu label {
  display: block;                     /* BLOCCO, non flex */
  position: relative;                 /* per figlio absolute */
  padding: .5rem 2rem .5rem 1rem;     /* spazio interno: [top/bottom] .5rem [left]1rem [right]2rem */
  border-bottom: 1px solid #ddd;      /* linea divisoria */
  cursor: pointer;
  user-select: none;
  color: var(--fg);
}

/* Rimuove la linea dall’ultima voce */
.dropdown__menu label:last-child {
  border-bottom: none;
}

/* Posiziona la checkbox sempre esattamente a destra */
.dropdown__menu label input[type="checkbox"] {
  position: absolute;
  right: 10rem;         /* distanza dal bordo destro del label */
  top: 50%;            /* centrata verticalmente */
  transform: translateY(-50%);
  margin: 0;           /* reset margini di default */
  /* eventuale riduzione dimensione */
  width: 1rem;
  height: 1rem;
}

/*──────────────────────────────────────────────────────────────────────────────
  OVERRIDE SOLO PER LA PAGINA PROFILO (mobile)
──────────────────────────────────────────────────────────────────────────────*/
@media (max-width:599px){
  /* eliminiamo il padding orizzontale e il max-width su main SOLO in profilo */
  .is-profilo main.site-main {
    padding: 0;
    max-width: none;
    margin: 0;
  }

  /* allarghiamo il box bianco (contenitore .box) SOLO in profilo */
  .is-profilo .box {
    width: 100%;
    margin: 0;
    padding: 1.6rem; /* mantieni il padding interno */
  }

  /* e se vuoi che i singoli card “.dog” siano a piena larghezza */
  .is-profilo .dog {
    width: 100%;
    margin: 0 0 24px 0;
    padding: 1.6rem;
    border-radius: var(--rad);
    box-shadow: var(--shadow);
  }
}

/*──────────────────────────────────────────────────────────────────────────────
  DASHBOARD – layout bottoni e spaziature
──────────────────────────────────────────────────────────────────────────────*/
.dashboard__actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;           /* distanza verticale fra i bottoni */
}

.mb-md { margin-bottom: 1.2rem; }  /* utility margin-bottom */
.mt-sm { margin-top:    0.8rem; }  /* utility margin-top    */

/* full-width button su mobile */
.btn-block {
  display: block;
  width: 100%;
}


/*──────────────────────────────────────────────────────────────────────────────
  DARK-MODE (facoltativo)
──────────────────────────────────────────────────────────────────────────────*/
/*@media (prefers-color-scheme: dark){
  :root{
    --bg:#121212;
    --fg:#eee;
    --shadow:0 4px 12px rgba(0,0,0,.6);
  }
  header,nav{ background:#005e6b; }
  .box{ background:#1f1f1f; }
}

/* Disattiva background scuro solo per la landing */
.upgrade-page { --bg:#f0f8f9; }*/


/*───────────────────────────────────────────────────────────────
  PROFILO – sezioni cane
───────────────────────────────────────────────────────────────*/
.dog {
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid #ddd;
}
.dog:last-of-type {
  border-bottom: none;
}

/* header cane: nome | aggiorna | elimina */
.dog__head {
  /* allarga il background cyan oltre il padding del box */
  position: relative;
  left: -1.6rem;                           /* pari al padding del .box */
  width: calc(100% + 3.2rem);              /* 2×padding esteso */
  
  display: flex;
  align-items: center;
  justify-content: space-between;          /* nome a sinistra, pulsanti a destra */
  gap: 12px;
  flex-wrap: nowrap;                       /* non far andare a capo i bottoni */
  margin-bottom: 6px;

  /* styling del riquadro cyano */
  background: var(--pri);
  border-radius: var(--rad) var(--rad) 0 0; /* arrotonda solo in alto */
  padding: 0.5rem 1rem;                    /* spazio interno */
  color: #fff;                             /* testo bianco */
}

/* mobili: riduci l’estensione se il padding è più piccolo */
@media (max-width: 599px) {
  .dog__head {
    left: -1rem;                           /* se il padding mobile è 1rem */
    width: calc(100% + 2rem);
    overflow-x: auto;                      /* scroll orizzontale se serve */
  }
}

.btn--small {
  padding: .45rem .9rem;
  font-size: .9rem;
}

.dog__meta {
  margin: 0 0 12px;
  font-size: .95rem;
}

.dog__table th,
.dog__table td {
  font-size: .85rem;
}

.download-link {
  color: var(--pri-dark);
  font-weight: bold;
  font-size: 1.05rem; /* più grande della freccia default */
  text-decoration: none;
}
.download-link:hover {
  text-decoration: underline;
}

/* divisore grande (usato prima / dopo “I tuoi cani”) */
.divider-lg {
  margin: 28px 0;
  border: 0;
  height: 1px;
  background: #ddd;
}

/*───────────────────────────────────────────────────────────────
  ESTENDI BOX E CARD AL 100vw SOLO IN PROFILO
───────────────────────────────────────────────────────────────*/
.is-profilo .site-main {
  padding-left: 0;
  padding-right: 0;
}
.is-profilo .box,
.is-profilo .dog {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  padding: 1.6rem;
  box-shadow: var(--shadow);
  border-radius: var(--rad);
  overflow-x: auto;
}
/* facoltativo: rimuovi il bordo inferiore sulle .dog */
.is-profilo .dog {
  border-bottom: none;
}

/*───────────────────────────────────────────────────────────────
  STILI PER il nome e il pulsante “Aggiorna dieta”
───────────────────────────────────────────────────────────────*/
/* riquadro grigio bordato attorno al nome */
.dog__name {
  flex: 1 1 auto;         /* occupa tutto lo spazio disponibile */
  margin: 0;              /* reset margin h3 */
  border: 1px solid #666; /* bordo grigio scuro */
  padding: .5rem 1rem;
  border-radius: var(--rad);
  background: transparent;
  font-weight: bold;
}

/* bottone “Aggiorna dieta” in verde */
.btn--update {
  flex: 0 0 auto;         /* non si espande */
  background: #4caf50;    /* Material Green 500 */
}
.btn--update:hover {
  background: #388e3c;    /* Material Green 700 */
}

/* su mobile, se proprio non entra, abilita scroll orizzontale */
@media (max-width: 599px) {
  .dog__head {
    overflow-x: auto;
  }
}

/*───────────────────────────────────────────────────────────────
  STILI PER Video tutorial calcolatore premium
───────────────────────────────────────────────────────────────*/