/* CSS for home.html */
/* This is applied in addition to common.css */

:root {
  --bg-color: #f0f0f0;
  --text-color: #333;
  --card-bg: #fff;
  --search-border: #ddd;
  --stats-color: #777;
  --shadow-color: rgba(0, 0, 0, 0.10);
  --transition-time: 0.3s;
  --max-width: 1910px;
  --tooltip-text-color: #333;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color var(--transition-time), color var(--transition-time);
}

body.dark-mode {
  --bg-color: #121212;
  --text-color: #e0e0e0;
  --card-bg: #2c2c2c;
  --search-border: #333;
  --stats-color: #aaa;
  --shadow-color: rgba(0, 0, 0, 0.1);
  --tooltip-text-color: #e0e0e0;
}


#top-container {
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  /* background: linear-gradient(black 0%, black 70%, transparent 100%); */
}

/* If the explore tab is open, the top container acts as a fixed component,
   it doesn't scroll with the page. */
.explore-tab-open #top-container, .profile-tab-open #top-container {
  z-index: 3;
  /* position: fixed; */
  /* background-color: var(--bg-color); */
}

#topbar {
  max-width: var(--max-width);
  margin-top: 32px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 28px;
  padding-right: 28px;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
}

body.about-tab-open #topbar {
  max-width: 1400px;
  /* Different max-width for About page */
}

@media (max-width: 700px) {

  /* Hide some stuff */
  #explore-tab-button {
    display: none;
  }

  #about-tab-button {
    display: none;
  }

  #profile-pic-container {
    display: none;
  }
}



.bar-button {
  display: inline-block;
  border: none;
  background: none;
  color: var(--text-color);
  opacity: .7;
  font: 16px HelveticaNeue, Helvetica, Arial, sans-serif;
  margin-left: 16px;
  margin-right: 0px;
  cursor: pointer;
  text-decoration: none;
}

.bar-button.icon {
  margin: 0;
}

.social-buttons{
  display: flex;
  gap: 12px;
  margin-right: 10px;
}

.bar-button:hover {
  opacity: 1;
}

#bell-button {
  position: relative;
  display: none;
}

#bell-circle {
  background: #e00;
  color: white;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  position: absolute;
  top: -7px;
  right: -7px;
}

@media (max-width: 700px) {
  .bar-button {
    margin-left: 8px;
    margin-right: 8px;
  }

  .bar-button.hide-on-mobile {
    display: none !important;
  }
}

.bar-button.active {
  opacity: 1;
  cursor: default;
}

/* The .only-for-about-tab shows the button only if the about tab is open. */
.bar-button.only-for-about-tab {
  display: none;
}

.about-tab-open .bar-button.only-for-about-tab {
  display: inline-block;
}

/* Box that holds the page's content, such that it's limited
   in width and centered horizontally in the page. */
.content {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 28px;
  padding-right: 28px;
  margin-top: 110px;
  /* to make room for the top bar */
}

@media (max-width: 700px) {

  /* for home/about only */
  .content {
    margin-top: 90px;
  }
}


#logo {
  display: inline-block;
  font-size: 0px;
  text-decoration: none;
  /* Moving this 3px up because otherwise it's 3px too low.
   *   ^ Most useful comment in the history of CSS */
  transform: translateY(-3px);
  transition: filter var(--transition-time);
}

/* Registered trademark mark sitting at the top-right corner of the
   wordmark image. The wordmark itself is white in the source PNG, so we
   color the ® white too; the surrounding #logo filter (invert in light
   mode) flips both at once so they always match the wordmark color. */
#logo .trademark {
  font: 12px HelveticaNeue, Helvetica, Arial, sans-serif;
  vertical-align: top;
  display: inline-block;
  color: white;
  margin-left: 2px;
  margin-top: 4px;
  line-height: 1;
}

body:not(.dark-mode) #logo {
  filter: invert(1);
}

#hero-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 40px 0px 70px 0px;
}

@media (max-width: 600px) {
  #hero-box {
    flex-direction: column;
    align-items: center;
    margin-top: 24px;
    margin-bottom: 10px;
  }
}

.hero-text {
  font: 50px "Helvetica Neue", HelveticaNeueLight, Helvetica, Arial, sans-serif;
  color: color-mix(in srgb, var(--text-color) 60%, transparent);
  line-height: 1.2em;
  margin-right: 24px;
  font-weight: 200;
}

/* Tighten the line height on languages based on Latin characters */
.intl-en .hero-text,
.intl-fr .hero-text,
.intl-de .hero-text,
.intl-pt .hero-text,
.intl-es .hero-text {
  line-height: 1.05em;
}

@media (max-width: 1200px) {
  .hero-text {
    font-size: 36px;
  }
}

