/* CSS Variables for Dark Theme */
:root {
    --background-color: #fdfdfd;
    --sidebar-bg: #f3f3f3;
    --sidebar-text: #444;
    --sidebar-hover: #e8e8e8;
    --primary-color: #129ed9; 
    --secondary-color: #e74c3c;
    --button-bg: #d5d5d5;
    --button-hover: #129ed9;
    --input-bg: #fff;
    --input-text: #333;
    --chat-bg: #ffffff;
    --chat-user-bg: #eff6fb;
    --chat-assistant-bg: #f2f2f2;
    --text-color: #333;
    --border-color: #ccc;
    --spinner-color: #129ed9;
    --loading-dot-color: #129ed9;
    --card-shadow: rgba(0, 0, 0, 0.01);
    --transition-speed: 0.3s;
    --font-body: 'Poppins', sans-serif;
    --font-title: 'Manrope', sans-serif;
  }
  



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

/* Adjusted: Removed overflow: hidden */
html, body {
    height: 100%;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
}

.container {
    display: flex;
    width: 100%;
    height: 100%; /* Changed from 100vh to 100% */
}

/* Sidebar Styles */
.sidebar {
    background-color: var(--chat-bg);
    width: 275px; /* Fixed width */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* border-right: 1px solid var(--border-color); */
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
    transition: transform var(--transition-speed) ease;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%; /* Changed from 100vh to 100% */
    overflow-y: auto;
    z-index: 10001 !important;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* On mobile, no margin-top */
@media (max-width: 768px) {
    .sidebar {
        margin-top: 0;
    }
}

/* Universal Header Styling */
.section-header {
    padding: 10px 20px;
    background-color: var(--sidebar-bg);
    border-bottom: 1px solid var(--border-color);
    text-align: center;
    font-weight: bold;
    color: var(--text-color);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 100;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
}

/* Adjust for mobile */
@media (max-width: 768px) {
    .section-header {
        position: sticky;
        top: 0;
    }
}

/* Sidebar Collapsed State for Mobile */
.sidebar.collapsed {
    transform: translateX(-100%);
}

/* Logo */
.logo {
    margin: 20px auto;
}

.logo img {
    max-width: 200px;
    height: auto;
}

/* Sidebar Header */
.sidebar-header {
    padding: 20px;
    /* remove margin */
    margin: 0;
}


.menu {
    padding: 20px;
    flex-grow: 1;
}

.menu-item {
    border: none;
    padding: 12px 20px;
    margin: 8px 0;
    width: 100%;
    font-size: 16px;
    color: var(--input-text);
    text-align: left;
    border-radius: 8px;
    display: flex;
    align-items: center;
    transition: background var(--transition-speed), transform var(--transition-speed);
    cursor: pointer;
    background-color: var(--sidebar-bg);
}

.menu-item:hover {
    background: var(--sidebar-hover);
    transform: translateX(5px);
}

/* add shadow on bottom sidebar-header-newchat */
.sidebar-header-newchat {
    /* padding: 20px; */
    box-shadow: 0 2px 5px rgba(28, 27, 27, 0.05);
    z-index: 10000;
}

/* for the menu item in the chat page, make width fit content, center button */
.menu-item-newchat {
    border: none;
    padding: 12px 20px;
    margin: 8px 0;
    width: fit-content;
    font-size: 16px;
    color: var(--input-text);
    text-align: left;
    border-radius: 8px;
    display: flex;
    align-items: center;
    transition: background var(--transition-speed), transform var(--transition-speed);
    cursor: pointer;
    background-color: var(--sidebar-bg);
    /* center button in container */
    margin-left: auto;
    margin-right: auto;
}

.menu-item-newchat:hover {
    background: var(--sidebar-hover);
}

.menu-item-store {
    border: none;
    padding: 12px 20px;
    /* margin: 8px 0; */
    width: 100%;
    max-width: 175px;
    font-size: 16px;
    color: var(--input-text);
    text-align: center;
    border-radius: 8px;
    display: flex;
    align-items: center;
    transition: background var(--transition-speed), transform var(--transition-speed);
    cursor: pointer;
    background-color: var(--sidebar-bg);
}

.menu-item-store {
    display: flex;
    justify-content: center;
    align-items: center;
}

.menu-item-store2 {
    border: none;
    padding: 12px 20px;
    margin: 8px 0;
    max-width: 175px;
    font-size: 16px;
    color: var(--background-color);
    text-align: left;
    border-radius: 8px;
    display: flex;
    align-items: center;
    transition: background var(--transition-speed), transform var(--transition-speed);
    cursor: pointer;
    background-color: var(--primary-color);
}

.menu-item-store2 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.menu-item-store.active {
    color: var(--primary-color);
}

.menu-item-store:hover {
    color: var(--primary-color);
}

.menu-item.active {
    color: var(--primary-color);
}




.sidebar-footer {
    padding: 20px;
    text-align: center;
}

.menu-item#login-button {
    background-color: var(--primary-color);
    color: var(--text-color);
    margin: 0 auto;
    margin-bottom: 10px;
    text-align: center;
    justify-content: center;
    max-width: 175px;
}

.menu-item#logout-button {
    background-color: transparent;
    color: var(--primary-color);
    margin: 0 auto;
    margin-bottom: 10px;
    text-align: center;
    justify-content: center;
    max-width: 175px;
}

.menu-item#login-button:hover {
    transform: none;
    background-color: var(--button-hover);
}

/* Toggle Button */
.toggle-btn {
    display: none;
    background: transparent;
    color: var(--primary-color);
    font-size: 24px;
    border: none;
    cursor: pointer;
    padding: 10px;
    border-radius: 5px;
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1001;
    /* transition: background var(--transition-speed); */
    z-index: 10002 !important;
}
/* on mobile */
.toggle-btn {
    top: 20px;
}



@media (max-width: 768px) {
    /* Sidebar becomes overlay on mobile */
    .sidebar {
        position: absolute;
        z-index: 1000;
        height: 100%;
        width: 100%;
        transform: translateX(-100%);
    }

    .sidebar.active {
        transform: translateX(0);
        position: fixed;
    }

    /* Show toggle button on mobile */
    .toggle-btn {
        display: block;
    }

    /* Adjust main content to full width */
    .content-container {
        width: 100%;
        margin-left: 0;
    }
}

