.ai-compensation-calculator {
    background-color: #3330E4; /* Dark Blue */
    color: white;
    padding: 20px;
    border-radius: 10px;
    font-family: sans-serif;
    max-width: 600px; /* Adjust as needed */
}

.ai-compensation-calculator h3 {
    color: white;
    font-size: 2em;
    margin-bottom: 20px;
    text-align: left;
}

.ai-compensation-calculator label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 1.1em;
}

.ai-compensation-calculator input[type="text"],
.ai-compensation-calculator select,
.ai-compensation-calculator textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: none;
    border-radius: 5px;
    box-sizing: border-box; /* Important: Keeps padding inside the width */
    font-size: 1em;
    color: #333; /* Input text color */
}

/* Style the required asterisk */
.ai-compensation-calculator label::after {
    content: " *";
    color: #ff4d4f; /* Adjust the color for the asterisk */
}

.ai-compensation-calculator button {
    background-color: white;
    color: #3330E4; /* Dark Blue */
    padding: 12px 24px;
    border: 2px solid white;
    border-radius: 30px;
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    font-weight: bold;
}

.ai-compensation-calculator button:hover {
    background-color: #3330E4;
    color: white;
}

.ai-compensation-calculator #compensation-results {
    margin-top: 20px;
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.1); /* Slightly transparent white */
    border-radius: 5px;
    font-size: 1.1em;
}

.loading-spinner {
    border: 4px solid rgba(255, 255, 255, 0.1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border-left-color: #fff;
    animation: loading-spinner 1s linear infinite;
    margin-top: 10px; /* Add margin for spacing */
}

@keyframes loading-spinner {
    100% {
        transform: rotate(360deg);
    }
}

.wp-block-post-title{
	display:none !important;
}
.wp-block-post-featured-image :where(img) {
    box-sizing: border-box;
    height: 800px;
    max-width: 100%;
    vertical-align: bottom;
    overflow: hidden;
}
.ai-compensation-calculator {
    position: absolute;
    top: 400px;
    left: 200px;
    width: 30%;
}

.ai-compensation-calculator > h3 {
    text-align: center;
}

.ai-compensation-calculator {
    display: flex;
    width: 100%;
    border-radius: 10px;
    overflow: hidden; /* Prevents content from bleeding out of rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: adds a subtle shadow */
    margin: 20px auto; /* Centers the calculator and adds spacing */
	font-family: sans-serif;
	max-width: 1000px;
	z-index: 10;
}

/* Style for the left side (Form Inputs) */
.ai-compensation-calculator > div:first-child {
    background-color: #3330E4; /* Darker Blue */
    color: #fff;  /* White text for readability */
    padding: 30px;
    width: 100%; /* Adjust as needed */
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Style the heading on the left side */
.ai-compensation-calculator > div:first-child h3 {
    font-size: 1.75em;
    margin-bottom: 20px;
	text-align: center;
}

/* Style labels */
.ai-compensation-calculator label {
    display: block; /* Ensures each label is on a new line */
    margin-bottom: 5px;
    font-weight: bold;  /* Makes labels stand out */
	font-size: 1em;
}

/* Style text inputs and select */
.ai-compensation-calculator input[type="text"],
.ai-compensation-calculator select {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: none;
    border-radius: 5px;
    box-sizing: border-box; /* Prevents padding from increasing the width */
    font-size: 1em;
}

/* Style the button */
#calculate-compensation {
    background-color: transparent;
    color: #fff;
    padding: 12px 30px;
    border: 2px solid #fff;
    border-radius: 25px; /* Rounded button edges */
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s, color 0.3s; /* Smooth hover effect */
    margin-top: 15px;
}

#calculate-compensation:hover {
    background-color: #fff;
    color: #3330E4;
}


/* Style for the right side (Description) */
#compensation-results {
    background-color: #211F84; /* Darkest Blue */
    color: #fff;
    padding: 30px;
    width: 50%; /* Adjust as needed */
    box-sizing: border-box;
	overflow-x: scroll;
	max-height: 480px;
}

#compensation-results h2 {
    font-size: 1.75em;
    margin-bottom: 15px;
}

#compensation-results p {
    font-size: 1em;
    line-height: 1.6;
}

/* Smaller screens */
@media (max-width: 768px) {
    .ai-compensation-calculator {
        flex-direction: column; /* Stack form and results on smaller screens */
    }

    .ai-compensation-calculator > div:first-child,
    #compensation-results {
        width: 100%;  /* Full width on smaller screens */
        padding: 20px;
    }
}

/* Even smaller screens */
@media (max-width: 480px) {
    .ai-compensation-calculator > div:first-child h3 {
        font-size: 1.5em;
    }

    .ai-compensation-calculator label {
        font-size: 0.9em;
    }

    .ai-compensation-calculator input[type="text"],
    .ai-compensation-calculator select,
    #calculate-compensation {
        font-size: 0.9em;
    }

    #compensation-results h2 {
        font-size: 1.5em;
    }

    #compensation-results p {
        font-size: 0.9em;
    }
}

/* Styles for the little spark icon and AI Calculator text */
.ai-calculator-title {
    display: flex;
    align-items: center;
    font-size: 1em;
    margin-bottom: 20px;
	justify-content: center;
}

.ai-calculator-title::before {
    content: '\2726'; /* Unicode character for a star/spark */
    margin-right: 5px;
    font-size: 1.2em; /* Adjust size as needed */
}


/* Remove br tags */
br {
    display: none; /* Or remove, depending on what you want */
}
.loading-spinner {
    position: absolute;
    bottom:50px;
	right:150px;
}
.ai-compensation-calculator {
    display: flex;
    width: 50%; /*Start width*/
    border-radius: 10px;
    overflow: hidden; /* Prevents content from bleeding out of rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: adds a subtle shadow */
    margin: 20px auto; /* Centers the calculator and adds spacing */
	font-family: sans-serif;
	max-width: 500px; /*Start max width*/
	z-index: 10;
}

#compensation-results {
	display:none;
}
#compensation-results{ color: #FFF; overflow-x: hidden;}
#compensation-results h1, h2{ color: #FFF !important;}

/* Error styling */
.ai-compensation-calculator input.error,
.ai-compensation-calculator select.error,
.ai-compensation-calculator textarea.error {
    border: 1px solid #ff3860 !important;
}

.ai-compensation-calculator .error-message {
    color: #ff3860;
    font-size: 14px;
    margin-top: 10px;
    padding: 10px;
    background-color: rgba(255, 56, 96, 0.1);
    border-radius: 4px;
}

/* Google reCAPTCHA styling */
.ai-compensation-calculator .g-recaptcha {
    margin: 10px 0;
}