*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  /* text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); */
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
  line-height: 1.6;
  color: #b4b4b4f1;
  background-color: #fefefe;
  background-color: #eeeeee;
  overflow: hidden;

  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}
body::-webkit-scrollbar {
  display: none; /* Chrome, Safari, and Opera */
}

h1,
h2,
a {
  margin: 0;
}

h1 {
  font-size: 2.25rem;
  font-weight: 300;
  color: #ffffff;
}

h2 {
  font-size: 1.3125rem;
}

.form-inputs::placeholder {
  color: #adadadd3;
  font-size: 1rem;
  /* text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); */
}

.form-inputs-100 {
  width: 100% !important;
}

.form-inputs {
  width: 85%;

  padding: 1.15em 2.15em;
  font-size: 0.725rem;
  letter-spacing: 1px;
  border: 1px solid #000000;
  margin-bottom: 2rem;
  color: #000000;
  background-color: #ffffff;
  border-radius: 3px;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.passwordFormInputs {
  margin-bottom: 0.75em;
}

.passwordContainer {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 0.85em;
  align-items: center;
}

.passwordInfoContainer {
  display: flex;
  justify-content: space-between;
}

.passwordtoggle {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 1px;
  padding: 0.55em;
  border-radius: 8px;
  border: 0;
  cursor: pointer;
  background-color: #ffffff;
  color: #adadad;
  width: 100%;
}

.passwordStrengthList {
  font-size: 0.85rem;
  background-color: #d40f0f;
  width: 100%;
  list-style: circle;
}

.pwItem {
  font-size: 0.8rem;
}

strong {
  color: #ffffff;
  font-weight: 600;
}

.forum-logo {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.forgot-password {
  border: none;
  padding: 1.15em;
  background-color: transparent;
  color: #e9e9e9de;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.margin-bottom-0 {
  margin-bottom: 0 !important;
}

.margin-bottom-1em {
  margin-bottom: 1em !important;
}

.action-button {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 1px;
  padding: 1.15em;
  border-radius: 5px;
  border: 0;
  cursor: pointer;
  width: 100%;
  margin-bottom: 0.95em;
}

.action-button--normal {
  background-color: #030303;
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
    /* Shadow for 3D effect */ 0 6px 20px rgba(0, 0, 0, 0.19); /* Additional shadow for depth */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Text shadow for better readability */
}

.action-button--alternative {
  background-color: #ffffff;
  color: #304e48;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
    /* Shadow for 3D effect */ 0 6px 20px rgba(0, 0, 0, 0.19);
}

#tillLottoButton {
  display: none !important;
}

.landingPageGrid {
  display: grid;
  align-items: center;
  justify-items: center;

  grid-template:
    minmax(1em, 1fr) auto 2fr auto minmax(1em, 1fr) / minmax(30px, 0fr)
    minmax(280px, auto) minmax(30px, 0fr);
  grid-template-areas:
    ".. .. .."
    ".. top .."
    ".. center .."
    ".. bottom .."
    ".. .. ..";
}

.alerts {
  color: #58585a;
}

.pageGrid {
  display: grid;
  align-items: center;
  justify-items: center;
  grid-template:
    minmax(1em, 1fr) auto 2fr auto minmax(0em, 0fr) / minmax(0px, 0fr)
    minmax(280px, auto) minmax(0px, 0fr);
  grid-template-areas:
    ".. .. .."
    ".. top .."
    ".. center .."
    ".. bottom .."
    ".. .. ..";
}

.landingPage {
  min-height: 100dvh;
  background: url("./img/resized/Evergreens_APP_Trolley_Screen_Optimized.jpg")
    no-repeat center center / cover;
}

.top {
  grid-area: top;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.center {
  grid-area: center;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.input-helper {
  width: 85%;
}

.button-helper {
  width: 85%;
}

.login-bottom-wrapper {
  background: url("./img/resized/Evergreens_APP_Pattern_Screen_Optimized.jpg")
    repeat center / cover;

  /* background-color: #95ba3a; */
  /* padding: 26px 30px 30px; */
  padding: 0 1em;
  padding-top: 1em;
  border-radius: 30px 30px 0 0;
  box-shadow: 0 2px 6px rgb(0, 0, 0),
    /* Shadow for 3D effect */ 0 6px 20px rgba(0, 0, 0, 0.19);
}
.homePage-bottom-wrapper {
  min-width: -webkit-fill-available;

  background-color: #ffffff;
  /* padding: 26px 30px 30px; */
  padding: 0 1em;
  padding-top: 1em;
  border-radius: 30px 30px 0 0;
  box-shadow: 0 2px 6px rgb(0, 0, 0),
    /* Shadow for 3D effect */ 0 6px 20px rgba(0, 0, 0, 0.19);
}

.bottom {
  grid-area: bottom;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  max-height: 200px;
  max-width: 200px;
  margin: 0;
  padding: 0.5em;
  display: block;
}
#splashLogo {
  height: 270px;
  width: 270px;
  margin: 0;
  padding: 0.5em;
  display: block;
}

.registerLogo {
  width: auto;
  height: 150px;
  object-fit: cover;
  align-self: center;
}

.map {
  grid-area: center;
  max-height: 300px;
  max-width: 300px;
  object-fit: cover;
  margin: 0;
  padding: 0;
}
#closeRegisterPageButton {
  margin-bottom: 0.5em;
}

.login-message {
  color: #1d1d1d;
  text-align: center;
  font-size: 1rem;
  font-family: "Poppins", sans-serif;
  /* font-weight: 400; */
  font-style: normal;
}

.or-message {
  color: #304e48;
}

.or-message-white {
  color: #666666;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.login-page {
  background-color: #eeeeee;
  overflow: auto;
  position: fixed;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 100%; /* dit move hom basies regs van die skerm af*/
  transform: translateX(0);
  transition: 0.5s;
  min-height: 100dvh;
  background: url("./img/resized/Evergreens_APP_Pattern_Screen_Optimized.jpg")
    repeat center / cover;
}

.login-center-wrapper {
  background-color: #ffffff;
  border-radius: 15px;

  margin-bottom: 1em;
  margin-top: 0.5em;
  width: 90%;
}
.forgot-center-wrapper {
  background-color: #ffffff;
  border-radius: 15px;
  padding: 1em 1.5em;

  width: 100%;
}

.infoModals {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #22212600;
  position: fixed;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 100%; /* dit move hom basies regs van die skerm af*/
  transform: translateX(0);
  transition: 0.5s;
  min-height: 100dvh;
}

.infoModalsOpen {
  transform: translateX(-100%);
}

.modalInfoContainer {
  border: 2px solid #86868600; /* This sets the initial border size */
  border-radius: 8px;
  padding: 2em 1em;
  margin: 1em;
  background-color: #000000;
  width: 95%;
  max-width: 400px;
}

.modalInfoAction {
  display: flex;
  flex-direction: column;
  align-content: center;
  text-align: center;
}

.loginPageOpen {
  transform: translateX(-100%);
}

/* app/home //////////////////////////////////////////////////////////////////////////*/

.appMainGrid {
  min-height: 100dvh;
  width: 100%;
  display: grid;
  grid-template: auto 1fr auto / auto auto auto auto;
  grid-template-areas:
    "header header header header"
    "panicBody panicBody panicBody panicBody"
    "footer footer footer footer";
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  background: url("./img/Evergreens\ APP\ Pattern_Wit.png") repeat center /
    cover;
}
.appMainGrid::-webkit-scrollbar {
  display: none; /* Chrome, Safari, and Opera */
}

.header {
  grid-area: header;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1em 1em 0;
}

.footer {
  grid-area: footer;
  padding: 0;
  margin: 0;
  width: 100%;
  text-align: center;
}

.requestNewJobButtonClass {
  margin-bottom: 0.5em;
  width: 90%;
  max-width: 400px;
}

.menuButton {
  grid-area: menuButton;
  background-color: #fe000000;
  color: #ffffff;
  cursor: pointer;
  background-color: #00000038;
  /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
 0 6px 20px rgba(0, 0, 0, 0.19); */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Text shadow for better readability */
  display: inline-block;
  font-size: 1.25rem;
  /* letter-spacing: 1px; */
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;

  /* padding: 0.75em 1.5em; */
  padding: 0.25em;
  border-radius: 5px;
  border: 0;
  cursor: pointer;
}

#menuButton {
  background-color: #000000;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1.15rem;
  margin-left: 80%;
}

