@import url(components.css);

:root {

  --primary: var(--primary-scale-700);
  --secondary: #F2B46D;

  --primary-scale-900: #7A2225;
  --primary-scale-800: #932125;
  --primary-scale-700: #C1272D;
  --primary-scale-600: #D32F35;
  --primary-scale-500: #E64D53;
  --primary-scale-400: #F1787D;
  --primary-scale-300: #F8A9AC;
  --primary-scale-200: #FBCDCF;
  --primary-scale-100: #FDE3E4;
  --primary-scale-50: #FDF3F3;

  --black-scale-900: #222222;
  --black-scale-800: #4E4E4E;
  --black-scale-700: #656565;
  --black-scale-600: #7A7A7A;
  --black-scale-500: #919191;
  --black-scale-400: #A7A7A7;
  --black-scale-300: #BDBDBD;
  --black-scale-200: #E9E9E9;
  --black-scale-100: #F4F4F4;
  --black-scale-50: #F8F8F8;

  --success-100: #31A35F;
  --failure-100: #D71106;
  --in-progress-100: #EF7108;
  --active-100: #004FEF;
  --success-50: #EDFFEF;
  --failure-50: #FFE3E4;
  --in-progress-50: #FFF3E1;
  --active-50: #E9ECFF;

  --white: #FFFFFF;
  --black: #141414;

  --h1-headline: clamp(32px, 5vw, 56px);
  --h2-headline: clamp(28px, 4vw, 42px);
  --h3-headline: clamp(24px, 3.5vw, 36px);
  --h4-headline: clamp(20px, 3vw, 28px);
  --h5-headline: clamp(18px, 2.5vw, 24px);
  --h6-headline: clamp(16px, 2vw, 18px);
  --subtitle-1: 16px;
  --subtitle-2: 14px;
  --caption-text: 12px;
  --overline: 12px;
  --body-1: 16px;
  --body-2: 14px;
  --text-link: 16px;

}

* {
  padding: 0px;
  margin: 0px;
}

html {
  scroll-behavior: smooth;
}

body {
  padding: 0px;
  margin: 0px;
  font-family: "Inter", sans-serif;
  font-style: 400;
  font-size: 14px;
  font-weight: normal;
}

select {
  cursor: pointer !important;
}

a {
  text-decoration: none !important;
  font-weight: 600;
  color: var(--primary);
}

img {
  max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  margin: 0;
}

#collage {
  display: grid;
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100% !important;
}

.tile {
  width: 80px;
  height: 80px;
  object-fit: cover;
  object-position: center;
  display: block;
}

header {
  position: sticky;
  top: 0;
  z-index: 99;
  background: #fff;
}

#navbarSupportedContent {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0px 20px;
}

.navbar-brand {
  margin: auto;
  position: relative;
  z-index: 99;
}

.navbar-brand img {
  width: 200px;
}

.navbar-expand-lg .navbar-nav .nav-link {
  font-size: 16px;
  font-weight: 600;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.navbar-expand-lg .navbar-nav .nav-link i {
  font-size: 24px;
}

.offer-strip {
  padding: 10px;
  background: var(--primary);
  color: #FFF965;
  text-align: center;
  font-size: 16px;
}

.offer-strip span {
  color: var(--primary);
  background-color: #FFFEE5;
  display: inline-block;
  padding: 10px 15px;
  border-radius: 45px;
  margin-right: 15px;
  font-weight: 600;
}

.navbar {
  padding: 10px 20px;
}

header .btn-primary {
  min-width: 150px;
}

.collage-inner {
  height: 100vh !important;
  position: fixed;
  z-index: -1;
}

.auth-form-container {
  display: flex;
}

.auth-column-right {
  width: 50%;
  height: 100vh;
  background-color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-column-right h1 {
  font-size: clamp(26px, 2vw, 65px);
  color: var(--white);
  font-weight: 600;
  margin-bottom: 25px;
}

.auth-right-container {
  max-width: 500px;
  text-align: center;
}

.auth-column-left {
  width: 50%;
  overflow: auto;
  height: 100vh;
  display: flex;
  padding: 15px;
  overflow: auto;
}

.auth-card {
  min-height: 600px;
  background: var(--white);
  border-radius: 20px;
  width: 450px;
  padding: 20px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: auto;
}

.social-login {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.social-login .social-login-btn {
  width: 95px;
  height: 55px;
  border: 1px solid var(--black-scale-200);
  border-radius: 55px;
  background: var(--white);
}

.social-login .social-login-btn:hover {
  background: var(--black-scale-100);
}

.auth-header {
  text-align: center;
  margin-bottom: 30px;
}

.auth-header h4 {
  font-size: 30px;
  color: var(--black);
  font-weight: 700;
}

.auth-right-container figure {
  max-width: 300px;
  margin: auto;
}

.auth-right-container figure img {
  width: 100%;
}

.password-show-hide {
  position: relative;
}

.password-show-hide .eye-btn {
  position: absolute;
  top: 0;
  right: 0;
  height: 55px;
  width: 55px;
  font-size: 24px;
  background: none;
  border: none;
  color: var(--black-scale-400);
}

.password-show-hide .eye-btn:hover {
  color: var(--black-scale-600);
}

.or-divider {
  margin: 15px 0;
  text-align: center;
  color: var(--black-scale-400);
  font-weight: 600;
  position: relative;
}

.or-divider span {
  padding: 0px 10px;
  display: inline-block;
  background: var(--white);
  position: relative;
  z-index: 1;
}

.or-divider:after {
  height: 1px;
  background: var(--black-scale-200);
  width: 100%;
  position: absolute;
  content: "";
  left: 0;
  top: 10.5px;
}

#collage {
  background: #000;
}

@keyframes myAnim {
  0% {
    opacity: 0.5;
    transform: scale(0.9);
  }

  50% {
    opacity: 1;
    transform: scale(1.05);
  }

  100% {
    opacity: 0.5;
    transform: scale(0.9);
  }
}

/* Common style for every 5th image */
#collage img:nth-child(5n) {
  animation: myAnim 2s ease-in-out infinite alternate;
}

/* Smooth staggered wave using animation-delay */
#collage img:nth-child(5n):nth-child(5) {
  animation-delay: 0s;
}

