/* Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Manrope:wght@200..800&family=Michroma&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap");

/* Reset CSS */
* {
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}
ul,
ol,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

/* Custom Properties */
:root {
  /* Fonts */
  --font-inter: "Inter", sans-serif;
  --font-Michroma: "Michroma", sans-serif;
  --font-Manrope: "Manrope", sans-serif;
  --font-Nunito: "Nunito Sans", sans-serif;

  /* Colors */
  --color-primary: #16b843;
  --color-grayText: #6b7280;
  --color-darkText: #111827;
  --color-redBg: #ff4f59;
}

/* ====================================================================
                        Global CSS Starts Here
=====================================================================*/
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background-color: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: green;
  border-radius: 3px;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.text-right {
  text-align: right;
}
.bold {
  font-weight: bold !important;
}
.primary-color {
  color: var(--color-primary) !important;
}
.dashboard_menu_active {
  background: rgba(22, 184, 67, 0.1) !important;
  color: var(--color-primary) !important;
}
/* ====================================================================
                        Global CSS Ends Here
=====================================================================*/

/* ====================================================================
                        Auth Shared CSS Starts Here
===================================================================== */
.auth_main {
  width: 100%;
}
.auth_container {
  width: 100%;
  min-height: 100vh;
  max-width: 547px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.auth_header {
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}
.auth_title {
  color: var(--color-primary);
 /*  font-family: var(--font-Michroma); */
  font-size: 32.25px;
  font-weight: 400;
  line-height: 132%;
  letter-spacing: -0.322px;
  text-align: center;
}
.auth_subtitle {
  color: var(--color-grayText);
  font-family: var(--font-inter);
  font-size: 18px;
  font-weight: 500;
  line-height: normal;
  text-align: center;
}

.auth_form {
  display: flex;
  flex-direction: column;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 1rem;
}

.input_label {
  color: #4b5563;
  font-family: var(--font-inter);
  font-size: 0.8rem;;
  font-weight: 500;
  line-height: normal;
}
.input_field {
     border: 1px solid #e5e7eb;
    padding: 0.4rem 0.8rem;
    width: 100%;
    border-radius: 0.4rem;
    color: #4b5563;
    font-family: var(--font-inter);
    font-size: 0.8rem;
    font-weight: 400;
    line-height: normal;
}
.input_field::placeholder {
  color: var(--color-grayText);
  font-family: var(--font-inter);
  font-size: 0.8rem;
  font-weight: 400;
  line-height: normal;
}
.auth_button {
  background-color: var(--color-primary);
  color: white;
  cursor: pointer;
  width: 100%;
  padding: 0.3rem 03rem;
  border: none;
  border-radius: 0.5rem;
  transition: background-color 0.2s;
  font-family: var(--font-inter);
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
}
/* .auth_button:hover {
  background-color: var(--color-primary);
} */
.remember_me {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.remember_checkbox {
  cursor: pointer;
}
.auth_options_title,
.auth_copyright {
  color: var(--color-grayText);
  font-family: var(--font-Manrope);
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  text-align: center;
}
.auth_copyright {
  margin-top: 30px;
}
.signup_link,
.login_link {
  color: var(--color-primary) !important;
  text-decoration: underline !important;
}
/* ====================================================================
                        Auth Shared CSS Ends Here
===================================================================== */

/* ====================================================================
                        Login CSS Starts Here
=====================================================================*/
.login_container {
  min-height: 100vh;
  padding-left: 1rem;
  padding-right: 1rem;
}
.login_form {
  padding: 32px;
}
.input_group {
  display: grid;
  gap: 1rem;
  width: 100%;
  margin-bottom: 1rem;
}
.auth_options {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.signup_prompt {
  text-align: center;
  margin-top: 20px;
}
.signup_link {
  color: var(--color-primary);
  text-decoration: underline;
}
.copyright_text {
  text-align: center;
  margin-top: 2.5rem;
}
/* ====================================================================
                        Login CSS Ends Here
=====================================================================*/

/* ====================================================================
                        Signup CSS Starts Here
=====================================================================*/
.name_fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  width: 100%;
}
/* ====================================================================
                        Signup CSS Ends Here
=====================================================================*/

/* ====================================================================
                        Pick Store CSS Starts Here
=====================================================================*/
.pick_store_form {
  display: flex;
  flex-direction: column;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 32px;
  gap: 24px;
}
.select_wrapper {
  position: relative;
  width: 100%;
}
.select_wrapper .input_field {
  appearance: none;
  padding-right: 2.5rem;
  font-size: 0.8rem;
}
.select_arrow {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  color: var(--color-grayText);
  /* pointer-events: none; */
}
.error_message {
  color: var(--color-redBg);
  font-family: var(--font-inter);
  font-size: 14px;
  margin-top: 4px;
  display: none;
}
.input_field:invalid + .select_arrow + .error_message {
  display: block;
}
/* ====================================================================
                        Pick Store CSS Ends Here
=====================================================================*/

/* ====================================================================
                        Customer Select CSS Starts Here
=====================================================================*/
.button_group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}
.auth_button_outline {
  background-color: transparent;
  color: var(--color-grayText);
  cursor: pointer;
  width: 100%;
  padding: 12px 24px;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
  font-family: var(--font-Manrope);
  font-size: 11px;
  font-weight: 500;
  line-height: normal;
  text-align: center;
}
.auth_button_outline:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}
.relative {
  position: relative;
}
.search_icon {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  color: var(--color-grayText);
  cursor: pointer;
}
.search_input_field {
  border: 1px solid #e5e7eb;
    padding: 0.45rem 1.5rem;
    width: 100%;
    border-radius: 0.5rem;
    color: #4b5563;
    font-family: var(--font-inter);
    font-size: 1rem;
    font-weight: 400;
    line-height: normal;
}
/* ====================================================================
                        Customer Select CSS Ends Here
=====================================================================*/

/* ====================================================================
                        Create Customer CSS Starts Here
=====================================================================*/
.customer_form, .fixcharge_form, .items_form {
  display: flex;
  flex-direction: column;
  background: #fff;
}
.name_fields,
.contact_fields,
.address_fields,
.location_fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  width: 100%;
}
.input_group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.input_field:required + .input_label::after {
  content: " *";
  color: var(--color-redBg);
}
/* ====================================================================
                        Create Customer CSS Ends Here
=====================================================================*/

/* ====================================================================
                      Business Select CSS Starts Here
=====================================================================*/
.is_employee_checkbox {
  padding: 12px 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 24px;
  margin: 10px;
}
.toggle-switch .toggle-input {
  display: none;
}
.toggle-switch .toggle-label {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 24px;
  background-color: #e5e5e5;
  border-radius: 34px;
  cursor: pointer;
  transition: background-color 0.3s;
}

/* Anahtarın yuvarlak kısmının stil */
.toggle-switch .toggle-label::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  background-color: #fff;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s;
}

/* Anahtarın etkin hale gelmesindeki stil değişiklikleri */
.toggle-switch .toggle-input:checked + .toggle-label {
  background-color: #4caf50;
}

.toggle-switch .toggle-input:checked + .toggle-label::before {
  transform: translateX(16px);
}

/* Light tema */
.toggle-switch.light .toggle-label {
  background-color: #bebebe;
}

.toggle-switch.light .toggle-input:checked + .toggle-label {
  background-color: #9b9b9b;
}

.toggle-switch.light .toggle-input:checked + .toggle-label::before {
  transform: translateX(6px);
}

