/* Navbar Styling */
.navbar-brand img {
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  height: auto;
}

.nav-link {
  font-weight: 500;
  color: var(--text-dark);
  font-size: 15px;
  transition: color 0.3s ease;
}

.navbar {
  background-color: white;
}

.nav-link:hover,
.nav-link.active {
  color: var(--primary-color) !important;
  ;
}

textarea.form-control {
  min-height: 110px;
}

.btn-signin {
  font-weight: 600;
  color: var(--text-dark);
  text-decoration: none;
  font-size: 15px;
}

.btn-join {
  background: var(--primary-gradient);
  color: var(--white);
  padding: 12px 28px;
  border-radius: 50px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(115, 66, 235, 0.3);
  border: none;
}

.btn-join:hover {
  transform: translateY(-2px);
  color: var(--white);
  box-shadow: 0 6px 20px rgba(115, 66, 235, 0.4);
}

/* Hero Section */
.hero-section {
  background: linear-gradient(180deg, #ffffff 0%, #e8f9ff 100%);
  overflow: hidden;
  padding-bottom: 40px;
}

.hero-top-info {
  border-color: rgba(0, 0, 0, 0.05) !important;
}

.info-text {
  font-size: 12px;
  letter-spacing: 2px;
  color: #888;
}

.py-100 {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}

.hero-title {
  font-family: var(--font-heading);
  font-size: 72px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--text-dark);
}

.accent-italic {
  font-style: italic;
  color: var(--primary-color);
}

.underline-wrap {
  position: relative;
  display: inline-block;
}

.hero-underline-svg {
  position: absolute;
  bottom: -10px;
  left: -5%;
  width: 110%;
  pointer-events: none;
}

.ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #e6f1ff;
  color: #5067e4;
  padding: 10px 20px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
}



.btn-begin {
  background: #000;
  color: #fff;
  padding: 14px 30px;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 16px;
  transition: all 0.3s ease;
  text-decoration: none;
}

.btn-begin:hover {
  transform: scale(1.02);
  color: #fff;
}

.arrow-circle {
  background: #fff;
  color: #000;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Floating Graphics */
.hero-graphics-container {
  min-height: 480px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-floating-card {
  background: #fff;
  border-radius: 28px;
  padding: 12px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.08);
  position: absolute;
  width: 310px;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(255, 255, 255, 0.8);
}

.hero-floating-main {
  z-index: 10;
  left: 10%;
  top: 15%;
  transform: rotate(-4deg) !important;
  animation: float-main 6s ease-in-out infinite;
}

.hero-floating-secondary {
  z-index: 5;
  right: 5%;
  top: 0;
  transform: rotate(6deg);
  animation: float-secondary 8s ease-in-out infinite;
}

.hero-floating-img {
  width: 100%;
  height: 240px;
  border-radius: 25px;
  overflow: hidden;
  margin-bottom: 12px;
}

.hero-floating-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-floating-details {
  padding: 0 8px 8px;
}

.hero-floating-name {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 6px;
  color: #111;
}

.hero-floating-location {
  color: #8e8e8e;
  font-size: 15px;
  margin-bottom: 15px;
}

.hero-floating-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.hero-floating-tags span {
  background: #f0f0f0;
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  color: #444;
}

.match-percentage {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

.progress-container {
  flex-grow: 1;
  height: 6px;
  background: #f5f5f5;
  border-radius: 10px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #ff9d9d 0%, #FFD25E 100%);
  border-radius: 10px;
}

.pct-text {
  font-size: 16px;
  font-weight: 800;
  color: #ff9d9d;
  opacity: 0.8;
}

.floating-online-badge {
  background: rgb(255 255 255 / 30%);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(15px);
  padding: 20px 20px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.04);
  border: 1px solid rgb(212 212 212 / 60%);
  position: absolute;
  left: -20px;
  top: 70px;
  z-index: 20;
  font-weight: 700;
  font-size: 16px;
  color: #111;
  animation: float-badge 5s ease-in-out infinite;
}

.star-icon {
  background: #fff4d7;
  color: #FFB800;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.liked-notification {
  background: rgb(255 255 255 / 21%);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(15px);
  padding: 17px 20px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.04);
  border: 1px solid rgb(212 212 212 / 60%);
  position: absolute;
  left: -10px;
  bottom: -18px;
  z-index: 20;
  width: 230px;
  animation: float-badge 7s ease-in-out infinite 1s;
}

.user-thumb {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
}

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

.notif-content h6 {
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 2px;
  color: #111;
}

.notif-content span {
  font-size: 13px;
  color: #999;
}

.new-match-notif {
  background: rgb(255 255 255 / 49%);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(15px);
  padding: 15px 20px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  gap: 15px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.04);
  border: 1px solid rgb(212 212 212 / 60%);
  position: absolute;
  right: -40px;
  bottom: 200px;
  z-index: 15;
  width: 210px;
  animation: float-badge 6s ease-in-out infinite 0.5s;
}

.heart-icon-box {
  background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.notif-text h6 {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 2px;
  color: #111;
}

.notif-text span {
  font-size: 13px;
  color: #999;
}

/* Search Bar Section Redesigned */
.hero-search-wrapper {
  margin-top: 40px;
  position: relative;
  z-index: 20;
}

.search-grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr) 180px;
  gap: 12px;
  align-items: center;
  background: #fff;
  padding: 16px;
  border-radius: 24px;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.05);
}

.search-card {
  background: #E8F5FF;
  padding: 12px 16px;
  border-radius: 16px;
  transition: all 0.3s ease;
  position: relative;
}

.search-card.focused {
  background: #fff;
  box-shadow: 0 0 0 2px var(--primary-color);
}

.search-card label {
  font-size: 10px;
  font-weight: 700;
  color: #9ab1c7;
  display: block;
  margin-bottom: 2px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.btn-discover {
  background: var(--primary-gradient);
  color: #fff;
  border: none;
  padding: 14px;
  border-radius: 16px;
  font-weight: 600;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.3s ease;
  height: 62px;
}

.btn-discover:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(115, 66, 235, 0.3);
}

/* Select2 Customization for Cards */
.select2-container--default .select2-selection--single {
  border: none !important;
  height: auto !important;
  padding: 0 !important;
  background: transparent !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0 !important;
  font-weight: 700;
  color: #111 !important;
  font-size: 15px;
  line-height: 1.2 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 50% !important;
  transform: translateY(-50%) !important;
  right: 0 !important;
  width: 20px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  display: none !important;
  /* Hide default arrow */
}

.select2-container--default .select2-selection--single .select2-selection__arrow::after {
  content: "\e015";
  font-family: 'Iconify';
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='m6 9l6 6l6-6'/%3E%3C/svg%3E");
  display: block;
  transition: transform 0.3s ease;
  margin-top: 5px;
}

.select2-container--open .select2-selection--single .select2-selection__arrow::after {
  transform: rotate(180deg);
  margin-top: -2px;
}

/* Select2 Dropdown Animation */
.select2-dropdown {
  border: none !important;
  border-radius: 15px !important;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1) !important;
  overflow: hidden;
  animation: select2Open 0.3s ease-out;
}

@keyframes select2Open {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

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

.select2-results__option {
  padding: 10px 20px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.select2-results__option--highlighted[aria-selected] {
  background-color: var(--primary-color) !important;
}

@keyframes float-main {

  0%,
  100% {
    transform: translateY(0) rotate(-4deg);
  }

  50% {
    transform: translateY(-15px) rotate(-2deg);
  }
}

@keyframes float-secondary {

  0%,
  100% {
    transform: translateY(0) rotate(6deg);
  }

  50% {
    transform: translateY(-20px) rotate(8deg);
  }
}

@keyframes float-badge {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }
}

/* Ticker Section */
.ticker-section {
  background: #000;
  padding: 20px 0;
  overflow: hidden;
  position: relative;
  z-index: 10;
}

.ticker-wrapper {
  display: flex;
  width: max-content;
}

.ticker-content {
  display: flex;
  align-items: center;
  gap: 50px;
  animation: ticker-scroll 30s linear infinite;
  white-space: nowrap;
}

.ticker-item {
  display: flex;
  align-items: center;
  gap: 50px;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 400;
}

.ticker-item span {
  font-style: italic;
}

.ticker-item iconify-icon {
  font-size: 18px;
  color: #fff;
  opacity: 0.8;
}

@keyframes ticker-scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}


/* Process Section */
.process-section {}

.process-tagline {
  color: var(--primary-color);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 2px;
}

.process-title {
  font-family: var(--font-heading);
  font-size: 44px;
  font-weight: 400;
  line-height: 1.1;
  color: #211e1e;
}

.process-desc {
  color: #666;
  font-size: 16px;
  line-height: 1.6;
}

.process-box {
  background: #eef9ff;
  border-radius: 30px;
  padding: 40px 20px;
  margin-top: 35px;
}

.process-card {
  padding: 15px 30px;
}

.card-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.step-num {
  font-family: var(--font-heading);
  font-size: 52px;
  color: #d1dae3;
  line-height: 1;
}

.card-header-top iconify-icon {
  font-size: 24px;
  color: #211e1e;
}

.card-content h3 {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #211e1e;
}

.card-content p {
  color: #666;
  font-size: 15px;
  line-height: 1.6;
}

/* Members Section */

.members-section {
  background-color: #eef9ff !important;
  overflow: hidden;
}

.btn-all-profiles {
  background: #000;
  color: #fff;
  padding: 12px 28px;
  border-radius: 50px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
  text-decoration: none;
}

.btn-all-profiles:hover {
  background: var(--primary-color);
  color: #fff;
  transform: translateY(-2px);
}

.member-card-wrapper {
  padding: 15px;
}

.member-card {
  border-radius: 35px;
  overflow: hidden;
  position: relative;
  transition: all 0.3s ease;
  cursor: pointer;
}

.member-img {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.member-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.5s ease;
}

.member-card:hover .member-img img {
  transform: scale(1.1);
}

.badge-status {
  position: absolute;
  top: 20px;
  left: 20px;
  background: #fff;
  color: #111;
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  z-index: 5;
}

.badge-status.featured {
  background: #fff4d7;
  color: #ffb800;
}

.badge-status.active {
  background: #e8f9ff;
  color: #2c8edc;
}

.badge-status.verified {
  background: #eef9ee;
  color: #16a34a;
}

.btn-like {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #ccc;
  transition: all 0.3s ease;
  z-index: 5;
}

.btn-like:hover {
  color: #ff6b6b;
}

.member-info-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 40px 25px 25px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
  color: #fff;
  z-index: 5;
}

.member-info-overlay h4 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 5px;
}

.member-info-overlay p {
  font-size: 14px;
  opacity: 0.8;
  margin: 0;
}

/* Slick Customization */
.members-slider .slick-list {
  margin: 0 -15px;
}

/* Stories Section */
.forever-bg-text {
  position: absolute;
  right: -50px;
  top: 30px;
  font-family: var(--font-heading);
  font-size: 180px;
  color: #eaf8ff;
  opacity: 0.5;
  z-index: -1;
  font-style: italic;
  pointer-events: none;
}

.rating-info {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  margin-right: 20px;
  vertical-align: middle;
}

.rating-num {
  font-size: 28px;
  font-weight: 800;
  color: #111;
}

.rating-num iconify-icon {
  color: #a855f7;
}

.rating-text {
  font-size: 10px;
  font-weight: 700;
  color: #999;
  letter-spacing: 1px;
}

.main-story-card {
  background: #eef9ff;
  border-radius: 30px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.story-img {
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 20px;
  flex-grow: 1;
  height: 320px;
}

.story-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 320px;
}

.story-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.story-info h3 {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 5px;
}

.story-info span {
  font-size: 13px;
  color: #999;
  letter-spacing: 1px;
  display: block;
  margin-bottom: 10px;
}

.story-info p {
  font-style: italic;
  color: #666;
  font-size: 16px;
}

.btn-story-arrow {
  width: 50px;
  height: 50px;
  background: #111;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: all 0.3s ease;
}

.btn-story-arrow:hover {
  background: var(--primary-color);
  color: #fff;
  transform: rotate(45deg);
}

.side-story-card {
  display: flex;
  gap: 15px;
  background: #eef9ff;
  padding: 16px;
  border-radius: 24px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.side-story-card:hover {
  transform: translateX(10px);
}

.side-img-box {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 16px;
  overflow: hidden;
  flex-shrink: 0;
}

.side-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.date-badge {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 5px;
  border-radius: 28px;
  text-align: center;
  letter-spacing: 1px;
}

.side-content h4 {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 5px;
}

.side-loc {
  font-size: 12px;
  color: #999;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 10px;
}

.side-content p {
  font-size: 14px;
  color: #666;
  font-style: italic;
  margin-bottom: 10px;
  line-height: 1.4;
}

.stars {
  color: #ffb800;
  font-size: 14px;
}

/* Community Section */
.community-box {
  background: #eef9ff;
  border-radius: 30px;
  padding: 50px 40px;
}

.community-desc {
  color: #666;
  font-size: 15px;
  line-height: 1.6;
  max-width: 400px;
}

.stat-card {
  background: #fff;
  border-radius: 20px;
  padding: 18px 24px;
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
}

.stat-num {
  display: block;
  font-family: var(--font-heading);
  font-size: 36px;
  color: var(--primary-color);
  line-height: 1;
  margin-bottom: 10px;
}

.stat-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: #999;
  letter-spacing: 1.5px;
}

/* About Section */
.about-desc {
  color: #666;
  font-size: 15px;
  line-height: 1.8;
  max-width: 500px;
}

.about-feature-box {
  display: flex;
  align-items: center;
  gap: 15px;
  background: #eef9ff;
  padding: 18px 24px;
  border-radius: 20px;
}

.feat-icon-circle {
  width: 46px;
  height: 46px;
  background: #5067e4;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.feat-icon-circle.accent {
  background: #7342eb;
}

.feat-text h5 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 5px;
  color: #111;
  font-family: var(--font-heading);
}

.feat-text p {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.features-provided-box {
  background: #eef9ff;
  border-radius: 30px;
  padding: 40px;
  height: 100%;
  align-content: center;
}

.feat-tag {
  font-size: 11px;
  font-weight: 800;
  color: #5067e4;
  letter-spacing: 2px;
  display: block;
  margin-bottom: 16px;
}

.feat-title {
  font-family: var(--font-heading);
  font-size: 34px;
  color: #211e1e;
  line-height: 1.2;
  margin-bottom: 24px;
}

.feature-pill {
  background: #fff;
  padding: 12px 18px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  color: #111;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

.feature-pill iconify-icon {
  color: #5067e4;
  font-size: 18px;
}

/* App Section */

.app-section {
  padding-top: 0px !important;
}

.app-box {
  background: #eef9ff;
  border-radius: 35px;
  padding: 50px 40px;
  overflow: hidden;
}

.benefit-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: #444;
}

.benefit-item iconify-icon {
  color: #111;
  font-size: 18px;
}

.btn-app {
  background: #000;
  color: #fff;
  padding: 12px 20px;
  border-radius: 35px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-app:hover {
  transform: translateY(-3px);
  background: #222;
  color: #fff;
}

.app-icon {
  font-size: 32px;
}

.btn-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.btn-text .small-text {
  font-size: 11px;
  opacity: 0.8;
  margin-bottom: 3px;
}

.btn-text .large-text {
  font-size: 16px;
  font-weight: 700;
}

.user-stack {
  display: flex;
  align-items: center;
}

.user-stack img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid #eef9ff;
  margin-right: -15px;
  object-fit: cover;
}

.trust-info {
  display: flex;
  flex-direction: column;
}

.trust-info strong {
  font-size: 20px;
  font-weight: 800;
  color: #111;
  line-height: 1;
  margin-bottom: 4px;
}

.trust-info span {
  font-size: 12px;
  color: #999;
}

.app-mockup-wrapper {
  position: relative;
  z-index: 1;
}

.app-mockup-wrapper img {
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.1));
}

/* Explore Section */

.explore-section {
  background-color: #eef9ff;
}

.explore-card {
  background: #fff;
  border-radius: 24px;
  padding: 28px 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.explore-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
}

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

.explore-header h3 {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: #111;
  margin: 0;
}

.explore-num {
  font-family: var(--font-heading);
  font-size: 26px;
  color: #f0f4f8;
  line-height: 1;
}

.explore-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tag-pill {
  background: #f1f7fc;
  color: #4b627d;
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.3s ease;
  cursor: pointer;
}

.tag-pill:hover {
  background: var(--primary-color);
  color: #fff;
}

.view-all-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--primary-color);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.view-all-link:hover {
  gap: 12px;
  color: #5067e4;
}

.view-all-link iconify-icon {
  font-size: 18px;
}

/* CTA Section */
.cta-box {
  background: linear-gradient(135deg, #7342EB 0%, #2C8EDC 70%);
  border-radius: 35px;
  padding: 50px 40px;
  color: #fff;
}

.cta-tagline {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  opacity: 0.8;
}

.cta-title {
  font-family: var(--font-heading);
  font-size: 48px;
  line-height: 1.1;
}

.accent-italic.white {
  color: #fff;
  opacity: 1;
}

.cta-desc {
  font-size: 16px;
  line-height: 1.6;
  opacity: 0.85;
}

.btn-cta-white {
  background: #fff;
  color: #111;
  padding: 14px 32px;
  border-radius: 100px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
}

.btn-cta-white:hover {
  transform: scale(1.05);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  color: #000;
}

.btn-cta-outline {
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  padding: 14px 32px;
  border-radius: 100px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: all 0.3s ease;
}

.btn-cta-outline:hover {
  background: #fff;
  color: #111;
  border-color: #fff;
}

/* Footer Section */
.footer-section {
  color: #fff;
  padding-top: 50px !important;
}

.footer-logo {
  height: 45px;
  width: auto;
}

.footer-desc {
  line-height: 1.8;
  font-size: 15px;
  color: #878e93;
  max-width: 320px;
}

.social-icon {
  width: 44px;
  height: 44px;
  border: 1px solid rgb(255 255 255 / 31%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ccc;
  text-decoration: none;
  font-size: 18px;
  font-weight: 700;
  transition: all 0.3s ease;
}

.social-icon:hover {
  background: #fff;
  color: #000;
  border-color: #fff;
  transform: translateY(-5px);
}

.footer-title {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 30px;
  color: #fff;
}

.footer-links li {
  margin-bottom: 15px;
}

.footer-links a {
  color: #878e93;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.3s ease;
}

.footer-links a:hover {
  color: #fff;
}

.footer-bottom {
  margin-top: 60px;
  border-color: rgb(38 42 45) !important;
}

.footer-bottom p {
  color: #878e93 !important;
}

/* Scroll To Top */
.scroll-top-btn {
  position: fixed;
  bottom: 40px;
  right: 40px;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #7342eb 0%, #2c8edc 100%);
  color: #fff;
  border: none;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  z-index: 1000;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(115, 66, 235, 0.3);
}

.scroll-top-btn:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(115, 66, 235, 0.4);
}

/* Login Page Specific Styles */
.login-page-section {
  background: #f4fbfc;
  padding: 40px 0;
}

.login-container-wrapper {
  background: #fff;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.05);
  display: flex;
  min-height: 520px;
}

.login-left-side {
  width: 50%;
  padding: 40px;
  position: relative;
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.login-left-side::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  background: #eff9f9;
  border-radius: 50%;
  z-index: 1;
}

.login-left-content {
  position: relative;
  z-index: 2;
  flex-grow: 1;
  align-content: center;
}

.login-left-content .logo-area {
  margin-bottom: 40px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.logo-tagline {
  font-size: 9px;
  letter-spacing: 3px;
  color: #999;
  font-weight: 700;
  margin-left: 2px;
  text-transform: uppercase;
}

.login-title-area h2 {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 16px;
  color: #111;
}

.login-title-area h2 span {
  color: var(--primary-color);
  font-style: italic;
}

.btn-otp-login iconify-icon {
  font-size: 20px !important;
}

.login-subtitle {
  color: #666;
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 0px;
  max-width: 350px;
}

.login-profile-visuals {
  position: relative;
  height: 360px;
  margin-bottom: 24px;
  left: 10%;
}

.login-profile-card {
  background: #fff;
  border-radius: 20px;
  padding: 10px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
  position: absolute;
  width: 200px;
  transition: all 0.3s ease;
}

.login-profile-card.card-1 {
  left: 10px;
  top: 50px;
  transform: rotate(-10deg);
}

.login-profile-card.card-2 {
  left: 150px;
  top: 70px;
  transform: rotate(8deg);
  z-index: 2;
}

.login-profile-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 15px;
  margin-bottom: 10px;
}

.card-info {
  padding: 5px;
}

.card-info h5 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 2px;
}

.card-info p {
  font-size: 12px;
  color: #999;
  margin: 0;
}

.ai-match-badge {
  position: absolute;
  top: 40px;
  left: -20px;
  background: #fff;
  padding: 8px 15px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.ai-match-badge .star-icon {
  width: 24px;
  height: 24px;
  font-size: 16px;
}

.match-pct-box {
  display: flex;
  flex-direction: column;
}

.match-pct-box .pct {
  font-size: 18px;
  font-weight: 800;
  color: #ff6b6b;
  line-height: 1;
}

.match-pct-box .label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  color: #999;
}

.trusted-users {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: auto;
  position: relative;
  z-index: 2;
}

.user-avatars {
  display: flex;
}

.user-avatars img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-left: -10px;
  object-fit: cover;
}

.user-avatars img:first-child {
  margin-left: 0;
}

.trusted-text {
  font-size: 13px;
  font-weight: 700;
  color: #111;
}

/* Right Side */
.login-right-side {
  width: 50%;
  padding: 40px 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid #f0f0f0;
}

.login-form-header {
  margin-bottom: 28px;
}

.login-form-header h3 {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 6px;
}

.login-form-header p {
  color: #666;
  font-size: 15px;
}

.gender-selector {
  display: flex;
  gap: 15px;
}

.gender-btn {
  flex: 1;
  padding: 13px 20px;
  border-radius: 52px;
  border: 1px solid #e8e8e8;
  background: #f9f9f9;
  font-weight: 600;
  font-size: 14px;
  color: #444;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.3s ease;
  position: relative;
  height: 51px;
}

.gender-btn iconify-icon {
  font-size: 20px;
  opacity: 0;
  transition: all 0.3s ease;
  transform: scale(0.5);
}

.gender-btn.active {
  border-color: transparent;
  background: var(--primary-gradient);
  color: #fff;
  box-shadow: 0 4px 15px rgba(115, 66, 235, 0.2);
}

.gender-btn.active iconify-icon {
  opacity: 1;
  transform: scale(1);
}

.btn-otp-login {
  width: 100%;
  padding: 13px;
  border-radius: 12px;
  background: #f0fbfc;
  color: var(--primary-color);
  border: 1px solid #e0e9f3;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 25px;
  transition: all 0.3s ease;
  text-decoration: none;
  font-size: 14px;
}

.btn-otp-login:hover {
  background: #e0edf3;
  color: var(--primary-color);
}

.btn-password-login {
  width: 100%;
  padding: 13px;
  border-radius: 12px;
  background: #f0fbfc;
  color: var(--primary-color);
  border: 1px solid #e0e9f3;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 25px;
  transition: all 0.3s ease;
  text-decoration: none;
  font-size: 14px;
}

.btn-password-login:hover {
  background: #e0edf3;
  color: var(--primary-color);
}

.btn-password-login iconify-icon {
  font-size: 20px !important;
}

.otp-inputs-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 25px;
}

.otp-digit {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  border: 1.5px solid #e8e8e8;
  background: #f9f9f9;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  color: var(--text-dark);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.otp-digit:focus {
  background: #fff;
  border-color: var(--primary-color);
  box-shadow: 0 8px 20px rgba(115, 66, 235, 0.15);
  outline: none;
}

.otp-digit:disabled {
  background: #f1f5f9;
  color: #cbd5e1;
  cursor: not-allowed;
  border-color: #e2e8f0;
}

.sent-number-info {
  background: #eff9f9;
  border-radius: 12px;
  padding: 12px 16px;
  border: 1px solid #e0edf3;
  font-size: 14px;
  color: #666;
}

.sent-number-info .edit-number-link {
  color: var(--primary-color);
  font-weight: 700;
  margin-left: 8px;
  text-decoration: none;
  transition: color 0.3s ease;
}

.sent-number-info .edit-number-link:hover {
  color: #2c8edc;
  text-decoration: underline;
}

.otp-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.timer-countdown {
  color: #666;
  font-weight: 500;
}

.timer-count {
  color: var(--primary-color);
  font-weight: 700;
}

.resend-otp-link {
  color: #2c8edc;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.3s ease;
}

.resend-otp-link:hover {
  color: var(--primary-color);
  text-decoration: underline;
}

.login-divider {
  text-align: center;
  position: relative;
  margin-bottom: 25px;
}

.login-divider::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background: #eee;
  z-index: 1;
}

.login-divider span {
  background: #fff;
  padding: 0 15px;
  position: relative;
  z-index: 2;
  font-size: 11px;
  font-weight: 700;
  color: #bbb;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-size: 11px;
  font-weight: 700 !important;
  color: #999 !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
  letter-spacing: 0.5px !important;
}

.input-with-icon {
  position: relative;
}

.input-with-icon .input-icon-left {
  position: absolute;
  left: 15px;
  top: 25.5px;
  transform: translateY(-50%);
  color: #999999;
  font-size: 20px;
  pointer-events: none;
}

.btn-toggle-password {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0;
  color: #ccc;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 5;
}

.btn-toggle-password:hover {
  color: var(--primary-color);
}

.btn-toggle-password iconify-icon {
  font-size: 20px;
}

.input-with-icon .form-control {
  padding: 14px 15px 14px 45px;
  border-radius: 12px;
  border: 1px solid #e8e8e8;
  background: #f9f9f9;
  font-size: 14px;
  height: auto;
}

.input-with-icon .form-control:focus {
  background: #fff;
  border-color: var(--primary-color);
  box-shadow: none;
}

.login-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.remember-me {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  font-size: 14px;
  color: #666;
  position: relative;
}

.remember-me input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.custom-checkbox {
  height: 22px;
  width: 22px;
  background-color: #f3f6f9;
  border-radius: 7px;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1.5px solid #e2e8f0;
  display: inline-block;
}

.remember-me:hover input~.custom-checkbox {
  border-color: var(--primary-color);
  background-color: #fff;
}

.remember-me input:checked~.custom-checkbox {
  background: var(--primary-gradient);
}

.custom-checkbox:after {
  content: "";
  position: absolute;
  display: none;
  left: 8px;
  top: 4px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.remember-me input:checked~.custom-checkbox:after {
  display: block;
}

.forgot-link {
  font-size: 14px;
  font-weight: 600;
  color: #2c8edc;
  text-decoration: none;
}

/* =========================================
   Login Page Toast Notification
   ========================================= */
.login-toast-notification {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border: 1px solid #a7f3d0;
  border-left: 4px solid #10b981;
  border-radius: 12px;
  padding: 14px 42px 14px 14px;
  margin-bottom: 20px;
  position: relative;
  animation: loginToastSlideIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.12), 0 1px 4px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.login-toast-notification::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, #10b981, #34d399);
  border-radius: 0 0 12px 12px;
  animation: loginToastProgress 5s linear forwards;
}

.login-toast-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10b981, #059669);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.3);
  animation: loginToastIconPulse 2s ease-in-out infinite;
}

.login-toast-content {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.login-toast-title {
  font-size: 14px;
  font-weight: 700;
  color: #065f46;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.login-toast-msg {
  font-size: 12.5px;
  font-weight: 500;
  color: #047857;
  line-height: 1.4;
  opacity: 0.85;
}

.login-toast-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  cursor: pointer;
  color: #6ee7b7;
  font-size: 14px;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  line-height: 1;
}

.login-toast-close:hover {
  background: rgba(16, 185, 129, 0.15);
  color: #059669;
}

/* Toast Variants */
.login-toast-notification.toast-error {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border-color: #fca5a5;
  border-left-color: #ef4444;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.12), 0 1px 4px rgba(0, 0, 0, 0.04);
}

.login-toast-notification.toast-error::after {
  background: linear-gradient(90deg, #ef4444, #f87171);
}

.login-toast-notification.toast-error .login-toast-icon {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  box-shadow: 0 3px 10px rgba(239, 68, 68, 0.3);
}

.login-toast-notification.toast-error .login-toast-title {
  color: #991b1b;
}

.login-toast-notification.toast-error .login-toast-msg {
  color: #b91c1c;
}

.login-toast-notification.toast-error .login-toast-close {
  color: #fca5a5;
}

.login-toast-notification.toast-error .login-toast-close:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #dc2626;
}

.login-toast-notification.toast-warning {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border-color: #fcd34d;
  border-left-color: #f59e0b;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.12), 0 1px 4px rgba(0, 0, 0, 0.04);
}

.login-toast-notification.toast-warning::after {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.login-toast-notification.toast-warning .login-toast-icon {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 3px 10px rgba(245, 158, 11, 0.3);
}

.login-toast-notification.toast-warning .login-toast-title {
  color: #92400e;
}

.login-toast-notification.toast-warning .login-toast-msg {
  color: #b45309;
}

.login-toast-notification.toast-warning .login-toast-close {
  color: #fcd34d;
}

.login-toast-notification.toast-warning .login-toast-close:hover {
  background: rgba(245, 158, 11, 0.15);
  color: #d97706;
}

.login-toast-notification.toast-info {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border-color: #93c5fd;
  border-left-color: #3b82f6;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.12), 0 1px 4px rgba(0, 0, 0, 0.04);
}

.login-toast-notification.toast-info::after {
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

.login-toast-notification.toast-info .login-toast-icon {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  box-shadow: 0 3px 10px rgba(59, 130, 246, 0.3);
}

.login-toast-notification.toast-info .login-toast-title {
  color: #1e3a8a;
}

.login-toast-notification.toast-info .login-toast-msg {
  color: #1d4ed8;
}

.login-toast-notification.toast-info .login-toast-close {
  color: #93c5fd;
}

.login-toast-notification.toast-info .login-toast-close:hover {
  background: rgba(59, 130, 246, 0.15);
  color: #2563eb;
}

/* Animations */
@keyframes loginToastSlideIn {
  0% {
    opacity: 0;
    transform: translateY(-12px) scale(0.97);
  }

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

@keyframes loginToastIconPulse {

  0%,
  100% {
    box-shadow: 0 3px 10px rgba(16, 185, 129, 0.3);
  }

  50% {
    box-shadow: 0 3px 18px rgba(16, 185, 129, 0.55);
  }
}

@keyframes loginToastProgress {
  from {
    width: 100%;
  }

  to {
    width: 100%;
  }
}



/* Select2 Form Input Styling */
.login-right-side .select2-container--default .select2-selection--single,
.onboarding-form-card .select2-container--default .select2-selection--single,
.accordion-edit-form .select2-container--default .select2-selection--single,
.form-select-input+.select2-container--default .select2-selection--single {
  height: 51px !important;
  background-color: #f9f9f9 !important;
  border: 1px solid #e8e8e8 !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  transition: all 0.3s ease;
  padding: 0 15px !important;
  position: relative !important;
  /* Ensure absolute positioning works for clear button */
}

.onboarding-form-card .select2-container--default .select2-selection--single .select2-selection__clear,
.accordion-edit-form .select2-container--default .select2-selection--single .select2-selection__clear,
.form-select-input+.select2-container--default .select2-selection--single .select2-selection__clear {
  position: absolute !important;
  right: 38px !important;
  top: -3px !important;
  bottom: 0 !important;
  height: 50px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  float: none !important;
  font-size: 18px !important;
  color: #969696 !important;
  font-weight: bold !important;
  z-index: 10 !important;
  line-height: 1 !important;
}

.onboarding-form-card .select2-container--default .select2-selection--single .select2-selection__clear:hover,
.accordion-edit-form .select2-container--default .select2-selection--single .select2-selection__clear:hover,
.form-select-input+.select2-container--default .select2-selection--single .select2-selection__clear:hover {
  color: var(--primary-color) !important;
}

.login-right-side .select2-container--default .select2-selection--single .select2-selection__rendered,
.onboarding-form-card .select2-container--default .select2-selection--single .select2-selection__rendered,
.accordion-edit-form .select2-container--default .select2-selection--single .select2-selection__rendered,
.form-select-input+.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0 !important;
  font-size: 14px !important;
  color: #111 !important;
  font-weight: 500 !important;
  line-height: 47px !important;
}

.login-right-side .select2-container--default .select2-selection--single .select2-selection__arrow,
.onboarding-form-card .select2-container--default .select2-selection--single .select2-selection__arrow,
.accordion-edit-form .select2-container--default .select2-selection--single .select2-selection__arrow,
.form-select-input+.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 50px !important;
  right: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.login-right-side .select2-container--default.select2-container--open .select2-selection--single,
.onboarding-form-card .select2-container--default.select2-container--open .select2-selection--single,
.accordion-edit-form .select2-container--default.select2-container--open .select2-selection--single,
.form-select-input+.select2-container--default.select2-container--open .select2-selection--single {
  background-color: #fff !important;
  border-color: var(--primary-color) !important;
}

.login-right-side .select2-container--default .select2-selection--single .select2-selection__arrow b,
.onboarding-form-card .select2-container--default .select2-selection--single .select2-selection__arrow b,
.accordion-edit-form .select2-container--default .select2-selection--single .select2-selection__arrow b,
.form-select-input+.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: #999 transparent transparent transparent !important;
  border-width: 6px 4px 0 4px !important;
  margin-top: 0 !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
}

.login-right-side .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b,
.onboarding-form-card .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b,
.accordion-edit-form .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b,
.form-select-input+.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent #999 transparent !important;
  border-width: 0 4px 6px 4px !important;
}

.btn-login-submit {
  width: 100%;
  padding: 16px;
  border-radius: 50px;
  background: var(--primary-gradient);
  color: #fff;
  border: none;
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 10px 25px rgba(115, 66, 235, 0.2);
  transition: all 0.3s ease;
  margin-bottom: 30px;
}

.btn-login-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 30px rgba(115, 66, 235, 0.3);
}

.register-prompt {
  text-align: center;
  font-size: 15px;
  color: #666;
}

