/* ==========================================================================
   E-YARMARKA - TAILWIND CSS + SHADCN/UI DİZAYN SİSTEMİ
   ========================================================================== */

/* 
   Bu fayl Tailwind CSS CDN ilə birlikdə istifadə olunur.
   shadcn/ui dizayn prinsipləri tətbiq edilib.
*/

/* === SHADCN/UI RƏNG PALETİ (CSS Variables) === */
@layer base {
    :root {
        /* Background */
        --background: 0 0% 100%;
        --foreground: 222.2 84% 4.9%;

        /* Card */
        --card: 0 0% 100%;
        --card-foreground: 222.2 84% 4.9%;

        /* Popover */
        --popover: 0 0% 100%;
        --popover-foreground: 222.2 84% 4.9%;

        /* Primary */
        --primary: 222.2 47.4% 11.2%;
        --primary-foreground: 210 40% 98%;

        /* Secondary */
        --secondary: 210 40% 96.1%;
        --secondary-foreground: 222.2 47.4% 11.2%;

        /* Muted */
        --muted: 210 40% 96.1%;
        --muted-foreground: 215.4 16.3% 46.9%;

        /* Accent */
        --accent: 210 40% 96.1%;
        --accent-foreground: 222.2 47.4% 11.2%;

        /* Destructive */
        --destructive: 0 84.2% 60.2%;
        --destructive-foreground: 210 40% 98%;

        /* Border & Input */
        --border: 214.3 31.8% 91.4%;
        --input: 214.3 31.8% 91.4%;
        --ring: 222.2 84% 4.9%;

        /* Radius */
        --radius: 0.5rem;
    }

    .dark {
        --background: 222.2 84% 4.9%;
        --foreground: 210 40% 98%;
        --card: 222.2 84% 4.9%;
        --card-foreground: 210 40% 98%;
        --popover: 222.2 84% 4.9%;
        --popover-foreground: 210 40% 98%;
        --primary: 210 40% 98%;
        --primary-foreground: 222.2 47.4% 11.2%;
        --secondary: 217.2 32.6% 17.5%;
        --secondary-foreground: 210 40% 98%;
        --muted: 217.2 32.6% 17.5%;
        --muted-foreground: 215 20.2% 65.1%;
        --accent: 217.2 32.6% 17.5%;
        --accent-foreground: 210 40% 98%;
        --destructive: 0 62.8% 30.6%;
        --destructive-foreground: 210 40% 98%;
        --border: 217.2 32.6% 17.5%;
        --input: 217.2 32.6% 17.5%;
        --ring: 212.7 26.8% 83.9%;
    }
}

/* === BASE STİLLƏR === */
@layer base {
    * {
        border-color: hsl(var(--border));
    }

    body {
        background-color: hsl(var(--background));
        color: hsl(var(--foreground));
        font-feature-settings: "rlig" 1, "calt" 1;
    }
}

/* === CUSTOM COMPONENTS (Tailwind ilə yazılmayacaq olanlar) === */

/* Hamburger Menu Button */
.hamburger-btn {
    @apply relative flex flex-col justify-between w-[22px] h-[16px] bg-transparent border-none cursor-pointer p-3 z-[999];
    -webkit-tap-highlight-color: transparent;
}

