/* Tailwind CSS Custom Styles for IT Sirius */

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
        --background: 0 0% 100%;
        --foreground: 240 10% 10%;
        --card: 0 0% 100%;
        --card-foreground: 240 10% 10%;
        --popover: 0 0% 100%;
        --popover-foreground: 240 10% 10%;
        --primary: 240 30% 14%;
        --primary-foreground: 0 0% 100%;
        --secondary: 240 5% 96%;
        --secondary-foreground: 240 10% 10%;
        --muted: 240 5% 96%;
        --muted-foreground: 240 4% 46%;
        --accent: 350 80% 59%;
        --accent-foreground: 0 0% 100%;
        --destructive: 0 84% 60%;
        --destructive-foreground: 0 0% 100%;
        --border: 240 6% 90%;
        --input: 240 6% 90%;
        --ring: 350 80% 59%;
        --radius: 0.75rem;
    }

    .dark {
        --background: 240 20% 6%;
        --foreground: 0 0% 100%;
        --card: 240 20% 8%;
        --card-foreground: 0 0% 100%;
        --popover: 240 20% 8%;
        --popover-foreground: 0 0% 100%;
        --primary: 0 0% 100%;
        --primary-foreground: 240 30% 14%;
        --secondary: 240 10% 15%;
        --secondary-foreground: 0 0% 100%;
        --muted: 240 10% 15%;
        --muted-foreground: 240 5% 65%;
        --accent: 350 80% 59%;
        --accent-foreground: 0 0% 100%;
        --destructive: 0 62% 30%;
        --destructive-foreground: 0 0% 100%;
        --border: 240 10% 20%;
        --input: 240 10% 20%;
        --ring: 350 80% 59%;
    }

    * {
        @apply border-border;
    }

    body {
        @apply bg-page-bg text-foreground antialiased;
        font-feature-settings: "rlig" 1, "calt" 1;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        @apply font-heading font-bold tracking-tight;
    }
}

/* Корпоративные компоненты согласно брендбуку */
@layer components {

    /* Контейнер - 1280px с центрированием и адаптивными отступами */
    .section-container {
        @apply max-w-container mx-auto px-4 md:px-6 lg:px-8;
    }

    /* Кнопки */
    .btn {
        @apply inline-flex items-center justify-center rounded-xl font-semibold transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2;
    }

    .btn-primary {
        @apply bg-brand-red hover:bg-brand-red/90 text-white px-8 py-3 shadow-lg hover:shadow-xl focus:ring-brand-red;
    }

    .btn-secondary {
        @apply bg-white/10 hover:bg-white/20 text-foreground border border-border px-8 py-3;
    }

    .btn-outline {
        @apply border-2 border-border hover:border-brand-red hover:text-brand-red bg-transparent px-8 py-3;
    }

    /* Карточки продуктов - согласно брендбуку с адаптивным padding */
    .card-sirius {
        @apply bg-card-bg rounded-3xl p-5 md:p-6 lg:p-8 shadow-lg hover:shadow-xl transition-all duration-300 border-t-4;
    }

    .card-hover {
        @apply transform hover:-translate-y-1 transition-all duration-300;
    }

    /* Категории карточек */
    .card-category-crm {
        @apply border-t-category-crm;
    }

    .card-category-document {
        @apply border-t-category-document;
    }

    .card-category-erp {
        @apply border-t-category-erp;
    }

    .card-category-trade {
        @apply border-t-category-trade;
    }

    /* Заголовки карточек */
    .card-title {
        @apply text-brand-blue text-2xl font-bold mb-3;
    }

    /* Ссылки "Подробнее" */
    .link-more {
        @apply text-brand-red font-semibold inline-flex items-center gap-2 hover:gap-3 transition-all;
    }

    /* Поля ввода */
    .input-field {
        @apply w-full px-4 py-3 rounded-xl border border-border bg-white focus:border-brand-red focus:ring-2 focus:ring-brand-red/20 transition-all;
    }

    /* Сетка карточек с адаптивным gap */
    .cards-grid {
        @apply grid gap-4 md:gap-6 lg:gap-8;
    }
}

/* Prose Override for CMS Content */
.prose {
    @apply max-w-none text-muted-foreground leading-relaxed;
}

.prose h2 {
    @apply text-section-title font-heading text-brand-orange mt-12 mb-6;
}

.prose h3 {
    @apply text-2xl font-heading font-bold mt-8 mb-4 text-brand-blue;
}

.prose p {
    @apply mb-6 text-lg;
}

.prose a {
    @apply text-brand-red hover:text-brand-red/80 font-medium no-underline border-b border-transparent hover:border-brand-red transition-all;
}

.prose ul {
    @apply list-disc pl-6 mb-6 space-y-3 marker:text-brand-red;
}

.prose img {
    @apply rounded-3xl shadow-lg my-8 w-full;
}

.prose blockquote {
    @apply border-l-4 border-brand-red pl-6 py-2 bg-muted rounded-r-xl italic text-foreground my-8 shadow-sm;
}
/* Product Quiz Styles */
.quiz-option {
    @apply flex flex-col items-center justify-center p-6 rounded-2xl border-2 border-gray-200 bg-white transition-all duration-200 hover:border-brand-orange hover:shadow-lg cursor-pointer;
}

.quiz-option.selected {
    @apply border-brand-orange bg-gradient-to-br from-brand-orange/10 to-brand-red/10 shadow-lg;
}

.quiz-option:hover {
    @apply transform -translate-y-1;
}

/* Comparison Table Styles */
.comparison-table {
    @apply w-full border-collapse rounded-2xl overflow-hidden shadow-xl;
}

.comparison-table th {
    @apply bg-gradient-to-br from-brand-blue to-brand-blue/80 text-white p-4 font-heading font-bold text-lg;
}

.comparison-table td {
    @apply p-4 border-b border-gray-200;
}

.comparison-table tr:hover {
    @apply bg-gray-50;
}

.comparison-table .popular-badge {
    @apply inline-block bg-brand-orange text-white text-xs font-bold px-3 py-1 rounded-full mb-2;
}

.comparison-table .check-icon {
    @apply text-green-500 text-2xl;
}

.comparison-table .cross-icon {
    @apply text-gray-300 text-2xl;
}

/* Version Cards */
.version-card {
    @apply bg-white rounded-2xl p-6 border-2 border-gray-200 transition-all duration-300 hover:shadow-2xl hover:border-brand-orange;
}

.version-card.popular {
    @apply border-brand-orange shadow-xl relative;
}

.version-card.popular::before {
    content: 'Популярный';
    @apply absolute -top-3 left-1/2 transform -translate-x-1/2 bg-brand-orange text-white text-xs font-bold px-4 py-1 rounded-full;
}