.register-prompt a {
  color: var(--primary-color);
  font-weight: 700;
  text-decoration: none;
}

/* =======================================
   Search Result Page Styling
   ======================================= */

/* Top Black Banner & Navbar */
.search-page-header {
  background-color: #000;
  color: #fff;
  padding: 0 0 50px 0;
  position: relative;
}

.navbar-dark-theme {
  background-color: #000 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.navbar-dark-theme .nav-link {
  color: rgba(255, 255, 255, 0.7) !important;
}

.navbar-dark-theme .nav-link:hover,
.navbar-dark-theme .nav-link.active {
  color: #fff !important;
}

.navbar-dark-theme .btn-signin {
  color: #fff !important;
}

.navbar-dark-theme .btn-join {
  background: var(--primary-gradient);
  color: #fff !important;
}

/* Banner Content */
.search-banner-title {
  font-family: var(--font-heading);
  font-size: 42px;
  font-weight: 500;
  line-height: 1.15;
  margin-bottom: 12px;
  color: #fff;
}

.search-banner-title .profiles-accent {
  font-style: italic;
  font-weight: 400;
  color: var(--secondary-color);
}

.search-banner-subtitle {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 400;
  margin: 0;
}

.header-stats-container {
  display: flex;
  justify-content: flex-end;
  gap: 30px;
}

.header-stat-box {
  text-align: left;
}

.header-stat-box .stat-num {
  font-size: 28px;
  font-weight: 700;
  font-family: var(--font-heading);
  color: #fff;
  line-height: 1.1;
  display: block;
}

.header-stat-box .stat-label {
  font-size: 11px;
  font-weight: 700;
  color: #878e93;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 6px;
  display: block;
}

/* Search Bar Container */
.search-bar-floating-container {
  max-width: 1140px;
  margin: -33px auto -14px auto;
  position: relative;
  z-index: 20;
  padding: 0 15px;
}

.search-bar-inner {
  background: #fff;
  border-radius: 100px;
  padding: 8px 10px 8px 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  gap: 15px;
  border: 1px solid #edf2f7;
}

/* Select2 Custom Wrapper for Search Bar */
.select-box-wrap {
  display: flex;
  align-items: center;
  background: #f0f6ff;
  border: 1px solid #e2edf8;
  border-radius: 50px;
  padding: 4px 20px 4px 18px;
  height: 48px;
  transition: all 0.2s ease;
  min-width: 220px;
  cursor: pointer;
}

.select-box-wrap:hover {
  background: #e4f0fe;
  border-color: #cbd5e1;
}

.select-box-wrap iconify-icon {
  font-size: 22px;
  color: var(--secondary-color);
  margin-right: 12px;
  flex-shrink: 0;
}

.select-box-wrap .select2-container {
  width: 100% !important;
}

.select-box-wrap .select2-container--default .select2-selection--single {
  background: transparent !important;
  border: none !important;
  height: auto !important;
  padding: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

.select-box-wrap .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #111 !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  line-height: 24px !important;
  padding-left: 0 !important;
  padding-right: 20px !important;
}

.select-box-wrap .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 24px !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.select-box-wrap .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: #64748b transparent transparent transparent !important;
  border-width: 5px 4px 0 4px !important;
}

/* Sort Select2 Wrapper */
.sort-box-wrap {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 50px;
  padding: 4px 20px 4px 18px;
  height: 44px;
  transition: all 0.2s ease;
  min-width: 210px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  cursor: pointer;
}

.sort-box-wrap:hover {
  border-color: #94a3b8;
  background: #f8fafc;
}

.sort-box-wrap iconify-icon {
  font-size: 20px;
  color: #64748b;
  margin-right: 10px;
}

.sort-box-wrap .select2-container {
  width: 100% !important;
}

.sort-box-wrap .select2-container--default .select2-selection--single {
  background: transparent !important;
  border: none !important;
  height: auto !important;
  padding: 0 !important;
}

.sort-box-wrap .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #1e293b !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  line-height: 24px !important;
  padding-left: 0 !important;
  padding-right: 20px !important;
}

.sort-box-wrap .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 24px !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.sort-box-wrap .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: #64748b transparent transparent transparent !important;
  border-width: 5px 4px 0 4px !important;
}

/* Custom Select2 Dropdown Overrides */
.select2-dropdown-custom,
.select2-dropdown {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.1) !important;
  padding: 8px !important;
  z-index: 99999 !important;
  overflow: hidden !important;
}

.select2-dropdown-custom .select2-results__option,
.select2-dropdown .select2-results__option {
  padding: 10px 16px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
  margin-bottom: 2px !important;
  border-bottom: none !important;
}

.select2-dropdown-custom .select2-results__option--highlighted[aria-selected],
.select2-dropdown-custom .select2-results__option:hover,
.select2-dropdown .select2-results__option--highlighted[aria-selected],
.select2-dropdown .select2-results__option:hover {
  /* background: #f0f6ff !important; */
  color: var(--secondary-color) !important;
}

.search-input-box {
  flex-grow: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 15px;
}

.search-input-box iconify-icon {
  font-size: 22px;
  color: #999;
}

.search-input-box input {
  border: none;
  background: transparent;
  width: 100%;
  font-size: 15px;
  color: #111;
  outline: none;
}

.search-input-box input::placeholder {
  color: #a0aec0;
}

.btn-main-search {
  background: var(--primary-gradient);
  color: #fff;
  border: none;
  padding: 14px 42px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 20px rgba(44, 142, 220, 0.3);
  transition: all 0.2s ease;
  cursor: pointer;
}

.btn-main-search:hover {
  background: #247ec6;
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(44, 142, 220, 0.4);
}

/* Main Content Area */
.search-results-page-wrapper {
  background-color: #f8fafc;
  padding-bottom: 100px;
  min-height: 800px;
}

/* Filters Sidebar */
.search-filters-card {
  background: #fff;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
  border: 1px solid #edf2f7;
}

.filters-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 14px;
}

.filters-title {
  font-size: 18px;
  font-weight: 800;
  color: #111;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.filters-title iconify-icon {
  color: var(--secondary-color);
  font-size: 22px;
}

.btn-reset-filters {
  background: #f0f6ff;
  color: var(--secondary-color);
  border: none;
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-reset-filters:hover {
  background: var(--secondary-color);
  color: #fff;
}

.filter-group {
  margin-bottom: 25px;
}

.filter-label {
  font-size: 11px;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 16px;
  display: block;
}

/* Working Dual Range Slider Logic & Styling */
.dual-range-container {
  position: relative;
  width: 100%;
  padding: 35px 10px 15px 10px;
  margin-top: 40px;
}

.slider-track {
  position: relative;
  width: 100%;
  height: 6px;
  background: #e2e8f0;
  border-radius: 10px;
}

.slider-track-fill {
  position: absolute;
  height: 100%;
  background: var(--secondary-color);
  border-radius: 10px;
  top: 0;
  z-index: 1;
}

.slider-range-input {
  position: absolute;
  top: 32px;
  left: 0;
  width: 100%;
  height: 6px;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
  z-index: 3;
}

.slider-range-input::-webkit-slider-thumb {
  pointer-events: auto;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #111;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  cursor: grab;
}

.slider-range-input::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.1);
}

.slider-range-input::-moz-range-thumb {
  pointer-events: auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #111;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  cursor: grab;
}

.slider-tooltip-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  pointer-events: none;
  z-index: 2;
}

.slider-tooltip-box {
  position: absolute;
  top: -28px;
  transform: translateX(-50%);
  background: #111;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 8px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.slider-tooltip-box::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 4px 4px 0;
  border-style: solid;
  border-color: #111 transparent;
  display: block;
  width: 0;
}

.slider-inputs-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.slider-input-pill {
  background: #f0f6ff;
  border: 1px solid #e2edf8;
  color: #1e293b;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 50px;
  text-align: center;
  flex: 1;
  outline: none;
  width: 100%;
}

/* Checkbox Styling */
.filter-checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.custom-checkbox-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  user-select: none;
  position: relative;
}

.custom-checkbox-label input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkbox-box {
  width: 22px;
  height: 22px;
  border: 2px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.custom-checkbox-label:hover .checkbox-box {
  border-color: var(--secondary-color);
}

.custom-checkbox-label input:checked~.checkbox-box {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: #fff;
  box-shadow: 0 2px 8px rgba(44, 142, 220, 0.3);
}

.checkbox-box iconify-icon {
  font-size: 14px;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.2s ease;
  color: #fff;
}

.custom-checkbox-label input:checked~.checkbox-box iconify-icon {
  opacity: 1;
  transform: scale(1);
}

/* Accordion Box */
.filter-accordion-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.filter-accordion-item {
  background: #f8fafc;
  border: 1px solid #edf2f7;
  border-radius: 16px;
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-accordion-item:hover {
  background: #f0f6ff;
  border-color: #cbd5e1;
}

.filter-accordion-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #eef5ff;
  color: var(--secondary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all 0.2s ease;
}

.filter-accordion-item:hover .filter-accordion-icon {
  background: var(--secondary-color);
  color: #fff;
}

/* Results Top Bar */
.results-header-bar {
  margin-bottom: 20px;
}

.results-count-title span {
  font-size: 24px;
  font-weight: 800;
  color: #111;
  margin: 0;
}

.results-count-title {
  font-weight: 500;
  color: #64748b;
  font-size: 16px;
}

.sort-dropdown-btn {
  background: #fff;
  border: 1px solid #cbd5e1;
  padding: 10px 22px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  transition: all 0.2s ease;
}

.sort-dropdown-btn:hover {
  border-color: #94a3b8;
  background: #f8fafc;
}

.sort-dropdown-btn iconify-icon {
  font-size: 18px;
  color: #64748b;
}

/* Active Filters Row */
.active-filters-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}

.active-filters-label {
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
}

.active-filter-pill {
  background: #f0f6ff;
  border: 1px solid #d8e8ff;
  color: var(--secondary-color);
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.active-filter-pill:hover {
  background: #e1effe;
  border-color: #bfdbfe;
}

.active-filter-pill iconify-icon {
  cursor: pointer;
  font-size: 16px;
  color: #94a3b8;
  transition: color 0.2s;
}

.active-filter-pill iconify-icon:hover {
  color: #ef4444;
}

/* Profile Card */
.result-profile-card {
  background: #fff;
  border-radius: 24px;
  padding: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
  border: 1px solid #edf2f7;
  display: flex;
  gap: 20px;
  margin-bottom: 18px;
  transition: all 0.3s ease;
}

.result-profile-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06);
  border-color: #e2e8f0;
}

.profile-card-left {
  width: 200px;
  flex-shrink: 0;
  position: relative;
}

.profile-card-img {
  width: 100%;
  height: 240px;
  border-radius: 24px;
  object-fit: cover;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.online-badge-overlay {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  padding: 5px 12px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 800;
  color: #111;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.online-badge-overlay .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #16a34a;
}

.online-badge-overlay.offline .dot {
  background: #94a3b8;
}

.new-tag-overlay {
  position: absolute;
  top: 14px;
  right: 14px;
  background: #ff4b58;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 8px;
  letter-spacing: 1px;
  box-shadow: 0 4px 12px rgba(255, 75, 88, 0.3);
}

.btn-view-profile-overlay {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  color: #111;
  border: none;
  padding: 8px 22px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
  cursor: pointer;
}

.btn-view-profile-overlay:hover {
  background: var(--primary-color);
  color: #fff;
  transform: translateX(-50%) translateY(-2px);
}

.profile-card-right {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.profile-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}

.profile-info-heading h3 {
  font-size: 20px;
  font-weight: 700;
  color: #111;
  margin-bottom: 4px;
  font-family: var(--font-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-loc {
  font-size: 13.5px;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

.profile-loc iconify-icon {
  color: #ff4b58;
  font-size: 18px;
}

.action-buttons-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-circle-action {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.btn-circle-action:hover {
  transform: translateY(-2px);
}

.btn-circle-action.green {
  background: #16a34a;
}

.btn-circle-action.green:hover {
  box-shadow: 0 6px 20px rgba(22, 163, 74, 0.3);
}

.btn-circle-action.red {
  background: #ff4b58;
}

.btn-circle-action.red:hover {
  box-shadow: 0 6px 20px rgba(255, 75, 88, 0.3);
}

.btn-circle-action.blue {
  background: var(--secondary-color);
}

.btn-circle-action.blue:hover {
  box-shadow: 0 6px 20px rgba(44, 142, 220, 0.3);
}

.btn-pill-action {
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  height: 37.5px;
}

.btn-pill-action:hover {
  transform: translateY(-2px);
}

.btn-pill-action.shortlist-outline {
  background: #fff;
  color: #ffb800;
  border: 1.5px solid #ffb800;
}

.btn-pill-action.shortlist-outline:hover {
  background: #fffcf0;
  box-shadow: 0 6px 20px rgba(255, 184, 0, 0.2);
}

.btn-pill-action.shortlist-filled {
  background: #ffb800;
  color: #fff;
  border: 1.5px solid #ffb800;
  box-shadow: 0 6px 20px rgba(255, 184, 0, 0.3);
}

.btn-pill-action.interested {
  background: var(--primary-gradient);
  color: #fff;
  box-shadow: 0 6px 20px rgba(85, 98, 229, 0.3);
}

.btn-pill-action.interested iconify-icon {
  font-size: 16px;
}

/* Table / Grid of Details */
.profile-details-table {
  background: #f8fafc;
  border: 1px solid #edf2f7;
  border-radius: 20px;
  padding: 18px 22px;
  margin-bottom: 20px;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.profile-details-table::-webkit-scrollbar {
  display: none;
}

.details-grid-row {
  display: grid;
  grid-template-columns: 1.15fr 1.45fr 1.25fr;
  min-width: 520px;
  gap: 15px;
}

.details-grid-row:not(:last-child) {
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid #e2e8f0;
}

.grid-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  border-right: 1px solid #e2e8f0;
  padding-right: 10px;
  min-width: 0;
  justify-content: space-between;
  overflow: hidden;
}

.grid-cell:last-child {
  border-right: none;
  padding-right: 0;
}

.grid-cell .lbl {
  font-size: 12.5px;
  color: #64748b;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  background: #f8fafc;
  padding-right: 4px;
}

@keyframes autoScrollMarquee {

  0%,
  15% {
    transform: translateX(0);
  }

  50%,
  65% {
    transform: translateX(-35px);
  }

  100% {
    transform: translateX(0);
  }
}

.grid-cell .val {
  font-size: 13px;
  color: #0f172a;
  font-weight: 700;
  white-space: nowrap;
  -ms-overflow-style: none;

}

.grid-cell .val::-webkit-scrollbar {
  display: none;
}

.grid-cell:hover .val {
  animation: autoScrollMarquee 3.5s ease-in-out infinite;
}

/* Bottom Tags & Prohibit Button */
.profile-card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.profile-tags-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.profile-tag-pill {
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}

.profile-tag-pill.blue {
  background: #f0f6ff;
  color: var(--secondary-color);
}

.profile-tag-pill.green {
  background: #ecfdf5;
  color: #10b981;
}

.profile-tag-pill.orange {
  background: #fff7ed;
  color: #f97316;
}

.profile-tag-pill.grey {
  background: #f1f5f9;
  color: #475569;
}

.profile-tag-pill.match-score {
  background: #fff1f2;
  color: #f43f5e;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #ffe4e6;
}

.profile-tag-pill.match-score iconify-icon {
  font-size: 16px;
}

.btn-prohibit {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-prohibit:hover {
  background: #f1f5f9;
  color: #ef4444;
  border-color: #ef4444;
}

/* Pagination */
.search-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 50px;
}

.btn-page-nav {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #111;
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.btn-page-nav:hover {
  background: var(--primary-color);
  transform: translateY(-2px);
}

.btn-page-num {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #cbd5e1;
  color: #334155;
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-page-num:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.btn-page-num.active {
  background: var(--primary-gradient);
  color: #fff;
  border-color: var(--primary-gradient);
  box-shadow: 0 4px 15px rgba(44, 142, 220, 0.3);
}

.page-dots {
  font-size: 18px;
  font-weight: 700;
  color: #94a3b8;
  padding: 0 4px;
}



/* ==========================================================================
   Premium Navbar & Dropdown Styling (IdealJodi custom style)
   ========================================================================== */

/* Custom carets for Bootstrap dropdown toggles */
.navbar .dropdown-toggle {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}

.navbar .dropdown-toggle::after {
  display: inline-block;
  content: "";
  border: none;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23111111' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.8' d='m6 9l6 6l6-6'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  margin-left: 0;
  margin-top: 1px;
}

.navbar .dropdown-toggle.show::after {
  transform: rotate(180deg);
}

/* Glassmorphism dropdown menu for desktop */


/* Dropdown items */
.navbar .dropdown-item {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
  padding: 10px 14px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.25s ease;
  background: transparent;
}

.navbar .dropdown-item iconify-icon {
  font-size: 16px;
  color: var(--primary-color);
  background: rgba(115, 66, 235, 0.06);
  padding: 8px;
  border-radius: 8px;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item.active {
  background: var(--primary-gradient);
  color: var(--white) !important;
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(115, 66, 235, 0.15);
}

.navbar .dropdown-item:hover iconify-icon,
.navbar .dropdown-item.active iconify-icon {
  color: var(--white);
  background: rgba(255, 255, 255, 0.25);
}

/* Right-side action buttons */
.btn-icon {
  background: #f8faff;
  border: 1px solid rgba(115, 66, 235, 0.08);
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  color: var(--text-dark);
}

.btn-icon:hover {
  background: #eef1ff;
  border-color: rgba(115, 66, 235, 0.18);
  color: var(--primary-color);
  transform: translateY(-1px);
}

.btn-profile-toggle {
  transition: all 0.25s ease;
}

.btn-profile-toggle:hover {
  border-color: rgba(115, 66, 235, 0.2) !important;
  background: #eef1ff !important;
  transform: translateY(-1px);
}

/* Notifications drop menu sizing & layout */
.notification-menu {
  width: 340px !important;
  border-radius: 20px !important;
  overflow: hidden;
}

.notif-header {
  background: #f8faff;
}

.notif-body {
  max-height: 280px;
  overflow-y: auto;
}

.notif-item {
  white-space: normal !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

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

.notif-item:hover {
  background: rgba(115, 66, 235, 0.03) !important;
  transform: none !important;
  box-shadow: none !important;
  color: inherit !important;
}

.notif-item p {
  line-height: 1.4;
}

/* Profile user drop menu styling */
.profile-user-dropdown .dropdown-menu {
  min-width: 200px;
}

.profile-user-dropdown .dropdown-item.text-danger:hover {
  background: #ff4b58;
  color: var(--white) !important;
  box-shadow: 0 4px 12px rgba(255, 75, 88, 0.2);
}

.profile-user-dropdown .dropdown-item.text-danger iconify-icon {
  color: #ff4b58;
  background: rgba(255, 75, 88, 0.08);
}

.profile-user-dropdown .dropdown-item.text-danger:hover iconify-icon {
  color: var(--white);
  background: rgba(255, 255, 255, 0.25);
}

/* Mobile Sidebar Submenu Styles */
.mobile-sidebar .nav-link {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
}

.mobile-sidebar .collapse-caret {
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 14px;
}

.mobile-sidebar .nav-link:not(.collapsed) .collapse-caret {
  transform: rotate(180deg);
  color: var(--primary-color);
}

.sidebar-submenu {
  border-left: 2.5px solid rgba(115, 66, 235, 0.15);
  margin-left: 24px;
  padding-left: 10px;
}

.submenu-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 10px 14px;
  display: block;
  border-radius: 8px;
  transition: all 0.2s ease;
  text-decoration: none;
}

.submenu-link:hover {
  color: var(--primary-color);
  background: rgba(115, 66, 235, 0.05);
  padding-left: 18px;
}

/* Mobile footer user styles */
.btn-edit-profile-mobile {
  background: #f1f4ff;
  color: var(--primary-color);
  padding: 12px;
  border-radius: 12px;
  font-weight: 700;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  transition: all 0.2s ease;
  text-decoration: none;
}

.btn-edit-profile-mobile:hover {
  background: var(--primary-color);
  color: var(--white);
}

.btn-logout-mobile {
  background: #fff5f5;
  color: #ff4b58;
  padding: 12px;
  border-radius: 12px;
  font-weight: 700;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  transition: all 0.2s ease;
  text-decoration: none;
}

.btn-logout-mobile:hover {
  background: #ff4b58;
  color: var(--white);
}

/* Image object-fit utility */
.img-cover {
  object-fit: cover;
}

/* Custom Text Colors */
.text-primary-custom {
  color: var(--primary-color) !important;
}

.text-primary-custom:hover {
  color: var(--primary-color-hover, var(--primary-color)) !important;
}

/* Notification styles */
.notif-bell-icon {
  font-size: 24px;
  color: var(--text-dark);
}

.notif-badge {
  font-size: 10px;
  padding: 4px 6px;
}

.notif-body {
  max-height: 220px;
  overflow-y: auto;
}

.notif-body::-webkit-scrollbar {
  width: 6px;
}

.notif-body::-webkit-scrollbar-track {
  background: #f8faff;
}

.notif-body::-webkit-scrollbar-thumb {
  background: rgba(115, 66, 235, 0.25);
  border-radius: 10px;
}

.notif-body::-webkit-scrollbar-thumb:hover {
  background: rgba(115, 66, 235, 0.45);
}

/* User profile button and text */
.btn-profile-toggle {
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  background: #f8faff !important;
}

.profile-name-text {
  font-size: 14px;
}

.profile-caret-icon {
  font-size: 14px;
  color: var(--text-muted);
}

/* Footer heart icon style */
.footer-heart-icon {
  color: #7342eb;
}

/* ==========================================================================
   IdealJodi My Profile Page CSS
   ========================================================================== */

.profile-page-main {
  background-color: #f6f8fd;
}

/* Sidebar Nav Card */
.profile-sidebar-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(115, 66, 235, 0.02);
  margin-bottom: 24px !important;
}

.profile-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.profile-sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 13px;
  border-radius: 13px;
  color: #475569;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s ease;
  text-decoration: none;
}

.profile-sidebar-nav .nav-link iconify-icon {
  font-size: 21px;
  color: #64748b;
  transition: all 0.2s ease;
}

.profile-sidebar-nav .nav-link .nav-label {
  flex-grow: 1;
  margin-left: 6px;
}

.profile-sidebar-nav .nav-link .nav-badge {
  background: rgba(115, 66, 235, 0.06);
  color: #7342eb;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}

/* Hover/Active states */
.profile-sidebar-nav .nav-link:hover {
  background: rgba(115, 66, 235, 0.04);
  color: var(--primary-color);
}

.profile-sidebar-nav .nav-link:hover iconify-icon {
  color: var(--primary-color);
}

.profile-sidebar-nav .nav-link.active {
  background: rgba(115, 66, 235, 0.08);
  color: var(--primary-color);
}

.profile-sidebar-nav .nav-link.active iconify-icon {
  color: var(--primary-color);
}

.profile-sidebar-nav .nav-link.active .nav-badge {
  background: var(--primary-color);
  color: #ffffff;
}

/* Activity Section */
.activity-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 10px 30px rgba(115, 66, 235, 0.02);
  margin-bottom: 24px;
}

.activity-header {
  font-size: 12px;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
  text-transform: uppercase;
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.activity-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: 16px;
  color: #475569;
  font-weight: 600;
  font-size: 14px;
  background: #f8fafc;
  transition: all 0.2s ease;
  text-decoration: none;
}

.activity-item iconify-icon {
  font-size: 20px;
  color: #64748b;
}

.activity-item .activity-label {
  flex-grow: 1;
  margin-left: 12px;
}

.activity-item .activity-badge {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #475569;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}

.activity-item:hover {
  background: rgba(115, 66, 235, 0.04);
  color: var(--primary-color);
}

/* App download banner */
.app-download-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 10px 30px rgba(115, 66, 235, 0.02);
  margin-bottom: 24px;

}

.app-download-title {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 16px;
  line-height: 1.4;
  font-family: var(--font-heading);

}

.app-download-title span {
  font-style: italic;
  color: var(--primary-color);
}

.app-download-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.app-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0f172a;
  color: #ffffff;
  padding: 12px 16px;
  border-radius: 32px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s ease;
  font-size: 14px;
}

.app-btn:hover {
  background: #1e293b;
  color: #ffffff;
}

/* New Premium Profiles */
.premium-profiles-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 10px 30px rgba(115, 66, 235, 0.02);
}

.premium-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 20px;
}

.premium-card-header iconify-icon {
  color: #eab308;
  font-size: 20px;
}

.premium-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.premium-item {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.premium-avatar-wrap {
  position: relative;
  width: 48px;
  height: 48px;
}

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

.new-tag-badge {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  background: #ef4444;
  color: #ffffff;
  font-size: 8px;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid #ffffff;
}

.premium-info h6 {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 2px 0;
}

.premium-info span {
  font-size: 12px;
  color: #64748b;
}

/* Profile Header Card */
.profile-header-card {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e3a8a 100%);
  border-radius: 32px;
  padding: 24px;
  color: #ffffff;
  box-shadow: 0 20px 40px rgba(29, 78, 216, 0.15);
  margin-bottom: 24px;
}

.profile-header-avatar-wrap {
  position: relative;
  width: 100%;
  height: 300px;
}

.profile-header-avatar {
  width: 100%;
  height: 100%;
  border-radius: 24px;
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, 0.2);
}

.btn-camera-upload {
  position: absolute;
  bottom: -10px;
  right: -10px;
  background: #ef4444;
  color: #ffffff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #1d43b0;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
}

.btn-camera-upload:hover {
  transform: scale(1.1);
  background: #dc2626;
}

.profile-header-name {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 6px;
  font-family: var(--font-heading);
}

.profile-header-meta {
  font-size: 14px;
  color: #93c5fd;
  margin-bottom: 30px;
}

.profile-header-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
  background: rgba(255, 255, 255, 0.05);
  padding: 20px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.grid-info-item {
  display: flex;
  flex-direction: column;
}

.grid-info-label {
  font-size: 12px;
  color: #93c5fd;
  margin-bottom: 2px;
}

.grid-info-value {
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
}

.profile-header-tags-container {
  overflow: hidden;
  width: 100%;
  position: relative;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.profile-header-tags {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  width: max-content;
  animation: tagsMarqueeScroll 10s linear infinite;
}

.profile-header-tags:hover {
  animation-play-state: paused;
}

@keyframes tagsMarqueeScroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-50% - 4px));
  }
}

.profile-header-tag {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: inline-block;
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

/* Stats section */
.header-stats-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  margin-bottom: 20px;
}

.stat-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.stat-item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 15%;
  height: 70%;
  width: 1px;
  background: rgba(255, 255, 255, 0.15);
}


/* Completion Section */
.profile-completion-box {
  background: rgba(255, 255, 255, 0.06);
  padding: 20px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 20px;
}

.completion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.completion-header span {
  font-size: 13px;
  font-weight: 600;
}

.btn-completion-edit {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-completion-edit:hover {
  background: #ffffff;
  color: #1e3a8a;
}

.completion-progress-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.completion-progress-bar {
  flex-grow: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  overflow: hidden;
}

.completion-progress-fill {
  height: 100%;
  background: #10b981;
  border-radius: 10px;
}

.completion-percentage {
  font-size: 14px;
  font-weight: 700;
  color: #10b981;
}

.completion-need-more {
  font-size: 11px;
  color: #93c5fd;
  margin-top: 6px;
  display: block;
}

/* Verification indicators */
.verification-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.verify-badge {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.verify-icon-wrap {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.verify-icon-wrap.verified {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.verify-icon-wrap.not-verified {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.verify-info h6 {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
}

.verify-info span {
  font-size: 12px;
  color: #93c5fd;
  white-space: nowrap;
}

/* Tabs Section */
.profile-tabs-nav {
  background: #ffffff;
  padding: 8px;
  border-radius: 50px;
  display: inline-flex;
  gap: 8px;
  margin-bottom: 24px;
  width: 100%;
  border: 1px solid #f1f5f9;
}

.profile-tab-btn {
  flex: 1;
  border: none;
  background: transparent;
  padding: 14px 24px;
  font-weight: 700;
  font-size: 14px;
  border-radius: 50px;
  color: #64748b;
  cursor: pointer;
  transition: all 0.25s ease;
  text-align: center;
  text-decoration: none;
}

.profile-tab-btn.active {
  background: var(--primary-gradient);
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(115, 66, 235, 0.2);
}

/* Accordion cards */
.profile-accordion-card {
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid #f1f5f9;
  margin-bottom: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.01);
  overflow: hidden;
  position: relative;
}

.accordion-card-header {
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}

.accordion-card-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.accordion-card-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.accordion-card-icon-wrap.basic {
  background: #fff5f5;
  color: #ef4444;
}

.accordion-card-icon-wrap.religious {
  background: #fefbeb;
  color: #d97706;
}

.accordion-card-icon-wrap.location {
  background: #f0fdf4;
  color: #16a34a;
}

.accordion-card-icon-wrap.education {
  background: #eff6ff;
  color: #2563eb;
}

.accordion-card-title-box h5 {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 2px 0;
}

.accordion-card-title-box span {
  font-size: 13px;
  color: #64748b;
}

.accordion-card-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-accordion-edit {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(115, 66, 235, 0.08);
  color: var(--primary-color);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all 0.2s ease;
  cursor: pointer;
  position: absolute;
  right: 72px;
  top: 30px;
}

.btn-accordion-edit:hover {
  background: var(--primary-color);
  color: #ffffff;
}

.btn-accordion-toggle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #0f172a;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: transform 0.3s ease, background 0.2s ease;
  cursor: pointer;
}

.accordion-card-header.collapsed .btn-accordion-toggle {
  background: #f1f5f9;
  color: #0f172a;
  transform: rotate(0deg);
}

.accordion-card-header:not(.collapsed) .btn-accordion-toggle {
  background: #0f172a;
  color: #ffffff;
  transform: rotate(180deg);
}

.accordion-card-body {
  border-top: 1px solid #f1f5f9;
  padding: 24px;
  background: #ffffff;
}

/* Grid layout for preferences table */
.preference-table-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 20px;
  column-gap: 40px;
}

.preference-grid-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px dashed #e2e8f0;
}

.preference-grid-row:last-child {
  border-bottom: none;
}

.pref-label {
  font-size: 14px;
  color: #64748b;
}

.pref-value {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  text-align: right;
  word-break: break-word;
}

/* Image Cropper Modal Custom Styles */
.crop-img-container {
  max-height: 500px;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.crop-target-img {
  max-width: 100%;
  display: block;
}

.crop-save-btn {
  background: var(--primary-gradient);
  border: none;
  padding: 12px;
  font-size: 14px;
}

.mdl-close {
  padding: 12px;
  font-size: 14px;
}

.btn-close {

  padding: 12px 12px !important;
  background: #d4dadf var(--bs-btn-close-bg) center / 1em auto no-repeat;
  border-radius: 3.375rem;
  font-size: 12px;
}

.modal-title {
  font-family: var(--font-heading);
}

.header-stats-grid .stat-num {
  font-family: var(--font-heading);
  color: white;
  font-size: 26px;
}

.header-stats-grid .stat-label {
  font-size: 10px;
  color: #93c5fd;
  text-transform: uppercase;
  font-family: var(--font-primary);
}

/* =======================================
   Onboarding Steps Page Styling (Vertical Progress)
   ======================================= */

.onboarding-steps-section {
  background-color: #f8fafc;
  padding: 40px 0 40px 0;
}

/* Left Side Form Card styling */
.onboarding-form-card {
  background: #fff;
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.02);
}

.onboarding-form-card .form-main-title {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 700;
  color: #111;
  margin-bottom: 6px;
}

.onboarding-form-card .form-subtitle {
  font-size: 15px;
  color: #666;
  margin-bottom: 32px;
}

/* Style form control fields without left icons */
.onboarding-form-card .form-control,
.accordion-edit-form .form-control {
  height: 51px !important;
  padding: 14px 15px !important;
  border-radius: 12px !important;
  border: 1px solid #e8e8e8 !important;
  background-color: #f9f9f9 !important;
  font-size: 14px !important;
  transition: all 0.3s ease;
}

.onboarding-form-card .form-control:focus,
.accordion-edit-form .form-control:focus {
  background-color: #fff !important;
  border-color: var(--primary-color) !important;
  box-shadow: none !important;
}

/* Select2 Multiple/Tags Selection Styling inside onboarding form card */
.onboarding-form-card .select2-container--default .select2-selection--multiple,
.accordion-edit-form .select2-container--default .select2-selection--multiple {
  min-height: 51px !important;
  background-color: #f9f9f9 !important;
  border: 1px solid #e8e8e8 !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  padding: 4px 15px !important;
  transition: all 0.3s ease;
}

.onboarding-form-card .select2-container--default.select2-container--focus .select2-selection--multiple,
.accordion-edit-form .select2-container--default.select2-container--focus .select2-selection--multiple {
  background-color: #fff !important;
  border-color: var(--primary-color) !important;
  outline: none !important;
}

.onboarding-form-card .select2-container--default .select2-selection--multiple .select2-selection__rendered,
.accordion-edit-form .select2-container--default .select2-selection--multiple .select2-selection__rendered {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Style the tag/chip (Reversed display order to place cross on the right) */
.onboarding-form-card .select2-container--default .select2-selection--multiple .select2-selection__choice,
.accordion-edit-form .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--primary-gradient) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 50px !important;
  padding: 4px 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  margin: 2px !important;
  display: inline-flex !important;
  float: none !important;
  /* Disable floats to allow flexbox behavior */
  align-items: center !important;
  flex-direction: row-reverse !important;
  gap: 6px !important;
}

.onboarding-form-card .select2-container--default .select2-selection--multiple .select2-selection__choice__remove,
.accordion-edit-form .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  position: static !important;
  float: none !important;
  color: #fff !important;
  border: none !important;
  background: transparent !important;
  font-size: 17px !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  transition: opacity 0.2s;
  order: 2 !important;
  margin-top: -4px !important;
}

.onboarding-form-card .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
.accordion-edit-form .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  background: transparent !important;
  color: #fff !important;
  opacity: 0.8 !important;
}

