/* use 370x660 in the browser to simulate phones */
@font-face {
  font-family: Poppins-semibold;
  src: url(fonts/poppins/Poppins-SemiBold.ttf);
}
@font-face {
  font-family: Poppins-medium;
  src: url(fonts/poppins/Poppins-Medium.ttf);
}

@font-face {
  font-family: Poppins-regular;
  src: url(fonts/poppins/Poppins-Regular.ttf);
}
/* @font-face {
  font-family: Poppins-light;
  src: url(fonts/poppins/Poppins-Light.ttf);
} */
@font-face {
  font-family: Poppins-light;
  src: url(fonts/sans/Google-Sans-Font-main/Product-Sans-Font/Product\ Sans\ Regular.ttf);
}
@font-face {
  font-family: Poppins-bold;
  src: url(fonts/sans/Google-Sans-Font-main/Product-Sans-Font/Product\ Sans\ Bold.ttf);
}

@font-face {
  font-family: Poppins-thin;
  src: url(fonts/poppins/Poppins-Thin.ttf);
}
@font-face {
  font-family: Circular-medium;
  src: url(fonts/circular/circular-std-medium-500.ttf);
}

.alert {
  background-color: rgb(18, 18, 18);
  opacity: 1; /* Fully opaque */
  /* Optional: remove blur if it's applied */
  backdrop-filter: none;
}

.scroll-locked {
  overflow: hidden;
}

html {
  scrollbar-width: thin; /* Makes the scrollbar thin */
  scrollbar-color: #555 #222; /* Sets thumb and track color */
}

/* For Chrome, Safari, Edge, and other WebKit Browsers */

/* Sets the width of the entire scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

/* The "track" or background of the scrollbar */
::-webkit-scrollbar-track {
  background: #222; /* A dark grey background */
}

/* The draggable "thumb" or handle */
::-webkit-scrollbar-thumb {
  background-color: #555; /* A lighter grey for the handle */
  border-radius: 4px; /* Rounded corners */
  border: 2px solid #222; /* Creates a padding effect */
}

/* The thumb style on hover */
::-webkit-scrollbar-thumb:hover {
  background-color: #777;
}

body {
  margin: 0;
  padding: 0;
  background-color: rgb(18, 18, 18);
  font-family: Poppins-light;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.loading-active .main-container {
  display: none;
}

#session-image-cropper-modal .cropper-bg,
#pfp-cropper-modal .cropper-bg {
  background-image: none;
  background-color: black;
}

.session-user-link {
  text-decoration: none;
  color: inherit;
}

#login-img-container {
  display: none;
}
#signup-img-container {
  display: none;
}

.white-logo-button {
  padding: 6px;
  height: 56px;
  width: 56px;
  cursor: pointer;
}
.blue-button {
  height: 40px;
  width: 80px;
  background-color: rgb(24, 131, 220);
  border: none;
  border-radius: 5px;
  color: rgb(234, 234, 234);
  font-size: 18px;
  font-family: Poppins-medium;
  transition: 0.1s ease-in-out;
}
.blue-button:active {
  background-color: #1366aa;
  border-radius: 2px;
}

#lp-container {
  background-color: rgb(18, 18, 18);
  /* height: 100vh; */
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 100vh;
}
#lp-logo {
  height: 45px;
  width: 95px;
  padding-top: 12px;
  padding-bottom: 12px;
}
#lp-start-button {
  margin-top: 10px;
  width: 90px;
  font-size: 19px;
  height: 40px;
  box-shadow: 0 0 15px #1883dc80;
  margin-bottom: 30px;
  transition: 0.2s ease-in-out;
  cursor: pointer;
}
#lp-start-button:hover {
  background-color: #2a95e8; /* Slightly brighten the button */
}

/* When the button is clicked, it feels better to remove the glow */
#lp-start-button:active {
  background-color: #1366aa;
  box-shadow: none; /* Temporarily remove glow on click */
}
#get-started-button {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 50px;
  width: 140px;
  font-size: 18px;
  height: 40px;
  box-shadow: 0 0 15px #1883dc80;
  /* margin-bottom: 10px; */
  transition: 0.2s ease-in-out;
  cursor: pointer;
}
#get-started-button:hover {
  background-color: #2a95e8; /* Slightly brighten the button */
}
footer {
  color: rgb(112, 112, 112);
  text-align: center;
  font-size: 12px;
  margin-bottom: 10px;
}

#the-1 {
  color: rgb(133, 133, 133);
  text-align: center;
  margin-bottom: -20px;
  font-size: 14px;
}
#stars-container {
  width: 100%;
  margin-bottom: 40px;
}
#lp-stars-img {
  width: 190px;

  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 50px;
  margin-bottom: 50px;
}

/* When the button is clicked, it feels better to remove the glow */
#get-started-button:active {
  background-color: #1366aa;
  box-shadow: none; /* Temporarily remove glow on click */
}
#lp-info-container {
  margin-top: 30px;
}
#ipad-and-phone-img {
  width: 90%;
}
.lp-img-container {
  width: fit-content;
  height: fit-content;
  margin-top: 30px;
}
.lp-img-container img {
  width: 60%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.info-container-heading {
  font-size: 34px;
  color: rgb(239, 239, 239);
  margin-left: 20px;
}
.lp-info-div {
  background-color: transparent;
  max-width: 482px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.info-container-words {
  color: rgb(186, 186, 186);
  font-size: 18px;
  margin-left: 20px;
  max-width: 330px;
  margin-top: -15px;
}
.lp-info-div {
  margin-top: 70px;
}
#lp-nav-login-real-button {
  margin-right: 10px;
  color: #1883dc;
  font-size: 17px;
}
#macbook-container img {
  width: 93%;
}

.nav-bar {
  background-color: rgb(18, 18, 18);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgb(68, 68, 68);
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 100;
}
#lp-nav {
  background-color: rgb(18, 18, 18);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgb(68, 68, 68);
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 100;
}
#login-nav {
  background-color: rgb(18, 18, 18);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgb(68, 68, 68);
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 100;
}
#signup-nav {
  background-color: rgb(18, 18, 18);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgb(68, 68, 68);
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 100;
}
#forgot-password-nav {
  background-color: rgb(18, 18, 18);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgb(68, 68, 68);
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 100;
}
#password-reset-nav {
  background-color: rgb(18, 18, 18);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgb(68, 68, 68);
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 100;
}

.white-logo-button {
  margin-left: 10px;
}

#lp-nav-login-button {
  margin-right: 20px;
  width: 100px;
  font-size: 17px;
  cursor: pointer;
  transition: 0.2s ease-in-out;
}
#lp-nav-login-button:hover {
  background-color: #1472bf;
}

#lp-start-container {
  background-color: rgba(23, 23, 23, 0);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
}

#lp-slogan {
  margin-top: 100px;
  color: rgb(230, 230, 230);
  font-size: 31px;
  text-align: center;
  font-family: Poppins-light;
  /* font-weight: 14px; */
}
#lp-introduction {
  font-size: 17px;
  text-align: center;
  color: rgb(226, 226, 226);
  max-width: 330px;
}

#lp-get-started-heading {
  margin-top: 30px;
  color: rgb(176, 176, 176);
  text-align: center;
  font-size: 15px;
}

#temp-phones {
  display: block;
}

.top-heading {
  color: rgb(223, 223, 223);
  margin-top: 100px;
  text-align: center;
  font-size: 32px;
  font-family: Poppins-semibold;
}
.signup-text-message {
  color: rgb(241, 241, 241);
  text-align: center;
  font-family: Poppins-thin;
  font-size: 14px;
}
.details-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.details-input {
  height: 40px;
  width: 250px;
  border-radius: 8px;
  border: 1px solid rgb(83, 83, 83);
  background-color: rgb(26, 26, 26);
  color: rgb(233, 233, 233);
  font-size: 17px;
  padding-left: 20px;
  transition: box-shadow 0.25s ease;
}

.details-input:focus {
  outline: none; /* removes default white flash */
  border: 1px solid #1883dc; /* inner blue outline */
  box-shadow: 0 0 0 2px #1883dc, 0 0 6px 3px rgba(24, 131, 220, 0.3);
}
.details-input-headers {
  margin-right: 220px;
  color: rgb(230, 230, 230);
  margin-bottom: 0;
  font-family: Poppins-medium;
  font-size: 15px;
}
.details-error {
  color: rgb(198, 0, 0);
  margin-top: 3px;
  margin-bottom: 0;
  font-size: 14px;
  font-family: Poppins-medium;
  text-align: left;
  display: none;
}
#email-error {
  margin-left: -155px;
}
#email-taken-error {
  margin-left: -175px;
}
#username-error {
  margin-left: -145px;
}
#password-error {
  margin-left: -55px;
}
#confirm-password-error {
  margin-left: -90px;
}
#email-or-username-error {
  margin-left: -72px;
}
#incorrect-password-error {
  margin-left: -125px;
}

#username-input-header {
  margin-right: 182px;
}
#password-input-header {
  margin-right: 190px;
}
#confirm-password-input-header {
  margin-right: 125px;
}

#login-email-or-username-header {
  margin-right: 120px;
}

#confirm-signup-button {
  margin-top: 20px;
  width: 270px;
  margin-bottom: 15px;
  cursor: pointer;
}
#confirm-login-button {
  margin-top: 20px;
  width: 270px;
  margin-bottom: 15px;
  cursor: pointer;
}

.sentence-container-hyperlinks {
  margin-top: 7px;
  margin-bottom: 50px;
}

.login-or-forgot-password {
  color: rgb(216, 216, 216);
  font-size: 13px;
  display: inline;
  margin-right: 3px;
}
.hyperlinks {
  color: #2094f3;
  font-size: 15px;
}
#new-to-lock-in {
  margin-top: -45px;
}

#forgot-password-details-error {
  margin-left: -175px;
}
#confirm-forgot-password-button {
  width: 275px;
  margin-top: 20px;
  margin-bottom: 15px;
}

#password-reset-input-password-header {
  margin-right: 183px;
}
#password-reset-input-confirm-header {
  margin-right: 120px;
}
#reset-password-button {
  margin-top: 20px;
  width: 270px;
  margin-bottom: 15px;
}
.container-for-profile-menu {
  /* background-color: rgb(46, 42, 42); */

  /* position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-52.5%); */
  transform: translateX(-15px);
  margin-left: auto;
  margin-right: auto;
  overflow-y: auto;
  width: 350px;
  padding-left: 30px;
  padding-bottom: 70px;
  /* z-index: 50; */
}

.profile-picture {
  margin-top: 100px;
  height: 110px;
  width: 110px;
  border-radius: 50%;
  margin-right: 20px;
}
.username-element {
  color: rgb(228, 228, 228);
  margin-top: 90px;
  font-size: 21px;
  margin-bottom: 0px;
}

.profile-edit-container {
  display: flex;
  align-items: center;
  margin-left: 20px;
}

#edit-pencil {
  position: absolute;
  height: 15px;
  width: 15px;
  top: 175px;
  cursor: pointer;
  transition: opacity 0.1s ease-in-out;
}
#edit-pencil:hover {
  opacity: 0.75;
}

.information-container {
  display: flex;
  align-items: center;
}
.information-container div {
  margin-left: 20px;
  margin-top: 15px;
}
.information-container h4 {
  margin: 0;
  font-size: 14px;
  margin-top: 5px;
}
.hours-today-container {
  margin-left: 20px;
  text-align: center;
}
.followers-container {
  text-align: center;
}
.following-container {
  text-align: center;
}

.profile-information-heading {
  color: rgb(167, 167, 167);
  font-weight: 20;
}
.profile-information {
  color: rgb(232, 232, 232);
}

#followers-information {
  cursor: pointer;
}
#following-information {
  cursor: pointer;
}

.profile-top-information {
  padding-bottom: 10px;
  border-bottom: gray 1px solid;
}

.statistics-container {
  /* background-color: rgb(51, 48, 48); */
  padding-left: 20px;
  padding-top: 10px;
  height: fit-content;
  padding-bottom: 25px;
  border-bottom: gray 1px solid;
}
.statistics-header-container {
  display: flex;
  align-items: center;
  gap: 20px;
}

.statistics-header {
  color: rgb(230, 230, 230);
  font-size: 23px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 300;
}

/* Custom dropdown */

.custom-dropdown {
  position: relative; /* This is crucial for positioning the menu */
  width: 150px;
  color: #f2f2f7;
  z-index: 99;
  margin-left: 50px;
}

/* --- The Button You Click --- */
.dropdown-button {
  background-color: #2c2c2e;
  border: 1px solid #3a3a3c;
  border-radius: 8px;
  padding: 10px 15px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: 16px;
  color: inherit;
}

.dropdown-button .arrow {
  width: 12px;
  height: 12px;
  transition: transform 0.2s ease;
}

/* Rotate arrow when dropdown is open */
.dropdown-button.open .arrow {
  transform: rotate(180deg);
}

/* --- The Menu That Appears --- */
.dropdown-menu {
  position: absolute; /* Positioned relative to the .custom-dropdown container */
  top: calc(100% + 5px); /* Place it below the button with a 5px gap */
  left: 0;
  right: 0;
  background-color: #2c2c2e;
  border: 1px solid #3a3a3c;
  border-radius: 8px;
  list-style: none; /* Remove default bullet points */
  padding: 5px;
  margin: 0;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.custom-dropdown .arrow {
  flex-shrink: 0;
}

/* --- Show the menu when it's open --- */
.dropdown-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* --- The Options Inside the Menu --- */
.dropdown-option {
  padding: 10px 15px;
  cursor: pointer;
  border-radius: 5px;
  font-size: 16px;
  transition: background-color 0.2s ease;
}

.dropdown-option:hover {
  background-color: #3a3a3c;
}

/* The blue highlight for the selected item */
.dropdown-option.active {
  background-color: #007aff;
  color: white;
}

/* End of dropdown */

#breakdown-container {
  /* background-color: rgb(26, 26, 26); */
  z-index: 100;
}
.breakdown-heading-container {
  display: flex;
  align-items: center;
}
.breakdown-heading {
  color: rgb(163, 163, 163);
  font-size: 17px;
  margin-right: -5px;
}
.breakdown-information {
  color: rgb(231, 231, 231);
  margin-left: 10px;
  display: flex;
}

.progress-bar {
  height: 20px;
  /* width: 300px; */
  width: 0%;
  border-radius: 4px;
  margin-top: -5px;
  margin-bottom: 5px;
  max-width: 95%;
  transition: 0.2s ease-in-out;
  background-color: #007aff;
}
.progress-bar-glowing {
  box-shadow: 0 0 20px var(--glow-color, #0078ff80);
}

#profile-sessions-container {
  padding-right: 10px;
}

/* follow buttons */

#follow-button {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 10px;
  height: 35px;
  width: 320px;
  background-color: #007aff;
  border: none;
  border-radius: 5px;
  color: rgb(234, 234, 234);
  font-size: 16px;
  font-family: Poppins-medium;
  cursor: pointer;
  transition: 0.1s ease-in-out;
}
#follow-button:hover {
  background-color: #0368d4;
  border-radius: 1px;
}
#follow-button:active {
  background-color: #0053ac;
  border-radius: 2px;
  color: rgb(180, 180, 180);
}

#following-button {
  display: none;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 10px;
  height: 35px;
  width: 320px;
  background-color: rgba(44, 44, 46, 0);
  border: 1px rgba(128, 128, 128, 0.446) solid;
  color: rgb(227, 227, 227);
  border-radius: 5px;
  font-size: 16px;
  font-family: Poppins-medium;
  cursor: pointer;
  transition: 0.1s ease-in-out;
}
#following-button:hover {
  border-radius: 1px;
  background-color: rgb(30, 30, 30);
}
#following-button:active {
  border-radius: 2px;
  color: rgb(206, 206, 206);
}

#edit-profile-modal-background {
  z-index: 9999;
  background-color: rgb(18, 18, 18);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow-y: auto;
}

#edit-profile-modal-content {
  overflow-x: hidden;
  background-color: rgb(18, 18, 18);
  height: 100%;
  min-height: fit-content;
  display: flex;
  flex-direction: column;
}

#edit-profile-nav {
  background-color: rgb(34, 34, 34);
  width: 100%;
  padding: 15px 20px;
  box-sizing: border-box;
  flex-shrink: 0;
  position: fixed;

  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  margin-bottom: 30px;
  z-index: 99;
}

#edit-profile-nav-title {
  color: rgb(179, 179, 179);
  margin: 0;
  margin-left: 12px;
}

#edit-profile-pfp {
  object-fit: cover;
  margin: 0;
  margin-bottom: 20px;
  height: 135px;
  width: 135px;
}
#edit-profile-back-button {
  background: none;
  border: none;
  padding: 0;
  color: rgb(237, 237, 237);
  cursor: pointer;
  transition: opacity 0.2s ease-in-out;
  font-size: 25px;
}
.blue-font-button {
  background: none;
  border: none;
  padding: 0;
  color: #007aff;
  cursor: pointer;
  transition: opacity 0.2s ease-in-out;
  font-size: 20px;
}
#edit-profile-back-button:hover,
.blue-font-button:hover {
  opacity: 0.75;
}

#pfp-input {
  display: none;
}
#label-for-change-pfp {
  color: #007aff;
  cursor: pointer;
  font-family: Poppins-medium;
  transition: opacity 0.2s ease-in-out;
}
#label-for-change-pfp:hover {
  opacity: 0.75;
}

#change-pfp-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-bottom: 1px solid rgb(68, 68, 68);
  padding-bottom: 20px;
  width: 350px;
}

#edit-profile-content {
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin-top: 100px;
}

