.elementor .cr-search-popup{height:auto;min-height:0px;max-width:680px;padding-block-start:45px;padding-block-end:45px;padding-inline-start:55px;padding-inline-end:55px;background-color:rgba(255, 255, 255, 0.25);/* =========================================================
 COSTA RICA FLOWER SHOPS
 FLOATING GLASS SEARCH — ELEMENTOR V4
 ========================================================= */


/* 1. OVERLAY OSCURO Y DESENFOCADO */

.elementor-popup-modal:has(.cr-search-popup),
.dialog-type-lightbox:has(.cr-search-popup),
.dialog-type-lightbox:has(.cr-search-popup) .dialog-lightbox-widget {
  background: rgba(10, 12, 11, 0.44) !important;

  backdrop-filter: blur(18px) saturate(115%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(115%) !important;
}


/* 2. ELIMINAR TODAS LAS CAJAS BLANCAS DE ELEMENTOR */

.elementor-popup-modal:has(.cr-search-popup) .dialog-widget-content,
.elementor-popup-modal:has(.cr-search-popup) .dialog-message,
.elementor-popup-modal:has(.cr-search-popup) .elementor,
.elementor-popup-modal:has(.cr-search-popup) .elementor-location-popup,

.dialog-type-lightbox:has(.cr-search-popup) .dialog-widget-content,
.dialog-type-lightbox:has(.cr-search-popup) .dialog-message,
.dialog-type-lightbox:has(.cr-search-popup) .elementor,
.dialog-type-lightbox:has(.cr-search-popup) .elementor-location-popup {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  border: 0 !important;
  border-radius: 0 !important;

  box-shadow: none !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;
}


/* Tamaño real del popup: solamente el buscador */

.elementor-popup-modal:has(.cr-search-popup) .dialog-widget-content,
.dialog-type-lightbox:has(.cr-search-popup) .dialog-widget-content {
  width: min(700px, calc(100vw - 40px)) !important;
  max-width: 700px !important;

  min-height: 0 !important;
  height: auto !important;

  animation: crGlassSearchOpen 0.38s
      cubic-bezier(0.22, 1, 0.36, 1) both;
}


/* 3. FLEXBOX SIN FONDO NI ESPACIO EXTRA */

.cr-search-popup {
  position: relative !important;

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

  height: auto !important;
  min-height: 0 !important;

  margin: 0 auto !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  border: 0 !important;
  border-radius: 0 !important;

  box-shadow: none !important;

  overflow: visible !important;
}


/* Neutralizar cualquier fondo heredado del Flexbox V4 */

.cr-search-popup,
.cr-search-popup::before,
.cr-search-popup::after {
  background-color: transparent !important;
  background-image: none !important;
}


/* 4. LIMPIAR EL WIDGET SEARCH */

.cr-search-form,
.cr-search-form > div,
.cr-search-form form,
.cr-search-form .e-search,
.cr-search-form .e-search-form,
.cr-search-form .elementor-search-form {
  position: relative !important;

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

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;

  box-shadow: none !important;
}


/* 5. BARRA FLOTANTE ESTILO APPLE */

.cr-search-form .e-search-input-wrapper,
.cr-search-form .elementor-search-form__container {
  position: relative !important;

  width: 100% !important;
  min-height: 74px !important;

  display: flex !important;
  align-items: center !important;

  margin: 0 !important;
  padding: 0 !important;

  background:
      linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.72),
          rgba(235, 238, 236, 0.48)
      ) !important;

  border: 1px solid rgba(255, 255, 255, 0.68) !important;
  border-radius: 24px !important;

  box-shadow:
      0 30px 75px rgba(0, 0, 0, 0.28),
      0 8px 24px rgba(0, 0, 0, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      inset 0 -1px 0 rgba(0, 0, 0, 0.04) !important;

  backdrop-filter: blur(32px) saturate(165%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(165%) !important;

  overflow: hidden !important;

  transition:
      transform 0.25s ease,
      background 0.25s ease,
      box-shadow 0.25s ease,
      border-color 0.25s ease;
}


/* Estado activo */

.cr-search-form .e-search-input-wrapper:focus-within,
.cr-search-form .elementor-search-form__container:focus-within {
  background:
      linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.72),
          rgba(244, 246, 245, 0.48)
      ) !important;

  border-color: rgba(255, 255, 255, 0.92) !important;

  box-shadow:
      0 0 0 5px rgba(255, 255, 255, 0.10),
      0 36px 90px rgba(0, 0, 0, 0.31),
      inset 0 1px 0 rgba(255, 255, 255, 1) !important;

  transform: translateY(-2px) scale(1.005);
}


/* 6. INPUT */

.cr-search-form input[type="search"],
.cr-search-form input[type="text"] {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 72px !important;

  margin: 0 !important;
  padding: 16px 78px 16px 28px !important;

  background: transparent !important;

  color: #1d1d1f !important;
  caret-color: #8d5a5a !important;

  font-family:
      -apple-system,
      BlinkMacSystemFont,
      "SF Pro Display",
      "Segoe UI",
      "Poppins",
      sans-serif !important;

  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.25px !important;

  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;

  box-shadow: none !important;

  appearance: none !important;
  -webkit-appearance: none !important;
}