.onboarding-form-card .select2-container--default .select2-search--inline .select2-search__field,
.accordion-edit-form .select2-container--default .select2-search--inline .select2-search__field {
  margin: 0 !important;
  font-family: var(--font-main) !important;
  font-size: 14px !important;
  color: #111 !important;
  height: 38px !important;
  line-height: 38px !important;
  min-width: 250px !important;
  /* Prevents placeholder text from wrapping or cutting off */
  max-width: 100% !important;
}

/* Buttons */
.form-actions-divider {
  height: 1px;
  background: #eee;
}

.btn-outline-back {
  padding: 13px 30px;
  border-radius: 50px;
  border: 1.5px solid #7342eb;
  color: #7342eb;
  background: transparent;
  font-weight: 700;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  text-decoration: none;
}

.btn-outline-back:hover {
  background: #7342eb;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(115, 66, 235, 0.15);
}

.btn-primary-next {
  padding: 13px 40px;
  border-radius: 50px;
  background: var(--primary-gradient);
  color: #fff;
  border: none;
  font-weight: 700;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 10px 25px rgba(115, 66, 235, 0.2);
  transition: all 0.3s ease;
  cursor: pointer;
}

.btn-primary-next:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 30px rgba(115, 66, 235, 0.3);
}

/* Vertical Steps Progress Sidebar (Right Column) */
.onboarding-steps-sidebar {
  background: #fff;
  border-radius: 24px;
  padding: 35px 30px;
  border: 1px solid #edf2f7;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.02);
  position: sticky;
  top: 30px;
}

.onboarding-steps-vertical {
  display: flex;
  flex-direction: column;
  gap: 30px;
  position: relative;
}

/* Vertical timeline indicator line */
.onboarding-steps-vertical::before {
  content: '';
  position: absolute;
  left: 21px;
  top: 20px;
  bottom: 20px;
  width: 2px;
  background: #e2e8f0;
  z-index: 1;
}

.vertical-step-item {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 2;
  background: transparent;
  padding: 2px 0;
  transition: all 0.3s ease;
  text-decoration: none !important;
}

.vertical-step-item .step-icon {
  width: 44px;
  height: 44px;
  background: #fff;
  border: 2px solid #e2e8f0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 20px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
  flex-shrink: 0;
}

.vertical-step-item .step-content {
  display: flex;
  flex-direction: column;
}

.vertical-step-item .step-number {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.2;
}

.vertical-step-item .step-title {
  font-size: 14px;
  font-weight: 700;
  color: #64748b;
  transition: all 0.3s ease;
  margin-top: 4px;
}

/* Active Step */
.vertical-step-item.active .step-icon {
  border-color: #dcceff;
  background: var(--primary-gradient);
  color: #fff;
  box-shadow: 0 8px 20px rgba(115, 66, 235, 0.15);
}

.vertical-step-item.active .step-title {
  color: #1e293b;
  font-weight: 800;
}

.vertical-step-item.active .step-number {
  color: #7342eb;
}

/* Completed Step */
.vertical-step-item.completed .step-icon {
  border-color: #16a34a;
  background: #16a34a;
  color: #fff;
  box-shadow: 0 8px 20px rgba(22, 163, 74, 0.15);
}

.vertical-step-item.completed .step-title {
  color: #64748b;
  font-weight: 600;
}

.vertical-step-item.completed .step-number {
  color: #16a34a;
}

/* Override icon with checkmark for completed steps */
.vertical-step-item.completed .step-icon iconify-icon {
  display: none;
}

.vertical-step-item.completed .step-icon::after {
  content: "✓";
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}

/* Step 5 - Photos Upload Styling */
.photo-upload-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.photo-main-col {
  display: flex;
  flex-direction: column;
}

.photo-grid-small {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
}

.photo-upload-slot {
  position: relative;
  background: #f8fafc;
  border: 2px dashed #e2e8f0;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 100%;
  width: 100%;
}

.photo-upload-slot.large-slot {
  aspect-ratio: 4 / 5;
}

.photo-upload-slot.small-slot {
  border-radius: 16px;
  aspect-ratio: 1 / 1.15;
}

.photo-upload-slot:hover {
  border-color: #7342eb;
  background: #f1f5f9;
  box-shadow: 0 10px 25px rgba(115, 66, 235, 0.05);
}

.photo-upload-slot .slot-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #94a3b8;
  text-align: center;
  padding: 20px;
  transition: all 0.3s ease;
}

.photo-upload-slot .slot-placeholder iconify-icon {
  font-size: 28px;
  color: #94a3b8;
  background: #e2e8f0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.photo-upload-slot:hover .slot-placeholder iconify-icon {
  color: #7342eb;
  background: rgba(115, 66, 235, 0.1);
  transform: translateY(-2px);
}

.photo-upload-slot.large-slot .slot-placeholder iconify-icon {
  font-size: 36px;
  width: 72px;
  height: 72px;
}

.photo-upload-slot .slot-placeholder span {
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
}

.photo-upload-slot .slot-preview {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.photo-upload-slot .slot-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.5s ease;
}

.photo-upload-slot:hover .slot-preview img {
  transform: scale(1.03);
}

.photo-upload-slot .btn-edit-photo {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary-gradient, linear-gradient(135deg, #7342eb, #2563eb));
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  box-shadow: 0 4px 12px rgba(115, 66, 235, 0.35);
  z-index: 2;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.photo-upload-slot .btn-edit-photo:hover {
  transform: scale(1.15) rotate(15deg);
  box-shadow: 0 6px 16px rgba(115, 66, 235, 0.5);
}

.photo-upload-slot .btn-delete-photo {
  position: absolute;
  bottom: 12px;
  right: 56px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35);
  z-index: 2;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.photo-upload-slot .btn-delete-photo:hover {
  transform: scale(1.15) rotate(-15deg);
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.5);
}

/* Guidelines Banner Styling */
.guidelines-banner {
  background: #f8fafc;
  border-radius: 16px;
  padding: 16px 20px;
  border: 1px solid #edf2f7;
}

.guidelines-banner .guidelines-icon {
  color: #7342eb;
}

.guidelines-banner span {
  font-weight: 500;
  color: #64748b;
}


/* Step 6 - ID Proof & Bio Data/Certificate Styling */
.id-proof-radios {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.id-proof-radios .form-check {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  background: #f8fafc;
  padding: 16px;
  padding-left: 40px;
  border-radius: 14px;
  border: 1px solid #edf2f7;
  margin-right: 0px;
  padding-right: 19px;
}

.id-proof-radios .form-check-input[type="radio"] {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  margin-top: 0;
  border: 2px solid #cbd5e1;
  border-radius: 50%;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
  background-color: #fff;
}

.id-proof-radios .form-check-input[type="radio"]:checked {
  border-color: #7342eb;
  background-color: #fff;
}

.id-proof-radios .form-check-input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--primary-gradient, linear-gradient(135deg, #7342eb, #2563eb));
}

.id-proof-radios .form-check-label {
  font-size: 14px;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
  user-select: none;
}

.doc-upload-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.doc-upload-slot {
  position: relative;
  background: #f8fafc;
  border: 1.5px dashed #cbd5e1;
  border-radius: 16px;
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-align: center;
  transition: all 0.3s ease;
  min-height: 180px;
}

.doc-upload-slot:hover {
  border-color: #7342eb;
  background: #f1f5f9;
}

.doc-upload-slot .upload-icon-container {
  width: 56px;
  height: 56px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
  transition: all 0.3s ease;
  margin: auto;
  margin-bottom: 12px;
}

.doc-upload-slot:hover .upload-icon-container {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(115, 66, 235, 0.12);
}

.doc-upload-slot .upload-icon-container iconify-icon {
  font-size: 24px;
  color: #64748b;
  transition: all 0.3s ease;
}

.doc-upload-slot:hover .upload-icon-container iconify-icon {
  color: #7342eb;
}

.doc-upload-slot .upload-text {
  font-size: 13px;
  color: #64748b;
  line-height: 1.5;
  font-weight: 500;
}

.doc-upload-slot .upload-text .browse-link {
  color: #7342eb;
  font-weight: 600;
  text-decoration: none;
}

.doc-upload-slot .upload-text .browse-link:hover {
  text-decoration: underline;
}

.doc-upload-slot .slot-preview {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f8fafc;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 2;
  border: 1.5px solid #cbd5e1;
}

.doc-upload-slot .btn-delete-doc {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fee2e2;
  border: none;
  color: #ef4444;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 3;
}

.doc-upload-slot .btn-delete-doc:hover {
  background: #fecaca;
  transform: scale(1.1);
}

/* Step 7 - Partner Preferences Styling */
#step-panel-7 .slider-track-fill {
  background: linear-gradient(90deg, #7342eb, #2563eb);
}

#step-panel-7 .slider-range-input::-webkit-slider-thumb {
  background: #7342eb;
  border: 3.5px solid #fff;
  box-shadow: 0 4px 10px rgba(115, 66, 235, 0.35);
  width: 22px;
  height: 22px;
}

#step-panel-7 .slider-range-input::-moz-range-thumb {
  background: #7342eb;
  border: 3.5px solid #fff;
  box-shadow: 0 4px 10px rgba(115, 66, 235, 0.35);
  width: 22px;
  height: 22px;
}

#step-panel-7 .slider-tooltip-box {
  background: #4f46e5;
  color: #fff;
  border-radius: 50px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  box-shadow: 0 4px 10px rgba(79, 70, 229, 0.25);
}

#step-panel-7 .slider-tooltip-box::after {
  border-color: #4f46e5 transparent;
}

#step-panel-7 .slider-input-pill {
  background: #f9f9f9;
  border: 1.5px solid #cbd5e1;
  border-radius: 28px;
  color: #334155;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 16px;
  transition: all 0.3s ease;
}

#step-panel-7 .slider-input-pill:focus {
  border-color: #7342eb;
}


#step-panel-7 .btn-pref-next:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(92, 38, 255, 0.35);
}

/* Profile Page Inline Editing Styles */
.accordion-edit-form {
  display: none;
}

.profile-accordion-card.is-editing .preference-table-grid {
  display: none !important;
}

.profile-accordion-card.is-editing .accordion-edit-form {
  display: block !important;
}

/* Cancel and Save buttons inside the edit form */
.form-actions-inline {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #f1f5f9;
}

.btn-inline-cancel {
  padding: 8px 20px;
  border-radius: 50px;
  border: 1.5px solid #cbd5e1;
  color: #64748b;
  background: transparent;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.3s ease;
}

.btn-inline-cancel:hover {
  background: #f1f5f9;
  color: #334155;
}

.btn-inline-save {
  padding: 12px 24px;
  border-radius: 50px;
  background: var(--primary-gradient);
  color: #fff;
  border: none;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(115, 66, 235, 0.15);
  transition: all 0.3s ease;
  box-shadow: 0 6px 15px rgba(115, 66, 235, 0.25);
}

.btn-family-add {
  padding: 12px 24px;
  border-radius: 50px;
  background: var(--primary-gradient);
  color: #fff;
  border: none;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(115, 66, 235, 0.15);
  transition: all 0.3s ease;
  box-shadow: 0 6px 15px rgba(115, 66, 235, 0.25);
}

/* =============================================
   Contact Us Page Custom Styles
   ============================================= */

.contact-page-section {
  background-color: #f8fafc;
  padding: 60px 0 80px;
}

.contact-left-wrapper,
.contact-right-wrapper {
  position: relative;
}

.contact-section-title {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.1;
  margin-bottom: 8px;
}

.contact-section-subtitle {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.6;
  max-width: 480px;
  margin-bottom: 0;
}



/* Contact Info Cards */
.info-card {
  background: var(--white);
  border-radius: 20px;
  padding: 30px 20px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.01);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.info-card .icon-circle {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(85, 98, 229, 0.06);
  color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 18px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.info-card-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.5px;
  font-weight: 700;
  color: #999;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.info-card-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
  text-decoration: none;
  transition: color 0.3s ease;
  word-break: break-all;
}

.info-card-value:hover {
  color: var(--primary-color);
}

.info-card-value-text {
  font-size: 13px;
  font-weight: 600;
  color: #444;
  line-height: 1.5;
}

.info-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(115, 66, 235, 0.06);
  border-color: rgba(115, 66, 235, 0.15);
}

.info-card:hover .icon-circle {
  background: var(--primary-gradient);
  color: var(--white);
}

/* Map frame styling */
.map-container-wrapper {
  background: var(--white);
  border-radius: 24px;
  padding: 12px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.map-card-frame {
  border-radius: 16px;
  overflow: hidden;
  line-height: 0;
}

.map-card-frame iframe {
  filter: grayscale(0.2) contrast(0.9);
  transition: filter 0.5s ease;
}

.map-container-wrapper:hover iframe {
  filter: none;
}

/* Support Sidebar Cards */
.support-sidebar-card {
  background: var(--white);
  border-radius: 24px;
  padding: 30px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.support-sidebar-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.05);
}

/* Card 1: Relationship Guidance */
.relationship-guidance-card {
  background: var(--primary-gradient);
  border: none;
}

.relationship-guidance-card .card-glow {
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(115, 66, 235, 0.3) 0%, rgba(115, 66, 235, 0) 70%);
  pointer-events: none;
}

.relationship-guidance-card .card-icon-area {
  position: relative;
  z-index: 2;
}

.relationship-guidance-card .main-icon-circle {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}

.relationship-guidance-card .card-main-icon {
  font-size: 22px;
  color: var(--white);
}

.relationship-guidance-card .sparkles-icon {
  font-size: 20px;
  color: #ffd25e;
  animation: heartbeat 3s infinite;
}

.relationship-guidance-card .support-card-title {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
}

.relationship-guidance-card .support-card-desc {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
}

.support-quote-box {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 20px;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.support-quote-box .quote-icon {
  font-size: 28px;
  color: rgba(255, 255, 255, 0.12);
  position: absolute;
  top: 10px;
  right: 15px;
}

.support-quote-box .quote-text {
  font-size: 13px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
  margin-bottom: 0;
}

/* Card 2: Privacy and Trust */
.privacy-trust-card {
  padding: 24px;
}

.shield-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(22, 163, 74, 0.08);
  color: #16a34a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.privacy-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 3px;
}

.privacy-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 0;
}

/* Card 3: Verified Profiles Promo */
.verified-promotion-card {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border: 1px solid rgba(59, 130, 246, 0.1);
}

.verified-promotion-card .promo-badge-container {
  display: flex;
}

.badge-verified-promo {
  background: #3b82f6;
  color: var(--white);
  font-size: 10px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.verified-promotion-card .promo-title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 500;
  color: #1e3a8a;
  line-height: 1.2;
  margin-bottom: 8px;
}

.verified-promotion-card .promo-desc {
  font-size: 13.5px;
  color: #1e40af;
  line-height: 1.6;
  opacity: 0.85;
}

.btn-promo-cta {
  background: var(--primary-gradient);
  color: var(--white);
  padding: 12px 24px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 14px;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(115, 66, 235, 0.15);
  text-decoration: none;
}

.btn-promo-cta iconify-icon {
  font-size: 16px;
  transition: transform 0.3s ease;
}

.btn-promo-cta:hover {
  color: var(--white);
  box-shadow: 0 6px 18px rgba(115, 66, 235, 0.25);
  transform: translateY(-1px);
}

.btn-promo-cta:hover iconify-icon {
  transform: translateX(3px);
}

/* Fix overlapping input icons inside onboarding form card */
.onboarding-form-card .input-with-icon .form-control {
  padding-left: 45px !important;
}

/* =============================================
   Search Page Custom Styles
   ============================================= */

.search-page-section {
  background-color: #f8fafc;
  padding: 60px 0 80px;
}

/* Search Tabs Navigation Deck */
.search-tabs-container {
  overflow-x: auto;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE/Edge */
}

.search-tabs-container::-webkit-scrollbar {
  display: none;
  /* Chrome/Safari/Opera */
}

.search-tabs-nav {
  display: flex;
  gap: 12px;
  border: none;
  flex-wrap: nowrap;
  width: 100%;
}

.search-tabs-nav .nav-item {
  flex: 1;
  min-width: max-content;
}

.search-tabs-nav .nav-link {
  background: var(--white);
  color: #475569;
  border: 1px solid #edf2f7 !important;
  border-radius: 50px;
  padding: 14px 24px;
  font-weight: 600;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.01);
  white-space: nowrap;
  width: 100%;
}

.search-tabs-nav .nav-link iconify-icon {
  font-size: 18px;
}

.search-tabs-nav .nav-link.active {
  background: var(--primary-gradient) !important;
  color: var(--white) !important;
  border-color: transparent !important;
  box-shadow: 0 8px 20px rgba(115, 66, 235, 0.25) !important;
}

.search-tabs-nav .nav-link:not(.active):hover {
  border-color: var(--primary-color) !important;
  color: var(--primary-color) !important;
  background: #f8faff;
}

/* Gender Selector Cards */
.gender-cards-grid {
  display: flex;
  gap: 16px;
}

.gender-selector-card {
  flex: 1;
  background: #f9f9f9;
  border: 1.5px solid #e8e8e8;
  border-radius: 16px;
  padding: 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.gender-selector-card .gender-card-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(85, 98, 229, 0.05);
  color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  transition: all 0.3s ease;
}

.gender-selector-card .gender-card-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark);
}

.gender-selector-card .card-check-icon {
  position: absolute;
  top: 12px;
  right: 12px;
  color: var(--primary-color);
  font-size: 20px;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.gender-selector-card:hover {
  border-color: var(--primary-color);
  background: var(--white);
  box-shadow: 0 10px 25px rgba(85, 98, 229, 0.04);
}

.gender-selector-card.active {
  border-color: var(--primary-color);
  background: var(--white);
  box-shadow: 0 12px 30px rgba(85, 98, 229, 0.08);
}

.gender-selector-card.active .gender-card-icon {
  background: var(--primary-gradient);
  color: var(--white);
}

.gender-selector-card.active .card-check-icon {
  opacity: 1;
  transform: scale(1);
}

/* Custom iOS-style Switch Toggle */
.custom-switch-label {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 24px;
  cursor: pointer;
  margin: 0;
}

.custom-switch-label input {
  opacity: 0;
  width: 0;
  height: 0;
}

.custom-switch-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #cbd5e1;
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 24px;
}

.custom-switch-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.custom-switch-label input:checked+.custom-switch-slider {
  background: var(--primary-gradient);
}

.custom-switch-label input:checked+.custom-switch-slider:before {
  transform: translateX(22px);
}

.switch-text-tag {
  font-size: 14.5px;
  font-weight: 600;
  color: #475569;
  user-select: none;
}

/* Slider Editable Input Styling */
.input-with-label {
  position: relative;
}

.input-label-tag {
  position: absolute;
  left: 15px;
  top: 6px;
  font-size: 9px;
  font-weight: 800;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  pointer-events: none;
}

.search-page-section .slider-inputs-row .slider-input-pill {
  width: 100%;
  background: #f8fafc;
  border: 1px solid #edf2f7;
  border-radius: 12px;
  height: 48px;
  padding: 16px 12px 2px 15px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark);
  transition: all 0.3s ease;
  text-align: left;
}

.slider-inputs-row .slider-input-pill:focus {
  background: var(--white);
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(85, 98, 229, 0.08);
  outline: none;
}

/* CTA Submit Button */
.btn-search-cta {
  background: var(--primary-gradient);
  color: var(--white);
  padding: 15px 44px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 16px;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 10px 30px rgba(115, 66, 235, 0.25);
  cursor: pointer;
}

.btn-search-cta iconify-icon {
  font-size: 18px;
}

.btn-search-cta:hover {
  transform: translateY(-2px);
  color: var(--white);
  box-shadow: 0 14px 35px rgba(115, 66, 235, 0.35);
}

/* Sidebar Stats & Floating matches styling */
.search-sidebar-wrapper {
  position: relative;
}

.stats-mini-card {
  background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
  border: 1px solid rgba(59, 130, 246, 0.06);
  border-radius: 24px;
  padding: 30px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.01);
}

.stats-mini-card .glow-radial {
  position: absolute;
  top: -20%;
  right: -20%;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0) 70%);
  pointer-events: none;
}

.stat-count {
  font-family: var(--font-heading);
  font-size: 38px;
  font-weight: 800;
  color: var(--primary-color);
  line-height: 1.1;
}

.stat-indicator-dot {
  width: 10px;
  height: 10px;
  background-color: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.6);
}

.stat-title {
  font-size: 17px;
  font-weight: 800;
  color: #1e3a8a;
  margin: 0;
}

.stat-desc {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.6;
}

.sidebar-divider {
  height: 1px;
  background-color: rgba(0, 0, 0, 0.06);
}

/* Floating Mockups */
.floating-match-mockup-wrapper {
  min-height: 320px;
  background: #f8fafc;
  border-radius: 24px;
  border: 1px solid rgba(0, 0, 0, 0.03);
  overflow: hidden;
}

.mockup-bg-shapes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 10% 20%, rgba(115, 66, 235, 0.02) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(44, 142, 220, 0.02) 0%, transparent 40%);
  pointer-events: none;
}

.floating-match-item {
  position: absolute;
  width: 270px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 18px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.04);
}

.floating-match-item img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}

.floating-match-item .match-details h5 {
  font-size: 14.5px;
  font-weight: 750;
  color: var(--text-dark);
  margin-bottom: 2px;
}

.floating-match-item .match-details p {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}

.match-rate-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff4d7;
  color: #ffb800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  margin-left: auto;
  box-shadow: 0 2px 5px rgba(255, 184, 0, 0.15);
}

.match-rate-badge.secondary {
  background: #e0f2fe;
  color: var(--secondary-color);
  box-shadow: 0 2px 5px rgba(44, 142, 220, 0.15);
}

.match-rate-badge.primary-glow {
  background: #d1fae5;
  color: #10b981;
  box-shadow: 0 2px 5px rgba(16, 185, 129, 0.15);
}

/* Floating positions & animations */
.floating-match-item.card-top {
  top: 30px;
  left: 20px;
  animation: float-badge 6s ease-in-out infinite;
}

.floating-match-item.card-middle {
  top: 125px;
  right: 20px;
  animation: float-badge 7s ease-in-out infinite 1s;
}

.floating-match-item.card-bottom {
  top: 220px;
  left: 30px;
  animation: float-badge 8s ease-in-out infinite 0.5s;
}

/* Animations for Floating Badges and Tab Fades */
@keyframes float-badge {
  0% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(-10px) rotate(1deg);
  }

  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

.animate-fade-in {
  animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

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


/* =============================================
   Success Stories Page Custom Styles
   ============================================= */

.stories-page-main {
  background-color: #f8fafc;
  padding-bottom: 50px;
}

/* Hero Section */
.stories-hero-section {
  background: #f8fafc;
  padding: 50px 0 30px;
}

.stories-hero-bg-glow {
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: 250px;
  background: radial-gradient(circle, rgba(115, 66, 235, 0.04) 0%, rgba(115, 66, 235, 0) 70%);
  pointer-events: none;
  z-index: 1;
}

.stories-main-title {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 600;
  color: var(--text-dark);
  letter-spacing: -0.5px;
}

.stories-subtitle {
  font-size: 14.5px;
  color: var(--text-muted);
  max-width: 600px;
  line-height: 1.5;
}

/* Floating Stats Badges */
.stat-badge-pill {
  background: var(--white);
  border: 1px solid #edf2f7;
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-dark);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
}

.stat-badge-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
}

.stat-badge-pill iconify-icon {
  font-size: 15px;
  color: var(--primary-color);
}

.stat-badge-pill .heart-pulse {
  animation: heartbeat 2.5s infinite;
}



/* Category Badges */
.story-category-badge {
  background: #f0f6ff;
  color: var(--secondary-color);
  font-size: 10px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  top: 15px;
  left: 15px;
  z-index: 5;
  box-shadow: 0 4px 12px rgba(44, 142, 220, 0.1);
}

.story-category-badge.featured {
  background: var(--primary-gradient);
  color: var(--white);
  box-shadow: 0 6px 15px rgba(115, 66, 235, 0.25);
}

/* Featured Story Banner */
.featured-story-banner {
  background: var(--white);
  border-radius: 24px;
  border: 1px solid #edf2f7;
  overflow: hidden;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.03);
}

.featured-story-img-container {
  overflow: hidden;
  position: relative;
}

.featured-story-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.featured-story-banner:hover .featured-story-img {
  transform: scale(1.03);
}

.featured-story-content {
  padding: 25px 35px !important;
}

.featured-story-content .story-meta {
  font-size: 11px;
  font-weight: 850;
  color: #94a3b8;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.featured-story-title {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 5px;
}

.romantic-quote-box {
  background: #fffcfc;
  border-left: 3px solid var(--primary-color);
  padding: 10px 15px;
  margin: 12px 0 !important;
  border-radius: 0 12px 12px 0;
  position: relative;
}

.quote-icon-banner {
  position: absolute;
  top: 6px;
  right: 12px;
  font-size: 24px;
  color: rgba(115, 66, 235, 0.04);
}

.romantic-quote {
  font-size: 13.5px;
  font-style: italic;
  font-weight: 600;
  color: var(--primary-color);
  margin-bottom: 0;
  line-height: 1.4;
}

.story-description {
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 0;
}

.featured-story-content .btn-search-cta {
  margin-top: 12px !important;
  padding: 14px 24px !important;
  font-size: 13.5px !important;
}

/* Main Magazine Grid */
.story-card {
  background: var(--white);
  border-radius: 20px;
  border: 1px solid #edf2f7;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  height: 100%;
}

.story-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.04);
}

.story-card-img-wrap {
  overflow: hidden;
  position: relative;
}

.story-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.story-card:hover .story-card-img {
  transform: scale(1.04);
}

.story-card-body {
  padding: 20px 25px !important;
}

.story-card-meta {
  font-size: 10px;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.story-publish-date {
  font-size: 10px;
  color: #a0aec0;
  font-weight: 600;
}

.story-card-title {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 5px;
}

.story-card-quote {
  font-size: 14px;
  font-style: italic;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.7;
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

.story-card-desc {
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 8px !important;
}

.story-read-link {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--primary-color);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.story-read-link .link-arrow {
  transition: transform 0.2s ease;
}

.story-read-link:hover {
  color: var(--primary-color-hover, var(--primary-color));
}

.story-read-link:hover .link-arrow {
  transform: translateX(4px);
}

/* Stats Gradient Banner */
.stats-gradient-card {
  background: linear-gradient(135deg, #eff6ff 0%, #fff0f5 100%);
  border-radius: 24px;
  border: 1px solid rgba(115, 66, 235, 0.05);
  padding: 24px 35px !important;
}

.stats-card-main-title {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.2;
}

.stats-card-desc {
  font-size: 13px;
  line-height: 1.5;
}

.trust-stat-box {
  background: var(--white);
  padding: 16px 20px;
  border-radius: 16px;
  box-shadow: 0 8px 25px rgba(115, 66, 235, 0.02);
  border: 1px solid rgba(115, 66, 235, 0.03);
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.trust-icon-circle {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(115, 66, 235, 0.05);
  color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.trust-stat-num {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-dark);
}

.trust-stat-label {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Testimonials Carousel Section */

.stories-testimonial-title {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 700;
  color: var(--text-dark);
}

.testimonials-slider-wrapper {
  max-width: 800px;
  margin: 0 auto;
}

.testimonial-bubble-card {
  background: var(--white);
  border-radius: 24px;
  border: 1px solid #edf2f7;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  margin: 15px 5px;
  position: relative;
  padding: 24px 35px !important;
}

.testimonial-quote-icon {
  font-size: 30px;
  color: rgba(115, 66, 235, 0.06);
  position: absolute;
  top: 15px;
  left: 20px;
}

.testimonial-text {
  font-size: 14px;
  line-height: 1.5;
  color: #334155;
  font-style: italic;
  font-weight: 550;
  position: relative;
  z-index: 2;
}

.testimonial-rating iconify-icon {
  color: #ffb800;
  font-size: 14px;
}

.testimonial-author {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-dark);
}

.testimonial-loc {
  font-size: 11.5px;
  color: #94a3b8;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pagination-section {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}

/* Slick Custom Arrows for Testimonials */
.testimonial-slick-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid #edf2f7;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  z-index: 10;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: all 0.25s ease;
}

.testimonial-slick-btn:hover {
  background: var(--primary-color);
  color: var(--white);
  border-color: var(--primary-color);
  box-shadow: 0 8px 20px rgba(115, 66, 235, 0.2);
}

.testimonial-slick-btn.slick-prev {
  left: -20px;
}

.testimonial-slick-btn.slick-next {
  right: -20px;
}

/* Slick Dots customisation */
.testimonial-slider-deck .slick-dots {
  bottom: -40px;
  display: flex !important;
  justify-content: center;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.testimonial-slider-deck .slick-dots li {
  width: auto;
  height: auto;
  margin: 0;
}

.testimonial-slider-deck .slick-dots li button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cbd5e1;
  border: none;
  padding: 0;
  font-size: 0;
  line-height: 0;
  transition: all 0.3s ease;
  cursor: pointer;
}

.testimonial-slider-deck .slick-dots li.slick-active button {
  background: var(--primary-color);
  width: 20px;
  border-radius: 10px;
}

/* =============================================
   Success Story Details Page Styles
   ============================================= */

.story-details-page-main {
  background-color: #f8fafc;
}

.btn-back-to-stories {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--primary-color);
  transition: all 0.25s ease;
}

.btn-back-to-stories:hover {
  color: var(--primary-color-hover, var(--primary-color));
  transform: translateX(-3px);
}

.story-detail-main-title {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  color: var(--text-dark);
  letter-spacing: -0.5px;
}

.story-detail-meta-info {
  font-size: 13.5px;
  font-weight: 600;
}

.story-detail-meta-info iconify-icon {
  color: var(--primary-color);
  vertical-align: middle;
  font-size: 17px;
  margin-top: -3px;
}

.story-cover-image-container {
  height: 400px;
  border-radius: 24px;
}

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

.story-cover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.4) 100%);
  pointer-events: none;
}

.story-narrative-card {
  background: var(--white);
  border-radius: 24px;
  margin-top: 22px;
}

.narrative-quote-container {
  background: #fffcfc;
  border-left: 4px solid var(--primary-color);
  padding: 24px 30px;
  border-radius: 0 20px 20px 0;
  position: relative;
}

.narrative-quote-icon-large {
  position: absolute;
  top: 15px;
  right: 25px;
  font-size: 54px;
  color: rgba(115, 66, 235, 0.04);
}

.narrative-quote-text {
  font-size: 16px;
  font-style: italic;
  font-weight: 600;
  color: var(--primary-color);
  line-height: 1.6;
  margin-bottom: 0;
}

.narrative-body-text {
  font-size: 14.5px;
  line-height: 1.7;
  color: #475569;
}

.narrative-body-text p {
  margin-bottom: 20px;
}

.narrative-body-text p:last-child {
  margin-bottom: 0;
}

.narrative-section-title {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-dark);
}

.story-sidebar-sticky {
  position: sticky;
  top: 100px;
}

.profile-summary-sidebar-card {
  background: var(--white);
  border-radius: 20px;
}


.sidebar-card-title {
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 600;
  color: var(--text-dark);
  padding-bottom: 0px;
}


.overview-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(44, 142, 220, 0.08);
  color: #2c8edc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.overview-icon.pink {
  background: rgba(236, 72, 153, 0.08);
  color: #ec4899;
}

.overview-label {
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.overview-value {
  color: var(--text-dark);
  font-size: 14.5px;
}

.milestone-item {
  border-left: 2px solid #e2e8f0;
}

.milestone-item:last-child {
  border-left-color: transparent;
}

.milestone-dot {
  position: absolute;
  left: -6px;
  top: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #cbd5e1;
}

.milestone-dot.active {
  background: var(--primary-color);
  box-shadow: 0 0 0 4px rgba(115, 66, 235, 0.15);
}

.milestone-title {
  color: var(--text-dark);
  font-size: 14px;
}

.trust-badge-card {
  background: linear-gradient(135deg, rgba(115, 66, 235, 0.03) 0%, rgba(115, 66, 235, 0.06) 100%);
  border: 1px solid rgba(115, 66, 235, 0.08);
  border-radius: 20px;
}

.trust-badge-icon-sidebar {
  font-size: 40px;
  color: var(--primary-color);
}

.trust-badge-card h5 {
  color: var(--text-dark);
  font-size: 15px;
}

.related-stories-section .section-sub-title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-dark);
}

.details-cta-gradient-card {
  background: var(--primary-gradient);
  border-radius: 24px;
}

.cta-overlay-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 60%);
  pointer-events: none;
}

.cta-main-title-text {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 800;
}

.cta-subtitle-text {
  font-size: 14.5px;
  opacity: 0.9;
}


/* =============================================
   Success Stories Video & Upload Tabs Styles
   ============================================= */

.stories-tabs-section {
  position: relative;
  z-index: 10;
  background-color: #f8fafc;
}

/* Widescreen Video Story Banner */
.video-story-banner {
  background: var(--white);
  border-radius: 24px;
  border: 1px solid #edf2f7;
  overflow: hidden;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.03);
  position: relative;
}

.video-banner-img-container {
  overflow: hidden;
  position: relative;
  height: 100%;
  min-height: 380px;
}

.video-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.video-story-banner:hover .video-banner-img {
  transform: scale(1.03);
}

.video-banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 60%, rgba(0, 0, 0, 0.15) 100%);
  display: flex;
  align-items: center;
  padding: 40px 60px;
  z-index: 2;
}

.video-banner-info {
  max-width: 550px;
  color: var(--white);
}

