@nuitee/booking-widget 1.0.1 → 1.0.3

package/dist/react/styles.css

@@ -106,6 +106,145 @@
   font-weight: 500;
 }
 
+/* ===== Config Error State ===== */
+.booking-widget-config-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1.1em;
+  padding: 4em 2em;
+  text-align: center;
+  min-height: 300px;
+}
+
+.booking-widget-config-error__icon-wrap {
+  width: 5em;
+  height: 5em;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(239,68,68,0.12) 0%, rgba(239,68,68,0.04) 100%);
+  border: 1.5px solid rgba(239, 68, 68, 0.22);
+  box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.06);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #f87171;
+  flex-shrink: 0;
+  margin-bottom: 0.25em;
+}
+
+.booking-widget-config-error__badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4em;
+  font-size: 0.7em;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: #f87171;
+  background: rgba(239, 68, 68, 0.1);
+  border: 1px solid rgba(239, 68, 68, 0.18);
+  border-radius: 99em;
+  padding: 0.3em 0.85em;
+}
+
+.booking-widget-config-error__title {
+  font-family: var(--font-serif, 'Playfair Display', Georgia, serif);
+  font-size: 1.35em;
+  font-weight: 600;
+  color: var(--fg, #e8e0d5);
+  margin: 0;
+  letter-spacing: -0.01em;
+}
+
+.booking-widget-config-error__desc {
+  font-size: 0.875em;
+  color: var(--secondary-fg, #a09080);
+  max-width: 25em;
+  line-height: 1.7;
+  margin: 0;
+}
+
+.booking-widget-config-error__desc code {
+  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', Menlo, monospace;
+  font-size: 0.88em;
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--primary, #f59e0b);
+  padding: 0.12em 0.45em;
+  border-radius: 0.3em;
+  border: 1px solid rgba(255, 255, 255, 0.09);
+}
+
+.booking-widget-config-error__divider {
+  width: 2.5em;
+  height: 1.5px;
+  background: var(--border, rgba(255,255,255,0.1));
+  border-radius: 1px;
+}
+
+.booking-widget-config-error__hint {
+  font-size: 0.78em;
+  color: var(--muted, #6b5f50);
+  max-width: 21em;
+  line-height: 1.6;
+  margin: 0;
+}
+
+.booking-widget-config-error__retry {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45em;
+  padding: 0.55em 1.4em;
+  background: transparent;
+  color: var(--secondary-fg, #a09080);
+  border: 1.5px solid var(--border, rgba(255,255,255,0.13));
+  border-radius: 99em;
+  font-size: 0.8em;
+  font-family: var(--font-sans, system-ui, sans-serif);
+  font-weight: 500;
+  cursor: pointer;
+  letter-spacing: 0.02em;
+  transition: border-color 0.2s, color 0.2s, background 0.2s;
+  margin-top: 0.25em;
+}
+
+.booking-widget-config-error__retry:hover {
+  border-color: var(--primary, #f59e0b);
+  color: var(--primary, #f59e0b);
+  background: rgba(245, 158, 11, 0.06);
+}
+
+/* ===== Config Loading State ===== */
+.booking-widget-config-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1.25em;
+  padding: 4em 2em;
+  text-align: center;
+  min-height: 300px;
+}
+
+.booking-widget-config-loading__spinner {
+  width: 2.75em;
+  height: 2.75em;
+  border: 2px solid var(--border, rgba(255,255,255,0.1));
+  border-top-color: var(--primary, hsl(38,60%,55%));
+  border-radius: 50%;
+  animation: bw-spin 0.75s linear infinite;
+}
+
+@keyframes bw-spin {
+  to { transform: rotate(360deg); }
+}
+
+.booking-widget-config-loading__text {
+  font-size: 0.875em;
+  color: var(--muted, #888);
+  letter-spacing: 0.01em;
+}
+
 /* ===== Step Indicator ===== */
 .booking-widget-step-indicator {
   display: flex;
@@ -448,7 +587,7 @@
 }
 
 .booking-widget-modal .date-trigger:hover {
-  border-color: hsl(38, 60%, 55%, 0.5);
+  border-color: var(--primary);
 }
 
 .booking-widget-modal .date-trigger .placeholder {
@@ -472,7 +611,7 @@
   max-width: calc(100vw - 2em);
   box-sizing: border-box;
   z-index: 10;
-  background: var(--card);
+  background: var(--card-solid, var(--card));
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 1em;

package/dist/utils/config-service.js

@@ -0,0 +1,99 @@
+/**
+ * Runtime configuration service for the booking widget.
+ *
+ * Fetches styling config from /load-config keyed by propertyKey.
+ * Results are cached in memory so subsequent calls for the same key are instant.
+ * Throws (or rejects) when propertyKey is missing — callers must handle the
+ * "locked" state and display an error UI rather than attempting to fall back.
+ */
+
+import { DEFAULT_COLORS } from '../core/stripe-config.js';
+import { deriveWidgetStyles } from '../core/color-utils.js';
+
+const CONFIG_BASE_URL = 'https://ai.thehotelplanet.com/load-config';
+
+/** In-memory cache: propertyKey → raw API color object */
+const _configCache = new Map();
+
+/**
+ * Map the /load-config response field names to the internal color keys used
+ * throughout the widget.
+ *
+ * API field          → internal key
+ * widgetBackground   → background
+ * widgetTextColor    → text
+ * primaryColor       → primary
+ * buttonTextColor    → primaryText
+ * widgetCardColor    → card
+ */
+function mapApiColors(data) {
+  const mapped = {};
+  if (data.widgetBackground) mapped.background  = data.widgetBackground;
+  if (data.widgetTextColor)  mapped.text        = data.widgetTextColor;
+  if (data.primaryColor)     mapped.primary     = data.primaryColor;
+  if (data.buttonTextColor)  mapped.primaryText = data.buttonTextColor;
+  if (data.widgetCardColor)  mapped.card        = data.widgetCardColor;
+  return mapped;
+}
+
+/**
+ * Merge colors following priority (highest → lowest):
+ *   1. installerColors (explicit values in the `colors` prop win over everything)
+ *   2. mappedApiColors (values fetched from /load-config override package defaults)
+ *   3. DEFAULT_COLORS  (built-in fallback)
+ *
+ * @param {object} mappedApiColors  - Colors mapped from the API response.
+ * @param {object|null} installerColors - Colors passed via the `colors` prop.
+ * @returns {object} Resolved color set with all five standard keys.
+ */
+export function mergeColors(mappedApiColors, installerColors) {
+  const base = { ...DEFAULT_COLORS, ...(mappedApiColors || {}) };
+  if (!installerColors || typeof installerColors !== 'object') return base;
+  return {
+    background:  installerColors.background  ?? base.background,
+    text:        installerColors.text        ?? base.text,
+    primary:     installerColors.primary     ?? base.primary,
+    primaryText: installerColors.primaryText ?? base.primaryText,
+    card:        installerColors.card ?? installerColors.background ?? base.card,
+  };
+}
+
+/**
+ * Fetch runtime styling configuration from the /load-config endpoint.
+ *
+ * - Throws synchronously (or rejects) when propertyKey is null, undefined, or
+ *   an empty string. Callers must catch this and render a "Missing Configuration"
+ *   error state rather than attempting to render the normal widget UI.
+ * - Caches the raw API color payload by propertyKey. Subsequent calls for the
+ *   same key re-use the cache and only re-merge installer overrides.
+ *
+ * @param {string} propertyKey        - The hotel property key / API key.
+ * @param {object|null} installerColors - Optional installer color overrides.
+ * @returns {Promise<{ apiColors: object, colors: object, widgetStyles: object }>}
+ */
+export async function fetchRuntimeConfig(propertyKey, installerColors = null) {
+  if (!propertyKey || !String(propertyKey).trim()) {
+    throw new Error('propertyKey is required to initialize the booking widget.');
+  }
+
+  const key = String(propertyKey).trim();
+
+  if (_configCache.has(key)) {
+    const apiColors = _configCache.get(key);
+    const colors = mergeColors(apiColors, installerColors);
+    return { apiColors, colors, widgetStyles: deriveWidgetStyles(colors) };
+  }
+
+  const url = `${CONFIG_BASE_URL}?apikey=${encodeURIComponent(key)}&mode=sandbox`;
+  const res = await fetch(url);
+  if (!res.ok) {
+    throw new Error(`Failed to load widget configuration (HTTP ${res.status}).`);
+  }
+
+  const data = await res.json();
+  const apiColors = mapApiColors(data);
+  _configCache.set(key, apiColors);
+
+  const colors = mergeColors(apiColors, installerColors);
+  return { apiColors, colors, widgetStyles: deriveWidgetStyles(colors) };
+}

package/dist/vue/BookingWidget.vue

@@ -10,7 +10,7 @@
       <button class="booking-widget-close" @click="requestClose">
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
       </button>
-      <div v-if="state.step !== 'confirmation'" class="booking-widget-step-indicator">
+      <div v-if="hasPropertyKey && configLoaded && state.step !== 'confirmation'" class="booking-widget-step-indicator">
         <template v-for="(step, i) in STEPS" :key="step.key">
           <div class="step-item">
             <span 
@@ -34,7 +34,46 @@
           </span>
         </template>
       </div>
-      <div class="booking-widget-step-content">
+      <!-- Missing propertyKey error -->
+      <div v-if="!propertyKey || !String(propertyKey).trim()" class="booking-widget-config-error" role="alert">
+        <div class="booking-widget-config-error__icon-wrap">
+          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
+        </div>
+        <span class="booking-widget-config-error__badge">
+          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
+          Missing Configuration
+        </span>
+        <h3 class="booking-widget-config-error__title">Widget Not Configured</h3>
+        <p class="booking-widget-config-error__desc">
+          A <code>propertyKey</code> prop is required to initialize this booking widget. Please provide it to load rooms and availability.
+        </p>
+        <div class="booking-widget-config-error__divider"></div>
+        <p class="booking-widget-config-error__hint">Contact the site administrator to configure this widget.</p>
+      </div>
+
+      <!-- Config fetch error -->
+      <div v-else-if="configError" class="booking-widget-config-error" role="alert">
+        <div class="booking-widget-config-error__icon-wrap">
+          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
+        </div>
+        <span class="booking-widget-config-error__badge">Configuration Error</span>
+        <h3 class="booking-widget-config-error__title">Could Not Load Config</h3>
+        <p class="booking-widget-config-error__desc">{{ configError }}</p>
+        <div class="booking-widget-config-error__divider"></div>
+        <p class="booking-widget-config-error__hint">Please try again or contact support.</p>
+        <button class="booking-widget-config-error__retry" @click="_initRuntimeConfig()">
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 4v6h-6"></path><path d="M1 20v-6h6"></path><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>
+          Try Again
+        </button>
+      </div>
+
+      <!-- Config loading -->
+      <div v-else-if="configLoading" class="booking-widget-config-loading">
+        <div class="booking-widget-config-loading__spinner"></div>
+        <span class="booking-widget-config-loading__text">Loading configuration…</span>
+      </div>
+
+      <div v-else class="booking-widget-step-content">
         <!-- Dates Step -->
         <div v-if="state.step === 'dates'">
           <h2 class="step-title">Plan Your Stay</h2>
@@ -442,6 +481,8 @@ import { loadStripe } from '@stripe/stripe-js';
 import '../core/styles.css';
 import { createBookingApi, formatPrice, buildCheckoutPayload, buildPaymentIntentPayload } from '../core/booking-api.js';
 import { STRIPE_PUBLISHABLE_KEY, API_BASE_URL } from '../core/stripe-config.js';
+import { fetchRuntimeConfig } from '../utils/config-service.js';
+
 
 const BASE_STEPS = [
   { key: 'dates', label: 'Dates & Guests', num: '01' },
@@ -467,6 +508,8 @@ export default {
     propertyId: { type: [String, Number], default: '' },
     /** Property key/hash for decrypt/pref (pass from your app instead of env). */
     propertyKey: { type: String, default: '' },
+    /** 'sandbox' to pass sandbox=true on all proxy/API calls; omit or 'live' to not pass it. */
+    mode: { type: String, default: '' },
     availabilityBaseUrl: { type: String, default: '' },
     propertyBaseUrl: { type: String, default: '' },
     s3BaseUrl: { type: String, default: '' },
@@ -492,6 +535,10 @@ export default {
       loadingRates: false,
       apiError: null,
       confirmationCode: null,
+      configLoading: false,
+      configLoaded: false,
+      configError: null,
+      runtimeWidgetStyles: {},
       calendarMonth: new Date().getMonth(),
       calendarYear: new Date().getFullYear(),
       pickState: 0,
@@ -556,9 +603,10 @@ export default {
       const url = this.effectivePaymentIntentUrl;
       if (!url) return null;
       return async (payload) => {
+        const requestUrl = url + (this.isSandbox ? '?sandbox=true' : '');
         const headers = { 'Content-Type': 'application/json' };
-        if (url.includes('ngrok')) headers['ngrok-skip-browser-warning'] = 'true';
-        const res = await fetch(url, { method: 'POST', headers, body: JSON.stringify(payload) });
+        if (requestUrl.includes('ngrok')) headers['ngrok-skip-browser-warning'] = 'true';
+        const res = await fetch(requestUrl, { method: 'POST', headers, body: JSON.stringify(payload) });
         if (!res.ok) throw new Error(await res.text());
         const data = await res.json();
         const clientSecret = data.clientSecret ?? data.client_secret ?? data.data?.clientSecret ?? data.data?.client_secret ?? data.paymentIntent?.client_secret;
@@ -566,6 +614,12 @@ export default {
         return { clientSecret, confirmationToken };
       };
     },
+    isSandbox() {
+      return this.mode === 'sandbox';
+    },
+    hasPropertyKey() {
+      return !!(this.propertyKey != null && this.propertyKey !== '' && String(this.propertyKey).trim() !== '');
+    },
     bookingApiRef() {
       if (this.bookingApi && typeof this.bookingApi.fetchRooms === 'function') return this.bookingApi;
       if ((this.effectiveApiBaseUrl || this.propertyKey) && typeof createBookingApi === 'function') {
@@ -576,29 +630,14 @@ export default {
           s3BaseUrl: this.effectiveS3BaseUrl || undefined,
           propertyId: this.propertyId != null && this.propertyId !== '' ? String(this.propertyId) : undefined,
           propertyKey: this.propertyKey || undefined,
+          mode: this.mode === 'sandbox' ? 'sandbox' : undefined,
           headers: this.apiSecret ? { 'X-API-Key': this.apiSecret } : undefined,
         });
       }
       return null;
     },
     widgetStyles() {
-      if (!this.colors) return {};
-      const styles = {};
-      if (this.colors.background) {
-        styles['--bg'] = this.colors.background;
-        styles['--card'] = this.colors.background;
-      }
-      if (this.colors.text) {
-        styles['--fg'] = this.colors.text;
-        styles['--card-fg'] = this.colors.text;
-      }
-      if (this.colors.primary) {
-        styles['--primary'] = this.colors.primary;
-      }
-      if (this.colors.primaryText) {
-        styles['--primary-fg'] = this.colors.primaryText;
-      }
-      return styles;
+      return this.runtimeWidgetStyles;
     },
     nights() {
       if (!this.state.checkIn || !this.state.checkOut) return 0;
@@ -684,7 +723,17 @@ export default {
       return this.isOpen && !this.isClosing && this.isReadyForOpen;
     },
   },
+  created() {
+    this._initRuntimeConfig();
+  },
   watch: {
+    propertyKey() {
+      this._initRuntimeConfig();
+    },
+    colors: {
+      deep: true,
+      handler() { this._initRuntimeConfig(); },
+    },
     isOpen: {
       handler(open) {
         if (open && this.onOpen) this.onOpen();
@@ -718,10 +767,31 @@ export default {
     },
   },
   methods: {
+    async _initRuntimeConfig() {
+      if (!this.propertyKey || !String(this.propertyKey).trim()) {
+        this.configError = 'propertyKey is required to initialize the booking widget.';
+        this.configLoading = false;
+        this.configLoaded = false;
+        this.runtimeWidgetStyles = {};
+        return;
+      }
+      this.configLoading = true;
+      this.configError = null;
+      this.configLoaded = false;
+      try {
+        const { widgetStyles } = await fetchRuntimeConfig(this.propertyKey, this.colors);
+        this.runtimeWidgetStyles = widgetStyles;
+        this.configLoaded = true;
+      } catch (err) {
+        this.configError = err?.message || 'Failed to load widget configuration.';
+      } finally {
+        this.configLoading = false;
+      }
+    },
     async fetchConfirmationDetails(token) {
       const t = String(token || '').trim();
       if (!t) throw new Error('Missing confirmation token');
-      const url = `${this.effectiveConfirmationBaseUrl}/proxy/confirmation/${encodeURIComponent(t)}`;
+      const url = `${this.effectiveConfirmationBaseUrl}/proxy/confirmation/${encodeURIComponent(t)}${this.isSandbox ? '?sandbox=true' : ''}`;
       const res = await fetch(url, { method: 'POST' });
       if (!res.ok) throw new Error(await res.text());
       return await res.json();
@@ -750,7 +820,7 @@ export default {
     },
     async loadStripePaymentElement() {
       if (this.state.step !== 'payment' || !this.checkoutShowPaymentForm || !this.stripePublishableKey || typeof this.effectiveCreatePaymentIntent !== 'function') return;
-      const paymentIntentPayload = buildPaymentIntentPayload(this.state, { propertyKey: this.propertyKey || undefined });
+      const paymentIntentPayload = buildPaymentIntentPayload(this.state, { propertyKey: this.propertyKey || undefined, sandbox: this.isSandbox });
       this.paymentElementReady = false;
       try {
         await this.$nextTick();
@@ -789,6 +859,8 @@ export default {
       return i === ci ? 'active' : i < ci ? 'past' : 'future';
     },
     goToStep(step) {
+      // Block navigation to room/rate steps until runtime config is loaded.
+      if ((step === 'rooms' || step === 'rates') && !this.configLoaded) return;
       if (step !== 'summary' && step !== 'payment') this.checkoutShowPaymentForm = false;
       if (step === 'payment') this.checkoutShowPaymentForm = true;
       this.state.step = step;
@@ -859,7 +931,7 @@ export default {
     },
     confirmReservation() {
       if (!this.canSubmit) return;
-      const payload = buildCheckoutPayload(this.state, { propertyId: this.propertyId != null && this.propertyId !== '' ? this.propertyId : undefined, propertyKey: this.propertyKey || undefined });
+      const payload = buildCheckoutPayload(this.state, { propertyId: this.propertyId != null && this.propertyId !== '' ? this.propertyId : undefined, propertyKey: this.propertyKey || undefined, sandbox: this.isSandbox });
       // Summary step with Stripe: go to payment step (form loads there)
       if (this.state.step === 'summary' && this.stripePublishableKey && typeof this.effectiveCreatePaymentIntent === 'function') {
         this.apiError = null;

package/dist/vue/styles.css

@@ -106,6 +106,145 @@
   font-weight: 500;
 }
 
+/* ===== Config Error State ===== */
+.booking-widget-config-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1.1em;
+  padding: 4em 2em;
+  text-align: center;
+  min-height: 300px;
+}
+
+.booking-widget-config-error__icon-wrap {
+  width: 5em;
+  height: 5em;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(239,68,68,0.12) 0%, rgba(239,68,68,0.04) 100%);
+  border: 1.5px solid rgba(239, 68, 68, 0.22);
+  box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.06);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #f87171;
+  flex-shrink: 0;
+  margin-bottom: 0.25em;
+}
+
+.booking-widget-config-error__badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4em;
+  font-size: 0.7em;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: #f87171;
+  background: rgba(239, 68, 68, 0.1);
+  border: 1px solid rgba(239, 68, 68, 0.18);
+  border-radius: 99em;
+  padding: 0.3em 0.85em;
+}
+
+.booking-widget-config-error__title {
+  font-family: var(--font-serif, 'Playfair Display', Georgia, serif);
+  font-size: 1.35em;
+  font-weight: 600;
+  color: var(--fg, #e8e0d5);
+  margin: 0;
+  letter-spacing: -0.01em;
+}
+
+.booking-widget-config-error__desc {
+  font-size: 0.875em;
+  color: var(--secondary-fg, #a09080);
+  max-width: 25em;
+  line-height: 1.7;
+  margin: 0;
+}
+
+.booking-widget-config-error__desc code {
+  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', Menlo, monospace;
+  font-size: 0.88em;
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--primary, #f59e0b);
+  padding: 0.12em 0.45em;
+  border-radius: 0.3em;
+  border: 1px solid rgba(255, 255, 255, 0.09);
+}
+
+.booking-widget-config-error__divider {
+  width: 2.5em;
+  height: 1.5px;
+  background: var(--border, rgba(255,255,255,0.1));
+  border-radius: 1px;
+}
+
+.booking-widget-config-error__hint {
+  font-size: 0.78em;
+  color: var(--muted, #6b5f50);
+  max-width: 21em;
+  line-height: 1.6;
+  margin: 0;
+}
+
+.booking-widget-config-error__retry {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45em;
+  padding: 0.55em 1.4em;
+  background: transparent;
+  color: var(--secondary-fg, #a09080);
+  border: 1.5px solid var(--border, rgba(255,255,255,0.13));
+  border-radius: 99em;
+  font-size: 0.8em;
+  font-family: var(--font-sans, system-ui, sans-serif);
+  font-weight: 500;
+  cursor: pointer;
+  letter-spacing: 0.02em;
+  transition: border-color 0.2s, color 0.2s, background 0.2s;
+  margin-top: 0.25em;
+}
+
+.booking-widget-config-error__retry:hover {
+  border-color: var(--primary, #f59e0b);
+  color: var(--primary, #f59e0b);
+  background: rgba(245, 158, 11, 0.06);
+}
+
+/* ===== Config Loading State ===== */
+.booking-widget-config-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1.25em;
+  padding: 4em 2em;
+  text-align: center;
+  min-height: 300px;
+}
+
+.booking-widget-config-loading__spinner {
+  width: 2.75em;
+  height: 2.75em;
+  border: 2px solid var(--border, rgba(255,255,255,0.1));
+  border-top-color: var(--primary, hsl(38,60%,55%));
+  border-radius: 50%;
+  animation: bw-spin 0.75s linear infinite;
+}
+
+@keyframes bw-spin {
+  to { transform: rotate(360deg); }
+}
+
+.booking-widget-config-loading__text {
+  font-size: 0.875em;
+  color: var(--muted, #888);
+  letter-spacing: 0.01em;
+}
+
 /* ===== Step Indicator ===== */
 .booking-widget-step-indicator {
   display: flex;
@@ -448,7 +587,7 @@
 }
 
 .booking-widget-modal .date-trigger:hover {
-  border-color: hsl(38, 60%, 55%, 0.5);
+  border-color: var(--primary);
 }
 
 .booking-widget-modal .date-trigger .placeholder {
@@ -472,7 +611,7 @@
   max-width: calc(100vw - 2em);
   box-sizing: border-box;
   z-index: 10;
-  background: var(--card);
+  background: var(--card-solid, var(--card));
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 1em;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuitee/booking-widget",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "A beautiful, customizable booking widget modal that can be embedded in any website. Supports vanilla JavaScript, React, and Vue.js.",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -34,7 +34,7 @@
     "build": "node scripts/generate-stripe-config.js && npm run build:css && npm run build:js && npm run build:react && npm run build:vue && npm run build:types",
     "build:stripe-config": "node scripts/generate-stripe-config.js",
     "build:css": "mkdir -p dist dist/core && cp src/core/styles.css dist/booking-widget.css && cp src/core/styles.css dist/core/styles.css",
-    "build:js": "mkdir -p dist dist/core && cp src/core/widget.js dist/booking-widget.js && cp src/core/booking-api.js dist/core/booking-api.js && cp src/core/stripe-config.js dist/core/stripe-config.js && node scripts/inject-widget-bootstrap.js && cp src/standalone/bundle.js dist/booking-widget-standalone.js && node scripts/build-standalone.js && npm run build:entry",
+    "build:js": "mkdir -p dist dist/core dist/utils && cp src/core/widget.js dist/booking-widget.js && cp src/core/booking-api.js dist/core/booking-api.js && cp src/core/stripe-config.js dist/core/stripe-config.js && cp src/core/color-utils.js dist/core/color-utils.js && cp src/utils/config-service.js dist/utils/config-service.js && node scripts/inject-widget-bootstrap.js && cp src/standalone/bundle.js dist/booking-widget-standalone.js && node scripts/build-standalone.js && npm run build:entry",
     "build:react": "mkdir -p dist/react && cp src/react/BookingWidget.jsx dist/react/BookingWidget.jsx && cp src/core/styles.css dist/react/styles.css",
     "build:vue": "mkdir -p dist/vue && cp src/vue/BookingWidget.vue dist/vue/BookingWidget.vue && cp src/core/styles.css dist/vue/styles.css",
     "build:types": "npm run build:types:main && npm run build:types:react && npm run build:types:vue",