medos-sdk 1.1.12 → 1.1.14

package/dist/vanilla/widget.css

@@ -190,6 +190,117 @@
   font-weight: 600;
 }
 
+/* Grouped Slots Container */
+.medos-slots-container-grouped {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  margin-top: 1rem;
+}
+
+.medos-slot-period {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.medos-slot-period-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 0.75rem;
+  border-bottom: 2px solid var(--medos-border-color);
+}
+
+.medos-slot-period-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--medos-text-color);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.medos-slot-period-count {
+  font-size: 0.75rem;
+  color: var(--medos-text-color-secondary);
+  background-color: var(--medos-bg-color-secondary);
+  padding: 0.25rem 0.5rem;
+  border-radius: 999px;
+}
+
+.medos-slot-period-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  gap: 0.75rem;
+}
+
+/* Slot Button */
+.medos-slot-btn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.75rem 0.5rem;
+  border: 2px solid var(--medos-border-color);
+  border-radius: var(--medos-border-radius);
+  background-color: var(--medos-bg-color);
+  color: var(--medos-text-color);
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 1rem;
+  transition: all 0.2s ease-in-out;
+  position: relative;
+  min-height: 80px;
+}
+
+.medos-slot-btn:hover:not(:disabled) {
+  border-color: var(--medos-primary-color);
+  background-color: var(--medos-bg-color-secondary);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
+}
+
+.medos-slot-btn:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.medos-slot-btn.selected {
+  border-color: var(--medos-primary-color);
+  background-color: var(--medos-primary-color);
+  color: var(--medos-bg-color);
+  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+}
+
+.medos-slot-time-range {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+  font-weight: 600;
+  font-size: 1rem;
+}
+
+.medos-slot-start-time {
+  color: inherit;
+}
+
+.medos-slot-separator {
+  color: inherit;
+  opacity: 0.7;
+  font-size: 0.875rem;
+}
+
+.medos-slot-end-time {
+  color: inherit;
+}
+
+.medos-slot-duration {
+  font-size: 0.75rem;
+  opacity: 0.75;
+  font-weight: 400;
+}
+
 /* Success message */
 .medos-appointment-success-card {
   text-align: center;
@@ -443,6 +554,25 @@
     font-size: 11px;
   }
 
+  .medos-slot-period-grid {
+    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+    gap: 8px;
+  }
+
+  .medos-slot-btn {
+    min-height: 75px;
+    padding: 10px 6px;
+    gap: 4px;
+  }
+
+  .medos-slot-time-range {
+    font-size: 14px;
+  }
+
+  .medos-slot-duration {
+    font-size: 11px;
+  }
+
   /* Enquiry Form Mobile Styles */
   .medos-enquiry-container {
     padding: 12px;
@@ -480,6 +610,33 @@
   }
 }
 
+/* Extra small devices (up to 480px) */
+@media (max-width: 480px) {
+  .medos-slot-period-grid {
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  }
+
+  .medos-slot-btn {
+    min-height: 70px;
+    padding: 8px 4px;
+    gap: 4px;
+  }
+
+  .medos-slot-time-range {
+    font-size: 13px;
+  }
+
+  .medos-slot-duration {
+    font-size: 10px;
+  }
+
+  .medos-slot-period-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+  }
+}
+
 /* Tablet devices (768px to 1023px) */
 @media (min-width: 768px) and (max-width: 1023px) {
   .medos-appointment-card,