/* notifications.css */
.notification-icon {
        position: absolute;
        top: 4px;
        right: 6px;
        background-color: #d64045;
        height: 12px;
        width: 12px;
        border-radius: 50%;
        border: 2px solid #ffffff;
        z-index: 1;
        animation: pulse 2s infinite;  /* 2 seconds for a slow pulse */
}

/* Ensure the nav-link is positioned relative so that absolute children position correctly */
.nav-link {
        position: relative;
}

/* Notification menu icon style */
.notification-menu-icon {
        position: absolute;
        top: 40%;               /* Vertically center within the nav-link */
        right: 30px;            /* Adjust this value based on your design */
        transform: translateY(-50%);
        background-color: #d64045;
        height: 10px;
        width: 10px;
        border-radius: 50%;
        border: 2px solid transparent;
        z-index: 1;
        animation: pulse 2s infinite; /* Reuse your pulsing animation */
}

.notification-dot-small {
        display: inline-block;
        background-color: #d64045;
        height: 4px;
        width: 4px;
        border-radius: 8px;
        margin-left: 5px; /* Adjust spacing as needed */
        border: 5px solid transparent;
        /*animation: pulse 2s infinite;*/
}

@keyframes pulse {
        0% {
                transform: scale(1);
                opacity: 1;
        }
        50% {
                transform: scale(1.3);  /* slightly larger */
                opacity: 0.9;           /* a little transparent */
        }
        100% {
                transform: scale(1);
                opacity: 1;
        }
}

/* Dark mode override */
[data-theme="dark"] .notification-icon {
        border: 2px solid #03A67C;
}
/* variables.css */
:root {
  /* Support for light and dark mode */
  color-scheme: light dark;

  /* Fonts */
  --font-poppins: 'Poppins', Arial, Helvetica, Verdana, sans-serif;
  --font-secondary: 'Source Sans Pro', Georgia, 'Times New Roman', Times, serif;

  /* Modern breakpoints */
  --breakpoint-xs: 0px;
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  /* Colours */
  --brand-white: white;
  --brand-black: oklch(0.2 0 0);
  --brand-primary: oklch(51.13% 0.1049 166.54);
  --brand-secondary: var(--brand-primary);

  --gray-100: oklch(97.61% 0 0);
  --gray-200: oklch(90.67% 0 0);
  --gray-300: oklch(84.52% 0 0);
  --gray-400: oklch(78.26% 0 0);
  --gray-500: oklch(71.55% 0 0);
  --gray-600: oklch(59.99% 0 0);
  --gray-700: oklch(51.03% 0 0);
  --gray-800: oklch(37.15% 0 0);
  --gray-900: oklch(26.86% 0 0);

  --green-50: oklch(97.5% 0.012 166);
  --green-100: oklch(95.36% 0.0143 180.7);
  --green-200: oklch(88.15% 0.0351 180.78);
  --green-300: oklch(80.95% 0.0554 180.08);
  --green-400: oklch(73.81% 0.0744 178.99);
  --green-500: oklch(66.82% 0.0906 177.41);
  --green-600: oklch(51.13% 0.1049 166.54);
  --green-700: oklch(43.8% 0.0875 168.47);
  --green-800: oklch(36.4% 0.0719 169.64);
  --green-900: oklch(28.67% 0.0542 173.24);


  --blue-100: oklch(0.9 0.067 240);
  --blue-200: oklch(0.83 0.113 246);
  --blue-300: oklch(0.75 0.155 253);
  --blue-400: oklch(0.68 0.175 256);
  --blue-500: oklch(0.61 0.192 257);
  --blue-600: oklch(0.52 0.159 257);
  --blue-700: oklch(0.41 0.15 262);
  --blue-800: oklch(0.31 0.127 265);
  --blue-900: oklch(0.22 0.103 265);

  --purple-100: oklch(91.37% 0.19 327.27);
  --purple-200: oklch(82.35% 0.36 327.27);
  --purple-300: oklch(70.2% 0.53 327.27);
  --purple-400: oklch(58.82% 0.7 327.27);
  --purple-500: oklch(47.45% 0.87 327.27);
  --purple-600: oklch(40% 0.76 327.27);
  --purple-700: oklch(32.55% 0.65 327.27);
  --purple-800: oklch(25.1% 0.54 327.27);
  --purple-900: oklch(17.65% 0.43 327.27);

  --red-100: oklch(95.36% 0.0143 27.7);
  --red-200: oklch(88.15% 0.0351 27.78);
  --red-300: oklch(80.95% 0.0554 27.08);
  --red-400: oklch(73.81% 0.0744 25.99);
  --red-500: oklch(66.82% 0.0906 24.41);
  --red-600: oklch(51.13% 0.1049 13.54);
  --red-700: oklch(43.8% 0.0875 15.47);
  --red-800: oklch(36.4% 0.0719 16.64);
  --red-900: oklch(28.67% 0.0542 20.24);

  --primary-50: var(--green-50);
  --primary-100: var(--green-100);
  --primary-200: var(--green-200);
  --primary-300: var(--green-300);
  --primary-400: var(--green-400);
  --primary-500: var(--green-500);
  --primary-600: var(--green-600);
  --primary-700: var(--green-700);
  --primary-800: var(--green-800);
  --primary-900: var(--green-900);

  --secondary-50: var(--green-50);
  --secondary-100: var(--green-100);
  --secondary-200: var(--green-200);
  --secondary-300: var(--green-300);
  --secondary-400: var(--green-400);
  --secondary-500: var(--green-500);
  --secondary-600: var(--green-600);
  --secondary-700: var(--green-700);
  --secondary-800: var(--green-800);
  --secondary-900: var(--green-900);

  /* Button styles for light mode */
  --btn-primary-bg: var(--green-600);
  --btn-primary-text: oklch(94.31% 0 0);
  --btn-primary-hover-bg: var(--green-700);
  --btn-primary-hover-text: white;

  /* Secondary button - white background with green text and border in light mode */
  --btn-secondary-bg: white;
  --btn-secondary-text: var(--green-600);
  --btn-secondary-border: var(--green-600);
  --btn-secondary-hover-bg: var(--green-600);
  --btn-secondary-hover-text: white;
  --btn-secondary-hover-border: var(--green-700);

  --btn-tertiary-bg: white;
  --btn-tertiary-text: var(--green-600);
  --btn-tertiary-border: var(--green-600);
  --btn-tertiary-hover-bg: var(--green-600);
  --btn-tertiary-hover-text: white;
  --btn-tertiary-hover-border: var(--green-700);

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

  /* Common spacing for elements, should mostly just use spacing to keep things
    consistent, but could use others when needed */
  --spacing-lg: 28px;
  --spacing: 20px;
  --spacing-sm: 12px;

  --padding-lg: 32px;
  --padding: 24px;
  --padding-sm: 16px;

  --box-shadow: 0 0 4px 4px rgba(2, 121, 89, 0.08);
  --input-default: white;
  --border-radius: 8px;
  --border-radius-sm: 4px;
  --border-radius-lg: 16px;

  /* Table styling */
  --table-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  --table-header-bg: var(--primary-50);
  --table-header-text: var(--gray-700);
  --table-header-border: var(--primary-200);
  --table-border: var(--gray-200);
  --table-cell-bg: white;
  --table-cell-text: var(--gray-800);
  --table-row-hover: var(--primary-50);

  /* Component backgrounds and colors for light mode */
  --header-bg: var(--primary-700);
  --navbar-bg: white;

  /* Menu and dropdown styling - dark green background in both modes */
  --menu-button-bg: white;
  --menu-button-border: var(--gray-300);
  --menu-button-text: var(--gray-700);
  --menu-button-hover-bg: var(--gray-100);
  --menu-bg: var(--primary-600); /* Dark green background */
  --menu-border: var(--primary-700);
  --menu-item-text: oklch(95% 0.002 240); /* Light text on dark green */
  --menu-item-active-bg: oklch(0% 0 0 / 0.15); /* Semi-transparent overlay */
  --menu-item-active-text: oklch(98% 0.001 240); /* Brighter text when active */
  --menu-danger-text: var(--red-300); /* Lighter red for dark background */
  --menu-danger-icon: var(--red-300);
  --menu-danger-active-bg: oklch(0% 0 0 / 0.15);
  --menu-danger-active-text: var(--red-200);

  /* Dropdown styling */
  --dropdown-bg: white;
  --dropdown-border: var(--gray-200);
  --dropdown-text: var(--gray-900);
  --dropdown-item-active-bg: var(--primary-100);
  --dropdown-item-active-text: var(--primary-900);
  --dropdown-check: var(--primary-600);
  --dropdown-check-active: var(--primary-600);
  --listbox-icon: var(--gray-500);

  /* Danger text */
  --danger-text: var(--red-600);
  --danger-text-light: var(--red-500);
  --danger-text-dark: var(--red-400);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);

  /* Light mode surface colors */
  --surface-primary: white;
  --surface-secondary: var(--gray-100);
  --surface-tertiary: white;
  --surface-elevated: white;
  --surface-overlay: white;

  /* Light mode text colors */
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-tertiary: var(--gray-500);
  --text-disabled: var(--gray-400);

  /* Light mode border colors */
  --border-primary: var(--gray-300);
  --border-secondary: var(--gray-200);
  --border-focus: var(--primary-600);

  /* Card and component colors */
  --card-bg: white;
  --card-border: var(--gray-200);
  --button-bg: white;
  --button-border: var(--gray-300);
  --button-text: var(--gray-700);

  --inquiries-bg: white;
  --input-bg: var(--input-default);

  /* Domain grid text colors */
  --domain-name-text: var(--gray-900); /* Darkest for domain names */
  --domain-column-text: var(--gray-700); /* Lighter for other columns */
}

/* Modern dark mode theme handled in variables-dark.css */

/* variables-dark.css */
/* Modern Dark Mode Theme - Consolidated selectors following best practices */
[data-theme='dark'] {
  /* Modern dark theme with proper contrast ratios */
  --surface-primary: oklch(10% 0.002 240); /* Main app background */
  --surface-secondary: oklch(15% 0.004 240); /* Slightly elevated surfaces */
  --surface-tertiary: oklch(20% 0.006 240); /* Card backgrounds */
  --surface-elevated: oklch(30% 0.008 240); /* Elevated components */
  --surface-overlay: oklch(25% 0.01 240); /* Modal/overlay backgrounds */

  /* High contrast text colors */
  --text-primary: oklch(95% 0.002 240);
  --text-secondary: oklch(78% 0.004 240);
  --text-tertiary: oklch(62% 0.006 240);
  --text-disabled: oklch(46% 0.008 240);

  /* Subtle, high-contrast borders */
  --border-primary: oklch(25% 0.008 240);
  --border-secondary: oklch(18% 0.006 240);
  --border-focus: var(--primary-500);

  /* Grayscale mapping */
  --gray-100: var(--surface-primary);
  --gray-200: var(--surface-secondary);
  --gray-300: var(--surface-tertiary);
  --gray-400: var(--border-primary);
  --gray-500: var(--text-disabled);
  --gray-600: var(--text-tertiary);
  --gray-700: var(--text-secondary);
  --gray-800: var(--text-primary);
  --gray-900: oklch(98% 0.001 240);

  /* Brand colors - maintain accessibility */
  --green-100: oklch(12% 0.02 166);
  --green-200: oklch(16% 0.03 166);
  --green-300: oklch(22% 0.04 166);
  --green-400: oklch(32% 0.06 166);
  --green-500: oklch(45% 0.08 166);
  --green-600: oklch(58% 0.09 166); /* Primary brand color - accessible */
  --green-700: oklch(68% 0.085 166);
  --green-800: oklch(78% 0.07 166);
  --green-900: oklch(88% 0.05 166);

  /* Error colors */
  --red-100: oklch(12% 0.02 25);
  --red-200: oklch(16% 0.03 25);
  --red-300: oklch(22% 0.04 25);
  --red-400: oklch(32% 0.06 25);
  --red-500: oklch(45% 0.08 25);
  --red-600: oklch(65% 0.15 25);
  --red-700: oklch(75% 0.13 25);
  --red-800: oklch(85% 0.1 25);
  --red-900: oklch(95% 0.07 25);

  /* Info colors */
  --blue-100: oklch(12% 0.02 240);
  --blue-200: oklch(16% 0.03 240);
  --blue-300: oklch(22% 0.04 240);
  --blue-400: oklch(32% 0.06 240);
  --blue-500: oklch(45% 0.08 240);
  --blue-600: oklch(65% 0.12 240);
  --blue-700: oklch(75% 0.1 240);
  --blue-800: oklch(85% 0.08 240);
  --blue-900: oklch(95% 0.05 240);

  /* Warning colors */
  --purple-100: oklch(12% 0.02 320);
  --purple-200: oklch(16% 0.03 320);
  --purple-300: oklch(22% 0.04 320);
  --purple-400: oklch(32% 0.06 320);
  --purple-500: oklch(45% 0.08 320);
  --purple-600: oklch(65% 0.12 320);
  --purple-700: oklch(75% 0.1 320);
  --purple-800: oklch(85% 0.08 320);
  --purple-900: oklch(95% 0.05 320);

  /* Primary/secondary mappings */
  --primary-100: var(--green-100);
  --primary-200: var(--green-200);
  --primary-300: var(--green-300);
  --primary-400: var(--green-400);
  --primary-500: var(--green-500);
  --primary-600: var(--green-600);
  --primary-700: var(--green-700);
  --primary-800: var(--green-800);
  --primary-900: var(--green-900);

  --secondary-100: var(--green-100);
  --secondary-200: var(--green-200);
  --secondary-300: var(--green-300);
  --secondary-400: var(--green-400);
  --secondary-500: var(--green-500);
  --secondary-600: var(--green-600);
  --secondary-700: var(--green-700);
  --secondary-800: var(--green-800);
  --secondary-900: var(--green-900);

  /* Modern button styling with proper contrast */
  --btn-primary-bg: var(--primary-600);
  --btn-primary-text: oklch(95% 0.002 240); /* Near white, high contrast */
  --btn-primary-hover-bg: var(--primary-700);
  --btn-primary-hover-text: oklch(98% 0.001 240);

  --btn-secondary-bg: transparent;
  --btn-secondary-text: var(--primary-600);
  --btn-secondary-border: var(--primary-600);
  --btn-secondary-hover-bg: var(--primary-100);
  --btn-secondary-hover-text: var(--primary-700);
  --btn-secondary-hover-border: var(--primary-700);

  --btn-tertiary-bg: transparent;
  --btn-tertiary-text: var(--green-600);
  --btn-tertiary-border: var(--green-600);
  --btn-tertiary-hover-bg: var(--green-100);
  --btn-tertiary-hover-text: var(--green-700);
  --btn-tertiary-hover-border: var(--green-700);

  /* Dark mode optimized shadows */
  --box-shadow: 0 4px 16px oklch(4% 0.001 240 / 0.4);
  --shadow-sm: 0 1px 3px oklch(4% 0.001 240 / 0.2);
  --shadow-md: 0 4px 8px oklch(4% 0.001 240 / 0.3), 0 2px 4px oklch(4% 0.001 240 / 0.15);
  --shadow-lg: 0 8px 20px oklch(4% 0.001 240 / 0.4), 0 4px 8px oklch(4% 0.001 240 / 0.2);

  /* Component styling */
  --table-shadow: var(--shadow-md);
  --table-header-bg: var(--surface-elevated);
  --table-header-text: var(--text-primary);
  --table-header-border: var(--border-primary);
  --table-border: var(--border-secondary);
  --table-cell-bg: var(--surface-tertiary);
  --table-cell-text: var(--text-primary);
  --table-row-hover: var(--surface-elevated);

  /* Input styling */
  --input-default: var(--surface-tertiary);

  /* Card and component colors */
  --card-bg: var(--surface-tertiary);
  --card-border: var(--border-secondary);
  --button-bg: var(--surface-elevated);
  --button-border: var(--border-primary);
  --button-text: var(--text-primary);

  /* Specific component backgrounds */
  --inquiries-bg: var(--surface-secondary);

  /* Domain grid text colors */
  --domain-name-text: oklch(92% 0.003 240); /* High contrast for domain names */
  --domain-column-text: oklch(78% 0.004 240); /* Marginally lighter for other columns */

  /* Header hierarchy - header darker, navbar lighter */
  --header-bg: var(--primary-500); /* Darker header */
  --header-text: oklch(95% 0.002 240);
  --header-toggle-hover: oklch(85% 0.004 240);

  --navbar-bg: var(--surface-elevated); /* Lighter navbar */
  --navbar-border: var(--border-primary);
  --navbar-text: var(--text-secondary);
  --navbar-link-hover: var(--primary-600);
  --navbar-active-text: var(--primary-600);
  --navbar-active-indicator: var(--primary-600);
  --navbar-shadow: var(--shadow-sm);

  /* Menu and dropdown styling - dark green background in both modes */
  --menu-button-bg: var(--surface-elevated);
  --menu-button-border: var(--border-primary);
  --menu-button-text: var(--text-primary);
  --menu-button-hover-bg: var(--surface-overlay);
  --menu-bg: var(--primary-600); /* Dark green background */
  --menu-border: var(--primary-700);
  --menu-item-text: oklch(95% 0.002 240); /* Light text on dark green */
  --menu-item-active-bg: oklch(0% 0 0 / 0.15); /* Semi-transparent overlay */
  --menu-item-active-text: oklch(98% 0.001 240); /* Brighter text when active */
  --menu-danger-text: var(--red-300); /* Lighter red for dark background */
  --menu-danger-icon: var(--red-300);
  --menu-danger-active-bg: oklch(0% 0 0 / 0.15);
  --menu-danger-active-text: var(--red-200);

  /* Dropdown styling */
  --dropdown-bg: var(--surface-overlay);
  --dropdown-border: var(--border-primary);
  --dropdown-text: var(--text-primary);
  --dropdown-item-active-bg: var(--primary-100);
  --dropdown-item-active-text: var(--primary-700);
  --dropdown-check: var(--primary-600);
  --dropdown-check-active: var(--primary-600);
  --listbox-icon: var(--text-tertiary);

  /* Status colors with proper contrast */
  --danger-text: var(--red-600);
  --danger-text-light: var(--red-500);
  --danger-text-dark: var(--red-700);
}