#change-username-container {
  background-color: rgb(18, 18, 18);
  margin-top: 10px;
  min-width: 301px;
  margin-bottom: 10px;
}
#change-username-header {
  padding: 0;
  color: rgb(225, 225, 225);
  font-size: 18px;
  margin-left: 30px;
  font-weight: 500;
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
}
.basic-input {
  background-color: rgb(18, 18, 18);
  border: none;
  font-size: 18px;
  width: 140px;
  margin-left: 7px;
  color: rgb(223, 223, 223);
  padding-left: 5px;
  border-bottom: 1px solid rgb(68, 68, 68);
  border-radius: 0px;
}
#new-username-input:focus {
  outline: none;
  border-bottom: 1px solid #007aff;
}

#profile-options-buttons-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-bottom: 1px solid rgb(68, 68, 68);
  padding-bottom: 10px;
  margin-bottom: 10px;
  width: 350px;
}

#profile-options-red-buttons-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 10px;
  width: 350px;
}
.profile-options-button {
  /* display: none; */
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;

  height: 38px;
  width: 300px;
  background-color: rgba(44, 44, 46, 0);
  border: 1px rgba(128, 128, 128, 0.446) solid;
  color: rgb(227, 227, 227);
  border-radius: 6px;
  font-size: 16px;
  font-family: Poppins-medium;
  cursor: pointer;
  transition: 0.1s ease-in-out;
}
.profile-options-button:hover {
  border-radius: 1px;
  background-color: rgb(30, 30, 30);
}
.profile-options-button:active {
  border-radius: 2px;
  color: rgb(206, 206, 206);
}
#extra-options-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-bottom: 1px solid rgb(68, 68, 68);
  padding-bottom: 10px;
  margin-bottom: 10px;
  width: 350px;
  margin-top: 10px;
}

#log-out-button {
  /* display: none; */
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;

  height: 38px;
  width: 300px;
  background-color: rgba(44, 44, 46, 0);
  border: 1px rgba(255, 30, 30, 0.446) solid;
  color: rgba(255, 30, 30, 0.652);
  border-radius: 6px;
  font-size: 16px;
  font-family: Poppins-medium;
  cursor: pointer;
  transition: 0.1s ease-in-out;
}
#log-out-button:hover {
  border-radius: 1px;
  background-color: rgba(37, 11, 11, 0.251);
  color: rgba(255, 0, 0, 0.484);
}
#log-out-button:active {
  border-radius: 2;
}

.red-button {
  /* display: none; */
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;

  height: 38px;
  width: 300px;
  background-color: rgba(210, 0, 0, 0.801);
  border: 1px rgba(255, 30, 30, 0.446) solid;
  color: rgb(231, 231, 231);
  border-radius: 6px;
  font-size: 16px;
  font-family: Poppins-medium;
  cursor: pointer;
  border-radius: 5px;
  transition: 0.1s ease-in-out;
}
.red-button:hover {
  border-radius: 1px;
  background-color: rgba(210, 0, 0, 0.578);
}
.red-button:active {
  border-radius: 2;
  color: rgb(205, 205, 205);
}

#change-password-container {
  margin-top: -10px;
  padding-left: 20px;
  display: none;
}
.password-header {
  display: inline-block;
  padding: 0;
  color: rgb(225, 225, 225);
  font-size: 17px;
  font-weight: 500;
  font-family: Arial, Helvetica, sans-serif;
}
#new-password-header {
  margin-left: 15px;
  font-size: 17px;
}
#confirm-password-header {
  margin-left: 5px;
  font-size: 17px;
}

#check-new-password-button {
  margin-left: 132px;
}

#new-password-input {
  width: 110px;
}
#confirm-new-password-input {
  width: 110px;
  margin-left: 15px;
}
#new-password-input:focus {
  outline: none;
  border-bottom: 1px solid #007aff;
}
#confirm-new-password-input:focus {
  outline: none;
  border-bottom: 1px solid #007aff;
}

#delete-account-confirmation {
  display: none;
  background-color: #222222;
  color: rgb(225, 225, 225);
  height: 130px;
  width: 330px;
  font-size: 16px;
  z-index: 1000002;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-160px, -150px);
  border-radius: 7px;
}
#delete-account-confirmation p {
  margin-left: 15px;
  font-family: Poppins-light;
  font-size: 19px;
}

#confirm-delete-account {
  width: 120px;
  margin-left: 40px;
  margin-right: 20px;
  height: 40px;
  font-size: 17px;
}

.modal-blur-backdrop {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #00000052;
}
#profile-modal-backdrop {
  z-index: 100000;
}

#pfp-cropper-modal {
  display: none;
  background-color: #222222;
  color: rgb(225, 225, 225);
  height: fit-content;
  width: 320px;
  font-size: 16px;
  z-index: 100001; /* Give it a HIGHER z-index than the backdrop */
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translate(-160px, 0);
  border-radius: 7px;
}
#pfp-cropper-modal h2 {
  margin-left: 18px;
}

#crop-and-upload-pfp {
  margin-left: 50%;
  transform: translateX(-27px);
  margin-bottom: 10px;
}
#crop-image-container {
  max-height: 60vh;
  margin-bottom: 15px;
}
#crop-image-container img {
  max-width: 100%;
}

#followers-menu {
  display: none;
}
#following-menu {
  display: none;
}

.horizontal-line {
  border: none;
  height: 1px;
  background-color: rgba(138, 138, 138, 0.132);
  width: 100%;
  margin-bottom: -5px;
}

.ff-list {
  flex: 1 1 0;

  overflow-y: auto; /* Now this will work correctly */

  /* All other properties are fine */
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: -10px;
  box-sizing: border-box;
  margin-top: 5px;
}

.ff-header-container {
  height: 60px;
}

.ff-menu {
  display: none; /* It is hidden by default */
  flex-direction: column; /* This will apply when display is set to 'flex' by JS */

  /* All your other properties are correct */
  background-color: #161616;
  color: rgb(225, 225, 225);
  height: 70vh;
  max-height: 521px;
  width: 320px;
  font-size: 16px;
  z-index: 1000001;
  position: fixed;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 7px;
  border: 1px solid rgba(104, 104, 104, 0.694);
  overflow: hidden;
}
.ff-menu h3 {
  margin-left: 20px;
  font-size: 22px;
  display: inline-block;
}

.close-ff-button {
  text-decoration: none;
  background-color: rgba(255, 255, 255, 0);
  border: none;
  font-size: 32px;
  color: rgb(236, 236, 236);
  position: relative;
  left: 150px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  cursor: pointer;
  transition: opacity 0.2s ease-in-out;
}
.close-ff-button:hover {
  /* background-color: rgba(62, 62, 62, 0.36); */
  opacity: 0.65;
}

.ff-item {
  /* background-color: #363636; */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ff-item-user-info {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-grow: 1;
  min-width: 0;
}

.ff-username {
  font-size: 18px;
  margin-left: -6px;
  font-family: Poppins-light;
  font-weight: 200;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ff-follow-button {
  /* display: none; */
  height: 38px;
  width: 80px;
  background-color: #1883dc;
  border: none;
  border-radius: 8px;
  color: rgb(234, 234, 234);
  font-size: 15px;
  font-family: Poppins-medium;
  margin-right: 0px;
  cursor: pointer;
  transition: 0.1s ease-in-out;
}
.ff-follow-button:hover {
  background-color: #1471bd;
  border-radius: 6px;
}

.ff-following-button {
  display: none;

  height: 40px;
  width: 95px;
  background-color: rgba(44, 44, 46, 0);
  border: 1px rgba(128, 128, 128, 0.446) solid;
  border-radius: 8px;
  color: rgb(234, 234, 234);
  font-size: 15px;
  font-family: Poppins-medium;
  margin-right: 0px;
  cursor: pointer;
  transition: 0.1s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ff-following-button:hover {
  background-color: rgba(30, 30, 30, 0.657);
  border-radius: 6px;
}

.ff-item-pfp {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  cursor: pointer;
  margin-right: 0;
}
#close-following-button {
  left: 99px;
  margin-left: 30px;
}
#close-followers-button {
  left: 99px;
  margin-left: 30px;
}

#profile-page-modal-backdrop {
  z-index: 10000;
  background-color: #00000052;
}
#groups-page-modal-backdrop {
  z-index: 10000;
  background-color: #00000052;
}
.high-modal-backdrop {
  z-index: 1000899;
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #00000052;
}

.comment-days-ago {
  color: rgb(91, 91, 91);
  margin-left: 5px;
  font-size: 13px;
}
#index-logo {
  height: 52px;
  width: 52px;
  cursor: pointer;
}
#index-nav {
  height: 75px;
  z-index: 60;
}

#main-sessions-container {
  margin-top: 75px;
}

.navigation-menu {
  transform: translateX(-100%);
  visibility: hidden;

  /* display: none; */
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 250px;
  background-color: rgb(22, 22, 22);
  border-right: 1px rgba(128, 128, 128, 0.446) solid;
  z-index: 10001;
  transition: 0.15s ease-in-out;
}
.navigation-menu.is-open {
  transform: translateX(0);
  visibility: visible;
}
.navigation-logo {
  cursor: pointer;
  height: 50px;
  width: 110px;
  padding: 10px;
  padding-left: 15px;
  padding-top: 15px;
}

.navigation-menu-input:focus {
  outline: none; /* removes default white flash */
}
.close-navigation-menu-button {
  text-decoration: none;
  background-color: rgba(255, 255, 255, 0);
  border: none;
  font-size: 32px;
  color: rgb(236, 236, 236);
  position: relative;
  top: -35px;
  left: 50px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  cursor: pointer;
  transition: opacity 0.1s ease-in-out;
}
.close-navigation-menu-button:hover {
  opacity: 0.75;
}

.nav-menu-button {
  text-align: left;
  padding-left: 25px;
  margin-left: 10px;
  width: 225px;
  height: 50px;
  margin-top: 15px;
  font-size: 20px;
  background-color: rgba(220, 220, 220, 0);
  outline: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: rgb(198, 198, 198);
  transition: 0.1s ease-in-out;
}
.nav-menu-button:hover {
  background-color: rgb(26, 26, 26);
}
.nav-menu-button-title {
  position: relative;
  top: -4px;
  margin-left: 3px;
}
#profile-nav-menu-title {
  top: -8px;
  margin-left: 1px;
}
#index-nav-profile-button,
#profile-nav-profile-button,
#stats-nav-profile-button {
  padding-top: 5px;
  padding-left: 20px;
  margin-left: 10px;
}
#profile-nav-profile-button {
  padding-top: 5px;
  padding-left: 20px;
  margin-left: 10px;
}
#stats-nav-profile-button {
  padding-top: 5px;
  padding-left: 20px;
  margin-left: 10px;
}
#index-nav-home-button {
  margin-top: 15px;
}
#index-nav-groups-button #profile-nav-groups-button,
#stats-nav-groups-button {
  padding-top: 6px;
  padding-left: 20px;
  margin-left: 10px;
  display: flex;
  align-items: center;
}
#index-nav-groups-button span,
#profile-nav-groups-button span,
#stats-nav-groups-button span {
  margin-top: 7px;
  margin-left: 4px;
}
#index-nav-groups-button img,
#profile-nav-groups-button img,
#stats-nav-groups-button img {
  margin-left: -1px;
}
#profile-nav-groups-button {
  padding-top: 6px;
  padding-left: 20px;
  margin-left: 10px;
  display: flex;
  align-items: center;
}
#profile-nav-groups-button span {
  margin-top: 7px;
  margin-left: 4px;
}
#profile-nav-groups-button img {
  margin-left: -1px;
}
/* --- GROUPS BUTTONS (All Pages) --- */
#index-nav-groups-button,
#profile-nav-groups-button,
#groups-nav-groups-button,
#stats-nav-groups-button {
  padding-top: 6px;
  padding-left: 20px;
  margin-left: 10px;
  display: flex;
  align-items: center;
}

/* --- GROUPS SPAN & IMG (All Pages) --- */
#index-nav-groups-button span,
#profile-nav-groups-button span,
#groups-nav-groups-button span,
#stats-nav-groups-button span {
  margin-top: 7px;
  margin-left: 4px;
}

#index-nav-groups-button img,
#profile-nav-groups-button img,
#groups-nav-groups-button img,
#stats-nav-groups-button img {
  margin-left: -1px;
}

/* --- STATS BUTTONS (All Pages) --- */
#index-nav-stats-button,
#profile-nav-stats-button,
#groups-nav-stats-button,
#stats-nav-stats-button {
  padding-top: 5px;
  padding-left: 20px;
  margin-left: 10px;
  display: flex;
  align-items: center;
}

/* --- STATS SPAN (All Pages) --- */
#index-nav-stats-button span,
#profile-nav-stats-button span,
#groups-nav-stats-button span,
#stats-nav-stats-button span {
  position: relative;
  top: -8px;
}

.feed-filter-container {
  opacity: 0;
  visibility: hidden;
}

/* A class we will add with JavaScript to make it visible */
.feed-filter-container.visible {
  opacity: 1;
  visibility: visible;
}

.navigation-user-display {
  height: 70px;
  width: 100%;
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
  flex-direction: row;
  border-top: 1px solid rgb(50, 50, 50);
  background-color: rgb(22, 22, 22);
  gap: 10px;
  align-items: center;
  /* padding-right: 20px; */
}
.nav-user-display-pfp {
  height: 35px;
  width: 35px;
  border-radius: 50%;
  cursor: pointer;
  margin-left: 20px;
}
.user-display-username {
  cursor: pointer;
  color: rgb(198, 198, 198);
  font-size: 18px;
  transition: 0.2s ease-in-out;
}
.user-display-username:hover {
  opacity: 0.85;
}
.nav-log-out-button {
  cursor: pointer;
  border: none;
  outline: none;
  transition: 0.2s ease-in-out;
  height: 40px;
  width: 40px;
  background-color: transparent;
  margin-left: auto;

  margin-right: 10px;
}
.nav-log-out-button:hover {
  opacity: 0.89;
}
.nav-log-out-button img {
  width: 28px;
}

#index-page-modal-backrop {
  z-index: 65;
}

#profile-logo {
  width: 50px;
  height: 50px;
}

.popup {
  display: none;
  position: fixed; /* Use 'fixed' to center on the screen, not the page */
  top: 50%;
  left: 50%;
  transform: translate(
    -50%,
    -50%
  ); /* Perfect vertical & horizontal centering */

  width: 90%; /* Responsive: takes up 90% of the screen width on small devices */
  max-width: 330px; /* But won't get wider than 330px on large screens */
  box-sizing: border-box; /* Makes padding calculations predictable */

  background-color: #1d1d1d;
  border: 1px solid rgb(68, 68, 68);
  border-radius: 10px;
  z-index: 1000; /* A higher z-index is safer for popups */

  /* Use Flexbox for robust internal alignment */
  display: flex;
  align-items: flex-start; /* Aligns text and button to the top */
  padding: 15px 40px 15px 20px; /* Top, Right, Bottom, Left padding */
}

.popup-message {
  /* Let this element grow to fill the available space */
  flex-grow: 1;

  /* All styling is inherited or set on the parent, so these can be simplified */
  font-size: 19px;
  color: rgb(188, 188, 188);
}

.close-popup-button {
  position: absolute; /* Position relative to the parent .popup */
  top: 10px;
  right: 10px; /* Anchor it to the top-right corner, not a fixed pixel from the left */

  /* Resetting and styling */
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  color: rgb(126, 126, 126);
  font-size: 28px;
  cursor: pointer;

  /* Use flexbox for perfect centering of the '×' */
  display: flex;
  align-items: center;
  justify-content: center;
}
#edit-profile-popup {
  display: none;
}

.navigation-search-users-results {
  display: none;
  position: fixed;
  z-index: 1000;
  margin-top: 20px;
  max-height: 270px;
  width: 250px;
  background-color: rgb(12, 12, 12);
  margin-left: 10px;
  padding: 10px;
  border-radius: 15px;
  border: solid 1px rgb(36, 36, 36);
  overflow-y: auto;
  overflow-x: hidden;

  /* Scrollbar track (background) */
  scrollbar-color: #333 #111; /* dark thumb on darker track */
  scrollbar-width: thin; /* optional, makes it thinner */

  /* For WebKit browsers */
  ::-webkit-scrollbar {
    width: 10px; /* width of scrollbar */
  }

  ::-webkit-scrollbar-track {
    background: #111; /* track color */
  }

  ::-webkit-scrollbar-thumb {
    background-color: #333; /* thumb color */
    border-radius: 5px; /* round edges */
    border: 2px solid #111; /* optional border */
  }
}
.profile-search-result-item {
  position: relative;
  display: flex;
  align-items: center;
  width: 240px;
  height: 63px;
  border-radius: 15px;
  cursor: pointer;
  background-color: rgb(12, 12, 12);
  z-index: 100;
}
.profile-search-result-item:hover {
  background-color: rgb(26, 26, 26);
}
.search-result-item-pfp {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  margin-left: 20px;
}
.search-result-item-name {
  color: rgb(223, 223, 223);
  font-size: 21px;
  margin-left: 10px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 100;
}
.search-user-not-found {
  color: rgb(220, 220, 220);
  font-size: 14px;
  z-index: 20;
  display: none;
}
.search-user-not-found h2 {
  margin-left: 40px;
}

.navigation-menu-input {
  transition: box-shadow 0.25s ease;
  box-sizing: border-box;
  padding-right: 30px;
  /* margin-top: 10px; */
  font-size: 20px;
  background-color: transparent;
  border: none;
  width: 200px;
  color: rgb(218, 218, 218);
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-search-input-div button {
  position: absolute;
  left: 190px;
  top: 50%;
  transform: translateY(-50%);

  display: grid;

  place-items: center;

  box-sizing: border-box;
  height: 25px;
  width: 25px;
  padding: 0; /* Important to reset padding */
  background-color: rgb(151, 151, 151);
  border: none;
  color: rgb(26, 26, 26);
  cursor: pointer;
  font-size: 15px;
  margin-left: 5px;
  z-index: 40;
  font-family: Poppins-light;
  transition: 0.1s ease-in-out;
  line-height: 0;
}
.nav-search-input-div button p {
  margin: 0;
  font-size: 25px;
  color: rgb(26, 26, 26);
  line-height: 1; /* A line-height of 1 or 0 often helps grid/flex centering */
}

.nav-search-input-div {
  display: flex;
  position: relative;
  width: 350px;
  height: 52px;
  width: 210px;
  border-radius: 8px;
  border: none;
  background-color: rgb(39, 39, 39);
  font-size: 20px;
  padding-left: 20px;
  margin-left: 8px;
  align-items: center;
}

#index-home-title {
  color: rgb(215, 215, 215);
  font-size: 27px;
  margin-top: 35px;
  margin-left: 20px;
}

