/* ======================================================
   STREAMHUB - GALAXY VIOLET STYLESHEET
   (Extrait exact du style de index.php)
   ====================================================== */

/* 1. FOND DE PAGE GLOBAL (Gradient Radial Galaxy) */
body {
  background-color: #020617; /* bg-slate-950 */
  color: #ffffff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-image: radial-gradient(ellipse at top, rgba(88, 28, 135, 0.3), rgba(2, 6, 23, 1), #000000);
  background-attachment: fixed;
}

/* 2. HEADER / NAVBAR */
header, .sh-navbar {
  width: 100%;
  background-color: rgba(2, 6, 23, 0.7);
  border-bottom: 1px solid rgba(88, 28, 135, 0.3);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 40;
  box-shadow: 0 10px 15px -3px rgba(58, 12, 89, 0.2);
}

/* Logo avec halo lumineux red-glow */
.sh-logo {
  font-size: 1.5rem;
  font-weight: 900;
  color: #ef4444;
  letter-spacing: 0.05em;
  filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.5));
}
.sh-logo span {
  color: #ffffff;
}

/* 3. CARTES DU CATALOGUE */
.catalog-card, .sh-card {
  cursor: pointer;
  background-color: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(88, 28, 135, 0.2);
  border-radius: 1rem;
  overflow: hidden;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
}

.catalog-card:hover, .sh-card:hover {
  border-color: rgba(168, 85, 247, 0.4);
  box-shadow: 0 20px 25px -5px rgba(58, 12, 89, 0.5);
  transform: translateY(-0.375rem);
}

/* Image dans les cartes */
.catalog-card img {
  transition: transform 0.5s ease;
}

.catalog-card:hover img {
  transform: scale(1.05);
}

/* 4. MODALES (Paywall & Auth) */
.sh-modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(12px);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.sh-modal-container {
  background-color: #0f172a; /* slate-900 */
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: 1.5rem;
  padding: 1.5rem;
  position: relative;
  box-shadow: 0 25px 50px -12px rgba(58, 12, 89, 0.5);
  width: 100%;
}

@media (min-width: 768px) {
  .sh-modal-container {
    padding: 2rem;
  }
}

/* 5. FORMULAIRES & INPUTS */
.sh-input, 
input[type="text"], 
input[type="email"], 
input[type="password"], 
select, 
textarea {
  width: 100%;
  background-color: #020617 !important;
  border: 1px solid rgba(88, 28, 135, 0.4) !important;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: #ffffff !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sh-input:focus, 
input[type="text"]:focus, 
input[type="email"]:focus, 
input[type="password"]:focus, 
select:focus, 
textarea:focus {
  outline: none;
  border-color: #a855f7 !important;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.3);
}

/* 6. BOUTONS STYLISÉS */
.btn-purple {
  background-color: #9333ea;
  color: #ffffff;
  font-weight: 700;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 10px 15px -3px rgba(147, 51, 234, 0.3);
}

.btn-purple:hover {
  background-color: #7e22ce;
}

.btn-hero {
  background: linear-gradient(to right, #dc2626, #9333ea);
  color: #ffffff;
  font-weight: 700;
  padding: 0.875rem 2rem;
  border-radius: 9999px;
  transition: all 0.3s ease;
  box-shadow: 0 10px 15px -3px rgba(88, 28, 135, 0.4);
}

.btn-hero:hover {
  background: linear-gradient(to right, #ef4444, #a855f7);
  box-shadow: 0 10px 25px -5px rgba(168, 85, 247, 0.4);
  transform: scale(1.05);
}

/* 7. FOOTER */
footer {
  border-top: 1px solid rgba(88, 28, 135, 0.2);
  background-color: rgba(2, 6, 23, 0.8);
  backdrop-filter: blur(12px);
}





/* ======================================================
   MENU DÉROULANT AVATAR (Extrait de index.php)
   ====================================================== */

/* Conteneur principal du menu */
.sh-avatar-menu,
#avatarMenu {
  background-color: rgba(15, 23, 42, 0.95) !important; /* bg-slate-900/95 */
  backdrop-filter: blur(12px) !important;              /* backdrop-blur-md */
  border: 1px solid rgba(168, 85, 247, 0.2) !important;  /* border-purple-500/20 */
  border-radius: 1rem !important;                      /* rounded-2xl */
  box-shadow: 0 25px 50px -12px rgba(58, 12, 89, 0.5) !important; /* shadow-purple-950/50 */
}

/* Header d'informations utilisateur dans le menu */
.sh-avatar-header {
  padding: 0.625rem 1rem !important;                   /* px-4 py-2.5 */
  border-bottom: 1px solid #1e293b !important;         /* border-slate-800 */
}

/* Texte du plan d'abonnement (Free / Premium) */
.sh-plan-badge {
  color: #c084fc !important;                           /* text-purple-400 */
  font-weight: 700 !important;                          /* font-bold */
  text-transform: uppercase !important;                /* uppercase */
}

/* Liens & boutons à l'intérieur du menu */
.sh-avatar-menu a,
.sh-avatar-menu button,
#avatarMenu a,
#avatarMenu button {
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Survol des liens dans le menu */
.sh-avatar-menu a:hover,
.sh-avatar-menu button:hover,
#avatarMenu a:hover,
#avatarMenu button:hover {
  background-color: rgba(88, 28, 135, 0.2) !important; /* hover:bg-purple-900/20 */
}