/*
 * SB Builder – tryb „Prosty” edytora (body.hb-easy, przełącznik Prosty / Ekspert na górnym pasku).
 * Ukrywa tylko interfejs: nic nie blokuje i nie zmienia zapisu. Ekspert = pełny Vvveb.
 */

/* górny pasek: zostają cofnij/ponów, podgląd, urządzenia, wersje, AI, zapis */
body.hb-easy #toggle-file-manager-btn,
body.hb-easy #toggle-right-column-btn,
body.hb-easy #designer-mode-btn,
body.hb-easy #fullscreen-btn,
body.hb-easy #toggle-hidden,
body.hb-easy #toggle-tree-list,
body.hb-easy #download-btn,
body.hb-easy #top-panel .btn-preview-url,
body.hb-easy #top-panel .percent { display: none !important; }

/* lewy pasek: bez globalnych stylów strony */
body.hb-easy #elements-tabs .component-configuration-tab { display: none !important; }

/* drzewo strony i dolny pasek (ścieżka + kod) */
body.hb-easy #bottom-panel { display: none !important; }
body.hb-easy,
body.hb-easy[data-hb-skin] { --builder-bottom-panel-height: 0px; }

/* pasek nad zaznaczonym elementem: bez „rodzic” i kodu HTML */
body.hb-easy #select-actions #parent-btn,
body.hb-easy #select-actions #edit-code-btn { display: none !important; }

/* właściwości: bez zakładki Zaawansowane i grupy „General” (id, title, class) */
body.hb-easy .component-properties .nav-tabs .advanced-tab,
body.hb-easy .component-properties .nav-tabs a[href^="#advanced"] { display: none !important; }
body.hb-easy label.header[data-header="element_header"],
body.hb-easy label.header[data-header="element_header"] + input,
body.hb-easy label.header[data-header="element_header"] + input + .section { display: none !important; }

/* Wygląd: tylko kolory, tekst (rozmiar, grubość, wyrównanie), odstępy i obraz tła */
body.hb-easy [id^="style"][id$="tab"] > .pb-2:first-child { display: none !important; } /* stan :hover itp. */
body.hb-easy label.header[data-header="size_header"],
body.hb-easy label.header[data-header="size_header"] + input,
body.hb-easy label.header[data-header="size_header"] + input + .section,
body.hb-easy label.header[data-header="border_header"],
body.hb-easy label.header[data-header="border_header"] + input,
body.hb-easy label.header[data-header="border_header"] + input + .section,
body.hb-easy label.header[data-header="border_radius_header"],
body.hb-easy label.header[data-header="border_radius_header"] + input,
body.hb-easy label.header[data-header="border_radius_header"] + input + .section { display: none !important; }
/* w „Display” zostają same kolory – nagłówek grupy dostaje nazwę „Kolory” */
body.hb-easy label.header[data-header="display_header"] + input + .section [data-key]:not([data-key="color"]):not([data-key="background-color"]),
body.hb-easy label.header[data-header="typography_header"] + input + .section [data-key="font-family"],
body.hb-easy label.header[data-header="typography_header"] + input + .section [data-key="line-height"],
body.hb-easy label.header[data-header="typography_header"] + input + .section [data-key="letter-spacing"],
body.hb-easy label.header[data-header="typography_header"] + input + .section [data-key^="text-decoration"],
body.hb-easy label.header[data-header="background_image_header"] + input + .section [data-key^="background-position"],
body.hb-easy label.header[data-header="background_image_header"] + input + .section [data-key="background-repeat"] { display: none !important; }
body.hb-easy label.header[data-header="display_header"] > span { font-size: 0; }
body.hb-easy label.header[data-header="display_header"] > span::after { content: var(--hb-colors-label, "Colors"); font-size: 13px; }

