/* === BUTTON STYLES === */

/* Primary button base */
.button,
.button--primary,
.adminimal .button,
.btn.btn-default.js-form-submit.form-submit,
.product-teaser .product-add-cart input[type="submit"],
.product-teaser .product-add-cart .button,
.product-post .product-content-wrap .form-actions input[type="submit"] {
  color: #fff;
  background-color: #00aafd;
  border-color: #00aafd;
  padding: 15px;
  font-size: 12px;
  line-height: 1.33;
  border-radius: 25px;
  background-image: none;
  text-transform: uppercase;
  margin: 10px 0;
  display: inline-block;
}

/* Primary button hover */
.button:hover,
.button--primary:hover,
.adminimal .button:hover {
  background-color: #0fa85b;
  border-color: #0fa85b;
  color: #fff;
}

/* Bootstrap primary button override */
.btn.btn-primary {
  background-color: #00aafd;
  border-color: #00aafd;
}
.btn.btn-primary:hover {
  background-color: #ffb507;
  border-color: #ffb507;
  color: #fff;
}

/* Link button */
.btn-link {
  font-weight: 400;
  text-decoration: none;
}

/* === NIRUDI FIELD STYLING === */

/* Unified style for all field wrappers and content blocks */
.field-field-logo-or-image,
.field-node-title,
.field-field-denomination-or-username,
.field-field-type-of-user,
.field-field-size-of-the-company,
.field-field-sector,
.field-field-detailed-description,
.field-field-video-gallery,
.field-field-get-a-quote,
.field-field-contact-details-and-locati,
.field-field-country,
.field-field-continent,
.field-field-supplier-details-and-locat,
.field-field-price,
.field-field-description,
.field-pcui-config,
.field--type-language,
.field-field-image-gallery,
.field-field-elearning-image,
.user-name,
.user-profile-picture,
.username,
.field-realname,
.field-field-firstname,
.field-field-lastname,
.role-expiry-roles,
.field-stores,
.field-field-custom-video,
.field-field-rating,
.field--name-title,
.field--name-field-logo-or-image,
.field--name-field-video-gallery,
.field--name-field-pdf-catalogue,
.field--name-field-certification,
.field--name-field-corporate-social-responsib,
.field--name-field-publication-and-recognitio,
.field--name-field-denomination-or-username,
.field--name-field-size-of-the-company,
.field--name-field-type-of-user,
.field--name-field-type-entity-reference,
.field--name-field-type-image,
.form-item--field-country,
.field--name-field-sector,
.field--name-field-detailed-description,
.field--name-field-image-gallery,
.field--name-field-contact-details-and-locati,
.field--name-field-custom-video-blog-nirudi,
.field--name-field-supplier-details-and-locat,
.use-ajax .action-link .action-link--danger .action-link--icon-trash,
.node-content,
.field-title,
.field-field-ratings,
.product-stock,
.product-sku,
.product-price-wrap,
.field--name-quantity,
.product-short-description,
.field--name-field-badge.field--name-status,
.field--name-field-ratings,
.field--name-field-badge,
.field--name-status,
.field-field-custom-video-blog-nirudi,
.commerce-variation-add-to-cart-26,
#commerce-variation-add-to-cart-26,
#commerce-variation-add-to-cart-34,
.col-sm-12,
div.col-sm-6:nth-child(2) > div:nth-child(7),
div.col-sm-6:nth-child(3) > div:nth-child(1)
.field--name-field-plot-id,
.field--name-field-farmer-id,
.field--name-field-commodity,
.field--name-field-area,
.field--name-field-area-ha,
.field--name-field-latitude,
.field--name-field-longitude,
.field--name-field-accuracy,
.field--name-field-geojson,
.field--name-field-validation-status,
.field--name-field-status-note,
.field--name-field-lot-id,
.field--name-field-date,
.field--name-field-origin-plot,
.field--name-field-evidence-id,
.field--name-field-expected-boundary,
.field--name-field-farmer-plot-id,
.field--name-field-evidence-category,
.field--name-field-document-name,
.field--name-field-issuing-authority,
.field--name-field-issue-date,
.field--name-field-expiry-date,
.field--name-field-expiry-status,
.field--name-field-verification-status,
.field--name-field-evidence-notes,
.field--name-field-evidence-file,
.field--name-field-farmer-id,
.field--name-field-farmer-name,
.field--name-field-plot-id,
.field--name-field-tracker-id,
.field--name-field-lot-date,
.field--name-field-dds-ref,
.field--name-field-origin-plots,
.field--name-field-retention-date,
.field--name-field-approved-plots,
.field--name-field-field-officer,
.field--name-field-farmer-ref,
.field--name-field-plot-area-ha,
.field--name-field-geometry-type,
.field--name-field-gps-accuracy-m,
.field--name-field-moderation,
.field--name-field-coordinates,
.field--name-field-polygon-geojson-ref,
.field--name-field-collection-date,
.field--name-field-collection-time,
.field--name-field-qc-notes,
.field--name-moderation-state,
.field--name-field-evidence-file,
.field--name-field-sticky-top,
.field--name-body,
.form-item--simple-sitemap-index-now,
.field--name-field-deforestation-status{
  background: #f5f5f5;
  margin: 15px 10px 15px 0;
  padding: 10px 15px;
}

