/* --------------------------------------------
   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;

}

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 {
  display: flex;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.domain-successes-container {
  max-width: 1272px;
  width: 100%;
  overflow-x: hidden;
  margin: auto;
  height: 116px;
}

.domain-successes {
  display: flex;
  gap: 16px;
  animation: scroll-right-to-left 10s linear infinite forwards;
  position: relative;
  animation-name: move-right-to-left;
  animation-duration: 10s;
  animation-fill-mode: forwards;
  /* --------------------------------------------
     Global Variables & Base Styles
  -------------------------------------------- */


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

.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 {

  .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(--input-default);
    background: var(--brand-black);
    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(--input-default);
    background: 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;
    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-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-status-text {
    width: 295px;
    height: auto;
  }
  
  .offer-actions {
    display: block;
  }

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

}

@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-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);
  }
}



.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(--primary-100, #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 */

.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: center;
    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 {
    color: var(--btn-secondary-font-color, #ececec);
  }
}

/* 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-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: 456px;
}
/* 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: stretch;
    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;
  }

  .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 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: 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%;
  }

  .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;
    height: 200px;
    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%;
    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 */

.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;
      padding:2px;
  }
  .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 {
  padding: 24px;
  
  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-container {
  max-width: 1250px;
  margin: 0 auto;
}

.account-row {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.account-sidebar {
  flex: 0 0 250px;
  min-width: 250px;
}

.account-content {
  flex: 1;
  min-width: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .account-row {
    flex-direction: column;
    gap: 16px;
  }
  
  .account-sidebar {
    flex: none;
    min-width: auto;
    width: 100%;
  }
}

/* Account Area End */

/* Products Page */

.products-page {
  padding: 60px 16px;
  min-height: calc(100vh - 200px);
}

.products-container {
  max-width: 1250px;
  margin: 0 auto;
}


.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

.product-card {
  background-color: var(--section-primary);
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 24px;
  transition: all 0.2s ease;
  border: 1px solid var(--gray-200);
}

.product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.product-card__header {
  text-align: center;
  margin-bottom: 24px;
}

.product-card__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 24px;
  color: white;
}

.market-icon {
  background: linear-gradient(135deg, #027959, #03A67C);
}

.management-icon {
  background: linear-gradient(135deg, #F28C38, #FFB366);
}

.auctions-icon {
  background: linear-gradient(135deg, #6366F1, #8B5CF6);
}

.product-card__title {
  font-family: var(--font-family-primary);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--brand-black);
  margin-bottom: 8px;
}


.product-card__content {
  border-top: 1px solid var(--gray-200);
  padding-top: 20px;
}

.product-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.product-link-icon {
    margin-right: 16px;
    vertical-align: middle;
}

.product-link {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background-color: transparent;
  color: var(--brand-black);
  text-decoration: none;
  border-radius: 8px;
  font-family: var(--font-family-secondary);
  font-weight: 500;
  transition: all 0.2s ease;
  position: relative;
}

.product-link:hover {
  background-color: var(--primary-100);
  color: var(--primary-700);
  text-decoration: none;
  transform: translateX(4px);
}

.product-link::after {
  content: '→';
  position: absolute;
  right: 16px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.product-link:hover::after {
  opacity: 1;
}

/* Responsive */
/* Tablet: 2 cards per row */
@media (max-width: 1024px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile: 1 card per row */
@media (max-width: 768px) {
  .products-page {
    padding: 16px;
  }
  
  .products-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .product-card {
    padding: 20px;
  }
  
  .product-card__icon {
    width: 56px;
    height: 56px;
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .product-card {
    padding: 16px;
  }
  
  .product-link {
    padding: 10px 12px;
    font-size: 0.9rem;
  }
}

/* Products Page End */

/* Subscriptions */

.subscription-container {

  .list-cards,
  .list-cards * {
    box-sizing: border-box;
  }
  .list-cards {
    padding: 24px 16px 58px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    justify-content: flex-start;
    position: sticky;
    overflow-y: auto;
  }
  .frame-1410127764 {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
  }
  .icon-font-awesome-free-solid-c-chevron-left {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    position: relative;
    overflow: visible;
  }
  .subscription {
    color: #000000;
    text-align: left;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-h1);
    position: relative;
    flex: 1;
  }
  .card-plan {
    background: var(--section-primary);
    border-radius: 16px;
    border: 1px solid var(--primary-200);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    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-51 {
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
  }
  .icon-font-awesome-free-solid-p-plus-circle {
    color: var(--toggle-color);
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    position: relative;
    overflow: visible;
    line-height: 24px;
  }
  .dnx-pro {
    color: var(--brand-primary, #027959);
    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;
  }
  .icon-font-awesome-free-solid-c-check-circle {
    color: var(--toggle-color);
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    position: relative;
    overflow: visible;
  }
  ._99-month {
    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;
    align-self: stretch;
  }
  .all-dnx-basic-features {
    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;
    align-self: stretch;
  }
  .additional-domain-data-incl-tld-count-etc {
    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;
    align-self: stretch;
  }
  .saved-searches {
    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;
    align-self: stretch;
  }
  .email-alerts {
    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;
    align-self: stretch;
  }
  .alert {
    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;
    position: relative;
  }
  .icon-font-awesome-free-solid-c-check-circle2 {
    color: var(--brand-white);
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    position: relative;
    overflow: visible;
  }
  .success-message {
    color: #ffffff;
    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, 700);
    position: relative;
    flex: 1;
  }
  .dnx-basic {
    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;
  }
  .free {
    color: var(--brand-black, #1a1a1a);
    text-align: left;
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-body, 20px);
    line-height: var(--line-height-body, 24px);
    font-weight: var(--font-weight-body, 400);
    position: relative;
    align-self: stretch;
  }
  .basic-domain-data {
    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;
    align-self: stretch;
  }
  .favorites {
    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;
    align-self: stretch;
  }
  .rewards {
    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;
    align-self: stretch;
  }
  .concierge-service {
    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;
    align-self: stretch;
  }


}
/* Subscriptions 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 */

/* ========================================
   DNX Header & Footer Styles
   Matching Vue Front-end Design
   ======================================== */

/* Body background */
body {
    background-color: white;
}

/* Header Styles */
.dnx-header {
    align-items: center;
    background-color: var(--primary-700);
    display: flex;
    flex-direction: row;
    gap: 24px;
    justify-content: center;
    padding: 16px 0;
    position: sticky;
    top: 0;
    z-index: 50;
    height: 80px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.dnx-header__container {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: space-between;
    margin: 0 auto;
    position: relative;
    width: 100%;
    max-width: 1300px;
    padding-left: 24px;
    padding-right: 24px;
}

.dnx-header__logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.dnx-header__logo img {
    display: block;
}

.dnx-header__title {
    color: white;
    flex: 1;
    font-family: 'Poppins', Arial, Helvetica, Verdana, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    text-align: center;
    letter-spacing: 0.3px;
    margin: 0;
}

.dnx-header__actions {
    display: flex;
    flex-direction: row;
    gap: 12px;
    justify-content: flex-end;
    align-items: center;
}

/* Footer Styles - Matching Vue Design */
.dnx-footer {
    background-color: var(--primary-700);
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    width: 100%;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    z-index: 5;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

.dnx-footer__content {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dnx-footer__left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding-left: 4px;
}

.dnx-footer__right {
    display: flex;
    align-items: center;
    gap: 24px;
}

.dnx-footer__logo {
    height: 18px;
    width: auto;
}

.dnx-footer__copyright {
    font-size: 0.75rem;
    color: white;
    opacity: 0.9;
    margin: 0;
}

.dnx-footer__links {
    display: flex;
    gap: 24px;
}

.dnx-footer__links a {
    color: white;
    text-decoration: none;
    font-size: 0.9rem;
    opacity: 0.9;
    transition: opacity 0.2s ease;
}

.dnx-footer__links a:hover {
    opacity: 1;
}

.dnx-footer__social {
    display: flex;
    gap: 16px;
}

.dnx-footer__social a {
    color: white;
    font-size: 1.2rem;
    opacity: 0.9;
    transition: opacity 0.2s ease;
    display: flex;
    align-items: center;
}

.dnx-footer__social a:hover {
    opacity: 1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .dnx-header__container {
        padding: 0 1.5rem;
    }
    
    .dnx-footer__content {
        flex-direction: column;
        gap: 20px;
        padding: 20px 16px;
        text-align: center;
    }
    
    .dnx-footer__left {
        align-items: center;
    }
    
    .dnx-footer__right {
        flex-direction: column;
        gap: 16px;
    }
    
    .dnx-footer__links {
        gap: 16px;
    }
}

@media (max-width: 480px) {
    .dnx-header__container {
        padding: 0 1.5rem;
    }
    
    .dnx-header__title {
        font-size: 16px;
        line-height: 24px;
    }
}

/* Ensure proper layout for site wrapper */
.site-header {
    padding: 0;
    background: none;
}

.site-footer {
    padding: 0;
    background: none;
    margin-top: 0;
}

.site-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: white;
}

.site-main {
    flex: 1;
    background-color: white;
    padding-top: 40px;
    padding-bottom: 60px;
}