@aaravpos/appointment-booking-plugin 1.0.3 → 1.0.4

package/dist/styles.css

@@ -1,4 +1,5 @@
 /*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
+@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap");
 :root {
   --toastify-color-light: #fff;
   --toastify-color-dark: #121212;
@@ -769,6 +770,7 @@
   color: var(--PhoneInputCountrySelectArrow-color--focus);
 }
 :root {
+  --canvas-bg: #fff;
   --btn-bg: #d7263d;
   --btn-text: #ffffff;
   --btn-bg-hover: #1f2937;
@@ -782,9 +784,6 @@
   --font-body: 'DM Sans', sans-serif;
   --font-mono: 'DM Mono', monospace;
 }
-:root, :host {
-  --font-mono: var(--font-mono);
-}
 @layer base {
   body {
     font-family: var(--font-body);
@@ -803,6 +802,17 @@
   padding: 16px;
   color: #ef4444;
 }
+.arravpos-m0 {
+  margin: 0px !important;
+}
+.aaravpos-tab-enabled {
+  cursor: pointer;
+}
+.aaravpos-tab-disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+  pointer-events: none;
+}
 .arravpos-container {
   min-height: 100vh;
   background-color: #fafaf8;
@@ -811,14 +821,160 @@
   box-sizing: border-box;
   margin: 0 auto;
 }
-.aaravpos-outlet-title {
-  font-size: 30px;
-  font-weight: 900;
+.aaravpos-margin-top-20 {
+  margin-top: 20px;
+}
+.aaravpos-margin-bottom-20 {
+  margin-bottom: 20px !important;
+}
+.aaravpos-mt-auto {
+  margin-top: auto;
+}
+.aaravpos-btn {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 12px 32px;
+  border: none;
+  background: var(--btn-bg, #000);
+  color: var(--btn-text, #fff);
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 1.5px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border-radius: 20px;
+}
+.aaravpos-btn:hover {
+  background: var(--btn-bg-hover, #222);
+  color: var(--btn-text-hover, #fff);
+}
+.aaravpos-divider {
+  height: 1px;
+  background: var(--border-color, #d4d4d4);
+  margin-top: auto;
+  margin-bottom: 8px;
+}
+.aaravpos-btn:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+.aaravpos-btn-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+.aaravpos-mb-10 {
+  margin-bottom: 10px;
+}
+.aaravpos-padding-btn {
+  padding: 9px 8px !important;
+}
+.aaravpos-layout {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: var(--canvas, #ffffff);
+  color: var(--copy, #000000);
+  overflow: hidden;
+}
+.aaravpos-layout-content {
+  flex: 1;
+  position: relative;
+}
+.aaravpos-layout-page {
+  height: 100%;
+  animation: aaravposFadeIn 0.3s ease;
+}
+.aaravpos-title {
+  font-size: 24px;
+  font-weight: 600;
   text-transform: uppercase;
   letter-spacing: -0.025em;
   color: #111827;
   margin-bottom: 12px;
   line-height: 1.1;
+  margin-top: 0px;
+}
+.aaravpos-main-layout {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+.aaravpos-layout-wrapper {
+  flex: 1;
+  display: grid;
+  grid-template-columns: 1fr;
+  overflow: hidden;
+  position: relative;
+}
+.aaravpos-main-content {
+  padding: 16px;
+  position: relative;
+}
+.aaravpos-mobile-button {
+  position: fixed;
+  bottom: 20px;
+  left: 0;
+  right: 0;
+  z-index: 50;
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.aaravpos-view-order-btn {
+  padding: 12px 34px;
+  font-size: 14px;
+  border-radius: 999px;
+  background: var(--btn-bg);
+  color: #ffffff;
+  border: none;
+  font-family: var(--font-dm-sans);
+  font-weight: 700;
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+.aaravpos-view-order-btn:hover {
+  opacity: 0.9;
+}
+.aaravpos-view-order-btn:disabled {
+  background: #cccccc;
+  cursor: not-allowed;
+}
+.aaravpos-sidebar {
+  display: none;
+  flex-direction: column;
+  background: var(--surface-bg, #ffffff);
+  border-left: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 16px;
+  padding-bottom: 14px;
+  height: 100dvh;
+  overflow: hidden;
+}
+.aaravpos-sidebar-mobile {
+  position: fixed;
+  z-index: 999;
+  inset: 0;
+  height: 100vh;
+  background: #ffffff;
+  border-radius: 16px 16px 0 0;
+  display: flex;
+  flex-direction: column;
+  animation: aaravposFadeIn 0.25s ease;
+}
+.aaravpos-sidebar-mobile-content {
+  flex: 1;
+  position: fixed;
+  inset: 0;
+  padding: 16px;
+  overflow-y: auto;
 }
 .aaravpos-outlet-divider {
   width: 56px;
@@ -852,7 +1008,7 @@
 }
 .aaravpos-search-input {
   width: 100%;
-  height: 44px;
+  height: 36px;
   border-radius: 6px;
   border: 1px solid #d1d5db;
   background: #ffffff;
@@ -892,7 +1048,7 @@
 .aaravpos-outlet-list-wrapper {
   padding-top: 8px;
   padding-bottom: 8px;
-  max-height: 70vh;
+  max-height: 60vh;
   overflow: auto;
   scrollbar-width: none;
 }
@@ -961,7 +1117,7 @@
 }
 .aaravpos-outlet-card-title {
   font-size: 18px;
-  font-weight: 900;
+  font-weight: 600;
   text-transform: uppercase;
   letter-spacing: -0.025em;
   color: #111827;
@@ -1009,7 +1165,7 @@
   display: flex;
   align-items: center;
   flex-direction: row;
-  gap: 16px;
+  gap: 4px;
   font-weight: 600;
 }
 .aaravpos-mobile-back-btn {
@@ -1043,12 +1199,12 @@
   justify-content: center;
   height: 40px;
   width: 40px;
-  border: 1px solid #e5e7eb !important;
-  background: #ffffff !important;
+  border: 1px solid #e5e7eb;
+  background: #ffffff;
   cursor: pointer;
   outline: none;
-  border-radius: 100% !important;
-  overflow: hidden !important;
+  border-radius: 100%;
+  overflow: hidden;
 }
 .aaravpos-desktop-back-btn:hover {
   background: #f3f4f6;
@@ -1085,7 +1241,6 @@
 .aaravpos-step-btn.active {
   border-bottom-color: var(--btn-bg);
   color: #000000;
-  background: rgba(0, 0, 0, 0.04);
 }
 .aaravpos-step-btn.inactive {
   color: rgba(0, 0, 0, 0.6);
@@ -1099,93 +1254,2364 @@
 .aaravpos-step-icon.inactive {
   color: var(--btn-bg-hover);
 }
-@media (min-width: 640px) {
-  .custom-container {
-    padding-left: 32px;
-    padding-right: 32px;
-  }
-  .aaravpos-outlet-title {
-    font-size: 36px;
-  }
-  .aaravpos-outlet-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
+.aaravpos-page-title {
+  font-size: 24px;
+  font-weight: 900;
+  text-transform: uppercase;
+  letter-spacing: -0.025em;
+  color: #111827;
+  padding-top: 12px;
+  line-height: 1.1;
+  margin-bottom: 0px;
 }
-@media (min-width: 768px) {
-  .aaravpos-outlet-list-wrapper {
-    max-height: 80vh;
-  }
-  .aaravpos-desktop-stepper {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-    width: 100%;
-  }
+.aaravpos-sub-title {
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.6);
+  margin-bottom: 24px;
+  line-height: 1.5;
+  margin-top: 0px;
 }
-@media (min-width: 1024px) {
-  .custom-container {
-    padding-left: 64px;
-    padding-right: 64px;
-  }
-  .aaravpos-header {
-    flex-direction: row;
-    align-items: center;
-  }
-  .aaravpos-search-wrapper {
-    max-width: 448px;
-  }
-  .aaravpos-outlet-grid {
-    grid-template-columns: repeat(3, 1fr);
-  }
+.aaravpos-topbar {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 20px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
 }
-@media (min-width: 1280px) {
-  .aaravpos-outlet-title {
-    font-size: 48px;
-  }
-  .aaravpos-outlet-grid {
-    grid-template-columns: repeat(4, 1fr);
-  }
+.aaravpos-tab-group {
+  display: flex;
+  align-items: flex-end;
+  gap: 32px;
 }
-@media (min-width: 1536px) {
-  .aaravpos-outlet-grid {
-    grid-template-columns: repeat(5, 1fr);
-  }
+.aaravpos-tab-btn {
+  padding-bottom: 16px;
+  border: none;
+  border-bottom: 2px solid transparent;
+  background: transparent;
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  cursor: pointer;
+  transition: all 0.3s ease;
 }
-@keyframes fadeUp {
-  from {
-    opacity: 0;
-    transform: translateY(8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+.aaravpos-tab-btn.active {
+  color: var(--btn-bg, #000);
+  border-bottom-color: var(--btn-bg, #000);
 }
-@keyframes slotIn {
-  from {
-    opacity: 0;
-    transform: translateY(6px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+.aaravpos-tab-btn.inactive {
+  color: rgba(0, 0, 0, 0.4);
 }
-@keyframes popIn {
-  from {
-    opacity: 0;
-    transform: scale(0.95) translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1) translateY(0);
-  }
+.aaravpos-tab-btn.inactive:hover {
+  color: #000;
 }
-@keyframes pulseBrand {
-  0%, 100% {
-    box-shadow: 0 0 0 16px color-mix(in srgb, var(--app-bg) 12%, transparent);
-  }
-  50% {
-    box-shadow: 0 0 0 24px color-mix(in srgb, var(--app-bg) 6%, transparent);
+.aaravpos-search-box {
+  position: relative;
+  width: 100%;
+}
+.aaravpos-search-icon {
+  position: absolute;
+  left: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #9ca3af;
+}
+.aaravpos-search-input {
+  width: 100%;
+  padding: 8px 40px 8px 36px;
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  border-radius: 6px;
+  font-size: 14px;
+  outline: none;
+  transition: all 0.3s ease;
+}
+.aaravpos-search-input:focus {
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
+}
+.aaravpos-search-clear {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  border: none;
+  background: transparent;
+  color: #9ca3af;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+.aaravpos-search-clear:hover {
+  color: #000;
+}
+.aaravpos-supercategory-wrapper {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 8px;
+  width: 100%;
+  overflow-x: auto;
+  margin-bottom: 12px;
+  padding: 4px;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  scrollbar-width: none;
+}
+.aaravpos-supercategory-wrapper::-webkit-scrollbar {
+  display: none;
+}
+.aaravpos-supercategory-btn {
+  min-width: fit-content;
+  padding: 8px 16px;
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  background: #ffffff;
+  text-align: left;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  font-size: 14px;
+}
+.aaravpos-supercategory-btn:hover {
+  border-color: rgba(0, 0, 0, 0.5);
+}
+.aaravpos-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 {
+  color: #fff;
+}
+.aaravpos-supercategory-title {
+  margin-top: 4px;
+  font-size: 14px;
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+.aaravpos-supercategory-count {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  color: rgba(0, 0, 0, 0.6);
+  margin-bottom: 4px;
+}
+.aaravpos-services-wrapper {
+  overflow-y: auto;
+  padding-bottom: 80px;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.aaravpos-services-wrapper::-webkit-scrollbar {
+  display: none;
+}
+.aaravpos-services-wrapper.standalone {
+  height: calc(100dvh - 315px);
+}
+.aaravpos-services-wrapper.supercategory {
+  height: calc(100dvh - 415px);
+}
+.aaravpos-services-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 12px;
+}
+.aaravpos-service-card {
+  position: relative;
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  border-radius: 6px;
+  padding: 12px;
+  cursor: pointer;
+  background: #ffffff;
+  transition: all 0.25s ease;
+}
+.aaravpos-service-card:hover {
+  border-color: rgba(0, 0, 0, 0.6);
+}
+.aaravpos-service-card.active {
+  border-color: var(--btn-bg);
+  background: rgba(0, 0, 0, 0.03);
+}
+.aaravpos-tax-badge, .aaravpos-consent-badge {
+  position: absolute;
+  top: 0;
+  font-size: 9px;
+  padding: 2px 8px;
+  color: #fff;
+}
+.aaravpos-tax-badge {
+  left: 0;
+  background: #15803d;
+  border-radius: 0 0 6px 0;
+}
+.aaravpos-consent-badge {
+  right: 0;
+  background: rgba(0, 0, 0, 0.8);
+  border-radius: 0 0 0 6px;
+}
+.aaravpos-service-title {
+  font-size: 14px;
+  font-weight: 700;
+  margin-top: 0px;
+  margin-bottom: 4px;
+  text-transform: uppercase;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.aaravpos-service-description-wrapper {
+  position: relative;
+}
+.aaravpos-service-description {
+  font-size: 12px;
+  font-weight: 600;
+  color: rgba(0, 0, 0, 0.45);
+  text-transform: uppercase;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin: 5px 0px;
+}
+.aaravpos-service-tooltip {
+  position: absolute;
+  display: none;
+  top: 20px;
+  left: 0;
+  z-index: 10;
+  width: 208px;
+  padding: 8px;
+  font-size: 12px;
+  background: #f5f5f5;
+  border-radius: 6px;
+}
+.aaravpos-service-description-wrapper:hover .aaravpos-service-tooltip {
+  display: block;
+}
+.aaravpos-service-price {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 8px;
+  margin-bottom: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  color: rgba(0, 0, 0, 0.6);
+}
+.aaravpos-service-price-right {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-family: monospace;
+}
+.aaravpos-service-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin-top: 16px;
+  border: 1px solid #d1d5db;
+  width: fit-content;
+}
+.aaravpos-service-action-btn {
+  width: 40px;
+  height: 32px;
+  border: none;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background 0.2s ease;
+}
+.aaravpos-service-action-btn:hover {
+  background: #f5f5f4;
+}
+.aaravpos-service-action-btn.plus {
+  background: rgba(0, 0, 0, 0.8);
+  color: white;
+}
+.aaravpos-service-action-btn.plus:hover {
+  background: rgba(0, 0, 0, 0.9);
+}
+.aaravpos-service-qty {
+  width: 40px;
+  height: 32px;
+  border-left: 1px solid #d1d5db;
+  border-right: 1px solid #d1d5db;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: 600;
+}
+.aaravpos-skeleton-card {
+  position: relative;
+  height: 134px;
+  overflow: hidden;
+  border-radius: 4px;
+  background: #e0e0e0;
+}
+.aaravpos-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;
+}
+.aaravpos-no-staff {
+  font-size: 14px;
+  font-weight: 600;
+  color: rgba(var(--btn-bg-rgb, 0, 0, 0), 0.9);
+}
+.aaravpos-staff-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
+  gap: 12px;
+}
+.aaravpos-pro-card {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  border: 2px solid rgba(0, 0, 0, 0.15);
+  border-radius: 6px;
+  padding: 12px;
+  background: #ffffff;
+  cursor: pointer;
+  transition: all 0.25s ease;
+}
+.aaravpos-pro-card:hover {
+  border-color: rgba(var(--btn-bg, 0, 0, 0), 0.5);
+}
+.aaravpos-pro-card.active {
+  border-color: rgba(var(--btn-bg, 0, 0, 0), 0.04);
+  background: rgba(var(--btn-bg, 0, 0, 0), 0.05);
+}
+.aaravpos-pro-image {
+  width: 48px;
+  height: 48px;
+  border-radius: 8px;
+  object-fit: cover;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+.aaravpos-pro-avatar {
+  width: 48px;
+  height: 48px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #ffffff;
+  font-size: 18px;
+  font-weight: 700;
+}
+.aaravpos-pro-info {
+  display: flex;
+  flex-direction: column;
+}
+.aaravpos-pro-name {
+  font-size: 16px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+.aaravpos-pro-type {
+  font-size: 12px;
+  color: #6b7280;
+  text-transform: uppercase;
+  margin: 0px;
+}
+.aaravpos-order-sidebar {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: calc(100dvh - 20px);
+}
+.aaravpos-order-header {
+  padding: 0px 0px 12px 0px;
+  border-bottom: 1px solid #d1d5db;
+}
+.aaravpos-order-title {
+  font-size: 18px;
+  font-weight: 900;
+  text-transform: uppercase;
+  letter-spacing: -0.5px;
+  margin-bottom: 10px;
+  margin-top: 0px;
+}
+.aaravpos-order-subtitle {
+  font-size: 12px;
+  font-weight: 600;
+  color: rgba(0, 0, 0, 0.4);
+  text-transform: uppercase;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-bottom: 0px;
+}
+.aaravpos-order-body {
+  padding: 12px 0px;
+}
+.aaravpos-order-section-title {
+  font-size: 14px;
+  font-weight: 600;
+  margin: 6px 0;
+  color: rgba(0, 0, 0, 0.4);
+  text-transform: uppercase;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.aaravpos-order-list {
+  height: calc(100dvh - 240px);
+  overflow-y: auto;
+  padding: 0px;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.aaravpos-pro-order-list {
+  height: calc(100dvh - 270px);
+  overflow-y: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  padding: 0px;
+}
+.aaravpos-order-list::-webkit-scrollbar, .aaravpos-pro-order-list::-webkit-scrollbar {
+  display: none;
+}
+.aaravpos-order-item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding: 8px 0;
+  border-bottom: 1px dotted #9ca3af;
+}
+.aaravpos-order-item:last-child {
+  border-bottom: none;
+}
+.aaravpos-order-service-name {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 14px;
+  font-weight: 500;
+  text-transform: uppercase;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin: 0px;
+}
+.aaravpos-order-details {
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  align-items: center;
+  gap: 8px;
+  margin-top: 4px;
+}
+.aaravpos-order-detail {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.6);
+}
+.aaravpos-order-detail.center {
+  justify-content: center;
+}
+.aaravpos-order-detail.right {
+  justify-content: flex-end;
+}
+.aaravpos-order-footer {
+  padding: 12px 0px;
+}
+.aaravpos-order-subtotal {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  margin-bottom: 4px;
+}
+.aaravpos-order-subtotal-label {
+  font-size: 16px;
+  font-weight: 600;
+  color: rgba(0, 0, 0, 0.6);
+  text-transform: capitalize;
+}
+.aaravpos-order-subtotal-price {
+  font-size: 18px;
+  display: flex;
+  align-items: center;
+  font-family: monospace;
+  font-weight: 600;
+}
+.aaravpos-common-btn {
+  width: 100%;
+  margin-top: 14px;
+  padding: 12px 8px;
+  border: none;
+  background: var(--btn-bg);
+  color: var(--btn-text, #ffffff);
+  font-size: 12px;
+  font-weight: 700;
+  font-family: var(--font-dm-sans);
+  text-transform: uppercase;
+  letter-spacing: 1.5px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+.aaravpos-common-btn:hover {
+  background: var(--btn-bg-hover);
+  color: var(--btn-text-hover, #ffffff);
+}
+.aaravpos-common-btn:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+.aaravpos-common-btn-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+.aaravpos-order-label {
+  font-size: 14px;
+  font-weight: 600;
+  margin: 6px 0;
+  color: rgba(0, 0, 0, 0.4);
+  text-transform: uppercase;
+}
+.aaravpos-pro-image {
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  object-fit: cover;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+.aaravpos-pro-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+}
+.aaravpos-pro-info {
+  overflow: hidden;
+}
+.aaravpos-pro-name {
+  font-size: 14px;
+  font-weight: 700;
+  text-transform: uppercase;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: 0px 0px 5px 0px;
+}
+.aaravpos-pro-type {
+  font-size: 12px;
+  color: #6b7280;
+  text-transform: uppercase;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.aaravpos-summary-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 6px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #374151;
+}
+.aaravpos-summary-label {
+  display: block;
+}
+.aaravpos-summary-value {
+  display: flex;
+  align-items: center;
+  font-family: monospace;
+}
+.aaravpos-consent-box {
+  margin-bottom: 12px;
+  padding: 8px;
+  background: #fefce8;
+  border: 1px solid #fde68a;
+  border-radius: 4px;
+}
+.aaravpos-consent-text {
+  font-size: 12px;
+  font-weight: 500;
+  color: #854d0e;
+}
+.aaravpos-consent-progress {
+  width: 100%;
+  height: 6px;
+  margin-top: 4px;
+  background: #e5e7eb;
+  border-radius: 9999px;
+  overflow: hidden;
+}
+.aaravpos-consent-progress-bar {
+  height: 100%;
+  background: #ca8a04;
+  border-radius: 9999px;
+  transition: width 0.3s ease;
+}
+.aaravpos-tip-input-wrapper {
+  overflow: hidden;
+}
+.aaravpos-tip-input {
+  width: 100%;
+  padding: 8px 12px;
+  margin-bottom: 12px;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+  font-size: 14px;
+  outline: none;
+  box-sizing: border-box;
+  transition: border-color 0.2s ease;
+}
+.aaravpos-tip-input:focus {
+  border-color: #9ca3af;
+}
+.aaravpos-tip-title {
+  margin-top: 16px;
+  margin-bottom: 8px;
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 1.5px;
+}
+.aaravpos-tip-options {
+  display: flex;
+  gap: 4px;
+  margin-bottom: 8px;
+}
+.aaravpos-tip-btn {
+  padding: 6px 8px;
+  border: 1px solid var(--btn-bg-hover);
+  border-radius: 4px;
+  background: #fff;
+  font-size: 12px;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+.aaravpos-tip-btn-flex {
+  flex: 1;
+}
+.aaravpos-tip-btn-fixed {
+  flex: none;
+  width: 64px;
+}
+.aaravpos-tip-btn-active {
+  background: var(--btn-bg);
+  border-color: var(--btn-bg);
+  color: #fff;
+}
+.aaravpos-date-time {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  font-size: 14px;
+  font-weight: 700;
+}
+.aaravpos-date-time-label {
+  color: #111827;
+}
+.aaravpos-date-time-value {
+  color: var(--btn-bg);
+  font-weight: 700;
+}
+.aaravpos-date-time-empty {
+  color: var(--text-muted);
+  font-weight: 500;
+}
+.aaravpos-sidebar-close-btn {
+  display: block;
+  width: auto;
+  padding: 8px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  cursor: pointer;
+  font-size: 30px;
+  transition: all 0.2s ease;
+}
+.aaravpos-sidebar-close-btn:hover {
+  background: rgba(0, 0, 0, 0.05);
+}
+.aaravpos-aside .aaravpos-order-sidebar {
+  height: calc(100dvh - 30px);
+}
+.aaravpos-date-modal-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 200;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: calc(100dvh - 56px);
+  background: rgba(14, 14, 14, 0.55);
+  backdrop-filter: blur(4px);
+}
+.aaravpos-date-modal {
+  width: 320px;
+  max-width: 95vw;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  background: var(--canvas-bg);
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
+  animation: aaravposPopIn 0.2s ease;
+}
+.aaravpos-date-modal-header {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  background: var(--canvas-bg);
+  border-bottom: 1px solid var(--border-color);
+}
+.aaravpos-date-modal-title {
+  font-size: 22px;
+  font-weight: 700;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+}
+.aaravpos-date-close-btn {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 999px;
+  background: var(--surface-bg);
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+.aaravpos-date-close-btn:hover {
+  background: var(--red-color);
+  color: #fff;
+}
+.aaravpos-date-modal-body {
+  overflow-y: auto;
+  padding: 20px 28px;
+}
+.aaravpos-date-nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+.aaravpos-date-nav-btn {
+  border: none;
+  background: transparent;
+  font-size: 18px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+.aaravpos-date-nav-btn:hover {
+  color: var(--red-color);
+}
+.aaravpos-date-nav-btn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+.aaravpos-date-month-label {
+  font-size: 14px;
+  font-weight: 600;
+}
+.aaravpos-calendar-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 6px;
+}
+.aaravpos-calendar-weekday {
+  padding: 4px 0;
+  text-align: center;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+.aaravpos-calendar-day {
+  min-height: 34px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  font-size: 12px;
+  font-family: monospace;
+  transition: all 0.15s ease;
+}
+.aaravpos-calendar-day-active {
+  cursor: pointer;
+}
+.aaravpos-calendar-day-active:hover {
+  background: var(--btn-bg-hover);
+  color: var(--btn-text-hover);
+}
+.aaravpos-calendar-day-today {
+  outline: 1.5px solid var(--border-color);
+  outline-offset: 1px;
+}
+.aaravpos-calendar-day-selected {
+  background: var(--btn-bg);
+  color: #fff;
+}
+.aaravpos-calendar-day-disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.aaravpos-professional-skeleton {
+  position: relative;
+  height: 82px;
+  overflow: hidden;
+  border-radius: 4px;
+  background: #e0e0e0;
+}
+.aaravpos-professional-skeleton::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
+  animation: aaravposShimmer 1.2s infinite;
+}
+.aaravpos-spinner-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.aaravpos-spinner {
+  width: 40px;
+  height: 40px;
+  border: 4px solid var(--btn-bg-hover);
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: aaravposSpin 0.8s linear infinite;
+}
+.aaravpos-calendar-grid .cal-avail.cal-selected:after {
+  background: #fff9;
+}
+.aaravpos-calendar-grid .cal-avail:after {
+  content: "";
+  background: var(--color-brand-green);
+  border-radius: 50%;
+  width: 3px;
+  height: 3px;
+  position: absolute;
+  bottom: 2px;
+  left: 50%;
+  transform: translate(-50%);
+}
+.aaravpos-empty-services {
+  grid-column: 1/-1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 64px 24px;
+  text-align: center;
+  border: 1px dashed rgba(0, 0, 0, 0.2);
+  border-radius: 8px;
+}
+.aaravpos-empty-services-title {
+  margin-bottom: 8px;
+  font-size: 18px;
+  font-weight: 600;
+  color: #111827;
+}
+.aaravpos-empty-services-text {
+  max-width: 500px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: rgba(0, 0, 0, 0.5);
+}
+.arravpos-details-section {
+  margin-top: 20px;
+}
+.arravpos-details-scroll {
+  overflow-y: auto;
+  padding-bottom: 80px;
+  scrollbar-width: none;
+}
+.arravpos-details-scroll::-webkit-scrollbar {
+  display: none;
+}
+.arravpos-details-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 16px;
+}
+.arravpos-form-group {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.arravpos-form-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: #4b5563;
+  margin-bottom: 6px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.arravpos-required {
+  color: #ef4444;
+}
+.arravpos-input-wrapper {
+  position: relative;
+  width: 100%;
+}
+.arravpos-custom-input {
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+  padding: 10px 12px;
+  font-size: 14px;
+  outline: none;
+  transition: all 0.3s ease;
+  background-color: #ffffff;
+}
+.arravpos-custom-input:focus, .arravpos-custom-input input:focus {
+  border-color: black;
+}
+.arravpos-error-text {
+  margin-top: 6px;
+  font-size: 13px;
+  color: #ef4444;
+}
+.arravpos-autofill-text {
+  margin-top: 6px;
+  font-size: 12px;
+  color: #6b7280;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.arravpos-clear-text {
+  color: #dc2626;
+  cursor: pointer;
+  font-weight: 500;
+}
+.arravpos-loader-wrapper {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.arravpos-loader {
+  width: 16px;
+  height: 16px;
+  border: 2px solid #d1d5db;
+  border-top-color: #000000;
+  border-radius: 50%;
+  animation: arravpos-spin 0.8s linear infinite;
+}
+.arravpos-booking-wrapper {
+  width: 100%;
+  max-width: 100%;
+}
+.arravpos-outlet-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  border-radius: 4px;
+  margin-bottom: 8px;
+}
+.arravpos-outlet-logo {
+  width: 40px;
+  height: 40px;
+  border-radius: 4px;
+  overflow: hidden;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.arravpos-outlet-logo-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.arravpos-outlet-content {
+  flex: 1;
+  min-width: 0;
+}
+.arravpos-outlet-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: #111827;
+  margin: 0;
+  line-height: 1.4;
+}
+.arravpos-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 {
+  height: calc(100dvh - 285px);
+  overflow-y: auto;
+  scrollbar-width: none;
+}
+.arravpos-booking-scroll::-webkit-scrollbar {
+  display: none;
+}
+.arravpos-booking-grid {
+  display: flex;
+  gap: 28px;
+  justify-content: space-between;
+}
+.arravpos-booking-column {
+  width: 100%;
+  min-width: 0;
+}
+.arravpos-appointment-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.arravpos-appointment-content {
+  flex: 1;
+  min-width: 0;
+}
+.arravpos-appointment-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: #111827;
+  margin: 0;
+}
+.arravpos-appointment-services {
+  font-size: 12px;
+  color: #6b7280;
+  margin-top: 2px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-bottom: 0px;
+}
+.arravpos-appointment-price {
+  font-family: monospace;
+  font-weight: 600;
+  font-size: 15px;
+  color: #111827;
+  white-space: nowrap;
+}
+.arravpos-appointment-date {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid #e5e7eb;
+}
+.arravpos-appointment-date-text {
+  font-size: 14px;
+  font-weight: 600;
+  color: #111827;
+}
+.arravpos-success-wrapper {
+  height: calc(100dvh - 5px);
+  overflow-y: auto;
+  scrollbar-width: none;
+}
+.arravpos-success-wrapper::-webkit-scrollbar {
+  display: none;
+}
+.arravpos-success-motion {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  background: var(--canvas);
+  text-align: center;
+  padding: 16px;
+}
+.arravpos-success-icon {
+  width: 64px;
+  height: 64px;
+  background: var(--btn-bg);
+  color: var(--btn-text);
+  border-radius: 9999px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 36px;
+  margin-bottom: 24px;
+}
+.arravpos-success-title {
+  font-family: "Bebas Neue", sans-serif;
+  font-size: 20px;
+  margin-bottom: 8px;
+}
+.arravpos-success-description {
+  font-size: 14px;
+  color: var(--muted);
+  margin-bottom: 24px;
+  line-height: 1.625;
+}
+.arravpos-success-content {
+  width: 100%;
+  max-width: 570px;
+}
+.arravpos-success-card {
+  background: #ffffff;
+  border-radius: 6px;
+  text-align: left;
+  margin-bottom: 24px;
+  padding: 16px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+.arravpos-success-row {
+  display: flex;
+  justify-content: space-between;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #f3f4f6;
+}
+.arravpos-success-row-first {
+  padding-top: 0;
+}
+.arravpos-total-row {
+  display: flex;
+  justify-content: space-between;
+  padding-top: 16px;
+  padding-bottom: 0;
+}
+.arravpos-label {
+  color: #4b5563;
+  font-size: 14px;
+  font-weight: 700;
+}
+.arravpos-services-label {
+  color: #6b7280;
+  font-size: 14px;
+  font-weight: 700;
+}
+.arravpos-value {
+  font-size: 14px;
+  font-weight: 500;
+  color: #1f2937;
+}
+.arravpos-price {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  color: #1f2937;
+  font-weight: 600;
+}
+.arravpos-total-price {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  color: var(--red);
+  font-weight: 600;
+}
+.arravpos-services-header {
+  align-items: center;
+}
+.arravpos-services-list {
+  padding-top: 8px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #f3f4f6;
+  color: #4b5563;
+  font-size: 14px;
+  font-weight: 700;
+  white-space: pre-wrap;
+  overflow-y: auto;
+  max-height: 23vh;
+}
+.arravpos-service-row {
+  display: flex;
+  justify-content: space-between;
+  font-size: 14px;
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
+.arravpos-service-name {
+  color: #374151;
+}
+.arravpos-service-price {
+  color: #111827;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.arravpos-more-services {
+  text-align: center;
+  font-size: 12px;
+  color: #6b7280;
+  margin-top: 8px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+}
+.arravpos-show-btn {
+  color: #2563eb;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+}
+.arravpos-show-btn-inner {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+}
+.arravpos-book-btn {
+  background: var(--btn-bg);
+  color: var(--btn-text);
+  border: 1px solid var(--btn-bg);
+  padding: 10px 28px;
+  cursor: pointer;
+  font-size: 14px;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  border-radius: 4px;
+  transition: all 0.3s ease;
+}
+.arravpos-book-btn:hover {
+  color: var(--btn-text-hover);
+  border-color: var(--btn-bg-hover);
+  background: var(--btn-bg-hover);
+}
+.arravpos-payment-overlay {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.4);
+  z-index: 1020;
+  padding: 16px;
+}
+.arravpos-payment-form {
+  width: 100%;
+  margin: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.aaravpos-modal {
+  background: #fff;
+  border-radius: 16px;
+  width: 100%;
+  max-width: 100%;
+  padding: 24px;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+  box-sizing: border-box;
+}
+.arravpos-payment-header {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+.arravpos-payment-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #111827;
+  margin: 0px;
+}
+.arravpos-payment-amount {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  font-weight: 600;
+  color: #111827;
+}
+.arravpos-payment-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.arravpos-payment-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: #4b5563;
+  display: flex;
+  margin-bottom: 4px;
+}
+.arravpos-payment-required {
+  color: #ef4444;
+}
+.arravpos-payment-input {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid red;
+  border-radius: 2px;
+  font-size: 14px;
+  outline: none;
+  transition: border-color 0.2s ease;
+}
+.arravpos-payment-input:focus {
+  border-color: var(--red);
+}
+.arravpos-payment-error {
+  color: #ef4444;
+  font-size: 14px;
+  margin-top: 4px;
+}
+.arravpos-payment-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+}
+.arravpos-payment-btn-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+  margin-top: 20px;
+}
+.arravpos-payment-cancel-btn {
+  padding: 12px 16px;
+  cursor: pointer;
+  border-radius: 6px;
+  border: none;
+  background: linear-gradient(to right, #ef4444, #dc2626);
+  color: #ffffff;
+}
+.arravpos-payment-submit-btn {
+  padding: 8px 16px;
+  border-radius: 6px;
+  cursor: pointer;
+  border: none;
+  background: #16a34a;
+  color: #ffffff;
+  transition: opacity 0.2s ease;
+}
+.arravpos-payment-submit-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.arravpos-consent-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1024;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.4);
+  padding: 16px;
+}
+.arravpos-consent-backdrop {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+}
+.arravpos-consent-modal {
+  position: relative;
+  z-index: 10;
+  width: 90%;
+  max-height: 95vh;
+  overflow-y: auto;
+  background-color: #ffffff;
+  border-radius: 12px;
+  padding: 16px;
+}
+.arravpos-consent-header {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+.arravpos-consent-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #111827;
+  margin: 0px;
+}
+.arravpos-consent-close-btn {
+  color: #9ca3af;
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  transition: color 0.2s ease;
+}
+.arravpos-consent-close-btn:hover {
+  color: #4b5563;
+}
+.arravpos-consent-content-wrapper {
+  max-height: 42vh;
+}
+.arravpos-consent-content-box {
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  padding: 16px;
+  background-color: #f9fafb;
+}
+.arravpos-consent-content {
+  color: #374151;
+  white-space: pre-wrap;
+  overflow-y: auto;
+  max-height: 30vh;
+}
+.arravpos-consent-checkbox-label {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin-top: 12px;
+  border-color: #e5e7eb;
+}
+.arravpos-consent-checkbox {
+  width: 18px;
+  height: 18px;
+  color: #ef4444;
+  background-color: #f3f4f6;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+}
+.arravpos-consent-checkbox-text {
+  font-size: 14px;
+  font-weight: 500;
+  color: #374151;
+}
+.arravpos-consent-typed-wrapper {
+  margin-top: 16px;
+}
+.arravpos-consent-input-label {
+  display: block;
+  margin-bottom: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #374151;
+}
+.arravpos-consent-required {
+  color: #ef4444;
+}
+.arravpos-consent-input {
+  width: 100%;
+  padding: 8px 12px;
+  border-radius: 6px;
+  outline: none;
+}
+.arravpos-consent-input-normal {
+  border: 1px solid #d1d5db;
+}
+.arravpos-consent-input-error {
+  border: 1px solid #ef4444;
+}
+.arravpos-consent-helper-text {
+  margin-top: 4px;
+  font-size: 12px;
+  color: #6b7280;
+}
+.arravpos-consent-error {
+  font-size: 14px;
+  color: #ef4444;
+}
+.arravpos-consent-signature-wrapper {
+  margin-top: 16px;
+}
+.arravpos-consent-signature-canvas {
+  width: 100%;
+  height: 136px;
+  overflow: hidden;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  background-color: #ffffff;
+}
+.arravpos-consent-error-signature {
+  margin-top: 4px;
+  margin-bottom: 4px;
+}
+.arravpos-consent-signature-actions {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 8px;
+}
+.arravpos-consent-clear-btn {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  font-size: 14px;
+  color: #4b5563;
+  cursor: pointer;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  background: transparent;
+}
+.arravpos-consent-clear-btn:hover {
+  color: #1f2937;
+}
+.arravpos-consent-email-label {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  cursor: pointer;
+  font-size: 14px;
+}
+.arravpos-consent-email-checkbox {
+  width: 16px;
+  height: 16px;
+  accent-color: var(--btn-bg);
+  background-color: #f3f4f6;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+}
+.arravpos-consent-email-text {
+  font-size: 14px;
+  color: #374151;
+}
+.arravpos-consent-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  margin-top: 20px;
+}
+.arravpos-consent-cancel-btn {
+  padding: 8px 16px;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  background: transparent;
+  color: #374151;
+  cursor: pointer;
+  transition: color 0.2s ease;
+}
+.arravpos-consent-cancel-btn:hover {
+  color: #111827;
+}
+.arravpos-consent-submit-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  border: none;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+}
+.arravpos-consent-submit-disabled {
+  background-color: #d1d5db;
+  color: #4b5563;
+  cursor: not-allowed;
+}
+.arravpos-consent-submit-active {
+  background-color: var(--btn-bg);
+  color: #ffffff;
+  cursor: pointer;
+}
+.arravpos-consent-submit-active:hover {
+  background-color: var(--btn-bg-hover);
+}
+.arravpos-date-wrapper {
+  margin-top: 8px;
+  margin-bottom: 24px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.arravpos-date-strip {
+  display: flex;
+  align-items: stretch;
+  gap: 6px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+  -webkit-overflow-scrolling: touch;
+  scroll-behavior: smooth;
+}
+.arravpos-date-strip::-webkit-scrollbar {
+  display: none;
+}
+.arravpos-date-card {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-width: 26px;
+  min-height: 50px;
+  padding: 8px 10px;
+  border-radius: 2px;
+  cursor: pointer;
+  transition: all 150ms ease;
+  user-select: none;
+  border: 1px solid transparent;
+}
+.arravpos-date-card-active {
+  background-color: var(--btn-bg);
+  color: var(--btn-text);
+  border-color: var(--btn-bg);
+}
+.arravpos-date-card-default:hover {
+  color: var(--btn-text-hover);
+  border-color: var(--btn-bg-hover);
+  background-color: var(--btn-bg-hover);
+}
+.arravpos-date-week {
+  font-size: 10px;
+  text-transform: uppercase;
+  margin-bottom: 4px;
+  line-height: 1;
+  font-weight: 500;
+}
+.arravpos-date-day {
+  font-family: monospace;
+  font-size: 24px;
+  line-height: 1;
+  font-weight: 500;
+}
+.arravpos-date-today {
+  margin-top: 6px;
+  font-size: 8px;
+  color: var(--red);
+  font-weight: 700;
+  line-height: 1;
+}
+.arravpos-calendar-btn {
+  margin-left: 16px;
+  padding: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  border-radius: 2px;
+  cursor: pointer;
+  transition: all 150ms ease;
+  min-width: 50px;
+  user-select: none;
+  background-color: var(--btn-bg);
+  color: #ffffff;
+  border: none;
+}
+.arravpos-selected-professional {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 20px;
+  padding: 12px;
+  background-color: var(--surface);
+  border: 1px solid var(--btn-bg);
+  border-radius: 2px;
+  flex-wrap: wrap;
+}
+.arravpos-selected-professional-image {
+  width: 40px;
+  height: 40px;
+  border-radius: 9999px;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+.arravpos-selected-professional-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 9999px;
+  background-color: #111111;
+  color: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.arravpos-selected-professional-content {
+  flex: 1;
+  min-width: 0;
+}
+.arravpos-selected-professional-name {
+  font-size: 14px;
+  font-weight: 600;
+  margin: 0px 0px 4px;
+}
+.arravpos-selected-professional-services {
+  font-size: 12px;
+  color: var(--muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin: 0px;
+}
+.arravpos-scroll-area {
+  overflow-y: auto;
+  padding-bottom: 80px;
+  scrollbar-width: none;
+}
+.arravpos-scroll-area::-webkit-scrollbar {
+  display: none;
+}
+.arravpos-loader-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+.arravpos-loader {
+  width: 32px;
+  height: 32px;
+  border-radius: 9999px;
+  border: 3px solid var(--btn-bg);
+  border-top-color: transparent;
+  animation: arravpos-spin 1s linear infinite;
+}
+.arravpos-slot-icon {
+  color: #fb923c;
+}
+.arravpos-slot-section {
+  margin-bottom: 16px;
+  border: 1px solid var(--btn-bg);
+  border-radius: 2px;
+  overflow: hidden;
+}
+.arravpos-slot-section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  cursor: pointer;
+  background-color: var(--surface);
+  transition: background-color 0.2s ease;
+}
+.arravpos-slot-section-header:hover {
+  background-color: rgba(var(--btn-bg), 0.08);
+}
+.arravpos-slot-section-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 1.2px;
+  color: rgba(0, 0, 0, 0.8);
+}
+.arravpos-slot-section-arrow {
+  transition: transform 0.2s ease;
+}
+.arravpos-slot-section-arrow-open {
+  transform: rotate(180deg);
+}
+.arravpos-slot-section-content {
+  padding: 12px;
+  border-top: 1px solid var(--btn-bg);
+  background-color: #ffffff;
+}
+.arravpos-slot-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
+  gap: 8px;
+}
+.arravpos-slot-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 12px;
+  gap: 4px;
+  border: 1px solid var(--btn-bg);
+  border-radius: 2px;
+  transition: all 0.2s ease;
+}
+.arravpos-slot-card-default {
+  background-color: #ffffff;
+  cursor: pointer;
+}
+.arravpos-slot-card-default:hover {
+  color: var(--btn-bg);
+  border-color: var(--btn-bg);
+}
+.arravpos-slot-card-selected {
+  background-color: #fff8f8;
+  color: var(--btn-bg);
+  border-color: var(--btn-bg);
+  cursor: pointer;
+}
+.arravpos-slot-card-disabled {
+  background-color: #f3f4f6;
+  color: #9ca3af;
+  cursor: not-allowed;
+}
+.arravpos-slot-time {
+  font-family: monospace;
+  font-size: 14px;
+}
+.arravpos-slot-status {
+  font-size: 10px;
+}
+.aaravpos-staff-wrapper {
+  height: calc(100dvh - 210px);
+  overflow-y: auto;
+  padding-bottom: 80px;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.aaravpos-staff-wrapper::-webkit-scrollbar {
+  display: none;
+}
+.arravpos-profile-image {
+  width: 40px;
+  height: 40px;
+  border-radius: 9999px;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+.arravpos-profile-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 9999px;
+  background-color: #000000;
+  color: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.arravpos-card-box {
+  background-color: #ffffff;
+  border: 1px solid var(--btn-bg);
+  border-radius: 2px;
+  padding: 16px;
+  margin-bottom: 8px;
+  font-size: 14px;
+}
+.arravpos-section-label {
+  margin-top: 20px;
+  margin-bottom: 8px;
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 1.5px;
+  color: rgba(0, 0, 0, 0.7);
+}
+.arravpos-select-card {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  border-radius: 2px;
+  cursor: pointer;
+  margin-bottom: 8px;
+  border: 1px solid;
+}
+.arravpos-select-card-default {
+  border-color: var(--border);
+  background-color: transparent;
+}
+.arravpos-select-card-active {
+  border-color: var(--red);
+  background-color: rgba(255, 0, 0, 0.05);
+}
+.arravpos-select-check {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.arravpos-date-nav-btn {
+  flex-shrink: 0;
+  width: 34px;
+  background-color: rgb(242, 240, 236);
+  border: 1px solid rgb(222, 218, 212);
+  padding: 8px;
+  border-radius: 2px;
+  cursor: pointer;
+  font-size: 14px;
+  color: var(--muted);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-self: stretch;
+  transition: all 150ms ease;
+}
+.arravpos-date-nav-btn:hover {
+  border-color: var(--red);
+  color: var(--red);
+  background-color: rgba(215, 38, 61, 0.12);
+}
+.aaravpos-loading-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+}
+.aaravpos-loading-text {
+  font-size: 14px;
+  color: #222;
+}
+.aaravpos-error-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  padding: 20px;
+  text-align: center;
+}
+.aaravpos-error-text {
+  color: #dc2626;
+  margin-bottom: 16px;
+  font-size: 14px;
+  font-weight: 500;
+}
+.aaravpos-book-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 28px;
+  background: var(--btn-bg);
+  color: var(--btn-text);
+  border: 1px solid var(--btn-bg);
+  border-radius: 4px;
+  cursor: pointer;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  font-size: 16px;
+  transition: all 0.2s ease;
+}
+.aaravpos-book-btn:hover {
+  background: var(--btn-bg-hover);
+  border-color: var(--btn-bg-hover);
+  color: var(--btn-text-hover);
+}
+.aaravpos-form-control {
+  display: flex;
+  flex-direction: column;
+}
+@media (min-width: 640px) {
+  .custom-container {
+    padding-left: 32px;
+    padding-right: 32px;
+  }
+  .aaravpos-title {
+    font-size: 34px;
+  }
+  .aaravpos-outlet-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .aaravpos-modal {
+    max-width: 32rem;
+  }
+}
+@media (max-width: 768px) {
+  .arravpos-select-card {
+    gap: 10px;
+    padding: 10px;
+  }
+  .aaravpos-common-btn {
+    padding: 14px 8px;
+    font-size: 12px;
+  }
+  .aaravpos-date-modal {
+    height: fit-content;
+    border-top-left-radius: 18px;
+    border-top-right-radius: 18px;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .aaravpos-date-modal-header {
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+  .aaravpos-date-modal-title {
+    font-size: 18px;
+  }
+  .aaravpos-date-modal-body {
+    padding: 20px 16px;
+  }
+  .aaravpos-calendar-grid {
+    gap: 8px;
+  }
+  .aaravpos-calendar-day {
+    min-height: 40px;
+  }
+  .arravpos-date-nav-btn svg {
+    width: 18px;
+    height: 18px;
+  }
+  .arravpos-date-strip {
+    gap: 5px;
+  }
+  .arravpos-date-week {
+    font-size: 9px;
+  }
+  .arravpos-date-day {
+    font-size: 20px;
+  }
+  .arravpos-date-today {
+    font-size: 7px;
+  }
+  .arravpos-select-check svg {
+    width: 18px;
+    height: 18px;
+  }
+  .arravpos-card-box {
+    padding: 14px;
+    font-size: 13px;
+  }
+  .arravpos-booking-scroll {
+    height: calc(100dvh - 200px);
+  }
+  .arravpos-calendar-btn {
+    font-size: 12px;
+  }
+  .arravpos-outlet-info {
+    padding: 10px;
+  }
+  .arravpos-outlet-logo {
+    width: 36px;
+    height: 36px;
+  }
+  .arravpos-appointment-header {
+    align-items: flex-start;
+  }
+  .arravpos-appointment-price {
+    font-size: 14px;
+  }
+  .arravpos-appointment-services {
+    white-space: normal;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+}
+@media (min-width: 768px) {
+  .arravpos-section-label {
+    margin-top: 18px;
+    font-size: 9px;
+    letter-spacing: 1.3px;
+  }
+  .arravpos-profile-avatar {
+    width: 36px;
+    height: 36px;
+    font-size: 14px;
+  }
+  .arravpos-profile-image {
+    width: 36px;
+    height: 36px;
+  }
+  .aaravpos-outlet-list-wrapper {
+    max-height: 85vh;
+  }
+  .aaravpos-desktop-stepper {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    width: 100%;
+  }
+  .arravpos-book-btn {
+    font-size: 16px;
+  }
+  .arravpos-success-title {
+    font-size: 24px;
+  }
+  .aaravpos-services-wrapper.standalone {
+    height: calc(100dvh - 300px);
+  }
+  .aaravpos-services-wrapper.standalone {
+    height: calc(100dvh - 300px);
+  }
+  .aaravpos-layout-wrapper {
+    grid-template-columns: minmax(0, 1fr) 350px;
+  }
+  .aaravpos-sidebar {
+    display: flex;
+  }
+  .aaravpos-mobile-button {
+    display: none;
+  }
+  .aaravpos-sidebar-mobile-content {
+    padding-left: 24px;
+    padding-right: 24px;
+  }
+  .aaravpos-order-list {
+    height: calc(100dvh - 280px);
+  }
+  .aaravpos-pro-order-list {
+    height: calc(100dvh - 420px);
+  }
+  .aaravpos-sidebar-close-btn {
+    display: none;
+  }
+  .arravpos-details-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 20px;
+  }
+  .aaravpos-modal {
+    max-width: 36rem;
+  }
+}
+@media (max-width: 480px) {
+  .arravpos-date-nav-btn {
+    width: 30px;
+    padding: 6px;
+  }
+  .arravpos-date-nav-btn svg {
+    width: 16px;
+    height: 16px;
+  }
+  .arravpos-date-strip {
+    gap: 4px;
+  }
+  .arravpos-date-card {
+    min-width: 26px;
+    min-height: 40px;
+    padding: 8px 4px;
+  }
+  .arravpos-date-week {
+    font-size: 8px;
+    margin-bottom: 3px;
+  }
+  .arravpos-date-day {
+    font-size: 18px;
+  }
+  .arravpos-date-today {
+    margin-top: 4px;
+    font-size: 6px;
+  }
+  .arravpos-select-check svg {
+    width: 16px;
+    height: 16px;
+  }
+  .arravpos-select-card {
+    gap: 8px;
+    padding: 8px;
+  }
+  .arravpos-section-label {
+    margin-top: 16px;
+    font-size: 8px;
+    letter-spacing: 1.1px;
+  }
+  .arravpos-card-box {
+    padding: 12px;
+    font-size: 12px;
+  }
+  .arravpos-profile-image {
+    width: 32px;
+    height: 32px;
+  }
+  .arravpos-profile-avatar {
+    width: 32px;
+    height: 32px;
+    font-size: 12px;
+  }
+  .arravpos-outlet-name {
+    font-size: 13px;
+  }
+  .arravpos-outlet-address {
+    font-size: 11px;
+  }
+  .arravpos-appointment-name {
+    font-size: 13px;
+  }
+  .arravpos-appointment-date-text {
+    font-size: 13px;
+  }
+}
+@media (min-width: 1024px) {
+  .arravpos-date-strip {
+    gap: 6px;
+  }
+  .custom-container {
+    padding-left: 64px;
+    padding-right: 64px;
+  }
+  .arravpos-consent-modal {
+    width: 60%;
+  }
+  .arravpos-scroll-area {
+    padding-bottom: 16px;
+  }
+  .arravpos-consent-title {
+    font-size: 20px;
+  }
+  .arravpos-success-title {
+    font-size: 36px;
+  }
+  .aaravpos-header {
+    flex-direction: row;
+    align-items: center;
+  }
+  .arravpos-success-motion {
+    padding: 48px;
+  }
+  .aaravpos-search-wrapper {
+    max-width: 300px;
+  }
+  .aaravpos-outlet-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  .aaravpos-services-title {
+    font-size: 36px;
+  }
+  .aaravpos-services-topbar {
+    flex-direction: row;
+    align-items: flex-end;
+    gap: 32px;
+  }
+  .aaravpos-services-wrapper.supercategory {
+    height: calc(100dvh - 390px);
+  }
+  .aaravpos-page-title {
+    font-size: 36px;
+  }
+  .aaravpos-topbar {
+    flex-direction: row;
+    align-items: flex-end;
+    gap: 32px;
+  }
+  .aaravpos-services-wrapper {
+    padding-bottom: 16px;
+  }
+  .aaravpos-services-wrapper.supercategory {
+    height: calc(100dvh - 390px);
+  }
+  .aaravpos-layout-wrapper {
+    grid-template-columns: minmax(0, 1fr) 360px;
+  }
+  .aaravpos-staff-wrapper {
+    padding-bottom: 16px;
+  }
+  .arravpos-details-scroll {
+    padding-bottom: 16px;
+  }
+}
+@media (max-width: 1024px) {
+  .arravpos-booking-grid {
+    flex-direction: column;
+    gap: 20px;
+  }
+}
+@media (min-width: 1280px) {
+  .aaravpos-title {
+    font-size: 36px;
+  }
+  .aaravpos-outlet-grid {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+@media (min-width: 1536px) {
+  .aaravpos-outlet-grid {
+    grid-template-columns: repeat(5, 1fr);
+  }
+}
+@keyframes aaravpos-shimmer {
+  0% {
+    left: -100%;
+  }
+  100% {
+    left: 100%;
+  }
+}
+@keyframes fadeUp {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes slotIn {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes popIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+@keyframes pulseBrand {
+  0%, 100% {
+    box-shadow: 0 0 0 16px color-mix(in srgb, var(--app-bg) 12%, transparent);
+  }
+  50% {
+    box-shadow: 0 0 0 24px color-mix(in srgb, var(--app-bg) 6%, transparent);
+  }
+}
+@keyframes aaravposFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes aaravposFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes aaravposPopIn {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes aaravposShimmer {
+  100% {
+    left: 100%;
+  }
+}
+@keyframes aaravposSpin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes arravpos-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes arravpos-spin {
+  to {
+    transform: rotate(360deg);
   }
 }