/* --------------------------------------------
   Global Variables & Base Styles
-------------------------------------------- */
:root {
  /* Colors */
  --gray-100: #F7F7F7;
  --gray-200: #E0E0E0;
  --gray-300: #CCCCCC;
  --gray-400: #B8B8B8;
  --gray-500: #A3A3A3;
  --gray-600: #808080;
  --gray-700: #666666;
  --gray-800: #404040;
  --gray-900: #262626;

  --alert-green: #2D936C;
  --alert-red: #D64045;
  --alert-amber: #FFA500;

  --brand-primary: #027959;
  --brand-secondary: #F28C38;
  --btn-primary-bg: #027959;
  --btn-secondary-bg: #FEF0E6;
  --btn-primary-font-color: #ECECEC;
  --btn-secondary-font-color: #F28C38;
  --brand-white: #ECECEC;
  --brand-black: #1A1A1A;

  --section-primary: #ffffff;

  --primary-100: #E6F3F0;
  --primary-200: #C0E0D9;
  --primary-300: #9ACDC2;
  --primary-400: #74BAAB;
  --primary-500: #4EA794;
  --primary-600: #027959;
  --primary-700: #026149;
  --primary-800: #014A38;
  --primary-900: #013328;

  --secondary-100: #FEF0E6;
  --secondary-200: #FDD9BF;
  --secondary-300: #FCC399;
  --secondary-400: #FBAC72;
  --secondary-500: #F9964C;
  --secondary-600: #F28C38;
  --secondary-700: #E07420;
  --secondary-800: #B85D19;
  --secondary-900: #904712;

  --hero-fill:#FFFFFF;
  --result-card:#F7F7F7;
  --partner-100: #F7F7F7;

  --header-link-font:#027959;
  --toggle-color:#027959;

  --input-default: #ffffff;

  --bg-200: #E0E0E0;

  /* Font Families */
  --font-family-primary: 'Poppins', Arial, Helvetica, Verdana, sans-serif; /* For h1, h2 */
  --font-family-secondary: 'Source Sans Pro', Georgia, 'Times New Roman', Times, serif; /* For h3, body text */

  /* Typography Variables */
  /* H1 */
  --font-size-h1: 40px;
  --line-height-h1: 48px;
  --font-weight-h1: 700;

  /* H2 */
  --font-size-h2: 20px;
  --line-height-h2: 28px;
  --font-weight-h2: 700;

  /* H3 */
  --font-size-h3: 16px;
  --line-height-h3: normal;
  --font-weight-h3: 700;

  /* Body */
  --font-size-body: 16px;
  --line-height-body: 20px;
  --font-weight-body: 400;

  /* Body Large */
  --font-size-body-lg: 20px;
  --line-height-body-lg: 24px;
  --font-weight-body-lg: 400;

  /* Body Small */
  --font-size-body-sm: 12px;
  --line-height-body-sm: 16px;
  --font-weight-body-sm: 400;

  /* Link / Body Link */
  --font-size-link: 16px;
  --line-height-link: 20px;
  --font-weight-link: 600;

}

[data-theme="dark"] {
  --brand-primary: #03A67C;
  --brand-secondary: #F28C38;
  --secondary-100: #1E1E1E;
  /*--brand-white: #1A1A1A;*/
  --gray-100: #03A67C;
  --brand-black: #E0E0E0;
  --primary-100: #1A1A1A;
  --input-default: #1A1A1A;
  --hero-fill: #1E1E1E;
  --result-card: #1E1E1E;
  --primary-200:#1E1E1E;
  --primary-800: oklch(36.4% 0.0719 169.64);
  --btn-primary-bg: #03A67C;
  --btn-secondary-bg: #1A1A1A;
  --btn-primary-font-color: #ECECEC;
  --btn-secondary-font-color: #F28C38;
  --partner-100: #F7F7F7;
  --header-link-font:#E0E0E0;
  --toggle-color:#E0E0E0;
  --section-primary: #1A1A1A;
  --bg-200: #1A1A1A;


  header .logo-dnx-image {
    content: url('/images/DNX-logotype-white.svg');
    /*width:40px;*/
    height:24px;
  }


  .search-spinner-width {
    height:270px;
    width:270px;
    margin:auto;
    animation: pulse 1.5s infinite ease-in-out;
    border: var(--brand-primary) solid 1px;
    border-radius: 16px;
    padding: 5px;
    background-color: var(--section-primary)!important;
  }


  /* Spinner */

  .search-spinner {
    background-image: url("/images/DNX-logotype-white.svg"); /* Ensure the path is correct */
    background-size: contain; /* Resize the image to fit */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Prevent image repetition */
    height:250px;
    width:250px;
    z-index: 10000;
    margin:auto;
    background-color: var(--section-primary)!important;
  }



  /* Spinner End */

  /* Mobile Screen Sizes */
  @media (max-width: 768px) {

    header .logo-dnx-image {
      content: url('/images/logo-dnx-light-mode.svg');
      width:40px;
      height:40px;
    }

    .search-spinner-width {
      height:120px;
      width:120px;
      margin:auto;
      animation: pulse 1.5s infinite ease-in-out;
      border: var(--brand-primary) solid 1px;
      border-radius: 16px;
      padding: 5px;
      background-color: var(--section-primary)!important;
    }

    .search-spinner {
      background-image: url("/images/logo-dnx-light-mode.svg"); /* Ensure the path is correct */
      background-size: contain; /* Resize the image to fit */
      background-position: center; /* Center the image */
      background-repeat: no-repeat; /* Prevent image repetition */
      height:100px;
      width:100px;
      z-index: 10000;
      margin:auto;
      background-color: var(--section-primary)!important;
    }

  }
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: var(--primary-100);
  z-index: 100;
  font-family: var(--font-family-secondary);
}

@keyframes move-right-to-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-300px); }
}

/* --------------------------------------------
   Header
-------------------------------------------- */
header {
  z-index: auto;
}

header .global-header,
header .global-header * {
  box-sizing: border-box;
}

header .global-header {
  background: var(--gray-100);
  padding: 24px;
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: center;
  justify-content: center;
  position: sticky;
  z-index: 1;
}

header .header-main-row {
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 100%;
  position: relative;
  height: 40px;
}

header .logo-container {
  flex-shrink: 0;
  /*height: 40px;*/
  position: relative;
}

header .logo-dnx-image {
  overflow: visible;
  width:67px;
}

/*header .logo-dnx-image {*/
/*  content: url('/images/DNX-logotype-green.svg');*/
/*  height:24px;*/
/*}*/

.search-spinner-width {
  height:270px;
  width:270px;
  margin:auto;
  animation: pulse 1.5s infinite ease-in-out;
  border: var(--brand-primary) solid 1px;
  border-radius: 16px;
  padding: 5px;
  background-color: var(--section-primary)!important;
}

.search-spinner {
  background-image: url("/images/DNX-logotype-green.svg"); /* Ensure the path is correct */
  background-size: contain; /* Resize the image to fit */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Prevent image repetition */
  height:250px;
  width:250px;
  z-index: 10000;
  margin:auto;
  background-color: var(--section-primary)!important;
}

@media (max-width: 768px) {
  header .logo-dnx-image {
    content: url('/images/logo-dnx-light-mode.svg');
    width:40px;
    height:40px;
  }

  .search-spinner-width {
    height:120px;
    width:120px;
    margin:auto;
    animation: pulse 1.5s infinite ease-in-out;
    border: var(--brand-primary) solid 1px;
    border-radius: 16px;
    padding: 5px;
    background-color: var(--section-primary)!important;
  }

  .search-spinner {
    background-image: url("/images/logo-dnx-light-mode.svg"); /* Ensure the path is correct */
    background-size: contain; /* Resize the image to fit */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Prevent image repetition */
    height:100px;
    width:100px;
    z-index: 10000;
    margin:auto;
    background-color: var(--section-primary)!important;
  }

}



header .header-title {
  color: var(--brand-black);
  text-align: center;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  font-weight: var(--font-weight-h2);
  position: relative;
  flex: 1;
}

header .nav-link-primary {
  color: var(--header-link-font);
  text-align: center;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-h3);
  text-decoration: none;
  position: relative;
}

header .icon-menu-container {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  position: relative;
}

header .icon-menu-bars {
  width: 24px;
  height: 24px;
  position: relative;
  overflow: visible;
}

header .notification-dot {
  background: var(--alert-red);
  border-radius: 50%;
  border: 2px solid var(--gray-100);
  width: 8px;
  height: 8px;
  position: absolute;
  right: 8px;
  bottom: 24px;
}

.nav-bars {
  color: var(--brand-black);
}

/* Shared Fonts */

.section-heading {
  color: var(--brand-black);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-body, 16px);
  line-height: var(--line-height-body, 20px);
  font-weight: var(--font-weight-body, 700);
}

.section-body {
  color: var(--brand-black);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-body, 16px);
  line-height: var(--line-height-body, 20px);
  font-weight: var(--font-weight-body, 400);
}

/* Shared Fonts End */


/* --------------------------------------------
   Home Page (Hero)
-------------------------------------------- */
.home-page-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  position: relative;
  overflow-y: auto;
}

.home-hero-section {
  background: var(--primary-100);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  position: relative;
}

.home-hero {
  padding: 80px 24px;
  display: flex;
  flex-direction: column;
  gap: 44px;
  align-items: center;
  width: 100%;
  position: relative;
}

.home-hero__intro {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  width: 100%;
  position: relative;
}

.home-hero__title {
  color: var(--brand-black);
  text-align: center;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  font-weight: var(--font-weight-h1);
  width: 100%;
  position: relative;
}

.home-hero__subtitle {
  color: var(--brand-black);
  text-align: center;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-body-lg);
  font-weight: var(--font-weight-body-lg);
  width: 100%;
  position: relative;
}

.home-hero__content-area {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  width: 100%;
  position: relative;
}

.home-hero__card-white {
  background: var(--hero-fill);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  width: 100%;
  max-width: 768px;
  position: relative;
  box-shadow: 0 0 4px 4px rgba(2, 121, 89, 0.08);
  overflow: hidden;
}

.home-hero__info-column {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  width: 100%;
  max-width: 480px;
  position: relative;
}

.home-hero__info-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  width: 100%;
  position: relative;
}

.home-hero__subheading-green {
  color: var(--brand-primary);
  text-align: center;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  font-weight: var(--font-weight-h2);
  width: 100%;
}

.home-hero__text {
  color: var(--brand-black);
  text-align: center;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: var(--font-weight-body);
  width: 100%;
}

.btn-primary-full {
  background: var(--brand-primary);
  border-radius: 28px;
  border: 1px solid var(--alert-green);
  padding: 16px;
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 480px;
  position: relative;
  text-decoration: none;
}

.btn-primary-full-text {
  color: var(--brand-white);
  text-align: center;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-h1);
  line-height: 16px;
  text-decoration: none;
  position: relative;
}

.btn-primary-full a {
  color: var(--brand-white) !important;
}

.btn-secondary-full a {
  color: var(--brand-secondary) !important;
  text-decoration: none;
}

.home-hero__video-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  width: 100%;
  position: relative;
}

.home-hero__video {
  width: 100%;
  max-width: 720px;
  height: auto;
  position: relative;
  border-radius: 16px;
}

.home-hero__card-orange {
  background: var(--hero-fill);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  width: 100%;
  max-width: 768px;
  position: relative;
  box-shadow: 0px 0px 4px 4px rgba(242, 140, 56, 0.08);
  overflow: hidden;
}

.home-hero__orange-info-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  width: 100%;
  max-width: 480px;
  position: relative;
}

.home-hero__subheading-orange {
  color: var(--brand-secondary);
  text-align: center;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  font-weight: var(--font-weight-h2);
  width: 100%;
}

.home-hero__text-orange {
  color: var(--brand-black);
  text-align: center;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: var(--font-weight-body);
  width: 100%;
}

.home-hero__input-field-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  width: 100%;
  max-width: 480px;
  position: relative;
}

.home-hero__label-instruction {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  position: relative;
}

.home-hero__label {
  color: var(--brand-black);
  text-align: center;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-h3);
  width: 100%;
  position: relative;
}

.home-hero__input-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  width: 100%;
  max-width: 480px;
  position: relative;
}

.home-hero__input-box {
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid var(--brand-black);
  padding: 8px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  width: 100%;
  position: relative;
}

.home-hero__text-input {
  color: var(--gray-500);
  text-align: left;
  font-family: var(--font-family-secondary);
  font-size: 20px;
  font-weight: 400;
  border: none!important;
  padding-left: 10px;
  flex: 1;
  text-decoration: none;
  outline-color: transparent;
  width:100%;
}

.btn-secondary-full {
  background: var(--secondary-100);
  border-radius: 28px;
  border: 1px solid var(--brand-secondary);
  padding: 16px;
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 480px;
  position: relative;
}

.btn-secondary-full-text {
  color: var(--brand-secondary);
  text-align: center;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-h3);
  line-height: 16px;
  font-weight: var(--font-weight-h1);
  text-decoration: none;
  position: relative;
}

.btn-secondary-full-text:hover {
  color: var(--brand-secondary);
}

/* Partners Section */
.partners-section {
  padding: 80px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  width: 100%;
  position: relative;
}

.partners-card {
  background: var(--primary-200);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: row;
  gap: 16px;
  /*flex-wrap: wrap;*/
  align-content: center;
  width: 100%;
  max-width: 768px;
  position: relative;
}

.partners-card__info-column {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1;
  position: relative;
}

.partners-card__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  position: relative;
}

.partners-title {
  color: var(--brand-black);
  text-align: center;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  font-weight: var(--font-weight-h2);
  width: 100%;
  position: relative;
}

.partners-subtitle {
  color: var(--brand-black);
  text-align: center;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-body-lg);
  font-weight: var(--font-weight-body-lg);
  width: 100%;
  position: relative;
}

.partners-list {
  display: flex;
  flex-direction: row;
  gap: 16px;
  flex-wrap: wrap;
  align-content: flex-start;
  flex: 1;
  position: relative;
}

.partners-item {
  background: var(--partner-100);
  padding: 8px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 137.5px;
  height: 40px;
  position: relative;
}

.inquiries {
  color: var(--brand-black);
}

.inquiries a {
  color: var(--brand-black);
}

/* Footer */
.footer {
  background: var(--primary-900);
  padding: 24px 16px 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  text-align: center;
}

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

.footer-logo img {
  width: 40px;
  height: 40px;
  margin-bottom: 16px;
}

.footer-text {
  color: var(--brand-white);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-body-sm);
  margin-bottom: 16px;
}

.footer-links {
  display: flex;
  gap: 16px;
}

.footer-links a {
  color: var(--brand-white);
  text-decoration: underline;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-body-sm);
}

/* Menu / Navbar */
.navbar {
  max-width: 1232px;
  width: 100%;
}

.navbar-toggler {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--brand-primary);
  cursor: pointer;
}

/*!* Sliding Menu *!*/
/*.menu-overlay {*/
/*  position: fixed;*/
/*  top: 0;*/
/*  right: -100%;*/
/*  width: 100%;*/
/*  max-width: 394px;*/
/*  height: 100%;*/
/*  background-color: var(--primary-800);*/
/*  color: var(--brand-white);*/
/*  box-shadow: -4px 0 8px rgba(0, 0, 0, 0.2);*/
/*  transition: right 0.3s ease;*/
/*  z-index: 10001;*/
/*  overflow-y: auto;*/
/*}*/

/*.menu-overlay.active {*/
/*  right: 0;*/
/*}*/

/*.menu-content {*/
/*  padding: 20px;*/
/*  display: flex;*/
/*  flex-direction: column;*/
/*  z-index: 9999;*/
/*}*/

/*.menu-list {*/
/*  list-style: none;*/
/*  padding: 0;*/
/*  margin: 0;*/
/*}*/