@media (max-width: 800px) {
  .hero-text {
    color: var(--text-color);
    width: 100%;
    text-align: left;
    margin-bottom: 24px;
    margin-right: 0;
    font-size: 32px;
  }
}

.hero-text b {
  color: var(--text-color);
  font-weight: 400;
}

#hero-cta-button-bar {
  display: flex;
  flex-direction: row;
}

#hero-vid-container,
#hero-image-container {
  position: relative;
  width: min(60vw, 860px);
}

#hero-vid-container {
  overflow: hidden;
}

#hero-image-container {
  aspect-ratio: 1.7;
  filter: drop-shadow(0px 8px 10px rgba(0, 0, 0, 0.2));
}

@media (max-width: 800px) {

  #hero-vid-container,
  #hero-image-container {
    width: 100%;
  }
}

@media (max-width: 450px) {

  #hero-vid-container,
  #hero-image-container {
    width: 110%;
  }
}

#hero-vid,
#hero-vid-ios {
  width: 100%;
  border-radius: 12px;
}

#hero-image-container {
  /* Note: some attributes are set above in the #hero-vid-container rule. */
}

.hero-device-name {
  /* Device name style "iPhone" or "iPad" in hero text */
}

@keyframes device-appear {
  0% {
    transform: translateY(-100px);
    opacity: 0;
  }

  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

@keyframes promo-bar-appear {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}


#hero-image-imac {
  position: absolute;
  top: 2%;
  left: 21%;
  width: 68%;
  animation: 1s device-appear ease-out;
  animation-fill-mode: both;
}

#hero-image-iphone {
  position: absolute;
  top: 56%;
  left: 85%;
  width: 13%;
  animation: 1s device-appear .8s ease-out;
  animation-fill-mode: both;
}

#hero-image-ipad {
  position: absolute;
  top: 56%;
  left: 0%;
  width: 35%;
  animation: 1s device-appear 0.4s ease-out;
  animation-fill-mode: both;
}

.promo-bar {
  font: 16px "Helvetica Neue", HelveticaNeueLight, Helvetica, Arial, sans-serif;
  color: var(--text-color);
  background-color: color-mix(in srgb, var(--text-color) 10%, transparent);
  padding: 10px;
  font-weight: 200;
  border-radius: 5px;
  text-align: center;
  animation: 2s promo-bar-appear .25s ease;
  animation-fill-mode: both;
}

.promo-bar a {
  font-weight: 400;
  color: #E9AB5D;
  cursor: pointer;
  text-decoration: none;
}


.trophy {
  width: 24px;
  vertical-align: middle;
  margin-right: 5px;
  margin-top: -3px;
}


button.square {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.8);
  padding: 10px;
  color: white;
  cursor: pointer;
}

button.square:hover {
  background: linear-gradient(to right, #000000, #202020, #000000);
  background-size: 200%;
  background-position: left;
  animation: move 5s ease;
  border-color: white;
}

#honeycomb-iframe {
  /* Ugly hack to make it full-bleed and "counter" the 28px padding on each side */
  width: calc(100% + 56px);
  margin-left: -28px;
  height: 870px;
  border: none;
  margin-top: 16px;
}

@media (max-width: 900px) {
  #honeycomb-iframe {
    height: 760px;
  }
}

@media (max-width: 800px) {
  #honeycomb-iframe {
    height: 660px;
  }
}

@media (max-width: 700px) {
  #honeycomb-iframe {
    height: 600px;
  }
}

@media (max-width: 600px) {
  #honeycomb-iframe {
    height: 500px;
  }
}

@media (max-width: 500px) {
  #honeycomb-iframe {
    height: 420px;
  }
}

@media (max-width: 440px) {
  #honeycomb-iframe {
    height: 346px;
  }
}

@media (max-width: 390px) {
  #honeycomb-iframe {
    height: 310px;
  }
}

.h1-box {
  width: 100%;
  display: flex;
  flex-direction: row;
  margin-top: 0px;
}

.h1-box-line {
  flex-grow: 1;
  transform: translateY(50%);
  margin-left: 22px;
  margin-right: 22px;
  background-image: linear-gradient(to right,
      var(--text-color) 13%,
      var(--bg-color) 0%);
  background-position: top;
  background-size: 6px 1px;
  background-repeat: repeat-x;
  margin-top: 28px;
}

@media (max-width: 700px) {
  .h1-box-line {
    margin-top: 24px;
    margin-left: 8px;
    margin-right: 8px;
    background-size: 4px 1px;
  }
}

h1 {
  margin: 24px 0 0 0;
  font: bold 38px HelveticaNeue, Helvetica, Arial, sans-serif;
  color: var(--text-color);
}

@media (max-width: 700px) {
  h1 {
    font-size: 32px;
  }
}

.h1-subtitle {
  text-align: center;
  font: 18px HelveticaNeueLight, Helvetica, Arial, sans-serif;
  color: color-mix(in srgb, var(--text-color) 50%, transparent);
  margin-top: 4px;
  margin-bottom: 20px;
}

