/* Hide scrollbar for all elements */
html,
body {
  -ms-overflow-style: none; /* Internet Explorer and Edge */
  scrollbar-width: none !important; /* Firefox */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
  width: 0;
}

body {
  -ms-overflow-style: none; /* Internet Explorer and Edge */
  scrollbar-width: none; /* Firefox */

  -ms-overflow-style: none; /* for Internet Explorer, Edge */
  scrollbar-width: none; /* for Firefox */

  --mud-palette-secondary: white;
  --mud-palette-secondary-text: black;
}

body::-webkit-scrollbar {
  display: none !important; /* Chrome, Safari and Opera */
}

/* High z-index utility for MudBlazor popovers */
.z-\[9999\] {
  z-index: 9999 !important;
}

/* MudBlazor popover overlay fix - ensure dropdown appears above all content */
.mud-popover-open .mud-popover,
.mud-overlay-popover,
.mud-popover.mud-popover-open {
  z-index: 99999 !important;
}

/* Map container responsive height */
.map-container {
  height: 600px;
  border-radius: 16px;
  background: #f5f5f5;
  border: 1px solid #ddd !important;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.map-container > div {
  border: none !important;
}

.map-container #provider-map {
  border-radius: 16px;
  background: #e0e0e0;
  min-height: 200px;
}

@media (min-width: 960px) {
  .map-container {
    height: 60vh;
    min-height: 600px;
  }
}

.bottom-app-bar {
  max-width: 767px;
  height: 72px;
  justify-self: center;
  padding-bottom: 10px !important;
  border-radius: 20px 20px 0px 0px;
  z-index: 10001;
}

@supports (-webkit-touch-callout: none) {
  /* iOS only */
  .bottom-app-bar {
    height: 92px;
    padding-bottom: 30px !important;
  }

  .bottom-sheet {
    bottom: 92px;
  }
}

.mud-primary-hover {
  background-color: #ffffff !important;
}

.rainbow-border-wrapper-chip {
  position: relative;
  display: inline-block;
  border-radius: 50px;
  padding: 0px;
  margin: 5px;
  background: #d3d3d3;
  transition: background 0.3s ease-in-out;
}

.rainbow-border-wrapper-chip::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50px;
  padding: 0px;
  background: linear-gradient(
    90deg,
    #a906ff,
    #5972d9,
    #5972d9,
    #ed6594,
    #f6ae2d
  );
  background-size: 300% 300%;
  animation: rainbow-border 3s linear infinite;
  z-index: -1;
}

.rainbow-border-wrapper-chip > .chip-content {
  position: relative;
  z-index: 2;
  border-radius: 50px;
  background: #ffffff;
  padding: 1px;
}

.rainbow-border-wrapper-chip.active {
  background: linear-gradient(
    90deg,
    #a906ff,
    #5972d9,
    #5972d9,
    #ed6594,
    #f6ae2d
  );
  background-size: 300% 300%;
  padding: 0px;
  border-radius: 50px;
  animation: rainbow-border 3s linear infinite;
}

/* Input box */
.rainbow-border-wrapper input {
  position: relative;
  z-index: 1;
  border: none;
  outline: none;
  border-radius: 6px; /* Slightly smaller to fit inside the border */
  padding: 8px;
  width: 300px;
  height: 40px;
  font-size: 16px;
  background-color: white; /* Input box background */
}

/* Focus state: Apply rainbow animation */
.rainbow-border-wrapper:focus-within {
  background: linear-gradient(
    90deg,
    red,
    orange,
    yellow,
    green,
    cyan,
    blue,
    violet
  );
  background-size: 300% 300%;
  animation: rainbow-border 3s linear infinite;
}

.rainbow-border-wrapper {
  position: relative;
  display: inline-block;
  border-radius: 8px;
  padding: 2px;
  background: #94a3b8;
  transition: background 0.3s ease-in-out;
}