.cr-search-form input::placeholder {
  color: rgba(29, 29, 31, 0.58) !important;
  opacity: 1 !important;
}


.cr-search-form input[type="search"]::-webkit-search-decoration,
.cr-search-form input[type="search"]::-webkit-search-cancel-button {
  display: none !important;
  -webkit-appearance: none !important;
}


/* 7. OCULTAR LUPA IZQUIERDA DUPLICADA */

.cr-search-form .e-search-input-wrapper > svg:first-child,
.cr-search-form .e-search-input-wrapper > i:first-child,
.cr-search-form .e-search-input-wrapper > span:first-child,
.cr-search-form .elementor-search-form__input + i {
  display: none !important;
}


/* 8. BOTÓN DE BÚSQUEDA DERECHO */

.cr-search-form button,
.cr-search-form .e-search-submit,
.cr-search-form .elementor-search-form__submit {
  position: absolute !important;

  top: 50% !important;
  right: 12px !important;

  width: 50px !important;
  height: 50px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 0 !important;

  background: rgba(255, 255, 255, 0.30) !important;
  color: #1d1d1f !important;

  border: 1px solid rgba(255, 255, 255, 0.40) !important;
  border-radius: 50% !important;

  box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.74) !important;

  transform: translateY(-50%) !important;

  cursor: pointer;

  transition:
      background 0.2s ease,
      transform 0.2s ease;
}


.cr-search-form button:hover,
.cr-search-form .e-search-submit:hover,
.cr-search-form .elementor-search-form__submit:hover {
  background: rgba(255, 255, 255, 0.72) !important;
}


.cr-search-form button svg,
.cr-search-form .e-search-submit svg,
.cr-search-form .elementor-search-form__submit svg {
  width: 22px !important;
  height: 22px !important;

  color: #1d1d1f !important;
  fill: currentColor !important;
}


.cr-search-form button i,
.cr-search-form .e-search-submit i,
.cr-search-form .elementor-search-form__submit i {
  font-size: 21px !important;
  color: #1d1d1f !important;
}


/* 9. BOTÓN X FLOTANTE */

.elementor-popup-modal:has(.cr-search-popup) .dialog-close-button,
.dialog-type-lightbox:has(.cr-search-popup) .dialog-close-button {
 top: 50% !important;
right: 8px !important;
transform: translateY(-50%) !important;

  width: 38px !important;
  height: 38px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 0 !important;

  background: rgba(255, 255, 255, 0.60) !important;
  color: #1d1d1f !important;

  border: 1px solid rgba(255, 255, 255, 0.58) !important;
  border-radius: 50% !important;

  box-shadow:
      0 12px 30px rgba(0, 0, 0, 0.20),
      inset 0 1px 0 rgba(255, 255, 255, 0.90) !important;

  backdrop-filter: blur(22px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(150%) !important;

  opacity: 1 !important;

  transition:
      background 0.2s ease,
      transform 0.2s ease;
}


.elementor-popup-modal:has(.cr-search-popup) .dialog-close-button:hover,
.dialog-type-lightbox:has(.cr-search-popup) .dialog-close-button:hover {
  background: rgba(255, 255, 255, 0.90) !important;
transform: translateY(-50%) scale(1.06) !important;
}


/* 10. ANIMACIÓN */

@keyframes crGlassSearchOpen {
  from {
      opacity: 0;
      transform: translateY(16px) scale(0.965);
      filter: blur(5px);
  }

  to {
      opacity: 1;
      transform: translateY(0) scale(1);
      filter: blur(0);
  }
}


/* 11. MÓVIL */

@media (max-width: 767px) {

  .elementor-popup-modal:has(.cr-search-popup) .dialog-widget-content,
  .dialog-type-lightbox:has(.cr-search-popup) .dialog-widget-content {
      width: calc(100vw - 24px) !important;
  }

  .cr-search-form .e-search-input-wrapper,
  .cr-search-form .elementor-search-form__container {
      min-height: 62px !important;
      border-radius: 20px !important;
  }

  .cr-search-form input[type="search"],
  .cr-search-form input[type="text"] {
      min-height: 60px !important;

      padding: 14px 66px 14px 20px !important;

      font-size: 16px !important;
  }

  .cr-search-form button,
  .cr-search-form .e-search-submit,
  .cr-search-form .elementor-search-form__submit {
      right: 8px !important;

      width: 44px !important;
      height: 44px !important;
  }

  .elementor-popup-modal:has(.cr-search-popup) .dialog-close-button,
  .dialog-type-lightbox:has(.cr-search-popup) .dialog-close-button {
      top: -48px !important;

      width: 34px !important;
      height: 34px !important;
  }
}\n}