.video-banner-meta {
  font-size: 11px;
  font-weight: 850;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.video-banner-title {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 800;
  color: var(--white);
  margin-top: 5px;
}

.video-banner-quote-box {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-left: 3px solid var(--primary-color);
  padding: 12px 18px;
  margin: 15px 0 !important;
  border-radius: 0 16px 16px 0;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-left-width: 3px;
}

.video-banner-quote {
  font-size: 14.5px;
  font-style: italic;
  font-weight: 600;
  color: #a78bfa;
  margin-bottom: 0;
  line-height: 1.4;
}

.video-banner-desc {
  font-size: 14px;
  line-height: 1.6;
  opacity: 0.85;
  margin-bottom: 20px;
}

/* Glass Play Button */
.btn-video-play {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 2px solid rgba(255, 255, 255, 0.4);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  position: relative;
  padding-left: 4px;
}

.btn-video-play:hover {
  background: var(--primary-gradient);
  border-color: transparent;
  transform: scale(1.08);
  box-shadow: 0 15px 35px rgba(115, 66, 235, 0.4);
  color: var(--white);
}

.play-pulse {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  animation: pulse-ring 2.5s infinite;
  pointer-events: none;
  left: 0;
  top: 0;
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.95);
    opacity: 0.8;
  }

  50% {
    opacity: 0.4;
  }

  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}

/* Video Grid and Story Card */
.video-story-card {
  background: var(--white);
  border-radius: 20px;
  border: 1px solid #edf2f7;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.video-story-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
}

.video-thumbnail-container {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
}

.video-card-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.video-story-card:hover .video-card-thumbnail {
  transform: scale(1.05);
}

.video-duration-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 50px;
  letter-spacing: 0.5px;
  z-index: 3;
}

.video-play-overlay-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  z-index: 3;
  opacity: 0.9;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding-left: 2px;
}

.video-story-card:hover .video-play-overlay-btn {
  transform: translate(-50%, -50%) scale(1.05);
  background: var(--primary-gradient);
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(115, 66, 235, 0.3);
  opacity: 1;
}

.video-card-body {
  padding: 20px 24px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.video-card-meta {
  font-size: 10px;
  font-weight: 850;
  color: #94a3b8;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.video-card-title {
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 8px;
}

.video-card-quote {
  font-size: 13px;
  font-style: italic;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 0;
}

/* Widescreen Responsive Modal Player */
.video-modal-content {
  background-color: #000;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.video-modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 10;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: var(--white);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.video-modal-close:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: rotate(90deg);
}

.video-iframe-ratio {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  /* 16:9 Aspect Ratio */
}

.video-iframe-ratio iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Upload Story Form Extras */
.upload-form-section {
  padding-bottom: 40px;
}

.onboarding-form-card.upload-card {
  max-width: 850px;
  margin: 0 auto;
  padding: 40px 50px !important;
}

.form-field-divider {
  height: 1px;
  background-color: #edf2f7;
  margin: 30px 0;
}

/* Success Submission Screen */
.upload-success-screen {
  text-align: center;
  padding: 40px 20px;
}

.success-heart-badge {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.08);
  color: #10b981;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  margin-bottom: 25px;
  box-shadow: 0 0 0 8px rgba(16, 185, 129, 0.03);
  animation: success-scale 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

@keyframes success-scale {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }

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

/* ==========================================================================
   IdealJodi Blog Page Styles
   ========================================================================== */

.blog-page-main {
  background-color: #f8fafc;
  padding-bottom: 50px;
}

/* Hero Section */
.blog-hero-section {
  background: #f8fafc;
  padding: 50px 0 30px;
}

.blog-hero-bg-glow {
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: 250px;
  background: radial-gradient(circle, rgba(115, 66, 235, 0.04) 0%, rgba(115, 66, 235, 0) 70%);
  pointer-events: none;
  z-index: 1;
}

.blog-main-title {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 600;
  color: var(--text-dark);
  letter-spacing: -0.5px;
}

.blog-subtitle {
  font-size: 14.5px;
  color: var(--text-muted);
  max-width: 600px;
  line-height: 1.5;
}

/* Filter pills */
.category-filter-wrapper {
  padding: 5px;
  background: transparent;
  border-radius: 12px;
}

.btn-category-filter {
  background: #fff;
  color: var(--text-dark);
  border: 1px solid #edf2f7;
  padding: 10px 20px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

.btn-category-filter:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
}

.btn-category-filter.active {
  background: var(--primary-gradient);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 20px rgba(115, 66, 235, 0.25);
}

/* Blog Cards */
.blog-card {
  background: var(--white);
  border-radius: 20px;
  border: 1px solid #edf2f7;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  height: 100%;
}

.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(115, 66, 235, 0.08);
}

.blog-card-img-wrap {
  overflow: hidden;
  position: relative;
  background-color: #f1f5f9;
}

.blog-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.blog-card:hover .blog-card-img {
  transform: scale(1.05);
}

.blog-category-badge {
  background: #f0f6ff;
  color: var(--secondary-color);
  font-size: 10px;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  top: 20px;
  left: 20px;
  z-index: 5;
  box-shadow: 0 4px 12px rgba(44, 142, 220, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.blog-card:hover .blog-category-badge {
  background: var(--primary-gradient);
  color: var(--white);
  box-shadow: 0 6px 15px rgba(115, 66, 235, 0.25);
}

.blog-card-body {
  padding: 24px;
}

.featured-card .blog-card-body {
  padding: 35px 40px !important;
}

.blog-card-meta {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.blog-card-meta iconify-icon {
  color: var(--primary-color);
  font-size: 16px;
  vertical-align: text-top;
  margin-right: 3px;
}

.blog-meta-separator {
  color: #cbd5e1;
}

.blog-card-title {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.4;
  margin-top: 10px;
  transition: color 0.3s ease;
}

.blog-card:hover .blog-card-title {
  color: var(--primary-color);
}

.featured-title {
  font-size: 28px;
  line-height: 1.3;
}

.blog-card-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}

.blog-read-btn {
  color: var(--primary-color);
  font-weight: 700;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s ease, color 0.2s ease;
}

.blog-read-btn iconify-icon {
  font-size: 15px;
}

.blog-read-btn:hover {
  color: var(--secondary-color);
  gap: 10px;
}

.blog-share-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.blog-share-btn:hover {
  background: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
  transform: scale(1.08);
}

/* Dynamic Filter Transition Class */
.blog-grid-item {
  transition: all 0.4s ease;
}

.blog-grid-item.filtered-out {
  opacity: 0;
  transform: scale(0.9);
  display: none !important;
}

/* ==========================================================================
   IdealJodi Blog Details Page Styles
   ========================================================================== */

.back-to-blog-link {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--primary-color);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.back-to-blog-link:hover {
  color: var(--secondary-color);
  transform: translateX(-4px);
}

.blog-details-title {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.25;
  margin-top: 10px;
}

.blog-details-featured-img-wrap {
  border-radius: 24px;
  overflow: hidden;
  height: 480px;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.03);
}

.blog-details-featured-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-details-content-body {
  font-size: 15.5px;
  line-height: 1.8;
  color: #334155;
}

.blog-details-content-body p {
  margin-bottom: 24px;
}

.blog-details-content-body .lead-paragraph {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--text-dark);
  margin-bottom: 30px;
}

.blog-details-content-body h2 {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 700;
  color: var(--text-dark);
  margin-top: 40px;
  margin-bottom: 18px;
}

.blog-details-list {
  padding-left: 20px;
  list-style-type: disc;
}

.blog-details-list li {
  margin-bottom: 12px;
}

.blog-tag-pill {
  font-size: 12px;
  font-weight: 600;
  background: #f1f5f9;
  color: #475569;
  padding: 6px 14px;
  border-radius: 50px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.blog-tag-pill:hover {
  background: var(--primary-color);
  color: #fff;
  transform: translateY(-1px);
}

/* Sidebar Widgets */
.blog-details-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.sidebar-widget {
  background: #fff;
  border: 1px solid #edf2f7;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

.widget-title {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-dark);
  border-bottom: 2px solid #f1f5f9;
  padding-bottom: 12px;
  margin-bottom: 18px;
}

.recent-post-item {
  display: flex;
  align-items: center;
  transition: all 0.25s ease;
}

.recent-post-item:hover {
  transform: translateX(4px);
}

.recent-post-thumb {
  width: 70px;
  height: 70px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  background-color: #f1f5f9;
}

.recent-post-info {
  min-width: 0;
}

.recent-post-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.4;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s ease;
}

.recent-post-item:hover .recent-post-title {
  color: var(--primary-color);
}

.recent-post-date {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
}

/* Matrimonial CTA Card */
.cta-widget-card {
  background: var(--primary-gradient);
  border: none;
  box-shadow: 0 15px 40px rgba(115, 66, 235, 0.2);
}

.cta-widget-heart-badge {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.cta-widget-title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
}

.cta-widget-desc {
  font-size: 13px;
  line-height: 1.5;
}

/* ==========================================================================
   IdealJodi Matrimonial Events Page Styles
   ========================================================================== */

.events-page-main {
  background-color: #f8fafc;
  padding-bottom: 50px;
}

.events-hero-section {
  background: #f8fafc;
  padding: 50px 0 30px;
  overflow: hidden;
}

.events-hero-bg-glow {
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: 250px;
  background: radial-gradient(circle, rgba(115, 66, 235, 0.04) 0%, rgba(115, 66, 235, 0) 70%);
  pointer-events: none;
  z-index: 1;
}

.events-main-title {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 600;
  color: var(--text-dark);
  letter-spacing: -0.5px;
}

.events-subtitle {
  font-size: 14.5px;
  color: var(--text-muted);
  max-width: 600px;
  line-height: 1.5;
}


/* Events Category Filters */
.btn-event-category-filter {
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #475569;
  padding: 10px 22px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 14.5px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  cursor: pointer;
}

.btn-event-category-filter:hover {
  background: #f8fafc;
  color: var(--primary-color);
  border-color: var(--primary-color);
  transform: translateY(-1px);
}

.btn-event-category-filter.active {
  background: var(--primary-gradient);
  color: var(--white);
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(115, 66, 235, 0.25);
}

/* Event Card Design */
.event-card {
  background: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: all 0.3s ease;
}

.event-card-img-wrap {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  margin-bottom: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

.event-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.event-card:hover .event-card-img {
  transform: scale(1.06);
}

.event-category-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  background: var(--white);
  color: var(--text-dark);
  font-size: 11px;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.event-card:hover .event-category-badge {
  background: var(--primary-gradient);
  color: var(--white);
  box-shadow: 0 6px 15px rgba(115, 66, 235, 0.25);
}

.event-card-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.event-card-meta {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.event-meta-separator {
  color: #cbd5e1;
}

.event-card-content-wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.event-card-text {
  flex-grow: 1;
}

.event-card-title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.3;
  margin-bottom: 8px;
  transition: color 0.3s ease;
}

.event-card-title a {
  color: var(--text-dark);
  transition: color 0.3s ease;
}

.event-card-title a:hover {
  color: var(--primary-color);
}

.event-card-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

/* Event Reddish-Orange Action Button */
.event-action-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--primary-color);
  color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}


.event-action-btn:hover {
  background: var(--primary-gradient);
  color: var(--white);
  border-color: var(--primary-color);
  transform: scale(1.08);
}

/* Dynamic Filter Transition Class */
.event-grid-item {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.event-grid-item.filtered-out {
  opacity: 0;
  transform: scale(0.9);
  display: none !important;
}

/* ==========================================================================
   IdealJodi Matrimonial Event Detail Page Styles
   ========================================================================== */

.event-details-page-main {
  background-color: #f8fafc;
  padding-bottom: 60px;
}

.event-details-hero-wrap {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  aspect-ratio: 16 / 9;
}

.event-details-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.event-details-hero-wrap:hover .event-details-hero-img {
  transform: scale(1.03);
}

.event-details-info-section {
  padding-bottom: 24px;
  border-bottom: 1.5px solid #edf2f7;
}

.event-details-title {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.35;
}

.event-details-meta {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
}

.event-details-meta iconify-icon {
  color: var(--primary-color);
  font-size: 17px;
}

.event-details-meta .meta-separator {
  color: #cbd5e1;
}

.event-pricing-box {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 20px;
  padding: 14px 18px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.01);
  display: inline-block;
  min-width: 180px;
}

.event-pricing-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.event-pricing-value {
  font-size: 20px;
  font-weight: 800;
  color: var(--primary-color);
}

.event-description-box {
  font-size: 15px;
  line-height: 1.8;
  color: #334155;
}

.event-description-box p {
  margin-bottom: 20px;
}

.event-description-box .lead-paragraph {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--text-dark);
  margin-bottom: 24px;
}

.event-description-box h3.narrative-section-title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-dark);
  margin-top: 32px;
}

.event-details-bullets {
  padding-left: 20px;
  list-style-type: disc;
  margin-bottom: 24px;
}

.event-details-bullets li {
  margin-bottom: 12px;
}

/* Sidebar action styling */
.btn-event-register {
  width: 100%;
  background: var(--primary-gradient);
  color: var(--white) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  padding: 16px 28px;
  border-radius: 50px;
  border: none;
  box-shadow: 0 8px 25px rgba(115, 66, 235, 0.25);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-event-register:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(115, 66, 235, 0.35);
}

/* Sidebar contact card icon styling */
.contact-info-list {
  display: flex;
  flex-direction: column;
}

.contact-info-item {
  display: flex;
  align-items: flex-start;
}

.contact-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: rgba(85, 98, 229, 0.08);
  color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.contact-text {
  flex-grow: 1;
}

.contact-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.contact-value {
  font-size: 14px;
  color: var(--text-dark);
  font-weight: 600;
  margin: 4px 0 0 0;
  line-height: 1.4;
}

.contact-value a {
  color: var(--text-dark);
  transition: color 0.2s ease;
}

.contact-value a:hover {
  color: var(--primary-color);
}

/* Map widget */
.map-card-container {
  height: 490px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  border: 1px solid #edf2f7;
}

.map-iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.event-details-content-wrap {
  background-color: #fff;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

/* Event Detail Ticket Modal Custom Styles */
.modal-title {
  font-family: var(--font-heading);
}

.ticket-info-wash-box {
  background-color: #f1f5f9;
  border-radius: 20px;
}

.modal-info-icon-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--primary-color);
  color: #fff;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.modal-info-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-dark);
}

.modal-ticket-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}

.ticket-qty-price-box {
  border: 1px solid #f1f5f9;
  background-color: #f1f5f9;
  border-radius: 50px;
  min-width: 260px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
}

.ticket-price-display {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
}

.qty-dropdown {
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  background-color: transparent;
  border: none;
  color: var(--text-dark);
  padding-right: 28px !important;
  background-position: right 8px center;
  background-size: 16px 12px;
}

.qty-dropdown:focus {
  background-color: transparent;
  color: var(--text-dark);
}

#btnBookTicketNext {
  background: var(--primary-gradient);
  border: none;
  padding: 14px 48px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  border-radius: 50px;
  box-shadow: 0 4px 15px rgba(115, 66, 235, 0.3) !important;
  transition: all 0.3s ease;
}

#btnBookTicketNext:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(115, 66, 235, 0.45) !important;
}

.modal-info-text .info-val {
  font-size: 14px;
  line-height: 1.4;
}

.modal-ticket-footer {
  border-color: #f1f5f9 !important;
}

.ticket-icon-footer {
  font-size: 24px;
}

/* Select2 customization for ticket quantity select dropdown */
.ticket-qty-price-box .select2-container {
  min-width: 90px;
}

.ticket-qty-price-box .select2-container--default .select2-selection--single {
  background-color: transparent !important;
  border: none !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding-right: 0 !important;
}

.ticket-qty-price-box .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--text-dark) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding-left: 0 !important;
  padding-right: 20px !important;
  line-height: 1.2 !important;
}

.ticket-qty-price-box .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 20px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  right: 0 !important;
  width: 15px !important;
}

.ticket-qty-price-box .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--text-dark) transparent transparent transparent !important;
  border-width: 5px 4px 0 4px !important;
  margin-left: -4px !important;
  margin-top: 1px !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
}

.ticket-qty-price-box .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent var(--text-dark) transparent !important;
  border-width: 0 4px 5px 4px !important;
  margin-top: -3px !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--primary-color) !important;
  color: white !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: #f1f5f9 !important;
  color: var(--text-dark) !important;
}

/* ==========================================================
   IdealJodi Matrimony - Vendors Page Styles
   ========================================================== */

/* Cinematic Hero Section */
.vendor-hero-section {
  position: relative;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  overflow: hidden;
}

.vendor-hero-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.65)), url('../images/onboarding_banner.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(20px);
  transform: scale(2.05);
  z-index: 0;
}

.vendor-hero-bg-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(115, 66, 235, 0.15) 0%, rgba(0, 0, 0, 0) 70%);
  z-index: 1;
  pointer-events: none;
}

.vendor-hero-content {
  position: relative;
  z-index: 2;
  color: var(--white);
  max-width: 850px;
  margin: 0 auto;
}

.vendor-tagline {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  display: inline-block;
  margin-bottom: 12px;
}

.vendor-main-title {
  font-family: var(--font-heading);
  font-size: 44px;
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 16px;
  color: var(--white);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.vendor-subtitle {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto 30px auto;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
}

/* Glassmorphism Floating Search Panel */
.search-panel-glass {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 60px;
  padding: 12px 16px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 15px;
  transition: all 0.4s ease;
}

.search-panel-glass:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
}

.search-panel-glass .search-field-group {
  flex: 1;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50px;
  padding: 8px 20px;
  color: var(--white);
  height: 56px;
  transition: all 0.3s ease;
  position: relative;
}

.search-panel-glass .search-field-group:focus-within {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.08);
}

.search-panel-glass .search-field-group iconify-icon {
  font-size: 22px;
  color: rgba(255, 255, 255, 0.7);
  margin-right: 12px;
  flex-shrink: 0;
}

.search-panel-glass .search-field-group input {
  background: transparent;
  border: none;
  color: var(--white);
  font-size: 14px;
  width: 100%;
  outline: none;
  font-weight: 500;
}

.search-panel-glass .search-field-group input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

/* Select2 Glassmorphism Custom Theme Styles */
.search-panel-glass .select2-container {
  width: 100% !important;
  flex-grow: 1;
}

.search-panel-glass .select2-container--default .select2-selection--single {
  background: transparent !important;
  border: none !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.search-panel-glass .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding-left: 0 !important;
  padding-right: 25px !important;
  line-height: 1.2 !important;
  text-align: left !important;
}

.search-panel-glass .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
}

.search-panel-glass .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 20px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  right: 0 !important;
  width: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.search-panel-glass .select2-container--default .select2-selection--single .select2-selection__arrow b {
  display: none !important;
  /* Hide original black arrow */
}

/* Custom white chevron arrow for Select2 */
.search-panel-glass .select2-container--default .select2-selection--single .select2-selection__arrow::after {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.8)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.3s ease;
  margin-top: 0px;
}

.search-panel-glass .select2-container--default.select2-container--open .select2-selection__arrow::after {
  transform: rotate(180deg);
}

/* Dropdown Results Box customization */
.select2-dropdown-custom {
  background: #1e1b29 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
  overflow: hidden !important;
}

.select2-dropdown-custom .select2-results__option {
  color: rgba(255, 255, 255, 0.8) !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
  transition: all 0.2s ease !important;
}

.select2-dropdown-custom .select2-results__option--highlighted[aria-selected] {
  background-color: var(--primary-color) !important;
  color: white !important;
}

.select2-dropdown-custom .select2-results__option[aria-selected=true] {
  background-color: rgba(115, 66, 235, 0.2) !important;
  color: white !important;
}

.search-panel-glass .btn-search-submit {
  background: var(--primary-gradient);
  color: var(--white);
  border: none;
  border-radius: 50px;
  padding: 0 35px;
  font-weight: 700;
  font-size: 15px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 10px 25px rgba(115, 66, 235, 0.35);
  flex-shrink: 0;
}

.search-panel-glass .btn-search-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 30px rgba(115, 66, 235, 0.45);
}

.search-panel-glass .btn-search-submit:active {
  transform: translateY(0);
}

/* Vendor Grid Header spacing */
.vendor-listing-section {
  background: #fcfbfe;
  padding: 40px 0;
}

.vendor-grid-header {
  margin-bottom: 45px;
}

.vendor-grid-header h2 {
  font-family: var(--font-heading);
  font-size: 38px;
  font-weight: 500;
  color: var(--text-dark);
}

.vendor-grid-header p {
  color: var(--text-muted);
  font-size: 15px;
  margin-top: 10px;
}

/* Vendor Card Style */
.vendor-card {
  background: var(--white);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.03);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  border: 1px solid rgba(0, 0, 0, 0.02);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.vendor-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 25px 50px rgba(115, 66, 235, 0.08);
  border-color: rgba(115, 66, 235, 0.12);
}

.vendor-card-img-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 130%;
  overflow: hidden;
  border-radius: 28px;
}

.vendor-card-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.vendor-card:hover .vendor-card-img {
  transform: scale(1.08);
}

.vendor-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.45) 45%, rgba(0, 0, 0, 0.1) 100%);
  z-index: 1;
}

/* Badges floating on card image */
.vendor-badge-top-left {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2;
}

.vendor-badge-top-right {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
}

.verified-pill {
  background: rgba(44, 142, 220, 0.85);
  /* secondary-color */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--white);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 6px 14px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  text-transform: uppercase;
}

.rating-pill {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffb800;
  /* accent-orange */
  font-size: 11px;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.rating-pill span {
  color: var(--white);
  font-weight: 600;
}

/* Bottom right floating View Details eye badge (Replaced Shortlist) */
.btn-vendor-view {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 3;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 22px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.btn-vendor-view:hover {
  background: var(--white);
  color: var(--primary-color);
  transform: scale(1.12);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
}

/* Card Content floating at the bottom of the image area */
.vendor-info-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 24px 75px 24px 24px;
  z-index: 2;
  color: var(--white);
  pointer-events: none;
}

.vendor-card-category {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--secondary-color);
  margin-bottom: 6px;
  display: block;
}

.vendor-card-name {
  font-family: var(--font-main);
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 8px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vendor-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  flex-wrap: wrap;
}

.vendor-card-loc {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.vendor-card-loc iconify-icon {
  font-size: 16px;
  color: var(--accent-pink);
}

.vendor-card-separator {
  opacity: 0.6;
}

.vendor-card-price {
  font-weight: 700;
  color: var(--white);
}

.vendor-card-price span {
  font-weight: 400;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
}

/* ==========================================================
   IdealJodi Matrimony - Horizontal Vendor Card Listing Styles
   ========================================================== */

.vendor-results-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding-bottom: 20px;
}

.results-count {
  font-size: 15px;
  color: var(--text-dark);
}

.sorting-select {
  background-color: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
  cursor: pointer;
  padding: 8px 35px 8px 18px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-size: 15px;
  background-position: right 15px center;
  background-repeat: no-repeat;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: all 0.3s ease;
}

.sorting-select:hover {
  border-color: var(--primary-color) !important;
}

.vendor-horizontal-card {
  position: relative;
  background: var(--white);
  border-radius: 24px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  display: flex;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.vendor-horizontal-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 45px rgba(115, 66, 235, 0.07);
  border-color: rgba(115, 66, 235, 0.12);
}

.vendor-horiz-img-area {
  position: relative;
  width: 35%;
  min-width: 280px;
  min-height: 250px;
  overflow: hidden;
}

.vendor-horiz-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.vendor-horizontal-card:hover .vendor-horiz-img {
  transform: scale(1.08);
}

.vendor-horiz-category-badge {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: var(--primary-gradient);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 6px 14px;
  border-radius: 30px;
  z-index: 2;
  box-shadow: 0 4px 10px rgba(115, 66, 235, 0.25);
  text-transform: uppercase;
}

.vendor-horiz-details-area {
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.vendor-horiz-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
}

.vendor-horiz-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-dark);
}

.vendor-horiz-rating {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vendor-horiz-rating .stars {
  display: flex;
  gap: 3px;
  color: var(--accent-orange);
}

.vendor-horiz-rating .stars iconify-icon {
  font-size: 16px;
}

.vendor-horiz-rating .reviews-count {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 600;
}

.vendor-horiz-location {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 13.5px;
  margin-top: 12px;
}

.vendor-horiz-location iconify-icon {
  color: var(--accent-pink);
  font-size: 18px;
}

.vendor-horiz-desc {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-top: 15px;
  margin-bottom: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vendor-horiz-info-tags {
  display: flex;
  gap: 50px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  background: #f8fafc;
  padding: 12px 20px;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.02);
}

.info-tag-item {
  font-size: 13px;
  color: var(--text-dark);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.info-tag-item iconify-icon {
  color: var(--primary-color);
  font-size: 16px;
}

.vendor-horiz-chips {
  display: flex;
  gap: 38px;
  flex-wrap: wrap;
  margin-bottom: 25px;
}

.chip-item {
  font-size: 11px;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-transform: uppercase;
  letter-spacing: 0.2px;
}

.chip-item.weddings {
  background: rgba(255, 107, 107, 0.08);
  color: var(--accent-pink);
}

.chip-item.verified {
  background: rgba(44, 142, 220, 0.08);
  color: var(--secondary-color);
}

.chip-item.response {
  background: rgba(16, 185, 129, 0.08);
  color: #10b981;
}

.chip-item.availability {
  background: rgba(115, 66, 235, 0.08);
  color: #7342eb;
}

.vendor-horiz-actions {
  display: flex;
  gap: 12px;
}

.btn-outline-details {
  border: 1px solid rgba(115, 66, 235, 0.25);
  color: var(--primary-color);
  background: transparent;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 24px;
  border-radius: 30px;
  text-align: center;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.btn-outline-details:hover {
  background: rgba(115, 66, 235, 0.04);
  border-color: var(--primary-color);
  transform: translateY(-1px);
}

.btn-primary-contact {
  background: var(--primary-gradient);
  color: var(--white);
  border: none;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 28px;
  border-radius: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 6px 15px rgba(115, 66, 235, 0.2);
  cursor: pointer;
}

.btn-primary-contact:hover {
  box-shadow: 0 10px 20px rgba(115, 66, 235, 0.35);
  transform: translateY(-2px);
}

/* Featured Vendor Badge */
.featured-vendor-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  background: var(--accent-orange);
  color: var(--text-dark);
  font-size: 10px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 10;
  box-shadow: 0 4px 10px rgba(255, 184, 0, 0.2);
}

/* ==========================================================
   IdealJodi Matrimony - Vendor Details Page Styling
   ========================================================== */

/* Breadcrumbs Custom styling */
.breadcrumb-item+.breadcrumb-item::before {
  color: #a0aec0;
}

.breadcrumb-item a {
  font-weight: 500;
  transition: color 0.2s ease;
}

.breadcrumb-item a:hover {
  color: var(--primary-color) !important;
}

/* Gallery Slider */
.featured-image-wrapper {
  height: 480px;
  background-color: #f1f5f9;
}

.featured-gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.2s ease;
  opacity: 1;
}

.carousel-control-prev-custom,
.carousel-control-next-custom {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  background: rgb(255 255 255 / 79%);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000000;
  font-size: 16px;
  z-index: 10;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  cursor: pointer;
}

.carousel-control-prev-custom:hover,
.carousel-control-next-custom:hover {
  background: #fff;
  color: var(--primary-color);
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.carousel-control-prev-custom {
  left: 20px;
}

.carousel-control-next-custom {
  right: 20px;
}

.thumbnail-gallery-container {
  padding: 2px 0;
}

.thumbnail-item {
  width: 110px;
  height: 76px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  flex-shrink: 0;
}

.thumbnail-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumbnail-item.active {
  border-color: var(--primary-color);
  box-shadow: 0 5px 12px rgba(115, 66, 235, 0.3);
  transform: scale(0.96);
}

.thumbnail-item:hover:not(.active) {
  opacity: 0.85;
  border-color: rgba(115, 66, 235, 0.4);
}

/* Header & Title Section */
.vendor-details-title {
  font-family: var(--font-heading);
  font-size: 32px;
  color: var(--text-dark);
  font-weight: 400;
  line-height: 1.25;
}

.vendor-details-rating .stars {
  color: #ffb800;
}

.badge-status-chip {
  background: #eef9ee;
  color: #16a34a;
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
}

.price-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
}

.price-val-card {
  background: #f8fafc;
  border: 1px solid rgba(0, 0, 0, 0.03);
  padding: 8px 16px;
  border-radius: 14px;
  display: inline-block;
}

.price-val {
  font-size: 20px;
  font-weight: 800;
  color: var(--primary-color);
}

.price-unit {
  font-size: 13px;
  color: var(--text-muted);
}

/* Description text expander */
.description-text-wrapper {
  position: relative;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  max-height: 500px;
}

.description-text-wrapper.collapsed {
  max-height: 105px;
}

.description-text-wrapper.collapsed::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 48px;
  background: linear-gradient(to top, #ffffff 15%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}

.btn-readmore {
  font-weight: 700;
  font-size: 14px;
  color: var(--primary-color);
  transition: gap 0.2s ease;
}

.btn-readmore:hover {
  color: #5b30c9;
}

.btn-readmore iconify-icon {
  transition: transform 0.3s ease;
}

.btn-readmore:hover iconify-icon {
  transform: translateY(2px);
}

/* Summary highlights */
.highlight-item-box {
  background: #f8fafc;
  border: 1px solid rgba(0, 0, 0, 0.03);
  transition: all 0.3s ease;
}

.highlight-item-box:hover {
  background: #fff;
  border-color: rgba(115, 66, 235, 0.12);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.02);
}

.highlight-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.highlight-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-dark);
}

.highlight-desc {
  font-size: 12.5px;
  color: var(--text-muted);
}

.bg-primary-light {
  background: rgba(115, 66, 235, 0.08) !important;
}

.bg-danger-light {
  background: rgba(255, 107, 107, 0.08) !important;
}

.bg-info-light {
  background: rgba(44, 142, 220, 0.08) !important;
}

.bg-success-light {
  background: rgba(22, 163, 74, 0.08) !important;
}

.bg-warning-light {
  background: rgba(255, 184, 0, 0.08) !important;
}

/* Sticky Sidebar elements */
.vendor-sidebar-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 30px;
  z-index: 100;
}

.sidebar-card {
  border: 1px solid rgba(0, 0, 0, 0.03);
  background: #fff;
}

.cta-booking-card {
  border: 1px solid rgba(115, 66, 235, 0.12) !important;
  box-shadow: 0 15px 40px rgba(115, 66, 235, 0.04) !important;
}

.btn-booking-cta {
  background: var(--primary-gradient);
  color: #fff;
  border: none;
  font-weight: 700;
  font-size: 15px;
  border-radius: 30px;
  box-shadow: 0 6px 20px rgba(115, 66, 235, 0.25);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-booking-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(115, 66, 235, 0.35);
  color: #fff;
}

.sidebar-card-title {
  font-size: 18px;
  color: var(--text-dark);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  padding-bottom: 12px;
}

.contact-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.phone-link,
.email-link,
.web-link {
  font-weight: 500;
  color: var(--text-muted);
  transition: all 0.2s ease;
}

.phone-link:hover,
.email-link:hover,
.web-link:hover {
  color: var(--primary-color) !important;
  transform: translateX(2px);
}

.phone-link {
  color: #16a34a !important;
}

.phone-link:hover {
  opacity: 0.85;
}

/* Updates Widget */
.update-item-box {
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.02);
}

.update-item-box:hover {
  transform: translateX(4px);
  background: #fff !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.02);
}

.update-item-title {
  font-size: 13px;
  line-height: 1.4;
}

/* Trust Widget */
.trust-card {
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.15) !important;
}

.bg-black-gradient {
  background: linear-gradient(135deg, #181523 0%, #08070b 100%);
}

.text-light-muted {
  color: rgba(255, 255, 255, 0.7);
}

.btn-trust-secondary {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  transition: all 0.3s ease;
}

.btn-trust-secondary:hover {
  background: #fff;
  color: #111;
  border-color: #fff;
  transform: translateY(-1px);
}


/* Reviews List elements */
.reviewer-avatar {
  width: 48px;
  height: 48px;
  border: 2px solid #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.reviewer-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
}

.reviewer-rating-stars {
  color: #ffb800;
}

.review-text {
  font-size: 14px;
  line-height: 1.6;
}

.btn-helpful-action {
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: #f8fafc;
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 600;
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.btn-helpful-action.active {
  background: rgba(22, 163, 74, 0.08);
  color: #16a34a;
  border-color: rgba(22, 163, 74, 0.2);
}

.btn-helpful-action:hover:not(.active) {
  background: #f1f5f9;
  color: var(--text-dark);
}

.btn-report-action {
  font-size: 11.5px;
  font-weight: 600;
  border: none;
  background: transparent;
  transition: color 0.2s ease;
}

.btn-report-action:hover {
  color: #ef4444 !important;
}

/* Pagination Custom */
.pagination-custom .page-link {
  width: 38px;
  height: 38px;
  padding: 0;
  color: var(--text-dark);
  border: 1px solid rgba(0, 0, 0, 0.06);
  font-weight: 600;
  font-size: 13.5px;
  transition: all 0.2s ease;
}

.pagination-custom .page-item.active .page-link {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
  box-shadow: 0 4px 10px rgba(115, 66, 235, 0.2);
}

.pagination-custom .page-link:hover:not(.active) {
  background: #f1f5f9;
  color: var(--primary-color);
}



/* Community Matrimonial Page Styles */
.community-page-section {
  background-color: #f8fafc;
}

/* Premium Dark Hero Banner */
.community-hero-section {
  background: linear-gradient(135deg, #181523 0%, #08070b 100%);
  padding: 40px 0 40px 0;
  position: relative;
  overflow: hidden;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.community-hero-section .glow-radial-1 {
  position: absolute;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(115, 66, 235, 0.15) 0%, transparent 70%);
  top: -100px;
  left: -50px;
  pointer-events: none;
}

.community-hero-section .glow-radial-2 {
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(44, 142, 220, 0.12) 0%, transparent 70%);
  bottom: -150px;
  right: -50px;
  pointer-events: none;
}

.text-gradient {
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 600;
  font-style: italic;
}

.community-banner-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.25;
  margin-bottom: 16px;
}

.community-banner-subtitle {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
  max-width: 580px;
}

/* Floating Statistics Container */
.community-stats-container {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.community-stat-box {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 16px 24px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 130px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.community-stat-box:hover {
  transform: translateY(-2px);
  border-color: rgba(115, 66, 235, 0.3);
}

.community-stat-box .stat-num {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.community-stat-box .stat-label {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 700;
}

/* Sidebar Toggle Card */
.community-toggle-card {
  background: #fff;
  border-radius: 24px;
  padding: 30px;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.02);
  border: 1px solid #edf2f7;
}

.toggle-tab-nav {
  display: flex;
  background: #f1f5f9;
  padding: 4px;
  border-radius: 50px;
  margin-bottom: 25px;
  border: none;
}

.toggle-tab-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 16px;
  font-size: 14px;
  font-weight: 700;
  color: #475569;
  background: transparent;
  border: none;
  border-radius: 50px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.toggle-tab-btn.active {
  background: var(--primary-gradient);
  color: #fff;
  box-shadow: 0 6px 15px rgba(115, 66, 235, 0.25);
}

.toggle-tab-btn iconify-icon {
  font-size: 16px;
}

/* Sidebar Widgets */
.sidebar-widget-card {
  background: #fff;
  border-radius: 24px;
  padding: 30px;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.02);
  border: 1px solid #edf2f7;
}

.widget-title-theme {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.widget-title-theme::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 18px;
  background: var(--primary-gradient);
  border-radius: 10px;
}

.widget-links-list {
  display: flex;
  flex-direction: column;
}

.widget-link-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f1f5f9;
  color: #475569;
  font-size: 14.5px;
  font-weight: 600;
  transition: all 0.3s ease;
  text-decoration: none;
}

.widget-link-item:hover {
  color: var(--primary-color);
  padding-left: 4px;
}

.widget-link-item .chevron-icon {
  font-size: 16px;
  color: #94a3b8;
  transition: all 0.3s ease;
}

.widget-link-item:hover .chevron-icon {
  color: var(--primary-color);
  transform: translateX(4px);
}

.widget-more-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 0 0 0;
  background: transparent;
  border: none;
  color: var(--primary-color);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  transition: all 0.3s ease;
}