#main-sessions-container {
  position: relative;
  width: 90%;
  background-color: transparent;
  max-width: 550px;
  left: 50%;
  transform: translateX(-50%);
  overflow-y: auto;
}

.session-box {
  position: relative;
  left: 50%;
  width: 98%;
  background-color: rgb(22, 22, 22);
  transform: translateX(-50%);
  margin-top: 20px;
  border: 0.5px solid rgb(50, 50, 50);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 40px;
}

.user-and-session-date {
  /* background-color: #00000052; */
  display: flex; /* put pfp + text side by side */
  align-items: center; /* vertically align pfp and text */
  padding: 10px;
  border-radius: 8px;
  width: 300px;
  margin-left: 30px;
  margin-top: 25px;
}
.session-profile-picture {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  margin-right: 12px; /* space between pfp and text */
  cursor: pointer;
}
.username-and-date {
  display: flex;
  flex-direction: column; /* stack username on top, date row below */
}
.session-username {
  color: rgb(210, 210, 210);
  margin: 0;
  cursor: pointer;
  font-size: 16px;
}
.options-button-div {
  position: relative;
}
.session-options-button {
  position: absolute;

  /* This pins it to the top-right corner of the parent */
  top: 10px; /* Adjust for spacing from the top */
  right: 10px; /* Adjust for spacing from the right */

  /* Add a small margin for spacing */
  margin-top: 10px;
  margin-right: 10px;

  /* Your other styles */
  width: 30px;
  cursor: pointer;
}

.edit-session-options-menu {
  position: absolute; /* Use absolute to scroll with the page */
  z-index: 1001; /* High z-index to appear on top */
  width: 140px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  z-index: 50;

  /* --- The Trick to Prevent Bugs --- */
  /* This hides the menu without removing it from the layout */
  visibility: hidden;
  opacity: 0;
  pointer-events: none; /* The hidden menu cannot be clicked */
  transition: opacity 0.1s ease-out;
}
.edit-session-options-menu.visible {
  visibility: visible;
  opacity: 1;
  pointer-events: auto; /* The visible menu can be clicked */
}

.edit-session-btn {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  width: 140px;
  height: 50px;
  display: flex;
  background-color: rgb(11, 11, 11);
  border: none;
  outline: none;
  align-items: center;
  border-bottom: 1px solid rgb(30, 30, 30);
  cursor: pointer;
}
.edit-session-btn:hover {
  background-color: rgb(17, 17, 17);
}
.edit-session-btn img {
  height: 15px;
  width: 15px;
  padding: 0;
  margin: 0;
  margin-right: 15px;
  margin-left: 10px;
}
.edit-session-p {
  font-family: Poppins-light;
  color: rgb(228, 228, 228);
  font-size: 17px;
}

.delete-session-btn {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  width: 140px;
  height: 50px;

  display: flex;
  background-color: rgb(11, 11, 11);
  border: none;
  outline: none;
  align-items: center;
  border-top: 0.5px solid rgb(27, 27, 27);
  cursor: pointer;
}
.delete-session-btn:hover {
  background-color: rgb(20, 20, 20);
}
.delete-session-btn img {
  height: 25px;
  width: 25px;
  padding: 0;
  margin: 0;
  margin-right: 10px;
  margin-left: 5px;
}
.delete-session-p {
  font-family: Poppins-light;
  color: rgb(189, 28, 28);
  font-size: 17px;
}

.session-date-and-time {
  display: flex; /* put date + time next to each other */
  gap: 6px; /* space between date and time */
}
.session-date,
.session-time {
  color: rgb(150, 150, 150);
  font-size: 14px;
  margin: 0;
}

#session-tag-container {
  margin: 0;
}
#session-tag-dropdown {
  margin-left: 30px;
  width: 180px;
}
#session-tag-dropdown button {
  background-color: #1a1a1a; /* Darker grey background */
  width: 100%; /* Ensure it takes up full width */
  text-align: left; /* Align text to the left */
  border: 1px solid rgb(48, 48, 48);
}
#session-tag-heading {
  color: rgb(216, 216, 216);
  margin-left: 19px;
  font-size: 20px;
}
#session-tag-dropdown .dropdown-button span {
  display: block; /* Required for text-overflow to work */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.session-name-and-duration {
  margin-left: 40px;
  /* background-color: rgb(75, 75, 75); */
  margin-top: -30px;
  /* display: flex; */
}
.session-name {
  font-size: 23px;
  color: rgb(210, 210, 210);
  /* font-weight: 600; */
  margin-top: 35px;
  margin-bottom: 10px;
  padding-right: 20px;
  font-family: Poppins-bold;
}
.session-name.no-tag-spacing {
  margin-bottom: 55px; /* This applies the large margin ONLY when there's no tag */
}
.session-duration-div {
  margin-left: 0px;
}
.session-duration-heading {
  font-size: 14px;
  /* position: relative; */
  /* top: 30px; */
  color: rgb(120, 120, 120);
  margin-top: -20px;
}
.session-duration {
  color: rgb(192, 192, 192);
  font-size: 15px;
  margin-top: -15px;
  margin-left: 3px;
}

.session-duration-and-rating {
  display: flex;
  margin-top: -10px;
}

.session-box .session-rating-div {
  margin-left: 30px;
  margin-top: -34px;
}
.session-comments-box .session-rating-div {
  margin-left: 30px;
  /* We don't apply the negative margin here, letting Flexbox handle the alignment */
}
#comments-hr-and-comments {
}

#comments-session-rating-div {
  margin: 0;
  padding: 0;
  margin-left: 30px;
}
#comments-session-duration-and-rating {
  margin-bottom: 20px;
  margin-top: -35px;
}
.session-rating-heading {
  font-size: 14px;

  color: rgb(120, 120, 120);
  /* margin-top: -20px; */
}
.session-rating {
  color: rgb(192, 192, 192);
  font-size: 15px;
  margin-top: -15px;
  margin-left: 3px;
}

.session-hr {
  height: 1px;
  background-color: rgb(47, 47, 47);
  border: none;
  margin-top: -15px;
}

.session-image-container {
  display: block;
  padding: 10px;
  margin-top: 12px;
  /* background-color: #007aff; */
  max-width: 420px;
  max-height: 420px;
  margin-bottom: 20px;
}
.session-image {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  height: 93%;
  width: 93%;
  border-radius: 6px;
}

.session-notes-container {
  /* background-color: #28323d; */
  margin-top: -30px;
  margin-left: 30px;
  margin-right: 20px;
  width: 100%;
  padding-bottom: 10px;
  max-width: 480px;
}
.session-notes-heading {
  color: rgb(198, 198, 198);
  font-size: 22px;
}
.session-notes {
  width: 80%;
  overflow: hidden;
  min-height: 100px;
  margin-top: -40px;
  padding: 10px;
  padding-top: 7px;
  margin-bottom: 30px;

  /* Look & feel */

  font-size: 19px;
  line-height: 1.4;
  color: #dfdfdf;

  /* Preserve formatting */
  white-space: pre-wrap; /* keeps spaces + wraps if too long */
  overflow-wrap: break-word;

  /* Make it look non-editable */
  border: 1px solid #474747;
  background-color: transparent;
  resize: none;
  cursor: default; /* no text cursor */
  border-radius: 5px;
}
.session-notes:focus {
  outline: none;
}

.session-likes-and-comments-count-container {
  display: flex;
}
.session-likes-count {
  color: rgb(88, 88, 88);
  font-size: 12px;
  margin-left: 10px;
  margin-top: -10px;
  margin-right: 10px;
}
.session-comments-count {
  position: absolute;
  right: 10px;
  color: rgb(88, 88, 88);
  font-size: 12px;
  margin-top: -10px;
}

.session-buttons-container {
  /* background-color: #cdcdcd; */
  display: flex;
  margin-bottom: 5px;
}
.session-buttons-container button {
  background-color: transparent;
  outline: none;
  width: 50%;
}
.session-comments-button img {
  height: 28px;
  width: 28px;
}
.session-comments-button {
  border: none;
  border-left: 1px solid rgb(57, 57, 57);
  cursor: pointer;
  transition: 0.2s ease-in-out;
}
.session-comments-button:hover {
  opacity: 0.8;
}
.session-like-button {
  border: none;
  cursor: pointer;
  transition: 0.2s ease-in-out;
}
.session-liked-button {
  border: none;
  display: none;
  cursor: pointer;
  transition: 0.2s ease-in-out;
}
.session-like-button:hover {
  opacity: 0.8;
}
.session-liked-button:hover {
  opacity: 0.8;
}

.session-comments-box {
  display: none;
  z-index: 10002;

  position: fixed;
  top: 56%;
  left: 50%;
  height: 500px;
  width: 75%;

  transform: translate(-50%, -50%); /* perfect centering */
  background: rgb(23, 23, 23);
  padding: 20px;
  border-radius: 10px;
  min-width: 250px;
  max-width: 550px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  border: 0.5px solid rgb(50, 50, 50);
}

#comments-user-and-session-date {
  margin: 0;
  gap: 7px;
}
#comments-user-and-session-date img {
  margin-right: 0;
  height: 45px;
  width: 45px;
}
#comments-session-name-and-duration {
  margin-left: 10px;
  height: 120px;
}
#comments-session-name {
  font-size: 21px;
  margin-bottom: 50px;
  min-height: 20px;
  max-height: 50px;
}
#comments-session-duration-heading {
  font-size: 12px;
  margin: 0;
  padding: 0;
}
#comments-session-rating-heading {
  font-size: 12px;
  margin: 0;
  padding: 0;
}

#comments-session-duration {
  font-size: 15px;

  margin: 0;
  padding: 0;
}
#comments-session-rating {
  font-size: 15px;

  margin: 0;
  padding: 0;
}

.comments-container {
  height: 256px;
  width: 100%;
  overflow-y: auto;
  margin-bottom: 20px;
  flex-shrink: 0;
}

.write-comment-container {
  position: relative;
  width: 100%;
  height: 45px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.write-comment-container img {
  flex-shrink: 0;

  border-radius: 50%;
  height: 35px;
  width: 35px;
}

.write-comment-container input {
  flex-grow: 1;
  min-width: 0;

  background-color: rgb(34, 34, 34);
  color: rgb(195, 195, 195);
  border: none;
  font-size: 16px;
  border-radius: 8px;
  padding-left: 10px;
  height: 35px;
}

.write-comment-container button {
  flex-shrink: 0;

  background: transparent;
  border: none;
  font-size: 16px;
  color: #1883dc;
  width: 40px;
  height: 40px;
  padding: 0;
}

.write-comment-container input:focus {
  outline: none;
  border: 2px solid #1883dc;
}

.comment {
  display: flex;
  /* background-color: #111; */
  margin-top: 15px;
  margin-bottom: 9px;
}
.comment img {
  height: 37px;
  width: 37px;
  border-radius: 50%;
}
.comment-username-and-comment-container {
  margin-left: 12px;
  /* background-color: #007aff; */
}
.comment-username {
  color: rgb(220, 220, 220);
  margin-top: -3px;
  margin-bottom: 0;
  font-size: 15px;
  font-weight: 700;
}
.comment-text {
  color: rgb(180, 180, 180);
  margin-bottom: 0;
  font-size: 17px;
  margin-top: 2px;
}

#index-page-modal-backdrop {
  z-index: 10000;
}

#comments-modal-backdrop {
  /* display: none; */
  /* display: block; */
  z-index: 10001;
}

#start-session-button {
  background-color: #1883dc;
  width: 200px;
  margin-left: 25px;
  margin-top: 20px;
  cursor: pointer;
}
#start-session-button:hover {
  background-color: #156fb8;
  border-radius: 3px;
  color: rgb(209, 209, 209);
}
#start-session-button:active {
  background-color: #1366aa;
  border-radius: 2px;
}

.session-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: rgb(18, 18, 18);
  height: 80px;
  width: 100%;
  border-top: 2px solid #1883dc;
  z-index: 150;

  display: none;
  flex-direction: column; /* stack children vertically */
  align-items: center; /* center horizontally */
  justify-content: center; /* center vertically in bar */
  gap: 6px; /* space between text and buttons */
}

.active-session-bar-message {
  color: rgb(133, 133, 133);
  margin: 0; /* remove default h6 spacing */
  font-size: 17px;
  margin-bottom: 8px;
}

#profile-session-bar {
  padding-top: 0;
}

.active-session-button-container {
  display: flex;
  justify-content: space-between; /* push buttons to opposite ends */
  align-items: center;
  width: 100%;
  /* background-color: violet; */
  padding: 0 30px; /* 20px from left and right edges */
  box-sizing: border-box; /* makes padding count in width */
  height: 25px;
}

.finish-session-button,
.discard-session-button {
  display: flex;
  align-items: center;
  gap: 5px; /* space between icon and text */
  border: none;
  background: transparent;
  font-size: 16px;
  font-family: Poppins-light;
  transition: 0.2s ease-in-out;
  cursor: pointer;
}

.finish-session-button {
  color: rgb(24, 131, 220);
}
.finish-session-button:hover {
  opacity: 0.75;
}

.discard-session-button {
  color: rgb(181, 0, 0);
}
.discard-session-button:hover {
  opacity: 0.75;
}

.finish-session-button img {
  height: 16px;
  width: 16px;
}
.discard-session-button img {
  height: 20px;
  width: 20px;
}

.session-time-elapsed {
  color: rgb(221, 221, 221);
  margin-top: 11px;
  font-size: 18px;
}

.session-already-running {
  color: rgb(159, 159, 159);
  margin-left: 10px;
  font-size: 19px;
}

.session-running-message {
  text-align: center;
  border-radius: 7px;
  line-height: 40px;
  display: none;

  border: 3px solid rgb(75, 75, 75);
  color: rgb(212, 212, 212);
  font-size: 20px;
  width: 195px;
  margin-left: 25px;
  margin-top: 20px;
  height: 40px;
  cursor: default;
}
#session-running-msg {
  display: none;
}

#delete-session-alert {
  display: none;
}

#edit-duration-header {
  color: #787878;
  margin: 0;
  padding: 0;
  font-size: 18px;
}
#edit-duration-div {
  display: flex;
  align-items: center;
  padding-top: 20px;
  justify-content: center;
  padding-right: 100px;
  margin-bottom: -10px;
}

.discard-session-alert {
  display: none;
  background-color: rgb(31, 31, 31);
  border-radius: 8px;
  border: 1px solid rgb(65, 65, 65);
  height: 115px;
  width: 330px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  z-index: 1000900;
}
.discard-session-message {
  color: rgb(228, 228, 228);
  font-size: 18px;
  font-family: Poppins-light;
  margin-left: 20px;
}
.discard-session-button-container {
  display: flex;
  align-items: center;
  position: relative;
  gap: 10px;
  left: 60%;
  bottom: 5%;
}
.discard-session-button-container button {
  background: none;
  border: none;
  padding: 0;
  color: #007aff;
  cursor: pointer;
  transition: opacity 0.2s ease-in-out;
  font-size: 17px;
}
.discard-session-button-container button:hover {
  opacity: 80%;
}
.discard-session-cancel-btn {
  height: 20px;
  width: 70px;
  border: 1px solid blue;
  font-family: Poppins-light;
  font-weight: 700;
}
.discard-session-yes-btn {
  height: 20px;
  width: 35px;
  border: 1px solid green;
  font-family: Poppins-light;
}

/* "complete-session.html" page code now */

#complete-session-main-container {
  padding-top: 60px;
}

#complete-session-nav {
  background-color: rgb(34, 34, 34);
  width: 100%;
  padding: 15px 20px;
  box-sizing: border-box;
  flex-shrink: 0;
  position: fixed;

  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  /* margin-bottom: 50px; */
  z-index: 99;
  position: fixed;
  top: 0; /* lock it at the top */
  left: 0;
  right: 0;
}

#complete-session-nav-title {
  color: rgb(214, 214, 214);
  margin: 0;
  margin-left: 12px;
  font-size: 20px;
}

#complete-session-back-button {
  background: none;
  border: none;
  padding: 0;
  color: rgb(237, 237, 237);
  cursor: pointer;
  transition: opacity 0.2s ease-in-out;
  font-size: 25px;
}
#complete-session-back-button:hover,
.blue-font-button:hover {
  opacity: 0.75;
}

#complete-session-name-input-container {
  /* background-color: #0053ac; */
  margin-top: 10px;
  height: 60px;
  display: flex;
  align-items: center;
}
.boxless-input {
  height: 30px;
  font-size: 20px;
  font-family: Poppins-light;
  background-color: transparent;
  border: none;
  outline: none;
  color: rgb(217, 217, 217);
  padding-left: 4px;
  border-radius: 0;
}
.boxless-input:focus {
  border: none;
  outline: none;
  border-bottom: #1883dc 1px solid;
}

#complete-session-name-input {
  margin-left: 15px;
  margin-top: 10px;
  width: 330px;
}

#complete-session-information-container {
  /* background-color: rgb(0, 0, 0); */
  display: flex;
  height: 60px;
  align-items: center;
  margin-top: 20px;
}

#complete-session-duration-div {
  margin: 0;
  margin-left: 20px;
}

#complete-session-date-div {
  margin: 0;
  margin-left: 55px;
}

