/* Styling for the popup */
        .popup {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            border: 1px solid #ccc;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            z-index: 1000;
        }
        .overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 999;
        }
        a {
            color: #808080;
            text-decoration: none;
            cursor: pointer;
        }
        
    .tied_to_auction {
    width: 100%;
    min-width: 150px;
    max-width: 300px;
    height: 36px;
    padding: 8px;
    font-size: 12px;
    border: 1px solid #ccc; /* Light grey border */
    border-radius: 5px; /* Rounded corners */
    outline: none; /* No black outline */
}

/* Apply same styles to text inputs for uniformity */
/* Apply styles only to text-based inputs */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"] {
    height: 38px;
    padding: 8px;
    font-size: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* Ensure checkboxes and radio buttons maintain default appearance */
input[type="checkbox"],
input[type="radio"] {
    height: auto;
    width: auto;
}
/* -------------------------------------------------
   TABLE CELL MUST NOT CLIP
------------------------------------------------- */
td {
  overflow: visible !important;
}

/* -------------------------------------------------
   DROPDOWN ANCHOR
------------------------------------------------- */
.dropdown-wrapper {
  position: relative;
  display: inline-block;
}

/* -------------------------------------------------
   BUTTON (visual only)
------------------------------------------------- */
.dropdown-button {
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  color: #000;
  text-decoration: underline;
  cursor: pointer;
}

.dropdown-button:hover {
  text-decoration: none;
}

/* -------------------------------------------------
   DROPDOWN MENU (FLOATS, DOES NOT RESIZE ROW)
------------------------------------------------- */
.dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;

  display: none;

  background: #fff;
  border: 1px solid #ccc;
  padding: 4px 0;

  min-width: 220px;
  max-width: 320px;

  z-index: 10000;          /* above card + table */
  white-space: nowrap;

  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* -------------------------------------------------
   DROPDOWN ITEMS
------------------------------------------------- */
.dropdown-content a {
  display: block;
  padding: 6px 10px;

  font-size: 12px;
  color: #333;
  text-decoration: none;

  white-space: nowrap;
}

.dropdown-content a:hover {
  background: #f1f1f1;
  color: #000;
}

/* -------------------------------------------------
   SHOW STATE
------------------------------------------------- */
.dropdown-wrapper.show .dropdown-content {
  display: block;
}

.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 140px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 6px 8px;
  position: absolute;
  z-index: 1;
  bottom: 125%; /* Show above the link */
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.link-style {
  color: black;
  padding-left: 5px;
  text-decoration: none;  /* Optional, if you want to remove underline */
}

.link-style:hover {
  color: red;
}

input.form-check-input[type="checkbox"] {
  display: inline-block !important;
  position: static !important;
  opacity: 1 !important;
  margin-top: 0.3rem;
  margin-right: 0.5rem;
}

input[type="checkbox"] {
  appearance: checkbox !important;
  -webkit-appearance: checkbox !important;
  -moz-appearance: checkbox !important;
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  background-color: white !important;
  border: 1px solid #ccc !important;
  margin-right: 6px;
  vertical-align: middle;
}

#sales-groups-card .card-body {
  overflow: visible;
}

#sales-groups-card .table-responsive {
  overflow-x: auto;      /* keep table scroll if needed */
  overflow-y: visible;   /* allow dropdown to show */
}

.table-responsive.allow-dropdown {
  overflow-x: auto;
  overflow-y: visible;
}

/* Keep Stripe UI from stretching across the whole row */
.stripe-wrap{
  max-width: 420px;     /* try 360?460 depending on your layout */
  width: 100%;
  text-align: left;
}

.stripe-label{
  display:block;
  margin-bottom:6px;
  font-weight:600;
}

.stripe-card-box{
  border: 1px solid #cfd4da;
  border-radius: 6px;
  padding: 10px 12px;
  background: #fff;
}

/* Optional: make it feel tighter/cleaner */
.stripe-errors{
  margin-top:6px;
  color:#c00;
  font-size:13px;
}