/* container.css */
/* Responsive Container CSS */
.container {
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--breakpoint-xl);
  padding-left: 16px;
  padding-right: 16px;
  width: 100%;
}

@media (max-width: var(--breakpoint-lg)) {
  .container {
    max-width: 960px;
  }
}

@media (max-width: var(--breakpoint-md)) {
  .container {
    max-width: 720px;
    padding-left: 12px;
    padding-right: 12px;
  }
}

@media (max-width: var(--breakpoint-sm)) {
  .container {
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* base.css */
/* Uses the same variables and container as your Vue app */
/* ===== DNX Footer (independent from header) ===== */
:root{
    --footer-bg: #1b5a49;       /* brand green – matches your Vue footer */
    --footer-fg: #ffffff;
    --footer-link: #ffffff;
    --footer-link-hover: #ffffff;
}

.site-footer{
    background-color: var(--footer-bg);
    color: var(--footer-fg);
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    z-index: 5;
    box-shadow: 0 -2px 10px rgba(0,0,0,.05);
    height: 65px;
}

/* keep the rest exactly as before, just scope to .site-footer */
.site-footer .footer-content{ width:100%; margin:0 auto; display:flex; justify-content:space-between; align-items:center; }
.site-footer .footer-left{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.site-footer .footer-right{ display:flex; align-items:center; gap:24px; }
.site-footer .footer-logo{ height:24px; width:auto; }
.site-footer .copyright{ font-size:.85rem; color: var(--footer-fg); opacity:.9; }

.site-footer .footer-links{ display:flex; gap:24px; }
.site-footer .footer-links a{ color: var(--footer-link); text-decoration:none; font-size:.9rem; opacity:.9; transition:opacity .2s ease; }
.site-footer .footer-links a:hover{ opacity:1; color: var(--footer-link-hover); }

.site-footer .social-links{ display:flex; gap:16px; }
.site-footer .social-links a{ color: var(--footer-fg); font-size:1.2rem; opacity:.9; transition:opacity .2s ease; }
.site-footer .social-links a:hover{ opacity:1; }

/* responsive */
@media (max-width: 768px){
    .site-footer .footer-content{ flex-direction:column; gap:20px; padding:20px 16px; text-align:center; }
    .site-footer .footer-left{ align-items:center; }
    .site-footer .footer-right{ flex-direction:column; gap:16px; }
    .site-footer { height:auto }
}

/* keep footer identical in dark mode (like Vue) */
html[data-theme="dark"] .site-footer{
    background-color: #1b5a49;
    color: #ffffff;
}


/* Header shell */
.site-header{
    position: sticky; top: 0; z-index: 40;
    background: var(--header-bg, #ffffff);
    color: var(--header-fg, #111827);
    backdrop-filter: saturate(180%) blur(8px);
    transition: box-shadow .2s ease, background-color .2s ease;
    border-bottom: 1px solid color-mix(in oklab, var(--header-bg) 88%, #000 0%);
}
.site-header.is-scrolled{
    box-shadow: 0 6px 24px rgba(0,0,0,.06);
}

/* Inner layout (shares .container from your Vue assets) */
.header-inner{
    height: 64px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}

/* Brand */
.brand img{ height: 24px; width: auto; display: block }

/* Desktop nav */
.nav-links{
    display: none; gap: 8px; align-items: center;
}
@media (min-width: 768px){ .nav-links{ display: flex } }

.nav-links a, .nav-link{
    display: inline-flex; align-items: center; height: 40px;
    padding: 0 12px; border-radius: 10px;
    color: var(--header-link, #374151); text-decoration: none;
    transition: background-color .18s var(--ease-out, cubic-bezier(.2,.8,.2,1)),
    transform .18s var(--ease-out);
}
.nav-links a:hover, .nav-link:hover{ background: rgba(0,0,0,.05) }
.nav-links a:active, .nav-link:active{ transform: translateY(1px) }
.nav-link-active{ background: #111827; color: white !important }

/* Desktop actions */
.header-actions{
    display: none; gap: 8px; align-items: center;
}
@media (min-width: 768px){ .header-actions{ display: flex } }

/* Reuse your button tokens/classes from base.css */
.btn-primary{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding: 8px 14px; border-radius: 12px;
    background: var(--primary-600, #4f46e5); color: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
    transition: transform .16s var(--ease-out), box-shadow .16s var(--ease-out), background-color .16s;
}
.btn-primary:hover{ background: var(--primary-700, #4338ca) }
.btn-primary:active{ transform: translateY(1px) }

.btn-ghost{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding: 8px 12px; border-radius: 12px; color: var(--header-link, #374151);
    background: transparent; text-decoration: none; transition: background-color .16s, transform .16s;
}
.btn-ghost:hover{ background: rgba(0,0,0,.05) }
.btn-ghost:active{ transform: translateY(1px) }

/* Burger */
.burger{
    display: inline-flex; flex-direction: column; gap: 4px;
    width: 40px; height: 40px; border-radius: 10px;
    align-items: center; justify-content: center;
    background: transparent; border: 0; cursor: pointer;
    transition: background-color .16s;
}
.burger:hover{ background: rgba(0,0,0,.05) }
.burger span{ display:block; width:20px; height:2px; background: currentColor; border-radius: 2px; }
@media (min-width: 768px){ .burger{ display: none } }

/* Mobile nav */
.mobile-nav{
    border-top: 1px solid rgba(0,0,0,.08);
    background: var(--header-bg, #ffffff);
    padding: 12px 0; display: none;
}
.mobile-nav[style*="display: block"], .mobile-nav[x-cloak="false"]{ display: block } /* allow Alpine x-show */

.mobile-link{
    display:block; padding: 10px 12px; margin: 2px 0; border-radius: 10px;
    color: var(--header-link, #374151); text-decoration:none;
    transition: background-color .16s, transform .16s;
}
.mobile-link:hover{ background: rgba(0,0,0,.05) }
.mobile-link:active{ transform: translateY(1px) }

.mobile-actions{ display:flex; gap:8px; padding: 8px 12px; }
.mobile-actions .btn-ghost, .mobile-actions .btn-primary{ flex:1 }



/* =========================
   DNX Header – Vue-style parity for Razor markup
   Targets the classes in your .cshtml exactly.
   ========================= */

/* --------- Tokens / fallbacks --------- */
:root{
    --container-max: 1200px;
    --container-pad: 16px;

    --ease-out: cubic-bezier(.2,.8,.2,1);
    --ease-in: cubic-bezier(.4,0,1,1);
}

.menu-overlay{ display: none; }
.menu-overlay.open{ display: flex; }  /* this is the key */

/* Optional icon font normalizer (Font Awesome) */
.fas { line-height: 1; display: inline-block; }

/* --------- Shell / global header --------- */
.global-header{
    position: sticky; top: 0; z-index: 40;
    background: var(--header-bg);
    color: var(--header-fg);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid rgba(0,0,0,.06);
    transition: box-shadow .2s ease, background-color .2s ease;
}
.global-header.is-scrolled{ /* add/remove via tiny JS if you want stronger shadow on scroll */
    box-shadow: 0 6px 24px rgba(0,0,0,.06);
}

/* --------- Nav bar container --------- */
.navbar{
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
}

/* Main row: logo • title spacer • links & toggler */
.header-main-row{
    height: 64px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
}

/* --------- Logo --------- */
.logo-container{ display: flex; align-items: center; }
.logo-dnx-image{ display: block; height: 24px; width: auto; }

/* --------- Title (center spacer on home it’s empty) --------- */
.header-title{
    flex: 1 1 auto;
    text-align: center;
    font-weight: 600;
    font-size: 1rem;
    color: var(--header-fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (min-width: 768px){
    .header-title{ font-size: 1.05rem; }
}

/* --------- Primary links (desktop only) --------- */
.nav-link-primary{
    display: none;                /* hidden by default, show with .d-md-flex */
    align-items: center;
    height: 40px;
    padding: 0 12px;
    border-radius: 10px;
    color: var(--header-link);
    text-decoration: none;
    transition: background-color .18s var(--ease-out), transform .18s var(--ease-out);
}
.nav-link-primary:hover{ background: var(--header-hover); }
.nav-link-primary:active{ transform: translateY(1px); }

/* --------- Toggler (mobile) --------- */
.navbar-toggler{
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 10px;
    border: 0; background: transparent; color: var(--header-fg);
    cursor: pointer;
    transition: background-color .16s var(--ease-out);
}
.navbar-toggler:hover{ background: var(--header-hover); }

/* bars icon space + notification dot */
.nav-bars{ position: relative; display: inline-flex; align-items: center; justify-content: center; }
.notification-icon{
    position: absolute; top: -2px; right: -2px;
    width: 8px; height: 8px; border-radius: 999px;
    background: #ef4444; /* red-500 */
    box-shadow: 0 0 0 2px var(--header-bg);
}

/* --------- Mobile overlay menu --------- */
.menu-overlay{
    position: fixed; inset: 0;
    background: rgba(17,24,39,.5);          /* neutral-900 @ 50% */
    backdrop-filter: blur(4px);
    display: none;                           /* hidden by default */
    align-items: flex-start; justify-content: center;
    z-index: 9999;
}
.menu-overlay.open{ display: flex; }       /* toggle this class via JS */

/* Drawer */
.menu-content{
    width: min(640px, 92vw);
    margin-top: 10px;
    background: var(--header-bg);
    color: var(--header-fg);
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    box-shadow: 0 24px 80px rgba(0,0,0,.18);
    padding: 12px 12px 8px;
    transform: translateY(-8px) scale(.98);
    opacity: 0;
    transition: transform .22s var(--ease-out), opacity .22s var(--ease-out);
}
.menu-overlay.open .menu-content{
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* Close button */
.close-menu{
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 10px;
    border: 0; background: transparent; color: var(--header-fg);
    cursor: pointer;
    transition: background-color .16s var(--ease-out);
    margin-left: auto;
}
.close-menu:hover{ background: var(--header-hover); }

/* Menu list (your _LoginPartial renders inside) */
.menu-list{
    list-style: none; margin: 8px 4px 6px; padding: 0;
    display: flex; flex-direction: column; gap: 6px;
}
.menu-list a{
    display: block; padding: 10px 10px; border-radius: 10px;
    color: var(--header-link); text-decoration: none;
    transition: background-color .16s var(--ease-out), transform .16s var(--ease-out);
}
.menu-list a:hover{ background: var(--header-hover); }
.menu-list a:active{ transform: translateY(1px); }

/* --------- Responsive adjustments --------- */
@media (min-width: 768px){
    .header-main-row{ gap: 16px; }
    .navbar{ padding-left: 20px; padding-right: 20px; }
}
@media (min-width: 1024px){
    .navbar{ padding-left: 24px; padding-right: 24px; }
}

/* --------- Optional: Inter font parity like Vue --------- */
@supports (font-variation-settings: normal){
    header, .global-header, .navbar{
        font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    }
}

/* ===== Overlay menu item look & feel ===== */
.menu-link{
    display:flex; align-items:center; gap:12px;
    padding:10px 12px; border-radius:10px;
    color: var(--header-link, #374151); text-decoration:none;
    transition: background-color .16s var(--ease-out, cubic-bezier(.2,.8,.2,1)),
    transform .16s var(--ease-out);
}
.menu-link:hover{ background: var(--header-hover, rgba(0,0,0,.05)); }
.menu-link:active{ transform: translateY(1px); }

/* icon left, text, arrow right */
.menu-icon{ width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; opacity:.9; }
.menu-text{ flex:1 1 auto; }
.menu-arrow{ width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; opacity:.6; }

/* little red dot when there are notifications (Offers Made) */
.notification-menu-icon{
    margin-left:8px; width:8px; height:8px; border-radius:999px; background:#ef4444;
    box-shadow: 0 0 0 2px var(--header-bg, #fff);
}

/* Dark-mode toggle pill inside the row */
.toggle-switch{
    --toggle-w: 42px; --toggle-h: 22px;
    position: relative; width: var(--toggle-w); height: var(--toggle-h);
    border-radius: 999px; background: rgba(0,0,0,.12); flex: 0 0 auto;
    transition: background-color .16s var(--ease-out);
}
.toggle-knob{
    position: absolute; top: 2px; left: 2px;
    width: calc(var(--toggle-h) - 4px); height: calc(var(--toggle-h) - 4px);
    background: #fff; border-radius: 999px; box-shadow: 0 1px 2px rgba(0,0,0,.2);
    transition: transform .18s var(--ease-out);
}
html[data-theme="dark"] .toggle-switch{ background: rgba(255,255,255,.25); }
html[data-theme="dark"] .toggle-knob{ transform: translateX(calc(var(--toggle-w) - var(--toggle-h))); }


:root { --header-height: 64px; }

/* Make the overlay fill the viewport and align from the top (below header) */
body .menu-overlay{
    position: fixed;
    inset: 0;
    display: none;
    align-items: flex-start !important;   /* force top alignment */
    justify-content: center;
    padding-top: calc(var(--header-height) + 8px); /* sit below header */
    z-index: 2147483647;                  /* above everything */
    background: rgba(17,24,39,.5);
    backdrop-filter: blur(4px);
}

/* Show when toggled */
body .menu-overlay.open{ display: flex !important; }

/* The sheet itself: no extra top margin; responsive width */
body .menu-overlay .menu-content{
    margin: 0;                            /* override any margins */
    width: min(640px, 92vw);
    border-radius: 14px;
    transform: translateY(-8px) scale(.98);
    opacity: 0;
    transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .22s cubic-bezier(.2,.8,.2,1);
}
body .menu-overlay.open .menu-content{
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* Optional: full-width drawer look under header (uncomment if you prefer) */
/*
body .menu-overlay .menu-content{
  width: 100%;
  max-width: var(--container-max, 1200px);
  border-radius: 0 0 14px 14px;
}
*/

/* Lock page scroll when menu is open */
body.no-scroll { overflow: hidden; }


/* Monitor button start*/
/* ===== DNX Modal (Monitor Prompt) ===== */
#monitorPromptModal .modal-dialog{
    max-width: 560px;             /* comfortable width */
    margin: 0.75rem auto;
}

#monitorPromptModal .modal-content{
    background: var(--bg-200);
    color: var(--brand-black, #111827);
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 14px;
    box-shadow: 0 24px 80px rgba(0,0,0,.18);
}

#monitorPromptModal .modal-header{
    padding: 16px 18px 8px;
    border: 0;
}
#monitorPromptModal .modal-title{
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--brand-black, #111827);
}

#monitorPromptModal .btn-close{
    width: 36px; height: 36px; border-radius: 10px;
    opacity: .7;
}
#monitorPromptModal .btn-close:hover{ opacity: 1; background: var(--header-hover, rgba(0,0,0,.05)); }

#monitorPromptModal .modal-body{
    padding: 6px 18px 6px;
    color: color-mix(in oklab, var(--brand-black, #111827) 88%, #000 0%);
    font-size: .98rem;
    line-height: 1.45;
}
#monitorPromptModal .modal-body a{
    color: var(--primary-600, #4f46e5);
    text-decoration: none;
}
#monitorPromptModal .modal-body a:hover{
    text-decoration: underline;
}

#monitorPromptModal .modal-footer{
    padding: 10px 18px 16px;
    border: 0;
    display: flex; justify-content: flex-end; gap: 10px;
}

/* Use your existing button tokens */
#monitorPromptModal .btn-no{
    background: var(--brand-secondary, #027959);
    border-radius: 28px;
    border-style: solid;
    border-color: var(--brand-secondary, #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;
    color: #fff;
}

#monitorPromptModal .btn-yes {
    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;
    color: #fff;
}

/* Backdrop parity with your overlay */
.modal-backdrop.show{
    background: rgba(17,24,39,.50);
    backdrop-filter: blur(4px);
}

/* Dark mode */
html[data-theme="dark"] #monitorPromptModal .modal-content{
    background: var(--bg-200);
    color: var(--brand-black, #e5e7eb);
    border-color: rgba(255,255,255,.08);
}
html[data-theme="dark"] #monitorPromptModal .modal-body{
    color: color-mix(in oklab, var(--brand-black, #e5e7eb) 92%, #fff 0%);
}

/* Monitor button end*/

/* ===== Save Search Modal ===== */
#saveSearchModal .modal-content {
    background-color: transparent;
    border: none;
}

#saveSearchModal .modal-dialog {
    max-width: 480px;
    margin: 0.75rem auto;
    background: var(--bg-200);
    border-radius: 16px;
    padding: 16px;
}

#saveSearchModal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: none;
    padding: 0 0 16px 0;
}

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

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

#saveSearchModal .modal-body {
    padding: 0;
}

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

#saveSearchModal .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);
}

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

#saveSearchModal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: none;
    padding: 16px 0 0 0;
}

#saveSearchModal .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;
}

#saveSearchModal .btn-secondary {
    background: var(--secondary-100, #e6f3f0);
    color: var(--brand-secondary, #027959);
    border-color: var(--brand-secondary, #027959);
}
#saveSearchModal .btn-secondary:hover {
    background: var(--secondary-200, #c0e0d9);
}

#saveSearchModal .btn-primary {
    background: var(--brand-primary, #027959);
    color: var(--brand-white, #ececec);
    border-color: var(--brand-primary, #027959);
}
#saveSearchModal .btn-primary:hover {
    background: var(--primary-700, #026349);
}
/* Save Search Modal end */

.namebio {
    text-decoration: none;
}
/* menu-drawer.css */
/* ===== DNX Drawer (Razor) – match Vue AppMenu look/feel ===== */

:root{
    /* Map to your variables.css tokens */
    --green-800: oklch(36.4% 0.0719 169.64);
    --primary-800: var(--green-800);
    --primary-700: #13342d;
    --primary-600: #174039;
    --primary-500: #1d4d45;
    --menu-border: rgba(255,255,255,.08);
    --menu-item-text: #e7f0ee;
    --menu-item-active-bg: rgba(255,255,255,.06);
    --menu-item-active-text: #ffffff;
    --surface-overlay: #0c1e1a;
    --surface-elevated: rgba(255,255,255,.06);
    --gray-400: #9aa6a0;
    --shadow-lg: 0 10px 30px rgba(0,0,0,.45);
}

.menu{
    position:fixed; inset:0; z-index:100;
    display:none; /* toggled by .is-open */
}
.menu.is-open{ display:block; }

/* Overlay */
.menu-overlay,
.overlay{ /* support both class names */
    position:absolute; inset:0;
    background: color(from #000 srgb r g b / .5);
    z-index:101; cursor:pointer;
}

/* Panel */
.menu-panel,
.content{ /* support both class names */
    position:absolute; right:0; top:0; height:100%;
    width:300px; max-width:90vw;
    background: var(--primary-800);
    box-shadow: var(--shadow-lg);
    color: var(--menu-item-text);
    display:flex; flex-direction:column;
    overflow-y:auto; padding:0; z-index:102;

    transform: translateX(100%);
    transition: transform .30s ease;
    border-left: 1px solid var(--menu-border);
}
.menu.is-open .menu-panel,
.menu.is-open .content{ transform: translateX(0); }

/* Header */
.menu-header,
.header{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 24px; border-bottom:1px solid var(--menu-border);
}
.menu-title,
.title{ font-size:18px; font-weight:600; margin:0; color:var(--menu-item-text); }
.menu-close,
.close{
    border:0; background:none; color:var(--menu-item-text);
    font-size:24px; padding:4px; cursor:pointer;
}

/* Nav */
.menu-nav,
.nav{ display:flex; flex-direction:column; gap:0; padding:16px 0; }
.menu-list{ list-style:none; padding:0; margin:0; }
.nav-section{ margin-bottom:24px; }
.nav-section:last-child{ margin-bottom:0; }

/* Links (map your .menu-link to Vue's .link) */
.menu-link,
.link{
    display:flex; align-items:center;
    gap:12px; padding:12px; margin:0 12px;
    border-radius:8px; text-decoration:none;
    color: var(--menu-item-text);
    font-size:.95rem; font-weight:400;
    transition: background-color .2s ease;
}
.menu-link:hover,
.link:hover{ background: var(--surface-elevated); }

.link--active{ background: var(--menu-item-active-bg); color: var(--menu-item-active-text); font-weight:600; }
.link--external{ justify-content:space-between; }
.link--disabled{ opacity:.5; cursor:not-allowed; pointer-events:none; }

.menu-icon{ width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; opacity:.95; }
.menu-text{ flex:1; }
.menu-arrow{ display:none; } /* Vue menu doesn’t show chevrons */

/* Footer (stub to match spacing; you can add theme/lang later) */
.menu-footer,
.footer{
    background: var(--primary-800);
    margin-top:auto; padding:16px 24px; border-top:1px solid var(--menu-border);
}

/* Dark mode overrides – keep drawer consistent across themes */
/*[data-theme='dark'] .menu-panel,*/
/*[data-theme='dark'] .content{ background: var(--primary-400, #15463f); }*/
/*[data-theme='dark'] .menu-header,*/
/*[data-theme='dark'] .header{ border-bottom-color: var(--primary-500); }*/
/*[data-theme='dark'] .menu-footer,*/
/*[data-theme='dark'] .footer{ border-top-color: var(--primary-500); }*/

     /* === DNX Manage menu – tone/contrast to match Vue === */
     /* Panel uses same green as header (fallback included) */
 .menu .menu-panel{
     background: var(--header-bg, var(--primary-600, #18463d));
     /* keep the subtle border like Vue */
     border-left: 1px solid var(--menu-border, rgba(255,255,255,.07));
 }

/* Item text & icons slightly brighter */
.menu .menu-link{
    color: rgba(255,255,255,.92);
}
.menu .menu-icon{
    color: rgba(255,255,255,.90);
    opacity: 1;              /* remove the extra dim */
}

/* Hover uses a touch more lift than before */
.menu .menu-link:hover{
    background: rgba(255,255,255,.08);
}

/* Active is a hair stronger + semi outline for definition */
.menu .menu-link.link--active{
    background: rgba(255,255,255,.12);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

/* Disabled mirrors Vue’s 50% feel */
.menu .menu-link.link--disabled{
    opacity: .50;
}

/* Section divider a bit subtler */
.menu .menu-footer,
.menu .menu-header{
    border-color: rgba(255,255,255,.10);
}

/* === DNX Manage menu – exact match to Vue === */

/* 1️⃣ Panel tone */
.menu .menu-panel {
    background: oklch(36.4% .0719 169.64); /* ← exact Vue Manage green */
    border-left: 1px solid rgba(255,255,255,.07);
}

/* 2️⃣ Item readability and weight */
.menu .menu-link {
    color: rgba(255,255,255,.94);
    font-weight: 500; /* matches Vue font tone */
}

.menu .menu-icon {
    color: rgba(255,255,255,.95);
    opacity: 1;
}

/* 3️⃣ Hover and active lift */
.menu .menu-link:hover {
    background: rgba(255,255,255,.08);
}

.menu .menu-link.link--active {
    background: rgba(255,255,255,.15);
    color: #fff;
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}

/* 4️⃣ Subtle header/footer borders */
.menu .menu-header,
.menu .menu-footer {
    border-color: rgba(255,255,255,.10);
}

/* 5️⃣ Overlay brightness (so content still visible behind) */
.menu .menu-overlay {
    background: rgba(0, 0, 0, 0.40);
}

/* === Final match to Vue Manage === */
:root { --manage-panel: oklch(36.4% .0719 169.64); }

/* Panel tone (force in both themes) */
.menu .menu-panel{
    background: var(--manage-panel);
    border-left: 1px solid rgba(255,255,255,.10);
}
[data-theme="dark"] .menu .menu-panel{ background: var(--manage-panel); }

/* Title + subtitle (email) */
.menu .menu-title{
    font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 600; font-size: 18px; letter-spacing: .2px;
    color: rgba(255,255,255,.96);
    margin-bottom: 10px;
    margin-top: 10px;
}
.menu .menu-subtitle{
    display:block;
    font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 400; font-size: 13.5px; line-height: 1.1;
    color: rgba(255,255,255,.72);
}

/* Items: font/contrast/spacing like Vue */
.menu .menu-list li + li{ margin-top: 6px; }         /* rhythm */
.menu .menu-link{
    font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 500; font-size: 15.5px; line-height: 1.35;
    color: rgba(255,255,255,.94);
    padding: 12px 14px;
    border-radius: 12px;
}
.menu .menu-link:hover{ background: rgba(255,255,255,.10); }
.menu .menu-link.link--active{
    background: rgba(255,255,255,.16);
    color:#fff;
    outline: 1px solid rgba(255,255,255,.06);
    outline-offset: 0;
}

/* External link row style (DNX Marketplace look) */
.menu .menu-link.link--external{ justify-content: space-between; }
.menu .external-icon{ font-size: .9rem; opacity: .8; }

/* Subtle borders like Vue */
.menu .menu-header, .menu .menu-footer{ border-color: rgba(255,255,255,.12); }

/* Softer backdrop so page content still breathes */
.menu .menu-overlay{ background: rgba(0,0,0,.40); }

/* === Vue-accurate typography + tones (final polish) ==================== */
:root { --manage-panel: oklch(36.4% .0719 169.64); }

.menu .menu-panel{
    background: var(--manage-panel);
    border-left: 1px solid rgba(255,255,255,.10);
}
[data-theme="dark"] .menu .menu-panel{ background: var(--manage-panel); }

/* Title + email under it */
.menu .menu-title{
    font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 600; font-size: 18px; letter-spacing: .2px;
    color: rgba(255,255,255,.96);
    margin-bottom: 2px;
}
.menu .menu-subtitle{
    display:block;
    font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 400; font-size: 13.5px; line-height: 1.15;
    color: rgba(255,255,255,.72);
}

/* Items – font, spacing, lift */
.menu .menu-list li + li{ margin-top: 6px; }   /* consistent rhythm like Manage */
.menu .menu-link{
    font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 500;               /* Manage uses ~500 */
    font-size: 15.5px;
    line-height: 1.35;
    color: rgba(255,255,255,.94);
    padding: 12px 14px;
    border-radius: 12px;
}
.menu .menu-link:hover{ background: rgba(255,255,255,.10); }

/* Active “pill” */
.menu .menu-link.link--active{
    background: rgba(255,255,255,.16);
    color:#fff;
    outline: 1px solid rgba(255,255,255,.06);
    outline-offset: 0;
    border-radius: 12px;
}

/* External row (DNX Marketplace) */
.menu .menu-link.link--external{ justify-content: space-between; }
.menu .external-icon{ font-size:.9rem; opacity:.8; }

/* Header/footer separators & overlay tone */
.menu .menu-header, .menu .menu-footer{ border-color: rgba(255,255,255,.12); }
.menu .menu-overlay{ background: rgba(0,0,0,.40); }
/* app-header.css */
/* ===== DNX Header (Vue parity) — de-duplicated ===== */

/* CSS variables & safe fallbacks */
:root{
    --header-height: 80px; /* Vue parity */
    --header-bg: var(--surface-header, #f2f7f4);
    --header-fg: var(--text-primary, #0d1b16);
    --header-link: var(--primary-700, #0f6a57);
    --header-link-hover: var(--primary-800, #0c5646);
    --header-hover: color-mix(in oklab, #000 6%, transparent);
    --header-border: color-mix(in oklab, var(--header-bg) 88%, #000 0%);
}

/* Outer header shell */
.app-header,
.global-header{
    position: sticky; top: 0; z-index: 50;
    background: var(--header-bg);
    color: var(--header-fg);
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    border-bottom: 1px solid var(--header-border);
    transition: background-color .2s ease, box-shadow .2s ease, border-color .2s ease;
    height: var(--header-height);
}

/* Subtle drop shadow when scrolling */
.global-header.is-scrolled{ box-shadow: 0 6px 18px rgba(0,0,0,.08); }

/* Inner container */
.navbar{ max-width: 1300px; margin: 0 auto; padding: 0 24px; border-bottom: 1px solid rgba(0,0,0,.06); }
.header-main-row{
    height: var(--header-height);
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
}

/* Zones */
.header-left{ display:flex; align-items:center; }
.header-center{ flex: 1 1 auto; display:flex; align-items:center; justify-content:center; gap:8px; }
.header-right{ display:flex; align-items:center; gap:12px; }

/* Logo */
.logo-container{ display:flex; align-items:center; }
.logo-dnx-image{ height: 50px; width: auto; display:block; }

/* Title */
.header-title{
    color: var(--header-fg);
    font-family: var(--font-poppins, 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
    font-weight: 600;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: .3px;
    text-align: center;
    margin: 0 8px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Desktop quick links (light header variant) */
.nav-link-primary{
    display: none; /* becomes inline-flex on md+ via .d-md-flex */
    align-items: center;
    height: 40px;
    padding: 0 10px;
    color: var(--header-link);
    text-decoration: none;
    font-weight: 600;
    border-radius: 12px;
    transition: color .15s ease, background-color .15s ease, transform .15s ease;
}
.nav-link-primary:hover{ color: var(--header-link-hover); background: transparent; }
.nav-link-primary:active{ transform: translateY(1px); }

/* Burger / icon buttons */
.icon-btn{
    width: 36px; height: 36px;
    display:inline-flex; align-items:center; justify-content:center;
    border-radius: 12px; padding: 0; border: 0;
    background: transparent; color: var(--header-fg);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
    position: relative;
}
.icon-btn:hover{ background: color-mix(in oklab, currentColor 10%, transparent); transform: scale(1.04); }
.icon-btn:active{ transform: translateY(1px); }
.icon-btn .fa-regular,
.icon-btn .fa-solid,
.icon-btn .fas,
.nav-bars{ font-size: 18px; line-height: 1; }

/* If you use Bootstrap’s toggler, normalize it to icon-btn size */
.navbar-toggler.icon-btn{
    border:0 !important; background:none !important; box-shadow:none !important;
    width:36px; height:36px; padding:0 !important; border-radius:12px;
}

/* Notification dot */
.notif-dot{
    position: absolute; top:-3px; right:-3px;
    width:8px; height:8px; border-radius:999px; background:#ef4444;
    box-shadow: 0 0 0 2px var(--header-bg);
}

/* Utility – show desktop links on md+ */
@media (min-width: 768px){ .d-md-flex{ display: inline-flex !important; } }

/* Hide center links on small screens */
@media (max-width: 767.98px){ .header-center .nav-link-primary{ display:none !important; } }

/* ===== Dark mode (neutral header, green links) ===== */
html[data-theme="dark"] .app-header,
html[data-theme="dark"] .global-header{
    background: color-mix(in oklab, #0b201a 8%, transparent);
    border-bottom-color: color-mix(in oklab, #000 80%, transparent);
    color: #e7f6f2;
}
html[data-theme="dark"] .nav-link-primary{ color: var(--primary-400, #35a18d); }
html[data-theme="dark"] .icon-btn{ color: #e7f6f2; }
html[data-theme="dark"] .icon-btn:hover{ background: color-mix(in oklab, currentColor 10%, transparent); }
html[data-theme="dark"] .notif-dot{ box-shadow: 0 0 0 2px color-mix(in oklab, #0b201a 8%, transparent); }

/* ===== Brand variant (DNX green bar) ===== */
.app-header--brand .global-header{
    background: #1b5a49 !important;
    color: #ffffff !important;
    border-bottom: none !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.app-header--brand .header-main-row{ height: var(--header-height) !important; }

/* Logo size parity on brand */
.app-header--brand .logo-dnx-image{ height: 50px; }

/* Title on brand */
.app-header--brand .header-title{ color: #fff !important; }

/* Links on brand (pill look) */
.app-header--brand .nav-link-primary{
    color: #fff !important;
    background: rgba(255,255,255,.08);
    border-radius: 12px;
}
.app-header--brand .nav-link-primary:hover{
    background: rgba(255,255,255,.14) !important;
    color: #fff !important;
}

/* Icon buttons on brand */
.app-header--brand .icon-btn{
    color: #e4fff7 !important;
}
.app-header--brand .icon-btn:hover{
    background: rgba(255,255,255,.10) !important;
    color: #ffffff !important;
}

/* Notification dot ring matches brand bar */
.app-header--brand .notif-dot{ box-shadow: 0 0 0 2px #1b5a49; }

/* Stronger shadow when scrolled on brand */
.app-header--brand .global-header.is-scrolled{ box-shadow: 0 8px 28px rgba(0,0,0,.25); }

/* Dark mode keeps the same brand strip */
html[data-theme="dark"] .app-header--brand .global-header{ background: #1b5a49 !important; }
html[data-theme="dark"] .app-header--brand .icon-btn{ color: #d7fff2 !important; }

header.app-header.app-header--brand .icon-btn:hover,
header.app-header.app-header--brand .navbar-toggler.icon-btn:hover {
    background: rgba(255,255,255,.10) !important;
    color: #ffffff !important;
}
header.app-header.app-header--brand .icon-btn .fa-bell,
header.app-header.app-header--brand .icon-btn .fa-moon,
header.app-header.app-header--brand .icon-btn .fa-bars {
    font-size: 22px; line-height: 1;
}

.app-header--brand .nav-bars{ color: inherit; }

@media (prefers-reduced-motion: no-preference) {
    /* Button transition */
    header.app-header .header-right .icon-btn {
        will-change: transform;
        transition:
                transform 0.25s cubic-bezier(.25, .8, .25, 1),
                background-color 0.25s ease,
                color 0.25s ease;
    }

    /* Gentle lift + scale */
    header.app-header .header-right .icon-btn:hover {
        transform: translateY(-1px) scale(1.07) !important;
    }

    /* Press feedback */
    header.app-header .header-right .icon-btn:active {
        transform: scale(0.96) !important;
        transition-duration: 0.12s;
    }

    /* Inner icon (Font Awesome glyph) */
    header.app-header .header-right .icon-btn .fa-solid,
    header.app-header .header-right .icon-btn .fa-regular,
    header.app-header .header-right .icon-btn .fa-bars,
    header.app-header .header-right .icon-btn .fa-moon,
    header.app-header .header-right .icon-btn .fa-sun,
    header.app-header .header-right .icon-btn .fa-bell {
        transition: transform 0.25s cubic-bezier(.25, .8, .25, 1),
        filter 0.25s ease;
    }

    header.app-header .header-right .icon-btn:hover .fa-solid,
    header.app-header .header-right .icon-btn:hover .fa-regular,
    header.app-header .header-right .icon-btn:hover .fa-bars,
    header.app-header .header-right .icon-btn:hover .fa-moon,
    header.app-header .header-right .icon-btn:hover .fa-sun,
    header.app-header .header-right .icon-btn:hover .fa-bell {
        transform: scale(1.10);
        filter: drop-shadow(0 0 4px color-mix(in oklab, currentColor 35%, transparent));
    }

    /* Keep brand bar hover tint */
    header.app-header.app-header--brand .icon-btn:hover {
        background: rgba(255,255,255,.10) !important;
    }
}
/* dnxsitev2.css */
/* --------------------------------------------
   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;

  --brand-primary: #027959;
  --brand-secondary: var(--brand-primary);
  --btn-primary-bg: #027959;
  --btn-secondary-bg: var(--primary-100);
  --btn-primary-font-color: #ECECEC;
  --btn-secondary-font-color: var(--brand-primary);
  --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: var(--primary-100);
  --secondary-200: var(--primary-200);
  --secondary-300: var(--primary-300);
  --secondary-400: var(--primary-400);
  --secondary-500: var(--primary-500);
  --secondary-600: var(--primary-600);
  --secondary-700: var(--primary-700);
  --secondary-800: var(--primary-800);
  --secondary-900: var(--primary-900);

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

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

  --input-default: #ffffff;

  --bg-200: #E0E0E0;

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

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

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

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

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

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

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

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

}

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


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


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


  /* Spinner */

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



  /* Spinner End */

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

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

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

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

  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

}



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

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

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

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

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

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

/* Shared Fonts */

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

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

/* Shared Fonts End */


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

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

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

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

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

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

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

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

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

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

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

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

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

.btn-primary-full-text {
  color: var(--btn-primary-font-color);
  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 rgb(2 121 89 / .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: var(--input-default);
  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%;
  background-color: var(--input-default);
}

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

/* Deal Radar */
.deal-radar {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 0 4px;
}

.deal-radar__header {
  width: 100%;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.deal-radar__heading-block {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.deal-radar__eyebrow {
  color: var(--brand-secondary);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-body-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
}

.deal-radar__title {
  color: var(--brand-black);
  font-family: var(--font-family-primary);
  font-size: 24px;
  line-height: 30px;
  font-weight: 700;
  margin: 0;
}

.deal-radar__subtitle {
  color: var(--text-secondary);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-body-sm);
  line-height: 20px;
  margin: 0;
  max-width: 70ch;
}

.deal-radar__controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.deal-radar.is-static .deal-radar__controls {
  display: none;
}

.deal-radar__control {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  background: var(--surface-primary);
  color: var(--brand-black);
  box-shadow: var(--shadow-sm);
  transition: background-color 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out;
}

.deal-radar__control:hover:not(:disabled) {
  color: var(--brand-primary);
  border-color: var(--primary-200);
  background: var(--primary-50);
}

.deal-radar__control:disabled {
  opacity: 0.42;
  cursor: default;
}

.deal-radar__browse-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--secondary-100);
  color: var(--brand-secondary);
  font-family: var(--font-family-secondary);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.deal-radar__viewport {
  width: 100%;
  overflow: hidden;
}

.deal-radar__grid {
  width: 100%;
  margin: 0;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-padding-inline: 1px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.deal-radar__grid::-webkit-scrollbar {
  display: none;
}

.deal-radar__panel {
  background: var(--surface-primary);
  border: 1px solid var(--gray-200);
  border-radius: var(--border-radius-lg);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow-sm);
  min-width: 0;
  flex: 0 0 calc((100% - 24px) / 3);
  scroll-snap-align: start;
}

.deal-radar__panel-head {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.deal-radar__panel-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.deal-radar__panel-title {
  color: var(--brand-black);
  font-family: var(--font-family-primary);
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  margin: 0;
}

.deal-radar__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-primary);
  text-decoration: none;
  background: var(--primary-50);
  border: 1px solid var(--primary-200);
  border-radius: 999px;
  padding: 2px 7px;
  font-family: var(--font-family-secondary);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.deal-radar__count:hover {
  color: var(--brand-secondary);
  border-color: var(--secondary-300);
}

.deal-radar__panel-copy {
  color: var(--text-secondary);
  font-family: var(--font-family-secondary);
  font-size: 11px;
  line-height: 15px;
  margin: 0;
}

.deal-radar__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.deal-radar__item {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid var(--gray-200);
}

.deal-radar__item.is-hot-deal {
  background: transparent;
}

.deal-radar__item-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
}

.deal-radar__topline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.deal-radar__domain-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.deal-radar__domain {
  color: var(--brand-black);
  font-family: var(--font-family-primary);
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.deal-radar__domain--hot {
  color: var(--alert-red);
}

.deal-radar__hot-icon {
  color: var(--alert-red);
  font-size: 14px;
  line-height: 1;
  flex: 0 0 auto;
}

.deal-radar__item.is-hot-deal .deal-radar__domain,
.deal-radar__item.is-hot-deal .deal-radar__hot-icon {
  color: var(--alert-red);
}

.deal-radar__domain:hover {
  color: var(--brand-secondary);
}

.deal-radar__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  color: var(--text-secondary);
  font-family: var(--font-family-secondary);
  font-size: 11px;
  line-height: 16px;
}

.deal-radar__meta span {
  white-space: nowrap;
}

.deal-radar__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex: 0 0 auto;
  white-space: nowrap;
}

.deal-radar__current-price {
  color: var(--brand-black);
  font-family: var(--font-family-primary);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}

.deal-radar__price.has-drop .deal-radar__current-price {
  color: var(--alert-green);
}

.deal-radar__price-history {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--text-secondary);
  font-family: var(--font-family-secondary);
  font-size: 11px;
  line-height: 16px;
  margin-top: 0;
}

.deal-radar__previous-price {
  color: var(--alert-red);
}

.deal-radar__price-drop {
  color: var(--text-secondary);
  font-weight: 700;
}

.deal-radar__empty {
  color: var(--text-secondary);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-body-sm);
  line-height: 20px;
  padding: 12px 0;
}

@media (max-width: 1100px) {
  .deal-radar__panel {
    flex-basis: calc((100% - 12px) / 2);
  }

  .deal-radar__header {
    align-items: center;
  }

  .deal-radar__browse-all {
    width: 100%;
    justify-content: center;
  }

  .deal-radar__item.is-hot-deal {
    margin: 0 -8px;
    padding-left: 8px;
    padding-right: 8px;
  }
}

@media (max-width: 720px) {
  .deal-radar__header {
    align-items: flex-start;
  }

  .deal-radar__controls {
    align-self: flex-start;
  }

  .deal-radar__panel {
    flex-basis: 100%;
  }

  .deal-radar__topline {
    align-items: flex-start;
  }

  .deal-radar__item {
    flex-direction: column;
    align-items: flex-start;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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


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

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

/* Modals */

.offer-detail-container {

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

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

  #messageForm {
    width: 100%;
  }

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

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

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

  #counterForm {
    width: 100%;
  }

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

    .accept {
      color: var(--brand-secondary, #027959);
      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, #e6f3f0);
      border-radius: 28px;
      border-style: solid;
      border-color: var(--brand-secondary, #027959);
      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, #027959);
      text-align: center;
      font-family: var(--font-family-primary);
      font-size: 16px;
      line-height: 16px;
      font-weight: 700;
      position: relative;
    }
    .btn2 {
      background: var(--alert-red, #d64045);
      border-radius: 28px;
      border-style: solid;
      border-color: var(--alert-red, #d64045);
      border-width: 1px;
      padding: 16px;
      display: flex;
      flex-direction: row;
      gap: 4px;
      align-items: center;
      justify-content: center;
      flex: 1;
      position: relative;
    }
    .accept2 {
      color: var(--brand-white, #ececec);
      text-align: center;
      font-family: var(--font-family-primary);
      font-size: 16px;
      line-height: 16px;
      font-weight: 700;
      position: relative;
      background-color: transparent;
      border: none;
    }
  }
}


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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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


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

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

/* Offers Made */


/* Offers Made Page Specific Styles */

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

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

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

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

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

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

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

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

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

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

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

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


/* Offers Made */

/* Offer Details */


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

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

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

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

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

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

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

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

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

  .offer-actions {
    display: block;
  }

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

}

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

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

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

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

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

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

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

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

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

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

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

  .offer-actions {
    display: flex;
  }

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

}

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

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

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

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

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

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

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

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

.offer-actions {
  gap: 8px;
}

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

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

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

.btn-primary-sm {
  background: var(--brand-primary);
  color:#fff;
  border-radius: 20px;
  border: 1px solid var(--brand-primary);
  padding: 6px 12px;
  font-family: var(--font-family-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.btn-primary-sm:hover {
  background: var(--primary-700);
  border-color: var(--primary-700);
}

/* 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, #e6f3f0);
    border-radius: 28px;
    border-style: solid;
    border-color: var(--brand-secondary, #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;
    height: 48px;
    position: relative;
  }
  .btn-secondary .accept {
    color: var(--brand-secondary, #027959);
    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, #e6f3f0);
      border-radius: 28px;
      border-style: solid;
      border-color: var(--brand-secondary, #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;
      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, #e6f3f0);
      border-radius: 28px;
      border-style: solid;
      border-color: var(--brand-secondary, #027959);
      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, #027959);
      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, #e6f3f0);
      border-radius: 28px;
      border-style: solid;
      border-color: var(--brand-secondary, #027959);
      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, #027959);
      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, #e6f3f0);
      border-radius: 28px;
      border-style: solid;
      border-color: var(--brand-secondary, #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;
    }
    .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, #e6f3f0);
  border-radius: 28px;
  border-style: solid;
  border-color: var(--brand-secondary, #027959);
  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, #027959);
  text-align: center;
  font-family: var(--font-family-primary);
  font-size: 16px;
  line-height: 21px;
  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, #e6f3f0);
  border-radius: 28px;
  border-style: solid;
  border-color: var(--brand-secondary, #027959);
  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, #027959);
  text-align: left;
  font-family: var(--font-family-primary);
  background: transparent;
  font-size: 16px;
  line-height: 16px;
  font-weight: 700;
  position: relative;
}

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

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

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

/* Words + Match Type End */

/* Exclude Options */

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

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

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

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

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

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

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

.exclude-dropdown-container .exclude-btn {
  background: var(--secondary-100, #e6f3f0);
  border-radius: 28px;
  border-style: solid;
  border-color: var(--brand-secondary, #027959);
  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, #027959);
  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, #e6f3f0);
  border-radius: 28px;
  border-style: solid;
  border-color: var(--brand-secondary, #027959);
  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, #027959);
  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, #e6f3f0);
  border-radius: 28px;
  border-style: solid;
  border-color: var(--brand-secondary, #027959);
  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, #027959);
  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, #e6f3f0);
  border-radius: 28px;
  border-style: solid;
  border-color: var(--brand-secondary, #027959);
  border-width: 1px;
  padding: 16px;
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
  justify-content: center;
  position: relative;
  /*max-width: 315px;*/
  width: 100%;

}

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

.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, #027959);
  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;
  padding: 2px;
}

.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, #027959);
    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, #027959);
    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, #027959);
  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, #027959);
  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, #027959);
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
}

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

/* Min Age End */

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

/* Min Words End */

/* Min char */

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

}

/* Min Char End */

/* Show End */

/* Filters */

/* Domain Results */

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

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

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

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

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

  .domain-list {
    gap: 0;
  }
}

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

  .btn-secondary {
    background: var(--secondary-100, #e6f3f0);
    border-radius: 28px;
    border-style: solid;
    border-color: var(--brand-secondary, #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;
    height: 48px;
    position: relative;
    width:150px;
  }

  .btn-secondary .accept {
    color: var(--brand-secondary, #027959);
    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, #027959);
  }
  .btn-secondary .accept {
    color: var(--btn-secondary-font-color, #ececec);
  }
  .btn-secondary i.fa-chevron-right, .btn-secondary-full i.fa-chevron-right {
    color: var(--btn-secondary-font-color, #ececec);
  }
  .no-text-decoration {
    text-decoration: none;
  }
}




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

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

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



/* Domain Results End */

/* Modals */
#marketplacePickerModal .sedo-price-notice,
.bulk-results-container .sedo-price-notice {
    color: var(--brand-secondary);
    font-family: var(--font-family-primary);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    margin: 8px 0 12px;
}

#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, #e6f3f0);
    border-radius: 28px;
    border-style: solid;
    border-color: var(--brand-secondary, #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;
    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, #027959);
    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, #027959);
    text-align: center;
    font-family: var(--font-family-primary);
    font-size: 14px;
    line-height: 16px;
    font-weight: 500;
    position: relative;
    flex: 1;
  }
  .icon-font-awesome-free-solid-c-chevron-up {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    position: relative;
    overflow: visible;
  }
  .icon-partner-afternic {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    position: relative;
    overflow: visible;
  }
  .icon-font-awesome-free-solid-c-chevron-right2 {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    position: relative;
    overflow: visible;
  }
  .icon-partner-escrow {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    position: relative;
    overflow: visible;
  }
  .icon-color {
    color: var(--brand-white, #ececec);
  }

  .icon-font-awesome-free-solid-c-chevron-right3 {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    position: relative;
    overflow: visible;
  }
  .icon-partner-sedo {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    position: relative;
    overflow: visible;
  }
  .icon-partner-efty {
    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, #027959);
  }

  /* 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, #e6f3f0);
    color: var(--brand-secondary, #027959);
    border-color: var(--brand-secondary, #027959);
  }

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

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

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

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

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


}

/* Make Offer */

/* Domain Search */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .btn2 {
    background: var(--secondary-100, #e6f3f0);
    border-radius: 28px;
    border: 1px solid var(--brand-secondary, #027959);
    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, #027959);
    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: #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, #e6f3f0);
      border-radius: 28px;
      border-style: solid;
      border-color: var(--brand-secondary, #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;
      height: 48px;
      position: relative;
    }
    .accept2 {
      color: var(--brand-secondary, #027959);
      text-align: center;
      font-family: var(--font-family-primary);
      font-size: 16px;
      line-height: 16px;
      font-weight: 700;
      position: relative;
    }
    .icon-font-awesome-free-solid-c-chevron-right2 {
      flex-shrink: 0;
      width: 16px;
      height: 16px;
      position: relative;
      overflow: visible;
    }
    .icon-font-awesome-free-solid-c-chevron-right3 {
      flex-shrink: 0;
      width: 16px;
      height: 16px;
      position: relative;
      overflow: visible;
    }

  }

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

}

/* Domain Search End */

/* Contact Page */

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

/* Contact Page End */

/* Privacy */

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

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

/* Privacy End */

/* Terms */

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

.terms-container {

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

/* Terms End */

/* Account Nav */

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

/* Account Nav End */

/* Login */

/* General Styles */

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

.strong {
  font-weight: 600;
}

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

.login{

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

  form {
    width: 100%;
  }

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

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

}

/* Login End */

/* Account Area */

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

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

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

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

}

/* Account Area End */

/* Account Nav */

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

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

/* Account Nav End */

/* Concierge */


.concierge {

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

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


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

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

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

  form {
    width: 100%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

/* Concierge End */

/* General Account */

/* Forgot Password */

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

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

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

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

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

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

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

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

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

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

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

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

/* 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, #027959);
  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, #027959); /* Soft brand background */
    color: #fff; /* White text */
    border: 1px solid #027959; /* 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, #e6f3f0);
    border-radius: 28px;
    border: 1px solid var(--brand-secondary, #027959);
    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, #027959);
    text-align: center;
    font-family: var(--font-family-primary);
    font-size: 16px;
    font-weight: 700;
    position: relative;
  }

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

}
/* DNX Assistant End */

/* Register */

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

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

/* Saved Searches */

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

.saved-searches-dropdown {
  border-radius: 16px;
  width: max-content;
  min-width: 280px;
  max-width: 400px;
  background-color: var(--section-primary);
  border: 1px solid var(--section-primary);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.saved-searches-dropdown .dropdown-item {
  color: var(--text-primary);
  cursor: pointer;
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 8px;
  margin: 2px 0;
}

.saved-searches-dropdown .dropdown-item:hover {
  background-color: var(--secondary-100);
  color: var(--text-primary);
}

.saved-searches-dropdown .saved-search-link {
  color: var(--text-primary);
  text-decoration: none;
}

.saved-searches-dropdown .saved-search-link:hover {
  color: var(--text-primary);
  text-decoration: none;
}

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

.saved-searches-dropdown .fa-icon-secondary {
  color: var(--brand-secondary);
}

.saved-searches-dropdown .edit-search-btn,
.saved-searches-dropdown .save-search-btn,
.saved-searches-dropdown .cancel-search-btn {
  background: none;
  border: none;
  opacity: 0.6;
}

.saved-searches-dropdown .edit-search-btn:hover,
.saved-searches-dropdown .save-search-btn:hover,
.saved-searches-dropdown .cancel-search-btn:hover {
  opacity: 1;
}

.saved-searches-dropdown .saved-search-input {
  background: var(--section-primary);
  color: var(--brand-black);
  border: 1px solid var(--brand-secondary);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 14px;
  max-width: 180px;
}

.saved-search-btn-text {
  text-align: center!important;
  min-width: 100px;
  text-overflow: clip !important;
  overflow: visible !important;
  white-space: nowrap;
}

/* Dark mode: make saved search edit input text visible */
[data-theme="dark"] .saved-searches-dropdown .saved-search-input {
  background-color: #2A2A2A;
  color: #E0E0E0;
  border-color: #555555;
}

/* Mobile: center saved searches and reduce button sizes so they don't overflow */
@media (max-width: 768px) {
  .saved-searches-filter-container {
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .saved-searches-filter-container .dropdown {
    width: auto;
    max-width: 280px;
  }
  .saved-searches-filter-container .inventory-btn {
    width: auto;
    padding: 10px 12px;
    border-radius: 20px;
  }
  .inventory-btn .accept {
    font-size: 13px;
  }
  #saveSearchButton,
  #updateSearchButton {
    font-size: 11px;
    /*padding: 6px 10px;*/
    white-space: nowrap;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Saved Searches End */

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

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

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

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

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

/* Global pricing indicators */

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

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

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

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

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

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

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

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

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

/* AI */

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

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

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

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

/* AI End */

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

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

/*AI Report End */

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

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

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

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

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

  margin: 0;
}

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

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

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

}

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

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

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

/* Vue styling */

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Make offer route domain search */

/* =========================================
   Make Offer Route Modal – matches MakeOfferModal
   Uses your theme switch: html[data-theme="..."]
========================================= */

/* shared layout */
#makeOfferRouteModal .modal-content {
    border-radius: 16px;
    border: none;
}

#makeOfferRouteModal .modal-header {
    padding: 20px 24px;
}

#makeOfferRouteModal .modal-body {
    padding: 28px 32px 32px;
}

#makeOfferRouteModal .d-grid {
    gap: 18px;
}

/* buttons (match DNX look) */
#makeOfferRouteModal #offerViaDnxBtn,
#makeOfferRouteModal #offerViaAfternicBtn {
    border-radius: 12px;
    padding: 14px 20px;
    font-size: 16px;
    font-weight: 600;
}

/* --------------------------
   DARK THEME
-------------------------- */
html[data-theme="dark"] #makeOfferRouteModal .modal-content {
    background-color: #121212 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] #makeOfferRouteModal .modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] #makeOfferRouteModal .modal-title {
    color: #ffffff !important;
    font-size: 22px;
    font-weight: 600;
}

html[data-theme="dark"] #makeOfferRouteModal .btn-close {
    filter: invert(1);
    opacity: 0.6;
}

html[data-theme="dark"] #makeOfferRouteModal .btn-close:hover {
    opacity: 1;
}

html[data-theme="dark"] #makeOfferRouteModal #offerViaDnxBtn {
    background-color: var(--brand-primary);
    color: #121212;
    border: none;
}

html[data-theme="dark"] #makeOfferRouteModal #offerViaDnxBtn:hover {
    background-color: var(--primary-700);
}

html[data-theme="dark"] #makeOfferRouteModal #offerViaAfternicBtn {
    background-color: transparent;
    color: var(--brand-primary);
    border: 2px solid var(--brand-primary);
}

html[data-theme="dark"] #makeOfferRouteModal #offerViaAfternicBtn:hover {
    background-color: color-mix(in oklch, var(--brand-primary) 12%, transparent);
}

html[data-theme="dark"] #makeOfferRouteModal .text-muted {
    color: rgba(255, 255, 255, 0.55) !important;
}

/* --------------------------
   LIGHT THEME
-------------------------- */
html[data-theme="light"] #makeOfferRouteModal .modal-content {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
}

html[data-theme="light"] #makeOfferRouteModal .modal-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] #makeOfferRouteModal .modal-title {
    color: #1a1a1a !important;
    font-size: 22px;
    font-weight: 600;
}

html[data-theme="light"] #makeOfferRouteModal .btn-close {
    filter: none;
    opacity: 0.5;
}

html[data-theme="light"] #makeOfferRouteModal .btn-close:hover {
    opacity: 0.9;
}

html[data-theme="light"] #makeOfferRouteModal #offerViaDnxBtn {
    background-color: var(--brand-primary);
    color: #ffffff;
    border: none;
}

html[data-theme="light"] #makeOfferRouteModal #offerViaDnxBtn:hover {
    background-color: var(--primary-700);
}

html[data-theme="light"] #makeOfferRouteModal #offerViaAfternicBtn {
    background-color: transparent;
    color: var(--brand-primary);
    border: 2px solid var(--brand-primary);
}

html[data-theme="light"] #makeOfferRouteModal #offerViaAfternicBtn:hover {
    background-color: color-mix(in oklch, var(--brand-primary) 8%, transparent);
}

html[data-theme="light"] #makeOfferRouteModal .text-muted {
    color: rgba(0, 0, 0, 0.55) !important;
}

/* End of Make offer route domain search */

/* View Selector (Table / Sheet toggle) */
.view-selector-row {
    display: flex;
    align-items: center;
}

.view-selector {
    display: inline-flex;
    border: 1px solid var(--brand-black);
    border-radius: 6px;
    overflow: hidden;
}

.view-selector-btn {
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    color: var(--brand-black);
    background: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background 0.15s, color 0.15s;
}

.view-selector-btn:hover {
    background: rgba(128, 128, 128, 0.1);
    color: var(--brand-black);
    text-decoration: none;
}

.view-selector-btn.active {
    background: var(--brand-secondary);
    color: #fff;
    border-color: var(--brand-secondary);
}

.view-selector-btn.active:hover {
    color: #fff;
    text-decoration: none;
}

.view-selector-btn + .view-selector-btn {
    border-left: 1px solid var(--brand-black);
}

.view-selector-btn.active + .view-selector-btn,
.view-selector-btn + .view-selector-btn.active {
    border-left-color: var(--brand-secondary);
}

/* main-site-shell.css */
/* Shared shell adapted from DNX.Main AppHeader.vue and assets/css/main.css. */
:root {
    --dnx-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-poppins: var(--dnx-font);
    --font-secondary: var(--dnx-font);
    --font-family-primary: var(--dnx-font);
    --font-family-secondary: var(--dnx-font);
    --dnx-canvas: oklch(.95 .01 180.56);
    --dnx-foreground: oklch(.2 .02 168);
    --dnx-sidebar: oklch(.45 .08 166.23);
    --dnx-sidebar-hover: oklch(.5 .06 166.23);
    --dnx-sidebar-border: oklch(.53 .05 166.23);
    --dnx-sidebar-text: oklch(.99 0 0);
    --dnx-footer: oklch(.344 .061 170);
    --dnx-header-base: #064d3a;
    --dnx-header-image: radial-gradient(ellipse at 103% 58%, rgb(213 240 151 / .86), rgb(154 208 116 / .46) 24%, transparent 48%), radial-gradient(ellipse at 73% 18%, rgb(83 151 100 / .54), transparent 44%), linear-gradient(112deg, #003c32, #064d3a 48%, #24714d);
}
html[data-theme='dark'] {
    --dnx-canvas: oklch(.14 0 0);
    --dnx-foreground: oklch(.99 0 0);
    --dnx-sidebar: oklch(.29 .05 166.23);
    --dnx-sidebar-hover: oklch(.35 .04 166.23);
    --dnx-sidebar-border: oklch(.4 .03 166.23);
    --dnx-footer: oklch(.285 .05 170);
    --dnx-header-base: #04110e;
    --dnx-header-image: radial-gradient(ellipse at 103% 58%, rgb(83 139 91 / .24), rgb(31 74 49 / .2) 25%, transparent 48%), linear-gradient(112deg, #04110e, #0c3025);
}
body.dnx-main-shell {
    font-family: var(--dnx-font);
    background: var(--dnx-canvas);
    color: var(--dnx-foreground);
}
.dnx-main-shell .site-wrapper, .dnx-main-shell .site-main { background: var(--dnx-canvas); }
.dnx-main-shell .app-header { height: 64px; position: sticky; top: 0; z-index: 50; border: 0; box-shadow: none; }
.dnx-main-shell .app-header .global-header {
    height: 64px; position: static; padding: 0; border: 0; box-shadow: none;
    background-color: var(--dnx-header-base) !important;
    background-image: var(--dnx-header-image) !important;
    background-size: 100% 900px !important;
    color: var(--dnx-sidebar-text);
}
.dnx-main-shell .app-header .navbar { display: block; width: min(100% - 2rem, 1232px); max-width: none; margin: auto; padding: 0; border: 0; }
.dnx-main-shell .app-header .header-main-row { height: 64px !important; width: 100%; gap: 16px; justify-content: space-between; }
.dnx-main-shell .app-header .logo-dnx-image { content: normal; width: 72px; height: auto; }
.dnx-main-shell .header-right { gap: 6px; }
.dnx-main-shell .app-header .icon-btn { width: 40px; height: 40px; border-radius: 6px; transform: none; }
.dnx-main-shell .app-header .icon-btn:hover, .dnx-main-shell .app-header .icon-btn:active { transform: none !important; }
.dnx-main-shell .app-header .icon-btn span { font-size: 22px; }
.dnx-main-shell .menu { display: block; visibility: hidden; pointer-events: none; transition: visibility 240ms; z-index: 1100; }
.dnx-main-shell .menu.is-open { visibility: visible; pointer-events: auto; transition: none; }
.dnx-main-shell .menu > .overlay { opacity: 0; background: rgb(0 0 0 / .5); transition: opacity 240ms ease; }
.dnx-main-shell .menu.is-open > .overlay { opacity: 1; }
.dnx-main-shell .menu > .content {
    width: 296px; max-width: calc(100vw - 1rem); height: 100dvh;
    background: var(--dnx-sidebar); color: var(--dnx-sidebar-text);
    border: 0; overflow: hidden; box-shadow: -8px 0 30px rgb(0 0 0 / .2);
    transition: transform 240ms cubic-bezier(.4, 0, 1, 1);
}
.dnx-main-shell .menu.is-open > .content { transition: transform 320ms cubic-bezier(.22, 1, .36, 1); }
.dnx-main-shell .menu-header { height: 64px; min-height: 64px; padding: 0 16px; border-bottom: 1px solid var(--dnx-sidebar-border); }
.dnx-main-shell .dnx-drawer-brand img { display: block; width: 72px; height: auto; }
.dnx-main-shell .menu-close { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 6px; font-size: 16px; color: inherit; }
.dnx-main-shell .menu-close:hover { background: var(--dnx-sidebar-hover); }
.dnx-main-shell .menu .nav { display: block; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px; }
.dnx-main-shell .menu .nav-section { margin: 0; }
.dnx-main-shell .menu .menu-link { display: flex; align-items: center; min-height: 40px; margin: 0; padding: 8px 12px; gap: 10px; border-radius: 8px; font: 500 14px/1.5 var(--dnx-font); color: var(--dnx-sidebar-text); }
.dnx-main-shell .menu .menu-link:hover, .dnx-main-shell .menu .link--active { background: var(--dnx-sidebar-hover); color: var(--dnx-sidebar-text); }
.dnx-main-shell .menu .menu-text { color: inherit; }
.dnx-main-shell .menu .footer { padding: 16px; background: var(--dnx-sidebar); border-top: 1px solid var(--dnx-sidebar-border); font-size: 12px; color: var(--dnx-sidebar-text); }
.dnx-main-shell .site-footer { background: var(--dnx-footer); height: auto; min-height: 100px; box-shadow: none; padding: 24px 0; }
.dnx-main-shell .site-footer .footer-content { width: min(100% - 2rem, 1232px); padding: 0; }
.dnx-main-shell .site-footer p { margin: 0; }
.dnx-main-shell .dnx-skip-link { position: fixed; top: 8px; left: 16px; z-index: 1200; transform: translateY(-150%); background: var(--dnx-canvas); color: var(--dnx-foreground); padding: 12px 16px; border-radius: 6px; }
.dnx-main-shell .dnx-skip-link:focus { transform: none; }
.dnx-main-shell :is(.app-header, .menu, .site-footer) :is(a, button):focus-visible { outline: 2px solid oklch(.8 .03 166.23); outline-offset: 3px; }
.dnx-main-shell #main-content:focus { outline: none; }
body.dnx-main-shell.no-scroll { overflow: hidden; }
@media (min-width: 1536px) { .dnx-main-shell .app-header .navbar, .dnx-main-shell .site-footer .footer-content { width: min(100% - 3rem, 1360px); } }
@media (max-width: 767px) { .dnx-main-shell .site-footer .footer-content { gap: 24px; } }
@media (prefers-reduced-motion: reduce) { .dnx-main-shell .menu, .dnx-main-shell .menu > .overlay, .dnx-main-shell .menu > .content { transition-duration: 1ms; } }

.dnx-main-shell .dnx-menu-group { margin-top: 4px; }
.dnx-main-shell .dnx-menu-group-first { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--dnx-sidebar-border); }
.dnx-main-shell .menu .menu-list li + li { margin-top: 4px; }
.dnx-main-shell .menu .dnx-account-icon { width: 16px; height: 16px; flex: 0 0 16px; }
.dnx-main-shell .menu .dnx-chevron { display: flex; opacity: .6; }
.dnx-main-shell .dnx-menu-group details[open] > summary { background: var(--dnx-sidebar-hover); }
.dnx-main-shell .dnx-menu-group summary { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; list-style: none; }
.dnx-main-shell .dnx-menu-group summary::-webkit-details-marker { display: none; }
.dnx-main-shell .dnx-menu-group summary:hover { background: var(--dnx-sidebar-hover); }
.dnx-main-shell .dnx-menu-group summary:focus-visible { outline: 2px solid oklch(.8 .03 166.23); outline-offset: -2px; }
.dnx-main-shell .dnx-menu-group ul { padding: 0 0 0 12px; margin: 4px 0 4px 28px; border-left: 1px solid var(--dnx-sidebar-border); list-style: none; }
.dnx-main-shell .dnx-menu-group ul .menu-link { min-height: 36px; font-size: 13px; }
.dnx-main-shell .dnx-chevron { margin-left: auto; transition: transform 200ms ease; }
.dnx-main-shell details[open] > summary .dnx-chevron { transform: rotate(90deg); }

.dnx-main-shell .menu > .content { position: absolute; align-items: stretch; gap: 0; }

/* Admin links share the main drawer, with the same active and focus states. */
.dnx-main-shell .menu .admin-nav-group-label { display: block; padding: 16px 12px 4px; font-size: 11px; font-weight: 600; opacity: .7; }
.dnx-main-shell .menu .admin-nav-group > ul { padding-left: 0; }

/* Account and offer notifications share the compact DNX header controls. */
.dnx-main-shell .app-header .icon-btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px; border: 0; background: transparent; color: #fff; box-shadow: none; }
.dnx-main-shell .app-header .icon-btn:hover,
.dnx-main-shell .app-header .icon-btn[aria-expanded='true'] { background: rgb(255 255 255 / .1); }
.dnx-main-shell .app-header .icon-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dnx-main-shell .header-popover { position: relative; }
.dnx-main-shell .header-panel { position: absolute; top: calc(100% + 10px); right: 0; width: 288px; max-width: calc(100vw - 32px); padding: 6px; border: 1px solid #dce3df; border-radius: 8px; background: #fff; color: #202b26; box-shadow: 0 8px 24px rgb(0 0 0 / .14); text-align: left; max-height: calc(100dvh - 80px); overflow-y: auto; }
.dnx-main-shell .header-panel[hidden], .dnx-main-shell .notif-dot[hidden] { display: none !important; }
.dnx-main-shell .header-panel h2 { margin: 0; padding: 10px 10px 12px; font: 600 14px/20px var(--dnx-font); border-bottom: 1px solid #dce3df; }
.dnx-main-shell .header-panel-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 10px; border-radius: 4px; color: inherit; text-decoration: none; font: 400 14px/20px var(--dnx-font); }
.dnx-main-shell .header-panel-link:hover { background: #f0f4f2; color: inherit; }
.dnx-main-shell .header-panel-link small, .dnx-main-shell .header-panel-note { display: block; color: #637068; font: 400 12px/18px var(--dnx-font); }
.dnx-main-shell .header-panel-note { margin: 0; padding: 6px 10px 12px; border-bottom: 1px solid #dce3df; }
.dnx-main-shell .header-appearance { padding: 12px 10px; margin: 4px 0; border: 0; border-top: 1px solid #dce3df; border-bottom: 1px solid #dce3df; }
.dnx-main-shell .header-appearance legend { float: none; width: auto; margin: 0 0 8px; padding: 0; font: 500 12px/18px var(--dnx-font); }
.dnx-main-shell .header-theme-options { display: flex; gap: 4px; }
.dnx-main-shell .header-theme-options button { flex: 1; padding: 7px 4px; border: 1px solid #dce3df; border-radius: 4px; background: transparent; color: inherit; font: 400 12px/18px var(--dnx-font); }
.dnx-main-shell .header-theme-options button[aria-pressed='true'] { background: #e4eee8; border-color: #668375; font-weight: 600; }
html[data-theme='dark'] .dnx-main-shell .header-panel { background: #202624; color: #eef3ef; border-color: #414a45; }
html[data-theme='dark'] .dnx-main-shell .header-panel :is(h2, fieldset, button, .header-panel-note) { border-color: #414a45; }
html[data-theme='dark'] .dnx-main-shell .header-panel :is(small, .header-panel-note) { color: #b0beb6; }
html[data-theme='dark'] .dnx-main-shell .header-panel-link:hover,
html[data-theme='dark'] .dnx-main-shell .header-theme-options button[aria-pressed='true'] { background: #35483e; }
@media (max-width: 480px) {
    .dnx-main-shell .header-panel { position: fixed; top: 60px; right: 16px; }
}

/* Main's account menu: 288px panel, 44px rows, 16px icons, nested settings. */
.dnx-main-shell #accountPanel { padding: 8px; border-radius: 12px; }
.dnx-main-shell #accountPanel .header-panel-link { justify-content: flex-start; width: 100%; min-height: 44px; padding: 8px 12px; gap: 10px; border: 0; border-radius: 8px; background: transparent; text-align: left; font: 400 14px/20px var(--dnx-font); color: inherit; }
.dnx-main-shell #accountPanel .header-panel-link:hover,
.dnx-main-shell #accountPanel .header-panel-link:focus-visible { background: #f0f4f2; }
.dnx-main-shell #accountPanel svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dnx-main-shell .header-account-email { padding: 8px 12px; margin: 0; font: 700 14px/20px var(--dnx-font); overflow-wrap: anywhere; }
.dnx-main-shell #accountPanel hr { margin: 4px 0; border: 0; border-top: 1px solid #dce3df; opacity: 1; }
.dnx-main-shell .header-credit-label { flex: 1; }
.dnx-main-shell #storeCreditBalance { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dnx-main-shell .header-submenu summary { list-style: none; cursor: pointer; }
.dnx-main-shell .header-submenu summary::-webkit-details-marker { display: none; }
.dnx-main-shell .header-chevron { margin-left: auto; }
.dnx-main-shell .header-submenu[open] > summary .header-chevron { transform: rotate(90deg); }
.dnx-main-shell .header-submenu-content { padding: 4px; border: 1px solid #dce3df; border-radius: 8px; }
.dnx-main-shell #accountPanel .theme-selected { margin-left: auto; visibility: hidden; display: flex; }
.dnx-main-shell #accountPanel [data-theme-choice][aria-pressed='true'] .theme-selected { visibility: visible; }
.dnx-main-shell #accountPanel .header-signout { color: #b42318; }
html[data-theme='dark'] .dnx-main-shell #accountPanel .header-panel-link:hover,
html[data-theme='dark'] .dnx-main-shell #accountPanel .header-panel-link:focus-visible { background: #35483e; }
html[data-theme='dark'] .dnx-main-shell #accountPanel :is(hr, .header-submenu-content) { border-color: #414a45; }
html[data-theme='dark'] .dnx-main-shell #accountPanel .header-signout { color: #fda29b; }
html[data-reduce-motion='true'] *, html[data-reduce-motion='true'] *::before, html[data-reduce-motion='true'] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
@media (min-width: 768px) {
    .dnx-main-shell #accountPanel { overflow: visible; }
    .dnx-main-shell .header-submenu { position: relative; }
    .dnx-main-shell .header-submenu-content { position: absolute; right: calc(100% + 8px); top: 0; width: 260px; max-height: calc(100dvh - 80px); overflow-y: auto; padding: 8px; background: #fff; border-radius: 12px; box-shadow: 0 8px 24px rgb(0 0 0 / .14); }
    html[data-theme='dark'] .dnx-main-shell .header-submenu-content { background: #202624; }
}
@media (max-height: 650px) {
    .dnx-main-shell #accountPanel { overflow-y: auto; }
    .dnx-main-shell .header-submenu-content { position: static; width: auto; max-height: none; box-shadow: none; }
}

/* Match Main's popover tokens, including neutral dark menus and radio indicators. */
.dnx-main-shell #accountPanel { --account-surface: oklch(1 0 0); --account-text: oklch(.2 .02 168); --account-muted: oklch(.56 0 0); --account-hover: oklch(.97 0 0); --account-border: oklch(.92 0 0); top: calc(100% + 8px); }
html[data-theme='dark'] .dnx-main-shell #accountPanel { --account-surface: oklch(.2 0 0); --account-text: oklch(.99 0 0); --account-muted: oklch(.71 0 0); --account-hover: oklch(.27 0 0); --account-border: rgb(255 255 255 / .1); }
.dnx-main-shell #accountPanel, .dnx-main-shell #accountPanel .header-submenu-content { background: var(--account-surface); color: var(--account-text); border-color: var(--account-border); }
.dnx-main-shell #accountPanel .header-panel-link:is(:hover, :focus-visible), .dnx-main-shell #accountPanel .header-submenu[open] > summary { background: var(--account-hover); }
.dnx-main-shell #accountPanel small { color: var(--account-muted); }
.dnx-main-shell #accountPanel hr { border-color: var(--account-border); }
.dnx-main-shell #accountPanel .header-chevron { display: flex; }
.dnx-main-shell #accountPanel .header-submenu[open] > summary .header-chevron { transform: none; }
.dnx-main-shell #accountPanel .header-submenu-content:has([data-theme-choice]) { width: 176px; }
.dnx-main-shell #accountPanel [data-theme-choice] { padding-right: 12px; }
.dnx-main-shell #accountPanel .header-account-email { border-bottom: 1px solid var(--account-border); margin-bottom: 4px; }
@media (max-width: 767px) { .dnx-main-shell #accountPanel .header-submenu-content:has([data-theme-choice]) { width: auto; } }
@media (max-width: 480px) { .dnx-main-shell #accountPanel { top: 60px; } }
.dnx-main-shell .header-signout-form { margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; }
.dnx-main-shell .header-signout-form button { width: 100%; text-align: left; }

.dnx-main-shell #offerNotificationList { max-height: 260px; overflow-y: auto; }
.dnx-main-shell .header-offer-update strong { display: block; overflow-wrap: anywhere; }
.dnx-main-shell .header-offer-update > span:first-child { min-width: 0; }

/* market-search-pages.css */
/* Search surfaces use DNX.Main's colours, system type and control shapes.
   Scoped to search pages; the shared header/footer keep their own stylesheet. */
.market-search-page {
    --search-surface: oklch(1 0 0);
    --search-text: oklch(.2 .02 168);
    --search-muted: oklch(.48 .015 168);
    --search-border: oklch(.88 .012 168);
    --search-soft: oklch(.97 .006 168);
    --search-accent: oklch(.45 .08 166.23);
    --search-on-accent: oklch(.99 0 0);
    --brand-secondary: var(--search-accent);
    --section-secondary: var(--search-soft);
    --prosearch-filter-bg: var(--search-surface);
    --prosearch-input-border: var(--search-border);
    --prosearch-text: var(--search-text);
    --prosearch-text-secondary: var(--search-muted);
    --prosearch-row-hover: var(--search-soft);
    color: var(--search-text);
}
[data-theme='dark'] .market-search-page {
    --search-surface: oklch(.2 0 0);
    --search-text: oklch(.99 0 0);
    --search-muted: oklch(.76 .012 168);
    --search-border: oklch(.35 .01 168);
    --search-soft: oklch(.25 .008 168);
    --search-accent: oklch(.72 .08 166.23);
    --search-on-accent: oklch(.18 .025 168);
}
.market-search-page .results-page-container { width: min(100%, 1360px); margin: 0 auto; padding: 32px 16px 48px; }
.market-search-page .market-page-heading { margin-bottom: 24px; }
.market-search-page .market-page-heading h1 { margin: 0; color: var(--search-text); font: 600 30px/1.2 var(--dnx-font); letter-spacing: -.025em; }
.market-search-page .listing-access-link { display: inline-block; margin-left: 8px; color: var(--search-accent); font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: normal; text-decoration: underline; text-underline-offset: 3px; }
.market-search-page :is(input, select, button, textarea) { font-family: var(--dnx-font); }
.market-search-page :is(input:not([type='checkbox']):not([type='radio']):not([type='hidden']), select, textarea) {
    background-color: var(--search-surface); color: var(--search-text); border: 1px solid var(--search-border);
    border-radius: 6px; min-height: 36px; font-size: 14px; box-shadow: none;
}
.market-search-page input::placeholder { color: var(--search-muted); opacity: .85; }
.market-search-page :is(input, select, button, a, textarea):focus-visible { outline: 2px solid var(--search-accent); outline-offset: 2px; }
.market-search-page :is(input[type='checkbox'], input[type='radio']) { accent-color: var(--search-accent); }
.market-search-page :is(.btn-primary, .btn-primary-sm, .btn-primary-full, .btn-full-width, .search-icon) {
    background: var(--search-accent); border: 1px solid var(--search-accent); color: var(--search-on-accent);
    border-radius: 6px; box-shadow: 0 1px 2px rgb(0 0 0 / .06); font-weight: 600;
}
.market-search-page :is(.btn-secondary, .btn-secondary-full, .inventory-btn, .sort-btn, .toolbar-dropdown-btn, .toolbar-reset, .btn2) {
    background: var(--search-surface); border: 1px solid var(--search-border); color: var(--search-text);
    border-radius: 6px; min-height: 36px; box-shadow: none;
}
.market-search-page :is(.accept, .accept2, .sort-btn i, .inventory-btn i) { color: inherit; }
.market-search-page :is(.btn-primary, .btn-primary-sm, .btn-primary-full, .btn-full-width, .btn-secondary, .btn-secondary-full, .inventory-btn, .sort-btn, .toolbar-reset):hover {
    filter: brightness(.96); transform: none;
}
.market-search-page :is(.secondary-color, .fa-icon-secondary, .btn-secondary-full-text) { color: var(--search-accent); }
.market-search-page .btn-secondary-full-text { font-size: 13px; font-weight: 600; text-transform: capitalize; }
.market-search-page .paging { font-size: 13px; color: var(--search-muted); font-weight: 500; }
.market-search-page .dropdown-menu { background: var(--search-surface); border: 1px solid var(--search-border); color: var(--search-text); border-radius: 8px; box-shadow: 0 8px 24px rgb(0 0 0 / .12); }
.market-search-page .dropdown-item { color: var(--search-text); font-size: 14px; }
.market-search-page .dropdown-item:hover { background: var(--search-soft); color: var(--search-text); }
.market-search-page .view-selector { border: 1px solid var(--search-border); background: var(--search-surface); border-radius: 6px; overflow: hidden; }
.market-search-page .view-selector-btn { min-height: 34px; color: var(--search-muted); border: 0; font-size: 13px; }
.market-search-page .view-selector-btn.active { background: var(--search-accent); color: var(--search-on-accent); }
.market-search-page .view-selector-row { margin-bottom: 16px !important; gap: 12px !important; }
/* Pro Search: compact groups on a single filter surface, no decorative side borders. */
.market-pro .prosearch-toolbar { background: var(--search-surface); border: 1px solid var(--search-border); border-radius: 10px; padding: 16px; gap: 20px; margin-bottom: 24px; }
.market-pro .prosearch-toolbar .toolbar-section { border: 0; padding: 0; gap: 10px; }
.market-pro .prosearch-toolbar .toolbar-section-label { color: var(--search-text); font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.market-pro .prosearch-toolbar .toolbar-label { color: var(--search-muted); font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.market-pro .prosearch-toolbar :is(.toolbar-input, .toolbar-select, .toolbar-dropdown-btn) { min-height: 36px; font-size: 13px; border-radius: 6px; }
.market-pro .prosearch-toolbar .toolbar-section-items { gap: 10px; }
.market-pro .prosearch-table-wrapper { background: var(--search-surface); border: 1px solid var(--search-border); border-radius: 10px; box-shadow: none; }
.market-pro .prosearch-table { color: var(--search-text); background: var(--search-surface); }
.market-pro .prosearch-table thead th { background: var(--search-soft); color: var(--search-muted); border-bottom: 1px solid var(--search-border); font-size: 12px; font-weight: 600; height: 44px; }
.market-pro .prosearch-table tbody td { border-color: var(--search-border); height: 48px; font-size: 13px; }
.market-pro .prosearch-table tbody tr:hover { background: var(--search-soft); }
.market-pro .prosearch-table :is(.btn-buy, .btn-offer) { border-radius: 6px; }
/* Explore: quieter filter labels and clear result cards. */
.market-explore .filter-area { background: var(--search-surface); border: 1px solid var(--search-border); border-radius: 10px; padding: 20px; }
.market-explore .concierge-content { padding: 0; gap: 20px; width: 100%; }
.market-explore .form-field-group { gap: 8px; }
.market-explore .filter-area label { color: var(--search-muted); font-size: 13px !important; font-weight: 500 !important; }
.market-explore .domain-list { gap: 12px; }
.market-explore .card-domain { background: var(--search-surface); border: 1px solid var(--search-border); border-radius: 10px; padding: 20px; box-shadow: none; }
.market-explore .domain-name { font-size: 20px; font-weight: 600; letter-spacing: -.02em; color: var(--search-text); }
.market-search-page :is(.chars-14, .words-14, .tl-ds-14, .age, .chars-142, .words-142, .tl-ds-142) { color: var(--search-muted); font-size: 12px; }
.market-search-page .modal-content { background: var(--search-surface); color: var(--search-text); border: 1px solid var(--search-border); border-radius: 10px; }
/* Exact domain lookup. */
.market-domain .domain-search-container { width: min(100%, 880px); margin: 0 auto; padding: 40px 16px 56px; }
.market-domain .frame-1410127759, .market-domain .field, .market-domain .frame-3 { width: 100%; max-width: 100%; }
.market-domain .market-domain-label { color: var(--search-muted); font-size: 14px; margin-bottom: 10px; }
.market-domain .frame-56 { gap: 12px; align-items: center; }
.market-domain .field2 { flex: 1; min-width: 0; }
.market-domain #domainInput { width: 100%; min-height: 48px; padding: 12px 16px; font-size: 17px; }
.market-domain .frame-56 > .btn { padding: 0; }
.market-domain .search-icon { width: 48px; height: 48px; display: grid; place-items: center; }
.market-domain :is(.card-domain, .card-domain2) { background: var(--search-surface); border: 1px solid var(--search-border); border-radius: 10px; padding: 24px; box-shadow: none; }
.market-domain .list-cards { margin-top: 24px; }
.market-domain .domain-name2 { color: var(--search-text); font-size: 22px; font-weight: 600; letter-spacing: -.02em; overflow-wrap: anywhere; }
.market-domain .which-domain-would-you-like { color: var(--search-text); font-size: 20px; font-weight: 600; }
@media (max-width: 767px) {
    .market-search-page .results-page-container { padding: 24px 4px 32px; }
    .market-search-page .market-page-heading h1 { font-size: 26px; }
    .market-search-page .market-page-heading { margin-bottom: 20px; }
    .market-pro .prosearch-toolbar { padding: 16px; gap: 16px; }
    .market-pro .prosearch-toolbar .toolbar-section { width: 100%; }
    .market-pro .prosearch-toolbar .toolbar-section-items { flex-wrap: wrap; }
    .market-explore .card-domain { padding: 16px; }
    .market-domain .domain-search-container { padding: 24px 4px 32px; }
    .market-domain :is(.card-domain, .card-domain2) { padding: 16px; }
    .market-domain .domain-name2 { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) { .market-search-page :is(button, a) { transition: none !important; transform: none !important; } }
/* Override legacy child colours so actions retain contrast in both themes. */
.market-search-page :is(.btn-primary, .btn-primary-sm, .btn-primary-full, .btn-full-width, .search-icon, .btn-buy) :is(.accept, i) { color: var(--search-on-accent) !important; }
.market-search-page :is(.make-offer-button, .btn2, .btn-offer) { background: var(--search-surface); color: var(--search-accent); border-color: var(--search-border); }
.market-search-page :is(.make-offer-button, .btn2, .btn-offer) :is(.accept, .accept2, i) { color: var(--search-accent) !important; }
.market-pro .prosearch-table .action-btn.btn-buy { background: var(--search-accent); color: var(--search-on-accent); }
.market-pro .prosearch-table .action-btn.btn-offer { color: var(--search-accent); background: var(--search-surface); border-color: var(--search-border); }
.market-explore .domain-name .form-check-label { color: var(--search-muted); font-size: 12px; font-weight: 500; }
.market-explore .domain-name p { margin: 0; }
.market-explore .hot-deal-checkbox { width: 16px; height: 16px; }
.market-domain .field { background: transparent; padding: 0; gap: 0; }
.market-domain .field2 { border: 0; background: transparent; padding: 0; }
.market-domain .label-and-instruction { align-items: flex-start; margin-top: 0 !important; }
.market-domain .frame-1410127763 { margin-top: 24px; }
.market-domain .card-successes { background: var(--search-soft); border-top: 1px solid var(--search-border); color: var(--search-muted); padding: 32px 0; }
.market-domain :is(.successes-title, .world-class-text) { color: var(--search-muted); }
.market-domain .successes-title { font-size: 18px; font-weight: 600; }
.market-domain .world-class-text { font-size: 14px; }
.market-domain .example-domain { color: var(--search-muted); border-color: var(--search-border); border-radius: 6px; background: var(--search-surface); font-size: 14px; }
.market-explore .results-page-container .results-filter-container { background: transparent; }
.market-explore .results-filter-container .filter-area { background: var(--search-surface); border-radius: 10px; }
.market-explore .filter-area :is(.exclude-btn, .categories-btn, .tld-btn, .inventory-btn) { width: 100%; min-height: 40px; padding: 8px 12px; background: var(--search-surface); color: var(--search-text); border: 1px solid var(--search-border); border-radius: 6px; font-size: 14px; }
.market-explore .filter-area :is(.search, .character-pattern-container .field) { background: transparent; border: 0; padding: 0; gap: 8px; }
.market-explore .filter-area .search { flex-wrap: wrap; }
.market-explore .filter-area .enter-word-s { min-width: 100px; flex: 1; }
.market-explore .filter-area .enter-word-s input { border: 1px solid var(--search-border) !important; padding: 8px; }
.market-explore #matchTypeDropdown { background: var(--search-soft); color: var(--search-text); border: 1px solid var(--search-border); border-radius: 6px; min-height: 36px; font-size: 13px; }
.market-explore .filter-area .form-field-group { width: 100%; }
.market-explore .filter-area .char-pattern-input { width: 100%; padding: 8px; }
.market-search-page .badge { background: var(--search-accent); color: var(--search-on-accent); border-radius: 4px; font-weight: 500; }
@media (max-width: 991px) {
    .market-explore .results-page-container #filterSection { position: fixed; top: 64px; bottom: 0; max-height: calc(100dvh - 64px); overflow-y: auto; overscroll-behavior: contain; background: var(--search-surface); padding: 16px; }
    .market-explore .results-filter-container .filter-area { border: 0; padding: 0; }
}
.market-explore .filter-area :is(.frame-1, .frame-2, .min-tld-count-field, .minimum-age-field) { background: transparent; border: 0; padding: 0; min-width: 0; }
.market-explore .filter-area input[type='number'] { width: 100%; padding: 8px; }
.market-explore .filter-area :is(.number-of-characters, .number-of-words, .minimum-tlds-registered, .minimum-age) { color: var(--search-muted); font: 500 13px/1.5 var(--dnx-font); }
.market-explore .filter-row .btn-secondary { background: var(--search-surface); color: var(--search-text); border: 1px solid var(--search-border); }

/* Keep the exclusion field and its help readable within the wrapping Pro toolbar. */
.market-pro .market-excluded-words { width: 260px; max-width: 100%; min-width: 0; }
.market-pro .market-excluded-words input { width: 100%; }
.market-pro .market-excluded-words small { white-space: normal; color: var(--search-text-muted, inherit); }

/* The results column uses the space left by filters, including with the site sidebar open. */
#main-content.market-explore #filterSection + .col-md-9 {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    container: explore-results / inline-size;
}
@media (min-width: 992px) {
    #main-content.market-explore #filterSection {
        flex: 0 0 284px;
        width: 284px;
        min-width: 0;
        max-width: 284px;
    }
    #main-content.market-explore #filterSection + .col-md-9 {
        flex: 1 1 0;
        width: 0;
        max-width: none;
    }
}
#main-content.market-explore .market-result-card .domain-name { min-width: 0; overflow-wrap: anywhere; }
@container explore-results (max-width: 580px) {
    #main-content.market-explore .market-result-card { grid-template-columns: minmax(0, 1fr); }
    #main-content.market-explore .market-result-card .btn-grp { flex-direction: row; flex-wrap: wrap; width: 100%; }
    #main-content.market-explore .market-result-card .btn-wrapper { flex: 1; min-width: 0; }
}
#main-content.market-explore #filterSection .search {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    height: auto;
    min-height: 0;
    width: 100%;
}
#main-content.market-explore #filterSection .search > * { min-width: 0; width: 100%; }
#main-content.market-explore #matchTypeDropdown { width: 100%; justify-content: space-between; }

/* Domain lookup follows the same control-panel/results layout as Explore and SEO. */
#main-content.market-domain .domain-search-container { width: 100%; max-width: none; padding: 32px 24px 48px; }
#main-content.market-domain .domain-search-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); align-items: start; gap: 24px; }
#main-content.market-domain .domain-search-controls { padding: 20px; min-width: 0; }
#main-content.market-domain .market-filter-heading { margin: 0 0 20px; color: var(--search-text); font: 600 17px/24px var(--dnx-font); }
#main-content.market-domain #domainSearchForm { display: flex; flex-direction: column; gap: 8px; width: 100%; }
#main-content.market-domain .market-domain-label { margin: 0; font: 500 13px/20px var(--dnx-font); color: var(--search-muted); }
#main-content.market-domain #domainInput { height: 36px; min-height: 36px; padding: 7px 10px; font: 400 14px/20px var(--dnx-font); }
#main-content.market-domain #domainSearchHelp { margin: 0 0 12px; color: var(--search-muted); font: 400 12px/18px var(--dnx-font); }
#main-content.market-domain .domain-search-results { min-width: 0; container: domain-results / inline-size; }
#main-content.market-domain .market-results-heading { margin: 4px 0 24px; font: 600 20px/28px var(--dnx-font); letter-spacing: -.025em; color: var(--search-text); }
#main-content.market-domain :is(.list-cards, .not-listed, .listed, .matched) { display: flex; flex-direction: column; width: 100%; min-width: 0; gap: 12px; margin: 0; padding: 0; }
#main-content.market-domain .domain-search-subheading { margin: 8px 0 0; font: 600 14px/20px var(--dnx-font); color: var(--search-muted); }
#main-content.market-domain .domain-search-empty { width: 100%; padding: 24px; border: 1px solid var(--search-border); border-radius: 14px; background: var(--search-surface); }
#main-content.market-domain .domain-search-empty h2 { margin: 0 0 8px; font: 600 16px/24px var(--dnx-font); color: var(--search-text); overflow-wrap: anywhere; }
#main-content.market-domain .domain-search-empty p { margin: 0; max-width: 65ch; font: 400 14px/22px var(--dnx-font); color: var(--search-muted); }
#main-content.market-domain .domain-search-empty a { color: var(--search-accent); text-decoration: underline; }
#main-content.market-domain .card-domain2 { padding: 20px; gap: 16px; }
#main-content.market-domain .card-domain2 .btn-grp2 { display: flex; flex-direction: column; gap: 8px; width: 140px; margin: 0; }
#main-content.market-domain .card-domain2 .btn-grp2 > button { width: 100%; min-height: 36px; }
@container domain-results (max-width: 540px) {
    #main-content.market-domain .card-domain2 { grid-template-columns: minmax(0, 1fr); }
    #main-content.market-domain .card-domain2 .btn-grp2 { width: 100%; flex-direction: row; flex-wrap: wrap; }
    #main-content.market-domain .card-domain2 .btn-grp2 > button { flex: 1; width: auto; }
}
@media (max-width: 991px) {
    #main-content.market-domain .domain-search-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 767px) {
    #main-content.market-domain .domain-search-container { padding: 24px 8px 32px; }
    #main-content.market-domain .domain-search-controls { padding: 16px; }
    #main-content.market-domain .card-domain2 { padding: 16px; }
    #main-content.market-domain #domainInput { height: 40px; min-height: 40px; }
}

/* A persistent instant-filter panel alongside Pro results. */
#main-content.market-pro .prosearch-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }
#main-content.market-pro :is(.prosearch-controls, #results-container) { min-width: 0; }
#main-content.market-pro #toolbarFilters { display: flex; flex-direction: column; align-items: stretch; gap: 20px; padding: 20px; margin: 0; }
#main-content.market-pro .prosearch-filter-heading { margin: 0; font: 600 17px/24px var(--dnx-font); color: var(--search-text); }
#main-content.market-pro #toolbarFilters .toolbar-section { flex: none; width: 100%; padding: 0; margin: 0; border: 0; }
#main-content.market-pro #toolbarFilters .toolbar-section-label { display: block; margin-bottom: 10px; font: 600 13px/20px var(--dnx-font); color: var(--search-text); }
#main-content.market-pro #toolbarFilters .toolbar-section-items { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
#main-content.market-pro #toolbarFilters .toolbar-item { display: flex; flex-direction: column; align-items: stretch; gap: 5px; width: 100%; min-width: 0; }
#main-content.market-pro #toolbarFilters :is(input:not([type=checkbox]):not([type=hidden]), select, .toolbar-dropdown-btn) { width: 100%; max-width: none !important; min-width: 0; }
#main-content.market-pro #toolbarFilters .toolbar-item > .d-flex > * { flex: 1; min-width: 0; }
#main-content.market-pro #toolbarFilters .toolbar-item-reset .toolbar-label { display: none; }
#main-content.market-pro #toolbarFilters .toolbar-dropdown-menu { max-width: min(320px, calc(100vw - 32px)); }
@media (max-width: 991px) {
    #main-content.market-pro .prosearch-layout { grid-template-columns: minmax(0, 1fr); }
    #main-content.market-pro .prosearch-filter-toggle-wrap { display: flex !important; align-items: center; gap: 12px; padding: 0; }
    #main-content.market-pro #toolbarFilters { display: none; margin-top: 12px; }
    #main-content.market-pro #toolbarFilters.is-open { display: flex; }
}
/* Legacy full-width button styles must not stretch the favourite icon. */
#main-content.market-domain .card-domain2 .frame-513 > .btn-icon { width: 32px; min-width: 32px; flex: 0 0 32px; }
#main-content.market-domain .card-domain2 > .btn-grp2 { width: 140px; }
#main-content.market-domain .domain-search-subheading { text-align: left; align-self: stretch; }
#main-content.market-pro #toolbarFilters .prosearch-filter-heading { width: 100%; text-align: left; }
#main-content.market-pro #results-container .table-responsive { width: 100%; overflow-x: auto; }

#main-content.market-domain .card-domain2.market-result-card > .btn-grp2 { width: 140px; }
@container domain-results (max-width: 540px) {
    #main-content.market-domain .card-domain2.market-result-card > .btn-grp2 { width: 100%; }
}
#main-content.market-pro #results-container .prosearch-table-wrapper { width: 100%; max-width: 100%; overflow-x: auto; }


/* Scrollable Pro table sizing is defined in market-results.css. */
#main-content.market-pro #results-container .prosearch-table .btn-buy { background: var(--search-accent); color: var(--search-on-accent); border-color: var(--search-accent); }

/* Full-width compact instant filters above Pro results. */
#main-content.market-pro .prosearch-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
#main-content.market-pro #toolbarFilters { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 16px; }
#main-content.market-pro #toolbarFilters .prosearch-filter-heading { flex: 0 0 100%; font-size: 14px; line-height: 20px; }
#main-content.market-pro #toolbarFilters :is(.toolbar-section,.toolbar-section-items) { display: contents; }
#main-content.market-pro #toolbarFilters .toolbar-section-label { display: none; }
#main-content.market-pro #toolbarFilters .toolbar-item { width: 120px; flex: 1 1 120px; max-width: 180px; gap: 4px; }
#main-content.market-pro #toolbarFilters .toolbar-item:has(#toolbarSearchText) { flex-basis: 240px; max-width: 300px; }
#main-content.market-pro #toolbarFilters .toolbar-item:has(#toolbarMinPrice) { flex-basis: 170px; max-width: 220px; }
#main-content.market-pro #toolbarFilters .toolbar-label { font-size: 12px; line-height: 16px; margin: 0; }
#main-content.market-pro #toolbarFilters .toolbar-item-reset { flex: 0 0 auto; width: auto; padding: 0; background: transparent; }
@media (min-width: 992px) {
    #main-content.market-pro .prosearch-filter-toggle-wrap { display: none !important; }
}
@media (max-width: 991px) {
    #main-content.market-pro #toolbarFilters { display: none; }
    #main-content.market-pro #toolbarFilters.is-open { display: flex; }
}
@media (max-width: 575px) {
    #main-content.market-pro #toolbarFilters .toolbar-item { max-width: none; flex-basis: calc(50% - 12px); }
    #main-content.market-pro #toolbarFilters .toolbar-item:has(#toolbarSearchText) { flex-basis: 100%; max-width: none; }
}
#main-content.market-pro #toolbarFilters { gap: 8px 12px; padding: 12px 16px; }
#main-content.market-pro #toolbarFilters :is(input:not([type=checkbox]):not([type=hidden]), select, .toolbar-dropdown-btn) { height: 32px; min-height: 32px; padding-block: 4px; }
#main-content.market-pro #toolbarFilters .toolbar-item:has(#toolbarMinLength, #toolbarMinWordCount) { flex-basis: 144px; }
#main-content.market-pro #toolbarFilters .toolbar-item:has(#toolbarMinTLDCount, #toolbarMinAge) { flex: 0 1 84px; }
#main-content.market-pro #toolbarFilters .toolbar-item:has(#toolbarRecentlyListed) { flex-basis: 160px; }
#main-content.market-pro #toolbarFilters .listing-access-link { white-space: nowrap; }

#main-content.market-pro .prosearch-page-heading { margin-bottom: 20px; }

.market-explore #filterForm .form-check-input:disabled + .form-check-label { opacity: .6; cursor: not-allowed; }

/* market-controls.css */
/* Reusable search controls, adapted from DNX.Main's Button variants.
   Explicit component classes keep legacy Bootstrap aliases from defining their size. */
.market-search-page {
    --market-control-height: 36px;
    --market-control-radius: 6px;
    --market-control-font: 500 14px/20px var(--dnx-font);
    --market-label-font: 500 12px/18px var(--dnx-font);
    --market-hover: color-mix(in oklch, var(--search-accent) 8%, var(--search-surface));
    --market-focus: 0 0 0 3px color-mix(in oklch, var(--search-accent) 22%, transparent);
    font: 400 14px/1.5 var(--dnx-font);
}
#main-content.market-search-page .market-button {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: var(--market-control-height); min-height: var(--market-control-height);
    padding: 7px 12px; margin: 0; border: 1px solid var(--search-border);
    border-radius: var(--market-control-radius); background: var(--search-surface);
    color: var(--search-text); font: var(--market-control-font); letter-spacing: normal;
    text-transform: none; text-decoration: none; white-space: nowrap; cursor: pointer;
    box-shadow: 0 1px 2px rgb(0 0 0 / .04); transform: none !important;
    transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
#main-content.market-search-page .market-button--primary { background: var(--search-accent); color: var(--search-on-accent); border-color: var(--search-accent); }
#main-content.market-search-page .market-button--secondary { color: var(--search-accent); }
#main-content.market-search-page .market-button--quiet { background: transparent; color: var(--search-muted); border-color: transparent; box-shadow: none; }
#main-content.market-search-page .market-button--icon { width: var(--market-control-height); padding: 0; flex-shrink: 0; }
#main-content.market-search-page .market-button:hover { background: var(--market-hover); color: var(--search-accent); border-color: var(--search-accent); filter: none; }
#main-content.market-search-page .market-button--primary:hover { background: color-mix(in oklch, var(--search-accent) 90%, var(--search-text)); color: var(--search-on-accent); }
#main-content.market-search-page .market-button:active { box-shadow: none; }
#main-content.market-search-page .market-button:focus-visible { outline: 2px solid var(--search-accent); outline-offset: 2px; box-shadow: var(--market-focus); }
#main-content.market-search-page .market-button:is(:disabled, [aria-disabled='true']) { opacity: .45; pointer-events: none; box-shadow: none; }
#main-content.market-search-page .market-button :is(.accept, .accept2, span) { font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit !important; }
#main-content.market-search-page .market-button i { font-size: 14px; color: inherit !important; }
#main-content.market-search-page .market-button .fa-chevron-right { font-size: 11px; }
#main-content.market-search-page .market-control {
    height: var(--market-control-height); min-height: var(--market-control-height);
    padding: 7px 10px; border: 1px solid var(--search-border); border-radius: var(--market-control-radius);
    background-color: var(--search-surface); color: var(--search-text); font: var(--market-control-font);
    box-shadow: none; max-width: 100%;
}
#main-content.market-search-page select.market-control { padding-right: 28px; }
#main-content.market-search-page textarea.market-control { height: auto; min-height: 100px; }
#main-content.market-search-page .market-control:focus { outline: 2px solid var(--search-accent); outline-offset: 1px; border-color: var(--search-accent); box-shadow: var(--market-focus); }
#main-content.market-search-page :is(.toolbar-label, .filter-area label, .market-domain-label) { font: var(--market-label-font) !important; color: var(--search-muted); }
#main-content.market-search-page .toolbar-section-label { font: 600 13px/20px var(--dnx-font); color: var(--search-text); }
#main-content.market-search-page .view-selector { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--search-border); background: var(--search-soft); border-radius: 8px; }
#main-content.market-search-page .view-selector .market-button { height: 28px; min-height: 28px; padding: 3px 10px; font-size: 13px; }
#main-content.market-search-page .view-selector .active { color: var(--search-text); border-color: var(--search-border); background: var(--search-surface); box-shadow: 0 1px 2px rgb(0 0 0 / .05); }
#main-content.market-search-page .view-selector-row { gap: 12px !important; margin-bottom: 16px !important; }
#main-content.market-search-page :is(.filter-tag, .badge) { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--search-border); border-radius: 5px; background: var(--search-soft); color: var(--search-muted); font: 400 12px/18px var(--dnx-font); }
#main-content.market-search-page :is(.filter-tag-remove, .badge a) { color: var(--search-muted); }
#main-content.market-search-page .paging { font: 400 13px/20px var(--dnx-font); font-variant-numeric: tabular-nums; }
#main-content.market-search-page span.btn-secondary-full-text { font: var(--market-control-font); padding: 7px 12px; color: var(--search-muted); text-transform: none; }
#main-content.market-search-page .prosearch-toolbar { gap: 20px 24px; padding: 20px; }
#main-content.market-search-page .toolbar-section-items { gap: 12px; }
#main-content.market-search-page .toolbar-item { gap: 6px; }
#main-content.market-search-page .dropdown-menu { padding: 6px; border-radius: 8px; }
#main-content.market-search-page .dropdown-item { min-height: 32px; padding: 6px 10px; border-radius: 4px; font: 400 13px/20px var(--dnx-font); }
@media (max-width: 767px) {
    .market-search-page { --market-control-height: 40px; }
    #main-content.market-search-page .view-selector .market-button { height: 32px; min-height: 32px; }
    #main-content.market-search-page .prosearch-toolbar { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { #main-content.market-search-page .market-button { transition: none; } }

#main-content.market-search-page .market-button--compact { height: 32px; min-height: 32px; padding: 5px 10px; font-size: 13px; }
@media (max-width: 767px) { #main-content.market-search-page .market-button--compact { height: 36px; min-height: 36px; } }

#main-content.market-search-page #toolbarMatchType { min-width: 112px; max-width: none !important; }
#main-content.market-search-page .filter-tag-remove, #main-content.market-search-page .filter-tag-remove i { color: var(--search-muted) !important; }
/* Empty responsive rows must not contribute extra flex gaps around the page heading. */
#main-content.market-search-page .results-page-container { display: block; background: transparent; }

#main-content.market-search-page .filter-tag a, #main-content.market-search-page .filter-tag a i { color: var(--search-muted) !important; }

/* The main domain lookup is larger than the compact search filters. */
#main-content.market-domain .frame-56 { --market-control-height: 56px; }
#main-content.market-domain #domainInput { padding: 12px 16px; font-size: 18px; line-height: 26px; }
#main-content.market-domain .market-domain-label { font: 500 14px/20px var(--dnx-font) !important; }
#main-content.market-domain .search-icon i { font-size: 20px; }
@media (max-width: 767px) {
    #main-content.market-domain .frame-56 { --market-control-height: 52px; }
    #main-content.market-domain #domainInput { font-size: 17px; }
}

/* Shared typography for Advanced and Pro Search filters, including dropdown contents. */
#main-content:is(.market-explore, .market-pro) :is(#filterForm, #toolbarFilters) {
    font: 400 14px/20px var(--dnx-font);
    color: var(--search-text);
}
#main-content:is(.market-explore, .market-pro) :is(#filterForm, #toolbarFilters) .market-filter-label {
    display: block;
    height: auto;
    min-height: 0;
    margin: 0 0 8px;
    padding: 0;
    font: 600 12px/18px var(--dnx-font) !important;
    color: var(--search-muted) !important;
    letter-spacing: normal;
    text-transform: none;
}
#main-content:is(.market-explore, .market-pro) :is(#filterForm, #toolbarFilters) :is(.market-control, .market-button, .form-check-label, .dropdown-item, .saved-search-link, .saved-search-name) {
    font: 400 14px/20px var(--dnx-font) !important;
    letter-spacing: normal;
    text-transform: none;
}
#main-content:is(.market-explore, .market-pro) :is(#filterForm, #toolbarFilters) :is(.form-check-label, .dropdown-item, .saved-search-link, .saved-search-name, .market-button--secondary) {
    color: var(--search-text) !important;
}
#main-content:is(.market-explore, .market-pro) :is(#filterForm, #toolbarFilters) .form-check-label {
    display: inline-block;
    height: auto;
    margin-bottom: 0;
}
#main-content:is(.market-explore, .market-pro) :is(#filterForm, #toolbarFilters) .form-check {
    min-height: 28px;
    margin-bottom: 0;
}
#main-content:is(.market-explore, .market-pro) :is(#filterForm, #toolbarFilters) :is(.accept, .exclude-accept, .categories-accept, .tld-accept, .btn-secondary-full-text, .btn-primary-full-text) {
    font: inherit !important;
    color: inherit !important;
    letter-spacing: normal;
}
#main-content:is(.market-explore, .market-pro) :is(#filterForm, #toolbarFilters) .dropdown-header {
    font: 600 12px/18px var(--dnx-font) !important;
    color: var(--search-muted) !important;
    letter-spacing: normal;
    text-transform: none;
}
#main-content:is(.market-explore, .market-pro) :is(#filterForm, #toolbarFilters) .fa-icon-secondary {
    color: var(--search-muted) !important;
}
#main-content:is(.market-explore, .market-pro) :is(#filterForm, #toolbarFilters) small {
    display: block;
    font: 400 12px/18px var(--dnx-font);
    color: var(--search-muted);
}
#main-content:is(.market-explore, .market-pro) :is(#filterForm, #toolbarFilters) .market-control::placeholder {
    color: var(--search-muted);
    font: inherit;
    opacity: 1;
}
#main-content:is(.market-explore, .market-pro) :is(#filterForm, #toolbarFilters) .market-filter-keywords { width: 100%; }

#main-content.market-pro #toolbarFilters .toolbar-label {
    font: 600 12px/18px var(--dnx-font) !important;
    color: var(--search-muted) !important;
    letter-spacing: normal;
    text-transform: none;
}
#main-content.market-pro #toolbarFilters .toolbar-section-label {
    font: 600 13px/20px var(--dnx-font);
    color: var(--search-text);
    letter-spacing: normal;
    text-transform: none;
}
#main-content.market-pro #toolbarFilters .market-button :is(span, .selected-text) {
    font: inherit !important;
    color: inherit !important;
}
/* Table column filters are part of the same Pro Search filter interface. */
#main-content.market-pro .col-header-menu :is(.col-filter-input, .col-filter-select, .col-sort-option, label) {
    font: 400 14px/20px var(--dnx-font);
    color: var(--search-text);
    letter-spacing: normal;
    text-transform: none;
}
#main-content.market-pro .col-header-menu :is(.col-filter-input, .col-filter-select)::placeholder {
    font: inherit;
    color: var(--search-muted);
    opacity: 1;
}

#main-content .market-control-label { display: flex; align-items: center; gap: 6px; min-height: 20px; }
#main-content .market-control-label label { margin: 0; }
#main-content button.market-control-help {
    display: inline-grid; place-items: center; flex: 0 0 20px;
    width: 20px; height: 20px; min-height: 20px; padding: 0;
    border: 1px solid var(--search-border); border-radius: 50%;
    background: var(--search-soft); color: var(--search-muted);
    font: 600 12px/1 var(--dnx-font); cursor: help;
}
#main-content button.market-control-help:focus-visible { outline: 2px solid var(--search-accent); outline-offset: 2px; }
#main-content .market-control-tooltip {
    position: fixed; z-index: 1100; display: block; width: 280px; max-width: calc(100vw - 16px);
    padding: 12px 14px; border: 1px solid var(--search-border); border-radius: 10px;
    background: var(--search-surface); color: var(--search-text);
    box-shadow: 0 6px 24px rgb(0 0 0 / .15);
    white-space: normal; text-align: left; font: 400 13px/1.5 var(--dnx-font);
}
#main-content .market-control-tooltip[hidden] { display: none; }

/* market-results.css */
/* Result surfaces: one type scale and quiet row dividers, without spreadsheet cell boxes. */
#main-content .market-results-table { border-collapse: separate; border-spacing: 0; width: 100%; font: 400 14px/20px var(--dnx-font); }
#main-content .prosearch-table-wrapper { border: 1px solid var(--search-border); border-radius: 10px; background: var(--search-surface); box-shadow: 0 1px 3px rgb(0 0 0 / .03); }
#main-content .market-results-table thead th { height: 44px; padding: 10px 12px; background: var(--search-soft); border: 0; border-bottom: 1px solid var(--search-border); font: 500 12px/18px var(--dnx-font); color: var(--search-muted); }
#main-content .market-results-table .col-header-btn { font: inherit; color: inherit; gap: 6px; }
#main-content .market-results-table th.sorted { color: var(--search-accent); }
#main-content .market-results-table tbody td { height: 60px; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--search-border); background: transparent; vertical-align: middle; font: 400 14px/20px var(--dnx-font); color: var(--search-muted); }
#main-content .market-results-table tbody tr:last-child td { border-bottom: 0; }
#main-content .market-results-table tbody tr { background: var(--search-surface); transition: background-color 120ms ease; }
#main-content .market-results-table tbody tr:hover, #main-content .market-results-table tbody tr:focus-within { background: var(--search-soft); }
#main-content .market-results-table tr.is-hot-deal { background: color-mix(in oklch, var(--search-accent) 4%, var(--search-surface)); }
#main-content .market-results-table .col-domain { color: var(--search-text); font-weight: 500; }
#main-content .market-domain-name { overflow-wrap: anywhere; }
#main-content .market-results-table :is(.col-price, .col-prev-price, .col-change, .num-value) { font-variant-numeric: tabular-nums; }
#main-content .market-results-table .price-value { font: 600 14px/20px var(--dnx-font); color: var(--search-text); }
#main-content .market-results-table .col-actions { width: 152px; white-space: nowrap; }
#main-content .market-results-table .col-actions .market-button + .market-button { margin-left: 6px; }
#main-content .market-results-table .col-fav { width: 48px; padding: 6px; }
#main-content .market-results-table .col-prev-price, #main-content .market-results-table .col-change { width: 96px; }
#main-content .market-results-table .col-price { width: 108px; }
#main-content .market-results-table .fav-btn { box-shadow: none; color: var(--search-muted); }
#main-content .market-results-table .fav-btn:has(.fa-star.fa) { color: var(--search-accent); }
#main-content .market-results-table .col-domain .fa-clipboard { opacity: .4; font-size: 11px; }
#main-content .market-results-table .hot-deal-icon { margin-left: 6px; font-size: 12px; }
#main-content .market-results-table .prosearch-empty-row { height: 180px; text-align: center; color: var(--search-muted); }
/* Card view shares the same hierarchy: domain, metadata, then actions. */
#main-content .market-result-list { display: flex; flex-direction: column; gap: 12px; }
#main-content .market-result-card {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px;
    align-items: center; padding: 20px; border: 1px solid var(--search-border);
    border-radius: 10px; background: var(--search-surface); box-shadow: 0 1px 2px rgb(0 0 0 / .03);
}
#main-content .market-result-card:hover { border-color: color-mix(in oklch, var(--search-accent) 40%, var(--search-border)); }
#main-content .market-result-card > .frame-1410127795 { width: auto; min-width: 0; gap: 10px; }
#main-content .market-result-card .frame-51 { gap: 8px; align-items: center; }
#main-content .market-result-card .domain-name { color: var(--search-text); font: 600 18px/26px var(--dnx-font); letter-spacing: -.01em; }
#main-content .market-result-card .domain-name p { font: inherit; margin: 0; }
#main-content .market-result-card .frame-512 { display: flex; flex-wrap: wrap; gap: 12px; }
#main-content .market-result-card :is(.chars-14, .words-14, .tl-ds-14, .age) { font: 400 12px/18px var(--dnx-font); color: var(--search-muted); }
#main-content .market-result-card .domain-name .form-check-label { font: 400 11px/18px var(--dnx-font); color: var(--search-muted); }
#main-content .market-result-card .btn-grp { display: flex; flex-direction: column; gap: 8px; width: 140px; margin: 0; }
#main-content .market-result-card .btn-wrapper { width: 100%; }
#main-content .market-result-card .market-button { width: 100%; }
/* Sedo's marketplace label needs more room than the fixed price-button widths. */
#main-content.market-search-page .market-button.sedo-marketplace-action { min-width: max-content; flex-shrink: 0; }
#main-content.market-search-page .market-button.sedo-marketplace-action > i { flex-shrink: 0; }
#main-content.market-search-page :is(.market-result-card, .card-domain) .btn-grp:has(> .sedo-marketplace-action),
#main-content.market-domain .card-domain2.market-result-card > .btn-grp2:has(> .sedo-marketplace-action) { width: auto; }
/* Override legacy card nowrap when several marketplace actions share a narrow row. */
#main-content.market-search-page :is(.market-result-card, .card-domain) .btn-grp:has(> .sedo-marketplace-action) { flex-wrap: wrap !important; }
#main-content.market-search-page :is(.market-result-card, .card-domain) .btn-grp:has(> .sedo-marketplace-action) .btn-wrapper { min-width: min-content; }
#main-content .market-result-card .btn-grp .market-button--primary { font-variant-numeric: tabular-nums; }
#main-content .market-result-card .generate-ai-report-btn { font: 400 12px/18px var(--dnx-font); }
#main-content.market-domain .card-domain2 { border-radius: 10px; padding: 20px; }
#main-content.market-domain .domain-name2 { font: 600 18px/26px var(--dnx-font); letter-spacing: -.01em; }
#main-content.market-domain .frame-514 { gap: 12px; font: 400 12px/18px var(--dnx-font); color: var(--search-muted); }
@media (max-width: 767px) {
    #main-content .market-results-table tbody td { height: 64px; padding: 10px 8px; font-size: 13px; }
    #main-content .market-results-table thead th { padding: 10px 8px; }
    #main-content .market-results-table .col-fav { width: 36px; padding: 2px; }
    #main-content .market-results-table .col-price { width: 72px; }
    #main-content .market-results-table .col-actions { width: 82px; }
    #main-content .market-results-table .col-actions .market-button { display: flex; width: 64px; margin: 4px 0; }
    #main-content .market-results-table .price-value { font-size: 13px; }
    #main-content .market-results-table .col-domain .fa-clipboard { display: none; }
    #main-content .market-result-card { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 16px; }
    #main-content .market-result-card .domain-name { font-size: 17px; line-height: 24px; }
    #main-content .market-result-card .btn-grp { flex-direction: row; width: 100%; }
    #main-content .market-result-card .btn-wrapper { flex: 1; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { #main-content .market-results-table tbody tr { transition: none; } }
#main-content.market-domain :is(.listed, .matched) { width: 100%; }
#main-content.market-domain .card-domain2 { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; width: 100%; }
#main-content.market-domain .card-domain2 .frame-1410127795 { width: auto; min-width: 0; }
#main-content.market-domain .card-domain2 .frame-513 { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; }
#main-content.market-domain .card-domain2 .domain-name2 { min-width: 0; flex: 1; }
#main-content.market-domain .card-domain2 .frame-514 { display: flex; flex-wrap: wrap; gap: 12px; width: 100%; }
#main-content.market-domain .card-domain2 .btn-grp2 { width: auto; }
#main-content.market-domain .frame-56 > .btn { border: 0; background: transparent; padding: 0; height: auto; }
@media (max-width: 767px) {
    #main-content.market-domain .card-domain2 { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 16px; }
    #main-content.market-domain .card-domain2 .btn-grp2 { width: 100%; }
    #main-content.market-domain .card-domain2 .btn-grp2 .market-button { width: 100%; }
}
#main-content #results-container > .row.align-items-center { margin-left: 0; margin-right: 0; gap: 8px; flex-wrap: wrap; }
#main-content #results-container > .row.align-items-center > .col-auto { padding-left: 0; padding-right: 0; }

/* Pro Search: preserve readable data columns and scroll instead of squeezing. */
#main-content.market-pro .prosearch-table-wrapper {
    width: 100%; max-width: 100%; min-width: 0; overflow-x: auto;
    overscroll-behavior-x: contain;
}
#main-content.market-pro .prosearch-table-wrapper:focus-visible { outline: 2px solid var(--search-accent); outline-offset: 3px; }
#main-content.market-pro .market-results-table { table-layout: auto; min-width: 1200px; }
#main-content.market-pro .market-results-table :is(th,td) { white-space: nowrap; }
#main-content.market-pro .market-results-table :is(.col-length,.col-words,.col-tlds,.col-age,.col-prev-price,.col-change) { display: table-cell; }
#main-content.market-pro .market-results-table .col-domain { min-width: 220px; width: auto; white-space: normal; overflow-wrap: anywhere; }
#main-content.market-pro .market-results-table .market-domain-name { display: inline-block; max-width: 280px; vertical-align: middle; }
#main-content.market-pro .market-results-table :is(.col-prev-price,.col-change) { min-width: 110px; }
#main-content.market-pro .market-results-table .col-actions { min-width: 280px; width: 280px; }
#main-content.market-pro .market-results-table .col-actions .market-button {
    display: inline-flex; justify-content: center; width: 122px; max-width: none;
    min-height: 36px; margin: 0; white-space: nowrap;
}
@media (max-width:767px) {
    #main-content.market-pro .market-results-table .col-actions .market-button { min-height: 44px; }
}

#main-content.market-pro .market-results-table .col-actions .market-button + .market-button { margin-left: 6px; }
#main-content.market-pro .market-results-table tbody td { height: 64px; padding-block: 10px; }
#main-content.market-pro .market-results-table .col-domain { white-space: nowrap; }
#main-content.market-pro .market-results-table .market-domain-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }