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

:root {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.hide-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* Safe area padding for iOS devices with notch */
.pb-safe {
    padding-bottom: env(safe-area-inset-bottom, 20px);
}

/* Modal Open State Classes */
body.modal-open {
    overflow: hidden;
}

#product-modal.show {
    visibility: visible;
}

#product-modal.show #modal-backdrop {
    opacity: 1;
}

#product-modal.show #modal-content {
    transform: translateY(0);
}

/* Lang Modal Open State */
#lang-modal.show {
    visibility: visible;
}

#lang-modal.show #lang-backdrop {
    opacity: 1;
}

#lang-modal.show #lang-content {
    transform: translateY(0);
}

/* Smooth image loading */
img {
    transition: opacity 0.3s ease-in-out;
}
img[loading] {
    opacity: 0;
}
img.loaded {
    opacity: 1;
}

/* Custom shadows for premium feel */
.card-shadow {
    box-shadow: 0 8px 30px rgba(0,0,0,0.04);
}

.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}