/* =====================================================
   FAVORITE HEART (Overlay Button) – TOP RIGHT + Elementor-steuerbar
   ===================================================== */

/* Default Werte (global) */
:root{
  --lana-fav-top: 14px;
  --lana-fav-right: 14px;
}

.lana-fav-btn{
  position: absolute !important;
  top: var(--lana-fav-top) !important;
  right: var(--lana-fav-right) !important;
  left: auto !important;

  z-index: 60;

  appearance: none !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;

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

  cursor: pointer;
  line-height: 0 !important;

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

  border-radius: 0 !important;
}

.lana-fav-btn,
.lana-fav-btn *{
  background: transparent !important;
  box-shadow: none !important;
}

/* Herz-IMG (weiß/rot) */
.lana-fav-heart-img{
  width: 25px !important;
  height: 25px !important;
  display: block !important;

  object-fit: contain !important;
  object-position: center !important;

  transition: transform .18s ease, filter .18s ease;
}

/* optional: leichter Schatten damit weiß auf hellen Flächen sichtbar bleibt */
.lana-fav-btn.is-inactive .lana-fav-heart-img{
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.35));
}

/* rot braucht weniger Schatten */
.lana-fav-btn.is-active .lana-fav-heart-img{
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.22));
}

/* Hover (Desktop only) */
@media (min-width: 768px){
  .lana-fav-btn:hover .lana-fav-heart-img{
    transform: scale(1.08);
  }
}

/* Klick Animation */
.lana-fav-btn:active .lana-fav-heart-img{
  transform: scale(0.92);
}

/* Mobile: Werte via CSS Variablen */
@media (max-width: 767px){
  :root{
    --lana-fav-top: 12px;
    --lana-fav-right: 12px;
  }

  .lana-fav-heart-img{
    width: 30px !important;
    height: 30px !important;
  }
}


/* =====================================================
   FAVORITES GRID
   ===================================================== */

.lana-fav-list{
  width: 100%;
}

