@nuitee/booking-widget 1.0.2 → 1.0.4

package/USAGE.md

@@ -254,7 +254,7 @@ Only the following props/options are for you to set. API URLs, Stripe, and booki
 | `onComplete` | function | Called when the booking is completed, with booking data. |
 | `onOpen` | function | Optional. Called when the widget opens. |
 | `propertyKey` | string | Property key for real rooms/rates/booking; omit for demo data. |
-| `colors` | object | Optional. `{ background, text, primary, primaryText }`. |
+| `colors` | object | Optional. Pass 4 colors: `{ background, text, primary, primaryText }`. Card, muted, border, etc. are derived. Add `card` to override. |
 
 ### Vanilla constructor options
 
@@ -266,7 +266,7 @@ Only the following props/options are for you to set. API URLs, Stripe, and booki
 | `onClose` | function | Called when the user closes the widget. |
 | `onComplete` | function | Called when the booking is completed. |
 | `onOpen` | function | Optional. Called when the widget opens. |
-| `colors` | object | Optional. `{ background, text, primary, primaryText }`. |
+| `colors` | object | Optional. Pass 4 colors: `{ background, text, primary, primaryText }`. Card, muted, border, etc. are derived. Add `card` to override. |
 
 ### Vanilla methods
 
@@ -286,4 +286,4 @@ Only the following props/options are for you to set. API URLs, Stripe, and booki
 | Use in vanilla (no build) | Load the standalone script and CSS, `new BookingWidget({ containerId, propertyKey, ... })`, then `init()` and `open()`. |
 | Use in vanilla (with build) | Import `@nuitee/booking-widget` and `@nuitee/booking-widget/css`, pass `propertyKey` and callbacks, then `open()`. |
 | Real rooms/rates/booking | Pass `propertyKey`. The widget uses its own runtime config for API and payments. |
-| Custom colors | Pass `colors: { background, text, primary, primaryText }`. |
+| Custom colors | Pass `colors: { background, text, primary, primaryText }`. Card, muted, border, input-bg derive from these. |

package/dist/booking-widget-standalone.js

@@ -1,4 +1,4 @@
-(function(){'use strict';window.__BOOKING_WIDGET_API_BASE_URL__='https://ai.thehotelplanet.com';window.__BOOKING_WIDGET_STRIPE_KEY__='pk_live_51T0SdzEj1UJpIPAMQQUH55w3Dj1E07CihP3iTOVO1IM4mMVAJvE86BiUmzGQKuNPPl05btyY39lRca8PSzRzZ9K700CncmOGQ0';})();
+(function(){'use strict';window.__BOOKING_WIDGET_API_BASE_URL__='https://ai.thehotelplanet.com';window.__BOOKING_WIDGET_STRIPE_KEY__='pk_test_51T0Se5EvQaQIixshRA8gbsI40NubMGwHlSWZmQM2LAx3jpVO0ThzVifqdTiMeGOyBfLNe8V9G8POGu8SjkvWOStM00H0i1U3uz';window.__BOOKING_WIDGET_DEFAULT_COLORS__={"background":"#022c32","text":"#ffffff","primary":"#f59e0b","primaryText":"#ffffff","card":"#395b60"};})();
 /**
  * Shared Booking API layer for the @nuitee/booking-widget.
  * Used by Vanilla JS, Vue, and React variants so integration lives in one place.
@@ -619,6 +619,16 @@ function buildCheckoutPayload(state, options = {}) {
  * @param {Object} [options] - { propertyKey: string, sandbox?: boolean }
  * @returns {{ rate_identifier: string, key: string, metadata: Object, sandbox?: boolean }}
  */
+function generateUUID() {
+  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+    return crypto.randomUUID();
+  }
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+    const r = Math.random() * 16 | 0;
+    return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
+  });
+}
+
 function buildPaymentIntentPayload(state, options = {}) {
   const rawKey = options.propertyKey != null && options.propertyKey !== '' ? String(options.propertyKey).trim() : '';
   const propertyKey = rawKey && rawKey.startsWith('book_engine_') ? rawKey : '';
@@ -658,6 +668,7 @@ function buildPaymentIntentPayload(state, options = {}) {
       email: g.email ?? '',
       occupancies: occupanciesForPayload,
       source_transaction: 'booking engine',
+      booking_code: generateUUID(),
     },
   };
   if (sandbox) out.sandbox = true;