/*.menu-list .nav-item {*/
/*  margin-bottom: 16px;*/
/*}*/

/*.menu-list .nav-link {*/
/*  color: var(--brand-white);*/
/*  font-family: var(--font-family-secondary);*/
/*  font-size: var(--font-size-h3);*/
/*  font-weight: 500; !* h3-font-weight is 700, for slight difference we can just use 500 here directly *!*/
/*  display: flex;*/
/*  align-items: center;*/
/*  justify-content: space-between;*/
/*  text-decoration: none;*/
/*  transition: color 0.3s ease;*/
/*}*/

/*.menu-list .nav-link:hover {*/
/*  color: var(--brand-secondary);*/
/*}*/

/*.nav-item .nav-disabled {*/
/*  color: #777;*/
/*}*/

/*.close-menu {*/
/*  background: none;*/
/*  border: none;*/
/*  font-size: 1.5rem;*/
/*  color: var(--brand-white);*/
/*  align-self: flex-end;*/
/*  cursor: pointer;*/
/*  margin-bottom: 20px;*/
/*}*/

/*!* Toggle Switch (Dark Mode) *!*/
/*.toggle-switch {*/
/*  width: 50px;*/
/*  height: 25px;*/
/*  background-color: var(--gray-100);*/
/*  border-radius: 25px;*/
/*  position: relative;*/
/*  cursor: pointer;*/
/*  transition: background-color 0.3s ease;*/
/*}*/

/*.toggle-switch .toggle-knob {*/
/*  width: 21px;*/
/*  height: 21px;*/
/*  background-color: var(--toggle-color);*/
/*  border-width: 1px;*/
/*  border-color: var(--brand-black);*/
/*  border-radius: 50%;*/
/*  position: absolute;*/
/*  top: 2px;*/
/*  left: 2px;*/
/*  transition: left 0.3s ease;*/
/*}*/

/*.toggle-switch.active {*/
/*  background-color: var(--brand-primary);*/
/*}*/

/*.toggle-switch.active .toggle-knob {*/
/*  left: 25px;*/
/*}*/

/* Scrolling Domain Successes Section */
.card-successes {
  background: var(--primary-400);
  padding: 24px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.successes-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 1280px;
  position: relative;
}

.successes-title {
  color: var(--primary-800);
  text-align: center;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  font-weight: var(--font-weight-h2);
  width: 100%;
  position: relative;
}

.scrolling-container {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.domain-successes-container {
  max-width: 1272px;
  overflow: hidden;
  margin: auto;
  /* Ensure the container has enough height if needed */
  height: 116px;
}

.domain-successes {
  display: flex;
  gap: 16px;
  /* Ensure the element’s width is as wide as its content */
  width: max-content;
  /* Apply the animation that uses the dynamic distance */
  animation: scroll-left linear infinite;
  /* The duration is set dynamically via inline style from JS */
}

/* Define the keyframes to move the container left by the measured distance */
@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(var(--scroll-distance));
  }
}

.world-class-text {
  color: var(--primary-800);
  text-align: center;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-body-lg);
  font-weight: var(--font-weight-body-lg);
  width: 100%;
  position: relative;
}

.example-domain {
  border: 1px solid var(--primary-800);
  padding: 8px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
  position: relative;
}

/* Additional classes for advanced search, domain search, concierge, offers made, and transactions 
   would similarly use var(--font-family-primary) for h1/h2-level headings 
   and var(--font-family-secondary) for body/h3-level text. 
*/

/* --------------------------------------------
   Concierge
-------------------------------------------- */

/* The concierge section likely had a container and content wrapper.
   We'll assume something like .concierge-container and .concierge-content 
   based on previous naming patterns. We've already partially mentioned them,
   but let's finalize their styling with the variables. */

.concierge-container {
  /* Container for the concierge page (if needed) */
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.concierge-content {
  /* Already defined conceptually above */
  padding: 24px 24px 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  position: relative;
  max-width: 480px;
  width: 100%;
}

@media (max-width: 991px) {
  .concierge-content {
    /* Already defined conceptually above */
    padding: 24px 24px 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    position: relative;
    max-width: 100%;
    width: 100%;
  }
}

.concierge-intro-text {
  color: var(--brand-black);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: var(--font-weight-body);
  width: 100%;
  text-align: center;
  margin-bottom: 24px;
}

.form-field-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  position: relative;
}

.form-field-group label {
  color: var(--brand-black);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: var(--font-weight-body);
}

.text-input-field {
  background: var(--brand-white);
  border: 1px solid var(--brand-black);
  border-radius: 4px;
  padding: 8px;
  display: flex;
  gap: 10px;
  align-items: center;
  height: 40px;
  width: 100%;
  position: relative;
}

.text-input-field input,
.text-input-field textarea {
  border: none;
  flex: 1;
  color: var(--brand-black);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: var(--font-weight-body);
}

/* If there's a submit button for concierge forms, follow the btn-primary or btn-secondary patterns: */

.btn-concierge-submit {
  background: var(--brand-primary);
  border-radius: 28px;
  border: 1px solid var(--brand-primary);
  padding: 16px;
  color: var(--brand-white);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-h2);
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  width: 100%;
  max-width: 480px;
}


/* --------------------------------------------
   Offers Made
-------------------------------------------- */

/* This page might have a container .offers-made-container, 
   a list of offers .offers-list, and individual offer cards .offer-card. */

.offers-made-container {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  width: 100%;
  max-width: 1272px;
  margin: 0 auto;
}

.offers-list {
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  overflow-y: auto;
  width: 100%;
}

.offer-card {
  background: var(--section-primary);
  padding: 24px 16px;
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: center;
  width: 100%;
  border-radius: 16px;
  position: relative;
}

.offer-card-content {
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: center;
  width: 100%;
}

.offer-domain-name {
  color: var(--brand-black);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-h3);
  width: 331px;
  position: relative;
}

.offer-status {
  color: var(--brand-black);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: var(--font-weight-body);
  flex: 1;
  position: relative;
}

/* If there are actions like "View Details" or "Withdraw Offer", 
   apply the same button styles as previously: */

.btn-offer-action {
  background: var(--secondary-100);
  border-radius: 28px;
  border: 1px solid var(--brand-secondary);
  padding: 12px 16px;
  color: var(--brand-secondary);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-h3); /* or 600 if you want a stronger link weight */
  text-decoration: none;
  cursor: pointer;
}


/* --------------------------------------------
   Offer Detail
-------------------------------------------- */

/* The offer detail page might have a container, title, 
   list of messages/responses, and status indicators. */

/* Modals */

