/* ============================================================
   THE HOME CAKE · Animaciones nivel 1 (sutil y elegante)
   Solo CSS · Para PROBAR con Stylebot (no toca tu web)
   Marca: negro #232323 · fucsia #E54584 · blanco
   ------------------------------------------------------------
   Pégalo entero en Stylebot (modo "Code") estando en
   thehomecake.com. Se aplica solo en tu navegador.
   ============================================================ */

/* ---- 1. Suavizado global (transiciones limpias) ---- */
a,
.menu > li > a,
.btn, button,
.form-control,
.property_listing {
  transition: all .25s ease;
}

/* ---- 2. Menú de CABECERA: subrayado fucsia animado al pasar ----
   (acotado a .header_wrapper para que NO afecte al menú del footer) */
.header_wrapper .menu > li > a {
  position: relative !important;
}
.header_wrapper .menu > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  height: 2px;
  width: 0;
  background: #E54584;
  transition: width .28s ease;
}
.header_wrapper .menu > li > a:hover::after,
.header_wrapper .menu > li.current-menu-item > a::after {
  width: 100%;
}
.header_wrapper .menu > li > a:hover {
  color: #E54584 !important;
}

/* ---- 3. Cabecera fija: sombra suave al hacer scroll ---- */
.navbar-fixed-top.is-sticky,
.navbar-fixed-top.sticky,
.navbar-fixed-top.fixed,
.navbar-fixed-top.customnav {
  box-shadow: 0 6px 24px rgba(35, 35, 35, .07) !important;
  transition: box-shadow .3s ease !important;
}

/* ---- 4. Tarjetas de alojamiento: elevación + zoom de foto ---- */
.property_listing {
  border-radius: 16px !important;
  overflow: hidden !important;
  transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s ease !important;
}
.property_listing:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 42px rgba(35, 35, 35, .14) !important;
}
.property_listing img {
  transition: transform .55s ease !important;
}
.property_listing:hover img {
  transform: scale(1.06);
}

/* ---- 5. Botones: leve elevación al pasar ---- */
.btn,
.book_now,
.button_search,
button[type="submit"] {
  transition: transform .2s ease, background .25s ease, box-shadow .25s ease !important;
}
.btn:hover,
.book_now:hover,
.button_search:hover,
button[type="submit"]:hover {
  transform: translateY(-2px) !important;
}

/* ---- 6. Campos de formulario: foco en fucsia ---- */
/* EFECTO ÚNICO de campos de texto en toda la web:
   borde fucsia (sigue la forma redondeada) + glow interior suave.
   Inset -> no se sale, no solapa, respeta esquinas. */
.form-control:hover, .form-control:focus,
input:hover, input:focus,
textarea:hover, textarea:focus,
select:hover, select:focus {
  border-color: #E54584 !important;
  box-shadow: inset 0 0 7px rgba(229, 69, 132, .22) !important;
  outline: none !important;
}

/* ---- 7. Ventanas de acceso / registro (modal Bootstrap) ---- */
.modal-content {
  border-radius: 16px !important;
  border: none !important;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .26) !important;
}
.modal.fade .modal-dialog {
  opacity: 0;
  transform: translateY(22px) scale(.97);
  transition: transform .34s cubic-bezier(.22, .8, .3, 1), opacity .34s ease;
}
.modal.fade.in .modal-dialog,
.modal.show .modal-dialog {
  opacity: 1;
  transform: none;
}

/* ============================================================
   ESTÉTICA / COLOR  (recuadro de precio + tarjeta)
   ============================================================ */

/* ---- A. Precio: fucsia plano, texto blanco, en píldora ----
   (más legible sobre las fotos y más minimalista que el degradado) */
body .property_unit_v3 .price_unit {
  background: #E54584 !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 6px 13px !important;
  border-radius: 999px !important;
  box-shadow: 0 3px 10px rgba(35, 35, 35, .22) !important;
}

/* ---- B. Título del alojamiento en Fraunces ---- */
body .property_listing .category_name .listing_title_unit {
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 600 !important;
  color: #232323 !important;
}
body .property_listing .category_name .listing_title_unit:hover {
  color: #E54584 !important;
}

