/* Import Google Fonts - Using Roboto for a clean, modern look */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');

/* General body styles - Sets font, colors, and removes default margins/padding */
body {
    font-family: 'Roboto', sans-serif;
    color: #202124;
    /* Dark gray text for readability */
    background-color: #ffffff;
    /* White background */
    margin: 0;
    padding: 0;
}

/* Container styles for the Terms and Privacy pages */
.terms-container,
.privacy-container {
    max-width: 800px;
    /* Limit content width for better readability */
    margin: 40px auto;
    /* Center content with top/bottom spacing */
    padding: 20px;
    /* Add padding inside the container */
    line-height: 1.6;
    /* Improve text readability */
}

hr {
    border: none;
    border-top: 1px solid #ddd;
    /* Thin grey line */
    margin: 30px 0;
    /* Spacing above and below */
}


/* Headings - Ensure a clear separation between sections */
h1,
h2 {
    color: #202124;
    /* Dark gray for consistency */
    border-bottom: 2px solid #eee;
    /* Light gray underline */
    padding-bottom: 5px;
    /* Space below the heading */
    margin-top: 30px;
    /* Space above each heading */
    font-weight: 700;
    /* Bold text for emphasis */
}

/* Lists - Ensure proper spacing */
ul {
    padding-left: 20px;
    /* Indent list items */
}

/* Links - Uses Ideakyn's primary color */
a {
    color: #1489EF;
    /* Blue links matching Ideakyn's branding */
    text-decoration: none;
    /* Remove default underline */
    font-weight: 400;
    /* Normal font weight */
}

/* Link hover effect - Adds underline on hover */
a:hover {
    text-decoration: underline;
}

/* Responsive adjustments for smaller screens (max width: 768px) */
@media (max-width: 768px) {

    .terms-container,
    .privacy-container {
        padding: 15px;
        /* Reduce padding for smaller screens */
    }
}

/* Apply the same heading styles for consistency */
h1 {
    color: #202124;
    border-bottom: 2px solid #eee;
    padding-bottom: 5px;
    margin-top: 30px;
    font-weight: 700;
    font-size: 2.25rem;
    /* 36px if root font-size is 16px */
}

/* Apply the same heading styles for consistency */

h2 {
    color: #202124;
    border-bottom: 2px solid #eee;
    padding-bottom: 5px;
    margin-top: 30px;
    font-weight: 700;
    font-size: 1.75rem;
    /* 28px */
}

/* List styling - Consistent indentation */
ul {
    padding-left: 20px;
}

/* Link styling - Repeated for consistency */
a {
    color: #1489EF;
    text-decoration: none;
    font-weight: 400;
}

/* Link hover effect */
a:hover {
    text-decoration: underline;
}

/* General body styles - Sets font, colors, and removes default margins/padding */
body {
    font-family: 'Roboto', sans-serif;
    color: #202124;
    /* Dark gray text for readability */
    background-color: #ffffff;
    /* White background */
    margin: 0;
    padding: 0;
}

/* Disabled elements - Styles for indicating non-interactive items */
.disabled {
    color: #ccc;
    /* Light gray text for disabled items */
    background-color: #f0f0f0;
    /* Light gray background */
    cursor: not-allowed;
    /* Show unclickable cursor */
}

/* Spinner Overlay */
.spinner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    /* Keep background dimming */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* Spinner Box */
.spinner-content {
    display: flex;
    align-items: center;
    gap: 12px;
    /* Space between text and spinner */
    background: #1489EF;
    /* Blue background */
    padding: 15px 25px;
    border-radius: 25px;
    /* Rounded like a button */
    color: white;
    font-size: 18px;
    font-weight: bold;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    /* Soft shadow */
}

/* Spinner Animation */
.spinner {
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top: 3px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Rotation Keyframes */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Report container */
#report-container {
    display: block;
    /* Ensure it's visible */
    height: auto;
    /* Allow it to expand */
    max-height: none;
    /* Prevent restrictions */
    overflow: visible;
    /* Ensure text isn't hidden */
    min-height: 100%;
}

/* Last query container */
#lastquery-section {
    display: none;
    /* initially hidden */
    text-align: center;
    /* center contents */
    margin-bottom: 0px;
    /* add spacing below this section */
}

/* Query wrapper */
#query-wrapper {
    margin-bottom: 20px;
    /* space below the entire query-wrapper */
}

/* button container */
#button-container {
    margin-top: 0px;
    /* space above the button container */
}

/* Tooltip styles for button hover text on index */
.tooltip {
    position: relative;
    display: inline-block; /* ensures button + tooltip container behaves correctly */
}

.tooltiptext {
    visibility: hidden;
    display: inline-block;          /* shrink to fit content */
    width: max-content;             /* width matches text */
    max-width: 300px;               /* wrap if exceeds 300px */
    background-color: #333;
    color: #fff;
    text-align: left;
    padding: 8px;
    border-radius: 4px;
    position: absolute;
    z-index: 1;
    bottom: 125%;                   /* above the button */
    left: 50%;
    transform: translateX(-50%);
    white-space: normal;            /* allow wrapping */
    word-wrap: break-word;          /* wrap long words if needed */
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

#button-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    text-align: center;
}

#button-container button {
    padding: 14px 24px;
    font-size: 16px;
    color: white;
    background-color: #1489EF;
    border: none;
    border-radius: 28px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

#button-container button:hover {
    background-color: #1077D0;
}