/* Content Container */
.content-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    margin-left: 275px; /* Equal to sidebar width */
    height: 100%; /* Changed from 100vh to 100% */
    padding: 10px;
    transition: margin-left var(--transition-speed) ease;
    /* Removed overflow: hidden */
}

/* On mobile, adjust content container */
@media (max-width: 768px) {
    .content-container {
        margin-top: auto;
        margin-bottom: auto;
        margin-left: 0;
    }
}

.charts-container {
    background-color: var(--chat-bg);
}

/* Hide sidebar collapsed state margin adjustments on desktop */
@media (min-width: 769px) {
    .sidebar.collapsed ~ .content-container {
        margin-left: 275px;
    }
}

/* Content Sections */
.content {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Changed from fixed height to flex-grow */
    overflow-y: auto; /* Added overflow-y: auto */
}

/* Hidden Utility Class */
.hidden {
    display: none;
}

/* Centered Title */
.centered-title {
    margin: 20px 0;
    font-size: 1.8em;
    color: var(--text-color);
    text-align: center;
}

/* Connections Styles */
.connections-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    overflow-y: auto;
    /* Adjusted max-height */
    max-height: calc(100% - 60px); /* Subtract header height */
}

.connection-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px;
    background-color: var(--sidebar-bg);
    border: 0.5px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 1.5px 3px var(--card-shadow);
    transition: background var(--transition-speed), transform var(--transition-speed);
    width: 100%; /* Default full width for mobile */
}

.connection-item h3 {
    color: var(--text-color);
    margin-bottom: 5px;
    text-align: center;
}

.connection-item .input-field {
    width: 100%;
}

.connect-button {
    background-color: transparent;
    color: var(--primary-color);
    border: none;
    padding: 12px 20px;
    margin-top: 10px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 8px;
    width: 100%;
    transition: background var(--transition-speed);
}

.shopify-fetch-button {
    background-color: var(--primary-color);
    color: var(--background-color);
    border: none;
    padding: 12px 20px;
    margin: 5px 5px 5px 0;
    font-size: 16px;
    cursor: pointer;
    border-radius: 8px;
    transition: background var(--transition-speed);
    width: fit-content;
    /* center the button */
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    /* font-family: 'Manrope', sans-serif; */
}

.shopify-fetch-button:hover {
    background-color: var(--button-hover);
}

/* create-store-button */
.create-store-button {
    background-color: var(--primary-color);
    color: var(--input-text);
    border: none;
    padding: 12px 20px;
    margin: 5px 5px 5px 0;
    font-size: 17px;
    cursor: pointer;
    border-radius: 8px;
    transition: background var(--transition-speed);
    width: fit-content;
    /* center the button */
    margin-left: auto;
    margin-right: auto;
    /* manrope */
    /* font-family: 'Manrope', sans-serif; */
}





.store-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    background-color: transparent;
    border-radius: 8px;
    box-shadow: 0 4px 8px var(--card-shadow);
    width: 95%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* center texts in store-content */
.store-content h4 {
    text-align: center;
    margin-top: 20px;
}


/* Keyword Search Container */
.keyword-search-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
}

.keyword-search-container .input-field {
    flex: 1;
    margin-left: 20px;
}

/* Input Fields */
.input-field {
    background-color: var(--input-bg);
    color: var(--input-text);
    padding: 10px;
    font-size: 16px;
    border: 0.5px solid var(--border-color);
    border-radius: 8px;
    outline: none;
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
}

.input-field::placeholder {
    color: #bbb;
}

.input-field:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 4px var(--primary-color);
}

.keywordChart {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background-color: var(--sidebar-bg);
    border-radius: 8px;
    box-shadow: 0 4px 8px var(--card-shadow);
    width: 95%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* CSV Display */
.csv-display {
    margin-top: 20px;
    border: 1px solid var(--border-color);
    padding: 15px;
    border-radius: 8px;
    background-color: var(--sidebar-bg);
    box-shadow: 0 4px 8px var(--card-shadow);
    font-family: monospace;
    overflow-y: auto;
    width: 95%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    min-height: 350px;
    /* slight shadow below, but in the inside */
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
}

/* on desktop min height of 400 */
@media (min-width: 769px) {
    .csv-display {
        min-height: 550px;
    }
}

.csv-display table {
    width: 100%;
    border-collapse: collapse;
}

.csv-display th, .csv-display td {
    padding: 10px;
    border: 1px solid var(--border-color);
    text-align: left;
    color: var(--text-color);
}

.csv-display th {
    background-color: #f3f3f3;
    font-weight: bold;
    border-radius: 5px;
    position: sticky;
    top: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    margin-top: 0px;
    /* text color */
    color: var(--text-color);
}

/* Column Adder */
.column-adder {
    margin-top: 20px;
    margin-bottom: 35px;
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--sidebar-bg);
    box-shadow: 0 4px 8px var(--card-shadow);
    width: 95%;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.column-adder textarea {
    min-height: 100px;
    resize: vertical;
}

.add-column-button {
    background-color: var(--primary-color);
    color: var(--text-color);
    border: none;
    padding: 12px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 8px;
    transition: background var(--transition-speed);
}

.add-column-button:hover {
    background-color: var(--suggestion-hover-bg);
}

/* Flow Overlay */
.flow-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(26, 26, 26, 0.95);
    display: none;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    font-size: 1.5rem;
    z-index: 9000;
}

.flow-content {
    text-align: center;
    padding: 30px;
    background: rgba(30, 30, 47, 0.9);
    border-radius: 10px;
    box-shadow: 0 4px 12px var(--card-shadow);
}

.spinner-overlay {
    border: 6px solid var(--sidebar-bg);
    border-top: 6px solid var(--spinner-color);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px auto;
}

.loading-dots {
    display: flex;
    justify-content: center;
    gap: 1px;
}

.loading-dots span {
    font-size: 3rem;
    color: var(--loading-dot-color);
    animation: glow 1.2s infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes glow {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.7; }
}