#collage img:nth-child(5n):nth-child(10) {
  animation-delay: 0.5s;
}

#collage img:nth-child(5n):nth-child(15) {
  animation-delay: 1s;
}

#collage img:nth-child(5n):nth-child(20) {
  animation-delay: 1.5s;
}

#collage img:nth-child(5n):nth-child(25) {
  animation-delay: 2s;
}

#collage img:nth-child(5n):nth-child(30) {
  animation-delay: 2.5s;
}

/* Extend as needed for more images */


.profile-setup-wrap .container {
  max-width: 1590px;
}

.header-inner {
  box-shadow: 0px 5px 25px rgba(54, 53, 53, 0.09);
}

.profile-setup-head p {
  font-size: 24px;
  line-height: 150%;
}

.card-box-gry {
  padding: 15px;
  border-radius: 20px;
  background: var(--black-scale-50);
}

.form-check-box {
  padding: 10px;
  border: 1px solid var(--black-scale-200);
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  padding-right: 50px;
  height: 55px;
  align-items: center;
  display: flex;
}

.form-check-box label {
  font-size: 16px;
  display: block;
}

.form-check-box .form-check-input[type="radio"] {
  border-radius: 0;
  margin: 0;
  border: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1.875' y='1' width='22' height='22' rx='11' fill='white' stroke='%23E9E9E9' stroke-width='2'/%3E%3C/svg%3E%0A");
  background-size: 24px;
  background-position: right 15px center;
  background-color: transparent !important;
}

.form-check-box .form-check-input[type="radio"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='23' height='23' rx='11.5' fill='%23C1272D' stroke='%23C1272D'/%3E%3Cpath d='M12 5C10.6155 5 9.26216 5.41054 8.11101 6.17971C6.95987 6.94888 6.06266 8.04213 5.53285 9.32122C5.00303 10.6003 4.86441 12.0078 5.13451 13.3656C5.4046 14.7235 6.07129 15.9708 7.05026 16.9497C8.02922 17.9287 9.2765 18.5954 10.6344 18.8655C11.9922 19.1356 13.3997 18.997 14.6788 18.4672C15.9579 17.9373 17.0511 17.0401 17.8203 15.889C18.5895 14.7378 19 13.3845 19 12C18.998 10.1441 18.2599 8.36479 16.9475 7.05247C15.6352 5.74015 13.8559 5.00201 12 5ZM12 14.3333C11.5385 14.3333 11.0874 14.1965 10.7037 13.9401C10.32 13.6837 10.0209 13.3193 9.84428 12.8929C9.66768 12.4666 9.62147 11.9974 9.7115 11.5448C9.80154 11.0922 10.0238 10.6764 10.3501 10.3501C10.6764 10.0238 11.0922 9.80153 11.5448 9.7115C11.9974 9.62147 12.4666 9.66768 12.8929 9.84428C13.3193 10.0209 13.6837 10.32 13.9401 10.7037C14.1965 11.0874 14.3333 11.5385 14.3333 12C14.3333 12.6188 14.0875 13.2123 13.6499 13.6499C13.2123 14.0875 12.6188 14.3333 12 14.3333ZM12.5833 12C12.5833 12.1154 12.5491 12.2282 12.485 12.3241C12.4209 12.42 12.3298 12.4948 12.2232 12.5389C12.1166 12.5831 11.9994 12.5946 11.8862 12.5721C11.773 12.5496 11.6691 12.4941 11.5875 12.4125C11.5059 12.3309 11.4504 12.227 11.4279 12.1138C11.4054 12.0006 11.4169 11.8834 11.4611 11.7768C11.5052 11.6702 11.58 11.5791 11.6759 11.515C11.7718 11.4509 11.8846 11.4167 12 11.4167C12.1547 11.4167 12.3031 11.4781 12.4125 11.5875C12.5219 11.6969 12.5833 11.8453 12.5833 12Z' fill='white'/%3E%3C/svg%3E%0A");
}
.form-check.form-check-box:has(.form-check-input:checked) {
    border-color: #dc3545;
}
.form-check-box .form-check-input[type="checkbox"] {
  border-radius: 0;
  margin: 0;
  border: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1.38867' y='0.5' width='23' height='23' rx='5.5' fill='white' stroke='%23E9E9E9'/%3E%3C/svg%3E%0A");
  background-size: 24px;
  background-position: right 15px center;
  background-color: transparent !important;
}

