/*!
Script: Restro SaaS
Author: Gravity Infotech
Support: infotechgravity@gmail.com
Version: 4.2
*/

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap');

:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-black: #000;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;

  /*  bs-primary  */

  --bs-primary: #001529;

  /*  bs-secondary  */

  --bs-secondary: #18A293;



  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-primary-rgb: 0, 21, 41;
  --bs-secondary-rgb: 24, 162, 147;
  --bs-success-rgb: 25, 135, 84;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark-rgb: 33, 37, 41;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #495057;
  --bs-body-bg: #f8f8fb;
  --bs-border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-2xl: 2rem;
  --bs-border-radius-pill: 50rem;
  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: #374366;
  --bs-code-color: #d63384;
  --bs-highlight-bg: #fff3cd;
  --bs-font-sans-serif: 'Outfit', sans-serif !important;
  --bs-box-shadow: 0 0.75rem 1.5rem rgb(18 38 63 / 3%);
}

body {
  margin: 0;
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  font-weight: var(--bs-body-font-weight);
  line-height: var(--bs-body-line-height);
  color: var(--bs-body-color);
  text-align: var(--bs-body-text-align);
  background-color: var(--bs-body-bg);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overflow-y: hidden;
}

.direction-ltr {
  direction: ltr;
}

.direction-rtl {
  direction: rtl;
}

.justify-items-end {
  justify-items: end !important;
}

.justify-items-center {
  justify-items: center !important;
}

.fs-7 {
  font-size: 14px !important;
}

.fs-8 {
  font-size: 12px !important;
}

.fw-700 {
  font-weight: 700 !important;
}

.fw-600 {
  font-weight: 600 !important;
}

.fw-500 {
  font-weight: 500 !important;
}

.pages-title {
  font-weight: 700;
  margin-bottom: 15px;
  color: #000;
}

.w-100vw {
  width: 100vw;
}

.h-100vh {
  height: 100vh;
}

.h-fit-content {
  height: fit-content;
}

.box-shadow {
  box-shadow: 0 6px 30px rgb(182 186 203 / 30%);
}

.d-content {
  display: contents;
}

.object-fit-cover {
  object-fit: cover;
  object-position: center;
}

.object-fit-contain {
  object-fit: contain;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

.btn-rounded {
  border-radius: 30px;
}

.form-group,
*:focus {
  outline: none !important;
  box-shadow: none !important;
}

input::placeholder {
  font-size: 14px;
}

ul {
  list-style: outside none none;
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

label {
  font-size: 15px;
  color: #000;
  font-weight: 500;
  word-break: break-all;
}

.form-control {
  font-size: 15px;
  /* padding: 10px 15px; */
  font-weight: 500;
  border-radius: 21px;
  background-color: transparent;
}

.form-select {
  font-size: 15px;
  /* padding: 10px 15px; */
  font-weight: 500;
  color: lightslategray;
  border-radius: 21px;
}

.form-group {
  margin-bottom: 10px;
}

.btn {
  padding: 10px;
}

.btn-secondary:hover {
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
}

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

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.accordion-button:not(.collapsed) {
  color: var(--bs-accordion-active-color);
  box-shadow: inset 0 calc(var(--bs-accordion-border-width) * -1) 0 var(--bs-accordion-border-color);
  border-bottom-left-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
}

.form-switch-success .form-check-input:checked {
  background-color: var(--bs-success);
  border-color: var(--bs-success);
}

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

.cursor-pointer {
  cursor: pointer;
}

.cursor-inherit {
  cursor: inherit !important;
}

.dn {
  display: none;
}

.hw-70 {
  width: 70px;
  height: 70px;
}

.h-40 {
  height: 40px;
}

.overflow-auto {
  overflow: auto;
}

/* Auth Pages */
.bg-primary-light {
  background-color: rgba(var(--bs-secondary-rgb), 0.25);
}

.social-list-item {
  height: 2rem;
  width: 2rem;
  line-height: calc(2rem - 0px);
  display: block;
  border-radius: 50%;
  color: var(--bs-white);
  text-align: center;
  -webkit-transition: all .4s;
  transition: all .4s;
}

.bg-facebook {
  background-color: #1773EA;
}

.bg-google {
  background-color: #d24639;
}

/* Header */
.page-topbar {
  position: sticky;
  top: 0;
  /* right: 0; */
  left: 0;
  z-index: 1030;
  background-color: var(--bs-white);
}

.page-topbar .navbar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 16px;
}

.page-topbar .navbar-header .navbar-header-logo {
  background-color: var(--bs-primary);
  padding: 0 1.5rem;
  text-align: center;
  width: 250px;
}

.page-topbar .navbar-header .navbar-header-logo a {
  line-height: 70px;
  color: var(--bs-white);
}

.page-topbar .navbar-header .header-item {
  position: relative;
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  border: 0;
  color: #555b6d;
}

.page-topbar .navbar-header .header-item img {
  width: 40px;
  height: 40px;
  border: var(--bs-border);
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}

/* ===================== POS: Wizard "Confirmar pedido" ===================== */
/* (Rediseño de ordernow.blade.php: destino / cliente / cobro en pasos) */

/* Dialogo mas ancho y con mas aire -- pensado para tablet, no para un
   popup chico de escritorio. Sombra suave en vez de borde duro, esquinas
   bien redondeadas para que se sienta mas moderno y menos "de formulario". */
.pos-wizard-dialog{
  max-width: min(880px, 94vw);
}
.pos-wizard-dialog .modal-content{
  border: none;
  border-radius: 26px;
  box-shadow: 0 24px 64px rgba(0, 21, 41, .18);
  overflow: hidden;
}
.pos-wizard-dialog .modal-header{
  padding: 26px 30px 14px 30px;
  border-bottom: none;
}
.pos-wizard-dialog .modal-body{
  padding: 6px 30px 26px 30px;
}
.pos-wizard-dialog .modal-footer{
  padding: 18px 30px 26px 30px;
  border-top: none;
}
.pos-wizard-dialog #wizardTitle{
  font-size: 23px !important;
}
.pos-wizard-dialog .wizard-progress{
  max-width: 300px;
}
.pos-wizard-dialog .wizard-progress .wp-dot{
  height: 6px;
}

.co-step{
  background:#fbfbfc;
  border:1px solid var(--bs-border-color, #e9e9e9);
  border-radius:14px;
  padding:16px;
  margin-bottom:14px;
}
.pos-wizard-dialog .co-step{
  background: #f6f7f9;
  border: none;
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 18px;
}
.pos-wizard-dialog .co-step p,
.pos-wizard-dialog .co-step label{
  font-size: 15px !important;
}
.pos-wizard-dialog .form-control,
.pos-wizard-dialog .form-select{
  font-size: 15px !important;
  padding: 14px 16px !important;
  border-radius: 12px !important;
  border-color: #e2e4e9 !important;
}
.pos-wizard-dialog textarea.form-control{
  border-radius: 16px !important;
}

.co-summary-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--bs-primary);
  color:#fff;
  border-radius:12px;
  padding:12px 16px;
  margin-bottom:14px;
  cursor:pointer;
  font-size:13px;
  font-weight:600;
}
.pos-wizard-dialog .co-summary-bar{
  border-radius: 16px;
  padding: 16px 22px;
  font-size: 15px;
  margin-bottom: 18px;
}
.wizard-progress{display:flex; gap:6px; max-width:220px;}
.wizard-progress .wp-dot{
  height:5px;
  flex:1;
  border-radius:999px;
  background:#e6e8ec;
}
.wizard-progress .wp-dot.done{background:var(--bs-secondary);}
.wizard-progress .wp-dot.current{background:var(--bs-primary);}

.destino-btn{
  border:1.5px solid var(--bs-border-color, #e9e9e9);
  background:#fff;
  border-radius:14px;
  padding:16px 8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:600;
  color:#1b1b23;
}
.pos-wizard-dialog .destino-btn{
  border-radius: 18px;
  padding: 26px 10px;
  font-size: 15px;
  gap: 10px;
}
.destino-btn i{font-size:22px;}
.pos-wizard-dialog .destino-btn i{font-size:30px;}
.destino-btn[data-destino="llevar"] i{color:#e8973a;}
.destino-btn[data-destino="mesa"] i{color:var(--bs-secondary);}
.destino-btn[data-destino="delivery"] i{color:#3b7dde;}
.destino-btn.active{
  border-color:var(--bs-primary);
  background:var(--bs-primary);
  color:#fff;
}
.destino-btn.active i{color:#7fd9cc !important;}

.mesa-pick-btn{
  border:1.5px solid var(--bs-border-color, #e9e9e9);
  background:#fff;
  border-radius:10px;
  padding:10px 4px;
  font-size:13px;
  font-weight:600;
  color:#1b1b23;
}
.pos-wizard-dialog .mesa-pick-btn{
  border-radius: 14px;
  padding: 15px 6px;
  font-size: 15px;
}
.mesa-pick-btn.active{
  border-color:var(--bs-secondary);
  background:rgba(24,162,147,.12);
  color:var(--bs-secondary);
}

.pos-wizard-dialog #wizardBackBtn,
.pos-wizard-dialog #wizardNextBtn{
  padding: 16px !important;
  font-size: 16px !important;
  border-radius: 14px !important;
}

/* ===================== POS: pantalla principal (buscador / categorias / tarjetas) ===================== */

/* Buscador -- pill redondeado, con foco en teal en vez del cuadro plano de antes */
.pos-card-input {
  background-color: #fff;
  border: 1.5px solid #e6e8ec !important;
  border-radius: 999px !important;
  padding: 8px 16px !important;
  transition: border-color .15s, box-shadow .15s;
}
.pos-card-input:focus-within {
  border-color: var(--bs-secondary) !important;
  box-shadow: 0 0 0 3px rgba(24, 162, 147, .14);
}
.pos-card-input i {
  color: #9aa1ad;
}
.search-input {
  font-size: 15px;
  padding: 4px 6px;
}
.possearch-button,
a.btn.btn-secondary.rounded-5 {
  border-radius: 999px !important;
  padding: 12px 26px !important;
  font-weight: 600;
}

/* Caja que envuelve buscador + categorias -- ahora clara (sin la franja
   navy que quedaba de la Fase 0), apenas separada del fondo con un
   borde sutil, como en el mockup validado. */
.pos-categorys-light {
  background-color: #fff !important;
  border: 1px solid #eceef1;
}

/* Categorias -- chips tipo pill, mas aire, estado activo mas claro.
   Ahora viven sobre fondo claro (no navy), asi que necesitan borde
   propio para notarse -- antes el borde era transparente a proposito
   porque el contraste lo daba el fondo oscuro. */
.pos-categorys .scroll-wrapper .cats,
.pos-categorys .scroll-wrapper .cats:focus {
  border-radius: 999px !important;
  padding: 10px 16px;
  font-size: 14px;
  background-color: #fff;
  border: 1.5px solid #e6e8ec !important;
  color: #1b1b23 !important;
  transition: background-color .15s, color .15s, border-color .15s;
}
.pos-categorys .scroll-wrapper ul li .active {
  border-radius: 999px !important;
  border-color: var(--bs-primary) !important;
}
.pos-categorys .scroll-wrapper ul li .active .categoryimg i,
.pos-categorys .scroll-wrapper ul li .active .categoryimg {
  color: #7fd9cc !important;
}
.categoryimg img {
  border-radius: 50%;
}
/* Modal "personalizar producto" (variantes/extras) en el POS -- ancho
   fijo comodo, no depende de cuanto contenido tenga (antes, un producto
   sin variantes se veia como un popup chiquito). */
#additems .modal-dialog {
  width: min(520px, 92vw);
  max-width: min(520px, 92vw);
}
#additems .modal-body {
  padding: 20px 24px 24px 24px !important;
}
/* Estado activo del chip de categoria -- selector compuesto para que
   gane siempre, pase lo que pase con el orden del resto del CSS (antes
   el texto se quedaba oscuro sobre fondo navy y no se leia). */
.pos-categorys .scroll-wrapper .cats.active,
.pos-categorys .scroll-wrapper .cats.active:focus {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: #fff !important;
}
.pos-categorys .scroll-wrapper .cats.active i,
.pos-categorys .scroll-wrapper .cats.active span {
  color: #fff !important;
}

/* ===================== POS: carrito lateral -- letra mas grande ===================== */
/* (aplica tanto al panel de escritorio .righ-side como al offcanvas de
   tablet/mobile #rightsidebar, para que ambos se lean igual de bien) */
.righ-side .product-text-size,
#rightsidebar .product-text-size {
  font-size: 17px !important;
}
.righ-side table thead th,
#rightsidebar table thead th {
  font-size: 16px !important;
}

/* Stepper de cantidad (+/-) y boton de eliminar del carrito -- eran
   demasiado chicos para tocar con el dedo en una tablet (22px y
   btn-sm). Se agrandan a un tamano real de touch target. */
.righ-side .price-range .circle,
#rightsidebar .price-range .circle {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  font-size: 20px;
}

.righ-side .price-range input[type="text"],
#rightsidebar .price-range input[type="text"] {
  font-size: 22px;
  width: 52px;
  text-align: center;
}

.righ-side table td .btn-danger.hov,
#rightsidebar table td .btn-danger.hov {
  width: 55px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  padding: 0;
}

.righ-side table td,
#rightsidebar table td {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}
.righ-side .total-sec h6,
.righ-side .total-sec span,
#rightsidebar .total-sec h6,
#rightsidebar .total-sec span {
  font-size: 15px !important;
}
.righ-side .pay-total h6,
.righ-side .pay-total span,
#rightsidebar .pay-total h6,
#rightsidebar .pay-total span {
  font-size: 18px !important;
}
.righ-side .discount-input,
.righ-side #apply_discount,
.righ-side #remove_discount,
#rightsidebar .offcanvas-discount-input,
#rightsidebar #offcanvas_apply_discount,
#rightsidebar #offcanvas_remove_discount {
  font-size: 15px !important;
  padding: 10px 14px !important;
}
.righ-side .payment-option .btn,
#rightsidebar .payment-option .btn {
  font-size: 16px !important;
  padding: 13px !important;
}
.righ-side .price-range input,
#rightsidebar .price-range input {
  font-size: 15px !important;
}

/* Tarjetas de producto -- box de imagen consistente (mismo alto sin
   importar el tamano real de la foto), boton de agregar circular teal,
   precio en navy, y una elevacion sutil al pasar el dedo/mouse. */
.pos-menu .card {
  transition: transform .12s ease, box-shadow .12s ease;
  border-radius: 18px !important;
  overflow: hidden;
}
.pos-menu .card:active {
  transform: scale(.98);
}
.pos-img {
  aspect-ratio: 1 / 0.85;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(135deg, #f4f5f7, #eceef1);
  margin-bottom: 10px;
}
.pos-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
  margin-bottom: 0;
}
.pos-menu .pro-title {
  font-size: 14px;
  margin-bottom: 6px;
}
.pos-menu .pro-price {
  color: var(--bs-primary) !important;
  font-weight: 700;
}
.poscart {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  transition: transform .1s ease;
}
.poscart:active {
  transform: scale(.92);
}

/* Estado "ya esta en el carrito": borde y fondo teal suave en vez del
   borde gris generico, + badge con la cantidad (arriba a la derecha
   de la foto), igual que en el mockup. */
.pos-menu .active {
  border: 1.5px solid var(--bs-secondary) !important;
  border-radius: 18px !important;
  background-color: rgba(24, 162, 147, .05);
}
.pos-qty-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--bs-secondary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}
.item-stock {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  background: var(--bs-danger, #dc3545);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 999px;
}

/* Descripcion corta en la tarjeta (mismo patron que Carta en la web) */
.pos-item-desc {
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-top: 2px;
}

/* ===================== POS mobile: barra fija de carrito ===================== */
/* Unico punto de entrada al carrito en mobile/tablet-vertical -- antes
   habia un carrito "fantasma" (footer sin lista) apilado debajo de la
   grilla, ademas del offcanvas -- ahora es solo esta barra. */
.pos-mobile-cart-bar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 14px;
  z-index: 1040;
  background: var(--bs-primary);
  color: #fff;
  border: none;
  border-radius: 16px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 10px 24px rgba(0, 21, 41, .28);
}
.pos-mobile-cart-bar .pmc-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pos-mobile-cart-bar .pmc-total {
  font-weight: 800;
  font-size: 15px;
  color: #7fd9cc;
}
@media (max-width: 991px) {
  .pos-menu {
    padding-bottom: 130px;
  }
}

