/*
* Style settings of AI Embedder plugin
*
* AI Embedder has following default HTML elements:
*
* .ai-embedder-very-first-time
*   Show these elements on very first time visiting the service
*
* .ai-embedder-input-frame
*   Frame element of the input, needed a specially for checkboxs and radio buttons in WPForms
*
* .ai-embedder-input
*   Get input for the script from this elements
*
* .ai-embedder-filepond-element
*   INPUT element for the Filepond file upload
*
* .ai-embedder-answer-frame
*   Frame element of the answer of the AI query
*
* .ai-embedder-answer
*   Answer holder element. The content of this element is replaced with the answer html.
*
* .ai-embedder-button
*   Send button of the AI query
*
* .ai-embedder-wait-animation
*   Element to show the animation during the answer query
*
* .ai-embedder-uploaded-images-frame
*   Where to put and show the uploaded elements after the upload
*
* .ai-ebedder-error-popup
*   Popup of the error message
*
* .ai-embedder-list
*   Frame of the 1-2-3 list
*
* .ai-embedder-list-item
*   List item holder
*
* .ai-embedder-list-counter
*   List counter element
*
* .ai-embedder-list-headline
*   Headline of the list element
*
* .ai-embedder-list-description
*   Description of the list element
*/

.ai-embedder-very-first-time, .ai-embedder-input, .ai-embedder-filepond-element, .ai-embedder-answer-frame, .ai-embedder-answer, .ai-embedder-wait-animation, .ai-mebedder-error-popup {
    /* Start display */
    display1: none!important;
}

/* Basic styling of the text based input elements */