/* przełącznik Prosty / Ekspert (oba wyglądy edytora) */
.hb-mode { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: #f6f7f5; border: 1px solid #e7e9e5; margin-right: 8px; }
.hb-mode button { border: 0; background: none; padding: 4px 10px; border-radius: 7px; font-family: inherit; font-size: 12.5px; font-weight: 500; line-height: 1.2; color: #4a5451; white-space: nowrap; }
.hb-mode button:hover { color: #0b0f0e; }
.hb-mode button.on { background: #fff; color: #0b0f0e; box-shadow: 0 0 0 1px rgba(11, 15, 14, .06), 0 1px 2px rgba(11, 15, 14, .05); }

/* poradnik „Szybki start” w panelu Strony (tylko tryb Prosty) */

.hb-guide {
	display: block;
	margin: 14px 12px 16px;
	padding: 2px 14px 12px;
	border: 1px solid #e7e9e5;
	border-radius: 12px;
	background: #fff;
	font-size: 13px;
	line-height: 1.45;
	color: #4a5451;
}
.hb-guide summary { padding: 10px 0 6px; font-weight: 600; font-size: 13.5px; color: #0b0f0e; cursor: pointer; }
.hb-guide ol { margin: 4px 0 0; padding: 0; list-style: none; counter-reset: hbg; display: grid; gap: 10px; }
.hb-guide li { counter-increment: hbg; display: grid; grid-template-columns: 22px 1fr; column-gap: 8px; }
.hb-guide li::before { content: counter(hbg); grid-row: span 2; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #e6f6ef; color: #0f766e; font-size: 11.5px; font-weight: 600; }
.hb-guide li b { color: #0b0f0e; font-weight: 600; }
.hb-guide-more { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid #e7e9e5; font-size: 12px; color: #848d89; }

/* panel „Start”: w WordPressie edytuje się jedną stronę naraz, więc lista plików Vvveb jest zbędna */
#pages-tabs #filemanager { display: none !important; }
#pages-tabs .hb-guide { margin-top: 12px; }
.hb-guide-new { display: block; margin: 0 12px 14px; padding: 9px 12px; border: 1px dashed #c9cec8; border-radius: 10px; color: #0f766e; font-size: 13px; font-weight: 500; text-align: center; text-decoration: none; }
.hb-guide-new:hover { border-color: #0f766e; background: #e6f6ef; color: #0f766e; }

/* przełącznik na środku górnego paska (nowy wygląd): pasek to siatka 1fr | auto | 1fr, więc środek się nie przesuwa */
body[data-hb-skin] #vvveb-builder #top-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
body[data-hb-skin] #top-panel > .hb-bar-left { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
body[data-hb-skin] #top-panel > .hb-bar-right { display: flex; align-items: center; justify-content: flex-end; gap: 4px; min-width: 0; }
body[data-hb-skin] #top-panel > .hb-mode { margin: 0 12px; }
body[data-hb-skin] #top-panel .me-2 { display: flex; align-items: center; }

/* menu „+” pod sekcją: pusta / gotowa / z AI */
.hb-add-pop { display: none; position: fixed; z-index: 99990; flex-direction: column; gap: 2px; width: 270px; padding: 6px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(11, 15, 14, .08), 0 18px 40px -12px rgba(11, 15, 14, .28); font-family: inherit; }
.hb-add-pop button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: none; color: #0b0f0e; text-align: left; cursor: pointer; }
.hb-add-pop button:hover:not(:disabled) { background: #e6f6ef; }
.hb-add-pop button:hover:not(:disabled) i { color: #0f766e; }
.hb-add-pop button:disabled { cursor: default; opacity: .55; }
.hb-add-pop i { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: #f6f7f5; color: #4a5451; font-size: 18px; }
.hb-add-pop button[data-a="ai"] i { background: #07110f; color: #c6f36b; }
.hb-add-pop b { display: block; font-size: 13px; font-weight: 600; }
.hb-add-pop small { display: block; font-size: 11.5px; color: #848d89; line-height: 1.35; }

/* panel Start: w trybie Prosty poradnik (góra) + nawigator (dół) po połowie, w Ekspercie sam nawigator */
#pages-tabs { flex-direction: column; }
#pages-tabs > .hb-guide { flex: 0 1 50%; min-height: 0; overflow: auto; }
#pages-tabs > .hb-guide-new { flex: none; }
#pages-tabs > #tree-list { flex: 1 1 50%; min-height: 0; height: auto !important; display: flex; flex-direction: column; }
#pages-tabs > #tree-list .tree { flex: 1; min-height: 0; height: auto; }
body:not(.hb-easy) #pages-tabs > .hb-guide,
body:not(.hb-easy) #pages-tabs > .hb-guide-new { display: none !important; }
/* przyciski „przenieś nawigator” z Vvveb mylą; zamykanie tylko w Ekspercie */
#tree-list .header [data-vvveb-action="treeListRight"],
#tree-list .header [data-vvveb-action="treeListPanel"],
body.hb-easy #tree-list .header [data-vvveb-action="toggleTreeList"] { display: none !important; }

/* Prosty: jedna karta – treść i wygląd jedno pod drugim, bez przełączania zakładek */
body.hb-easy .component-properties > .nav-tabs,
body.hb-easy .component-properties .nav.nav-tabs { display: none !important; }
body.hb-easy .component-properties [id^="content"][id$="tab"],
body.hb-easy .component-properties [id^="style"][id$="tab"] { display: block !important; opacity: 1 !important; }
body.hb-easy .component-properties [id^="advanced"][id$="tab"] { display: none !important; }
body.hb-easy .component-properties [id^="style"][id$="tab"] { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--sd-line, #e7e9e5); }
body.hb-easy .component-properties [id^="style"][id$="tab"]::before { content: var(--hb-look-label, "Look"); display: block; margin: 0 0 6px 12px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sd-ink-3, #848d89); }
/* rzadko potrzebne pola treści */
body.hb-easy .component-properties [data-key="autofocus"],
body.hb-easy .component-properties [data-key="disabled"],
body.hb-easy .component-properties [data-key="rel"],
body.hb-easy .component-properties [data-key="download"],
body.hb-easy .component-properties [data-key="size"],
body.hb-easy .component-properties [data-key="background"],
body.hb-easy .component-properties [data-key="align"],
body.hb-easy .component-properties [data-key="container-width"],
body.hb-easy .component-properties [data-key="container-height"],
body.hb-easy .component-properties [data-key="top_separator"],
body.hb-easy .component-properties [data-key="bottom_separator"],
body.hb-easy .component-properties [data-key="stroke-width"],
body.hb-easy .component-properties [data-key="stroke"],
body.hb-easy .component-properties [data-key="parallax"] { display: none !important; }
/* sekcja: bez separatorów i pola „Label”; tło tylko w jednym miejscu (grupa „Tło” sekcji) */
body.hb-easy label.header[data-header$="_separator"],
body.hb-easy label.header[data-header$="_separator"] + input,
body.hb-easy label.header[data-header$="_separator"] + input + .section,
body.hb-easy label.header[data-header="default"]:has(+ input + .section [data-key="label"]),
body.hb-easy label.header[data-header="default"] + input:has(+ .section [data-key="label"]),
body.hb-easy .section:has(> [data-key="label"]),
body.hb-easy .component-properties .tab-content:has([data-header="section_background_header"]) label.header[data-header="background_image_header"],
body.hb-easy .component-properties .tab-content:has([data-header="section_background_header"]) label.header[data-header="background_image_header"] + input,
body.hb-easy .component-properties .tab-content:has([data-header="section_background_header"]) label.header[data-header="background_image_header"] + input + .section { display: none !important; }