.offer-detail-container {

  @keyframes pulsing {
    0%, 100% {
      opacity: 1;
      transform: scale(1);
    }
    50% {
      opacity: 0.5;
      transform: scale(1.5);
    }
  }

  .pulse-text {
    animation: pulsing 1.5s ease-in-out infinite;
    display: inline-block;
  }
  
  #offer-update-banner {
    background-color: var(--primary-200);
    padding: 24px;
    text-align: center;
    color: var(--brand-black);
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-body);
    cursor: pointer;
    position: sticky;
    top: 0;
    z-index: 9999;
    border-radius: 16px;
    /*animation: pulsing 1.5s ease-in-out infinite;*/
  }
  
  .modal-message-offer-default {
    width: 100%;
    max-width: 361px;
    margin: auto;
    padding: 16px;
  }

  #messageForm {
    width: 100%;
  }

  .modal-message-offer-default,
  .modal-message-offer-default * {
    box-sizing: border-box;
  }
  .modal-message-offer-default {
    background: var(--bg-200, #e0e0e0);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center;
    justify-content: flex-end;
    position: relative;
  }

  .offer-message-textarea {
    height:100px!important;
  }

  .modal-counter-offer-default {
    width: 100%;
    max-width: 361px;
    margin: auto;
    padding: 16px;
  }

  #counterForm {
    width: 100%;
  }

  .modal-counter-offer-default,
  .modal-counter-offer-default * {
    box-sizing: border-box;
  }
  .modal-counter-offer-default {
    background: var(--bg-200, #e0e0e0);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center;
    justify-content: flex-end;
    position: relative;
  }
  .frame-1410127735 {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    justify-content: flex-start;
    flex: 1;
    position: relative;
  }
  .content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
  }
  .frame-49 {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
  }
  .counter-offer, .accept-counter, .message-offer {
    color: var(--brand-black);
    text-align: left;
    font-family: var(--font-family-primary);
    font-size: 20px;
    line-height: 24px;
    font-weight: 700;
    position: relative;
    flex: 1;
  }
  .icon-font-awesome-free-regular-t-times-circle {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    position: relative;
    overflow: visible;
  }
  .field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
  }
  .label-and-instruction {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
  }
  .current-password {
    color: var(--brand-black, #1a1a1a);
    text-align: left;
    font-family: var(--font-family-primary);
    font-size: 16px;
    font-weight: 700;
    position: relative;
    align-self: stretch;
    height: 23px;
  }
  .field2 {
    /*color: var(--brand-black, #1a1a1a);*/
    background: var(--brand-white);
    border-radius: 4px;
    border-style: solid;
    border-color: var(--brand-black, #1a1a1a);
    border-width: 1px;
    padding: 8px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    height: 40px;
    position: relative;
  }
  .placeholder {
    /*color: var(--brand-black, #1a1a1a);*/
    background: var(--brand-white);
    text-align: left;
    font-family: var(--font-family-secondary);
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
    position: relative;
    flex: 1;
    border: none;
    height: 100%;
  }
  .actions {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
  }
  .btn {
    background: var(--secondary-100, #fef0e6);
    border-radius: 28px;
    border-style: solid;
    border-color: var(--brand-secondary, #f28c38);
    border-width: 1px;
    padding: 16px;
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
  }
  .accept {
    color: var(--brand-secondary, #f28c38);
    text-align: center;
    font-family: var(--font-family-primary);
    font-size: 16px;
    line-height: 16px;
    font-weight: 700;
    position: relative;
  }
  .btn2 {
    background: var(--brand-primary, #027959);
    border-radius: 28px;
    border-style: solid;
    border-color: var(--brand-primary, #027959);
    border-width: 1px;
    padding: 16px;
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;
    justify-content: center;
    flex: 1;
    position: relative;
  }
  .accept2 {
    color: var(--brand-white, #ececec);
    text-align: center;
    font-family: var(--font-family-primary);
    font-size: 16px;
    line-height: 16px;
    font-weight: 700;
    position: relative;
  }

  .modal.accept-counter {
    position: fixed; /* Make it fixed to the viewport */
    top: 120px; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Align perfectly to center */
    z-index: 1050; /* Ensure it appears above other content */
    background: var(--bg-200); /* Match background color with other modals */
    border-radius: 16px; /* Consistent border radius */
    padding: 16px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add a shadow for visual clarity */
    display: none; /* Initially hidden */
    width: 361px;
    height: 200px;
  }

  .accept-counter {
    /* Modal Container */
    .modal-confirm-send {
      width: 100%;
      max-width: 361px;
      margin: auto;
      padding: 16px;
    }

    /* Modal Form */
    #acceptForm {
      width: 100%;
    }

    /* Modal Background and Layout */
    .modal-confirm-send,
    .modal-confirm-send * {
      box-sizing: border-box;
    }

    .modal-confirm-send {
      background: var(--bg-200);
      border-radius: 16px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      align-items: flex-start;
      justify-content: flex-start;
      position: relative;
    }

    /* Header */
    .offer-modal-header {
      display: flex;
      flex-direction: row;
      gap: 16px;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      position: relative;
      margin-bottom: 16px;
    }

    .offer-modal-title {
      color: var(--brand-black, #1a1a1a);
      text-align: left;
      font-family: var(--font-family-primary, "Poppins-Bold", sans-serif);
      font-size: 20px;
      font-weight: 700;
      line-height: 24px;
      position: relative;
    }

    /* Body */
    .offer-modal-body {
      color: var(--brand-black, #1a1a1a);
      text-align: left;
      font-family: var(--font-family-secondary, "SourceSansPro-Regular", sans-serif);
      font-size: 16px;
      line-height: 20px;
      font-weight: 400;
      position: relative;
      width: 100%;
    }

    /* Actions */
    .offer-actions {
      display: flex;
      flex-direction: row;
      gap: 8px;
      align-items: center;
      justify-content: flex-end;
      width: 100%;
      margin-top: 16px;
    }

    /* Cancel Button */
    .btn {
      background: var(--secondary-100, #fef0e6);
      border-radius: 28px;
      border-style: solid;
      border-color: var(--brand-secondary, #f28c38);
      border-width: 1px;
      padding: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .btn:hover {
      background: var(--secondary-200, #fdd9c2);
    }

    .accept {
      color: var(--brand-secondary, #f28c38);
      text-align: center;
      font-family: var(--font-family-primary, "Poppins-Bold", sans-serif);
      font-size: 16px;
      font-weight: 700;
    }

    /* Accept Button */
    .btn-primary {
      background: var(--brand-primary, #027959);
      border-radius: 28px;
      border-style: solid;
      border-color: var(--brand-primary, #027959);
      border-width: 1px;
      padding: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 1;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .accept2 {
      color: var(--brand-white, #ececec);
      text-align: center;
      font-family: var(--font-family-primary, "Poppins-Bold", sans-serif);
      font-size: 16px;
      font-weight: 700;
    }

    /* Icons */
    .fa-circle-check {
      color: var(--brand-primary, #027959);
      font-size: 24px;
      margin-right: 8px;
    }
  }


  /* Modals End */

  .decline-offer {

  }

  #counterForm {
    width: 100%;
  }

  .decline-offer {

    .frame-1410127735 {
      width: 100%;
      max-width: 361px;
      margin: auto;
      padding: 16px;
    }

    .modal-decline,
    .modal-decline * {
      box-sizing: border-box;
    }
    .modal-decline {
      background: var(--gray-200, #e0e0e0);
      border-radius: 16px;
      padding: 16px;
      display: flex;
      flex-direction: row;
      gap: 16px;
      align-items: center;
      justify-content: flex-end;
      position: relative;
    }
    .frame-1410127735 {
      display: flex;
      flex-direction: column;
      gap: 16px;
      align-items: flex-start;
      justify-content: flex-start;
      flex: 1;
      position: relative;
    }
    .content {
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: flex-start;
      justify-content: flex-start;
      align-self: stretch;
      flex-shrink: 0;
      position: relative;
    }
    .frame-49 {
      display: flex;
      flex-direction: row;
      gap: 16px;
      align-items: flex-start;
      justify-content: flex-start;
      align-self: stretch;
      flex-shrink: 0;
      position: relative;
    }
    .decline-offer {
      color: #000000;
      text-align: left;
      font-family: var(--font-family-primary);
      font-size: 20px;
      line-height: 24px;
      font-weight: 700;
      position: relative;
      flex: 1;
    }
    .icon-font-awesome-free-regular-t-times-circle {
      flex-shrink: 0;
      width: 24px;
      height: 24px;
      position: relative;
      overflow: visible;
    }
    .declining-the-offer-will-end-this-negotiation-if-you-still-want-the-domain-you-will-need-to-create-a-new-offer {
      color: #000000;
      text-align: left;
      font-family: var(--font-family-secondary);
      font-size: 16px;
      font-weight: 400;
      position: relative;
      align-self: stretch;
    }
    .actions {
      display: flex;
      flex-direction: row;
      gap: 8px;
      align-items: flex-start;
      justify-content: flex-start;
      align-self: stretch;
      flex-shrink: 0;
      position: relative;
    }
    .btn {
      background: var(--secondary-100, #fef0e6);
      border-radius: 28px;
      border-style: solid;
      border-color: var(--brand-secondary, #f28c38);
      border-width: 1px;
      padding: 16px;
      display: flex;
      flex-direction: row;
      gap: 4px;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      position: relative;
    }
    .accept {
      color: var(--brand-secondary, #f28c38);
      text-align: center;
      font-family: var(--font-family-primary);
      font-size: 16px;
      line-height: 16px;
      font-weight: 700;
      position: relative;
    }
    .btn2 {
      background: var(--alert-red, #d64045);
      border-radius: 28px;
      border-style: solid;
      border-color: var(--alert-red, #d64045);
      border-width: 1px;
      padding: 16px;
      display: flex;
      flex-direction: row;
      gap: 4px;
      align-items: center;
      justify-content: center;
      flex: 1;
      position: relative;
    }
    .accept2 {
      color: var(--brand-white, #ececec);
      text-align: center;
      font-family: var(--font-family-primary);
      font-size: 16px;
      line-height: 16px;
      font-weight: 700;
      position: relative;
      background-color: transparent;
      border: none;
    }
  }
}


.offer-detail-container {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  width: 100%;
  max-width: 1272px;
  margin: 0 auto;
}

.offer-domain-title {
  color: var(--brand-black);
  text-align: center;
  font-family: var(--font-family-primary);
  font-size: 20px; /* you can use var(--font-size-h2) if preferred */
  font-weight: var(--font-weight-h2);
  margin-bottom: 24px;
}

.offer-details-list {
  padding-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 682px; /* If needed */
  overflow-y: auto;
  width: 100%;
}

.offer-status-market-card {
  background: var(--primary-200);
  padding: 24px;
  /*display: flex;*/
  flex-direction: row;
  gap: 24px;
  align-items: center;
  justify-content: flex-end;
  height: 134px;
  position: relative;
  width: 100%;
  border-radius: 16px;
  height:100%;
}

.offer-status-card {
  background: var(--primary-100);
  padding: 24px;
  /*display: flex;*/
  flex-direction: row;
  gap: 24px;
  align-items: center;
  justify-content: flex-end;
  height: 134px;
  position: relative;
  width: 100%;
  border-radius: 16px;
  height:100%;
}

.offer-status-text {
  color: var(--alert-green);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-h3);
  width: 346px;
  height: 24px;
  position: relative;
}

.offer-status-detail,
.offer-custom-message {
  color: var(--brand-black);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: var(--font-weight-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

/* Counter offers, accept/decline modals can use similar button and input styles as above.
   Just ensure consistent naming: .modal-counter-offer, .btn-counter-offer, etc. */


/* --------------------------------------------
   Transactions
-------------------------------------------- */

/* The transactions page might have filters and a table of transactions. */

.transactions-container {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  width: 100%;
  max-width: 1272px;
  margin: 0 auto;
}

.transaction-controls {
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: flex-start;
  width: 100%;
  position: sticky;
  top: 0; /* If you want the controls to stick */
  background: var(--brand-white);
  z-index: 10;
}

.transaction-filter-box {
  background: var(--gray-200);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  width: 226px;
  position: relative;
}

.transaction-filter-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.filter-title {
  color: #000;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  font-weight: var(--font-weight-h2);
  position: relative;
}

.transaction-date-controls {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
}

.from-date-filter,
.to-date-filter {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.from-label,
.to-label {
  color: #000;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  font-weight: var(--font-weight-h2);
}

.transaction-table {
  background: var(--gray-100);
  border-radius: 16px;
  padding-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.transaction-table-header {
  background: var(--gray-200);
  border-radius: 16px 16px 0 0;
  padding: 16px 24px;
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: center;
  width: 100%;
  position: relative;
}

.transaction-date-header,
.transaction-header,
.transaction-amount-header,
.transaction-vendor-header,
.transaction-orderid-header {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: 700;
  color: var(--brand-black);
  text-align: left;
}

.transaction-date-header {
  color: var(--brand-primary);
  text-align: right;
}

.transaction-amount-header,
.transaction-orderid-header {
  text-align: right;
}

.transaction-row {
  background: var(--gray-100);
  border-bottom: 1px solid var(--gray-200);
  padding: 8px 24px;
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: center;
  height: 40px;
  width: 100%;
  position: relative;
}

.transaction-date,
.transaction-description,
.transaction-amount,
.transaction-vendor,
.transaction-order-id {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: var(--font-weight-body);
  color: #000;
  position: relative;
}

.transaction-date,
.transaction-amount,
.transaction-order-id {
  text-align: right;
}

.transaction-description,
.transaction-vendor {
  text-align: left;
}


/* --------------------------------------------
   Results Dark (Dark Mode Results)
-------------------------------------------- */

/* In dark mode, we'd invert colors. Assume a .dark-results-container 
   toggles dark theme. We'll use var() but with a .dark-results-container scope 
   we can override some variables. 
   If you have a data-theme="dark" approach, override the variables at :root[data-theme='dark'].
   For now, let's just show how you might handle it with a class. */

.dark-results-container {
  background: var(--gray-900);
  color: var(--brand-white);
}

.dark-results-layout {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: center;
  position: sticky;
}

.dark-results-container .some-heading {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-h2);
  color: var(--brand-white);
}

/* For dark mode, you'd apply similar overrides to buttons, inputs, etc.
   Just ensure consistency: e.g. a .dark-mode class or data attribute 
   that overrides the relevant variables or sets new background/foreground colors. */


/* 
At this point, we've continued from where we stopped, 
applying the same variable-driven, semantic class naming style 
to the remaining sections:
- Concierge
- Offers Made
- Offer Detail
- Transactions
- Results Dark

If additional sections exist, follow the same pattern: 
1. Replace frame-* class names with semantic names.
2. Use var() for all colors and fonts.
3. Use --font-family-primary for h1/h2 elements and --font-family-secondary for h3/body.
4. Reference size and weight variables defined at :root.
*/

/* Offers Made */


/* Offers Made Page Specific Styles */

/* Container for the entire offers made listing */
.offers-made-container {
  /* Matches the original layout intention, centered and flexible */
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  max-width: 768px; /* Adjust if needed based on your layout */
  margin: auto;
}

/* The scrolling list of offers */
.offers-list {
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  overflow-y: auto; /* Allows scrolling if many offers */
  width: 100%;
}

/* Individual offer card: similar to original "card-domain-make-offer" styling */
.offer-card {
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: center;
  justify-content: space-between; /* Distributes space evenly with domain name on the left and arrow on the right */
  width: 100%;
  position: relative;
  background: var(--section-primary);
  border-radius: 16px;
  padding: 24px 16px;
  border: 1px solid var(--primary-200);
}

/* Content inside the card: domain name, status, date/time */
.offer-card-content {
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: center;
  justify-content: flex-start;
  flex: 1;
  position: relative;
}

/* Domain name styling: bold, primary text element */
.offer-domain-name {
  color: var(--brand-black);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-h3);
  width: 331px; /* Matches original width constraints */
}

/* Container holding status, date, and time */
.offer-card-meta {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: flex-start;
  justify-content: flex-start;
  flex: 1;
  position: relative;
  width: 400px; /* Similar to original frame width */
}

/* Status text styling */
.offer-status {
  color: var(--brand-black);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: var(--font-weight-body);
  flex: 1;
}

/* Date and time styling */
.offer-date, .offer-time {
  color: var(--brand-black);
  text-align: center;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
}

/* Red status dot (like the old .ellipse-8) */
.status-dot {
  background: var(--alert-red);
  border-radius: 50%;
  border: 2px solid var(--gray-100);
  width: 8px;
  height: 8px;
  position: relative;
}

/* Right arrow icon styling */
.icon-standard-size {
  color: var(--brand-black);
  width: 16px;
  height: 16px;
  position: relative;
  overflow: visible;
}

/* Link styling for the card */
.offer-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
  width: 100%;
}

.offer-card-link:hover .offer-domain-name {
  text-decoration: underline; /* Slight hover effect to show interactivity */
}


/* Offers Made */

/* Offer Details */


.offer-detail-container {
  max-width: 768px;
  margin: 0 auto;
  padding: 24px;
  /*background: var(--gray-100);*/
}

.offer-domain-title {
  color: var(--brand-black);
  font-family: var(--font-family-primary);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 24px;
  text-align: center;
}

.offer-status-card {
  background: var(--section-primary);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 16px;
  border: 1px solid var(--primary-200);
}

.offer-status-card--highlight {
  /* If you want the top card to stand out more, add a box-shadow or darker border */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  height: 100%;
}

.offer-response-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 16px;
}

@media (max-width: 500px) {
  .offer-response-wrapper {
    flex-direction: column;
    /*flex-flow: wrap;*/
  }

  .offer-response-time .offer-date,
  .offer-response-time .offer-time {
    text-align: left!important;
  }

  .offer-response-meta {
    max-width: 100%;
    width: 100%;
  }
  
  .offer-response-market-link {
    max-width: 100%;
    width: 100%;
  }

  .offer-status-text {
    width: 295px;
    height: auto;
  }

  .offer-actions {
    display: block;
  }

  .offer-status-card {
    padding: 8px;
  }

}

.notification-dot-small {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  position: relative;
  right:20px;
  bottom: 17px;
}

@media (max-width: 500px) {
  .offer-card-content {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 8px;
    align-items: center;

    /* Remove if you see horizontal overflow */
    /* width: 100%; */
    /* max-width: 100%; */
    /* margin: 0 auto; */
    box-sizing: border-box;
  }

  /* Then place your elements in these rows/columns */
  .offer-domain-name {
    grid-column: 1;
    grid-row: 1;
    max-width:200px;
  }

  .notification-dot-small {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .offer-card-meta {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: 4px;
    width:200px;
  }

  .icon-standard-size {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
  }
}

.offer-card {
  width: 100%;
  max-width: 100%;
  margin: 0 auto; /* Center if needed */
  box-sizing: border-box;
  /* Possibly add padding if you want space inside the card */
}

@media (min-width: 501px) and (max-width: 769px) {
  .offer-response-wrapper {
    flex-direction: row;
    /*flex-flow: wrap;*/
  }

  .offer-response-time .offer-date,
  .offer-response-time .offer-time {
    text-align: left!important;
  }

  .offer-response-meta {
    max-width: 25%;
  }

  .offer-actions {
    display: flex;
  }

  .offer-response-market-link {
    max-width: 100%;
  }

}

.offer-response-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 60%;
}

.offer-response-header {
  /* For headings inside the card */
}

.offer-status-text {
  color: var(--brand-black);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-h2);
}

.offer-price-detail {
  color: var(--brand-black);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
}

.offer-message-text {
  color: var(--brand-black);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
}

.offer-response-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
  justify-content: flex-start;
  /*max-width:25%;*/
}

.offer-response-time {
  width: 100%;
}

.offer-response-time .offer-date,
.offer-response-time .offer-time {
  color: var(--gray-600);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-body-sm);
  width: 100%;
  text-align: right;
}

.offer-actions {
  gap: 8px;
}

/*@media (min-width: 769px) {*/
/*  .offer-response-wrapper {*/
/*    display: block; !* Prevent wrapping on desktop *!*/
/*  }*/
/*}*/

.btn-primary {
  background: var(--brand-primary);
  color: var(--brand-white);
  border-radius: 28px;
  border: 1px solid var(--brand-primary);
  padding: 8px 16px;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-h2);
  cursor: pointer;
}

.btn-secondary {
  background: var(--secondary-100);
  color: var(--brand-secondary);
  border-radius: 28px;
  border: 1px solid var(--brand-secondary);
  padding: 8px 16px;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
  cursor: pointer;
}


/* Offer Details End */

/* Main menu */

/* Menu Links (Adjust these to match your previous styling) */

/* The outer li item */
.menu-list .nav-item {
  margin-bottom: 16px; /* spacing between menu items */
}

/* The clickable link area */
.menu-list .nav-link {
  color: var(--brand-white);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-h3);
  font-weight: 500; /* Slightly lighter than full bold if that matches old design */
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 12px; /* Add some padding inside the link for spacing */
  transition: color 0.3s ease;
}

/* On hover, show link hover state */
.menu-list .nav-link:hover {
  color: var(--brand-secondary);
}

/* Icon on the left, previously fixed-icon-small */
.nav-icon {
  color: inherit; /* Use inherit so it takes on link color */
  margin-right: 12px; /* Space between icon and text */
  font-size: 16px; /* Adjust to previous size */
}

/* The main text of the nav link */
.nav-link-text {
  color: inherit;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-body); /* Adjust weight if needed */
  flex: 1; /* Takes up remaining space */
  text-align: left;
}

/* The arrow container on the right */
.nav-link-arrow {
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto; /* Pushes arrow to the far right */
}

/* The arrow icon itself */
.nav-link-arrow i {
  font-size: 14px; /* Adjust arrow size to match previous look */
  color: inherit;
}

/* If you had a background hover previously, you can add it: */
.menu-list .nav-link:hover {
  background-color: rgba(255,255,255,0.1); /* Slight highlight on hover, adjust to taste */
  border-radius: 8px; /* Rounded corners if old design had it */
}

/* If you want to mimic even more of the old style:
   - Adjust spacing
   - Adjust icon sizes (fa icons can be sized via font-size)
   - Change text weight or size to match old design
*/

/* If previously the text for "Sign In" etc. had secondary-color:
   you've already applied a class "secondary-color" in the markup.
   Ensure that .secondary-color is defined:
*/
.secondary-color {
  color: var(--brand-secondary) !important;
}

/* If the dark mode toggle looked different previously, you can style the toggle-switch differently: */
.toggle-switch {
  margin-left: 8px; /* space from the text if needed */
  /* Other styling remains same as before */
}

/* Main Menu End */

/* Advanced Search */

/* Additional styles for Results page migration */

.results-page-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--primary-100);
  gap: 24px;
  box-sizing: border-box;
  max-width: 1232px;
  padding: 24px 16px 40px 16px;
  margin: auto;
  border-width: 0px;
}

.results-page-container {

  #resetButton {
    line-height: 0;
  }

  .close-filter {
    text-align: right;
  }

  .close-filter-button {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--brand-black);
    align-self: flex-end;
    cursor: pointer;
    margin-bottom: 20px;
  }


  .row {
    flex-wrap: nowrap;
  }

  .paging {
    color: var(--brand-black);
  }

  @media (min-width: 990px) {
    .col-md-9 {
      flex: 0 0 auto;
      max-width: 75%;
    }
  }
  @media (max-width: 990px) {
    .col-md-9 {
      flex: 0 0 auto;
      width: 100%;
    }
  }
}

.results-page-container {

  .form-check-input:checked {
    background-color: var(--brand-secondary);
    border-color: var(--brand-secondary);
  }

  .results-filter-container {
    background: var(--primary-100);
    flex-direction: column;
    gap: 24px;
    width: 100%;
    /*padding: 24px;*/
  }

  .results-filter-container {
    .filter-area {
      background: var(--primary-200);
      border-radius: 16px;

    }
  }



  /* For small/medium screens: Full-width filter */
  @media (max-width: 991px) {
    #filterSection {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1050; /* Ensure it appears above other content */
      background: var(--gray-200); /* Optional: ensure consistent background */
      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    }

    .results-filter-container {
      padding: 16px; /* Adjust padding for smaller screens */
      border-radius: 0; /* Remove rounded corners for full-width appearance */
    }
  }

  /* For large screens: Keep the filter section on the left */
  @media (min-width: 992px) {
    #filterSection {
      position: static; /* Reset positioning */
      z-index: auto; /* Reset z-index */
      width: auto; /* Default width */
      display: flex !important; /* Ensure it appears as flex */
    }

    .results-filter-container {
      max-width: 347px;
      min-width: 260px;
      border-radius: 16px; /* Restore rounded corners */
    }
  }
}

.results-page-container {

  .pro {
    color: var(--brand-black);
  }

  .btn-primary {
    background: var(--brand-primary, #027959);
    border-radius: 28px;
    border-style: solid;
    border-color: var(--brand-primary, #027959);
    border-width: 1px;
    padding: 16px;
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
  }

  .btn-primary .accept {
    color: var(--brand-white, #ececec);
    text-align: center;
    font-family: var(--font-family-primary);
    font-size: 16px;
    line-height: 16px;
    font-weight: 700;
    position: relative;
  }
  .btn-primary .icon-font-awesome-free-solid-c-chevron-right {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    position: relative;
    overflow: visible;
  }

  .btn-secondary {
    background: var(--secondary-100, #fef0e6);
    border-radius: 28px;
    border-style: solid;
    border-color: var(--brand-secondary, #f28c38);
    border-width: 1px;
    padding: 16px;
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    flex-shrink: 0;
    height: 48px;
    position: relative;
  }
  .btn-secondary .accept {
    color: var(--brand-secondary, #f28c38);
    text-align: center;
    font-family: var(--font-family-primary);
    font-size: 16px;
    line-height: 16px;
    font-weight: 700;
    position: relative;
  }
  .btn-secondary .icon-font-awesome-free-solid-c-chevron-right {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    position: relative;
    overflow: visible;
  }

  .filter-row {
    .btn-secondary {
      background: var(--secondary-100, #fef0e6);
      border-radius: 28px;
      border-style: solid;
      border-color: var(--brand-secondary, #f28c38);
      border-width: 1px;
      padding: 16px;
      display: flex;
      flex-direction: row;
      gap: 4px;
      align-items: center;
      justify-content: center;
      align-self: stretch;
      flex-shrink: 0;
      height: 48px;
      position: relative;
      width: 100%;
    }
  }
  .search-row{

    .frame-1410127832,
    .frame-1410127832 * {
      box-sizing: border-box;
    }
    .frame-1410127832 {
      background: var(--gray-200, #e0e0e0);
      padding: 24px;
      display: flex;
      flex-direction: row;
      gap: 8px;
      align-items: flex-start;
      justify-content: flex-start;
      align-self: stretch;
      flex-shrink: 0;
      position: relative;
    }
    .search {
      background: #ffffff;
      border-radius: 4px;
      border-style: solid;
      border-color: #000000;
      border-width: 1px;
      padding: 8px;
      display: flex;
      flex-direction: row;
      gap: 8px;
      align-items: center;
      justify-content: center;
      flex: 1;
      height: 48px;
      position: relative;
    }
    .btn {
      background: var(--secondary-100, #fef0e6);
      border-radius: 28px;
      border-style: solid;
      border-color: var(--brand-secondary, #f28c38);
      border-width: 1px;
      padding: 8px 16px 8px 16px;
      display: flex;
      flex-direction: row;
      gap: 4px;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      position: relative;
    }
    .accept {
      color: var(--brand-secondary, #f28c38);
      text-align: left;
      font-family: var(--font-family-primary);
      font-size: 16px;
      line-height: 16px;
      font-weight: 700;
      position: relative;
    }
    .icon-font-awesome-free-solid-c-chevron-down {
      flex-shrink: 0;
      width: 16px;
      height: 16px;
      position: relative;
      overflow: visible;
    }
    .enter-word-s {
      color: var(--gray-500, #a3a3a3);
      text-align: left;
      font-family: var(--font-family-secondary);
      font-size: 16px;
      font-weight: 400;
      position: relative;
      flex: 1;
    }
    .frame-58 {
      display: flex;
      flex-direction: row;
      gap: 8px;
      align-items: flex-start;
      justify-content: flex-start;
      align-self: stretch;
      flex-shrink: 0;
      position: relative;
    }
    .btn2 {
      background: var(--secondary-100, #fef0e6);
      border-radius: 28px;
      border-style: solid;
      border-color: var(--brand-secondary, #f28c38);
      border-width: 1px;
      padding: 16px;
      display: flex;
      flex-direction: row;
      gap: 4px;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      height: 48px;
      position: relative;
    }
    .icon-font-awesome-free-solid-l-layer-group {
      flex-shrink: 0;
      width: 16px;
      height: 16px;
      position: relative;
      overflow: visible;
    }
    .accept2 {
      color: var(--brand-secondary, #f28c38);
      text-align: center;
      font-family: var(--font-family-primary);
      font-size: 16px;
      line-height: 16px;
      font-weight: 700;
      position: relative;
    }
    .btn3 {
      background: var(--secondary-100, #fef0e6);
      border-radius: 28px;
      border-style: solid;
      border-color: var(--brand-secondary, #f28c38);
      border-width: 1px;
      padding: 16px;
      display: flex;
      flex-direction: row;
      gap: 4px;
      align-items: center;
      justify-content: center;
      align-self: stretch;
      flex-shrink: 0;
      position: relative;
    }
    .icon-font-awesome-free-solid-f-filter {
      flex-shrink: 0;
      width: 16px;
      height: 16px;
      position: relative;
      overflow: visible;
    }

  }
}

.filter-tag {
  background: var(--primary-600, #027959);
  border-radius: 4px;
  padding: 4px;
  flex-direction: row;
  gap: 4px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
  color: var(--brand-white);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-body-sm);
  margin: 4px;
}

.filter-tag i {
  color: var(--brand-white);
}

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

.domain-card {
  background: var(--gray-100);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.domain-card-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.domain-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-icon {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--brand-secondary);
}

.btn-icon .fa {
  color: var(--brand-secondary);
}

/* For form fields and filters, reuse patterns from dnxsitsite.css */
.form-field-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-field-group label {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-body);
}

.text-input-field {
  background: var(--brand-white);
  border: 1px solid var(--brand-black);
  border-radius: 4px;
  padding: 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.text-input-field input,
.text-input-field select,
.text-input-field textarea {
  border: none;
  flex: 1;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-body);
}

/* Advanced Search */

/* Filters */

/* Sort By */

.sort-btn,
.sort-btn * {
  box-sizing: border-box;
}

.sort-btn {
  background: var(--secondary-100, #fef0e6);
  border-radius: 28px;
  border-style: solid;
  border-color: var(--brand-secondary, #f28c38);
  border-width: 1px;
  padding: 16px;
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 48px;
  position: relative;
}

.sortby .dropdown-menu, .sortby .dropdown-menu:hover {
  background-color: var(--input-default);
  width:100%;
}

.sortby .dropdown-menu {
  .dropdown-item {
    color: var(--brand-black);
  }

  .active {
    background: var(--brand-secondary);
  }
}

.sort-btn i {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  position: relative;
  overflow: visible;
}

.accept {
  color: var(--brand-secondary, #f28c38);
  text-align: center;
  font-family: var(--font-family-primary);
  font-size: 16px;
  line-height: 16px;
  font-weight: 700;
  position: relative;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* Sort By End */

/* Words + Match Type */

.search,
.search * {
  box-sizing: border-box;
  background: var(--input-default);
}
.search {
  border-radius: 4px;
  border-style: solid;
  border-color: #000000;
  border-width: 1px;
  padding: 8px;
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 48px;
  position: relative;
}

.search .dropdown-menu {
  .dropdown-item {
    color: var(--brand-black);
  }

  .active {
    background: var(--brand-secondary);
  }
}

.search .btn {
  background: var(--secondary-100, #fef0e6);
  border-radius: 28px;
  border-style: solid;
  border-color: var(--brand-secondary, #f28c38);
  border-width: 1px;
  padding: 8px 16px;
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
}

.search .accept {
  color: var(--brand-secondary, #f28c38);
  text-align: left;
  font-family: var(--font-family-primary);
  background: transparent;
  font-size: 16px;
  line-height: 16px;
  font-weight: 700;
  position: relative;
}

.search .icon-font-awesome-free-solid-c-chevron-down {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  position: relative;
  overflow: visible;
}

.search .enter-word-s {
  color: var(--gray-500, #a3a3a3);
  text-align: left;
  font-family: var(--font-family-secondary);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}

.search .enter-word-s {
  input {
    background: var(--input-default);
    color: var(--gray-500, #a3a3a3);
  }
}

/* Words + Match Type End */

/* Exclude Options */

.exclude-dropdown-container {
  /*max-width: 315px;*/
  width: 100%;
}

.exclude-dropdown-container .dropdown-menu, .sortby .dropdown-menu:hover {
  background-color: var(--input-default);
  width:100%;
}

.exclude-dropdown-container .dropdown-menu {
  .dropdown-item {
    color: var(--brand-black);
  }

  .active {
    background: var(--brand-secondary);
  }
}

.saved-searches-dropdown a {
  color: var(--brand-black);
}

.exclude-dropdown-container label {
  color: var(--brand-black);
}

.exclude-dropdown-container .exclude-btn,
.exclude-dropdown-container .exclude-btn * {
  box-sizing: border-box;
}

.exclude-dropdown-container .exclude-btn {
  background: var(--secondary-100, #fef0e6);
  border-radius: 28px;
  border-style: solid;
  border-color: var(--brand-secondary, #f28c38);
  border-width: 1px;
  padding: 16px;
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  max-width: 315px;
  width: 100%;
}

.exclude-dropdown-container .exclude-accept {
  color: var(--brand-secondary, #f28c38);
  text-align: left;
  font-family: var(--font-family-primary);

  font-size: 16px;
  line-height: 16px;
  font-weight: 700;
  position: relative;
  flex: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* For the icon, since you're using <i class="fa fa-chevron-down"> */
.exclude-dropdown-container .exclude-btn i.fa-chevron-down {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  position: relative;
}

/* Remove Bootstrap's default caret if needed */
.exclude-dropdown-container .exclude-btn.dropdown-toggle::after {
  display: none;
}
/* Add any other styles needed for the dropdown or checkboxes here */

.exclude-dropdown-container .dropdown-menu {
  max-width: 315px;
  width: 100%;
}



/* Exclude Options End */

/* Categories */

.categories-dropdown-container {
  /*max-width: 315px;*/
  width: 100%;
}

.categories-dropdown-container .dropdown-menu, .sortby .dropdown-menu:hover {
  background-color: var(--input-default);
  width:100%;
}

.categories-dropdown-container .dropdown-menu {
  .dropdown-item {
    color: var(--brand-black);
  }

  .active {
    background: var(--brand-secondary);
  }
}



.categories-dropdown-container label {
  color: var(--brand-black);
}

.categories-dropdown-container .categories-btn,
.categories-dropdown-container .categories-btn * {
  box-sizing: border-box;
}

.categories-dropdown-container .categories-btn {
  background: var(--secondary-100, #fef0e6);
  border-radius: 28px;
  border-style: solid;
  border-color: var(--brand-secondary, #f28c38);
  border-width: 1px;
  padding: 16px;
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  max-width: 315px;
  width: 100%;

}

.categories-dropdown-container .categories-accept {
  color: var(--brand-secondary, #f28c38);
  text-align: left;
  font-family: var(--font-family-primary);

  font-size: 16px;
  line-height: 16px;
  font-weight: 700;
  position: relative;
  flex: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* Target the Font Awesome icon used for the chevron */
.categories-dropdown-container .categories-btn i.fa-chevron-down {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  position: relative;
}

/* Remove Bootstrap's default caret if needed */
.categories-dropdown-container .categories-btn.dropdown-toggle::after {
  display: none;
}

.categories-dropdown-container .dropdown-menu {
  max-width: 315px;
  width: 100%;
}

/* Categories End */

/* TLDs */

.tld-dropdown-container {
  /*max-width: 315px;*/
  width: 100%;
}

.tld-dropdown-container .dropdown-menu, .sortby .dropdown-menu:hover {
  background-color: var(--input-default);
  width:100%;
}

.tld-dropdown-container .dropdown-menu {
  .dropdown-item {
    color: var(--brand-black);
  }

  .active {
    background: var(--brand-secondary);
  }
}

.tld-dropdown-container label {
  color: var(--brand-black);
}

.tld-dropdown-container .tld-btn,
.tld-dropdown-container .tld-btn * {
  box-sizing: border-box;
}

.tld-dropdown-container .tld-btn {
  background: var(--secondary-100, #fef0e6);
  border-radius: 28px;
  border-style: solid;
  border-color: var(--brand-secondary, #f28c38);
  border-width: 1px;
  padding: 16px;
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  max-width: 315px;
  width: 100%;
}

.tld-dropdown-container .tld-accept {
  color: var(--brand-secondary, #f28c38);
  text-align: left;
  font-family: var(--font-family-primary);

  font-size: 16px;
  line-height: 16px;
  font-weight: 700;
  position: relative;
  flex: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.tld-dropdown-container .tld-btn i.fa-chevron-down {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  position: relative;
}

/* Remove the default dropdown caret */
.tld-dropdown-container .tld-btn.dropdown-toggle::after {
  display: none;
}

/* Style adjustments for submenu (Other TLDs) */
.tld-dropdown-container .dropdown-submenu {
  position: relative;
}

.tld-dropdown-container .dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}

.tld-dropdown-container .dropdown-menu {
  max-width: 315px;
  width: 100%;
}

/* TLDs End */

/* Min Chars */

.number-of-characters {
  color: var(--brand-black);
  text-align: left;
  font-family: var(--font-family-primary);

  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  position: relative;
  align-self: stretch;
  height: 23px;
  margin-bottom: 8px;
}

.character-inputs {
  display: flex;
  flex-direction: row;
  gap: 8px; /* space between the two boxes */
}

.frame-1,
.frame-1 * {
  box-sizing: border-box;
}
.frame-1 {
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #000000;
  padding: 8px;
  flex: 1;
  position: relative;
}

.min-input {
  color: var(--gray-500, #a3a3a3);
  font-family: var(--font-family-secondary);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  background: transparent;
  border: none;
  width: 100%;
  outline: none;
}

.frame-2,
.frame-2 * {
  box-sizing: border-box;
}
.frame-2 {
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #000000;
  padding: 8px;
  flex: 1;
  position: relative;
}

.max-input {
  color: var(--gray-500, #a3a3a3);
  font-family: var(--font-family-secondary);

  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  background: transparent;
  border: none;
  width: 100%;
  outline: none;
}

/* Min Chars End */

/* Word Count */

.number-of-words, .categories-label, .tld-label, .exclude-label {
  color: var(--brand-black);
  text-align: left;
  font-family: var(--font-family-primary);
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  position: relative;
  align-self: stretch;
  height: 23px;
  margin-bottom: 8px;
}

.words-inputs {
  display: flex;
  flex-direction: row;
  gap: 8px; /* space between the two boxes */
}

/* Reuse the same frame, min-input, max-input styles from previous code */

.frame-1, .frame-1 * {
  box-sizing: border-box;
}
.frame-1 {
  background: var(--input-default);
  border-radius: 4px;
  border-color: var(--brand-black, #1a1a1a);
  padding: 8px;
  flex: 1;
  position: relative;
}

.min-input {
  color: var(--gray-500, #a3a3a3);
  font-family: var(--font-family-secondary);

  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  background: transparent;
  border: none;
  width: 100%;
  outline: none;
}

.frame-2, .frame-2 * {
  box-sizing: border-box;
}
.frame-2 {
  background: var(--input-default);
  border-radius: 4px;
  border-color: var(--brand-black, #1a1a1a);
  padding: 8px;
  flex: 1;
  position: relative;
}

.max-input {
  color: var(--gray-500, #a3a3a3);
  font-family: var(--font-family-secondary);

  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  background: transparent;
  border: none;
  width: 100%;
  outline: none;
}

/* Word Count End */

.fa-icon-primary {
  color: var(--brand-primary);
}

.fa-icon-secondary {
  color: var(--brand-secondary);
  background: transparent;
}


/* Show */

.inventory-btn,
.inventory-btn * {
  box-sizing: border-box;
}

.inventory-btn {
  background: var(--secondary-100, #fef0e6);
  border-radius: 28px;
  border-style: solid;
  border-color: var(--brand-secondary, #f28c38);
  border-width: 1px;
  padding: 16px;
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
  justify-content: center;
  position: relative;
  /*max-width: 315px;*/
  width: 100%;

}

.inventory-container .dropdown-menu {
  max-width: 315px;
  width: 100%;
  background-color: var(--section-primary, #fef0e6);
}

.inventory-container .dropdown-menu {
  .dropdown-item {
    color: var(--brand-black);
  }

}


.inventory-btn .icon-font-awesome-free-solid-l-layer-group {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  position: relative;
  overflow: visible;
}

.inventory-btn .accept {
  color: var(--brand-secondary, #f28c38);
  text-align: left;
  font-family: var(--font-family-primary);
  font-size: 16px;
  line-height: 16px;
  font-weight: 700;
  position: relative;
  flex: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.inventory-btn .icon-font-awesome-free-solid-c-chevron-down {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  position: relative;
  overflow: visible;
}

.character-pattern-container {
  .field,
  .field * {
    box-sizing: border-box;
  }
  .field {
    background: var(--input-default);
    border-radius: 4px;
    border-style: solid;
    border-color: var(--brand-black, #1a1a1a);
    border-width: 1px;
    padding: 8px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
    height: 40px;
    position: relative;
  }

  /* Style the input similarly to .placeholder */
  .char-pattern-input {
    color: var(--gray-500, #a3a3a3);
    text-align: left;
    border-color: var(--brand-secondary, #f28c38);
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
    position: relative;
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    /* Ensure the input text color is visible if user types in non-gray text */
  }

  /* Placeholder styling */
  .char-pattern-input::placeholder {
    color: var(--gray-500, #a3a3a3);
    border-color: var(--brand-secondary, #f28c38);
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
  }
}

/* Min TLDs */
.minimum-tlds-registered {
  color: var(--brand-black);
  text-align: left;
  font-family: var(--font-family-primary);
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  position: relative;
  align-self: stretch;
  height: 23px;
  margin-bottom: 8px;
}

.min-tld-count-field,
.min-tld-count-field * {
  box-sizing: border-box;
}
.min-tld-count-field {
  background: var(--input-default);
  border-radius: 4px;
  border-style: solid;
  border-color: var(--brand-black, #1a1a1a);
  border-width: 1px;
  padding: 8px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  height: 40px;
  position: relative;
}

/* Style the input like the placeholder text */
.tld-count-input {
  background: transparent;
  border: none;
  outline: none;
  flex: 1;
  color: var(--gray-500, #a3a3a3);
  text-align: left;
  border-color: var(--brand-secondary, #f28c38);
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
}

/* Placeholder styling */
.tld-count-input::placeholder {
  color: var(--gray-500, #a3a3a3);
  border-color: var(--brand-secondary, #f28c38);
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
}

/* Min TLDs End*/

/* Price Range */

.price-range-container {
  /* The .price class styling is already defined. If needed, ensure: */
  .price,
  .price * {
    box-sizing: border-box;
  }

  .price {
    color: var(--brand-black);
    text-align: left;
    font-family: var(--font-family-primary);
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    position: relative;
    align-self: stretch;
    height: 23px;
    margin-bottom: 8px; /* Add space if needed */
  }

  .price-inputs {
    display: flex;
    flex-direction: row;
    gap: 8px; /* space between the min and max fields */
  }

  .frame-1,
  .frame-1 * {
    box-sizing: border-box;
  }
  .frame-1 {
    background: var(--input-default);
    border-radius: 4px;
    border-color: var(--brand-black, #1a1a1a);
    padding: 8px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex: 1;
    position: relative;
  }

  .frame-2,
  .frame-2 * {
    box-sizing: border-box;
  }
  .frame-2 {
    background: var(--input-default);
    border-radius: 4px;
    border-color: var(--brand-black, #1a1a1a);
    padding: 8px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex: 1;
    position: relative;
  }

  /* Inputs inside frame-1 and frame-2 */
  .min-input,
  .max-input {
    color: var(--gray-500, #a3a3a3);
    font-family: var(--font-family-secondary);
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    background: transparent;
    border: none;
    width: 100%;
    outline: none;
  }

  .min-input::placeholder,
  .max-input::placeholder {
    color: var(--gray-500, #a3a3a3);
  }
}
/* Price Range End */

/* Min Age */

.minimum-age {
  color: var(--brand-black);
  text-align: left;
  font-family: var(--font-family-primary);
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  position: relative;
  align-self: stretch;
  height: 23px;
  margin-bottom: 8px;
}

.minimum-age-field,
.minimum-age-field * {
  box-sizing: border-box;
}
.minimum-age-field {
  background: var(--input-default);
  border-radius: 4px;
  border-style: solid;
  border-color: var(--brand-black, #1a1a1a);
  border-width: 1px;
  padding: 8px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  height: 40px;
  position: relative;
}

/* Style the input like the placeholder text */
.minimum-age-input {
  background: transparent;
  border: none;
  outline: none;
  flex: 1;
  color: var(--gray-500, #a3a3a3);
  text-align: left;
  border-color: var(--brand-secondary, #f28c38);
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
}

/* Placeholder styling */
.minimum-age::placeholder {
  color: var(--gray-500, #a3a3a3);
  border-color: var(--brand-secondary, #f28c38);
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
}

/* Min Age End */

/* Min Words */
.words-inputs .min-input, .words-inputs .max-input{
  color: var(--gray-500, #a3a3a3);
  background: var(--input-default);
}

/* Min Words End */

/* Min char */

.character-inputs .min-input, .character-inputs .max-input{
  color: var(--gray-500, #a3a3a3);
  background: var(--input-default);

}

/* Min Char End */

/* Show End */

/* Filters */

/* Domain Results */

.bulk-list-container {
  max-width: 1280px;
  width:100%;
  margin: auto;
}

.bulk-list-container {
  .page-intro {
    color: var(--brand-black);
    text-align: left;
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-body-lg);
    line-height: var(--line-height-body-lg);
    font-weight: var(--font-weight-body-lg);
    width: 100%;
    position: relative;
  }
  .btn-primary:hover {
    background-color: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
  }
  .btn-primary.disabled, .btn-primary:disabled {
    background-color: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
  }
}

.bulk-results-container {
  max-width: 1280px;
  width:100%;
  margin: auto;
}

.bulk-results-container {
  .btn-primary {
    width: 270px!important;
  }
  .btn-primary:hover {
    background-color: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
  }
  .btn-secondary {
    width: 270px!important;
  }

  .page-intro {
    color: var(--brand-black);
    text-align: left;
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-body-lg);
    line-height: var(--line-height-body-lg);
    font-weight: var(--font-weight-body-lg);
    width: 100%;
    position: relative;
  }
  @media (max-width: 576px) {
    .alignment {
      align-items: center !important;
    }
  }

  .domain-list {
    gap: 0;
  }
}

.domain-results-container {
  padding-left: 0px;
  width:100%;
}
.domain-results-container {
  /* All styles for domain cards will be scoped inside this container */

  .card-domain,
  .card-domain * {
    box-sizing: border-box;
  }

  .card-domain {
    background: var(--result-card, #f7f7f7);
    border-radius: 16px;
    padding: 16px 24px 16px 24px;
    display: flex;
    flex-direction: row!important; /* Default: Horizontal layout */
    gap: 24px;
    /*align-items: center;*/
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
    min-height: 104px;
  }

  /* Mobile-specific behavior */
  @media (max-width: 576px) {
    .card-domain {
      flex-direction: column!important; /* Stack content vertically on mobile */
      gap: 16px; /* Adjust gap for smaller screens */
    }
  }

  .card-domain .btn-grp {
    display: flex;
    flex-wrap: nowrap !important;

    gap: 10px; /* Adjust spacing between buttons */
    justify-content: flex-start; /* Align buttons to the left */
  }

  .card-domain .btn-wrapper {
    flex: 0 1 auto; /* Ensure buttons take only necessary space */
  }

  @media (max-width: 576px) {
    .card-domain .btn-grp {
      flex-direction: column; /* Stack buttons vertically */
      flex-wrap: nowrap; /* Prevent additional wrapping */
      width: 100%;
    }

    .btn-secondary, .btn-primary {
      width: 100%!important;
    }


    .card-domain .btn-wrapper {
      width: 100%; /* Buttons take full width on mobile */
    }
  }

  .frame-1410127795 {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    justify-content: flex-start;
    flex: 1;
    position: relative;
  }

  .frame-51 {
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: baseline;
    justify-content: flex-start;
    flex-shrink: 0;
    /*height: 24px;*/
    position: relative;
  }

  .icon-font-awesome-free-regular-s-star {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    position: relative;
    overflow: visible;
  }

  .domain-name {
    color: var(--brand-black, #1a1a1a);
    text-align: left;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-h2, 20px);
    line-height: var(--line-height-h2, 28px);
    font-weight: var(--font-weight-h2, 700);
    position: relative;
    flex: 1;
    /* If domain name can have a dynamic color, override inline or use a class */
  }

  .frame-512 {
    display: flex;
    flex-direction: row;
    gap: 24px;
    row-gap: 4px;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-content: center;
    flex-shrink: 0;
    position: relative;
  }

  /* Domain Stats text (Chars, Words, TLDs, Age) */
  .chars-14,
  .words-14,
  .tl-ds-14,
  .age {
    color: var(--brand-black, #1a1a1a);
    text-align: left;
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-body, 16px);
    line-height: var(--line-height-body, 20px);
    font-weight: var(--font-weight-body, 400);
    position: relative;
  }

  .unlock-more-info-with-dnx-pro {
    color: var(--brand-black, #1a1a1a);
    text-align: left;
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-body, 16px);
    line-height: var(--line-height-body, 20px);
    font-weight: var(--font-weight-body, 600);
    text-decoration: underline;
    position: relative;
  }

  .btn-grp {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
    justify-content: center;
    flex-shrink: 0;
    width: 150px;
    position: relative;
  }

  /* Base button style (for Price and Make Offer) */
  .btn,
  .btn * {
    box-sizing: border-box;
  }
  .btn-primary {
    background: var(--brand-primary, #027959);
    border-radius: 28px;
    border-style: solid;
    border-color: var(--brand-primary, #027959);
    border-width: 1px;
    padding: 16px;
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
    width: 150px;
  }
  .btn-primary .accept {
    color: var(--brand-white, #ececec);
    text-align: center;
    font-family: var(--font-family-primary);
    font-size: 16px;
    line-height: 16px;
    font-weight: 700;
    position: relative;
  }
  .btn-primary .icon-font-awesome-free-solid-c-chevron-right {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    position: relative;
    overflow: visible;
  }

  .btn-secondary {
    background: var(--secondary-100, #fef0e6);
    border-radius: 28px;
    border-style: solid;
    border-color: var(--brand-secondary, #f28c38);
    border-width: 1px;
    padding: 16px;
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    flex-shrink: 0;
    height: 48px;
    position: relative;
    width:150px;
  }

  .btn-secondary .accept {
    color: var(--brand-secondary, #f28c38);
    text-align: center;
    font-family: var(--font-family-primary);
    font-size: 16px;
    line-height: 16px;
    font-weight: 700;
    position: relative;
  }
  .btn-secondary .icon-font-awesome-free-solid-c-chevron-right {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    position: relative;
    overflow: visible;
  }

  /* Variations for the buttons:
     - Primary (Price)
     - Secondary (Make Offer)
  */

  /* Primary (e.g. Price button) */
  .btn-primary {
    background: var(--btn-primary-bg, #027959);
    border-color: var(--brand-primary, #027959);
  }
  .btn-primary .accept {
    color: var(--btn-primary-font-color, #ececec);
  }
  .btn-primary i.fa-chevron-right {
    color: var(--btn-primary-font-color, #ececec);
  }

  /* Secondary (e.g. Make Offer button) */
  .btn-secondary {
    background-color: var(--btn-secondary-bg, #ececec);
    border-color: var(--brand-secondary, #f28c38);
  }
  .btn-secondary .accept {
    color: var(--btn-secondary-font-color, #ececec);
  }
  .btn-secondary i.fa-chevron-right, .btn-secondary-full i.fa-chevron-right {
    color: var(--btn-secondary-font-color, #ececec);
  }
  .no-text-decoration {
    text-decoration: none;
  }
}




.recently-reduced-badge {
  display: inline-block;
  margin-left: 8px;        /* Spacing between the domain name and label */
  background-color: #F28C38; /* Or your preferred accent color */
  color: #fff;
  padding: 1px 8px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase; /* Optional, if you want it all caps */
}

.circular-gauge-container {
  display: inline-block;
  margin: 0 8px;
  text-align: center;
}
.circular-gauge-container svg {
  /* e.g., drop shadow or smoothing */
}
.circular-gauge-container text {
  font-family: Arial, sans-serif;
}

.right-margin-small {
  margin-right: 10px;
}



/* Domain Results End */

/* Modals */
#marketplacePickerModal {

  .modal-content {
    color: var(--brand-secondary);
    background-color: var(--bg-200);
    border-radius: 16px;
  }

  .m-marketplace-picker-expanded,
  .m-marketplace-picker-expanded * {
    box-sizing: border-box;
  }
  .m-marketplace-picker-expanded {
    background: var(--gray-200, #e0e0e0);
    border-radius: 16px 16px 0px 6px;
    padding: 24px 24px 58px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    justify-content: flex-start;
    position: relative;
  }
  .frame-51 {
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
  }
  .buy-domain-name {
    color: var(--brand-black);
    text-align: left;
    font-family: var(--font-family-primary);
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    position: relative;
    flex: 1;
  }
  .btn {
    background: var(--secondary-100, #fef0e6);
    border-radius: 28px;
    border-style: solid;
    border-color: var(--brand-secondary, #f28c38);
    border-width: 1px;
    padding: 16px;
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    flex-shrink: 0;
    height: 48px;
    position: relative;
    width:100%;
  }

  .btn-group {
    width: 100%;
    display: block;
  }

  .icon-partner-atom {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    position: relative;
    overflow: visible;
  }
  .accept {
    color: var(--brand-secondary, #f28c38);
    text-align: center;
    font-family: var(--font-family-primary);
    font-size: 16px;
    line-height: 16px;
    font-weight: 700;
    position: relative;
    flex: 1;
  }
  .icon-font-awesome-free-solid-c-chevron-right {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    position: relative;
    overflow: visible;
  }
  .btn2 {
    border-radius: 28px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    flex-shrink: 0;
    height: 48px;
    position: relative;
  }
  .accept2 {
    color: var(--brand-secondary, #f28c38);
    text-align: center;
    font-family: var(--font-family-primary);
    font-size: 14px;
    line-height: 16px;
    font-weight: 500;
    position: relative;
    flex: 1;
  }
  .icon-font-awesome-free-solid-c-chevron-up {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    position: relative;
    overflow: visible;
  }
  .icon-partner-afternic {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    position: relative;
    overflow: visible;
  }
  .icon-font-awesome-free-solid-c-chevron-right2 {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    position: relative;
    overflow: visible;
  }
  .icon-partner-escrow {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    position: relative;
    overflow: visible;
  }
  .icon-color {
    color: var(--brand-white, #ececec);
  }

  .icon-font-awesome-free-solid-c-chevron-right3 {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    position: relative;
    overflow: visible;
  }
  .icon-partner-sedo {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    position: relative;
    overflow: visible;
  }
  .icon-font-awesome-free-solid-c-chevron-right4 {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    position: relative;
    overflow: visible;
  }
  .home-indicator {
    flex-shrink: 0;
    width: 393px;
    height: 34px;
    position: absolute;
    left: 0px;
    bottom: 0px;
  }
  .home-indicator2 {
    background: var(--gray-200, #ffffff);
    border-radius: 100px;
    width: 134px;
    height: 5px;
    position: absolute;
    left: 50%;
    translate: -50%;
    bottom: 8px;
  }

  .collapse:not(.show) {
    display: none!important;
  }
}

/* Modals End */

/* Make Offer */

#makeOfferModal {

  .modal-content {
    background-color: transparent; /* Dark background for modal */
    color: var(--brand-black);
    border: none;
  }


  /* General modal styles */
  .modal-make-offer,
  .modal-make-offer * {
    box-sizing: border-box;
  }

  .modal-make-offer {
    background: var(--bg-200);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
    position: relative;
  }

  .modal-make-offer .btn.send {
    width: 180px;
  }

  .modal-body {
    padding: 0;
  }

  .modal-footer {
    border-top:none;
  }


  /* Modal header styles */
  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: none;
  }

  .modal-title {
    color: var(--brand-black, #1a1a1a);
    font-family: var(--font-family-primary);
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
  }

  .btn-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--brand-black, #1a1a1a);
    cursor: pointer;
  }

  .btn-close:hover {
    color: var(--brand-secondary, #f28c38);
  }

  /* Input field and label styles */
  .form-label {
    font-family: var(--font-family-primary);
    font-size: 16px;
    color: var(--brand-black, #1a1a1a);
    margin-bottom: 8px;
    font-weight: 700;
  }

  .form-control {
    background: var(--input-default);
    border: 1px solid var(--brand-black, #1a1a1a);
    border-radius: 4px;
    padding: 8px;
    font-family: var(--font-family-secondary);
    font-size: 16px;
    line-height: 20px;
    color: var(--brand-black, #1a1a1a);
  }

  .form-control::placeholder {
    color: var(--gray-500, #a3a3a3);
  }

  /* Checkbox and agreement text */
  .frame-12 {
    display: flex;
    gap: 8px;
    align-items: center;
  }

  .form-check-input {
    width: 24px;
    height: 24px;
    cursor: pointer;
    color: var(--brand-secondary);
  }

  .form-check-input:checked {
    background-color: var(--brand-secondary);
  }

  .by-making-this-offer-you-agree-to-make-payment-for-this-domain-within-nn-hours-of-a-sale-agreement {
    color: var(--brand-black, #1a1a1a);
    font-family: var(--font-family-secondary);
    font-size: 16px;
    line-height: 20px;
  }

  /* Modal footer with buttons */
  .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
  }

  .btn {
    padding: 16px;
    border-radius: 28px;
    border: 1px solid;
    font-family: var(--font-family-primary);
    font-size: 16px;
    font-weight: 700;
    line-height: 16px;
    cursor: pointer;
  }

  .btn.cancel {
    background: var(--secondary-100, #fef0e6);
    color: var(--brand-secondary, #f28c38);
    border-color: var(--brand-secondary, #f28c38);
  }

  .btn.cancel:hover {
    background: var(--secondary-200, #fdd9bf);
  }

  .btn.send {
    background: var(--brand-primary, #027959);
    color: var(--brand-white, #ececec);
    border-color: var(--brand-primary, #027959);
  }

  .btn.send:disabled {
    background: var(--gray-300, #cccccc);
    color: var(--gray-500, #a3a3a3);
    cursor: not-allowed;
  }

  .form-check-input,
  .form-check-input * {
    box-sizing: border-box;
    color: var(--brand-secondary);
  }
  .form-check-input {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    position: relative;
    overflow: visible;
    color: var(--brand-secondary);
  }

  .form-check-input:checked {
    color: var(--brand-secondary);
  }


}

/* Make Offer */

/* Domain Search */

.domain-search-container {
  margin:auto;
  width: 100%;
  max-width: 800px;
  min-height:500px;
}
/* Scope all styles to .domain-search-container so they don't affect other pages */
.domain-search-container {
  /* Existing or global classes: frame-1410127759, frame-3, field, etc. */
  .frame-1410127759,
  .frame-3,
  .field,
  .field *,
  .frame-56,
  .field2,
  .domain-name,
  .search-icon {
    box-sizing: border-box;
  }

  .frame-1410127759 {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    position: relative;
  }

  .frame-3 {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    width: 100%;
  }

  .field {
    background: var(--primary-100);
    border-radius: 4px;
    /*border: 1px solid var(--brand-black, #1a1a1a);*/
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
    justify-content: flex-start;
    position: relative;
    width: 100%;
  }

  .label-and-instruction {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    position: relative;
  }

  .which-domain-would-you-like {
    color: var(--brand-black);
    text-align: center;
    font-family: var(--font-family-primary);
    font-size: 20px;
    line-height: 24px;
    font-weight: 700;
    position: relative;
  }

  .frame-56 {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    position: relative;
  }

  .field2 {
    background: var(--input-default);
    border: 1px solid #000000;
    border-radius: 4px;
    padding: 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    flex: 1;
    /*max-width: 384px;*/
    width: 100%;
  }

  .domain-name-input {
    background: var(--input-default);
    border: none;
    outline: none;
    width: 100%;
    color: var(--brand-black);
    text-align: left;
    font-family: var(--font-family-secondary);
    font-size: 20px;
    font-weight: 400;
    position: relative;
  }

  .domain-name::placeholder {
    color: var(--gray-500, #a3a3a3);
  }

  .search-icon {
    background: var(--brand-primary, #027959);
    border: 1px solid var(--brand-primary, #027959);
    border-radius: 28px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .search-icon i {
    color: var(--brand-white, #ececec);
    font-size: 16px;
    line-height: 16px;
  }

  /* List Cards Section from Figma */
  .list-cards,
  .list-cards * {
    box-sizing: border-box;
  }

  .list-cards {
    /*padding: 16px 0px 40px 0px;*/
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    overflow-y: auto;
    width: 100%;
  }

  .domain-name-is-not-listed-for-sale-keep-going-we-have-options {
    color: #000000;
    text-align: center;
    font-family: var(--font-family-secondary);
    font-size: 20px;
    line-height: 24px;
    font-weight: 400;
    position: relative;
    width: 100%;
  }

  .domain-name-is-not-listed-for-sale-keep-going-we-have-options-span {
    color: var(--brand-black);
    font-family: var(--font-family-secondary);
    font-size: 20px;
    line-height: 24px;
    font-weight: 700;
  }

  .domain-name-is-not-listed-for-sale-keep-going-we-have-options-span2 {
    color: #000000;
    font-family: var(--font-family-secondary);
    font-size: 20px;
    line-height: 24px;
    font-weight: 400;
  }

  /* card-domain from Figma (Concierge Card) */
  .card-domain {
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    width: 100%;
  }

  .frame-51 {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
    justify-content: flex-start;
    background-color: var(--input-default);
    border-radius: 16px;
    padding: 16px;
    /*max-width: 416px;*/
    min-height: 100px;
    width: 100%;
  }

  .frame-512 {
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .icon-font-awesome-free-solid-h-hand-holding-heart {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    position: relative;
    overflow: visible;
  }

  .domain-name {
    background: transparent;
    color: var(--brand-black);
    text-align: left;
    font-family: var(--font-family-secondary);
    font-size: 20px;
    font-weight: 400;
    position: relative;
    flex: 1;  }

  .frame-20 {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    position: relative;
  }

  .chars-14 {
    color: var(--brand-black, #1a1a1a);
    text-align: left;
    font-family: var(--font-family-secondary);
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
    position: relative;
    flex: 1;
  }

  .btn-grp {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    position: relative;
  }

  .btn {
    background: var(--brand-primary, #027959);
    border-radius: 50%;
    border: 1px solid var(--brand-primary, #027959);
    padding: 16px;
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    width:48px;
    height:48px;
  }

  .btn .accept {
    color: var(--brand-white, #ececec);
    text-align: center;
    font-family: var(--font-family-primary);
    font-size: 16px;
    line-height: 16px;
    font-weight: 700;
    position: relative;
  }

  .success-result {
    background: var(--brand-primary);
    border-radius: 8px;
    border: 1px solid var(--alert-green);
    padding: 16px;
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    width: 100%;
    /*max-width: 480px;*/
    position: relative;
    text-decoration: none;
  }

  .success-text {
    color: var(--btn-primary-font-color);
  }

  .other-domains-to-consider {
    color: var(--brand-black);
    text-align: center;
    font-family: var(--font-family-secondary);
    font-size: 20px;
    line-height: 24px;
    font-weight: 400;
    position: relative;
    width: 100%;
  }

  /* card-domain2 (Exact Match or similar card) */
  .card-domain2 {
    background: var(--result-card #f7f7f7);
    border-radius: 16px;
    border: 1px solid var(--gray-800, #027959);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    width: 100%;
  }

  .frame-513 {
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
  }

  .icon-font-awesome-free-regular-s-star {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    position: relative;
    overflow: visible;
  }

  .domain-name2,
  .domain-name3 {
    color: var(--brand-black, #1a1a1a);
    text-align: left;
    font-family: var(--font-family-primary);
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    position: relative;
    flex: 1;
  }

  .chars-142,
  .words-14,
  .tl-ds-14 {
    color: var(--brand-black, #1a1a1a);
    text-align: left;
    font-family: var(--font-family-secondary);
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
    position: relative;
  }

  .unlock-more-info-with-dnx-pro {
    color: var(--brand-black, #1a1a1a);
    text-align: left;
    font-family: var(--font-family-secondary);
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    text-decoration: underline;
    position: relative;
    width: 100%;
  }

  .btn2 {
    background: var(--secondary-100, #fef0e6);
    border-radius: 28px;
    border: 1px solid var(--brand-secondary, #f28c38);
    padding: 16px;
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    width: 100%;
    max-width: 329px;
  }

  .accept2 {
    color: var(--brand-secondary, #f28c38);
    text-align: center;
    font-family: var(--font-family-primary);
    font-size: 16px;
    line-height: 16px;
    font-weight: 700;
    position: relative;
  }

  /* Additional classes from your code, e.g., domain-name3, hand-holding-heart, etc. */
  .hand-holding-heart,
  .star-icon {
    font-size: 24px;
    width: 24px;
    height: 24px;
  }

  /* Adjust width/height or font-size for icons as needed */
  /* If you use Font Awesome <i> tags, just ensure to remove img-specific classes or adapt them accordingly. */

  /* Default icon colour if needed */
  .default-icon-colour {
    color: var(--brand-black, #1a1a1a);
  }

  /* Styling for .card-gray-100 mentioned in your code */
  .card-gray-100 {
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    width: 100%;
  }

  /* For .domain-name-is-not-listed-for-sale-keep-going-we-have-options-span multiple lines */
  .domain-name-is-not-listed-for-sale-keep-going-we-have-options span {
    white-space: pre-wrap;
  }

  .listed {
    padding-left: 16px;
    padding-right: 16px;
  }

  .not-listed, .listed {
    .list-cards,
    .list-cards * {
      box-sizing: border-box;
    }
    .list-cards {
      /*padding: 0px 16px 40px 16px;*/
      display: flex;
      flex-direction: column;
      gap: 16px;
      align-items: flex-start;
      justify-content: flex-start;
      align-self: stretch;
      flex-shrink: 0;
      position: relative;
      overflow-y: auto;
    }

    .not-listed-section {
      text-align: center;
      margin: auto;
      max-width: 100%;
      width: 100%;
    }

    .not-listed-section-concierge {
      text-align: center;
      margin: auto;
      max-width: 100%;
      width: 100%;
    }

    .domain-name-is-not-listed-for-sale-keep-going-we-have-options {
      color: #000000;
      text-align: center;
      font-family: "-", sans-serif;
      font-size: 20px;
      line-height: 24px;
      font-weight: 400;
      position: relative;
      align-self: stretch;
    }
    .domain-name-not-listed {
      color: var(--brand-black);
      font-family: var(--font-family-primary);
      font-size: 20px;
      line-height: 24px;
      font-weight: 700;
    }
    .domain-name-is-not-listed-for-sale-keep-going-we-have-options-span2 {
      color: var(--brand-black);
      font-family: var(--font-family-secondary);
      font-size: 20px;
      line-height: 24px;
      font-weight: 400;
    }
    .card-domain {
      background: var(--primary-100, #e6f3f0);
      border-radius: 16px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      align-items: center;
      justify-content: flex-start;
      align-self: stretch;
      flex-shrink: 0;
      position: relative;
    }
    .frame-51 {
      display: flex;
      flex-direction: column;
      gap: 4px;
      align-items: center;
      justify-content: flex-start;
      align-self: stretch;
      flex-shrink: 0;
      position: relative;
    }
    .frame-512 {
      width: 100%;
      text-align: center;
      margin: auto;
      display: inline;
    }
    .icon-font-awesome-free-solid-h-hand-holding-heart {
      width: 24px;
      height: 24px;
      display: inline;
    }
    .domain-name {
      color: var(--brand-primary, #027959);
      text-align: left;
      font-family: var(--font-family-primary);
      font-size: 20px;
      line-height: 28px;
      font-weight: 700;
      display: inline;
    }
    .frame-20 {
      display: flex;
      flex-direction: row;
      gap: 16px;
      align-items: flex-start;
      justify-content: flex-start;
      align-self: stretch;
      flex-shrink: 0;
      position: relative;
    }
    .chars-14 {
      color: var(--brand-black, #1a1a1a);
      text-align: center;
      font-family: var(--font-family-secondary);
      position: relative;
      flex: 1;
      font-size: 16px;
      line-height: 20px;
      font-weight: 400;
    }

    .concierge-button, .concierge-button a{
      width: 100%;
      text-decoration: none;
    }
    .btn-grp {
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: flex-start;
      justify-content: center;
      align-self: stretch;
      flex-shrink: 0;
      position: relative;
    }
    .btn {
      background: var(--brand-primary, #027959);
      border-radius: 28px;
      border-style: solid;
      border-color: var(--brand-primary, #027959);
      border-width: 1px;
      padding: 16px;
      display: flex;
      flex-direction: row;
      gap: 4px;
      align-items: center;
      justify-content: center;
      align-self: stretch;
      flex-shrink: 0;
      position: relative;
    }
    .accept {
      color: var(--brand-white, #ececec);
      text-align: center;
      font-family: var(--font-family-primary);
      font-size: 16px;
      line-height: 16px;
      font-weight: 700;
      position: relative;
    }

    .btn-full-width {
      width:100%;
    }

    .btn-full-width .fa-chevron-right {
      color: var(--btn-primary-font-color);
    }

    .icon-font-awesome-free-solid-c-chevron-right {
      flex-shrink: 0;
      width: 16px;
      height: 16px;
      position: relative;
      overflow: visible;
    }
    .other-domains-to-consider, .matched {
      color: var(--brand-black);
      text-align: center;
      font-family: var(--font-family-secondary);
      font-size: 20px;
      line-height: 24px;
      font-weight: 400;
      position: relative;
      align-self: stretch;
    }
    .card-domain2 {
      background: var(--section-primary);
      border-radius: 16px;
      /*padding: 16px 24px 16px 24px;*/

      display: flex;
      flex-direction: row;
      gap: 24px;
      align-items: center;
      justify-content: flex-start;
      align-self: stretch;
      flex-shrink: 0;
      position: relative;
    }
    .frame-1410127795 {
      display: flex;
      flex-direction: column;
      gap: 4px;
      align-items: flex-start;
      justify-content: flex-start;
      flex: 1;
      position: relative;
    }
    .frame-513 {
      display: flex;
      flex-direction: row;
      gap: 4px;
      align-items: center;
      justify-content: flex-start;
      align-self: stretch;
      flex-shrink: 0;
      height: 24px;
      position: relative;
    }
    .icon-font-awesome-free-regular-s-star {
      flex-shrink: 0;
      width: 24px;
      height: 24px;
      position: relative;
      overflow: visible;
    }
    .domain-name2 {
      color: var(--brand-black, #1a1a1a);
      text-align: left;
      font-family: var(--font-family-primary);
      position: relative;
      flex: 1;
    }
    .frame-514 {
      display: flex;
      flex-direction: row;
      gap: 24px;
      row-gap: 4px;
      align-items: center;
      justify-content: flex-start;
      flex-wrap: wrap;
      align-content: center;
      align-self: stretch;
      flex-shrink: 0;
      position: relative;
    }
    .chars-142 {
      color: var(--brand-black, #1a1a1a);
      text-align: left;
      font-family: var(--font-family-secondary);
      position: relative;
    }
    .words-14 {
      color: var(--brand-black, #1a1a1a);
      text-align: left;
      font-family: var(--font-family-secondary);
      position: relative;
    }
    .tl-ds-14 {
      color: var(--brand-black, #1a1a1a);
      text-align: left;
      font-family: var(--font-family-secondary);
      position: relative;
    }
    .unlock-more-info-with-dnx-pro {
      color: var(--brand-black, #1a1a1a);
      text-align: left;
      font-family: var(--font-family-secondary);
      text-decoration: underline;
      position: relative;
    }
    .btn-grp2 {
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: flex-end;
      justify-content: center;
      flex-shrink: 0;
      width: 150px;
      position: relative;
    }
    .btn2 {
      background: var(--secondary-100, #fef0e6);
      border-radius: 28px;
      border-style: solid;
      border-color: var(--brand-secondary, #f28c38);
      border-width: 1px;
      padding: 16px;
      display: flex;
      flex-direction: row;
      gap: 4px;
      align-items: center;
      justify-content: center;
      align-self: stretch;
      flex-shrink: 0;
      height: 48px;
      position: relative;
    }
    .accept2 {
      color: var(--brand-secondary, #f28c38);
      text-align: center;
      font-family: var(--font-family-primary);
      font-size: 16px;
      line-height: 16px;
      font-weight: 700;
      position: relative;
    }
    .icon-font-awesome-free-solid-c-chevron-right2 {
      flex-shrink: 0;
      width: 16px;
      height: 16px;
      position: relative;
      overflow: visible;
    }
    .icon-font-awesome-free-solid-c-chevron-right3 {
      flex-shrink: 0;
      width: 16px;
      height: 16px;
      position: relative;
      overflow: visible;
    }

  }

  .frame-1410127763 {
    width:100%;
    align-items: center;
    /*padding-left: 16px;*/
    /*padding-right: 16px;*/
    padding-top: 24px;
  }

}

/* Domain Search End */

/* Contact Page */

.contact-container {
  margin:auto;
}
.contact-container {
  .list-cards,
  .list-cards * {
    box-sizing: border-box;
  }
  .list-cards {
    padding: 24px 24px 40px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    justify-content: flex-start;
    position: sticky;
    overflow-y: auto;
  }
  .contact-text{
    text-align: center;
    font-family: "-", sans-serif;
    font-size: 16px;
    font-weight: 400;
    position: relative;
    align-self: stretch;
  }
  .contact-text-span {
    color: var(--brand-black, #f28c38);
    font-family: var(--font-family-secondary);
    font-size: 16px;
    font-weight: 400;
  }
  .contact-text-span2 a {
    color: var(--brand-secondary, #f28c38);
    font-family: var(--font-family-secondary);
    font-size: 16px;
    font-weight: 600;
  }
}

/* Contact Page End */

/* Privacy */

.privacy-container {
  margin: auto;
  max-width: 1232px;
  width: 100%;
}
.privacy-container {

  .list-cards,
  .list-cards * {
    box-sizing: border-box;
  }
  .list-cards {
    padding: 24px 24px 40px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
    overflow-y: auto;
  }
  .dnx-privacy-policy-10-1-2024 {
    text-align: left;
    color: var(--brand-black);
    font-family: var(--font-family-primary);
    font-size: 24px;
    font-weight: 700;
    position: relative;
    align-self: stretch;
  }
}

/* Privacy End */

/* Terms */

.terms-container {
  margin: auto;
  max-width: 1232px;
  width: 100%;
}

.terms-container {

  .list-cards,
  .list-cards * {
    box-sizing: border-box;
  }
  .list-cards {
    padding: 24px 24px 40px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    justify-content: flex-start;
    position: sticky;
    overflow-y: auto;
  }
  .dnx-terms-of-use {
    color: var(--brand-black);
    font-family: var(--font-family-primary);
    text-align: left;
    font-size: var(--font-size-h1, 24px);
    font-weight: var(--font-weight-h1, 700);
    position: relative;
    align-self: stretch;
  }
}

/* Terms End */

/* Account Nav */

.account-nav-item, .account-nav-item:hover {
  color: var(--brand-black);
  text-align: left;
  font-family: var(--font-family-primary);
  font-size: 16px;
  font-weight: 500;
  position: relative;
  flex: 1;
}

/* Account Nav End */

/* Login */

/* General Styles */

.general-text {
  color: var(--brand-black, #1a1a1a);
}

.strong {
  font-weight: 600;
}

.login {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 384px;
  width: 100%;
  margin: auto;
}

.login{

  .login {
    max-width: 384px;
    width: 100%;
  }

  form {
    width: 100%;
  }

  .frame-2,
  .frame-2 * {
    box-sizing: border-box;
  }
  .frame-2 {
    padding: 24px 24px 40px 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
  }
  .frame-1410127765 {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
  }
  .frame-1410127761 {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
  }
  .sign-in-with-email {
    color: var(--brand-black);
    text-align: left;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-h2, 20px);
    line-height: var(--line-height-h2, 28px);
    font-weight: var(--font-weight-h2, 700);
    position: relative;
    align-self: stretch;
  }
  .frame-1410127767 {
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
  }
  .need-an-account {
    color: var(--brand-black, #1a1a1a);
    text-align: left;
    font-family: var(--font-family-secondary);
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    position: relative;
  }
  .sign-up {
    color: var(--brand-secondary, #f28c38);
    text-align: left;
    font-family: var(--font-family-secondary);
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    position: relative;
  }
  .field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
  }
  .label-and-instruction {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
  }
  .current-password {
    color: var(--brand-black, #1a1a1a);
    text-align: left;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-h3, 16px);
    font-weight: var(--font-weight-h3, 700);
    position: relative;
    align-self: stretch;
    height: 23px;
  }
  .field2 {
    background: #ffffff;
    border-radius: 4px;
    border-style: solid;
    border-color: var(--brand-black, #1a1a1a);
    border-width: 1px;
    padding: 8px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    height: 40px;
    position: relative;
  }
  .placeholder {
    color: var(--gray-500, #a3a3a3);
    text-align: left;
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-body, 16px);
    line-height: var(--line-height-body, 20px);
    font-weight: var(--font-weight-body, 400);
    position: relative;
    flex: 1;
  }
  .btn {
    background: var(--brand-primary, #027959);
    border-radius: 28px;
    border-style: solid;
    border-color: var(--brand-primary, #027959);
    border-width: 1px;
    /*opacity: 0.3;*/
    padding: 16px;
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    flex-shrink: 0;
    height: 48px;
    position: relative;
    width: 100%;
  }
  .accept {
    color: var(--brand-white, #ececec);
    background-color: var(--brand-primary);
    text-align: center;
    font-family: var(--font-family-primary);
    font-size: 16px;
    line-height: 16px;
    font-weight: 700;
    position: relative;
  }
  .resend-email-confirmation {
    color: var(--brand-secondary, #f28c38);
    text-align: center;
    font-family: var(--font-family-secondary);
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    position: relative;
    align-self: stretch;
  }
  .frame-1410127766 {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
  }
  .or-sign-in-with-external-accounts {
    color: var(--brand-black);
    text-align: left;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-h2, 20px);
    line-height: var(--line-height-h2, 28px);
    font-weight: var(--font-weight-h2, 700);
    position: relative;
    align-self: stretch;
  }
  .btn2 {
    background: var(--secondary-100, #fef0e6);
    border-radius: 28px;
    border-style: solid;
    border-color: var(--brand-secondary, #f28c38);
    border-width: 1px;
    padding: 16px;
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    flex-shrink: 0;
    height: 48px;
    position: relative;
  }
  .accept2 {
    color: var(--brand-secondary, #f28c38);
    text-align: center;
    font-family: var(--font-family-primary);
    font-size: 16px;
    line-height: 16px;
    font-weight: 700;
    position: relative;
    border: none;
    background: var(--secondary-100, #fef0e6);
  }

  .resend-link a {
    text-decoration: none;
  }

}

/* Login End */

/* Account Area */

.account-area {
  h3, h4, td {
    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3);
    font-weight: var(--font-weight-h3);
    font-family: var(--font-family-secondary);
    color: var(--brand-black);
  }

  p {
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    font-weight: var(--font-weight-body);
    font-family: var(--font-family-secondary);
    color: var(--brand-black);
  }

  .custom-content-area p a {
    color: var(--brand-secondary);
  }

  /* Set Password */
  .text-info {
    color: var(--brand-black) !important;
  }

}

/* Account Area End */

/* Account Nav */

.custom-sidebar {
  .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    background-color: var(--brand-secondary);
  }
}

.custom-content-area {
  li {
    color: var(--brand-black, #1a1a1a);
  }
}

/* Account Nav End */

/* Concierge */


.concierge {

  .frame-1410127763,
  .frame-1410127763 * {
    box-sizing: border-box;
  }
  .frame-1410127763 {
    background: var(--alert-green, #2d936c);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    flex-shrink: 0;
    height: 80px;
    position: relative;
  }
  .icon-font-awesome-free-solid-c-check-circle {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    position: relative;
    overflow: visible;
  }
  .thank-you-for-your-request-we-will-contact-you-shortly {
    color: var(--brand-white, #ececec);
    text-align: left;
    font-family: "SourceSansPro-SemiBold", sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    position: relative;
    flex: 1;
  }

  .success-text {
    color: var(--brand-white);
  }


  .frame-1410127759,
  .frame-1410127759 * {
    box-sizing: border-box;
  }

  .frame-1410127759 {
    padding: 24px 16px 40px 16px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
    width: 100%;
    max-width: 516px;
    margin: auto;
  }

  .frame-2 {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
    border:none;
  }

  form {
    width: 100%;
  }

  .need-specialized-assistance-to-purchase-a-domain-provide-us-with-your-budget-and-best-contact-details-we-ll-get-in-touch-with-you-as-soon-as-possible {
    color: var(--brand-black);
    text-align: left;
    font-family: var(--font-family-secondary);
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
    position: relative;
    align-self: stretch;
  }

  .field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
  }

  .label-and-instruction {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
  }

  .current-password {
    color: var(--brand-black, #1a1a1a);
    text-align: left;
    font-family: var(--font-family-primary);
    font-size: 16px;
    font-weight: 700;
    position: relative;
    align-self: stretch;
    height: 23px;
  }

  .field2 {
    background: var(--input-default);
    border-radius: 4px;
    border-style: solid;
    border-color: var(--brand-black, #1a1a1a);
    border-width: 1px;
    padding: 8px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    height: 40px;
    position: relative;
  }

  .text-entry {
    color: var(--brand-black, #1a1a1a);
    text-align: left;
    font-family: var(--font-family-secondary);
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
    position: relative;
    flex: 1;
    border: none;
    background: var(--input-default);
  }

  .placeholder {
    color: var(--brand-black);
    text-align: left;
    font-family: var(--font-family-secondary);
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
    position: relative;
    flex: 1;
    background-color: transparent;
  }

  .frame-12 {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
  }

  .checkbox {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    position: relative;
    overflow: visible;
    background-color: var(--brand-secondary);
  }

  .by-using-our-concierge-service-you-agree-to-pay-a-12-fee-on-any-successful-acquisition {
    color: var(--brand-black);
    text-align: left;
    font-family: var(--font-family-secondary);
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
    position: relative;
    flex: 1;
  }

  .btn {
    background: var(--brand-primary, #027959);
    border-radius: 28px;
    border-style: solid;
    border-color: var(--brand-primary, #027959);
    border-width: 1px;
    opacity: 0.3;
    padding: 16px;
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    flex-shrink: 0;
    height: 48px;
    position: relative;
  }

  .accept {
    color: var(--brand-white, #ececec);
    text-align: center;
    font-family: var(--font-family-primary);
    font-size: 16px;
    line-height: 16px;
    font-weight: 700;
    position: relative;
    background-color: transparent;
    border:none;
  }
}

/* Concierge End */

/* General Account */

/* Forgot Password */

.forgot-password {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 480px;
  width: 100%;
  margin: auto;
}

.forgot-password .frame-1410127761 {
  width:100%;
}

/* Frame styles for layout consistency */
.forgot-password .frame-1410127765 {
  padding: 24px 24px 40px 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
  width: 100%;
}

/* Heading styles */
.forgot-password h2 {
  color: var(--brand-black, #1a1a1a);
  text-align: left;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-h2, 20px);
  line-height: var(--line-height-h2, 28px);
  font-weight: var(--font-weight-h2, 700);
  margin-bottom: 16px;
}

/* Horizontal line */
.forgot-password hr {
  width: 100%;
  margin: 16px 0;
  border: 1px solid var(--gray-300, #e0e0e0);
}

/* Input field styles */
.forgot-password input.form-control {
  background: var(--input-default);
  border-radius: 4px;
  border: 1px solid var(--brand-black, #1a1a1a);
  padding: 12px;
  font-size: 16px;
  font-family: var(--font-family-secondary);
  color: var(--brand-black, #1a1a1a);
  width: 100%;
}

/* Placeholder text styles */
.forgot-password input.form-control::placeholder {
  color: var(--brand-black, #a3a3a3);
  font-size: 16px;
  font-family: var(--font-family-secondary);
}

/* Label styles */
.forgot-password label.form-label {
  font-size: 14px;
  color: var(--gray-500, #a3a3a3);
  margin-bottom: 4px;
}

/* Error message styles */
.forgot-password .text-danger {
  font-size: 14px;
  color: var(--error-color, #d32f2f);
  margin-top: 4px;
}

/* Button container */
.forgot-password .account-btn-primary-full {
  width: 100%;
  margin-top: 24px;
}

/* Primary button styles */
.forgot-password .account-btn-primary-full-text {
  background: var(--brand-primary, #027959);
  border-radius: 28px;
  color: var(--brand-white, #ffffff);
  font-size: 16px;
  font-weight: 700;
  padding: 16px;
  border: none;
  width: 100%;
  text-align: center;
  cursor: pointer;
}

/* Hover effect for button */
.forgot-password .account-btn-primary-full-text:hover {
  background: var(--brand-primary, #f28c38);
}

/* Form floating label fix */
.forgot-password .form-floating {
  position: relative;
  width: 100%;
  margin-bottom: 16px;
}

/* Button focus styles */
.forgot-password .account-btn-primary-full-text:focus {
  outline: 2px solid var(--brand-secondary, #f28c38);
  outline-offset: 2px;
}

.forgot-password-general-text {
  color: var(--brand-black, #a3a3a3);
}

/* General Account End */

/* Spinner Pulse */

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Spinner Pulse End */

/* Adhoc popup text */

.fade-message {
  color: var(--brand-black, #1a1a1a);
}

/* Adhoc popup text end */

/* DNX Assistant */

.assistant {
  .title {
    color: var(--brand-black);
    text-align: center;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
    font-weight: var(--font-weight-h2);
    position: relative;
    flex: 1;
  }

  .intro, .chat-output {
    color: var(--brand-black);
    text-align: center;
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3);
    font-weight: var(--font-weight-h3);
    position: relative;
    flex: 1;
  }

  .response-text {
    color: var(--brand-black);
    background-color: var(--input-default);
    text-align: center;
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3);
    font-weight: var(--font-weight-h3);
    position: relative;
    flex: 1;
  }

  th, td {
    color: var(--brand-black) !important;
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3);
    font-weight: var(--font-weight-h3);
  }

}

/* Assistant Styles */
.assistant {
  margin: auto;
  width: 100%;
  max-width: 456px;
}

/* Scoped styles for .assistant */
.assistant {
  /* Shared box-sizing rules */
  .frame-1410127759,
  .frame-3,
  .field,
  .field *,
  .frame-56,
  .field2,
  .domain-name,
  .search-icon {
    box-sizing: border-box;
  }

  .frame-1410127759 {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    position: relative;
  }

  .frame-3 {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
    justify-content: flex-start;
    position: relative;
    width: 100%;
  }

  .field {
    background: var(--primary-100);
    border-radius: 4px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
    justify-content: flex-start;
    position: relative;
  }

  .label-and-instruction {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
  }

  .which-domain-would-you-like {
    color: var(--brand-black);
    text-align: left;
    font-family: var(--font-family-primary);
    font-size: 20px;
    line-height: 24px;
    font-weight: 700;
    position: relative;
  }

  .frame-56 {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    position: relative;
  }

  .field2 {
    background: var(--input-default);
    border: 1px solid #000000;
    border-radius: 4px;
    padding: 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    flex: 1;
    max-width: 384px;
    width: 100%;
  }

  .domain-name-input {
    background: var(--input-default);
    border: none;
    outline: none;
    width: 100%;
    color: var(--brand-black);
    text-align: left;
    font-family: var(--font-family-secondary);
    font-size: 20px;
    font-weight: 400;
    position: relative;
  }

  .domain-name::placeholder {
    color: var(--gray-500, #a3a3a3);
  }

  .search-icon {
    background: var(--brand-primary, #027959);
    border: 1px solid var(--brand-primary, #027959);
    border-radius: 28px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .search-icon i {
    color: var(--brand-white, #ececec);
    font-size: 16px;
    line-height: 16px;
  }

  /* List Cards Section */
  .list-cards,
  .list-cards * {
    box-sizing: border-box;
  }

  .list-cards {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
    overflow-y: auto;
    width: 100%;
  }

  .domain-name-is-not-listed-for-sale-keep-going-we-have-options {
    color: #000000;
    text-align: center;
    font-family: var(--font-family-secondary);
    font-size: 20px;
    line-height: 24px;
    font-weight: 400;
    position: relative;
    width: 100%;
  }

  /* General Card Styles */
  .card-domain2 {
    background: var(--section-primary); /* Dark background for the card */
    border-radius: 16px; /* Rounded corners */
    border: 1px solid var(--gray-800, #333); /* Border color */
    padding: 16px; /* Uniform padding */
    display: flex;
    flex-direction: column;
    gap: 16px; /* Space between sections */
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
    width: 100%;
    max-width: 456px; /* Limit width */
    margin: 0 auto; /* Center alignment */
  }

  .card-domain2 .frame-1410127795 {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    justify-content: flex-start;
    flex: 1;
    position: relative;
  }
  .card-domain2 .frame-513 {
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    height: 24px;
    position: relative;
  }
  .card-domain2 .icon-font-awesome-free-regular-s-star {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    position: relative;
    overflow: visible;
  }

  .card-domain2 .domain-name2 {
    color: var(--brand-black, #1a1a1a);
    text-align: left;
    font-family: var(--font-family-primary);
    font-size: 20px;
    font-weight: 700;
    position: relative;
    flex: 1;
  }

  /* Domain Details (Chars, TLDs) */
  .card-domain2 .frame-514 {
    display: flex;
    flex-direction: row;
    gap: 24px;
    row-gap: 4px;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-content: center;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
  }

  .card-domain2 .chars-142,
  .card-domain2 .words-14,
  .card-domain2 .tl-ds-14 {
    color: var(--brand-black);
    font-family: var(--font-family-secondary, Arial, sans-serif);
    font-size: 16px; /* Font size */
    line-height: 20px; /* Line height */
    font-weight: 400; /* Regular weight */
  }

  /* Unlock More Info Link */
  .card-domain2 .unlock-more-info-with-dnx-pro {
    color: var(--brand-black, #1a1a1a);
    text-align: left;
    font-family: var(--font-family-secondary);
    text-decoration: underline;
    position: relative;
  }

  /* Button Group */
  .card-domain2 .btn-grp2 {
    display: flex;
    flex-direction: row;
    gap: 8px; /* Space between buttons */
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  /* Make Offer Button */
  .card-domain2 .btn2 {
    background: var(--secondary-100, #f28c38); /* Orange background */
    color: #fff; /* White text */
    border: 1px solid #f28c38; /* Border matching background */
    border-radius: 28px; /* Rounded corners */
    padding: 12px 24px; /* Button padding */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Space for icon */
    font-family: var(--font-family-primary, Arial, sans-serif);
    font-size: 16px; /* Font size */
    font-weight: 700; /* Bold */
    cursor: pointer;
  }

  .card-domain2 .btn2 i {
    font-size: 16px; /* Icon size */
  }

  .card-domain2 .accept {
    color: var(--brand-white);
    text-align: center;
    font-family: var(--font-family-primary);
    font-size: 16px;
    line-height: 16px;
    font-weight: 700;
    position: relative;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding: 8px;
  }

  .card-domain2 .btn-padding {
    padding-top: 7px;
  }

  /* Price Button */
  .card-domain2 .btn-full-width {
    display: flex;
    background: var(--brand-primary);
    color: #fff; /* White text */
    border: none; /* No border */
    border-radius: 28px; /* Rounded corners */
    padding: 12px 24px; /* Button padding */
    font-family: var(--font-family-primary);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
  }

  /* Ensure responsive design */
  .card-domain2 {
    width: 100%;
  }

  .btn-primary-wide {
    width: 100%;
  }

  .btn-primary-wide:hover, .btn-primary-wide:focus {
    background-color: var(--brand-primary);
  }

  .frame-513 {
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
  }

  .btn-grp2 {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
    justify-content: center;
    flex-shrink: 0;
    width: 150px;
    position: relative;
  }

  .btn2 {
    background: var(--secondary-100, #fef0e6);
    border-radius: 28px;
    border: 1px solid var(--brand-secondary, #f28c38);
    padding: 16px;
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 329px;
    cursor: pointer;
  }

  .accept2 {
    color: var(--brand-secondary, #f28c38);
    text-align: center;
    font-family: var(--font-family-primary);
    font-size: 16px;
    font-weight: 700;
    position: relative;
  }

  .other-domains-to-consider {
    color: var(--brand-black);
    text-align: center;
    font-family: var(--font-family-secondary);
    font-size: 20px;
    line-height: 24px;
    font-weight: 400;
    position: relative;
    align-self: stretch;
  }

}
/* DNX Assistant End */

/* Register */

.register-text {
  color: var(--brand-black, #1a1a1a);
}
/* Register End */

.margin-right-small {
  margin-right: 8px;
}

/* Saved Searches */

/* Container for all saved searches */
.saved-searches-container {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  width: 100%;
  max-width: 1272px;
  margin: 0 auto;
}

.saved-searches-dropdown {
  border-radius: 16px;
  width: 100%;
}

.saved-search-btn-text {
  text-align: center!important;
}

/*#updateSearchButton:disabled, #updateSearchButton:hover {*/
/*  color: var(--brand-secondary);*/
/*}*/

/* Each saved search "card" */
.saved-search-card {
  background: var(--section-primary);
  padding: 24px 16px;
  display: flex;
  flex-direction: column; /* so the header is on top, info below */
  gap: 16px;
  border-radius: 16px;
  width: 100%;
  position: relative;
}

/* The row containing the name/rename area, action buttons, and chevron */
.saved-search-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between; /* name+buttons on left, chevron on right */
}

/* Button row for rename, run, delete */
.button-row {
  display: flex;
  flex-direction: row;
  gap: 8px;
  margin-right: 16px; /* small spacing before the chevron */
}

/* Expandable info section: hidden by default using 'collapsed' */
.saved-search-info {
  transition: all 0.2s ease-in-out; /* optional if you want a fade or height transition */
}

.saved-search-info.collapsed {
  display: none; /* simplest approach to hide content */
}

/* Table of search details */
.saved-search-details table {
  width: 100%;
  border-collapse: collapse;
}

.saved-search-details th,
.saved-search-details td {
  border: 1px solid var(--gray-300);
  padding: 8px;
  text-align: left;
}

.saved-search-details th {
  background-color: var(--gray-200);
  font-weight: 600;
}

/* Basic button styling */
.btn {
  border-radius: 28px;
  padding: 8px 16px;
  cursor: pointer;
  font-family: var(--font-family-secondary);
  font-size: 14px;
  border: 1px solid transparent;
  text-decoration: none;
  text-align: center;
}

.btn-primary {
  background-color: var(--brand-primary);
  color: var(--brand-white);
  border-color: var(--brand-primary);
}

.btn-primary:hover {
  opacity: 0.9;
}

.btn-secondary {
  background-color: var(--secondary-100);
  color: var(--brand-secondary);
  border-color: var(--brand-secondary);
}

.btn-secondary:hover {
  opacity: 0.8;
}

/* Text input for rename mode */
.text-input-field {
  padding: 4px 8px;
  border: 1px solid var(--gray-400);
  border-radius: 4px;
  font-size: 14px;
  margin-right: 8px; /* space before the Save button */
  width: 200px; /* adjust as desired */
}

/* The toggle button for the chevron */
.chevron-toggle-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--brand-black);
  font-size: 1rem; /* adjust as needed for icon size */
  display: flex;
  align-items: center;
  justify-content: center;
}

.chevron-toggle-btn:hover {
  opacity: 0.7;
}

/* Saved Searches End */

/* Example domain-table styling */
.domain-table th {
  font-weight: 600;      /* Make column headers a bit bolder */
  white-space: nowrap;   /* Prevent wrapping in headers */
}

.domain-table th a {
  text-decoration: none; /* Remove underline from header links */
  color: inherit;        /* Use current text color */
}

.domain-table th a:hover {
  color: var(--brand-secondary, #f28c38);
}

.domain-table td,
.domain-table th {
  vertical-align: middle;  /* Ensure vertical alignment */
}

/* Adjust the row hover color (light mode vs. dark mode) */
@media (prefers-color-scheme: dark) {
  .domain-table tbody tr:hover {
    background-color: #333;
  }
}
@media (prefers-color-scheme: light) {
  .domain-table tbody tr:hover {
    background-color: #f8f9fa;
  }
}

/* Global pricing indicators */

.price-indicator {
  display: inline-block;
  width: 25px;
  height: 20px;
  margin-right: 2px;
  border-radius: 4px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  line-height: 18px;
  color: white;
}

.price-indicator.up {
  background-color: var(--brand-secondary);
}

.price-indicator.up::before {
  content: "↑";
}

.price-indicator.down {
  background-color: var(--brand-secondary);
}

.price-indicator.down::before {
  content: "↓";
}

.price-indicator.same {
  background-color: var(--brand-secondary);
}

.price-indicator.same::before {
  content: "–"; /* en dash */
}

.price-history-section {
  padding: 8px 0;
  border-top: 1px dashed #ccc;
  margin-top: 8px;
}

.price-history-details {
  transition: all 0.2s ease;
}
/* Global pricing indicators end */

/* AI */

.badge-rating {
  background-color: #f5f5f5;
  border: none;
  padding: 6px 12px;
  border-radius: 12px;
  font-weight: bold;
  color: #333;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  font-size: 0.95rem;
  transition: background-color 0.2s ease;
}

.badge-rating:hover {
  background-color: #e0e0e0;
}

.rating-breakdown div {
  margin-bottom: 4px;
}

.ai-evaluation-section {
  padding: 8px 0;
  border-top: 1px dashed #ccc;
  margin-top: 8px;
}

/* AI End */

/*AI Report */
.reportLayout{
  border-radius: 16px;
  background-color: var(--result-card) ;
  color: var(--brand-black);
}

.report-close{
  color: var(--brand-black);
}

/*AI Report End */

/* AI Report Styling */
.report-container {
  color: var(--brand-black);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: var(--font-weight-body);
  padding: 1rem;
}

.section {
  border-bottom: 1px solid #eee;
  padding-bottom: 1rem;
}

.section:last-child {
  border-bottom: none;
}

.section-title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  font-weight: var(--font-weight-h2);
  color: var(--brand-secondary);
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}

.section-text {
  color: var(--brand-black);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: var(--font-weight-body);

  margin: 0;
}

.icon-standard {
  color: var(--brand-secondary);
  font-size: 1.1rem;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.5rem 1.5rem;
  margin-top: 0.5rem;
}

.overall-rating {
  color: var(--brand-black);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: var(--font-weight-body);

}

#domainDetailsModal .modal-dialog{
  max-width: 700px;
}

.pulse-loading {
  animation: pulsing 3s ease-in-out infinite;
  color: var(--brand-secondary);
}

@keyframes pulsing {
  0% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.4;
  }
}
/* End AI Report Styling */

/* Vue styling */

/* === Universal button lift animation (Vue parity) === */

@media (prefers-reduced-motion: no-preference) {
    /* Target Razor & Bootstrap buttons, plus .btn in case you use it */
    button,
    .btn,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    .btn-primary-full,
    .btn-secondary-full,
    .btn2,
    a.button-like {
        transition:
                transform 0.25s cubic-bezier(.25, .8, .25, 1),
                box-shadow 0.25s ease,
                background-color 0.25s ease,
                color 0.25s ease;
        will-change: transform, box-shadow;
    }

    /* Hover = subtle lift */
    button:hover,
    .btn:hover,
    input[type="button"]:hover,
    input[type="submit"]:hover,
    input[type="reset"]:hover,
    #resetButton:hover,
    .btn-primary-full:hover,
    .btn-secondary-full:hover,
    .btn2:hover,
    a.button-like:hover {
        transform: translateY(-2px);
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
    }

    /* Active (pressed) = quick return */
    button:active,
    .btn:active,
    input[type="button"]:active,
    input[type="submit"]:active,
    input[type="reset"]:active,
    .btn-primary-full:active,
    .btn-secondary-full:active,
    .btn2:active,
    a.button-like:active {
        transform: translateY(0);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
        transition-duration: 0.12s;
    }

    /* Optional: focus ring polish */
    button:focus-visible,
    .btn:focus-visible,
    input[type="button"]:focus-visible,
    input[type="submit"]:focus-visible,
    input[type="reset"]:focus-visible,
    .btn-primary-full:focus-visible,
    .btn-secondary-full:focus-visible,
    .btn2:focus-visible,
    a.button-like:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary-700, #0f6a57) 60%, transparent);
    }
}

button,
.btn,
input[type="button"],
input[type="submit"],
input[type="reset"],
.btn-primary-full,
.btn-secondary-full,
.btn2,
#resetButton {
    border-radius: 10px !important;
}

/* === Global dropdown hover softness === */
.dropdown-item {
    transition:
            background-color 0.25s ease,
            color 0.25s ease;
}

/* Light mode: soft tint using your DNX green */
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: color-mix(in oklab, var(--primary-700, #0f6a57) 10%, transparent);
    color: var(--primary-800, #0c5646);
}

/* Active or selected items remain clear but distinct */
.dropdown-item.active,
.dropdown-item:active {
    background-color: color-mix(in oklab, var(--primary-700, #0f6a57) 20%, transparent);
    color: #fff;
}

/* Dark mode: soften using a light overlay */
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
    opacity: 0.5;
    color: #e4fff7;
}

.dropdown-menu {
    background-color: var(--primary-200);
}

.btn-primary-full-text {
    cursor: pointer;
    width: 100%;
}

.btn-primary-full:hover,
.btn-primary-full:focus {
    color: var(--partner-100);
}