.form-check-box .form-check-input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.944336' y='0.5' width='23' height='23' rx='5.5' fill='%23C1272D' stroke='%23C1272D'/%3E%3Cg clip-path='url(%23clip0_10657_4838)'%3E%3Cpath d='M18.4637 7.58475L10.4026 15.6453C10.3484 15.6997 10.284 15.7428 10.2131 15.7723C10.1422 15.8018 10.0661 15.8169 9.98933 15.8169C9.91253 15.8169 9.83649 15.8018 9.76556 15.7723C9.69464 15.7428 9.63023 15.6997 9.57603 15.6453L6.4587 12.525C6.4045 12.4706 6.3401 12.4274 6.26917 12.398C6.19825 12.3685 6.12221 12.3533 6.04541 12.3533C5.96861 12.3533 5.89257 12.3685 5.82165 12.398C5.75072 12.4274 5.68632 12.4706 5.63212 12.525C5.57771 12.5792 5.53453 12.6436 5.50507 12.7145C5.47561 12.7855 5.46045 12.8615 5.46045 12.9383C5.46045 13.0151 5.47561 13.0911 5.50507 13.1621C5.53453 13.233 5.57771 13.2974 5.63212 13.3516L8.75062 16.4695C9.07959 16.7979 9.5254 16.9823 9.9902 16.9823C10.455 16.9823 10.9008 16.7979 11.2298 16.4695L19.2903 8.41075C19.3446 8.35657 19.3877 8.2922 19.4171 8.22133C19.4465 8.15046 19.4617 8.07448 19.4617 7.99775C19.4617 7.92103 19.4465 7.84505 19.4171 7.77418C19.3877 7.70331 19.3446 7.63894 19.2903 7.58475C19.2361 7.53034 19.1717 7.48717 19.1008 7.45771C19.0298 7.42825 18.9538 7.41309 18.877 7.41309C18.8002 7.41309 18.7242 7.42825 18.6532 7.45771C18.5823 7.48717 18.5179 7.53034 18.4637 7.58475Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_10657_4838'%3E%3Crect width='14' height='14' fill='white' transform='translate(5.44434 5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}

.radio-width .form-check {
  width: 163.5px;
}

h5 sup {
  color: var(--primary);
}

.label-heading p {
  color: var(--black-scale-700);
}

.file-input input[type=file]::file-selector-button {
  display: none;
}

.file-input input {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19H20V12H22V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V12H4V19ZM13 9V16H11V9H6L12 3L18 9H13Z' fill='black'/%3E%3C/svg%3E%0A");
  background-color: var(--white);
  background-repeat: no-repeat;
  background-position: right 15px center;
}

.profile-photos-upload {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  grid-gap: 15px;
}

.profile-upload-box {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 9 / 10;
}

.profile-upload-box img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}

.profile-upload-box .remove-photo-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  border: none;
  color: var(--white);
}

.profile-upload-box .remove-photo-btn:hover {
  background-color: rgba(0, 0, 0, 0.9);
}