.headerIcons {
  font-size: 1.15rem;
  color: #fa5f22;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
    /* Shadow for 3D effect */ 0 6px 20px rgba(0, 0, 0, 0.19); /* Additional shadow for depth */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.notificationIcon {
  align-self: center;
  color: #222126;
  color: #dfdfdf;
  margin: 0 0.25em;
  text-shadow: -1px -1px 0 #fa5f2200, 1px -1px 0 #fa5f2200, -1px 1px 0 #fa5f2200,
    1px 1px 0 #fa5f2200, 2px 2px 5px #fa5f2200;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
    /* Shadow for 3D effect */ 0 6px 20px rgba(0, 0, 0, 0.19); /* Additional shadow for depth */
}

.profile-inputs-helper {
  background-color: white !important;
  color: #304e48 !important;
  border: 2px solid #304e48 !important;
}

.profile-inputs-wrapper {
  display: grid;
  gap: 1em;
  justify-items: center;
}
#updatePersonalInformationButton {
  margin-top: 1em;
}
.profileIcon {
  align-self: center;
  color: #222126;
  color: #dfdfdf;
  text-shadow: -1px -1px 0 #fa5f2200, 1px -1px 0 #fa5f2200, -1px 1px 0 #fa5f2200,
    1px 1px 0 #fa5f2200, 2px 2px 5px #fa5f2200;
}

.headerLogo {
  margin-top: 1em;
  margin-bottom: 0.5em;
  width: auto;
  height: 130px;

  align-self: center;
}

.appActionButton {
  display: inline-block;
  font-size: 0.725rem;
  font-weight: 700;
  font-family: "Source Sans Pro", sans-serif;
  letter-spacing: 1px;
  padding: 1.15em;
  border-radius: 5px;

  border: 0;
  cursor: pointer;
  width: 85.5%;
  background-color: #ffffff;
  color: #304e48;
}

.appActionButtonNormal {
  background-color: #000000;
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
    /* Shadow for 3D effect */ 0 6px 20px rgba(0, 0, 0, 0.19); /* Additional shadow for depth */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Text shadow for better readability */
}

.panicBody {
  grid-area: panicBody;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  margin: 0 0.5em;
  /* margin-bottom: 1em; */
}

.panicBody::-webkit-scrollbar {
  display: none; /* Chrome, Safari, and Opera */
}

.myLocationWrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  max-width: 400px;
  min-width: -webkit-fill-available;
}

.myApproximateLocationTitle {
  font-size: 1rem;
  color: #ddc41c;
}

.myApproximateLocationIcon {
  font-size: 1.5rem;
  color: #d40f0f;
}

.myApproximateLocation {
  font-size: 0.95rem;
  color: #000000;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.myApproximateLocationContainerv2 {
  text-align: center;
  margin: 1em 0;
  width: 90%;
  max-width: 400px;
  padding: 0 0.5em;
  background-color: #ffffff;

  border-radius: 10px;
  box-shadow: 0 2px 6px rgb(0, 0, 0),
    /* Shadow for 3D effect */ 0 6px 20px rgba(0, 0, 0, 0.19); /* Additional shadow for depth */
}

.myApproximateLocationContainer {
  text-align: center;
  margin: 1em 0;
  width: 90%;
  max-width: 400px;
  padding: 1em; /* Increased padding for better layout */

  background-color: rgba(255, 255, 255, 0.15); /* Transparent white */
  border-radius: 10px;

  /* Glassmorphism effects */
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px); /* For Safari */

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.1);
}

.myLocation {
  width: 90%;
  height: 150px;
  object-fit: cover;
  border: solid #58585a59 2px;
  border-radius: 10px;
  margin-bottom: 1em;
}

#map {
  height: 200px;
  width: 200px;
}

.alertButtonsWrapperyu {
  position: relative; /* Set parent as a positioned element */
  margin-top: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding: 0em;
  margin: 0;
  background-color: #0000002c;
  /* background-image: url("./img/newgraphs/Dots.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100%; */
  border-radius: 30px 30px 0 0;
  box-shadow: 0 2px 6px rgb(0, 0, 0),
    /* Shadow for 3D effect */ 0 6px 20px rgba(0, 0, 0, 0.19); /* Additional shadow for depth */
}
.dots {
  background-image: url("./img/newgraphs/Dots_resized.png"); /* Update this path */
  background-size: cover; /* or try: contain, or 100% 100% */
  background-repeat: no-repeat;
  background-position: center top;
  background-color: #63636305;
  background-blend-mode: multiply;
  border-radius: 30px 30px 0 0;
  width: 100%;
  padding: 0em;
  margin: 0;
  height: 100%;
}

.alertButtonsWrapper {
  /* position: relative; */
  margin-top: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding: 0 1.25em;
  padding-top: 1em;
  margin: 0;

  width: 100%;
  background: url("./img/resized/Evergreens_APP_Pattern_Screen_Optimized.jpg")
    repeat center / cover;

  border-radius: 30px 30px 0 0;

  /* ✨ Glassmorphism magic */
  backdrop-filter: blur(2px); /* Applies the blur */
  -webkit-backdrop-filter: blur(2px); /* For Safari support */

  box-shadow: 0 2px 6px rgb(0, 0, 0), 0 6px 20px rgba(0, 0, 0, 0.19);
}

#medicalButton {
  background-color: #004bcc00;
}
.progress-container {
  width: 100%;
  height: 4px;
  background-color: #dddddd00;
  border-radius: 20px;
  outline: none;
  overflow: hidden;
  margin-bottom: 0;
}

#progressBar {
  width: 100%;
  height: 100%;
  width: 0;
  background-color: #d40f0ff3;
  transition: width 0.1s;
}

#panicStatustext {
  color: #ffffff;
  font-size: 0.95rem;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

i.fa-solid.fa-land-mine-on {
  font-size: 4rem;
}

i.fa-solid.fa-truck-medical {
  font-size: 4rem;
}

.panicButtons {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.75rem;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  border: 0;
  cursor: pointer;
  height: 3.75em;
  width: 3.75em;
  border-radius: 100%;
  background-color: #ffffff;
  margin: 0;
  margin-bottom: 0.5em;
}

#dangerButton {
  background-color: #ff000000;
}

.greenAmbulanceIcon {
  width: 100%;
  height: auto;
  background-color: #004bcc00;
  border-radius: 100%;
  width: 125px;
}

.redAlarmIcon {
  width: 100%;
  height: auto;
  background-color: #ffffff00;
  border-radius: 100%;
  width: 125px;
}

.callButton {
  display: inline-block;
  font-size: 1rem;
  font-weight: 700;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
  padding: 0.5em 0.7em;
  border: 0;
  cursor: pointer;
  color: #ffffff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
    /* Shadow for 3D effect */ 0 6px 20px rgba(0, 0, 0, 0.19);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Text shadow for better readability */
  min-width: fit-content;
  background-color: #fe0100;
  background-color: #00000038;
  background-color: #006237;
  text-decoration: none;
  outline: none;
  border-radius: 10px; /* Adjust as needed */
  width: 90%;
  max-width: 400px;
  text-align: center;
}