/* Confirmar pedido -- en telefonos angostos el padding grande y los 3
   botones de destino en una fila quedaban apretados; los achico un
   poco solo en esa franja de ancho. */
@media (max-width: 480px) {
  .pos-wizard-dialog .modal-header {
    padding: 20px 18px 10px 18px;
  }
  .pos-wizard-dialog .modal-body {
    padding: 6px 18px 20px 18px;
  }
  .pos-wizard-dialog .modal-footer {
    padding: 14px 18px 20px 18px;
  }
  .pos-wizard-dialog #wizardTitle {
    font-size: 19px !important;
  }
  .pos-wizard-dialog .co-step {
    padding: 16px;
  }
  .pos-wizard-dialog .destino-btn {
    padding: 16px 4px;
    font-size: 12px;
  }
  .pos-wizard-dialog .destino-btn i {
    font-size: 22px;
  }
  .pos-wizard-dialog .mesa-pick-btn {
    padding: 10px 4px;
    font-size: 13px;
  }
}

/* Sidebar: Cerrar sesión (movido desde el header eliminado) -- discreto,
   no compite visualmente con el resto del menú. */
.sidebar .navbar-nav .nav-item .logout-link {
  color: rgba(var(--bs-white-rgb), 0.55);
}

.sidebar .navbar-nav .nav-item .logout-link:hover {
  color: rgba(var(--bs-white-rgb), 0.9);
  background: transparent !important;
}

/* Header minimo (solo tablet/mobile) -- reemplaza el header general.
   En desktop (>=lg) no se renderiza nada (d-lg-none en el <header>). */
.page-topbar-minimal {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 1030;
  background-color: var(--bs-white);
  padding: 10px 16px;
  border-bottom: 1px solid var(--bs-border-color, #e9e9e9);
}

.page-topbar-minimal .navbar-toggler {
  background: transparent;
  border: 0;
  padding: 4px 8px;
  color: #1b1b23;
}

.sidebar .navbar-nav .nav-item .nav-link {
  color: #1b1b23;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 40px;
}

.sidebar .navbar-nav .nav-item .nav-link:hover {
  background: linear-gradient(141.55deg, var(--bs-white) 3.46%, var(--bs-white) 99.86%), var(--bs-white);
  color: var(--bs-primary);
  transition: .3s ease-in-out;
}

.sidebar .navbar-nav .nav-item .nav-link.active {
  background: linear-gradient(141.55deg, var(--bs-white) 3.46%, var(--bs-white) 99.86%), var(--bs-white);
  color: var(--bs-primary);
}

/* Default */
/* .main-content {
  margin-left: 16.5rem;
} */

.page-content {
  padding: calc(0px + 24px) calc(36px / 2) 49px calc(36px / 2);
}

/* Dashboard page */
.dashboard-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-icon {
  width: 3rem;
  height: 3rem;
  background-color: var(--bs-secondary);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--bs-white);
}

/* User Page */
.search-box {
  display: inline-block;
  padding: 0 10px;
}

.search-box .form-control {
  border-radius: 30px;
  padding-left: 40px;
}

.search-box .search-icon {
  font-size: 16px;
  position: absolute;
  left: 13px;
  top: 0;
  line-height: 38px;
}

.available-btn {
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 5%;
}

/* Setting Page */
.settings .card-sticky-top {
  position: sticky;
  top: 80px;
  z-index: 1020;
}

.settings .list-item-secondary.active,
.settings .list-item-secondary.active a {
  z-index: 2;
  color: var(--bs-white);
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
}

.settings .list-group-item .tab:hover,
.settings .list-group-item .tab.active {
  color: var(--bs-white);
}

.payments .card .cod-card,
.payments .card .wallet-card {
  padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
  display: flex;
  justify-content: space-between;
}

/* Pricing plan checkout page */
.stripe-form #card-element .__PrivateStripeElement iframe {
  height: 40px !important;
  width: 100% !important;
  border: var(--bs-card-border-width) solid var(--bs-card-border-color);
  border-radius: var(--bs-card-border-radius);
  display: block;
  padding: 10px;
  margin-bottom: 16px;
}

/* Business Page */
.contact-info-modal {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr));
}

.contact-info-item {
  border: var(--bs-border);
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin: 5px;
  outline: none !important;
  overflow: visible;
  padding: 1rem;
  text-align: center;
  transition: .3s;
  width: auto;
  box-shadow: var(--bs-box-shadow);
}

.contact-info-modal .contact-info-item:hover {
  background-color: #e6ecfd;
}

.contact-info-modal .contact-info-item i {
  font-size: 22px;
  margin: 5px 0;
}

#service_repeater .img-overlay,
#services_card .img-overlay,
#testimonials_info .img-overlay,
#testimonial_repeater .img-overlay {
  position: absolute;
  top: 2%;
  right: 2%;
}

#reorder_section ul.list-group li.list-group-item {
  cursor: move;
}

/* Switch On/Off */
.checkbox-switch {
  display: none;
}

.switch {
  align-items: center;
  background-color: gray;
  border-radius: 500px;
  cursor: pointer;
  display: flex;
  height: 30px;
  justify-content: space-between;
  position: relative;
  user-select: none;
  width: 65px;
}

.checkbox-switch:checked~.switch {
  background-color: var(--bs-primary);
}

.checkbox-switch:not(:checked)~.switch {
  background-color: gray;
}

.switch__left,
.switch__right {
  color: white;
  font-size: small;
  text-transform: uppercase;
}

.checkbox-switch:checked~.switch .switch__left {
  visibility: hidden;
}

.checkbox-switch:not(:checked)~.switch .switch__right {
  visibility: hidden;
}

.switch__circle {
  height: 30px;
  padding: 5px;
  position: absolute;
  transition: all 0.1s linear;
  width: 30px;
}

.switch__circle-rtl {
  height: 30px;
  padding: 5px;
  position: absolute;
  transition: all 0.1s linear;
  width: 30px;
}

.checkbox-switch:checked~.switch .switch__circle {
  left: 0;
  right: calc(100% - 30px);
}

.checkbox-switch:checked~.switch .switch__circle-rtl {
  left: calc(100% - 30px);
  right: 0;
}

.checkbox-switch:not(:checked)~.switch .switch__circle {
  left: calc(100% - 30px);
  right: 0;
}

.checkbox-switch:not(:checked)~.switch .switch__circle-rtl {
  right: calc(100% - 30px);
  left: 0;
}

.switch__circle-inner {
  background-color: white;
  border-radius: 50%;
  display: block;
  height: 100%;
  width: 100%;
}

.hw-50 {
  width: 50px;
  height: 50px;
}

.service-image {
  height: 150px;
}

/* extra....apexa */
/* FOR SIDEBAR -- START */
.sidebar .navbar-nav {
  height: 100vh;
  overflow-y: auto;
  padding-bottom: 130px;
}

.sidebar .navbar-nav::-webkit-scrollbar {
  display: none;
}

.sidebar .navbar-nav .nav-item .nav-link {
  padding: 8px;
}

.sidebar .navbar-nav .nav-item .nav-link:hover {
  background: var(--bs-secondary) !important;
  color: #fff;
  transition: .3s ease-in-out;
}

.sidebar .navbar-nav .nav-item .nav-link.active,
.sidebar .navbar-nav .multimenu .active-main {
  background: var(--bs-secondary) !important;
  color: #fff;
}

.sidebar .navbar-nav .nav-item ul li a {
  border-bottom: 1px solid transparent;
  color: rgba(var(--bs-white-rgb), 0.8);
  background: transparent !important;
}

/* FOR SIDEBAR -- START */
/* -----------------------------------------------------------------------------
------------------------- EXTRA-CSS-BY-RAHUL ----  START -----------------------
-------------------------------------------------------------------------------- */
.text-underline {
  text-decoration: underline;
}

.hw-20 {
  height: 20px;
  width: 20px;
}

/* FOR_SIDEBAR_START */
.sidebar .navbar-nav .nav-item .multimenu-menu-indicator i {
  -webkit-box-flex: 0;
  flex: 0 0 1rem;
  -ms-flex: 0 0 1rem;
  font-size: 10px;
}

.sidebar .navbar-nav .nav-item .nav-link[aria-expanded=true]:after {
  transform: rotate(-180deg);
}

.sidebar .navbar-nav .nav-item .nav-link:after {
  transition: all .3s;
}

/* FOR_SIDEBAR_END */
/* tracking-bar-start */
.progress-barrr {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20px, 1fr));
}

.progress-step {
  text-align: center;
  position: relative;
  z-index: 1;
}

.progress-step:before,
.progress-step:after {
  background-color: var(--bs-secondary);
  content: "";
  height: 2px;
  position: absolute;
  z-index: -1;
  top: 15px;
}

.progress-step:after {
  left: 50%;
  width: 100%;
}

.progress-step:last-of-type.is-active:after {
  background-color: var(--bs-secondary);
}

.progress-step:last-of-type:after {
  left: 50%;
  width: 50%;
}

.progress-step .step-count {
  background-color: #fff;
  height: 35px;
  width: 35px;
  margin: 0 auto;
  border-radius: 50%;
  color: var(--bs-secondary);
  line-height: 35px;
  z-index: 100;
  border: 1px solid var(--bs-secondary);
  font-size: 1rem;
  font-weight: 500;
}

.progress-step.is-active~.progress-step:not(.is-active) .step-count {
  background-color: #fff;
  height: 35px;
  width: 35px;
  margin: 0 auto;
  border-radius: 50%;
  color: gray;
  line-height: 35px;
  z-index: 100;
  border: 1px solid gray;
  font-size: 1rem;
  font-weight: 500;
}

.progress-step.is-active .step-description {
  font-weight: 500;
}

.progress-step.is-active:after {
  background-color: gray;
}

.progress-step.is-active~.progress-step .step-count {
  background-color: #fff;
}

.progress-step.is-active~.progress-step:after {
  background-color: gray;
}

.step-description {
  font-size: 0.8rem;
}

@media screen and (min-width: 640px) {
  .progress-step:first-of-type:before {
    right: 50%;
    width: 50%;
  }
}

@media screen and (max-width: 640px) {

  .progress-step:first-of-type:before,
  .progress-step:last-of-type:after {
    display: none !important;
  }
}

/* RTL */
.progress-step-rtl {
  text-align: center;
  position: relative;
  z-index: 1;
}

.progress-step-rtl:before,
.progress-step-rtl:after {
  background-color: var(--bs-secondary);
  content: "";
  height: 2px;
  position: absolute;
  z-index: -1;
  top: 15px;
}

.progress-step-rtl:after {
  right: 50%;
  width: 100%;
}

.progress-step-rtl:last-of-type.is-active:after {
  background-color: var(--bs-secondary);
}

.progress-step-rtl:last-of-type:after {
  left: 50%;
  width: 50%;
}

.progress-step-rtl .step-count {
  background-color: #fff;
  height: 35px;
  width: 35px;
  margin: 0 auto;
  border-radius: 50%;
  color: var(--bs-secondary);
  line-height: 35px;
  z-index: 100;
  border: 1px solid var(--bs-secondary);
  font-size: 1rem;
  font-weight: 500;
}

.progress-step-rtl.is-active~.progress-step-rtl:not(.is-active) .step-count {
  background-color: #fff;
  height: 35px;
  width: 35px;
  margin: 0 auto;
  border-radius: 50%;
  color: gray;
  line-height: 35px;
  z-index: 100;
  border: 1px solid gray;
  font-size: 1rem;
  font-weight: 500;
}

.progress-step-rtl.is-active .step-description {
  font-weight: 500;
}

.progress-step-rtl.is-active:after {
  background-color: gray;
}

.progress-step-rtl.is-active~.progress-step-rtl .step-count {
  background-color: #fff;
}

.progress-step-rtl.is-active~.progress-step-rtl:after {
  background-color: gray;
}

@media screen and (min-width: 640px) {
  .progress-step-rtl:first-of-type:before {
    left: 50%;
    width: 50%;
  }
}

@media screen and (max-width: 640px) {

  .progress-step-rtl:first-of-type:before,
  .progress-step-rtl:last-of-type:after {
    display: none !important;
  }
}

/* tracking-bar-end */
/* FOR_ERRORS_PAGE_START */
.error-content {
  font-size: 30px;
  font-weight: bold;
}

@media (max-width:767px) {
  .error-sec-order {
    order: 2;
  }
}

/* FOR_ERRORS_PAGE_END */
/* -----------------------------------------------------------------------------
------------------------- EXTRA-CSS-BY-RAHUL ----  END -------------------------
-------------------------------------------------------------------------------- */
/* New login form */
/* New login form  start */
.login-page-img {
  width: 100%;
}

.login-form-bg-color {
  background-color: white;
}

.login-form-bottom-icon {
  gap: 5px;
}

.login-with-bottom-title {
  font-family: var(--bs-body-font-family);
  font-weight: 500;
}

.icon-btn-twitter {
  background-color: #1ba1f4 !important;
  border: none !important;
}

.dropdown-hover a:hover {
  background-color: white !important;
}

.login-imag {
  width: 120px;
  height: 120px;
}

/* New login form  End */
.dropdown-menu-language {
  position: absolute !important;
  left: -60px !important;
  top: 15px !important;
  box-shadow: 0px 0px 13px -3px rgb(0 0 0 / 10%);
}

/* admin rtl css */
/* .main-content-rtl {
  margin-right: 16.5rem;
} */


.accordion-button-rtl {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
  font-size: 1rem;
  color: var(--bs-accordion-btn-color);
  text-align: left;
  background-color: var(--bs-accordion-btn-bg);
  border: 0;
  border-radius: 0;
  overflow-anchor: none;
  transition: var(--bs-accordion-transition);
}

.accordion-button-rtl::after {
  flex-shrink: 0;
  width: var(--bs-accordion-btn-icon-width);
  height: var(--bs-accordion-btn-icon-width);
  margin-right: auto;
  content: "";
  background-image: var(--bs-accordion-btn-icon);
  background-repeat: no-repeat;
  background-size: var(--bs-accordion-btn-icon-width);
  transition: var(--bs-accordion-btn-icon-transition);
}

.accordion-button-rtl:not(.collapsed) {
  color: var(--bs-accordion-active-color);
  background-color: #f15a1f20 !important;
  box-shadow: inset 0 calc(var(--bs-accordion-border-width) * -1) 0 var(--bs-accordion-border-color);
}

/* .input-group-rtl {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.input-group-icon-rtl {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
} */

.breadcrumb-rtl::before {
  float: right !important;
  padding-left: var(--bs-breadcrumb-item-padding-x) !important;
  padding-right: var(--bs-breadcrumb-item-padding-x) !important;
  color: var(--bs-breadcrumb-divider-color) !important;
}

div.dataTables_wrapper div.dataTables_filter input {
  margin-right: 5px !important;
}

.drop-menu {
  top: 7px !important;
}

.icon-bar {
  position: fixed;
  top: 90%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 100;
  right: 2%;
}

/*================= pos section header start =================*/
.pos-header {
  background-color: var(--bs-white);
  box-shadow: var(--bs-box-shadow);
  padding: 5px 0px;
}

/* FIX QA (look & feel): override directo, sin depender de la cadena
   .light body ... -- para asegurar el navy de marca en la cabecera
   del POS sin importar el estado de esa clase. */
.pos-header {
  background-color: #001529 !important;
}

.pos-header img {
  height: 40px;
  object-fit: cover;
  object-position: center;
}