@media (max-width: 700px) {
  .h1-subtitle {
    font-size: 17px;
    margin-top: 1px;
    margin-bottom: 5px;
  }
}

.feature-box {
  display: flex;
  flex-direction: row;
  margin: 80px 32px 80px 32px;
  align-items: center;
  justify-content: center;
}

.feature-box.mirrored {
  flex-direction: row-reverse;
}

@media (max-width: 700px) {
  .feature-box {
    flex-direction: column;
    margin: 32px 32px 50px 32px;
  }

  .feature-box.mirrored {
    flex-direction: column;
  }
}

.feature-image {
  position: relative;
}

.feature-image img {
  width: min(860px, 60vw);
}

.feature-image.smaller img {
  width: min(660px, 48vw);
}

.feature-image.smallest img {
  width: min(460px, 40vw);
}

.feature-image.smallest img.device-shadow {
  z-index: -1;
  position: absolute;
  width: min(560px, 40vw);
  left: -4vw;
  bottom: -8vw;
  animation: none;
}

.heart-icon {
  width: 16px;
  height: 16px;
  position: relative;
  top: 2.5px;
}

.eye-icon {
  position: relative;
  top: 2.5px;
}

.heart-icon path {
  fill: var(--stats-color);
}

.eye-icon path {
  fill: var(--stats-color);
}

@media (max-width: 700px) {

  .feature-image img,
  .feature-image.smaller img {
    width: 90vw;
  }
}

.feature-spacer {
  flex-grow: 1;
  min-width: 8px;
}

@media (max-width: 700px) {
  .feature-spacer {
    display: none;
  }
}

@media (max-width: 700px) {
  .hide-on-mobile {
    display: none !important;
  }
}

.feature-desc {
  width: 340px;
  margin-bottom: 32px;
}

@media (max-width: 1200px) {
  .feature-desc {
    width: 250px;
  }
}

@media (max-width: 850px) {
  .feature-desc {
    width: 190px;
  }
}

@media (max-width: 700px) {
  .feature-desc {
    width: 95%;
    text-align: center;
    margin-bottom: 10px;
  }
}

.feature-desc-title {
  font: bold 38px HelveticaNeue, Helvetica, Arial, sans-serif;
  margin-bottom: 10px;
}

@media (max-width: 1200px) {
  .feature-desc-title {
    font-size: 28px;
  }
}

@media (max-width: 850px) {
  .feature-desc-title {
    font-size: 24px;
  }
}

@media (max-width: 700px) {
  .feature-desc-title {
    font-size: 26px;
    margin-bottom: 2px;
  }
}

.feature-desc-text {
  font: 26px HelveticaNeueLight, Helvetica, Arial, sans-serif;
}

.feature-desc-text a{
  color:-webkit-link;;
}

@media (max-width: 1200px) {
  .feature-desc-text {
    font-size: 18px;
  }
}

@media (max-width: 850px) {
  .feature-desc-text {
    font-size: 16px;
  }
}

@media (max-width: 700px) {
  .feature-desc-text {
    font-size: 16px;
    line-height: 1.1;
    opacity: 0.7;
  }
}

.bottom-cta-desktop,
.bottom-cta-mobile {
  text-align: center;
  font: 18px HelveticaNeueLight, Helvetica, Arial, sans-serif;
  margin: 64px;
}

@media (max-width: 700px) {
  .bottom-cta-desktop {
    display: none;
  }
}

@media (min-width: 700px) {
  .bottom-cta-mobile {
    display: none;
  }
}

.bottom-cta-mobile b {
  font: bold 18px HelveticaNeue, Helvetica, Arial, sans-serif;
}

#bottom-bar {
  background: var(--card-bg);
  height: 80px;
  width: 100vw;
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding-top: 16px;
}

@media (max-width: 700px) {

  /* Make the bottom bar into a grid with 2 columns */
  #bottom-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: inherit;
    padding-bottom: 20px;
  }

  #bottom-bar div {
    margin: 8px;
  }
}

/* Trademark notice that sits below the bottom-bar nav row.
   Uses the same card background as the bottom-bar so they read as one
   continuous footer area, but with smaller, subdued text. */
#trademark-notice {
  background: var(--card-bg);
  width: 100vw;
  padding: 8px 16px 16px 16px;
  text-align: center;
  font-size: 12px;
  color: #888;
  font-family: HelveticaNeue, Helvetica, Arial, sans-serif;
}

.fly-from-left-when-seen,
.fly-from-right-when-seen {
  opacity: 0;
}

@keyframes fly-from-left {
  0% {
    transform: translateX(-1000px);
    opacity: 0;
  }

  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}

@keyframes fly-from-right {
  0% {
    transform: translateX(1000px);
    opacity: 0;
  }

  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}