.filterTabsContainer {
  grid-area: filterTabs;
  overflow: hidden; /* Hide overflow without scrollbars */
  width: 100%; /* Ensure it fits the width of the app */
}

.filterTabs {
  display: flex;
  overflow-x: auto; /* Allow horizontal scrolling */
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  scrollbar-width: none; /* Hide scrollbar in Firefox */
  -ms-overflow-style: none; /* Hide scrollbar in IE 10+ */
  scroll-behavior: smooth; /* Smooth scrolling */
  padding-bottom: 0.5em;
  padding-top: 0.7em;
  padding-left: 0.5em;
  padding-right: 0.5em;
  border-bottom: 2px solid #58585a91;
}

.filterTabs::-webkit-scrollbar {
  display: none; /* Hide scrollbar in Chrome, Safari, and Opera */
}

.filterButtons {
  display: inline-block;
  font-size: 0.725rem;
  font-weight: 700;
  font-family: "Source Sans Pro", sans-serif;
  padding: 0.5em 1.5em;
  border-radius: 35px;
  border: 0;
  cursor: pointer;
  color: #ffffff;

  min-width: fit-content;
}

.filterButtonsNOMarginRight {
  margin-right: 0;
}

.notActiveFilterState {
  background-color: #bed3cf;
  color: #304e48;
}

.activeFilterState {
  background-color: #080808;
  color: #ffffff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Text shadow for better readability */
}

/* request job*/

.jobsPages {
  background-color: #1c1d27;
  position: fixed;
  width: 100%;
  top: 92;
  right: 0;
  bottom: 70;
  left: 100%; /* dit move hom basies regs van die skerm af*/
  transform: translateX(0);
  transition: 0.1s;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  scrollbar-width: none; /* Hide scrollbar in Firefox */
  -ms-overflow-style: none; /* Hide scrollbar in IE 10+ */
}

.jobsPages::-webkit-scrollbar {
  display: none; /* Hide scrollbar in Chrome, Safari, and Opera */
}

.jobsPagesOpen {
  transform: translateX(-100%);
}

.requestedJobsPageOpen {
  transform: translateX(-100%);
}

.requestedJobsFilterActiveState {
  background-color: #fa5f22;
}

/* menuPage */

.menuPage {
  /* background: url("./img/webp/reduced_size_new_image.webp") no-repeat center
    center / cover; */
  position: fixed;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  right: 100%; /* dit move hom basies regs van die skerm af*/
  transform: translateX(0);
  transition: 0.2s;
  min-height: 100dvh;
  z-index: 11;
  overflow-y: auto;
  overflow-x: hidden;

  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;
}

.menuPage::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.menuPageOpen {
  transform: translateX(100%);
}

.forgotPasswordPage {
  background: url("./img/resized/Evergreens_APP_Pattern_Screen_Optimized.jpg")
    repeat center / cover;
  background-color: #eeeeee;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 30px;
  gap: 0.95em;
}

/* PROFILE PAGE------------------------------------------- */

.appProfilePageGrid {
  background-color: #95ba3a;
  background: url("./img/resized/Evergreens_APP_Pattern_Screen_Optimized.jpg")
    repeat center / cover;

  min-height: 100dvh;
  display: grid;
  grid-template: auto 1fr 2fr / auto;
  grid-template-areas:
    "alternativeHeader"
    "profileHeroSection"
    "profileTypeSections";
  justify-items: center;
}

.profileTypeActiveFilterState {
  background-color: #fa5f2200;
}

.alternativeHeader {
  grid-area: alternativeHeader;
  display: flex;
  width: 100%;
  background-color: #000000;
  border-radius: 0 0 15px 15px;
  max-height: 80px;
}
.alternativeHeaderRepModal {
  display: flex;
  width: 100%;
  background-color: #df0606;
  border-radius: 0 0 15px 15px;
  max-height: 80px;

  position: sticky;
  top: 0;
  z-index: 10;
  margin: 0;
  padding: 0;
}

#closeManageCategoriesPageButton {
  align-self: center;
  margin-left: 1em;
  font-size: 1rem;
  font-weight: 900;
  color: #ffffff;
}

#closeTillLottoButton {
  align-self: center;
  margin-left: 1em;
  font-size: 1rem;
  font-weight: 900;
  color: #ffffff;
}

#closeDealsPageButton {
  align-self: center;
  margin-left: 1em;
  font-size: 1rem;
  font-weight: 900;
  color: #ffffff;
}
#closeTradingHoursButton {
  align-self: center;
  margin-left: 1em;
  font-size: 1rem;
  font-weight: 900;
  color: #ffffff;
}

#closeTier2PageButton {
  align-self: center;
  margin-left: 1em;
  font-size: 1rem;
  font-weight: 900;
  color: #ffffff;
}
#closeTier3PageButton {
  align-self: center;
  margin-left: 1em;
  font-size: 1rem;
  font-weight: 900;
  color: #ffffff;
}

#closeRepInfoModal {
  align-self: center;
  margin-left: 1em;
  font-size: 1rem;
  font-weight: 900;
  color: #ffffff;
}

.profileHeaderWrapper {
  background-color: #080808;
  display: flex;
  width: 100%;
  border-radius: 0 0 15px 15px;

  align-content: center;
  position: sticky;
  top: 0;
  z-index: 10;
  overflow-y: hidden;
  margin: 0;
  padding: 0;
}

.notificationsHeaderWrapper {
  background-color: #0c3111;
  display: flex;
  width: 100%;
  border-radius: 0 0 15px 15px;
  max-height: 80px;
  align-content: center;
}

.profileHeaderLogo {
  color: #fff;
  padding: 1em 0;
  margin: 0;
  font-size: 1rem;
  letter-spacing: 1;
  font-style: normal;
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  justify-self: left;
}
#signOutButton {
  margin-top: 1em;
  background-color: #00000000;
  color: #000000;
}

.closePageButtons {
  margin-right: 1.25em;
  display: inline-block;
  font-size: 0.725rem;
  font-weight: 700;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
  padding: 0.5em 0.7em;
  border-radius: 5px;
  border: 0;
  cursor: pointer;
  background-color: #58585a59;
  color: #ffffff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
    /* Shadow for 3D effect */ 0 6px 20px rgba(0, 0, 0, 0.19); /* Additional shadow for depth */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Text shadow for better readability */
  min-width: fit-content;
  align-self: center;
}
.closePageButtonsV2 {
  margin-right: 1.25em;
  display: inline-block;
  font-size: 0.825rem;
  font-weight: 500;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
  padding: 0.5em 0.7em;
  border-radius: 5px;
  border: 0;
  cursor: pointer;
  background-color: #58585a00;
  color: #ffffffea;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);

  min-width: fit-content;
  align-self: center;
}

#closeQuestionairePageButton {
  margin-left: 1em;
  background-color: #eee;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

#merkDitButton {
  margin-left: 0.5em;
  background-color: #eee;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.sectionCards {
  margin-top: 1em;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;

  border-radius: 20px 20px 20px 20px;
  padding: 1em 0;
  width: 95%;
  min-height: 70%;
  justify-self: center;
  margin-bottom: 0.5em;
}

.sectionCardsV2 {
  background-color: #1c1d2781;
  border: #58585a21 solid 1px;
}

.profileHeroSection {
  width: 50%;
  min-width: -webkit-fill-available;
  /* background: linear-gradient(to left, #ff1f1f, #000000); */
  background-color: #ffffff;
  grid-area: profileHeroSection;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 400px;
  margin-top: 0.5em;
  margin-left: 1.5em;
  margin-right: 1.5em;
  border-radius: 20px 20px 20px 20px;
  /* padding: 1em; */
}