.rainbow-border-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 8px;
  padding: 2px;
  background: linear-gradient(
    90deg,
    #a906ff,
    #5972d9,
    #5972d9,
    #ed6594,
    #f6ae2d
  );
  background-size: 300% 300%;
  animation: rainbow-border 3s linear infinite;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.rainbow-border-wrapper > .content {
  position: relative;
  border-radius: 8px;
  background: #ffffff;
  padding: 2px;
  border: none;
}

.rainbow-border-wrapper:hover,
.rainbow-border-wrapper:focus-within {
  background: transparent;
}

.rainbow-border-wrapper:hover::before,
.rainbow-border-wrapper:focus-within::before {
  opacity: 1;
}

.rainbow-border-wrapper.active {
  background: transparent;
}

.rainbow-border-wrapper.active::before {
  opacity: 1;
}

.rainbow-border-wrapper-onboarding {
  position: relative;
  display: inline-block;
  border-radius: 5px;
  padding: 3px;
  background: #d3d3d3;
  transition: background 0.3s ease-in-out;
}

.rainbow-border-wrapper-card {
  position: relative;
  display: inline-block;
  border-radius: 5px;
  padding: 2px;
  background: #d3d3d3;
  transition: background 0.3s ease-in-out;
}

.rainbow-border-wrapper-card:hover,
.rainbow-border-wrapper-card:focus-within {
  border-radius: 5px;
}

.rainbow-border-wrapper-card.active {
  background: linear-gradient(
    90deg,
    #a906ff,
    #5972d9,
    #5972d9,
    #ed6594,
    #f6ae2d
  );
  background-size: 300% 300%;
  border-radius: 22px;
  padding: 2px;
  animation: rainbow-border 3s linear infinite;
}

.rainbow-border-wrapper-retire-card {
  position: relative;
  display: inline-block;
  border-radius: 5px;
  padding: 1px;
  background: #d3d3d3;
  transition: background 0.3s ease-in-out;
}

.rainbow-border-wrapper-retire-inner-card {
  position: relative;
  display: inline-block;
  border-radius: 5px;
  padding: 0px;
}

.onboarding.rainbow-border-wrapper {
  background: white;
}

.rainbow-border-wrapper-addButton {
  position: relative;
  display: inline-block;
  border-radius: 50px;
  padding: 2px;
  background: #d3d3d3;
  transition: background 0.3s ease-in-out;
}

.rainbow-border-wrapper .inputBox {
  position: relative;
  z-index: 1;
  border: none;
  outline: none;
  border-radius: 5px;
  padding: 8px;
  max-width: 750px;
  width: 100%;
  height: 55px;
  font-size: 18px;
  background-color: white;
}

.rainbow-border-wrapper .textAreaBox {
  position: relative;
  z-index: 1;
  border: none;
  outline: none;
  border-radius: 5px;
  padding: 8px;
  font-size: 18px;
  background-color: white;
}

.rainbow-border-wrapper .bigButton {
  position: relative;
  z-index: 1;
  border: none;
  outline: none;
  border-radius: 5px;
  padding: 8px;
  width: 300px;
  height: 40px;
  font-size: 16px;
  background-color: white;
}

.rainbow-border-wrapper-addButton .addButton {
  position: relative;
  z-index: 1;
  border: none;
  outline: none;
  border-radius: 50px;
  padding: 0 8px;
  font-size: 16px;
  background-color: white;
}

.rainbow-border-wrapper .card {
  position: relative;
  z-index: 1;
  border-radius: 30px;
  padding: 0;
  width: 100%;
  height: 100%;
  font-size: 16px;
  background-color: white;
  overflow: hidden;
}

.rainbow-border-wrapper-onboarding.active {
  background: linear-gradient(
    140deg,
    #a906ff,
    #5972d9,
    #5972d9,
    #ed6594,
    #f6ae2d
  );
  /*    background-size: 300% 300%;*/
  animation: rainbow-border 3s linear infinite;
  border-radius: 5px;
}

.rainbow-border-wrapper-retire-card:hover,
.rainbow-border-wrapper-retire-card:focus-within {
  border-radius: 5px;
}

