/* WeWatch theme (matches logo: dark navy + light blue) */
:root{
  --ww-bg: #070f1e;
  --ww-card: rgba(255,255,255,.06);
  --ww-card2: rgba(255,255,255,.09);
  --ww-border: rgba(255,255,255,.12);
  --ww-blue: #3db4ff;
  --ww-blue2: #67d0ff;
  --ww-text: rgba(255,255,255,.92);
  --ww-muted: rgba(255,255,255,.65);
}

.bg-wewatch{
  background: radial-gradient(1200px 600px at 50% 0%, rgba(61,180,255,.18), transparent 60%),
              radial-gradient(800px 500px at 20% 40%, rgba(61,180,255,.12), transparent 60%),
              var(--ww-bg);
  color: var(--ww-text);
  min-height: 100vh;
}

.wewatch-nav{
  background: rgba(5,10,20,.72);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ww-border);
}

.wewatch-btn{
  background: linear-gradient(90deg, var(--ww-blue), var(--ww-blue2));
  border: none;
  color: #00101a !important;
  font-weight: 700;
}
.wewatch-btn:hover{ filter: brightness(1.03); }

.card.wewatch-card{
  background: var(--ww-card);
  border: 1px solid var(--ww-border);
  border-radius: 18px;
}

.badge.wewatch-badge{
  background: rgba(61,180,255,.18);
  border: 1px solid rgba(61,180,255,.35);
  color: var(--ww-blue2);
}

.form-control, .form-select{
  background: rgba(255,255,255,.06);
  border: 1px solid var(--ww-border);
  color: var(--ww-text);
}
.form-control:focus, .form-select:focus{
  background: rgba(255,255,255,.08);
  color: var(--ww-text);
  border-color: rgba(61,180,255,.45);
  box-shadow: 0 0 0 .2rem rgba(61,180,255,.12);
}
.form-control::placeholder{ color: rgba(255,255,255,.45); }

a{ color: var(--ww-blue2); }
a:hover{ color: #bfeaff; }

.hr-soft{
  height: 1px; background: var(--ww-border); border: 0; margin: 1rem 0;
}

.member-pill{
  background: rgba(255,255,255,.06);
  border: 1px solid var(--ww-border);
  border-radius: 999px;
  padding: .25rem .5rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

.member-avatar{
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,.12);
  display: inline-flex; align-items:center; justify-content:center;
  font-weight: 800; font-size: .85rem;
}

.chat-box{
  height: 340px;
  overflow: auto;
  background: rgba(0,0,0,.18);
  border: 1px solid var(--ww-border);
  border-radius: 16px;
  padding: .75rem;
}

.chat-line{
  padding: .35rem .2rem;
  border-bottom: 1px dashed rgba(255,255,255,.08);
}
.chat-line:last-child{ border-bottom: 0; }

.reaction-float{
  position: absolute;
  bottom: 110px;
  right: 20px;
  pointer-events: none;
}
.reaction-bubble{
  display: inline-flex;
  align-items:center;
  justify-content:center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(61,180,255,.25);
  font-size: 22px;
  margin-top: .4rem;
  transform: translateY(0);
  animation: floatUp 1.4s ease-out forwards;
}
@keyframes floatUp{
  0% { opacity: 0; transform: translateY(10px) scale(.9); }
  10% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-80px) scale(1.05); }
}


/* Fix contrast for muted texts on dark background */
.text-muted,
.text-white-50 {
  color: rgba(255, 255, 255, 0.78) !important;
}

/* Global readability tweaks */
.wewatch-card, .wewatch-card *{ text-shadow: 0 1px 0 rgba(0,0,0,.18); }
.wewatch-card .text-white-50{ color: rgba(255,255,255,.84) !important; }
.wewatch-card .text-muted{ color: rgba(255,255,255,.82) !important; }
.wewatch-card .form-text{ color: rgba(255,255,255,.70) !important; }
.alert{ text-shadow: none; }

/* Avatars + online dot */
/* ===== Avatar size (GLOBAL) ===== */
.avatar-wrap{
  position: relative;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  flex: 0 0 auto;
}

