medos-sdk 1.1.10 → 1.1.12

package/dist/vanilla/widget.css

@@ -1,390 +1,1230 @@
+:root {
+  --medos-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, Helvetica, Arial, sans-serif;
+  --medos-primary-color: #3b82f6;
+  --medos-primary-color-hover: #2563eb;
+  --medos-text-color: #1f2937;
+  --medos-text-color-secondary: #6b7280;
+  --medos-bg-color: #ffffff;
+  --medos-bg-color-secondary: #f9fafb;
+  --medos-border-color: #d1d5db;
+  --medos-border-radius: 8px;
+  --medos-box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1),
+    0 2px 4px -2px rgb(0 0 0 / 0.1);
+}
+
 /* Medos Appointment Calendar Widget Styles */
 
 .medos-appointment-container {
+  font-family: var(--medos-font-family);
+  background-color: var(--medos-bg-color-secondary);
+  padding: 2rem;
   display: flex;
   justify-content: center;
-  padding: 20px;
-  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
-  background: #f6f8fa;
 }
 
 .medos-appointment-card {
+  background-color: var(--medos-bg-color);
+  border-radius: var(--medos-border-radius);
+  box-shadow: var(--medos-box-shadow);
   width: 100%;
   max-width: 720px;
-  background: #fff;
-  border-radius: 12px;
-  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.08);
-  padding: 24px;
+  padding: 2rem;
   box-sizing: border-box;
 }
 
 .medos-appointment-header {
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--medos-border-color);
+  margin-bottom: 1.5rem;
   display: flex;
-  align-items: center;
   justify-content: space-between;
-  margin-bottom: 16px;
+  align-items: center;
 }
 
 .medos-appointment-title {
-  margin: 0;
-  font-size: 20px;
+  font-size: 1.5rem;
   font-weight: 600;
+  color: var(--medos-text-color);
+  margin: 0;
 }
 
 .medos-appointment-stepper {
   display: flex;
-  gap: 8px;
-  align-items: center;
+  gap: 0.5rem;
 }
 
 .medos-appointment-step-pill {
-  padding: 6px 10px;
+  padding: 0.25rem 0.75rem;
   border-radius: 999px;
-  font-size: 12px;
-  font-weight: 600;
-  background: #eef2ff;
-  color: #333;
+  font-size: 0.875rem;
+  font-weight: 500;
+  background-color: var(--medos-bg-color-secondary);
+  color: var(--medos-text-color-secondary);
+  transition: all 0.2s ease-in-out;
 }
 
 .medos-appointment-step-pill.active {
-  background: #0b79f7;
-  color: #fff;
+  background-color: var(--medos-primary-color);
+  color: var(--medos-bg-color);
 }
 
 .medos-appointment-section {
-  margin-top: 12px;
+  margin-top: 1.5rem;
+}
+
+#medos-calendar-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 1rem;
 }
 
 .medos-appointment-label {
   display: block;
-  font-size: 13px;
-  margin-bottom: 6px;
-  color: #374151;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--medos-text-color);
+  margin-bottom: 0.5rem;
 }
 
 .medos-appointment-input,
 .medos-appointment-select,
 .medos-appointment-textarea {
   width: 100%;
-  padding: 10px 12px;
-  border-radius: 8px;
-  border: 1px solid #e6e9ef;
-  outline: none;
-  font-size: 14px;
+  padding: 0.75rem 1rem;
+  font-size: 1rem;
+  border: 1px solid var(--medos-border-color);
+  border-radius: var(--medos-border-radius);
+  background-color: var(--medos-bg-color);
+  color: var(--medos-text-color);
+  transition: border-color 0.2s, box-shadow 0.2s;
   box-sizing: border-box;
-  font-family: inherit;
-}
-
-.medos-appointment-select {
-  background: #fff;
 }
 