.widget-more-link:hover {
  color: #5067e4;
  gap: 10px;
}

.city-card-name {
  font-size: 14px;
}

.widget-more-link iconify-icon {
  font-size: 14px;
  transition: transform 0.3s ease;
}

.widget-more-link.expanded iconify-icon {
  transform: rotate(180deg);
}

/* Right Content: City Matrimonial */
.city-header-bar {
  background: var(--primary-gradient);
  border-radius: 16px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 25px rgba(115, 66, 235, 0.2);
  margin-bottom: 25px;
}

.city-header-icon-box {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  flex-shrink: 0;
}

.city-header-title {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  margin: 0;
}

/* Premium Redesigned City Card */
.city-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 18px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #edf2f7;
  color: #334155;
  font-size: 15px;
  font-weight: 700;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.01), 0 2px 4px -1px rgba(0, 0, 0, 0.006);
}

.city-card-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.city-card-icon-box {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
  font-size: 15px;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.city-card-name {
  transition: all 0.3s ease;
}

.city-card-arrow {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #f8fafc;
  border: 1px solid #edf2f7;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 12px;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

/* Inactive Hover State */
.city-card:hover:not(.active) {
  background: #fff;
  border-color: var(--primary-color);
  transform: translateY(-4px);
  box-shadow: 0 12px 25px rgba(115, 66, 235, 0.08);
}

.city-card:hover:not(.active) .city-card-icon-box {
  background: var(--primary-gradient);
  color: #fff;
}

.city-card:hover:not(.active) .city-card-name {
  color: var(--primary-color);
}

.city-card:hover:not(.active) .city-card-arrow {
  background: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
  transform: translateX(2px);
}

/* Active State */
.city-card.active {
  background: var(--primary-gradient);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 10px 25px rgba(115, 66, 235, 0.25);
}

.city-card.active .city-card-icon-box {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.city-card.active .city-card-name {
  color: #fff;
}

.city-card.active .city-card-arrow {
  background: rgba(255, 255, 255, 0.2);
  border-color: transparent;
  color: #fff;
}

/* Community Detail Page Styles */
.community-banner-img-wrap {
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid #edf2f7;
  margin-bottom: 25px;
  aspect-ratio: 26 / 9;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

.community-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-heading-box {
  margin-bottom: 30px;
}

.detail-section-title {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 8px;
}

.detail-section-desc {
  font-size: 15px;
  color: #64748b;
  line-height: 1.6;
}

.gender-tab-nav {
  display: flex;
  background: #f1f5f9;
  padding: 4px;
  border-radius: 50px;
  width: 100%;
  margin-bottom: 30px;
  border: none;
}

.gender-tab-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 700;
  color: #475569;
  background: transparent;
  border: none;
  border-radius: 50px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.gender-tab-btn.active {
  background: var(--primary-gradient);
  color: #fff;
  box-shadow: 0 6px 15px rgba(115, 66, 235, 0.25);
}

.simple-profile-card {
  text-decoration: none;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #edf2f7;
  background: #fff;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.01), 0 2px 4px -1px rgba(0, 0, 0, 0.006);
}

.simple-profile-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 25px rgba(115, 66, 235, 0.08);
  border-color: var(--primary-color);
}

.profile-card-img-wrap {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  width: 100%;
}

.profile-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.simple-profile-card:hover .profile-card-img-wrap img {
  transform: scale(1.05);
}

.profile-card-footer {
  padding: 16px;
  text-align: center;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fff;
  border-top: 1px solid #f1f5f9;
}

.profile-card-name {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 4px;
}

.profile-card-meta {
  font-size: 13px;
  color: #64748b;
  margin: 0;
}

.plan-badge {
  position: absolute;
  top: 15px;
  left: 15px;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 800;
  border-radius: 6px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  z-index: 2;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.plan-badge.diamond {
  background: #e0f2fe;
  color: #0369a1;
}

.plan-badge.silver {
  background: #f3e8ff;
  color: #6b21a8;
}

.plan-badge.gold {
  background: #fef3c7;
  color: #b45309;
}

.plan-badge.free {
  background: #f1f5f9;
  color: #475569;
}

/* CMS Pages Style Blocks */
.cms-hero-section {
  background: var(--primary-gradient);
  padding: 50px 0;
  position: relative;
  overflow: hidden;
  color: #fff;
  text-align: center;
}

.cms-hero-title {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 600;
  margin: 0;
  color: #fff;
}

.cms-hero-subtitle {
  font-size: 15px;
  opacity: 0.85;
  margin-top: 8px;
  margin-bottom: 0;
}

.cms-sidebar-card {
  background: #fff;
  border: 1px solid #edf2f7;
  border-radius: 20px;
  padding: 24px;
}

.cms-sidebar-title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f1f5f9;
}

.cms-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cms-sidebar-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #475569;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.25s ease;
  background: #f8fafc;
}

.cms-sidebar-link:hover {
  color: var(--primary-color);
  background: #edf2f7;
  transform: translateX(3px);
}

.cms-sidebar-link.active {
  background: var(--primary-gradient);
  color: #fff;
  box-shadow: 0 4px 12px rgba(115, 66, 235, 0.12);
}

.cms-content-card {
  background: #fff;
  border: 1px solid #edf2f7;
  border-radius: 24px;
  padding: 40px;

}

.cms-content-title {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 24px;
}

.cms-text-block p {
  font-size: 15px;
  color: #475569;
  line-height: 1.7;
  margin-bottom: 18px;
}

.cms-text-block h3 {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-dark);
  margin-top: 28px;
  margin-bottom: 12px;
}

.cms-text-block ul,
.cms-text-block ol {
  margin-bottom: 20px;
  padding-left: 20px;
}

.cms-text-block li {
  font-size: 15px;
  color: #475569;
  line-height: 1.7;
  margin-bottom: 8px;
}

/* Enquiry Modal Custom Styles */
.enquiry-event-chips .btn-check+.btn-outline-primary {
  color: #7342eb !important;
  border-color: #e2e8f0 !important;
  background-color: #f8fafc !important;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 50px;
  transition: all 0.25s ease;
}

.enquiry-event-chips .btn-check:checked+.btn-outline-primary {
  background: var(--primary-gradient) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 4px 15px rgba(115, 66, 235, 0.25) !important;
}

.enquiry-event-chips .btn-outline-primary:hover {
  background-color: rgba(115, 66, 235, 0.05) !important;
  color: #7342eb !important;
  border-color: #7342eb !important;
}

.captcha-code {
  font-weight: 700;
  background: linear-gradient(135deg, #1e293b, #475569);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 5px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   Animated Success Registration Modal Styles
   ========================================================================== */
.success-checkmark-svg-wrap {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.checkmark-svg {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: block;
  stroke-width: 4;
  stroke: #10b981;
  stroke-miterlimit: 10;
  box-shadow: inset 0px 0px 0px #10b981;
}

#successRegistrationModal.show .checkmark-svg {
  animation: fill-checkmark .4s ease-in-out .4s forwards, scale-checkmark .3s ease-in-out .9s both;
}

.checkmark-circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 4;
  stroke-miterlimit: 10;
  stroke: #10b981;
  fill: none;
}

#successRegistrationModal.show .checkmark-circle {
  animation: stroke-circle 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark-check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  stroke: #fff;
}

#successRegistrationModal.show .checkmark-check {
  animation: stroke-check 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

/* Sparkles/Confetti Blast */
.checkmark-sparkles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.sparkle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #10b981;
  opacity: 0;
}

#successRegistrationModal.show .sparkle-1 {
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  animation: sparkle-out-1 1s ease-out 0.8s forwards;
}

#successRegistrationModal.show .sparkle-2 {
  top: 50%;
  right: 15%;
  transform: translateY(-50%);
  animation: sparkle-out-2 1s ease-out 0.8s forwards;
}

#successRegistrationModal.show .sparkle-3 {
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%);
  animation: sparkle-out-3 1s ease-out 0.8s forwards;
}

#successRegistrationModal.show .sparkle-4 {
  top: 50%;
  left: 15%;
  transform: translateY(-50%);
  animation: sparkle-out-4 1s ease-out 0.8s forwards;
}

#successRegistrationModal.show .sparkle-5 {
  top: 25%;
  right: 25%;
  animation: sparkle-out-5 1s ease-out 0.8s forwards;
}

#successRegistrationModal.show .sparkle-6 {
  bottom: 25%;
  left: 25%;
  animation: sparkle-out-6 1s ease-out 0.8s forwards;
}

/* Staggered Modal Content Entrance Animations */
#successRegistrationModal .modal-title,
#successRegistrationModal .modal-body>p,
#successRegistrationModal .ticket-info-wash-box,
#successRegistrationModal .btn-login-submit {
  opacity: 0;
}

#successRegistrationModal.show .modal-title {
  animation: success-fade-in-up 0.5s ease-out 0.6s both;
}

#successRegistrationModal.show .modal-body>p {
  animation: success-fade-in-up 0.5s ease-out 0.8s both;
}

#successRegistrationModal.show .ticket-info-wash-box {
  animation: success-fade-in-up 0.5s ease-out 1.0s both;
}

#successRegistrationModal.show .btn-login-submit {
  animation: success-fade-in-up 0.5s ease-out 1.2s both;
}

/* Keyframes */
@keyframes stroke-circle {
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes stroke-check {
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes fill-checkmark {
  100% {
    box-shadow: inset 0px 0px 0px 40px #10b981;
  }
}

@keyframes scale-checkmark {

  0%,
  100% {
    transform: none;
  }

  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}

@keyframes sparkle-out-1 {
  0% {
    transform: translate(-50%, 0) scale(0);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -25px) scale(1.5);
    opacity: 0;
    background-color: #7342eb;
  }
}

@keyframes sparkle-out-2 {
  0% {
    transform: translate(0, -50%) scale(0);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: translate(25px, -50%) scale(1.5);
    opacity: 0;
    background-color: #7342eb;
  }
}

@keyframes sparkle-out-3 {
  0% {
    transform: translate(-50%, 0) scale(0);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: translate(-50%, 25px) scale(1.5);
    opacity: 0;
    background-color: #7342eb;
  }
}

@keyframes sparkle-out-4 {
  0% {
    transform: translate(0, -50%) scale(0);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: translate(-25px, -50%) scale(1.5);
    opacity: 0;
    background-color: #7342eb;
  }
}

@keyframes sparkle-out-5 {
  0% {
    transform: translate(0, 0) scale(0);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: translate(18px, -18px) scale(1.5);
    opacity: 0;
    background-color: #7342eb;
  }
}

@keyframes sparkle-out-6 {
  0% {
    transform: translate(0, 0) scale(0);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: translate(-18px, 18px) scale(1.5);
    opacity: 0;
    background-color: #7342eb;
  }
}

@keyframes success-fade-in-up {
  0% {
    opacity: 0;
    transform: translateY(15px);
  }

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

/* ==========================================================================
   FAQs Page Redesign & Interactive Styles
   ========================================================================== */

/* Search bar styling */
.faq-search-container {
  max-width: 600px;
  margin: 25px auto 0 auto;
  position: relative;
}

.faq-search-wrapper {
  position: relative;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50px;
  padding: 6px 6px 6px 24px;
  display: flex;
  align-items: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
}

.faq-search-wrapper:focus-within {
  background: rgba(255, 255, 255, 0.95);
  border-color: #fff;
  box-shadow: 0 10px 30px rgba(115, 66, 235, 0.2);
}

.faq-search-icon {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.7);
  margin-right: 12px;
  display: flex;
  align-items: center;
  transition: color 0.3s ease;
}

.faq-search-wrapper:focus-within .faq-search-icon {
  color: var(--primary-color);
}

.faq-search-input {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  width: 100%;
  padding: 8px 0;
  outline: none;
}

.faq-search-wrapper:focus-within .faq-search-input {
  color: var(--text-dark);
}

.faq-search-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.3s ease;
}

.faq-search-wrapper:focus-within .faq-search-input::placeholder {
  color: var(--text-muted);
}

/* Category Filter Tabs */
.faq-tabs-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
  padding-bottom: 5px;
}

.faq-tab-btn {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #475569;
  font-size: 13.5px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 6px;
}

.faq-tab-btn:hover {
  background: #e2e8f0;
  color: var(--text-dark);
}

.faq-tab-btn.active {
  background: var(--primary-gradient);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px rgba(115, 66, 235, 0.2);
}

.faq-tab-btn iconify-icon {
  font-size: 16px;
}

/* Accordion Styling */
.faq-accordion-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-accordion-item {
  border: 1px solid #edf2f7;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-accordion-item:hover {
  border-color: rgba(115, 66, 235, 0.3);
  box-shadow: 0 10px 25px rgba(115, 66, 235, 0.04);
}

.faq-accordion-header {
  width: 100%;
  padding: 20px 24px;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  cursor: pointer;
  outline: none;
}

.faq-header-content {
  display: flex;
  align-items: center;
  gap: 14px;
}

.faq-icon-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(115, 66, 235, 0.06);
  color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.faq-accordion-item.active .faq-icon-circle {
  background: var(--primary-gradient);
  color: #fff;
}

.faq-question {
  font-family: var(--font-main);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
  transition: color 0.3s ease;
}

.faq-accordion-item.active .faq-question {
  color: var(--primary-color);
}

.faq-toggle-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #f8fafc;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.faq-accordion-item.active .faq-toggle-icon {
  transform: rotate(180deg);
  background: var(--primary-color);
  color: #fff;
}

.faq-accordion-collapse {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-accordion-body {
  padding: 0 24px 24px 74px;
  font-size: 14.5px;
  line-height: 1.65;
  color: #475569;
}


/* Call To Action Banner */
.faq-support-cta {
  margin-top: 45px;
  background: linear-gradient(135deg, rgba(115, 66, 235, 0.03) 0%, rgba(44, 142, 220, 0.03) 100%);
  border: 1px dashed rgba(115, 66, 235, 0.2);
  border-radius: 20px;
  padding: 30px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.cta-icon-stack {
  position: relative;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-gradient);
  color: #fff;
  border-radius: 50%;
  font-size: 26px;
  box-shadow: 0 8px 20px rgba(115, 66, 235, 0.2);
}

.faq-support-cta .cta-title {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0;
}

.faq-support-cta .cta-desc {
  font-size: 14.5px;
  color: #64748b;
  max-width: 480px;
  margin: 0;
}

.btn-cta-contact {
  background: var(--primary-gradient);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 50px;
  border: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(115, 66, 235, 0.15);
}

.btn-cta-contact:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(115, 66, 235, 0.25);
  color: #fff;
}

/* ==========================================================================
   Help Center Page Styles
   ========================================================================== */

.help-page-section {
  padding: 40px 0;
  background-color: #f8fafc;
}

/* Suggestion Chips */
.suggestion-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.suggestion-chip {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.suggestion-chip:hover {
  background: rgba(115, 66, 235, 0.05);
  border-color: var(--primary-color);
  color: var(--primary-color);
}

/* Category Dropdown Styling to match other pages */
.help-select-input {
  background-color: #f9f9f9;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  padding: 14px 20px;
  height: 51px;
  width: 100%;
  color: var(--text-dark);
  outline: none;
  transition: all 0.3s ease;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 16px;
}

.help-select-input:focus {
  border-color: var(--primary-color);
  background-color: #fff;
}

/* Textarea min height and custom height */
.help-textarea {
  min-height: 140px;
  resize: vertical;
}

/* Uploaded files preview list */
.file-list {
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.file-item {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 10px 16px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
}

.file-item-left {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-dark);
}

.file-item-icon {
  font-size: 18px;
  color: var(--primary-color);
  display: flex;
}

.btn-remove-file {
  background: none;
  border: none;
  color: #ef4444;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  padding: 0;
}

/* Priority Radio Selector */
.priority-radio-group {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.priority-btn-label {
  border: 1px solid #e8e8e8;
  background: #f9f9f9;
  border-radius: 12px;
  padding: 14px 10px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.priority-radio-input {
  display: none;
}

/* Checked States */
.priority-radio-input:checked+.priority-btn-label.low {
  background: #f0fdf4;
  border-color: #22c55e;
  color: #15803d;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.15);
}

.priority-radio-input:checked+.priority-btn-label.normal {
  background: #eff6ff;
  border-color: #3b82f6;
  color: #1d4ed8;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.priority-radio-input:checked+.priority-btn-label.high {
  background: #fffbeb;
  border-color: #f59e0b;
  color: #b45309;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
}

.priority-radio-input:checked+.priority-btn-label.urgent {
  background: #fef2f2;
  border-color: #ef4444;
  color: #b91c1c;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
}

/* Background light trans utilities for sidebar */
.bg-success-trans {
  background: rgba(22, 163, 74, 0.08) !important;
  color: #16a34a !important;
}

.bg-primary-trans {
  background: rgba(115, 66, 235, 0.08) !important;
  color: #7342eb !important;
}

.bg-info-trans {
  background: rgba(59, 130, 246, 0.08) !important;
  color: #3b82f6 !important;
}

.bg-warning-trans {
  background: rgba(245, 158, 11, 0.08) !important;
  color: #f59e0b !important;
}

/* Spin Keyframe and Helper for Loading State */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 0.8s linear infinite;
  display: inline-block;
  vertical-align: middle;
}

/* Advertisement Form & Captcha Custom Styles */
.ad-select-width {
  width: 100%;
}

.ad-preview-container {
  height: 100%;
}

.ad-banner-preview-img {
  max-height: 120px;
  object-fit: contain;
}

.ad-status-text {
  font-size: 14px;
}

.captcha-wrapper-box {
  background-color: #f1f5f9;
  border: 1px solid #e8e8e8;
  height: 50px;
}

.captcha-text-nocopy {
  user-select: none;
}

.btn-captcha-refresh {
  font-size: 18px;
  text-decoration: none;
}

.ad-cropper-wrapper {
  max-height: 450px;
  min-height: 300px;
}

.ad-crop-img {
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

.btn-cropper-cancel {
  border: 1px solid #cbd5e1 !important;
}

/* ==========================================================================
   Pricing Plans Page Styles
   ========================================================================== */
.bg-light-gradient {
  background: linear-gradient(180deg, #f8fafc 0%, #eff6ff 100%);
}

.pricing-card {
  background: #ffffff;
  border: 1px solid #edf2f7;
  border-radius: 28px;
  padding: 40px 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.pricing-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(115, 66, 235, 0.08);
  border-color: rgba(115, 66, 235, 0.15);
}

.pricing-card.highlighted {
  background: linear-gradient(135deg, #7342eb 0%, #2c8edc 100%);
  border: none;
  box-shadow: 0 20px 40px rgba(115, 66, 235, 0.25);
  transform: scale(1.03);
  z-index: 2;
}

.pricing-card.highlighted:hover {
  transform: translateY(-8px) scale(1.04);
  box-shadow: 0 30px 60px rgba(115, 66, 235, 0.35);
}

.pricing-card .plan-badge {
  position: static !important;
  display: inline-block;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 1px;
  z-index: auto !important;
  box-shadow: none !important;
}

.pricing-card .plan-badge.starter {
  background: #eef2ff;
  color: #5562e5;
}

.pricing-card .plan-badge.silver {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff !important;
}

.pricing-card .plan-badge.diamond {
  background: #f0fdf4;
  color: #16a34a;
}

/* Color overrides for highlighted plan card elements to fix readability */
.pricing-card.highlighted .plan-title {
  color: #ffffff !important;
}

.pricing-card.highlighted .plan-desc {
  color: rgba(255, 255, 255, 0.8) !important;
}

.pricing-card.highlighted .plan-price-wrapper,
.pricing-card.highlighted .plan-price,
.pricing-card.highlighted .plan-currency {
  color: #ffffff !important;
}

.pricing-card.highlighted .plan-duration {
  color: rgba(255, 255, 255, 0.7) !important;
}

.pricing-card.highlighted .features-title {
  color: rgba(255, 255, 255, 0.7) !important;
}

.pricing-card.highlighted .plan-features-list li {
  color: #ffffff !important;
}

.pricing-card.highlighted .plan-features-list li iconify-icon {
  color: #ffffff !important;
}

.badge-popular {
  background: #ffb800;
  color: #111111;
  font-size: 11px;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 50px;
  letter-spacing: 0.5px;
}

.plan-title {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 600;
  color: var(--text-dark);
}

.plan-desc {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 8px;
}

.plan-price-wrapper {
  display: flex;
  align-items: baseline;
}

.plan-currency {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 600;
  margin-right: 4px;
}

.plan-price {
  font-family: var(--font-heading);
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
}

.plan-duration {
  font-size: 15px;
  color: var(--text-muted);
  margin-left: 6px;
}

.card-divider {
  border: 0;
  height: 1px;
  background: #f1f5f9;
  margin: 30px 0;
}

.features-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-dark);
  letter-spacing: 1.5px;
  display: block;
}

.plan-features-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.plan-features-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: var(--text-dark);
}

.pricing-card.highlighted .plan-features-list li {
  color: rgba(255, 255, 255, 0.9);
}

.plan-features-list li span {
  line-height: 1.4;
}

.check-icon {
  font-size: 18px;
  color: #10b981;
  margin-top: 2px;
}

/* Plan Button styles */
.btn-plan-outline {
  display: inline-flex;
  align-items: center;
  padding: 14px 28px;
  border-radius: 50px;
  border: 2px solid #7342eb;
  color: #7342eb !important;
  font-weight: 700;
  font-size: 15px;
  transition: all 0.3s ease;
  background: transparent;
  text-decoration: none;
}

.btn-plan-outline:hover {
  background: var(--primary-gradient);
  color: #ffffff !important;
  border-color: transparent;
  box-shadow: 0 10px 20px rgba(115, 66, 235, 0.25);
  transform: translateY(-2px);
}

.btn-plan-filled {
  display: inline-flex;
  align-items: center;
  padding: 14px 28px;
  border-radius: 50px;
  background: #ffffff;
  color: #7342eb !important;
  font-weight: 700;
  font-size: 15px;
  transition: all 0.3s ease;
  border: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  gap: 8px;
  text-decoration: none;
}

.btn-plan-filled:hover {
  background: #f8fafc;
  color: #5562e5 !important;
  box-shadow: 0 10px 25px rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

/* Payment Section Styling */
.payment-option-divider-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 70px 0 45px;
}

.payment-option-divider-wrapper::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: #e2e8f0;
  z-index: 1;
}

.payment-option-divider-badge {
  position: relative;
  z-index: 2;
  background: #7342eb;
  color: #ffffff;
  padding: 10px 26px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 15px rgba(115, 66, 235, 0.25);
}

.payment-method-card {
  background: #ffffff;
  border: 1px solid #edf2f7;
  border-radius: 24px;
  padding: 35px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.01);
  transition: all 0.3s ease;
}

.payment-method-card:hover {
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.04);
  border-color: rgba(44, 142, 220, 0.15);
}

.payment-method-title {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-dark);
}

.payment-method-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
  margin-bottom: 0;
}

.qr-code-box {
  width: 190px;
  height: 190px;
  border-color: #f1f5f9 !important;
  flex-shrink: 0;
}

.upi-text {
  font-size: 20px;
  letter-spacing: 0.5px;
}

.copy-field-container {
  border-color: #e2e8f0 !important;
  max-width: 100%;
}

.copy-text-value {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-copy-action {
  background: #7342eb;
  color: #ffffff;
  font-weight: 600;
  font-size: 13px;
  border: none;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-copy-action:hover {
  background: #2c8edc;
  color: #ffffff;
}

.bank-row {
  border-color: #f1f5f9 !important;
}

.bank-label {
  font-size: 14px;
}

.bank-value {
  font-size: 14px;
}

.copy-icon-action {
  color: #7342eb;
  font-size: 16px;
  transition: color 0.2s ease;
}

.copy-icon-action:hover {
  color: #2c8edc;
}

.payment-desc {
  font-size: 14px;
}

/* ==========================================================================
   Checkout Page Custom Styles
   ========================================================================== */
.checkout-card {
  background: #ffffff;
  border: 1px solid #edf2f7;
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.01);
  transition: all 0.3s ease;
}

.checkout-card:hover {
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.03);
}

.checkout-card-title {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-dark);
}

.checkout-addon-item {
  border-color: #edf2f7 !important;
  background: #ffffff;
  transition: all 0.25s ease;
}

.checkout-addon-item:hover {
  border-color: rgba(115, 66, 235, 0.25) !important;
  background: #fafafc;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

.addon-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
}

.addon-desc {
  font-size: 12.5px;
  color: var(--text-muted);
}

.addon-price {
  font-size: 16px;
  color: var(--text-dark);
}

/* Custom Checkbox Wrapper */
.custom-checkbox-wrapper {
  position: relative;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.custom-checkbox-wrapper input[type="checkbox"] {
  display: none;
}

.custom-checkbox-wrapper .checkbox-box {
  width: 24px;
  height: 24px;
  border: 2px solid #cbd5e1;
  border-radius: 50%;
  cursor: pointer;
  display: block;
  transition: all 0.25s ease;
  position: relative;
}

.custom-checkbox-wrapper input[type="checkbox"]:checked+.checkbox-box {
  background: #10b981;
  border-color: #10b981;
}

.custom-checkbox-wrapper input[type="checkbox"]:checked+.checkbox-box::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 4px;
  width: 5px;
  height: 10px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.change-plan-link {
  text-decoration: none;
  transition: color 0.25s ease;
}

.change-plan-link:hover {
  color: var(--secondary-color) !important;
}

.invoice-row {
  border-color: #f1f5f9 !important;
}

.invoice-label {
  font-size: 14.5px;
}

.invoice-value {
  font-size: 14.5px;
}

.btn-checkout-pay {
  background: var(--primary-gradient);
  color: #ffffff !important;
  font-weight: 700;
  font-size: 16px;
  border-radius: 50px;
  border: none;
  box-shadow: 0 4px 15px rgba(115, 66, 235, 0.35);
  transition: all 0.3s ease;
  text-decoration: none;
}

.btn-checkout-pay:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(115, 66, 235, 0.45);
}

/* Coupon Card design */
.coupon-card {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  border: 1px solid #edf2f7;
  height: 100%;
}

.coupon-left {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  width: 100px;
  flex-shrink: 0;
  position: relative;
}

.coupon-left::after {
  content: "";
  position: absolute;
  right: -5px;
  top: 0;
  bottom: 0;
  width: 10px;
  background-image: radial-gradient(circle, transparent 4px, #ffffff 4px);
  background-size: 10px 14px;
}

.coupon-right {
  border-left: 1px dashed #cbd5e1;
}

.coupon-code-title {
  font-size: 16px;
}

.coupon-desc-txt {
  line-height: 1.4;
}

.coupon-save-val {
  font-size: 13.5px;
}

/* Modal Icons and Alert styles */
.success-icon-box {
  width: 80px;
  height: 80px;
  background: #e6fbf3;
  color: #10b981;
  font-size: 80px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.failed-icon-box {
  width: 80px;
  height: 80px;
  background: #fdf2f2;
  color: #ef4444;
  font-size: 80px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.success-icon-box iconify-icon,
.failed-icon-box iconify-icon {
  display: block;
}

.payment-details-box {
  border: 1px solid #e2e8f0;
}

.checkout-promo-wrapper .input-icon-left {
  top: 50% !important;
}

.btn-apply-coupon {
  background: var(--primary-color);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  font-weight: 700;
  font-size: 15px;
  height: 50px;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.btn-apply-coupon:hover {
  background: var(--secondary-color);
  color: #ffffff;
}

.btn-browse-coupons {
  background: #ffffff;
  color: var(--text-dark);
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  font-size: 20px;
  width: 66px !important;
  height: 50px;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.btn-browse-coupons:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

/* Circular Checkbox Override */
.custom-checkbox-label.checkbox-circle .checkbox-box {
  border-radius: 50% !important;
}

/* Common Dashboard Section Header Styles */

.section-title {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 600;
  color: var(--text-dark);
}

.section-subtitle {
  font-family: var(--font-main);
  font-size: 14px;
  color: var(--text-muted);
}

.btn-select-all {
  background: #fff;
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 14px;
  padding: 10px 14px;
  border-radius: 50px;
  transition: all 0.3s ease;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}

.btn-select-all:hover {
  background: var(--primary-color);
  color: #fff;
}

.btn-select-all .action-check-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--primary-color);
  background: transparent;
  color: #fff;
  font-size: 10px;
  transition: all 0.3s ease;
}

.btn-select-all input:checked~.action-check-circle {
  background: var(--primary-color);
  border-color: var(--primary-color);
}

.btn-select-all input:not(:checked)~.action-check-circle iconify-icon {
  opacity: 0;
  transform: scale(0.5);
}

.btn-select-all input:checked~.action-check-circle iconify-icon {
  opacity: 1;
  transform: scale(1);
}

.btn-select-all .action-check-circle iconify-icon {
  transition: all 0.2s ease;
}

.btn-select-all:hover .action-check-circle {
  border-color: #fff;
}

.btn-select-all:hover input:checked~.action-check-circle {
  background: #fff;
  border-color: #fff;
  color: var(--primary-color);
}

.btn-select-all:hover input:checked~.action-check-circle iconify-icon {
  color: var(--primary-color);
}

.btn-delete-selected {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.15);
  color: #ef4444;
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 14px;
  padding: 10px 14px;
  border-radius: 50px;
  transition: all 0.3s ease;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-delete-selected:hover {
  background: #ef4444;
  color: #fff;
  border-color: #ef4444;
}

/* Received requests list (List layout) */
.received-requests-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 20px;
}

.received-request-item {
  background: #fff;
  border: 1px solid #edf2f7;
  border-radius: 20px;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01);
  margin-top: 12px;
}

.received-request-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.04);
  border-color: #e2e8f0;
}

.received-request-avatar-wrap {
  flex-shrink: 0;
}

.received-request-avatar {
  width: 68px;
  height: 68px;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.received-request-details {
  flex-grow: 1;
  min-width: 0;
}

.received-request-name {
  font-family: var(--font-main);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 6px;
}

.received-request-info {
  font-family: var(--font-main);
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 5px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.badge-pending {
  display: inline-flex;
  align-items: center;
  background: rgba(245, 158, 11, 0.08);
  color: #d97706;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 3px 10px;
  border-radius: 50px;
}

.received-request-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-accept-request {
  background: var(--primary-gradient);
  color: #fff;
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 14px;
  padding: 9px 24px;
  border: none;
  border-radius: 50px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(85, 98, 229, 0.2);
  cursor: pointer;
}

.btn-accept-request:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(85, 98, 229, 0.3);
}

.btn-reject-request {
  background: #fff;
  border: 1px solid #cbd5e1;
  color: var(--text-dark);
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 14px;
  padding: 9px 24px;
  border-radius: 50px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.btn-reject-request:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  transform: translateY(-2px);
}

/* Sent requests grid (Grid layout) */
.sent-requests-grid {
  margin-top: 20px;
}

.sent-request-card {
  background: #fff;
  border: 1px solid #edf2f7;
  border-radius: 24px;
  padding: 18px;
  display: flex;
  gap: 18px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01);
}

.sent-request-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
  border-color: #e2e8f0;
}

.sent-request-photo-wrap {
  width: 125px;
  height: 125px;
  flex-shrink: 0;
  position: relative;
  border-radius: 18px;
  overflow: hidden;
}

.sent-request-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px;
  transition: all 0.3s ease;
}

.sent-request-photo.style-locked {
  filter: blur(5px) grayscale(20%);
}

.photo-lock-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
}

.lock-icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  color: #ef4444;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.sent-request-card-info {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.sent-request-name {
  font-family: var(--font-main);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 2px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.badge-request-status {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 50px;
  margin-bottom: 0px;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  z-index: 1 !important;
  margin-top: 8px;
}

.badge-status-rejected {
  background: rgb(245 11 11 / 8%);
  color: #d90606;
}

.badge-status-pending {
  background: rgba(245, 158, 11, 0.08);
  color: #d97706;
}

.badge-status-accepted {
  background: rgba(16, 185, 129, 0.08);
  color: #059669;
}

.badge-status-shortlisted {
  background: rgba(245, 158, 11, 0.08);
  color: #d97706;
}

.badge-status-viewed {
  background: rgba(85, 98, 229, 0.08);
  color: var(--primary-color);
}

.btn-card-menu {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 20px;
  padding: 0;
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s;
}

.btn-card-menu:hover {
  color: var(--text-dark);
}

.sent-request-meta {
  font-family: var(--font-main);
  font-size: 13px;
  line-height: 1.4;
}