/* ---- C. Botón "Ver alojamiento": píldora que se rellena de fucsia ---- */
.property_listing a.thc-card-view-btn {
  border-radius: 999px !important;
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease !important;
}
.property_listing a.thc-card-view-btn:hover {
  background: #E54584 !important;
  border-color: #E54584 !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}

/* ---- D. Estrella "destacado" y corazón de favoritos en fucsia ---- */
body .property_listing .featured_div { color: #E54584 !important; }
body .property_listing .property_unit_action .icon-fav svg:hover,
body .property_listing .property_unit_action .icon-fav.icon-fav-on svg { color: #E54584 !important; }

/* ============================================================
   MENÚ DE USUARIO (zona privada) — más moderno
   Barra fucsia que crece + fondo suave + icono en color.
   Sin desplazar el texto -> seguro en móvil (responsive).
   NO toca el formulario de pago de Stripe.
   ============================================================ */
body.logged-in #user_tab_menu_container.user_tab_menu a:not([class*="mvp-"]) {
  position: relative !important;
  border-radius: 10px !important;
  transition: background .25s ease, color .2s ease !important;
}
body.logged-in #user_tab_menu_container.user_tab_menu a:not([class*="mvp-"])::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 0;
  background: #E54584;
  border-radius: 0 3px 3px 0;
  transform: translateY(-50%);
  transition: height .26s ease;
}
body.logged-in #user_tab_menu_container.user_tab_menu a:not([class*="mvp-"]):hover,
body.logged-in #user_tab_menu_container.user_tab_menu a:not([class*="mvp-"]).user_tab_active {
  background: #fdeef4 !important;
  color: #E54584 !important;
  transform: none !important;   /* anula el salto lateral del tema (translateX) */
}
body.logged-in #user_tab_menu_container.user_tab_menu a:not([class*="mvp-"]):hover::before,
body.logged-in #user_tab_menu_container.user_tab_menu a:not([class*="mvp-"]).user_tab_active::before {
  height: 62%;
}
body.logged-in #user_tab_menu_container.user_tab_menu a:not([class*="mvp-"]):hover i,
body.logged-in #user_tab_menu_container.user_tab_menu a:not([class*="mvp-"]).user_tab_active i {
  color: #E54584 !important;
}

/* ============================================================
   HOME (Elementor) — botones del hero + iconos de ventajas
   ============================================================ */

/* Botones del hero: fucsia plano + elevación sutil al pasar */
body .thc-page-hero .elementor-button {
  background: #E54584 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 8px rgba(35, 35, 35, .10) !important;
  transition: transform .22s ease, background .25s ease, box-shadow .25s ease !important;
}
body .thc-page-hero .elementor-button:hover {
  background: #d23b76 !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(35, 35, 35, .16) !important;
}
/* Secundario ("Publica tus alojamientos", dentro de ¿Eres anfitrión?):
   negro sólido (legible sobre la tarjeta translúcida) -> fucsia al pasar.
   Jerarquía: principal fucsia, secundario negro. */
body .thc-page-hero .transpa .elementor-button {
  background: #232323 !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(35, 35, 35, .14) !important;
}
body .thc-page-hero .transpa .elementor-button:hover {
  background: #E54584 !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(35, 35, 35, .16) !important;
}

/* Iconos de ventajas: sutil y elegante (no se llena de fucsia) ----
   al pasar -> borde + icono en fucsia, leve elevación, sombra suave */
.elementor-widget-icon-box .elementor-icon {
  transition: background .3s ease, transform .3s ease, box-shadow .3s ease, border-color .3s ease !important;
}
.elementor-widget-icon-box .elementor-icon:hover {
  box-shadow: 0 0 0 2px #E54584, 0 10px 26px rgba(229, 69, 132, .34) !important;   /* ring + glow fuerte */
  transform: translateY(-4px) scale(1.08) !important;   /* escala + elevación = impacto */
}
.elementor-widget-icon-box .elementor-icon:hover i { color: #E54584 !important; }
.elementor-widget-icon-box .elementor-icon:hover svg { color: #E54584 !important; stroke: #E54584 !important; }

/* ============================================================
   TODOS LOS BOTONES — animación sutil al pasar (elevación)
   Solo añade movimiento; no cambia el color de cada botón.
   (Excluye steppers +/- de huéspedes y controles del mapa.)
   ============================================================ */
.btn,
.elementor-button,
.thc-card-view-btn,
.thc-blog-card__button,
.mvp-booking-card__button,
.mvp-booking-request-action,
.mvp-booking-reply__button,
.mvp-stripe-trigger-button,
.vc_button,
.wpb_button,
.wpestate_vc_button,
.button_with_text_wprentals,
.fullp-button,
.advanced_search_submit_button,
.mess_send_reply_button,
button[type="submit"],
input[type="submit"] {
  transition: transform .2s ease, box-shadow .25s ease, background .25s ease, color .2s ease, border-color .2s ease !important;
}
.btn:hover,
.elementor-button:hover,
.thc-card-view-btn:hover,
.thc-blog-card__button:hover,
.mvp-booking-card__button:hover,
.mvp-booking-request-action:hover,
.mvp-booking-reply__button:hover,
.mvp-stripe-trigger-button:hover,
.vc_button:hover,
.wpb_button:hover,
.wpestate_vc_button:hover,
.button_with_text_wprentals:hover,
.fullp-button:hover,
.advanced_search_submit_button:hover,
.mess_send_reply_button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  transform: translateY(-2px) !important;
}

/* Buscador home: usa el MISMO efecto global de campos de texto (sección 6).
   No estilamos el wrapper (daba esqu