@@ -828,10 +839,64 @@ if (typeof window !== 'undefined') {
     return `<span class="icon" style="display:inline-flex;align-items:center;justify-content:center;width:${size};height:${size};min-width:${size};min-height:${size};vertical-align:middle;flex-shrink:0;color:inherit;">${sizedIcon}</span>`;
   }
 
-  // Copy the BookingWidget class from core/widget.js
-  // This is a simplified version that will be bundled
+  function deriveWidgetStyles(c) {
+    if (!c || (!c.background && !c.text && !c.primary && !c.primaryText)) return {};
+    function expandHex(hex) {
+      if (!hex || typeof hex !== 'string') return null;
+      var h = hex.replace(/^#/, '').trim();
+      if (h.length === 3) return '#' + h.split('').map(function (x) { return x + x; }).join('');
+      return h.length === 6 ? '#' + h : null;
+    }
+    function hexToRgb(hex) {
+      var x = expandHex(hex);
+      if (!x) return null;
+      return [parseInt(x.slice(1, 3), 16), parseInt(x.slice(3, 5), 16), parseInt(x.slice(5, 7), 16)];
+    }
+    function hexToHsl(hex) {
+      var x = expandHex(hex);
+      if (!x) return null;
+      var r = parseInt(x.slice(1, 3), 16) / 255, g = parseInt(x.slice(3, 5), 16) / 255, b = parseInt(x.slice(5, 7), 16) / 255;
+      var max = Math.max(r, g, b), min = Math.min(r, g, b), h, s, l = (max + min) / 2;
+      if (max === min) h = s = 0;
+      else {
+        var d = max - min;
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+        else if (max === g) h = ((b - r) / d + 2) / 6;
+        else h = ((r - g) / d + 4) / 6;
+      }
+      return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)];
+    }
+    var bg = c.background || '#1a1a1a', fg = c.text || '#e0e0e0', primary = c.primary || '#3b82f6', primaryFg = c.primaryText || '#ffffff';
+    var primaryRgb = hexToRgb(primary), bgHsl = hexToHsl(bg), fgHsl = hexToHsl(fg);
+    var styles = { '--primary': primary, '--primary-fg': primaryFg, '--bg': bg, '--fg': fg, '--card-fg': fg };
+    if (primaryRgb) styles['--primary-rgb'] = primaryRgb[0] + ', ' + primaryRgb[1] + ', ' + primaryRgb[2];
+    styles['--card'] = c.card || (bgHsl ? 'hsl(' + bgHsl[0] + ', ' + bgHsl[1] + '%, ' + Math.min(95, bgHsl[2] + 2) + '%)' : bg);
+    if (bgHsl) {
+      styles['--secondary'] = 'hsl(' + bgHsl[0] + ', ' + bgHsl[1] + '%, ' + Math.min(95, bgHsl[2] + 10) + '%)';
+      styles['--border'] = 'hsl(' + bgHsl[0] + ', ' + bgHsl[1] + '%, ' + Math.min(95, bgHsl[2] + 14) + '%)';
+      styles['--input-bg'] = 'hsl(' + bgHsl[0] + ', ' + bgHsl[1] + '%, ' + Math.min(95, bgHsl[2] + 6) + '%)';
+    }
+    if (fgHsl) {
+      styles['--secondary-fg'] = 'hsl(' + fgHsl[0] + ', ' + fgHsl[1] + '%, ' + Math.max(20, fgHsl[2] - 10) + '%)';
+      styles['--muted'] = 'hsl(' + fgHsl[0] + ', ' + fgHsl[1] + '%, ' + Math.max(30, fgHsl[2] - 25) + '%)';
+    }
+    styles['--font-serif'] = "'Playfair Display', Georgia, serif";
+    styles['--font-sans'] = "'Inter', system-ui, sans-serif";
+    styles['--radius'] = '0.75rem';
+    return styles;
+  }
+
   const builtInStripeKey = (typeof window !== 'undefined' && window.__BOOKING_WIDGET_STRIPE_KEY__) ? window.__BOOKING_WIDGET_STRIPE_KEY__ : '';
 
