medos-sdk 1.1.7 → 1.1.8

package/dist/vanilla/widget.js

@@ -4173,6 +4173,28 @@
       },
   };
 
+  const COUNTRY_CODES = [
+      { code: "+91", label: "🇮🇳 +91" },
+      { code: "+1", label: "🇺🇸 +1" },
+      { code: "+44", label: "🇬🇧 +44" },
+      { code: "+86", label: "🇨🇳 +86" },
+      { code: "+81", label: "🇯🇵 +81" },
+  ];
+  const GENDER_OPTIONS = [
+      { value: "MALE", label: "Male" },
+      { value: "FEMALE", label: "Female" },
+      { value: "OTHER", label: "Other" },
+  ];
+  const BLOOD_GROUP_OPTIONS = [
+      { value: "A+", label: "A+" },
+      { value: "A-", label: "A-" },
+      { value: "B+", label: "B+" },
+      { value: "B-", label: "B-" },
+      { value: "AB+", label: "AB+" },
+      { value: "AB-", label: "AB-" },
+      { value: "O+", label: "O+" },
+      { value: "O-", label: "O-" },
+  ];
   const INITIAL_STATE = {
       step: 0,
       loading: false,
@@ -4231,10 +4253,1596 @@
       };
   };
 
+  const VanillaIcons = {
+      chevronLeft: (size = 20, className = "") => `
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="${size}"
+      height="${size}"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="medos-icon medos-icon-chevron-left ${className}"
+    >
+      <path d="m15 18-6-6 6-6" />
+    </svg>
+  `,
+      chevronRight: (size = 20, className = "") => `
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="${size}"
+      height="${size}"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="medos-icon medos-icon-chevron-right ${className}"
+    >
+      <path d="m9 18 6-6-6-6" />
+    </svg>
+  `,
+      chevronDown: (size = 16, className = "") => `
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="${size}"
+      height="${size}"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="medos-icon medos-icon-chevron-down ${className}"
+    >
+      <polyline points="6 9 12 15 18 9"></polyline>
+    </svg>
+  `,
+      check: (size = 16, className = "") => `
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="${size}"
+      height="${size}"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="medos-icon medos-icon-check ${className}"
+    >
+      <polyline points="20 6 9 17 4 12"></polyline>
+    </svg>
+  `,
+      consultationType: (size = 18) => `
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="${size}"
+      height="${Math.round((size * 20) / 18)}"
+      viewBox="0 0 18 20"
+      fill="none"
+      class="medos-icon medos-icon-consultation"
+    >
+      <path
+        d="M2 20C1.45 20 0.979167 19.8042 0.5875 19.4125C0.195833 19.0208 0 18.55 0 18V4C0 3.45 0.195833 2.97917 0.5875 2.5875C0.979167 2.19583 1.45 2 2 2H3V0H5V2H13V0H15V2H16C16.55 2 17.0208 2.19583 17.4125 2.5875C17.8042 2.97917 18 3.45 18 4V18C18 18.55 17.8042 19.0208 17.4125 19.4125C17.0208 19.8042 16.55 20 16 20H2ZM2 18H16V8H2V18ZM2 6H16V4H2V6ZM4 12V10H14V12H4ZM4 16V14H11V16H4Z"
+        fill="currentColor"
+      />
+    </svg>
+  `,
+      dateTime: (size = 18) => `
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="${size}"
+      height="${Math.round((size * 20) / 18)}"
+      viewBox="0 0 18 20"
+      fill="none"
+      class="medos-icon medos-icon-datetime"
+    >
+      <path
+        d="M2 20C1.45 20 0.979167 19.8042 0.5875 19.4125C0.195833 19.0208 0 18.55 0 18V4C0 3.45 0.195833 2.97917 0.5875 2.5875C0.979167 2.19583 1.45 2 2 2H3V0H5V2H13V0H15V2H16C16.55 2 17.0208 2.19583 17.4125 2.5875C17.8042 2.97917 18 3.45 18 4V18C18 18.55 17.8042 19.0208 17.4125 19.4125C17.0208 19.8042 16.55 20 16 20H2ZM2 18H16V8H2V18ZM2 6H16V4H2V6ZM4 12V10H14V12H4ZM4 16V14H11V16H4Z"
+        fill="currentColor"
+      />
+    </svg>
+  `,
+      mapPin: (size = 14) => `
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="${size}"
+      height="${Math.round((size * 20) / 14)}"
+      viewBox="0 0 14 20"
+      fill="none"
+      class="medos-icon medos-icon-map-pin"
+    >
+      <path
+        d="M7 20C5.23333 20 3.79167 19.7208 2.675 19.1625C1.55833 18.6042 1 17.8833 1 17C1 16.6 1.12083 16.2292 1.3625 15.8875C1.60417 15.5458 1.94167 15.25 2.375 15L3.95 16.475C3.8 16.5417 3.6375 16.6167 3.4625 16.7C3.2875 16.7833 3.15 16.8833 3.05 17C3.26667 17.2667 3.76667 17.5 4.55 17.7C5.33333 17.9 6.15 18 7 18C7.85 18 8.67083 17.9 9.4625 17.7C10.2542 17.5 10.7583 17.2667 10.975 17C10.8583 16.8667 10.7083 16.7583 10.525 16.675C10.3417 16.5917 10.1667 16.5167 10 16.45L11.55 14.95C12.0167 15.2167 12.375 15.5208 12.625 15.8625C12.875 16.2042 13 16.5833 13 17C13 17.8833 12.4417 18.6042 11.325 19.1625C10.2083 19.7208 8.76667 20 7 20ZM7.025 14.5C8.675 13.2833 9.91667 12.0625 10.75 10.8375C11.5833 9.6125 12 8.38333 12 7.15C12 5.45 11.4583 4.16667 10.375 3.3C9.29167 2.43333 8.16667 2 7 2C5.83333 2 4.70833 2.43333 3.625 3.3C2.54167 4.16667 2 5.45 2 7.15C2 8.26667 2.40833 9.42917 3.225 10.6375C4.04167 11.8458 5.30833 13.1333 7.025 14.5ZM7 17C4.65 15.2667 2.89583 13.5833 1.7375 11.95C0.579167 10.3167 0 8.71667 0 7.15C0 5.96667 0.2125 4.92917 0.6375 4.0375C1.0625 3.14583 1.60833 2.4 2.275 1.8C2.94167 1.2 3.69167 0.75 4.525 0.45C5.35833 0.15 6.18333 0 7 0C7.81667 0 8.64167 0.15 9.475 0.45C10.3083 0.75 11.0583 1.2 11.725 1.8C12.3917 2.4 12.9375 3.14583 13.3625 4.0375C13.7875 4.92917 14 5.96667 14 7.15C14 8.71667 13.4208 10.3167 12.2625 11.95C11.1042 13.5833 9.35 15.2667 7 17ZM7 9C7.55 9 8.02083 8.80417 8.4125 8.4125C8.80417 8.02083 9 7.55 9 7C9 6.45 8.80417 5.97917 8.4125 5.5875C8.02083 5.19583 7.55 5 7 5C6.45 5 5.97917 5.19583 5.5875 5.5875C5.19583 5.97917 5 6.45 5 7C5 7.55 5.19583 8.02083 5.5875 8.4125C5.97917 8.80417 6.45 9 7 9Z"
+        fill="currentColor"
+      />
+    </svg>
+  `,
+      user: (size = 20) => `
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="${size}"
+      height="${size}"
+      viewBox="0 0 20 20"
+      fill="none"
+      class="medos-icon medos-icon-user"
+    >
+      <path
+        d="M14 13C13.1667 13 12.4583 12.7083 11.875 12.125C11.2917 11.5417 11 10.8333 11 10C11 9.16667 11.2917 8.45833 11.875 7.875C12.4583 7.29167 13.1667 7 14 7C14.8333 7 15.5417 7.29167 16.125 7.875C16.7083 8.45833 17 9.16667 17 10C17 10.8333 16.7083 11.5417 16.125 12.125C15.5417 12.7083 14.8333 13 14 13ZM14 11C14.2833 11 14.5208 10.9042 14.7125 10.7125C14.9042 10.5208 15 10.2833 15 10C15 9.71667 14.9042 9.47917 14.7125 9.2875C14.5208 9.09583 14.2833 9 14 9C13.7167 9 13.4792 9.09583 13.2875 9.2875C13.0958 9.47917 13 9.71667 13 10C13 10.2833 13.0958 10.5208 13.2875 10.7125C13.4792 10.9042 13.7167 11 14 11ZM8 20V17.1C8 16.75 8.08333 16.4208 8.25 16.1125C8.41667 15.8042 8.65 15.5583 8.95 15.375C9.48333 15.0583 10.0458 14.7958 10.6375 14.5875C11.2292 14.3792 11.8333 14.225 12.45 14.125L14 16L15.55 14.125C16.1667 14.225 16.7667 14.3792 17.35 14.5875C17.9333 14.7958 18.4917 15.0583 19.025 15.375C19.325 15.5583 19.5625 15.8042 19.7375 16.1125C19.9125 16.4208 20 16.75 20 17.1V20H8ZM9.975 18H13.05L11.7 16.35C11.4 16.4333 11.1083 16.5417 10.825 16.675C10.5417 16.8083 10.2583 16.95 9.975 17.1V18ZM14.95 18H18V17.1C17.7333 16.9333 17.4583 16.7875 17.175 16.6625C16.8917 16.5375 16.6 16.4333 16.3 16.35L14.95 18ZM2 18C1.45 18 0.979167 17.8042 0.5875 17.4125C0.195833 17.0208 0 16.55 0 16V2C0 1.45 0.195833 0.979167 0.5875 0.5875C0.979167 0.195833 1.45 0 2 0H16C16.55 0 17.0208 0.195833 17.4125 0.5875C17.8042 0.979167 18 1.45 18 2V7C17.7333 6.66667 17.4417 6.35 17.125 6.05C16.8083 5.75 16.4333 5.55 16 5.45V2H2V16H6.15C6.1 16.1833 6.0625 16.3667 6.0375 16.55C6.0125 16.7333 6 16.9167 6 17.1V18H2ZM4 6H11C11.4333 5.66667 11.9083 5.41667 12.425 5.25C12.9417 5.08333 13.4667 5 14 5V4H4V6ZM4 10H9C9 9.65 9.0375 9.30833 9.1125 8.975C9.1875 8.64167 9.29167 8.31667 9.425 8H4V10ZM4 14H7.45C7.63333 13.85 7.82917 13.7167 8.0375 13.6C8.24583 13.4833 8.45833 13.375 8.675 13.275V12H4V14ZM2 16V2V5.425V5V16Z"
+        fill="currentColor"
+      />
+    </svg>
+  `,
+      paymentMethod: (size = 21) => `
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="${size}"
+      height="${Math.round((size * 15) / 21)}"
+      viewBox="0 0 21 15"
+      fill="none"
+      class="medos-icon medos-icon-payment"
+    >
+      <path
+        d="M11.9038 8.096C11.2051 8.096 10.6138 7.854 10.1298 7.37C9.64575 6.886 9.40375 6.29467 9.40375 5.596C9.40375 4.89733 9.64575 4.306 10.1298 3.822C10.6138 3.338 11.2051 3.096 11.9038 3.096C12.6024 3.096 13.1938 3.338 13.6778 3.822C14.1618 4.306 14.4038 4.89733 14.4038 5.596C14.4038 6.29467 14.1618 6.886 13.6778 7.37C13.1938 7.854 12.6024 8.096 11.9038 8.096ZM5.3075 11.1923C4.8105 11.1923 4.385 11.0153 4.031 10.6613C3.677 10.3073 3.5 9.88167 3.5 9.3845V1.8075C3.5 1.3105 3.677 0.885 4.031 0.531C4.385 0.177 4.8105 0 5.3075 0H18.4998C18.9969 0 19.4225 0.177 19.7765 0.531C20.1305 0.885 20.3075 1.3105 20.3075 1.8075V9.3845C20.3075 9.88167 20.1305 10.3073 19.7765 10.6613C19.4225 11.0153 18.9969 11.1923 18.4998 11.1923H5.3075ZM6.8075 9.69225H17C17 9.19358 17.177 8.76758 17.531 8.41425C17.885 8.06108 18.3105 7.8845 18.8075 7.8845V3.3075C18.3088 3.3075 17.8829 3.1305 17.5298 2.7765C17.1766 2.4225 17 1.997 17 1.5H6.8075C6.8075 1.99867 6.6305 2.42458 6.2765 2.77775C5.9225 3.13092 5.497 3.3075 5 3.3075V7.8845C5.49867 7.8845 5.92458 8.0615 6.27775 8.4155C6.63092 8.7695 6.8075 9.19508 6.8075 9.69225ZM17.3267 14.6923H1.80775C1.31058 14.6923 0.885 14.5153 0.531 14.1613C0.177 13.8073 0 13.3817 0 12.8845V2.98075H1.5V12.8845C1.5 12.9613 1.532 13.0318 1.596 13.096C1.66017 13.1602 1.73075 13.1923 1.80775 13.1923H17.3267V14.6923ZM5.3075 9.69225H5V1.5H5.3075C5.22417 1.5 5.15208 1.53042 5.09125 1.59125C5.03042 1.65208 5 1.72417 5 1.8075V9.3845C5 9.46783 5.03042 9.53992 5.09125 9.60075C5.15208 9.66175 5.22417 9.69225 5.3075 9.69225Z"
+        fill="currentColor"
+      />
+    </svg>
+  `,
+      successBadge: (size = 64, shapeColor = "#006E0F", checkColor = "white") => `
+    <div style="position: relative; display: inline-block;">
+      <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 41 41" fill="none">
+        <path
+          d="M31.1309 4.90254C32.388 4.98797 33.0166 5.03069 33.5247 5.25288C34.2598 5.57438 34.8467 6.16126 35.1682 6.8964C35.3904 7.40445 35.4331 8.03302 35.5185 9.29016L35.7135 12.159C35.748 12.6674 35.7653 12.9217 35.8206 13.1645C35.9004 13.5154 36.0391 13.8503 36.2308 14.1549C36.3634 14.3657 36.531 14.5576 36.8661 14.9416L38.7568 17.108C39.5853 18.0574 39.9996 18.532 40.2017 19.0484C40.4942 19.7955 40.4942 20.6255 40.2017 21.3727C39.9996 21.889 39.5853 22.3637 38.7568 23.313L36.8661 25.4795C36.531 25.8634 36.3634 26.0554 36.2308 26.2662C36.0391 26.5708 35.9004 26.9056 35.8206 27.2566C35.7653 27.4994 35.748 27.7536 35.7135 28.2621L35.5185 31.1309C35.4331 32.388 35.3904 33.0166 35.1682 33.5247C34.8467 34.2598 34.2598 34.8467 33.5247 35.1682C33.0166 35.3904 32.388 35.4331 31.1309 35.5185L28.2621 35.7135C27.7536 35.748 27.4994 35.7653 27.2566 35.8206C26.9056 35.9004 26.5708 36.0391 26.2662 36.2308C26.0554 36.3634 25.8634 36.531 25.4795 36.8661L23.313 38.7568C22.3637 39.5853 21.889 39.9996 21.3727 40.2017C20.6255 40.4942 19.7955 40.4942 19.0484 40.2017C18.532 39.9996 18.0574 39.5853 17.108 38.7568L14.9416 36.8661C14.5576 36.531 14.3657 36.3634 14.1549 36.2308C13.8503 36.0391 13.5154 35.9004 13.1645 35.8206C12.9217 35.7653 12.6674 35.748 12.159 35.7135L9.29016 35.5185C8.03302 35.4331 7.40445 35.3904 6.8964 35.1682C6.16126 34.8467 5.57438 34.2598 5.25288 33.5247C5.03069 33.0166 4.98797 32.388 4.90254 31.1309L4.70759 28.2621C4.67304 27.7536 4.65576 27.4994 4.60049 27.2566C4.52063 26.9056 4.38193 26.5708 4.19028 26.2662C4.05764 26.0554 3.89009 25.8634 3.555 25.4795L1.66428 23.313C0.83576 22.3637 0.421499 21.889 0.219363 21.3727C-0.073121 20.6255 -0.0731209 19.7955 0.219363 19.0484C0.421499 18.532 0.83576 18.0574 1.66428 17.108L3.555 14.9416C3.89009 14.5576 4.05764 14.3657 4.19027 14.1549C4.38193 13.8503 4.52063 13.5154 4.60049 13.1645C4.65576 12.9217 4.67304 12.6674 4.70759 12.159L4.90254 9.29016C4.98797 8.03302 5.03069 7.40445 5.25288 6.8964C5.57438 6.16126 6.16126 5.57438 6.8964 5.25288C7.40445 5.03069 8.03302 4.98797 9.29016 4.90254L12.159 4.70759C12.6674 4.67304 12.9217 4.65577 13.1645 4.6005C13.5154 4.52063 13.8503 4.38193 14.1549 4.19028C14.3657 4.05764 14.5576 3.89009 14.9416 3.555L17.108 1.66428C18.0574 0.83576 18.532 0.421499 19.0484 0.219363C19.7955 -0.073121 20.6255 -0.073121 21.3727 0.219363C21.889 0.421499 22.3637 0.83576 23.313 1.66428L25.4795 3.555C25.8634 3.89009 26.0554 4.05764 26.2662 4.19028C26.5708 4.38193 26.9056 4.52063 27.2566 4.6005C27.4994 4.65577 27.7536 4.67304 28.2621 4.70759L31.1309 4.90254Z"
+          fill="${shapeColor}"
+        />
+      </svg>
+      <svg xmlns="http://www.w3.org/2000/svg" width="${Math.round((size * 16) / 41)}" height="${Math.round((size * 12) / 41)}" viewBox="0 0 16 12" fill="none" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
+        <path
+          d="M5.472 11.544L0 6.072L1.368 4.704L5.472 8.808L14.28 0L15.648 1.368L5.472 11.544Z"
+          fill="${checkColor}"
+        />
+      </svg>
+    </div>
+  `,
+      phone: (size = 20) => `
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="${size}"
+      height="${size}"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="medos-icon medos-icon-phone"
+    >
+      <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
+    </svg>
+  `,
+      mail: (size = 20) => `
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="${size}"
+      height="${size}"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="medos-icon medos-icon-mail"
+    >
+      <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
+      <polyline points="22,6 12,13 2,6"></polyline>
+    </svg>
+  `,
+      clock: (size = 20) => `
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="${size}"
+      height="${size}"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="medos-icon medos-icon-clock"
+    >
+      <circle cx="12" cy="12" r="10"></circle>
+      <polyline points="12 6 12 12 16 14"></polyline>
+    </svg>
+  `,
+      medosLogo: (width = 120, height = 114) => `
+    <svg
+      width="${width}"
+      height="${height}"
+      viewBox="0 0 250 236"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      class="medos-icon medos-logo"
+    >
+      <g filter="url(#filter0_d_4215_30142)">
+        <path
+          d="M14.2067 123.859L21.2068 123.862L38.2027 67.687L55.7021 152.687L77.707 60.6836L93.7021 123.863L239.202 123.863"
+          stroke="#27903F"
+          stroke-width="4"
+          stroke-linecap="round"
+        />
+      </g>
+      <path
+        d="M111.695 118.797C108.857 118.797 106.408 118.171 104.35 116.918C102.305 115.652 100.726 113.888 99.6136 111.625C98.5142 109.35 97.9645 106.703 97.9645 103.686C97.9645 100.669 98.5142 98.0103 99.6136 95.7092C100.726 93.3952 102.273 91.5927 104.254 90.3015C106.249 88.9975 108.575 88.3455 111.234 88.3455C112.768 88.3455 114.283 88.6012 115.779 89.1126C117.275 89.6239 118.636 90.4549 119.864 91.6055C121.091 92.7433 122.069 94.2518 122.798 96.131C123.526 98.0103 123.891 100.324 123.891 103.073V104.99H101.186V101.078H119.288C119.288 99.4165 118.956 97.9336 118.291 96.6296C117.639 95.3256 116.706 94.2965 115.491 93.5423C114.29 92.788 112.871 92.4109 111.234 92.4109C109.432 92.4109 107.872 92.8583 106.555 93.7532C105.251 94.6353 104.248 95.7859 103.545 97.2049C102.842 98.6239 102.49 100.145 102.49 101.769V104.377C102.49 106.601 102.874 108.487 103.641 110.034C104.42 111.568 105.501 112.738 106.881 113.543C108.262 114.336 109.866 114.732 111.695 114.732C112.884 114.732 113.957 114.566 114.916 114.233C115.888 113.888 116.725 113.377 117.428 112.699C118.131 112.009 118.675 111.152 119.058 110.13L123.43 111.357C122.97 112.84 122.197 114.144 121.11 115.269C120.023 116.381 118.681 117.25 117.083 117.877C115.485 118.49 113.689 118.797 111.695 118.797ZM141.897 118.797C139.442 118.797 137.276 118.177 135.396 116.937C133.517 115.684 132.047 113.92 130.986 111.645C129.925 109.356 129.394 106.652 129.394 103.533C129.394 100.439 129.925 97.7546 130.986 95.479C132.047 93.2035 133.523 91.4457 135.415 90.2056C137.308 88.9656 139.494 88.3455 141.974 88.3455C143.891 88.3455 145.406 88.6651 146.518 89.3043C147.643 89.9308 148.5 90.6467 149.088 91.4521C149.689 92.2447 150.156 92.8967 150.488 93.408H150.871V78.9109H155.397V118.184H151.025V113.658H150.488C150.156 114.195 149.683 114.873 149.069 115.691C148.455 116.496 147.58 117.218 146.442 117.858C145.304 118.484 143.789 118.797 141.897 118.797ZM142.511 114.732C144.326 114.732 145.86 114.259 147.113 113.313C148.366 112.354 149.318 111.031 149.97 109.343C150.622 107.643 150.948 105.681 150.948 103.456C150.948 101.257 150.629 99.3335 149.989 97.6843C149.35 96.0224 148.404 94.7312 147.151 93.8107C145.898 92.8775 144.352 92.4109 142.511 92.4109C140.593 92.4109 138.995 92.9031 137.717 93.8874C136.451 94.859 135.499 96.1822 134.859 97.8569C134.233 99.5188 133.92 101.385 133.92 103.456C133.92 105.553 134.239 107.458 134.879 109.171C135.531 110.871 136.489 112.226 137.755 113.236C139.033 114.233 140.619 114.732 142.511 114.732ZM199.138 98.5472C199.138 102.779 198.345 106.403 196.76 109.42C195.188 112.424 193.04 114.725 190.317 116.324C187.607 117.922 184.532 118.721 181.093 118.721C177.654 118.721 174.573 117.922 171.85 116.324C169.14 114.713 166.992 112.405 165.407 109.401C163.835 106.384 163.048 102.766 163.048 98.5472C163.048 94.3157 163.835 90.6978 165.407 87.6935C166.992 84.6765 169.14 82.369 171.85 80.7709C174.573 79.1729 177.654 78.3739 181.093 78.3739C184.532 78.3739 187.607 79.1729 190.317 80.7709C193.04 82.369 195.188 84.6765 196.76 87.6935C198.345 90.6978 199.138 94.3157 199.138 98.5472ZM191.985 98.5472C191.985 95.5685 191.518 93.0565 190.585 91.011C189.665 88.9528 188.386 87.3995 186.75 86.3512C185.114 85.2901 183.228 84.7596 181.093 84.7596C178.958 84.7596 177.072 85.2901 175.436 86.3512C173.8 87.3995 172.515 88.9528 171.582 91.011C170.661 93.0565 170.201 95.5685 170.201 98.5472C170.201 101.526 170.661 104.044 171.582 106.103C172.515 108.148 173.8 109.701 175.436 110.762C177.072 111.811 178.958 112.335 181.093 112.335C183.228 112.335 185.114 111.811 186.75 110.762C188.386 109.701 189.665 108.148 190.585 106.103C191.518 104.044 191.985 101.526 191.985 98.5472ZM227.207 89.707C227.028 88.0323 226.274 86.7283 224.944 85.7951C223.627 84.8619 221.914 84.3952 219.805 84.3952C218.322 84.3952 217.05 84.619 215.989 85.0664C214.928 85.5138 214.116 86.1211 213.553 86.8881C212.991 87.6552 212.703 88.5309 212.691 89.5153C212.691 90.3335 212.876 91.043 213.247 91.6438C213.63 92.2447 214.148 92.756 214.8 93.1779C215.452 93.587 216.174 93.9322 216.967 94.2134C217.759 94.4947 218.558 94.7312 219.364 94.9229L223.046 95.8434C224.529 96.1886 225.954 96.6552 227.322 97.2433C228.703 97.8313 229.936 98.5728 231.023 99.4677C232.122 100.363 232.992 101.443 233.631 102.708C234.27 103.974 234.59 105.457 234.59 107.157C234.59 109.458 234.002 111.485 232.825 113.236C231.649 114.975 229.949 116.336 227.725 117.321C225.513 118.292 222.835 118.778 219.69 118.778C216.634 118.778 213.982 118.305 211.732 117.359C209.494 116.413 207.743 115.032 206.477 113.217C205.225 111.402 204.547 109.19 204.445 106.582H211.444C211.546 107.95 211.968 109.088 212.71 109.995C213.451 110.903 214.416 111.581 215.605 112.028C216.807 112.475 218.149 112.699 219.632 112.699C221.179 112.699 222.534 112.469 223.698 112.009C224.874 111.536 225.794 110.884 226.459 110.053C227.124 109.209 227.463 108.225 227.475 107.1C227.463 106.077 227.162 105.233 226.574 104.569C225.986 103.891 225.161 103.328 224.1 102.881C223.052 102.421 221.825 102.012 220.419 101.654L215.95 100.503C212.716 99.6722 210.159 98.413 208.28 96.7255C206.414 95.0252 205.48 92.7688 205.48 89.9563C205.48 87.6424 206.107 85.6161 207.36 83.8775C208.625 82.1388 210.345 80.7901 212.518 79.8313C214.691 78.8597 217.152 78.3739 219.901 78.3739C222.688 78.3739 225.129 78.8597 227.226 79.8313C229.335 80.7901 230.991 82.1261 232.193 83.8391C233.394 85.5394 234.014 87.4954 234.053 89.707H227.207Z"
+        fill="#27903F"
+      />
+      <defs>
+        <filter
+          id="filter0_d_4215_30142"
+          x="12.2031"
+          y="60.1914"
+          width="237"
+          height="100.961"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dx="4" dy="4" />
+          <feGaussianBlur stdDeviation="2" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 0.152941 0 0 0 0 0.564706 0 0 0 0 0.247059 0 0 0 0.12 0"
+          />
+          <feBlend
+            mode="normal"
+            in2="BackgroundImageFix"
+            result="effect1_dropShadow_4215_30142"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect1_dropShadow_4215_30142"
+            result="shape"
+          />
+        </filter>
+      </defs>
+    </svg>
+  `,
+  };
+
+  function injectSelectStyles() {
+      if (typeof document === "undefined")
+          return;
+      const styleId = "medos-vanilla-select-styles";
+      if (document.getElementById(styleId))
+          return;
+      const styleElement = document.createElement("style");
+      styleElement.id = styleId;
+      styleElement.innerHTML = `
+    /* Container */
+    .medos-select-container {
+      position: relative;
+      display: inline-block;
+      width: 100%;
+    }
+
+    /* Trigger Button */
+    .medos-select-trigger {
+      display: flex;
+      width: 100%;
+      align-items: center;
+      justify-content: space-between;
+      white-space: nowrap;
+      border-radius: var(--medos-radius-md, 8px);
+      border: 1px solid var(--medos-color-border, #e5e7eb);
+      background-color: var(--medos-color-surface, #fff);
+      padding: var(--medos-spacing-sm, 10px) var(--medos-spacing-md, 12px);
+      font-size: var(--medos-typography-font-size-sm, 14px);
+      line-height: 1.5;
+      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+      transition: var(--medos-transition-normal, 200ms ease-in-out);
+      cursor: pointer;
+      outline: none;
+      font-family: inherit;
+      text-align: left;
+      box-sizing: border-box;
+      color: var(--medos-color-text, #111827);
+    }
+
+    .medos-select-trigger:hover:not(:disabled) {
+      border-color: var(--medos-color-border-hover, #d1d5db);
+    }
+
+    .medos-select-trigger:focus:not(:disabled) {
+      border-color: var(--medos-color-primary, #27903f);
+      box-shadow: 0 0 0 2px rgba(39, 144, 63, 0.15);
+    }
+
+    .medos-select-trigger:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+      background-color: #f9fafb;
+    }
+
+    .medos-select-trigger-error {
+      border-color: #ef4444;
+    }
+
+    .medos-select-trigger-error:focus {
+      border-color: #ef4444;
+      box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
+    }
+
+    .medos-select-trigger[aria-expanded="true"] {
+      border-color: var(--medos-color-primary, #27903f);
+      box-shadow: 0 0 0 2px rgba(39, 144, 63, 0.15);
+    }
+
+    /* Select Value */
+    .medos-select-value {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .medos-select-placeholder {
+      color: #94a3b8;
+    }
+
+    /* Select Icon */
+    .medos-select-icon {
+      height: 16px;
+      width: 16px;
+      opacity: 0.5;
+      flex-shrink: 0;
+      margin-left: 8px;
+      transition: transform 0.2s;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .medos-select-trigger[aria-expanded="true"] .medos-select-icon {
+      transform: rotate(180deg);
+    }
+
+    .medos-select-icon-error {
+      color: #ef4444;
+    }
+
+    /* Content Dropdown - Portal */
+    .medos-select-content {
+      position: absolute;
+      z-index: 99999;
+      overflow: hidden;
+      border-radius: 6px;
+      border: 1px solid #e2e8f0;
+      background-color: #ffffff;
+      color: #1e293b;
+      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+      animation: medos-select-show 0.15s ease-out;
+      box-sizing: border-box;
+    }
+
+    @keyframes medos-select-show {
+      from {
+        opacity: 0;
+        transform: translateY(-4px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    /* Viewport */
+    .medos-select-viewport {
+      padding: 4px;
+      max-height: 256px;
+      overflow-y: auto;
+    }
+
+    /* Select Item */
+    .medos-select-item {
+      position: relative;
+      display: flex;
+      width: 100%;
+      cursor: pointer;
+      user-select: none;
+      align-items: center;
+      border-radius: 4px;
+      padding: 8px 8px 8px 32px;
+      font-size: 14px;
+      outline: none;
+      transition: background-color 0.1s ease;
+      box-sizing: border-box;
+      color: #1e293b;
+    }
+
+    .medos-select-item:hover:not(.medos-select-item-disabled) {
+      background-color: #f1f5f9;
+    }
+
+    .medos-select-item:focus {
+      background-color: #f1f5f9;
+    }
+
+    .medos-select-item-selected {
+      background-color: #f3f4f6;
+    }
+
+    .medos-select-item-disabled {
+      pointer-events: none;
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    /* Item Indicator */
+    .medos-select-item-indicator {
+      position: absolute;
+      left: 8px;
+      display: flex;
+      height: 14px;
+      width: 14px;
+      align-items: center;
+      justify-content: center;
+      color: var(--medos-color-primary, #27903f);
+    }
+
+    /* Item Text */
+    .medos-select-item-text {
+      flex: 1;
+    }
+
+    /* Scrollbar styling */
+    .medos-select-viewport::-webkit-scrollbar {
+      width: 8px;
+    }
+
+    .medos-select-viewport::-webkit-scrollbar-track {
+      background: #f1f5f9;
+      border-radius: 4px;
+    }
+
+    .medos-select-viewport::-webkit-scrollbar-thumb {
+      background: #cbd5e1;
+      border-radius: 4px;
+    }
+
+    .medos-select-viewport::-webkit-scrollbar-thumb:hover {
+      background: #94a3b8;
+    }
+  `;
+      document.head.appendChild(styleElement);
+  }
+  class VanillaSelect {
+      constructor(container, options, config = {}) {
+          this.selectedValue = "";
+          this.selectedLabel = "";
+          this.isOpen = false;
+          this.triggerElement = null;
+          this.contentElement = null;
+          this.handleDocumentClick = null;
+          this.handleWindowResize = null;
+          this.handleWindowScroll = null;
+          if (typeof container === "string") {
+              const el = document.getElementById(container);
+              if (!el) {
+                  throw new Error(`Container element with id "${container}" not found`);
+              }
+              this.container = el;
+          }
+          else {
+              this.container = container;
+          }
+          this.options = options;
+          this.config = {
+              placeholder: "Select...",
+              disabled: false,
+              error: false,
+              ...config,
+          };
+          injectSelectStyles();
+          this.renderTrigger();
+      }
+      renderTrigger() {
+          const displayValue = this.selectedLabel || this.config.placeholder;
+          const isPlaceholder = !this.selectedLabel;
+          this.container.innerHTML = "";
+          this.container.classList.add("medos-select-container");
+          const button = document.createElement("button");
+          button.type = "button";
+          button.className = `medos-select-trigger ${this.config.error ? "medos-select-trigger-error" : ""}`;
+          button.setAttribute("aria-expanded", this.isOpen.toString());
+          button.setAttribute("aria-haspopup", "listbox");
+          if (this.config.disabled) {
+              button.disabled = true;
+          }
+          button.innerHTML = `
+      <span class="medos-select-value ${isPlaceholder ? "medos-select-placeholder" : ""}">
+        ${this.escapeHtml(displayValue || "")}
+      </span>
+      <span class="medos-select-icon ${this.config.error ? "medos-select-icon-error" : ""}">
+        ${VanillaIcons.chevronDown(16)}
+      </span>
+    `;
+          this.container.appendChild(button);
+          this.triggerElement = button;
+          this.attachTriggerEvents();
+      }
+      attachTriggerEvents() {
+          if (!this.triggerElement)
+              return;
+          this.triggerElement.addEventListener("click", (e) => {
+              e.preventDefault();
+              if (!this.config.disabled) {
+                  this.toggleOpen();
+              }
+          });
+          this.triggerElement.addEventListener("keydown", (e) => {
+              if (this.config.disabled)
+                  return;
+              if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
+                  e.preventDefault();
+                  this.open();
+              }
+          });
+      }
+      toggleOpen() {
+          if (this.isOpen) {
+              this.close();
+          }
+          else {
+              this.open();
+          }
+      }
+      open() {
+          if (this.isOpen || this.config.disabled)
+              return;
+          this.isOpen = true;
+          if (this.triggerElement) {
+              this.triggerElement.setAttribute("aria-expanded", "true");
+          }
+          this.createPortal();
+          this.attachPortalEvents();
+          setTimeout(() => {
+              if (this.contentElement) {
+                  const selectedItem = this.contentElement.querySelector(".medos-select-item-selected");
+                  const firstItem = this.contentElement.querySelector(".medos-select-item:not(.medos-select-item-disabled)");
+                  (selectedItem || firstItem)?.focus();
+              }
+          }, 0);
+      }
+      close() {
+          if (!this.isOpen)
+              return;
+          this.isOpen = false;
+          if (this.triggerElement) {
+              this.triggerElement.setAttribute("aria-expanded", "false");
+              this.triggerElement.focus();
+          }
+          this.removePortal();
+          this.detachPortalEvents();
+      }
+      createPortal() {
+          if (!this.triggerElement)
+              return;
+          const rect = this.triggerElement.getBoundingClientRect();
+          const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+          const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+          this.contentElement = document.createElement("div");
+          this.contentElement.className = "medos-select-content";
+          this.contentElement.setAttribute("role", "listbox");
+          this.contentElement.style.top = `${rect.bottom + scrollTop + 4}px`;
+          this.contentElement.style.left = `${rect.left + scrollLeft}px`;
+          this.contentElement.style.width = `${rect.width}px`;
+          this.contentElement.innerHTML = `
+      <div class="medos-select-viewport">
+        ${this.options
+            .map((option) => `
+          <div
+            class="medos-select-item ${this.selectedValue === option.value
+            ? "medos-select-item-selected"
+            : ""} ${option.disabled ? "medos-select-item-disabled" : ""}"
+            role="option"
+            aria-selected="${this.selectedValue === option.value}"
+            data-value="${this.escapeHtml(option.value)}"
+            data-label="${this.escapeHtml(option.label)}"
+            ${option.disabled ? 'data-disabled="true"' : ""}
+            tabindex="${option.disabled ? "-1" : "0"}"
+          >
+            ${this.selectedValue === option.value
+            ? `
+              <span class="medos-select-item-indicator">
+                ${VanillaIcons.check(14)}
+              </span>
+            `
+            : ""}
+            <span class="medos-select-item-text">${this.escapeHtml(option.label)}</span>
+          </div>
+        `)
+            .join("")}
+      </div>
+    `;
+          document.body.appendChild(this.contentElement);
+      }
+      removePortal() {
+          this.contentElement?.remove();
+          this.contentElement = null;
+      }
+      updatePosition() {
+          if (!this.isOpen || !this.triggerElement || !this.contentElement)
+              return;
+          const rect = this.triggerElement.getBoundingClientRect();
+          const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+          const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+          this.contentElement.style.top = `${rect.bottom + scrollTop + 4}px`;
+          this.contentElement.style.left = `${rect.left + scrollLeft}px`;
+          this.contentElement.style.width = `${rect.width}px`;
+      }
+      attachPortalEvents() {
+          this.handleDocumentClick = (e) => {
+              const target = e.target;
+              if (this.isOpen &&
+                  this.contentElement &&
+                  !this.contentElement.contains(target) &&
+                  this.triggerElement &&
+                  !this.triggerElement.contains(target)) {
+                  this.close();
+              }
+          };
+          document.addEventListener("mousedown", this.handleDocumentClick);
+          this.handleWindowResize = () => this.updatePosition();
+          this.handleWindowScroll = () => this.updatePosition();
+          window.addEventListener("resize", this.handleWindowResize);
+          window.addEventListener("scroll", this.handleWindowScroll, true);
+          if (this.contentElement) {
+              this.contentElement.addEventListener("click", (e) => {
+                  const target = e.target;
+                  const item = target.closest(".medos-select-item");
+                  if (item && !item.dataset.disabled) {
+                      const value = item.dataset.value || "";
+                      const label = item.dataset.label || "";
+                      this.selectValue(value, label);
+                  }
+              });
+              this.contentElement.addEventListener("keydown", (e) => {
+                  if (e.key === "Escape") {
+                      this.close();
+                  }
+                  else if (e.key === "ArrowDown") {
+                      e.preventDefault();
+                      this.focusNextItem(1);
+                  }
+                  else if (e.key === "ArrowUp") {
+                      e.preventDefault();
+                      this.focusNextItem(-1);
+                  }
+                  else if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault();
+                      const focused = document.activeElement;
+                      if (focused &&
+                          focused.classList.contains("medos-select-item") &&
+                          !focused.dataset.disabled) {
+                          const value = focused.dataset.value || "";
+                          const label = focused.dataset.label || "";
+                          this.selectValue(value, label);
+                      }
+                  }
+              });
+          }
+      }
+      detachPortalEvents() {
+          if (this.handleDocumentClick) {
+              document.removeEventListener("mousedown", this.handleDocumentClick);
+              this.handleDocumentClick = null;
+          }
+          if (this.handleWindowResize) {
+              window.removeEventListener("resize", this.handleWindowResize);
+              this.handleWindowResize = null;
+          }
+          if (this.handleWindowScroll) {
+              window.removeEventListener("scroll", this.handleWindowScroll, true);
+              this.handleWindowScroll = null;
+          }
+      }
+      focusNextItem(direction) {
+          if (!this.contentElement)
+              return;
+          const items = Array.from(this.contentElement.querySelectorAll(".medos-select-item:not(.medos-select-item-disabled)"));
+          if (items.length === 0)
+              return;
+          const currentFocused = document.activeElement;
+          let currentIndex = items.indexOf(currentFocused);
+          let nextIndex = currentIndex + direction;
+          if (nextIndex < 0)
+              nextIndex = items.length - 1;
+          if (nextIndex >= items.length)
+              nextIndex = 0;
+          items[nextIndex]?.focus();
+      }
+      selectValue(value, label) {
+          this.selectedValue = value;
+          this.selectedLabel = label;
+          this.close();
+          this.renderTrigger();
+          this.config.onValueChange?.(value);
+      }
+      setValue(value) {
+          const option = this.options.find((o) => o.value === value);
+          if (option) {
+              this.selectedValue = option.value;
+              this.selectedLabel = option.label;
+              this.renderTrigger();
+          }
+      }
+      getValue() {
+          return this.selectedValue;
+      }
+      setOptions(options) {
+          this.options = options;
+          if (!options.some((o) => o.value === this.selectedValue)) {
+              this.selectedValue = "";
+              this.selectedLabel = "";
+          }
+          this.renderTrigger();
+      }
+      setDisabled(disabled) {
+          this.config.disabled = disabled;
+          this.renderTrigger();
+          this.attachTriggerEvents();
+      }
+      setError(error) {
+          this.config.error = error;
+          this.renderTrigger();
+      }
+      destroy() {
+          this.close();
+          this.container.innerHTML = "";
+      }
+      escapeHtml(text) {
+          const div = document.createElement("div");
+          div.textContent = text;
+          return div.innerHTML;
+      }
+  }
+
+  function injectCalendarStyles() {
+      if (typeof document === "undefined")
+          return;
+      const styleId = "medos-vanilla-calendar-styles";
+      if (document.getElementById(styleId))
+          return;
+      const styleElement = document.createElement("style");
+      styleElement.id = styleId;
+      styleElement.innerHTML = `
+    .medos-calendar {
+      width: 340px;
+      background-color: var(--medos-color-background, #ffffff);
+      border-radius: var(--medos-radius-md, 8px);
+      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
+      padding: 16px;
+      font-family: var(--medos-typography-font-family, 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial);
+      border: 1px solid var(--medos-color-border, #e5e7eb);
+      box-sizing: border-box;
+    }
+
+    .medos-calendar-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 12px;
+    }
+
+    .medos-calendar-month {
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--medos-color-text, #111827);
+      margin: 0;
+    }
+
+    .medos-calendar-nav {
+      width: 28px;
+      height: 28px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--medos-color-secondary, #6b7280);
+      cursor: pointer;
+      border-radius: var(--medos-radius-sm, 4px);
+      transition: background-color 0.2s;
+      border: none;
+      background: transparent;
+      padding: 0;
+    }
+
+    .medos-calendar-nav:hover {
+      background-color: var(--medos-color-background-secondary, #f3f4f6);
+    }
+
+    .medos-calendar-days-header {
+      display: grid;
+      grid-template-columns: repeat(7, 1fr);
+      text-align: center;
+      margin-bottom: 6px;
+      font-size: 13px;
+      font-weight: 500;
+      color: var(--medos-color-text, #111827);
+    }
+
+    .medos-calendar-day-name {
+      padding: 4px 0;
+    }
+
+    .medos-calendar-grid {
+      display: grid;
+      grid-template-columns: repeat(7, 1fr);
+      gap: 4px;
+      text-align: center;
+    }
+
+    .medos-calendar-day {
+      width: 38px;
+      height: 38px;
+      border: 1px solid transparent;
+      border-radius: var(--medos-radius-md, 8px);
+      color: var(--medos-color-secondary, #6b7280);
+      background-color: transparent;
+      font-size: 14px;
+      transition: all 0.2s;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      cursor: pointer;
+      padding: 0;
+      font-family: inherit;
+    }
+
+    .medos-calendar-day span {
+      line-height: 1;
+    }
+
+    .medos-calendar-day:hover:not(.medos-calendar-day-disabled):not(.medos-calendar-day-selected) {
+      background-color: var(--medos-color-secondary, #6b7280);
+      color: var(--medos-color-text-on-secondary, #ffffff);
+    }
+
+    .medos-calendar-day-selected {
+      border: 1px solid var(--medos-color-secondary, #6b7280);
+      color: var(--medos-color-secondary, #6b7280);
+      background-color: transparent;
+      font-weight: 600;
+    }
+
+    .medos-calendar-day-today {
+      background-color: var(--medos-color-primary, #27903f);
+      color: white;
+    }
+
+    .medos-calendar-day-today:hover:not(.medos-calendar-day-selected) {
+      background-color: var(--medos-color-primary-hover, #218838);
+    }
+
+    .medos-calendar-day-disabled {
+      color: var(--medos-color-text-secondary, #9ca3af);
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    .medos-calendar-day-disabled:hover {
+      background-color: transparent;
+      color: var(--medos-color-text-secondary, #9ca3af);
+    }
+
+    .medos-calendar-dot {
+      font-size: 10px;
+      margin-top: -2px;
+      line-height: 1;
+    }
+
+    .medos-calendar-empty {
+      visibility: hidden;
+      width: 38px;
+      height: 38px;
+    }
+  `;
+      document.head.appendChild(styleElement);
+  }
+  class VanillaCalendar {
+      constructor(container, config = {}) {
+          this.selectedDate = null;
+          if (typeof container === "string") {
+              const el = document.getElementById(container);
+              if (!el) {
+                  throw new Error(`Container element with id "${container}" not found`);
+              }
+              this.container = el;
+          }
+          else {
+              this.container = container;
+          }
+          this.config = {
+              pastDisabled: false,
+              ...config,
+          };
+          this.today = new Date();
+          this.today.setHours(0, 0, 0, 0);
+          if (config.selectedDate) {
+              this.selectedDate = new Date(config.selectedDate);
+              this.selectedDate.setHours(0, 0, 0, 0);
+              this.currentMonth = this.selectedDate.getMonth();
+              this.currentYear = this.selectedDate.getFullYear();
+          }
+          else {
+              this.currentMonth = this.today.getMonth();
+              this.currentYear = this.today.getFullYear();
+          }
+          injectCalendarStyles();
+          this.render();
+          this.attachEventListeners();
+      }
+      getDaysInMonth(year, month) {
+          return new Date(year, month + 1, 0).getDate();
+      }
+      getFirstDayOfMonth(year, month) {
+          return new Date(year, month, 1).getDay();
+      }
+      isSameDate(d1, d2) {
+          return (d1.getFullYear() === d2.getFullYear() &&
+              d1.getMonth() === d2.getMonth() &&
+              d1.getDate() === d2.getDate());
+      }
+      isBeforeToday(date) {
+          const todayStart = new Date(this.today);
+          todayStart.setHours(0, 0, 0, 0);
+          return date < todayStart;
+      }
+      render() {
+          const daysInMonth = this.getDaysInMonth(this.currentYear, this.currentMonth);
+          const firstDayOfMonth = this.getFirstDayOfMonth(this.currentYear, this.currentMonth);
+          const startOffset = (firstDayOfMonth + 6) % 7;
+          const emptyCells = Array.from({ length: startOffset })
+              .map((_, idx) => `<div class="medos-calendar-empty" key="empty-${idx}"></div>`)
+              .join("");
+          const dayCells = Array.from({ length: daysInMonth })
+              .map((_, i) => {
+              const dayNum = i + 1;
+              const date = new Date(this.currentYear, this.currentMonth, dayNum);
+              const disabled = this.config.pastDisabled && this.isBeforeToday(date);
+              const isSelected = this.selectedDate && this.isSameDate(this.selectedDate, date);
+              const isToday = this.isSameDate(this.today, date);
+              const classes = [
+                  "medos-calendar-day",
+                  isSelected ? "medos-calendar-day-selected" : "",
+                  isToday && !isSelected ? "medos-calendar-day-today" : "",
+                  disabled ? "medos-calendar-day-disabled" : "",
+              ]
+                  .filter(Boolean)
+                  .join(" ");
+              return `
+          <button
+            class="${classes}"
+            ${disabled ? "disabled" : ""}
+            data-day="${dayNum}"
+            data-date="${this.currentYear}-${String(this.currentMonth + 1).padStart(2, "0")}-${String(dayNum).padStart(2, "0")}"
+          >
+            <span>${dayNum}</span>
+            ${isSelected ? '<span class="medos-calendar-dot">•</span>' : ""}
+          </button>
+        `;
+          })
+              .join("");
+          this.container.innerHTML = `
+      <div class="medos-calendar">
+        <div class="medos-calendar-header">
+          <button class="medos-calendar-nav" data-action="prev" type="button">
+            ${VanillaIcons.chevronLeft(20)}
+          </button>
+          <p class="medos-calendar-month">
+            ${VanillaCalendar.MONTHS[this.currentMonth]} ${this.currentYear}
+          </p>
+          <button class="medos-calendar-nav" data-action="next" type="button">
+            ${VanillaIcons.chevronRight(20)}
+          </button>
+        </div>
+
+        <div class="medos-calendar-days-header">
+          ${VanillaCalendar.DAYS_OF_WEEK.map((d) => `<div class="medos-calendar-day-name">${d}</div>`).join("")}
+        </div>
+
+        <div class="medos-calendar-grid">
+          ${emptyCells}
+          ${dayCells}
+        </div>
+      </div>
+    `;
+      }
+      attachEventListeners() {
+          this.container.addEventListener("click", (e) => {
+              const target = e.target;
+              const navButton = target.closest(".medos-calendar-nav");
+              if (navButton) {
+                  const action = navButton.getAttribute("data-action");
+                  if (action === "prev") {
+                      this.prevMonth();
+                  }
+                  else if (action === "next") {
+                      this.nextMonth();
+                  }
+                  return;
+              }
+              const dayButton = target.closest(".medos-calendar-day");
+              if (dayButton && !dayButton.disabled) {
+                  const dateStr = dayButton.getAttribute("data-date");
+                  if (dateStr) {
+                      const [year, month, day] = dateStr.split("-").map(Number);
+                      const selectedDate = new Date(year, month - 1, day);
+                      this.selectDate(selectedDate);
+                  }
+              }
+          });
+      }
+      prevMonth() {
+          if (this.currentMonth === 0) {
+              this.currentMonth = 11;
+              this.currentYear -= 1;
+          }
+          else {
+              this.currentMonth -= 1;
+          }
+          this.render();
+          this.attachEventListeners();
+      }
+      nextMonth() {
+          if (this.currentMonth === 11) {
+              this.currentMonth = 0;
+              this.currentYear += 1;
+          }
+          else {
+              this.currentMonth += 1;
+          }
+          this.render();
+          this.attachEventListeners();
+      }
+      selectDate(date) {
+          this.selectedDate = date;
+          this.render();
+          this.attachEventListeners();
+          this.config.onSelect?.(date);
+      }
+      setSelectedDate(date) {
+          if (date) {
+              this.selectedDate = new Date(date);
+              this.selectedDate.setHours(0, 0, 0, 0);
+              this.currentMonth = this.selectedDate.getMonth();
+              this.currentYear = this.selectedDate.getFullYear();
+          }
+          else {
+              this.selectedDate = null;
+          }
+          this.render();
+          this.attachEventListeners();
+      }
+      getSelectedDate() {
+          return this.selectedDate;
+      }
+      goToDate(date) {
+          this.currentMonth = date.getMonth();
+          this.currentYear = date.getFullYear();
+          this.render();
+          this.attachEventListeners();
+      }
+      goToToday() {
+          this.currentMonth = this.today.getMonth();
+          this.currentYear = this.today.getFullYear();
+          this.render();
+          this.attachEventListeners();
+      }
+      setPastDisabled(disabled) {
+          this.config.pastDisabled = disabled;
+          this.render();
+          this.attachEventListeners();
+      }
+      destroy() {
+          this.container.innerHTML = "";
+      }
+  }
+  VanillaCalendar.DAYS_OF_WEEK = [
+      "Mo",
+      "Tu",
+      "We",
+      "Th",
+      "Fr",
+      "Sa",
+      "Su",
+  ];
+  VanillaCalendar.MONTHS = [
+      "January",
+      "February",
+      "March",
+      "April",
+      "May",
+      "June",
+      "July",
+      "August",
+      "September",
+      "October",
+      "November",
+      "December",
+  ];
+
+  function injectThemedStyles() {
+      if (typeof document === "undefined")
+          return;
+      const styleId = "medos-themed-styles";
+      if (document.getElementById(styleId))
+          return;
+      const styleElement = document.createElement("style");
+      styleElement.id = styleId;
+      styleElement.innerHTML = `
+/* Default Theme Variables */
+:root {
+  /* Colors */
+  --medos-color-primary: #27903f;
+  --medos-color-primary-dark: #1e7032;
+  --medos-color-background: #ffffff;
+  --medos-color-background-secondary: #f9fafb;
+  --medos-color-surface: #ffffff;
+  --medos-color-surface-hover: #f9fafb;
+  --medos-color-text: #111827;
+  --medos-color-text-secondary: #374151;
+  --medos-color-text-muted: #9ca3af;
+  --medos-color-text-on-primary: #ffffff;
+  --medos-color-border: #e5e7eb;
+  --medos-color-border-hover: #d1d5db;
+  --medos-color-border-focus: #27903f;
+  --medos-color-error: #ef4444;
+  --medos-color-error-background: #fee2e2;
+  --medos-color-error-border: #fca5a5;
+  --medos-color-success: #10b981;
+  --medos-color-success-background: #ecfdf5;
+  
+  /* Typography */
+  --medos-typography-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --medos-typography-font-size-xs: 12px;
+  --medos-typography-font-size-sm: 14px;
+  --medos-typography-font-size-md: 16px;
+  --medos-typography-font-size-lg: 18px;
+  --medos-typography-font-size-xl: 20px;
+  --medos-typography-font-weight-normal: 400;
+  --medos-typography-font-weight-medium: 500;
+  --medos-typography-font-weight-semibold: 600;
+  
+  /* Spacing */
+  --medos-spacing-xs: 4px;
+  --medos-spacing-sm: 8px;
+  --medos-spacing-md: 12px;
+  --medos-spacing-lg: 16px;
+  --medos-spacing-xl: 20px;
+  --medos-spacing-2xl: 24px;
+  
+  /* Radius */
+  --medos-radius-sm: 4px;
+  --medos-radius-md: 8px;
+  --medos-radius-lg: 12px;
+  --medos-radius-full: 999px;
+  
+  /* Shadows */
+  --medos-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --medos-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  --medos-shadow-lg: 0 8px 24px rgba(16, 24, 40, 0.08);
+  
+  /* Transitions */
+  --medos-transition-normal: 200ms ease-in-out;
+}
+
+/* Container & Card */
+.medos-appointment-container {
+  display: flex;
+  justify-content: center;
+  padding: var(--medos-spacing-xl, 20px);
+  font-family: var(--medos-typography-font-family);
+  background: var(--medos-color-background, #f6f8fa);
+}
+
+.medos-appointment-card {
+  width: 100%;
+  max-width: 720px;
+  background: var(--medos-color-surface, #fff);
+  border-radius: var(--medos-radius-lg, 12px);
+  box-shadow: var(--medos-shadow-lg);
+  padding: var(--medos-spacing-2xl, 24px);
+  box-sizing: border-box;
+}
+
+/* Section Cards */
+.medos-section-card {
+  background: var(--medos-color-surface, #fff);
+  border: 1px solid var(--medos-color-border, #e5e7eb);
+  border-radius: var(--medos-radius-lg, 12px);
+  margin-bottom: var(--medos-spacing-lg, 16px);
+  overflow: visible;
+}
+
+.medos-section-header {
+  display: flex;
+  align-items: center;
+  gap: var(--medos-spacing-sm, 8px);
+  padding: var(--medos-spacing-md, 12px) var(--medos-spacing-lg, 16px);
+  background: var(--medos-color-background-secondary, #f9fafb);
+  border-bottom: 1px solid var(--medos-color-border, #e5e7eb);
+  border-radius: var(--medos-radius-lg, 12px) var(--medos-radius-lg, 12px) 0 0;
+}
+
+.medos-section-header svg {
+  color: var(--medos-color-primary, #27903f);
+  flex-shrink: 0;
+}
+
+.medos-section-title {
+  font-size: var(--medos-typography-font-size-sm, 14px);
+  font-weight: var(--medos-typography-font-weight-semibold, 600);
+  color: var(--medos-color-text, #111827);
+  margin: 0;
+}
+
+.medos-section-body {
+  padding: var(--medos-spacing-lg, 16px);
+}
+
+.medos-section-description {
+  margin: 0 0 var(--medos-spacing-md, 12px) 0;
+  font-size: var(--medos-typography-font-size-sm, 14px);
+  color: var(--medos-color-text-secondary, #6b7280);
+}
+
+/* Form Groups */
+.medos-form-group {
+  margin-bottom: var(--medos-spacing-md, 12px);
+}
+
+.medos-form-row {
+  display: flex;
+  gap: var(--medos-spacing-md, 12px);
+}
+
+.medos-form-row .medos-form-group {
+  flex: 1;
+}
+
+.medos-label {
+  display: block;
+  font-size: var(--medos-typography-font-size-xs, 13px);
+  font-weight: var(--medos-typography-font-weight-medium, 500);
+  color: var(--medos-color-text-secondary, #374151);
+  margin-bottom: var(--medos-spacing-xs, 6px);
+}
+
+.medos-required {
+  color: var(--medos-color-error, #ef4444);
+}
+
+/* Inputs */
+.medos-input,
+.medos-textarea {
+  width: 100%;
+  padding: var(--medos-spacing-sm, 10px) var(--medos-spacing-md, 12px);
+  border-radius: var(--medos-radius-md, 8px);
+  border: 1px solid var(--medos-color-border, #e5e7eb);
+  outline: none;
+  font-size: var(--medos-typography-font-size-sm, 14px);
+  box-sizing: border-box;
+  font-family: inherit;
+  color: var(--medos-color-text, #111827);
+  background: var(--medos-color-surface, #fff);
+  transition: var(--medos-transition-normal);
+}
+
+.medos-input:focus,
+.medos-textarea:focus {
+  border-color: var(--medos-color-primary, #27903f);
+  box-shadow: 0 0 0 2px rgba(39, 144, 63, 0.15);
+}
+
+/* Buttons */
+.medos-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--medos-spacing-xs, 6px);
+  padding: var(--medos-spacing-sm, 10px) var(--medos-spacing-lg, 16px);
+  border-radius: var(--medos-radius-md, 8px);
+  font-size: var(--medos-typography-font-size-sm, 14px);
+  font-weight: var(--medos-typography-font-weight-semibold, 600);
+  cursor: pointer;
+  border: none;
+  transition: var(--medos-transition-normal);
+  font-family: inherit;
+}
+
+.medos-btn-primary {
+  background: var(--medos-color-primary, #27903f);
+  color: var(--medos-color-text-on-primary, #fff);
+}
+
+.medos-btn-primary:hover:not(:disabled) {
+  background: var(--medos-color-primary-dark, #1e7032);
+}
+
+.medos-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.medos-btn-secondary {
+  background: var(--medos-color-surface, #fff);
+  color: var(--medos-color-text, #111827);
+  border: 1px solid var(--medos-color-border, #e5e7eb);
+}
+
+.medos-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--medos-spacing-md, 12px);
+  margin-top: var(--medos-spacing-lg, 16px);
+}
+
+/* Radio Options */
+.medos-radio-option {
+  display: flex;
+  align-items: center;
+  gap: var(--medos-spacing-sm, 8px);
+  padding: var(--medos-spacing-sm, 10px) var(--medos-spacing-md, 12px);
+  border: 1px solid var(--medos-color-border, #e5e7eb);
+  border-radius: var(--medos-radius-md, 8px);
+  cursor: pointer;
+  transition: var(--medos-transition-normal);
+  margin-bottom: var(--medos-spacing-xs, 4px);
+}
+
+.medos-radio-option:hover {
+  border-color: var(--medos-color-primary, #27903f);
+  background: var(--medos-color-surface-hover, #f9fafb);
+}
+
+.medos-radio-option.selected {
+  border-color: var(--medos-color-primary, #27903f);
+  background: rgba(39, 144, 63, 0.05);
+}
+
+/* Time Slots */
+.medos-slots-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: var(--medos-spacing-sm, 8px);
+}
+
+.medos-slot-card {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--medos-spacing-xs, 4px);
+  padding: var(--medos-spacing-sm, 10px) var(--medos-spacing-md, 12px);
+  border: 1px solid var(--medos-color-border, #e5e7eb);
+  border-radius: var(--medos-radius-md, 8px);
+  cursor: pointer;
+  transition: var(--medos-transition-normal);
+  position: relative;
+}
+
+.medos-slot-card:hover {
+  border-color: var(--medos-color-primary, #27903f);
+  background: var(--medos-color-surface-hover, #f9fafb);
+}
+
+.medos-slot-card.selected {
+  border-color: var(--medos-color-primary, #27903f);
+  background: rgba(39, 144, 63, 0.1);
+}
+
+/* Phone Input */
+.medos-phone-input-row {
+  display: flex;
+  gap: var(--medos-spacing-sm, 8px);
+  align-items: flex-start;
+}
+
+.medos-country-code-wrapper {
+  width: 140px;
+  flex-shrink: 0;
+}
+
+.medos-phone-wrapper {
+  flex: 1;
+}
+
+/* VanillaSelect Styles */
+.vanilla-select-container {
+  position: relative;
+  width: 100%;
+  z-index: 1;
+}
+
+.vanilla-select-container.open {
+  z-index: 10000;
+}
+
+.vanilla-select-display {
+  width: 100%;
+  padding: var(--medos-spacing-sm, 10px) var(--medos-spacing-md, 12px);
+  border-radius: var(--medos-radius-md, 8px);
+  border: 1px solid var(--medos-color-border, #e5e7eb);
+  background: var(--medos-color-surface, #fff);
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: var(--medos-typography-font-size-sm, 14px);
+  color: var(--medos-color-text, #111827);
+  box-sizing: border-box;
+  transition: var(--medos-transition-normal);
+}
+
+.vanilla-select-display:hover {
+  border-color: var(--medos-color-border-hover, #d1d5db);
+}
+
+.vanilla-select-display.open {
+  border-color: var(--medos-color-primary, #27903f);
+  box-shadow: 0 0 0 2px rgba(39, 144, 63, 0.15);
+}
+
+.vanilla-select-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: var(--medos-color-surface, #fff);
+  border: 1px solid var(--medos-color-border, #e5e7eb);
+  border-radius: var(--medos-radius-md, 8px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: 9999;
+  max-height: 200px;
+  overflow-y: auto;
+  margin-top: 4px;
+}
+
+.vanilla-select-option {
+  padding: var(--medos-spacing-sm, 10px) var(--medos-spacing-md, 12px);
+  cursor: pointer;
+  font-size: var(--medos-typography-font-size-sm, 14px);
+  color: var(--medos-color-text, #111827);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  transition: var(--medos-transition-normal);
+}
+
+.vanilla-select-option:hover {
+  background: var(--medos-color-surface-hover, #f9fafb);
+}
+
+.vanilla-select-option.selected {
+  background: rgba(39, 144, 63, 0.1);
+  color: var(--medos-color-primary, #27903f);
+}
+
+/* VanillaCalendar Styles */
+.vanilla-calendar-container {
+  width: 100%;
+  background: var(--medos-color-surface, #fff);
+  border: 1px solid var(--medos-color-border, #e5e7eb);
+  border-radius: var(--medos-radius-md, 8px);
+  padding: var(--medos-spacing-lg, 16px);
+}
+
+.vanilla-calendar-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--medos-spacing-lg, 16px);
+}
+
+.vanilla-calendar-nav-btn {
+  background: none;
+  border: none;
+  padding: var(--medos-spacing-xs, 4px);
+  cursor: pointer;
+  border-radius: var(--medos-radius-sm, 4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: var(--medos-transition-normal);
+}
+
+.vanilla-calendar-nav-btn:hover {
+  background: var(--medos-color-surface-hover, #f9fafb);
+}
+
+.vanilla-calendar-month-year {
+  font-size: var(--medos-typography-font-size-md, 16px);
+  font-weight: var(--medos-typography-font-weight-semibold, 600);
+  color: var(--medos-color-text, #111827);
+}
+
+.vanilla-calendar-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 2px;
+}
+
+.vanilla-calendar-day-header {
+  text-align: center;
+  font-size: var(--medos-typography-font-size-xs, 12px);
+  font-weight: var(--medos-typography-font-weight-medium, 500);
+  color: var(--medos-color-text-secondary, #6b7280);
+  padding: var(--medos-spacing-sm, 8px);
+}
+
+.vanilla-calendar-day {
+  text-align: center;
+  padding: var(--medos-spacing-sm, 8px);
+  cursor: pointer;
+  border-radius: var(--medos-radius-sm, 4px);
+  font-size: var(--medos-typography-font-size-sm, 14px);
+  transition: var(--medos-transition-normal);
+  min-height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.vanilla-calendar-day:hover:not(.disabled):not(.other-month) {
+  background: var(--medos-color-surface-hover, #f9fafb);
+}
+
+.vanilla-calendar-day.selected {
+  background: var(--medos-color-primary, #27903f);
+  color: var(--medos-color-text-on-primary, #fff);
+}
+
+.vanilla-calendar-day.disabled {
+  color: var(--medos-color-text-muted, #9ca3af);
+  cursor: not-allowed;
+}
+
+.vanilla-calendar-day.other-month {
+  color: var(--medos-color-text-muted, #9ca3af);
+}
+
+.vanilla-calendar-day.today {
+  background: rgba(39, 144, 63, 0.1);
+  font-weight: var(--medos-typography-font-weight-semibold, 600);
+}
+  `;
+      document.head.appendChild(styleElement);
+  }
+
   class AppointmentCalendarWidget {
       constructor(container, options) {
           this.mounted = true;
           this.doctors = [];
+          this.addressSelect = null;
+          this.doctorSelect = null;
+          this.calendar = null;
+          this.countryCodeSelect = null;
+          this.genderSelect = null;
+          this.bloodGroupSelect = null;
+          injectThemedStyles();
           if (typeof container === "string") {
               const el = document.getElementById(container);
               if (!el) {
@@ -4422,8 +6030,27 @@
               return false;
           return true;
       }
+      updateSubmitButtonState() {
+          const submitBtn = this.container.querySelector("#medos-btn-submit");
+          if (submitBtn) {
+              const canSubmit = this.state.patientName &&
+                  this.state.patientAddress &&
+                  this.state.patientCity &&
+                  this.state.patientState &&
+                  this.state.patientCountry &&
+                  this.state.patientZipcode &&
+                  this.state.patientEmail &&
+                  this.state.patientAge &&
+                  this.state.otpVerified;
+              submitBtn.disabled = !(canSubmit && !this.state.loading);
+          }
+      }
       async sendOtp() {
           this.setState({ error: null });
+          console.log("sendOtp called - Current state:", {
+              countryCode: this.state.countryCode,
+              patientPhone: this.state.patientPhone,
+          });
           if (!this.state.countryCode) {
               this.setState({ error: "Please enter country code." });
               return;
@@ -4447,6 +6074,10 @@
           this.setState({ otpSending: true });
           this.render();
           try {
+              console.log("Sending OTP to:", {
+                  countryCode: this.state.countryCode,
+                  phoneNumber: this.state.patientPhone,
+              });
               await PatientService.sendPhoneVerificationOtp({
                   countryCode: this.state.countryCode,
                   phoneNumber: this.state.patientPhone,
@@ -4454,7 +6085,10 @@
               this.setState({ otpSent: true, error: null });
           }
           catch (e) {
-              const msg = e.message || "Failed to send OTP";
+              console.error("Send OTP error:", e);
+              const msg = e?.response?.data?.message ||
+                  e?.message ||
+                  "Failed to send OTP. Please try again.";
               this.setState({ error: msg });
               this.options.onError?.(e);
           }
@@ -4478,6 +6112,11 @@
           this.setState({ otpVerifying: true });
           this.render();
           try {
+              console.log("Verifying OTP with:", {
+                  countryCode: this.state.countryCode,
+                  phoneNumber: this.state.patientPhone,
+                  otpCode: this.state.otpCode,
+              });
               await PatientService.verifyPhoneVerificationOtp({
                   countryCode: this.state.countryCode,
                   phoneNumber: this.state.patientPhone,
@@ -4486,7 +6125,10 @@
               this.setState({ otpVerified: true, error: null });
           }
           catch (e) {
-              const msg = e.message || "Invalid OTP code";
+              console.error("OTP verification error:", e);
+              const msg = e?.response?.data?.message ||
+                  e?.message ||
+                  "Invalid OTP code. Please try again.";
               this.setState({ error: msg });
               this.options.onError?.(e);
           }
@@ -4647,6 +6289,112 @@
       </div>
     `;
           this.attachEventListeners();
+          this.initializeCustomComponents();
+      }
+      initializeCustomComponents() {
+          if (this.state.step === 0) {
+              const addressContainer = this.container.querySelector("#medos-address-select-container");
+              if (addressContainer && this.state.addresses.length > 0) {
+                  const addressOptions = this.state.addresses.map((a) => ({
+                      value: a.id.toString(),
+                      label: a.label || `Address ${a.id}`,
+                  }));
+                  this.addressSelect = new VanillaSelect(addressContainer, addressOptions, {
+                      placeholder: "Select a location",
+                      onValueChange: (value) => {
+                          this.handleAddressChange(Number(value) || null);
+                      },
+                  });
+                  if (this.state.selectedAddress) {
+                      this.addressSelect.setValue(this.state.selectedAddress.toString());
+                  }
+              }
+              const doctorContainer = this.container.querySelector("#medos-doctor-select-container");
+              if (doctorContainer && this.doctors.length > 0) {
+                  const doctorOptions = this.doctors.map((d) => ({
+                      value: d.id.toString(),
+                      label: d.name + (d.specialty ? ` • ${d.specialty}` : ""),
+                  }));
+                  this.doctorSelect = new VanillaSelect(doctorContainer, doctorOptions, {
+                      placeholder: "Select a doctor",
+                      onValueChange: (value) => {
+                          this.state.selectedDoctor = Number(value) || null;
+                          const selectedDoc = this.doctors.find((d) => d.id === this.state.selectedDoctor);
+                          if (selectedDoc && selectedDoc.consultationCharge) {
+                              this.state.consultationCharge = selectedDoc.consultationCharge;
+                          }
+                          this.render();
+                      },
+                  });
+                  if (this.state.selectedDoctor) {
+                      this.doctorSelect.setValue(this.state.selectedDoctor.toString());
+                  }
+              }
+          }
+          if (this.state.step === 1) {
+              const calendarContainer = this.container.querySelector("#medos-calendar-container");
+              if (calendarContainer) {
+                  this.calendar = new VanillaCalendar(calendarContainer, {
+                      selectedDate: this.state.selectedDate || undefined,
+                      pastDisabled: true,
+                      onSelect: (date) => {
+                          this.state.selectedDate = date;
+                          this.render();
+                      },
+                  });
+              }
+          }
+          if (this.state.step === 3) {
+              const countryCodeContainer = this.container.querySelector("#medos-country-code-container");
+              if (countryCodeContainer) {
+                  const countryOptions = COUNTRY_CODES.map((c) => ({
+                      value: c.code,
+                      label: c.label,
+                  }));
+                  this.countryCodeSelect = new VanillaSelect(countryCodeContainer, countryOptions, {
+                      placeholder: "Country",
+                      onValueChange: (value) => {
+                          this.state.countryCode = value;
+                          const sendOtpBtn = this.container.querySelector("#medos-btn-send-otp");
+                          if (sendOtpBtn) {
+                              const canSendOtp = this.state.countryCode &&
+                                  this.state.patientPhone.length >= 10;
+                              sendOtpBtn.disabled = !canSendOtp;
+                          }
+                      },
+                  });
+                  if (this.state.countryCode) {
+                      this.countryCodeSelect.setValue(this.state.countryCode);
+                  }
+              }
+          }
+          if (this.state.step === 4) {
+              const genderContainer = this.container.querySelector("#medos-gender-container");
+              if (genderContainer) {
+                  this.genderSelect = new VanillaSelect(genderContainer, GENDER_OPTIONS, {
+                      placeholder: "Select gender",
+                      onValueChange: (value) => {
+                          this.state.patientGender = value;
+                          this.updateSubmitButtonState();
+                      },
+                  });
+                  if (this.state.patientGender) {
+                      this.genderSelect.setValue(this.state.patientGender);
+                  }
+              }
+              const bloodGroupContainer = this.container.querySelector("#medos-blood-group-container");
+              if (bloodGroupContainer) {
+                  this.bloodGroupSelect = new VanillaSelect(bloodGroupContainer, BLOOD_GROUP_OPTIONS, {
+                      placeholder: "Select blood group (optional)",
+                      onValueChange: (value) => {
+                          this.state.bloodGroup = value;
+                      },
+                  });
+                  if (this.state.bloodGroup) {
+                      this.bloodGroupSelect.setValue(this.state.bloodGroup);
+                  }
+              }
+          }
       }
       renderStep() {
           switch (this.state.step) {
@@ -4669,72 +6417,122 @@
       renderStep0() {
           const canProceed = this.canProceedFromMergedStep();
           return `
-      <div class="medos-appointment-section">
-        <div class="medos-appointment-form-grid-2col">
-          <div>
-            <label class="medos-appointment-label">Address</label>
-            ${this.state.addresses.length === 0
-            ? '<div class="medos-appointment-small-muted">No addresses available</div>'
-            : this.state.addresses.length === 1
-                ? `<div class="medos-appointment-small-muted" style="font-weight: 600">${this.escapeHtml(this.state.addresses[0].label || "")}</div>`
-                : `
-                <select class="medos-appointment-select" id="medos-address-select">
-                  <option value="">-- choose address --</option>
-                  ${this.state.addresses
-                    .map((a) => `<option value="${this.escapeHtml(a.id.toString())}" ${this.state.selectedAddress === a.id ? "selected" : ""}>${this.escapeHtml(a.label || "")}</option>`)
-                    .join("")}
-                </select>
-              `}
+      <div class="medos-section-card">
+        <div class="medos-section-header">
+          ${VanillaIcons.mapPin(14)}
+          <span class="medos-section-title">Location & Doctor</span>
+        </div>
+        <div class="medos-section-body">
+          <div class="medos-form-group">
+            <label class="medos-label">Preferred Location <span class="medos-required">*</span></label>
+            <div id="medos-address-select-container"></div>
           </div>
-          <div>
-            <label class="medos-appointment-label">Doctor</label>
-            ${this.doctors.length === 0
-            ? '<div class="medos-appointment-small-muted">No doctors available</div>'
-            : this.doctors.length === 1
-                ? `<div class="medos-appointment-small-muted" style="font-weight: 600">${this.escapeHtml(this.doctors[0].name)}${this.doctors[0].specialty
-                    ? ` • ${this.escapeHtml(this.doctors[0].specialty)}`
-                    : ""}</div>`
-                : `
-                <select class="medos-appointment-select" id="medos-doctor-select">
-                  <option value="">-- choose doctor --</option>
-                  ${this.doctors
-                    .map((d) => `<option value="${this.escapeHtml(d.id.toString())}" ${this.state.selectedDoctor === d.id ? "selected" : ""}>${this.escapeHtml(d.name)}${d.specialty
-                    ? ` (${this.escapeHtml(d.specialty)})`
-                    : ""}</option>`)
-                    .join("")}
-                </select>
-              `}
+          <div class="medos-form-group">
+            <label class="medos-label">Preferred Doctor <span class="medos-required">*</span></label>
+            <div id="medos-doctor-select-container"></div>
+          </div>
+          <div class="medos-form-group">
+            <label class="medos-label">Chief Complaint <span class="medos-optional">(optional)</span></label>
+            <textarea 
+              class="medos-textarea" 
+              id="medos-chief-complaint"
+              placeholder="Enter Chief Complaint or Appointment Notes"
+            ></textarea>
           </div>
         </div>
-        <div class="medos-appointment-actions">
-          <button class="medos-appointment-btn medos-appointment-btn-secondary" id="medos-btn-cancel">Cancel</button>
-          <button class="medos-appointment-btn medos-appointment-btn-primary" id="medos-btn-next" ${!canProceed ? "disabled" : ""} style="opacity: ${canProceed ? 1 : 0.6}">Next</button>
-        </div>
+      </div>
+      <div class="medos-actions">
+        <button class="medos-btn medos-btn-primary" id="medos-btn-next" ${!canProceed ? "disabled" : ""}>Next</button>
       </div>
     `;
       }
       renderStep1() {
           const dateStr = formatDateToISO(this.state.selectedDate);
+          const selectedDoctor = this.doctors.find((d) => d.id === this.state.selectedDoctor);
+          const selectedDoctorData = this.doctors.find((d) => d.id === this.state.selectedDoctor);
+          const consultationCharge = selectedDoctorData?.consultationCharge ||
+              selectedDoctor?.consultationCharge ||
+              this.state.consultationCharge ||
+              "N/A";
           return `
-      <div class="medos-appointment-section">
-        <label class="medos-appointment-label">Select Date</label>
-        <input type="date" class="medos-appointment-input" id="medos-date-input" value="${this.escapeHtml(dateStr)}" />
-        <div class="medos-appointment-actions">
-          <button class="medos-appointment-btn medos-appointment-btn-secondary" id="medos-btn-back">Back</button>
-          <button class="medos-appointment-btn medos-appointment-btn-primary" id="medos-btn-next" ${!dateStr ? "disabled" : ""} style="opacity: ${dateStr ? 1 : 0.6}">Next</button>
+      <div class="medos-section-card">
+        <div class="medos-section-header">
+          ${VanillaIcons.consultationType(14)}
+          <span class="medos-section-title">Consultation Type</span>
+        </div>
+        <div class="medos-section-body">
+          <div class="medos-consultation-options">
+            <label class="medos-radio-option ${this.state.consultationMode === "OFFLINE" ? "selected" : ""}">
+              <input 
+                type="radio" 
+                name="consultationMode" 
+                value="OFFLINE" 
+                ${this.state.consultationMode === "OFFLINE" ? "checked" : ""}
+                class="medos-radio-input"
+              />
+              <span class="medos-radio-label">In-Person Visit</span>
+            </label>
+            <label class="medos-radio-option ${this.state.consultationMode === "ONLINE" ? "selected" : ""}">
+              <input 
+                type="radio" 
+                name="consultationMode" 
+                value="ONLINE" 
+                ${this.state.consultationMode === "ONLINE" ? "checked" : ""}
+                class="medos-radio-input"
+              />
+              <span class="medos-radio-label">Online Consultation</span>
+            </label>
+          </div>
+          <div class="medos-consultation-charge">
+            <span class="medos-charge-label">Consultation Charge:</span>
+            <span class="medos-charge-value">${consultationCharge !== "N/A"
+            ? "₹" + consultationCharge
+            : consultationCharge}</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="medos-section-card">
+        <div class="medos-section-header">
+          ${VanillaIcons.dateTime(14)}
+          <span class="medos-section-title">Select Date</span>
+        </div>
+        <div class="medos-section-body">
+          <div id="medos-calendar-container"></div>
         </div>
       </div>
+
+      <div class="medos-actions">
+        <button class="medos-btn medos-btn-secondary" id="medos-btn-back">Back</button>
+        <button class="medos-btn medos-btn-primary" id="medos-btn-next" ${dateStr ? "" : "disabled"}>Next</button>
+      </div>
     `;
       }
       renderStep2() {
+          const dateDisplay = this.state.selectedDate
+              ? this.state.selectedDate.toLocaleDateString("en-US", {
+                  weekday: "long",
+                  year: "numeric",
+                  month: "long",
+                  day: "numeric",
+              })
+              : "";
           return `
-      <div class="medos-appointment-section">
-        <label class="medos-appointment-label">Choose Time Slot</label>
-        ${this.state.slots.length === 0
-            ? '<div class="medos-appointment-small-muted">No slots available for selected date</div>'
+      <div class="medos-section-card">
+        <div class="medos-section-header">
+          ${VanillaIcons.clock(14)}
+          <span class="medos-section-title">Select Time Slot</span>
+        </div>
+        <div class="medos-section-body">
+          <div class="medos-selected-date-display">
+            ${VanillaIcons.dateTime(16)}
+            <span>${dateDisplay}</span>
+          </div>
+          ${this.state.slots.length === 0
+            ? '<div class="medos-empty-slots">No slots available for selected date</div>'
             : `
-            <div class="medos-appointment-slot-grid">
-              ${this.state.slots
+              <div class="medos-slots-grid">
+                ${this.state.slots
                 .map((s) => {
                 const start = new Date(s.start).toLocaleTimeString([], {
                     hour: "2-digit",
@@ -4747,19 +6545,28 @@
                 const selected = this.state.selectedSlot?.start === s.start &&
                     this.state.selectedSlot?.end === s.end;
                 return `
-                  <div class="medos-appointment-slot-card ${selected ? "selected" : ""}" data-slot-id="${this.escapeHtml(s.id || `${s.start}-${s.end}`)}" data-slot-start="${this.escapeHtml(s.start)}" data-slot-end="${this.escapeHtml(s.end)}">
-                    <div class="medos-appointment-slot-time">${start} — ${end}</div>
-                  </div>
-                `;
+                    <div class="medos-slot-card ${selected ? "selected" : ""}" 
+                         data-slot-id="${this.escapeHtml(s.id || `${s.start}-${s.end}`)}" 
+                         data-slot-start="${this.escapeHtml(s.start)}" 
+                         data-slot-end="${this.escapeHtml(s.end)}">
+                      <span class="medos-slot-time">${start}</span>
+                      <span class="medos-slot-separator">-</span>
+                      <span class="medos-slot-time">${end}</span>
+                      ${selected
+                    ? `<span class="medos-slot-check">${VanillaIcons.check(14)}</span>`
+                    : ""}
+                    </div>
+                  `;
             })
                 .join("")}
-            </div>
-          `}
-        <div class="medos-appointment-actions">
-          <button class="medos-appointment-btn medos-appointment-btn-secondary" id="medos-btn-back">Back</button>
-          <button class="medos-appointment-btn medos-appointment-btn-primary" id="medos-btn-next" ${!this.state.selectedSlot ? "disabled" : ""} style="opacity: ${this.state.selectedSlot ? 1 : 0.6}">Next</button>
+              </div>
+            `}
         </div>
       </div>
+      <div class="medos-actions">
+        <button class="medos-btn medos-btn-secondary" id="medos-btn-back">Back</button>
+        <button class="medos-btn medos-btn-primary" id="medos-btn-next" ${this.state.selectedSlot ? "" : "disabled"} style="opacity: ${this.state.selectedSlot ? 1 : 0.6}">Next</button>
+      </div>
     `;
       }
       renderStep3() {
@@ -4768,47 +6575,87 @@
           const canSendOtp = countryCodeValid && phoneValid && !this.state.otpSending;
           if (!this.state.otpSent) {
               return `
-        <div class="medos-appointment-section">
-          <label class="medos-appointment-label">Country Code</label>
-          <input type="text" class="medos-appointment-input" id="medos-country-code" placeholder="+91" value="${this.escapeHtml(this.state.countryCode)}" />
-          ${this.state.countryCode && !countryCodeValid
-                ? '<div class="medos-appointment-validation-error">Please enter a valid country code (e.g., +91, +1)</div>'
-                : ""}
-          <label class="medos-appointment-label" style="margin-top: 12px">Phone Number</label>
-          <input type="tel" class="medos-appointment-input" id="medos-phone" placeholder="9311840587" value="${this.escapeHtml(this.state.patientPhone)}" maxlength="15" />
-          ${this.state.patientPhone && !phoneValid
-                ? '<div class="medos-appointment-validation-error">Phone number should be 7-15 digits</div>'
+        <div class="medos-section-card">
+          <div class="medos-section-header">
+            ${VanillaIcons.phone(14)}
+            <span class="medos-section-title">Phone Verification</span>
+          </div>
+          <div class="medos-section-body">
+            <p class="medos-section-description">Please enter your phone number for verification</p>
+            <div class="medos-phone-input-row">
+              <div class="medos-country-code-wrapper">
+                <div id="medos-country-code-container"></div>
+              </div>
+              <div class="medos-phone-wrapper">
+                <input 
+                  type="tel" 
+                  class="medos-input" 
+                  id="medos-phone" 
+                  placeholder="Enter phone number" 
+                  value="${this.escapeHtml(this.state.patientPhone)}" 
+                  maxlength="15"
+                />
+              </div>
+            </div>
+            ${this.state.patientPhone && !phoneValid
+                ? '<div class="medos-validation-error">Phone number should be 7-15 digits</div>'
                 : ""}
-          <div class="medos-appointment-actions">
-            <button class="medos-appointment-btn medos-appointment-btn-secondary" id="medos-btn-back">Back</button>
-            <button class="medos-appointment-btn medos-appointment-btn-primary" id="medos-btn-send-otp" ${!canSendOtp ? "disabled" : ""} style="opacity: ${canSendOtp ? 1 : 0.6}">${this.state.otpSending ? "Sending..." : "Send OTP"}</button>
           </div>
         </div>
+        <div class="medos-actions">
+          <button class="medos-btn medos-btn-secondary" id="medos-btn-back">Back</button>
+          <button class="medos-btn medos-btn-primary" id="medos-btn-send-otp" ${canSendOtp ? "" : "disabled"}>${this.state.otpSending ? "Sending..." : "Send OTP"}</button>
+        </div>
       `;
           }
           if (this.state.otpVerified) {
               return `
-        <div class="medos-appointment-section">
-          <div class="medos-appointment-verified">✓ Phone verified successfully</div>
-          <div class="medos-appointment-actions">
-            <button class="medos-appointment-btn medos-appointment-btn-secondary" id="medos-btn-back">Back</button>
-            <button class="medos-appointment-btn medos-appointment-btn-primary" id="medos-btn-next">Continue to Details</button>
+        <div class="medos-section-card">
+          <div class="medos-section-header">
+            ${VanillaIcons.phone(14)}
+            <span class="medos-section-title">Phone Verification</span>
+          </div>
+          <div class="medos-section-body">
+            <div class="medos-verified-badge">
+              ${VanillaIcons.successBadge(20)}
+              <span>Phone verified successfully</span>
+            </div>
+            <div class="medos-verified-number">${this.escapeHtml(this.state.countryCode)} ${this.escapeHtml(this.state.patientPhone)}</div>
           </div>
         </div>
+        <div class="medos-actions">
+          <button class="medos-btn medos-btn-secondary" id="medos-btn-back">Back</button>
+          <button class="medos-btn medos-btn-primary" id="medos-btn-next">Continue</button>
+        </div>
       `;
           }
           return `
-      <div class="medos-appointment-section">
-        <label class="medos-appointment-label">Enter OTP</label>
-        <input type="text" class="medos-appointment-input" id="medos-otp" placeholder="Enter 6-digit OTP" value="${this.escapeHtml(this.state.otpCode)}" maxlength="6" />
-        <div class="medos-appointment-otp-info">OTP sent to ${this.escapeHtml(this.state.countryCode)} ${this.escapeHtml(this.state.patientPhone)}</div>
-        <div class="medos-appointment-actions">
-          <button class="medos-appointment-btn medos-appointment-btn-secondary" id="medos-btn-change-number">Change Number</button>
-          <button class="medos-appointment-btn medos-appointment-btn-primary" id="medos-btn-verify-otp" ${this.state.otpCode.length !== 6 || this.state.otpVerifying
-            ? "disabled"
-            : ""} style="opacity: ${this.state.otpCode.length === 6 && !this.state.otpVerifying ? 1 : 0.6}">${this.state.otpVerifying ? "Verifying..." : "Verify OTP"}</button>
+      <div class="medos-section-card">
+        <div class="medos-section-header">
+          ${VanillaIcons.phone(14)}
+          <span class="medos-section-title">Enter OTP</span>
+        </div>
+        <div class="medos-section-body">
+          <p class="medos-section-description">Enter the 6-digit code sent to ${this.escapeHtml(this.state.countryCode)} ${this.escapeHtml(this.state.patientPhone)}</p>
+          <div class="medos-otp-input-wrapper">
+            <input 
+              type="text" 
+              class="medos-input medos-otp-input" 
+              id="medos-otp" 
+              placeholder="Enter 6-digit OTP" 
+              value="${this.escapeHtml(this.state.otpCode)}" 
+              maxlength="6"
+            />
+          </div>
+          <button class="medos-link-btn" id="medos-btn-change-number">Change phone number</button>
         </div>
       </div>
+      <div class="medos-actions">
+        <button class="medos-btn medos-btn-secondary" id="medos-btn-resend-otp">Resend OTP</button>
+        <button class="medos-btn medos-btn-primary" id="medos-btn-verify-otp" ${this.state.otpCode.length === 6 && !this.state.otpVerifying
+            ? ""
+            : "disabled"}>${this.state.otpVerifying ? "Verifying..." : "Verify OTP"}</button>
+      </div>
     `;
       }
       renderStep4() {
@@ -4820,50 +6667,79 @@
               this.state.patientZipcode &&
               this.state.otpVerified;
           return `
-      <div class="medos-appointment-section">
-        <label class="medos-appointment-label">Patient Name</label>
-        <input type="text" class="medos-appointment-input" id="medos-patient-name" placeholder="Full name" value="${this.escapeHtml(this.state.patientName)}" />
-        <label class="medos-appointment-label" style="margin-top: 12px">Age</label>
-        <input type="number" class="medos-appointment-input" id="medos-patient-age" placeholder="Age" value="${this.escapeHtml(this.state.patientAge)}" />
-        <label class="medos-appointment-label" style="margin-top: 12px">Email (Optional)</label>
-        <input type="email" class="medos-appointment-input" id="medos-patient-email" placeholder="patient@example.com" value="${this.escapeHtml(this.state.patientEmail)}" />
-        <label class="medos-appointment-label" style="margin-top: 12px">Gender (Optional)</label>
-        <select class="medos-appointment-select" id="medos-patient-gender">
-          <option value="">-- Select Gender --</option>
-          <option value="MALE" ${this.state.patientGender === "MALE" ? "selected" : ""}>Male</option>
-          <option value="FEMALE" ${this.state.patientGender === "FEMALE" ? "selected" : ""}>Female</option>
-          <option value="OTHER" ${this.state.patientGender === "OTHER" ? "selected" : ""}>Other</option>
-        </select>
-        <label class="medos-appointment-label" style="margin-top: 12px">Address Line 1 *</label>
-        <input type="text" class="medos-appointment-input" id="medos-patient-address" placeholder="Street address, building name, etc." value="${this.escapeHtml(this.state.patientAddress)}" />
-        <div class="medos-appointment-form-grid">
-          <div>
-            <label class="medos-appointment-label">City *</label>
-            <input type="text" class="medos-appointment-input" id="medos-patient-city" placeholder="City" value="${this.escapeHtml(this.state.patientCity)}" />
+      <div class="medos-section-card">
+        <div class="medos-section-header">
+          ${VanillaIcons.user(14)}
+          <span class="medos-section-title">Patient Information</span>
+        </div>
+        <div class="medos-section-body">
+          <div class="medos-form-row">
+            <div class="medos-form-group medos-form-group-flex">
+              <label class="medos-label">Full Name <span class="medos-required">*</span></label>
+              <input type="text" class="medos-input" id="medos-patient-name" placeholder="Enter full name" value="${this.escapeHtml(this.state.patientName)}" />
+            </div>
+            <div class="medos-form-group medos-form-group-small">
+              <label class="medos-label">Age</label>
+              <input type="number" class="medos-input" id="medos-patient-age" placeholder="Age" value="${this.escapeHtml(this.state.patientAge)}" />
+            </div>
+          </div>
+          <div class="medos-form-row">
+            <div class="medos-form-group medos-form-group-flex">
+              <label class="medos-label">Email</label>
+              <input type="email" class="medos-input" id="medos-patient-email" placeholder="patient@example.com" value="${this.escapeHtml(this.state.patientEmail)}" />
+            </div>
+            <div class="medos-form-group medos-form-group-small">
+              <label class="medos-label">Gender</label>
+              <div id="medos-gender-container"></div>
+            </div>
           </div>
-          <div>
-            <label class="medos-appointment-label">State *</label>
-            <input type="text" class="medos-appointment-input" id="medos-patient-state" placeholder="State" value="${this.escapeHtml(this.state.patientState)}" />
+          <div class="medos-form-group">
+            <label class="medos-label">Blood Group <span class="medos-optional">(optional)</span></label>
+            <div id="medos-blood-group-container"></div>
           </div>
         </div>
-        <div class="medos-appointment-form-grid">
-          <div>
-            <label class="medos-appointment-label">Country *</label>
-            <input type="text" class="medos-appointment-input" id="medos-patient-country" placeholder="Country" value="${this.escapeHtml(this.state.patientCountry)}" />
+      </div>
+
+      <div class="medos-section-card">
+        <div class="medos-section-header">
+          ${VanillaIcons.mapPin(14)}
+          <span class="medos-section-title">Address Details</span>
+        </div>
+        <div class="medos-section-body">
+          <div class="medos-form-group">
+            <label class="medos-label">Address Line 1 <span class="medos-required">*</span></label>
+            <input type="text" class="medos-input" id="medos-patient-address" placeholder="Street address, building name, etc." value="${this.escapeHtml(this.state.patientAddress)}" />
           </div>
-          <div>
-            <label class="medos-appointment-label">Zipcode *</label>
-            <input type="text" class="medos-appointment-input" id="medos-patient-zipcode" placeholder="Zipcode" value="${this.escapeHtml(this.state.patientZipcode)}" />
+          <div class="medos-form-row">
+            <div class="medos-form-group">
+              <label class="medos-label">City <span class="medos-required">*</span></label>
+              <input type="text" class="medos-input" id="medos-patient-city" placeholder="City" value="${this.escapeHtml(this.state.patientCity)}" />
+            </div>
+            <div class="medos-form-group">
+              <label class="medos-label">State <span class="medos-required">*</span></label>
+              <input type="text" class="medos-input" id="medos-patient-state" placeholder="State" value="${this.escapeHtml(this.state.patientState)}" />
+            </div>
+          </div>
+          <div class="medos-form-row">
+            <div class="medos-form-group">
+              <label class="medos-label">Country <span class="medos-required">*</span></label>
+              <input type="text" class="medos-input" id="medos-patient-country" placeholder="Country" value="${this.escapeHtml(this.state.patientCountry)}" />
+            </div>
+            <div class="medos-form-group">
+              <label class="medos-label">Zipcode <span class="medos-required">*</span></label>
+              <input type="text" class="medos-input" id="medos-patient-zipcode" placeholder="Zipcode" value="${this.escapeHtml(this.state.patientZipcode)}" />
+            </div>
+          </div>
+          <div class="medos-form-group">
+            <label class="medos-label">Landmark <span class="medos-optional">(optional)</span></label>
+            <input type="text" class="medos-input" id="medos-patient-landmark" placeholder="Nearby landmark" value="${this.escapeHtml(this.state.patientLandmark)}" />
           </div>
         </div>
-        <label class="medos-appointment-label" style="margin-top: 12px">Landmark (Optional)</label>
-        <input type="text" class="medos-appointment-input" id="medos-patient-landmark" placeholder="Nearby landmark" value="${this.escapeHtml(this.state.patientLandmark)}" />
-        <label class="medos-appointment-label" style="margin-top: 12px">Problem Facing</label>
-        <textarea class="medos-appointment-textarea" id="medos-problem-facing" placeholder="Describe the problem you're facing">${this.escapeHtml(this.state.patientName)}</textarea>
-        <div class="medos-appointment-actions">
-          <button class="medos-appointment-btn medos-appointment-btn-secondary" id="medos-btn-back">Back</button>
-          <button class="medos-appointment-btn medos-appointment-btn-primary" id="medos-btn-submit" ${!canSubmit || this.state.loading ? "disabled" : ""} style="opacity: ${canSubmit && !this.state.loading ? 1 : 0.6}">${this.state.loading ? "Booking..." : "Book Appointment"}</button>
-        </div>
+      </div>
+
+      <div class="medos-actions">
+        <button class="medos-btn medos-btn-secondary" id="medos-btn-back">Back</button>
+        <button class="medos-btn medos-btn-primary" id="medos-btn-submit" ${canSubmit && !this.state.loading ? "" : "disabled"}>${this.state.loading ? "Booking..." : "Book Appointment"}</button>
       </div>
     `;
       }
@@ -4982,35 +6858,20 @@
   `;
       }
       attachEventListeners() {
-          const addressSelect = this.container.querySelector("#medos-address-select");
-          if (addressSelect) {
-              addressSelect.addEventListener("change", (e) => {
-                  const target = e.target;
-                  this.handleAddressChange(Number(target.value) || null);
-              });
-          }
-          const doctorSelect = this.container.querySelector("#medos-doctor-select");
-          if (doctorSelect) {
-              doctorSelect.addEventListener("change", (e) => {
-                  const target = e.target;
-                  this.state.selectedDoctor = Number(target.value) || null;
-                  this.render();
-              });
-          }
-          const dateInput = this.container.querySelector("#medos-date-input");
-          if (dateInput) {
-              dateInput.addEventListener("change", (e) => {
+          const consultationRadios = this.container.querySelectorAll('input[name="consultationMode"]');
+          consultationRadios.forEach((radio) => {
+              radio.addEventListener("change", (e) => {
                   const target = e.target;
-                  this.state.selectedDate = new Date(target.value);
+                  this.state.consultationMode = target.value;
                   this.render();
               });
-          }
-          const slotCards = this.container.querySelectorAll(".medos-appointment-slot-card");
+          });
+          const slotCards = this.container.querySelectorAll(".medos-slot-card");
           slotCards.forEach((card) => {
               card.addEventListener("click", () => {
-                  const slotId = card.getAttribute("data-slot-id");
-                  const slotStart = card.getAttribute("data-slot-start");
-                  const slotEnd = card.getAttribute("data-slot-end");
+                  const slotId = card.dataset.slotId;
+                  const slotStart = card.dataset.slotStart;
+                  const slotEnd = card.dataset.slotEnd;
                   if (slotStart && slotEnd) {
                       this.state.selectedSlot = {
                           start: slotStart,
@@ -5032,7 +6893,11 @@
                   value = value.replace(/[^\d+]/g, "");
                   this.state.countryCode = value;
                   target.value = value;
-                  this.render();
+                  const sendOtpBtn = this.container.querySelector("#medos-btn-send-otp");
+                  if (sendOtpBtn) {
+                      const canSendOtp = this.state.countryCode && this.state.patientPhone.length >= 10;
+                      sendOtpBtn.disabled = !canSendOtp;
+                  }
               });
           }
           const phoneInput = this.container.querySelector("#medos-phone");
@@ -5041,7 +6906,11 @@
                   const target = e.target;
                   this.state.patientPhone = target.value.replace(/\D/g, "");
                   target.value = this.state.patientPhone;
-                  this.render();
+                  const sendOtpBtn = this.container.querySelector("#medos-btn-send-otp");
+                  if (sendOtpBtn) {
+                      const canSendOtp = this.state.countryCode && this.state.patientPhone.length >= 10;
+                      sendOtpBtn.disabled = !canSendOtp;
+                  }
               });
           }
           const otpInput = this.container.querySelector("#medos-otp");
@@ -5049,7 +6918,10 @@
               otpInput.addEventListener("input", (e) => {
                   const target = e.target;
                   this.state.otpCode = target.value;
-                  this.render();
+                  const verifyBtn = this.container.querySelector("#medos-btn-verify-otp");
+                  if (verifyBtn) {
+                      verifyBtn.disabled = !(this.state.otpCode.length === 6 && !this.state.otpVerifying);
+                  }
               });
           }
           const patientNameInput = this.container.querySelector("#medos-patient-name");
@@ -5057,6 +6929,7 @@
               patientNameInput.addEventListener("input", (e) => {
                   const target = e.target;
                   this.state.patientName = target.value;
+                  this.updateSubmitButtonState();
               });
           }
           const patientAgeInput = this.container.querySelector("#medos-patient-age");
@@ -5064,6 +6937,7 @@
               patientAgeInput.addEventListener("input", (e) => {
                   const target = e.target;
                   this.state.patientAge = target.value;
+                  this.updateSubmitButtonState();
               });
           }
           const patientEmailInput = this.container.querySelector("#medos-patient-email");
@@ -5071,6 +6945,7 @@
               patientEmailInput.addEventListener("input", (e) => {
                   const target = e.target;
                   this.state.patientEmail = target.value;
+                  this.updateSubmitButtonState();
               });
           }
           const patientGenderSelect = this.container.querySelector("#medos-patient-gender");
@@ -5085,6 +6960,7 @@
               patientAddressInput.addEventListener("input", (e) => {
                   const target = e.target;
                   this.state.patientAddress = target.value;
+                  this.updateSubmitButtonState();
               });
           }
           const patientCityInput = this.container.querySelector("#medos-patient-city");
@@ -5092,6 +6968,7 @@
               patientCityInput.addEventListener("input", (e) => {
                   const target = e.target;
                   this.state.patientCity = target.value;
+                  this.updateSubmitButtonState();
               });
           }
           const patientStateInput = this.container.querySelector("#medos-patient-state");
@@ -5099,6 +6976,7 @@
               patientStateInput.addEventListener("input", (e) => {
                   const target = e.target;
                   this.state.patientState = target.value;
+                  this.updateSubmitButtonState();
               });
           }
           const patientCountryInput = this.container.querySelector("#medos-patient-country");
@@ -5106,6 +6984,7 @@
               patientCountryInput.addEventListener("input", (e) => {
                   const target = e.target;
                   this.state.patientCountry = target.value;
+                  this.updateSubmitButtonState();
               });
           }
           const patientZipcodeInput = this.container.querySelector("#medos-patient-zipcode");
@@ -5113,6 +6992,7 @@
               patientZipcodeInput.addEventListener("input", (e) => {
                   const target = e.target;
                   this.state.patientZipcode = target.value;
+                  this.updateSubmitButtonState();
               });
           }
           const patientLandmarkInput = this.container.querySelector("#medos-patient-landmark");
@@ -5124,7 +7004,11 @@
           }
           const nextBtn = this.container.querySelector("#medos-btn-next");
           if (nextBtn) {
-              nextBtn.addEventListener("click", () => this.goToNext());
+              nextBtn.addEventListener("click", () => {
+                  if (!nextBtn.disabled) {
+                      this.goToNext();
+                  }
+              });
           }
           const backBtn = this.container.querySelector("#medos-btn-back");
           if (backBtn) {
@@ -5132,11 +7016,19 @@
           }
           const sendOtpBtn = this.container.querySelector("#medos-btn-send-otp");
           if (sendOtpBtn) {
-              sendOtpBtn.addEventListener("click", () => this.sendOtp());
+              sendOtpBtn.addEventListener("click", () => {
+                  if (!sendOtpBtn.disabled) {
+                      this.sendOtp();
+                  }
+              });
           }
           const verifyOtpBtn = this.container.querySelector("#medos-btn-verify-otp");
           if (verifyOtpBtn) {
-              verifyOtpBtn.addEventListener("click", () => this.verifyOtp());
+              verifyOtpBtn.addEventListener("click", () => {
+                  if (!verifyOtpBtn.disabled) {
+                      this.verifyOtp();
+                  }
+              });
           }
           const changeNumberBtn = this.container.querySelector("#medos-btn-change-number");
           if (changeNumberBtn) {
@@ -5145,9 +7037,19 @@
                   this.render();
               });
           }
