html, body {
  height: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
  background: url('../assets/bg_index_page.jpg') center center / cover no-repeat;
  background-color: #000;
  color: white;
}


	  header img {
  height: 90px;      /* aumenta pure a 70-80 se lo vuoi ancora più grosso */
  width: auto;       /* mantiene le proporzioni del logo */
  margin-right: 12px;/* spazio tra logo e scritta */
  flex-shrink: 0;    /* evita che si restringa nel flex */
}

header {
  display: flex;
  align-items: center;
  padding: 8px 40px;
  background-color: #15122e;
  border-bottom: 1px solid #333;
}

/* tieni la scritta più “umana” rispetto al logo */
.logo {
  font-weight: bold;
  font-size: 22px;   /* invece di 90px, che è un cartellone pubblicitario 😅 */
  color: #00ffd5;
}
/* Header container */
.site-header {
  display: flex;
  align-items: center;
  padding: 8px 40px;
  background-color: #15122e;
  border-bottom: 1px solid #333;
}

/* Brand: logo + testo affiancati */
.site-header .brand {
  display: flex;
  align-items: center;
  gap: 12px;              /* spazio tra logo e titolo */
}

/* QUI gestiamo la dimensione DEL LOGO */
.site-header .brand img {
  height: 90px !important;  /* cambia a 80/90 se lo vuoi ancora più grande */
  width: auto !important;   /* mantiene le proporzioni */
  flex-shrink: 0;
}

/* Titolo Chat Mania */
.site-header .brand h1 {
  margin: 0;
  font-size: 22px;        /* ridimensiona se vuoi */
  font-weight: 700;
  color: #ffffff;
}


    .auth-buttons button {
      margin-left: 10px;
      padding: 6px 12px;
      background-color: #00ffd5;
      border: none;
      border-radius: 4px;
      color: #000;
      font-weight: bold;
      cursor: pointer;
    }
    main {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 60px;
    }
    /* Popup styles moved to index.php inline block for dynamic admin background/color support */
    .popup-overlay { display:none; }
    #welcome {
      margin-right: 20px;
      font-weight: bold;
      color: #00ffd5;
    }
	   .room-list {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
		box-sizing: border-box;   
      max-width: 100%;
      margin: 0 auto;
		padding: 0 10px;   
    }
    form {
      width: 98%;
    }
    .room-button {
		background: url('../assets/bg_room_list.jpg') center center/auto no-repeat;
		box-shadow: -1px 0px 18px 3px #d027d3;
      width: 100%;
      padding: 15px;
		margin: 10px;
      border: 1px solid #00ffd5;
      border-radius: 25px;
      font-size: 1.1em;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;     
      color: #00ffd5;
      transition: 0.2s;
    }
    .room-button:hover {
      background: #6c1fb5;
    }
    .room-button[disabled] {
      opacity: 0.4;
      cursor: not-allowed;
    }