.profileImage {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #616161;
  font-size: 3.85rem;
  color: #fefefe;
  padding: 1em;
  border-radius: 100%;
  width: 60px;
  height: 60px;
  margin-top: 0.5em;
  overflow: hidden;
}

.profileImageElement {
  width: 200px;
  align-self: center;
  justify-self: center;
}

.my-profile-indicator {
  font-size: 1.5rem !important;
  padding: 0 0 15px !important;
}

#linkAreaTitle {
  font-size: 1.25rem !important;
  color: #ffffff;
  font-weight: 700;
  font-family: "Poppins", sans-serif;
}
#tillSlipLottoTitle {
  font-size: 1.25rem !important;
  color: #ffffff;
  font-weight: 700;
  font-family: "Poppins", sans-serif;
}

#dealsPageTitle {
  font-size: 1.25rem !important;
  color: #ffffff;
  font-weight: 700;
  font-family: "Poppins", sans-serif;
}
#tradingHoursPageTitle {
  font-size: 1.25rem !important;
  color: #ffffff;
  font-weight: 700;
  font-family: "Poppins", sans-serif;
}

#linkAreaTitleT2 {
  font-size: 1.25rem !important;
  color: #ffffff;
  font-weight: 700;
  font-family: "Poppins", sans-serif;
}
#linkAreaTitleT3 {
  font-size: 1.25rem !important;
  color: #ffffff;
  font-weight: 700;
  font-family: "Poppins", sans-serif;
}
#repModalTitle {
  font-size: 1.25rem !important;
  color: #ffffff;
  font-weight: 700;
  font-family: "Poppins", sans-serif;
}
.profileMainTitles {
  margin-top: 0;
  font-size: 1.5rem;
  font-weight: 300;
  color: #000000;
}

.profileTypeContainer {
  margin-top: 0;
  padding-top: 0;
  display: flex;
  justify-content: space-around;
  align-content: center;
  gap: 0.5em;
  width: 100%;
}

#homePageLogo {
  height: 170px;
  width: 170px;
}

.profileFilterButtons {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 700;
  font-family: "Source Sans Pro", sans-serif;
  padding: 0.8em 1em;
  border-radius: 5px;
  border: 0;
  cursor: pointer;
  width: 20%;
  color: #ffffff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Text shadow for better readability */
  min-width: fit-content;
}

.profileTypeSections {
  grid-area: profileTypeSections;
  width: 100%;
  max-width: 400px;
  min-width: -webkit-fill-available;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.profilePagesOpen {
  transform: translateX(100%);
}

.profileSectionOpen {
  transform: translateX(100%);
}

.personalProfileFilterActiveState {
  background-color: #fa5f22;
}

#personalProfileFilter {
  margin-top: 0.5em;
}

.sectionFilterContainer {
  text-align: center;
  display: flex;
  padding-top: 0.85em;
  /* padding-bottom: 0.85em; */
  width: 100%;
  height: fit-content;
  align-items: flex-start;
  justify-content: space-evenly;
}

.userInfoFilterActiveState {
  background-color: #fa5f22;
}
.sectionFilterIcons {
  margin-right: 0.5em;
}

.profileContainerStyles {
  text-align: center;
  width: 100%;
}

.containerTitles {
  text-align: left;
}

.hideContainer {
  display: none;
}

.visibleState {
  display: block;
}

.userAngelsSearch {
  padding: 0.75em 0.95em;
  border-radius: 100px;
  border: 1px solid #58585a;
  outline: none;
  margin-top: 1.25em;
  font-size: 0.725rem;
  letter-spacing: 1px;
  border: 1.5px solid #ff723b0a;
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3),
    /* Inner shadow for depth */ 2px 2px 5px rgba(0, 0, 0, 0.2); /* Outer shadow for 3D effect */
  border-radius: 8px;
  border-bottom: #04e7f5 solid 2px;
  margin-bottom: 0.95rem;
  width: 95%;
  color: #58585a;
  background-color: #1c1d2700;
}

.myAngelsWrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.singleAngelContainer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.15em 0.75em;
  border-radius: 100px;
  outline: none;
  letter-spacing: 1px;
  border: #464646 solid 1.5px;

  border-radius: 15px; /* Adjust as needed */
  margin-bottom: 0.95rem;
  width: 95%;
  color: #313131;
  background-color: #02020200;
}

.myAngelsLabels {
  color: #000000;
  margin-left: 0.5em;
  letter-spacing: 1px;
  font-size: 0.725rem;
}

.viewAngelsButton {
  display: block;
  font-size: 0.725rem;
  font-weight: 700;
  font-family: "Source Sans Pro", sans-serif;
  padding: 0.5em 0.7em;
  border-radius: 5px;
  border: 0;
  cursor: pointer;
  background-color: #ffffff00;
  color: #000000;

  min-width: fit-content;
}

.addAngelsModal {
  text-align: center;
  padding: 2em 2em;
  margin-top: 1em;
  background-color: #ffffff;
  border: none;
  width: 95%;
  max-width: 400px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1007;
  border: #58585a21 solid 1px;
  border-radius: 20px;
  padding: 0.5em;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
    /* Shadow for 3D effect */ 0 6px 20px rgba(0, 0, 0, 0.19); /* Additional shadow for depth */
  color: #000000f1;

  box-shadow: 0 2px 6px #58585a59,
    /* Shadow for 3D effect */ 0 6px 20px rgba(0, 0, 0, 0.19); /* Additional shadow for depth */
  display: none;
}

.modalsBackdrop {
  background: rgba(
    28,
    29,
    39,
    0.418
  ); /* Converted to use the RGBA equivalent */
  backdrop-filter: blur(10px); /*Add a blur effect */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1002;
  display: none; /*Initially hidden */
}

.addAngelModalButton {
  margin-bottom: 0.85em;
}

.closeModalButtons {
  background-color: #ffffff59;
  color: #000000;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
    /* Shadow for 3D effect */ 0 6px 20px rgba(0, 0, 0, 0.19); /* Additional shadow for depth */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Text shadow for better readability */
  display: inline-block;
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 1px;
  padding: 1em;
  border-radius: 5px;
  border: 0;
  cursor: pointer;
  width: 45%;
  max-width: 350px;
  margin-bottom: 0.95em;
}

.manageCategoriesButton {
  width: 85%;
  justify-self: center;
  padding: 1.15em;
  border-radius: 35px;
  border: 0;
  cursor: pointer;
  margin-bottom: 1.25em;
}

.manageCategoriesPage {
  padding: 0;
  background-color: #95ba3a;
  background: url("./img/resized/Evergreens_APP_Pattern_Screen_Optimized.jpg")
    repeat center / cover;
  position: fixed;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateY(100%);
  transition: 0.5s;
  min-height: 100dvh;
  display: grid;
  grid-template: auto auto 1fr / auto;
  grid-template-areas:
    "alternativeHeader"
    "bodyCategories";
  z-index: 12;
}

.manageCategoriesPageT2 {
  padding: 0;
  background-color: #96ba3a00;
  background-image: url("./img/Evergreens\ APP\ Pattern\ Screen.jpg");
  background-repeat: repeat;
  background-position: center center;
  background-size: contain;
  position: fixed;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateY(100%);
  transition: 0.5s;
  min-height: 100dvh;
  display: grid;
  grid-template: auto auto 1fr / auto;
  grid-template-areas:
    "alternativeHeader"
    "bodyCategories";
  z-index: 20;
}