/* Remove right margin where not needed (e.g., full-width blocks) */
.col-sm-12,
#commerce-variation-add-to-cart-26,
#commerce-variation-add-to-cart-34,
.commerce-variation-add-to-cart-26,
div.col-sm-6:nth-child(2) > div:nth-child(7),
div.col-sm-6:nth-child(3) > div:nth-child(1) {
  margin-right: 0;
}

/* === SPECIAL ELEMENTS === */

.ckeditor-readmore-toggler {
  background-color: #0fa85b;
  color: #fff;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 25px;
  display: inline-block;
  margin-top: 10px;
}

/* Buy now button reset */
#edit-commerce-buy-now {
  margin-left: 0;
}

/* Header blocks */
#block-user-account-menu,
#block-language-dropdown-switcher {
  border-right-width: 0;
}

/* === COOKIE BANNER FIXES === */

#sliding-popup,
.eu-cookie-compliance-banner {
  background: #2c3e50;
  color: #ffffff;
  border: 2px solid #34495e;
}

#sliding-popup h2,
.eu-cookie-compliance-banner h2,
.eu-cookie-compliance-banner p {
  color: #ffffff;
  font-weight: bold;
}

#sliding-popup a {
  color: #3498db;
  text-decoration: underline;
}

#sliding-popup .eu-cookie-compliance-more-button,
#sliding-popup .agree-button,
.eu-cookie-compliance-agree-button {
  background-color: #0fa85b;
  color: #ffffff;
  border: 2px solid #0fa85b;
}

.eu-cookie-compliance-agree-button {
  background: #0fa85b;
  border: none;
}

/* Main wrapper matching the warm off-white page background */
.sop-container {
  max-width: 820px;
  margin: 0 auto;
  padding: 24px;
  background-color: #faf9f5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #2c3531;
  line-height: 1.6;
  border-radius: 12px;
}

/* Subtitle styling under the page title */
.sop-header {
  margin-bottom: 24px;
}

.sop-subtitle {
  font-size: 1.05rem;
  color: #55605b;
  margin: 0;
}

/* Individual section cards */
.sop-card {
  background-color: #ffffff;
  border: 1px solid #e2e5df;
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

/* Section headings */
.sop-card h2 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #1b2e25;
  margin-top: 0;
  margin-bottom: 12px;
}

/* Paragraph & List spacing inside cards */
.sop-card p {
  margin-top: 0;
  margin-bottom: 12px;
}

.sop-card p:last-child,
.sop-card ul:last-child,
.sop-card ol:last-child {
  margin-bottom: 0;
}

.sop-card ul,
.sop-card ol {
  padding-left: 20px;
  margin-top: 0;
  margin-bottom: 12px;
}

.sop-card li {
  margin-bottom: 6px;
}

.sop-card li:last-child {
  margin-bottom: 0;
}

/* Inline code pills for database fields (plot_id, gps_accuracy_m, etc.) */
.sop-card code {
  background-color: #eef5f0;
  color: #1b4d3e;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.88em;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid #d5e6db;
}