.rainbow-border-wrapper-retire-card.active {
  background: linear-gradient(
    90deg,
    #a906ff,
    #5972d9,
    #5972d9,
    #ed6594,
    #f6ae2d
  );
  background-size: 300% 300%;
  border-radius: 5px;
  animation: rainbow-border 3s linear infinite;
}

.rainbow-border-wrapper.vitcard {
  background: linear-gradient(
    120deg,
    rgba(169, 6, 255, 0.1),
    rgba(89, 114, 217, 0.1),
    rgba(89, 114, 217, 0.1),
    rgba(237, 101, 148, 0.1),
    rgba(246, 174, 45, 0.1)
  );
  animation: rainbow-border 16s linear infinite;
}

.rainbow-border-wrapper.vitcard::before {
  background-color: hotpink;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 5px;
  padding: 2px;
  background: transparent;
  z-index: -1;
  border: none;
}

.rainbow-border-wrapper-addButton.active {
  background: linear-gradient(
    90deg,
    #a906ff,
    #5972d9,
    #5972d9,
    #ed6594,
    #f6ae2d
  );
  background-size: 300% 300%;
  animation: rainbow-border 3s linear infinite;
  padding: 2px;
}

.rainbow-border-wrapper.selected {
  background: linear-gradient(
    90deg,
    #a906ff,
    #5972d9,
    #5972d9,
    #ed6594,
    #f6ae2d
  );
  background-size: 300% 300%;
  animation: rainbow-border 3s linear infinite;
}

.rainbow-border-wrapper.deselected {
  background: none;
  background-size: 300% 300%;
  animation: none;
}

.mud-list-item-text {
  flex: 1 1 auto;
  min-width: 0;
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

.MudChip {
  position: relative;
  z-index: 1;
  overflow: visible;
  border-radius: 16px;
  transition: all 0.3s ease-in-out;
}

.rainbow-border::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: 16px;
  background: linear-gradient(
    90deg,
    #a906ff,
    #5972d9,
    #5972d9,
    #ed6594,
    #f6ae2d
  );
  background-size: 300% 300%;
  background-color: white;
  z-index: -1;
  animation: rainbow-border 10s linear infinite;
}

.rainbow-border-day::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: 50px;
  padding: 0px;
  background: linear-gradient(
    90deg,
    #a906ff,
    #5972d9,
    #5972d9,
    #ed6594,
    #f6ae2d
  );
  background-size: 300% 300%;
  background-color: white;
  z-index: -1;
  animation: rainbow-border 10s linear infinite;
}

/*Onboarding*/
.onboarding-button {
  z-index: 1001;
  opacity: 1;
}

.onboarding-button-two {
  max-width: 350px;
  z-index: 1001;
  opacity: 1;
}

