/* css/style.css */

body {
    font-family: "Inter", sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f9fafb; /* content-bg from Tailwind config */
}

.sidebar {
    width: 260px;
    transition: transform 0.3s ease-in-out;
}

.sidebar-link {
    display: flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    color: #374151;
    font-weight: 500;
    border-radius: 0.375rem;
    transition: background-color 0.2s ease, color 0.2s ease, fill 0.2s ease;
}
.sidebar-link i {
    margin-right: 0.75rem;
    width: 20px;
    text-align: center;
    color: #4B5563;
    transition: color 0.2s ease;
    flex-shrink: 0; /* Prevent icon from shrinking */
}

.sidebar-link:hover {
    background-color: #D1D5DB;
    color: #fc03ba;
}
.sidebar-link:hover i {
    color: #fc03ba;
}

.sidebar-link.active {
    background-color: #fc03ba;
    color: #FFFFFF;
    font-weight: 700;
}
.sidebar-link.active i {
    color: #FFFFFF;
}

.mobile-sidebar-toggle {
    z-index: 100;
}

@media (max-width: 768px) {
    .sidebar {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        transform: translateX(-100%);
        z-index: 40;
    }
    .sidebar.open {
        transform: translateX(0);
    }
}

.content-list-item {
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.content-list-item h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
}
.content-list-item p {
    font-size: 0.875rem;
    color: #4b5563;
    margin-top: 0.25rem;
}
.status-indicator {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}
.status-read {
    background-color: #d1fae5;
    color: #065f46;
}
.status-unread {
    background-color: #fee2e2;
    color: #991b1b;
}
.status-inprogress {
    background-color: #FEF3C7;
    color: #92400E;
}
.content-section {
    padding: 1.5rem;
}
.content-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 0.75rem;
}
.star-rating {
    display: flex;
    align-items: center;
    font-size: 1.1rem;
}
.star-rating .fa-star {
    color: #fbbf24;
    margin-right: 2px;
}
.star-rating .fa-star-o,
.star-rating .far.fa-star {
    color: #d1d5db;
    margin-right: 2px;
}
.rating-text {
    margin-left: 0.5rem;
    font-size: 0.875rem;
    color: #6b7280;
}
.bot-list-item, .quiz-list-item, .recommendation-item {
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}
.bot-list-item h4, .quiz-list-item h4, .recommendation-item h4 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #fc03ba;
    margin-bottom: 0.5rem;
}
.bot-list-item .bot-explanation, .quiz-list-item .quiz-description, .recommendation-item .recommendation-reason {
    font-size: 0.9rem;
    color: #4b5563;
    margin-bottom: 0.75rem;
    line-height: 1.6;
}
.quiz-details {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 0.75rem;
}
.quiz-details strong {
    color: #374151;
}
.dashboard-grid-item {
    background-color: #fff;
    padding: 1.5rem; /* p-6 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-lg */
}
.dashboard-grid-item h3 {
    font-size: 1.125rem; /* text-lg */
    font-weight: 600; /* font-semibold */
    color: #1f2937; /* text-gray-800 */
    margin-bottom: 1rem; /* mb-4 */
}
.filter-group {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.filter-group select {
    padding: 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    background-color: #fff;
    font-size: 0.9rem;
    color: #374151;
}
.modules-dropdown {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}
.modules-dropdown.open {
    max-height: 200px; /* Adjust as needed based on content */
    transition: max-height 0.5s ease-in;
}
/* Style for the currently active module */
.modules-dropdown .current-module {
    font-weight: 700;
    color: #fc03ba; /* primary-salesprov */
}
/* New styles for plan cards */
.plan-card {
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem; /* rounded-xl */
    padding: 2rem; /* p-8 */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-xl */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.3s ease-in-out;
}
.plan-card.current-plan-border {
    border-color: #fc03ba; /* primary-salesprov */
    border-width: 3px; /* border-4 */
}
.plan-card.most-popular {
    border-color: #2ED135; /* secondary-salesprov */
    border-width: 3px;
}
.plan-header {
    margin-bottom: 1.5rem;
}
.plan-header h3 {
    font-size: 1.5rem; /* text-2xl */
    font-weight: 700; /* font-bold */
    color: #1f2937; /* text-gray-900 */
    margin-top: 0.5rem;
}
.plan-header p {
    font-size: 0.875rem; /* text-sm */
    color: #6b7280; /* text-gray-600 */
    margin-top: 0.5rem;
}
.plan-price {
    font-size: 3rem; /* text-5xl */
    font-weight: 800; /* font-extrabold */
    color: #111827; /* text-gray-900 */
    margin-bottom: 1rem;
}
.plan-price span {
    font-size: 1rem; /* text-base */
    font-weight: 500; /* font-medium */
    color: #6b7280; /* text-gray-600 */
}
.plan-features {
    text-align: left;
    margin-bottom: 2rem;
    flex-grow: 1; /* Allows features list to take available space */
}
.plan-features ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.9rem; /* text-base */
    color: #374151; /* text-gray-700 */
}
.plan-features li {
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
}
.plan-features .fa-check-circle {
    color: #2ED135; /* secondary-salesprov */
    margin-right: 0.75rem;
}
.plan-features .fa-times-circle {
    color: #9ca3af; /* gray-400 */
    margin-right: 0.75rem;
}
.plan-button {
    width: 100%;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: background-color 0.2s ease;
}
.plan-button.primary {
    background-color: #fc03ba;
    color: #fff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.plan-button.primary:hover {
    background-color: #A0249F;
}
.plan-button.secondary {
    background-color: #2ED135;
    color: #fff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.plan-button.secondary:hover {
    background-color: #1e9e22;
}
.plan-button.outline {
    background-color: transparent;
    color: #fc03ba;
    border: 1px solid #fc03ba;
}
.plan-button.outline:hover {
    background-color: #f3e8ff;
}

