/*
  freshdesk-form-styles.css
  Estilos básicos para un formulario con modo oscuro y claro.
  Se aplican las mismas medidas y propiedades de layout en ambos modos; solo cambian los colores.
*/

/* -------------------------------------------------------
   1. REGLAS COMUNES (aplican en ambos modos)
------------------------------------------------------- */

.freshdesk-profile__heading,
.hero {
    max-width: 1430px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.freshdesk-profile__heading {
    width: 100%;
    margin-top: 50px;
}

.freshdesk-profile__heading h1 {
    font-size: 36px!important;
    font-weight: 700;
}

.freshdesk-profile__heading-container{
    display: flex;
    justify-content: space-between;

    @media screen and (max-width: 768px) {
        flex-direction: column-reverse;
        gap: 20px;
    }
}

.freshdesk-profile__heading-button{
    background-color: #13856B;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 10px 30px;
    cursor: pointer;
    width: fit-content;
    height: 44px;
    font-size: 16px;
    font-weight: 700;
    line-height: 0;
    position: relative;
    text-decoration: none;
    justify-content: flex-end;
    display: flex;
    align-items: center;
}

.freshdesk-profile__heading-button:hover{
    background-color: #0f6954;
}

.freshdesk-profile__heading-button:before{
    content: "";
    position: absolute;
    pointer-events: none;
    left: 0;
    width: 25px;
    height: 25px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE1IDE4TDkgMTJMMTUgNiIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K);
}

.freshdesk-profile__heading-container__back-btn--icon {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE1IDE4TDkgMTJMMTUgNiIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K);
}

.freshdesk-contact-form {
    font-family: "Roboto", Arial, Verdana, Tahoma, sans-serif;
    padding: 35px;
    border-radius: 10px;
    border: 1px solid;
}

.freshdesk-contact-form__title {
    text-align: left;
}

.freshdesk-contact-form form {
    margin-top: 20px;
}


.freshdesk-contact-form__msg {
    max-width: 490px;
    height: 65px;
    padding: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    font-weight: 500;
    position: relative;
    gap: 15px;
}
.freshdesk-contact-form__msg:before{
    content: "";
    pointer-events: none;
    width: 25px;
    height: 25px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNCAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeT0iMC41IiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHJ4PSIxMiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTkuNTUwMjEgMTUuNjVMMTguMDI1MiA3LjE3NUMxOC4yMjUyIDYuOTc1IDE4LjQ2MjcgNi44NzUgMTguNzM3NyA2Ljg3NUMxOS4wMTI3IDYuODc1IDE5LjI1MDIgNi45NzUgMTkuNDUwMiA3LjE3NUMxOS42NTAyIDcuMzc1IDE5Ljc1MDIgNy42MTI1IDE5Ljc1MDIgNy44ODc1QzE5Ljc1MDIgOC4xNjI1IDE5LjY1MDIgOC40IDE5LjQ1MDIgOC42TDEwLjI1MDIgMTcuOEMxMC4wNTAyIDE4IDkuODE2ODcgMTguMSA5LjU1MDIxIDE4LjFDOS4yODM1NCAxOC4xIDkuMDUwMjEgMTggOC44NTAyMSAxNy44TDQuNTUwMjEgMTMuNUM0LjM1MDIxIDEzLjMgNC4yNTQzNyAxMy4wNjI1IDQuMjYyNzEgMTIuNzg3NUM0LjI3MTA0IDEyLjUxMjUgNC4zNzUyMSAxMi4yNzUgNC41NzUyMSAxMi4wNzVDNC43NzUyMSAxMS44NzUgNS4wMTI3MSAxMS43NzUgNS4yODc3MSAxMS43NzVDNS41NjI3MSAxMS43NzUgNS44MDAyMSAxMS44NzUgNi4wMDAyMSAxMi4wNzVMOS41NTAyMSAxNS42NVoiIGZpbGw9IiMyREFGMTciLz4KPC9zdmc+Cg==);
}
.freshdesk-contact-form__success{
    background-color: #2DAF17;
    color: #FFF;
}

.freshdesk-contact-form__error{
    background-color: #ff4b4b;
    color: #FFF;
}

.freshdesk-contact-form h2 {
    font-size: 24px!important;
    margin-bottom: 30px;
}

.freshdesk-contact-form p {
    margin-bottom: 40px!important;
    font-size: 16px;
    max-width: 662px;
    line-height: 20px;
}

/* Campos (inputs, selects, textareas) */
.freshdesk-contact-form input,
.freshdesk-contact-form select,
.freshdesk-contact-form textarea {
    display: block;
    width: 100%;
    height: 44px;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 20px;
    max-width: 413px; /* Ajusta según necesites */
    font-family: "Roboto", Arial, Verdana, Tahoma, sans-serif;
    border: 1px solid; /* Valor por defecto */
}

/* Reglas comunes para el contenedor del select */
.freshdesk-custom-select {
    position: relative;
    max-width: 413px;
    width: 100%;
}

/* Oculta la flecha nativa y ajusta el padding */
.freshdesk-custom-select select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    padding-right: 40px; /* Espacio para el icono */
    max-width: 100%;
}

/* Pseudo-elemento para el icono */
.freshdesk-custom-select::after {
    content: "";
    position: absolute;
    pointer-events: none;
    top: 25%;
    right: 12px;
    transform: rotate(180deg);
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-size: contain;
    transition: transform 0.3s ease;
}

