@aaravpos/appointment-booking-plugin 6.0.0 → 6.0.3

package/dist/styles.css

@@ -798,13 +798,95 @@
 .success-pulse {
   animation: pulseBrand 2s ease infinite;
 }
-.arravpos-error-box {
+.aaravpos-error-box {
   padding: 16px;
   color: #ef4444;
 }
-.arravpos-m0 {
+.aaravpos-m0 {
   margin: 0px !important;
 }
+.aaravpos-paymentcard-wrapper {
+  width: 100%;
+  display: flex;
+  cursor: pointer;
+}
+.aaravpos-paymentcard-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.aaravpos-paymentcard-card.active {
+  border-color: var(--btn-bg);
+}
+.aaravpos-paymentcard-card {
+  background: linear-gradient( to right, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.02) );
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+  padding: 28px 18px;
+  flex: 1;
+  margin-bottom: 8px;
+  position: relative;
+}
+.aaravpos-paymentcard-content {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  height: 100%;
+}
+.aaravpos-paymentcard-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background-color: var(--btn-bg);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  font-size: 18px;
+}
+.aaravpos-paymentcard-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.aaravpos-paymentcard-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  height: 100%;
+}
+.aaravpos-paymentcard-title {
+  font-size: 16px;
+  font-weight: 600;
+  margin: 0;
+  margin-bottom: 6px;
+}
+.aaravpos-paymentcard-description {
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.6);
+  margin-top: 5px;
+  line-height: 1.5;
+  margin-bottom: 0px;
+}
+.aaravpos-paymentcard-check {
+  background-color: var(--btn-bg);
+  color: #fff;
+  border-radius: 50%;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  width: 24px;
+  height: 24px;
+  font-size: 12px;
+  display: flex;
+  position: absolute;
+  right: 14px;
+  top: 50%;
+  margin-top: -12px;
+}
 .aaravpos-center-items {
   display: flex;
   align-items: center;
@@ -825,7 +907,7 @@
   opacity: 0.5;
   pointer-events: none;
 }
-.arravpos-container {
+.aaravpos-container {
   background-color: #fff;
   padding: 16px;
   width: 100%;
@@ -1014,7 +1096,7 @@
 }
 .aaravpos-sidebar {
   flex-direction: column;
-  background: var(--surface-bg, #FFFFFF);
+  background: var(--surface-bg, #ffffff);
   border: 1px solid rgba(0, 0, 0, 0.1);
   padding: 16px 16px 14px;
   position: fixed;
@@ -1274,7 +1356,7 @@
 }
 .aaravpos-step-nav {
   display: grid;
-  grid-template-columns: repeat(5, 1fr);
+  grid-template-columns: repeat(4, 1fr);
   width: 100%;
   overflow: hidden;
 }
@@ -1435,6 +1517,7 @@
   transition: all 0.3s ease;
   font-size: 14px;
   border-radius: 4px;
+  text-transform: capitalize;
 }
 .aaravpos-supercategory-btn:hover {
   border-color: rgba(0, 0, 0, 0.5);
@@ -1477,6 +1560,7 @@
   font-size: 14px;
   font-weight: 500;
   margin-bottom: 0px;
+  text-transform: capitalize;
 }
 .aaravpos-supercategory-count {
   font-size: 10px;
@@ -1647,7 +1731,7 @@
   left: -100%;
   width: 100%;
   height: 100%;
-  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
+  background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.5), transparent );
   animation: aaravpos-shimmer 1.2s infinite;
 }
 .aaravpos-available-badge {
@@ -2049,8 +2133,8 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: 12px;
-  font-size: 14px;
+  gap: 8px;
+  font-size: 13px;
   font-weight: 700;
   margin-top: 10px;
 }
@@ -2241,13 +2325,13 @@
   position: relative;
   z-index: 2;
 }