/* Insights Interface */
.insights-header {
    padding: 20px;
    background-color: var(--sidebar-bg);
    border-bottom: 1px solid var(--border-color);
    text-align: center;
    font-weight: bold;
    color: var(--text-color);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    position: sticky;
    top: 0;
    z-index: 100;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.charts-container {
    flex-grow: 1;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
    padding: 20px;
    background-color: var(--chat-bg);
    border-radius: 5px;
    height: auto;
}

canvas {
    width: 100%;
    max-width: 1000px;
    height: auto;
    background-color: transparent;
    border-radius: 8px;
}

@media (max-width: 768px) {
    .charts-container {
        flex-direction: row;
        align-items: center;
        height: auto;
    }

    canvas {
        max-width: 100%;
        height: auto;
    }
}

/* Adjusted: Changed position to relative and removed top: 0; */
.chat-header {
    flex-shrink: 0;
    padding: 20px;
    background-color: var(--sidebar-bg);
    /* border-bottom: 1px solid var(--border-color); */
    text-align: center;
    font-weight: bold;
    color: var(--text-color);
    position: relative;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    font-size: 12px;
    /* manrop */
    font-family: 'Manrope', sans-serif;

}

/* make sure the h2 is max 60% */
/* on mobile */
@media (max-width: 768px) {
    .chat-header h2 {
        max-width: 75%;
    }
}

/* Allow scrolling only in the chat window */
.chat-window {
    flex-grow: 1; /* Ensure it occupies available space */
    overflow-y: auto; /* Enable vertical scrolling */
    padding: 10px; /* Add padding for content */
    background-color: var(--chat-bg); /* Keep the background color */
    /* Removed max-height: 100%; */
}

/* Adjusted: Changed position to relative, removed bottom: 0;, added margin-top: auto; */
.chat-input-container {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background-color: var(--sidebar-bg);
    z-index: 101;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    box-sizing: border-box;
    position: relative;
    margin-top: auto;
}

/* Chat Messages */
.chat-message {
    padding: 12px 18px;
    margin: 10px 0;
    border-radius: 15px;
    max-width: 80%;
    font-size: 16px;
    line-height: 1.4;
    word-wrap: break-word;
}

.chat-message.user {
    background-color: var(--chat-user-bg);
    align-self: flex-end;
    color: var(--text-color);
    text-align: right;
    margin-left: auto;
    width: fit-content;
    max-width: 90%;
    /* make right bottom corner not rounded */
    border-bottom-right-radius: 0;
    margin-top: 10px;
}



.chat-message.assistant {
    background-color: var(--chat-assistant-bg);
    align-self: flex-start;
    color: var(--text-color);
    width: fit-content;
    max-width: 90%;
    border-bottom-left-radius: 0;

}






/* make chatbot-settings scrollable */
.chatbot-settings {
    overflow-y: auto;
}

/* Suggestions */
.chat-window .suggestion {
    background-color: transparent;
    color: var(--primary-color);
    cursor: pointer;
    padding: 8px 15px;
    border-radius: 20px;
    margin-top: 10px;
    font-size: 15px;
    transition: background var(--transition-speed), transform var(--transition-speed);
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.chat-window .suggestion:hover {
    /* background-color: var(--suggestion-hover-bg); */
    transform: scale(1.015);
    /* change text color */
    color: var(--primary-color);
}

.suggestion::before {
    content: "💡 ";
    margin-right: 5px;
}

/* Loading Message */
.loading-message {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: var(--chat-assistant-bg);
    padding: 10px 15px;
    border-radius: 15px;
    color: var(--text-color);
}

.loading-message::after {
    content: '';
    width: 8px;
    height: 8px;
    background-color: var(--loading-dot-color);
    border-radius: 50%;
    animation: glow 1.2s infinite;
    margin-left: 5px;
}

.loading-text {
    display: inline-block;
    color: var(--text-color);
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.3) 0%,
        rgba(0, 0, 0, 0.7) 50%,
        rgba(0, 0, 0, 0.3) 100%
    );
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: text-flow 2s linear infinite;
}

@keyframes text-flow {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Input Field */
.chat-input-container .input-field {
    flex-grow: 1;
    border-radius: 10px;
    padding: 10px 15px;
    border: 0.5px solid var(--border-color);
    background-color: var(--input-bg);
    color: var(--input-text);
    outline: none;
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
}




/* make input fielf in chatbot page wider */
.chat-input-container .input-field {
    width: 80%;
}

.chat-input-container .input-field::placeholder {
    color: #bbb;
}

.chat-input-container .input-field:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 4px var(--primary-color);
}

/* Send Button */
.send-button {
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 10px;
    background-color: var(--primary-color);
    color: var(--text-color);
    cursor: pointer;
    border: none;
    transition: background var(--transition-speed), transform var(--transition-speed);
}

.send-button:hover {
    background-color: var(--button-hover);
}

/* Download Button */
.download-button {
    background-color: transparent;
    color: var(--text-color);
    border: none;
    padding: 12px 20px;
    margin: 20px auto 0 auto;
    font-size: 12px;
    cursor: pointer;
    border-radius: 8px;
    display: block;
    transition: background var(--transition-speed);
    max-width: 200px;
    margin-bottom: 15px;
}



.download-button:hover {
    /* /* background-color: var(--button-hover); */
    color: var(--primary-color);
}

/* Spinner for Buttons */
.spinner {
    border: 4px solid var(--input-bg);
    border-top: 4px solid var(--spinner-color);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    /* Sidebar Overlay for Mobile */
    .sidebar {
        transform: translateX(-100%);
        transition: transform var(--transition-speed) ease;
    }

    .sidebar.active {
        transform: translateX(0);
        position: fixed;
    }

    /* Show toggle button on mobile */
    .toggle-btn {
        display: block;
    }

    /* Adjust main content to full width */
    .content-container {
        width: 100%;
        margin-left: 0;
    }

    /* Ensure chat input and send button are side by side */
    .chat-input-container {
        flex-direction: row;
    }

    .send-button {
        margin-left: 0;
        width: auto;
    }
}

/* Further Media Queries for Extremely Small Screens */
@media (max-width: 480px) {
    /* Ensure chat input and send button remain side by side */
    .chat-input-container {
        flex-direction: row;
        gap: 10px;
    }

    .send-button {
        width: auto;
    }
}

/* Products Header */
.products-header, .connections-header, .chatbot-header, .keywords-header {
    padding: 20px;
    background-color: var(--sidebar-bg);
    border-bottom: 1px solid var(--border-color);
    text-align: center;
    font-weight: bold;
    color: var(--text-color);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    position: sticky;
    top: 0 !important;
    z-index: 100;
    height: 60px;
}

