@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700&display=swap');

        :root {
            --primary: #d97706;
            --bg-app: #f5f5f4;
        }

        * {
            font-family: 'Sarabun', sans-serif;
            -webkit-tap-highlight-color: transparent;
        }

        body {
            background-color: var(--bg-app);
            color: #1c1917;
        }

        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        ::-webkit-scrollbar-thumb {
            background: #d6d3d1;
            border-radius: 10px;
        }

        .toast {
            transition: all 0.3s ease;
        }

        .receipt-pattern {
            background-image: radial-gradient(#e5e7eb 1px, transparent 1px);
            background-size: 10px 10px;
        }

        /* Animations */
        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        .animate-fade-in {
            animation: fadeIn 0.3s ease-out forwards;
        }

        @keyframes slideUp {
            from {
                transform: translateY(20px);
                opacity: 0;
            }

            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .animate-slide-up {
            animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        @keyframes slideInRight {
            from {
                transform: translateX(100%);
                opacity: 0;
            }

            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        @keyframes fadeOut {
            to {
                opacity: 0;
                transform: translateY(-10px);
            }
        }

        .toast-enter {
            animation: slideInRight 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
        }

        .toast-exit {
            animation: fadeOut 0.3s ease-in forwards;
        }

        /* Backdrop Blur สำหรับ Modal */
        .glass-effect {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
        }

        input[type=number]::-webkit-inner-spin-button,
        input[type=number]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        /* ==================== Enhanced Animations for Payment Modal ==================== */

        /* Improved fadeIn with slide effect */
        @keyframes fadeInSlide {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .animate-fadeIn {
            animation: fadeInSlide 0.3s ease-out forwards;
        }

        /* Shake animation for errors */
        @keyframes shake {
            0%, 100% {
                transform: translateX(0);
            }
            25% {
                transform: translateX(-10px);
            }
            50% {
                transform: translateX(10px);
            }
            75% {
                transform: translateX(-10px);
            }
        }

        .animate-shake {
            animation: shake 0.3s ease-in-out;
        }

        /* Pulse ring for active payment method */
        @keyframes pulse-ring {
            0% {
                box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
            }
            100% {
                box-shadow: 0 0 0 15px rgba(59, 130, 246, 0);
            }
        }

        .animate-pulse-ring {
            animation: pulse-ring 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }

        /* Pulse ring variants for different colors */
        @keyframes pulse-ring-green {
            0% {
                box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
            }
            100% {
                box-shadow: 0 0 0 15px rgba(34, 197, 94, 0);
            }
        }

        .animate-pulse-ring-green {
            animation: pulse-ring-green 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }

        @keyframes pulse-ring-purple {
            0% {
                box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.7);
            }
            100% {
                box-shadow: 0 0 0 15px rgba(168, 85, 247, 0);
            }
        }

        .animate-pulse-ring-purple {
            animation: pulse-ring-purple 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }

        @keyframes pulse-ring-amber {
            0% {
                box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
            }
            100% {
                box-shadow: 0 0 0 15px rgba(245, 158, 11, 0);
            }
        }

        .animate-pulse-ring-amber {
            animation: pulse-ring-amber 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }

        /* Keypad button press animation */
        @keyframes button-press {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(0.95);
            }
            100% {
                transform: scale(1);
            }
        }

        .keypad-btn:active,
        .btn-press:active {
            animation: button-press 0.1s ease-in-out;
        }

        /* Smooth height transition */
        .transition-height {
            transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
            overflow: hidden;
        }

        /* Scale utilities */
        .hover\:scale-102:hover {
            transform: scale(1.02);
        }

        .hover\:scale-105:hover {
            transform: scale(1.05);
        }

        /* Payment option card styles */
        .payment-option-card {
            cursor: pointer;
            display: block;
            transition: all 0.3s ease;
        }

        .payment-option-card:hover {
            transform: translateY(-2px);
        }

        /* Numeric keypad button styles */
        .keypad-btn {
            background: linear-gradient(to bottom right, #f5f5f4, #e7e5e4);
            color: #1c1917;
            font-weight: bold;
            font-size: 1.5rem;
            padding: 1rem 1.5rem;
            border-radius: 0.75rem;
            transition: all 0.15s;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }

        .keypad-btn:hover {
            background: linear-gradient(to bottom right, #e7e5e4, #d6d3d1);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }

        .keypad-btn:active {
            transform: scale(0.95);
        }

        .keypad-btn-clear {
            background: linear-gradient(to bottom right, #ef4444, #dc2626);
            color: white;
            font-weight: bold;
            font-size: 1.25rem;
            padding: 1rem 1.5rem;
            border-radius: 0.75rem;
            transition: all 0.15s;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }

        .keypad-btn-clear:hover {
            background: linear-gradient(to bottom right, #dc2626, #b91c1c);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }

        .keypad-btn-clear:active {
            transform: scale(0.95);
        }

        /* Success animation */
        @keyframes success-bounce {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.1);
            }
        }

        .animate-success-bounce {
            animation: success-bounce 0.5s ease-in-out;
        }

        /* Compact Keypad Buttons */
        .keypad-btn-compact {
            background: linear-gradient(to bottom right, #f5f5f4, #e7e5e4);
            color: #1c1917;
            font-weight: bold;
            font-size: 1rem;
            padding: 0.5rem 0.75rem;
            border-radius: 0.375rem;
            transition: all 0.15s;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .keypad-btn-compact:hover {
            background: linear-gradient(to bottom right, #e7e5e4, #d6d3d1);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
        }

        .keypad-btn-compact:active {
            transform: scale(0.95);
        }

        .keypad-btn-clear-compact {
            background: linear-gradient(to bottom right, #ef4444, #dc2626);
            color: white;
            font-weight: bold;
            font-size: 0.875rem;
            padding: 0.5rem 0.75rem;
            border-radius: 0.375rem;
            transition: all 0.15s;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .keypad-btn-clear-compact:hover {
            background: linear-gradient(to bottom right, #dc2626, #b91c1c);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
        }

        .keypad-btn-clear-compact:active {
            transform: scale(0.95);
        }

        /* Payment section visibility controls */
        .payment-section-hidden {
            display: none !important;
            visibility: hidden !important;
            height: 0 !important;
            overflow: hidden !important;
            opacity: 0 !important;
        }

        .payment-section-visible {
            display: block !important;
            visibility: visible !important;
            height: auto !important;
            overflow: visible !important;
            opacity: 1 !important;
        }

        /* Scrollable Tabs - ซ่อน scrollbar แต่ยัง scroll ได้ */
        .no-scrollbar {
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;  /* Firefox */
            -webkit-overflow-scrolling: touch; /* iOS smooth scroll */
        }

        .no-scrollbar::-webkit-scrollbar {
            display: none; /* Chrome, Safari, Opera */
        }

        /* Settings Tabs - สามารถเลื่อนได้ */
        .settings-tabs-container {
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            scroll-behavior: smooth;
            scrollbar-width: thin;
        }

        .settings-tabs-container::-webkit-scrollbar {
            height: 4px;
        }

        .settings-tabs-container::-webkit-scrollbar-thumb {
            background: #d6d3d1;
            border-radius: 4px;
        }

        .settings-tabs-container::-webkit-scrollbar-track {
            background: transparent;
        }

        /* Touch scroll hint - แสดง indicator ว่าเลื่อนได้ */
        .scroll-hint {
            position: relative;
        }

        .scroll-hint::after {
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 40px;
            background: linear-gradient(to right, transparent, white);
            pointer-events: none;
        }

        /* ===== iOS Safari Scroll Fix =====
           overflow-y-auto inside flex chains on iOS Safari requires
           -webkit-overflow-scrolling: touch for momentum scrolling.
           overscroll-behavior: contain prevents scroll chaining (rubber-banding
           the outer page when the inner list hits its top/bottom boundary). */
        .overflow-y-auto,
        .overflow-auto,
        .overflow-y-scroll,
        .overflow-scroll {
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
            touch-action: pan-y;
        }

        /* iOS Fix: views using h-full inside #content-slot flex container
           must participate in flex layout so height resolves properly on Safari */
        #content-slot > div {
            max-height: 100%;
        }

        /* ===== iOS Safari 100vh / Browser Chrome Fix =====
           Safari counts 100vh as the FULL screen including browser toolbars
           (address bar, bottom nav). Tailwind's h-screen = height:100vh which
           makes the layout extend BEHIND the toolbar, clipping bottom content.

           Fix: use 100svh (Small Viewport Height) which is always the visible
           area MINUS the browser chrome — content never hides behind toolbars.
           Falls back gracefully to 100vh on browsers that don't support svh. */
        @supports (height: 100svh) {
            .h-screen {
                height: 100svh;
            }
            body.h-screen,
            #layout-main {
                height: 100svh;
            }
        }