#complete-session-duration-heading {
  margin: 0;
  padding: 0;
  margin-bottom: 5px;
}
#complete-session-duration {
  color: rgb(232, 232, 232);

  margin: 0;
  padding: 0;
  font-size: 20px;
}
#complete-session-date-heading {
  margin: 0;
  padding: 0;
  margin-bottom: 5px;
}
#complete-session-date {
  margin: 0;
  padding: 0;
  font-size: 20px;
  color: rgb(232, 232, 232);
}

/* rate session slider */

#complete-session-rate-session-div {
  width: 320px;
  /* background-color: black; */
  margin-top: 40px;
}

#rate-session-header {
  color: #e8e8e8;
  font-size: 20px;
  margin-left: 15px;
}

/* The main container for our slider component */
.rating-slider-container {
  position: relative;
  width: 100%;
  height: 50px; /* Taller, more like a box */
  margin-left: 20px;
}

/* The visual track element */
.slider-track {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(18, 18, 18); /* Black track */
  border-radius: 8px; /* Slightly curved edges */
  display: flex;
  align-items: center;
  user-select: none;
  border: 1px solid rgb(37, 37, 37);
}

/* Container for the numbers 1-10 */
.track-numbers {
  width: 100%;
  display: flex;
  justify-content: space-around;
}

/* Styling for each number inside the track */
.track-numbers span {
  color: white;
  font-weight: bold;
  font-size: 18px; /* Slightly larger font */
  flex: 1;
  text-align: center;
}

/* The visual "window" or thumb that moves */
.slider-thumb {
  position: absolute;
  top: 0;
  left: 0; /* Position will be updated by JavaScript */
  width: 10%; /* Covers one of the ten numbers */
  height: 100%;
  background-color: transparent; /* Window part is clear */
  border: 3px solid #1883dc; /* Blue outline */
  border-radius: 8px; /* Slightly curved edges to match the track */
  box-sizing: border-box; /* Ensures the border is included in the element's width/height */
  pointer-events: none;
  transition: left 0.1s ease-out;
}

/* 
 * The invisible <input type="range"> that handles all user interaction.
 */
.hidden-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}

#current-value-display {
  margin-top: 1.5rem;
  font-size: 1.2rem;
  color: #bdc3c7;
}

#session-image-cropper-modal {
  display: none;
  background-color: #222222;
  color: rgb(225, 225, 225);
  height: fit-content;
  width: 320px;
  font-size: 16px;
  z-index: 100;
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translate(-160px, 0);
  border-radius: 7px;
}
#session-image-cropper-modal h2 {
  margin-left: 18px;
}

#crop-and-upload-session-img {
  margin-left: 50%;
  transform: translateX(-27px);
  margin-bottom: 10px;
}
#crop-session-image-container {
  max-height: 60vh;
  margin-bottom: 15px;
}
#crop-session-image-container img {
  max-width: 100%;
}

#below-rating-horizontal-line {
  margin-top: 35px;
  background-color: rgb(45, 45, 45);
}

#upload-session-img-container {
  /* background-color: beige; */
  height: 110px;
  /* border: 1px solid red; */
  display: flex;
  align-items: center;
  margin-top: 25px;
}

#tags-quick {
  width: 250px;
}

#session-img-input {
  display: none;
}
#label-for-upload-session-img {
  color: #d6d6d6;
  cursor: pointer;
  font-family: Poppins-medium;
  /* transition: opacity 0.2s ease-in-out; */
  /* margin-left: 20px; */
  font-size: 18px;
  width: 300px;
  display: flex;
  align-items: center;
}

#upload-session-img-icon-div {
  height: 100px;
  width: 100px;
  border: dashed rgb(61, 61, 61) 3px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 30px;
}
#label-for-upload-session-img span {
  margin-left: 15px;
}
#upload-session-img-icon {
  height: 40px;
  width: 40px;
}

#below-upload-session-img {
  margin-top: 20px;
  background-color: rgb(45, 45, 45);
}

#session-img-preview {
  display: none;
  height: 100%;
  width: 100%;
  border-radius: 10px;
}

#session-notes-main-container {
  /* border: 1px solid red; */
  width: 83%;
  margin-left: 5%;
}
#session-notes-heading {
  color: rgb(222, 222, 222);
  font-size: 22px;
  margin-left: 15px;
}
#session-notes-textarea {
  margin-top: -10px;
  height: 150px;
  width: 100%;
  background-color: transparent;
  font-size: 18px;
  font-family: Poppins-light;
  color: rgb(213, 213, 213);
  border-radius: 8px;
  padding: 10px;
  border: 2px solid rgb(58, 58, 58);
  resize: none;
  margin-bottom: 20px;
}
#session-notes-textarea:focus {
  outline: none;
  border: #1883dc 2px solid;
}
#session-notes-textarea::placeholder {
  color: rgb(116, 116, 116);
}

#index-main-container {
  padding-bottom: 60px;
}

.load-more-container {
  display: none;
  width: 130px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  /* background-color: #ffffff; */
}
#load-more-btn {
  width: 130px;
  height: 40px;
  font-size: 19px;
  display: flex;
  align-items: center;
  color: rgb(217, 217, 217);
  cursor: pointer;
}
#load-more-btn img {
  height: 28px;
  width: 28px;
}

#profile-sessions-header {
  margin-left: 20px;
}

.loading-comments-message {
  font-size: 18px;
  color: rgb(219, 219, 219);
  margin-left: 10px;
}
.no-comments-message {
  font-size: 18px;
  color: rgb(219, 219, 219);
  margin-left: 10px;
  margin-bottom: 20px;
  /* margin-bottom: 300px; */
}

.delete-comment-icon {
  position: relative;
  right: 0px;
  width: 28px !important;
  height: 28px !important;
  cursor: pointer;
  transition: 0.1s ease-in-out;
  padding: 5px;
  opacity: 0.6;
  margin-left: auto;
}
.delete-comment-icon:hover {
  opacity: 0.4;
}

/* Container for the stack of PFPs */
/* 1. The Stack Container: Make it an inline flex container */
/* 1. Main Container: This is the most important part. */
.session-likes-and-comments-count-container {
  display: flex;
  justify-content: space-between; /* Pushes the left and right groups apart */
  align-items: center; /* Vertically aligns everything */
  padding: 0 10px; /* Spacing from the edges */
  min-height: 24px; /* Ensures container has height */
  margin-top: -10px;
  margin-bottom: 22px;
}

/* 2. Likes Group: The container for the text and PFPs on the left. */
.likes-group {
  display: flex;
  align-items: center; /* Vertically aligns the "Likes:" text and the PFP stack */
}

/* 3. Likes & Comments Text: Reset their default margins. */
.session-likes-count,
.session-comments-count {
  color: rgb(88, 88, 88);
  font-size: 12px;
  margin: 0; /* CRITICAL: Removes extra space that misaligns content */
  white-space: nowrap; /* Prevents text from wrapping */
}

/* 4. The Stack Container */
.liked-pfps-stack {
  display: flex; /* Changed from inline-flex for simplicity inside its parent */
  align-items: center;
  padding-left: 8px; /* Space between "Likes:" text and the first PFP */
}

/* 5. Individual PFPs */
.liked-pfps {
  box-sizing: border-box;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  border: 2px solid rgb(22, 22, 22);
  object-fit: cover;
}

/* 6. The Overlap Effect */
.liked-pfps:not(:first-child) {
  margin-left: -12px;
}

.comment-user-link {
  text-decoration: none;
  color: inherit;
}
.comment-user-link img {
  height: 40px;
  width: 40px;
  margin-right: 5px;
}

#remove-img-button {
  display: none;
  padding: 0;
  height: 40px;
  width: 40px;
  background-color: rgba(34, 0, 255, 0);
  border: none;
  outline: none;
  margin-left: -30px;
}
#remove-img-button img {
  height: 35px;
  width: 35px;
}

.no-sessions-message {
  color: rgb(120, 120, 120);
  font-size: 18px;
  margin-left: 40px;
}

/* GROUPS STUFF */
#groups-main-container {
  overflow-x: hidden;
}
#groups-content-container {
  max-width: 800px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-left: 10px;
}

#groups-clear-nav-search-input {
  display: none;
}
#groups-clear-nav-search-input span {
  height: 20px;
  width: 20px;
}

#groups-header-container {
  margin-top: 70px;
  display: flex;
  align-items: center;
  margin-bottom: -20px;
}

#groups-header-container h2 {
  color: rgb(215, 215, 215);
  font-size: 27px;
  margin-top: 35px;
  margin-left: 30px;
  font-family: Poppins-light;
}

#new-group-button {
  height: 32px;
  width: 32px;
  margin-top: 16px;
  cursor: pointer;
  margin-left: 15px;
  transition: 0.1s ease-in-out;
}
#new-group-button:hover {
  opacity: 0.75;
}

.tab-container {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  width: 92%;
  max-width: 800px;
  margin: 2rem auto;
  margin-left: 10px;
}
.tab-menu {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #555;
}
.tab-menu.is-empty {
  border-bottom: none;
}
.tab-button {
  padding: 0.6rem 1rem;
  text-align: center;

  margin: 0 4px 8px 4px;

  /* Appearance */
  font-size: 0.9rem;
  font-weight: 500;
  color: #999;
  background-color: #333;

  border: 1px solid #555;
  border-radius: 16px;

  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.tab-button:not(.active):hover {
  background-color: #444;
  color: #ccc;
}
.tab-button.active {
  color: #f5f5f5;
  font-weight: 600;
  background-color: #1883dc;
  border-color: #1883dc;
}

#create-group-modal {
  display: none;
  position: fixed;
  z-index: 100000;

  width: 90%;
  max-width: 340px;
  height: auto;
  padding: 20px 25px;
  box-sizing: border-box;

  background-color: #1f1f1f; /* A slightly lighter dark grey for popups */
  border: 1px solid rgb(65, 65, 65);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4); /* Deeper shadow for popups */

  /* display: flex; */
  flex-direction: column;
  align-items: center; /* Center-align all items */
  top: 40%;
}

/* --- Title Styling ("Create group") --- */
#create-group-title {
  /* Override .discard-session-message styles */
  font-size: 20px;
  color: #e5e5e5;
  margin: 0 0 20px 0; /* No top margin, 20px bottom margin */
  text-align: center;
}

/* --- Input Field Styling --- */
#create-group-input {
  /* Reset and apply styles from your .details-input */
  width: 100%;
  height: 45px;
  padding: 0 15px;
  box-sizing: border-box;

  background-color: rgb(26, 26, 26);
  border: 1px solid rgb(83, 83, 83);
  border-radius: 8px;

  color: rgb(233, 233, 233);
  font-size: 16px;

  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

#create-group-input::placeholder {
  color: #6a6a6a;
}

#create-group-input:focus {
  outline: none;
  border-color: #1883dc;
  box-shadow: 0 0 0 2px #1883dc, 0 0 6px 3px rgba(24, 131, 220, 0.3);
}

#create-groups-btn-container {
  display: flex;
  justify-content: space-between; /* Puts space between the buttons */
  width: 100%;
  margin-top: 25px;
  gap: 15px;
  left: 0;
}

#create-groups-btn-container button {
  flex-grow: 1;

  height: 40px;
  border-radius: 8px;
  font-size: 15px;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}

#cancel-create-group-button {
  background-color: #3e3e3e;
  color: #d1d1d1;
}

#cancel-create-group-button:hover {
  background-color: #4f4f4f;
}

#create-group-button {
  background-color: #1883dc;
  color: #ffffff;
}

#create-group-button:hover {
  background-color: #1472bf;
}

.create-groups-btn-container button {
  background: none;
  border: none;
  padding: 0;
  color: #007aff;
  cursor: pointer;
  transition: opacity 0.2s ease-in-out;
  font-size: 17px;
}
.create-group-btn-container button:hover {
  opacity: 0.8;
}

.leaderboard-container {
  margin-top: 1.5rem; /* Space below the tabs */
  padding: 0 10px; /* Some horizontal padding */
  padding-right: 30px;
  padding-bottom: 190px;
  min-height: 250px;
}

.leaderboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding: 0 15px;
}

.leaderboard-title {
  font-family: "Poppins-semibold", sans-serif;
  font-size: 20px;
  color: #e0e0e0;
  margin: 0;
}

/* Adjusting the dropdown for this context */
#leaderboard-dropdown {
  width: 140px; /* A good width for these options */
  margin-left: 0px;
  left: 15px;
}

/* --- The List Itself --- */
.leaderboard-list {
  list-style: none; /* Removes default bullet points */
  padding: 0;
  margin: 0;
}

/* --- Individual List Item (a single user row) --- */
.leaderboard-item {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  background-color: #1c1c1c; /* A very dark grey, slightly lighter than body */
  border-radius: 10px;
  margin-bottom: 8px; /* Space between each user row */
  border: 1px solid rgb(50, 50, 50);
}

/* --- Rank (1, 2, 3...) --- */
.leaderboard-rank {
  font-family: "Poppins-medium", sans-serif;
  font-size: 16px;
  color: #8e8e93; /* A muted grey color */
  width: 30px; /* Fixed width to ensure alignment */
  flex-shrink: 0; /* Prevents it from shrinking */
}

/* --- User Info (PFP + Name) --- */
.leaderboard-user {
  display: flex;
  align-items: center;
  flex-grow: 1; /* This makes it take up all available middle space */
  margin-left: 10px;
}

.leaderboard-pfp {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 15px; /* Space between PFP and name */
}

.leaderboard-name {
  font-family: "Poppins-light", sans-serif;
  font-size: 17px;
  color: #e0e0e0;
  font-weight: 500;
}

/* --- Time/Score --- */
.leaderboard-time {
  font-family: "Poppins-medium", sans-serif;
  font-size: 16px;
  color: #1883dc; /* Use your primary blue color */
  flex-shrink: 0; /* Prevents it from shrinking */
}

/* --- Styling for top 3 ranks --- */
.leaderboard-item:nth-child(1) .leaderboard-rank {
  color: #ffd700; /* Gold */
  font-weight: 600;
}
.leaderboard-item:nth-child(2) .leaderboard-rank {
  color: #c0c0c0; /* Silver */
  font-weight: 600;
}
.leaderboard-item:nth-child(3) .leaderboard-rank {
  color: #cd7f32; /* Bronze */
  font-weight: 600;
}

.pro-modal-backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px); /* Optional: blur background content */
  z-index: 9990; /* High z-index, but below the modal */
}

/* --- The Modal Container (Final Fix for Popup Appearance) --- */
.pro-modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9991;

  /* --- Sizing and Layout Fixes --- */
  box-sizing: border-box; /* THE KEY FIX: Padding and border are now inside the width */
  width: 92%; /* Takes up 92% of the screen width, leaving 4% margin on each side */
  max-width: 420px; /* Prevents it from getting too large on desktops */
  max-height: 90vh; /* Responsive height, ensuring it fits vertically */
  padding: 25px 20px; /* ADJUSTED: Slightly less horizontal padding for more content space */

  /* --- Flexbox for internal scrolling --- */
  flex-direction: column;

  /* --- Original Appearance Styles --- */
  background-color: #2c2c2e;
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  border: 1px solid #444;
  font-family: "Poppins-light", sans-serif;
}

/* --- Close Button (Top Right) --- */
.pro-modal-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  font-size: 28px;
  color: #8e8e93;
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s ease;
}
.pro-modal-close-btn:hover {
  color: #fff;
}

/* --- Modal Header --- */
.pro-modal-header {
  text-align: center;
  margin-bottom: 25px;
}
.pro-modal-header h1 {
  margin: 0;
  font-family: "Poppins-bold", sans-serif;
  font-size: 2.2rem;
  color: #fff;
  letter-spacing: -1px;
}
.pro-modal-header .pro-text {
  color: #ffd60a; /* A vibrant yellow for contrast */
}
.pro-modal-header p {
  margin: 5px 0 0 0;
  font-size: 1.1rem;
  color: #ebebf599; /* Off-white with transparency */
}

.features-table {
  width: 100%;
  overflow-y: auto; /* This adds a scrollbar ONLY when needed */
  flex-grow: 1; /* This makes the table take up the available space */
  min-height: 0; /* A required fix for scrolling within a flex container */

  /* Optional: Add some padding to prevent the scrollbar from touching the text */
  padding-right: 10px;
  margin-right: -10px;
}

/* Header Row ("Free", "PRO") */
.features-header {
  display: flex;
  justify-content: flex-end; /* Pushes the text to the right */
  padding-bottom: 8px;
  border-bottom: 1px solid #48484a;
}
.features-header .feature-value {
  font-family: "Poppins-semibold", sans-serif;
  font-size: 0.9rem;
  color: #ebebf599;
}

/* Individual Feature Row */
.feature-row {
  display: flex;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #48484a;
}
/* No border on the last row */
.feature-row:last-of-type {
  border-bottom: none;
}

.feature-name {
  flex-grow: 1; /* Pushes the values to the right */
  font-size: 1rem;
  color: #f2f2f7;
}

.feature-value {
  width: 70px; /* Fixed width for alignment */
  text-align: center;
  font-size: 1rem;
  flex-shrink: 0; /* Prevents shrinking */
}

/* Specific styles for values */
.feature-value.checkmark {
  color: #1883dc; /* Your site's primary blue */
  font-family: "Poppins-semibold", sans-serif;
  font-size: 1.2rem;
}
.feature-value.limit {
  color: #8e8e93; /* Muted grey for limits */
  font-size: 0.9rem;
}

/* --- Modal Footer (Upgrade Button) --- */
.pro-modal-footer {
  margin-top: 25px;
  text-align: center;
}
.upgrade-btn {
  /* Reusing your blue-button style and extending it */
  width: 100%;
  height: 50px;
  background-color: #1883dc;
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 1.1rem;
  font-family: "Poppins-semibold", sans-serif;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.upgrade-btn:hover {
  background-color: #1472bf;
}
.billing-info {
  margin: 10px 0 0 0;
  color: #8e8e93;
  font-size: 0.8rem;
}

#pro-groups-modal {
  display: none;
}