/*================= pos categorys start =================*/
.pos-categorys .scroll-wrapper {
  overflow-x: auto;
  white-space: nowrap;
  max-width: 100%;
  height: auto;
  background-color: #fff;
  padding: 16px;
}

.pos-categorys .scroll-wrapper ul li {
  display: inline-block;
}

.pos-categorys .scroll-wrapper .cats,
.pos-categorys .scroll-wrapper .cats:focus {
  width: auto;
  text-transform: capitalize;
  padding: 5px 10px;
  border-radius: 5px;
  display: block;
  margin: 7px 0px;
  font-size: 14px;
  font-weight: 600;
  color: #000;
  background-color: #f8f8fb;
}

/*----- Pos header active class -----*/
.pos-categorys .scroll-wrapper ul li .active {
  background-color: var(--bs-primary) !important;
  color: #fff !important;
}

/*----- Pos header active class -----*/
.offcanvas {
  max-width: 100% !important;
}

/*================= pos menu start =================*/
.pos-menu .pro-img img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 10px;
}

.pos-menu .pro-title {
  font-size: 14px;
  font-weight: 600;
  color: #000;
  margin-bottom: 10px;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.pos-menu p {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-weight: 300;
  font-size: 14px;
}

.pos-menu .pro-price {
  font-size: 14px;
  font-weight: 600;
  color: var(--bs-primary);
  color: var(--bs-secondary);
}

.pos-img img {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  object-fit: cover;
  display: flex;
  justify-content: center;
  margin: auto;
  margin-bottom: 10px;
}

/* pos invoice css */
.pos-modal {
  color: #000;
}

.pos-modal .order-details,
.pos-modal .store-details {
  border-bottom: 2px dotted lightgray;
}

.pos-modal .items-details .items,
.pos-modal .total-amount .items {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px dotted lightgray;
}

.pagination .page-item input {
  max-width: 60px;
  width: 100%;
  text-align: center;
}

/*=========================== righ-side ===========================*/
.righ-side {
  margin-left: auto;
}

/*================ price-range ================*/
.righ-side .price-range .fa-minus,
.righ-side .price-range .fa-plus,
.offcanvas .offcanvas-body .price-range .fa-minus,
.offcanvas .offcanvas-body .price-range .fa-plus,
.modal .modal-footer .price-range .fa-minus,
.modal .modal-footer .price-range .fa-plus {
  font-weight: 400 !important;
}

.righ-side.righ-side .price-range input,
.offcanvas .offcanvas-body .price-range input,
.modal .modal-footer .price-range input {
  width: 30%;
  margin: 0px 5px;
  border: none;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  background-color: transparent;
}

.righ-side.righ-side .price-range.cart input {
  width: 30%;
  margin: 0px;
  border: none;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  background-color: transparent;
}


/*================ total-sec ================*/
.righ-side .total-sec h6,
.offcanvas .offcanvas-body .total-sec h6 {
  color: #000;
  font-weight: 400;
  font-size: 16px;
}

.righ-side .total-sec span,
.offcanvas .offcanvas-body .total-sec span {
  color: #000;
  font-weight: 600;
  font-size: 16px;
}

/*================ pro-itmes ================*/
.righ-side .payment-option .payment-title h5,
.offcanvas .offcanvas-body .payment-option .payment-title h5 {
  color: #000;
}

.righ-side .pro-itmes .card,
.righ-side .total-sec .card,
.offcanvas .offcanvas-body .pro-itmes .card,
.offcanvas .offcanvas-body .total-sec .card {
  background-color: var(--bs-body-bg);
}

.righ-side .pro-itmes .card .card-body,
.offcanvas .offcanvas-body .pro-itmes .card .card-body {
  padding: 12px;
}

.pro-itmes .pro-title {
  font-size: 14px;
  font-weight: 400;
  color: #000;
  margin-bottom: 15px;
}

.pro-itmes .card .pro-price {
  font-size: 14px;
  font-weight: 600;
  color: var(--bs-secondary);
}

/*================= payment-option =================*/
.righ-side .payment-option label,
.offcanvas .offcanvas-body .payment-option label {
  width: 100%;
}

.righ-side .payment-option .card-input-element,
.offcanvas .offcanvas-body .payment-option .card-input-element {
  display: none;
}

.righ-side .payment-option .card,
.offcanvas .offcanvas-body .payment-option .card {
  cursor: pointer;
}

.righ-side .payment-option .card-input-element:checked+.card,
.offcanvas .offcanvas-body .payment-option .card-input-element:checked+.card {
  box-shadow: 0 0 1px 2px var(--bs-secondary);
}

/*----------------- Scrollbar css -----------------*/
.pos-categorys .scroll-wrapper::-webkit-scrollbar,
.pos-menu::-webkit-scrollbar,
.desktop-card-body::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.pos-categorys .scroll-wrapper::-webkit-scrollbar-track,
.pos-menu::-webkit-scrollbar-track,
.desktop-card-body::-webkit-scrollbar-track {
  background-color: transparent !important;
}

.pos-categorys .scroll-wrapper::-webkit-scrollbar-thumb,
.pos-menu::-webkit-scrollbar-thumb,
.desktop-card-body::-webkit-scrollbar-thumb {
  background: lightgray !important;
  border-radius: 10px !important;
}

/*----------------- Scrollbar css -----------------*/
.currency input {
  background-color: #ecf0fa;
}

/*---------------- floating-label ----------------*/
/* .floating-label {} */
.floating-label {
  width: 60px;
  height: 60px;
  position: fixed;
  bottom: 5%;
  left: 5%;
  border: 2px solid var(--bs-primary);
  background-color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  box-shadow: 0px 0px 10px 2px var(--bs-primary);
  color: var(--bs-primary);
  font-size: 18px;
}

.variants .title {
  text-transform: capitalize;
  font-weight: 500;
  font-size: 16px;
  color: var(--bs-primary);
}

.pos-menu .active {
  border: 1px solid grey !important;
  border-radius: var(--bs-border-radius-xl) !important;
}

/*********************** load css ***********************/
.load {
  width: 20px;
  height: 20px;
  border: solid 3px var(--bs-secondary);
  border-radius: 50%;
  border-right-color: transparent;
  border-bottom-color: transparent;
  -webkit-transition: all 0.5s ease-in;
  -webkit-animation-name: rotate;
  -webkit-animation-duration: 1.0s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  transition: all 0.5s ease-in;
  animation-name: rotate;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  margin: 5px !important;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
  }
}

/*********************** KISHOR ADD CSS ***********************/
.formimg {
  width: 100%;
  height: 100%;
}

.line-limit-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.social-icon img {
  width: 30px;
  height: 30px;
}

.social-icon a {
  font-size: 15px;
  font-weight: 500;
  color: #000;
  border-radius: 21px;
}

.social-icon a:hover {
  background-color: #fff;
  color: #000;
}

.form-title {
  font-size: 15px;
  font-weight: 500;
}

.line {
  flex: 1;
  border-bottom: 1px solid lightslategray;
}

.language-dropdown {
  width: 37px;
  height: 37px;
  border-radius: 50%;
  object-fit: cover;
}

.dropdown-item.active,
.dropdown-item:active {
  color: #000;
  text-decoration: none;
  background-color: #e9ecef;
}

.btn-primary {
  background-color: var(--bs-secondary) !important;
  border: 0;
  border-radius: 21px;
}

.deshcard1 {
  background-color: #FFEFD5;
}

.deshcard2 {
  background-color: #a3cfbb;
}

.deshcard02 {
  background-color: #D09CFA50;
}

.deshcard03 {
  background-color: #B5FFD960;
}

.deshcard3 {
  background-color: #cfe2ff;
}

.deshcard4 {
  background-color: #f8d7da;
}

/* order card  */
.ordercard1 {
  background-color: #cfe2ff;
}

.ordercard2 {
  background-color: #ffc10740;
}

.ordercard3 {
  background-color: #19875440;
}

.ordercard4 {
  background-color: #dc354540;
}

.reportcard1 {
  background-color: #9376E040;
}

.card {
  border-radius: 1rem;
}

/*---------------------------------------------------
 # Vendors Page Start
----------------------------------------------------- */
/* START TOOLTIP STYLES */
[tooltip] {
  position: relative;
}

[tooltip]::before,
[tooltip]::after {
  text-transform: none;
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  user-select: none;
  pointer-events: none;
  position: absolute;
  display: none;
  opacity: 0;
}

[tooltip]::before {
  content: '';
  border: 5px solid transparent;
  z-index: 1001;
}

[tooltip]::after {
  content: attr(tooltip);
  min-width: 3em;
  max-width: 21em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1ch 1.5ch;
  border-radius: .3ch;
  box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
  background: #333;
  color: #fff;
  z-index: 1000;
}

/* Make the tooltips respond to hover */
[tooltip]:hover::before,
[tooltip]:hover::after {
  display: block;
}

/* FLOW: UP */
[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
  bottom: 100%;
  border-bottom-width: 0;
  border-top-color: #333;
}

[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
  bottom: calc(100% + 5px);
}

[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
  left: 50%;
  transform: translate(-50%, -.5em);
}

/* KEYFRAMES */
@keyframes tooltips-vert {
  to {
    opacity: .9;
    transform: translate(-50%, 0);
  }
}

@keyframes tooltips-horz {
  to {
    opacity: .9;
    transform: translate(0, -50%);
  }
}

/* FX All The Things */
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after {
  animation: tooltips-vert 300ms ease-out forwards;
}

.btn-size {
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-xmark {
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 21px;
}

.btn-size i {
  font-size: 12px;
}

td {
  vertical-align: middle;
  color: #000 !important;
}

.btn-add {
  /* padding: 10px 35px; */
  font-weight: 600;
  /* background-color: var(--bs-secondary); */
  color: #fff;
  /* border-radius: 21px; */
}

table.dataTable.table-striped>tbody>tr.odd>* {
  box-shadow: none !important;
}

/*---------------------------------------------------
 # Vendors / Add Page Start
----------------------------------------------------- */
/* .btn-cancel {
  padding: 10px 30px;
  border-radius: 21px;
}

.btn-succes {
  padding: 10px 40px;
  border-radius: 21px;
} */

/*---------------------------------------------------
 # Subscription Plans Page Start
----------------------------------------------------- */
.plan-price {
  font-size: 2rem;
  font-weight: 700;
}

.per-month {
  font-size: 14px;
  color: #6c757d !important;
}

.plancard {
  border: 1px solid #0d6efd !important;
}

.selectimg label.radio-card .card-content-wrapper {
  transition: 200ms linear;
}

.selectimg label.radio-card .check-icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  border: solid 2px #e3e3e3;
  border-radius: 50%;
  transition: 200ms linear;
}

.selectimg label.radio-card .check-icon:before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.93552 4.58423C0.890286 4.53718 0.854262 4.48209 0.829309 4.42179C0.779553 4.28741 0.779553 4.13965 0.829309 4.00527C0.853759 3.94471 0.889842 3.88952 0.93552 3.84283L1.68941 3.12018C1.73378 3.06821 1.7893 3.02692 1.85185 2.99939C1.91206 2.97215 1.97736 2.95796 2.04345 2.95774C2.11507 2.95635 2.18613 2.97056 2.2517 2.99939C2.31652 3.02822 2.3752 3.06922 2.42456 3.12018L4.69872 5.39851L9.58026 0.516971C9.62828 0.466328 9.68554 0.42533 9.74895 0.396182C9.81468 0.367844 9.88563 0.353653 9.95721 0.354531C10.0244 0.354903 10.0907 0.369582 10.1517 0.397592C10.2128 0.425602 10.2672 0.466298 10.3112 0.516971L11.0651 1.25003C11.1108 1.29672 11.1469 1.35191 11.1713 1.41247C11.2211 1.54686 11.2211 1.69461 11.1713 1.82899C11.1464 1.88929 11.1104 1.94439 11.0651 1.99143L5.06525 7.96007C5.02054 8.0122 4.96514 8.0541 4.90281 8.08294C4.76944 8.13802 4.61967 8.13802 4.4863 8.08294C4.42397 8.0541 4.36857 8.0122 4.32386 7.96007L0.93552 4.58423Z' fill='white'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-size: 12px;
  background-position: center center;
  transform: scale(1.6);
  transition: 200ms linear;
  opacity: 0;
}

.selectimg label.radio-card input[type=radio] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.selectimg label.radio-card input[type=radio]:checked+.card-content-wrapper,
.selectimg label.radio-card input[type=checkbox]:checked+.card-content-wrapper {
  box-shadow: 0 2px 4px 0 rgba(219, 215, 215, 0.5), 0 0 0 2px #198754;
}

.selectimg label.radio-card input[type=radio]:checked+.card-content-wrapper .check-icon {
  background: var(--bs-success);
  border-color: var(--bs-success);
  transform: scale(1.2);
  z-index: 1;
  left: 10px;
  top: 30px;
}

.selectimg label.radio-card input[type=checkbox]:checked+.card-content-wrapper .check-icon {
  background: var(--bs-success);
  border-color: var(--bs-success);
  transform: scale(1.2);
  z-index: 1;
  left: 10px;
  top: 10px;
}

.selectimg label.radio-card input[type=radio]:checked+.card-content-wrapper .check-icon:before,
.selectimg label.radio-card input[type=checkbox]:checked+.card-content-wrapper .check-icon:before {
  transform: scale(1);
  opacity: 1;
}

.selectimg label.radio-card input[type=radio]:focus+.card-content-wrapper .check-icon,
.selectimg label.radio-card input[type=checkbox]:focus+.card-content-wrapper .check-icon {
  box-shadow: 0 0 0 4px rgba(25, 135, 84, 0.2);
  border-color: var(--bs-success);
}

.selecimg {
  display: block;
  position: relative;
  cursor: pointer;
  width: 100%;
  border-radius: 5px;
}

.selecimg img {
  width: 100%;
  transition-duration: 0.5s;
  transform-origin: 50% 50%;
  object-fit: cover;
  object-position: top;
  height: 300px;
  transition: 5s all ease-in-out;
}

.radio-card {
  width: 100%;
}

.selecimg:hover img {
  object-position: bottom;
}

.clickadd {
  width: 15px;
}

input[type=file]::file-selector-button {
  background: #fff !important;
}

input[type=file]::file-selector-button:hover {
  background: #fff !important;
}

/* .list-options a {
  border: 0;
  border-radius: 21px !important;
} */

.list-options a:hover {
  background-color: var(--bs-secondary);
  /* color: #fff; */
}

.form-control-color {
  width: 70px !important;
  height: 70px;
  padding: 0px !important;
}


.img-fluid {
  max-width: 100% !important;
}

.list-group-item.active {
  background-color: var(--bs-secondary);
}

.selectdrop {
  padding: 5px 40px 5px 20px;
}

.basic-list-group ul li {
  font-weight: 500;
  padding: 15px 0px;
}

.breadcrumb li a {
  color: var(--bs-secondary);
  font-weight: 500;
}

thead tr {
  background-color: #f8f8fb;
  padding: 50px !important;
}

thead tr td {
  padding: 20px 10px !important;
  font-weight: 600;
  font-size: 15px;
}

table.table-bordered.dataTable th,
table.table-bordered.dataTable td {
  border: 0px !important;
  border-bottom: 1px solid #dee2e6 !important;
}

tbody tr td {
  font-size: 13px;
}

.timepicker {
  font-size: 13px;
}

/* .working-hoursselect {
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
  border-bottom-right-radius: 21px !important;
  border-top-right-radius: 21px !important;
  margin-left: -1px;
}

.time-interval {
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
  border-bottom-left-radius: 21px !important;
  border-top-left-radius: 21px !important;
} */

.analyticsmainbtn ul li a {
  border-radius: 21px !important;
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
  background-color: #fff !important;
}

.analyticsmainbtn.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  color: #fff;
  background-color: var(--bs-secondary) !important;
}

.analyticsmainbtn.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
  border-color: 0;
  color: #fff;
  background-color: var(--bs-secondary) !important;
}

