/* Custom styles for Text Behind Image */

/* Button hover effects */
button, a.button {
    transition: all 0.2s ease-in-out;
}

/* Enhance canvas border */
#editor-canvas {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Text shadow for headers in hero section */
.bg-gradient-to-r h2, .bg-gradient-to-r p {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Pricing card hover effect */
.pricing-card {
    transition: transform 0.2s ease-in-out;
}

.pricing-card:hover {
    transform: translateY(-5px);
}

/* Enhanced form focus states */
input:focus, textarea:focus, select:focus {
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
}

/* Fabric.js custom classes */
.canvas-container {
    margin: 0 auto;
}

/* Better image thumbnails */
.thumbnail-img {
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Loading spinner animation */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Helper classes */
.text-shadow {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.overflow-ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/* Responsive canvas */
@media (max-width: 768px) {
    .canvas-container {
        width: 100% !important;
    }
    
    .canvas-container canvas {
        width: 100% !important;
        height: auto !important;
    }
}