/* Background color for content sections */
.content {
    background-color: var(--chat-bg);
}

.insightsInterface {
    overflow: hidden;
}

.charts-container {
    overflow-y: auto;
}

/* Chart Container */
.chart-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background-color: var(--sidebar-bg);
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--card-shadow);
    margin: 20px auto;
    max-width: 1200px;
    width: 95%;
    height: auto;
    min-height: 500px;
}




/* Keyword Insights Table Styling */
#keywordInsights table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

#keywordInsights th, #keywordInsights td {
    padding: 10px 15px;
    border: 1px solid var(--border-color);
    text-align: left;
}

#keywordInsights th {
    background-color: var(--primary-color);
    color: var(--text-color);
    position: sticky;
    top: 0;
    z-index: 1;
    /* less height */
    padding: 5px 5px;
    /* no space above it */
    margin-top: 0;
    /* make the height small */
    /* font Poppins */
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
}

.info-text {
    text-align: center;
    margin-bottom: 10px;
    font-size: 12px;
    color: var(--text-color);
    /* position on bottom centre */
    /* position: sticky; */
    bottom: 0;
    z-index: 1;
    margin-top: 5px;


}

#keywordInsights tr:nth-child(even) {
    background-color: var(--chat-bg);
}

/* Add hover effect for table rows */
#keywordInsights tr:hover {
    background-color: var(--suggestion-bg);
    cursor: pointer;
}

/* Adjust Keyword Search Container */
.keyword-search-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 20px auto;
    max-width: 800px;
    width: 95%;
}

.keyword-search-container .input-field {
    flex: 1;
    min-width: 200px;
    padding: 5px 15px;
    /*  */
}


/* Adjusted Chat Header
.chat-header {
    padding: 10px 20px;
    margin-bottom: 10px;
} */

/* Adjust Keyword Search Container */
.keyword-search-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 20px auto; /* Add vertical margin */
    gap: 15px; /* Adjust spacing between elements */
    max-width: 800px;
    width: 95%;
}

.keyword-search-container .input-field {
    flex: 1;
    min-width: 150px;
    padding: 10px 15px;
}

.keyword-search-container .input-field,
.keyword-search-container button {
    margin-top: 10px;
    margin-bottom: 10px;
}

.keyword-search-container button {
    width: auto; /* Adjust to content size */
    padding: 8px 12px; /* Smaller padding */
    font-size: 14px; /* Adjust font size */
    align-self: center; /* Center within the grid */
}

/* Info Text Styling */
.info-text {
    text-align: center;
    margin-bottom: 10px;
    font-size: 13px;
    color: var(--text-color);
    margin-top: 5px;
}

/* Remove extra margin above CSV display */
.csv-display {
    margin-top: 0;
    margin-bottom: 0;
}

/* Spinner Styles */
.spinner {
    border: 4px solid var(--primary-color);
    border-top: 4px solid #ffffff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Chart Container Adjustments */
.chart-container canvas {
    width: 100% !important;
    height: auto !important;
}


.select2-dropdown {
    position: relative;
  }




  
  .suggestion {
    background-color: var(--suggestion-bg);
    color: var(--text-color);
    padding: 8px 15px;
    border-radius: 20px;
    cursor: pointer;
    transition: background var(--transition-speed), transform var(--transition-speed);
  }
  



  .chart-suggestion {
    text-align: center;
    margin-top: 15px;
    font-size: 16px;
    cursor: pointer;
    color: var(--text-color);
    transition: color var(--transition-speed);
    margin-bottom: 35px;
    background-color: var(--suggestion-bg);
  }
  
  .chart-suggestion:hover {
    color: var(--primary-color);
  }





/* make chart-suggestion just like question suggestion */
.chart-suggestion {
    background-color: var(--suggestion-bg);
    color: var(--text-color);
    padding: 8px 15px;
    border-radius: 20px;
    cursor: pointer;
    transition: background var(--transition-speed), transform var(--transition-speed);
    /* it should take the widht of the content */
    width: fit-content;
    margin-bottom: 35px;
    /* make sure the button is centered */
    margin: 0 auto;

}   




/* Adjust SVG size and alignment */
.connection-logo {
    width: 50px; /* Smaller size */
    height: auto;
    margin: 0 auto; /* Centered by default */
}

/* Desktop: Align SVGs to the left */
@media (min-width: 768px) {
    .connection-item {
        flex-direction: row;
        align-items: center;
    }

    .connection-logo {
        margin: 0 15px 0 0; /* Left-aligned with spacing */
    }

    .connection-item h3,
    .connection-item .input-field,
    .connection-item .connect-button {
        text-align: left;
    }
}

/* Mobile: SVGs centered */
@media (max-width: 767px) {
    .connection-item {
        flex-direction: column;
        align-items: center;
    }
}

/* Fancy Expander Styling */
.expander {
    margin-top: 10px;
    background-color: var(--sidebar-bg);
}

.expander-button {
    background-color: transparent;
    color: var(--text-color);
    border: none;
    padding: 8px 15px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 5px;
    transition: background var(--transition-speed);
    /* center the buttin within the container */
    margin: 0 auto;
    justify-content: center;
    display: flex;



}


.expander-content {
    display: none; /* Hidden by default */
    margin-top: 10px;
    padding: 10px;
    background-color: var(--sidebar-bg);
    color: var(--text-color);
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: max-height 0.3s ease, opacity 0.3s ease;
    background-color: var(--chat-bg);
}


.expander-content.open {
    display: block; /* Show when toggled */
}







/* Adjust SVG size and alignment */
.connection-logo {
    width: 50px; /* Smaller size */
    height: auto;
    margin: 0 auto; /* Centered by default */
    /* bit spacing to the top */
    margin-top: 10px;
}

/* Desktop: Adjust layout */
@media (min-width: 768px) {
    .connection-item {
        display: flex;
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center elements */
    }

    .connection-logo {
        margin-bottom: 10px; /* Add space below the icon */
    }

    .connection-item h3 {
        margin-bottom: 15px; /* Add space below the title */
        text-align: center;
    }

    .connection-item .input-field {
        width: 100%; /* Full width for better responsiveness */
        max-width: 300px; /* Limit the width */
        margin-bottom: 15px; /* Space below the input field */
    }

    .connection-item .connect-button,
    .connection-item .expander-button {
        width: 100%; /* Full width of container */
        max-width: 300px; /* Limit width on larger screens */
        margin: 5px 0; /* Add vertical spacing */
        text-align: center;
    }

    .expander-button {
        display: flex;
        justify-content: center; /* Center the content of the button */
        /* center */
        margin: 0 auto;

    }
}









.domainIput .domainSearchButton {
    margin: 0 auto;
    justify-content: center;
    display: flex;
}


/* Desktop Styles */
@media (min-width: 1024px) {
    .keyword-search-container {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Two columns for most items */
        grid-gap: 15px; /* Space between items */
        justify-items: center;
        align-items: center;
        margin: 20px auto; /* Centered horizontally */
        max-width: 800px;
    }

    /* Titles: Full-width rows */
    .keyword-search-container h3 {
        grid-column: span 2; /* Span across both columns */
        text-align: center;
        font-size: 18px;
        margin-bottom: 10px;
        color: var(--text-color);
        margin-top: 20px;
    }

    /* Language and Location Selectors */
    #locationSelect, 
    #languageSelect {
        grid-column: span 1; /* Each occupies one column */
        width: 80%; 
    }

    /* Input and Button for Keyword Search */
    #keywordInput {
        grid-column: span 1; /* Larger input */
        flex: 2; /* Input takes more space */
        min-width: 400px; /* Ensure a reasonable size */
    }

    #keywordSearchButton {
        grid-column: span 1; /* Button beside the input */
        flex: 1;
        padding: 8px 15px; /* Smaller button */
    }

    /* Input and Button for Domain Search */
    #DomainInput {
        grid-column: span 1; /* Larger input */
        flex: 2;
        min-width: 400px;
        /* width: 100%; */
    }

    #domainSearchButton {
        grid-column: span 1; /* Button beside the input */
        flex: 1;
        padding: 8px 15px;
    }
}