/* If using Paragraphs module instead of single body HTML */
.paragraph--type--sop-section {
  background-color: #ffffff;
  border: 1px solid #e2e5df;
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

/* Ejemplo: Si el enlace usa un gris claro sobre fondo blanco */
a.ckeditor-readmore-toggler {
  color: #1a1a1a !important; /* Cambia esto por un color con alto contraste, como negro o azul marino */
/*  text-decoration: underline; /* Recomendado para identificar que es un enlace interactivo */
}

/* No olvides ajustar el estado al pasar el cursor (hover) y al seleccionarlo con el teclado (focus) */
a.ckeditor-readmore-toggler:hover,
a.ckeditor-readmore-toggler:focus {
  color: #0fa85b;
  background-color: #f0f0f0; 
}

/* 1. Elimina bordes del propio SVG */
.svg-inline--fa.fa-user-plus {
    border-left: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* 2. Ataca al enlace padre más común en Martis/Drupal */
a[href="/user/register"],
a[href="/en/user/register"],
.user-account-link,
.register-link {
    border-left: none !important;
    box-shadow: none !important; /* A veces usan sombras para simular líneas */
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* 3. Ataca a los elementos LI del menú de navegación (muy frecuente) */
.navbar-nav li,
.header-menu li,
.menu-item--account,
.block-user-account-menu li,
.region-header .block li {
    border-left: none !important;
}

/* 4. Elimina pseudo-elementos (::before/::after) que puedan dibujar la línea */
a[href="/user/register"]::before,
a[href="/user/register"]::after,
.navbar-nav li::before,
.header-menu li::before,
.svg-inline--fa.fa-user-plus::before {
    border-left: none !important;
    content: none !important;
    display: none !important;
}


@media (max-width: 991px) {
    /* 1. Preparar el contenedor padre como referencia */
    .menu-item--expanded > a,
    .menu-dropdown > a {
        position: relative !important; /* NECESARIO para que absolute funcione dentro */
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        padding-right: 40px !important; /* Espacio reservado EXCLUSIVAMENTE para la flecha */
        box-sizing: border-box !important;
        
        /* Eliminamos space-between para evitar conflictos de visibilidad */
        justify-content: flex-start !important; 
    }

    /* 2. Crear la flecha y pegarla al borde derecho con Absolute */
    .menu-item--expanded > a::after,
    .menu-dropdown > a::after {
        content: "\25BC" !important; /* ▼ Flecha nativa segura */
        font-family: system-ui, -apple-system, sans-serif !important;
        font-size: 16px !important; /* Un poco más grande para asegurar visibilidad táctil */
        color: inherit !important;
        
        /* POSICIONAMIENTO ABSOLUTO: La saca del flujo flex y la fija a la derecha */
        position: absolute !important;
        right: 20px !important; /* Distancia exacta desde el borde derecho */
        top: 50% !important;
        transform: translateY(-50%) !important; /* Centrado vertical perfecto */
        
        display: block !important; /* Forzamos visualización */
        line-height: 1 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transition: transform 0.3s ease !important;
    }

    /* 3. Rotación al abrir (ajustamos el transform para mantener el centrado) */
    .menu-item--expanded.open > a::after,
    .menu-dropdown.open > a::after {
        /* Combinamos translateY (centrado) con rotate (animación) */
        transform: translateY(-50%) rotate(180deg) !important;
    }
}


/* =========================================
   1. OCULTAR LA ETIQUETA <LABEL> ORIGINAL
   ========================================= */
.form-item-node-title-select label.control-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* =========================================
   2. INPUT REDONDEADO Y RESPONSIVO
   ========================================= */
.form-item-node-title-select .form-autocomplete,
#edit-node-title-select {
    /* Bordes completamente redondeados */
    border-radius: 50px !important; 
    
    /* Espaciado interno cómodo para lectura y toque táctil */
    padding: 12px 20px !important; 
    
    /* Ocupa todo el ancho disponible en móvil */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    
    /* Altura mínima segura para dedos en pantallas táctiles */
    min-height: 48px !important;
    
    /* Estilo visual limpio */
    font-size: 16px !important; /* Evita zoom automático en iPhone al enfocar */
    line-height: 1.4 !important;
    color: #333 !important;
    background-color: #fff !important;
    border: 1px solid #ccc !important;
    transition: all 0.3s ease !important;
}

/* Efecto al hacer clic/enfocar (Mejora UX) */
.form-item-node-title-select .form-autocomplete:focus,
#edit-node-title-select:focus {
    border-color: #007bff !important; /* Cambia por tu color corporativo NIRUDI */
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25) !important;
    outline: none !important;
}

/* =========================================
   3. PLACEHOLDER PERSONALIZADO
   ========================================= */
.form-item-node-title-select .form-autocomplete::placeholder,
#edit-node-title-select::placeholder {
    color: #999 !important;
    opacity: 1 !important; /* Firefox reduce opacidad por defecto */
    font-style: italic !important; /* Opcional: distingue visualmente del texto escrito */
}

/* Fix específico para Safari/iOS que a veces ignora ::placeholder */
.form-item-node-title-select .form-autocomplete::-webkit-input-placeholder,
#edit-node-title-select::-webkit-input-placeholder {
    color: #999 !important;
    opacity: 1 !important;
}

/* =========================================
   4. AJUSTES ESPECÍFICOS PARA MÓVIL (< 768px)
   ========================================= */
@media (max-width: 767px) {
    .form-item-node-title-select {
        width: 100% !important;
        margin-bottom: 15px !important; /* Espacio si hay otros elementos debajo */
    }
    
    .form-item-node-title-select .form-autocomplete,
    #edit-node-title-select {
        /* En móvil, bordes aún más redondeados y área táctil generosa */
        border-radius: 30px !important; 
        padding: 14px 18px !important;
        font-size: 16px !important; /* CRÍTICO: Previene zoom en iOS Safari */
    }
}