.profile-upload-box .input-profile-upload-btn input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  color: transparent;
  height: 100%;
  cursor: pointer;
  border: none;
  background-image: url("data:image/svg+xml,%3Csvg width='35' height='34' viewBox='0 0 35 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.1115 31.1666C24.9355 31.1666 31.2782 24.824 31.2782 16.9999C31.2782 9.17588 24.9355 2.83325 17.1115 2.83325C9.28746 2.83325 2.94482 9.17588 2.94482 16.9999C2.94482 24.824 9.28746 31.1666 17.1115 31.1666Z' stroke='%23C1272D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.4448 17H22.7782' stroke='%23C1272D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M17.1115 11.3333V22.6666' stroke='%23C1272D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40px;
}

.profile-upload-box .input-profile-upload-btn input[type=file]::file-selector-button {
  display: none;
}

textarea.form-control {
  height: 100px;
}

.profile-setup-wrap {
  padding: 50px 0;
}

.profile-setup-head {
  margin-bottom: 30px;
}

.text-info-full .buttons-fix {
  position: fixed;
  bottom: 30px;
  right: 30px;
  left: auto;
}

.text-info-full {
  height: 80vh;
  display: flex;
  align-items: center;
}

.text-info-full .profile-setup-head {
  margin: 0;
  max-width: 850px;
  margin: auto;
}

.profile-setup-head h3 span {
  color: var(--primary);
}

.height-enter-opt button {
  background: var(--black-scale-100);
  border: 1px solid var(--black-scale-200);
  border-radius: 12px;
  padding: 10px;
  min-width: 75px;
}

.height-enter-opt .form-group {
  width: 100%;
}

.image-box {
  max-width: 950px;
  margin: auto;
  margin-top: 30px;
}

.image-box img {
  border-radius: 20px;
}

.form-label-2 {
  text-transform: none;
}

.mothly-charge {
  background: var(--primary-scale-50);
  border-radius: 20px;
  padding: 15px 30px;
  margin-bottom: 20px;
}

.mothly-charge h4 {
  margin: 0;
}

.withicon {
  position: relative;
}

.withicon .form-control {
  padding-right: 55px;
}

.withicon button {
  position: absolute;
  top: 30px;
  right: 0;
  width: 55px;
  height: 55px;
  border: none;
  background: none;
  font-size: 28px;
  color: #A7A7A7;
}

.enhance-profile-list ul {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.enhance-profile-list ul li {
  padding: 15px;
  border-radius: 10px;
  background-color: var(--white);
  border-color: var(--black-scale-200);
  border: solid 1px var(--black-scale-200);
}

.enhance-profile-list ul li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  flex-wrap: wrap;
}

.enhance-profile-left h3 {
  font-size: 24px;
  font-weight: 700;
  color: var(--black-scale-900);
  margin-bottom: 10px;
}

.enhance-profile-left p {
  font-size: 14px;
  color: var(--black-scale-700);
  margin: 0;
}

.enhance-profile-list .form-check-box {
  background: none;
  border: none;
}

.progress-container {
  position: relative;
  margin-top: 30px !important;
  margin: 15px 0px;
}

.progress-circle {
  position: absolute;
  top: -11px;
  left: 10px;
  width: 24px;
  height: 24px;
  background-color: #fff;
  box-shadow: 0px 0.5px 4px rgba(0, 0, 0, 0.12), 0px 6px 13px rgba(0, 0, 0, 0.12);
  border-radius: 50%;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  transform: translateX(-50%);
  cursor: grab;
  user-select: none;
}

.progress {
  height: 4px;
}

.progress-bar.bg-success {
  background-color: #C1272D !important;
}

.progress-up-down {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.progress-up-down span {
  font-size: 18px;
  color: var(--black-scale-400);
}

.modal-close {
  bottom: -61px;
  right: auto;
  width: 100%;
  position: absolute;
  background: none;
  border: none;
}

.modal-close.modal-close-2 {
  bottom: -78px;
}


.filter-btn {
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 10px;
  padding: 0;
  height: auto;
}

.filter-btn:after {
  display: none;
}

.filter-btn span {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary-scale-600);
}

.dashborad-body-inner {
  background: var(--black-scale-50);
  border-radius: 20px;
  overflow: hidden;
}

.user-image-box {
  max-width: 498px;
  width: 100%;
}