.fly-from-left {
  animation-delay: 500ms;
  animation: fly-from-left 0.5s cubic-bezier(0.5, 0.9, 0.25, 1.1);
  animation-fill-mode: forwards;
}

.fly-from-right {
  animation-delay: 500ms;
  animation: fly-from-right 0.5s cubic-bezier(0.5, 0.9, 0.25, 1.1);
  animation-fill-mode: forwards;
}

#explore-tab {
  /* display: flex; 
  flex-direction: row; */
  max-width: var(--max-width);
  margin-top: 100px;
  /* room for top bar to show on top */
  margin-bottom: 32px;
  min-height: 2000px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 28px;
  padding-right: 28px;
}

#explore-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.explore-card {
  background-color: var(--card-bg);
  border-radius: 8px;
  box-shadow: 0px 8px 11px 2px var(--shadow-color);
  position: relative;
  transition: transform 0.3s cubic-bezier(0.34, 1.5, 0.64, 1), box-shadow 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s ease;
}

body.dark-mode .explore-card{
  box-shadow: none;
}

.explore-card:hover {
  box-shadow: 0 20px 30px var(--shadow-color);
  transform: scale(1.05);
}

.explore-card:active {
  transform: scale(0.98);
  box-shadow: 0 4px 8px var(--shadow-color);
}

.explore-card.loaded {
  opacity: 1;
}

.explore-card-thumb-wrapper {
  position: relative;
  width: 100%;
  height: 274px;
}

.explore-card-room-thumb {
  height: 100%;
  width: 100%;
  object-position: center;
  object-fit: cover;
  border-radius: 8px 8px 0 0; 
  transition: opacity 0.5s ease;
  background-image: url('gradient.webp');
  background-size: cover; 
  background-position: center; 
}

.explore-card-room-thumb.loaded {
  opacity: 1;
}

.explore-card-star{
  position: absolute;
  top: -10px;
  right: -12px;
  transform: rotate(4deg);
  color: #FFBB1B;
  text-shadow: 0px 8px 11px rgba(0, 0, 0, 0.30);
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #FFF;
  font-size: 28px;
  z-index: 2;
  opacity: 0;
  transform: rotate(4deg) scale(0);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
}

/* Increased specificity and removed opacity from transition */
.explore-card-star.visible {
  opacity: 1 !important;
  transform: rotate(5deg) scale(1);
  transition: transform 0.3s cubic-bezier(0.36, 0.45, 0.63, 0.53)
}

.room-details {
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 1;
  box-shadow: 0 -2px 10px #00000010;
}

.explore-card-title {
  font-weight: 700;
  font-size: 18px;
}

.room-stats {
  display: flex;
  gap: 10px;
  color: var(--stats-color);
  font-size: 14px;
  font-weight: 500;
  margin-top: 2px;
  white-space: nowrap;
  transition: color var(--transition-time);
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  position: relative;
  cursor: pointer;
}

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

/* check where used, may be able to cut */
.prefab-card {
  border: 1px dashed color-mix(in srgb, var(--stats-color) 50%, transparent);
}

.explore-card-unlisted {
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--bg-color);
  color: var(--text-color);
  font-size: 12px;
  padding: 5px;
  border-radius: 4px;
}

/* Used instead of the 'hidden' property because this can
  override "display: flex" correctly without an inner div,
  and more importantly, without requiring me to actually know
  what I'm doing. */
.hidden {
  display: none !important;
}

#profile-tab {
  max-width: var(--max-width);
  /* TODO change to 100px to match explore */
  margin-top: 128px;
  /* room for top bar to show on top */
  padding-bottom: 32px;
  min-height: 100vh;
  margin-left: auto;
  margin-right: auto;
  padding-left: 28px;
  padding-right: 28px;
}

/* styling for tab that says Rooms above grid */
.profile-tab {
  font: bold 22px "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* styling for bio section */
#profile-about-section {
  margin-top: 24px;
  margin-bottom: 24px;
}

.profile-bio {
  font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin-top: 8px;
  line-height: 1.5;
  white-space: pre-wrap;
}

/* styling for highlighted rooms section */
#profile-highlighted-section {
  margin-top: 24px;
  margin-bottom: 24px;
}

.highlighted-rooms-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 12px;
}

.highlighted-room-cell {
  display: flex;
  flex-direction: row;
  text-decoration: none;
  color: var(--text-color);
  border-radius: 8px;
  border: 1px solid var(--search-border);
  overflow: hidden;
  background: var(--card-bg);
  padding: 8px;
  box-shadow: 0px 8px 11px 2px var(--shadow-color);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.highlighted-room-cell:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 30px var(--shadow-color);
}

body.dark-mode .highlighted-room-cell {
  box-shadow: none;
}

