/* Frontend CSS */

/* Span highlight */
.kos-highlight {
  display: inline-block;
  background: var(--e-global-color-secondary);        /* adjust if you use a brand variable */
  color: var(--e-global-color-primary);                /* text color */
  padding: .08em .09em;       /* top/bottom | left/right */
  line-height: 1;             /* keeps the box tight */
  font-display: var(--e-global-typography-primary-font-family);
  border-radius: 2px;
  box-shadow: none;
}

/* Icon Box padding negativo (empareja con el borde superior del icono) */
.kos-icon-box .elementor-icon-box-title{
  margin-top: -6px;
}
/* Cursor pointer para cards sliders */
.kos-custom-cursor { 
    cursor: pointer;
}

/*========================================
/*   KOS SINGLE SERVICE CAPABILITIES
/*========================================*/

/* Grid solo en este componente */
.kos-single-service-capabilities .jet-listing-dynamic-repeater__items {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  justify-content: space-between;
  column-gap: clamp(40px, 1vw, 18px);
  row-gap: 14px;
}

/* Reset */
.kos-single-service-capabilities .jet-listing-dynamic-repeater__item,
.kos-single-service-capabilities .kos-list {
  margin: 0;
  padding: 0;
}

/* Lista */
.kos-single-service-capabilities .kos-list {
  list-style: none;
}

/* Item */
.kos-single-service-capabilities .kos-list li {
  position: relative;
  padding-left: 24px;
  margin: 0;
  line-height: 1.5;
}

/* Ocultar icono original */
.kos-single-service-capabilities .kos-icon {
  display: none;
}

/* Bullet estilo anillo naranja */
.kos-single-service-capabilities .kos-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 14px;
  height: 14px;
  border: 5px solid #f2a100;
  border-radius: 50%;
  background: #ffffff;
  box-sizing: border-box;
}

/* Responsive */
@media (min-width: 768px) and (max-width: 1024px) {
  .kos-single-service-capabilities {
    width: 100% !important;
    max-width: 100%;
    align-self: stretch;
  }

  .kos-single-service-capabilities .elementor-widget-container,
  .kos-single-service-capabilities .jet-listing,
  .kos-single-service-capabilities .jet-listing-dynamic-repeater {
    width: 100%;
    max-width: 100%;
  }

  .kos-single-service-capabilities .jet-listing-dynamic-repeater__items {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    column-gap: 24px;
  }

  .kos-single-service-capabilities .jet-listing-dynamic-repeater__item,
  .kos-single-service-capabilities .kos-list,
  .kos-single-service-capabilities .kos-list li {
    min-width: 0;
  }

  .kos-single-service-capabilities .kos-list li {
    overflow-wrap: break-word;
    word-break: normal;
  }
}