.manageCategoriesPageT3 {
  padding: 0;
  background-color: #000000;

  background-repeat: repeat;
  background-position: center center;
  background-size: contain;
  position: fixed;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateY(100%);
  transition: 0.5s;
  min-height: 100dvh;
  display: grid;
  grid-template: auto auto 1fr / auto;
  grid-template-areas:
    "alternativeHeader"
    "bodyCategories";
  z-index: 5000;
}

.manageCategoriesPageOpenT3 .container {
  position: relative;
  width: 100%; /* Adjust as needed */
  height: 100%; /* Adjust as needed */
  background: url("./img/webp/reduced_size_map_background.webp") no-repeat
    center center / cover;
}

.container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5); /* Black tint with 50% opacity */
  pointer-events: none; /* Makes sure this layer is not interactive */
}

/* ─── Area-rep bottom sheet ─────────────────────────────────────────── */
.repInfoModal {
  padding: 0;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0; /* anchor to the bottom edge */
  top: 0;
  height: 100dvh; /* ≈ 40 % of the viewport height */
  width: 100%;

  /* optional hard cap for tall screens */
  display: flex;
  flex-direction: column;
  background: rgb(255, 255, 255); /* translucent dark */
  /* backdrop-filter: blur(12px); /* glass blur effect */
  /* -webkit-backdrop-filter: blur(12px); for Safari support  */

  margin: 0;
  /* box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.25); */
  /* border: 1px solid rgba(255, 255, 255, 0.15); subtle border for glass look */

  transform: translateY(100%); /* start completely off-screen */
  transition: transform 0.35s ease;
  z-index: 9999;
  background: url("./img/resized/Evergreens_APP_Pattern_Screen_Optimized.jpg")
    repeat center / cover;

  overflow-y: hidden;
  overflow-x: hidden;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.repInfoModal.open {
  transform: translateY(0); /* slides up 40 % */
}

.repInfoModal::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.repInfoBody {
  padding: 1.5rem;
  font-size: 1rem;
}
.repPhoneLink {
  display: block;
  margin-top: 0.5rem;
  color: #95ba3a;
  text-decoration: none;
  font-weight: 600;
}

.repIconBtn {
  background: none;
  border: none;
  cursor: pointer;
  margin-left: 0.5rem;
  font-size: 1.1rem;
  color: #3f3f3f;
}

.repIconBtn:hover i {
  color: #1d1d1d;
} /* accent on hover */

.manageCategoriesPageOpen {
  transform: translateY(0);
}

.manageCategoriesPageOpenT2 {
  transform: translateY(0);
}

.manageCategoriesPageOpenT3 {
  transform: translateY(0);
}

.bodyCategories {
  grid-area: bodyCategories;
  overflow-y: auto;
  overflow-x: hidden;

  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
.bodyCategories::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.categoriesPageLabels {
  color: #58585a;
  margin-left: 0.5em;
  letter-spacing: 1px;
  font-size: 0.725rem;
  padding: 0;
}

.modalTitles {
  color: #58585a;
  margin-left: 0.5em;
  letter-spacing: 0.9px;
  font-size: 0.725rem;
  padding: 0;
  text-align: center;
}

.categoryContainer {
  min-height: 70dvh;

  overflow-y: auto;
  scrollbar-width: thin; /* Optional: thin scrollbar for Firefox */
  -ms-overflow-style: none; /* Optional: hide scrollbar in IE/Edge */
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  scrollbar-width: none; /* Hide scrollbar in Firefox */
  -ms-overflow-style: none; /* Hide scrollbar in IE 10+ */
  scroll-behavior: smooth; /* Smooth scrolling */
}

.categoryContainerv2 {
  height: 70dvh; /* Set a fixed height */
  overflow-y: auto; /* Enable vertical scrolling */
  scrollbar-width: thin; /* Optional: thin scrollbar for Firefox */
  -ms-overflow-style: none; /* Optional: hide scrollbar in IE/Edge */
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  scrollbar-width: none; /* Hide scrollbar in Firefox */
  -ms-overflow-style: none; /* Hide scrollbar in IE 10+ */
  scroll-behavior: smooth; /* Smooth scrolling */
  margin: 0.5em 0;
  border: #58585a44 solid 3px;
  padding: 1em 0;
  border-radius: 8px;
}

.categoryContainerv2::-webkit-scrollbar {
  width: 10px; /* Optional: width of scrollbar */
}

.categoryContainerv2::-webkit-scrollbar-thumb {
  background-color: #58585a; /* Optional: color of scrollbar thumb */
  border-radius: 6px; /* Optional: rounded scrollbar thumb */
}

.categoryContainerv2::-webkit-scrollbar-track {
  background: #f1f1f1; /* Color for scrollbar track */
}

.tierContainerAnimation {
  display: none;
  transform: translateX(100%); /* Start off-screen */
  transition: transform 0.3s ease-in-out; /* Transition for sliding effect */
  opacity: 0; /* Initially hidden */
}

.showTierConatainer {
  display: block;
  transform: translateX(0); /* Slide into view */
  opacity: 1; /* Fully visible */
}

.tierContainer {
  display: flex;

  flex-direction: column;
  border-radius: 6px;
  width: 100%;
  text-align: center;
  overflow-y: auto;
  height: 100%;
}

.categoryContainer::-webkit-scrollbar {
  width: 10px; /* Optional: width of scrollbar */
}

.categoryContainer::-webkit-scrollbar-thumb {
  background-color: #58585a; /* Optional: color of scrollbar thumb */
  border-radius: 6px; /* Optional: rounded scrollbar thumb */
}

.categoryContainer::-webkit-scrollbar-track {
  background: #f1f1f1; /* Color for scrollbar track */
}

.categoryFilterButtons {
  text-align: left;
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  background-color: #f1f1f1;
  font-family: "Source Sans Pro", sans-serif;
  padding: 1em 1.5em;
  border-radius: 10px;
  border: 0;
  cursor: pointer;
  color: #000000f5;
  letter-spacing: 0.9px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
    /* Shadow for 3D effect */ 0 6px 20px rgba(0, 0, 0, 0.19); /* Additional shadow for depth */
  align-self: center;
  width: 70%;
  max-width: 300px;
  display: inline-block;
}

.childrenCategoryFilterButtons {
  text-align: left;
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  background-color: #f1f1f1;
  font-family: "Source Sans Pro", sans-serif;
  padding: 1em 1.5em;
  border-radius: 10px;
  border: 0;
  cursor: pointer;
  color: #000000f5;
  letter-spacing: 0.9px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
    /* Shadow for 3D effect */ 0 6px 20px rgba(0, 0, 0, 0.19); /* Additional shadow for depth */
  align-self: center;
  width: 80%;
  max-width: 300px;
  display: inline-block;
}
#tier1CategoryItemsContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.categoryItemContainer {
  width: 100%;
  padding: 0.5em 0.5em;
  /* border-top: #58585a28 solid 1px;
  border-bottom: #58585a44 solid 1px; */
  display: flex;
  align-content: center;
  justify-content: space-between;
}

.categoryCloseButtons {
  margin-top: 0.5em;
  align-self: center;
}

.childrenCategoryModal {
  text-align: center;
  padding: 1em 0;
  background-color: #1919196c;
  border: none;
  width: 90%;
  height: 90dvh;
  max-width: 400px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
  border: #58585a21 solid 1px;
  border-radius: 20px;
  padding: 0.5em;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
    /* Shadow for 3D effect */ 0 6px 20px rgba(0, 0, 0, 0.19); /* Additional shadow for depth */
  color: #b4b4b4f1;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow: 0 2px 6px #58585a59,
    /* Shadow for 3D effect */ 0 6px 20px rgba(0, 0, 0, 0.19); /* Additional shadow for depth */
  display: none;
  z-index: 3000;
}

.modalTitles {
  color: #bed3cf;
  margin-left: 1em;
  font-size: 0.9rem;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.closeChildrenCategoryButton {
  margin: 0;
  margin-top: 0.75em;
}

/* Toggle Container */
.toggle-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1em 0.5em;
  -webkit-tap-highlight-color: transparent;
}

/* Toggle Label */
.toggle-label {
  color: #58585a;
  letter-spacing: 0.9px;
}

/* Hide the default checkbox */
.toggle-input {
  display: none;
}

/* Toggle Switch */
.toggle {
  width: 40px;
  height: 20px;
  background-color: #58585a;
  border-radius: 50px;
  position: relative;
  cursor: pointer;
  transition: background-color 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

.toggle::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background-color: #ffffffc4;
  border-radius: 50%;
  transition: transform 0.3s ease;
}

/* Checked State */
.toggle-input:checked + .toggle {
  background-color: #006237;
}

.toggle-input:checked + .toggle::before {
  transform: translateX(20px); /* Move the toggle knob to the right */
}

/* /////NOTIFICATIONS PAGE */

.appNotificationsPageGrid {
  min-height: 100dvh;
  display: grid;
  grid-template: auto auto 1fr / auto;
  grid-template-areas:
    "alternativeHeader"
    "notificationsTags"
    "notificationsContent";
  justify-items: center;
  background: url("./img/newgraphs/Red_Background_resized.png") no-repeat center
    center / cover;
  background-color: #d40f0f;
}

#closeNotificationsButton {
  margin-top: 0.3em;
}

