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

 a.disabled{
    pointer-events: none!important;
    cursor: default!important;
 }

.nomar{
    margin: 0!important;
}

/* Estilos generales del contenedor */
.cosmos-custom_forms-wrapper {
    background-color: #fff;
    max-width: 800px;
    margin:  0 auto;
    padding: 20px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

/* Estilos para los elementos del formulario */
.cosmos-custom_forms-wrapper form {
    display: flex;
    flex-direction: column;
}

.cosmos-custom_forms-wrapper label {
    font-weight: bold;
    margin-bottom: 5px!important;
    margin-top: 15px!important;
}


.cosmos-custom_forms-wrapper input[type="text"],
.cosmos-custom_forms-wrapper input[type="date"],
.cosmos-custom_forms-wrapper select,
.cosmos-custom_forms-wrapper textarea {
    font-size: 16px;
    padding: 8px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: white;
    outline: none;
    font-family: Inter, sans-serif;
}

.file-upload-wrapper{
    margin-bottom: 15px;
}

.cosmos-custom_forms-wrapper select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    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; /* Asegurar que el texto no se sobreponga al icono */
}

/* Cambiar el borde al enfocar */
.cosmos-custom_forms-wrapper input:focus,
.cosmos-custom_forms-wrapper select:focus,
.cosmos-custom_forms-wrapper textarea:focus {
    border-color: #000;
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0);
}

/* Botones y acciones */
.cosmos-custom_forms-wrapper input[type="submit"] {
    font-weight: 500;
    font-family: Inter, sans-serif;
    margin-top: 20px;
}


/* Secciones y encabezados */
.cosmos-custom_forms-wrapper h2 {
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* Mejoras visuales para secciones */
.cosmos-custom_forms-wrapper hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
}

#custom_design_area,
#custom_color_scheme_area {
    display: none;
}

:-ms-input-placeholder { /* Estilo para IE 10-11 */
    color: #aaa;
    font-style: italic;
}

::-ms-input-placeholder { /* Estilo para Microsoft Edge */
    color: #aaa;
    font-style: italic;
}

/* Estilos generales para textarea */
.cosmos-custom_forms-wrapper textarea {
    height: 120px; /* Ajusta según la necesidad de espacio */
    padding: 10px; /* Espacio interior para mejor legibilidad del texto */
    border: 1px solid #ccc; /* Borde sutil */
    border-radius: 4px; /* Bordes redondeados para suavizar el diseño */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0); /* Sombra interior ligera */
    resize: vertical; /* Permite al usuario ajustar la altura del área de texto */
    line-height: 1.5; /* Mejora la legibilidad */
}

/* Estilos para mejorar el foco en el textarea */
.cosmos-custom_forms-wrapper textarea:focus {
    border-color: #000; /* Resalta el borde cuando el área de texto está enfocada */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0); /* Sombra exterior para mejorar el foco */
}

/* Estilos para el placeholder del textarea */
.cosmos-custom_forms-wrapper ::placeholder {
    color: #aaa; /* Color para el texto del placeholder */
    font-style: italic; /* Estilo itálico para distinguir el placeholder */
}



.cosmos-custom_forms-wrapper .file-upload-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cosmos-custom_forms-wrapper #file-upload-name-logo,
.cosmos-custom_forms-wrapper #file-upload-name-photos {
    padding-left: 1em;
    display: inline-block;
    font-weight: normal;
}

.cosmos-custom_forms-wrapper #team-biographies-container{
    margin-bottom: 15px;
}
.cosmos-custom_forms-wrapper #team-biographies-container .biography-entry {
    margin-bottom: 10px;
    margin-right: 5px;
    padding-top: 5px;
    width: 20%;
    min-width: 235px;
    display: inline-block;
}
.cosmos-custom_forms-wrapper #team-biographies-container label,
.cosmos-custom_forms-wrapper #team-biographies-container button
{
    display: block;
}

.cosmos-custom_forms-wrapper .team-name, .team-position {
    display: block;
    width: calc(100% - 25px);
    margin-bottom: 5px;
}

.cosmos-custom_forms-wrapper .team-description {
    display: block;
    width: calc(100% - 28px);
    height: 100px;
    margin-bottom: 10px;
}


.form-section {
    display: none; /* Ocultar todas las secciones inicialmente */
}

.form-section.active {
    display: contents; /* Solo mostrar la sección activa */
}

.cosmos-custom_forms-wrapper .button-container {
    display: flex;
    justify-content: space-between; /* Alinea un elemento a la izquierda y el otro a la derecha */
}

.cosmos-custom_forms-wrapper button.next-btn, .cosmos-custom_forms-wrapper button.prev-btn,
.cosmos-custom_forms-wrapper .back
 {
    margin-top: 20px;
}

.cosmos-custom_forms-wrapper .select_model-container{
    margin-top: 1em;
}
.cosmos-custom_forms-wrapper .select_model-container select {
    margin-top: 0.5em;
    margin-bottom: 0;
}

.progress-bar-container {
    width: 100%;
    background-color: #e0e0e0;
    border-radius: 5px;
    height: 5px;
}

.progress-bar {
    height: 5px;
    background-color: #000;
    width: 0%; /* Inicialmente, como el primer paso */
    border-radius: 5px;
    transition: width 0.4s ease;
}


.cosmos-add-brand{
    margin-bottom: 1em;
}


td .change_status{
    display: flex;
    gap: 1em;
    align-items: center;
  }


/* Estilos generales para la tabla */
.business_form .woocommerce-orders-table {
    width: 100%; /* Ajustar al contenedor */
}

/* Estilos para las filas y las celdas de la tabla */
.business_form .woocommerce-orders-table__row {
    display: flex;
    padding: 0 0.5em;
    width: 70%; /* Ajustar el ancho de las etiquetas de los campos */
}

.business_form .woocommerce-orders-table__cell {
    width: 65%; /* Ajustar el ancho de las celdas de entrada */
}

/* Estilos para los campos de entrada */
.business_form input[type="text"],
.business_form textarea {
    width: calc(100% - 20px); /* Ajustar el ancho de los inputs para que no sobresalgan de sus celdas */
}

.business_form input.regular-text,
.business_form textarea.large-text {
    padding: 8px; /* Añadir un poco de relleno para mejor visualización */
}


.colorSelector{
    margin-bottom: 2em;
}
#palettes-container{
    display: none;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 1em;
}
.palette-container {
    display: flex;
    gap: 1em;
    margin-top: 1em;
    flex-direction: row;
    align-items: center;
}
.palette-container .description{
}

.palette-container .palette-color {
    display: flex;
    gap: 1em;
    flex: 10;
}

.palette-container .palette-color .color{
    width: 50px;
    height: 20px;
    border-radius: 10%;
    cursor: pointer;
}