@aaravpos/appointment-barber-booking 1.0.4 → 1.0.7

package/dist/styles.css

@@ -798,11 +798,11 @@
 .success-pulse {
   animation: pulseBrand 2s ease infinite;
 }
-.arravpos-error-box {
+.aaravpos-barber-error-box {
   padding: 16px;
   color: #ef4444;
 }
-.arravpos-m0 {
+.aaravpos-barber-m0 {
   margin: 0px !important;
 }
 .aaravpos-barber-overflow-hidden {
@@ -820,7 +820,7 @@
   opacity: 0.5;
   pointer-events: none;
 }
-.arravpos-container {
+.aaravpos-barber-container {
   background-color: #fff;
   padding: 16px;
   width: 100%;
@@ -837,6 +837,10 @@
 .aaravpos-barber-mt-auto {
   margin-top: auto;
 }
+.aaravpos-barber-btn-position-relative {
+  position: relative !important;
+  bottom: auto !important;
+}
 .aaravpos-barber-btn {
   gap: 8px;
   padding: 8px 16px;
@@ -1590,7 +1594,8 @@
 }
 .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-barber-professional-header {
@@ -1705,6 +1710,7 @@
 .aaravpos-barber-order-header {
   padding: 0px 0px 8px 0px;
   border-bottom: 1px solid #d1d5db;
+  position: relative;
 }
 .aaravpos-barber-order-title {
   font-size: 16px;
@@ -1986,7 +1992,7 @@
   margin-bottom: 8px;
 }
 .aaravpos-barber-tip-btn {
-  padding: 6px 8px;
+  padding: 5px 6px;
   border: 1px solid var(--btn-bg-hover);
   border-radius: 4px;
   background: #fff;
@@ -2027,15 +2033,21 @@
   font-weight: 500;
 }
 .aaravpos-barber-sidebar-close-btn {
-  display: block;
-  width: auto;
-  padding: 2px 6px;
+  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-barber-sidebar-close-btn:hover {
   background: rgba(0, 0, 0, 0.05);
@@ -2196,13 +2208,13 @@
   position: relative;
   z-index: 2;
 }
-.arravpos-date-card-disabled {
+.aaravpos-barber-date-card-disabled {
   position: relative;
   opacity: 0.6;
   cursor: not-allowed;
   overflow: hidden;
 }
-.arravpos-date-disabled-slash {
+.aaravpos-barber-date-disabled-slash {
   position: absolute;
   top: 50%;
   left: -20%;
@@ -2212,7 +2224,7 @@
   transform: rotate(-45deg);
   z-index: 1;
 }
-.arravpos-date-unavailable {
+.aaravpos-barber-date-unavailable {
   font-size: 8px;
   font-weight: 700;
   margin-top: 2px;
@@ -2285,29 +2297,29 @@
   line-height: 1.5;
   color: rgba(0, 0, 0, 0.5);
 }
-.arravpos-details-section {
+.aaravpos-barber-details-section {
   margin-top: 20px;
 }
-.arravpos-details-scroll {
+.aaravpos-barber-details-scroll {
   overflow-y: auto;
   padding-bottom: 30px;
   scrollbar-width: none;
   height: 565px;
 }
-.arravpos-details-scroll::-webkit-scrollbar {
+.aaravpos-barber-details-scroll::-webkit-scrollbar {
   display: none;
 }
-.arravpos-details-grid {
+.aaravpos-barber-details-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 16px;
 }
-.arravpos-form-group {
+.aaravpos-barber-form-group {
   display: flex;
   flex-direction: column;
   width: 100%;
 }
-.arravpos-form-label {
+.aaravpos-barber-form-label {
   font-size: 12px;
   font-weight: 600;
   color: #4b5563;
@@ -2316,14 +2328,14 @@
   align-items: center;
   gap: 4px;
 }
-.arravpos-required {
+.aaravpos-barber-required {
   color: #ef4444;
 }
-.arravpos-input-wrapper {
+.aaravpos-barber-input-wrapper {
   position: relative;
   width: 100%;
 }
-.arravpos-custom-input {
+.aaravpos-barber-custom-input {
   border: 1px solid #d1d5db;
   border-radius: 4px;
   padding: 10px 12px;
@@ -2332,15 +2344,15 @@
   transition: all 0.3s ease;
   background-color: #ffffff;
 }
-.arravpos-custom-input:focus, .arravpos-custom-input input:focus {
+.aaravpos-barber-custom-input:focus, .aaravpos-barber-custom-input input:focus {
   border-color: black;
 }
-.arravpos-error-text {
+.aaravpos-barber-error-text {
   margin-top: 6px;
   font-size: 13px;
   color: #ef4444;
 }
-.arravpos-autofill-text {
+.aaravpos-barber-autofill-text {
   margin-top: 6px;
   font-size: 12px;
   color: #6b7280;
@@ -2348,31 +2360,31 @@
   align-items: center;
   gap: 4px;
 }
-.arravpos-clear-text {
+.aaravpos-barber-clear-text {
   color: #dc2626;
   cursor: pointer;
   font-weight: 500;
 }
-.arravpos-loader-wrapper {
+.aaravpos-barber-loader-wrapper {
   position: absolute;
   right: 10px;
   top: 50%;
   transform: translateY(-50%);
   z-index: 999;
 }
-.arravpos-loader {
+.aaravpos-barber-loader {
   width: 16px;
   height: 16px;
   border: 2px solid #d1d5db;
   border-top-color: #000000;
   border-radius: 50%;
-  animation: arravpos-spin 0.8s linear infinite;
+  animation: aaravpos-barber-spin 0.8s linear infinite;
 }
-.arravpos-booking-wrapper {
+.aaravpos-barber-booking-wrapper {
   width: 100%;
   max-width: 100%;
 }
-.arravpos-outlet-info {
+.aaravpos-barber-outlet-info {
   display: flex;
   align-items: center;
   gap: 12px;
@@ -2381,7 +2393,7 @@
   margin-bottom: 4px;
   border: 1px solid #e5e7eb;
 }
-.arravpos-outlet-logo {
+.aaravpos-barber-outlet-logo {
   width: 40px;
   height: 40px;
   border-radius: 4px;
@@ -2391,63 +2403,63 @@
   align-items: center;
   justify-content: center;
 }
-.arravpos-outlet-logo-img {
+.aaravpos-barber-outlet-logo-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
-.arravpos-outlet-content {
+.aaravpos-barber-outlet-content {
   flex: 1;
   min-width: 0;
 }
-.arravpos-outlet-name {
+.aaravpos-barber-outlet-name {
   font-size: 14px;
   font-weight: 600;
   color: #111827;
   margin: 0;
   line-height: 1.4;
 }
-.arravpos-outlet-address {
+.aaravpos-barber-outlet-address {
   font-size: 12px;
   color: rgba(0, 0, 0, 0.7);
   margin-top: 2px;
   line-height: 1.5;
   word-break: break-word;
 }
-.arravpos-booking-scroll {
+.aaravpos-barber-booking-scroll {
   overflow-y: auto;
   scrollbar-width: none;
   height: 495px;
   padding-bottom: 15px;
 }
-.arravpos-booking-scroll::-webkit-scrollbar {
+.aaravpos-barber-booking-scroll::-webkit-scrollbar {
   display: none;
 }
-.arravpos-booking-grid {
+.aaravpos-barber-booking-grid {
   display: flex;
   gap: 28px;
   justify-content: space-between;
 }
-.arravpos-booking-column {
+.aaravpos-barber-booking-column {
   width: 100%;
   min-width: 0;
 }
-.arravpos-appointment-header {
+.aaravpos-barber-appointment-header {
   display: flex;
   align-items: center;
   gap: 12px;
 }
-.arravpos-appointment-content {
+.aaravpos-barber-appointment-content {
   flex: 1;
   min-width: 0;
 }
-.arravpos-appointment-name {
+.aaravpos-barber-appointment-name {
   font-size: 14px;
   font-weight: 600;
   color: #111827;
   margin: 0;
 }
-.arravpos-appointment-services {
+.aaravpos-barber-appointment-services {
   font-size: 12px;
   color: #6b7280;
   margin-top: 2px;
@@ -2456,7 +2468,7 @@
   white-space: nowrap;
   margin-bottom: 0px;
 }
-.arravpos-appointment-price {
+.aaravpos-barber-appointment-price {
   font-family: monospace;
   font-weight: 600;
   font-size: 15px;
@@ -2466,7 +2478,7 @@
   display: flex;
   flex-direction: row;
 }
-.arravpos-appointment-date {
+.aaravpos-barber-appointment-date {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -2474,20 +2486,20 @@
   padding-top: 12px;
   border-top: 1px solid #e5e7eb;
 }
-.arravpos-appointment-date-text {
+.aaravpos-barber-appointment-date-text {
   font-size: 14px;
   font-weight: 600;
   color: #111827;
 }
-.arravpos-success-wrapper {
+.aaravpos-barber-success-wrapper {
   overflow-y: auto;
   scrollbar-width: none;
   height: 700px;
 }
-.arravpos-success-wrapper::-webkit-scrollbar {
+.aaravpos-barber-success-wrapper::-webkit-scrollbar {
   display: none;
 }
-.arravpos-success-motion {
+.aaravpos-barber-success-motion {
   display: flex;
   flex-direction: column;
   height: 668px;
@@ -2497,7 +2509,7 @@
   text-align: center;
   padding: 16px;
 }
-.arravpos-success-icon {
+.aaravpos-barber-success-icon {
   width: 34px;
   height: 34px;
   background: var(--btn-bg);
@@ -2510,23 +2522,23 @@
   font-size: 36px;
   margin-bottom: 24px;
 }
-.arravpos-success-title {
+.aaravpos-barber-success-title {
   font-family: "Bebas Neue", sans-serif;
   font-size: 20px;
   margin-bottom: 8px;
 }
-.arravpos-success-description {
+.aaravpos-barber-success-description {
   font-size: 14px;
   color: var(--muted);
   margin-bottom: 10px;
   line-height: 1.625;
   margin-top: 0px;
 }
-.arravpos-success-content {
+.aaravpos-barber-success-content {
   width: 100%;
   max-width: 570px;
 }
-.arravpos-success-card {
+.aaravpos-barber-success-card {
   background: #ffffff;
   border-radius: 6px;
   text-align: left;
@@ -2538,55 +2550,55 @@
   scrollbar-width: none;
   -ms-overflow-style: none;
 }
-.arravpos-success-row {
+.aaravpos-barber-success-row {
   display: flex;
   justify-content: space-between;
   padding-top: 8px;
   padding-bottom: 8px;
   border-bottom: 1px solid #f3f4f6;
 }
-.arravpos-success-row-first {
+.aaravpos-barber-success-row-first {
   padding-top: 0;
 }
-.arravpos-total-row {
+.aaravpos-barber-total-row {
   display: flex;
   justify-content: space-between;
   padding-top: 16px;
   padding-bottom: 0;
 }
-.arravpos-label {
+.aaravpos-barber-label {
   color: #4b5563;
   font-size: 14px;
   font-weight: 700;
 }
-.arravpos-services-label {
+.aaravpos-barber-services-label {
   color: #6b7280;
   font-size: 14px;
   font-weight: 700;
 }
-.arravpos-value {
+.aaravpos-barber-value {
   font-size: 14px;
   font-weight: 500;
   color: #1f2937;
 }
-.arravpos-price {
+.aaravpos-barber-price {
   display: flex;
   flex-direction: row;
   align-items: center;
   color: #1f2937;
   font-weight: 600;
 }
-.arravpos-total-price {
+.aaravpos-barber-total-price {
   display: flex;
   flex-direction: row;
   align-items: center;
   color: var(--red);
   font-weight: 600;
 }
-.arravpos-services-header {
+.aaravpos-barber-services-header {
   align-items: center;
 }
-.arravpos-services-list {
+.aaravpos-barber-services-list {
   padding-top: 8px;
   padding-bottom: 8px;
   border-bottom: 1px solid #f3f4f6;
@@ -2597,23 +2609,23 @@
   overflow-y: auto;
   max-height: 23vh;
 }
-.arravpos-service-row {
+.aaravpos-barber-service-row {
   display: flex;
   justify-content: space-between;
   font-size: 14px;
   padding-top: 6px;
   padding-bottom: 6px;
 }
-.arravpos-service-name {
+.aaravpos-barber-service-name {
   color: #374151;
 }
-.arravpos-service-price {
+.aaravpos-barber-service-price {
   color: #111827;
   display: flex;
   flex-direction: row;
   align-items: center;
 }
-.arravpos-more-services {
+.aaravpos-barber-more-services {
   text-align: center;
   font-size: 12px;
   color: #6b7280;
@@ -2624,7 +2636,7 @@
   justify-content: center;
   gap: 4px;
 }
-.arravpos-show-btn {
+.aaravpos-barber-show-btn {
   color: #2563eb;
   font-size: 12px;
   font-weight: 500;
@@ -2632,13 +2644,13 @@
   background: transparent;
   border: none;
 }
-.arravpos-show-btn-inner {
+.aaravpos-barber-show-btn-inner {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 4px;
 }
-.arravpos-book-btn {
+.aaravpos-barber-book-btn {
   background: var(--btn-bg);
   color: var(--btn-text);
   border: 1px solid var(--btn-bg);
@@ -2656,12 +2668,12 @@
   border-radius: 4px;
   transition: all 0.3s ease;
 }
-.arravpos-book-btn:hover {
+.aaravpos-barber-book-btn:hover {
   color: var(--btn-text-hover);
   border-color: var(--btn-bg-hover);
   background: var(--btn-bg-hover);
 }
-.arravpos-payment-overlay {
+.aaravpos-barber-payment-overlay {
   position: fixed;
   inset: 0;
   display: flex;
@@ -2671,7 +2683,7 @@
   z-index: 1025;
   padding: 16px;
 }
-.arravpos-payment-form {
+.aaravpos-barber-payment-form {
   width: 100%;
   margin: auto;
   display: flex;
@@ -2687,40 +2699,40 @@
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
   box-sizing: border-box;
 }
-.arravpos-payment-header {
+.aaravpos-barber-payment-header {
   display: flex;
   justify-content: space-between;
   margin-bottom: 20px;
 }
-.arravpos-payment-title {
+.aaravpos-barber-payment-title {
   font-size: 18px;
   font-weight: 600;
   color: #111827;
   margin: 0px;
 }
-.arravpos-payment-amount {
+.aaravpos-barber-payment-amount {
   display: flex;
   flex-direction: row;
   align-items: center;
   font-weight: 600;
   color: #111827;
 }
-.arravpos-payment-fields {
+.aaravpos-barber-payment-fields {
   display: flex;
   flex-direction: column;
   gap: 16px;
 }
-.arravpos-payment-label {
+.aaravpos-barber-payment-label {
   font-size: 12px;
   font-weight: 600;
   color: #4b5563;
   display: flex;
   margin-bottom: 4px;
 }
-.arravpos-payment-required {
+.aaravpos-barber-payment-required {
   color: #ef4444;
 }
-.arravpos-payment-input {
+.aaravpos-barber-payment-input {
   width: 100%;
   padding: 10px 12px;
   border: 1px solid red;
@@ -2729,26 +2741,26 @@
   outline: none;
   transition: border-color 0.2s ease;
 }
-.arravpos-payment-input:focus {
+.aaravpos-barber-payment-input:focus {
   border-color: var(--red);
 }
-.arravpos-payment-error {
+.aaravpos-barber-payment-error {
   color: #ef4444;
   font-size: 14px;
   margin-top: 4px;
 }
-.arravpos-payment-grid {
+.aaravpos-barber-payment-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 16px;
 }
-.arravpos-payment-btn-grid {
+.aaravpos-barber-payment-btn-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 16px;
   margin-top: 20px;
 }
-.arravpos-payment-cancel-btn {
+.aaravpos-barber-payment-cancel-btn {
   padding: 10px 16px;
   cursor: pointer;
   border-radius: 6px;
@@ -2756,7 +2768,7 @@
   background: linear-gradient(to right, #ef4444, #dc2626);
   color: #ffffff;
 }
-.arravpos-payment-submit-btn {
+.aaravpos-barber-payment-submit-btn {
   padding: 8px 16px;
   border-radius: 6px;
   cursor: pointer;
@@ -2765,11 +2777,11 @@
   color: #ffffff;
   transition: opacity 0.2s ease;
 }
-.arravpos-payment-submit-btn:disabled {
+.aaravpos-barber-payment-submit-btn:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
-.arravpos-consent-overlay {
+.aaravpos-barber-consent-overlay {
   position: fixed;
   inset: 0;
   z-index: 1025;
@@ -2779,12 +2791,12 @@
   background-color: rgba(0, 0, 0, 0.4);
   padding: 16px;
 }
-.arravpos-consent-backdrop {
+.aaravpos-barber-consent-backdrop {
   position: fixed;
   inset: 0;
   background-color: rgba(0, 0, 0, 0.6);
 }
-.arravpos-consent-modal {
+.aaravpos-barber-consent-modal {
   position: relative;
   z-index: 10;
   width: 90%;
@@ -2794,50 +2806,50 @@
   border-radius: 12px;
   padding: 16px;
 }
-.arravpos-consent-header {
+.aaravpos-barber-consent-header {
   display: flex;
   justify-content: space-between;
   margin-bottom: 10px;
 }
-.arravpos-consent-title {
+.aaravpos-barber-consent-title {
   font-size: 16px;
   font-weight: 600;
   color: #111827;
   margin: 0px;
 }
-.arravpos-consent-close-btn {
+.aaravpos-barber-consent-close-btn {
   color: #9ca3af;
   cursor: pointer;
   border: none;
   background: transparent;
   transition: color 0.2s ease;
 }
-.arravpos-consent-close-btn:hover {
+.aaravpos-barber-consent-close-btn:hover {
   color: #4b5563;
 }
-.arravpos-consent-content-wrapper {
+.aaravpos-barber-consent-content-wrapper {
   max-height: 42vh;
 }
-.arravpos-consent-content-box {
+.aaravpos-barber-consent-content-box {
   border: 1px solid #e5e7eb;
   border-radius: 6px;
   padding: 16px;
   background-color: #f9fafb;
 }
-.arravpos-consent-content {
+.aaravpos-barber-consent-content {
   color: #374151;
   white-space: pre-wrap;
   overflow-y: auto;
   max-height: 30vh;
 }
-.arravpos-consent-checkbox-label {
+.aaravpos-barber-consent-checkbox-label {
   display: flex;
   gap: 8px;
   align-items: center;
   margin-top: 12px;
   border-color: #e5e7eb;
 }
-.arravpos-consent-checkbox {
+.aaravpos-barber-consent-checkbox {
   width: 18px;
   height: 18px;
   color: #ef4444;
@@ -2845,49 +2857,49 @@
   border: 1px solid #d1d5db;
   border-radius: 4px;
 }
-.arravpos-consent-checkbox-text {
+.aaravpos-barber-consent-checkbox-text {
   font-size: 14px;
   font-weight: 500;
   color: #374151;
 }
-.arravpos-consent-typed-wrapper {
+.aaravpos-barber-consent-typed-wrapper {
   margin-top: 16px;
 }
-.arravpos-consent-input-label {
+.aaravpos-barber-consent-input-label {
   display: block;
   margin-bottom: 8px;
   font-size: 14px;
   font-weight: 500;
   color: #374151;
 }
-.arravpos-consent-required {
+.aaravpos-barber-consent-required {
   color: #ef4444;
 }
-.arravpos-consent-input {
+.aaravpos-barber-consent-input {
   width: 100%;
   padding: 8px 12px;
   border-radius: 6px;
   outline: none;
 }
-.arravpos-consent-input-normal {
+.aaravpos-barber-consent-input-normal {
   border: 1px solid #d1d5db;
 }
-.arravpos-consent-input-error {
+.aaravpos-barber-consent-input-error {
   border: 1px solid #ef4444;
 }
-.arravpos-consent-helper-text {
+.aaravpos-barber-consent-helper-text {
   margin-top: 4px;
   font-size: 12px;
   color: #6b7280;
 }
-.arravpos-consent-error {
+.aaravpos-barber-consent-error {
   font-size: 14px;
   color: #ef4444;
 }
-.arravpos-consent-signature-wrapper {
+.aaravpos-barber-consent-signature-wrapper {
   margin-top: 16px;
 }
-.arravpos-consent-signature-canvas {
+.aaravpos-barber-consent-signature-canvas {
   width: 100%;
   height: 136px;
   overflow: hidden;
@@ -2895,16 +2907,16 @@
   border-radius: 6px;
   background-color: #ffffff;
 }
-.arravpos-consent-error-signature {
+.aaravpos-barber-consent-error-signature {
   margin-top: 4px;
   margin-bottom: 4px;
 }
-.arravpos-consent-signature-actions {
+.aaravpos-barber-consent-signature-actions {
   display: flex;
   justify-content: space-between;
   margin-top: 8px;
 }
-.arravpos-consent-clear-btn {
+.aaravpos-barber-consent-clear-btn {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -2917,17 +2929,17 @@
   border-radius: 6px;
   background: transparent;
 }
-.arravpos-consent-clear-btn:hover {
+.aaravpos-barber-consent-clear-btn:hover {
   color: #1f2937;
 }
-.arravpos-consent-email-label {
+.aaravpos-barber-consent-email-label {
   display: flex;
   gap: 8px;
   align-items: center;
   cursor: pointer;
   font-size: 14px;
 }
-.arravpos-consent-email-checkbox {
+.aaravpos-barber-consent-email-checkbox {
   width: 16px;
   height: 16px;
   accent-color: var(--btn-bg);
@@ -2935,17 +2947,17 @@
   border: 1px solid #d1d5db;
   border-radius: 4px;
 }
-.arravpos-consent-email-text {
+.aaravpos-barber-consent-email-text {
   font-size: 14px;
   color: #374151;
 }
-.arravpos-consent-footer {
+.aaravpos-barber-consent-footer {
   display: flex;
   justify-content: flex-end;
   gap: 12px;
   margin-top: 20px;
 }
-.arravpos-consent-cancel-btn {
+.aaravpos-barber-consent-cancel-btn {
   padding: 8px 16px;
   border: 1px solid #d1d5db;
   border-radius: 6px;
@@ -2954,10 +2966,10 @@
   cursor: pointer;
   transition: color 0.2s ease;
 }
-.arravpos-consent-cancel-btn:hover {
+.aaravpos-barber-consent-cancel-btn:hover {
   color: #111827;
 }
-.arravpos-consent-submit-btn {
+.aaravpos-barber-consent-submit-btn {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -2966,27 +2978,27 @@
   border-radius: 6px;
   transition: all 0.2s ease;
 }
-.arravpos-consent-submit-disabled {
+.aaravpos-barber-consent-submit-disabled {
   background-color: #d1d5db;
   color: #4b5563;
   cursor: not-allowed;
 }
-.arravpos-consent-submit-active {
+.aaravpos-barber-consent-submit-active {
   background-color: var(--btn-bg);
   color: #ffffff;
   cursor: pointer;
 }
-.arravpos-consent-submit-active:hover {
+.aaravpos-barber-consent-submit-active:hover {
   background-color: var(--btn-bg-hover);
 }
-.arravpos-date-wrapper {
+.aaravpos-barber-date-wrapper {
   margin-top: 8px;
   margin-bottom: 14px;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
 }
-.arravpos-date-strip {
+.aaravpos-barber-date-strip {
   display: flex;
   align-items: stretch;
   gap: 6px;
@@ -2996,10 +3008,10 @@
   -webkit-overflow-scrolling: touch;
   scroll-behavior: smooth;
 }
-.arravpos-date-strip::-webkit-scrollbar {
+.aaravpos-barber-date-strip::-webkit-scrollbar {
   display: none;
 }
-.arravpos-date-card {
+.aaravpos-barber-date-card {
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
@@ -3013,37 +3025,37 @@
   user-select: none;
   border: 1px solid transparent;
 }
-.arravpos-date-card-active {
+.aaravpos-barber-date-card-active {
   background-color: var(--btn-bg);
   color: var(--btn-text);
   border-color: var(--btn-bg);
 }
-.arravpos-date-card-default:hover {
+.aaravpos-barber-date-card-default:hover {
   color: var(--btn-text-hover);
   border-color: var(--btn-bg-hover);
   background-color: var(--btn-bg-hover);
 }
-.arravpos-date-week {
+.aaravpos-barber-date-week {
   font-size: 10px;
   text-transform: uppercase;
   margin-bottom: 4px;
   line-height: 1;
   font-weight: 500;
 }
-.arravpos-date-day {
+.aaravpos-barber-date-day {
   font-family: monospace;
   font-size: 18px;
   line-height: 1;
   font-weight: 500;
 }
-.arravpos-date-today {
+.aaravpos-barber-date-today {
   margin-top: 6px;
   font-size: 8px;
   color: var(--red);
   font-weight: 700;
   line-height: 1;
 }
-.arravpos-calendar-btn {
+.aaravpos-barber-calendar-btn {
   margin-left: 16px;
   padding: 8px;
   font-size: 14px;
@@ -3062,7 +3074,7 @@
   color: #ffffff;
   border: none;
 }
-.arravpos-selected-professional {
+.aaravpos-barber-selected-professional {
   display: flex;
   align-items: center;
   gap: 12px;
@@ -3073,14 +3085,14 @@
   border-radius: 2px;
   flex-wrap: wrap;
 }
-.arravpos-selected-professional-image {
+.aaravpos-barber-selected-professional-image {
   width: 40px;
   height: 40px;
   border-radius: 9999px;
   object-fit: cover;
   flex-shrink: 0;
 }
-.arravpos-selected-professional-avatar {
+.aaravpos-barber-selected-professional-avatar {
   width: 40px;
   height: 40px;
   border-radius: 9999px;
@@ -3091,16 +3103,16 @@
   justify-content: center;
   flex-shrink: 0;
 }
-.arravpos-selected-professional-content {
+.aaravpos-barber-selected-professional-content {
   flex: 1;
   min-width: 0;
 }
-.arravpos-selected-professional-name {
+.aaravpos-barber-selected-professional-name {
   font-size: 14px;
   font-weight: 600;
   margin: 0px 0px 4px;
 }
-.arravpos-selected-professional-services {
+.aaravpos-barber-selected-professional-services {
   font-size: 12px;
   color: var(--muted);
   overflow: hidden;
@@ -3108,41 +3120,41 @@
   white-space: nowrap;
   margin: 0px;
 }
-.arravpos-scroll-area {
+.aaravpos-barber-scroll-area {
   overflow-y: auto;
   padding-bottom: 80px;
   scrollbar-width: none;
   max-height: 362px;
   position: relative;
 }
-.arravpos-scroll-area::-webkit-scrollbar {
+.aaravpos-barber-scroll-area::-webkit-scrollbar {
   display: none;
 }
-.arravpos-loader-wrapper {
+.aaravpos-barber-loader-wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
 }
-.arravpos-loader {
+.aaravpos-barber-loader {
   width: 32px;
   height: 32px;
   border-radius: 9999px;
   border: 3px solid var(--btn-bg);
   border-top-color: transparent;
-  animation: arravpos-spin 1s linear infinite;
+  animation: aaravpos-barber-spin 1s linear infinite;
 }
-.arravpos-slot-icon {
+.aaravpos-barber-slot-icon {
   color: #fb923c;
 }
-.arravpos-slot-section {
+.aaravpos-barber-slot-section {
   margin-bottom: 16px;
   border: 1px solid rgb(0 0 0 / 10%);
   border-radius: 2px;
   overflow: hidden;
 }
-.arravpos-slot-section-header {
+.aaravpos-barber-slot-section-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -3151,10 +3163,10 @@
   background-color: var(--surface);
   transition: background-color 0.2s ease;
 }
-.arravpos-slot-section-header:hover {
+.aaravpos-barber-slot-section-header:hover {
   background-color: rgba(var(--btn-bg), 0.08);
 }
-.arravpos-slot-section-title {
+.aaravpos-barber-slot-section-title {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -3164,23 +3176,23 @@
   letter-spacing: 1.2px;
   color: rgba(0, 0, 0, 0.8);
 }
-.arravpos-slot-section-arrow {
+.aaravpos-barber-slot-section-arrow {
   transition: transform 0.2s ease;
 }
-.arravpos-slot-section-arrow-open {
+.aaravpos-barber-slot-section-arrow-open {
   transform: rotate(180deg);
 }
-.arravpos-slot-section-content {
+.aaravpos-barber-slot-section-content {
   padding: 12px;
   border-top: 1px solid rgb(0 0 0 / 10%);
   background-color: #ffffff;
 }
-.arravpos-slot-grid {
+.aaravpos-barber-slot-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
   gap: 8px;
 }
-.arravpos-slot-card {
+.aaravpos-barber-slot-card {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -3191,30 +3203,30 @@
   border-radius: 2px;
   transition: all 0.2s ease;
 }
-.arravpos-slot-card-default {
+.aaravpos-barber-slot-card-default {
   background-color: #ffffff;
   cursor: pointer;
 }
-.arravpos-slot-card-default:hover {
+.aaravpos-barber-slot-card-default:hover {
   color: var(--btn-bg);
   border-color: var(--btn-bg);
 }
-.arravpos-slot-card-selected {
+.aaravpos-barber-slot-card-selected {
   background-color: #fff8f8;
   color: var(--btn-bg);
   border-color: rgb(0 0 0 / 10%);
   cursor: pointer;
 }
-.arravpos-slot-card-disabled {
+.aaravpos-barber-slot-card-disabled {
   background-color: #f3f4f6;
   color: #9ca3af;
   cursor: not-allowed;
 }
-.arravpos-slot-time {
+.aaravpos-barber-slot-time {
   font-family: monospace;
   font-size: 14px;
 }
-.arravpos-slot-status {
+.aaravpos-barber-slot-status {
   font-size: 10px;
 }
 .aaravpos-barber-staff-wrapper {
@@ -3227,14 +3239,14 @@
 .aaravpos-barber-staff-wrapper::-webkit-scrollbar {
   display: none;
 }
-.arravpos-profile-image {
+.aaravpos-barber-profile-image {
   width: 40px;
   height: 40px;
   border-radius: 9999px;
   object-fit: cover;
   flex-shrink: 0;
 }
-.arravpos-profile-avatar {
+.aaravpos-barber-profile-avatar {
   width: 40px;
   height: 40px;
   border-radius: 9999px;
@@ -3245,7 +3257,7 @@
   justify-content: center;
   flex-shrink: 0;
 }
-.arravpos-card-box {
+.aaravpos-barber-card-box {
   background-color: #ffffff;
   border: 1px solid var(--btn-bg);
   border-radius: 2px;
@@ -3253,7 +3265,7 @@
   margin-bottom: 8px;
   font-size: 14px;
 }
-.arravpos-section-label {
+.aaravpos-barber-section-label {
   margin-top: 20px;
   margin-bottom: 8px;
   font-size: 10px;
@@ -3262,7 +3274,7 @@
   letter-spacing: 1.5px;
   color: rgba(0, 0, 0, 0.7);
 }
-.arravpos-select-card {
+.aaravpos-barber-select-card {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -3273,22 +3285,22 @@
   margin-bottom: 8px;
   border: 1px solid;
 }
-.arravpos-select-card-default {
+.aaravpos-barber-select-card-default {
   border-color: var(--border);
   background-color: transparent;
 }
-.arravpos-select-card-active {
+.aaravpos-barber-select-card-active {
   border-color: var(--red);
   background-color: rgba(255, 0, 0, 0.05);
 }
-.arravpos-select-check {
+.aaravpos-barber-select-check {
   margin-left: auto;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 }
-.arravpos-date-nav-btn {
+.aaravpos-barber-date-nav-btn {
   flex-shrink: 0;
   width: 34px;
   background-color: rgb(242, 240, 236);
@@ -3304,7 +3316,7 @@
   align-self: stretch;
   transition: all 150ms ease;
 }
-.arravpos-date-nav-btn:hover {
+.aaravpos-barber-date-nav-btn:hover {
   border-color: var(--red);
   color: var(--red);
   background-color: rgba(215, 38, 61, 0.12);
@@ -3388,7 +3400,7 @@
   }
 }
 @media (max-width: 768px) {
-  .arravpos-select-card {
+  .aaravpos-barber-select-card {
     gap: 10px;
     padding: 10px;
   }
@@ -3406,47 +3418,47 @@
   .aaravpos-barber-calendar-grid {
     gap: 8px;
   }
-  .arravpos-date-nav-btn svg {
+  .aaravpos-barber-date-nav-btn svg {
     width: 18px;
     height: 18px;
   }
-  .arravpos-date-strip {
+  .aaravpos-barber-date-strip {
     gap: 5px;
   }
-  .arravpos-date-week {
+  .aaravpos-barber-date-week {
     font-size: 9px;
   }
-  .arravpos-date-day {
+  .aaravpos-barber-date-day {
     font-size: 20px;
   }
-  .arravpos-date-today {
+  .aaravpos-barber-date-today {
     font-size: 7px;
   }
-  .arravpos-select-check svg {
+  .aaravpos-barber-select-check svg {
     width: 18px;
     height: 18px;
   }
-  .arravpos-card-box {
+  .aaravpos-barber-card-box {
     padding: 14px;
     font-size: 13px;
   }
-  .arravpos-calendar-btn {
+  .aaravpos-barber-calendar-btn {
     font-size: 12px;
   }
-  .arravpos-outlet-info {
+  .aaravpos-barber-outlet-info {
     padding: 10px;
   }
-  .arravpos-outlet-logo {
+  .aaravpos-barber-outlet-logo {
     width: 36px;
     height: 36px;
   }
-  .arravpos-appointment-header {
+  .aaravpos-barber-appointment-header {
     align-items: flex-start;
   }
-  .arravpos-appointment-price {
+  .aaravpos-barber-appointment-price {
     font-size: 14px;
   }
-  .arravpos-appointment-services {
+  .aaravpos-barber-appointment-services {
     white-space: normal;
     display: -webkit-box;
     -webkit-line-clamp: 2;
@@ -3479,17 +3491,17 @@
   }
 }
 @media (min-width: 768px) {
-  .arravpos-section-label {
+  .aaravpos-barber-section-label {
     margin-top: 18px;
     font-size: 9px;
     letter-spacing: 1.3px;
   }
-  .arravpos-profile-avatar {
+  .aaravpos-barber-profile-avatar {
     width: 36px;
     height: 36px;
     font-size: 14px;
   }
-  .arravpos-profile-image {
+  .aaravpos-barber-profile-image {
     width: 36px;
     height: 36px;
   }
@@ -3518,7 +3530,7 @@
   .aaravpos-barber-pro-order-list {
     height: calc(100dvh - 380px);
   }
-  .arravpos-details-grid {
+  .aaravpos-barber-details-grid {
     grid-template-columns: repeat(2, 1fr);
     gap: 20px;
   }
@@ -3527,73 +3539,73 @@
   }
 }
 @media (max-width: 480px) {
-  .arravpos-date-nav-btn {
+  .aaravpos-barber-date-nav-btn {
     width: 23px;
     padding: 6px;
   }
-  .arravpos-date-nav-btn svg {
+  .aaravpos-barber-date-nav-btn svg {
     width: 16px;
     height: 16px;
   }
-  .arravpos-date-strip {
+  .aaravpos-barber-date-strip {
     gap: 4px;
   }
-  .arravpos-date-card {
+  .aaravpos-barber-date-card {
     min-width: 24px;
     min-height: 38px;
     padding: 8px 4px;
   }
-  .arravpos-calendar-btn {
+  .aaravpos-barber-calendar-btn {
     margin-left: 2px;
     padding: 6px;
   }
-  .arravpos-date-week {
+  .aaravpos-barber-date-week {
     font-size: 8px;
     margin-bottom: 3px;
   }
-  .arravpos-date-day {
+  .aaravpos-barber-date-day {
     font-size: 18px;
   }
-  .arravpos-date-today {
+  .aaravpos-barber-date-today {
     margin-top: 4px;
     font-size: 6px;
   }
-  .arravpos-select-check svg {
+  .aaravpos-barber-select-check svg {
     width: 16px;
     height: 16px;
   }
-  .arravpos-select-card {
+  .aaravpos-barber-select-card {
     gap: 8px;
     padding: 8px;
   }
-  .arravpos-section-label {
+  .aaravpos-barber-section-label {
     margin-top: 16px;
     font-size: 8px;
     letter-spacing: 1.1px;
   }
-  .arravpos-card-box {
+  .aaravpos-barber-card-box {
     padding: 12px;
     font-size: 12px;
   }
-  .arravpos-profile-image {
+  .aaravpos-barber-profile-image {
     width: 32px;
     height: 32px;
   }
-  .arravpos-profile-avatar {
+  .aaravpos-barber-profile-avatar {
     width: 32px;
     height: 32px;
     font-size: 12px;
   }
-  .arravpos-outlet-name {
+  .aaravpos-barber-outlet-name {
     font-size: 13px;
   }
-  .arravpos-outlet-address {
+  .aaravpos-barber-outlet-address {
     font-size: 11px;
   }
-  .arravpos-appointment-name {
+  .aaravpos-barber-appointment-name {
     font-size: 13px;
   }
-  .arravpos-appointment-date-text {
+  .aaravpos-barber-appointment-date-text {
     font-size: 13px;
   }
   .aaravpos-barber-date-modal {
@@ -3605,7 +3617,7 @@
   }
 }
 @media (max-width: 543px) {
-  .arravpos-date-wrapper {
+  .aaravpos-barber-date-wrapper {
     justify-content: space-between;
   }
   .aaravpos-barber-services-grid {
@@ -3616,7 +3628,7 @@
   .aaravpos-barber-sidebar {
     display: block;
   }
-  .aaravpos-barber-sidebar-close-btn {
+  .aaravpos-barber-sidebar-mobile {
     display: none;
   }
   .aaravpos-barber-layout-wrapper {
@@ -3632,20 +3644,20 @@
   }
 }
 @media (min-width: 1024px) {
-  .arravpos-date-strip {
+  .aaravpos-barber-date-strip {
     gap: 6px;
   }
   .custom-container {
     padding-left: 64px;
     padding-right: 64px;
   }
-  .arravpos-consent-modal {
+  .aaravpos-barber-consent-modal {
     width: 60%;
   }
-  .arravpos-scroll-area {
+  .aaravpos-barber-scroll-area {
     padding-bottom: 16px;
   }
-  .arravpos-consent-title {
+  .aaravpos-barber-consent-title {
     font-size: 20px;
   }
   .aaravpos-barber-header {
@@ -3671,7 +3683,7 @@
     align-items: flex-end;
     gap: 32px;
   }
-  .arravpos-details-scroll {
+  .aaravpos-barber-details-scroll {
     padding-bottom: 16px;
   }
 }
@@ -3683,7 +3695,7 @@
   .aaravpos-barber-sidebar {
     display: none;
   }
-  .arravpos-booking-grid {
+  .aaravpos-barber-booking-grid {
     flex-direction: column;
     gap: 20px;
   }
@@ -3701,20 +3713,10 @@
     grid-template-columns: repeat(5, 1fr);
   }
 }
-@media (max-width: 1500px) {
-  .aaravpos-barber-professional-grid {
-    grid-template-columns: repeat(4, 1fr);
-  }
-}
-@media (max-width: 1200px) {
-  .aaravpos-barber-professional-grid {
-    grid-template-columns: repeat(3, 1fr);
-  }
-}
 @media (max-width: 768px) {
   .aaravpos-barber-professional-grid {
-    grid-template-columns: repeat(2, 1fr);
     gap: 20px;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 220px));
   }
   .aaravpos-barber-professional-name {
     font-size: 20px;
@@ -3814,12 +3816,12 @@
     transform: rotate(360deg);
   }
 }
-@keyframes arravpos-spin {
+@keyframes aaravpos-barber-spin {
   to {
     transform: rotate(360deg);
   }
 }
-@keyframes arravpos-spin {
+@keyframes aaravpos-barber-spin {
   to {
     transform: rotate(360deg);
   }