@aaravpos/appointment-barber-booking 1.0.3 → 1.0.5

package/dist/styles.css

@@ -805,17 +805,17 @@
 .arravpos-m0 {
   margin: 0px !important;
 }
-.aaravpos-overflow-hidden {
+.aaravpos-barber-overflow-hidden {
   overflow: hidden;
 }
-.aaravpos-text-bold {
+.aaravpos-barber-text-bold {
   font-weight: 600;
   color: #000;
 }
-.aaravpos-tab-enabled {
+.aaravpos-barber-tab-enabled {
   cursor: pointer;
 }
-.aaravpos-tab-disabled {
+.aaravpos-barber-tab-disabled {
   cursor: not-allowed;
   opacity: 0.5;
   pointer-events: none;
@@ -828,16 +828,16 @@
   margin: 0 auto;
   height: 700px;
 }
-.aaravpos-margin-top-20 {
+.aaravpos-barber-margin-top-20 {
   margin-top: 20px;
 }
-.aaravpos-margin-bottom-20 {
+.aaravpos-barber-margin-bottom-20 {
   margin-bottom: 20px !important;
 }
-.aaravpos-mt-auto {
+.aaravpos-barber-mt-auto {
   margin-top: auto;
 }
-.aaravpos-btn {
+.aaravpos-barber-btn {
   gap: 8px;
   padding: 8px 16px;
   border: none;
@@ -861,35 +861,35 @@
   width: max-content;
   display: none;
 }
-.aaravpos-btn:hover {
+.aaravpos-barber-btn:hover {
   background: var(--btn-bg-hover, #222);
   color: var(--btn-text-hover, #fff);
 }
-.aaravpos-divider {
+.aaravpos-barber-divider {
   height: 1px;
   background: var(--border-color, #d4d4d4);
   margin: 2px 0px;
 }
-.aaravpos-btn:disabled {
+.aaravpos-barber-btn:disabled {
   opacity: 0.7;
   cursor: not-allowed;
 }
-.aaravpos-btn-content {
+.aaravpos-barber-btn-content {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
 }
-.aaravpos-tp-10 {
+.aaravpos-barber-tp-10 {
   margin-top: 10px;
 }
-.aaravpos-mb-10 {
+.aaravpos-barber-mb-10 {
   margin-bottom: 10px;
 }
-.aaravpos-padding-btn {
+.aaravpos-barber-padding-btn {
   padding: 9px 8px !important;
 }
-.aaravpos-layout {
+.aaravpos-barber-layout {
   height: 700px;
   display: flex;
   flex-direction: column;
@@ -897,15 +897,15 @@
   color: var(--copy, #000000);
   overflow: hidden;
 }
-.aaravpos-layout-content {
+.aaravpos-barber-layout-content {
   flex: 1;
   position: relative;
   max-height: 700px;
 }
-.aaravpos-layout-page {
+.aaravpos-barber-layout-page {
   height: 700px;
 }
-.aaravpos-title {
+.aaravpos-barber-title {
   font-size: 22px;
   font-weight: 600;
   text-transform: uppercase;
@@ -915,24 +915,24 @@
   line-height: 1.1;
   margin-top: 0px;
 }
-.aaravpos-main-layout {
+.aaravpos-barber-main-layout {
   display: flex;
   flex-direction: column;
   height: 700px;
 }
-.aaravpos-layout-wrapper {
+.aaravpos-barber-layout-wrapper {
   flex: 1;
   display: grid;
   grid-template-columns: 1fr;
   overflow: hidden;
   position: relative;
 }
-.aaravpos-main-content {
+.aaravpos-barber-main-content {
   padding: 16px;
   position: relative;
   min-width: 0;
 }
-.aaravpos-mobile-button {
+.aaravpos-barber-mobile-button {
   position: absolute;
   bottom: 12px;
   left: 0;
@@ -977,26 +977,26 @@
   overflow-y: auto;
   padding: 16px;
 }
-.aaravpos-outlet-divider {
+.aaravpos-barber-outlet-divider {
   width: 56px;
   height: 2px;
   background: var(--btn-bg);
   border-radius: 999px;
 }
-.aaravpos-header {
+.aaravpos-barber-header {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   gap: 16px;
   margin-bottom: 10px;
 }
-.aaravpos-search-wrapper {
+.aaravpos-barber-search-wrapper {
   position: relative;
   width: 100%;
   display: flex;
   align-items: center;
 }
-.aaravpos-search-icon {
+.aaravpos-barber-search-icon {
   position: absolute;
   left: 12px;
   top: 50%;
@@ -1007,7 +1007,7 @@
   justify-content: center;
   pointer-events: none;
 }
-.aaravpos-search-actions {
+.aaravpos-barber-search-actions {
   position: absolute;
   right: 12px;
   top: 50%;
@@ -1016,7 +1016,7 @@
   align-items: center;
   gap: 8px;
 }
-.aaravpos-search-clear {
+.aaravpos-barber-search-clear {
   border: none;
   background: transparent;
   color: #9ca3af;
@@ -1027,45 +1027,45 @@
   justify-content: center;
   padding: 0;
 }
-.aaravpos-search-clear:hover {
+.aaravpos-barber-search-clear:hover {
   color: #000000;
 }
-.aaravpos-outlet-list-wrapper {
+.aaravpos-barber-outlet-list-wrapper {
   padding-top: 8px;
   padding-bottom: 8px;
   height: 610px;
   overflow: auto;
   scrollbar-width: none;
 }
-.aaravpos-outlet-list-wrapper::-webkit-scrollbar {
+.aaravpos-barber-outlet-list-wrapper::-webkit-scrollbar {
   display: none;
 }
-.aaravpos-outlet-grid {
+.aaravpos-barber-outlet-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 16px;
   padding-bottom: 50px;
 }
-.aaravpos-empty-state {
+.aaravpos-barber-empty-state {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 80px 0;
 }
-.aaravpos-empty-content {
+.aaravpos-barber-empty-content {
   text-align: center;
 }
-.aaravpos-empty-title {
+.aaravpos-barber-empty-title {
   font-size: 20px;
   font-weight: 600;
   color: #1f2937;
   margin-bottom: 8px;
 }
-.aaravpos-empty-text {
+.aaravpos-barber-empty-text {
   font-size: 14px;
   color: #6b7280;
 }
-.aaravpos-outlet-card {
+.aaravpos-barber-outlet-card {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -1077,33 +1077,33 @@
   cursor: pointer;
   transition: all 0.3s ease;
 }
-.aaravpos-outlet-card:hover {
+.aaravpos-barber-outlet-card:hover {
   border-color: #d1d5db;
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
 }
-.aaravpos-outlet-card.selected {
+.aaravpos-barber-outlet-card.selected {
   border-color: var(--btn-bg-hover);
   background: #ffffff;
   box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
 }
-.aaravpos-outlet-card.closed {
+.aaravpos-barber-outlet-card.closed {
   border-color: #fca5a5;
   background: rgba(254, 242, 242, 0.5);
 }
-.aaravpos-outlet-card-top {
+.aaravpos-barber-outlet-card-top {
   display: flex;
   align-items: flex-start;
   justify-content: flex-end;
   position: absolute;
   right: 0px;
 }
-.aaravpos-outlet-card-content {
+.aaravpos-barber-outlet-card-content {
   padding: 14px;
 }
-.aaravpos-outlet-card-inner {
+.aaravpos-barber-outlet-card-inner {
   flex: 1;
 }
-.aaravpos-outlet-card-title {
+.aaravpos-barber-outlet-card-title {
   font-size: 18px;
   font-weight: 600;
   text-transform: uppercase;
@@ -1117,7 +1117,7 @@
   margin-bottom: 0px;
   margin-top: 0px;
 }
-.aaravpos-outlet-card-address {
+.aaravpos-barber-outlet-card-address {
   margin-top: 4px;
   font-size: 14px;
   color: #737373;
@@ -1130,7 +1130,7 @@
   -webkit-box-orient: vertical;
   margin-bottom: 0px;
 }
-.aaravpos-status-badge {
+.aaravpos-barber-status-badge {
   display: inline-flex;
   align-items: center;
   padding: 1px 6px;
@@ -1142,24 +1142,24 @@
   border-top-right-radius: 6px;
   border-bottom-left-radius: 6px;
 }
-.aaravpos-status-open {
+.aaravpos-barber-status-open {
   background: #ecfdf5;
   color: #047857;
   border-color: #a7f3d0;
 }
-.aaravpos-status-closed {
+.aaravpos-barber-status-closed {
   background: #fee2e2;
   color: #f87171;
   border-color: #fecaca;
 }
-.aaravpos-mobile-stepper {
+.aaravpos-barber-mobile-stepper {
   display: flex;
   align-items: center;
   flex-direction: row;
   gap: 4px;
   font-weight: 600;
 }
-.aaravpos-mobile-back-btn {
+.aaravpos-barber-mobile-back-btn {
   display: flex;
   align-items: center;
   font-size: 20px;
@@ -1170,21 +1170,21 @@
   color: #000000;
   padding: 0;
 }
-.aaravpos-mobile-back-btn:disabled {
+.aaravpos-barber-mobile-back-btn:disabled {
   color: #d1d5db;
   cursor: not-allowed;
 }
-.aaravpos-mobile-step-label {
+.aaravpos-barber-mobile-step-label {
   display: flex;
   align-items: center;
   flex-direction: row;
   font-size: 16px;
   font-weight: 500;
 }
-.aaravpos-desktop-stepper {
+.aaravpos-barber-desktop-stepper {
   display: none;
 }
-.aaravpos-desktop-back-btn {
+.aaravpos-barber-desktop-back-btn {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1198,16 +1198,16 @@
   border-radius: 100%;
   overflow: hidden;
 }
-.aaravpos-desktop-back-btn:hover {
+.aaravpos-barber-desktop-back-btn:hover {
   background: #f3f4f6;
 }
-.aaravpos-step-nav {
+.aaravpos-barber-step-nav {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   width: 100%;
   overflow: hidden;
 }
-.aaravpos-step-btn {
+.aaravpos-barber-step-btn {
   position: relative;
   height: 40px;
   display: flex;
@@ -1223,36 +1223,36 @@
   border-bottom: 2px solid transparent;
   background: transparent;
 }
-.aaravpos-step-btn.clickable {
+.aaravpos-barber-step-btn.clickable {
   cursor: pointer;
 }
-.aaravpos-step-btn.disabled {
+.aaravpos-barber-step-btn.disabled {
   cursor: not-allowed;
   opacity: 0.5;
   pointer-events: none;
 }
-.aaravpos-step-btn.active {
+.aaravpos-barber-step-btn.active {
   border-bottom-color: var(--btn-bg);
   color: #000000;
 }
-.aaravpos-step-btn.inactive {
+.aaravpos-barber-step-btn.inactive {
   color: rgba(0, 0, 0, 0.6);
 }
-.aaravpos-step-btn.inactive:hover {
+.aaravpos-barber-step-btn.inactive:hover {
   color: #000000;
 }
-.aaravpos-step-icon.active {
+.aaravpos-barber-step-icon.active {
   color: var(--btn-bg);
 }
-.aaravpos-step-icon.inactive {
+.aaravpos-barber-step-icon.inactive {
   color: var(--btn-bg-hover);
 }
-.aaravpos-navbar-form {
+.aaravpos-barber-navbar-form {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
 }
-.aaravpos-page-title {
+.aaravpos-barber-page-title {
   font-size: 22px;
   font-weight: 900;
   text-transform: uppercase;
@@ -1263,14 +1263,14 @@
   margin-bottom: 0px;
   margin-top: 0px;
 }
-.aaravpos-sub-title {
+.aaravpos-barber-sub-title {
   font-size: 14px;
   color: rgba(0, 0, 0, 0.6);
   margin-bottom: 10px;
   line-height: 1.5;
   margin-top: 0px;
 }
-.aaravpos-topbar {
+.aaravpos-barber-topbar {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -1278,12 +1278,12 @@
   margin-bottom: 12px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.4);
 }
-.aaravpos-tab-group {
+.aaravpos-barber-tab-group {
   display: flex;
   align-items: flex-end;
   gap: 32px;
 }
-.aaravpos-tab-btn {
+.aaravpos-barber-tab-btn {
   padding-bottom: 8px;
   border: none;
   border-bottom: 2px solid transparent;
@@ -1295,28 +1295,28 @@
   cursor: pointer;
   transition: all 0.3s ease;
 }
-.aaravpos-tab-btn.active {
+.aaravpos-barber-tab-btn.active {
   color: var(--btn-bg, #000);
   border-bottom-color: var(--btn-bg, #000);
 }
-.aaravpos-tab-btn.inactive {
+.aaravpos-barber-tab-btn.inactive {
   color: rgba(0, 0, 0, 0.4);
 }
-.aaravpos-tab-btn.inactive:hover {
+.aaravpos-barber-tab-btn.inactive:hover {
   color: #000;
 }
-.aaravpos-search-box {
+.aaravpos-barber-search-box {
   position: relative;
   width: 100%;
 }
-.aaravpos-search-icon {
+.aaravpos-barber-search-icon {
   position: absolute;
   left: 12px;
   top: 50%;
   transform: translateY(-50%);
   color: #9ca3af;
 }
-.aaravpos-search-input {
+.aaravpos-barber-search-input {
   width: 100%;
   padding: 8px 40px 8px 36px;
   border: 1px solid rgba(0, 0, 0, 0.3);
@@ -1325,10 +1325,10 @@
   outline: none;
   transition: all 0.3s ease;
 }
-.aaravpos-search-input:focus {
+.aaravpos-barber-search-input:focus {
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
 }
-.aaravpos-search-clear {
+.aaravpos-barber-search-clear {
   position: absolute;
   right: 12px;
   top: 50%;
@@ -1339,10 +1339,10 @@
   cursor: pointer;
   transition: all 0.3s ease;
 }
-.aaravpos-search-clear:hover {
+.aaravpos-barber-search-clear:hover {
   color: #000;
 }
-.aaravpos-supercategory-wrapper {
+.aaravpos-barber-supercategory-wrapper {
   display: flex;
   flex-wrap: nowrap;
   gap: 8px;
@@ -1351,10 +1351,10 @@
   margin-bottom: 12px;
   scrollbar-width: none;
 }
-.aaravpos-supercategory-wrapper::-webkit-scrollbar {
+.aaravpos-barber-supercategory-wrapper::-webkit-scrollbar {
   display: none;
 }
-.aaravpos-supercategory-btn {
+.aaravpos-barber-supercategory-btn {
   min-width: fit-content;
   padding: 7px;
   border: 1px solid rgba(0, 0, 0, 0.3);
@@ -1365,18 +1365,18 @@
   font-size: 14px;
   border-radius: 4px;
 }
-.aaravpos-supercategory-btn:hover {
+.aaravpos-barber-supercategory-btn:hover {
   border-color: rgba(0, 0, 0, 0.5);
 }
-.aaravpos-supercategory-btn.active {
+.aaravpos-barber-supercategory-btn.active {
   border-color: rgba(0, 0, 0, 0.4);
   background: rgba(0, 0, 0, 0.8);
   color: #fff;
 }
-.aaravpos-supercategory-btn.active .aaravpos-supercategory-count {
+.aaravpos-barber-supercategory-btn.active .aaravpos-barber-supercategory-count {
   color: #fff;
 }
-.aaravpos-subcategory-btn {
+.aaravpos-barber-subcategory-btn {
   min-width: fit-content;
   padding: 6px;
   border: 1px solid rgba(0, 0, 0, 0.3);
@@ -1387,10 +1387,10 @@
   font-size: 12px;
   border-radius: 4px;
 }
-.aaravpos-subcategory-btn:hover {
+.aaravpos-barber-subcategory-btn:hover {
   border-color: rgba(0, 0, 0, 0.5);
 }
-.aaravpos-subcategory-btn.active {
+.aaravpos-barber-subcategory-btn.active {
   border: 1px solid var(--app-bg);
   background: var(--app-bg);
   @supports (color: color-mix(in lab, red, red)) {
@@ -1398,16 +1398,16 @@
   }
   color: var(--app-bg);
 }
-.aaravpos-subcategory-btn.active .aaravpos-subcategory-count {
+.aaravpos-barber-subcategory-btn.active .aaravpos-barber-subcategory-count {
   color: #fff;
 }
-.aaravpos-supercategory-title {
+.aaravpos-barber-supercategory-title {
   margin-top: 0px;
   font-size: 14px;
   font-weight: 500;
   margin-bottom: 0px;
 }
-.aaravpos-supercategory-count {
+.aaravpos-barber-supercategory-count {
   font-size: 10px;
   font-weight: 600;
   text-transform: uppercase;
@@ -1416,22 +1416,22 @@
   margin-bottom: 0px;
   margin-top: 6px;
 }
-.aaravpos-services-wrapper {
+.aaravpos-barber-services-wrapper {
   overflow-y: auto;
   padding-bottom: 30px;
   scrollbar-width: none;
   -ms-overflow-style: none;
   height: 418px;
 }
-.aaravpos-services-wrapper::-webkit-scrollbar {
+.aaravpos-barber-services-wrapper::-webkit-scrollbar {
   display: none;
 }
-.aaravpos-services-grid {
+.aaravpos-barber-services-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
   gap: 12px;
 }
-.aaravpos-service-card {
+.aaravpos-barber-service-card {
   position: relative;
   border: 1px solid rgba(0, 0, 0, 0.3);
   border-radius: 6px;
@@ -1440,31 +1440,31 @@
   background: #ffffff;
   transition: all 0.25s ease;
 }
-.aaravpos-service-card:hover {
+.aaravpos-barber-service-card:hover {
   border-color: rgba(0, 0, 0, 0.6);
 }
-.aaravpos-service-card.active {
+.aaravpos-barber-service-card.active {
   border-color: var(--btn-bg);
   background: rgba(0, 0, 0, 0.03);
 }
-.aaravpos-tax-badge, .aaravpos-consent-badge {
+.aaravpos-barber-tax-badge, .aaravpos-barber-consent-badge {
   position: absolute;
   top: 0;
   font-size: 9px;
   padding: 2px 8px;
   color: #fff;
 }
-.aaravpos-tax-badge {
+.aaravpos-barber-tax-badge {
   left: 0;
   background: #15803d;
   border-radius: 0 0 6px 0;
 }
-.aaravpos-consent-badge {
+.aaravpos-barber-consent-badge {
   right: 0;
   background: rgba(0, 0, 0, 0.8);
   border-radius: 0 0 0 6px;
 }
-.aaravpos-service-title {
+.aaravpos-barber-service-title {
   font-size: 14px;
   font-weight: 700;
   margin-top: 0px;
@@ -1475,10 +1475,10 @@
   white-space: nowrap;
   margin-top: 12px;
 }
-.aaravpos-service-description-wrapper {
+.aaravpos-barber-service-description-wrapper {
   position: relative;
 }
-.aaravpos-service-description {
+.aaravpos-barber-service-description {
   font-size: 12px;
   font-weight: 600;
   color: rgba(0, 0, 0, 0.45);
@@ -1488,7 +1488,7 @@
   white-space: nowrap;
   margin: 5px 0px;
 }
-.aaravpos-service-tooltip {
+.aaravpos-barber-service-tooltip {
   position: absolute;
   display: none;
   top: 20px;
@@ -1500,10 +1500,10 @@
   background: #f5f5f5;
   border-radius: 6px;
 }
-.aaravpos-service-description-wrapper:hover .aaravpos-service-tooltip {
+.aaravpos-barber-service-description-wrapper:hover .aaravpos-barber-service-tooltip {
   display: block;
 }
-.aaravpos-service-price {
+.aaravpos-barber-service-price {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -1513,12 +1513,12 @@
   font-weight: 600;
   color: rgba(0, 0, 0, 0.6);
 }
-.aaravpos-service-price-right {
+.aaravpos-barber-service-price-right {
   display: flex;
   align-items: center;
   font-family: monospace;
 }
-.aaravpos-service-actions {
+.aaravpos-barber-service-actions {
   display: flex;
   align-items: center;
   justify-content: flex-start;
@@ -1526,7 +1526,7 @@
   border: 1px solid #d1d5db;
   width: fit-content;
 }
-.aaravpos-service-action-btn {
+.aaravpos-barber-service-action-btn {
   width: 40px;
   height: 32px;
   border: none;
@@ -1537,17 +1537,17 @@
   cursor: pointer;
   transition: background 0.2s ease;
 }
-.aaravpos-service-action-btn:hover {
+.aaravpos-barber-service-action-btn:hover {
   background: #f5f5f4;
 }
-.aaravpos-service-action-btn.plus {
+.aaravpos-barber-service-action-btn.plus {
   background: rgba(0, 0, 0, 0.8);
   color: white;
 }
-.aaravpos-service-action-btn.plus:hover {
+.aaravpos-barber-service-action-btn.plus:hover {
   background: rgba(0, 0, 0, 0.9);
 }
-.aaravpos-service-qty {
+.aaravpos-barber-service-qty {
   width: 40px;
   height: 32px;
   border-left: 1px solid #d1d5db;
@@ -1558,29 +1558,29 @@
   font-size: 14px;
   font-weight: 600;
 }
-.aaravpos-skeleton-card {
+.aaravpos-barber-skeleton-card {
   position: relative;
   height: 134px;
   overflow: hidden;
   border-radius: 4px;
   background: #e0e0e0;
 }
-.aaravpos-skeleton-shimmer {
+.aaravpos-barber-skeleton-shimmer {
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.5), transparent );
-  animation: aaravpos-shimmer 1.2s infinite;
+  animation: aaravpos-barber-shimmer 1.2s infinite;
 }
-.aaravpos-professional-wrapper {
+.aaravpos-barber-professional-wrapper {
   overflow-y: auto;
   scrollbar-width: none;
   -ms-overflow-style: none;
-  height: 585px;
+  height: 605px;
 }
-.aaravpos-professional-label {
+.aaravpos-barber-professional-label {
   font-size: 11px;
   font-weight: 700;
   color: #c1121f;
@@ -1588,43 +1588,42 @@
   margin-bottom: 8px;
   text-transform: uppercase;
 }
-.aaravpos-professional-grid {
+.aaravpos-barber-professional-grid {
   display: grid;
-  grid-template-columns: repeat(5, 1fr);
+  grid-template-columns: repeat(auto-fit, minmax(220px, 260px));
+  justify-content: center;
   gap: 34px;
 }
-.aaravpos-professional-header {
+.aaravpos-barber-professional-header {
   display: flex;
-  justify-content: space-between;
-  gap: 16px;
-  margin-bottom: 10px;
+  justify-content: center;
 }
-.aaravpos-professional-card {
+.aaravpos-barber-professional-card {
   background: #f6f6f6;
   border: 1px solid #ececec;
   padding: 16px;
   transition: all 0.3s ease;
   cursor: pointer;
 }
-.aaravpos-professional-card:hover {
+.aaravpos-barber-professional-card:hover {
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
-.aaravpos-professional-card.active {
+.aaravpos-barber-professional-card.active {
   border-color: rgba(var(--btn-bg), 0.08);
 }
-.aaravpos-professional-image-wrapper {
+.aaravpos-barber-professional-image-wrapper {
   width: 100%;
   height: 180px;
   overflow: hidden;
   background: #111111;
   margin-bottom: 18px;
 }
-.aaravpos-professional-image {
+.aaravpos-barber-professional-image {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
-.aaravpos-professional-avatar {
+.aaravpos-barber-professional-avatar {
   width: 100%;
   height: 100%;
   display: flex;
@@ -1634,13 +1633,13 @@
   color: #ffffff;
   font-weight: 800;
 }
-.aaravpos-professional-rating {
+.aaravpos-barber-professional-rating {
   font-size: 9px;
   font-weight: 600;
   color: #111111;
   margin: 0px;
 }
-.aaravpos-professional-name {
+.aaravpos-barber-professional-name {
   font-size: 16px;
   line-height: 1;
   font-weight: 900;
@@ -1649,7 +1648,7 @@
   margin-top: 6px;
   margin-bottom: 6px;
 }
-.aaravpos-professional-role {
+.aaravpos-barber-professional-role {
   font-size: 10px;
   font-weight: 700;
   color: #c1121f;
@@ -1658,7 +1657,7 @@
   margin-top: 0px;
   margin-bottom: 14px;
 }
-.aaravpos-professional-btn {
+.aaravpos-barber-professional-btn {
   width: 100%;
   height: 32px;
   border: 1px solid var(--btn-bg);
@@ -1670,45 +1669,46 @@
   text-transform: uppercase;
   transition: all 0.3s ease;
 }
-.aaravpos-professional-btn:hover {
+.aaravpos-barber-professional-btn:hover {
   background: var(--btn-bg-hover);
   color: var(--btn-text-hover);
   border-color: var(--btn-bg-hover);
 }
-.aaravpos-available-badge {
+.aaravpos-barber-available-badge {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-bottom: 20px;
 }
-.aaravpos-available-dot {
+.aaravpos-barber-available-dot {
   width: 6px;
   height: 6px;
   border-radius: 999px;
   background: #15803d;
   flex-shrink: 0;
 }
-.aaravpos-available-text {
+.aaravpos-barber-available-text {
   font-size: 11px;
   font-weight: 600;
   color: #166534;
   margin: 0;
 }
-.aaravpos-no-staff {
+.aaravpos-barber-no-staff {
   font-size: 14px;
   font-weight: 600;
   color: #111111;
 }
-.aaravpos-order-sidebar {
+.aaravpos-barber-order-sidebar {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 }
-.aaravpos-order-header {
+.aaravpos-barber-order-header {
   padding: 0px 0px 8px 0px;
   border-bottom: 1px solid #d1d5db;
+  position: relative;
 }
-.aaravpos-order-title {
+.aaravpos-barber-order-title {
   font-size: 16px;
   font-weight: 900;
   text-transform: uppercase;
@@ -1719,7 +1719,7 @@
   justify-content: space-between;
   align-items: center;
 }
-.aaravpos-order-subtitle {
+.aaravpos-barber-order-subtitle {
   font-size: 12px;
   font-weight: 600;
   color: rgba(0, 0, 0, 0.4);
@@ -1730,7 +1730,7 @@
   margin-bottom: 0px;
   margin-top: 0px;
 }
-.aaravpos-order-section-title {
+.aaravpos-barber-order-section-title {
   font-size: 13px;
   font-weight: 600;
   margin: 0px;
@@ -1740,14 +1740,14 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.aaravpos-order-list {
+.aaravpos-barber-order-list {
   overflow-y: auto;
   padding: 0px;
   scrollbar-width: none;
   -ms-overflow-style: none;
   margin: 4px 0px;
 }
-.aaravpos-pro-order-list {
+.aaravpos-barber-pro-order-list {
   height: calc(100dvh - 270px);
   overflow-y: auto;
   scrollbar-width: none;
@@ -1755,10 +1755,10 @@
   padding: 0px;
   margin: 4px 0px;
 }
-.aaravpos-order-list::-webkit-scrollbar, .aaravpos-pro-order-list::-webkit-scrollbar {
+.aaravpos-barber-order-list::-webkit-scrollbar, .aaravpos-barber-pro-order-list::-webkit-scrollbar {
   display: none;
 }
-.aaravpos-order-item {
+.aaravpos-barber-order-item {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -1766,10 +1766,10 @@
   padding: 8px 0;
   border-bottom: 1px dotted #9ca3af;
 }
-.aaravpos-order-item:last-child {
+.aaravpos-barber-order-item:last-child {
   border-bottom: none;
 }
-.aaravpos-order-service-name {
+.aaravpos-barber-order-service-name {
   font-size: 14px;
   font-weight: 500;
   text-transform: uppercase;
@@ -1780,7 +1780,7 @@
   overflow: hidden;
   margin: 0px;
 }
-.aaravpos-order-details {
+.aaravpos-barber-order-details {
   width: 100%;
   display: grid;
   gap: 4px;
@@ -1788,7 +1788,7 @@
   align-items: center;
   margin-top: 4px;
 }
-.aaravpos-order-detail {
+.aaravpos-barber-order-detail {
   display: flex;
   align-items: center;
   gap: 4px;
@@ -1797,36 +1797,36 @@
   color: rgba(0, 0, 0, 0.6);
   margin: 0px;
 }
-.aaravpos-order-detail.center {
+.aaravpos-barber-order-detail.center {
   justify-content: center;
 }
-.aaravpos-order-detail.right {
+.aaravpos-barber-order-detail.right {
   justify-content: flex-end;
   gap: 0px;
 }
-.aaravpos-order-footer {
+.aaravpos-barber-order-footer {
   padding-top: 5px;
 }
-.aaravpos-order-subtotal {
+.aaravpos-barber-order-subtotal {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   margin-bottom: 4px;
 }
-.aaravpos-order-subtotal-label {
+.aaravpos-barber-order-subtotal-label {
   font-size: 16px;
   font-weight: 600;
   color: rgba(0, 0, 0, 0.6);
   text-transform: capitalize;
 }
-.aaravpos-order-subtotal-price {
+.aaravpos-barber-order-subtotal-price {
   font-size: 18px;
   display: flex;
   align-items: center;
   font-family: monospace;
   font-weight: 600;
 }
-.aaravpos-common-btn {
+.aaravpos-barber-common-btn {
   width: 100%;
   margin-top: 10px;
   padding: 12px 8px;
@@ -1842,33 +1842,33 @@
   transition: all 0.2s ease;
   border-radius: 6px;
 }
-.aaravpos-common-btn:hover {
+.aaravpos-barber-common-btn:hover {
   background: var(--btn-bg-hover);
   color: var(--btn-text-hover, #ffffff);
 }
-.aaravpos-common-btn:disabled {
+.aaravpos-barber-common-btn:disabled {
   opacity: 0.7;
   cursor: not-allowed;
 }
-.aaravpos-common-btn-content {
+.aaravpos-barber-common-btn-content {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
 }
-.aaravpos-order-label {
+.aaravpos-barber-order-label {
   font-size: 14px;
   font-weight: 600;
   margin: 6px 0;
   color: rgba(0, 0, 0, 0.4);
   text-transform: uppercase;
 }
-.aaravpos-display-flex {
+.aaravpos-barber-display-flex {
   display: flex;
   align-items: center;
   gap: 12px;
 }
-.aaravpos-pro-card {
+.aaravpos-barber-pro-card {
   border: 2px solid rgba(0, 0, 0, 0.15);
   border-radius: 6px;
   padding: 8px;
@@ -1876,14 +1876,14 @@
   cursor: pointer;
   transition: all 0.25s ease;
 }
-.aaravpos-pro-image {
+.aaravpos-barber-pro-image {
   width: 40px;
   height: 40px;
   border-radius: 8px;
   object-fit: cover;
   border: 1px solid rgba(0, 0, 0, 0.1);
 }
-.aaravpos-pro-avatar {
+.aaravpos-barber-pro-avatar {
   width: 40px;
   height: 40px;
   border-radius: 8px;
@@ -1893,10 +1893,10 @@
   justify-content: center;
   font-weight: 600;
 }
-.aaravpos-pro-info {
+.aaravpos-barber-pro-info {
   overflow: hidden;
 }
-.aaravpos-pro-name {
+.aaravpos-barber-pro-name {
   font-size: 14px;
   font-weight: 700;
   text-transform: uppercase;
@@ -1905,7 +1905,7 @@
   text-overflow: ellipsis;
   margin: 0px;
 }
-.aaravpos-pro-type {
+.aaravpos-barber-pro-type {
   font-size: 12px;
   color: #6b7280;
   text-transform: uppercase;
@@ -1914,7 +1914,7 @@
   text-overflow: ellipsis;
   margin: 0px;
 }
-.aaravpos-summary-row {
+.aaravpos-barber-summary-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -1923,27 +1923,27 @@
   font-weight: 600;
   color: #374151;
 }
-.aaravpos-summary-label {
+.aaravpos-barber-summary-label {
   display: block;
 }
-.aaravpos-summary-value {
+.aaravpos-barber-summary-value {
   display: flex;
   align-items: center;
   font-family: monospace;
 }
-.aaravpos-consent-box {
+.aaravpos-barber-consent-box {
   margin-bottom: 12px;
   padding: 8px;
   background: #fefce8;
   border: 1px solid #fde68a;
   border-radius: 4px;
 }
-.aaravpos-consent-text {
+.aaravpos-barber-consent-text {
   font-size: 12px;
   font-weight: 500;
   color: #854d0e;
 }
-.aaravpos-consent-progress {
+.aaravpos-barber-consent-progress {
   width: 100%;
   height: 6px;
   margin-top: 4px;
@@ -1951,16 +1951,16 @@
   border-radius: 9999px;
   overflow: hidden;
 }
-.aaravpos-consent-progress-bar {
+.aaravpos-barber-consent-progress-bar {
   height: 100%;
   background: #ca8a04;
   border-radius: 9999px;
   transition: width 0.3s ease;
 }
-.aaravpos-tip-input-wrapper {
+.aaravpos-barber-tip-input-wrapper {
   overflow: hidden;
 }
-.aaravpos-tip-input {
+.aaravpos-barber-tip-input {
   width: 100%;
   padding: 8px 12px;
   margin-bottom: 12px;
@@ -1971,10 +1971,10 @@
   box-sizing: border-box;
   transition: border-color 0.2s ease;
 }
-.aaravpos-tip-input:focus {
+.aaravpos-barber-tip-input:focus {
   border-color: #9ca3af;
 }
-.aaravpos-tip-title {
+.aaravpos-barber-tip-title {
   margin-top: 16px;
   margin-bottom: 8px;
   font-size: 10px;
@@ -1982,12 +1982,12 @@
   text-transform: uppercase;
   letter-spacing: 1.5px;
 }
-.aaravpos-tip-options {
+.aaravpos-barber-tip-options {
   display: flex;
   gap: 4px;
   margin-bottom: 8px;
 }
-.aaravpos-tip-btn {
+.aaravpos-barber-tip-btn {
   padding: 6px 8px;
   border: 1px solid var(--btn-bg-hover);
   border-radius: 4px;
@@ -1997,19 +1997,19 @@
   cursor: pointer;
   transition: all 0.2s ease;
 }
-.aaravpos-tip-btn-flex {
+.aaravpos-barber-tip-btn-flex {
   flex: 1;
 }
-.aaravpos-tip-btn-fixed {
+.aaravpos-barber-tip-btn-fixed {
   flex: none;
-  width: 64px;
+  width: 60px;
 }
-.aaravpos-tip-btn-active {
+.aaravpos-barber-tip-btn-active {
   background: var(--btn-bg);
   border-color: var(--btn-bg);
   color: #fff;
 }
-.aaravpos-date-time {
+.aaravpos-barber-date-time {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -2017,32 +2017,38 @@
   font-size: 14px;
   font-weight: 700;
 }
-.aaravpos-date-time-label {
+.aaravpos-barber-date-time-label {
   color: #111827;
 }
-.aaravpos-date-time-value {
+.aaravpos-barber-date-time-value {
   color: var(--btn-bg);
   font-weight: 700;
 }
-.aaravpos-date-time-empty {
+.aaravpos-barber-date-time-empty {
   color: var(--text-muted);
   font-weight: 500;
 }
-.aaravpos-sidebar-close-btn {
-  display: block;
-  width: auto;
-  padding: 2px 6px;
+.aaravpos-barber-sidebar-close-btn {
+  width: 28px;
+  height: 28px;
+  padding: 4px;
   border: none;
   border-radius: 6px;
   background: transparent;
   cursor: pointer;
-  font-size: 30px;
+  font-size: 20px;
   transition: all 0.2s ease;
+  position: absolute;
+  top: -4px;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
-.aaravpos-sidebar-close-btn:hover {
+.aaravpos-barber-sidebar-close-btn:hover {
   background: rgba(0, 0, 0, 0.05);
 }
-.aaravpos-date-modal-overlay {
+.aaravpos-barber-date-modal-overlay {
   position: fixed;
   inset: 0;
   z-index: 1026;
@@ -2053,7 +2059,7 @@
   background: rgba(14, 14, 14, 0.55);
   backdrop-filter: blur(4px);
 }
-.aaravpos-date-modal {
+.aaravpos-barber-date-modal {
   width: 320px;
   max-width: 95vw;
   max-height: 90vh;
@@ -2065,7 +2071,7 @@
   box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
   animation: aaravposPopIn 0.2s ease;
 }
-.aaravpos-date-modal-header {
+.aaravpos-barber-date-modal-header {
   position: sticky;
   top: 0;
   z-index: 10;
@@ -2076,14 +2082,14 @@
   background: var(--canvas-bg);
   border-bottom: 1px solid var(--border-color);
 }
-.aaravpos-date-modal-title {
+.aaravpos-barber-date-modal-title {
   font-size: 22px;
   font-weight: 700;
   letter-spacing: 1px;
   text-transform: uppercase;
   margin: 0px;
 }
-.aaravpos-date-close-btn {
+.aaravpos-barber-date-close-btn {
   width: 32px;
   height: 32px;
   display: flex;
@@ -2096,44 +2102,44 @@
   cursor: pointer;
   transition: all 0.2s ease;
 }
-.aaravpos-date-close-btn:hover {
+.aaravpos-barber-date-close-btn:hover {
   background: var(--red-color);
   color: var(--btn-bg-hover);
 }
-.aaravpos-date-modal-body {
+.aaravpos-barber-date-modal-body {
   overflow-y: auto;
   padding: 10px 15px 15px 15px;
 }
-.aaravpos-date-nav {
+.aaravpos-barber-date-nav {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 16px;
 }
-.aaravpos-date-nav-btn {
+.aaravpos-barber-date-nav-btn {
   border: none;
   background: transparent;
   font-size: 18px;
   cursor: pointer;
   transition: all 0.2s ease;
 }
-.aaravpos-date-nav-btn:hover {
+.aaravpos-barber-date-nav-btn:hover {
   color: var(--red-color);
 }
-.aaravpos-date-nav-btn:disabled {
+.aaravpos-barber-date-nav-btn:disabled {
   opacity: 0.3;
   cursor: not-allowed;
 }
-.aaravpos-date-month-label {
+.aaravpos-barber-date-month-label {
   font-size: 14px;
   font-weight: 600;
 }
-.aaravpos-calendar-grid {
+.aaravpos-barber-calendar-grid {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: 6px;
 }
-.aaravpos-calendar-weekday {
+.aaravpos-barber-calendar-weekday {
   padding: 4px 0;
   text-align: center;
   font-size: 10px;
@@ -2141,7 +2147,7 @@
   text-transform: uppercase;
   color: var(--text-muted);
 }
-.aaravpos-calendar-day {
+.aaravpos-barber-calendar-day {
   height: 34px;
   width: 34px;
   display: flex;
@@ -2152,34 +2158,34 @@
   font-family: monospace;
   transition: all 0.15s ease;
 }
-.aaravpos-calendar-day-active {
+.aaravpos-barber-calendar-day-active {
   cursor: pointer;
 }
-.aaravpos-calendar-day-active:hover {
+.aaravpos-barber-calendar-day-active:hover {
   background: var(--btn-bg-hover);
   color: var(--btn-text-hover);
 }
-.aaravpos-calendar-day-today {
+.aaravpos-barber-calendar-day-today {
   outline: 1.5px solid var(--border-color);
   outline-offset: 1px;
 }
-.aaravpos-calendar-day-selected {
+.aaravpos-barber-calendar-day-selected {
   background: var(--btn-bg);
   color: #fff;
 }
-.aaravpos-calendar-day-disabled {
+.aaravpos-barber-calendar-day-disabled {
   opacity: 0.4;
   cursor: not-allowed;
 }
-.aaravpos-calendar-day {
+.aaravpos-barber-calendar-day {
   position: relative;
 }
-.aaravpos-calendar-day-disabled {
+.aaravpos-barber-calendar-day-disabled {
   background: rgba(0, 0, 0, 0.03);
   cursor: not-allowed;
   opacity: 0.6;
 }
-.aaravpos-calendar-day-slash {
+.aaravpos-barber-calendar-day-slash {
   position: absolute;
   inset: 0;
   display: flex;
@@ -2187,14 +2193,14 @@
   justify-content: center;
   pointer-events: none;
 }
-.aaravpos-calendar-day-slash::after {
+.aaravpos-barber-calendar-day-slash::after {
   content: "";
   width: 140%;
   height: 1.5px;
   background: var(--app-bg);
   transform: rotate(-45deg);
 }
-.aaravpos-calendar-day-text {
+.aaravpos-barber-calendar-day-text {
   position: relative;
   z-index: 2;
 }
@@ -2219,14 +2225,14 @@
   font-weight: 700;
   margin-top: 2px;
 }
-.aaravpos-professional-skeleton {
+.aaravpos-barber-professional-skeleton {
   position: relative;
   height: 82px;
   overflow: hidden;
   border-radius: 4px;
   background: #e0e0e0;
 }
-.aaravpos-professional-skeleton::before {
+.aaravpos-barber-professional-skeleton::before {
   content: "";
   position: absolute;
   top: 0;
@@ -2236,12 +2242,12 @@
   background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.5), transparent );
   animation: aaravposShimmer 1.2s infinite;
 }
-.aaravpos-spinner-wrapper {
+.aaravpos-barber-spinner-wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.aaravpos-spinner {
+.aaravpos-barber-spinner {
   width: 40px;
   height: 40px;
   border: 4px solid var(--btn-bg-hover);
@@ -2249,10 +2255,10 @@
   border-radius: 50%;
   animation: aaravposSpin 0.8s linear infinite;
 }
-.aaravpos-calendar-grid .cal-avail.cal-selected:after {
+.aaravpos-barber-calendar-grid .cal-avail.cal-selected:after {
   background: #fff9;
 }
-.aaravpos-calendar-grid .cal-avail:after {
+.aaravpos-barber-calendar-grid .cal-avail:after {
   content: "";
   background: var(--color-brand-green);
   border-radius: 50%;
@@ -2263,7 +2269,7 @@
   left: 50%;
   transform: translate(-50%);
 }
-.aaravpos-empty-services {
+.aaravpos-barber-empty-services {
   grid-column: 1/-1;
   display: flex;
   flex-direction: column;
@@ -2275,13 +2281,13 @@
   border-radius: 8px;
   height: 160px;
 }
-.aaravpos-empty-services-title {
+.aaravpos-barber-empty-services-title {
   margin-bottom: 8px;
   font-size: 18px;
   font-weight: 600;
   color: #111827;
 }
-.aaravpos-empty-services-text {
+.aaravpos-barber-empty-services-text {
   max-width: 500px;
   font-size: 14px;
   line-height: 1.5;
@@ -2680,7 +2686,7 @@
   align-items: center;
   justify-content: center;
 }
-.aaravpos-modal {
+.aaravpos-barber-modal {
   background: #fff;
   border-radius: 16px;
   width: 100%;
@@ -3219,14 +3225,14 @@
 .arravpos-slot-status {
   font-size: 10px;
 }
-.aaravpos-staff-wrapper {
+.aaravpos-barber-staff-wrapper {
   overflow-y: auto;
   padding-bottom: 40px;
   scrollbar-width: none;
   -ms-overflow-style: none;
   height: 540px;
 }
-.aaravpos-staff-wrapper::-webkit-scrollbar {
+.aaravpos-barber-staff-wrapper::-webkit-scrollbar {
   display: none;
 }
 .arravpos-profile-image {
@@ -3311,17 +3317,17 @@
   color: var(--red);
   background-color: rgba(215, 38, 61, 0.12);
 }
-.aaravpos-loading-container {
+.aaravpos-barber-loading-container {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 700px;
 }
-.aaravpos-loading-text {
+.aaravpos-barber-loading-text {
   font-size: 14px;
   color: #222;
 }
-.aaravpos-error-container {
+.aaravpos-barber-error-container {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -3330,13 +3336,13 @@
   padding: 20px;
   text-align: center;
 }
-.aaravpos-error-text {
+.aaravpos-barber-error-text {
   color: #dc2626;
   margin-bottom: 16px;
   font-size: 14px;
   font-weight: 500;
 }
-.aaravpos-book-btn {
+.aaravpos-barber-book-btn {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -3351,41 +3357,41 @@
   font-size: 16px;
   transition: all 0.2s ease;
 }
-.aaravpos-book-btn:hover {
+.aaravpos-barber-book-btn:hover {
   background: var(--btn-bg-hover);
   border-color: var(--btn-bg-hover);
   color: var(--btn-text-hover);
 }
-.aaravpos-form-control {
+.aaravpos-barber-form-control {
   display: flex;
   flex-direction: column;
 }
-.aaravpos-loader-wrapper {
+.aaravpos-barber-loader-wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 610px;
 }
-.aaravpos-loader {
+.aaravpos-barber-loader {
   width: 24px;
   height: 24px;
   border: 4px solid #e5e5e5;
   border-top-color: var(--btn-bg);
   border-radius: 50%;
-  animation: aaravpos-spin 0.8s linear infinite;
+  animation: aaravpos-barber-spin 0.8s linear infinite;
 }
 @media (min-width: 640px) {
   .custom-container {
     padding-left: 32px;
     padding-right: 32px;
   }
-  .aaravpos-title {
+  .aaravpos-barber-title {
     font-size: 28px;
   }
-  .aaravpos-outlet-grid {
+  .aaravpos-barber-outlet-grid {
     grid-template-columns: repeat(2, 1fr);
   }
-  .aaravpos-modal {
+  .aaravpos-barber-modal {
     max-width: 32rem;
   }
 }
@@ -3394,18 +3400,18 @@
     gap: 10px;
     padding: 10px;
   }
-  .aaravpos-common-btn {
+  .aaravpos-barber-common-btn {
     padding: 14px 8px;
     font-size: 12px;
   }
-  .aaravpos-date-modal {
+  .aaravpos-barber-date-modal {
     height: fit-content;
     border-radius: 12px;
   }
-  .aaravpos-date-modal-title {
+  .aaravpos-barber-date-modal-title {
     font-size: 18px;
   }
-  .aaravpos-calendar-grid {
+  .aaravpos-barber-calendar-grid {
     gap: 8px;
   }
   .arravpos-date-nav-btn svg {
@@ -3455,28 +3461,28 @@
     line-clamp: 2;
     -webkit-box-orient: vertical;
   }
-  .aaravpos-page-title {
+  .aaravpos-barber-page-title {
     font-size: 16px;
   }
-  .aaravpos-topbar {
+  .aaravpos-barber-topbar {
     gap: 10px;
   }
-  .aaravpos-btn-content {
+  .aaravpos-barber-btn-content {
     gap: 4px;
   }
-  .aaravpos-margin-top-20 {
+  .aaravpos-barber-margin-top-20 {
     margin-top: 14px;
   }
-  .aaravpos-mobile-step-label {
+  .aaravpos-barber-mobile-step-label {
     font-size: 14px;
   }
-  .aaravpos-outlet-card-title {
+  .aaravpos-barber-outlet-card-title {
     font-size: 16px;
   }
-  .aaravpos-title {
+  .aaravpos-barber-title {
     font-size: 18px;
   }
-  .aaravpos-outlet-grid {
+  .aaravpos-barber-outlet-grid {
     gap: 10px;
   }
 }
@@ -3495,36 +3501,36 @@
     width: 36px;
     height: 36px;
   }
-  .aaravpos-desktop-stepper {
+  .aaravpos-barber-desktop-stepper {
     display: flex;
     align-items: center;
     gap: 16px;
     width: 100%;
   }
-  .aaravpos-services-wrapper.standalone {
+  .aaravpos-barber-services-wrapper.standalone {
     height: calc(100dvh - 300px);
   }
-  .aaravpos-services-wrapper.standalone {
+  .aaravpos-barber-services-wrapper.standalone {
     height: calc(100dvh - 300px);
   }
-  .aaravpos-mobile-button {
+  .aaravpos-barber-mobile-button {
     display: none;
   }
-  .aaravpos-sidebar-mobile-content {
+  .aaravpos-barber-sidebar-mobile-content {
     padding-left: 24px;
     padding-right: 24px;
   }
-  .aaravpos-order-list {
+  .aaravpos-barber-order-list {
     height: calc(100dvh - 300px);
   }
-  .aaravpos-pro-order-list {
+  .aaravpos-barber-pro-order-list {
     height: calc(100dvh - 380px);
   }
   .arravpos-details-grid {
     grid-template-columns: repeat(2, 1fr);
     gap: 20px;
   }
-  .aaravpos-modal {
+  .aaravpos-barber-modal {
     max-width: 36rem;
   }
 }
@@ -3598,10 +3604,10 @@
   .arravpos-appointment-date-text {
     font-size: 13px;
   }
-  .aaravpos-date-modal {
+  .aaravpos-barber-date-modal {
     width: 290px;
   }
-  .aaravpos-calendar-day {
+  .aaravpos-barber-calendar-day {
     height: 24px;
     width: 24px;
   }
@@ -3610,26 +3616,26 @@
   .arravpos-date-wrapper {
     justify-content: space-between;
   }
-  .aaravpos-services-grid {
+  .aaravpos-barber-services-grid {
     grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
   }
 }
 @media (min-width: 991px) {
-  .aaravpos-sidebar {
+  .aaravpos-barber-sidebar {
     display: block;
   }
-  .aaravpos-sidebar-close-btn {
+  .aaravpos-barber-sidebar-close-btn {
     display: none;
   }
-  .aaravpos-layout-wrapper {
+  .aaravpos-barber-layout-wrapper {
     grid-template-columns: minmax(0, 1fr) 360px;
   }
 }
 @media (max-width: 991px) {
-  .aaravpos-sidebar {
+  .aaravpos-barber-sidebar {
     display: none;
   }
-  .aaravpos-btn {
+  .aaravpos-barber-btn {
     display: block;
   }
 }
@@ -3650,25 +3656,25 @@
   .arravpos-consent-title {
     font-size: 20px;
   }
-  .aaravpos-header {
+  .aaravpos-barber-header {
     flex-direction: row;
     align-items: center;
   }
-  .aaravpos-search-wrapper {
+  .aaravpos-barber-search-wrapper {
     max-width: 240px;
   }
-  .aaravpos-outlet-grid {
+  .aaravpos-barber-outlet-grid {
     grid-template-columns: repeat(3, 1fr);
   }
-  .aaravpos-services-title {
+  .aaravpos-barber-services-title {
     font-size: 36px;
   }
-  .aaravpos-services-topbar {
+  .aaravpos-barber-services-topbar {
     flex-direction: row;
     align-items: flex-end;
     gap: 32px;
   }
-  .aaravpos-topbar {
+  .aaravpos-barber-topbar {
     flex-direction: row;
     align-items: flex-end;
     gap: 32px;
@@ -3678,7 +3684,7 @@
   }
 }
 @media (max-width: 1024px) {
-  .aaravpos-navbar-form {
+  .aaravpos-barber-navbar-form {
     flex-direction: column;
     margin-bottom: 10px;
   }
@@ -3691,47 +3697,33 @@
   }
 }
 @media (min-width: 1280px) {
-  .aaravpos-title {
+  .aaravpos-barber-title {
     font-size: 32px;
   }
-  .aaravpos-outlet-grid {
+  .aaravpos-barber-outlet-grid {
     grid-template-columns: repeat(4, 1fr);
   }
 }
 @media (min-width: 1536px) {
-  .aaravpos-outlet-grid {
+  .aaravpos-barber-outlet-grid {
     grid-template-columns: repeat(5, 1fr);
   }
 }
-@media (max-width: 1500px) {
-  .aaravpos-professional-grid {
-    grid-template-columns: repeat(4, 1fr);
-  }
-}
-@media (max-width: 1200px) {
-  .aaravpos-professional-grid {
-    grid-template-columns: repeat(3, 1fr);
-  }
-}
 @media (max-width: 768px) {
-  .aaravpos-professional-header {
-    flex-direction: column;
-    gap: 14px;
-  }
-  .aaravpos-professional-grid {
-    grid-template-columns: repeat(2, 1fr);
+  .aaravpos-barber-professional-grid {
     gap: 20px;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 220px));
   }
-  .aaravpos-professional-name {
+  .aaravpos-barber-professional-name {
     font-size: 20px;
   }
 }
 @media (max-width: 450px) {
-  .aaravpos-professional-grid {
+  .aaravpos-barber-professional-grid {
     grid-template-columns: 1fr;
   }
 }
-@keyframes aaravpos-shimmer {
+@keyframes aaravpos-barber-shimmer {
   0% {
     left: -100%;
   }
@@ -3830,7 +3822,7 @@
     transform: rotate(360deg);
   }
 }
-@keyframes aaravpos-spin {
+@keyframes aaravpos-barber-spin {
   to {
     transform: rotate(360deg);
   }