/**
 * CTA Button Component
 * Floating call-to-action button styles
 */
.assistant-cta-container {
    position: fixed;
    bottom: 0;  /* Changed from 0 to give some spacing */
    z-index: 9999;
    margin: 0;
    width: auto;
    display: inline-block;
    left: auto;  /* Reset default left positioning */
}
.assistant-cta-container.right {
    right: 80px;  /* 80px from right edge */
    left: auto;
}
.assistant-cta-container.left {
    left: 80px;  /* 80px from left edge */
    right: auto;
}

/* CTA Button Styling */
.assistant-cta-button {
    position: relative; /* Allows positioning of pseudo-elements */
    display: flex; /* Use flexbox for proper alignment of content */
    flex-direction: row; /* Align content horizontally */
    align-items: center; /* Center align vertically */
    justify-content: flex-start; /* Change from space-between to flex-start */
    width: 382px; /* Width as per Figma specs */
    height: 75px; /* Height as per Figma specs */
    padding: 0 40px;  /* Simplify padding, remove top/bottom padding */
    border-radius: 20px 20px 0 0; /* Rounded corners as seen in Figma */
    background: linear-gradient(180deg, var(--cta-start-color, #0066CC) 0%, var(--cta-end-color, #003366) 100%);
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    color: #ffffff; /* White text color */
    font-size: 16px; /* Font size */
    font-weight: bold; /* Bold font weight */
    text-decoration: none; /* Remove underline from links */
    transition: all 0.3s ease; /* Smooth hover transitions */
    cursor: pointer; /* Pointer cursor on hover */
    gap: 0; /* Remove gap as we'll use specific margins */
    min-height: 75px;  /* Ensure consistent height */
    max-height: 75px;  /* Prevent expansion */
    box-sizing: border-box;  /* Include padding in width calculation */
}

/* Star Icon (Pseudo-element) */
.assistant-cta-button::before {
    content: '';
    width: 39.793px;
    height: 39.793px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none"><path d="M8.29875 38.1777L10.4116 33.629L14.9654 31.5802L10.4333 29.4674L8.36794 24.9136L6.27172 29.4457L1.70127 31.511L6.25001 33.6073M24.9049 33.2901L29.0975 24.1927L38.2382 20.0952L29.1407 15.9026L25.0433 6.76185L20.8506 15.8593L11.7099 19.9568L20.8074 24.1494M8.41983 14.9654L10.5326 10.4334L15.0865 8.36797L10.5543 6.27175L8.48902 1.70131L6.39271 6.25004L1.82235 8.29878L6.371 10.4117" fill="white"/></svg>');
    /* transform: rotate(-179.701deg); */
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    margin: 0;
    position: absolute;
    left: 40px; /* Position star 40px from left edge */
    z-index: 1;  /* Ensure star stays above */
}

/* Text Styling */
.assistant-cta-text {
    display: flex; /* Stack text vertically */
    flex-direction: column;
    align-items: center; /* Change from flex-start to center */
    gap: 4px; /* Spacing between title and subtitle */
    margin: 0;
    padding: 0;
    margin-left: 40px;  /* Reduce margin to remove gap */
    text-align: center; /* Ensure text is centered */
    flex-grow: 1; /* Allow text container to take up remaining space */
    width: calc(100% - 120px); /* Account for left margin (80px) and right spacing (40px) */
    position: relative;
}

/* Hover Effect */
.assistant-cta-button:hover {
    transform: none;           /* Remove existing transform */
    box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.15);
    /* Darken the gradient colors by 10% on hover */
    filter: brightness(0.9);
}

.assistant-cta-button:hover .assistant-cta-subtitle {
    text-decoration: underline;
}

/* Title Text */
.assistant-cta-title {
    font-size: 20px;
    font-weight: 700; /* Bold weight for title */
    display: flex;
    align-items: center; /* Center align the lightning icon */
    gap: 0; /* Space between text and lightning icon */
    line-height: 28px;
    text-align: center; /* Ensure title is centered */
    color: white;
}
.assistant-cta-title .lightning-bolt {
    font-size: 1.2em;
    color: #61dafb; /* Accent color for the icon; tweak to your brand */
}

/* Title Text - Make more specific and override-proof */
.assistant-cta-button h3.assistant-cta-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    line-height: 28px !important;
    text-align: center !important;
    color: white !important;
    margin: 0 !important;
    padding: 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    background: transparent !important;
}

/* Subtitle Text */
.assistant-cta-subtitle {
    font-size: 18px;
    font-weight: 300; /* Regular weight for subtitle */
    opacity: 0.9; /* Slightly muted text */
    line-height: 1.4; /* Compact line height */
    text-align: center; /* Ensure subtitle is centered */
    color: white;
}

/* Subtitle Text - Make more specific and override-proof */
.assistant-cta-button p.assistant-cta-subtitle {
    font-size: 18px !important;
    font-weight: 300 !important;
    opacity: 0.9 !important;
    line-height: 1.4 !important;
    text-align: center !important;
    color: white !important;
    margin: 0 !important;
    padding: 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    background: transparent !important;
}

/* Ensure responsive behavior */
@media screen and (max-width: 440px) {
    .assistant-cta-container {
        left: 0;
        right: 0;
        width: 100%;  /* Full width container */
        padding: 0;   /* Remove padding */
    }

    .assistant-cta-container.right,
    .assistant-cta-container.left {
        left: 0;
        right: 0;
    }

    .assistant-cta-button {
        width: 100%;  /* Full width button */
        max-width: none;  /* Remove max-width restriction */
        border-radius: 20px 20px 0 0;
        margin: 0;
        padding: 0 20px;  /* Adjust padding for mobile */
    }

    /* Adjust star position for mobile */
    .assistant-cta-button::before {
        left: 20px;  /* Adjust star position for mobile */
    }

    /* Adjust text container for mobile */
    .assistant-cta-text {
        margin-left: 30px;  /* Adjust margin for mobile */
        width: calc(100% - 90px);  /* Adjust width calculation for mobile */
    }
}

/* Inactive State */
.cta-field.inactive {
    opacity: 0.5;
    pointer-events: none;
}
.cta-field-wrapper.inactive {
    opacity: 0.5;
    cursor: not-allowed;
}
.cta-field-wrapper.inactive input {
    pointer-events: none;
}