@getmicdrop/svelte-components 3.0.0 → 3.1.0

package/dist/components/OrderSummary/OrderSummary.svelte

@@ -1,50 +1,33 @@
 <script>
   import { fly, fade } from 'svelte/transition';
   import { cubicOut } from 'svelte/easing';
-  import ChevronDown from 'carbon-icons-svelte/lib/ChevronDown.svelte';
-  import Close from 'carbon-icons-svelte/lib/Close.svelte';
+  import { createEventDispatcher } from 'svelte';
+  import { ChevronDownOutline, CloseOutline } from '../Icons';
   import Spinner from '../Spinner/Spinner.svelte';
 
-  /**
-   * @type {{
-   *   loading?: boolean,
-   *   quantities?: Record<string, number>,
-   *   eventTickets?: Array<{ ID: string | number, name: string, price: number }>,
-   *   checkoutTicket?: (() => void) | null,
-   *   isAgreed?: boolean,
-   *   btnText?: string,
-   *   promoApplied?: boolean,
-   *   promoDiscount?: number,
-   *   currentPromoRule?: { provideDiscount?: boolean, discountTicketIds?: string[], amount?: string, discountType?: '%' | '$' } | null,
-   *   executePurchase?: ((elements: any) => void) | null,
-   *   elements?: any,
-   *   venueServiceCharge?: { serviceFeeCents?: number, serviceFeePercentage?: number, serviceFeeChargeType?: string, maxServiceFeeCents?: number, taxPercentage?: number },
-   *   onpriceupdate?: (detail: { subtotal: number, fees: number, taxes: number, total: number, promoSavings: number }) => void
-   * }}
-   */
-  let {
-    loading = false,
-    quantities = {},
-    eventTickets = [],
-    checkoutTicket = null,
-    isAgreed = true,
-    btnText = 'Checkout',
-    promoApplied = false,
-    promoDiscount = 0,
-    currentPromoRule = null,
-    executePurchase = null,
-    elements = null,
-    venueServiceCharge = {
-      serviceFeeCents: 0,
-      serviceFeePercentage: 0,
-      serviceFeeChargeType: 'both',
-      maxServiceFeeCents: 0,
-      taxPercentage: 0,
-    },
-    onpriceupdate
-  } = $props();
-
-  let feeFor = $derived((price) => {
+  export let loading = false;
+  export let quantities = {};
+  export let eventTickets = [];
+
+  export let checkoutTicket = null;
+  export let isAgreed = true;
+  export let btnText = 'Checkout';
+  export let promoApplied = false;
+  export let promoDiscount = 0;
+  export let currentPromoRule = null;
+
+  export let executePurchase = null;
+  export let elements = null;
+
+  export let venueServiceCharge = {
+    serviceFeeCents: 0,
+    serviceFeePercentage: 0,
+    serviceFeeChargeType: 'both', // 'both', 'percent', or 'flat'
+    maxServiceFeeCents: 0, // 0 means no cap
+    taxPercentage: 0, // Default 0% - only charge tax if venue has set it
+  };
+
+  $: feeFor = price => {
     const chargeType = venueServiceCharge.serviceFeeChargeType || 'both';
     let fee = 0;
 
@@ -63,22 +46,31 @@
     }
 
     return fee;
-  });
+  };
+
+  const dispatch = createEventDispatcher();
 
-  let showOrderSummaryOnMobile = $state(false);
+  let showFooter = false;
+  let subtotal = 0;
+  let fees = 0;
+  let taxes = 0;
+  let total = 0;
+  let showOrderSummaryOnMobile = false;
 
   function makeOrderSummaryVisible() {
     showOrderSummaryOnMobile = !showOrderSummaryOnMobile;
   }
 
   // Calculate discounted price for a ticket
-  let getDiscountedPrice = $derived((ticket) => {
+  $: getDiscountedPrice = (ticket) => {
     if (!currentPromoRule?.provideDiscount) return null;
 
     // Check if this discount applies to this specific ticket
+    // If discountTicketIds is empty or not provided, discount applies to all tickets
+    // If discountTicketIds has values, only apply to those specific ticket IDs
     const discountTicketIds = currentPromoRule.discountTicketIds || [];
     if (discountTicketIds.length > 0 && !discountTicketIds.includes(ticket.ID)) {
-      return null;
+      return null; // This ticket is not eligible for the discount
     }
 
     const basePrice = parseFloat(ticket.price) || 0;
@@ -89,54 +81,53 @@
       return Math.max(0, basePrice - discountAmount).toFixed(2);
     }
     return null;
-  });
+  };
 