.group-settings-btn {
  background: none;
  border: none;
  padding: 5px;
  cursor: pointer;
  margin-right: auto;
  margin-left: 0px;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.group-settings-btn:hover {
  opacity: 1;
}

.group-settings-btn img {
  width: 24px;
  height: 24px;
}

/* ====================================================== */
/*            START: JOIN GROUP PAGE STYLES               */
/* ====================================================== */

.join-page-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  background-color: rgb(18, 18, 18);
  padding: 20px;
  box-sizing: border-box;
}

.join-modal {
  background-color: #1c1c1c;
  border-radius: 12px;
  border: 1px solid #3a3a3c;
  padding: 30px 35px;
  width: 100%;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.join-modal-state {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.join-modal-icon {
  width: 50px;
  height: 50px;
  margin-bottom: 15px;
}

.join-modal-icon.error {
  width: 40px;
  height: 40px;
}

.join-modal-title {
  font-family: "Poppins-medium", sans-serif;
  color: #e5e5e5;
  font-size: 1.25rem;
  margin: 10px 0 5px 0;
}

.join-modal-group-name {
  font-family: "Poppins-semibold", sans-serif;
  color: #ffffff;
  font-size: 1.5rem;
  margin: 5px 0 25px 0;
}

.join-modal-meta {
  font-family: "Poppins-light", sans-serif;
  color: #8e8e93;
  margin: 0 0 25px 0;
  font-size: 1rem;
}

.join-modal-actions {
  width: 100%;
  margin-top: 15px;
}

/* Re-using your .blue-button class and making it full-width */
.join-modal .blue-button {
  width: 100%;
  height: 45px;
  font-size: 1rem;
}

/* A simple CSS spinner for the loading state */
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #3a3a3c;
  border-top-color: #1883dc;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ====================================================== */
/*             END: JOIN GROUP PAGE STYLES                */
/* ====================================================== */

#edit-group-modal {
  display: none;
  padding: 20px;
  gap: 20px;
  /* display: flex; */
  flex-direction: column;
  background-color: rgb(35, 35, 35);
  z-index: 1000900;
}

.edit-group-title {
  font-family: "Poppins-semibold", sans-serif;
  color: #e5e5e5;
  font-size: 1.25rem;
  margin: 0 0 5px 0;
  text-align: center;
  width: 100%;
}

.edit-group-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.edit-group-label {
  font-family: "Poppins-medium", sans-serif;
  font-size: 0.9rem;
  color: #8e8e93;
}

.modal-input-area {
  width: 100%;
  height: 45px;
  background-color: rgb(26, 26, 26);
  border: 1px solid rgb(83, 83, 83);
  border-radius: 8px;
  box-sizing: border-box;
}

#edit-group-modal #edit-group-input {
  padding: 0 15px;
  color: rgb(233, 233, 233);
  font-size: 16px;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.invite-link-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
}

.invite-link-text {
  color: #8e8e93;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.copy-link-btn {
  background: none;
  border: none;
  color: #1883dc;
  font-family: "Poppins-medium", sans-serif;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 5px;
  flex-shrink: 0;
}

.generate-link-btn {
  width: 100%;
  height: 40px;
}
#generate-link-btn:hover {
  background-color: #1764b6;
  cursor: pointer;
  transition: 0.2s ease-in-out;
}

.invite-link-warning {
  font-size: 0.75rem;
  color: #8e8e93;
  text-align: center;
  margin: 5px 0 0 0;
  line-height: 1.4;
}

.edit-group-actions {
  display: flex;
  gap: 15px;
  width: 100%;
  margin-top: 10px;
  border-top: 1px solid #3a3a3c;
  padding-top: 20px;
}

.action-btn {
  flex-grow: 1;
  height: 40px;
  border-radius: 8px;
  font-family: "Poppins-medium", sans-serif;
  font-size: 15px;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}

.action-btn.cancel {
  background-color: #3e3e3e;
  color: #d1d1d1;
}
.action-btn.cancel:hover {
  background-color: #4f4f4f;
}

.action-btn.save {
  background-color: #1883dc;
  color: #ffffff;
}
.action-btn.save:hover {
  background-color: #1472bf;
}

#edit-group-input:focus {
  border: 2px solid #1883dc;
  outline: none;
}
#edit-group-input::placeholder {
  color: rgb(108, 108, 108);
}

.continue-to-app-btn {
  background: none;
  border: none;
  padding: 10px;
  margin-top: 10px; /* Space between it and the upgrade button */
  color: #8e8e93; /* Muted grey color */
  font-family: "Poppins-medium", sans-serif;
  font-size: 0.9rem;
  cursor: pointer;
  width: 100%;
  transition: color 0.2s ease;
}

.continue-to-app-btn:hover {
  color: #fff;
}

.action-btn.danger,
.leave-group-btn {
  background-color: transparent; /* No background */
  border: 1px solid #5c2323; /* Dark red border */
  color: #ff8a80; /* Light red text */
  padding: 8px 16px;
  border-radius: 8px;
  font-family: "Poppins-medium", sans-serif;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%; /* Make it full-width within its container */
}

.action-btn.danger:hover,
.leave-group-btn:hover {
  background-color: #5c2323; /* Dark red background on hover */
  color: #fff; /* White text on hover */
}

.leaderboard-user-link {
  text-decoration: none; /* Removes the underline from the link */
  color: inherit; /* Makes the link text inherit its color (e.g., from .leaderboard-name) */
  display: flex; /* Helps with vertical alignment of the image within the link */
  align-items: center;
}

/* Optional: Adds a subtle underline when hovering over the username for better UX */
.leaderboard-user-link:hover .leaderboard-name {
  text-decoration: underline;
}

.leaderboard-item.current-user {
  background-color: #252525; /* A subtle dark navy/blue tint */
  border-color: #1a6ab0; /* A slightly brighter blue for the border */

  /* The "mild blue glow" effect */
  box-shadow: 0 0 12px rgba(24, 131, 220, 0.35);
}

/* Optional: Make the current user's name slightly bolder */
.leaderboard-item.current-user .leaderboard-name {
  color: #ffffff;
}

.feed-filter-container {
  margin: 40px 0 15px 0;
  padding: 0 20px;
  min-height: 47px;
  display: flex;
  justify-content: flex-start;
}

/* 2. This styles the dropdown button. */
#feed-filter-dropdown .dropdown-button {
  background-color: transparent;
  border: 1px solid #343435;
  padding: 10px 15px;
  position: relative;
}
#session-feed-content {
  min-height: 40vh;
}
#feed-filter-dropdown {
  margin-left: 40px;
}

/* 3. This styles the dropdown menu itself. */
#feed-filter-dropdown .dropdown-menu {
  background-color: rgb(20, 20, 20);
  border: 1px solid #3a3a3c;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow-y: auto;
  max-height: 300px; /* <-- Add this line */
}

/* 4. This styles the options inside the menu. */
#feed-filter-dropdown .dropdown-option {
  background-color: transparent;
}
#feed-filter-dropdown .dropdown-option:hover {
  background-color: #3a3a3c;
}
#feed-filter-dropdown .dropdown-option.active {
  background-color: #007aff;
  color: white;
}

.manage-tags-modal {
  display: none;
  box-sizing: border-box;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-height: 90vh; /* <-- Add this line */
  max-width: 450px;
  background-color: #1c1c1e; /* iOS-style dark grey */
  border: 1px solid #3a3a3c;
  border-radius: 12px;
  z-index: 1050; /* Above the backdrop */
  color: #f2f2f7;
  padding: 0 20px 20px 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  /* display: flex; <-- Add this */
  flex-direction: column; /* <-- Add this */
  overflow-y: hidden;
}

/* --- Modal Header --- */
.tags-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #3a3a3c;
  margin-bottom: 20px;
}
.tags-modal-header h2 {
  margin: 0;
  font-size: 1.3rem;
}
.close-tags-modal-btn {
  background: transparent;
  border: none;
  border-radius: 50%;
  color: #8e8e93;
  font-size: 28px; /* Increased font size */
  width: 32px; /* Increased button size */
  height: 32px; /* Increased button size */
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  position: relative;
  left: 8px;

  /* Use flexbox for perfect centering */
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-tags-modal-btn:hover {
  color: #f2f2f7; /* Make 'X' brighter on hover */
}

#tags-modal-backdrop {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.519);
  z-index: 1050;
}
.tag-display-view,
.tag-edit-view {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 10px;
}
.edit-tag-input {
  background: none;
  border: none;
  border-bottom: 1px solid #007aff;
  color: white;

  font-size: 16px;
  font-weight: 500;
  outline: none;
  flex-grow: 0.9; /* This makes it fill the available space */
  padding: 4px 0; /* Add some vertical padding */
  border-radius: 0;
}
.tag-item-info {
  color: #8e8e93;
  padding: 12px 0;
  text-align: center;
}

/* --- Input Field for Tag Name --- */
.tag-name-input {
  box-sizing: border-box;
  width: 90%;
  background-color: #2c2c2e;
  border: 1px solid #3a3a3c;
  border-radius: 8px;
  padding: 12px;
  font-size: 1rem;
  color: #f2f2f7;
  margin-bottom: 20px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease; /* <-- Add this line */
}
.tag-name-input::placeholder {
  color: #8e8e93;
}
.tag-name-input:focus {
  outline: none; /* Removes the default browser focus ring */
  border: 2px solid #007aff; /* The solid blue border */
  box-shadow: 0 0 8px rgba(0, 122, 255, 0.6); /* The blue glow */
}

/* --- Color Selector Section --- */
.color-selector p {
  margin: 0 0 10px 0;
  font-size: 0.9rem;
  color: #8e8e93;
}
.color-dots-container {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}
.color-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid transparent;
  padding: 0;
  transition: border-color 0.2s ease;
}
.color-dot.selected {
  border-color: #f2f2f7; /* White ring for selected color */
}

/* --- The Pro Badge --- */
.pro-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pro-badge {
  font-size: 0.7rem;
  font-weight: bold;
  background-color: #ffcc00; /* Gold color for PRO */
  color: #1c1c1e;
  padding: 2px 6px;
  border-radius: 4px;
}

/* --- Color Palette Definitions --- */
.color-blue {
  background-color: #1d4ed8;
}
.color-red {
  background-color: #991b1b;
}
.color-green {
  background-color: #166534;
}
.color-yellow {
  background-color: #b45309;
}
.color-purple {
  background-color: #5b21b6;
}
.color-brown {
  background-color: #785549;
}
.color-grey {
  background-color: #4b5563;
}
.color-black {
  background-color: #111827;
}

/* --- Buttons and Dividers --- */
.create-tag-btn {
  width: 100%;
  transition: 0.2s ease-in-out;
  cursor: pointer;
}
.create-tag-btn:hover {
  background-color: #1267ad;
}
.tags-divider {
  border: none;
  border-top: 1px solid #3a3a3c;
  margin: 25px 0;
}

/* --- Existing Tags List --- */
.existing-tags-section {
  display: flex;
  flex-grow: 1; /* Allows this section to fill available space */
  min-height: 0; /* Prevents it from overflowing on very small screens */
  flex-direction: column;
}
.existing-tags-section h3 {
  margin-top: 0;
}
.existing-tags-list {
  list-style-type: none;
  padding: 0 10px 0 0; /* <-- Change this line to add right padding */
  margin: 0;
  flex-grow: 1;
  overflow-y: auto;
  box-sizing: border-box; /* <-- Add this line */
}
.tag-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #2c2c2e;
}
.tag-item:last-child {
  border-bottom: none;
}
.tag-pill {
  color: white;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 500;
  max-width: 250px;
}
.tag-action-btn {
  background: none;
  border: none;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 5px;
  color: #1883dc;
}
.edit-tag-btn {
  color: #0a84ff; /* Action blue */
}
.delete-tag-btn {
  color: #ff453a; /* Action red */
}

.existing-tags-list::-webkit-scrollbar {
  width: 8px;
}
.existing-tags-list::-webkit-scrollbar-track {
  background: #2c2c2e;
}
.existing-tags-list::-webkit-scrollbar-thumb {
  background-color: #6b7280;
  border-radius: 4px;
}

.session-tag-pill {
  display: inline-block; /* Allows width and padding */
  color: white;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 15px; /* Slightly smaller for the feed */
  font-weight: 500;
  margin-top: 2px; /* Space below the session title */
  margin-bottom: 44px;

  /* Truncation styles */
  max-width: 230px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle; /* Aligns it nicely if text wraps */
}
/* ================================== */
/*      END: Manage Tags Modal CSS    */
/* ================================== */

.statistics-header-container {
  display: flex;
  align-items: center;
  justify-content: space-between; /* This is key to pushing the group of items to the right */
  gap: 10px; /* Adds space between the title and the first dropdown if needed */
}

/* --- The Dropdowns --- */
.custom-dropdown {
  position: relative;
  width: 120px; /* Responsive width */
  color: #f2f2f7;
  z-index: 99;
  flex-shrink: 0; /* Prevents the dropdowns from being squished */
  /* REMOVED the disruptive margin-left */
}

/* --- Rule to Truncate Text in Dropdown Buttons --- */
.dropdown-button span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Rule to Truncate Text in Dropdown Options --- */
.dropdown-option {
  padding: 10px 15px;
  cursor: pointer;
  border-radius: 5px;
  font-size: 16px;
  transition: background-color 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#time-period-dropdown {
  margin-left: 0;
  width: 110px;
  margin-bottom: 10px;
}
#time-period-dropdown .dropdown-button {
  background-color: #1d1d1d;
  border-color: #292929;
}
#tag-filter-dropdown {
  margin-left: 20px;
  width: 190px;
  margin-bottom: 10px;
}
#tag-filter-dropdown .dropdown-button {
  background-color: #1d1d1d;
  border-color: #292929;
}
#stats-options-container {
  display: flex;
}

#tags-modal-backdrop {
  z-index: 1040; /* Base layer for tags modal */
}
.manage-tags-modal {
  z-index: 1050; /* Sits on top of its own backdrop */
}

/* 2. Set a HIGHER z-index for the Pro Modal and its backdrop */
.pro-modal-backdrop {
  z-index: 1060; /* Sits on top of the tags modal */
}
.pro-modal {
  z-index: 1070; /* Sits on top of everything */
}

.timer-controls {
  display: flex;
  align-items: center;
  gap: 3px; /* Adds a nice space between the time and the button */
}

/* 2. This container is the anchor for positioning the dropdown menu */
.pause-dropdown-container {
  position: relative; /* Crucial for positioning the menu */
  display: flex;
  align-items: center;
}

/* 3. Styles for the main pause/play button */
.pause-session-button {
  background: none;
  border: none;
  padding: 6px; /* A bit of clickable area around the icon */
  cursor: pointer;
  border-radius: 50%; /* Makes the button circular */
  display: flex; /* Helps center the icon perfectly */
  align-items: center;
  justify-content: center;
  transition: 0.2s ease-in-out;
  position: relative;
  top: -3px;
}

/* Add a subtle background on hover for better user feedback */
.pause-session-button:hover {
  opacity: 0.8;
}

/* 4. Define the size of the play and pause icons inside the button */
.pause-session-button img {
  width: 20px;
  height: 20px;
}

/* 5. Position and style the dropdown menu that appears */
.pause-dropdown-container .pause-options-menu {
  /* --- CRITICAL OVERRIDES --- */
  position: absolute;
  top: auto;
  right: auto;
  bottom: calc(100% + 8px);
  left: 50%;

  /* --- NEW STYLES FOR SCROLLING --- */
  max-height: 220px; /* Limit the height to 220px (you can adjust this value) */
  overflow-y: auto; /* Add a vertical scrollbar ONLY if needed */

  /* --- CENTERING & ANIMATION --- */
  transform: translate(-50%, 10px) scale(0.95);
  transform-origin: bottom center;
  transition: transform 0.2s ease, opacity 0.2s ease;

  /* --- VISIBILITY (Hidden by default) --- */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  /* --- Custom Scrollbar for dark theme (Optional but recommended) --- */
  scrollbar-width: thin;
  scrollbar-color: #555 #2c2c2e;
}

/* Optional: Scrollbar styling for WebKit browsers (Chrome, Safari) */
.pause-dropdown-container .pause-options-menu::-webkit-scrollbar {
  width: 8px;
}
.pause-dropdown-container .pause-options-menu::-webkit-scrollbar-track {
  background: #2c2c2e; /* Matches the menu background */
}
.pause-dropdown-container .pause-options-menu::-webkit-scrollbar-thumb {
  background-color: #555; /* A slightly lighter grey for the scrollbar handle */
  border-radius: 4px;
  border: 2px solid #2c2c2e; /* Creates padding around the handle */
}

/* This rule for making the menu visible remains the same */
.pause-dropdown-container .pause-options-menu.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
}

.pause-dropdown-container .pause-options-menu li {
  color: white;
}
.pause-dropdown-container .pause-options-menu {
  background-color: rgb(36, 36, 36);
  border-color: rgb(36, 36, 36);
}
.timer-display-wrapper {
  display: grid;
  place-items: center;

  /* START: Add these three lines */
  position: relative;
  top: -4px; /* Moves the element UP by 7px */
  left: 10px; /* Moves the element LEFT by 6px */
}

/* 2. The invisible scaffold */
.timer-scaffold {
  /* Make it use a reliable monospaced font */
  font-family: "Courier New", Courier, monospace;
  font-size: 19px; /* Match the visible timer's size */
  font-weight: 600; /* Match the visible timer's weight */

  /* This is crucial: it makes the element invisible but preserves its width */
  visibility: hidden;

  /* Tell the grid to place this in the first cell */
  grid-area: 1 / 1;
  margin-bottom: 10px; /* Reset paragraph margin */
  padding: 0; /* Reset paragraph padding */
}

/* 3. The visible timer */
.session-time-elapsed {
  /* Tell the grid to place this in the EXACT same cell, on top of the scaffold */
  grid-area: 1 / 1;

  /* Your original styles, but without the problematic font changes */
  color: rgb(221, 221, 221);
  font-size: 19px;
  font-weight: 400;
  margin-bottom: 10px; /* Reset paragraph margin */
  padding: 0; /* Reset paragraph padding */
  /* NO font-variant or font-family here, so it uses your default Poppins */
}