-.arravpos-date-card-disabled {
+.aaravpos-date-card-disabled {
   position: relative;
   opacity: 0.6;
   cursor: not-allowed;
   overflow: hidden;
 }
-.arravpos-date-disabled-slash {
+.aaravpos-date-disabled-slash {
   position: absolute;
   top: 50%;
   left: -20%;
@@ -2257,7 +2341,7 @@
   transform: rotate(-45deg);
   z-index: 1;
 }
-.arravpos-date-unavailable {
+.aaravpos-date-unavailable {
   font-size: 8px;
   font-weight: 700;
   margin-top: 2px;
@@ -2276,7 +2360,7 @@
   left: -100%;
   width: 100%;
   height: 100%;
-  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
+  background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.5), transparent );
   animation: aaravposShimmer 1.2s infinite;
 }
 .aaravpos-spinner-wrapper {
@@ -2330,29 +2414,29 @@
   line-height: 1.5;
   color: rgba(0, 0, 0, 0.5);
 }
-.arravpos-details-section {
+.aaravpos-details-section {
   margin-top: 20px;
 }
-.arravpos-details-scroll {
+.aaravpos-details-scroll {
   overflow-y: auto;
   padding-bottom: 30px;
   scrollbar-width: none;
   height: 565px;
 }
-.arravpos-details-scroll::-webkit-scrollbar {
+.aaravpos-details-scroll::-webkit-scrollbar {
   display: none;
 }
-.arravpos-details-grid {
+.aaravpos-details-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 16px;
 }
-.arravpos-form-group {
+.aaravpos-form-group {
   display: flex;
   flex-direction: column;
   width: 100%;
 }
-.arravpos-form-label {
+.aaravpos-form-label {
   font-size: 12px;
   font-weight: 600;
   color: #4b5563;
@@ -2361,14 +2445,14 @@
   align-items: center;
   gap: 4px;
 }
-.arravpos-required {
+.aaravpos-required {
   color: #ef4444;
 }
-.arravpos-input-wrapper {
+.aaravpos-input-wrapper {
   position: relative;
   width: 100%;
 }
-.arravpos-custom-input {
+.aaravpos-custom-input {
   border: 1px solid #d1d5db;
   border-radius: 4px;
   padding: 10px 12px;
@@ -2377,15 +2461,15 @@
   transition: all 0.3s ease;
   background-color: #ffffff;
 }
-.arravpos-custom-input:focus, .arravpos-custom-input input:focus {
+.aaravpos-custom-input:focus, .aaravpos-custom-input input:focus {
   border-color: black;
 }
-.arravpos-error-text {
+.aaravpos-error-text {
   margin-top: 6px;
   font-size: 13px;
   color: #ef4444;
 }
-.arravpos-autofill-text {
+.aaravpos-autofill-text {
   margin-top: 6px;
   font-size: 12px;
   color: #6b7280;
@@ -2393,31 +2477,31 @@
   align-items: center;
   gap: 4px;
 }
-.arravpos-clear-text {
+.aaravpos-clear-text {
   color: #dc2626;
   cursor: pointer;
   font-weight: 500;
 }
-.arravpos-loader-wrapper {
+.aaravpos-loader-wrapper {
   position: absolute;
   right: 10px;
   top: 50%;
   transform: translateY(-50%);
   z-index: 999;
 }
-.arravpos-loader {
+.aaravpos-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-spin 0.8s linear infinite;
 }
-.arravpos-booking-wrapper {
+.aaravpos-booking-wrapper {
   width: 100%;
   max-width: 100%;
 }
-.arravpos-outlet-info {
+.aaravpos-outlet-info {
   display: flex;
   align-items: center;
   gap: 12px;
@@ -2426,7 +2510,7 @@
   margin-bottom: 4px;
   border: 1px solid #e5e7eb;
 }
-.arravpos-outlet-logo {
+.aaravpos-outlet-logo {
   width: 40px;
   height: 40px;
   border-radius: 4px;
@@ -2436,23 +2520,23 @@
   align-items: center;
   justify-content: center;
 }
-.arravpos-outlet-logo-img {
+.aaravpos-outlet-logo-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
-.arravpos-outlet-content {
+.aaravpos-outlet-content {
   flex: 1;
   min-width: 0;
 }
-.arravpos-outlet-name {
+.aaravpos-outlet-name {
   font-size: 14px;
   font-weight: 600;
   color: #111827;
   margin: 0;
   line-height: 1.4;
 }
-.arravpos-outlet-address {
+.aaravpos-outlet-address {
   font-size: 12px;
   color: rgba(0, 0, 0, 0.7);
   margin-top: 2px;
@@ -2460,40 +2544,40 @@
   word-break: break-word;
   margin-bottom: 0px;
 }
-.arravpos-booking-scroll {
+.aaravpos-booking-scroll {
   overflow-y: auto;
   scrollbar-width: none;
   height: 495px;
   padding-bottom: 15px;
 }
-.arravpos-booking-scroll::-webkit-scrollbar {
+.aaravpos-booking-scroll::-webkit-scrollbar {
   display: none;
 }
-.arravpos-booking-grid {
+.aaravpos-booking-grid {
   display: flex;
   gap: 28px;
   justify-content: space-between;
 }
-.arravpos-booking-column {
+.aaravpos-booking-column {
   width: 100%;
   min-width: 0;
 }
-.arravpos-appointment-header {
+.aaravpos-appointment-header {
   display: flex;
   align-items: center;
   gap: 12px;
 }
-.arravpos-appointment-content {
+.aaravpos-appointment-content {
   flex: 1;
   min-width: 0;
 }
-.arravpos-appointment-name {
+.aaravpos-appointment-name {
   font-size: 14px;
   font-weight: 600;
   color: #111827;
   margin: 0;
 }
-.arravpos-appointment-services {
+.aaravpos-appointment-services {
   font-size: 12px;
   color: #6b7280;
   margin-top: 2px;
@@ -2502,7 +2586,7 @@
   white-space: nowrap;
   margin-bottom: 0px;
 }
-.arravpos-appointment-price {
+.aaravpos-appointment-price {
   font-family: monospace;
   font-weight: 600;
   font-size: 15px;
@@ -2512,7 +2596,7 @@
   display: flex;
   flex-direction: row;
 }
-.arravpos-appointment-date {
+.aaravpos-appointment-date {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -2520,20 +2604,20 @@
   padding-top: 8px;
   border-top: 1px solid #e5e7eb;
 }
-.arravpos-appointment-date-text {
+.aaravpos-appointment-date-text {
   font-size: 14px;
   font-weight: 600;
   color: #111827;
 }
-.arravpos-success-wrapper {
+.aaravpos-success-wrapper {
   overflow-y: auto;
   scrollbar-width: none;
   height: 700px;
 }
-.arravpos-success-wrapper::-webkit-scrollbar {
+.aaravpos-success-wrapper::-webkit-scrollbar {
   display: none;
 }
-.arravpos-success-motion {
+.aaravpos-success-motion {
   display: flex;
   flex-direction: column;
   height: 668px;
@@ -2543,7 +2627,7 @@
   text-align: center;
   padding: 16px;
 }
-.arravpos-success-icon {
+.aaravpos-success-icon {
   width: 34px;
   height: 34px;
   background: var(--btn-bg);
@@ -2556,23 +2640,23 @@
   font-size: 36px;
   margin-bottom: 24px;
 }
-.arravpos-success-title {
+.aaravpos-success-title {
   font-family: "Bebas Neue", sans-serif;
   font-size: 20px;
   margin-bottom: 8px;
 }
-.arravpos-success-description {
+.aaravpos-success-description {
   font-size: 14px;
   color: var(--muted);
   margin-bottom: 10px;
   line-height: 1.625;
   margin-top: 0px;
 }
-.arravpos-success-content {
+.aaravpos-success-content {
   width: 100%;
   max-width: 570px;
 }
-.arravpos-success-card {
+.aaravpos-success-card {
   background: #ffffff;
   border-radius: 6px;
   text-align: left;
@@ -2584,55 +2668,55 @@
   scrollbar-width: none;
   -ms-overflow-style: none;
 }
-.arravpos-success-row {
+.aaravpos-success-row {
   display: flex;
   justify-content: space-between;
   padding-top: 8px;
   padding-bottom: 8px;
   border-bottom: 1px solid #f3f4f6;
 }
-.arravpos-success-row-first {
+.aaravpos-success-row-first {
   padding-top: 0;
 }
-.arravpos-total-row {
+.aaravpos-total-row {
   display: flex;
   justify-content: space-between;
   padding-top: 16px;
   padding-bottom: 0;
 }
-.arravpos-label {
+.aaravpos-label {
   color: #4b5563;
   font-size: 14px;
   font-weight: 700;
 }
-.arravpos-services-label {
+.aaravpos-services-label {
   color: #6b7280;
   font-size: 14px;
   font-weight: 700;
 }
-.arravpos-value {
+.aaravpos-value {
   font-size: 14px;
   font-weight: 500;
   color: #1f2937;
 }
-.arravpos-price {
+.aaravpos-price {
   display: flex;
   flex-direction: row;
   align-items: center;
   color: #1f2937;
   font-weight: 600;
 }
-.arravpos-total-price {
+.aaravpos-total-price {
   display: flex;
   flex-direction: row;
   align-items: center;
   color: var(--red);
   font-weight: 600;
 }
-.arravpos-services-header {
+.aaravpos-services-header {
   align-items: center;
 }
-.arravpos-services-list {
+.aaravpos-services-list {
   padding-top: 8px;
   padding-bottom: 8px;
   border-bottom: 1px solid #f3f4f6;
@@ -2643,23 +2727,23 @@
   overflow-y: auto;
   max-height: 23vh;
 }
-.arravpos-service-row {
+.aaravpos-service-row {
   display: flex;
   justify-content: space-between;
   font-size: 14px;
   padding-top: 6px;
   padding-bottom: 6px;
 }
-.arravpos-service-name {
+.aaravpos-service-name {
   color: #374151;
 }
-.arravpos-service-price {
+.aaravpos-service-price {
   color: #111827;
   display: flex;
   flex-direction: row;
   align-items: center;
 }
-.arravpos-more-services {
+.aaravpos-more-services {
   text-align: center;
   font-size: 12px;
   color: #6b7280;
@@ -2670,7 +2754,7 @@
   justify-content: center;
   gap: 4px;
 }
-.arravpos-show-btn {
+.aaravpos-show-btn {
   color: #2563eb;
   font-size: 12px;
   font-weight: 500;
@@ -2678,13 +2762,13 @@
   background: transparent;
   border: none;
 }
-.arravpos-show-btn-inner {
+.aaravpos-show-btn-inner {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 4px;
 }
-.arravpos-book-btn {
+.aaravpos-book-btn {
   background: var(--btn-bg);
   color: var(--btn-text);
   border: 1px solid var(--btn-bg);
@@ -2702,12 +2786,12 @@
   border-radius: 4px;
   transition: all 0.3s ease;
 }
-.arravpos-book-btn:hover {
+.aaravpos-book-btn:hover {
   color: var(--btn-text-hover);
   border-color: var(--btn-bg-hover);
   background: var(--btn-bg-hover);
 }
-.arravpos-payment-overlay {
+.aaravpos-payment-overlay {
   position: fixed;
   inset: 0;
   display: flex;
@@ -2717,7 +2801,7 @@
   z-index: 1025;
   padding: 16px;
 }
-.arravpos-payment-form {
+.aaravpos-payment-form {
   width: 100%;
   margin: auto;
   display: flex;
@@ -2733,40 +2817,40 @@
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
   box-sizing: border-box;
 }
-.arravpos-payment-header {
+.aaravpos-payment-header {
   display: flex;
   justify-content: space-between;
   margin-bottom: 20px;
 }
-.arravpos-payment-title {
+.aaravpos-payment-title {
   font-size: 18px;
   font-weight: 600;
   color: #111827;
   margin: 0px;
 }
-.arravpos-payment-amount {
+.aaravpos-payment-amount {
   display: flex;
   flex-direction: row;
   align-items: center;
   font-weight: 600;
   color: #111827;
 }
-.arravpos-payment-fields {
+.aaravpos-payment-fields {
   display: flex;
   flex-direction: column;
   gap: 16px;
 }
-.arravpos-payment-label {
+.aaravpos-payment-label {
   font-size: 12px;
   font-weight: 600;
   color: #4b5563;
   display: flex;
   margin-bottom: 4px;
 }
-.arravpos-payment-required {
+.aaravpos-payment-required {
   color: #ef4444;
 }
-.arravpos-payment-input {
+.aaravpos-payment-input {
   width: 100%;
   padding: 10px 12px;
   border: 1px solid red;
@@ -2775,26 +2859,26 @@
   outline: none;
   transition: border-color 0.2s ease;
 }
-.arravpos-payment-input:focus {
+.aaravpos-payment-input:focus {
   border-color: var(--red);
 }
-.arravpos-payment-error {
+.aaravpos-payment-error {
   color: #ef4444;
   font-size: 14px;
   margin-top: 4px;
 }
-.arravpos-payment-grid {
+.aaravpos-payment-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 16px;
 }
-.arravpos-payment-btn-grid {
+.aaravpos-payment-btn-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 16px;
   margin-top: 20px;
 }
-.arravpos-payment-cancel-btn {
+.aaravpos-payment-cancel-btn {
   padding: 10px 16px;
   cursor: pointer;
   border-radius: 6px;
@@ -2802,7 +2886,7 @@
   background: linear-gradient(to right, #ef4444, #dc2626);
   color: #ffffff;
 }
-.arravpos-payment-submit-btn {
+.aaravpos-payment-submit-btn {
   padding: 8px 16px;
   border-radius: 6px;
   cursor: pointer;
@@ -2811,11 +2895,11 @@
   color: #ffffff;
   transition: opacity 0.2s ease;
 }
-.arravpos-payment-submit-btn:disabled {
+.aaravpos-payment-submit-btn:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
-.arravpos-consent-overlay {
+.aaravpos-consent-overlay {
   position: fixed;
   inset: 0;
   z-index: 1025;
@@ -2825,12 +2909,12 @@
   background-color: rgba(0, 0, 0, 0.4);
   padding: 16px;
 }
-.arravpos-consent-backdrop {
+.aaravpos-consent-backdrop {
   position: fixed;
   inset: 0;
   background-color: rgba(0, 0, 0, 0.6);
 }
-.arravpos-consent-modal {
+.aaravpos-consent-modal {
   position: relative;
   z-index: 10;
   width: 90%;
@@ -2840,50 +2924,50 @@
   border-radius: 12px;
   padding: 16px;
 }
-.arravpos-consent-header {
+.aaravpos-consent-header {
   display: flex;
   justify-content: space-between;
   margin-bottom: 10px;
 }
-.arravpos-consent-title {
+.aaravpos-consent-title {
   font-size: 16px;
   font-weight: 600;
   color: #111827;
   margin: 0px;
 }
-.arravpos-consent-close-btn {
+.aaravpos-consent-close-btn {
   color: #9ca3af;
   cursor: pointer;
   border: none;
   background: transparent;
   transition: color 0.2s ease;
 }
-.arravpos-consent-close-btn:hover {
+.aaravpos-consent-close-btn:hover {
   color: #4b5563;
 }
-.arravpos-consent-content-wrapper {
+.aaravpos-consent-content-wrapper {
   max-height: 42vh;
 }
-.arravpos-consent-content-box {
+.aaravpos-consent-content-box {
   border: 1px solid #e5e7eb;
   border-radius: 6px;
   padding: 16px;
   background-color: #f9fafb;
 }
-.arravpos-consent-content {
+.aaravpos-consent-content {
   color: #374151;
   white-space: pre-wrap;
   overflow-y: auto;
   max-height: 30vh;
 }
-.arravpos-consent-checkbox-label {
+.aaravpos-consent-checkbox-label {
   display: flex;
   gap: 8px;
   align-items: center;
   margin-top: 12px;
   border-color: #e5e7eb;
 }
-.arravpos-consent-checkbox {
+.aaravpos-consent-checkbox {
   width: 18px;
   height: 18px;
   color: #ef4444;
@@ -2891,49 +2975,49 @@
   border: 1px solid #d1d5db;
   border-radius: 4px;
 }
-.arravpos-consent-checkbox-text {
+.aaravpos-consent-checkbox-text {
   font-size: 14px;
   font-weight: 500;
   color: #374151;
 }
-.arravpos-consent-typed-wrapper {
+.aaravpos-consent-typed-wrapper {
   margin-top: 16px;
 }
-.arravpos-consent-input-label {
+.aaravpos-consent-input-label {
   display: block;
   margin-bottom: 8px;
   font-size: 14px;
   font-weight: 500;
   color: #374151;
 }
-.arravpos-consent-required {
+.aaravpos-consent-required {
   color: #ef4444;
 }
-.arravpos-consent-input {
+.aaravpos-consent-input {
   width: 100%;
   padding: 8px 12px;
   border-radius: 6px;
   outline: none;
 }
-.arravpos-consent-input-normal {
+.aaravpos-consent-input-normal {
   border: 1px solid #d1d5db;
 }
-.arravpos-consent-input-error {
+.aaravpos-consent-input-error {
   border: 1px solid #ef4444;
 }
-.arravpos-consent-helper-text {
+.aaravpos-consent-helper-text {
   margin-top: 4px;
   font-size: 12px;
   color: #6b7280;
 }
-.arravpos-consent-error {
+.aaravpos-consent-error {
   font-size: 14px;
   color: #ef4444;
 }
-.arravpos-consent-signature-wrapper {
+.aaravpos-consent-signature-wrapper {
   margin-top: 16px;
 }
-.arravpos-consent-signature-canvas {
+.aaravpos-consent-signature-canvas {
   width: 100%;
   height: 136px;
   overflow: hidden;
@@ -2941,16 +3025,16 @@
   border-radius: 6px;
   background-color: #ffffff;
 }
-.arravpos-consent-error-signature {
+.aaravpos-consent-error-signature {
   margin-top: 4px;
   margin-bottom: 4px;
 }
-.arravpos-consent-signature-actions {
+.aaravpos-consent-signature-actions {
   display: flex;
   justify-content: space-between;
   margin-top: 8px;
 }
-.arravpos-consent-clear-btn {
+.aaravpos-consent-clear-btn {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -2963,17 +3047,17 @@
   border-radius: 6px;
   background: transparent;
 }
-.arravpos-consent-clear-btn:hover {
+.aaravpos-consent-clear-btn:hover {
   color: #1f2937;
 }
-.arravpos-consent-email-label {
+.aaravpos-consent-email-label {
   display: flex;
   gap: 8px;
   align-items: center;
   cursor: pointer;
   font-size: 14px;
 }
-.arravpos-consent-email-checkbox {
+.aaravpos-consent-email-checkbox {
   width: 16px;
   height: 16px;
   accent-color: var(--btn-bg);
@@ -2981,17 +3065,17 @@
   border: 1px solid #d1d5db;
   border-radius: 4px;
 }
-.arravpos-consent-email-text {
+.aaravpos-consent-email-text {
   font-size: 14px;
   color: #374151;
 }
-.arravpos-consent-footer {
+.aaravpos-consent-footer {
   display: flex;
   justify-content: flex-end;
   gap: 12px;
   margin-top: 20px;
 }
-.arravpos-consent-cancel-btn {
+.aaravpos-consent-cancel-btn {
   padding: 8px 16px;
   border: 1px solid #d1d5db;
   border-radius: 6px;
@@ -3000,10 +3084,10 @@
   cursor: pointer;
   transition: color 0.2s ease;
 }
-.arravpos-consent-cancel-btn:hover {
+.aaravpos-consent-cancel-btn:hover {
   color: #111827;
 }
-.arravpos-consent-submit-btn {
+.aaravpos-consent-submit-btn {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -3012,27 +3096,27 @@
   border-radius: 6px;
   transition: all 0.2s ease;
 }
-.arravpos-consent-submit-disabled {
+.aaravpos-consent-submit-disabled {
   background-color: #d1d5db;
   color: #4b5563;
   cursor: not-allowed;
 }
-.arravpos-consent-submit-active {
+.aaravpos-consent-submit-active {
   background-color: var(--btn-bg);
   color: #ffffff;
   cursor: pointer;
 }
-.arravpos-consent-submit-active:hover {
+.aaravpos-consent-submit-active:hover {
   background-color: var(--btn-bg-hover);
 }
-.arravpos-date-wrapper {
+.aaravpos-date-wrapper {
   margin-top: 8px;
   margin-bottom: 14px;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
 }
-.arravpos-date-strip {
+.aaravpos-date-strip {
   display: flex;
   align-items: stretch;
   gap: 6px;
@@ -3042,10 +3126,10 @@
   -webkit-overflow-scrolling: touch;
   scroll-behavior: smooth;
 }
-.arravpos-date-strip::-webkit-scrollbar {
+.aaravpos-date-strip::-webkit-scrollbar {
   display: none;
 }
-.arravpos-date-card {
+.aaravpos-date-card {
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
@@ -3059,37 +3143,37 @@
   user-select: none;
   border: 1px solid transparent;
 }
-.arravpos-date-card-active {
+.aaravpos-date-card-active {
   background-color: var(--btn-bg);
   color: var(--btn-text);
   border-color: var(--btn-bg);
 }
-.arravpos-date-card-default:hover {
+.aaravpos-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-date-week {
   font-size: 10px;
   text-transform: uppercase;
   margin-bottom: 4px;
   line-height: 1;
   font-weight: 500;
 }
-.arravpos-date-day {
+.aaravpos-date-day {
   font-family: monospace;
   font-size: 18px;
   line-height: 1;
   font-weight: 500;
 }
-.arravpos-date-today {
+.aaravpos-date-today {
   margin-top: 6px;
   font-size: 8px;
   color: var(--red);
   font-weight: 700;
   line-height: 1;
 }
-.arravpos-calendar-btn {
+.aaravpos-calendar-btn {
   margin-left: 16px;
   padding: 8px;
   font-size: 14px;
@@ -3108,7 +3192,7 @@
   color: #ffffff;
   border: none;
 }
-.arravpos-selected-professional {
+.aaravpos-selected-professional {
   display: flex;
   align-items: center;
   gap: 12px;
@@ -3119,14 +3203,14 @@
   border-radius: 2px;
   flex-wrap: wrap;
 }
-.arravpos-selected-professional-image {
+.aaravpos-selected-professional-image {
   width: 40px;
   height: 40px;
   border-radius: 9999px;
   object-fit: cover;
   flex-shrink: 0;
 }
-.arravpos-selected-professional-avatar {
+.aaravpos-selected-professional-avatar {
   width: 40px;
   height: 40px;
   border-radius: 9999px;
@@ -3137,16 +3221,16 @@
   justify-content: center;
   flex-shrink: 0;
 }
-.arravpos-selected-professional-content {
+.aaravpos-selected-professional-content {
   flex: 1;
   min-width: 0;
 }
-.arravpos-selected-professional-name {
+.aaravpos-selected-professional-name {
   font-size: 14px;
   font-weight: 600;
   margin: 0px 0px 4px;
 }
-.arravpos-selected-professional-services {
+.aaravpos-selected-professional-services {
   font-size: 12px;
   color: var(--muted);
   overflow: hidden;
@@ -3154,41 +3238,41 @@
   white-space: nowrap;
   margin: 0px;
 }
-.arravpos-scroll-area {
+.aaravpos-scroll-area {
   overflow-y: auto;
   padding-bottom: 30px;
   scrollbar-width: none;
   max-height: 440px;
   position: relative;
 }
-.arravpos-scroll-area::-webkit-scrollbar {
+.aaravpos-scroll-area::-webkit-scrollbar {
   display: none;
 }
-.arravpos-loader-wrapper {
+.aaravpos-loader-wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
 }
-.arravpos-loader {
+.aaravpos-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-spin 1s linear infinite;
 }
-.arravpos-slot-icon {
+.aaravpos-slot-icon {
   color: #fb923c;
 }
-.arravpos-slot-section {
+.aaravpos-slot-section {
   margin-bottom: 16px;
   border: 1px solid rgb(0 0 0 / 10%);
   border-radius: 2px;
   overflow: hidden;
 }
-.arravpos-slot-section-header {
+.aaravpos-slot-section-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -3197,10 +3281,10 @@
   background-color: var(--surface);
   transition: background-color 0.2s ease;
 }
-.arravpos-slot-section-header:hover {
+.aaravpos-slot-section-header:hover {
   background-color: rgba(var(--btn-bg), 0.08);
 }
-.arravpos-slot-section-title {
+.aaravpos-slot-section-title {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -3210,23 +3294,23 @@
   letter-spacing: 1.2px;
   color: rgba(0, 0, 0, 0.8);
 }
-.arravpos-slot-section-arrow {
+.aaravpos-slot-section-arrow {
   transition: transform 0.2s ease;
 }
-.arravpos-slot-section-arrow-open {
+.aaravpos-slot-section-arrow-open {
   transform: rotate(180deg);
 }
-.arravpos-slot-section-content {
+.aaravpos-slot-section-content {
   padding: 12px;
   border-top: 1px solid rgb(0 0 0 / 10%);
   background-color: #ffffff;
 }
-.arravpos-slot-grid {
+.aaravpos-slot-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
   gap: 8px;
 }
-.arravpos-slot-card {
+.aaravpos-slot-card {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -3237,30 +3321,30 @@
   border-radius: 2px;
   transition: all 0.2s ease;
 }
-.arravpos-slot-card-default {
+.aaravpos-slot-card-default {
   background-color: #ffffff;
   cursor: pointer;
 }
-.arravpos-slot-card-default:hover {
+.aaravpos-slot-card-default:hover {
   color: var(--btn-bg);
   border-color: var(--btn-bg);
 }
-.arravpos-slot-card-selected {
+.aaravpos-slot-card-selected {
   background-color: #fff8f8;
   color: var(--btn-bg);
   border-color: rgb(0 0 0 / 10%);
   cursor: pointer;
 }
-.arravpos-slot-card-disabled {
+.aaravpos-slot-card-disabled {
   background-color: #f3f4f6;
   color: #9ca3af;
   cursor: not-allowed;
 }
-.arravpos-slot-time {
+.aaravpos-slot-time {
   font-family: monospace;
   font-size: 14px;
 }
-.arravpos-slot-status {
+.aaravpos-slot-status {
   font-size: 10px;
 }
 .aaravpos-staff-wrapper {
@@ -3273,14 +3357,14 @@
 .aaravpos-staff-wrapper::-webkit-scrollbar {
   display: none;
 }
-.arravpos-profile-image {
+.aaravpos-profile-image {
   width: 40px;
   height: 40px;
   border-radius: 9999px;
   object-fit: cover;
   flex-shrink: 0;
 }
-.arravpos-profile-avatar {
+.aaravpos-profile-avatar {
   width: 40px;
   height: 40px;
   border-radius: 9999px;
@@ -3291,15 +3375,15 @@
   justify-content: center;
   flex-shrink: 0;
 }
-.arravpos-card-box {
+.aaravpos-card-box {
   background-color: #ffffff;
   border: 1px solid var(--btn-bg);
-  border-radius: 2px;
-  padding: 14px;
+  border-radius: 4px;
+  padding: 16px;
   margin-bottom: 8px;
   font-size: 14px;
 }
-.arravpos-section-label {
+.aaravpos-section-label {
   margin-top: 10px;
   margin-bottom: 8px;
   font-size: 10px;
@@ -3308,7 +3392,7 @@
   letter-spacing: 1.5px;
   color: rgba(0, 0, 0, 0.7);
 }
-.arravpos-select-card {
+.aaravpos-select-card {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -3319,22 +3403,22 @@
   margin-bottom: 8px;
   border: 1px solid;
 }
-.arravpos-select-card-default {
+.aaravpos-select-card-default {
   border-color: var(--border);
   background-color: transparent;
 }
-.arravpos-select-card-active {
+.aaravpos-select-card-active {
   border-color: var(--red);
   background-color: rgba(255, 0, 0, 0.05);
 }
-.arravpos-select-check {
+.aaravpos-select-check {
   margin-left: auto;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 }
-.arravpos-date-nav-btn {
+.aaravpos-date-nav-btn {
   flex-shrink: 0;
   width: 34px;
   background-color: rgb(242, 240, 236);
@@ -3350,7 +3434,7 @@
   align-self: stretch;
   transition: all 150ms ease;
 }
-.arravpos-date-nav-btn:hover {
+.aaravpos-date-nav-btn:hover {
   border-color: var(--red);
   color: var(--red);
   background-color: rgba(215, 38, 61, 0.12);
@@ -3434,7 +3518,7 @@
   }
 }
 @media (max-width: 768px) {
-  .arravpos-select-card {
+  .aaravpos-select-card {
     gap: 10px;
     padding: 10px;
   }
@@ -3452,47 +3536,47 @@
   .aaravpos-calendar-grid {
     gap: 8px;
   }
-  .arravpos-date-nav-btn svg {
+  .aaravpos-date-nav-btn svg {
     width: 18px;
     height: 18px;
   }
-  .arravpos-date-strip {
+  .aaravpos-date-strip {
     gap: 5px;
   }
-  .arravpos-date-week {
+  .aaravpos-date-week {
     font-size: 9px;
   }
-  .arravpos-date-day {
+  .aaravpos-date-day {
     font-size: 20px;
   }
-  .arravpos-date-today {
+  .aaravpos-date-today {
     font-size: 7px;
   }
-  .arravpos-select-check svg {
+  .aaravpos-select-check svg {
     width: 18px;
     height: 18px;
   }
-  .arravpos-card-box {
+  .aaravpos-card-box {
     padding: 14px;
     font-size: 13px;
   }
-  .arravpos-calendar-btn {
+  .aaravpos-calendar-btn {
     font-size: 12px;
   }
-  .arravpos-outlet-info {
+  .aaravpos-outlet-info {
     padding: 10px;
   }
-  .arravpos-outlet-logo {
+  .aaravpos-outlet-logo {
     width: 36px;
     height: 36px;
   }
-  .arravpos-appointment-header {
+  .aaravpos-appointment-header {
     align-items: flex-start;
   }
-  .arravpos-appointment-price {
+  .aaravpos-appointment-price {
     font-size: 14px;
   }
-  .arravpos-appointment-services {
+  .aaravpos-appointment-services {
     white-space: normal;
     display: -webkit-box;
     -webkit-line-clamp: 2;
@@ -3526,16 +3610,16 @@
   }
 }
 @media (min-width: 768px) {
-  .arravpos-section-label {
+  .aaravpos-section-label {
     font-size: 9px;
     letter-spacing: 1.3px;
   }
-  .arravpos-profile-avatar {
+  .aaravpos-profile-avatar {
     width: 36px;
     height: 36px;
     font-size: 14px;
   }
-  .arravpos-profile-image {
+  .aaravpos-profile-image {
     width: 36px;
     height: 36px;
   }
@@ -3567,7 +3651,7 @@
   .aaravpos-pro-order-list-pro {
     height: calc(100dvh - 295px);
   }
-  .arravpos-details-grid {
+  .aaravpos-details-grid {
     grid-template-columns: repeat(2, 1fr);
     gap: 20px;
   }
@@ -3575,7 +3659,7 @@
     max-width: 36rem;
   }
 }
-@media (max-width:543px) {
+@media (max-width: 543px) {
   .aaravpos-services-grid {
     grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
   }
@@ -3589,80 +3673,80 @@
   .aaravpos-service-qty {
     flex: 1;
   }
-  .arravpos-date-strip {
+  .aaravpos-date-strip {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 10px;
   }
-  .arravpos-date-wrapper {
+  .aaravpos-date-wrapper {
     justify-content: space-between;
     flex: 1;
   }
 }
 @media (max-width: 480px) {
-  .arravpos-date-nav-btn svg {
+  .aaravpos-date-nav-btn svg {
     width: 16px;
     height: 16px;
   }
-  .arravpos-date-strip {
+  .aaravpos-date-strip {
     gap: 4px;
   }
-  .arravpos-date-card {
+  .aaravpos-date-card {
     min-height: 38px;
     min-width: 20px;
   }
-  .arravpos-calendar-btn {
+  .aaravpos-calendar-btn {
     margin-left: 0px;
     padding: 6px;
   }
-  .arravpos-date-week {
+  .aaravpos-date-week {
     font-size: 8px;
     margin-bottom: 3px;
   }
-  .arravpos-date-day {
+  .aaravpos-date-day {
     font-size: 18px;
   }
-  .arravpos-date-today {
+  .aaravpos-date-today {
     margin-top: 4px;
     font-size: 6px;
   }
-  .arravpos-select-check svg {
+  .aaravpos-select-check svg {
     width: 16px;
     height: 16px;
   }
-  .arravpos-select-card {
+  .aaravpos-select-card {
     gap: 8px;
     padding: 8px;
   }
-  .arravpos-section-label {
+  .aaravpos-section-label {
     margin-top: 16px;
     font-size: 8px;
     letter-spacing: 1.1px;
   }
-  .arravpos-card-box {
+  .aaravpos-card-box {
     padding: 12px;
     font-size: 12px;
   }
-  .arravpos-profile-image {
+  .aaravpos-profile-image {
     width: 32px;
     height: 32px;
   }
-  .arravpos-profile-avatar {
+  .aaravpos-profile-avatar {
     width: 32px;
     height: 32px;
     font-size: 12px;
   }
-  .arravpos-outlet-name {
+  .aaravpos-outlet-name {
     font-size: 13px;
   }
-  .arravpos-outlet-address {
+  .aaravpos-outlet-address {
     font-size: 11px;
   }
-  .arravpos-appointment-name {
+  .aaravpos-appointment-name {
     font-size: 13px;
   }
-  .arravpos-appointment-date-text {
+  .aaravpos-appointment-date-text {
     font-size: 13px;
   }
   .aaravpos-date-modal {
@@ -3680,10 +3764,10 @@
   }
 }
 @media (max-width: 418px) {
-  .arravpos-date-nav-btn {
+  .aaravpos-date-nav-btn {
     width: 26px;
   }
-  .arravpos-date-card {
+  .aaravpos-date-card {
     min-width: 22px;
     padding: 6px 4px;
   }
@@ -3693,7 +3777,7 @@
     display: block;
   }
   .aaravpos-layout-wrapper {
-    grid-template-columns: minmax(0, 1fr) 360px;
+    grid-template-columns: minmax(0, 1fr) 290px;
   }
   .aaravpos-sidebar-mobile {
     display: none;
@@ -3711,20 +3795,20 @@
   }
 }
 @media (min-width: 1024px) {
-  .arravpos-date-strip {
+  .aaravpos-date-strip {
     gap: 6px;
   }
   .custom-container {
     padding-left: 64px;
     padding-right: 64px;
   }
-  .arravpos-consent-modal {
+  .aaravpos-consent-modal {
     width: 60%;
   }
-  .arravpos-scroll-area {
+  .aaravpos-scroll-area {
     padding-bottom: 16px;
   }
-  .arravpos-consent-title {
+  .aaravpos-consent-title {
     font-size: 20px;
   }
   .aaravpos-header {
@@ -3750,7 +3834,7 @@
     align-items: flex-end;
     gap: 32px;
   }
-  .arravpos-details-scroll {
+  .aaravpos-details-scroll {
     padding-bottom: 16px;
   }
 }
@@ -3759,10 +3843,10 @@
     flex-direction: column;
     margin-bottom: 10px;
   }
-  .aaravpos-barber-sidebar {
+  .aaravpos-sidebar {
     display: none;
   }
-  .arravpos-booking-grid {
+  .aaravpos-booking-grid {
     flex-direction: column;
     gap: 20px;
   }
@@ -3774,11 +3858,42 @@
   .aaravpos-outlet-grid {
     grid-template-columns: repeat(4, 1fr);
   }
+  .aaravpos-layout-wrapper {
+    grid-template-columns: minmax(0, 1fr) 280px;
+  }
+}
+@media (min-width: 1350px) {
+  .aaravpos-layout-wrapper {
+    grid-template-columns: minmax(0, 1fr) 250px;
+  }
+}
+@media (min-width: 1440px) {
+  .aaravpos-layout-wrapper {
+    grid-template-columns: minmax(0, 1fr) 200px;
+  }
 }
 @media (min-width: 1536px) {
   .aaravpos-outlet-grid {
     grid-template-columns: repeat(5, 1fr);
   }
+  .aaravpos-layout-wrapper {
+    grid-template-columns: minmax(0, 1fr) 150px;
+  }
+}
+@media (min-width: 1710px) {
+  .aaravpos-layout-wrapper {
+    grid-template-columns: minmax(0, 1fr) 60px;
+  }
+}
+@media (min-width: 1840px) {
+  .aaravpos-layout-wrapper {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+@media (max-width: 1178px) {
+  .aaravpos-paymentcard-card {
+    padding: 20px;
+  }
 }
 @keyframes aaravpos-shimmer {
   0% {
@@ -3869,12 +3984,12 @@
     transform: rotate(360deg);
   }
 }
-@keyframes arravpos-spin {
+@keyframes aaravpos-spin {
   to {
     transform: rotate(360deg);
   }
 }
-@keyframes arravpos-spin {
+@keyframes aaravpos-spin {
   to {
     transform: rotate(360deg);
   }