.user-image-box img {
  border-radius: 15px;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.profile-slider .swiper-slide { aspect-ratio: 9/12; }

.dashborad-des-box {
  padding: 15px;
  flex: 1;
  padding-right: 45px;
}

.title-status-box {
  display: flex;
  align-items: center;
  gap: 5px;
}

.title-status-box h2 {
  color: var(--black-scale-900);
  font-weight: 700;
}

.status {
  background: #EDFFEF;
  color: #31A35F;
  padding: 5px 10px;
  border-radius: 10px;
}

.km-away {
  color: var(--black-scale-700);
}

.card-action-box {
  position: absolute;
  bottom: -25px;
  z-index: 9;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.card-action-box button {
  background: #fff;
  box-shadow: 0px 1.16667px 9.33333px rgba(66, 65, 65, 0.15);
  width: 46px;
  height: 46px;
  border-radius: 100px;
  border: none;
}

.relative {
  position: relative;
}

.card-action-box button.heart-btn {
  background: linear-gradient(90deg, #C127A2 -23.37%, #C1272D 100%);
}

.filter-box-dropdown {
  width: 186px;
  border-radius: 6px;
  box-shadow: 0px 1.16667px 9.33333px rgba(66, 65, 65, 0.15);
  border: none;
  padding: 5px 5px;
}

.accordion-button {
  padding: 10px !important;
  box-shadow: none !important;
  outline: none !important;
}

.filter-box .btn-outline {
  height: 42px;
}

.report-block-box {
  position: absolute;
  right: 15px;
  top: 15px;
}

.report-block-dropdown {
  box-shadow: none;
  border: none;
  box-shadow: 0px 1.16667px 9.33333px rgba(66, 65, 65, 0.15);
  border-radius: 6px;
  padding: 10px;
  max-width: 85px;
  min-width: 85px;
}

.report-block-dropdown li {
  margin-bottom: 5px;
}

.report-block-dropdown li:last-child {
  margin-bottom: 0;
}

.report-block-dropdown li a {
  font-size: 14px;
  font-weight: normal;
  color: var(--black-scale-900);
}

.chatbot-dropdown-box {
  position: fixed;
  right: 15px;
  bottom: 15px;
  z-index: 99;
}

.ai-cupid-box-dropdown {
  width: 379px;
  border: none;
  padding: 0;
  background: #FFFFFF;
  box-shadow: 0px 4px 14px rgba(126, 126, 126, 0.25);
  border-radius: 16px;
  overflow: hidden;
}

.ai-card-header {
  background: var(--primary-scale-700);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 15px;
}

.ai-card-header span {
  color: var(--white);
}

.ai-card-body {
  padding: 15px;
}

.skip-next-btn {
  gap: 15px;
}

.skip-next-btn button {
  flex: 1;
}

.its-match-box {
  max-width: 665px;
  width: 100%;
  margin: auto;
  background: var(--black-scale-50);
  border-radius: 20px;
  padding: 70px 50px;
  text-align: center;
}

.match-profile-image {
  width: 204px;
  height: 204px;
  border-radius: 100%;
  border: solid 5px #fff;
  overflow: hidden;
}

.match-profile-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-match-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 30px 0px;
}

.profile-match-right {
  margin-left: -60px;
  position: relative;
  z-index: 1;
}

.heart-button {
  position: absolute;
  left: auto;
  right: auto;
  bottom: 0;
  z-index: 2;
  background: none;
  border: none;
}

.search-bell-profile-bg {
  display: flex;
  align-items: center;
  gap: 15px;
}

.profile-btn {
  background: transparent;
  border: none;
}

.profile-btn img {
  object-fit: cover;
  width: 46px;
  height: 46px;
  border-radius: 100%;
}

.profile-dropdown-bg .dropdown-menu {
  left: auto;
  right: 0;
}

.chat-container {
  height: calc(100vh - 230px);
  display: flex;
  border-radius: 20px;
  overflow: hidden;
  background: var(--black-scale-50);
}

.chat-list {
  background: #1e1e1e;
  color: #fff;
  overflow-y: auto;
}

.chat-list .list-group-item {
  background: transparent;
  color: #fff;
  border: none;
  border-radius: 0;
  cursor: pointer;
}

.chat-list .active {
  background: var(--black-scale-800);
}

.chat-header {
  border-bottom: 1px solid #ddd;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chat-messages {
  flex: 1;
  padding: 15px;
  overflow-y: auto;
}

.chat-bubble {
  padding: 10px 15px;
  border-radius: 20px;
  display: inline-block;
  /* max-width: 70%; */
  margin-bottom: 10px;
}

.chat-bubble.sent {
  background: var(--primary-scale-100);
  align-self: flex-end;
  border-radius: 20px 0px 20px 20px !important;
}

.chat-bubble.received {
  background: var(--black-scale-900);
  color: #fff;
  align-self: flex-start;
  border-radius: 0px 20px 20px 20px !important;
}

.chat-footer {
  border-top: 1px solid #ddd;
  padding: 10px;
}

.chat-footer input {
  border-radius: 20px;
}

.chat-list {
  width: 380px;
  max-width: 380px;
}

.chat-window {
  flex: 1;
}

.chat-user-box {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chat-user-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.chat-user-info {
  flex: 1;
}

.chat-user-info p {
  margin: 0;
  color: var(--black-scale-300);
}

.chat-user-right {
  display: flex;
  flex-direction: column;
  justify-content: end;
  gap: 5px;
}

.chat-user-right p {
  margin: 0;
  color: var(--black-scale-300);
  font-size: 12px;
}

.chat-action-box {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chat-action-box button {
  background: none;
  border: none;
}

.chat-dropdown::after {
  content: none;
}

.chat-footer .form-control {
  background: transparent;
  border: none;
  border-radius: 0;
  outline: none !important;
  box-shadow: none !important;
}

.message-send-box {
  display: flex;
  align-items: center;
  gap: 10px;
}

.message-send-box button {
  background: none;
  border: none;
  width: 38px;
  flex: 0 0 38px;
}

.profile-cover-image {
  position: relative;
}

.profile-cover-image img {
  width: 100%;
  height: 100%;
  aspect-ratio: 10 / 2;
  border-radius: 20px;
  object-position: center;
  object-fit: cover;
}

.profile-cover-dropdown {
  position: absolute;
  right: 15px;
  top: 15px;
}

.profile-cover-btn {
  width: 38px;
  height: 38px;
  border-radius: 100%;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  padding: 3px;
}

.login-user-profile {
  margin-top: -70px;
  position: relative;
  z-index: 1;
  padding: 0px 30px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.login-user-profile-left {
  display: flex;
  gap: 15px;
  align-items: flex-end;
}

.login-user-profile-left figure {
  width: 147px;
  height: 147px;
  border-radius: 100px;
  border: solid 5px #fff;
  overflow: hidden;
  margin: 0;
}

.login-user-profile-left figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-action-box.user-profile-right {
  position: initial;
  width: auto;
  margin-bottom: 15px;
}

.profile-info-full {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.profile-info-box {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.profile-info-box p {
  color: var(--black-scale-700);
  margin: 0;
}

.photo-list {
  display: flex;
  align-items: center;
  gap: 15px;
}

.photo-list img {
  width: 117px;
  height: 139px;
  object-fit: cover;
  border-radius: 15px;
}

.personality-information-box {
  padding: 20px;
  background: var(--black-scale-50);
  border-radius: 20px;
}

.information-column-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
}

.information-column {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.information-column span {
  color: var(--black-scale-700);
}

.notification-card {
  background: var(--black-scale-50);
  border-radius: 15px;
  padding: 30px;
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.notification-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  background: #fff;
  border: 1px solid var(--black-scale-200);
  border-radius: 20px;
}

.notification-text {
  margin-left: 12px;
  flex-grow: 1;
}

.notification-text h6 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.notification-text small {
  color: #6c757d;
}

.notification-time {
  font-size: 13px;
  color: #6c757d;
  white-space: nowrap;
}

.avatar {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  object-fit: cover;
}

.filter-btn {
  color: var(--primary-scale-700);
}

.profile-img {
  aspect-ratio: 1/1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
}


.matches-wrap .nav-pills .nav-link {
  color: #000;
  background-color: var(--primary-scale-50);
  border-radius: 80px;
  padding: 15px 10px;
  font-weight: 500;
  margin-right: 10px;
  font-size: 14px;
}

.matches-wrap .nav-pills .nav-link.active {
  color: #fff;
  background-color: var(--primary-scale-500);
}

.matches-wrap .filter-dropdown {
  background-color: #fff;
  color: #343a40;
  border: 1px solid var(--black-scale-200) !important;
  border-radius: 12px;
  padding: 0px 15px;
  font-size: 18px;
  font-weight: normal;
  justify-content: space-between;
  box-shadow: none;
}

.matches-wrap .filter-dropdown:after {
  content: "";
  background: url(../images/arrow.png) no-repeat center center;
  width: 24px;
  height: 24px;
  border: none;
}

#matchModal .modal-dialog {
  max-width: 1067px;
}

#matchModal .modal-content {
  border-radius: 25px;
}

.message-btn {
  background: var(--primary-scale-500);
}

.view-card {
  background: var(--primary-scale-50);
  border-radius: 20px;
}

.soft-red-bg-light {
  width: 71px;
  height: 67px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-scale-100);
}

.view-card .body-2 {
  color: var(--black-scale-700);
}

.light-gray {
  background: var(--black-scale-50);
  border-radius: 20px;
}

.user-list-bg img {
  width: 52px;
  height: 52px;
  border-radius: 100%;
  object-fit: cover;
  max-width: 52px;
  margin-right: 10px;
}

.aspect-square {
  aspect-ratio: 1/1;
  border-radius: 15px;
}

.aspect-square img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
}

.unlock-premium-box {
  background: var(--primary-scale-100);
  padding: 30px;
}

.unlock-premium-box img {
  max-width: 24px;
  width: auto;
  height: auto;
}

.unlock-premium-box p {
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-scale-600);
}

.top-picks-box h6 {
  font-size: 14px;
}

.top-picks-box p {
  margin: 0;
}

.search-pill-container {
  position: relative;
}

.search-icon-btn {
  position: absolute;
  left: 15px;
  top: 15px;
  z-index: 9;
}

.search-pill-container .form-control {
  padding-left: 50px;
}


.free-trial-banner {
  background: var(--primary-scale-50);
  padding: 15px;
  border-top: solid 2px var(--primary-scale-700);
  border-radius: 20px;
  text-align: center;
  margin-bottom: 45px;
}

.free-trial-banner p {
  color: var(--black-scale-700);
}



/* Card Styling */
.price-card {
  background: var(--black-scale-50);
  border-radius: 20px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 45px 25px;
}

.price-card h2 {
  font-size: 16px;
  color: var(--black-scale-900);
}





.price-card-platinum {
  background-color: #130F05;
  color: white;
}

.price-card-platinum .text-muted {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Pricing Text */

.price-card-platinum .price-main {
  color: #ffc107;
  /* Highlight price in yellow */
}

/* Feature List */
.feature-list {
  padding-left: 15px;
  list-style: disc;
  border-top: solid 1px var(--black-scale-200);
  padding-top: 30px;
}

.feature-list li {
  margin-bottom: 0.75rem;
  color: var(--black-scale-700);
  font-size: 14px;
}




.price-card-platinum .feature-list {
  border-color: rgba(255, 255, 255, 0.2);
}


/* 01 12 2025 */
.swiper-button-next.btn,
.swiper-button-prev.btn {
  background: #fff !important;
  min-width: 44px;
  color: #000;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.12);
}

.swiper-button-next.btn:after,
.swiper-button-prev.btn:after {
  font-size: 18px;
}

.settings-page-menu ul {
  background-color: var(--primary-scale-50);
  border-radius: 20px;
  padding: 20px 0;
  list-style: none;
}

.settings-page-menu ul li a {
  padding: 10px 20px;
  color: var(--black-scale-900);
  display: flex;
  align-items: center;
  gap: 15px;
}

.settings-page-menu ul li a:hover {
  background: var(--primary-scale-100);
}

.settings-page-menu ul li a i {
  font-size: 24px;
  color: var(--primary);
}

.settings-page-menu ul li a.active {
  background: var(--primary-scale-900);
  color: var(--white);
}

.settings-page-menu ul li a.active i {
  color: var(--white);
}

.settings-page-wrap {
  max-width: 1100px;
  margin: auto;
  display: flex;
  gap: 30px;
}

.settings-page-wrap .settings-page-menu {
  width: 265px;
  min-width: 265px;
}

.settings-page-wrap .settings-page-content {
  width: 100%;
  background-color: var(--black-scale-50);
  padding: 20px;
  border-radius: 20px;
}

.heading-labels h6 {
  font-weight: 500;
  font-size: 14px;
  line-height: 140%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--black-scale-600);
}

.form-check-normal.form-check-box {
  background: none;
  border: none;
  padding: 0;
  padding-left: 30px;
  height: auto;
}

.form-check-normal.form-check-box .form-check-input[type="radio"] {
  background-position: left;
}

.profile-settings-card {
  padding: 15px;
  background: var(--white);
  border: 1px solid var(--black-scale-200);
  justify-content: space-between;
  border-radius: 20px;
}

.profile-settings-card p {
  color: var(--black-scale-700);
}

.alert-modal .modal-body {
  padding: 40px;
}

.alert-modal .modal-content {
  border: none;
}

.alert-modal .modal-content p {
  color: var(--black-scale-700);
}

.profile-slider .swiper-pagination {
  position: absolute;
  bottom: 20px !important;
  top: auto !important;
  z-index: 1;
  height: auto !important;
  background: no-repeat;
}

.profile-slider .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 5px;
  background: white;
  opacity: 40%;
  border-radius: 0;
  transition: 0.3s ease-in-out;
}

.profile-slider .swiper-pagination .swiper-pagination-bullet-active {
  width: 30px;
  opacity: 1;
}

/* 03 12 2025 */

.top-list-box .dashboard-card {
  background: var(--primary-scale-50);
  border-radius: 20px;
  padding: 15px !important;
  border: none !important;
  display: flex;
  align-items: center;
  gap: 15px;
  justify-content: space-between;
  flex-direction: row;
}

.top-list-box .dashboard-card figcaption {
  flex: 1;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.top-list-box .dashboard-card figcaption div {
  color: var(--black-scale-900);
  font-size: var(--h5-headline);
}

.top-list-box .dashboard-card figcaption p {
  color: var(--black-scale-700);
  font-size: 14px;
}

.referral-code-bg {
  background: var(--black-scale-50);
  border-radius: 20px;
  border: none !important;
}

.referral-code-bg h3 {
  font-size: 18px;
  font-weight: bold;
  color: #000000;
  margin-bottom: 15px;
}

.referral-code-box {
  background: var(--primary-scale-50);
  border: dashed 1px #C1272D;
  border-radius: 20px;
}

.share-via-bg h5 {
  font-size: 14px;
  color: #656565;
  text-align: center;
}

.share-via-list a {
  background: #fff;
  border: solid 1px var(--black-scale-200);
  border-radius: 50px;
  padding: 10px 30px;
}


.referral-history-bg {
  background: var(--black-scale-50);
  border-radius: 20px;
  border: none !important;
}

.referral-history-bg h3 {
  font-size: 18px;
  font-weight: bold;
  color: #000000;
  margin-bottom: 15px;
}

.referral-history-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.referral-history-list li {
  background: #fff;
  border: solid 1px var(--black-scale-200);
  border-radius: 20px;
  padding: 15px;
  display: flex;
  gap: 15px;
  align-items: center;
  justify-content: space-between;
}

.referral-history-list li h3 {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  color: var(--black-scale-900);
}

.referral-history-list li p {
  margin: 0;
  font-size: 14px;
  color: var(--black-scale-600);
}

.status-box span {
  font-size: 14px;
  margin-bottom: 5px;
}

.status-box .text-success {
  color: #34C759;
}

.status-box .text-danger {
  color: #FF383C;
}

.status-box .badge {
  padding: 8px;
  border-radius: 8px;
}

.status-box .badge.bg-warning {
  background: #FFF3E1 !important;
  color: #EF7108 !important;
  font-weight: normal !important;
}

.status-box .badge.bg-success {
  background: #EDFFEF !important;
  color: #31A35F !important;
  font-weight: normal !important;
}

.status-box .badge.bg-danger {
  background: #FFE3E4 !important;
  color: #D71106 !important;
  font-weight: normal !important;
}

.withdraw-recharge-bg {
  background: var(--black-scale-50);
  border-radius: 20px;
  border: none !important;
  padding: 20px;
}

.total-amount-box {
  background: #FDF3F3;
  border-radius: 20px;
  padding: 15px;
}

.card-details-bg {
  background: var(--black-scale-50);
  border-radius: 20px;
  border: none !important;
  padding: 20px;
}


.settings-card {
  max-width: 100%;
}

.setting-item {
  padding: 10px 0;
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-title {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 2px;
  color: #212529;
}

.setting-description {
  color: #6c757d;
  font-size: 16px;
}

.form-switch .form-check-input:checked {
  background-color: #dc3545;
  /* Bootstrap danger color, similar to the image */
  border-color: #dc3545;
}


.privacy-security-list .form-switch .form-check-input {
  height: 26px;
  width: 46px;
}


.error {
  color: var(--primary);
}

/* 🔴 Remove Bootstrap invalid (cross) icon from password inputs */
input[type="password"].is-invalid {
  background-image: none !important;
  padding-right: 0.75rem !important;
  /* reset spacing */
}
.notification-item .avatar { min-width: 45px; }
.chat-tabs .btn { background-color: var(--black-scale-800);color: #fff; }
.reaction-picker { position: absolute;z-index: 1;padding: 2px !important;background: #fff; border-radius: 35px;bottom: 20px;right: 80%;box-shadow: 0px 1.16667px 9.33333px rgba(66, 65, 65, 0.15);}
.reaction-picker .btn-group { border: none !important;box-shadow: none !important; }
.reaction-picker .btn-group button { border: none;width: 35px;height: 35px;display: flex;align-items: center;justify-content: center;border-radius: 30px;background: none;font-size: 20px; }
.reaction-picker .btn-group button:hover { background: var(--black-scale-100); }
.chat-btn-icon { width: 55px;padding: 0;display: flex;align-items: center;justify-content: center;min-width: 55px; }
#emoji-picker { width: 304px;
  bottom: 0;
  height: 300px;
  overflow: auto; }
.chat-footer  { position: relative; }
.emoji-grid span { cursor: pointer; width: 35px;height: 35px;display: inline-flex;align-items: center;justify-content: center;border-radius: 30px;font-size: 20px; }
.emoji-grid span:hover { background: var(--black-scale-100); }