/* 
  Mobile App Specific CSS 
  - Overides default browser behaviors to make it feel like an iOS/Android Native App
*/

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap');

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    /* Disable bounce scroll effect and tap highlights for native app feel */
    overscroll-behavior-y: none;
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: #141518; /* Deep Slate Gray for luxury contrast */
}

/* Custom fonts setup */
.font-serif {
    font-family: 'Playfair Display', serif;
}
.font-arabic {
    font-family: 'Cairo', sans-serif;
}

/* Ensure LTR directions render correctly inside Arabic layout */
.dir-ltr {
    direction: ltr;
}

/* 
  Safe Area handles notch/home indicators on iPhones
  padding-bottom-safe makes sure bottom navbar doesn't clash with iOS home bar
*/
.pb-safe {
    padding-bottom: env(safe-area-inset-bottom, 16px);
}

/* 
  Hide Scrollbars for horizontal native-like scroll containers 
*/
.hide-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.hide-scrollbar::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}

/* Helper for truncating text */
.text-line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}
.text-line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}

/* Animation for progress bar shine */
@keyframes shine {
    0% { transform: translateX(-100%) skewX(12deg); }
    100% { transform: translateX(300%) skewX(12deg); }
}

.shadow-shine {
    animation: shine 3s infinite ease-in-out;
}

@keyframes marquee-rtl {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(0); }
}
.animate-marquee {
    animation: marquee-rtl 35s linear infinite;
}
@keyframes marquee-ltr {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}
.animate-marquee-reverse {
    animation: marquee-ltr 30s linear infinite;
}
.pause-animation {
    animation-play-state: paused;
}