/* Customize*/       
.container {
  max-width: 992px;
  font-size: 16px;
  font-family: 'Roboto', sans-serif;
  color: #343a40;
}
.test-link { color: #343a40; font-weight: 600; }
.test-link:hover { color: #54C2FD; }

#my_centered_buttons { display: flex; justify-content: center; }

/* Navbar */
.navbar-custom {
  background-color: #0059ab;
  color: #fff;
  box-shadow: 0 6px 6px rgba(0, 0, 0, 0.2);
}
.navbar-custom { color: #fff; font-size: 24px; font-weight: 400; }
.navbar-custom .nav-link { color: rgba(255, 255, 255, 255); margin-right: 15px; margin-left: 15px; }
.navbar-custom .nav-link:hover { color: #54C2FD; }
.navbar-custom .dropdown-menu {
  background-color: var(--secondary-color);
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.navbar-custom .dropdown-menu a { color: rgba(255, 255, 255, 0.8); font-weight: bold; }
.navbar-custom .dropdown-menu a:hover { color: #fff; background-color: rgba(255, 255, 255, 0.1); }

/* Buttons */
.btn-primary-custom { background-color: var(--primary-color); border-color: var(--primary-color); font-weight: bold; }
.btn-primary-custom:hover { background-color: #0069d9; border-color: #0062cc; }
.btn-secondary-custom { background-color: var(--secondary-color); border-color: var(--secondary-color); font-weight: bold; }
.btn-secondary-custom:hover { background-color: #5a6268; border-color: #545b62; }

/* Forms */
.form-control { border: 2px solid var(--secondary-color); }
.form-control:focus { border-color: var(--primary-color); box-shadow: none; }
.btn-custom { background-color: var(--primary-color); border-color: var(--primary-color); font-weight: bold; }
.btn-custom:hover { background-color: #0069d9; border-color: #0062cc; }

.logo { margin-right: 12px; height: 40px; width: 40px; color: white; }
.span-logo { color: white; }
.logo-h { font-size: x-large; }
.navbar-toggler-icon { background-image: url("https://www.test-psicologici.it/images/menu.png"); }
.navbar-toggler { border-color: rgba(255, 255, 255, 1); margin-left: auto; }

header { background-color: #0059ab; color: white; }
.navbar-brand { color: #fff; font-size: 18px; font-weight: 400; }
.nav-link { color: white; }

footer {
  position: fixed; bottom: 0; width: 100%;
  background-color: #0059ab; color: #fff; padding: 12px ;
}
.footer-link { color: #fff; text-decoration: none; }
.footer-link:hover { color: #fff; }
.footer-text { color: #fff; margin-bottom: 20px; }
.content-sp { margin-bottom: 120px; }

.footer-color { color: #FFFFFF; }
.auto-style5 { font-size: x-large; }
.container1 { max-width: 620px; }

/* Card */
.card {
  border: none;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  padding: 20px;
}

/* Titoli */
.div-h1, .div-h2, .div-h3 {
  font-family: 'Roboto', sans-serif;
  color: #343a40;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: inline-block;
  padding-bottom: 5px;
}
.div-h1 { font-size: 30px; margin-bottom: 20px; }
.div-h2 { font-size: 24px; margin-bottom: 10px; }
.div-h3 { font-size: 20px; margin-bottom: 8px; }
.div-p { font-family: 'Roboto', sans-serif; color: #343a40; }

.card-body h2 {
  font-family: 'Roboto', sans-serif;
  font-size: 24px;
  color: #343a40;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 20px;
  border-bottom: 2px solid #007bff;
  display: inline-block;
  padding-bottom: 5px;
}

/* Elenchi */
.list-unstyled { padding-left: 0; }
.list-unstyled li {
  position: relative;
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  margin: 10px 0;
  padding: 10px 15px;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  transition: transform 0.2s, background 0.3s;
  display: flex;
  align-items: flex-start; /* per testo sotto */
  gap: 6px;
  cursor: pointer;
}
.accordion { overflow-anchor: none; }

/* Hover */
.list-unstyled li:hover {
  background: rgba(0, 123, 255, 0.1);
  color: #007bff;
  transform: translateY(-3px);
}

/* Link nel li */
.list-unstyled li a {
  color: #007bff;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  transition: color 0.3s;
}
.list-unstyled li a:hover { color: #0056b3; }

/* Margini tra card */
.card + .card { margin-top: 20px; }

/* Accordion */
.accordion-button { background-color: #f3faff; }
.accordion-header { scroll-margin-top: 92px; }

/* Helpers */
#accordionTest .accordion-body ul a.test-link { display:inline-block; font-weight:600; }
#accordionTest .accordion-body ul .small { margin-top:.25rem; color:#6c757d; }
nav ul.list-inline a { text-decoration:none; }
nav ul.list-inline a:hover { text-decoration:underline; }

/* ================================
   PATCH / MIGLIORIE RICHIESTE
   ================================ */

/* Variabili colore di fallback */
:root{
  --primary-color:#0059ab;
  --secondary-color:#54C2FD;
}
.test-question.highlight-unanswered {
  border: 3px solid #dc3545 !important;
  box-shadow: 0 0 0 .25rem rgba(220,53,69,.25);
}
.result-overlay{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.45); z-index:9999; padding:20px;
}
.result-overlay.d-none{ display:none !important; }
.result-card{ max-height:85vh; overflow:auto; }

/* 1) Casella di ricerca: bordo ben visibile + arrotondamento */
#testSearch.form-control{
  border: 2px solid var(--secondary-color) !important;
  border-radius: 12px; /* metti 999px per pill */
  background: #fff;
}
#testSearch.form-control:focus{
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 .15rem rgba(0,89,171,.15);
}

/* 2) Indice rapido a pillole: mobile-friendly + hover tenue */
#tp-index .list-inline{
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-wrap: nowrap;
  gap: .5rem;
  padding-bottom: .25rem;
}
#tp-index .list-inline-item{ display: inline-block; }
#tp-index .cat-pill{
  display:inline-block;
  padding:6px 14px;
  border-radius:20px;
  font-weight:600;
  text-decoration:none;
  border:1px solid #e9ecef;
  background:#fff;
  color:#0059ab;
  transition:background .3s, color .3s, transform .2s;
  white-space:nowrap;
}
#tp-index .cat-pill:hover{
  background: rgba(0,89,171,.1);
  color:#0059ab;
  transform: translateY(-2px);
}

/* 3) Micro-descrizioni SEMPRE SOTTO (mobile e desktop) */
#accordionTest .accordion-body .list-unstyled li{
  flex-direction: column;
}
#accordionTest .accordion-body .list-unstyled li .small{
  margin: .2rem 0 0 0;
  line-height: 1.35;
}

/* 4) Evidenziazione match ricerca */
mark { background: rgba(84,194,253,.25); padding: 0 .15em; }

/* Evidenziazione della sezione raggiunta via ancora (hash) */
#accordionTest .accordion-header:target .accordion-button {
  background-color: #e9f4ff;       /* blu chiaro */
  color: #0059ab;
  box-shadow: inset 0 0 0 2px #b6dcff;
  animation: tpTargetFlash 2.2s ease-out 1;
}

/* Se la sezione è aperta, sfondo tenue anche sul body */
#accordionTest .accordion-header:target + .accordion-collapse .accordion-body {
  background: linear-gradient(180deg, #f7fbff 0%, #ffffff 60%);
}

/* Animazione morbida che svanisce */
@keyframes tpTargetFlash {
  0%   { background-color:#cfe9ff; }
  100% { background-color:#e9f4ff; }
}

/* Migliora lo scroll verso le ancore */
html { scroll-behavior: smooth; }

/* Se usi una navbar fixed, evita che l’ancora resti coperta */
#accordionTest .accordion-header { scroll-margin-top: 92px; } /* regola in base alla tua navbar */

/* --- Fix navbar/footer overlap and test UI helpers (minimal) --- */
.test-question{ scroll-margin-top: calc(var(--nav-h) + 24px); }
/* Index a scorrimento orizzontale su mobile */
@media (max-width: 767.98px){
  #tp-index .list-inline{
    display: flex;
    flex-wrap: nowrap;       /* niente a capo */
    gap: .5rem;
    overflow-x: auto;        /* scroll orizzontale */
    -webkit-overflow-scrolling: touch; /* swipe fluido iOS */
    scroll-snap-type: x proximity;     /* scorrimento “a scatti” morbido */
    padding-bottom: .25rem;
  }
  #tp-index .list-inline::-webkit-scrollbar{ height: 0; } /* nasconde la scrollbar su mobile */
  #tp-index .list-inline-item{ flex: 0 0 auto; scroll-snap-align: start; }
  #tp-index .cat-pill{
    padding: 6px 12px;       /* pillole un po’ più compatte su mobile */
    font-size: .95rem;
  }
}
:root { --fade-bg: #fff; } /* cambia se il fondo non è bianco */

#tp-index { position: relative; }

#tp-index .list-inline {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: .5rem;
  padding-bottom: .25rem;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 767.98px){
  #tp-index::after {
    content:"";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 48px; /* regola la larghezza del fade */
    pointer-events: none;
    background: linear-gradient(270deg, var(--fade-bg) 65%, rgba(255,255,255,0) 100%);
    z-index: 2;
  }
  /* nasconde eventuale scrollbar */
  #tp-index .list-inline::-webkit-scrollbar { height: 0; }
}