@media (max-width: 767px) {
  .kos-single-service-capabilities {
    width: 100% !important;
    max-width: 100%;
    align-self: stretch;
  }

  .kos-single-service-capabilities .elementor-widget-container,
  .kos-single-service-capabilities .jet-listing,
  .kos-single-service-capabilities .jet-listing-dynamic-repeater {
    width: 100%;
    max-width: 100%;
  }

  .kos-single-service-capabilities .jet-listing-dynamic-repeater__items {
    width: 100%;
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  .kos-single-service-capabilities .jet-listing-dynamic-repeater__item,
  .kos-single-service-capabilities .kos-list,
  .kos-single-service-capabilities .kos-list li {
    min-width: 0;
  }

  .kos-single-service-capabilities .kos-list li {
    overflow-wrap: break-word;
    word-break: normal;
  }
}

/*========================================
/*   JET LISTING GRID - ROUND ARROWS
/*========================================*/

.jet-listing-grid__slider-icon {
  width: 60px;
  height: 60px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none !important;
  border-radius: 50%;
  background: #f2a100 !important; /* centro naranja */

  /* anillo negro interior + anillo naranja exterior */
  box-shadow:
    inset 0 0 0 2px #000,
    0 0 0 3px #f2a100;

  transition: transform 0.3s ease;
}

/* Ocultar icono original de JetEngine */
.jet-listing-grid__slider-icon svg {
  display: none !important;
}

/* Línea horizontal de la flecha */
.jet-listing-grid__slider-icon::before {
  content: "";
  position: absolute;
  z-index: 2;
  width: 18px;
  height: 2px;
  background: #000;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Punta de la flecha */
.jet-listing-grid__slider-icon::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 8px;
  height: 8px;
  border-left: 2px solid #000;
  border-bottom: 2px solid #000;
  top: 50%;
  left: 50%;
  transform: translate(-100%, -50%) rotate(45deg);
  box-sizing: border-box;
}

.jet-listing-grid__slider-icon.next-arrow::after {
  transform: translate(-100%, -50%) rotate(-135deg);
  border-left: none;
  border-bottom: none;
  border-right: 2px solid #000;
  border-top: 2px solid #000;
}

/*========================================
/*        PROJECT DETAILS ITEMS
/*========================================*/

/* Contenedor de los textos dentro del bloque "Project Details".
   Aplica la tipografía global definida en Elementor y el color primario de la marca. */

.kos-project-details-items {
    font-family: var(--e-global-typography-7e8c60f-font-family), Sans-serif;
    font-size: var(--e-global-typography-7e8c60f-font-size);
    font-weight: var(--e-global-typography-7e8c60f-font-weight);
    line-height: var(--e-global-typography-7e8c60f-line-height);
    color: var(--e-global-color-primary);
    text-transform: capitalize;
}

/*========================================
/*        PROJECT CARD V2
/*========================================*/

.kos-project-card-v2 {
	position: relative;
	overflow: hidden;
}

/* Título visible por defecto en tablet y móvil */
.kos-project-card-v2 .kos-project-card-v2_title {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}

/* Aplicar efecto hover solo en desktop */
@media (min-width: 1025px) {
	.kos-project-card-v2 .kos-project-card-v2_title {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(10px);
		transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
	}

	.kos-project-card-v2:hover .kos-project-card-v2_title {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(0);
	}
}

/*========================================
/*        CONTACT ICON BOX (CUSTOM)
/*========================================*/

/* Título (enlace) más grande SOLO dentro de kos-contact-icon_box 
.kos-contact-icon_box .elementor-icon-box-title a {
    font-size: 1.1em;
} */

/* Descripción en rojo SOLO dentro de kos-contact-icon_box */
.kos-contact-icon_box .elementor-icon-box-description a {
    color: var( --e-global-color-text ) !important;
}


/*========================================
/*        Footer ICON BOX (CUSTOM)
/*========================================*/

/* Descripción SOLO dentro de kos-footer-icon_box */
.kos-footer-icon_box .elementor-icon-box-description a {
    color: var( --e-global-color-95fa12a ) !important;
    font-size: 14px !important;
}
.kos-footer-icon_box .elementor-icon-box-description a:hover {
    color: var( --e-global-color-95fa12a ) !important;
}

/*========================================
/*        FAQ LISTING GRID FIX
/*========================================*/

/* La clase .kos-faq-columns-fix debe agregarse manualmente
   al Listing Grid en Elementor.
   Todas estas reglas quedan limitadas únicamente a ese bloque FAQ. */

.kos-faq-columns-fix {
    overflow: hidden;
}

/* El contenedor principal del Listing Grid no debe salirse
   de su ancho disponible. */

.kos-faq-columns-fix .jet-listing-grid__items {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/**
 * ============================================================================
 * KOS FAQ COLUMNS FIX (JetEngine + Elementor Nested Accordions)
 * ============================================================================
 * Descripción: Modifica el comportamiento predeterminado del Grid de JetEngine
 * para crear dos columnas completamente independientes. Esto evita que al abrir 
 * un acordeón en una columna, la altura de la fila se recalcule y empuje 
 * incorrectamente los elementos de la columna adyacente.
 * 
 * Dependencia: Requiere el script JS asociado que crea los contenedores 
 * div.kos-col-independent y añade la clase .kos-columns-fixed.
 * la clase kos-faq-columns-fix esta definida en el widget de listing grid
 * ============================================================================
 */

/* 
 * 1. Contenedor principal alineado hacia arriba 
 * Rompe el modelo de cuadrícula (Grid) nativo de JetEngine y lo convierte en 
 * un Flexbox en fila. El 'align-items: flex-start' es crucial: evita que las 
 * columnas se estiren para igualar la altura de la columna más larga.
 */
.kos-faq-columns-fix .jet-listing-grid__items.kos-columns-fixed {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 30px !important; /* Espacio horizontal */
}

/* 
 * 2. Las columnas independientes (Forzamos el ancho con calc) 
 * Estiliza los divs generados por JS. Se usa calc() para asegurar que midan 
 * exactamente la mitad del espacio disponible, descontando la mitad del 'gap' 
 * para evitar desbordamientos (overflow) o aplastamientos de flexbox.
 */
.kos-faq-columns-fix .kos-col-independent {
    /* Toma el 50% exacto de la pantalla, menos los 15px del gap del medio */
    width: calc(50% - 15px) !important; 
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important; /* Espacio vertical entre los acordeones */
}

/* 
 * 3. ¡EL TRUCO! Neutralizamos la regla de JetEngine del "50%" 
 * JetEngine inyecta su propio CSS retrasado que fuerza a los items a medir 50%.
 * Este bloque es un "override" estricto que le prohíbe al item encogerse 
 * (flex: 1 1 100%) y lo obliga a ocupar el 100% de nuestra nueva columna aislada.
 */
.kos-faq-columns-fix .kos-col-independent .jet-listing-grid__item {
    flex: 1 1 100% !important; /* Le prohibimos estrictamente encogerse */
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    margin: 0 !important;
}

/* 
 * 4. Por si los contenedores internos de Elementor (Flexbox) intentan colapsar 
 * Prevención de errores internos: Fuerza a los contenedores principales de 
 * Elementor (e-con) a expandirse al ancho total de la columna independiente, 
 * evitando que el contenido del acordeón se vea recortado o estrecho.
 */
.kos-faq-columns-fix .kos-col-independent .e-con,
.kos-faq-columns-fix .kos-col-independent .e-con-inner {
    width: 100% !important;
    max-width: 100% !important;
}

/* 
 * 5. Diseño para móviles (volvemos a 1 columna) 
 * Breakpoint estándar para tablets/móviles (767px). Apila las dos columnas 
 * independientes una debajo de la otra y devuelve el ancho al 100%.
 */
@media (max-width: 767px) {
    .kos-faq-columns-fix .jet-listing-grid__items.kos-columns-fixed {
        flex-direction: column !important;
        gap: 5px !important;
    }
    .kos-faq-columns-fix .kos-col-independent {
        width: 100% !important;
    }
    .kos-faq-columns-fix .kos-col-independent {
        gap: 5px !important; /* Espacio vertical entre los acordeones */
    }
}

/*========================================
/*        TOM SELECT - SERVICES FIELD
/*========================================*/

/* Contenedor general */
.elementor-form .ts-wrapper {
    width: 100%;
    font-family: inherit;
}

/* Campo principal */
.elementor-form .ts-wrapper.multi .ts-control,
.elementor-form .ts-wrapper.single .ts-control {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 56px;
    padding: 10px 14px;
    background: #ffffff;
    border: 1px solid #d5d9df;
    border-radius: 0;
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Hover / focus */
.elementor-form .ts-wrapper.focus .ts-control,
.elementor-form .ts-wrapper:hover .ts-control {
    border-color: #f4a100;
    box-shadow: none;
}

/* Input interno */
.elementor-form .ts-wrapper .ts-control input {
    flex: 1 1 auto;
    min-width: 160px;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 16px;
    color: #1f2d3d;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* Placeholder */
.elementor-form .ts-wrapper .ts-control input::placeholder {
    color: #8f96a3;
    opacity: 1;
}

/* Chips seleccionados */
.elementor-form .ts-wrapper.multi .ts-control > div {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 6px 15px;
    background: #f4a100;
    color: #1f2d3d;
    border: 0;
    border-radius: 3px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
}

/* Botón de quitar */
.elementor-form .ts-wrapper.plugin-remove_button .item .remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin: 0 6px 0 0;
    border: 0;
    border-radius: 2%;
    color: #ffffff;
    background: #1f2d3d;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    opacity: 0.8;
    padding: 4px 4px;
}

.elementor-form .ts-wrapper.plugin-remove_button .item .remove:hover {
    opacity: 1;
    background: rgb(255, 0, 43);
}

/* Dropdown */
.elementor-form .ts-dropdown {
    margin-top: 0;
    background: #ffffff;
    border: 1px solid #d5d9df;
    border-radius: 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    z-index: 9999;
    overflow: hidden;
}

/* Opción del dropdown */
.elementor-form .ts-dropdown .option,
.elementor-form .ts-dropdown .active {
    padding: 12px 14px;
    font-size: 15px;
    line-height: 1.4;
    color: #1f2d3d;
}

/* Hover opción */
.elementor-form .ts-dropdown .option:hover,
.elementor-form .ts-dropdown .active {
    background: #f8f9fb;
    color: #1f2d3d;
}

/* No results */
.elementor-form .ts-dropdown .no-results {
    padding: 12px 14px;
    color: #8f96a3;
}

/* Flecha */
.elementor-form .ts-wrapper.single .ts-control:after,
.elementor-form .ts-wrapper.multi .ts-control:after {
    content: "";
    margin-left: auto;
    width: 10px;
    height: 10px;
    border-right: 2px solid #1f2d3d;
    border-bottom: 2px solid #1f2d3d;
    transform: rotate(45deg);
    opacity: 0.65;
    margin-top: -50px;
}

/* En multi no queremos que la flecha empuje demasiado */
.elementor-form .ts-wrapper.multi.has-items .ts-control:after {
    align-self: center;
}

/* Responsive */
@media (max-width: 767px) {
    .elementor-form .ts-wrapper.multi .ts-control,
    .elementor-form .ts-wrapper.single .ts-control {
        min-height: 52px;
        padding: 10px 12px;
    }

    .elementor-form .ts-wrapper .ts-control input {
        min-width: 120px;
        font-size: 15px;
    }
}

/*========================================
/*        FOOTER CREDIT LINK
/*========================================*/

.kos-footer-credit {
  color: #000000 !important;
  font-weight: bold !important;
  text-decoration: none;
  transition: color 0.25s ease !important;
  background-color: rgba(255, 255, 255, 0.80);  
  padding: 0 5px;
  border-radius: 2px;
  line-height: 1.5;
}

.kos-footer-credit:hover {
  color: var( --e-global-color-secondary ) !important;
  background-color: #000000;
}

/*========================================
/*        TEAM SINGLE - HIDE MEMBER BUTTON
/*========================================

/* Oculta el botón del miembro del equipo dentro de la vista individual del CPT Team.
   Se usa la clase del body generada por WordPress para aplicar el cambio solo en ese contexto. */
.single-swc-builders-team- #kos-team-member-button {
  display: none !important;
}
/*========================================
/*        ELEMENTOR FORM ACCEPTANCE FIELD
/*========================================*/

.elementor-field-type-acceptance .elementor-field-option {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
}

#form-field-consent {
  margin-top: 3px !important;
  flex: 0 0 auto !important;
  accent-color: #F5A000;
}

#form-field-consent + label {
  display: block !important;
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

#form-field-consent + label span {
  line-height: 1.4 !important;
}

#form-field-consent + label a {
  color: #F5A000 !important;
  text-decoration: underline !important;
}