/* Halo Meets — calm luxury branding for the standalone Jitsi UI.
   Matches halovaservices.com tokens: ivory #fbf7f2, plum #2a2530, blush/rose. */
:root {
  --halo-bg: #fbf7f2;
  --halo-surface: #ffffff;
  --halo-fg: #2a2530;
  --halo-muted: #6b6473;
  --halo-blush: #f5dce0;
  --halo-rose: #e8b9c4;
  --halo-gold: #c9a36b;
  --halo-border: rgba(42, 37, 48, 0.08);
}

/* ----- Surfaces ----- */
body,
#react,
.welcome,
.welcome-page,
.premeeting-screen,
.prejoin-screen {
  background-color: var(--halo-bg) !important;
}

.welcome,
.welcome-page {
  background: radial-gradient(1200px 620px at 50% -12%, #ffffff 0%, #fbf7f2 46%, #f6efe6 100%) !important;
  color: var(--halo-fg) !important;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
}

/* ----- Hide stock Jitsi watermarks / promos ----- */
.leftwatermark,
.rightwatermark,
.watermark,
.poweredby,
.welcome-watermark,
.mobile-app-promo,
.welcome-page-footer,
#footer {
  display: none !important;
}

/* ----- Hero header ----- */
.welcome .header,
.welcome-page .header {
  background: transparent !important;
}

.header-text-title::before {
  content: "";
  display: block;
  width: 124px;
  height: 124px;
  margin: 0 auto 20px;
  background: url("https://halovaservices.com/halo-logo.png") center center / contain no-repeat;
  filter: drop-shadow(0 12px 26px rgba(42, 37, 48, 0.14));
}

.header-text-title {
  color: var(--halo-fg) !important;
  font-family: Georgia, "Cormorant Garamond", "Times New Roman", serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
}

.header-text-subtitle {
  color: var(--halo-muted) !important;
  font-weight: 400 !important;
}

/* ----- Enter-room input ----- */
.enter-room-input-container {
  background: var(--halo-surface) !important;
  border: 1px solid var(--halo-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 28px -18px rgba(42, 37, 48, 0.25) !important;
}
.enter-room-input {
  background: transparent !important;
  color: var(--halo-fg) !important;
}
.enter-room-input::placeholder { color: var(--halo-muted) !important; }
.join-meeting-container .insecure-room-name-label,
.rotating-text-container { color: var(--halo-muted) !important; }

/* ----- Start meeting button ----- */
#enter_room_button,
.welcome-page-button,
.welcome-card-button {
  background: linear-gradient(135deg, var(--halo-blush) 0%, var(--halo-rose) 100%) !important;
  color: var(--halo-fg) !important;
  border: none !important;
  border-radius: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  box-shadow: 0 10px 24px -10px rgba(232, 185, 196, 0.95) !important;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease !important;
}
#enter_room_button:hover,
.welcome-page-button:hover,
.welcome-card-button:hover {
  filter: brightness(1.03) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 30px -10px rgba(232, 185, 196, 1) !important;
}

/* ----- Recent meetings cards ----- */
.welcome-cards-container,
.welcome-card-column { background: transparent !important; }

.welcome-card,
.welcome-tabs.welcome-card,
.welcome-card--blue,
.welcome-card--grey,
.welcome-card--purple,
.welcome-card--dark {
  background: var(--halo-surface) !important;
  color: var(--halo-fg) !important;
  border: 1px solid var(--halo-border) !important;
  border-radius: 20px !important;
  box-shadow: 0 16px 40px -22px rgba(42, 37, 48, 0.28) !important;
}
.welcome-card svg,
.welcome-card-icon { fill: var(--halo-gold) !important; color: var(--halo-gold) !important; }

/* ----- Tabs ----- */
.tab-button { color: var(--halo-muted) !important; }
.tab-button.selected,
.tab-button--selected {
  color: var(--halo-fg) !important;
  border-color: var(--halo-rose) !important;
}

/* ----- Settings cog on welcome ----- */
.welcome-page-settings .toolbox-icon { background-color: #f6efe6 !important; }
.welcome-page-settings svg { fill: var(--halo-fg) !important; }

/* ----- Prejoin / in-call toolbar (calm cream, matches sidebar) ----- */
.new-toolbox,
.toolbox-content,
.toolbox-content-wrapper {
  background: rgba(251, 247, 242, 0.96) !important;
  border-top: 1px solid var(--halo-border) !important;
}
.toolbox-button,
.toolbox-icon { background-color: #f6efe6 !important; }
.toolbox-icon svg { fill: var(--halo-fg) !important; }
.prejoin-btn.primary,
.action-btn.primary,
.prejoin-preview-btn {
  background: linear-gradient(135deg, var(--halo-blush), var(--halo-rose)) !important;
  color: var(--halo-fg) !important;
  border: none !important;
}

/* ----- Brand welcome heading + tagline regardless of i18n source -----
   (Jitsi bakes default English strings into app.bundle.min.js, so the
   served /lang/main.json edit never reaches English users. Replace the
   visible text deterministically with CSS.) */
.header-text-title { font-size: 0 !important; line-height: 0 !important; }
.header-text-title::after {
  content: "Halo Meets";
  display: block;
  font-size: 42px;
  line-height: 50px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--halo-fg);
  font-family: Georgia, "Cormorant Garamond", "Times New Roman", serif;
}
.header-text-subtitle { font-size: 0 !important; line-height: 0 !important; }
.header-text-subtitle::after {
  content: "Private, secure video meetings by Halo Services";
  display: block;
  font-size: 20px;
  line-height: 26px;
  font-weight: 400;
  color: var(--halo-muted);
}
@media (max-width: 600px) {
  .header-text-title::after { font-size: 30px; line-height: 36px; }
  .header-text-subtitle::after { font-size: 16px; line-height: 22px; }
  .header-text-title::before { width: 92px; height: 92px; }
}

/* ----- Prejoin / premeeting screen (emotion CSS-in-JS) -----
   Default Jitsi prejoin assumes a dark sidebar; on our cream surface its
   light text is unreadable. Restore contrast and brand the Join button. */
.premeeting-screen { color: var(--halo-fg) !important; }
.premeeting-screen [class*="-title"],
.premeeting-screen [class*="-roomName"],
.premeeting-screen [class*="-subtitle"],
.premeeting-screen [class*="-deviceStatus"],
.premeeting-screen [class*="deviceStatus"],
.premeeting-screen label,
.premeeting-screen span:not([class*="-actionButton"]) {
  color: var(--halo-fg) !important;
}
.premeeting-screen [class*="-actionButton"].primary,
.premeeting-screen [class*="actionButton"].primary {
  background: linear-gradient(135deg, var(--halo-blush) 0%, var(--halo-rose) 100%) !important;
  color: var(--halo-fg) !important;
  border: none !important;
}
.premeeting-screen [class*="-actionButton"].primary:hover {
  filter: brightness(1.03) !important;
}
/* keep the name input legible (dark field, light text is fine) */
.premeeting-screen input[class*="-input"] { color: #ffffff !important; }