@aaravpos/appointment-booking-plugin 1.0.4 → 1.0.6

package/dist/styles.css

@@ -780,9 +780,9 @@
   --app-text: #e09898;
   --app-bg-hover: #4c6f6e;
   --app-text-hover: #ffffff;
-  --font-heading: 'Bebas Neue', sans-serif;
-  --font-body: 'DM Sans', sans-serif;
-  --font-mono: 'DM Mono', monospace;
+  --font-heading: "Bebas Neue", sans-serif;
+  --font-body: "DM Sans", sans-serif;
+  --font-mono: "DM Mono", monospace;
 }
 @layer base {
   body {
@@ -814,9 +814,8 @@
   pointer-events: none;
 }
 .arravpos-container {
-  min-height: 100vh;
   background-color: #fafaf8;
-  padding: 40px 16px;
+  padding: 16px;
   width: 100%;
   box-sizing: border-box;
   margin: 0 auto;
@@ -855,8 +854,7 @@
 .aaravpos-divider {
   height: 1px;
   background: var(--border-color, #d4d4d4);
-  margin-top: auto;
-  margin-bottom: 8px;
+  margin: 2px 0px;
 }
 .aaravpos-btn:disabled {
   opacity: 0.7;
@@ -875,7 +873,7 @@
   padding: 9px 8px !important;
 }
 .aaravpos-layout {
-  height: 100vh;
+  height: 440px;
   display: flex;
   flex-direction: column;
   background: var(--canvas, #ffffff);
@@ -885,25 +883,25 @@
 .aaravpos-layout-content {
   flex: 1;
   position: relative;
+  height: 440px;
 }
 .aaravpos-layout-page {
-  height: 100%;
-  animation: aaravposFadeIn 0.3s ease;
+  height: 440px;
 }
 .aaravpos-title {
-  font-size: 24px;
+  font-size: 22px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: -0.025em;
   color: #111827;
-  margin-bottom: 12px;
+  margin-bottom: 6px;
   line-height: 1.1;
   margin-top: 0px;
 }
 .aaravpos-main-layout {
-  height: 100vh;
   display: flex;
   flex-direction: column;
+  height: 440px;
 }
 .aaravpos-layout-wrapper {
   flex: 1;
@@ -915,6 +913,7 @@
 .aaravpos-main-content {
   padding: 16px;
   position: relative;
+  height: 440px;
 }
 .aaravpos-mobile-button {
   position: fixed;
@@ -949,14 +948,21 @@
   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;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 16px 16px 14px;
   overflow: hidden;
+  position: fixed;
+  top: 10px;
+  right: 10px;
+  bottom: 10px;
+  width: 300px;
+  transition: transform 0.3s ease;
+  background: #fff;
+  z-index: 1024;
+  border-radius: 8px;
+  display: flex;
 }
 .aaravpos-sidebar-mobile {
   position: fixed;
@@ -987,7 +993,7 @@
   flex-direction: column;
   justify-content: space-between;
   gap: 16px;
-  margin-bottom: 32px;
+  margin-bottom: 10px;
 }
 .aaravpos-search-wrapper {
   position: relative;
@@ -1008,7 +1014,7 @@
 }
 .aaravpos-search-input {
   width: 100%;
-  height: 36px;
+  height: 32px;
   border-radius: 6px;
   border: 1px solid #d1d5db;
   background: #ffffff;
@@ -1048,7 +1054,7 @@
 .aaravpos-outlet-list-wrapper {
   padding-top: 8px;
   padding-bottom: 8px;
-  max-height: 60vh;
+  max-height: 440px;
   overflow: auto;
   scrollbar-width: none;
 }
@@ -1108,9 +1114,11 @@
   display: flex;
   align-items: flex-start;
   justify-content: flex-end;
+  position: absolute;
+  right: 0px;
 }
 .aaravpos-outlet-card-content {
-  padding: 4px 16px 16px;
+  padding: 14px;
 }
 .aaravpos-outlet-card-inner {
   flex: 1;
@@ -1126,6 +1134,8 @@
   line-clamp: 1;
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
+  margin-bottom: 0px;
+  margin-top: 0px;
 }
 .aaravpos-outlet-card-address {
   margin-top: 4px;
@@ -1138,6 +1148,7 @@
   line-clamp: 1;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
+  margin-bottom: 0px;
 }
 .aaravpos-status-badge {
   display: inline-flex;
@@ -1255,19 +1266,20 @@
   color: var(--btn-bg-hover);
 }
 .aaravpos-page-title {
-  font-size: 24px;
+  font-size: 22px;
   font-weight: 900;
   text-transform: uppercase;
   letter-spacing: -0.025em;
   color: #111827;
-  padding-top: 12px;
+  padding-top: 0px;
   line-height: 1.1;
   margin-bottom: 0px;
+  margin-top: 0px;
 }
 .aaravpos-sub-title {
   font-size: 14px;
   color: rgba(0, 0, 0, 0.6);
-  margin-bottom: 24px;
+  margin-bottom: 8px;
   line-height: 1.5;
   margin-top: 0px;
 }
@@ -1276,7 +1288,7 @@
   flex-direction: column;
   justify-content: space-between;
   gap: 16px;
-  margin-bottom: 20px;
+  margin-bottom: 12px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.4);
 }
 .aaravpos-tab-group {
@@ -1285,7 +1297,7 @@
   gap: 32px;
 }
 .aaravpos-tab-btn {
-  padding-bottom: 16px;
+  padding-bottom: 8px;
   border: none;
   border-bottom: 2px solid transparent;
   background: transparent;
@@ -1350,8 +1362,6 @@
   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 {
@@ -1359,7 +1369,7 @@
 }
 .aaravpos-supercategory-btn {
   min-width: fit-content;
-  padding: 8px 16px;
+  padding: 6px;
   border: 1px solid rgba(0, 0, 0, 0.3);
   background: #ffffff;
   text-align: left;
@@ -1379,10 +1389,10 @@
   color: #fff;
 }
 .aaravpos-supercategory-title {
-  margin-top: 4px;
+  margin-top: 0px;
   font-size: 14px;
   font-weight: 500;
-  margin-bottom: 4px;
+  margin-bottom: 0px;
 }
 .aaravpos-supercategory-count {
   font-size: 10px;
@@ -1390,23 +1400,19 @@
   text-transform: uppercase;
   letter-spacing: 1px;
   color: rgba(0, 0, 0, 0.6);
-  margin-bottom: 4px;
+  margin-bottom: 0px;
+  margin-top: 6px;
 }
 .aaravpos-services-wrapper {
   overflow-y: auto;
   padding-bottom: 80px;
   scrollbar-width: none;
   -ms-overflow-style: none;
+  height: 120px;
 }
 .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));
@@ -1416,7 +1422,7 @@
   position: relative;
   border: 1px solid rgba(0, 0, 0, 0.3);
   border-radius: 6px;
-  padding: 12px;
+  padding: 8px;
   cursor: pointer;
   background: #ffffff;
   transition: all 0.25s ease;
@@ -1454,6 +1460,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  margin-top: 12px;
 }
 .aaravpos-service-description-wrapper {
   position: relative;
@@ -1496,14 +1503,13 @@
 .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;
+  margin-top: 6px;
   border: 1px solid #d1d5db;
   width: fit-content;
 }
@@ -1555,6 +1561,28 @@
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
   animation: aaravpos-shimmer 1.2s infinite;
 }
+.aaravpos-available-badge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  margin: 12px 0px 0px 0px;
+}
+.aaravpos-available-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: #15803d;
+  flex-shrink: 0;
+}
+.aaravpos-available-text {
+  font-size: 11px;
+  font-weight: 600;
+  color: #166534;
+  letter-spacing: 0.2px;
+  text-align: center;
+  margin: 0px;
+}
 .aaravpos-no-staff {
   font-size: 14px;
   font-weight: 600;
@@ -1565,10 +1593,12 @@
   grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
   gap: 12px;
 }
