/* Travel Tour Shop - Tailwind Custom Styles */
/* Theme: Orange, White, Black with Light/Dark Mode */

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ========================================
   CSS VARIABLES
======================================== */
:root {
    /* Primary Colors - Orange Theme */
    --color-primary: #f97316;
    --color-primary-light: #fb923c;
    --color-primary-dark: #ea580c;
    --color-primary-50: #fff7ed;
    --color-primary-100: #ffedd5;
    --color-primary-200: #fed7aa;
    --color-primary-500: #f97316;
    --color-primary-600: #ea580c;
    --color-primary-700: #c2410c;
    
    /* Light Mode */
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --bg-tertiary: #f3f4f6;
    --text-primary: #111827;
    --text-secondary: #4b5563;
    --text-muted: #9ca3af;
    --border-color: #e5e7eb;
    
    /* Transitions */
    --transition-fast: 150ms;
    --transition-normal: 300ms;
}

/* Dark Mode Variables */
.dark {
    --bg-primary: #111827;
    --bg-secondary: #1f2937;
    --bg-tertiary: #374151;
    --text-primary: #f9fafb;
    --text-secondary: #d1d5db;
    --text-muted: #6b7280;
    --border-color: #374151;
}

/* ========================================
   BASE STYLES
======================================== */
@layer base {
    html {
        scroll-behavior: smooth;
    }
    
    body {
        @apply bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 antialiased;
        font-family: 'DM Sans', 'Poppins', system-ui, -apple-system, sans-serif;
        transition: background-color var(--transition-normal), color var(--transition-normal);
    }
    
    /* Links */
    a {
        @apply transition-colors duration-200;
    }
    
    /* Headings */
    h1, h2, h3, h4, h5, h6 {
        @apply font-bold text-gray-900 dark:text-white;
    }
    
    /* Selection */
    ::selection {
        @apply bg-orange-500/20 text-orange-900 dark:text-orange-100;
    }
}