/* Mobile Styles */
@media (max-width: 1023px) {
    .keyword-search-container {
        display: flex;
        flex-direction: column;
        gap: 5px;
        justify-content: center;
        align-items: center;
        margin: 20px auto;
        width: 95%; /* Full width for mobile */
    }

    /* Titles: Full-width rows */
    .keyword-search-container h3 {
        text-align: center;
        font-size: 16px;
        margin-bottom: 10px;
        color: var(--text-color);
        margin-top: 20px;
    }

    /* Language and Location Selectors */
    #locationSelect, 
    #languageSelect {
        width: 80%; /* Full width on mobile */
    }

    /* Input and Button for Keyword Search */
    #keywordInput, 
    #DomainInput {
        width: 80%;
        margin-bottom: 5px;
    }

    #keywordSearchButton, 
    #domainSearchButton {
        width: 25%; /* Smaller buttons */
    }


}

/* General Styles */
.chart-suggestion {
    background-color: var(--suggestion-bg);
    color: var(--text-color);
    padding: 8px 15px;
    border-radius: 20px;
    cursor: pointer;
    transition: background var(--transition-speed), transform var(--transition-speed);
    margin-bottom: 35px;
}

.chart-suggestion:hover {
    color: var(--primary-color);
}


.products-buttons {
    /* display: flex; */
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
    margin-bottom: 20px;

    margin: 0 auto;
    padding: 10px;

    margin-top: 20px;
    cursor: pointer;

}

/* on mobile, centre and stack the buttons */
@media (max-width: 768px) {
    .products-buttons {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* centre the buttons on the screen */
        margin: 0 auto;

    }
}


#shopify-fetch-button1, #shopify-fetch-button2 {
    width: auto;
    padding: 8px 15px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 5px;
    transition: background var(--transition-speed), transform var(--transition-speed);
    /* center the button */
    margin: 0 auto;
    margin-left: 10px;
    margin-right: 10px;
    /* font-family: 'Manrope', sans-serif; */
}   

#shopify-fetch-button3 {
    width: auto;
    padding: 8px 15px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 5px;
    transition: background var(--transition-speed), transform var(--transition-speed);
    /* center the button */
    margin: 0 auto;
}   


.input-field-csv {

    padding: 10px;
    font-size: 13px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    outline: none;
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
    margin-bottom: 10px;
    /* background */
    background-color: var(--input-bg);
    color: var(--input-text);
    /* font manrope */
    font-family: 'Manrope', sans-serif;
    /* pointer */
    cursor: pointer;
}



.column-adder input, .column-adder textarea {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    outline: none;
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
    margin-bottom: 10px;
    /* background */
    background-color: var(--input-bg);
    color: var(--input-text);
    /* font manrope */
    font-family: 'Manrope', sans-serif;
}

/* border input field when typing */
.column-adder input:focus, .column-adder textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 5px var(--primary-color);
}

/* make sure the column-adder h3 text is centered */
.column-adder h3 {
    text-align: center;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    color: var(--text-color);
}

.add-store-button {
    color: #ffffff;
}

/* make this button as wide as its text content */
.add-column-button {
    width: auto;
    padding: 8px 15px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 5px;
    transition: background var(--transition-speed);
    /* center the button */
    margin: 0 auto;
}


/* Styles for the '+' icon button */
.upload-csv-button {
    padding: 10px;
    font-size: 15px;
    border-radius: 50%;
    background-color: transparent;
    color: var(--primary-color);
    cursor: pointer;
    border: none;
    transition: background var(--transition-speed), transform var(--transition-speed);
}

.upload-csv-button:hover {
    color: var(--primary-color);
}

.upload-csv-button i {
    pointer-events: none;
}

.hidden {
    display: none;
}


/* make sure <div class="chat-window" id="chatWindow"> is only vertically scrollable, disable horizontal scrolling */
.chat-window {
    overflow-x: hidden;
    overflow-y: auto;
}

/* chat window user message 10 px top margin */
.chat-window .chat-message.user {
    margin-top: 10px;
}

.chatWindow .chat-message.user {
    margin-top: 10px;
}


/* Update the product-card styles */
.product-card {
    background-color: var(--sidebar-bg);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 12px var(--card-shadow);
    max-width: 700px;
    width: 85%; /* Ensure the card has a fixed width */
    max-height: 95%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--text-color);
}

