/* ================================
   Bundly Custom Styles
   Complements Tailwind CSS
   ================================ */

/* CSS Custom Properties */
:root {
    --primary-50: #eff6ff;
    --primary-100: #dbeafe;
    --primary-200: #bfdbfe;
    --primary-300: #93c5fd;
    --primary-400: #60a5fa;
    --primary-500: #3b82f6;
    --primary-600: #2563eb;
    --primary-700: #1d4ed8;
    --primary-800: #1e40af;
    --primary-900: #1e3a8a;
    
    --accent-50: #f0fdf4;
    --accent-100: #dcfce7;
    --accent-200: #bbf7d0;
    --accent-300: #86efac;
    --accent-400: #4ade80;
    --accent-500: #22c55e;
    --accent-600: #16a34a;
    --accent-700: #15803d;
    --accent-800: #166534;
    --accent-900: #14532d;
}

/* Custom Animations */
@keyframes slide-in {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounce-subtle {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

@keyframes pulse-soft {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

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

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

.animate-fade-in-up {
    animation: fade-in-up 0.4s ease-out;
}

.animate-bounce-subtle {
    animation: bounce-subtle 2s ease-in-out infinite;
}

.animate-pulse-soft {
    animation: pulse-soft 2s ease-in-out infinite;
}

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

/* Focus States */
*:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}

/* Selection */
::selection {
    background-color: var(--primary-100);
    color: var(--primary-900);
}

/* 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;
}

/* Form Styles */
.form-input {
    @apply w-full px-4 py-3 border border-gray-200 rounded-xl text-gray-900 placeholder-gray-400 
           focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent 
           transition-all duration-200;
}

.form-label {
    @apply block text-sm font-medium text-gray-700 mb-2;
}

.form-error {
    @apply text-sm text-red-600 mt-1;
}

/* Button Variants */
.btn-primary {
    @apply inline-flex items-center justify-center gap-2 px-6 py-3 bg-primary-600 text-white 
           font-semibold rounded-xl shadow-sm hover:bg-primary-700 hover:shadow-md 
           focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 
           transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed;
}

.btn-secondary {
    @apply inline-flex items-center justify-center gap-2 px-6 py-3 bg-gray-100 text-gray-700 
           font-semibold rounded-xl hover:bg-gray-200 focus:outline-none focus:ring-2 
           focus:ring-gray-400 focus:ring-offset-2 transition-all duration-200 
           disabled:opacity-50 disabled:cursor-not-allowed;
}

.btn-outline {
    @apply inline-flex items-center justify-center gap-2 px-6 py-3 border-2 border-primary-600 
           text-primary-600 font-semibold rounded-xl hover:bg-primary-50 focus:outline-none 
           focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 transition-all duration-200 
           disabled:opacity-50 disabled:cursor-not-allowed;
}

.btn-ghost {
    @apply inline-flex items-center justify-center gap-2 px-4 py-2 text-gray-600 font-medium 
           rounded-lg hover:bg-gray-100 hover:text-gray-900 focus:outline-none 
           focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 transition-all duration-200;
}

.btn-sm {
    @apply px-4 py-2 text-sm;
}

.btn-lg {
    @apply px-8 py-4 text-lg;
}

/* Card Styles */
.card {
    @apply bg-white rounded-2xl border border-gray-100 shadow-sm hover:shadow-lg 
           transition-all duration-300;
}

.card-body {
    @apply p-6;
}

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

.badge-primary {
    @apply bg-primary-100 text-primary-700;
}

.badge-success {
    @apply bg-accent-100 text-accent-700;
}

.badge-warning {
    @apply bg-amber-100 text-amber-700;
}

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

.badge-gray {
    @apply bg-gray-100 text-gray-700;
}

/* Alert Styles */
.alert {
    @apply p-4 rounded-xl border flex items-start gap-3;
}

.alert-success {
    @apply bg-accent-50 border-accent-200 text-accent-800;
}

.alert-error {
    @apply bg-red-50 border-red-200 text-red-800;
}

.alert-warning {
    @apply bg-amber-50 border-amber-200 text-amber-800;
}

.alert-info {
    @apply bg-blue-50 border-blue-200 text-blue-800;
}

/* Loading Spinner */
.spinner {
    @apply animate-spin h-5 w-5 border-2 border-current border-t-transparent rounded-full;
}

.spinner-sm {
    @apply h-4 w-4;
}

.spinner-lg {
    @apply h-8 w-8;
}

/* Skeleton Loading */
.skeleton {
    @apply animate-pulse bg-gray-200 rounded;
}

/* Progress Bar */
.progress {
    @apply w-full bg-gray-100 rounded-full h-2 overflow-hidden;
}

.progress-bar {
    @apply h-full rounded-full bg-gradient-to-r from-primary-500 to-primary-400 transition-all duration-500;
}

/* Table Styles */
.table-container {
    @apply overflow-x-auto rounded-xl border border-gray-200;
}

.table {
    @apply min-w-full divide-y divide-gray-200;
}

.table th {
    @apply px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider bg-gray-50;
}

.table td {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900;
}

.table tbody tr {
    @apply hover:bg-gray-50 transition-colors;
}

/* Modal */
.modal-overlay {
    @apply fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4;
}

.modal-content {
    @apply bg-white rounded-2xl shadow-xl max-w-lg w-full max-h-[90vh] overflow-y-auto;
}

.modal-header {
    @apply px-6 py-4 border-b border-gray-100;
}

.modal-body {
    @apply px-6 py-4;
}

.modal-footer {
    @apply px-6 py-4 border-t border-gray-100 flex justify-end gap-3;
}

/* Dropdown */
.dropdown {
    @apply relative inline-block;
}

.dropdown-menu {
    @apply absolute right-0 mt-2 w-48 bg-white rounded-xl shadow-lg border border-gray-100 
           py-1 z-50 opacity-0 invisible transition-all duration-200 transform scale-95;
}

.dropdown.open .dropdown-menu {
    @apply opacity-100 visible scale-100;
}

.dropdown-item {
    @apply block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-gray-900 
           transition-colors cursor-pointer;
}

/* Tooltip */
.tooltip {
    @apply absolute z-50 px-2 py-1 text-xs font-medium text-white bg-gray-900 rounded-md 
           whitespace-nowrap opacity-0 invisible transition-all duration-200;
}

/* Avatar */
.avatar {
    @apply inline-flex items-center justify-center rounded-full bg-gray-100 font-semibold text-gray-600;
}

.avatar-sm {
    @apply w-8 h-8 text-xs;
}

.avatar-md {
    @apply w-10 h-10 text-sm;
}

.avatar-lg {
    @apply w-12 h-12 text-base;
}

.avatar-xl {
    @apply w-16 h-16 text-lg;
}

/* Empty State */
.empty-state {
    @apply text-center py-12;
}

.empty-state-icon {
    @apply w-16 h-16 mx-auto text-gray-300 mb-4;
}

.empty-state-title {
    @apply text-lg font-semibold text-gray-900 mb-2;
}

.empty-state-description {
    @apply text-gray-500 mb-6 max-w-sm mx-auto;
}

/* Page Header */
.page-header {
    @apply mb-8;
}

.page-title {
    @apply text-2xl font-bold text-gray-900 mb-2;
}

.page-description {
    @apply text-gray-600;
}

/* Breadcrumb */
.breadcrumb {
    @apply flex items-center gap-2 text-sm;
}

.breadcrumb-item {
    @apply text-gray-500;
}

.breadcrumb-item.active {
    @apply text-gray-900 font-medium;
}

.breadcrumb-separator {
    @apply text-gray-300;
}

/* Tab Navigation */
.tabs {
    @apply flex gap-1 border-b border-gray-200 mb-6;
}

.tab {
    @apply px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700 
           border-b-2 border-transparent hover:border-gray-300 transition-all -mb-px;
}

.tab.active {
    @apply text-primary-600 border-primary-600;
}

/* Stat Card */
.stat-card {
    @apply bg-white rounded-xl border border-gray-100 p-6;
}

.stat-value {
    @apply text-2xl font-bold text-gray-900;
}

.stat-label {
    @apply text-sm text-gray-500 mt-1;
}

.stat-change {
    @apply text-xs font-medium mt-2;
}

.stat-change.positive {
    @apply text-accent-600;
}

.stat-change.negative {
    @apply text-red-600;
}

/* Countdown Timer */
.countdown {
    @apply flex items-center gap-2;
}

.countdown-item {
    @apply text-center;
}

.countdown-value {
    @apply text-2xl font-bold text-gray-900;
}

.countdown-label {
    @apply text-xs text-gray-500 uppercase;
}

/* ===== Order Show Page ===== */
.order-tracker {
    padding: 6px 4px 2px;
}

.order-tracker .flex > div:not(.flex-1) {
    position: relative;
    z-index: 1;
}

/* Responsive Utilities */
@media (max-width: 640px) {
    .hide-mobile {
        display: none !important;
    }
}

@media (min-width: 641px) {
    .show-mobile-only {
        display: none !important;
    }
}