/* RESA UI Custom Styles */
/* These override or supplement Tailwind CSS */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Custom animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

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

/* HTMX loading states */
.htmx-request .htmx-indicator {
    display: inline-block !important;
}

/* Progress bar shine effect */
@keyframes shine {
    to {
        background-position: 200% center;
    }
}

.progress-shine {
    background: linear-gradient(
        to right,
        transparent,
        rgba(255, 255, 255, 0.3) 50%,
        transparent
    );
    background-size: 200% 100%;
    animation: shine 2s linear infinite;
}

/* Custom focus styles */
input:focus,
textarea:focus,
select:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Stripe iframe adjustments */
.StripeElement {
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    background: white;
}

.StripeElement--focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Mobile touch targets */
@media (max-width: 640px) {
    button,
    a,
    input,
    select,
    textarea {
        min-height: 44px;
    }
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
    }
}