/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.4.1757400093
Updated: 2025-09-09 08:41:33

*/

/* VÉGLEGES CSS JAVÍTÁS (MAXIMÁLIS SPECIFIKUSSÁG) */

/* --- 1. Shortcode Állapot Kijelzés Stílusa (Gomb helyett, de gombos megjelenéssel) --- */

.fliegl-product-status span {
  display: inline-block;
  padding: 10px 18px; /* nagyobb „keret” a szöveg körül */
  border-radius: 8px;
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
  color: #fff;
}

/* --- 2. Színek az új shortcode osztályok szerint --- */

.fliegl-product-status .status-available {
  background-color: #16a34a; /* Zöld: Elérhető */
}

.fliegl-product-status .status-reserved,
.fliegl-product-status .status-reserved-me {
  background-color: #f59e0b; /* Narancs: Foglalva / Saját foglalás */
}

.fliegl-product-status .status-sold {
  background-color: #6b7280; /* Szürke: Elkelt */
}

/* --- 3. Gombok Tiltásának és Stílusának Javítása (Shortcode-ra szabva) --- */

/* Fontos: A shortcode DIV-nek NEM kell a .ig-status-wrap, 
   ez az Elementor konténernek kell, amiben a shortcode és a gomb is van.
   Ez a rész feltételezi, hogy a .ig-status-wrap DIV-nek van egy data-status attribútuma, 
   amit manuálisan állít be, vagy egy másik kód állít be.
   
   A shortcode nem állít be data-status attribútumot, ezért a gomb tiltásához a shortcode szövegét kell figyelni, vagy az Elementor konténer data-status beállítását meg kell tartani, ha lehetséges.
   
   Mivel a shortcode fut, a legtisztább, ha a shortcode kimenetének CSS-ét használjuk a tiltáshoz is:
*/

/* --- CSAK az Elementor Konténeren belüli Gombokra érvényes tiltás, HA a shortcode KIÍRJA a Foglalva/Elkelt státuszt --- */

/* Ha a shortcode a Foglalva, Elkelt, Saját foglalás szavakat tartalmazza (ezekhez van CSS osztály), akkor tiltjuk a gombokat a szülő konténerben. 
   EZT A CSS-T NEM TUDJUK MEGOLDANI PURE CSS-SEL, MERT A SHORTCODE KÜLÖN EGYED!
   
   Két lehetőség van:
   1. Manuálisan adja meg az Elementor Konténernek a data-status attribútumot az ACF mező alapján (régi módszer).
   2. Engedélyezzük, hogy a shortcode konténerének DOM-ja alapján találjuk meg a gombot. (Legrosszabb, de néha működik).
   
   A legbiztonságosabb, ha az állapotot beállító SPAN alapján keresünk:
*/

/* Általános tiltás a gombokra, ha a Foglalva, Saját foglalás, vagy Elkelt státusz látszik a DOM-ban. */
.elementor-column:has(.status-reserved) .elementor-button,
.elementor-column:has(.status-reserved-me) .elementor-button,
.elementor-column:has(.status-sold) .elementor-button,
.elementor-column:has(.status-reserved) a.elementor-button-link,
.elementor-column:has(.status-reserved-me) a.elementor-button-link,
.elementor-column:has(.status-sold) a.elementor-button-link {
  pointer-events: none !important;
  cursor: not-allowed !important;
  background-color: #c9ccd1 !important;
  border-color: #c9ccd1 !important;
  color: #666 !important;
  filter: grayscale(100%);
  opacity: 0.85;
  box-shadow: none !important;
}

/* --- KIFEJEZETTEN engedélyezzük az Elérhető állapotban --- */
/* Fontos: Elementor a .elementor-button-wrapper-t is használja.
   Ha a "status-available" osztály szerepel a konténerben, akkor felülírjuk a tiltást. */
.elementor-column:has(.status-available) .elementor-button,
.elementor-column:has(.status-available) a.elementor-button-link {
  pointer-events: auto !important;
  cursor: pointer !important;
  filter: none !important;
  opacity: 1 !important;
  /* Fontos: Itt a saját Elementor gomb stílusai lépnek életbe újra, nem kell háttérszínt felülírni. */
}