/* Image styling inside product-card */
.product-card img {
    width: 70%; /* Make the image fill the width of the card */
    height: 70%;
    /* border: 2px solid var(--primary-color); Add primary colored border */
    border-radius: 5px;
    margin-bottom: 20px;
}

/* Styles for Buttons */
.product-card button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    border: none;
    background-color: var(--primary-color);
    color: var(--text-color);
    transition: background var(--transition-speed);
}

.product-card button:hover {
    background-color: var(--button-bg);
}


/* while product card is opened, make the background blurry */
.overlay {
    backdrop-filter: blur(15px);
}

/* Loading Placeholder Animation */
@keyframes loadingAnimation {
    0% { background-position: 100% 100; }
    100% { background-position: -100% 0; }
}



/* Designer Interface Styles */
.designer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

#designerImageContainer {
    margin-top: 20px;
    width: 700px;
    height: 700px;
}



#designerImageContainer img {
    max-width: 100%;
    border-radius: 10px;
    /* center in its container/section */
    margin: 0 auto;
    display: block;

}




/* Overlay Styles */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}

/* Image Editor Canvas */
.image-editor-canvas {
    cursor: url('eraser-cursor.png'), auto; /* Customize cursor if desired */
    border: 1px solid var(--border-color);
    border-radius: 5px;
}

/* Adjust Sidebar Menu Item Icon */
.menu-item i {
    margin-left: auto;
}

/* Adjustments for the New Menu Item */
.menu-item i.fa-paint-brush {
    font-size: 16px;
}



