/* MARIPOSA V45 – EXACT HEADER TRANSPARENT FIX
   This targets the real Mariposa header structure:
   <div id="header"></div> loads components/fejlec.html
   and inside it: <header class="header"><div class="topbar">...</div><nav class="menu">
*/

/* Keep the body motif as the single background */
html,
body {
  background-color: #f4eddf !important;
  background-image: url("../assets/images/butterfly-bg-v41.jpeg") !important;
  background-repeat: repeat !important;
  background-position: center top !important;
  background-size: 820px auto !important;
}

/* The component mount point itself must not paint an old beige/svg background */
#header {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Exact loaded header component */
#header header.header,
#header .header,
header.header,
.header {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* THIS was the important missing layer:
   index2.css contains .header .topbar background rules. */
#header header.header .topbar,
#header .header .topbar,
header.header .topbar,
.header .topbar,
#header .topbar,
.topbar {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Navigation/menu band under the logo */
#header nav.menu,
#header .menu,
#header nav.menu > ul,
#header .menu > ul,
header.header nav.menu,
header.header .menu,
header.header nav.menu > ul,
header.header .menu > ul {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Menu items should not create beige blocks */
#header .menu li,
#header .menu a,
#header nav li,
#header nav a {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Dropdown submenu may keep a light readable card, but with the new motif */
#header .menu ul ul,
header.header .menu ul ul {
  background-color: rgba(255, 252, 245, 0.92) !important;
  background-image: url("../assets/images/butterfly-bg-v41.jpeg") !important;
  background-repeat: repeat !important;
  background-position: center top !important;
  background-size: 820px auto !important;
}

/* Pseudo layers from previous fixes/templates */
#header::before,
#header::after,
#header header.header::before,
#header header.header::after,
#header .header::before,
#header .header::after,
#header .topbar::before,
#header .topbar::after,
#header .menu::before,
#header .menu::after,
header.header::before,
header.header::after,
.header::before,
.header::after,
.topbar::before,
.topbar::after,
.menu::before,
.menu::after {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  opacity: 0 !important;
}

/* Mobile: exact menu panel should also show the same motif / not old beige */
@media (max-width: 900px) {
  #header,
  #header header.header,
  #header .header,
  #header .topbar,
  #header nav.menu,
  #header .menu,
  #header .menu > ul,
  #header nav.menu > ul,
  header.header,
  header.header .topbar,
  header.header nav.menu,
  header.header .menu,
  header.header .menu > ul {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  /* the opened vertical menu box */
  #header .menu.active,
  #header .menu.open,
  #header .menu.active > ul,
  #header .menu.open > ul,
  #header .menu > ul,
  #menu,
  #menu > ul {
    background-color: rgba(255, 252, 245, 0.88) !important;
    background-image: url("../assets/images/butterfly-bg-v41.jpeg") !important;
    background-repeat: repeat !important;
    background-position: center top !important;
    background-size: 820px auto !important;
  }
}

/* Protect the gold booking button exactly */
#header .header-booking-btn,
.header-booking-btn,
#header a.header-booking-btn,
a.header-booking-btn {
  background: #c8a96a !important;
  background-color: #c8a96a !important;
  background-image: none !important;
  color: #ffffff !important;
  border-color: #c8a96a !important;
  opacity: 1 !important;
}

#header .header-booking-btn:hover,
.header-booking-btn:hover {
  background: #a9823c !important;
  background-color: #a9823c !important;
  color: #ffffff !important;
}

/* Protect the round language selector */
#header .lang-toggle,
#header .premium-lang-switcher,
#header .split-flag,
.lang-toggle,
.premium-lang-switcher,
.split-flag {
  background-image: none !important;
}

#header .lang-toggle,
.lang-toggle {
  background-color: rgba(255,255,255,0.90) !important;
}

/* Do not touch chat/help headers */
.mariposa-chat-window header,
.mariposa-chat-window .header,
.help-header,
.help-header * {
  background-image: initial;
}