+          const resendOtpBtn = this.container.querySelector("#medos-btn-resend-otp");
+          if (resendOtpBtn) {
+              resendOtpBtn.addEventListener("click", () => {
+                  this.sendOtp();
+              });
+          }
           const submitBtn = this.container.querySelector("#medos-btn-submit");
           if (submitBtn) {
-              submitBtn.addEventListener("click", () => this.submitAppointment());
+              submitBtn.addEventListener("click", () => {
+                  if (!submitBtn.disabled) {
+                      this.submitAppointment();
+                  }
+              });
           }
           const bookAnotherBtn = this.container.querySelector("#medos-btn-book-another");
           if (bookAnotherBtn) {
@@ -5223,9 +7125,18 @@
       return /^\+[1-9]\d{0,3}$/.test(code);
   };
 
+  const COUNTRY_CODES_ENQUIRY = [
+      { value: "+91", label: "🇮🇳 +91" },
+      { value: "+1", label: "🇺🇸 +1" },
+      { value: "+44", label: "🇬🇧 +44" },
+      { value: "+86", label: "🇨🇳 +86" },
+      { value: "+81", label: "🇯🇵 +81" },
+  ];
   class EnquiryFormWidget {
       constructor(container, options) {
           this.mounted = true;
+          this.countryCodeSelect = null;
+          injectThemedStyles();
           if (typeof container === "string") {
               const el = document.getElementById(container);
               if (!el) {
@@ -5407,6 +7318,23 @@
       </div>
     `;
           this.attachEventListeners();
+          this.initializeCustomComponents();
+      }
+      initializeCustomComponents() {
+          if (this.state.step === 0) {
+              const countryCodeContainer = this.container.querySelector("#medos-enquiry-country-code-container");
+              if (countryCodeContainer) {
+                  this.countryCodeSelect = new VanillaSelect(countryCodeContainer, COUNTRY_CODES_ENQUIRY, {
+                      placeholder: "Country",
+                      onValueChange: (value) => {
+                          this.state.countryCode = value;
+                      },
+                  });
+                  if (this.state.countryCode) {
+                      this.countryCodeSelect.setValue(this.state.countryCode);
+                  }
+              }
+          }
       }
       renderStep() {
           switch (this.state.step) {
@@ -5424,121 +7352,147 @@
       }
       renderStep0() {
           return `
-      <div class="medos-enquiry-section">
-        <label class="medos-enquiry-label">Full Name *</label>
-        <input 
-          type="text" 
-          class="medos-enquiry-input" 
-          id="medos-enquiry-name" 
-          placeholder="Enter your full name"
-          value="${this.escapeHtml(this.state.patientName)}"
-        />
-        
-        <label class="medos-enquiry-label" style="margin-top: 12px">Email Address *</label>
-        <input 
-          type="email" 
-          class="medos-enquiry-input" 
-          id="medos-enquiry-email" 
-          placeholder="your.email@example.com"
-          value="${this.escapeHtml(this.state.patientEmail)}"
-        />
-        
-        <label class="medos-enquiry-label" style="margin-top: 12px">Country Code *</label>
-        <input 
-          type="text" 
-          class="medos-enquiry-input" 
-          id="medos-enquiry-country-code" 
-          placeholder="+91"
-          value="${this.escapeHtml(this.state.countryCode)}"
-        />
-        
-        <label class="medos-enquiry-label" style="margin-top: 12px">Phone Number *</label>
-        <input 
-          type="tel" 
-          class="medos-enquiry-input" 
-          id="medos-enquiry-phone" 
-          placeholder="9876543210"
-          value="${this.escapeHtml(this.state.patientPhone)}"
-          maxlength="15"
-        />
-        
-        <div class="medos-enquiry-actions">
-          <button class="medos-enquiry-btn medos-enquiry-btn-secondary" id="medos-enquiry-btn-cancel">Cancel</button>
-          <button class="medos-enquiry-btn medos-enquiry-btn-primary" id="medos-enquiry-btn-next">Next</button>
+      <div class="medos-section-card">
+        <div class="medos-section-header">
+          ${VanillaIcons.user(14)}
+          <span class="medos-section-title">Contact Information</span>
+        </div>
+        <div class="medos-section-body">
+          <div class="medos-form-group">
+            <label class="medos-label">Full Name <span class="medos-required">*</span></label>
+            <input 
+              type="text" 
+              class="medos-input" 
+              id="medos-enquiry-name" 
+              placeholder="Enter your full name"
+              value="${this.escapeHtml(this.state.patientName)}"
+            />
+          </div>
+          
+          <div class="medos-form-group">
+            <label class="medos-label">Email Address <span class="medos-required">*</span></label>
+            <input 
+              type="email" 
+              class="medos-input" 
+              id="medos-enquiry-email" 
+              placeholder="your.email@example.com"
+              value="${this.escapeHtml(this.state.patientEmail)}"
+            />
+          </div>
+          
+          <div class="medos-form-group">
+            <label class="medos-label">Phone Number <span class="medos-required">*</span></label>
+            <div class="medos-phone-input-row">
+              <div class="medos-country-code-wrapper">
+                <div id="medos-enquiry-country-code-container"></div>
+              </div>
+              <div class="medos-phone-wrapper">
+                <input 
+                  type="tel" 
+                  class="medos-input" 
+                  id="medos-enquiry-phone" 
+                  placeholder="Enter phone number"
+                  value="${this.escapeHtml(this.state.patientPhone)}"
+                  maxlength="15"
+                />
+              </div>
+            </div>
+          </div>
         </div>
       </div>
+      
+      <div class="medos-actions">
+        <button class="medos-btn medos-btn-secondary" id="medos-enquiry-btn-cancel">Cancel</button>
+        <button class="medos-btn medos-btn-primary" id="medos-enquiry-btn-next">Next</button>
+      </div>
     `;
       }
       renderStep1() {
           return `
-      <div class="medos-enquiry-section">
-        <label class="medos-enquiry-label">Subject *</label>
-        <input 
-          type="text" 
-          class="medos-enquiry-input" 
-          id="medos-enquiry-subject" 
-          placeholder="What is your inquiry about?"
-          value="${this.escapeHtml(this.state.inquirySubject)}"
-        />
-        
-        <label class="medos-enquiry-label" style="margin-top: 12px">Message *</label>
-        <textarea 
-          class="medos-enquiry-textarea" 
-          id="medos-enquiry-message" 
-          placeholder="Please describe your inquiry in detail (max 1000 characters)"
-          maxlength="1000"
-        >${this.escapeHtml(this.state.inquiryMessage)}</textarea>
-        <div class="medos-enquiry-char-count">${this.state.inquiryMessage.length}/1000</div>
-        
-        <div class="medos-enquiry-actions">
-          <button class="medos-enquiry-btn medos-enquiry-btn-secondary" id="medos-enquiry-btn-back">Back</button>
-          <button class="medos-enquiry-btn medos-enquiry-btn-primary" id="medos-enquiry-btn-next">Next</button>
+      <div class="medos-section-card">
+        <div class="medos-section-header">
+          ${VanillaIcons.mail(14)}
+          <span class="medos-section-title">Inquiry Details</span>
         </div>
+        <div class="medos-section-body">
+          <div class="medos-form-group">
+            <label class="medos-label">Subject <span class="medos-required">*</span></label>
+            <input 
+              type="text" 
+              class="medos-input" 
+              id="medos-enquiry-subject" 
+              placeholder="What is your inquiry about?"
+              value="${this.escapeHtml(this.state.inquirySubject)}"
+            />
+          </div>
+          
+          <div class="medos-form-group">
+            <label class="medos-label">Message <span class="medos-required">*</span></label>
+            <textarea 
+              class="medos-textarea" 
+              id="medos-enquiry-message" 
+              placeholder="Please describe your inquiry in detail (max 1000 characters)"
+              maxlength="1000"
+            >${this.escapeHtml(this.state.inquiryMessage)}</textarea>
+            <div class="medos-char-count">${this.state.inquiryMessage.length}/1000</div>
+          </div>
+        </div>
+      </div>
+      
+      <div class="medos-actions">
+        <button class="medos-btn medos-btn-secondary" id="medos-enquiry-btn-back">Back</button>
+        <button class="medos-btn medos-btn-primary" id="medos-enquiry-btn-next">Next</button>
       </div>
     `;
       }
       renderStep2() {
           return `
-      <div class="medos-enquiry-section">
-        <label class="medos-enquiry-label">Preferred Contact Method *</label>
-        <div class="medos-enquiry-radio-group">
-          <label class="medos-enquiry-radio-label">
-            <input 
-              type="radio" 
-              name="contact-method" 
-              value="PHONE"
-              ${this.state.preferredContactMethod === "PHONE" ? "checked" : ""}
-              id="medos-enquiry-contact-phone"
-            />
-            <span>Phone</span>
-          </label>
-          <label class="medos-enquiry-radio-label">
-            <input 
-              type="radio" 
-              name="contact-method" 
-              value="EMAIL"
-              ${this.state.preferredContactMethod === "EMAIL" ? "checked" : ""}
-              id="medos-enquiry-contact-email"
-            />
-            <span>Email</span>
-          </label>
-          <label class="medos-enquiry-radio-label">
-            <input 
-              type="radio" 
-              name="contact-method" 
-              value="BOTH"
-              ${this.state.preferredContactMethod === "BOTH" ? "checked" : ""}
-              id="medos-enquiry-contact-both"
-            />
-            <span>Both</span>
-          </label>
+      <div class="medos-section-card">
+        <div class="medos-section-header">
+          ${VanillaIcons.phone(14)}
+          <span class="medos-section-title">Contact Preference</span>
         </div>
-        
-        <div class="medos-enquiry-actions">
-          <button class="medos-enquiry-btn medos-enquiry-btn-secondary" id="medos-enquiry-btn-back">Back</button>
-          <button class="medos-enquiry-btn medos-enquiry-btn-primary" id="medos-enquiry-btn-submit" ${this.state.loading ? "disabled" : ""} style="opacity: ${this.state.loading ? 0.6 : 1}">${this.state.loading ? "Submitting..." : "Submit Inquiry"}</button>
+        <div class="medos-section-body">
+          <p class="medos-section-description">How would you prefer to be contacted?</p>
+          <div class="medos-contact-options">
+            <label class="medos-radio-option ${this.state.preferredContactMethod === "PHONE" ? "selected" : ""}">
+              <input 
+                type="radio" 
+                name="contact-method" 
+                value="PHONE"
+                ${this.state.preferredContactMethod === "PHONE" ? "checked" : ""}
+                class="medos-radio-input"
+              />
+              <span class="medos-radio-label">Phone</span>
+            </label>
+            <label class="medos-radio-option ${this.state.preferredContactMethod === "EMAIL" ? "selected" : ""}">
+              <input 
+                type="radio" 
+                name="contact-method" 
+                value="EMAIL"
+                ${this.state.preferredContactMethod === "EMAIL" ? "checked" : ""}
+                class="medos-radio-input"
+              />
+              <span class="medos-radio-label">Email</span>
+            </label>
+            <label class="medos-radio-option ${this.state.preferredContactMethod === "BOTH" ? "selected" : ""}">
+              <input 
+                type="radio" 
+                name="contact-method" 
+                value="BOTH"
+                ${this.state.preferredContactMethod === "BOTH" ? "checked" : ""}
+                class="medos-radio-input"
+              />
+              <span class="medos-radio-label">Both</span>
+            </label>
+          </div>
         </div>
       </div>
+      
+      <div class="medos-actions">
+        <button class="medos-btn medos-btn-secondary" id="medos-enquiry-btn-back">Back</button>
+        <button class="medos-btn medos-btn-primary" id="medos-enquiry-btn-submit" ${this.state.loading ? "disabled" : ""} style="opacity: ${this.state.loading ? 0.6 : 1}">${this.state.loading ? "Submitting..." : "Submit Inquiry"}</button>
+      </div>
     `;
       }
       renderStep3() {
@@ -5708,6 +7662,8 @@
           init: initEnquiryForm,
           Widget: EnquiryFormWidget,
       };
+      window.MedosAppointmentWidget = AppointmentCalendarWidget;
+      window.MedosEnquiryWidget = EnquiryFormWidget;
   }
 
   exports.AppointmentCalendarWidget = AppointmentCalendarWidget;