.pricebtn {
  padding: 12px;
}

.product-image {
  width: 100%;
  height: 183px !important;
  object-fit: cover;
}

.btn-social {
  border-radius: 21px !important;
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
  padding: 10px 15px;
}

.whatsappcolor {
  background-color: #25D366;
  color: #fff;
}

.whatsappcolor:hover {
  background-color: #24bd5c !important;
  color: #fff;
}

.facebookcolor {
  background-color: #39569c;
  color: #fff;
}

.facebookcolor:hover {
  background-color: #304a85 !important;
  color: #fff;
}

.twittercolor {
  background-color: #2bc4ff;
  color: #fff;
}

.twittercolor:hover {
  background-color: #28b0e6 !important;
  color: #fff;
}

.linkedincolor {
  background-color: #0072b1;
  color: #fff;
}

.linkedincolor:hover {
  background-color: #00669e !important;
  color: #fff;
}

.qr-codeimg {
  width: 100%;
}

.input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),
.input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control,
.input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select,
.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
  border-top-left-radius: 21px;
  border-bottom-left-radius: 21px;
}

.input-group>.form-floating:not(:first-child)>.form-control,
.input-group>.form-floating:not(:first-child)>.form-select,
.input-group>:not(:first-child):not(.dropdown-menu):not(.form-floating):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  margin-left: -1px;
  border-top-right-radius: 21px;
  border-bottom-right-radius: 21px;
}

.rtlbtn.btn-check:focus+.btn,
.rtlbtn.btn:focus {
  border-color: var(--bs-secondary) !important;
  background-color: var(--bs-secondary) !important;
}

/* POS */
.poscart {
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  background-color: var(--bs-secondary);
}

.poscart i {
  font-size: 20px;
  color: #fff;
}

.categoryimg img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}

.pos-title {
  font-size: 25px;
  font-weight: 700;
  margin-bottom: 15px;
  color: #000;
}

/* POS Section Search btn start */
.search-input {
  background-color: transparent;
  border: none;
  border-radius: 5px;
  width: 100%;
  position: relative;
}

.pos-card-input i {
  color: #c3c8da;
}

.pos-card-input {
  display: flex;
  align-items: center;
  border: none;
  box-shadow: none;
  margin-bottom: 0px !important;
}

.possearch-button {
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  border: none;
  padding: 10px 50px;
  border-radius: 21px;
  background-color: var(--bs-primary);
  cursor: pointer;
}

/* POS price-range */
.price-range .circle,
.offcanvas .offcanvas-body .price-range .circle,
.modal .modal-footer .price-range .circle {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bs-primary);
  color: #fff;
  border: 1px solid var(--bs-primary);
}

.price-range.cart .circle {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bs-primary);
  color: #fff;
  border: 1px solid var(--bs-primary);
}

.offcanvas .offcanvas-body .price-range .circle:hover,
.modal .modal-footer .price-range .circle:hover {
  background-color: #fff;
  color: #000;
}

.posproductimg {
  max-width: 100%;
  flex-direction: row;
  padding: 10px;
  align-items: center;
}

.posproductimg img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 10px;
}

.pay-total {
  border-top: 1px dashed #000;
}

.categories-left-side {
  overflow: auto;
  height: 100vh;
}

.posbody {
  overflow-y: hidden;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.overflow-y-scroll {
  overflow-y: scroll;
}

::-webkit-scrollbar {
  display: none;
}

.line-limit-1 {
  font-size: 14px;
  font-weight: 600;
  color: #000;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.peyment_methed .btn-succes {
  padding: 10px 28px;
}

.payment-option img {
  width: 50px;
  object-fit: cover;
}

.discountdolor {
  background-color: var(--bs-secondary);
  color: #fff;
}

.pos-categorys {
  background-color: #fff;
  border-radius: var(--bs-border-radius-xl) !important;
  margin-bottom: 1.5rem !important;
  padding: 10px;
}

.modal-dialog-scrollable::-webkit-scrollbar {
  display: block;
}

.ring {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.data-found {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50vh;
}

.sidebariconbox {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sidebariconbox i {
  color: var(--bs-primary);
  font-size: 14px;
}

.sidebariconbox1 {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: var(--bs-primary);
  display: flex;
  justify-content: center;
  align-items: center;
}

.sidebariconbox1 i {
  color: #fff;
  font-size: 14px;
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.desh_left img {
  width: 75%;
  height: 100%;
  object-fit: cover;
}

.desh_left {
  background-color: var(--bs-secondary);
}

.desh_left h4 {
  color: #fff;
}

.desh_left p {
  color: #fff;
  font-weight: 300;
}

.dropwdown-desh-card {
  color: #000;
  padding: 10px 12px;
  font-weight: 500;
}

.desh-chart-img {
  width: 100%;
  height: 100%;
}

.header_icon_box {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--bs-secondary);
}

.mb-7 {
  margin-bottom: 1.5rem !important;
}

.btn-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #000 !important;
}

.numbers_only {
  margin-bottom: 0px !important;
}

.discount_amount {
  margin-bottom: 0px !important;
}

.payments .form-control {
  margin-bottom: 0px !important;
}

#repeater .form-control {
  margin-bottom: 0px !important;
}

.dataTables_length {
  margin-bottom: 10px;
  display: list-item;
}

.dataTables_length select {
  width: 90px !important;
}



/* TableQR Start*/


.inside-qrcard {
  text-align: center;
  border-radius: 20px;
}

.inside-qrcard h4 {
  font-size: 20px;
}

.inside-qrcard .image {
  width: 50%;
  padding: 10px;
}

/* TableQR End */

.sale {
  padding: 10px 0px;
  background-color: #000;
  color: #fff;
}

.sale p {
  font-size: 14px;
}

.sale a {
  color: #fff;
}

.overflow-y-hidden {
  overflow-y: hidden;
}

.navbar-header-logoc img {
  height: 54px;
  overflow: hidden;
}


.fixed-bottom_footer {
  position: fixed;
  right: 0;
  bottom: 0;
  /* left: 0; */
  z-index: 1030;
}

.general_settings li a {
  border-radius: var(--bs-border-radius-2xl) !important;
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
  cursor: pointer;
}

.general_settings li {
  display: inline-block !important;
}

.scrolling-wrapper::-webkit-scrollbar {
  display: block;
}


.scrolling-wrapper::-webkit-scrollbar {
  width: 10px;
}

.scrolling-wrapper::-webkit-scrollbar:horizontal {
  height: 10px;
}

.scrolling-wrapper::-webkit-scrollbar-track {
  background-color: rgba(204, 204, 204, 0.3);
}

.scrolling-wrapper::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(204, 204, 204, 0.5);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}


.scrollbar_body::-webkit-scrollbar {
  display: block !important;
}

.scrollbar_body::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #F5F5F5;
}

.scrollbar_body::-webkit-scrollbar {
  width: 8px;
  background-color: #F5F5F5;
}

.scrollbar_body::-webkit-scrollbar-thumb {
  background-color: var(--bs-primary);
}

.icon_circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}



.horizontal-schroll {
  height: 100vh;
  overflow: auto !important;
}

.border-line {
  border-right: 1px solid #000;
}

.demo_label {
  background-color: var(--bs-secondary);
  color: #fff;
  z-index: 999;
  position: fixed;
  top: 90%;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
}

.main-button {
  background-color: #eb4d4b;
  border: 0;
  padding: 10px 35px;
  font-size: 20px;
  font-family: 'Open Sans';
  border-radius: 3px;
  cursor: pointer;
  color: #fff;
  text-transform: uppercase;
}

.main-button::after {
  background-color: #eb4d4b;
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 3px;
  animation-name: blink;
  animation-duration: 1.3s;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
  /* animation-timing-function: cubic-bezier(1, 0, 0, 1); */
  animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

@keyframes blink {
  0% {
    transform: scale3d(1, 1, 1);
    opacity: 0.8;
  }

  100% {
    transform: scale3d(1.1, 1.3, 1.1);
    opacity: 0;
  }
}

.empty-scroll {
  height: calc(77vh + (100 - 44) * ((100vw - 320px) / (1920 - 320)));
  overflow: auto;
}

.m-empty-scroll {
  height: 80vh;
}

.item-stock {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.3);
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  z-index: 9;
  border-radius: 10px;
}

/* new one */
.one-card {
  background-color: #eff3f6;
  height: 100%;
  width: 200px;
  padding: 0px;
  border: none;
  border-radius: 0px;
  position: relative;
}

.one-card .one-img {
  height: 200px;
  overflow: hidden;
}

.one-card .card-body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px;
}

.one-card .card-footer {
  border: none;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
}

.one-card .card-footer p {
  font-weight: 600;
  text-transform: capitalize;
  color: #000;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding-bottom: 1px;
  word-break: break-all;
  font-size: 14px;
}

.one-card .dropdown {
  position: absolute;
  top: 8px;
  right: 8px;
}

.one-card .one-card-dropdown,
.one-card .one-card-dropdown:is(:hover, :active, :focus, .show) {
  width: 25px;
  height: 25px;
  background-color: var(--bs-secondary) !important;
  color: #fff;
  font-size: 15px;
  border-radius: 0px;
  cursor: pointer;
  border: none !important;
  padding-top: 2px;
}

.one-card .dropdown-toggle::after {
  display: none;
}

.one-card .dropdown-menu {
  min-width: fit-content;
  border-radius: 0px;
  border: none;
  margin-top: 2px !important;
}

.one-card .dropdown-menu li .dropdown-item {
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.one-card .dropdown-item:hover {
  background-color: var(--bs-secondary);
  color: #fff;
}


.dropdown-menu.ltr {
  top: 0px !important;
  right: 0px !important;
}

.dropdown-menu.rtl {
  top: 0px !important;
  left: 0px !important;
}

.text-secondary {
  color: var(--bs-secondary) !important;
}

/* ========================dhruvil add extra css=================== */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary)
}

.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-secondary);
  --bs-btn-hover-border-color: var(--bs-secondary);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-secondary);
  --bs-btn-active-border-color: var(--bs-secondary);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-secondary);
  --bs-btn-disabled-border-color: var(--bs-secondary)
}

.btn-info {
  --bs-btn-color: #fff;
  --bs-btn-bg: #0dcaf0;
  --bs-btn-border-color: #0dcaf0;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #31d2f2;
  --bs-btn-hover-border-color: #25cff2;
  --bs-btn-focus-shadow-rgb: 11, 172, 204;
  --bs-btn-active-color: ##fff;
  --bs-btn-active-bg: #3dd5f3;
  --bs-btn-active-border-color: #25cff2;
  --bs-btn-active-shadow: inset 0 3px 5px #fff(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #0dcaf0;
  --bs-btn-disabled-border-color: #0dcaf0;
}

.btn-outline-secondary {
  --bs-btn-color: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-secondary);
  --bs-btn-hover-border-color: var(--bs-secondary);
  --bs-btn-focus-shadow-rgb: 45, 41, 66;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-secondary);
  --bs-btn-active-border-color: var(--bs-secondary);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--bs-secondary);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-secondary);
  --bs-gradient: none
}

.btn-outline-primary {
  --bs-btn-color: var(--bs-primary) !important;
  --bs-btn-border-color: var(--bs-primary) !important;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-primary) !important;
  --bs-btn-hover-border-color: var(--bs-primary) !important;
  --bs-btn-focus-shadow-rgb: 45, 41, 66;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-primary) !important;
  --bs-btn-active-border-color: var(--bs-primary) !important;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--bs-primary) !important;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-primary) !important;
  --bs-gradient: none
}

.btn-info {
  --bs-btn-color: #fff;
  --bs-btn-bg: #0dcaf0;
  --bs-btn-border-color: #0dcaf0;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #31d2f2;
  --bs-btn-hover-border-color: #25cff2;
  --bs-btn-focus-shadow-rgb: 11, 172, 204;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #3dd5f3;
  --bs-btn-active-border-color: #25cff2;
  --bs-btn-active-shadow: inset 0 3px 5px #fff(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #0dcaf0;
  --bs-btn-disabled-border-color: #0dcaf0;
}

.btn-dark {
  --bs-btn-color: #fff;
  --bs-btn-bg: #000;
  --bs-btn-border-color: #000;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #000;
  --bs-btn-hover-border-color: #000;
  --bs-btn-focus-shadow-rgb: 66, 70, 73;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #000;
  --bs-btn-active-border-color: #000;
  --bs-btn-active-shadow: inset 0 3px 5px #fff(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #000;
  --bs-btn-disabled-border-color: #000;
}

.btn.hov:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.card {
  --bs-card-bg: #fff;
}

.settings .list-item-primary.active,
.settings .list-item-primary.active a {
  z-index: 2;
  color: #FFF;
  font-weight: 500;
  background-color: var(--bs-secondary) !important;
  border-color: var(--bs-secondary);
}

.bg-secondary {
  background-color: var(--bs-secondary) !important;
  color: #fff;
}

.settings .list-item-secondary.active,
.settings .list-item-secondary.active a {
  z-index: 2;
  font-weight: 500;
  color: #FFF;
  background-color: var(--bs-secondary) !important;
  border-color: var(--bs-secondary);
}

.form-select {
  background-color: #fff !important;
}

.form-control:focus,
.form-select:focus {
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  border-color: #ced4da;
}

.form-control:disabled {
  background-color: var(--bs-secondary-bg) !important;
  opacity: 1;
}

.btn-outline-info {
  --bs-btn-hover-color: #fff !important;
}

.form-control {
  font-size: 14px !important;
  background-color: #fff !important;
}

.pagination {
  --bs-pagination-active-bg: var(--bs-primary);
  --bs-pagination-active-border-color: var(--bs-primary);
}

.progress {
  --bs-progress-bar-bg: var(--bs-primary);
}

.border-primary {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-primary-rgb), var(--bs-border-opacity)) !important
}

.active>.page-link,
.page-link.active {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff !important;
}

.text-primary {
  --bs-text-opacity: 1;
  color: var(--bs-primary) !important
}

a {
  color: var(--bs-link-color);
  text-decoration: none
}

.nav-tabs {
  --bs-nav-tabs-link-active-bg: #fff !important;
}

.table {
  --bs-table-bg: transparent !important;
}

.list-group {
  --bs-list-group-bg: #fff !important;
}

.list-group-item {
  color: #000;
  background-color: var(--bs-list-group-bg) !important;
}