/* MODO CLARO: Usamos el icono negro */
.freshdesk-contact-form .freshdesk-custom-select::after {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDE0IDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMS43MDcxMSA3LjcwNzExQzEuMzE2NTggOC4wOTc2MyAwLjY4MzQxOCA4LjA5NzYzIDAuMjkyODkzIDcuNzA3MTFDLTAuMDk3NjMxMSA3LjMxNjU4IC0wLjA5NzYzMTEgNi42ODM0MiAwLjI5Mjg5MyA2LjI5Mjg5TDYuMjkyODkgMC4yOTI4OTNDNi42ODM0MiAtMC4wOTc2MzA1IDcuMzE2NTggLTAuMDk3NjMwNSA3LjcwNzExIDAuMjkyODkzTDEzLjcwNzEgNi4yOTI4OUMxNC4wOTc2IDYuNjgzNDIgMTQuMDk3NiA3LjMxNjU4IDEzLjcwNzEgNy43MDcxMUMxMy4zMTY2IDguMDk3NjMgMTIuNjgzNCA4LjA5NzYzIDEyLjI5MjkgNy43MDcxMUw3IDIuNDE0MjFMMS43MDcxMSA3LjcwNzExWiIgZmlsbD0iIzAwMCIvPjwvc3ZnPg==);
}

/* MODO OSCURO: Usamos el icono blanco */
body.dark-mode .freshdesk-contact-form .freshdesk-custom-select::after {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDE0IDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMS43MDcxMSA3LjcwNzExQzEuMzE2NTggOC4wOTc2MyAwLjY4MzQxOCA4LjA5NzYzIDAuMjkyODkzIDcuNzA3MTFDLTAuMDk3NjMxMSA3LjMxNjU4IC0wLjA5NzYzMTEgNi42ODM0MiAwLjI5Mjg5MyA2LjI5Mjg5TDYuMjkyODkgMC4yOTI4OTNDNi42ODM0MiAtMC4wOTc2MzA1IDcuMzE2NTggLTAuMDk3NjMwNSA3LjcwNzExIDAuMjkyODkzTDEzLjcwNzEgNi4yOTI4OUMxNC4wOTc2IDYuNjgzNDIgMTQuMDk3NiA3LjMxNjU4IDEzLjcwNzEgNy43MDcxMUMxMy4zMTY2IDguMDk3NjMgMTIuNjgzNCA4LjA5NzYzIDEyLjI5MjkgNy43MDcxMUw3IDIuNDE0MjFMMS43MDcxMSA3LjcwNzExWiIgZmlsbD0id2hpdGUiLz48L3N2Zz4=);
}

/* Rotar el icono cuando el select tenga focus o esté activo */
/* Dado que el pseudo-elemento está en el contenedor, debemos gestionar la rotación con JS o agregar una clase al contenedor en focus.
   A continuación, se muestra un ejemplo usando una clase .focused que luego podrás agregar con JavaScript. */
.freshdesk-custom-select.focused::after {
    transform: translateY(25%) rotate(0deg);
}


/* Textarea de descripción un poco más grande */
textarea#freshdesk_description {
    max-width: 100%;
    min-height: 128px;
}

/* Botones */
.freshdesk-contact-form button,
.freshdesk-contact-form input[type="submit"] {
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    cursor: pointer;
    width: 100%;
    max-width: 173px;
    font-size: 16px;
    font-weight: 700;
    line-height: 0;
}

.g-recaptcha {
    margin-bottom: 20px;
}

/* -------------------------------------------------------
   2. MODO OSCURO (cuando el body tiene .dark-mode)
------------------------------------------------------- */
body.dark-mode .freshdesk-contact-form {
    color: #ffffff;
    border-color: #2E2E34;
}

body.dark-mode .freshdesk-contact-form label {
    display: block;
    margin-bottom: 8px;
    color: #ffffff;
}

body.dark-mode .freshdesk-contact-form input,
body.dark-mode .freshdesk-contact-form select,
body.dark-mode .freshdesk-contact-form textarea {
    background-color: #67676F;
    color: #ffffff;
    border-color: #67676F;
}

body.dark-mode .freshdesk-contact-form input::placeholder,
body.dark-mode .freshdesk-contact-form textarea::placeholder {
    color: #aaaaaa;
}

body.dark-mode .freshdesk-contact-form select {
    background-color: #67676F;
    color: #ffffff;
}

body.dark-mode .freshdesk-contact-form select option {
    background-color: #333333;
    color: #ffffff;
}

body.dark-mode .freshdesk-contact-form button,
body.dark-mode .freshdesk-contact-form input[type="submit"] {
    background-color: #13856B;
    color: #ffffff;
}

body.dark-mode .freshdesk-contact-form button:hover,
body.dark-mode .freshdesk-contact-form input[type="submit"]:hover {
    background-color: #0f6954;
}

/* -------------------------------------------------------
   3. MODO CLARO (cuando el body no tiene .light__mode)
------------------------------------------------------- */
.freshdesk-contact-form {
    color: #333333;
    border-color: #2E2E34;
}

body.dark-mode .freshdesk-profile__heading h1 {
    color: #ffffff;
}

.freshdesk-contact-form label {
    display: block;
    margin-bottom: 8px;
    color: #333333;
}

.freshdesk-contact-form input,
.freshdesk-contact-form select,
.freshdesk-contact-form textarea {
    background-color: #ffffff;
    color: #333333;
    border-color: #67676F;
}

.freshdesk-contact-form input::placeholder,
.freshdesk-contact-form textarea::placeholder {
    color: #999999;
}

.freshdesk-contact-form select {
    background-color: #FFF;
    color: #333333;
}

.freshdesk-contact-form select option {
    background-color: #FFF;
    color: #333333;
}

.freshdesk-contact-form button,
.freshdesk-contact-form input[type="submit"] {
    background-color: #13856B;
    color: #ffffff;
}

.freshdesk-contact-form button:hover,
.freshdesk-contact-form input[type="submit"]:hover {
    background-color: #0f6954;
}