/* custom.css */

/* Definicja kolorów marki jako zmienne CSS */
:root {
    --brand-purple-dark: #63476f;
    --brand-pink: #ff7585;
    --brand-pink-light: #ffb8da;
    --brand-purple-light: #c38ab5;
    --brand-blue-light: #e5f6ff;
    --brand-gray-light: #f4f4f9;
}

/* Reset stylów i podstawowe ustawienia */
body {
    background-color: var(--brand-gray-light);
    font-family: 'Inter', sans-serif;
    color: #333;
    margin: 0;
    padding: 0;
}

/* Dostosowanie kolorów Tailwind poprzez nadpisanie klas */
.bg-brand-purple-dark {
    background-color: var(--brand-purple-dark);
}
.bg-brand-pink {
    background-color: var(--brand-pink);
}
.bg-brand-pink-light {
    background-color: var(--brand-pink-light);
}
.bg-brand-purple-light {
    background-color: var(--brand-purple-light);
}
.bg-brand-blue-light {
    background-color: var(--brand-blue-light);
}
.bg-brand-gray-light {
    background-color: var(--brand-gray-light);
}

.text-brand-purple-dark {
    color: var(--brand-purple-dark);
}
.text-brand-pink {
    color: var(--brand-pink);
}
.text-brand-pink-light {
    color: var(--brand-pink-light);
}
.text-brand-purple-light {
    color: var(--brand-purple-light);
}
.text-brand-blue-light {
    color: var(--brand-blue-light);
}
.text-brand-gray-light {
    color: var(--brand-gray-light);
}

.bg-gradient-to-br {
    background: linear-gradient(to bottom right, var(--brand-purple-light), var(--brand-pink-light), var(--brand-blue-light));
}


/* Stylizacja linków */
a {
    color: var(--brand-purple-dark);
    text-decoration: none;
}
a:hover {
    color: var(--brand-pink);
}

/* Przycisk podstawowy */
.btn-primary {
    background-color: var(--brand-pink);
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    transition: background-color 0.3s ease;
}
.btn-primary:hover {
    background-color: #e06675;
}

/* Stylizacja dla Czatbota */
#chatbot-container #chatbot-messages::-webkit-scrollbar {
    width: 8px;
}
#chatbot-container #chatbot-messages::-webkit-scrollbar-track {
    background: var(--brand-gray-light);
}
#chatbot-container #chatbot-messages::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 4px;
    border: 2px solid var(--brand-gray-light);
}

/* Styles for the pulsing heart */
.pulsing-heart {
    display: inline-block;
    font-size: 24px;
    animation: pulse 1s infinite;
}

/* Stylizacja kursora Typed.js */
.typed-cursor {
    font-size: 1rem;
    color: var(--brand-purple-dark);
    animation: blink 0.7s infinite;
}

/* Animacja dla przycisku czatbota */
@keyframes bounce-slow {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.animate-bounce-slow {
    animation: bounce-slow 3s infinite;
}

/* Stylizacja przycisku otwierającego czatbota */
#chatbot-toggle-btn {
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
#chatbot-toggle-btn.hidden {
    opacity: 0;
    transform: scale(0);
    pointer-events: none;
}

/* Animacje */
@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0.8;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

@keyframes slide-in {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

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

/* Stylizacja ikon serc */
.heart-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--brand-pink);
}

/* Stylizacja przycisków serc */
.heart-button {
    background-color: var(--brand-pink);
    color: white;
    padding: 0.5rem;
    border-radius: 9999px;
    transition: background-color 0.3s ease;
}
.heart-button:hover {
    background-color: #e06675;
}

/* Dodatkowe style responsywne */
@media (max-width: 768px) {
    /* Ukrycie sidebaru na mniejszych ekranach */
    aside.hidden.md:block {
        display: none !important;
    }

    /* Stylizacja menu mobilnego */
    #mobile-menu {
        background-color: var(--brand-gray-light);
    }
}

/* Dodatkowe stylizacje */
.bg-white {
    background-color: #fff;
}
.text-gray-700 {
    color: #4a5568;
}
.text-gray-600 {
    color: #718096;
}
.text-gray-500 {
    color: #a0aec0;
}