.lana-fav-list-inner{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

@media (max-width: 1024px){
  .lana-fav-list-inner{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px){
  .lana-fav-list-inner{
    grid-template-columns: 1fr;
  }
}


/* =====================================================
   CARD (NO MOVE ON HOVER, NO ROUNDED CORNERS)
   ===================================================== */

.lana-fav-card{
  border-radius: 0 !important;
  overflow: hidden;

  /* dunklerer Body-Hintergrund (weniger "beißend") */
  background: #d9d0c4;

  box-shadow: 0 16px 40px rgba(0,0,0,0.08);

  /* KEIN transform mehr => Card bewegt sich nicht */
  transition: box-shadow .22s ease;
}

@media (min-width: 768px){
  .lana-fav-card:hover{
    box-shadow: 0 20px 52px rgba(0,0,0,0.12);
  }
}


/* =====================================================
   IMAGE (darken on hover only)
   ===================================================== */

.lana-fav-card a.lana-fav-img{
  position: relative;
  display: block;
}

.lana-fav-card a.lana-fav-img > img{
  width: 100% !important;
  height: 420px !important;
  max-height: 420px !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;

  transition: filter .18s ease;
}

/* Hover: Bild DEUTLICHER dunkler */
@media (min-width: 768px){
  .lana-fav-card:hover a.lana-fav-img > img{
    filter: brightness(0.84);
  }
}

@media (max-width: 767px){
  .lana-fav-card a.lana-fav-img > img{
    height: 340px !important;
    max-height: 340px !important;
  }
}


/* =====================================================
   CARD BODY
   ===================================================== */

.lana-fav-card-body{
  padding: 18px 18px 20px;
}

/* Schrift leicht angepasst für dunkleren Background */
.lana-fav-name{
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-size: 18px;
  margin-bottom: 6px;
  color: #1a232b;
}

.lana-fav-meta{
  font-size: 13px;
  opacity: 0.72;
  margin-bottom: 16px;
  color: #1a232b;
}


/* =====================================================
   ACTION BUTTONS (Elegant Square Style)
   ===================================================== */

.lana-fav-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* --- HARD OVERRIDE Elementor/Theme button styles --- */
.lana-fav-card .lana-fav-actions a.lana-fav-open,
.lana-fav-card .lana-fav-actions button.lana-fav-remove,
button.lana-fav-clear-all{
  -webkit-appearance: none !important;
  appearance: none !important;

  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;

  font-family: inherit !important;
  font-weight: 500 !important;

  padding: 8px 12px !important;
  min-height: 0 !important;
  height: auto !important;
  line-height: 1.2 !important;

  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;

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

  cursor: pointer !important;
  text-decoration: none !important;

  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

/* PROFILE = hell → dunkel hover */
.lana-fav-card .lana-fav-actions a.lana-fav-open{
  background: rgba(255,255,255,0.50) !important;
  color: #111111 !important;
  border: 1px solid rgba(0,0,0,0.18) !important;
}

@media (min-width: 768px){
  .lana-fav-card .lana-fav-actions a.lana-fav-open:hover{
    background: #1f2933 !important;
    color: #ffffff !important;
    border-color: #1f2933 !important;
  }
}

/* DELETE FAVORITE = anthracite always */
.lana-fav-card .lana-fav-actions button.lana-fav-remove{
  background: #1f2933 !important;
  color: #ffffff !important;
  border: 1px solid #1f2933 !important;
}

@media (min-width: 768px){
  .lana-fav-card .lana-fav-actions button.lana-fav-remove:hover{
    background: #1b242d !important;
    border-color: #1b242d !important;
  }
}


/* =====================================================
   CLEAR ALL BUTTON
   ===================================================== */

button.lana-fav-clear-all{
  background: #1f2933 !important;
  color: #ffffff !important;
  border: 1px solid #1f2933 !important;

  padding: 10px 16px !important;

  transition: background .18s ease, border-color .18s ease;
}

@media (min-width: 768px){
  button.lana-fav-clear-all:hover{
    background: #1b242d !important;
    border-color: #1b242d !important;
  }
}


/* =====================================================
   EMPTY TEXT
   ===================================================== */

.lana-fav-empty{
  margin-top: 20px;
  opacity: 0.6;
  font-size: 14px;
}

/* =====================================================
   FIX: Herz-Shortcode-Widget als Overlay INS Bild (Elementor Loop)
   ===================================================== */

/* Card als Bezugspunkt */
.lana-fav-card{
  position: relative !important;
}

/* Das Shortcode-Widget selbst wird oben rechts über das Bild gelegt */
.lana-fav-card .lana-fav-overlay{
  position: absolute !important;
  top: var(--lana-fav-top, 14px) !important;
  right: var(--lana-fav-right, 14px) !important;
  left: auto !important;

  z-index: 80 !important;
  margin: 0 !important;
  padding: 0 !important;

  /* verhindert, dass der Widget-Container Fläche "klicks frisst" */
  pointer-events: none !important;
}

/* Nur der Button soll klickbar sein */
.lana-fav-card .lana-fav-overlay .lana-fav-btn{
  pointer-events: auto !important;

  /* wichtig: Button NICHT nochmal absolut, sonst doppelt */
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
}

/* Mobile Anpassung */
@media (max-width: 767px){
  .lana-fav-card .lana-fav-overlay{
    top: var(--lana-fav-top-mobile, 12px) !important;
    right: var(--lana-fav-right-mobile, 12px) !important;
  }
}

/* =====================================================
   ELEMENTOR LOOP FIX: Herz als Overlay oben rechts im Bild
   (greift im Loop, nicht nur in Favorites-List)
   ===================================================== */

/* Loop-Item als Bezugspunkt (Elementor Loop) */
.e-loop-item,
.elementor-loop-item,
.elementor-widget-loop-grid .e-loop-item,
.elementor-widget-loop-grid .elementor-loop-item{
  position: relative !important;
}

/* Shortcode-Widget Wrapper overlay */
.e-loop-item .lana-fav-overlay,
.elementor-loop-item .lana-fav-overlay{
  position: absolute !important;
  top: 18px !important;
  right: 22px !important;
  left: auto !important;
  bottom: auto !important;

  z-index: 999 !important;
  margin: 0 !important;
  padding: 0 !important;

  /* verhindert, dass der Widget-Block Klicks blockiert */
  pointer-events: none !important;
}

/* Nur der Button klickbar */
.e-loop-item .lana-fav-overlay .lana-fav-btn,
.elementor-loop-item .lana-fav-overlay .lana-fav-btn{
  pointer-events: auto !important;

  /* wichtig: NICHT nochmal absolut im Button selbst (sonst doppelt) */
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
}

/* Mobile Position */
@media (max-width: 767px){
  .e-loop-item .lana-fav-overlay,
  .elementor-loop-item .lana-fav-overlay{
    top: 20px !important;
    right: 20px !important;
  }
}