.form-check-input:checked {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

.form-check-input[type=checkbox]:indeterminate {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

.checkbox-reviw input[type='checkbox'] {
  accent-color: #000;
}

.custom-control-input[type=checkbox]:indeterminate {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

.lag-img {
  width: 25px !important;
  height: 25px !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 50%;
}

.min-dropdown-ltr {
  position: absolute !important;
  left: -129px !important;
}

.min-dropdown-rtl {
  position: absolute !important;
  left: 0px !important;
}

.fs-15 {
  font-size: 15px !important;
}

.fs-13 {
  font-size: 13px !important;
}

.login-admin .image-1 {
  width: 100%;
  height: 100%;
}

.img-logo img {
  height: 60px;
}

.login-admin .row {
  width: 100%;
  height: 100%;
}

.object {
  object-fit: cover !important;
  object-position: center !important;
}

.login-admin .image-1 img {
  width: 100%;
  height: 100%;
}

.text-muted {
  --bs-text-opacity: 1;
  color: #848c92 !important;
}

.dataTables_empty {
  font-size: 15px;
  font-weight: 600;
}

.dataTables_info {
  font-size: 14px;
  font-weight: 500;
  color: #000;
}

.sorting {
  font-size: 15px !important;
  font-weight: 500;
}

.form-group label,
.form-label {
  font-size: 15px !important;
  font-weight: 400;
  color: #000;
  /* margin: 0px !important; */
}

.filter-option {
  font-size: 14px !important;
}

.form-group input {
  font-size: 14px !important;
  padding: 8px 12px;
}

.form-group .form-select {
  font-size: 14px !important;
  padding: 8px 12px;
}

.form-group textarea {
  font-size: 14px !important;
}

.dataTables_paginate .pagination .page-item .page-link {
  font-size: 14px !important;
  font-weight: 500;
}

.pagination .page-item .page-link {
  font-size: 14px !important;
  font-weight: 500;
}

.fs-16 {
  font-size: 16px !important;
}

.header-bar .navbar .min-dropdown-ltr {
  position: absolute !important;
  left: -128px !important;
  top: 100% !important;
}

.header-bar .navbar .min-dropdown-rtl {
  position: absolute !important;
  left: 0px !important;
  top: 100% !important;
}

.hov {
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hight-50 {
  height: 50px !important;
  object-fit: cover;
  object-position: center;
}

.card-title {
  color: #000;
}

.modal-content {
  background-color: #fff;
}

.header-btn-icon {
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.left-side {
  border-right: 2px dotted rgb(215, 214, 214);
  padding-right: 1px;
}

.right-side {
  /* width: 40% !important; */
  position: relative;
}

.cursor-pointer label {
  font-size: 13px;
  color: #000;
  text-transform: capitalize;
}

/* ======== Alert Warning ======= */
.alert-warning {
  --bs-alert-color: var(--bs-primary);
  --bs-alert-bg: rgb(from var(--bs-secondary) r g b / .2);
  --bs-alert-border-color: rgb(from var(--bs-secondary) r g b / .2);
  --bs-alert-link-color: var(--bs-warning-text-emphasis);
}

.coupon .coupn-circle-up {
  position: absolute;
  width: 20px;
  height: 20px;
  background: rgb(215, 214, 214);
  border-radius: 100%;
  left: -11px;
}

.bg-gray {
  background-color: rgb(229 229 229);
}

.form-check-input:focus {
  border-color: var(--bs-border-color);
}

.text-dark {
  color: #000 !important;
}

.btn-light {
  --bs-btn-color: #000000;
  --bs-btn-bg: #ffffff;
  --bs-btn-border-color: #f8f9fa;
  --bs-btn-hover-color: #000000;
  --bs-btn-hover-bg: #ffffff;
  --bs-btn-hover-border-color: #ffffff;
}

.form-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.icon_box {
  width: 35px;
  height: 35px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.settings-color {
  color: #000;
}

.bootstrap-select>.dropdown-toggle {
  padding: .375rem .75rem;
}

.dropdown-item.active,
.dropdown-item:active {
  color: var(--bs-dropdown-link-active-color) !important;
  text-decoration: none;
  background-color: #000000;
}

.sub-plan {
  padding: 16px 20px;
}

/* ========= */
.dasbord-img {
  width: 35px;
  height: 35px;
}

.quer-code {
  width: 100px;
  height: 100px;
}

.line-2 {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.line-1 {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.line-3 {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.h-10-px {
  height: 10px;
}

.gradient-6 {
  background-image: linear-gradient(135deg, #97ABFF 10%, #123597 100%);
}


.rainbowText {
  font-family: arial black;
  font-size: 12px;
  font-weight: 500;
  background-image:
    linear-gradient(to right, red, orange, rgb(255, 234, 0), green, rgb(0, 0, 255), rgb(149, 0, 255), violet);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: move 1000s linear infinite;
}

@keyframes move {
  to {
    background-position: 4500vh;
  }
}

::-webkit-scrollbar {
  width: 2px !important;
  height: 2px;
}

::-webkit-scrollbar-track {
  background: #d2d2d2;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--bs-secondary);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--bs-secondary);
}

.btn.disabled {
  opacity: 1 !important;
}

/* ==================== extra class using dropdown start ==================== */
.add-extra-class .bootstrap-select .dropdown-toggle .filter-option {
  position: static;
  top: 0;
  left: 0;
  float: left;
  height: 100%;
  width: 100%;
  text-align: left;
  display: flex !important;
  overflow: hidden;
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
}

.add-extra-class .dropdown-toggle {
  border-radius: 21px !important;
}

.add-extra-class .dropdown-item {
  display: flex !important;
}

.add-extra-class .bootstrap-select.show-tick .dropdown-menu li a span.text {
  margin-right: 0px !important;
}


.add-extra-class.rtl .bootstrap-select.show-tick .dropdown-menu .selected span.check-mark {
  position: absolute;
  display: inline-block;
  left: 15px !important;
  right: unset !important;
  top: 5px;
}

.add-extra-class .bootstrap-select .dropdown-menu {
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* ==================== extra class using dropdown end ==================== */

.extra-padding {
  padding: 10px !important;
}

/* ================ New Pos Dhruvil Desai start=================== */

.logo-size {
  height: 50px;
}

.product-text-size {
  font-size: .75rem !important;
}

.sidebares {
  position: fixed;
  z-index: 100;
  padding: 30px 0;
  border-right: 1px solid var(--bs-secondary);
  background-color: var(--bg-white);
  overflow: auto;
  /* display: flex; */
  width: auto;
  transition: all 0.3s;
  padding: 20px;
}

.sidebares .nav-item {
  display: inline-block;
}

.catagory-size {
  width: 45px;
  height: 45px;
}

.sidebr-box {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  border: 1px solid #c9c9c9;
  transition: all .3s ease-in-out;
  padding: 5px;
  color: var(--text-secondary);
}

.main-product {
  margin-left: 150px;
}

.underline {
  border-bottom: 1px solid var(--bs-secondary);
}

::-webkit-scrollbar {
  width: 2px !important;
  height: 2px;
}

::-webkit-scrollbar-track {
  background: #d2d2d2;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--bs-secondary);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--bs-secondary);
}

.actives {
  /* box-shadow: 1px 1px 15px 1px rgb(144, 144, 144); */
  border-radius: 10px;
  border: 1px solid var(--bs-secondary);
  transition: all .3s ease-in-out;
  background-color: var(--bs-secondary-rgb);
  color: var(--bs-secondary) !important;
}

.product-name {
  font-size: calc(14px + (18 - 13) * ((100vw - 320px) / (1920 - 320))) !important;
}

.font-8px {
  font-size: 8px;
}

.offer-box {
  width: 55px;
  top: 10px;
  display: flex;
  justify-content: center;
  left: 10px;
  padding: 3px;
  border-radius: 12px;
  font-size: 11px !important;
  border: 1px solid #000;
  font-weight: 600 !important;
  background-color: var(--bs-secondary);
  color: var(--bs-primary) !important;
}

.offer-box h6 {
  line-height: 1;
}

.cart-btn {
  bottom: 20px;
  width: 70px;
  height: 70px;
  border: none;
  background-color: var(--bs-secondary);
  animation: mymove 2s infinite;
}

.cart-btn-right {
  left: 10px;
}

.cart-btn-left {
  right: 10px;
}

@keyframes mymove {
  50% {
    box-shadow: 0px 0px 10px 5px #00000052;
  }

}

.cart-count {
  position: absolute;
  top: -13px;
  width: 30px;
  height: 30px;
  right: 0px;
}

.price-total {
  font-size: 16px;
  font-weight: 600;
  color: #000;
}

.closing-button-1 {
  position: absolute;
  width: 50px;
  height: 50px;
  border: 1px solid var(--bs-secondary);
}

.closing-button-1-left {
  right: 100%;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
}

.closing-button-1-right {
  left: 100%;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
}

.imgs {
  max-height: 300px;
  height: 300px;
}

.qty-container .qty-btn-minus {
  margin-right: -1px;
}

.qty-container .qty-btn-minus,
.qty-container .qty-btn-plus {
  border: 1px solid #d4d4d4;
  font-size: 10px;
  height: 18px;
  margin: 0px 0px;
  width: 18px;
  border-radius: 50%;
  transition: 0.3s;
}

.button-modal {
  width: 100%;
  padding: 12px 0.75rem;
  font-size: 16px;
  border-radius: 0.375rem;
  background-color: var(--bs-primary);
}

.qty-container .input-qty {
  text-align: center;
  max-height: 50px;
  background-color: transparent;
  border: none;
  max-width: 30px;
}

.text-sm {
  font-size: .790rem;
}

.underline-2 {
  border-top: 2px dotted #808080;
  border-bottom: 2px dotted #808080;
}

.offcanvas {
  background-color: var(--bs-white) !important;
}

.total-pay {
  width: 100%;
  padding: 10px;
}

.bg-primary {
  background-color: #000 !important;
}

.box-product-2 {
  width: 100%;
  height: 300px !important;
  overflow-y: scroll;
}

.notes-box {
  border: 2px dotted var(--bg-date);
}

.modal-price {
  font-size: 13px !important;
}

.from-name {
  font-size: 13px !important;
}

.customer::placeholder {
  font-size: 13px !important;
}

.closing-button-2 {
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.total-pay1 {
  padding: 10px;
}

.thanks-order-btn {
  background-color: var(--bs-primary);
  color: var(--bs-white);
}

.modal-img {
  width: 90px;
  height: 90px;
  border-radius: 10px;
}

.font-8px {
  font-size: 10px;
}

.sidebares-right {
  right: 0;
}

.sidebares-left {
  left: 0;
}


.coupon .coupn-circle-up-left {
  position: absolute;
  width: 20px;
  height: 20px;
  background: rgb(215, 214, 214);
  border-radius: 100%;
  left: -11px;
}

.coupon .coupn-circle-up-right {
  position: absolute;
  width: 20px;
  height: 20px;
  background: rgb(215, 214, 214);
  border-radius: 100%;
  right: -11px;
}

.right-side {
  border-left: 2px dotted rgb(215, 214, 214);
  padding-left: 1px;
}

.form-check-input {
  padding: 0px !important;
}

.offcanvas .sidebar ul.navbar-nav {
  width: 100% !important;
}

.checkbox-width {
  width: 16px;
  height: 16px;
}

.h-70px {
  height: 70px;
}

.qty-input2 {
  border: 1px solid var(--bs-primary);
  flex-wrap: nowrap;
  padding: 5px;
  max-width: 145px;
}

.qty-input2.small {
  border: 1px solid var(--bs-primary);
  flex-wrap: nowrap;
  padding: 6px;
  max-width: 100%;
}

.qty-input2 input {
  border-radius: 0% !important;
  font-size: 16px;
  padding: 0;
  margin: 0;
  color: #121212;
  line-height: 20px;
  border: 0 !important;
  width: 56.4% !important;
  /* margin: 0px 5px !important; */
}

.change-qty:active {
  background: var(--bs-primary) !important;
}

.qty-input2 .change-qty-2 {
  margin: 0;
  font-size: 10px;
  height: 36px;
  width: 36px;
  font-weight: 500;
  color: #fff !important;
  border: 0;
  background: var(--bs-primary);
  border-radius: 6px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qty-input2 .change-qty-2:active {
  background: var(--bs-primary) !important;
}

.change-qty:active {
  background: var(--bs-primary) !important;
}

.qty-input2 .change-qty-2 {
  margin: 0;
  font-size: 10px;
  height: 36px;
  width: 36px;
  font-weight: 500;
  color: #fff !important;
  border: 0;
  background: var(--bs-primary);
  border-radius: 6px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qty-input2 .change-qty-2:active {
  background: var(--bs-primary) !important;
}

.checkbox-inline input {
  display: none
}

.size-variation .checkbox-inline {
  padding: 6px 15px;
  border: 1px solid var(--bs-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--bs-primary);
  border-radius: 6px;
}

.product-variations-wrapper .active {
  border-color: var(--bs-primary) !important;
  background-color: var(--bs-primary);
  color: #fff !important;
}

.loader {
  width: 20px;
  height: 20px;
  border: 2px solid var(--bs-primary);
  border-bottom-color: transparent;
  border-radius: 10px;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.desktop-card {
  height: 92vh;
  margin-top: 16px;
  margin-bottom: 16px;
}

.desktop-card .card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.desktop-card .card-body {
  overflow-y: auto;
  flex: 1;
}

.desktop-card .fixed-header {
  position: sticky;
  top: 0;
  background: white;
  z-index: 1;
}

.desktop-card .fixed-footer {
  background: white;
}

.lag-btn .dropdown-menu {
  --bs-dropdown-min-width: 8rem !important;
  /* padding: 0px 0px !important; */
  font-size: 12px !important;
  overflow: hidden !important;
}

.lag-btn .dropdown-menu img {
  width: 25px !important;
  height: 25px !important;
  border-radius: 50%;
}

.min-dropdown-ltr {
  position: absolute !important;
  left: -100px !important;
  /* top: 100% !important; */
  font-size: 12px !important;
}

.header .min-dropdowns-ltr {
  position: absolute !important;
  /* left: -100px !important; */
  /* top: 100% !important; */
  font-size: 12px !important;
}

.min-dropdown-rtl {
  position: absolute !important;
  left: 0px !important;
  top: 100% !important;
  /* inset: 0px 0px auto auto !important; */
  transform: none !important;
  font-size: 12px !important;
}


.dropdown-item.active,
.dropdown-item:active {
  color: var(--bs-white) !important;
  text-decoration: none;
  background-color: var(--bs-secondary) !important;
}

.deshcard03 .card-color1 {
  background-color: #46bc7f !important;
}

.deshcard02 .card-color2 {
  background-color: #7e43ae !important;
}

/* ======================= light and dark mode ======================== */
.light body {
  background-color: #ffffff;
  color: #000000;
}

.light body .bg-change-mode {
  background-color: #001529 !important;
  color: #fff !important;
}

.light body .sidebar .navbar-nav .nav-item .nav-link {
  color: #fff;
}

.light body .sidebariconbox1 {
  background-color: var(--bs-light);
}

.light body .sidebariconbox1 i {
  color: #000;
}

.light body .bg-change-mode .color-changer {
  color: #e3e6e8 !important;
}

.light body .fixed-bg-card-changer {
  border: 1px solid #eeeeee !important;
  background-color: #faf4f4 !important;
}

/* Dark mode */
.dark body {
  background-color: #0f1014;
}

.dark body .card.fixed-bg-card-changer {
  border: 1px solid #35363b !important;
  background-color: #35363b !important;
}

.dark body .card {
  border: 1px solid #1e2027 !important;
  background-color: #15171c !important;
}

.dark body .card.card-bg {
  border: 1px solid transparent !important;
  background-color: transparent !important;
}

.dark body .bg-change-mode {
  background-color: #001529 !important;
  color: #FFF !important;
}

.dark body .offcanvas {
  background-color: #26272f !important;
}

.dark body .box-shadow {
  box-shadow: 0px 0px 10px 2px rgba(19, 19, 19, 0.14);
}

.dark body .page-topbar {
  background-color: #26272f !important;
}

.dark body .bg-changer {
  background-color: #151822 !important;
}

.dark body .color-changer {
  color: #e3e6e8 !important;
}

.dark body .fc-toolbar .fc-left {
  color: #e3e6e8 !important;
}

.dark body .text-muted {
  color: #aab8c5 !important;
}

.dark body th,
.dark body td {
  color: #aab8c5 !important;
}

.dark body .td_a {
  color: #aab8c5 !important;
}

.dark body .table {
  --bs-table-border-color: #3e454d !important;
}

.dark body thead tr {
  background-color: transparent;
}

.dark body .btn-dark {
  background-color: #555555 !important;
  border-color: #555555 !important;
}

.dark body .page-topbar {
  background-color: #26272f !important;
}

.dark body .btn-primary {
  background-color: var(--bs-secondary) !important;
  border-color: var(--bs-secondary) !important;
}

.dark body .form-group label,
.dark body .form-label,
.dark body .form-check-label {
  color: #c7c7c7 !important;
}

.dark body .form-control,
.dark body .form-select,
.dark body select {
  background-color: #272727 !important;
  color: #aab8c5 !important;
  border-color: #464f5b !important
}

.dark body .border-bottom,
.dark body .border-top {
  border-color: #555656 !important;
}

.dark body .dataTables_info {
  color: #ffffff !important;
}

.dark body .dataTables_length label,
.dark body .dataTables_filter label {
  color: #ffffff !important;
}

.dark body .dt-buttons .dt-button {
  background: #ffffff !important;
}

.dark body .active>.page-link,
.dark body .page-link.active {
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
  color: #d2d2d2 !important;
}

.dark body .card.desh_left {
  background-color: var(--bs-secondary) !important;
}

.dark body .card.deshcard1 {
  background-color: #FFEFD5 !important;
}

.dark body .card.deshcard2 {
  background-color: #a3cfbb !important;
}

.dark body .card.deshcard3 {
  background-color: #cfe2ff !important;
}

.dark body .card.deshcard4 {
  background-color: #f8d7da !important;
}

.dark body .sidebariconbox1 {
  background-color: var(--bs-light);
}

.dark body .sidebariconbox1 i {
  color: #000;
}

.dark body .sidebar .navbar-nav .nav-item .nav-link {
  color: #FFF;
}

.rgb-success-light {
  background-color: color-mix(in srgb, var(--bs-success), transparent 80%) !important;
}

.dark body .card.rgb-success-light {
  background-color:
    color-mix(in srgb, var(--bs-success), transparent 50%) !important;
}

.dark body .btn-dark.fiexd-color {
  background-color: #000 !important;
  border-color: #000 !important;
}

.dark body .breadcrumb-item+.breadcrumb-item::before {
  color: #aab8c5 !important;
}

.dark body .breadcrumb-item.active {
  color: #aab8c5;
}

.dark body .bg-primary {
  background-color: var(--bs-secondary) !important;
}

.dark body .form-check-input:checked {
  background-color: var(--bs-secondary) !important;
  border-color: var(--bs-secondary) !important;
}

.dark body .swal2-popup,
.dark body .swal2-title {
  background: #282828 !important;
  color: #FFF !important;
}

.dark body .border-primary {
  border-color: #FFF !important;
}

.dark body .card.rgb-danger-light {
  background-color:
    color-mix(in srgb, var(--bs-danger), transparent 50%) !important;
}

.dark body .card.rgb-warning-light {
  background-color:
    color-mix(in srgb, var(--bs-warning), transparent 50%) !important;
}

.dark body .card.rgb-success-light {
  background-color:
    color-mix(in srgb, var(--bs-success), transparent 50%) !important;
}


.dark body .card.rgb-primary-light {
  background-color:
    color-mix(in srgb, var(--bs-primary), transparent 50%) !important;
}

.dark body .card.rgb-dark-light {
  background-color:
    color-mix(in srgb, #2e4c6a, transparent 50%) !important;
}

.dark body .card.rgb-secondary-light {
  background-color:
    color-mix(in srgb, var(--bs-secondary), transparent 50%) !important;
}

.dark body .card.deshcard03 {
  background-color: color-mix(in srgb, #B5FFD960, transparent 30%) !important;
}

.dark body .card.deshcard02 {
  background-color: color-mix(in srgb, #D09CFA50, transparent 30%) !important;
}

.dark body .bootstrap-select .btn-light {
  background-color: #272727 !important;
  color: #aab8c5 !important;
  border-color: #464f5b !important
}

.dark body .bootstrap-select>.dropdown-toggle.bs-placeholder,
.dark body .bootstrap-select>.dropdown-toggle.bs-placeholder:active,
.dark body .bootstrap-select>.dropdown-toggle.bs-placeholder:focus,
.dark body .bootstrap-select>.dropdown-toggle.bs-placeholder:hover {
  color: #aab8c5 !important;
  background-color: transparent !important;
}

.dark body .bootstrap-select .dropdown-menu {
  background: #282828 !important;
  color: #FFF !important;
  border-color: #37404a !important;
}

.dark body .bootstrap-select .dropdown-menu .dropdown-item {
  color: #FFF;
}

.dark body .bootstrap-select .dropdown-menu .dropdown-item:focus,
.dark body .bootstrap-select .dropdown-menu .dropdown-item:hover {
  color: var(--bs-dropdown-link-hover-color) !important;
  background-color: var(--bs-dropdown-link-hover-bg);
}

.dark body .list-group-item {
  background-color: transparent !important;
  border-color: #3e454d !important;
}

.dark body .modal .modal-content {
  background-color: #242930 !important;
}

.dark body .modal-footer,
.dark body .modal-header {
  border-color: #4a4a4a !important;
}

.dark body .modal {
  background-color: #1818186c !important;
}

.dark body .checkbox-switch:checked~.switch {
  background-color: var(--bs-secondary) !important;
}

.dark body .card-header .checkbox-switch:checked~.switch {
  background-color: var(--bs-primary) !important;
}

.dark body .nav-tabs .nav-item.show .nav-link,
.dark body .nav-tabs .nav-link.active {
  color: #FFF !important;
  background-color: #37404a !important;
  border-color: #37404a !important;
}

.dark body .nav-tabs {
  --bs-nav-tabs-link-active-bg: #37404a !important;
}

.dark body .nav-link {
  color: #ffffff !important;
}

.dark body .nav-tabs {
  border-bottom: var(--bs-nav-tabs-border-width) solid #37404a !important;
}

.dark body .analyticsmainbtn.nav-tabs .nav-item.show .nav-link,
.dark body .nav-tabs .nav-link.active {
  color: #fff;
  background-color: var(--bs-secondary) !important;
}

.dark body .qty-input2.small {
  border: 1px solid var(--bs-white) !important;
}

.dark body .qty-input2 .change-qty-2 {
  color: #fff !important;
  background: var(--bs-secondary);
}

.dark body .price-range .circle,
.dark body .offcanvas .offcanvas-body .price-range .circle,
.dark body .modal .modal-footer .price-range .circle {
  background-color: var(--bs-secondary);
  color: #fff;
  border: 1px solid var(--bs-secondary);
}

.dark body .pay-total {
  border-top: 1px dashed #FFF !important;
}

.dark body .product-variations-wrapper .active {
  border-color: var(--bs-secondary) !important;
  background-color: var(--bs-secondary);
  color: #fff !important;
}

.dark body .size-variation .checkbox-inline {
  color: var(--bs-white);
}

.dark body ::placeholder {
  color: #aab8c5 !important;
  opacity: 1;
  /* Firefox */
}

.dark body [tooltip]::after {
  background-color: #ffffff !important;
  color: #000 !important;
}

.dark body [tooltip]:not([flow])::before,
.dark body [tooltip][flow^="down"]::before {
  bottom: 100%;
  border-bottom-width: 0;
  border-top-color: #d2d2d2;
}

.dark body .tooltip-inner {
  color: var(--bs-dark) !important;
  background-color: var(--bs-white);

}

.dark body .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before,
.dark body .bs-tooltip-start .tooltip-arrow::before {
  border-left-color: var(--bs-white) !important;
}

.dark body .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before,
.dark body .bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: var(--bs-white) !important;
}

.dark body .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before,
.dark body .bs-tooltip-end .tooltip-arrow::before {
  border-right-color: var(--bs-white) !important;
}

.dark body .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
.dark body .bs-tooltip-top .tooltip-arrow::before {
  border-top-color: var(--bs-white) !important;
}

/* ============================================================
   SIDEBAR COLAPSABLE (Admin escritorio)
   El layout base usa columnas Bootstrap (col-lg-3/col-xl-2 para el
   sidebar), no flexbox con ancho fijo -- por eso el colapso se logra
   sobreescribiendo el ancho de esas columnas por id, en vez de tocar
   flex-basis directo en .sidebar.
   ============================================================ */

.sb-head-foodiq {
  display: flex;
  align-items: center;
  padding: 4px 10px;
}

.sb-toggle-foodiq {
  margin-left: auto;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 8px;
  border: none;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: background .15s;
}

.sb-toggle-foodiq:hover {
  background: rgba(255, 255, 255, .18);
}

/* Boton para cerrar el sidebar mobile (offcanvas). A diferencia del
   toggle de desktop (30px, discreto porque el mouse apunta con precision),
   este debe notarse claramente en pantallas tactiles: minimo 44-48px de
   target, con fondo visible y buen espacio al costado del logo -- no un
   icono suelto y transparente que se pierde en la barra oscura. */
.offcanvas-close-foodiq {
  min-width: 48px;
  min-height: 48px;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  border: none;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex: 0 0 48px;
  transition: background .15s;
}

.offcanvas-close-foodiq:hover,
.offcanvas-close-foodiq:active {
  background: rgba(255, 255, 255, .2);
}

/* Franja "Filtros" de Reportes en mobile/tablet -- contraida por
   defecto, ocupa todo el ancho para que se note claramente. */
.reportes-filtros-toggle {
  padding: 12px 14px;
  font-weight: 700;
  min-height: 48px;
}

.reportes-filtros-toggle-icon {
  transition: transform .15s;
}

#reportesFiltrosToggleBtn[aria-expanded="true"] .reportes-filtros-toggle-icon {
  transform: rotate(180deg);
}

/* En mobile/tablet, los filtros van en grilla de 2 columnas (en vez de
   una columna larga) aunque cada campo se achique un poco. En desktop
   (>=992px) se mantiene el flex-wrap original de siempre. */
@media (max-width: 991.98px) {
  .reportes-filtros-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .reportes-filtros-grid > select,
  .reportes-filtros-grid > input {
    max-width: none !important;
    width: 100% !important;
  }

  .reportes-filtros-grid > button,
  .reportes-filtros-grid > span {
    grid-column: 1 / -1;
  }

  .reportes-filtros-grid > span {
    margin-left: 0 !important;
    text-align: left;
  }
}

#sidebarCol,
#contentCol {
  transition: flex-basis .18s ease, max-width .18s ease, width .18s ease;
}

.content-wrapper.sb-collapsed #sidebarCol {
  flex: 0 0 74px !important;
  max-width: 74px !important;
  width: 74px !important;
}

.content-wrapper.sb-collapsed #contentCol {
  flex: 0 0 calc(100% - 74px) !important;
  max-width: calc(100% - 74px) !important;
  width: calc(100% - 74px) !important;
}

.content-wrapper.sb-collapsed #adminSidebar .navbar-header-logoc {
  display: none;
}

.content-wrapper.sb-collapsed .sb-head-foodiq {
  justify-content: center;
}

.content-wrapper.sb-collapsed .sb-head-foodiq .sb-toggle-foodiq {
  margin-left: 0;
}

/* En colapsado, los <li> reales se ocultan -- el JS arma íconos de grupo
   aparte, a partir de este mismo sidebar ya renderizado por Blade, para
   no duplicar la lógica de permisos/plan/suscripción en JS. */
.content-wrapper.sb-collapsed #adminSidebar > .navbar-nav {
  display: none;
}

/* Contenedor de íconos que arma el JS para el modo colapsado */
.sb-collapsed-icons-foodiq {
  display: none;
  padding-top: 6px;
}

.content-wrapper.sb-collapsed .sb-collapsed-icons-foodiq {
  display: block;
}

.sb-group-icon-foodiq {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0;
  border-radius: 12px;
  cursor: pointer;
  color: rgba(255, 255, 255, .8);
  font-size: 16px;
  margin: 0 10px 4px 10px;
  position: relative;
}

.sb-group-icon-foodiq:hover,
.sb-group-icon-foodiq.flyout-open {
  background: rgba(255, 255, 255, .1);
  color: #fff;
}

.sb-group-icon-foodiq .sb-dot-foodiq {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--bs-secondary);
}

/* Flyout compartido -- reutiliza "sidebar bg-change-mode" para el fondo
   navy y el color de texto/hover/activo de los items clonados. */
.sb-flyout-foodiq {
  position: fixed;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  padding: 8px;
  min-width: 220px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .4);
  display: none;
  z-index: 1050;
  /* La clase "sidebar" (reutilizada para heredar colores) trae consigo,
     desde responsive.css, height:100vh + bottom:0 pensados para el
     sidebar real de pantalla completa. Acá el flyout debe medir solo lo
     que ocupa su contenido, así que se neutraliza explícitamente. */
  height: auto !important;
  max-height: 80vh;
  bottom: auto !important;
  margin-top: 0 !important;
}

.sb-flyout-foodiq.show {
  display: block;
}

.sb-flyout-foodiq .sb-flyout-label-foodiq {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
  padding: 6px 8px 8px 8px;
}

.sb-flyout-foodiq .sb-flyout-label-foodiq:empty {
  display: none;
}

.sb-flyout-foodiq .navbar-nav {
  height: auto !important;
  max-height: 70vh;
  overflow-y: auto !important;
  padding-bottom: 4px !important;
}

/* Separador + estilo apagado para "Cerrar sesión" en el sidebar colapsado */
.sb-collapsed-sep-foodiq {
  height: 1px;
  background: rgba(255, 255, 255, .12);
  margin: 8px 14px 6px 14px;
}

.sb-logout-icon-foodiq {
  opacity: .6;
}

.sb-logout-icon-foodiq:hover {
  opacity: 1;
}


/* ============================================================
   KDS -- Pedidos en Cocina (tablero Kanban de 3 columnas)
   Pilar 1 (operacion): colores neutros, cero decoracion. El terracota
   se reserva para "se esta demorando"; el rojo puro para "cancelado"
   (nunca el mismo color para ambas cosas). El verde de marca NO se usa
   aca a proposito -- esta reservado para Estrategia de Ventas.
   ============================================================ */

.kds-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.kds-cols > div:not(:first-child) {
  border-left: 1px solid #E8E6DE;
  padding-left: 14px;
}

/* Cada columna scrollea de forma independiente (en vez de depender del
   scroll de toda la pagina, que en este layout admin puede vivir en un
   contenedor ancestro distinto y hacer que el sticky no se note). Con
   esto el head de cada columna SIEMPRE queda pegado arriba mientras se
   scrollea esa columna en particular, sin importar el layout de afuera. */
.kds-col-scroll {
  max-height: calc(100vh - 260px);
  overflow-y: auto;
}

.kds-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  border-radius: 10px;
  margin-bottom: 10px;
  position: sticky;
  top: 0;
  z-index: 15;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.kds-col-head-nuevo {
  background: #F0DDA8;
  border: 1.5px solid #E0C583;
}

.kds-col-head-prep {
  background: #B9D9F7;
  border: 1.5px solid #93BFEA;
}

.kds-col-head-listo {
  background: #B7E4B0;
  border: 1.5px solid #94D18B;
}

.kds-col-label {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: #001529;
}

.kds-count {
  font-size: 13px;
  font-weight: 600;
  padding: 1px 10px;
  border-radius: 20px;
  background: #001529;
  color: #fff;
}

.kds-empty {
  font-size: 13px;
  color: #888780;
  padding: 10px 4px;
}

.kds-card {
  position: relative;
  background: #fff;
  border: 1.5px solid rgba(0, 21, 41, .16);
  border-radius: 12px;
  padding: 11px 13px;
  margin-bottom: 10px;
  box-shadow: 0 2px 6px rgba(0, 21, 41, .06);
  cursor: pointer;
  transition: box-shadow .15s, border-color .15s;
}

.kds-card:hover {
  box-shadow: 0 4px 14px rgba(0, 21, 41, .12);
  border-color: rgba(0, 21, 41, .28);
}

.kds-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #E3DEF2;
  margin: -11px -13px 8px;
  padding: 10px 13px;
  border-radius: 12px 12px 0 0;
}

.kds-card-label {
  color: #3A2E5C;
  font-size: 15px;
  font-weight: 600;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kds-card-ordernum {
  font-size: 12px;
  font-weight: 600;
  color: #6B5B95;
}

/* Popup de detalle -- replica visual de una comanda impresa real
   (fuente monoespaciada, barras negras, lineas punteadas), con los
   botones de accion reales en un pie separado del "papel". */
.kds-ticket-wrap {
  font-family: 'Courier New', Courier, monospace;
  background: #fff;
  width: 100%;
  max-width: 540px;
  border-radius: 8px;
  position: relative;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}

.kds-ticket-close {
  position: absolute;
  top: 13px;
  right: 13px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: #F1EFE8;
  color: #333;
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  cursor: pointer;
  z-index: 2;
}

.kds-ticket-scroll {
  overflow-y: auto;
  padding: 35px 32px 24px;
}

.kds-ticket-channel {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0;
}

.kds-ticket-sub {
  text-align: center;
  font-size: 15px;
  color: #555;
  margin: 3px 0 0;
}

.kds-ticket-dash {
  border: none;
  border-top: 1.5px dashed #999;
  margin: 19px 0;
}

.kds-ticket-ordernum {
  background: #111;
  color: #fff;
  text-align: center;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 14px 8px;
  margin: 0 0 5px;
}

.kds-ticket-meta-row {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  margin-top: 13px;
}

.kds-ticket-item-name {
  background: #111;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  padding: 10px 11px;
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.kds-ticket-item-status {
  font-size: 13px;
  font-weight: 700;
  background: #fff;
  color: #111;
  padding: 3px 9px;
  border-radius: 4px;
  text-transform: uppercase;
  white-space: nowrap;
}

.kds-ticket-item-status.listo {
  background: #cfead2;
}

.kds-ticket-item-status.prep {
  background: #ffe9b8;
}

.kds-ticket-notes-label {
  font-size: 16px;
  font-weight: 700;
  margin: 22px 0 5px;
}

.kds-ticket-notes-box {
  border: 1.5px dashed #999;
  padding: 14px 16px;
  font-size: 17px;
  line-height: 1.6;
  min-height: 62px;
}

/* Pie de acciones -- se corta claramente del "papel": otra tipografia,
   otro fondo, para que se note que ahi empieza la interfaz de verdad. */
.kds-ticket-actions {
  border-top: 1.5px solid #E8E6DE;
  padding: 19px 32px 27px;
  background: #FAF9F5;
  font-family: 'Outfit', sans-serif;
}

.kds-ticket-action-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 13px;
  padding: 11px 0;
}

.kds-ticket-action-name {
  font-size: 17px;
  font-weight: 600;
  color: #001529;
  flex-shrink: 0;
}

.kds-ticket-actions .kds-advance-btn {
  width: auto;
  height: 46px;
  padding: 0 19px;
  font-size: 16px;
}

.kds-ticket-actions .kds-done-row {
  width: auto;
}

.kds-time-badge {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 20px;
  flex: 0 0 auto;
  white-space: nowrap;
}

.kds-time-ok {
  background: #F1EFE8;
  color: #5F5E5A;
}

.kds-time-warn {
  background: #FAEEDA;
  color: #633806;
}

.kds-time-urgent {
  background: #E8734A;
  color: #fff;
}

.kds-notes {
  font-size: 12.5px;
  color: #633806;
  background: #FAEEDA;
  padding: 6px 9px;
  border-radius: 8px;
  margin: 8px 0;
}

.kds-prod-row-stacked {
  padding: 12px 0;
  border-top: 1px solid rgba(0, 21, 41, .07);
}

.kds-prod-name {
  font-size: 15px;
  color: #001529;
  display: block;
  margin-bottom: 8px;
}

.kds-prod-variant {
  color: #5F5E5A;
  font-size: 13px;
}

.kds-advance-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  border: none;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .08s, opacity .1s;
}

.kds-advance-btn:active {
  transform: scale(.97);
}

.kds-advance-btn-pending {
  opacity: .55;
}

.kds-advance-to-2 {
  background: #F1EFE8;
  color: #2C2C2A;
}

.kds-advance-to-3 {
  background: #D9A441;
  color: #fff;
}

.kds-advance-to-1 {
  background: #2C2C2A;
  color: #fff;
}

.kds-done-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 2px;
}

.kds-done-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: #085041;
  background: #E1F5EE;
  padding: 6px 12px;
  border-radius: 20px;
}

.kds-undo-link {
  background: none;
  border: none;
  font-size: 12.5px;
  color: #888780;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px;
}

@media (max-width: 480px) {
  .kds-col-label {
    font-size: 13px;
  }

  .kds-card {
    padding: 10px 11px;
  }

  .kds-card-label {
    font-size: 14px;
  }

  .kds-time-badge {
    font-size: 11.5px;
    padding: 2px 8px;
  }

  .kds-prod-name {
    font-size: 14px;
  }

  .kds-advance-btn {
    height: 54px;
    font-size: 14px;
  }
}

.kds-card-cancelled {
  background: #DC3545;
  border-color: #DC3545;
}

.kds-card-cancelled-title {
  color: #fff;
  font-weight: 600;
  font-size: 14.5px;
}

.kds-card-cancelled-sub {
  color: rgba(255, 255, 255, .85);
  font-size: 12.5px;
  margin: 6px 0 10px;
}

.kds-ack-btn {
  width: 100%;
  background: #fff;
  color: #791F1F;
  border: none;
  border-radius: 8px;
  padding: 9px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.kds-jump-bar {
  display: none;
}

@media (max-width: 991px) {
  .kds-cols {
    grid-template-columns: 1fr;
  }

  .kds-cols > div:not(:first-child) {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid #E8E6DE;
    padding-top: 14px;
  }

  /* En mobile las 3 columnas se apilan en una sola pagina continua (el
     jump-bar salta entre secciones con anchors) -- el scroll aislado por
     columna es solo para el layout de 3 columnas lado a lado de desktop. */
  .kds-col-scroll {
    max-height: none;
    overflow-y: visible;
  }

  .kds-jump-bar {
    display: flex;
    gap: 8px;
    position: sticky;
    top: 0;
    z-index: 20;
    background: #F6FBF7;
    padding: 8px 0;
    margin-bottom: 6px;
  }

  .kds-jump-btn {
    flex: 1;
    border: 1.5px solid transparent;
    border-radius: 20px;
    padding: 10px 6px;
    font-size: 13px;
    font-weight: 700;
    background: #F1EFE8;
    color: #2C2C2A;
    cursor: pointer;
  }

  .kds-jump-btn[data-jump-target="kdsColHeadNuevo"] {
    background: #F6FBF7;
    border-color: #C0DD97;
    color: #001529;
  }

  .kds-jump-btn[data-jump-target="kdsColHeadPrep"] {
    background: #E1F5EE;
    border-color: #7ED3B8;
    color: #085041;
  }

  .kds-jump-btn[data-jump-target="kdsColHeadListo"] {
    background: #F1EFE8;
    border-color: #C9C4B4;
    color: #2C2C2A;
  }

  /* El head de cada columna queda pegado justo debajo de la barra de
     saltos (que ya es sticky arriba de todo), para no perderlo de vista
     mientras se scrollea una lista larga de pedidos. */
  .kds-col-head {
    top: 46px;
  }
}

/* ============================================================
   Alerta de "listo para entregar" en Salon (Mapa de Mesas / Cuentas
   Abiertas). Toast simple, no bloquea la pantalla, se apila si hay
   mas de un pedido listo a la vez.
   ============================================================ */

.salon-ready-toast-wrap {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1080;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 320px;
}

.salon-ready-toast {
  background: #001529;
  color: #fff;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13.5px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  display: flex;
  align-items: center;
  gap: 10px;
}

.salon-ready-toast i {
  color: #8ECF6A;
  font-size: 16px;
}

/* ============================================================
   SALON -- Mapa de Mesas (rediseno). Mismos tokens de color que el
   KDS: teal = "en curso" (ocupada), mostaza = "accion pendiente"
   (reservada, atento a que llegue), terracota = alerta/urgencia
   (choque de reserva), neutro = libre (nada que atender). El verde
   de marca no se usa aca a proposito -- esta reservado para
   Estrategia de Ventas (Parte 1.2 del documento de traspaso).
   ============================================================ */

.salon-stat-strip {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.salon-stat-pill {
  flex: 1;
  min-width: 130px;
  background: #fff;
  border: 1px solid rgba(0, 21, 41, .1);
  border-radius: 10px;
  padding: 7px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.salon-stat-pill .salon-stat-label {
  font-size: 11.5px;
  color: #5F5E5A;
  display: flex;
  align-items: center;
  gap: 6px;
}

.salon-stat-icon {
  font-size: 13px;
}

.salon-stat-pill .salon-stat-value {
  font-size: 16px;
  font-weight: 600;
  color: #001529;
}

.salon-stat-pill--free {
  background: #EAF3DE;
  border-color: #C0DD97;
}

.salon-stat-pill--free .salon-stat-icon,
.salon-stat-pill--free .salon-stat-label,
.salon-stat-pill--free .salon-stat-value {
  color: #3B6D11;
}

.salon-stat-pill--reserved {
  background: #FAEEDA;
  border-color: #FAC775;
}

.salon-stat-pill--reserved .salon-stat-icon,
.salon-stat-pill--reserved .salon-stat-label,
.salon-stat-pill--reserved .salon-stat-value {
  color: #633806;
}

.salon-stat-pill--occupied {
  background: #FCEBEB;
  border-color: #F09595;
}

.salon-stat-pill--occupied .salon-stat-icon,
.salon-stat-pill--occupied .salon-stat-label,
.salon-stat-pill--occupied .salon-stat-value {
  color: #A32D2D;
}

.salon-stat-pill--occupancy {
  background: #F1EFE8;
  border-color: rgba(0, 21, 41, .2);
}

.salon-stat-pill--occupancy .salon-stat-icon,
.salon-stat-pill--occupancy .salon-stat-label,
.salon-stat-pill--occupancy .salon-stat-value {
  color: #001529;
}

.salon-board-card {
  position: relative;
}

.salon-view-pill {
  border: none;
  border-radius: 999px;
  padding: 8px 20px;
  font-size: 15px;
  font-weight: 600;
  background: #F1EFE8;
  color: #5F5E5A;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.salon-view-pill.active {
  background: #001529;
  color: #fff;
}

.salon-view-pill-tabs {
  list-style: none;
  display: flex;
  gap: 8px;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}

/* Cuentas Abiertas -- pestaña Mesas: reusa la misma tarjeta de mesa que
   el Mapa de Mesas, siempre en rojo/naranja porque toda mesa que
   aparece acá está, por definición, Ocupada (tiene pedidos sin pagar). */
.cuentas-mesa-card {
  text-decoration: none;
  color: inherit;
  background: #F8F8F5;
  border-color: #E8E6DE;
}

.cuentas-mesa-card .salon-mesa-icon {
  color: #5F5E5A;
}

.cuentas-mesa-card:hover {
  text-decoration: none;
  color: inherit;
}

.cuentas-mesa-total {
  font-size: 20px;
  font-weight: 600;
  color: #A32D2D;
  margin: 8px 0 12px;
}

.cuentas-mesa-btn {
  background: #18A293;
  color: #fff;
  margin-top: 4px;
}

.cuentas-advance-amount {
  color: #3B6D11;
  font-size: 14px;
}

/* ============================================================
   CUENTAS ABIERTAS -- detalle de mesa (Ver / Cerrar Cuenta). Misma
   familia visual que el resto de Salon: tarjetas blancas con titulo +
   icono, filas livianas en vez de tablas de Bootstrap genericas.
   ============================================================ */

.cuentas-card .card-body {
  padding: 20px;
}

.cuentas-section-title {
  font-size: 13px;
  font-weight: 600;
  color: #001529;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.cuentas-section-title i {
  color: #18A293;
  font-size: 14px;
}

.cuentas-section-title-sm {
  font-size: 13px;
  margin-bottom: 10px;
}

.cuentas-icon-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #E8E6DE;
  color: #5F5E5A;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 18px;
}

.cuentas-icon-btn:hover {
  background: #F1EFE8;
  color: #001529;
}

.cuentas-icon-btn-danger {
  color: #A32D2D;
  border-color: #F0C7C7;
}

.cuentas-icon-btn-danger:hover {
  background: #FCEBEB;
  color: #A32D2D;
}

/* Productos de la mesa */
.cuentas-product-table {
  margin-bottom: 6px;
}

.cuentas-single-col {
  max-width: 760px;
}

.cuentas-product-group-label {
  font-size: 13px;
  font-weight: 600;
  color: #18A293;
  background: #F1EFE8;
  padding: 8px 12px;
  margin-top: 14px;
  border-radius: 8px;
}

.cuentas-product-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 4px;
  border-bottom: 1px solid #F8F8F5;
}

.cuentas-product-main {
  flex: 1;
  min-width: 0;
}

.cuentas-product-name {
  font-weight: 600;
  font-size: 15.5px;
  color: #001529;
}

.cuentas-product-detail {
  font-size: 12px;
  color: #8a938e;
  margin-top: 2px;
}

.cuentas-product-qtyprice {
  font-size: 13px;
  color: #8a938e;
  margin-top: 3px;
}

.cuentas-product-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.cuentas-product-subtotal {
  font-weight: 600;
  font-size: 15.5px;
  color: #001529;
  white-space: nowrap;
}

.cuentas-totals {
  margin-top: 6px;
}

.cuentas-totals-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #5F5E5A;
  padding: 7px 4px;
  border-top: 1px solid #F1EFE8;
}

.cuentas-totals-row strong {
  color: #001529;
}

.cuentas-totals-row-final {
  font-weight: 600;
  font-size: 15px;
}

.cuentas-totals-row-final strong {
  color: #001529;
}

/* Adelantos */
.cuentas-advance-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #F6FBF7;
  border: 1px solid #DCEAC9;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 8px;
}

.cuentas-advance-when {
  font-size: 13px;
  color: #001529;
  font-weight: 500;
}

.cuentas-advance-who {
  font-size: 11.5px;
  color: #5F5E5A;
}

.cuentas-dashed-btn {
  width: 100%;
  background: none;
  border: 1.5px dashed #C0C0B8;
  border-radius: 10px;
  color: #5F5E5A;
  font-size: 13px;
  font-weight: 600;
  padding: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.cuentas-dashed-btn:hover {
  background: #F8F8F5;
  color: #001529;
}

/* Los 2 botones de accion -- cada uno abre su propio popup */
.cuentas-action-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.cuentas-action-btn {
  flex: 1;
  min-width: 220px;
  height: 64px;
  border: none;
  border-radius: 14px;
  font-size: 15.5px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.cuentas-action-btn-outline {
  background: #F1EFE8;
  color: #2C2C2A;
}

.cuentas-action-btn-outline:hover {
  background: #E8E6DE;
}

.cuentas-action-btn-primary {
  background: #18A293;
  color: #fff;
}

.cuentas-action-btn-primary:hover {
  background: #147F73;
}

/* Popups -- de verdad flotan sobre toda la pantalla, no empujan la
   pagina. Se usan tanto para "Adelantar pago" como para "Cobrar y
   cerrar cuenta". */
.cuentas-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 21, 41, .45);
  z-index: 1050;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.cuentas-modal-backdrop.show {
  display: flex;
}

.cuentas-modal-card {
  background: #fff;
  border-radius: 16px;
  padding: 32px;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow: auto;
}

/* Popup "Cobrar y cerrar cuenta" (wizard de 3 pasos) -- mas ancho y con
   texto/inputs mas grandes que el resto de los popups de Cuentas
   Abiertas, a pedido (se veia muy chico comparado con el wizard del
   POS, que usa 880px). Solo afecta a este popup puntual. */
#closeModal .cuentas-modal-card {
  max-width: 720px;
  padding: 40px;
}
#closeModal .cuentas-modal-title {
  font-size: 26px;
}
#closeModal .cuentas-modal-subtitle {
  font-size: 16px;
}
#closeModal .cuentas-modal-label {
  font-size: 15px;
}
#closeModal .cuentas-modal-input,
#closeModal .cuentas-modal-select {
  height: 58px;
  font-size: 17px;
}
#closeModal .cuentas-doc-pill {
  font-size: 16px;
  padding: 14px 22px;
}
#closeModal .cuentas-modal-btn {
  height: 54px;
  font-size: 16px;
  padding: 0 28px;
}
@media (max-width: 576px) {
  #closeModal .cuentas-modal-card {
    padding: 24px;
  }
}