body.dark-mode .highlighted-room-cell:hover {
  box-shadow: none;
}

.highlighted-room-thumb {
  width: 120px;
  height: 120px;
  flex-shrink: 0;
  object-fit: cover;
  background: #333;
  border-radius: 4px;
}

.highlighted-room-info {
  padding: 0 0 0 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.highlighted-room-title {
  font: bold 18px "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 0 0 4px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.highlighted-room-description {
  font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 0;
  color: var(--stats-color);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.highlighted-room-stats {
  display: flex;
  gap: 12px;
  margin-top: 4px;
  font: 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--stats-color);
}

.highlighted-room-stats span {
  display: flex;
  align-items: center;
  gap: 4px;
}

@media (max-width: 600px) {
  .highlighted-rooms-grid {
    grid-template-columns: 1fr;
  }
}

#profile-loading {
  font-size: 18px;
  opacity: 0.2;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  text-align: center;
}

#profile-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.profile-header-top-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}

#profile-photo {
  width: 128px;
  height: 128px;
  border-radius: 42px;
  border: 2px solid white;
}

#profile-uname {
  font: bold 30px HelveticaNeue, Helvetica, Arial, sans-serif;
  margin-left: 24px;
  margin-right: 24px;
  transform: translateY(-2.5px);
  color: var(--text-color);
}

.profile-stats-wrapper {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 16px;
}

.profile-stats-label {
  font: 16px "Courier New", Courier, monospace, sans-serif;
  color: var(--stats-color);
}

.profile-stats-value {
  color: var(--stats-color);
}

.profile-stats-link {
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.profile-stats-link:hover {
  opacity: 0.7;
}

/* Profile follow controls */
.profile-follow-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.profile-follow-controls[hidden] {
  display: none !important;
}

.profile-follow-button {
  padding: 8px 20px;
  border-radius: 8px;
  border: 2px solid black;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: black;
  color: white;
}

.profile-follow-button:hover {
  background-color: #333;
  border-color: #333;
  transform: scale(1.02);
}

.profile-follow-button.following {
  background-color: transparent;
  border: 2px solid black;
  color: black;
}

.profile-follow-button.following:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

body.dark-mode .profile-follow-button {
  background-color: white;
  border-color: white;
  color: black;
}

body.dark-mode .profile-follow-button:hover {
  background-color: #ddd;
  border-color: #ddd;
}

body.dark-mode .profile-follow-button.following {
  background-color: transparent;
  border-color: white;
  color: white;
}

body.dark-mode .profile-follow-button.following:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.profile-notify-bell {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 2px solid var(--stats-color);
  background-color: transparent;
  color: var(--stats-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  font-size: 14px;
}

.profile-notify-bell[hidden] {
  display: none !important;
}

.profile-notify-bell:hover {
  background-color: color-mix(in srgb, var(--text-color) 10%, transparent);
}

.profile-notify-bell.active {
  background-color: #007AFF;
  border-color: #007AFF;
  color: white;
}

.profile-notify-bell.active:hover {
  background-color: #0056b3;
  border-color: #0056b3;
}

@media (max-width: 700px) {
  .profile-follow-button {
    padding: 6px 16px;
    font-size: 13px;
  }
  
  .profile-notify-bell {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }
}

.profile-tab-wrapper {
  margin-top: 36px;
  margin-bottom: 8px;
  position: relative; /* Add position relative for absolute positioning of sort controls */
  display: flex;
  align-items: center;
}

.profile-sort-controls {
  position: absolute;
  right: 0;
  display: flex;
  align-items: center;
}

.profile-sort-label {
  margin-right: 6px;
  color: var(--stats-color);
}

.profile-sort-select {
  padding: 4px 6px;
  border-radius: 6px;
  border: 0px;
  color: var(--stats-color);
  cursor: pointer; /* Add cursor pointer to make it clear it's interactive */
  -webkit-appearance: menulist; /* Ensures standard dropdown appearance on iOS */
  appearance: menulist;
}

.dark-mode .profile-sort-select {
  background-color: #333;
  border-color: #555;
}

@media (max-width: 700px) {
  .profile-tab-wrapper {
    margin-top: 20px;
  }
  
  .profile-sort-label {
    font-size: 12px;
  }
  
  .profile-sort-select {
    font-size: 12px;
    padding: 4px;
    min-height: 24px; /* Ensure minimum tap target size on mobile */
    touch-action: manipulation; /* Optimize for touch */
  }
}

.profile-tab-value {
  color: var(--stats-color);
  margin-left: 6px;
}

#profile-tab #explore-grid {
  margin-top: 20px;
}

#profile-no-rooms {
  margin-top: 128px;
  text-align: center;
}

.custom-hr {
  width: 100%;
  border: none;
  border-top: 1px solid color-mix(in srgb, var(--text-color) 20%, transparent 80%); /* Set border opacity to 0.3 of var(--text-color) */
  margin-bottom: 20px;
}

