/* Дополнительные стили, которые не покрываются Tailwind */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    body {
        @apply font-inter bg-white dark:bg-dark transition-colors duration-200;
    }
    h1, h2, h3, h4, h5, h6 {
        @apply font-manrope;
    }
}

/* Стили для темной темы */
.dark header {
    @apply bg-gray-800 border-gray-700;
}

.dark nav a {
    @apply text-gray-200 hover:text-primary;
}

.dark .bg-white {
    @apply bg-gray-800;
}

.dark .text-gray-700 {
    @apply text-gray-200;
}

.custom-container {
    @apply container mx-auto px-4;
} 

/* Плавная прокрутка и отступ для якорных ссылок */
html {
    scroll-behavior: smooth;
}

html :target {
    scroll-margin-top: 80px;
}

/* Стили для технологического слайдера */
.tech-slider {
    position: relative;
}

.tech-slider::before,
.tech-slider::after {
    content: '';
    position: absolute;
    top: 0;
    width: 100px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.tech-slider::before {
    left: 0;
    background: linear-gradient(to right, #ffffff, transparent);
}

.tech-slider::after {
    right: 0;
    background: linear-gradient(to left, #ffffff, transparent);
}

.dark .tech-slider::before {
    background: linear-gradient(to right, #333333, transparent);
}

.dark .tech-slider::after {
    background: linear-gradient(to left, #333333, transparent);
}

.tech-slider .swiper-slide {
    width: auto;
}

/* Стили для сервисных карточек */
.service-card {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    height: 100%;
}

.service-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(to left, var(--hover-color), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

.service-card:hover::after {
    opacity: 0.1;
}

.service-card > * {
    position: relative;
    z-index: 2;
}

/* Стили для карточек портфолио */
.portfolio-slider .swiper-slide {
    height: auto;
}

.portfolio-slider .swiper-slide > div {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Обновляем стили для карточек портфолио */
.portfolio-slider .swiper-slide .bg-white {
    @apply border border-gray-200 dark:border-[#757575];
}

.portfolio-slider .swiper-slide .p-6 {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.portfolio-slider .swiper-slide .p-6 p {
    flex: 1;
}

/* Контейнер для кнопок навигации */
#portfolio .flex.gap-4 {
    justify-content: flex-end;
    margin-bottom: 1.5rem;
}

/* Стили для кнопок навигации */
.portfolio-prev-btn,
.portfolio-next-btn {
    @apply p-3 rounded-full transition-all duration-200;
    background-color: #f3f4f6;
}

/* Стили для тёмной темы */
.dark .portfolio-prev-btn,
.dark .portfolio-next-btn {
    background-color: #757575;
}

.dark .portfolio-prev-btn svg,
.dark .portfolio-next-btn svg {
    @apply text-yellow-400;
}

/* Ховер эффекты */
.portfolio-prev-btn:hover,
.portfolio-next-btn:hover {
    @apply bg-gray-200;
}

.dark .portfolio-prev-btn:hover,
.dark .portfolio-next-btn:hover {
    background-color: #858585;
}

/* Стили для кнопок и ссылок */
.portfolio-prev-btn,
.portfolio-next-btn {
    @apply text-gray-800 dark:text-white transition-all duration-200;
}

.portfolio-prev-btn:hover,
.portfolio-next-btn:hover {
    @apply bg-black text-white dark:bg-white dark:text-black;
}

/* Стили для изображений в карточках портфолио */
.portfolio-slider .swiper-slide .image-container {
    @apply relative overflow-hidden;
    height: 280px;
}

.portfolio-slider .swiper-slide img {
    @apply w-full h-full object-cover;
    object-position: top;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.portfolio-slider .swiper-slide:hover img {
    transform: scale(1.05);
}

/* Добавляем затемнение при наведении */
.portfolio-slider .swiper-slide .image-container::after {
    content: '';
    @apply absolute inset-0 bg-black/0;
    transition: background-color 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.portfolio-slider .swiper-slide:hover .image-container::after {
    @apply bg-black/10;
}

/* Стили для карточек портфолио */
.portfolio-slider .swiper-wrapper {
    cursor: grab;
}

.portfolio-slider .swiper-wrapper:active {
    cursor: grabbing;
}

/* Стили для карточек отзывов */
.review-scroll-container {
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
}

.review-scroll-container::-webkit-scrollbar {
    width: 4px;
}

.review-scroll-container::-webkit-scrollbar-track {
    background: transparent;
}

.review-scroll-container::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.5);
    border-radius: 20px;
}

/* Анимация для подсказки о скролле */
.review-scroll-container {
    position: relative;
}

.review-scroll-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.review-scroll-container.has-overflow::after {
    opacity: 1;
}

/* Стили для иконок контактов */
.contact-icon {
    width: 2rem; /* 32px */
    height: 2rem; /* 32px */
    color: #000000; /* Чёрный цвет для светлой темы */
    transition: color 0.3s ease;
}

/* Белый цвет иконок для тёмной темы */
.dark .contact-icon {
    color: #ffffff;
}

/* Стили для контейнера иконки */
.contact-icon-container {
    width: 4rem; /* 64px */
    height: 4rem; /* 64px */
}