.hamburger-btn span {
    @apply w-full h-[1.5px] bg-gray-900 block rounded-sm;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.hamburger-btn.is-active span:nth-child(1) {
    transform: translateY(7.25px) rotate(45deg);
}

.hamburger-btn.is-active span:nth-child(2) {
    @apply opacity-0 scale-x-0;
}

.hamburger-btn.is-active span:nth-child(3) {
    transform: translateY(-7.25px) rotate(-45deg);
}

/* Mega Menu Overlay - Safari Compatible */
.mega-menu-overlay {
    @apply fixed inset-0 z-[90];
    background-color: rgba(0, 0, 0, 0);
    opacity: 0;
    visibility: hidden;
    transition: background-color 0.4s ease, opacity 0.4s ease, visibility 0s linear 0.4s;
    -webkit-tap-highlight-color: transparent;
}

.mega-menu-overlay.is-active {
    opacity: 1;
    visibility: visible;
    background-color: rgba(0, 0, 0, 0.5);
    transition: background-color 0.4s ease, opacity 0.4s ease, visibility 0s linear 0s;
}

/* Mega Menu Content - Safari Compatible */
.mega-menu-content {
    @apply fixed top-0 left-0 h-full w-[88%] max-w-[360px] bg-white shadow-xl flex flex-col z-[100];
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
    -webkit-overflow-scrolling: touch;
}

.mega-menu-overlay.is-active .mega-menu-content {
    transform: translateX(0);
    -webkit-transform: translateX(0);
}

/* Menu Body - Main Container */
.menu-body {
    @apply flex flex-1 overflow-hidden;
    /* PWA Safe Area üçün height düzəlişi */
    height: calc(100vh - 64px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    max-height: calc(100vh - 64px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}

/* Menu Body scroll */
.menu-column {
    @apply overflow-y-auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    height: 100%;
}

.menu-column::-webkit-scrollbar {
    @apply w-[3px];
}

.menu-column::-webkit-scrollbar-thumb {
    @apply bg-gray-300 rounded;
}

/* Level 2 Panel Animation */
.level2-panel {
    @apply hidden;
    animation: fadeIn 0.2s ease;
}

.level2-panel.is-active {
    @apply block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Body menu open state */
body.menu-open {
    @apply overflow-hidden fixed w-full h-full;
    position: fixed;
    -webkit-overflow-scrolling: touch;
}

/* Touch target improvements for small screens */
@media (max-width: 390px) {
    .mega-menu-content {
        width: 92% !important;
        max-width: none !important;
    }

    .level1-link,
    .level3-store-link,
    .level3-link {
        min-height: 44px;
        display: flex;
        align-items: center;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    }
}

/* === SHADCN/UI BUTTON STİLLƏRİ === */
.btn {
    @apply inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
}

.btn-primary {
    @apply bg-gray-900 text-white hover:bg-gray-800;
}

.btn-secondary {
    @apply bg-gray-100 text-gray-900 hover:bg-gray-200;
}

.btn-outline {
    @apply border border-gray-200 bg-white hover:bg-gray-100 hover:text-gray-900;
}

.btn-ghost {
    @apply hover:bg-gray-100 hover:text-gray-900;
}

.btn-destructive {
    @apply bg-red-500 text-white hover:bg-red-600;
}

.btn-link {
    @apply text-gray-900 underline-offset-4 hover:underline;
}

/* Button Sizes */
.btn-sm {
    @apply h-9 rounded-md px-3;
}

.btn-md {
    @apply h-10 px-4 py-2;
}

.btn-lg {
    @apply h-11 rounded-md px-8;
}

.btn-icon {
    @apply h-10 w-10;
}

/* === SHADCN/UI CARD STİLLƏRİ === */
.card {
    @apply rounded-lg border border-gray-200 bg-white text-gray-950 shadow-sm;
}

.card-header {
    @apply flex flex-col space-y-1.5 p-6;
}

.card-title {
    @apply text-2xl font-semibold leading-none tracking-tight;
}

.card-description {
    @apply text-sm text-gray-500;
}

.card-content {
    @apply p-6 pt-0;
}

.card-footer {
    @apply flex items-center p-6 pt-0;
}

/* === SHADCN/UI INPUT STİLLƏRİ === */
.input {
    @apply flex h-10 w-full rounded-md border border-gray-200 bg-white px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
}

.textarea {
    @apply flex min-h-[80px] w-full rounded-md border border-gray-200 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
}

/* === SHADCN/UI BADGE STİLLƏRİ === */
.badge {
    @apply inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-gray-950 focus:ring-offset-2;
}

.badge-default {
    @apply border-transparent bg-gray-900 text-white hover:bg-gray-800;
}

.badge-secondary {
    @apply border-transparent bg-gray-100 text-gray-900 hover:bg-gray-200;
}

.badge-destructive {
    @apply border-transparent bg-red-500 text-white hover:bg-red-600;
}

.badge-outline {
    @apply text-gray-950;
}

/* === SHADCN/UI TABLE STİLLƏRİ === */
.table-wrapper {
    @apply w-full overflow-auto;
}

.data-table {
    @apply w-full caption-bottom text-sm;
}

.data-table thead tr {
    @apply border-b border-gray-200;
}

.data-table th {
    @apply h-12 px-4 text-left align-middle font-medium text-gray-500;
}

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

.data-table td {
    @apply p-4 align-middle;
}

/* === PRODUCT GRİD === */
.product-grid {
    @apply grid gap-4 grid-cols-2;
}

@media (min-width: 640px) {
    .product-grid {
        @apply grid-cols-2 gap-5;
    }
}

@media (min-width: 768px) {
    .product-grid {
        @apply grid-cols-3 gap-6;
    }
}

@media (min-width: 1024px) {
    .product-grid {
        @apply grid-cols-4;
    }
}

/* === PRODUCT CARD === */
.product-card {
    @apply group relative bg-white rounded-lg border border-gray-100 overflow-hidden transition-all duration-300 hover:shadow-lg hover:border-gray-200;
}

.product-card-image {
    @apply relative aspect-square overflow-hidden bg-gray-100;
}

.product-card-image img {
    @apply w-full h-full object-cover transition-transform duration-500 group-hover:scale-105;
}

.product-card-content {
    @apply p-3 sm:p-4;
}

.product-card-title {
    @apply text-sm font-medium text-gray-900 line-clamp-2 mb-2;
}

.product-card-price {
    @apply flex items-center gap-2;
}

.product-card-price .current {
    @apply text-base font-semibold text-gray-900;
}

.product-card-price .old {
    @apply text-sm text-gray-400 line-through;
}

.product-card-badge {
    @apply absolute top-2 left-2 bg-red-500 text-white text-xs font-medium px-2 py-1 rounded;
}

/* === AVATAR === */
.avatar {
    @apply relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full;
}

.avatar-image {
    @apply aspect-square h-full w-full;
}

.avatar-fallback {
    @apply flex h-full w-full items-center justify-center rounded-full bg-gray-100 text-gray-600;
}

/* === DROPDOWN MENU === */
.dropdown-menu {
    @apply z-50 min-w-[8rem] overflow-hidden rounded-md border border-gray-200 bg-white p-1 text-gray-950 shadow-md animate-in fade-in-0 zoom-in-95;
}

.dropdown-item {
    @apply relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-gray-100 focus:bg-gray-100;
}

/* === SEPARATOR === */
.separator {
    @apply shrink-0 bg-gray-200;
}

.separator-horizontal {
    @apply h-[1px] w-full;
}

.separator-vertical {
    @apply h-full w-[1px];
}

/* === SKELETON LOADING === */
.skeleton {
    @apply animate-pulse rounded-md bg-gray-200;
}

/* === TOAST / ALERT === */
.alert {
    @apply relative w-full rounded-lg border p-4;
}

.alert-default {
    @apply bg-white text-gray-950;
}

.alert-destructive {
    @apply border-red-500/50 text-red-500;
}

/* === ICON BUTTON === */
.icon-btn {
    @apply inline-flex items-center justify-center rounded-md p-2.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 transition-colors;
}

.icon-btn svg,
.icon-btn .icon {
    @apply w-5 h-5;
}

/* Cart Badge */
.cart-badge {
    @apply absolute -top-1 -right-1 h-4 w-4 bg-red-500 text-white text-[10px] font-medium rounded-full flex items-center justify-center border border-white;
}

/* === FORM ELEMENTS === */
.form-group {
    @apply space-y-2;
}

.form-label {
    @apply text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70;
}

.form-message {
    @apply text-sm font-medium text-red-500;
}

/* === SECTION STYLES === */
.section {
    @apply py-8 md:py-12;
}

.section-title {
    @apply text-xl md:text-2xl font-semibold text-gray-900 mb-6;
}

/* === CONTAINER === */
.container {
    @apply w-full mx-auto px-4 sm:px-6 lg:px-8;
    max-width: 1280px;
}

/* === HEADER === */
.main-header {
    @apply sticky top-0 z-50 w-full bg-white/95 backdrop-blur supports-[backdrop-filter]:bg-white/60 border-b border-gray-200;
}

.header-container {
    @apply flex items-center justify-between h-14 md:h-16;
}

/* === FOOTER === */
.main-footer {
    @apply bg-gray-900 text-white mt-auto;
}

.footer-grid {
    @apply grid gap-8 py-12;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.footer-title {
    @apply font-semibold text-lg mb-4;
}

.footer-link {
    @apply text-gray-400 hover:text-white transition-colors text-sm;
}

/* === SIDEBAR (Account/Seller) === */
.sidebar {
    @apply w-full md:w-64 lg:w-72 flex-shrink-0;
}

.sidebar-nav {
    @apply bg-white rounded-lg border border-gray-200 overflow-hidden;
}

.sidebar-item {
    @apply flex items-center gap-3 px-4 py-3 text-sm text-gray-600 hover:bg-gray-50 border-b border-gray-100 last:border-b-0 transition-colors;
}

.sidebar-item.active {
    @apply bg-gray-50 text-gray-900 font-medium;
}

/* === PAGE HEADER === */
.page-header {
    @apply flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6;
}

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

.page-actions {
    @apply flex flex-wrap gap-2;
}

/* === EMPTY STATE === */
.empty-state {
    @apply flex flex-col items-center justify-center py-12 text-center;
}

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

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

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

/* === BREADCRUMB === */
.breadcrumb {
    @apply flex items-center gap-2 text-sm text-gray-500;
}

.breadcrumb-item {
    @apply hover:text-gray-900 transition-colors;
}

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

/* === TABS === */
.tabs-list {
    @apply inline-flex h-10 items-center justify-center rounded-md bg-gray-100 p-1 text-gray-500;
}

.tabs-trigger {
    @apply inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-white transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
}

.tabs-trigger.active {
    @apply bg-white text-gray-950 shadow-sm;
}

/* === DIALOG / MODAL === */
.dialog-overlay {
    @apply fixed inset-0 z-50 bg-black/80;
}

.dialog-content {
    @apply fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-gray-200 bg-white p-6 shadow-lg duration-200 sm:rounded-lg;
}

.dialog-header {
    @apply flex flex-col space-y-1.5 text-center sm:text-left;
}

.dialog-footer {
    @apply flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2;
}

.dialog-title {
    @apply text-lg font-semibold leading-none tracking-tight;
}

.dialog-description {
    @apply text-sm text-gray-500;
}

/* === SCROLL AREA === */
.scroll-area {
    @apply relative overflow-hidden;
}

.scroll-area-viewport {
    @apply h-full w-full rounded-[inherit];
}

/* === ASPECT RATIO === */
.aspect-square {
    aspect-ratio: 1 / 1;
}

.aspect-video {
    aspect-ratio: 16 / 9;
}

/* === UTILITIES === */
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.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;
}

/* Hide scrollbar but keep functionality */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* === ANIMATIONS === */
@keyframes slideInFromLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }

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

@keyframes slideInFromRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

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

@keyframes slideInFromBottom {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

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

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

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

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

/* === RESPONSIVE HIDDEN === */
.hidden-mobile {
    @apply hidden md:block;
}

.hidden-desktop {
    @apply block md:hidden;
}