.sent-request-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-card-action {
  flex-grow: 1;
  background: var(--primary-color);
  color: #fff;
  border: none;
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 50px;
  transition: all 0.2s ease;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(85, 98, 229, 0.1);
  text-align: center;
}

.btn-card-action:hover {
  background: var(--secondary-color);
  transform: translateY(-1px);
  box-shadow: 0 6px 15px rgba(44, 142, 220, 0.2);
}

.btn-card-action-accepted {
  background: var(--primary-gradient);
  box-shadow: 0 4px 10px rgba(115, 66, 235, 0.15);
}

.btn-card-action-accepted:hover {
  background: linear-gradient(90deg, #8150f5 0%, #3ca0ee 100%);
  box-shadow: 0 6px 15px rgba(115, 66, 235, 0.25);
}

.btn-card-delete {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.btn-card-delete:hover {
  color: #ef4444;
  border-color: #fecdd3;
  background: #fff5f5;
  transform: translateY(-1px);
}

/* Big container card behind photo requests list/grid */
.profile-content-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(115, 66, 235, 0.02);
  border: 1px solid #f1f5f9;
  margin-bottom: 30px;
}

/* Hover refinements for sent and received cards inside the container */
.sent-request-card {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.015);
}

.sent-request-card:hover {
  border-color: var(--primary-color);
  box-shadow: 0 12px 30px rgba(115, 66, 235, 0.06);
}

.received-request-item {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.015);
}

.received-request-item:hover {
  border-color: var(--primary-color);
  box-shadow: 0 12px 30px rgba(115, 66, 235, 0.06);
}

.sent-requests-grid h4,
.received-requests-list h4 {
  font-size: 22px;
  margin-bottom: 5px;
}

/* ==========================================================
   IdealJodi Matrimony - Chats & Online Users Styles
   ========================================================== */

.chat-list-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 20px;
}

.chat-list-item {
  background: #ffffff;
  border: 1px solid #f1f5f9;
  border-radius: 18px;
  padding: 16px 20px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.015);
  margin-top: 12px;
  cursor: pointer;
}

.chat-list-item:hover {
  border-color: var(--primary-color);
  box-shadow: 0 12px 30px rgba(115, 66, 235, 0.06);
}

.chat-item-avatar-wrap {
  position: relative;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
}

.chat-item-avatar {
  width: 100%;
  height: 100%;
  border-radius: 14px;
  object-fit: cover;
}

.chat-item-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  color: var(--text-dark);
}

.chat-item-time {
  font-family: var(--font-main);
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}

.chat-item-last-msg {
  font-family: var(--font-main);
  font-size: 14px;
  color: #64748b;
  margin-bottom: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90%;
}

.chat-item-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chat-badge {
  font-family: var(--font-main);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 30px;
  text-transform: capitalize;
}

/* Badge Colors */
.badge-question {
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
}

.badge-help {
  background: rgba(16, 185, 129, 0.08);
  color: #10b981;
}

.badge-content {
  background: rgba(59, 130, 246, 0.08);
  color: #3b82f6;
}

.badge-bug {
  background: rgba(245, 158, 11, 0.08);
  color: #f59e0b;
}

.badge-hacktoberfest {
  background: rgba(99, 102, 241, 0.08);
  color: #6366f1;
}

.badge-request {
  background: rgba(6, 182, 212, 0.08);
  color: #06b6d4;
}

.badge-followup {
  background: rgba(139, 92, 246, 0.08);
  color: #8b5cf6;
}

/* Unread Message Styling */
.chat-list-item.unread {
  background: rgba(115, 66, 235, 0.015);
}

.chat-list-item.unread .unread-bar {
  position: absolute;
  top: 15px;
  bottom: 15px;
  right: 0;
  width: 4px;
  background: #ef4444;
  border-radius: 4px 0 0 4px;
}

/* Online status indicator on avatar */
.chat-item-avatar-wrap .online-indicator {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #10b981;
  border: 2.5px solid #ffffff;
}

/* Online User Items styles */
.online-users-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 20px;
}

.online-user-item {
  background: #ffffff;
  border: 1px solid #f1f5f9;
  border-radius: 18px;
  padding: 16px 20px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.015);
}

.online-user-item:hover {
  border-color: var(--primary-color);
  box-shadow: 0 12px 30px rgba(115, 66, 235, 0.06);
}

.online-user-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  color: var(--text-dark);
}

.online-user-meta {
  font-family: var(--font-main);
  font-size: 13px;
}

.btn-chat-now {
  background: var(--primary-gradient);
  border: none;
  color: #ffffff;
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 14px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(115, 66, 235, 0.15);
}

.btn-chat-now:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 6px 16px rgba(115, 66, 235, 0.25);
  color: #ffffff;
}

/* ==========================================================
   IdealJodi Matrimony - Premium Chat Detail Split-Pane
   ========================================================== */

.chat-split-row {
  display: flex;
  margin-left: -15px;
  margin-right: -15px;
}

.chat-list-column {
  width: 38%;
  padding-left: 15px;
  padding-right: 15px;
  border-right: 1px solid #f1f5f9;
  display: flex;
  flex-direction: column;
}

.chat-detail-column {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 600px;
}

/* Chat list column overrides to make it fit in split view */
.chat-list-column .section-header {
  margin-bottom: 15px;
}

.chat-list-column .chat-list-container {
  max-height: 520px;
  overflow-y: auto;
  padding-right: 5px;
}

/* Scrollbar styling for chat list and message feed */
.chat-list-column .chat-list-container::-webkit-scrollbar,
.chat-message-list::-webkit-scrollbar {
  width: 4px;
}

.chat-list-column .chat-list-container::-webkit-scrollbar-thumb,
.chat-message-list::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.chat-list-column .chat-list-container::-webkit-scrollbar-track,
.chat-message-list::-webkit-scrollbar-track {
  background: transparent;
}

/* Chat Detail Header */
.chat-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 15px;
}

.chat-header-user {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chat-header-back-btn {
  display: flex;
  /* Always visible */
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: var(--text-dark);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.chat-header-back-btn:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.chat-header-avatar-wrap {
  position: relative;
  width: 48px;
  height: 48px;
}

.chat-header-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.chat-header-info {
  display: flex;
  flex-direction: column;
}

.chat-header-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  color: var(--text-dark);
  margin-bottom: 2px;
}

.chat-header-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
}

.chat-header-status.online {
  color: #10b981;
}

.chat-header-status.offline {
  color: var(--text-muted);
}

.chat-header-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: currentColor;
}

.chat-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chat-header-action-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.chat-header-action-btn.call-btn {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.chat-header-action-btn.call-btn:hover {
  background: #10b981;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(16, 185, 129, 0.2);
}

.chat-header-action-btn.video-btn {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.chat-header-action-btn.video-btn:hover {
  background: #ef4444;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(239, 68, 68, 0.2);
}

/* Chat Message Area */
.chat-message-list {
  flex-grow: 1;
  overflow-y: auto;
  padding: 15px 10px;
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-height: 420px;
}

.chat-message-date-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0;
  position: relative;
}

.chat-message-date-divider::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: #f1f5f9;
  z-index: 1;
}

.chat-message-date-text {
  background: #ffffff;
  padding: 4px 14px;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  border-radius: 30px;
  border: 1px solid #f1f5f9;
  position: relative;
  z-index: 2;
}

/* Message Groups */
.message-group {
  display: flex;
  gap: 12px;
  max-width: 80%;
  align-items: flex-end;
}

.message-group.incoming {
  align-self: flex-start;
}

.message-group.outgoing {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.message-group-avatar-wrap {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.message-group-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.message-group-bubbles {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.message-bubble {
  padding: 8px 14px 6px 14px;
  font-size: 14.5px;
  line-height: 1.5;
  font-family: var(--font-main);
  max-width: 100%;
  word-wrap: break-word;
  display: flex;
  flex-direction: column;
}

.message-bubble-text {
  word-wrap: break-word;
  word-break: break-word;
}

.message-bubble-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  font-size: 10px;
  margin-top: 4px;
  align-self: flex-end;
  line-height: 1;
}

.message-group.incoming .message-bubble-meta {
  color: #64748b;
}

.message-group.outgoing .message-bubble-meta {
  color: rgba(255, 255, 255, 0.75);
}

.status-tick {
  display: inline-flex;
  align-items: center;
}

.status-tick.read {
  color: #38bdf8;
  /* Vibrant sky blue checkmark for read status */
}

/* Call Log Bubble Styles */
.message-bubble.call-bubble {
  min-width: 200px;
  padding: 10px 14px 6px 14px;
}

.call-bubble-content {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.call-icon-container {
  width: 40px;
  height: 40px;
  position: relative;
  flex-shrink: 0;
}

.call-icon-circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: all 0.2s ease;
}

.message-group.incoming .call-icon-circle {
  background: #ffffff;
  color: #1e293b;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.message-group.outgoing .call-icon-circle {
  background: #ffffff;
  color: #7342eb;
  /* Purple icon on white circle */
}

.call-arrow-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  border: 1.5px solid #ffffff;
}

.message-group.outgoing .call-arrow-badge {
  border-color: #7342eb;
  /* Matches outgoing gradient base */
}

.call-arrow-badge.incoming-answered,
.call-arrow-badge.outgoing-answered {
  background: #10b981;
  color: #ffffff;
}

.call-arrow-badge.incoming-missed,
.call-arrow-badge.outgoing-missed {
  background: #ef4444;
  color: #ffffff;
}

.call-info {
  display: flex;
  flex-direction: column;
}

.call-title {
  font-weight: 600;
  font-size: 14.5px;
}

.message-group.incoming .call-title {
  color: #1e293b;
}

.message-group.outgoing .call-title {
  color: #ffffff;
}

.call-subtitle {
  font-size: 12px;
}

.message-group.incoming .call-subtitle {
  color: #64748b;
}

.message-group.outgoing .call-subtitle {
  color: rgba(255, 255, 255, 0.8);
}

.message-group.incoming .message-bubble {
  background: #f1f5f9;
  color: #1e293b;
  border-radius: 18px 18px 18px 4px;
}

.message-group.outgoing .message-bubble {
  background: var(--primary-gradient);
  color: #ffffff;
  border-radius: 18px 18px 4px 18px;
}

/* Adjust radius for consecutive bubbles */
.message-group-bubbles .message-bubble:not(:first-child) {
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}

.message-group.incoming .message-group-bubbles .message-bubble:not(:first-child) {
  border-bottom-left-radius: 18px;
}

.message-group.outgoing .message-group-bubbles .message-bubble:not(:first-child) {
  border-bottom-right-radius: 18px;
}

/* Chat Footer Input */
.chat-detail-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 15px;
  border-top: 1px solid #f1f5f9;
}

.chat-attach-btn {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #64748b;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.chat-attach-btn:hover {
  background: #f1f5f9;
  color: var(--primary-color);
  border-color: #cbd5e1;
}

.chat-input-container {
  display: flex;
  align-items: center;
  flex-grow: 1;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 30px;
  padding: 4px 6px 4px 20px;
  transition: all 0.3s ease;
}

.chat-input-container:focus-within {
  border-color: var(--primary-color);
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(115, 66, 235, 0.05);
}

.chat-input-field {
  border: none;
  background: transparent;
  outline: none;
  flex-grow: 1;
  font-size: 14.5px;
  font-family: var(--font-main);
  color: var(--text-dark);
  padding: 8px 0;
}

.chat-input-field::placeholder {
  color: #94a3b8;
}

.chat-send-btn {
  background: var(--primary-gradient);
  border: none;
  color: #ffffff;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
  box-shadow: 0 4px 8px rgba(115, 66, 235, 0.15);
}

.chat-send-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(115, 66, 235, 0.25);
}

/* Typing Indicator Animation */
.typing-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 16px;
  background: #f1f5f9;
  border-radius: 18px 18px 18px 4px;
  align-self: flex-start;
  margin-left: 48px;
  /* Alignment with message avatar */
}

.typing-dot {
  width: 6px;
  height: 6px;
  background: #64748b;
  border-radius: 50%;
  animation: typingBounce 1.4s infinite ease-in-out both;
}

.typing-dot:nth-child(1) {
  animation-delay: -0.32s;
}

.typing-dot:nth-child(2) {
  animation-delay: -0.16s;
}

.typing-dot:nth-child(3) {
  animation-delay: 0s;
}

@keyframes typingBounce {

  0%,
  80%,
  100% {
    transform: scale(0);
  }

  40% {
    transform: scale(1.0);
  }
}

/* Highlighted active state for chat list items */
.chat-list-item.active {
  border-color: var(--primary-color) !important;
  background: rgba(115, 66, 235, 0.03) !important;
  box-shadow: 0 8px 24px rgba(115, 66, 235, 0.04) !important;
}

/* Shortlisted & Blocked Profile List View Styles (Horizontal Layout) */
.shortlisted-list-container,
.blocked-list-container {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #edf2f7;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01);
  padding: 0px 0;
  margin-top: 20px;
}

.shortlisted-list-item,
.blocked-list-item {
  display: flex;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid #f1f5f9;
  transition: all 0.3s ease;
  position: relative;
  gap: 20px;
}

.shortlisted-list-item:last-child,
.blocked-list-item:last-child {
  border-bottom: none;
}

.shortlisted-list-item:hover,
.blocked-list-item:hover {
  background: #fafafc;
}

.shortlisted-item-checkbox,
.blocked-item-checkbox {
  flex-shrink: 0;
}

.shortlisted-item-photo-wrap,
.blocked-item-photo-wrap {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  border: 1px solid #edf2f7;
}

.shortlisted-item-photo,
.blocked-item-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.shortlisted-list-item:hover .shortlisted-item-photo,
.blocked-list-item:hover .blocked-item-photo {
  transform: scale(1.05);
}

.shortlisted-item-details,
.blocked-item-details {
  flex-grow: 1;
  min-width: 0;
}

.shortlisted-item-name,
.blocked-item-name {
  font-family: var(--font-heading) !important;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 9px;
}

.shortlisted-item-meta,
.blocked-item-meta {
  font-family: var(--font-main);
  font-size: 14.5px;
  color: #64748b;
  line-height: 1.5;
  margin-bottom: 0;
}

.shortlisted-item-actions,
.blocked-item-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Shortlisted specific buttons */
.btn-shortlist-star-box {
  background: #fff4d7;
  color: #FFB800;
  width: 30px;
  height: 30px;
  border-radius: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.btn-shortlisted-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f59e0b;
  color: #ffffff;
  border: 1px solid #f59e0b;
  padding: 8px 24px;
  border-radius: 50px;
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 14px;
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
  padding-left: 8px;
}

.btn-shortlisted-toggle:hover {
  background: #d97706;
  border-color: #d97706;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(217, 119, 6, 0.25);
}

.btn-shortlisted-toggle.btn-outline-custom {
  background: transparent;
  color: #f59e0b;
  border-color: #f59e0b;
  box-shadow: none;
}

.btn-shortlisted-toggle.btn-outline-custom:hover {
  background: rgba(245, 158, 11, 0.05);
  transform: translateY(-2px);
}

/* Blocked specific buttons */
.btn-blocked-ban-box {
  background: #fef2f2;
  color: #dc2626;
  width: 30px;
  height: 30px;
  border-radius: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.btn-blocked-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ef4444;
  color: #ffffff;
  border: 1px solid #ef4444;
  padding: 8px 24px;
  border-radius: 50px;
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 14px;
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
  padding-left: 8px;
}

.btn-blocked-toggle:hover {
  background: #dc2626;
  border-color: #dc2626;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(220, 38, 38, 0.25);
}

.btn-blocked-toggle.btn-outline-custom {
  background: transparent;
  color: #ef4444;
  border-color: #ef4444;
  box-shadow: none;
}

.btn-blocked-toggle.btn-outline-custom:hover {
  background: rgba(239, 68, 68, 0.05);
  transform: translateY(-2px);
}

/* ==========================================================
   Settings Page Custom Styles
   ========================================================== */
.settings-alert-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  background: rgba(115, 66, 235, 0.03);
  border: 1px solid rgba(115, 66, 235, 0.08);
  border-radius: 12px;
  margin-bottom: 24px;
  margin-top: 26px;
}

.settings-alert-icon {
  font-size: 20px;
  color: #ff4b58;
  flex-shrink: 0;
  margin-top: 1px;
}

.settings-alert-text {
  font-size: 14px;
  color: #64748b;
  line-height: 1.5;
}

.settings-radio-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}

.settings-radio-label {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 600;
  color: #1e293b;
  user-select: none;
}

.settings-radio-label input[type="radio"] {
  display: none;
}

.settings-radio-circle {
  width: 20px;
  height: 20px;
  border: 2px solid #cbd5e1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.settings-radio-circle::after {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--primary-gradient);
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.2s ease;
}

.settings-radio-label input[type="radio"]:checked+.settings-radio-circle {
  border-color: var(--primary-color);
}

.settings-radio-label input[type="radio"]:checked+.settings-radio-circle::after {
  transform: scale(1);
}

.btn-save-changes {
  background: var(--primary-gradient);
  color: #ffffff;
  border: none;
  padding: 12px 28px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 6px 20px rgba(115, 66, 235, 0.15);
  transition: all 0.3s ease;
  cursor: pointer;
}

.btn-save-changes:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(115, 66, 235, 0.25);
  color: #ffffff;
}

.btn-save-changes iconify-icon {
  font-size: 18px;
}

/* ==========================================================
   IdealJodi Matrimony - Settings Page Redesign Custom CSS
   ========================================================== */

/* Option Card Styling */
.settings-option-card {
  background: #ffffff;
  border: 1px solid #f1f5f9;
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.015);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.settings-option-card:hover {
  border-color: rgba(115, 66, 235, 0.12);
  box-shadow: 0 8px 30px rgba(115, 66, 235, 0.03);
}

.settings-option-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.settings-option-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: rgba(115, 66, 235, 0.06);
  color: var(--primary-color);
}

.settings-option-title {
  font-family: var(--font-main);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
}

.settings-option-desc {
  font-family: var(--font-main);
  font-size: 13.5px;
  color: #64748b;
  margin-bottom: 16px;
}

/* Choice Buttons */
.settings-choice-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.settings-choice-btn {
  display: inline-block;
  cursor: pointer;
  user-select: none;
}

.settings-choice-btn input[type="radio"] {
  display: none;
}

.settings-choice-btn-label {
  display: inline-block;
  padding: 10px 24px;
  border-radius: 50px;
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 13.5px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #64748b;
  transition: all 0.2s ease;
}

.settings-choice-btn:hover .settings-choice-btn-label {
  background: #e2e8f0;
  color: #1e293b;
}

.settings-choice-btn input[type="radio"]:checked+.settings-choice-btn-label {
  background: var(--primary-gradient);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(115, 66, 235, 0.15);
}

/* Custom Toggle switches and layout */
.settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.settings-toggle-row:hover {
  background: #f1f5f9;
  border-color: rgba(115, 66, 235, 0.15);
}

.settings-toggle-label {
  font-family: var(--font-main);
  font-weight: 600;
  font-size: 14px;
  color: var(--text-dark);
}

/* Custom styles for switch input */
.form-check-input:checked {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

/* Message Management Styling */
.settings-message-box {
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  padding: 16px;
  margin-top: 12px;
}

.settings-message-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary-color);
  margin-bottom: 6px;
}

.settings-message-text {
  font-size: 14px;
  color: var(--text-dark);
  line-height: 1.5;
  margin-bottom: 12px;
}

.btn-settings-link {
  background: transparent;
  border: none;
  padding: 0;
  color: var(--secondary-color);
  font-weight: 700;
  font-size: 13.5px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: color 0.2s ease;
}

.btn-settings-link:hover {
  color: var(--primary-color);
  text-decoration: underline;
}

.message-edit-area {
  display: none;
  margin-top: 8px;
}

.message-edit-area textarea {
  width: 100%;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  padding: 10px;
  font-family: var(--font-main);
  font-size: 13.5px;
  margin-bottom: 8px;
}

/* Grid layout for toggles */
.settings-toggles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

/* Horizontal Settings Tab Navigation */
.profile-tabs-nav.settings-tabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  /* Firefox */
  border-radius: 50px;
  padding: 6px;
  margin-bottom: 24px;
  background: #ffffff;
  border: 1px solid #f1f5f9;
  width: 100%;
}

.profile-tabs-nav.settings-tabs::-webkit-scrollbar {
  display: none;
  /* Safari and Chrome */
}

.profile-tabs-nav.settings-tabs .profile-tab-btn {
  flex: 1;
  white-space: nowrap;
  border-radius: 50px;
  padding: 12px 20px;
  font-size: 13.5px;
  border: none;
  background: transparent;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  transition: all 0.25s ease;
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.profile-tabs-nav.settings-tabs .profile-tab-btn iconify-icon {
  font-size: 20px;
  vertical-align: middle;
}

.profile-tabs-nav.settings-tabs .profile-tab-btn.active {
  background: var(--primary-gradient);
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(115, 66, 235, 0.15);
}

/* ==========================================================
   IdealJodi Matrimony - Public User Profile Redesign Page Custom CSS
   ========================================================== */

/* Header Card Overrides (Public View) */
.profile-header-card .premium-badge-header {
  background: linear-gradient(135deg, #ffd700 0%, #ffa500 100%);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 8px rgba(255, 165, 0, 0.2);
}

.profile-header-card .verified-badge-header {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 50px;
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Public Profile Action Bar */
.user-profile-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 24px;
  padding: 16px 24px;
  background: #ffffff;
  border: 1px solid #f1f5f9;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.015);
}

.user-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 50px;
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid transparent;
  text-decoration: none !important;
}

/* Interest Button States */
.btn-action-interest {
  background: var(--primary-gradient);
  color: #ffffff !important;
  box-shadow: 0 6px 15px rgba(115, 66, 235, 0.15);
}

.btn-action-interest:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(115, 66, 235, 0.25);
}

.btn-action-interest.active-sent {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #64748b !important;
  box-shadow: none !important;
  cursor: default !important;
  transform: none !important;
}

.btn-action-interest.active-sent iconify-icon {
  color: #ef4444;
}

/* Shortlist Button States */
.btn-action-shortlist {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #475569 !important;
}

.btn-action-shortlist:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #1e293b !important;
  transform: translateY(-2px);
}

.btn-action-shortlist.active-shortlisted {
  background: rgba(245, 158, 11, 0.05) !important;
  border-color: #f59e0b !important;
  color: #d97706 !important;
  transform: none !important;
  box-shadow: none !important;
}

.btn-action-shortlist.active-shortlisted iconify-icon {
  color: #f59e0b;
}

/* Message Button */
.btn-action-message {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #475569 !important;
}

.btn-action-message:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #1e293b !important;
  transform: translateY(-2px);
}

/* Video Call Button with Premium Gold Touch */
.btn-action-videocall {
  background: #ffffff;
  border-color: #f59e0b;
  color: #d97706 !important;
}

.btn-action-videocall:hover {
  background: rgba(245, 158, 11, 0.03);
  transform: translateY(-2px);
}

.btn-action-videocall .premium-mini-tag {
  background: linear-gradient(135deg, #ffd700 0%, #ffa500 100%);
  color: #ffffff;
  font-size: 8px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
  text-transform: uppercase;
  margin-left: 2px;
  vertical-align: middle;
}

/* Block Dropdown button */
.btn-action-more {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #64748b !important;
  padding: 12px 14px;
}

.btn-action-more:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

/* Public Photo Gallery */
.public-gallery-section {
  background: #ffffff;
  border: 1px solid #f1f5f9;
  border-radius: 24px;
  padding: 24px;
  margin-bottom: 28px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.015);
}

.gallery-section-title {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 150px 150px;
  gap: 16px;
}

.gallery-item {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.gallery-item:hover img {
  transform: scale(1.05);
}

.gallery-item-main {
  grid-row: span 2;
  height: 316px;
}

/* Locked private photo style */
.gallery-item.locked-photo {
  cursor: pointer;
}

.gallery-item.locked-photo img {
  filter: blur(14px) grayscale(20%);
}

.gallery-item.locked-photo:hover img {
  transform: none;
}

.locked-photo-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  gap: 6px;
  padding: 10px;
  text-align: center;
}

.locked-photo-overlay iconify-icon {
  font-size: 24px;
  background: rgba(255, 255, 255, 0.2);
  padding: 8px;
  border-radius: 50%;
  backdrop-filter: blur(4px);
}

.locked-photo-overlay span {
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.gallery-info-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(115, 66, 235, 0.02);
  border: 1px dashed rgba(115, 66, 235, 0.18);
  border-radius: 16px;
  padding: 16px 20px;
  margin-top: 16px;
  gap: 12px;
}

.gallery-banner-text h6 {
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 2px;
}

.gallery-banner-text p {
  color: #64748b;
  font-size: 13px;
  margin-bottom: 0;
}

.btn-request-gallery-access {
  background: var(--primary-gradient);
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(115, 66, 235, 0.1);
  transition: all 0.3s ease;
  white-space: nowrap;
}

.btn-request-gallery-access:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 15px rgba(115, 66, 235, 0.2);
}

.btn-request-gallery-access.active-requested {
  background: #e2e8f0 !important;
  color: #64748b !important;
  box-shadow: none !important;
  cursor: default !important;
  transform: none !important;
}

/* Quick Message Modal Styling */
.quick-message-templates {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}

.quick-template-btn {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 16px;
  text-align: left;
  font-size: 13.5px;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 600;
}

.quick-template-btn:hover {
  background: rgba(115, 66, 235, 0.04);
  border-color: rgba(115, 66, 235, 0.2);
  color: var(--primary-color);
}

/* Image Lightbox Styling */
.lightbox-modal .modal-content {
  background: transparent;
  border: none;
}

.lightbox-modal .modal-body {
  padding: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-img {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 16px;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6);
}

.lightbox-close-btn {
  position: absolute;
  top: -45px;
  right: 0;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.lightbox-close-btn:hover {
  background: rgba(255, 255, 255, 0.35);
  transform: rotate(90deg);
}

/* Premium Upgrade Call Modal */
.premium-call-container {
  text-align: center;
  padding: 20px 10px;
}

.premium-call-icon-wrap {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(245, 158, 11, 0.08);
  color: #f59e0b;
  font-size: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  animation: pulse-gold-glow 2s infinite;
}

@keyframes pulse-gold-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
  }

  70% {
    box-shadow: 0 0 0 15px rgba(245, 158, 11, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
  }
}

.premium-upgrade-btn {
  background: linear-gradient(135deg, #ffd700 0%, #ffa500 100%);
  color: #ffffff !important;
  border: none;
  padding: 12px 28px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 6px 15px rgba(255, 165, 0, 0.2);
  transition: all 0.3s ease;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none !important;
}

.premium-upgrade-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(255, 165, 0, 0.35);
}

.btn-secondary-action {
  background: #f1f5f9;
  border: none;
  padding: 12px 24px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 14px;
  color: #475569 !important;
  transition: all 0.2s ease;
  cursor: pointer;
}

.btn-secondary-action:hover {
  background: #e2e8f0;
  color: #1e293b !important;
}

/* ==========================================================
   IdealJodi Matrimony - Premium Card Redesign Styles
   ========================================================== */

.profile-nav-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #475569;
  font-size: 18px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  flex-shrink: 0;
  text-decoration: none !important;
}

.profile-nav-arrow:hover {
  background: var(--primary-gradient);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(115, 66, 235, 0.25);
  transform: scale(1.05);
}

/* ==========================================================
   IdealJodi Matrimony - Redesigned Premium Profile Card Styles
   ========================================================== */

.profile-main-card {
  position: relative;
  background: #ffffff;
  border-radius: 32px;
  padding: 30px;
  border: 1px solid #edf2f7;
  box-shadow: 0 20px 50px rgba(85, 98, 229, 0.05), 0 2px 8px rgba(0, 0, 0, 0.01);
  overflow: hidden;
}

/* Elegant radial gradient accent to make the card feel alive */
.profile-main-card::before {
  content: "";
  position: absolute;
  top: -100px;
  right: -100px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(85, 98, 229, 0.03) 0%, rgba(255, 255, 255, 0) 70%);
  z-index: 0;
  pointer-events: none;
}

.profile-main-card .row {
  position: relative;
  z-index: 1;
}

/* 3:4 Vertical Portrait Image Container for full view */
.profile-avatar-container {
  position: relative;
  width: 100%;
  height: 330px;
  border-radius: 24px;
  overflow: hidden;
  display: inline-block;
  background: #f8fafc;
  border: 4px solid #ffffff;
  outline: 1px solid rgba(85, 98, 229, 0.15);
  box-shadow: 0 16px 36px rgba(85, 98, 229, 0.08), 0 4px 10px rgba(0, 0, 0, 0.02);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.profile-avatar-container:hover {
  transform: translateY(-4px);
  outline-color: rgba(85, 98, 229, 0.3);
  box-shadow: 0 20px 40px rgba(85, 98, 229, 0.15), 0 4px 12px rgba(0, 0, 0, 0.03);
}

.profile-main-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.profile-avatar-container:hover .profile-main-avatar {
  transform: scale(1.06);
}

/* Glassmorphism Badge Styles */
.avatar-badge-premium {
  position: absolute;
  top: 12px;
  left: 12px;
  background: linear-gradient(135deg, #ffe066 0%, #f59e0b 100%);
  color: #ffffff;
  font-family: var(--font-main);
  font-size: 9px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 30px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  box-shadow: 0 4px 10px rgba(245, 158, 11, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.2);
  z-index: 15;
}

.avatar-badge-match {
  position: absolute;
  top: 12px;
  right: 12px;
  background: linear-gradient(135deg, #34d399 0%, #059669 100%);
  color: #ffffff;
  font-family: var(--font-main);
  font-size: 9px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 30px;
  letter-spacing: 0.3px;
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.2);
  z-index: 15;
}

/* Floating Glass Actions Dock at the bottom of the photo */
.avatar-action-dock {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 60px;
  padding: 8px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 8px 32px rgba(85, 98, 229, 0.1);
  z-index: 10;
  transition: all 0.3s ease;
}

.avatar-action-dock .circle-action-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  color: #ffffff;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.avatar-action-dock .circle-action-btn.btn-call {
  background: linear-gradient(135deg, #34d399, #059669);
}

.avatar-action-dock .circle-action-btn.btn-video {
  background: linear-gradient(135deg, #5562e5, #2c8edc);
}

.avatar-action-dock .circle-action-btn.btn-chat {
  background: linear-gradient(135deg, #38bdf8, #0284c7);
}

.avatar-action-dock .circle-action-btn.btn-more {
  background: #ffffff;
  color: #64748b;
  border: 1px solid #edf2f7;
}

.avatar-action-dock .circle-action-btn:hover {
  transform: translateY(-2px) scale(1.08);
}

.avatar-action-dock .circle-action-btn.btn-call:hover {
  box-shadow: 0 6px 15px rgba(5, 150, 105, 0.35);
}

.avatar-action-dock .circle-action-btn.btn-video:hover {
  box-shadow: 0 6px 15px rgba(85, 98, 229, 0.35);
}

.avatar-action-dock .circle-action-btn.btn-chat:hover {
  box-shadow: 0 6px 15px rgba(2, 132, 199, 0.35);
}

.avatar-action-dock .circle-action-btn.btn-more:hover {
  background: #f8fafc;
  color: #1e293b;
  border-color: #cbd5e1;
  box-shadow: 0 6px 15px rgba(100, 116, 139, 0.15);
}

/* Info Column Style */
.profile-name {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 500;
  color: #1e293b;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.profile-id-text {
  font-family: var(--font-main);
  font-size: 13px;
  color: #64748b;
  background: #f1f5f9;
  padding: 3px 10px;
  border-radius: 8px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.profile-quick-status {
  font-size: 13.5px;
  font-weight: 600;
}

.status-indicator {
  background: rgba(16, 185, 129, 0.08);
  color: #10b981;
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(16, 185, 129, 0.15);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.status-dot.online {
  background-color: #10b981;
  box-shadow: 0 0 6px #10b981;
  animation: pulse-online 2s infinite;
}

@keyframes pulse-online {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }

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

.quick-badge-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 700;
  transition: all 0.2s ease;
}

.quick-badge-tag:hover {
  transform: translateY(-1px);
}

.quick-badge-tag.badge-mutual {
  background: rgba(85, 98, 229, 0.06);
  color: var(--primary-color);
  border: 1px solid rgba(85, 98, 229, 0.12);
}

.quick-badge-tag.badge-astro {
  background: rgba(168, 85, 247, 0.06);
  color: #a855f7;
  border: 1px solid rgba(168, 85, 247, 0.12);
}

.quick-badge-tag iconify-icon {
  font-size: 15px;
}

/* Premium Dashboard Metrics Grid for Details */
.profile-details-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin: 20px 0;
}

.detail-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: #f8fafc;
  border: 1px solid #edf2f7;
  border-radius: 14px;
  padding: 10px 16px;
  gap: 2px;
  border-bottom: none;
  transition: all 0.25s ease;
}

.detail-row:hover {
  background: #ffffff;
  border-color: rgba(85, 98, 229, 0.25);
  box-shadow: 0 8px 16px rgba(85, 98, 229, 0.05);
}

.detail-label {
  color: #64748b;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
}

.detail-value {
  color: #1e293b;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
}

.profile-short-bio {
  font-size: 13.5px;
  line-height: 1.6;
  color: #475569;
  background: #fdfdfd;
  border-left: 4px solid var(--primary-color);
  border-radius: 0 16px 16px 0;
  border-top: 1px solid #edf2f7;
  border-right: 1px solid #edf2f7;
  border-bottom: 1px solid #edf2f7;
  padding: 14px 20px;
  font-style: italic;
}

.profile-short-bio .more-link {
  color: var(--primary-color);
  font-weight: 700;
  text-decoration: none;
  font-style: normal;
  cursor: pointer;
  margin-left: 4px;
  border-bottom: 1px dashed var(--primary-color);
  transition: all 0.2s ease;
}

.profile-short-bio .more-link:hover {
  color: var(--secondary-color);
  border-color: var(--secondary-color);
}

/* Horizontal Actions Bar (Modern Layout) */
.profile-actions-bar {
  border-top: 1px solid #edf2f7;
  padding-top: 20px;
}

.action-btn-horizontal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px 24px;
  border-radius: 34px;
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 14px;
  border: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  text-decoration: none !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
  padding-left: 5px;
}

.action-btn-horizontal.btn-interest-stacked.active-sent iconify-icon {
  font-size: 21px;
  background: #aba4a424;
  padding: 10px;
  border-radius: 52px;
}

.action-btn-horizontal iconify-icon {
  font-size: 21px;
  background: #ffffff24;
  padding: 10px;
  border-radius: 52px;
}

.action-btn-horizontal.btn-shortlist-stacked {
  background: var(--primary-color);
  color: #ffffff !important;
}

.action-btn-horizontal.btn-shortlist-stacked:hover {
  background: #4452d3;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(85, 98, 229, 0.1);
}

.action-btn-horizontal.btn-shortlist-stacked.active-shortlisted {
  background: #f59e0b !important;
  border-color: #f59e0b !important;
  color: #ffffff !important;
  transform: none !important;
  box-shadow: 0 6px 15px rgba(245, 158, 11, 0.25) !important;
}

.action-btn-horizontal.btn-interest-stacked {
  background: linear-gradient(135deg, #ff9b26 0%, #ff5e3a 100%);
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(255, 94, 58, 0.2);
}

.action-btn-horizontal.btn-interest-stacked:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255, 94, 58, 0.3);
}

.action-btn-horizontal.btn-interest-stacked.active-sent {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #94a3b8 !important;
  cursor: default !important;
  transform: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

.action-btn-horizontal.btn-contact-stacked {
  background: linear-gradient(135deg, #7342eb 0%, #a855f7 100%);
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(115, 66, 235, 0.2);
}

.action-btn-horizontal.btn-contact-stacked:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(115, 66, 235, 0.3);
}

.action-btn-horizontal.btn-report-stacked {
  background: #eff2f5;
  border-color: #edf2f7;
  color: #94a3b8 !important;
}

.action-btn-horizontal.btn-report-stacked:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #ef4444 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(239, 68, 68, 0.15);
}



/* ID Proof Verified Content Styling */
.verified-id-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.verified-id-icon-wrap {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.08);
  color: #10b981;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.verified-id-info h5 {
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 4px;
}