-.medos-appointment-textarea {
-  min-height: 80px;
-  resize: vertical;
+.medos-appointment-input:focus,
+.medos-appointment-select:focus,
+.medos-appointment-textarea:focus {
+  outline: none;
+  border-color: var(--medos-primary-color);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
 }
 
 .medos-appointment-actions {
   display: flex;
-  gap: 8px;
-  margin-top: 16px;
   justify-content: flex-end;
+  gap: 0.75rem;
+  margin-top: 1.5rem;
 }
 
 .medos-appointment-btn {
-  padding: 10px 14px;
-  border-radius: 8px;
-  cursor: pointer;
+  padding: 0.75rem 1.25rem;
+  font-size: 1rem;
   font-weight: 600;
-  font-size: 14px;
+  border-radius: var(--medos-border-radius);
   border: none;
-  font-family: inherit;
+  cursor: pointer;
+  transition: background-color 0.2s, transform 0.1s;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.medos-appointment-btn:active {
+  transform: translateY(1px);
 }
 
 .medos-appointment-btn-primary {
-  background: #0b79f7;
-  color: #fff;
+  background-color: var(--medos-primary-color);
+  color: var(--medos-bg-color);
+}
+
+.medos-appointment-btn-primary:hover {
+  background-color: var(--medos-primary-color-hover);
 }
 
 .medos-appointment-btn-primary:disabled {
-  opacity: 0.6;
+  background-color: #9ca3af;
   cursor: not-allowed;
 }
 
 .medos-appointment-btn-secondary {
-  background: #fff;
-  color: #0b254a;
-  border: 1px solid #e6e9ef;
+  background-color: var(--medos-bg-color);
+  color: var(--medos-text-color);
+  border: 1px solid var(--medos-border-color);
+}
+
+.medos-appointment-btn-secondary:hover {
+  background-color: var(--medos-bg-color-secondary);
 }
 
 .medos-appointment-slot-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
-  gap: 12px;
-  margin-top: 12px;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: 0.75rem;
+  margin-top: 1rem;
 }
 
 .medos-appointment-slot-card {
-  padding: 12px;
-  border-radius: 10px;
-  border: 1px solid #e6e9ef;
-  background: #fff;
-  cursor: pointer;
+  padding: 1rem;
+  border: 1px solid var(--medos-border-color);
+  border-radius: var(--medos-border-radius);
   text-align: center;
-  transition: all 0.2s;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
 }
 
 .medos-appointment-slot-card:hover {
-  border-color: #0b79f7;
+  border-color: var(--medos-primary-color);
+  transform: translateY(-2px);
 }
 
 .medos-appointment-slot-card.selected {
-  border: 2px solid #0b79f7;
-  background: linear-gradient(180deg, #f0f6ff, #e9f2ff);
+  background-color: var(--medos-primary-color);
+  color: var(--medos-bg-color);
+  border-color: var(--medos-primary-color);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
 }
 
 .medos-appointment-slot-time {
-  font-weight: 700;
-  font-size: 14px;
-}
-
-.medos-appointment-small-muted {
-  font-size: 12px;
-  color: #6b7280;
+  font-weight: 600;
 }
 
+/* Success message */
 .medos-appointment-success-card {
-  padding: 20px;
-  border-radius: 12px;
-  background: linear-gradient(90deg, #ecfdf5, #eff6ff);
   text-align: center;
+  padding: 2rem;
 }
 
 .medos-appointment-success-icon {
-  font-size: 32px;
   color: #10b981;
-  margin-bottom: 8px;
+  font-size: 3rem;
+  margin-bottom: 1rem;
 }
 
 .medos-appointment-success-title {
-  font-weight: 700;
-  margin-bottom: 6px;
-}
-
-.medos-appointment-loading {
-  margin-bottom: 12px;
-}
-
-.medos-appointment-error {
-  margin-bottom: 12px;
-  color: #ef4444;
-  font-weight: 600;
-}
-
-.medos-appointment-verified {
-  margin-top: 12px;
-  padding: 12px;
-  border-radius: 8px;
-  background: #ecfdf5;
-  color: #10b981;
+  font-size: 1.25rem;
   font-weight: 600;
+  color: var(--medos-text-color);
+  margin-bottom: 0.5rem;
 }
 
-.medos-appointment-form-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 12px;
-  margin-top: 12px;
-}
-
-.medos-appointment-form-grid-2col {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 16px;
-}
-
-.medos-appointment-validation-error {
-  margin-top: 4px;
-  font-size: 12px;
-  color: #ef4444;
-}
-
-.medos-appointment-otp-info {
-  margin-top: 8px;
-  font-size: 12px;
-  color: #6b7280;
+.medos-appointment-success-message {
+  color: var(--medos-text-color-secondary);
 }
 
-/* Medos Enquiry Form Widget Styles */
+/* Enquiry Form Widget Styles */
 
 .medos-enquiry-container {
+  font-family: var(--medos-font-family);
+  background-color: var(--medos-bg-color-secondary);
+  padding: 2rem;
   display: flex;
   justify-content: center;
-  padding: 20px;
-  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
-  background: #f6f8fa;
 }
 
 .medos-enquiry-card {
+  background-color: var(--medos-bg-color);
+  border-radius: var(--medos-border-radius);
+  box-shadow: var(--medos-box-shadow);
   width: 100%;
   max-width: 720px;
-  background: #fff;
-  border-radius: 12px;
-  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.08);
-  padding: 24px;
+  padding: 2rem;
   box-sizing: border-box;
 }
 
 .medos-enquiry-header {
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--medos-border-color);
+  margin-bottom: 1.5rem;
   display: flex;
-  align-items: center;
   justify-content: space-between;
-  margin-bottom: 16px;
+  align-items: center;
 }
 
 .medos-enquiry-title {
-  margin: 0;
-  font-size: 20px;
+  font-size: 1.5rem;
   font-weight: 600;
+  color: var(--medos-text-color);
+  margin: 0;
 }
 
 .medos-enquiry-step-indicator {
-  margin: 0;
-  font-size: 12px;
-  color: #6b7280;
+  font-size: 0.875rem;
   font-weight: 500;
+  color: var(--medos-text-color-secondary);
 }
 
 .medos-enquiry-section {
-  margin-top: 12px;
+  margin-top: 1.5rem;
 }
 
 .medos-enquiry-label {
   display: block;
-  font-size: 13px;
-  margin-bottom: 6px;
-  color: #374151;
+  font-size: 0.875rem;
   font-weight: 500;
+  color: var(--medos-text-color);
+  margin-bottom: 0.5rem;
 }
 
 .medos-enquiry-input,
 .medos-enquiry-textarea {
   width: 100%;
-  padding: 10px 12px;
-  border-radius: 8px;
-  border: 1px solid #e6e9ef;
-  outline: none;
-  font-size: 14px;
+  padding: 0.75rem 1rem;
+  font-size: 1rem;
+  border: 1px solid var(--medos-border-color);
+  border-radius: var(--medos-border-radius);
+  background-color: var(--medos-bg-color);
+  color: var(--medos-text-color);
+  transition: border-color 0.2s, box-shadow 0.2s;
   box-sizing: border-box;
-  font-family: inherit;
 }
 
-.medos-enquiry-textarea {
-  min-height: 100px;
-  resize: vertical;
+.medos-enquiry-input:focus,
+.medos-enquiry-textarea:focus {
+  outline: none;
+  border-color: var(--medos-primary-color);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
+}
+
+.medos-enquiry-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  margin-top: 1.5rem;
+}
+
+.medos-enquiry-btn {
+  padding: 0.75rem 1.25rem;
+  font-size: 1rem;
+  font-weight: 600;
+  border-radius: var(--medos-border-radius);
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.2s, transform 0.1s;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.medos-enquiry-btn:active {
+  transform: translateY(1px);
+}
+
+.medos-enquiry-btn-primary {
+  background-color: var(--medos-primary-color);
+  color: var(--medos-bg-color);
 }
 
-.medos-enquiry-char-count {
-  margin-top: 4px;
-  font-size: 12px;
-  color: #6b7280;
-  text-align: right;
+.medos-enquiry-btn-primary:hover {
+  background-color: var(--medos-primary-color-hover);
 }
 
-.medos-enquiry-radio-group {
+.medos-enquiry-btn-primary:disabled {
+  background-color: #9ca3af;
+  cursor: not-allowed;
+}
+
+.medos-enquiry-btn-secondary {
+  background-color: var(--medos-bg-color);
+  color: var(--medos-text-color);
+  border: 1px solid var(--medos-border-color);
+}
+
+.medos-enquiry-btn-secondary:hover {
+  background-color: var(--medos-bg-color-secondary);
+}
+
+.medos-enquiry-loading {
+  text-align: center;
+  padding: 2rem;
+  color: var(--medos-text-color-secondary);
+}
+
+.medos-enquiry-error {
+  background-color: #fee2e2;
+  color: #b91c1c;
+  padding: 1rem;
+  border-radius: var(--medos-border-radius);
+  margin-bottom: 1rem;
+  font-weight: 500;
+}
+
+.medos-enquiry-success-card {
+  text-align: center;
+  padding: 2rem;
+}
+
+.medos-enquiry-success-icon {
+  color: #10b981;
+  font-size: 3rem;
+  margin-bottom: 1rem;
+}
+
+.medos-enquiry-success-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--medos-text-color);
+  margin-bottom: 0.5rem;
+}
+
+.medos-enquiry-success-message {
+  color: var(--medos-text-color-secondary);
+}
+
+/* ============================================
+   RESPONSIVE STYLES - Mobile First
+   ============================================ */
+
+/* Mobile devices (up to 767px) */
+@media (max-width: 767px) {
+  /* Appointment Widget Mobile Styles */
+  .medos-appointment-container {
+    padding: 12px;
+  }
+
+  .medos-appointment-card {
+    max-width: 100%;
+    padding: 16px;
+    border-radius: 8px;
+  }
+
+  .medos-appointment-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .medos-appointment-title {
+    font-size: 18px;
+  }
+
+  .medos-appointment-stepper {
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  .medos-appointment-step-pill {
+    padding: 4px 8px;
+    font-size: 11px;
+  }
+
+  .medos-appointment-actions {
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .medos-appointment-btn {
+    width: 100%;
+    min-height: 44px;
+    padding: 12px 16px;
+  }
+
+  .medos-appointment-form-grid,
+  .medos-appointment-form-grid-2col {
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+
+  .medos-appointment-slot-grid {
+    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
+    gap: 8px;
+  }
+
+  .medos-appointment-slot-card {
+    padding: 10px 8px;
+  }
+
+  .medos-appointment-slot-time {
+    font-size: 12px;
+  }
+
+  .medos-appointment-small-muted {
+    font-size: 11px;
+  }
+
+  /* Enquiry Form Mobile Styles */
+  .medos-enquiry-container {
+    padding: 12px;
+  }
+
+  .medos-enquiry-card {
+    max-width: 100%;
+    padding: 16px;
+    border-radius: 8px;
+  }
+
+  .medos-enquiry-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .medos-enquiry-title {
+    font-size: 18px;
+  }
+
+  .medos-enquiry-actions {
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .medos-enquiry-btn {
+    width: 100%;
+    min-height: 44px;
+    padding: 12px 16px;
+  }
+
+  .medos-enquiry-radio-group {
+    gap: 10px;
+  }
+}
+
+/* Tablet devices (768px to 1023px) */
+@media (min-width: 768px) and (max-width: 1023px) {
+  .medos-appointment-card,
+  .medos-enquiry-card {
+    max-width: 100%;
+  }
+
+  .medos-appointment-slot-grid {
+    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+  }
+}
+
+/* Desktop and larger (1024px+) - default styles apply */
+
+/* ========================================
+   NEW APPOINTMENT FLOW STYLES
+   ======================================== */
+
+/* Phone Verification Step */
+.medos-phone-section {
+  margin-bottom: 1.5rem;
+}
+
+.medos-phone-row {
+  display: flex;
+  gap: 0.75rem;
+  align-items: flex-end;
+}
+
+.medos-phone-row .medos-form-group {
+  flex: 1;
+}
+
+.medos-phone-row .medos-form-group:first-child {
+  flex: 0 0 120px;
+}
+
+.medos-verified-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  background-color: #dcfce7;
+  color: #166534;
+  border-radius: 999px;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+/* Booking Option Step */
+.medos-booking-options {
   display: flex;
   flex-direction: column;
-  gap: 12px;
-  margin-top: 12px;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.medos-booking-options-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
 }
 
-.medos-enquiry-radio-label {
+.medos-option-card {
   display: flex;
+  flex-direction: column;
   align-items: center;
-  gap: 8px;
+  justify-content: center;
+  padding: 1.5rem;
+  border: 2px solid var(--medos-border-color);
+  border-radius: var(--medos-border-radius);
+  background-color: var(--medos-bg-color);
   cursor: pointer;
-  font-size: 14px;
+  transition: all 0.2s ease-in-out;
+  text-align: center;
+  gap: 0.75rem;
 }
 
-.medos-enquiry-radio-label input[type="radio"] {
-  cursor: pointer;
-  width: 16px;
-  height: 16px;
+.medos-option-card:hover {
+  border-color: var(--medos-primary-color);
+  background-color: var(--medos-bg-color-secondary);
 }
 
-.medos-enquiry-actions {
+.medos-option-card.selected {
+  border-color: var(--medos-primary-color);
+  background-color: rgba(59, 130, 246, 0.05);
+}
+
+.medos-option-icon {
   display: flex;
-  gap: 8px;
-  margin-top: 16px;
-  justify-content: flex-end;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background-color: var(--medos-bg-color-secondary);
+  color: var(--medos-primary-color);
 }
 
-.medos-enquiry-btn {
-  padding: 10px 14px;
-  border-radius: 8px;
+.medos-option-card.selected .medos-option-icon {
+  background-color: var(--medos-primary-color);
+  color: white;
+}
+
+.medos-option-title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--medos-text-color);
+}
+
+.medos-option-description {
+  font-size: 0.875rem;
+  color: var(--medos-text-color-secondary);
+}
+
+/* Session Pack Cards */
+.medos-session-packs-section {
+  margin-top: 1.5rem;
+}
+
+.medos-session-packs-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--medos-text-color);
+  margin-bottom: 0.75rem;
+}
+
+.medos-session-packs-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.medos-session-pack-card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem;
+  border: 2px solid var(--medos-border-color);
+  border-radius: var(--medos-border-radius);
+  background-color: var(--medos-bg-color);
   cursor: pointer;
+  transition: all 0.2s ease-in-out;
+}
+
+.medos-session-pack-card:hover {
+  border-color: var(--medos-primary-color);
+}
+
+.medos-session-pack-card.selected {
+  border-color: var(--medos-primary-color);
+  background-color: rgba(59, 130, 246, 0.05);
+}
+
+.medos-session-pack-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.medos-session-pack-name {
+  font-size: 0.875rem;
   font-weight: 600;
-  font-size: 14px;
+  color: var(--medos-text-color);
+}
+
+.medos-session-pack-remaining {
+  font-size: 0.75rem;
+  color: var(--medos-text-color-secondary);
+}
+
+.medos-session-pack-doctor {
+  font-size: 0.75rem;
+  color: var(--medos-text-color-secondary);
+}
+
+.medos-session-pack-expiry {
+  font-size: 0.75rem;
+  color: #dc2626;
+}
+
+.medos-session-pack-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem 0.5rem;
+  background-color: #dcfce7;
+  color: #166534;
+  border-radius: 999px;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+/* Package Explorer Step */
+.medos-package-explorer-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 1.5rem;
+}
+
+.medos-back-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
   border: none;
-  font-family: inherit;
+  background-color: var(--medos-bg-color-secondary);
+  border-radius: var(--medos-border-radius);
+  cursor: pointer;
+  color: var(--medos-text-color);
+  transition: background-color 0.2s;
 }
 
-.medos-enquiry-btn-primary {
-  background: #0b79f7;
-  color: #fff;
+.medos-back-btn:hover {
+  background-color: var(--medos-border-color);
 }
 
-.medos-enquiry-btn-primary:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
+.medos-packages-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 1rem;
 }
 
-.medos-enquiry-btn-secondary {
-  background: #fff;
-  color: #0b254a;
-  border: 1px solid #e6e9ef;
+.medos-package-card {
+  display: flex;
+  flex-direction: column;
+  padding: 1.25rem;
+  border: 2px solid var(--medos-border-color);
+  border-radius: var(--medos-border-radius);
+  background-color: var(--medos-bg-color);
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
 }
 
-.medos-enquiry-loading {
-  margin-bottom: 12px;
-  padding: 12px;
-  border-radius: 8px;
-  background: #fef3c7;
-  color: #92400e;
+.medos-package-card:hover {
+  border-color: var(--medos-primary-color);
+}
+
+.medos-package-card.selected {
+  border-color: var(--medos-primary-color);
+  background-color: rgba(59, 130, 246, 0.05);
+}
+
+.medos-package-name {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--medos-text-color);
+  margin-bottom: 0.5rem;
+}
+
+.medos-package-description {
+  font-size: 0.875rem;
+  color: var(--medos-text-color-secondary);
+  margin-bottom: 0.75rem;
+  line-height: 1.4;
+}
+
+.medos-package-details {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: auto;
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--medos-border-color);
+}
+
+.medos-package-sessions {
+  font-size: 0.75rem;
+  color: var(--medos-text-color-secondary);
+}
+
+.medos-package-price {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--medos-primary-color);
+}
+
+/* Patient Selection Step */
+.medos-patient-selection-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.medos-patient-selection-title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--medos-text-color);
+}
+
+.medos-add-patient-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--medos-primary-color);
+  background-color: transparent;
+  color: var(--medos-primary-color);
+  border-radius: var(--medos-border-radius);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.medos-add-patient-btn:hover {
+  background-color: var(--medos-primary-color);
+  color: white;
+}
+
+.medos-patients-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.medos-patient-card {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem;
+  border: 2px solid var(--medos-border-color);
+  border-radius: var(--medos-border-radius);
+  background-color: var(--medos-bg-color);
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+}
+
+.medos-patient-card:hover {
+  border-color: var(--medos-primary-color);
+}
+
+.medos-patient-card.selected {
+  border-color: var(--medos-primary-color);
+  background-color: rgba(59, 130, 246, 0.05);
+}
+
+.medos-patient-avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background-color: var(--medos-bg-color-secondary);
+  color: var(--medos-text-color-secondary);
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+
+.medos-patient-card.selected .medos-patient-avatar {
+  background-color: var(--medos-primary-color);
+  color: white;
+}
+
+.medos-patient-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  flex: 1;
+}
+
+.medos-patient-name {
+  font-size: 0.875rem;
   font-weight: 600;
+  color: var(--medos-text-color);
+}
+
+.medos-patient-details {
+  font-size: 0.75rem;
+  color: var(--medos-text-color-secondary);
+}
+
+.medos-patient-check {
+  display: none;
+  color: var(--medos-primary-color);
+}
+
+.medos-patient-card.selected .medos-patient-check {
+  display: block;
+}
+
+/* Appointment Summary Step */
+.medos-summary-section {
+  margin-bottom: 1.5rem;
+}
+
+.medos-summary-title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--medos-text-color);
+  margin-bottom: 1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.medos-summary-card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 1rem;
+  border: 1px solid var(--medos-border-color);
+  border-radius: var(--medos-border-radius);
+  background-color: var(--medos-bg-color-secondary);
+}
+
+.medos-summary-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.medos-summary-label {
+  font-size: 0.875rem;
+  color: var(--medos-text-color-secondary);
+}
+
+.medos-summary-value {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--medos-text-color);
+}
+
+.medos-summary-total {
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--medos-border-color);
+}
+
+.medos-summary-total .medos-summary-label,
+.medos-summary-total .medos-summary-value {
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.medos-session-remaining {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  background-color: #fef3c7;
+  border-radius: var(--medos-border-radius);
+  margin-top: 0.5rem;
+}
+
+.medos-remaining-label {
+  font-size: 0.875rem;
+  color: #92400e;
+}
+
+.medos-remaining-value {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #92400e;
+}
+
+/* Success Step */
+.medos-success-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   text-align: center;
+  padding: 2rem 0;
 }
 