.onboarding-image-container img {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/*Onboarding List Options*/
.onboarding-option-card {
  max-width: 767px;
  width: 100%;
  height: 100%;
  cursor: pointer;
  border-radius: 5px;
}

/*Onboarding Labels*/
.label-text-container-day {
  border-radius: 50%;
  height: 40px;
  width: 40px;
  min-width: 40px;
  justify-content: center;
  background-color: #ffffff;
  display: flex;
  align-items: center;
}

/*main screens*/
.mud-input.mud-input-underline:before {
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  content: " " !important;
  position: absolute !important;
  transition: border-bottom 0.2s, background-color 0.2s !important;
  border-bottom: none !important;
  pointer-events: none !important;
}

.mud-input.mud-input-underline:after {
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  content: "" !important;
  position: absolute !important;
  transform: scaleX(0) !important;
  transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms !important;
  border-bottom: none !important;
  pointer-events: none !important;
}

/* MudBlazor input background - white by default */
.mud-input-label-outlined {
  background-color: white !important;
}

.rainbow-chip-border {
  border: 2px solid transparent;
  border-image: linear-gradient(
      45deg,
      red,
      orange,
      yellow,
      green,
      blue,
      indigo,
      violet
    )
    1;
  border-radius: 50px;
}

.activeDayTabClass {
  background-color: #000000;
  color: #ffffff !important;
  border-radius: 5px !important;
  font-size: 14px !important;
  padding: 10px !important;
}

.mud-tab-slider.mud-tab-slider-horizontal {
  height: 0px !important;
  bottom: 0;
  transition: none !important;
  will-change: left;
}

.dashboard-habit-card {
  height: 120px;
  max-width: 767px;
  cursor: pointer;
  border-radius: 20px;
}

.habit-checkmark {
  width: 130px;
  margin-top: -30px;
  margin-left: -20px;
  margin-right: -20px;
}

.habit-checkmark svg {
  margin-top: 30px;
}

.habit-card {
  height: 122px;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  border-radius: 20px;
  z-index: 0;
  padding: 1px;
}

.habit-card-completed {
  background: linear-gradient(#5972d9, #4a5fb5);
  position: relative;
  display: inline-block;
  border-radius: 20px;
  padding: 1px;
  transition: background 0.3s ease-in-out;
}

.habit-card-completed .task-card {
  background: linear-gradient(#14532d, #176434);
  color: #ffffff;
}

.habit-card-completed .task-title {
  color: #ffffff;
  text-decoration: line-through;
}

.habit-button-completed {
  background: linear-gradient(#14532d, #176434);
}

.habit-button-completed .mud-button-root:disabled {
  color: var(--mud-palette-primary-text) !important;
}

.task-title {
  padding: 0 0 20px 10px;
}

/*Menu*/

.mud-navmenu.mud-navmenu-default
  .mud-nav-link.active:not(.mud-nav-link-disabled) {
  color: var(--mud-palette-primary);
  background-color: none !important;
}

code {
  color: #c02d76;
}

.list-item {
  width: 100% !important;
  cursor: pointer;
  display: flex;
  align-items: start;
  border-radius: 30px !important;
}

.list-item-card {
  width: 100% !important;
  cursor: pointer;
  display: flex;
  align-items: start;
  border-radius: 5px !important;
}

.list-item-avatar {
  height: 60px;
  width: 60px;
  align-self: center;
}

.article-detail-map-container {
  padding-bottom: 0px !important;
  position: relative;
}

.article-detail-map-image {
  height: 170px;
  width: 100%;
  position: relative;
  top: 49px;
}

.article-detail-map-btn-container {
  position: relative;
  bottom: 42px;
}

.article-detail-map-btn {
  background-color: #ffffff;
  width: 324px;
}

.inbox-list {
  height: 40px;
  max-width: 767px;
  width: 100%;
}

.create-habit-desc-textarea-wrapper {
  height: 213px !important;
}

.create-habit-desc-textarea {
  max-width: 750px;
  width: 100%;
  height: 210px;
}

.create-habit-btn-container {
  margin-top: 115px;
}

.create-habit-home-avatar {
  color: #ffffff;
  background-image: linear-gradient(
    134deg,
    #a906ff,
    #a906ff,
    #5972d9,
    #5972d9,
    #ed6594,
    #f6ae2d
  ) !important;
}

.black-btn {
  background-color: #000000;
  color: #ffffff;
}

.black-btn:hover {
  background-color: #000000 !important;
  color: #ffffff !important;
}

.habit-detail-streak {
  background-color: #f1f5f9;
  border-radius: 5px;
}

.create-habit-vis-one-delete-btn {
  position: absolute;
  right: 20px;
  cursor: pointer;
}

.create-habit-vis-one-image {
  height: 354px;
  width: 100%;
}

.create-habit-vis-two-image-one {
  height: 106px;
  width: 106px;
  position: absolute;
  left: -25px;
  top: 73px;
}

.create-habit-vis-two-image-two {
  height: 60px;
  width: 60px;
  position: absolute;
  left: 160px;
  top: 22px;
}

.create-habit-vis-two-image-three {
  height: 106px;
  width: 106px;
  position: absolute;
  left: 50%;
  top: 100px;
}

.create-habit-vis-two-image-five {
  height: 60px;
  width: 60px;
  position: absolute;
  right: 25px;
  top: 13px;
}

.create-habit-why-fab {
  position: absolute;
  right: 28px;
  cursor: pointer;
}

.create-habit-why-btn-container {
  margin-top: 299px;
}

.habit-detail-chip {
  height: 32px;
  width: 32px;
  border-radius: 50%;
  padding: 10px;
}

.habit-detail-chip-achievement {
  font-size: 10px;
  font-weight: 400;
}

.habit-popover {
  max-width: 767px;
  width: 100%;
}

.habit-detail-habit-popover-image {
  height: 157px;
  width: 162px;
}

.search-box {
  height: 40px;
  max-width: 767px;
  width: 100%;
}

.bar-avatar {
  height: 48px;
  width: 48px;
}

.dashboard-achievement-time-text {
  align-self: start;
  font-size: 14px;
  font-weight: 700;
}

.dashboard-streak-container {
  background-color: rgba(255, 255, 255, 0.4);
  padding: 2px 5px;
  border-radius: 5px;
  margin-top: 2px;
}

.dashboard-streak-icon {
  font-size: 14px;
  align-self: center;
}

.dashboard-streak-text {
  font-size: 14px;
  align-self: center;
}

.dashboard-schedule-container {
  border-radius: 44px;
  margin-top: 4rem;
}

.dashboard-schedule-container .mud-divider {
  display: none;
}

.dashboard-schedule-btn {
  text-transform: none;
  background: none !important;
}

.dashboard-schedule-day {
  background-color: rgba(211, 211, 211, 0.6);
  padding: 3px 5px;
  border-radius: 5px;
  margin-top: 2px;
  max-height: 29px;
}

.habit-explorer-create-btn {
  height: 46px;
  text-transform: none;
  border-radius: 50px;
  padding: 16px 18px !important;
}

::before .list-avatar {
  align-self: center;
}

.list-avatar {
  width: 60px !important;
  height: 60px !important;
}

.popover-container {
  background-color: #ffffff;
  height: 417px;
  max-width: 767px;
  width: 100%;
  border-radius: 30px 30px 0 0;
  position: fixed;
  bottom: 0;
}

.neighbourhood-popover-playstore-image {
  width: 144px;
  height: 48px;
}

.neighbourhood-image-container {
  margin: 0;
  overflow: hidden;
}

.neighbourhood-image-container img {
  max-width: 767px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.retirement-list-item {
  max-width: 767px;
  width: 100%;
  height: 141px;
  cursor: pointer;
  border-radius: 5px;
}

.retirement-achievement-container {
  background-color: #e2e8f0;
  position: relative;
  bottom: -12px;
  justify-content: start;
  height: inherit;
}

.vitcard-achievement-container {
  height: 216px;
  width: 385px;
}

.vitcard-achievement-username-container {
  height: 67px;
  width: 100%;
}

.vitcard-achievement-item-big-container {
  min-height: 117px;
  height: auto;
  width: 35%;
}

.vitcard-achievement-item-small-container {
  min-height: 117px;
  height: auto;
  width: 30%;
}

.vitcard-achievement-item-text {
  font-size: 10px;
  font-weight: 400;
}

.vitcard-grid-item-container {
  position: relative;
  width: 120px;
  height: 150px;
  background-color: transparent;
  display: fex;
  justify-content: center;
}

.vitcard-grid-item-image {
  height: 90px;
  width: 90px;
}

.vitcard-grid-item-point-container {
  background-color: #000000;
  color: #ffffff;
  height: 28px;
  width: 68px;
  position: relative;
  bottom: 28px;
  left: 40px;
}

.vitcard-grid-sub-item-container {
  margin-top: -10px;
}

.vitcard-grid-sub-item-text {
  font-size: 13px;
}

.badge-unlocked-point-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.badge-locked-point-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* New layered badge structure */
.badge-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 120px;
  height: 120px;
}

.badge-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Locked badge styling - apply grayscale filter */
.badge-background.badge-locked {
  filter: grayscale(100%);
  opacity: 0.3;
}

/* Locked badge text styling - target the text container that follows the badge */
.badge-locked-point-container
  ~ .vitcard-grid-sub-item-container
  .vitcard-grid-sub-item-text {
  opacity: 0.3;
}

/* Alternative approach - target the text container directly */
.badge-locked-point-container
  + .vitcard-grid-sub-item-container
  .vitcard-grid-sub-item-text {
  opacity: 0.4;
}

.badge-achievement {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 50px;
  z-index: 2;
  filter: brightness(0) invert(1); /* Makes icons white */
}

/* Locked achievement icon styling */
.badge-locked-point-container .badge-achievement {
  filter: grayscale(100%);
  opacity: 0.2;
}

.badge-points {
  position: absolute;
  bottom: -0.5rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: #000000;
  color: #ffffff;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 4px;
}

.badge-unlocked-point-image {
  height: 90px;
  width: 90px;
}

.badge-unlocked-point-box {
  background-color: #000000;
  color: #ffffff;
  height: 28px;
  width: 68px;
  position: relative;
  bottom: 15px;
  left: 12px;
}

.badge-unlocked-big-title {
  font-size: 13px;
  text-align: center;
}

.badge-unlocked-small-title {
  font-size: 11px;
  text-align: center;
}

.email-sender-image {
  height: 364px;
  width: 100%;
}

.email-sender-resend {
  color: #5972d9;
  cursor: pointer;
}

.enterotp-btn {
  margin-top: 127px;
}

.onboarding-answer-textarea-container {
  height: 213px !important;
}

.onboarding-answer-textarea {
  max-width: 767px;
  width: 100%;
  height: 210px;
}

.onboarding-answer-btn {
  margin-top: 115px;
}

.onboarding-explainer-carousel {
  height: 480px;
}

.onboarding-explainer-image {
  height: 480px;
  width: 100%;
}

.onboarding-explainer-dot {
  margin-top: 125px;
}

.onboarding-explainer-btn {
  margin-top: 42px;
}

.onboarding-list-item {
  cursor: pointer;
  max-width: 767px;
  width: 100%;
  padding: 0px !important;
}

.onboarding-list-item-card {
  cursor: pointer;
  max-width: 767px;
  width: 100%;
}

.bottom-nav-icon {
  font-size: 13px;
  width: 70px;
}

.bottom-nav-text {
  width: 70px;
}

.menu-logo {
  margin-top: 60px;
  width: 141px;
  height: 32px;
}

.menu-title {
  margin-top: 160px;
}

.menu-navlink {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.mud-avatar > .mud-image {
  background-color: #f1f5f9;
  border-radius: 6px;
}

.mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
  border-image: linear-gradient(
      90deg,
      #a906ff,
      #5972d9,
      #5972d9,
      #ed6594,
      #f6ae2d
    )
    1;
}

.bullet-list {
  list-style: none;
  padding-left: 0;
}

.bullet-list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
}

.bullet-list li:before {
  content: "";
  position: absolute;
  left: 0;
  top: -2px;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235972D9'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.bullet-list-resource ul {
  margin-top: 18px;
}

.bullet-list-resource li:before {
  top: 2px;
}

.vl {
  border-left: 1px solid #d3d3d3;
  height: 50px;
}

.mud-chip-outlined.mud-chip-color-primary {
  color: var(--mud-palette-primary);
  --mud-ripple-color: var(--mud-palette-primary) !important;
  border-image: linear-gradient(
      90deg,
      #a906ff,
      #5972d9,
      #5972d9,
      #ed6594,
      #f6ae2d
    )
    1 !important;
  border-style: solid !important;
  border-width: 2px !important;
}

.mud-chip {
  border: none;
  display: inline-flex;
  max-width: 100%;
  outline: 0;
  padding: 0px !important;
  position: relative;
  box-sizing: border-box;
  transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  align-items: center;
  white-space: nowrap;
  vertical-align: middle;
  justify-content: center;
  text-decoration: none;
  line-height: normal;
  margin: 4px;
}

.mud-chip.account-user-chip {
  padding: 10px !important;
  border-radius: 8px !important;
  border: 1px solid #d3d3d3;
}

.mud-chip.habit-detail-chip-time {
  padding: 12px !important;
}

.mud-list-item-gutters {
  padding-top: 12px;
  padding-bottom: 12px;
}

.mud-button {
  max-width: 350px;
  width: 100%;
  height: 48px;
  gap: 10px;
  border-radius: 30px;
  text-transform: none;
  font-size: 16px;
  line-height: 24px;
}

.mud-button-outlined {
  background: white;
}

.small-button {
  width: initial;
  min-width: 140px !important;
  font-size: 10px;
  font-weight: 400;
  border-radius: 50px !important;
  height: 32px !important;
}

.dual-button {
  width: 140px;
}

.empty-habits-container {
  background: linear-gradient(180deg, #f5f5f5 0%, #ffffff 100%);
}

/* Splash screen text */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  opacity: 0;
  animation: fadeIn 0.5s ease-out forwards;
}

.first-line {
  animation-delay: 0.5s;
  text-align: center;
  padding-top: 30px;
  font-family: "Geist", "Arial";
  color: rgb(74, 75, 131);
}

.second-line {
  animation-delay: 0.8s;
  text-align: center;
  padding-top: 10px;
  font-family: "Geist", "Arial";
  color: rgb(74, 75, 131);
}

.responsive-username {
  font-size: clamp(1rem, 2.5vw, 2rem);
  max-width: 90%;
  padding: 6px;
}

.gradient-animated-background {
  background-image: radial-gradient(
      at 100% 0%,
      hsla(0, 0%, 100%, 1) 0,
      transparent 90%
    ),
    radial-gradient(at 0% 100%, hsla(0, 0%, 100%, 1) 0, transparent 80%),
    radial-gradient(at 75% 100%, hsla(0, 0%, 100%, 1) 0, transparent 50%),
    radial-gradient(at 25% 0%, hsla(0, 0%, 100%, 1) 0, transparent 50%),
    radial-gradient(at 100% 0%, hsla(0, 0%, 100%, 1) 0, transparent 50%),
    radial-gradient(at 0% 100%, hsla(0, 0%, 100%, 1) 0, transparent 50%),
    radial-gradient(at 26% 66%, rgba(246, 174, 45, 0.4) 0, transparent 50%),
    radial-gradient(at 30% 60%, rgba(246, 174, 45, 1) 0, transparent 50%),
    radial-gradient(at 40% 40%, rgba(237, 101, 148, 1) 0, transparent 50%),
    radial-gradient(at 88% 25%, rgba(9, 114, 217, 1) 0, transparent 80%),
    radial-gradient(at 94% 99%, hsla(0, 0%, 100%, 1) 0, transparent 50%),
    radial-gradient(at 0% 0%, hsla(0, 0%, 100%, 1) 0, transparent 50%);
  animation: gradientAnimation 2s ease infinite;
  background-size: 110% 110%;
  background-repeat: no-repeat;
}

@keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.overlay-none {
  background-color: rgba(33, 33, 33, 0) !important;
}

.mud-timepicker-button {
  width: inherit;
  height: initial;
}

.swiper {
  width: 100%;
  padding-bottom: 40px !important;
}

.swiper-slide {
  background-position: center;
  background-size: cover;
  background: white;
}

.swiper-bullets {
  list-style: none;
  padding-left: 0;
  margin: 0 auto;
  max-width: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
}

.swiper-bullets li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  text-align: left;
  width: 100%;
}

.swiper-bullets li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: -2px;
  width: 20px;
  height: 20px;
  color: #14532d;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
}

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* File display improvements for mobile */
.file-info-container {
  flex: 1;
  min-width: 0; /* Allow flex item to shrink */
}

.file-name {
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.file-size {
  color: #666;
  font-size: 0.75rem;
}

.file-item {
  margin-bottom: 8px;
  border-radius: 8px;
}

/* Mobile-specific file display */
@media (max-width: 600px) {
  .file-name {
    font-size: 0.875rem;
    line-height: 1.25;
  }

  .file-size {
    font-size: 0.7rem;
  }

  .file-item {
    padding: 12px !important;
  }
}

/* Add left margin to snackbar messages on mobile */
@media (max-width: 767px) {
  .mud-snackbar {
    margin-left: 16px !important;
  }
}

/* Ensure snackbar appears on top of all elements (especially map controls) */
.mud-snackbar,
.mud-snackbar-wrapper,
#mud-snackbar-container {
  z-index: 20000 !important;
}

/* ========================================
   MAP PAGE SPECIFIC STYLES
   ======================================== */

/* Map Loading Overlay */
.map-loading-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  pointer-events: none;
}