.verified-id-info p {
  color: #64748b;
  font-size: 13.5px;
  margin-bottom: 0;
  line-height: 1.5;
}

/* ==========================================================
   IdealJodi Matrimony - Contact Details Modal Custom Styling
   ========================================================== */



/* Photo block layout */
.contact-photo-section {
  display: flex;
  gap: 10px;
  width: 100%;
}

.contact-main-photo-wrap {
  flex: 1;
  height: 250px;
  border-radius: 16px;
  overflow: hidden;
  background: #f1f5f9;
}

.contact-main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact-thumbnails {
  width: 55px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: space-between;
}

.contact-thumb {
  width: 55px;
  height: 55px;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  background: #f1f5f9;
  transition: all 0.2s ease;
}

.contact-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact-thumb:hover,
.contact-thumb.active {
  border-color: #2563eb;
  transform: scale(1.03);
}

/* Action row cards style */
.contact-action-row {
  display: flex;
  gap: 10px;
  width: 100%;
  margin-top: 15px;
}

.contact-action-card {
  flex: 1;
  height: 75px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #ffffff !important;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
}

.contact-action-card iconify-icon {
  font-size: 24px;
}

.contact-action-card span {
  font-size: 11px;
  font-weight: 700;
  text-transform: capitalize;
}

.contact-action-card.shortlist-card {
  background: #ffb057;
}

.contact-action-card.shortlist-card:hover {
  background: #ffa13a;
  transform: translateY(-2px);
}

.contact-action-card.interest-card {
  background: #ff4d6d;
}

.contact-action-card.interest-card:hover {
  background: #ff2c53;
  transform: translateY(-2px);
}

.contact-action-card.message-card {
  background: #2563eb;
}

.contact-action-card.message-card:hover {
  background: #1d4ed8;
  transform: translateY(-2px);
}

.contact-action-card.block-card {
  background: #333b4d;
}

.contact-action-card.block-card:hover {
  background: #232936;
  transform: translateY(-2px);
}

/* Right side info text fields */
.contact-info-grid {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding-left: 10px;
}

.info-field-label {
  color: #8a99ad;
  font-size: 12.5px;
  font-weight: 500;
  margin-bottom: 2px;
  display: block;
}

.info-field-val {
  color: #1e293b;
  font-size: 14px;
  font-weight: 700;
  margin: 0;
}

/* General Modals Header & Body Padding adjustments */
.modal:not(.lightbox-modal) .modal-header {
  padding: 24px 30px 12px 30px !important;
}

.modal:not(.lightbox-modal) .modal-body {
  padding: 12px 30px 30px 30px !important;
}

/* Custom Premium Gradient Button Class */
.btn-gradient-primary {
  background: var(--primary-gradient) !important;
  color: #ffffff !important;
  border: none !important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  box-shadow: 0 4px 12px rgba(115, 66, 235, 0.2) !important;
  outline: none !important;
  font-size: 14px;
  padding: 11px;
}

.btn-gradient-primary:hover,
.btn-gradient-primary:focus {
  background: var(--primary-gradient) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 20px rgba(115, 66, 235, 0.35) !important;
}

.btn-gradient-primary:active {
  transform: translateY(1px) !important;
  box-shadow: 0 4px 10px rgba(115, 66, 235, 0.15) !important;
}

/* ==========================================================================
   Immersive Premium 404 Page Specific Styling
   ========================================================================== */
.error-page-wrapper {
  background: linear-gradient(135deg, #fbf7ff 0%, #e6f3ff 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

/* Floating background elements */
.error-bg-shapes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.error-shape {
  position: absolute;
  background: var(--primary-gradient);
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.12;
}

.error-shape-1 {
  width: 400px;
  height: 400px;
  top: -100px;
  right: -50px;
}

.error-shape-2 {
  width: 350px;
  height: 350px;
  bottom: -50px;
  left: -100px;
}

.error-shape-3 {
  width: 250px;
  height: 250px;
  top: 40%;
  left: 30%;
  opacity: 0.06;
}

.error-container {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 1100px;
  margin: auto;
  padding: 0 20px;
}

.error-card {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 40px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(115, 66, 235, 0.08);
  transition: all 0.4s ease;
}

.error-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 40px 80px rgba(115, 66, 235, 0.12);
}

.error-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: rgba(115, 66, 235, 0.1);
  color: var(--primary-color);
  font-size: 26px;
  margin-bottom: 25px;
}

.error-code-badge {
  display: inline-block;
  padding: 6px 16px;
  background: rgba(115, 66, 235, 0.08);
  color: var(--primary-color);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-radius: 50px;
  margin-bottom: 20px;
}

.error-title-modern {
  font-family: var(--font-heading);
  font-size: 46px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--text-dark);
  margin-bottom: 20px;
}

.error-title-modern span {
  font-style: italic;
  color: var(--primary-color);
}

.error-text-modern {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 40px;
  max-width: 500px;
}

.error-illustration-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 100%;
  height: 100%;
  min-height: 480px;
  background: #ffffff;
}

.error-illustration-wrap::before {
  content: '';
  position: absolute;
  width: 80%;
  height: 80%;
  background: radial-gradient(circle, rgba(115, 66, 235, 0.08) 0%, rgba(255, 255, 255, 0) 70%);
  z-index: 1;
}

.error-illustration-img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  display: block;
  animation: float-illustration-scaled 6s ease-in-out infinite;
  object-position: left;
}

.error-content-wrap {
  padding: 60px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.error-btn-primary {
  background: var(--primary-gradient);
  color: var(--white) !important;
  padding: 14px 32px;
  border-radius: 50px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  transition: all 0.3s ease;
  box-shadow: 0 6px 20px rgba(115, 66, 235, 0.25);
  border: none;
}

.error-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(115, 66, 235, 0.35);
}

.error-btn-secondary {
  border: 2px solid rgba(115, 66, 235, 0.2);
  color: var(--primary-color) !important;
  background: transparent;
  padding: 12px 30px;
  border-radius: 50px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  transition: all 0.3s ease;
}

.error-btn-secondary:hover {
  border-color: var(--primary-color);
  background: rgba(115, 66, 235, 0.03);
  transform: translateY(-2px);
}

@keyframes float-illustration-scaled {

  0%,
  100% {
    transform: scale(1.02) translateY(0);
  }

  50% {
    transform: scale(1.02) translateY(-10px);
  }
}

/* Custom styling for No Data illustration */
.no-data-illustration {
  margin: auto !important;
  display: block !important;
  animation: float-illustration-scaled 6s ease-in-out infinite !important;
  object-position: center;
}

/* Account Suspension Styles */
.error-badge-icon.warning {
  background: rgba(255, 107, 107, 0.1);
  color: var(--accent-pink);
}

.error-code-badge.warning {
  background: rgba(255, 107, 107, 0.08);
  color: var(--accent-pink);
}

.error-alert-box {
  background: rgba(255, 107, 107, 0.06);
  border-left: 4px solid var(--accent-pink);
  border-radius: 0 12px 12px 0;
  padding: 16px 20px;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}

.error-alert-icon {
  color: var(--accent-pink);
  font-size: 20px;
  flex-shrink: 0;
}

.error-alert-text {
  font-size: 14px;
  color: #555555;
  margin: 0;
  font-weight: 500;
  line-height: 1.5;
}

/* ==========================================================
   IdealJodi Matrimony - Invoice Page Styles
   ========================================================== */
.btn-invoice-action {
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 14px;
  padding: 10px 24px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.btn-invoice-print {
  background: var(--primary-gradient);
  color: var(--white);
  box-shadow: 0 4px 15px rgba(85, 98, 229, 0.2);
}

.btn-invoice-print:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(85, 98, 229, 0.3);
  color: var(--white) !important;
}

.btn-invoice-download {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  color: var(--text-dark);
}

.btn-invoice-download:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  transform: translateY(-2px);
  color: var(--text-dark) !important;
}

.invoice-card {
  background: #ffffff;
  border: 1px solid #f1f5f9;
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 10px 40px rgba(115, 66, 235, 0.02);
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}

.invoice-status-ribbon {
  position: absolute;
  top: 3px;
  right: -60px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #fff;
  font-family: var(--font-main);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 8px 61px;
  transform: rotate(45deg);
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.2);
  z-index: 10;
}

.invoice-header {
  border-bottom: 1px dashed #e2e8f0;
  padding-bottom: 16px;
  margin-bottom: 24px;
}

.invoice-logo-area {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.invoice-logo-tagline {
  font-family: var(--font-main);
  font-weight: 600;
  font-size: 13px;
  color: var(--primary-color);
  letter-spacing: 0.5px;
}

.invoice-company-details {
  text-align: right;
  font-family: var(--font-main);
  font-size: 14px;
  color: var(--text-muted);
}

.invoice-company-details .company-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  color: var(--text-dark);
  margin-bottom: 6px;
}

.company-detail-item {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-bottom: 7px;
}

.company-detail-item iconify-icon {
  font-size: 16px;
  color: var(--primary-color);
}

/* Metadata alignments matching the exact columns of the screenshot */
.invoice-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 6px;
}

.invoice-meta-left {
  text-align: left;
}

.invoice-meta-right {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.invoice-meta-section h5 {
  font-family: var(--font-main);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #000;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.detail-block {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}


.detail-block-label {
  font-family: var(--font-main);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #94a3b8;
  text-transform: uppercase;
}

.detail-block-value {
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 15px;
  color: var(--text-dark);
}

.detail-block-value a {
  color: var(--primary-color) !important;
  font-weight: 700;
  transition: opacity 0.2s;
}

.detail-block-value a:hover {
  opacity: 0.8;
}

.badge-payment-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(16, 185, 129, 0.08);
  color: #10b981;
  font-weight: 800;
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 50px;
  width: fit-content;
}

.invoice-table-wrap {
  border: 1px solid #edf2f7;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 30px;
}

.invoice-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0;
}

.invoice-table th {
  background: rgba(85, 98, 229, 0.03);
  font-family: var(--font-main);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-dark);
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid #edf2f7;
}

.invoice-table td {
  padding: 18px 20px;
  font-family: var(--font-main);
  font-size: 14px;
  color: var(--text-dark);
  border-bottom: 1px solid #edf2f7;
  vertical-align: middle;
}

.invoice-table tr:last-child td {
  border-bottom: none;
}

.invoice-table .col-product {
  font-weight: 700;
}

.invoice-table .col-product span {
  display: block;
  font-weight: 500;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

.invoice-table .col-date {
  color: var(--text-muted);
}

.invoice-table .col-date.expired-date {
  color: var(--accent-pink);
  font-weight: 600;
}

.invoice-table .col-total {
  font-weight: 700;
  text-align: right;
}

.invoice-table th.col-total {
  text-align: right;
}

.invoice-summary-area {
  margin-left: auto;
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 40px;
}

.summary-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-family: var(--font-main);
}

.summary-label {
  color: var(--text-muted);
  font-weight: 600;
}

.summary-value {
  color: var(--text-dark);
  font-weight: 700;
}

.summary-divider {
  border-top: 1.5px solid #edf2f7;
  margin: 6px 0;
}

.grand-total-line .summary-label {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-dark);
}

.grand-total-line .summary-value {
  font-size: 20px;
  font-weight: 800;
  color: #10b981;
}

.invoice-footer-area {
  border-top: 1px dashed #e2e8f0;
  padding-top: 30px;
  text-align: center;
}

.invoice-thankyou {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 24px;
  color: var(--text-dark);
  margin-bottom: 8px;
}

.invoice-disclaimer {
  font-family: var(--font-main);
  font-size: 13px;
  color: var(--text-muted);
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.5;
}



/* ==========================================================
   IdealJodi Matrimony - Current Plan Page Styles
   ========================================================== */
.active-plan-card {
  background: #ffffff;
  border: 1px solid #f1f5f9;
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 10px 40px rgba(115, 66, 235, 0.02);
  margin-bottom: 30px;
}

.plan-header-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px dashed #e2e8f0;
  padding-bottom: 20px;
  margin-bottom: 24px;
}

.plan-title-block {
  display: flex;
  align-items: center;
  gap: 16px;
}

.plan-icon-badge {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(85, 98, 229, 0.08);
  color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.plan-name-text {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-dark);
}

.plan-details-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px 30px;
  margin-bottom: 4px;
}

.plan-billing-banner {
  border: 1.5px dashed #edf2f7;
  border-radius: 16px;
  padding: 18px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8fafc;
  margin-top: 0px;
}

.plan-billing-text {
  font-family: var(--font-main);
  font-size: 14px;
  color: var(--text-muted);
}

.plan-billing-text span {
  font-size: 18px;
  font-weight: 800;
  color: #10b981;
  margin-left: 8px;
}

.past-plan-row {
  border: 1px solid #f1f5f9;
  border-radius: 18px;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  margin-bottom: 16px;
  transition: all 0.3s ease;
}

.past-plan-row:hover {
  border-color: var(--primary-color);
  box-shadow: 0 8px 24px rgba(115, 66, 235, 0.04);
}

.past-plan-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.past-plan-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.past-plan-name {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-dark);
}

.past-plan-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-main);
  font-size: 13px;
  color: var(--text-muted);
}

.past-plan-meta span.expired-lbl {
  color: var(--accent-pink);
  font-weight: 600;
}

.past-plan-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ==========================================================
   IdealJodi Matrimony - Saved Searches Page Styles
   ========================================================== */
.saved-searches-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
}

.saved-search-item {
  background: #ffffff;
  border: 1px solid #f1f5f9;
  border-radius: 24px;
  padding: 24px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.01);
}

.saved-search-item.active {
  border-color: rgba(85, 98, 229, 0.15);
  box-shadow: 0 10px 30px rgba(85, 98, 229, 0.04);
}

.saved-search-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.saved-search-left-part {
  display: flex;
  align-items: center;
  gap: 16px;
}

.search-icon-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: rgba(85, 98, 229, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.search-icon-circle iconify-icon {
  font-size: 24px;
  color: var(--primary-color);
  transition: all 0.3s ease;
}

.saved-search-item.active .search-icon-circle {
  background-color: var(--primary-color);
}

.saved-search-item.active .search-icon-circle iconify-icon {
  color: #ffffff;
}

.search-info-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.search-title-text {
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 0;
}

.search-date-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-main);
  font-size: 13.5px;
  color: var(--text-muted);
}

.search-date-wrap iconify-icon {
  font-size: 16px;
  color: var(--text-muted);
}

.saved-search-right-part {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-details-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: var(--primary-color);
  color: #ffffff;
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 700;
  padding: 8px 24px;
  border-radius: 50px;
  border: none;
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(85, 98, 229, 0.15);
}

.btn-details-toggle:hover {
  background: var(--primary-gradient);
  color: #ffffff;
}

.btn-details-toggle.details-expanded {
  background-color: rgba(85, 98, 229, 0.05);
  color: var(--primary-color);
  box-shadow: none;
}

.btn-details-toggle.details-expanded:hover {
  background-color: rgba(85, 98, 229, 0.1);
}

.btn-delete-search {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #e2e8f0;
  background-color: #ffffff;
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  cursor: pointer;
}

.btn-delete-search:hover {
  color: #ef4444;
  border-color: #fee2e2;
  background-color: #fdf2f2;
}

.btn-delete-search iconify-icon {
  font-size: 18px;
}

.search-details-collapse {
  display: none;
}

.saved-search-grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 60px;
  padding-top: 24px;
}

.saved-search-grid-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f1f5f9;
}

/* Remove bottom border for the last items in both columns */
.saved-search-grid-item:nth-last-child(-n+2) {
  border-bottom: none;
}

.grid-label {
  font-family: var(--font-main);
  font-size: 12px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.grid-value {
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark);
}

/* Premium Textarea Styling inside Profile Content Cards */
.profile-content-card textarea.form-control {
  min-height: 150px;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  background-color: #f8fafc;
  padding: 16px 20px;
  font-family: var(--font-main);
  font-size: 15px;
  color: var(--text-dark);
  transition: all 0.3s ease;
  resize: vertical;
}

.profile-content-card textarea.form-control:focus {
  outline: none;
  background-color: #ffffff;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 4px rgba(85, 98, 229, 0.08);
}

/* Call History Page Styles */
.call-history-list-container {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #edf2f7;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01);
  padding: 0;
  margin-top: 20px;
}

.call-history-item {
  display: flex;
  align-items: center;
  padding: 12px 24px;
  border-bottom: 1px solid #f1f5f9;
  transition: all 0.3s ease;
  position: relative;
  gap: 20px;
}

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

.call-history-item:hover {
  background: #fafafc;
}

.call-item-photo-wrap {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  border: 2px solid #ffffff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}

.call-item-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.call-history-item:hover .call-item-photo {
  transform: scale(1.08);
}

.call-item-details {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.call-item-name {
  font-family: var(--font-heading) !important;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 0;
}

.call-item-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.call-item-time {
  font-family: var(--font-main);
  font-size: 13.5px;
  color: #94a3b8;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
}

.call-item-status {
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.status-arrow {
  display: inline-flex;
  align-items: center;
  font-size: 15px;
}

/* Incoming / Outgoing / Missed status colors */
.status-incoming {
  color: #10b981;
}

.status-outgoing {
  color: #3b82f6;
}

.status-missed {
  color: #f43f5e;
}

.call-item-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-call-action {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 20px;
  outline: none;
}

.btn-call-action.voice {
  background: #e6f7f2;
  color: #10b981;
}

.btn-call-action.voice:hover {
  transform: translateY(-2px);
  background: #10b981;
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.3);
}

.btn-call-action.video {
  background: #fff0f0;
  color: #ef4444;
}

.btn-call-action.video:hover {
  transform: translateY(-2px);
  background: #ef4444;
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.3);
}

/* ==========================================================
   IdealJodi Matrimony - Auto Send Interest Page Custom CSS
   ========================================================== */

/* Single Range Slider Styling */
.single-range-wrapper {
  position: relative;
  padding: 15px 0 5px 0;
}

.single-range-slider {
  width: 100%;
  height: 6px;
  background: #e2e8f0;
  border-radius: 10px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  margin: 10px 0;
  position: relative;
}

.single-range-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  border-radius: 10px;
  background: transparent;
}

.single-range-slider::-webkit-slider-thumb {
  height: 22px;
  width: 22px;
  border-radius: 50%;
  background: var(--primary-color);
  border: 3.5px solid #ffffff;
  box-shadow: 0 3px 10px rgba(115, 66, 235, 0.3);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -8px;
  transition: all 0.2s ease;
  position: relative;
  z-index: 2;
}

.single-range-slider::-webkit-slider-thumb:active {
  transform: scale(1.15);
  box-shadow: 0 4px 14px rgba(115, 66, 235, 0.4);
}

.single-range-slider::-moz-range-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  border-radius: 10px;
  background: #e2e8f0;
}

.single-range-slider::-moz-range-thumb {
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background: var(--primary-color);
  border: 3.5px solid #ffffff;
  box-shadow: 0 3px 10px rgba(115, 66, 235, 0.3);
  cursor: pointer;
  transition: all 0.2s ease;
}

/* AI Rules Badge styling */
.ai-rule-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f0fdf4;
  border: 1.5px solid #bbf7d0;
  padding: 12px 16px;
  border-radius: 16px;
  color: #166534;
  font-size: 13.5px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(22, 101, 52, 0.02);
  transition: all 0.2s ease;
  height: 100%;
}

.ai-rule-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(22, 101, 52, 0.05);
}

.ai-rule-badge iconify-icon {
  font-size: 18px;
  color: #15803d;
  flex-shrink: 0;
}

/* AI Selected Matches Cards */
.ai-match-card {
  background: #f8fafc;
  border: 1.5px solid #f1f5f9;
  border-radius: 20px;
  padding: 20px 16px;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01);
  height: 100%;
}

.ai-match-card:hover {
  background: #ffffff;
  border-color: rgba(115, 66, 235, 0.15);
  box-shadow: 0 10px 30px rgba(115, 66, 235, 0.06);
  transform: translateY(-3px);
}

.ai-match-avatar {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 12px;
  border: 4px solid #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease;
}

.ai-match-card:hover .ai-match-avatar {
  transform: scale(1.05);
}

.ai-match-name {
  font-family: var(--font-main);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 3px;
}

.ai-match-loc {
  font-family: var(--font-main);
  font-size: 13px;
  color: #64748b;
  margin-bottom: 0;
}

/* Offcanvas Sidebar Background */
.profile-offcanvas-sidebar {
  background: #f8f9fa !important;
}

/* Large Switch Toggle style */
.settings-toggle-switch {
  width: 2.8em;
  height: 1.5em;
  border-color: #cbd5e1 !important;
}

/* Info Alert Box custom styling */
.settings-alert-info-box {
  background: rgba(44, 142, 220, 0.03);
  border: 1px solid rgba(44, 142, 220, 0.08);
  border-radius: 10px;
  padding: 10px 15px;
}

.settings-alert-info-box iconify-icon {
  color: var(--secondary-color);
  font-size: 18px;
}

/* Primary Alert Box custom styling */
.settings-alert-primary-box {
  background: rgba(115, 66, 235, 0.03);
  border: 1px solid rgba(115, 66, 235, 0.08);
  border-radius: 10px;
  padding: 10px 15px;
}

.settings-alert-primary-box iconify-icon {
  color: var(--primary-color);
  font-size: 18px;
}

/* Mobile Profile Menu Toggle Button styling */
.btn-mobile-profile-menu {
  background: var(--primary-gradient) !important;
  border: none !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

.btn-mobile-profile-menu iconify-icon {
  font-size: 20px;
}

/* App Download Button Icon font-size */
.app-btn iconify-icon {
  font-size: 20px !important;
}

/* ==========================================================
   IdealJodi Matrimony - Dashboard Page Custom CSS
   ========================================================== */

/* AI Recommendation Banner style */
.ai-recommendation-banner {
  background: #ffffff;
  border: 1px solid #f1f5f9;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.ai-banner-icon-wrap {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: rgba(115, 66, 235, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
  font-size: 24px;
}

.ai-banner-title {
  font-family: var(--font-main);
  font-weight: 700;
  color: var(--text-dark);
  font-size: 19px;
  margin-bottom: 6px !important;
}

.btn-ai-match {
  background: var(--primary-gradient);
  color: #ffffff !important;
  font-weight: 700;
  font-size: 14px;
  border-radius: 50px;
  border: none;
  box-shadow: 0 6px 16px rgba(115, 66, 235, 0.2);
  transition: all 0.3s ease;
  padding: 12px 30px !important;
}

.btn-ai-match:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(115, 66, 235, 0.3);
}

/* Dashboard Member Card Styles */
.dashboard-member-card {
  background: #ffffff;
  border: 1px solid #f1f5f9;
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  margin: 10px 8px;
  /* space between cards in slider */
  display: block;
  text-decoration: none;
}

.dashboard-member-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(115, 66, 235, 0.08);
  border-color: rgba(115, 66, 235, 0.15);
}

.dashboard-member-card .card-image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.15;
  /* slightly portrait aspect ratio */
  overflow: hidden;
  background: #f8fafc;
}

.dashboard-member-card .card-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.dashboard-member-card:hover .card-image-wrap img {
  transform: scale(1.05);
}

/* Overlays on Card Image */
.dashboard-member-card .status-indicator-dot {
  position: absolute;
  top: 15px;
  left: 15px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #10b981;
  /* green for online */
  border: 2px solid #ffffff;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
  z-index: 2;
}

.dashboard-member-card .match-percentage-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  color: #ffffff;
  padding: 4px 10px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  z-index: 2;
}

.profile-info-heading .crown-badge-wrap,
.dashboard-member-card .crown-badge-wrap {
  position: absolute;
  bottom: 12px;
  left: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffb800;
  /* golden yellow */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 14px;
  box-shadow: 0 3px 8px rgba(255, 184, 0, 0.4);
  z-index: 2;
}

/* Info Section at the bottom */
.dashboard-member-card .card-info-wrap {
  padding: 16px;
  text-align: center;
}

.dashboard-member-card .member-name {
  font-family: var(--font-main);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 4px;
}

.dashboard-member-card .member-meta {
  font-family: var(--font-main);
  font-size: 13px;
  color: #64748b;
  margin-bottom: 0;
}

/* ==========================================================
   IdealJodi Matrimony - Invite Friend Page Custom CSS
   ========================================================== */

.invite-header-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(115, 66, 235, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
  font-size: 20px;
  flex-shrink: 0;
}

.invite-header-title {
  font-family: var(--font-main);
  font-weight: 700;
  color: var(--text-dark);
  font-size: 16px;
}

.invite-action-card {
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: 16px;
}

.invite-desc {
  font-family: var(--font-main);
  font-size: 14px;
  line-height: 1.6;
  color: #475569 !important;
}

.invite-link-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 50px;
  padding: 4px 6px 4px 16px;
  width: 100%;
  max-width: 420px;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
}

.invite-link-box:focus-within {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(115, 66, 235, 0.08);
}

.invite-link-input {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark) !important;
  outline: none !important;
  box-shadow: none !important;
  height: auto !important;
}

.btn-copy-link {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  transition: all 0.2s ease;
  padding: 0;
  flex-shrink: 0;
}

.btn-copy-link:hover {
  background: var(--primary-color);
  color: #ffffff;
}

.invite-social-shares {
  display: flex;
  align-items: center;
  gap: 10px;
}

.share-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
}

.share-btn:hover {
  transform: translateY(-2px);
  color: #ffffff;
}

.share-btn.whatsapp:hover {
  background: #25d366;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}

.share-btn.facebook:hover {
  background: #1877f2;
  box-shadow: 0 4px 12px rgba(24, 119, 242, 0.3);
}

.share-btn.linkedin:hover {
  background: #0077b5;
  box-shadow: 0 4px 12px rgba(0, 119, 181, 0.3);
}

.share-btn.email:hover {
  background: #ea4335;
  box-shadow: 0 4px 12px rgba(234, 67, 53, 0.3);
}

.share-btn.instagram:hover {
  background: #e1306c;
  box-shadow: 0 4px 12px rgba(225, 48, 108, 0.3);
}

/* ==========================================================
   IdealJodi Matrimony - Personalized Services Page CSS
   ========================================================== */

.personalized-hero {
  background: linear-gradient(135deg, rgba(85, 98, 229, 0.82) 0%, rgba(44, 142, 220, 0.88) 100%), url('../images/stories/story-main.png') center/cover no-repeat;
  color: var(--white);
  min-height: 580px;
  display: flex;
  align-items: center;
}

.hero-badge {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 11px;
  letter-spacing: 1px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
}

.badge-dot {
  width: 6px;
  height: 6px;
  background-color: var(--accent-orange);
  border-radius: 50%;
}

.personalized-hero .hero-title {
  font-family: var(--font-heading);
  font-size: 54px;
  line-height: 1.1;
}

.hero-subtitle {
  font-size: 16px;
  line-height: 1.6;
}

.feat-badge {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.feat-badge iconify-icon {
  color: var(--accent-orange);
  font-size: 16px;
}

.hero-stats-row {
  margin-top: 2rem;
}

.stat-card {
  min-width: 110px;
}

.stat-number {
  font-family: var(--font-heading);
  font-size: 38px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.25rem;
}

/* .stat-desc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
} */

.lead-capture-card {
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.08) !important;
}

.lead-capture-card .form-title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-dark);
}

.lead-capture-card .form-desc {
  font-size: 14px;
}

.brand-input {
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  transition: all 0.3s ease !important;
}

.brand-input:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 3px rgba(85, 98, 229, 0.12) !important;
}

.personalized-section-tag {
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--primary-color);
  font-weight: 800;
  text-transform: uppercase;
}

.personalized-section-title {
  font-family: var(--font-heading);
  font-size: 38px;
  line-height: 1.2;
  color: var(--text-dark);
}

.personalized-section-subtitle {
  font-size: 16px;
}


/* Curation styling */
.curation-couple-img {
  height: 480px;
}

.curation-img-wrap .curation-img-blob {
  position: absolute;
  top: -20px;
  left: -20px;
  width: 120px;
  height: 120px;
  background: var(--primary-gradient);
  z-index: -1;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  opacity: 0.15;
}

.curation-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(85, 98, 229, 0.08);
  color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.curation-feat-item h5 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
}

.curation-feat-item p {
  font-size: 14px;
  line-height: 1.5;
}

.btn-plan-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--primary-color);
  border-radius: 50px;
  color: var(--primary-color);
  font-weight: 700;
  font-size: 14px;
  transition: all 0.3s ease;
  background: transparent;
  text-decoration: none;
}

.btn-plan-outline:hover {
  background: var(--primary-gradient);
  color: #fff !important;
  border-color: transparent;
  box-shadow: 0 4px 15px rgba(85, 98, 229, 0.3);
}

/* Advantages section */
.advantage-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.advantage-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(85, 98, 229, 0.08);
  border-color: rgba(85, 98, 229, 0.15) !important;
}

.advantage-card .card-num {
  font-family: var(--font-heading);
  font-size: 32px;
  color: var(--primary-color);
  opacity: 0.25;
  font-weight: 700;
  transition: opacity 0.3s ease;
}

.advantage-card:hover .card-num {
  opacity: 0.8;
}

.advantage-card h5 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
}

.advantage-card p {
  font-size: 13.5px;
  line-height: 1.5;
}

/* Testimonial slider styling */
.testimonial-card {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

.testimonial-img {
  width: 140px;
  height: 140px;
  object-fit: cover;
}

.testimonial-content .couple-name {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-dark);
}

.testimonial-content .quote-text {
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.6;
}

.view-story-link {
  color: var(--primary-color);
  text-decoration: none;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.view-story-link:hover {
  color: var(--secondary-color);
}

/* Inclusions section */
.inclusion-icon-box {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(85, 98, 229, 0.08);
  color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.inclusion-heading {
  font-size: 16px;
}

.inclusion-text {
  font-size: 14px;
  line-height: 1.5;
}

/* Queries bottom section */
.queries-cta-banner {
  background: var(--primary-gradient);
  box-shadow: 0 15px 45px rgba(85, 98, 229, 0.2);
}

.queries-cta-banner .cta-heading {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
}

.queries-cta-banner .btn-light {
  color: var(--primary-color) !important;
  transition: all 0.3s ease;
}

.queries-cta-banner .btn-light:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(255, 255, 255, 0.3);
}

@media (max-width: 991px) {
  .personalized-hero .hero-title {
    font-size: 40px;
  }

  .curation-couple-img {
    height: 360px;
  }

  .personalized-section-title {
    font-size: 32px;
  }
}

/* Story filter tabs styling */
.story-tabs-wrapper {
  margin-bottom: 2rem;
}

.btn-story-filter {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #64748b;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 28px;
  border-radius: 50px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.btn-story-filter:hover {
  background: #ffffff;
  color: var(--primary-color);
  border-color: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(85, 98, 229, 0.08);
}

.btn-story-filter.active {
  background: var(--primary-gradient);
  border-color: transparent;
  color: #fff !important;
  box-shadow: 0 6px 20px rgba(115, 66, 235, 0.35);
}

/* Form inputs icons and style overrides */
.form-label-custom {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 0.5rem;
  display: block;
}

.input-icon-wrapper {
  position: relative;
}

.input-icon-wrapper iconify-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 18px;
  pointer-events: none;
  z-index: 5;
}

.input-icon-wrapper .brand-input {
  padding-left: 42px !important;
}

/* Pricing Page Refactored styles (removing inline styles) */
.pricing-card.highlighted-assisted {
  background: var(--primary-gradient);
  box-shadow: 0 15px 40px rgba(115, 66, 235, 0.15) !important;
}

.plan-badge-limited {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  font-size: 11px;
}

.plan-badge-popular {
  background: var(--accent-orange);
  color: var(--text-dark);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 50px;
  font-weight: 700;
}

.plan-title-custom {
  font-family: var(--font-heading);
  font-size: 28px;
}

.plan-desc-custom {
  font-size: 14px;
}

.plan-price-currency {
  font-size: 22px;
  font-weight: 700;
}

.plan-price-amount {
  font-size: 48px;
  font-weight: 800;
}

.plan-price-duration {
  font-size: 14px;
}

.btn-plan-filled-custom {
  background: #ffffff !important;
  color: var(--primary-color) !important;
  font-size: 15px;
  transition: all 0.3s ease;
}

.btn-plan-filled-custom:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 255, 255, 0.25);
  background: #ffffff !important;
  color: var(--primary-color) !important;
}