.room-entry {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.room-icon {
  font-size: 18px;
}

.user-count {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 17px;
  font-weight: bold;
  color: #ffffff;
}

.user-count img {
  width: 22px;
  height: 22px;
}

.room-button[disabled] {
  background-color: #444;
  color: #ccc;
  cursor: not-allowed;
  opacity: 0.6;
}

.room-button .guest-blocked,
.room-button .login-required {
  color: #ff6666;
  font-size: 14px;
  margin-top: 6px;
  display: block;
}

.room-button .login-required {
  color: #ff7a9f;
  font-weight: 700;
}
.room-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.room-image {
  width: 70px;          /* dimensione fissa */
  height: 70px;
  object-fit: cover;
  border-radius: 10px;
	border: 1px solid #00ffd5;
  flex-shrink: 0;
}

.room-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.room-title {
  font-weight: bold;
  color: white;
  font-size: 1rem;
}

.room-description {
  font-style: italic;
  color: #ccc;
  font-size: 0.95rem;
}
.form-group label {
  display: inline-flex;
  align-items: center;
  margin-right: 15px;
  font-size: 14px;
  color: #fff; /* testo bianco leggibile sullo sfondo */
  cursor: pointer;
}

.form-group input[type="radio"] {
  margin-right: 6px; /* spazio tra il pallino e la scritta */
  transform: scale(1.1); /* ingrandisce un po’ i radio */
  accent-color: #00ffff; /* colore ciano dei radio (compatibile Chrome/Edge/Opera) */
}
.gender-option {
  display: inline-flex;
  align-items: center;
  margin-right: 18px;
  font-size: 19px;
  color: #fff;
  cursor: pointer;
}

.gender-option input[type="radio"] {
  margin-right: 6px;
  transform: scale(1.2);
  accent-color: #00ffff; /* colore tema per il pallino */
}

.gender-option:hover {
  opacity: 0.85;
}
.site-header{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.site-header .brand{ display:flex; align-items:center; gap:10px; }
.site-header .brand img{ height:42px; width:auto; }
.header-actions{ display:flex; align-items:center; gap:10px; }

.btn{
  padding:8px 12px; border-radius:8px; border:1px solid #7d3fc7;
  background:#2b1f34; color:#fff; cursor:pointer; font-weight:600;
}
.btn-logout{
  padding:8px 12px; border-radius:8px; border:1px solid #ff2e52;
  background:#ff4d6d; color:#fff; text-decoration:none; font-weight:700;
}
.link-privacy{
  margin-left:6px; color:#9b5cf9; text-decoration:none; font-weight:600;
}
.link-privacy:hover{ text-decoration:underline; }
/* === MODAL PRIVACY === */
.modal-overlay{
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  display: none; align-items: center; justify-content: center;
  z-index: 10000; backdrop-filter: blur(2px);
}
.modal-overlay.show{ display: flex; }

.modal-dialog{
  width: min(900px, 92vw); height: min(80vh, 780px);
  background: #1b1423; color:#fff; border:1px solid #7d3fc7;
  border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.55);
  display: flex; flex-direction: column; overflow: hidden;
  animation: modalPop .18s ease-out;
}
@keyframes modalPop{
  from{ transform: translateY(6px) scale(.98); opacity:0; }
  to  { transform: translateY(0)   scale(1);    opacity:1; }
}

.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;
  align-items:center;justify-content:center;z-index:100000;backdrop-filter:blur(2px)}
.modal-overlay.show{display:flex}
.modal-dialog{width:min(900px,92vw);height:min(80vh,780px);background:#1b1423;color:#fff;
  border:1px solid #7d3fc7;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.55);
  display:flex;flex-direction:column;overflow:hidden}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;
  background:rgba(124,58,237,.12);border-bottom:1px solid rgba(124,58,237,.35)}
.modal-close{cursor:pointer;background:#2b1f34;border:1px solid #7d3fc7;color:#fff;border-radius:8px;
  padding:4px 8px}
.modal-body{flex:1;min-height:400px}
.doc-content{height:100%;overflow:auto;padding:14px;background:#0b0511;border-radius:8px}


/* mantiene lo stile del link privacy esistente */
.link-privacy{
  margin-left:6px; color:#9b5cf9; text-decoration:none; font-weight:600;
  background:transparent; border:none; cursor:pointer;
}
.link-privacy:hover{ text-decoration:underline; }

.room-title{
  display:flex;
  align-items:center;
  gap:8px;              /* spazio tra nome e badge */
  padding-left:0;       /* evita rientri indesiderati */
}

.room-name{
  font-weight:700;
  line-height:1.2;
}

.badge-18{
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:12px;
  font-weight:800;
  font-size:22px;       /* compatto: non spinge il titolo */
  line-height:1;
  background:#3a0d2b;
  border:1px solid #ff4d6d;
  color:#ffb3c1;
  white-space:nowrap;
}

.btn-store-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  transition:transform .18s ease, filter .18s ease;
}
.btn-store-badge:hover{
  transform:translateY(-2px);
  filter:saturate(1.05);
}
.btn-store-badge img{
  display:block;
  width:auto;
  height:42px;
  border-radius:10px;
  box-shadow:0 12px 24px rgba(0,0,0,.24);
}
.header-actions{
  flex-wrap:wrap;
  justify-content:flex-end;
}
@media (max-width: 900px){
  .site-header{
    flex-wrap:wrap;
    justify-content:center;
  }
  .header-actions{
    width:100%;
    justify-content:center;
  }
}
@media (max-width: 560px){
  .btn-store-badge img{
    height:38px;
  }
}