/* Buttons container inside product-card */
.product-card .buttons-container {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

/* Styling for additional thumbnails */
.additional-images-container {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 20px;
    
}

/* max height on mobile */
@media (max-width: 768px) {
    .product-card {
        max-height: 660px;
        overflow-y: auto;
    }
}

.additional-images-container .thumbnail {
    width: 60px;
    height: auto;
    cursor: pointer;
    border: 2px solid transparent; /* Default border */
    border-radius: 5px;
    transition: border-color 0.3s ease, transform 0.2s ease;
}

/* Highlight the selected thumbnail */
.additional-images-container .thumbnail.selected {
    border-color: var(--primary-color);
    transform: scale(1.1); /* Slightly enlarge the selected thumbnail */
}

/* Add hover effect for thumbnails */
.additional-images-container .thumbnail:hover {
    border-color: var(--button-hover);
}





.loading-overlay {
    animation: glowingEffect 1.5s infinite;
    /* place  */
}

@keyframes glowingEffect {
    0% { opacity: 0.7; }
    50% { opacity: 1; }
    100% { opacity: 0.7; }
}






.chatbot-customization {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    /* background-color: #f9f9f9; */
    border-radius: 10px;
    /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
    font-family: 'Poppins', sans-serif;
    /* margin left and right */
}

/* on desktop */
@media (min-width: 768px) {
    .chatbot-customization {
        width: 80%;
        margin: 0 auto;
    }
}


.customization-row {
    display: flex;
    align-items: center;
    gap: 15px;
}

.customization-row label {
    flex: 1;
    min-width: 100px;
    font-size: 14px;
    font-weight: 500;
    /* color: #333; */
}

.customization-row .input-field {
    flex: 2;
    /* padding: 8px; */
    /* border: 1px solid #ddd; */
    /* border-radius: 5px; */
    /* font-size: 14px; */
}

.customization-row .input-field[type="color"] {
    padding: 0;
    height: 35px;
    width: 60px;
    cursor: pointer;
}



@media screen and (max-width: 768px) {
    .customization-row {
        flex-direction: column;
        align-items: flex-start;
    }

    /* customization input fields with text (not color) 90% width */
    .customization-row .input-field[type="text"] {
        width: 90%;
    }

    .customization-row label {
        min-width: unset;
        flex: unset;
    }

    .shopify-fetch-button {
        align-self: center;
        width: 100%;
    }
}



.sidebar-header-store {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
}

/* center store-display horizontally */
.store-display {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
}



.store-form-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

.store-form-container input[type="text"], .store-form-container textarea {
    padding: 10px;
    font-size: 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    outline: none;
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
    background-color: var(--input-bg);
    color: var(--input-text);
    font-family: 'Poppins', sans-serif;
}

.store-form-container input[type="text"], .store-form-container textarea {
    width: 100%;
}

.store-form-container button {
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 8px;
    background-color: var(--primary-color);
    color: var(--text-color);
    cursor: pointer;
    border: none;
    transition: background var(--transition-speed), transform var(--transition-speed);
    /* font-family: 'Manrope', sans-serif; */
    width: fit-content;
    /* center button */
    margin: 0 auto;

}

.store-form-container button:hover {
    background-color: var(--button-hover);
}

/* text are more height */
.store-form-container textarea {
    height: 200px;
}




.store-dropdown {
    /* /* position: absolute; */
    top: 100%;
    left: 0; 
    width: 100%;
    background-color: var(--sidebar-bg);
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 10002 !important;
    /* display: none; */
    padding: 10px;
    color: var(--sidebar-bg);
    width: 200px;
    margin-top: 2px;
    /* rounded borders */
    border-radius: 5px;
    /* center it */
    margin: 0 auto;
    /* spac etop */
    margin-top: 3px;
    height: fit-content;
    max-height: 300px;
    min-height: 50px;
    overflow-y: auto;
}



.button-chatbot-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

/* on desktop */
@media (min-width: 768px) {
    .button-chatbot-container {
        width: 80%;
        margin: 0 auto;
    }
}











/* Rule Management Section */
.rule-management {
    margin: 20px 0;
    color: #fff;
}

.rule-form {
    margin: 20px 0;
    padding: 10px;
    background-color: var(--sidebar-bg);
    border-radius: 5px;
    width: 80%;
}

.rule-form.hidden {
    display: none;
}

.rule-condition,
.rule-action {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.rule-select {
    margin: 0 5px;
    padding: 5px;
    color: var(--text-color);
}

.rule-input {
    margin-left: 5px;
    padding: 5px;
    color: var(--text-color);
}

/* Buttons */
.add-rule-button,
.apply-rules-button,
.save-rule-button,
.cancel-rule-button,
.edit-rule-button {
    margin: 5px;
    padding: 10px 15px;
    background-color: #3498db;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.add-rule-button:hover,
.apply-rules-button:hover,
.save-rule-button:hover,
.cancel-rule-button:hover,
.edit-rule-button:hover {
    background-color: var(--button-bg);
}

.delete-rule-button {
    margin: 5px;
    padding: 10px 15px;
    color: #3498db;
    background-color: transparent;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* center the delete button */
.delete-rule-button {
    margin: 0 auto;
    display: block;
}

/* Container Layout */


.rules-list-container {
    flex: 1 1 45%;
    max-height: 660px;
    overflow-y: auto;
    background: var(--sidebar-bg);
    border-radius: 10px;
    padding: 15px;
    box-sizing: border-box;
    margin-top: 20px;
    margin-bottom: 20px;
}

.rule-form-container {
    flex: 1 1 45%;
    background: var(--sidebar-bg);
    border-radius: 10px;
    padding: 20px;
    color: #333;
    box-sizing: border-box;
}

.button-container p {
    color: #333;
}

/* Rules List Items */
.rule-item {
    background: var(--suggestion-bg);
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 8px;
    color: #ffffff;
    cursor: grab;
    transition: background 0.3s ease;
    user-select: none; /* Standard syntax */
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE10+/Edge */
}

.rule-item:hover {
    background: var(--suggestion-hover-bg);
}

/* Divider Line */
.rule-item:not(:last-child) {
    border-bottom: 1px solid rgba(14, 13, 13, 0.1);
}

/* Change cursor during dragging */
.rule-item:active {
    cursor: grabbing;
}

/* Optional: Style for the drag handle */
.rule-handle {
    margin-right: 10px;
    cursor: grab;
}

.delete-rule-button {
    margin-top: 10px;
    padding: 6px 10px;
    color: #f44336;
    background-color: transparent;
    border: 1px solid #f44336;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.delete-rule-button:hover {
    background-color: #f44336;
    color: #ffffff;
}

/* Rule Form */
.rule-form {
    margin: 20px 0;
    padding: 20px;
    background-color: var(--background-color);
    border-radius: 8px;
    width: 100%;
    max-width: none;
}

.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}

.form-group label {
    margin-bottom: 5px;
    font-weight: bold;
    color: #ffffff;
}

.rule-condition, .rule-action {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.rule-select, .rule-input {
    padding: 8px;
    border-radius: 5px;
    border: 1px solid #959393;
    background: var(--background-color);
    color: #333;
    min-width: 120px;
}

.rule-select:focus, .rule-input:focus {
    border-color: #129ed9;
    outline: none;
}

.action-field-container.hidden, #actionValueContainer.hidden, #replaceTextContainer.hidden {
    display: none;
}

.rule-scope {
    margin: 15px 0;
    color: #333;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
}

.rule-scope label {
    margin-right: 15px;
    cursor: pointer;
}

/* Action Buttons */
.button-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.add-rule-button, .add-column-button, .save-rule-button, .cancel-rule-button, .apply-rules-button, .handle-sync-button {
    padding: 8px 12px;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    border: none;
    transition: background-color 0.3s ease;
}

.add-rule-button, .apply-rules-button, .handle-sync-button {
    background: #129ed9;
}

.add-rule-button:hover, .apply-rules-button:hover, .handle-sync-button:hover {
    background: #0b7dbf;
}

/* center on middle horizontally */
.add-rule-button {
    margin: 0 auto;
}

.add-column-button, .save-rule-button {
    background: #9a9a9a;
}

.add-column-button:hover, .save-rule-button:hover {
    background: #666;
}

.cancel-rule-button {
    background: #f44336;
}

.cancel-rule-button:hover {
    background: #e53935;
}

/* Apply and Sync Buttons */
.apply-sync-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
}

.sync-options {
    display: flex;
    gap: 15px;
}

.custom-radio {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #333;
}

.handle-sync-button {
    background-color: #129ed9;
    color: #fff;
    padding: 8px 12px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.handle-sync-button:hover {
    background-color: #0b7dbf;
}

/* Validation Errors */
.validation-errors-container {
    background: var(--background-color);
    color: #fff;
    border-radius: 10px;
    padding: 20px;
    margin-top: 20px;
}

.validation-errors-container h3 {
    margin-top: 0;
    color: #f44336;
}

.validation-errors-container ul {
    list-style: none;
    padding: 0;
}

.validation-errors-container li {
    background: var(--background-color);
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 8px;
}

.validation-errors-container li p {
    margin: 5px 0;
    color: #ffcccb;
}

/* Responsive Adjustments */
@media (min-width: 768px) {
    .rule-management {
        width: 80%;
        margin: 0 auto;
    }
}

/* some spacing */
.rules-and-form-container {
    /* display: flex; */
    gap: 20px;
    margin-top: 20px;
}

@media (max-width: 768px) {
    .rules-and-form-container {
        flex-direction: column;
        padding: 0 10px;
    }
    
    .rules-list-container, .rule-form-container {
        width: 100%;
    }
    
    .rules-list-container {
        max-height: 300px; 
    }
    
    .apply-sync-section {
        flex-direction: column;
        gap: 10px;
    }
    
    .sync-options {
        justify-content: center;
    }
}





.subscribe-form {
    /* hide */
    /* display: none; */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center !important;
    align-items: center !important;
    z-index: 100011212121;
}

/* on mobile, make the form correct height, and scrollable */
@media (max-width: 768px) {
    .subscribe-form {
        height: 100%;
        width: 100%;
        /* make sure the top doenst exceed the screen */
        top: 0;
        
        
    }
}


.subscribe-form-content {
    position: relative; /* Ensures the close button is positioned relative to the form */
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    max-width: 1000px; /* Limits the width of the popup */
    width: 90%;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* on mobile */
@media (max-width: 768px) {
    .subscribe-form-content {
        max-height: 500px;
        overflow-y: auto;
    }
}


.subscribe-form.hidden {
    display: none;
}



/* Close Button */
.close-button {
    position: absolute;
    top: 13px;
    right: 13px;
    background: none;
    border: none;
    font-size: 24px;
    color: #666;
    cursor: pointer;
    transition: color 0.2s ease;
}

.close-button:hover {
    color: #333;
}

/* Title and Subtitle */
.form-title {
    font-size: 24px;
    margin-bottom: 10px;
    color: #333;
}

.form-subtitle {
    font-size: 16px;
    margin-bottom: 20px;
    color: #666;
}

/* Pricing Tiers */
.pricing-tiers {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.pricing-tier {
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    width: 300px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.tier-title {
    font-size: 18px;
    margin-bottom: 10px;
    color: #333;
}

.tier-description {
    font-size: 14px;
    margin-bottom: 10px;
    color: #666;
}

.tier-price {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #444;
}

.tier-features {
    list-style-type: none;
    padding: 0;
    margin: 10px 0;
    font-size: 14px;
    color: #555;
}

.tier-features li {
    margin-bottom: 5px;
}

/* Buttons */
.subscribe-button {
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.subscribe-button:hover {
    background: var(--primary-color);
}

/* Responsive Design for Mobile */



.tooltip {
    position: relative;
    /* cursor: help; */
  }
  
.tooltip .tooltiptext {
    visibility: hidden;
    width: 160px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px;
    position: absolute;
    z-index: 99;
    bottom: 125%; /* Show above the element */
    left: 50%;
    margin-left: -80px;
    opacity: 0;
    transition: opacity 0.2s;
  }
  
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
  }


  .feed-settings-container {
    background-color: var(--sidebar-bg);
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
    font-family: 'Poppins', sans-serif;
    color: #333;
  }
  
  /* Title */
  .feed-settings-container h3 {
    text-align: center;
    margin-bottom: 15px;
    font-size: 18px;
  }
  
  /* Each row is a flex container. 
     Wrap if items don't fit. */
  .settings-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 15px;
  }
  
  /* Row layout for large screens */
  @media (min-width: 769px) {
    .settings-row.three-items > div {
      flex: 1 1 calc(33.333% - 20px);
    }
    .settings-row.two-items > div {
      flex: 1 1 calc(33.333% - 20px);
    }
    .settings-row.single-item > div {
      flex: 1 1 100%;
    }
  }
  
  /* 
     The "field-group" is each label+input pair.
     We do display: flex here so the label and input
     are side by side. 
  */
  .field-group {
    display: flex;
    align-items: center;
    gap: 8px;    /* space between label and input */
  }
  
  /* 
     The label is now inline-block (or block).
     We remove pointer: none issues 
  */
  .field-group label {
    cursor: default;
    font-weight: 500;
    margin: 0; /* reset margin if needed */
  }
  
  /* The tooltip class for the label text */
  .feed-settings-container .tooltip {
    position: relative;
    /* cursor: help;  */
    /* or 'default' if you prefer */
  }
  
  /* The tooltip text itself */
  .feed-settings-container .tooltip .tooltiptext {
    visibility: hidden;
    width: 200px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px;
  
    position: absolute;
    z-index: 99;
    bottom: 130%;
    left: 50%;
    margin-left: -100px;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
  }
  
  /* Show tooltip on hover */
  .feed-settings-container .tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
  }
  
  /* Inputs and selects */
  .field-group select,
  .field-group input[type="text"] {
    padding: 8px;
    border-radius: 5px;
    border: 1px solid #959393;
    background: var(--background-color);
    color: #333;
    min-width: 100px;
  }
  
  /* For the checkbox, we do a small margin-left so there's space after label text */
  .field-group input[type="checkbox"] {
    margin-left: 5px;
  }
  
  /* Focus highlight */
  .field-group select:focus,
  .field-group input[type="text"]:focus {
    border-color: #129ed9;
    outline: none;
  }
  
  .feed-settings-container.hidden {
    display: none !important;
  }




.button-container h3 {
    color: #333;
}


.custom-radio.tooltip {
    max-width: 200px;
}

/* Style for the keyword insights section */
#keywordInsightsSection {
    margin-top: 20px;
    /* No fixed max-height here as it's handled by the table container */
}

/* Style for the keyword insights table */
#keywordInsightsTable table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Poppins', sans-serif; /* Nice font */
}

#keywordInsightsTable th, #keywordInsightsTable td {
    border: 1px solid #ddd;
    padding: 8px;
}

#keywordInsightsTable tr:nth-child(even) {
    background-color: #f9f9f9;
}