.checkbox-container {
  margin: 10px 0;
  font-size: 0.9rem;
  color: #ddd; /* or match your theme */
}

.checkbox-container a {
  color: #4da3ff; /* your brand blue */
  text-decoration: underline;
}

.checkbox-container input {
  margin-right: 5px;
}

@media (min-width: 493px) {
  .pro-modal {
    width: 90%;
  }

  #lp-logo {
    height: 50px;
    width: 115px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .nav-search-input-div button {
    line-height: 0;
  }

  .white-logo-button {
    height: 64px;
    width: 64px;
    padding: 10px;
  }
  #profile-logo {
    height: 57px;
    width: 57px;
  }

  #lp-nav-login-button {
    height: 45px;
    width: 100px;
    font-size: 19px;
  }

  #lp-slogan {
    margin-top: 120px;
    font-size: 39px;
    font-family: Poppins-light;
    margin-right: 0;
  }

  #lp-get-started-heading {
    font-size: 18px;
  }

  #lp-start-button {
    height: 45px;
    width: 90px;
    font-size: 21px;
  }

  #temp-phones {
    display: block;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
  }
  .top-heading {
    margin-top: 115px;
  }

  .container-for-profile-menu {
    width: 490px;
    top: 20px;
  }

  .profile-picture {
    width: 130px;
    height: 130px;
  }
  .username-element {
    font-size: 28px;
  }
  #edit-pencil {
    top: 190px;
    margin-top: 0;
  }

  .information-container h4 {
    font-size: 15px;
  }
  .information-container div {
    margin-right: 23px;
  }

  .custom-dropdown {
    margin-left: 140px;
    width: 200px;
  }

  #ipad-container {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }

  #follow-button {
    width: 460px;
  }
  #following-button {
    width: 460px;
  }

  #edit-profile-modal-background {
    display: flex;
    justify-content: center;
  }
  #edit-profile-modal-content {
    min-width: 100%;
  }

  #change-pfp-container {
    min-width: 344px;
  }

  #change-username-container {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }
  #label-for-change-pfp {
    font-size: 18px;
  }
  #change-pfp-container {
    width: 450px;
  }
  #profile-options-buttons-container {
    width: 450px;
  }
  #extra-options-container {
    width: 450px;
  }
  #change-username-header {
    font-size: 20px;
  }
  #new-username-input {
    font-size: 20px;
  }
  .profile-options-button {
    width: 350px;
    height: 40px;
  }
  #log-out-button {
    width: 350px;
    height: 40px;
  }
  .red-button {
    width: 350px;
    height: 40px;
  }

  #edit-profile-pfp {
    width: 145px;
    height: 145px;
  }

  #new-password-header {
    margin-left: 60px;
    font-size: 19px;
  }
  #confirm-password-header {
    margin-left: 50px;
    font-size: 19px;
  }

  #check-new-password-button {
    margin-left: 175px;
    margin-top: 5px;
  }

  #new-password-input {
    width: 120px;
    font-size: 22px;
  }
  #confirm-new-password-input {
    width: 120px;
    margin-left: 15px;
    font-size: 22px;
  }

  #delete-account-confirmation {
    transform: translate(-160px, -100px);
  }

  .ff-menu {
    width: 470px;
    height: 500px;
    max-height: 501px;
    z-index: 1000001;
  }

  .close-ff-button {
    left: 295px;
  }
  #close-following-button {
    left: 280px;
  }
  #close-followers-button {
    left: 280px;
  }

  .ff-username {
    font-size: 22px;
    margin-left: 0px;
  }

  .ff-item-pfp {
    width: 60px;
    height: 60px;
  }

  .ff-list {
    padding: 8px 25px;
    gap: -60px;
  }

  .ff-item {
    margin-top: -10px;
  }

  .ff-follow-button {
    height: 42px;
    width: 90px;
    font-size: 17px;
  }
  .ff-following-button {
    height: 42px;
    width: 100px;
    font-size: 17px;
  }

  #profile-page-modal-backdrop {
    background-color: #00000052;
    z-index: 10000;
  }
  #groups-page-modal-backdrop {
    background-color: #00000052;
    z-index: 10000;
  }
  #groups-header-container {
    margin-top: 110px;
    margin-left: 10px;
  }

  .navigation-logo {
    height: 55px;
    width: 120px;
  }

  .session-bar {
    max-width: 735px;
    left: 50%;
    border-radius: 8px 8px 0 0;
    transform: translateX(-50%);
    border-left: 2px solid #1570ba;
    border-right: 2px solid #1570ba;
    border-top: 2px solid #1570ba;
  }
  .session-username {
    font-size: 18px;
  }
  .session-date {
    font-size: 16px;
  }
  .session-name {
    font-size: 25px;
  }
  .session-duration-heading {
    font-size: 16px;
  }
  .session-rating-heading {
    font-size: 16px;
  }
  .session-duration {
    font-size: 16px;
  }
  .session-rating {
    font-size: 16px;
  }
  #comments-session-name {
    font-size: 24px;
  }
  #complete-session-main-container {
    max-width: 700px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  #complete-session-name-input-container {
    width: 400px;
  }
  #complete-session-name-input {
    width: 400px;
    font-size: 23px;
  }
  #complete-session-information-container {
    /* margin-left: 30px; */
  }
  #rate-session-header {
    font-size: 23px;
  }
  #below-upload-session-img {
    background-color: rgb(36, 36, 36);
  }
  #add-session-img-span {
    font-size: 21px;
  }
  #upload-session-img-icon-div {
    height: 110px;
    width: 110px;
  }
  #remove-img-button {
    margin-left: 0px;
  }
  #session-notes-heading {
    font-size: 23px;
  }
  #session-notes-textarea {
    font-size: 20px;
  }
  .comment-user-link img {
    height: 45px;
    width: 45px;
  }
  .no-comments-message {
    font-size: 21px;
  }
  .session-comments-box {
    height: 510px;
  }
  .comment-username {
    font-size: 17px;
  }
  .comment-text {
    font-size: 19px;
    margin-top: 6px;
  }
  .comment-days-ago {
    color: rgb(91, 91, 91);
    margin-left: 5px;
    font-size: 15px;
  }
  #tag-filter-dropdown {
    margin-left: 20px;
    width: 250px;
  }
  #time-period-dropdown {
    width: 150px;
  }
}

@media (min-width: 1305px) {
  #login-container {
    /* display: flex; */
    justify-content: center;
    align-items: center;
    /* justify-content: space-between; */
    width: 100%;
    /* gap: 100px; */
  }
  #login-double-container {
    display: flex;
    align-items: center;
    background-color: transparent;
    gap: 0px;
    justify-content: center;
    width: 100%;
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
  }
  #login-img-container {
    display: block;
    margin-top: 100px;
  }
  #login-img-container img {
    height: 520px;
    margin-right: 100px;
    margin-top: 20px;
  }
  #lp-slogan {
    font-size: 50px;
    text-align: left;
  }

  #signup-double-container {
    display: flex;
    align-items: center;
    background-color: transparent;
    gap: 5rem;
    justify-content: center;
    width: 100%;
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
  }

  #signup-img-container {
    display: block;
    margin-top: 100px;
  }

  #signup-img-container img {
    height: 400px;
    margin-right: 50px;
    margin-top: 70px;
    /* margin-left: 100px; */
  }
  /* 
  #lp-start-and-img {
    display: flex;
    height: 650px;
    margin-top: 75px;
  }
  #lp-start-container {
    margin-top: -5%;
    width: 50%;
    margin-left: 7%;
  }
  #lp-img-container {
    width: 50%;
    overflow: hidden;
    position: relative;
    margin-right: 5%;
  }
  #temp-phones {
    width: 650px;
    height: 650px;
    object-fit: cover;
    display: block;
  } */
  #lp-start-container {
    margin-top: 60px;
  }
  .lp-info-div {
    display: flex;
    flex-direction: column;
    /* max-width: 800px; */
    gap: 0px;
    align-items: center;
    margin-bottom: 0;
    margin-top: 0;
  }
  .lp-seperator-div {
    padding-top: 50px;
    /* text-align: center; */
  }
  .lp-img-container img {
    width: 250px;
  }
  #macbook-container img {
    width: 600px;
  }
  .lp-img-container {
    width: fit-content;
  }
  #lp-container {
    width: 100%;
  }
  #ipad-and-phone-img {
    width: 400px;
    top: 60px;
  }
  #lp-box-container {
    margin-top: 50px;
    width: 90%;
    display: flex;
    max-width: 900px;
    position: relative;
    transform: translateX(-50%);
    left: 50%;
    /* margin-left: auto;
    margin-right: auto; */
    justify-content: space-between; /* Pushes text and image to opposite ends */
    align-items: center; /* Vertically aligns them in the middle */
  }
  #lp-box-container div {
    /* left: 0; */
  }
  #ipad-container {
    left: 200px;
  }
  #the-1 {
    display: none;
  }
  .info-container-heading {
    font-size: 40px;
  }
  .info-container-words {
    font-size: 20px;
  }
  #lp-introduction {
    font-size: 19px;
    max-width: 370px;
    margin-top: 0px;
  }
  #lp-double-phone-container {
    display: flex;
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    gap: 50px;
    margin-top: 40px;
    margin-bottom: -40px;
  }

  .all-details-container {
    width: 40%;

    max-width: 500px; /* Prevents the form from getting too wide */
    min-width: 420px;
    margin-left: auto;
    margin-right: auto;
    /* overflow: hidden; */
  }

  .top-heading {
    font-size: 40px;
    margin-top: 180px;
  }
  .details-input {
    width: 380px;
    height: 40px;
  }
  .details-input-headers {
    margin-top: 20px;
    margin-left: -120px;
  }
  #confirm-signup-button {
    margin-top: 35px;
    height: 40px;
    width: 400px;
    font-size: 18px;
  }
  #email-error {
    margin-left: -290px;
  }
  #email-taken-error {
    margin-left: -307px;
  }
  #username-error {
    margin-left: -280px;
  }
  #password-error {
    margin-left: -190px;
  }
  #confirm-password-error {
    margin-left: -220px;
  }

  #confirm-login-button {
    width: 400px;
    margin-top: 30px;
  }

  #email-or-username-error {
    margin-left: -200px;
  }
  #incorrect-password-error {
    margin-left: -257px;
  }

  #forgot-password-details-container {
    left: 30%;
  }
  #forgot-password-details-error {
    margin-left: -300px;
  }
  #confirm-forgot-password-button {
    width: 400px;
    margin-top: 30px;
  }

  #password-reset-details-container {
    left: 28%;
  }
  #password-reset-input-password-header {
    margin-right: 200px;
  }
  #password-reset-input-confirm-header {
    margin-right: 135px;
  }
  #reset-password-button {
    margin-top: 25px;
    width: 400px;
    margin-bottom: 15px;
  }
  #reset-password-error {
    margin-left: -100px;
  }

  .ff-menu {
    height: 580px;
    max-height: 581px;
  }
  .ff-list::-webkit-scrollbar {
    width: 6px;
  }

  .ff-list::-webkit-scrollbar-thumb {
    background-color: rgba(100, 100, 100, 0.4);
    border-radius: 3px;
  }

  .ff-list::-webkit-scrollbar-track {
    background: transparent;
  }

  #index-page-modal-backdrop {
    /* height: 0;
    width: 0; */
  }
  .close-navigation-menu-button {
    display: none;
  }
  .navigation-menu {
    display: block !important;
    transform: translateX(0);
    visibility: visible;
  }
  .nav-bar {
    display: none !important;
  }
  #lp-nav {
    display: flex;
  }
  #login-nav {
    display: flex;
  }
  #signup-nav {
    display: flex;
  }
  #forgot-password-nav {
    display: flex;
  }
  #password-reset-nav {
    display: flex;
  }
  #groups-nav {
    display: flex;
  }

  .nav-search-input-div button {
    display: block;
  }
  .write-comment-container input {
    font-size: 16px;
    height: 40px;
    margin-top: 3px;
  }
}

@media (max-width: 451px) {
  .manage-tags-modal {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: none; /* Resets the centering transform */
    border-radius: 0; /* Removes rounded corners for full-screen */
    max-height: 100%; /* Allows it to be full height */
    border: none;
  }
}

#index-clear-nav-search-input,
#profile-clear-nav-search-input,
#groups-clear-nav-search-input,
#stats-clear-nav-search-input {
  /* Keep the essential positioning from its parent rule */
  position: absolute;
  top: 50%; /* Position the top edge at the container's vertical center */
  right: 5px; /* Position 5px from the right edge (more responsive than 'left') */
  left: auto; /* IMPORTANT: Unset any 'left' value from other classes */
  transform: translateY(-50%); /* Pull the button up by half its own height */

  /* --- Sizing and Appearance --- */
  height: 25px;
  width: 25px;
  margin: 0; /* Reset any margin */
  padding: 0; /* Reset any padding */
  border-radius: 50%;
  background-color: rgb(151, 151, 151); /* Re-add background if needed */
  border: none; /* Re-add border reset if needed */

  /* --- Flexbox Centering for the "×" inside --- */
  display: flex;
  align-items: center;
  justify-content: center;
  display: none;
}

#index-clear-nav-search-input span,
#profile-clear-nav-search-input span,
#groups-clear-nav-search-input span,
#stats-clear-nav-search-input span {
  /* Reset everything to be safe */
  position: static;
  transform: none;
  margin: 0;
  font-size: 25px;
  color: rgb(26, 26, 26);
  line-height: 1;
}
/* ====================================================== */
/*            START: GET PRO SALES PAGE STYLES            */
/* ====================================================== */

.get-pro-page-container {
  background-color: #111;
  min-height: 100vh;
  padding: 100px 20px 0 20px; /* Removed bottom padding */
  box-sizing: border-box;
  font-family: "Poppins-light", sans-serif;
  color: #f2f2f7;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
  position: relative;
}

.header-glow-background {
  position: absolute;
  top: 0;
  left: 50%;
  width: 800px;
  height: 400px;
  background: radial-gradient(
    circle,
    rgba(24, 131, 220, 0.15) 0%,
    rgba(17, 17, 17, 0) 60%
  );
  transform: translateX(-50%);
  animation: slowPulse 8s infinite alternate ease-in-out;
  z-index: 1;
}

/* --- Back Button --- */
@media (min-width: 768px) {
  .back-to-app-btn {
    background-color: transparent;
    border: none;
    box-shadow: none;
    padding: 8px 12px;
    color: #8e8e93;
  }
  .back-to-app-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    transform: none;
  }
}
.back-to-app-btn {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 10;
  background-color: #1c1c1e;
  border: 1px solid #3a3a3c;
  padding: 8px 16px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  text-decoration: none;
  color: #c7c7cc;
  font-family: "Poppins-semibold", sans-serif;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}
.back-to-app-btn:hover {
  border-color: #555;
  color: #fff;
}

.pro-sales-container {
  width: 100%;
  max-width: 1100px;
  text-align: center;
  z-index: 2;
  flex-grow: 1;
}

