@import url('https://fonts.googleapis.com/css2?family=Aclonica&family=Acme&family=Aladin&family=Allerta+Stencil&family=Audiowide&family=Bangers&family=Bungee+Inline&family=Carter+One&family=Caveat:wght@400..700&family=Changa+One:ital@0;1&family=Concert+One&family=Creepster&family=Dancing+Script:wght@400..700&family=Delicious+Handrawn&family=Eater&family=Handlee&family=Henny+Penny&family=Indie+Flower&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Julee&family=Kaushan+Script&family=Lacquer&family=Lilita+One&family=Luckiest+Guy&family=Monoton&family=Mr+Dafoe&family=Mynerve&family=Noto+Nastaliq+Urdu:wght@400..700&family=Pacifico&family=Permanent+Marker&family=Playball&family=Press+Start+2P&family=Rampart+One&family=Righteous&family=Russo+One&family=Sedgwick+Ave&family=Shantell+Sans:ital,wght@0,300..800;1,300..800&family=Special+Elite&family=Tektur:wght@400..900&family=Tilt+Prism&family=Tiro+Devanagari+Hindi:ital@0;1&family=Titan+One&family=Tourney:ital,wght@0,100..900;1,100..900&family=Zeyada&display=swap');
        
        body { 
            font-family: 'Inter', sans-serif;
            background-color: #f1f5f9;
            color: #1e293b;
            touch-action: manipulation;
        }

        #canvas-wrapper {
		opacity: 0;
		transition: opacity 0.2s ease;
		box-shadow: none;
		transition: all 0.3s ease;
		display: flex;
		align-items: center;
		justify-content: center;
}

        .btn-primary {
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        }

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

        input[type="range"] {
            -webkit-appearance: none;
            appearance: none;
            background: transparent;
        }

        input[type="range"]::-webkit-slider-runnable-track {
            background: #e2e8f0;
            border-radius: 10px;
            height: 6px;
        }

        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            height: 18px;
            width: 18px;
            background: #2563eb;
            border-radius: 50%;
            margin-top: -6px;
        }
		.transparent-checkered {
    background-image: linear-gradient(45deg, #e2e8f0 25%, transparent 25%), 
                      linear-gradient(-45deg, #e2e8f0 25%, transparent 25%), 
                      linear-gradient(45deg, transparent 75%, #e2e8f0 75%), 
                      linear-gradient(-45deg, transparent 75%, #e2e8f0 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}
.toolbox-collapsed {
    transform: translateY(calc(100% - 80px)); /* keep button visible */
}
@media (min-width: 768px) {
    #toolboxContainer {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        flex-direction: column !important;
    }

    #toolboxToggle {
        display: block !important;
    }
}
.toolbox-collapsed #toolboxToggle {
    box-shadow: 0 -4px 10px rgba(0,0,0,0.1);
}
/* Mobile toolbox horizontal scroll */
@media (max-width: 767px) {
    #textOptions {
		padding-right: 10px;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-behavior: smooth;
      }

    #textOptions > * {
        direction: ltr; /* keep buttons normal */
        flex: 0 0 auto; /* prevent shrinking */
    }

    #textOptions::-webkit-scrollbar {
        display: none; /* clean UI */
    }
}
#toolboxContainer {
    margin-bottom: 10px;
	z-index: 60;
}
@media (max-width: 767px) {
    body {
        padding-bottom: 140px;
    }

    .editor-container {
        min-height: 60vh;
    }

    #canvas-wrapper {
        width: 100% !important;
        max-width: 100% !important;
    }
}

canvas.upper-canvas {
    border: 2px dashed #334155 !important;
    box-sizing: border-box;
}
.pcr-app {
    z-index: 9999;
}
html {
    scroll-behavior: smooth;
}