-  let totalQuantity = $derived(Object.values(quantities).reduce((sum, q) => sum + q, 0));
-  let showFooter = $derived(totalQuantity > 0);
+  $: showFooter = totalQuantity > 0;
 
   // Calculate subtotal without any discounts (for calculating savings)
-  let subtotalWithoutDiscount = $derived(Object.keys(quantities).reduce((acc, key) => {
+  $: subtotalWithoutDiscount = Object.keys(quantities).reduce((acc, key) => {
     const ticket = eventTickets.find(t => t.ID == key);
     if (!ticket) return acc;
     return acc + quantities[key] * ticket.price;
-  }, 0));
+  }, 0);
 
   // Calculate subtotal with discounts applied
-  let subtotal = $derived(Object.keys(quantities).reduce((acc, key) => {
+  $: subtotal = Object.keys(quantities).reduce((acc, key) => {
     const ticket = eventTickets.find(t => t.ID == key);
     if (!ticket) return acc;
     const discountedPrice = getDiscountedPrice(ticket);
     const priceToUse = discountedPrice !== null ? parseFloat(discountedPrice) : ticket.price;
     return acc + quantities[key] * priceToUse;
-  }, 0));
+  }, 0);
 
   // Calculate actual savings from promo code
-  let promoSavings = $derived(currentPromoRule?.provideDiscount ? (subtotalWithoutDiscount - subtotal) : 0);
+  $: promoSavings = currentPromoRule?.provideDiscount ? (subtotalWithoutDiscount - subtotal) : 0;
 
-  let fees = $derived(Object.keys(quantities).reduce((acc, key) => {
+  $: fees = Object.keys(quantities).reduce((acc, key) => {
     const ticket = eventTickets.find(t => t.ID == key);
     if (!ticket || ticket.price == 0) return acc;
     const discountedPrice = getDiscountedPrice(ticket);
     const priceToUse = discountedPrice !== null ? parseFloat(discountedPrice) : ticket.price;
     return acc + quantities[key] * feeFor(priceToUse);
-  }, 0));
-
-  let taxRate = $derived((venueServiceCharge.taxPercentage || 0) / 100);
-  let taxes = $derived(subtotal > 0 ? subtotal * taxRate : 0);
-  let total = $derived(Math.max(0, subtotal + fees + taxes - (promoApplied && !currentPromoRule?.provideDiscount ? promoDiscount : 0)));
-
-  // Dispatch price update when values change
-  $effect(() => {
-    onpriceupdate?.({ subtotal, fees, taxes, total, promoSavings });
-  });
+  }, 0);
+  $: taxRate = (venueServiceCharge.taxPercentage || 0) / 100;
+  $: taxes = subtotal > 0 ? subtotal * taxRate : 0;
+  // When currentPromoRule is used, discounts are already applied per-ticket in subtotal calculation
+  // Only subtract promoDiscount separately when NOT using currentPromoRule (legacy behavior)
+  // Use Math.max(0, ...) to prevent negative totals in edge cases
+  $: total = Math.max(0, subtotal + fees + taxes - (promoApplied && !currentPromoRule?.provideDiscount ? promoDiscount : 0));
+  $: dispatch('priceUpdate', { subtotal, fees, taxes, total, promoSavings });
+  $: totalQuantity = Object.values(quantities).reduce((sum, q) => sum + q, 0);
 </script>
 
+<!-- Desktop Order Summary -->
 <div
   id="orderSummary"
-  class="order-summary desktop-only h-fit rounded-lg"
+  class="hidden min-[872px]:block h-fit rounded-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600"
 >
-  <div class="summary-header px-5 py-4">
-    <h2 class="text-lg font-semibold text-primary">
+  <div class="px-5 py-4 border-b border-gray-200 dark:border-gray-600">
+    <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
       Order summary
     </h2>
   </div>