/* Dark tema */
.toggle-switch.dark .toggle-label {
  background-color: #4b4b4b;
}

.toggle-switch.dark .toggle-input:checked + .toggle-label {
  background-color: #717171;
}

.toggle-switch.dark .toggle-input:checked + .toggle-label::before {
  transform: translateX(16px);
}

/* ====================================================================
                      Business Select CSS Ends Here
=====================================================================*/

/* ====================================================================
                    Dashboard Common CSS Starts Here
=====================================================================*/
.dashboard_home_main {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.topbar {
  width: 100%;
  height: 100%;
  border-bottom: 1px solid #e5e7eb;
  background: white;
  /* position: fixed; */
  top: 0;
  left: 0;
  z-index: 999;
}
.dashboard_body {
  width: 100%;
  height: 92%;
  padding-top: 0.5rem;
  overflow-y: scroll;
}
.dashboard_sidebar {
  width: 20%;
  height: calc(100vh - 81px);
  background: white;
  overflow-y: scroll;
  border-right: 1px solid #e5e7eb;
  position: fixed;
  top: 8%;
  left: 0;
}
.dashboard_outlet {
  width: 100%;
  height: 100%;
  padding: 1% 1% 1% 1%;
  overflow-y: scroll;
  text-align: justify;
      position: fixed;
}
#headerMain {
  height: 8%;
     /*  padding: 0rem 1rem; */
/*   position: fixed; */
}
/* ====================================================================
                    Dashboard Common CSS Ends Here
=====================================================================*/

/* ====================================================================
                        Dashboard Topbar CSS Starts Here
=====================================================================*/
.topbar_container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1rem; 
  height: 100%;
  margin: 0 auto;
}
.logo {
  color: var(--color-primary);
  font-family: var(--font-inter);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
}
.topbar_actions {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.new_order_text {
  color: var(--color-grayText);
  font-family: var(--font-inter);
  font-size: 1rem;
  font-weight: 600;
  transition: all linear 0.3s;
}
.new_order_text:hover {
  color: var(--color-primary);
}
.notification_icon {
  position: relative;
  cursor: pointer;
}
.notification_icon i {
  font-size: 1.5rem;
  color: var(--color-grayText);
}
.notification_badge {
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 8px;
  background-color: var(--color-redBg);
  border-radius: 50%;
}
.user_dropdown {
  position: relative;
}
.dropdown_trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.user_avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}
.dropdown_arrow {
  color: var(--color-grayText);
  font-size: 1rem;
  display: none;
}
.dropdown_content {
  position: absolute;
  right: 0;
  top: 100%;
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 1rem;
  min-width: 240px;
  z-index: 100;
  display: none;
}
.user_dropdown:hover .dropdown_content {
  display: block;
}
.user_profile {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 0.5rem;
}
.profile_avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.profile_info {
  display: flex;
  flex-direction: column;
}
.profile_name {
  color: var(--color-darkText);
  font-family: var(--font-Manrope);
  font-weight: 700;
  font-size: 1rem;
}
.profile_email {
  color: var(--color-grayText);
  font-family: var(--font-Manrope);
  font-size: 0.875rem;
  margin-bottom: 0;
}
.dropdown_item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  color: var(--color-grayText);
  font-family: var(--font-Manrope);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
}
.dropdown_item:hover {
  color: var(--color-primary);
}
.dropdown_item i {
  font-size: 1.5rem;
}
.mobile_only {
  display: none;
}
.mobile_menu_btn {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.mobile_menu_btn i {
  font-size: 1.5rem;
  color: var(--color-grayText);
}
.sidebar_header {
  padding: 1rem;
  border-bottom: 1px solid #e5e7eb;
  height: 80px;
  display: flex;
  align-items: center;
}
.sidebar_content {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}
.side_nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.nav_link {
  padding: 0.75rem 1rem;
  color: var(--color-grayText);
  font-family: var(--font-inter);
  border-radius: 0.25rem;
}
.nav_link:hover {
  background-color: #f3f4f6;
  color: var(--color-primary);
}
/* ====================================================================
                        Dashboard Topbar CSS Ends Here
=====================================================================*/

/* ====================================================================
                    Dashboard Sidebar CSS Starts Here
=====================================================================*/
.sidebar_content {
  padding: 0 1.5rem;
}
.sidebar_section_title {
  color: var(--color-grayText);
  font-family: var(--font-Manrope);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  margin: 1rem 0 1rem;
}
.sidebar_menu {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar_link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
      padding: 0.2rem 0.5rem;
  color: var(--color-grayText);
  font-family: var(--font-Manrope);
  font-size: 1rem;
  text-decoration: none;
  border-radius: 0.5rem;
  margin-bottom: 0.25rem;
}
.sidebar_link.active {
  color: var(--color-primary);
  background-color: rgba(22, 184, 67, 0.1);
  font-weight: 500;
}
.sidebar_link.active .sidebar_icon {
  fill: var(--color-primary);
}
.sidebar_link:hover {
  background-color: rgba(22, 184, 67, 0.1);
}
.sidebar_dropdown {
  margin-bottom: 0.25rem;
}
.dropdown_icon_container {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dropdown_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding:0.2rem 0.5rem;
  color: var(--color-grayText);
  font-family: var(--font-Manrope);
  font-size: 1rem;
  cursor: pointer;
  border-radius: 0.5rem;
}
.dropdown_header:hover {
  background-color: #f3f4f6;
}
.dropdown_arrow {
  margin-left: auto;
  transition: transform 0.2s;
}
.dropdown_menu {
  list-style: none;
  padding: 0;
  margin: 0;
  padding-left: 2.5rem;
  /* display: none; */
}
.dropdown_menu.show {
  /* display: block; */
}
.dropdown_link {
  display: block;
  padding: 0.2rem 0.5rem;
  color: var(--color-grayText);
  font-family: var(--font-Manrope);
  font-size: 0.875rem;
  text-decoration: none;
  border-radius: 0.5rem;
      cursor: pointer;
}
.dropdown_link:hover {
  color: var(--color-primary);
}
/* ====================================================================
                    Dashboard Sidebar CSS Ends Here
=====================================================================*/

/* ====================================================================
                    Dashboard Progress CSS Starts Here
=====================================================================*/
.progress-container {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
.progress-card {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 24px;
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}
.card-title {
  color: #212633;
  font-size: 18px;
  font-weight: 600;
  font-family: var(--font-Manrope);
}
.select-container {
  position: relative;
  width: 100%;
  max-width: 176px;
}
.select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 12px;
  background-color: #e8f8ed;
  color: #212633;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
}
.select-content {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: white;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 10;
  display: none;
}
.select-content.show {
  display: block;
}
.select-group {
  padding: 8px 0;
}
.select-label {
  padding: 8px 12px;
  font-size: 12px;
  color: #64748b;
}
.select-item {
  padding: 8px 12px;
  cursor: pointer;
}
.select-item:hover {
  background-color: #e8f8ed;
  color: #212633;
}
.circular-progress-container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.circular-progress-text {
  text-anchor: middle;
}
.circular-progress-text-total {
  fill: #8e9abb;
  font-size: 18px;
  font-weight: 500;
}
.circular-progress-text-value {
  fill: #212633;
  font-size: 32px;
  font-weight: 600;
}
#singleProgress,
#businessProgress {
  color: #212633;
  text-align: center;
  font-size: 40px;
  font-style: normal;
  font-weight: 400;
  line-height: 48px;
  font-family: var(--font-inter);
}
/* ====================================================================
                    Dashboard Progress CSS Ends Here
=====================================================================*/