a.send-link[data-state="DISABLED"]{
  opacity: .5;
  cursor: not-allowed;
  text-decoration: none;
}

.form-control {
  height: 38px;
}

input[type="date"].form-control {
  height: 38px;
}

#addAnotherProductRow {
  padding: 4px 10px;
  font-size: 13px;
}

#addAnotherProductRow:hover {
  background-color: #e9ecef;  /* light grey */
  color: #333;
  border-color: #ccc;
}

/* --- FORCE USER MENU TO BE NORMAL SIZE --- */
/* Make ALL nav items behave the same */
/* Keep navbar items aligned */
/* keep nav items aligned */
.navbar-nav > .nav-item {
    display: flex;
    align-items: center;
}

/* user menu wrapper */
.navbar-nav > .user-menu-dropdown {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    margin-left: 12px !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
}

/* actual pill button - ACCOUNT ONLY */
.user-menu-dropdown > .user-menu-toggle.user-account-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 38px !important;
    padding: 0 18px !important;
    border: 1px solid #cfcfcf !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #333 !important;
    font-weight: 600 !important;
    line-height: 38px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

.user-menu-dropdown > .user-menu-toggle.user-account-toggle:hover {
    background: #f7f7f7 !important;
    border-color: #bdbdbd !important;
    color: #111 !important;
}

/* dropdown box */
.user-sub-menu {
    position: absolute !important;
    top: calc(100% + 2px) !important;
    right: 0 !important;
    left: auto !important;
    display: none !important;
    min-width: 180px !important;
    width: 180px !important;
    margin: 0 !important;
    padding: 8px 0 !important;
    list-style: none !important;
    background: #ffffff !important;
    border: 1px solid #dddddd !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 24px rgba(0,0,0,0.12) !important;
    z-index: 9999 !important;
}

/* only show on hover */
.navbar-nav > .user-menu-dropdown:hover > .user-sub-menu {
    display: block !important;
}

/* kill theme flex/grid/inline behavior */
.user-sub-menu,
.user-sub-menu li,
.user-sub-menu li a {
    float: none !important;
}

/* force rows to stack vertically */
.user-sub-menu li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* menu links */
.user-sub-menu li a {
    display: block !important;
    width: 100% !important;
    padding: 10px 16px !important;
    text-align: left !important;
    white-space: nowrap !important;
    line-height: 1.3 !important;
    color: #333 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}

/* hover inside menu */
.user-sub-menu li a:hover {
    background: #f5f5f5 !important;
    color: #111 !important;
}

/* rounded hover feel */
.user-sub-menu li:first-child a:hover {
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
}

/* generic dropdown links */
.user-menu-toggle {
    display: inline-block;
    cursor: pointer;
}

/* normal dropdowns like About open left-aligned */
.navbar-nav > .user-menu-dropdown > .user-sub-menu {
    left: 0 !important;
    right: auto !important;
}

/* account dropdown opens right-aligned */
.navbar-nav > .user-account-dropdown > .user-sub-menu {
    right: 0 !important;
    left: auto !important;
}

/* kill ugly animated underline on dropdown toggles */
.user-menu-dropdown > a.nav-link::before,
.user-menu-dropdown > a.nav-link:hover::before,
.user-menu-dropdown:hover > a.nav-link::before {
    display: none !important;
    width: 0 !important;
    content: none !important;
    background: transparent !important;
}

/* optional: prevent hover color shift */
.user-menu-dropdown:hover > a.nav-link {
    color: #3d4750 !important;
}

/* kill theme blue underline bars on custom dropdowns */
.da-inner-menu-desk .da-main-menu ul li.user-menu-dropdown:hover a::before,
.da-inner-menu-desk .da-main-menu ul li.user-menu-dropdown a::before,
.da-inner-menu-desk .da-main-menu ul li.user-menu-dropdown .user-sub-menu li a::before,
.da-inner-menu-desk .da-main-menu ul li.user-menu-dropdown .user-sub-menu li a:hover::before {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}