/* Chat FAB (Floating Action Button) */
#chatFab {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background-color: #fc03ba; /* primary-salesprov */
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    cursor: pointer;
    z-index: 1005;  /* Ensure it's above other content */
    transition: transform 0.2s ease-in-out, background-color 0.2s;
}
#chatFab:hover {
    transform: scale(1.1);
    background-color: #A0249F; /* primary-dark-salesprov */
}

/* Chat Popup Window */
#chatPopupContainer {
    position: fixed;
    bottom: 90px;  /* Position above the FAB */
    right: 20px;
    width: 360px;
    max-height: 70vh;  /* Limit height to prevent overflow */
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    display: none;  /* Hidden by default */
    flex-direction: column;
    z-index: 1000;  /* Ensure it's above most content but below FAB */
    overflow: hidden;  /* Hide scrollbars for the container itself */
    color: #333;  /* Default text color */
    border: 2px solid #fc03ba; /* Pink outline for the entire box */
}
#chatPopupContainer.active {
    display: flex; /* Show when active */
}

.chat-popup-header {
    padding: 12px 15px;
    background-color: #fc03ba; /* Pink header */
    border-bottom: 1px solid #A0249F; /* Darker pink border */
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.chat-popup-header h3 {
    margin: 0;
    font-size: 1.1em;
    font-weight: 600;
    color: white; /* White text for header */
}
#closeChatPopup {
    background: none;
    border: none;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    color: white; /* White close button */
    padding: 5px;
    line-height: 1;
}
#closeChatPopup:hover {
    color: #f0f0f0; /* Lighter white/grey on hover */
}

/* Chatbox specific styles within the popup */
#chatbox {
    flex-grow: 1;  /* Allows chat messages to take available space */
    overflow-y: auto;  /* Enable scrolling for messages */
    padding: 15px;
    background-color: #fff; /* Chatbox background */
    border: none;  /* Remove default border */
    height: auto;  /* Adjust height based on content */
    max-height: calc(70vh - 120px); /* Adjusted to ensure input is visible */
}
.message {
    margin-bottom: 8px;
    padding: 10px 15px;
    border-radius: 18px; /* Rounded corners for messages */
    line-height: 1.4;
    max-width: 80%;  /* Limit message width */
    word-wrap: break-word; /* Ensure long words break */
}
.user-message {
    background-color: #2ED135; /* secondary-salesprov Green */
    color: white;
    text-align: left;  /* Text alignment */
    margin-left: auto; /* Align to the right */
    border-bottom-right-radius: 5px; /* Slightly different rounding for user */
}
.bot-message {
    background-color: #fc03ba; /* primary-salesprov Pink */
    color: white;
    text-align: left;
    margin-right: auto; /* Align to the left */
    border-bottom-left-radius: 5px; /* Slightly different rounding for bot */
}
.bot-message.thinking {
    font-style: italic;
    background-color: #f0f0f0; /* Lighter grey for thinking message */
    color: #555; /* Darker text for thinking message */
}