@media (max-width: 700px) {
  #profile-tab {
    margin-top: 80px;
    padding-left: 16px;
    padding-right: 16px;
  }

  #profile-header {
    align-items: center;
    gap: 12px;
    text-align: center;
  }

  .profile-header-top-row {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .profile-tab{
    font-size: 16px;
  }

  .profile-tab-wrapper {
    margin-top: 20px;
  }

  .profile-stats-label {
    font-size: 16px;
  }

  .profile-stats-wrapper{
    gap: 28px;
    margin-top: 0;
  }

  #explore-grid {
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  #profile-tab #explore-grid {
    margin-top: 0px;
  }

  .explore-card-thumb-wrapper {
    height: 160px;
  }

  .explore-card-title {
    font-size: 14px;
  }

  .room-stats {
    font-size: 12px;
  }
  
  .heart-icon, .eye-icon {
    width: 12px;
    height: 12px;
    top: 2px;
  }

  .room-details{
    padding: 8px;
  }

  .room-stats{
    margin-top: 4px;
  }

  .user-avatar{
    width: 28px;
    height: 28px;
  }

  .custom-hr {
    margin-bottom: 12px;
  }

  #profile-photo{
    width: 100px;
    height: 100px;
    border-radius: 30px;
  }

  #profile-uname{
    font-size: 26px;
    margin-left: 0;
    margin-right: 0;
  }

  #topbar {
    margin-top: 22px;
    padding-left: 16px;
    padding-right: 10px;
  }

  .explore-card-star{
    font-size: 20px;
    top: -8px;
    right: -8px;
  }  
}


.search-container {
  flex-grow: 1;
  flex-direction: row;
  margin: 0 14px;
}

#topbar-search {
  display: none;
  max-width: 500px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 20px;
  border: 1px solid var(--search-border);
  background-color: var(--card-bg);
  align-items: center;
  transition: all 0.3s ease;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
  margin: auto;
}

#topbar-search:focus-within {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  border-color: #a6a6a6;
  transform: translateY(-2px);
  transform: scale(1.05);
}

/* If wider than 700px show search box in explore mode.
   If narrower than 1000px, don't show, because it would be hard to align it.
   Side-effect: mobile web users can't search, but they're used to being treated badly
   by our site anyway and search results would be useless to them.
   They can use the mobile app to search, which is way better.
*/
@media (min-width: 700px) {
  .explore-tab-open #topbar-search, .profile-tab-open #topbar-search {
    display: flex;
  }

  .explore-tab-open #topbar-nosearch, .profile-tab-open #topbar-nosearch {
    display: none;
  }
}

/* Magnifying glass icon next to search term input field */
#topbar-search-icon {
  width: 16px;
  height: 16px;
  opacity: .5;
  margin-left: 2px;
}

body.dark-mode #topbar-search-icon {
  filter: invert(1);
}

/* Field that the user types the search term in */
#topbar-search-field {
  border: none;
  outline: none;
  width: 100%;
  margin-left: 10px;
  font-size: 14px;
  background-color: transparent;
  color: var(--text-color);
  transition: all 0.3s ease;
}

/* The search results box that shows up after the user types in
   a few characters as a search term */
#search-results-box {
  display: none;
  /* programmatically changed to 'flex' when shown */
  border-radius: 10px;
  flex-direction: column;
  position: fixed;
  top: 44px;
  left: 0;
  width: 100%;
  color: var(--text-color);
  background: var(--card-bg);
  z-index: 4;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  padding: 8px 0px;
  opacity: 1;
  max-height: 500px;
  /* Adjust based on your content */
}

#search-results-box.hidden {
  opacity: 0;
  max-height: 0;
}

/* Each of the search results */
#search-results-box a {
  display: block;
  text-decoration: none;
  color: var(--text-color);
  padding: 8px 12px;
  cursor: pointer;
}

#search-results-box a:hover {
  background: var(--shadow-color);
}

/* Search results headings ("users" and "rooms" headings) */
#search-results-box h1 {
  font-weight: bold;
  font-size: 14px;
  margin: 4px 10px 2px 12px;
}

#search-results-box h1:nth-child(2) {
  margin: 16px 8px 0px 8px;
}

/* NOTE: there's an almost identical .app-store-button class in /style.css, keep
   them in sync. */
.app-store-button,
.try-it-now-button {
  display: inline-block;
  height: 50px;
  width: 150px;
  background: url(/app-store-download-button.svg);
  background-repeat: no-repeat;
  background-size: contain;
  margin-top: 24px;
}

.try-it-now-button {
  position: relative;
  margin-right: 16px;
}

/* Hack to make this look the same as the App Store button -- we use the same button
   image but then we put this inner div with a black background to show the text */