-.medos-enquiry-error {
-  margin-bottom: 12px;
-  padding: 12px;
-  border-radius: 8px;
-  background: #fee2e2;
-  color: #991b1b;
+.medos-success-icon {
+  margin-bottom: 1.5rem;
+}
+
+.medos-success-title {
+  font-size: 1.5rem;
   font-weight: 600;
+  color: #166534;
+  margin-bottom: 0.5rem;
 }
 
-.medos-enquiry-success-card {
-  padding: 20px;
-  border-radius: 12px;
-  background: linear-gradient(90deg, #ecfdf5, #eff6ff);
+.medos-success-message {
+  font-size: 0.875rem;
+  color: var(--medos-text-color-secondary);
+  margin-bottom: 2rem;
+}
+
+.medos-success-details {
+  width: 100%;
+  max-width: 400px;
+  text-align: left;
+  padding: 1rem;
+  background-color: var(--medos-bg-color-secondary);
+  border-radius: var(--medos-border-radius);
+  margin-bottom: 1.5rem;
+}
+
+.medos-success-detail-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 0.5rem 0;
+  border-bottom: 1px solid var(--medos-border-color);
+}
+
+.medos-success-detail-row:last-child {
+  border-bottom: none;
+}
+
+/* Responsive styles for new components */
+@media (max-width: 767px) {
+  .medos-booking-options-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .medos-phone-row {
+    flex-direction: column;
+  }
+
+  .medos-phone-row .medos-form-group:first-child {
+    flex: 1;
+  }
+
+  .medos-packages-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .medos-patient-selection-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.75rem;
+  }
+
+  .medos-add-patient-btn {
+    width: 100%;
+    justify-content: center;
+  }
+}
+/* Patient Details Form Styles */
+.medos-section-card {
+  background-color: var(--medos-bg-color);
+  border: 1px solid var(--medos-border-color);
+  border-radius: var(--medos-border-radius);
+  margin-bottom: 1.5rem;
+  overflow: hidden;
+}
+
+.medos-section-header {
+  background-color: var(--medos-bg-color-secondary);
+  padding: 1rem 1.25rem;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  border-bottom: 1px solid var(--medos-border-color);
+}
+
+.medos-section-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--medos-text-color);
+  margin: 0;
+}
+
+.medos-section-body {
+  padding: 1.5rem;
+}
+
+.medos-section-description {
+  color: var(--medos-text-color-secondary);
+  margin-bottom: 1rem;
+  font-size: 0.875rem;
+}
+
+.medos-form-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+.medos-form-field {
+  display: flex;
+  flex-direction: column;
+}
+
+.medos-form-label {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--medos-text-color);
+  margin-bottom: 0.5rem;
+}
+
+.medos-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.75rem;
+  margin-top: 1.5rem;
+}
+
+.medos-btn {
+  padding: 0.75rem 1.25rem;
+  font-size: 1rem;
+  font-weight: 600;
+  border-radius: var(--medos-border-radius);
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.2s, transform 0.1s;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.medos-btn:active {
+  transform: translateY(1px);
+}
+
+.medos-btn-primary {
+  background-color: var(--medos-primary-color);
+  color: var(--medos-bg-color);
+}
+
+.medos-btn-primary:hover {
+  background-color: var(--medos-primary-color-hover);
+}
+
+.medos-btn-primary:disabled {
+  background-color: #9ca3af;
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.medos-btn-secondary {
+  background-color: var(--medos-bg-color);
+  color: var(--medos-text-color);
+  border: 1px solid var(--medos-border-color);
+}
+
+.medos-btn-secondary:hover {
+  background-color: var(--medos-bg-color-secondary);
+}
+
+.medos-btn-back {
+  background-color: transparent;
+  color: var(--medos-text-color-secondary);
+  border: none;
+  padding: 0.5rem;
+}
+
+.medos-btn-back:hover {
+  color: var(--medos-text-color);
+}
+
+/* Phone verification styles */
+.medos-phone-input-row {
+  display: flex;
+  gap: 0.75rem;
+  align-items: flex-end;
+}
+
+.medos-country-code-wrapper {
+  flex: 0 0 120px;
+}
+
+.medos-phone-wrapper {
+  flex: 1;
+}
+
+.medos-otp-input-wrapper {
+  margin-bottom: 1rem;
+}
+
+.medos-otp-input {
   text-align: center;
+  font-size: 1.125rem;
+  letter-spacing: 0.1em;
 }
 
-.medos-enquiry-success-icon {
-  font-size: 32px;
+.medos-link-btn {
+  background: none;
+  border: none;
+  color: var(--medos-primary-color);
+  cursor: pointer;
+  font-size: 0.875rem;
+  text-decoration: underline;
+}
+
+.medos-link-btn:hover {
+  color: var(--medos-primary-color-hover);
+}
+
+.medos-verified-badge {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
   color: #10b981;
-  margin-bottom: 8px;
+  font-weight: 500;
+  margin-bottom: 0.5rem;
 }
 
-.medos-enquiry-success-title {
-  font-weight: 700;
-  font-size: 16px;
-  margin-bottom: 6px;
+.medos-verified-number {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--medos-text-color);
 }
 
-.medos-enquiry-success-message {
-  font-size: 14px;
-  color: #374151;
+.medos-validation-error {
+  color: #ef4444;
+  font-size: 0.875rem;
+  margin-top: 0.25rem;
+}
+
+.medos-input-error {
+  border-color: #ef4444 !important;
+  box-shadow: 0 0 0 1px #ef4444 !important;
 }
 
+/* Responsive adjustments for patient details form */
+@media (max-width: 767px) {
+  .medos-form-row {
+    grid-template-columns: 1fr;
+    gap: 0.75rem;
+  }
+  
+  .medos-section-header {
+    padding: 0.75rem 1rem;
+  }
+  
+  .medos-section-body {
+    padding: 1rem;
+  }
+  
+  .medos-actions {
+    flex-direction: column-reverse;
+    align-items: stretch;
+  }
+  
+  .medos-btn {
+    width: 100%;
+    justify-content: center;
+  }
+  
+  .medos-phone-input-row {
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+  
+  .medos-country-code-wrapper {
+    flex: none;
+  }
+}