/* --- Header Section --- */
.pro-sales-header {
  margin-bottom: 60px;
}
.pro-badge-large {
  display: inline-block;
  background-image: linear-gradient(45deg, #ffd60a, #ffcc00);
  color: #1c1c1e;
  font-family: "Poppins-bold";
  font-size: 0.9rem;
  padding: 5px 14px;
  border-radius: 6px;
  margin-bottom: 20px;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 15px rgba(255, 214, 10, 0.2);
}
.pro-sales-title {
  margin: 0;
  font-family: "Poppins-bold", sans-serif;
  font-size: 2.8rem;
  color: #fff;
  letter-spacing: -1.5px;
  line-height: 1.2;
}
.pro-sales-subtitle {
  font-size: 1.1rem;
  color: #ebebf599;
  max-width: 550px;
  margin: 15px auto 0 auto;
  line-height: 1.7;
}

/* --- Pricing Plans Section --- */
.pricing-plans-section {
  display: grid;
  grid-template-columns: 1fr;
  gap: 25px;
  margin-bottom: 20px;
}
.plan-card {
  background-color: #1c1c1e;
  border: 1px solid #3a3a3c;
  border-radius: 16px;
  padding: 30px 25px;
  text-align: center;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  position: relative;
  overflow: hidden;
}
.plan-header {
  flex-grow: 1;
  margin-bottom: 30px;
}
.plan-header h3 {
  font-family: "Poppins-semibold", sans-serif;
  font-size: 1.4rem;
  color: #ffd60a;
  margin: 0 0 10px 0;
}
.plan-price {
  font-family: "Poppins-bold", sans-serif;
  font-size: 2.5rem;
  color: #fff;
  margin: 0 0 8px 0;
}
.plan-price span {
  font-family: "Poppins-light", sans-serif;
  font-size: 1rem;
  color: #ebebf599;
  margin-left: 5px;
}
.plan-description {
  font-size: 0.95rem;
  color: #ebebf599;
  line-height: 1.6;
  margin: 0;
  min-height: 45px;
}
.upgrade-btn-pricing {
  width: 100%;
  height: 50px;
  background-color: #333;
  color: #fff;
  border: 1px solid #555;
  border-radius: 10px;
  font-family: "Poppins-semibold", sans-serif;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* --- Most Popular Plan --- */
.plan-card.popular {
  border-color: #1883dc;
  transform: scale(1.05);
  box-shadow: 0 0 30px rgba(24, 131, 220, 0.25),
    inset 0 0 15px rgba(24, 131, 220, 0.1);
}
.most-popular-badge {
  position: absolute;
  top: 15px;
  right: -45px;
  background-color: #1883dc;
  color: white;
  font-family: "Poppins-bold", sans-serif;
  font-size: 0.8rem;
  padding: 6px 40px;
  transform: rotate(45deg);
}
.plan-card.popular .upgrade-btn-pricing {
  background-color: #1883dc;
  color: #fff;
  border: none;
  box-shadow: 0 4px 20px rgba(24, 131, 220, 0.3);
}
.cancel-info {
  margin-bottom: 80px;
  color: #8e8e93;
  font-size: 0.9rem;
}

/* --- Two-Column Grid --- */
.breakdown-and-reviews-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: flex-start;
  margin-bottom: 80px;
}
.comparison-title,
.testimonials-title,
.faq-title {
  font-family: "Poppins-bold", sans-serif;
  font-size: 2rem;
  color: #fff;
  margin-bottom: 30px;
}
.comparison-table-container {
  max-width: 700px;
  margin: 0 auto;
  background-color: #1c1c1e;
  border: 1px solid #3a3a3c;
  border-radius: 14px;
  padding: 15px 20px;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.comparison-header {
  display: flex;
  justify-content: flex-end;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #3a3a3c;
}
.plan-name-header {
  width: 100px;
  text-align: center;
  font-family: "Poppins-semibold";
  color: #8e8e93;
  font-size: 0.9rem;
}
.feature-name-header {
  flex-grow: 1;
}
.comparison-row {
  display: flex;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #2c2c2e;
}
.comparison-row:last-child {
  border-bottom: none;
}
.feature-name {
  flex-grow: 1;
  text-align: left;
  font-size: 1rem;
  color: #f2f2f7;
}
.feature-value {
  width: 100px;
  text-align: center;
  font-family: "Poppins-regular";
  font-size: 1.1rem;
}
.feature-value.checkmark {
  color: #1883dc;
  font-family: "Poppins-semibold";
  font-size: 1.3rem;
}
.feature-value.limit {
  color: #8e8e93;
}
.pro-badge-small {
  display: inline-block;
  background-image: linear-gradient(45deg, #ffd60a, #ffcc00);
  color: #1c1c1e;
  font-family: "Poppins-bold";
  font-size: 0.8rem;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

/* --- Testimonials Section --- */
.testimonials-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.review-card {
  background-color: #1c1c1e;
  border: 1px solid #3a3a3c;
  border-radius: 12px;
  padding: 20px;
  text-align: left;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.review-name {
  font-family: "Poppins-semibold";
  color: #e5e5e5;
}
.review-stars {
  color: #ffd60a;
  font-size: 0.9rem;
}
.review-text {
  color: #ebebf599;
  line-height: 1.7;
  margin: 0;
}

/* --- FAQ Accordion Section --- */
.faq-section {
  margin-bottom: 80px;
}
.faq-accordion {
  max-width: 750px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-item {
  background-color: #1c1c1e;
  border: 1px solid #3a3a3c;
  border-radius: 10px;
  transition: background-color 0.2s ease;
}
.faq-item.active {
  background-color: #2c2c2e;
}
.faq-question {
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  padding: 20px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #f2f2f7;
  font-family: "Poppins-semibold";
  font-size: 1.1rem;
}
.faq-icon {
  font-size: 1.5rem;
  color: #8e8e93;
  transition: transform 0.3s ease;
}
.faq-item.active .faq-icon {
  transform: rotate(45deg);
  color: #fff;
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.faq-answer p {
  padding: 0 20px 20px 20px;
  margin: 0;
  color: #ebebf599;
  line-height: 1.7;
  text-align: left;
}

/* --- Footer Section --- */
.pro-page-footer {
  width: 100%;
  padding: 40px 20px 20px 20px;
  border-top: 1px solid #3a3a3c;
  text-align: center;
  z-index: 2;
  box-sizing: border-box;
  background-color: #111;
}
.footer-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}
.footer-links a {
  color: #8e8e93;
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s ease;
}
.footer-links a:hover {
  color: #fff;
}
.footer-links span {
  color: #555;
}
.footer-copyright {
  color: #555;
  font-size: 0.8rem;
  margin: 0;
}

/* --- Animations & Scroll Reveal --- */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.pricing-plans-section .reveal-on-scroll:nth-child(1) {
  transition-delay: 0s;
}
.pricing-plans-section .reveal-on-scroll:nth-child(2) {
  transition-delay: 0s;
}
.pricing-plans-section .reveal-on-scroll:nth-child(3) {
  transition-delay: 0s;
}
.breakdown-and-reviews-grid .reveal-on-scroll {
  transition-delay: 0s;
}
.faq-section.reveal-on-scroll {
  transition-delay: 0s;
}
@keyframes slowPulse {
  0% {
    transform: translateX(-50%) scale(1);
  }
  100% {
    transform: translateX(-50%) scale(1.1);
  }
}

/* --- HOVER EFFECTS (Desktop Only) --- */
@media (hover: hover) {
  .plan-card:not(.popular):hover {
    transform: translateY(-8px) scale(1.02);
    border-color: #666;
    box-shadow: 0 8px 30px rgba(102, 102, 102, 0.1);
  }
  .upgrade-btn-pricing:hover {
    background-color: #444;
    border-color: #777;
  }
  .plan-card.popular:hover {
    transform: scale(1.08) translateY(-8px);
    border-color: #1883dc;
    box-shadow: 0 8px 40px rgba(24, 131, 220, 0.35),
      inset 0 0 20px rgba(24, 131, 220, 0.15);
  }
  .plan-card.popular .upgrade-btn-pricing:hover {
    background-color: #1472bf;
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(24, 131, 220, 0.4);
  }
  .comparison-table-container:hover {
    transform: scale(1.02);
    border-color: #555;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  }
  .review-card:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
  }
}

/* --- Responsive Design --- */
@media (min-width: 768px) {
  .pro-sales-title {
    font-size: 3.8rem;
  }
  .pro-sales-subtitle {
    font-size: 1.2rem;
  }
  .pricing-plans-section {
    grid-template-columns: repeat(3, 1fr);
  }
  .plan-card.popular {
    transform: scale(1.05);
  }
  .comparison-table-container {
    padding: 25px 30px;
  }
  .faq-grid {
    grid-template-columns: 1fr 1fr;
    gap: 25px;
  }
}

@media (min-width: 1024px) {
  .get-pro-page-container {
    padding-top: 120px;
  }
  .breakdown-and-reviews-grid {
    grid-template-columns: 1.2fr 1fr;
    gap: 50px;
    text-align: left;
  }
}

/* ====================================================== */
/*            START: NAV MENU PRO CTA STYLES              */
/* ====================================================== */

/* 1. Target the button which now has the .nav-menu-button class */
.pro-nav-cta-btn {
  /* Make it a flex container to align "Get" and "PRO" */
  align-items: center;
  gap: 8px; /* Space between the text and the badge */

  /* --- THIS IS THE FIX --- */
  text-decoration: none; /* Removes the underline from the link */

  /* Remove the border from the previous version, if any */
  border: none;
  width: 170px;
  margin-left: 15px;
  display: none;
}

/* 2. Style the "Get" text */
.pro-nav-cta-text {
  /* This text should match the other nav buttons */
  color: rgb(198, 198, 198);
  /* The font-size and family are inherited from .nav-menu-button */
}

/* 3. The Golden "PRO" Badge */
.pro-badge-nav {
  display: inline-block;
  background-image: linear-gradient(45deg, #ffd60a, #ffcc00);
  color: #1c1c1e;
  font-family: "Poppins-bold";
  font-size: 0.8rem;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.5px;
  line-height: 1.2;
}

/* 4. The hover effect is now AUTOMATICALLY inherited from .nav-menu-button:hover! */
/* No extra hover code is needed. */
.pro-nav-cta-btn:hover {
  background-color: transparent;
}

/* ====================================================== */
/*             END: NAV MENU PRO CTA STYLES               */
/* ====================================================== */
.tag-item.is-locked .tag-pill {
  filter: grayscale(80%);
  opacity: 0.6;
}

.tag-item.is-locked {
  position: relative;
  pointer-events: none; /* Disables clicks on the item */
}

.pro-lock-icon {
  width: 20px;
  height: 20px;
  opacity: 0.8;
}
.pro-lock-badge {
  width: 35px;
  height: 23px;
}

/* --- Choose Active Group Styles --- */
.choose-active-group-container {
  text-align: center;
  padding: 40px 20px;
  margin-top: 60px;
  background-color: #1c1c1e;
  border: 1px solid #3a3a3c;
  border-radius: 12px;
}

.choose-active-group-container h2 {
  font-family: "Poppins-bold";
  color: #fff;
  font-size: 1.5rem;
  margin-top: 0;
}

.choose-active-group-container p {
  color: #ebebf599;
  max-width: 400px;
  margin: 10px auto 30px auto;
  line-height: 1.6;
}

.group-selection-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.group-selection-btn {
  width: 100%;
  max-width: 300px;
  height: 50px;
  background-color: #333;
  color: #fff;
  border: 1px solid #555;
  border-radius: 10px;
  font-family: "Poppins-semibold", sans-serif;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.group-selection-btn:hover {
  background-color: #1883dc;
  border-color: #1883dc;
  transform: translateY(-2px);
}

#tag-selection-backdrop,
#group-selection-backdrop {
  z-index: 10049;
}

#tag-selection-modal,
#group-selection-modal {
  z-index: 10050;
}

/* ================================== */
/*    START: Loading Screen CSS       */
/* ================================== */
#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #121212; /* Or your site's background color */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 99999; /* <-- INCREASE THIS VALUE */
}

.loading-logo {
  width: 200px; /* Adjust size as needed */
  margin-bottom: 20px;
}

.loading-spinner {
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top: 4px solid #ffffff;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* ================================== */
/*     END: Loading Screen CSS        */
/* ================================== */

/* --- START: Final Layout with Correct Button Positioning (Wider Screens) --- */
@media (min-width: 914px) {
  /* --- Main Layout Grid --- */
  #complete-session-main-container {
    width: calc(100% - 80px);
    max-width: none;
    margin: 0 auto;
    padding: 110px 0 50px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 35px 45px;
  }

  /* --- Element Styling & Placement --- */

  /* Row 1: Session Name */
  #complete-session-name-input-container {
    grid-column: 1 / 3;
  }
  #complete-session-name-input {
    background-color: #222224;
    border: 1px solid #3a3a3c;
    border-radius: 8px;
    height: 55px;
    width: 100%;
    padding: 0 20px;
    font-size: 20px;
    margin-left: 0;
  }
  #complete-session-name-input:focus {
    border-bottom: 1px solid #007aff;
  }

  /* Row 2: Duration and Date */
  #complete-session-information-container {
    display: contents;
  }
  #complete-session-duration-div,
  #complete-session-date-div {
    margin: 0;
  }
  #complete-session-duration-div > p:first-child,
  #complete-session-date-div > p:first-child {
    font-size: 16px;
    font-weight: 400;
    color: #e8e8e8;
    text-transform: none;
  }
  #complete-session-duration,
  #complete-session-date {
    background-color: #222224;
    border: 1px solid #3a3a3c;
    border-radius: 8px;
    height: 55px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    font-size: 18px;
  }

  /* Row 3: Rate Your Session (Left) and Assign a Tag (Right) */
  #complete-session-rate-session-div {
    grid-column: 1;
    margin-top: 0;
  }
  #rate-session-header {
    font-size: 16px;
    font-weight: 400;
    color: #e8e8e8;
    text-transform: none;
    margin-left: 0;
  }
  .rating-slider-container {
    width: 430px;
    max-width: 450px;
    margin-left: 0;
    height: 55px;
  }
  .slider-track {
    background-color: #222224;
    border: 1px solid #3a3a3c;
    width: 430px;
  }
  .slider-thumb {
    border-width: 3px;
    width: 40px;
  }

  #session-tag-container {
    grid-column: 2;
    grid-row: 3;
  }
  #session-tag-container > p,
  #session-notes-heading {
    font-size: 16px;
    font-weight: 400;
    color: #e8e8e8;
    text-transform: none;
    margin-left: 0;
  }
  #session-tag-dropdown .dropdown-button {
    background-color: #222224;
    border: 1px solid #3a3a3c;
    border-radius: 8px;
    height: 55px;
    width: 350px;
    margin-left: -27px;
  }
  #session-tag-options {
    margin-left: -27px;
  }

  /* --- PHOTO UPLOAD & BUTTON POSITIONING FIX --- */

  /* Use Flexbox on the container for robust alignment */
  #upload-session-img-container {
    grid-column: 1;
    grid-row: 4 / span 2;
    margin-top: 0;
    display: flex; /* THIS IS A KEY CHANGE */
    align-items: center; /* Vertically aligns the photo box and the button */
  }

  #label-for-upload-session-img {
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: transparent;
    border: 2px dashed #4a4a4e;
    border-radius: 10px;
    padding: 10px 15px;
    cursor: pointer;
    transition: border-color 0.2s ease;
    margin-top: 200px;
    min-height: 250px;
    width: 400px;
  }
  #session-img-preview {
    max-height: 250px;
    max-width: 250px;
  }
  #label-for-upload-session-img:hover {
    border-color: #007aff;
  }
  #upload-session-img-icon-div {
    width: auto;
    height: auto;
    border: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* margin-left: 20px; */
    /* display: none; */
  }
  #add-session-img-span {
    font-size: 18px;
    color: #e8e8e8;
    margin-left: 15px;
  }

  /* Reset button positioning to work within the flex container */
  #remove-img-button {
    position: static;
    transform: none;
    margin-left: 15px; /* Add space between the photo box and the button */
    flex-shrink: 0; /* Prevent the button from being squished */
    margin-top: 200px;
    cursor: pointer;
  }

  /* Right Column: Notes */
  #session-notes-main-container {
    grid-column: 2;
    grid-row: 4;
    margin: 0;
    height: 100%;
  }
  #session-notes-textarea {
    background-color: #222224;
    border: 1px solid #3a3a3c;
    border-radius: 8px;
    height: 100%;
    min-height: 250px;
    padding: 15px 20px;
    font-size: 17px;
  }

  /* --- Cleanup --- */
  #below-rating-horizontal-line,
  #below-upload-session-img {
    display: none;
  }
}
/* --- END: Final Layout --- */

/* --- START: Final Layout with Merged Photo Styles and Repositioned Elements --- */
@media (min-width: 914px) {
  /* This targets the layout only when the 'Edit duration' div is present */
  body:has(#edit-duration-div) #complete-session-main-container {
    width: calc(100% - 80px);
    max-width: none;
    margin: 0 auto;
    padding: 110px 0 50px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 35px 45px;
  }

  #tags-quick {
    width: 405px;
  }

  /* --- Element Styling & Placement for Edit Page --- */

  /* Row 1: Session Name */
  body:has(#edit-duration-div) #complete-session-name-input-container {
    grid-column: 1 / 3;
  }
  body:has(#edit-duration-div) #complete-session-name-input {
    background-color: #222224;
    border: 1px solid #3a3a3c;
    border-radius: 8px;
    height: 55px;
    width: 100%;
    padding: 0 20px;
    font-size: 20px;
  }

  /* Row 2: Duration and Date */
  body:has(#edit-duration-div) #complete-session-information-container {
    display: contents;
  }
  body:has(#edit-duration-div) #complete-session-duration-div,
  body:has(#edit-duration-div) #complete-session-date-div {
    margin: 0;
  }
  body:has(#edit-duration-div) #complete-session-duration-div {
    grid-row: 2;
    grid-column: 1;
  }
  body:has(#edit-duration-div) #complete-session-date-div {
    grid-row: 2;
    grid-column: 2;
  }
  body:has(#edit-duration-div) #complete-session-duration-div > p:first-child,
  body:has(#edit-duration-div) #complete-session-date-div > p:first-child {
    font-size: 16px;
    font-weight: 400;
    color: #e8e8e8;
    text-transform: none;
  }
  body:has(#edit-duration-div) #complete-session-duration,
  body:has(#edit-duration-div) #complete-session-date {
    background-color: #222224;
    border: 1px solid #3a3a3c;
    border-radius: 8px;
    height: 55px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    font-size: 18px;
  }

  /* Row 3: Edit Duration (Left) and Assign Tag (Right) - MOVED UP */
  body:has(#edit-duration-div) #edit-duration-div {
    grid-row: 3;
    grid-column: 1;
    margin: 0;
    display: block;
  }
  body:has(#edit-duration-div) #edit-duration-header {
    font-size: 16px;
    font-weight: 400;
    color: #e8e8e8;
    text-transform: none;
    margin-bottom: 8px;
  }
  body:has(#edit-duration-div) #edit-session-duration-input {
    background-color: #222224;
    border: 1px solid #3a3a3c;
    border-radius: 8px;
    height: 55px;
    padding: 0 20px;
    font-size: 18px;
    color: #e8e8e8;
    width: 120px;
  }

  body:has(#edit-duration-div) #session-tag-container {
    grid-column: 2;
    grid-row: 3; /* MOVED UP */
  }
  body:has(#edit-duration-div) #session-tag-container > p,
  body:has(#edit-duration-div) #session-notes-heading {
    font-size: 16px;
    font-weight: 400;
    color: #e8e8e8;
    text-transform: none;
    margin-left: 0;
  }
  body:has(#edit-duration-div) #session-tag-dropdown .dropdown-button {
    background-color: #222224;
    border: 1px solid #3a3a3c;
    border-radius: 8px;
    height: 55px;
    width: 350px;
    margin-left: -27px;
  }
  body:has(#edit-duration-div) #session-tag-options {
    margin-left: 0;
  }

  /* Row 4: Rate Session (Left) and Notes (Right) - MOVED UP */
  body:has(#edit-duration-div) #complete-session-rate-session-div {
    grid-row: 4;
    grid-column: 1;
    margin-top: 0;
  }
  body:has(#edit-duration-div) #rate-session-header {
    font-size: 16px;
    font-weight: 400;
    color: #e8e8e8;
    text-transform: none;
    margin-left: 0;
  }
  body:has(#edit-duration-div) .rating-slider-container {
    width: 430px;
    max-width: 450px;
    margin-left: 0;
    height: 55px;
  }
  body:has(#edit-duration-div) .slider-track {
    background-color: #222224;
    border: 1px solid #3a3a3c;
    width: 430px;
  }
  body:has(#edit-duration-div) .slider-thumb {
    border-width: 3px;
    width: 10%;
  }

  body:has(#edit-duration-div) #session-notes-main-container {
    grid-column: 2;
    grid-row: 4; /* MOVED UP */
    margin: 0;
    height: 100%;
  }
  body:has(#edit-duration-div) #session-notes-textarea {
    background-color: #222224;
    border: 1px solid #3a3a3c;
    border-radius: 8px;
    height: 400px;
    min-height: 85px; /* Adjust to fit new position */
    padding: 15px 20px;
    font-size: 17px;
  }

  /* --- MERGED PHOTO UPLOAD STYLES START HERE --- */

  /* Placed in Row 5, Left Column */
  body:has(#edit-duration-div) #upload-session-img-container {
    grid-column: 1;
    grid-row: 5; /* Positioned below Rate Session */
    margin-top: 0;
    display: flex;
    align-items: center;
  }

  /* STYLES FROM REFERENCE CODE */
  body:has(#edit-duration-div) #label-for-upload-session-img {
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: transparent;
    border: 2px dashed #4a4a4e;
    border-radius: 10px;
    padding: 10px 15px;
    cursor: pointer;
    transition: border-color 0.2s ease;
    margin-top: 80px;
    min-height: 250px;
    margin-top: -550px;
    width: 400px;
  }
  body:has(#edit-duration-div) #session-img-preview {
    max-height: 250px;
    max-width: 250px;
  }
  body:has(#edit-duration-div) #label-for-upload-session-img:hover {
    border-color: #007aff;
  }
  body:has(#edit-duration-div) #upload-session-img-icon-div {
    width: auto;
    height: auto;
    border: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  body:has(#edit-duration-div) #add-session-img-span {
    font-size: 18px;
    color: #e8e8e8;
    margin-left: 15px;
  }
  /* STYLES FROM REFERENCE CODE */
  body:has(#edit-duration-div) #remove-img-button {
    position: static;
    transform: none;
    margin-left: 15px;
    flex-shrink: 0;
    margin-top: -550px;
    cursor: pointer;
  }

  /* --- Cleanup --- */
  body:has(#edit-duration-div) #below-rating-horizontal-line,
  body:has(#edit-duration-div) #below-upload-session-img {
    display: none;
  }
}

@media (max-width: 913px) {
  /* Container for the "Edit duration" section */
  #edit-duration-div {
    display: flex; /* Change from flex to block to stack elements */
    margin-left: 15px;
  }

  /* The "Edit duration (m):" text label */
  #edit-duration-header {
    margin-bottom: 8px; /* Add space between the label and the input box */

    text-transform: none;
    margin-block-end: 8px; /* Ensure consistent bottom margin */
    white-space: nowrap;
    color: rgb(198, 198, 198);
  }

  /* The input box for the minutes */
  #edit-session-duration-input {
    width: 100%; /* Ensure the input box fills the available width */
    margin-bottom: 7px;
    margin-left: 6px;
  }
}

/* ====================================================== */
/*          START: FINAL POLISH & FIXES V2                */
/* ====================================================== */

/* --- 1. Page Background & Height Fix --- */
/* This now ensures the background color is applied to the full viewport height */
html,
body {
  min-height: 100%;
}
#edit-profile-modal-background {
  --group-bg: #1c1c1e;
  --input-bg: #121212;
  --border-color: #38383a;
  --text-primary: #f2f2f7;
  --text-secondary: #8e8e93;
  --action-blue: #0a84ff;
  --action-red: #ff453a;
  --hover-border: #5b5b5c;
  --active-bg: #2c2c2e;

  background-color: #000;
  font-family: "Poppins-light", sans-serif;
  min-height: 100vh; /* Ensures this container itself is also full height */
  box-sizing: border-box;
}
#edit-profile-modal-background * {
  font-family: inherit;
}

