/* Hide scrollbar but keep scroll functionality */
    .scrollbar-hide::-webkit-scrollbar { display: none; }
    .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

    /* Stripe Element styling */
    .StripeElement {
      padding: 12px;
      border: 2px solid #e5e7eb;
      border-radius: 12px;
      background: white;
    }
    .StripeElement--focus {
      border-color: #2563eb;
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    }
    .StripeElement--invalid {
      border-color: #ef4444;
    }

    /* Skeleton shimmer animation */
    @keyframes shimmer {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }

    /* Scroll snap for date picker */
    .dates-scroll-container {
      scroll-snap-type: x mandatory;
      scroll-padding: 0 16px;
      -webkit-overflow-scrolling: touch;
    }
    .dates-scroll-container > button {
      scroll-snap-align: start;
      scroll-snap-stop: normal;
    }

    /* Safe area support for iPhone notch and home indicator */
    body {
      padding-top: env(safe-area-inset-top);
      padding-bottom: env(safe-area-inset-bottom);
    }
    .sticky-bottom-safe {
      padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
    }

    /* Remove default mobile tap highlight, use our own active states */
    * {
      -webkit-tap-highlight-color: transparent;
    }
    button {
      -webkit-tap-highlight-color: rgba(59, 130, 246, 0.1);
    }

    /* Desktop Card Layout */
    @media (min-width: 768px) {
      body {
        background-color: #f7f8fa;
      }

      #app {
        background-color: #f7f8fa;
      }

      .desktop-card-wrapper {
        max-width: 720px;
        margin: 0 auto;
        background-color: #ffffff;
        border-radius: 16px;
        border: 1px solid #e6e8eb;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
        margin-top: 40px;
      }

      /* Tighter spacing inside card on desktop */
      #step-service,
      #step-day,
      #step-time {
        margin-bottom: 0.75rem !important;
      }

      /* Reduce date pill size on desktop */
      .dates-scroll-container > button {
        width: 72px;
        height: 72px;
        font-size: 0.875rem;
      }

      .dates-scroll-container > button .text-lg {
        font-size: 1rem;
      }

      /* Larger time grid on desktop with better spacing */
      #times-container {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.75rem;
      }

      #times-container .time-btn {
        height: 2.75rem;
        font-size: 0.95rem;
      }
    }