+  function escapeHTML(value) {
+    const s = String(value ?? '');
+    return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+  }
+
+  // In-memory config cache shared across all instances, keyed by propertyKey.
+  const __bwConfigCache = {};
+
   class BookingWidget {
     constructor(options = {}) {
       const defaultApiBase = (typeof window !== 'undefined' && window.__BOOKING_WIDGET_API_BASE_URL__) ? window.__BOOKING_WIDGET_API_BASE_URL__ : '';
@@ -869,14 +934,20 @@ if (typeof window !== 'undefined') {
         mode: options.mode || null,
         bookingApi: options.bookingApi || null,
         cssUrl: options.cssUrl || null,
-        // Color customization options
-        colors: {
-          background: options.colors?.background || null,
-          text: options.colors?.text || null,
-          primary: options.colors?.primary || null,
-          primaryText: options.colors?.primaryText || null,
-          ...options.colors
-        },
+        // Color customization: CONFIG defaults from load-config, installer colors override
+        colors: (function () {
+          const dc = (typeof window !== 'undefined' && window.__BOOKING_WIDGET_DEFAULT_COLORS__) ? window.__BOOKING_WIDGET_DEFAULT_COLORS__ : {};
+          const inst = options.colors && typeof options.colors === 'object' ? options.colors : {};
+          return {
+            background: inst.background ?? dc.background ?? null,
+            text: inst.text ?? dc.text ?? null,
+            primary: inst.primary ?? dc.primary ?? null,
+            primaryText: inst.primaryText ?? dc.primaryText ?? null,
+            // When card omitted, use installer's background for consistency
+            card: inst.card ?? inst.background ?? dc.card ?? dc.background ?? null,
+            ...inst
+          };
+        })(),
         ...options
       };
       
@@ -930,6 +1001,15 @@ if (typeof window !== 'undefined') {
       this.container = null;
       this.overlay = null;
       this.widget = null;
+
+      // Store raw installer colors for re-merging after API config fetch.
+      this._rawInstallerColors = options.colors && typeof options.colors === 'object'
+        ? Object.assign({}, options.colors)
+        : {};
+      // Config fetch state: 'idle' | 'loading' | 'loaded' | 'error'
+      this._configState = 'idle';
+      this._configError = null;
+      this._configPromise = null;
     }
 
     getNights() {
@@ -966,8 +1046,13 @@ if (typeof window !== 'undefined') {
 
     open() {
       if (!this.container) this.init();
+      if (!this.overlay || !this.widget) return; // container element not found
       this.overlay.classList.add('active');
       this.widget.classList.add('active');
+      // Only fetch config when propertyKey is present; missing-key is rendered inside the modal.
+      if (this.options.propertyKey && String(this.options.propertyKey).trim() && this._configState === 'idle') {
+        this._fetchRuntimeConfig();
+      }
       this.render();
       if (this.options.onOpen) this.options.onOpen();
     }
@@ -994,6 +1079,12 @@ if (typeof window !== 'undefined') {
     }
 
     goToStep(step) {
+      if ((step === 'rooms' || step === 'rates') && this._configState !== 'loaded') {
+        if (this._configState === 'loading' && this._configPromise) {
+          this._configPromise.then(() => { if (this._configState === 'loaded') this.goToStep(step); });
+        }
+        return;
+      }
       if (step !== 'summary' && step !== 'payment') {
         this.checkoutShowPaymentForm = false;
         this.paymentElementReady = false;
@@ -1045,7 +1136,9 @@ if (typeof window !== 'undefined') {
       }
 
       this.container = container;
-      
+
+      // Always create the overlay and modal so the error is shown inside the dialog,
+      // consistent with the React and Vue behaviour.
       this.overlay = document.createElement('div');
       this.overlay.className = 'booking-widget-overlay';
       this.overlay.addEventListener('click', () => this.close());
@@ -1056,44 +1149,116 @@ if (typeof window !== 'undefined') {
       this.widget.innerHTML = `
         <button class="booking-widget-close">${iconHTML('x', '1.5em')}</button>
         <div class="booking-widget-step-indicator"></div>
-        <div class="booking-widget-property-key-message" role="alert" style="display:none;margin:0 1.5em 1em;padding:0.75em 1em;background:var(--destructive,#ef4444);color:#fff;border-radius:8px;font-size:0.9em;"></div>
         <div class="booking-widget-step-content"></div>
       `;
       this.widget.querySelector('.booking-widget-close').addEventListener('click', () => this.close());
+      this.widget.querySelector('.booking-widget-step-indicator').addEventListener('click', (e) => {
+        const stepEl = e.target.closest('[data-step]');
+        if (stepEl && stepEl.dataset.step) this.goToStep(stepEl.dataset.step);
+      });
       container.appendChild(this.widget);
 
       if (typeof window !== 'undefined') {
         window.bookingWidgetInstance = this;
       }
 
-      // Apply custom colors
       this.applyColors();
-
       this.injectCSS();
     }
 
     applyColors() {
       if (!this.widget) return;
-      
       const colors = this.options.colors;
       if (!colors) return;
-      
-      const style = this.widget.style;
-      
-      if (colors.background) {
-        style.setProperty('--bg', colors.background);
-        style.setProperty('--card', colors.background);
-      }
-      if (colors.text) {
-        style.setProperty('--fg', colors.text);
-        style.setProperty('--card-fg', colors.text);
-      }
-      if (colors.primary) {
-        style.setProperty('--primary', colors.primary);
-      }
-      if (colors.primaryText) {
-        style.setProperty('--primary-fg', colors.primaryText);
+      const styles = deriveWidgetStyles(colors);
+      const el = this.widget.style;
+      for (var k in styles) if (styles[k] != null && styles[k] !== '') el.setProperty(k, styles[k]);
+    }
+
+    _applyApiColors(apiColors) {
+      const inst = this._rawInstallerColors || {};
+      this.options.colors = {
+        background:  inst.background  != null ? inst.background  : (apiColors.background  || null),
+        text:        inst.text        != null ? inst.text        : (apiColors.text        || null),
+        primary:     inst.primary     != null ? inst.primary     : (apiColors.primary     || null),
+        primaryText: inst.primaryText != null ? inst.primaryText : (apiColors.primaryText || null),
+        card:        inst.card        != null ? inst.card        : (inst.background != null ? inst.background : (apiColors.card || null)),
+      };
+    }
+
+    _fetchRuntimeConfig() {
+      const self = this;
+      const key = String(this.options.propertyKey).trim();
+      const isSandbox = this.options.mode === 'sandbox';
+      // Cache key is mode-aware so sandbox and live configs are stored separately.
+      const cacheKey = isSandbox ? key + ':sandbox' : key;
+
+      if (__bwConfigCache[cacheKey]) {
+        this._applyApiColors(__bwConfigCache[cacheKey]);
+        this._configState = 'loaded';
+        this.applyColors();
+        return Promise.resolve(__bwConfigCache[cacheKey]);
       }
+
+      this._configState = 'loading';
+      this.render();
+
+      const url = 'https://ai.thehotelplanet.com/load-config?apikey=' + encodeURIComponent(key) + (isSandbox ? '&mode=sandbox' : '');
+      this._configPromise = fetch(url)
+        .then(function (res) {
+          if (!res.ok) throw new Error('Failed to load widget configuration (HTTP ' + res.status + ').');
+          return res.json();
+        })
+        .then(function (data) {
+          const apiColors = {};
+          if (data.widgetBackground) apiColors.background  = data.widgetBackground;
+          if (data.widgetTextColor)  apiColors.text        = data.widgetTextColor;
+          if (data.primaryColor)     apiColors.primary     = data.primaryColor;
+          if (data.buttonTextColor)  apiColors.primaryText = data.buttonTextColor;
+          if (data.widgetCardColor)  apiColors.card        = data.widgetCardColor;
+          __bwConfigCache[cacheKey] = apiColors;
+          self._applyApiColors(apiColors);
+          self._configState = 'loaded';
+          self.applyColors();
+          self.render();
+          return apiColors;
+        })
+        .catch(function (err) {
+          self._configError = err.message || 'Failed to load widget configuration.';
+          self._configState = 'error';
+          self.render();
+        });
+
+      return this._configPromise;
+    }
+
+    _retryConfigFetch() {
+      this._configState = 'idle';
+      this._configError = null;
+      this._configPromise = null;
+      this._fetchRuntimeConfig();
+    }
+
+    _configErrorHTML(type, title, body, hint) {
+      const lockIcon = `<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>`;
+      const warnIcon = `<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>`;
+      const retryIcon = `<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>`;
+      const icon = type === 'missing' ? lockIcon : warnIcon;
+      const badgeLabel = type === 'missing'
+        ? `<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`
+        : 'Configuration Error';
+      const retryBtn = type === 'fetch'
+        ? `<button class="booking-widget-config-error__retry" onclick="window.bookingWidgetInstance && window.bookingWidgetInstance._retryConfigFetch()">${retryIcon} Try Again</button>`
+        : '';
+      return `<div class="booking-widget-config-error" role="alert">
+        <div class="booking-widget-config-error__icon-wrap">${icon}</div>
+        <span class="booking-widget-config-error__badge">${badgeLabel}</span>
+        <h3 class="booking-widget-config-error__title">${escapeHTML(title)}</h3>
+        <p class="booking-widget-config-error__desc">${body}</p>
+        <div class="booking-widget-config-error__divider"></div>
+        <p class="booking-widget-config-error__hint">${escapeHTML(hint)}</p>
+        ${retryBtn}
+      </div>`;
     }
 
     injectCSS() {
@@ -1118,16 +1283,7 @@ if (typeof window !== 'undefined') {
     }
 
     renderPropertyKeyMessage() {
-      const el = this.widget.querySelector('.booking-widget-property-key-message');
-      if (!el) return;
-      const key = this.options.propertyKey;
-      const missing = !key || (typeof key === 'string' && !key.trim());
-      if (missing) {
-        el.style.display = 'block';
-        el.innerHTML = 'The propertyKey is missing. Please provide it as a prop to load rooms from the API.';
-      } else {
-        el.style.display = 'none';
-      }
+      // Config errors are rendered directly inside renderStepContent as full cards.
     }
 
     renderStepIndicator() {
@@ -1135,7 +1291,7 @@ if (typeof window !== 'undefined') {
       if (!el) return;
       const key = this.options.propertyKey;
       const hasPropertyKey = key != null && key !== '' && (typeof key !== 'string' || key.trim() !== '');
-      if (!hasPropertyKey || this.state.step === 'confirmation') {
+      if (!hasPropertyKey || this._configState !== 'loaded' || this.state.step === 'confirmation') {
         el.innerHTML = '';
         return;
       }
@@ -1158,9 +1314,36 @@ if (typeof window !== 'undefined') {
     renderStepContent() {
       const el = this.widget.querySelector('.booking-widget-step-content');
       if (!el) return;
+
+      // Missing propertyKey — show error card inside the modal, same as React/Vue.
       const key = this.options.propertyKey;
-      const hasPropertyKey = key != null && key !== '' && (typeof key !== 'string' || key.trim() !== '');
-      if (!hasPropertyKey) {
+      if (!key || !String(key).trim()) {
+        el.innerHTML = this._configErrorHTML(
+          'missing',
+          'Widget Not Configured',
+          'A <code>propertyKey</code> option is required to initialize this booking widget. Please provide it to load rooms and availability.',
+          'Contact the site administrator to configure this widget.'
+        );
+        return;
+      }
+
+      if (this._configState === 'loading') {
+        el.innerHTML = `<div class="booking-widget-config-loading">
+          <div class="booking-widget-config-loading__spinner"></div>
+          <span class="booking-widget-config-loading__text">Loading configuration\u2026</span>
+        </div>`;
+        return;
+      }
+      if (this._configState === 'error') {
+        el.innerHTML = this._configErrorHTML(
+          'fetch',
+          'Could Not Load Config',
+          escapeHTML(this._configError || 'An unexpected error occurred.'),
+          'Please try again or contact support.'
+        );
+        return;
+      }
+      if (this._configState !== 'loaded') {
         el.innerHTML = '';
         return;
       }

package/dist/booking-widget.css

@@ -81,6 +81,7 @@
   --bg: hsl(30, 10%, 8%);
   --fg: hsl(40, 20%, 90%);
   --card: hsl(30, 8%, 12%);
+  --card-solid: hsl(30, 8%, 12%);
   --card-fg: hsl(40, 20%, 90%);
   --primary: hsl(38, 60%, 55%);
   --primary-fg: hsl(30, 10%, 8%);
@@ -106,6 +107,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 +588,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 +612,7 @@
   max-width: calc(100vw - 2em);
   box-sizing: border-box;
   z-index: 10;
-  background: var(--card);
+  background: var(--card-solid);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 1em;