.try-it-now-button-inner {
  background: black;
  position: absolute;
  top: 5%;
  left: 5%;
  right: 5%;
  bottom: 5%;
  border-radius: 8px;
  overflow: hidden;
  font: 16px HelveticaNeue, Helvetica, Arial, sans-serif;
  color: white;
  text-decoration: none;
  line-height: 44px;
  text-align: center;
}

#profile-pic-container {
  position: relative;
  margin-left: 16px;
  width: 32px;
  height: 32px;
  text-align: right;
  cursor: pointer;
  display: inline-block; /* Ensure it's a block element for positioning context */
  padding-bottom: 10px; /* Prevent collapse when hovering off */
}

#profile-pic {
  width: 32px;
  height: 32px;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
}

#notifications-window {
  background: white;
  position: absolute;
  z-index: 3;
  top: 75px;
  right: 70px;
  width: 350px;
  border-radius: 8px;
  max-height: 400px;
  overflow-x: hidden;
  overflow-y: auto;

  display: flex;
  flex-direction: column;
}

.notification-cell {
  display: flex;
  flex-direction: row;
  padding: 8px;
  align-items: center;
  min-height: 56px;
  overflow: hidden;
  text-decoration: none;
}

.notification-cell.unread {
  background: rgb(230, 232, 255);
}

.notification-img-left {
  width: 32px;
  height: 32px;
  border-radius: 16px;
}

.notification-text {
  flex-grow: 1;
  max-width: 260px;
  color: #888;
  padding: 8px;
  overflow: hidden;
}

.notification-img-right {
  width: 32px;
  height: 32px;
  border-radius: 4px;
}


#explore-categories-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.explore-categories-bar .category {
  opacity: 0;
  animation: blurFadeIn 0.3s ease forwards;
}

.category {
  display: flex;
  padding: 7px 13px;
  align-items: center;
  gap: 11px;
  border-radius: 10px;
  background: var(--card-bg);
  box-shadow: 0px 8px 11px 2px var(--shadow-color);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease, opacity 0.5s ease;
  position: relative;
  overflow: hidden;
  outline: none;
  /* Remove focus outline */
  -webkit-tap-highlight-color: transparent;
  /* Remove tap highlight on mobile */
  /* opacity: 0; */
  border: 1px solid transparent;
}

body.dark-mode .category {
  border: 1px solid #494949;
  box-shadow: none;
}

.category:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 15px var(--shadow-color);
}

.category:active {
  transform: translateY(2px) scale(0.97);
  box-shadow: 0 4px 6px var(--shadow-color);
}

.category::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.category .icon {
  width: 16px;
  height: 16px;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.category.loaded {
  opacity: 1;
}

.explore-categories-bar .category {
  opacity: 0;
  animation: blurFadeIn 0.3s ease forwards;
}

.active-category{
  border: 1px solid var(--text-color);
}

body.dark-mode .active-category {
  border: 1px solid var(--text-color);
}
.sorry-android {
  font-size: 14px;
  margin-top: 32px;
}

/* make categories horizontal scroll on phones */
@media (max-width: 700px) {

  #explore-tab{
    margin-top: 80px;
    padding-left: 16px;
    padding-right: 16px;
  }

  #explore-categories-bar {
    margin-bottom: 12px;
    overflow-x: auto;
    white-space: nowrap;
    flex-wrap: nowrap;
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
  }

  #explore-categories-bar::-webkit-scrollbar {
    display: none;  /* Safari and Chrome */
  }

  .category {
    overflow: visible;
    padding: 7px 10px;
    box-shadow: none;
  }

  .category:hover{
    transform: none;
  }

}

a {
  text-decoration: none;
  color: inherit;
}

/* Added animations and hover effects */
@keyframes blurFadeIn {
  from {
    opacity: 0;
    filter: blur(8px);
  }

  to {
    opacity: 1;
    filter: blur(0px);
  }
}

/* Dark mode toggle - WIP TODO */
.theme-toggle {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background: var(--card-bg);
  color: var(--text-color);
  border: none;
  box-shadow: 0px 8px 11px 2px var(--shadow-color);
  cursor: pointer;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color var(--transition-time);
}

.theme-toggle:hover {
  transform: translateY(-5px) scale(1.1);
  box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.2);
}

.theme-toggle:active {
  transform: translateY(2px) scale(0.95);
}

.theme-toggle svg {
  width: 24px;
  height: 24px;
  stroke: var(--text-color);
  fill: none;
  stroke-width: 2;
  transition: stroke var(--transition-time), transform 0.3s ease;
}

.theme-toggle:hover svg {
  transform: rotate(15deg);
}

body.dark-mode .theme-toggle .moon {
  display: none;
}

body:not(.dark-mode) .theme-toggle .sun {
  display: none;
}