input[type="text"].ai-embedder-input,
input[type="email"].ai-embedder-input,
input[type="password"].ai-embedder-input,
input[type="search"].ai-embedder-input,
input[type="tel"].ai-embedder-input,
input[type="url"].ai-embedder-input,
input[type="number"].ai-embedder-input,
textarea.ai-embedder-input,
.ai-embedder-input-frame input[type="text"],
.ai-embedder-input-frame input[type="email"],
.ai-embedder-input-frame input[type="password"],
.ai-embedder-input-frame input[type="search"],
.ai-embedder-input-frame input[type="tel"],
.ai-embedder-input-frame input[type="url"],
.ai-embedder-input-frame input[type="number"],
.ai-embedder-input-frame textarea {
    color: var(--wp--preset--color--contrast, black)!important;
    background-color: var(--wp--preset--color--neutral, #f3f3f3)!important;
    border-width: 2px!important;
    border-color: lightgray!important;
    border-style:solid!important;
    padding:0.5rem 1rem 0.5rem 1rem!important;
    font-size:1.5rem!important;
    font-weight: 400!important;
    text-align:left!important;
    line-height: 1.2;
    height: auto;
}

/* Basic styling of the checkbox input elements */

input[type="checkbox"].ai-embedder-input, .ai-embedder-input-frame input[type="checkbox"], input[type="radio"].ai-embedder-input, .ai-embedder-input-frame input[type="radio"] { 
    position: absolute!important;
    overflow: hidden!important; 
    height: 2rem!important; 
    width: 2rem!important; 
    margin: -1px!important; 
    padding: 0!important; 
    border: 0!important; 
    appearance: auto!important;
}

input[type="checkbox"].ai-embedder-input + label, .ai-embedder-input-frame input[type="checkbox"] + label, input[type="radio"].ai-embedder-input + label, .ai-embedder-input-frame input[type="radio"] + label { 
    font-size: 1.5rem!important;
    font-weight: 400!important;
    display: inline-flex !important;
    align-items: center !important;
    margin-left: 3rem!important;
}

input[type="checkbox"].ai-embedder-input:after, .ai-embedder-input-frame input[type="checkbox"]:after, input[type="radio"].ai-embedder-input:after, .ai-embedder-input-frame input[type="radio"]:after, input[type="checkbox"].ai-embedder-input:before, .ai-embedder-input-frame input[type="checkbox"]:before, input[type="radio"].ai-embedder-input:before, .ai-embedder-input-frame input[type="radio"]:before {
    opacity: 0!important;
}

input[type="checkbox"].ai-embedder-input:disabled, .ai-embedder-input-frame input[type="checkbox"]:disabled, input[type="radio"].ai-embedder-input:disabled, .ai-embedder-input-frame input[type="radio"]:disabled {
    opacity: 0.5!important;
    pointer-events: none!important;
}

/* Basic styling of the select inoput */

select.ai-embedder-input, .ai-embedder-input-frame select {
    cursor: pointer!important;
    padding: 0.5rem 0.75rem 0.5rem 2rem!important;
    outline: 0!important;
    border: 2px solid lightgray!important;
    border-radius: 0px!important;
    background-color: var(--wp--preset--color--neutral, #f3f3f3)!important;
    color: var(--wp--preset--color--contrast, black)!important;
    background: url("data:image/svg+xml;utf8,<svg fill='gray' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>") no-repeat right 0.5rem!important;
    background-size: 2rem!important;
    padding-left: 2rem!important;
    font-size: 1.5rem!important;
    line-height: 1.2!important;
    font-weight: 400!important;
    appearance: none;
    -webkit-appearance: none; /* Safari/Chrome */
    -moz-appearance: none;    /* Firefox */
}

select.ai-embedder-input:hover, select.ai-embedder-input:focus, .ai-embedder-input-frame select:hover, .ai-embedder-input-frame select:hover {
    background: url("data:image/svg+xml;utf8,<svg fill='black' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>") no-repeat right 0.5rem!important;
    background-size: 2rem!important;
}

select.ai-embedder-input:disabled, .ai-embedder-input-frame select:disabled {
    opacity: 0.5!important;
    pointer-events: none!important;
}

/* List element with a big list numbers on the left side (do not use ol or ul, use p or div elements) */

.ai-embedder-list {
    counter-reset: ai-embedder-item-counter!important;
}

.ai-embedder-list-item {
    clear: both!important;
    margin-bottom: 1.5rem!important;
}

.ai-embedder-list-counter {
    width: 3rem!important;
    height: 3rem!important;
    font-size: 2rem!important;
    
    float: left!important;
    margin: 0rem 1rem 1rem 0rem!important;
    
    background-color: var(--wp--preset--color--primary, #2b4162)!important;
    color: var(--wp--preset--color--base, white)!important;
    border-radius: 50%!important;
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
    font-weight: bold!important;
}

.ai-embedder-list-counter::before {
    counter-increment: ai-embedder-item-counter!important;
    content: counter(ai-embedder-item-counter)!important
}

.ai-embedder-list-headline {
    margin: 0rem!important;
    padding-bottom: 0.25rem!important;

    color: var(--wp--preset--color--primary, #2b4162)!important;
    font-size: 1.25rem!important;
    font-weight: 600!important;
    line-height: 1.2!important;
}

.ai-embedder-list-description {
    margin: 0rem!important;
    padding-bottom: 0.5rem!important;

    color: var(--wp--preset--color--contrast, black)!important;
    font-size: 1rem!important;
    font-weight: 400!important;
    line-height: 1.2!important;
}

/* AI answer frame */

.ai-embedder-answer-frame {
    padding: 1.5rem!important;
    background-color: var(--wp--preset--color--background-alt, #f3f3f3)!important;
    border: 3px solid var(--wp--preset--color--primary, #2b4162)!important;
    border-radius: 10px!important;
}

.ai-embedder-answer {

}

.ai-embedder-button, .ai-embedder-button-frame button {
	background-color: var(--wp--preset--color--primary, #2b4162)!important;
	border-radius:0.5rem!important;
	display:inline-block!important;
	cursor:pointer!important;
	color: var(--wp--preset--color--base, white)!important;
	font-size:1.75rem!important;
    font-weight: 600!important;
	padding:1rem 1.75rem!important;
	text-decoration:none!important;
    text-transform: uppercase!important;
    text-align: center!important;
    width: 100%!important;
    height: auto!important;
}

.ai-embedder-button:hover {
	text-decoration: underline!important;
}
.ai-embedder-button:active {
	position:relative!important;
	top:1px!important;
}

/* AI query waiting animation */

.ai-embedder-wait-animation {
    animation: search-animation-spin 2s linear infinite, search-animation-move-it 7.23s linear infinite!important; 
    transform-origin: center!important;
    position: relative!important;
}

@keyframes search-animation-spin {
0% { transform: rotate(0deg)!important; }
25% { transform: rotate(33deg)!important; }
50% { transform: rotate(0deg)!important; }
75% { transform: rotate(-33deg)!important; }
100% { transform: rotate(0deg)!important; }
}

@keyframes search-animation-move-it {
0% { left: 0rem!important; }
25% { left: 2rem!important; }
50% { left: 0rem!important;}
75% { left: -1.75rem!important; }
100% { left: 0rem!important;}
}

/* Where the uploaded images are copied */
.ai-embedder-uploaded-images-frame img {
    max-width: 100%!important;
    max-height: 25vh!important;

    border-color: var(--wp--preset--color--neutral, #f3f3f3)!important;
    border-radius: 0.5rem!important;
}

/* Error popup */

.ai-ebedder-error-popup {
    padding: 1rem!important;
    border: 4px solid var(--wp--preset--color--royal, red)!important;
    border-radius: 0.5rem!important;
}

.ai-ebedder-error-popup h1, .ai-ebedder-error-popup h2, .ai-ebedder-error-popup h3 {
    margin-top: 0rem!important;
    color: var(--wp--preset--color--royal, red)!important;
}