-.aaravpos-pro-card {
+.aaravpos-display-flex {
   display: flex;
   align-items: center;
   gap: 16px;
+}
+.aaravpos-pro-card {
   border: 2px solid rgba(0, 0, 0, 0.15);
   border-radius: 6px;
   padding: 12px;
@@ -1620,18 +1650,17 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  height: calc(100dvh - 20px);
 }
 .aaravpos-order-header {
-  padding: 0px 0px 12px 0px;
+  padding: 0px 0px 8px 0px;
   border-bottom: 1px solid #d1d5db;
 }
 .aaravpos-order-title {
-  font-size: 18px;
+  font-size: 16px;
   font-weight: 900;
   text-transform: uppercase;
   letter-spacing: -0.5px;
-  margin-bottom: 10px;
+  margin-bottom: 0px;
   margin-top: 0px;
 }
 .aaravpos-order-subtitle {
@@ -1643,14 +1672,15 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   margin-bottom: 0px;
+  margin-top: 0px;
 }
 .aaravpos-order-body {
-  padding: 12px 0px;
+  padding: 12px 0px 0px 0px;
 }
 .aaravpos-order-section-title {
   font-size: 14px;
   font-weight: 600;
-  margin: 6px 0;
+  margin: 0px;
   color: rgba(0, 0, 0, 0.4);
   text-transform: uppercase;
   overflow: hidden;
@@ -1658,11 +1688,11 @@
   white-space: nowrap;
 }
 .aaravpos-order-list {
-  height: calc(100dvh - 240px);
   overflow-y: auto;
   padding: 0px;
   scrollbar-width: none;
   -ms-overflow-style: none;
+  margin: 4px 0px;
 }
 .aaravpos-pro-order-list {
   height: calc(100dvh - 270px);
@@ -1670,6 +1700,7 @@
   scrollbar-width: none;
   -ms-overflow-style: none;
   padding: 0px;
+  margin: 4px 0px;
 }
 .aaravpos-order-list::-webkit-scrollbar, .aaravpos-pro-order-list::-webkit-scrollbar {
   display: none;
@@ -1700,9 +1731,9 @@
 .aaravpos-order-details {
   width: 100%;
   display: grid;
+  gap: 4px;
   grid-template-columns: repeat(3, 1fr);
   align-items: center;
-  gap: 8px;
   margin-top: 4px;
 }
 .aaravpos-order-detail {
@@ -1712,15 +1743,17 @@
   font-size: 12px;
   font-weight: 500;
   color: rgba(0, 0, 0, 0.6);
+  margin: 0px;
 }
 .aaravpos-order-detail.center {
   justify-content: center;
 }
 .aaravpos-order-detail.right {
   justify-content: flex-end;
+  gap: 0px;
 }
 .aaravpos-order-footer {
-  padding: 12px 0px;
+  padding-top: 5px;
 }
 .aaravpos-order-subtotal {
   display: flex;
@@ -1743,7 +1776,7 @@
 }
 .aaravpos-common-btn {
   width: 100%;
-  margin-top: 14px;
+  margin-top: 10px;
   padding: 12px 8px;
   border: none;
   background: var(--btn-bg);
@@ -1916,6 +1949,7 @@
   gap: 12px;
   font-size: 14px;
   font-weight: 700;
+  margin-top: 10px;
 }
 .aaravpos-date-time-label {
   color: #111827;
@@ -1942,9 +1976,6 @@
 .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;
@@ -1984,6 +2015,7 @@
   font-weight: 700;
   letter-spacing: 1px;
   text-transform: uppercase;
+  margin: 0px;
 }
 .aaravpos-date-close-btn {
   width: 32px;
@@ -2000,11 +2032,11 @@
 }
 .aaravpos-date-close-btn:hover {
   background: var(--red-color);
-  color: #fff;
+  color: var(--btn-bg-hover);
 }
 .aaravpos-date-modal-body {
   overflow-y: auto;
-  padding: 20px 28px;
+  padding: 10px 28px 20px 28px;
 }
 .aaravpos-date-nav {
   display: flex;
@@ -2072,6 +2104,54 @@
   opacity: 0.4;
   cursor: not-allowed;
 }
+.aaravpos-calendar-day {
+  position: relative;
+}
+.aaravpos-calendar-day-disabled {
+  background: rgba(0, 0, 0, 0.03);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+.aaravpos-calendar-day-slash {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+.aaravpos-calendar-day-slash::after {
+  content: "";
+  width: 140%;
+  height: 1.5px;
+  background: var(--app-bg);
+  transform: rotate(-45deg);
+}
+.aaravpos-calendar-day-text {
+  position: relative;
+  z-index: 2;
+}
+.arravpos-date-card-disabled {
+  position: relative;
+  opacity: 0.6;
+  cursor: not-allowed;
+  overflow: hidden;
+}
+.arravpos-date-disabled-slash {
+  position: absolute;
+  top: 50%;
+  left: -20%;
+  width: 140%;
+  height: 2px;
+  background: #111;
+  transform: rotate(-45deg);
+  z-index: 1;
+}
+.arravpos-date-unavailable {
+  font-size: 8px;
+  font-weight: 700;
+  margin-top: 2px;
+}
 .aaravpos-professional-skeleton {
   position: relative;
   height: 82px;
@@ -2312,6 +2392,9 @@
   font-size: 15px;
   color: #111827;
   white-space: nowrap;
+  align-items: center;
+  display: flex;
+  flex-direction: row;
 }
 .arravpos-appointment-date {
   display: flex;
@@ -2337,7 +2420,6 @@
 .arravpos-success-motion {
   display: flex;
   flex-direction: column;
-  height: 100%;
   align-items: center;
   justify-content: center;
   background: var(--canvas);
@@ -2345,8 +2427,8 @@
   padding: 16px;
 }
 .arravpos-success-icon {
-  width: 64px;
-  height: 64px;
+  width: 34px;
+  height: 34px;
   background: var(--btn-bg);
   color: var(--btn-text);
   border-radius: 9999px;
@@ -2365,8 +2447,9 @@
 .arravpos-success-description {
   font-size: 14px;
   color: var(--muted);
-  margin-bottom: 24px;
+  margin-bottom: 10px;
   line-height: 1.625;
+  margin-top: 0px;
 }
 .arravpos-success-content {
   width: 100%;
@@ -2376,9 +2459,13 @@
   background: #ffffff;
   border-radius: 6px;
   text-align: left;
-  margin-bottom: 24px;
-  padding: 16px;
+  margin-bottom: 10px;
+  padding: 10px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  height: 190px;
+  overflow-x: scroll;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
 }
 .arravpos-success-row {
   display: flex;
@@ -2484,7 +2571,7 @@
   background: var(--btn-bg);
   color: var(--btn-text);
   border: 1px solid var(--btn-bg);
-  padding: 10px 28px;
+  padding: 8px 28px;
   cursor: pointer;
   font-size: 14px;
   width: 100%;
@@ -2591,7 +2678,7 @@
   margin-top: 20px;
 }
 .arravpos-payment-cancel-btn {
-  padding: 12px 16px;
+  padding: 10px 16px;
   cursor: pointer;
   border-radius: 6px;
   border: none;
@@ -2823,7 +2910,7 @@
 }
 .arravpos-date-wrapper {
   margin-top: 8px;
-  margin-bottom: 24px;
+  margin-bottom: 14px;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
@@ -2848,7 +2935,7 @@
   align-items: center;
   min-width: 26px;
   min-height: 50px;
-  padding: 8px 10px;
+  padding: 6px 8px;
   border-radius: 2px;
   cursor: pointer;
   transition: all 150ms ease;
@@ -2874,7 +2961,7 @@
 }
 .arravpos-date-day {
   font-family: monospace;
-  font-size: 24px;
+  font-size: 18px;
   line-height: 1;
   font-weight: 500;
 }
@@ -2908,7 +2995,7 @@
   display: flex;
   align-items: center;
   gap: 12px;
-  margin-bottom: 20px;
+  margin-bottom: 10px;
   padding: 12px;
   background-color: var(--surface);
   border: 1px solid var(--btn-bg);
@@ -2954,6 +3041,7 @@
   overflow-y: auto;
   padding-bottom: 80px;
   scrollbar-width: none;
+  height: 120px;
 }
 .arravpos-scroll-area::-webkit-scrollbar {
   display: none;
@@ -2986,7 +3074,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 12px 16px;
+  padding: 8px 10px;
   cursor: pointer;
   background-color: var(--surface);
   transition: background-color 0.2s ease;
@@ -3058,11 +3146,11 @@
   font-size: 10px;
 }
 .aaravpos-staff-wrapper {
-  height: calc(100dvh - 210px);
   overflow-y: auto;
   padding-bottom: 80px;
   scrollbar-width: none;
   -ms-overflow-style: none;
+  height: 120px;
 }
 .aaravpos-staff-wrapper::-webkit-scrollbar {
   display: none;
@@ -3204,7 +3292,7 @@
     padding-right: 32px;
   }
   .aaravpos-title {
-    font-size: 34px;
+    font-size: 28px;
   }
   .aaravpos-outlet-grid {
     grid-template-columns: repeat(2, 1fr);
@@ -3236,9 +3324,6 @@
   .aaravpos-date-modal-title {
     font-size: 18px;
   }
-  .aaravpos-date-modal-body {
-    padding: 20px 16px;
-  }
   .aaravpos-calendar-grid {
     gap: 8px;
   }
@@ -3295,6 +3380,9 @@
     line-clamp: 2;
     -webkit-box-orient: vertical;
   }
+  .aaravpos-sidebar {
+    display: none;
+  }
 }
 @media (min-width: 768px) {
   .arravpos-section-label {
@@ -3311,21 +3399,12 @@
     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);
   }
@@ -3346,10 +3425,13 @@
     padding-right: 24px;
   }
   .aaravpos-order-list {
-    height: calc(100dvh - 280px);
+    height: calc(100dvh - 215px);
   }
   .aaravpos-pro-order-list {
-    height: calc(100dvh - 420px);
+    height: calc(100dvh - 245px);
+  }
+  .aaravpos-staff-wrapper {
+    height: calc(100dvh - 200px);
   }
   .aaravpos-sidebar-close-btn {
     display: none;
@@ -3446,18 +3528,12 @@
   .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;
+    max-width: 240px;
   }
   .aaravpos-outlet-grid {
     grid-template-columns: repeat(3, 1fr);
@@ -3470,29 +3546,14 @@
     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;
   }
@@ -3505,7 +3566,7 @@
 }
 @media (min-width: 1280px) {
   .aaravpos-title {
-    font-size: 36px;
+    font-size: 32px;
   }
   .aaravpos-outlet-grid {
     grid-template-columns: repeat(4, 1fr);