/* Compiled app.css (no Tailwind imports here). Tailwind is provided via Vite build or CDN in layout. */

/* CSS Reset and Universal Styles */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "DINNextLTArabic-Regular", "Cairo", sans-serif;
    direction: rtl;
    background-color: #ffffff;
    color: #333333;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Remove default styling */
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-weight: inherit;
}

p {
    margin: 0;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
}

/* Arabic Font Definitions */
@font-face {
    font-family: "DINNextLTArabic-Regular";
    src: url("../webfont/ArbFONTS-DINNextLTArabic-Regular-2.ttf")
        format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "DINNextLTArabic-Bold";
    src: url("../webfont/ArbFONTS-DINNextLTArabic-Bold-2.ttf")
        format("truetype");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "DINNextLTArabic-Medium";
    src: url("../webfont/ArbFONTS-DINNextLTArabic-Medium-2.ttf")
        format("truetype");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "DINNextLTArabic-Light";
    src: url("../webfont/ArbFONTS-DINNEXTLTARABIC-LIGHT-1.ttf")
        format("truetype");
    font-weight: 300;
    font-style: normal;
}

/* Font Classes */
.arabic-font {
    font-family: "DINNextLTArabic-Regular", "Cairo", sans-serif;
}

.arabic-font-bold {
    font-family: "DINNextLTArabic-Bold", "Cairo", sans-serif;
}

.arabic-font-medium {
    font-family: "DINNextLTArabic-Medium", "Cairo", sans-serif;
}

.arabic-font-light {
    font-family: "DINNextLTArabic-Light", "Cairo", sans-serif;
}

.hero-img {
    background-image: url("../imgs/pic/img10.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero-sec-img {
    background-image: url("../imgs/pic/back.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    animation: slowScroll 400s linear infinite;
}

@keyframes slowScroll {
    0% {
        background-position: center top;
    }
    50% {
        background-position: center bottom;
    }
    100% {
        background-position: center top;
    }
}

.mobile-menu {
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out;
    opacity: 0;
    visibility: hidden;
}

.mobile-menu.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.gradient-primary {
    background: linear-gradient(135deg, #6161ab 0%, #9b4f9f 100%);
}

.shadow-custom {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.transition-all {
    transition: all 0.3s ease;
}

.rtl-layout {
    direction: rtl;
    text-align: right;
}

@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    body {
        font-size: 15px;
    }
}

@media (min-width: 1025px) {
    body {
        font-size: 16px;
    }
}

/* Glass effect for header */
.glass-header {
    background: rgba(20, 22, 64, 0.55);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(8.8px);
    -webkit-backdrop-filter: blur(8.8px);
    transition: 0.3s;
}

.glass-header:hover {
    background: rgba(20, 22, 64);
    backdrop-filter: blur(0px);
}

/* Inner shadow for elements */
.inner-shadow {
    box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.3),
        inset 0px 11px 8px rgba(0, 0, 0, 0.2),
        inset 1px 1px 0px rgba(0, 0, 0, 0.15),
        inset 2px 6px 4px rgba(0, 0, 0, 0.15);
}

/* Inverted border-radius for bottom corners */
.inverted-bottom-corners {
    position: relative;
    overflow: visible;
}

.inverted-bottom-corners::before {
    content: "";
    position: absolute;
    bottom: -10px;
    left: -10px;
    width: 20px;
    height: 20px;
    background: transparent;
    border-radius: 0 10px 0 0;
    box-shadow: 0 -10px 0 0 white;
}

.inverted-bottom-corners::after {
    content: "";
    position: absolute;
    bottom: -10px;
    right: -10px;
    width: 20px;
    height: 20px;
    background: transparent;
    border-radius: 10px 0 0 0;
    box-shadow: -10px -10px 0 0 white;
}

/* (AOS used for animations now) */

/* Categories hover effects */
.categories-section .group:hover .drop-shadow-lg {
    filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.15));
}

/* Hide scrollbar for auction cards on mobile */
.scrollbar-hide {
    -ms-overflow-style: none;
    /* Internet Explorer 10+ */
    scrollbar-width: none;
    /* Firefox */
}

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

/* Smooth scroll behavior */
.scrollbar-hide {
    scroll-behavior: smooth;
}

/* Custom animation for pulse effect */
@keyframes pulse {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Scroll snap utilities */
.snap-x-mandatory {
    scroll-snap-type: x mandatory;
}

.snap-start {
    scroll-snap-align: start;
}