#eventsCloseButton {
  margin-top: 0.3em;
}

.notificationsTags {
  grid-area: notificationsTags;
  padding: 1.25em 0.5em;
  margin-bottom: 0.5em;
  border-bottom: solid px #fefefe;
  border-radius: 8px;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  background-color: rgba(43, 43, 43, 0.15); /* Transparent white */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(5px); /* For Safari */
}

.notificationsContent {
  grid-area: notificationsContent;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 400px;
  padding: 0.5em;
  justify-items: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  scrollbar-width: none; /* Hide scrollbar in Firefox */
  -ms-overflow-style: none; /* Hide scrollbar in IE 10+ */
}

.singleNotificationContainer {
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: flex-start;
  padding: 0.15em 0.75em;
  border-radius: 100px;
  outline: none;
  letter-spacing: 1px;
  border-left: #fefefe solid 4.5px;
  box-shadow: 0 4px 8px rgb(0, 0, 0);
  border-radius: 8px; /* Adjust as needed */
  margin-bottom: 0.95rem;
  width: 95%;
  color: #fefefe;
  background-color: #111111d8;
  width: fit-content;
  cursor: pointer;
  padding-bottom: 0.5em;
}

.singleEventContainer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.75em 0.75em;
  border-radius: 100px;
  outline: none;
  letter-spacing: 1px;

  border-radius: 8px; /* Adjust as needed */
  margin-bottom: 0.95rem;
  width: 95%;
  color: #000000;
  background-color: #ffffff;
  cursor: pointer;
  max-width: 400px;
}

.myNotificationsLabels {
  color: #000000;
  margin-left: 0.5em;
  letter-spacing: 1px;
  font-size: 0.725rem;
}

.myNotificationsLabelsv3 {
  color: #ffffff;
  margin-left: 0.5em;
  letter-spacing: 1px;
  font-size: 0.725rem;
}
.myNotificationsv3Labels {
  color: #fe0100;
  margin-left: 0.5em;
  letter-spacing: 1px;
  font-size: 0.725rem;
}

.myNotificationsLabelsv2 {
  color: #58585a;
  margin-left: 0.5em;
  letter-spacing: 1px;
  font-size: 0.9rem;
}

.myNotificationsText {
  color: #58585a;
  margin-left: 0.5em;
  letter-spacing: 1px;
  font-size: 0.725rem;
}

.loadMoreNotificationsContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

/* Notifications Modal */
.appNotificationsModalGrid {
  min-height: 100dvh;
  display: grid;
  grid-template: auto auto auto 1fr / auto;
  grid-template-areas:
    "alternativeHeaderv2"
    "modalNotificationsTitle"
    "modalNotificationsTags"
    "modalNotificationsContent";
  justify-items: center;
  background: #fefefe; /* Converted to use the RGBA equivalent */
  backdrop-filter: blur(10px); /*Add a blur effect */
}

.alternativeHeaderv2 {
  grid-area: alternativeHeaderv2;
  display: flex;
  /* padding: 0.5em 0.5em; */
  width: 100%;
}

#newsCloseButton {
  margin-top: 0.2em;
}

.modalNotificationsTitle {
  grid-area: modalNotificationsTitle;
  padding: 0.5em;
  color: #58585a;
  background-color: #ffffff;
  border-radius: 15px;

  margin-bottom: 0.5em;
  margin-top: 2em;
  width: 90%;
}

.modalNotificationsContent {
  grid-area: modalNotificationsContent;
  padding: 0.5em;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  scrollbar-width: none; /* Hide scrollbar in Firefox */
  -ms-overflow-style: none; /* Hide scrollbar in IE 10+ */
  text-align: left;
  width: 90%;
  font-size: 0.85rem;
  color: #58585a;
  padding: 0.5em;
  color: #58585a;
  background-color: #ffffff;
  border-radius: 15px;
  min-height: 70%;
}

.modalNotificationsTags {
  display: flex;
  overflow: hidden; /* Hide overflow without scrollbars */
  grid-area: modalNotificationsTags;
  padding: 0.5em;

  width: 100%;
  max-width: 400px;

  overflow-x: auto; /* Allow horizontal scrolling */
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  scrollbar-width: none; /* Hide scrollbar in Firefox */
  -ms-overflow-style: none; /* Hide scrollbar in IE 10+ */
  scroll-behavior: smooth; /* Smooth scrolling */
}

.modalactionLinks {
  background-color: #58585a18;
  min-width: fit-content;
  display: inline-block;
  font-size: 0.725rem;
  font-weight: 700;
  font-family: "Source Sans Pro", sans-serif;
  padding: 0.5em 0.7em;
  border-radius: 5px;
  border: 0;
  cursor: pointer;
  color: #ffffff;
}

.eventActions {
  display: flex;
  justify-content: space-between;
}

.notificationActions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.eventActionButtons {
  background-color: #fe0100;
  min-width: fit-content;
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
  padding: 0.5em 0.7em;
  border-radius: 5px;
  border: 0;
  cursor: pointer;
  color: #fefefe;
  border-radius: 35px;
}

.eventsButtonClass {
  font-size: 0.9rem;
  background-color: #00000000;
  color: #353535;
  padding: 0;
  text-align: left;
  font-weight: 500;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
  /* letter-spacing: 1px; */
  display: inline-block;
  border: none;
  display: flex;
}

.eventsButtonClass i {
  align-self: center;
}

.menuIcon {
  color: #0c3111;
  margin-right: 10px;
  font-size: 1.2em;
  align-self: self-start;
}

#sideMenuLogo {
  margin-bottom: 2em;
  height: 170px;
  width: 170px;
}

.infoLink {
  color: #353535;
  text-decoration: none;
}

/* Keep same hover effect as your other buttons if needed */
.eventsButtonClass .infoLink:hover {
  text-decoration: none;
}

.productContainers {
  padding: 0.25em 0.2em;
  background-color: #ffffffd8;
  /* border-left: #95ba3a solid 4.5px; */
  border-radius: 50px 0;
  box-shadow: 0 2px 4px rgba(27, 27, 27, 0.548);
  border-radius: 15px; /* Adjust as needed */
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 350px;
  justify-items: center;
}

