/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */
.text-bold strong {
  font-weight: 500;
  color: #FFF;
}

#detail-job .sjb-detail header {
  display: none;
}

.category-job .elementor-icon-list-items .elementor-icon-list-item .elementor-icon-list-text {
  display: flex;
  gap: 10px;
}

.category-job .elementor-icon-list-item .elementor-icon-list-text span {
  background: #494949;
  padding: 5px 10px;
  border-radius: 50px;
}

.jobpost-form .sjb-job-9950 h3 {
  font-size: 50px;
  color: #fff
}


.sjb-page .form-control {
  background: #3a3a3a;
  color: white !important;
}

#sjb-application-form {
  background: #242424;
  padding: 40px !important;
  border-radius: 20px;
}

.iti__country-list {
  background-color: #3a3a3a !important;
  color: #fff;
}


.sjb-page .sjb-detail .list-data .v1 .jobpost-form .required {
  color: #FD7704 !important;
}

/* 1. ROMPER LAS COLUMNAS (Para que ocupen todo el ancho) */
/* Atacamos a las columnas dentro del formulario para anular el grid de Bootstrap */
.sjb-page .col-md-3 {
  width: 100% !important;
  /* Fuerza ancho total */
  float: none !important;
  /* Quita el "flotado" a la izquierda */
  display: block !important;
  /* Asegura que se comporten como bloques apilados */
  max-width: 100% !important;
  padding-left: 0 !important;
  /* Alineación limpia a la izquierda */
  padding-right: 0 !important;
  text-align: left !important;
  /* Alinea el texto del label a la izquierda */
}

.sjb-page .col-md-9 {

  width: 100% !important;
  /* Fuerza ancho total */
  float: none !important;
  /* Quita el "flotado" a la izquierda */
  display: block !important;
  /* Asegura que se comporten como bloques apilados */
  max-width: 100% !important;
  padding-left: 0 !important;
  /* Alineación limpia a la izquierda */
  padding-right: 0 !important;
  text-align: left !important;
  /* Alinea el texto del label a la izquierda */
  margin-bottom: 24px !important;
  /* Separación exacta que pediste */
}

.sjb-page .btn {
  background: black;
  border-color: black;
}

.sjb-page label {
  font-weight: normal;
  font-size: 16px;
}

.elementor-kit-12 h3 {
  color: #FFFFFF;
  font-size: 40px;
}

.sjb-page .jobpost-form {
  margin-top: 80px;
  max-width: 700px !important;
  /* Puedes cambiar 700px por 600px si lo quieres más angosto */
  width: 100% !important;
  /* Asegura que en móviles se vea bien */

  /* 2. Centrar el bloque en la pantalla */


  /* 3. Mantener tu diseño anterior */
  padding: 40px !important;
  box-sizing: border-box !important;
  display: block !important;
}

.sjb-page {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* BLOG DETAIL */

#content-detail-blog h2,
#content-detail-blog h3,
#content-detail-blog h4 {
  padding: 15px 0;
}

#content-detail-blog h2 {
  font-size: 40px;
}

#content-detail-blog h3 {
  font-size: 28px;
}

#content-detail-blog h4 {
  font-size: 22px;
}

#content-detail-blog h5 {
  font-size: 18px;
}

/* HEADER */
#sticky-header {
  transition: all .5s ease !important;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

#sticky-header .sticky-logo img {
  display: none;
}

#sticky-header.elementor-sticky--effects .sticky-logo img {
  display: block;
}

#sticky-header.elementor-sticky--effects .logo img {
  display: none;
}

.sticky-logo img {
  transition: .5s all ease-in-out;
}

#sticky-header .elementor-nav-menu--dropdown {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}


/* 1. Estilo del botón "Seleccionar archivo" */
input[type="file"]::file-selector-button {
  background-color: #000000 !important;
  /* Fondo Naranja */
  color: #ffffff !important;
  /* Texto Blanco */
  border: none !important;
  /* Quitar borde gris feo */

  padding: 8px 15px;
  /* Espacio interno para que parezca botón */
  border-radius: 4px;
  /* Bordes redondeados */
  margin-right: 15px;
  /* Espacio entre el botón y el texto de al lado */
  cursor: pointer;
  /* Manita al pasar el mouse */
  font-family: inherit;
  /* Que use la misma letra que tu web */
  font-weight: 500;
  transition: background 0.3s;
}

/* 2. Soporte para navegadores basados en Webkit (Chrome, Safari, Edge antiguos) */
input[type="file"]::-webkit-file-upload-button {
  background-color: #000000 !important;
  color: #ffffff !important;
  border: none !important;
  padding: 8px 15px;
  border-radius: 4px;
  margin-right: 15px;
  cursor: pointer;
}

/* 3. Efecto Hover (Cuando pasas el mouse por encima) */
input[type="file"]:hover::file-selector-button,
input[type="file"]:hover::-webkit-file-upload-button {
  background-color: #000000 !important;
  /* Un naranja un poquito más oscuro */
}