/* --- 2. Main Layout --- */
#edit-profile-content {
  padding: 80px 15px 40px 15px;
  max-width: 1000px;
  margin: 0 auto;
  align-items: initial;
  justify-content: initial;
}
#edit-profile-columns-container {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 100%;
}

/* --- 3. Profile Picture Section --- */
#change-pfp-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 10px 0 20px 0;
  width: 100%;
  border-bottom: none;
  background: none;
  margin: 0;
}
#edit-profile-pfp {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  margin-bottom: 0;
}
#label-for-change-pfp {
  color: var(--action-blue);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
#label-for-change-pfp:hover {
  opacity: 0.8;
}

/* --- 4. Input Sections --- */
.profile-input-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 15px;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  background-color: var(--group-bg);
  border-radius: 12px;
}
.profile-input-section > div {
  padding: 0;
  margin: 0;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.profile-input-section h3 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
}
/* Re-style .basic-input but specifically exclude the password inputs */
#new-username-input,
#one-word-input,
#link-input,
#bio-input {
  width: 100%;
  box-sizing: border-box;
  background-color: transparent;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 12px;
  font-size: 1rem;
  color: var(--text-primary);
  text-align: left;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  margin: 0;
}
#new-username-input:focus,
#one-word-input:focus,
#link-input:focus,
#bio-input:focus {
  outline: none;
  border-color: var(--action-blue);
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.2);
}
#bio-input {
  min-height: 100px;
  resize: none;
}

/* --- 5. Button Sections --- */
#profile-options-buttons-container,
#extra-options-container,
#profile-options-red-buttons-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 15px;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  background-color: var(--group-bg);
  border-radius: 12px;
}
.profile-options-button,
#log-out-button,
.red-button {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 12px;
  background: none;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
/* This specifically removes the new border style from the original password container */
#profile-options-buttons-container > #change-password-container {
  border: none;
}
.profile-options-button:hover,
#log-out-button:hover,
.red-button:hover {
  border-color: var(--hover-border);
  background-color: rgba(255, 255, 255, 0.05);
}
.profile-options-button:active,
#log-out-button:active,
.red-button:active {
  background-color: var(--active-bg);
  border-color: var(--hover-border);
}
#log-out-button,
.red-button {
  color: var(--action-red);
}

/* --- 6. Desktop Two-Pillar Layout --- */
@media (min-width: 914px) {
  #edit-profile-columns-container {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
  }
  .edit-profile-left-pillar,
  .edit-profile-right-pillar {
    flex: 1;
    max-width: 450px;
    display: flex;
    flex-direction: column;
    gap: 30px;
  }
}
/* ====================================================== */
/*          START: PASSWORD & POPUP REDESIGN              */
/* ====================================================== */

/* --- 1. "Change Password" Section Overhaul --- */

/* A) RESET: Neutralize all previous styles for a clean slate. */
#change-password-container,
#change-password-container > *,
.password-input-wrapper > * {
  all: unset; /* The most powerful reset */
  display: block; /* Re-apply display so elements are visible */
  box-sizing: border-box; /* Makes layout math predictable */
}

/* B) REBUILD: Apply a new, clean, flexbox-based layout. */
#change-password-container {
  display: none; /* Switched to flexbox for proper alignment */
  flex-direction: column; /* Stack items vertically */
  gap: 15px; /* Consistent spacing between items */
  width: 100%;
  padding: 15px;
}

#change-password-container .password-header {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.password-input-wrapper {
  position: relative;
  width: 100%;
}

/* C) RESTORE: Re-apply your original, functional input and button styles. */
#new-password-input,
#confirm-new-password-input {
  /* Restoring original input styles */
  background-color: rgb(18, 18, 18);
  border: none;
  font-size: 18px;
  color: rgb(223, 223, 223);
  padding: 12px;
  border-bottom: 1px solid rgb(68, 68, 68);
  border-radius: 0px;
  width: 100%;
  transition: border-color 0.2s ease;
}
#new-password-input:focus,
#confirm-new-password-input:focus {
  outline: none;
  box-shadow: none;
  border-bottom-color: var(--action-blue);
}
#remove-password-changes {
  /* Restoring original 'x' button styles */
  position: relative;
  top: -90px;
  left: 245px;
  transform: translateY(-50%);
  color: rgb(236, 236, 236);
  cursor: pointer;
  font-size: 22px;
}
#check-new-password-button {
  /* Making it a proper button aligned to the right */
  align-self: flex-end;
  background: none;
  border: none;
  color: var(--action-blue);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

/* --- 2. "Delete Account" Popup Redesign --- */

/* A) RESET: Neutralize old popup styles. */
#delete-account-confirmation {
  all: unset;
  display: none; /* Keep it hidden initially */
  box-sizing: border-box;
}

/* B) REBUILD: Style as a clean, centered modal. */
#delete-account-confirmation {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000002;

  width: 90%;
  max-width: 340px;

  background-color: var(--group-bg);
  border-radius: 14px;
  border: 1px solid var(--border-color);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

  padding: 25px;
  text-align: center;
}

#delete-account-confirmation p {
  font-family: "Poppins-light", sans-serif;
  font-size: 1.1rem;
  color: var(--text-primary);
  line-height: 1.5;
  margin: 0 0 25px 0;
}

/* Create a flex container for the two buttons */
#delete-account-confirmation > .button-container {
  display: flex;
  gap: 10px;
}

#confirm-delete-account,
#confirm-delete-account-go-back {
  /* Shared button styles */
  flex: 1; /* Make both buttons share the space equally */
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  padding: 12px;
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

/* Primary (Delete) button style */
#confirm-delete-account {
  background-color: var(--action-red);
  color: white;
  border: none;
}
#confirm-delete-account:hover {
  opacity: 0.85;
}

/* Secondary (Go Back) button style */
#confirm-delete-account-go-back {
  background-color: #38383a;
  color: var(--text-primary);
  border: none;
}
#confirm-delete-account-go-back:hover {
  background-color: #49494b;
}

@media (max-width: 913px) {
  #edit-profile-modal-content {
    padding-bottom: 65px;
  }
}

.bio-textarea {
  height: 100px !important; /* Fixed height (approx 4 lines) */
  resize: none !important; /* Disable resizing handle */
  overflow-y: auto;
}
.profile-bio-container {
  text-align: left; /* Or center, depending on your design */
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 0 10px; /* Add padding if it touches edges */
}

.user-bio-text {
  font-size: 0.95rem;
  color: var(--text-primary); /* White/Off-white */
  margin-bottom: 5px;
  white-space: pre-wrap; /* Preserves newlines typed in the textarea */
  line-height: 1.4;
  max-width: 100%;
  word-wrap: break-word; /* Prevents long words breaking layout */
}

.user-link-text {
  font-size: 0.9rem;
  color: #0a84ff; /* Blue link color */
  text-decoration: none;
  font-weight: 500;
  display: inline-block;
  margin-top: 4px;
}

.user-link-text:hover {
  text-decoration: underline;
  opacity: 0.8;
}

#profile-bio {
  color: rgb(210, 210, 210);
  /* Changed margin to padding to keep it inside the box */
  margin-left: 0;
  padding-left: 18px;
  font-size: 16px;
  /* These lines ensure long words don't break the mobile layout */
  white-space: pre-wrap;
  word-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

#profile-link {
  text-decoration: underline;
  /* Changed margin to padding */
  margin-left: 0;
  padding-left: 18px;
  font-size: 16px;
  /* Ensure links wrap if they are too long */
  word-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
  display: inline-block;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Add to your style.css */

.member-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #1e1e1e;
  padding: 12px;
  border-radius: 12px;
  margin-bottom: 10px;
  border: 1px solid #333;
  z-index: 1000900;
}

.member-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.member-pfp {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #444;
}

.member-name {
  color: #fff;
  font-weight: 500;
  font-size: 16px;
}

.kick-btn {
  background-color: #3e1212;
  color: #ff6b6b;
  border: 1px solid #7f1d1d;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.kick-btn:hover {
  background-color: #7f1d1d;
  color: white;
}

/* Stats Page Specifics */

.stats-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}

@media (min-width: 768px) {
  .stats-controls {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* 3-Way Toggle */
.period-toggle-container {
  position: relative;
  display: flex;
  background-color: #2c2c2e;
  border-radius: 25px;
  padding: 4px;
  width: 300px;
  height: 45px;
  box-sizing: border-box;
  border: 1px solid #3a3a3c;
  border-radius: 8px;
}

.period-slider {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 32%; /* Approx 1/3 minus padding */
  height: 35px;
  background-color: #1883dc; /* Your brand blue */
  border-radius: 20px;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  z-index: 1;
  border-radius: 6px;
}

.period-btn {
  flex: 1;
  background: none;
  border: none;
  color: #8e8e93;
  font-family: "Poppins-medium";
  font-size: 14px;
  z-index: 2;
  cursor: pointer;
  transition: color 0.3s;
}

.period-btn.active {
  color: white;
}

/* Stats Summary */
.stats-summary {
  text-align: center;
  margin-bottom: 40px;
}
.stats-summary h2 {
  color: #fff;
  font-size: 1.5rem;
  margin: 0 0 5px 0;
}
.stats-summary p {
  color: #8e8e93;
  margin: 0;
}

/* Charts Grid */
.charts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 900px) {
  .charts-grid {
    grid-template-columns: 1fr 1fr;
  }
  .chart-card.full-width {
    grid-column: 1 / -1;
  }
}

.chart-card {
  background-color: #1c1c1e;
  border: 1px solid #3a3a3c;
  border-radius: 16px;
  padding: 20px;
  z-index: 0;
}

.chart-card h3 {
  margin: 0 0 20px 0;
  color: #e5e5e5;
  font-size: 1.1rem;
}

.chart-wrapper {
  position: relative;
  height: 250px;
  width: 100%;
}
.chart-wrapper canvas {
  /* This locks the page scroll when touching the chart */
  touch-action: pan-y;
}

/* Custom Legend for Pie Chart */
.pie-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
  justify-content: center;
}
.legend-item {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #ccc;
}
.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
}

/* Stats Page Layout */
.stats-content-container {
  width: 100%;
  max-width: 800px; /* The limit you requested */
  margin: 0 auto; /* Centers the container horizontally */
  padding: 120px 20px 120px 20px; /* Keeps spacing from Navbar/Bottombar */
  box-sizing: border-box; /* Ensures padding doesn't extend width beyond 100% */
}

/* Ensure the controls inside don't overflow on very small screens */
.stats-controls {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-bottom: 15px; /* Reduced from 30px */
}

/* On larger screens (tablets/desktop), spread controls out */
@media (min-width: 600px) {
  .stats-controls {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* The overlay container */
.stats-lock-overlay {
  display: none;
  position: absolute;
  top: -10px;
  left: -20px;
  width: calc(100% + 40px);
  height: calc(100% + 20px);

  background-color: rgba(18, 18, 18, 0.3);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);

  z-index: 50;
  border-radius: 16px;

  /* --- CHANGED PROPERTIES BELOW --- */
  /* Ensure flex is set (it gets toggled to 'flex' by JS, but good to have base style) */
  align-items: flex-start; /* Align content to the TOP, not center */
  justify-content: center; /* Keep horizontally centered */
  padding-top: 60px; /* Add spacing from the top so it sits nicely below the selector */
}

/* The content box inside the overlay */
.lock-content {
  text-align: center;
  background-color: #1c1c1e;
  border: 1px solid #3a3a3c;
  padding: 40px;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  max-width: 300px;
}

.lock-content h3 {
  color: #fff;
  margin: 0 0 10px 0;
  font-size: 1.2rem;
}

.lock-content p {
  color: #8e8e93;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}

#stats-page-modal-backdrop {
  position: fixed !important; /* Forces it relative to the browser window, not the parent div */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.27); /* Darkens the screen */
  z-index: 9998 !important; /* High number to sit above charts */
  display: none; /* JavaScript controls this */
}

.chart-wrapper,
canvas {
  z-index: 1; /* Low number */
  position: relative;
}

/* Override full-screen mobile style ONLY for the Quick Create modal */
@media (max-width: 451px) {
  #quick-create-tag-modal {
    width: 90% !important; /* Make it fit within the screen width */
    max-width: 350px; /* Optional: Prevent it from getting too wide */
    height: auto !important; /* Let it shrink to fit the content */
    top: 50% !important; /* Position vertically center */
    left: 50% !important; /* Position horizontally center */
    transform: translate(-50%, -50%) !important; /* Center it perfectly */
    border-radius: 15px !important; /* Bring back the rounded corners */
    border: 1px solid #333 !important; /* Optional: Add border back if needed */
  }
}

/* --- Reset Tracking Modal Styles --- */

/* The Divider line with text in the middle */
.reset-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 15px 0;
}

.reset-divider-line {
  flex: 1;
  height: 1px;
  background-color: #3a3a3c;
}

.reset-divider-text {
  color: #8e8e93;
  font-size: 12px;
  font-family: "Poppins-medium", sans-serif;
  letter-spacing: 0.5px;
}

/* Custom styling for the Date Picker to match dark mode */
#reset-custom-date-input {
  width: 100%;
  height: 45px;
  background-color: rgb(26, 26, 26); /* Matches your .modal-input-area */
  border: 1px solid rgb(83, 83, 83);
  border-radius: 8px;
  padding: 0 15px;
  color: rgb(233, 233, 233);
  font-family: "Poppins-light", sans-serif;
  font-size: 16px;
  box-sizing: border-box;
  margin-bottom: 15px;

  /* This forces the calendar popup to be dark on supported browsers */
  color-scheme: dark;
}

#reset-custom-date-input:focus {
  outline: none;
  border-color: #1883dc; /* Your brand blue */
}

/* Specific button style for the main "Reset Now" button to make it stand out */
#confirm-reset-now-btn {
  width: 100%;
  height: 45px;
  font-size: 16px;
  margin-top: 5px;
  transition: 0.2s ease-in-out;
  cursor: pointer;
}
#confirm-reset-now-btn:hover {
  background-color: #1267ad;
}

#reset-tracking-modal {
  z-index: 10000000;
}