/* Short screens: change middle row to auto and (optionally) override productContainers */
@media (max-height: 670px) {
  #homePageLogo {
    height: 120px;
    width: 120px;
  }

  .productContainers {
    padding: 0.5em 0.5em;
    background-color: #ffffffd8;
    box-shadow: 0 2px 4px rgba(27, 27, 27, 0.548);
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 350px;
  }

  .header {
    padding: 0.25em 1em 0;
  }
}
.dealsWrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1em;
  gap: 1rem;
  overflow-y: auto;
  overflow-x: hidden;

  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;
}
.dealsWrapper::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.singleDealContainer {
  padding: 0.2em 0.2em;
  background-color: #ffffff;
  /* border-left: #95ba3a solid 4.5px; */
  border-radius: 50px 0;
  box-shadow: 0 2px 4px rgba(27, 27, 27, 0.548);
  border-radius: 10px; /* Adjust as needed */
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 350px;
}

.dealsImage {
  max-width: 290px;
  align-self: center;
  border-radius: 15px;

  height: 200px;
  object-fit: cover;

  transition: opacity 1s ease-in-out;
}
.dealsImagev2 {
  max-width: 350px;
  align-self: center;
  width: 100%;
  height: auto;
}

.productLabels {
  color: #fff;
  margin-left: 1.75em;
  margin-bottom: 1.5em;
  font-size: 1rem;
  letter-spacing: 1;
  font-style: normal;
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.productActionButtons {
  font-size: 0.8rem;
  font-style: normal;
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  /* padding: 0.75em 1.5em; */

  /* This will create the background color and text styling */
  background-color: #ffffff; /* Dark gray background */
  color: #304e48; /* White text */
  text-align: center;

  /* Creates rounded sides with a radius that's half of the height, resulting in a pill shape */
  border-radius: 50px 0;

  /* This will remove the border if there is one */
  border: none;
  padding: 0.5em;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
    /* Shadow for 3D effect */ 0 6px 20px rgba(0, 0, 0, 0.19);

  /* Optional: Add some shadow for depth */
  /* box-shadow: 0 4px 8px rgb(0, 0, 0); */

  /* Other potential properties for interaction */
  cursor: pointer;

  /* box-shadow: 2px 4px 6px 0 rgba(48, 48, 48, 0.2); */
}
.notificationButtons {
  background-color: #00623700;
  min-width: fit-content;
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  font-family: "Source Sans Pro", sans-serif;
  padding: 0.5em 0.7em;
  border-radius: 5px;
  border: 0;
  cursor: pointer;
  display: inline-block;
  color: #000000;
}

.eventTypeTags {
  background-color: #58585a18;
  min-width: fit-content;
  display: inline-block;
  font-size: 0.725rem;
  font-weight: 700;
  font-family: "Source Sans Pro", sans-serif;
  padding: 0.5em 0.7em;
  border-radius: 5px;
  border: 0;
  cursor: pointer;
  color: #fefefe;
}

/* toast message */
.toast {
  position: fixed;
  top: 10px;
  right: -300px; /* Initially off-screen to the right */
  width: auto;
  max-width: 300px;
  padding: 0.5em 1em;
  background-color: #000000ef; /* Green background for success */
  color: white;
  font-size: 0.85rem;
  border-left: 8px solid #fefefe;
  border-radius: 5px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Text shadow for better readability */
  z-index: 1000;
}

/* When the toast is active */
.toast.active {
  transform: translateX(-300px); /* Slide in from right to left */
  opacity: 1;
}

.loader {
  position: fixed;
  top: 10px;
  right: -300px; /* Initially off-screen to the right */
  width: auto;
  max-width: 300px;
  padding: 0.5em 1em;
  background-color: #000000ef; /* Green background for success */
  color: white;
  font-size: 0.85rem;
  border-left: 8px solid #fefefe;
  border-radius: 5px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Text shadow for better readability */
  z-index: 10000;
}

/* When the toast is active */
.loader.active2 {
  transform: translateX(-300px); /* Slide in from right to left */
  opacity: 1;
}

.loaderBackdrop {
  background: rgba(6, 23, 207, 0); /* Converted to use the RGBA equivalent */
  backdrop-filter: blur(0.2px); /*Add a blur effect */
  position: fixed;
  top: 0;

  right: -100%;
  width: 100%;
  height: 100%;
  transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out;
  z-index: 4000;
}

/* When the toast is active */
.loaderBackdrop.active3 {
  transform: translateX(-100%); /* Slide in from right to left */
  opacity: 1;
}

/* requestNewJob Menu */
.requestNewJobMenuPage {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #eeeeee;
  position: fixed;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateY(100%);
  transition: 0.5s;
  min-height: 100dvh;
  z-index: 11;
}

.requestNewJobPageOpen {
  transform: translateY(0);
}

.youShallNotPanic {
  position: absolute; /* Allow the element to cover the parent */
  border-radius: 20px;
  top: 0;
  left: 0;
  width: 100%; /* Cover the full width of the parent */
  height: 100%; /* Cover the full height of the parent */
  background-color: #000000fb; /* Optional: set a background with opacity */
  color: rgba(255, 255, 255, 0.808); /* Text color */
  display: none; /* Center the text vertically and horizontally */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10; /* Ensure it stays above other elements */
  text-align: center;
}

.menuButtonv2 {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  display: inline-block;
  font-size: 0.725rem;
  font-weight: 700;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
  /* letter-spacing: 1px; */
  padding: 1.15em;
  border: 0;
  cursor: pointer;
  color: #58585a;
  width: 100%;
  background-color: #20202000;
}

.headerText {
  align-self: center;
  width: 100%;
  display: flex;
  justify-content: left;
}

#angelInformationAlertButton {
  background-color: #00623700;
  border: none;
}
#personalInformationAlertButton {
  background-color: #00623700;
  border: none;
}

.sideMenuPage {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 'left' is not valid for align-items */
  padding: 0.5em 1em;
  width: 85%;
  gap: 1.2em;

  background: rgba(255, 255, 255, 0.575); /* transparent white */
  backdrop-filter: blur(20px); /* blurs everything behind */
  -webkit-backdrop-filter: blur(20px); /* Safari support */

  border: 1px solid rgba(255, 255, 255, 0.3); /* subtle border */
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

button:focus {
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.close-x-button {
  display: flex;
  align-items: center;
  padding: 1em 1em 0;
  font-size: 1rem;
  font-weight: 900;
  color: #ffffff;
}

.close-x-buttonV2 {
  display: flex;
  align-items: center;
  padding: 1em 1em 0;
  font-size: 1.35rem;
  font-weight: 900;
  color: #000000;
  margin-left: 88%;
}

/* ---------- Glassmorphic shell inside the modal ---------- */
.tillLottoBody {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.4rem;
  padding: 1.8rem 1.2rem;
  margin: 2em 1em 0;
  max-width: 350px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 18px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);

  /* scrolling */
  max-height: calc(100dvh - 4em); /* adjust if needed */
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tillLottoBody::-webkit-scrollbar {
  display: none;
}

/* promo copy */
.lottoCopy {
  font-size: 1.05rem;
  line-height: 1.35;
  color: #fff;
}

.lottoCopy strong {
  font-weight: 600;
}

/* file upload */
.fileUpload input[type="file"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.uploadBtn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1.2rem;
  font-weight: 600;
  background: linear-gradient(135deg, #25d366, #128c7e);
  /* border: 1px solid rgba(255, 255, 255, 0.35); */
  border-radius: 12px;
  cursor: pointer;
  color: #fff;
  backdrop-filter: blur(6px);
}
.uploadBtn i {
  font-size: 1.1rem;
}

/* primary action */
.primaryBtn {
  width: 100%;
  padding: 0.75rem 1rem;
  font-weight: 700;
  font-size: 1rem;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #25d366, #128c7e);
  color: #fff;
  opacity: 0.6; /* start disabled */
  cursor: not-allowed;
  transition: opacity 0.2s;
}
.primaryBtn.enabled {
  opacity: 1;
  cursor: pointer;
}

/* terms link */
.disclaimer {
  font-size: 0.85rem;
  color: #eee;
}
.disclaimer a {
  color: #ffd369;
  text-decoration: underline;
}

/* ---------- Terms modal ---------- */
.termsModal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
.termsCard {
  max-width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 1.8rem;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  color: #fff;
}

.termsCard h3 {
  margin-top: 0;
}
.termsCard ul {
  padding-left: 1.25rem;
  margin: 0;
}
.closeBtn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.25rem;
  cursor: pointer;
}
/* ---------- wrapper ---------- */
.dealFilter {
  position: relative;
  width: 90%;
  margin: 0.85rem 0 0.85rem 0;
  align-self: center;
}

/* hide the native select but keep it keyboard-accessible */
#dealCategorySelect {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0; /* still invisible */
  z-index: 100; /* 👈 higher than façade */
  cursor: pointer;

  overflow: hidden;
}

/* ---------- façade (glassmorphism) ---------- */
.selectFacade {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-weight: 600;
  font-size: 0.95rem;
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);

  color: #fff;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s;
}
.selectFacade:hover {
  background: rgba(255, 255, 255, 0.18);
}
.selectFacade i {
  font-size: 0.9rem;
  pointer-events: none;
}

