/* ==============================================================
   BONJOUR WEB — 27-R02
   CookieYes mobile compacto + ícono JoinChat
   ============================================================== */

/* --------------------------------------------------------------
   JOINCHAT
   El botón existe y conserva su color/función.
   Reforzamos el ícono de WhatsApp directamente como background.
   -------------------------------------------------------------- */

.joinchat .joinchat__button {
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3.516 3.516c4.686-4.686 12.284-4.686 16.97 0 4.686 4.686 4.686 12.283 0 16.97a12.004 12.004 0 0 1-13.754 2.299l-5.814.735a.392.392 0 0 1-.438-.44l.748-5.788A12.002 12.002 0 0 1 3.517 3.517zm3.61 17.043.3.158a9.846 9.846 0 0 0 11.534-1.758c3.843-3.843 3.843-10.074 0-13.918-3.843-3.843-10.075-3.843-13.918 0a9.846 9.846 0 0 0-1.747 11.554l.16.303-.51 3.942a.196.196 0 0 0 .219.22l3.961-.501zm6.534-7.003-.933 1.164a9.843 9.843 0 0 1-3.497-3.495l1.166-.933a.792.792 0 0 0 .23-.94L9.561 6.96a.793.793 0 0 0-.924-.445l-2.023.524a.797.797 0 0 0-.588.88 11.754 11.754 0 0 0 10.005 10.005.797.797 0 0 0 .88-.587l.525-2.023a.793.793 0 0 0-.445-.923L14.6 13.327a.792.792 0 0 0-.94.23z'/%3E%3C/svg%3E")
    !important;

  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 54% 54% !important;
}

/* --------------------------------------------------------------
   COOKIEYES — MOBILE COMPACTO
   Sólo se cambia la presentación. No se toca ninguna acción.
   -------------------------------------------------------------- */

@media (max-width: 576px) {

  .cky-consent-container {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
  }

  .cky-consent-container .cky-consent-bar {
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 0 !important;
    box-shadow: 0 -8px 24px rgba(15, 45, 78, .10) !important;
  }

  .cky-consent-container .cky-notice {
    max-width: 100% !important;
  }

  .cky-consent-container .cky-title {
    margin: 0 0 4px !important;
    padding: 0 !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
  }

  .cky-consent-container .cky-notice-group {
    display: block !important;
  }

  .cky-consent-container .cky-notice-des {
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;

    font-size: 12.5px !important;
    line-height: 1.35 !important;
  }

  .cky-consent-container .cky-notice-des p {
    margin: 0 !important;
    font-size: inherit !important;
    line-height: inherit !important;
  }

  /* El segundo párrafo repite una acción que ya expresan los botones.
     Se conserva en la configuración/CMP y sólo se oculta en el aviso mobile. */
  .cky-consent-container .cky-notice-des p + p {
    display: none !important;
  }

  .cky-consent-container .cky-notice-des a.cky-policy {
    display: inline !important;
    font-size: inherit !important;
    white-space: nowrap !important;
  }

  .cky-consent-container .cky-notice-btn-wrapper {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;

    width: 100% !important;
    max-width: 100% !important;

    padding: 0 !important;
    margin: 8px 0 0 !important;
  }

  .cky-consent-container .cky-notice-btn-wrapper .cky-btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    min-height: 38px !important;

    margin: 0 !important;
    padding: 7px 5px !important;

    font-size: 12px !important;
    line-height: 1.15 !important;
    font-weight: 600 !important;

    border-width: 1.5px !important;
    border-radius: 5px !important;

    white-space: normal !important;
  }

  /* Orden comercial/UX:
     Aceptar | Personalizar | Rechazar */
  .cky-consent-container .cky-btn-accept {
    order: 1 !important;
  }

  .cky-consent-container .cky-btn-customize {
    order: 2 !important;
  }

  .cky-consent-container .cky-btn-reject {
    order: 3 !important;
  }

  /* Evita que el botón de preferencias posterior interfiera con JoinChat. */
  .cky-btn-revisit-wrapper {
    width: 42px !important;
    height: 42px !important;
  }
}

/* Pantallas muy angostas: mantenemos tres acciones sin convertirlas en
   una columna alta. */
@media (max-width: 350px) {
  .cky-consent-container .cky-consent-bar {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .cky-consent-container .cky-notice-btn-wrapper {
    gap: 4px !important;
  }

  .cky-consent-container .cky-notice-btn-wrapper .cky-btn {
    padding-left: 3px !important;
    padding-right: 3px !important;
    font-size: 11px !important;
  }
}