.avatar-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Online dot scaling */
.online-dot{
  position: absolute !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  right: -2px !important;
  bottom: -2px !important;
  background: #22c55e !important;
  border: 2px solid rgba(7,15,30,1) !important;
  z-index: 50 !important;
  box-shadow: 0 0 8px rgba(34,197,94,0.85) !important;
}
}
.avatar-wrap .online-dot{
  box-shadow: 0 0 6px rgba(34,197,94,0.8);
}

/* ===== Readability fix for section titles on dark theme ===== */

/* Section headers like "Online now", "In this room", "Host tools" */
.wewatch-card h5,
.wewatch-card h6,
.card h5,
.card h6 {
  color: rgba(255, 255, 255, 0.92) !important;
  font-weight: 600;
}

/* Small headers / muted labels */
.card .text-muted,
.card .text-white-50 {
  color: rgba(255, 255, 255, 0.80) !important;
}

/* Section separators / subtitles */
.section-title,
.list-group-item .small,
.card-header {
  color: rgba(255, 255, 255, 0.9) !important;
}
/* ===== Form readability on dark theme ===== */

/* Labels de formulaires (Lock the room, Title, Email, etc.) */
.form-label,
.form-check-label {
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 500;
}

/* Champs input / textarea */
.form-control,
.form-select {
  color: #ffffff !important;
  background-color: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.25);
}

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

/* Email affiché (account page, readonly text) */
.account-email,
.text-email,
input[type="email"] {
  color: #ffffff !important;
}

/* Checkbox text specifically */
.form-check-input:checked + .form-check-label {
  color: rgba(255, 255, 255, 0.95) !important;
}
/* ===== FINAL READABILITY FIX (dark theme) ===== */

/* Page titles: "My account", room title, section titles */
h1, h2, h3, h4, h5 {
  color: rgba(255, 255, 255, 0.95) !important;
  font-weight: 600;
}

/* Room title specifically */
.room-title,
.wewatch-room-title,
.wewatch-card h3 {
  color: #ffffff !important;
}

/* User email next to avatar (account header) */
.user-email,
.account-email,
.profile-email,
.text-email {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 0.95rem;
}

/* Username near avatar */
.user-name,
.profile-name {
  color: #ffffff !important;
  font-weight: 600;
}

/* Small muted text still readable */
.text-muted,
.text-white-50 {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Card headers (used in Host tools, In this room, Online now) */
.card-header,
.card-header h5,
.card-header h6 {
  color: rgba(255, 255, 255, 0.95) !important;
}

/* Safety: any label inside account or room cards */
.account-page label,
.room-page label {
  color: rgba(255,255,255,0.9) !important;
}
/* ===== Home: Room titles readability ===== */

/* Room title inside cards on home page */
.wewatch-card .card-title,
.wewatch-card h5.card-title,
.wewatch-card h4.card-title {
  color: rgba(255, 255, 255, 0.97) !important;
  font-weight: 600;
}

/* If title is a link */
.wewatch-card .card-title a {
  color: rgba(255, 255, 255, 0.97) !important;
  text-decoration: none;
}

.wewatch-card .card-title a:hover {
  color: #ffffff !important;
  text-decoration: underline;
}
/* ===== FINAL FINAL READABILITY FIX ===== */

/* Username everywhere (cards, lists, chat, account, room) */
.username,
.user-name,
.member-pill span,
.chat-line .fw-semibold,
.wewatch-card .fw-semibold {
  color: rgba(255, 255, 255, 0.95) !important;
  font-weight: 600;
}

/* Username next to avatar (home + room + account) */
.avatar-wrap + span,
.avatar-wrap + .fw-semibold {
  color: rgba(255, 255, 255, 0.95) !important;
}

/* Room title INSIDE room cards (home page + room list) */
.wewatch-card .card-title,
.wewatch-card .room-title,
.wewatch-card h4,
.wewatch-card h5 {
  color: rgba(255, 255, 255, 0.97) !important;
  font-weight: 600;
}

/* Room title inside room page header */
.room-page h3,
.room-page .room-title {
  color: #ffffff !important;
}

/* Safety net: any strong text inside cards */
.wewatch-card strong {
  color: rgba(255, 255, 255, 0.95) !important;
}
/* ===== Fix Bootstrap fw-bold fs-5 on dark theme ===== */

.fw-bold.fs-5,
.fs-5.fw-bold {
  color: rgba(255, 255, 255, 0.97) !important;
}

/* Safety: fw-bold in cards and headers */
.wewatch-card .fw-bold,
.card .fw-bold {
  color: rgba(255, 255, 255, 0.95) !important;
}
/* Bigger avatars in room (members + chat) */
.room-page .avatar-wrap,
.chat-line .avatar-wrap {
  width: 46px;
  height: 46px;
}
/* ===== Account avatar (click to change) ===== */

.account-avatar-wrap{
  position: relative;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255,255,255,0.12);
  border: 2px solid rgba(255,255,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}

.account-avatar-wrap:hover{
  transform: scale(1.03);
  box-shadow: 0 0 18px rgba(255,255,255,0.25);
}

.account-avatar-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.account-avatar-letter{
  font-size: 3rem;
  font-weight: 700;
  color: #fff;
}

.account-avatar-overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .15s ease;
}