.chat-input-container {
    padding: 15px;
    border-top: 1px solid #e0e0e0; /* Light border above input area */
    background-color: #f9f9f9; /* Slightly off-white for input area */
    display: flex;
    align-items: center;
}
#userInput {
    flex-grow: 1;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 20px; /* Rounded input field */
    margin-right: 10px;
    color: #333; /* Text color for input */
    font-size: 0.95em;
}
#sendButton {
    padding: 10px 15px;
    background-color: #2ED135; /* secondary-salesprov Green for send button */
    color: white;
    border: none;
    border-radius: 20px; /* Rounded send button */
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95em;
    transition: background-color 0.2s;
}
#sendButton:hover {
    background-color: #25a82b; /* Darker green on hover */
}

/* Custom Confirmation Modal Styles */
#confirmationModal.active {
    display: flex; /* Show when active */
}

/* Custom CSS for Hamburger Menu and Pop-up (overriding/extending Tailwind where necessary) */
body {
    font-family: "Inter", sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevent horizontal scroll due to off-screen menu */
}

/* Header and Navigation */
.header-nav {
    background-color: #f0f0f0; /* Light background like Salesforce */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.logo {
    font-size: 1.8em;
    font-weight: bold;
    text-decoration: none;
}

/* Hamburger Menu Styles */
.hamburger-menu {
    display: none; /* Hidden by default on desktop */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1000; 
    position: relative; 
}

.hamburger-menu .bar {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #333;
    margin: 5px 0;
    transition: 0.4s;
    border-radius: 9999px; 
}

.hamburger-menu.open .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger-menu.open .bar:nth-child(2) { opacity: 0; }
.hamburger-menu.open .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.nav-links {
    list-style: none;
    display: flex; 
    margin: 0;
    padding: 0;
    align-items: center;
}

.nav-links li a {
    text-decoration: none;
    color: #333;
    font-weight: 600;
    transition: color 0.3s ease;
    font-family: 'Arial', sans-serif; 
    font-size: 0.875rem; 
}
.nav-links li a:hover { color: '#fc03ba'; }

@media (max-width: 768px) {
    .hamburger-menu { display: block; }
    .nav-links {
        display: none; 
        flex-direction: column;
        position: fixed;
        top: 0;
        right: -300px; 
        width: 300px;
        height: 100%;
        background-color: #fff;
        box-shadow: -5px 0 15px rgba(0,0,0,0.2);
        padding-top: 80px;
        padding-left: 0; 
        transition: right 0.4s ease-in-out;
        z-index: 999;
        border-radius: 0 0 0 8px; 
    }
    .nav-links.active { right: 0; }
    .nav-links li { margin: 0; padding: 0; text-align: left; width: 100%; }
    .nav-links li a { font-size: 1.2em; display: block; padding: 15px 30px; font-family: 'Arial', sans-serif; }

    #chatPopupContainer {
        width: calc(100% - 20px);
        height: calc(100% - 40px);
        bottom: 10px;
        right: 10px;
        border-radius: 12px;
        max-height: calc(100% - 40px);
    }

    #exit-intent-overlay {
        padding: 16px;
    }

    #exit-intent-modal {
        width: calc(100% - 32px);
        height: auto;
        border-radius: 12px;
        max-width: calc(100% - 32px);
        max-height: calc(100% - 64px);
    }

    .popup-content {
        width: calc(100% - 32px);
        max-width: calc(100% - 32px);
        border-radius: 8px 8px 0 0;
        margin: 0 16px;
    }
}

