[x-cloak] {
    display: none !important;
}

html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Level badge positioning */
.relative .absolute.bottom-0 {
    transform: translateY(25%);
}

/* Level tier colors for badges */
.level-bronze { background-color: #cd7f32; color: #fff; }
.level-silver { background-color: #9ca3af; color: #fff; }
.level-gold { background-color: #f59e0b; color: #fff; }
.level-platinum { background-color: #e5e7eb; color: #374151; }
.level-diamond { background: linear-gradient(135deg, #67e8f9, #a5f3fc); color: #164e63; }

/* Card hover effects */
.group:hover .group-hover\:scale-105 {
    transform: scale(1.05);
}

/* Stripe card element styling */
#card-number-element,
#card-expiry-element,
#card-cvc-element {
    min-height: 44px;
}

#card-number-element iframe,
#card-expiry-element iframe,
#card-cvc-element iframe {
    width: 100% !important;
}

#card-number-element.StripeElement--focus,
#card-expiry-element.StripeElement--focus,
#card-cvc-element.StripeElement--focus {
    outline: none;
    box-shadow: 0 0 0 2px #2563EB;
    border-color: transparent;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Smooth transitions for interactive elements */
a, button, input, select, textarea {
    transition: all 0.15s ease;
}

/* Flash message animation */
.bg-green-50, .bg-red-50, .bg-blue-50 {
    animation: flashIn 0.3s ease-out;
}

@keyframes flashIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Product card image aspect ratio */
.aspect-\[3\/4\] {
    aspect-ratio: 3 / 4;
}

/* File input styling */
input[type="file"]::file-selector-button {
    cursor: pointer;
}

/* Star rating interactive */
button .fa-star {
    cursor: pointer;
    transition: color 0.1s ease, transform 0.1s ease;
}

button:hover .fa-star {
    transform: scale(1.1);
}

/* Table responsive */
@media (max-width: 768px) {
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
    }
}

/* Print styles */
@media print {
    header, footer, .no-print { display: none !important; }
    body { background: #fff; }
}