/* ========================================
   COMPONENT STYLES
======================================== */
@layer components {
    /* Buttons */
    .btn {
        @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-lg 
               transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2
               disabled:opacity-50 disabled:cursor-not-allowed;
    }
    
    .btn-primary {
        @apply bg-orange-500 text-white hover:bg-orange-600 
               focus:ring-orange-500 dark:focus:ring-offset-gray-900
               shadow-lg shadow-orange-500/25 hover:shadow-orange-500/40;
    }
    
    .btn-secondary {
        @apply bg-gray-900 text-white hover:bg-gray-800 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100
               focus:ring-gray-500 dark:focus:ring-offset-gray-900;
    }
    
    .btn-outline {
        @apply border-2 border-orange-500 text-orange-500 hover:bg-orange-500 hover:text-white
               dark:border-orange-400 dark:text-orange-400 dark:hover:bg-orange-500 dark:hover:text-white
               focus:ring-orange-500;
    }
    
    .btn-ghost {
        @apply text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800
               focus:ring-gray-500;
    }
    
    .btn-danger {
        @apply bg-red-500 text-white hover:bg-red-600 focus:ring-red-500;
    }
    
    .btn-success {
        @apply bg-green-500 text-white hover:bg-green-600 focus:ring-green-500;
    }
    
    .btn-sm {
        @apply px-3 py-1.5 text-xs;
    }
    
    .btn-lg {
        @apply px-6 py-3 text-base;
    }
    
    .btn-xl {
        @apply px-8 py-4 text-lg;
    }
    
    /* Cards */
    .card {
        @apply bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-200 dark:border-gray-700
               transition-all duration-300;
    }
    
    .card-hover {
        @apply hover:shadow-xl hover:-translate-y-1 hover:border-orange-200 dark:hover:border-orange-500/30;
    }
    
    .card-body {
        @apply p-6;
    }
    
    .card-header {
        @apply px-6 py-4 border-b border-gray-200 dark:border-gray-700;
    }
    
    .card-footer {
        @apply px-6 py-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50;
    }
    
    /* Form Controls */
    .form-input {
        @apply w-full px-4 py-3 text-gray-900 dark:text-white 
               bg-white dark:bg-gray-800 
               border border-gray-300 dark:border-gray-600 
               rounded-xl
               focus:ring-2 focus:ring-orange-500 focus:border-orange-500 
               dark:focus:ring-orange-400 dark:focus:border-orange-400
               placeholder-gray-400 dark:placeholder-gray-500
               transition-all duration-200;
    }
    
    .form-select {
        @apply form-input appearance-none bg-no-repeat bg-right pr-10
               cursor-pointer;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
        background-size: 1.5em 1.5em;
        background-position: right 0.75rem center;
    }
    
    .form-label {
        @apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2;
    }
    
    .form-checkbox {
        @apply w-4 h-4 text-orange-500 border-gray-300 rounded 
               focus:ring-orange-500 dark:border-gray-600 dark:bg-gray-700;
    }
    
    /* Navigation */
    .nav-link {
        @apply px-4 py-2 text-gray-700 dark:text-gray-300 
               hover:text-orange-500 dark:hover:text-orange-400
               font-medium transition-colors duration-200;
    }
    
    .nav-link-active {
        @apply text-orange-500 dark:text-orange-400;
    }
    
    /* Badges */
    .badge {
        @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
    }
    
    .badge-primary {
        @apply bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-400;
    }
    
    .badge-secondary {
        @apply bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300;
    }
    
    .badge-success {
        @apply bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400;
    }
    
    .badge-warning {
        @apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400;
    }
    
    .badge-danger {
        @apply bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400;
    }
    
    /* Alerts */
    .alert {
        @apply p-4 rounded-xl border;
    }
    
    .alert-info {
        @apply bg-blue-50 border-blue-200 text-blue-800 dark:bg-blue-900/20 dark:border-blue-800 dark:text-blue-400;
    }
    
    .alert-success {
        @apply bg-green-50 border-green-200 text-green-800 dark:bg-green-900/20 dark:border-green-800 dark:text-green-400;
    }
    
    .alert-warning {
        @apply bg-yellow-50 border-yellow-200 text-yellow-800 dark:bg-yellow-900/20 dark:border-yellow-800 dark:text-yellow-400;
    }
    
    .alert-danger {
        @apply bg-red-50 border-red-200 text-red-800 dark:bg-red-900/20 dark:border-red-800 dark:text-red-400;
    }
    
    /* Avatar */
    .avatar {
        @apply relative inline-flex items-center justify-center overflow-hidden rounded-xl;
    }
    
    .avatar-sm {
        @apply w-8 h-8 text-sm;
    }
    
    .avatar-md {
        @apply w-10 h-10 text-base;
    }
    
    .avatar-lg {
        @apply w-12 h-12 text-lg;
    }
    
    .avatar-xl {
        @apply w-16 h-16 text-xl;
    }
    
    /* Initials Avatar */
    .initials-avatar {
        @apply w-full h-full flex items-center justify-center 
               bg-orange-500 text-white font-bold uppercase select-none;
    }
    
    /* Dropdown */
    .dropdown-menu {
        @apply absolute right-0 mt-2 w-56 origin-top-right rounded-xl 
               bg-white dark:bg-gray-800 
               shadow-lg ring-1 ring-black ring-opacity-5 
               dark:ring-gray-700
               focus:outline-none z-50
               transform transition-all duration-200;
    }
    
    .dropdown-item {
        @apply block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 
               hover:bg-gray-100 dark:hover:bg-gray-700 
               transition-colors duration-150;
    }
    
    .dropdown-divider {
        @apply my-1 border-t border-gray-200 dark:border-gray-700;
    }
    
    /* Modal */
    .modal-overlay {
        @apply fixed inset-0 bg-black/50 dark:bg-black/70 backdrop-blur-sm z-50;
    }
    
    .modal-content {
        @apply bg-white dark:bg-gray-800 rounded-2xl shadow-2xl max-w-lg w-full mx-4;
    }
    
    /* Tabs */
    .tab-list {
        @apply flex space-x-1 rounded-xl bg-gray-100 dark:bg-gray-800 p-1;
    }
    
    .tab-item {
        @apply w-full rounded-lg py-2.5 text-sm font-medium leading-5 
               text-gray-700 dark:text-gray-300
               hover:bg-white/60 dark:hover:bg-gray-700/60
               focus:outline-none;
    }
    
    .tab-item-active {
        @apply bg-white dark:bg-gray-700 text-orange-500 shadow;
    }
    
    /* Tour Card */
    .tour-card {
        @apply card card-hover overflow-hidden;
    }
    
    .tour-card-image {
        @apply relative h-48 sm:h-56 overflow-hidden;
    }
    
    .tour-card-image img {
        @apply w-full h-full object-cover transform transition-transform duration-500 group-hover:scale-110;
    }
    
    .tour-card-badge {
        @apply absolute top-3 left-3 badge badge-primary;
    }
    
    .tour-card-wishlist {
        @apply absolute top-3 right-3 w-8 h-8 flex items-center justify-center 
               bg-white/90 dark:bg-gray-800/90 rounded-full 
               text-gray-400 hover:text-red-500 
               transition-colors duration-200;
    }
    
    /* Category Card */
    .category-card {
        @apply relative overflow-hidden rounded-2xl group cursor-pointer;
    }
    
    .category-card-image {
        @apply w-full aspect-[4/3] object-cover transform transition-transform duration-500 group-hover:scale-110;
    }
    
    .category-card-overlay {
        @apply absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent;
    }
    
    .category-card-title {
        @apply absolute bottom-4 left-4 text-white font-semibold text-lg drop-shadow-lg;
    }
    
    /* Search Box */
    .search-box {
        @apply relative;
    }
    
    .search-box input {
        @apply w-full pl-12 pr-4 py-3 rounded-xl border-0 
               bg-gray-100 dark:bg-gray-800 
               text-gray-900 dark:text-white
               placeholder-gray-500 dark:placeholder-gray-400
               focus:ring-2 focus:ring-orange-500;
    }
    
    .search-box-icon {
        @apply absolute left-4 top-1/2 -translate-y-1/2 text-gray-400;
    }
    
    /* Rating Stars */
    .rating-stars {
        @apply flex items-center space-x-0.5 text-yellow-400;
    }
    
    /* Price Display */
    .price-original {
        @apply text-gray-400 line-through text-sm;
    }
    
    .price-current {
        @apply text-2xl font-bold text-orange-500;
    }
    
    .price-discount {
        @apply badge badge-danger;
    }
    
    /* Skeleton Loader */
    .skeleton {
        @apply animate-pulse bg-gray-200 dark:bg-gray-700 rounded;
    }
    
    /* Section Title */
    .section-title {
        @apply text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4;
    }
    
    .section-subtitle {
        @apply text-lg text-gray-600 dark:text-gray-400;
    }
    
    /* Container */
    .container-custom {
        @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
    }
    
    /* Divider */
    .divider {
        @apply border-t border-gray-200 dark:border-gray-700;
    }
    
    /* Gradient Text */
    .gradient-text {
        @apply bg-gradient-to-r from-orange-500 to-orange-600 bg-clip-text text-transparent;
    }
    
    /* Glass Effect */
    .glass {
        @apply bg-white/80 dark:bg-gray-900/80 backdrop-blur-lg;
    }
    
    /* Hero Section */
    .hero-overlay {
        @apply absolute inset-0 bg-gradient-to-r from-black/60 via-black/30 to-transparent;
    }
    
    /* Sidebar */
    .sidebar {
        @apply w-64 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700;
    }
    
    .sidebar-item {
        @apply flex items-center px-4 py-3 text-gray-700 dark:text-gray-300 
               hover:bg-gray-100 dark:hover:bg-gray-700 
               rounded-lg transition-colors duration-200;
    }
    
    .sidebar-item-active {
        @apply bg-orange-50 dark:bg-orange-900/20 text-orange-600 dark:text-orange-400
               border-r-2 border-orange-500;
    }
    
    /* Footer */
    .footer {
        @apply bg-gray-900 text-gray-300;
    }
    
    .footer-link {
        @apply text-gray-400 hover:text-orange-400 transition-colors duration-200;
    }
}