.cuentas-modal-title {
  font-size: 22px;
  font-weight: 600;
  color: #001529;
  margin-bottom: 8px;
}

.cuentas-modal-subtitle {
  font-size: 14.5px;
  color: #5F5E5A;
  margin: 0 0 24px;
}

.cuentas-payment-line {
  padding-top: 16px;
  margin-bottom: 16px;
}

.cuentas-payment-line:not(:first-child) {
  border-top: 1px solid #F1EFE8;
}

.cuentas-modal-label {
  font-size: 13.5px;
  color: #5F5E5A;
  display: block;
  margin-bottom: 6px;
}

.cuentas-modal-select,
.cuentas-modal-input {
  width: 100%;
  height: 52px;
  border-radius: 10px;
  border: 1px solid #E8E6DE;
  padding: 0 14px;
  font-size: 16px;
  box-sizing: border-box;
}

.cuentas-modal-big-input {
  width: 100%;
  height: 72px;
  border-radius: 12px;
  border: 2px solid #E8E6DE;
  padding: 0 18px;
  font-size: 28px;
  font-weight: 600;
  color: #001529;
  box-sizing: border-box;
  margin-bottom: 8px;
}

.cuentas-modal-hint {
  font-size: 13px;
  color: #888780;
  margin: 0 0 24px;
}