.account-avatar-wrap:hover .account-avatar-overlay{
  opacity: 1;
}
/* ===== Cinema mode (Lights Off) ===== */

/* Overlay that dims everything */
.lights-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.70);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 1000;
}

/* When enabled */
body.lights-off .lights-overlay{
  opacity: 1;
}

/* Make the video area stay above the overlay */
#playerWrap{
  position: relative;
  z-index: 1001;
}

/* Dim the UI a bit more (optional but looks great) */
body.lights-off .wewatch-card,
body.lights-off .room-side,
body.lights-off #chatBox,
body.lights-off .member-pill,
body.lights-off .host-tools {
  opacity: 0.35;
  transition: opacity .18s ease;
}

/* Keep important text usable when hovering (optional) */
body.lights-off .room-side:hover{
  opacity: 0.85;
}
/* Room card thumbnails - NO black bars */
.room-thumb{
  width: 100% !important;
  aspect-ratio: 16 / 9;     /* garde un format vidéo propre */
  height: auto !important;  /* laisse le ratio gérer la hauteur */
  object-fit: cover !important;  /* remplit, coupe si besoin */
  object-position: center !important;
  display: block;
  background: transparent !important;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
/* ===== Room badges (Home) ===== */

/* Locked rooms */
.wewatch-badge.locked,
.wewatch-badge.locked i,
.badge.locked,
.badge.locked i {
  background-color: #dc2626 !important; /* red */
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.25);
}

/* Open rooms */
.wewatch-badge.open,
.wewatch-badge.open i,
.badge.open,
.badge.open i {
  background-color: #16a34a !important; /* green */
  color: #ffffff !important;
}
/* Bigger logo in navbar (Cinook) */
.logo-home{
  width: 180px;        /* <- plus grand (essaie 320-420) */
  height: auto;
  max-width: 70vw;     /* évite que ça déborde sur mobile */
  margin-bottom: 0;
}

@media (max-width: 992px){
  .logo-home{ width: 180px; }
}
@media (max-width: 520px){
  .logo-home{ width: 100px; }
}
/* ===== Cinook Home Hero ===== */
.cinook-heroCard{
  border-radius: 22px;
}

.cinook-heroLogo{
  width: 120px;
  height: auto;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.35));
}

.cinook-title{
  font-size: clamp(1.6rem, 2.2vw, 2.2rem);
  letter-spacing: .2px;
}

.cinook-sub{
  color: rgba(255,255,255,.78);
}

.cinook-pill{
  padding: .55rem .75rem;
  border-radius: 999px;
  text-decoration: none;
}

.cinook-popItem{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: .65rem .75rem;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  text-decoration:none;
}
.cinook-popItem:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
}
/* ===== Movies page ===== */
.cinook-pageHead{
  border-radius: 22px;
}

.cinook-pill{
  padding: .55rem .75rem;
  border-radius: 999px;
  text-decoration: none;
}
.cinook-pillActive{
  border-color: rgba(255,255,255,.28) !important;
  background: rgba(255,255,255,.10) !important;
}

.cinook-movieCard{
  border-radius: 18px;
}

.cinook-ytWrap{
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
}
.cinook-ytWrap iframe{
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
}

.cinook-movieTitle{
  font-weight: 700;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}