/* elitejetseats styles */

html {
    scroll-behavior: smooth;
}

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

@keyframes slideIn {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes slideInUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeInScale {
    from {
        transform: scale(0.95);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes shimmer {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: calc(200px + 100%) 0;
    }
}

@keyframes bounceIn {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }
    50% {
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* apply animations */
.fade-in {
    animation: fadeIn 0.6s ease-out;
}

.slide-in {
    animation: slideIn 0.5s ease-out;
}

.slide-in-up {
    animation: slideInUp 0.6s ease-out;
}

.fade-in-scale {
    animation: fadeInScale 0.4s ease-out;
}

.bounce-in {
    animation: bounceIn 0.6s ease-out;
}

.pulse {
    animation: pulse 2s infinite;
}

.shimmer {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    background-size: 200px 100%;
    animation: shimmer 1.5s infinite;
}

.btn-primary {
    @apply bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 transition-all duration-300 transform hover:scale-105;
}

.btn-secondary {
    @apply bg-gray-200 text-gray-800 px-6 py-3 rounded-lg font-semibold hover:bg-gray-300 transition-all duration-300;
}

/* card hover effects */
.listing-card {
    @apply bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300 hover:shadow-xl transform hover:-translate-y-2;
}

.listing-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* rating stars */
.rating-stars {
    color: #fbbf24;
}

.rating-stars .far {
    color: #d1d5db;
}

.spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3b82f6;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.modal-enter {
    animation: modalEnter 0.3s ease-out;
}

@keyframes modalEnter {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* list seats modal specific styles */
#listSeatsModal .bg-white {
    max-height: 90vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e0 #f7fafc;
}

#listSeatsModal .bg-white::-webkit-scrollbar {
    width: 6px;
}

#listSeatsModal .bg-white::-webkit-scrollbar-track {
    background: #f7fafc;
    border-radius: 3px;
}

#listSeatsModal .bg-white::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 3px;
}

#listSeatsModal .bg-white::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
}

@media (max-width: 640px) {
    #listSeatsModal .bg-white {
        max-height: 95vh;
        margin: 1rem;
        padding: 1rem;
    }
    
    #listSeatsModal form {
        padding-bottom: 1rem;
    }
    
    #listSeatsModal button[type="submit"] {
        position: relative;
        margin-top: 1rem;
    }
}

/* form styling */
.form-input {
    @apply w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200;
}

.form-input:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.badge-success {
    @apply bg-green-100 text-green-800;
}

.badge-warning {
    @apply bg-yellow-100 text-yellow-800;
}

.badge-danger {
    @apply bg-red-100 text-red-800;
}

.badge-info {
    @apply bg-blue-100 text-blue-800;
}

.price {
    @apply text-2xl font-bold text-green-600;
}

.price-small {
    @apply text-lg font-semibold text-green-600;
}

/* view count styling */
.view-count {
    @apply text-sm text-gray-500 flex items-center;
}

.view-count i {
    @apply mr-1;
}

/* seat availability */
.seats-available {
    @apply text-sm font-medium;
}

.seats-available.high {
    @apply text-green-600;
}

.seats-available.medium {
    @apply text-yellow-600;
}

.seats-available.low {
    @apply text-red-600;
}

/* departure time styling */
.departure-time {
    @apply text-lg font-semibold text-blue-700;
}

.departure-time i {
    @apply text-blue-600;
}

/* flight duration styling */
.flight-duration {
    @apply text-sm text-gray-600;
}

.flight-duration i {
    @apply text-gray-500;
}

/* cart item styling */
.cart-item {
    @apply flex items-center justify-between p-4 border-b border-gray-200;
}

.cart-item:last-child {
    @apply border-b-0;
}

.quantity-selector {
    @apply flex items-center space-x-2;
}

.quantity-btn {
    @apply w-8 h-8 rounded-full border border-gray-300 flex items-center justify-center hover:bg-gray-100 transition-colors;
}

.quantity-input {
    @apply w-12 text-center border border-gray-300 rounded px-2 py-1;
}

/* responsive grid adjustments */
@media (max-width: 640px) {
    .listing-card {
        @apply mx-4;
    }
    
    .modal-content {
        @apply mx-4 max-h-[90vh] overflow-y-auto;
    }
}

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

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

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

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* toast notifications */
.toast {
    @apply fixed top-4 right-4 bg-white border-l-4 border-green-500 shadow-lg rounded-lg p-4 z-50;
    animation: slideInRight 0.3s ease-out;
}

.toast.error {
    @apply border-red-500;
}

.toast.warning {
    @apply border-yellow-500;
}

.toast.info {
    @apply border-blue-500;
}

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

/* tour highlight */
.tour-highlight {
    @apply relative;
}

.tour-highlight::before {
    content: '';
    @apply absolute inset-0 bg-yellow-200 bg-opacity-50 rounded-lg z-10;
    animation: pulse 2s infinite;
}

.category-vlj {
    @apply bg-blue-100 text-blue-800;
}

.category-lj {
    @apply bg-green-100 text-green-800;
}

.category-mj {
    @apply bg-yellow-100 text-yellow-800;
}

.category-lgj {
    @apply bg-purple-100 text-purple-800;
}

/* admin dashboard styles */
.admin-stats {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6;
}

.stat-card {
    @apply bg-white p-4 rounded-lg shadow-md border-l-4;
}

