// Import variables and mixins
@use './variables' as *;
@use './mixins' as *;
@use './mobile';

// Анимация добавления в корзину
.flying-to-cart {
    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }
    
    .flying-item-icon {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        background: $primary-color;
        border-radius: 50%;
        color: white;
    }
}

// Reset and Base Styles
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    // CSS Variables for runtime access
    --primary-color: #{$primary-color};
    --primary-dark: #{$primary-dark};
    --secondary-color: #{$secondary-color};
    --success-color: #{$success-color};
    --danger-color: #{$danger-color};
    --warning-color: #{$warning-color};
    --info-color: #{$info-color};
    --orange-color: #{$orange-color};
    --orange-dark: #{$orange-dark};
    
    --gray-50: #{$gray-50};
    --gray-100: #{$gray-100};
    --gray-200: #{$gray-200};
    --gray-300: #{$gray-300};
    --gray-400: #{$gray-400};
    --gray-500: #{$gray-500};
    --gray-600: #{$gray-600};
    --gray-700: #{$gray-700};
    --gray-800: #{$gray-800};
    --gray-900: #{$gray-900};
    
    --spacing-xs: #{$spacing-xs};
    --spacing-sm: #{$spacing-sm};
    --spacing-md: #{$spacing-md};
    --spacing-lg: #{$spacing-lg};
    --spacing-xl: #{$spacing-xl};
    --spacing-2xl: #{$spacing-2xl};
    --spacing-3xl: #{$spacing-3xl};
    
    --font-size-xs: #{$font-size-xs};
    --font-size-sm: #{$font-size-sm};
    --font-size-base: #{$font-size-base};
    --font-size-lg: #{$font-size-lg};
    --font-size-xl: #{$font-size-xl};
    --font-size-2xl: #{$font-size-2xl};
    --font-size-3xl: #{$font-size-3xl};
    --font-size-4xl: #{$font-size-4xl};
    
    --breakpoint-sm: #{$breakpoint-sm};
    --breakpoint-md: #{$breakpoint-md};
    --breakpoint-lg: #{$breakpoint-lg};
    --breakpoint-xl: #{$breakpoint-xl};
    --breakpoint-2xl: #{$breakpoint-2xl};
    
    --shadow-sm: #{$shadow-sm};
    --shadow-md: #{$shadow-md};
    --shadow-lg: #{$shadow-lg};
    --shadow-xl: #{$shadow-xl};
    
    --radius-sm: #{$radius-sm};
    --radius-md: #{$radius-md};
    --radius-lg: #{$radius-lg};
    --radius-xl: #{$radius-xl};
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
::-webkit-scrollbar-track {
    background: white;
}
::-webkit-scrollbar-thumb {
    background: $primary-color;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: $primary-dark; 
}
.change::-webkit-input-placeholder {
    color: $gray-400;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: $gray-900;
    background-color: $gray-50;
    font-size: $font-size-base;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#app {
    min-height: 100vh;
}

// Container
.container {
    width: 100%;
    margin: 0 auto;
    padding: 0 $spacing-md;
    
    @include respond-to(sm) {
        max-width: 540px;
    }
    
    @include respond-to(md) {
        max-width: 720px;
        padding: 0 $spacing-lg;
    }
    
    @include respond-to(lg) {
        max-width: 960px;
    }
    
    @include respond-to(xl) {
        max-width: 1140px;
    }
    
    @include respond-to(2xl) {
        max-width: 1320px;
    }
}

// Typography
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: $spacing-md;
}

h1 { font-size: $font-size-4xl; }
h2 { font-size: $font-size-3xl; }
h3 { font-size: $font-size-2xl; }
h4 { font-size: $font-size-xl; }
h5 { font-size: $font-size-lg; }
h6 { font-size: $font-size-base; }

@include respond-to(mobile) {
    h1 { font-size: $font-size-3xl; }
    h2 { font-size: $font-size-2xl; }
    h3 { font-size: $font-size-xl; }
}

p {
    margin-bottom: $spacing-md;
}

// Buttons
.btn {
    display: inline-block;
    padding: $spacing-sm $spacing-lg;
    border: none;
    border-radius: $radius-md;
    font-size: $font-size-base;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    @include transition(all, 0.3s);
    line-height: 1.5;
    
    &-primary {
        background-color: $primary-color;
        color: white;
        
        &:hover:not(:disabled) {
            background-color: $primary-dark;
            transform: translateY(-2px);
            box-shadow: $shadow-md;
        }
    }
    
    &-outline {
        background-color: transparent;
        border: 2px solid $primary-color;
        color: $primary-color;
        
        &:hover:not(:disabled) {
            background-color: $primary-color;
            color: white;
        }
    }
    
    &-sm {
        padding: $spacing-xs $spacing-md;
        font-size: $font-size-sm;
    }
    
    &-lg {
        padding: $spacing-md $spacing-xl;
        font-size: $font-size-lg;
    }
    
    &:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }
}

// Forms
input, textarea, select {
    width: 100%;
    padding: $spacing-sm $spacing-md;
    border: 1px solid $gray-300;
    border-radius: $radius-md;
    font-size: $font-size-base;
    @include transition(border-color, 0.3s);
    
    &:focus {
        outline: none;
        border-color: $primary-color;
        box-shadow: 0 0 0 3px rgba(125, 32, 51, 0.1);
    }
}

label {
    display: block;
    margin-bottom: $spacing-xs;
    font-weight: 500;
    font-size: $font-size-sm;
}

// Cards
.card {
    background: white;
    border-radius: $radius-lg;
    box-shadow: $shadow-sm;
    padding: $spacing-lg;
    @include transition(box-shadow, 0.3s);
    
    &:hover {
        box-shadow: $shadow-md;
    }
}

// Utilities
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-1 { margin-top: $spacing-sm; }
.mt-2 { margin-top: $spacing-md; }
.mt-3 { margin-top: $spacing-lg; }
.mt-4 { margin-top: $spacing-xl; }

.mb-1 { margin-bottom: $spacing-sm; }
.mb-2 { margin-bottom: $spacing-md; }
.mb-3 { margin-bottom: $spacing-lg; }
.mb-4 { margin-bottom: $spacing-xl; }

.p-1 { padding: $spacing-sm; }
.p-2 { padding: $spacing-md; }
.p-3 { padding: $spacing-lg; }
.p-4 { padding: $spacing-xl; }

// Grid System
.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 calc(-1 * #{$spacing-md});
}

.col {
    flex: 1;
    padding: 0 $spacing-md;
    
    @include respond-to(mobile) {
        flex: 0 0 100%;
        margin-bottom: $spacing-md;
    }
}

// Loading
.loading {
    @include flex-center;
    padding: $spacing-3xl;
    font-size: $font-size-lg;
    color: $gray-500;
}

// Error
.error {
    color: $danger-color;
    font-size: $font-size-sm;
    margin-top: $spacing-sm;
}

// Mobile Menu Toggle
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: $font-size-2xl;
    cursor: pointer;
    padding: $spacing-sm;
    min-width: 44px;
    min-height: 44px;
    
    @include respond-to(mobile) {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}