/* ====================================================================
                    Customers Table CSS Starts Here
=====================================================================*/
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-top: 30px;
}
.table-block h1 {
  color: #111827;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
  margin-bottom: 24px;
}
.table-container {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  overflow: hidden;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th {
  padding: 12px;
  text-align: left;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #424953;
  font-family: var(--font-Manrope);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  background: #f7f7f7;
}
thead tr:first-child {
  border-bottom: 1px solid #e5e7eb;
}
tr:hover {
  background-color: #f7f7f7;
}
td {
  padding: 12px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #4b5563;
  font-family: var(--font-Manrope);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
}
.name-cell {
  padding-left: 8px;
  padding-right: 8px;
  font-weight: 500;
}
.amount-cell {
  text-align: center;
  padding-left: 8px;
  padding-right: 8px;
}
.reward-cell {
  text-align: right;
  padding-left: 8px;
  padding-right: 8px;
}
.services-cell {
  padding-left: 8px;
  padding-right: 8px;
  font-weight: 500;
}
.net-cell {
  text-align: left;
  padding-left: 8px;
  padding-right: 8px;
}
.sales-cell {
  text-align: right;
  padding-left: 8px;
  padding-right: 8px;
}
/* ====================================================================
                    Customers Table CSS Ends Here
=====================================================================*/

/* ====================================================================
                    Dashboard New Order CSS Starts Here
=====================================================================*/
.dashboard_new_order_outlet {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.dashboard_outlet_content_left {
  width: 65%;
  height: 100%;
  height: calc(100vh - 6rem); /* or adjust based on your layout */
  overflow-y: auto;
}
.dashboard_outlet_content_right {
  width: 35%;
  min-height: 100%;
  height: calc(100vh - 6rem); /* or adjust based on your layout */
  overflow-y: auto;
}
.dashboard_outlet_content_cards {
  /* margin-top: 20px; */
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.6rem;
}
.product_card {
  padding: 0.5rem;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}
.product_content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  user-select: none;
}
.product_image_container {
  width: 50%;
  display: flex;
  justify-content: center;
}
.product_image {
  width: 80%;
  height: auto;
}
.product_details {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.product_name {
  color: var(--color-darkText);
  font-family: var(--font-Manrope);
  font-size: 0.8rem;
  text-align: center;
}
.product_price {
  color: var(--color-primary);
  font-family: var(--font-Manrope);
  font-size: 0.8rem;
  font-weight: 700; 
}
.quantity_controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0.5rem 0;
}
.quantity_button {
	width: 1.3rem;
	height: 1.3rem;
 /*  padding: 0; */
  border-radius: 50%;
  border: 1px solid #e5e7eb;
  background-color: #e0e0e0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}
/* .quantity_button {
  width: 10%;
  height: 10%;
  border-radius: 50%;
  background-color: #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
} */
.quantity_button:hover {
  background-color: rgba(22, 184, 67, 0.1);
}
.minus_icon,
.plus_icon {
  fill: var(--color-darkText);
}
.quantity_display {
  user-select: none;
  font-family: var(--font-Manrope);
  /* font-size: 1.25rem; */
  font-weight: 700;
  width: 70%;
    text-align: center;
    height: 1.3rem;
        border: none;
}
.quantity_input::-webkit-outer-spin-button, .quantity_input::-webkit-inner-spin-button
	{
	-webkit-appearance: none;
	margin: 0;
}

.quantity_input[type=number] {
	-moz-appearance: textfield;
}

.add_button {
  background-color: var(--color-primary);
  width: 70%;
  /* padding: 0.625rem 0; */
  border-radius: 5px;
  font-weight: 500;
  font-family: var(--font-Manrope);
  color: white;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
  user-select: none;
  justify-content: center;
  align-items: center;
  display: flex;
}
.add_button_wrapper {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.add_button:hover {
  background-color: #16a034;
}
.order_button {
  background-color: var(--color-primary);
  width: 100%;
  padding: 0.3rem 0; 
  border-radius: 6px;
  font-weight: 500;
  font-family: var(--font-Manrope);
  color: white;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
  user-select: none;
  justify-content: center;
  align-items: center;
  display: flex;
}
.order_button:hover {
  background-color: #16a034;
}

.dashboard_outlet_content_right {
  padding: 0.3rem;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}
.ashboard_outlet_content_right_header {
  display: flex;
  align-items: center;
  justify-content: end;
  padding: 0.5rem;
    margin-bottom: 0.5rem;
}
.dashboard_outlet_content_right_header_title {
  color: #111827;
  font-family: var(--font-Manrope);
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
      flex: 0 0 45%;
}
.start_over_btn {
  display: flex;
    padding: 0.4rem 0.1rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* gap: 10px; */
    border-radius: 0.3rem;
    border: 1px solid #ff4f59;
    background: #ff4f59;
    color: #fff;
    font-family: Manrope;
    font-size: 0.8rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    flex: 0 0 20%;
}
.dashboard_outlet_content_right_body {
/*   margin-top: 30px; */
}
.add_another_service {
  display: flex;
  padding: 0.2rem 0.2rem;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  border-radius: 8px;
  border: 1px dashed var(--Text-200, #e5e7eb);
  background: #fff;
  margin: 0.5rem 0;
}
.add_another_service_text {
  color: #6b7280;
  font-family: var(--font-Manrope);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.total_quantity_box {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.total_quantity_box_content {
  border-radius: 8px;
  border: 1px solid var(--Text-200, #e5e7eb);
  padding: 0.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.total_item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.total_item_title {
  color: var(--color-grayText);
  font-family: var(--font-inter);
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.total_item_value {
  color: #4b5563;
  font-family: var(--font-inter);
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
.added_items_list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.added_items_list_item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem;
  padding: 0.3rem;
  border-radius: 8px;
  border: 1px solid var(--Text-200, #e5e7eb);
}

.added_items_list_item_title {
  flex: 0 0 25%;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.added_items_list_item_title_text {
  color: var(--Text-900, #111827);
  font-family: var(--font-Manrope);
  font-size: 0.85rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.added_items_list_item_title_price {
  color: var(--color-primary);
  font-family: var(--font-Manrope);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
    font-size: 0.85rem;
}

.added_items_list_item_filter {
  flex: 0 0 65%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
}
.added_items_list_item_button{
	flex: 0 0 10%;
}
.added_items_list_item_button .remove_button {
 display: flex;
flex-direction: column;
justify-content: center;
border: 0.0rem solid ;
color: #d30000;
background: white;
font-family: var(--font-Manrope);
transition: all linear 0.3s;
padding: 0.4rem 0.6rem;
height: 2.25rem;

}
.added_items_list_item_button .remove_button:hover {
  color: #ff4f59;
}
.filter_select {
  padding: 0.2rem 0.1rem;
  border-radius: 8px;
  border: 1px solid var(--Text-200, #e5e7eb);
  color: var(--Text-700, #4b5563);
  font-family: var(--font-Manrope);
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.filter_select_option {
  color: #4b5563;
  font-family: var(--font-Manrope);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

/* Order Summary Styles */
.order-summary-form {
  font-family: "Inter", sans-serif;
  /* max-width: 800px; */
  margin: 0 auto;
 /*  padding: 1rem; */
}

.order-summary-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 768px) {
  .order-summary-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1rem;
  }
}

.order-summary-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: #111827;
  display: block;
  margin-bottom: 8px;
}

@media (min-width: 768px) {
  .order-summary-label {
    margin-bottom: 0.3rem;
  }
}

.order-summary-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-family: "Inter", sans-serif;
  font-size: 0.7rem;
}

@media (min-width: 768px) {
  .order-summary-input {
    padding: 0.25rem 0.7rem;
    font-size: 0.9rem;
  }
}
#amountPaid .order-summary-input {
    padding: 0.25rem 0.7rem;
    font-size: 0.9rem;
            text-align: right;
  }
.order-summary-input::placeholder {
  color: #ff4f59;
}

.order-summary-input.error {
  border-color: #ef4444;
}

.order-summary-error {
  color: #ef4444;
  font-size: 12px;
  margin-top: 4px;
}

.toggle-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 0;
  font-weight: 500;
}

/* Payment Method Styles */
.order-summary-payment-methods {
 /*  grid-column: 1 / -1; */
  margin-bottom: 16px;
}

.order-summary-payment-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 8px;
  display: block;
}

.order-summary-payment-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 640px) {
  .order-summary-payment-options {
    flex-direction: row;
  }
}

.order-summary-payment-option {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  cursor: pointer;
}

.order-summary-payment-option:hover {
  border-color: #d1d5db;
}

.order-summary-payment-option.paymentSelected {
  border-color: #16b843;
  box-shadow: 0 0 0 1px #16b843;
}

.order-summary-payment-option.error {
  border-color: #ef4444;
}

.order-summary-radio {
  width: 16px;
  height: 16px;
  border: 1px solid #9ca3af;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .order-summary-radio {
    width: 20px;
    height: 20px;
  }
}

.order-summary-radio-dot {
  width: 10px;
  height: 10px;
  background-color: #16b843;
  border-radius: 50%;
  display: none;
}

@media (min-width: 768px) {
  .order-summary-radio-dot {
    width: 12px;
    height: 12px;
  }
}

.order-summary-payment-option.paymentSelected .order-summary-radio-dot {
  display: block;
}

.order-summary-payment-icon {
  font-size: 20px;
  color: #6b7280;
}

@media (min-width: 768px) {
  .order-summary-payment-icon {
    font-size: 27px;
  }
}

.order-summary-payment-text {
  font-size: 14px;
  color: #6b7280;
}

/* Save Card Checkbox */
.order-summary-save-card {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 24px 0;
}

.order-summary-checkbox {
  width: 18px;
  height: 18px;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  appearance: none;
  cursor: pointer;
  position: relative;
}

.order-summary-checkbox:checked {
  border-color: #6b7280;
  background-color: white;
}

.order-summary-checkbox:checked::after {
  content: "✓";
  color: #16b843;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  font-weight: bold;
}

.order-summary-save-label {
  font-size: 14px;
  font-weight: 500;
  color: #111827;
}

@media (min-width: 768px) {
  .order-summary-save-label {
    font-size: 16px;
  }
}

/* Delivery Switch */
.order-summary-delivery {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 24px 0;
}

.order-summary-delivery-label {
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
}

.order-summary-switch {
  width: 33px;
  height: 20px;
  background-color: #e5e7eb;
  border-radius: 10px;
  position: relative;
  cursor: pointer;
  transition: background-color 0.2s;
}

.order-summary-switch.on {
  background: linear-gradient(to right, #16a34a, #4ade80);
}

.order-summary-switch-knob {
  width: 16px;
  height: 16px;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 0.2s;
}

.order-summary-switch.on .order-summary-switch-knob {
  transform: translateX(13px);
}

/* Order Total */
.order-summary-total {
  background-color: #f9fafb;
  padding: 0.5rem;
  border-radius: 8px;
  margin-top: 1rem;
}

.order-summary-total-row {
  display: flex;
  justify-content: space-between;
  padding: 0.1rem 0;
}

.order-summary-total-label {
  font-size: 14px;
  color: #6b7280;
}

.order-summary-total-value {
  font-size: 0.9rem;
  font-weight: 500;
  color: #111827;
}

.order-summary-total-shipping {
  color: #16b843;
}

/* Action Buttons */
.order-summary-actions {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: 0.7rem;
}

@media (min-width: 640px) {
  .order-summary-actions {
    flex-direction: row;
    gap: 1rem;
  }
}

.order-summary-button {
  padding: 0.5rem 1.5rem;
  border-radius: 8px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
  text-align: center;
}

@media (min-width: 768px) {
  .order-summary-button {
    padding: 0.5rem 1.5rem;
  }
}

.order-summary-cancel {
  border: 1px solid #e5e7eb;
  background-color: white;
  color: #111827;
  order: 2;
}

@media (min-width: 640px) {
  .order-summary-cancel {
    order: 1;
  }
}

.order-summary-cancel:hover {
  background-color: #ff4f59;
  color: white;
}

.order-summary-submit {
  background-color: #16b843;
  color: white;
  border: none;
  order: 1;
}

@media (min-width: 640px) {
  .order-summary-submit {
    order: 2;
  }
}

.order-summary-submit:hover {
  background-color: #15803d;
}
/* ====================================================================
                    Dashboard New Order CSS Ends Here
=====================================================================*/

/* ====================================================================
                        Select Box CSS Starts Here
=====================================================================*/
/* From Uiverse.io by 3bdel3ziz-T */
.select {
  width: 100%;
  height: 44px;
  cursor: pointer;
  position: relative;
  transition: 300ms;
  color: white;
}
.selected {
  background-color: #fff;
  padding: 5px;
  margin-bottom: 3px;
  border-radius: 5px;
  position: relative;
  z-index: 99;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #8e939b;
  padding: 10px 20px;

  color: #6b7280;
  font-family: var(--font-Manrope);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.arrow {
  position: relative;
  right: 0px;
  height: 10px;
  transform: rotate(-90deg);
  width: 25px;
  fill: black;
  z-index: 100000;
  transition: 300ms;
}
.options {
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  padding: 5px;
  background-color: #fff;
  position: relative;
  top: -100px;
  opacity: 0;
  transition: 300ms;
  border: 1px solid #8e939b;
  padding: 10px;
}
.select:hover > .options {
  opacity: 1;
  top: 0;
}
.select:hover > .selected .arrow {
  transform: rotate(0deg);
}
.option {
  width: 100%;
  border-radius: 5px;
  padding: 5px;
  transition: 300ms;
  background-color: #fff;
  width: 150px;
  font-size: 15px;
  color: #111827;
}
.option:hover {
  background-color: #dfdede;
}
.options input[type="radio"] {
  display: none;
}
.options label {
  width: 100%;
  display: block;
}
.options label::before {
  content: attr(data-txt);
}
.options input[type="radio"]:checked + label {
  display: none;
}
.options input[type="radio"]#all:checked + label {
  display: none;
}
.select:has(.options input[type="radio"]#all:checked) .selected::before {
  content: attr(data-default);
}
.select:has(.options input[type="radio"]#option-1:checked) .selected::before {
  content: attr(data-one);
}
.select:has(.options input[type="radio"]#option-2:checked) .selected::before {
  content: attr(data-two);
}
.select:has(.options input[type="radio"]#option-3:checked) .selected::before {
  content: attr(data-three);
}
/* ====================================================================
                        Select Box CSS Ends Here
=====================================================================*/

/* ====================================================================
                      Dashboard Order CSS Starts Here
=====================================================================*/
.dashboard_order_outlet {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.dashboard_outlet_content_top {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid var(--Text-200, #e5e7eb);
  background: #fff;
}
.dashboard_outlet_title {
  color: #010101;
  font-family: var(--font-inter);
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.dashboard_outlet_search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.search_box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.search_button {
  display: flex;
  padding: 12px 24px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;

  border-radius: 8px;
  border: 1px solid var(--Text-200, #e5e7eb);
  background: #16b843;
}
.show_pickup {
  display: flex;
  min-width: max-content;
  height: 46px;
  padding: 6px 12px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  border-radius: 8px;
  border: 1px solid var(--Text-200, #e5e7eb);
  color: var(--Text-700, #4b5563);
  font-family: var(--font-inter);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.orders-table {
  width: 100%;
  outline: 1px solid #e5e7eb !important;
  border-radius: 8px;
  overflow: hidden;
  background-color: white;
  margin-bottom: 0.9rem;
}
.orders-table-header {
  background-color: #f3f4f6;
}
.orders-table-header-row {
  color: #6b7280;
  font-size: 16px;
  font-weight: 500;
}
.orders-table-header-cell {
  padding: 1rem 0.2rem;;
  text-align: left;
  color: var(--Text-700, #4b5563);
  font-family: var(--font-inter);
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.orders-table-body-row {
  color: #6b7280;
  font-family: var(--font-inter);
  border-top: 1px solid #e5e7eb;
}
.orders-table-body-row:hover {
  background-color: #f9fafb;
}
.orders-table-body-cell {
  padding: 0.6rem;
  color: var(--Text-600, #6b7280);
  font-family: var(--font-inter);
  font-size: 0.9rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.orders-status-select {
  width: 120px;
  padding: 8px;
  border-radius: 6px;
  border: none;
  outline: none;
  cursor: pointer;
  font-family: "Manrope", sans-serif;
  font-size: 14px;
}
.orders-status-select.completed {
  background-color: rgba(107, 33, 168, 0.1);
  color: #6b21a8;
}
.orders-status-select.pending {
  background-color: #fffaeb;
  color: #b54708;
}
.orders-status-select.cancelled {
  background-color: #fef3f2;
  color: #b42318;
}
.orders-status-select.default {
  background-color: rgba(30, 64, 175, 0.1);
  color: #1e40af;
}
.orders-view-btn {
  background-color: #f3f4f6;
  width: fit-content;
  padding: 4px 16px;
  border-radius: 9999px;
  cursor: pointer;
  font-size: 14px;
}
.orders-view-btn:hover {
  background-color: #e5e7eb;
}
.orders-action-btns {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  margin-bottom: 4rem;
}
.orders-cancel-btn {
  color: #6b7280;
  font-size: 1rem;
  font-weight: 500;
  border: 1px solid #e5e7eb;
  padding: 0.5rem 1.5rem;
  border-radius: 6px;
  cursor: pointer;
  background-color: white;
  transition: all 0.3s;
}
.orders-cancel-btn:hover {
  background-color: #ef4444;
  color: white;
  border-color: #ef4444;
}
.orders-save-btn {
  color: white;
  font-size: 1rem;
  font-weight: 500;
  background-color: #16b843;
  padding: 0.5rem 1.5rem;
  border-radius: 6px;
  cursor: pointer;
  border: none;
  transition: all 0.3s;
}
.orders-save-btn:hover {
  background-color: #15803d;
}
.orders-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.orders-no-results {
  height: 96px;
  text-align: center;
}
.order-details-dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.order-details-content {
  background-color: white;
  border-radius: 8px;
  width: 90%;
  max-width: 900px;
  max-height: 90vh;
  overflow: hidden;
}
#orderSumurryDialog .order-details-content {
  background-color: white;
  border-radius: 8px;
  width: 40%;
  /* max-width: 650px; */
  max-height: 90vh;
  overflow: hidden;
}
.order-details-content-note {
  background-color: white;
  border-radius: 8px;
  width: 90%;
  max-width: 30%;
  max-height: 80%;
  overflow: hidden;
}
.order-details-content-rack {
  background-color: white;
  border-radius: 8px;
  width: 20%;
  /* max-width: 30%; */
  max-height: 80%;
  overflow: hidden;
}
.order-details-scroll {
  max-height: 80%;
  overflow-y: auto;
  padding: 1rem;
  position: relative;
}
.order-details-header {
 /*  margin-bottom: 20px; */
  /* display: flex; */
  align-items: start;
      text-align: center;
  justify-content: space-between;
}
.order-details-title {
  color: #16b843;
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.8rem;
}
.order-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.order-info-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.order-info-card {
  background-color: #f9fafb;
  padding: 13px;
  border-radius: 6px;
/*   display: flex;
  flex-direction: column;
  justify-content: space-between; */
  /* gap: 10px; */
  position: relative;
}
.order-info-label {
  color: var(--Text-600, #6b7280);
  font-family: var(--font-inter);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.order-info-value {
  color: var(--Text-700, #4b5563);
  font-family: var(--font-inter);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  height: 37px;
}
.order-status {
  font-size: 12px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 9999px;
  width: fit-content;
}
.order-status-pending {
  color: #92400e;
  background-color: #fef3c7;
}
.order-status-completed {
  color: #065f46;
  background-color: #d1fae5;
}
.order-status-cancelled {
  color: #991b1b;
  background-color: #fee2e2;
}
.order-items-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 24px;
}
.order-items-header {
  background-color: #f9fafb;
}
.order-items-header-cell {
  padding: 12px;
  text-align: left;
  font-weight: 500;
}
.order-items-row {
  border-bottom: 1px solid #e5e7eb;
}
.order-items-cell {
  padding: 12px;
  vertical-align: middle;
}
.order-item-product {
  display: flex;
  align-items: center;
  gap: 8px;
}
.order-item-icon {
  background-color: #dcfce7;
  padding: 8px;
  border-radius: 4px;
}
.order-item-name {
  font-size: 14px;
}
.order-item-price {
  color: #16b843;
  font-weight: 700;
  font-size: 14px;
  margin-top: 4px;
}
.order-item-description {
  text-align: center;
  font-size: 14px;
}
.order-item-color-label {
  color: #6b7280;
}
.order-item-color-value {
  color: #111827;
  font-weight: 500;
  margin-top: 4px;
}
@media (min-width: 768px) {
  .order-item-color-value {
    margin-top: 12px;
  }
}
.order-summary {
  background-color: #f9fafb;
  padding: 16px;
  border-radius: 6px;
      margin-bottom: 24px;
}
.order-summary-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 12px;
  color: #6b7280;
}
.order-summary-value {
  color: #111827;
}
.order-summary-shipping-free {
  color: #16b843;
}
.order-summary-total {
  font-weight: 600;
}
.order-details-close, .invoice-details-close, .pay-now-btn, .pay-now-details-close {
  cursor: pointer;
}
.order-info-checkbox {
  display: none;
}
.order-info-checkbox:checked + .order-info-card {
  .order-info-checkmark {
    .order-info-check-path {
      display: block;
    }
  }
}
.order-info-checkmark {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}
.order-info-check-path {
  display: none;
}
.order-info-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.button {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 24px;
    border-radius: 8px;
    font-family: var(--font-Manrope);
    font-size: 16px;
    font-weight: 500;
    color: #4b5563;
    background: white;
    border: 1px solid #e5e7eb;
    transition: all linear 0.3s;

    &.add {
      background: #16b843;
      color: #fff;
    }
    &.add:hover {
      background: #61f18a;
      color: #fff;
    }
    &.cancle:hover {
      background: rgb(248, 97, 97);
      color: #fff;
    }
  
}

#orderInfo, #invoiceInfo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
/* ====================================================================
                      Dashboard Order CSS Ends Here
=====================================================================*/

/* ====================================================================
                        Dashboard Customer CSS Starts Here
=====================================================================*/
.add_customer_btn {
  display: flex;
  min-width: max-content;
  padding: 12px 24px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  background: #16b843;
  color: #fff;
  font-family: Inter;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  border: 0;
}
.dashboard_customer_outlet {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.order-details-thankyou-image {
  width: 100%;
  display: flex;
  justify-content: center;
}
.order-details-thankyou-image img {
  width: 100%;
  max-width: 70%;
}
.order-details-thankyou-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.order-details-thankyou-title {
  color: var(--Text-700, #4b5563);
  font-family: var(--font-inter);
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.order-details-thankyou-description {
  color: var(--Text-600, #6b7280);
  text-align: center;
  font-family: var(--font-Manrope);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 164%;
}
.order-details-thankyou-close {
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
}

.customer_location_fields {
    display: flex;
    gap: 10px;
}

.customer_location_fields .input_group {
    flex: 0.5; 
}

/* ====================================================================
                        Dashboard Customer CSS Ends Here
=====================================================================*/

/* ====================================================================
                    Dashboard Employee CSS Starts Here
=====================================================================*/
.employee-action-btns {
  display: flex;
  align-items: center;
  gap: 5%;
}
.employee-view-btn, .fixcharge-edit-btn {
  color: var(--Text-600, #6b7280);
  font-family: var(--font-inter);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.employee-remove-btn, .fixcharge-remove-btn, .servicetype-remove-btn, .item-remove-btn, .additionalcharge-remove-btn {
  display: flex;
  height: 36px;
  padding: 6px 8px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  border-radius: 8px;
  /*border: 1px solid #ff4f59;*/
  color: #ff4f59;
  font-family: var(--font-inter);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.pegination-btns {
  display: flex;
  align-items: center;
  justify-content: space-between;
/*   margin-bottom: 2.5rem; */
}
.pegination-btn {
  display: flex;
  padding: 0.5rem 1rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
/*   gap: 10px; */
  border-radius: 8px;
  border: 1px solid var(--Text-200, #e5e7eb);
  color: var(--Text-700, #4b5563);
  font-family: var(--font-Manrope);
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  background: white;
  transition: all linear 0.3s;
}
.pegination-btn:hover {
  background: #f1f1f1;
  color: #000;
}
.pegination-info {
  color: var(--Text-600, #6b7280);
  font-family: var(--font-inter);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.store_select select {
  width: 100%;
  display: flex;
  padding: 14px 16px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  align-self: stretch;
  border-radius: 8px;
  border: 1px solid var(--Text-200, #e5e7eb);

  option {
    color: var(--Text-600, #6b7280);
    font-family: var(--font-inter);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
}
/* ====================================================================
                    Dashboard Employee CSS Ends Here
=====================================================================*/

/* ====================================================================
                  Dashboard Transaction CSS Starts Here
=====================================================================*/
.dashboard_outlet_search_item {
  width: 100%;
  position: relative;
}
.transaction_top_input_field {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--Text-200, #e5e7eb);
  display: flex;
 /*  height: 46px; */
  padding: 0.3rem 1rem;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
 /*  gap: 10px; */
  align-self: stretch;
  color: var(--Text-600, #6b7280);
  font-family: var(--font-inter);
  font-size: 0.9rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.transaction_top_search_btn {
 /*  height: 46px; */
  padding: 0.3rem 1rem;
  gap: 10px;
  flex: 1 0 0;
  border-radius: 8px;
  background: var(--color-primary);
  border: none;
  width: 100%;
  color: #fff;
  font-family: var(--font-inter);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-align: center;
  transition: all linear 0.3s;
}
.transaction_top_search_btn:hover {
  background: var(--color-grayText);
}
/* ====================================================================
                  Dashboard Transaction CSS Ends Here
=====================================================================*/

/* ====================================================================
                Dashboard Sales and Report CSS Starts Here
=====================================================================*/
.transaction_top_input_search_icon {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  cursor: pointer;
}
.transaction_top_input_field {
  padding-right: 40px;
}
.transaction_top_input_search_icon svg {
  width: 20px;
  height: 20px;
}
.dashboard_sales_report_cards {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
  margin: 50px 0;
}
.dashboard_sales_report_card {
  width: 100%;
  display: flex;
  padding: 50px 30px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  border-radius: 8px;
  border: 1px solid var(--Text-200, #e5e7eb);
}
.dashboard_sales_report_card_amount {
  color: var(--color-primary);
  font-family: var(--font-inter);
  font-size: 28px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
.dashboard_sales_report_card_title {
  color: var(--Text-600, #6b7280);
  font-family: var(--font-inter);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
/* ====================================================================
                Dashboard Sales and Report CSS Ends Here
=====================================================================*/

/* ====================================================================
                Dashboard Cleaning Type CSS Starts Here
=====================================================================*/
.cleaning_type_form {
  width: 100%;
  border: 0;
  padding: 0;
}
/* ====================================================================
                Dashboard Cleaning Type CSS Ends Here
=====================================================================*/

/* ====================================================================
                    Dashboard Employee CSS Starts Here
=====================================================================*/

.remove-employee-content{
	max-width: 500px;
    width: 90%;
    background-color: #fff;
    border-radius: 8px;
    padding: 24px;
    margin: auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.checkbox-filter{
	color: var(--Text-700, #4b5563);
  font-family: var(--font-inter);
	font-size: 0.9rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.employee-action-btns .fa-pen-to-square {
  color: #6B7280;     
  font-size: 18px;   
  transition: color 0.3s ease;
}

.search-icon {
  width: 20px;
  height: 20px;
  color: white; 
}

.dashboard_outlet_search {
  display: flex;
  gap: 1rem; /* spacing between search box and add button */
  align-items: stretch; /* all children will have the same height */
  flex-wrap: wrap; /* wraps on smaller screens */
}

.search_box {
  display: flex;
  flex: 1; /* takes available width */
}

/* .input_field {
  flex: 1;
  padding: 0.5em;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px 0 0 4px;
} */

.search_button,
.add_customer_btn {
  padding: 0.4rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  border: none;
  /* background-color: #007bff; */
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* Make sure search button has rounded edge on the right */
.search_button {
  border-radius: 8px;
}

/* Optional: make both buttons same height */
.search_button,
.add_customer_btn {
  height: 100%;
}

/* ====================================================================
                    Dashboard Employee CSS Ends Here
=====================================================================*/
.search_dropdown_box {
  position: absolute;
  top: 42px;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  z-index: 99;
  max-height: 110px;
  overflow-y: auto;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  font-size: 14px;
}

.search_dropdown_box div {
  padding: 8px 12px;
  cursor: pointer;
}

.search_dropdown_box div:hover {
  background-color: #f5f5f5;
}



.multi_select_dropdown {
  position: relative;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px 10px;
  background-color: #fff;
  font-size: 14px;
  width: 100%;
  max-height: 150px;
  overflow-y: auto;
}

.multi_select_label {
  font-weight: bold;
  margin-bottom: 5px;
}

.multi_select_options {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.multi_select_option {
  display: flex;
  align-items: center;
  gap: 8px;
}
#additionalChargesDropdown {
  cursor: pointer;
    font-size: 0.8rem;
}


.view-note-btn, .business-edit-btn, .customer-edit-btn {
    cursor: pointer;
}

.form-cancel-btn {
	background-color: rgb(253, 100, 100)
}
.update_amount_fields {
    display: flex;
    align-items: center; /* Align items vertically centered */
    gap: 1rem;
    width: 100%;
}

.update_amount_group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center; /* Center input field */
}

.update_amount_group input {
    border: 1px solid #e5e7eb;
    padding: 0.75rem 1.5rem;
    width: 100%;
    border-radius: 0.5rem;
    color: #111827;
    font-family: var(--font-inter);
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
}

.update_amount_group label {
    font-size: 12px;
    color: #6b7280;
}

.operator_group {
    display: flex;
    align-items: center; /* Center the operator */
    justify-content: center;
}

.operator {
    font-size: 2rem; /* Adjust the size of the operator */
    color: #4b5563;
    padding: 0 10px;
}


.orders-status-select {
	min-width: 200px;
}

.ordersearch_input_field {
	border: 1px solid #e5e7eb;
    padding: 0.45rem 1.5rem;
    width: 100%;
    border-radius: 0.5rem;
    color: #4b5563;
    font-family: var(--font-inter);
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
}


.show_pickup {
    background: #fff;
    color: #16b843; /* Text color */
    font-size: 16px; /* Font size */
    cursor: pointer; /* Changes cursor to pointer to indicate clickability */
    transition: background 0.3s ease, color 0.3s ease; /* Smooth transition for hover */
}

/* Hover effect: background turns green */
.show_pickup:hover {
    background: #16b843; /* Green background */
    color: #fff; /* White text color on hover */
    border-color: #16b843; /* Optional: Change border color to green */
}

.view-note, .item-label-print{
	text-align: center
}

.view-note:hover, .item-label-print:hover{
	color: #28A745;
	cursor: pointer;
}

.transaction_search{
	align-items: center;
	display: flex;
	justify-content: space-between;
    gap: 0.5rem;
}

.transaction-info-value {
    color: var(--Text-700, #4b5563);
    font-family: var(--font-inter);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    height: 17px;
}

.invoice-details-content{
	    max-width: 1000px;
}

#invoice-orders-table .order-items-header-cell{
	text-align: center;
}

.invoice-order-cell{
	text-align: center;
}
#invoiceSummaryPayNowModal .order-summary-row{
	font-size: 14px;
}

select:disabled {
  background-color: rgba(239, 239, 239, 0.3) !important;
}

.input_wrapper {
  position: relative;
  width: 100%;
}

.ordersearch_input_field {
  padding-right: 3rem; /* make room for the icon inside */
  box-sizing: border-box;
}

.search_button_inside {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  padding: 0;
  height: 24px;
  width: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search_button_inside .search-icon {
  color: #16b843; /* or your brand color */
  width: 20px;
  height: 20px;
}

/* #mainContent.disabled-overlay {
  opacity: 0.3;
  filter: blur(1px);
} */

#mainContent.disabled-overlay * {
  pointer-events: none;
}

#mainScreenContent {
  /* background-color: rgba(0, 255, 67, 0.05); light green */
}
#sidebarMain{
	position: relative;
    z-index: 10;
}

.quantity_group {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  flex: 1;
  max-width: 50%;
  justify-content: left;
}
#employee-table .orders-table-body-cell{
	    padding: 0.3rem;
    color: var(--Text-600, #6b7280);
    font-family: var(--font-inter);
    font-size: 0.9rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#servicetypes-table .orders-table-body-cell{
	    padding: 0.3rem;
    color: var(--Text-600, #6b7280);
    font-family: var(--font-inter);
    font-size: 0.9rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#items-table .orders-table-body-cell{
	    padding: 0.3rem;
    color: var(--Text-600, #6b7280);
    font-family: var(--font-inter);
    font-size: 0.9rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
#additional-charges-table .orders-table-body-cell{
	    padding: 0.3rem;
    color: var(--Text-600, #6b7280);
    font-family: var(--font-inter);
    font-size: 0.9rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#fixed-charges-table .orders-table-body-cell{
	    padding: 0.3rem;
    color: var(--Text-600, #6b7280);
    font-family: var(--font-inter);
    font-size: 0.9rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.amount-paid{
	align-items: center;
    gap: 65%;
    display: flex;
    justify-content: space-between;
}

#orderNotes::placeholder {
  color: gray;
}

.modal-open #mainScreenContent {
  filter: blur(1px);
  /* pointer-events: none;
  position: relative; */
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(215 215 215 / 20%);
  z-index: 1;
  pointer-events: none;
}

.modal-open #mainScreenContent::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  
  background: rgba(255, 255, 255, 0.4); /* semi-transparent white overlay */
  z-index: 1;
  pointer-events: none;
}


#pageheader,
#sideMenu {
  position: relative;
  z-index: 1061;
}

#bodyModals .modal {
  z-index: 1062 !important;
}
#bodyModals .modal-backdrop {
  z-index: 1060 !important;
}

.modal-backdrop.show {
	opacity: 0.4 !important; /* slightly stronger backdrop */
}

.modal-login-active .modal:not(#loginModal) {
	filter: grayscale(100%) opacity(0.3);
	pointer-events: none;
}
/* #pageLoader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: white;
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: center;
}

.spinner {
	width: 50px;
	height: 50px;
	border: 5px solid #f3f3f3;
	border-top: 5px solid #3498db;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
 */
#pageLoader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
    background-color: rgb(215 215 215 / 20%);
	z-index: 9999;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.loading-text {
	margin-top: 14px;
	font-size: 16px;
	color: #0077b6;
	font-family: sans-serif;
}

.chart-container { width: 80%; margin: 30px auto; }

/* canvas {
  max-width: 100%;
  height: auto;
} */

.chart-small {
    /* width: 900px !important; */
    height: 900px !important;
}

.circular-progress-text-value {
  font-size: 18px;
  fill: #333;
  font-weight: bold;
}

.circular-progress-text-subtext {
  font-size: 14px;
  fill: #666;
}

.chart-row {
  display: flex;
  justify-content: space-around;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.chart-row-single {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}

.chart-box {
  width: 45%;
  min-width: 300px;
}


/* .styled-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}
.styled-table th, .styled-table td {
  border: 1px solid #ccc;
  padding: 8px 12px;
  text-align: center;
}
.styled-table th {
  background-color: #f2f2f2;
}
 */
 
 .table-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 30px;
}

.table-column {
  flex: 1;
  min-width: 45%;
}

.single-table {
  width: 100%;
}

.styled-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.styled-table th,
.styled-table td {
  border: 1px solid #ccc;
  padding: 8px 12px;
  text-align: center;
}

.styled-table th {
  background-color: #f2f2f2;
}
 
#message-container {
    position: fixed;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    width: 450px;
    text-align: center;
    pointer-events: none; /* Allow clicks through if needed */
}

.alert {
    padding: 16px 20px;
    margin: 10px auto;
    border-radius: 6px;
    font-size: 16px;
    font-weight: bold;
    position: relative;
    display: none;
    pointer-events: auto; /* Allow close button to be clickable */
}

.success-alert {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    opacity: 0.8
}

.error-alert {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    opacity: 0.8
}

.close-btn {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 20px;
    cursor: pointer;
}

#message-container-2 {
    position: fixed;
    top: 7%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    width: 400px;
    text-align: center;
    pointer-events: none; /* Allow clicks through if needed */
}

.message-text {
  white-space: pre-line;
}

.orders-status.completed {
    background-color: rgba(107, 33, 168, 0.1);
    color: #6b21a8;
}
.orders-status {
    min-width: 200px;
    width: 120px;
    padding: 8px;
    border-radius: 6px;
    border: none;
    outline: none;
    cursor: pointer;
    font-family: "Manrope", sans-serif;
    font-size: 14px;
}

.order-pair {
    display: flex;
    /* align-items: center; */
    gap: 8px;
    /* margin-bottom: 6px; */
}

.order-info-label,
.order-info-value {
    white-space: nowrap;
}

#orderStatus{
	margin-top: 1rem;
}

.order-action-btn {
    display: block;
    width: 100%;
    padding: 10px 16px;
    margin-bottom: 8px;
    background-color: #10b981; /* Tailwind's green-500 */
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font-inter, 'Inter', sans-serif);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease;
}

.order-action-btn:hover {
    background-color: #059669; /* Darker green on hover */
    transform: translateY(-1px);
}

.order-action-btn:active {
    background-color: #047857;
    transform: scale(0.98);
}

.chart-row-3 {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin: 20px 0;
  flex-wrap: wrap;
}

.chart-box-3 {
  flex: 1 1 30%;
  min-width: 300px;
  max-width: 33%;
  background-color: #f9f9f9;
  padding: 10px;
  border-radius: 12px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.text-center{
	text-align: center;
}
.header-active{
	color: var(--color-primary) !important;
}

.rack-cell {
	cursor: pointer;
	position: relative;
}

.order-details-content-transactions {
  background-color: white;
  border-radius: 8px;
  width: 50%;
  /* max-width: 30%; */
  max-height: 80%;
  overflow: hidden;
}

.amount-input {
    width: 100%;
    border: none;
    background: transparent;
    outline: none;
    font-size: inherit;
    font-family: inherit;
    text-align: right;
    pointer-events: none; /* disables click/focus unless editable */
}

.amount-input.editable {
    pointer-events: auto;
    background: white;
    border: 1px solid #ccc;
}

.paid-amount {
	cursor: pointer;
	position: relative;
}

.order-view-column {
	display: flex;
	justify-content: center;
}

.status-option.received {
  background-color: rgba(0, 123, 255, 0.1);
  color: #007bff;
}

.status-option.inprogress {
  background-color: rgba(255, 159, 67, 0.1);
  color: #ff9f43;
}

.status-option.cleaning-done {
  background-color: rgba(40, 167, 69, 0.1);
  color: #28a745;
}

.status-option.ready-to-pickup {
  background-color: rgba(23, 162, 184, 0.1);
  color: #17a2b8;
}

.status-option.completed {
background-color: rgba(111, 66, 193, 0.1);
  color: #6f42c1;
}

.orders-status-select.received {
  background-color: rgba(0, 123, 255, 0.1);
  color: #007bff;
}

.orders-status-select.inprogress {
  background-color: rgba(255, 159, 67, 0.1);
  color: #ff9f43;
}

.orders-status-select.cleaning-done {
  background-color: rgba(40, 167, 69, 0.1);
  color: #28a745;
}

.orders-status-select.ready-to-pickup {
  background-color: rgba(23, 162, 184, 0.1);
  color: #17a2b8;
}

.orders-status-select.completed {
  background-color: rgba(111, 66, 193, 0.1);
  color: #6f42c1;
}

.status-option.paid {
  background-color: rgba(40, 167, 69, 0.1);
  color: #28a745;
}

.status-option.pending {
   background-color: rgba(255, 159, 67, 0.1);
  color: #ff9f43;
}

.invoices-status-select.pending {
  background-color: rgba(255, 159, 67, 0.1);
  color: #ff9f43;
}

.invoices-status-select.paid {
  background-color: rgba(40, 167, 69, 0.1);
  color: #28a745;
}


/* ====================================================================
                        Dashboard Dropdown CSS Starts Here
=====================================================================*/

:root{
  --ctrl-w: 8rem;
  --ctrl-h: 2rem;
  --ctrl-pad-x: .5rem;
  --ctrl-radius: 8px;
  --ctrl-fs: .8rem;
  --ctrl-border: 1px solid var(--Text-200, #e5e7eb);
  --ctrl-color: var(--Text-700, #4b5563);

  --menu-w: 10rem;
  --menu-max: 32rem;

  --caret-w: 12px;
  --caret-h: 8px;
  --caret-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='currentColor' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* native select (Color) */
.filter_select{
  width: var(--ctrl-w);
  height: var(--ctrl-h);
  padding: 0 var(--ctrl-pad-x);
  padding-right: 1.6rem;
  border-radius: var(--ctrl-radius);
  border: var(--ctrl-border);
  color: var(--ctrl-color);
  font: 400 var(--ctrl-fs)/normal var(--font-Manrope, inherit);
  box-sizing: border-box;
  cursor: pointer;
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image: var(--caret-svg);
  background-repeat: no-repeat;
  background-position: right .55rem center;
  background-size: var(--caret-w) var(--caret-h);
}
.filter_select::-ms-expand{ display:none; }

/* custom selects (Pattern/Print) */
.img-select-wrap{
  position: relative;
  display: inline-block;
  width: var(--ctrl-w);
}
.img-select-wrap select{ display:none; }

.img-select-wrap .img-btn{
  position: relative;
  width: 100%;
  height: var(--ctrl-h);
  padding: 0 var(--ctrl-pad-x);
  padding-right: 1.6rem;
  border-radius: var(--ctrl-radius);
  border: var(--ctrl-border);
  color: var(--ctrl-color);
  font: 400 var(--ctrl-fs)/normal var(--font-Manrope, inherit);
  background: #fff;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  opacity: 1;
  filter: none;
}
.img-select-wrap .img-btn::after{
  content:"";
  position: absolute;
  right: .55rem; top: 50%;
  width: var(--caret-w); height: var(--caret-h);
  transform: translateY(-50%);
  background-image: var(--caret-svg);
  background-repeat: no-repeat;
  background-size: var(--caret-w) var(--caret-h);
  pointer-events: none;
}
/* neutralize any legacy carets */
.img-select-wrap .img-btn > i,
.img-select-wrap .img-btn .caret,
.img-select-wrap .img-btn::before{ display:none !important; }

/* dropdown menu */
.img-menu{
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 6px);
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  padding: 6px;
  z-index: 1000;
  display: none;
  max-height: 260px;
  overflow: auto;
  width: 100%;
}
.img-menu.open{ display:block; }

/* wider menu for Pattern/Print only */
.pattern_select + .img-btn + .img-menu,
.print_select  + .img-btn + .img-menu{
  right: auto;
  width: auto;
  min-width: var(--menu-w);
  max-width: min(90vw, var(--menu-max));
  white-space: normal;
}

/* option rows */
.img-opt{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
}
.img-opt:hover{ background:#f5f5f5; }

.img-swatch{
  width: 48px; height: 28px;
  border-radius: 4px;
  border: 1px solid #ccc;
  background-size: cover;
  background-position: center;
  flex: 0 0 48px;
}
.img-name{
  font-size: 14px;
  color: #222;
}

/* keep each filter cell aligned */
.added_items_list_item_filter_item{
  flex: 0 0 var(--ctrl-w);
}


/* ====================================================================
                        Dashboard Dropdown CSS Ends Here
=====================================================================*/