/* ========================================
   UTILITY STYLES
======================================== */
@layer utilities {
    /* Text Gradient */
    .text-gradient-orange {
        @apply bg-gradient-to-r from-orange-400 to-orange-600 bg-clip-text text-transparent;
    }
    
    /* Background Patterns */
    .bg-pattern {
        background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23f97316' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }
    
    /* Custom scrollbar */
    .scrollbar-thin {
        scrollbar-width: thin;
        scrollbar-color: theme('colors.orange.500') theme('colors.gray.200');
    }
    
    .scrollbar-thin::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    
    .scrollbar-thin::-webkit-scrollbar-track {
        @apply bg-gray-200 dark:bg-gray-700 rounded-full;
    }
    
    .scrollbar-thin::-webkit-scrollbar-thumb {
        @apply bg-orange-500 rounded-full hover:bg-orange-600;
    }
    
    /* Hide scrollbar */
    .no-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    
    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }
    
    /* Animations */
    .animate-fade-in {
        animation: fadeIn 0.3s ease-in-out;
    }
    
    .animate-slide-up {
        animation: slideUp 0.3s ease-out;
    }
    
    .animate-slide-down {
        animation: slideDown 0.3s ease-out;
    }
    
    .animate-scale-in {
        animation: scaleIn 0.2s ease-out;
    }
}

