/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

/* Estilos generales para el select */
.cosmos-helpdesk-wrapper select {
    padding: 8px 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: white;
    box-shadow: 0 0 0 rgba(0,0,0,0);
    outline: none;
    color: #333;
    appearance: none; /* Esto desactiva la apariencia por defecto del navegador */
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* Estilos para el icono de flecha (usando un background) */
.cosmos-helpdesk-wrapper select {
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="%23000" d="M5.516 7.548c0.436-0.446 1.043-0.481 1.576 0l2.908 2.957 2.908-2.957c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615l-3.908 3.976c-0.269 0.273-0.572 0.412-0.925 0.412s-0.657-0.138-0.925-0.412l-3.908-3.976c-0.408-0.418-0.436-1.17 0-1.615z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    padding-right: 30px; /* Asegura que el texto no se sobreponga al icono */
}

/* Cambiar el fondo al enfocar */
.cosmos-helpdesk-wrapper select:focus {
    border-color: #33cccc;
    box-shadow: 0 0 0 0px rgba(0, 90, 63,0);
}

.cosmos-helpdesk-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Asegura que los elementos se adapten en pantallas pequeñas */
    margin-bottom: 1em;
}

.cosmos-filter-form label{
    margin-bottom: 0!important;
}
.cosmos-add-ticket,
.cosmos-filter-form {
    flex-grow: 1;
}

.cosmos-filter-form {
    display: flex;
    justify-content: flex-end; /* Alinea los elementos del formulario a la derecha */
}
/* Estilos adicionales para el enlace como botón, si es necesario */
.cosmos-add-ticket a.button {
    display: inline-block; /* O 'block' si prefieres que ocupe todo el ancho disponible */
}

/* Asegúrate de que el formulario no ocupe todo el espacio si no es necesario */
.cosmos-filter-form form {
    display: flex;
    align-items: center;
    gap: 10px; /* Espacio entre elementos del formulario */
}

.cosmos-filter-form label {
    margin-right: 8px; /* Espacio entre la etiqueta y el select */
}

/*Ticket details*/

.cosmos-helpdesk-wrapper .ticket-details, .cosmos-helpdesk-wrapper #ticket_form {
    font-family: Arial, sans-serif;
    max-width: 800px;
    margin: auto;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-color: #fff;
}

.cosmos-helpdesk-wrapper .ticket-details h2,
.cosmos-helpdesk-wrapper #ticket_form h2 {
    font-size: var(--wp--preset--font-size--large);
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 20px;
}
.cosmos-helpdesk-wrapper .ticket-details h2:first-child,
.cosmos-helpdesk-wrapper #ticket_form h2:first-child{
    margin-top: 0.5em;
}

.cosmos-helpdesk-wrapper .ticket-details p,
.cosmos-helpdesk-wrapper .ticket-details li {
    line-height: 1.6;
}


.cosmos-helpdesk-wrapper .ticket-details ul {
    list-style-type: none;
    padding: 0;
}

.cosmos-helpdesk-wrapper .ticket-details ul.messages-list li:not(:last-child) {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.cosmos-helpdesk-wrapper .ticket-details form {
    margin-top: 20px;
}

.cosmos-helpdesk-wrapper .ticket-details textarea,
.cosmos-helpdesk-wrapper  #ticket_form input[type="text"],
.cosmos-helpdesk-wrapper  #ticket_form textarea {
    width: calc(100% - 20px);
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    resize: vertical;
}

.cosmos-helpdesk-wrapper #file-upload-names,
.cosmos-helpdesk-wrapper  #ticket_form #file-upload-names{
    padding-left: 1em;
    display: inline-block;
    font-weight: normal;
}
.cosmos-helpdesk-wrapper #attachment {
    display: none;
}

.cosmos-helpdesk-wrapper .ticket-details img.rounded,
.cosmos-helpdesk-wrapper  #ticket_form  img.rounded {
    border-radius: 5px;
    margin-top: 10px;
}

.cosmos-helpdesk-wrapper .text-center {
    text-align: center;
}

.cosmos-helpdesk-wrapper .file-upload-btn,
.cosmos-helpdesk-wrapper  #ticket_form .file-upload-btn{
    font-family: inherit;
    font-size: var(--wp--preset--font-size--small);
    font-style: normal;
    font-weight: 500;
    line-height: inherit;
    padding-top: 0.6rem;
    padding-right: 1rem;
    padding-bottom: 0.6rem;
    padding-left: 1rem;
    text-decoration: no;
    cursor: pointer;
    color: currentColor;
    background-color: initial;
    border: 1px solid;
    border-radius: .33rem;
    display: inline-block;
    margin-bottom: 1em!important;
    box-shadow: none;
}

.cosmos-helpdesk-wrapper .button.back{
    display: inline-block;
    margin-bottom: 0.75em;
}

.cosmos-helpdesk-wrapper .is-style-outline .wp-element-button{
    color: currentColor;
    background-color: initial;
    border: 1px solid;
}

.cosmos-helpdesk-wrapper .is-style-outline .wp-element-button:hover{
    background-color: var(--wp--preset--color--contrast-2, var(--wp--preset--color--contrast, transparent));
    color: var(--wp--preset--color--base);
    border-color: var(--wp--preset--color--contrast-2, var(--wp--preset--color--contrast, currentColor));
}



.cosmos-helpdesk-wrapper .ticket-header, .cosmos-helpdesk-wrapper .messages-list{
    font-size: var(--wp--preset--font-size--small);
}

.cosmos-helpdesk-wrapper .details{
    font-size: 0.74rem;
    border-bottom: 1px dotted #eee;
    padding-bottom: 1.5em;
    margin-bottom: 1em;
}

.cosmos-helpdesk-wrapper #ticket_form label {
    display: block;
    margin-top: 20px;
    margin-bottom: 5px;
    font-weight: bold;
}


.cosmos-helpdesk-wrapper #ticket_form #product_list_container label{    
    margin: 5px 0 0;
    font-weight: normal;
    font-size: var(--wp--preset--font-size--small);
}