@@ -145,7 +136,7 @@
     {#if totalQuantity === 0}
       <!-- Empty state -->
       <div class="py-8 text-center">
-        <p class="text-tertiary text-sm">Select tickets to continue</p>
+        <p class="text-gray-500 dark:text-gray-400 text-sm">Select tickets to continue</p>
       </div>
     {:else}
       <!-- Selected tickets - always show original prices -->
@@ -153,18 +144,18 @@
         {#if quantities[key] > 0}
           {#each eventTickets as ticket}
             {#if ticket.ID == key}
-              <div class="ticket-line flex justify-between py-3">
+              <div class="flex justify-between py-3 border-b border-gray-200/50 dark:border-gray-600/50">
                 <div>
-                  <p class="font-medium text-primary">{ticket.name}</p>
-                  <p class="text-sm text-tertiary">
+                  <p class="font-medium text-gray-900 dark:text-white">{ticket.name}</p>
+                  <p class="text-sm text-gray-500 dark:text-gray-400">
                     {#if ticket.price === 0}
-                      Free × {quantities[key]}
+                      Free x {quantities[key]}
                     {:else}
-                      ${ticket.price.toFixed(2)} × {quantities[key]}
+                      ${ticket.price.toFixed(2)} x {quantities[key]}
                     {/if}
                   </p>
                 </div>
-                <div class="font-medium text-primary">
+                <div class="font-medium text-gray-900 dark:text-white">
                   {ticket.price === 0
                     ? 'Free'
                     : `$${(ticket.price * quantities[key]).toFixed(2)}`}
@@ -178,48 +169,47 @@
       <!-- Price breakdown -->
       <div class="flex flex-col py-3 gap-2 text-sm">
         {#if promoSavings > 0 || (promoDiscount > 0 && !currentPromoRule?.provideDiscount)}
-          <div class="flex justify-between text-secondary">
+          <div class="flex justify-between text-gray-600 dark:text-gray-300">
             <span>Full Price</span><span>${subtotalWithoutDiscount.toFixed(2)}</span>
           </div>
         {/if}
         {#if promoSavings > 0}
-          <div class="flex justify-between promo-discount-line">
+          <div class="flex justify-between text-green-600 dark:text-green-500">
             <span>Discount</span><span>-${promoSavings.toFixed(2)}</span>
           </div>
         {:else if promoDiscount > 0 && !currentPromoRule?.provideDiscount}
-          <div class="flex justify-between promo-discount-line">
+          <div class="flex justify-between text-green-600 dark:text-green-500">
             <span>Discount</span><span>-${promoDiscount.toFixed(2)}</span>
           </div>
         {/if}
-        <div class="flex justify-between text-secondary">
+        <div class="flex justify-between text-gray-600 dark:text-gray-300">
           <span>Subtotal</span><span>${subtotal.toFixed(2)}</span>
         </div>
-        <div class="flex justify-between text-secondary">
+        <div class="flex justify-between text-gray-600 dark:text-gray-300">
           <span>Fees</span><span>${fees.toFixed(2)}</span>
         </div>
-        <div class="flex justify-between text-secondary">
+        <div class="flex justify-between text-gray-600 dark:text-gray-300">
           <span>Taxes</span><span>${taxes.toFixed(2)}</span>
         </div>
       </div>
 
       <!-- Total -->
-      <div class="total-line flex justify-between font-semibold text-primary py-4 text-lg">
+      <div class="flex justify-between font-semibold text-gray-900 dark:text-white py-4 text-lg border-t border-gray-200 dark:border-gray-600">
         <span>Total</span><span>${total.toFixed(2)}</span>
       </div>
     {/if}
 
     <!-- Terms of service -->
     {#if totalQuantity > 0 && btnText === 'Place order'}
-      <p class="terms-text">
-        By selecting Place order, I agree to the <a href="https://get-micdrop.com/tos" class="terms-link" target="_blank" rel="noopener noreferrer">terms of service</a>
+      <p class="text-xs text-gray-500 dark:text-gray-400 text-center mb-3">
+        By selecting Place order, I agree to the <a href="https://get-micdrop.com/tos" class="text-blue-700 dark:text-blue-500 underline hover:opacity-80" target="_blank" rel="noopener noreferrer">terms of service</a>
       </p>
     {/if}
 
     <!-- Checkout button -->
     <button
-      class="checkout-btn w-full h-12 font-semibold rounded-lg flex items-center justify-center transition-colors"
-      class:disabled={totalQuantity === 0}
-      onclick={() => {
+      class="w-full h-12 font-semibold rounded-lg flex items-center justify-center transition-colors select-none touch-manipulation {totalQuantity === 0 ? 'bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400 cursor-not-allowed' : 'bg-blue-700 dark:bg-blue-600 text-white hover:bg-blue-800 dark:hover:bg-blue-700'}"
+      on:click={() => {
         if (totalQuantity === 0) return;
         if (executePurchase) {
           executePurchase(elements);
@@ -241,8 +231,8 @@
 {#if showOrderSummaryOnMobile}
   <!-- Backdrop overlay - dims background -->
   <button
-    class="mobile-backdrop mobile-only"
-    onclick={() => (showOrderSummaryOnMobile = false)}
+    class="min-[872px]:hidden fixed inset-0 bg-black/50 z-40 border-none cursor-pointer"
+    on:click={() => (showOrderSummaryOnMobile = false)}
     aria-label="Close order summary"
     transition:fade={{ duration: 200 }}
   ></button>
@@ -250,18 +240,18 @@
   <div
     in:fly={{ y: 800, duration: 300, easing: cubicOut }}
     out:fly={{ y: 800, duration: 300, easing: cubicOut }}
-    class="mobile-summary mobile-only fixed bottom-0 left-0 w-full overflow-x-hidden overflow-y-auto z-[99]"
+    class="min-[872px]:hidden fixed bottom-0 left-0 w-full overflow-x-hidden overflow-y-auto z-50 max-h-[80vh] rounded-t-lg shadow-xl bg-white dark:bg-gray-800"
   >
-    <div class="mobile-summary-header flex flex-row justify-between items-center px-5 py-4">
-      <h2 class="text-xl font-semibold text-primary">
+    <div class="flex flex-row justify-between items-center px-5 py-4 border-b border-gray-200 dark:border-gray-600">
+      <h2 class="text-xl font-semibold text-gray-900 dark:text-white">
         Order summary
       </h2>
       <button
-        onclick={() => (showOrderSummaryOnMobile = false)}
-        class="close-btn transition-colors p-2 rounded-lg"
+        on:click={() => (showOrderSummaryOnMobile = false)}
+        class="transition-colors p-2 rounded-lg text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700"
         aria-label="Close order summary"
       >
-        <Close size={28} />
+        <CloseOutline class="w-7 h-7" />
       </button>
     </div>
 
@@ -271,18 +261,18 @@
         {#if quantities[key] > 0}
           {#each eventTickets as ticket}
             {#if ticket.ID == key}
-              <div class="mobile-ticket-line flex justify-between py-4">
+              <div class="flex justify-between py-4 border-b border-gray-200 dark:border-gray-600">
                 <div>
-                  <p class="font-semibold text-primary">{ticket.name}</p>
-                  <p class="text-sm text-tertiary">
+                  <p class="font-semibold text-gray-900 dark:text-white">{ticket.name}</p>
+                  <p class="text-sm text-gray-500 dark:text-gray-400">
                     {#if ticket.price === 0}
-                      Free × {quantities[key]}
+                      Free x {quantities[key]}
                     {:else}
-                      ${ticket.price.toFixed(2)} × {quantities[key]}
+                      ${ticket.price.toFixed(2)} x {quantities[key]}
                     {/if}
                   </p>
                 </div>
-                <div class="font-semibold text-primary">
+                <div class="font-semibold text-gray-900 dark:text-white">
                   {ticket.price === 0
                     ? 'Free'
                     : `$${(ticket.price * quantities[key]).toFixed(2)}`}
@@ -293,18 +283,18 @@
         {/if}
       {/each}
 
-      <div class="flex flex-col py-4 gap-3 text-secondary">
+      <div class="flex flex-col py-4 gap-3 text-gray-600 dark:text-gray-300">
         {#if promoSavings > 0 || (promoDiscount > 0 && !currentPromoRule?.provideDiscount)}
           <div class="flex justify-between">
             <span>Full Price</span><span>${subtotalWithoutDiscount.toFixed(2)}</span>
           </div>
         {/if}
         {#if promoSavings > 0}
-          <div class="flex justify-between promo-discount-line">
+          <div class="flex justify-between text-green-600 dark:text-green-500">
             <span>Discount</span><span>-${promoSavings.toFixed(2)}</span>
           </div>
         {:else if promoDiscount > 0 && !currentPromoRule?.provideDiscount}
-          <div class="flex justify-between promo-discount-line">
+          <div class="flex justify-between text-green-600 dark:text-green-500">
             <span>Discount</span><span>-${promoDiscount.toFixed(2)}</span>
           </div>
         {/if}
@@ -319,7 +309,7 @@
         </div>
       </div>
 
-      <div class="mobile-total flex justify-between font-bold text-primary py-5">
+      <div class="flex justify-between font-bold text-gray-900 dark:text-white py-5 border-t border-gray-200 dark:border-gray-600">
         <span>Total</span><span>${total.toFixed(2)}</span>
       </div>
     </div>
@@ -329,20 +319,20 @@
 {#if showFooter}
   <div
     transition:fly={{ y: 100, duration: 200 }}
-    class="mobile-footer mobile-only fixed bottom-0 left-0 right-0 z-[500]"
+    class="min-[872px]:hidden fixed bottom-0 left-0 right-0 z-40 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-600 shadow-xl p-4 pb-[max(16px,calc(env(safe-area-inset-bottom)+8px))] select-none touch-manipulation"
   >
-    <div class="mobile-footer-content">
-      <button class="mobile-footer-left" onclick={makeOrderSummaryVisible}>
-        <span class="mobile-footer-tickets">
+    <div class="flex items-stretch gap-3">
+      <button class="flex flex-col justify-between items-start shrink-0 whitespace-nowrap bg-transparent border-none p-0 cursor-pointer touch-manipulation" on:click={makeOrderSummaryVisible}>
+        <span class="flex items-center gap-1 text-sm font-normal text-gray-600 dark:text-gray-300">
           {totalQuantity} {totalQuantity > 1 ? 'tickets' : 'ticket'}
-          <ChevronDown size={16} class="chevron-icon transition-transform duration-200 {showOrderSummaryOnMobile ? 'rotate-180' : ''}" />
+          <ChevronDownOutline class="w-4 h-4 text-gray-500 dark:text-gray-400 transition-transform duration-200 {showOrderSummaryOnMobile ? 'rotate-180' : ''}" />
         </span>
-        <span class="mobile-footer-price">${total.toFixed(2)}</span>
+        <span class="text-xl font-bold text-gray-900 dark:text-white">${total.toFixed(2)}</span>
       </button>
 
       <button
-        class="checkout-btn mobile-footer-btn"
-        onclick={() => {
+        class="flex-1 min-w-36 h-12 rounded-lg text-sm font-semibold touch-manipulation flex items-center justify-center {totalQuantity === 0 || !isAgreed ? 'bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400 cursor-not-allowed' : 'bg-blue-700 dark:bg-blue-600 text-white hover:bg-blue-800 dark:hover:bg-blue-700'}"
+        on:click={() => {
           if (executePurchase) {
             executePurchase(elements);
           } else if (checkoutTicket) {
@@ -360,203 +350,3 @@
     </div>
   </div>
 {/if}
-
-<style>
-  /* Custom breakpoint at 872px for desktop/mobile switch */
-  .desktop-only {
-    display: none;
-  }
-
-  .mobile-only {
-    display: block;
-  }
-
-  @media (min-width: 872px) {
-    .desktop-only {
-      display: block;
-    }
-
-    .mobile-only {
-      display: none !important;
-    }
-  }
-
-  /* Theme-responsive colors using CSS variables */
-  .order-summary {
-    background-color: hsl(var(--BG-Primary));
-    border: 1px solid hsl(var(--Stroke-Secondary));
-  }
-
-  .summary-header {
-    border-bottom: 1px solid hsl(var(--Stroke-Secondary));
-  }
-
-  .text-primary {
-    color: hsl(var(--Text-Primary));
-  }
-
-  .text-secondary {
-    color: hsl(var(--Text-Secondary));
-  }
-
-  .text-tertiary {
-    color: hsl(var(--Text-Tartiary));
-  }
-
-  .ticket-line {
-    border-bottom: 1px solid hsl(var(--Stroke-Secondary) / 0.5);
-  }
-
-  .promo-discount-line {
-    color: hsl(var(--Accent-Success));
-  }
-
-  .total-line {
-    border-top: 1px solid hsl(var(--Stroke-Secondary));
-  }
-
-  .terms-text {
-    font-size: 12px;
-    color: hsl(var(--Text-Tartiary));
-    text-align: center;
-    margin: 0 0 12px 0;
-  }
-
-  .terms-link {
-    color: hsl(var(--Brand-Primary));
-    text-decoration: underline;
-  }
-
-  .terms-link:hover {
-    opacity: 0.8;
-  }
-
-  .checkout-btn {
-    background-color: hsl(var(--Brand-Primary));
-    color: white;
-    -moz-user-select: none;
-         user-select: none;
-    -webkit-user-select: none;
-    touch-action: manipulation;
-    -webkit-tap-highlight-color: transparent;
-  }
-
-  .checkout-btn:hover:not(:disabled) {
-    background-color: hsl(var(--Brand-Primary) / 0.9);
-  }
-
-  .checkout-btn.disabled,
-  .checkout-btn:disabled {
-    background-color: hsl(var(--BG-Quaternary));
-    color: hsl(var(--Text-Tartiary));
-    cursor: not-allowed;
-  }
-
-  /* Mobile backdrop - dims background behind drawer */
-  .mobile-backdrop {
-    position: fixed;
-    inset: 0;
-    background-color: rgba(0, 0, 0, 0.5);
-    z-index: 98;
-    border: none;
-    cursor: pointer;
-  }
-
-  /* Mobile summary drawer - stays bright above backdrop */
-  .mobile-summary {
-    background-color: hsl(var(--BG-Primary));
-    max-height: 80vh;
-    border-radius: 16px 16px 0 0;
-    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
-    z-index: 99;
-  }
-
-  .mobile-summary-header {
-    border-bottom: 1px solid hsl(var(--Stroke-Secondary));
-  }
-
-  .close-btn {
-    color: hsl(var(--Text-Tartiary));
-  }
-
-  .close-btn:hover {
-    color: hsl(var(--Text-Primary));
-    background-color: hsl(var(--BG-Secondary));
-  }
-
-  .mobile-ticket-line {
-    border-bottom: 1px solid hsl(var(--Stroke-Secondary));
-  }
-
-  .mobile-total {
-    border-top: 1px solid hsl(var(--Stroke-Secondary));
-  }
-
-  /* Mobile footer */
-  .mobile-footer {
-    background-color: hsl(var(--BG-Primary));
-    border-top: 1px solid hsl(var(--Stroke-Secondary));
-    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
-    padding: 16px;
-    padding-bottom: max(16px, calc(env(safe-area-inset-bottom) + 8px));
-    -moz-user-select: none;
-         user-select: none;
-    -webkit-user-select: none;
-    touch-action: manipulation;
-    -webkit-tap-highlight-color: transparent;
-  }
-
-  .mobile-footer-content {
-    display: flex;
-    align-items: stretch;
-    gap: 12px;
-  }
-
-  .mobile-footer-left {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: flex-start;
-    flex-shrink: 0;
-    white-space: nowrap;
-    background: none;
-    border: none;
-    padding: 0;
-    cursor: pointer;
-    touch-action: manipulation;
-    -webkit-tap-highlight-color: transparent;
-  }
-
-  .mobile-footer-tickets {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    font-size: 14px;
-    font-weight: 400;
-    color: hsl(var(--Text-Secondary));
-  }
-
-  .mobile-footer-price {
-    font-size: 20px;
-    font-weight: 700;
-    color: hsl(var(--Text-Primary));
-  }
-
-  .mobile-footer-btn {
-    flex: 1;
-    min-width: 140px;
-    height: 48px;
-    border-radius: 10px;
-    font-size: 14px;
-    font-weight: 600;
-    touch-action: manipulation;
-    -webkit-tap-highlight-color: transparent;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  :global(.chevron-icon) {
-    color: hsl(var(--Text-Tartiary));
-  }
-</style>