.search-hr{
  width: 100%;
  border: none;
  border-top: 1px solid color-mix(in srgb, var(--text-color) 20%, transparent 80%); /* Set border opacity to 0.3 of var(--text-color) */
  margin: 6px 0;
}

/* Switch toggle for unlisted rooms */
.switch {
 --button-width: 3em;
 --button-height: 1.5em;
 --toggle-diameter: 1em;
 --button-toggle-offset: calc((var(--button-height) - var(--toggle-diameter)) / 2);
 --toggle-shadow-offset: 10px;
 --toggle-wider: 3em;
 --color-grey: #cccccc;
 --color-green: #242424;
 display: flex; /* Make the switch itself a flex container */
 align-items: center; /* Center the slider vertically within the switch */
}

.slider {
 display: inline-block;
 width: var(--button-width);
 height: var(--button-height);
 background-color: var(--card-bg);
 border-radius: calc(var(--button-height) / 2);
 position: relative;
 transition: 0.3s all ease-in-out;
}

.slider::after {
 content: "";
 display: inline-block;
 width: var(--toggle-diameter);
 height: var(--toggle-diameter);
 background-color: var(--text-color);
 border-radius: calc(var(--toggle-diameter) / 2);
 position: absolute;
 top: var(--button-toggle-offset);
 transform: translateX(var(--button-toggle-offset));
 box-shadow: var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
 transition: 0.3s all ease-in-out;
}

.switch input[type="checkbox"]:checked + .slider::after {
 transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));
 box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
}

.switch input[type="checkbox"] {
 display: none;
}

.switch input[type="checkbox"]:active + .slider::after {
 width: var(--toggle-wider);
}

.switch input[type="checkbox"]:checked:active + .slider::after {
 transform: translateX(calc(var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)));
}

.profile-visibility-toggle {
  display: flex;
  align-items: center; /* This already centers items vertically */
  justify-content: center; /* Add this to fully center the content */
  margin-right: 16px;
  gap: 8px;
  position: absolute;
  right: 180px; /* Position to the left of the sort controls */
  height: 100%; /* Make sure the div takes up the full height of its container */
}

/* Add this rule to ensure hidden attribute works properly */
.profile-visibility-toggle[hidden] {
  display: none !important;
}

.profile-visibility-label {
  color: var(--stats-color);
  font-size: 14px;
  margin-bottom: 0; /* Remove any bottom margin that might affect alignment */
  line-height: 1; /* Normalize line-height to help with vertical centering */
}

@media (max-width: 700px) {
  .profile-visibility-toggle {
    display: none;
  }
}

/* Profile dropdown menu */
.profile-dropdown {
  position: absolute; /* Will be positioned by JavaScript */
  background-color: var(--card-bg);
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  width: 180px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  z-index: 1000;
  overflow: hidden;
}

/* Remove the arrow/triangle */
.profile-dropdown::before {
  display: none;
}

.profile-dropdown.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-item {
  display: block;
  padding: 12px 16px;
  color: var(--text-color);
  text-decoration: none;
  transition: background-color 0.2s;
  text-align: left;
  font-size: 14px;
}

.dropdown-item:hover {
  background-color: color-mix(in srgb, var(--text-color) 10%, transparent);
}

.dropdown-item i {
  margin-right: 8px;
  width: 16px;
  text-align: center;
}

/* Follow Modal Styles */
.follow-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.follow-modal[hidden] {
  display: none !important;
}

.follow-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.follow-modal-content {
  position: relative;
  width: 70vw;
  height: 70vh;
  background: var(--card-bg);
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.follow-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--text-color) 15%, transparent);
}

.follow-modal-header h3 {
  margin: 0;
  font: bold 20px HelveticaNeue, Helvetica, Arial, sans-serif;
  color: var(--text-color);
}

.follow-modal-close {
  background: none;
  border: none;
  font-size: 28px;
  color: var(--text-color);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s ease;
  line-height: 1;
  padding: 0;
}

.follow-modal-close:hover {
  opacity: 1;
}

.follow-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 0;
}

.follow-user-row {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  text-decoration: none;
  color: var(--text-color);
  transition: background 0.2s ease;
}

.follow-user-row:hover {
  background: color-mix(in srgb, var(--text-color) 8%, transparent);
}

.follow-user-pic {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 16px;
}

.follow-user-uname {
  font: 16px HelveticaNeue, Helvetica, Arial, sans-serif;
  color: var(--text-color);
}

.follow-modal-loading,
.follow-modal-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  color: var(--stats-color);
  font-size: 16px;
}

@media (max-width: 700px) {
  .follow-modal-content {
    width: 90vw;
    height: 80vh;
  }

  .follow-user-row {
    padding: 10px 16px;
  }

  .follow-user-pic {
    width: 40px;
    height: 40px;
    margin-right: 12px;
  }

  .follow-user-uname {
    font-size: 14px;
  }
}