.cuentas-modal-actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.cuentas-modal-btn {
  height: 56px;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.cuentas-modal-btn-cancel {
  flex: 1;
  background: #F1EFE8;
  color: #5F5E5A;
}

.cuentas-modal-btn-confirm {
  flex: 2;
  background: #18A293;
  color: #fff;
}

.cuentas-modal-btn-confirm:disabled {
  background: #C0C0B8;
  cursor: not-allowed;
}

/* Resumen */
.cuentas-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 13.5px;
  color: #5F5E5A;
  padding: 8px 0;
}

.cuentas-summary-row strong {
  color: #001529;
}

.cuentas-summary-advanced {
  color: #3B6D11 !important;
}

.cuentas-summary-balance {
  font-size: 18px;
  font-weight: 600;
  border-top: 1px solid #F1EFE8;
  margin-top: 4px;
  padding-top: 12px;
  color: #001529;
}

.cuentas-summary-balance strong {
  color: #A32D2D;
  font-size: 20px;
}

.cuentas-doc-pill {
  flex: 1;
  height: 44px;
  border: none;
  border-radius: 8px;
  background: #F1EFE8;
  color: #5F5E5A;
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
}

.cuentas-doc-pill.active {
  background: #001529;
  color: #fff;
}

@media (max-width: 576px) {
  .cuentas-product-name {
    font-size: 15px;
  }

  .cuentas-product-subtotal {
    font-size: 15px;
  }
}