.plan-card-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
  opacity: 1 !important;
}

.plan-summary-title {
  font-size: 11px;
  letter-spacing: 1.5px;
}

.plan-features-ul {
  list-style: none;
}

.plan-features-li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  font-size: 14px;
}

.plan-feature-value {
  font-size: 14px;
  font-weight: 700;
}

.cta-queries-text {
  font-size: 14px;
}

.btn-queries-call {
  font-size: 16px;
  color: var(--primary-color) !important;
  transition: all 0.3s ease;
}

.btn-queries-call:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2);
}

.btn-nav-call {
  font-size: 14px;
  transition: all 0.3s ease;
}

/* Stats Box container inside Hero */
.hero-stats-box {
  max-width: 480px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

.hero-stats-box .stat-num {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 800;
  color: var(--primary-color);
}

.hero-stats-box .stat-lbl {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #64748b !important;
}

.stat-divider {
  width: 1px;
  height: 40px;
  background-color: #e2e8f0;
}

/* Video story card play actions */
.video-story-wrap {
  overflow: hidden;
}

.video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--primary-gradient);
  color: #ffffff !important;
  font-size: 22px;
  box-shadow: 0 6px 20px rgba(115, 66, 235, 0.4);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.video-play-btn:hover {
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 8px 25px rgba(115, 66, 235, 0.65);
}

.video-play-link {
  color: var(--primary-color) !important;
}

.video-play-link iconify-icon {
  vertical-align: middle;
}

/* Refinements for Lead Form & Widescreen Inline Video Testimonials */
.lead-capture-card {
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 992px) {
  .lead-capture-card {
    margin-right: 0;
  }
}

/* Override select2 container border styling to match the card theme */
.lead-capture-card .select2-container--default .select2-selection--single {
  height: 51px !important;
  background-color: #f9f9f9 !important;
  border: 1px solid #e8e8e8 !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  transition: all 0.3s ease;
  padding: 0 15px !important;
}

.lead-capture-card .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0 !important;
  font-size: 14px !important;
  color: #111 !important;
  font-weight: 500 !important;
  line-height: 47px !important;
}

.lead-capture-card .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 50px !important;
  right: 12px !important;
}

/* Widescreen Video Testimonial Card layout */
.testimonial-card.video-story-card {
  align-items: center !important;
}

.testimonial-card.video-story-card .video-story-wrap {
  width: 260px;
  height: 160px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  background: #000;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.testimonial-card.video-story-card .video-story-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.testimonial-card.video-story-card .video-story-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 16px;
}

/* Hide image and overlay when video is playing inline */
.testimonial-card.video-story-card .video-story-wrap.playing img,
.testimonial-card.video-story-card .video-story-wrap.playing .video-play-btn {
  display: none !important;
}

@media (max-width: 767px) {
  .testimonial-card.video-story-card {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .testimonial-card.video-story-card .video-story-wrap {
    width: 100% !important;
    height: 200px !important;
  }
}

/* ==========================================================
   IdealJodi Matrimony - Collapsible Match Criteria Filter Card
   ========================================================== */
.filter-collapse-card {
  border: 1px solid #edf2f7 !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  overflow: hidden;
  transition: all 0.3s ease;
}

.filter-collapse-card .card-header {
  border-bottom: 0px solid transparent !important;
  transition: all 0.3s ease;
}

/* Rounded header highlight when collapse is expanded */
.filter-collapse-card:has(.collapse.show) .card-header {
  padding-bottom: 15px !important;
}

.btn-filter-toggle {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--primary-color);
  color: #ffffff !important;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(115, 66, 235, 0.2);
}

.btn-filter-toggle:hover {
  background: #5a32c2;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(115, 66, 235, 0.3);
}

.btn-filter-toggle.collapsed {
  background: #f1f5f9;
  color: #475569 !important;
  box-shadow: none;
}

.btn-filter-toggle.collapsed:hover {
  background: #e2e8f0;
  color: var(--primary-color) !important;
}

/* Icon Toggle states */
.btn-filter-toggle .close-icon {
  display: none;
}

.btn-filter-toggle .edit-icon {
  display: block;
}

.btn-filter-toggle:not(.collapsed) .close-icon {
  display: block;
}

.btn-filter-toggle:not(.collapsed) .edit-icon {
  display: none;
}

/* Form Styles inside Collapsible Card */
#nearbyFilterForm .form-label {
  font-family: var(--font-main);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #64748b;
  margin-bottom: 8px;
  display: block;
}




#nearbyFilterForm .gender-card-label {
  font-size: 13px !important;
}

#nearbyFilterForm .card-check-icon {
  font-size: 16px !important;
  right: 12px !important;
}

/* ==========================================================
   IdealJodi Matrimony - Match From Admin Styling
   ========================================================== */
.admin-matches-list {
  border: 1px solid #edf2f7;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01);
  padding: 0px 0;
  margin-top: 20px;
  background: #ffffff;
}

.admin-match-item {
  display: flex;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #f1f5f9;
  transition: all 0.3s ease;
  position: relative;
  gap: 20px;
}

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

.admin-match-item:hover {
  background: #fafafc;
}

.admin-match-photo-wrap {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  border: 1px solid #edf2f7;
}

.admin-match-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.admin-match-item:hover .admin-match-photo {
  transform: scale(1.05);
}

.admin-match-details {
  flex-grow: 1;
  min-width: 0;
}

.admin-match-name {
  font-family: var(--font-heading) !important;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 4px;
}

.admin-match-meta {
  font-family: var(--font-main);
  font-size: 13.5px;
  color: #64748b;
  line-height: 1.5;
  margin-bottom: 4px;
}

.admin-match-actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

/* Custom button overrides for admin match buttons */
.btn-match-accept {
  background: var(--primary-gradient);
  color: #fff !important;
  border: none;
  font-weight: 700;
  padding: 10px 28px;
  border-radius: 50px;
  font-size: 13px;
  box-shadow: 0 4px 10px rgba(115, 66, 235, 0.15);
  transition: all 0.25s ease;
  cursor: pointer;
}

.btn-match-accept:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(115, 66, 235, 0.25);
}

.btn-match-reject {
  background: #f1f5f9;
  color: #475569 !important;
  border: 1px solid #e2e8f0;
  font-weight: 700;
  padding: 9px 28px;
  border-radius: 50px;
  font-size: 13px;
  transition: all 0.25s ease;
  cursor: pointer;
}

.btn-match-reject:hover {
  background: #fee2e2;
  border-color: #fecaca;
  color: #ef4444 !important;
  transform: translateY(-1px);
}

.status-badge {
  display: inline-block;
  padding: 5px 14px;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 50px;
}

.status-badge.accepted {
  background: rgba(16, 185, 129, 0.08);
  color: #10b981;
}

.status-badge.pending {
  background: rgba(245, 158, 11, 0.08);
  color: #f59e0b;
}

.status-badge.rejected {
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
}

/* ==========================================================
   IdealJodi Matrimony - My Meetings Styling
   ========================================================== */
.meetings-list-container {
  border: 1px solid #edf2f7;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01);
  padding: 0;
  margin-top: 20px;
  background: #ffffff;
}

.meeting-card-item {
  display: flex;
  align-items: flex-start;
  padding: 24px;
  border-bottom: 1px solid #f1f5f9;
  transition: all 0.3s ease;
  position: relative;
  gap: 24px;
}

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

.meeting-card-item:hover {
  background: #fafafc;
}

.meeting-photo-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.meeting-photo-wrap {
  width: 200px;
  height: 220px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #edf2f7;
  position: relative;
}

.meeting-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.meeting-card-item:hover .meeting-photo {
  transform: scale(1.05);
}

.meeting-status-badge {
  display: inline-block;
  padding: 5px 12px;
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 50px;
  text-align: center;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Badge colors matching the peach, mint, pink style */
.meeting-status-badge.badge-peach {
  background: #fffbeb;
  color: #d97706;
  border: 1px solid #fde68a;
}

.meeting-status-badge.badge-mint {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

.meeting-status-badge.badge-pink {
  background: #fdf2f8;
  color: #db2777;
  border: 1px solid #fbcfe8;
}

.meeting-status-badge.badge-red {
  background: #fef2f2;
  color: #ef4444;
  border: 1px solid #fecaca;
}

.meeting-status-badge.badge-blue {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}

.meeting-details-section {
  flex-grow: 1;
  min-width: 0;
}

.meeting-card-header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.meeting-info-heading {
  flex-grow: 1;
  min-width: 250px;
}

.meeting-name {
  font-family: var(--font-heading) !important;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 6px;
}

.meeting-desc {
  font-family: var(--font-main);
  font-size: 13.5px;
  color: #64748b;
  line-height: 1.5;
  margin-bottom: 0;
}

.meeting-actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.btn-meeting-accept {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff !important;
  border: none;
  font-weight: 700;
  padding: 9px 24px;
  border-radius: 50px;
  font-size: 13px;
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.15);
  transition: all 0.25s ease;
  cursor: pointer;
}

.btn-meeting-accept:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(16, 185, 129, 0.25);
}

.btn-meeting-reject {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #ffffff !important;
  border: none;
  font-weight: 700;
  padding: 9px 24px;
  border-radius: 50px;
  font-size: 13px;
  box-shadow: 0 4px 10px rgba(239, 68, 68, 0.15);
  transition: all 0.25s ease;
  cursor: pointer;
}

.btn-meeting-reject:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(239, 68, 68, 0.25);
}

.meeting-metadata-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  background: #f8fafc;
  padding: 14px 20px;
  border-radius: 14px;
  margin-bottom: 12px;
  border: 1px solid #f1f5f9;
}

.meta-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.meta-item .lbl {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: #94a3b8;
  letter-spacing: 0.5px;
}

.meta-item .val {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-dark);
}

.meeting-pending-info {
  font-size: 13px;
  color: #64748b;
}

/* Add Remarks Form Styling */
.add-remarks-container {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #f1f5f9;
  animation: fadeIn 0.3s ease;
}

.remarks-title {
  font-family: var(--font-heading) !important;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 10px;
}

.remarks-textarea {
  border: 1px solid #cbd5e1;
  border-radius: 14px;
  padding: 14px;
  font-size: 13.5px;
  height: 100px;
  resize: none;
  background: #f8fafc;
  transition: all 0.25s ease;
  width: 100%;
}

.remarks-textarea:focus {
  border-color: var(--primary-color);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(115, 66, 235, 0.08);
  outline: none;
}

.remarks-actions {
  display: flex;
  gap: 12px;
}

.btn-submit-remarks {
  background: var(--primary-gradient);
  color: #ffffff !important;
  border: none;
  font-weight: 700;
  padding: 10px 24px;
  border-radius: 50px;
  font-size: 13px;
  box-shadow: 0 4px 10px rgba(115, 66, 235, 0.15);
  transition: all 0.25s ease;
  cursor: pointer;
}

.btn-submit-remarks:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(115, 66, 235, 0.25);
}

.btn-cancel-remarks {
  background: #f1f5f9;
  color: #475569 !important;
  border: 1px solid #e2e8f0;
  font-weight: 700;
  padding: 9px 24px;
  border-radius: 50px;
  font-size: 13px;
  transition: all 0.25s ease;
  cursor: pointer;
}

.btn-cancel-remarks:hover {
  background: #e2e8f0;
  transform: translateY(-1px);
}

/* ==========================================================
   IdealJodi Matrimony - Rejection Modal Theme Override
   ========================================================== */
.meeting-modal-content {
  background: #ffffff !important;
  border-radius: 28px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12) !important;
  border: none !important;
}

.meeting-modal-icon-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
  margin: 0 auto;
}

.meeting-modal-icon-bubble {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--primary-gradient);
  color: #ffffff;
}

.meeting-modal-icon {
  font-size: 36px;
}

.meeting-modal-title {
  font-family: var(--font-heading) !important;
  font-size: 22px;
  color: var(--text-dark);
}

.meeting-modal-text {
  font-family: var(--font-main);
  font-size: 14.5px;
  line-height: 1.6;
}

.meeting-modal-time {
  font-size: 18px;
  color: #1e293b !important;
}

.meeting-modal-btn {
  background: var(--primary-gradient) !important;
  color: #ffffff !important;
  border-radius: 50px !important;
  border: none !important;
  padding: 10px 48px !important;
  font-size: 14px !important;
  /* text-transform: lowercase !important; */
  font-weight: 700 !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.18) !important;
}

.meeting-modal-btn:hover {
  background: #1d4ed8 !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.28) !important;
}

/* ==========================================================
   IdealJodi Matrimony - Birthday & Upgrade Modals Styling
   ========================================================== */
.birthday-modal-bubble {
  background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%) !important;
}

.upgrade-modal-bubble {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
}

.modal-highlight-box {
  background: #fffbeb;
  border: 1px dashed #fcd34d;
  border-radius: 16px;
  padding: 16px;
  font-size: 14px;
  color: #4b5563;
  line-height: 1.5;
}

.modal-feature-list {
  margin-top: 15px;
}

.modal-feature-list li {
  padding: 6px 0;
  border-bottom: 1px solid #f1f5f9;
}

.modal-feature-list li:last-child {
  border-bottom: none;
}

/* ==========================================================
   IdealJodi Matrimony - Custom Toast Showcase Styling
   ========================================================== */
.toast-showcase-wrapper {
  background: #f8fafc;
  padding: 30px;
  border-radius: 28px;
  border: 1px solid #edf2f7;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.custom-toast-card {
  display: flex;
  align-items: flex-start;
  padding: 18px 24px;
  border-radius: 24px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  position: relative;
  gap: 16px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
}

.custom-toast-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}

.toast-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 22px;
}

/* Color themes matching the screenshot exactly */
.toast-icon-box.warning {
  background: #fffbeb;
  color: #d97706;
}

.toast-icon-box.danger {
  background: #fef2f2;
  color: #ef4444;
}

.toast-icon-box.success {
  background: #ecfdf5;
  color: #10b981;
}

.toast-icon-box.info {
  background: #eff6ff;
  color: #2563eb;
}

.toast-content-box {
  flex-grow: 1;
  min-width: 0;
  padding-top: 4px;
}

.toast-title {
  font-family: var(--font-heading) !important;
  font-size: 14.5px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 4px;
  line-height: 1.3;
}

.toast-desc {
  font-family: var(--font-main);
  font-size: 13px;
  color: #64748b;
  line-height: 1.5;
  margin-bottom: 6px;
}

.toast-link {
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  margin-top: 4px;
  transition: opacity 0.2s ease;
}

.toast-link:hover {
  opacity: 0.8;
  text-decoration: underline !important;
}

.toast-link.warning {
  color: #d97706;
}

.toast-link.danger {
  color: #dc2626;
}

.toast-link.green {
  color: #059669;
}

.toast-link.blue {
  color: #2563eb;
}

.toast-close-btn {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 18px;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: color 0.2s ease;
  margin-left: 12px;
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toast-close-btn:hover {
  color: #475569;
}

/* ==========================================================
   IdealJodi Matrimony - Photo Request Blur Overlay Styling
   ========================================================== */
.photo-request-container {
  position: relative !important;
  border-radius: 24px;
  overflow: hidden !important;
}

.blur-profile-img {
  filter: blur(16px) brightness(0.8) !important;
  transform: scale(1.05) !important;
  width: 100%;
  height: 240px;
  border-radius: 24px;
  object-fit: cover;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.btn-request-photo {
  margin: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  color: var(--primary-color) !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  padding: 10px 22px !important;
  border-radius: 50px !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
  width: 167px;
}

.btn-request-photo:hover {
  background: rgba(255, 255, 255, 0.25) !important;
  border-color: #ffffff !important;
  transform: scale(1.03) !important;
}

.btn-request-photo:disabled {
  background: rgba(16, 185, 129, 0.2) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
  color: #a7f3d0 !important;
  cursor: default !important;
  transform: none !important;
}

.avatar-action-dock {
  z-index: 5 !important;
}

.centered-photo-req-btn {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 3 !important;
  margin: 0 !important;
}

.centered-photo-req-btn:hover {
  transform: translate(-50%, -50%) scale(1.03) !important;
}

/* Scoped Affiliate Page Styles */
:root {
  --aff-accent: #7342eb;
  --aff-accent-light: #f0ebff;
  --aff-blue: #2c8edc;
  --aff-blue-light: #e8f5ff;
  --aff-dark: #111111;
  --aff-muted: #666666;
  --aff-white: #ffffff;
  --aff-gradient: linear-gradient(135deg, #7342eb 0%, #2c8edc 100%);
  --aff-gradient-hover: linear-gradient(135deg, #5c2fd2 0%, #1d7bc7 100%);
  --aff-card-shadow: 0 15px 40px rgba(115, 66, 235, 0.08);
  --aff-glow-shadow: 0 15px 30px rgba(115, 66, 235, 0.2);
}

/* General layout helpers */
.aff-section-tag {
  color: var(--aff-accent);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 12px;
}

.aff-section-title {
  font-family: var(--font-heading);
  font-size: 46px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--aff-dark);
  margin-bottom: 20px;
}

.aff-section-desc {
  color: var(--aff-muted);
  font-size: 16px;
  line-height: 1.6;
}

/* Hero Section Scoped */
.aff-hero-sec {
  background: linear-gradient(180deg, #ffffff 0%, #f4faff 100%);
  position: relative;
  overflow: hidden;
  padding-bottom: 80px;
}

.aff-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--aff-accent-light);
  color: var(--aff-accent);
  padding: 8px 18px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 24px;
}

.aff-hero-title {
  font-family: var(--font-heading);
  font-size: 54px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--aff-dark);
  margin-bottom: 24px;
}

.aff-hero-desc {
  font-size: 18px;
  color: var(--aff-muted);
  line-height: 1.6;
  margin-bottom: 40px;
}

.aff-hero-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 48px;
}

.aff-btn-primary {
  background: var(--aff-gradient);
  color: var(--aff-white) !important;
  padding: 14px 32px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 15px;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  box-shadow: var(--aff-glow-shadow);
  text-decoration: none;
}

.aff-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 35px rgba(115, 66, 235, 0.3);
}

.aff-btn-secondary {
  background: transparent;
  color: var(--aff-dark) !important;
  padding: 14px 32px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 15px;
  border: 2px solid var(--aff-dark);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  text-decoration: none;
}

.aff-btn-secondary:hover {
  background: var(--aff-dark);
  color: var(--aff-white) !important;
  transform: translateY(-3px);
}

.aff-hero-stats-row {
  display: flex;
  gap: 40px;
  padding-top: 14px;
}

.aff-hero-stat-card {
  display: flex;
  flex-direction: column;
}

.aff-hero-stat-card h4 {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  color: var(--aff-accent);
  margin-bottom: 4px;
}

.aff-hero-stat-card span {
  font-size: 13px;
  color: var(--aff-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Circular Hero Graphic */
.aff-hero-graphic-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 480px;
}

.aff-hero-circle-bg {
  position: absolute;
  width: 464px;
  height: 464px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e8f5ff 0%, #f0ebff 100%);
  z-index: 1;
  animation: pulse-circle 10s ease-in-out infinite;
}

.aff-hero-photo-wrap {
  position: relative;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  overflow: hidden;
  z-index: 2;
  box-shadow: 0 20px 50px rgba(115, 66, 235, 0.15);
  border: 8px solid var(--aff-white);
  animation: float-photo 6s ease-in-out infinite;
}

.aff-hero-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

/* Floaters on Hero */
.aff-floater {
  position: absolute;
  z-index: 3;
  background: rgb(255 255 255 / 85%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 12px 20px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  gap: 12px;
}

.aff-floater-1 {
  left: 10px;
  top: 60px;
  animation: float-badge 5s ease-in-out infinite;
}

.aff-floater-2 {
  right: 10px;
  bottom: 60px;
  animation: float-badge 6s ease-in-out infinite 0.7s;
}

.aff-floater-icon-circle {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--aff-accent-light);
  color: var(--aff-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.aff-floater-icon-circle.blue {
  background: var(--aff-blue-light);
  color: var(--aff-blue);
}

.aff-floater-text h6 {
  font-size: 14px;
  font-weight: 700;
  color: var(--aff-dark);
  margin: 0;
}

.aff-floater-text span {
  font-size: 12px;
  color: var(--aff-muted);
}

/* Steps Section Scoped */
.aff-steps-sec {
  padding: 60px 0;
  background: var(--aff-white);
}

.aff-steps-grid {
  margin-top: 50px;
}

.aff-step-card {
  background: var(--aff-white);
  border: 1px solid rgba(115, 66, 235, 0.06);
  padding: 40px 30px;
  border-radius: 24px;
  box-shadow: var(--aff-card-shadow);
  transition: all 0.3s ease;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.aff-step-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 0;
  background: var(--aff-gradient);
  transition: height 0.3s ease;
}

.aff-step-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 45px rgba(115, 66, 235, 0.12);
}

.aff-step-card:hover::before {
  height: 100%;
}

.aff-step-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
}

.aff-step-num {
  font-family: var(--font-heading);
  font-size: 48px;
  color: rgba(115, 66, 235, 0.15);
  line-height: 1;
  font-weight: 700;
  transition: color 0.3s ease;
}

.aff-step-card:hover .aff-step-num {
  color: var(--aff-accent);
}

.aff-step-icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: var(--aff-accent-light);
  color: var(--aff-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  transition: all 0.3s ease;
}

.aff-step-card:hover .aff-step-icon {
  background: var(--aff-gradient);
  color: var(--aff-white);
}

.aff-step-card h3 {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--aff-dark);
  margin-bottom: 12px;
}

.aff-step-card p {
  color: var(--aff-muted);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

/* Trust Section Scoped */
.aff-trust-sec {
  padding: 60px 0;
  background: #f7fcfe;
}

/* Dashboard Mockup pure CSS */
.aff-dashboard-mockup {
  background: var(--aff-white);
  border-radius: 28px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(115, 66, 235, 0.06);
  padding: 24px;
  position: relative;
  overflow: hidden;
  margin-right: 20px;
}

.aff-db-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  padding-bottom: 16px;
  margin-bottom: 20px;
}

.aff-db-logo {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--aff-accent);
  display: flex;
  align-items: center;
  gap: 6px;
}

.aff-db-badge {
  background: #e6fdf2;
  color: #00c96c;
  padding: 4px 10px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 4px;
}

.aff-db-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.aff-db-mcard {
  background: var(--aff-blue-light);
  padding: 14px;
  border-radius: 16px;
}

.aff-db-mcard.purple {
  background: var(--aff-accent-light);
}

.aff-db-mcard.pink {
  background: #ffebeb;
}

.aff-db-mcard-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--aff-muted);
  text-transform: uppercase;
  margin-bottom: 4px;
  display: block;
}

.aff-db-mcard-val {
  font-size: 18px;
  font-weight: 800;
  color: var(--aff-dark);
  display: block;
}

.aff-db-chart-box {
  background: #fafbfc;
  border-radius: 20px;
  padding: 18px;
  border: 1px dashed rgba(0, 0, 0, 0.05);
}

.aff-db-chart-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--aff-dark);
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
}

.aff-db-chart-title span {
  color: var(--aff-accent);
}

.aff-db-bars {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 120px;
  padding-top: 10px;
}

.aff-db-bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
}

.aff-db-bar-fill {
  width: 14px;
  background: var(--aff-gradient);
  border-radius: 8px 8px 0 0;
  transition: height 1s ease;
}

.aff-db-bar-fill.accent {
  background: var(--aff-blue);
}

.aff-db-bar-lbl {
  font-size: 10px;
  color: var(--aff-muted);
  margin-top: 8px;
  font-weight: 600;
}

/* Trust Right Col Stats */
.aff-trust-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.aff-trust-stat-box {
  background: var(--aff-white);
  border-radius: 20px;
  padding: 24px 15px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.03);
}

.aff-trust-stat-num {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 700;
  color: var(--aff-accent);
  margin-bottom: 6px;
  display: block;
}

.aff-trust-stat-lbl {
  font-size: 12px;
  font-weight: 700;
  color: var(--aff-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
}

/* Benefits and Contact Wrapper */
.aff-benefits-sec {
  padding: 60px 0;
  background: var(--aff-white);
}

.aff-benefits-list {
  margin-top: 30px;
}

.aff-benefit-item {
  display: flex;
  gap: 20px;
  padding: 20px;
  border-radius: 20px;
  transition: all 0.3s ease;
  margin-bottom: 15px;
  border: 1px solid transparent;
}

.aff-benefit-item:hover {
  background: var(--aff-blue-light);
  border-color: rgba(44, 142, 220, 0.1);
}

.aff-benefit-num {
  font-family: var(--font-heading);
  font-size: 24px;
  color: var(--aff-blue);
  font-weight: 700;
  line-height: 1;
}

.aff-benefit-content h4 {
  font-size: 18px;
  font-weight: 700;
  color: var(--aff-dark);
  margin-bottom: 6px;
}

.aff-benefit-content p {
  color: var(--aff-muted);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

/* Let's talk / Ready to partner Card */
.aff-talk-card {
  background: linear-gradient(135deg, #180a43 0%, #0d0626 100%);
  border-radius: 30px;
  padding: 40px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
}

.aff-talk-card::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(115, 66, 235, 0.25) 0%, rgba(0, 0, 0, 0) 70%);
  filter: blur(10px);
}

.aff-talk-card::after {
  content: '';
  position: absolute;
  bottom: -100px;
  left: -100px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(44, 142, 220, 0.25) 0%, rgba(0, 0, 0, 0) 70%);
  filter: blur(10px);
}

.aff-talk-badge {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #ffb800;
  color: var(--aff-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 11px;
  line-height: 1.1;
  text-transform: uppercase;
  margin-bottom: 28px;
  box-shadow: 0 10px 20px rgba(255, 184, 0, 0.25);
}

.aff-talk-title {
  font-family: var(--font-heading);
  font-size: 32px;
  color: var(--aff-white);
  margin-bottom: 12px;
}

.aff-talk-desc {
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 32px;
}

.aff-talk-btn-group {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.aff-btn-talk-primary {
  background: var(--aff-gradient);
  color: var(--aff-white) !important;
  padding: 12px 24px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 14px;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  text-decoration: none;
}

.aff-btn-talk-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--aff-glow-shadow);
}

.aff-btn-talk-secondary {
  background: transparent;
  color: var(--aff-white) !important;
  padding: 12px 24px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 14px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  text-decoration: none;
}

.aff-btn-talk-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--aff-white);
  transform: translateY(-2px);
}

.aff-testimonial-box {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.aff-testi-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--aff-blue);
}

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

.aff-testi-text {
  flex-grow: 1;
}

.aff-testi-quote {
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  font-style: italic;
  margin-bottom: 4px;
  line-height: 1.4;
}

.aff-testi-author {
  color: var(--aff-blue);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

/* CTA Section Banner */
.aff-cta-sec {
  padding: 60px 0;
  background: var(--aff-white);
}

.aff-cta-banner {
  background: var(--aff-gradient);
  border-radius: 32px;
  padding: 60px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(115, 66, 235, 0.2);
}

.aff-cta-banner::before {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  top: -150px;
  left: -150px;
  pointer-events: none;
}

.aff-cta-banner::after {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  bottom: -150px;
  right: -150px;
  pointer-events: none;
}

.aff-cta-title {
  font-family: var(--font-heading);
  font-size: 42px;
  color: var(--aff-white);
  margin-bottom: 16px;
  font-weight: 400;
}

.aff-cta-desc {
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  max-width: 650px;
  margin: 0 auto 36px;
  line-height: 1.6;
}

.aff-btn-cta-white {
  background: var(--aff-white);
  color: var(--aff-accent) !important;
  padding: 14px 36px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 16px;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
  text-decoration: none;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.aff-btn-cta-white:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

/* Keyframe Animations */
@keyframes pulse-circle {

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

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

@keyframes float-photo {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }
}

@keyframes float-badge {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

/* Scoped Affiliate Login Page Overrides and Visuals */
.login-form-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #555;
  text-transform: none !important;
  margin-bottom: 8px;
  letter-spacing: normal !important;
}

.login-divider.lowercase span {
  text-transform: none !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  color: #666 !important;
}

/* Custom Visuals for the Affiliate Login Card Left Side */
.aff-login-visuals {
  position: relative;
  height: 380px;
  margin-bottom: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.aff-login-card {
  background: #fff;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 20px 50px rgba(115, 66, 235, 0.1);
  border: 1px solid rgba(115, 66, 235, 0.05);
  position: absolute;
  transition: all 0.3s ease;
}

.aff-login-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 25px 60px rgba(115, 66, 235, 0.15);
}

.aff-login-card-1 {
  width: 230px;
  left: 20px;
  top: 60px;
  transform: rotate(-6deg);
  z-index: 1;
}

.aff-login-card-1:hover {
  transform: rotate(-6deg) translateY(-5px) scale(1.02);
  z-index: 3;
}

.aff-login-card-2 {
  width: 210px;
  right: 20px;
  bottom: 80px;
  transform: rotate(6deg);
  z-index: 2;
}

.aff-login-card-2:hover {
  transform: rotate(6deg) translateY(-5px) scale(1.02);
  z-index: 3;
}

.aff-login-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.aff-login-icon-box.accent {
  background: #f0ebff;
  color: #7342eb;
}

.aff-login-icon-box.blue {
  background: #e8f5ff;
  color: #2c8edc;
}

.aff-login-card-num {
  font-size: 28px;
  font-weight: 800;
  color: #111;
  font-family: var(--font-heading);
  margin-top: 12px;
}

.aff-login-growth-badge {
  position: absolute;
  top: -15px;
  left: -15px;
  background: #e6fdf2;
  border: 1px solid #cbf7e2;
  padding: 6px 12px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05);
}

.aff-login-growth-pct {
  color: #00c96c;
  font-size: 13px;
  font-weight: 800;
}

/* Scoped Affiliate Register Page Styles */
.aff-register-capsule {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f9f9fc;
  border: 1.5px solid #e8e8e8;
  border-radius: 14px;
  padding: 14px 20px;
  cursor: pointer;
  user-select: none;
  transition: all 0.3s ease;
  height: 51px;
}

.aff-register-capsule:hover {
  border-color: var(--primary-color);
  background: #fff;
}

.aff-register-capsule input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.capsule-check {
  height: 22px;
  width: 22px;
  background-color: #fff;
  border-radius: 50%;
  border: 1.5px solid #d2d6dc;
  display: inline-block;
  position: relative;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.aff-register-capsule input:checked~.capsule-check {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.capsule-check:after {
  content: "";
  position: absolute;
  display: none;
  left: 7.5px;
  top: 4px;
  width: 5px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.aff-register-capsule input:checked~.capsule-check:after {
  display: block;
}

.capsule-text {
  font-size: 14px;
  font-weight: 600;
  color: #444;
}

.aff-register-capsule input:checked~.capsule-text {
  color: var(--text-dark);
}

/* Upload File Area */
.aff-upload-dragzone {
  border: 2px dashed #e2e8f0;
  border-radius: 16px;
  padding: 30px 20px;
  text-align: center;
  background: #fbfbfd;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.aff-upload-dragzone:hover {
  border-color: var(--primary-color);
  background: #f5f3ff;
}

.upload-icon-circle {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #a0aec0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
  margin-bottom: 12px;
  transition: all 0.3s ease;
}

.aff-upload-dragzone:hover .upload-icon-circle {
  color: var(--primary-color);
  transform: translateY(-2px);
}

.upload-desc {
  font-size: 13.5px;
  color: #718096;
  margin-bottom: 4px;
  font-weight: 500;
}

.upload-browse {
  font-size: 13.5px;
  color: #718096;
  margin: 0;
  font-weight: 500;
}

.btn-browse-file {
  color: var(--primary-color);
  font-weight: 700;
  text-decoration: none;
}

.btn-browse-file:hover {
  text-decoration: underline;
}

.error {
  color: #df0000;
  font-size: 14px;
}

/* Language Dropdown Custom Styling */
.lang-dropdown-menu {
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.05);
  overflow: hidden;
  padding: 8px 0;
  min-width: 160px;
  animation: dropdownFadeIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

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

.lang-dropdown-menu .dropdown-item {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dark);
  padding: 8px 16px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lang-dropdown-menu .dropdown-item:hover {
  background-color: rgba(115, 66, 235, 0.05);
  color: var(--primary-color);
}

.lang-dropdown-menu .dropdown-item.active {
  background-color: var(--primary-color) !important;
  color: var(--white) !important;
}

.lang-dropdown-menu .dropdown-item.active .check-icon {
  color: var(--white) !important;
}

.lang-dropdown-menu .check-icon {
  font-size: 14px;
  color: var(--primary-color);
}

/* Mobile Sidebar Specific active styles */
.sidebar-submenu .submenu-link.active {
  color: var(--primary-color);
  background: rgba(115, 66, 235, 0.08);
  font-weight: 700;
}

.sidebar-submenu .submenu-link.active .check-icon {
  display: inline-block !important;
}

.lang-dropdown {
  border: 1px solid #dbdbdb;
  padding: 7px;
  margin-left: 18px;
  border-radius: 15px;
}

/* Prevent flash of unstyled/oversized slides before Slick initializes */
.members-slider:not(.slick-initialized) {
    display: flex;
    overflow: hidden;
}

.members-slider:not(.slick-initialized) > div {
    flex: 0 0 25%;
    max-width: 25%;
    /* padding: 0 8px; match your slick gutter if any */
}

@media (max-width: 1200px) {
    .members-slider:not(.slick-initialized) > div {
        flex-basis: 33.333%;
        max-width: 33.333%;
    }
}

@media (max-width: 992px) {
    .members-slider:not(.slick-initialized) > div {
        flex-basis: 50%;
        max-width: 50%;
    }
}

@media (max-width: 768px) {
    .members-slider:not(.slick-initialized) > div {
        flex-basis: 100%;
        max-width: 100%;
    }
}