.map-spinner-container {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  padding: 24px 32px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Map-specific MudBlazor Component Z-Index Fixes */
.mud-overlay {
  z-index: 10000 !important;
}

.mud-dialog-container {
  z-index: 10002 !important;
}

.mud-dialog {
  z-index: 10002 !important;
}

.mud-popover,
.mud-popover-open,
.mud-popover-provider,
.mud-select-popover,
.mud-list {
  z-index: 10000 !important;
}

.mud-paper.mud-popover-paper {
  z-index: 10000 !important;
}

/* Bottom Sheet Styles */
.bottom-sheet {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 72px;
  width: 100%;
  max-width: 500px;
  background: #ffffff;
  border-top-left-radius: 28px;
  border-top-right-radius: 28px;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
  padding: 20px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 4000;
  animation: slideUp 0.3s ease-out;
  max-height: 70vh;
  overflow-y: auto;
}

@keyframes slideUp {
  from {
    transform: translateX(-50%) translateY(100%);
  }
  to {
    transform: translateX(-50%) translateY(0);
  }
}

.bottom-sheet-header {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4001;
}

.close-button {
  background-color: rgba(0, 0, 0, 0.1) !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  transition: background-color 0.2s ease;
}

.close-button:hover {
  background-color: rgba(0, 0, 0, 0.2) !important;
}

/* Rating Chip Styling */
.rating-chip .mud-icon-root {
  color: white !important;
}

/* Provider List Container */
.provider-list-container {
  margin-bottom: 6rem;
  position: relative;
  z-index: 10;
}

/* Bottom Navigation Bar */
.mud-bottom-nav {
  z-index: 100 !important;
}

/* Map Control Buttons Container */
.map-controls-mobile {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.map-controls-desktop {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1000;
  display: flex;
  gap: 8px;
}

.map-control-button {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

/* Map Page Responsive Styles */
@media (min-width: 960px) {
  .bottom-sheet {
    border-radius: 16px;
    bottom: 80px;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    padding-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .bottom-sheet {
    bottom: 72px;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
    max-height: calc(
      100vh - 72px - env(safe-area-inset-top) - env(safe-area-inset-bottom)
    );
    overflow-y: auto;
  }

  .bottom-sheet .mud-stack:last-child {
    padding-bottom: 8px;
  }

  .bottom-sheet .details-button {
    flex: 1 !important;
    min-width: 0 !important;
    height: 48px !important;
  }

  .bottom-sheet .mud-stack-row {
    gap: 8px !important;
  }
}

/* Ensure disabled buttons remain readable */
.mud-button-root.mud-button-filled-primary:disabled {
  background-color: var(--mud-palette-primary) !important;
  color: white !important;
  opacity: 0.6;
}

.mud-button-root.mud-button-outlined-primary:disabled {
  border-color: var(--mud-palette-primary) !important;
  color: var(--mud-palette-primary) !important;
  opacity: 0.6;
}