/* K-MedicalTour Custom Styles */

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

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

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

::-webkit-scrollbar-thumb {
    background: #00c4cc;
    border-radius: 5px;
}

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

/* Card utility class */
.card {
    @apply bg-white rounded-xl shadow-md;
}

.card:hover {
    @apply shadow-lg;
    transition: box-shadow 0.3s ease;
}

/* Button utilities */
.btn {
    @apply font-semibold rounded-lg transition-all duration-200 inline-flex items-center justify-center;
}

.btn-primary {
    @apply bg-teal-500 text-white hover:bg-teal-600 shadow-md hover:shadow-lg;
}

.btn-secondary {
    @apply bg-blue-600 text-white hover:bg-blue-700 shadow-md;
}

.btn-ghost {
    @apply bg-slate-600 text-white hover:bg-slate-700;
}

.btn-sm {
    @apply px-3 py-1.5 text-sm;
}

.btn-md {
    @apply px-5 py-2.5 text-base;
}

.btn-lg {
    @apply px-6 py-3 text-lg;
}

/* Hide scrollbar for horizontal scroll containers */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

    to {
        transform: translateX(0);
    }
}

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

/* Line clamp utilities */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Gradient backgrounds */
.bg-gradient-blue {
    background: linear-gradient(135deg, #0056b3 0%, #003d82 100%);
}

.bg-gradient-teal {
    background: linear-gradient(135deg, #00c4cc 0%, #009999 100%);
}

/* Hover lift effect */
.hover-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* Status badges */
.badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold;
}

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

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

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

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

/* Loading spinner */
.spinner {
    border: 3px solid rgba(0, 196, 204, 0.1);
    border-radius: 50%;
    border-top: 3px solid #00c4cc;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

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

    100% {
        transform: rotate(360deg);
    }
}

/* Focus visible for accessibility */
.focus-visible:focus {
    outline: 2px solid #00c4cc;
    outline-offset: 2px;
}