react-sdk-feexpay 1.0.0 → 1.0.2

package/README.md

@@ -0,0 +1,624 @@
+# react-sdk-feexpay v2 — Documentation officielle
+
+> SDK React pour l'intégration des paiements FeexPay dans vos applications web.
+
+---
+
+## Table des matières
+
+1. [Introduction](#1-introduction)
+2. [Prérequis](#2-prérequis)
+3. [Installation](#3-installation)
+4. [Démarrage rapide](#4-démarrage-rapide)
+5. [Référence API](#5-référence-api)
+   - [Composant `<FeexPay />`](#composant-feexpay-)
+   - [Props détaillées](#props-détaillées)
+   - [Objet de retour du callback](#objet-de-retour-du-callback)
+   - [Types exportés](#types-exportés)
+6. [Méthodes de paiement](#6-méthodes-de-paiement)
+7. [Pays et opérateurs supportés](#7-pays-et-opérateurs-supportés)
+8. [Exemples d'utilisation](#8-exemples-dutilisation)
+9. [Gestion des erreurs](#9-gestion-des-erreurs)
+10. [Personnalisation du bouton](#10-personnalisation-du-bouton)
+11. [Changelog](#11-changelog)
+
+---
+
+## 1. Introduction
+
+**react-sdk-feexpay** est une bibliothèque React qui permet d'intégrer la passerelle de paiement **FeexPay** en quelques lignes de code. Elle expose un composant clé-en-main qui affiche un bouton « Payer » et gère l'intégralité du tunnel de paiement : ouverture d'une modale, saisie des informations du payeur, sélection de l'opérateur, initiation de la transaction et retour de statut.
+
+**Cas d'usage typiques :**
+
+- Boutiques e-commerce sur les marchés d'Afrique de l'Ouest
+- Collecte de paiements Mobile Money (MTN, Moov, Orange, Wave, etc.)
+- Paiements par portefeuille numérique (Coris Money, Wave CI)
+- Applications SaaS ou plateformes de services avec abonnements
+
+**Ce que le SDK gère pour vous :**
+
+- Sélection du pays et de l'opérateur
+- Formatage automatique du numéro de téléphone
+- Calcul des frais de transaction
+- Polling du statut de paiement (toutes les 10 s, jusqu'à 2 min)
+- Redirection après paiement (URL ou callback JavaScript)
+- Gestion OTP (Orange Sénégal, Coris Money Bénin)
+- Affichage iframe pour les opérateurs avec redirect (Wave, Orange CI/BF…)
+
+---
+
+## 2. Prérequis
+
+| Dépendance | Version minimale |
+|---|---|
+| React | **19.0.0** |
+| react-dom | **19.0.0** |
+| Node.js | 18+ recommandé |
+
+Le SDK inclut ses propres dépendances (`axios`, `styled-components`) ; vous n'avez pas à les installer séparément.
+
+---
+
+## 3. Installation
+
+```bash
+npm install react-sdk-feexpay
+```
+
+```bash
+yarn add react-sdk-feexpay
+```
+
+```bash
+pnpm add react-sdk-feexpay
+```
+
+> **Note :** `react` et `react-dom` sont des **peerDependencies**. Ils doivent déjà être présents dans votre projet.
+
+---
+
+## 4. Démarrage rapide
+
+```tsx
+import FeexPay from 'react-sdk-feexpay';
+
+export default function CheckoutPage() {
+  return (
+    <FeexPay
+      amount={5000}
+      token="votre_token_api"
+      id="identifiant_boutique"
+      description="Commande #1234"
+      callback={(result) => {
+        if (result.status === 'SUCCESSFUL') {
+          console.log('Paiement réussi !', result.reference);
+        }
+      }}
+    />
+  );
+}
+```
+
+Ce snippet suffit pour afficher un bouton opérationnel. En cliquant dessus, la modale de paiement s'ouvre et guide l'utilisateur jusqu'à la confirmation.
+
+---
+
+## 5. Référence API
+
+### Composant `<FeexPay />`
+
+C'est le composant principal (export par défaut). Il combine un bouton et la logique de paiement complète.
+
+```tsx
+import FeexPay from 'react-sdk-feexpay';
+// ou via l'alias nommé :
+import { FeexPayButton } from 'react-sdk-feexpay';
+```
+
+`FeexPayButton` est un alias de `FeexPay` fourni pour la rétrocompatibilité avec la v1.
+
+---
+
+### Props détaillées
+
+#### Props obligatoires
+
+| Prop | Type | Description |
+|---|---|---|
+| `amount` | `number` | Montant à encaisser, **en unité entière** (ex. `5000` pour 5 000 XOF). |
+| `token` | `string` | Token d'authentification API de votre boutique FeexPay. |
+| `id` | `string` | Identifiant unique de votre boutique FeexPay. |
+
+#### Props optionnelles — Comportement
+
+| Prop | Type | Défaut | Description |
+|---|---|---|---|
+| `description` | `string` | `''` | Description de la transaction, visible dans le tableau de bord FeexPay. |
+| `mode` | `'LIVE' \| 'SANDBOX'` | `'LIVE'` | Mode de fonctionnement. Utilisez `'SANDBOX'` pour les tests. |
+| `currency` | `'XOF' \| 'USD' \| 'CAD' \| 'XAF'` | `'XOF'` | Devise de la transaction. |
+| `case` | `'MOBILE' \| 'CARD' \| 'WALLET'` | — | Force l'affichage d'une méthode de paiement unique, sans onglets. |
+
+#### Props optionnelles — Callbacks et redirections
+
+| Prop | Type | Description |
+|---|---|---|
+| `callback` | `(response: CallbackResponse) => void` | Fonction appelée côté client à la fin de la transaction (succès ou échec). Voir [Objet de retour du callback](#objet-de-retour-du-callback). |
+| `callback_url` | `string` | URL de redirection après un **paiement réussi**. La référence est passée en query param : `?ref=<reference>`. |
+| `error_callback_url` | `string` | URL de redirection après un **paiement échoué**. La référence est passée en query param : `?ref=<reference>`. |
+| `callback_info` | `Record<string, unknown>` | Données métier arbitraires renvoyées intactes dans la réponse du callback (ex. `{ orderId: '42', userId: 'abc' }`). |
+
+#### Props optionnelles — Référence et personnalisation
+
+| Prop | Type | Alias v1 | Description |
+|---|---|---|---|
+| `reference` | `string` | `customId` | Référence personnalisée de la transaction dans vos systèmes (idempotence). |
+| `fieldsToHide` | `string[]` | `fields_to_hide` | Liste de champs à masquer dans la modale. Valeurs possibles : `'name'`, `'email'`. |
+| `defaultValueField` | `Record<string, any>` | — | Pré-remplit des champs de la modale. Clés supportées : `country_iban` (`'BJ'`, `'CI'`, `'SN'`, `'TG'`, `'BF'`), `name`, `email`. |
+| `first_name` | `string` | — | Pré-remplit le champ "Nom et Prénoms" de la modale. |
+| `email` | `string` | — | Pré-remplit le champ "Email" de la modale. |
+
+#### Props optionnelles — Style du bouton
+
+| Prop | Type | Description |
+|---|---|---|
+| `buttonText` | `string` | Texte personnalisé du bouton (défaut : `"Payer X XOF"`). |
+| `buttonClass` | `string` | Classes CSS Tailwind ou personnalisées appliquées au bouton. |
+| `buttonStyles` | `React.CSSProperties` | Styles inline appliqués au bouton. |
+
+---
+
+### Objet de retour du callback
+
+Lorsque la transaction se termine, la prop `callback` reçoit un objet avec les champs suivants :
+
+```ts
+{
+  reference: string;        // Référence unique FeexPay de la transaction
+  status: PaymentStatus;    // Statut final (voir ci-dessous)
+  phoneNumber: string;      // Numéro de téléphone formaté du payeur
+  reseau: string;           // Opérateur utilisé (ex. 'MTN', 'WAVE SN')
+  callback_info: Record<string, unknown>; // Données métier passées via callback_info
+  description: string;      // Description de la transaction
+  transaction_id: string;   // Identifiant de transaction (= reference)
+  message: string;          // Message de statut lisible
+  amount: number;           // Montant de base (sans frais)
+  currency: string;         // Devise (ex. 'XOF')
+  first_name: string;       // Nom du payeur
+  email: string;            // Email du payeur
+}
+```
+
+**Valeurs possibles de `status` :**
+
+| Valeur | Signification |
+|---|---|
+| `'SUCCESSFUL'` / `'SUCCESS'` | Paiement accepté et confirmé |
+| `'FAILED'` | Paiement refusé ou annulé |
+| `'PENDING'` | En attente de confirmation opérateur |
+| `'TIMEOUT'` | Expiration de la vérification (120 s sans réponse) |
+| `'INSUFFICIENT_FUNDS'` | Solde insuffisant chez le payeur |
+
+---
+
+### Types exportés
+
+Tous les types TypeScript du SDK sont disponibles à l'import :
+
+```ts
+import type {
+  FeexPayProps,
+  PaymentConfig,
+  PaymentStatus,
+  PaymentMethod,
+  Network,
+  Country,
+  Currency,
+  Transaction,
+} from 'react-sdk-feexpay';
+```
+
+#### `Network`
+
+```ts
+type Network = 'MTN' | 'MOOV' | 'CELTIIS' | 'CORIS' | 'ORANGE' | 'WAVE' | 'FREE' | 'TOGOCOM';
+```
+
+#### `Country`
+
+```ts
+type Country = 'BENIN' | 'COTE_D_IVOIRE' | 'BURKINA_FASO' | 'CONGO_BRAZZAVILLE' | 'SENEGAL' | 'TOGO';
+```
+
+#### `Currency`
+
+```ts
+type Currency = 'XOF' | 'USD' | 'CAD' | 'XAF';
+```
+
+#### `PaymentMethod`
+
+```ts
+type PaymentMethod = 'MOBILE' | 'CARD' | 'WALLET';
+```
+
+---
+
+## 6. Méthodes de paiement
+
+| Méthode | Valeur `case` | Description |
+|---|---|---|
+| **Mobile Money** | `'MOBILE'` | Paiement via l'opérateur mobile du payeur. Un message push ou USSD est envoyé sur son téléphone pour confirmation. |
+| **Wallet** | `'WALLET'` | Paiement via portefeuille numérique. Coris Money (Bénin) ou Wave (Côte d'Ivoire). Nécessite un code OTP pour Coris. |
+| **Carte bancaire** | `'CARD'` | Visa / Mastercard. **Momentanément indisponible.** |
+
+Lorsque `case` n'est pas fourni, les trois onglets apparaissent dans la modale et le payeur choisit sa méthode.
+
+---
+
+## 7. Pays et opérateurs supportés
+
+### Mobile Money
+
+| Pays | Opérateurs disponibles | Code pays |
+|---|---|---|
+| Bénin | MTN, Moov, Celtiis | `BENIN` |
+| Côte d'Ivoire | MTN CI, Orange CI | `COTE_D_IVOIRE` |
+| Burkina Faso | Moov BF, Orange BF | `BURKINA_FASO` |
+| Congo-Brazzaville | MTN CG | `CONGO_BRAZZAVILLE` |
+| Sénégal | Orange SN, Free SN, Wave SN | `SENEGAL` |
+| Togo | Togocom TG, Moov TG | `TOGO` |
+
+### Wallet
+
+| Pays | Réseau Wallet |
+|---|---|
+| Bénin | Coris Money (`CORIS`) |
+| Côte d'Ivoire | Wave (`WAVE`) |
+
+> **Note :** Pour Orange Sénégal, le payeur doit obtenir un code OTP en composant `*144*391#` depuis son téléphone avant de valider le paiement.
+
+---
+
+## 8. Exemples d'utilisation
+
+### Exemple minimal
+
+```tsx
+import FeexPay from 'react-sdk-feexpay';
+
+function App() {
+  return (
+    <FeexPay
+      amount={2500}
+      token="tok_live_xxxxxxxxxxxxxx"
+      id="shop_xxxxxxxx"
+    />
+  );
+}
+```
+
+---
+
+### Avec callback JavaScript
+
+```tsx
+import FeexPay from 'react-sdk-feexpay';
+
+function CheckoutPage() {
+  const handlePaymentResult = (result) => {
+    switch (result.status) {
+      case 'SUCCESSFUL':
+        // Confirmer la commande côté serveur
+        fetch('/api/orders/confirm', {
+          method: 'POST',
+          body: JSON.stringify({
+            reference: result.reference,
+            orderId: result.callback_info.orderId,
+          }),
+        });
+        break;
+      case 'FAILED':
+      case 'INSUFFICIENT_FUNDS':
+        alert('Le paiement a échoué : ' + result.message);
+        break;
+      case 'TIMEOUT':
+        alert('La confirmation a expiré. Vérifiez votre compte opérateur.');
+        break;
+    }
+  };
+
+  return (
+    <FeexPay
+      amount={15000}
+      token="tok_live_xxxxxxxxxxxxxx"
+      id="shop_xxxxxxxx"
+      description="Abonnement mensuel"
+      callback={handlePaymentResult}
+      callback_info={{ orderId: '1042', userId: 'usr_abc' }}
+    />
+  );
+}
+```
+
+---
+
+### Avec redirection URL
+
+```tsx
+<FeexPay
+  amount={8000}
+  token="tok_live_xxxxxxxxxxxxxx"
+  id="shop_xxxxxxxx"
+  description="Commande #567"
+  callback_url="https://monsite.com/paiement/succes"
+  error_callback_url="https://monsite.com/paiement/echec"
+  reference="CMD-2026-567"
+/>
+```
+
+Après le paiement, l'utilisateur est redirigé vers :
+- `https://monsite.com/paiement/succes?ref=<reference>` en cas de succès
+- `https://monsite.com/paiement/echec?ref=<reference>` en cas d'échec
+
+---
+
+### Forcer une méthode de paiement
+
+```tsx
+{/* Mobile Money uniquement */}
+<FeexPay
+  amount={5000}
+  token="tok_live_xxxxxxxxxxxxxx"
+  id="shop_xxxxxxxx"
+  case="MOBILE"
+/>
+
+{/* Wallet uniquement */}
+<FeexPay
+  amount={5000}
+  token="tok_live_xxxxxxxxxxxxxx"
+  id="shop_xxxxxxxx"
+  case="WALLET"
+/>
+```
+
+---
+
+### Pré-remplir les informations du payeur
+
+```tsx
+<FeexPay
+  amount={3000}
+  token="tok_live_xxxxxxxxxxxxxx"
+  id="shop_xxxxxxxx"
+  first_name="Jean Dupont"
+  email="jean.dupont@exemple.com"
+  defaultValueField={{ country_iban: 'CI' }}
+/>
+```
+
+Cela pré-remplit le nom, l'email et sélectionne automatiquement la Côte d'Ivoire dans le sélecteur de pays.
+
+---
+
+### Masquer des champs
+
+```tsx
+{/* Masquer l'email et le nom (utile si déjà authentifié) */}
+<FeexPay
+  amount={10000}
+  token="tok_live_xxxxxxxxxxxxxx"
+  id="shop_xxxxxxxx"
+  first_name="Marie Koné"
+  email="marie@exemple.com"
+  fieldsToHide={['name', 'email']}
+/>
+```
+
+---
+
+### Mode sandbox (tests)
+
+```tsx
+<FeexPay
+  amount={100}
+  token="tok_sandbox_xxxxxxxxxxxxxx"
+  id="shop_test_xxxxxxxx"
+  mode="SANDBOX"
+  description="Test de paiement"
+  callback={(r) => console.log('Sandbox result:', r)}
+/>
+```
+
+---
+
+### Bouton personnalisé déclenché par événement DOM
+
+Le SDK écoute l'événement personnalisé `feexpay:trigger` sur son élément racine. Cela permet d'utiliser n'importe quel élément comme déclencheur :
+
+```tsx
+import { useRef } from 'react';
+import FeexPay from 'react-sdk-feexpay';
+
+function CustomTrigger() {
+  const containerRef = useRef(null);
+
+  const openPayment = () => {
+    containerRef.current
+      ?.querySelector('[data-feexpay]')
+      ?.dispatchEvent(new CustomEvent('feexpay:trigger', { bubbles: true }));
+  };
+
+  return (
+    <>
+      {/* Le composant est invisible (custom_button interne) */}
+      <div ref={containerRef}>
+        <FeexPay
+          amount={5000}
+          token="tok_live_xxxxxxxxxxxxxx"
+          id="shop_xxxxxxxx"
+        />
+      </div>
+
+      {/* Votre propre bouton */}
+      <button onClick={openPayment} className="mon-bouton-custom">
+        Finaliser l'achat
+      </button>
+    </>
+  );
+}
+```
+
+---
+
+### Utilisation du contexte `FeexPayProvider`
+
+Le composant `<FeexPay />` inclut son propre `FeexPayProvider`. Si vous souhaitez gérer plusieurs instances ou partager le contexte dans une arborescence React, vous pouvez wrapper votre application manuellement :
+
+```tsx
+import { FeexPayProvider } from 'react-sdk-feexpay';
+
+function App() {
+  return (
+    <FeexPayProvider>
+      {/* Votre application */}
+    </FeexPayProvider>
+  );
+}
+```
+
+---
+
+## 9. Gestion des erreurs
+
+### Erreurs de configuration
+
+Si les identifiants `id` ou `token` sont invalides, le SDK affiche un message d'erreur à la place du bouton :
+
+```
+Veuillez vérifier vos identifiants de boutique (ID et token).
+```
+
+Aucune modale ne s'ouvre dans ce cas.
+
+---
+
+### Erreurs de validation du formulaire
+
+La modale valide les champs avant d'initier le paiement. Les messages d'erreur s'affichent dans une modale de statut :
+
+| Champ manquant / invalide | Message affiché |
+|---|---|
+| Nom complet vide | `Veuillez entrer votre nom complet` |
+| Email absent ou invalide | `Veuillez entrer une adresse email valide` |
+| Numéro de téléphone trop court | `Veuillez entrer un numéro de téléphone valide` |
+| Wallet sur un pays non supporté | `Seuls le Bénin (Coris) et la Côte d'Ivoire (Wave) sont supportés` |
+
+---
+
+### Codes de statut API
+
+| Code | Signification | Comportement |
+|---|---|---|
+| `10` | Fonds insuffisants | Statut `INSUFFICIENT_FUNDS`, redirection `error_callback_url` si définie |
+| `92` | Transaction annulée | Statut `FAILED`, redirection `error_callback_url` si définie |
+| `201` (Coris) | OTP requis | Ouverture de la modale OTP |
+
+---
+
+### Gestion du timeout
+
+Le SDK effectue une vérification de statut toutes les **10 secondes**, pendant **2 minutes maximum** (12 tentatives). Si aucune confirmation n'arrive dans ce délai :
+
+- Le statut `TIMEOUT` est retourné dans le `callback`
+- La redirection `error_callback_url` est déclenchée si définie
+- Message : `"La vérification du paiement a expiré. Veuillez vérifier votre compte."`
+
+> **Conseil :** Configurez un webhook côté serveur sur le tableau de bord FeexPay pour recevoir les confirmations de paiement indépendamment du timeout côté client.
+
+---
+
+### Erreurs réseau
+
+En cas d'exception lors de l'appel API (réseau coupé, serveur indisponible), le SDK affiche :
+
+```
+Une erreur est survenue lors du traitement du paiement. Veuillez réessayer.
+```
+
+Le `callback` est appelé avec `status: 'FAILED'`.
+
+---
+
+### Opérateurs avec redirect iframe
+
+Pour certains opérateurs (Wave CI, Orange CI, Moov BF, Orange BF, Wave SN), le paiement passe par une page externe affichée dans une **iframe intégrée**. L'utilisateur finalise le paiement dans cette iframe, puis le SDK vérifie le statut en arrière-plan. Un bouton de fermeture permet de revenir au formulaire.
+
+---
+
+## 10. Personnalisation du bouton
+
+### Via `buttonText` et `buttonClass`
+
+```tsx
+<FeexPay
+  amount={5000}
+  token="tok_live_xxxxxxxxxxxxxx"
+  id="shop_xxxxxxxx"
+  buttonText="Acheter maintenant"
+  buttonClass="bg-green-600 hover:bg-green-700 text-white font-semibold py-3 px-6 rounded-full"
+/>
+```
+
+### Via `buttonStyles` (styles inline)
+
+```tsx
+<FeexPay
+  amount={5000}
+  token="tok_live_xxxxxxxxxxxxxx"
+  id="shop_xxxxxxxx"
+  buttonStyles={{
+    backgroundColor: '#1a56db',
+    color: '#ffffff',
+    padding: '12px 24px',
+    borderRadius: '8px',
+    fontWeight: 'bold',
+    border: 'none',
+    cursor: 'pointer',
+  }}
+/>
+```
+
+Le texte par défaut du bouton est `"Payer X {currency}"` où `X` est le montant formaté en locale française.
+
+---
+
+## 11. Changelog
+
+### 1.0.0 — Publication initiale
+
+- Renommage du paquet en `react-sdk-feexpay`
+- Migration vers **React 19** et **styled-components v6**
+- Composant principal `FeexPay` avec alias rétrocompatible `FeexPayButton`
+- Support Mobile Money : Bénin, Côte d'Ivoire, Burkina Faso, Congo-Brazzaville, Sénégal, Togo
+- Support Wallet : Coris Money (Bénin), Wave (Côte d'Ivoire)
+- Gestion OTP pour Orange Sénégal et Coris Money
+- Affichage iframe pour les opérateurs avec redirect
+- Polling de statut automatique (10 s × 12 = 2 min)
+- Pré-remplissage des champs (`first_name`, `email`, `defaultValueField`)
+- Masquage de champs (`fieldsToHide`)
+- Event DOM `feexpay:trigger` pour déclencheurs personnalisés
+- Exports TypeScript complets (`PaymentConfig`, `Transaction`, `Network`, `Country`, etc.)
+
+---
+
+## Ressources
+
+- **Site officiel FeexPay :** [feexpay.me](https://feexpay.me)
+- **Conditions d'utilisation :** [feexpay.me/fr/terms-and-conditions](https://feexpay.me/fr/terms-and-conditions)
+- **Tableau de bord marchands :** Disponible sur votre espace FeexPay
+- **Support :** Contactez l'équipe FeexPay depuis votre tableau de bord
+
+---
+
+*Documentation générée pour `react-sdk-feexpay` v2*

package/dist/index.js

@@ -95,7 +95,7 @@ function styleInject(css, { insertAt } = {}) {
 }
 
 // src/index.css
-styleInject('*,\n::before,\n::after {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x: ;\n  --tw-pan-y: ;\n  --tw-pinch-zoom: ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position: ;\n  --tw-gradient-via-position: ;\n  --tw-gradient-to-position: ;\n  --tw-ordinal: ;\n  --tw-slashed-zero: ;\n  --tw-numeric-figure: ;\n  --tw-numeric-spacing: ;\n  --tw-numeric-fraction: ;\n  --tw-ring-inset: ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur: ;\n  --tw-brightness: ;\n  --tw-contrast: ;\n  --tw-grayscale: ;\n  --tw-hue-rotate: ;\n  --tw-invert: ;\n  --tw-saturate: ;\n  --tw-sepia: ;\n  --tw-drop-shadow: ;\n  --tw-backdrop-blur: ;\n  --tw-backdrop-brightness: ;\n  --tw-backdrop-contrast: ;\n  --tw-backdrop-grayscale: ;\n  --tw-backdrop-hue-rotate: ;\n  --tw-backdrop-invert: ;\n  --tw-backdrop-opacity: ;\n  --tw-backdrop-saturate: ;\n  --tw-backdrop-sepia: ;\n  --tw-contain-size: ;\n  --tw-contain-layout: ;\n  --tw-contain-paint: ;\n  --tw-contain-style: ;\n}\n::backdrop {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x: ;\n  --tw-pan-y: ;\n  --tw-pinch-zoom: ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position: ;\n  --tw-gradient-via-position: ;\n  --tw-gradient-to-position: ;\n  --tw-ordinal: ;\n  --tw-slashed-zero: ;\n  --tw-numeric-figure: ;\n  --tw-numeric-spacing: ;\n  --tw-numeric-fraction: ;\n  --tw-ring-inset: ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur: ;\n  --tw-brightness: ;\n  --tw-contrast: ;\n  --tw-grayscale: ;\n  --tw-hue-rotate: ;\n  --tw-invert: ;\n  --tw-saturate: ;\n  --tw-sepia: ;\n  --tw-drop-shadow: ;\n  --tw-backdrop-blur: ;\n  --tw-backdrop-brightness: ;\n  --tw-backdrop-contrast: ;\n  --tw-backdrop-grayscale: ;\n  --tw-backdrop-hue-rotate: ;\n  --tw-backdrop-invert: ;\n  --tw-backdrop-opacity: ;\n  --tw-backdrop-saturate: ;\n  --tw-backdrop-sepia: ;\n  --tw-contain-size: ;\n  --tw-contain-layout: ;\n  --tw-contain-paint: ;\n  --tw-contain-style: ;\n}\n*,\n::before,\n::after {\n  box-sizing: border-box;\n  border-width: 0;\n  border-style: solid;\n  border-color: #e5e7eb;\n}\n::before,\n::after {\n  --tw-content: "";\n}\nhtml,\n:host {\n  line-height: 1.5;\n  -webkit-text-size-adjust: 100%;\n  -moz-tab-size: 4;\n  -o-tab-size: 4;\n  tab-size: 4;\n  font-family:\n    ui-sans-serif,\n    system-ui,\n    sans-serif,\n    "Apple Color Emoji",\n    "Segoe UI Emoji",\n    "Segoe UI Symbol",\n    "Noto Color Emoji";\n  font-feature-settings: normal;\n  font-variation-settings: normal;\n  -webkit-tap-highlight-color: transparent;\n}\nbody {\n  margin: 0;\n  line-height: inherit;\n}\nhr {\n  height: 0;\n  color: inherit;\n  border-top-width: 1px;\n}\nabbr:where([title]) {\n  -webkit-text-decoration: underline dotted;\n  text-decoration: underline dotted;\n}\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\na {\n  color: inherit;\n  text-decoration: inherit;\n}\nb,\nstrong {\n  font-weight: bolder;\n}\ncode,\nkbd,\nsamp,\npre {\n  font-family:\n    ui-monospace,\n    SFMono-Regular,\n    Menlo,\n    Monaco,\n    Consolas,\n    "Liberation Mono",\n    "Courier New",\n    monospace;\n  font-feature-settings: normal;\n  font-variation-settings: normal;\n  font-size: 1em;\n}\nsmall {\n  font-size: 80%;\n}\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\nsub {\n  bottom: -0.25em;\n}\nsup {\n  top: -0.5em;\n}\ntable {\n  text-indent: 0;\n  border-color: inherit;\n  border-collapse: collapse;\n}\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit;\n  font-feature-settings: inherit;\n  font-variation-settings: inherit;\n  font-size: 100%;\n  font-weight: inherit;\n  line-height: inherit;\n  letter-spacing: inherit;\n  color: inherit;\n  margin: 0;\n  padding: 0;\n}\nbutton,\nselect {\n  text-transform: none;\n}\nbutton,\ninput:where([type=button]),\ninput:where([type=reset]),\ninput:where([type=submit]) {\n  -webkit-appearance: button;\n  background-color: transparent;\n  background-image: none;\n}\n:-moz-focusring {\n  outline: auto;\n}\n:-moz-ui-invalid {\n  box-shadow: none;\n}\nprogress {\n  vertical-align: baseline;\n}\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n  height: auto;\n}\n[type=search] {\n  -webkit-appearance: textfield;\n  outline-offset: -2px;\n}\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n::-webkit-file-upload-button {\n  -webkit-appearance: button;\n  font: inherit;\n}\nsummary {\n  display: list-item;\n}\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n  margin: 0;\n}\nfieldset {\n  margin: 0;\n  padding: 0;\n}\nlegend {\n  padding: 0;\n}\nol,\nul,\nmenu {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\ndialog {\n  padding: 0;\n}\ntextarea {\n  resize: vertical;\n}\ninput::-moz-placeholder,\ntextarea::-moz-placeholder {\n  opacity: 1;\n  color: #9ca3af;\n}\ninput::placeholder,\ntextarea::placeholder {\n  opacity: 1;\n  color: #9ca3af;\n}\nbutton,\n[role=button] {\n  cursor: pointer;\n}\n:disabled {\n  cursor: default;\n}\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n  display: block;\n  vertical-align: middle;\n}\nimg,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n[hidden]:where(:not([hidden=until-found])) {\n  display: none;\n}\n.\\!container {\n  width: 100% !important;\n}\n.container {\n  width: 100%;\n}\n@media (min-width: 640px) {\n  .\\!container {\n    max-width: 640px !important;\n  }\n  .container {\n    max-width: 640px;\n  }\n}\n@media (min-width: 768px) {\n  .\\!container {\n    max-width: 768px !important;\n  }\n  .container {\n    max-width: 768px;\n  }\n}\n@media (min-width: 1024px) {\n  .\\!container {\n    max-width: 1024px !important;\n  }\n  .container {\n    max-width: 1024px;\n  }\n}\n@media (min-width: 1280px) {\n  .\\!container {\n    max-width: 1280px !important;\n  }\n  .container {\n    max-width: 1280px;\n  }\n}\n@media (min-width: 1536px) {\n  .\\!container {\n    max-width: 1536px !important;\n  }\n  .container {\n    max-width: 1536px;\n  }\n}\n.pointer-events-none {\n  pointer-events: none;\n}\n.visible {\n  visibility: visible;\n}\n.fixed {\n  position: fixed;\n}\n.absolute {\n  position: absolute;\n}\n.relative {\n  position: relative;\n}\n.inset-0 {\n  inset: 0px;\n}\n.inset-y-0 {\n  top: 0px;\n  bottom: 0px;\n}\n.right-0 {\n  right: 0px;\n}\n.right-2 {\n  right: 0.5rem;\n}\n.top-2 {\n  top: 0.5rem;\n}\n.z-10 {\n  z-index: 10;\n}\n.z-20 {\n  z-index: 20;\n}\n.z-50 {\n  z-index: 50;\n}\n.mx-auto {\n  margin-left: auto;\n  margin-right: auto;\n}\n.-ml-1 {\n  margin-left: -0.25rem;\n}\n.mb-1 {\n  margin-bottom: 0.25rem;\n}\n.mb-2 {\n  margin-bottom: 0.5rem;\n}\n.mb-4 {\n  margin-bottom: 1rem;\n}\n.mb-5 {\n  margin-bottom: 1.25rem;\n}\n.mb-6 {\n  margin-bottom: 1.5rem;\n}\n.mr-2 {\n  margin-right: 0.5rem;\n}\n.mt-2 {\n  margin-top: 0.5rem;\n}\n.mt-6 {\n  margin-top: 1.5rem;\n}\n.block {\n  display: block;\n}\n.flex {\n  display: flex;\n}\n.inline-flex {\n  display: inline-flex;\n}\n.grid {\n  display: grid;\n}\n.\\!hidden {\n  display: none !important;\n}\n.hidden {\n  display: none;\n}\n.h-1\\.5 {\n  height: 0.375rem;\n}\n.h-11 {\n  height: 2.75rem;\n}\n.h-20 {\n  height: 5rem;\n}\n.h-4 {\n  height: 1rem;\n}\n.h-5 {\n  height: 1.25rem;\n}\n.h-6 {\n  height: 1.5rem;\n}\n.h-8 {\n  height: 2rem;\n}\n.h-full {\n  height: 100%;\n}\n.max-h-\\[90vh\\] {\n  max-height: 90vh;\n}\n.w-1\\/3 {\n  width: 33.333333%;\n}\n.w-11 {\n  width: 2.75rem;\n}\n.w-2\\/3 {\n  width: 66.666667%;\n}\n.w-20 {\n  width: 5rem;\n}\n.w-4 {\n  width: 1rem;\n}\n.w-5 {\n  width: 1.25rem;\n}\n.w-6 {\n  width: 1.5rem;\n}\n.w-8 {\n  width: 2rem;\n}\n.w-full {\n  width: 100%;\n}\n.max-w-\\[120px\\] {\n  max-width: 120px;\n}\n.max-w-md {\n  max-width: 28rem;\n}\n.max-w-sm {\n  max-width: 24rem;\n}\n.flex-1 {\n  flex: 1 1 0%;\n}\n.flex-shrink-0 {\n  flex-shrink: 0;\n}\n.flex-grow {\n  flex-grow: 1;\n}\n.transform {\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n.animate-spin {\n  animation: spin 1s linear infinite;\n}\n.cursor-not-allowed {\n  cursor: not-allowed;\n}\n.cursor-pointer {\n  cursor: pointer;\n}\n.appearance-none {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n}\n.grid-cols-2 {\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.flex-col {\n  flex-direction: column;\n}\n.items-center {\n  align-items: center;\n}\n.justify-center {\n  justify-content: center;\n}\n.justify-between {\n  justify-content: space-between;\n}\n.gap-2 {\n  gap: 0.5rem;\n}\n.gap-4 {\n  gap: 1rem;\n}\n.space-x-2 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-x-reverse: 0;\n  margin-right: calc(0.5rem * var(--tw-space-x-reverse));\n  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));\n}\n.space-y-4 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-y-reverse: 0;\n  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n}\n.space-y-6 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-y-reverse: 0;\n  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));\n}\n.overflow-hidden {\n  overflow: hidden;\n}\n.overflow-y-auto {\n  overflow-y: auto;\n}\n.rounded {\n  border-radius: 0.25rem;\n}\n.rounded-2xl {\n  border-radius: 1rem;\n}\n.rounded-full {\n  border-radius: 9999px;\n}\n.rounded-lg {\n  border-radius: 0.5rem;\n}\n.rounded-md {\n  border-radius: 0.375rem;\n}\n.rounded-xl {\n  border-radius: 0.75rem;\n}\n.rounded-l-md {\n  border-top-left-radius: 0.375rem;\n  border-bottom-left-radius: 0.375rem;\n}\n.rounded-r-md {\n  border-top-right-radius: 0.375rem;\n  border-bottom-right-radius: 0.375rem;\n}\n.border {\n  border-width: 1px;\n}\n.border-0 {\n  border-width: 0px;\n}\n.border-b {\n  border-bottom-width: 1px;\n}\n.border-r-0 {\n  border-right-width: 0px;\n}\n.border-\\[\\#D45D00\\] {\n  --tw-border-opacity: 1;\n  border-color: rgb(212 93 0 / var(--tw-border-opacity, 1));\n}\n.border-gray-200 {\n  --tw-border-opacity: 1;\n  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));\n}\n.border-gray-300 {\n  --tw-border-opacity: 1;\n  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));\n}\n.bg-\\[\\#fff7ed\\] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 247 237 / var(--tw-bg-opacity, 1));\n}\n.bg-black {\n  --tw-bg-opacity: 1;\n  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));\n}\n.bg-blue-50 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));\n}\n.bg-gray-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));\n}\n.bg-gray-200 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));\n}\n.bg-gray-400 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));\n}\n.bg-gray-50 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));\n}\n.bg-gray-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));\n}\n.bg-gray-800 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));\n}\n.bg-green-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));\n}\n.bg-green-400 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(74 222 128 / var(--tw-bg-opacity, 1));\n}\n.bg-green-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));\n}\n.bg-orange-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1));\n}\n.bg-orange-400 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(251 146 60 / var(--tw-bg-opacity, 1));\n}\n.bg-primary-orange {\n  --tw-bg-opacity: 1;\n  background-color: rgb(212 93 0 / var(--tw-bg-opacity, 1));\n}\n.bg-red-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));\n}\n.bg-red-400 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1));\n}\n.bg-white {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.bg-opacity-50 {\n  --tw-bg-opacity: 0.5;\n}\n.p-1 {\n  padding: 0.25rem;\n}\n.p-2 {\n  padding: 0.5rem;\n}\n.p-4 {\n  padding: 1rem;\n}\n.p-6 {\n  padding: 1.5rem;\n}\n.px-2 {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n.px-3 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n.px-4 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n.py-2 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n.py-3 {\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n}\n.pb-4 {\n  padding-bottom: 1rem;\n}\n.pr-8 {\n  padding-right: 2rem;\n}\n.pt-2 {\n  padding-top: 0.5rem;\n}\n.text-center {\n  text-align: center;\n}\n.text-right {\n  text-align: right;\n}\n.text-lg {\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n}\n.text-sm {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.text-xl {\n  font-size: 1.25rem;\n  line-height: 1.75rem;\n}\n.text-xs {\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n.font-bold {\n  font-weight: 700;\n}\n.font-medium {\n  font-weight: 500;\n}\n.font-semibold {\n  font-weight: 600;\n}\n.text-blue-900 {\n  --tw-text-opacity: 1;\n  color: rgb(30 58 138 / var(--tw-text-opacity, 1));\n}\n.text-gray-400 {\n  --tw-text-opacity: 1;\n  color: rgb(156 163 175 / var(--tw-text-opacity, 1));\n}\n.text-gray-500 {\n  --tw-text-opacity: 1;\n  color: rgb(107 114 128 / var(--tw-text-opacity, 1));\n}\n.text-gray-600 {\n  --tw-text-opacity: 1;\n  color: rgb(75 85 99 / var(--tw-text-opacity, 1));\n}\n.text-gray-700 {\n  --tw-text-opacity: 1;\n  color: rgb(55 65 81 / var(--tw-text-opacity, 1));\n}\n.text-gray-800 {\n  --tw-text-opacity: 1;\n  color: rgb(31 41 55 / var(--tw-text-opacity, 1));\n}\n.text-gray-900 {\n  --tw-text-opacity: 1;\n  color: rgb(17 24 39 / var(--tw-text-opacity, 1));\n}\n.text-green-500 {\n  --tw-text-opacity: 1;\n  color: rgb(34 197 94 / var(--tw-text-opacity, 1));\n}\n.text-orange-500 {\n  --tw-text-opacity: 1;\n  color: rgb(249 115 22 / var(--tw-text-opacity, 1));\n}\n.text-primary-blue {\n  --tw-text-opacity: 1;\n  color: rgb(17 44 86 / var(--tw-text-opacity, 1));\n}\n.text-primary-orange {\n  --tw-text-opacity: 1;\n  color: rgb(212 93 0 / var(--tw-text-opacity, 1));\n}\n.text-red-500 {\n  --tw-text-opacity: 1;\n  color: rgb(239 68 68 / var(--tw-text-opacity, 1));\n}\n.text-red-600 {\n  --tw-text-opacity: 1;\n  color: rgb(220 38 38 / var(--tw-text-opacity, 1));\n}\n.text-white {\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.underline {\n  text-decoration-line: underline;\n}\n.opacity-25 {\n  opacity: 0.25;\n}\n.opacity-70 {\n  opacity: 0.7;\n}\n.opacity-75 {\n  opacity: 0.75;\n}\n.shadow-2xl {\n  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);\n  box-shadow:\n    var(--tw-ring-offset-shadow, 0 0 #0000),\n    var(--tw-ring-shadow, 0 0 #0000),\n    var(--tw-shadow);\n}\n.shadow-xl {\n  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);\n  box-shadow:\n    var(--tw-ring-offset-shadow, 0 0 #0000),\n    var(--tw-ring-shadow, 0 0 #0000),\n    var(--tw-shadow);\n}\n.outline {\n  outline-style: solid;\n}\n.transition {\n  transition-property:\n    color,\n    background-color,\n    border-color,\n    text-decoration-color,\n    fill,\n    stroke,\n    opacity,\n    box-shadow,\n    transform,\n    filter,\n    backdrop-filter;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.transition-colors {\n  transition-property:\n    color,\n    background-color,\n    border-color,\n    text-decoration-color,\n    fill,\n    stroke;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.duration-200 {\n  transition-duration: 200ms;\n}\n.duration-300 {\n  transition-duration: 300ms;\n}\n.hover\\:border-\\[\\#D45D00\\]:hover {\n  --tw-border-opacity: 1;\n  border-color: rgb(212 93 0 / var(--tw-border-opacity, 1));\n}\n.hover\\:bg-gray-300:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-gray-600:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-green-600:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-orange-700:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(194 65 12 / var(--tw-bg-opacity, 1));\n}\n.hover\\:text-gray-700:hover {\n  --tw-text-opacity: 1;\n  color: rgb(55 65 81 / var(--tw-text-opacity, 1));\n}\n.focus\\:outline-none:focus {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n}\n.focus\\:ring-2:focus {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow:\n    var(--tw-ring-offset-shadow),\n    var(--tw-ring-shadow),\n    var(--tw-shadow, 0 0 #0000);\n}\n.focus\\:ring-primary-orange:focus {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(212 93 0 / var(--tw-ring-opacity, 1));\n}\n.focus\\:ring-offset-2:focus {\n  --tw-ring-offset-width: 2px;\n}\n.disabled\\:opacity-50:disabled {\n  opacity: 0.5;\n}\n');
+styleInject('*,\n::before,\n::after {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x: ;\n  --tw-pan-y: ;\n  --tw-pinch-zoom: ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position: ;\n  --tw-gradient-via-position: ;\n  --tw-gradient-to-position: ;\n  --tw-ordinal: ;\n  --tw-slashed-zero: ;\n  --tw-numeric-figure: ;\n  --tw-numeric-spacing: ;\n  --tw-numeric-fraction: ;\n  --tw-ring-inset: ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur: ;\n  --tw-brightness: ;\n  --tw-contrast: ;\n  --tw-grayscale: ;\n  --tw-hue-rotate: ;\n  --tw-invert: ;\n  --tw-saturate: ;\n  --tw-sepia: ;\n  --tw-drop-shadow: ;\n  --tw-backdrop-blur: ;\n  --tw-backdrop-brightness: ;\n  --tw-backdrop-contrast: ;\n  --tw-backdrop-grayscale: ;\n  --tw-backdrop-hue-rotate: ;\n  --tw-backdrop-invert: ;\n  --tw-backdrop-opacity: ;\n  --tw-backdrop-saturate: ;\n  --tw-backdrop-sepia: ;\n  --tw-contain-size: ;\n  --tw-contain-layout: ;\n  --tw-contain-paint: ;\n  --tw-contain-style: ;\n}\n::backdrop {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x: ;\n  --tw-pan-y: ;\n  --tw-pinch-zoom: ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position: ;\n  --tw-gradient-via-position: ;\n  --tw-gradient-to-position: ;\n  --tw-ordinal: ;\n  --tw-slashed-zero: ;\n  --tw-numeric-figure: ;\n  --tw-numeric-spacing: ;\n  --tw-numeric-fraction: ;\n  --tw-ring-inset: ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur: ;\n  --tw-brightness: ;\n  --tw-contrast: ;\n  --tw-grayscale: ;\n  --tw-hue-rotate: ;\n  --tw-invert: ;\n  --tw-saturate: ;\n  --tw-sepia: ;\n  --tw-drop-shadow: ;\n  --tw-backdrop-blur: ;\n  --tw-backdrop-brightness: ;\n  --tw-backdrop-contrast: ;\n  --tw-backdrop-grayscale: ;\n  --tw-backdrop-hue-rotate: ;\n  --tw-backdrop-invert: ;\n  --tw-backdrop-opacity: ;\n  --tw-backdrop-saturate: ;\n  --tw-backdrop-sepia: ;\n  --tw-contain-size: ;\n  --tw-contain-layout: ;\n  --tw-contain-paint: ;\n  --tw-contain-style: ;\n}\n*,\n::before,\n::after {\n  box-sizing: border-box;\n  border-width: 0;\n  border-style: solid;\n  border-color: #e5e7eb;\n}\n::before,\n::after {\n  --tw-content: "";\n}\nhtml,\n:host {\n  line-height: 1.5;\n  -webkit-text-size-adjust: 100%;\n  -moz-tab-size: 4;\n  -o-tab-size: 4;\n  tab-size: 4;\n  font-family:\n    ui-sans-serif,\n    system-ui,\n    sans-serif,\n    "Apple Color Emoji",\n    "Segoe UI Emoji",\n    "Segoe UI Symbol",\n    "Noto Color Emoji";\n  font-feature-settings: normal;\n  font-variation-settings: normal;\n  -webkit-tap-highlight-color: transparent;\n}\nbody {\n  margin: 0;\n  line-height: inherit;\n}\nhr {\n  height: 0;\n  color: inherit;\n  border-top-width: 1px;\n}\nabbr:where([title]) {\n  -webkit-text-decoration: underline dotted;\n  text-decoration: underline dotted;\n}\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\na {\n  color: inherit;\n  text-decoration: inherit;\n}\nb,\nstrong {\n  font-weight: bolder;\n}\ncode,\nkbd,\nsamp,\npre {\n  font-family:\n    ui-monospace,\n    SFMono-Regular,\n    Menlo,\n    Monaco,\n    Consolas,\n    "Liberation Mono",\n    "Courier New",\n    monospace;\n  font-feature-settings: normal;\n  font-variation-settings: normal;\n  font-size: 1em;\n}\nsmall {\n  font-size: 80%;\n}\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\nsub {\n  bottom: -0.25em;\n}\nsup {\n  top: -0.5em;\n}\ntable {\n  text-indent: 0;\n  border-color: inherit;\n  border-collapse: collapse;\n}\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit;\n  font-feature-settings: inherit;\n  font-variation-settings: inherit;\n  font-size: 100%;\n  font-weight: inherit;\n  line-height: inherit;\n  letter-spacing: inherit;\n  color: inherit;\n  margin: 0;\n  padding: 0;\n}\nbutton,\nselect {\n  text-transform: none;\n}\nbutton,\ninput:where([type=button]),\ninput:where([type=reset]),\ninput:where([type=submit]) {\n  -webkit-appearance: button;\n  background-color: transparent;\n  background-image: none;\n}\n:-moz-focusring {\n  outline: auto;\n}\n:-moz-ui-invalid {\n  box-shadow: none;\n}\nprogress {\n  vertical-align: baseline;\n}\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n  height: auto;\n}\n[type=search] {\n  -webkit-appearance: textfield;\n  outline-offset: -2px;\n}\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n::-webkit-file-upload-button {\n  -webkit-appearance: button;\n  font: inherit;\n}\nsummary {\n  display: list-item;\n}\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n  margin: 0;\n}\nfieldset {\n  margin: 0;\n  padding: 0;\n}\nlegend {\n  padding: 0;\n}\nol,\nul,\nmenu {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\ndialog {\n  padding: 0;\n}\ntextarea {\n  resize: vertical;\n}\ninput::-moz-placeholder,\ntextarea::-moz-placeholder {\n  opacity: 1;\n  color: #9ca3af;\n}\ninput::placeholder,\ntextarea::placeholder {\n  opacity: 1;\n  color: #9ca3af;\n}\nbutton,\n[role=button] {\n  cursor: pointer;\n}\n:disabled {\n  cursor: default;\n}\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n  display: block;\n  vertical-align: middle;\n}\nimg,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n[hidden]:where(:not([hidden=until-found])) {\n  display: none;\n}\n.\\!container {\n  width: 100% !important;\n}\n.container {\n  width: 100%;\n}\n@media (min-width: 640px) {\n  .\\!container {\n    max-width: 640px !important;\n  }\n  .container {\n    max-width: 640px;\n  }\n}\n@media (min-width: 768px) {\n  .\\!container {\n    max-width: 768px !important;\n  }\n  .container {\n    max-width: 768px;\n  }\n}\n@media (min-width: 1024px) {\n  .\\!container {\n    max-width: 1024px !important;\n  }\n  .container {\n    max-width: 1024px;\n  }\n}\n@media (min-width: 1280px) {\n  .\\!container {\n    max-width: 1280px !important;\n  }\n  .container {\n    max-width: 1280px;\n  }\n}\n@media (min-width: 1536px) {\n  .\\!container {\n    max-width: 1536px !important;\n  }\n  .container {\n    max-width: 1536px;\n  }\n}\n.pointer-events-none {\n  pointer-events: none;\n}\n.visible {\n  visibility: visible;\n}\n.fixed {\n  position: fixed;\n}\n.absolute {\n  position: absolute;\n}\n.relative {\n  position: relative;\n}\n.inset-0 {\n  inset: 0px;\n}\n.inset-y-0 {\n  top: 0px;\n  bottom: 0px;\n}\n.right-0 {\n  right: 0px;\n}\n.right-2 {\n  right: 0.5rem;\n}\n.top-2 {\n  top: 0.5rem;\n}\n.z-10 {\n  z-index: 10;\n}\n.z-20 {\n  z-index: 20;\n}\n.z-50 {\n  z-index: 50;\n}\n.mx-auto {\n  margin-left: auto;\n  margin-right: auto;\n}\n.-ml-1 {\n  margin-left: -0.25rem;\n}\n.mb-1 {\n  margin-bottom: 0.25rem;\n}\n.mb-2 {\n  margin-bottom: 0.5rem;\n}\n.mb-4 {\n  margin-bottom: 1rem;\n}\n.mb-5 {\n  margin-bottom: 1.25rem;\n}\n.mb-6 {\n  margin-bottom: 1.5rem;\n}\n.mr-2 {\n  margin-right: 0.5rem;\n}\n.mt-2 {\n  margin-top: 0.5rem;\n}\n.mt-6 {\n  margin-top: 1.5rem;\n}\n.block {\n  display: block;\n}\n.flex {\n  display: flex;\n}\n.inline-flex {\n  display: inline-flex;\n}\n.grid {\n  display: grid;\n}\n.\\!hidden {\n  display: none !important;\n}\n.hidden {\n  display: none;\n}\n.h-1\\.5 {\n  height: 0.375rem;\n}\n.h-11 {\n  height: 2.75rem;\n}\n.h-20 {\n  height: 5rem;\n}\n.h-4 {\n  height: 1rem;\n}\n.h-5 {\n  height: 1.25rem;\n}\n.h-6 {\n  height: 1.5rem;\n}\n.h-8 {\n  height: 2rem;\n}\n.h-full {\n  height: 100%;\n}\n.max-h-\\[90vh\\] {\n  max-height: 90vh;\n}\n.w-1\\/3 {\n  width: 33.333333%;\n}\n.w-11 {\n  width: 2.75rem;\n}\n.w-2\\/3 {\n  width: 66.666667%;\n}\n.w-20 {\n  width: 5rem;\n}\n.w-4 {\n  width: 1rem;\n}\n.w-5 {\n  width: 1.25rem;\n}\n.w-6 {\n  width: 1.5rem;\n}\n.w-8 {\n  width: 2rem;\n}\n.w-full {\n  width: 100%;\n}\n.max-w-\\[120px\\] {\n  max-width: 120px;\n}\n.max-w-md {\n  max-width: 28rem;\n}\n.max-w-sm {\n  max-width: 24rem;\n}\n.flex-1 {\n  flex: 1 1 0%;\n}\n.flex-shrink-0 {\n  flex-shrink: 0;\n}\n.flex-grow {\n  flex-grow: 1;\n}\n.transform {\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n.animate-spin {\n  animation: spin 1s linear infinite;\n}\n.cursor-not-allowed {\n  cursor: not-allowed;\n}\n.cursor-pointer {\n  cursor: pointer;\n}\n.appearance-none {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n}\n.grid-cols-2 {\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.flex-col {\n  flex-direction: column;\n}\n.items-center {\n  align-items: center;\n}\n.justify-center {\n  justify-content: center;\n}\n.justify-between {\n  justify-content: space-between;\n}\n.gap-2 {\n  gap: 0.5rem;\n}\n.gap-4 {\n  gap: 1rem;\n}\n.space-x-2 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-x-reverse: 0;\n  margin-right: calc(0.5rem * var(--tw-space-x-reverse));\n  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));\n}\n.space-y-4 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-y-reverse: 0;\n  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n}\n.space-y-6 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-y-reverse: 0;\n  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));\n}\n.overflow-hidden {\n  overflow: hidden;\n}\n.overflow-y-auto {\n  overflow-y: auto;\n}\n.rounded {\n  border-radius: 0.25rem;\n}\n.rounded-2xl {\n  border-radius: 1rem;\n}\n.rounded-full {\n  border-radius: 9999px;\n}\n.rounded-lg {\n  border-radius: 0.5rem;\n}\n.rounded-md {\n  border-radius: 0.375rem;\n}\n.rounded-xl {\n  border-radius: 0.75rem;\n}\n.rounded-l-md {\n  border-top-left-radius: 0.375rem;\n  border-bottom-left-radius: 0.375rem;\n}\n.rounded-r-md {\n  border-top-right-radius: 0.375rem;\n  border-bottom-right-radius: 0.375rem;\n}\n.border {\n  border-width: 1px;\n}\n.border-0 {\n  border-width: 0px;\n}\n.border-b {\n  border-bottom-width: 1px;\n}\n.border-r-0 {\n  border-right-width: 0px;\n}\n.border-\\[\\#D45D00\\] {\n  --tw-border-opacity: 1;\n  border-color: rgb(212 93 0 / var(--tw-border-opacity, 1));\n}\n.border-gray-200 {\n  --tw-border-opacity: 1;\n  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));\n}\n.border-gray-300 {\n  --tw-border-opacity: 1;\n  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));\n}\n.bg-\\[\\#fff7ed\\] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 247 237 / var(--tw-bg-opacity, 1));\n}\n.bg-black {\n  --tw-bg-opacity: 1;\n  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));\n}\n.bg-blue-50 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));\n}\n.bg-gray-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));\n}\n.bg-gray-200 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));\n}\n.bg-gray-400 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));\n}\n.bg-gray-50 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));\n}\n.bg-gray-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));\n}\n.bg-gray-800 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));\n}\n.bg-green-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));\n}\n.bg-green-400 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(74 222 128 / var(--tw-bg-opacity, 1));\n}\n.bg-green-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));\n}\n.bg-orange-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1));\n}\n.bg-orange-400 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(251 146 60 / var(--tw-bg-opacity, 1));\n}\n.bg-primary-orange {\n  --tw-bg-opacity: 1;\n  background-color: rgb(212 93 0 / var(--tw-bg-opacity, 1));\n}\n.bg-red-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));\n}\n.bg-red-400 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1));\n}\n.bg-white {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.bg-opacity-50 {\n  --tw-bg-opacity: 0.5;\n}\n.p-1 {\n  padding: 0.25rem;\n}\n.p-2 {\n  padding: 0.5rem;\n}\n.p-4 {\n  padding: 1rem;\n}\n.p-6 {\n  padding: 1.5rem;\n}\n.px-2 {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n.px-3 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n.px-4 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n.py-2 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n.py-3 {\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n}\n.pb-4 {\n  padding-bottom: 1rem;\n}\n.pr-8 {\n  padding-right: 2rem;\n}\n.pt-2 {\n  padding-top: 0.5rem;\n}\n.text-center {\n  text-align: center;\n}\n.text-right {\n  text-align: right;\n}\n.text-lg {\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n}\n.text-sm {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.text-xl {\n  font-size: 1.25rem;\n  line-height: 1.75rem;\n}\n.text-xs {\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n.font-bold {\n  font-weight: 700;\n}\n.font-medium {\n  font-weight: 500;\n}\n.font-semibold {\n  font-weight: 600;\n}\n.text-blue-900 {\n  --tw-text-opacity: 1;\n  color: rgb(30 58 138 / var(--tw-text-opacity, 1));\n}\n.text-gray-400 {\n  --tw-text-opacity: 1;\n  color: rgb(156 163 175 / var(--tw-text-opacity, 1));\n}\n.text-gray-500 {\n  --tw-text-opacity: 1;\n  color: rgb(107 114 128 / var(--tw-text-opacity, 1));\n}\n.text-gray-600 {\n  --tw-text-opacity: 1;\n  color: rgb(75 85 99 / var(--tw-text-opacity, 1));\n}\n.text-gray-700 {\n  --tw-text-opacity: 1;\n  color: rgb(55 65 81 / var(--tw-text-opacity, 1));\n}\n.text-gray-800 {\n  --tw-text-opacity: 1;\n  color: rgb(31 41 55 / var(--tw-text-opacity, 1));\n}\n.text-gray-900 {\n  --tw-text-opacity: 1;\n  color: rgb(17 24 39 / var(--tw-text-opacity, 1));\n}\n.text-green-500 {\n  --tw-text-opacity: 1;\n  color: rgb(34 197 94 / var(--tw-text-opacity, 1));\n}\n.text-orange-500 {\n  --tw-text-opacity: 1;\n  color: rgb(249 115 22 / var(--tw-text-opacity, 1));\n}\n.text-primary-blue {\n  --tw-text-opacity: 1;\n  color: rgb(17 44 86 / var(--tw-text-opacity, 1));\n}\n.text-primary-orange {\n  --tw-text-opacity: 1;\n  color: rgb(212 93 0 / var(--tw-text-opacity, 1));\n}\n.text-red-500 {\n  --tw-text-opacity: 1;\n  color: rgb(239 68 68 / var(--tw-text-opacity, 1));\n}\n.text-red-600 {\n  --tw-text-opacity: 1;\n  color: rgb(220 38 38 / var(--tw-text-opacity, 1));\n}\n.text-white {\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.underline {\n  text-decoration-line: underline;\n}\n.opacity-25 {\n  opacity: 0.25;\n}\n.opacity-50 {\n  opacity: 0.5;\n}\n.opacity-70 {\n  opacity: 0.7;\n}\n.opacity-75 {\n  opacity: 0.75;\n}\n.shadow-2xl {\n  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);\n  box-shadow:\n    var(--tw-ring-offset-shadow, 0 0 #0000),\n    var(--tw-ring-shadow, 0 0 #0000),\n    var(--tw-shadow);\n}\n.shadow-xl {\n  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);\n  box-shadow:\n    var(--tw-ring-offset-shadow, 0 0 #0000),\n    var(--tw-ring-shadow, 0 0 #0000),\n    var(--tw-shadow);\n}\n.outline {\n  outline-style: solid;\n}\n.transition {\n  transition-property:\n    color,\n    background-color,\n    border-color,\n    text-decoration-color,\n    fill,\n    stroke,\n    opacity,\n    box-shadow,\n    transform,\n    filter,\n    backdrop-filter;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.transition-colors {\n  transition-property:\n    color,\n    background-color,\n    border-color,\n    text-decoration-color,\n    fill,\n    stroke;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.duration-200 {\n  transition-duration: 200ms;\n}\n.duration-300 {\n  transition-duration: 300ms;\n}\n.hover\\:border-\\[\\#D45D00\\]:hover {\n  --tw-border-opacity: 1;\n  border-color: rgb(212 93 0 / var(--tw-border-opacity, 1));\n}\n.hover\\:bg-gray-300:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-gray-600:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-green-600:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-orange-700:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(194 65 12 / var(--tw-bg-opacity, 1));\n}\n.hover\\:text-gray-700:hover {\n  --tw-text-opacity: 1;\n  color: rgb(55 65 81 / var(--tw-text-opacity, 1));\n}\n.focus\\:outline-none:focus {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n}\n.focus\\:ring-2:focus {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow:\n    var(--tw-ring-offset-shadow),\n    var(--tw-ring-shadow),\n    var(--tw-shadow, 0 0 #0000);\n}\n.focus\\:ring-primary-orange:focus {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(212 93 0 / var(--tw-ring-opacity, 1));\n}\n.focus\\:ring-offset-2:focus {\n  --tw-ring-offset-width: 2px;\n}\n.disabled\\:opacity-50:disabled {\n  opacity: 0.5;\n}\n');
 
 // src/index.tsx
 var import_react9 = __toESM(require("react"));
@@ -451,7 +451,7 @@ var HeaderBar = ({ id, onClose }) => {
       width: "100",
       alt: "FeexPay"
     }
-  )), /* @__PURE__ */ import_react5.default.createElement("div", { className: "text-right text-xs text-gray-700" }, shopData && /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, /* @__PURE__ */ import_react5.default.createElement("div", { className: "font-semibold" }, "MARCHAND: ", shopData.name), /* @__PURE__ */ import_react5.default.createElement("div", { className: "text-xs text-gray-500" }, "ID : ", shopData.reference))), /* @__PURE__ */ import_react5.default.createElement(
+  )), /* @__PURE__ */ import_react5.default.createElement("div", { className: "flex-1 text-right text-xs text-gray-700 px-3" }, shopData && /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, /* @__PURE__ */ import_react5.default.createElement("div", { className: "font-semibold" }, "MARCHAND: ", shopData.name), /* @__PURE__ */ import_react5.default.createElement("div", { className: "text-xs text-gray-500" }, "ID : ", shopData.reference))), /* @__PURE__ */ import_react5.default.createElement(
     "button",
     {
       onClick: onClose,
@@ -640,6 +640,7 @@ var PaymentModal = ({ isOpen, onClose }) => {
   const [paymentStatus, setPaymentStatus] = (0, import_react7.useState)("PENDING");
   const [statusMessage, setStatusMessage] = (0, import_react7.useState)("");
   const [isLoading, setIsLoading] = (0, import_react7.useState)(false);
+  const [showCardUnavailableMsg, setShowCardUnavailableMsg] = (0, import_react7.useState)(false);
   const [otpModalOpen, setOtpModalOpen] = (0, import_react7.useState)(false);
   const [pendingReference, setPendingReference] = (0, import_react7.useState)("");
   const [iframeUrl, setIframeUrl] = (0, import_react7.useState)(null);
@@ -1081,16 +1082,29 @@ var PaymentModal = ({ isOpen, onClose }) => {
       "aria-label": "Fermer la passerelle de paiement"
     },
     /* @__PURE__ */ import_react7.default.createElement("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ import_react7.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M6 18L18 6M6 6l12 12" }))
-  ), /* @__PURE__ */ import_react7.default.createElement("iframe", { src: iframeUrl, className: "w-full h-full border-0", title: "Payment Gateway", allow: "payment" })), /* @__PURE__ */ import_react7.default.createElement(HeaderBar_default, { id: paymentConfig.id, onClose }), /* @__PURE__ */ import_react7.default.createElement("div", { className: "p-6 overflow-y-auto flex-grow" }, /* @__PURE__ */ import_react7.default.createElement("p", { className: "text-sm text-gray-600 text-center mb-4" }, "Remplissez les champs suivants pour effectuer votre paiement"), !paymentConfig.case && /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex justify-center mb-6 border-b pb-4 w-full gap-2" }, paymentTabs.map(({ label, value, icon }) => /* @__PURE__ */ import_react7.default.createElement(
-    "div",
-    {
-      key: value,
-      onClick: () => handlePaymentMethodChange(value),
-      className: `flex flex-col items-center flex-1 max-w-[120px] px-3 py-2 cursor-pointer rounded border ${paymentMethod === value ? "bg-[#fff7ed] border-[#D45D00]" : "bg-white border-gray-300 hover:border-[#D45D00]"}`
-    },
-    /* @__PURE__ */ import_react7.default.createElement("div", { className: "w-8 h-8 rounded-full flex items-center justify-center mb-1" }, icon),
-    /* @__PURE__ */ import_react7.default.createElement("span", { className: "text-xs font-medium text-center" }, label)
-  ))), /* @__PURE__ */ import_react7.default.createElement("div", { className: "space-y-6" }, showPersonalInfo && /* @__PURE__ */ import_react7.default.createElement("div", { className: "space-y-4" }, /* @__PURE__ */ import_react7.default.createElement("h2", { className: "font-bold text-gray-800 mb-2 flex items-center" }, /* @__PURE__ */ import_react7.default.createElement("span", { className: "bg-gray-800 text-white rounded-full w-5 h-5 inline-flex items-center justify-center text-xs mr-2" }, "1"), "Informations Personnelles"), !hidden.includes("name") && /* @__PURE__ */ import_react7.default.createElement(
+  ), /* @__PURE__ */ import_react7.default.createElement("iframe", { src: iframeUrl, className: "w-full h-full border-0", title: "Payment Gateway", allow: "payment" })), /* @__PURE__ */ import_react7.default.createElement(HeaderBar_default, { id: paymentConfig.id, onClose }), /* @__PURE__ */ import_react7.default.createElement("div", { className: "p-6 overflow-y-auto flex-grow" }, /* @__PURE__ */ import_react7.default.createElement("p", { className: "text-sm text-gray-600 text-center mb-4" }, "Remplissez les champs suivants pour effectuer votre paiement"), !paymentConfig.case && /* @__PURE__ */ import_react7.default.createElement("div", { className: "mb-6 border-b pb-4 w-full" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex justify-center gap-2" }, paymentTabs.map(({ label, value, icon }) => {
+    const isCardDisabled = value === "CARD";
+    return /* @__PURE__ */ import_react7.default.createElement(
+      "div",
+      {
+        key: value,
+        onClick: () => {
+          if (isCardDisabled) return;
+          setShowCardUnavailableMsg(false);
+          handlePaymentMethodChange(value);
+        },
+        onMouseEnter: () => {
+          if (isCardDisabled) setShowCardUnavailableMsg(true);
+        },
+        onMouseLeave: () => {
+          if (isCardDisabled) setShowCardUnavailableMsg(false);
+        },
+        className: `flex flex-col items-center flex-1 max-w-[120px] px-3 py-2 rounded border ${isCardDisabled ? "bg-gray-100 border-gray-200 opacity-50 cursor-not-allowed" : paymentMethod === value ? "bg-[#fff7ed] border-[#D45D00] cursor-pointer" : "bg-white border-gray-300 hover:border-[#D45D00] cursor-pointer"}`
+      },
+      /* @__PURE__ */ import_react7.default.createElement("div", { className: "w-8 h-8 rounded-full flex items-center justify-center mb-1" }, icon),
+      /* @__PURE__ */ import_react7.default.createElement("span", { className: "text-xs font-medium text-center" }, label)
+    );
+  })), showCardUnavailableMsg && /* @__PURE__ */ import_react7.default.createElement("p", { className: "mt-2 text-center text-xs font-medium text-red-600" }, "Les paiements par cartes sont momentan\xE9ment indisponibles.")), /* @__PURE__ */ import_react7.default.createElement("div", { className: "space-y-6" }, showPersonalInfo && /* @__PURE__ */ import_react7.default.createElement("div", { className: "space-y-4" }, /* @__PURE__ */ import_react7.default.createElement("h2", { className: "font-bold text-gray-800 mb-2 flex items-center" }, /* @__PURE__ */ import_react7.default.createElement("span", { className: "bg-gray-800 text-white rounded-full w-5 h-5 inline-flex items-center justify-center text-xs mr-2" }, "1"), "Informations Personnelles"), !hidden.includes("name") && /* @__PURE__ */ import_react7.default.createElement(
     "input",
     {
       type: "text",

package/dist/index.mjs

@@ -61,7 +61,7 @@ function styleInject(css, { insertAt } = {}) {
 }
 
 // src/index.css
-styleInject('*,\n::before,\n::after {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x: ;\n  --tw-pan-y: ;\n  --tw-pinch-zoom: ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position: ;\n  --tw-gradient-via-position: ;\n  --tw-gradient-to-position: ;\n  --tw-ordinal: ;\n  --tw-slashed-zero: ;\n  --tw-numeric-figure: ;\n  --tw-numeric-spacing: ;\n  --tw-numeric-fraction: ;\n  --tw-ring-inset: ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur: ;\n  --tw-brightness: ;\n  --tw-contrast: ;\n  --tw-grayscale: ;\n  --tw-hue-rotate: ;\n  --tw-invert: ;\n  --tw-saturate: ;\n  --tw-sepia: ;\n  --tw-drop-shadow: ;\n  --tw-backdrop-blur: ;\n  --tw-backdrop-brightness: ;\n  --tw-backdrop-contrast: ;\n  --tw-backdrop-grayscale: ;\n  --tw-backdrop-hue-rotate: ;\n  --tw-backdrop-invert: ;\n  --tw-backdrop-opacity: ;\n  --tw-backdrop-saturate: ;\n  --tw-backdrop-sepia: ;\n  --tw-contain-size: ;\n  --tw-contain-layout: ;\n  --tw-contain-paint: ;\n  --tw-contain-style: ;\n}\n::backdrop {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x: ;\n  --tw-pan-y: ;\n  --tw-pinch-zoom: ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position: ;\n  --tw-gradient-via-position: ;\n  --tw-gradient-to-position: ;\n  --tw-ordinal: ;\n  --tw-slashed-zero: ;\n  --tw-numeric-figure: ;\n  --tw-numeric-spacing: ;\n  --tw-numeric-fraction: ;\n  --tw-ring-inset: ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur: ;\n  --tw-brightness: ;\n  --tw-contrast: ;\n  --tw-grayscale: ;\n  --tw-hue-rotate: ;\n  --tw-invert: ;\n  --tw-saturate: ;\n  --tw-sepia: ;\n  --tw-drop-shadow: ;\n  --tw-backdrop-blur: ;\n  --tw-backdrop-brightness: ;\n  --tw-backdrop-contrast: ;\n  --tw-backdrop-grayscale: ;\n  --tw-backdrop-hue-rotate: ;\n  --tw-backdrop-invert: ;\n  --tw-backdrop-opacity: ;\n  --tw-backdrop-saturate: ;\n  --tw-backdrop-sepia: ;\n  --tw-contain-size: ;\n  --tw-contain-layout: ;\n  --tw-contain-paint: ;\n  --tw-contain-style: ;\n}\n*,\n::before,\n::after {\n  box-sizing: border-box;\n  border-width: 0;\n  border-style: solid;\n  border-color: #e5e7eb;\n}\n::before,\n::after {\n  --tw-content: "";\n}\nhtml,\n:host {\n  line-height: 1.5;\n  -webkit-text-size-adjust: 100%;\n  -moz-tab-size: 4;\n  -o-tab-size: 4;\n  tab-size: 4;\n  font-family:\n    ui-sans-serif,\n    system-ui,\n    sans-serif,\n    "Apple Color Emoji",\n    "Segoe UI Emoji",\n    "Segoe UI Symbol",\n    "Noto Color Emoji";\n  font-feature-settings: normal;\n  font-variation-settings: normal;\n  -webkit-tap-highlight-color: transparent;\n}\nbody {\n  margin: 0;\n  line-height: inherit;\n}\nhr {\n  height: 0;\n  color: inherit;\n  border-top-width: 1px;\n}\nabbr:where([title]) {\n  -webkit-text-decoration: underline dotted;\n  text-decoration: underline dotted;\n}\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\na {\n  color: inherit;\n  text-decoration: inherit;\n}\nb,\nstrong {\n  font-weight: bolder;\n}\ncode,\nkbd,\nsamp,\npre {\n  font-family:\n    ui-monospace,\n    SFMono-Regular,\n    Menlo,\n    Monaco,\n    Consolas,\n    "Liberation Mono",\n    "Courier New",\n    monospace;\n  font-feature-settings: normal;\n  font-variation-settings: normal;\n  font-size: 1em;\n}\nsmall {\n  font-size: 80%;\n}\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\nsub {\n  bottom: -0.25em;\n}\nsup {\n  top: -0.5em;\n}\ntable {\n  text-indent: 0;\n  border-color: inherit;\n  border-collapse: collapse;\n}\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit;\n  font-feature-settings: inherit;\n  font-variation-settings: inherit;\n  font-size: 100%;\n  font-weight: inherit;\n  line-height: inherit;\n  letter-spacing: inherit;\n  color: inherit;\n  margin: 0;\n  padding: 0;\n}\nbutton,\nselect {\n  text-transform: none;\n}\nbutton,\ninput:where([type=button]),\ninput:where([type=reset]),\ninput:where([type=submit]) {\n  -webkit-appearance: button;\n  background-color: transparent;\n  background-image: none;\n}\n:-moz-focusring {\n  outline: auto;\n}\n:-moz-ui-invalid {\n  box-shadow: none;\n}\nprogress {\n  vertical-align: baseline;\n}\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n  height: auto;\n}\n[type=search] {\n  -webkit-appearance: textfield;\n  outline-offset: -2px;\n}\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n::-webkit-file-upload-button {\n  -webkit-appearance: button;\n  font: inherit;\n}\nsummary {\n  display: list-item;\n}\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n  margin: 0;\n}\nfieldset {\n  margin: 0;\n  padding: 0;\n}\nlegend {\n  padding: 0;\n}\nol,\nul,\nmenu {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\ndialog {\n  padding: 0;\n}\ntextarea {\n  resize: vertical;\n}\ninput::-moz-placeholder,\ntextarea::-moz-placeholder {\n  opacity: 1;\n  color: #9ca3af;\n}\ninput::placeholder,\ntextarea::placeholder {\n  opacity: 1;\n  color: #9ca3af;\n}\nbutton,\n[role=button] {\n  cursor: pointer;\n}\n:disabled {\n  cursor: default;\n}\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n  display: block;\n  vertical-align: middle;\n}\nimg,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n[hidden]:where(:not([hidden=until-found])) {\n  display: none;\n}\n.\\!container {\n  width: 100% !important;\n}\n.container {\n  width: 100%;\n}\n@media (min-width: 640px) {\n  .\\!container {\n    max-width: 640px !important;\n  }\n  .container {\n    max-width: 640px;\n  }\n}\n@media (min-width: 768px) {\n  .\\!container {\n    max-width: 768px !important;\n  }\n  .container {\n    max-width: 768px;\n  }\n}\n@media (min-width: 1024px) {\n  .\\!container {\n    max-width: 1024px !important;\n  }\n  .container {\n    max-width: 1024px;\n  }\n}\n@media (min-width: 1280px) {\n  .\\!container {\n    max-width: 1280px !important;\n  }\n  .container {\n    max-width: 1280px;\n  }\n}\n@media (min-width: 1536px) {\n  .\\!container {\n    max-width: 1536px !important;\n  }\n  .container {\n    max-width: 1536px;\n  }\n}\n.pointer-events-none {\n  pointer-events: none;\n}\n.visible {\n  visibility: visible;\n}\n.fixed {\n  position: fixed;\n}\n.absolute {\n  position: absolute;\n}\n.relative {\n  position: relative;\n}\n.inset-0 {\n  inset: 0px;\n}\n.inset-y-0 {\n  top: 0px;\n  bottom: 0px;\n}\n.right-0 {\n  right: 0px;\n}\n.right-2 {\n  right: 0.5rem;\n}\n.top-2 {\n  top: 0.5rem;\n}\n.z-10 {\n  z-index: 10;\n}\n.z-20 {\n  z-index: 20;\n}\n.z-50 {\n  z-index: 50;\n}\n.mx-auto {\n  margin-left: auto;\n  margin-right: auto;\n}\n.-ml-1 {\n  margin-left: -0.25rem;\n}\n.mb-1 {\n  margin-bottom: 0.25rem;\n}\n.mb-2 {\n  margin-bottom: 0.5rem;\n}\n.mb-4 {\n  margin-bottom: 1rem;\n}\n.mb-5 {\n  margin-bottom: 1.25rem;\n}\n.mb-6 {\n  margin-bottom: 1.5rem;\n}\n.mr-2 {\n  margin-right: 0.5rem;\n}\n.mt-2 {\n  margin-top: 0.5rem;\n}\n.mt-6 {\n  margin-top: 1.5rem;\n}\n.block {\n  display: block;\n}\n.flex {\n  display: flex;\n}\n.inline-flex {\n  display: inline-flex;\n}\n.grid {\n  display: grid;\n}\n.\\!hidden {\n  display: none !important;\n}\n.hidden {\n  display: none;\n}\n.h-1\\.5 {\n  height: 0.375rem;\n}\n.h-11 {\n  height: 2.75rem;\n}\n.h-20 {\n  height: 5rem;\n}\n.h-4 {\n  height: 1rem;\n}\n.h-5 {\n  height: 1.25rem;\n}\n.h-6 {\n  height: 1.5rem;\n}\n.h-8 {\n  height: 2rem;\n}\n.h-full {\n  height: 100%;\n}\n.max-h-\\[90vh\\] {\n  max-height: 90vh;\n}\n.w-1\\/3 {\n  width: 33.333333%;\n}\n.w-11 {\n  width: 2.75rem;\n}\n.w-2\\/3 {\n  width: 66.666667%;\n}\n.w-20 {\n  width: 5rem;\n}\n.w-4 {\n  width: 1rem;\n}\n.w-5 {\n  width: 1.25rem;\n}\n.w-6 {\n  width: 1.5rem;\n}\n.w-8 {\n  width: 2rem;\n}\n.w-full {\n  width: 100%;\n}\n.max-w-\\[120px\\] {\n  max-width: 120px;\n}\n.max-w-md {\n  max-width: 28rem;\n}\n.max-w-sm {\n  max-width: 24rem;\n}\n.flex-1 {\n  flex: 1 1 0%;\n}\n.flex-shrink-0 {\n  flex-shrink: 0;\n}\n.flex-grow {\n  flex-grow: 1;\n}\n.transform {\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n.animate-spin {\n  animation: spin 1s linear infinite;\n}\n.cursor-not-allowed {\n  cursor: not-allowed;\n}\n.cursor-pointer {\n  cursor: pointer;\n}\n.appearance-none {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n}\n.grid-cols-2 {\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.flex-col {\n  flex-direction: column;\n}\n.items-center {\n  align-items: center;\n}\n.justify-center {\n  justify-content: center;\n}\n.justify-between {\n  justify-content: space-between;\n}\n.gap-2 {\n  gap: 0.5rem;\n}\n.gap-4 {\n  gap: 1rem;\n}\n.space-x-2 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-x-reverse: 0;\n  margin-right: calc(0.5rem * var(--tw-space-x-reverse));\n  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));\n}\n.space-y-4 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-y-reverse: 0;\n  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n}\n.space-y-6 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-y-reverse: 0;\n  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));\n}\n.overflow-hidden {\n  overflow: hidden;\n}\n.overflow-y-auto {\n  overflow-y: auto;\n}\n.rounded {\n  border-radius: 0.25rem;\n}\n.rounded-2xl {\n  border-radius: 1rem;\n}\n.rounded-full {\n  border-radius: 9999px;\n}\n.rounded-lg {\n  border-radius: 0.5rem;\n}\n.rounded-md {\n  border-radius: 0.375rem;\n}\n.rounded-xl {\n  border-radius: 0.75rem;\n}\n.rounded-l-md {\n  border-top-left-radius: 0.375rem;\n  border-bottom-left-radius: 0.375rem;\n}\n.rounded-r-md {\n  border-top-right-radius: 0.375rem;\n  border-bottom-right-radius: 0.375rem;\n}\n.border {\n  border-width: 1px;\n}\n.border-0 {\n  border-width: 0px;\n}\n.border-b {\n  border-bottom-width: 1px;\n}\n.border-r-0 {\n  border-right-width: 0px;\n}\n.border-\\[\\#D45D00\\] {\n  --tw-border-opacity: 1;\n  border-color: rgb(212 93 0 / var(--tw-border-opacity, 1));\n}\n.border-gray-200 {\n  --tw-border-opacity: 1;\n  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));\n}\n.border-gray-300 {\n  --tw-border-opacity: 1;\n  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));\n}\n.bg-\\[\\#fff7ed\\] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 247 237 / var(--tw-bg-opacity, 1));\n}\n.bg-black {\n  --tw-bg-opacity: 1;\n  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));\n}\n.bg-blue-50 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));\n}\n.bg-gray-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));\n}\n.bg-gray-200 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));\n}\n.bg-gray-400 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));\n}\n.bg-gray-50 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));\n}\n.bg-gray-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));\n}\n.bg-gray-800 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));\n}\n.bg-green-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));\n}\n.bg-green-400 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(74 222 128 / var(--tw-bg-opacity, 1));\n}\n.bg-green-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));\n}\n.bg-orange-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1));\n}\n.bg-orange-400 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(251 146 60 / var(--tw-bg-opacity, 1));\n}\n.bg-primary-orange {\n  --tw-bg-opacity: 1;\n  background-color: rgb(212 93 0 / var(--tw-bg-opacity, 1));\n}\n.bg-red-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));\n}\n.bg-red-400 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1));\n}\n.bg-white {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.bg-opacity-50 {\n  --tw-bg-opacity: 0.5;\n}\n.p-1 {\n  padding: 0.25rem;\n}\n.p-2 {\n  padding: 0.5rem;\n}\n.p-4 {\n  padding: 1rem;\n}\n.p-6 {\n  padding: 1.5rem;\n}\n.px-2 {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n.px-3 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n.px-4 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n.py-2 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n.py-3 {\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n}\n.pb-4 {\n  padding-bottom: 1rem;\n}\n.pr-8 {\n  padding-right: 2rem;\n}\n.pt-2 {\n  padding-top: 0.5rem;\n}\n.text-center {\n  text-align: center;\n}\n.text-right {\n  text-align: right;\n}\n.text-lg {\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n}\n.text-sm {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.text-xl {\n  font-size: 1.25rem;\n  line-height: 1.75rem;\n}\n.text-xs {\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n.font-bold {\n  font-weight: 700;\n}\n.font-medium {\n  font-weight: 500;\n}\n.font-semibold {\n  font-weight: 600;\n}\n.text-blue-900 {\n  --tw-text-opacity: 1;\n  color: rgb(30 58 138 / var(--tw-text-opacity, 1));\n}\n.text-gray-400 {\n  --tw-text-opacity: 1;\n  color: rgb(156 163 175 / var(--tw-text-opacity, 1));\n}\n.text-gray-500 {\n  --tw-text-opacity: 1;\n  color: rgb(107 114 128 / var(--tw-text-opacity, 1));\n}\n.text-gray-600 {\n  --tw-text-opacity: 1;\n  color: rgb(75 85 99 / var(--tw-text-opacity, 1));\n}\n.text-gray-700 {\n  --tw-text-opacity: 1;\n  color: rgb(55 65 81 / var(--tw-text-opacity, 1));\n}\n.text-gray-800 {\n  --tw-text-opacity: 1;\n  color: rgb(31 41 55 / var(--tw-text-opacity, 1));\n}\n.text-gray-900 {\n  --tw-text-opacity: 1;\n  color: rgb(17 24 39 / var(--tw-text-opacity, 1));\n}\n.text-green-500 {\n  --tw-text-opacity: 1;\n  color: rgb(34 197 94 / var(--tw-text-opacity, 1));\n}\n.text-orange-500 {\n  --tw-text-opacity: 1;\n  color: rgb(249 115 22 / var(--tw-text-opacity, 1));\n}\n.text-primary-blue {\n  --tw-text-opacity: 1;\n  color: rgb(17 44 86 / var(--tw-text-opacity, 1));\n}\n.text-primary-orange {\n  --tw-text-opacity: 1;\n  color: rgb(212 93 0 / var(--tw-text-opacity, 1));\n}\n.text-red-500 {\n  --tw-text-opacity: 1;\n  color: rgb(239 68 68 / var(--tw-text-opacity, 1));\n}\n.text-red-600 {\n  --tw-text-opacity: 1;\n  color: rgb(220 38 38 / var(--tw-text-opacity, 1));\n}\n.text-white {\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.underline {\n  text-decoration-line: underline;\n}\n.opacity-25 {\n  opacity: 0.25;\n}\n.opacity-70 {\n  opacity: 0.7;\n}\n.opacity-75 {\n  opacity: 0.75;\n}\n.shadow-2xl {\n  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);\n  box-shadow:\n    var(--tw-ring-offset-shadow, 0 0 #0000),\n    var(--tw-ring-shadow, 0 0 #0000),\n    var(--tw-shadow);\n}\n.shadow-xl {\n  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);\n  box-shadow:\n    var(--tw-ring-offset-shadow, 0 0 #0000),\n    var(--tw-ring-shadow, 0 0 #0000),\n    var(--tw-shadow);\n}\n.outline {\n  outline-style: solid;\n}\n.transition {\n  transition-property:\n    color,\n    background-color,\n    border-color,\n    text-decoration-color,\n    fill,\n    stroke,\n    opacity,\n    box-shadow,\n    transform,\n    filter,\n    backdrop-filter;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.transition-colors {\n  transition-property:\n    color,\n    background-color,\n    border-color,\n    text-decoration-color,\n    fill,\n    stroke;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.duration-200 {\n  transition-duration: 200ms;\n}\n.duration-300 {\n  transition-duration: 300ms;\n}\n.hover\\:border-\\[\\#D45D00\\]:hover {\n  --tw-border-opacity: 1;\n  border-color: rgb(212 93 0 / var(--tw-border-opacity, 1));\n}\n.hover\\:bg-gray-300:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-gray-600:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-green-600:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-orange-700:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(194 65 12 / var(--tw-bg-opacity, 1));\n}\n.hover\\:text-gray-700:hover {\n  --tw-text-opacity: 1;\n  color: rgb(55 65 81 / var(--tw-text-opacity, 1));\n}\n.focus\\:outline-none:focus {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n}\n.focus\\:ring-2:focus {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow:\n    var(--tw-ring-offset-shadow),\n    var(--tw-ring-shadow),\n    var(--tw-shadow, 0 0 #0000);\n}\n.focus\\:ring-primary-orange:focus {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(212 93 0 / var(--tw-ring-opacity, 1));\n}\n.focus\\:ring-offset-2:focus {\n  --tw-ring-offset-width: 2px;\n}\n.disabled\\:opacity-50:disabled {\n  opacity: 0.5;\n}\n');
+styleInject('*,\n::before,\n::after {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x: ;\n  --tw-pan-y: ;\n  --tw-pinch-zoom: ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position: ;\n  --tw-gradient-via-position: ;\n  --tw-gradient-to-position: ;\n  --tw-ordinal: ;\n  --tw-slashed-zero: ;\n  --tw-numeric-figure: ;\n  --tw-numeric-spacing: ;\n  --tw-numeric-fraction: ;\n  --tw-ring-inset: ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur: ;\n  --tw-brightness: ;\n  --tw-contrast: ;\n  --tw-grayscale: ;\n  --tw-hue-rotate: ;\n  --tw-invert: ;\n  --tw-saturate: ;\n  --tw-sepia: ;\n  --tw-drop-shadow: ;\n  --tw-backdrop-blur: ;\n  --tw-backdrop-brightness: ;\n  --tw-backdrop-contrast: ;\n  --tw-backdrop-grayscale: ;\n  --tw-backdrop-hue-rotate: ;\n  --tw-backdrop-invert: ;\n  --tw-backdrop-opacity: ;\n  --tw-backdrop-saturate: ;\n  --tw-backdrop-sepia: ;\n  --tw-contain-size: ;\n  --tw-contain-layout: ;\n  --tw-contain-paint: ;\n  --tw-contain-style: ;\n}\n::backdrop {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x: ;\n  --tw-pan-y: ;\n  --tw-pinch-zoom: ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position: ;\n  --tw-gradient-via-position: ;\n  --tw-gradient-to-position: ;\n  --tw-ordinal: ;\n  --tw-slashed-zero: ;\n  --tw-numeric-figure: ;\n  --tw-numeric-spacing: ;\n  --tw-numeric-fraction: ;\n  --tw-ring-inset: ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur: ;\n  --tw-brightness: ;\n  --tw-contrast: ;\n  --tw-grayscale: ;\n  --tw-hue-rotate: ;\n  --tw-invert: ;\n  --tw-saturate: ;\n  --tw-sepia: ;\n  --tw-drop-shadow: ;\n  --tw-backdrop-blur: ;\n  --tw-backdrop-brightness: ;\n  --tw-backdrop-contrast: ;\n  --tw-backdrop-grayscale: ;\n  --tw-backdrop-hue-rotate: ;\n  --tw-backdrop-invert: ;\n  --tw-backdrop-opacity: ;\n  --tw-backdrop-saturate: ;\n  --tw-backdrop-sepia: ;\n  --tw-contain-size: ;\n  --tw-contain-layout: ;\n  --tw-contain-paint: ;\n  --tw-contain-style: ;\n}\n*,\n::before,\n::after {\n  box-sizing: border-box;\n  border-width: 0;\n  border-style: solid;\n  border-color: #e5e7eb;\n}\n::before,\n::after {\n  --tw-content: "";\n}\nhtml,\n:host {\n  line-height: 1.5;\n  -webkit-text-size-adjust: 100%;\n  -moz-tab-size: 4;\n  -o-tab-size: 4;\n  tab-size: 4;\n  font-family:\n    ui-sans-serif,\n    system-ui,\n    sans-serif,\n    "Apple Color Emoji",\n    "Segoe UI Emoji",\n    "Segoe UI Symbol",\n    "Noto Color Emoji";\n  font-feature-settings: normal;\n  font-variation-settings: normal;\n  -webkit-tap-highlight-color: transparent;\n}\nbody {\n  margin: 0;\n  line-height: inherit;\n}\nhr {\n  height: 0;\n  color: inherit;\n  border-top-width: 1px;\n}\nabbr:where([title]) {\n  -webkit-text-decoration: underline dotted;\n  text-decoration: underline dotted;\n}\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\na {\n  color: inherit;\n  text-decoration: inherit;\n}\nb,\nstrong {\n  font-weight: bolder;\n}\ncode,\nkbd,\nsamp,\npre {\n  font-family:\n    ui-monospace,\n    SFMono-Regular,\n    Menlo,\n    Monaco,\n    Consolas,\n    "Liberation Mono",\n    "Courier New",\n    monospace;\n  font-feature-settings: normal;\n  font-variation-settings: normal;\n  font-size: 1em;\n}\nsmall {\n  font-size: 80%;\n}\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\nsub {\n  bottom: -0.25em;\n}\nsup {\n  top: -0.5em;\n}\ntable {\n  text-indent: 0;\n  border-color: inherit;\n  border-collapse: collapse;\n}\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit;\n  font-feature-settings: inherit;\n  font-variation-settings: inherit;\n  font-size: 100%;\n  font-weight: inherit;\n  line-height: inherit;\n  letter-spacing: inherit;\n  color: inherit;\n  margin: 0;\n  padding: 0;\n}\nbutton,\nselect {\n  text-transform: none;\n}\nbutton,\ninput:where([type=button]),\ninput:where([type=reset]),\ninput:where([type=submit]) {\n  -webkit-appearance: button;\n  background-color: transparent;\n  background-image: none;\n}\n:-moz-focusring {\n  outline: auto;\n}\n:-moz-ui-invalid {\n  box-shadow: none;\n}\nprogress {\n  vertical-align: baseline;\n}\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n  height: auto;\n}\n[type=search] {\n  -webkit-appearance: textfield;\n  outline-offset: -2px;\n}\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n::-webkit-file-upload-button {\n  -webkit-appearance: button;\n  font: inherit;\n}\nsummary {\n  display: list-item;\n}\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n  margin: 0;\n}\nfieldset {\n  margin: 0;\n  padding: 0;\n}\nlegend {\n  padding: 0;\n}\nol,\nul,\nmenu {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\ndialog {\n  padding: 0;\n}\ntextarea {\n  resize: vertical;\n}\ninput::-moz-placeholder,\ntextarea::-moz-placeholder {\n  opacity: 1;\n  color: #9ca3af;\n}\ninput::placeholder,\ntextarea::placeholder {\n  opacity: 1;\n  color: #9ca3af;\n}\nbutton,\n[role=button] {\n  cursor: pointer;\n}\n:disabled {\n  cursor: default;\n}\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n  display: block;\n  vertical-align: middle;\n}\nimg,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n[hidden]:where(:not([hidden=until-found])) {\n  display: none;\n}\n.\\!container {\n  width: 100% !important;\n}\n.container {\n  width: 100%;\n}\n@media (min-width: 640px) {\n  .\\!container {\n    max-width: 640px !important;\n  }\n  .container {\n    max-width: 640px;\n  }\n}\n@media (min-width: 768px) {\n  .\\!container {\n    max-width: 768px !important;\n  }\n  .container {\n    max-width: 768px;\n  }\n}\n@media (min-width: 1024px) {\n  .\\!container {\n    max-width: 1024px !important;\n  }\n  .container {\n    max-width: 1024px;\n  }\n}\n@media (min-width: 1280px) {\n  .\\!container {\n    max-width: 1280px !important;\n  }\n  .container {\n    max-width: 1280px;\n  }\n}\n@media (min-width: 1536px) {\n  .\\!container {\n    max-width: 1536px !important;\n  }\n  .container {\n    max-width: 1536px;\n  }\n}\n.pointer-events-none {\n  pointer-events: none;\n}\n.visible {\n  visibility: visible;\n}\n.fixed {\n  position: fixed;\n}\n.absolute {\n  position: absolute;\n}\n.relative {\n  position: relative;\n}\n.inset-0 {\n  inset: 0px;\n}\n.inset-y-0 {\n  top: 0px;\n  bottom: 0px;\n}\n.right-0 {\n  right: 0px;\n}\n.right-2 {\n  right: 0.5rem;\n}\n.top-2 {\n  top: 0.5rem;\n}\n.z-10 {\n  z-index: 10;\n}\n.z-20 {\n  z-index: 20;\n}\n.z-50 {\n  z-index: 50;\n}\n.mx-auto {\n  margin-left: auto;\n  margin-right: auto;\n}\n.-ml-1 {\n  margin-left: -0.25rem;\n}\n.mb-1 {\n  margin-bottom: 0.25rem;\n}\n.mb-2 {\n  margin-bottom: 0.5rem;\n}\n.mb-4 {\n  margin-bottom: 1rem;\n}\n.mb-5 {\n  margin-bottom: 1.25rem;\n}\n.mb-6 {\n  margin-bottom: 1.5rem;\n}\n.mr-2 {\n  margin-right: 0.5rem;\n}\n.mt-2 {\n  margin-top: 0.5rem;\n}\n.mt-6 {\n  margin-top: 1.5rem;\n}\n.block {\n  display: block;\n}\n.flex {\n  display: flex;\n}\n.inline-flex {\n  display: inline-flex;\n}\n.grid {\n  display: grid;\n}\n.\\!hidden {\n  display: none !important;\n}\n.hidden {\n  display: none;\n}\n.h-1\\.5 {\n  height: 0.375rem;\n}\n.h-11 {\n  height: 2.75rem;\n}\n.h-20 {\n  height: 5rem;\n}\n.h-4 {\n  height: 1rem;\n}\n.h-5 {\n  height: 1.25rem;\n}\n.h-6 {\n  height: 1.5rem;\n}\n.h-8 {\n  height: 2rem;\n}\n.h-full {\n  height: 100%;\n}\n.max-h-\\[90vh\\] {\n  max-height: 90vh;\n}\n.w-1\\/3 {\n  width: 33.333333%;\n}\n.w-11 {\n  width: 2.75rem;\n}\n.w-2\\/3 {\n  width: 66.666667%;\n}\n.w-20 {\n  width: 5rem;\n}\n.w-4 {\n  width: 1rem;\n}\n.w-5 {\n  width: 1.25rem;\n}\n.w-6 {\n  width: 1.5rem;\n}\n.w-8 {\n  width: 2rem;\n}\n.w-full {\n  width: 100%;\n}\n.max-w-\\[120px\\] {\n  max-width: 120px;\n}\n.max-w-md {\n  max-width: 28rem;\n}\n.max-w-sm {\n  max-width: 24rem;\n}\n.flex-1 {\n  flex: 1 1 0%;\n}\n.flex-shrink-0 {\n  flex-shrink: 0;\n}\n.flex-grow {\n  flex-grow: 1;\n}\n.transform {\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n.animate-spin {\n  animation: spin 1s linear infinite;\n}\n.cursor-not-allowed {\n  cursor: not-allowed;\n}\n.cursor-pointer {\n  cursor: pointer;\n}\n.appearance-none {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n}\n.grid-cols-2 {\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.flex-col {\n  flex-direction: column;\n}\n.items-center {\n  align-items: center;\n}\n.justify-center {\n  justify-content: center;\n}\n.justify-between {\n  justify-content: space-between;\n}\n.gap-2 {\n  gap: 0.5rem;\n}\n.gap-4 {\n  gap: 1rem;\n}\n.space-x-2 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-x-reverse: 0;\n  margin-right: calc(0.5rem * var(--tw-space-x-reverse));\n  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));\n}\n.space-y-4 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-y-reverse: 0;\n  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n}\n.space-y-6 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-y-reverse: 0;\n  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));\n}\n.overflow-hidden {\n  overflow: hidden;\n}\n.overflow-y-auto {\n  overflow-y: auto;\n}\n.rounded {\n  border-radius: 0.25rem;\n}\n.rounded-2xl {\n  border-radius: 1rem;\n}\n.rounded-full {\n  border-radius: 9999px;\n}\n.rounded-lg {\n  border-radius: 0.5rem;\n}\n.rounded-md {\n  border-radius: 0.375rem;\n}\n.rounded-xl {\n  border-radius: 0.75rem;\n}\n.rounded-l-md {\n  border-top-left-radius: 0.375rem;\n  border-bottom-left-radius: 0.375rem;\n}\n.rounded-r-md {\n  border-top-right-radius: 0.375rem;\n  border-bottom-right-radius: 0.375rem;\n}\n.border {\n  border-width: 1px;\n}\n.border-0 {\n  border-width: 0px;\n}\n.border-b {\n  border-bottom-width: 1px;\n}\n.border-r-0 {\n  border-right-width: 0px;\n}\n.border-\\[\\#D45D00\\] {\n  --tw-border-opacity: 1;\n  border-color: rgb(212 93 0 / var(--tw-border-opacity, 1));\n}\n.border-gray-200 {\n  --tw-border-opacity: 1;\n  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));\n}\n.border-gray-300 {\n  --tw-border-opacity: 1;\n  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));\n}\n.bg-\\[\\#fff7ed\\] {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 247 237 / var(--tw-bg-opacity, 1));\n}\n.bg-black {\n  --tw-bg-opacity: 1;\n  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));\n}\n.bg-blue-50 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));\n}\n.bg-gray-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));\n}\n.bg-gray-200 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));\n}\n.bg-gray-400 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));\n}\n.bg-gray-50 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));\n}\n.bg-gray-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));\n}\n.bg-gray-800 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));\n}\n.bg-green-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));\n}\n.bg-green-400 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(74 222 128 / var(--tw-bg-opacity, 1));\n}\n.bg-green-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));\n}\n.bg-orange-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1));\n}\n.bg-orange-400 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(251 146 60 / var(--tw-bg-opacity, 1));\n}\n.bg-primary-orange {\n  --tw-bg-opacity: 1;\n  background-color: rgb(212 93 0 / var(--tw-bg-opacity, 1));\n}\n.bg-red-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));\n}\n.bg-red-400 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1));\n}\n.bg-white {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.bg-opacity-50 {\n  --tw-bg-opacity: 0.5;\n}\n.p-1 {\n  padding: 0.25rem;\n}\n.p-2 {\n  padding: 0.5rem;\n}\n.p-4 {\n  padding: 1rem;\n}\n.p-6 {\n  padding: 1.5rem;\n}\n.px-2 {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n.px-3 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n.px-4 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n.py-2 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n.py-3 {\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n}\n.pb-4 {\n  padding-bottom: 1rem;\n}\n.pr-8 {\n  padding-right: 2rem;\n}\n.pt-2 {\n  padding-top: 0.5rem;\n}\n.text-center {\n  text-align: center;\n}\n.text-right {\n  text-align: right;\n}\n.text-lg {\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n}\n.text-sm {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.text-xl {\n  font-size: 1.25rem;\n  line-height: 1.75rem;\n}\n.text-xs {\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n.font-bold {\n  font-weight: 700;\n}\n.font-medium {\n  font-weight: 500;\n}\n.font-semibold {\n  font-weight: 600;\n}\n.text-blue-900 {\n  --tw-text-opacity: 1;\n  color: rgb(30 58 138 / var(--tw-text-opacity, 1));\n}\n.text-gray-400 {\n  --tw-text-opacity: 1;\n  color: rgb(156 163 175 / var(--tw-text-opacity, 1));\n}\n.text-gray-500 {\n  --tw-text-opacity: 1;\n  color: rgb(107 114 128 / var(--tw-text-opacity, 1));\n}\n.text-gray-600 {\n  --tw-text-opacity: 1;\n  color: rgb(75 85 99 / var(--tw-text-opacity, 1));\n}\n.text-gray-700 {\n  --tw-text-opacity: 1;\n  color: rgb(55 65 81 / var(--tw-text-opacity, 1));\n}\n.text-gray-800 {\n  --tw-text-opacity: 1;\n  color: rgb(31 41 55 / var(--tw-text-opacity, 1));\n}\n.text-gray-900 {\n  --tw-text-opacity: 1;\n  color: rgb(17 24 39 / var(--tw-text-opacity, 1));\n}\n.text-green-500 {\n  --tw-text-opacity: 1;\n  color: rgb(34 197 94 / var(--tw-text-opacity, 1));\n}\n.text-orange-500 {\n  --tw-text-opacity: 1;\n  color: rgb(249 115 22 / var(--tw-text-opacity, 1));\n}\n.text-primary-blue {\n  --tw-text-opacity: 1;\n  color: rgb(17 44 86 / var(--tw-text-opacity, 1));\n}\n.text-primary-orange {\n  --tw-text-opacity: 1;\n  color: rgb(212 93 0 / var(--tw-text-opacity, 1));\n}\n.text-red-500 {\n  --tw-text-opacity: 1;\n  color: rgb(239 68 68 / var(--tw-text-opacity, 1));\n}\n.text-red-600 {\n  --tw-text-opacity: 1;\n  color: rgb(220 38 38 / var(--tw-text-opacity, 1));\n}\n.text-white {\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.underline {\n  text-decoration-line: underline;\n}\n.opacity-25 {\n  opacity: 0.25;\n}\n.opacity-50 {\n  opacity: 0.5;\n}\n.opacity-70 {\n  opacity: 0.7;\n}\n.opacity-75 {\n  opacity: 0.75;\n}\n.shadow-2xl {\n  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);\n  box-shadow:\n    var(--tw-ring-offset-shadow, 0 0 #0000),\n    var(--tw-ring-shadow, 0 0 #0000),\n    var(--tw-shadow);\n}\n.shadow-xl {\n  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);\n  box-shadow:\n    var(--tw-ring-offset-shadow, 0 0 #0000),\n    var(--tw-ring-shadow, 0 0 #0000),\n    var(--tw-shadow);\n}\n.outline {\n  outline-style: solid;\n}\n.transition {\n  transition-property:\n    color,\n    background-color,\n    border-color,\n    text-decoration-color,\n    fill,\n    stroke,\n    opacity,\n    box-shadow,\n    transform,\n    filter,\n    backdrop-filter;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.transition-colors {\n  transition-property:\n    color,\n    background-color,\n    border-color,\n    text-decoration-color,\n    fill,\n    stroke;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.duration-200 {\n  transition-duration: 200ms;\n}\n.duration-300 {\n  transition-duration: 300ms;\n}\n.hover\\:border-\\[\\#D45D00\\]:hover {\n  --tw-border-opacity: 1;\n  border-color: rgb(212 93 0 / var(--tw-border-opacity, 1));\n}\n.hover\\:bg-gray-300:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-gray-600:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-green-600:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-orange-700:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(194 65 12 / var(--tw-bg-opacity, 1));\n}\n.hover\\:text-gray-700:hover {\n  --tw-text-opacity: 1;\n  color: rgb(55 65 81 / var(--tw-text-opacity, 1));\n}\n.focus\\:outline-none:focus {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n}\n.focus\\:ring-2:focus {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow:\n    var(--tw-ring-offset-shadow),\n    var(--tw-ring-shadow),\n    var(--tw-shadow, 0 0 #0000);\n}\n.focus\\:ring-primary-orange:focus {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(212 93 0 / var(--tw-ring-opacity, 1));\n}\n.focus\\:ring-offset-2:focus {\n  --tw-ring-offset-width: 2px;\n}\n.disabled\\:opacity-50:disabled {\n  opacity: 0.5;\n}\n');
 
 // src/index.tsx
 import React9 from "react";
@@ -417,7 +417,7 @@ var HeaderBar = ({ id, onClose }) => {
       width: "100",
       alt: "FeexPay"
     }
-  )), /* @__PURE__ */ React5.createElement("div", { className: "text-right text-xs text-gray-700" }, shopData && /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement("div", { className: "font-semibold" }, "MARCHAND: ", shopData.name), /* @__PURE__ */ React5.createElement("div", { className: "text-xs text-gray-500" }, "ID : ", shopData.reference))), /* @__PURE__ */ React5.createElement(
+  )), /* @__PURE__ */ React5.createElement("div", { className: "flex-1 text-right text-xs text-gray-700 px-3" }, shopData && /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement("div", { className: "font-semibold" }, "MARCHAND: ", shopData.name), /* @__PURE__ */ React5.createElement("div", { className: "text-xs text-gray-500" }, "ID : ", shopData.reference))), /* @__PURE__ */ React5.createElement(
     "button",
     {
       onClick: onClose,
@@ -606,6 +606,7 @@ var PaymentModal = ({ isOpen, onClose }) => {
   const [paymentStatus, setPaymentStatus] = useState4("PENDING");
   const [statusMessage, setStatusMessage] = useState4("");
   const [isLoading, setIsLoading] = useState4(false);
+  const [showCardUnavailableMsg, setShowCardUnavailableMsg] = useState4(false);
   const [otpModalOpen, setOtpModalOpen] = useState4(false);
   const [pendingReference, setPendingReference] = useState4("");
   const [iframeUrl, setIframeUrl] = useState4(null);
@@ -1047,16 +1048,29 @@ var PaymentModal = ({ isOpen, onClose }) => {
       "aria-label": "Fermer la passerelle de paiement"
     },
     /* @__PURE__ */ React7.createElement("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React7.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M6 18L18 6M6 6l12 12" }))
-  ), /* @__PURE__ */ React7.createElement("iframe", { src: iframeUrl, className: "w-full h-full border-0", title: "Payment Gateway", allow: "payment" })), /* @__PURE__ */ React7.createElement(HeaderBar_default, { id: paymentConfig.id, onClose }), /* @__PURE__ */ React7.createElement("div", { className: "p-6 overflow-y-auto flex-grow" }, /* @__PURE__ */ React7.createElement("p", { className: "text-sm text-gray-600 text-center mb-4" }, "Remplissez les champs suivants pour effectuer votre paiement"), !paymentConfig.case && /* @__PURE__ */ React7.createElement("div", { className: "flex justify-center mb-6 border-b pb-4 w-full gap-2" }, paymentTabs.map(({ label, value, icon }) => /* @__PURE__ */ React7.createElement(
-    "div",
-    {
-      key: value,
-      onClick: () => handlePaymentMethodChange(value),
-      className: `flex flex-col items-center flex-1 max-w-[120px] px-3 py-2 cursor-pointer rounded border ${paymentMethod === value ? "bg-[#fff7ed] border-[#D45D00]" : "bg-white border-gray-300 hover:border-[#D45D00]"}`
-    },
-    /* @__PURE__ */ React7.createElement("div", { className: "w-8 h-8 rounded-full flex items-center justify-center mb-1" }, icon),
-    /* @__PURE__ */ React7.createElement("span", { className: "text-xs font-medium text-center" }, label)
-  ))), /* @__PURE__ */ React7.createElement("div", { className: "space-y-6" }, showPersonalInfo && /* @__PURE__ */ React7.createElement("div", { className: "space-y-4" }, /* @__PURE__ */ React7.createElement("h2", { className: "font-bold text-gray-800 mb-2 flex items-center" }, /* @__PURE__ */ React7.createElement("span", { className: "bg-gray-800 text-white rounded-full w-5 h-5 inline-flex items-center justify-center text-xs mr-2" }, "1"), "Informations Personnelles"), !hidden.includes("name") && /* @__PURE__ */ React7.createElement(
+  ), /* @__PURE__ */ React7.createElement("iframe", { src: iframeUrl, className: "w-full h-full border-0", title: "Payment Gateway", allow: "payment" })), /* @__PURE__ */ React7.createElement(HeaderBar_default, { id: paymentConfig.id, onClose }), /* @__PURE__ */ React7.createElement("div", { className: "p-6 overflow-y-auto flex-grow" }, /* @__PURE__ */ React7.createElement("p", { className: "text-sm text-gray-600 text-center mb-4" }, "Remplissez les champs suivants pour effectuer votre paiement"), !paymentConfig.case && /* @__PURE__ */ React7.createElement("div", { className: "mb-6 border-b pb-4 w-full" }, /* @__PURE__ */ React7.createElement("div", { className: "flex justify-center gap-2" }, paymentTabs.map(({ label, value, icon }) => {
+    const isCardDisabled = value === "CARD";
+    return /* @__PURE__ */ React7.createElement(
+      "div",
+      {
+        key: value,
+        onClick: () => {
+          if (isCardDisabled) return;
+          setShowCardUnavailableMsg(false);
+          handlePaymentMethodChange(value);
+        },
+        onMouseEnter: () => {
+          if (isCardDisabled) setShowCardUnavailableMsg(true);
+        },
+        onMouseLeave: () => {
+          if (isCardDisabled) setShowCardUnavailableMsg(false);
+        },
+        className: `flex flex-col items-center flex-1 max-w-[120px] px-3 py-2 rounded border ${isCardDisabled ? "bg-gray-100 border-gray-200 opacity-50 cursor-not-allowed" : paymentMethod === value ? "bg-[#fff7ed] border-[#D45D00] cursor-pointer" : "bg-white border-gray-300 hover:border-[#D45D00] cursor-pointer"}`
+      },
+      /* @__PURE__ */ React7.createElement("div", { className: "w-8 h-8 rounded-full flex items-center justify-center mb-1" }, icon),
+      /* @__PURE__ */ React7.createElement("span", { className: "text-xs font-medium text-center" }, label)
+    );
+  })), showCardUnavailableMsg && /* @__PURE__ */ React7.createElement("p", { className: "mt-2 text-center text-xs font-medium text-red-600" }, "Les paiements par cartes sont momentan\xE9ment indisponibles.")), /* @__PURE__ */ React7.createElement("div", { className: "space-y-6" }, showPersonalInfo && /* @__PURE__ */ React7.createElement("div", { className: "space-y-4" }, /* @__PURE__ */ React7.createElement("h2", { className: "font-bold text-gray-800 mb-2 flex items-center" }, /* @__PURE__ */ React7.createElement("span", { className: "bg-gray-800 text-white rounded-full w-5 h-5 inline-flex items-center justify-center text-xs mr-2" }, "1"), "Informations Personnelles"), !hidden.includes("name") && /* @__PURE__ */ React7.createElement(
     "input",
     {
       type: "text",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-sdk-feexpay",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "",
   "source": "src/index.tsx",
   "main": "dist/index.js",