Industrial_Travel_Shopping_Cart

<div class="font-sans antialiased text-gray-800 bg-gray-50 dark:bg-gray-900 dark:text-gray-200 min-h-screen p-4 sm:p-6 lg:p-8">
  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">
    <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-r from-emerald-700 to-green-800 dark:from-green-900 dark:to-emerald-900 text-white border-b-4 border-emerald-900 dark:border-emerald-700">
      <h1 class="text-2xl sm:text-3xl lg:text-4xl font-extrabold tracking-wide drop-shadow-lg">Your Travel Cart</h1>
      <p class="mt-2 text-md sm:text-lg text-green-100">Review your selected adventures before checkout.</p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 p-4 sm:p-6 lg:p-8">
      <!-- Cart Items Section -->
      <div class="lg:col-span-2 space-y-6">

        <!-- Item 1 -->
        <div class="flex flex-col sm:flex-row items-center bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md border border-gray-200 dark:border-gray-600 relative group">
          <img src="https://picsum.photos/300/200?random=1" alt="Machu Picchu Tour" class="w-full sm:w-32 h-24 object-cover rounded-lg mr-0 sm:mr-4 mb-4 sm:mb-0 border-2 border-emerald-600 dark:border-emerald-400 group-hover:scale-105 transition-transform duration-300">
          <div class="flex-1">
            <h2 class="text-lg sm:text-xl font-bold text-emerald-800 dark:text-emerald-300">Machu Picchu Adventure (3 Days)</h2>
            <p class="text-sm text-gray-600 dark:text-gray-300">Date: Oct 26 - Oct 29, 2024</p>
            <p class="text-sm text-gray-600 dark:text-gray-300">Participants: 2 Adults</p>
            <div class="flex items-center mt-2">
              <span class="text-lg font-semibold text-gray-800 dark:text-white">$1,200.00</span>
              <div class="flex ml-auto items-center space-x-2">
                <label for="qty-1" class="sr-only">Quantity</label>
                <input type="number" id="qty-1" value="1" min="1" class="w-16 text-center border border-gray-300 dark:border-gray-600 rounded-md py-1 px-2 focus:ring-emerald-500 focus:border-emerald-500 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200">
                <button class="p-2 text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-500 transition-colors duration-200" aria-label="Remove item">
                  <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd"></path></svg>
                </button>
              </div>
            </div>
          </div>
          <button class="absolute top-2 right-2 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 transition-colors duration-200" aria-label="More options">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path></svg>
          </button>
        </div>

        <!-- Item 2 -->
        <div class="flex flex-col sm:flex-row items-center bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md border border-gray-200 dark:border-gray-600 relative group">
          <img src="https://picsum.photos/300/200?random=2" alt="Amazon River Cruise" class="w-full sm:w-32 h-24 object-cover rounded-lg mr-0 sm:mr-4 mb-4 sm:mb-0 border-2 border-emerald-600 dark:border-emerald-400 group-hover:scale-105 transition-transform duration-300">
          <div class="flex-1">
            <h2 class="text-lg sm:text-xl font-bold text-emerald-800 dark:text-emerald-300">Amazon River Cruise (Night)</h2>
            <p class="text-sm text-gray-600 dark:text-gray-300">Date: Nov 15, 2024</p>
            <p class="text-sm text-gray-600 dark:text-gray-300">Participants: 1 Adult</p>
            <div class="flex items-center mt-2">
              <span class="text-lg font-semibold text-gray-800 dark:text-white">$350.00</span>
              <div class="flex ml-auto items-center space-x-2">
                <label for="qty-2" class="sr-only">Quantity</label>
                <input type="number" id="qty-2" value="1" min="1" class="w-16 text-center border border-gray-300 dark:border-gray-600 rounded-md py-1 px-2 focus:ring-emerald-500 focus:border-emerald-500 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200">
                <button class="p-2 text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-500 transition-colors duration-200" aria-label="Remove item">
                  <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd"></path></svg>
                </button>
              </div>
            </div>
          </div>
          <button class="absolute top-2 right-2 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 transition-colors duration-200" aria-label="More options">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path></svg>
          </button>
        </div>

        <!-- Add more items, perhaps a placeholder for empty state -->
        <div class="text-center p-4 text-gray-500 dark:text-gray-400 border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg">
          <p class="text-sm">Want to add more adventures? <a href="#" class="text-emerald-600 dark:text-emerald-400 hover:underline">Explore our tours</a></p>
        </div>

      </div>

      <!-- Order Summary Section -->
      <div class="lg:col-span-1 bg-gray-100 dark:bg-gray-700 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-600 h-fit sticky top-4">
        <h2 class="text-xl sm:text-2xl font-bold text-emerald-800 dark:text-emerald-300 mb-4 border-b pb-2 border-gray-300 dark:border-gray-600">Order Summary</h2>
        <div class="space-y-4 text-gray-700 dark:text-gray-200">
          <div class="flex justify-between items-center">
            <span>Subtotal (2 items)</span>
            <span class="font-semibold">$1,550.00</span>
          </div>
          <div class="flex justify-between items-center">
            <span>Estimated Taxes</span>
            <span class="font-semibold">$77.50</span>
          </div>
          <div class="flex justify-between items-center">
            <span>Booking Fees</span>
            <span class="font-semibold">$25.00</span>
          </div>
          <div class="border-t border-gray-300 dark:border-gray-600 pt-4 mt-4">
            <div class="flex justify-between items-center text-lg font-bold text-emerald-800 dark:text-emerald-300">
              <span>Order Total</span>
              <span>$1,652.50</span>
            </div>
          </div>
        </div>

        <div class="mt-6">
          <label for="promo-code" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Have a promo code?</label>
          <div class="flex">
            <input type="text" id="promo-code" placeholder="SUMMER20" class="flex-grow border border-gray-300 dark:border-gray-600 rounded-l-md p-2 focus:ring-emerald-500 focus:border-emerald-500 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200">
            <button class="bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-700 dark:hover:bg-emerald-800 text-white font-bold py-2 px-4 rounded-r-md transition duration-200 ease-in-out">
              Apply
            </button>
          </div>
        </div>

        <button class="mt-6 w-full bg-emerald-700 hover:bg-emerald-800 dark:bg-emerald-800 dark:hover:bg-emerald-900 text-white font-extrabold py-3 rounded-lg text-lg tracking-wide shadow-lg transform hover:scale-105 transition duration-300 ease-in-out focus:outline-none focus:ring-4 focus:ring-emerald-500 focus:ring-opacity-50">
          Proceed to Checkout
          <svg class="inline-block ml-2 w-5 h-5 -mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
        </button>

        <div class="mt-6 text-xs text-gray-500 dark:text-gray-400 text-center">
          <p>By proceeding, you agree to our <a href="#" class="text-emerald-600 dark:text-emerald-400 hover:underline">Terms of Service</a> and <a href="#" class="text-emerald-600 dark:text-emerald-400 hover:underline">Privacy Policy</a>.</p>
        </div>

        <div class="mt-6 text-center">
          <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Secure payment processed by:</p>
          <img src="https://picsum.photos/120/40?grayscale&random=3" alt="Payment Provider Logo" class="mx-auto rounded-md filter invert dark:filter-none opacity-80 dark:opacity-60">
        </div>

      </div>
    </div>
  </div>
</div>