.stat-card.revenue {
    @apply border-green-500;
}

.stat-card.orders {
    @apply border-blue-500;
}

.stat-card.views {
    @apply border-yellow-500;
}

.stat-card.rating {
    @apply border-purple-500;
}

/* filter chips */
.filter-chip {
    @apply inline-flex items-center px-3 py-1 rounded-full text-sm bg-gray-200 text-gray-700 mr-2 mb-2;
}

.filter-chip.active {
    @apply bg-blue-600 text-white;
}

.filter-chip .remove {
    @apply ml-2 cursor-pointer hover:text-red-500;
}

/* loading overlay */
.loading-overlay {
    @apply fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50;
}

.success-checkmark {
    @apply text-green-500 text-4xl;
    animation: bounce 0.6s ease-out;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

/* responsive typography */
@media (max-width: 640px) {
    h1 {
        @apply text-3xl;
    }
    
    h2 {
        @apply text-2xl;
    }
    
    h3 {
        @apply text-xl;
    }
}

/* print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        @apply bg-white text-black;
    }
    
    .listing-card {
        @apply shadow-none border border-gray-300;
    }
} 

.tour-highlight {
    position: relative;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.5), 0 0 20px rgba(59, 130, 246, 0.3);
    border-radius: 8px;
    transition: all 0.3s ease;
    animation: tourPulse 2s infinite;
}

@keyframes tourPulse {
    0% {
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.5), 0 0 20px rgba(59, 130, 246, 0.3);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.7), 0 0 30px rgba(59, 130, 246, 0.5);
    }
    100% {
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.5), 0 0 20px rgba(59, 130, 246, 0.3);
    }
}

#tourTooltip {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    border: 1px solid #e5e7eb;
}

#tourTooltip::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 8px solid transparent;
}

#tourTooltip[data-position="top"]::before {
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    border-top-color: white;
}

#tourTooltip[data-position="bottom"]::before {
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-color: white;
}

#tourTooltip[data-position="left"]::before {
    right: -16px;
    top: 50%;
    transform: translateY(-50%);
    border-left-color: white;
}

#tourTooltip[data-position="right"]::before {
    left: -16px;
    top: 50%;
    transform: translateY(-50%);
    border-right-color: white;
}

/* ensure tour elements are above everything */
#tourOverlay {
    z-index: 9998;
}

#tourTooltip {
    z-index: 9999;
}

/* mobile tour adjustments */
@media (max-width: 768px) {
    #tourTooltip {
        max-width: 90vw;
        margin: 0 10px;
    }
    
    .tour-highlight {
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5), 0 0 15px rgba(59, 130, 246, 0.3);
    }
}

.dark .listing-card {
    @apply bg-gray-800 border-gray-700;
}

.dark .listing-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
}

.dark .badge-success {
    @apply bg-green-900 text-green-200;
}

.dark .badge-warning {
    @apply bg-yellow-900 text-yellow-200;
}

.dark .badge-danger {
    @apply bg-red-900 text-red-200;
}

.dark .badge-info {
    @apply bg-blue-900 text-blue-200;
}

.dark .category-vlj {
    @apply bg-purple-900 text-purple-200;
}

.dark .category-lj {
    @apply bg-blue-900 text-blue-200;
}

.dark .category-mj {
    @apply bg-green-900 text-green-200;
}

.dark .category-lgj {
    @apply bg-red-900 text-red-200;
}

.dark .admin-stats .stat-card {
    @apply bg-gray-800 border-gray-700;
}

.dark .admin-stats .stat-card h3 {
    @apply text-gray-300;
}

.dark .admin-stats .stat-card p:last-child {
    @apply text-gray-400;
}

.dark .toast {
    @apply bg-gray-800 text-white border-gray-600;
}

.dark .toast.error {
    @apply bg-red-900 border-red-700;
}

.dark .toast.warning {
    @apply bg-yellow-900 border-yellow-700;
}

.dark .toast.info {
    @apply bg-blue-900 border-blue-700;
}

.dark .tour-highlight {
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.6);
}

.dark #tourTooltip {
    @apply bg-gray-800 text-white border-gray-600;
}

.dark #tourTooltip::before {
    @apply border-gray-800;
}

.dark .form-input {
    @apply bg-gray-700 border-gray-600 text-white placeholder-gray-400;
}

.dark .form-input:focus {
    @apply ring-blue-400 border-blue-500;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
}

.dark .spinner {
    border-color: #374151;
    border-top-color: #60a5fa;
}

.dark .price,
.dark .price-small {
    @apply text-green-400;
}

.dark .view-count {
    @apply text-gray-400;
}

.dark .seats-available.high {
    @apply text-green-400;
}

.dark .seats-available.medium {
    @apply text-yellow-400;
}

.dark .seats-available.low {
    @apply text-red-400;
}

/* dark mode scrollbar */
.dark ::-webkit-scrollbar {
    width: 8px;
}

.dark ::-webkit-scrollbar-track {
    background: #374151;
}

.dark ::-webkit-scrollbar-thumb {
    background: #6b7280;
    border-radius: 4px;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* dark mode for list seats modal scrollbar */
.dark #listSeatsModal .bg-white::-webkit-scrollbar-track {
    background: #374151;
}

.dark #listSeatsModal .bg-white::-webkit-scrollbar-thumb {
    background: #6b7280;
}

.dark #listSeatsModal .bg-white::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}