.d-none {
  display: none !important;
}
body{font-family:Arial,system-ui;background:#0a0718;color:white;margin:0;padding:0;}
.background-gradient{position:fixed;inset:0;background:linear-gradient(120deg,#241b5b,#0a0718);z-index:-2;}
.background-stars{position:fixed;inset:0;background:radial-gradient(circle,#fff2 1px,#0000 2px);background-size:4px 4px;animation:twinkle 8s infinite alternate;z-index:-1;}
@keyframes twinkle{from{opacity:.3;}to{opacity:.6;}}
.z-nav{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;background:#120f2a;}
.z-logo{color:white;text-decoration:none;font-weight:bold;}
.lang-menu select{background:#241b5b;color:white;border:none;padding:6px;border-radius:6px;}
.z-hero{padding:4rem 1rem;text-align:center;}
.z-section{padding:2rem 1.5rem;}
.z-btn{background:#dba9ff;color:#120f2a;padding:12px 22px;border-radius:8px;text-decoration:none;display:inline-block;margin-top:1rem;font-weight:bold;border:none;cursor:pointer;}
.z-footer{padding:1rem;text-align:center;background:#120f2a;margin-top:2rem;}
.z-form label{display:block;margin-top:1rem;}
.z-form input, .z-form select{width:100%;padding:8px;margin-top:4px;border-radius:6px;border:1px solid #665;background:#160f2b;color:white;}
.z-ok{background:#1e7a1e;padding:1rem;margin-top:1rem;}
.z-error{background:#7a1e1e;padding:1rem;margin-top:1rem;}
.z-autocomplete-input{width:100%;padding:8px;margin-top:4px;border-radius:6px;border:1px solid #665;background:#160f2b;color:white;}
.z-autocomplete-list{list-style:none;margin-top:4px;padding:0;background:#1c1535;border:1px solid #665;border-radius:6px;max-height:180px;overflow-y:auto;position:absolute;width:100%;z-index:100;display:none;}
.z-autocomplete-list li{padding:8px 12px;cursor:pointer;}
.z-autocomplete-list li:hover{background:#32255f;}

.z-form {
  position: relative;
  z-index: 1;
}
#autocompleteList {
  z-index: 200;
}
/* 🔥 SOLUCIÓ OBLIGATÒRIA */
.z-form {
  position: relative;
}

/* 🔥 La llista ha d'estar per sobre de tot */
.z-autocomplete-list {
  z-index: 9999 !important;
  background-color: #1c1535;
}
/* =========================
   Bootstrap x Zodiastral patch
   (posa-ho al FINAL del styles.css)
   ========================= */

/* Mantén el teu tema (colors) encara que Bootstrap posi fons clars */
:root{
  --z-bg: #0a0718;
  --z-card: rgba(18, 15, 42, .72);
  --z-border: rgba(255,255,255,.12);
  --z-text: #ffffff;
  --z-muted: rgba(255,255,255,.75);
  --z-accent: #dba9ff;
  --z-input: #160f2b;
}

/* Bootstrap usa "color-scheme" per inputs en alguns navegadors */
html, body { color-scheme: dark; }

body { background: var(--z-bg); color: var(--z-text); }

/* Contenidor “card” tipus glass */
.card{
  background: var(--z-card) !important;
  border: 1px solid var(--z-border) !important;
  color: var(--z-text) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px;
}
.card .card-body { padding: 24px; }

/* Headings i text */
.lead { color: var(--z-muted) !important; }
.opacity-75 { opacity: .85 !important; }

/* Labels */
.form-label{ color: var(--z-text) !important; }

/* Inputs/Selects (Bootstrap + els teus) */
.form-control,
.form-select,
.z-form input,
.z-form select{
  background: var(--z-input) !important;
  color: var(--z-text) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 10px !important;
}

/* Placeholder */
.form-control::placeholder{
  color: rgba(255,255,255,.55) !important;
}

/* Focus glow coherent amb accent */
.form-control:focus,
.form-select:focus{
  border-color: rgba(219,169,255,.8) !important;
  box-shadow: 0 0 0 .25rem rgba(219,169,255,.18) !important;
}

/* Botó principal coherent amb el teu .z-btn */
.btn-primary{
  background: var(--z-accent) !important;
  border-color: transparent !important;
  color: #120f2a !important;
  font-weight: 700;
  border-radius: 12px;
  padding: 12px 18px;
}
.btn-primary:hover{
  filter: brightness(1.03);
}
.btn-primary:disabled{
  opacity: .65;
}

/* Alerts Bootstrap amb look del teu tema */
.alert{
  border-radius: 12px;
  border: 1px solid var(--z-border);
}
.alert-success{
  background: rgba(30,122,30,.22) !important;
  color: var(--z-text) !important;
}
.alert-danger{
  background: rgba(122,30,30,.22) !important;
  color: var(--z-text) !important;
}

/* Autocomplete: integra amb list-group de Bootstrap */
.z-form{ position: relative; z-index: 1; }

.z-autocomplete-list{
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  margin-top: 6px;
  display: none;             /* ho controles des del JS */
  background: #1c1535;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  max-height: 220px;
  overflow-y: auto;
  z-index: 9999 !important;
}

.z-autocomplete-list li,
.z-autocomplete-list .list-group-item{
  background: transparent !important;
  color: var(--z-text) !important;
  border: 0 !important;
  padding: 10px 12px;
  cursor: pointer;
}
.z-autocomplete-list li:hover,
.z-autocomplete-list .list-group-item:hover{
  background: rgba(219,169,255,.12) !important;
}

/* Resultat HTML: tipografia i espais */
#result h1{ font-size: 1.6rem; margin: 0 0 .75rem 0; }
#result h2{ font-size: 1.2rem; margin: 1.25rem 0 .5rem 0; }
#result p{ margin: 0 0 .75rem 0; color: var(--z-muted); line-height: 1.65; }
#result ul{ margin: .25rem 0 .75rem 1.25rem; }
#result li{ margin: .25rem 0; color: var(--z-muted); }
#result hr{ border-color: var(--z-border); opacity: 1; }