/* ========================================
   KEYFRAMES
======================================== */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

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

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

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ========================================
   DARK MODE TOGGLE ANIMATION
======================================== */
.dark-mode-toggle {
    @apply relative w-14 h-7 rounded-full bg-gray-200 dark:bg-gray-700 
           transition-colors duration-300 cursor-pointer;
}

.dark-mode-toggle::after {
    content: '';
    @apply absolute left-1 top-1 w-5 h-5 rounded-full bg-white shadow-md
           transition-transform duration-300;
}

.dark .dark-mode-toggle::after {
    @apply translate-x-7 bg-orange-500;
}

/* ========================================
   RESPONSIVE UTILITIES
======================================== */
@media (max-width: 640px) {
    .mobile-menu {
        @apply fixed inset-0 z-50 bg-white dark:bg-gray-900;
    }
    
    .mobile-nav-item {
        @apply block px-4 py-3 text-lg font-medium border-b border-gray-200 dark:border-gray-700;
    }
}

/* ========================================
   PRINT STYLES
======================================== */
@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        @apply bg-white text-black;
    }
}

/* ========================================
   RTL SUPPORT
======================================== */
[dir="rtl"] {
    .form-select {
        background-position: left 0.75rem center;
        @apply pl-10 pr-4;
    }
    
    .search-box input {
        @apply pr-12 pl-4;
    }
    
    .search-box-icon {
        @apply left-auto right-4;
    }
}

/* ========================================
   SKELETON ANIMATIONS
======================================== */
.skeleton-shimmer {
    background: linear-gradient(90deg, 
        theme('colors.gray.200') 25%, 
        theme('colors.gray.100') 50%, 
        theme('colors.gray.200') 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.dark .skeleton-shimmer {
    background: linear-gradient(90deg, 
        theme('colors.gray.700') 25%, 
        theme('colors.gray.600') 50%, 
        theme('colors.gray.700') 75%);
    background-size: 200% 100%;
}

/* ========================================
   LIVE SEARCH STYLES
======================================== */
.live-search-results {
    @apply absolute top-full left-0 right-0 mt-2 bg-white dark:bg-gray-800 
           rounded-xl shadow-2xl border border-gray-200 dark:border-gray-700 
           max-h-96 overflow-y-auto z-50;
}

.live-search-item {
    @apply flex items-center gap-3 p-3 hover:bg-gray-50 dark:hover:bg-gray-700 
           cursor-pointer transition-colors duration-150;
}

.live-search-item:first-child {
    @apply rounded-t-xl;
}

.live-search-item:last-child {
    @apply rounded-b-xl;
}

/* ========================================
   CART BADGE
======================================== */
.cart-badge {
    @apply absolute -top-1 -right-1 w-5 h-5 flex items-center justify-center 
           bg-red-500 text-white text-xs font-bold rounded-full;
}

/* ========================================
   BOOKING STATUS BADGES
======================================== */
.status-confirmed {
    @apply badge bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400;
}

.status-pending {
    @apply badge bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400;
}

.status-cancelled {
    @apply badge bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400;
}

.status-completed {
    @apply badge bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400;
}

/* ========================================
   CUSTOM 5 COLUMN GRID
======================================== */
.grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (min-width: 640px) {
    .sm\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .md\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .xl\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}