#keywordInsightsTable tr:hover {
    background-color: #f1f1f1;
}

#keywordInsightsTable th {
    padding-top: 12px;
    padding-bottom: 12px;
    background-color: #f2f2f2; /* Light gray background */
    color: #333; /* Updated text color from white to #333 */
    text-align: left;
    font-size: 14px;


}

/* Style for the chart container */
#keywordChartContainer {
    width: 100%;
    height: 400px; /* Adjust as needed */
    font-family: 'Poppins', sans-serif; /* Nice font */
    margin-bottom: 20px;
}

/* Responsive adjustments */
@media (min-width: 769px) {
    #keywordInsightsTable {
        display: inline-block;
        width: 48%;
        vertical-align: top;
        max-height: 400px; /* Ensure it matches the chart's height */
    }

    #keywordChartContainer {
        display: inline-block;
        width: 48%;
        margin-left: 4%;
    }
}

@media (max-width: 768px) {
    #keywordInsightsTable {
        width: 100%;
        margin-bottom: 20px;
        max-height: none; /* Remove max-height on mobile to allow full height if needed */
        overflow-y: auto;  /* Keep scrollable on smaller screens */
    }

    #keywordChartContainer {
        width: 100%;
        height: 400px; /* Maintain chart height */
        margin-left: 0;
    }
}

#merchantOverviewSection {
    display: flex;
    flex-wrap: wrap;  /* so the charts can wrap to the next line on small screens */
    gap: 20px;        /* space between charts */
  }
  
#merchantOverviewSection > div {
    /* each chart container gets a max width so they appear side by side on desktop */
    flex: 1 0 45%;  /* 45% width, allows 2 side-by-side plus some margin */
    box-sizing: border-box;
}



/* Tooltip label */
.field-group label {
    cursor: default;
    font-weight: 500;
    margin: 0; /* reset margin if needed */
    color: #333;
}


#saveAutoSync {
    padding: 8px 8px;
    background-color: #3498db;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    transition: background-color 0.3s ease;
    margin-top: 5px;
}