/* Pop-up Window Styles */
.popup-overlay {
    position: fixed; bottom: 0; left: 0; width: 100%; height: 25vh;
    background: rgba(0, 0, 0, 0.8); display: flex; justify-content: center;
    align-items: flex-end; z-index: 2000; visibility: hidden; opacity: 0;
    transition: visibility 0s, opacity 0.5s ease;
}
.popup-overlay.active { visibility: visible; opacity: 1; }
.popup-content {
    background: #fff; padding: 20px 30px; border-radius: 8px 8px 0 0;
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.3); text-align: center;
    position: relative; max-width: 90%; width: 90%; margin-bottom: 0;
    transform: translateY(100%); transition: transform 0.5s ease-out;
}
.popup-overlay.active .popup-content { transform: translateY(0); }
.close-button {
    position: absolute; top: 10px; right: 15px; font-size: 1.5em;
    cursor: pointer; color: #666; background: none; border: none;
    padding: 0; line-height: 1;
}
.popup-cta {
    display: inline-block; padding: 10px 20px; border-radius: 5px;
    text-decoration: none; margin-top: 15px; transition: background-color 0.3s ease;
}
.do-not-show { margin-top: 10px; font-size: 0.9em; color: #555; }

/* Responsive Video Container */
.video-container {
    position: relative; padding-bottom: 56.25%; height: 0;
    overflow: hidden; max-width: 100%; background: #000; border-radius: 8px;
}
.video-container iframe {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;
}

/* Chat FAB (Floating Action Button) */
#chatFab {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background-color: #fc03ba; /* primary-salesprov */
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    cursor: pointer;
    z-index: 1005; 
    transition: transform 0.2s ease-in-out, background-color 0.2s;
}
#chatFab:hover {
    transform: scale(1.1);
    background-color: #A0249F; /* primary-dark-salesprov */
}

/* Chat Popup Window */
#chatPopupContainer {
    position: fixed;
    bottom: 90px; 
    right: 20px;
    width: 360px;
    max-height: 70vh; 
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    display: none; 
    flex-direction: column;
    z-index: 1000; 
    overflow: hidden; 
    color: #333; 
    border: 2px solid #fc03ba; /* Pink outline for the entire box */
}
#chatPopupContainer.active {
    display: flex;
}

.chat-popup-header {
    padding: 12px 15px;
    background-color: #fc03ba; /* Pink header */
    border-bottom: 1px solid #A0249F; /* Darker pink border */
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.chat-popup-header h3 {
    margin: 0;
    font-size: 1.1em;
    font-weight: 600;
    color: white; /* White text for header */
}
#closeChatPopup {
    background: none;
    border: none;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    color: white; /* White close button */
    padding: 5px;
    line-height: 1;
}
#closeChatPopup:hover {
    color: #f0f0f0; /* Lighter white/grey on hover */
}

/* Chatbox specific styles within the popup */
#chatbox {
    flex-grow: 1; 
    overflow-y: auto; 
    padding: 15px;
    background-color: #fff;
    border: none; 
    height: auto; 
    max-height: calc(70vh - 120px); 
}
.message {
    margin-bottom: 8px;
    padding: 10px 15px;
    border-radius: 18px;
    line-height: 1.4;
    max-width: 80%; 
    word-wrap: break-word;
}
.user-message { /* User messages are now green */
    background-color: #2ED135; /* secondary-salesprov Green */
    color: white;
    text-align: left; 
    margin-left: auto; 
}
.bot-message { /* Bot messages are now pink */
    background-color: #fc03ba; /* primary-salesprov Pink */
    color: white;
    text-align: left;
    margin-right: auto; 
}
 .bot-message.thinking { /* Styling for the "Thinking..." message */
    font-style: italic;
    background-color: #f0f0f0; /* Lighter grey for thinking message */
    color: #555;
}


.chat-input-container {
    padding: 15px;
    border-top: 1px solid #e0e0e0;
    background-color: #f9f9f9;
    display: flex;
    align-items: center;
}
#userInput {
    flex-grow: 1;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 20px; 
    margin-right: 10px;
    color: #333;
    font-size: 0.95em;
}
#sendButton { /* Send button remains green */
    padding: 10px 15px;
    background-color: #2ED135; 
    color: white;
    border: none;
    border-radius: 20px; 
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95em;
    transition: background-color 0.2s;
}
#sendButton:hover {
    background-color: #25a82b; 
}