.salon-legend {
  display: flex;
  gap: 10px;
  font-size: 11px;
  color: #5F5E5A;
  align-items: center;
}

.salon-legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 3px;
}

.salon-res-count {
  background: #D9A441;
  color: #fff;
  border-radius: 12px;
  padding: 1px 8px;
  font-size: 12px;
  margin-left: 8px;
}

.salon-res-list {
  background: #FAF9F5;
  border: 1px solid #E8E6DE;
  border-radius: 10px;
  padding: 4px 16px;
}

.salon-res-row {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  font-size: 13.5px;
}

.salon-res-row:not(:last-child) {
  border-bottom: 1px solid #F1EFE8;
}

.salon-res-row .salon-res-who {
  color: #001529;
  font-weight: 500;
}

.salon-res-row .salon-res-where {
  color: #5F5E5A;
}

.salon-area-group {
  margin-bottom: 20px;
}

.salon-area-title {
  font-size: 12px;
  font-weight: 600;
  color: #5F5E5A;
  margin-bottom: 10px;
}

.salon-area-title i {
  color: #888780;
  margin-right: 5px;
}

.salon-mesa-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.salon-mesa-card {
  position: relative;
  cursor: pointer;
  border-radius: 14px;
  padding: 20px 16px;
  text-align: center;
  border: 1px solid transparent;
  transition: transform .08s ease;
}

.salon-mesa-card:hover {
  transform: translateY(-2px);
}

.salon-mesa-card.selected {
  outline: 2px solid #001529;
}

.salon-mesa-card.salon-mesa-libre {
  background: #EAF3DE;
  border-color: #C0DD97;
}

.salon-mesa-card.salon-mesa-ocupada {
  background: #FCEBEB;
  border-color: #F09595;
}

.salon-mesa-card.salon-mesa-reservada {
  background: #FAEEDA;
  border-color: #FAC775;
}

.salon-mesa-icon {
  font-size: 40px;
}

.salon-mesa-libre .salon-mesa-icon,
.salon-mesa-libre .salon-mesa-status {
  color: #3B6D11;
}

.salon-mesa-ocupada .salon-mesa-icon,
.salon-mesa-ocupada .salon-mesa-status,
.salon-mesa-ocupada .salon-mesa-meta {
  color: #A32D2D;
}

.salon-mesa-reservada .salon-mesa-icon,
.salon-mesa-reservada .salon-mesa-status,
.salon-mesa-reservada .salon-mesa-meta {
  color: #633806;
}

.salon-mesa-name {
  font-weight: 700;
  font-size: 20px;
  color: #001529;
  margin-top: 10px;
}

.salon-mesa-meta {
  font-size: 14.5px;
  color: #5F5E5A;
}

.salon-mesa-status {
  font-size: 14.5px;
  font-weight: 600;
  margin-top: 6px;
}

.salon-mesa-conflict-icon {
  position: absolute;
  top: 14px;
  right: 14px;
  color: #E8734A;
  font-size: 15px;
}

.salon-mesa-next-res {
  font-size: 11.5px;
  color: #18A293;
  margin-top: 4px;
}

.salon-detail-overlay {
  position: absolute;
  top: 16px;
  right: 16px;
  bottom: 16px;
  width: 380px;
  background: #fff;
  border: 1px solid rgba(0, 21, 41, .15);
  border-radius: 14px;
  padding: 26px;
  box-shadow: 0 4px 18px rgba(0, 21, 41, .12);
  overflow: auto;
  z-index: 10;
}

.salon-detail-close {
  cursor: pointer;
  color: #5F5E5A;
  font-size: 20px;
  padding: 4px;
}

.salon-detail-name {
  font-weight: 600;
  font-size: 20px;
  color: #001529;
}

.salon-detail-badge {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 20px;
  margin: 10px 0 16px;
}

.salon-module-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.salon-module-tabs::-webkit-scrollbar {
  display: none;
}

.salon-module-tabs > a {
  flex: 0 0 auto;
  white-space: nowrap;
}

.salon-detail-row {
  font-size: 14.5px;
  color: #5F5E5A;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid #F1EFE8;
}

#d_kitchen_status_row {
  background: #F1EFE8;
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 6px;
  border-top: none;
}

#d_kitchen_status_row:hover {
  background: #E8E6DE;
}

.salon-detail-row span {
  flex: 0 0 auto;
}

.salon-detail-row strong {
  color: #001529;
  font-size: 15px;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.salon-detail-alert {
  background: #FAECE7;
  color: #712B13;
  font-size: 13px;
  padding: 12px 14px;
  border-radius: 8px;
  margin-top: 14px;
  line-height: 1.5;
}

.salon-detail-btn {
  width: 100%;
  margin-top: 14px;
  height: 48px;
  border: none;
  border-radius: 8px;
  background: #F1EFE8;
  color: #2C2C2A;
  font-weight: 600;
  font-size: 14.5px;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.salon-manual-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.salon-manual-actions button {
  flex: 1;
  height: 44px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}

@media (max-width: 991px) {
  .salon-mesa-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* El panel de detalle en flujo normal quedaba mas abajo del plano y
     habia que scrollear para verlo -- por eso "no pasaba nada" al tocar
     una mesa. Ahora sale como hoja fija desde abajo, siempre visible. */
  .salon-detail-overlay {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: 75vh;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -6px 24px rgba(0, 21, 41, .18);
    z-index: 1050;
  }

  .salon-detail-backdrop:not(.d-none) {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 21, 41, .4);
    z-index: 1040;
  }
}

.salon-detail-backdrop {
  display: none;
}

/* ============================================================
   RESERVAS DE HOY -- mismos tokens de color que el resto de Salon.
   Confirmada=mostaza (accion pendiente, atento a que llegue),
   Completada=verde (resuelto), No se presento=rojo (alerta),
   Cancelada=neutro.
   ============================================================ */

.reserva-section-title {
  font-size: 13px;
  font-weight: 600;
  color: #001529;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.reserva-section-title i {
  color: #18A293;
  font-size: 14px;
}

.reserva-card {
  background: #fff;
  border: 1px solid #E8E6DE;
  border-radius: 14px;
  padding: 22px;
  cursor: pointer;
  text-align: left;
  transition: transform .08s ease;
}

.reserva-card:hover {
  transform: translateY(-2px);
}

.reserva-time {
  font-size: 24px;
  font-weight: 600;
  color: #001529;
}

.reserva-status-badge {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 20px;
}

.reserva-customer {
  font-size: 16px;
  font-weight: 500;
  color: #001529;
  margin-top: 10px;
}

.reserva-meta {
  font-size: 13.5px;
  color: #5F5E5A;
  margin-top: 4px;
}

.reserva-tables {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.reserva-table-badge {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  background: #F1EFE8;
  color: #5F5E5A;
}

.reserva-table-badge-empty {
  background: #FCEBEB;
  color: #A32D2D;
}

.reserva-edit-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: #18A293;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #F1EFE8;
}

.reserva-table-checklist {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid #E8E6DE;
  border-radius: 10px;
  padding: 8px 4px;
}

.reserva-table-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: 14px;
  color: #001529;
  cursor: pointer;
}

.reserva-table-check:hover {
  background: #F8F8F5;
}

.reserva-table-check input {
  width: 20px;
  height: 20px;
  accent-color: #18A293;
  flex-shrink: 0;
}

.reserva-save-btn {
  width: 100%;
  height: 44px;
  border: none;
  border-radius: 10px;
  background: #639922;
  color: #fff;
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
}

.reserva-save-btn:hover {
  background: #3B6D11;
}

/* ============================================================
   CAJA -- Abrir/Cerrar turno. Misma familia visual que el resto de
   Salon (tarjetas blancas, popups grandes, pastillas de color).
   ============================================================ */

.caja-single-col {
  max-width: 620px;
}

.caja-card-title {
  font-size: 20px;
  font-weight: 600;
  color: #001529;
}

#d_kitchen_chevron {
  transition: transform .15s ease;
}

.caja-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.caja-metric {
  background: #F8F8F5;
  border: 1px solid #E8E6DE;
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.caja-metric-label {
  font-size: 11.5px;
  color: #5F5E5A;
}

.caja-metric-value {
  font-size: 20px;
  font-weight: 600;
  color: #001529;
}

.caja-payment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.caja-payment-pill {
  border-radius: 12px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.caja-payment-pill i {
  font-size: 20px;
}

.caja-payment-pill-name {
  font-size: 12px;
  font-weight: 600;
  opacity: .85;
}

.caja-payment-pill-amount {
  font-size: 18px;
  font-weight: 600;
}

.caja-diff-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #F1EFE8;
  color: #5F5E5A;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  margin-top: 12px;
}

.caja-diff-ok {
  background: #EAF3DE;
  color: #3B6D11;
}

.caja-diff-bad {
  background: #FCEBEB;
  color: #A32D2D;
}

@media (max-width: 576px) {
  .caja-metric-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.reserva-cancel-btn {
  width: 100%;
  height: 44px;
  border: none;
  border-radius: 10px;
  background: #FCEBEB;
  color: #A32D2D;
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
}

.reserva-cancel-btn:hover {
  background: #F7C1C1;
}

/* Popup de Detalle de ventas (Caja) -- reusa cuentas-modal-backdrop pero
   con una tarjeta mas ancha porque adentro va una tabla. Header y footer
   quedan fijos (flex column) y solo el cuerpo de la tabla scrollea. */
.caja-detail-modal-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 21, 41, 0.25);
  width: 100%;
  max-width: 920px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.caja-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-shrink: 0;
  background: #fff;
  padding: 24px 28px 18px;
  border-bottom: 1px solid #F1EFE8;
}

.caja-detail-close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #F6F5F0;
  border: none;
  font-size: 15px;
  color: #5F5E5A;
  cursor: pointer;
  line-height: 1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.caja-detail-close:hover {
  background: #E8E6DE;
  color: #001529;
}

.caja-detail-scroll {
  overflow: auto;
  padding: 18px 28px 0;
}

.caja-detail-footer {
  flex-shrink: 0;
  background: #fff;
  border-top: 1px solid #F1EFE8;
  padding: 16px 28px;
}

.caja-detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.caja-detail-table thead th {
  position: sticky;
  top: 0;
  background: #FAF9F5;
  text-align: left;
  color: #5F5E5A;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .02em;
  padding: 10px;
  border-bottom: 2px solid #E8E6DE;
  white-space: nowrap;
}

.caja-detail-table td {
  padding: 12px 10px;
  border-bottom: 1px solid #F1EFE8;
  vertical-align: top;
  color: #001529;
}

.caja-detail-table tbody tr:nth-child(even) {
  background: #FAF9F5;
}

.caja-detail-table td.caja-detail-amount {
  text-align: right;
  font-weight: 600;
  color: #001529;
  white-space: nowrap;
}

.caja-detail-empty {
  text-align: center;
  color: #888780;
  padding: 40px 0;
  font-size: 14px;
}

.caja-detail-trigger {
  height: 44px;
  padding: 0 18px;
  border-radius: 10px;
  border: 1px solid #E8E6DE;
  background: #fff;
  color: #001529;
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.caja-detail-trigger:hover {
  background: #F6FBF7;
}

.caja-detail-download {
  height: 44px;
  padding: 0 18px;
  border-radius: 10px;
  border: none;
  background: #18A293;
  color: #fff;
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  white-space: nowrap;
}

.caja-detail-download:hover {
  background: #147F73;
  color: #fff;
}

/* Redes Sociales -- Programar: calendario tipo agenda de oficina
   (feedback 22/08, rediseño). Vista Mes: grilla 7x6. Vista Semana:
   grilla con columna de horas + 7 dias. Los "chips" son las
   publicaciones programadas, coloreados por estado. */
.cal-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.cal-month-head {
  background: #F8F7F3;
  padding: 8px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  color: #5F5E5A;
  border-bottom: 1px solid #EEE;
}
.cal-month-cell {
  min-height: 96px;
  border-right: 1px solid #EEE;
  border-bottom: 1px solid #EEE;
  padding: 6px;
  vertical-align: top;
}
.cal-month-cell.cal-dim {
  background: #FAFAF8;
  color: #C0C0B8;
}
.cal-month-cell.cal-today {
  background: #E8FBF8;
}
.cal-month-daynum {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
}
.cal-week-grid {
  display: grid;
  grid-template-columns: 56px repeat(7, 1fr);
}
.cal-week-head {
  background: #F8F7F3;
  padding: 8px 4px;
  font-size: 12px;
  text-align: center;
  color: #5F5E5A;
  border-bottom: 1px solid #EEE;
  position: sticky;
  top: 0;
}
.cal-week-head.cal-today {
  background: #E8FBF8;
  color: #0C9385;
}
.cal-week-hourcol {
  font-size: 11px;
  color: #999;
  padding: 6px 4px;
  text-align: right;
  border-right: 1px solid #EEE;
  border-bottom: 1px solid #F3F3F0;
}
.cal-week-cell {
  min-height: 44px;
  border-right: 1px solid #EEE;
  border-bottom: 1px solid #F3F3F0;
  padding: 2px;
}
.sched-cal-chip {
  font-size: 11px;
  padding: 2px 5px;
  border-radius: 4px;
  margin-bottom: 2px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sched-cal-chip:hover {
  filter: brightness(0.95);
}
@media (max-width: 767px) {
  .cal-week-grid { grid-template-columns: 40px repeat(7, minmax(60px, 1fr)); overflow-x: auto; }
  .cal-month-cell { min-height: 70px; font-size: 11px; }
}