/* .padding-right-2em {
  padding-right: 2em;
} */

/* ── Deals ▶ Store filter overlay ───────────────────────── */
/* same trick used by the Category filter */
#dealsModal .dealFilter {
  position: relative;
}

#dealsModal .dealFilter select {
  position: absolute;
  inset: 0; /* cover the façade 100 % */
  width: 100%;
  height: 100%;
  opacity: 0; /* invisible but clickable */
  cursor: pointer;
  z-index: 2; /* sits above .selectFacade */
}

/* ───── Trading Hours modal tweaks ───────────────────────────── */

/* 1. keep header visible while body scrolls */
#tradingHoursModal {
  display: flex;
  flex-direction: column;
}
.tradinghoursText {
  margin: 0.5rem;
}
#tradingHoursModal .alternativeHeader {
  position: sticky; /* stays at top */
  top: 0;
  z-index: 20;
}

/* 2. scrollable content area */
#tradingHoursModal .dealsWrapper {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1em 1.25em 2.5em; /* bottom padding for safe-area gap */
}

/* 3. overlay the real <select> invisibly on the pretty façade */
#tradingHoursModal .dealFilter {
  position: relative;
}

#tradingHoursModal .dealFilter select {
  position: absolute;
  inset: 0; /* full-size overlay */
  width: 100%;
  height: 100%;
  opacity: 0; /* invisible but clickable */
  cursor: pointer;
  z-index: 2; /* sits above the façade */
}

.crudCategoryButtons {
  color: #ffffff;
  display: inline-block;
  font-size: 1rem;
  background-color: #0000008a;
  border: none;
  cursor: pointer;
  border-radius: 8px;
}

.questionListContainer {
  overflow-y: auto;
  background-color: #ffffff;
  text-shadow: none;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.questionListContainer::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.questionInfoBlock {
  border-bottom: solid #025e9b 1px;
  padding: 1em 0.5em;
  margin-bottom: 0.5em;
  color: #58585a;
  font-size: 0.8rem;
  letter-spacing: 1.1px;
}
.answersSection {
  padding: 0.5em;
}

.singleQuestionBlockContainer {
  border-top: solid #25d366 10px;
  /* border-radius: 10px; */
  padding: 1em 0.5em;
  margin-bottom: 1em;

  gap: 1em;
}

.tryAgainButton {
  background-color: #00623700;
  width: 100%;
  font-size: 1rem;
}
.correctRemark {
  color: #006237;
}

.incorrectRemark {
  color: red;
}

.resultDisplay {
  background-color: #000000;
  text-align: center;
}
/* ── Trading-Hours colours ─────────────────────────────── */
#hoursDisplay h3 {
  color: #ffffff;
} /* store name = white */
#hoursDisplay p {
  color: #000000;
} /* hours rows = black */

.install-banner {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  padding: 0.75rem 1rem;
  background: #2c7a3d;
  color: #fff;
  align-items: center;
  gap: 0.75rem;
  font-family: Poppins, sans-serif;
  font-size: 0.95rem;
  transform: translateY(100%);
  transition: transform 0.35s ease-out;
}
.install-banner.show {
  display: flex;
  transform: translateY(0);
}
.install-btn {
  background: #fff;
  color: #2c7a3d;
  border: none;
  padding: 0.4rem 0.8rem;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
}
.dismiss-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
}

@media only screen and (min-width: 335px) {
  .appActionButton {
    font-size: 1rem;
  }
  .headerLogo {
    margin-top: 2em;
    margin-bottom: 0.5em;
    width: auto;
    height: 200px;

    align-self: center;
  }

  .menuButton {
    font-size: 2rem;
  }

  .closePageButtons {
    font-size: 0.85rem;
  }

  .filterButtons {
    font-size: 0.85rem;
    padding: 1em;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
      /* Shadow for 3D effect */ 0 6px 20px rgba(0, 0, 0, 0.19);
    display: flex;
    align-items: center;
  }

  .form-inputs {
    font-size: 0.85rem;
  }

  .myAngelsLabels {
    font-size: 0.85rem;
  }

  .viewAngelsButton {
    font-size: 0.85rem;
  }

  .categoriesPageLabels {
    font-size: 0.85rem;
  }

  .modalTitles {
    font-size: 0.85rem;
  }

  .headerIcons {
    font-size: 1.25rem;
  }

  p {
    font-size: 0.85rem;
  }

  .myApproximateLocationTitle {
    font-size: 1.1rem;
  }

  .myApproximateLocationIcon {
    font-size: 2rem;
  }

  .myApproximateLocation {
    margin-top: 0;
    font-size: 1.2rem;
  }

  .myApproximateLocationContainer {
    padding: 2em 1em;
  }

  .panicButtons {
    font-size: 1.8rem;
  }

  .callButton {
    font-size: 1.2rem;
    /* margin-bottom: 1em; */
  }
  #panicStatustext {
    font-size: 0.85rem;
  }
}

.menuCloseBtn {
  position: absolute;
  top: clamp(10px, 1.6vw, 16px);
  right: clamp(10px, 1.6vw, 16px);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.82); /* glassy chip */
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  color: #ffffff; /* nice black X */
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.1),
    inset 0 0 0 1px rgba(0, 0, 0, 0.06); /* subtle hairline */
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  z-index: 50;
}
.menuCloseBtn svg {
  width: 20px;
  height: 20px;
}
.menuCloseBtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18), 0 4px 10px rgba(0, 0, 0, 0.1),
    inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.menuCloseBtn:active {
  transform: translateY(0) scale(0.98);
}
.menuCloseBtn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1), 0 12px 28px rgba(0, 0, 0, 0.2),
    inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .menuCloseBtn {
    transition: none;
  }
}

.selectFacade.isLocked {
  opacity: 0.75;
  pointer-events: none;
}

/*  A: let the app fill the *visible* screen  */
html,
body {
  height: 100%;
}
.appMainGrid {
  min-height: 100vh; /* fallback */
  min-height: 100dvh; /* modern dynamic */
  min-height: 100svh; /* Android/iOS: small viewport (no overlap) */
}