body {
            margin: 0;
            overflow: hidden;
            overscroll-behavior: none;
            font-family: 'Inter', sans-serif;
            background-color: #f5f6f8;
            -webkit-tap-highlight-color: transparent;
        }
        canvas { display: block; outline: none; }

        /* Card-field containers (Clover SDK iframe wrappers).
           Mirror the inputCls used for Name/Email/Promo on the details
           screen — same backgrounds + borders, applied via Tailwind on
           the React side. Here we only control the iframe geometry: it
           flows as a plain block child, takes full width, and is sized
           to match the input padding (py-3 ≈ 48px tall). The Clover SDK
           sets inline width/height on the iframe after mount, so we use
           !important to keep our sizing. */
        .cf-field,
        .cf-field * {
            -webkit-tap-highlight-color: transparent;
        }
        .cf-field iframe {
            display: block;
            width: 100% !important;
            height: 48px !important;
            border: 0 !important;
            background: transparent !important;
            touch-action: manipulation;
        }

        /* All interactive elements inside the checkout modal.
           touch-action: manipulation disables iOS's 300ms double-tap-zoom
           gesture so the FIRST tap counts as a click immediately. Without
           this, header buttons (Back/Close), tip chips, and the Pay button
           feel unresponsive on mobile. */
        [data-checkout-modal] button,
        [data-checkout-modal] input,
        [data-checkout-modal] label,
        [data-checkout-modal] a {
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
        }
        /* When the builder is active, freeze the whole page so iOS can't rubberband-reveal the black bg */
        body.zcomponent-launched { position: fixed; inset: 0; overscroll-behavior: none; }
        body.zcomponent-launched #builder-root { overscroll-behavior: none; }
        
        /* Smooth scrolling classes */
        .hide-scrollbar::-webkit-scrollbar { display: none; }
        .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

        .custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; border-radius: 10px; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #d4d4d8; border-radius: 10px; }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #a1a1aa; }

        .btn-press { transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s; }
        .btn-press:active { transform: scale(0.96); }
        
        /* Safe area padding for newer iOS devices, ensuring minimum padding exists */
        .pb-safe { padding-bottom: max(1.25rem, env(safe-area-inset-bottom)); }
        
        /* Stop body scrolling on mobile while allowing inner div scrolling */
        #root { height: 100dvh; width: 100%; overflow: hidden; }